vueless 0.0.616 → 0.0.617

package/ui.navigation-pagination/UPagination.vue

@@ -11,7 +11,7 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import defaultConfig from "./config.ts";
 import { COMPONENT_NAME } from "./constants.ts";
 
-import type { Props, ButtonSize, IconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -46,26 +46,6 @@ const currentPage = computed({
   },
 });
 
-const buttonSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as ButtonSize;
-});
-
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 const totalPages = computed(() => {
   return props.perPage > 0 && props.total ? Math.ceil(props.total / props.perPage) : 0;
 });
@@ -145,7 +125,6 @@ const {
     <UButton
       v-if="showFirst"
       no-ring
-      :size="buttonSize"
       variant="thirdary"
       :label="firstLabel"
       :square="!firstLabel"
@@ -159,7 +138,6 @@ const {
         <UIcon
           v-if="!firstLabel"
           internal
-          :size="iconSize"
           :name="config.defaults.firstIcon"
           v-bind="firstIconAttrs"
         />
@@ -168,7 +146,6 @@ const {
 
     <UButton
       no-ring
-      :size="buttonSize"
       variant="thirdary"
       :label="prevLabel"
       :square="!prevLabel"
@@ -179,13 +156,7 @@ const {
     >
       <!-- @slot Use it to add something instead of the "prev" label. -->
       <slot name="prev">
-        <UIcon
-          v-if="!prevLabel"
-          internal
-          :size="iconSize"
-          :name="config.defaults.prevIcon"
-          v-bind="prevIconAttrs"
-        />
+        <UIcon v-if="!prevLabel" internal :name="config.defaults.prevIcon" v-bind="prevIconAttrs" />
       </slot>
     </UButton>
 
@@ -195,7 +166,6 @@ const {
         square
         no-ring
         disabled
-        :size="buttonSize"
         variant="thirdary"
         v-bind="inactiveButtonAttrs"
       >
@@ -207,7 +177,6 @@ const {
         v-else-if="page.isActive"
         filled
         no-ring
-        :size="buttonSize"
         :variant="variant"
         :label="String(page.number)"
         :disabled="disabled"
@@ -218,7 +187,6 @@ const {
       <UButton
         v-else
         no-ring
-        :size="buttonSize"
         variant="thirdary"
         :label="String(page.number)"
         :disabled="disabled"
@@ -230,7 +198,6 @@ const {
 
     <UButton
       no-ring
-      :size="buttonSize"
       variant="thirdary"
       :label="nextLabel"
       :square="!nextLabel"
@@ -241,20 +208,13 @@ const {
     >
       <!-- @slot Use it to add something instead of the "next" label. -->
       <slot name="next">
-        <UIcon
-          v-if="!nextLabel"
-          internal
-          :size="iconSize"
-          :name="config.defaults.nextIcon"
-          v-bind="nextIconAttrs"
-        />
+        <UIcon v-if="!nextLabel" internal :name="config.defaults.nextIcon" v-bind="nextIconAttrs" />
       </slot>
     </UButton>
 
     <UButton
       v-if="showLast"
       no-ring
-      :size="buttonSize"
       variant="thirdary"
       :label="lastLabel"
       :square="!lastLabel"
@@ -265,13 +225,7 @@ const {
     >
       <!-- @slot Use it to add something instead of the "last" label. -->
       <slot name="last">
-        <UIcon
-          v-if="!lastLabel"
-          internal
-          :size="iconSize"
-          :name="config.defaults.lastIcon"
-          v-bind="lastIconAttrs"
-        />
+        <UIcon v-if="!lastLabel" internal :name="config.defaults.lastIcon" v-bind="lastIconAttrs" />
       </slot>
     </UButton>
   </div>

package/ui.navigation-pagination/config.ts

@@ -7,6 +7,13 @@ export default /*tw*/ {
         lg: "!text-base",
       },
     },
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
   },
   firstButton: "{UButton} {>paginationButton}",
   lastButton: "{UButton} {>paginationButton}",
@@ -14,10 +21,20 @@ export default /*tw*/ {
   nextButton: "{UButton} {>paginationButton}",
   inactiveButton: "{UButton} {>paginationButton}",
   activeButton: "{UButton} {>paginationButton}",
-  lastIcon: "{UIcon}",
-  firstIcon: "{UIcon}",
-  prevIcon: "{UIcon}",
-  nextIcon: "{UIcon}",
+  paginationIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
+  lastIcon: "{UIcon} {>paginationIcon}",
+  firstIcon: "{UIcon} {>paginationIcon}",
+  prevIcon: "{UIcon} {>paginationIcon}",
+  nextIcon: "{UIcon} {>paginationIcon}",
   defaults: {
     variant: "primary",
     size: "md",

package/ui.navigation-pagination/types.ts

@@ -3,9 +3,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type ButtonSize = "xs" | "sm" | "md";
-export type IconSize = "xs" | "sm" | "md";
-
 export interface Props {
   /**
    * Current page number.

package/ui.navigation-progress/UProgress.vue

@@ -10,7 +10,7 @@ import { COMPONENT_NAME, VARIANT } from "./constants.ts";
 import UStepperProgress from "./UStepperProgress.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 
-import type { UProgressProps, HeaderSize, Config } from "./types.ts";
+import type { UProgressProps, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -19,20 +19,6 @@ const props = withDefaults(defineProps<UProgressProps>(), {
   max: 100,
 });
 
-const headerSize = computed(() => {
-  const sizes = {
-    "2xs": "xs",
-    xs: "xs",
-    sm: "sm",
-    md: "sm",
-    lg: "lg",
-    xl: "xl",
-    "2xl": "2xl",
-  };
-
-  return sizes[props.size] as HeaderSize;
-});
-
 const isSteps = computed(() => Array.isArray(props.max));
 
 const realMax = computed(() => {
@@ -67,7 +53,7 @@ function isActiveStep(index: number | string) {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs } =
+const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs, headerAttrs } =
   useUI<Config>(defaultConfig);
 </script>
 
@@ -105,7 +91,7 @@ const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs } =
           :value="value"
           :max="max"
         >
-          <UHeader v-if="isVariant.stepper" :label="String(step)" :size="headerSize" />
+          <UHeader v-if="isVariant.stepper" :label="String(step)" v-bind="headerAttrs" />
           <template v-else>{{ step }}</template>
         </slot>
       </template>

package/ui.navigation-progress/config.ts

@@ -103,6 +103,20 @@ export default /*tw*/ {
       },
     },
   },
+  header: {
+    base: "{UHeader}",
+    defaults: {
+      size: {
+        "2xs": "xs",
+        xs: "xs",
+        sm: "sm",
+        md: "sm",
+        lg: "lg",
+        xl: "xl",
+        "2xl": "2xl",
+      },
+    },
+  },
   defaults: {
     max: 100,
     color: "brand",

package/ui.navigation-progress/types.ts

@@ -3,8 +3,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type HeaderSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-
 export interface UProgressProps {
   /**
    * Progress value (current step).

package/ui.text-alert/UAlert.vue

@@ -12,7 +12,7 @@ import UText from "../ui.text-block/UText.vue";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, TextSize, CloseIconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -40,33 +40,12 @@ function onClickClose() {
   emit("hidden");
 }
 
-const textSize = computed(() => {
-  const sizes = {
-    xs: "sm",
-    sm: "sm",
-    md: "md",
-    lg: "lg",
-  };
-
-  return sizes[props.size] as TextSize;
-});
-
-const closeIconSize = computed(() => {
-  const sizes = {
-    xs: "3xs",
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size] as CloseIconSize;
-});
-
 const closeButtonColor = computed(() => {
-  if (props.color === "grayscale") return "white";
-  if (props.color === "white") return "grayscale";
-
-  return props.color;
+  if (props.variant === "primary" || props.color === "white") {
+    return props.color === "white" ? "grayscale" : "white";
+  } else {
+    return props.color;
+  }
 });
 
 /**
@@ -118,7 +97,7 @@ const {
             <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
           </slot>
 
-          <UText v-bind="textAttrs" :size="textSize">
+          <UText v-bind="textAttrs">
             <!-- @slot Use it to add something inside. -->
             <slot />
           </UText>
@@ -141,13 +120,11 @@ const {
         <!--
           @slot Use it to add something instead of the close button.
           @binding {string} icon-name
-          @binding {string} icon-size
         -->
-        <slot name="close" :icon-name="config.defaults.closeIcon" :icon-size="closeIconSize">
+        <slot name="close" :icon-name="config.defaults.closeIcon">
           <UIcon
             internal
-            color="inherit"
-            :size="closeIconSize"
+            :color="closeButtonColor"
             :name="config.defaults.closeIcon"
             v-bind="closeIconAttrs"
             :data-test="`${dataTest}-button`"

package/ui.text-alert/config.ts

@@ -41,9 +41,29 @@ export default /*tw*/ {
     },
   },
   description: "",
-  text: "{UText}",
+  text: {
+    base: "{UText}",
+    defaults: {
+      size: {
+        xs: "sm",
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+      },
+    },
+  },
   closeButton: "{UButton}",
-  closeIcon: "{UIcon}",
+  closeIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        xs: "3xs",
+        sm: "2xs",
+        md: "xs",
+        lg: "sm",
+      },
+    },
+  },
   defaults: {
     variant: "primary",
     color: "brand",

package/ui.text-alert/types.ts

@@ -3,9 +3,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type TextSize = "sm" | "md" | "lg";
-export type CloseIconSize = "3xs" | "2xs" | "xs" | "sm";
-
 export interface Props {
   /**
    * Alert title.

package/ui.text-badge/UBadge.vue

@@ -10,7 +10,7 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, IconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -45,16 +45,6 @@ const slots = useSlots();
 
 const wrapperRef = useTemplateRef<HTMLElement>("wrapper");
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "3xs",
-    md: "2xs",
-    lg: "xs",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 function onFocus() {
   emit("focus");
 }
@@ -110,34 +100,18 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
       <!--
           @slot Use it to add icon before the text.
           @binding {string} icon-name
-          @binding {string} icon-size
         -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize">
-        <UIcon
-          v-if="leftIcon"
-          internal
-          :name="leftIcon"
-          :size="iconSize"
-          color="inherit"
-          v-bind="leftIconAttrs"
-        />
+      <slot name="left" :icon-name="leftIcon">
+        <UIcon v-if="leftIcon" internal :name="leftIcon" color="inherit" v-bind="leftIconAttrs" />
       </slot>
 
       <!--
         @slot Use it to add something instead of the label.
         @binding {string} label
         @binding {string} icon-name
-        @binding {string} icon-size
       -->
-      <slot name="default" :label="label" :icon-name="icon" :icon-size="iconSize">
-        <UIcon
-          v-if="icon"
-          internal
-          :name="icon"
-          :size="iconSize"
-          color="inherit"
-          v-bind="centerIconAttrs"
-        />
+      <slot name="default" :label="label" :icon-name="icon">
+        <UIcon v-if="icon" internal :name="icon" color="inherit" v-bind="centerIconAttrs" />
         <template v-else>
           {{ label }}
         </template>
@@ -146,13 +120,11 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
       <!--
           @slot Use it to add icon after the text.
           @binding {string} icon-name
-          @binding {string} icon-size
         -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize">
+      <slot name="right" :icon-name="rightIcon">
         <UIcon
           v-if="rightIcon"
           :name="rightIcon"
-          :size="iconSize"
           color="inherit"
           internal
           v-bind="rightIconAttrs"

package/ui.text-badge/config.ts

@@ -52,9 +52,19 @@ export default /*tw*/ {
       },
     },
   },
-  leftIcon: "{UIcon}",
-  centerIcon: "{UIcon}",
-  rightIcon: "{UIcon}",
+  badgeIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "3xs",
+        md: "2xs",
+        lg: "xs",
+      },
+    },
+  },
+  centerIcon: "{UIcon} {>badgeIcon}",
+  leftIcon: "{UIcon} {>badgeIcon}",
+  rightIcon: "{UIcon} {>badgeIcon}",
   defaults: {
     color: "brand",
     variant: "primary",

package/ui.text-badge/types.ts

@@ -3,8 +3,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "3xs" | "2xs" | "xs";
-
 export interface Props {
   /**
    *  Badge label.

package/ui.text-empty/UEmpty.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from "vue";
-
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 
@@ -10,34 +8,14 @@ import UHeader from "../ui.text-header/UHeader.vue";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, IconSize, TitleSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "2xl",
-    md: "3xl",
-    lg: "4xl",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
-const titleSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as TitleSize;
-});
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -60,20 +38,14 @@ const {
       <!-- @slot Use it to add something to the header. -->
       <slot name="header">
         <div v-bind="emptyIconWrapperAttrs">
-          <UIcon
-            internal
-            :name="config.defaults.emptyIcon"
-            color="gray"
-            :size="iconSize"
-            v-bind="emptyIconAttrs"
-          />
+          <UIcon internal :name="config.defaults.emptyIcon" color="gray" v-bind="emptyIconAttrs" />
         </div>
       </slot>
     </div>
 
     <!-- @slot Use it to add something inside. -->
     <slot>
-      <UHeader v-if="title" :label="title" :size="titleSize" v-bind="titleAttrs" />
+      <UHeader v-if="title" :label="title" v-bind="titleAttrs" />
       <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
     </slot>
 

package/ui.text-empty/config.ts

@@ -20,8 +20,26 @@ export default /*tw*/ {
       },
     },
   },
-  emptyIcon: "{UIcon}",
-  title: "{UHeader}",
+  emptyIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "2xl",
+        md: "3xl",
+        lg: "4xl",
+      },
+    },
+  },
+  title: {
+    base: "{UHeader}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
   description: {
     base: "text-center",
     variants: {

package/ui.text-empty/types.ts

@@ -3,9 +3,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "2xl" | "3xl" | "4xl";
-export type TitleSize = "xs" | "sm" | "md";
-
 export interface Props {
   /**
    * Empty state title.

package/ui.text-file/UFile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useId } from "vue";
+import { ref, useId } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -10,7 +10,7 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, IconSize, RemoveIconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -31,26 +31,6 @@ const focus = ref(false);
 
 const elementId = props.id || useId();
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
-const removeIconSize = computed(() => {
-  const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size] as RemoveIconSize;
-});
-
 function onRemove() {
   emit("remove", props.id);
 }
@@ -91,7 +71,6 @@ const {
           internal
           interactive
           color="gray"
-          :size="iconSize"
           :name="config.defaults.fileIcon"
           v-bind="fileIconAttrs"
           @focus="onFocus"
@@ -108,7 +87,6 @@ const {
         internal
         interactive
         color="gray"
-        :size="removeIconSize"
         :name="config.defaults.removeIcon"
         v-bind="removeIconAttrs"
         :data-test="`${dataTest}-remove-item`"