@zywave/zui-picker
Version:
## Installation
173 lines (157 loc) • 6.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ZUI Web Component Skeleton">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#fff">
<title>ZuiPicker Demo</title>
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-app-styles/dist/zui-app-styles.css" />
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-button/dist/css/zui-button.fouc.css" />
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-icons/dist/css/zui-icons.fouc.css" />
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-search/dist/css/zui-search.fouc.css" />
<link rel="stylesheet" href="./dist/css/zui-picker.fouc.css" />
<script src="../../../node_modules/@zywave/zui-button/dist/index.js" type="module"></script>
<script src="../../../node_modules/@zywave/zui-search/dist/index.js" type="module"></script>
<script src="../../../node_modules/@zywave/zui-select/dist/index.js" type="module"></script>
<script src="./dist/index.js" type="module"></script>
<style>
div {
--zui-button-color: black;
--zui-button-active-color: var(--zui-gray--700);
--zui-button-active-box-shadow: var(--zui-gray--800);
--zui-button-hover-color: var(--zui-gray--600);
}
zui-picker-item {
--zui-picker-item-font-size: 16px;
}
</style>
</head>
<body>
<div id="above" style="margin-left:auto; margin-right:auto;max-width:600px;">
<h1>Select an arcade game to play!</h1>
<zui-picker id="toplevel">
<div slot="search">
<zui-search id="search" placeholder="e.g. Asterioids" query="">
<zui-select>
<zui-option>Single player</zui-option>
<zui-option>Multi player</zui-option>
</zui-select>
</zui-search>
</div>
<div slot="results-count">
<span>Total arcade games: 134</span>
</div>
<div id="wrapper" slot="picker-items">
<zui-picker-item>
<zui-icon icon="zui-toolbox" style="color: red"></zui-icon>
Fix-It Felix Jr.
<zui-button><zui-icon icon="zui-check"></zui-icon>Play</zui-button>
</zui-picker-item>
<zui-picker-item>
<zui-icon icon="zui-indicator-remove" style="color: gold"></zui-icon>
Ms. Pac-Man
<zui-button>Play</zui-button>
</zui-picker-item>
<zui-picker-item>
<zui-icon icon="zui-more" style="color: greenyellow"></zui-icon>
Centipede
<zui-button>Play</zui-button>
</zui-picker-item>
<zui-picker-item>
<zui-icon icon="zui-check" style="color: cornflowerblue"></zui-icon>
Galaga
<zui-button>Play</zui-button>
</zui-picker-item>
<zui-picker-item>
<zui-icon icon="zui-double-chevron-right" style="color: hotpink"></zui-icon>
Sugar Rush
<zui-button>Play</zui-button>
</zui-picker-item>
</div>
<div slot="pager">
<zui-pager current-page="1" page-size="20" total-items="399" page-input></zui-pager>
</div>
</zui-picker>
</div>
<hr/>
<div style="margin-left:auto; margin-right:auto;max-width:400px;">
<zui-picker>
<div id="search" slot="search">
<zui-search id="search" placeholder="e.g. Asterioids" query="Call of Duty"></zui-search>
</div>
<div slot="results-count">
<span>Total items: 0</span>
</div>
<div class="no-results" slot="picker-items">
<p>No results found.</p>
</div>
<div slot="pager">
<zui-pager current-page="1" page-size="20" total-items="0"></zui-pager>
</div>
</zui-picker>
</div>
<script>
document.getElementById('above').addEventListener('change', function (e) {
console.log('this shouldn\'t display');
});
document.getElementById('above').addEventListener('search', function (e) {
console.log('this shouldn\'t display');
});
document.getElementById('toplevel').addEventListener('change', function (e) {
console.log('Quarter alert: ' + e.detail);
});
document.getElementById('toplevel').addEventListener('search', function (e) {
console.log('triggered search: query - ' + e.detail.query + ', currentPage - ' + e.detail.currentPage);
});
document.getElementById('search').addEventListener('change', function (e) {
console.log('dropdown change');
});
// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
},
configurable: true,
writable: true
});
}
// zui-base-styles needs this for dumb IE11 if you add rel="zui-stylesheet"
// window.zui.importCustomStyles();
// Uncomment to test FOUC styling
// customElements.define = function () { };
</script>
</body>
</html>