vueless 0.0.285 → 0.0.287

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/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/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/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/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/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,26 +1,26 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex",
+    base: "flex w-fit",
     variants: {
-      pill: {
+      round: {
         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" },
+      { 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: {
@@ -81,7 +81,7 @@ export default /*tw*/ {
     size: "md",
     variant: "default",
     interactive: false,
-    pill: false,
+    round: false,
   },
   safelist: (colors) => [
     { pattern: `bg-(${colors})-600` },

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

@@ -70,5 +70,5 @@ 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 };
+export const round = EnumVariantTemplate.bind({});
+round.args = { enum: "color", round: true };

package/ui.image-icon/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-tooltip="tooltipConfig"
-    :data-cy="dataCy"
+    :data-test="dataTest"
     v-bind="wrapperAttrs"
     @focus="onFocus"
     @blur="onBlur"
@@ -65,11 +65,11 @@ const props = defineProps({
   },
 
   /**
-   * Set pill mild semi-transparent background and solid colour icon.
+   * Set round mild semi-transparent background and solid colour icon.
    */
-  pill: {
+  round: {
     type: Boolean,
-    default: getDefault(defaultConfig, UIcon).pill,
+    default: getDefault(defaultConfig, UIcon).round,
   },
 
   /**
@@ -115,9 +115,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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/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/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/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/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/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/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/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/index.stories.js

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

package/ui.text-empty/index.vue

@@ -1,5 +1,5 @@
 <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">
@@ -8,7 +8,7 @@
           :name="config.iconName"
           color="gray"
           :size="iconSize"
-          pill
+          round
           v-bind="iconAttrs"
         />
       </slot>
@@ -76,9 +76,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-file/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ULink :url="url" no-ring target-blank :data-cy="dataCy" v-bind="fileAttrs">
+  <ULink :url="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/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/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/index.vue

@@ -5,7 +5,7 @@
       <slot name="left" />
     </div>
 
-    <div :data-cy="dataCy" v-bind="sumAttrs">
+    <div :data-test="dataTest" v-bind="sumAttrs">
       <span v-if="currencySymbolPosition.left" v-bind="symbolAttrs">
         {{ symbol + currencySpace }}
       </span>
@@ -160,9 +160,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-notify/index.vue

@@ -13,7 +13,7 @@
     >
       <UIcon
         v-if="notification.type === NOTIFY_TYPE.success"
-        data-cy="type-notify"
+        data-test="type-notify"
         color="green"
         variant="light"
         size="md"
@@ -24,7 +24,7 @@
 
       <UIcon
         v-else-if="notification.type === NOTIFY_TYPE.warning"
-        data-cy="type-notify"
+        data-test="type-notify"
         color="orange"
         variant="light"
         size="md"
@@ -35,7 +35,7 @@
 
       <UIcon
         v-else-if="notification.type === NOTIFY_TYPE.error"
-        data-cy="type-notify"
+        data-test="type-notify"
         color="red"
         variant="light"
         size="md"