vueless 0.0.534 → 0.0.536

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.534",
+  "version": "0.0.536",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -41,6 +41,9 @@ import UTabConfig from "./ui.navigation-tab/config.ts";
 import UTabsConfig from "./ui.navigation-tabs/config.ts";
 import UAvatarConfig from "./ui.image-avatar/config.ts";
 import UIconConfig from "./ui.image-icon/config.ts";
+import UCheckboxConfig from "./ui.form-checkbox/config.ts";
+import UCheckboxGroupConfig from "./ui.form-checkbox-group/config.ts";
+import UCheckboxMultiStateConfig from "./ui.form-checkbox-multi-state/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -54,6 +57,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>;
 }
@@ -128,6 +155,7 @@ export interface Config extends ThemeConfig {
 }
 
 export type UnknownObject = Record<string, unknown>;
+export type UnknownArray = Array<unknown>;
 export type ComponentNames = keyof Components; // keys union
 export type Strategies = "merge" | "replace" | "override";
 export type Gray = "gray";
@@ -193,6 +221,9 @@ export interface Components {
   UTabs?: Partial<typeof UTabsConfig>;
   UAvatar?: Partial<typeof UAvatarConfig>;
   UIcon?: Partial<typeof UIconConfig>;
+  UCheckbox?: Partial<typeof UCheckboxConfig>;
+  UCheckboxGroup?: Partial<typeof UCheckboxGroupConfig>;
+  UCheckboxMultiState?: Partial<typeof UCheckboxMultiStateConfig>;
 }
 
 export interface Directives {

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.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: `

package/ui.dropdown-button/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 UDropdownButtonProps {
   /**
    * Options list.
    */
-  options?: UnknownObject[];
+  options?: Option[];
 
   /**
    * Label key in the item object of options.
@@ -33,28 +35,7 @@ export interface UDropdownButtonProps {
   /**
    * 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.
@@ -72,7 +53,7 @@ export interface UDropdownButtonProps {
   square?: boolean;
 
   /**
-   * Disable the link.
+   * Disable the button.
    */
   disabled?: boolean;
 
@@ -84,12 +65,12 @@ export interface UDropdownButtonProps {
   /**
    * 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.
@@ -99,7 +80,7 @@ export interface UDropdownButtonProps {
   /**
    * Component config object.
    */
-  config?: Partial<typeof defaultConfig>;
+  config?: Config;
 
   /**
    * Data-test attribute for automated testing.

package/ui.dropdown-button/useAttrs.ts

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