vueless 0.0.286 → 0.0.288

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"
-              pill
-              internal
-              interactive
-              color="brand"
-              :size="removeItemIconSize"
-              :name="config.removeItemIconName"
-              :data-cy="`${dataCy}-remove-item`"
-              v-bind="removeItemIconAttrs"
+              round
+              filled
+              square
+              no-ring
+              variant="thirdary"
+              :size="removeItemButtonSize"
+              :left-icon="config.removeItemIconName"
+              :disabled="disabled"
+              v-bind="removeItemButtonAttrs"
+              :data-test="`${dataTest}-remove-item`"
               @click.stop.prevent="onClickRemoveItem(file.id)"
             />
           </template>
@@ -51,7 +53,7 @@
               :label="currentLocale.uploadFile"
               :disabled="disabled"
               v-bind="chooseFileButtonAttrs"
-              :data-cy="`${dataCy}-upload`"
+              :data-test="`${dataTest}-upload`"
             />
 
             <input
@@ -67,7 +69,7 @@
 
           <UButton
             v-if="isValue && !disabled"
-            pill
+            round
             square
             filled
             no-ring
@@ -76,7 +78,7 @@
             :disabled="disabled"
             :left-icon="config.clearIconName"
             v-bind="clearButtonAttrs"
-            :data-cy="`${dataCy}-clear`"
+            :data-test="`${dataTest}-clear`"
             @click="onClickResetFiles"
           />
         </div>
@@ -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";
@@ -209,9 +210,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },
@@ -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-money/index.vue

@@ -11,7 +11,7 @@
     :error="error"
     :disabled="disabled"
     inputmode="decimal"
-    :data-cy="`${dataCy}-base-currency`"
+    :data-test="`${dataTest}-base-currency`"
     :left-icon="leftIcon"
     :right-icon="rightIcon"
     v-bind="inputAttrs"
@@ -221,9 +221,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

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

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

@@ -1,11 +1,11 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
     <UButton
       variant="thirdary"
       size="sm"
       filled
       square
-      pill
+      round
       :disabled="isRemoveButtonDisabled"
       v-bind="removeButtonAttrs"
       @click="onClickRemove"
@@ -15,7 +15,7 @@
         :size="size"
         :name="config.removeIconName"
         :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
-        :data-cy="`${dataCy}-remove`"
+        :data-test="`${dataTest}-remove`"
         v-bind="removeIconAttrs"
       />
     </UButton>
@@ -30,7 +30,7 @@
       size="sm"
       filled
       square
-      pill
+      round
       :disabled="isAddButtonDisabled"
       v-bind="addButtonAttrs"
       @click="onClickAdd"
@@ -40,7 +40,7 @@
         :size="size"
         :name="config.addIconName"
         :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
-        :data-cy="`${dataCy}-add`"
+        :data-test="`${dataTest}-add`"
         v-bind="addIconAttrs"
       />
     </UButton>
@@ -120,9 +120,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -6,7 +6,7 @@
     :align="labelAlign"
     :description="description"
     v-bind="labelAttrs"
-    :data-cy="dataCy"
+    :data-test="dataTest"
   >
     <div v-bind="wrapperAttrs">
       <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
@@ -30,7 +30,7 @@
           :interactive="selectable"
           :name="star <= counterValue ? config.selectedIconName : config.unselectedIconName"
           v-bind="starAttrs"
-          :data-cy="`${dataCy}-rating-star-${star}`"
+          :data-test="`${dataTest}-rating-star-${star}`"
           @click="onClickStar(star)"
           @mouseleave="onMouseHover()"
           @mouseover="onMouseHover(star)"
@@ -155,9 +155,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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-input-search/index.vue

@@ -12,7 +12,7 @@
     :description="description"
     :placeholder="placeholder"
     inputmode="search"
-    :data-cy="dataCy"
+    :data-test="dataTest"
     :left-icon="leftIcon"
     v-bind="inputAttrs"
     @keyup.enter="onClickSearch"
@@ -34,7 +34,7 @@
         interactive
         color="gray"
         :name="config.clearIconName"
-        :data-cy="`${dataCy}-close`"
+        :data-test="`${dataTest}-close`"
         :size="iconSize"
         v-bind="clearIconAttrs"
         @click="onClickClear"
@@ -53,7 +53,7 @@
           interactive
           :size="iconSize"
           :name="rightIcon || config.searchIconName"
-          :data-cy="`${dataCy}-search`"
+          :data-test="`${dataTest}-search`"
           v-bind="searchIconAttrs"
           @click="onClickSearch"
         />
@@ -69,7 +69,7 @@
           :size="buttonSize"
           no-ring
           v-bind="buttonAttrs"
-          :data-cy="`${dataCy}-right`"
+          :data-test="`${dataTest}-right`"
           @click="onClickSearch"
         />
       </slot>
@@ -215,9 +215,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -14,16 +14,16 @@
       <label
         v-if="label"
         :for="props.for"
-        :data-cy="`${dataCy}-label`"
+        :data-test="`${dataTest}-label`"
         v-bind="labelAttrs"
         v-text="label"
       />
 
-      <div v-if="error" :data-cy="`${dataCy}-error`" v-bind="descriptionAttrs" v-text="error" />
+      <div v-if="error" :data-test="`${dataTest}-error`" v-bind="descriptionAttrs" v-text="error" />
 
       <div
         v-if="description && !error"
-        :data-cy="`${dataCy}-description`"
+        :data-test="`${dataTest}-description`"
         v-bind="descriptionAttrs"
         v-text="description"
       />
@@ -38,7 +38,7 @@
       v-if="label"
       ref="labelRef"
       :for="props.for"
-      :data-cy="`${dataCy}-label`"
+      :data-test="`${dataTest}-label`"
       v-bind="labelAttrs"
       v-text="label"
     />
@@ -46,11 +46,11 @@
     <!-- @slot Use it to wrap something into the label. -->
     <slot />
 
-    <div v-if="error" :data-cy="`${dataCy}-error`" v-bind="descriptionAttrs" v-text="error" />
+    <div v-if="error" :data-test="`${dataTest}-error`" v-bind="descriptionAttrs" v-text="error" />
 
     <div
       v-if="description && !error"
-      :data-cy="`${dataCy}-description`"
+      :data-test="`${dataTest}-description`"
       v-bind="descriptionAttrs"
       v-text="description"
     />
@@ -156,9 +156,9 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -8,7 +8,7 @@
     :disabled="disabled"
     :description="description"
     v-bind="labelAttrs"
-    :data-cy="`${dataCy}-label`"
+    :data-test="`${dataTest}-label`"
   >
     <input
       :id="id"
@@ -18,7 +18,7 @@
       :checked="checked || isChecked"
       :disabled="disabled"
       v-bind="radioAttrs"
-      :data-cy="dataCy"
+      :data-test="dataTest"
       @change="onChange"
     />
 
@@ -157,9 +157,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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-radio-group/index.vue

@@ -6,7 +6,7 @@
     :description="description"
     :disabled="disabled"
     align="topWithDesc"
-    :data-cy="dataCy"
+    :data-test="dataTest"
     v-bind="labelAttrs"
   >
     <div v-bind="listAttrs">
@@ -19,7 +19,7 @@
           :label="option.label"
           :description="option.description"
           :disabled="disabled"
-          :data-cy="`${dataCy}-item-${index}`"
+          :data-test="`${dataTest}-item-${index}`"
           v-bind="radioAttrs"
         />
       </slot>
@@ -125,9 +125,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "radio",
   },

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

@@ -10,7 +10,7 @@
     :disabled="disabled"
     centred
     v-bind="labelAttrs"
-    :data-cy="dataCy"
+    :data-test="dataTest"
   >
     <div
       ref="wrapperRef"
@@ -491,9 +491,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -6,7 +6,7 @@
     :description="description"
     :align="labelAlign"
     :disabled="disabled"
-    :data-cy="dataCy"
+    :data-test="dataTest"
     v-bind="labelAttrs"
     @click="onClickToggle"
   >
@@ -146,9 +146,9 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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.form-textarea/index.vue

@@ -7,7 +7,7 @@
     :description="description"
     :size="size"
     :disabled="disabled"
-    :data-cy="dataCy"
+    :data-test="dataTest"
     :align="labelAlign"
     v-bind="labelAttrs"
   >
@@ -31,7 +31,7 @@
         :disabled="disabled"
         :rows="rows"
         :inputmode="inputmode"
-        :data-cy="dataCy"
+        :data-test="dataTest"
         v-bind="textareaAttrs"
         @focus="onFocus"
         @blur="onBlur"
@@ -179,9 +179,9 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -2,7 +2,7 @@
   <div
     :title="label"
     :style="backgroundImage"
-    :data-cy="dataCy"
+    :data-test="dataTest"
     v-bind="avatarAttrs"
     @click="onClick"
   >
@@ -101,9 +101,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -1,45 +1,7 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "flex",
-    variants: {
-      pill: {
-        true: "rounded-full bg-{color}-600/5",
-      },
-    },
-    compoundVariants: [
-      { pill: true, size: "4xs", class: "p-0.5" },
-      { pill: true, size: "3xs", class: "p-1" },
-      { pill: true, size: "2xs", class: "p-1" },
-      { pill: true, size: "xs", class: "p-2" },
-      { pill: true, size: "sm", class: "p-2" },
-      { pill: true, size: "md", class: "p-3" },
-      { pill: true, size: "lg", class: "p-3" },
-      { pill: true, size: "xl", class: "p-4" },
-      { pill: true, size: "2xl", class: "p-4" },
-      { pill: true, size: "3xl", class: "p-4" },
-      { pill: true, size: "4xl", class: "p-5" },
-      { pill: true, size: "5xl", class: "p-5" },
-      { pill: true, color: "white", class: "bg-white/5" },
-      { pill: 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,
-    pill: false,
   },
   safelist: (colors) => [
-    { pattern: `bg-(${colors})-600` },
     { pattern: `text-(${colors})-400` },
     { pattern: `text-(${colors})-600` },
     { pattern: `text-(${colors})-800` },