@usssa/component-library 1.0.0-alpha.2 → 1.0.0-alpha.200

package/src/components/core/UDialogStd.vue

@@ -0,0 +1,614 @@
+<script setup>
+import { useQuasar } from 'quasar'
+import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
+import UBtnStd from './UBtnStd.vue'
+
+const emit = defineEmits(['onBackIconClick', 'hideDialog', 'handleCloseIconClick'])
+const model = defineModel()
+const props = defineProps({
+  closeIcon: String,
+  closeIconLabel: String,
+  customSize: {
+    type: String,
+  },
+  dataTestId: {
+    type: String,
+    default: 'dialog',
+  },
+  divider: Boolean,
+  heading: {
+    type: String,
+    required: true,
+  },
+  headingCaption: String,
+  leftIcon: String,
+  leftIconLabel: String,
+  position: String,
+  showActionButtons: 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 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 isTablet = computed(() => $screen.value.isTablet)
+const isSmallWidthDevices = computed(() => $q.screen.width < 400)
+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 >= 3) {
+      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 = () => {
+  setTimeout(() => {
+    const headingWrapper =
+      document.getElementsByClassName('no-heading-section')[0]
+    if (headingWrapper) {
+      scrollableMarginHeight.value = headingWrapper.clientHeight
+    }
+  }, 100)
+  setTimeout(() => {
+    // dynamically adding height by removing toolbar height of 50px
+    const dialogWrapper = document.getElementsByClassName('dialog-wrapper')[0]
+    if (dialogWrapper) {
+      dialogWrapper?.setAttribute(
+        'style',
+        `max-height: ${$q.screen.height - 50}px !important`
+      )
+    }
+
+    currentDialogHeight.value = $q.screen.height - 50
+    dialogMaxHeight.value = $q.screen.height - 50
+  }, 200)
+}
+
+const handleBackClick = () => {
+  return emit('onBackIconClick')
+}
+
+const handleCloseIconClick = () => {
+  dialogRef.value.hide()
+  emit('handleCloseIconClick')
+}
+
+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
+  event.preventDefault()
+  startY = event.touches[0].clientY
+  startHeight = currentDialogHeight.value
+  window.addEventListener('touchmove', (e) => onDragMove(e))
+  window.addEventListener('touchend', onDragEnd)
+}
+
+onMounted(() => {
+  getDialogHeaderheight()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onDragMove)
+  window.removeEventListener('mouseup', onDragEnd)
+  window.removeEventListener('touchmove', onDragMove)
+  window.removeEventListener('touchend', onDragEnd)
+})
+
+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="`dialog-${isMobile ? 'full' : size}`"
+    :dataTestId="dataTestId"
+    full-width
+    no-backdrop-dismiss
+    :position="isMobile ? 'bottom' : position"
+    ref="dialogRef"
+    :style="dialogStyle"
+  >
+    <q-card
+      :class="`dialog-wrapper${!isMobile ? ' full-height' : ''}`"
+      :style="{
+        height: isMobile ? currentDialogHeight + 'px !important' : 'auto',
+        overflow: isMobile ? 'hidden' : 'auto',
+      }"
+    >
+      <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="text-heading-sm dialog-heading">
+                  {{ heading }}
+                </span>
+              </div>
+              <div>
+                <span v-if="headingCaption" class="text-body-sm dialog-caption">
+                  {{ headingCaption }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <UBtnStd
+            class="dialog-action-icons"
+            :aria-label="closeIconLabel"
+            :flat="true"
+            tabindex="0"
+            @click="handleCloseIconClick()"
+          >
+            <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="[
+          `full-height main-content-dialog scroll q-px-ba${
+            isMobile ? ' scrollable-content' : ''
+          }`,
+          { mobile: isMobile, desktop: isDesktop || isTablet },
+        ]"
+        :style="{
+          'margin-top': `${
+            isMobile ? scrollableMarginHeight + (isMobile ? 16 : 0) : 0
+          }px`,
+          'margin-bottom': `${getContentBottomSpace()}rem !important`,
+          height:
+            isTablet || isDesktop
+              ? 'auto'
+              : currentDialogHeight -
+                (scrollableMarginHeight +
+                  (hasSlots() && slotsLength >= 3 ? 144 : 88)) +
+                'px !important',
+        }"
+        tabindex="-1"
+      >
+        <slot name="content" />
+      </q-card-section>
+
+      <div
+        v-if="showActionButtons"
+        :class="`q-pa-ba 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="
+            !!$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"
+        >
+          <slot name="action_secondary_one" />
+          <slot name="action_secondary_two" />
+        </q-card-actions>
+
+        <q-card-actions
+          v-if="
+            !!$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 },
+          ]"
+          align="right"
+        >
+          <slot name="action_primary_one" />
+          <slot name="action_primary_two" />
+        </q-card-actions>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="sass">
+.dialog-default, .dialog-half
+  .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
+.dialog-heading-container
+  gap: $xs
+
+.dialog-caption
+  color: $neutral-9
+.dialog-heading
+  color: $dark
+
+.heading-section
+    padding: $ba
+
+.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
+
+.dialog-half
+  .q-dialog__inner
+    padding: $ba 0
+    width: 50% !important
+
+.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: $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
+
+.dialog-custom
+  .q-dialog__inner
+    padding: $ba 0
+    width: var(--customSize)
+
+.dialog-default
+  .q-dialog__inner
+    padding: $ba 0
+    width: 35.25rem !important
+
+.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
+  margin-bottom: $ba
+  padding-bottom: $ba
+
+.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
+  &.mobile
+    gap: $ba
+
+.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
+
+.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
+
+.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 !important
+
+.dialog-full .scrollable-content
+  height: auto !important
+  padding-left: $ba !important
+  padding-right: $ba !important
+
+.scrollable::-webkit-scrollbar
+  z-index: 9999
+
+.small-device-class
+  justify-content: center
+  .q-btn
+    width: 100%
+    .button-label
+      white-space: nowrap
+</style>