vueless 0.0.503 → 0.0.504

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.

package/ui.text-block/useAttrs.ts

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

package/ui.text-empty/UEmpty.vue

@@ -1,87 +1,21 @@
-<template>
-  <div :data-test="dataTest" v-bind="wrapperAttrs">
-    <div v-bind="headerAttrs">
-      <!-- @slot Use it to add something to the header. -->
-      <slot name="header">
-        <div v-bind="emptyIconWrapperAttrs">
-          <UIcon
-            internal
-            :name="config.defaults.emptyIcon"
-            color="gray"
-            :size="iconSize"
-            v-bind="emptyIconAttrs"
-          />
-        </div>
-      </slot>
-    </div>
-
-    <!-- @slot Use it to add something inside. -->
-    <slot>
-      <UHeader v-if="title" :label="title" :size="titleSize" v-bind="titleAttrs" />
-      <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
-    </slot>
-
-    <div v-bind="footerAttrs">
-      <!-- @slot Use it to add something to the footer. -->
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import { UEmpty } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Empty state title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
+import { UEmpty } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Empty state description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
+import type { UEmptyProps } from "./types.ts";
 
-  /**
-   * Empty state size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UEmpty).size,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UEmptyProps>(), {
+  size: getDefault<UEmptyProps>(defaultConfig, UEmpty).size,
+  dataTest: "",
 });
 
 const {
@@ -115,3 +49,33 @@ const titleSize = computed(() => {
   return sizes[props.size];
 });
 </script>
+
+<template>
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
+    <div v-bind="headerAttrs">
+      <!-- @slot Use it to add something to the header. -->
+      <slot name="header">
+        <div v-bind="emptyIconWrapperAttrs">
+          <UIcon
+            internal
+            :name="config.defaults.emptyIcon"
+            color="gray"
+            :size="iconSize"
+            v-bind="emptyIconAttrs"
+          />
+        </div>
+      </slot>
+    </div>
+
+    <!-- @slot Use it to add something inside. -->
+    <slot>
+      <UHeader v-if="title" :label="title" :size="titleSize" v-bind="titleAttrs" />
+      <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
+    </slot>
+
+    <div v-bind="footerAttrs">
+      <!-- @slot Use it to add something to the footer. -->
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

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

@@ -5,6 +5,14 @@ import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UEmptyProps } from "../types.ts";
+
+interface UEmptyArgs extends UEmptyProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
 /**
  * The `UEmpty` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-empty)
  */
@@ -14,14 +22,14 @@ export default {
   component: UEmpty,
   args: {
     title: "No contacts",
-    description: "There is no contacts in the list.",
+    description: "There are no contacts in the list.",
   },
   argTypes: {
     ...getArgTypes(UEmpty.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UEmptyArgs> = (args: UEmptyArgs) => ({
   components: { UEmpty, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UEmpty.__name);
@@ -30,17 +38,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UEmpty v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UEmpty>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UEmptyArgs> = (args: UEmptyArgs, { argTypes }) => ({
   components: { UEmpty, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.text-empty/types.ts

@@ -0,0 +1,30 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UEmptyProps {
+  /**
+   * Empty state title.
+   */
+  title?: string;
+
+  /**
+   * Empty state description.
+   */
+  description?: string;
+
+  /**
+   * Empty state size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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

package/ui.text-file/UFile.vue

@@ -1,44 +1,4 @@
-<template>
-  <ULink :href="url" no-ring v-bind="fileAttrs" :data-test="dataTest">
-    <slot name="left" :file="{ elementId, label, url, imageUrl }" />
-
-    <slot :file="{ elementId, label, url, imageUrl }">
-      <div v-bind="bodyAttrs">
-        <img v-if="imageUrl" :alt="label" :src="imageUrl" v-bind="fileImageAttrs" />
-
-        <UIcon
-          v-else
-          internal
-          interactive
-          color="gray"
-          :size="iconSize"
-          :name="config.defaults.fileIcon"
-          v-bind="fileIconAttrs"
-          @focus="onFocus"
-          @blur="onBlur"
-        />
-
-        <ULink :label="label" :size="size" color="gray" dashed no-ring v-bind="fileLabelAttrs" />
-      </div>
-    </slot>
-
-    <slot name="right" :file="{ elementId, label, url, imageUrl }">
-      <UIcon
-        v-if="removable"
-        internal
-        interactive
-        color="gray"
-        :size="removeIconSize"
-        :name="config.defaults.removeIcon"
-        v-bind="removeIconAttrs"
-        :data-test="`${dataTest}-remove-item`"
-        @click.stop.prevent="onRemove"
-      />
-    </slot>
-  </ULink>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, useId } from "vue";
 
 import ULink from "../ui.button-link/ULink.vue";
@@ -46,77 +6,17 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 
 import { getDefault } from "../utils/ui.ts";
 
-import useAttrs from "./useAttrs.js";
-import { UFile } from "./constants.js";
-import defaultConfig from "./config.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * File url.
-   */
-  url: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Image url.
-   */
-  imageUrl: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * File label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * File size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UFile).size,
-  },
+import useAttrs from "./useAttrs.ts";
+import { UFile } from "./constants.ts";
+import defaultConfig from "./config.ts";
 
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Show remove button.
-   */
-  removable: {
-    type: Boolean,
-    default: false,
-  },
+import type { UFileProps } 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<UFileProps>(), {
+  size: getDefault<UFileProps>(defaultConfig, UFile).size,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -173,3 +73,43 @@ function onBlur() {
   focus.value = false;
 }
 </script>
+
+<template>
+  <ULink :href="url" no-ring v-bind="fileAttrs" :data-test="dataTest">
+    <slot name="left" :file="{ elementId, label, url, imageUrl }" />
+
+    <slot :file="{ elementId, label, url, imageUrl }">
+      <div v-bind="bodyAttrs">
+        <img v-if="imageUrl" :alt="label" :src="imageUrl" v-bind="fileImageAttrs" />
+
+        <UIcon
+          v-else
+          internal
+          interactive
+          color="gray"
+          :size="iconSize"
+          :name="config.defaults.fileIcon"
+          v-bind="fileIconAttrs"
+          @focus="onFocus"
+          @blur="onBlur"
+        />
+
+        <ULink :label="label" :size="size" color="gray" dashed no-ring v-bind="fileLabelAttrs" />
+      </div>
+    </slot>
+
+    <slot name="right" :file="{ elementId, label, url, imageUrl }">
+      <UIcon
+        v-if="removable"
+        internal
+        interactive
+        color="gray"
+        :size="removeIconSize"
+        :name="config.defaults.removeIcon"
+        v-bind="removeIconAttrs"
+        :data-test="`${dataTest}-remove-item`"
+        @click.stop.prevent="onRemove"
+      />
+    </slot>
+  </ULink>
+</template>

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

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