@shineuix/vue 0.0.0-stage → 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components.js';
+export type { InputProps, StencilVueComponent } from './types.js';

package/dist/index.js

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

package/dist/runtime.d.ts

@@ -0,0 +1,30 @@
+/*!
+ * Vendored from @stencil/vue-output-target 0.14.2, src/runtime.ts (defineContainer and its helpers).
+ * The MIT License (MIT). Copyright (c) 2019-present Drifty Co.
+ * Changed here: the wrapper renders nothing on the server and while the page hydrates
+ * (useClientRender), and it listens for the element's events once the element exists.
+ */
+import type { DefineSetupFnComponent, PublicProps } from 'vue';
+import type { InputProps } from './types.js';
+/**
+ * Create 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 emitProps - An array of for event listener on the Component. These usually match up with
+ * the @Event 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), or a list of them.
+ * @prop modelUpdateEventAttribute - Property to read value from when the value changes.
+ *
+ * The element's @Event listeners, which `@sui-change` and the rest rely on, are attached once the
+ * element exists: on mount in a client render, on the update that first draws it after hydration.
+ * The v-model listeners are added in the element's `created` hook, so they fire before any
+ * listener the app sets, and a model event counts only when it comes from this element, not from a
+ * descendant of the same tag that bubbled up to it.
+ */
+export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement?: () => void, componentProps?: string[], emitProps?: string[], modelProp?: string, modelUpdateEvent?: string, modelUpdateEventAttribute?: string, transformTagFn?: (tagName: string) => string) => DefineSetupFnComponent<Props & InputProps<VModelType>, {}, {}, Props & InputProps<VModelType> & {}, PublicProps>;

package/dist/runtime.js

@@ -0,0 +1,204 @@
+/*!
+ * Vendored from @stencil/vue-output-target 0.14.2, src/runtime.ts (defineContainer and its helpers).
+ * The MIT License (MIT). Copyright (c) 2019-present Drifty Co.
+ * Changed here: the wrapper renders nothing on the server and while the page hydrates
+ * (useClientRender), and it listens for the element's events once the element exists.
+ */
+import { defineComponent, getCurrentInstance, h, inject, onMounted, onUpdated, ref, withDirectives } 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';
+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. To tell a v-model prop from an unset one, an unset prop holds this marker.
+ */
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+/** Split a class attribute the way `DOMTokenList` does, on runs of ASCII whitespace. */
+const getComponentClasses = (classes) => ((typeof classes === 'string' && classes.split(/[ \t\n\f\r]+/)) || []).filter((className) => className.length > 0);
+/**
+ * Sync the classes Vue supplied onto the host element, and return the ones it did not supply
+ * (Stencil's `hydrated` and `sc-*` scope classes, plus anything added imperatively) so Vue's class
+ * patch does not wipe them. Classes Vue stopped supplying come off the element first, or a stale
+ * one would be reported back as a class Vue never supplied.
+ */
+const syncElementClasses = (elementRef, previousVueClasses, vueClasses, defaultClasses = []) => {
+    const nextClasses = new Set(getComponentClasses(vueClasses));
+    if (elementRef.value) {
+        const element = elementRef.value;
+        previousVueClasses.forEach((c) => {
+            if (!nextClasses.has(c))
+                element.classList.remove(c);
+        });
+        nextClasses.forEach((c) => {
+            if (!element.classList.contains(c))
+                element.classList.add(c);
+        });
+    }
+    previousVueClasses.clear();
+    nextClasses.forEach((c) => previousVueClasses.add(c));
+    return [...Array.from(elementRef.value?.classList || []), ...defaultClasses].filter((c, i, self) => !nextClasses.has(c) && self.indexOf(c) === i);
+};
+/**
+ * False on the server and while the page hydrates, true in every other render.
+ *
+ * ShineUI's elements render into their own light DOM. In a server-rendered Vue app (Nuxt) that
+ * collides with hydration: the element modules define the tags on import, the host tags the server
+ * sent upgrade and draw their inner markup, and Vue then finds nodes it did not render, reports
+ * "Hydration completed but contains mismatches", warns of a class mismatch on every element and
+ * replaces the content of each slot. So the wrapper renders nothing until this is true, and the
+ * element from the render after it mounts. Hydration is told apart from a plain client mount the
+ * way Vue's renderer marks it: it sets the component's `vnode.el` to the server node before the
+ * component's setup runs, and a client mount sets it only afterward. An app that only renders in
+ * the browser therefore sees the element in its first render.
+ */
+const useClientRender = () => {
+    const server = typeof window === 'undefined';
+    const hydrating = !!getCurrentInstance()?.vnode.el;
+    const client = ref(!server && !hydrating);
+    if (!client.value && !server)
+        onMounted(() => { client.value = true; });
+    return client;
+};
+/**
+ * Create 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 emitProps - An array of for event listener on the Component. These usually match up with
+ * the @Event 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), or a list of them.
+ * @prop modelUpdateEventAttribute - Property to read value from when the value changes.
+ *
+ * The element's @Event listeners, which `@sui-change` and the rest rely on, are attached once the
+ * element exists: on mount in a client render, on the update that first draws it after hydration.
+ * The v-model listeners are added in the element's `created` hook, so they fire before any
+ * listener the app sets, and a model event counts only when it comes from this element, not from a
+ * descendant of the same tag that bubbled up to it.
+ */
+export const defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent, modelUpdateEventAttribute, transformTagFn) => {
+    if (defineCustomElement !== undefined) {
+        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;
+    }
+    const Container = defineComponent((props, { attrs, slots, emit }) => {
+        let modelPropValue = modelProp ? props[modelProp] : undefined;
+        const containerRef = ref();
+        const previousVueClasses = new Set();
+        const client = useClientRender();
+        let listening;
+        const listen = () => {
+            const element = containerRef.value;
+            if (!element || listening === element)
+                return;
+            listening = element;
+            emitProps.forEach((eventName) => {
+                element.addEventListener(eventName, (e) => emit(eventName, e));
+            });
+        };
+        onMounted(listen);
+        onUpdated(listen);
+        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, path) => path.split('.').reduce((value, key) => (value !== undefined ? value[key] : undefined), object);
+                            const path = modelUpdateEventAttribute ?? `target.${modelProp}`;
+                            emit(UPDATE_VALUE_EVENT, resolvePath(e, path));
+                        }
+                    });
+                });
+            },
+        };
+        const currentInstance = getCurrentInstance();
+        const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
+        const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
+        const handleRouterLink = (ev) => {
+            const { routerLink } = props;
+            if (routerLink === EMPTY_PROP)
+                return;
+            const mouseEv = ev;
+            if (mouseEv.metaKey || mouseEv.ctrlKey || mouseEv.shiftKey)
+                return;
+            if (navManager !== undefined) {
+                ev.preventDefault();
+                const navigationPayload = { event: ev };
+                for (const key in props) {
+                    const value = props[key];
+                    if (Object.prototype.hasOwnProperty.call(props, 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 () => {
+            if (!client.value)
+                return null;
+            modelPropValue = modelProp ? props[modelProp] : undefined;
+            const oldClick = props.onClick;
+            const handleClick = (ev) => {
+                if (oldClick !== undefined)
+                    oldClick(ev);
+                if (!ev.defaultPrevented)
+                    handleRouterLink(ev);
+            };
+            const propsToAdd = {
+                ref: containerRef,
+                class: syncElementClasses(containerRef, previousVueClasses, attrs.class),
+                onClick: handleClick,
+            };
+            for (const key in props) {
+                const value = props[key];
+                if ((Object.prototype.hasOwnProperty.call(props, 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 && Object.prototype.hasOwnProperty.call(attrs, eventHandlerKey) && 'addEventListener' in containerRef.value) {
+                    containerRef.value.addEventListener(key, eventHandler);
+                }
+            }
+            if (modelProp) {
+                if (props[MODEL_VALUE] !== EMPTY_PROP) {
+                    propsToAdd[modelProp] = props[MODEL_VALUE];
+                }
+                else if (modelPropValue !== EMPTY_PROP) {
+                    propsToAdd[modelProp] = modelPropValue;
+                }
+            }
+            if (ROUTER_LINK_VALUE in props && props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+                propsToAdd.href = props[ROUTER_LINK_VALUE];
+            }
+            const tagName = transformTagFn ? transformTagFn(name) : name;
+            const node = h(tagName, propsToAdd, slots.default && slots.default());
+            return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
+        };
+    }, {
+        name,
+        props: props,
+        emits,
+    });
+    return Container;
+};

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+import type { AllowedComponentProps, ComponentCustomProps, DefineSetupFnComponent, VNodeProps } from 'vue';
+export interface InputProps<T> {
+    modelValue?: T;
+}
+type WrapperProps<Props, VModelType> = Props & InputProps<VModelType> & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+type Wrapper<Props, VModelType> = DefineSetupFnComponent<WrapperProps<Props, VModelType>, {}, {}, WrapperProps<Props, VModelType>>;
+/**
+ * A ShineUI component for Vue. A template ref to one holds the component instance, and the
+ * instance's `$el` is the element itself, typed as that element, so its methods and state are
+ * checked: `ref.value?.$el.setFocus()`. `El` is the element type (`HTMLSuiDialogElement` for
+ * `SuiDialog`); scripts/own-types.mjs writes it into every declaration after the build.
+ */
+export type StencilVueComponent<Props, El extends HTMLElement = HTMLElement, VModelType = string | number | boolean> = new (...args: ConstructorParameters<Wrapper<Props, VModelType>>) => Omit<InstanceType<Wrapper<Props, VModelType>>, '$el'> & {
+    readonly $el: El;
+};
+export {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@shineuix/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.1",
+  "description": "Vue 3 bindings for ShineUI web components.",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "vue3",
+    "web-components",
+    "design-system",
+    "ui",
+    "components",
+    "shineui"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "LICENSE",
+    "dist/"
+  ],
+  "dependencies": {
+    "@shineuix/core": "1.0.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.38"
+  },
+  "devDependencies": {
+    "@stencil/vue-output-target": "^0.14.2",
+    "typescript": "~5.9.0",
+    "vue": "^3.5.0"
+  },
+  "author": "ShineUI contributors",
+  "homepage": "https://shineui.dev",
+  "bugs": {
+    "email": "info@shineui.dev"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smallandsimple/shineui.git",
+    "directory": "packages/vue"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/vendor-runtime.mjs && node scripts/own-types.mjs && node scripts/check-types.mjs"
+  }
 }