vueless 0.0.533 → 0.0.535

package/composables/useAutoPosition.ts

@@ -14,15 +14,6 @@ export enum Direction {
 export type Align = `${Direction}`;
 export type Position = { x: Align; y: Align };
 
-// TODO: Remove it after ui.form-date-picker-range and ui.form-date-picker ts migration (use enum there instead).
-export const POSITION = {
-  left: "left",
-  right: "right",
-  top: "top",
-  bottom: "bottom",
-  auto: "auto",
-};
-
 export function useAutoPosition(
   anchorElement: MaybeRef<HTMLElement | null>,
   targetElement: MaybeRef<HTMLElement | null>,

package/package.json

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

package/types.ts

@@ -54,6 +54,30 @@ export enum ColorMode {
   Auto = "auto",
 }
 
+export enum Color {
+  Brand = "brand",
+  Grayscale = "grayscale",
+  Gray = "gray",
+  Red = "red",
+  Orange = "orange",
+  Amber = "amber",
+  Yellow = "yellow",
+  Lime = "lime",
+  Green = "green",
+  Emerald = "emerald",
+  Teal = "teal",
+  Cyan = "cyan",
+  Sky = "sky",
+  Blue = "blue",
+  Indigo = "indigo",
+  Violet = "violet",
+  Purple = "purple",
+  Fuchsia = "fuchsia",
+  Pink = "pink",
+  Rose = "rose",
+  White = "white",
+}
+
 export interface ExtendedKeyClasses {
   [key: string]: Ref<string>;
 }

package/ui.button/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UButtonProps {
@@ -11,28 +13,7 @@ export interface UButtonProps {
   /**
    * Button color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Button size.

package/ui.button-link/types.ts

@@ -1,6 +1,7 @@
 import defaultConfig from "./config.ts";
 
 import type { RouteLocationRaw } from "vue-router";
+import type { Color } from "src/types.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
@@ -28,28 +29,7 @@ export interface ULinkProps {
   /**
    * Link color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Link open type behaviour.

package/ui.data-table/UTable.vue

@@ -3,7 +3,6 @@ import {
   ref,
   computed,
   watch,
-  toValue,
   useSlots,
   nextTick,
   onMounted,
@@ -39,6 +38,7 @@ import { useLocale } from "../composables/useLocale.ts";
 
 import type { Cell, Row, RowId, UTableProps, UTableRowAttrs } from "./types.ts";
 import type { Ref, RendererElement, ComputedRef } from "vue";
+import { isEqual } from "lodash-es";
 
 defineOptions({ inheritAttrs: false });
 
@@ -254,7 +254,15 @@ const tableRowAttrs = computed(() => ({
 
 watch(selectAll, onChangeSelectAll, { deep: true });
 watch(selectedRows, onChangeSelectedRows, { deep: true });
-watch(tableRows, () => emit("update:rows", toValue(tableRows)), { deep: true });
+watch(
+  tableRows,
+  () => {
+    if (!isEqual(tableRows.value, props.rows)) {
+      emit("update:rows", tableRows.value);
+    }
+  },
+  { deep: true },
+);
 watch(() => tableRows.value.length, updateSelectedRows);
 watch(() => props.rows, synchronizeTableItemsWithProps, { deep: true });
 watch(isHeaderSticky, setHeaderCellWidth);
@@ -337,7 +345,9 @@ function synchronizeTableItemsWithProps() {
     selectedRows.value = [];
   }
 
-  tableRows.value = props.rows;
+  if (!isEqual(tableRows.value, props.rows)) {
+    tableRows.value = props.rows;
+  }
 }
 
 function updateSelectedRows() {
@@ -379,11 +389,11 @@ function onChangeSelectAll(selectAll: boolean) {
   if (selectAll && canSelectAll.value) {
     selectedRows.value = getFlatRows(tableRows.value).map((row) => row.id);
 
-    tableRows.value.forEach((row) => switchRowCheck(row, true));
+    tableRows.value = tableRows.value.map((row) => switchRowCheck({ ...row }, true));
   } else if (!selectAll) {
     selectedRows.value = [];
 
-    tableRows.value.forEach((row) => switchRowCheck(row, false));
+    tableRows.value = tableRows.value.map((row) => switchRowCheck({ ...row }, false));
   }
 
   canSelectAll.value = true;
@@ -406,8 +416,7 @@ function clearSelectedItems() {
 }
 
 function onToggleRowVisibility(rowId: string | number) {
-  // TODO: Use map instead of forEach to get rid of implicit array mutation.
-  tableRows.value.forEach((row) => toggleRowVisibility(row, rowId));
+  tableRows.value = tableRows.value.map((row) => toggleRowVisibility({ ...row }, rowId));
 }
 
 defineExpose({

package/ui.data-table/UTableRow.vue

@@ -290,8 +290,6 @@ function getRowAttrs(rowId: string | number) {
             :data-test="`${dataTest}-${key}-cell`"
           >
             {{ formatCellValue(value) }}
-
-            {{ nestedRows }}
           </div>
         </slot>
       </template>

package/ui.data-table/utilTable.ts

@@ -50,7 +50,7 @@ export function toggleRowVisibility(row: Row, targetRowId: string | number) {
       row.nestedData.isHidden = !row.nestedData.isHidden;
     }
 
-    return;
+    return row;
   }
 
   if (row.row && !Array.isArray(row.row)) {
@@ -64,6 +64,8 @@ export function toggleRowVisibility(row: Row, targetRowId: string | number) {
   if (row.nestedData) {
     toggleRowVisibility(row.nestedData, targetRowId);
   }
+
+  return row;
 }
 
 export function switchRowCheck(row: Row, isChecked: boolean) {
@@ -76,6 +78,8 @@ export function switchRowCheck(row: Row, isChecked: boolean) {
   if (row.row && Array.isArray(row.row)) {
     row.row.map((currentRow) => switchRowCheck(currentRow, isChecked));
   }
+
+  return row;
 }
 
 export function getFlatRows(tableRows: Row[]) {

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -1,5 +1,5 @@
-<script lang="ts" setup>
-import { nextTick, ref, useId } from "vue";
+<script setup lang="ts">
+import { nextTick, ref, useId, useTemplateRef } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UBadge from "../ui.text-badge/UBadge.vue";
@@ -14,10 +14,13 @@ import { UDropdownBadge } from "./constants.ts";
 import useAttrs from "./useAttrs.ts";
 
 import type { UDropdownBadgeProps } from "./types.ts";
+import type { Option } from "../ui.dropdown-list/types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UDropdownBadgeProps>(), {
+  label: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).label,
+  options: () => [],
   labelKey: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).labelKey,
   variant: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).variant,
   color: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).color,
@@ -26,7 +29,9 @@ const props = withDefaults(defineProps<UDropdownBadgeProps>(), {
   noIcon: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).noIcon,
   yPosition: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).yPosition,
   xPosition: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).xPosition,
+  id: "",
   dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -37,8 +42,10 @@ const emit = defineEmits([
   "clickOption",
 ]);
 
+type UDropdownListRef = InstanceType<typeof UDropdownList>;
+
 const isShownOptions = ref(false);
-const dropdownListRef = ref(null);
+const dropdownListRef = useTemplateRef<UDropdownListRef>("dropdown-list");
 
 const elementId = props.id || useId();
 
@@ -53,7 +60,7 @@ function onClickBadge() {
   isShownOptions.value = !isShownOptions.value;
 
   if (isShownOptions.value) {
-    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+    nextTick(() => dropdownListRef.value?.wrapperRef?.focus());
   }
 }
 
@@ -61,7 +68,7 @@ function hideOptions() {
   isShownOptions.value = false;
 }
 
-function onClickOption(option) {
+function onClickOption(option: Option) {
   emit("clickOption", option);
 
   hideOptions();
@@ -100,7 +107,7 @@ function onClickOption(option) {
         <slot :label="label" :opened="isShownOptions" />
       </template>
 
-      <template #right="{ iconColor, iconSize }">
+      <template #right="{ iconColor }">
         <!--
           @slot Use it to add something after the label.
           @binding {boolean} opened
@@ -110,8 +117,8 @@ function onClickOption(option) {
             v-if="!noIcon"
             internal
             :color="iconColor"
-            :size="iconSize"
-            :name="config.defaults.dropdownIcon"
+            :size="size"
+            :name="config.defaults?.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"
           />
@@ -121,7 +128,7 @@ function onClickOption(option) {
 
     <UDropdownList
       v-if="isShownOptions"
-      ref="dropdownListRef"
+      ref="dropdown-list"
       :size="size"
       :options="options"
       :label-key="labelKey"

package/ui.dropdown-badge/storybook/stories.ts

@@ -7,9 +7,12 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { UDropdownBadgeProps } from "../types.ts";
 
-interface UDropdownBadgeArgs extends UDropdownBadgeProps {
+interface DefaultUDropdownBadgeArgs extends UDropdownBadgeProps {
   slotTemplate?: string;
-  enum: "color" | "size";
+}
+
+interface EnumUDropdownBadgeArgs extends DefaultUDropdownBadgeArgs {
+  enum: keyof Pick<UDropdownBadgeProps, "color" | "size">;
 }
 
 /**
@@ -35,7 +38,7 @@ export default {
   },
 } as Meta;
 
-const DefaultTemplate: StoryFn<UDropdownBadgeArgs> = (args: UDropdownBadgeArgs) => ({
+const DefaultTemplate: StoryFn<DefaultUDropdownBadgeArgs> = (args: DefaultUDropdownBadgeArgs) => ({
   components: { UDropdownBadge, UIcon },
   setup() {
     const slots = getSlotNames(UDropdownBadge.__name);
@@ -51,15 +54,15 @@ const DefaultTemplate: StoryFn<UDropdownBadgeArgs> = (args: UDropdownBadgeArgs)
   `,
 });
 
-const EnumVariantTemplate: StoryFn<UDropdownBadgeArgs> = (
-  args: UDropdownBadgeArgs,
+const EnumVariantTemplate: StoryFn<EnumUDropdownBadgeArgs> = (
+  args: EnumUDropdownBadgeArgs,
   { argTypes },
 ) => ({
   components: { UDropdownBadge, URow },
   setup() {
     return {
       args,
-      options: argTypes?.[args.enum]?.options,
+      options: argTypes[args.enum]?.options,
     };
   },
   template: `

package/ui.dropdown-badge/types.ts

@@ -1,6 +1,8 @@
 import defaultConfig from "./config.ts";
 
-import type { UnknownObject } from "../types.ts";
+import type { Option } from "../ui.dropdown-list/types";
+import type { Direction } from "../composables/useAutoPosition";
+import type { Color } from "../types";
 
 export type Config = Partial<typeof defaultConfig>;
 
@@ -13,7 +15,7 @@ export interface UDropdownBadgeProps {
   /**
    * Options list.
    */
-  options?: UnknownObject[];
+  options?: Option[];
 
   /**
    * Label key in the item object of options.
@@ -28,28 +30,7 @@ export interface UDropdownBadgeProps {
   /**
    * Badge color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Badge size.
@@ -69,12 +50,12 @@ export interface UDropdownBadgeProps {
   /**
    * The position of dropdown list on the y-axis.
    */
-  yPosition?: "top" | "bottom";
+  yPosition?: Direction.Top | Direction.Bottom;
 
   /**
    * The position of dropdown list on the x-axis.
    */
-  xPosition?: "left" | "right";
+  xPosition?: Direction.Left | Direction.Right;
 
   /**
    * Unique element id.
@@ -84,7 +65,7 @@ export interface UDropdownBadgeProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.dropdown-badge/useAttrs.ts

@@ -4,16 +4,16 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.ts";
 
 import type { Ref } from "vue";
-import type { UseAttrs } from "../types.ts";
-import type { UDropdownBadgeProps, Config } from "./types.ts";
+import type { Config, UDropdownBadgeProps } from "./types.ts";
+import type { UseAttrs } from "src/types.ts";
 
-type ComponentState = {
+interface DropdownBadgeState {
   isShownOptions: Ref<boolean>;
-};
+}
 
 export default function useAttrs(
   props: UDropdownBadgeProps,
-  { isShownOptions }: ComponentState,
+  { isShownOptions }: DropdownBadgeState,
 ): UseAttrs<Config> {
   const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,

package/ui.dropdown-button/UDropdownButton.vue

@@ -1,5 +1,5 @@
-<script lang="ts" setup>
-import { nextTick, computed, provide, ref, useId } from "vue";
+<script setup lang="ts">
+import { nextTick, computed, provide, ref, useId, useTemplateRef } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
@@ -14,14 +14,17 @@ import useAttrs from "./useAttrs.ts";
 import { UDropdownButton, BUTTON_VARIANT } from "./constants.ts";
 
 import type { UDropdownButtonProps } from "./types.ts";
+import type { Option } from "../ui.dropdown-list/types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UDropdownButtonProps>(), {
+  label: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).label,
+  options: () => [],
   labelKey: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).labelKey,
   variant: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).variant,
-  filled: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).filled,
   color: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).color,
+  filled: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).filled,
   size: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).size,
   round: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).round,
   square: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).square,
@@ -29,7 +32,9 @@ const props = withDefaults(defineProps<UDropdownButtonProps>(), {
   noIcon: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).noIcon,
   yPosition: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).yPosition,
   xPosition: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).xPosition,
+  id: "",
   dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -42,8 +47,10 @@ const emit = defineEmits([
 
 provide("hideDropdownOptions", hideOptions);
 
+type UDropdownListRef = InstanceType<typeof UDropdownList>;
+
 const isShownOptions = ref(false);
-const dropdownListRef = ref(null);
+const dropdownListRef = useTemplateRef<UDropdownListRef>("dropdown-list");
 
 const elementId = props.id || useId();
 
@@ -54,6 +61,7 @@ const iconColor = computed(() => {
   return props.variant === BUTTON_VARIANT.primary ? "white" : props.color;
 });
 
+type IconSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 const iconSize = computed(() => {
   const sizes = {
     "2xs": "xs",
@@ -64,10 +72,24 @@ const iconSize = computed(() => {
     xl: "md",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as IconSize;
+});
+
+type DropdownSize = "sm" | "md" | "lg";
+const dropdownSize = computed(() => {
+  const sizes = {
+    "2xs": "sm",
+    xs: "sm",
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+  };
+
+  return sizes[props.size] as DropdownSize;
 });
 
-function onClickOption(option) {
+function onClickOption(option: Option) {
   emit("clickOption", option);
 }
 
@@ -75,7 +97,7 @@ function onClickButton() {
   isShownOptions.value = !isShownOptions.value;
 
   if (isShownOptions.value) {
-    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+    nextTick(() => dropdownListRef.value?.wrapperRef?.focus());
   }
 }
 
@@ -132,7 +154,7 @@ function onClickList() {
             internal
             :size="iconSize"
             :color="iconColor"
-            :name="config.defaults.dropdownIcon"
+            :name="config.defaults?.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"
           />
@@ -142,8 +164,8 @@ function onClickList() {
 
     <UDropdownList
       v-if="isShownOptions"
-      ref="dropdownListRef"
-      :size="size"
+      ref="dropdown-list"
+      :size="dropdownSize"
       :options="options"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"

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

@@ -8,9 +8,12 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { UDropdownButtonProps } from "../types.ts";
 
-interface UDropdownButtonArgs extends UDropdownButtonProps {
+interface DefaultUDropdownButtonArgs extends UDropdownButtonProps {
   slotTemplate?: string;
-  enum: "variant" | "size";
+}
+
+interface EnumUDropdownButtonArgs extends DefaultUDropdownButtonArgs {
+  enum: keyof Pick<UDropdownButtonProps, "size" | "variant">;
 }
 
 /**
@@ -36,7 +39,9 @@ export default {
   },
 } as Meta;
 
-const DefaultTemplate: StoryFn<UDropdownButtonArgs> = (args: UDropdownButtonArgs) => ({
+const DefaultTemplate: StoryFn<DefaultUDropdownButtonArgs> = (
+  args: DefaultUDropdownButtonArgs,
+) => ({
   components: { UDropdownButton, UIcon },
   setup() {
     const slots = getSlotNames(UDropdownButton.__name);
@@ -50,15 +55,15 @@ const DefaultTemplate: StoryFn<UDropdownButtonArgs> = (args: UDropdownButtonArgs
   `,
 });
 
-const EnumVariantTemplate: StoryFn<UDropdownButtonArgs> = (
-  args: UDropdownButtonArgs,
+const EnumVariantTemplate: StoryFn<EnumUDropdownButtonArgs> = (
+  args: EnumUDropdownButtonArgs,
   { argTypes },
 ) => ({
   components: { UDropdownButton, URow },
   setup() {
     return {
       args,
-      options: argTypes?.[args.enum]?.options,
+      options: argTypes[args.enum]?.options,
     };
   },
   template: `
@@ -74,16 +79,16 @@ const EnumVariantTemplate: StoryFn<UDropdownButtonArgs> = (
   `,
 });
 
-const VariantColorsTemplate: StoryFn<UDropdownButtonArgs> = (
-  args: UDropdownButtonArgs,
+const VariantColorsTemplate: StoryFn<EnumUDropdownButtonArgs> = (
+  args: EnumUDropdownButtonArgs,
   { argTypes },
 ) => ({
   components: { UDropdownButton, URow, UCol },
   setup() {
     return {
       args,
-      variants: argTypes?.variant?.options,
-      colors: argTypes?.color?.options,
+      variants: argTypes.variant?.options,
+      colors: argTypes.color?.options,
     };
   },
   template: `