@usssa/component-library 1.0.0-alpha.27 → 1.0.0-alpha.271

package/src/components/core/UModal.vue

@@ -0,0 +1,660 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import UBtnStd from './UBtnStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits(['onBackIconClick', 'hideDialog'])
+const model = defineModel()
+const props = defineProps({
+  class: {
+    type: String,
+    default: 'filter-dialog-modal',
+  },
+  closeIcon: String,
+  closeIconLabel: String,
+  customSize: {
+    type: String,
+  },
+  dataTestId: {
+    type: String,
+    default: 'modal',
+  },
+  dataTestIdCloseIcon: {
+    type: String,
+    default: 'modal-close',
+  },
+  divider: Boolean,
+  heading: {
+    type: String,
+    required: true,
+  },
+  headingCaption: String,
+  leftIcon: String,
+  leftIconLabel: String,
+  position: String,
+  showActionButtons: Boolean,
+  showSecondaryButtons: Boolean,
+  size: {
+    type: String,
+    default: 'default',
+  },
+})
+
+// constants
+const MIN_HEIGHT = 120
+let isDragging = false
+let startHeight = 0
+let startY = 0
+
+const $screen = useScreenType()
+const $slots = useSlots()
+const $q = useQuasar()
+
+const currentDialogHeight = ref(null)
+const dialogMaxHeight = ref(null)
+const dialogRef = ref(true)
+const scrollableMarginHeight = ref(null)
+
+const className = computed(() => {
+  return props.class ? props.class : 'filter-dialog-modal'
+})
+const dialogStyle = computed(() => ({
+  '--customSize': props.customSize,
+}))
+const headerClass = computed(() => {
+  return props.divider ? 'divider' : ''
+})
+const isDesktop = computed(() => $screen.value.isDesktop)
+const isMobile = computed(() => $screen.value.isMobile)
+const isSmallWidthDevices = computed(() => $q.screen.width < 400)
+const isTablet = computed(() => $screen.value.isTablet)
+const isWidthChanging = computed(() => {
+  return {
+    width: $q.screen.width,
+  }
+})
+const slotsLength = computed(
+  () =>
+    Object.keys($slots).filter(
+      (slot) => !['content', 'secondary_row'].includes(slot)
+    ).length
+)
+
+const smallDevices = computed(() => {
+  return {
+    sm: $q.screen.height < 800 && $q.screen.height > 700,
+    xs: $q.screen.height < 700,
+  }
+})
+
+const getActionsWrapperFlex = () => {
+  if (isMobile.value) {
+    if (slotsLength.value >= 3) {
+      return 'wrap'
+    } else {
+      return 'nowrap'
+    }
+  }
+  if (isTablet.value) {
+    if (slotsLength.value >= 2) {
+      return 'nowrap'
+    } else {
+      return 'wrap'
+    }
+  }
+}
+
+const getContentBottomSpace = () => {
+  if (isMobile.value) {
+    if (slotsLength.value >= 3) {
+      return 7.5
+    } else {
+      return 4.5
+    }
+  } else {
+    return 0
+  }
+}
+
+const getDialogHeaderheight = () => {
+  currentDialogHeight.value =
+    props.showActionButtons && props.showSecondaryButtons
+      ? $q.screen.height - 80
+      : props.showActionButtons || props.showSecondaryButtons
+      ? !isTablet.value
+        ? $q.screen.height - 50 + 'px !important'
+        : $q.screen.height / 2 - 50 + 'px !important'
+      : $q.screen.height - 10
+
+  setTimeout(() => {
+    const headingWrapper =
+      document.getElementsByClassName('no-heading-section')[0]
+    if (headingWrapper) {
+      scrollableMarginHeight.value = headingWrapper.clientHeight
+    }
+  },50)
+
+  setTimeout(() => {
+    dialogMaxHeight.value =
+      props.showActionButtons && props.showSecondaryButtons
+        ? $q.screen.height - 80
+        : props.showActionButtons || props.showSecondaryButtons
+        ? $q.screen.height - 50
+        : $q.screen.height - 10
+  }, 100)
+}
+
+const handleBackClick = () => {
+  return emit('onBackIconClick')
+}
+
+const hasSlots = () => {
+  return (!!$slots['action_secondary_one'] ||
+    !!$slots['action_secondary_two']) &&
+    (!!$slots['action_primary_one'] || !!$slots['action_primary_two'])
+    ? '0.5rem'
+    : null
+}
+
+const onDragEnd = () => {
+  isDragging = false
+  window.removeEventListener('mousemove', onDragMove)
+  window.removeEventListener('mouseup', onDragEnd)
+  window.removeEventListener('touchmove', onDragMove)
+  window.removeEventListener('touchend', onDragEnd)
+}
+
+const onDragMove = (event) => {
+  if (!isDragging) return
+  // event.preventDefault()
+  const currentY = event.touches ? event.touches[0].clientY : event.clientY
+  const deltaY = startY - currentY
+  const newHeight = startHeight + deltaY
+  // limiting dialog height to MAX HEIGHT
+  currentDialogHeight.value = Math.min(
+    Math.max(MIN_HEIGHT, newHeight),
+    dialogMaxHeight.value
+  )
+  if (
+    Math.min(Math.max(MIN_HEIGHT, newHeight), dialogMaxHeight.value) <=
+    MIN_HEIGHT
+  ) {
+    setTimeout(() => {
+      dialogRef?.value?.hide() // if user is dragging then it should close from here
+    }, 200)
+  }
+  // currentDialogHeight.value = Math.max(MIN_HEIGHT, startHeight + deltaY) // if limiting not required
+}
+
+const onMouseDown = (event) => {
+  isDragging = true
+  event.preventDefault()
+  startY = event.clientY
+  startHeight = currentDialogHeight.value
+  window.addEventListener('mousemove', (e) => onDragMove(e))
+  window.addEventListener('mouseup', onDragEnd)
+}
+
+const onTouchStart = (event) => {
+  isDragging = true
+  if (event.cancelable) event.preventDefault()
+  startY = event.touches[0].clientY
+  startHeight = currentDialogHeight.value
+  window.addEventListener('touchmove', (e) => onDragMove(e))
+  window.addEventListener('touchend', onDragEnd)
+}
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onDragMove)
+  window.removeEventListener('mouseup', onDragEnd)
+  window.removeEventListener('touchmove', onDragMove)
+  window.removeEventListener('touchend', onDragEnd)
+})
+
+onMounted(() => {
+  getDialogHeaderheight()
+})
+
+watch(
+  isWidthChanging,
+  () => {
+    getDialogHeaderheight()
+  },
+  { immediate: true }
+)
+
+watch(
+  model,
+  () => {
+    getDialogHeaderheight()
+  },
+  { immediate: true }
+)
+
+watch(
+  smallDevices,
+  () => {
+    getDialogHeaderheight()
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <q-dialog
+    v-bind="$attrs"
+    v-model="model"
+    :class="`filter-dialog-${
+      isMobile ? 'full' : isTablet ? 'tab' : size
+    } filter-dialog ${className}`"
+    :dataTestId="dataTestId"
+    full-width
+    no-backdrop-dismiss
+    :position="isMobile ? 'bottom' : position"
+    ref="dialogRef"
+    :style="dialogStyle"
+  >
+    <q-card
+      :class="`dialog-wrapper`"
+      :style="{
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: currentDialogHeight + 'px !important',
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        v-if="isMobile"
+        class="drag-handle-wrapper"
+        @mousedown="onMouseDown($event)"
+        @touchstart="onTouchStart($event)"
+      >
+        <div class="drag-handle" />
+      </div>
+      <q-card-section
+        :class="[
+          `col items-center q-pa-none heading-section ${headerClass}${
+            isMobile ? ' no-heading-section' : ''
+          }`,
+          { mobile: isMobile, desktop: isDesktop || isTablet },
+        ]"
+      >
+        <div class="heading-wrapper row items-center">
+          <div class="flex items-center dialog-heading-container">
+            <div v-if="leftIcon">
+              <UBtnStd
+                class="dialog-action-icons"
+                :aria-label="leftIconLabel"
+                :flat="true"
+                tabindex="0"
+                @click="handleBackClick()"
+              >
+                <q-icon
+                  :class="`icon-back ${leftIcon}`"
+                  size="1.5rem"
+                  tabindex="-1"
+                />
+              </UBtnStd>
+            </div>
+            <div class="col">
+              <div>
+                <span
+                  :class="`${
+                    isMobile ? 'text-heading-xs' : 'text-heading-sm'
+                  } dialog-heading`"
+                >
+                  {{ heading }}
+                </span>
+              </div>
+              <div>
+                <span v-if="headingCaption" class="text-body-xs dialog-caption">
+                  {{ headingCaption }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <UBtnStd
+            class="dialog-action-icons"
+            :aria-label="closeIconLabel"
+            :data-test-id="dataTestIdCloseIcon"
+            :flat="true"
+            tabindex="0"
+            @click="dialogRef.hide()"
+          >
+            <q-icon
+              v-if="closeIcon"
+              :class="`icon-close ${closeIcon} icon-secondary-opacity`"
+              size="1.5rem"
+              tabindex="-1"
+            />
+          </UBtnStd>
+        </div>
+        <div class="row">
+          <slot name="secondary_row" />
+        </div>
+      </q-card-section>
+
+      <q-card-section
+        :class="[
+          ` main-content-dialog scroll q-px-ba${
+            isMobile ? ' scrollable-content' : ''
+          } `,
+          { mobile: isMobile, desktop: isDesktop, tablet: isTablet },
+        ]"
+        :style="{
+          'margin-top': `${
+            isMobile ? scrollableMarginHeight + (isMobile ? 16 : 0) : 0
+          }px`,
+          'margin-bottom': `${getContentBottomSpace()}rem !important`,
+          flex: isMobile ? 'none' : 1,
+          overflowY: 'auto',
+          ...(isMobile && {
+               height:
+               currentDialogHeight -
+                (scrollableMarginHeight +
+                  (hasSlots() && slotsLength >= 3 ? 144 : 88)) +
+                'px',
+          })
+
+        }"
+        tabindex="-1"
+      >
+        <slot name="content" />
+      </q-card-section>
+
+      <div
+        v-if="showActionButtons || showSecondaryButtons"
+        :class="`action-wrapper${isMobile ? ' fixed-action-wrapper' : ''}${
+          isTablet && slotsLength >= 3 ? ' tablet-full-btn-actions' : ''
+        }`"
+        id="dialog-action-wrapper"
+        :style="{
+          gap: hasSlots(),
+          flexWrap: getActionsWrapperFlex(),
+          justifyContent:
+            ((isMobile || !isTablet) && slotsLength >= 3) || hasSlots()
+              ? 'space-between'
+              : 'flex-end',
+        }"
+      >
+        <q-card-actions
+          v-if="
+            showSecondaryButtons &&
+            (!!$slots['action_secondary_one'] ||
+              !!$slots['action_secondary_two'])
+          "
+          :class="[
+            `${isMobile || isTablet ? ' full-width-actions' : ''}${
+              !isDesktop
+                ? isMobile && !isSmallWidthDevices
+                  ? ' justify-center mobile-btn-actions'
+                  : !!$slots['action_secondary_one'] ||
+                    !!$slots['action_secondary_two']
+                  ? !isTablet
+                    ? ' justify-start small-device-class'
+                    : ''
+                  : ' justify-end'
+                : ''
+            }`,
+            { 'mobile action-buttons': isMobile },
+            { 'desktop action-buttons': !isMobile },
+          ]"
+          align="left"
+        >
+          <div v-if="showSecondaryButtons" class="col">
+            <slot name="action_secondary_one" />
+            <slot name="action_secondary_two" />
+          </div>
+        </q-card-actions>
+
+        <q-card-actions
+          v-if="
+            showActionButtons &&
+            (!!$slots['action_primary_one'] || !!$slots['action_primary_two'])
+          "
+          :class="[
+            `${isMobile || isTablet ? ' full-width-actions' : ''}${
+              !isDesktop
+                ? isMobile && !isSmallWidthDevices
+                  ? ' justify-center mobile-btn-actions'
+                  : !!$slots['action_primary_one'] ||
+                    !!$slots['action_primary_two']
+                  ? !isTablet
+                    ? ' justify-start small-device-class'
+                    : ''
+                  : ' justify-end'
+                : ''
+            }`,
+            { 'mobile action-buttons': isMobile },
+            { 'desktop action-buttons': !isMobile },
+            'q-ml-auto',
+          ]"
+          align="right"
+        >
+          <slot name="action_primary_one" />
+          <slot name="action_primary_two" />
+        </q-card-actions>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="sass">
+.filter-dialog-default, .filter-dialog-half, .filter-dialog-tab
+  .q-dialog__inner--left, .q-dialog__inner--right
+    .dialog-wrapper
+      max-height: 100vh !important
+  .q-dialog__inner
+    &.q-dialog__inner--right
+      padding-right: $ba !important
+    &.q-dialog__inner--left
+      padding-left: $ba !important
+
+.filter-dialog-half
+    .q-dialog__inner
+      padding: $ba 0
+      margin: auto
+      width: 50% !important
+
+.filter-dialog-tab
+    .q-dialog__inner
+      padding: $ba 0
+      margin: auto
+      width: 75% !important
+
+.filter-dialog-custom
+    .q-dialog__inner
+      padding: $ba 0
+      margin: auto
+      width: var(--customSize) !important
+
+.filter-dialog-default
+    .q-dialog__inner
+      padding: $ba 0
+      margin: auto
+      width: 35.25rem !important
+
+.filter-dialog-full
+    .q-dialog__inner
+      padding: 0 0
+      width: 100% !important
+    .dialog-wrapper
+      max-height: calc(100vh - 1rem)
+      border-radius: $xs $xs 0 0 !important
+      &.action-wrapper
+        border-radius: 0 !important
+    .main-content-dialog
+      &.mobile
+        padding: 0 $ba $xs $ba
+      &.desktop
+        padding: $ms $ms
+        padding-bottom: 0
+        margin-bottom: $ms !important
+    .heading-section
+      &.mobile
+        padding: $ba $ba $xs $ba !important
+      &.desktop
+        padding: $ba $ms !important
+    .action-wrapper
+      padding: $ba $ms
+
+.filter-dialog-full .no-heading-section
+    padding-top: 0px !important
+    padding-left: $ba !important
+    padding-right: $ba !important
+    position: fixed
+    width: 100%
+    z-index: 99
+    background: white
+    margin-top: 0.89rem
+
+.dialog-full .scrollable-content
+    height: auto !important
+    padding-left: $ba !important
+    padding-right: $ba !important
+
+.filter-dialog
+  .dialog-heading-container
+    gap: $xs
+
+  .dialog-caption
+    color: $neutral-9
+  .dialog-heading
+    color: $dark
+
+  .heading-section
+      padding: $ba $ms
+      flex-grow: 0 !important
+
+  .dialog-wrapper
+    border-radius: $xs !important
+    .divider
+      border-bottom: 1.5px solid $neutral-4
+    .action-wrapper
+      display: flex
+      justify-content: space-between
+      border-radius: 0 0 $xs $xs !important
+    .q-card__actions
+      padding: 0
+
+  .heading-wrapper
+    justify-content: space-between
+    align-items: flex-start
+    flex-wrap: nowrap
+    margin-bottom: $ba
+
+  .icon-close
+    color: $neutral-9
+    cursor: pointer
+    align-self: flex-start
+
+  .icon-back
+    cursor: pointer
+    color: $neutral-9
+
+  .main-content-dialog
+    padding: 0 $ms 0 $ms
+    .heading-section
+      padding: $ba $ms
+    .action-wrapper
+      padding: $ba $ms
+
+  .full-height
+    height: 100vh
+    display: flex
+    flex-direction: column
+
+  .action-buttons
+    display: flex
+    align-items: center
+    flex-wrap: nowrap
+    .q-btn
+      margin: 0 !important
+    &.desktop
+      gap: $xs
+      padding: $ba $ms $ms $ms
+      align-self: stretch
+    &.mobile
+      gap: $xs
+
+  .q-btn.dialog-action-icons
+    padding: 0px 0px !important
+    min-width: 1.5rem !important
+    min-height: 0px !important
+    height: fit-content !important
+    border-radius: 0px
+
+    &:focus
+      outline: auto !important
+
+    .q-focus-helper
+      background: transparent !important
+
+  #closeIconLabelRef
+    display: none
+
+  #leftIconLabelRef
+    display: none
+
+  .drag-handle-wrapper
+    width: 100%
+    height: 1rem
+    z-index: 9
+    display: flex
+    align-items: center
+    justify-content: center
+    background: #FFFFFF
+    position: fixed
+
+  .drag-handle
+    width: 2rem
+    height: 0.25rem
+    cursor: ns-resize
+    background: $neutral-5
+    border-radius: $xxl !important
+
+  .full-width-actions
+    width: 100%
+    flex-wrap: nowrap
+
+  .mobile-btn-actions
+    .q-btn
+      width: 100%
+      min-width: auto !important
+      .button-label
+        white-space: nowrap
+
+  .tablet-full-btn-actions
+    .q-btn
+      min-width: auto !important
+      .button-label
+        white-space: nowrap
+
+  .sheet-card-wrapper
+    position: relative
+    width: 100%
+    overflow: hidden
+    transition: height 0.02s ease-in-out
+    background: $neutral-1
+    border-radius: $sm $sm 0 0 !important
+    box-shadow: none !important
+    touch-action: none
+
+  .fixed-action-wrapper
+    position: fixed
+    bottom: 0
+    width: 100%
+    padding: $ba $ba $ba $ba !important
+
+  .scrollable::-webkit-scrollbar
+    z-index: 9999
+
+  .small-device-class
+    justify-content: center
+    .q-btn
+      width: 100%
+      .button-label
+        white-space: nowrap
+</style>