@lumx/vue 4.1.1-alpha.3 → 4.1.1-alpha.4

package/package.json

@@ -12,7 +12,7 @@
     "build": "vite build",
     "type-check": "yarn tsc -p tsconfig.json",
     "start:storybook": "storybook dev -p 9000",
-    "build-storybook": "storybook build",
+    "build:storybook": "storybook build",
     "test": "vitest run"
   },
   "type": "module",
@@ -20,18 +20,19 @@
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": false,
-  "version": "4.1.1-alpha.3",
+  "version": "4.1.1-alpha.4",
   "dependencies": {
-    "@lumx/core": "^4.1.1-alpha.3",
-    "@lumx/icons": "^4.1.1-alpha.3"
+    "@lumx/core": "^4.1.1-alpha.4",
+    "@lumx/icons": "^4.1.1-alpha.4",
+    "@vueuse/core": "^14.1.0"
   },
   "peerDependencies": {
     "lodash": "4.17.21",
-    "vue": "^3.5.25"
+    "vue": "^3.5.27"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.27.1",
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^5.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@storybook/addon-a11y": "^10.2.0",
     "@storybook/vue3-vite": "^10.2.0",
@@ -51,7 +52,7 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^4.0.18",
-    "vue": "^3.5.25"
+    "vue": "^3.5.27"
   },
   "stableVersion": "4.1.0"
 }

package/stories/decorators/withResizableBox.d.ts

@@ -0,0 +1,12 @@
+/** Storybook decorator wrapping story in a resizable box  */
+export declare const withResizableBox: ({ width, height, ...style }?: {
+    width?: number | string;
+    height?: number | string;
+    [key: string]: any;
+}) => (story: any, context: any) => {
+    setup(): {
+        as: string | object;
+        overriddenProps: any;
+    };
+    template: string;
+};

package/stories/decorators/withWrapper.d.ts

@@ -0,0 +1,10 @@
+/**
+ * SB decorator adding a wrapping div around the story
+ */
+export declare const withWrapper: (props?: Record<string, any>, as?: string | object) => (story: any, context: any) => {
+    setup(): {
+        as: string | object;
+        overriddenProps: any;
+    };
+    template: string;
+};

package/utils/VueToJSX.d.ts

@@ -0,0 +1,28 @@
+import { GenericProps, JSXElement } from '../../../lumx-core/src/js/types';
+import { VNode, EmitsOptions, FunctionalComponent } from 'vue';
+/**
+ * Props type that includes optional children for JSX compatibility.
+ */
+type GenericPropsWithChildren = GenericProps & {
+    children?: JSXElement;
+};
+/**
+ * Props interface for components wrapped with VueToJSX.
+ * It omits JSX-specific props like `children` and `className` and adds Vue's `class`.
+ */
+export type VueToJSXProps<Props extends GenericPropsWithChildren> = Omit<Props, 'children' | 'className'> & {
+    class?: string;
+};
+/**
+ * Higher-order component that wraps a LumX Core component (which uses JSX patterns)
+ * to be used as a Vue functional component.
+ *
+ * It specifically handles:
+ * - Mapping Vue's `class` prop to LumX Core's `className` prop.
+ * - Mapping Vue's default slot to LumX Core's `children` prop.
+ *
+ * @param Component The LumX Core component to wrap.
+ * @returns A Vue functional component.
+ */
+export declare const VueToJSX: <Props extends GenericPropsWithChildren, Emits extends EmitsOptions | Record<string, any[]> = Record<string, never>>(Component: (props: Props) => VNode) => FunctionalComponent<VueToJSXProps<Props>, Emits>;
+export {};

package/utils/wrapChildrenIconWithSpaces.d.ts

@@ -0,0 +1,3 @@
+import { VNodeArrayChildren } from 'vue';
+/** Force wrap spaces around icons to make sure they are never stuck against text. */
+export declare function wrapChildrenIconWithSpaces(children: VNodeArrayChildren | undefined): VNodeArrayChildren | undefined;