@nanoporetech-digital/components-vue 3.10.0 → 3.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/{cjs/proxies.js → index.esm.js} +272 -57
- package/dist/index.esm.js.map +1 -0
- package/dist/{esm/proxies.js → index.js} +326 -54
- package/dist/index.js.map +1 -0
- package/dist/web-types.json +1 -1
- package/package.json +9 -12
- package/dist/cjs/demo/main.js +0 -12
- package/dist/cjs/demo/main.js.map +0 -1
- package/dist/cjs/index.js +0 -21
- package/dist/cjs/index.js.map +0 -1
- package/dist/cjs/nano-vue.js +0 -49
- package/dist/cjs/nano-vue.js.map +0 -1
- package/dist/cjs/proxies.js.map +0 -1
- package/dist/cjs/vue-component-lib/utils.js +0 -178
- package/dist/cjs/vue-component-lib/utils.js.map +0 -1
- package/dist/esm/demo/main.js +0 -7
- package/dist/esm/demo/main.js.map +0 -1
- package/dist/esm/index.js +0 -3
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/nano-vue.js +0 -46
- package/dist/esm/nano-vue.js.map +0 -1
- package/dist/esm/proxies.js.map +0 -1
- package/dist/esm/vue-component-lib/utils.js +0 -174
- package/dist/esm/vue-component-lib/utils.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.10.2](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v3.10.1...v3.10.2) (2023-02-20)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **vue:** rollup handles bundling for better modules ([49e2c27](https://git.oxfordnanolabs.local/Digital/nano-components/commits/49e2c27214344c38e8560d1f6039729826a6594a))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [3.10.1](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v3.10.0...v3.10.1) (2023-02-15)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* **nuxt:** define 'import' as cjs in vue lib ([51beb79](https://git.oxfordnanolabs.local/Digital/nano-components/commits/51beb7967d9f328d176b00d40fd4c2081a98afac))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
# [3.10.0](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v3.9.2...v3.10.0) (2023-02-15)
|
|
7
29
|
|
|
8
30
|
|
|
@@ -1,17 +1,185 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { defineComponent, ref, getCurrentInstance, inject, h } from 'vue';
|
|
2
|
+
import { defineCustomElements } from '@nanoporetech-digital/components/loader';
|
|
3
|
+
|
|
4
|
+
const UPDATE_VALUE_EVENT = 'update:modelValue';
|
|
5
|
+
const MODEL_VALUE = 'modelValue';
|
|
6
|
+
const ROUTER_LINK_VALUE = 'routerLink';
|
|
7
|
+
const NAV_MANAGER = 'navManager';
|
|
8
|
+
const ROUTER_PROP_PREFIX = 'router';
|
|
9
|
+
const ARIA_PROP_PREFIX = 'aria';
|
|
10
|
+
/**
|
|
11
|
+
* Starting in Vue 3.1.0, all properties are
|
|
12
|
+
* added as keys to the props object, even if
|
|
13
|
+
* they are not being used. In order to correctly
|
|
14
|
+
* account for both value props and v-model props,
|
|
15
|
+
* we need to check if the key exists for Vue <3.1.0
|
|
16
|
+
* and then check if it is not undefined for Vue >= 3.1.0.
|
|
17
|
+
* See https://github.com/vuejs/vue-next/issues/3889
|
|
18
|
+
*/
|
|
19
|
+
const EMPTY_PROP = undefined;
|
|
20
|
+
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
|
|
21
|
+
const getComponentClasses = (classes) => {
|
|
22
|
+
return (classes === null || classes === void 0 ? void 0 : classes.split(' ')) || [];
|
|
23
|
+
};
|
|
24
|
+
const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
|
|
25
|
+
var _a;
|
|
26
|
+
return [...Array.from(((_a = ref.value) === null || _a === void 0 ? void 0 : _a.classList) || []), ...defaultClasses].filter((c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Create a callback to define a Vue component wrapper around a Web Component.
|
|
30
|
+
*
|
|
31
|
+
* @prop name - The component tag name (i.e. `ion-button`)
|
|
32
|
+
* @prop componentProps - An array of properties on the
|
|
33
|
+
* component. These usually match up with the @Prop definitions
|
|
34
|
+
* in each component's TSX file.
|
|
35
|
+
* @prop customElement - An option custom element instance to pass
|
|
36
|
+
* to customElements.define. Only set if `includeImportCustomElements: true` in your config.
|
|
37
|
+
* @prop modelProp - The prop that v-model binds to (i.e. value)
|
|
38
|
+
* @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
|
|
39
|
+
* @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
|
|
40
|
+
* correctly updated when a user's event callback fires.
|
|
41
|
+
*/
|
|
42
|
+
const defineContainer = (name, defineCustomElement, componentAttrs = {}, componentProps = [], modelProp, modelUpdateEvent, externalModelUpdateEvent) => {
|
|
43
|
+
/**
|
|
44
|
+
* Create a Vue component wrapper around a Web Component.
|
|
45
|
+
* Note: The `props` here are not all properties on a component.
|
|
46
|
+
* They refer to whatever properties are set on an instance of a component.
|
|
47
|
+
*/
|
|
48
|
+
if (defineCustomElement !== undefined) {
|
|
49
|
+
defineCustomElement();
|
|
50
|
+
}
|
|
51
|
+
const Container = defineComponent((props, { attrs, slots, emit }) => {
|
|
52
|
+
var _a;
|
|
53
|
+
let modelPropValue = props[modelProp];
|
|
54
|
+
const containerRef = ref();
|
|
55
|
+
const classes = new Set(getComponentClasses(attrs.class));
|
|
56
|
+
const onVnodeBeforeMount = (vnode) => {
|
|
57
|
+
// Add a listener to tell Vue to update the v-model
|
|
58
|
+
if (vnode.el) {
|
|
59
|
+
const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
|
|
60
|
+
eventsNames.forEach((eventName) => {
|
|
61
|
+
vnode.el.addEventListener(eventName.toLowerCase(), (e) => {
|
|
62
|
+
if (e.target !== vnode.el)
|
|
63
|
+
return;
|
|
64
|
+
modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[modelProp];
|
|
65
|
+
emit(UPDATE_VALUE_EVENT, modelPropValue);
|
|
66
|
+
/**
|
|
67
|
+
* We need to emit the change event here
|
|
68
|
+
* rather than on the web component to ensure
|
|
69
|
+
* that any v-model bindings have been updated.
|
|
70
|
+
* Otherwise, the developer will listen on the
|
|
71
|
+
* native web component, but the v-model will
|
|
72
|
+
* not have been updated yet.
|
|
73
|
+
*/
|
|
74
|
+
if (externalModelUpdateEvent) {
|
|
75
|
+
emit(externalModelUpdateEvent, e);
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
const currentInstance = getCurrentInstance();
|
|
82
|
+
const hasRouter = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.appContext) === null || _a === void 0 ? void 0 : _a.provides[NAV_MANAGER];
|
|
83
|
+
const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
|
|
84
|
+
const handleRouterLink = (ev) => {
|
|
85
|
+
const { routerLink } = props;
|
|
86
|
+
if (routerLink === EMPTY_PROP)
|
|
87
|
+
return;
|
|
88
|
+
if (navManager !== undefined) {
|
|
89
|
+
let navigationPayload = { event: ev };
|
|
90
|
+
for (const key in props) {
|
|
91
|
+
const value = props[key];
|
|
92
|
+
if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
|
|
93
|
+
navigationPayload[key] = value;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
navManager.navigate(navigationPayload);
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
return () => {
|
|
103
|
+
var _a;
|
|
104
|
+
modelPropValue = props[modelProp];
|
|
105
|
+
getComponentClasses(attrs.class).forEach((value) => {
|
|
106
|
+
classes.add(value);
|
|
107
|
+
});
|
|
108
|
+
const oldClick = props.onClick;
|
|
109
|
+
const handleClick = (ev) => {
|
|
110
|
+
if (oldClick !== undefined) {
|
|
111
|
+
oldClick(ev);
|
|
112
|
+
}
|
|
113
|
+
if (!ev.defaultPrevented) {
|
|
114
|
+
handleRouterLink(ev);
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
let propsToAdd = {
|
|
118
|
+
ref: containerRef,
|
|
119
|
+
class: getElementClasses(containerRef, classes),
|
|
120
|
+
onClick: handleClick,
|
|
121
|
+
onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined,
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* We can use Object.entries here
|
|
125
|
+
* to avoid the hasOwnProperty check,
|
|
126
|
+
* but that would require 2 iterations
|
|
127
|
+
* where as this only requires 1.
|
|
128
|
+
*/
|
|
129
|
+
for (const key in props) {
|
|
130
|
+
const value = props[key];
|
|
131
|
+
if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
|
|
132
|
+
propsToAdd[componentAttrs[key] || key] = value;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
if (modelProp) {
|
|
136
|
+
/**
|
|
137
|
+
* If form value property was set using v-model
|
|
138
|
+
* then we should use that value.
|
|
139
|
+
* Otherwise, check to see if form value property
|
|
140
|
+
* was set as a static value (i.e. no v-model).
|
|
141
|
+
*/
|
|
142
|
+
if (props[MODEL_VALUE] !== EMPTY_PROP) {
|
|
143
|
+
propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: props[MODEL_VALUE] });
|
|
144
|
+
}
|
|
145
|
+
else if (modelPropValue !== EMPTY_PROP) {
|
|
146
|
+
propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: modelPropValue });
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
componentProps.forEach((componentProp) => {
|
|
150
|
+
var _a;
|
|
151
|
+
if (((_a = currentInstance.vnode) === null || _a === void 0 ? void 0 : _a.el) &&
|
|
152
|
+
propsToAdd[componentProp] &&
|
|
153
|
+
currentInstance.vnode.el[componentProp] !== propsToAdd[componentProp])
|
|
154
|
+
currentInstance.vnode.el[componentProp] = propsToAdd[componentProp];
|
|
155
|
+
});
|
|
156
|
+
return h(((_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.type) === null || _a === void 0 ? void 0 : _a.name) || name, propsToAdd, (slots === null || slots === void 0 ? void 0 : slots.default) && slots.default());
|
|
157
|
+
};
|
|
158
|
+
});
|
|
159
|
+
Container.displayName = name;
|
|
160
|
+
Container.name = name;
|
|
161
|
+
Container.props = {
|
|
162
|
+
[ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
|
|
163
|
+
};
|
|
164
|
+
componentProps.forEach((componentProp) => {
|
|
165
|
+
Container.props[componentProp] = DEFAULT_EMPTY_PROP;
|
|
166
|
+
});
|
|
167
|
+
Container.attrs = {};
|
|
168
|
+
if (modelProp) {
|
|
169
|
+
Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
|
|
170
|
+
Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
|
|
171
|
+
}
|
|
172
|
+
return Container;
|
|
173
|
+
};
|
|
174
|
+
|
|
4
175
|
/* eslint-disable */
|
|
5
|
-
|
|
6
|
-
/* auto-generated vue proxies */
|
|
7
|
-
const utils_1 = require("./vue-component-lib/utils");
|
|
8
|
-
exports.NanoAccordion = (0, utils_1.defineContainer)('nano-accordion', undefined, {
|
|
176
|
+
const NanoAccordion = /*@__PURE__*/ defineContainer('nano-accordion', undefined, {
|
|
9
177
|
color: 'color'
|
|
10
178
|
}, [
|
|
11
179
|
'color',
|
|
12
180
|
'nanoToggle'
|
|
13
181
|
]);
|
|
14
|
-
|
|
182
|
+
const NanoAlert = /*@__PURE__*/ defineContainer('nano-alert', undefined, {
|
|
15
183
|
open: 'open',
|
|
16
184
|
closable: 'closable',
|
|
17
185
|
color: 'color',
|
|
@@ -26,7 +194,7 @@ exports.NanoAlert = (0, utils_1.defineContainer)('nano-alert', undefined, {
|
|
|
26
194
|
'nanoHide',
|
|
27
195
|
'nanoAfterHide'
|
|
28
196
|
]);
|
|
29
|
-
|
|
197
|
+
const NanoAlgolia = /*@__PURE__*/ defineContainer('nano-algolia', undefined, {
|
|
30
198
|
showResults: 'show-results',
|
|
31
199
|
resultsPage: 'results-page',
|
|
32
200
|
appId: 'app-id',
|
|
@@ -64,7 +232,7 @@ exports.NanoAlgolia = (0, utils_1.defineContainer)('nano-algolia', undefined, {
|
|
|
64
232
|
'nanoAfterQuery',
|
|
65
233
|
'nanoNewResults'
|
|
66
234
|
]);
|
|
67
|
-
|
|
235
|
+
const NanoAlgoliaFilter = /*@__PURE__*/ defineContainer('nano-algolia-filter', undefined, {
|
|
68
236
|
filterName: 'filter-name',
|
|
69
237
|
value: 'value',
|
|
70
238
|
operator: 'operator',
|
|
@@ -79,7 +247,7 @@ exports.NanoAlgoliaFilter = (0, utils_1.defineContainer)('nano-algolia-filter',
|
|
|
79
247
|
'nanoFilterChanged',
|
|
80
248
|
'nanoTplUpdated'
|
|
81
249
|
]);
|
|
82
|
-
|
|
250
|
+
const NanoAlgoliaInput = /*@__PURE__*/ defineContainer('nano-algolia-input', undefined, {
|
|
83
251
|
appId: 'app-id',
|
|
84
252
|
apiKey: 'api-key',
|
|
85
253
|
searchIndexName: 'search-index-name',
|
|
@@ -102,13 +270,13 @@ exports.NanoAlgoliaInput = (0, utils_1.defineContainer)('nano-algolia-input', un
|
|
|
102
270
|
'nanoSearch',
|
|
103
271
|
'nanoSearchReset'
|
|
104
272
|
]);
|
|
105
|
-
|
|
273
|
+
const NanoAlgoliaPagination = /*@__PURE__*/ defineContainer('nano-algolia-pagination', undefined, {
|
|
106
274
|
maxToShow: 'max-to-show'
|
|
107
275
|
}, [
|
|
108
276
|
'maxToShow',
|
|
109
277
|
'nanoPageChanged'
|
|
110
278
|
]);
|
|
111
|
-
|
|
279
|
+
const NanoAlgoliaResults = /*@__PURE__*/ defineContainer('nano-algolia-results', undefined, {
|
|
112
280
|
infiniteScroll: 'infinite-scroll',
|
|
113
281
|
appendPages: 'append-pages'
|
|
114
282
|
}, [
|
|
@@ -117,14 +285,14 @@ exports.NanoAlgoliaResults = (0, utils_1.defineContainer)('nano-algolia-results'
|
|
|
117
285
|
'nanoPageChanged',
|
|
118
286
|
'nanoTplUpdated'
|
|
119
287
|
]);
|
|
120
|
-
|
|
288
|
+
const NanoAspectRatio = /*@__PURE__*/ defineContainer('nano-aspect-ratio', undefined, {
|
|
121
289
|
aspectRatio: 'aspect-ratio',
|
|
122
290
|
fit: 'fit'
|
|
123
291
|
}, [
|
|
124
292
|
'aspectRatio',
|
|
125
293
|
'fit'
|
|
126
294
|
]);
|
|
127
|
-
|
|
295
|
+
const NanoCheckbox = /*@__PURE__*/ defineContainer('nano-checkbox', undefined, {
|
|
128
296
|
hasFocus: 'has-focus',
|
|
129
297
|
checked: 'checked',
|
|
130
298
|
disabled: 'disabled',
|
|
@@ -156,7 +324,7 @@ exports.NanoCheckbox = (0, utils_1.defineContainer)('nano-checkbox', undefined,
|
|
|
156
324
|
'nanoFocus',
|
|
157
325
|
'nanoBlur'
|
|
158
326
|
], 'checked', 'v-nano-change', 'nanoChange');
|
|
159
|
-
|
|
327
|
+
const NanoCheckboxGroup = /*@__PURE__*/ defineContainer('nano-checkbox-group', undefined, {
|
|
160
328
|
validateOn: 'validate-on',
|
|
161
329
|
showInlineError: 'show-inline-error',
|
|
162
330
|
min: 'min',
|
|
@@ -179,7 +347,7 @@ exports.NanoCheckboxGroup = (0, utils_1.defineContainer)('nano-checkbox-group',
|
|
|
179
347
|
'nanoChange',
|
|
180
348
|
'nanoValidate'
|
|
181
349
|
], 'value', 'v-nano-change', 'nanoChange');
|
|
182
|
-
|
|
350
|
+
const NanoDatalist = /*@__PURE__*/ defineContainer('nano-datalist', undefined, {
|
|
183
351
|
input: 'input',
|
|
184
352
|
type: 'type',
|
|
185
353
|
open: 'open',
|
|
@@ -199,7 +367,7 @@ exports.NanoDatalist = (0, utils_1.defineContainer)('nano-datalist', undefined,
|
|
|
199
367
|
'nanoDeselect',
|
|
200
368
|
'nanoOptionsUpdated'
|
|
201
369
|
]);
|
|
202
|
-
|
|
370
|
+
const NanoDateInput = /*@__PURE__*/ defineContainer('nano-date-input', undefined, {
|
|
203
371
|
invalid: 'invalid',
|
|
204
372
|
validityMessage: 'validity-message',
|
|
205
373
|
helperText: 'helper-text',
|
|
@@ -263,7 +431,7 @@ exports.NanoDateInput = (0, utils_1.defineContainer)('nano-date-input', undefine
|
|
|
263
431
|
'nanoChange',
|
|
264
432
|
'nanoValidate'
|
|
265
433
|
]);
|
|
266
|
-
|
|
434
|
+
const NanoDatePicker = /*@__PURE__*/ defineContainer('nano-date-picker', undefined, {
|
|
267
435
|
selectedDate: 'selected-date',
|
|
268
436
|
min: 'min',
|
|
269
437
|
max: 'max',
|
|
@@ -282,8 +450,8 @@ exports.NanoDatePicker = (0, utils_1.defineContainer)('nano-date-picker', undefi
|
|
|
282
450
|
'firstFocusEle',
|
|
283
451
|
'nanoDatePicked'
|
|
284
452
|
]);
|
|
285
|
-
|
|
286
|
-
|
|
453
|
+
const NanoDemo = /*@__PURE__*/ defineContainer('nano-demo', undefined);
|
|
454
|
+
const NanoDetails = /*@__PURE__*/ defineContainer('nano-details', undefined, {
|
|
287
455
|
label: 'label',
|
|
288
456
|
open: 'open',
|
|
289
457
|
noHandle: 'no-handle',
|
|
@@ -298,7 +466,7 @@ exports.NanoDetails = (0, utils_1.defineContainer)('nano-details', undefined, {
|
|
|
298
466
|
'nanoOpened',
|
|
299
467
|
'nanoClosed'
|
|
300
468
|
]);
|
|
301
|
-
|
|
469
|
+
const NanoDialog = /*@__PURE__*/ defineContainer('nano-dialog', undefined, {
|
|
302
470
|
showRibbon: 'show-ribbon',
|
|
303
471
|
open: 'open',
|
|
304
472
|
label: 'label',
|
|
@@ -325,7 +493,7 @@ exports.NanoDialog = (0, utils_1.defineContainer)('nano-dialog', undefined, {
|
|
|
325
493
|
'nanoInitialFocus',
|
|
326
494
|
'nanoRequestClose'
|
|
327
495
|
]);
|
|
328
|
-
|
|
496
|
+
const NanoDrawer = /*@__PURE__*/ defineContainer('nano-drawer', undefined, {
|
|
329
497
|
open: 'open',
|
|
330
498
|
label: 'label',
|
|
331
499
|
placement: 'placement',
|
|
@@ -347,7 +515,7 @@ exports.NanoDrawer = (0, utils_1.defineContainer)('nano-drawer', undefined, {
|
|
|
347
515
|
'nanoAfterHide',
|
|
348
516
|
'nanoOverlayDismiss'
|
|
349
517
|
]);
|
|
350
|
-
|
|
518
|
+
const NanoDropdown = /*@__PURE__*/ defineContainer('nano-dropdown', undefined, {
|
|
351
519
|
autoOpen: 'auto-open',
|
|
352
520
|
open: 'open',
|
|
353
521
|
closeOnSelect: 'close-on-select',
|
|
@@ -373,7 +541,7 @@ exports.NanoDropdown = (0, utils_1.defineContainer)('nano-dropdown', undefined,
|
|
|
373
541
|
'nanoHide',
|
|
374
542
|
'nanoAfterHide'
|
|
375
543
|
]);
|
|
376
|
-
|
|
544
|
+
const NanoFieldValidator = /*@__PURE__*/ defineContainer('nano-field-validator', undefined, {
|
|
377
545
|
validateOn: 'validate-on',
|
|
378
546
|
scrollToInvalid: 'scroll-to-invalid',
|
|
379
547
|
dirty: 'dirty',
|
|
@@ -395,7 +563,7 @@ exports.NanoFieldValidator = (0, utils_1.defineContainer)('nano-field-validator'
|
|
|
395
563
|
'nanoSubmit',
|
|
396
564
|
'nanoInvalid'
|
|
397
565
|
]);
|
|
398
|
-
|
|
566
|
+
const NanoFileUpload = /*@__PURE__*/ defineContainer('nano-file-upload', undefined, {
|
|
399
567
|
name: 'name',
|
|
400
568
|
accept: 'accept',
|
|
401
569
|
capture: 'capture',
|
|
@@ -437,7 +605,7 @@ exports.NanoFileUpload = (0, utils_1.defineContainer)('nano-file-upload', undefi
|
|
|
437
605
|
'nanoBlur',
|
|
438
606
|
'nanoValidate'
|
|
439
607
|
], 'files', 'v-nano-change', 'nanoChange');
|
|
440
|
-
|
|
608
|
+
const NanoGlobalNav = /*@__PURE__*/ defineContainer('nano-global-nav', undefined, {
|
|
441
609
|
env: 'env',
|
|
442
610
|
ssoDataUrl: 'sso-data-url',
|
|
443
611
|
ssoRedirect: 'sso-redirect',
|
|
@@ -478,16 +646,16 @@ exports.NanoGlobalNav = (0, utils_1.defineContainer)('nano-global-nav', undefine
|
|
|
478
646
|
'nanoSearchError',
|
|
479
647
|
'nanoSearchReset'
|
|
480
648
|
]);
|
|
481
|
-
|
|
649
|
+
const NanoGlobalNavUserProfile = /*@__PURE__*/ defineContainer('nano-global-nav-user-profile', undefined, {
|
|
482
650
|
userProfileUrl: 'user-profile-url'
|
|
483
651
|
}, [
|
|
484
652
|
'myAccountUser',
|
|
485
653
|
'userProfileUrl'
|
|
486
654
|
]);
|
|
487
|
-
|
|
655
|
+
const NanoGlobalSearchResults = /*@__PURE__*/ defineContainer('nano-global-search-results', undefined, {}, [
|
|
488
656
|
'nanoSearchGoBack'
|
|
489
657
|
]);
|
|
490
|
-
|
|
658
|
+
const NanoGrid = /*@__PURE__*/ defineContainer('nano-grid', undefined, {
|
|
491
659
|
sSize: 's-size',
|
|
492
660
|
mSize: 'm-size',
|
|
493
661
|
lSize: 'l-size',
|
|
@@ -515,12 +683,12 @@ exports.NanoGrid = (0, utils_1.defineContainer)('nano-grid', undefined, {
|
|
|
515
683
|
'fullHeight',
|
|
516
684
|
'nanoBpChange'
|
|
517
685
|
]);
|
|
518
|
-
|
|
686
|
+
const NanoGridItem = /*@__PURE__*/ defineContainer('nano-grid-item', undefined, {
|
|
519
687
|
gridStates: 'grid-states'
|
|
520
688
|
}, [
|
|
521
689
|
'gridStates'
|
|
522
690
|
]);
|
|
523
|
-
|
|
691
|
+
const NanoHero = /*@__PURE__*/ defineContainer('nano-hero', undefined, {
|
|
524
692
|
imgSrc: 'img-src',
|
|
525
693
|
imgSrcSet: 'img-src-set',
|
|
526
694
|
largeScreenBP: 'large-screen-b-p',
|
|
@@ -533,7 +701,7 @@ exports.NanoHero = (0, utils_1.defineContainer)('nano-hero', undefined, {
|
|
|
533
701
|
'theme',
|
|
534
702
|
'level'
|
|
535
703
|
]);
|
|
536
|
-
|
|
704
|
+
const NanoIcon = /*@__PURE__*/ defineContainer('nano-icon', undefined, {
|
|
537
705
|
color: 'color',
|
|
538
706
|
ariaLabel: 'aria-label',
|
|
539
707
|
flipRtl: 'flip-rtl',
|
|
@@ -552,7 +720,7 @@ exports.NanoIcon = (0, utils_1.defineContainer)('nano-icon', undefined, {
|
|
|
552
720
|
'size',
|
|
553
721
|
'lazy'
|
|
554
722
|
]);
|
|
555
|
-
|
|
723
|
+
const NanoIconButton = /*@__PURE__*/ defineContainer('nano-icon-button', undefined, {
|
|
556
724
|
iconName: 'icon-name',
|
|
557
725
|
iconSrc: 'icon-src',
|
|
558
726
|
type: 'type',
|
|
@@ -573,7 +741,7 @@ exports.NanoIconButton = (0, utils_1.defineContainer)('nano-icon-button', undefi
|
|
|
573
741
|
'href',
|
|
574
742
|
'target'
|
|
575
743
|
]);
|
|
576
|
-
|
|
744
|
+
const NanoImg = /*@__PURE__*/ defineContainer('nano-img', undefined, {
|
|
577
745
|
alt: 'alt',
|
|
578
746
|
src: 'src',
|
|
579
747
|
srcSet: 'src-set',
|
|
@@ -591,7 +759,7 @@ exports.NanoImg = (0, utils_1.defineContainer)('nano-img', undefined, {
|
|
|
591
759
|
'nanoImgDidLoad',
|
|
592
760
|
'nanoImgError'
|
|
593
761
|
]);
|
|
594
|
-
|
|
762
|
+
const NanoInput = /*@__PURE__*/ defineContainer('nano-input', undefined, {
|
|
595
763
|
invalid: 'invalid',
|
|
596
764
|
validityMessage: 'validity-message',
|
|
597
765
|
color: 'color',
|
|
@@ -675,7 +843,7 @@ exports.NanoInput = (0, utils_1.defineContainer)('nano-input', undefined, {
|
|
|
675
843
|
'nanoDidUnload',
|
|
676
844
|
'nanoValidate'
|
|
677
845
|
], 'value', 'v-nano-change', 'nanoChange');
|
|
678
|
-
|
|
846
|
+
const NanoMenu = /*@__PURE__*/ defineContainer('nano-menu', undefined, {
|
|
679
847
|
hasFocus: 'has-focus',
|
|
680
848
|
type: 'type',
|
|
681
849
|
label: 'label'
|
|
@@ -687,7 +855,7 @@ exports.NanoMenu = (0, utils_1.defineContainer)('nano-menu', undefined, {
|
|
|
687
855
|
'nanoBlur',
|
|
688
856
|
'nanoSelect'
|
|
689
857
|
]);
|
|
690
|
-
|
|
858
|
+
const NanoMenuDrawer = /*@__PURE__*/ defineContainer('nano-menu-drawer', undefined, {
|
|
691
859
|
open: 'open',
|
|
692
860
|
saveState: 'save-state',
|
|
693
861
|
hideWidth: 'hide-width',
|
|
@@ -698,7 +866,7 @@ exports.NanoMenuDrawer = (0, utils_1.defineContainer)('nano-menu-drawer', undefi
|
|
|
698
866
|
'hideWidth',
|
|
699
867
|
'hideHeight'
|
|
700
868
|
]);
|
|
701
|
-
|
|
869
|
+
const NanoNavItem = /*@__PURE__*/ defineContainer('nano-nav-item', undefined, {
|
|
702
870
|
href: 'href',
|
|
703
871
|
target: 'target',
|
|
704
872
|
disabled: 'disabled',
|
|
@@ -724,7 +892,7 @@ exports.NanoNavItem = (0, utils_1.defineContainer)('nano-nav-item', undefined, {
|
|
|
724
892
|
'nanoBlur',
|
|
725
893
|
'nanoFocus'
|
|
726
894
|
]);
|
|
727
|
-
|
|
895
|
+
const NanoOption = /*@__PURE__*/ defineContainer('nano-option', undefined, {
|
|
728
896
|
value: 'value',
|
|
729
897
|
label: 'label',
|
|
730
898
|
selected: 'selected',
|
|
@@ -738,7 +906,7 @@ exports.NanoOption = (0, utils_1.defineContainer)('nano-option', undefined, {
|
|
|
738
906
|
'filterMeta',
|
|
739
907
|
'nanoSelect'
|
|
740
908
|
]);
|
|
741
|
-
|
|
909
|
+
const NanoProgressBar = /*@__PURE__*/ defineContainer('nano-progress-bar', undefined, {
|
|
742
910
|
value: 'value',
|
|
743
911
|
indeterminate: 'indeterminate',
|
|
744
912
|
showPercent: 'show-percent'
|
|
@@ -747,7 +915,7 @@ exports.NanoProgressBar = (0, utils_1.defineContainer)('nano-progress-bar', unde
|
|
|
747
915
|
'indeterminate',
|
|
748
916
|
'showPercent'
|
|
749
917
|
]);
|
|
750
|
-
|
|
918
|
+
const NanoRange = /*@__PURE__*/ defineContainer('nano-range', undefined, {
|
|
751
919
|
color: 'color',
|
|
752
920
|
debounce: 'debounce',
|
|
753
921
|
name: 'name',
|
|
@@ -778,7 +946,7 @@ exports.NanoRange = (0, utils_1.defineContainer)('nano-range', undefined, {
|
|
|
778
946
|
'nanoFocus',
|
|
779
947
|
'nanoBlur'
|
|
780
948
|
], 'value', 'v-nano-change', 'nanoChange');
|
|
781
|
-
|
|
949
|
+
const NanoRating = /*@__PURE__*/ defineContainer('nano-rating', undefined, {
|
|
782
950
|
value: 'value',
|
|
783
951
|
max: 'max',
|
|
784
952
|
precision: 'precision',
|
|
@@ -799,7 +967,7 @@ exports.NanoRating = (0, utils_1.defineContainer)('nano-rating', undefined, {
|
|
|
799
967
|
'nanoBlur',
|
|
800
968
|
'nanoFocus'
|
|
801
969
|
], 'value', 'v-nano-change', 'nanoChange');
|
|
802
|
-
|
|
970
|
+
const NanoResizeObserve = /*@__PURE__*/ defineContainer('nano-resize-observe', undefined, {
|
|
803
971
|
notifyContentFit: 'notify-content-fit',
|
|
804
972
|
states: 'states'
|
|
805
973
|
}, [
|
|
@@ -809,7 +977,7 @@ exports.NanoResizeObserve = (0, utils_1.defineContainer)('nano-resize-observe',
|
|
|
809
977
|
'nanoResizeObserverReady',
|
|
810
978
|
'nanoResizeContentFitChange'
|
|
811
979
|
]);
|
|
812
|
-
|
|
980
|
+
const NanoSelect = /*@__PURE__*/ defineContainer('nano-select', undefined, {
|
|
813
981
|
invalid: 'invalid',
|
|
814
982
|
validityMessage: 'validity-message',
|
|
815
983
|
color: 'color',
|
|
@@ -869,18 +1037,18 @@ exports.NanoSelect = (0, utils_1.defineContainer)('nano-select', undefined, {
|
|
|
869
1037
|
'nanoSearchChange',
|
|
870
1038
|
'nanoValidate'
|
|
871
1039
|
], 'value', 'v-nano-change', 'nanoChange');
|
|
872
|
-
|
|
1040
|
+
const NanoSkeleton = /*@__PURE__*/ defineContainer('nano-skeleton', undefined, {
|
|
873
1041
|
animated: 'animated'
|
|
874
1042
|
}, [
|
|
875
1043
|
'animated'
|
|
876
1044
|
]);
|
|
877
|
-
|
|
1045
|
+
const NanoSlide = /*@__PURE__*/ defineContainer('nano-slide', undefined, {
|
|
878
1046
|
ready: 'ready'
|
|
879
1047
|
}, [
|
|
880
1048
|
'ready',
|
|
881
1049
|
'nanoSlideReady'
|
|
882
1050
|
]);
|
|
883
|
-
|
|
1051
|
+
const NanoSlides = /*@__PURE__*/ defineContainer('nano-slides', undefined, {
|
|
884
1052
|
navbtns: 'navbtns',
|
|
885
1053
|
pager: 'pager',
|
|
886
1054
|
fullscreenbtn: 'fullscreenbtn',
|
|
@@ -911,14 +1079,14 @@ exports.NanoSlides = (0, utils_1.defineContainer)('nano-slides', undefined, {
|
|
|
911
1079
|
'nanoSlidesTap',
|
|
912
1080
|
'nanoSlidesFullscreenChange'
|
|
913
1081
|
]);
|
|
914
|
-
|
|
1082
|
+
const NanoSpinner = /*@__PURE__*/ defineContainer('nano-spinner', undefined, {
|
|
915
1083
|
type: 'type',
|
|
916
1084
|
overlay: 'overlay'
|
|
917
1085
|
}, [
|
|
918
1086
|
'type',
|
|
919
1087
|
'overlay'
|
|
920
1088
|
]);
|
|
921
|
-
|
|
1089
|
+
const NanoSplitPane = /*@__PURE__*/ defineContainer('nano-split-pane', undefined, {
|
|
922
1090
|
position: 'position',
|
|
923
1091
|
positionInPixels: 'position-in-pixels',
|
|
924
1092
|
vertical: 'vertical',
|
|
@@ -939,7 +1107,7 @@ exports.NanoSplitPane = (0, utils_1.defineContainer)('nano-split-pane', undefine
|
|
|
939
1107
|
'nanoReposition',
|
|
940
1108
|
'nanoDragging'
|
|
941
1109
|
]);
|
|
942
|
-
|
|
1110
|
+
const NanoSticker = /*@__PURE__*/ defineContainer('nano-sticker', undefined, {
|
|
943
1111
|
autoResize: 'auto-resize',
|
|
944
1112
|
isSticky: 'is-sticky',
|
|
945
1113
|
offset: 'offset',
|
|
@@ -965,7 +1133,7 @@ exports.NanoSticker = (0, utils_1.defineContainer)('nano-sticker', undefined, {
|
|
|
965
1133
|
'nanoHide',
|
|
966
1134
|
'nanoShow'
|
|
967
1135
|
]);
|
|
968
|
-
|
|
1136
|
+
const NanoTab = /*@__PURE__*/ defineContainer('nano-tab', undefined, {
|
|
969
1137
|
panel: 'panel',
|
|
970
1138
|
active: 'active',
|
|
971
1139
|
disabled: 'disabled',
|
|
@@ -977,14 +1145,14 @@ exports.NanoTab = (0, utils_1.defineContainer)('nano-tab', undefined, {
|
|
|
977
1145
|
'closable',
|
|
978
1146
|
'nanoTabClose'
|
|
979
1147
|
]);
|
|
980
|
-
|
|
1148
|
+
const NanoTabContent = /*@__PURE__*/ defineContainer('nano-tab-content', undefined, {
|
|
981
1149
|
name: 'name',
|
|
982
1150
|
active: 'active'
|
|
983
1151
|
}, [
|
|
984
1152
|
'name',
|
|
985
1153
|
'active'
|
|
986
1154
|
]);
|
|
987
|
-
|
|
1155
|
+
const NanoTabGroup = /*@__PURE__*/ defineContainer('nano-tab-group', undefined, {
|
|
988
1156
|
placement: 'placement',
|
|
989
1157
|
noScrollControls: 'no-scroll-controls',
|
|
990
1158
|
color: 'color',
|
|
@@ -1003,7 +1171,7 @@ exports.NanoTabGroup = (0, utils_1.defineContainer)('nano-tab-group', undefined,
|
|
|
1003
1171
|
'nanoTabWillClose',
|
|
1004
1172
|
'nanoTabClose'
|
|
1005
1173
|
]);
|
|
1006
|
-
|
|
1174
|
+
const NanoTable = /*@__PURE__*/ defineContainer('nano-table', undefined, {
|
|
1007
1175
|
type: 'type',
|
|
1008
1176
|
caption: 'caption',
|
|
1009
1177
|
showCaption: 'show-caption',
|
|
@@ -1048,7 +1216,7 @@ exports.NanoTable = (0, utils_1.defineContainer)('nano-table', undefined, {
|
|
|
1048
1216
|
'nanoTblAfterSearch',
|
|
1049
1217
|
'nanoTblBeforeEdit'
|
|
1050
1218
|
]);
|
|
1051
|
-
|
|
1219
|
+
const NanoTooltip = /*@__PURE__*/ defineContainer('nano-tooltip', undefined, {
|
|
1052
1220
|
content: 'content',
|
|
1053
1221
|
placement: 'placement',
|
|
1054
1222
|
disabled: 'disabled',
|
|
@@ -1071,4 +1239,51 @@ exports.NanoTooltip = (0, utils_1.defineContainer)('nano-tooltip', undefined, {
|
|
|
1071
1239
|
'nanoHide',
|
|
1072
1240
|
'nanoAfterHide'
|
|
1073
1241
|
]);
|
|
1074
|
-
|
|
1242
|
+
|
|
1243
|
+
const eventIgnoreList = ['nanoTplUpdated', 'openWormhole', 'nanoComponentsReady'];
|
|
1244
|
+
/**
|
|
1245
|
+
* We need to make sure that the web component fires an event
|
|
1246
|
+
* that will not conflict with the user's @ionChange binding,
|
|
1247
|
+
* otherwise the binding's callback will fire before any
|
|
1248
|
+
* v-model values have been updated.
|
|
1249
|
+
*/
|
|
1250
|
+
const toKebabCase = (eventName) => {
|
|
1251
|
+
if (eventName === 'nanoChange')
|
|
1252
|
+
return 'v-nano-change';
|
|
1253
|
+
else if (eventIgnoreList.includes(eventName))
|
|
1254
|
+
return eventName;
|
|
1255
|
+
else
|
|
1256
|
+
return eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
|
|
1257
|
+
};
|
|
1258
|
+
/**
|
|
1259
|
+
* "ionRefresh" is converted to "ion-refresh".
|
|
1260
|
+
* See https://github.com/vuejs/vue-next/pull/2847
|
|
1261
|
+
*/
|
|
1262
|
+
const getHelperFunctions = () => {
|
|
1263
|
+
return {
|
|
1264
|
+
ael: (el, eventName, cb, opts) => el.addEventListener(toKebabCase(eventName), cb, opts),
|
|
1265
|
+
rel: (el, eventName, cb, opts) => el.removeEventListener(toKebabCase(eventName), cb, opts),
|
|
1266
|
+
ce: (eventName, opts) => new CustomEvent(toKebabCase(eventName), opts)
|
|
1267
|
+
};
|
|
1268
|
+
};
|
|
1269
|
+
const NanoVue = {
|
|
1270
|
+
async install(_, _config = {}) {
|
|
1271
|
+
if (typeof window === 'undefined')
|
|
1272
|
+
return;
|
|
1273
|
+
const { ael, rel, ce } = getHelperFunctions();
|
|
1274
|
+
await defineCustomElements(window, {
|
|
1275
|
+
ce,
|
|
1276
|
+
ael,
|
|
1277
|
+
rel
|
|
1278
|
+
});
|
|
1279
|
+
// To use custom-elements bundle instead
|
|
1280
|
+
// initialize({
|
|
1281
|
+
// _ael: ael,
|
|
1282
|
+
// _rel: rel,
|
|
1283
|
+
// _ce: ce,
|
|
1284
|
+
// });
|
|
1285
|
+
},
|
|
1286
|
+
};
|
|
1287
|
+
|
|
1288
|
+
export { NanoAccordion, NanoAlert, NanoAlgolia, NanoAlgoliaFilter, NanoAlgoliaInput, NanoAlgoliaPagination, NanoAlgoliaResults, NanoAspectRatio, NanoCheckbox, NanoCheckboxGroup, NanoDatalist, NanoDateInput, NanoDatePicker, NanoDemo, NanoDetails, NanoDialog, NanoDrawer, NanoDropdown, NanoFieldValidator, NanoFileUpload, NanoGlobalNav, NanoGlobalNavUserProfile, NanoGlobalSearchResults, NanoGrid, NanoGridItem, NanoHero, NanoIcon, NanoIconButton, NanoImg, NanoInput, NanoMenu, NanoMenuDrawer, NanoNavItem, NanoOption, NanoProgressBar, NanoRange, NanoRating, NanoResizeObserve, NanoSelect, NanoSkeleton, NanoSlide, NanoSlides, NanoSpinner, NanoSplitPane, NanoSticker, NanoTab, NanoTabContent, NanoTabGroup, NanoTable, NanoTooltip, NanoVue };
|
|
1289
|
+
//# sourceMappingURL=index.esm.js.map
|