vueless 0.0.396 → 0.0.398

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

@@ -1,34 +1,53 @@
 <template>
   <UModal
+    :id="id"
     v-model="isShownModal"
-    :width="width"
+    :size="size"
     :title="title"
+    :description="description"
+    :inner="inner"
+    :close-on-esc="closeOnEsc"
+    :close-on-cross="closeOnCross"
+    :close-on-overlay="closeOnOverlay"
+    :mobile-stick-bottom="mobileStickBottom"
     no-divider
     mobile-bottom-align
     :data-test="dataTest"
-    v-bind="modalAttrs"
+    v-bind="confirmModalAttrs"
   >
-    <template #header-left-before>
-      <slot name="header-left-before" />
-    </template>
-
     <template #header-left>
+      <!-- @slot Use it to add something to the left side of the header. -->
       <slot name="header-left" />
     </template>
 
-    <template #header-left-after>
-      <slot name="header-left-after" />
+    <template #before-title>
+      <!-- @slot Use it to add something before the header title. -->
+      <slot name="before-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 #default>
-      <slot />
+    <template #close-button="{ iconName }">
+      <!--
+        @slot Use it to add something instead of the close button.
+        @binding {string} icon-name
+      -->
+      <slot name="close-button" :icon-name="iconName" />
     </template>
 
+    <!-- @slot Use it to add something into the modal body. -->
+    <slot />
+
     <template #footer-left>
+      <!-- @slot Use it to add something to the left side of the footer. -->
       <slot v-if="hasSlotContent($slots['footer-left'])" name="footer-left" />
 
       <div v-else v-bind="footerLeftFallbackAttrs">
@@ -36,25 +55,25 @@
           :label="confirmLabel || currentLocale.confirm"
           :color="confirmColor"
           :disabled="confirmDisabled"
-          :data-test="`${dataTest}-accept`"
           v-bind="confirmButtonAttrs"
+          :data-test="`${dataTest}-confirm`"
           @click="emitConfirmAction"
         />
 
         <UButton
-          v-if="cancelButton"
+          v-if="!cancelHidden"
           :label="currentLocale.cancel"
-          variant="thirdary"
+          variant="secondary"
           color="gray"
-          filled
-          :data-test="`${dataTest}-close`"
           v-bind="cancelButtonAttrs"
+          :data-test="`${dataTest}-close`"
           @click="onCloseModal"
         />
       </div>
     </template>
 
     <template #footer-right>
+      <!-- @slot Use it to add something to the right side of the footer. -->
       <slot name="footer-right" />
     </template>
   </UModal>
@@ -78,7 +97,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Change modal state (shown / hidden).
+   * Set modal state (hidden / shown).
    */
   modelValue: {
     type: Boolean,
@@ -93,6 +112,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Modal description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Confirm button label.
    */
@@ -119,20 +146,68 @@ const props = defineProps({
   },
 
   /**
-   * Show cancel button.
+   * Hide cancel button.
    */
-  cancelButton: {
+  cancelHidden: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModalConfirm).cancelButton,
+    default: getDefault(defaultConfig, UModalConfirm).cancelHidden,
   },
 
   /**
-   * Modal width.
+   * Modal size (width).
    * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
    */
-  width: {
+  size: {
+    type: String,
+    default: getDefault(defaultConfig, UModalConfirm).size,
+  },
+
+  /**
+   * Allow closing modal by clicking on close cross.
+   */
+  closeOnCross: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).closeOnCross,
+  },
+
+  /**
+   * Allow closing modal by clicking on overlay.
+   */
+  closeOnOverlay: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).closeOnOverlay,
+  },
+
+  /**
+   * Allow closing modal by pressing escape (esc) on the keyboard.
+   */
+  closeOnEsc: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).closeOnEsc,
+  },
+
+  /**
+   * Add extra top margin for modal inside another modal.
+   */
+  inner: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).inner,
+  },
+
+  /**
+   * Attach small modal to the bottom of the screen (mobile version only).
+   */
+  mobileStickBottom: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).mobileStickBottom,
+  },
+
+  /**
+   * Unique element id.
+   */
+  id: {
     type: String,
-    default: getDefault(defaultConfig, UModalConfirm).width,
+    default: "",
   },
 
   /**
@@ -175,7 +250,7 @@ const { tm } = useLocale();
 const {
   hasSlotContent,
   footerLeftFallbackAttrs,
-  modalAttrs,
+  confirmModalAttrs,
   confirmButtonAttrs,
   cancelButtonAttrs,
 } = useAttrs(props);

package/ui.container-modal-confirm/config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  modal: "{UModal}",
+  confirmModal: "{UModal}",
   footerLeftFallback: "flex space-x-4",
   confirmButton: "{UButton} w-full",
   cancelButton: "{UButton} w-full",
@@ -8,9 +8,15 @@ export default /*tw*/ {
     cancel: "Cancel",
   },
   defaults: {
-    width: "sm",
+    size: "sm",
     confirmColor: "brand",
+    inner: false,
+    noDivider: false,
+    closeOnEsc: true,
+    closeOnCross: true,
+    closeOnOverlay: true,
+    mobileStickBottom: false,
     confirmDisabled: false,
-    cancelButton: true,
+    cancelHidden: false,
   },
 };

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

@@ -14,7 +14,7 @@ export default {
   title: "Containers / Modal Confirm",
   component: UModalConfirm,
   args: {
-    title: "Modal Confirm title",
+    title: "Complete the transfer?",
     confirmLabel: "Confirm",
     modelValue: false,
   },
@@ -30,7 +30,10 @@ export default {
   },
 };
 
-const defaultTemplate = "Confirm the action?";
+const defaultTemplate = `
+  It looks like you going to complete the transaction before the process will finished.
+  All unsaved data will be lost.
+`;
 
 const DefaultTemplate = (args) => ({
   components: { UModalConfirm, UButton, UHeader, UIcon },
@@ -93,48 +96,42 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const WithoutCancelButton = DefaultTemplate.bind({});
-WithoutCancelButton.args = { cancelButton: false };
+WithoutCancelButton.args = { cancelHidden: false };
 
 export const DisableAcceptButton = DefaultTemplate.bind({});
 DisableAcceptButton.args = { confirmDisabled: true };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "width" };
+Sizes.args = { enum: "size" };
 
 export const Color = EnumVariantTemplate.bind({});
 Color.args = { enum: "confirmColor" };
 
-export const SlotHeaderLeftBefore = DefaultTemplate.bind({});
-SlotHeaderLeftBefore.args = {
+export const SlotBeforeTitle = DefaultTemplate.bind({});
+SlotBeforeTitle.args = {
   slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="star"
-        color="gray"
-      />
+    <template #before-title>
+      <UIcon name="star" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeft = DefaultTemplate.bind({});
-SlotHeaderLeft.args = {
+export const SlotAfterTitle = DefaultTemplate.bind({});
+SlotAfterTitle.args = {
   slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
+    <template #after-title>
+      <UIcon name="star" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeftAfter = DefaultTemplate.bind({});
-SlotHeaderLeftAfter.args = {
+export const SlotHeaderLeft = DefaultTemplate.bind({});
+SlotHeaderLeft.args = {
   slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="star"
-        color="gray"
-      />
+    <template #header-left>
+      <UHeader size="lg" label="Large title" />
     </template>
     ${defaultTemplate}
   `,

package/ui.container-page/UPage.vue

@@ -4,20 +4,20 @@
       <!-- @slot Use it to add something before the header. -->
       <slot name="header-before" />
 
-      <div v-if="isShownHeader" v-bind="headerAttrs">
+      <div v-if="isExistHeader" 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 Use it to customise left side of the header. -->
+          <!-- @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" />
+
             <div v-bind="headerLeftFallbackAttrs">
               <ULink
                 v-if="isShownArrowButton"
                 no-ring
                 size="sm"
                 color="gray"
-                :to="backRoute"
+                :to="backTo"
                 :label="backLabel"
                 v-bind="backLinkAttrs"
               >
@@ -35,14 +35,14 @@
               <UHeader :label="title" :size="titleSize" 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 Use it to add something after the header title. -->
+            <slot name="after-title" />
+          </slot>
         </div>
 
         <div v-bind="headerRightAttrs">
-          <!-- @slot Use it to customise right side of the header. -->
+          <!-- @slot Use it to add something to the right side of the header. -->
           <slot name="header-right" />
         </div>
       </div>
@@ -50,7 +50,7 @@
       <!-- @slot Use it to add something after the header. -->
       <slot name="header-after" />
 
-      <div>
+      <div v-bind="bodyAttrs">
         <!-- @slot Use it to add main content. -->
         <slot />
       </div>
@@ -58,13 +58,13 @@
       <!-- @slot Use it to add something before the footer. -->
       <slot name="footer-before" />
 
-      <div v-if="isShownFooterSlot" class="vueless-page-footer" v-bind="footerAttrs">
-        <div class="vueless-page-footer-left" v-bind="footerLeftAttrs">
+      <div v-if="isExistFooter" v-bind="footerAttrs">
+        <div v-bind="footerLeftAttrs">
           <!-- @slot Use it to add something to the left side of the footer. -->
           <slot name="footer-left" />
         </div>
 
-        <div class="vueless-page-footer-right" v-bind="footerRightAttrs">
+        <div v-bind="footerRightAttrs">
           <!-- @slot Use it to add something to the right side of the footer. -->
           <slot name="footer-right" />
         </div>
@@ -101,16 +101,16 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * The width of the page.
+   * Page size (width).
    * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, wide
    */
-  width: {
+  size: {
     type: String,
-    default: getDefault(defaultConfig, UPage).width,
+    default: getDefault(defaultConfig, UPage).size,
   },
 
   /**
-   * Set page title.
+   * Page title.
    */
   title: {
     type: String,
@@ -118,7 +118,7 @@ const props = defineProps({
   },
 
   /**
-   * Set page title size.
+   * Page title size.
    * @values xs, sm, md, lg, xl, 2xl
    */
   titleSize: {
@@ -137,7 +137,7 @@ const props = defineProps({
   /**
    * Back link vue-router route object.
    */
-  backRoute: {
+  backTo: {
     type: Object,
     default: () => ({}),
   },
@@ -151,21 +151,13 @@ const props = defineProps({
   },
 
   /**
-   * Set gray background color.
+   * Sets background light gray (useful if the page contains nested cards).
    */
   gray: {
     type: Boolean,
     default: getDefault(defaultConfig, UPage).gray,
   },
 
-  /**
-   * Reverse left and right footer blocks (in a mobile version only).
-   */
-  mobileFooterReverse: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UPage).mobileFooterReverse,
-  },
-
   /**
    * Stick right page rounding.
    */
@@ -206,6 +198,7 @@ const {
   descriptionAttrs,
   headerLeftAttrs,
   headerRightAttrs,
+  bodyAttrs,
   footerAttrs,
   footerLeftAttrs,
   footerRightAttrs,
@@ -213,27 +206,22 @@ const {
   hasSlotContent,
 } = useAttrs(props, { isMobileBreakpoint });
 
-const isShownHeader = computed(() => {
-  const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
-  const isHeaderRightSlot = hasSlotContent(slots["header-right"]);
-  const isHeaderLeftBeforeSlot = hasSlotContent(slots["header-left-before"]);
-  const isHeaderLeftAfterSlot = hasSlotContent(slots["header-left-after"]);
-
+const isExistHeader = computed(() => {
   return (
     props.title ||
-    isHeaderLeftSlot ||
-    isHeaderLeftBeforeSlot ||
-    isHeaderLeftAfterSlot ||
-    isHeaderRightSlot
+    hasSlotContent(slots["header-left"]) ||
+    hasSlotContent(slots["header-right"]) ||
+    hasSlotContent(slots["before-title"]) ||
+    hasSlotContent(slots["after-title"])
   );
 });
 
-const isShownFooterSlot = computed(() => {
+const isExistFooter = computed(() => {
   return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
 });
 
 const isShownArrowButton = computed(() => {
-  return Boolean(Object.keys(props.backRoute).length);
+  return Boolean(Object.keys(props.backTo).length);
 });
 
 onMounted(() => {
@@ -244,59 +232,3 @@ onMounted(() => {
   document.querySelector("body").classList.add(...classes);
 });
 </script>
-
-<!--style lang="postcss" scoped>
-/**
-  * TODO: Move this styles to global vueless config using tailwind group class and remove footer classes
-  *
-.vueless-page {
-  &-footer {
-    &-left:deep(.vueless-dropdown-button) {
-      @apply !block;
-    }
-
-    &-right,
-    &-left {
-      :deep(.vueless-dropdown-button) {
-        .dropdown-block,
-        .vueless-dropdown-button-list {
-          @apply max-md:w-full;
-        }
-
-        .vueless-dropdown-item {
-          @apply max-md:text-center;
-        }
-
-        .dropdown-list {
-           @apply xmb-[calc(theme("spacing.mobile-menu-height")+3rem)];
-        }
-      }
-
-      &:deep(.vueless-dropdown-tag, .vueless-dropdown-link, .vueless-dropdown-button) {
-        @apply w-full md:w-auto;
-
-        .dropdown-wrapper-list {
-          @apply mb-2 md:mb-0;
-        }
-
-        .dropdown-block {
-          @apply relative md:absolute;
-        }
-
-        .dropdown-list-right {
-          @apply w-full text-center;
-        }
-
-        .dropdown-wrapper {
-          @apply block w-full;
-
-          .vueless-svg-icon {
-            @apply right-auto;
-          }
-        }
-      }
-    }
-  }
-}
-*/
-</style-->

package/ui.container-page/config.js

@@ -4,7 +4,7 @@ export default /*tw*/ {
   wrapper: {
     base: "min-h-screen UNotifyPage",
     variants: {
-      width: {
+      size: {
         xs: "md:w-[25rem] md:max-[500px]:!w-full",
         sm: "md:w-[31.25rem] md:max-[600px]:!w-full",
         md: "md:w-[37.5rem] md:max-[700px]:!w-full",
@@ -43,13 +43,10 @@ export default /*tw*/ {
   title: "{UHeader}",
   description: "mt-1.5 text-base font-normal text-gray-500",
   headerRight: "",
+  body: "",
   footer: `mb-0 mt-14 justify-between pt-8 md:flex md:items-baseline space-y-4 md:space-y-0 border-t border-gray-200`,
   footerLeft: "md:flex space-y-4 md:space-x-4 md:space-y-0",
-  footerRight: `
-    md:flex space-y-4 md:space-x-4 md:space-y-0 group-[]/reversed-footer:flex
-    group-[]/reversed-footer:flex-col-reverse group-[]/reversed-footer:space-y-reverse
-  `,
-  footerMobileReverse: "flex flex-col-reverse space-y-reverse group/reversed-footer",
+  footerRight: "md:flex space-y-4 md:space-x-4 md:space-y-0",
   rightRoundingWrapper: "absolute right-4",
   rightRounding: {
     base: "fixed top-0 w-4 rounded-r-2xl bg-white h-screen",
@@ -61,11 +58,10 @@ export default /*tw*/ {
     },
   },
   defaults: {
-    titleSize: "lg",
-    width: "wide",
+    titleSize: "md",
+    size: "wide",
     gray: false,
     fixedRounding: false,
-    mobileFooterReverse: false,
     /* icons */
     backIcon: "arrow_back",
   },

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

@@ -64,62 +64,46 @@ Default.args = {};
 export const TitleSizeSm = DefaultTemplate.bind({});
 TitleSizeSm.args = { titleSize: "sm" };
 
-export const Classes = DefaultTemplate.bind({});
-Classes.args = {
-  classes: {
-    header: "text-violet-300",
-  },
-};
-
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Page description" };
 
-export const Width = DefaultTemplate.bind({});
-Width.args = { width: "md", title: "Width = md" };
+export const Size = DefaultTemplate.bind({});
+Size.args = { size: "sm", title: "size = md" };
 
-export const WidePage = DefaultTemplate.bind({});
-WidePage.args = { widePage: true, width: "sm" };
-
-export const BackRoute = DefaultTemplate.bind({});
-BackRoute.args = {
+export const BackLink = DefaultTemplate.bind({});
+BackLink.args = {
   backLabel: "back",
-  backRoute: {
+  backTo: {
     path: "/",
     params: {},
   },
 };
 
-export const SlotHeaderLeftBefore = DefaultTemplate.bind({});
-SlotHeaderLeftBefore.args = {
+export const SlotHeaderLeft = DefaultTemplate.bind({});
+SlotHeaderLeft.args = {
   slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="close"
-        color="gray"
-      />
+    <template #header-left>
+      <UHeader size="lg" label="Large title" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeft = DefaultTemplate.bind({});
-SlotHeaderLeft.args = {
+export const SlotBeforeTitle = DefaultTemplate.bind({});
+SlotBeforeTitle.args = {
   slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
+    <template #before-title>
+      <UIcon name="close" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeftAfter = DefaultTemplate.bind({});
-SlotHeaderLeftAfter.args = {
+export const SlotAfterTitle = DefaultTemplate.bind({});
+SlotAfterTitle.args = {
   slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="close"
-        color="gray"
-      />
+    <template #after-title>
+      <UIcon name="close" color="gray" />
     </template>
     ${defaultTemplate}
   `,

package/ui.container-page/useAttrs.js

@@ -8,9 +8,10 @@ export default function useAttrs(props, { isMobileBreakpoint }) {
   const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
+    "wrapper",
   );
 
-  const extendingKeys = ["wrapperMobile", "footerMobileReverse"];
+  const extendingKeys = ["wrapperMobile"];
   const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
   const keysAttrs = getKeysAttrs({}, extendingKeys, {
@@ -19,13 +20,6 @@ export default function useAttrs(props, { isMobileBreakpoint }) {
         isMobileBreakpoint.value && !isMobileApp && extendingKeysClasses.wrapperMobile.value,
       ]),
     },
-    footer: {
-      extend: computed(() => [
-        props.mobileFooterReverse &&
-          isMobileBreakpoint.value &&
-          extendingKeysClasses.footerMobileReverse.value,
-      ]),
-    },
   });
 
   return {