@ebrains/vue 0.9.0-beta → 0.9.2-beta

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier/skip-formatting",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
+      "rules": {
+        "vue/multi-word-component-names": "off"
+      }
+    }
+  ]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -4,4 +4,8 @@ Vue target wrappers for Stencil output, allowing for seamless integration of Ste
 
 ## Usage 
 
-More information about importing and using the package can be found currently in the WIP [https://design-dev.ebrains.eu/ui-components/](EBRAINS Design System).
+More information about importing and using the package can be found currently in the [https://design.ebrains.eu/ui-components/](EBRAINS Design System).
+
+## Licensing
+
+The contents of this package are licensed under `MIT`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/vue",
-  "version": "0.9.0-beta",
+  "version": "0.9.2-beta",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

package/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "vue",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/vue/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project vue --web",
+  "targets": {}
+}

package/src/generated/components.ts

@@ -0,0 +1,374 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-component-lib/utils';
+
+import type { JSX } from '@ebrains/components';
+
+import { defineCustomElements } from '@ebrains/components/loader';
+
+defineCustomElements();
+
+export const EdsAccordion = /*@__PURE__*/ defineContainer<JSX.EdsAccordion>('eds-accordion', undefined, [
+  'heading',
+  'description',
+  'switchBg',
+  'expanded',
+  'clampText',
+  'accordion'
+]);
+
+
+export const EdsAlert = /*@__PURE__*/ defineContainer<JSX.EdsAlert>('eds-alert', undefined, [
+  'message',
+  'pressableLabel',
+  'pressableUrl',
+  'direction',
+  'intent',
+  'brd'
+]);
+
+
+export const EdsAvatar = /*@__PURE__*/ defineContainer<JSX.EdsAvatar>('eds-avatar', undefined, [
+  'firstName',
+  'lastName',
+  'picture',
+  'initials',
+  'color'
+]);
+
+
+export const EdsBlockBreak = /*@__PURE__*/ defineContainer<JSX.EdsBlockBreak>('eds-block-break', undefined, [
+  'extraClass'
+]);
+
+
+export const EdsBreadcrumb = /*@__PURE__*/ defineContainer<JSX.EdsBreadcrumb>('eds-breadcrumb', undefined, [
+  'items',
+  'intent'
+]);
+
+
+export const EdsButton = /*@__PURE__*/ defineContainer<JSX.EdsButton>('eds-button', undefined, [
+  'label',
+  'ariaLabel',
+  'elementType',
+  'intent',
+  'loading',
+  'disabled',
+  'pill',
+  'icon',
+  'size',
+  'iconPos',
+  'iconSmall',
+  'extraClass',
+  'triggerClick'
+]);
+
+
+export const EdsCardGeneric = /*@__PURE__*/ defineContainer<JSX.EdsCardGeneric>('eds-card-generic', undefined, [
+  'cardTitle',
+  'url',
+  'description',
+  'image',
+  'avatar',
+  'shortAbbreviation',
+  'headingLevel',
+  'tags',
+  'tiny',
+  'bg',
+  'withHover',
+  'hierarchy'
+]);
+
+
+export const EdsCardSection = /*@__PURE__*/ defineContainer<JSX.EdsCardSection>('eds-card-section', undefined, [
+  'cards',
+  'occupyCols'
+]);
+
+
+export const EdsCodeBlock = /*@__PURE__*/ defineContainer<JSX.EdsCodeBlock>('eds-code-block', undefined, [
+  'code',
+  'language'
+]);
+
+
+export const EdsDropdown = /*@__PURE__*/ defineContainer<JSX.EdsDropdown>('eds-dropdown', undefined, [
+  'icon',
+  'label',
+  'rounded',
+  'ariaLabel',
+  'asNav',
+  'dropdownPos',
+  'dropdownOffset',
+  'intent',
+  'dropdown'
+]);
+
+
+export const EdsFeedback = /*@__PURE__*/ defineContainer<JSX.EdsFeedback>('eds-feedback', undefined, [
+  'type',
+  'count',
+  'label',
+  'description',
+  'textMapping',
+  'rating'
+]);
+
+
+export const EdsFooter = /*@__PURE__*/ defineContainer<JSX.EdsFooter>('eds-footer', undefined, [
+  'social',
+  'enableScrollTop',
+  'fundedBy',
+  'rightsReserved',
+  'enableCookiesSettings',
+  'cookies'
+]);
+
+
+export const EdsForm = /*@__PURE__*/ defineContainer<JSX.EdsForm>('eds-form', undefined, [
+  'name',
+  'setFormUrl',
+  'formBtn',
+  'formBtnLabel',
+  'errorMessage',
+  'fields',
+  'initData',
+  'form'
+]);
+
+
+export const EdsFullscreenMenu = /*@__PURE__*/ defineContainer<JSX.EdsFullscreenMenu>('eds-fullscreen-menu', undefined, [
+  'links',
+  'menuLinks',
+  'homeUrl',
+  'inverseHeader',
+  'menuClose'
+]);
+
+
+export const EdsHeader = /*@__PURE__*/ defineContainer<JSX.EdsHeader>('eds-header', undefined, [
+  'homeUrl',
+  'links',
+  'inverseHeader',
+  'menuEnabled',
+  'toggleheadermenu'
+]);
+
+
+export const EdsIconWrapper = /*@__PURE__*/ defineContainer<JSX.EdsIconWrapper>('eds-icon-wrapper', undefined, [
+  'icon',
+  'class'
+]);
+
+
+export const EdsImg = /*@__PURE__*/ defineContainer<JSX.EdsImg>('eds-img', undefined, [
+  'src',
+  'alt',
+  'width',
+  'height',
+  'srcset',
+  'sizes',
+  'formats',
+  'lazyload',
+  'withBg'
+]);
+
+
+export const EdsInputField = /*@__PURE__*/ defineContainer<JSX.EdsInputField>('eds-input-field', undefined, [
+  'name',
+  'inputId',
+  'placeholder',
+  'disabled',
+  'onChange',
+  'onInput',
+  'type',
+  'required',
+  'label',
+  'hint',
+  'icon',
+  'link',
+  'message',
+  'error',
+  'checked',
+  'errorMessage',
+  'value',
+  'maxLength',
+  'options'
+]);
+
+
+export const EdsLink = /*@__PURE__*/ defineContainer<JSX.EdsLink>('eds-link', undefined, [
+  'label',
+  'intent',
+  'icon',
+  'iconPos',
+  'iconSmall',
+  'size',
+  'external',
+  'current',
+  'download',
+  'url',
+  'ariaLabel',
+  'disabled',
+  'hideLabelOnSmallScreen',
+  'extraClass'
+]);
+
+
+export const EdsLogo = /*@__PURE__*/ defineContainer<JSX.EdsLogo>('eds-logo', undefined, [
+  'href',
+  'orientation',
+  'type',
+  'label'
+]);
+
+
+export const EdsMatomoNotice = /*@__PURE__*/ defineContainer<JSX.EdsMatomoNotice>('eds-matomo-notice', undefined, [
+  'heading',
+  'description',
+  'optOutMessage',
+  'forceShow',
+  'consent'
+]);
+
+
+export const EdsModal = /*@__PURE__*/ defineContainer<JSX.EdsModal>('eds-modal', undefined, [
+  'heading',
+  'truncate',
+  'position',
+  'inverseHeader'
+]);
+
+
+export const EdsPagination = /*@__PURE__*/ defineContainer<JSX.EdsPagination>('eds-pagination', undefined, [
+  'currentPage',
+  'lastPage',
+  'perPage',
+  'total',
+  'url',
+  'mode',
+  'prevLabel',
+  'nextLabel',
+  'prevUrl',
+  'nextUrl'
+]);
+
+
+export const EdsProgressBar = /*@__PURE__*/ defineContainer<JSX.EdsProgressBar>('eds-progress-bar', undefined, [
+  'value'
+]);
+
+
+export const EdsRating = /*@__PURE__*/ defineContainer<JSX.EdsRating>('eds-rating', undefined, [
+  'ratingType',
+  'ratingCount',
+  'rating'
+]);
+
+
+export const EdsSectionCore = /*@__PURE__*/ defineContainer<JSX.EdsSectionCore>('eds-section-core', undefined, [
+  'tag',
+  'sectionTitle',
+  'headingLevel'
+]);
+
+
+export const EdsSocialNetworks = /*@__PURE__*/ defineContainer<JSX.EdsSocialNetworks>('eds-social-networks', undefined, [
+  'heading'
+]);
+
+
+export const EdsSpinner = /*@__PURE__*/ defineContainer<JSX.EdsSpinner>('eds-spinner', undefined, [
+  'size',
+  'thickness',
+  'borderColor',
+  'bottomColor',
+  'background',
+  'fullscreen'
+]);
+
+
+export const EdsSplashScreen = /*@__PURE__*/ defineContainer<JSX.EdsSplashScreen>('eds-splash-screen', undefined, [
+  'inverse',
+  'initPromise',
+  'splash'
+]);
+
+
+export const EdsSteps = /*@__PURE__*/ defineContainer<JSX.EdsSteps>('eds-steps', undefined, [
+  'steps',
+  'type',
+  'step'
+]);
+
+
+export const EdsStepsV2 = /*@__PURE__*/ defineContainer<JSX.EdsStepsV2>('eds-steps-v2', undefined, [
+  'steps',
+  'type',
+  'imageSrc',
+  'bg',
+  'message',
+  'step'
+]);
+
+
+export const EdsSwitch = /*@__PURE__*/ defineContainer<JSX.EdsSwitch>('eds-switch', undefined, [
+  'checked',
+  'disabled',
+  'labelOn',
+  'labelOff',
+  'toggle'
+]);
+
+
+export const EdsTable = /*@__PURE__*/ defineContainer<JSX.EdsTable>('eds-table', undefined, [
+  'data',
+  'endpoint',
+  'config',
+  'rowsPerPage',
+  'paginationEnabled',
+  'searchEnabled',
+  'hostWidth',
+  'columnSize'
+]);
+
+
+export const EdsTabs = /*@__PURE__*/ defineContainer<JSX.EdsTabs>('eds-tabs', undefined, [
+  'identifier',
+  'navAriaLabel',
+  'tabs',
+  'tab'
+]);
+
+
+export const EdsTag = /*@__PURE__*/ defineContainer<JSX.EdsTag>('eds-tag', undefined, [
+  'label',
+  'intent',
+  'size'
+]);
+
+
+export const EdsTimeline = /*@__PURE__*/ defineContainer<JSX.EdsTimeline>('eds-timeline', undefined, [
+  'events'
+]);
+
+
+export const EdsToast = /*@__PURE__*/ defineContainer<JSX.EdsToast>('eds-toast', undefined, [
+  'message',
+  'intent',
+  'duration'
+]);
+
+
+export const EdsTooltip = /*@__PURE__*/ defineContainer<JSX.EdsTooltip>('eds-tooltip', undefined, [
+  'content',
+  'position'
+]);
+
+
+export const EdsUser = /*@__PURE__*/ defineContainer<JSX.EdsUser>('eds-user', undefined, [
+  'user'
+]);
+

package/src/generated/vue-component-lib/utils.ts

@@ -0,0 +1,236 @@
+// @ts-nocheck
+// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
+import { defineComponent, getCurrentInstance, h, inject, ref, Ref, withDirectives } from 'vue';
+
+export interface InputProps<T> {
+  modelValue?: T;
+}
+
+const UPDATE_VALUE_EVENT = 'update:modelValue';
+const MODEL_VALUE = 'modelValue';
+const ROUTER_LINK_VALUE = 'routerLink';
+const NAV_MANAGER = 'navManager';
+const ROUTER_PROP_PREFIX = 'router';
+const ARIA_PROP_PREFIX = 'aria';
+/**
+ * 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 };
+
+interface NavManager<T = any> {
+  navigate: (options: T) => void;
+}
+
+const getComponentClasses = (classes: unknown) => {
+  return (classes as string)?.split(' ') || [];
+};
+
+const getElementClasses = (
+  ref: Ref<HTMLElement | undefined>,
+  componentClasses: Set<string>,
+  defaultClasses: string[] = []
+) => {
+  return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter(
+    (c: string, 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)
+ */
+export const defineContainer = <Props, VModelType = string | number | boolean>(
+  name: string,
+  defineCustomElement: any,
+  componentProps: string[] = [],
+  modelProp?: string,
+  modelUpdateEvent?: string
+) => {
+  /**
+   * 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 (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
+
+  const Container = defineComponent<Props & InputProps<VModelType>>((props, { attrs, slots, emit }) => {
+    let modelPropValue = props[modelProp];
+    const containerRef = ref<HTMLElement>();
+    const classes = new Set(getComponentClasses(attrs.class));
+
+    /**
+     * This directive is responsible for updating any reactive
+     * reference associated with v-model on the component.
+     * This code must be run inside of the "created" callback.
+     * Since the following listener callbacks as well as any potential
+     * event callback defined in the developer's app are set on
+     * the same element, we need to make sure the following callbacks
+     * are set first so they fire first. If the developer's callback fires first
+     * then the reactive reference will not have been updated yet.
+     */
+    const vModelDirective = {
+      created: (el: HTMLElement) => {
+        const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+        eventsNames.forEach((eventName: string) => {
+          el.addEventListener(eventName.toLowerCase(), (e: Event) => {
+            /**
+             * Only update the v-model binding if the event's target is the element we are
+             * listening on. For example, Component A could emit ionChange, but it could also
+             * have a descendant Component B that also emits ionChange. We only want to update
+             * the v-model for Component A when ionChange originates from that element and not
+             * when ionChange bubbles up from Component B.
+             */
+            if (e.target.tagName === el.tagName) {
+              modelPropValue = (e?.target as any)[modelProp];
+              emit(UPDATE_VALUE_EVENT, modelPropValue);
+            }
+          });
+        });
+      },
+    };
+
+    const currentInstance = getCurrentInstance();
+    const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
+    const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
+    const handleRouterLink = (ev: Event) => {
+      const { routerLink } = props;
+      if (routerLink === EMPTY_PROP) return;
+
+      if (navManager !== undefined) {
+        /**
+         * This prevents the browser from
+         * performing a page reload when pressing
+         * an Ionic component with routerLink.
+         * The page reload interferes with routing
+         * and causes ion-back-button to disappear
+         * since the local history is wiped on reload.
+         */
+        ev.preventDefault();
+
+        let navigationPayload: any = { 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: Event) => {
+        if (oldClick !== undefined) {
+          oldClick(ev);
+        }
+        if (!ev.defaultPrevented) {
+          handleRouterLink(ev);
+        }
+      };
+
+      let propsToAdd: any = {
+        ref: containerRef,
+        class: getElementClasses(containerRef, classes),
+        onClick: handleClick,
+      };
+
+      /**
+       * 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) || key.startsWith(ARIA_PROP_PREFIX)) {
+          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 = {
+            ...propsToAdd,
+            [modelProp]: props[MODEL_VALUE],
+          };
+        } else if (modelPropValue !== EMPTY_PROP) {
+          propsToAdd = {
+            ...propsToAdd,
+            [modelProp]: modelPropValue,
+          };
+        }
+      }
+
+      // If router link is defined, add href to props
+      // in order to properly render an anchor tag inside
+      // of components that should become activatable and
+      // focusable with router link.
+      if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+        propsToAdd = {
+          ...propsToAdd,
+          href: props[ROUTER_LINK_VALUE],
+        };
+      }
+
+      /**
+       * vModelDirective is only needed on components that support v-model.
+       * As a result, we conditionally call withDirectives with v-model components.
+       */
+      const node = h(name, propsToAdd, slots.default && slots.default());
+      return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
+    };
+  });
+
+  if (typeof Container !== 'function') {
+    Container.name = 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];
+    }
+  }
+
+  return Container;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './generated/components';

package/src/vue-shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}