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

package/src/components/core/UDialogStd.vue

@@ -1,72 +1,292 @@
 <script setup>
-import { computed, ref } from 'vue'
+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,
   },
-  fields: Object,
+  headingCaption: String,
+  leftIcon: String,
+  leftIconLabel: String,
+  noStyleMobile: {
+    default: false,
+    type: Boolean
+  },
   position: String,
+  showActionButtons: Boolean,
   size: {
     type: String,
     default: 'default',
   },
-  headingCaption: String,
-  leftIcon: String,
-  closeIcon: String,
-  showActionButtons: Boolean,
-  leftIconLabel: String,
-  closeIconLabel: String,
-  divider: Boolean,
 })
 
-const model = defineModel()
+// constants
+const MIN_HEIGHT = 120
+let isDragging = false
+let startHeight = 0
+let startY = 0
+
+const $screen = useScreenType()
+const $slots = useSlots()
+const $q = useQuasar()
 
-const emit = defineEmits(['onBackIconClick', 'hideDialog'])
+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-wrappers')[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 headerClass = computed(() => {
-  return props.divider ? 'divider' : ''
+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"
-    :position="position"
-    full-width
-    :class="`dialog-${size}`"
-    v-model="model"
-    v-bind="$attrs"
+    :style="dialogStyle"
   >
-    <q-card class="dialog-wrapper full-height">
+    <q-card
+      :class="`dialog-wrappers${!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}`"
+        :class="[
+          `col items-center q-pa-none heading-section ${headerClass}${
+            isMobile ? ' no-heading-section' : ''
+          }`,
+          { mobile: isMobile, desktop: isDesktop || isTablet },
+        ]"
       >
-        <div class="heading-wrapper row">
+        <div class="heading-wrapper row items-center">
           <div class="flex items-center dialog-heading-container">
             <div v-if="leftIcon">
               <UBtnStd
-                tabindex="-1"
                 class="dialog-action-icons"
-                :flat="true"
                 :aria-label="leftIconLabel"
+                :flat="true"
+                tabindex="0"
                 @click="handleBackClick()"
               >
                 <q-icon
-                  class="icon-back"
-                  :class="leftIcon"
+                  :class="`icon-back ${leftIcon}`"
                   size="1.5rem"
-                  @click="handleBackClick()"
-                  :aria-label="leftIconLabel"
-                  tabindex="0"
+                  tabindex="-1"
                 />
               </UBtnStd>
             </div>
@@ -77,48 +297,123 @@ const headerClass = computed(() => {
                 </span>
               </div>
               <div>
-                <span class="text-body-sm dialog-caption" v-if="headingCaption">
+                <span v-if="headingCaption" class="text-body-sm dialog-caption">
                   {{ headingCaption }}
                 </span>
               </div>
             </div>
           </div>
+
           <UBtnStd
             class="dialog-action-icons"
-            :flat="true"
             :aria-label="closeIconLabel"
-            tabindex="-1"
-            @click="dialogRef.hide()"
+            :flat="true"
+            tabindex="0"
+            @click="handleCloseIconClick()"
           >
             <q-icon
               v-if="closeIcon"
-              class="icon-close"
-              :class="closeIcon"
+              :class="`icon-close ${closeIcon} icon-secondary-opacity`"
               size="1.5rem"
-              @click="dialogRef.hide()"
-              :aria-label="closeIconLabel"
-              :aria-hidden="false"
-              tabindex="0"
+              tabindex="-1"
             />
           </UBtnStd>
         </div>
         <div class="row">
-          <slot name="secondary_row"></slot>
+          <slot name="secondary_row" />
         </div>
       </q-card-section>
 
-      <q-card-section class="full-height main-content-dialog scroll q-px-ba">
+      <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: !noStyleMobile ?
+            (isTablet || isDesktop
+              ? 'auto'
+              : currentDialogHeight -
+                (scrollableMarginHeight +
+                  (hasSlots() && slotsLength >= 3 ? 144 : 88)) +
+                'px !important'): 'auto',
+        }"
+        tabindex="-1"
+      >
         <slot name="content" />
       </q-card-section>
 
-      <div class="q-pa-ba action-wrapper" v-if="showActionButtons">
-        <q-card-actions align="left" class="action-buttons">
-          <slot name="action_secondary_one"></slot>
-          <slot name="action_secondary_two"></slot>
+      <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 align="right" class="action-buttons">
-          <slot name="action_primary_one"></slot>
-          <slot name="action_primary_two"></slot>
+
+        <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>
@@ -128,7 +423,7 @@ const headerClass = computed(() => {
 <style lang="sass">
 .dialog-default, .dialog-half
   .q-dialog__inner--left, .q-dialog__inner--right
-    .dialog-wrapper
+    .dialog-wrappers
       max-height: 100vh !important
   .q-dialog__inner
     &.q-dialog__inner--right
@@ -146,7 +441,9 @@ const headerClass = computed(() => {
 .heading-section
     padding: $ba
 
-.dialog-wrapper
+.dialog-wrappers
+  max-height: 100vh !important
+  height: 100vh !important
   border-radius: $xs !important
   .divider
     border-bottom: 1.5px solid $neutral-4
@@ -166,20 +463,31 @@ const headerClass = computed(() => {
   .q-dialog__inner
     padding: 0 0
     width: 100% !important
-  .dialog-wrapper
+  .dialog-wrappers
     max-height: calc(100vh - 1rem)
     border-radius: $xs $xs 0 0 !important
     &.action-wrapper
       border-radius: 0 !important
   .main-content-dialog
-    padding: $ms $ms
-    padding-bottom: 0
-    margin-bottom: $ms !important
+    &.mobile
+      padding: $ba
+    &.desktop
+      padding: $ms $ms
+      padding-bottom: 0
+      margin-bottom: $ms
   .heading-section
-    padding: $ba $ms !important
+    &.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
@@ -187,6 +495,7 @@ const headerClass = computed(() => {
 
 .heading-wrapper
   justify-content: space-between
+  align-items: flex-start
   flex-wrap: nowrap
   margin-bottom: $ba
 
@@ -201,7 +510,7 @@ const headerClass = computed(() => {
 
 .main-content-dialog
   margin-bottom: $ba
-  padding-bottom: 0
+  padding-bottom: $ba
 
 .full-height
   height: 100vh
@@ -211,16 +520,105 @@ const headerClass = computed(() => {
 .action-buttons
   display: flex
   align-items: center
-  gap: $xs
+  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: 0px !important
+  min-width: 1.5rem !important
   min-height: 0px !important
-  height: auto !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>