vueless 0.0.503 → 0.0.504

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.503",
+  "version": "0.0.504",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/plugin-vite.d.ts

@@ -1,11 +1,43 @@
-export function VuelessUnpluginComponents(options?: unknown): import("vite").Plugin<unknown> & {
-  api: import("unplugin-vue-components/types.js").PublicPluginAPI;
-};
-
-export function Vueless(options?: {
-  env?: string;
-  mode?: string;
-  debug?: boolean;
-  include?: string[];
-  mirrorCacheDir?: string;
-}): never;
+declare module "unplugin-vue-components" {
+  export function VuelessUnpluginComponents(options?: unknown): import("vite").Plugin<unknown> & {
+    api: import("unplugin-vue-components/types.js").PublicPluginAPI;
+  };
+}
+
+declare module "Vueless" {
+  import { Plugin } from "vite";
+  import { Config } from "svgo";
+  function Vueless(options?: {
+    env?: string;
+    mode?: string;
+    debug?: boolean;
+    include?: string[];
+    mirrorCacheDir?: string;
+    svgoConfig?: Config;
+    svgo?: boolean;
+    defaultImport?: "url" | "raw" | "component";
+  }): Plugin;
+  export default Vueless;
+}
+
+declare module "*.svg?component" {
+  import type { FunctionalComponent, SVGAttributes } from "vue";
+  const component: FunctionalComponent<SVGAttributes>;
+  export default component;
+}
+
+declare module "*.svg?url" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.svg?raw" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg?skipsvgo" {
+  import type { FunctionalComponent, SVGAttributes } from "vue";
+  const component: FunctionalComponent<SVGAttributes>;
+  export default component;
+}

package/types.ts

@@ -2,6 +2,14 @@ import { hasSlotContent } from "./composables/useUI.ts";
 
 // TODO: Import all components here
 import UTextDefaultConfig from "./ui.text-block/config.ts";
+import UAlertDefaultConfig from "./ui.text-alert/config.ts";
+import UEmptyDefaultConfig from "./ui.text-empty/config.ts";
+import UFileDefaultConfig from "./ui.text-file/config.ts";
+import UFilesDefaultConfig from "./ui.text-files/config.ts";
+import UMoneyDefaultConfig from "./ui.text-money/config.ts";
+import UHeaderDefaultConfig from "./ui.text-header/config.ts";
+import UNotifyDefaultConfig from "./ui.text-notify/config.ts";
+import UDotDefaultConfig from "./ui.other-dot/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
 import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
 import UCalendarDefaultConfig from "./ui.form-calendar/config.ts";
@@ -115,6 +123,14 @@ export type BrandColors =
 
 export interface Components {
   UText?: Partial<typeof UTextDefaultConfig>;
+  UAlert?: Partial<typeof UAlertDefaultConfig>;
+  UEmpty?: Partial<typeof UEmptyDefaultConfig>;
+  UFile?: Partial<typeof UFileDefaultConfig>;
+  UFiles?: Partial<typeof UFilesDefaultConfig>;
+  UMoney?: Partial<typeof UMoneyDefaultConfig>;
+  UHeader?: Partial<typeof UHeaderDefaultConfig>;
+  UNotify?: Partial<typeof UNotifyDefaultConfig>;
+  UDot?: Partial<typeof UDotDefaultConfig>;
   UButton?: Partial<typeof UButtonDefaultConfig>;
   UBadge?: Partial<typeof UBadgeDefaultConfig>;
   UCalendar?: Partial<typeof UCalendarDefaultConfig>;
@@ -346,19 +362,25 @@ export type ComponentType<T> = T extends new (...args: any) => {}
     ? 2
     : 0;
 
-export type ComponentProps<T> = T extends new (...args: any) => { $props: infer P }
+export type ComponentProps<T> = T extends new (...args: any) => {
+  $props: infer P;
+}
   ? NonNullable<P>
   : T extends (props: infer P, ...args: any) => any
     ? P
     : {};
 
-export type ComponentSlots<T> = T extends new (...args: any) => { $slots: infer S }
+export type ComponentSlots<T> = T extends new (...args: any) => {
+  $slots: infer S;
+}
   ? NonNullable<S>
   : T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }, ...args: any) => any
     ? NonNullable<S>
     : {};
 
-export type ComponentEmit<T> = T extends new (...args: any) => { $emit: infer E }
+export type ComponentEmit<T> = T extends new (...args: any) => {
+  $emit: infer E;
+}
   ? NonNullable<E>
   : {};
 

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">