vueless 0.0.287 → 0.0.289

package/ui.dropdown-badge/composables/attrs.composable.js

@@ -28,12 +28,12 @@ export default function useAttrs(props, { isShownOptions }) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "icon") {
-      const iconAttrs = attrs[`${key}Attrs`];
+    if (key === "badge") {
+      const badgeAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
-        ...iconAttrs.value,
-        class: cx([iconAttrs.value.class, isShownOptions.value && config.value.iconRotate]),
+        ...badgeAttrs.value,
+        class: cx([badgeAttrs.value.class, isShownOptions.value && config.value.badgeActive]),
       }));
     }
 

package/ui.dropdown-badge/configs/default.config.js

@@ -1,9 +1,19 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  badge: "{UBadge} cursor-pointer",
-  icon: "{UIcon} transition duration-300",
+  badge: {
+    component: "{UBadge}",
+    base: "cursor-pointer",
+    variants: {
+      size: {
+        sm: "pr-1",
+        md: "pr-1.5",
+        lg: "pr-1.5",
+      },
+    },
+  },
+  badgeActive: "group",
+  icon: "{UIcon} transition duration-300 group-[]:rotate-180",
   iconName: "keyboard_arrow_down",
-  iconRotate: "rotate-180",
   listWrapper: {
     base: `
       absolute z-10
@@ -22,7 +32,7 @@ export default /*tw*/ {
     },
   },
   list: "{UDropdownList} w-fit",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     weight: "medium",

package/ui.dropdown-badge/index.vue

@@ -11,7 +11,7 @@
       v-bind="badgeAttrs"
       @click="onClickBadge"
     >
-      <template #right>
+      <template #right-icon>
         <UIcon
           v-if="!noIcon"
           internal
@@ -204,9 +204,9 @@ const { config, listWrapperAttrs, wrapperAttrs, badgeAttrs, listAttrs, iconAttrs
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
   };
 
   return sizes[props.size];

package/ui.dropdown-button/composables/attrs.composable.js

@@ -28,12 +28,12 @@ export default function useAttrs(props, { isShownOptions }) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "icon") {
-      const iconAttrs = attrs[`${key}Attrs`];
+    if (key === "button") {
+      const buttonAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
-        ...iconAttrs.value,
-        class: cx([iconAttrs.value.class, isShownOptions.value && config.value.iconRotate]),
+        ...buttonAttrs.value,
+        class: cx([buttonAttrs.value.class, isShownOptions.value && config.value.buttonActive]),
       }));
     }
 

package/ui.dropdown-button/configs/default.config.js

@@ -1,9 +1,9 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   button: "{UButton}",
-  icon: "{UIcon} transition duration-300",
+  buttonActive: "group",
+  icon: "{UIcon} transition duration-300 group-[]:rotate-180",
   iconName: "keyboard_arrow_down",
-  iconRotate: "rotate-180",
   listWrapper: {
     base: `
       absolute z-10 inline-block
@@ -22,7 +22,7 @@ export default /*tw*/ {
     },
   },
   list: "{UDropdownList} w-fit",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     variant: "primary",

package/ui.dropdown-link/composables/attrs.composable.js

@@ -28,12 +28,12 @@ export default function useAttrs(props, { isShownOptions }) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "icon") {
-      const iconAttrs = attrs[`${key}Attrs`];
+    if (key === "link") {
+      const linkAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
-        ...iconAttrs.value,
-        class: cx([iconAttrs.value.class, isShownOptions.value && config.value.iconRotate]),
+        ...linkAttrs.value,
+        class: cx([linkAttrs.value.class, isShownOptions.value && config.value.linkActive]),
       }));
     }
 

package/ui.dropdown-link/configs/default.config.js

@@ -2,9 +2,9 @@ export default /*tw*/ {
   wrapper: "relative inline-block",
   trigger: "flex items-center relative space-x-0.5",
   link: "{ULink}",
-  icon: "{UIcon} block transition duration-300",
+  linkActive: "group",
+  icon: "{UIcon} block transition duration-300 group-[]:rotate-180",
   iconName: "keyboard_arrow_down",
-  iconRotate: "rotate-180",
   listWrapper: {
     base: `
       absolute z-10
@@ -23,7 +23,7 @@ export default /*tw*/ {
     },
   },
   list: "{UDropdownList} w-fit",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     labelKey: "label",

package/ui.dropdown-list/configs/default.config.js

@@ -61,7 +61,7 @@ export default /*tw*/ {
     noDataToShow: "No data to show.",
     add: "Add",
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
     labelKey: "label",
     valueKey: "id",

package/ui.form-calendar/configs/default.config.js

@@ -123,7 +123,7 @@ export default /*tw*/ {
     timeLabel: "Time",
     okLabel: "Ok",
   },
-  defaultVariants: {
+  defaults: {
     userFormat: "F j, Y",
     range: false,
     timepicker: false,

package/ui.form-checkbox/configs/default.config.js

@@ -43,7 +43,7 @@ export default /*tw*/ {
   icon: "{UIcon}",
   partialIconName: "remove",
   selectedIconName: "check",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     labelAlign: "right",

package/ui.form-checkbox-group/configs/default.config.js

@@ -11,7 +11,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     disabled: false,

package/ui.form-checkbox-multi-state/configs/default.config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   checkbox: "{UCheckbox}",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     placement: "left",

package/ui.form-color-picker/configs/default.config.js

@@ -24,7 +24,7 @@ export default /*tw*/ {
       disabled:border-{color}-400 disabled:bg-{color}-400
     `,
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
     name: "colorPicker",
     disabled: false,

package/ui.form-date-picker/configs/default.config.js

@@ -107,7 +107,7 @@ export default /*tw*/ {
     timeLabel: "Time",
     okLabel: "Ok",
   },
-  defaultVariants: {
+  defaults: {
     userFormat: "F j, Y",
     size: "md",
     openDirectionX: "auto",

package/ui.form-date-picker-range/configs/default.config.js

@@ -155,7 +155,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
     variant: "button",
     openDirectionX: "auto",

package/ui.form-input/configs/default.config.js

@@ -54,7 +54,7 @@ export default /*tw*/ {
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
     ],
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
     type: "text",
     inputmode: "text",

package/ui.form-input-file/configs/default.config.js

@@ -56,7 +56,7 @@ export default /*tw*/ {
   chooseFileIconName: "attach_file",
   clearButton: "{UButton}",
   clearIconName: "close",
-  removeItemIcon: "{UIcon} ml-2",
+  removeItemButton: "{UButton} ml-2",
   removeItemIconName: "close",
   dropzoneWrapperHover: "border-gray-400 border-dashed",
   dropzoneWrapperError: "hover:border-red-400 border-dashed border-red-300",
@@ -69,7 +69,7 @@ export default /*tw*/ {
     noFile: "No file selected",
     uploadFile: "Choose file",
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
     labelAlign: "topInside",
     allowedFileTypes: [],

package/ui.form-input-file/index.vue

@@ -23,16 +23,18 @@
 
         <UFiles :size="size" v-bind="fileListAttrs" :file-list="fileList">
           <template #right="{ file }">
-            <UIcon
+            <UButton
               v-if="props.multiple && !disabled"
               round
-              internal
-              interactive
-              color="brand"
-              :size="removeItemIconSize"
-              :name="config.removeItemIconName"
+              filled
+              square
+              no-ring
+              variant="thirdary"
+              :size="removeItemButtonSize"
+              :left-icon="config.removeItemIconName"
+              :disabled="disabled"
+              v-bind="removeItemButtonAttrs"
               :data-test="`${dataTest}-remove-item`"
-              v-bind="removeItemIconAttrs"
               @click.stop.prevent="onClickRemoveItem(file.id)"
             />
           </template>
@@ -95,7 +97,6 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { merge } from "lodash-es";
 
 import UText from "../ui.text-block";
-import UIcon from "../ui.image-icon";
 import ULabel from "../ui.form-label";
 import UButton from "../ui.button";
 import UFiles from "../ui.text-files";
@@ -249,7 +250,7 @@ const {
   inputAttrs,
   fileListAttrs,
   buttonWrapperAttrs,
-  removeItemIconAttrs,
+  removeItemButtonAttrs,
   hasSlotContent,
 } = useAttrs(props);
 
@@ -297,11 +298,11 @@ const fileList = computed(() => {
   return currentFiles.value ? [currentFiles.value] : [];
 });
 
-const removeItemIconSize = computed(() => {
+const removeItemButtonSize = computed(() => {
   const sizes = {
-    sm: "4xs",
-    md: "3xs",
-    lg: "2xs",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
   };
 
   return sizes[props.size];

package/ui.form-input-money/configs/default.config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   input: "{UInput}",
-  defaultVariants: {
+  defaults: {
     symbol: "$",
     size: "md",
     decimalScale: 2,

package/ui.form-input-number/configs/default.config.js

@@ -27,7 +27,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
   },
 };

package/ui.form-input-rating/configs/default.config.js

@@ -32,7 +32,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     labelAlign: "top",
     size: "md",
     stars: 5,

package/ui.form-input-search/configs/default.config.js

@@ -5,7 +5,7 @@ export default /*tw*/ {
   searchIcon: "{UIcon}",
   searchIconName: "search",
   button: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",
-  defaultVariants: {
+  defaults: {
     size: "md",
     labelAlign: "topInside",
     debounce: 300,

package/ui.form-label/configs/default.config.js

@@ -97,7 +97,7 @@ export default /*tw*/ {
       { align: "topInside", size: "lg", class: "mt-2.5" },
     ],
   },
-  defaultVariants: {
+  defaults: {
     align: "top",
     size: "md",
     error: false,

package/ui.form-radio/configs/default.config.js

@@ -19,7 +19,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     color: "brand",
     labelAlign: "right",
     size: "md",

package/ui.form-radio-group/configs/default.config.js

@@ -11,7 +11,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     disabled: false,

package/ui.form-select/composables/attrs.composable.js

@@ -68,30 +68,18 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
       }));
     }
 
-    if (key === "clear") {
-      const clearAttrs = attrs[`${key}Attrs`];
+    if (
+      key === "toggle" ||
+      key === "clear" ||
+      key === "beforeCaret" ||
+      key === "afterCaret" ||
+      key === "rightIconWrapper"
+    ) {
+      const keyAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
-        ...clearAttrs.value,
-        class: cx([clearAttrs.value.class, caretClasses.value]),
-      }));
-    }
-
-    if (key === "beforeCaret") {
-      const beforeCaretAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...beforeCaretAttrs.value,
-        class: cx([beforeCaretAttrs.value.class, caretClasses.value]),
-      }));
-    }
-
-    if (key === "afterCaret") {
-      const afterCaretAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...afterCaretAttrs.value,
-        class: cx([afterCaretAttrs.value.class, caretClasses.value]),
+        ...keyAttrs.value,
+        class: cx([keyAttrs.value.class, caretClasses.value]),
       }));
     }
 

package/ui.form-select/configs/default.config.js

@@ -18,10 +18,7 @@ export default /*tw*/ {
         `,
       },
       disabled: {
-        true: `
-          border-gray-100 bg-gray-100 text-gray-900 hover:border-gray-100
-          focus-within:border-gray-100 focus-within:ring-0 focus-within:ring-offset-0
-        `,
+        true: "bg-gray-100 pointer-events-none",
       },
     },
     compoundVariants: [
@@ -52,7 +49,7 @@ export default /*tw*/ {
         lg: "text-base min-h-6",
       },
       disabled: {
-        true: "bg-gray-100",
+        true: "text-gray-700",
       },
       multiple: {
         true: "py-2 last:mb-2.5 flex justify-between border-b border-gray-100",
@@ -64,8 +61,8 @@ export default /*tw*/ {
       { size: "lg", multiple: true, class: "text-base" },
     ],
   },
-  leftIconWrapper: "pr-3 flex items-center",
-  rightIconWrapper: "pl-3 flex items-center",
+  leftIconWrapper: "pr-1.5",
+  rightIconWrapper: "pr-3",
   leftIcon: "{UIcon}",
   rightIcon: "{UIcon}",
   beforeCaret: "",
@@ -79,7 +76,7 @@ export default /*tw*/ {
     ],
   },
   toggle: "mr-3",
-  toggleIcon: "{UIcon} transform transition duration-300 group-[]/active:rotate-180",
+  toggleIcon: "{UIcon} transition duration-300 group-[]/active:rotate-180",
   toggleIconName: "expand_more",
   clear: "",
   clearIcon: "{UIcon}",
@@ -95,7 +92,7 @@ export default /*tw*/ {
       { size: "lg", class: "text-base" },
     ],
   },
-  search: "flex w-fit",
+  search: "flex w-full",
   searchInput: {
     base: `
         p-0 font-normal leading-none text-gray-900 relative w-full border-none bg-transparent
@@ -117,7 +114,7 @@ export default /*tw*/ {
     clear: "clear",
     addMore: "Add more...",
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
     labelAlign: "topInside",
     openDirection: "auto",

package/ui.form-select/index.vue

@@ -11,10 +11,11 @@
     centred
     v-bind="labelAttrs"
     :data-test="dataTest"
+    :tabindex="-1"
   >
     <div
       ref="wrapperRef"
-      :tabindex="searchable ? -1 : 0"
+      :tabindex="searchable || disabled ? -1 : 0"
       role="combobox"
       :aria-owns="'listbox-' + id"
       v-bind="wrapperAttrs"
@@ -25,9 +26,30 @@
       @keydown.enter.tab.stop.self="dropdownListRef.addPointerElement"
       @keyup.esc="deactivate"
     >
+      <!-- @slot Use it to add something after input. -->
+      <slot name="right" />
+
+      <div v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconWrapperAttrs">
+        <!--
+            @slot Use it to add icon after option.
+            @binding {string} icon-name
+            @binding {string} icon-size
+          -->
+        <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize">
+          <UIcon
+            v-if="rightIcon"
+            :name="rightIcon"
+            :size="iconSize"
+            internal
+            v-bind="rightIconAttrs"
+          />
+        </slot>
+      </div>
+
       <div
         v-if="hasSlotContent($slots['after-caret']) && !(multiple && localValue.length)"
         v-bind="afterCaretAttrs"
+        :tabindex="-1"
       >
         <!--
           @slot Use it to add something after caret.
@@ -39,6 +61,7 @@
       <div
         v-show="!multiple || (!isLocalValue && multiple)"
         v-bind="toggleAttrs"
+        :tabindex="-1"
         @mousedown.prevent.stop="toggle"
       >
         <UIcon
@@ -48,20 +71,10 @@
           :size="iconSize"
           :name="config.toggleIconName"
           v-bind="toggleIconAttrs"
+          :tabindex="-1"
         />
       </div>
 
-      <div
-        v-if="hasSlotContent($slots['before-caret']) && !(multiple && localValue.length)"
-        v-bind="beforeCaretAttrs"
-      >
-        <!--
-          @slot Use it to add something before caret.
-          @binding {object} scope-props
-        -->
-        <slot :scope-props="props" name="before-caret" />
-      </div>
-
       <div v-if="isLocalValue && !noClear && !disabled && !multiple" v-bind="clearAttrs">
         <UIcon
           internal
@@ -74,6 +87,17 @@
         />
       </div>
 
+      <div
+        v-if="hasSlotContent($slots['before-caret']) && !(multiple && localValue.length)"
+        v-bind="beforeCaretAttrs"
+      >
+        <!--
+          @slot Use it to add something before caret.
+          @binding {object} scope-props
+        -->
+        <slot :scope-props="props" name="before-caret" />
+      </div>
+
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
         <span
           v-if="hasSlotContent($slots['left-icon']) || leftIcon"
@@ -192,29 +216,6 @@
           @click.prevent.capture
           v-text="currentLocale.clear"
         />
-
-        <!-- @slot Use it to add something after input. -->
-        <slot name="right" />
-
-        <span
-          v-if="hasSlotContent($slots['right-icon']) || rightIcon"
-          v-bind="rightIconWrapperAttrs"
-        >
-          <!--
-            @slot Use it to add icon after option.
-            @binding {string} icon-name
-            @binding {string} icon-size
-          -->
-          <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize">
-            <UIcon
-              v-if="rightIcon"
-              :name="rightIcon"
-              :size="iconSize"
-              internal
-              v-bind="rightIconAttrs"
-            />
-          </slot>
-        </span>
       </div>
 
       <UDropdownList
@@ -752,7 +753,7 @@ function toggle() {
 }
 
 function deactivate() {
-  if (!isOpen.value) return;
+  if (!isOpen.value || props.disabled) return;
 
   props.searchable && searchInputRef.value ? searchInputRef.value.blur() : wrapperRef.value?.blur();
 

package/ui.form-switch/configs/default.config.js

@@ -58,7 +58,7 @@ export default /*tw*/ {
     inactive: "Off",
     active: "On",
   },
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     labelAlign: "right",

package/ui.form-textarea/configs/default.config.js

@@ -40,7 +40,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     rows: "3",
     size: "md",
     type: "text",

package/ui.image-avatar/configs/default.config.js

@@ -34,7 +34,7 @@ export default /*tw*/ {
     },
   },
   icon: "{UIcon}",
-  defaultVariants: {
+  defaults: {
     color: "grayscale",
     rounded: "md",
     size: "md",