vueless 0.0.286 → 0.0.288

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 pill = EnumVariantTemplate.bind({});
-pill.args = { enum: "color", pill: true };

package/ui.image-icon/index.vue

@@ -1,16 +1,11 @@
 <template>
-  <div
+  <component
+    :is="dynamicComponent"
     v-tooltip="tooltipConfig"
-    :data-cy="dataCy"
-    v-bind="wrapperAttrs"
-    @focus="onFocus"
-    @blur="onBlur"
+    v-bind="iconAttrs"
+    :data-test="dataTest"
     @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 pill mild semi-transparent background and solid colour icon.
-   */
-  pill: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UIcon).pill,
-  },
-
   /**
    * Icon variant.
    * @values light, default, dark
@@ -115,9 +102,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },
@@ -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-pagination/index.vue

@@ -5,7 +5,7 @@
         square
         variant="thirdary"
         :disabled="prevIsDisabled"
-        :data-cy="`${dataCy}-first`"
+        :data-test="`${dataTest}-first`"
         v-bind="navigationButtonAttrs"
         @click="goToFirstPage"
       >
@@ -20,7 +20,7 @@
         square
         variant="thirdary"
         :disabled="prevIsDisabled"
-        :data-cy="`${dataCy}-prev`"
+        :data-test="`${dataTest}-prev`"
         v-bind="navigationButtonAttrs"
         @click="goToPrevPage"
       >
@@ -38,7 +38,7 @@
         v-else
         square
         variant="thirdary"
-        :data-cy="`${dataCy}-page`"
+        :data-test="`${dataTest}-page`"
         :disabled="disabled"
         v-bind="pageButtonAttrs(page)"
         @click="selectPage(page.number)"
@@ -52,7 +52,7 @@
         square
         variant="thirdary"
         :disabled="nextIsDisabled"
-        :data-cy="`${dataCy}-next`"
+        :data-test="`${dataTest}-next`"
         v-bind="navigationButtonAttrs"
         @click="goToNextPage"
       >
@@ -67,7 +67,7 @@
         square
         variant="thirdary"
         :disabled="nextIsDisabled"
-        :data-cy="`${dataCy}-last`"
+        :data-test="`${dataTest}-last`"
         v-bind="navigationButtonAttrs"
         @click="goToLastPage"
       >
@@ -203,9 +203,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.navigation-progress/components/StepperProgress.vue

@@ -63,7 +63,7 @@ const props = defineProps({
     default: () => ({}),
   },
 
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -43,7 +43,7 @@
       v-bind="stepperAttrs"
       :color="color"
       :value="value"
-      :data-cy="dataCy"
+      :data-test="dataTest"
       :progress-percent="progressPercent"
     />
   </div>
@@ -126,9 +126,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

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

package/ui.navigation-tab/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClickSetValue">
+  <div :data-test="dataTest" v-bind="wrapperAttrs" @click="onClickSetValue">
     <!-- @slot Use it to add something instead of label. -->
     <slot>
       {{ label }}
@@ -59,9 +59,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
     <!-- @slot Use it to add the UTab component. -->
     <slot>
       <UTab
@@ -9,7 +9,7 @@
         :value="item.value"
         :disabled="item.disabled"
         :size="size"
-        :data-cy="`${dataCy}-item-${index}`"
+        :data-test="`${dataTest}-item-${index}`"
         v-bind="tabAttrs"
       />
     </slot>
@@ -78,9 +78,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

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

package/ui.other-dot/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs" />
+  <div :data-test="dataTest" v-bind="wrapperAttrs" />
 </template>
 
 <script setup>
@@ -40,9 +40,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isShownAlert" :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div v-if="isShownAlert" :data-test="dataTest" v-bind="wrapperAttrs">
     <!-- @slot Use it to add something above the text. -->
     <slot name="top" />
 
@@ -54,7 +54,7 @@
           size="xs"
           :color="iconColor"
           :name="config.iconName"
-          :data-cy="`${dataCy}-button`"
+          :data-test="`${dataTest}-button`"
           v-bind="iconAttrs"
         />
       </UButton>
@@ -156,9 +156,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -2,7 +2,7 @@
   <div
     ref="wrapperRef"
     tabindex="1"
-    :data-cy="dataCy"
+    :data-test="dataTest"
     v-bind="wrapperAttrs"
     @blur="onBlur"
     @focus="onFocus"
@@ -148,9 +148,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="wrapperAttrs" :data-cy="dataCy">
+  <div v-bind="wrapperAttrs" :data-test="dataTest">
     <!-- @slot Use it to add something inside. -->
     <div v-if="!hasSlotContent($slots['default'])" v-bind="htmlAttrs" v-html="html" />
     <slot />
@@ -60,9 +60,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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"
-        pill
       />
     </template>
   `,

package/ui.text-empty/index.vue

@@ -1,16 +1,17 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
     <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"
-          pill
-          v-bind="iconAttrs"
-        />
+        <div v-bind="emptyIconWrapperAttrs">
+          <UIcon
+            internal
+            :name="config.defaults.emptyIcon"
+            color="gray"
+            :size="iconSize"
+            v-bind="emptyIconAttrs"
+          />
+        </div>
       </slot>
     </div>
 
@@ -76,16 +77,24 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },
 });
 
-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-cy="dataCy" 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 }">
@@ -93,9 +93,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -11,7 +11,7 @@
           :image-url="file.imageUrl"
           :size="size"
           v-bind="fileAttrs"
-          :data-cy="`${dataCy}-item`"
+          :data-test="`${dataTest}-item`"
         >
           <template #left="{ file: currentFile }">
             <!-- @slot Use it to add something left.
@@ -97,9 +97,9 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" v-bind="wrapperAttrs" :data-cy="dataCy">
+  <component :is="tag" v-bind="wrapperAttrs" :data-test="dataTest">
     <slot>{{ label }}</slot>
   </component>
 </template>
@@ -83,9 +83,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

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