@lumx/vue 3.20.1-alpha.0 → 3.20.1-alpha.10

package/package.json

@@ -1,101 +1,18 @@
 {
-  "author": {
-    "name": "LumApps"
-  },
-  "bugs": {
-    "url": "https://github.com/lumapps/design-system/issues"
-  },
-  "dependencies": {
-    "@lumx/core": "^3.20.1-alpha.0",
-    "@lumx/icons": "^3.20.1-alpha.0",
-    "vue-demi": "^0.14.10"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-export-default-from": "^7.25.9",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-syntax-jsx": "^7.27.1",
-    "@babel/plugin-transform-react-jsx": "^7.27.1",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-typescript": "^7.26.0",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^19.0.2",
-    "@rollup/plugin-node-resolve": "16.0.0",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "@rollup/pluginutils": "5.2.0",
-    "@storybook/addon-a11y": "^9.1.4",
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/vue3-vite": "9.1.16",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/user-event": "^14.4.3",
-    "@testing-library/vue": "^8.1.0",
-    "@types/body-scroll-lock": "^2.6.1",
-    "@types/classnames": "^2.2.9",
-    "@types/dom-view-transitions": "^1.0.5",
-    "@types/jest": "^29.2.1",
-    "@types/lodash": "^4.14.149",
-    "@vitejs/plugin-vue": "^6.0.2",
-    "@vitejs/plugin-vue-jsx": "^5.1.2",
-    "@vitejs/plugin-vue2-jsx": "^1.1.1",
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
-    "@vue/babel-plugin-jsx": "^2.0.1",
-    "@vue/babel-preset-jsx": "^1.4.0",
-    "@vue/composition-api": "1.7.2",
-    "autoprefixer": "^9.7.4",
-    "babel-jest": "29.1.2",
-    "babel-loader": "^8.0.6",
-    "eslint-plugin-storybook": "9.1.16",
-    "eslint-plugin-vue": "^10.5.0",
-    "focus-visible": "^5.0.2",
-    "glob": "^7.1.6",
-    "install-peers-cli": "^2.2.0",
-    "is-ci": "^2.0.0",
-    "jest": "29.1.2",
-    "jest-environment-jsdom": "29.1.2",
-    "node-notifier": "^10.0.1",
-    "rollup": "3.29.5",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-cleaner": "^1.0.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-ts-paths-resolve": "^1.7.1",
-    "rollup-plugin-vue": "^6.0.0",
-    "storybook": "^9.1.4",
-    "typescript": "^5.4.3",
-    "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^4.0.10",
-    "vue": "^3.4.27",
-    "vue2": "npm:vue@2.6",
-    "yargs": "^15.4.1"
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lumapps/design-system.git"
   },
-  "peerDependencies": {
-    "@vue/composition-api": "^1.1.2",
-    "lodash": "4.17.21",
-    "vue": "^2.6.0 || ^3.3.0"
+  "scripts": {
+    "start:storybook": "storybook dev -p 9000",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "vite build"
   },
-  "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    }
+  "installConfig": {
+    "hoistingLimits": "workspaces"
   },
-  "description": "The official LumApps Design System (LumX) for Vue applications",
-  "homepage": "https://github.com/lumapps/design-system",
-  "keywords": [
-    "Design System",
-    "LumApps",
-    "LumX",
-    "Vue"
-  ],
-  "license": "MIT",
   "module": "index.js",
   "main": "index.js",
   "types": "index.d.ts",
@@ -104,18 +21,19 @@
     "directory": "dist",
     "access": "public"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/lumapps/design-system.git"
-  },
-  "scripts": {
-    "start:storybook": "storybook dev -p 6007",
-    "build:storybook": "storybook build",
-    "test": "vue-demi-switch 3 && vitest",
-    "build": "vite build",
-    "storybook:vue3": "vue-demi-switch 3 && yarn start:storybook",
-    "storybook:vue2": "vue-demi-switch 2 vue2 && yarn start:storybook"
-  },
   "sideEffects": false,
-  "version": "3.20.1-alpha.0"
+  "version": "3.20.1-alpha.10",
+  "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.27.1",
+    "@storybook/vue3-vite": "^9.1.4",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "storybook": "^9.1.4",
+    "typescript": "^5.4.3",
+    "vite": "^6.3.5",
+    "vite-plugin-static-copy": "^3.1.4",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vue": "^3.5.25"
+  }
 }

package/src/Icon.stories.js

@@ -0,0 +1,27 @@
+import { mdiAbTesting } from 'lumx-icons/dist';
+import Icon from './Icon.vue';
+
+export default {
+  title: 'LumX/Icon',
+  component: Icon,
+  argTypes: {
+    theme: { control: 'text' },
+    // Add other props here as needed
+  },
+};
+
+const Template = (args) => ({
+  components: { Icon },
+  setup() {
+    return { args };
+  },
+  template: '<Icon v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // Provide default props here, e.g.:
+  theme: 'light',
+  icon: mdiAbTesting,
+  // name: 'star', // Example if Icon expects a name prop
+};

package/src/Icon.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { inject, useAttrs } from 'vue';
+import { Icon as UI } from '@lumx/core/js/components/Icon';
+// import type { IconProps, IconSizes } from '@lumx/core/js/components/Icon';
+
+// Define props (replace 'any' with actual IconProps type if available)
+const props = defineProps();
+const attrs = useAttrs();
+// Inject theme if provided by parent
+const defaultTheme = inject('theme', undefined);
+console.log(props);
+</script>
+
+<template>
+  <UI v-bind="{ ...attrs, ...props, theme: props.theme || defaultTheme }" />
+</template>

package/src/InputHelper.stories.js

@@ -0,0 +1,27 @@
+import { mdiAbTesting } from 'lumx-icons/dist';
+import InputHelper from './InputHelper.vue';
+
+export default {
+  title: 'LumX/InputHelper',
+  component: InputHelper,
+  argTypes: {
+    theme: { control: 'text' },
+    // Add other props here as needed
+  },
+};
+
+const Template = (args) => ({
+  components: { InputHelper },
+  setup() {
+    return { args };
+  },
+  template: '<InputHelper>Text</InputHelper>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // Provide default props here, e.g.:
+  theme: 'light',
+  icon: mdiAbTesting,
+  // name: 'star', // Example if Icon expects a name prop
+};

package/src/InputHelper.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { inject, useAttrs } from 'vue';
+import { InputHelper as UI } from '@lumx/core/js/components/InputHelper';
+
+// Define props (replace 'any' with actual IconProps type if available)
+const props = defineProps();
+const attrs = useAttrs();
+// Inject theme if provided by parent
+const defaultTheme = inject('theme', undefined);
+</script>
+
+<template>
+  <UI v-bind="{ ...attrs, ...props, theme: props.theme || defaultTheme }">
+    <slot />
+  </UI>
+</template>

package/src/components/icon/Icon.stories.js

@@ -0,0 +1,27 @@
+import { mdiAbTesting } from 'lumx-icons/dist';
+import Icon from './Icon.vue';
+
+export default {
+  title: 'LumX/Icon',
+  component: Icon,
+  argTypes: {
+    theme: { control: 'text' },
+    // Add other props here as needed
+  },
+};
+
+const Template = (args) => ({
+  components: { Icon },
+  setup() {
+    return { args };
+  },
+  template: '<Icon v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // Provide default props here, e.g.:
+  theme: 'light',
+  icon: mdiAbTesting,
+  // name: 'star', // Example if Icon expects a name prop
+};

package/src/components/icon/Icon.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { inject, useAttrs } from 'vue';
+import { Icon as UI } from '@lumx/core/js/components/Icon';
+// import type { IconProps, IconSizes } from '@lumx/core/js/components/Icon';
+
+// Define props (replace 'any' with actual IconProps type if available)
+const props = defineProps();
+const attrs = useAttrs();
+// Inject theme if provided by parent
+const defaultTheme = inject('theme', undefined);
+console.log(props);
+</script>
+
+<template>
+  <UI v-bind="{ ...attrs, ...props, theme: props.theme || defaultTheme }" />
+</template>

package/src/components/icon/index.ts

@@ -1,6 +1,2 @@
-import { IconProps } from '@lumx/core/js/components/Icon';
-
-import Icon from './Icon';
-
+import Icon from './Icon.vue';
 export { Icon };
-export type { IconProps };

package/src/components/input-helper/InputHelper.stories.js

@@ -0,0 +1,27 @@
+import { mdiAbTesting } from 'lumx-icons/dist';
+import InputHelper from './InputHelper.vue';
+
+export default {
+  title: 'LumX/InputHelper',
+  component: InputHelper,
+  argTypes: {
+    theme: { control: 'text' },
+    // Add other props here as needed
+  },
+};
+
+const Template = (args) => ({
+  components: { InputHelper },
+  setup() {
+    return { args };
+  },
+  template: '<InputHelper>Text</InputHelper>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // Provide default props here, e.g.:
+  theme: 'light',
+  icon: mdiAbTesting,
+  // name: 'star', // Example if Icon expects a name prop
+};

package/src/components/input-helper/InputHelper.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { inject, useAttrs } from 'vue';
+import { InputHelper as UI } from '@lumx/core/js/components/InputHelper';
+
+// Define props (replace 'any' with actual IconProps type if available)
+const props = defineProps();
+const attrs = useAttrs();
+// Inject theme if provided by parent
+const defaultTheme = inject('theme', undefined);
+</script>
+
+<template>
+  <UI v-bind="{ ...attrs, ...props, theme: props.theme || defaultTheme }">
+    <slot />
+  </UI>
+</template>

package/src/components/input-helper/index.ts

@@ -0,0 +1,2 @@
+import InputHelper from './InputHelper.vue';
+export { InputHelper };

package/src/icon/Icon.stories.js

@@ -0,0 +1,27 @@
+import { mdiAbTesting } from 'lumx-icons/dist';
+import Icon from './Icon.vue';
+
+export default {
+  title: 'LumX/Icon',
+  component: Icon,
+  argTypes: {
+    theme: { control: 'text' },
+    // Add other props here as needed
+  },
+};
+
+const Template = (args) => ({
+  components: { Icon },
+  setup() {
+    return { args };
+  },
+  template: '<Icon v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // Provide default props here, e.g.:
+  theme: 'light',
+  icon: mdiAbTesting,
+  // name: 'star', // Example if Icon expects a name prop
+};

package/src/icon/Icon.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { inject, useAttrs } from 'vue';
+import { Icon as UI } from '@lumx/core/js/components/Icon';
+// import type { IconProps, IconSizes } from '@lumx/core/js/components/Icon';
+
+// Define props (replace 'any' with actual IconProps type if available)
+const props = defineProps();
+const attrs = useAttrs();
+// Inject theme if provided by parent
+const defaultTheme = inject('theme', undefined);
+console.log(props);
+</script>
+
+<template>
+  <UI v-bind="{ ...attrs, ...props, theme: props.theme || defaultTheme }" />
+</template>

package/src/icon/index.ts

@@ -1,6 +1,2 @@
-import { IconProps } from '@lumx/core/js/components/Icon';
-
-import Icon from './Icon';
-
+import Icon from './Icon.vue';
 export { Icon };
-export type { IconProps };

package/src/index.ts

@@ -1,6 +1,2 @@
-import { IconProps } from '@lumx/core/js/components/Icon';
-
-import Icon from './Icon';
-
-export { Icon };
-export type { IconProps };
+import InputHelper from './InputHelper.vue';
+export { InputHelper };

package/src/input-helper/InputHelper.stories.js

@@ -0,0 +1,27 @@
+import { mdiAbTesting } from 'lumx-icons/dist';
+import InputHelper from './InputHelper.vue';
+
+export default {
+  title: 'LumX/InputHelper',
+  component: InputHelper,
+  argTypes: {
+    theme: { control: 'text' },
+    // Add other props here as needed
+  },
+};
+
+const Template = (args) => ({
+  components: { InputHelper },
+  setup() {
+    return { args };
+  },
+  template: '<InputHelper>Text</InputHelper>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // Provide default props here, e.g.:
+  theme: 'light',
+  icon: mdiAbTesting,
+  // name: 'star', // Example if Icon expects a name prop
+};

package/src/input-helper/InputHelper.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { inject, useAttrs } from 'vue';
+import { InputHelper as UI } from '@lumx/core/js/components/InputHelper';
+
+// Define props (replace 'any' with actual IconProps type if available)
+const props = defineProps();
+const attrs = useAttrs();
+// Inject theme if provided by parent
+const defaultTheme = inject('theme', undefined);
+</script>
+
+<template>
+  <UI v-bind="{ ...attrs, ...props, theme: props.theme || defaultTheme }">
+    <slot />
+  </UI>
+</template>

package/src/input-helper/index.ts

@@ -0,0 +1,2 @@
+import InputHelper from './InputHelper.vue';
+export { InputHelper };

package/src/Icon.stories.tsx

@@ -1,17 +0,0 @@
-import DefaultStory, { SizeAndShape as DefaultSizeAndShape } from '@lumx/core/js/components/Icon/Stories';
-
-import { Icon } from '.';
-
-export default {
-    title: 'LumX components/icon/Icon',
-    component: Icon,
-    ...DefaultStory,
-};
-
-export const SizeAndShape = {
-    ...DefaultSizeAndShape,
-    argTypes: {
-        hasShape: { control: false },
-        size: { control: false },
-    },
-};

package/src/Icon.test.tsx

@@ -1,9 +0,0 @@
-import { render } from '@testing-library/vue';
-import Tests from '@lumx/core/js/components/Icon/Tests';
-import { Icon, IconProps } from '.';
-
-describe(`<${Icon.displayName}>`, () => {
-    Tests((props: IconProps) => {
-        render(Icon, { props });
-    });
-});

package/src/Icon.tsx

@@ -1,50 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import { IconProps, Icon as UI } from '@lumx/core/js/components/Icon';
-
-export default defineComponent({
-    name: 'Icon',
-    components: {
-        UI,
-    },
-    props: {
-        color: {
-            type: String,
-            required: false,
-        },
-        colorVariant: {
-            type: String,
-            required: false,
-        },
-        hasShape: {
-            type: Boolean,
-            required: false,
-        },
-        icon: {
-            type: String,
-            required: true,
-        },
-        size: {
-            type: String,
-            required: false,
-        },
-        alt: {
-            type: String,
-            required: false,
-        },
-        theme: {
-            type: String,
-            required: false,
-        },
-        className: {
-            type: String,
-            required: false,
-        },
-        // GenericProps may include other props, but these are the main ones from IconProps
-    },
-    setup(props: IconProps) {
-        return { props };
-    },
-    render() {
-        return <UI {...this.props} />;
-    },
-});

package/src/components/icon/Icon.stories.tsx

@@ -1,17 +0,0 @@
-import DefaultStory, { SizeAndShape as DefaultSizeAndShape } from '@lumx/core/js/components/Icon/Stories';
-
-import { Icon } from '.';
-
-export default {
-    title: 'LumX components/icon/Icon',
-    component: Icon,
-    ...DefaultStory,
-};
-
-export const SizeAndShape = {
-    ...DefaultSizeAndShape,
-    argTypes: {
-        hasShape: { control: false },
-        size: { control: false },
-    },
-};

package/src/components/icon/Icon.test.tsx

@@ -1,9 +0,0 @@
-import { render } from '@testing-library/vue';
-import Tests from '@lumx/core/js/components/Icon/Tests';
-import { Icon, IconProps } from '.';
-
-describe(`<${Icon.displayName}>`, () => {
-    Tests((props: IconProps) => {
-        render(Icon, { props });
-    });
-});

package/src/components/icon/Icon.tsx

@@ -1,50 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import { IconProps, Icon as UI } from '@lumx/core/js/components/Icon';
-
-export default defineComponent({
-    name: 'Icon',
-    components: {
-        UI,
-    },
-    props: {
-        color: {
-            type: String,
-            required: false,
-        },
-        colorVariant: {
-            type: String,
-            required: false,
-        },
-        hasShape: {
-            type: Boolean,
-            required: false,
-        },
-        icon: {
-            type: String,
-            required: true,
-        },
-        size: {
-            type: String,
-            required: false,
-        },
-        alt: {
-            type: String,
-            required: false,
-        },
-        theme: {
-            type: String,
-            required: false,
-        },
-        className: {
-            type: String,
-            required: false,
-        },
-        // GenericProps may include other props, but these are the main ones from IconProps
-    },
-    setup(props: IconProps) {
-        return { props };
-    },
-    render() {
-        return <UI {...this.props} />;
-    },
-});

package/src/icon/Icon.stories.tsx

@@ -1,17 +0,0 @@
-import DefaultStory, { SizeAndShape as DefaultSizeAndShape } from '@lumx/core/js/components/Icon/Stories';
-
-import { Icon } from '.';
-
-export default {
-    title: 'LumX components/icon/Icon',
-    component: Icon,
-    ...DefaultStory,
-};
-
-export const SizeAndShape = {
-    ...DefaultSizeAndShape,
-    argTypes: {
-        hasShape: { control: false },
-        size: { control: false },
-    },
-};

package/src/icon/Icon.test.tsx

@@ -1,9 +0,0 @@
-import { render } from '@testing-library/vue';
-import Tests from '@lumx/core/js/components/Icon/Tests';
-import { Icon, IconProps } from '.';
-
-describe(`<${Icon.displayName}>`, () => {
-    Tests((props: IconProps) => {
-        render(Icon, { props });
-    });
-});