vueless 1.1.1-beta.9 → 1.2.0

package/types.ts

@@ -1,66 +1,66 @@
-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 UHeaderDefaultConfig from "./ui.text-header/config.ts";
-import UNotifyDefaultConfig from "./ui.text-notify/config.ts";
-import UNumberDefaultConfig from "./ui.text-number/config.ts";
-import UDotDefaultConfig from "./ui.other-dot/config.ts";
-import UChipDefaultConfig from "./ui.other-chip/config.ts";
-import UButtonDefaultConfig from "./ui.button/config.ts";
-import ULinkDefaultConfig from "./ui.button-link/config.ts";
-import UToggleDefaultConfig from "./ui.button-toggle/config.ts";
-import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
-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 UDropdownBadgeConfig from "./ui.dropdown-badge/config.ts";
-import UDropdownButtonConfig from "./ui.dropdown-button/config.ts";
-import UDropdownLinkConfig from "./ui.dropdown-link/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 ULoaderConfig from "./ui.loader/config.ts";
-import ULoaderOverlayConfig from "./ui.loader-overlay/config.ts";
-import ULoaderProgressConfig from "./ui.loader-progress/config.ts";
-import UPaginationConfig from "./ui.navigation-pagination/config.ts";
-import UProgressConfig from "./ui.navigation-progress/config.ts";
-import UTabConfig from "./ui.navigation-tab/config.ts";
-import UTabsConfig from "./ui.navigation-tabs/config.ts";
-import UBreadcrumbsConfig from "./ui.navigation-breadcrumbs/config.ts";
-import UAvatarConfig from "./ui.image-avatar/config.ts";
-import UIconConfig from "./ui.image-icon/config.ts";
-import UCheckboxConfig from "./ui.form-checkbox/config.ts";
-import UCheckboxGroupConfig from "./ui.form-checkbox-group/config.ts";
-import UCheckboxMultiStateConfig from "./ui.form-checkbox-multi-state/config.ts";
-import URadioConfig from "./ui.form-radio/config.ts";
-import URadioGroupConfig from "./ui.form-radio-group/config.ts";
-import USwitchConfig from "./ui.form-switch/config.ts";
-import UTextareaConfig from "./ui.form-textarea/config.ts";
-import ULabelConfig from "./ui.form-label/config.ts";
-import UColorPickerConfig from "./ui.other-theme-color-toggle/config.ts";
-import UInputConfig from "./ui.form-input/config.ts";
-import UInputCounterConfig from "./ui.form-input-counter/config.ts";
-import UInputPasswordConfig from "./ui.form-input-password/config.ts";
-import UInputRatingConfig from "./ui.form-input-rating/config.ts";
-import UInputSearchConfig from "./ui.form-input-search/config.ts";
-import UInputFileConfig from "./ui.form-input-file/config.ts";
-import UInputNumberConfig from "./ui.form-input-number/config.ts";
-import UDataListConfig from "./ui.data-list/config.ts";
-import USelectConfig from "./ui.form-select/config.ts";
-import UListboxConfig from "./ui.form-listbox/config.ts";
+import UTextDefaultConfig from "./ui.text-block/config";
+import UAlertDefaultConfig from "./ui.text-alert/config";
+import UEmptyDefaultConfig from "./ui.text-empty/config";
+import UFileDefaultConfig from "./ui.text-file/config";
+import UFilesDefaultConfig from "./ui.text-files/config";
+import UHeaderDefaultConfig from "./ui.text-header/config";
+import UNotifyDefaultConfig from "./ui.text-notify/config";
+import UNumberDefaultConfig from "./ui.text-number/config";
+import UDotDefaultConfig from "./ui.other-dot/config";
+import UChipDefaultConfig from "./ui.other-chip/config";
+import UButtonDefaultConfig from "./ui.button/config";
+import ULinkDefaultConfig from "./ui.button-link/config";
+import UToggleDefaultConfig from "./ui.button-toggle/config";
+import UBadgeDefaultConfig from "./ui.text-badge/config";
+import UCalendarDefaultConfig from "./ui.form-calendar/config";
+import UDatePickerConfig from "./ui.form-date-picker/config";
+import UDatePickerRangeConfig from "./ui.form-date-picker-range/config";
+import UDataTableConfig from "./ui.data-table/config";
+import UDropdownBadgeConfig from "./ui.dropdown-badge/config";
+import UDropdownButtonConfig from "./ui.dropdown-button/config";
+import UDropdownLinkConfig from "./ui.dropdown-link/config";
+import UAccordionConfig from "./ui.container-accordion/config";
+import UCardConfig from "./ui.container-card/config";
+import UColConfig from "./ui.container-col/config";
+import UDividerConfig from "./ui.container-divider/config";
+import UGroupConfig from "./ui.container-group/config";
+import UModalConfig from "./ui.container-modal/config";
+import UModalConfirmConfig from "./ui.container-modal-confirm/config";
+import UPageConfig from "./ui.container-page/config";
+import URowConfig from "./ui.container-row/config";
+import ULoaderConfig from "./ui.loader/config";
+import ULoaderOverlayConfig from "./ui.loader-overlay/config";
+import ULoaderProgressConfig from "./ui.loader-progress/config";
+import UPaginationConfig from "./ui.navigation-pagination/config";
+import UProgressConfig from "./ui.navigation-progress/config";
+import UTabConfig from "./ui.navigation-tab/config";
+import UTabsConfig from "./ui.navigation-tabs/config";
+import UBreadcrumbsConfig from "./ui.navigation-breadcrumbs/config";
+import UAvatarConfig from "./ui.image-avatar/config";
+import UIconConfig from "./ui.image-icon/config";
+import UCheckboxConfig from "./ui.form-checkbox/config";
+import UCheckboxGroupConfig from "./ui.form-checkbox-group/config";
+import UCheckboxMultiStateConfig from "./ui.form-checkbox-multi-state/config";
+import URadioConfig from "./ui.form-radio/config";
+import URadioGroupConfig from "./ui.form-radio-group/config";
+import USwitchConfig from "./ui.form-switch/config";
+import UTextareaConfig from "./ui.form-textarea/config";
+import ULabelConfig from "./ui.form-label/config";
+import UColorPickerConfig from "./ui.other-theme-color-toggle/config";
+import UInputConfig from "./ui.form-input/config";
+import UInputCounterConfig from "./ui.form-input-counter/config";
+import UInputPasswordConfig from "./ui.form-input-password/config";
+import UInputRatingConfig from "./ui.form-input-rating/config";
+import UInputSearchConfig from "./ui.form-input-search/config";
+import UInputFileConfig from "./ui.form-input-file/config";
+import UInputNumberConfig from "./ui.form-input-number/config";
+import UDataListConfig from "./ui.data-list/config";
+import USelectConfig from "./ui.form-select/config";
+import UListboxConfig from "./ui.form-listbox/config";
 
 import type { Props } from "tippy.js";
 import type { Config as TailwindConfig } from "tailwindcss";
-import type { ComputedRef, Ref, ComponentInternalInstance } from "vue";
+import type { ComputedRef, Ref, ComponentInternalInstance, TransitionProps } from "vue";
 
 export enum ColorMode {
   Dark = "dark",
@@ -101,17 +101,17 @@ export interface ThemeConfig {
   /**
    * Default components font size.
    */
-  text?: number | ThemeConfigText;
+  text?: number | Partial<ThemeConfigText>;
 
   /**
    * Default components rounding (border-radius).
    */
-  rounding?: number | ThemeConfigRounding;
+  rounding?: number | Partial<ThemeConfigRounding>;
 
   /**
    * Default components outline width.
    */
-  outline?: number | ThemeConfigOutline;
+  outline?: number | Partial<ThemeConfigOutline>;
 
   /**
    * Default components opacity for disabled state (in percents).
@@ -220,6 +220,7 @@ export type PrimaryColors =
 
 export interface Directives {
   tooltip?: Partial<Props>;
+  clickOutside?: Partial<Props>;
 }
 
 export interface Components {
@@ -289,7 +290,7 @@ export interface Components {
 export type ComponentConfig<T> = Partial<{
   [K in keyof T]: K extends string
     ? K extends `${string}transition${string}` | `${string}Transition${string}`
-      ? Transition
+      ? TransitionProps
       : K extends "i18n"
         ? T[K]
         : T[K] | string | UnknownObject
@@ -304,20 +305,11 @@ export interface NestedComponent {
   [key: string]: Record<string, string | UnknownObject> | string | undefined;
 }
 
-export type Defaults = {
+export type ComponentDefaults = {
   color?: string;
   [key: string]: unknown | UnknownObject;
 };
 
-export interface Transition {
-  enterFromClass?: string;
-  enterActiveClass?: string;
-  enterToClass?: string;
-  leaveFromClass?: string;
-  leaveActiveClass?: string;
-  leaveToClass?: string;
-}
-
 export interface CVA {
   base?: string;
   variants?: UnknownObject;

package/ui.boilerplate/UBoilerplate.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
 
-import defaultConfig from "./config.ts";
-import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config";
+import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types.ts";
+import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 

package/ui.boilerplate/storybook/{docs.hidden.mdx → docs.mdx}

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.hidden.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.boilerplate/storybook/{stories.hidden.ts → stories.ts}

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook";
 
 import UBoilerplate from "../UBoilerplate.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UBoilerplateArgs extends Props {
   slotTemplate?: string;

package/ui.boilerplate/tests/UBoilerplate.test.ts

@@ -2,7 +2,7 @@ import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
 import UBoilerplate from "../UBoilerplate.vue";
-import defaultConfig from "../config.ts";
+import defaultConfig from "../config";
 
 describe("UBoilerplate.vue", () => {
   describe("Props", () => {

package/ui.boilerplate/types.ts

@@ -1,5 +1,5 @@
-import defaultConfig from "./config.ts";
-import type { ComponentConfig } from "../types.ts";
+import defaultConfig from "./config";
+import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 

package/ui.button/UButton.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect, useId, watch, useSlots, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI.ts";
-import { hasSlotContent } from "../utils/helper.ts";
-import { getDefaults } from "../utils/ui.ts";
+import useUI from "../composables/useUI";
+import { hasSlotContent } from "../utils/helper";
+import { getDefaults } from "../utils/ui";
 
 import ULoader from "../ui.loader/ULoader.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
-import defaultConfig from "./config.ts";
-import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config";
+import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types.ts";
+import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 

package/ui.button/storybook/docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.button/storybook/stories.ts

@@ -4,7 +4,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import { ref } from "vue";
 
@@ -16,7 +16,7 @@ import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UButtonArgs extends Props {
   slotTemplate?: string;

package/ui.button/tests/UButton.test.ts

@@ -5,7 +5,7 @@ import UButton from "../UButton.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 describe("UButton.vue", () => {
   describe("Props", () => {

package/ui.button/types.ts

@@ -1,5 +1,5 @@
-import defaultConfig from "./config.ts";
-import type { ComponentConfig } from "../types.ts";
+import defaultConfig from "./config";
+import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 

package/ui.button-link/ULink.vue

@@ -2,14 +2,14 @@
 import { computed, useSlots, useTemplateRef } from "vue";
 import { RouterLink } from "vue-router";
 
-import useUI from "../composables/useUI.ts";
-import { hasSlotContent } from "../utils/helper.ts";
-import { getDefaults } from "../utils/ui.ts";
+import useUI from "../composables/useUI";
+import { hasSlotContent } from "../utils/helper";
+import { getDefaults } from "../utils/ui";
 
-import defaultConfig from "./config.ts";
-import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config";
+import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config, ULinkSlotProps } from "./types.ts";
+import type { Props, Config, ULinkSlotProps } from "./types";
 
 defineOptions({ inheritAttrs: false });
 

package/ui.button-link/storybook/docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.button-link/storybook/stories.ts

@@ -4,7 +4,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import ULink from "../../ui.button-link/ULink.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -12,7 +12,7 @@ import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface ULinkArgs extends Props {
   slotTemplate?: string;
@@ -20,7 +20,7 @@ interface ULinkArgs extends Props {
 }
 
 export default {
-  id: "1060",
+  id: "1020",
   title: "Buttons & Links / Link",
   component: ULink,
   args: {

package/ui.button-link/tests/ULink.test.ts

@@ -4,7 +4,7 @@ import { createRouter, createWebHistory } from "vue-router";
 
 import ULink from "../ULink.vue";
 
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 const router = createRouter({
   history: createWebHistory(),

package/ui.button-link/types.ts

@@ -1,5 +1,5 @@
-import defaultConfig from "./config.ts";
-import type { ComponentConfig } from "../types.ts";
+import defaultConfig from "./config";
+import type { ComponentConfig } from "../types";
 
 import type { RouteLocationRaw } from "vue-router";
 

package/ui.button-toggle/UToggle.vue

@@ -3,13 +3,13 @@ import { computed, ref, useId, useTemplateRef } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
 
-import defaultConfig from "./config.ts";
-import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config";
+import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config, UToggleOption } from "./types.ts";
+import type { Props, Config, UToggleOption } from "./types";
 
 defineOptions({ inheritAttrs: false });
 

package/ui.button-toggle/storybook/docs.mdx

@@ -1,8 +1,8 @@
 import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.button-toggle/storybook/stories.ts

@@ -5,7 +5,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UToggle from "../../ui.button-toggle/UToggle.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -15,7 +15,7 @@ import UDot from "../../ui.other-dot/UDot.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UToggleArgs extends Props {
   slotTemplate?: string;
@@ -23,9 +23,10 @@ interface UToggleArgs extends Props {
 }
 
 export default {
-  components: { UIcon },
+  id: "1030",
   title: "Buttons & Links / Toggle",
   component: UToggle,
+  components: { UIcon },
   args: {
     modelValue: "11",
     options: [

package/ui.button-toggle/tests/UToggle.test.ts

@@ -4,7 +4,7 @@ import { describe, it, expect, vi, beforeAll } from "vitest";
 import UToggle from "../UToggle.vue";
 import UButton from "../../ui.button/UButton.vue";
 
-import type { Props, UToggleOption } from "../types.ts";
+import type { Props, UToggleOption } from "../types";
 
 describe("UToggle.vue", () => {
   let name: string;

package/ui.button-toggle/types.ts

@@ -1,6 +1,6 @@
-import defaultConfig from "./config.ts";
+import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types.ts";
+import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 

package/ui.container-accordion/UAccordion.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { computed, ref, useId, useTemplateRef } from "vue";
+import { computed, ref, useId, useSlots, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+import { hasSlotContent } from "../utils/helper";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
-import { COMPONENT_NAME } from "./constants.ts";
-import defaultConfig from "./config.ts";
+import { COMPONENT_NAME } from "./constants";
+import defaultConfig from "./config";
 
-import type { Props, Config } from "./types.ts";
+import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -28,9 +29,11 @@ const emit = defineEmits([
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const contentRef = useTemplateRef<HTMLDivElement>("content");
 
 const isOpened = ref(false);
 
+const slots = useSlots();
 const elementId = props.id || useId();
 
 const toggleIconName = computed(() => {
@@ -41,7 +44,11 @@ const toggleIconName = computed(() => {
   return props.toggleIcon ? config.value.defaults.toggleIcon : "";
 });
 
-function onClickItem() {
+function onClickItem(event: MouseEvent) {
+  if (contentRef.value && contentRef.value.contains(event.target as Node)) {
+    return;
+  }
+
   isOpened.value = !isOpened.value;
 
   emit("click", elementId, isOpened.value);
@@ -94,9 +101,14 @@ const {
         </slot>
       </div>
 
-      <div :id="`description-${elementId}`" v-bind="descriptionAttrs" v-text="description" />
+      <div
+        v-if="description"
+        :id="`description-${elementId}`"
+        v-bind="descriptionAttrs"
+        v-text="description"
+      />
 
-      <div v-if="isOpened" v-bind="contentAttrs">
+      <div v-if="isOpened && hasSlotContent(slots['default'])" ref="content" v-bind="contentAttrs">
         <!-- @slot Use it to add accordion content. -->
         <slot />
       </div>

package/ui.container-accordion/config.ts

@@ -24,7 +24,7 @@ export default /*tw*/ {
       },
     },
   },
-  content: "",
+  content: "pt-3 cursor-default",
   toggleIcon: {
     base: "{UIcon} transition duration-300",
     variants: {

package/ui.container-accordion/storybook/docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.container-accordion/storybook/stories.ts

@@ -5,15 +5,17 @@ import {
   getSlotsFragment,
   getDocsDescription,
   trimText,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UAccordion from "../../ui.container-accordion/UAccordion.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UAccordionArgs extends Props {
   slotTemplate?: string;
@@ -42,7 +44,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
-  components: { UAccordion, ULink, UButton, UCol },
+  components: { UAccordion, ULink, UButton, UCol, URow, UIcon },
   setup: () => ({ args, slots: getSlotNames(UAccordion.__name) }),
   template: `
     <UAccordion v-bind="args">
@@ -116,13 +118,23 @@ Sizes.args = { enum: "size", description: "{enumValue}" };
 
 export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
-  description: "",
   slotTemplate: `
     <template #default>
       <UCol gap="sm">
-        <ULink label="Email services" />
-        <ULink label="VPN" />
-        <ULink label="SEO Tools" />
+        <URow gap="xs" align="end">
+          <UIcon name="contact_mail" size="xs" color="primary" />
+          <ULink label="Email services" />
+        </URow>
+
+        <URow gap="xs" align="end">
+          <UIcon name="vpn_key" size="xs" color="primary" />
+          <ULink label="VPN" />
+        </URow>
+
+        <URow gap="xs" align="end">
+          <UIcon name="web_traffic" size="xs" color="primary" />
+          <ULink label="SEO Tools" />
+        </URow>
       </UCol>
     </template>
   `,