vueless 0.0.287 → 0.0.288

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

@@ -117,7 +117,7 @@ export default /*tw*/ {
     clear: "clear",
     addMore: "Add more...",
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
     labelAlign: "topInside",
     openDirection: "auto",

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",

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,11 @@
 <template>
-  <div
+  <component
+    :is="dynamicComponent"
     v-tooltip="tooltipConfig"
+    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 +59,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 +124,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 +140,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 +196,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

@@ -48,7 +48,7 @@ export default /*tw*/ {
   },
   icon: "{UIcon}",
   iconName: "close",
-  defaultVariants: {
+  defaults: {
     variant: "primary",
     color: "brand",
     size: "md",

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

@@ -39,7 +39,7 @@ export default /*tw*/ {
   },
   leftIcon: "{UIcon}",
   rightIcon: "{UIcon}",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     weight: "medium",

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",
   },
 };