windly-ui 1.0.2 → 1.0.3
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/{ui-library/dist → dist}/module.json +2 -2
- package/dist/module.mjs +26 -0
- package/dist/runtime/components/Accordion.d.vue.ts +39 -0
- package/dist/runtime/components/Accordion.vue +92 -0
- package/dist/runtime/components/Accordion.vue.d.ts +39 -0
- package/dist/runtime/components/Avatar.d.vue.ts +141 -0
- package/dist/runtime/components/Avatar.vue +72 -0
- package/dist/runtime/components/Avatar.vue.d.ts +141 -0
- package/dist/runtime/components/Badge.d.vue.ts +133 -0
- package/dist/runtime/components/Badge.vue +99 -0
- package/dist/runtime/components/Badge.vue.d.ts +133 -0
- package/dist/runtime/components/Breadcrumbs.d.vue.ts +83 -0
- package/dist/runtime/components/Breadcrumbs.vue +116 -0
- package/dist/runtime/components/Breadcrumbs.vue.d.ts +83 -0
- package/dist/runtime/components/Button.d.vue.ts +199 -0
- package/dist/runtime/components/Button.vue +125 -0
- package/dist/runtime/components/Button.vue.d.ts +199 -0
- package/dist/runtime/components/Card.d.vue.ts +83 -0
- package/dist/runtime/components/Card.vue +71 -0
- package/dist/runtime/components/Card.vue.d.ts +83 -0
- package/dist/runtime/components/Checkbox.d.vue.ts +190 -0
- package/dist/runtime/components/Checkbox.vue +125 -0
- package/dist/runtime/components/Checkbox.vue.d.ts +190 -0
- package/dist/runtime/components/CodeBlock.d.vue.ts +16 -0
- package/dist/runtime/components/CodeBlock.vue +75 -0
- package/dist/runtime/components/CodeBlock.vue.d.ts +16 -0
- package/dist/runtime/components/ColorPicker.d.vue.ts +91 -0
- package/dist/runtime/components/ColorPicker.vue +244 -0
- package/dist/runtime/components/ColorPicker.vue.d.ts +91 -0
- package/dist/runtime/components/Date.d.vue.ts +137 -0
- package/dist/runtime/components/Date.vue +201 -0
- package/dist/runtime/components/Date.vue.d.ts +137 -0
- package/dist/runtime/components/Dialog.d.vue.ts +103 -0
- package/dist/runtime/components/Dialog.vue +152 -0
- package/dist/runtime/components/Dialog.vue.d.ts +103 -0
- package/dist/runtime/components/Divider.d.vue.ts +51 -0
- package/dist/runtime/components/Divider.vue +52 -0
- package/dist/runtime/components/Divider.vue.d.ts +51 -0
- package/dist/runtime/components/Drawer.d.vue.ts +30 -0
- package/dist/runtime/components/Drawer.vue +43 -0
- package/dist/runtime/components/Drawer.vue.d.ts +30 -0
- package/dist/runtime/components/Dropdown.d.vue.ts +34 -0
- package/dist/runtime/components/Dropdown.vue +127 -0
- package/dist/runtime/components/Dropdown.vue.d.ts +34 -0
- package/dist/runtime/components/FileUploader.d.vue.ts +58 -0
- package/dist/runtime/components/FileUploader.vue +202 -0
- package/dist/runtime/components/FileUploader.vue.d.ts +58 -0
- package/dist/runtime/components/Icon.d.vue.ts +41 -0
- package/dist/runtime/components/Icon.vue +66 -0
- package/dist/runtime/components/Icon.vue.d.ts +41 -0
- package/dist/runtime/components/Image.d.vue.ts +77 -0
- package/dist/runtime/components/Image.vue +61 -0
- package/dist/runtime/components/Image.vue.d.ts +77 -0
- package/dist/runtime/components/Input.d.vue.ts +66 -0
- package/dist/runtime/components/Input.vue +233 -0
- package/dist/runtime/components/Input.vue.d.ts +66 -0
- package/dist/runtime/components/Radio.d.vue.ts +41 -0
- package/dist/runtime/components/Radio.vue +222 -0
- package/dist/runtime/components/Radio.vue.d.ts +41 -0
- package/dist/runtime/components/ScrollArea.d.vue.ts +79 -0
- package/dist/runtime/components/ScrollArea.vue +36 -0
- package/dist/runtime/components/ScrollArea.vue.d.ts +79 -0
- package/dist/runtime/components/Select.d.vue.ts +43 -0
- package/dist/runtime/components/Select.vue +200 -0
- package/dist/runtime/components/Select.vue.d.ts +43 -0
- package/dist/runtime/components/Stepper.d.vue.ts +46 -0
- package/dist/runtime/components/Stepper.vue +218 -0
- package/dist/runtime/components/Stepper.vue.d.ts +46 -0
- package/dist/runtime/components/TabPanel.d.vue.ts +17 -0
- package/dist/runtime/components/TabPanel.vue +21 -0
- package/dist/runtime/components/TabPanel.vue.d.ts +17 -0
- package/dist/runtime/components/Table.d.vue.ts +40 -0
- package/dist/runtime/components/Table.vue +92 -0
- package/dist/runtime/components/Table.vue.d.ts +40 -0
- package/dist/runtime/components/Tabs.d.vue.ts +20 -0
- package/dist/runtime/components/Tabs.vue +62 -0
- package/dist/runtime/components/Tabs.vue.d.ts +20 -0
- package/dist/runtime/components/Textarea.d.vue.ts +208 -0
- package/dist/runtime/components/Textarea.vue +185 -0
- package/dist/runtime/components/Textarea.vue.d.ts +208 -0
- package/dist/runtime/components/Toggle.d.vue.ts +36 -0
- package/dist/runtime/components/Toggle.vue +173 -0
- package/dist/runtime/components/Toggle.vue.d.ts +36 -0
- package/dist/runtime/components/Tooltip.d.vue.ts +63 -0
- package/dist/runtime/components/Tooltip.vue +144 -0
- package/dist/runtime/components/Tooltip.vue.d.ts +63 -0
- package/dist/runtime/components/uiProps.d.ts +38 -0
- package/dist/runtime/components/uiProps.js +11 -0
- package/dist/runtime/components/useUiClasses.d.ts +43 -0
- package/dist/runtime/components/useUiClasses.js +124 -0
- package/dist/runtime/composables/plugin.d.ts +2 -0
- package/dist/runtime/composables/plugin.js +3 -0
- package/dist/runtime/tailwind-color.d.ts +2 -0
- package/dist/runtime/tailwind-color.js +5859 -0
- package/package.json +12 -46
- package/LICENSE +0 -21
- package/README.md +0 -232
- package/ui-library/dist/module.mjs +0 -22
- /package/{ui-library/dist → dist}/module.d.mts +0 -0
- /package/{ui-library/dist → dist}/types.d.mts +0 -0
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
name: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
library: {
|
|
7
|
+
type: StringConstructor;
|
|
8
|
+
default: string;
|
|
9
|
+
};
|
|
10
|
+
color: {
|
|
11
|
+
type: StringConstructor;
|
|
12
|
+
default: string;
|
|
13
|
+
};
|
|
14
|
+
size: {
|
|
15
|
+
type: StringConstructor;
|
|
16
|
+
default: string;
|
|
17
|
+
};
|
|
18
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
19
|
+
name: {
|
|
20
|
+
type: StringConstructor;
|
|
21
|
+
required: true;
|
|
22
|
+
};
|
|
23
|
+
library: {
|
|
24
|
+
type: StringConstructor;
|
|
25
|
+
default: string;
|
|
26
|
+
};
|
|
27
|
+
color: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
default: string;
|
|
30
|
+
};
|
|
31
|
+
size: {
|
|
32
|
+
type: StringConstructor;
|
|
33
|
+
default: string;
|
|
34
|
+
};
|
|
35
|
+
}>> & Readonly<{}>, {
|
|
36
|
+
color: string;
|
|
37
|
+
size: string;
|
|
38
|
+
library: string;
|
|
39
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
40
|
+
declare const _default: typeof __VLS_export;
|
|
41
|
+
export default _default;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
src: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
alt: {
|
|
7
|
+
type: StringConstructor;
|
|
8
|
+
default: string;
|
|
9
|
+
};
|
|
10
|
+
placeholder: {
|
|
11
|
+
type: StringConstructor;
|
|
12
|
+
default: string;
|
|
13
|
+
};
|
|
14
|
+
width: {
|
|
15
|
+
type: StringConstructor;
|
|
16
|
+
default: string;
|
|
17
|
+
};
|
|
18
|
+
height: {
|
|
19
|
+
type: StringConstructor;
|
|
20
|
+
default: string;
|
|
21
|
+
};
|
|
22
|
+
fit: {
|
|
23
|
+
type: StringConstructor;
|
|
24
|
+
default: string;
|
|
25
|
+
};
|
|
26
|
+
borderColor: {
|
|
27
|
+
type: StringConstructor;
|
|
28
|
+
default: string;
|
|
29
|
+
};
|
|
30
|
+
borderType: {
|
|
31
|
+
type: StringConstructor;
|
|
32
|
+
default: string;
|
|
33
|
+
};
|
|
34
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
35
|
+
src: {
|
|
36
|
+
type: StringConstructor;
|
|
37
|
+
required: true;
|
|
38
|
+
};
|
|
39
|
+
alt: {
|
|
40
|
+
type: StringConstructor;
|
|
41
|
+
default: string;
|
|
42
|
+
};
|
|
43
|
+
placeholder: {
|
|
44
|
+
type: StringConstructor;
|
|
45
|
+
default: string;
|
|
46
|
+
};
|
|
47
|
+
width: {
|
|
48
|
+
type: StringConstructor;
|
|
49
|
+
default: string;
|
|
50
|
+
};
|
|
51
|
+
height: {
|
|
52
|
+
type: StringConstructor;
|
|
53
|
+
default: string;
|
|
54
|
+
};
|
|
55
|
+
fit: {
|
|
56
|
+
type: StringConstructor;
|
|
57
|
+
default: string;
|
|
58
|
+
};
|
|
59
|
+
borderColor: {
|
|
60
|
+
type: StringConstructor;
|
|
61
|
+
default: string;
|
|
62
|
+
};
|
|
63
|
+
borderType: {
|
|
64
|
+
type: StringConstructor;
|
|
65
|
+
default: string;
|
|
66
|
+
};
|
|
67
|
+
}>> & Readonly<{}>, {
|
|
68
|
+
borderColor: string;
|
|
69
|
+
alt: string;
|
|
70
|
+
placeholder: string;
|
|
71
|
+
width: string;
|
|
72
|
+
height: string;
|
|
73
|
+
fit: string;
|
|
74
|
+
borderType: string;
|
|
75
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
76
|
+
declare const _default: typeof __VLS_export;
|
|
77
|
+
export default _default;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineOptions({
|
|
3
|
+
inheritAttrs: false
|
|
4
|
+
});
|
|
5
|
+
import { computed, ref } from "vue";
|
|
6
|
+
const props = defineProps({
|
|
7
|
+
src: { type: String, required: true },
|
|
8
|
+
alt: { type: String, default: "" },
|
|
9
|
+
placeholder: {
|
|
10
|
+
type: String,
|
|
11
|
+
default: "/images/placeholder.png"
|
|
12
|
+
},
|
|
13
|
+
width: { type: String, default: "100%" },
|
|
14
|
+
height: { type: String, default: "auto" },
|
|
15
|
+
fit: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: "cover"
|
|
18
|
+
},
|
|
19
|
+
borderColor: {
|
|
20
|
+
type: String,
|
|
21
|
+
default: ""
|
|
22
|
+
},
|
|
23
|
+
borderType: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: "none"
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
const imageSrc = ref(props.src);
|
|
29
|
+
const isHex = (val) => val.startsWith("#");
|
|
30
|
+
const imageStyle = computed(() => {
|
|
31
|
+
const style = {
|
|
32
|
+
width: props.width,
|
|
33
|
+
height: props.height,
|
|
34
|
+
objectFit: props.fit
|
|
35
|
+
};
|
|
36
|
+
if (isHex(props.borderColor)) {
|
|
37
|
+
style.borderColor = props.borderColor;
|
|
38
|
+
}
|
|
39
|
+
return style;
|
|
40
|
+
});
|
|
41
|
+
const imageClass = computed(() => [
|
|
42
|
+
props.borderType !== "none" ? "border" : "",
|
|
43
|
+
props.borderType === "dashed" ? "border-dashed" : "",
|
|
44
|
+
props.borderType === "dotted" ? "border-dotted" : "",
|
|
45
|
+
!isHex(props.borderColor) ? `border-${props.borderColor}` : ""
|
|
46
|
+
]);
|
|
47
|
+
function onError() {
|
|
48
|
+
imageSrc.value = props.placeholder;
|
|
49
|
+
}
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<template>
|
|
53
|
+
<img
|
|
54
|
+
:src="imageSrc"
|
|
55
|
+
:alt="alt"
|
|
56
|
+
:class="imageClass"
|
|
57
|
+
:style="imageStyle"
|
|
58
|
+
@error="onError"
|
|
59
|
+
v-bind="$attrs"
|
|
60
|
+
>
|
|
61
|
+
</template>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
src: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
alt: {
|
|
7
|
+
type: StringConstructor;
|
|
8
|
+
default: string;
|
|
9
|
+
};
|
|
10
|
+
placeholder: {
|
|
11
|
+
type: StringConstructor;
|
|
12
|
+
default: string;
|
|
13
|
+
};
|
|
14
|
+
width: {
|
|
15
|
+
type: StringConstructor;
|
|
16
|
+
default: string;
|
|
17
|
+
};
|
|
18
|
+
height: {
|
|
19
|
+
type: StringConstructor;
|
|
20
|
+
default: string;
|
|
21
|
+
};
|
|
22
|
+
fit: {
|
|
23
|
+
type: StringConstructor;
|
|
24
|
+
default: string;
|
|
25
|
+
};
|
|
26
|
+
borderColor: {
|
|
27
|
+
type: StringConstructor;
|
|
28
|
+
default: string;
|
|
29
|
+
};
|
|
30
|
+
borderType: {
|
|
31
|
+
type: StringConstructor;
|
|
32
|
+
default: string;
|
|
33
|
+
};
|
|
34
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
35
|
+
src: {
|
|
36
|
+
type: StringConstructor;
|
|
37
|
+
required: true;
|
|
38
|
+
};
|
|
39
|
+
alt: {
|
|
40
|
+
type: StringConstructor;
|
|
41
|
+
default: string;
|
|
42
|
+
};
|
|
43
|
+
placeholder: {
|
|
44
|
+
type: StringConstructor;
|
|
45
|
+
default: string;
|
|
46
|
+
};
|
|
47
|
+
width: {
|
|
48
|
+
type: StringConstructor;
|
|
49
|
+
default: string;
|
|
50
|
+
};
|
|
51
|
+
height: {
|
|
52
|
+
type: StringConstructor;
|
|
53
|
+
default: string;
|
|
54
|
+
};
|
|
55
|
+
fit: {
|
|
56
|
+
type: StringConstructor;
|
|
57
|
+
default: string;
|
|
58
|
+
};
|
|
59
|
+
borderColor: {
|
|
60
|
+
type: StringConstructor;
|
|
61
|
+
default: string;
|
|
62
|
+
};
|
|
63
|
+
borderType: {
|
|
64
|
+
type: StringConstructor;
|
|
65
|
+
default: string;
|
|
66
|
+
};
|
|
67
|
+
}>> & Readonly<{}>, {
|
|
68
|
+
borderColor: string;
|
|
69
|
+
alt: string;
|
|
70
|
+
placeholder: string;
|
|
71
|
+
width: string;
|
|
72
|
+
height: string;
|
|
73
|
+
fit: string;
|
|
74
|
+
borderType: string;
|
|
75
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
76
|
+
declare const _default: typeof __VLS_export;
|
|
77
|
+
export default _default;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
type SupportedInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time';
|
|
2
|
+
type ValidationRule = "alphabets" | "numbers" | "spaces" | "name" | "punctuation" | "integer" | "positive" | "negative" | "decimal" | "scientific" | "uppercase" | "lowercase";
|
|
3
|
+
type ValidateOn = "input" | "blur";
|
|
4
|
+
type __VLS_Props = {
|
|
5
|
+
modelValue: string | number;
|
|
6
|
+
label: string;
|
|
7
|
+
hint?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
case?: "upper" | "lower" | "capitalize" | "normal" | null;
|
|
10
|
+
size?: string;
|
|
11
|
+
color?: string;
|
|
12
|
+
rounded?: string;
|
|
13
|
+
dense?: boolean;
|
|
14
|
+
outlined?: boolean;
|
|
15
|
+
borderless?: boolean;
|
|
16
|
+
flat?: boolean;
|
|
17
|
+
type?: SupportedInputType;
|
|
18
|
+
allow?: ValidationRule[];
|
|
19
|
+
deny?: ValidationRule[];
|
|
20
|
+
supportedValues?: Array<string | number>;
|
|
21
|
+
unsupportedValues?: Array<string | number>;
|
|
22
|
+
required?: boolean;
|
|
23
|
+
regex?: string | RegExp;
|
|
24
|
+
minLength?: number;
|
|
25
|
+
maxLength?: number;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
readonly?: boolean;
|
|
28
|
+
autocomplete?: string;
|
|
29
|
+
validateOn?: ValidateOn;
|
|
30
|
+
};
|
|
31
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
32
|
+
"update:modelValue": (value: string) => any;
|
|
33
|
+
invalid: (error: string) => any;
|
|
34
|
+
valid: () => any;
|
|
35
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
36
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
37
|
+
onInvalid?: ((error: string) => any) | undefined;
|
|
38
|
+
onValid?: (() => any) | undefined;
|
|
39
|
+
}>, {
|
|
40
|
+
modelValue: string | number;
|
|
41
|
+
disabled: boolean;
|
|
42
|
+
dense: boolean;
|
|
43
|
+
type: SupportedInputType;
|
|
44
|
+
color: string;
|
|
45
|
+
rounded: string;
|
|
46
|
+
size: string;
|
|
47
|
+
required: boolean;
|
|
48
|
+
flat: boolean;
|
|
49
|
+
placeholder: string;
|
|
50
|
+
readonly: boolean;
|
|
51
|
+
hint: string;
|
|
52
|
+
case: "upper" | "lower" | "capitalize" | "normal" | null;
|
|
53
|
+
outlined: boolean;
|
|
54
|
+
borderless: boolean;
|
|
55
|
+
allow: ValidationRule[];
|
|
56
|
+
deny: ValidationRule[];
|
|
57
|
+
supportedValues: Array<string | number>;
|
|
58
|
+
unsupportedValues: Array<string | number>;
|
|
59
|
+
regex: string | RegExp;
|
|
60
|
+
minLength: number;
|
|
61
|
+
maxLength: number;
|
|
62
|
+
autocomplete: string;
|
|
63
|
+
validateOn: ValidateOn;
|
|
64
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
65
|
+
declare const _default: typeof __VLS_export;
|
|
66
|
+
export default _default;
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed, ref } from "vue";
|
|
3
|
+
const props = defineProps({
|
|
4
|
+
modelValue: { type: [String, Number], required: true, default: "" },
|
|
5
|
+
label: { type: String, required: true },
|
|
6
|
+
hint: { type: String, required: false, default: "" },
|
|
7
|
+
placeholder: { type: String, required: false, default: "" },
|
|
8
|
+
case: { type: [String, null], required: false, default: null },
|
|
9
|
+
size: { type: String, required: false, default: "md" },
|
|
10
|
+
color: { type: String, required: false, default: "primary" },
|
|
11
|
+
rounded: { type: String, required: false, default: "md" },
|
|
12
|
+
dense: { type: Boolean, required: false, default: false },
|
|
13
|
+
outlined: { type: Boolean, required: false, default: false },
|
|
14
|
+
borderless: { type: Boolean, required: false, default: false },
|
|
15
|
+
flat: { type: Boolean, required: false, default: false },
|
|
16
|
+
type: { type: String, required: false, default: "text" },
|
|
17
|
+
allow: { type: Array, required: false, default: () => [] },
|
|
18
|
+
deny: { type: Array, required: false, default: () => [] },
|
|
19
|
+
supportedValues: { type: Array, required: false, default: () => [] },
|
|
20
|
+
unsupportedValues: { type: Array, required: false, default: () => [] },
|
|
21
|
+
required: { type: Boolean, required: false, default: false },
|
|
22
|
+
regex: { type: null, required: false, default: "" },
|
|
23
|
+
minLength: { type: Number, required: false, default: void 0 },
|
|
24
|
+
maxLength: { type: Number, required: false, default: void 0 },
|
|
25
|
+
disabled: { type: Boolean, required: false, default: false },
|
|
26
|
+
readonly: { type: Boolean, required: false, default: false },
|
|
27
|
+
autocomplete: { type: String, required: false, default: "off" },
|
|
28
|
+
validateOn: { type: String, required: false, default: "input" }
|
|
29
|
+
});
|
|
30
|
+
const emit = defineEmits(["update:modelValue", "valid", "invalid"]);
|
|
31
|
+
const validationError = ref("");
|
|
32
|
+
const NATIVE_PATTERNS = {
|
|
33
|
+
email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
|
|
34
|
+
url: /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/\S*)?$/i,
|
|
35
|
+
tel: /^\+?[1-9]\d{6,14}$/
|
|
36
|
+
};
|
|
37
|
+
const RULE_PATTERNS = {
|
|
38
|
+
alphabets: /^[A-Za-z]+$/,
|
|
39
|
+
numbers: /^[0-9]+$/,
|
|
40
|
+
spaces: /\s/,
|
|
41
|
+
name: /^[A-Za-z.'-\s]+$/,
|
|
42
|
+
punctuation: /[.,!?;:'"()-]/,
|
|
43
|
+
integer: /^-?\d+$/,
|
|
44
|
+
positive: /^\d+$/,
|
|
45
|
+
negative: /^-\d+$/,
|
|
46
|
+
decimal: /^-?\d*\.?\d+$/,
|
|
47
|
+
scientific: /^-?\d+(\.\d+)?e[-+]?\d+$/i,
|
|
48
|
+
uppercase: /^[A-Z]+$/,
|
|
49
|
+
lowercase: /^[a-z]+$/
|
|
50
|
+
};
|
|
51
|
+
function validate(value) {
|
|
52
|
+
validationError.value = "";
|
|
53
|
+
if (props.required && !value.trim()) {
|
|
54
|
+
validationError.value = "This field is required.";
|
|
55
|
+
return false;
|
|
56
|
+
}
|
|
57
|
+
if (props.minLength !== void 0 && value.length < props.minLength) {
|
|
58
|
+
validationError.value = `Minimum ${props.minLength} characters required.`;
|
|
59
|
+
return false;
|
|
60
|
+
}
|
|
61
|
+
if (props.maxLength !== void 0 && value.length > props.maxLength) {
|
|
62
|
+
validationError.value = `Maximum ${props.maxLength} characters allowed.`;
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
65
|
+
if (props.supportedValues.length && !props.supportedValues.includes(value)) {
|
|
66
|
+
validationError.value = "Value is not allowed.";
|
|
67
|
+
return false;
|
|
68
|
+
}
|
|
69
|
+
if (props.unsupportedValues.includes(value)) {
|
|
70
|
+
validationError.value = "Value is not permitted.";
|
|
71
|
+
return false;
|
|
72
|
+
}
|
|
73
|
+
const nativePattern = NATIVE_PATTERNS[props.type];
|
|
74
|
+
if (nativePattern && value && !nativePattern.test(value)) {
|
|
75
|
+
validationError.value = `Invalid ${props.type} format.`;
|
|
76
|
+
return false;
|
|
77
|
+
}
|
|
78
|
+
for (const rule of props.allow) {
|
|
79
|
+
const regex = RULE_PATTERNS[rule];
|
|
80
|
+
if (regex && value && !regex.test(value)) {
|
|
81
|
+
validationError.value = `Failed validation: ${rule}`;
|
|
82
|
+
return false;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
for (const rule of props.deny) {
|
|
86
|
+
const regex = RULE_PATTERNS[rule];
|
|
87
|
+
if (regex && regex.test(value)) {
|
|
88
|
+
validationError.value = `Contains unsupported value: ${rule}`;
|
|
89
|
+
return false;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
if (props.regex) {
|
|
93
|
+
const regex = props.regex instanceof RegExp ? props.regex : new RegExp(props.regex);
|
|
94
|
+
if (!regex.test(value)) {
|
|
95
|
+
validationError.value = "Custom validation failed.";
|
|
96
|
+
return false;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
return true;
|
|
100
|
+
}
|
|
101
|
+
function runValidation(value) {
|
|
102
|
+
const isValid = validate(value);
|
|
103
|
+
if (isValid) {
|
|
104
|
+
emit("valid");
|
|
105
|
+
} else {
|
|
106
|
+
emit("invalid", validationError.value);
|
|
107
|
+
}
|
|
108
|
+
return isValid;
|
|
109
|
+
}
|
|
110
|
+
function handleInput(event) {
|
|
111
|
+
const target = event.target;
|
|
112
|
+
let value = target.value;
|
|
113
|
+
if (props.maxLength !== void 0 && value.length > props.maxLength) {
|
|
114
|
+
value = value.slice(0, props.maxLength);
|
|
115
|
+
}
|
|
116
|
+
emit("update:modelValue", value);
|
|
117
|
+
if (props.validateOn === "input") {
|
|
118
|
+
runValidation(value);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
function handleBlur(event) {
|
|
122
|
+
if (props.validateOn !== "blur") return;
|
|
123
|
+
const target = event.target;
|
|
124
|
+
runValidation(target.value);
|
|
125
|
+
}
|
|
126
|
+
const isHex = (val) => val.startsWith("#");
|
|
127
|
+
const roundedMap = {
|
|
128
|
+
none: "rounded-none",
|
|
129
|
+
sm: "rounded-sm",
|
|
130
|
+
md: "rounded-md",
|
|
131
|
+
lg: "rounded-lg",
|
|
132
|
+
xl: "rounded-xl",
|
|
133
|
+
full: "rounded-full"
|
|
134
|
+
};
|
|
135
|
+
const computedClass = computed(() => {
|
|
136
|
+
let classes = "input block w-full transition-all duration-300";
|
|
137
|
+
if (props.borderless) {
|
|
138
|
+
classes += " border-none bg-transparent";
|
|
139
|
+
} else if (props.outlined) {
|
|
140
|
+
classes += " border";
|
|
141
|
+
} else {
|
|
142
|
+
classes += " border-0 border-b";
|
|
143
|
+
}
|
|
144
|
+
classes += ` ${roundedMap[props.rounded] ?? roundedMap.md}`;
|
|
145
|
+
if (!props.flat) {
|
|
146
|
+
classes += " shadow-sm";
|
|
147
|
+
}
|
|
148
|
+
if (props.disabled) {
|
|
149
|
+
classes += " opacity-50 cursor-not-allowed";
|
|
150
|
+
}
|
|
151
|
+
if (props.size === "sm") {
|
|
152
|
+
classes += " text-sm";
|
|
153
|
+
} else if (props.size === "lg") {
|
|
154
|
+
classes += " text-lg";
|
|
155
|
+
} else {
|
|
156
|
+
classes += " text-base";
|
|
157
|
+
}
|
|
158
|
+
if (props.case === "upper") {
|
|
159
|
+
classes += " uppercase";
|
|
160
|
+
} else if (props.case === "lower") {
|
|
161
|
+
classes += " lowercase";
|
|
162
|
+
} else if (props.case === "capitalize") {
|
|
163
|
+
classes += " capitalize";
|
|
164
|
+
}
|
|
165
|
+
if (validationError.value) {
|
|
166
|
+
classes += " border-red-500";
|
|
167
|
+
} else {
|
|
168
|
+
classes += ` ${props.color && !isHex(props.color) ? `border-${props.color} focus:ring-${props.color} text-${props.color} ` : ""}`;
|
|
169
|
+
}
|
|
170
|
+
if (props.modelValue !== null && props.modelValue !== "" && props.modelValue !== void 0)
|
|
171
|
+
classes += " has-value";
|
|
172
|
+
return classes;
|
|
173
|
+
});
|
|
174
|
+
const computedStyle = computed(() => {
|
|
175
|
+
let styles = {};
|
|
176
|
+
if (props.color && isHex(props.color)) {
|
|
177
|
+
styles["--tw-ring-color"] = props.color;
|
|
178
|
+
styles["border-color"] = props.color;
|
|
179
|
+
}
|
|
180
|
+
return styles;
|
|
181
|
+
});
|
|
182
|
+
const visibility = ref(false);
|
|
183
|
+
const inputType = computed(() => props.type === "password" ? visibility.value ? "text" : "password" : props.type);
|
|
184
|
+
const inputAttrs = computed(() => {
|
|
185
|
+
let inputAttrs2 = {};
|
|
186
|
+
if (props.type) inputAttrs2 = { ...inputAttrs2, type: props.type === "password" ? inputType.value : props.type };
|
|
187
|
+
if (props.placeholder) inputAttrs2 = { ...inputAttrs2, placeholder: props.placeholder };
|
|
188
|
+
if (props.disabled) inputAttrs2 = { ...inputAttrs2, disabled: props.disabled };
|
|
189
|
+
if (props.readonly) inputAttrs2 = { ...inputAttrs2, readonly: props.readonly };
|
|
190
|
+
if (props.autocomplete) inputAttrs2 = { ...inputAttrs2, autocomplete: props.autocomplete };
|
|
191
|
+
if (props.required) inputAttrs2 = { ...inputAttrs2, required: props.required };
|
|
192
|
+
if (props.maxLength) inputAttrs2 = { ...inputAttrs2, maxlength: props.maxLength };
|
|
193
|
+
return inputAttrs2;
|
|
194
|
+
});
|
|
195
|
+
</script>
|
|
196
|
+
|
|
197
|
+
<template>
|
|
198
|
+
<div class="input-container" :class="{ dense: !outlined || dense, [`input-${size}`]: size }">
|
|
199
|
+
<input
|
|
200
|
+
:value="modelValue"
|
|
201
|
+
:class="computedClass"
|
|
202
|
+
:style="computedStyle"
|
|
203
|
+
@input="handleInput"
|
|
204
|
+
@blur="handleBlur"
|
|
205
|
+
v-bind="inputAttrs"
|
|
206
|
+
/>
|
|
207
|
+
|
|
208
|
+
<label class="label" :class="!isHex(color) ? `text-${color}` : ''" :style="isHex(color) ? { color } : {}">
|
|
209
|
+
{{ label }}
|
|
210
|
+
</label>
|
|
211
|
+
|
|
212
|
+
<div class="absolute right-0 top-1/2 transform -translate-y-1/2">
|
|
213
|
+
<UIButton v-if="type === 'password'" :icon="visibility ? 'visibility_off' : 'visibility'" flat dense color="gray-400" @click="visibility = !visibility" />
|
|
214
|
+
</div>
|
|
215
|
+
<p
|
|
216
|
+
v-if="hint && !validationError"
|
|
217
|
+
class="hint-text"
|
|
218
|
+
>
|
|
219
|
+
{{ hint }}
|
|
220
|
+
</p>
|
|
221
|
+
|
|
222
|
+
<p
|
|
223
|
+
v-if="validationError"
|
|
224
|
+
class="error-text"
|
|
225
|
+
>
|
|
226
|
+
{{ validationError }}
|
|
227
|
+
</p>
|
|
228
|
+
</div>
|
|
229
|
+
</template>
|
|
230
|
+
|
|
231
|
+
<style scoped>
|
|
232
|
+
.input-container{margin:20px 0 10px;position:relative}.input-container.dense{margin:10px 0}.input-container .input{padding:10px}.input-container.dense .input{padding:6px 10px}.input:focus{outline:none}.label{color:#9ca3af;left:10px;padding:0 5px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:top .2s ease,font-size .2s ease,color .2s ease,transform .2s ease}.input-container:has(input[type=date]) .label,.input-container:has(input[type=datetime-local]) .label,.input-container:has(input[type=month]) .label,.input-container:has(input[type=time]) .label,.input-container:has(input[type=week]) .label{color:gray;left:5px;top:-20%;transform:none;z-index:1}.input-container.input-lg.dense .input:-moz-placeholder+.label,.input:-moz-placeholder+.label{color:gray;left:5px;top:-20px;transform:none;z-index:1}.input-container.input-lg.dense .input.has-value+.label,.input-container.input-lg.dense .input:focus+.label,.input-container.input-lg.dense .input:placeholder-shown+.label,.input.has-value+.label,.input:focus+.label,.input:placeholder-shown+.label{color:gray;left:5px;top:-20px;transform:none;z-index:1}.input-container.dense .input:-moz-placeholder+.label{top:-10px}.input-container.dense .input.has-value+.label,.input-container.dense .input:focus+.label,.input-container.dense .input:placeholder-shown+.label{top:-10px}.input-container.input-lg .input:-moz-placeholder+.label{top:-24px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.label,.input-container.input-lg .input:placeholder-shown+.label{top:-24px}.input-container.input-sm .label{font-size:14px}.input-container.input-md .label{font-size:16px}.input-container.input-lg .label{font-size:18px}.input-container.input-sm .input:-moz-placeholder+.label{font-size:12px}.input-container.input-sm .input.has-value+.label,.input-container.input-sm .input:focus+.label,.input-container.input-sm .input:placeholder-shown+.label{font-size:12px}.input-container.input-md .input:-moz-placeholder+.label{font-size:14px}.input-container.input-md .input.has-value+.label,.input-container.input-md .input:focus+.label,.input-container.input-md .input:placeholder-shown+.label{font-size:14px}.input-container.input-lg .input:-moz-placeholder+.label{font-size:16px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.label,.input-container.input-lg .input:placeholder-shown+.label{font-size:16px}.hint-text{color:#6b7280;font-size:12px;margin-left:5px}.char-count{color:#6b7280}.char-count,.error-text{font-size:.875rem;margin-top:4px}.error-text{color:#ef4444}
|
|
233
|
+
</style>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
type SupportedInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time';
|
|
2
|
+
type ValidationRule = "alphabets" | "numbers" | "spaces" | "name" | "punctuation" | "integer" | "positive" | "negative" | "decimal" | "scientific" | "uppercase" | "lowercase";
|
|
3
|
+
type ValidateOn = "input" | "blur";
|
|
4
|
+
type __VLS_Props = {
|
|
5
|
+
modelValue: string | number;
|
|
6
|
+
label: string;
|
|
7
|
+
hint?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
case?: "upper" | "lower" | "capitalize" | "normal" | null;
|
|
10
|
+
size?: string;
|
|
11
|
+
color?: string;
|
|
12
|
+
rounded?: string;
|
|
13
|
+
dense?: boolean;
|
|
14
|
+
outlined?: boolean;
|
|
15
|
+
borderless?: boolean;
|
|
16
|
+
flat?: boolean;
|
|
17
|
+
type?: SupportedInputType;
|
|
18
|
+
allow?: ValidationRule[];
|
|
19
|
+
deny?: ValidationRule[];
|
|
20
|
+
supportedValues?: Array<string | number>;
|
|
21
|
+
unsupportedValues?: Array<string | number>;
|
|
22
|
+
required?: boolean;
|
|
23
|
+
regex?: string | RegExp;
|
|
24
|
+
minLength?: number;
|
|
25
|
+
maxLength?: number;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
readonly?: boolean;
|
|
28
|
+
autocomplete?: string;
|
|
29
|
+
validateOn?: ValidateOn;
|
|
30
|
+
};
|
|
31
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
32
|
+
"update:modelValue": (value: string) => any;
|
|
33
|
+
invalid: (error: string) => any;
|
|
34
|
+
valid: () => any;
|
|
35
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
36
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
37
|
+
onInvalid?: ((error: string) => any) | undefined;
|
|
38
|
+
onValid?: (() => any) | undefined;
|
|
39
|
+
}>, {
|
|
40
|
+
modelValue: string | number;
|
|
41
|
+
disabled: boolean;
|
|
42
|
+
dense: boolean;
|
|
43
|
+
type: SupportedInputType;
|
|
44
|
+
color: string;
|
|
45
|
+
rounded: string;
|
|
46
|
+
size: string;
|
|
47
|
+
required: boolean;
|
|
48
|
+
flat: boolean;
|
|
49
|
+
placeholder: string;
|
|
50
|
+
readonly: boolean;
|
|
51
|
+
hint: string;
|
|
52
|
+
case: "upper" | "lower" | "capitalize" | "normal" | null;
|
|
53
|
+
outlined: boolean;
|
|
54
|
+
borderless: boolean;
|
|
55
|
+
allow: ValidationRule[];
|
|
56
|
+
deny: ValidationRule[];
|
|
57
|
+
supportedValues: Array<string | number>;
|
|
58
|
+
unsupportedValues: Array<string | number>;
|
|
59
|
+
regex: string | RegExp;
|
|
60
|
+
minLength: number;
|
|
61
|
+
maxLength: number;
|
|
62
|
+
autocomplete: string;
|
|
63
|
+
validateOn: ValidateOn;
|
|
64
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
65
|
+
declare const _default: typeof __VLS_export;
|
|
66
|
+
export default _default;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
2
|
+
type RadioSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'full';
|
|
4
|
+
type __VLS_Props = {
|
|
5
|
+
modelValue?: string | number | boolean;
|
|
6
|
+
value: string | number | boolean;
|
|
7
|
+
label: string;
|
|
8
|
+
id?: string;
|
|
9
|
+
name?: string;
|
|
10
|
+
hint?: string;
|
|
11
|
+
icon?: string;
|
|
12
|
+
disable?: boolean;
|
|
13
|
+
color?: string;
|
|
14
|
+
size?: RadioSize;
|
|
15
|
+
rounded?: Rounded;
|
|
16
|
+
flat?: boolean;
|
|
17
|
+
bordered?: boolean;
|
|
18
|
+
borderColor?: string;
|
|
19
|
+
labelPosition?: LabelPosition;
|
|
20
|
+
};
|
|
21
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
22
|
+
"update:modelValue": (value: string | number | boolean) => any;
|
|
23
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
24
|
+
"onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
|
|
25
|
+
}>, {
|
|
26
|
+
modelValue: string | number | boolean;
|
|
27
|
+
name: string;
|
|
28
|
+
disable: boolean;
|
|
29
|
+
color: string;
|
|
30
|
+
rounded: Rounded;
|
|
31
|
+
size: RadioSize;
|
|
32
|
+
borderColor: string;
|
|
33
|
+
icon: string;
|
|
34
|
+
flat: boolean;
|
|
35
|
+
id: string;
|
|
36
|
+
bordered: boolean;
|
|
37
|
+
hint: string;
|
|
38
|
+
labelPosition: LabelPosition;
|
|
39
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
40
|
+
declare const _default: typeof __VLS_export;
|
|
41
|
+
export default _default;
|