vueless 0.0.801 → 0.0.802

package/package.json

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

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

@@ -13,6 +13,7 @@ import type { Props } from "../types.ts";
 
 interface UAccordionArgs extends Props {
   slotTemplate?: string;
+  enum: "size";
 }
 
 export default {
@@ -20,26 +21,11 @@ export default {
   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),
@@ -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"
     >
@@ -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 = {

package/ui.container-card/UCard.vue

@@ -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;
 });
@@ -47,6 +47,8 @@ const {
   descriptionAttrs,
   contentAttrs,
   footerAttrs,
+  footerLeftAttrs,
+  footerRightAttrs,
 } = useUI<Config>(defaultConfig);
 </script>
 
@@ -55,10 +57,10 @@ 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" />
@@ -66,11 +68,11 @@ const {
         </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">
@@ -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>

package/ui.container-card/config.ts

@@ -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: {
     //
   },

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

@@ -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";
@@ -23,7 +26,7 @@ export default {
   title: "Containers / Card",
   component: UCard,
   args: {
-    title: "Title",
+    title: "User Profile",
   },
   argTypes: {
     ...getArgTypes(UCard.__name),
@@ -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);
 
@@ -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>
   `,
-};
+});

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

@@ -6,14 +6,17 @@ import {
 } from "../../utils/storybook.ts";
 
 import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
 import UInput from "../../ui.form-input/UInput.vue";
 import UButton from "../../ui.button/UButton.vue";
+import UPage from "../../ui.container-page/UPage.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UColArgs extends Props {
   slotTemplate?: string;
+  enum: "gap" | "align" | "content" | "justify";
 }
 
 export default {
@@ -28,20 +31,20 @@ export default {
     docs: {
       ...getDocsDescription(UCol.__name),
       story: {
-        iframeHeight: 360,
+        height: "400px",
       },
     },
   },
 } as Meta;
 
 const defaultTemplate = `
-  <UInput placeholder="Vasyl" label="Name" />
-  <UInput placeholder="Vasylenko" label="Surname" />
-  <UInput placeholder="Kyiv" label="Town" />
+  <UInput placeholder="Vasyl" label="Name" class="max-w-96" />
+  <UInput placeholder="Vasylenko" label="Surname" class="max-w-96" />
+  <UInput placeholder="Kyiv" label="City" class="max-w-96" />
 `;
 
 const DefaultTemplate: StoryFn<UColArgs> = (args: UColArgs) => ({
-  components: { UCol, UInput, UButton },
+  components: { UCol, UInput, UButton, UPage },
   setup() {
     const slots = getSlotNames(UCol.__name);
 
@@ -54,21 +57,95 @@ const DefaultTemplate: StoryFn<UColArgs> = (args: UColArgs) => ({
   `,
 });
 
+const EnumVariantTemplate: StoryFn<UColArgs> = (args: UColArgs, { argTypes }) => ({
+  components: { UCol, UButton, URow, UInput },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <URow gap="lg" class="h-[200px]" :class="{ '!flex-col': args.enum === 'content' }">
+      <UCol
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+        class="w-full h-full border border-brand-500 rounded p-2"
+      >
+        <UButton :label="args.enum" />
+        <UButton :label="option" />
+        <div v-if="args.enum === 'content'" class="flex flex-col gap-2">
+          ${defaultTemplate}
+        </div>
+      </UCol>
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = { config: { wrapper: "h-[300px]" } };
+
+export const Reverse = DefaultTemplate.bind({});
+Reverse.args = { reverse: true };
+Reverse.parameters = {
+  docs: {
+    description: {
+      story: "Reverse nested items order.",
+    },
+    story: {
+      height: "200px",
+    },
+  },
+};
+
+export const Gap = EnumVariantTemplate.bind({});
+Gap.args = { enum: "gap" };
+Gap.parameters = {
+  docs: {
+    description: {
+      story: "The distance between nested elements.",
+    },
+  },
+};
+
+export const Align = EnumVariantTemplate.bind({});
+Align.args = { enum: "align" };
+Align.parameters = {
+  docs: {
+    description: {
+      story: "Items horizontal align (align-items).",
+    },
+  },
+};
+
+export const Content = EnumVariantTemplate.bind({});
+Content.args = { enum: "content", wrap: true };
+Content.parameters = {
+  docs: {
+    description: {
+      story: "Items horizontal align for multi-row flex containers (align-content).",
+    },
+  },
+};
+
+export const Justify = EnumVariantTemplate.bind({});
+Justify.args = { enum: "justify" };
+Justify.parameters = {
+  docs: {
+    description: {
+      story: "Items vertical align (justify-content).",
+    },
+  },
+};
 
 export const SlotDefault = DefaultTemplate.bind({});
 SlotDefault.args = {
   slotTemplate: `
     <template #default>
-      <UInput placeholder="placeholder" label="Label" />
+    <UButton label="Submit" />
+      <UInput placeholder="Provide today's new data..." label="Daily report" />
     </template>
   `,
 };
-SlotDefault.parameters = {
-  docs: {
-    story: {
-      iframeHeight: 240,
-    },
-  },
-};

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

@@ -7,6 +7,7 @@ import {
 
 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";
 import type { Props } from "../types.ts";
@@ -38,14 +39,22 @@ const DefaultTemplate: StoryFn<UDividerArgs> = (args: UDividerArgs) => ({
     return { args, slots };
   },
   template: `
+    <p>
+      Understanding your clients' needs is essential for building long-term business relationships.
+      By analyzing customer behavior and feedback, companies can tailor their services to provide more value.
+    </p>
     <UDivider v-bind="args">
       ${args.slotTemplate || getSlotsFragment("")}
     </UDivider>
+    <p>
+      Businesses that prioritize customer satisfaction see higher retention rates and increased referrals.
+      Implementing a structured follow-up process can help maintain strong client engagement and trust.
+    </p>
   `,
 });
 
 const EnumVariantTemplate: StoryFn<UDividerArgs> = (args: UDividerArgs, { argTypes }) => ({
-  components: { UDivider, URow },
+  components: { UDivider, URow, UCol },
   setup() {
     return {
       args,
@@ -53,14 +62,21 @@ const EnumVariantTemplate: StoryFn<UDividerArgs> = (args: UDividerArgs, { argTyp
     };
   },
   template: `
-    <URow>
-      <UDivider
-        class="w-1/4"
+    <URow gap="xl">
+      <UCol
         v-for="(option, index) in options"
-        v-bind="args"
-        :[args.enum]="option"
         :key="index"
-      />
+        gap="none"
+        class="w-1/4"
+      >
+        <p>{{ option }}</p>
+        <UDivider
+          v-bind="args"
+          :[args.enum]="option"
+          :key="index"
+        />
+        <p>{{ option }}</p>
+      </UCol>
     </URow>
   `,
 });
@@ -86,11 +102,18 @@ Dotted.args = { dotted: true };
 export const Vertical = DefaultTemplate.bind({});
 Vertical.args = {
   vertical: true,
-  label: "label",
+  label: "Feedback",
   config: {
     wrapper: "!h-32",
   },
 };
 
 export const NoBorder = DefaultTemplate.bind({});
-NoBorder.args = { label: "label", border: false };
+NoBorder.args = { label: "Customer Feedback", border: false };
+NoBorder.parameters = {
+  docs: {
+    description: {
+      story: "Keep only spacings by setting `border` prop to `false`.",
+    },
+  },
+};

package/ui.container-divider/types.ts

@@ -41,7 +41,7 @@ export interface Props {
   vertical?: boolean;
 
   /**
-   * Show divider border (or keeps only spacings).
+   * Show divider border (or keep only spacings).
    */
   border?: boolean;
 

package/ui.container-group/UGroup.vue

@@ -38,7 +38,7 @@ const {
 
       <div v-bind="headerAttrs">
         <!-- @slot Use it to add something on the left side of the header. -->
-        <slot name="header-left">
+        <slot name="title">
           <div v-bind="headerLeftFallbackAttrs">
             <!-- @slot Use it to add something before the title. -->
             <slot name="before-title" />
@@ -51,7 +51,7 @@ const {
         </slot>
 
         <!-- @slot Use it to add something on the right side of the header. -->
-        <slot name="header-right" />
+        <slot name="actions" />
       </div>
 
       <UDivider size="xl" padding="after" :border="underlined" v-bind="underlineAttrs" />