@nanoporetech-digital/components-vue 3.10.1 → 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.
Files changed (25) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/{cjs/proxies.js → index.esm.js} +272 -57
  3. package/dist/index.esm.js.map +1 -0
  4. package/dist/{esm/proxies.js → index.js} +326 -54
  5. package/dist/index.js.map +1 -0
  6. package/dist/web-types.json +1 -1
  7. package/package.json +9 -12
  8. package/dist/cjs/demo/main.js +0 -12
  9. package/dist/cjs/demo/main.js.map +0 -1
  10. package/dist/cjs/index.js +0 -21
  11. package/dist/cjs/index.js.map +0 -1
  12. package/dist/cjs/nano-vue.js +0 -49
  13. package/dist/cjs/nano-vue.js.map +0 -1
  14. package/dist/cjs/proxies.js.map +0 -1
  15. package/dist/cjs/vue-component-lib/utils.js +0 -178
  16. package/dist/cjs/vue-component-lib/utils.js.map +0 -1
  17. package/dist/esm/demo/main.js +0 -7
  18. package/dist/esm/demo/main.js.map +0 -1
  19. package/dist/esm/index.js +0 -3
  20. package/dist/esm/index.js.map +0 -1
  21. package/dist/esm/nano-vue.js +0 -46
  22. package/dist/esm/nano-vue.js.map +0 -1
  23. package/dist/esm/proxies.js.map +0 -1
  24. package/dist/esm/vue-component-lib/utils.js +0 -174
  25. package/dist/esm/vue-component-lib/utils.js.map +0 -1
package/dist/{esm/proxies.js → index.js} RENAMED
@@ -1,14 +1,189 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const vue = require('vue');
6
+ const loader = require('@nanoporetech-digital/components/loader');
7
+
8
+ const UPDATE_VALUE_EVENT = 'update:modelValue';
9
+ const MODEL_VALUE = 'modelValue';
10
+ const ROUTER_LINK_VALUE = 'routerLink';
11
+ const NAV_MANAGER = 'navManager';
12
+ const ROUTER_PROP_PREFIX = 'router';
13
+ const ARIA_PROP_PREFIX = 'aria';
14
+ /**
15
+ * Starting in Vue 3.1.0, all properties are
16
+ * added as keys to the props object, even if
17
+ * they are not being used. In order to correctly
18
+ * account for both value props and v-model props,
19
+ * we need to check if the key exists for Vue <3.1.0
20
+ * and then check if it is not undefined for Vue >= 3.1.0.
21
+ * See https://github.com/vuejs/vue-next/issues/3889
22
+ */
23
+ const EMPTY_PROP = undefined;
24
+ const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
25
+ const getComponentClasses = (classes) => {
26
+ return (classes === null || classes === void 0 ? void 0 : classes.split(' ')) || [];
27
+ };
28
+ const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
29
+ var _a;
30
+ 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);
31
+ };
32
+ /**
33
+ * Create a callback to define a Vue component wrapper around a Web Component.
34
+ *
35
+ * @prop name - The component tag name (i.e. `ion-button`)
36
+ * @prop componentProps - An array of properties on the
37
+ * component. These usually match up with the @Prop definitions
38
+ * in each component's TSX file.
39
+ * @prop customElement - An option custom element instance to pass
40
+ * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
41
+ * @prop modelProp - The prop that v-model binds to (i.e. value)
42
+ * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
43
+ * @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
44
+ * correctly updated when a user's event callback fires.
45
+ */
46
+ const defineContainer = (name, defineCustomElement, componentAttrs = {}, componentProps = [], modelProp, modelUpdateEvent, externalModelUpdateEvent) => {
47
+ /**
48
+ * Create a Vue component wrapper around a Web Component.
49
+ * Note: The `props` here are not all properties on a component.
50
+ * They refer to whatever properties are set on an instance of a component.
51
+ */
52
+ if (defineCustomElement !== undefined) {
53
+ defineCustomElement();
54
+ }
55
+ const Container = vue.defineComponent((props, { attrs, slots, emit }) => {
56
+ var _a;
57
+ let modelPropValue = props[modelProp];
58
+ const containerRef = vue.ref();
59
+ const classes = new Set(getComponentClasses(attrs.class));
60
+ const onVnodeBeforeMount = (vnode) => {
61
+ // Add a listener to tell Vue to update the v-model
62
+ if (vnode.el) {
63
+ const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
64
+ eventsNames.forEach((eventName) => {
65
+ vnode.el.addEventListener(eventName.toLowerCase(), (e) => {
66
+ if (e.target !== vnode.el)
67
+ return;
68
+ modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[modelProp];
69
+ emit(UPDATE_VALUE_EVENT, modelPropValue);
70
+ /**
71
+ * We need to emit the change event here
72
+ * rather than on the web component to ensure
73
+ * that any v-model bindings have been updated.
74
+ * Otherwise, the developer will listen on the
75
+ * native web component, but the v-model will
76
+ * not have been updated yet.
77
+ */
78
+ if (externalModelUpdateEvent) {
79
+ emit(externalModelUpdateEvent, e);
80
+ }
81
+ });
82
+ });
83
+ }
84
+ };
85
+ const currentInstance = vue.getCurrentInstance();
86
+ const hasRouter = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.appContext) === null || _a === void 0 ? void 0 : _a.provides[NAV_MANAGER];
87
+ const navManager = hasRouter ? vue.inject(NAV_MANAGER) : undefined;
88
+ const handleRouterLink = (ev) => {
89
+ const { routerLink } = props;
90
+ if (routerLink === EMPTY_PROP)
91
+ return;
92
+ if (navManager !== undefined) {
93
+ let navigationPayload = { event: ev };
94
+ for (const key in props) {
95
+ const value = props[key];
96
+ if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
97
+ navigationPayload[key] = value;
98
+ }
99
+ }
100
+ navManager.navigate(navigationPayload);
101
+ }
102
+ else {
103
+ console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
104
+ }
105
+ };
106
+ return () => {
107
+ var _a;
108
+ modelPropValue = props[modelProp];
109
+ getComponentClasses(attrs.class).forEach((value) => {
110
+ classes.add(value);
111
+ });
112
+ const oldClick = props.onClick;
113
+ const handleClick = (ev) => {
114
+ if (oldClick !== undefined) {
115
+ oldClick(ev);
116
+ }
117
+ if (!ev.defaultPrevented) {
118
+ handleRouterLink(ev);
119
+ }
120
+ };
121
+ let propsToAdd = {
122
+ ref: containerRef,
123
+ class: getElementClasses(containerRef, classes),
124
+ onClick: handleClick,
125
+ onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined,
126
+ };
127
+ /**
128
+ * We can use Object.entries here
129
+ * to avoid the hasOwnProperty check,
130
+ * but that would require 2 iterations
131
+ * where as this only requires 1.
132
+ */
133
+ for (const key in props) {
134
+ const value = props[key];
135
+ if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
136
+ propsToAdd[componentAttrs[key] || key] = value;
137
+ }
138
+ }
139
+ if (modelProp) {
140
+ /**
141
+ * If form value property was set using v-model
142
+ * then we should use that value.
143
+ * Otherwise, check to see if form value property
144
+ * was set as a static value (i.e. no v-model).
145
+ */
146
+ if (props[MODEL_VALUE] !== EMPTY_PROP) {
147
+ propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: props[MODEL_VALUE] });
148
+ }
149
+ else if (modelPropValue !== EMPTY_PROP) {
150
+ propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: modelPropValue });
151
+ }
152
+ }
153
+ componentProps.forEach((componentProp) => {
154
+ var _a;
155
+ if (((_a = currentInstance.vnode) === null || _a === void 0 ? void 0 : _a.el) &&
156
+ propsToAdd[componentProp] &&
157
+ currentInstance.vnode.el[componentProp] !== propsToAdd[componentProp])
158
+ currentInstance.vnode.el[componentProp] = propsToAdd[componentProp];
159
+ });
160
+ return vue.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());
161
+ };
162
+ });
163
+ Container.displayName = name;
164
+ Container.name = name;
165
+ Container.props = {
166
+ [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
167
+ };
168
+ componentProps.forEach((componentProp) => {
169
+ Container.props[componentProp] = DEFAULT_EMPTY_PROP;
170
+ });
171
+ Container.attrs = {};
172
+ if (modelProp) {
173
+ Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
174
+ Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
175
+ }
176
+ return Container;
177
+ };
178
+
1
179
  /* eslint-disable */
2
- /* tslint:disable */
3
- /* auto-generated vue proxies */
4
- import { defineContainer } from './vue-component-lib/utils';
5
- export const NanoAccordion = /*@__PURE__*/ defineContainer('nano-accordion', undefined, {
180
+ const NanoAccordion = /*@__PURE__*/ defineContainer('nano-accordion', undefined, {
6
181
  color: 'color'
7
182
  }, [
8
183
  'color',
9
184
  'nanoToggle'
10
185
  ]);
11
- export const NanoAlert = /*@__PURE__*/ defineContainer('nano-alert', undefined, {
186
+ const NanoAlert = /*@__PURE__*/ defineContainer('nano-alert', undefined, {
12
187
  open: 'open',
13
188
  closable: 'closable',
14
189
  color: 'color',
@@ -23,7 +198,7 @@ export const NanoAlert = /*@__PURE__*/ defineContainer('nano-alert', undefined,
23
198
  'nanoHide',
24
199
  'nanoAfterHide'
25
200
  ]);
26
- export const NanoAlgolia = /*@__PURE__*/ defineContainer('nano-algolia', undefined, {
201
+ const NanoAlgolia = /*@__PURE__*/ defineContainer('nano-algolia', undefined, {
27
202
  showResults: 'show-results',
28
203
  resultsPage: 'results-page',
29
204
  appId: 'app-id',
@@ -61,7 +236,7 @@ export const NanoAlgolia = /*@__PURE__*/ defineContainer('nano-algolia', undefin
61
236
  'nanoAfterQuery',
62
237
  'nanoNewResults'
63
238
  ]);
64
- export const NanoAlgoliaFilter = /*@__PURE__*/ defineContainer('nano-algolia-filter', undefined, {
239
+ const NanoAlgoliaFilter = /*@__PURE__*/ defineContainer('nano-algolia-filter', undefined, {
65
240
  filterName: 'filter-name',
66
241
  value: 'value',
67
242
  operator: 'operator',
@@ -76,7 +251,7 @@ export const NanoAlgoliaFilter = /*@__PURE__*/ defineContainer('nano-algolia-fil
76
251
  'nanoFilterChanged',
77
252
  'nanoTplUpdated'
78
253
  ]);
79
- export const NanoAlgoliaInput = /*@__PURE__*/ defineContainer('nano-algolia-input', undefined, {
254
+ const NanoAlgoliaInput = /*@__PURE__*/ defineContainer('nano-algolia-input', undefined, {
80
255
  appId: 'app-id',
81
256
  apiKey: 'api-key',
82
257
  searchIndexName: 'search-index-name',
@@ -99,13 +274,13 @@ export const NanoAlgoliaInput = /*@__PURE__*/ defineContainer('nano-algolia-inpu
99
274
  'nanoSearch',
100
275
  'nanoSearchReset'
101
276
  ]);
102
- export const NanoAlgoliaPagination = /*@__PURE__*/ defineContainer('nano-algolia-pagination', undefined, {
277
+ const NanoAlgoliaPagination = /*@__PURE__*/ defineContainer('nano-algolia-pagination', undefined, {
103
278
  maxToShow: 'max-to-show'
104
279
  }, [
105
280
  'maxToShow',
106
281
  'nanoPageChanged'
107
282
  ]);
108
- export const NanoAlgoliaResults = /*@__PURE__*/ defineContainer('nano-algolia-results', undefined, {
283
+ const NanoAlgoliaResults = /*@__PURE__*/ defineContainer('nano-algolia-results', undefined, {
109
284
  infiniteScroll: 'infinite-scroll',
110
285
  appendPages: 'append-pages'
111
286
  }, [
@@ -114,14 +289,14 @@ export const NanoAlgoliaResults = /*@__PURE__*/ defineContainer('nano-algolia-re
114
289
  'nanoPageChanged',
115
290
  'nanoTplUpdated'
116
291
  ]);
117
- export const NanoAspectRatio = /*@__PURE__*/ defineContainer('nano-aspect-ratio', undefined, {
292
+ const NanoAspectRatio = /*@__PURE__*/ defineContainer('nano-aspect-ratio', undefined, {
118
293
  aspectRatio: 'aspect-ratio',
119
294
  fit: 'fit'
120
295
  }, [
121
296
  'aspectRatio',
122
297
  'fit'
123
298
  ]);
124
- export const NanoCheckbox = /*@__PURE__*/ defineContainer('nano-checkbox', undefined, {
299
+ const NanoCheckbox = /*@__PURE__*/ defineContainer('nano-checkbox', undefined, {
125
300
  hasFocus: 'has-focus',
126
301
  checked: 'checked',
127
302
  disabled: 'disabled',
@@ -153,7 +328,7 @@ export const NanoCheckbox = /*@__PURE__*/ defineContainer('nano-checkbox', undef
153
328
  'nanoFocus',
154
329
  'nanoBlur'
155
330
  ], 'checked', 'v-nano-change', 'nanoChange');
156
- export const NanoCheckboxGroup = /*@__PURE__*/ defineContainer('nano-checkbox-group', undefined, {
331
+ const NanoCheckboxGroup = /*@__PURE__*/ defineContainer('nano-checkbox-group', undefined, {
157
332
  validateOn: 'validate-on',
158
333
  showInlineError: 'show-inline-error',
159
334
  min: 'min',
@@ -176,7 +351,7 @@ export const NanoCheckboxGroup = /*@__PURE__*/ defineContainer('nano-checkbox-gr
176
351
  'nanoChange',
177
352
  'nanoValidate'
178
353
  ], 'value', 'v-nano-change', 'nanoChange');
179
- export const NanoDatalist = /*@__PURE__*/ defineContainer('nano-datalist', undefined, {
354
+ const NanoDatalist = /*@__PURE__*/ defineContainer('nano-datalist', undefined, {
180
355
  input: 'input',
181
356
  type: 'type',
182
357
  open: 'open',
@@ -196,7 +371,7 @@ export const NanoDatalist = /*@__PURE__*/ defineContainer('nano-datalist', undef
196
371
  'nanoDeselect',
197
372
  'nanoOptionsUpdated'
198
373
  ]);
199
- export const NanoDateInput = /*@__PURE__*/ defineContainer('nano-date-input', undefined, {
374
+ const NanoDateInput = /*@__PURE__*/ defineContainer('nano-date-input', undefined, {
200
375
  invalid: 'invalid',
201
376
  validityMessage: 'validity-message',
202
377
  helperText: 'helper-text',
@@ -260,7 +435,7 @@ export const NanoDateInput = /*@__PURE__*/ defineContainer('nano-date-input', un
260
435
  'nanoChange',
261
436
  'nanoValidate'
262
437
  ]);
263
- export const NanoDatePicker = /*@__PURE__*/ defineContainer('nano-date-picker', undefined, {
438
+ const NanoDatePicker = /*@__PURE__*/ defineContainer('nano-date-picker', undefined, {
264
439
  selectedDate: 'selected-date',
265
440
  min: 'min',
266
441
  max: 'max',
@@ -279,8 +454,8 @@ export const NanoDatePicker = /*@__PURE__*/ defineContainer('nano-date-picker',
279
454
  'firstFocusEle',
280
455
  'nanoDatePicked'
281
456
  ]);
282
- export const NanoDemo = /*@__PURE__*/ defineContainer('nano-demo', undefined);
283
- export const NanoDetails = /*@__PURE__*/ defineContainer('nano-details', undefined, {
457
+ const NanoDemo = /*@__PURE__*/ defineContainer('nano-demo', undefined);
458
+ const NanoDetails = /*@__PURE__*/ defineContainer('nano-details', undefined, {
284
459
  label: 'label',
285
460
  open: 'open',
286
461
  noHandle: 'no-handle',
@@ -295,7 +470,7 @@ export const NanoDetails = /*@__PURE__*/ defineContainer('nano-details', undefin
295
470
  'nanoOpened',
296
471
  'nanoClosed'
297
472
  ]);
298
- export const NanoDialog = /*@__PURE__*/ defineContainer('nano-dialog', undefined, {
473
+ const NanoDialog = /*@__PURE__*/ defineContainer('nano-dialog', undefined, {
299
474
  showRibbon: 'show-ribbon',
300
475
  open: 'open',
301
476
  label: 'label',
@@ -322,7 +497,7 @@ export const NanoDialog = /*@__PURE__*/ defineContainer('nano-dialog', undefined
322
497
  'nanoInitialFocus',
323
498
  'nanoRequestClose'
324
499
  ]);
325
- export const NanoDrawer = /*@__PURE__*/ defineContainer('nano-drawer', undefined, {
500
+ const NanoDrawer = /*@__PURE__*/ defineContainer('nano-drawer', undefined, {
326
501
  open: 'open',
327
502
  label: 'label',
328
503
  placement: 'placement',
@@ -344,7 +519,7 @@ export const NanoDrawer = /*@__PURE__*/ defineContainer('nano-drawer', undefined
344
519
  'nanoAfterHide',
345
520
  'nanoOverlayDismiss'
346
521
  ]);
347
- export const NanoDropdown = /*@__PURE__*/ defineContainer('nano-dropdown', undefined, {
522
+ const NanoDropdown = /*@__PURE__*/ defineContainer('nano-dropdown', undefined, {
348
523
  autoOpen: 'auto-open',
349
524
  open: 'open',
350
525
  closeOnSelect: 'close-on-select',
@@ -370,7 +545,7 @@ export const NanoDropdown = /*@__PURE__*/ defineContainer('nano-dropdown', undef
370
545
  'nanoHide',
371
546
  'nanoAfterHide'
372
547
  ]);
373
- export const NanoFieldValidator = /*@__PURE__*/ defineContainer('nano-field-validator', undefined, {
548
+ const NanoFieldValidator = /*@__PURE__*/ defineContainer('nano-field-validator', undefined, {
374
549
  validateOn: 'validate-on',
375
550
  scrollToInvalid: 'scroll-to-invalid',
376
551
  dirty: 'dirty',
@@ -392,7 +567,7 @@ export const NanoFieldValidator = /*@__PURE__*/ defineContainer('nano-field-vali
392
567
  'nanoSubmit',
393
568
  'nanoInvalid'
394
569
  ]);
395
- export const NanoFileUpload = /*@__PURE__*/ defineContainer('nano-file-upload', undefined, {
570
+ const NanoFileUpload = /*@__PURE__*/ defineContainer('nano-file-upload', undefined, {
396
571
  name: 'name',
397
572
  accept: 'accept',
398
573
  capture: 'capture',
@@ -434,7 +609,7 @@ export const NanoFileUpload = /*@__PURE__*/ defineContainer('nano-file-upload',
434
609
  'nanoBlur',
435
610
  'nanoValidate'
436
611
  ], 'files', 'v-nano-change', 'nanoChange');
437
- export const NanoGlobalNav = /*@__PURE__*/ defineContainer('nano-global-nav', undefined, {
612
+ const NanoGlobalNav = /*@__PURE__*/ defineContainer('nano-global-nav', undefined, {
438
613
  env: 'env',
439
614
  ssoDataUrl: 'sso-data-url',
440
615
  ssoRedirect: 'sso-redirect',
@@ -475,16 +650,16 @@ export const NanoGlobalNav = /*@__PURE__*/ defineContainer('nano-global-nav', un
475
650
  'nanoSearchError',
476
651
  'nanoSearchReset'
477
652
  ]);
478
- export const NanoGlobalNavUserProfile = /*@__PURE__*/ defineContainer('nano-global-nav-user-profile', undefined, {
653
+ const NanoGlobalNavUserProfile = /*@__PURE__*/ defineContainer('nano-global-nav-user-profile', undefined, {
479
654
  userProfileUrl: 'user-profile-url'
480
655
  }, [
481
656
  'myAccountUser',
482
657
  'userProfileUrl'
483
658
  ]);
484
- export const NanoGlobalSearchResults = /*@__PURE__*/ defineContainer('nano-global-search-results', undefined, {}, [
659
+ const NanoGlobalSearchResults = /*@__PURE__*/ defineContainer('nano-global-search-results', undefined, {}, [
485
660
  'nanoSearchGoBack'
486
661
  ]);
487
- export const NanoGrid = /*@__PURE__*/ defineContainer('nano-grid', undefined, {
662
+ const NanoGrid = /*@__PURE__*/ defineContainer('nano-grid', undefined, {
488
663
  sSize: 's-size',
489
664
  mSize: 'm-size',
490
665
  lSize: 'l-size',
@@ -512,12 +687,12 @@ export const NanoGrid = /*@__PURE__*/ defineContainer('nano-grid', undefined, {
512
687
  'fullHeight',
513
688
  'nanoBpChange'
514
689
  ]);
515
- export const NanoGridItem = /*@__PURE__*/ defineContainer('nano-grid-item', undefined, {
690
+ const NanoGridItem = /*@__PURE__*/ defineContainer('nano-grid-item', undefined, {
516
691
  gridStates: 'grid-states'
517
692
  }, [
518
693
  'gridStates'
519
694
  ]);
520
- export const NanoHero = /*@__PURE__*/ defineContainer('nano-hero', undefined, {
695
+ const NanoHero = /*@__PURE__*/ defineContainer('nano-hero', undefined, {
521
696
  imgSrc: 'img-src',
522
697
  imgSrcSet: 'img-src-set',
523
698
  largeScreenBP: 'large-screen-b-p',
@@ -530,7 +705,7 @@ export const NanoHero = /*@__PURE__*/ defineContainer('nano-hero', undefined, {
530
705
  'theme',
531
706
  'level'
532
707
  ]);
533
- export const NanoIcon = /*@__PURE__*/ defineContainer('nano-icon', undefined, {
708
+ const NanoIcon = /*@__PURE__*/ defineContainer('nano-icon', undefined, {
534
709
  color: 'color',
535
710
  ariaLabel: 'aria-label',
536
711
  flipRtl: 'flip-rtl',
@@ -549,7 +724,7 @@ export const NanoIcon = /*@__PURE__*/ defineContainer('nano-icon', undefined, {
549
724
  'size',
550
725
  'lazy'
551
726
  ]);
552
- export const NanoIconButton = /*@__PURE__*/ defineContainer('nano-icon-button', undefined, {
727
+ const NanoIconButton = /*@__PURE__*/ defineContainer('nano-icon-button', undefined, {
553
728
  iconName: 'icon-name',
554
729
  iconSrc: 'icon-src',
555
730
  type: 'type',
@@ -570,7 +745,7 @@ export const NanoIconButton = /*@__PURE__*/ defineContainer('nano-icon-button',
570
745
  'href',
571
746
  'target'
572
747
  ]);
573
- export const NanoImg = /*@__PURE__*/ defineContainer('nano-img', undefined, {
748
+ const NanoImg = /*@__PURE__*/ defineContainer('nano-img', undefined, {
574
749
  alt: 'alt',
575
750
  src: 'src',
576
751
  srcSet: 'src-set',
@@ -588,7 +763,7 @@ export const NanoImg = /*@__PURE__*/ defineContainer('nano-img', undefined, {
588
763
  'nanoImgDidLoad',
589
764
  'nanoImgError'
590
765
  ]);
591
- export const NanoInput = /*@__PURE__*/ defineContainer('nano-input', undefined, {
766
+ const NanoInput = /*@__PURE__*/ defineContainer('nano-input', undefined, {
592
767
  invalid: 'invalid',
593
768
  validityMessage: 'validity-message',
594
769
  color: 'color',
@@ -672,7 +847,7 @@ export const NanoInput = /*@__PURE__*/ defineContainer('nano-input', undefined,
672
847
  'nanoDidUnload',
673
848
  'nanoValidate'
674
849
  ], 'value', 'v-nano-change', 'nanoChange');
675
- export const NanoMenu = /*@__PURE__*/ defineContainer('nano-menu', undefined, {
850
+ const NanoMenu = /*@__PURE__*/ defineContainer('nano-menu', undefined, {
676
851
  hasFocus: 'has-focus',
677
852
  type: 'type',
678
853
  label: 'label'
@@ -684,7 +859,7 @@ export const NanoMenu = /*@__PURE__*/ defineContainer('nano-menu', undefined, {
684
859
  'nanoBlur',
685
860
  'nanoSelect'
686
861
  ]);
687
- export const NanoMenuDrawer = /*@__PURE__*/ defineContainer('nano-menu-drawer', undefined, {
862
+ const NanoMenuDrawer = /*@__PURE__*/ defineContainer('nano-menu-drawer', undefined, {
688
863
  open: 'open',
689
864
  saveState: 'save-state',
690
865
  hideWidth: 'hide-width',
@@ -695,7 +870,7 @@ export const NanoMenuDrawer = /*@__PURE__*/ defineContainer('nano-menu-drawer',
695
870
  'hideWidth',
696
871
  'hideHeight'
697
872
  ]);
698
- export const NanoNavItem = /*@__PURE__*/ defineContainer('nano-nav-item', undefined, {
873
+ const NanoNavItem = /*@__PURE__*/ defineContainer('nano-nav-item', undefined, {
699
874
  href: 'href',
700
875
  target: 'target',
701
876
  disabled: 'disabled',
@@ -721,7 +896,7 @@ export const NanoNavItem = /*@__PURE__*/ defineContainer('nano-nav-item', undefi
721
896
  'nanoBlur',
722
897
  'nanoFocus'
723
898
  ]);
724
- export const NanoOption = /*@__PURE__*/ defineContainer('nano-option', undefined, {
899
+ const NanoOption = /*@__PURE__*/ defineContainer('nano-option', undefined, {
725
900
  value: 'value',
726
901
  label: 'label',
727
902
  selected: 'selected',
@@ -735,7 +910,7 @@ export const NanoOption = /*@__PURE__*/ defineContainer('nano-option', undefined
735
910
  'filterMeta',
736
911
  'nanoSelect'
737
912
  ]);
738
- export const NanoProgressBar = /*@__PURE__*/ defineContainer('nano-progress-bar', undefined, {
913
+ const NanoProgressBar = /*@__PURE__*/ defineContainer('nano-progress-bar', undefined, {
739
914
  value: 'value',
740
915
  indeterminate: 'indeterminate',
741
916
  showPercent: 'show-percent'
@@ -744,7 +919,7 @@ export const NanoProgressBar = /*@__PURE__*/ defineContainer('nano-progress-bar'
744
919
  'indeterminate',
745
920
  'showPercent'
746
921
  ]);
747
- export const NanoRange = /*@__PURE__*/ defineContainer('nano-range', undefined, {
922
+ const NanoRange = /*@__PURE__*/ defineContainer('nano-range', undefined, {
748
923
  color: 'color',
749
924
  debounce: 'debounce',
750
925
  name: 'name',
@@ -775,7 +950,7 @@ export const NanoRange = /*@__PURE__*/ defineContainer('nano-range', undefined,
775
950
  'nanoFocus',
776
951
  'nanoBlur'
777
952
  ], 'value', 'v-nano-change', 'nanoChange');
778
- export const NanoRating = /*@__PURE__*/ defineContainer('nano-rating', undefined, {
953
+ const NanoRating = /*@__PURE__*/ defineContainer('nano-rating', undefined, {
779
954
  value: 'value',
780
955
  max: 'max',
781
956
  precision: 'precision',
@@ -796,7 +971,7 @@ export const NanoRating = /*@__PURE__*/ defineContainer('nano-rating', undefined
796
971
  'nanoBlur',
797
972
  'nanoFocus'
798
973
  ], 'value', 'v-nano-change', 'nanoChange');
799
- export const NanoResizeObserve = /*@__PURE__*/ defineContainer('nano-resize-observe', undefined, {
974
+ const NanoResizeObserve = /*@__PURE__*/ defineContainer('nano-resize-observe', undefined, {
800
975
  notifyContentFit: 'notify-content-fit',
801
976
  states: 'states'
802
977
  }, [
@@ -806,7 +981,7 @@ export const NanoResizeObserve = /*@__PURE__*/ defineContainer('nano-resize-obse
806
981
  'nanoResizeObserverReady',
807
982
  'nanoResizeContentFitChange'
808
983
  ]);
809
- export const NanoSelect = /*@__PURE__*/ defineContainer('nano-select', undefined, {
984
+ const NanoSelect = /*@__PURE__*/ defineContainer('nano-select', undefined, {
810
985
  invalid: 'invalid',
811
986
  validityMessage: 'validity-message',
812
987
  color: 'color',
@@ -866,18 +1041,18 @@ export const NanoSelect = /*@__PURE__*/ defineContainer('nano-select', undefined
866
1041
  'nanoSearchChange',
867
1042
  'nanoValidate'
868
1043
  ], 'value', 'v-nano-change', 'nanoChange');
869
- export const NanoSkeleton = /*@__PURE__*/ defineContainer('nano-skeleton', undefined, {
1044
+ const NanoSkeleton = /*@__PURE__*/ defineContainer('nano-skeleton', undefined, {
870
1045
  animated: 'animated'
871
1046
  }, [
872
1047
  'animated'
873
1048
  ]);
874
- export const NanoSlide = /*@__PURE__*/ defineContainer('nano-slide', undefined, {
1049
+ const NanoSlide = /*@__PURE__*/ defineContainer('nano-slide', undefined, {
875
1050
  ready: 'ready'
876
1051
  }, [
877
1052
  'ready',
878
1053
  'nanoSlideReady'
879
1054
  ]);
880
- export const NanoSlides = /*@__PURE__*/ defineContainer('nano-slides', undefined, {
1055
+ const NanoSlides = /*@__PURE__*/ defineContainer('nano-slides', undefined, {
881
1056
  navbtns: 'navbtns',
882
1057
  pager: 'pager',
883
1058
  fullscreenbtn: 'fullscreenbtn',
@@ -908,14 +1083,14 @@ export const NanoSlides = /*@__PURE__*/ defineContainer('nano-slides', undefined
908
1083
  'nanoSlidesTap',
909
1084
  'nanoSlidesFullscreenChange'
910
1085
  ]);
911
- export const NanoSpinner = /*@__PURE__*/ defineContainer('nano-spinner', undefined, {
1086
+ const NanoSpinner = /*@__PURE__*/ defineContainer('nano-spinner', undefined, {
912
1087
  type: 'type',
913
1088
  overlay: 'overlay'
914
1089
  }, [
915
1090
  'type',
916
1091
  'overlay'
917
1092
  ]);
918
- export const NanoSplitPane = /*@__PURE__*/ defineContainer('nano-split-pane', undefined, {
1093
+ const NanoSplitPane = /*@__PURE__*/ defineContainer('nano-split-pane', undefined, {
919
1094
  position: 'position',
920
1095
  positionInPixels: 'position-in-pixels',
921
1096
  vertical: 'vertical',
@@ -936,7 +1111,7 @@ export const NanoSplitPane = /*@__PURE__*/ defineContainer('nano-split-pane', un
936
1111
  'nanoReposition',
937
1112
  'nanoDragging'
938
1113
  ]);
939
- export const NanoSticker = /*@__PURE__*/ defineContainer('nano-sticker', undefined, {
1114
+ const NanoSticker = /*@__PURE__*/ defineContainer('nano-sticker', undefined, {
940
1115
  autoResize: 'auto-resize',
941
1116
  isSticky: 'is-sticky',
942
1117
  offset: 'offset',
@@ -962,7 +1137,7 @@ export const NanoSticker = /*@__PURE__*/ defineContainer('nano-sticker', undefin
962
1137
  'nanoHide',
963
1138
  'nanoShow'
964
1139
  ]);
965
- export const NanoTab = /*@__PURE__*/ defineContainer('nano-tab', undefined, {
1140
+ const NanoTab = /*@__PURE__*/ defineContainer('nano-tab', undefined, {
966
1141
  panel: 'panel',
967
1142
  active: 'active',
968
1143
  disabled: 'disabled',
@@ -974,14 +1149,14 @@ export const NanoTab = /*@__PURE__*/ defineContainer('nano-tab', undefined, {
974
1149
  'closable',
975
1150
  'nanoTabClose'
976
1151
  ]);
977
- export const NanoTabContent = /*@__PURE__*/ defineContainer('nano-tab-content', undefined, {
1152
+ const NanoTabContent = /*@__PURE__*/ defineContainer('nano-tab-content', undefined, {
978
1153
  name: 'name',
979
1154
  active: 'active'
980
1155
  }, [
981
1156
  'name',
982
1157
  'active'
983
1158
  ]);
984
- export const NanoTabGroup = /*@__PURE__*/ defineContainer('nano-tab-group', undefined, {
1159
+ const NanoTabGroup = /*@__PURE__*/ defineContainer('nano-tab-group', undefined, {
985
1160
  placement: 'placement',
986
1161
  noScrollControls: 'no-scroll-controls',
987
1162
  color: 'color',
@@ -1000,7 +1175,7 @@ export const NanoTabGroup = /*@__PURE__*/ defineContainer('nano-tab-group', unde
1000
1175
  'nanoTabWillClose',
1001
1176
  'nanoTabClose'
1002
1177
  ]);
1003
- export const NanoTable = /*@__PURE__*/ defineContainer('nano-table', undefined, {
1178
+ const NanoTable = /*@__PURE__*/ defineContainer('nano-table', undefined, {
1004
1179
  type: 'type',
1005
1180
  caption: 'caption',
1006
1181
  showCaption: 'show-caption',
@@ -1045,7 +1220,7 @@ export const NanoTable = /*@__PURE__*/ defineContainer('nano-table', undefined,
1045
1220
  'nanoTblAfterSearch',
1046
1221
  'nanoTblBeforeEdit'
1047
1222
  ]);
1048
- export const NanoTooltip = /*@__PURE__*/ defineContainer('nano-tooltip', undefined, {
1223
+ const NanoTooltip = /*@__PURE__*/ defineContainer('nano-tooltip', undefined, {
1049
1224
  content: 'content',
1050
1225
  placement: 'placement',
1051
1226
  disabled: 'disabled',
@@ -1068,4 +1243,101 @@ export const NanoTooltip = /*@__PURE__*/ defineContainer('nano-tooltip', undefin
1068
1243
  'nanoHide',
1069
1244
  'nanoAfterHide'
1070
1245
  ]);
1071
- //# sourceMappingURL=proxies.js.map
1246
+
1247
+ const eventIgnoreList = ['nanoTplUpdated', 'openWormhole', 'nanoComponentsReady'];
1248
+ /**
1249
+ * We need to make sure that the web component fires an event
1250
+ * that will not conflict with the user's @ionChange binding,
1251
+ * otherwise the binding's callback will fire before any
1252
+ * v-model values have been updated.
1253
+ */
1254
+ const toKebabCase = (eventName) => {
1255
+ if (eventName === 'nanoChange')
1256
+ return 'v-nano-change';
1257
+ else if (eventIgnoreList.includes(eventName))
1258
+ return eventName;
1259
+ else
1260
+ return eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
1261
+ };
1262
+ /**
1263
+ * "ionRefresh" is converted to "ion-refresh".
1264
+ * See https://github.com/vuejs/vue-next/pull/2847
1265
+ */
1266
+ const getHelperFunctions = () => {
1267
+ return {
1268
+ ael: (el, eventName, cb, opts) => el.addEventListener(toKebabCase(eventName), cb, opts),
1269
+ rel: (el, eventName, cb, opts) => el.removeEventListener(toKebabCase(eventName), cb, opts),
1270
+ ce: (eventName, opts) => new CustomEvent(toKebabCase(eventName), opts)
1271
+ };
1272
+ };
1273
+ const NanoVue = {
1274
+ async install(_, _config = {}) {
1275
+ if (typeof window === 'undefined')
1276
+ return;
1277
+ const { ael, rel, ce } = getHelperFunctions();
1278
+ await loader.defineCustomElements(window, {
1279
+ ce,
1280
+ ael,
1281
+ rel
1282
+ });
1283
+ // To use custom-elements bundle instead
1284
+ // initialize({
1285
+ // _ael: ael,
1286
+ // _rel: rel,
1287
+ // _ce: ce,
1288
+ // });
1289
+ },
1290
+ };
1291
+
1292
+ exports.NanoAccordion = NanoAccordion;
1293
+ exports.NanoAlert = NanoAlert;
1294
+ exports.NanoAlgolia = NanoAlgolia;
1295
+ exports.NanoAlgoliaFilter = NanoAlgoliaFilter;
1296
+ exports.NanoAlgoliaInput = NanoAlgoliaInput;
1297
+ exports.NanoAlgoliaPagination = NanoAlgoliaPagination;
1298
+ exports.NanoAlgoliaResults = NanoAlgoliaResults;
1299
+ exports.NanoAspectRatio = NanoAspectRatio;
1300
+ exports.NanoCheckbox = NanoCheckbox;
1301
+ exports.NanoCheckboxGroup = NanoCheckboxGroup;
1302
+ exports.NanoDatalist = NanoDatalist;
1303
+ exports.NanoDateInput = NanoDateInput;
1304
+ exports.NanoDatePicker = NanoDatePicker;
1305
+ exports.NanoDemo = NanoDemo;
1306
+ exports.NanoDetails = NanoDetails;
1307
+ exports.NanoDialog = NanoDialog;
1308
+ exports.NanoDrawer = NanoDrawer;
1309
+ exports.NanoDropdown = NanoDropdown;
1310
+ exports.NanoFieldValidator = NanoFieldValidator;
1311
+ exports.NanoFileUpload = NanoFileUpload;
1312
+ exports.NanoGlobalNav = NanoGlobalNav;
1313
+ exports.NanoGlobalNavUserProfile = NanoGlobalNavUserProfile;
1314
+ exports.NanoGlobalSearchResults = NanoGlobalSearchResults;
1315
+ exports.NanoGrid = NanoGrid;
1316
+ exports.NanoGridItem = NanoGridItem;
1317
+ exports.NanoHero = NanoHero;
1318
+ exports.NanoIcon = NanoIcon;
1319
+ exports.NanoIconButton = NanoIconButton;
1320
+ exports.NanoImg = NanoImg;
1321
+ exports.NanoInput = NanoInput;
1322
+ exports.NanoMenu = NanoMenu;
1323
+ exports.NanoMenuDrawer = NanoMenuDrawer;
1324
+ exports.NanoNavItem = NanoNavItem;
1325
+ exports.NanoOption = NanoOption;
1326
+ exports.NanoProgressBar = NanoProgressBar;
1327
+ exports.NanoRange = NanoRange;
1328
+ exports.NanoRating = NanoRating;
1329
+ exports.NanoResizeObserve = NanoResizeObserve;
1330
+ exports.NanoSelect = NanoSelect;
1331
+ exports.NanoSkeleton = NanoSkeleton;
1332
+ exports.NanoSlide = NanoSlide;
1333
+ exports.NanoSlides = NanoSlides;
1334
+ exports.NanoSpinner = NanoSpinner;
1335
+ exports.NanoSplitPane = NanoSplitPane;
1336
+ exports.NanoSticker = NanoSticker;
1337
+ exports.NanoTab = NanoTab;
1338
+ exports.NanoTabContent = NanoTabContent;
1339
+ exports.NanoTabGroup = NanoTabGroup;
1340
+ exports.NanoTable = NanoTable;
1341
+ exports.NanoTooltip = NanoTooltip;
1342
+ exports.NanoVue = NanoVue;
1343
+ //# sourceMappingURL=index.js.map