vueless 0.0.513 → 0.0.515

package/ui.dropdown-link/UDropdownLink.vue

@@ -1,3 +1,87 @@
+<script lang="ts" setup>
+import { nextTick, computed, provide, ref, useId } from "vue";
+
+import UIcon from "../ui.image-icon/UIcon.vue";
+import ULink from "../ui.button-link/ULink.vue";
+import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
+
+import { getDefault } from "../utils/ui.ts";
+
+import { vClickOutside } from "../directives";
+
+import { UDropdownLink } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UDropdownLinkProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UDropdownLinkProps>(), {
+  labelKey: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).labelKey,
+  color: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).color,
+  size: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).size,
+  underlined: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).underlined,
+  dashed: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).dashed,
+  disabled: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).disabled,
+  noRing: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).noRing,
+  noIcon: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).noIcon,
+  yPosition: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).yPosition,
+  xPosition: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).xPosition,
+  dataTest: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers on dropdown option click.
+   * @property {string} value
+   */
+  "clickOption",
+]);
+
+provide("hideDropdownOptions", hideOptions);
+
+const isShownOptions = ref(false);
+const dropdownListRef = ref(null);
+
+const elementId = props.id || useId();
+
+const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
+  props,
+  { isShownOptions },
+);
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+  };
+
+  return sizes[props.size];
+});
+
+function onClickLink() {
+  isShownOptions.value = !isShownOptions.value;
+
+  if (isShownOptions.value) {
+    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+  }
+}
+
+function hideOptions() {
+  isShownOptions.value = false;
+}
+
+function onClickList() {
+  hideOptions();
+}
+
+function onClickOption(option) {
+  emit("clickOption", option);
+}
+</script>
+
 <template>
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <ULink
@@ -66,197 +150,3 @@
     />
   </div>
 </template>
-
-<script setup>
-import { nextTick, computed, provide, ref, useId } from "vue";
-
-import UIcon from "../ui.image-icon/UIcon.vue";
-import ULink from "../ui.button-link/ULink.vue";
-import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
-
-import { getDefault } from "../utils/ui.ts";
-
-import { vClickOutside } from "../directives";
-
-import { UDropdownLink } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Link 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, UDropdownLink).labelKey,
-  },
-
-  /**
-   * Link 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, UDropdownLink).color,
-  },
-
-  /**
-   * Link size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownLink).size,
-  },
-
-  /**
-   * Add underline.
-   */
-  underlined: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownLink).underlined,
-  },
-
-  /**
-   * Set dashed underline style.
-   */
-  dashed: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownLink).dashed,
-  },
-
-  /**
-   * Disable the link.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownLink).disabled,
-  },
-
-  /**
-   * Hide focus ring.
-   */
-  noRing: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownLink).noRing,
-  },
-
-  /**
-   * Hide dropdown icon.
-   */
-  noIcon: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownLink).noIcon,
-  },
-
-  /**
-   * The position of dropdown list on the y-axis.
-   * @values top, bottom
-   */
-  yPosition: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownLink).yPosition,
-  },
-
-  /**
-   * The position of dropdown list on the x-axis.
-   * @values left, right
-   */
-  xPosition: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownLink).xPosition,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers on dropdown option click.
-   * @property {string} value
-   */
-  "clickOption",
-]);
-
-provide("hideDropdownOptions", hideOptions);
-
-const isShownOptions = ref(false);
-const dropdownListRef = ref(null);
-
-const elementId = props.id || useId();
-
-const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
-  props,
-  { isShownOptions },
-);
-
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size];
-});
-
-function onClickLink() {
-  isShownOptions.value = !isShownOptions.value;
-
-  if (isShownOptions.value) {
-    nextTick(() => dropdownListRef.value.wrapperRef.focus());
-  }
-}
-
-function hideOptions() {
-  isShownOptions.value = false;
-}
-
-function onClickList() {
-  hideOptions();
-}
-
-function onClickOption(option) {
-  emit("clickOption", option);
-}
-</script>

package/ui.dropdown-link/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-link/storybook/{stories.js → stories.ts}

@@ -4,6 +4,14 @@ import UDropdownLink from "../../ui.dropdown-link/UDropdownLink.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UDropdownLinkProps } from "../types.ts";
+
+interface UDropdownLinkArgs extends UDropdownLinkProps {
+  slotTemplate?: string;
+  enum: "color" | "size";
+}
+
 /**
  * The `UDropdownLink` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.dropdown-link)
  */
@@ -29,9 +37,9 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UDropdownLinkArgs> = (args: UDropdownLinkArgs) => ({
   components: { UDropdownLink, UIcon },
   setup() {
     const slots = getSlotNames(UDropdownLink.__name);
@@ -40,25 +48,28 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDropdownLink v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UDropdownLink>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UDropdownLinkArgs> = (
+  args: UDropdownLinkArgs,
+  { argTypes },
+) => ({
   components: { UDropdownLink, URow },
   setup() {
-    function getText(value) {
+    function getText(value: string) {
       return `Dropdown ${value}`;
     }
 
-    let prefixedOptions = argTypes[args.enum].options;
+    let prefixedOptions = argTypes?.[args.enum]?.options;
 
-    if (argTypes[args.enum].name === "size") {
-      prefixedOptions = prefixedOptions.map((option) => getText(option));
+    if (argTypes?.[args.enum]?.name === "size") {
+      prefixedOptions = prefixedOptions?.map((option) => getText(option));
     }
 
-    return { args, options: argTypes[args.enum].options, prefixedOptions };
+    return { args, options: argTypes?.[args.enum]?.options, prefixedOptions };
   },
   template: `
     <URow>

package/ui.dropdown-link/types.ts

@@ -0,0 +1,103 @@
+import defaultConfig from "./config.ts";
+
+import type { UnknownObject } from "../types.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UDropdownLinkProps {
+  /**
+   * Link label.
+   */
+  label?: string;
+
+  /**
+   * Options list.
+   */
+  options?: UnknownObject[];
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Link color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Link size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Add underline.
+   */
+  underlined?: boolean;
+
+  /**
+   * Set dashed underline style.
+   */
+  dashed?: boolean;
+
+  /**
+   * Disable the link.
+   */
+  disabled?: boolean;
+
+  /**
+   * Hide focus ring.
+   */
+  noRing?: 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-link/{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 { UDropdownLinkProps, Config } from "./types.ts";
+
+type ComponentState = {
+  isShownOptions: Ref<boolean>;
+};
+
+export default function useAttrs(
+  props: UDropdownLinkProps,
+  { isShownOptions }: ComponentState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
     defaultConfig,
     () => props.config,
   );