@ds-mo/ui 14.14.0 → 14.15.1

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.1",
   "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": {