dirdoc-ui 1.0.0 → 1.0.1

package/README.md

@@ -1,2 +1,11 @@
 # dirdoc_ui
 
+
+## Playground
+
+```
+bun install && bun run dev
+```
+
+
+## Components

package/dist/index.cjs.js

@@ -10,6 +10,11 @@ var DButton = vue.defineComponent({
             required: false,
             default: ''
         },
+        url: {
+            type: String,
+            required: false,
+            default: ''
+        },
         type: {
             type: String,
             default: 'button'
@@ -30,9 +35,10 @@ var DButton = vue.defineComponent({
     emits: ['click'],
     setup(props, ctx) {
         const { slots, emit } = ctx;
-        const base = 'flex items-center justify-center focus:outline-none';
+        const base = 'flex items-center justify-center py-2 px-3 rounded-xl focus:outline-none';
+        const icon = 'flex items-center justify-center w-10 h-10  rounded-full ';
         const variants = {
-            primary: 'bg-blue hover:bg-blue-700',
+            primary: 'text-white bg-blue-900 hover:bg-blue-950',
             secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
         };
         function onClick(e) {
@@ -43,17 +49,18 @@ var DButton = vue.defineComponent({
         return () => {
             const children = slots.default ? slots.default() : props.label;
             if (props.icon) {
-                return vue.h('a', {
+                return vue.h(props.url ? 'a' : 'button', {
                     type: props.type,
-                    class: `${base} ${variants[props.variant]} ${props.disabled ? '' : ''}  focus:outline-none`,
+                    class: `${icon} ${variants[props.variant]} ${props.disabled ? '' : ''}  focus:outline-none`,
                     disabled: props.disabled,
-                    onClick
+                    href: props.url,
+                    onClick,
                 }, [
                     typeof props.icon === 'string' ? vue.h('i', { class: props.icon + ' mdi' }) : vue.h(props.icon),
                     children
                 ]);
             }
-            return vue.h('a', {
+            return vue.h(props.url ? 'a' : 'button', {
                 type: props.type,
                 class: `${base} ${variants[props.variant]} ${props.disabled ? 'opacity-50' : ''}`,
                 disabled: props.disabled,
@@ -63,5 +70,54 @@ var DButton = vue.defineComponent({
     }
 });
 
+var DSkeletonLoader = vue.defineComponent({
+    name: 'DSkeletonLoader',
+    props: {
+        animation: {
+            type: String,
+            default: 'pulse'
+        },
+        type: {
+            type: String,
+            default: 'text'
+        }
+    },
+    setup(props, ctx) {
+        const { slots } = ctx;
+        const base = 'bg-gray-100 dark:bg-gray-200';
+        const animations = {
+            pulse: 'animate-pulse',
+            wave: 'animate-wave'
+        };
+        const types = {
+            text: 'rounded-full w-full p-2',
+            circle: 'rounded-full',
+            avatar: 'rounded-full  w-10 h-10 ',
+        };
+        const children = slots.default ? slots.default() : props.label;
+        return () => {
+            return vue.h(children ? 'div' :
+                'div', {
+                class: `${animations[props.animation]} `,
+            }, [
+                vue.h('div', { class: ` ${base} ${types[props.type]}` }),
+            ]);
+        };
+    }
+});
+
+function createDirdocUI(options = {}) {
+    const { components = {} } = options;
+    return {
+        install(app) {
+            for (const key in components) {
+                app.component(key, components[key]);
+            }
+        }
+    };
+}
+
 exports.DButton = DButton;
+exports.DSkeletonLoader = DSkeletonLoader;
+exports.createDirdocUI = createDirdocUI;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/components/DButton/DButton.tsx"],"sourcesContent":["import { defineComponent, h, PropType, SetupContext, VNode } from 'vue'\n\nexport default defineComponent({\n  name: 'DButton',\n  props: {\n    label: {\n      type: String as PropType<string>,\n      required: false,\n      default: ''\n    },\n    type: {\n      type: String as PropType<'button' | 'submit' | 'a'>,\n      default: 'button'\n    },\n    variant: {\n      type: String as PropType<'primary' | 'secondary'>,\n      default: 'primary'\n    },\n    disabled: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    icon: {\n      type: [String, Object, Function] as PropType<string | object | (() => VNode) | VNode | null>,\n      default: null\n    },\n  },\n  emits: ['click'],\n  setup(props: Record<string, any>, ctx: SetupContext) {\n    const { slots, emit } = ctx\n    const base = 'flex items-center justify-center focus:outline-none'\n\n    const variants: Record<string, string> = {\n      primary: 'bg-blue hover:bg-blue-700',\n      secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',\n    }\n\n    function onClick(e: MouseEvent) {\n      if (props.disabled) return\n      emit('click', e)\n    }\n\n    return (): VNode => {\n      const children = slots.default ? slots.default() : props.label\n      if (props.icon) {\n        return h(\n          'a',\n          {\n            type: props.type,\n            class: `${base} ${variants[props.variant]} ${props.disabled ? '' : ''}  focus:outline-none`,\n            disabled: props.disabled,\n            onClick\n          },\n          [\n            typeof props.icon === 'string' ? h('i', { class: props.icon + ' mdi' }, ) : h(props.icon),\n            children\n          ]\n        )\n      }\n      \n      return h(\n        'a',\n        {\n          type: props.type,\n          class: `${base} ${variants[props.variant]} ${props.disabled ? 'opacity-50' : ''}`,\n          disabled: props.disabled,\n          onClick\n        },\n        children\n      )\n    }\n  }\n})\n"],"names":["defineComponent","h"],"mappings":";;;;AAEA,cAAeA,mBAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAA6C;AACnD,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAA2C;AACjD,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAA4B;AAClC,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAA6D;AAC5F,YAAA,OAAO,EAAE;AACV,SAAA;AACF,KAAA;IACD,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,KAAK,CAAC,KAA0B,EAAE,GAAiB,EAAA;AACjD,QAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,GAAG;QAC3B,MAAM,IAAI,GAAG,qDAAqD;AAElE,QAAA,MAAM,QAAQ,GAA2B;AACvC,YAAA,OAAO,EAAE,2BAA2B;AACpC,YAAA,SAAS,EAAE,6CAA6C;SACzD;QAED,SAAS,OAAO,CAAC,CAAa,EAAA;YAC5B,IAAI,KAAK,CAAC,QAAQ;gBAAE;AACpB,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAClB;AAEA,QAAA,OAAO,MAAY;AACjB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK;AAC9D,YAAA,IAAI,KAAK,CAAC,IAAI,EAAE;gBACd,OAAOC,KAAC,CACN,GAAG,EACH;oBACE,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,KAAK,EAAE,GAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,KAAK,CAAC,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAA,oBAAA,CAAsB;oBAC3F,QAAQ,EAAE,KAAK,CAAC,QAAQ;oBACxB;iBACD,EACD;AACE,oBAAA,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,GAAGA,KAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,GAAG,MAAM,EAAE,CAAG,GAAGA,KAAC,CAAC,KAAK,CAAC,IAAI,CAAC;oBACzF;AACD,iBAAA,CACF;YACH;YAEA,OAAOA,KAAC,CACN,GAAG,EACH;gBACE,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,KAAK,EAAE,GAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,KAAK,CAAC,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAA,CAAE;gBACjF,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB;aACD,EACD,QAAQ,CACT;AACH,QAAA,CAAC;IACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../src/components/DButton/DButton.tsx","../src/components/DSkeleton/DSkeletonLoader.tsx","../src/index.ts"],"sourcesContent":["import { defineComponent, h, PropType, SetupContext, VNode } from 'vue'\n\nexport interface UseLink {\n    navigate: () => void | null\n}\nexport default defineComponent({\n  name: 'DButton',\n  props: {\n    label: {\n      type: String as PropType<string>,\n      required: false,\n      default: ''\n    },\n    url: {\n      type: String as PropType<string>,\n      required: false,\n      default: ''\n    },\n    type: {\n      type: String as PropType<'button' | 'submit' | 'reset'>,\n      default: 'button'\n    },\n    variant: {\n      type: String as PropType<'primary' | 'secondary'>,\n      default: 'primary'\n    },\n    disabled: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    icon: {\n      type: [String, Object, Function] as PropType<string | object | (() => VNode) | VNode | null>,\n      default: null\n    },\n  },\n  emits: ['click'],\n  setup(props: Record<string, any>, ctx: SetupContext) {\n    const { slots, emit } = ctx\n    const base = 'flex items-center justify-center py-2 px-3 rounded-xl focus:outline-none'\n    const icon = 'flex items-center justify-center w-10 h-10  rounded-full '\n    const variants: Record<string, string> = {\n      primary: 'text-white bg-blue-900 hover:bg-blue-950',\n      secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',\n    }\n\n    function onClick(e: MouseEvent) {\n      if (props.disabled) return\n      emit('click', e)\n    }\n\n    return (): VNode => {\n      const children = slots.default ? slots.default() : props.label\n      if (props.icon) {\n        return h(\n          props.url ? 'a' : 'button',\n          {\n            type: props.type,\n            class: `${icon} ${variants[props.variant]} ${props.disabled ? '' : ''}  focus:outline-none`,\n            disabled: props.disabled,\n            href: props.url,\n            onClick,\n          },\n          [\n            typeof props.icon === 'string' ? h('i', { class: props.icon + ' mdi' }, ) : h(props.icon),\n            children\n          ]\n        )\n      }\n      \n      return h(\n        props.url ? 'a' : 'button',\n        {\n          type: props.type,\n          class: `${base} ${variants[props.variant]} ${props.disabled ? 'opacity-50' : ''}`,\n          disabled: props.disabled,\n          onClick\n        },\n        children\n      )\n    }\n  }\n})\n","import { defineComponent, PropType, h, SetupContext, VNode } from 'vue'\nexport default defineComponent({\n  name: 'DSkeletonLoader',\n  props: {\n    animation: {\n      type: String as PropType<'pulse' | 'wave'>,   \n      default: 'pulse'\n    },\n    type: {\n      type: String as PropType<'text' | 'circle' | 'avatar'>,\n      default: 'text'\n    }\n    },\n    \n\n  setup(props: Record<string, any>, ctx: SetupContext) {\n    const { slots } = ctx\n\n    const base = 'bg-gray-100 dark:bg-gray-200'\n    const animations: Record<string, string> = {\n      pulse: 'animate-pulse',\n      wave: 'animate-wave'\n    }\n    const types: Record<string, string> = {\n      text: 'rounded-full w-full p-2',\n      circle: 'rounded-full',\n      avatar: 'rounded-full  w-10 h-10 ',\n    }\n    const children = slots.default ? slots.default() : props.label\n\n    return (): VNode => {\n      return h(\n        children ? 'div' :\n        'div',\n        {\n          class: `${animations[props.animation]} `,\n        },\n        [\n          h('div', { class: ` ${base} ${types[props.type]}` }),\n        ],\n        \n       \n      )\n    }\n}\n\n})\n","export * from './components/DButton'\nexport * from './components/DSkeleton'\nexport interface UIOptions {\n    components?: Record<string, any>\n}\n\nexport function createDirdocUI( options: UIOptions = {}) {\n    const { components = {} } = options\n\n    return {\n        install(app: any) {\n            for (const key in components) {\n                app.component(key, components[key])\n            }\n        }\n    }\n}"],"names":["defineComponent","h"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,13 +1,14 @@
 import * as vue from 'vue';
 import { VNode } from 'vue';
 
-declare const _default: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<{
     [x: string]: /*elided*/ any;
 }, () => VNode, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, "click", vue.PublicProps, Readonly<{
     [x: string]: /*elided*/ any;
 }> & Readonly<{}>, {
     label: string;
-    type: "button" | "submit" | "a";
+    url: string;
+    type: "button" | "submit" | "reset";
     variant: "primary" | "secondary";
     disabled: boolean;
     icon: string | object | (() => VNode) | VNode<vue.RendererNode, vue.RendererElement, {
@@ -15,4 +16,21 @@ declare const _default: vue.DefineComponent<{
     }> | null;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { _default as DButton };
+declare const _default: vue.DefineComponent<{
+    [x: string]: /*elided*/ any;
+}, () => VNode, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
+    [x: string]: /*elided*/ any;
+}> & Readonly<{}>, {
+    animation: "pulse" | "wave";
+    type: "text" | "circle" | "avatar";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+interface UIOptions {
+    components?: Record<string, any>;
+}
+declare function createDirdocUI(options?: UIOptions): {
+    install(app: any): void;
+};
+
+export { _default$1 as DButton, _default as DSkeletonLoader, createDirdocUI };
+export type { UIOptions };

package/dist/index.esm.js

@@ -8,6 +8,11 @@ var DButton = defineComponent({
             required: false,
             default: ''
         },
+        url: {
+            type: String,
+            required: false,
+            default: ''
+        },
         type: {
             type: String,
             default: 'button'
@@ -28,9 +33,10 @@ var DButton = defineComponent({
     emits: ['click'],
     setup(props, ctx) {
         const { slots, emit } = ctx;
-        const base = 'flex items-center justify-center focus:outline-none';
+        const base = 'flex items-center justify-center py-2 px-3 rounded-xl focus:outline-none';
+        const icon = 'flex items-center justify-center w-10 h-10  rounded-full ';
         const variants = {
-            primary: 'bg-blue hover:bg-blue-700',
+            primary: 'text-white bg-blue-900 hover:bg-blue-950',
             secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
         };
         function onClick(e) {
@@ -41,17 +47,18 @@ var DButton = defineComponent({
         return () => {
             const children = slots.default ? slots.default() : props.label;
             if (props.icon) {
-                return h('a', {
+                return h(props.url ? 'a' : 'button', {
                     type: props.type,
-                    class: `${base} ${variants[props.variant]} ${props.disabled ? '' : ''}  focus:outline-none`,
+                    class: `${icon} ${variants[props.variant]} ${props.disabled ? '' : ''}  focus:outline-none`,
                     disabled: props.disabled,
-                    onClick
+                    href: props.url,
+                    onClick,
                 }, [
                     typeof props.icon === 'string' ? h('i', { class: props.icon + ' mdi' }) : h(props.icon),
                     children
                 ]);
             }
-            return h('a', {
+            return h(props.url ? 'a' : 'button', {
                 type: props.type,
                 class: `${base} ${variants[props.variant]} ${props.disabled ? 'opacity-50' : ''}`,
                 disabled: props.disabled,
@@ -61,5 +68,52 @@ var DButton = defineComponent({
     }
 });
 
-export { DButton };
+var DSkeletonLoader = defineComponent({
+    name: 'DSkeletonLoader',
+    props: {
+        animation: {
+            type: String,
+            default: 'pulse'
+        },
+        type: {
+            type: String,
+            default: 'text'
+        }
+    },
+    setup(props, ctx) {
+        const { slots } = ctx;
+        const base = 'bg-gray-100 dark:bg-gray-200';
+        const animations = {
+            pulse: 'animate-pulse',
+            wave: 'animate-wave'
+        };
+        const types = {
+            text: 'rounded-full w-full p-2',
+            circle: 'rounded-full',
+            avatar: 'rounded-full  w-10 h-10 ',
+        };
+        const children = slots.default ? slots.default() : props.label;
+        return () => {
+            return h(children ? 'div' :
+                'div', {
+                class: `${animations[props.animation]} `,
+            }, [
+                h('div', { class: ` ${base} ${types[props.type]}` }),
+            ]);
+        };
+    }
+});
+
+function createDirdocUI(options = {}) {
+    const { components = {} } = options;
+    return {
+        install(app) {
+            for (const key in components) {
+                app.component(key, components[key]);
+            }
+        }
+    };
+}
+
+export { DButton, DSkeletonLoader, createDirdocUI };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/components/DButton/DButton.tsx"],"sourcesContent":["import { defineComponent, h, PropType, SetupContext, VNode } from 'vue'\n\nexport default defineComponent({\n  name: 'DButton',\n  props: {\n    label: {\n      type: String as PropType<string>,\n      required: false,\n      default: ''\n    },\n    type: {\n      type: String as PropType<'button' | 'submit' | 'a'>,\n      default: 'button'\n    },\n    variant: {\n      type: String as PropType<'primary' | 'secondary'>,\n      default: 'primary'\n    },\n    disabled: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    icon: {\n      type: [String, Object, Function] as PropType<string | object | (() => VNode) | VNode | null>,\n      default: null\n    },\n  },\n  emits: ['click'],\n  setup(props: Record<string, any>, ctx: SetupContext) {\n    const { slots, emit } = ctx\n    const base = 'flex items-center justify-center focus:outline-none'\n\n    const variants: Record<string, string> = {\n      primary: 'bg-blue hover:bg-blue-700',\n      secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',\n    }\n\n    function onClick(e: MouseEvent) {\n      if (props.disabled) return\n      emit('click', e)\n    }\n\n    return (): VNode => {\n      const children = slots.default ? slots.default() : props.label\n      if (props.icon) {\n        return h(\n          'a',\n          {\n            type: props.type,\n            class: `${base} ${variants[props.variant]} ${props.disabled ? '' : ''}  focus:outline-none`,\n            disabled: props.disabled,\n            onClick\n          },\n          [\n            typeof props.icon === 'string' ? h('i', { class: props.icon + ' mdi' }, ) : h(props.icon),\n            children\n          ]\n        )\n      }\n      \n      return h(\n        'a',\n        {\n          type: props.type,\n          class: `${base} ${variants[props.variant]} ${props.disabled ? 'opacity-50' : ''}`,\n          disabled: props.disabled,\n          onClick\n        },\n        children\n      )\n    }\n  }\n})\n"],"names":[],"mappings":";;AAEA,cAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAA6C;AACnD,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAA2C;AACjD,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAA4B;AAClC,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAA6D;AAC5F,YAAA,OAAO,EAAE;AACV,SAAA;AACF,KAAA;IACD,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,KAAK,CAAC,KAA0B,EAAE,GAAiB,EAAA;AACjD,QAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,GAAG;QAC3B,MAAM,IAAI,GAAG,qDAAqD;AAElE,QAAA,MAAM,QAAQ,GAA2B;AACvC,YAAA,OAAO,EAAE,2BAA2B;AACpC,YAAA,SAAS,EAAE,6CAA6C;SACzD;QAED,SAAS,OAAO,CAAC,CAAa,EAAA;YAC5B,IAAI,KAAK,CAAC,QAAQ;gBAAE;AACpB,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAClB;AAEA,QAAA,OAAO,MAAY;AACjB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK;AAC9D,YAAA,IAAI,KAAK,CAAC,IAAI,EAAE;gBACd,OAAO,CAAC,CACN,GAAG,EACH;oBACE,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,KAAK,EAAE,GAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,KAAK,CAAC,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAA,oBAAA,CAAsB;oBAC3F,QAAQ,EAAE,KAAK,CAAC,QAAQ;oBACxB;iBACD,EACD;AACE,oBAAA,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,GAAG,MAAM,EAAE,CAAG,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;oBACzF;AACD,iBAAA,CACF;YACH;YAEA,OAAO,CAAC,CACN,GAAG,EACH;gBACE,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,KAAK,EAAE,GAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,KAAK,CAAC,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAA,CAAE;gBACjF,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB;aACD,EACD,QAAQ,CACT;AACH,QAAA,CAAC;IACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../src/components/DButton/DButton.tsx","../src/components/DSkeleton/DSkeletonLoader.tsx","../src/index.ts"],"sourcesContent":["import { defineComponent, h, PropType, SetupContext, VNode } from 'vue'\n\nexport interface UseLink {\n    navigate: () => void | null\n}\nexport default defineComponent({\n  name: 'DButton',\n  props: {\n    label: {\n      type: String as PropType<string>,\n      required: false,\n      default: ''\n    },\n    url: {\n      type: String as PropType<string>,\n      required: false,\n      default: ''\n    },\n    type: {\n      type: String as PropType<'button' | 'submit' | 'reset'>,\n      default: 'button'\n    },\n    variant: {\n      type: String as PropType<'primary' | 'secondary'>,\n      default: 'primary'\n    },\n    disabled: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    icon: {\n      type: [String, Object, Function] as PropType<string | object | (() => VNode) | VNode | null>,\n      default: null\n    },\n  },\n  emits: ['click'],\n  setup(props: Record<string, any>, ctx: SetupContext) {\n    const { slots, emit } = ctx\n    const base = 'flex items-center justify-center py-2 px-3 rounded-xl focus:outline-none'\n    const icon = 'flex items-center justify-center w-10 h-10  rounded-full '\n    const variants: Record<string, string> = {\n      primary: 'text-white bg-blue-900 hover:bg-blue-950',\n      secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',\n    }\n\n    function onClick(e: MouseEvent) {\n      if (props.disabled) return\n      emit('click', e)\n    }\n\n    return (): VNode => {\n      const children = slots.default ? slots.default() : props.label\n      if (props.icon) {\n        return h(\n          props.url ? 'a' : 'button',\n          {\n            type: props.type,\n            class: `${icon} ${variants[props.variant]} ${props.disabled ? '' : ''}  focus:outline-none`,\n            disabled: props.disabled,\n            href: props.url,\n            onClick,\n          },\n          [\n            typeof props.icon === 'string' ? h('i', { class: props.icon + ' mdi' }, ) : h(props.icon),\n            children\n          ]\n        )\n      }\n      \n      return h(\n        props.url ? 'a' : 'button',\n        {\n          type: props.type,\n          class: `${base} ${variants[props.variant]} ${props.disabled ? 'opacity-50' : ''}`,\n          disabled: props.disabled,\n          onClick\n        },\n        children\n      )\n    }\n  }\n})\n","import { defineComponent, PropType, h, SetupContext, VNode } from 'vue'\nexport default defineComponent({\n  name: 'DSkeletonLoader',\n  props: {\n    animation: {\n      type: String as PropType<'pulse' | 'wave'>,   \n      default: 'pulse'\n    },\n    type: {\n      type: String as PropType<'text' | 'circle' | 'avatar'>,\n      default: 'text'\n    }\n    },\n    \n\n  setup(props: Record<string, any>, ctx: SetupContext) {\n    const { slots } = ctx\n\n    const base = 'bg-gray-100 dark:bg-gray-200'\n    const animations: Record<string, string> = {\n      pulse: 'animate-pulse',\n      wave: 'animate-wave'\n    }\n    const types: Record<string, string> = {\n      text: 'rounded-full w-full p-2',\n      circle: 'rounded-full',\n      avatar: 'rounded-full  w-10 h-10 ',\n    }\n    const children = slots.default ? slots.default() : props.label\n\n    return (): VNode => {\n      return h(\n        children ? 'div' :\n        'div',\n        {\n          class: `${animations[props.animation]} `,\n        },\n        [\n          h('div', { class: ` ${base} ${types[props.type]}` }),\n        ],\n        \n       \n      )\n    }\n}\n\n})\n","export * from './components/DButton'\nexport * from './components/DSkeleton'\nexport interface UIOptions {\n    components?: Record<string, any>\n}\n\nexport function createDirdocUI( options: UIOptions = {}) {\n    const { components = {} } = options\n\n    return {\n        install(app: any) {\n            for (const key in components) {\n                app.component(key, components[key])\n            }\n        }\n    }\n}"],"names":[],"mappings":"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"}

package/dist/types/components/DButton/DButton.d.ts

@@ -1,11 +1,15 @@
 import { VNode } from 'vue';
+export interface UseLink {
+    navigate: () => void | null;
+}
 declare const _default: import("vue").DefineComponent<{
     [x: string]: /*elided*/ any;
 }, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, "click", import("vue").PublicProps, Readonly<{
     [x: string]: /*elided*/ any;
 }> & Readonly<{}>, {
     label: string;
-    type: "button" | "submit" | "a";
+    url: string;
+    type: "button" | "submit" | "reset";
     variant: "primary" | "secondary";
     disabled: boolean;
     icon: string | object | (() => VNode) | VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/dist/types/components/DSkeleton/DSkeletonLoader.d.ts

@@ -0,0 +1,10 @@
+import { VNode } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: /*elided*/ any;
+}, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    [x: string]: /*elided*/ any;
+}> & Readonly<{}>, {
+    animation: "pulse" | "wave";
+    type: "text" | "circle" | "avatar";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/types/components/DSkeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as DSkeletonLoader } from './DSkeletonLoader';

package/dist/types/index.d.ts

@@ -1,2 +1,8 @@
-export { DButton } from './components/DButton';
-export type {} from './components/DButton';
+export * from './components/DButton';
+export * from './components/DSkeleton';
+export interface UIOptions {
+    components?: Record<string, any>;
+}
+export declare function createDirdocUI(options?: UIOptions): {
+    install(app: any): void;
+};

package/dist/types/utils.d.ts

@@ -1 +1,3 @@
+import type { VNode } from "vue";
 export declare function noop(): void;
+export declare function useRender(render: () => VNode): void;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "dirdoc-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rm -rf dist",
     "build": "npm run clean && rollup -c",
-    "test": "jest"
+    "test": "jest",
+    "dev": "vite --config dev/vite.config.ts"
   },
   "keywords": [],
   "author": "",
@@ -16,16 +17,21 @@
     "tailwindcss": "^4.2.2"
   },
   "devDependencies": {
-    "jest": "^27.0.6",
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@tailwindcss/postcss": "^4.3.1",
+    "@tailwindcss/vite": "^4.3.1",
     "@types/bun": "latest",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "jest": "^27.0.6",
     "rollup": "4.61.1",
     "rollup-plugin-dts": "6.4.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.37.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-commonjs": "^29.0.3",
+    "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "vue": "^3.5.35",
-    "tslib": "^2.8.1"
+    "vite": "^8.0.16",
+    "vue": "^3.5.35"
   },
   "type": "module",
   "exports": {
@@ -37,10 +43,9 @@
     "./*": "./dist/*"
   },
   "peerDependencies": {
-    "vue": "^3.2 || ^4",
-    "typescript": "^4.9 || ^5"
+    "typescript": "^4.9 || ^5",
+    "vue": "^3.2 || ^4"
   },
   "files": [
     "dist"
-  ]
-}
+  ]}