veloce-vue 0.20.0 → 0.22.0
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/_virtual/_plugin-vue_export-helper.js +9 -0
- package/components/Accordion.vue.d.ts +19 -1
- package/components/Accordion.vue.js +91 -0
- package/components/Accordion.vue2.js +4 -0
- package/components/Badge.vue.d.ts +1 -0
- package/components/Badge.vue.js +47 -0
- package/components/Badge.vue2.js +4 -0
- package/components/Button.vue.d.ts +16 -8
- package/components/Button.vue.js +7 -0
- package/components/Button.vue2.js +114 -0
- package/components/Checkbox.vue.d.ts +6 -7
- package/components/Checkbox.vue.js +98 -0
- package/components/Checkbox.vue2.js +4 -0
- package/components/Chip.vue.d.ts +6 -7
- package/components/Chip.vue.js +61 -0
- package/components/Chip.vue2.js +4 -0
- package/components/Drawer.vue.js +94 -0
- package/components/Drawer.vue2.js +4 -0
- package/components/Fieldset.vue.d.ts +6 -7
- package/components/Fieldset.vue.js +49 -0
- package/components/Fieldset.vue2.js +4 -0
- package/components/Input.vue.d.ts +11 -12
- package/components/Input.vue.js +106 -0
- package/components/Input.vue2.js +4 -0
- package/components/JsonRenderer.vue.d.ts +14 -0
- package/components/JsonRenderer.vue.js +63 -0
- package/components/JsonRenderer.vue2.js +4 -0
- package/components/Layout.vue.js +83 -0
- package/components/Layout.vue2.js +4 -0
- package/components/Message.vue.d.ts +97 -8
- package/components/Message.vue.js +109 -0
- package/components/Message.vue2.js +4 -0
- package/components/MiniEditor.vue.d.ts +12 -0
- package/components/MiniEditor.vue.js +132 -0
- package/components/MiniEditor.vue2.js +4 -0
- package/components/Modal.vue.js +73 -0
- package/components/Modal.vue2.js +4 -0
- package/components/Popover.vue.js +78 -0
- package/components/Popover.vue2.js +4 -0
- package/components/ProgressBar.vue.js +51 -0
- package/components/ProgressBar.vue2.js +4 -0
- package/components/ProgressSpinner.vue.js +47 -0
- package/components/ProgressSpinner.vue2.js +4 -0
- package/components/RangeSlider.vue.js +61 -0
- package/components/RangeSlider.vue2.js +4 -0
- package/components/Select.vue.js +129 -0
- package/components/Select.vue2.js +4 -0
- package/components/Separator.vue.d.ts +8 -9
- package/components/Separator.vue.js +74 -0
- package/components/Separator.vue2.js +4 -0
- package/components/Skeleton.vue.d.ts +1 -1
- package/components/Skeleton.vue.js +7 -0
- package/components/Skeleton.vue2.js +24 -0
- package/components/Switch.vue.js +48 -0
- package/components/Switch.vue2.js +4 -0
- package/components/Tooltip.vue.js +35 -0
- package/components/Tooltip.vue2.js +4 -0
- package/components/icon/Icon.vue.d.ts +2 -3
- package/components/icon/Icon.vue.js +21 -0
- package/components/icon/Icon.vue2.js +4 -0
- package/components/icon/icons.d.ts +139 -139
- package/components/typography/Blockquote.vue.d.ts +151 -0
- package/components/typography/Blockquote.vue.js +55 -0
- package/components/typography/Blockquote.vue2.js +4 -0
- package/components/typography/Code.vue.d.ts +160 -0
- package/components/typography/Code.vue.js +74 -0
- package/components/typography/Code.vue2.js +4 -0
- package/components/typography/H1.vue.d.ts +151 -0
- package/components/typography/H1.vue.js +55 -0
- package/components/typography/H1.vue2.js +4 -0
- package/components/typography/H2.vue.d.ts +151 -0
- package/components/typography/H2.vue.js +55 -0
- package/components/typography/H2.vue2.js +4 -0
- package/components/typography/H3.vue.d.ts +151 -0
- package/components/typography/H3.vue.js +55 -0
- package/components/typography/H3.vue2.js +4 -0
- package/components/typography/H4.vue.d.ts +151 -0
- package/components/typography/H4.vue.js +55 -0
- package/components/typography/H4.vue2.js +4 -0
- package/components/typography/H5.vue.d.ts +151 -0
- package/components/typography/H5.vue.js +55 -0
- package/components/typography/H5.vue2.js +4 -0
- package/components/typography/H6.vue.d.ts +151 -0
- package/components/typography/H6.vue.js +55 -0
- package/components/typography/H6.vue2.js +4 -0
- package/components/typography/Label.vue.d.ts +160 -0
- package/components/typography/Label.vue.js +61 -0
- package/components/typography/Label.vue2.js +4 -0
- package/components/typography/List.vue.d.ts +123 -0
- package/components/typography/List.vue.js +60 -0
- package/components/typography/List.vue2.js +4 -0
- package/components/typography/P.vue.d.ts +151 -0
- package/components/typography/P.vue.js +55 -0
- package/components/typography/P.vue2.js +4 -0
- package/components/typography/Span.vue.d.ts +151 -0
- package/components/typography/Span.vue.js +55 -0
- package/components/typography/Span.vue2.js +4 -0
- package/config.js +2 -14
- package/exports/composables.d.ts +1 -0
- package/exports/icons.d.ts +2 -1
- package/exports/toast.d.ts +4 -0
- package/exports/types.d.ts +56 -3
- package/exports/typography.d.ts +12 -0
- package/exports/ui.d.ts +2 -0
- package/exports/utils.d.ts +3 -0
- package/icons/Alert.vue.js +31 -0
- package/icons/AlertCircle.vue.js +31 -0
- package/icons/Archive.vue.js +33 -0
- package/icons/ArrowDown.vue.js +26 -0
- package/icons/ArrowLeft.vue.js +26 -0
- package/icons/ArrowRight.vue.js +26 -0
- package/icons/ArrowUp.vue.js +26 -0
- package/icons/AtSign.vue.js +30 -0
- package/icons/Bell.vue.js +26 -0
- package/icons/Bold.vue.js +20 -0
- package/icons/Bookmark.vue.js +25 -0
- package/icons/Camera.vue.js +30 -0
- package/icons/Check.vue.js +20 -0
- package/icons/CheckCircle.vue.js +26 -0
- package/icons/CheckSquare.vue.js +26 -0
- package/icons/ChevronDown.vue.js +20 -0
- package/icons/ChevronLeft.vue.js +25 -0
- package/icons/ChevronRight.vue.js +25 -0
- package/icons/ChevronUp.vue.js +25 -0
- package/icons/Circle.vue.js +29 -0
- package/icons/Clock.vue.js +30 -0
- package/icons/Close.vue.js +20 -0
- package/icons/Cloud.vue.js +25 -0
- package/icons/CloudDownload.vue.js +27 -0
- package/icons/CloudUpload.vue.js +27 -0
- package/icons/Code.vue.js +26 -0
- package/icons/Command.vue.js +26 -0
- package/icons/Copy.vue.js +33 -0
- package/icons/CreditCard.vue.js +32 -0
- package/icons/Database.vue.js +32 -0
- package/icons/Download.vue.js +27 -0
- package/icons/Edit.vue.js +26 -0
- package/icons/ExternalLink.vue.js +27 -0
- package/icons/Eye.vue.js +30 -0
- package/icons/EyeOff.vue.js +26 -0
- package/icons/FastForward.vue.js +26 -0
- package/icons/File.vue.js +26 -0
- package/icons/FileAudio.vue.js +17 -0
- package/icons/FileImage.vue.js +27 -0
- package/icons/FilePdf.vue.js +17 -0
- package/icons/FileText.vue.js +17 -0
- package/icons/FileVideo.vue.js +27 -0
- package/icons/FileZip.vue.js +17 -0
- package/icons/Filter.vue.js +25 -0
- package/icons/Folder.vue.js +25 -0
- package/icons/FolderOpen.vue.js +25 -0
- package/icons/FolderPlus.vue.js +27 -0
- package/icons/Grid.vue.js +33 -0
- package/icons/Hamburger.vue.js +24 -0
- package/icons/Hash.vue.js +17 -0
- package/icons/Heart.vue.js +25 -0
- package/icons/HelpCircle.vue.js +31 -0
- package/icons/Highlight.vue.js +20 -0
- package/icons/Home.vue.js +26 -0
- package/icons/Image.vue.js +38 -0
- package/icons/Inbox.vue.js +26 -0
- package/icons/Info.vue.js +31 -0
- package/icons/Italic.vue.js +24 -0
- package/icons/Key.vue.js +31 -0
- package/icons/Layout.vue.js +33 -0
- package/icons/Link.vue.js +26 -0
- package/icons/Link2.vue.js +27 -0
- package/icons/List.vue.js +17 -0
- package/icons/Loading.vue.js +33 -0
- package/icons/Lock.vue.js +33 -0
- package/icons/LogIn.vue.js +27 -0
- package/icons/LogOut.vue.js +27 -0
- package/icons/Mail.vue.js +32 -0
- package/icons/Maximize.vue.js +25 -0
- package/icons/Menu.vue.js +42 -0
- package/icons/MessageCircle.vue.js +25 -0
- package/icons/MessageSquare.vue.js +25 -0
- package/icons/Mic.vue.js +17 -0
- package/icons/MicOff.vue.js +17 -0
- package/icons/Minimize.vue.js +25 -0
- package/icons/Minus.vue.js +25 -0
- package/icons/Moon.vue.js +24 -0
- package/icons/MoreHorizontal.vue.js +39 -0
- package/icons/MoreVertical.vue.js +39 -0
- package/icons/Move.vue.js +17 -0
- package/icons/Package.vue.js +17 -0
- package/icons/Paperclip.vue.js +25 -0
- package/icons/Pause.vue.js +36 -0
- package/icons/Phone.vue.js +25 -0
- package/icons/Play.vue.js +25 -0
- package/icons/Plus.vue.js +26 -0
- package/icons/Printer.vue.js +27 -0
- package/icons/RadioButton.vue.js +34 -0
- package/icons/RefreshCw.vue.js +17 -0
- package/icons/Repeat.vue.js +17 -0
- package/icons/Rewind.vue.js +26 -0
- package/icons/RotateCcw.vue.js +26 -0
- package/icons/RotateCw.vue.js +26 -0
- package/icons/Save.vue.js +26 -0
- package/icons/Scissors.vue.js +17 -0
- package/icons/Search.vue.js +30 -0
- package/icons/Send.vue.js +26 -0
- package/icons/Server.vue.js +17 -0
- package/icons/Settings.vue.js +30 -0
- package/icons/Share.vue.js +27 -0
- package/icons/Shield.vue.js +25 -0
- package/icons/Shuffle.vue.js +17 -0
- package/icons/Sidebar.vue.js +32 -0
- package/icons/SkipBack.vue.js +31 -0
- package/icons/SkipForward.vue.js +31 -0
- package/icons/Slider.vue.js +17 -0
- package/icons/Sliders.vue.js +17 -0
- package/icons/SortAsc.vue.js +17 -0
- package/icons/SortDesc.vue.js +17 -0
- package/icons/Square.vue.js +31 -0
- package/icons/Star.vue.js +25 -0
- package/icons/Stop.vue.js +31 -0
- package/icons/Sun.vue.js +20 -0
- package/icons/Tag.vue.js +31 -0
- package/icons/Tags.vue.js +27 -0
- package/icons/Terminal.vue.js +31 -0
- package/icons/ThumbsDown.vue.js +26 -0
- package/icons/ThumbsUp.vue.js +26 -0
- package/icons/ToggleLeft.vue.js +36 -0
- package/icons/ToggleRight.vue.js +36 -0
- package/icons/Trash.vue.js +27 -0
- package/icons/Trash2.vue.js +17 -0
- package/icons/Unlink.vue.js +17 -0
- package/icons/Unlock.vue.js +33 -0
- package/icons/Upload.vue.js +27 -0
- package/icons/User.vue.js +30 -0
- package/icons/Users.vue.js +31 -0
- package/icons/Video.vue.js +32 -0
- package/icons/VideoOff.vue.js +27 -0
- package/icons/Volume.vue.js +26 -0
- package/icons/Volume1.vue.js +26 -0
- package/icons/Volume2.vue.js +26 -0
- package/icons/VolumeMute.vue.js +25 -0
- package/icons/VolumeX.vue.js +27 -0
- package/icons/X.vue.js +26 -0
- package/icons/XCircle.vue.js +31 -0
- package/icons/Zap.vue.js +25 -0
- package/icons/ZoomIn.vue.js +17 -0
- package/icons/ZoomOut.vue.js +31 -0
- package/icons.js +280 -4
- package/package.json +6 -1
- package/ui.js +45 -7352
- package/utils/config.js +16 -0
- package/utils/margin.js +77 -0
- package/utils/padding.js +77 -0
- package/utils/typography.js +66 -0
- package/utils/useRandomId.js +10 -0
- package/veloce.css +1 -1
- package/components/icon/index.d.ts +0 -6
- package/index-Cqxg4hfC.js +0 -2928
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AccordionItem } from '../exports/types';
|
|
1
|
+
import { AccordionItem, Size } from '../exports/types';
|
|
2
2
|
import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
3
3
|
declare function __VLS_template(): {
|
|
4
4
|
attrs: Partial<{}>;
|
|
@@ -28,6 +28,14 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
|
|
|
28
28
|
type: BooleanConstructor;
|
|
29
29
|
default: boolean;
|
|
30
30
|
};
|
|
31
|
+
bordered: {
|
|
32
|
+
type: BooleanConstructor;
|
|
33
|
+
default: boolean;
|
|
34
|
+
};
|
|
35
|
+
rounded: {
|
|
36
|
+
type: () => Size | "none";
|
|
37
|
+
default: string;
|
|
38
|
+
};
|
|
31
39
|
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
|
|
32
40
|
items: {
|
|
33
41
|
type: () => AccordionItem[];
|
|
@@ -49,11 +57,21 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
|
|
|
49
57
|
type: BooleanConstructor;
|
|
50
58
|
default: boolean;
|
|
51
59
|
};
|
|
60
|
+
bordered: {
|
|
61
|
+
type: BooleanConstructor;
|
|
62
|
+
default: boolean;
|
|
63
|
+
};
|
|
64
|
+
rounded: {
|
|
65
|
+
type: () => Size | "none";
|
|
66
|
+
default: string;
|
|
67
|
+
};
|
|
52
68
|
}>> & Readonly<{}>, {
|
|
53
69
|
shadow: boolean;
|
|
54
70
|
contentClass: string;
|
|
55
71
|
headerClass: string;
|
|
56
72
|
multiple: boolean;
|
|
73
|
+
bordered: boolean;
|
|
74
|
+
rounded: "none" | Size;
|
|
57
75
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
58
76
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
59
77
|
export default _default;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { defineComponent as w, ref as x, computed as f, createElementBlock as r, openBlock as a, normalizeClass as l, Fragment as m, renderList as B, createElementVNode as c, createVNode as p, createBlock as h, createCommentVNode as y, unref as s, toDisplayString as g, withCtx as k, renderSlot as A, createTextVNode as N } from "vue";
|
|
2
|
+
import S from "../icons/ChevronDown.vue.js";
|
|
3
|
+
import b from "./icon/Icon.vue.js";
|
|
4
|
+
import { AnimatePresence as V, motion as z } from "motion-v";
|
|
5
|
+
const E = ["onClick"], I = { class: "accordion-title-main flex items-center gap-2" }, $ = { class: "accordion-title-text" }, j = {
|
|
6
|
+
key: 1,
|
|
7
|
+
class: "px-3 py-6 text-center"
|
|
8
|
+
}, P = /* @__PURE__ */ w({
|
|
9
|
+
__name: "Accordion",
|
|
10
|
+
props: {
|
|
11
|
+
items: { type: Array, required: !0 },
|
|
12
|
+
shadow: { type: Boolean, default: !1 },
|
|
13
|
+
contentClass: { type: String, default: "" },
|
|
14
|
+
headerClass: { type: String, default: "" },
|
|
15
|
+
multiple: { type: Boolean, default: !1 },
|
|
16
|
+
bordered: { type: Boolean, default: !0 },
|
|
17
|
+
rounded: { type: String, default: "sm" }
|
|
18
|
+
},
|
|
19
|
+
setup(d) {
|
|
20
|
+
const n = d, o = x({}), v = f(() => n.items.map((t, u) => ({ ...t, active: o.value[u] ?? t.active ?? !1 }))), C = (t) => {
|
|
21
|
+
const e = !(o.value[t] ?? !1);
|
|
22
|
+
n.multiple ? o.value[t] = e : e ? (Object.keys(o.value).forEach((i) => {
|
|
23
|
+
o.value[Number(i)] = !1;
|
|
24
|
+
}), o.value[t] = !0) : o.value[t] = !1;
|
|
25
|
+
}, _ = f(() => ({
|
|
26
|
+
none: "",
|
|
27
|
+
sm: "rounded",
|
|
28
|
+
md: "rounded-md",
|
|
29
|
+
lg: "rounded-lg",
|
|
30
|
+
xl: "rounded-xl"
|
|
31
|
+
}));
|
|
32
|
+
return (t, u) => (a(), r("div", {
|
|
33
|
+
class: l([[{ shadow: n.shadow, border: n.bordered }, _.value[n.rounded]], "bg-background w-full divide-y overflow-hidden"])
|
|
34
|
+
}, [
|
|
35
|
+
v.value.length ? (a(!0), r(m, { key: 0 }, B(v.value, (e, i) => (a(), r("div", {
|
|
36
|
+
key: i,
|
|
37
|
+
class: "text-sm"
|
|
38
|
+
}, [
|
|
39
|
+
c("div", {
|
|
40
|
+
class: l([[d.headerClass, { "bg-neutral-50! dark:bg-neutral-700/15!": e.active }], "relative flex justify-between gap-4 p-3 font-medium duration-100 hover:bg-neutral-100 dark:hover:bg-neutral-800"]),
|
|
41
|
+
onClick: (D) => C(i)
|
|
42
|
+
}, [
|
|
43
|
+
c("div", I, [
|
|
44
|
+
e.icon ? (a(), h(s(b), {
|
|
45
|
+
key: 0,
|
|
46
|
+
icon: e.icon,
|
|
47
|
+
class: "accordion-title-icon size-5 duration-200"
|
|
48
|
+
}, null, 8, ["icon"])) : y("", !0),
|
|
49
|
+
c("span", $, g(e.title), 1)
|
|
50
|
+
]),
|
|
51
|
+
p(s(b), {
|
|
52
|
+
icon: s(S),
|
|
53
|
+
class: l([{ "rotate-180 ": e.active }, "accordion-chevron-icon size-5 duration-200"])
|
|
54
|
+
}, null, 8, ["icon", "class"])
|
|
55
|
+
], 10, E),
|
|
56
|
+
p(s(V), null, {
|
|
57
|
+
default: k(() => [
|
|
58
|
+
e.active ? (a(), h(s(z).div, {
|
|
59
|
+
key: 0,
|
|
60
|
+
class: l([{ "bg-neutral-50! dark:bg-neutral-700/15!": e.active }, "overflow-hidden"]),
|
|
61
|
+
initial: { opacity: 0, height: 0 },
|
|
62
|
+
animate: { opacity: 1, height: "auto" },
|
|
63
|
+
exit: { opacity: 1, height: 0 },
|
|
64
|
+
transition: {
|
|
65
|
+
duration: 0.3,
|
|
66
|
+
ease: [0.4, 0, 0.2, 1],
|
|
67
|
+
opacity: { duration: 0.2 },
|
|
68
|
+
height: { duration: 0.3, ease: [0.4, 0, 0.2, 1] }
|
|
69
|
+
}
|
|
70
|
+
}, {
|
|
71
|
+
default: k(() => [
|
|
72
|
+
c("div", {
|
|
73
|
+
class: l([d.contentClass, "text-muted p-3"])
|
|
74
|
+
}, [
|
|
75
|
+
e.slot ? A(t.$slots, e.slot, { key: 0 }) : (a(), r(m, { key: 1 }, [
|
|
76
|
+
N(g(e.content), 1)
|
|
77
|
+
], 64))
|
|
78
|
+
], 2)
|
|
79
|
+
]),
|
|
80
|
+
_: 2
|
|
81
|
+
}, 1032, ["class"])) : y("", !0)
|
|
82
|
+
]),
|
|
83
|
+
_: 2
|
|
84
|
+
}, 1024)
|
|
85
|
+
]))), 128)) : (a(), r("div", j, "No items to show"))
|
|
86
|
+
], 2));
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
export {
|
|
90
|
+
P as default
|
|
91
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { defineComponent as f, computed as p, createElementBlock as o, openBlock as i, normalizeClass as g, renderSlot as l, createCommentVNode as d, toDisplayString as y } from "vue";
|
|
2
|
+
const x = { key: 1 }, v = /* @__PURE__ */ f({
|
|
3
|
+
__name: "Badge",
|
|
4
|
+
props: {
|
|
5
|
+
value: { type: [String, Number], default: "" },
|
|
6
|
+
severity: { type: String, default: "primary" },
|
|
7
|
+
size: { type: String, default: "md" },
|
|
8
|
+
dot: { type: Boolean, default: !1 }
|
|
9
|
+
},
|
|
10
|
+
setup(u) {
|
|
11
|
+
const e = u, r = {
|
|
12
|
+
primary: "bg-primary text-inverted",
|
|
13
|
+
secondary: "bg-secondary text-inverted",
|
|
14
|
+
success: "bg-success text-inverted",
|
|
15
|
+
info: "bg-info text-inverted",
|
|
16
|
+
warning: "bg-warning text-inverted",
|
|
17
|
+
error: "bg-error text-inverted",
|
|
18
|
+
neutral: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200"
|
|
19
|
+
}, m = (t, s) => {
|
|
20
|
+
if (s) {
|
|
21
|
+
const a = {
|
|
22
|
+
sm: "size-2",
|
|
23
|
+
md: "size-2.5",
|
|
24
|
+
lg: "size-3",
|
|
25
|
+
xl: "size-4"
|
|
26
|
+
};
|
|
27
|
+
return a[t] || a.md;
|
|
28
|
+
}
|
|
29
|
+
const n = {
|
|
30
|
+
sm: "min-w-4 h-4 text-xs",
|
|
31
|
+
md: "min-w-5 h-5 text-xs",
|
|
32
|
+
lg: "min-w-6 h-6 text-sm",
|
|
33
|
+
xl: "min-w-8 h-8 text-base"
|
|
34
|
+
};
|
|
35
|
+
return n[t] || n.md;
|
|
36
|
+
}, c = p(() => [r[e.severity] || r.primary, m(e.size, e.dot), e.dot ? "rounded-full" : "rounded-full flex items-center justify-center font-semibold"]);
|
|
37
|
+
return (t, s) => (i(), o("span", {
|
|
38
|
+
class: g([c.value, "flex items-center justify-center"])
|
|
39
|
+
}, [
|
|
40
|
+
t.$slots.default ? l(t.$slots, "default", { key: 0 }) : e.dot ? d("", !0) : (i(), o("span", x, y(e.value), 1)),
|
|
41
|
+
e.dot ? l(t.$slots, "default", { key: 2 }) : d("", !0)
|
|
42
|
+
], 2));
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
export {
|
|
46
|
+
v as default
|
|
47
|
+
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Component, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
2
2
|
import { Variant, Severity, Position, Size, FontWeight } from '../exports/types';
|
|
3
|
-
import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
4
3
|
declare function __VLS_template(): {
|
|
5
4
|
attrs: Partial<{}>;
|
|
6
5
|
slots: {
|
|
@@ -32,8 +31,8 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
|
|
|
32
31
|
default: string;
|
|
33
32
|
};
|
|
34
33
|
icon: {
|
|
35
|
-
type: () =>
|
|
36
|
-
default:
|
|
34
|
+
type: () => Component;
|
|
35
|
+
default: () => null;
|
|
37
36
|
};
|
|
38
37
|
iconClass: {
|
|
39
38
|
type: StringConstructor;
|
|
@@ -59,6 +58,10 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
|
|
|
59
58
|
type: BooleanConstructor;
|
|
60
59
|
default: boolean;
|
|
61
60
|
};
|
|
61
|
+
highlighted: {
|
|
62
|
+
type: BooleanConstructor;
|
|
63
|
+
default: boolean;
|
|
64
|
+
};
|
|
62
65
|
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
|
|
63
66
|
label: {
|
|
64
67
|
type: StringConstructor;
|
|
@@ -81,8 +84,8 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
|
|
|
81
84
|
default: string;
|
|
82
85
|
};
|
|
83
86
|
icon: {
|
|
84
|
-
type: () =>
|
|
85
|
-
default:
|
|
87
|
+
type: () => Component;
|
|
88
|
+
default: () => null;
|
|
86
89
|
};
|
|
87
90
|
iconClass: {
|
|
88
91
|
type: StringConstructor;
|
|
@@ -108,19 +111,24 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
|
|
|
108
111
|
type: BooleanConstructor;
|
|
109
112
|
default: boolean;
|
|
110
113
|
};
|
|
114
|
+
highlighted: {
|
|
115
|
+
type: BooleanConstructor;
|
|
116
|
+
default: boolean;
|
|
117
|
+
};
|
|
111
118
|
}>> & Readonly<{}>, {
|
|
112
119
|
label: string;
|
|
113
|
-
|
|
114
|
-
icon: "filter" | "code" | "link" | "menu" | "video" | "circle" | "image" | "stop" | "square" | "x" | "alert" | "alert-circle" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell" | "bookmark" | "camera" | "check" | "check-circle" | "check-square" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock" | "close" | "cloud" | "cloud-download" | "cloud-upload" | "command" | "copy" | "credit-card" | "database" | "download" | "edit" | "external-link" | "eye" | "eye-off" | "fast-forward" | "file" | "file-audio" | "file-image" | "file-pdf" | "file-text" | "file-video" | "file-zip" | "folder" | "folder-open" | "folder-plus" | "grid" | "hamburger" | "hash" | "heart" | "help-circle" | "home" | "inbox" | "info" | "key" | "layout" | "link-2" | "list" | "loading" | "lock" | "log-in" | "log-out" | "mail" | "maximize" | "message-circle" | "message-square" | "mic" | "mic-off" | "minimize" | "minus" | "moon" | "more-horizontal" | "more-vertical" | "move" | "package" | "paperclip" | "pause" | "phone" | "play" | "plus" | "printer" | "radio-button" | "refresh-cw" | "repeat" | "rewind" | "rotate-ccw" | "rotate-cw" | "save" | "scissors" | "search" | "send" | "server" | "settings" | "share" | "shield" | "shuffle" | "sidebar" | "skip-back" | "skip-forward" | "slider" | "sliders" | "sort-asc" | "sort-desc" | "star" | "sun" | "tag" | "tags" | "terminal" | "thumbs-down" | "thumbs-up" | "toggle-left" | "toggle-right" | "trash" | "trash-2" | "unlink" | "unlock" | "upload" | "user" | "users" | "video-off" | "volume" | "volume-1" | "volume-2" | "volume-mute" | "volume-x" | "x-circle" | "zap" | "zoom-in" | "zoom-out";
|
|
120
|
+
icon: Component;
|
|
115
121
|
size: Size;
|
|
116
122
|
fontWeight: FontWeight;
|
|
117
123
|
rounded: boolean;
|
|
118
124
|
severity: Severity;
|
|
125
|
+
loading: boolean;
|
|
119
126
|
disabled: boolean;
|
|
120
127
|
variant: Variant;
|
|
121
128
|
iconClass: string;
|
|
122
129
|
iconPosition: Position;
|
|
123
130
|
neumorphic: boolean;
|
|
131
|
+
highlighted: boolean;
|
|
124
132
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLButtonElement>;
|
|
125
133
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
126
134
|
export default _default;
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { defineComponent as u, computed as h, createElementBlock as t, openBlock as r, normalizeClass as a, renderSlot as v, Fragment as c, createCommentVNode as n, createBlock as i, toDisplayString as x, unref as o } from "vue";
|
|
2
|
+
import k from "../icons/Loading.vue.js";
|
|
3
|
+
import s from "./icon/Icon.vue.js";
|
|
4
|
+
const p = ["disabled"], B = /* @__PURE__ */ u({
|
|
5
|
+
__name: "Button",
|
|
6
|
+
props: {
|
|
7
|
+
label: { type: String, default: "" },
|
|
8
|
+
loading: { type: Boolean, default: !1 },
|
|
9
|
+
disabled: { type: Boolean, default: !1 },
|
|
10
|
+
variant: { type: String, default: "solid" },
|
|
11
|
+
severity: { type: String, default: "primary" },
|
|
12
|
+
icon: { type: Object, default: () => null },
|
|
13
|
+
iconClass: { type: String, default: "" },
|
|
14
|
+
iconPosition: { type: String, default: "right" },
|
|
15
|
+
rounded: { type: Boolean, default: !1 },
|
|
16
|
+
size: { type: String, default: "md" },
|
|
17
|
+
fontWeight: { type: String, default: "medium" },
|
|
18
|
+
neumorphic: { type: Boolean, default: !1 },
|
|
19
|
+
highlighted: { type: Boolean, default: !1 }
|
|
20
|
+
},
|
|
21
|
+
setup(g) {
|
|
22
|
+
const e = g, d = {
|
|
23
|
+
primary: {
|
|
24
|
+
ghost: "bg-transparent text-primary hover:bg-primary/10 dark:hover:bg-neutral-800",
|
|
25
|
+
outlined: "border-primary! text-primary hover:bg-primary hover:text-inverted disabled:hover:text-primary disabled:hover:bg-primary disabled:hover:text-inverted",
|
|
26
|
+
link: "text-primary hover:underline",
|
|
27
|
+
soft: "bg-primary-light text-primary hover:bg-primary-light/80 dark:bg-primary/10 dark:text-primary dark:hover:bg-primary/20",
|
|
28
|
+
solid: "bg-primary text-inverted hover:bg-primary/70 disabled:hover:bg-primary dark:hover:bg-primary/80",
|
|
29
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
30
|
+
},
|
|
31
|
+
secondary: {
|
|
32
|
+
ghost: "bg-transparent text-secondary hover:bg-secondary/10 dark:hover:bg-neutral-800",
|
|
33
|
+
outlined: "border-secondary! text-secondary hover:bg-secondary hover:text-inverted disabled:hover:text-secondary disabled:hover:bg-secondary disabled:hover:text-inverted",
|
|
34
|
+
link: "text-secondary hover:underline",
|
|
35
|
+
soft: "bg-secondary-light text-secondary hover:bg-secondary-light/80 dark:bg-secondary/10 dark:text-secondary dark:hover:bg-secondary/20",
|
|
36
|
+
solid: "bg-secondary text-inverted hover:bg-secondary/70 disabled:hover:bg-secondary dark:hover:bg-secondary/80",
|
|
37
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
38
|
+
},
|
|
39
|
+
success: {
|
|
40
|
+
ghost: "bg-transparent text-success hover:bg-success/10 dark:hover:bg-neutral-800",
|
|
41
|
+
outlined: "border-success! text-success hover:bg-success hover:text-inverted disabled:hover:text-success disabled:hover:bg-success disabled:hover:text-inverted",
|
|
42
|
+
link: "text-success hover:underline",
|
|
43
|
+
soft: "bg-success-light text-success hover:bg-success-light/80 dark:bg-success/10 dark:text-success dark:hover:bg-success/20",
|
|
44
|
+
solid: "bg-success text-inverted hover:bg-success/70 disabled:hover:bg-success dark:hover:bg-success/80",
|
|
45
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
46
|
+
},
|
|
47
|
+
info: {
|
|
48
|
+
ghost: "bg-transparent text-info hover:bg-info/10 dark:hover:bg-neutral-800",
|
|
49
|
+
outlined: "border-info! text-info hover:bg-info hover:text-inverted disabled:hover:text-info disabled:hover:bg-info disabled:hover:text-inverted",
|
|
50
|
+
link: "text-info hover:underline",
|
|
51
|
+
soft: "bg-info-light text-info hover:bg-info-light/80 dark:bg-info/10 dark:text-info dark:hover:bg-info/20",
|
|
52
|
+
solid: "bg-info text-inverted hover:bg-info/70 disabled:hover:bg-info dark:hover:bg-info/80",
|
|
53
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
54
|
+
},
|
|
55
|
+
warning: {
|
|
56
|
+
ghost: "bg-transparent text-warning hover:bg-warning/10 dark:hover:bg-neutral-800",
|
|
57
|
+
outlined: "border-warning! text-warning hover:bg-warning hover:text-inverted disabled:hover:text-warning disabled:hover:bg-warning disabled:hover:text-inverted",
|
|
58
|
+
link: "text-warning hover:underline",
|
|
59
|
+
soft: "bg-warning-light text-warning hover:bg-warning-light/80 dark:bg-warning/10 dark:text-warning dark:hover:bg-warning/20",
|
|
60
|
+
solid: "bg-warning text-inverted hover:bg-warning/70 disabled:hover:bg-warning dark:hover:bg-warning/80",
|
|
61
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
62
|
+
},
|
|
63
|
+
error: {
|
|
64
|
+
ghost: "bg-transparent text-error hover:bg-error/10 dark:hover:bg-neutral-800",
|
|
65
|
+
outlined: "border-error! text-error hover:bg-error hover:text-inverted disabled:hover:text-error disabled:hover:bg-error disabled:hover:text-inverted",
|
|
66
|
+
link: "text-error hover:underline",
|
|
67
|
+
soft: "bg-error-light text-error hover:bg-error-light/80 dark:bg-error/10 dark:text-error dark:hover:bg-error/20",
|
|
68
|
+
solid: "bg-error text-inverted hover:bg-error/70 disabled:hover:bg-error dark:hover:bg-error/80",
|
|
69
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
70
|
+
},
|
|
71
|
+
neutral: {
|
|
72
|
+
ghost: "bg-transparent text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
|
73
|
+
outlined: "border-neutral-300! dark:border-neutral-700! text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800 disabled:hover:text-neutral-700 disabled:hover:text-inverted",
|
|
74
|
+
link: "text-neutral-700 dark:text-neutral-300 hover:underline",
|
|
75
|
+
soft: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700",
|
|
76
|
+
solid: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-100/80",
|
|
77
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
|
78
|
+
}
|
|
79
|
+
}, b = h(() => d[e.severity]?.[e.variant] || d.primary.solid);
|
|
80
|
+
return (l, y) => (r(), t("button", {
|
|
81
|
+
type: "button",
|
|
82
|
+
disabled: e.disabled || e.loading,
|
|
83
|
+
class: a([[
|
|
84
|
+
b.value,
|
|
85
|
+
{ "rounded-full": e.rounded },
|
|
86
|
+
{ "justify-center": !e.icon },
|
|
87
|
+
{ "px-2 py-1 text-sm": e.size === "sm", "px-2.5 py-1.5 text-sm": e.size === "md", "px-3 py-2 text-base": e.size === "lg", "px-3.5 py-2.5 text-lg": e.size === "xl" },
|
|
88
|
+
{ "font-normal": e.fontWeight === "normal", "font-medium": e.fontWeight === "medium", "font-semibold": e.fontWeight === "semibold", "font-bold": e.fontWeight === "bold" },
|
|
89
|
+
{ neumorphic: e.neumorphic },
|
|
90
|
+
{ "bg-highlight": e.highlighted }
|
|
91
|
+
], "flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent transition-all duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"])
|
|
92
|
+
}, [
|
|
93
|
+
l.$slots.default ? v(l.$slots, "default", { key: 0 }, void 0, !0) : (r(), t(c, { key: 1 }, [
|
|
94
|
+
e.label ? (r(), t("span", {
|
|
95
|
+
key: 0,
|
|
96
|
+
class: a({ "order-2": e.iconPosition === "left" })
|
|
97
|
+
}, x(e.label), 3)) : n("", !0),
|
|
98
|
+
e.icon && !e.loading ? (r(), i(o(s), {
|
|
99
|
+
key: 1,
|
|
100
|
+
icon: e.icon,
|
|
101
|
+
class: a([e.iconClass, "size-5 text-current duration-200"])
|
|
102
|
+
}, null, 8, ["icon", "class"])) : n("", !0),
|
|
103
|
+
e.loading ? (r(), i(o(s), {
|
|
104
|
+
key: 2,
|
|
105
|
+
icon: o(k),
|
|
106
|
+
class: "size-5 text-current duration-200"
|
|
107
|
+
}, null, 8, ["icon"])) : n("", !0)
|
|
108
|
+
], 64))
|
|
109
|
+
], 10, p));
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
export {
|
|
113
|
+
B as default
|
|
114
|
+
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { DefineComponent, ExtractPropTypes, PropType, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
1
|
+
import { Component, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
|
|
3
2
|
type CheckboxSize = "sm" | "md" | "lg";
|
|
4
3
|
type CheckboxVariant = "primary" | "secondary" | "success" | "info" | "error" | "warning";
|
|
5
4
|
declare const _default: DefineComponent<ExtractPropTypes<{
|
|
@@ -24,8 +23,8 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
24
23
|
default: string;
|
|
25
24
|
};
|
|
26
25
|
icon: {
|
|
27
|
-
type: () =>
|
|
28
|
-
default: string
|
|
26
|
+
type: () => Component;
|
|
27
|
+
default: () => DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
|
|
29
28
|
};
|
|
30
29
|
disabled: {
|
|
31
30
|
type: BooleanConstructor;
|
|
@@ -59,8 +58,8 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
59
58
|
default: string;
|
|
60
59
|
};
|
|
61
60
|
icon: {
|
|
62
|
-
type: () =>
|
|
63
|
-
default: string
|
|
61
|
+
type: () => Component;
|
|
62
|
+
default: () => DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
|
|
64
63
|
};
|
|
65
64
|
disabled: {
|
|
66
65
|
type: BooleanConstructor;
|
|
@@ -74,7 +73,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
74
73
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
75
74
|
}>, {
|
|
76
75
|
label: string;
|
|
77
|
-
icon:
|
|
76
|
+
icon: Component;
|
|
78
77
|
size: CheckboxSize;
|
|
79
78
|
disabled: boolean;
|
|
80
79
|
variant: CheckboxVariant;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { defineComponent as b, mergeModels as u, useModel as m, computed as n, createElementBlock as g, openBlock as c, normalizeClass as s, createElementVNode as d, createBlock as v, createCommentVNode as x, unref as p, toDisplayString as h } from "vue";
|
|
2
|
+
import f from "../icons/Check.vue.js";
|
|
3
|
+
import y from "./icon/Icon.vue.js";
|
|
4
|
+
const S = /* @__PURE__ */ b({
|
|
5
|
+
__name: "Checkbox",
|
|
6
|
+
props: /* @__PURE__ */ u({
|
|
7
|
+
label: { type: String, default: "" },
|
|
8
|
+
labelClass: { type: String, default: "" },
|
|
9
|
+
checkboxClass: { type: String, default: "" },
|
|
10
|
+
size: { type: String, default: "md" },
|
|
11
|
+
variant: { type: String, default: "primary" },
|
|
12
|
+
icon: { type: Object, default: () => f },
|
|
13
|
+
disabled: { type: Boolean, default: !1 }
|
|
14
|
+
}, {
|
|
15
|
+
modelValue: { type: Boolean, required: !0 },
|
|
16
|
+
modelModifiers: {}
|
|
17
|
+
}),
|
|
18
|
+
emits: ["update:modelValue"],
|
|
19
|
+
setup(e) {
|
|
20
|
+
const r = e, o = m(e, "modelValue"), a = n(() => ({
|
|
21
|
+
sm: {
|
|
22
|
+
checkbox: "size-4",
|
|
23
|
+
icon: "size-3",
|
|
24
|
+
gap: "gap-1.5",
|
|
25
|
+
text: "text-sm"
|
|
26
|
+
},
|
|
27
|
+
md: {
|
|
28
|
+
checkbox: "size-5",
|
|
29
|
+
icon: "size-5",
|
|
30
|
+
gap: "gap-2",
|
|
31
|
+
text: "text-base"
|
|
32
|
+
},
|
|
33
|
+
lg: {
|
|
34
|
+
checkbox: "size-6",
|
|
35
|
+
icon: "size-6",
|
|
36
|
+
gap: "gap-2.5",
|
|
37
|
+
text: "text-lg"
|
|
38
|
+
}
|
|
39
|
+
})[r.size]), t = n(() => ({
|
|
40
|
+
primary: {
|
|
41
|
+
bg: "bg-primary",
|
|
42
|
+
border: "border-primary",
|
|
43
|
+
text: "text-white",
|
|
44
|
+
hover: "hover:border-primary/70"
|
|
45
|
+
},
|
|
46
|
+
secondary: {
|
|
47
|
+
bg: "bg-secondary",
|
|
48
|
+
border: "border-secondary",
|
|
49
|
+
text: "text-white",
|
|
50
|
+
hover: "hover:border-secondary/70"
|
|
51
|
+
},
|
|
52
|
+
success: {
|
|
53
|
+
bg: "bg-success",
|
|
54
|
+
border: "border-success",
|
|
55
|
+
text: "text-white",
|
|
56
|
+
hover: "hover:border-success/70"
|
|
57
|
+
},
|
|
58
|
+
info: {
|
|
59
|
+
bg: "bg-info",
|
|
60
|
+
border: "border-info",
|
|
61
|
+
text: "text-white",
|
|
62
|
+
hover: "hover:border-info/70"
|
|
63
|
+
},
|
|
64
|
+
warning: {
|
|
65
|
+
bg: "bg-warning",
|
|
66
|
+
border: "border-warning",
|
|
67
|
+
text: "text-white",
|
|
68
|
+
hover: "hover:border-warning/70"
|
|
69
|
+
},
|
|
70
|
+
error: {
|
|
71
|
+
bg: "bg-error",
|
|
72
|
+
border: "border-error",
|
|
73
|
+
text: "text-white",
|
|
74
|
+
hover: "hover:border-error/70"
|
|
75
|
+
}
|
|
76
|
+
})[r.variant]);
|
|
77
|
+
return (i, l) => (c(), g("div", {
|
|
78
|
+
class: s([[a.value.gap, r.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"], "flex w-fit select-none items-center"]),
|
|
79
|
+
onClick: l[0] || (l[0] = (k) => r.disabled ? null : o.value = !o.value)
|
|
80
|
+
}, [
|
|
81
|
+
d("div", {
|
|
82
|
+
class: s([[a.value.checkbox, o.value ? [t.value.bg, t.value.border] : [t.value.border, r.disabled ? "opacity-50" : t.value.hover], e.checkboxClass], "m-0 flex items-center justify-center rounded-sm border-2 duration-200"])
|
|
83
|
+
}, [
|
|
84
|
+
o.value ? (c(), v(p(y), {
|
|
85
|
+
key: 0,
|
|
86
|
+
icon: e.icon,
|
|
87
|
+
class: s(`${a.value.icon} ${t.value.text}`)
|
|
88
|
+
}, null, 8, ["icon", "class"])) : x("", !0)
|
|
89
|
+
], 2),
|
|
90
|
+
d("div", {
|
|
91
|
+
class: s([e.labelClass, a.value.text])
|
|
92
|
+
}, h(e.label), 3)
|
|
93
|
+
], 2));
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
export {
|
|
97
|
+
S as default
|
|
98
|
+
};
|
package/components/Chip.vue.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Component, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
2
2
|
import { Severity, Size } from '../exports/types';
|
|
3
|
-
import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
4
3
|
declare function __VLS_template(): {
|
|
5
4
|
attrs: Partial<{}>;
|
|
6
5
|
slots: {
|
|
@@ -16,8 +15,8 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
|
|
|
16
15
|
default: string;
|
|
17
16
|
};
|
|
18
17
|
icon: {
|
|
19
|
-
type: () =>
|
|
20
|
-
default:
|
|
18
|
+
type: () => Component;
|
|
19
|
+
default: () => null;
|
|
21
20
|
};
|
|
22
21
|
removable: {
|
|
23
22
|
type: BooleanConstructor;
|
|
@@ -43,8 +42,8 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
|
|
|
43
42
|
default: string;
|
|
44
43
|
};
|
|
45
44
|
icon: {
|
|
46
|
-
type: () =>
|
|
47
|
-
default:
|
|
45
|
+
type: () => Component;
|
|
46
|
+
default: () => null;
|
|
48
47
|
};
|
|
49
48
|
removable: {
|
|
50
49
|
type: BooleanConstructor;
|
|
@@ -66,7 +65,7 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
|
|
|
66
65
|
onRemove?: (() => any) | undefined;
|
|
67
66
|
}>, {
|
|
68
67
|
label: string;
|
|
69
|
-
icon:
|
|
68
|
+
icon: Component;
|
|
70
69
|
size: Size;
|
|
71
70
|
rounded: boolean;
|
|
72
71
|
severity: Severity;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { defineComponent as f, computed as y, createElementBlock as r, openBlock as t, normalizeClass as x, createBlock as b, createCommentVNode as n, unref as o, renderSlot as g, createTextVNode as v, toDisplayString as k, createVNode as C } from "vue";
|
|
2
|
+
import _ from "../icons/Close.vue.js";
|
|
3
|
+
import i from "./icon/Icon.vue.js";
|
|
4
|
+
const h = { key: 1 }, N = /* @__PURE__ */ f({
|
|
5
|
+
__name: "Chip",
|
|
6
|
+
props: {
|
|
7
|
+
label: { type: String, default: "" },
|
|
8
|
+
icon: { type: Object, default: () => null },
|
|
9
|
+
removable: { type: Boolean, default: !1 },
|
|
10
|
+
severity: { type: String, default: "primary" },
|
|
11
|
+
size: { type: String, default: "md" },
|
|
12
|
+
rounded: { type: Boolean, default: !1 }
|
|
13
|
+
},
|
|
14
|
+
emits: ["remove"],
|
|
15
|
+
setup(c, { emit: d }) {
|
|
16
|
+
const e = c, u = d, s = {
|
|
17
|
+
primary: "bg-primary text-inverted",
|
|
18
|
+
secondary: "bg-secondary text-inverted",
|
|
19
|
+
success: "bg-success text-inverted",
|
|
20
|
+
info: "bg-info text-inverted",
|
|
21
|
+
warning: "bg-warning text-inverted",
|
|
22
|
+
error: "bg-error text-inverted",
|
|
23
|
+
neutral: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200"
|
|
24
|
+
}, l = {
|
|
25
|
+
sm: "px-2 py-0.5 text-xs",
|
|
26
|
+
md: "px-2.5 py-1 text-sm",
|
|
27
|
+
lg: "px-3 py-1.5 text-base",
|
|
28
|
+
xl: "px-4 py-2 text-lg"
|
|
29
|
+
}, m = y(() => [s[e.severity] || s.primary, l[e.size] || l.md, { "rounded-full": e.rounded }]), p = () => {
|
|
30
|
+
u("remove");
|
|
31
|
+
};
|
|
32
|
+
return (a, z) => (t(), r("div", {
|
|
33
|
+
class: x([m.value, "inline-flex items-center gap-1.5 rounded font-medium"])
|
|
34
|
+
}, [
|
|
35
|
+
e.icon ? (t(), b(o(i), {
|
|
36
|
+
key: 0,
|
|
37
|
+
icon: e.icon,
|
|
38
|
+
class: "size-4"
|
|
39
|
+
}, null, 8, ["icon"])) : n("", !0),
|
|
40
|
+
e.label || a.$slots.default ? (t(), r("span", h, [
|
|
41
|
+
g(a.$slots, "default", {}, () => [
|
|
42
|
+
v(k(e.label), 1)
|
|
43
|
+
])
|
|
44
|
+
])) : n("", !0),
|
|
45
|
+
e.removable ? (t(), r("button", {
|
|
46
|
+
key: 2,
|
|
47
|
+
type: "button",
|
|
48
|
+
class: "ml-0.5 flex items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10",
|
|
49
|
+
onClick: p
|
|
50
|
+
}, [
|
|
51
|
+
C(o(i), {
|
|
52
|
+
icon: o(_),
|
|
53
|
+
class: "size-3.5"
|
|
54
|
+
}, null, 8, ["icon"])
|
|
55
|
+
])) : n("", !0)
|
|
56
|
+
], 2));
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
export {
|
|
60
|
+
N as default
|
|
61
|
+
};
|