@designcrowd/fe-shared-lib 1.0.1-6.eng2594 → 1.0.1-jj1

package/src/atoms/components/Modal/Modal.vue

@@ -1,258 +1,234 @@
-<template>
-  <div
-    v-show="visible"
-    :aria-hidden="visible ? 'false' : 'true'"
-    class="tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
-    :class="{
-      'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
-      'sm:tw-px-4': fullScreenBreakpoint === 'sm' && !isImageMode,
-      'tw-bg-opacity-75': !darkOverlay,
-    }"
-    @mousedown.self="close"
-  >
-    <div
-      class="modal tw-shadow-xl tw-bg-grayscale-200 tw-relative tw-flex tw-flex-col tw-box-border tw-outline-none"
-      :class="[
-        {
-          'tw-w-full': !isImageMode,
-          'tw-p-4': !simple,
-          'tw-max-w-md': size === 'md',
-          'tw-max-w-xl': size === 'xl',
-          'tw-max-w-2xl': !size && !isImageMode,
-          'tw-max-h-screen-90 tw-mx-4': fullScreenBreakpoint === undefined && removeHorizontalMargin === false,
-          'tw-max-h-screen tw-h-full sm:tw-h-auto tw-rounded-none sm:tw-rounded-md': fullScreenBreakpoint === 'sm',
-          'tw-rounded-md': fullScreenBreakpoint !== 'sm',
-          'modal-bg': !simple && !isImageMode && showModalBackgroundImage,
-          'modal-image': isImageMode,
-          'tw-bg-transparent': transparentModal,
-        },
-        classes,
-      ]"
-      @keydown.esc="closeOnEsc && close()"
-    >
-      <div
-        :class="{
-          'tw-relative': !simple,
-          'tw-absolute tw-top-0 tw-right-0 tw-transform tw-translate-y-4 tw--translate-x-4 tw-z-30': simple,
-        }"
-      >
-        <div
-          :class="{
-            'header-min-height': !mandatory,
-          }"
-        >
-          <slot name="header" />
-        </div>
-        <button
-          v-if="!mandatory"
-          class="tw-absolute tw-right-0 tw-top-0 tw-border-none tw-text-secondary-500 tw-appearance-none tw-bg-transparent tw-p-0 tw-w-8 tw-h-8 tw-ml-auto tw-cursor-pointer"
-          data-test-modal-close-btn
-          @click="close($event)"
-        >
-          <span class="tw-sr-only">Close modal</span>
-          <Icon name="close" size="sm" />
-        </button>
-      </div>
-      <div
-        class="modal-content tw-flex tw-flex-col tw-h-full"
-        :class="[
-          {
-            'tw-overflow-y-auto': !isImageMode && !contentClasses.find((i) => i.includes('tw-overflow-y')),
-            'hide-scroll': hideScrollbar,
-          },
-          contentClasses,
-        ]"
-      >
-        <slot name="default" />
-      </div>
-      <div>
-        <slot name="footer" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Icon from '../Icon/Icon.vue';
-
-const modalBackgroundImage = 'https://bcassetcdn.com/scl-assets/images/modal-background.svg';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    simple: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    removeHorizontalMargin: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    mandatory: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    mode: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    classes: {
-      type: [String, Object],
-      required: false,
-      default: '',
-    },
-    contentClasses: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    size: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    fullScreenBreakpoint: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    closeOnEsc: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    hideScrollbar: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    showModalBackgroundImage: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    disableBodyScrollOnVisible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    darkOverlay: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    transparentModal: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    isImageMode() {
-      return this.mode === 'image';
-    },
-  },
-  watch: {
-    visible(visible) {
-      if (this.disableBodyScrollOnVisible) {
-        if (visible) {
-          document.getElementsByTagName('body')[0]?.classList.add('tw-overflow-hidden');
-        } else {
-          document.getElementsByTagName('body')[0]?.classList.remove('tw-overflow-hidden');
-        }
-      }
-      if (visible && this.closeOnEsc) {
-        document.addEventListener('keydown', this.closeModalOnKeyDown);
-      } else {
-        document.removeEventListener('keydown', this.closeModalOnKeyDown);
-      }
-    },
-  },
-  mounted() {
-    if (this.closeOnEsc) {
-      document.addEventListener('keydown', this.closeModalOnKeyDown);
-    }
-
-    if (this.showModalBackgroundImage) {
-      try {
-        const preloadBgLink = document.createElement('link');
-        preloadBgLink.href = modalBackgroundImage;
-        preloadBgLink.rel = 'preload';
-        preloadBgLink.as = 'image';
-
-        document.getElementsByTagName('head')[0].appendChild(preloadBgLink);
-      } catch (err) {
-        console.warn('Unable to inject modal background preload', err);
-      }
-    }
-  },
-  unmounted() {
-    if (this.closeOnEsc) {
-      document.removeEventListener('keydown', this.closeModalOnKeyDown);
-    }
-  },
-  methods: {
-    closeModalOnKeyDown(event) {
-      const evt = event || window.event;
-      let isEscape = false;
-      if ('key' in evt) {
-        isEscape = evt.key === 'Escape' || evt.key === 'Esc';
-      } else {
-        isEscape = evt.keyCode === 27;
-      }
-      if (isEscape) {
-        document.removeEventListener('keydown', this.closeModalOnKeyDown);
-        this.close();
-      }
-    },
-    close($event) {
-      if (this.mandatory) return;
-      this.$emit('close-modal', $event);
-    },
-  },
-};
-</script>
-<style scoped>
-/* Ensure modal height is not longer than screen */
-.modal {
-  max-height: 100vh;
-}
-
-.modal.modal-bg {
-  background-image: url(https://bcassetcdn.com/scl-assets/images/modal-background.svg);
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.modal .hide-scroll::-webkit-scrollbar {
-  @apply tw-hidden;
-}
-
-.modal .hide-scroll {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-.modal .header-min-height {
-  min-height: 32px; /* For close button */
-}
-
-.modal.modal-image .modal-content img {
-  max-width: 100%;
-  max-height: 90vh;
-}
-
-/* Swiper keyboard event will not work if wrapper content height is larger than the screen height */
-.modal :deep(.swiper-wrapper) {
-  max-height: 90vh;
-}
-</style>
+<template>
+  <div
+    v-show="visible"
+    :aria-hidden="visible ? 'false' : 'true'"
+    class="tw-bg-black tw-bg-opacity-75 tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
+    :class="{
+      'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
+      'sm:tw-px-4': fullScreenBreakpoint === 'sm' && !isImageMode,
+    }"
+    @mousedown.self="close"
+  >
+    <div
+      class="modal tw-shadow-xl tw-bg-grayscale-200 tw-relative tw-flex tw-flex-col tw-box-border tw-outline-none"
+      :class="[
+        {
+          'tw-w-full': !isImageMode,
+          'tw-p-4': !simple,
+          'tw-max-w-md': size === 'md',
+          'tw-max-w-xl': size === 'xl',
+          'tw-max-w-2xl': !size && !isImageMode,
+          'tw-max-h-screen-90 tw-mx-4': fullScreenBreakpoint === undefined && removeHorizontalMargin === false,
+          'tw-max-h-screen tw-h-full sm:tw-h-auto tw-rounded-none sm:tw-rounded-md': fullScreenBreakpoint === 'sm',
+          'tw-rounded-md': fullScreenBreakpoint !== 'sm',
+          'modal-bg': !simple && !isImageMode && showModalBackgroundImage,
+          'modal-image': isImageMode,
+        },
+        classes,
+      ]"
+      @keydown.esc="closeOnEsc && close()"
+    >
+      <div
+        :class="{
+          'tw-relative': !simple,
+          'tw-absolute tw-top-0 tw-right-0 tw-transform tw-translate-y-4 tw--translate-x-4 tw-z-30': simple,
+        }"
+      >
+        <div
+          :class="{
+            'header-min-height': !mandatory,
+          }"
+        >
+          <slot name="header" />
+        </div>
+        <button
+          v-if="!mandatory"
+          class="tw-absolute tw-right-0 tw-top-0 tw-border-none tw-text-secondary-500 tw-appearance-none tw-bg-transparent tw-p-0 tw-w-8 tw-h-8 tw-ml-auto tw-cursor-pointer"
+          data-test-modal-close-btn
+          @click="close($event)"
+        >
+          <span class="tw-sr-only">Close modal</span>
+          <Icon name="close" size="sm" />
+        </button>
+      </div>
+      <div
+        class="modal-content tw-flex tw-flex-col tw-h-full"
+        :class="[
+          {
+            'tw-overflow-y-auto': !isImageMode && !contentClasses.find((i) => i.includes('tw-overflow-y')),
+            'hide-scroll': hideScrollbar,
+          },
+          contentClasses,
+        ]"
+      >
+        <slot name="default" />
+      </div>
+      <div>
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Icon from '../Icon/Icon.vue';
+
+const modalBackgroundImage = 'https://bcassetcdn.com/scl-assets/images/modal-background.svg';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    simple: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    removeHorizontalMargin: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    mandatory: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    classes: {
+      type: [String, Object],
+      required: false,
+      default: '',
+    },
+    contentClasses: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    size: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    fullScreenBreakpoint: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    closeOnEsc: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hideScrollbar: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showModalBackgroundImage: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    isImageMode() {
+      return this.mode === 'image';
+    },
+  },
+  watch: {
+    visible(visible) {
+      if (visible && this.closeOnEsc) {
+        document.addEventListener('keydown', this.closeModalOnKeyDown);
+      } else {
+        document.removeEventListener('keydown', this.closeModalOnKeyDown);
+      }
+    },
+  },
+  mounted() {
+    if (this.closeOnEsc) {
+      document.addEventListener('keydown', this.closeModalOnKeyDown);
+    }
+
+    if (this.showModalBackgroundImage) {
+      try {
+        const preloadBgLink = document.createElement('link');
+        preloadBgLink.href = modalBackgroundImage;
+        preloadBgLink.rel = 'preload';
+        preloadBgLink.as = 'image';
+
+        document.getElementsByTagName('head')[0].appendChild(preloadBgLink);
+      } catch (err) {
+        console.warn('Unable to inject modal background preload', err);
+      }
+    }
+  },
+  unmounted() {
+    if (this.closeOnEsc) {
+      document.removeEventListener('keydown', this.closeModalOnKeyDown);
+    }
+  },
+  methods: {
+    closeModalOnKeyDown(event) {
+      const evt = event || window.event;
+      let isEscape = false;
+      if ('key' in evt) {
+        isEscape = evt.key === 'Escape' || evt.key === 'Esc';
+      } else {
+        isEscape = evt.keyCode === 27;
+      }
+      if (isEscape) {
+        document.removeEventListener('keydown', this.closeModalOnKeyDown);
+        this.close();
+      }
+    },
+    close($event) {
+      if (this.mandatory) return;
+      this.$emit('close-modal', $event);
+    },
+  },
+};
+</script>
+<style scoped>
+/* Ensure modal height is not longer than screen */
+.modal {
+  max-height: 100vh;
+}
+
+.modal.modal-bg {
+  background-image: url(https://bcassetcdn.com/scl-assets/images/modal-background.svg);
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.modal .hide-scroll::-webkit-scrollbar {
+  @apply tw-hidden;
+}
+
+.modal .hide-scroll {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.modal .header-min-height {
+  min-height: 32px; /* For close button */
+}
+
+.modal.modal-image .modal-content img {
+  max-width: 100%;
+  max-height: 90vh;
+}
+
+/* Swiper keyboard event will not work if wrapper content height is larger than the screen height */
+.modal :deep(.swiper-wrapper) {
+  max-height: 90vh;
+}
+</style>