vlite3 0.3.2 → 0.3.4
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/components/AvatarUploader/AvatarUploader.vue.d.ts +2 -2
- package/components/AvatarUploader/AvatarUploader.vue.js +53 -36
- package/components/DataList/DataList.vue.d.ts +47 -0
- package/components/DataList/DataList.vue.js +98 -0
- package/components/DataList/DataList.vue2.js +4 -0
- package/components/DataList/index.d.ts +2 -0
- package/components/DataList/types.d.ts +23 -0
- package/components/FilePicker/FilePicker.vue.d.ts +1 -0
- package/components/FilePicker/FilePicker.vue.js +159 -139
- package/components/Form/FormField.vue.js +53 -50
- package/components/Form/composables/useForm.js +80 -63
- package/components/Form/types.d.ts +4 -0
- package/index.d.ts +1 -0
- package/index.js +13 -11
- package/package.json +1 -1
|
@@ -13,11 +13,11 @@ export interface Props {
|
|
|
13
13
|
className?: string;
|
|
14
14
|
}
|
|
15
15
|
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
16
|
-
"update:modelValue": (value:
|
|
16
|
+
"update:modelValue": (value: any) => any;
|
|
17
17
|
change: (value: FilePickerValue) => any;
|
|
18
18
|
error: (error: string) => any;
|
|
19
19
|
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
|
|
20
|
-
"onUpdate:modelValue"?: (value:
|
|
20
|
+
"onUpdate:modelValue"?: (value: any) => any;
|
|
21
21
|
onChange?: (value: FilePickerValue) => any;
|
|
22
22
|
onError?: (error: string) => any;
|
|
23
23
|
}>, {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as x, ref as w, computed as z, openBlock as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { defineComponent as x, ref as w, computed as z, openBlock as i, createElementBlock as r, createElementVNode as f, normalizeClass as o, createVNode as n, withCtx as C, createCommentVNode as g, withModifiers as A } from "vue";
|
|
2
|
+
import c from "../Icon.vue.js";
|
|
3
|
+
import U from "../FilePicker/FilePicker.vue.js";
|
|
4
|
+
import V from "../Avatar.vue.js";
|
|
5
|
+
const R = { class: "inline-block" }, j = ["onClick"], F = /* @__PURE__ */ x({
|
|
6
6
|
name: "AvatarUploader",
|
|
7
7
|
__name: "AvatarUploader",
|
|
8
8
|
props: {
|
|
@@ -18,82 +18,99 @@ const E = { class: "inline-block" }, $ = ["onClick"], I = /* @__PURE__ */ x({
|
|
|
18
18
|
className: {}
|
|
19
19
|
},
|
|
20
20
|
emits: ["update:modelValue", "change", "error"],
|
|
21
|
-
setup(e, { emit:
|
|
22
|
-
const
|
|
21
|
+
setup(e, { emit: v }) {
|
|
22
|
+
const l = e, t = v, d = w(null), m = z(() => {
|
|
23
|
+
if (d.value) return d.value;
|
|
24
|
+
if (typeof l.modelValue == "string") return l.modelValue;
|
|
25
|
+
if (l.modelValue && l.modelValue.base64) return l.modelValue.base64;
|
|
26
|
+
if (l.modelValue && l.modelValue.file instanceof File)
|
|
27
|
+
try {
|
|
28
|
+
return URL.createObjectURL(l.modelValue.file);
|
|
29
|
+
} catch {
|
|
30
|
+
}
|
|
31
|
+
return null;
|
|
32
|
+
}), h = (a) => {
|
|
23
33
|
if (!a || Array.isArray(a)) {
|
|
24
|
-
Array.isArray(a) && a.length === 0 &&
|
|
34
|
+
Array.isArray(a) && a.length === 0 && b();
|
|
25
35
|
return;
|
|
26
36
|
}
|
|
27
|
-
|
|
37
|
+
if (a.base64)
|
|
38
|
+
d.value = a.base64, t("update:modelValue", a.base64);
|
|
39
|
+
else if (a.file)
|
|
40
|
+
try {
|
|
41
|
+
d.value = URL.createObjectURL(a.file), t("update:modelValue", a);
|
|
42
|
+
} catch {
|
|
43
|
+
}
|
|
44
|
+
t("change", a);
|
|
28
45
|
}, y = (a) => {
|
|
29
46
|
t("error", a);
|
|
30
|
-
},
|
|
31
|
-
|
|
47
|
+
}, b = () => {
|
|
48
|
+
d.value = null, t("update:modelValue", null), t("change", null);
|
|
32
49
|
};
|
|
33
|
-
return (a,
|
|
34
|
-
|
|
35
|
-
class:
|
|
50
|
+
return (a, u) => (i(), r("div", R, [
|
|
51
|
+
f("div", {
|
|
52
|
+
class: o(["relative inline-block group", e.rounded === "full" ? "rounded-full" : "rounded-md"])
|
|
36
53
|
}, [
|
|
37
|
-
|
|
38
|
-
src:
|
|
54
|
+
n(V, {
|
|
55
|
+
src: m.value || void 0,
|
|
39
56
|
fallback: e.fallback,
|
|
40
57
|
alt: e.alt,
|
|
41
58
|
size: e.size,
|
|
42
59
|
rounded: e.rounded,
|
|
43
|
-
class:
|
|
60
|
+
class: o(e.className)
|
|
44
61
|
}, null, 8, ["src", "fallback", "alt", "size", "rounded", "class"]),
|
|
45
|
-
|
|
62
|
+
n(U, {
|
|
46
63
|
disabled: !e.editable || e.disabled || e.loading,
|
|
47
64
|
"return-format": "base64",
|
|
48
65
|
"file-types": ["image/jpeg", "image/png", "image/webp", "image/gif"],
|
|
49
66
|
"max-size": e.maxSize,
|
|
50
67
|
class: "absolute inset-0",
|
|
51
|
-
onChange:
|
|
68
|
+
onChange: u[0] || (u[0] = (s) => h(s)),
|
|
52
69
|
onError: y
|
|
53
70
|
}, {
|
|
54
|
-
trigger: C(({ trigger:
|
|
55
|
-
|
|
71
|
+
trigger: C(({ trigger: s, isLoading: k }) => [
|
|
72
|
+
f("button", {
|
|
56
73
|
type: "button",
|
|
57
|
-
class:
|
|
58
|
-
onClick: (
|
|
74
|
+
class: o(["absolute inset-0 cursor-pointer", { "cursor-default": !e.editable || e.disabled }]),
|
|
75
|
+
onClick: (B) => e.editable && !e.disabled ? s() : null
|
|
59
76
|
}, [
|
|
60
|
-
e.loading || k ? (
|
|
77
|
+
e.loading || k ? (i(), r("div", {
|
|
61
78
|
key: 0,
|
|
62
|
-
class:
|
|
79
|
+
class: o(["absolute inset-0 flex items-center justify-center bg-[#7878783b] text-white", e.rounded === "full" ? "rounded-full" : "rounded-md"])
|
|
63
80
|
}, [
|
|
64
|
-
|
|
81
|
+
n(c, {
|
|
65
82
|
icon: "lucide:loader-2",
|
|
66
83
|
class: "animate-spin w-1/3 h-1/3"
|
|
67
84
|
})
|
|
68
|
-
], 2)) : e.editable && !e.disabled ? (
|
|
85
|
+
], 2)) : e.editable && !e.disabled ? (i(), r("div", {
|
|
69
86
|
key: 1,
|
|
70
|
-
class:
|
|
87
|
+
class: o(["absolute inset-0 flex items-center justify-center bg-[#00000051] text-white opacity-0 group-hover:opacity-100 transition-opacity", e.rounded === "full" ? "rounded-full" : "rounded-md"])
|
|
71
88
|
}, [
|
|
72
|
-
|
|
89
|
+
n(c, {
|
|
73
90
|
icon: "lucide:camera",
|
|
74
91
|
class: "w-1/3 h-1/3"
|
|
75
92
|
})
|
|
76
|
-
], 2)) :
|
|
77
|
-
], 10,
|
|
93
|
+
], 2)) : g("", !0)
|
|
94
|
+
], 10, j)
|
|
78
95
|
]),
|
|
79
96
|
_: 1
|
|
80
97
|
}, 8, ["disabled", "max-size"]),
|
|
81
|
-
|
|
98
|
+
(m.value || e.modelValue) && e.editable && !e.disabled && !e.loading ? (i(), r("button", {
|
|
82
99
|
key: 0,
|
|
83
100
|
type: "button",
|
|
84
101
|
class: "absolute -top-1 -right-1 z-10 p-1 bg-background border border-border rounded-full text-muted-foreground shadow-sm hover:text-destructive hover:border-destructive transition-all opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100",
|
|
85
|
-
onClick: A(
|
|
102
|
+
onClick: A(b, ["stop"]),
|
|
86
103
|
title: "Remove image"
|
|
87
104
|
}, [
|
|
88
|
-
|
|
105
|
+
n(c, {
|
|
89
106
|
icon: "lucide:x",
|
|
90
107
|
class: "w-3 h-3"
|
|
91
108
|
})
|
|
92
|
-
])) :
|
|
109
|
+
])) : g("", !0)
|
|
93
110
|
], 2)
|
|
94
111
|
]));
|
|
95
112
|
}
|
|
96
113
|
});
|
|
97
114
|
export {
|
|
98
|
-
|
|
115
|
+
F as default
|
|
99
116
|
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { DataListProps } from './types';
|
|
2
|
+
declare function __VLS_template(): {
|
|
3
|
+
attrs: Partial<{}>;
|
|
4
|
+
slots: {
|
|
5
|
+
skeleton?(_: {
|
|
6
|
+
index: number;
|
|
7
|
+
}): any;
|
|
8
|
+
skelton?(_: {
|
|
9
|
+
index: number;
|
|
10
|
+
}): any;
|
|
11
|
+
empty?(_: {}): any;
|
|
12
|
+
item?(_: {
|
|
13
|
+
item: any;
|
|
14
|
+
data: any[];
|
|
15
|
+
index: number;
|
|
16
|
+
}): any;
|
|
17
|
+
};
|
|
18
|
+
refs: {};
|
|
19
|
+
rootEl: HTMLDivElement;
|
|
20
|
+
};
|
|
21
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
22
|
+
declare const __VLS_component: import('vue').DefineComponent<DataListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
23
|
+
"update:itemsPerPage": (limit: number) => any;
|
|
24
|
+
"page-change": (page: number) => any;
|
|
25
|
+
}, string, import('vue').PublicProps, Readonly<DataListProps> & Readonly<{
|
|
26
|
+
"onUpdate:itemsPerPage"?: (limit: number) => any;
|
|
27
|
+
"onPage-change"?: (page: number) => any;
|
|
28
|
+
}>, {
|
|
29
|
+
data: any[];
|
|
30
|
+
loading: boolean;
|
|
31
|
+
className: string;
|
|
32
|
+
paginationPosition: "start" | "center" | "end" | "between";
|
|
33
|
+
showItemsPerPage: boolean;
|
|
34
|
+
itemsPerPageOptions: number[];
|
|
35
|
+
emptyTitle: string;
|
|
36
|
+
emptyDescription: string;
|
|
37
|
+
emptyIcon: string;
|
|
38
|
+
showPagination: boolean;
|
|
39
|
+
itemProps: Record<string, any>;
|
|
40
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
41
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
42
|
+
export default _default;
|
|
43
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
44
|
+
new (): {
|
|
45
|
+
$slots: S;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { defineComponent as b, computed as r, openBlock as t, createElementBlock as n, normalizeClass as c, Fragment as u, renderList as f, renderSlot as l, createBlock as y, resolveDynamicComponent as P, createElementVNode as i, createVNode as h, toDisplayString as k, mergeProps as C, createCommentVNode as p, unref as N } from "vue";
|
|
2
|
+
import B from "../Pagination/Pagination.vue.js";
|
|
3
|
+
import $ from "../Icon.vue.js";
|
|
4
|
+
const D = { class: "flex flex-col w-full" }, V = {
|
|
5
|
+
key: 1,
|
|
6
|
+
class: "h-48 rounded-lg bg-gray-200 animate-pulse w-full"
|
|
7
|
+
}, j = {
|
|
8
|
+
key: 1,
|
|
9
|
+
class: "flex flex-col items-center justify-center p-12 text-center bg-gray-50 border border-gray-200 rounded-lg"
|
|
10
|
+
}, E = { class: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 mb-4" }, L = { class: "text-lg font-semibold text-gray-900" }, O = { class: "mt-2 text-sm text-gray-500" }, S = {
|
|
11
|
+
key: 3,
|
|
12
|
+
class: "mt-8"
|
|
13
|
+
}, W = /* @__PURE__ */ b({
|
|
14
|
+
__name: "DataList",
|
|
15
|
+
props: {
|
|
16
|
+
data: { default: () => [] },
|
|
17
|
+
loading: { type: Boolean, default: !1 },
|
|
18
|
+
pageInfo: {},
|
|
19
|
+
className: { default: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" },
|
|
20
|
+
item: {},
|
|
21
|
+
skeleton: {},
|
|
22
|
+
skelton: {},
|
|
23
|
+
itemProps: { default: () => ({}) },
|
|
24
|
+
emptyTitle: { default: "No data found" },
|
|
25
|
+
emptyDescription: { default: "We could not find any items to display here." },
|
|
26
|
+
emptyIcon: { default: "lucide:inbox" },
|
|
27
|
+
showPagination: { type: Boolean, default: !0 },
|
|
28
|
+
paginationPosition: { default: "between" },
|
|
29
|
+
itemsPerPageOptions: { default: () => [10, 25, 50, 100] },
|
|
30
|
+
showItemsPerPage: { type: Boolean, default: !1 }
|
|
31
|
+
},
|
|
32
|
+
emits: ["page-change", "update:itemsPerPage"],
|
|
33
|
+
setup(e, { emit: v }) {
|
|
34
|
+
const d = e, m = v, w = (a) => {
|
|
35
|
+
m("page-change", a);
|
|
36
|
+
}, x = (a) => {
|
|
37
|
+
m("update:itemsPerPage", a);
|
|
38
|
+
}, I = r(() => d.pageInfo?.currentPage || 1), g = r(() => d.pageInfo?.totalPages || 1);
|
|
39
|
+
return (a, T) => (t(), n("div", D, [
|
|
40
|
+
e.loading ? (t(), n("div", {
|
|
41
|
+
key: 0,
|
|
42
|
+
class: c(e.className)
|
|
43
|
+
}, [
|
|
44
|
+
(t(), n(u, null, f(8, (s) => l(a.$slots, "skeleton", {
|
|
45
|
+
key: "skeleton-" + s,
|
|
46
|
+
index: s
|
|
47
|
+
}, () => [
|
|
48
|
+
l(a.$slots, "skelton", { index: s }, () => [
|
|
49
|
+
e.skeleton || e.skelton ? (t(), y(P(e.skeleton || e.skelton), { key: 0 })) : (t(), n("div", V))
|
|
50
|
+
])
|
|
51
|
+
])), 64))
|
|
52
|
+
], 2)) : !e.data || e.data.length === 0 ? (t(), n("div", j, [
|
|
53
|
+
l(a.$slots, "empty", {}, () => [
|
|
54
|
+
i("div", E, [
|
|
55
|
+
h($, {
|
|
56
|
+
icon: e.emptyIcon,
|
|
57
|
+
class: "h-6 w-6 text-gray-500"
|
|
58
|
+
}, null, 8, ["icon"])
|
|
59
|
+
]),
|
|
60
|
+
i("h3", L, k(e.emptyTitle), 1),
|
|
61
|
+
i("p", O, k(e.emptyDescription), 1)
|
|
62
|
+
])
|
|
63
|
+
])) : (t(), n("div", {
|
|
64
|
+
key: 2,
|
|
65
|
+
class: c(e.className)
|
|
66
|
+
}, [
|
|
67
|
+
(t(!0), n(u, null, f(e.data, (s, o) => l(a.$slots, "item", {
|
|
68
|
+
key: o,
|
|
69
|
+
item: s,
|
|
70
|
+
data: e.data,
|
|
71
|
+
index: o
|
|
72
|
+
}, () => [
|
|
73
|
+
e.item ? (t(), y(P(e.item), C({
|
|
74
|
+
key: 0,
|
|
75
|
+
item: s,
|
|
76
|
+
data: e.data,
|
|
77
|
+
index: o
|
|
78
|
+
}, { ref_for: !0 }, e.itemProps), null, 16, ["item", "data", "index"])) : p("", !0)
|
|
79
|
+
])), 128))
|
|
80
|
+
], 2)),
|
|
81
|
+
e.showPagination && e.pageInfo && g.value > 1 ? (t(), n("div", S, [
|
|
82
|
+
h(N(B), {
|
|
83
|
+
"current-page": I.value,
|
|
84
|
+
"total-pages": g.value,
|
|
85
|
+
alignment: e.paginationPosition,
|
|
86
|
+
"show-items-per-page": e.showItemsPerPage,
|
|
87
|
+
"items-per-page": e.pageInfo?.itemsPerPage,
|
|
88
|
+
"items-per-page-options": e.itemsPerPageOptions,
|
|
89
|
+
onChange: w,
|
|
90
|
+
"onUpdate:itemsPerPage": x
|
|
91
|
+
}, null, 8, ["current-page", "total-pages", "alignment", "show-items-per-page", "items-per-page", "items-per-page-options"])
|
|
92
|
+
])) : p("", !0)
|
|
93
|
+
]));
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
export {
|
|
97
|
+
W as default
|
|
98
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface DataListPageInfo {
|
|
2
|
+
currentPage: number;
|
|
3
|
+
totalPages: number;
|
|
4
|
+
totalItems?: number;
|
|
5
|
+
itemsPerPage?: number;
|
|
6
|
+
}
|
|
7
|
+
export interface DataListProps {
|
|
8
|
+
data?: any[];
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
pageInfo?: DataListPageInfo;
|
|
11
|
+
className?: string;
|
|
12
|
+
item?: any;
|
|
13
|
+
skeleton?: any;
|
|
14
|
+
skelton?: any;
|
|
15
|
+
itemProps?: Record<string, any>;
|
|
16
|
+
emptyTitle?: string;
|
|
17
|
+
emptyDescription?: string;
|
|
18
|
+
emptyIcon?: string;
|
|
19
|
+
showPagination?: boolean;
|
|
20
|
+
paginationPosition?: 'start' | 'center' | 'end' | 'between';
|
|
21
|
+
itemsPerPageOptions?: number[];
|
|
22
|
+
showItemsPerPage?: boolean;
|
|
23
|
+
}
|