vueless 0.0.592 → 0.0.594

package/composables/useUI.ts

@@ -112,23 +112,25 @@ export default function useUI<T>(
       const extendsKeys = getExtendsKeys(baseClasses);
 
       if (extendsKeys.length) {
-        const extendsClasses = extendsKeys.map((key) => toValue(getClasses(key, mutatedProps)));
-
         const keyAttrs = keysAttrs[`${key}Attrs`];
 
-        keysAttrs[`${key}Attrs`] = computed(() => ({
-          ...keyAttrs.value,
-          class: cx([
-            ...extendsClasses,
-            keyAttrs.value.class?.replaceAll(EXTENDS_PATTERN_REG_EXP, ""),
-          ]),
-          // TODO: Cannot merge several keys
-          config: getMergedConfig({
-            defaultConfig: config.value[extendsKeys[0]],
-            globalConfig: keyAttrs.value.config,
-            propsConfig: propsConfig[extendsKeys[0]],
-          }),
-        })) as ComputedRef<KeyAttrsWithConfig<T>>;
+        keysAttrs[`${key}Attrs`] = computed(() => {
+          const extendsClasses = extendsKeys.map((key) => toValue(getClasses(key, mutatedProps)));
+
+          return {
+            ...keyAttrs.value,
+            class: cx([
+              ...extendsClasses,
+              keyAttrs.value.class?.replaceAll(EXTENDS_PATTERN_REG_EXP, ""),
+            ]),
+            // TODO: Add ability to merge array of keys
+            config: getMergedConfig({
+              defaultConfig: config.value[extendsKeys[0]],
+              globalConfig: keyAttrs.value.config,
+              propsConfig: propsConfig[extendsKeys[0]],
+            }),
+          };
+        }) as ComputedRef<KeyAttrsWithConfig<T>>;
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.592",
+  "version": "0.0.594",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -54,6 +54,7 @@ import UInputSearchConfig from "./ui.form-input-search/config.ts";
 import UInputFileConfig from "./ui.form-input-file/config.ts";
 import UInputMoneyConfig from "./ui.form-input-money/config.ts";
 import UDataListConfig from "./ui.data-list/config.ts";
+import USelectConfig from "./ui.form-select/config.ts";
 
 import type { ComputedRef, Ref, ComponentInternalInstance } from "vue";
 import type { Props } from "tippy.js";
@@ -224,6 +225,7 @@ export interface Components {
   UInputFile: Partial<typeof UInputFileConfig>;
   UInputMoney: Partial<typeof UInputMoneyConfig>;
   UDataList: Partial<typeof UDataListConfig>;
+  USelect: Partial<typeof USelectConfig>;
 }
 
 /* Make all config keys optional and allow to have string and object values. */

package/ui.button/storybook/stories.ts

@@ -37,7 +37,9 @@ export default {
     ...getArgTypes(UButton.__name),
   },
   parameters: {
-    ...getDocsDescription(UButton.__name),
+    docs: {
+      ...getDocsDescription(UButton.__name),
+    },
   },
 } as Meta;
 

package/ui.button-link/storybook/stories.ts

@@ -29,7 +29,9 @@ export default {
     ...getArgTypes(ULink.__name),
   },
   parameters: {
-    ...getDocsDescription(ULink.__name),
+    docs: {
+      ...getDocsDescription(ULink.__name),
+    },
   },
 } as Meta;
 

package/ui.button-toggle/storybook/stories.ts

@@ -36,7 +36,9 @@ export default {
     modelValue: { control: { type: "text" } },
   },
   parameters: {
-    ...getDocsDescription(UToggle.__name),
+    docs: {
+      ...getDocsDescription(UToggle.__name),
+    },
   },
 } as Meta;
 

package/ui.button-toggle-item/storybook/stories.ts

@@ -28,7 +28,9 @@ export default {
     value: { control: { type: "text" } },
   },
   parameters: {
-    ...getDocsDescription(UToggleItem.__name),
+    docs: {
+      ...getDocsDescription(UToggleItem.__name),
+    },
   },
 } as Meta;
 

package/ui.container-accordion/storybook/stories.ts

@@ -45,7 +45,9 @@ export default {
     ...getArgTypes(UAccordion.__name),
   },
   parameters: {
-    ...getDocsDescription(UAccordion.__name),
+    docs: {
+      ...getDocsDescription(UAccordion.__name),
+    },
   },
 } as Meta;
 

package/ui.container-card/storybook/stories.ts

@@ -29,7 +29,9 @@ export default {
     ...getArgTypes(UCard.__name),
   },
   parameters: {
-    ...getDocsDescription(UCard.__name),
+    docs: {
+      ...getDocsDescription(UCard.__name),
+    },
   },
 } as Meta;
 

package/ui.container-col/storybook/stories.ts

@@ -26,11 +26,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UCol.__name),
       story: {
         iframeHeight: 360,
       },
     },
-    ...getDocsDescription(UCol.__name),
   },
 } as Meta;
 

package/ui.container-divider/storybook/stories.ts

@@ -24,7 +24,9 @@ export default {
     ...getArgTypes(UDivider.__name),
   },
   parameters: {
-    ...getDocsDescription(UDivider.__name),
+    docs: {
+      ...getDocsDescription(UDivider.__name),
+    },
   },
 } as Meta;
 

package/ui.container-group/storybook/stories.ts

@@ -29,11 +29,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UGroup.__name),
       story: {
         iframeHeight: 360,
       },
     },
-    ...getDocsDescription(UGroup.__name),
   },
 } as Meta;
 

package/ui.container-groups/storybook/stories.ts

@@ -22,11 +22,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UGroups.__name),
       story: {
         iframeHeight: 360,
       },
     },
-    ...getDocsDescription(UGroups.__name),
   },
 } as Meta;
 

package/ui.container-modal/storybook/stories.ts

@@ -34,11 +34,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UModal.__name),
       story: {
         height: "500px",
       },
     },
-    ...getDocsDescription(UModal.__name),
   },
 } as Meta;
 

package/ui.container-modal-confirm/storybook/stories.ts

@@ -35,11 +35,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UModalConfirm.__name),
       story: {
         height: "360px",
       },
     },
-    ...getDocsDescription(UModalConfirm.__name),
   },
 } as Meta;
 

package/ui.container-page/storybook/stories.ts

@@ -33,7 +33,9 @@ export default {
     ...getArgTypes(UPage.__name),
   },
   parameters: {
-    ...getDocsDescription(UPage.__name),
+    docs: {
+      ...getDocsDescription(UPage.__name),
+    },
   },
 } as Meta;
 

package/ui.container-row/storybook/stories.ts

@@ -26,7 +26,9 @@ export default {
     ...getArgTypes(URow.__name),
   },
   parameters: {
-    ...getDocsDescription(URow.__name),
+    docs: {
+      ...getDocsDescription(URow.__name),
+    },
   },
 } as Meta;
 

package/ui.data-list/storybook/stories.ts

@@ -50,7 +50,9 @@ export default {
     ...getArgTypes(UDataList.__name),
   },
   parameters: {
-    ...getDocsDescription(UDataList.__name),
+    docs: {
+      ...getDocsDescription(UDataList.__name),
+    },
   },
 } as Meta;
 

package/ui.data-table/storybook/stories.ts

@@ -58,7 +58,9 @@ export default {
     numberOfRows: 5,
   },
   parameters: {
-    ...getDocsDescription(UTable.__name),
+    docs: {
+      ...getDocsDescription(UTable.__name),
+    },
   },
 } as Meta;
 

package/ui.dropdown-badge/storybook/stories.ts

@@ -33,11 +33,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UDropdownBadge.__name),
       story: {
         height: "200px",
       },
     },
-    ...getDocsDescription(UDropdownBadge.__name),
   },
 } as Meta;
 

package/ui.dropdown-button/storybook/stories.ts

@@ -34,11 +34,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UDropdownButton.__name),
       story: {
         height: "200px",
       },
     },
-    ...getDocsDescription(UDropdownButton.__name),
   },
 } as Meta;
 

package/ui.dropdown-link/storybook/stories.ts

@@ -37,11 +37,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UDropdownLink.__name),
       story: {
         height: "200px",
       },
     },
-    ...getDocsDescription(UDropdownLink.__name),
   },
 } as Meta;
 

package/ui.dropdown-list/storybook/stories.ts

@@ -35,11 +35,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UDropdownList.__name),
       story: {
         height: "180px",
       },
     },
-    ...getDocsDescription(UDropdownList.__name),
   },
 } as Meta;
 

package/ui.dropdown-list/types.ts

@@ -13,7 +13,7 @@ export interface BaseOption {
 }
 
 export interface Option extends BaseOption {
-  [key: string]: string | number | boolean | UnknownObject | OnClickOption | undefined;
+  [key: string]: string | number | boolean | UnknownObject | Option[] | OnClickOption | undefined;
 }
 
 export interface Props {

package/ui.form-calendar/storybook/stories.ts

@@ -27,11 +27,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UCalendarName),
       story: {
         height: "380px",
       },
     },
-    ...getDocsDescription(UCalendarName),
   },
 } as Meta;
 

package/ui.form-checkbox/storybook/stories.ts

@@ -30,7 +30,9 @@ export default {
     modelValue: { control: { type: "boolean" } },
   },
   parameters: {
-    ...getDocsDescription(UCheckbox.__name),
+    docs: {
+      ...getDocsDescription(UCheckbox.__name),
+    },
   },
 } as Meta;
 

package/ui.form-checkbox-group/storybook/stories.ts

@@ -38,7 +38,9 @@ export default {
     ...getArgTypes(UCheckboxGroup.__name),
   },
   parameters: {
-    ...getDocsDescription(UCheckboxGroup.__name),
+    docs: {
+      ...getDocsDescription(UCheckboxGroup.__name),
+    },
   },
 } as Meta;
 

package/ui.form-checkbox-multi-state/storybook/stories.ts

@@ -31,7 +31,9 @@ export default {
     ...getArgTypes(UCheckboxMultiState.__name),
   },
   parameters: {
-    ...getDocsDescription(UCheckboxMultiState.__name),
+    docs: {
+      ...getDocsDescription(UCheckboxMultiState.__name),
+    },
   },
 } as Meta;
 

package/ui.form-color-picker/storybook/stories.ts

@@ -28,7 +28,9 @@ export default {
     ...getArgTypes(UColorPicker.__name),
   },
   parameters: {
-    ...getDocsDescription(UColorPicker.__name),
+    docs: {
+      ...getDocsDescription(UColorPicker.__name),
+    },
   },
 } as Meta;
 

package/ui.form-date-picker/UDatePicker.vue

@@ -277,7 +277,7 @@ watchEffect(() => {
   <div v-bind="wrapperAttrs" ref="wrapper">
     <UInput
       :id="elementId"
-      :key="String(userDateFormat)"
+      :key="String(userFormatDate)"
       ref="input"
       :model-value="userFormatDate"
       :label-align="labelAlign"

package/ui.form-date-picker/storybook/stories.ts

@@ -36,11 +36,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UDatePickerName),
       story: {
         height: "480px",
       },
     },
-    ...getDocsDescription(UDatePickerName),
   },
 } as Meta;
 

package/ui.form-date-picker-range/storybook/stories.ts

@@ -46,7 +46,9 @@ export default {
       },
     },
     parameters: {
-      ...getDocsDescription(UDatePickerRangeName),
+      docs: {
+        ...getDocsDescription(UDatePickerRangeName),
+      },
     },
   },
 } as Meta;

package/ui.form-input/storybook/stories.ts

@@ -30,7 +30,9 @@ export default {
     modelValue: { control: { type: "text" } },
   },
   parameters: {
-    ...getDocsDescription(UInput.__name),
+    docs: {
+      ...getDocsDescription(UInput.__name),
+    },
   },
 } as Meta;
 

package/ui.form-input-file/storybook/stories.ts

@@ -27,7 +27,9 @@ export default {
     ...getArgTypes(UInputFile.__name),
   },
   parameters: {
-    ...getDocsDescription(UInputFile.__name),
+    docs: {
+      ...getDocsDescription(UInputFile.__name),
+    },
   },
 } as Meta;
 

package/ui.form-input-money/storybook/stories.ts

@@ -30,7 +30,9 @@ export default {
     modelValue: { control: { type: "number" } },
   },
   parameters: {
-    ...getDocsDescription(UInputMoney.__name),
+    docs: {
+      ...getDocsDescription(UInputMoney.__name),
+    },
   },
 } as Meta;
 

package/ui.form-input-number/storybook/stories.ts

@@ -28,7 +28,9 @@ export default {
     modelValue: { control: { type: "number" } },
   },
   parameters: {
-    ...getDocsDescription(UInputNumber.__name),
+    docs: {
+      ...getDocsDescription(UInputNumber.__name),
+    },
   },
 } as Meta;
 

package/ui.form-input-rating/storybook/stories.ts

@@ -28,7 +28,9 @@ export default {
     ...getArgTypes(UInputRating.__name),
   },
   parameters: {
-    ...getDocsDescription(UInputRating.__name),
+    docs: {
+      ...getDocsDescription(UInputRating.__name),
+    },
   },
 } as Meta;
 

package/ui.form-input-search/storybook/stories.ts

@@ -26,7 +26,9 @@ export default {
     ...getArgTypes(UInputSearch.__name),
   },
   parameters: {
-    ...getDocsDescription(UInputSearch.__name),
+    docs: {
+      ...getDocsDescription(UInputSearch.__name),
+    },
   },
 } as Meta;
 

package/ui.form-label/ULabel.vue

@@ -23,7 +23,7 @@ const emit = defineEmits([
   "click",
 ]);
 
-const labelRef = ref(null);
+const labelRef = ref<HTMLLabelElement | null>(null);
 const wrapperRef = ref(null);
 
 const isHorizontalPlacement = computed(() => {

package/ui.form-label/storybook/stories.ts

@@ -30,7 +30,9 @@ export default {
     ...getArgTypes(ULabel.__name),
   },
   parameters: {
-    ...getDocsDescription(ULabel.__name),
+    docs: {
+      ...getDocsDescription(ULabel.__name),
+    },
   },
 } as Meta;
 

package/ui.form-radio/storybook/stories.ts

@@ -30,7 +30,9 @@ export default {
     ...getArgTypes(URadio.__name),
   },
   parameters: {
-    ...getDocsDescription(URadio.__name),
+    docs: {
+      ...getDocsDescription(URadio.__name),
+    },
   },
 } as Meta;
 

package/ui.form-radio-group/storybook/stories.ts

@@ -37,7 +37,9 @@ export default {
     ...getArgTypes(URadioGroup.__name),
   },
   parameters: {
-    ...getDocsDescription(URadioGroup.__name),
+    docs: {
+      ...getDocsDescription(URadioGroup.__name),
+    },
   },
 } as Meta;