@ebrains/vue 0.9.2-beta → 0.9.3-beta

package/user-71ebdc15-BBKQbcQD.js

@@ -0,0 +1,14 @@
+"use strict";const r=`<svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="10" cy="6" r="3" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M17 18V17C17 14.7909 15.2091 13 13 13H7C4.79086 13 3 14.7909 3 17V18"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+  </svg>`;exports.user=r;

package/user-71ebdc15-CoHlCtJg.mjs

@@ -0,0 +1,17 @@
+const r = `<svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="10" cy="6" r="3" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M17 18V17C17 14.7909 15.2091 13 13 13H7C4.79086 13 3 14.7909 3 17V18"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+  </svg>`;
+export {
+  r as u
+};

package/youtube-efbfbdc4-BLTH1Jl9.js

@@ -0,0 +1,12 @@
+"use strict";const C=`  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.5821 5.18614C19.3521 4.3256 18.6743 3.64795 17.8137 3.41797C16.2542 3 10 3 10 3C10 3 3.74579 3 2.18614 3.41797C1.32557 3.64795 0.647844 4.3256 0.417841 5.18614C-2.98023e-08 6.74579 0 10 0 10C0 10 -2.98023e-08 13.2541 0.417841 14.8139C0.647844 15.6744 1.32557 16.352 2.18614 16.5821C3.74579 17 10 17 10 17C10 17 16.2542 17 17.8137 16.5821C18.6743 16.352 19.3521 15.6744 19.5821 14.8139C20 13.2541 20 10 20 10C20 10 20 6.74579 19.5821 5.18614ZM8 13V7L14 10L8 13Z"
+      fill="currentColor"
+    />
+  </svg>`;exports.youtube=C;

package/youtube-efbfbdc4-BfySbfjR.mjs

@@ -0,0 +1,15 @@
+const C = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.5821 5.18614C19.3521 4.3256 18.6743 3.64795 17.8137 3.41797C16.2542 3 10 3 10 3C10 3 3.74579 3 2.18614 3.41797C1.32557 3.64795 0.647844 4.3256 0.417841 5.18614C-2.98023e-08 6.74579 0 10 0 10C0 10 -2.98023e-08 13.2541 0.417841 14.8139C0.647844 15.6744 1.32557 16.352 2.18614 16.5821C3.74579 17 10 17 10 17C10 17 16.2542 17 17.8137 16.5821C18.6743 16.352 19.3521 15.6744 19.5821 14.8139C20 13.2541 20 10 20 10C20 10 20 6.74579 19.5821 5.18614ZM8 13V7L14 10L8 13Z"
+      fill="currentColor"
+    />
+  </svg>`;
+export {
+  C as y
+};

package/.eslintrc.json

@@ -1,18 +0,0 @@
-{
-  "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/project.json

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,374 +0,0 @@
-/* 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

@@ -1,236 +0,0 @@
-// @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

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