vueless 0.0.503 → 0.0.505

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

@@ -2,6 +2,13 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 
 import UFiles from "../../ui.text-files/UFiles.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UFilesProps } from "../types.ts";
+
+interface UFilesArgs extends UFilesProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UFiles` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-files)
  */
@@ -19,9 +26,9 @@ export default {
   argTypes: {
     ...getArgTypes(UFiles.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UFilesArgs> = (args: UFilesArgs) => ({
   components: { UFiles },
   setup() {
     const slots = getSlotNames(UFiles.__name);
@@ -30,7 +37,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UFiles v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UFiles>
   `,
 });

package/ui.text-files/types.ts

@@ -0,0 +1,45 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UFilesProps {
+  /**
+   * List of file objects.
+   */
+  fileList?: Array<object>;
+
+  /**
+   * File list label.
+   */
+  label?: string;
+
+  /**
+   * File list label placement.
+   */
+  labelAlign?: "top" | "topWithDesc";
+
+  /**
+   * File list description.
+   */
+  description?: string;
+
+  /**
+   * File list size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Show remove button for each file
+   */
+  removable?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.text-files/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 { UFilesProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UFilesProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.text-header/UHeader.vue

@@ -1,85 +1,28 @@
-<template>
-  <component :is="tag" v-bind="headerAttrs" :data-test="dataTest">
-    <slot>{{ label }}</slot>
-  </component>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { getDefault } from "../utils/ui.ts";
 
-import { UHeader } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Header label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Header size.
-   * @values xs, sm, md, lg, xl, 2xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UHeader).size,
-  },
+import { UHeader } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Header 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, UHeader).color,
-  },
+import type { UHeaderProps } from "./types.ts";
 
-  /**
-   * Allows changing HTML tag.
-   */
-  tag: {
-    type: String,
-    default: getDefault(defaultConfig, UHeader).tag,
-  },
-
-  /**
-   * Removes text line height (disable for multiline headers).
-   */
-  line: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UHeader).line,
-  },
-
-  /**
-   * Show the underline.
-   */
-  underlined: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UHeader).underlined,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UHeaderProps>(), {
+  size: getDefault<UHeaderProps>(defaultConfig, UHeader).size,
+  color: getDefault<UHeaderProps>(defaultConfig, UHeader).color,
+  tag: getDefault<UHeaderProps>(defaultConfig, UHeader).tag,
+  line: getDefault<UHeaderProps>(defaultConfig, UHeader).line,
+  underlined: getDefault<UHeaderProps>(defaultConfig, UHeader).underlined,
+  dataTest: "",
 });
 
 const { headerAttrs } = useAttrs(props);
 </script>
+
+<template>
+  <component :is="tag" v-bind="headerAttrs" :data-test="dataTest">
+    <slot>{{ label }}</slot>
+  </component>
+</template>

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

@@ -3,6 +3,14 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 import UHeader from "../../ui.text-header/UHeader.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UHeaderProps } from "../types.ts";
+
+interface UHeaderArgs extends UHeaderProps {
+  slotTemplate?: string;
+  enum: "size" | "color";
+}
+
 /**
  * The `UHeader` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-header)
  */
@@ -16,9 +24,9 @@ export default {
   argTypes: {
     ...getArgTypes(UHeader.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UHeaderArgs> = (args: UHeaderArgs) => ({
   components: { UHeader },
   setup() {
     const slots = getSlotNames(UHeader.__name);
@@ -27,17 +35,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UHeader v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UHeader>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UHeaderArgs> = (args: UHeaderArgs, { argTypes }) => ({
   components: { UHeader, UCol },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.text-header/types.ts

@@ -0,0 +1,66 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UHeaderProps {
+  /**
+   * Header label.
+   */
+  label?: string;
+
+  /**
+   * Header size.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+  /**
+   * Header color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Allows changing HTML tag.
+   */
+  tag?: string;
+
+  /**
+   * Removes text line height (disable for multiline headers).
+   */
+  line?: boolean;
+
+  /**
+   * Show the underline.
+   */
+  underlined?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.text-header/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 { UHeaderProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UHeaderProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.text-money/UMoney.vue

@@ -1,178 +1,30 @@
-<template>
-  <div v-bind="moneyAttrs">
-    <div v-if="hasSlotContent($slots['left'])" v-bind="slotLeftAttrs">
-      <!-- @slot Use it to add something before money amount. -->
-      <slot name="left" />
-    </div>
-
-    <div :data-test="dataTest" v-bind="sumAttrs">
-      <span
-        v-if="currencySymbolPosition.left"
-        v-bind="symbolAttrs"
-        v-text="symbol + currencySpace"
-      />
-
-      <span v-if="value" v-bind="mathSignAttrs" v-text="mathSign" />
-
-      <span v-bind="integerAttrs" v-text="preparedMoney.integer" />
-
-      <span
-        v-if="maxFractionDigits > 0"
-        v-bind="pennyAttrs"
-        v-text="preparedMoney.decimalSeparator + preparedMoney.penny"
-      />
-
-      <span
-        v-if="currencySymbolPosition.right"
-        v-bind="symbolAttrs"
-        v-text="currencySpace + symbol"
-      />
-    </div>
-
-    <div v-if="hasSlotContent($slots['right'])" v-bind="slotRightAttrs">
-      <!-- @slot Use it to add something after money amount. -->
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed } from "vue";
 
 import { getDefault } from "../utils/ui.ts";
 
-import { UMoney } from "./constants.js";
-import defaultConfig from "./config.js";
-import { useAttrs } from "./useAttrs.js";
-import { separatedMoney, MONEY_SIGN_TYPE } from "./utilMoney.js";
+import { UMoney } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import { useAttrs } from "./useAttrs.ts";
+import { separatedMoney, MONEY_SIGN_TYPE } from "./utilMoney.ts";
+
+import type { UMoneyProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = defineProps({
-  /**
-   * Money value.
-   */
-  value: {
-    type: Number,
-    default: 0,
-  },
-
-  /**
-   * Money size.
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UMoney).size,
-  },
-
-  /**
-   * Money 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, UMoney).color,
-  },
-
-  /**
-   * Money currency symbol.
-   */
-  symbol: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Money currency symbol align.
-   * @values right, left
-   */
-  symbolAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UMoney).symbolAlign,
-  },
-
-  /**
-   * Add space between currency symbol and sum.
-   */
-  symbolDivided: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UMoney).symbolDivided,
-  },
-
-  /**
-   * Money sign.
-   * @values default, positive, negative
-   */
-  sign: {
-    type: String,
-    default: getDefault(defaultConfig, UMoney).sign,
-  },
-
-  /**
-   * Minimal number of signs after the decimal separator (fractional part of a number).
-   */
-  minFractionDigits: {
-    type: Number,
-    default: getDefault(defaultConfig, UMoney).minFractionDigits,
-  },
-
-  /**
-   * Maximal number of signs after the decimal separator (fractional part of a number).
-   */
-  maxFractionDigits: {
-    type: Number,
-    default: getDefault(defaultConfig, UMoney).maxFractionDigits,
-  },
-
-  /**
-   * A symbol used to separate the integer part from the fractional part of a number.
-   */
-  decimalSeparator: {
-    type: String,
-    default: getDefault(defaultConfig, UMoney).decimalSeparator,
-  },
-
-  /**
-   *  A symbol used to separate the thousand parts of a number.
-   */
-  thousandsSeparator: {
-    type: String,
-    default: getDefault(defaultConfig, UMoney).thousandsSeparator,
-  },
-
-  /**
-   * Money align.
-   * @values right, left
-   */
-  align: {
-    type: String,
-    default: getDefault(defaultConfig, UMoney).align,
-  },
-
-  /**
-   * Make money planned (add brackets).
-   */
-  planned: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UMoney).planned,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UMoneyProps>(), {
+  size: getDefault<UMoneyProps>(defaultConfig, UMoney).size,
+  color: getDefault<UMoneyProps>(defaultConfig, UMoney).color,
+  symbolAlign: getDefault<UMoneyProps>(defaultConfig, UMoney).symbolAlign,
+  symbolDivided: getDefault<UMoneyProps>(defaultConfig, UMoney).symbolDivided,
+  sign: getDefault<UMoneyProps>(defaultConfig, UMoney).sign,
+  minFractionDigits: getDefault<UMoneyProps>(defaultConfig, UMoney).minFractionDigits,
+  maxFractionDigits: getDefault<UMoneyProps>(defaultConfig, UMoney).maxFractionDigits,
+  decimalSeparator: getDefault<UMoneyProps>(defaultConfig, UMoney).decimalSeparator,
+  thousandsSeparator: getDefault<UMoneyProps>(defaultConfig, UMoney).thousandsSeparator,
+  align: getDefault<UMoneyProps>(defaultConfig, UMoney).align,
+  planned: getDefault<UMoneyProps>(defaultConfig, UMoney).planned,
+  dataTest: "",
 });
 
 const {
@@ -217,3 +69,41 @@ const preparedMoney = computed(() => {
   );
 });
 </script>
+
+<template>
+  <div v-bind="moneyAttrs">
+    <div v-if="hasSlotContent($slots['left'])" v-bind="slotLeftAttrs">
+      <!-- @slot Use it to add something before money amount. -->
+      <slot name="left" />
+    </div>
+
+    <div :data-test="dataTest" v-bind="sumAttrs">
+      <span
+        v-if="currencySymbolPosition.left"
+        v-bind="symbolAttrs"
+        v-text="symbol + currencySpace"
+      />
+
+      <span v-if="value" v-bind="mathSignAttrs" v-text="mathSign" />
+
+      <span v-bind="integerAttrs" v-text="preparedMoney.integer" />
+
+      <span
+        v-if="maxFractionDigits > 0"
+        v-bind="pennyAttrs"
+        v-text="preparedMoney.decimalSeparator + preparedMoney.penny"
+      />
+
+      <span
+        v-if="currencySymbolPosition.right"
+        v-bind="symbolAttrs"
+        v-text="currencySpace + symbol"
+      />
+    </div>
+
+    <div v-if="hasSlotContent($slots['right'])" v-bind="slotRightAttrs">
+      <!-- @slot Use it to add something after money amount. -->
+      <slot name="right" />
+    </div>
+  </div>
+</template>

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

@@ -6,6 +6,14 @@ import URow from "../../ui.container-row/URow.vue";
 import DebitIcon from "../../ui.text-money/assets/debit.svg?component";
 import CreditIcon from "../../ui.text-money/assets/credit.svg?component";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UMoneyProps } from "../types.ts";
+
+interface UMoneyArgs extends UMoneyProps {
+  slotTemplate?: string;
+  enum: "color" | "size" | "sign" | "symbolAlign" | "align";
+}
+
 const COMPONENT_CLASSES = "flex justify-center w-1/6";
 
 /**
@@ -23,9 +31,9 @@ export default {
   argTypes: {
     ...getArgTypes(UMoney.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs) => ({
   components: { UMoney, UIcon },
   setup() {
     const slots = getSlotNames(UMoney.__name);
@@ -40,13 +48,13 @@ const DefaultTemplate = (args) => ({
   template: `
     <div class="${COMPONENT_CLASSES}">
       <UMoney v-bind="args">
-        ${args.slotTemplate || getSlotsFragment()}
+        ${args.slotTemplate || getSlotsFragment("")}
       </UMoney>
     </div>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs, { argTypes }) => ({
   components: { UMoney, URow },
   setup() {
     const slots = getSlotNames(UMoney.__name);
@@ -54,7 +62,7 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
     return {
       args,
       slots,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `