vueless 0.0.513 → 0.0.514

package/ui.container-col/types.ts

@@ -0,0 +1,54 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UColProps {
+  /**
+   * The distance between nested elements.
+   */
+  gap?: "none" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+
+  /**
+   * Items horizontal align (align-items).
+   */
+  align?: "start" | "end" | "center" | "stretch" | "baseline";
+
+  /**
+   * Items horizontal align for multi-row flex containers (align-content).
+   */
+  content?:
+    | "start"
+    | "end"
+    | "center"
+    | "around"
+    | "evenly"
+    | "between"
+    | "normal"
+    | "stretch"
+    | "baseline";
+
+  /**
+   * Items vertical 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;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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

package/ui.container-divider/UDivider.vue

@@ -1,103 +1,31 @@
-<template>
-  <div :data-test="dataTest" v-bind="wrapperAttrs">
-    <div v-bind="dividerAttrs" />
-    <span v-if="label" v-bind="labelAttrs" v-text="label" />
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { getDefault } from "../utils/ui.ts";
 
-import { UDivider } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Divider label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Divider padding size.
-   * @values xs, sm, md, lg, xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UDivider).size,
-  },
-
-  /**
-   * Divider color.
-   * @values light, default, dark
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UDivider).variant,
-  },
+import { UDivider } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Set padding around the Divider.
-   * @values none, before, after, all
-   */
-  padding: {
-    type: String,
-    default: getDefault(defaultConfig, UDivider).padding,
-  },
+import type { UDividerProps } from "./types.ts";
 
-  /**
-   * Set line dashed.
-   */
-  dashed: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDivider).dashed,
-  },
-
-  /**
-   * Set line dotted.
-   */
-  dotted: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDivider).dotted,
-  },
-
-  /**
-   * Set divider vertically orientated.
-   */
-  vertical: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDivider).vertical,
-  },
-
-  /**
-   * Remove border (keeps only spacings).
-   */
-  noBorder: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDivider).noBorder,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UDividerProps>(), {
+  size: getDefault<UDividerProps>(defaultConfig, UDivider).size,
+  variant: getDefault<UDividerProps>(defaultConfig, UDivider).variant,
+  padding: getDefault<UDividerProps>(defaultConfig, UDivider).padding,
+  dashed: getDefault<UDividerProps>(defaultConfig, UDivider).dashed,
+  dotted: getDefault<UDividerProps>(defaultConfig, UDivider).dotted,
+  vertical: getDefault<UDividerProps>(defaultConfig, UDivider).vertical,
+  noBorder: getDefault<UDividerProps>(defaultConfig, UDivider).noBorder,
+  dataTest: "",
 });
 
 const { wrapperAttrs, dividerAttrs, labelAttrs } = useAttrs(props);
 </script>
+
+<template>
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
+    <div v-bind="dividerAttrs" />
+    <span v-if="label" v-bind="labelAttrs" v-text="label" />
+  </div>
+</template>

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

@@ -3,6 +3,14 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 import URow from "../../ui.container-row/URow.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UDividerProps } from "../types.ts";
+
+interface UDividerArgs extends UDividerProps {
+  slotTemplate?: string;
+  enum: "variant" | "size" | "padding";
+}
+
 /**
  * The `UDivider` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-divider)
  */
@@ -13,9 +21,9 @@ export default {
   argTypes: {
     ...getArgTypes(UDivider.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UDividerArgs> = (args: UDividerArgs) => ({
   components: { UDivider },
   setup() {
     const slots = getSlotNames(UDivider.__name);
@@ -24,17 +32,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDivider v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UDivider>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UDividerArgs> = (args: UDividerArgs, { argTypes }) => ({
   components: { UDivider, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.container-divider/types.ts

@@ -0,0 +1,55 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UDividerProps {
+  /**
+   * Divider label.
+   */
+  label?: string;
+
+  /**
+   * Divider padding size.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Divider color.
+   */
+  variant?: "light" | "default" | "dark";
+
+  /**
+   * Set padding around the Divider.
+   */
+  padding?: "none" | "before" | "after" | "all";
+
+  /**
+   * Set line dashed.
+   */
+  dashed?: boolean;
+
+  /**
+   * Set line dotted.
+   */
+  dotted?: boolean;
+
+  /**
+   * Set divider vertically orientated.
+   */
+  vertical?: boolean;
+
+  /**
+   * Remove border (keeps only spacings).
+   */
+  noBorder?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.container-divider/useAttrs.ts

@@ -0,0 +1,23 @@
+import { computed } from "vue";
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UDividerProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UDividerProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const mutatedProps = computed(() => ({
+    label: Boolean(props.label),
+  }));
+
+  const keysAttrs = getKeysAttrs(mutatedProps);
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.container-group/UGroup.vue

@@ -1,3 +1,34 @@
+<script lang="ts" setup>
+import { getDefault } from "../utils/ui.ts";
+import UDivider from "../ui.container-divider/UDivider.vue";
+import UHeader from "../ui.text-header/UHeader.vue";
+
+import { UGroup } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UGroupProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UGroupProps>(), {
+  gap: getDefault<UGroupProps>(defaultConfig, UGroup).gap,
+  upperlined: getDefault<UGroupProps>(defaultConfig, UGroup).upperlined,
+  underlined: getDefault<UGroupProps>(defaultConfig, UGroup).underlined,
+  dataTest: "",
+});
+
+const {
+  headerAttrs,
+  wrapperAttrs,
+  headerLeftFallbackAttrs,
+  titleAttrs,
+  upperlineAttrs,
+  underlineAttrs,
+  contentAttrs,
+} = useAttrs(props);
+</script>
+
 <template>
   <div v-bind="wrapperAttrs" :data-test="dataTest">
     <template v-if="title">
@@ -30,76 +61,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { getDefault } from "../utils/ui.ts";
-import UDivider from "../ui.container-divider/UDivider.vue";
-import UHeader from "../ui.text-header/UHeader.vue";
-
-import { UGroup } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Group title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * The distance between nested elements.
-   * @values none, xs, sm, md, lg, xl
-   */
-  gap: {
-    type: String,
-    default: getDefault(defaultConfig, UGroup).gap,
-  },
-
-  /**
-   * Show line above the header.
-   */
-  upperlined: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UGroup).upperlined,
-  },
-
-  /**
-   * Show line under the header.
-   */
-  underlined: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UGroup).underlined,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const {
-  headerAttrs,
-  wrapperAttrs,
-  headerLeftFallbackAttrs,
-  titleAttrs,
-  upperlineAttrs,
-  underlineAttrs,
-  contentAttrs,
-} = useAttrs(props);
-</script>

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

@@ -5,6 +5,13 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UInput from "../../ui.form-input/UInput.vue";
 import UButton from "../../ui.button/UButton.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UGroupProps } from "../types.ts";
+
+interface UGroupArgs extends UGroupProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UGroup` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-group)
  */
@@ -25,7 +32,7 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
 const defaultTemplate = `
   <UCol>
@@ -35,7 +42,7 @@ const defaultTemplate = `
   </UCol>
 `;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UGroupArgs> = (args: UGroupArgs) => ({
   components: { UGroup, UCol, UInput, UButton },
   setup() {
     const slots = getSlotNames(UGroup.__name);

package/ui.container-group/types.ts

@@ -0,0 +1,36 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UGroupProps {
+  /**
+   * Group title.
+   */
+  title?: string;
+
+  /**
+   * The distance between nested elements.
+   * @values none, xs, sm, md, lg, xl
+   */
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Show line above the header.
+   */
+  upperlined?: boolean;
+
+  /**
+   * Show line under the header.
+   */
+  underlined?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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