@ds-mo/ui 14.14.0 → 14.15.0

package/dist/vue/ds-table.js

@@ -0,0 +1,86 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTable } from '@ds-mo/ui/components/ds-table.js';
+export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable, [
+    'columns',
+    'rows',
+    'groups',
+    'grouping',
+    'sort',
+    'collapsedGroupIds',
+    'caption',
+    'captionVisibility',
+    'columnCustomizer',
+    'hiddenColumnIds',
+    'columnOrder',
+    'displayedCount',
+    'totalCount',
+    'resultSummaryLabel',
+    'resultTotalSummaryLabel',
+    'stickyHeader',
+    'maxHeight',
+    'height',
+    'fitViewport',
+    'viewportInsetBlockStart',
+    'viewportInsetBlockEnd',
+    'scrollLabel',
+    'selectionMode',
+    'selectedRowIds',
+    'loading',
+    'chromeLoading',
+    'skeletonRows',
+    'emptyHeading',
+    'emptyBody',
+    'error',
+    'errorHeading',
+    'errorBody',
+    'emptyCellLabel',
+    'dataMode',
+    'dataModeSwitcher',
+    'dataModeSwitcherLabel',
+    'dataModeMenuLabel',
+    'infiniteModeLabel',
+    'paginationModeLabel',
+    'virtualModeLabel',
+    'pagination',
+    'loadMoreMode',
+    'hasMore',
+    'loadingMore',
+    'loadMoreError',
+    'loadIdentity',
+    'loadMoreThreshold',
+    'loadMoreLabel',
+    'retryLabel',
+    'loadingMoreLabel',
+    'endOfResultsLabel',
+    'rowsLoadedLabel',
+    'groupLoadMoreLabel',
+    'groupLoadMoreAriaLabel',
+    'groupRetryLabel',
+    'groupLoadingMoreLabel',
+    'groupEndOfResultsLabel',
+    'groupRowsLoadedLabel',
+    'dsSortChange',
+    'dsGroupCollapseChange',
+    'dsSelectionChange',
+    'dsLoadMore',
+    'dsGroupLoadMore',
+    'dsPaginationChange',
+    'dsCellAction',
+    'dsRowActivate',
+    'dsColumnsConfigChange',
+    'dsDataModeChange'
+], [
+    'dsSortChange',
+    'dsGroupCollapseChange',
+    'dsSelectionChange',
+    'dsLoadMore',
+    'dsGroupLoadMore',
+    'dsPaginationChange',
+    'dsCellAction',
+    'dsRowActivate',
+    'dsColumnsConfigChange',
+    'dsDataModeChange'
+]);

package/dist/vue/ds-tag.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsTag: StencilVueComponent<JSX.DsTag>;

package/dist/vue/ds-tag.js

@@ -0,0 +1,23 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTag } from '@ds-mo/ui/components/ds-tag.js';
+export const DsTag = /*@__PURE__*/ defineContainer('ds-tag', defineDsTag, [
+    'label',
+    'icon',
+    'intent',
+    'contrast',
+    'size',
+    'isInset',
+    'insetDepth',
+    'rounded',
+    'maxWidth',
+    'interactive',
+    'expanded',
+    'ariaControls',
+    'isInactive',
+    'dsClick'
+], [
+    'dsClick'
+]);

package/dist/vue/ds-text.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsText: StencilVueComponent<JSX.DsText>;

package/dist/vue/ds-text.js

@@ -0,0 +1,20 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsText } from '@ds-mo/ui/components/ds-text.js';
+export const DsText = /*@__PURE__*/ defineContainer('ds-text', defineDsText, [
+    'variant',
+    'emphasis',
+    'color',
+    'decoration',
+    'italic',
+    'shimmer',
+    'align',
+    'lineTruncation',
+    'wrap',
+    'fontFeature',
+    'as',
+    'for',
+    'textId'
+]);

package/dist/vue/ds-toast.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsToast: StencilVueComponent<JSX.DsToast>;

package/dist/vue/ds-toast.js

@@ -0,0 +1,21 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsToast } from '@ds-mo/ui/components/ds-toast.js';
+export const DsToast = /*@__PURE__*/ defineContainer('ds-toast', defineDsToast, [
+    'manager',
+    'limit',
+    'timeout',
+    'label',
+    'closeLabel',
+    'avoidMobileShellBar',
+    'swipeDirections',
+    'dsToastClose',
+    'dsToastRemove',
+    'dsToastAction'
+], [
+    'dsToastClose',
+    'dsToastRemove',
+    'dsToastAction'
+]);

package/dist/vue/ds-tooltip-chart.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsTooltipChart: StencilVueComponent<JSX.DsTooltipChart>;

package/dist/vue/ds-tooltip-chart.js

@@ -0,0 +1,14 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTooltipChart } from '@ds-mo/ui/components/ds-tooltip-chart.js';
+export const DsTooltipChart = /*@__PURE__*/ defineContainer('ds-tooltip-chart', defineDsTooltipChart, [
+    'value',
+    'label',
+    'heading',
+    'items',
+    'x',
+    'y',
+    'delay'
+]);

package/dist/vue/ds-tooltip.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsTooltip: StencilVueComponent<JSX.DsTooltip>;

package/dist/vue/ds-tooltip.js

@@ -0,0 +1,18 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTooltip } from '@ds-mo/ui/components/ds-tooltip.js';
+export const DsTooltip = /*@__PURE__*/ defineContainer('ds-tooltip', defineDsTooltip, [
+    'label',
+    'size',
+    'side',
+    'align',
+    'sideOffset',
+    'alignOffset',
+    'delay',
+    'shortcutKey',
+    'shortcutKeyPosition',
+    'describedBy',
+    'wrapLabel'
+]);

package/dist/vue/ds-typing-indicator.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsTypingIndicator: StencilVueComponent<JSX.DsTypingIndicator>;

package/dist/vue/ds-typing-indicator.js

@@ -0,0 +1,8 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTypingIndicator } from '@ds-mo/ui/components/ds-typing-indicator.js';
+export const DsTypingIndicator = /*@__PURE__*/ defineContainer('ds-typing-indicator', defineDsTypingIndicator, [
+    'label'
+]);

package/dist/vue/vue-runtime.d.ts

@@ -0,0 +1,32 @@
+import type {
+  AllowedComponentProps,
+  ComponentCustomProps,
+  DefineSetupFnComponent,
+  VNodeProps,
+} from 'vue';
+
+export type StencilVueComponent<
+  Props,
+  VModelType = string | number | boolean,
+> = DefineSetupFnComponent<
+  Props & { modelValue?: VModelType } & VNodeProps & AllowedComponentProps & ComponentCustomProps,
+  {},
+  {},
+  Props & { modelValue?: VModelType } & VNodeProps & AllowedComponentProps & ComponentCustomProps
+>;
+
+export declare function defineContainer<
+  Props,
+  VModelType = string | number | boolean,
+>(
+  name: string,
+  defineCustomElement?: () => void,
+  componentProps?: string[],
+  emitProps?: string[],
+  modelProp?: string,
+  modelUpdateEvent?: string,
+  modelUpdateEventAttribute?: string,
+  transformTagFn?: (tagName: string) => string,
+): StencilVueComponent<Props, VModelType>;
+
+export declare function defineStencilSSRComponent(...args: never[]): never;

package/dist/vue/vue-runtime.js

@@ -0,0 +1,218 @@
+// node_modules/@stencil/vue-output-target/dist/runtime.js
+import { defineComponent, useSlots, createSSRApp, compile, ref, onMounted, getCurrentInstance, inject, h, withDirectives } from "vue";
+function isPrimitive(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function defineStencilSSRComponent(options) {
+  return defineComponent({
+    async setup(props, context) {
+      const slots = useSlots();
+      let renderedLightDom = "";
+      if (typeof slots.default === "function") {
+        const ssrLightDom = createSSRApp({ render: () => slots.default() });
+        const { renderToString: vueRenderToString } = await import("vue/server-renderer");
+        renderedLightDom = await vueRenderToString(ssrLightDom, { context });
+      }
+      let stringProps = "";
+      const complexProps = {};
+      for (const [key, value] of Object.entries(props)) {
+        if (typeof value === "undefined") {
+          continue;
+        }
+        if (!isPrimitive(value)) {
+          complexProps[key] = value;
+          continue;
+        }
+        if (typeof value === "boolean" && value === false) {
+          continue;
+        }
+        const propName = options.props?.[key]?.[1] ?? key;
+        const propValue = typeof value === "boolean" ? '"true"' : `"${value}"`;
+        stringProps += ` ${propName}=${propValue}`;
+      }
+      const hydrateModule = await options.hydrateModule;
+      if (options.getTagTransformer) {
+        const tagTransformer = options.getTagTransformer();
+        if (tagTransformer && hydrateModule.setTagTransformer) {
+          hydrateModule.setTagTransformer(tagTransformer);
+        }
+      }
+      const transformedTagName = hydrateModule.transformTag ? hydrateModule.transformTag(options.tagName) : options.tagName;
+      const toSerialize = `<${transformedTagName}${stringProps}>${renderedLightDom}</${transformedTagName}>`;
+      const { renderToString } = hydrateModule;
+      const { html } = await renderToString(toSerialize, {
+        fullDocument: false,
+        serializeShadowRoot: true,
+        ...Object.keys(complexProps).length > 0 && {
+          beforeHydrate: (doc) => {
+            const el = doc.querySelector(transformedTagName);
+            if (el) {
+              for (const [propName, value] of Object.entries(complexProps)) {
+                el[propName] = value;
+              }
+            }
+          }
+        }
+      });
+      if (!html) {
+        throw new Error(`'${options.tagName}' component did not render anything.`);
+      }
+      return compile(html.replace(/<style([^>]*)>/g, `<component :is="'style'" $1>`).replace(/<\/style>/g, "</component>"), {
+        comments: true,
+        isCustomElement: (tag) => tag === transformedTagName || tag === options.tagName
+      });
+    },
+    props: Object.entries(options.props || {}).reduce((acc, [key, value]) => {
+      acc[key] = value[0];
+      return acc;
+    }, {}),
+    /**
+     * the template tags can be arbitrary as they will be replaced with above compiled template
+     */
+    template: "<div></div>"
+  });
+}
+var UPDATE_VALUE_EVENT = "update:modelValue";
+var MODEL_VALUE = "modelValue";
+var ROUTER_LINK_VALUE = "routerLink";
+var NAV_MANAGER = "navManager";
+var ROUTER_PROP_PREFIX = "router";
+var ARIA_PROP_PREFIX = "aria";
+var EMPTY_PROP = /* @__PURE__ */ Symbol();
+var DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+var getComponentClasses = (classes) => {
+  return classes?.split(" ") || [];
+};
+var syncElementClasses = (ref2, componentClasses, defaultClasses = []) => {
+  if (ref2?.value) {
+    const element = ref2.value;
+    componentClasses.forEach((c) => {
+      if (!!c && !element.classList.contains(c)) {
+        element.classList.add(c);
+      }
+    });
+  }
+  return [...Array.from(ref2.value?.classList || []), ...defaultClasses].filter((c, i, self) => {
+    return !componentClasses.has(c) && self.indexOf(c) === i;
+  });
+};
+var defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent, modelUpdateEventAttribute, transformTagFn) => {
+  if (defineCustomElement !== void 0) {
+    defineCustomElement();
+  }
+  const emits = emitProps;
+  const props = [ROUTER_LINK_VALUE, ...componentProps].reduce((acc, prop) => {
+    acc[prop] = DEFAULT_EMPTY_PROP;
+    return acc;
+  }, {});
+  if (modelProp) {
+    emits.push(UPDATE_VALUE_EVENT);
+    props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+  }
+  return defineComponent((props2, { attrs, slots, emit }) => {
+    let modelPropValue = modelProp ? props2[modelProp] : void 0;
+    const containerRef = ref();
+    const classes = new Set(getComponentClasses(attrs.class));
+    onMounted(() => {
+      emitProps.forEach((eventName) => {
+        containerRef.value?.addEventListener(eventName, (e) => {
+          emit(eventName, e);
+        });
+      });
+    });
+    const vModelDirective = {
+      created: (el) => {
+        const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+        eventsNames.forEach((eventName) => {
+          el.addEventListener(eventName, (e) => {
+            if (e.target.tagName === el.tagName && modelProp) {
+              const resolvePath = (object, path2) => {
+                return path2.split(".").reduce((value, key) => value !== void 0 ? value[key] : void 0, object);
+              };
+              const path = modelUpdateEventAttribute ?? `target.${modelProp}`;
+              const modelPropValue2 = resolvePath(e, path);
+              emit(UPDATE_VALUE_EVENT, modelPropValue2);
+            }
+          });
+        });
+      }
+    };
+    const currentInstance = getCurrentInstance();
+    const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
+    const navManager = hasRouter ? inject(NAV_MANAGER) : void 0;
+    const handleRouterLink = (ev) => {
+      const { routerLink } = props2;
+      if (routerLink === EMPTY_PROP)
+        return;
+      const mouseEv = ev;
+      if (mouseEv.metaKey || mouseEv.ctrlKey || mouseEv.shiftKey) {
+        return;
+      }
+      if (navManager !== void 0) {
+        ev.preventDefault();
+        let navigationPayload = { event: ev };
+        for (const key in props2) {
+          const value = props2[key];
+          if (props2.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 = props2[modelProp];
+      getComponentClasses(attrs.class).forEach((value) => {
+        classes.add(value);
+      });
+      const oldClick = props2.onClick;
+      const handleClick = (ev) => {
+        if (oldClick !== void 0) {
+          oldClick(ev);
+        }
+        if (!ev.defaultPrevented) {
+          handleRouterLink(ev);
+        }
+      };
+      const propsToAdd = {
+        ref: containerRef,
+        class: syncElementClasses(containerRef, classes),
+        onClick: handleClick
+      };
+      for (const key in props2) {
+        const value = props2[key];
+        if (props2.hasOwnProperty(key) && value !== EMPTY_PROP || key.startsWith(ARIA_PROP_PREFIX)) {
+          propsToAdd[key] = value;
+        }
+        const eventHandlerKey = "on" + key.slice(0, 1).toUpperCase() + key.slice(1);
+        const eventHandler = attrs[eventHandlerKey];
+        if (containerRef.value && attrs.hasOwnProperty(eventHandlerKey) && "addEventListener" in containerRef.value) {
+          containerRef.value.addEventListener(key, eventHandler);
+        }
+      }
+      if (modelProp) {
+        if (props2[MODEL_VALUE] !== EMPTY_PROP) {
+          propsToAdd[modelProp] = props2[MODEL_VALUE];
+        } else if (modelPropValue !== EMPTY_PROP) {
+          propsToAdd[modelProp] = modelPropValue;
+        }
+      }
+      if (ROUTER_LINK_VALUE in props2 && props2[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+        propsToAdd.href = props2[ROUTER_LINK_VALUE];
+      }
+      const tagName = transformTagFn ? transformTagFn(name) : name;
+      const node = h(tagName, propsToAdd, slots.default && slots.default());
+      return modelProp === void 0 ? node : withDirectives(node, [[vModelDirective]]);
+    };
+  }, {
+    name,
+    props,
+    emits
+  });
+};
+export {
+  defineContainer,
+  defineStencilSSRComponent
+};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.14.0",
+  "version": "14.15.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
     "custom-elements",
     "react",
     "angular",
+    "vue",
     "components",
     "ui",
     "design-system",
@@ -44,6 +45,10 @@
       "types": "./dist/react/components.d.ts",
       "import": "./dist/react/components.js"
     },
+    "./vue": {
+      "types": "./dist/vue/components.d.ts",
+      "import": "./dist/vue/components.js"
+    },
     "./dist/components": {
       "types": "./dist/types/components.d.ts",
       "import": "./dist/components/index.js"
@@ -114,7 +119,8 @@
     "@ds-mo/tokens": "^6.5.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "rxjs": "^7.8.0"
+    "rxjs": "^7.8.0",
+    "vue": "^3.4.38"
   },
   "peerDependenciesMeta": {
     "@angular/core": {
@@ -131,6 +137,9 @@
     },
     "rxjs": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -150,6 +159,7 @@
     "@stencil/angular-output-target": "^1.4.0",
     "@stencil/core": "^4.43.5",
     "@stencil/react-output-target": "^1.6.0",
+    "@stencil/vue-output-target": "^0.14.1",
     "@storybook/addon-a11y": "^10.5.1",
     "@storybook/addon-docs": "^10.5.0",
     "@storybook/addon-vitest": "^10.5.2",
@@ -180,6 +190,8 @@
     "typescript-eslint": "^8.63.0",
     "vite": "^8.1.4",
     "vitest": "^4.1.10",
+    "vue": "^3.5.41",
+    "vue-router": "^5.2.0",
     "zod": "^4.4.3"
   },
   "engines": {