veloce-vue 0.11.0 → 0.14.0

package/README.md

@@ -1,7 +1,11 @@
-# Vue-Components
+<h1 align="center">Welcome to VeloceVue</h1>
 
 A modern Vue.js UI component library built with Vue, Typescript, Storybook and Tailwind CSS.
 
+[![npm version](https://img.shields.io/npm/v/veloce-vue.svg)](https://www.npmjs.com/package/veloce-vue)
+![npm downloads](https://img.shields.io/npm/dm/veloce-vue.svg)
+![license](https://img.shields.io/npm/l/veloce-vue.svg)
+
 ## Installation
 
 Install the library from NPM:
@@ -63,23 +67,6 @@ app.mount("#app");
 - Vue 3.5 or higher
 - Tailwind CSS v4 (for styling)
 
-## Development
-
-This library is built using:
-
-- Vue 3
-- Tailwind CSS v4
-- Vite
-- Storybook for component documentation
-- TypeScript
-
-## Production
-
-Run `pnpm build` to build the package.
-Run `pnpm run build-storybook` to build storybook only.
-
-To test the storybook locally, you can run `pnpm run preview-storybook`. This will start the storybook production build.
-
 ### Consuming application UI configuration
 
 Create `ui.config.ts` and add the following code:
@@ -112,3 +99,53 @@ Use the UI colors in your components/styles:
 ```html
 <div :style="{ backgroundColor: 'var(--ui-color-primary)' }">...</div>
 ```
+
+> **ℹ️ Developer Alert:**  
+> This library is in active development. APIs and styles may change between releases.  
+> Please consult the documentation and changelog for updates before production use.
+
+## Development
+
+This library is built using:
+
+- Vite
+- Vue 3
+- TypeScript
+- Tailwind CSS v4
+- Storybook v9.1.10
+
+### Run development server
+
+```bash
+pnpm dev
+```
+
+This will start the development server at `http://localhost:6006`.
+
+## Production
+
+### Build storybook
+
+```bash
+pnpm run build-storybook
+```
+
+This will build the storybook into the `build/storybook` directory.
+
+### Preview storybook build
+
+```bash
+pnpm run preview-storybook
+```
+
+This will start the storybook production build at `http://localhost:3000`.
+
+### Build npm package
+
+```bash
+pnpm run build
+```
+
+This will build the npm package into the `build/package` directory.
+
+> ℹ️ VeloceVue is in active development. APIs and styles may evolve.

package/components/{Button → button}/Index.vue.d.ts

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly default: false;
     };
     readonly variant: {
-        readonly type: import("vue").PropType<"outlined" | "text" | "ghost" | "solid">;
+        readonly type: import("vue").PropType<"outlined" | "text" | "ghost" | "solid" | "gray">;
         readonly default: "solid";
-        readonly options: readonly ["outlined", "text", "ghost", "solid"];
+        readonly options: readonly ["outlined", "text", "ghost", "solid", "gray"];
     };
     readonly icon: {
         readonly type: StringConstructor;
@@ -47,9 +47,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly default: false;
     };
     readonly variant: {
-        readonly type: import("vue").PropType<"outlined" | "text" | "ghost" | "solid">;
+        readonly type: import("vue").PropType<"outlined" | "text" | "ghost" | "solid" | "gray">;
         readonly default: "solid";
-        readonly options: readonly ["outlined", "text", "ghost", "solid"];
+        readonly options: readonly ["outlined", "text", "ghost", "solid", "gray"];
     };
     readonly icon: {
         readonly type: StringConstructor;
@@ -72,7 +72,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     readonly label: string;
     readonly loading: boolean;
     readonly disabled: boolean;
-    readonly variant: "outlined" | "text" | "ghost" | "solid";
+    readonly variant: "text" | "outlined" | "ghost" | "solid" | "gray";
     readonly icon: string;
     readonly iconClass: string;
     readonly iconPosition: "left" | "right";

package/components/{Button → button}/props.d.ts

@@ -13,9 +13,9 @@ export declare const props: {
         readonly default: false;
     };
     readonly variant: {
-        readonly type: PropType<"outlined" | "text" | "ghost" | "solid">;
+        readonly type: PropType<"outlined" | "text" | "ghost" | "solid" | "gray">;
         readonly default: "solid";
-        readonly options: readonly ["outlined", "text", "ghost", "solid"];
+        readonly options: readonly ["outlined", "text", "ghost", "solid", "gray"];
     };
     readonly icon: {
         readonly type: StringConstructor;

package/components/checkbox/Index.vue.d.ts

@@ -0,0 +1,43 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    labelClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    checkboxClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    labelClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    checkboxClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    label: string;
+    labelClass: string;
+    checkboxClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/checkbox/props.d.ts

@@ -0,0 +1,14 @@
+export declare const props: {
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly labelClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly checkboxClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+};

package/components/checkbox/stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import Checkbox from "./Index.vue";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const LabelClass: Story;
+export declare const CheckboxClass: Story;

package/components/drawer/Index.vue.d.ts

@@ -0,0 +1,77 @@
+declare var __VLS_1: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_10) => any;
+} & {
+    footer?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    direction: {
+        readonly type: () => "left" | "bottom" | "right";
+        readonly default: "bottom";
+        readonly options: readonly ["left", "bottom", "right"];
+    };
+    title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    description: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    showFooter: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    show: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        readonly type: () => "left" | "bottom" | "right";
+        readonly default: "bottom";
+        readonly options: readonly ["left", "bottom", "right"];
+    };
+    title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    description: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    showFooter: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    show: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    title: string;
+    direction: "left" | "right" | "bottom";
+    description: string;
+    showFooter: boolean;
+    show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/drawer/props.d.ts

@@ -0,0 +1,23 @@
+export declare const props: {
+    readonly direction: {
+        readonly type: () => "left" | "bottom" | "right";
+        readonly default: "bottom";
+        readonly options: readonly ["left", "bottom", "right"];
+    };
+    readonly title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly description: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly showFooter: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};

package/components/drawer/stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import Drawer from "./Index.vue";
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+export declare const Default: Story;
+export declare const Left: Story;
+export declare const Bottom: Story;
+export declare const Right: Story;

package/components/input/Index.vue.d.ts

@@ -0,0 +1,54 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    icon: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    helpText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    type: {
+        readonly type: StringConstructor;
+        readonly default: "text";
+        readonly options: readonly ["text", "password"];
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    helpText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    type: {
+        readonly type: StringConstructor;
+        readonly default: "text";
+        readonly options: readonly ["text", "password"];
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    type: string;
+    icon: string;
+    placeholder: string;
+    helpText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/input/props.d.ts

@@ -0,0 +1,19 @@
+export declare const props: {
+    readonly icon: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly helpText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly type: {
+        readonly type: StringConstructor;
+        readonly default: "text";
+        readonly options: readonly ["text", "password"];
+    };
+};

package/components/input/stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import Input from "./Index.vue";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Placeholder: Story;
+export declare const HelpText: Story;
+export declare const Prefilled: Story;

package/components/markdown-block/Index.vue.d.ts

@@ -0,0 +1,12 @@
+import "github-markdown-css/github-markdown-light.css";
+import "prismjs/themes/prism.css";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-javascript";
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/modal/Index.vue.d.ts

@@ -0,0 +1,29 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:show": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+}>, {
+    readonly show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/modal/props.d.ts

@@ -0,0 +1,6 @@
+export declare const props: {
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};

package/components/modal/stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import Modal from "./Index.vue";
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;

package/components/popover/Index.vue.d.ts

@@ -0,0 +1,47 @@
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    body?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly position: {
+        readonly type: () => "top" | "bottom";
+        readonly default: "bottom";
+        readonly options: readonly ["top", "bottom"];
+    };
+    readonly bodyClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly position: {
+        readonly type: () => "top" | "bottom";
+        readonly default: "bottom";
+        readonly options: readonly ["top", "bottom"];
+    };
+    readonly bodyClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+}>> & Readonly<{}>, {
+    readonly position: "bottom" | "top";
+    readonly bodyClass: string;
+    readonly contentClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/popover/props.d.ts

@@ -0,0 +1,15 @@
+export declare const props: {
+    readonly position: {
+        readonly type: () => "top" | "bottom";
+        readonly default: "bottom";
+        readonly options: readonly ["top", "bottom"];
+    };
+    readonly bodyClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+};

package/components/popover/stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import Popover from "./Index.vue";
+declare const meta: Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof Popover>;
+export declare const Bottom: Story;
+export declare const Top: Story;

package/components/range-slider/Index.vue.d.ts

@@ -0,0 +1,28 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly showTooltip: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly value: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly showTooltip: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly value: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    readonly showTooltip: boolean;
+    readonly value: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/range-slider/props.d.ts

@@ -0,0 +1,10 @@
+export declare const props: {
+    readonly showTooltip: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly value: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+};

package/components/range-slider/stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import RangeSlider from "./Index.vue";
+declare const meta: Meta<typeof RangeSlider>;
+export default meta;
+type Story = StoryObj<typeof RangeSlider>;
+export declare const Default: Story;
+export declare const WithTooltip: Story;

package/components/select/Index.vue.d.ts

@@ -0,0 +1,67 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly options: {
+        readonly type: () => string[];
+        readonly required: true;
+    };
+    readonly variant: {
+        readonly type: () => "outlined" | "text" | "ghost" | "solid" | "gray";
+        readonly default: "solid";
+        readonly options: readonly ["outlined", "text", "ghost", "solid", "gray"];
+    };
+    readonly showFilter: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isOpen: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly closeOnClickOutside: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    "update:isOpen": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly options: {
+        readonly type: () => string[];
+        readonly required: true;
+    };
+    readonly variant: {
+        readonly type: () => "outlined" | "text" | "ghost" | "solid" | "gray";
+        readonly default: "solid";
+        readonly options: readonly ["outlined", "text", "ghost", "solid", "gray"];
+    };
+    readonly showFilter: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isOpen: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly closeOnClickOutside: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
+}>, {
+    readonly variant: "text" | "outlined" | "ghost" | "solid" | "gray";
+    readonly modelValue: string;
+    readonly isOpen: boolean;
+    readonly showFilter: boolean;
+    readonly closeOnClickOutside: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;