dirdoc-ui 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -0
- package/dist/index.cjs.js +63 -7
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +21 -3
- package/dist/index.esm.js +62 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/DButton/DButton.d.ts +5 -1
- package/dist/types/components/DSkeleton/DSkeletonLoader.d.ts +10 -0
- package/dist/types/components/DSkeleton/index.d.ts +1 -0
- package/dist/types/index.d.ts +8 -2
- package/dist/types/utils.d.ts +2 -0
- package/package.json +16 -11
package/README.md
CHANGED
package/dist/index.cjs.js
CHANGED
|
@@ -10,6 +10,11 @@ var DButton = vue.defineComponent({
|
|
|
10
10
|
required: false,
|
|
11
11
|
default: ''
|
|
12
12
|
},
|
|
13
|
+
url: {
|
|
14
|
+
type: String,
|
|
15
|
+
required: false,
|
|
16
|
+
default: ''
|
|
17
|
+
},
|
|
13
18
|
type: {
|
|
14
19
|
type: String,
|
|
15
20
|
default: 'button'
|
|
@@ -30,10 +35,11 @@ var DButton = vue.defineComponent({
|
|
|
30
35
|
emits: ['click'],
|
|
31
36
|
setup(props, ctx) {
|
|
32
37
|
const { slots, emit } = ctx;
|
|
33
|
-
const base = 'flex items-center justify-center focus:outline-none';
|
|
38
|
+
const base = 'flex items-center justify-center py-2 px-3 rounded-xl focus:outline-none';
|
|
39
|
+
const icon = 'flex items-center justify-center w-10 h-10 rounded-full ';
|
|
34
40
|
const variants = {
|
|
35
|
-
primary: 'bg-blue hover:bg-blue-
|
|
36
|
-
secondary: 'bg-gray-200
|
|
41
|
+
primary: 'bg-blue-900 hover:bg-blue-950',
|
|
42
|
+
secondary: 'bg-gray-200 hover:bg-gray-300',
|
|
37
43
|
};
|
|
38
44
|
function onClick(e) {
|
|
39
45
|
if (props.disabled)
|
|
@@ -43,17 +49,18 @@ var DButton = vue.defineComponent({
|
|
|
43
49
|
return () => {
|
|
44
50
|
const children = slots.default ? slots.default() : props.label;
|
|
45
51
|
if (props.icon) {
|
|
46
|
-
return vue.h('a', {
|
|
52
|
+
return vue.h(props.url ? 'a' : 'button', {
|
|
47
53
|
type: props.type,
|
|
48
|
-
class: `${
|
|
54
|
+
class: `${icon} ${variants[props.variant]} ${props.disabled ? '' : ''} focus:outline-none`,
|
|
49
55
|
disabled: props.disabled,
|
|
50
|
-
|
|
56
|
+
href: props.url,
|
|
57
|
+
onClick,
|
|
51
58
|
}, [
|
|
52
59
|
typeof props.icon === 'string' ? vue.h('i', { class: props.icon + ' mdi' }) : vue.h(props.icon),
|
|
53
60
|
children
|
|
54
61
|
]);
|
|
55
62
|
}
|
|
56
|
-
return vue.h('a', {
|
|
63
|
+
return vue.h(props.url ? 'a' : 'button', {
|
|
57
64
|
type: props.type,
|
|
58
65
|
class: `${base} ${variants[props.variant]} ${props.disabled ? 'opacity-50' : ''}`,
|
|
59
66
|
disabled: props.disabled,
|
|
@@ -63,5 +70,54 @@ var DButton = vue.defineComponent({
|
|
|
63
70
|
}
|
|
64
71
|
});
|
|
65
72
|
|
|
73
|
+
var DSkeletonLoader = vue.defineComponent({
|
|
74
|
+
name: 'DSkeletonLoader',
|
|
75
|
+
props: {
|
|
76
|
+
animation: {
|
|
77
|
+
type: String,
|
|
78
|
+
default: 'pulse'
|
|
79
|
+
},
|
|
80
|
+
type: {
|
|
81
|
+
type: String,
|
|
82
|
+
default: 'text'
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
setup(props, ctx) {
|
|
86
|
+
const { slots } = ctx;
|
|
87
|
+
const base = 'bg-gray-100 dark:bg-gray-200';
|
|
88
|
+
const animations = {
|
|
89
|
+
pulse: 'animate-pulse',
|
|
90
|
+
wave: 'animate-wave'
|
|
91
|
+
};
|
|
92
|
+
const types = {
|
|
93
|
+
text: 'rounded-full w-full p-2',
|
|
94
|
+
circle: 'rounded-full',
|
|
95
|
+
avatar: 'rounded-full w-10 h-10 ',
|
|
96
|
+
};
|
|
97
|
+
const children = slots.default ? slots.default() : props.label;
|
|
98
|
+
return () => {
|
|
99
|
+
return vue.h(children ? 'div' :
|
|
100
|
+
'div', {
|
|
101
|
+
class: `${animations[props.animation]} `,
|
|
102
|
+
}, [
|
|
103
|
+
vue.h('div', { class: ` ${base} ${types[props.type]}` }),
|
|
104
|
+
]);
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
function createDirdocUI(options = {}) {
|
|
110
|
+
const { components = {} } = options;
|
|
111
|
+
return {
|
|
112
|
+
install(app) {
|
|
113
|
+
for (const key in components) {
|
|
114
|
+
app.component(key, components[key]);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
|
|
66
120
|
exports.DButton = DButton;
|
|
121
|
+
exports.DSkeletonLoader = DSkeletonLoader;
|
|
122
|
+
exports.createDirdocUI = createDirdocUI;
|
|
67
123
|
//# sourceMappingURL=index.cjs.js.map
|
package/dist/index.cjs.js.map
CHANGED
|
@@ -1 +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' | '
|
|
1
|
+
{"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: 'bg-blue-900 hover:bg-blue-950',\n secondary: 'bg-gray-200 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
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import * as vue from 'vue';
|
|
2
2
|
import { VNode } from 'vue';
|
|
3
3
|
|
|
4
|
-
declare const _default: vue.DefineComponent<{
|
|
4
|
+
declare const _default$1: vue.DefineComponent<{
|
|
5
5
|
[x: string]: /*elided*/ any;
|
|
6
6
|
}, () => VNode, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, "click", vue.PublicProps, Readonly<{
|
|
7
7
|
[x: string]: /*elided*/ any;
|
|
8
8
|
}> & Readonly<{}>, {
|
|
9
9
|
label: string;
|
|
10
|
-
|
|
10
|
+
url: string;
|
|
11
|
+
type: "button" | "submit" | "reset";
|
|
11
12
|
variant: "primary" | "secondary";
|
|
12
13
|
disabled: boolean;
|
|
13
14
|
icon: string | object | (() => VNode) | VNode<vue.RendererNode, vue.RendererElement, {
|
|
@@ -15,4 +16,21 @@ declare const _default: vue.DefineComponent<{
|
|
|
15
16
|
}> | null;
|
|
16
17
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
declare const _default: vue.DefineComponent<{
|
|
20
|
+
[x: string]: /*elided*/ any;
|
|
21
|
+
}, () => VNode, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
|
|
22
|
+
[x: string]: /*elided*/ any;
|
|
23
|
+
}> & Readonly<{}>, {
|
|
24
|
+
animation: "pulse" | "wave";
|
|
25
|
+
type: "text" | "circle" | "avatar";
|
|
26
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
27
|
+
|
|
28
|
+
interface UIOptions {
|
|
29
|
+
components?: Record<string, any>;
|
|
30
|
+
}
|
|
31
|
+
declare function createDirdocUI(options?: UIOptions): {
|
|
32
|
+
install(app: any): void;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export { _default$1 as DButton, _default as DSkeletonLoader, createDirdocUI };
|
|
36
|
+
export type { UIOptions };
|
package/dist/index.esm.js
CHANGED
|
@@ -8,6 +8,11 @@ var DButton = defineComponent({
|
|
|
8
8
|
required: false,
|
|
9
9
|
default: ''
|
|
10
10
|
},
|
|
11
|
+
url: {
|
|
12
|
+
type: String,
|
|
13
|
+
required: false,
|
|
14
|
+
default: ''
|
|
15
|
+
},
|
|
11
16
|
type: {
|
|
12
17
|
type: String,
|
|
13
18
|
default: 'button'
|
|
@@ -28,10 +33,11 @@ var DButton = defineComponent({
|
|
|
28
33
|
emits: ['click'],
|
|
29
34
|
setup(props, ctx) {
|
|
30
35
|
const { slots, emit } = ctx;
|
|
31
|
-
const base = 'flex items-center justify-center focus:outline-none';
|
|
36
|
+
const base = 'flex items-center justify-center py-2 px-3 rounded-xl focus:outline-none';
|
|
37
|
+
const icon = 'flex items-center justify-center w-10 h-10 rounded-full ';
|
|
32
38
|
const variants = {
|
|
33
|
-
primary: 'bg-blue hover:bg-blue-
|
|
34
|
-
secondary: 'bg-gray-200
|
|
39
|
+
primary: 'bg-blue-900 hover:bg-blue-950',
|
|
40
|
+
secondary: 'bg-gray-200 hover:bg-gray-300',
|
|
35
41
|
};
|
|
36
42
|
function onClick(e) {
|
|
37
43
|
if (props.disabled)
|
|
@@ -41,17 +47,18 @@ var DButton = defineComponent({
|
|
|
41
47
|
return () => {
|
|
42
48
|
const children = slots.default ? slots.default() : props.label;
|
|
43
49
|
if (props.icon) {
|
|
44
|
-
return h('a', {
|
|
50
|
+
return h(props.url ? 'a' : 'button', {
|
|
45
51
|
type: props.type,
|
|
46
|
-
class: `${
|
|
52
|
+
class: `${icon} ${variants[props.variant]} ${props.disabled ? '' : ''} focus:outline-none`,
|
|
47
53
|
disabled: props.disabled,
|
|
48
|
-
|
|
54
|
+
href: props.url,
|
|
55
|
+
onClick,
|
|
49
56
|
}, [
|
|
50
57
|
typeof props.icon === 'string' ? h('i', { class: props.icon + ' mdi' }) : h(props.icon),
|
|
51
58
|
children
|
|
52
59
|
]);
|
|
53
60
|
}
|
|
54
|
-
return h('a', {
|
|
61
|
+
return h(props.url ? 'a' : 'button', {
|
|
55
62
|
type: props.type,
|
|
56
63
|
class: `${base} ${variants[props.variant]} ${props.disabled ? 'opacity-50' : ''}`,
|
|
57
64
|
disabled: props.disabled,
|
|
@@ -61,5 +68,52 @@ var DButton = defineComponent({
|
|
|
61
68
|
}
|
|
62
69
|
});
|
|
63
70
|
|
|
64
|
-
|
|
71
|
+
var DSkeletonLoader = defineComponent({
|
|
72
|
+
name: 'DSkeletonLoader',
|
|
73
|
+
props: {
|
|
74
|
+
animation: {
|
|
75
|
+
type: String,
|
|
76
|
+
default: 'pulse'
|
|
77
|
+
},
|
|
78
|
+
type: {
|
|
79
|
+
type: String,
|
|
80
|
+
default: 'text'
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
setup(props, ctx) {
|
|
84
|
+
const { slots } = ctx;
|
|
85
|
+
const base = 'bg-gray-100 dark:bg-gray-200';
|
|
86
|
+
const animations = {
|
|
87
|
+
pulse: 'animate-pulse',
|
|
88
|
+
wave: 'animate-wave'
|
|
89
|
+
};
|
|
90
|
+
const types = {
|
|
91
|
+
text: 'rounded-full w-full p-2',
|
|
92
|
+
circle: 'rounded-full',
|
|
93
|
+
avatar: 'rounded-full w-10 h-10 ',
|
|
94
|
+
};
|
|
95
|
+
const children = slots.default ? slots.default() : props.label;
|
|
96
|
+
return () => {
|
|
97
|
+
return h(children ? 'div' :
|
|
98
|
+
'div', {
|
|
99
|
+
class: `${animations[props.animation]} `,
|
|
100
|
+
}, [
|
|
101
|
+
h('div', { class: ` ${base} ${types[props.type]}` }),
|
|
102
|
+
]);
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
function createDirdocUI(options = {}) {
|
|
108
|
+
const { components = {} } = options;
|
|
109
|
+
return {
|
|
110
|
+
install(app) {
|
|
111
|
+
for (const key in components) {
|
|
112
|
+
app.component(key, components[key]);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
export { DButton, DSkeletonLoader, createDirdocUI };
|
|
65
119
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +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' | '
|
|
1
|
+
{"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: 'bg-blue-900 hover:bg-blue-950',\n secondary: 'bg-gray-200 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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"}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { VNode } from 'vue';
|
|
2
|
+
export interface UseLink {
|
|
3
|
+
navigate: () => void | null;
|
|
4
|
+
}
|
|
2
5
|
declare const _default: import("vue").DefineComponent<{
|
|
3
6
|
[x: string]: /*elided*/ any;
|
|
4
7
|
}, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, "click", import("vue").PublicProps, Readonly<{
|
|
5
8
|
[x: string]: /*elided*/ any;
|
|
6
9
|
}> & Readonly<{}>, {
|
|
7
10
|
label: string;
|
|
8
|
-
|
|
11
|
+
url: string;
|
|
12
|
+
type: "button" | "submit" | "reset";
|
|
9
13
|
variant: "primary" | "secondary";
|
|
10
14
|
disabled: boolean;
|
|
11
15
|
icon: string | object | (() => VNode) | VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { VNode } from 'vue';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<{
|
|
3
|
+
[x: string]: /*elided*/ any;
|
|
4
|
+
}, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
|
|
5
|
+
[x: string]: /*elided*/ any;
|
|
6
|
+
}> & Readonly<{}>, {
|
|
7
|
+
animation: "pulse" | "wave";
|
|
8
|
+
type: "text" | "circle" | "avatar";
|
|
9
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DSkeletonLoader } from './DSkeletonLoader';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export * from './components/DButton';
|
|
2
|
+
export * from './components/DSkeleton';
|
|
3
|
+
export interface UIOptions {
|
|
4
|
+
components?: Record<string, any>;
|
|
5
|
+
}
|
|
6
|
+
export declare function createDirdocUI(options?: UIOptions): {
|
|
7
|
+
install(app: any): void;
|
|
8
|
+
};
|
package/dist/types/utils.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dirdoc-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"main": "dist/index.cjs.js",
|
|
5
5
|
"module": "dist/index.esm.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"clean": "rm -rf dist",
|
|
9
9
|
"build": "npm run clean && rollup -c",
|
|
10
|
-
"test": "jest"
|
|
10
|
+
"test": "jest",
|
|
11
|
+
"dev": "vite --config dev/vite.config.ts"
|
|
11
12
|
},
|
|
12
13
|
"keywords": [],
|
|
13
14
|
"author": "",
|
|
@@ -16,16 +17,21 @@
|
|
|
16
17
|
"tailwindcss": "^4.2.2"
|
|
17
18
|
},
|
|
18
19
|
"devDependencies": {
|
|
19
|
-
"
|
|
20
|
+
"@rollup/plugin-commonjs": "^29.0.3",
|
|
21
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
22
|
+
"@tailwindcss/postcss": "^4.3.1",
|
|
23
|
+
"@tailwindcss/vite": "^4.3.1",
|
|
20
24
|
"@types/bun": "latest",
|
|
25
|
+
"@vitejs/plugin-vue": "^6.0.7",
|
|
26
|
+
"jest": "^27.0.6",
|
|
21
27
|
"rollup": "4.61.1",
|
|
22
28
|
"rollup-plugin-dts": "6.4.1",
|
|
29
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
23
30
|
"rollup-plugin-typescript2": "^0.37.0",
|
|
24
|
-
"
|
|
25
|
-
"@rollup/plugin-commonjs": "^29.0.3",
|
|
31
|
+
"tslib": "^2.8.1",
|
|
26
32
|
"typescript": "^6.0.3",
|
|
27
|
-
"
|
|
28
|
-
"
|
|
33
|
+
"vite": "^8.0.16",
|
|
34
|
+
"vue": "^3.5.35"
|
|
29
35
|
},
|
|
30
36
|
"type": "module",
|
|
31
37
|
"exports": {
|
|
@@ -37,10 +43,9 @@
|
|
|
37
43
|
"./*": "./dist/*"
|
|
38
44
|
},
|
|
39
45
|
"peerDependencies": {
|
|
40
|
-
"
|
|
41
|
-
"
|
|
46
|
+
"typescript": "^4.9 || ^5",
|
|
47
|
+
"vue": "^3.2 || ^4"
|
|
42
48
|
},
|
|
43
49
|
"files": [
|
|
44
50
|
"dist"
|
|
45
|
-
]
|
|
46
|
-
}
|
|
51
|
+
]}
|