@seznam/szn-select-vue
Version:
Szn-select integration for Vue.js projects.
253 lines (213 loc) • 7.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = _interopRequireDefault(require("vue"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* global makeSznSelectBundleScript */
if (!_vue.default.config.ignoredElements.includes('szn-select')) {
_vue.default.config.ignoredElements.push('szn-select');
}
const READY_EVENT = 'szn-select:ready';
const LOADER_FLAGS = ['enable', 'useEmbeddedLoader', 'useAsyncLoading'];
const LOADER_URL_KEYS = ['package', 'loader', 'es3', 'es2016', 'bundle-elements.es3', 'bundle-elements.es2016', 'bundle-full.es3', 'bundle-full.es2016', 'bundle-full.ce'];
const DEFAULT_LOADER_OPTIONS = {
enable: true,
useEmbeddedLoader: false,
useAsyncLoading: true,
urls: {
package: 'https://unpkg.com/@seznam/szn-select@1.x/'
}
};
const SZN_SELECT_PROPERTIES = ['minBottomSpace', 'dropdownClassName', 'dropdownContainer'];
let sznSelectLoadingBegun = false;
var _default = {
props: {
'name': {
type: String
},
'id': {
type: String
},
'multiple': {
type: Boolean
},
'disabled': {
type: Boolean
},
'aria-label': {
type: String
},
'minBottomSpace': {
type: Number
},
'dropdownClassName': {
type: String
},
'dropdownContainer': {
type: typeof Node !== 'undefined' ? Node : Object
},
'loaderOptions': {
type: Object,
default() {
return Object.assign({}, DEFAULT_LOADER_OPTIONS);
},
validator(value) {
for (const key of LOADER_FLAGS) {
if (Object.prototype.hasOwnProperty.call(value, key) && typeof value[key] !== 'boolean') {
return false;
}
}
if (Object.prototype.hasOwnProperty.call(value, 'urls')) {
for (const key of LOADER_URL_KEYS) {
if (Object.prototype.hasOwnProperty.call(value.urls, key) && typeof value.urls[key] !== 'string') {
return false;
}
}
if (!Object.keys(value.urls).every(key => LOADER_URL_KEYS.includes(key))) {
return false;
}
}
return true;
}
}
},
data() {
return {
sznSelectAttrs: {}
};
},
render(h) {
const rootAttrs = Object.assign({}, this.sznSelectAttrs);
const selectAttributes = Object.assign({}, this.$props);
selectAttributes['aria-label'] = selectAttributes.ariaLabel;
delete selectAttributes.ariaLabel;
delete selectAttributes.loaderOptions;
return h('szn-select', {
attrs: rootAttrs,
ref: 'root',
on: {
[READY_EVENT]: this.onSelectReady
}
}, [h('select', {
attrs: selectAttributes,
on: this.$listeners
}, this.$slots.default), h('span', {
attrs: {
'data-szn-select--ui': ''
}
})]);
},
mounted() {
if (this.$refs.root.isReady && this.$refs.root.requestedAttributes) {
this._handleAttributesUpdate(this.$refs.root.requestedAttributes);
this._updateSznSelectProperties();
}
if (sznSelectLoadingBegun) {
return;
}
sznSelectLoadingBegun = true;
const {
loaderOptions
} = this;
if (loaderOptions.enable === false) {
return;
}
if (loaderOptions.useEmbeddedLoader) {
const urlsConfiguration = loaderOptions.urls || DEFAULT_LOADER_OPTIONS.urls;
const bundleScript = loadSznSelect(urlsConfiguration, loaderOptions.useAsyncLoading !== false);
document.head.appendChild(bundleScript);
return;
}
const loaderScript = document.createElement('script');
loaderScript.async = loaderOptions.useAsyncLoading !== false;
const urls = loaderOptions.urls || {};
const providedPackageUrl = urls.package || DEFAULT_LOADER_OPTIONS.urls.package;
const packageUrl = /\/$/.test(providedPackageUrl) ? providedPackageUrl : `${providedPackageUrl}/`;
loaderScript.setAttribute('data-szn-select--loader-urls--package', packageUrl);
for (const urlOption of Object.keys(urls)) {
loaderScript.setAttribute(`data-szn-select--loader-urls--${urlOption.replace('.', '-')}`, urls[urlOption]);
}
loaderScript.src = urls.loader || `${packageUrl}loader.min.js`;
document.head.appendChild(loaderScript);
},
updated() {
this._updateSznSelectProperties();
},
beforeDestroy() {// remove listener
},
methods: {
onSelectReady(event) {
this._handleAttributesUpdate(event.detail.attributes);
},
_handleAttributesUpdate(requestedAttributeUpdate) {
const sznSelectAttrs = this._processAttributes(requestedAttributeUpdate);
this.sznSelectAttrs = sznSelectAttrs;
},
_updateSznSelectProperties() {
for (const sznSelectProperty of SZN_SELECT_PROPERTIES) {
if (sznSelectProperty in this.$props) {
this.$refs.root[sznSelectProperty] = this.$props[sznSelectProperty];
}
}
},
_processAttributes(attributesUpdate) {
const currentAttributes = {};
for (const attribute of Object.keys(attributesUpdate)) {
if (attributesUpdate[attribute] !== null) {
// attribute deleting is handled by React
currentAttributes[attribute] = attributesUpdate[attribute];
}
}
return currentAttributes;
}
}
};
exports.default = _default;
function loadSznSelect(urlConfiguration, useAsyncLoading) {
'use strict';
var makeSznSelectBundleScript = function (global) {
// eslint-disable-line no-unused-vars
var BUNDLES = {
ELEMENT_ES2016: 'es2016',
ELEMENT_ES3: 'es3',
ELEMENTS_ES2016: 'bundle-elements.es2016',
ELEMENTS_ES3: 'bundle-elements.es3',
ALL_CE: 'bundle-full.ce',
ALL_ES2016: 'bundle-full.es2016',
ALL_ES3: 'bundle-full.es3'
};
var DEFAULT_PACKAGE_URL = 'https://cdn.jsdelivr.net/npm/@seznam/szn-select@1.x/';
function makeBundleLoadScript(urlsConfiguration, useAsyncLoading) {
if (typeof self === 'undefined') {
throw new Error('The loader can only be used at the client-side');
}
if (global.SznElements && global.SznElements['szn-tethered'] && global.SznElements['szn-select']) {
return null; // already loaded
}
var bundleUrl = getSznSelectBundleUrl(urlsConfiguration);
var script = document.createElement('script');
script.async = useAsyncLoading;
script.defer = useAsyncLoading;
script.src = bundleUrl;
return script;
}
function getSznSelectBundleUrl(urlsConfiguration) {
// Firefox 52-based browsers (e.g. Palemoon) have faulty support for for-scoped const variable declarations
var firefoxVersionMatch = navigator.userAgent.match(/ Firefox\/(\d+)/);
var firefoxVersion = firefoxVersionMatch && parseInt(firefoxVersionMatch[1], 10);
var supportsForConst = !firefoxVersion || firefoxVersion > 52;
var es2016Supported = supportsForConst && global.Proxy && Array.prototype.includes;
var runtimeLoaded = global.SznElements && global.SznElements.init && global.SznElements.injectStyles;
var dependenciesLoaded = runtimeLoaded && global.SznElements['szn-tethered'];
var bundleToLoad = dependenciesLoaded ? es2016Supported ? BUNDLES.ELEMENT_ES2016 : BUNDLES.ELEMENT_ES3 : runtimeLoaded ? es2016Supported ? BUNDLES.ELEMENTS_ES2016 : BUNDLES.ELEMENTS_ES3 : global.customElements ? BUNDLES.ALL_CE : es2016Supported ? BUNDLES.ALL_ES2016 : BUNDLES.ALL_ES3;
return urlsConfiguration[bundleToLoad] || function () {
var baseUrl = urlsConfiguration["package"] || DEFAULT_PACKAGE_URL;
return /\/$/.test(baseUrl) ? baseUrl : "".concat(baseUrl, "/");
}() + "szn-select.".concat(bundleToLoad, ".min.js");
}
return makeBundleLoadScript;
}(self);
return makeSznSelectBundleScript(urlConfiguration, useAsyncLoading);
}