vueless 0.0.288 → 0.0.290

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.288",
+  "version": "0.0.290",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

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

@@ -115,9 +115,9 @@ export default /*tw*/ {
         variant: "thirdary",
         class: `
           text-gray-900
-          hover:text-gray-800 hover:bg-white
-          focus:text-gray-800 focus:bg-white
-          active:text-gray-700 active:bg-white
+          hover:text-gray-800 hover:bg-white/15
+          focus:text-gray-800 focus:bg-white/15
+          active:text-gray-700 active:bg-white/20
         `,
       },
       { filled: true, variant: "thirdary", class: "bg-{color}-600/10" },

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

@@ -7,7 +7,7 @@ export default /*tw*/ {
     variants: {
       size: {
         sm: "gap-1",
-        md: "gap-1.5",
+        md: "gap-1",
         lg: "gap-1.5",
       },
       color: {
@@ -27,7 +27,7 @@ export default /*tw*/ {
   },
   link: {
     base: `
-      w-full inline-block cursor-pointer !leading-none transition
+      inline-block cursor-pointer !leading-none transition
       text-{color}-600 decoration-{color}-600 underline-offset-4
       hover:text-{color}-700 hover:decoration-{color}-700
       focus:text-{color}-700 focus:decoration-{color}-700 focus:outline-0

package/ui.button-link/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
-    <!-- @slot Use it to add something before the text. -->
+    <!-- @slot Use it to add something before the label. -->
     <slot name="left" />
 
     <router-link
@@ -16,7 +16,7 @@
       @keydown="onKeydown"
       @mouseover="onMouseover"
     >
-      <!-- @slot Use it replace the text. -->
+      <!-- @slot Use it replace the label. -->
       <slot>
         {{ label }}
       </slot>
@@ -35,13 +35,11 @@
       @keydown="onKeydown"
       @mouseover="onMouseover"
     >
-      <!-- @slot Use it replace the text. -->
-      <slot>
-        {{ label }}
-      </slot>
+      <!-- @slot Use it replace the label. -->
+      <slot>{{ label }}</slot>
     </a>
 
-    <!-- @slot Use it to add something after the text. -->
+    <!-- @slot Use it to add something after the label. -->
     <slot name="right" />
   </div>
 </template>

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

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

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

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

@@ -3,7 +3,9 @@ export default /*tw*/ {
   dropzoneWrapper: {
     base: `
       p-3 size-auto w-full bg-white transition
-      rounded-dynamic border border-solid border-gray-300 hover:border-gray-400
+      rounded-dynamic border border-solid border-gray-300
+      hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
+      focus-within:ring-brand-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
     `,
     variants: {
       error: {

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

@@ -60,6 +60,7 @@
               :id="id"
               ref="fileInputRef"
               type="file"
+              :disabled="disabled"
               :accept="accept"
               :multiple="multiple"
               v-bind="inputAttrs"

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

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.image-icon/index.vue

@@ -2,6 +2,7 @@
   <component
     :is="dynamicComponent"
     v-tooltip="tooltipConfig"
+    tabindex="-1"
     v-bind="iconAttrs"
     :data-test="dataTest"
     @click="onClick"

package/ui.text-alert/configs/default.config.js

@@ -27,7 +27,7 @@ export default /*tw*/ {
     ],
   },
   text: "{UText}",
-  body: "flex items-baseline justify-between",
+  body: "flex items-start justify-between",
   content: "",
   innerWrapper: "flex gap-2",
   title: {
@@ -42,13 +42,10 @@ export default /*tw*/ {
     },
   },
   description: "",
-  button: {
-    component: "{UButton}",
-    compoundVariants: [{ color: "grayscale", variant: "primary", closable: true, class: "hover:bg-gray-200" }],
-  },
-  icon: "{UIcon}",
-  iconName: "close",
+  closeButton: "{UButton}",
+  closeIcon: "{UIcon}",
   defaults: {
+    closeIcon: "close",
     variant: "primary",
     color: "brand",
     size: "md",

package/ui.text-alert/index.vue

@@ -43,19 +43,19 @@
         v-if="closable"
         square
         no-ring
-        size="sm"
-        :color="color"
+        size="xs"
+        :color="closeButtonColor"
         variant="thirdary"
-        v-bind="buttonAttrs"
+        v-bind="closeButtonAttrs"
         @click="onClickClose"
       >
         <UIcon
           internal
-          size="xs"
+          :size="closeIconSize"
           :color="iconColor"
-          :name="config.iconName"
+          :name="config.defaults.closeIcon"
           :data-test="`${dataTest}-button`"
-          v-bind="iconAttrs"
+          v-bind="closeIconAttrs"
         />
       </UButton>
     </div>
@@ -181,8 +181,8 @@ const {
   textAttrs,
   titleAttrs,
   descriptionAttrs,
-  iconAttrs,
-  buttonAttrs,
+  closeButtonAttrs,
+  closeIconAttrs,
   innerWrapperAttrs,
   hasSlotContent,
 } = useAttrs(props);
@@ -198,10 +198,26 @@ function onClickClose() {
   emit("hidden");
 }
 
+const closeIconSize = computed(() => {
+  const sizes = {
+    xs: "3xs",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+  };
+
+  return sizes[props.size];
+});
+
+const closeButtonColor = computed(() => {
+  if (props.color === "grayscale") return "white";
+  if (props.color === "white") return "grayscale";
+
+  return props.color;
+});
+
 const iconColor = computed(() => {
-  if (props.color === "white") {
-    return "gray";
-  }
+  if (props.color === "white") return "gray";
 
   return props.variant === "primary" ? "white" : props.color;
 });

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

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "border border-solid rounded-full inline-block !leading-none",
+    base: "border rounded-full inline-block py-1 !leading-none",
     variants: {
       variant: {
         primary: "bg-{color}-50 text-{color}-600 border-transparent",
@@ -8,9 +8,9 @@ export default /*tw*/ {
         thirdary: "text-{color}-600 border-transparent",
       },
       size: {
-        sm: "px-2 py-1 text-2xs",
-        md: "px-2 py-1 text-xs",
-        lg: "px-3 py-1.5 text-sm",
+        sm: "px-2 text-2xs",
+        md: "px-2.5 text-xs",
+        lg: "px-3 text-sm",
       },
       weight: {
         regular: "font-normal",
@@ -31,9 +31,9 @@ export default /*tw*/ {
     base: "flex items-center",
     variants: {
       size: {
-        sm: "space-x-0.5",
-        md: "space-x-1",
-        lg: "space-x-1.5",
+        sm: "gap-0.5",
+        md: "gap-x-0.5",
+        lg: "gap-x-0.5",
       },
     },
   },

package/ui.text-badge/index.vue

@@ -186,9 +186,9 @@ defineExpose({ wrapperRef });
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
   };
 
   return sizes[props.size];

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.288",
+  "version": "0.0.290",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5545,15 +5545,15 @@
           "slots": [
             {
               "name": "left",
-              "description": "Use it to add something before the text."
+              "description": "Use it to add something before the label."
             },
             {
               "name": "default",
-              "description": "Use it replace the text."
+              "description": "Use it replace the label."
             },
             {
               "name": "right",
-              "description": "Use it to add something after the text."
+              "description": "Use it to add something after the label."
             }
           ],
           "source": {
@@ -7315,6 +7315,25 @@
             }
           ],
           "slots": [
+            {
+              "name": "right",
+              "description": "Use it to add something after input."
+            },
+            {
+              "name": "right-icon",
+              "scoped": true,
+              "description": "Use it to add icon after option.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                }
+              ]
+            },
             {
               "name": "after-caret",
               "scoped": true,
@@ -7382,25 +7401,6 @@
                 }
               ]
             },
-            {
-              "name": "right",
-              "description": "Use it to add something after input."
-            },
-            {
-              "name": "right-icon",
-              "scoped": true,
-              "description": "Use it to add icon after option.",
-              "bindings": [
-                {
-                  "type": "string",
-                  "name": "icon-name"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-size"
-                }
-              ]
-            },
             {
               "name": "before-option",
               "scoped": true,