windly-ui 1.0.3 → 1.0.5

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.
Files changed (38) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +8 -1
  3. package/dist/runtime/components/Accordion.vue +6 -2
  4. package/dist/runtime/components/Alert.d.vue.ts +83 -0
  5. package/dist/runtime/components/Alert.vue +78 -0
  6. package/dist/runtime/components/Alert.vue.d.ts +83 -0
  7. package/dist/runtime/components/Button.d.vue.ts +9 -0
  8. package/dist/runtime/components/Button.vue +2 -1
  9. package/dist/runtime/components/Button.vue.d.ts +9 -0
  10. package/dist/runtime/components/Dialog.d.vue.ts +9 -49
  11. package/dist/runtime/components/Dialog.vue +18 -85
  12. package/dist/runtime/components/Dialog.vue.d.ts +9 -49
  13. package/dist/runtime/components/FileUploader.d.vue.ts +22 -15
  14. package/dist/runtime/components/FileUploader.vue +286 -130
  15. package/dist/runtime/components/FileUploader.vue.d.ts +22 -15
  16. package/dist/runtime/components/Input.d.vue.ts +5 -3
  17. package/dist/runtime/components/Input.vue +15 -7
  18. package/dist/runtime/components/Input.vue.d.ts +5 -3
  19. package/dist/runtime/components/Select.d.vue.ts +25 -17
  20. package/dist/runtime/components/Select.vue +207 -136
  21. package/dist/runtime/components/Select.vue.d.ts +25 -17
  22. package/dist/runtime/components/Table.d.vue.ts +1 -1
  23. package/dist/runtime/components/Table.vue.d.ts +1 -1
  24. package/dist/runtime/components/Textarea.d.vue.ts +1 -1
  25. package/dist/runtime/components/Textarea.vue.d.ts +1 -1
  26. package/dist/runtime/docs/component.d.vue.ts +28 -0
  27. package/dist/runtime/docs/component.vue +34 -0
  28. package/dist/runtime/docs/component.vue.d.ts +28 -0
  29. package/dist/runtime/docs/index.d.vue.ts +3 -0
  30. package/dist/runtime/docs/index.vue +2537 -0
  31. package/dist/runtime/docs/index.vue.d.ts +3 -0
  32. package/dist/runtime/docs/megaSection.d.vue.ts +39 -0
  33. package/dist/runtime/docs/megaSection.vue +52 -0
  34. package/dist/runtime/docs/megaSection.vue.d.ts +39 -0
  35. package/dist/runtime/docs/section.d.vue.ts +39 -0
  36. package/dist/runtime/docs/section.vue +52 -0
  37. package/dist/runtime/docs/section.vue.d.ts +39 -0
  38. package/package.json +1 -1
package/dist/runtime/components/FileUploader.vue.d.ts CHANGED
@@ -4,22 +4,26 @@ interface UploadedFile {
4
4
  size: number;
5
5
  type: string;
6
6
  }
7
- type Separator = 'solid' | 'dashed' | 'dotted';
8
- type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl';
7
+ type Rounded = "none" | "sm" | "md" | "lg" | "xl" | "full";
8
+ type Separator = "solid" | "dashed" | "dotted";
9
+ type Size = "sm" | "md" | "lg";
9
10
  type __VLS_Props = {
10
11
  modelValue?: UploadedFile[];
11
- header?: string;
12
- subHeader?: string;
12
+ label?: string;
13
+ hint?: string;
13
14
  fileType?: string;
14
15
  multiple?: boolean;
15
- disabled?: boolean;
16
- bordered?: boolean;
17
- flat?: boolean;
16
+ size?: Size;
17
+ color?: string;
18
18
  rounded?: Rounded;
19
- borderColor?: string;
20
- bgColor?: string;
21
- separator?: Separator;
22
19
  dense?: boolean;
20
+ width?: string;
21
+ outlined?: boolean;
22
+ borderless?: boolean;
23
+ flat?: boolean;
24
+ separator?: Separator;
25
+ disabled?: boolean;
26
+ readonly?: boolean;
23
27
  fileRemoverIcon?: string;
24
28
  fileSizeLimitKb?: number;
25
29
  };
@@ -35,16 +39,19 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
35
39
  modelValue: UploadedFile[];
36
40
  disabled: boolean;
37
41
  dense: boolean;
38
- header: string;
42
+ label: string;
43
+ color: string;
39
44
  rounded: Rounded;
40
- borderColor: string;
45
+ size: Size;
41
46
  separator: Separator;
42
47
  flat: boolean;
43
- bordered: boolean;
44
- subHeader: string;
48
+ width: string;
49
+ readonly: boolean;
50
+ hint: string;
45
51
  fileType: string;
46
52
  multiple: boolean;
47
- bgColor: string;
53
+ outlined: boolean;
54
+ borderless: boolean;
48
55
  fileRemoverIcon: string;
49
56
  fileSizeLimitKb: number;
50
57
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
package/dist/runtime/components/Input.d.vue.ts CHANGED
@@ -3,7 +3,7 @@ type ValidationRule = "alphabets" | "numbers" | "spaces" | "name" | "punctuation
3
3
  type ValidateOn = "input" | "blur";
4
4
  type __VLS_Props = {
5
5
  modelValue: string | number;
6
- label: string;
6
+ label?: string;
7
7
  hint?: string;
8
8
  placeholder?: string;
9
9
  case?: "upper" | "lower" | "capitalize" | "normal" | null;
@@ -11,6 +11,7 @@ type __VLS_Props = {
11
11
  color?: string;
12
12
  rounded?: string;
13
13
  dense?: boolean;
14
+ width?: string;
14
15
  outlined?: boolean;
15
16
  borderless?: boolean;
16
17
  flat?: boolean;
@@ -41,17 +42,18 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
41
42
  disabled: boolean;
42
43
  dense: boolean;
43
44
  type: SupportedInputType;
45
+ required: boolean;
44
46
  color: string;
45
47
  rounded: string;
46
48
  size: string;
47
- required: boolean;
48
49
  flat: boolean;
49
50
  placeholder: string;
51
+ width: string;
50
52
  readonly: boolean;
51
53
  hint: string;
52
- case: "upper" | "lower" | "capitalize" | "normal" | null;
53
54
  outlined: boolean;
54
55
  borderless: boolean;
56
+ case: "upper" | "lower" | "capitalize" | "normal" | null;
55
57
  allow: ValidationRule[];
56
58
  deny: ValidationRule[];
57
59
  supportedValues: Array<string | number>;
package/dist/runtime/components/Input.vue CHANGED
@@ -2,14 +2,15 @@
2
2
  import { computed, ref } from "vue";
3
3
  const props = defineProps({
4
4
  modelValue: { type: [String, Number], required: true, default: "" },
5
- label: { type: String, required: true },
5
+ label: { type: String, required: false },
6
6
  hint: { type: String, required: false, default: "" },
7
7
  placeholder: { type: String, required: false, default: "" },
8
8
  case: { type: [String, null], required: false, default: null },
9
9
  size: { type: String, required: false, default: "md" },
10
- color: { type: String, required: false, default: "primary" },
10
+ color: { type: String, required: false, default: "" },
11
11
  rounded: { type: String, required: false, default: "md" },
12
12
  dense: { type: Boolean, required: false, default: false },
13
+ width: { type: String, required: false, default: "" },
13
14
  outlined: { type: Boolean, required: false, default: false },
14
15
  borderless: { type: Boolean, required: false, default: false },
15
16
  flat: { type: Boolean, required: false, default: false },
@@ -133,7 +134,7 @@ const roundedMap = {
133
134
  full: "rounded-full"
134
135
  };
135
136
  const computedClass = computed(() => {
136
- let classes = "input block w-full transition-all duration-300";
137
+ let classes = "input block transition-all duration-300";
137
138
  if (props.borderless) {
138
139
  classes += " border-none bg-transparent";
139
140
  } else if (props.outlined) {
@@ -165,14 +166,21 @@ const computedClass = computed(() => {
165
166
  if (validationError.value) {
166
167
  classes += " border-red-500";
167
168
  } else {
168
- classes += ` ${props.color && !isHex(props.color) ? `border-${props.color} focus:ring-${props.color} text-${props.color} ` : ""}`;
169
+ classes += ` ${props.color && !isHex(props.color) ? `border-${props.color} focus:ring-${props.color} ` : ""}`;
169
170
  }
171
+ if (props.width && !CSS.supports("width", props.width)) {
172
+ classes += `w-${props.width} `;
173
+ }
174
+ if (!props.width) classes += "w-full ";
170
175
  if (props.modelValue !== null && props.modelValue !== "" && props.modelValue !== void 0)
171
176
  classes += " has-value";
172
177
  return classes;
173
178
  });
174
179
  const computedStyle = computed(() => {
175
180
  let styles = {};
181
+ if (props.width && CSS.supports("width", props.width)) {
182
+ styles["width"] = props.width;
183
+ }
176
184
  if (props.color && isHex(props.color)) {
177
185
  styles["--tw-ring-color"] = props.color;
178
186
  styles["border-color"] = props.color;
@@ -202,10 +210,10 @@ const inputAttrs = computed(() => {
202
210
  :style="computedStyle"
203
211
  @input="handleInput"
204
212
  @blur="handleBlur"
205
- v-bind="inputAttrs"
213
+ v-bind="inputAttrs",
206
214
  />
207
215
 
208
- <label class="label" :class="!isHex(color) ? `text-${color}` : ''" :style="isHex(color) ? { color } : {}">
216
+ <label class="label" :class="color && !isHex(color) ? `text-${color}` : ''" :style="color ? { color: isHex(color) ? color : '' } : { color: '#9ca3af' }">
209
217
  {{ label }}
210
218
  </label>
211
219
 
@@ -229,5 +237,5 @@ const inputAttrs = computed(() => {
229
237
  </template>
230
238
 
231
239
  <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}
240
+ .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{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}.char-count{color:#6b7280}.char-count,.error-text{font-size:.875rem;margin-top:4px}.error-text{color:#ef4444}
233
241
  </style>
package/dist/runtime/components/Input.vue.d.ts CHANGED
@@ -3,7 +3,7 @@ type ValidationRule = "alphabets" | "numbers" | "spaces" | "name" | "punctuation
3
3
  type ValidateOn = "input" | "blur";
4
4
  type __VLS_Props = {
5
5
  modelValue: string | number;
6
- label: string;
6
+ label?: string;
7
7
  hint?: string;
8
8
  placeholder?: string;
9
9
  case?: "upper" | "lower" | "capitalize" | "normal" | null;
@@ -11,6 +11,7 @@ type __VLS_Props = {
11
11
  color?: string;
12
12
  rounded?: string;
13
13
  dense?: boolean;
14
+ width?: string;
14
15
  outlined?: boolean;
15
16
  borderless?: boolean;
16
17
  flat?: boolean;
@@ -41,17 +42,18 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
41
42
  disabled: boolean;
42
43
  dense: boolean;
43
44
  type: SupportedInputType;
45
+ required: boolean;
44
46
  color: string;
45
47
  rounded: string;
46
48
  size: string;
47
- required: boolean;
48
49
  flat: boolean;
49
50
  placeholder: string;
51
+ width: string;
50
52
  readonly: boolean;
51
53
  hint: string;
52
- case: "upper" | "lower" | "capitalize" | "normal" | null;
53
54
  outlined: boolean;
54
55
  borderless: boolean;
56
+ case: "upper" | "lower" | "capitalize" | "normal" | null;
55
57
  allow: ValidationRule[];
56
58
  deny: ValidationRule[];
57
59
  supportedValues: Array<string | number>;
package/dist/runtime/components/Select.d.vue.ts CHANGED
@@ -2,23 +2,27 @@ interface SelectOption {
2
2
  text: string;
3
3
  value: string | number | boolean;
4
4
  }
5
- type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
5
+ type Rounded = "none" | "sm" | "md" | "lg" | "xl" | "full";
6
+ type Size = "sm" | "md" | "lg";
6
7
  type __VLS_Props = {
7
- filter?: boolean;
8
8
  modelValue?: string | number | boolean;
9
- label: string;
10
- id?: string;
11
- options: SelectOption[];
9
+ label?: string;
10
+ hint?: string;
12
11
  placeholder?: string;
12
+ filter?: boolean;
13
+ size?: Size;
14
+ color?: string;
15
+ rounded?: Rounded;
16
+ dense?: boolean;
17
+ width?: string;
18
+ outlined?: boolean;
19
+ borderless?: boolean;
20
+ flat?: boolean;
13
21
  disabled?: boolean;
22
+ readonly?: boolean;
14
23
  required?: boolean;
15
- hint?: string;
16
- flat?: boolean;
17
- bordered?: boolean;
18
- rounded?: Rounded;
19
- borderColor?: string;
20
- bgColor?: string;
21
- textColor?: string;
24
+ id?: string;
25
+ options: SelectOption[];
22
26
  };
23
27
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
24
28
  "update:modelValue": (value: string | number | boolean) => any;
@@ -27,17 +31,21 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
27
31
  }>, {
28
32
  modelValue: string | number | boolean;
29
33
  disabled: boolean;
34
+ dense: boolean;
35
+ label: string;
30
36
  filter: boolean;
31
- textColor: string;
32
- rounded: Rounded;
33
- borderColor: string;
34
37
  required: boolean;
38
+ color: string;
39
+ rounded: Rounded;
40
+ size: Size;
35
41
  flat: boolean;
36
42
  id: string;
37
43
  placeholder: string;
38
- bordered: boolean;
39
- bgColor: string;
44
+ width: string;
45
+ readonly: boolean;
40
46
  hint: string;
47
+ outlined: boolean;
48
+ borderless: boolean;
41
49
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
42
50
  declare const _default: typeof __VLS_export;
43
51
  export default _default;