vueless 0.0.672 → 0.0.673

package/composables/useUI.ts

@@ -22,8 +22,8 @@ import type {
   MutatedProps,
   UnknownObject,
   ComponentNames,
-  ComponentConfig,
   NestedComponent,
+  ComponentConfigFull,
   VuelessComponentInstance,
 } from "../types.ts";
 
@@ -45,25 +45,25 @@ export default function useUI<T>(
     ? (parent?.type.__name as ComponentNames)
     : (type.__name as ComponentNames);
 
-  const globalConfig = (vuelessConfig.component?.[componentName] || {}) as ComponentConfig<T>;
+  const globalConfig = (vuelessConfig.component?.[componentName] || {}) as ComponentConfigFull<T>;
 
   const vuelessStrategy = Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy || "")
     ? (vuelessConfig.strategy as Strategies)
     : (STRATEGY_TYPE.merge as Strategies);
 
   const firstClassKey = Object.keys(defaultConfig || {})[0];
-  const config = ref({}) as Ref<ComponentConfig<T>>;
+  const config = ref({}) as Ref<ComponentConfigFull<T>>;
   const attrs = useAttrs();
 
   watchEffect(() => {
-    const propsConfig = props.config as ComponentConfig<T>;
+    const propsConfig = props.config as ComponentConfigFull<T>;
 
     config.value = getMergedConfig({
       defaultConfig,
       globalConfig,
       propsConfig,
       vuelessStrategy,
-    }) as ComponentConfig<T>;
+    }) as ComponentConfigFull<T>;
   });
 
   /**
@@ -73,7 +73,7 @@ export default function useUI<T>(
     return computed(() => {
       const mutatedPropsValue = toValue(mutatedProps);
       const color = (toValue(mutatedProps || {}).color || props.color) as BrandColors;
-      const value = (config.value as ComponentConfig<T>)[key];
+      const value = (config.value as ComponentConfigFull<T>)[key];
 
       let classes = "";
 
@@ -203,7 +203,7 @@ export default function useUI<T>(
     function getExtendsKeyConfig(configKey: string) {
       let extendsKeyConfig: NestedComponent = {};
 
-      const propsConfig = props.config as ComponentConfig<T>;
+      const propsConfig = props.config as ComponentConfigFull<T>;
       const extendsKeys = getExtendsKeys(config.value[configKey]);
 
       if (extendsKeys.length) {

package/package.json

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

package/types.ts

@@ -255,8 +255,9 @@ export type ComponentConfig<T> = Partial<{
         ? T[K]
         : T[K] | string | UnknownObject
     : never;
-}> &
-  NestedComponent;
+}> & { [key: string]: unknown };
+
+export type ComponentConfigFull<T> = ComponentConfig<T> & NestedComponent;
 
 export interface NestedComponent {
   base?: string;

package/ui.dropdown-list/UDropdownList.vue

@@ -270,6 +270,7 @@ const {
     tabindex="1"
     :style="{ maxHeight: wrapperMaxHeight }"
     v-bind="wrapperAttrs"
+    :data-test="`${dataTest}-list`"
     @keydown.self.down.prevent="pointerForward"
     @keydown.self.up.prevent="pointerBackward"
     @keydown.enter.stop.self="addPointerElement('Enter')"
@@ -288,6 +289,7 @@ const {
         <span
           v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
           v-bind="isSelectedOption(option) ? optionActiveAttrs : optionAttrs"
+          :data-test="`${dataTest}-option`"
           :class="optionHighlight(index, option)"
           @click="select(option), onClickOption(option)"
           @mouseenter.self="pointerSet(index)"
@@ -353,6 +355,7 @@ const {
           ref="add-option"
           role="option"
           v-bind="addOptionLabelWrapperAttrs"
+          :data-test="`${dataTest}-add`"
           @click="onClickAddOption"
           @mouseenter.self="pointerSet(options.length + 1)"
         >
@@ -362,7 +365,13 @@ const {
           </span>
         </li>
 
-        <UButton round square v-bind="addOptionButtonAttrs" @click="onClickAddOption">
+        <UButton
+          round
+          square
+          v-bind="addOptionButtonAttrs"
+          :data-test="`${dataTest}-add-button`"
+          @click="onClickAddOption"
+        >
           <UIcon
             internal
             color="white"

package/ui.form-label/ULabel.vue

@@ -80,9 +80,10 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
     v-if="isHorizontalPlacement || isTopWithDescPlacement"
     ref="wrapperRef"
     v-bind="wrapperAttrs"
+    :data-test="dataTest"
     @click="onClick"
   >
-    <div v-bind="contentAttrs">
+    <div v-bind="contentAttrs" :data-test="`${dataTest}-content`">
       <!-- @slot Use it to add label content. -->
       <slot />
     </div>
@@ -136,7 +137,7 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
       </slot>
     </label>
 
-    <div v-bind="contentAttrs">
+    <div v-bind="contentAttrs" :data-test="`${dataTest}-content`">
       <!-- @slot Use it to add label content. -->
       <slot />
     </div>

package/ui.form-select/USelect.vue

@@ -517,6 +517,7 @@ const {
             color="gray"
             :name="config.defaults.dropdownIcon"
             v-bind="toggleIconAttrs"
+            :data-test="`${dataTest}-toggle`"
             :tabindex="-1"
           />
         </slot>
@@ -538,6 +539,7 @@ const {
             color="gray"
             :name="config.defaults.clearIcon"
             v-bind="clearIconAttrs"
+            :data-test="`${dataTest}-clear`"
           />
         </slot>
       </div>
@@ -612,6 +614,7 @@ const {
                   color="gray"
                   :name="config.defaults.clearMultipleIcon"
                   v-bind="clearMultipleIconAttrs"
+                  :data-test="`${dataTest}-clear-all`"
                 />
               </slot>
             </div>
@@ -631,6 +634,7 @@ const {
             :disabled="disabled"
             :aria-controls="'listbox-' + elementId"
             v-bind="searchInputAttrs"
+            :data-test="`${dataTest}-search`"
             @focus="activate"
             @blur.prevent="deactivate"
             @keyup.esc="deactivate"
@@ -689,6 +693,7 @@ const {
         :add-option="addOption"
         tabindex="-1"
         v-bind="dropdownListAttrs as KeyAttrsWithConfig<UDropdownListConfig>"
+        :data-test="dataTest"
         @add="onAddOption"
         @focus="activate"
         @mousedown.prevent.capture

package/ui.other-theme-color-toggle/config.ts

@@ -7,7 +7,8 @@ export default /*tw*/ {
         {
           filled: true,
           variant: "thirdary",
-          class: "!bg-gray-800/10 dark:!bg-gray-200/10",
+          color: "grayscale",
+          class: "bg-gray-800/10 dark:bg-gray-200/10",
         },
       ],
     },