vueless 0.0.702 → 0.0.704

package/ui.navigation-pagination/config.ts

@@ -1,26 +1,24 @@
 export default /*tw*/ {
   pagination: "flex",
   paginationButton: {
-    base: "font-normal",
+    base: "{UButton} font-normal",
     variants: {
       size: {
-        lg: "!text-base",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
     },
     defaults: {
-      size: {
-        sm: "xs",
-        md: "sm",
-        lg: "md",
-      },
+      size: "xs",
     },
   },
-  firstButton: "{UButton} {>paginationButton}",
-  lastButton: "{UButton} {>paginationButton}",
-  prevButton: "{UButton} {>paginationButton}",
-  nextButton: "{UButton} {>paginationButton}",
-  inactiveButton: "{UButton} {>paginationButton}",
-  activeButton: "{UButton} {>paginationButton}",
+  firstButton: "{>paginationButton}",
+  lastButton: "{>paginationButton}",
+  prevButton: "{>paginationButton}",
+  nextButton: "{>paginationButton}",
+  inactiveButton: "{>paginationButton}",
+  activeButton: "{>paginationButton}",
   paginationIcon: {
     base: "{UIcon}",
     defaults: {
@@ -31,10 +29,10 @@ export default /*tw*/ {
       },
     },
   },
-  lastIcon: "{UIcon} {>paginationIcon}",
-  firstIcon: "{UIcon} {>paginationIcon}",
-  prevIcon: "{UIcon} {>paginationIcon}",
-  nextIcon: "{UIcon} {>paginationIcon}",
+  lastIcon: "{>paginationIcon}",
+  firstIcon: "{>paginationIcon}",
+  prevIcon: "{>paginationIcon}",
+  nextIcon: "{>paginationIcon}",
   defaults: {
     variant: "primary",
     size: "md",

package/ui.navigation-tab/UTab.vue

@@ -3,30 +3,30 @@ import { computed, inject, toValue } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
+import UButton from "../ui.button/UButton.vue";
 
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, UTabSize, Config } from "./types.ts";
-import type { SetUTabsSelectedItem } from "../ui.navigation-tabs/types.ts";
+import type { Props, Config } from "./types.ts";
+import type { Props as UTabsProps, SetUTabsSelectedItem } from "../ui.navigation-tabs/types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const setUTabsSelectedItem = inject<SetUTabsSelectedItem | null>("setUTabsSelectedItem", null);
-const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);
-const getUTabsSize = inject("getUTabsSize", null);
+const setUTabsSelectedItem = inject<SetUTabsSelectedItem>("setUTabsSelectedItem");
+const getUTabsSelectedItem = inject("getUTabsSelectedItem");
+const getUTabsSquare = inject<UTabsProps["square"]>("getUTabsSquare");
+const getUTabsBlock = inject<UTabsProps["block"]>("getUTabsBlock");
+const getUTabsSize = inject<UTabsProps["size"]>("getUTabsSize", "md");
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
-const selected = computed(() => {
-  return toValue(getUTabsSelectedItem) === props.value && !props.disabled;
-});
-
-const size = computed(() => {
-  return toValue(getUTabsSize) || getDefaults<UTabSize, Config>(defaultConfig, COMPONENT_NAME).size;
-});
+const size = computed(() => toValue(getUTabsSize));
+const block = computed(() => toValue(getUTabsBlock));
+const square = computed(() => toValue(getUTabsSquare));
+const isActive = computed(() => toValue(getUTabsSelectedItem) === props.value && !props.disabled);
 
 async function onClickSetValue() {
   if (!props.disabled && setUTabsSelectedItem) {
@@ -40,18 +40,56 @@ async function onClickSetValue() {
  */
 const mutatedProps = computed(() => ({
   size: size.value,
+  block: block.value,
+  square: square.value,
   /* component state, not a props */
-  selected: selected.value,
+  active: isActive.value,
 }));
 
-const { tabAttrs } = useUI<Config>(defaultConfig, mutatedProps);
+const { tabButtonAttrs, tabButtonActiveAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
-  <div v-bind="tabAttrs" :data-test="dataTest" @click="onClickSetValue">
-    <!-- @slot Use it to add something instead of the label. -->
-    <slot>
-      {{ label }}
-    </slot>
-  </div>
+  <UButton
+    variant="thirdary"
+    :size="size"
+    :label="label"
+    :icon="icon"
+    :left-icon="leftIcon"
+    :right-icon="rightIcon"
+    :block="block"
+    :square="square"
+    :disabled="disabled"
+    v-bind="isActive ? tabButtonActiveAttrs : tabButtonAttrs"
+    :data-test="dataTest"
+    @click="onClickSetValue"
+  >
+    <template #left="{ iconName }">
+      <!--
+        @slot Use it to add something before the label.
+        @binding {boolean} active
+        @binding {string} icon-name
+      -->
+      <slot name="left" :active="isActive" :icon-name="iconName" />
+    </template>
+
+    <template #default="{ iconName, label }">
+      <!--
+        @slot Use it to add something instead of the label.
+        @binding {string} label
+        @binding {boolean} active
+        @binding {string} icon-name
+      -->
+      <slot :label="label" :active="isActive" :icon-name="iconName" />
+    </template>
+
+    <template #right="{ iconName }">
+      <!--
+        @slot Use it to add something after the label.
+        @binding {boolean} active
+        @binding {string} icon-name
+      -->
+      <slot name="right" :active="isActive" :icon-name="iconName" />
+    </template>
+  </UButton>
 </template>

package/ui.navigation-tab/config.ts

@@ -1,18 +1,18 @@
 export default /*tw*/ {
-  tab: {
-    base: "w-max text-center cursor-pointer -mb-px",
-    variants: {
-      size: {
-        sm: "text-xs pb-1",
-        md: "text-sm pb-2",
-        lg: "text-base pb-3",
-      },
-      disabled: {
-        true: "text-gray-400 cursor-not-allowed",
-      },
-      selected: {
-        true: "border-b-2 text-brand-700 border-brand-700",
-      },
+  tabButton: {
+    base: `
+      {UButton} -mb-px rounded-none border-transparent
+      hover:bg-transparent dark:hover:bg-transparent
+      active:bg-transparent dark:active:bg-transparent
+    `,
+    defaults: {
+      color: "gray",
+    },
+  },
+  tabButtonActive: {
+    base: "{>tabButton} border-b-brand-600",
+    defaults: {
+      color: "brand",
     },
   },
   defaults: {

package/ui.navigation-tab/storybook/stories.ts

@@ -57,7 +57,7 @@ SlotDefault.args = {
   slotTemplate: `
     <template #default>
       <div class="flex items-center">
-        <UIcon name="star" size="sm" />
+        <UIcon name="star" size="sm" color="inherit" />
       </div>
     </template>
   `,

package/ui.navigation-tab/types.ts

@@ -3,10 +3,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export interface UTabSize {
-  size: string;
-}
-
 export interface Props {
   /**
    * Tab label.
@@ -18,6 +14,21 @@ export interface Props {
    */
   value?: string | number;
 
+  /**
+   * Icon name (appears instead of label).
+   */
+  icon?: string;
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
   /**
    * Make tab disabled.
    */

package/ui.navigation-tabs/UTabs.vue

@@ -32,15 +32,17 @@ const selectedItem = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-provide("setUTabsSelectedItem", (value: string) => (selectedItem.value = value));
-provide("getUTabsSelectedItem", () => selectedItem.value);
 provide("getUTabsSize", () => props.size);
+provide("getUTabsBlock", () => props.block);
+provide("getUTabsSquare", () => props.square);
+provide("getUTabsSelectedItem", () => selectedItem.value);
+provide("setUTabsSelectedItem", (value: string) => (selectedItem.value = value));
 
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { tabsAttrs, itemAttrs } = useUI<Config>(defaultConfig);
+const { tabsAttrs, tabAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -54,7 +56,7 @@ const { tabsAttrs, itemAttrs } = useUI<Config>(defaultConfig);
         :value="item.value"
         :disabled="item.disabled"
         :size="size"
-        v-bind="itemAttrs"
+        v-bind="tabAttrs"
         :data-test="`${dataTest}-item-${index}`"
       />
     </slot>

package/ui.navigation-tabs/config.ts

@@ -1,20 +1,9 @@
 export default /*tw*/ {
-  tabs: {
-    base: "mb-6 flex",
-    variants: {
-      size: {
-        sm: "gap-5",
-        md: "gap-6",
-        lg: "gap-7",
-      },
-      underlined: {
-        true: "border-b border-gray-100",
-      },
-    },
-  },
-  item: "{UTab}",
+  tabs: "mb-6 flex border-b border-gray-200 dark:border-gray-700",
+  tab: "{UTab}",
   defaults: {
     size: "md",
-    underlined: false,
+    block: false,
+    square: false,
   },
 };

package/ui.navigation-tabs/storybook/stories.ts

@@ -78,9 +78,6 @@ Default.args = {};
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const BottomLine = DefaultTemplate.bind({});
-BottomLine.args = { underlined: true };
-
 export const DisabledTab = DefaultTemplate.bind({});
 DisabledTab.args = {
   options: [

package/ui.navigation-tabs/types.ts

@@ -28,12 +28,17 @@ export interface Props {
   /**
    * Tabs size.
    */
-  size?: "sm" | "md" | "lg";
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
-   * Add the bottom line along the entire length.
+   * Make the Tabs fill the width with its container.
    */
-  underlined?: boolean;
+  block?: boolean;
+
+  /**
+   * Set the same paddings for the tabs.
+   */
+  square?: boolean;
 
   /**
    * Component config object.

package/ui.text-alert/UAlert.vue

@@ -111,7 +111,6 @@ const {
         v-if="closable"
         square
         size="xs"
-        :ring="false"
         :color="closeButtonColor"
         variant="thirdary"
         v-bind="closeButtonAttrs"

package/ui.text-badge/config.ts

@@ -16,14 +16,11 @@ export default /*tw*/ {
         true: "rounded-full",
       },
       tabindex: {
-        true: `
-          cursor-pointer focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-{color}-700/15
-          focus:ring-dynamic focus:ring-offset-dynamic focus:ring-{color}-700/15
-        `,
+        true: "cursor-pointer focus-visible:ring-dynamic focus-visible:ring-offset-dynamic focus-visible:ring-{color}-600",
       },
       color: {
-        grayscale: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
-        white: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
+        grayscale: "focus-visible:ring-gray-900",
+        white: " focus-visible:ring-gray-900",
       },
     },
     compoundVariants: [

package/ui.text-file/UFile.vue

@@ -59,7 +59,7 @@ const {
 </script>
 
 <template>
-  <ULink :href="url" :ring="false" v-bind="fileAttrs" :data-test="dataTest">
+  <ULink :href="url" v-bind="fileAttrs" :data-test="dataTest">
     <slot name="left" :file="{ elementId, label, url, imageUrl }" />
 
     <slot :file="{ elementId, label, url, imageUrl }">
@@ -77,14 +77,7 @@ const {
           @blur="onBlur"
         />
 
-        <ULink
-          :label="label"
-          :ring="false"
-          :size="size"
-          color="gray"
-          dashed
-          v-bind="fileLabelAttrs"
-        />
+        <ULink :label="label" :size="size" color="gray" dashed v-bind="fileLabelAttrs" />
       </div>
     </slot>