windly-ui 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/runtime/components/FileUploader.vue +1 -1
- package/dist/runtime/components/Input.vue +3 -3
- package/dist/runtime/components/Select.vue +1 -1
- package/dist/runtime/components/Textarea.vue +1 -1
- package/dist/runtime/components/Toggle.vue +2 -2
- package/dist/runtime/components/useUiClasses.d.ts +12 -12
- package/dist/runtime/components/useUiClasses.js +2 -14
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -96,7 +96,7 @@ const computedClass = computed(() => {
|
|
|
96
96
|
classes += " text-base";
|
|
97
97
|
}
|
|
98
98
|
if (props.color && !isHex(props.color)) {
|
|
99
|
-
classes += ` border-${props.color} focus:ring-
|
|
99
|
+
classes += ` border-${props.color} focus:ring-0 `;
|
|
100
100
|
}
|
|
101
101
|
if (props.width && !supportsWidthValue(props.width)) {
|
|
102
102
|
classes += ` w-${props.width}`;
|
|
@@ -203,9 +203,9 @@ const computedClass = computed(() => {
|
|
|
203
203
|
classes += " capitalize";
|
|
204
204
|
}
|
|
205
205
|
if (hasError.value) {
|
|
206
|
-
classes += " border-red-500 focus:ring-
|
|
206
|
+
classes += " border-red-500 focus:ring-0 ";
|
|
207
207
|
} else {
|
|
208
|
-
classes += ` ${props.color && !isHex(props.color) ? `border-${props.color} focus:ring-
|
|
208
|
+
classes += ` ${props.color && !isHex(props.color) ? `border-${props.color} focus:ring-0 ` : ""}`;
|
|
209
209
|
}
|
|
210
210
|
if (props.width && !supportsWidthValue(props.width)) {
|
|
211
211
|
classes += `w-${props.width} `;
|
|
@@ -276,5 +276,5 @@ const inputAttrs = computed(() => {
|
|
|
276
276
|
</template>
|
|
277
277
|
|
|
278
278
|
<style scoped>
|
|
279
|
-
.input-container{box-sizing:border-box;margin:20px 0 10px;min-width:0;position:relative
|
|
279
|
+
.input-container{box-sizing:border-box;margin:20px 0 10px;min-width:0;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{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{left:5px;top:-20%;transform:none;z-index:1}.input-container.input-lg.dense .input:-moz-placeholder+.label,.input:-moz-placeholder+.label{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{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;overflow-wrap:anywhere;word-break:break-word}.char-count{color:#6b7280}.char-count,.error-text{font-size:.875rem;margin-top:4px}.error-text{color:#ef4444;overflow-wrap:anywhere;word-break:break-word}
|
|
280
280
|
</style>
|
|
@@ -73,7 +73,7 @@ const computedClass = computed(() => {
|
|
|
73
73
|
classes += " text-base";
|
|
74
74
|
}
|
|
75
75
|
if (props.color && !isHex(props.color)) {
|
|
76
|
-
classes += ` border-${props.color} focus:ring-
|
|
76
|
+
classes += ` border-${props.color} focus:ring-0 `;
|
|
77
77
|
}
|
|
78
78
|
if (props.width && !supportsWidthValue(props.width)) {
|
|
79
79
|
classes += ` w-${props.width}`;
|
|
@@ -176,7 +176,7 @@ onBeforeUnmount(() => {
|
|
|
176
176
|
|
|
177
177
|
<template>
|
|
178
178
|
<div class="flex flex-col gap-1">
|
|
179
|
-
<label v-if="label" class="font-medium">
|
|
179
|
+
<label v-if="label" class="font-medium" :class="!isHex(color) ? `text-${color}` : ''" :style="isHex(color) ? `color: ${color}` : ''">
|
|
180
180
|
{{ label }}
|
|
181
181
|
</label>
|
|
182
182
|
|
|
@@ -71,7 +71,7 @@ const toggle = () => {
|
|
|
71
71
|
:aria-checked="isActive"
|
|
72
72
|
:aria-disabled="disabled"
|
|
73
73
|
:class="[
|
|
74
|
-
'relative inline-flex items-center cursor-pointer rounded-full focus-visible:outline-none focus-visible:ring-
|
|
74
|
+
'relative inline-flex items-center cursor-pointer rounded-full focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-1',
|
|
75
75
|
error ? 'focus-visible:ring-red-500' : 'focus-visible:ring-blue-500',
|
|
76
76
|
{ 'opacity-50 pointer-events-none': disabled }
|
|
77
77
|
]"
|
|
@@ -84,7 +84,7 @@ const toggle = () => {
|
|
|
84
84
|
'block rounded-full transition-colors duration-300 ease-in-out',
|
|
85
85
|
toggleSize.bg,
|
|
86
86
|
toggleBgClasses,
|
|
87
|
-
error ? 'ring-
|
|
87
|
+
error ? 'ring-0 ring-red-400' : ''
|
|
88
88
|
]"
|
|
89
89
|
:style="toggleBgStyle"
|
|
90
90
|
/>
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import type { ExtractPropTypes } from "vue";
|
|
2
2
|
import { uiProps } from "./uiProps.js";
|
|
3
3
|
type UiProps = ExtractPropTypes<typeof uiProps>;
|
|
4
|
-
export declare function useUiClasses(props:
|
|
5
|
-
contentClass:
|
|
6
|
-
contentStyle:
|
|
7
|
-
textColor:
|
|
8
|
-
disabled:
|
|
9
|
-
loading:
|
|
10
|
-
color:
|
|
11
|
-
rounded:
|
|
12
|
-
size:
|
|
13
|
-
iconSize:
|
|
4
|
+
export declare function useUiClasses(props: UiProps): {
|
|
5
|
+
contentClass: import("vue").Ref<string, string>;
|
|
6
|
+
contentStyle: import("vue").Ref<string, string>;
|
|
7
|
+
textColor: import("vue").Ref<string, string>;
|
|
8
|
+
disabled: import("vue").Ref<boolean, boolean>;
|
|
9
|
+
loading: import("vue").Ref<boolean, boolean>;
|
|
10
|
+
color: import("vue").Ref<string, string>;
|
|
11
|
+
rounded: import("vue").Ref<string, string>;
|
|
12
|
+
size: import("vue").Ref<string, string>;
|
|
13
|
+
iconSize: import("vue").Ref<string, string>;
|
|
14
14
|
roundedClass: {
|
|
15
15
|
none: string;
|
|
16
16
|
xs: string;
|
|
@@ -34,8 +34,8 @@ export declare function useUiClasses(props: Partial<UiProps>): {
|
|
|
34
34
|
lg: string;
|
|
35
35
|
xl: string;
|
|
36
36
|
};
|
|
37
|
-
colorClass: import("vue").ComputedRef<
|
|
38
|
-
computedContentClass: import("vue").ComputedRef<
|
|
37
|
+
colorClass: import("vue").ComputedRef<string>;
|
|
38
|
+
computedContentClass: import("vue").ComputedRef<string>;
|
|
39
39
|
isColorDark: (color: string) => boolean;
|
|
40
40
|
isHex: (color: string) => boolean;
|
|
41
41
|
isTailwindColor: (color: string) => boolean;
|
|
@@ -1,17 +1,5 @@
|
|
|
1
|
-
import { computed,
|
|
1
|
+
import { computed, toRefs } from "vue";
|
|
2
2
|
export function useUiClasses(props) {
|
|
3
|
-
const safeProps = reactive({
|
|
4
|
-
contentClass: "",
|
|
5
|
-
contentStyle: "",
|
|
6
|
-
textColor: "",
|
|
7
|
-
disabled: false,
|
|
8
|
-
loading: false,
|
|
9
|
-
color: "",
|
|
10
|
-
rounded: "md",
|
|
11
|
-
size: "md",
|
|
12
|
-
iconSize: "md",
|
|
13
|
-
...props
|
|
14
|
-
});
|
|
15
3
|
const {
|
|
16
4
|
contentClass,
|
|
17
5
|
contentStyle,
|
|
@@ -22,7 +10,7 @@ export function useUiClasses(props) {
|
|
|
22
10
|
rounded,
|
|
23
11
|
size,
|
|
24
12
|
iconSize
|
|
25
|
-
} = toRefs(
|
|
13
|
+
} = toRefs(props);
|
|
26
14
|
const roundedClass = {
|
|
27
15
|
none: "rounded-none",
|
|
28
16
|
xs: "rounded-xs",
|