windly-ui 1.1.1 → 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
CHANGED
|
@@ -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>
|
|
@@ -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",
|