vueless 0.0.2 → 0.0.3

package/ui.container-modal/index.vue

@@ -1,416 +1,335 @@
 <template>
-  <t-modal
-    ref="pageModal"
-    v-model="isShownModal"
-    :classes="modalClasses"
-    :class="[ourModalClasses, modalWidthClass]"
-    :click-to-close="clickToClose"
-    :esc-to-close="escToClose"
-    :disable-body-scroll="disableBodyScroll"
-    :data-cy="dataCy"
-    hide-close-button
-    @closed="onCloseModal"
-  >
-    <div class="mono-modal">
-      <div class="mono-modal-header">
-        <div class="mono-modal-header-left-wrapper">
-          <!-- @slot Use it to add something to the header left before. -->
-          <slot name="header-left-before" />
-
-          <!-- @slot Use it to add something to the header left. -->
-          <slot name="header-left">
-            <ArrowLink
-              v-if="isShownArrowButton"
-              :back-route="backRoute"
-              :data-cy="`${dataCy}-back`"
-              @click="onClickBack"
+  <transition v-bind="config.overlayTransition">
+    <div v-if="isShownModal" v-bind="overlayAttrs" />
+  </transition>
+
+  <transition v-bind="config.wrapperTransition">
+    <div
+      v-if="isShownModal"
+      :id="id"
+      ref="wrapperRef"
+      tabindex="0"
+      :data-cy="dataCy"
+      v-bind="wrapperAttrs"
+      @keydown.self.esc="onKeydownEsc"
+    >
+      <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
+        <div v-bind="modalAttrs">
+          <div v-if="isExistHeader" v-bind="headerAttrs">
+            <div v-bind="headerLeftAttrs">
+              <!-- @slot Use it to add something to the header left before. -->
+              <slot name="header-left-before" />
+
+              <!-- @slot Use it to add something to the header left. -->
+              <slot name="header-left">
+                <div v-bind="headerLeftFallbackAttrs">
+                  <ULink
+                    v-if="isShownArrowButton"
+                    size="xs"
+                    color="gray"
+                    :route="backRoute"
+                    v-bind="backLinkAttrs"
+                    @click="onClickBackLink"
+                  >
+                    <UIcon
+                      :name="config.backLinkIconName"
+                      size="xs"
+                      color="gray"
+                      v-bind="backLinkIconAttrs"
+                    />
+                    {{ backRoute.title }}
+                  </ULink>
+
+                  <UHeader size="md" :color="titleColor" :label="title" v-bind="titleAttrs" />
+                  <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
+                </div>
+              </slot>
+
+              <!-- @slot Use it to add something to the header left after. -->
+              <slot name="header-left-after" />
+            </div>
+
+            <div v-bind="headerRightAttrs">
+              <!-- @slot Use it to add something to the header right. -->
+              <slot name="header-right">
+                <UIcon
+                  v-if="closeIcon"
+                  :name="config.closeIconName"
+                  interactive
+                  :data-cy="`${dataCy}-close`"
+                  v-bind="closeIconAttrs"
+                  @click="onClickCloseModal"
+                />
+              </slot>
+            </div>
+          </div>
+
+          <div v-bind="bodyAttrs">
+            <!-- @slot Use it to add something to the modal body. -->
+            <slot />
+          </div>
+
+          <UDivider v-if="!isExistFooter || !noDivider" no-border v-bind="dividerSpacingAttrs" />
+
+          <template v-if="isExistFooter">
+            <UDivider
+              v-if="!noDivider"
+              variant="dark"
+              no-bottom-padding
+              no-top-padding
+              v-bind="dividerAttrs"
             />
 
-            <div>
-              <UHeader size="md" :color="color" :text="title" />
-              <div v-if="description" class="mono-modal-header-subtitle">
-                {{ description }}
+            <div v-bind="footerAttrs">
+              <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
+                <!-- @slot Use it to add something to the footer left. -->
+                <slot name="footer-left" />
               </div>
-            </div>
-          </slot>
 
-          <!-- @slot Use it to add something to the header left after. -->
-          <slot name="header-left-after" />
+              <div v-if="hasSlotContent($slots['footer-right'])" v-bind="footerRightAttrs">
+                <!-- @slot Use it to add something to the footer right. -->
+                <slot name="footer-right" />
+              </div>
+            </div>
+          </template>
         </div>
-
-        <!-- @slot Use it to add something to the header right. -->
-        <slot name="header-right">
-          <UIcon
-            v-if="showCloseIcon"
-            name="close"
-            class="icon"
-            :data-cy="`${dataCy}-close`"
-            @click="onCloseModal"
-          />
-        </slot>
-      </div>
-
-      <div class="mono-modal-body">
-        <!-- @slot Use it to add something to the modal body. -->
-        <slot />
       </div>
     </div>
-
-    <UDivider v-if="!noDivider" no-border />
-
-    <template v-if="isExistFooter" #footer>
-      <UDivider v-if="!noDivider" variant="dark" no-bottom-padding no-top-padding />
-
-      <div class="mono-modal-footer" :class="reverseFooterClass">
-        <div v-if="isExistSlot('footer-left')" class="mono-modal-footer-left">
-          <!-- @slot Use it to add something to the footer left. -->
-          <slot name="footer-left" />
-        </div>
-
-        <div v-if="isExistSlot('footer-right')" class="mono-modal-footer-right">
-          <!-- @slot Use it to add something to the footer right. -->
-          <slot name="footer-right" />
-        </div>
-      </div>
-    </template>
-  </t-modal>
+  </transition>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script setup>
+import { computed, useSlots, watch, ref } from "vue";
+
+import UIService, { getRandomId } from "vueless/service.ui";
 
-import ArrowLink from "./components/ArrowLink.vue";
-import TModal from "vueless/library.vue-tailwind-3/t-modal";
 import UIcon from "vueless/ui.image-icon";
 import UHeader from "vueless/ui.text-header";
 import UDivider from "vueless/ui.container-divider";
 
-export default {
-  name: "UModal",
+import defaultConfig from "./configs/default.config";
+import { UModal } from "./constants/index";
+import { useAttrs } from "./composables/attrs.composable";
 
-  components: {
-    ArrowLink,
-    TModal,
-    UIcon,
-    UHeader,
-    UDivider,
-  },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UModal", inheritAttrs: false });
+const slots = useSlots();
 
-  props: {
-    /**
-     * Set width for modal.
-     * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
-     */
-    width: {
-      type: String,
-      default: "sm",
-    },
-
-    /**
-     * Set modal's title.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets page description.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set back route params (name, title, params).
-     */
-    backRoute: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    /**
-     * Make active click for close.
-     */
-    clickToClose: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Make close icon active.
-     */
-    showCloseIcon: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Make active ESC for close.
-     */
-    escToClose: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Change modal state (hidden / shown).
-     */
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * The color of the title.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Add extra top margin for modal inside modal.
-     */
-    inner: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Removes divider between end of content end footer.
-     */
-    noDivider: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Reverse left and right footer blocks (in a mobile version only).
-     */
-    mobileFooterReverse: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Attach small modal to the bottom of the screen (nice for confirm modal).
-     */
-    mobileBottomAlign: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
+const wrapperRef = ref(null);
 
-  emits: ["clickBack", "update:modelValue"],
-
-  computed: {
-    ...mapGetters("breakpoint", ["isMobileDevice"]),
-
-    disableBodyScroll() {
-      return !this.isMobileDevice;
-    },
-
-    ourModalClasses() {
-      const inner = this.inner ? "mono-modal-inner" : "";
-
-      return [inner];
-    },
-
-    modalWidthClass() {
-      return {
-        "mono-modal-size-xs": this.width === "xs", // 400px
-        "mono-modal-size-sm": this.width === "sm", //   500px
-        "mono-modal-size-md": this.width === "md", //   600px
-        "mono-modal-size-lg": this.width === "lg", //   700px
-        "mono-modal-size-xl": this.width === "xl", //   800px
-        "mono-modal-size-2xl": this.width === "2xl", // 900px
-        "mono-modal-size-3xl": this.width === "3xl", // 1000px
-        "mono-modal-size-4xl": this.width === "4xl", // 1100px
-        "mono-modal-size-5xl": this.width === "5xl", // 1200px
-      };
-    },
-
-    modalClasses() {
-      return {
-        overlay: "!mt-0 z-50 bg-gray-900 bg-opacity-75 outline-none bottom-10",
-        wrapper: `flex md:justify-start flex-col z-50 mx-3 md:py-12 mono-modal-wrapper
-          ${this.mobileBottomAlign ? "h-full justify-end" : "justify-start"}`,
-        modal: `t-modal bg-white shadow rounded-t-2xl md:rounded-2xl p-0 pb-safe-bottom mt-safe-top`,
-        footer: "rounded-b-2xl",
-        overlayEnterClass: "opacity-0",
-        overlayEnterActiveClass: "transition ease-out duration-300",
-        overlayEnterToClass: "opacity-100",
-        overlayLeaveFromClass: "opacity-100",
-        overlayLeaveActiveClass: "transition ease-in duration-200",
-        overlayLeaveToClass: "opacity-0",
-        enterFromClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
-        enterActiveClass: "transition ease-out duration-300",
-        enterToClass: "opacity-100 translate-y-0 transform sm:scale-100",
-        leaveFromClass: "opacity-100 translate-y-0 transform sm:scale-100",
-        leaveActiveClass: "transition ease-in duration-200",
-        leaveToClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
-      };
-    },
-
-    reverseFooterClass() {
-      return {
-        "reverse-footer": this.mobileFooterReverse && this.isMobileDevice,
-      };
-    },
-
-    headerTitleClass() {
-      return Object.keys(this.backRoute).length ? "padding-left" : "";
-    },
-
-    isShownModal: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    isShownArrowButton() {
-      return !!Object.keys(this.backRoute).length;
-    },
-
-    isExistFooter() {
-      return this.isExistSlot("footer-left") || this.isExistSlot("footer-right");
-    },
+const props = defineProps({
+  /**
+   * Change modal state (hidden / shown).
+   */
+  modelValue: {
+    type: Boolean,
+    default: false,
   },
 
-  methods: {
-    showModal() {
-      this.isShownModal = true;
-    },
-
-    closeModal() {
-      this.isShownModal = false;
-    },
-
-    onCloseModal() {
-      this.closeModal();
-    },
+  /**
+   * Set modal title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
 
-    onClickBack() {
-      this.$emit("clickBack");
-    },
+  /**
+   * The color of the title.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+   */
+  titleColor: {
+    type: String,
+    default: UIService.get(defaultConfig, UModal).default.color,
+  },
 
-    isExistSlot(slotName) {
-      return !!this.$slots[slotName];
-    },
+  /**
+   * Sets modal description.
+   */
+  description: {
+    type: String,
+    default: "",
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-modal {
-  &-header {
-    @apply flex items-center justify-between;
-    @apply px-4 md:px-8 pb-6 pt-8;
-
-    &-left {
-      &-wrapper {
-        @apply flex items-center space-x-4;
-      }
-    }
-
-    &-title {
-      @apply text-3xl font-medium text-gray-900;
-    }
-
-    .icon {
-      @apply cursor-pointer;
-    }
-
-    &-subtitle {
-      @apply mt-1.5 text-base font-normal text-gray-600;
-    }
-  }
+  /**
+   * Set back link route.
+   */
+  backRoute: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  &-body {
-    @apply space-y-4;
-    @apply px-4 md:px-8;
-  }
+  /**
+   * Set width for modal.
+   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
+   */
+  width: {
+    type: String,
+    default: UIService.get(defaultConfig, UModal).default.width,
+  },
 
-  &-footer {
-    @apply flex justify-between px-4 md:px-8 py-8;
-    @apply max-md:flex-col max-md:gap-4;
+  /**
+   * Allow closing modal by clicking on overlay.
+   */
+  clickToClose: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UModal).default.clickToClose,
+  },
 
-    &-left,
-    &-right {
-      @apply flex flex-col md:flex-row;
-      @apply space-y-4 md:space-x-4 md:space-y-0;
-      @apply w-full;
-    }
+  /**
+   * Allow closing modal by clicking on close icon.
+   */
+  closeIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UModal).default.closeIcon,
+  },
 
-    &-right {
-      @apply justify-end;
-    }
-  }
-}
+  /**
+   * Allow closing modal by pressing escape (esc) key.
+   */
+  escToClose: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UModal).default.escToClose,
+  },
 
-.padding-left {
-  @apply pl-2;
-}
+  /**
+   * Add extra top margin for modal inside another modal.
+   */
+  inner: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UModal).default.inner,
+  },
 
-.mono-modal-size-xs > :deep(.mono-modal-wrapper) {
-  @apply md:w-100;
-}
+  /**
+   * Hide divider between content end footer.
+   */
+  noDivider: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UModal).default.noDivider,
+  },
 
-.mono-modal-size-sm > :deep(.mono-modal-wrapper) {
-  @apply md:w-125;
-}
+  /**
+   * Reverse left and right footer blocks (mobile version only).
+   */
+  mobileFooterReverse: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UModal).default.mobileFooterReverse,
+  },
 
-.mono-modal-size-md > :deep(.mono-modal-wrapper) {
-  @apply md:w-150;
-}
+  /**
+   * Attach small modal to the bottom of the screen (mobile version only).
+   */
+  mobileBottomAlign: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UModal).default.mobileBottomAlign,
+  },
 
-.mono-modal-size-lg > :deep(.mono-modal-wrapper) {
-  @apply md:w-175;
-}
+  /**
+   * Set component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-.mono-modal-size-xl > :deep(.mono-modal-wrapper) {
-  @apply md:w-200;
-}
+  /**
+   * Unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-.mono-modal-size-2xl > :deep(.mono-modal-wrapper) {
-  @apply md:w-225;
+  /**
+   * Set data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "back"]);
+
+const {
+  config,
+  modalAttrs,
+  titleAttrs,
+  backLinkAttrs,
+  backLinkIconAttrs,
+  closeIconAttrs,
+  dividerAttrs,
+  dividerSpacingAttrs,
+  overlayAttrs,
+  wrapperAttrs,
+  innerWrapperAttrs,
+  headerAttrs,
+  headerLeftAttrs,
+  headerLeftFallbackAttrs,
+  descriptionAttrs,
+  headerRightAttrs,
+  bodyAttrs,
+  footerLeftAttrs,
+  footerAttrs,
+  footerRightAttrs,
+  hasSlotContent,
+} = useAttrs(props);
+
+const isShownModal = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const isShownArrowButton = computed(() => {
+  return !!Object.keys(props.backRoute).length;
+});
+
+const isExistHeader = computed(() => {
+  return (
+    hasSlotContent(slots["header-left"]) ||
+    hasSlotContent(slots["header-left-before"]) ||
+    hasSlotContent(slots["header-left-after"]) ||
+    hasSlotContent(slots["header-right"]) ||
+    props.title
+  );
+});
+
+const isExistFooter = computed(() => {
+  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
+});
+
+watch(() => isShownModal.value, preventOverlayFromScrolling);
+
+function preventOverlayFromScrolling(newValue) {
+  // focus wrapper to be able to close modal on esc
+  setTimeout(() => wrapperRef.value?.focus(), 0);
+
+  if (newValue) {
+    document.body.style.overflow = "hidden";
+  } else {
+    document.getElementById(`${props.id}`).style.overflow = "hidden";
+    document.body.style.overflow = "auto";
+  }
 }
 
-.mono-modal-size-3xl > :deep(.mono-modal-wrapper) {
-  @apply md:w-250;
+function onClickBackLink() {
+  emit("back");
 }
 
-.mono-modal-size-4xl > :deep(.mono-modal-wrapper) {
-  @apply md:w-275;
+function onClickOutside() {
+  props.clickToClose && closeModal();
 }
 
-.mono-modal-size-5xl > :deep(.mono-modal-wrapper) {
-  @apply md:w-300;
+function onKeydownEsc() {
+  props.escToClose && closeModal();
 }
 
-.mono-modal-inner > :deep(.mono-modal-wrapper) {
-  @apply !my-[4.5rem];
+function onClickCloseModal() {
+  props.closeIcon && closeModal();
 }
 
-.reverse-footer {
-  @apply flex flex-col space-y-4;
-
-  .page-footer-right {
-    @apply flex flex-col-reverse space-y-reverse;
-  }
+function closeModal() {
+  isShownModal.value = false;
 }
-</style>
+</script>