vueless 0.0.800 → 0.0.802

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

@@ -1,3 +1,4 @@
+import { ref } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -6,10 +7,13 @@ import {
 } from "../../utils/storybook.ts";
 
 import UModalConfirm from "../../ui.container-modal-confirm/UModalConfirm.vue";
+import UModal from "../../ui.container-modal/UModal.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UHeader from "../../ui.text-header/UHeader.vue";
 import UIcon from "../../ui.image-icon/UIcon.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";
@@ -26,7 +30,7 @@ export default {
   title: "Containers / Modal Confirm",
   component: UModalConfirm,
   args: {
-    title: "Complete the transfer?",
+    title: "Confirm Subscription Upgrade?",
     confirmLabel: "Confirm",
     modelValue: false,
   },
@@ -44,12 +48,11 @@ export default {
 } as Meta;
 
 const defaultTemplate = `
-  It looks like you going to complete the transaction before the process will finished.
-  All unsaved data will be lost.
+  <p>You are about to complete the subscription upgrade. Any unsaved changes or unfinished processes will be lost.</p>
 `;
 
 const DefaultTemplate: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
-  components: { UModalConfirm, UButton, UHeader, UIcon },
+  components: { UModalConfirm, UButton, UHeader, UIcon, UModal },
   setup() {
     function onClick() {
       args.modelValue = true;
@@ -65,7 +68,7 @@ const DefaultTemplate: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) =>
         ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
       </UModalConfirm>
 
-      <UButton label="show modal" @click="onClick"/>
+      <UButton label="Show modal" @click="onClick"/>
     </div>
   `,
 });
@@ -111,73 +114,175 @@ const EnumVariantTemplate: StoryFn<UModalConfirmArgs> = (
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const WithoutCancelButton = DefaultTemplate.bind({});
-WithoutCancelButton.args = { cancelHidden: false };
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  description: "Are you sure you want to upgrade? Your new plan will take effect immediately.",
+};
 
-export const DisableAcceptButton = DefaultTemplate.bind({});
-DisableAcceptButton.args = { confirmDisabled: true };
+export const ConfirmLabel = DefaultTemplate.bind({});
+ConfirmLabel.args = { confirmLabel: "Upgrade" };
+ConfirmLabel.parameters = {
+  docs: {
+    description: {
+      story: "Set confirm button label.",
+    },
+  },
+};
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
+export const Inner: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
+  components: { UModalConfirm, UButton, UModal },
+  setup() {
+    const showMainModal = ref(false);
+    const showInnerModal = ref(false);
 
-export const Color = EnumVariantTemplate.bind({});
-Color.args = { enum: "confirmColor" };
+    function openMainModal() {
+      showMainModal.value = true;
+    }
 
-export const SlotBeforeTitle = DefaultTemplate.bind({});
-SlotBeforeTitle.args = {
-  slotTemplate: `
-    <template #before-title>
-      <UIcon name="star" color="gray" />
-    </template>
-    ${defaultTemplate}
-  `,
-};
+    function openInnerModal() {
+      showInnerModal.value = true;
+    }
 
-export const SlotAfterTitle = DefaultTemplate.bind({});
-SlotAfterTitle.args = {
-  slotTemplate: `
-    <template #after-title>
-      <UIcon name="star" color="gray" />
-    </template>
-    ${defaultTemplate}
-  `,
-};
+    return { args, showMainModal, showInnerModal, openMainModal, openInnerModal };
+  },
+  template: `
+    <div>
+      <UModalConfirm 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"/>
 
-export const SlotHeaderLeft = DefaultTemplate.bind({});
-SlotHeaderLeft.args = {
-  slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
-    </template>
-    ${defaultTemplate}
+        <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>
+      </UModalConfirm>
+
+      <UButton label="Manage Subscription" @click="openMainModal"/>
+    </div>
   `,
+});
+Inner.parameters = {
+  docs: {
+    description: {
+      story: "Add extra top margin for modal inside another modal.",
+    },
+  },
 };
 
-export const SlotHeaderRight = DefaultTemplate.bind({});
-SlotHeaderRight.args = {
+export const Divider = DefaultTemplate.bind({});
+Divider.args = {
+  divider: true,
   slotTemplate: `
-    <template #header-right>
-      <UButton label="I'm in the right slot" size="sm" color="gray" />
-    </template>
     ${defaultTemplate}
-  `,
+    <template #footer-left>
+      <UButton label="Submit" />
+    </template>`,
 };
-
-export const SlotDefault = DefaultTemplate.bind({});
-SlotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      🤘🤘🤘
-    </template>
-  `,
+Divider.parameters = {
+  docs: {
+    description: {
+      story: "Show divider between content and footer.",
+    },
+  },
 };
 
-export const SlotFooterRight = DefaultTemplate.bind({});
-SlotFooterRight.args = {
-  slotTemplate: `
-    ${defaultTemplate}
-    <template #footer-right>
-      <UButton label="I'm in the right slot" size="sm" color="gray" />
-    </template>
+export const WithoutCancelButton = DefaultTemplate.bind({});
+WithoutCancelButton.args = { cancelHidden: true };
+
+export const DisableConfirmButton = DefaultTemplate.bind({});
+DisableConfirmButton.args = { confirmDisabled: true };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const Color = EnumVariantTemplate.bind({});
+Color.args = { enum: "confirmColor" };
+
+export const Slots: StoryFn<UModalConfirmArgs> = (args) => ({
+  components: { UModalConfirm, UIcon, UButton, UCol, UBadge, URow },
+  setup() {
+    const modalStates = ref({
+      beforeTitle: false,
+      title: false,
+      afterTitle: false,
+      actions: false,
+      footerLeft: false,
+      footerRight: false,
+    });
+
+    return { args, modalStates };
+  },
+  template: `
+    <UCol gap="lg">
+      <div>
+        <UModalConfirm v-bind="args" v-model="modalStates.beforeTitle">
+          <template #before-title>
+            <UIcon name="subscriptions" size="sm" />
+          </template>
+          ${defaultTemplate}
+        </UModalConfirm>
+        <UButton label="Show before-title slot modal" @click="modalStates.beforeTitle = true"/>
+      </div>
+
+      <div>
+        <UModalConfirm v-bind="args" v-model="modalStates.title">
+          <template #title>
+            <UBadge label="Confirm Subscription Upgrade?" size="lg" />
+          </template>
+          ${defaultTemplate}
+        </UModalConfirm>
+        <UButton label="Show title slot modal" @click="modalStates.title = true"/>
+      </div>
+
+      <div>
+        <UModalConfirm v-bind="args" v-model="modalStates.afterTitle">
+          <template #after-title>
+            <UIcon name="verified" size="sm" />
+          </template>
+          ${defaultTemplate}
+        </UModalConfirm>
+        <UButton label="Show after-title slot modal" @click="modalStates.afterTitle = true"/>
+      </div>
+
+      <div>
+        <UModalConfirm v-bind="args" v-model="modalStates.actions">
+          <template #actions="{ close }">
+            <UButton size="sm" color="grayscale" label="Close" @click="close" />
+          </template>
+          ${defaultTemplate}
+        </UModalConfirm>
+        <UButton label="Show actions slot modal" @click="modalStates.actions = true"/>
+      </div>
+
+      <div>
+        <UModalConfirm v-bind="args" v-model="modalStates.footerLeft">
+          ${defaultTemplate}
+          <template #footer-left>
+            <UButton label="Back" />
+          </template>
+        </UModalConfirm>
+        <UButton label="Show footer-left modal" @click="modalStates.footerLeft = true"/>
+      </div>
+
+      <div>
+        <UModalConfirm v-bind="args" v-model="modalStates.footerRight">
+          ${defaultTemplate}
+          <template #footer-right>
+            <UButton label="Submit" />
+          </template>
+        </UModalConfirm>
+        <UButton label="Show footer-right modal" @click="modalStates.footerRight = true"/>
+      </div>
+    </UCol>
   `,
-};
+});

package/ui.container-modal-confirm/types.ts

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

package/ui.container-page/UPage.vue

@@ -37,10 +37,10 @@ const { isMobileBreakpoint } = useBreakpoint();
 const isExistHeader = computed(() => {
   return (
     props.title ||
-    hasSlotContent(slots["header-left"]) ||
-    hasSlotContent(slots["header-right"]) ||
     hasSlotContent(slots["before-title"]) ||
-    hasSlotContent(slots["after-title"])
+    hasSlotContent(slots["title"]) ||
+    hasSlotContent(slots["after-title"]) ||
+    hasSlotContent(slots["actions"])
   );
 });
 
@@ -97,16 +97,13 @@ const {
 <template>
   <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <div v-bind="pageAttrs">
-      <!-- @slot Use it to add something before the header. -->
-      <slot name="header-before" />
-
       <div v-if="isExistHeader" v-bind="headerAttrs">
         <div v-bind="headerLeftAttrs">
-          <!-- @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 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="title">
             <div v-bind="headerLeftFallbackAttrs">
               <div v-if="isShownArrowButton" v-bind="backLinkWrapperAttrs">
                 <UIcon
@@ -130,29 +127,22 @@ const {
               <UHeader :label="title" :size="titleSize" 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>
+          <!-- @slot Use it to add something after the header title. -->
+          <slot name="after-title" />
         </div>
 
         <div v-bind="headerRightAttrs">
           <!-- @slot Use it to add something to the right side of the header. -->
-          <slot name="header-right" />
+          <slot name="actions" />
         </div>
       </div>
 
-      <!-- @slot Use it to add something after the header. -->
-      <slot name="header-after" />
-
       <div v-bind="bodyAttrs">
         <!-- @slot Use it to add main content. -->
         <slot />
       </div>
 
-      <!-- @slot Use it to add something before the footer. -->
-      <slot name="footer-before" />
-
       <div v-if="isExistFooter" v-bind="footerAttrs">
         <div v-bind="footerLeftAttrs">
           <!-- @slot Use it to add something to the left side of the footer. -->
@@ -164,9 +154,6 @@ const {
           <slot name="footer-right" />
         </div>
       </div>
-
-      <!-- @slot Use it to add something after the footer. -->
-      <slot name="footer-after" />
     </div>
 
     <div v-if="!isMobileBreakpoint" v-bind="rightRoundingWrapperAttrs">

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

@@ -8,17 +8,20 @@ import {
 import UPage from "../../ui.container-page/UPage.vue";
 import UCard from "../../ui.container-card/UCard.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 import UInput from "../../ui.form-input/UInput.vue";
 import UTextarea from "../../ui.form-textarea/UTextarea.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 UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UPageArgs extends Props {
   slotTemplate?: string;
+  enum: "size" | "titleSize";
 }
 
 export default {
@@ -26,7 +29,7 @@ export default {
   title: "Containers / Page",
   component: UPage,
   args: {
-    title: "Title",
+    title: "User Profile",
     gray: true,
   },
   argTypes: {
@@ -40,12 +43,13 @@ export default {
 } as Meta;
 
 const defaultTemplate = `
-  <UCard title="Card title">
+  <UCard title="Profile Information">
     <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 mt-4" label="Comments" rows="3" />
+
+    <UTextarea class="mb-7 mt-4" label="Message" placeholder="Enter your message here..." rows="4" />
   </UCard>
 `;
 
@@ -72,82 +76,118 @@ const DefaultTemplate: StoryFn<UPageArgs> = (args: UPageArgs) => ({
   `,
 });
 
+const EnumVariantTemplate: StoryFn<UPageArgs> = (args: UPageArgs, { argTypes }) => ({
+  components: { UPage, UCard, URow, UInput, UTextarea },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <URow v-for="(option, index) in options" :key="index">
+      <UPage
+        v-bind="args"
+        :[args.enum]="option"
+        :description="option"
+        :config="{ wrapper: 'min-h-max', page: 'min-h-max' }"
+      >
+        ${defaultTemplate}
+      </UPage>
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const TitleSizeSm = DefaultTemplate.bind({});
-TitleSizeSm.args = { titleSize: "sm" };
-
 export const Description = DefaultTemplate.bind({});
-Description.args = { description: "Page description" };
-
-export const Size = DefaultTemplate.bind({});
-Size.args = { size: "sm", title: "size = md" };
+Description.args = {
+  description: "Manage your profile details and update your personal information.",
+};
 
 export const BackLink = DefaultTemplate.bind({});
 BackLink.args = {
-  backLabel: "back",
+  backLabel: "Back",
   backTo: {
     path: "/",
   },
 };
-
-export const SlotHeaderLeft = DefaultTemplate.bind({});
-SlotHeaderLeft.args = {
-  slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
-    </template>
-    ${defaultTemplate}
-  `,
-};
-
-export const SlotBeforeTitle = DefaultTemplate.bind({});
-SlotBeforeTitle.args = {
-  slotTemplate: `
-    <template #before-title>
-      <UIcon name="close" color="gray" />
-    </template>
-    ${defaultTemplate}
-  `,
+BackLink.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use `backTo` and `backLabel` props to add a route object and a label to the back link.",
+    },
+  },
 };
 
-export const SlotAfterTitle = DefaultTemplate.bind({});
-SlotAfterTitle.args = {
-  slotTemplate: `
-    <template #after-title>
-      <UIcon name="close" color="gray" />
-    </template>
-    ${defaultTemplate}
-  `,
-};
+export const TitleSize = EnumVariantTemplate.bind({});
+TitleSize.args = { enum: "titleSize" };
 
-export const SlotHeaderRight = DefaultTemplate.bind({});
-SlotHeaderRight.args = {
-  slotTemplate: `
-    <template #header-right>
-      <UButton size="sm" color="gray" label="button" />
-    </template>
-    ${defaultTemplate}
-  `,
+export const Size = EnumVariantTemplate.bind({});
+Size.args = { enum: "size" };
+Size.parameters = {
+  docs: {
+    description: {
+      story: "Page size (width).",
+    },
+  },
 };
 
-export const SlotFooterLeft = DefaultTemplate.bind({});
-SlotFooterLeft.args = {
-  slotTemplate: `
-    ${defaultTemplate}
-    <template #footer-left>
-        <UButton label="button" />
-    </template>
-  `,
-};
+export const Slots: StoryFn<UPageArgs> = (args) => ({
+  components: { UPage, UIcon, URow, UCol, UButton, UBadge, UTextarea, UCard, UInput },
+  setup() {
+    args.config = { wrapper: "min-h-max", page: "min-h-max" };
 
-export const SlotFooterRight = DefaultTemplate.bind({});
-SlotFooterRight.args = {
-  slotTemplate: `
-    ${defaultTemplate}
-    <template #footer-right>
-      <UButton label="button" />
-    </template>
+    return { args };
+  },
+  template: `
+    <UCol gap="lg">
+      <UPage v-bind="args" description="Before Title Slot">
+        <template #before-title>
+          <UIcon name="account_circle" />
+        </template>
+        ${defaultTemplate}
+      </UPage>
+
+      <UPage v-bind="args">
+        <template #title>
+          <UBadge label="Title Slot" size="lg" />
+        </template>
+        ${defaultTemplate}
+      </UPage>
+
+      <UPage v-bind="args" description="After Title Slot">
+        <template #after-title>
+          <UIcon name="verified" />
+        </template>
+        ${defaultTemplate}
+      </UPage>
+
+      <UPage v-bind="args" description="Actions Slot">
+        <template #actions>
+          <URow class="max-w-fit">
+            <UButton size="sm" variant="secondary" label="Clear" />
+            <UButton size="sm" label="Submit" />
+          </URow>
+        </template>
+        ${defaultTemplate}
+      </UPage>
+
+      <UPage v-bind="args" description="Footer Left Slot">
+        ${defaultTemplate}
+        <template #footer-left>
+          <UButton size="sm" label="Cancel" />
+        </template>
+      </UPage>
+
+      <UPage v-bind="args" description="Footer Right Slot">
+        ${defaultTemplate}
+        <template #footer-right>
+          <UButton size="sm" label="Save Changes" />
+        </template>
+      </UPage>
+    </UCol>
   `,
-};
+});