vueless 0.0.678 → 0.0.680

package/package.json

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

package/ui.button-link/ULink.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
-import { RouterLink, useLink } from "vue-router";
+import { RouterLink } from "vue-router";
 
 import useUI from "../composables/useUI.ts";
 import { hasSlotContent } from "../utils/helper.ts";
@@ -53,31 +53,7 @@ const isPresentRoute = computed(() => {
 });
 
 const safeTo = computed(() => {
-  if (!props.to) {
-    return "/";
-  }
-
-  return props.to;
-});
-
-const useLinkOptions = {
-  activeClass: props.activeClass,
-  ariaCurrentValue: props.ariaCurrentValue,
-  exactActiveClass: props.exactActiveClass,
-  custom: props.custom,
-  replace: props.replace,
-  to: safeTo.value,
-};
-
-const { route, isActive, isExactActive } = useLink(useLinkOptions);
-
-const linkActiveClasses = computed(() => [
-  isActive.value && props.activeClass,
-  isExactActive.value && props.exactActiveClass,
-]);
-
-const targetValue = computed(() => {
-  return props.targetBlank ? "_blank" : "_self";
+  return props.to || "/";
 });
 
 const prefixedHref = computed(() => {
@@ -125,10 +101,15 @@ const { getDataTest, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 <template>
   <router-link
     v-if="isPresentRoute"
-    :to="route"
-    :target="targetValue"
+    :to="safeTo"
+    :custom="custom"
+    :replace="replace"
+    :target="target"
+    :active-class="activeClass"
+    :exact-active-class="exactActiveClass"
+    :aria-current-value="ariaCurrentValue"
+    :view-transition="viewTransition"
     v-bind="linkAttrs"
-    :class="linkActiveClasses"
     :data-test="getDataTest()"
     tabindex="0"
     @blur="onBlur"
@@ -143,10 +124,10 @@ const { getDataTest, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 
   <a
     v-else
+    :rel="rel"
     :href="prefixedHref"
-    :target="targetValue"
+    :target="target"
     v-bind="linkAttrs"
-    :class="linkActiveClasses"
     :data-test="getDataTest()"
     tabindex="0"
     @blur="onBlur"

package/ui.button-link/config.ts

@@ -55,16 +55,18 @@ export default /*tw*/ {
     color: "brand",
     type: "link",
     size: "md",
-    ariaCurrentValue: "page",
+    target: "_self",
     activeClass: "",
     exactActiveClass: "",
+    ariaCurrentValue: "page",
+    rel: "noopener noreferrer",
     underlined: undefined,
-    block: false,
     ring: false,
+    block: false,
     dashed: false,
-    disabled: false,
-    targetBlank: false,
     custom: false,
     replace: false,
+    disabled: false,
+    viewTransition: false,
   },
 };

package/ui.button-link/types.ts

@@ -12,14 +12,14 @@ export interface Props {
   label?: string;
 
   /**
-   * Link href url.
+   * Vue-router route object.
    */
-  href?: string;
+  to?: RouteLocationRaw;
 
   /**
-   * Vue-router route object.
+   * Link href url.
    */
-  to?: RouteLocationRaw;
+  href?: string;
 
   /**
    * Link size.
@@ -58,34 +58,29 @@ export interface Props {
   type?: "phone" | "email" | "link";
 
   /**
-   * Open link in the new tab.
-   */
-  targetBlank?: boolean;
-
-  /**
-   * Pass value to the attribute aria-current when the link is exact active.
+   * Apply classes to the link when its route is active or when it matches any parent route.
    */
-  ariaCurrentValue?: string;
+  activeClass?: string;
 
   /**
-   * Whether RouterLink should not wrap its content in a tag.
+   * Apply classes to the link when its route is active.
    */
-  custom?: boolean;
+  exactActiveClass?: string;
 
   /**
-   * Whether RouterLink should not wrap its content in a tag.
+   * Pass value to the attribute aria-current when the link is exact active.
    */
-  replace?: boolean;
+  ariaCurrentValue?: "time" | "location" | "page" | "step" | "date" | "true" | "false";
 
   /**
-   * Apply classes to the link when its route is active or when it matches any parent route.
+   * Specifies where to open the linked page.
    */
-  activeClass?: string;
+  target?: "_blank" | "_self" | "_parent" | "_top" | string;
 
   /**
-   * Apply classes to the link when its route is active.
+   * A rel attribute value to apply on the external link.
    */
-  exactActiveClass?: string;
+  rel?: string;
 
   /**
    * Show underline.
@@ -112,6 +107,21 @@ export interface Props {
    */
   ring?: boolean;
 
+  /**
+   * Whether RouterLink should not wrap its content in a tag.
+   */
+  custom?: boolean;
+
+  /**
+   * Calls `router.replace` instead of `router.push`.
+   */
+  replace?: boolean;
+
+  /**
+   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
+   */
+  viewTransition?: boolean;
+
   /**
    * Component config object.
    */

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

@@ -36,7 +36,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UToggle.__name),
-    modelValue: { control: { type: "text" } },
   },
   parameters: {
     docs: {

package/ui.data-table/UTable.vue

@@ -141,7 +141,9 @@ const sortedRows: ComputedRef<Row[]> = computed(() => {
 
 const isFooterSticky = computed(() => {
   return (
-    window.innerHeight < tableHeight.value && props.stickyFooter && !isShownFooterPosition.value
+    Number(window?.innerHeight) < tableHeight.value &&
+    props.stickyFooter &&
+    !isShownFooterPosition.value
   );
 });
 
@@ -165,15 +167,15 @@ const isShownActionsHeader = computed(
 
 const isHeaderSticky = computed(() => {
   const positionForFixHeader =
-    Number(headerRowRef.value?.getBoundingClientRect()?.top) + window.scrollY || 0;
+    Number(headerRowRef.value?.getBoundingClientRect()?.top) + Number(window?.scrollY) || 0;
 
   return positionForFixHeader <= pagePositionY.value && props.stickyHeader;
 });
 
 const isShownFooterPosition = computed(() => {
-  const pageBottom = pagePositionY.value + window.innerHeight;
+  const pageBottom = pagePositionY.value + Number(window?.innerHeight);
   const positionForFixFooter =
-    Number(footerRowRef.value?.getBoundingClientRect()?.bottom) + window.scrollY;
+    Number(footerRowRef.value?.getBoundingClientRect()?.bottom) + Number(window?.scrollY);
 
   return pageBottom >= positionForFixFooter;
 });
@@ -310,7 +312,7 @@ function setHeaderCellWidth() {
 }
 
 function onScroll() {
-  pagePositionY.value = window.scrollY;
+  pagePositionY.value = Number(window?.scrollY);
 }
 
 function synchronizeTableItemsWithProps() {

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -78,6 +78,7 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
       :size="size"
       :color="color"
       :variant="variant"
+      :round="round"
       v-bind="dropdownBadgeAttrs"
       tabindex="0"
       :data-test="dataTest"
@@ -102,17 +103,15 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
         <slot :label="label" :opened="isShownOptions" />
       </template>
 
-      <template #right="{ iconSize }">
+      <template #right>
         <!--
           @slot Use it to add something after the label.
           @binding {boolean} opened
         -->
-        <slot name="right" :opened="isShownOptions">
+        <slot v-if="!noIcon" name="right" :opened="isShownOptions">
           <UIcon
-            v-if="!noIcon"
             internal
             color="inherit"
-            :size="iconSize"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"

package/ui.dropdown-badge/config.ts

@@ -9,7 +9,16 @@ export default /*tw*/ {
     },
     compoundVariants: [{ opened: true, color: ["grayscale", "white"], class: "ring-gray-700/15" }],
   },
-  dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
+  dropdownIcon: {
+    base: "{UIcon} transition duration-300 group-[]:rotate-180",
+    defaults: {
+      size: {
+        sm: "2xs",
+        md: "xs",
+        lg: "xs",
+      },
+    },
+  },
   dropdownList: {
     base: "{UDropdownList} w-fit",
     variants: {

package/ui.dropdown-button/UDropdownButton.vue

@@ -110,9 +110,8 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
           @slot Use it to add something after the label.
           @binding {boolean} opened
         -->
-        <slot name="toggle" :opened="isShownOptions">
+        <slot v-if="!noIcon" name="toggle" :opened="isShownOptions">
           <UIcon
-            v-if="!noIcon"
             internal
             color="inherit"
             :name="config.defaults.dropdownIcon"

package/ui.dropdown-button/config.ts

@@ -13,12 +13,12 @@ export default /*tw*/ {
     base: "{UIcon} transition duration-300 group-[]:rotate-180",
     defaults: {
       size: {
-        "2xs": "sm",
-        xs: "sm",
+        "2xs": "2xs",
+        xs: "xs",
         sm: "sm",
-        md: "md",
-        lg: "lg",
-        xl: "lg",
+        md: "sm",
+        lg: "sm",
+        xl: "sm",
       },
     },
   },

package/ui.form-checkbox/storybook/stories.ts

@@ -27,7 +27,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UCheckbox.__name),
-    modelValue: { control: { type: "boolean" } },
   },
   parameters: {
     docs: {

package/ui.form-color-picker/UColorPicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useId } from "vue";
+import { ref, computed, useId } from "vue";
 
 import { vTooltip } from "../directives";
 import useUI from "../composables/useUI.ts";
@@ -31,13 +31,16 @@ const emit = defineEmits([
 
 const elementId = props.id || useId();
 
+const localValue = ref("");
+
 const selectedItem = computed({
-  get: () => props.modelValue,
+  get: () => props.modelValue || localValue.value,
   set: (value) => emit("update:modelValue", value),
 });
 
 function onClickColor(color: string) {
   selectedItem.value = color;
+  localValue.value = color;
 }
 
 /**

package/ui.form-input/config.ts

@@ -2,11 +2,14 @@ export default /*tw*/ {
   inputLabel: "{ULabel}",
   wrapper: {
     base: `
-      w-full bg-white relative flex border border-gray-300 rounded-dynamic transition
+      w-full bg-white relative flex border border-gray-300 rounded-dynamic-sm transition
       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
     `,
     variants: {
+      labelAlign: {
+        topInside: "rounded-dynamic",
+      },
       error: {
         true: `
           border-red-300 bg-red-50
@@ -53,9 +56,9 @@ export default /*tw*/ {
       },
       error: {
         true: `
-        bg-red-50 placeholder:text-red-300 hover:border-red-400 focus:border-red-500 focus:ring-red-700/15
-        focus-within:border-red-500 focus-within:ring-red-700/15
-      `,
+          bg-red-50 placeholder:text-red-300 hover:border-red-400 focus:border-red-500 focus:ring-red-700/15
+          focus-within:border-red-500 focus-within:ring-red-700/15
+        `,
       },
       typePassword: {
         true: "tracking-widest !leading-[1.18] [font-family:text-security-disc,serif] [-webkit-text-security:disc]",

package/ui.form-input/storybook/stories.ts

@@ -27,7 +27,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UInput.__name),
-    modelValue: { control: { type: "text" } },
   },
   parameters: {
     docs: {

package/ui.form-input-money/storybook/stories.ts

@@ -27,7 +27,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UInputMoney.__name),
-    modelValue: { control: { type: "number" } },
   },
   parameters: {
     docs: {

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

@@ -17,7 +17,7 @@ export interface Props {
   /**
    * Input value.
    */
-  modelValue?: string | number;
+  modelValue?: number | string;
   /**
    * Input label.
    */

package/ui.form-input-number/storybook/stories.ts

@@ -25,7 +25,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UInputNumber.__name),
-    modelValue: { control: { type: "number" } },
   },
   parameters: {
     docs: {

package/ui.form-label/config.ts

@@ -3,9 +3,9 @@ export default /*tw*/ {
     base: "flex w-full",
     variants: {
       align: {
-        top: "flex-col gap-2",
         topInside: "flex-col gap-0 relative",
-        topWithDesc: "flex-col-reverse w-fit",
+        topWithDesc: "flex-col-reverse gap-2",
+        top: "flex-col gap-2",
         right: "flex-row w-fit",
         left: "flex-row-reverse w-fit",
       },
@@ -68,7 +68,7 @@ export default /*tw*/ {
         lg: "text-sm",
       },
       align: {
-        top: "pl-3",
+        top: "",
         topInside: "pl-3 mt-1.5",
         topWithDesc: "pt-0.5",
         left: "pt-0.5",

package/ui.form-select/storybook/stories.ts

@@ -41,7 +41,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(USelect.__name),
-    modelValue: { control: { type: "number" } },
   },
   parameters: {
     docs: {

package/ui.form-select/types.ts

@@ -9,7 +9,7 @@ export interface Props {
   /**
    * Select value.
    */
-  modelValue?: string | number | (string | number)[];
+  modelValue?: number | string | (number | string)[];
 
   /**
    * Select options.

package/ui.form-textarea/storybook/stories.ts

@@ -26,7 +26,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UTextarea.__name),
-    modelValue: { control: { type: "text" } },
   },
   parameters: {
     docs: {

package/ui.other-theme-color-toggle/UThemeColorToggle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useId } from "vue";
+import { ref, computed, useId } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -42,8 +42,11 @@ const emit = defineEmits([
 
 const elementId = props.id || useId();
 
+const localBrand = ref("");
+const localGray = ref("");
+
 const selectedBrandColor = computed({
-  get: () => props.brand || getSelectedBrandColor(),
+  get: () => props.brand || localBrand.value || getSelectedBrandColor(),
   set: (brand: string) => {
     const prevBrand = getSelectedBrandColor();
     const isBrandGrayscale = brand === GRAYSCALE_COLOR;
@@ -55,14 +58,16 @@ const selectedBrandColor = computed({
 
     setTheme({ brand });
     emit("update:brand", brand);
+    localBrand.value = brand;
   },
 });
 
 const selectedGrayColor = computed({
-  get: () => props.gray || getSelectedGrayColor(),
-  set: (value: string) => {
-    setTheme({ gray: value });
-    emit("update:gray", value);
+  get: () => props.gray || localGray.value || getSelectedGrayColor(),
+  set: (gray: string) => {
+    setTheme({ gray });
+    emit("update:gray", gray);
+    localGray.value = gray;
   },
 });
 

package/ui.other-theme-color-toggle/types.ts

@@ -8,12 +8,12 @@ export interface Props {
   /**
    * Selected brand color (v-model).
    */
-  brand: BrandColors;
+  brand?: BrandColors;
 
   /**
    * Selected gray color (v-model).
    */
-  gray: GrayColors;
+  gray?: GrayColors;
 
   /**
    * Component size.

package/ui.text-badge/UBadge.vue

@@ -98,9 +98,9 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
   >
     <div v-bind="bodyAttrs">
       <!--
-          @slot Use it to add icon before the text.
-          @binding {string} icon-name
-        -->
+        @slot Use it to add icon before the text.
+        @binding {string} icon-name
+      -->
       <slot name="left" :icon-name="leftIcon">
         <UIcon v-if="leftIcon" internal :name="leftIcon" color="inherit" v-bind="leftIconAttrs" />
       </slot>
@@ -118,9 +118,9 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
       </slot>
 
       <!--
-          @slot Use it to add icon after the text.
-          @binding {string} icon-name
-        -->
+        @slot Use it to add icon after the text.
+        @binding {string} icon-name
+      -->
       <slot name="right" :icon-name="rightIcon">
         <UIcon
           v-if="rightIcon"

package/utils/storybook.ts

@@ -100,37 +100,36 @@ export function getArgTypes(componentName: string | undefined) {
     const type = attribute.value.type;
 
     if (attribute.enum) {
-      types[attribute.name] = {
-        options: attribute.enum,
-        control: "select",
-        table: {
-          defaultValue: { summary: attribute.default || "" },
-          type: { summary: attribute.enum.join(" | ") },
-        },
-      };
-    }
+      attribute.enum = attribute.enum.map((item) => {
+        if (item === "UnknownObject") return "Object";
+        if (item === "UnknownArray") return "Array";
 
-    if (attribute.enum?.length === 1) {
-      types[attribute.name] = {
-        control: "object",
-        table: {
-          defaultValue: { summary: attribute.default || "" },
-          type: { summary: attribute.enum.join(" | ") },
-        },
-      };
+        return item;
+      });
     }
 
     const nonUnionTypes = [
+      "null",
       "string",
       "number",
       "boolean",
       "Date",
-      "UnknownObject",
-      "UnknownArray",
       "Array",
+      "Object",
+      "UnknownArray",
+      "UnknownObject",
     ];
 
-    if (attribute.enum?.every((value) => nonUnionTypes.includes(value))) {
+    if (attribute.enum?.some((value) => !nonUnionTypes.includes(value))) {
+      types[attribute.name] = {
+        options: attribute.enum,
+        control: "select",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+          type: { summary: attribute.enum.join(" | ") },
+        },
+      };
+    } else if (attribute.enum?.some((value) => nonUnionTypes.includes(value))) {
       let control = attribute.enum[0];
 
       if (control === "string") {
@@ -145,6 +144,17 @@ export function getArgTypes(componentName: string | undefined) {
         control: control as ArgType["control"],
         table: {
           defaultValue: { summary: attribute.default || "" },
+          type: { summary: attribute.enum.join(" | ") },
+        },
+      };
+    }
+
+    if (attribute.enum?.length === 1) {
+      types[attribute.name] = {
+        control: "object",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+          type: { summary: attribute.enum.join(" | ") },
         },
       };
     }