Skip to content

Commit

Permalink
Merge pull request #399 from vuelessjs/VL-133_Containers-group-storie…
Browse files Browse the repository at this point in the history 
…s-refinement_Vitalii-Dudnik

VL-133_Containers-group-stories-refinement_Vitalii-Dudnik
  • Loading branch information
@KinduD21
KinduD21 authored Feb 20, 2025
2 parents deaa407 + dd05e8d commit 642918b
Show file tree
Hide file tree
Showing 21 changed files with 914 additions and 478 deletions.
89 changes: 66 additions & 23 deletions src/ui.container-accordion/storybook/stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,33 +13,19 @@ import type { Props } from "../types.ts";

interface UAccordionArgs extends Props {
slotTemplate?: string;
enum: "size";
}

export default {
id: "5050",
title: "Containers / Accordion",
component: UAccordion,
args: {
accordions: [
{
name: "Excellence",
title: "Excellence by necessity",
description: `As creators and maintainers of the technologies you are using,
our services are here to showcase the full power of our softwares.`,
},
{
name: "Innovation",
title: "Driving innovation forward",
description: `All the people that will be involved in delivering your project are contributing
to the technologies you are using, when they are not the creators themselves.`,
},
{
name: "Collaboration",
title: "Fostering collaboration",
description: `By working with us, you are directly supporting the open source community,
ensuring the ecosystem continuity and enabling Nuxt development.`,
},
],
title: "Committed to Quality and Performance",
description: `
We take pride in delivering high-quality solutions tailored to your needs.
Our expertise ensures that your project is built with efficiency, scalability, and reliability in mind.
`,
},
argTypes: {
...getArgTypes(UAccordion.__name),
Expand All @@ -58,9 +44,47 @@ const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({

return { args, slots };
},
template: `
<UAccordion v-bind="args">
${args.slotTemplate || getSlotsFragment("")}
</UAccordion>
`,
});

const AccordionsTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
components: { UAccordion, UButton },
setup() {
const slots = getSlotNames(UAccordion.__name);

const accordions = [
{
title: "Committed to Quality and Performance",
description: `
We take pride in delivering high-quality solutions tailored to your needs.
Our expertise ensures that your project is built with efficiency, scalability, and reliability in mind.
`,
},
{
title: "Pioneering Cutting-Edge Solutions",
description: `
Our team stays ahead of the curve, integrating the latest technologies and best practices
to drive innovation and create future-ready applications for your business.
`,
},
{
title: "Building Together for Long-Term Success",
description: `
We work closely with you to understand your goals, ensuring seamless communication
and a collaborative approach that leads to sustainable, impactful results.
`,
},
];

return { args, slots, accordions };
},
template: `
<UAccordion
v-for="(accordion, index) in args.accordions"
v-for="(accordion, index) in accordions"
:key="index"
v-bind="accordion"
>
Expand All @@ -69,11 +93,30 @@ const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
`,
});

const EnumVariantTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs, { argTypes }) => ({
components: { UAccordion },
setup() {
return { args, options: argTypes?.[args.enum]?.options };
},
template: `
<UAccordion
v-for="(option, index) in options"
:key="index"
v-bind="args"
:[args.enum]="option"
:description="option"
/>
`,
});

export const Default = DefaultTemplate.bind({});
Default.args = {};

export const Size = DefaultTemplate.bind({});
Size.args = { size: "sm" };
export const Accordions = AccordionsTemplate.bind({});
Accordions.args = {};

export const Size = EnumVariantTemplate.bind({});
Size.args = { enum: "size" };

export const SlotToggle = DefaultTemplate.bind({});
SlotToggle.args = {
Expand Down
26 changes: 16 additions & 10 deletions src/ui.container-card/UCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ const props = withDefaults(defineProps<Props>(), {
const slots = useSlots();
const isShownHeader = computed(() => {
const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
const isHeaderRightSlot = hasSlotContent(slots["header-left"]);
const isHeaderLeftSlot = hasSlotContent(slots["title"]);
const isHeaderRightSlot = hasSlotContent(slots["title"]);
return props.title || isHeaderLeftSlot || isHeaderRightSlot;
});
Expand All @@ -47,6 +47,8 @@ const {
descriptionAttrs,
contentAttrs,
footerAttrs,
footerLeftAttrs,
footerRightAttrs,
} = useUI<Config>(defaultConfig);
</script>

Expand All @@ -55,22 +57,22 @@ const {
<div v-if="isShownHeader" v-bind="headerAttrs">
<div v-bind="headerLeftAttrs">
<!-- @slot Use it to add something before left side of the header. -->
<slot name="header-left-before" />
<slot name="before-title" />

<!-- @slot Use it to customise left side of the header. -->
<slot name="header-left">
<slot name="title">
<div v-bind="headerLeftFallbackAttrs">
<UHeader :label="title" size="xs" v-bind="titleAttrs" />
<div v-if="description" v-bind="descriptionAttrs" v-text="description" />
</div>
</slot>

<!-- @slot Use it to add something after left side of the header. -->
<slot name="header-left-after" />
<slot name="after-title" />
</div>

<!-- @slot Use it to customise right side of the header. -->
<slot name="header-right" />
<slot name="actions" />
</div>

<div v-bind="contentAttrs">
Expand All @@ -81,11 +83,15 @@ const {
<UDivider v-if="isShownFooter" padding="none" v-bind="cardDividerAttrs" />

<div v-if="isShownFooter" v-bind="footerAttrs">
<!-- @slot Use it to add something to the left side of the footer. -->
<slot name="footer-left" />
<div v-bind="footerLeftAttrs">
<!-- @slot Use it to add something to the left side of the footer. -->
<slot name="footer-left" />
</div>

<!-- @slot Use it to add something to the right side of the footer. -->
<slot name="footer-right" />
<div v-bind="footerRightAttrs">
<!-- @slot Use it to add something to the right side of the footer. -->
<slot name="footer-right" />
</div>
</div>
</div>
</template>
4 changes: 3 additions & 1 deletion src/ui.container-card/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ export default /*tw*/ {
description: "mt-1 text-sm font-normal text-gray-500",
content: "text-sm",
cardDivider: "{UDivider}",
footer: "flex justify-between",
footer: "flex justify-between w-full",
footerLeft: "",
footerRight: "",
defaults: {
//
},
Expand Down
131 changes: 67 additions & 64 deletions src/ui.container-card/storybook/stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import UInput from "../../ui.form-input/UInput.vue";
import UButton from "../../ui.button/UButton.vue";
import UIcon from "../../ui.image-icon/UIcon.vue";
import UHeader from "../../ui.text-header/UHeader.vue";
import URow from "../../ui.container-row/URow.vue";
import UCol from "../../ui.container-col/UCol.vue";
import UBadge from "../../ui.text-badge/UBadge.vue";

import type { Meta, StoryFn } from "@storybook/vue3";
import type { Props } from "../types.ts";
Expand All @@ -23,7 +26,7 @@ export default {
title: "Containers / Card",
component: UCard,
args: {
title: "Title",
title: "User Profile",
},
argTypes: {
...getArgTypes(UCard.__name),
Expand All @@ -37,19 +40,24 @@ export default {

const defaultTemplate = `
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
The <strong>Card</strong> component is a versatile UI element designed to present
structured content in an organized manner. It can be used for displaying
user profiles, product details, notifications, or any other grouped information.
</p>
<p>
With a clean layout that includes a title and content area, this component
is ideal for dashboards, settings pages, and interactive modals. You can
customize it further by adding buttons, images, icons, or additional
sections as needed.
</p>
<p>
Whether you're building a simple info box or a detailed summary card, this
component helps maintain a visually consistent and responsive design.
</p>
`;

const DefaultTemplate: StoryFn<UCardArgs> = (args: UCardArgs) => ({
components: { UCard, UButton, UInput, UIcon, UHeader },
components: { UCard, UButton, UInput, UIcon, UHeader, URow },
setup() {
const slots = getSlotNames(UCard.__name);

Expand All @@ -66,64 +74,59 @@ export const Default = DefaultTemplate.bind({});
Default.args = {};

export const Description = DefaultTemplate.bind({});
Description.args = { description: "Card description" };
Description.args = { description: "Displays key details about a user, product, or feature." };

export const SlotHeaderLeftBefore = DefaultTemplate.bind({});
SlotHeaderLeftBefore.args = {
slotTemplate: `
<template #header-left-before>
<UIcon name="star" size="sm" />
</template>
${defaultTemplate}
`,
};
export const Slots: StoryFn<UCardArgs> = (args) => ({
components: { UCard, UIcon, URow, UCol, UButton, UBadge },
setup() {
return { args };
},
template: `
<UCol gap="lg">
<UCard v-bind="args" description="Before Title Slot">
<template #before-title>
<UIcon name="account_circle" size="sm" />
</template>
${defaultTemplate}
</UCard>
export const SlotHeaderLeft = DefaultTemplate.bind({});
SlotHeaderLeft.args = {
slotTemplate: `
<template #header-left>
<UHeader size="lg" label="Large title" />
</template>
${defaultTemplate}
`,
};
<UCard v-bind="args">
<template #title>
<UBadge label="Title Slot" size="lg" />
</template>
${defaultTemplate}
</UCard>
export const SlotHeaderLeftAfter = DefaultTemplate.bind({});
SlotHeaderLeftAfter.args = {
slotTemplate: `
<template #header-left-after>
<UIcon name="star" size="sm" />
</template>
${defaultTemplate}
`,
};
<UCard v-bind="args" description="After Title Slot">
<template #after-title>
<UIcon name="verified" size="sm" />
</template>
${defaultTemplate}
</UCard>
export const SlotHeaderRight = DefaultTemplate.bind({});
SlotHeaderRight.args = {
slotTemplate: `
<template #header-right>
<UButton size="sm" color="gray" label="Read more" />
</template>
${defaultTemplate}
`,
};
<UCard v-bind="args" description="Actions Slot">
<template #actions>
<URow class="max-w-fit">
<UButton size="sm" label="Follow" />
<UButton size="sm" label="Message" />
</URow>
</template>
${defaultTemplate}
</UCard>
export const SlotFooterLeft = DefaultTemplate.bind({});
SlotFooterLeft.args = {
slotTemplate: `
${defaultTemplate}
<template #footer-left>
<UButton size="sm" label="Read more" />
</template>
`,
};
<UCard v-bind="args" description="Footer Left Slot">
${defaultTemplate}
<template #footer-left>
<UButton size="sm" label="Cancel" />
</template>
</UCard>
export const SlotFooterRight = DefaultTemplate.bind({});
SlotFooterRight.args = {
slotTemplate: `
${defaultTemplate}
<template #footer-right>
<UButton size="sm" label="Read more" />
</template>
<UCard v-bind="args" description="Footer Right Slot">
${defaultTemplate}
<template #footer-right>
<UButton size="sm" label="Save Changes" />
</template>
</UCard>
</UCol>
`,
};
});
Loading

0 comments on commit 642918b

Please sign in to comment.