vueless 0.0.513 → 0.0.515

package/ui.container-page/storybook/{stories.js → stories.ts}

@@ -9,6 +9,13 @@ import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UHeader from "../../ui.text-header/UHeader.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UPageProps } from "../types.ts";
+
+interface UPageArgs extends UPageProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UPage` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-page)
  */
@@ -23,7 +30,7 @@ export default {
   argTypes: {
     ...getArgTypes(UPage.__name),
   },
-};
+} as Meta;
 
 const defaultTemplate = `
   <UCard title="Card title">
@@ -35,7 +42,7 @@ const defaultTemplate = `
   </UCard>
 `;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UPageArgs> = (args: UPageArgs) => ({
   components: {
     UPage,
     UCard,

package/ui.container-page/types.ts

@@ -0,0 +1,57 @@
+import defaultConfig from "./config.ts";
+
+import type { RouteLocationRaw } from "vue-router";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UPageProps {
+  /**
+   * Page size (width).
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "wide";
+
+  /**
+   * Page title.
+   */
+  title?: string;
+
+  /**
+   * Page title size.
+   */
+  titleSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+  /**
+   * Set page description.
+   */
+  description?: string;
+
+  /**
+   * Back link vue-router route object.
+   */
+  backTo?: RouteLocationRaw;
+
+  /**
+   * Back link label.
+   */
+  backLabel?: string;
+
+  /**
+   * Sets background light gray (useful if the page contains nested cards).
+   */
+  gray?: boolean;
+
+  /**
+   * Stick right page rounding.
+   */
+  fixedRounding?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.container-page/{useAttrs.js → useAttrs.ts}

@@ -2,10 +2,21 @@ import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 import { isMobileApp } from "../utils/platform.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
-export default function useAttrs(props, { isMobileBreakpoint }) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
+import type { Ref } from "vue";
+import type { UseAttrs } from "../types.ts";
+import type { UPageProps, Config } from "./types.ts";
+
+type ComponentState = {
+  isMobileBreakpoint: Ref<boolean>;
+};
+
+export default function useAttrs(
+  props: UPageProps,
+  { isMobileBreakpoint }: ComponentState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
     defaultConfig,
     () => props.config,
     "wrapper",

package/ui.container-row/URow.vue

@@ -1,96 +1,31 @@
-<template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
-    <!-- @slot Use it to add something inside. -->
-    <slot />
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { getDefault } from "../utils/ui.ts";
 
-import { URow } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * The distance between nested elements.
-   * @values none, 2xs, xs, sm, md, lg, xl, 2xl
-   */
-  gap: {
-    type: String,
-    default: getDefault(defaultConfig, URow).gap,
-  },
-
-  /**
-   * Items vertical align (align-items).
-   * @values start, end, center, stretch, baseline
-   */
-  align: {
-    type: String,
-    default: getDefault(defaultConfig, URow).align,
-  },
-
-  /**
-   * Items vertical align for multi-row flex containers (align-content).
-   * @values start, end, center, around, evenly, between, normal, stretch, baseline
-   */
-  content: {
-    type: String,
-    default: getDefault(defaultConfig, URow).content,
-  },
+import { URow } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Items horizontally align (justify-content).
-   * @values start, end, center, around, evenly, between
-   */
-  justify: {
-    type: String,
-    default: getDefault(defaultConfig, URow).justify,
-  },
+import type { URowProps } from "./types.ts";
 
-  /**
-   * Reverse nested items order.
-   */
-  reverse: {
-    type: Boolean,
-    default: getDefault(defaultConfig, URow).reverse,
-  },
-
-  /**
-   * Allow items to wrap (flex flex-wrap).
-   */
-  wrap: {
-    type: Boolean,
-    default: getDefault(defaultConfig, URow).wrap,
-  },
-
-  /**
-   * Disables mobile adaptivity.
-   */
-  noMobile: {
-    type: Boolean,
-    default: getDefault(defaultConfig, URow).noMobile,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<URowProps>(), {
+  gap: getDefault<URowProps>(defaultConfig, URow).gap,
+  align: getDefault<URowProps>(defaultConfig, URow).align,
+  content: getDefault<URowProps>(defaultConfig, URow).content,
+  justify: getDefault<URowProps>(defaultConfig, URow).justify,
+  reverse: getDefault<URowProps>(defaultConfig, URow).reverse,
+  wrap: getDefault<URowProps>(defaultConfig, URow).wrap,
+  noMobile: getDefault<URowProps>(defaultConfig, URow).noMobile,
+  dataTest: "",
 });
 
 const { wrapperAttrs } = useAttrs(props);
 </script>
+
+<template>
+  <div v-bind="wrapperAttrs" :data-test="dataTest">
+    <!-- @slot Use it to add something inside. -->
+    <slot />
+  </div>
+</template>

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

@@ -5,6 +5,14 @@ import UInput from "../../ui.form-input/UInput.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { URowProps } from "../types.ts";
+
+interface URowArgs extends URowProps {
+  slotTemplate?: string;
+  enum: "gap" | "align";
+}
+
 /**
  * The `URow` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-row)
  */
@@ -15,14 +23,14 @@ export default {
   argTypes: {
     ...getArgTypes(URow.__name),
   },
-};
+} as Meta;
 
 const defaultTemplate = `
   <UInput label="Name" />
   <UButton label="Submit" size="xs" block />
 `;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<URowArgs> = (args: URowArgs) => ({
   components: { URow, UInput, UButton },
   setup() {
     const slots = getSlotNames(URow.__name);
@@ -36,7 +44,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<URowArgs> = (args: URowArgs, { argTypes }) => ({
   components: { UCol, URow, UInput, UButton },
   setup() {
     const isGapEnum = argTypes[args.enum].name === "gap";

package/ui.container-row/types.ts

@@ -0,0 +1,59 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface URowProps {
+  /**
+   * The distance between nested elements.
+   */
+  gap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+  /**
+   * Items vertical align (align-items).
+   */
+  align?: "start" | "end" | "center" | "stretch" | "baseline";
+
+  /**
+   * Items vertical align for multi-row flex containers (align-content).
+   */
+  content?:
+    | "start"
+    | "end"
+    | "center"
+    | "around"
+    | "evenly"
+    | "between"
+    | "normal"
+    | "stretch"
+    | "baseline";
+
+  /**
+   * Items horizontally align (justify-content).
+   */
+  justify?: "start" | "end" | "center" | "around" | "evenly" | "between";
+
+  /**
+   * Reverse nested items order.
+   */
+  reverse?: boolean;
+
+  /**
+   * Allow items to wrap (flex flex-wrap).
+   */
+  wrap?: boolean;
+
+  /**
+   * Disables mobile adaptivity.
+   */
+  noMobile?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -1,3 +1,73 @@
+<script lang="ts" setup>
+import { nextTick, ref, useId } from "vue";
+
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UBadge from "../ui.text-badge/UBadge.vue";
+import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
+
+import { getDefault } from "../utils/ui.ts";
+
+import { vClickOutside } from "../directives";
+
+import defaultConfig from "./config.ts";
+import { UDropdownBadge } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UDropdownBadgeProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UDropdownBadgeProps>(), {
+  labelKey: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).labelKey,
+  variant: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).variant,
+  color: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).color,
+  size: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).size,
+  round: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).round,
+  noIcon: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).noIcon,
+  yPosition: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).yPosition,
+  xPosition: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).xPosition,
+  dataTest: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers on dropdown option click.
+   * @property {string} value
+   */
+  "clickOption",
+]);
+
+const isShownOptions = ref(false);
+const dropdownListRef = ref(null);
+
+const elementId = props.id || useId();
+
+const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
+  props,
+  {
+    isShownOptions,
+  },
+);
+
+function onClickBadge() {
+  isShownOptions.value = !isShownOptions.value;
+
+  if (isShownOptions.value) {
+    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+  }
+}
+
+function hideOptions() {
+  isShownOptions.value = false;
+}
+
+function onClickOption(option) {
+  emit("clickOption", option);
+
+  hideOptions();
+}
+</script>
+
 <template>
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <UBadge
@@ -61,170 +131,3 @@
     />
   </div>
 </template>
-
-<script setup>
-import { nextTick, ref, useId } from "vue";
-
-import UIcon from "../ui.image-icon/UIcon.vue";
-import UBadge from "../ui.text-badge/UBadge.vue";
-import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
-
-import { getDefault } from "../utils/ui.ts";
-
-import { vClickOutside } from "../directives";
-
-import defaultConfig from "./config.js";
-import { UDropdownBadge } from "./constants.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Badge label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).labelKey,
-  },
-
-  /**
-   * Badge variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).variant,
-  },
-
-  /**
-   * Badge 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, UDropdownBadge).color,
-  },
-
-  /**
-   * Badge size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).size,
-  },
-
-  /**
-   * Set badge corners rounded.
-   */
-  round: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownBadge).round,
-  },
-
-  /**
-   * Hide dropdown icon.
-   */
-  noIcon: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownBadge).noIcon,
-  },
-
-  /**
-   * The position of dropdown list on the y-axis.
-   * @values top, bottom
-   */
-  yPosition: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).yPosition,
-  },
-
-  /**
-   * The position of dropdown list on the x-axis.
-   * @values left, right
-   */
-  xPosition: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).xPosition,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers on dropdown option click.
-   * @property {string} value
-   */
-  "clickOption",
-]);
-
-const isShownOptions = ref(false);
-const dropdownListRef = ref(null);
-
-const elementId = props.id || useId();
-
-const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
-  props,
-  {
-    isShownOptions,
-  },
-);
-
-function onClickBadge() {
-  isShownOptions.value = !isShownOptions.value;
-
-  if (isShownOptions.value) {
-    nextTick(() => dropdownListRef.value.wrapperRef.focus());
-  }
-}
-
-function hideOptions() {
-  isShownOptions.value = false;
-}
-
-function onClickOption(option) {
-  emit("clickOption", option);
-
-  hideOptions();
-}
-</script>

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

@@ -4,6 +4,14 @@ import UDropdownBadge from "../../ui.dropdown-badge/UDropdownBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UDropdownBadgeProps } from "../types.ts";
+
+interface UDropdownBadgeArgs extends UDropdownBadgeProps {
+  slotTemplate?: string;
+  enum: "color" | "size";
+}
+
 /**
  * The `UDropdownBadge` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.dropdown-badge)
  */
@@ -25,9 +33,9 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UDropdownBadgeArgs> = (args: UDropdownBadgeArgs) => ({
   components: { UDropdownBadge, UIcon },
   setup() {
     const slots = getSlotNames(UDropdownBadge.__name);
@@ -38,17 +46,20 @@ const DefaultTemplate = (args) => ({
     <UDropdownBadge
       v-bind="args"
     >
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UDropdownBadge>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UDropdownBadgeArgs> = (
+  args: UDropdownBadgeArgs,
+  { argTypes },
+) => ({
   components: { UDropdownBadge, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `