vueless 0.0.703 → 0.0.704

package/ui.form-switch/config.ts

@@ -2,32 +2,35 @@ export default /*tw*/ {
   switchLabel: "{ULabel}",
   wrapper: {
     base: `
-      flex items-center p-0.5 relative rounded-3xl cursor-pointer transition
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic
+      flex items-center p-0.5 relative rounded-full cursor-pointer transition
+      focus-visible:ring-dynamic focus-visible:ring-offset-dynamic ring-{color}-600 outline-0
     `,
     variants: {
-      checked: {
-        true: "bg-{color}-600 ring-{color}-700/15 hover:bg-{color}-700 active:bg-{color}-800",
-        false: "bg-gray-300 ring-gray-700/15 hover:bg-gray-400 active:bg-gray-500",
-      },
       size: {
         sm: "w-6",
         md: "w-8",
         lg: "w-10",
       },
+      color: {
+        grayscale: "ring-gray-900",
+      },
+      checked: {
+        true: "bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800",
+        false: "bg-gray-300 hover:bg-gray-400 active:bg-gray-600",
+      },
     },
     compoundVariants: [
       { toggleLabel: true, size: "sm", class: "w-10" },
       { toggleLabel: true, size: "md", class: "w-12" },
       { toggleLabel: true, size: "lg", class: "w-14" },
+      { color: "grayscale", checked: true, class: "bg-gray-900 hover:bg-gray-800 active:bg-gray-700" },
       { disabled: true, checked: false, class: "bg-gray-300" },
       { disabled: true, checked: true, class: "bg-gray-400" },
-      { color: "grayscale", disabled: false, checked: true, class: "bg-gray-900 ring-gray-700/15" },
     ],
   },
   input: "absolute size-0 opacity-0",
   circle: {
-    base: "transition-all duration-300 rounded-full bg-white flex items-center justify-center",
+    base: "rounded-full bg-white flex items-center justify-center transition-all",
     variants: {
       size: {
         sm: "size-3",

package/ui.form-switch/types.ts

@@ -53,7 +53,6 @@ export interface Props {
     | "pink"
     | "rose"
     | "gray"
-    | "white"
     | "brand";
 
   /**

package/ui.form-textarea/config.ts

@@ -1,27 +1,21 @@
 export default /*tw*/ {
   textareaLabel: "{ULabel}",
-  leftSlot: "flex items-center justify-center whitespace-nowrap pl-3 gap-1 rounded-dynamic rounded-r-none",
-  rightSlot: "flex items-center justify-center whitespace-nowrap pr-3 gap-1 rounded-dynamic rounded-l-none",
+  slot: "flex items-center justify-center whitespace-nowrap gap-1 rounded-dynamic",
+  leftSlot: "{>slot} pl-3 rounded-r-none",
+  rightSlot: "{>slot} pr-3 rounded-l-none",
   wrapper: {
     base: `
       flex bg-white transition w-full
-      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-500
-      focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic
-      focus-within:ring-brand-700/15 focus-within:outline-none
+      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-600
+      focus-within:border-brand-600 focus-within:ring-dynamic focus-within:ring-offset-0
+      focus-within:ring-brand-600 focus-within:outline-none
     `,
     variants: {
       error: {
-        true: `
-          bg-red-50 border-red-300
-          hover:border-red-400 hover:focus-within:border-red-500
-          focus-within:border-red-500 focus-within:ring-red-700/15
-        `,
+        true: "!border-red-600 focus-within:ring-red-600",
       },
       disabled: {
-        true: `
-            focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100
-            hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
-          `,
+        true: "!border-gray-300 focus-within:ring-0 bg-gray-100",
       },
     },
   },

package/ui.navigation-breadcrumbs/UBreadcrumbs.vue

@@ -76,7 +76,6 @@ const { config, breadcrumbsAttrs, breadcrumbLinkAttrs, breadcrumbIconAttrs, divi
         :underlined="underlined"
         :dashed="dashed"
         :disabled="link.disabled || (!link.to && !link.href)"
-        :ring="false"
         v-bind="breadcrumbLinkAttrs"
         :data-test="dataTest"
         @click="onClickLink(link)"

package/ui.navigation-breadcrumbs/types.ts

@@ -56,7 +56,7 @@ export interface Props {
   underlined?: boolean;
 
   /**
-   * Set breadcrumbs' underline style as dashed.
+   * Set links underline style as dashed.
    */
   dashed?: boolean;
 

package/ui.navigation-pagination/UPagination.vue

@@ -124,7 +124,6 @@ const {
   <div v-bind="paginationAttrs">
     <UButton
       v-if="showFirst"
-      :ring="false"
       variant="thirdary"
       :label="firstLabel"
       :square="!firstLabel"
@@ -138,6 +137,7 @@ const {
         <UIcon
           v-if="!firstLabel"
           internal
+          color="brand"
           :name="config.defaults.firstIcon"
           v-bind="firstIconAttrs"
         />
@@ -145,7 +145,6 @@ const {
     </UButton>
 
     <UButton
-      :ring="false"
       variant="thirdary"
       :label="prevLabel"
       :square="!prevLabel"
@@ -156,7 +155,13 @@ const {
     >
       <!-- @slot Use it to add something instead of the "prev" label. -->
       <slot name="prev">
-        <UIcon v-if="!prevLabel" internal :name="config.defaults.prevIcon" v-bind="prevIconAttrs" />
+        <UIcon
+          v-if="!prevLabel"
+          internal
+          color="brand"
+          :name="config.defaults.prevIcon"
+          v-bind="prevIconAttrs"
+        />
       </slot>
     </UButton>
 
@@ -165,7 +170,6 @@ const {
         v-if="!isFinite(page.number)"
         square
         disabled
-        :ring="false"
         variant="thirdary"
         v-bind="inactiveButtonAttrs"
       >
@@ -176,7 +180,6 @@ const {
       <UButton
         v-else-if="page.isActive"
         filled
-        :ring="false"
         :variant="variant"
         :label="String(page.number)"
         :disabled="disabled"
@@ -186,7 +189,6 @@ const {
 
       <UButton
         v-else
-        :ring="false"
         variant="thirdary"
         :label="String(page.number)"
         :disabled="disabled"
@@ -197,7 +199,6 @@ const {
     </template>
 
     <UButton
-      :ring="false"
       variant="thirdary"
       :label="nextLabel"
       :square="!nextLabel"
@@ -208,13 +209,18 @@ const {
     >
       <!-- @slot Use it to add something instead of the "next" label. -->
       <slot name="next">
-        <UIcon v-if="!nextLabel" internal :name="config.defaults.nextIcon" v-bind="nextIconAttrs" />
+        <UIcon
+          v-if="!nextLabel"
+          internal
+          color="brand"
+          :name="config.defaults.nextIcon"
+          v-bind="nextIconAttrs"
+        />
       </slot>
     </UButton>
 
     <UButton
       v-if="showLast"
-      :ring="false"
       variant="thirdary"
       :label="lastLabel"
       :square="!lastLabel"
@@ -225,7 +231,13 @@ const {
     >
       <!-- @slot Use it to add something instead of the "last" label. -->
       <slot name="last">
-        <UIcon v-if="!lastLabel" internal :name="config.defaults.lastIcon" v-bind="lastIconAttrs" />
+        <UIcon
+          v-if="!lastLabel"
+          internal
+          color="brand"
+          :name="config.defaults.lastIcon"
+          v-bind="lastIconAttrs"
+        />
       </slot>
     </UButton>
   </div>

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>