vueless 0.0.514 → 0.0.515

package/ui.dropdown-button/UDropdownButton.vue

@@ -1,70 +1,4 @@
-<template>
-  <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
-    <UButton
-      :id="elementId"
-      :label="label"
-      :size="size"
-      :color="color"
-      :round="round"
-      :square="square"
-      :variant="variant"
-      :disabled="disabled"
-      :filled="filled || isShownOptions"
-      v-bind="dropdownButtonAttrs"
-      :data-test="dataTest"
-      @click="onClickButton"
-    >
-      <template #left>
-        <!--
-          @slot Use it to add something before the label.
-          @binding {boolean} opened
-        -->
-        <slot name="left" :opened="isShownOptions" />
-      </template>
-
-      <template #default>
-        <!--
-          @slot Use it to add something instead of the default label.
-          @binding {string} label
-          @binding {boolean} opened
-        -->
-        <slot :label="label" :opened="isShownOptions" />
-      </template>
-
-      <template #right>
-        <!--
-          @slot Use it to add something after the label.
-          @binding {boolean} opened
-        -->
-        <slot name="right" :opened="isShownOptions">
-          <UIcon
-            v-if="!noIcon"
-            internal
-            :size="iconSize"
-            :color="iconColor"
-            :name="config.defaults.dropdownIcon"
-            v-bind="dropdownIconAttrs"
-            :data-test="`${dataTest}-dropdown`"
-          />
-        </slot>
-      </template>
-    </UButton>
-
-    <UDropdownList
-      v-if="isShownOptions"
-      ref="dropdownListRef"
-      :size="size"
-      :options="options"
-      :label-key="labelKey"
-      v-bind="dropdownListAttrs"
-      :data-test="`${dataTest}-list`"
-      @click="onClickList"
-      @click-option="onClickOption"
-    />
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { nextTick, computed, provide, ref, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -75,145 +9,27 @@ import { getDefault } from "../utils/ui.ts";
 
 import { vClickOutside } from "../directives";
 
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-import { UDropdownButton, BUTTON_VARIANT } from "./constants.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Button label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).labelKey,
-  },
-
-  /**
-   * Button variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).variant,
-  },
-
-  /**
-   * Fill the background for thirdary variant.
-   */
-  filled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownButton).filled,
-  },
-
-  /**
-   * Button color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).color,
-  },
-
-  /**
-   * Button size.
-   * @values 2xs, xs, sm, md, lg, xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).size,
-  },
-
-  /**
-   * Set button corners rounded.
-   */
-  round: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownButton).round,
-  },
-
-  /**
-   * Set the same paddings for the button.
-   */
-  square: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownButton).square,
-  },
-
-  /**
-   * Disable the link.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownButton).disabled,
-  },
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+import { UDropdownButton, BUTTON_VARIANT } from "./constants.ts";
 
-  /**
-   * Hide dropdown icon.
-   */
-  noIcon: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownButton).noIcon,
-  },
+import type { UDropdownButtonProps } from "./types.ts";
 
-  /**
-   * The position of dropdown list on the y-axis.
-   * @values top, bottom
-   */
-  yPosition: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).yPosition,
-  },
-
-  /**
-   * The position of dropdown list on the x-axis.
-   * @values left, right
-   */
-  xPosition: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).xPosition,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UDropdownButtonProps>(), {
+  labelKey: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).labelKey,
+  variant: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).variant,
+  filled: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).filled,
+  color: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).color,
+  size: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).size,
+  round: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).round,
+  square: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).square,
+  disabled: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).disabled,
+  noIcon: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).noIcon,
+  yPosition: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).yPosition,
+  xPosition: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).xPosition,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -271,3 +87,69 @@ function onClickList() {
   hideOptions();
 }
 </script>
+
+<template>
+  <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
+    <UButton
+      :id="elementId"
+      :label="label"
+      :size="size"
+      :color="color"
+      :round="round"
+      :square="square"
+      :variant="variant"
+      :disabled="disabled"
+      :filled="filled || isShownOptions"
+      v-bind="dropdownButtonAttrs"
+      :data-test="dataTest"
+      @click="onClickButton"
+    >
+      <template #left>
+        <!--
+          @slot Use it to add something before the label.
+          @binding {boolean} opened
+        -->
+        <slot name="left" :opened="isShownOptions" />
+      </template>
+
+      <template #default>
+        <!--
+          @slot Use it to add something instead of the default label.
+          @binding {string} label
+          @binding {boolean} opened
+        -->
+        <slot :label="label" :opened="isShownOptions" />
+      </template>
+
+      <template #right>
+        <!--
+          @slot Use it to add something after the label.
+          @binding {boolean} opened
+        -->
+        <slot name="right" :opened="isShownOptions">
+          <UIcon
+            v-if="!noIcon"
+            internal
+            :size="iconSize"
+            :color="iconColor"
+            :name="config.defaults.dropdownIcon"
+            v-bind="dropdownIconAttrs"
+            :data-test="`${dataTest}-dropdown`"
+          />
+        </slot>
+      </template>
+    </UButton>
+
+    <UDropdownList
+      v-if="isShownOptions"
+      ref="dropdownListRef"
+      :size="size"
+      :options="options"
+      :label-key="labelKey"
+      v-bind="dropdownListAttrs"
+      :data-test="`${dataTest}-list`"
+      @click="onClickList"
+      @click-option="onClickOption"
+    />
+  </div>
+</template>

package/ui.dropdown-button/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.dropdown-button/storybook/{stories.js → stories.ts}

@@ -5,6 +5,14 @@ import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 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 {
+  slotTemplate?: string;
+  enum: "variant" | "size";
+}
+
 /**
  * The `UDropdownButton` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.dropdown-button)
  */
@@ -26,9 +34,9 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UDropdownButtonArgs> = (args: UDropdownButtonArgs) => ({
   components: { UDropdownButton, UIcon },
   setup() {
     const slots = getSlotNames(UDropdownButton.__name);
@@ -37,17 +45,20 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDropdownButton v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UDropdownButton>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UDropdownButtonArgs> = (
+  args: UDropdownButtonArgs,
+  { argTypes },
+) => ({
   components: { UDropdownButton, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `
@@ -63,13 +74,16 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const VariantColorsTemplate = (args, { argTypes }) => ({
+const VariantColorsTemplate: StoryFn<UDropdownButtonArgs> = (
+  args: UDropdownButtonArgs,
+  { 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: `
@@ -95,13 +109,13 @@ export const Filled = DefaultTemplate.bind({});
 Filled.args = { variant: "thirdary", filled: true };
 
 export const Variants = EnumVariantTemplate.bind({});
-Variants.args = { enum: "variant", text: "" };
+Variants.args = { enum: "variant" };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", text: "" };
+Sizes.args = { enum: "size" };
 
 export const VariantColors = VariantColorsTemplate.bind({});
-VariantColors.args = { text: "" };
+VariantColors.args = {};
 
 export const WithoutDropdownIcon = EnumVariantTemplate.bind({});
 WithoutDropdownIcon.args = { enum: "variant", noIcon: true };

package/ui.dropdown-button/types.ts

@@ -0,0 +1,108 @@
+import defaultConfig from "./config.ts";
+
+import type { UnknownObject } from "../types.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UDropdownButtonProps {
+  /**
+   * Button label.
+   */
+  label?: string;
+
+  /**
+   * Options list.
+   */
+  options?: UnknownObject[];
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Button variant.
+   */
+  variant?: "primary" | "secondary" | "thirdary";
+
+  /**
+   * Fill the background for thirdary variant.
+   */
+  filled?: boolean;
+
+  /**
+   * Button color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Button size.
+   */
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Set button corners rounded.
+   */
+  round?: boolean;
+
+  /**
+   * Set the same paddings for the button.
+   */
+  square?: boolean;
+
+  /**
+   * Disable the link.
+   */
+  disabled?: boolean;
+
+  /**
+   * Hide dropdown icon.
+   */
+  noIcon?: boolean;
+
+  /**
+   * The position of dropdown list on the y-axis.
+   */
+  yPosition?: "top" | "bottom";
+
+  /**
+   * The position of dropdown list on the x-axis.
+   */
+  xPosition?: "left" | "right";
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.dropdown-button/{useAttrs.js → useAttrs.ts}

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