@faasri/ui 0.0.1
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/dist/chevron-down-CjHQXiTz.js +16 -0
- package/dist/chevron-right-DG0VFI4B.js +14 -0
- package/dist/components/button/VButton.vue.d.ts +56 -0
- package/dist/components/button/VButton.vue.d.ts.map +1 -0
- package/dist/components/form/VInputText.vue.d.ts +34 -0
- package/dist/components/form/VInputText.vue.d.ts.map +1 -0
- package/dist/components/icon/VIcon.vue.d.ts +13 -0
- package/dist/components/icon/VIcon.vue.d.ts.map +1 -0
- package/dist/components/icon/index.d.ts +3 -0
- package/dist/components/icon/index.d.ts.map +1 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.mjs +300 -0
- package/dist/index.umd.cjs +60 -0
- package/dist/search-CiEBIdtM.js +16 -0
- package/dist/spinner-v2pYCG5W.js +29 -0
- package/dist/styles.css +1 -0
- package/package.json +50 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const r = `<svg\r
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"\r
|
|
3
|
+
viewBox="8 4 10 16"\r
|
|
4
|
+
fill="none"\r
|
|
5
|
+
stroke="currentColor"\r
|
|
6
|
+
stroke-width="var(--icon-stroke, 2)"\r
|
|
7
|
+
stroke-linecap="round"\r
|
|
8
|
+
stroke-linejoin="round"\r
|
|
9
|
+
transform="rotate(90 13 12)"\r
|
|
10
|
+
>\r
|
|
11
|
+
<polyline points="10 6 16 12 10 18" />\r
|
|
12
|
+
</svg>\r
|
|
13
|
+
`;
|
|
14
|
+
export {
|
|
15
|
+
r as default
|
|
16
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
const n = `<svg\r
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"\r
|
|
3
|
+
viewBox="9 5 8 14"\r
|
|
4
|
+
fill="none"\r
|
|
5
|
+
stroke="currentColor"\r
|
|
6
|
+
stroke-width="var(--icon-stroke, 2)"\r
|
|
7
|
+
stroke-linecap="round"\r
|
|
8
|
+
stroke-linejoin="round"\r
|
|
9
|
+
>\r
|
|
10
|
+
<polyline points="10 6 16 12 10 18" />\r
|
|
11
|
+
</svg>`;
|
|
12
|
+
export {
|
|
13
|
+
n as default
|
|
14
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
type ButtonSeverity = "primary" | "secondary" | "info" | "warning" | "error" | "success";
|
|
2
|
+
type ButtonVariantModel = "solid" | "text" | "outlined" | "ghost";
|
|
3
|
+
type ButtonSize = "sm" | "md" | "lg";
|
|
4
|
+
type ButtonIconPosition = "left" | "right" | "only";
|
|
5
|
+
type IconWeight = "thin" | "regular" | "bold" | number;
|
|
6
|
+
type StyleVars = Record<string, string | number>;
|
|
7
|
+
type ButtonVariant = ButtonVariantModel | ButtonSeverity;
|
|
8
|
+
type __VLS_Props = {
|
|
9
|
+
as?: "button" | "a";
|
|
10
|
+
href?: string;
|
|
11
|
+
target?: string;
|
|
12
|
+
rel?: string;
|
|
13
|
+
variant?: ButtonVariant;
|
|
14
|
+
severity?: ButtonSeverity;
|
|
15
|
+
raised?: boolean;
|
|
16
|
+
rounded?: boolean;
|
|
17
|
+
size?: ButtonSize;
|
|
18
|
+
icon?: string;
|
|
19
|
+
iconPosition?: ButtonIconPosition;
|
|
20
|
+
iconWeight?: IconWeight;
|
|
21
|
+
label?: string;
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
loading?: boolean;
|
|
24
|
+
type?: "button" | "submit" | "reset";
|
|
25
|
+
vars?: StyleVars;
|
|
26
|
+
};
|
|
27
|
+
declare function __VLS_template(): {
|
|
28
|
+
attrs: Partial<{}>;
|
|
29
|
+
slots: {
|
|
30
|
+
icon?(_: {}): any;
|
|
31
|
+
default?(_: {}): any;
|
|
32
|
+
};
|
|
33
|
+
refs: {};
|
|
34
|
+
rootEl: any;
|
|
35
|
+
};
|
|
36
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
37
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
38
|
+
size: ButtonSize;
|
|
39
|
+
as: "button" | "a";
|
|
40
|
+
type: "button" | "submit" | "reset";
|
|
41
|
+
variant: ButtonVariant;
|
|
42
|
+
severity: ButtonSeverity;
|
|
43
|
+
raised: boolean;
|
|
44
|
+
rounded: boolean;
|
|
45
|
+
iconPosition: ButtonIconPosition;
|
|
46
|
+
disabled: boolean;
|
|
47
|
+
loading: boolean;
|
|
48
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
49
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
50
|
+
export default _default;
|
|
51
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
52
|
+
new (): {
|
|
53
|
+
$slots: S;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=VButton.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/button/VButton.vue"],"names":[],"mappings":"AA6MA,KAAK,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AACzF,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;AAGlE,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AACpD,KAAK,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AACvD,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AACjD,KAAK,aAAa,GAAG,kBAAkB,GAAG,cAAc,CAAC;AAazD,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAErC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AA2HJ,iBAAS,cAAc;WAiHT,OAAO,IAA6B;;sBAXvB,GAAG;yBACA,GAAG;;;;EAehC;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;UAnRV,UAAU;QATZ,QAAQ,GAAG,GAAG;UAmBZ,QAAQ,GAAG,QAAQ,GAAG,OAAO;aAd1B,aAAa;cACZ,cAAc;YAChB,OAAO;aACN,OAAO;kBAIF,kBAAkB;cAKtB,OAAO;aACR,OAAO;6EAiRnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
type InputVariant = "primary" | "secondary" | "ghost";
|
|
2
|
+
type InputSize = "sm" | "md" | "lg";
|
|
3
|
+
type InputType = "text" | "email" | "password" | "search" | "tel" | "url" | "number";
|
|
4
|
+
type ValidateOn = "input" | "blur" | "submit" | "never";
|
|
5
|
+
type __VLS_Props = {
|
|
6
|
+
modelValue?: string | number;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
variant?: InputVariant;
|
|
9
|
+
size?: InputSize;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
invalid?: boolean;
|
|
12
|
+
message?: string;
|
|
13
|
+
validateOn?: ValidateOn;
|
|
14
|
+
name?: string;
|
|
15
|
+
id?: string;
|
|
16
|
+
type?: InputType;
|
|
17
|
+
};
|
|
18
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
19
|
+
"update:modelValue": (value: string | number) => any;
|
|
20
|
+
"invalid-change": (invalid: boolean) => any;
|
|
21
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
22
|
+
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
23
|
+
"onInvalid-change"?: ((invalid: boolean) => any) | undefined;
|
|
24
|
+
}>, {
|
|
25
|
+
size: InputSize;
|
|
26
|
+
type: InputType;
|
|
27
|
+
variant: InputVariant;
|
|
28
|
+
disabled: boolean;
|
|
29
|
+
invalid: boolean;
|
|
30
|
+
message: string;
|
|
31
|
+
validateOn: ValidateOn;
|
|
32
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
33
|
+
export default _default;
|
|
34
|
+
//# sourceMappingURL=VInputText.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VInputText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/VInputText.vue"],"names":[],"mappings":"AAkPA,KAAK,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACtD,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;AACrF,KAAK,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;;;;;;;;UAbO,SAAS;UAYT,SAAS;aAbN,YAAY;cAGX,OAAO;aAER,OAAO;aAEP,MAAM;gBAEH,UAAU;;AAuQ3B,wBAQG"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
type IconSize = "sm" | "md" | "lg" | number;
|
|
2
|
+
type IconWeight = "thin" | "regular" | "bold" | number;
|
|
3
|
+
type __VLS_Props = {
|
|
4
|
+
name: string;
|
|
5
|
+
size?: IconSize;
|
|
6
|
+
weight?: IconWeight;
|
|
7
|
+
};
|
|
8
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
9
|
+
size: IconSize;
|
|
10
|
+
weight: IconWeight;
|
|
11
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
|
|
12
|
+
export default _default;
|
|
13
|
+
//# sourceMappingURL=VIcon.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/icon/VIcon.vue"],"names":[],"mappings":"AAmGA,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5C,KAAK,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvD,KAAK,WAAW,GAAG;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;;UAFO,QAAQ;YACN,UAAU;;AAiHvB,wBAQG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,aAAa,CAAC;AAEhC,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,oBAAoB,CAAC"}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
import { defineComponent as x, computed as o, ref as P, watchEffect as M, createElementBlock as y, openBlock as p, normalizeStyle as j, useAttrs as A, useSlots as C, createBlock as $, resolveDynamicComponent as E, mergeProps as T, withCtx as L, createCommentVNode as V, renderSlot as N, createTextVNode as D, toDisplayString as W, watch as H, createElementVNode as R } from "vue";
|
|
2
|
+
const U = ["innerHTML"], F = /* @__PURE__ */ x({
|
|
3
|
+
__name: "VIcon",
|
|
4
|
+
props: {
|
|
5
|
+
name: {},
|
|
6
|
+
size: { default: "md" },
|
|
7
|
+
weight: { default: "regular" }
|
|
8
|
+
},
|
|
9
|
+
setup(r) {
|
|
10
|
+
const c = r, s = {
|
|
11
|
+
sm: "0.75em",
|
|
12
|
+
md: "0.875em",
|
|
13
|
+
lg: "1em"
|
|
14
|
+
}, d = o(() => typeof c.size == "number" ? `${c.size}px` : s[c.size] ?? s.md), t = {
|
|
15
|
+
thin: 1.5,
|
|
16
|
+
regular: 2,
|
|
17
|
+
bold: 2.5
|
|
18
|
+
}, f = o(() => typeof c.weight == "number" ? c.weight : t[c.weight] ?? 2), m = P(""), h = /* @__PURE__ */ Object.assign({
|
|
19
|
+
"../../assets/icons/chevron-down.svg": () => import("./chevron-down-CjHQXiTz.js").then((l) => l.default),
|
|
20
|
+
"../../assets/icons/chevron-right.svg": () => import("./chevron-right-DG0VFI4B.js").then((l) => l.default),
|
|
21
|
+
"../../assets/icons/search.svg": () => import("./search-CiEBIdtM.js").then((l) => l.default),
|
|
22
|
+
"../../assets/icons/spinner.svg": () => import("./spinner-v2pYCG5W.js").then((l) => l.default)
|
|
23
|
+
});
|
|
24
|
+
return M(async () => {
|
|
25
|
+
const l = `../../assets/icons/${c.name}.svg`, u = h[l];
|
|
26
|
+
if (!u) {
|
|
27
|
+
m.value = "";
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
m.value = await u();
|
|
31
|
+
}), (l, u) => (p(), y("span", {
|
|
32
|
+
class: "v-icon",
|
|
33
|
+
style: j({
|
|
34
|
+
width: d.value,
|
|
35
|
+
height: d.value,
|
|
36
|
+
"--icon-stroke": f.value
|
|
37
|
+
}),
|
|
38
|
+
"aria-hidden": "true",
|
|
39
|
+
innerHTML: m.value
|
|
40
|
+
}, null, 12, U));
|
|
41
|
+
}
|
|
42
|
+
}), q = (r, c) => {
|
|
43
|
+
const s = r.__vccOpts || r;
|
|
44
|
+
for (const [d, t] of c)
|
|
45
|
+
s[d] = t;
|
|
46
|
+
return s;
|
|
47
|
+
}, I = /* @__PURE__ */ q(F, [["__scopeId", "data-v-1c8cc2b0"]]), G = {
|
|
48
|
+
key: 0,
|
|
49
|
+
class: "v-btn__icon",
|
|
50
|
+
"aria-hidden": "true"
|
|
51
|
+
}, J = {
|
|
52
|
+
key: 1,
|
|
53
|
+
class: "v-btn__label"
|
|
54
|
+
}, O = "spinner", Z = /* @__PURE__ */ x({
|
|
55
|
+
inheritAttrs: !1,
|
|
56
|
+
__name: "VButton",
|
|
57
|
+
props: {
|
|
58
|
+
as: { default: "button" },
|
|
59
|
+
href: {},
|
|
60
|
+
target: {},
|
|
61
|
+
rel: {},
|
|
62
|
+
variant: { default: "solid" },
|
|
63
|
+
severity: { default: "primary" },
|
|
64
|
+
raised: { type: Boolean, default: !1 },
|
|
65
|
+
rounded: { type: Boolean, default: !1 },
|
|
66
|
+
size: { default: "md" },
|
|
67
|
+
icon: {},
|
|
68
|
+
iconPosition: { default: "left" },
|
|
69
|
+
iconWeight: {},
|
|
70
|
+
label: {},
|
|
71
|
+
disabled: { type: Boolean, default: !1 },
|
|
72
|
+
loading: { type: Boolean, default: !1 },
|
|
73
|
+
type: { default: "button" },
|
|
74
|
+
vars: {}
|
|
75
|
+
},
|
|
76
|
+
setup(r) {
|
|
77
|
+
const c = /* @__PURE__ */ new Set([
|
|
78
|
+
"primary",
|
|
79
|
+
"secondary",
|
|
80
|
+
"info",
|
|
81
|
+
"success",
|
|
82
|
+
"warning",
|
|
83
|
+
"error"
|
|
84
|
+
]), s = A(), d = C(), t = r, f = o(() => !!(t.disabled || t.loading)), m = o(() => !!(t.icon || d.icon)), h = o(() => t.iconPosition === "only" || m.value), l = o(
|
|
85
|
+
() => !!(t.loading && !h.value && t.iconPosition !== "only")
|
|
86
|
+
), u = o(() => {
|
|
87
|
+
const e = { thin: 1.5, regular: 2, bold: 2.5 };
|
|
88
|
+
if (t.iconWeight != null)
|
|
89
|
+
return typeof t.iconWeight == "number" ? t.iconWeight : e[t.iconWeight];
|
|
90
|
+
}), g = /* @__PURE__ */ new Set(["solid", "text", "outlined", "ghost"]), b = o(() => {
|
|
91
|
+
const e = t.variant, n = t.severity;
|
|
92
|
+
return e && c.has(e) ? { model: "solid", severity: e } : e && g.has(e) ? { model: e, severity: n } : { model: "solid", severity: n };
|
|
93
|
+
}), B = o(() => [
|
|
94
|
+
"v-btn",
|
|
95
|
+
`v-btn--${t.size}`,
|
|
96
|
+
`v-btn--variant-${b.value.model}`,
|
|
97
|
+
`v-btn--severity-${b.value.severity}`,
|
|
98
|
+
t.raised && "v-btn--raised",
|
|
99
|
+
t.rounded && "v-btn--rounded",
|
|
100
|
+
h.value && `v-btn--icon-${t.iconPosition}`,
|
|
101
|
+
t.loading && "v-btn--loading"
|
|
102
|
+
]), _ = o(() => {
|
|
103
|
+
const e = {};
|
|
104
|
+
if (t.vars)
|
|
105
|
+
for (const [n, i] of Object.entries(t.vars))
|
|
106
|
+
e[n.startsWith("--") ? n : `--${n}`] = String(i);
|
|
107
|
+
return u.value != null && (e["--btn-icon-stroke"] = String(u.value)), Object.keys(e).length ? e : void 0;
|
|
108
|
+
}), S = o(() => {
|
|
109
|
+
if (t.iconPosition !== "only") return;
|
|
110
|
+
const e = typeof s["aria-label"] == "string" ? s["aria-label"].trim() : "", n = t.label?.trim() || "";
|
|
111
|
+
return e || n || void 0;
|
|
112
|
+
}), k = o(() => {
|
|
113
|
+
if (t.as !== "a" || t.target !== "_blank") return t.rel || void 0;
|
|
114
|
+
const e = (t.rel || "").trim();
|
|
115
|
+
if (!e) return "noopener noreferrer";
|
|
116
|
+
const n = /\bnoopener\b/i.test(e), i = /\bnoreferrer\b/i.test(e);
|
|
117
|
+
return [e, n ? "" : "noopener", i ? "" : "noreferrer"].filter(Boolean).join(" ");
|
|
118
|
+
}), z = o(() => {
|
|
119
|
+
if (t.as === "a" && !f.value)
|
|
120
|
+
return t.href;
|
|
121
|
+
}), a = o(() => {
|
|
122
|
+
const e = s, { class: n, style: i, ...v } = e;
|
|
123
|
+
return v;
|
|
124
|
+
});
|
|
125
|
+
return (e, n) => (p(), $(E(t.as), T(a.value, {
|
|
126
|
+
href: z.value,
|
|
127
|
+
target: t.as === "a" ? t.target : void 0,
|
|
128
|
+
rel: t.as === "a" ? k.value : void 0,
|
|
129
|
+
type: t.as === "button" ? t.type : void 0,
|
|
130
|
+
disabled: t.as === "button" ? f.value : void 0,
|
|
131
|
+
"aria-disabled": f.value || void 0,
|
|
132
|
+
"aria-busy": t.loading || void 0,
|
|
133
|
+
"aria-label": S.value,
|
|
134
|
+
tabindex: t.as === "a" && f.value ? -1 : void 0,
|
|
135
|
+
class: B.value,
|
|
136
|
+
style: _.value
|
|
137
|
+
}), {
|
|
138
|
+
default: L(() => [
|
|
139
|
+
h.value ? (p(), y("span", G, [
|
|
140
|
+
t.loading ? (p(), $(I, {
|
|
141
|
+
key: 0,
|
|
142
|
+
class: "v-btn__spinner",
|
|
143
|
+
name: O
|
|
144
|
+
})) : N(e.$slots, "icon", { key: 1 }, () => [
|
|
145
|
+
t.icon ? (p(), $(I, {
|
|
146
|
+
key: 0,
|
|
147
|
+
name: t.icon,
|
|
148
|
+
weight: t.iconWeight
|
|
149
|
+
}, null, 8, ["name", "weight"])) : V("", !0)
|
|
150
|
+
])
|
|
151
|
+
])) : V("", !0),
|
|
152
|
+
t.iconPosition !== "only" ? (p(), y("span", J, [
|
|
153
|
+
l.value ? (p(), $(I, {
|
|
154
|
+
key: 0,
|
|
155
|
+
class: "v-btn__spinner",
|
|
156
|
+
name: O
|
|
157
|
+
})) : N(e.$slots, "default", { key: 1 }, () => [
|
|
158
|
+
D(W(t.label), 1)
|
|
159
|
+
])
|
|
160
|
+
])) : V("", !0)
|
|
161
|
+
]),
|
|
162
|
+
_: 3
|
|
163
|
+
}, 16, ["href", "target", "rel", "type", "disabled", "aria-disabled", "aria-busy", "aria-label", "tabindex", "class", "style"]));
|
|
164
|
+
}
|
|
165
|
+
}), K = { class: "v-inputfield" }, Q = ["id", "name", "type", "value", "placeholder", "disabled", "aria-disabled", "aria-invalid"], X = {
|
|
166
|
+
key: 0,
|
|
167
|
+
class: "v-input__message"
|
|
168
|
+
}, ee = /* @__PURE__ */ x({
|
|
169
|
+
inheritAttrs: !1,
|
|
170
|
+
__name: "VInputText",
|
|
171
|
+
props: {
|
|
172
|
+
modelValue: {},
|
|
173
|
+
placeholder: {},
|
|
174
|
+
variant: { default: "primary" },
|
|
175
|
+
size: { default: "md" },
|
|
176
|
+
disabled: { type: Boolean, default: !1 },
|
|
177
|
+
invalid: { type: Boolean, default: void 0 },
|
|
178
|
+
message: { default: "" },
|
|
179
|
+
validateOn: { default: "input" },
|
|
180
|
+
name: {},
|
|
181
|
+
id: {},
|
|
182
|
+
type: { default: "text" }
|
|
183
|
+
},
|
|
184
|
+
emits: ["update:modelValue", "invalid-change"],
|
|
185
|
+
setup(r, { emit: c }) {
|
|
186
|
+
const s = r, d = c, t = P(!1), f = P(""), m = o(() => s.invalid !== void 0 ? s.invalid : t.value), h = o(() => m.value ? s.message || f.value : ""), l = o(() => ["v-input", `v-input--${s.variant}`, `v-input--${s.size}`, m.value && "is-error"]);
|
|
187
|
+
function u(a, e = "") {
|
|
188
|
+
s.invalid === void 0 && (t.value = a, f.value = e), d("invalid-change", a);
|
|
189
|
+
}
|
|
190
|
+
function g(a) {
|
|
191
|
+
switch (a) {
|
|
192
|
+
case "number":
|
|
193
|
+
return "Only numbers are allowed.";
|
|
194
|
+
case "email":
|
|
195
|
+
return "Please enter a valid email address.";
|
|
196
|
+
case "url":
|
|
197
|
+
return "Please enter a valid URL.";
|
|
198
|
+
case "tel":
|
|
199
|
+
return "Please enter a valid phone number.";
|
|
200
|
+
default:
|
|
201
|
+
return "Invalid value.";
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
function b(a) {
|
|
205
|
+
return a.replace(/\D/g, "");
|
|
206
|
+
}
|
|
207
|
+
function B(a) {
|
|
208
|
+
let e = a.replace(/[^\d.-]/g, "");
|
|
209
|
+
e = e.replace(/(?!^)-/g, "");
|
|
210
|
+
const n = e.split(".");
|
|
211
|
+
return n.length > 2 && (e = n[0] + "." + n.slice(1).join("")), e;
|
|
212
|
+
}
|
|
213
|
+
function _(a) {
|
|
214
|
+
const e = s.type;
|
|
215
|
+
if (a === "")
|
|
216
|
+
return u(!1, ""), !0;
|
|
217
|
+
if (e === "email") {
|
|
218
|
+
const n = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a);
|
|
219
|
+
return u(!n, g(e)), n;
|
|
220
|
+
}
|
|
221
|
+
if (e === "url") {
|
|
222
|
+
const n = /^https?:\/\/\S+$/i.test(a);
|
|
223
|
+
return u(!n, g(e)), n;
|
|
224
|
+
}
|
|
225
|
+
if (e === "tel") {
|
|
226
|
+
const i = b(a).length, v = i >= 8 && i <= 12;
|
|
227
|
+
return u(!v, v ? "" : "Phone number must be 8–12 digits."), v;
|
|
228
|
+
}
|
|
229
|
+
if (e === "number") {
|
|
230
|
+
const n = /^-?\d*(\.\d*)?$/.test(a);
|
|
231
|
+
return u(!n, g(e)), n;
|
|
232
|
+
}
|
|
233
|
+
return u(!1, ""), !0;
|
|
234
|
+
}
|
|
235
|
+
function S(a) {
|
|
236
|
+
const e = a.target;
|
|
237
|
+
let n = e.value;
|
|
238
|
+
if (s.type === "tel") {
|
|
239
|
+
const i = b(n);
|
|
240
|
+
if (s.validateOn === "input") {
|
|
241
|
+
const w = i.length;
|
|
242
|
+
u(w < 8 || w > 12, "Phone number must be 8–12 digits.");
|
|
243
|
+
}
|
|
244
|
+
const v = k(i);
|
|
245
|
+
e.value = v, d("update:modelValue", i);
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
if (s.type === "number") {
|
|
249
|
+
const i = B(n);
|
|
250
|
+
e.value = i;
|
|
251
|
+
const v = i === "" ? "" : Number(i);
|
|
252
|
+
d("update:modelValue", v);
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
d("update:modelValue", n), s.validateOn === "input" && _(n);
|
|
256
|
+
}
|
|
257
|
+
function k(a) {
|
|
258
|
+
if (!a) return "";
|
|
259
|
+
let e = a, n = "";
|
|
260
|
+
e.startsWith("62") ? (n = "+62 ", e = e.slice(2)) : e.startsWith("0") && (n = "0", e = e.slice(1));
|
|
261
|
+
const i = e.slice(0, 3), v = e.slice(3, 7), w = e.slice(7, 11);
|
|
262
|
+
return n + [i, v, w].filter(Boolean).join(" ");
|
|
263
|
+
}
|
|
264
|
+
function z(a) {
|
|
265
|
+
if (s.validateOn !== "blur") return;
|
|
266
|
+
const e = a.target;
|
|
267
|
+
_(e.value);
|
|
268
|
+
}
|
|
269
|
+
return H(
|
|
270
|
+
() => s.modelValue,
|
|
271
|
+
(a) => {
|
|
272
|
+
if (s.type !== "tel") return;
|
|
273
|
+
const e = document.activeElement;
|
|
274
|
+
if (!e || e.tagName !== "INPUT") return;
|
|
275
|
+
const n = b(String(a ?? ""));
|
|
276
|
+
e.value = k(n);
|
|
277
|
+
}
|
|
278
|
+
), (a, e) => (p(), y("div", K, [
|
|
279
|
+
R("input", T(a.$attrs, {
|
|
280
|
+
id: r.id,
|
|
281
|
+
name: r.name,
|
|
282
|
+
type: r.type,
|
|
283
|
+
value: r.modelValue ?? "",
|
|
284
|
+
placeholder: r.placeholder,
|
|
285
|
+
disabled: r.disabled,
|
|
286
|
+
"aria-disabled": r.disabled || void 0,
|
|
287
|
+
"aria-invalid": m.value || void 0,
|
|
288
|
+
class: l.value,
|
|
289
|
+
onInput: S,
|
|
290
|
+
onBlur: z
|
|
291
|
+
}), null, 16, Q),
|
|
292
|
+
h.value ? (p(), y("p", X, W(h.value), 1)) : V("", !0)
|
|
293
|
+
]));
|
|
294
|
+
}
|
|
295
|
+
});
|
|
296
|
+
export {
|
|
297
|
+
Z as VButton,
|
|
298
|
+
I as VIcon,
|
|
299
|
+
ee as VInputText
|
|
300
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.FaasriUI={},p.Vue))})(this,(function(p,e){"use strict";const x=["innerHTML"],y=((a,d)=>{const s=a.__vccOpts||a;for(const[u,n]of d)s[u]=n;return s})(e.defineComponent({__name:"VIcon",props:{name:{},size:{default:"md"},weight:{default:"regular"}},setup(a){const d=a,s={sm:"0.75em",md:"0.875em",lg:"1em"},u=e.computed(()=>typeof d.size=="number"?`${d.size}px`:s[d.size]??s.md),n={thin:1.5,regular:2,bold:2.5},m=e.computed(()=>typeof d.weight=="number"?d.weight:n[d.weight]??2),v=e.ref(""),h=Object.assign({"../../assets/icons/chevron-down.svg":()=>Promise.resolve().then(()=>M).then(l=>l.default),"../../assets/icons/chevron-right.svg":()=>Promise.resolve().then(()=>N).then(l=>l.default),"../../assets/icons/search.svg":()=>Promise.resolve().then(()=>W).then(l=>l.default),"../../assets/icons/spinner.svg":()=>Promise.resolve().then(()=>E).then(l=>l.default)});return e.watchEffect(async()=>{const l=`../../assets/icons/${d.name}.svg`,c=h[l];if(!c){v.value="";return}v.value=await c()}),(l,c)=>(e.openBlock(),e.createElementBlock("span",{class:"v-icon",style:e.normalizeStyle({width:u.value,height:u.value,"--icon-stroke":m.value}),"aria-hidden":"true",innerHTML:v.value},null,12,x))}}),[["__scopeId","data-v-1c8cc2b0"]]),V={key:0,class:"v-btn__icon","aria-hidden":"true"},j={key:1,class:"v-btn__label"},P="spinner",O=e.defineComponent({inheritAttrs:!1,__name:"VButton",props:{as:{default:"button"},href:{},target:{},rel:{},variant:{default:"solid"},severity:{default:"primary"},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},size:{default:"md"},icon:{},iconPosition:{default:"left"},iconWeight:{},label:{},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},type:{default:"button"},vars:{}},setup(a){const d=new Set(["primary","secondary","info","success","warning","error"]),s=e.useAttrs(),u=e.useSlots(),n=a,m=e.computed(()=>!!(n.disabled||n.loading)),v=e.computed(()=>!!(n.icon||u.icon)),h=e.computed(()=>n.iconPosition==="only"||v.value),l=e.computed(()=>!!(n.loading&&!h.value&&n.iconPosition!=="only")),c=e.computed(()=>{const t={thin:1.5,regular:2,bold:2.5};if(n.iconWeight!=null)return typeof n.iconWeight=="number"?n.iconWeight:t[n.iconWeight]}),b=new Set(["solid","text","outlined","ghost"]),g=e.computed(()=>{const t=n.variant,o=n.severity;return t&&d.has(t)?{model:"solid",severity:t}:t&&b.has(t)?{model:t,severity:o}:{model:"solid",severity:o}}),B=e.computed(()=>["v-btn",`v-btn--${n.size}`,`v-btn--variant-${g.value.model}`,`v-btn--severity-${g.value.severity}`,n.raised&&"v-btn--raised",n.rounded&&"v-btn--rounded",h.value&&`v-btn--icon-${n.iconPosition}`,n.loading&&"v-btn--loading"]),k=e.computed(()=>{const t={};if(n.vars)for(const[o,i]of Object.entries(n.vars))t[o.startsWith("--")?o:`--${o}`]=String(i);return c.value!=null&&(t["--btn-icon-stroke"]=String(c.value)),Object.keys(t).length?t:void 0}),S=e.computed(()=>{if(n.iconPosition!=="only")return;const t=typeof s["aria-label"]=="string"?s["aria-label"].trim():"",o=n.label?.trim()||"";return t||o||void 0}),_=e.computed(()=>{if(n.as!=="a"||n.target!=="_blank")return n.rel||void 0;const t=(n.rel||"").trim();if(!t)return"noopener noreferrer";const o=/\bnoopener\b/i.test(t),i=/\bnoreferrer\b/i.test(t);return[t,o?"":"noopener",i?"":"noreferrer"].filter(Boolean).join(" ")}),$=e.computed(()=>{if(n.as==="a"&&!m.value)return n.href}),r=e.computed(()=>{const t=s,{class:o,style:i,...f}=t;return f});return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.as),e.mergeProps(r.value,{href:$.value,target:n.as==="a"?n.target:void 0,rel:n.as==="a"?_.value:void 0,type:n.as==="button"?n.type:void 0,disabled:n.as==="button"?m.value:void 0,"aria-disabled":m.value||void 0,"aria-busy":n.loading||void 0,"aria-label":S.value,tabindex:n.as==="a"&&m.value?-1:void 0,class:B.value,style:k.value}),{default:e.withCtx(()=>[h.value?(e.openBlock(),e.createElementBlock("span",V,[n.loading?(e.openBlock(),e.createBlock(y,{key:0,class:"v-btn__spinner",name:P})):e.renderSlot(t.$slots,"icon",{key:1},()=>[n.icon?(e.openBlock(),e.createBlock(y,{key:0,name:n.icon,weight:n.iconWeight},null,8,["name","weight"])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0),n.iconPosition!=="only"?(e.openBlock(),e.createElementBlock("span",j,[l.value?(e.openBlock(),e.createBlock(y,{key:0,class:"v-btn__spinner",name:P})):e.renderSlot(t.$slots,"default",{key:1},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])])):e.createCommentVNode("",!0)]),_:3},16,["href","target","rel","type","disabled","aria-disabled","aria-busy","aria-label","tabindex","class","style"]))}}),z={class:"v-inputfield"},T=["id","name","type","value","placeholder","disabled","aria-disabled","aria-invalid"],I={key:0,class:"v-input__message"},C=e.defineComponent({inheritAttrs:!1,__name:"VInputText",props:{modelValue:{},placeholder:{},variant:{default:"primary"},size:{default:"md"},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:void 0},message:{default:""},validateOn:{default:"input"},name:{},id:{},type:{default:"text"}},emits:["update:modelValue","invalid-change"],setup(a,{emit:d}){const s=a,u=d,n=e.ref(!1),m=e.ref(""),v=e.computed(()=>s.invalid!==void 0?s.invalid:n.value),h=e.computed(()=>v.value?s.message||m.value:""),l=e.computed(()=>["v-input",`v-input--${s.variant}`,`v-input--${s.size}`,v.value&&"is-error"]);function c(r,t=""){s.invalid===void 0&&(n.value=r,m.value=t),u("invalid-change",r)}function b(r){switch(r){case"number":return"Only numbers are allowed.";case"email":return"Please enter a valid email address.";case"url":return"Please enter a valid URL.";case"tel":return"Please enter a valid phone number.";default:return"Invalid value."}}function g(r){return r.replace(/\D/g,"")}function B(r){let t=r.replace(/[^\d.-]/g,"");t=t.replace(/(?!^)-/g,"");const o=t.split(".");return o.length>2&&(t=o[0]+"."+o.slice(1).join("")),t}function k(r){const t=s.type;if(r==="")return c(!1,""),!0;if(t==="email"){const o=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r);return c(!o,b(t)),o}if(t==="url"){const o=/^https?:\/\/\S+$/i.test(r);return c(!o,b(t)),o}if(t==="tel"){const i=g(r).length,f=i>=8&&i<=12;return c(!f,f?"":"Phone number must be 8–12 digits."),f}if(t==="number"){const o=/^-?\d*(\.\d*)?$/.test(r);return c(!o,b(t)),o}return c(!1,""),!0}function S(r){const t=r.target;let o=t.value;if(s.type==="tel"){const i=g(o);if(s.validateOn==="input"){const w=i.length;c(w<8||w>12,"Phone number must be 8–12 digits.")}const f=_(i);t.value=f,u("update:modelValue",i);return}if(s.type==="number"){const i=B(o);t.value=i;const f=i===""?"":Number(i);u("update:modelValue",f);return}u("update:modelValue",o),s.validateOn==="input"&&k(o)}function _(r){if(!r)return"";let t=r,o="";t.startsWith("62")?(o="+62 ",t=t.slice(2)):t.startsWith("0")&&(o="0",t=t.slice(1));const i=t.slice(0,3),f=t.slice(3,7),w=t.slice(7,11);return o+[i,f,w].filter(Boolean).join(" ")}function $(r){if(s.validateOn!=="blur")return;const t=r.target;k(t.value)}return e.watch(()=>s.modelValue,r=>{if(s.type!=="tel")return;const t=document.activeElement;if(!t||t.tagName!=="INPUT")return;const o=g(String(r??""));t.value=_(o)}),(r,t)=>(e.openBlock(),e.createElementBlock("div",z,[e.createElementVNode("input",e.mergeProps(r.$attrs,{id:a.id,name:a.name,type:a.type,value:a.modelValue??"",placeholder:a.placeholder,disabled:a.disabled,"aria-disabled":a.disabled||void 0,"aria-invalid":v.value||void 0,class:l.value,onInput:S,onBlur:$}),null,16,T),h.value?(e.openBlock(),e.createElementBlock("p",I,e.toDisplayString(h.value),1)):e.createCommentVNode("",!0)]))}}),M=Object.freeze(Object.defineProperty({__proto__:null,default:`<svg\r
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"\r
|
|
3
|
+
viewBox="8 4 10 16"\r
|
|
4
|
+
fill="none"\r
|
|
5
|
+
stroke="currentColor"\r
|
|
6
|
+
stroke-width="var(--icon-stroke, 2)"\r
|
|
7
|
+
stroke-linecap="round"\r
|
|
8
|
+
stroke-linejoin="round"\r
|
|
9
|
+
transform="rotate(90 13 12)"\r
|
|
10
|
+
>\r
|
|
11
|
+
<polyline points="10 6 16 12 10 18" />\r
|
|
12
|
+
</svg>\r
|
|
13
|
+
`},Symbol.toStringTag,{value:"Module"})),N=Object.freeze(Object.defineProperty({__proto__:null,default:`<svg\r
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"\r
|
|
15
|
+
viewBox="9 5 8 14"\r
|
|
16
|
+
fill="none"\r
|
|
17
|
+
stroke="currentColor"\r
|
|
18
|
+
stroke-width="var(--icon-stroke, 2)"\r
|
|
19
|
+
stroke-linecap="round"\r
|
|
20
|
+
stroke-linejoin="round"\r
|
|
21
|
+
>\r
|
|
22
|
+
<polyline points="10 6 16 12 10 18" />\r
|
|
23
|
+
</svg>`},Symbol.toStringTag,{value:"Module"})),W=Object.freeze(Object.defineProperty({__proto__:null,default:`<svg\r
|
|
24
|
+
xmlns="http://www.w3.org/2000/svg"\r
|
|
25
|
+
viewBox="1.5 1.5 21 21"\r
|
|
26
|
+
fill="none"\r
|
|
27
|
+
stroke="currentColor"\r
|
|
28
|
+
stroke-width="var(--icon-stroke, 2)"\r
|
|
29
|
+
stroke-linecap="round"\r
|
|
30
|
+
stroke-linejoin="round"\r
|
|
31
|
+
>\r
|
|
32
|
+
<circle cx="10" cy="10" r="7" />\r
|
|
33
|
+
<line x1="15" y1="15" x2="20" y2="20" />\r
|
|
34
|
+
</svg>\r
|
|
35
|
+
`},Symbol.toStringTag,{value:"Module"})),E=Object.freeze(Object.defineProperty({__proto__:null,default:`<svg\r
|
|
36
|
+
class="v-btn__spinner"\r
|
|
37
|
+
width="16"\r
|
|
38
|
+
height="16"\r
|
|
39
|
+
viewBox="0 0 24 24"\r
|
|
40
|
+
fill="none"\r
|
|
41
|
+
xmlns="http://www.w3.org/2000/svg"\r
|
|
42
|
+
aria-hidden="true"\r
|
|
43
|
+
>\r
|
|
44
|
+
<circle\r
|
|
45
|
+
cx="12"\r
|
|
46
|
+
cy="12"\r
|
|
47
|
+
r="9"\r
|
|
48
|
+
stroke="currentColor"\r
|
|
49
|
+
stroke-width="var(--icon-stroke, 2)"\r
|
|
50
|
+
stroke-linecap="round"\r
|
|
51
|
+
opacity="0.25"\r
|
|
52
|
+
/>\r
|
|
53
|
+
<path\r
|
|
54
|
+
d="M21 12a9 9 0 0 1-9 9"\r
|
|
55
|
+
stroke="currentColor"\r
|
|
56
|
+
stroke-width="2"\r
|
|
57
|
+
stroke-linecap="round"\r
|
|
58
|
+
/>\r
|
|
59
|
+
</svg>\r
|
|
60
|
+
`},Symbol.toStringTag,{value:"Module"}));p.VButton=O,p.VIcon=y,p.VInputText=C,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const r = `<svg\r
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"\r
|
|
3
|
+
viewBox="1.5 1.5 21 21"\r
|
|
4
|
+
fill="none"\r
|
|
5
|
+
stroke="currentColor"\r
|
|
6
|
+
stroke-width="var(--icon-stroke, 2)"\r
|
|
7
|
+
stroke-linecap="round"\r
|
|
8
|
+
stroke-linejoin="round"\r
|
|
9
|
+
>\r
|
|
10
|
+
<circle cx="10" cy="10" r="7" />\r
|
|
11
|
+
<line x1="15" y1="15" x2="20" y2="20" />\r
|
|
12
|
+
</svg>\r
|
|
13
|
+
`;
|
|
14
|
+
export {
|
|
15
|
+
r as default
|
|
16
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
const r = `<svg\r
|
|
2
|
+
class="v-btn__spinner"\r
|
|
3
|
+
width="16"\r
|
|
4
|
+
height="16"\r
|
|
5
|
+
viewBox="0 0 24 24"\r
|
|
6
|
+
fill="none"\r
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"\r
|
|
8
|
+
aria-hidden="true"\r
|
|
9
|
+
>\r
|
|
10
|
+
<circle\r
|
|
11
|
+
cx="12"\r
|
|
12
|
+
cy="12"\r
|
|
13
|
+
r="9"\r
|
|
14
|
+
stroke="currentColor"\r
|
|
15
|
+
stroke-width="var(--icon-stroke, 2)"\r
|
|
16
|
+
stroke-linecap="round"\r
|
|
17
|
+
opacity="0.25"\r
|
|
18
|
+
/>\r
|
|
19
|
+
<path\r
|
|
20
|
+
d="M21 12a9 9 0 0 1-9 9"\r
|
|
21
|
+
stroke="currentColor"\r
|
|
22
|
+
stroke-width="2"\r
|
|
23
|
+
stroke-linecap="round"\r
|
|
24
|
+
/>\r
|
|
25
|
+
</svg>\r
|
|
26
|
+
`;
|
|
27
|
+
export {
|
|
28
|
+
r as default
|
|
29
|
+
};
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.v-icon[data-v-1c8cc2b0]{display:inline-flex;align-items:center;justify-content:center;line-height:1;color:currentColor}.v-icon[data-v-1c8cc2b0] svg{width:100%;height:100%;display:block;stroke-width:var(--icon-stroke, 2)}:root{--elevation-0: none;--elevation-1: 0 1px 2px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .1);--elevation-2: 0 4px 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .1);--elevation-3: 0 8px 16px rgba(0, 0, 0, .2), 0 16px 24px rgba(0, 0, 0, .12);--elevation-4: 0 12px 24px rgba(0, 0, 0, .22), 0 24px 40px rgba(0, 0, 0, .14);--radius-none: 0px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--font-family-base: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-size-h1: 64px;--font-size-h2: 40px;--font-size-h3: 24px;--font-size-h4: 20px;--font-size-lg: 16px;--font-size-md: 14px;--font-size-sm: 12px;--color-green-50: hsl(152 55% 98%);--color-green-100: hsl(152 55% 90%);--color-green-200: hsl(152 55% 82%);--color-green-300: hsl(152 55% 74%);--color-green-400: hsl(152 55% 66%);--color-green-500: hsl(152 55% 58%);--color-green-600: hsl(152 55% 50%);--color-green-700: hsl(152 55% 42%);--color-green-800: hsl(152 55% 34%);--color-green-900: hsl(152 55% 26%);--color-green-950: hsl(152 55% 18%);--color-red-50: hsl(5 65% 98%);--color-red-100: hsl(5 65% 90%);--color-red-200: hsl(5 65% 82%);--color-red-300: hsl(5 65% 74%);--color-red-400: hsl(5 65% 66%);--color-red-500: hsl(5 65% 58%);--color-red-600: hsl(5 65% 50%);--color-red-700: hsl(5 65% 42%);--color-red-800: hsl(5 65% 34%);--color-red-900: hsl(5 65% 26%);--color-red-950: hsl(5 65% 18%);--color-blue-50: hsl(210 60% 98%);--color-blue-100: hsl(210 60% 90%);--color-blue-200: hsl(210 60% 82%);--color-blue-300: hsl(210 60% 74%);--color-blue-400: hsl(210 60% 66%);--color-blue-500: hsl(210 60% 58%);--color-blue-600: hsl(210 60% 50%);--color-blue-700: hsl(210 60% 42%);--color-blue-800: hsl(210 60% 34%);--color-blue-900: hsl(210 60% 26%);--color-blue-950: hsl(210 60% 18%);--color-pink-50: hsl(330 65% 98%);--color-pink-100: hsl(330 65% 90%);--color-pink-200: hsl(330 65% 82%);--color-pink-300: hsl(330 65% 74%);--color-pink-400: hsl(330 65% 66%);--color-pink-500: hsl(330 65% 58%);--color-pink-600: hsl(330 65% 50%);--color-pink-700: hsl(330 65% 42%);--color-pink-800: hsl(330 65% 34%);--color-pink-900: hsl(330 65% 26%);--color-pink-950: hsl(330 65% 18%);--color-amber-50: hsl(38 80% 98%);--color-amber-100: hsl(38 80% 90%);--color-amber-200: hsl(38 80% 82%);--color-amber-300: hsl(38 80% 74%);--color-amber-400: hsl(38 80% 66%);--color-amber-500: hsl(38 80% 58%);--color-amber-600: hsl(38 80% 50%);--color-amber-700: hsl(38 80% 42%);--color-amber-800: hsl(38 80% 34%);--color-amber-900: hsl(38 80% 26%);--color-amber-950: hsl(38 80% 18%);--color-yellow-50: hsl(52 85% 98%);--color-yellow-100: hsl(52 85% 90%);--color-yellow-200: hsl(52 85% 82%);--color-yellow-300: hsl(52 85% 74%);--color-yellow-400: hsl(52 85% 66%);--color-yellow-500: hsl(52 85% 58%);--color-yellow-600: hsl(52 85% 50%);--color-yellow-700: hsl(52 85% 42%);--color-yellow-800: hsl(52 85% 34%);--color-yellow-900: hsl(52 85% 26%);--color-yellow-950: hsl(52 85% 18%);--color-cyan-50: hsl(190 60% 98%);--color-cyan-100: hsl(190 60% 90%);--color-cyan-200: hsl(190 60% 82%);--color-cyan-300: hsl(190 60% 74%);--color-cyan-400: hsl(190 60% 66%);--color-cyan-500: hsl(190 60% 58%);--color-cyan-600: hsl(190 60% 50%);--color-cyan-700: hsl(190 60% 42%);--color-cyan-800: hsl(190 60% 34%);--color-cyan-900: hsl(190 60% 26%);--color-cyan-950: hsl(190 60% 18%);--color-neutral-50: hsl(220 8% 98%);--color-neutral-100: hsl(220 8% 90%);--color-neutral-200: hsl(220 8% 82%);--color-neutral-300: hsl(220 8% 74%);--color-neutral-400: hsl(220 8% 66%);--color-neutral-500: hsl(220 8% 58%);--color-neutral-600: hsl(220 8% 50%);--color-neutral-700: hsl(220 8% 42%);--color-neutral-800: hsl(220 8% 34%);--color-neutral-900: hsl(220 8% 26%);--color-neutral-950: hsl(220 8% 10%);--color-purple-50: hsl(270 55% 98%);--color-purple-100: hsl(270 55% 90%);--color-purple-200: hsl(270 55% 82%);--color-purple-300: hsl(270 55% 74%);--color-purple-400: hsl(270 55% 66%);--color-purple-500: hsl(270 55% 58%);--color-purple-600: hsl(270 55% 50%);--color-purple-700: hsl(270 55% 42%);--color-purple-800: hsl(270 55% 34%);--color-purple-900: hsl(270 55% 26%);--color-purple-950: hsl(270 55% 18%)}html.theme-light{--color-bg-default: var(--color-neutral-50);--color-bg-subtle: var(--color-neutral-100);--color-bg-surface: var(--color-neutral-50);--color-text-primary: var(--color-neutral-950);--color-text-secondary: var(--color-neutral-900);--color-text-muted: var(--color-neutral-700);--color-text-inverse: var(--color-neutral-50);--color-border-default: var(--color-neutral-300);--color-border-strong: var(--color-neutral-400);--color-action-primary-text: var(--color-neutral-50);--color-success-bg: var(--color-green-600);--color-success-text: var(--color-green-950);--color-success-active: var(--color-green-800);--color-warning-bg: var(--color-amber-600);--color-warning-text: var(--color-amber-950);--color-warning-active: var(--color-amber-800);--color-error-bg: var(--color-red-600);--color-error-text: var(--color-red-950);--color-error-active: var(--color-red-800);--color-info-bg: var(--color-cyan-600);--color-info-text: var(--color-cyan-950);--color-info-active: var(--color-cyan-800);--color-action-primary: var(--brand-primary);--color-action-primary-hover: var(--brand-primary-hover);--color-action-primary-active: var(--brand-primary-active)}html.theme-dark{--color-bg-default: var(--color-neutral-950);--color-bg-subtle: var(--color-neutral-900);--color-bg-surface: var(--color-neutral-950);--color-text-primary: var(--color-neutral-50);--color-text-secondary: var(--color-neutral-100);--color-text-muted: var(--color-neutral-300);--color-text-inverse: var(--color-neutral-950);--color-border-default: var(--color-neutral-800);--color-border-strong: var(--color-neutral-700);--color-action-primary-text: var(--color-neutral-950);--color-success-bg: var(--color-green-600);--color-success-text: var(--color-green-200);--color-success-solid: var(--color-green-800);--color-warning-bg: var(--color-amber-600);--color-warning-text: var(--color-amber-200);--color-warning-solid: var(--color-amber-800);--color-error-bg: var(--color-red-600);--color-error-text: var(--color-red-200);--color-error-solid: var(--color-red-800);--color-info-bg: var(--color-cyan-600);--color-info-text: var(--color-cyan-200);--color-info-solid: var(--color-cyan-800);--color-action-primary: var(--brand-primary);--color-action-primary-hover: var(--brand-primary-hover);--color-action-primary-active: var(--brand-primary-active)}:root{--brand-primary: hsl(210 60% 58%);--brand-primary-hover: hsl(210 60% 50%);--brand-primary-active: hsl(210 60% 42%);--brand-on-primary: hsl(220 8% 10%)}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}.mt-7{margin-top:var(--space-7)}.mt-8{margin-top:var(--space-8)}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:var(--space-6)}.mb-7{margin-bottom:var(--space-7)}.mb-8{margin-bottom:var(--space-8)}.px-1{padding-left:var(--space-1);padding-right:var(--space-1)}.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}.px-3{padding-left:var(--space-3);padding-right:var(--space-3)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-5{padding-left:var(--space-5);padding-right:var(--space-5)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.px-7{padding-left:var(--space-7);padding-right:var(--space-7)}.px-8{padding-left:var(--space-8);padding-right:var(--space-8)}.py-1{padding-top:var(--space-1);padding-bottom:var(--space-1)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)}.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.py-5{padding-top:var(--space-5);padding-bottom:var(--space-5)}.py-6{padding-top:var(--space-6);padding-bottom:var(--space-6)}.py-7{padding-top:var(--space-7);padding-bottom:var(--space-7)}.py-8{padding-top:var(--space-8);padding-bottom:var(--space-8)}:root{--button-base-height: auto;--button-base-max-height: none;--button-base-padding-y: 2px;--button-base-padding-x: 2px;--button-base-min-height: 0px;--button-base-radius: 8px;--button-base-radius-rounded: 9999px;--button-base-gap: 8px;--button-base-font-size: inherit;--button-base-font-weight: 400;--button-base-font-family: inherit;--button-base-layout-display: inline-flex;--button-base-layout-align: center;--button-base-layout-justify: center;--button-base-layout-user-select: none;--button-base-layout-cursor: pointer;--button-base-appearance: none;--button-base-border-width: 0px;--button-base-border-style: solid;--button-base-border-color: transparent;--button-base-transition-transform: .05s ease;--button-base-transition-background-color: .15s ease;--button-base-transition-border-color: .15s ease;--button-base-transition-opacity: .15s ease;--button-base-transition-box-shadow: .15s ease;--button-base-active-translate-y: 1px;--button-base-focus-visible-outline: none;--button-base-shadow-raised: var(--elevation-2);--button-base-shadow-raised-hover: var(--elevation-3);--button-base-icon-stroke: 2.25;--button-base-icon-stroke-ghost: 1.75;--button-disabled-opacity: .6;--button-disabled-cursor: not-allowed;--button-disabled-transform: none;--button-size-sm-padding-y: 2px;--button-size-sm-padding-x: 8px;--button-size-sm-min-height: 28px;--button-size-sm-radius: 6px;--button-size-sm-font-size: 14px;--button-size-md-padding-y: 6px;--button-size-md-padding-x: 12px;--button-size-md-min-height: 32px;--button-size-md-radius: 8px;--button-size-md-font-size: 16px;--button-size-lg-padding-y: 8px;--button-size-lg-padding-x: 16px;--button-size-lg-min-height: 40px;--button-size-lg-radius: 10px;--button-size-lg-font-size: 18px;--button-icon-line-height: 1;--button-icon-layout-display: inline-flex;--button-icon-layout-align: center;--button-icon-layout-justify: center;--button-severity-primary-bg: var(--color-action-primary);--button-severity-primary-bg-hover: var(--color-action-primary-hover);--button-severity-primary-bg-active: var(--color-action-primary-active);--button-severity-primary-fg: var(--color-action-primary-text);--button-severity-primary-stroke: var(--color-action-primary);--button-severity-primary-border-color: transparent;--button-severity-secondary-bg: var(--color-bg-subtle);--button-severity-secondary-bg-hover: var(--color-bg-default);--button-severity-secondary-bg-active: var(--color-bg-default);--button-severity-secondary-fg: var(--color-text-secondary);--button-severity-secondary-stroke: var(--color-text-primary);--button-severity-secondary-border-color: var(--color-border-default);--button-severity-info-bg: var(--color-info-bg);--button-severity-info-bg-hover: var(--color-info-active);--button-severity-info-bg-active: var(--color-info-active);--button-severity-info-fg: var(--color-action-primary-text);--button-severity-info-stroke: var(--color-info-bg);--button-severity-info-border-color: transparent;--button-severity-warning-bg: var(--color-warning-bg);--button-severity-warning-bg-hover: var(--color-warning-active);--button-severity-warning-bg-active: var(--color-warning-active);--button-severity-warning-fg: var(--color-action-primary-text);--button-severity-warning-stroke: var(--color-warning-bg);--button-severity-warning-border-color: transparent;--button-severity-error-bg: var(--color-error-bg);--button-severity-error-bg-hover: var(--color-error-active);--button-severity-error-bg-active: var(--color-error-active);--button-severity-error-fg: var(--color-action-primary-text);--button-severity-error-stroke: var(--color-error-bg);--button-severity-error-border-color: transparent;--button-severity-success-bg: var(--color-success-bg);--button-severity-success-bg-hover: var(--color-success-active);--button-severity-success-bg-active: var(--color-success-active);--button-severity-success-fg: var(--color-action-primary-text);--button-severity-success-stroke: var(--color-success-bg);--button-severity-success-border-color: transpare3nt;--button-model-solid-bg: var(--color-action-primary);--button-model-solid-bg-hover: var(--color-action-primary-hover);--button-model-solid-bg-active: var(--color-action-primary-active);--button-model-solid-fg: var(--color-action-primary-text);--button-model-solid-border-width: 0px;--button-model-solid-border-color: transparent;--button-model-solid-shadow: none;--button-model-text-bg: transparent;--button-model-text-bg-hover: color-mix(in oklab, var(--color-action-primary) 12%, transparent);--button-model-text-bg-active: color-mix(in oklab, var(--color-action-primary) 18%, transparent);--button-model-text-fg: var(--color-action-primary);--button-model-text-border-width: 0px;--button-model-text-border-color: transparent;--button-model-text-shadow: none;--button-model-outlined-bg: transparent;--button-model-outlined-bg-hover: color-mix(in oklab, var(--color-action-primary) 10%, transparent);--button-model-outlined-bg-active: color-mix(in oklab, var(--color-action-primary) 16%, transparent);--button-model-outlined-fg: var(--color-action-primary);--button-model-outlined-border-width: 1px;--button-model-outlined-border-color: var(--color-action-primary);--button-model-outlined-shadow: none;--button-model-ghost-bg: transparent;--button-model-ghost-bg-hover: color-mix(in oklab, var(--color-bg-subtle) 60%, transparent);--button-model-ghost-bg-active: color-mix(in oklab, var(--color-bg-subtle) 75%, transparent);--button-model-ghost-fg: var(--color-text-primary);--button-model-ghost-border-width: 0px;--button-model-ghost-border-color: transparent;--button-model-ghost-shadow: none;--button-model-ghost-icon-stroke: 1.75;--button-group-radius: 8px;--button-group-radius-rounded: 9999px;--button-group-divider: 1px;--button-group-divider-color: var(--color-border-default);--button-options-icon-position-left: left;--button-options-icon-position-right: right;--button-options-icon-position-only: only}.v-btn{--btn-s-bg: var(--button-severity-primary-bg);--btn-s-bg-hover: var(--button-severity-primary-bg-hover);--btn-s-bg-active: var(--button-severity-primary-bg-active);--btn-s-fg: var(--button-severity-primary-fg);--btn-s-stroke: var(--button-severity-primary-stroke);--btn-s-border-color: var(--button-severity-primary-border-color, var(--button-base-border-color, transparent));--btn-padding-y: var(--button-size-md-padding-y, var(--button-base-padding-y));--btn-padding-x: var(--button-size-md-padding-x, var(--button-base-padding-x));--btn-min-height: var(--button-size-md-min-height, var(--button-base-min-height, 0px));--btn-radius: var(--button-size-md-radius, var(--button-base-radius));--btn-font-size: var(--button-size-md-font-size, var(--button-base-font-size, inherit));--btn-bg: var(--btn-s-bg);--btn-bg-hover: var(--btn-s-bg-hover);--btn-bg-active: var(--btn-s-bg-active);--btn-fg: var(--btn-s-fg);--btn-border-width: var(--button-base-border-width, 0px);--btn-border-style: var(--button-base-border-style, solid);--btn-border-color: var(--btn-s-border-color);--btn-shadow: none;--btn-shadow-hover: none;--btn-icon-stroke: var(--button-base-icon-stroke);height:var(--button-base-height, auto);max-height:var(--button-base-max-height, none);padding:var(--btn-padding-y) var(--btn-padding-x);min-height:var(--btn-min-height);border-radius:var(--btn-radius);font-size:var(--btn-font-size);vertical-align:middle;font-weight:var(--button-base-font-weight);font-family:var(--button-base-font-family);appearance:var(--button-base-appearance, none);border-width:var(--btn-border-width);border-style:var(--btn-border-style);border-color:var(--btn-border-color);display:var(--button-base-layout-display, inline-flex);align-items:var(--button-base-layout-align, center);justify-content:var(--button-base-layout-justify, center);gap:var(--button-base-gap, 8px);-webkit-user-select:var(--button-base-layout-user-select, none);user-select:var(--button-base-layout-user-select, none);cursor:var(--button-base-layout-cursor, pointer);background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-shadow);transition:transform var(--button-base-transition-transform, .05s ease),background-color var(--button-base-transition-background-color, .15s ease),border-color var(--button-base-transition-border-color, .15s ease),opacity var(--button-base-transition-opacity, .15s ease),box-shadow var(--button-base-transition-box-shadow, .15s ease)}.v-btn:hover{background:var(--btn-bg-hover);box-shadow:var(--btn-shadow-hover)}.v-btn:active{background:var(--btn-bg-active);transform:translateY(var(--button-base-active-translate-y, 1px))}.v-btn:focus-visible{outline:var(--button-base-focus-visible-outline, none)}.v-btn:disabled,.v-btn[aria-disabled=true]{opacity:var(--button-disabled-opacity, .6);cursor:var(--button-disabled-cursor, not-allowed);transform:var(--button-disabled-transform, none)}a.v-btn[aria-disabled=true]{pointer-events:none}.v-btn--severity-primary{--btn-s-bg: var(--button-severity-primary-bg);--btn-s-bg-hover: var(--button-severity-primary-bg-hover);--btn-s-bg-active: var(--button-severity-primary-bg-active);--btn-s-fg: var(--button-severity-primary-fg);--btn-s-stroke: var(--button-severity-primary-stroke);--btn-s-border-color: var(--button-severity-primary-border-color, var(--button-base-border-color, transparent))}.v-btn--severity-secondary{--btn-s-bg: var(--button-severity-secondary-bg);--btn-s-bg-hover: var(--button-severity-secondary-bg-hover);--btn-s-bg-active: var(--button-severity-secondary-bg-active);--btn-s-fg: var(--button-severity-secondary-fg);--btn-s-stroke: var(--button-severity-secondary-stroke);--btn-s-border-color: var(--button-severity-secondary-border-color, var(--button-base-border-color, transparent))}.v-btn--severity-info{--btn-s-bg: var(--button-severity-info-bg);--btn-s-bg-hover: var(--button-severity-info-bg-hover);--btn-s-bg-active: var(--button-severity-info-bg-active);--btn-s-fg: var(--button-severity-info-fg);--btn-s-stroke: var(--button-severity-info-stroke);--btn-s-border-color: var(--button-severity-info-border-color, var(--button-base-border-color, transparent))}.v-btn--severity-success{--btn-s-bg: var(--button-severity-success-bg);--btn-s-bg-hover: var(--button-severity-success-bg-hover);--btn-s-bg-active: var(--button-severity-success-bg-active);--btn-s-fg: var(--button-severity-success-fg);--btn-s-stroke: var(--button-severity-success-stroke);--btn-s-border-color: var(--button-severity-success-border-color, var(--button-base-border-color, transparent))}.v-btn--severity-warning{--btn-s-bg: var(--button-severity-warning-bg);--btn-s-bg-hover: var(--button-severity-warning-bg-hover);--btn-s-bg-active: var(--button-severity-warning-bg-active);--btn-s-fg: var(--button-severity-warning-fg);--btn-s-stroke: var(--button-severity-warning-stroke);--btn-s-border-color: var(--button-severity-warning-border-color, var(--button-base-border-color, transparent))}.v-btn--severity-error{--btn-s-bg: var(--button-severity-error-bg);--btn-s-bg-hover: var(--button-severity-error-bg-hover);--btn-s-bg-active: var(--button-severity-error-bg-active);--btn-s-fg: var(--button-severity-error-fg);--btn-s-stroke: var(--button-severity-error-stroke);--btn-s-border-color: var(--button-severity-error-border-color, var(--button-base-border-color, transparent))}.v-btn--variant-solid{--btn-bg: var(--btn-s-bg);--btn-bg-hover: var(--btn-s-bg-hover);--btn-bg-active: var(--btn-s-bg-active);--btn-fg: var(--btn-s-fg);--btn-border-width: var(--button-base-border-width, 0px);--btn-border-color: var(--btn-s-border-color);--btn-shadow: none;--btn-shadow-hover: none}.v-btn--raised{--btn-shadow: var(--button-base-shadow-raised, var(--elevation-2));--btn-shadow-hover: var(--button-base-shadow-raised-hover, var(--elevation-3))}.v-btn--variant-text{--btn-bg: transparent;--btn-bg-hover: color-mix(in oklab, var(--btn-s-bg) 12%, transparent);--btn-bg-active: color-mix(in oklab, var(--btn-s-bg) 18%, transparent);--btn-fg: var(--btn-s-stroke);--btn-border-width: 0px;--btn-border-color: transparent;--btn-shadow: none;--btn-shadow-hover: none}.v-btn--variant-outlined{--btn-bg: transparent;--btn-bg-hover: color-mix(in oklab, var(--btn-s-bg) 10%, transparent);--btn-bg-active: color-mix(in oklab, var(--btn-s-bg) 16%, transparent);--btn-fg: var(--btn-s-stroke);--btn-border-width: 1px;--btn-border-color: var(--btn-s-stroke);--btn-shadow: none;--btn-shadow-hover: none}.v-btn--variant-ghost{--btn-bg: transparent;--btn-bg-hover: color-mix(in oklab, var(--color-bg-subtle) 60%, transparent);--btn-bg-active: color-mix(in oklab, var(--color-bg-subtle) 75%, transparent);--btn-fg: var(--color-text-primary);--btn-border-width: 0px;--btn-border-color: transparent;--btn-shadow: none;--btn-shadow-hover: none;--btn-icon-stroke: var(--button-model-ghost-icon-stroke, var(--button-base-icon-stroke-ghost, var(--button-base-icon-stroke)))}.v-btn--rounded{--btn-radius: var(--button-base-radius-rounded, 9999px)}.v-btn--sm{--btn-padding-y: var(--button-size-sm-padding-y, var(--button-base-padding-y));--btn-padding-x: var(--button-size-sm-padding-x, var(--button-base-padding-x));--btn-min-height: var(--button-size-sm-min-height, var(--button-base-min-height, 0px));--btn-radius: var(--button-size-sm-radius, var(--button-base-radius));--btn-font-size: var(--button-size-sm-font-size, var(--button-base-font-size, inherit))}.v-btn--md{--btn-padding-y: var(--button-size-md-padding-y, var(--button-base-padding-y));--btn-padding-x: var(--button-size-md-padding-x, var(--button-base-padding-x));--btn-min-height: var(--button-size-md-min-height, var(--button-base-min-height, 0px));--btn-radius: var(--button-size-md-radius, var(--button-base-radius));--btn-font-size: var(--button-size-md-font-size, var(--button-base-font-size, inherit))}.v-btn--lg{--btn-padding-y: var(--button-size-lg-padding-y, var(--button-base-padding-y));--btn-padding-x: var(--button-size-lg-padding-x, var(--button-base-padding-x));--btn-min-height: var(--button-size-lg-min-height, var(--button-base-min-height, 0px));--btn-radius: var(--button-size-lg-radius, var(--button-base-radius));--btn-font-size: var(--button-size-lg-font-size, var(--button-base-font-size, inherit))}.v-btn__icon{display:var(--button-icon-layout-display, inline-flex);align-items:var(--button-icon-layout-align, center);justify-content:var(--button-icon-layout-justify, center);line-height:var(--button-icon-line-height, 1);--icon-stroke: var(--btn-icon-stroke)}.v-btn--icon-left .v-btn__icon{order:0}.v-btn--icon-left .v-btn__label{order:1}.v-btn--icon-right .v-btn__label{order:0}.v-btn--icon-right .v-btn__icon{order:1}.v-btn--icon-only .v-btn__label{display:none}.v-btn__spinner{display:inline-flex;animation:v-btn-spin .8s linear infinite}@keyframes v-btn-spin{to{transform:rotate(360deg)}}.v-btn-group{display:inline-flex;align-items:stretch;vertical-align:middle}.v-btn-group>.v-btn{border-radius:0}.v-btn-group>.v-btn:first-child{border-top-left-radius:var(--button-group-radius, var(--button-base-radius));border-bottom-left-radius:var(--button-group-radius, var(--button-base-radius))}.v-btn-group>.v-btn:last-child{border-top-right-radius:var(--button-group-radius, var(--button-base-radius));border-bottom-right-radius:var(--button-group-radius, var(--button-base-radius))}.v-btn-group.v-btn-group--rounded{--button-group-radius: var(--button-group-radius-rounded, var(--button-base-radius-rounded, 9999px))}.v-btn-group.v-btn-group--divided>.v-btn+.v-btn{margin-left:0;box-shadow:none;border-left:var(--button-group-divider, 1px) solid var(--button-group-divider-color, var(--color-border-default))}.v-input{width:var(--input-text-base-width, 280px);--input-bg: var(--input-text-variant-primary-bg, var(--input-text-base-bg));--input-fg: var(--input-text-base-fg);--input-border: var(--input-text-variant-primary-border-color, var(--input-text-base-border-color));--input-border-hover: var(--input-text-variant-primary-border-hover-color, var(--input-text-base-border-hover-color));--input-border-focus: var(--input-text-base-border-focus-color);--input-placeholder: var(--input-text-base-placeholder);--input-font-size: var(--input-text-size-md-font-size, var(--input-text-base-font-size, inherit));--input-padding-y: var(--input-text-size-md-padding-y, var(--input-text-base-padding-y));--input-padding-x: var(--input-text-size-md-padding-x, var(--input-text-base-padding-x));padding:var(--input-padding-y) var(--input-padding-x);border-radius:var(--input-text-base-radius);border-width:var(--input-text-base-border-width);border-style:var(--input-text-base-border-style);border-color:var(--input-border);background:var(--input-bg);color:var(--input-fg);outline:var(--input-text-base-outline);font:inherit;font-size:var(--input-font-size);font-family:var(--input-text-base-font-family, inherit);caret-color:var(--input-text-base-caret-color);transition:border-color var(--input-text-base-transition-border-color),box-shadow var(--input-text-base-transition-box-shadow),background-color var(--input-text-base-transition-background-color)}.v-input::placeholder{color:var(--input-placeholder)}.v-input:hover{border-color:var(--input-border-hover)}.v-input:focus{border-color:var(--input-border-focus);box-shadow:0 0 0 var(--input-text-base-focus-ring-size) color-mix(in oklab,var(--input-border-focus) var(--input-text-base-focus-ring-mix-percent),var(--input-text-base-focus-ring-mix-transparent))}.v-input--primary{--input-bg: var(--input-text-variant-primary-bg, var(--input-text-base-bg));--input-border: var(--input-text-variant-primary-border-color, var(--input-text-base-border-color));--input-border-hover: var(--input-text-variant-primary-border-hover-color, var(--input-text-base-border-hover-color))}.v-input--secondary{--input-bg: var(--input-text-variant-secondary-bg, var(--input-text-base-bg));--input-border: var(--input-text-variant-secondary-border-color, var(--input-text-base-border-color));--input-border-hover: var(--input-text-variant-secondary-border-hover-color, var(--input-text-base-border-hover-color))}.v-input--ghost{--input-bg: var(--input-text-variant-ghost-bg, transparent);--input-border: var(--input-text-variant-ghost-border-color, transparent);--input-border-hover: var(--input-text-variant-ghost-border-hover-color, var(--input-text-base-border-color))}.v-input--ghost:focus{--input-border: var(--input-text-variant-ghost-border-focus-color, var(--input-text-base-border-hover-color))}.v-input--sm{--input-font-size: var(--input-text-size-sm-font-size, var(--input-text-base-font-size, inherit));--input-padding-y: var(--input-text-size-sm-padding-y, var(--input-text-base-padding-y));--input-padding-x: var(--input-text-size-sm-padding-x, var(--input-text-base-padding-x))}.v-input--md{--input-font-size: var(--input-text-size-md-font-size, var(--input-text-base-font-size, inherit));--input-padding-y: var(--input-text-size-md-padding-y, var(--input-text-base-padding-y));--input-padding-x: var(--input-text-size-md-padding-x, var(--input-text-base-padding-x))}.v-input--lg{--input-font-size: var(--input-text-size-lg-font-size, var(--input-text-base-font-size, inherit));--input-padding-y: var(--input-text-size-lg-padding-y, var(--input-text-base-padding-y));--input-padding-x: var(--input-text-size-lg-padding-x, var(--input-text-base-padding-x))}.v-input.is-error{--input-border: var(--input-text-state-error-border-color);--input-border-hover: var(--input-text-state-error-border-hover-color);--input-border-focus: var(--input-text-state-error-border-focus-color)}.v-input.is-error:focus{box-shadow:0 0 0 var(--input-text-base-focus-ring-size) color-mix(in oklab,var(--input-text-state-error-border-focus-color) var(--input-text-base-focus-ring-mix-percent),var(--input-text-base-focus-ring-mix-transparent))}.v-input:disabled,.v-input[aria-disabled=true]{opacity:var(--input-text-state-disabled-opacity);cursor:var(--input-text-state-disabled-cursor);background:var(--input-text-state-disabled-bg)}.v-inputfield{display:inline-flex;flex-direction:column;align-items:flex-start}.v-input__message{margin-top:var(--space-1, 8px);font-size:12px;line-height:1.4;color:var(--color-text-primary, #111827)}:root{--input-text-base-width: 280px;--input-text-base-padding-y: var(--space-1);--input-text-base-padding-x: var(--space-2);--input-text-base-radius: var(--radius-sm);--input-text-base-border-width: 1px;--input-text-base-border-style: solid;--input-text-base-border-color: var(--color-border-default);--input-text-base-border-hover-color: var(--color-border-strong);--input-text-base-border-focus-color: var(--color-action-primary);--input-text-base-bg: var(--color-bg-default);--input-text-base-fg: var(--color-text-primary);--input-text-base-placeholder: var(--color-text-muted);--input-text-base-outline: none;--input-text-base-font-size: inherit;--input-text-base-font-family: inherit;--input-text-base-caret-color: var(--color-action-primary);--input-text-base-transition-border-color: .15s ease;--input-text-base-transition-box-shadow: .15s ease;--input-text-base-transition-background-color: .15s ease;--input-text-base-focus-ring-size: 3px;--input-text-base-focus-ring-mix-percent: 25%;--input-text-base-focus-ring-mix-transparent: transparent;--input-text-variant-primary-bg: var(--color-bg-default);--input-text-variant-primary-border-color: var(--color-border-default);--input-text-variant-primary-border-hover-color: var(--color-border-strong);--input-text-variant-secondary-bg: var(--color-bg-subtle);--input-text-variant-secondary-border-color: var(--color-border-default);--input-text-variant-secondary-border-hover-color: var(--color-border-strong);--input-text-variant-ghost-bg: transparent;--input-text-variant-ghost-border-color: transparent;--input-text-variant-ghost-border-hover-color: var(--color-border-default);--input-text-variant-ghost-border-focus-color: var(--color-border-strong);--input-text-size-sm-font-size: 13px;--input-text-size-sm-padding-y: 6px;--input-text-size-sm-padding-x: 8px;--input-text-size-md-font-size: 14px;--input-text-size-md-padding-y: 8px;--input-text-size-md-padding-x: 12px;--input-text-size-lg-font-size: 16px;--input-text-size-lg-padding-y: 10px;--input-text-size-lg-padding-x: 14px;--input-text-state-error-border-color: var(--color-error-solid);--input-text-state-error-border-hover-color: var(--color-error-solid);--input-text-state-error-border-focus-color: var(--color-error-solid);--input-text-state-disabled-opacity: .6;--input-text-state-disabled-cursor: not-allowed;--input-text-state-disabled-bg: var(--color-bg-subtle)}
|
package/package.json
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@faasri/ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"private": false,
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"*.css"
|
|
8
|
+
],
|
|
9
|
+
"peerDependencies": {
|
|
10
|
+
"vue": "^3.5.0"
|
|
11
|
+
},
|
|
12
|
+
"devDependencies": {
|
|
13
|
+
"@types/node": "^24.10.1",
|
|
14
|
+
"@vitejs/plugin-vue": "^6.0.1",
|
|
15
|
+
"@vue/tsconfig": "^0.8.1",
|
|
16
|
+
"style-dictionary": "^5.1.3",
|
|
17
|
+
"typescript": "~5.9.3",
|
|
18
|
+
"vite": "^7.2.4",
|
|
19
|
+
"vite-plugin-dts": "^4.5.4",
|
|
20
|
+
"vue-tsc": "^3.1.4"
|
|
21
|
+
},
|
|
22
|
+
"main": "./dist/index.umd.cjs",
|
|
23
|
+
"module": "./dist/index.mjs",
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
25
|
+
"exports": {
|
|
26
|
+
".": {
|
|
27
|
+
"types": "./dist/index.d.ts",
|
|
28
|
+
"import": "./dist/index.mjs",
|
|
29
|
+
"require": "./dist/index.umd.cjs"
|
|
30
|
+
},
|
|
31
|
+
"./styles.css": "./dist/styles.css",
|
|
32
|
+
"./theme.primitives.css": "./src/styles/tokens/theme.primitives.css",
|
|
33
|
+
"./theme.light.css": "./src/styles/tokens/theme.light.css",
|
|
34
|
+
"./theme.dark.css": "./src/styles/tokens/theme.dark.css"
|
|
35
|
+
},
|
|
36
|
+
"files": [
|
|
37
|
+
"dist"
|
|
38
|
+
],
|
|
39
|
+
"scripts": {
|
|
40
|
+
"tokens:build:base": "style-dictionary build --config build/style-dictionary.config.mjs",
|
|
41
|
+
"tokens:build:light": "style-dictionary build --config build/style-dictionary.light.mjs",
|
|
42
|
+
"tokens:build:dark": "style-dictionary build --config build/style-dictionary.dark.mjs",
|
|
43
|
+
"tokens:build:brand": "style-dictionary build --config build/style-dictionary.brand.mjs",
|
|
44
|
+
"tokens:build:components": "style-dictionary build --config build/style-dictionary.components.mjs",
|
|
45
|
+
"tokens:wrap": "node build/wrap-theme-css.mjs",
|
|
46
|
+
"tokens:build": "pnpm tokens:build:base && pnpm tokens:build:light && pnpm tokens:build:dark && pnpm tokens:wrap && pnpm tokens:build:brand && pnpm tokens:build:components",
|
|
47
|
+
"build": "pnpm tokens:build && vue-tsc --noEmit -p tsconfig.json && vite build",
|
|
48
|
+
"typecheck": "vue-tsc -b"
|
|
49
|
+
}
|
|
50
|
+
}
|