vueless 0.0.287 → 0.0.289

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

@@ -1,45 +1,7 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "flex w-fit",
-    variants: {
-      round: {
-        true: "rounded-full bg-{color}-600/5",
-      },
-    },
-    compoundVariants: [
-      { round: true, size: "4xs", class: "p-0.5" },
-      { round: true, size: "3xs", class: "p-1" },
-      { round: true, size: "2xs", class: "p-1" },
-      { round: true, size: "xs", class: "p-2" },
-      { round: true, size: "sm", class: "p-2" },
-      { round: true, size: "md", class: "p-3" },
-      { round: true, size: "lg", class: "p-3" },
-      { round: true, size: "xl", class: "p-4" },
-      { round: true, size: "2xl", class: "p-4" },
-      { round: true, size: "3xl", class: "p-4" },
-      { round: true, size: "4xl", class: "p-5" },
-      { round: true, size: "5xl", class: "p-5" },
-      { round: true, color: "white", class: "bg-white/5" },
-      { round: true, color: "grayscale", class: "bg-gray-700/5" },
-    ],
-  },
-  container: {
-    base: "fill-current outline-0",
+  icon: {
+    base: "flex w-fit fill-current outline-0",
     variants: {
-      size: {
-        "4xs": "size-2.5",
-        "3xs": "size-3",
-        "2xs": "size-3.5",
-        xs: "size-4",
-        sm: "size-5",
-        md: "size-6",
-        lg: "size-8",
-        xl: "size-10",
-        "2xl": "size-12",
-        "3xl": "size-14",
-        "4xl": "size-16",
-        "5xl": "size-20",
-      },
       variant: {
         light: "text-{color}-400",
         default: "text-{color}-600",
@@ -50,12 +12,8 @@ export default /*tw*/ {
         grayscale: "text-gray-900",
       },
       interactive: {
-        true: "cursor-pointer hover:opacity-50 active:opacity-50",
+        true: "cursor-pointer",
       },
-    },
-  },
-  icon: {
-    variants: {
       size: {
         "4xs": "size-2.5",
         "3xs": "size-3",
@@ -72,7 +30,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     name: "",
     library: "@material-symbols",
     weight: 500,
@@ -81,10 +39,8 @@ export default /*tw*/ {
     size: "md",
     variant: "default",
     interactive: false,
-    round: false,
   },
   safelist: (colors) => [
-    { pattern: `bg-(${colors})-600` },
     { pattern: `text-(${colors})-400` },
     { pattern: `text-(${colors})-600` },
     { pattern: `text-(${colors})-800` },

package/ui.image-icon/index.stories.js

@@ -69,6 +69,3 @@ tooltip.args = { tooltip: "Some text" };
 
 export const interactive = DefaultTemplate.bind({});
 interactive.args = { interactive: true };
-
-export const round = EnumVariantTemplate.bind({});
-round.args = { enum: "color", round: true };

package/ui.image-icon/index.vue

@@ -1,16 +1,12 @@
 <template>
-  <div
+  <component
+    :is="dynamicComponent"
     v-tooltip="tooltipConfig"
+    tabindex="-1"
+    v-bind="iconAttrs"
     :data-test="dataTest"
-    v-bind="wrapperAttrs"
-    @focus="onFocus"
-    @blur="onBlur"
     @click="onClick"
-  >
-    <div v-bind="containerAttrs">
-      <component :is="dynamicComponent" v-bind="iconAttrs" />
-    </div>
-  </div>
+  />
 </template>
 
 <script setup>
@@ -64,14 +60,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UIcon).size,
   },
 
-  /**
-   * Set round mild semi-transparent background and solid colour icon.
-   */
-  round: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UIcon).round,
-  },
-
   /**
    * Icon variant.
    * @values light, default, dark
@@ -137,19 +125,9 @@ const emit = defineEmits([
    * Triggers when the icon is clicked.
    */
   "click",
-
-  /**
-   * Triggers when the icon is focused.
-   */
-  "focus",
-
-  /**
-   * Triggers when the icon loses focus.
-   */
-  "blur",
 ]);
 
-const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
+const { config, iconAttrs } = useAttrs(props);
 
 const generatedIcons = computed(() => {
   return (
@@ -163,11 +141,11 @@ const dynamicComponent = computed(() => {
   const FILL_SUFFIX = "-fill";
 
   const isDefaultIcon = Boolean(generatedIcons.value.find(([path]) => path.includes(props.name)));
-  const userLibrary = config.value.defaultVariants.library;
+  const userLibrary = config.value.defaults.library;
 
   const library = props.internal && isDefaultIcon ? "vueless" : userLibrary;
-  const weight = config.value.defaultVariants.weight;
-  const style = config.value.defaultVariants.style;
+  const weight = config.value.defaults.weight;
+  const style = config.value.defaults.style;
   const isFill = props.name.endsWith(FILL_SUFFIX);
   const name = props.name;
   const src = props.src;
@@ -219,19 +197,13 @@ const dynamicComponent = computed(() => {
   return defineAsyncComponent(libraries[library]);
 });
 
-const tooltipConfig = computed(() => {
-  return { onShow: () => !!props.tooltip, ...props.tooltipSettings, content: props.tooltip };
-});
+const tooltipConfig = computed(() => ({
+  onShow: () => !!props.tooltip,
+  ...props.tooltipSettings,
+  content: props.tooltip,
+}));
 
 function onClick(event) {
   emit("click", event);
 }
-
-function onFocus() {
-  emit("focus");
-}
-
-function onBlur(event) {
-  emit("blur", event);
-}
 </script>

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

@@ -48,7 +48,7 @@ export default /*tw*/ {
     enterFromClass: "opacity-0",
     leaveToClass: "opacity-0",
   },
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     loading: false,

package/ui.loader-rendering/configs/default.config.js

@@ -19,7 +19,7 @@ export default /*tw*/ {
     enterFromClass: "scale-110 transform",
     leaveActiveClass: "scale-110 transform",
   },
-  defaultVariants: {
+  defaults: {
     color: "brand",
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],

package/ui.loader-top/configs/default.config.js

@@ -12,7 +12,7 @@ export default /*tw*/ {
     },
   },
   progressMobile: "mt-safe-top mx-3 rounded max-w-[calc(100%-1.5rem)]",
-  defaultVariants: {
+  defaults: {
     color: "brand",
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],

package/ui.navigation-pagination/configs/default.config.js

@@ -11,7 +11,7 @@ export default /*tw*/ {
     hover:!text-brand-900 !hover:bg-brand-900/15 disabled:hover:bg-brand-900/15
     focus:outline-none
   `,
-  defaultVariants: {
+  defaults: {
     limit: 5,
     perPage: 20,
     prevLabel: "‹",

package/ui.navigation-progress/configs/default.config.js

@@ -94,7 +94,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     variant: "progress",

package/ui.navigation-tab/configs/default.config.js

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

package/ui.navigation-tabs/configs/default.config.js

@@ -13,7 +13,7 @@ export default /*tw*/ {
     },
   },
   tab: "{UTab}",
-  defaultVariants: {
+  defaults: {
     size: "md",
     underlined: false,
   },

package/ui.other-dot/configs/default.config.js

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

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",
-  defaultVariants: {
+  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,15 +31,15 @@ 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",
       },
     },
   },
   leftIcon: "{UIcon}",
   rightIcon: "{UIcon}",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     weight: "medium",

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/ui.text-block/configs/default.config.js

@@ -27,7 +27,7 @@ export default /*tw*/ {
     },
   },
   html: "",
-  defaultVariants: {
+  defaults: {
     size: "md",
     align: "left",
     line: false,

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

@@ -10,10 +10,19 @@ export default /*tw*/ {
       },
     },
   },
-  icon: "{UIcon}",
-  iconName: "emoji_food_beverage",
-  footer: "mt-4 flex justify-center",
+  emptyIconWrapper: {
+    base: "rounded-full bg-gray-700/5",
+    variants: {
+      size: {
+        sm: "p-4",
+        md: "p-5",
+        lg: "p-6",
+      },
+    },
+  },
+  emptyIcon: "{UIcon}",
   title: "{UHeader}",
+  footer: "mt-4 flex justify-center",
   description: {
     base: "text-center",
     variants: {
@@ -24,7 +33,8 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
+    emptyIcon: "emoji_food_beverage",
   },
 };

package/ui.text-empty/index.stories.js

@@ -70,7 +70,6 @@ slotHeader.args = {
         name="person"
         color="blue"
         size="2xl"
-        round
       />
     </template>
   `,

package/ui.text-empty/index.vue

@@ -3,14 +3,15 @@
     <div v-bind="headerAttrs">
       <!-- @slot Use it to add something to the header. -->
       <slot name="header">
-        <UIcon
-          internal
-          :name="config.iconName"
-          color="gray"
-          :size="iconSize"
-          round
-          v-bind="iconAttrs"
-        />
+        <div v-bind="emptyIconWrapperAttrs">
+          <UIcon
+            internal
+            :name="config.defaults.emptyIcon"
+            color="gray"
+            :size="iconSize"
+            v-bind="emptyIconAttrs"
+          />
+        </div>
       </slot>
     </div>
 
@@ -84,8 +85,16 @@ const props = defineProps({
   },
 });
 
-const { config, titleAttrs, descriptionAttrs, wrapperAttrs, headerAttrs, footerAttrs, iconAttrs } =
-  useAttrs(props);
+const {
+  config,
+  titleAttrs,
+  descriptionAttrs,
+  wrapperAttrs,
+  headerAttrs,
+  footerAttrs,
+  emptyIconWrapperAttrs,
+  emptyIconAttrs,
+} = useAttrs(props);
 
 const iconSize = computed(() => {
   const sizes = {

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  file: "{UFile}",
+  file: "{ULink}",
   info: {
     base: "flex items-center",
     variants: {
@@ -26,7 +26,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
   },
 };

package/ui.text-file/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ULink :url="url" no-ring target-blank :data-test="dataTest" v-bind="fileAttrs">
+  <ULink :href="url" no-ring target-blank :data-test="dataTest" v-bind="fileAttrs">
     <slot name="left" :file="{ id, label, url, imageUrl }" />
 
     <slot :file="{ id, label, url, imageUrl, iconName: config.iconName }">

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   label: "{ULabel}",
   body: "flex flex-col gap-1",
   file: "{UFile} block",
-  defaultVariants: {
+  defaults: {
     placement: "top",
     size: "md",
   },

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

@@ -38,7 +38,7 @@ export default /*tw*/ {
       { underlined: true, color: "grayscale", class: "border-gray-600" },
     ],
   },
-  defaultVariants: {
+  defaults: {
     color: "grayscale",
     weight: "medium",
     size: "md",

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

@@ -51,7 +51,7 @@ export default /*tw*/ {
     },
   },
   symbol: "",
-  defaultVariants: {
+  defaults: {
     color: "grayscale",
     size: "md",
     sign: "default",

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

@@ -45,7 +45,7 @@ export default /*tw*/ {
       default: "Operation error.",
     },
   },
-  defaultVariants: {
+  defaults: {
     xPosition: "center",
     yPosition: "top",
   },

package/ui.text-notify/index.vue

@@ -13,24 +13,24 @@
     >
       <UIcon
         v-if="notification.type === NOTIFY_TYPE.success"
-        data-test="type-notify"
         color="green"
         variant="light"
         size="md"
         internal
         :name="config.successIconName"
         v-bind="successIconAttrs"
+        data-test="type-notify"
       />
 
       <UIcon
         v-else-if="notification.type === NOTIFY_TYPE.warning"
-        data-test="type-notify"
         color="orange"
         variant="light"
         size="md"
         internal
         :name="config.warningIconName"
         v-bind="warningIconAttrs"
+        data-test="type-notify"
       />
 
       <UIcon