vueless 0.0.30 → 0.0.31

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 (11) hide show
  1. package/package.json +1 -1
  2. package/ui.form-input/composables/attrs.composable.js +0 -2
  3. package/ui.form-input/configs/default.config.js +7 -11
  4. package/ui.form-input/index.vue +64 -67
  5. package/ui.form-label/configs/default.config.js +26 -25
  6. package/ui.form-select/composables/attrs.composable.js +2 -2
  7. package/ui.form-select/configs/default.config.js +10 -14
  8. package/ui.form-textarea/composables/attrs.composable.js +3 -5
  9. package/ui.form-textarea/configs/default.config.js +1 -2
  10. package/ui.form-textarea/index.vue +46 -49
  11. package/web-types.json +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "0.0.30",
3
+ "version": "0.0.31",
4
4
  "license": "MIT",
5
5
  "description": "Vue Styleless Component Framework.",
6
6
  "homepage": "https://vueless.com",
package/ui.form-input/composables/attrs.composable.js CHANGED
@@ -37,7 +37,6 @@ export function useAttrs(props, { inputPasswordClasses }) {
37
37
  }),
38
38
  );
39
39
 
40
- const wrapperAttrs = getAttrs("wrapper");
41
40
  const inputWrapperAttrs = getAttrs("inputWrapper");
42
41
  const rightSlotAttrs = getAttrs("rightSlot");
43
42
  const leftSlotAttrs = getAttrs("leftSlot");
@@ -55,7 +54,6 @@ export function useAttrs(props, { inputPasswordClasses }) {
55
54
  config,
56
55
  inputAttrs,
57
56
  blockAttrs,
58
- wrapperAttrs,
59
57
  labelAttrs,
60
58
  passwordIconAttrs,
61
59
  leftSlotAttrs,
package/ui.form-input/configs/default.config.js CHANGED
@@ -1,12 +1,11 @@
1
1
  export default /*tw*/ {
2
- wrapper: "relative w-full",
2
+ label: "relative w-full",
3
3
  inputWrapper: "flex relative w-full",
4
4
  rightSlot: "flex items-center justify-end whitespace-nowrap pr-4 rounded-r-lg rounded-l-none",
5
5
  leftSlot: "flex items-center justify-end whitespace-nowrap pl-4 rounded-l-lg rounded-r-none",
6
6
  passwordIcon: "",
7
7
  passwordVisibleIconName: "visibility",
8
8
  passwordHiddenIconName: "visibility_off",
9
- label: "",
10
9
  block: {
11
10
  base: `
12
11
  rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex
@@ -40,9 +39,9 @@ export default /*tw*/ {
40
39
  `,
41
40
  variants: {
42
41
  size: {
43
- sm: "pt-6 text-sm placeholder:text-sm placeholder:font-normal",
44
- md: "pt-7 text-base placeholder:text-base placeholder:font-normal",
45
- lg: "pt-8 text-lg placeholder:text-lg placeholder:font-normal",
42
+ sm: "pt-2 pb-2 text-sm placeholder:text-sm placeholder:font-normal",
43
+ md: "pt-2.5 pb-2.5 text-base placeholder:text-base placeholder:font-normal",
44
+ lg: "pt-3 pb-3 text-lg placeholder:text-lg placeholder:font-normal",
46
45
  },
47
46
  error: `
48
47
  border-red-300 hover:border-red-400 focus:border-red-500 focus:ring-red-100
@@ -50,12 +49,9 @@ export default /*tw*/ {
50
49
  `,
51
50
  },
52
51
  compoundVariants: [
53
- { labelAlign: "top", size: "sm", class: "py-2" },
54
- { labelAlign: "top", size: "md", class: "py-2.5" },
55
- { labelAlign: "top", size: "lg", class: "py-3" },
56
- { labelAlign: "topInside", label: false, size: "sm", class: "py-2" },
57
- { labelAlign: "topInside", label: false, size: "md", class: "py-2.5" },
58
- { labelAlign: "topInside", label: false, size: "lg", class: "py-3" },
52
+ { labelAlign: "topInside", label: true, size: "sm", class: "pt-6 pb-2" },
53
+ { labelAlign: "topInside", label: true, size: "md", class: "pt-7 pb-2.5" },
54
+ { labelAlign: "topInside", label: true, size: "lg", class: "pt-8 pb-3" },
59
55
  ],
60
56
  },
61
57
  defaultVariants: {
package/ui.form-input/index.vue CHANGED
@@ -1,72 +1,70 @@
1
1
  <template>
2
- <div v-bind="wrapperAttrs">
3
- <ULabel
4
- ref="labelComponent"
5
- :for="id"
6
- :label="label"
7
- :description="description"
8
- :disabled="disabled"
9
- :error="error"
10
- :size="size"
11
- :align="labelAlign"
12
- v-bind="labelAttrs"
13
- >
14
- <label :for="id" v-bind="blockAttrs">
15
- <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper" v-bind="leftSlotAttrs">
16
- <!-- @slot Use it to add some component before text. -->
17
- <slot name="left" />
18
- </span>
19
-
20
- <span v-bind="inputWrapperAttrs">
21
- <input
22
- :id="id"
23
- ref="input"
24
- v-model="inputValue"
25
- :placeholder="placeholder"
26
- :type="inputType"
27
- :readonly="readonly"
28
- :disabled="disabled"
29
- :maxlength="maxLength"
30
- :inputmode="inputMode"
31
- :data-cy="dataCy"
32
- v-bind="inputAttrs"
33
- @focus="onFocus"
34
- @blur="onBlur"
35
- @input="onInput"
36
- @change="onChange"
37
- @mousedown="onMousedown"
38
- @click="onClick"
2
+ <ULabel
3
+ ref="labelComponent"
4
+ :for="id"
5
+ :label="label"
6
+ :description="description"
7
+ :disabled="disabled"
8
+ :error="error"
9
+ :size="size"
10
+ :align="labelAlign"
11
+ v-bind="labelAttrs"
12
+ >
13
+ <label :for="id" v-bind="blockAttrs">
14
+ <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper" v-bind="leftSlotAttrs">
15
+ <!-- @slot Use it to add some component before text. -->
16
+ <slot name="left" />
17
+ </span>
18
+
19
+ <span v-bind="inputWrapperAttrs">
20
+ <input
21
+ :id="id"
22
+ ref="input"
23
+ v-model="inputValue"
24
+ :placeholder="placeholder"
25
+ :type="inputType"
26
+ :readonly="readonly"
27
+ :disabled="disabled"
28
+ :maxlength="maxLength"
29
+ :inputmode="inputMode"
30
+ :data-cy="dataCy"
31
+ v-bind="inputAttrs"
32
+ @focus="onFocus"
33
+ @blur="onBlur"
34
+ @input="onInput"
35
+ @change="onChange"
36
+ @mousedown="onMousedown"
37
+ @click="onClick"
38
+ />
39
+ </span>
40
+
41
+ <label
42
+ v-if="hasSlotContent($slots['right-icon']) || isTypePassword"
43
+ v-bind="rightSlotAttrs"
44
+ :for="id"
45
+ >
46
+ <!-- @slot Use it to add icon after text. -->
47
+ <slot name="right-icon">
48
+ <UIcon
49
+ v-if="isTypePassword"
50
+ :name="passwordIconName"
51
+ color="gray"
52
+ interactive
53
+ fill
54
+ :data-cy="`${dataCy}-show-password`"
55
+ v-bind="passwordIconAttrs"
56
+ @click="onClickShowPassword"
39
57
  />
40
- </span>
41
-
42
- <label
43
- v-if="hasSlotContent($slots['right-icon']) || isTypePassword"
44
- v-bind="rightSlotAttrs"
45
- :for="id"
46
- >
47
- <!-- @slot Use it to add icon after text. -->
48
- <slot name="right-icon">
49
- <UIcon
50
- v-if="isTypePassword"
51
- :name="passwordIconName"
52
- color="gray"
53
- interactive
54
- fill
55
- :data-cy="`${dataCy}-show-password`"
56
- v-bind="passwordIconAttrs"
57
- @click="onClickShowPassword"
58
- />
59
- </slot>
60
- </label>
61
-
62
- <span v-if="hasSlotContent($slots['right'])" v-bind="rightSlotAttrs">
63
- <!-- @slot Use it to add some component after text. -->
64
-
65
- <slot name="right" />
66
- </span>
58
+ </slot>
67
59
  </label>
68
- </ULabel>
69
- </div>
60
+
61
+ <span v-if="hasSlotContent($slots['right'])" v-bind="rightSlotAttrs">
62
+ <!-- @slot Use it to add some component after text. -->
63
+
64
+ <slot name="right" />
65
+ </span>
66
+ </label>
67
+ </ULabel>
70
68
  </template>
71
69
 
72
70
  <script>
@@ -277,7 +275,6 @@ const {
277
275
  config,
278
276
  inputAttrs,
279
277
  blockAttrs,
280
- wrapperAttrs,
281
278
  labelAttrs,
282
279
  passwordIconAttrs,
283
280
  leftSlotAttrs,
package/ui.form-label/configs/default.config.js CHANGED
@@ -4,8 +4,8 @@ export default /*tw*/ {
4
4
  variants: {
5
5
  size: {
6
6
  sm: "gap-2",
7
- md: "gap-3",
8
- lg: "gap-4",
7
+ md: "gap-2.5",
8
+ lg: "gap-3",
9
9
  },
10
10
  align: {
11
11
  top: "flex-col",
@@ -13,13 +13,10 @@ export default /*tw*/ {
13
13
  topWithDesc: "flex-col-reverse w-fit",
14
14
  left: "flex-row w-fit",
15
15
  right: "flex-row-reverse w-fit",
16
- bottom: "flex-col-reverse w-fit",
16
+ bottom: "flex-col-reverse w-fit",
17
17
  },
18
18
  },
19
19
  compoundVariants: [
20
- { align: "top", size: "sm", class: "gap-0 space-y-2" },
21
- { align: "top", size: "md", class: "gap-0 space-y-2" },
22
- { align: "top", size: "lg", class: "gap-0 space-y-2" },
23
20
  { align: "topInside", size: "sm", class: "gap-0" },
24
21
  { align: "topInside", size: "md", class: "gap-0" },
25
22
  { align: "topInside", size: "lg", class: "gap-0" },
@@ -27,17 +24,15 @@ export default /*tw*/ {
27
24
  },
28
25
  labelWrapper: "",
29
26
  label: {
30
- base: "pt-1 pb-1.5 z-10 font-normal block !leading-none",
27
+ base: "text-gray-500 z-10 font-normal block !leading-none",
31
28
  variants: {
32
29
  size: {
33
- sm: "text-sm",
34
- md: "text-base mt-px",
35
- lg: "text-lg mt-0.5",
30
+ sm: "text-xs",
31
+ md: "text-sm",
32
+ lg: "text-base",
36
33
  },
37
34
  align: {
38
- topInside: "absolute left-4 text-gray-500",
39
- topWithDesc: "text-gray-500",
40
- top: "text-gray-500",
35
+ topInside: "absolute left-4",
41
36
  left: "text-gray-900",
42
37
  right: "text-gray-900",
43
38
  },
@@ -49,15 +44,18 @@ export default /*tw*/ {
49
44
  },
50
45
  },
51
46
  compoundVariants: [
52
- { align: "top", size: "sm", class: "m-0 p-0 text-xs" },
53
- { align: "top", size: "md", class: "m-0 p-0 text-sm" },
54
- { align: "top", size: "lg", class: "m-0 p-0 text-base" },
55
- { align: "topInside", size: "sm", class: "m-0 p-0 top-2 text-xs" },
56
- { align: "topInside", size: "md", class: "m-0 p-0 top-2.5 text-sm" },
57
- { align: "topInside", size: "lg", class: "m-0 p-0 top-3 text-base" },
58
- { align: "topWithDesc", size: "sm", class: "m-0 p-0 text-xs" },
59
- { align: "topWithDesc", size: "md", class: "m-0 p-0 text-sm" },
60
- { align: "topWithDesc", size: "lg", class: "m-0 p-0 text-base" },
47
+ { align: "topInside", size: "sm", class: "top-2" },
48
+ { align: "topInside", size: "md", class: "top-2.5" },
49
+ { align: "topInside", size: "lg", class: "top-3" },
50
+ { align: "topWithDesc", size: "sm", class: "pt-1 pb-1.5" },
51
+ { align: "topWithDesc", size: "md", class: "pt-1 pb-1.5 mt-px" },
52
+ { align: "topWithDesc", size: "lg", class: "pt-1 pb-1.5 mt-0.5" },
53
+ { align: "left", size: "sm", class: "pt-1 pb-1.5 text-sm" },
54
+ { align: "left", size: "md", class: "pt-1 pb-1.5 mt-px text-base" },
55
+ { align: "left", size: "lg", class: "pt-1 pb-1.5 mt-0.5 text-lg" },
56
+ { align: "right", size: "sm", class: "pt-1 pb-1.5 text-sm" },
57
+ { align: "right", size: "md", class: "pt-1 pb-1.5 mt-px text-base" },
58
+ { align: "right", size: "lg", class: "pt-1 pb-1.5 mt-0.5 text-lg" },
61
59
  ],
62
60
  },
63
61
  description: {
@@ -80,9 +78,12 @@ export default /*tw*/ {
80
78
  },
81
79
  },
82
80
  compoundVariants: [
83
- { align: "top", size: "sm", class: "mt-1.5" },
84
- { align: "top", size: "md", class: "mt-2" },
85
- { align: "top", size: "lg", class: "mt-2.5" },
81
+ { align: "bottom", size: "sm", class: "-mt-2" },
82
+ { align: "bottom", size: "md", class: "-mt-2" },
83
+ { align: "bottom", size: "lg", class: "-mt-2" },
84
+ { align: "top", size: "sm", class: "-mt-0.5" },
85
+ { align: "top", size: "md", class: "-mt-0.5" },
86
+ { align: "top", size: "lg", class: "-mt-0.5" },
86
87
  { align: "topInside", size: "sm", class: "mt-1.5" },
87
88
  { align: "topInside", size: "md", class: "mt-2" },
88
89
  { align: "topInside", size: "lg", class: "mt-2.5" },
package/ui.form-select/composables/attrs.composable.js CHANGED
@@ -49,7 +49,7 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
49
49
  size: props.size,
50
50
  error: Boolean(props.error),
51
51
  disabled: props.disabled,
52
- labelOutside: props.labelOutside,
52
+ labelAlign: props.labelAlign,
53
53
  label: Boolean(props.label),
54
54
  }),
55
55
  );
@@ -78,7 +78,7 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
78
78
  const caretClasses = computed(() =>
79
79
  cvaCaret({
80
80
  size: props.size,
81
- labelOutside: props.labelOutside,
81
+ labelAlign: props.labelAlign,
82
82
  label: Boolean(props.label),
83
83
  }),
84
84
  );
package/ui.form-select/configs/default.config.js CHANGED
@@ -2,17 +2,12 @@ export default /*tw*/ {
2
2
  label: "w-full relative",
3
3
  wrapper: {
4
4
  base: `
5
- pb-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
5
+ pb-2 pt-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
6
6
  rounded-lg border border-gray-300 bg-white
7
7
  hover:border-gray-400 hover:transition hover:duration-100 hover:ease-in-out hover:focus-within:border-gray-500
8
8
  focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15] focus-within:outline-none
9
9
  `,
10
10
  variants: {
11
- size: {
12
- sm: "pt-6",
13
- md: "pt-7",
14
- lg: "pt-8",
15
- },
16
11
  error: {
17
12
  true: `
18
13
  border-red-300 hover:border-red-300
@@ -25,11 +20,12 @@ export default /*tw*/ {
25
20
  focus-within:border-gray-100 focus-within:ring-0
26
21
  `,
27
22
  },
28
- labelOutside: {
29
- true: "pt-2",
30
- },
31
23
  },
32
- compoundVariants: [{ labelOutside: false, label: false, class: "pt-2.5" }],
24
+ compoundVariants: [
25
+ { labelAlign: "topInside", label: true, size: "sm", class: "pt-6" },
26
+ { labelAlign: "topInside", label: true, size: "md", class: "pt-7" },
27
+ { labelAlign: "topInside", label: true, size: "lg", class: "pt-8" },
28
+ ],
33
29
  },
34
30
  innerWrapper: {
35
31
  base: "flex px-4 min-h-full w-full overflow-hidden",
@@ -46,9 +42,9 @@ export default /*tw*/ {
46
42
  caret: {
47
43
  base: "flex items-center mt-0",
48
44
  compoundVariants: [
49
- { labelOutside: false, size: "sm", label: true, class: "-mt-3" },
50
- { labelOutside: false, size: "md", label: true, class: "-mt-4" },
51
- { labelOutside: false, size: "lg", label: true, class: "-mt-5" },
45
+ { labelAlign: "topInside", size: "sm", label: true, class: "-mt-3" },
46
+ { labelAlign: "topInside", size: "md", label: true, class: "-mt-4" },
47
+ { labelAlign: "topInside", size: "lg", label: true, class: "-mt-5" },
52
48
  ],
53
49
  },
54
50
  beforeCaretSlot: "",
@@ -122,6 +118,7 @@ export default /*tw*/ {
122
118
  },
123
119
  defaultVariants: {
124
120
  size: "md",
121
+ labelAlign: "topInside",
125
122
  openDirection: "auto",
126
123
  labelKey: "label",
127
124
  valueKey: "id",
@@ -133,6 +130,5 @@ export default /*tw*/ {
133
130
  searchable: true,
134
131
  noClear: false,
135
132
  addOption: false,
136
- labelAlign: "topInside",
137
133
  },
138
134
  };
package/ui.form-textarea/composables/attrs.composable.js CHANGED
@@ -20,8 +20,8 @@ export function useAttrs(props) {
20
20
  compoundVariants: textareaWrapper.compoundVariants,
21
21
  });
22
22
 
23
- const textareaClasses = computed(() =>
24
- cvaTextarea({
23
+ const textareaWrapperClasses = computed(() =>
24
+ cvaTextareaWrapper({
25
25
  error: Boolean(props.error),
26
26
  size: props.size,
27
27
  readonly: props.readonly,
@@ -31,9 +31,8 @@ export function useAttrs(props) {
31
31
  }),
32
32
  );
33
33
 
34
- const textareaWrapperClasses = computed(() => cvaTextareaWrapper({ size: props.size }));
34
+ const textareaClasses = computed(() => cvaTextarea({ size: props.size }));
35
35
 
36
- const wrapperAttrs = getAttrs("wrapper");
37
36
  const leftSlotAttrs = getAttrs("leftSlot");
38
37
  const rightSlotAttrs = getAttrs("rightSlot");
39
38
  const labelAttrs = getAttrs("label", { isComponent: true });
@@ -46,7 +45,6 @@ export function useAttrs(props) {
46
45
  textareaWrapperAttrs,
47
46
  leftSlotAttrs,
48
47
  rightSlotAttrs,
49
- wrapperAttrs,
50
48
  hasSlotContent,
51
49
  };
52
50
  }
package/ui.form-textarea/configs/default.config.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export default /*tw*/ {
2
- wrapper: "relative w-full",
2
+ label: "relative w-full",
3
3
  leftSlot: "flex items-center justify-center h-full w-11 absolute left-0",
4
4
  rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
5
5
  textareaWrapper: {
@@ -53,7 +53,6 @@ export default /*tw*/ {
53
53
  },
54
54
  },
55
55
  },
56
- label: "",
57
56
  defaultVariants: {
58
57
  size: "md",
59
58
  type: "text",
package/ui.form-textarea/index.vue CHANGED
@@ -1,54 +1,52 @@
1
1
  <template>
2
- <div v-bind="wrapperAttrs">
3
- <ULabel
4
- ref="labelComponent"
2
+ <ULabel
3
+ ref="labelComponent"
4
+ :for="id"
5
+ :label="label"
6
+ :error="error"
7
+ :description="description"
8
+ :size="size"
9
+ :disabled="disabled"
10
+ :data-cy="dataCy"
11
+ :align="labelAlign"
12
+ v-bind="labelAttrs"
13
+ >
14
+ <label
15
+ v-if="hasSlotContent($slots['left'])"
16
+ ref="leftSlotWrapper"
5
17
  :for="id"
6
- :label="label"
7
- :error="error"
8
- :description="description"
9
- :size="size"
10
- :disabled="disabled"
11
- :data-cy="dataCy"
12
- :align="labelAlign"
13
- v-bind="labelAttrs"
18
+ v-bind="leftSlotAttrs"
14
19
  >
15
- <label
16
- v-if="hasSlotContent($slots['left'])"
17
- ref="leftSlotWrapper"
18
- :for="id"
19
- v-bind="leftSlotAttrs"
20
- >
21
- <!-- @slot Use it to add some component before text. -->
22
- <slot name="left" />
23
- </label>
24
- <label ref="textareaWrapper" :for="id" v-bind="textareaWrapperAttrs">
25
- <textarea
26
- :id="id"
27
- ref="textarea"
28
- v-model="localValue"
29
- :value="modelValue"
30
- :placeholder="placeholder"
31
- :type="type"
32
- :readonly="readonly"
33
- :disabled="disabled"
34
- :rows="rows"
35
- :inputmode="inputMode"
36
- :data-cy="dataCy"
37
- v-bind="textareaAttrs"
38
- @focus="onFocus"
39
- @blur="onBlur"
40
- @change="onChange"
41
- @mouseleave="onMouseleave"
42
- @mousedown="onMousedown"
43
- @click="onClick"
44
- />
45
- </label>
46
- <label v-if="hasSlotContent($slots['right'])" :for="id" v-bind="rightSlotAttrs">
47
- <!-- @slot Use it to add some component after text. -->
48
- <slot name="right" />
49
- </label>
50
- </ULabel>
51
- </div>
20
+ <!-- @slot Use it to add some component before text. -->
21
+ <slot name="left" />
22
+ </label>
23
+ <label ref="textareaWrapper" :for="id" v-bind="textareaWrapperAttrs">
24
+ <textarea
25
+ :id="id"
26
+ ref="textarea"
27
+ v-model="localValue"
28
+ :value="modelValue"
29
+ :placeholder="placeholder"
30
+ :type="type"
31
+ :readonly="readonly"
32
+ :disabled="disabled"
33
+ :rows="rows"
34
+ :inputmode="inputMode"
35
+ :data-cy="dataCy"
36
+ v-bind="textareaAttrs"
37
+ @focus="onFocus"
38
+ @blur="onBlur"
39
+ @change="onChange"
40
+ @mouseleave="onMouseleave"
41
+ @mousedown="onMousedown"
42
+ @click="onClick"
43
+ />
44
+ </label>
45
+ <label v-if="hasSlotContent($slots['right'])" :for="id" v-bind="rightSlotAttrs">
46
+ <!-- @slot Use it to add some component after text. -->
47
+ <slot name="right" />
48
+ </label>
49
+ </ULabel>
52
50
  </template>
53
51
 
54
52
  <script setup>
@@ -209,7 +207,6 @@ const {
209
207
  textareaWrapperAttrs,
210
208
  leftSlotAttrs,
211
209
  rightSlotAttrs,
212
- wrapperAttrs,
213
210
  hasSlotContent,
214
211
  } = useAttrs(props);
215
212
 
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "framework": "vue",
3
3
  "name": "vueless",
4
- "version": "0.0.30",
4
+ "version": "0.0.31",
5
5
  "contributions": {
6
6
  "html": {
7
7
  "description-markup": "markdown",