@utrecht/web-component-library-vue 1.0.0-alpha.31 → 1.0.0-alpha.310

package/package.json

@@ -1,9 +1,12 @@
 {
-  "version": "1.0.0-alpha.31",
+  "version": "1.0.0-alpha.310",
   "author": "Community for NL Design System",
   "description": "Vue.js web components for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@utrecht/web-component-library-vue",
+  "keywords": [
+    "nl-design-system"
+  ],
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -14,20 +17,33 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsc -p .",
-    "clean": "rimraf dist/"
+    "clean": "rimraf dist/",
+    "build": "vue-tsc --noEmit && vite build"
   },
-  "main": "./dist/components.js",
-  "module": "./dist/components.js",
-  "types": "./dist/components.d.ts",
   "files": [
-    "dist/"
+    "dist"
   ],
+  "main": "./dist/web-component-library-vue.umd.js",
+  "module": "./dist/web-component-library-vue.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/web-component-library-vue.es.js",
+      "require": "./dist/web-component-library-vue.umd.js"
+    }
+  },
   "devDependencies": {
-    "@utrecht/web-component-library-stencil": "1.0.0-alpha.85",
+    "@vitejs/plugin-vue": "3.0.1",
+    "@vue/tsconfig": "0.1.3",
     "rimraf": "3.0.2",
     "typescript": "4.1.6 <4.2",
-    "vue": "3.2.11"
+    "vite": "3.0.4",
+    "vite-plugin-dts": "1.4.1",
+    "vue": "3.2.37",
+    "vue-tsc": "0.39.4"
+  },
+  "dependencies": {
+    "@utrecht/web-component-library-stencil": "1.0.0-alpha.364"
   },
-  "gitHead": "33a0050f978f99e79d875724f4f415e743f737a3"
+  "gitHead": "e13e9c6c1ce7f570c69754464081cf4ca9b0d55c"
 }

package/dist/components.js

@@ -1,141 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-/* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
-export const UtrechtArticle = /*@__PURE__*/ defineContainer('utrecht-article', undefined);
-export const UtrechtBadgeCounter = /*@__PURE__*/ defineContainer('utrecht-badge-counter', undefined, [
-    'value',
-    'max',
-    'locale'
-]);
-export const UtrechtBadgeData = /*@__PURE__*/ defineContainer('utrecht-badge-data', undefined);
-export const UtrechtBadgeStatus = /*@__PURE__*/ defineContainer('utrecht-badge-status', undefined, [
-    'status'
-]);
-export const UtrechtBreadcrumb = /*@__PURE__*/ defineContainer('utrecht-breadcrumb', undefined, [
-    'json',
-    'variant'
-]);
-export const UtrechtButton = /*@__PURE__*/ defineContainer('utrecht-button', undefined, [
-    'disabled',
-    'type',
-    'utrechtRequestReset',
-    'utrechtRequestSubmit'
-]);
-export const UtrechtCheckbox = /*@__PURE__*/ defineContainer('utrecht-checkbox', undefined, [
-    'disabled',
-    'readOnly',
-    'checked',
-    'value',
-    'utrechtBlur',
-    'utrechtChange',
-    'utrechtFocus',
-    'utrechtInput'
-], 'checked', 'utrechtInput');
-export const UtrechtContactCardTemplate = /*@__PURE__*/ defineContainer('utrecht-contact-card-template', undefined);
-export const UtrechtDocument = /*@__PURE__*/ defineContainer('utrecht-document', undefined);
-export const UtrechtFormFieldCheckbox = /*@__PURE__*/ defineContainer('utrecht-form-field-checkbox', undefined, [
-    'label',
-    'disabled',
-    'checked',
-    'invalid',
-    'required',
-    'utrechtBlur',
-    'utrechtChange',
-    'utrechtFocus',
-    'utrechtInput'
-], 'checked', 'utrechtInput');
-export const UtrechtFormFieldDescription = /*@__PURE__*/ defineContainer('utrecht-form-field-description', undefined, [
-    'status'
-]);
-export const UtrechtFormFieldTextarea = /*@__PURE__*/ defineContainer('utrecht-form-field-textarea', undefined, [
-    'disabled',
-    'invalid',
-    'readOnly',
-    'placeholder',
-    'required',
-    'value',
-    'utrechtBlur',
-    'utrechtChange',
-    'utrechtFocus',
-    'utrechtInput'
-], 'value', 'utrechtInput');
-export const UtrechtFormFieldTextbox = /*@__PURE__*/ defineContainer('utrecht-form-field-textbox', undefined, [
-    'autoComplete',
-    'disabled',
-    'invalid',
-    'min',
-    'max',
-    'pattern',
-    'placeholder',
-    'readOnly',
-    'required',
-    'type',
-    'value',
-    'utrechtBlur',
-    'utrechtChange',
-    'utrechtFocus',
-    'utrechtInput'
-], 'value', 'utrechtInput');
-export const UtrechtFormToggle = /*@__PURE__*/ defineContainer('utrecht-form-toggle', undefined, [
-    'disabled',
-    'checked',
-    'utrechtBlur',
-    'utrechtChange',
-    'utrechtFocus',
-    'utrechtInput'
-], 'checked', 'utrechtInput');
-export const UtrechtHeading = /*@__PURE__*/ defineContainer('utrecht-heading', undefined, [
-    'level'
-]);
-export const UtrechtHeading1 = /*@__PURE__*/ defineContainer('utrecht-heading-1', undefined);
-export const UtrechtHeading2 = /*@__PURE__*/ defineContainer('utrecht-heading-2', undefined);
-export const UtrechtHeading3 = /*@__PURE__*/ defineContainer('utrecht-heading-3', undefined);
-export const UtrechtHeading4 = /*@__PURE__*/ defineContainer('utrecht-heading-4', undefined);
-export const UtrechtHeading5 = /*@__PURE__*/ defineContainer('utrecht-heading-5', undefined);
-export const UtrechtHeading6 = /*@__PURE__*/ defineContainer('utrecht-heading-6', undefined);
-export const UtrechtHtmlContent = /*@__PURE__*/ defineContainer('utrecht-html-content', undefined);
-export const UtrechtIconArrow = /*@__PURE__*/ defineContainer('utrecht-icon-arrow', undefined);
-export const UtrechtIconCross = /*@__PURE__*/ defineContainer('utrecht-icon-cross', undefined);
-export const UtrechtIconFacebook = /*@__PURE__*/ defineContainer('utrecht-icon-facebook', undefined);
-export const UtrechtIconFilter = /*@__PURE__*/ defineContainer('utrecht-icon-filter', undefined);
-export const UtrechtIconInstagram = /*@__PURE__*/ defineContainer('utrecht-icon-instagram', undefined);
-export const UtrechtIconLinkedin = /*@__PURE__*/ defineContainer('utrecht-icon-linkedin', undefined);
-export const UtrechtIconList = /*@__PURE__*/ defineContainer('utrecht-icon-list', undefined);
-export const UtrechtIconLoupe = /*@__PURE__*/ defineContainer('utrecht-icon-loupe', undefined);
-export const UtrechtIconTwitter = /*@__PURE__*/ defineContainer('utrecht-icon-twitter', undefined);
-export const UtrechtIconWhatsapp = /*@__PURE__*/ defineContainer('utrecht-icon-whatsapp', undefined);
-export const UtrechtIconZoomin = /*@__PURE__*/ defineContainer('utrecht-icon-zoomin', undefined);
-export const UtrechtIconZoomout = /*@__PURE__*/ defineContainer('utrecht-icon-zoomout', undefined);
-export const UtrechtLogo = /*@__PURE__*/ defineContainer('utrecht-logo', undefined);
-export const UtrechtPageFooter = /*@__PURE__*/ defineContainer('utrecht-page-footer', undefined);
-export const UtrechtPagination = /*@__PURE__*/ defineContainer('utrecht-pagination', undefined, [
-    'links',
-    'next',
-    'prev',
-    'currentIndex'
-]);
-export const UtrechtParagraph = /*@__PURE__*/ defineContainer('utrecht-paragraph', undefined, [
-    'lead'
-]);
-export const UtrechtSeparator = /*@__PURE__*/ defineContainer('utrecht-separator', undefined);
-export const UtrechtSidenav = /*@__PURE__*/ defineContainer('utrecht-sidenav', undefined, [
-    'json'
-]);
-export const UtrechtTextbox = /*@__PURE__*/ defineContainer('utrecht-textbox', undefined, [
-    'autoComplete',
-    'disabled',
-    'invalid',
-    'min',
-    'max',
-    'pattern',
-    'placeholder',
-    'readOnly',
-    'required',
-    'type',
-    'value',
-    'utrechtBlur',
-    'utrechtChange',
-    'utrechtFocus',
-    'utrechtInput'
-], 'value', 'utrechtInput');

package/dist/vue-component-lib/utils.js

@@ -1,162 +0,0 @@
-import { defineComponent, getCurrentInstance, h, inject, ref } from 'vue';
-const UPDATE_VALUE_EVENT = 'update:modelValue';
-const MODEL_VALUE = 'modelValue';
-const ROUTER_LINK_VALUE = 'routerLink';
-const NAV_MANAGER = 'navManager';
-const ROUTER_PROP_PREFIX = 'router';
-/**
- * Starting in Vue 3.1.0, all properties are
- * added as keys to the props object, even if
- * they are not being used. In order to correctly
- * account for both value props and v-model props,
- * we need to check if the key exists for Vue <3.1.0
- * and then check if it is not undefined for Vue >= 3.1.0.
- * See https://github.com/vuejs/vue-next/issues/3889
- */
-const EMPTY_PROP = Symbol();
-const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
-const getComponentClasses = (classes) => {
-    var _a;
-    return ((_a = classes) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
-};
-const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
-    var _a;
-    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);
-};
-/**
-* Create a callback to define a Vue component wrapper around a Web Component.
-*
-* @prop name - The component tag name (i.e. `ion-button`)
-* @prop componentProps - An array of properties on the
-* component. These usually match up with the @Prop definitions
-* in each component's TSX file.
-* @prop customElement - An option custom element instance to pass
-* to customElements.define. Only set if `includeImportCustomElements: true` in your config.
-* @prop modelProp - The prop that v-model binds to (i.e. value)
-* @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
-* @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
-* correctly updated when a user's event callback fires.
-*/
-export const defineContainer = (name, customElement, componentProps = [], modelProp, modelUpdateEvent, externalModelUpdateEvent) => {
-    /**
-    * Create a Vue component wrapper around a Web Component.
-    * Note: The `props` here are not all properties on a component.
-    * They refer to whatever properties are set on an instance of a component.
-    */
-    if (customElement !== undefined &&
-        typeof customElements !== 'undefined' &&
-        !customElements.get(name)) {
-        customElements.define(name, customElement);
-    }
-    const Container = defineComponent((props, { attrs, slots, emit }) => {
-        var _a;
-        let modelPropValue = props[modelProp];
-        const containerRef = ref();
-        const classes = new Set(getComponentClasses(attrs.class));
-        const onVnodeBeforeMount = (vnode) => {
-            // Add a listener to tell Vue to update the v-model
-            if (vnode.el) {
-                const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
-                eventsNames.forEach((eventName) => {
-                    vnode.el.addEventListener(eventName, (e) => {
-                        modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[modelProp];
-                        emit(UPDATE_VALUE_EVENT, modelPropValue);
-                        /**
-                         * We need to emit the change event here
-                         * rather than on the web component to ensure
-                         * that any v-model bindings have been updated.
-                         * Otherwise, the developer will listen on the
-                         * native web component, but the v-model will
-                         * not have been updated yet.
-                         */
-                        if (externalModelUpdateEvent) {
-                            emit(externalModelUpdateEvent, e);
-                        }
-                    });
-                });
-            }
-        };
-        const currentInstance = getCurrentInstance();
-        const hasRouter = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.appContext) === null || _a === void 0 ? void 0 : _a.provides[NAV_MANAGER];
-        const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
-        const handleRouterLink = (ev) => {
-            const { routerLink } = props;
-            if (routerLink === EMPTY_PROP)
-                return;
-            if (navManager !== undefined) {
-                let navigationPayload = { event: ev };
-                for (const key in props) {
-                    const value = props[key];
-                    if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
-                        navigationPayload[key] = value;
-                    }
-                }
-                navManager.navigate(navigationPayload);
-            }
-            else {
-                console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
-            }
-        };
-        return () => {
-            modelPropValue = props[modelProp];
-            getComponentClasses(attrs.class).forEach(value => {
-                classes.add(value);
-            });
-            const oldClick = props.onClick;
-            const handleClick = (ev) => {
-                if (oldClick !== undefined) {
-                    oldClick(ev);
-                }
-                if (!ev.defaultPrevented) {
-                    handleRouterLink(ev);
-                }
-            };
-            let propsToAdd = {
-                ref: containerRef,
-                class: getElementClasses(containerRef, classes),
-                onClick: handleClick,
-                onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
-            };
-            /**
-             * We can use Object.entries here
-             * to avoid the hasOwnProperty check,
-             * but that would require 2 iterations
-             * where as this only requires 1.
-             */
-            for (const key in props) {
-                const value = props[key];
-                if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
-                    propsToAdd[key] = value;
-                }
-            }
-            if (modelProp) {
-                /**
-                 * If form value property was set using v-model
-                 * then we should use that value.
-                 * Otherwise, check to see if form value property
-                 * was set as a static value (i.e. no v-model).
-                 */
-                if (props[MODEL_VALUE] !== EMPTY_PROP) {
-                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: props[MODEL_VALUE] });
-                }
-                else if (modelPropValue !== EMPTY_PROP) {
-                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: modelPropValue });
-                }
-            }
-            return h(name, propsToAdd, slots.default && slots.default());
-        };
-    });
-    Container.displayName = name;
-    Container.props = {
-        [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP
-    };
-    componentProps.forEach(componentProp => {
-        Container.props[componentProp] = DEFAULT_EMPTY_PROP;
-    });
-    if (modelProp) {
-        Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
-        Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
-    }
-    return Container;
-};