vueless 0.0.286 → 0.0.288

package/ui.button-link/index.vue

@@ -1,16 +1,14 @@
 <template>
   <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
-    <div v-if="hasSlotContent($slots['left'])" v-bind="leftSlotAttrs">
-      <!-- @slot Use it to add something before the text. -->
-      <slot name="left" />
-    </div>
+    <!-- @slot Use it to add something before the text. -->
+    <slot name="left" />
 
     <router-link
       v-if="isPresentRoute"
       :to="route"
       :target="targetValue"
-      :data-cy="dataCy"
       v-bind="linkAttrs"
+      :data-test="dataTest"
       tabindex="0"
       @blur="onBlur"
       @focus="onFocus"
@@ -20,16 +18,16 @@
     >
       <!-- @slot Use it replace the text. -->
       <slot>
-        <span v-if="!hasSlotContent($slots['default'])" v-bind="textAttrs" v-text="label" />
+        {{ label }}
       </slot>
     </router-link>
 
     <a
       v-else
-      :href="href"
+      :href="prefixedHref"
       :target="targetValue"
-      :data-cy="dataCy"
       v-bind="linkAttrs"
+      :data-test="dataTest"
       tabindex="0"
       @blur="onBlur"
       @focus="onFocus"
@@ -39,14 +37,12 @@
     >
       <!-- @slot Use it replace the text. -->
       <slot>
-        <span v-if="!hasSlotContent($slots['default'])" v-bind="textAttrs" v-text="label" />
+        {{ label }}
       </slot>
     </a>
 
-    <div v-if="hasSlotContent($slots['right'])" v-bind="rightSlotAttrs">
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
-    </div>
+    <!-- @slot Use it to add something after the text. -->
+    <slot name="right" />
   </div>
 </template>
 
@@ -99,17 +95,17 @@ const props = defineProps({
   },
 
   /**
-   * Link url.
+   * Link href url.
    */
-  url: {
+  href: {
     type: String,
     default: "",
   },
 
   /**
-   * Vue route object.
+   * Vue-router route object.
    */
-  route: {
+  to: {
     type: Object,
     default: () => ({}),
   },
@@ -142,7 +138,7 @@ const props = defineProps({
   },
 
   /**
-   * Open link in new window.
+   * Open link in the new tab.
    */
   targetBlank: {
     type: Boolean,
@@ -254,16 +250,16 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },
 });
 
 const isPresentRoute = computed(() => {
-  for (let key in props.route) return true;
+  for (let key in props.to) return true;
 
   return false;
 });
@@ -274,28 +270,27 @@ const { route, isActive, isExactActive } = useLink({
   exactActiveClass: props.exactActiveClass,
   custom: props.custom,
   replace: props.replace,
-  to: isPresentRoute.value ? props.route : "/",
+  to: isPresentRoute.value ? props.to : "/",
 });
 
 const wrapperRef = ref(null);
 
 defineExpose({ wrapperRef });
 
-const { wrapperAttrs, linkAttrs, rightSlotAttrs, leftSlotAttrs, textAttrs, hasSlotContent } =
-  useAttrs(props, { isActive, isExactActive });
+const { wrapperAttrs, linkAttrs } = useAttrs(props, { isActive, isExactActive });
 
 const targetValue = computed(() => {
   return props.targetBlank ? "_blank" : "_self";
 });
 
-const href = computed(() => {
+const prefixedHref = computed(() => {
   const types = {
     phone: "tel:",
     email: "mailto:",
     link: "",
   };
 
-  return props.url ? `${types[props.type]}${props.url}` : null;
+  return props.href ? `${types[props.type]}${props.href}` : null;
 });
 
 function onClick(event) {

package/ui.button-toggle/configs/default.config.js

@@ -37,12 +37,12 @@ export default /*tw*/ {
     ],
   },
   item: "{UToggleItem}",
-  defaultVariants: {
+  defaults: {
     variant: "primary",
     labelAlign: "top",
     size: "md",
     block: false,
-    pill: false,
+    round: false,
     square: false,
     disabled: false,
     multiple: false,

package/ui.button-toggle/index.stories.js

@@ -123,10 +123,10 @@ separated.args = {
   separated: true,
 };
 
-export const pill = DefaultTemplate.bind({});
-pill.args = {
-  name: "pill",
-  pill: true,
+export const round = DefaultTemplate.bind({});
+round.args = {
+  name: "round",
+  round: true,
   separated: true,
 };
 

package/ui.button-toggle/index.vue

@@ -7,7 +7,7 @@
     :disabled="disabled"
     centred
     v-bind="labelAttrs"
-    :data-cy="dataCy"
+    :data-test="dataTest"
   >
     <div v-bind="itemsAttrs">
       <!-- @slot Use it to add UToggleItem directly. -->
@@ -20,7 +20,7 @@
           :value="item.value"
           :disabled="disabled"
           :label="item.label"
-          :data-cy="`${dataCy}-item-${index}`"
+          :data-test="`${dataTest}-item-${index}`"
           v-bind="itemAttrs"
         />
       </slot>
@@ -145,9 +145,9 @@ const props = defineProps({
   /**
    * Set button corners rounded.
    */
-  pill: {
+  round: {
     type: Boolean,
-    default: getDefault(defaultConfig, UToggle).pill,
+    default: getDefault(defaultConfig, UToggle).round,
   },
 
   /**
@@ -167,9 +167,9 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },
@@ -227,7 +227,7 @@ function updateSelectedValue(value, checked) {
 provide("getToggleName", () => props.name);
 provide("getToggleType", () => type.value);
 provide("getToggleSize", () => props.size);
-provide("getTogglePill", () => props.pill);
+provide("getToggleRound", () => props.round);
 provide("getToggleBlock", () => props.block);
 provide("getToggleSquare", () => props.square);
 provide("getToggleVariant", () => props.variant);

package/ui.button-toggle-item/configs/default.config.js

@@ -42,12 +42,12 @@ export default /*tw*/ {
     ],
   },
   input: "p-0 m-0 size-0 invisible absolute",
-  defaultVariants: {
+  defaults: {
     variant: "primary",
     type: "radio",
     size: "md",
     block: false,
-    pill: false,
+    round: false,
     square: false,
     disabled: false,
   },

package/ui.button-toggle-item/index.vue

@@ -7,7 +7,7 @@
     variant="secondary"
     :label="label"
     :size="getToggleSize()"
-    :pill="getTogglePill()"
+    :round="getToggleRound()"
     :block="getToggleBlock()"
     :square="getToggleSquare()"
     :disabled="getToggleDisabled()"
@@ -107,9 +107,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },
@@ -127,7 +127,7 @@ const emit = defineEmits([
 const getToggleName = inject("getToggleName", () => "toggle");
 const getToggleType = inject("getToggleType", () => getDefault(defaultConfig, UToggleItem).type);
 const getToggleSize = inject("getToggleSize", () => getDefault(defaultConfig, UToggleItem).size);
-const getTogglePill = inject("getTogglePill", () => getDefault(defaultConfig, UToggleItem).pill);
+const getToggleRound = inject("getToggleRound", () => getDefault(defaultConfig, UToggleItem).round);
 const getToggleBlock = inject("getToggleBlock", () => getDefault(defaultConfig, UToggleItem).block);
 const getToggleSquare = inject("getToggleSquare", () => getDefault(defaultConfig, UToggleItem).square);
 const getToggleVariant = inject("getToggleVariant",() => getDefault(defaultConfig, UToggleItem).variant);

package/ui.container-accordion/configs/default.config.js

@@ -28,7 +28,7 @@ export default /*tw*/ {
   expandIconName: "add",
   collapseIconName: "remove",
   divider: "{UDivider} group-last:hidden",
-  defaultVariants: {
+  defaults: {
     size: "md",
   },
 };

package/ui.container-accordion/index.vue

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

package/ui.container-card/configs/default.config.js

@@ -18,7 +18,7 @@ export default /*tw*/ {
   divider: "{UDivider}",
   footer: "flex justify-between",
   footerMobileReverse: "flex flex-col-reverse space-y-reverse",
-  defaultVariants: {
+  defaults: {
     padding: "md",
     mobileFooterReverse: false,
   },

package/ui.container-card/index.stories.js

@@ -84,7 +84,7 @@ export const slotHeaderLeftBefore = DefaultTemplate.bind({});
 slotHeaderLeftBefore.args = {
   slotTemplate: `
     <template #header-left-before>
-      <UIcon name="star" size="sm" pill />
+      <UIcon name="star" size="sm" />
     </template>
     ${defaultTemplate}
   `,
@@ -104,7 +104,7 @@ export const slotHeaderLeftAfter = DefaultTemplate.bind({});
 slotHeaderLeftAfter.args = {
   slotTemplate: `
     <template #header-left-after>
-      <UIcon name="star" size="sm" pill />
+      <UIcon name="star" size="sm" />
     </template>
     ${defaultTemplate}
   `,

package/ui.container-card/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div v-if="isShownHeader" v-bind="headerAttrs">
       <div v-bind="headerLeftAttrs">
         <!-- @slot Use it to add something before left side of the header. -->
@@ -98,9 +98,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.container-col/configs/default.config.js

@@ -38,7 +38,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     gap: "md",
     align: "start",
     justify: "start",

package/ui.container-col/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. -->
     <slot />
   </div>
@@ -68,9 +68,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.container-divider/configs/default.config.js

@@ -63,7 +63,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     variant: "default",
     size: "md",
     dashed: false,

package/ui.container-divider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div v-bind="dividerAttrs" />
     <template v-if="label && !vertical">
       <span v-bind="labelAttrs" v-text="label" />
@@ -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.container-group/configs/default.config.js

@@ -25,7 +25,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     gap: "md",
     upperlined: false,
     underlined: false,

package/ui.container-group/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="wrapperAttrs" :data-cy="dataCy">
+  <div v-bind="wrapperAttrs" :data-test="dataTest">
     <template v-if="title">
       <UDivider v-if="upperlined" size="xl" no-top-padding v-bind="upperlineAttrs" />
 
@@ -86,9 +86,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.container-modal/configs/default.config.js

@@ -55,7 +55,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     width: "sm",
     inner: false,
     closeIcon: true,

package/ui.container-modal/index.vue

@@ -9,7 +9,7 @@
       :id="id"
       ref="wrapperRef"
       tabindex="0"
-      :data-cy="dataCy"
+      :data-test="dataTest"
       v-bind="wrapperAttrs"
       @keydown.self.esc="onKeydownEsc"
     >
@@ -27,7 +27,7 @@
                     v-if="isShownArrowButton"
                     size="sm"
                     color="gray"
-                    :route="backRoute"
+                    :to="backRoute"
                     v-bind="backLinkAttrs"
                     @click="onClickBackLink"
                   >
@@ -58,7 +58,7 @@
                   internal
                   interactive
                   :name="config.closeIconName"
-                  :data-cy="`${dataCy}-close`"
+                  :data-test="`${dataTest}-close`"
                   v-bind="closeIconAttrs"
                   @click="onClickCloseModal"
                 />
@@ -236,9 +236,9 @@ const props = defineProps({
   },
 
   /**
-   * Set data-cy attribute for automated testing.
+   * Set data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.container-modal-confirm/configs/default.config.js

@@ -7,7 +7,7 @@ export default /*tw*/ {
     confirm: "Confirm",
     cancel: "Cancel",
   },
-  defaultVariants: {
+  defaults: {
     width: "sm",
     confirmColor: "brand",
     confirmDisabled: false,

package/ui.container-modal-confirm/index.vue

@@ -5,7 +5,7 @@
     :title="title"
     no-divider
     mobile-bottom-align
-    :data-cy="dataCy"
+    :data-test="dataTest"
     v-bind="modalAttrs"
   >
     <template #header-left-before>
@@ -36,7 +36,7 @@
           :label="confirmLabel || currentLocale.confirm"
           :color="confirmColor"
           :disabled="confirmDisabled"
-          :data-cy="`${dataCy}-accept`"
+          :data-test="`${dataTest}-accept`"
           v-bind="confirmButtonAttrs"
           @click="emitConfirmAction"
         />
@@ -47,7 +47,7 @@
           variant="thirdary"
           color="gray"
           filled
-          :data-cy="`${dataCy}-close`"
+          :data-test="`${dataTest}-close`"
           v-bind="cancelButtonAttrs"
           @click="onCloseModal"
         />
@@ -145,9 +145,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.container-page/configs/default.config.js

@@ -38,7 +38,7 @@ export default /*tw*/ {
   header: "flex items-start justify-between mb-4 md:mb-6",
   headerLeft: "flex items-center space-x-4",
   headerLeftFallback: "flex flex-col",
-  backLink: "{ULink} flex items-center gap-0.5",
+  backLink: "{ULink}",
   backLinkIcon: "{UIcon}",
   backLinkIconName: "arrow_back",
   title: "{UHeader}",
@@ -61,7 +61,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     titleSize: "lg",
     width: "wide",
     gray: false,

package/ui.container-page/index.stories.js

@@ -82,9 +82,9 @@ widePage.args = { widePage: true, width: "sm" };
 
 export const backRoute = DefaultTemplate.bind({});
 backRoute.args = {
+  backLabel: "back",
   backRoute: {
-    name: "",
-    title: "some route title",
+    path: "/",
     params: {},
   },
 };

package/ui.container-page/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div v-bind="pageAttrs">
       <!-- @slot Use it to add something before the header. -->
       <slot name="header-before" />
@@ -14,19 +14,22 @@
             <div v-bind="headerLeftFallbackAttrs">
               <ULink
                 v-if="isShownArrowButton"
-                size="xs"
+                no-ring
+                size="sm"
                 color="gray"
-                :route="backRoute"
+                :to="backRoute"
+                :label="backLabel"
                 v-bind="backLinkAttrs"
               >
-                <UIcon
-                  internal
-                  size="xs"
-                  color="gray"
-                  :name="config.backLinkIconName"
-                  v-bind="backLinkIconAttrs"
-                />
-                {{ backRoute.title }}
+                <template #left>
+                  <UIcon
+                    internal
+                    size="xs"
+                    color="gray"
+                    :name="config.backLinkIconName"
+                    v-bind="backLinkIconAttrs"
+                  />
+                </template>
               </ULink>
 
               <UHeader :label="title" :size="titleSize" v-bind="titleAttrs" />
@@ -133,13 +136,21 @@ const props = defineProps({
   },
 
   /**
-   * Set Vue router route params for back arrow.
+   * Back link vue-router route object.
    */
   backRoute: {
     type: Object,
     default: () => ({}),
   },
 
+  /**
+   * Back link label.
+   */
+  backLabel: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Set gray background color.
    */
@@ -173,9 +184,9 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.container-row/configs/default.config.js

@@ -39,7 +39,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     gap: "md",
     align: "start",
     justify: "start",

package/ui.container-row/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. -->
     <slot />
   </div>
@@ -76,9 +76,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },