vueless 0.0.502 → 0.0.504

package/ui.text-file/types.ts

@@ -0,0 +1,45 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UFileProps {
+  /**
+   * File url.
+   */
+  url?: string;
+
+  /**
+   * Image url.
+   */
+  imageUrl?: string;
+
+  /**
+   * File label.
+   */
+  label?: string;
+
+  /**
+   * File size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Show remove button.
+   */
+  removable?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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

package/ui.text-files/UFiles.vue

@@ -1,3 +1,49 @@
+<script lang="ts" setup>
+import UFile from "../ui.text-file/UFile.vue";
+import ULabel from "../ui.form-label/ULabel.vue";
+import { getDefault } from "../utils/ui.ts";
+
+import { UFiles } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+import { computed } from "vue";
+
+import type { UFilesProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UFilesProps>(), {
+  labelAlign: getDefault<UFilesProps>(defaultConfig, UFiles).labelAlign,
+  size: getDefault<UFilesProps>(defaultConfig, UFiles).size,
+  dataTest: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when remove button is clicked.
+   * @property {string} fileId
+   */
+  "remove",
+]);
+
+const { filesLabelAttrs, itemsAttrs, itemAttrs } = useAttrs(props);
+
+const formattedFileList = computed(() =>
+  props.fileList.map((file) => {
+    return {
+      id: file.name,
+      label: file.name,
+      url: URL.createObjectURL(file),
+      imageUrl: file.type.includes("image") ? URL.createObjectURL(file) : undefined,
+    };
+  }),
+);
+
+function onRemoveFile(fileId) {
+  emit("remove", fileId);
+}
+</script>
+
 <template>
   <ULabel
     :label="label"
@@ -42,109 +88,3 @@
     </div>
   </ULabel>
 </template>
-
-<script setup>
-import UFile from "../ui.text-file/UFile.vue";
-import ULabel from "../ui.form-label/ULabel.vue";
-import { getDefault } from "../utils/ui.ts";
-
-import { UFiles } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-import { computed } from "vue";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * List of file objects.
-   */
-  fileList: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * File list label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * File list label placement.
-   * @values top, topWithDesc
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UFiles).labelAlign,
-  },
-
-  /**
-   * File list description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * File list size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UFiles).size,
-  },
-
-  /**
-   * Show remove button for each file
-   */
-  removable: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when remove button is clicked.
-   * @property {string} fileId
-   */
-  "remove",
-]);
-
-const { filesLabelAttrs, itemsAttrs, itemAttrs } = useAttrs(props);
-
-const formattedFileList = computed(() =>
-  props.fileList.map((file) => {
-    return {
-      id: file.name,
-      label: file.name,
-      url: URL.createObjectURL(file),
-      imageUrl: file.type.includes("image") ? URL.createObjectURL(file) : undefined,
-    };
-  }),
-);
-
-function onRemoveFile(fileId) {
-  emit("remove", fileId);
-}
-</script>

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,
+  };
+}