vueless 1.1.1-beta.8 → 1.2.0

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

@@ -5,14 +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;
@@ -41,7 +44,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
-  components: { UAccordion, ULink },
+  components: { UAccordion, ULink, UButton, UCol, URow, UIcon },
   setup: () => ({ args, slots: getSlotNames(UAccordion.__name) }),
   template: `
     <UAccordion v-bind="args">
@@ -113,6 +116,30 @@ Accordions.args = {};
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", description: "{enumValue}" };
 
+export const DefaultSlot = DefaultTemplate.bind({});
+DefaultSlot.args = {
+  slotTemplate: `
+    <template #default>
+      <UCol gap="sm">
+        <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>
+  `,
+};
+
 export const ToggleSlot = DefaultTemplate.bind({});
 ToggleSlot.args = {
   slotTemplate: `

package/ui.container-accordion/tests/UAccordion.test.ts

@@ -4,7 +4,7 @@ import { describe, it, expect } from "vitest";
 import UAccordion from "../UAccordion.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 describe("UAccordion", () => {
   // Props
@@ -82,10 +82,12 @@ describe("UAccordion", () => {
     // ID prop
     it("uses provided id prop", () => {
       const id = "custom-id";
+      const description = "some text";
 
       const component = mount(UAccordion, {
         props: {
           id,
+          description,
         },
       });
 
@@ -173,6 +175,50 @@ describe("UAccordion", () => {
 
       expect(toggleElement.attributes("data-opened")).toBe("true");
     });
+
+    // Default slot
+    it("renders default slot content when accordion is opened", async () => {
+      const slotContent = "Custom accordion content";
+      const slotClass = "custom-content";
+
+      const component = mount(UAccordion, {
+        slots: {
+          default: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(false);
+
+      await component.trigger("click");
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+
+      await component.trigger("click");
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(false);
+    });
+
+    it("does not render default slot content when accordion is closed", () => {
+      const slotContent = "Custom accordion content";
+      const slotClass = "custom-content";
+
+      const component = mount(UAccordion, {
+        slots: {
+          default: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(false);
+    });
+
+    it("does not render content wrapper when default slot is empty", async () => {
+      const component = mount(UAccordion);
+
+      await component.trigger("click");
+
+      expect(component.find("[vl-key='content']").exists()).toBe(false);
+    });
   });
 
   // Events

package/ui.container-accordion/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.container-card/UCard.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed, 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 UHeader from "../ui.text-header/UHeader.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.container-card/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-card/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UCard from "../../ui.container-card/UCard.vue";
 import UButton from "../../ui.button/UButton.vue";
@@ -19,7 +19,7 @@ import USwitch from "../../ui.form-switch/USwitch.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UCardArgs extends Props {
   slotTemplate?: string;

package/ui.container-card/tests/UCard.test.ts

@@ -4,7 +4,7 @@ import { describe, it, expect } from "vitest";
 import UCard from "../UCard.vue";
 import UHeader from "../../ui.text-header/UHeader.vue";
 
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 describe("UCard", () => {
   // Props

package/ui.container-card/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.container-col/UCol.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { 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 { 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 });
 

package/ui.container-col/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-col/storybook/stories.ts

@@ -4,7 +4,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
@@ -13,7 +13,7 @@ import UButton from "../../ui.button/UButton.vue";
 import UPage from "../../ui.container-page/UPage.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UColArgs extends Props {
   slotTemplate?: string;

package/ui.container-col/tests/UCol.test.ts

@@ -3,7 +3,7 @@ import { describe, it, expect } from "vitest";
 
 import UCol from "../UCol.vue";
 
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 describe("UCol.vue", () => {
   // Props tests

package/ui.container-col/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-divider/UDivider.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed, 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 { 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 { hasSlotContent } from "../utils/helper.ts";
+import type { Props, Config } from "./types";
+import { hasSlotContent } from "../utils/helper";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
 defineOptions({ inheritAttrs: false });

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

@@ -4,14 +4,14 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import URow from "../../ui.container-row/URow.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UDividerArgs extends Props {
   slotTemplate?: string;

package/ui.container-divider/tests/UDivider.test.ts

@@ -4,7 +4,7 @@ import { describe, it, expect } from "vitest";
 import UDivider from "../UDivider.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 describe("UDivider", () => {
   describe("Props", () => {

package/ui.container-divider/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-group/UGroup.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { 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 UHeader from "../ui.text-header/UHeader.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 });
 

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

@@ -5,7 +5,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UGroup from "../../ui.container-group/UGroup.vue";
 import UCol from "../../ui.container-col/UCol.vue";
@@ -19,7 +19,7 @@ import UAlert from "../../ui.text-alert/UAlert.vue";
 import UHeader from "../../ui.text-header/UHeader.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UGroupArgs extends Props {
   slotTemplate?: string;

package/ui.container-group/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-groups/UGroups.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { 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 { 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 });
 

package/ui.container-groups/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-groups/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UGroups from "../../ui.container-groups/UGroups.vue";
 import UGroup from "../../ui.container-group/UGroup.vue";
@@ -16,7 +16,7 @@ import UInputPassword from "../../ui.form-input-password/UInputPassword.vue";
 import UAlert from "../../ui.text-alert/UAlert.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UGroupsArgs extends Props {
   slotTemplate?: string;

package/ui.container-groups/tests/UGroups.test.ts

@@ -3,7 +3,7 @@ import { describe, it, expect } from "vitest";
 
 import UGroups from "../UGroups.vue";
 
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 describe("UGroups.vue", () => {
   // Props tests

package/ui.container-groups/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-modal/UModal.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import { computed, useSlots, watch, useId, useTemplateRef, nextTick, ref } from "vue";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+import { hasSlotContent } from "../utils/helper";
 
 import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 import UButton from "../ui.button/UButton.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.container-modal/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-modal/storybook/stories.ts

@@ -5,7 +5,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UModal from "../../ui.container-modal/UModal.vue";
 import UButton from "../../ui.button/UButton.vue";
@@ -20,8 +20,8 @@ import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
-import type { UnknownObject } from "../../types.ts";
+import type { Props } from "../types";
+import type { UnknownObject } from "../../types";
 
 interface UModalArgs extends Props {
   slotTemplate?: string;

package/ui.container-modal/tests/UModal.test.ts

@@ -8,8 +8,8 @@ import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
-import type { Props } from "../types.ts";
-import type { UnknownObject } from "../../types.ts";
+import type { Props } from "../types";
+import type { UnknownObject } from "../../types";
 
 // Create a mock router for testing router-link functionality
 const router = createRouter({

package/ui.container-modal/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";
 
 import type { RouteLocationRaw } from "vue-router";
 

package/ui.container-modal-confirm/UModalConfirm.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { computed, watch, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+import { hasSlotContent } from "../utils/helper";
 
 import UButton from "../ui.button/UButton.vue";
 import UModal from "../ui.container-modal/UModal.vue";
 
-import defaultConfig from "./config.ts";
-import { COMPONENT_NAME } from "./constants.ts";
-import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages.ts";
+import defaultConfig from "./config";
+import { COMPONENT_NAME } from "./constants";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
-import type { Props, Config } from "./types.ts";
+import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 

package/ui.container-modal-confirm/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-modal-confirm/storybook/stories.ts

@@ -5,7 +5,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UModalConfirm from "../../ui.container-modal-confirm/UModalConfirm.vue";
 import UModal from "../../ui.container-modal/UModal.vue";
@@ -17,8 +17,8 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
-import type { UnknownObject } from "../../types.ts";
+import type { Props } from "../types";
+import type { UnknownObject } from "../../types";
 
 interface UModalConfirmArgs extends Props {
   width: string;