vueless 0.0.801 → 0.0.802

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

@@ -9,6 +9,9 @@ import UGroup from "../../ui.container-group/UGroup.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UInput from "../../ui.form-input/UInput.vue";
 import UButton from "../../ui.button/UButton.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -22,7 +25,7 @@ export default {
   title: "Containers / Group",
   component: UGroup,
   args: {
-    title: "Form group",
+    title: "User info",
   },
   argTypes: {
     ...getArgTypes(UGroup.__name),
@@ -30,18 +33,15 @@ export default {
   parameters: {
     docs: {
       ...getDocsDescription(UGroup.__name),
-      story: {
-        iframeHeight: 360,
-      },
     },
   },
 } as Meta;
 
 const defaultTemplate = `
   <UCol>
-    <UInput placeholder="Vasyl" label="Name" />
-    <UInput placeholder="Vasylenko" label="Surname" />
-    <UInput placeholder="Kyiv" label="Town" />
+    <UInput placeholder="Vasyl" label="First Name" />
+    <UInput placeholder="Vasylenko" label="Last Name" />
+    <UInput placeholder="Kyiv" label="City" />
   </UCol>
 `;
 
@@ -60,54 +60,65 @@ const DefaultTemplate: StoryFn<UGroupArgs> = (args: UGroupArgs) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { title: "Some title" };
+Default.args = {};
 
 export const Upperlined = DefaultTemplate.bind({});
-Upperlined.args = { upperlined: false, underlined: true };
-
-export const Underlined = DefaultTemplate.bind({});
-Underlined.args = { upperlined: true, underlined: false };
-
-export const NestedGroups = DefaultTemplate.bind({});
-NestedGroups.args = {
-  title: "",
-  slotTemplate: `
-    <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
-      <UCol>
-        <UInput placeholder="input" label="Label" />
-        <UInput placeholder="input" label="Label" />
-      </UCol>
-    </UGroup>
-  `,
-};
-
-export const SlotDefault = DefaultTemplate.bind({});
-SlotDefault.args = {
-  slotTemplate: `
-    <UInput placeholder="placeholder" label="Label" />
-  `,
-};
-SlotDefault.parameters = {
+Upperlined.args = { upperlined: true };
+Upperlined.parameters = {
   docs: {
-    story: {
-      iframeHeight: 240,
+    description: {
+      story: "Show line above the header.",
     },
   },
 };
 
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UButton size="sm" label="Edit"/>
-    </template>
-    ${defaultTemplate}
-  `,
-};
-SlotRight.parameters = {
+export const Underlined = DefaultTemplate.bind({});
+Underlined.args = { underlined: true };
+Underlined.parameters = {
   docs: {
-    story: {
-      iframeHeight: 200,
+    description: {
+      story: "Show line under the header.",
     },
   },
 };
+
+export const Slots: StoryFn<UGroupArgs> = (args) => ({
+  components: { UGroup, UIcon, UBadge, UButton, URow, UInput, UCol },
+  setup() {
+    args.config = { wrapper: "mb-8" };
+
+    return { args };
+  },
+  template: `
+      <UGroup v-bind="args" title="Before Title Slot">
+        <template #before-title>
+          <UIcon name="account_circle" />
+        </template>
+        ${defaultTemplate}
+      </UGroup>
+
+      <UGroup v-bind="args">
+        <template #title>
+          <UBadge label="Title Slot" size="lg" />
+        </template>
+        ${defaultTemplate}
+      </UGroup>
+
+      <UGroup v-bind="args" title="After Title Slot">
+        <template #after-title>
+          <UIcon name="verified" />
+        </template>
+        ${defaultTemplate}
+      </UGroup>
+
+      <UGroup v-bind="args" title="Actions Slot">
+        <template #actions>
+          <URow class="max-w-fit">
+            <UButton size="sm" variant="secondary" label="Clear" />
+            <UButton size="sm" label="Submit" />
+          </URow>
+        </template>
+        ${defaultTemplate}
+      </UGroup>
+  `,
+});

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

@@ -10,6 +10,7 @@ import type { Props } from "../types.ts";
 
 interface UGroupsArgs extends Props {
   slotTemplate?: string;
+  enum: "gap";
 }
 
 export default {
@@ -23,9 +24,6 @@ export default {
   parameters: {
     docs: {
       ...getDocsDescription(UGroups.__name),
-      story: {
-        iframeHeight: 360,
-      },
     },
   },
 } as Meta;
@@ -44,14 +42,49 @@ const DefaultTemplate: StoryFn<UGroupsArgs> = (args: UGroupsArgs) => ({
   `,
 });
 
+const EnumVariantTemplate: StoryFn<UGroupsArgs> = (args: UGroupsArgs, { argTypes }) => ({
+  components: { UGroups, UGroup, UCol, UInput },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <div>
+      <UGroups
+        v-for="(option, index) in options"
+        :key="option"
+        :[args.enum]="option"
+        class="mb-8"
+      >
+        <UGroup :title="option" :upperlined="index !== 0">
+          <UCol>
+            <UInput placeholder="Enter full name" label="Full Name" />
+            <UInput placeholder="Enter email address" label="Email Address" />
+          </UCol>
+        </UGroup>
+        <UGroup title="'Additional Group'">
+          <UCol>
+            <UInput placeholder="Enter phone number" label="Phone Number" />
+          </UCol>
+        </UGroup>
+      </UGroups>
+    </div>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   slotTemplate: `
-    <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
+    <UGroup :upperlined="n !== 1" :title="'User Group '+n" v-for="n in 3">
       <UCol>
-        <UInput placeholder="input" label="Label" />
-        <UInput placeholder="input" label="Label" />
+        <UInput placeholder="Enter full name" label="Full Name" />
+        <UInput placeholder="Enter email address" label="Email Address" />
       </UCol>
     </UGroup>
   `,
 };
+
+export const Gap = EnumVariantTemplate.bind({});
+Gap.args = { enum: "gap" };

package/ui.container-modal/UModal.vue

@@ -55,10 +55,10 @@ const isShownArrowButton = computed(() => {
 const isExistHeader = computed(() => {
   return (
     props.title ||
-    hasSlotContent(slots["header-left"]) ||
     hasSlotContent(slots["before-title"]) ||
+    hasSlotContent(slots["title"]) ||
     hasSlotContent(slots["after-title"]) ||
-    hasSlotContent(slots["header-right"])
+    hasSlotContent(slots["actions"])
   );
 });
 
@@ -126,7 +126,6 @@ const {
   headerLeftAttrs,
   headerLeftFallbackAttrs,
   descriptionAttrs,
-  headerRightAttrs,
   bodyAttrs,
   footerLeftAttrs,
   footerAttrs,
@@ -153,11 +152,10 @@ const {
         <div v-bind="modalAttrs">
           <div v-if="isExistHeader" v-bind="headerAttrs">
             <div v-bind="headerLeftAttrs">
+              <!-- @slot Use it to add something before the header title. -->
+              <slot name="before-title" />
               <!-- @slot Use it to add something to the left side of the header. -->
-              <slot name="header-left">
-                <!-- @slot Use it to add something before the header title. -->
-                <slot name="before-title" />
-
+              <slot name="title">
                 <div v-bind="headerLeftFallbackAttrs">
                   <div v-if="isShownArrowButton" v-bind="backLinkWrapperAttrs">
                     <UIcon
@@ -181,23 +179,18 @@ const {
                   <UHeader :label="title" size="sm" v-bind="titleAttrs" />
                   <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
                 </div>
-
-                <!-- @slot Use it to add something after the header title. -->
-                <slot name="after-title" />
               </slot>
-            </div>
-
-            <div v-bind="headerRightAttrs">
-              <!-- @slot Use it to add something to the right side of the header. -->
-              <slot name="header-right" />
+              <!-- @slot Use it to add something after the header title. -->
+              <slot name="after-title" />
             </div>
 
             <div v-if="closeOnCross" v-bind="closeIconAttrs">
               <!--
                 @slot Use it to add something instead of the close button.
                 @binding {string} icon-name
+                @binding {function} close
               -->
-              <slot name="close-button" :icon-name="config.defaults.closeIcon">
+              <slot name="actions" :icon-name="config.defaults.closeIcon" :close="closeModal">
                 <UIcon
                   internal
                   interactive

package/ui.container-modal/config.ts

@@ -26,7 +26,6 @@ export default /*tw*/ {
   backLinkIcon: "{UIcon}",
   title: "{UHeader}",
   description: "mt-1.5 text-sm font-normal text-gray-500",
-  headerRight: "",
   closeIcon: "{UIcon}",
   body: "space-y-4 px-4 md:px-8 text-sm",
   modalDivider: "{UDivider} pt-8",

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

@@ -1,3 +1,4 @@
+import { ref } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -12,6 +13,8 @@ import UHeader from "../../ui.text-header/UHeader.vue";
 import UInput from "../../ui.form-input/UInput.vue";
 import UTextarea from "../../ui.form-textarea/UTextarea.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -26,7 +29,7 @@ export default {
   title: "Containers / Modal",
   component: UModal,
   args: {
-    title: "Modal title",
+    title: "Subscription Upgrade",
     modelValue: false,
   },
   argTypes: {
@@ -44,11 +47,11 @@ export default {
 
 const defaultTemplate = `
   <URow>
-    <UInput label="Name" />
-    <UInput label="Lastname" />
+    <UInput label="Full Name" placeholder="John Doe" />
+    <UInput label="Email Address" type="email" placeholder="john.doe@example.com" />
   </URow>
 
-  <UTextarea class="mb-7" label="Comments" rows="3" />
+  <UTextarea class="mb-7" label="Message" placeholder="Enter your message here..." rows="4" />
 `;
 
 const DefaultTemplate: StoryFn<UModalArgs> = (args: UModalArgs) => ({
@@ -68,7 +71,7 @@ const DefaultTemplate: StoryFn<UModalArgs> = (args: UModalArgs) => ({
         ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
       </UModal>
 
-      <UButton label="show modal" @click="onClick"/>
+      <UButton label="Show modal" @click="onClick"/>
     </div>
   `,
 });
@@ -110,95 +113,177 @@ const EnumVariantTemplate: StoryFn<UModalArgs> = (args: UModalArgs, { argTypes }
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  description: "Upgrade your subscription to unlock premium features and benefits.",
+};
+
+export const Inner: StoryFn<UModalArgs> = (args: UModalArgs) => ({
+  components: { UModal, UButton },
+  setup() {
+    const showMainModal = ref(false);
+    const showInnerModal = ref(false);
+
+    function openMainModal() {
+      showMainModal.value = true;
+    }
+
+    function openInnerModal() {
+      showInnerModal.value = true;
+    }
+
+    return { args, showMainModal, showInnerModal, openMainModal, openInnerModal };
+  },
+  template: `
+    <div>
+      <UModal v-bind="args" v-model="showMainModal">
+        <p>
+          Are you sure you want to cancel your subscription?
+          This action will remove access to premium features and cannot be undone.
+        </p>
+        <UButton label="View Plan Details" @click="openInnerModal"/>
+
+        <UModal
+          v-model="showInnerModal"
+          title="Current Plan Details"
+          description="
+            Your current plan includes unlimited access to premium content,
+            priority support, and exclusive features.
+          "
+          inner
+        >
+          <p>Consider downgrading instead of canceling</p>
+        </UModal>
+
+        <template #footer-right>
+          <UButton label="Cancel" variant="secondary" @click="showMainModal = false" />
+          <UButton label="Confirm" @click="showMainModal = false" />
+        </template>
+      </UModal>
+
+      <UButton label="Manage Subscription" @click="openMainModal"/>
+    </div>
+  `,
+});
+Inner.parameters = {
+  docs: {
+    description: {
+      story: "Add extra top margin for modal inside another modal.",
+    },
+  },
+};
+
+export const Divider = DefaultTemplate.bind({});
+Divider.args = {
+  divider: true,
+  slotTemplate: `
+    ${defaultTemplate}
+    <template #footer-left>
+      <UButton label="Back" />
+    </template>`,
+};
+Divider.parameters = {
+  docs: {
+    description: {
+      story: "Show divider between content and footer.",
+    },
+  },
+};
+
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
 export const BackLink = DefaultTemplate.bind({});
 BackLink.args = {
-  backLabel: "back",
+  backLabel: "Back",
   backTo: {
     path: "/",
   },
 };
-
-export const SlotDefault = DefaultTemplate.bind({});
-SlotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      Some text
-    </template>
-  `,
+BackLink.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use `backTo` and `backLabel` props to add a route object and a label to the back link.",
+    },
+  },
 };
 
-export const SlotBeforeTitle = DefaultTemplate.bind({});
-SlotBeforeTitle.args = {
-  slotTemplate: `
-    <template #before-title>
-      <UIcon name="star" color="gray" />
-    </template>
-    ${defaultTemplate}
-  `,
-};
+export const Slots: StoryFn<UModalArgs> = (args) => ({
+  components: { UModal, UIcon, UButton, UCol, UBadge, UInput, UTextarea, URow },
+  setup() {
+    const modalStates = ref({
+      beforeTitle: false,
+      title: false,
+      afterTitle: false,
+      actions: false,
+      footerLeft: false,
+      footerRight: false,
+    });
 
-export const SlotAfterTitle = DefaultTemplate.bind({});
-SlotAfterTitle.args = {
-  slotTemplate: `
-    <template #after-title>
-      <UIcon name="star" color="gray" />
-    </template>
-    ${defaultTemplate}
-  `,
-};
+    return { args, modalStates };
+  },
+  template: `
+    <UCol gap="lg">
+      <div>
+        <UModal v-bind="args" v-model="modalStates.beforeTitle">
+          <template #before-title>
+            <UIcon name="account_circle" size="sm" />
+          </template>
+          ${defaultTemplate}
+        </UModal>
+        <UButton label="Show before-title slot modal" @click="modalStates.beforeTitle = true"/>
+      </div>
 
-export const SlotHeaderLeft = DefaultTemplate.bind({});
-SlotHeaderLeft.args = {
-  slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
-    </template>
-    ${defaultTemplate}
-  `,
-};
+      <div>
+        <UModal v-bind="args" v-model="modalStates.title">
+          <template #title>
+            <UBadge label="Subscription Upgrade" size="lg" />
+          </template>
+          ${defaultTemplate}
+        </UModal>
+        <UButton label="Show title slot modal" @click="modalStates.title = true"/>
+      </div>
 
-export const SlotHeaderRight = DefaultTemplate.bind({});
-SlotHeaderRight.args = {
-  slotTemplate: `
-    <template #header-right>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-    ${defaultTemplate}
-  `,
-};
+      <div>
+        <UModal v-bind="args" v-model="modalStates.afterTitle">
+          <template #after-title>
+            <UIcon name="verified" size="sm" />
+          </template>
+          ${defaultTemplate}
+        </UModal>
+        <UButton label="Show after-title slot modal" @click="modalStates.afterTitle = true"/>
+      </div>
 
-export const SlotCloseButton = DefaultTemplate.bind({});
-SlotCloseButton.args = {
-  slotTemplate: `
-    <template #close-button>
-      <UButton size="sm" color="grayscale" label="Close" />
-    </template>
-    ${defaultTemplate}
-  `,
-};
+      <div>
+        <UModal v-bind="args" v-model="modalStates.actions">
+          <template #actions="{ close }">
+            <UButton size="sm" color="grayscale" label="Close" @click="close" />
+          </template>
+          ${defaultTemplate}
+        </UModal>
+        <UButton label="Show actions slot modal" @click="modalStates.actions = true"/>
+      </div>
 
-export const SlotFooterLeft = DefaultTemplate.bind({});
-SlotFooterLeft.args = {
-  slotTemplate: `
-    ${defaultTemplate}
-    <template #footer-left>
-      <UButton label="Submit" />
-    </template>
-  `,
-};
+      <div>
+        <UModal v-bind="args" v-model="modalStates.footerLeft">
+          ${defaultTemplate}
+          <template #footer-left>
+            <UButton label="Back" />
+          </template>
+        </UModal>
+        <UButton label="Show footer-left modal" @click="modalStates.footerLeft = true"/>
+      </div>
 
-export const SlotFooterRight = DefaultTemplate.bind({});
-SlotFooterRight.args = {
-  slotTemplate: `
-    ${defaultTemplate}
-    <template #footer-right>
-      <UButton label="Back" />
-    </template>
+      <div>
+        <UModal v-bind="args" v-model="modalStates.footerRight">
+          ${defaultTemplate}
+          <template #footer-right>
+            <UButton label="Submit" />
+          </template>
+        </UModal>
+        <UButton label="Show footer-right modal" @click="modalStates.footerRight = true"/>
+      </div>
+    </UCol>
   `,
-};
+});

package/ui.container-modal/types.ts

@@ -58,7 +58,7 @@ export interface Props {
   inner?: boolean;
 
   /**
-   * Show divider between content end footer.
+   * Show divider between content and footer.
    */
   divider?: boolean;
 

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

@@ -97,32 +97,28 @@ const {
     v-bind="confirmModalAttrs"
     :data-test="getDataTest()"
   >
-    <template #header-left>
-      <!-- @slot Use it to add something to the left side of the header. -->
-      <slot name="header-left" />
-    </template>
-
     <template #before-title>
       <!-- @slot Use it to add something before the header title. -->
       <slot name="before-title" />
     </template>
 
+    <template #title>
+      <!-- @slot Use it to add something to the left side of the header. -->
+      <slot name="title" />
+    </template>
+
     <template #after-title>
       <!-- @slot Use it to add something after the header title. -->
       <slot name="after-title" />
     </template>
 
-    <template #header-right>
-      <!-- @slot Use it to add something to the right side of the header. -->
-      <slot name="header-right" />
-    </template>
-
-    <template #close-button="{ iconName }">
+    <template #actions="{ iconName, close }">
       <!--
         @slot Use it to add something instead of the close button.
         @binding {string} icon-name
+        @binding {function} close
       -->
-      <slot name="close-button" :icon-name="iconName" />
+      <slot name="actions" :icon-name="iconName" :close="close" />
     </template>
 
     <!-- @slot Use it to add something into the modal body. -->