vueless 0.0.674 → 0.0.676

package/ui.container-divider/types.ts

@@ -53,5 +53,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.container-group/types.ts

@@ -28,5 +28,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.container-groups/types.ts

@@ -18,5 +18,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.container-modal/UModal.vue

@@ -32,7 +32,7 @@ const emit = defineEmits([
   "update:modelValue",
 
   /**
-   * Triggers when back link in modal is clicked.
+   * Triggers when a back link is clicked.
    */
   "back",
 ]);
@@ -113,6 +113,7 @@ const {
   config,
   modalAttrs,
   titleAttrs,
+  backLinkWrapperAttrs,
   backLinkAttrs,
   backLinkIconAttrs,
   closeIconAttrs,
@@ -157,25 +158,25 @@ const {
                 <slot name="before-title" />
 
                 <div v-bind="headerLeftFallbackAttrs">
-                  <ULink
-                    v-if="isShownArrowButton"
-                    size="sm"
-                    color="gray"
-                    :to="backTo"
-                    :label="backLabel"
-                    v-bind="backLinkAttrs"
-                    @click="onClickBackLink"
-                  >
-                    <template #left>
-                      <UIcon
-                        internal
-                        size="xs"
-                        color="gray"
-                        :name="config.defaults.backIcon"
-                        v-bind="backLinkIconAttrs"
-                      />
-                    </template>
-                  </ULink>
+                  <div v-if="isShownArrowButton" v-bind="backLinkWrapperAttrs">
+                    <UIcon
+                      internal
+                      size="2xs"
+                      color="gray"
+                      :name="config.defaults.backIcon"
+                      v-bind="backLinkIconAttrs"
+                    />
+
+                    <ULink
+                      size="sm"
+                      color="gray"
+                      :to="backTo"
+                      :ring="false"
+                      :label="backLabel"
+                      v-bind="backLinkAttrs"
+                      @click="onClickBackLink"
+                    />
+                  </div>
 
                   <UHeader :label="title" size="sm" v-bind="titleAttrs" />
                   <div v-if="description" v-bind="descriptionAttrs" v-text="description" />

package/ui.container-modal/config.ts

@@ -18,9 +18,10 @@ export default /*tw*/ {
     leaveToClass: "opacity-0",
   },
   innerWrapper: "py-12 w-full h-full overflow-auto",
-  header: "flex items-center justify-between px-4 md:px-8 pb-6 pt-8",
-  headerLeft: "flex items-center space-x-4",
+  header: "flex justify-between px-4 md:px-8 pb-6 pt-8",
+  headerLeft: "flex items-center gap-4",
   headerLeftFallback: "flex flex-col",
+  backLinkWrapper: "flex items-center gap-0.5 mb-0.5",
   backLink: "{ULink} flex items-center gap-0.5",
   backLinkIcon: "{UIcon}",
   title: "{UHeader}",

package/ui.container-modal/types.ts

@@ -80,5 +80,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.container-modal-confirm/types.ts

@@ -104,5 +104,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.container-page/UPage.vue

@@ -25,6 +25,13 @@ const props = withDefaults(defineProps<Props>(), {
   backLabel: "",
 });
 
+const emit = defineEmits([
+  /**
+   * Triggers when a back link is clicked.
+   */
+  "back",
+]);
+
 const { isMobileBreakpoint } = useBreakpoint();
 
 const isExistHeader = computed(() => {
@@ -56,6 +63,10 @@ onMounted(() => {
   }
 });
 
+function onClickBackLink() {
+  emit("back");
+}
+
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -66,6 +77,7 @@ const {
   pageAttrs,
   rightRoundingAttrs,
   titleAttrs,
+  backLinkWrapperAttrs,
   backLinkAttrs,
   backLinkIconAttrs,
   headerAttrs,
@@ -95,25 +107,25 @@ const {
             <slot name="before-title" />
 
             <div v-bind="headerLeftFallbackAttrs">
-              <ULink
-                v-if="isShownArrowButton"
-                :ring="false"
-                size="sm"
-                color="gray"
-                :to="backTo"
-                :label="backLabel"
-                v-bind="backLinkAttrs"
-              >
-                <template #left>
-                  <UIcon
-                    internal
-                    size="2xs"
-                    color="gray"
-                    :name="config.defaults.backIcon"
-                    v-bind="backLinkIconAttrs"
-                  />
-                </template>
-              </ULink>
+              <div v-if="isShownArrowButton" v-bind="backLinkWrapperAttrs">
+                <UIcon
+                  internal
+                  size="2xs"
+                  color="gray"
+                  :name="config.defaults.backIcon"
+                  v-bind="backLinkIconAttrs"
+                />
+
+                <ULink
+                  :ring="false"
+                  size="sm"
+                  color="gray"
+                  :to="backTo"
+                  :label="backLabel"
+                  v-bind="backLinkAttrs"
+                  @click="onClickBackLink"
+                />
+              </div>
 
               <UHeader :label="title" :size="titleSize" v-bind="titleAttrs" />
               <div v-if="description" v-bind="descriptionAttrs" v-text="description" />

package/ui.container-page/config.ts

@@ -32,6 +32,7 @@ export default /*tw*/ {
   header: "flex items-start justify-between mb-4 md:mb-6",
   headerLeft: "flex items-center gap-4",
   headerLeftFallback: "flex flex-col gap-0.5",
+  backLinkWrapper: "flex items-center gap-0.5",
   backLink: "{ULink}",
   backLinkIcon: "{UIcon}",
   title: "{UHeader}",

package/ui.container-page/types.ts

@@ -54,5 +54,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.container-row/types.ts

@@ -57,5 +57,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.data-list/types.ts

@@ -82,5 +82,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.data-table/types.ts

@@ -111,7 +111,7 @@ export interface UTableProps {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }
 
 export interface UTableRowAttrs {

package/ui.dropdown-badge/types.ts

@@ -90,5 +90,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.dropdown-button/types.ts

@@ -105,5 +105,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.dropdown-link/UDropdownLink.vue

@@ -68,12 +68,18 @@ const mutatedProps = computed(() => ({
   opened: isShownOptions.value,
 }));
 
-const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIconAttrs } =
+const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, toggleIconAttrs } =
   useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
+    <!--
+      @slot Use it to add something before the label.
+      @binding {boolean} opened
+    -->
+    <slot name="left" :opened="isShownOptions" />
+
     <ULink
       :id="elementId"
       :ring="ring"
@@ -84,48 +90,38 @@ const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIcon
       :disabled="disabled"
       :underlined="underlined"
       v-bind="dropdownLinkAttrs"
-      :data-test="dataTest"
+      :data-test="getDataTest()"
       @click="onClickLink"
       @keydown.enter="onClickLink"
       @keydown.space.prevent="onClickLink"
     >
-      <template #left>
+      <template #default>
         <!--
-          @slot Use it to add something before the label.
+          @slot Use it to add something instead of the default label.
+          @binding {string} label
           @binding {boolean} opened
         -->
-        <slot name="left" :opened="isShownOptions" />
-      </template>
-
-      <template #default>
-        <!--
-            @slot Use it to add something instead of the default label.
-            @binding {string} label
-            @binding {boolean} opened
-          -->
         <slot :label="label" :opened="isShownOptions" />
       </template>
-
-      <template #right>
-        <!--
-            @slot Use it to add something after the label.
-            @binding {boolean} opened
-          -->
-        <slot name="right" :opened="isShownOptions">
-          <UIcon
-            v-if="!noIcon"
-            internal
-            interactive
-            :color="color"
-            :name="config.defaults.dropdownIcon"
-            v-bind="dropdownIconAttrs"
-            :data-test="`${dataTest}-dropdown`"
-            @click="onClickLink"
-          />
-        </slot>
-      </template>
     </ULink>
 
+    <!--
+      @slot Use it to add something after the label.
+      @binding {boolean} opened
+    -->
+    <slot name="right" :opened="isShownOptions">
+      <UIcon
+        v-if="!noIcon"
+        internal
+        interactive
+        :color="color"
+        :name="config.defaults.toggleIcon"
+        v-bind="toggleIconAttrs"
+        :data-test="getDataTest('toggle')"
+        @click="onClickLink"
+      />
+    </slot>
+
     <UDropdownList
       v-if="isShownOptions"
       ref="dropdown-list"
@@ -133,7 +129,7 @@ const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIcon
       :options="options"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
-      :data-test="`${dataTest}-list`"
+      :data-test="getDataTest('list')"
       @click-option="onClickOption"
     />
   </div>

package/ui.dropdown-link/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "relative inline-block",
+    base: "relative inline-flex",
     variants: {
       opened: {
         true: "group",
@@ -8,7 +8,7 @@ export default /*tw*/ {
     },
   },
   dropdownLink: "{ULink}",
-  dropdownIcon: {
+  toggleIcon: {
     base: "{UIcon} block transition duration-300 group-[]:rotate-180",
     defaults: {
       size: {
@@ -43,6 +43,6 @@ export default /*tw*/ {
     noIcon: false,
     disabled: false,
     /* icons */
-    dropdownIcon: "keyboard_arrow_down",
+    toggleIcon: "keyboard_arrow_down",
   },
 };

package/ui.dropdown-link/types.ts

@@ -100,5 +100,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.dropdown-list/types.ts

@@ -70,5 +70,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-calendar/types.ts

@@ -80,7 +80,7 @@ export interface UCalendarProps<TModelValue extends DateValue> {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }
 
 export interface UCalendarViewProps {

package/ui.form-checkbox/types.ts

@@ -113,5 +113,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-checkbox-group/types.ts

@@ -79,5 +79,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-checkbox-multi-state/types.ts

@@ -69,5 +69,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-date-picker/types.ts

@@ -116,5 +116,5 @@ export interface Props<TModelValue> {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-date-picker-range/types.ts

@@ -189,5 +189,5 @@ export interface UDatePickerRangeProps<TModelValue> {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-input/types.ts

@@ -99,5 +99,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-input-file/types.ts

@@ -68,5 +68,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-input-money/types.ts

@@ -116,5 +116,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-input-number/types.ts

@@ -63,5 +63,5 @@ export interface UInputNumberProps {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-input-rating/types.ts

@@ -63,5 +63,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-input-search/types.ts

@@ -88,5 +88,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-label/types.ts

@@ -58,5 +58,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-radio/types.ts

@@ -95,5 +95,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-radio-group/types.ts

@@ -88,5 +88,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-select/USelect.vue

@@ -416,6 +416,7 @@ const mutatedProps = computed(() => ({
 
 const {
   config,
+  getDataTest,
   selectLabelAttrs,
   wrapperAttrs,
   innerWrapperAttrs,
@@ -453,7 +454,7 @@ const {
     centred
     interactive
     v-bind="selectLabelAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
     :tabindex="-1"
   >
     <template #label>
@@ -503,6 +504,7 @@ const {
         v-show="!multiple || (!isLocalValue && multiple)"
         v-bind="toggleWrapperAttrs"
         :tabindex="-1"
+        :data-test="getDataTest('toggle')"
         @mousedown.prevent.stop="toggle"
       >
         <!--
@@ -517,7 +519,6 @@ const {
             color="gray"
             :name="config.defaults.dropdownIcon"
             v-bind="toggleIconAttrs"
-            :data-test="`${dataTest}-toggle`"
             :tabindex="-1"
           />
         </slot>
@@ -526,6 +527,7 @@ const {
       <div
         v-if="isLocalValue && clearable && !disabled && !multiple"
         v-bind="clearAttrs"
+        :data-test="getDataTest('clear')"
         @mousedown="onMouseDownClear"
       >
         <!--
@@ -539,7 +541,6 @@ const {
             color="gray"
             :name="config.defaults.clearIcon"
             v-bind="clearIconAttrs"
-            :data-test="`${dataTest}-clear`"
           />
         </slot>
       </div>
@@ -599,6 +600,7 @@ const {
             <div
               v-if="!disabled"
               v-bind="clearMultipleAttrs"
+              :data-test="getDataTest('clear-item')"
               @mousedown.prevent.capture
               @click.prevent.capture
               @mousedown="onMouseDownClearItem($event, item)"
@@ -614,7 +616,6 @@ const {
                   color="gray"
                   :name="config.defaults.clearMultipleIcon"
                   v-bind="clearMultipleIconAttrs"
-                  :data-test="`${dataTest}-clear-all`"
                 />
               </slot>
             </div>
@@ -634,7 +635,7 @@ const {
             :disabled="disabled"
             :aria-controls="'listbox-' + elementId"
             v-bind="searchInputAttrs"
-            :data-test="`${dataTest}-search`"
+            :data-test="getDataTest('search')"
             @focus="activate"
             @blur.prevent="deactivate"
             @keyup.esc="deactivate"
@@ -674,6 +675,7 @@ const {
         <div
           v-if="isLocalValue && clearable && !disabled && multiple"
           v-bind="clearMultipleTextAttrs"
+          :data-test="getDataTest('clear-all')"
           @mousedown.prevent.capture="onMouseDownClear"
           @click.prevent.capture
           v-text="currentLocale.clear"
@@ -693,7 +695,7 @@ const {
         :add-option="addOption"
         tabindex="-1"
         v-bind="dropdownListAttrs as KeyAttrsWithConfig<UDropdownListConfig>"
-        :data-test="dataTest"
+        :data-test="getDataTest()"
         @add="onAddOption"
         @focus="activate"
         @mousedown.prevent.capture

package/ui.form-select/types.ts

@@ -130,5 +130,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-switch/types.ts

@@ -84,5 +84,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-textarea/types.ts

@@ -83,5 +83,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.image-avatar/types.ts

@@ -69,5 +69,5 @@ export interface UAvatarProps {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }