vueless 0.0.512 → 0.0.514

package/package.json

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

package/types.ts

@@ -19,6 +19,15 @@ import UCalendarDefaultConfig from "./ui.form-calendar/config.ts";
 import UDatePickerConfig from "./ui.form-date-picker/config.ts";
 import UDatePickerRangeConfig from "./ui.form-date-picker-range/config.ts";
 import UDataTableConfig from "./ui.data-table/config.ts";
+import UAccordionConfig from "./ui.container-accordion/config.ts";
+import UCardConfig from "./ui.container-card/config.ts";
+import UColConfig from "./ui.container-col/config.ts";
+import UDividerConfig from "./ui.container-divider/config.ts";
+import UGroupConfig from "./ui.container-group/config.ts";
+import UModalConfig from "./ui.container-modal/config.ts";
+import UModalConfirmConfig from "./ui.container-modal-confirm/config.ts";
+import UPageConfig from "./ui.container-page/config.ts";
+import URowConfig from "./ui.container-row/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -143,6 +152,15 @@ export interface Components {
   UDatePicker?: Partial<typeof UDatePickerConfig>;
   UDatePickerRange?: Partial<typeof UDatePickerRangeConfig>;
   UTable?: Partial<typeof UDataTableConfig>;
+  UAccordion?: Partial<typeof UAccordionConfig>;
+  UCard?: Partial<typeof UCardConfig>;
+  UCol?: Partial<typeof UColConfig>;
+  UDivider?: Partial<typeof UDividerConfig>;
+  UGroup?: Partial<typeof UGroupConfig>;
+  UModal?: Partial<typeof UModalConfig>;
+  UModalConfirm?: Partial<typeof UModalConfirmConfig>;
+  UPage?: Partial<typeof UPageConfig>;
+  URow?: Partial<typeof URowConfig>;
 }
 
 export interface Directives {

package/ui.button-link/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { RouteLocationRaw } from "vue-router";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface ULinkProps {
@@ -16,7 +18,7 @@ export interface ULinkProps {
   /**
    * Vue-router route object.
    */
-  to?: object;
+  to?: RouteLocationRaw;
 
   /**
    * Link size.

package/ui.container-accordion/UAccordion.vue

@@ -1,80 +1,21 @@
-<template>
-  <div :data-test="dataTest" v-bind="wrapperAttrs" @click="onClickItem">
-    <div v-bind="bodyAttrs">
-      <div v-bind="titleAttrs">
-        {{ title }}
-        <!--
-          @slot Use it to add something instead of the toggle icon.
-          @binding {string} icon-name
-          @binding {string} icon-size
-          @binding {boolean} opened
-        -->
-        <slot name="toggle" :icon-name="toggleIcon" :icon-size="size" :opened="isOpened">
-          <UIcon :name="toggleIcon" :size="size" color="gray" internal v-bind="toggleIconAttrs" />
-        </slot>
-      </div>
-
-      <div :id="`description-${elementId}`" v-bind="descriptionAttrs" v-text="description" />
-    </div>
-
-    <UDivider :size="dividerSize" v-bind="dividerAttrs" />
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import { UAccordion } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
+import { UAccordion } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-defineOptions({ inheritAttrs: false });
+import type { UAccordionProps } from "./types.ts";
 
-const props = defineProps({
-  /**
-   * Accordion title.
-   */
-  title: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * Accordion description.
-   */
-  description: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * Accordion size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UAccordion).size,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UAccordionProps>(), {
+  size: getDefault<UAccordionProps>(defaultConfig, UAccordion).size,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -101,7 +42,7 @@ const {
 } = useAttrs(props, { isOpened });
 
 const toggleIcon = computed(() =>
-  isOpened.value ? config.value.defaults.collapseIcon : config.value.defaults.expandIcon,
+  isOpened.value ? config.value?.defaults?.collapseIcon : config.value?.defaults?.expandIcon,
 );
 
 const dividerSize = computed(() => {
@@ -120,3 +61,26 @@ function onClickItem() {
   emit("click", elementId, isOpened.value);
 }
 </script>
+
+<template>
+  <div :data-test="dataTest" v-bind="wrapperAttrs" @click="onClickItem">
+    <div v-bind="bodyAttrs">
+      <div v-bind="titleAttrs">
+        {{ title }}
+        <!--
+          @slot Use it to add something instead of the toggle icon.
+          @binding {string} icon-name
+          @binding {string} icon-size
+          @binding {boolean} opened
+        -->
+        <slot name="toggle" :icon-name="toggleIcon" :icon-size="size" :opened="isOpened">
+          <UIcon :name="toggleIcon" :size="size" color="gray" internal v-bind="toggleIconAttrs" />
+        </slot>
+      </div>
+
+      <div :id="`description-${elementId}`" v-bind="descriptionAttrs" v-text="description" />
+    </div>
+
+    <UDivider :size="dividerSize" v-bind="dividerAttrs" />
+  </div>
+</template>

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

@@ -3,6 +3,13 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 import UAccordion from "../../ui.container-accordion/UAccordion.vue";
 import UButton from "../../ui.button/UButton.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UAccordionProps } from "../types.ts";
+
+interface UAccordionArgs extends UAccordionProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UAccordion` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-accordion)
  */
@@ -35,9 +42,9 @@ export default {
   argTypes: {
     ...getArgTypes(UAccordion.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
   components: { UAccordion, UButton },
   setup() {
     const slots = getSlotNames(UAccordion.__name);
@@ -50,7 +57,7 @@ const DefaultTemplate = (args) => ({
       :key="index"
       v-bind="accordion"
     >
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UAccordion>
   `,
 });

package/ui.container-accordion/types.ts

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

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

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

package/ui.container-card/UCard.vue

@@ -1,3 +1,46 @@
+<script lang="ts" setup>
+import { computed, useSlots } from "vue";
+
+import UHeader from "../ui.text-header/UHeader.vue";
+import UDivider from "../ui.container-divider/UDivider.vue";
+
+import useAttrs from "./useAttrs.ts";
+
+import type { UCardProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UCardProps>(), {
+  dataTest: "",
+});
+
+const slots = useSlots();
+
+const isShownHeader = computed(() => {
+  const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
+  const isHeaderRightSlot = hasSlotContent(slots["header-left"]);
+
+  return props.title || isHeaderLeftSlot || isHeaderRightSlot;
+});
+
+const isShownFooter = computed(() => {
+  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
+});
+
+const {
+  hasSlotContent,
+  wrapperAttrs,
+  titleAttrs,
+  dividerAttrs,
+  headerAttrs,
+  headerLeftAttrs,
+  headerLeftFallbackAttrs,
+  descriptionAttrs,
+  contentAttrs,
+  footerAttrs,
+} = useAttrs(props);
+</script>
+
 <template>
   <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div v-if="isShownHeader" v-bind="headerAttrs">
@@ -37,74 +80,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed, useSlots } from "vue";
-
-import UHeader from "../ui.text-header/UHeader.vue";
-import UDivider from "../ui.container-divider/UDivider.vue";
-
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const slots = useSlots();
-
-const props = defineProps({
-  /**
-   * Card title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Card description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const isShownHeader = computed(() => {
-  const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
-  const isHeaderRightSlot = hasSlotContent(slots["header-left"]);
-
-  return props.title || isHeaderLeftSlot || isHeaderRightSlot;
-});
-
-const isShownFooter = computed(() => {
-  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
-});
-
-const {
-  hasSlotContent,
-  wrapperAttrs,
-  titleAttrs,
-  dividerAttrs,
-  headerAttrs,
-  headerLeftAttrs,
-  headerLeftFallbackAttrs,
-  descriptionAttrs,
-  contentAttrs,
-  footerAttrs,
-} = useAttrs(props);
-</script>

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

@@ -6,6 +6,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 { UCardProps } from "../types.ts";
+
+interface UCardArgs extends UCardProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UCard` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-card)
  */
@@ -19,7 +26,7 @@ export default {
   argTypes: {
     ...getArgTypes(UCard.__name),
   },
-};
+} as Meta;
 
 const defaultTemplate = `
   <p>
@@ -34,7 +41,7 @@ const defaultTemplate = `
   </p>
 `;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UCardArgs> = (args: UCardArgs) => ({
   components: { UCard, UButton, UInput, UIcon, UHeader },
   setup() {
     const slots = getSlotNames(UCard.__name);

package/ui.container-card/types.ts

@@ -0,0 +1,25 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UCardProps {
+  /**
+   * Card title.
+   */
+  title?: string;
+
+  /**
+   * Card description.
+   */
+  description?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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

package/ui.container-col/UCol.vue

@@ -1,88 +1,30 @@
-<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 { UCol } 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, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl
-   */
-  gap: {
-    type: String,
-    default: getDefault(defaultConfig, UCol).gap,
-  },
-
-  /**
-   * Items horizontal align (align-items).
-   * @values start, end, center, stretch, baseline
-   */
-  align: {
-    type: String,
-    default: getDefault(defaultConfig, UCol).align,
-  },
+import { UCol } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Items horizontal align for multi-row flex containers (align-content).
-   * @values start, end, center, around, evenly, between, normal, stretch, baseline
-   */
-  content: {
-    type: String,
-    default: getDefault(defaultConfig, UCol).content,
-  },
+import type { UColProps } from "./types.ts";
 
-  /**
-   * Items vertical align (justify-content).
-   * @values start, end, center, around, evenly, between
-   */
-  justify: {
-    type: String,
-    default: getDefault(defaultConfig, UCol).justify,
-  },
-
-  /**
-   * Reverse nested items order.
-   */
-  reverse: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UCol).reverse,
-  },
-
-  /**
-   * Allow items to wrap (flex flex-wrap).
-   */
-  wrap: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UCol).wrap,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UColProps>(), {
+  gap: getDefault<UColProps>(defaultConfig, UCol).gap,
+  align: getDefault<UColProps>(defaultConfig, UCol).align,
+  content: getDefault<UColProps>(defaultConfig, UCol).content,
+  justify: getDefault<UColProps>(defaultConfig, UCol).justify,
+  reverse: getDefault<UColProps>(defaultConfig, UCol).reverse,
+  wrap: getDefault<UColProps>(defaultConfig, UCol).wrap,
+  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-col/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-col/storybook/{stories.js → stories.ts}

@@ -4,6 +4,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 { UColProps } from "../types.ts";
+
+interface UColArgs extends UColProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UCol` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-col)
  */
@@ -22,7 +29,7 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
 const defaultTemplate = `
   <UInput placeholder="Vasyl" label="Name" />
@@ -30,7 +37,7 @@ const defaultTemplate = `
   <UInput placeholder="Kyiv" label="Town" />
 `;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UColArgs> = (args: UColArgs) => ({
   components: { UCol, UInput, UButton },
   setup() {
     const slots = getSlotNames(UCol.__name);