vueless 0.0.675 → 0.0.676

package/composables/useUI.ts

@@ -241,7 +241,18 @@ export default function useUI<T>(
     return vuelessAttrs;
   }
 
-  return { config, getKeysAttrs, ...getKeysAttrs(mutatedProps) } as UseUI<T>;
+  /**
+   * Get data test attribute value if exist.
+   */
+  function getDataTest(suffix?: string) {
+    if (!props.dataTest) {
+      return null;
+    }
+
+    return suffix ? `${props.dataTest}-${suffix}` : props.dataTest;
+  }
+
+  return { config, getDataTest, ...getKeysAttrs(mutatedProps) } as UseUI<T>;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.675",
+  "version": "0.0.676",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -297,7 +297,7 @@ export type MutatedProps = ComputedRef<UnknownObject>;
 
 export type UseUI<T> = {
   config: Ref<T & ComponentConfig<T>>;
-  getKeysAttrs: (mutatedProps?: MutatedProps) => KeysAttrs<T>;
+  getDataTest: (suffix?: string) => string | null;
 } & KeysAttrs<T>;
 
 export type KeysAttrs<T> = Record<

package/ui.boilerplate/types.ts

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

package/ui.button/UButton.vue

@@ -67,10 +67,8 @@ const mutatedProps = computed(() => ({
   label: Boolean(props.label),
 }));
 
-const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } = useUI<Config>(
-  defaultConfig,
-  mutatedProps,
-);
+const { getDataTest, buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -82,10 +80,15 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
     v-bind="buttonAttrs"
     :style="buttonStyle"
     :tabindex="!loading ? tabindex : -1"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
   >
     <template v-if="loading">
-      <ULoader :loading="loading" color="inherit" v-bind="loaderAttrs" />
+      <ULoader
+        :loading="loading"
+        color="inherit"
+        v-bind="loaderAttrs"
+        :data-test="getDataTest('loader')"
+      />
     </template>
 
     <template v-else>

package/ui.button/types.ts

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

package/ui.button-link/ULink.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useSlots } from "vue";
+import { computed, useSlots } from "vue";
 import { RouterLink, useLink } from "vue-router";
 
 import useUI from "../composables/useUI.ts";
@@ -71,13 +71,6 @@ const useLinkOptions = {
 
 const { route, isActive, isExactActive } = useLink(useLinkOptions);
 
-const wrapperRef = ref(null);
-
-const wrapperActiveClasses = computed(() => [
-  isActive.value && props.wrapperActiveClass,
-  isExactActive.value && props.wrapperExactActiveClass,
-]);
-
 const linkActiveClasses = computed(() => [
   isActive.value && props.activeClass,
   isExactActive.value && props.exactActiveClass,
@@ -117,14 +110,6 @@ function onBlur(event: FocusEvent) {
   emit("blur", event);
 }
 
-defineExpose({
-  /**
-   * A reference to the link wrapper element for direct DOM manipulation.
-   * @property {HTMLElement}
-   */
-  wrapperRef,
-});
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -134,53 +119,43 @@ const mutatedProps = computed(() => ({
   defaultSlot: hasSlotContent(slots["default"]),
 }));
 
-const { wrapperAttrs, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps, "link");
+const { getDataTest, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapperRef" :class="wrapperActiveClasses" tabindex="-1">
-    <!-- @slot Use it to add something before the label. -->
-    <slot name="left" />
-
-    <router-link
-      v-if="isPresentRoute"
-      :to="route"
-      :target="targetValue"
-      v-bind="linkAttrs"
-      :class="linkActiveClasses"
-      :data-test="dataTest"
-      tabindex="0"
-      @blur="onBlur"
-      @focus="onFocus"
-      @click="onClick"
-      @keydown="onKeydown"
-      @mouseover="onMouseover"
-    >
-      <!-- @slot Use it replace the label. -->
-      <slot>
-        {{ label }}
-      </slot>
-    </router-link>
-
-    <a
-      v-else
-      :href="prefixedHref"
-      :target="targetValue"
-      v-bind="linkAttrs"
-      :class="linkActiveClasses"
-      :data-test="dataTest"
-      tabindex="0"
-      @blur="onBlur"
-      @focus="onFocus"
-      @click="onClick"
-      @keydown="onKeydown"
-      @mouseover="onMouseover"
-    >
-      <!-- @slot Use it replace the label. -->
-      <slot>{{ label }}</slot>
-    </a>
-
-    <!-- @slot Use it to add something after the label. -->
-    <slot name="right" />
-  </div>
+  <router-link
+    v-if="isPresentRoute"
+    :to="route"
+    :target="targetValue"
+    v-bind="linkAttrs"
+    :class="linkActiveClasses"
+    :data-test="getDataTest()"
+    tabindex="0"
+    @blur="onBlur"
+    @focus="onFocus"
+    @click="onClick"
+    @keydown="onKeydown"
+    @mouseover="onMouseover"
+  >
+    <!-- @slot Use it replace the label. -->
+    <slot>{{ label }}</slot>
+  </router-link>
+
+  <a
+    v-else
+    :href="prefixedHref"
+    :target="targetValue"
+    v-bind="linkAttrs"
+    :class="linkActiveClasses"
+    :data-test="getDataTest()"
+    tabindex="0"
+    @blur="onBlur"
+    @focus="onFocus"
+    @click="onClick"
+    @keydown="onKeydown"
+    @mouseover="onMouseover"
+  >
+    <!-- @slot Use it replace the label. -->
+    <slot>{{ label }}</slot>
+  </a>
 </template>

package/ui.button-link/config.ts

@@ -1,40 +1,12 @@
 export default /*tw*/ {
-  wrapper: {
-    base: `
-      w-fit inline-flex items-center rounded transition focus-visible:outline-none
-      focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-700/15
-    `,
-    variants: {
-      size: {
-        sm: "gap-1",
-        md: "gap-1",
-        lg: "gap-1.5",
-      },
-      color: {
-        grayscale: "focus-within:ring-gray-700/15",
-        white: "focus-within:ring-white/15",
-      },
-      disabled: {
-        true: "!ring-0 !ring-offset-0 cursor-not-allowed",
-      },
-      defaultSlot: {
-        true: "flex items-center focus-within:ring-0 focus-within:ring-offset-0",
-      },
-      ring: {
-        false: "!ring-0 !ring-offset-0",
-      },
-      block: {
-        true: "w-full",
-      },
-    },
-  },
   link: {
     base: `
-      inline-block cursor-pointer !leading-none transition
+      inline-block cursor-pointer !leading-none rounded transition
       text-{color}-600 decoration-{color}-600 underline-offset-4
       hover:text-{color}-700 hover:decoration-{color}-700
       focus:text-{color}-700 focus:decoration-{color}-700 focus:outline-0
       active:text-{color}-800 active:decoration-{color}-800
+      focus:ring-dynamic focus:ring-offset-4 focus:ring-{color}-700/15
     `,
     variants: {
       size: {
@@ -57,10 +29,10 @@ export default /*tw*/ {
         grayscale: `
           text-gray-900 decoration-gray-900
           hover:text-gray-800 hover:decoration-gray-800
-          focus:text-gray-800 focus:decoration-gray-800
+          focus:text-gray-800 focus:decoration-gray-800 focus:ring-gray-700/15
           active:text-gray-700 active:decoration-gray-700
         `,
-        white: "decoration-white text-white",
+        white: "decoration-white text-white focus:ring-white/15",
       },
       defaultSlot: {
         true: "flex items-center no-underline hover:no-underline",
@@ -71,6 +43,9 @@ export default /*tw*/ {
       disabled: {
         true: "text-gray-400 pointer-events-none",
       },
+      ring: {
+        false: "!ring-0 !ring-offset-0",
+      },
       block: {
         true: "w-full",
       },
@@ -83,11 +58,9 @@ export default /*tw*/ {
     ariaCurrentValue: "page",
     activeClass: "",
     exactActiveClass: "",
-    wrapperActiveClass: "",
-    wrapperExactActiveClass: "",
     underlined: undefined,
     block: false,
-    ring: true,
+    ring: false,
     dashed: false,
     disabled: false,
     targetBlank: false,

package/ui.button-link/storybook/stories.ts

@@ -196,25 +196,3 @@ DefaultSlot.args = {
     </template>
   `,
 };
-
-export const LeftAndRightSlots: StoryFn<ULinkArgs> = (args: ULinkArgs) => ({
-  components: { ULink, UIcon, URow },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URow no-mobile>
-      <ULink label="Download">
-        <template #left>
-          <UIcon name="download" size="xs" color="green" />
-        </template>
-      </ULink>
-
-      <ULink label="Open">
-        <template #right>
-          <UIcon name="open_in_new" size="xs" color="green" />
-        </template>
-      </ULink>
-    </URow>
-  `,
-});

package/ui.button-link/types.ts

@@ -87,16 +87,6 @@ export interface Props {
    */
   exactActiveClass?: string;
 
-  /**
-   * Apply classes to the wrapper div when link route is active or when it matches any parent route.
-   */
-  wrapperActiveClass?: string;
-
-  /**
-   * Apply classes to the wrapper div when link route is active.
-   */
-  wrapperExactActiveClass?: string;
-
   /**
    * Show underline.
    */
@@ -130,5 +120,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.button-toggle/types.ts

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

package/ui.button-toggle-item/types.ts

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

package/ui.container-accordion/types.ts

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

package/ui.container-card/types.ts

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

package/ui.container-col/types.ts

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

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;
 }