vueless 0.0.503 → 0.0.505

package/ui.other-dot/UDot.vue

@@ -1,51 +1,23 @@
-<template>
-  <div v-bind="dotAttrs" :data-test="dataTest" />
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { getDefault } from "../utils/ui.ts";
 
-import { UDot } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Dot 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, UDot).color,
-  },
+import { UDot } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Dot size.
-   * @values xs, sm, md, lg, xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UDot).size,
-  },
+import type { UDotProps } from "./types.ts";
 
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UDotProps>(), {
+  color: getDefault<UDotProps>(defaultConfig, UDot).color,
+  size: getDefault<UDotProps>(defaultConfig, UDot).size,
+  dataTest: "",
 });
 
 const { dotAttrs } = useAttrs(props);
 </script>
+
+<template>
+  <div v-bind="dotAttrs" :data-test="dataTest" />
+</template>

package/ui.other-dot/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.other-dot/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 UBadge from "../../ui.text-badge/UBadge.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UDotProps } from "../types.ts";
+
+interface UDotArgs extends UDotProps {
+  slotTemplate?: string;
+  enum: "size" | "color";
+}
+
 /**
  * The `UDot` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.other-dot)
  */
@@ -15,9 +23,9 @@ export default {
   argTypes: {
     ...getArgTypes(UDot.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UDotArgs> = (args: UDotArgs) => ({
   components: { UDot },
   setup() {
     const slots = getSlotNames(UDot.__name);
@@ -26,17 +34,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDot v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UDot>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UDotArgs> = (args: UDotArgs, { argTypes }) => ({
   components: { UCol, URow, UDot, UBadge },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.other-dot/types.ts

@@ -0,0 +1,46 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UDotProps {
+  /**
+   * Dot color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Dot size.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.other-dot/useAttrs.ts

@@ -0,0 +1,18 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UDotProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UDotProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.text-alert/UAlert.vue

@@ -1,3 +1,88 @@
+<script lang="ts" setup>
+import { onMounted, ref, computed } from "vue";
+import { getDefault } from "../utils/ui.ts";
+
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UButton from "../ui.button/UButton.vue";
+import UText from "../ui.text-block/UText.vue";
+
+import { UAlert } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UAlertProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UAlertProps>(), {
+  variant: getDefault<UAlertProps>(defaultConfig, UAlert).variant,
+  bordered: getDefault<UAlertProps>(defaultConfig, UAlert).bordered,
+  size: getDefault<UAlertProps>(defaultConfig, UAlert).size,
+  color: getDefault<UAlertProps>(defaultConfig, UAlert).color,
+  timeout: getDefault<UAlertProps>(defaultConfig, UAlert).timeout,
+  closable: getDefault<UAlertProps>(defaultConfig, UAlert).closable,
+  dataTest: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when the alert is hidden.
+   */
+  "hidden",
+]);
+
+const isShownAlert = ref(true);
+
+const {
+  config,
+  wrapperAttrs,
+  bodyAttrs,
+  contentAttrs,
+  textAttrs,
+  titleAttrs,
+  descriptionAttrs,
+  closeButtonAttrs,
+  closeIconAttrs,
+  contentWrapperAttrs,
+  hasSlotContent,
+} = useAttrs(props);
+
+onMounted(() => {
+  if (props.timeout > 0) {
+    setTimeout(() => onClickClose(), props.timeout);
+  }
+});
+
+function onClickClose() {
+  isShownAlert.value = false;
+  emit("hidden");
+}
+
+const closeIconSize = computed(() => {
+  const sizes = {
+    xs: "3xs",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+  };
+
+  return sizes[props.size];
+});
+
+const closeButtonColor = computed(() => {
+  if (props.color === "grayscale") return "white";
+  if (props.color === "white") return "grayscale";
+
+  return props.color;
+});
+
+const iconColor = computed(() => {
+  if (props.color === "white") return "gray";
+
+  return props.variant === "primary" ? "white" : props.color;
+});
+</script>
+
 <template>
   <div v-if="isShownAlert" :data-test="dataTest" v-bind="wrapperAttrs">
     <!-- @slot Use it to add something above the text. -->
@@ -76,160 +161,3 @@
     <slot name="bottom" />
   </div>
 </template>
-
-<script setup>
-import { onMounted, ref, computed } from "vue";
-
-import UIcon from "../ui.image-icon/UIcon.vue";
-import UButton from "../ui.button/UButton.vue";
-import UText from "../ui.text-block/UText.vue";
-import { getDefault } from "../utils/ui.ts";
-
-import { UAlert } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Alert title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Alert description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Alert variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UAlert).variant,
-  },
-
-  /**
-   * Add border to the `thirdary` variant.
-   */
-  bordered: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UAlert).bordered,
-  },
-
-  /**
-   * Alert size.
-   * @values xs, sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UAlert).size,
-  },
-
-  /**
-   * Alert 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, UAlert).color,
-  },
-
-  /**
-   * Alert timeout.
-   */
-  timeout: {
-    type: Number,
-    default: getDefault(defaultConfig, UAlert).timeout,
-  },
-
-  /**
-   * Show close button.
-   */
-  closable: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UAlert).closable,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when the alert is hidden.
-   */
-  "hidden",
-]);
-
-const isShownAlert = ref(true);
-
-const {
-  config,
-  wrapperAttrs,
-  bodyAttrs,
-  contentAttrs,
-  textAttrs,
-  titleAttrs,
-  descriptionAttrs,
-  closeButtonAttrs,
-  closeIconAttrs,
-  contentWrapperAttrs,
-  hasSlotContent,
-} = useAttrs(props);
-
-onMounted(() => {
-  if (props.timeout > 0) {
-    setTimeout(() => onClickClose(), props.timeout);
-  }
-});
-
-function onClickClose() {
-  isShownAlert.value = false;
-  emit("hidden");
-}
-
-const closeIconSize = computed(() => {
-  const sizes = {
-    xs: "3xs",
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size];
-});
-
-const closeButtonColor = computed(() => {
-  if (props.color === "grayscale") return "white";
-  if (props.color === "white") return "grayscale";
-
-  return props.color;
-});
-
-const iconColor = computed(() => {
-  if (props.color === "white") return "gray";
-
-  return props.variant === "primary" ? "white" : props.color;
-});
-</script>

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

@@ -6,6 +6,14 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UAlertProps } from "../types.ts";
+
+interface UAlertArgs extends UAlertProps {
+  slotTemplate?: string;
+  enum: "size" | "color" | "variant";
+}
+
 /**
  * The `UAlert` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-alert)
  */
@@ -20,9 +28,9 @@ export default {
   argTypes: {
     ...getArgTypes(UAlert.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UAlertArgs> = (args: UAlertArgs) => ({
   components: { UAlert, UIcon, URow, UButton },
   setup() {
     const slots = getSlotNames(UAlert.__name);
@@ -31,25 +39,25 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UAlert v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UAlert>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UAlertArgs> = (args: UAlertArgs, { argTypes }) => ({
   components: { UAlert, UCol },
   setup() {
-    function getText(value) {
+    function getText(value: string) {
       return `This is Alert's ${value} size`;
     }
 
-    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: `
     <UCol align="stretch">

package/ui.text-alert/types.ts

@@ -0,0 +1,76 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UAlertProps {
+  /**
+   * Alert title.
+   */
+  title?: string;
+
+  /**
+   * Alert description.
+   */
+  description?: string;
+
+  /**
+   * Alert variant.
+   */
+  variant?: "primary" | "secondary" | "thirdary";
+
+  /**
+   * Add border to the `thirdary` variant.
+   */
+  bordered?: boolean;
+
+  /**
+   * Alert size.
+   */
+  size?: "xs" | "sm" | "md" | "lg";
+
+  /**
+   * Alert color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Alert timeout.
+   */
+  timeout?: number;
+
+  /**
+   * Show close button.
+   */
+  closable?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.text-alert/useAttrs.ts

@@ -0,0 +1,18 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UAlertProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UAlertProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.text-badge/UBadge.vue

@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<UBadgeProps>(), {
   color: getDefault<UBadgeProps>(defaultConfig, UBadge).color,
   round: getDefault<UBadgeProps>(defaultConfig, UBadge).round,
   tabindex: getDefault<UBadgeProps>(defaultConfig, UBadge).tabindex,
+  dataTest: "",
 });
 
 const emit = defineEmits([

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

@@ -1,4 +1,3 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
 import {
   getArgTypes,
   getSlotNames,
@@ -11,6 +10,7 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
 import type { UBadgeProps } from "../types.ts";
 
 interface UBadgeArgs extends UBadgeProps {
@@ -83,13 +83,6 @@ const EnumVariantTemplate: StoryFn<UBadgeArgs> = (args: UBadgeArgs, { argTypes }
   },
   template: `
     <URow>
-      <UDropdownButton
-        label="Dropdown"
-        :options='[{"label":"option 1"},{"label":"option 2"},{"label":"option 3"}]'
-      variant="thirdary"
-      filled
-      >
-      </UDropdownButton>
       <UBadge
         v-for="(option, index) in options"
         :key="index"

package/ui.text-badge/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+export type Config = Partial<typeof defaultConfig>;
+
 export interface UBadgeProps {
   /**
    *  Badge label.

package/ui.text-badge/useAttrs.ts

@@ -4,9 +4,7 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.ts";
 
 import type { UseAttrs } from "../types.ts";
-import type { UBadgeProps } from "./types.ts";
-
-type Config = Partial<typeof defaultConfig>;
+import type { UBadgeProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UBadgeProps): UseAttrs<Config> {
   const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);

package/ui.text-block/UText.vue

@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<UTextProps>(), {
   size: getDefault<UTextProps>(defaultConfig, UText).size,
   align: getDefault<UTextProps>(defaultConfig, UText).align,
   line: getDefault<UTextProps>(defaultConfig, UText).line,
+  dataTest: "",
 });
 
 const { wrapperAttrs, htmlAttrs, hasSlotContent } = useAttrs(props);

package/ui.text-block/storybook/stories.ts

@@ -1,9 +1,9 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
 import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
 
 import UText from "../../ui.text-block/UText.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
 import type { UTextProps } from "../types.ts";
 
 interface UTextArgs extends UTextProps {

package/ui.text-block/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+export type Config = Partial<typeof defaultConfig>;
+
 export interface UTextProps {
   /**
    * HTML markdown or plain text.