vueless 0.0.616 → 0.0.618

package/package.json

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

package/ui.button/UButton.vue

@@ -92,7 +92,6 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
       <!--
         @slot Use it to add something before the label.
         @binding {string} icon-name
-        @binding {string} icon-size
       -->
       <slot name="left" :icon-name="leftIcon">
         <UIcon v-if="leftIcon" internal color="inherit" :name="leftIcon" v-bind="leftIconAttrs" />
@@ -102,7 +101,6 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @slot Use it to add something instead of the label.
         @binding {string} label
         @binding {string} icon-name
-        @binding {string} icon-size
       -->
       <slot name="default" :label="label" :icon-name="icon">
         <UIcon v-if="icon" internal color="inherit" :name="icon" v-bind="centerIconAttrs" />
@@ -114,7 +112,6 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
       <!--
         @slot Use it to add something after the label.
         @binding {string} icon-name
-        @binding {string} icon-size
       -->
       <slot name="right" :icon-name="rightIcon">
         <UIcon

package/ui.button-toggle/UToggle.vue

@@ -10,7 +10,7 @@ import { getDefaults } from "../utils/ui.ts";
 import defaultConfig from "./config.ts";
 import { COMPONENT_NAME, TYPE_RADIO, TYPE_CHECKBOX } from "./constants.ts";
 
-import type { Props, LabelSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -34,19 +34,6 @@ const selectedValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const labelSize = computed(() => {
-  const sizes = {
-    "2xs": "sm",
-    xs: "sm",
-    sm: "md",
-    md: "md",
-    lg: "lg",
-    xl: "lg",
-  };
-
-  return sizes[props.size] as LabelSize;
-});
-
 const type = computed(() => {
   return props.multiple ? TYPE_CHECKBOX : TYPE_RADIO;
 });
@@ -90,7 +77,6 @@ const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig)
 
 <template>
   <ULabel
-    :size="labelSize"
     :label="label"
     :description="description"
     :align="labelAlign"

package/ui.button-toggle/config.ts

@@ -6,6 +6,16 @@ export default /*tw*/ {
         true: "w-full",
       },
     },
+    defaults: {
+      size: {
+        "2xs": "sm",
+        xs: "sm",
+        sm: "md",
+        md: "md",
+        lg: "lg",
+        xl: "lg",
+      },
+    },
   },
   items: {
     base: "",

package/ui.button-toggle/types.ts

@@ -4,8 +4,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type LabelSize = "sm" | "md" | "lg";
-
 export interface UToggleOption {
   value: string | number;
   label: string;

package/ui.container-accordion/UAccordion.vue

@@ -10,7 +10,7 @@ import UDivider from "../ui.container-divider/UDivider.vue";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, DividerSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -35,16 +35,6 @@ const toggleIcon = computed(() =>
   isOpened.value ? config.value.defaults.collapseIcon : config.value.defaults.expandIcon,
 );
 
-const dividerSize = computed(() => {
-  const sizes = {
-    sm: "md",
-    md: "lg",
-    lg: "xl",
-  };
-
-  return sizes[props.size] as DividerSize;
-});
-
 function onClickItem() {
   isOpened.value = !isOpened.value;
 
@@ -75,10 +65,9 @@ const {
         <!--
           @slot Use it to add something instead of the toggle icon.
           @binding {string} icon-name
-          @binding {string} icon-size
           @binding {boolean} opened
         -->
-        <slot name="toggle" :icon-name="toggleIcon" :icon-size="size" :opened="isOpened">
+        <slot name="toggle" :icon-name="toggleIcon" :opened="isOpened">
           <UIcon :name="toggleIcon" :size="size" color="gray" internal v-bind="toggleIconAttrs" />
         </slot>
       </div>
@@ -86,6 +75,6 @@ const {
       <div :id="`description-${elementId}`" v-bind="descriptionAttrs" v-text="description" />
     </div>
 
-    <UDivider :size="dividerSize" v-bind="accordionDividerAttrs" />
+    <UDivider v-bind="accordionDividerAttrs" />
   </div>
 </template>

package/ui.container-accordion/config.ts

@@ -25,7 +25,16 @@ export default /*tw*/ {
     },
   },
   toggleIcon: "{UIcon}",
-  accordionDivider: "{UDivider} group-last:hidden",
+  accordionDivider: {
+    base: "{UDivider} group-last:hidden",
+    defaults: {
+      size: {
+        sm: "md",
+        md: "lg",
+        lg: "xl",
+      },
+    },
+  },
   defaults: {
     size: "md",
     /* icons */

package/ui.container-accordion/types.ts

@@ -2,7 +2,6 @@ import defaultConfig from "./config.ts";
 import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
-export type DividerSize = "md" | "lg" | "xl";
 
 export interface Props {
   /**

package/ui.data-list/UDataList.vue

@@ -14,7 +14,7 @@ import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
-import type { Props, IconSize, DragMoveEvent, DataListItem, Config } from "./types.ts";
+import type { Props, DragMoveEvent, DataListItem, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -50,16 +50,6 @@ const { tm } = useLocale();
 const i18nGlobal = tm(COMPONENT_NAME);
 const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 function isActive(element: DataListItem) {
   return element.isActive === undefined || element.isActive;
 }
@@ -172,19 +162,12 @@ const {
               @slot Use it to add something instead of the drag icon.
               @binding {object} item
               @binding {string} icon-name
-              @binding {string} icon-size
             -->
-            <slot
-              name="drag"
-              :item="element"
-              :icon-name="config.defaults.dragIcon"
-              :icon-size="iconSize"
-            >
+            <slot name="drag" :item="element" :icon-name="config.defaults.dragIcon">
               <UIcon
                 internal
                 color="gray"
                 variant="light"
-                :size="iconSize"
                 :name="config.defaults.dragIcon"
                 v-bind="dragIconAttrs"
               />
@@ -217,20 +200,13 @@ const {
                 @slot Use it to add something instead of the delete icon.
                 @binding {object} item
                 @binding {string} icon-name
-                @binding {string} icon-size
               -->
-              <slot
-                name="delete"
-                :item="element"
-                :icon-name="config.defaults.deleteIcon"
-                :icon-size="iconSize"
-              >
+              <slot name="delete" :item="element" :icon-name="config.defaults.deleteIcon">
                 <UIcon
                   v-if="!element.isHiddenDelete"
                   internal
                   interactive
                   color="red"
-                  :size="iconSize"
                   :name="config.defaults.deleteIcon"
                   :tooltip="currentLocale.delete"
                   v-bind="deleteIconAttrs"
@@ -243,20 +219,13 @@ const {
                 @slot Use it to add something instead of the edit icon.
                 @binding {object} item
                 @binding {string} icon-name
-                @binding {string} icon-size
               -->
-              <slot
-                name="edit"
-                :item="element"
-                :icon-name="config.defaults.editIcon"
-                :icon-size="iconSize"
-              >
+              <slot name="edit" :item="element" :icon-name="config.defaults.editIcon">
                 <UIcon
                   v-if="!element.isHiddenEdit"
                   internal
                   interactive
                   color="gray"
-                  :size="iconSize"
                   :name="config.defaults.editIcon"
                   :tooltip="currentLocale.edit"
                   v-bind="editIconAttrs"

package/ui.data-list/config.ts

@@ -10,7 +10,17 @@ export default /*tw*/ {
     group-last/item-wrapper:border-b-0 group-[]/nested:group-last/item-wrapper:border-b
     py-4 space-x-4 flex flex-auto items-center justify-between
   `,
-  dragIcon: "{UIcon} icon-drag cursor-move opacity-100",
+  dataListIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
+  dragIcon: "{UIcon} {>dataListIcon} icon-drag cursor-move opacity-100",
   label: {
     base: "font-normal text-gray-900 flex-auto pt-px",
     variants: {
@@ -26,8 +36,8 @@ export default /*tw*/ {
     space-x-5 opacity-50 md:flex md:items-center md:opacity-0
     group-hover/item:md:block group-hover/item:opacity-100
   `,
-  deleteIcon: "{UIcon} hidden md:block md:opacity-0 group-hover/item:md:opacity-100",
-  editIcon: "{UIcon} fill-gray-500 opacity-50",
+  deleteIcon: "{UIcon} {>dataListIcon} hidden md:block md:opacity-0 group-hover/item:md:opacity-100",
+  editIcon: "{UIcon} {>dataListIcon} fill-gray-500 opacity-50",
   divider: "{UDivider}",
   empty: "{UEmpty}",
   nested: "{UDataList} group/nested ml-6",

package/ui.data-list/types.ts

@@ -6,8 +6,6 @@ import type { ComponentConfig, UnknownType } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "xs" | "sm" | "md";
-
 export interface DragMoveEvent extends DragEvent {
   draggedContext: typeof DraggableContext;
   relatedContext: typeof DraggableContext | null;

package/ui.dropdown-button/UDropdownButton.vue

@@ -13,7 +13,7 @@ import { vClickOutside } from "../directives";
 import defaultConfig from "./config.ts";
 import { COMPONENT_NAME } from "./constants.ts";
 
-import type { Props, IconSize, DropdownSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 import type { Option } from "../ui.dropdown-list/types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -41,32 +41,6 @@ const dropdownListRef = useTemplateRef<UDropdownListRef>("dropdown-list");
 
 const elementId = props.id || useId();
 
-const iconSize = computed(() => {
-  const sizes = {
-    "2xs": "xs",
-    xs: "xs",
-    sm: "sm",
-    md: "sm",
-    lg: "md",
-    xl: "md",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
-const dropdownSize = computed(() => {
-  const sizes = {
-    "2xs": "sm",
-    xs: "sm",
-    sm: "sm",
-    md: "md",
-    lg: "lg",
-    xl: "lg",
-  };
-
-  return sizes[props.size] as DropdownSize;
-});
-
 function onClickOption(option: Option) {
   emit("clickOption", option);
 }
@@ -143,7 +117,6 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
             v-if="!noIcon"
             internal
             color="inherit"
-            :size="iconSize"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"
@@ -155,7 +128,6 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
     <UDropdownList
       v-if="isShownOptions"
       ref="dropdown-list"
-      :size="dropdownSize"
       :options="options"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"

package/ui.dropdown-button/config.ts

@@ -9,7 +9,19 @@ export default /*tw*/ {
     },
     compoundVariants: [{ opened: true, color: ["grayscale", "white"], class: "ring-gray-700/15" }],
   },
-  dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
+  dropdownIcon: {
+    base: "{UIcon} transition duration-300 group-[]:rotate-180",
+    defaults: {
+      size: {
+        "2xs": "sm",
+        xs: "sm",
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+        xl: "lg",
+      },
+    },
+  },
   dropdownList: {
     base: "{UDropdownList} w-fit",
     variants: {
@@ -22,6 +34,16 @@ export default /*tw*/ {
         right: "right-0",
       },
     },
+    defaults: {
+      size: {
+        "2xs": "sm",
+        xs: "sm",
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+        xl: "lg",
+      },
+    },
   },
   defaults: {
     color: "brand",

package/ui.dropdown-button/types.ts

@@ -5,9 +5,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
-export type DropdownSize = "sm" | "md" | "lg";
-
 export interface Props {
   /**
    * Button label.

package/ui.dropdown-link/UDropdownLink.vue

@@ -13,7 +13,7 @@ import { vClickOutside } from "../directives";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, IconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 import type { Option } from "../ui.dropdown-list/types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -41,16 +41,6 @@ const dropdownListRef = useTemplateRef<UDropdownListRef>("dropdown-list");
 
 const elementId = props.id || useId();
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 function onClickLink() {
   isShownOptions.value = !isShownOptions.value;
 
@@ -129,7 +119,6 @@ const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIcon
             internal
             interactive
             :color="color"
-            :size="iconSize"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"

package/ui.dropdown-link/config.ts

@@ -8,7 +8,16 @@ export default /*tw*/ {
     },
   },
   dropdownLink: "{ULink}",
-  dropdownIcon: "{UIcon} block transition duration-300 group-[]:rotate-180",
+  dropdownIcon: {
+    base: "{UIcon} block transition duration-300 group-[]:rotate-180",
+    defaults: {
+      size: {
+        sm: "2xs",
+        md: "xs",
+        lg: "sm",
+      },
+    },
+  },
   dropdownList: {
     base: "{UDropdownList} w-fit",
     variants: {

package/ui.dropdown-link/types.ts

@@ -5,8 +5,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "sm" | "2xs" | "xs";
-
 export interface Props {
   /**
    * Link label.

package/ui.dropdown-list/UDropdownList.vue

@@ -166,8 +166,13 @@ function getMarginForSubCategory(level: number = 0) {
 function optionHighlight(index: number, option: Option) {
   const classes = [];
 
-  if (index === pointer.value) classes.push(config.value?.optionHighlighted);
-  if (isSelectedOption(option)) classes.push(config.value?.optionSelected);
+  if (isSelectedOption(option)) {
+    classes.push(config.value?.optionActive);
+  }
+
+  if (index === pointer.value && !isSelectedOption(option)) {
+    classes.push(config.value?.optionHighlighted);
+  }
 
   return classes;
 }
@@ -251,6 +256,7 @@ const {
   addOptionLabelHotkeyAttrs,
   addOptionButtonAttrs,
   addOptionIconAttrs,
+  optionActiveAttrs,
   optionAttrs,
   subGroupAttrs,
   groupAttrs,
@@ -281,7 +287,7 @@ const {
         <!-- option title -->
         <span
           v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
-          v-bind="optionAttrs"
+          v-bind="isSelectedOption(option) ? optionActiveAttrs : optionAttrs"
           :class="optionHighlight(index, option)"
           @click="select(option), onClickOption(option)"
           @mouseenter.self="pointerSet(index)"

package/ui.dropdown-list/config.ts

@@ -25,9 +25,9 @@ export default /*tw*/ {
       },
     },
   },
-  optionContent: "overflow-visible text-ellipsis",
-  optionSelected: "font-bold bg-brand-100",
+  optionActive: "{>option} font-bold bg-brand-100 hover:bg-brand-100",
   optionHighlighted: "bg-brand-50",
+  optionContent: "overflow-visible text-ellipsis",
   groupBase: {
     base: "px-2 pb-2.5 font-medium !leading-none text-gray-400 overflow-hidden text-ellipsis",
     variants: {

package/ui.form-checkbox/UCheckbox.vue

@@ -12,7 +12,7 @@ import defaultConfig from "./config.ts";
 import { COMPONENT_NAME } from "./constants.ts";
 
 import type { UnknownObject } from "../types.ts";
-import type { Props, IconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -54,16 +54,6 @@ const checkboxColor = ref(props.color);
 
 const elementId = props.id || useId();
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 const isBinary = computed(() => !Array.isArray(props.modelValue));
 const isCheckboxInGroup = computed(() => Boolean(toValue(getCheckboxGroupName)));
 
@@ -164,7 +154,6 @@ const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIcon
       <UIcon
         internal
         :name="partial ? config.defaults.partiallyCheckedIcon : config.defaults.checkedIcon"
-        :size="iconSize"
         color="white"
         v-bind="checkedIconAttrs"
       />

package/ui.form-checkbox/config.ts

@@ -40,7 +40,16 @@ export default /*tw*/ {
       },
     },
   },
-  checkedIcon: "{UIcon}",
+  checkedIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "2xs",
+        md: "xs",
+        lg: "sm",
+      },
+    },
+  },
   defaults: {
     color: "brand",
     size: "md",

package/ui.form-checkbox/types.ts

@@ -4,8 +4,6 @@ import type { ComponentConfig, UnknownObject, UnknownArray } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "2xs" | "xs" | "sm";
-
 export interface UCheckboxOption {
   value?: string | number | boolean | UnknownObject | UnknownArray;
   falseValue?: string | number | boolean | UnknownObject | UnknownArray;

package/ui.form-color-picker/UColorPicker.vue

@@ -11,7 +11,7 @@ import ULabel from "../ui.form-label/ULabel.vue";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, IconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 import type { BrandColors } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -39,18 +39,6 @@ const selectedItem = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const iconSize = computed(() => {
-  const sizes = {
-    xs: "3xs",
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-    xl: "md",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 function onUpdateValue(value: string) {
   selectedItem.value = value;
 }
@@ -98,7 +86,6 @@ const {
           <UIcon
             v-if="selectedItem === ''"
             internal
-            :size="iconSize"
             color="gray"
             :name="config.defaults.unselectedIcon"
             v-bind="unselectedIconAttrs"

package/ui.form-color-picker/config.ts

@@ -11,7 +11,18 @@ export default /*tw*/ {
     },
   },
   unselected: "relative flex",
-  unselectedIcon: "{UIcon} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
+  unselectedIcon: {
+    base: "{UIcon} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
+    defaults: {
+      size: {
+        xs: "3xs",
+        sm: "2xs",
+        md: "xs",
+        lg: "sm",
+        xl: "md",
+      },
+    },
+  },
   unselectedColorPickerRadio: {
     base: "{URadio}",
     radio: "checked:text-white !border-gray-300",

package/ui.form-color-picker/types.ts

@@ -4,8 +4,6 @@ import type { BrandColors, ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "3xs" | "2xs" | "xs" | "sm" | "md";
-
 export interface Props {
   /**
    * Color picker selected value.