@usssa/component-library 1.0.0-alpha.15 → 1.0.0-alpha.151

package/src/components/core/USheet.vue

@@ -0,0 +1,349 @@
+<script setup>
+import { onUnmounted, watch } from 'vue'
+import UBtnStd from './UBtnStd.vue'
+
+const emit = defineEmits(['onBackIconClick', 'onCloseDialog'])
+const dialogs = defineModel('dialogs', { default: () => [], type: Array })
+const props = defineProps({
+  closeIcon: {
+    default: 'fa-kit-duotone fa-circle-xmark',
+    type: String,
+  },
+  closeIconLabel: { type: String, default: 'close Icon' },
+  dialogClass: {
+    type: String,
+  },
+  closeIconLabel: {
+    type: String,
+    default: 'close Icon',
+  },
+  dataTestId: {
+    type: String,
+    default: 'sheet-std',
+  },
+  heading: {
+    default: 'Select Option',
+    type: String,
+  },
+  headingCaption: {
+    default: null,
+    type: String,
+  },
+  isLeftIcon: {
+    type: Boolean,
+    default: false,
+  },
+  leftIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-circle-arrow-left',
+  },
+  leftIconLabel: {
+    type: String,
+    default: 'Back Icon',
+  },
+  showActionButtons: {
+    default: false,
+    type: Boolean,
+  },
+})
+
+// constants
+
+let isDragging = false
+const MAX_HEIGHT = 750
+const MIN_HEIGHT = 40
+let startHeight = 0
+let startY = 0
+
+// custom functions
+const getDialogTransitions = (position) => {
+  let defaultTransition = { show: 'slide-up', hide: 'slide-down' }
+  if (position === 'right') {
+    defaultTransition = { show: 'slide-left', hide: 'slide-right' }
+  } else if (position === 'left') {
+    defaultTransition = { show: 'slide-right', hide: 'slide-left' }
+  }
+  return defaultTransition
+}
+
+const handleBackClick = () => {
+  return emit('onBackIconClick')
+}
+
+const handleCloseDialog = (index) => {
+  setTimeout(() => {
+    if (dialogs.value[index]) {
+      dialogs.value[index].open = false
+    }
+  }, 100)
+  // removing closed dialog data from the dialogs
+  setTimeout(() => {
+    dialogs.value.splice(index, 1)
+  }, 500)
+  emit('onCloseDialog')
+}
+
+const onDragEnd = () => {
+  isDragging = false
+  window.removeEventListener('mousemove', onDragMove)
+  window.removeEventListener('mouseup', onDragEnd)
+  window.removeEventListener('touchmove', onDragMove)
+  window.removeEventListener('touchend', onDragEnd)
+}
+
+const onDragMove = (index, event) => {
+  if (!isDragging || index !== dialogs.value.length - 1) 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
+  dialogs.value[index].height = Math.min(
+    Math.max(MIN_HEIGHT, newHeight),
+    MAX_HEIGHT
+  )
+  if (Math.min(Math.max(MIN_HEIGHT, newHeight), MAX_HEIGHT) <= MIN_HEIGHT) {
+    setTimeout(() => {
+      dialogs.value.splice(index, 1) // if user is dragging then it should close from here
+    }, 200)
+  }
+  // dialogs.value[index].height = Math.max(MIN_HEIGHT, startHeight + deltaY) // if limiting not required
+}
+
+const onMouseDown = (index, event) => {
+  if (index !== dialogs.value.length - 1) return // Only allow dragging for the topmost dialog
+  event.preventDefault()
+  isDragging = true
+  startY = event.clientY
+  startHeight = dialogs.value[index].height
+  window.addEventListener('mousemove', (e) => onDragMove(index, e))
+  window.addEventListener('mouseup', onDragEnd)
+}
+
+const onTouchStart = (index, event) => {
+  if (index !== dialogs.value.length - 1) return // Only allow dragging for the topmost dialog
+  event.preventDefault()
+  isDragging = true
+  startY = event.touches[0].clientY
+  startHeight = dialogs.value[index].height
+  window.addEventListener('touchmove', (e) => onDragMove(index, e))
+  window.addEventListener('touchend', onDragEnd)
+}
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onDragMove)
+  window.removeEventListener('mouseup', onDragEnd)
+  window.removeEventListener('touchmove', onDragMove)
+  window.removeEventListener('touchend', onDragEnd)
+})
+
+watch(
+  dialogs,
+  (newVal) => {
+    const len = newVal.length
+    if (len > 1) {
+      if (dialogs.value[len - 2]) {
+        dialogs.value[len - 1].height = dialogs.value[len - 2].height // opening same height of previous dialog
+      }
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  dialogs, // to watch deep and for nested dialog
+  () => {
+    const index = dialogs.value.findIndex((dialog) => !dialog.open)
+    if (index > -1) {
+      handleCloseDialog(index)
+    }
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <q-dialog
+    v-bind="$attrs"
+    v-for="(dialog, key) in dialogs"
+    v-model="dialog.open"
+    :class="dialogClass"
+    :dataTestId="dataTestId"
+    :key="key"
+    :persistent="
+      typeof dialog.persistent === 'undefined' ? true : dialog.persistent
+    "
+    position="bottom"
+    :transition-duration="
+      dialog.transitionDuration ? dialog.transitionDuration : 300
+    "
+    :transition-hide="getDialogTransitions(dialog.position).hide"
+    :transition-show="getDialogTransitions(dialog.position).show"
+  >
+    <q-card
+      class="sheet-card-wrapper"
+      :style="{
+        height: dialog.height + 'px',
+      }"
+    >
+      <div
+        class="drag-handle-wrapper"
+        @mousedown="onMouseDown(key, $event)"
+        @touchstart="onTouchStart(key, $event)"
+      >
+        <div class="drag-handle" />
+      </div>
+
+      <q-card-section class="column q-pt-none q-pb-xs q-px-ba q-mt-ba">
+        <div class="row items-start justify-between no-wrap heading-row">
+          <div class="heading-wrapper row">
+            <div
+              class="flex items-center justify-center dialog-heading-container"
+            >
+              <UBtnStd
+                v-if="isLeftIcon"
+                class="dialog-action-icons q-mr-xs"
+                :aria-label="leftIconLabel"
+                :flat="true"
+                tabindex="0"
+                @click="handleBackClick()"
+              >
+                <q-icon
+                  :class="`icon-close ${leftIcon}`"
+                  size="1.5rem"
+                  tabindex="-1"
+                />
+              </UBtnStd>
+              <div>
+                <div class="text-heading-xs">
+                  {{ heading }}
+                </div>
+                <div>
+                  <span
+                    v-if="headingCaption"
+                    class="text-body-sm dialog-caption"
+                  >
+                    {{ headingCaption }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <UBtnStd
+            class="dialog-action-icons"
+            :aria-label="closeIconLabel"
+            :flat="true"
+            tabindex="0"
+            @click="handleCloseDialog(key)"
+          >
+            <q-icon
+              :class="`icon-close ${closeIcon} icon-secondary-opacity`"
+              size="1.5rem"
+              tabindex="-1"
+            />
+          </UBtnStd>
+        </div>
+        <slot name="header"></slot>
+      </q-card-section>
+      <q-card-section class="main-content-dialog q-px-ba" tabindex="-1">
+        <slot name="content"></slot>
+      </q-card-section>
+    </q-card>
+    <div
+      v-if="showActionButtons && dialog.height > 70"
+      class="sheet-action-wrapper"
+    >
+      <q-card-actions
+        class="sheet-action-buttons q-px-sm q-py-ba"
+        align="center"
+      >
+        <slot name="action_primary_one"></slot>
+        <slot name="action_primary_two"></slot>
+      </q-card-actions>
+    </div>
+  </q-dialog>
+</template>
+
+<style lang="sass">
+.sheet-card-wrapper
+  display: flex
+  flex-direction: column
+  position: relative
+  width: 100%
+  overflow: hidden !important
+  transition: height 0.02s ease-in-out
+  background: $neutral-1
+  border-radius: $sm $sm 0 0 !important
+  box-shadow: none !important
+  touch-action: none
+
+.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
+
+.drag-handle-wrapper
+  width: 100%
+  height: 0.9rem !important
+  z-index: 9
+  display: flex
+  align-items: center
+  justify-content: center
+
+.drag-handle
+  width: 2rem
+  height: 0.25rem
+  cursor: ns-resize
+  background: $neutral-5
+  border-radius: $xxl !important
+
+.outer-wrapper
+  overflow: auto
+
+.sheet-action-buttons
+  display: flex
+  align-items: center
+  gap: $xs
+  flex-wrap: nowrap
+  .q-btn
+    margin: 0 !important
+    width: 50%
+
+.destructive-item
+  .q-item__section
+    color: red !important
+
+.sheet-action-wrapper
+  background: $neutral-1
+
+.main-content-dialog
+  margin-bottom: 0px !important
+  padding-bottom: 0
+  flex-grow: 1
+  overflow-y: auto !important
+  overflow-x: hidden
+
+.dialog-caption
+  color: $neutral-9
+
+.heading-wrapper
+  justify-content: space-between
+  flex-wrap: nowrap
+  margin-bottom: 0px !important
+
+.dialog-heading-container
+  gap: $xs
+
+.action-wrapper
+  position: relative
+  width: 100%
+  background: $neutral-1
+</style>

package/src/components/core/UTabBtnStd.vue

@@ -1,78 +1,104 @@
 <script setup>
 import UBadgeStd from './UBadgeStd.vue'
 
+const emit = defineEmits(['onTabClick'])
+
+const selectedTab = defineModel('selectedTab', {
+  type: [String, Number],
+  default: null,
+})
+
 const props = defineProps({
-  size: {
-    type: String,
-    default: 'md',
-  },
-  icon: {
-    type: String,
-    default: '',
+  buttonTabsOptions: {
+    type: Array,
+    default: () => [],
   },
-  label: {
+  dataTestId: {
     type: String,
-    default: null,
+    default: 'tab-btn-std',
   },
-  badgeLabel: {
+  size: {
     type: String,
-    default: null,
+    default: 'md',
   },
-  selectedTab: {
-    type: [String, Number],
-    default: null,
+  standard: {
+    type: Boolean,
+    default: false,
   },
 })
+
+const handleTabClick = (value) => {
+  emit('onTabClick', value)
+}
 </script>
 
 <template>
   <q-tabs
+    :active-class="`u-tab-active ${standard ? 'tab-standard' : ''}`"
+    class="u-tabs-outer"
+    :dataTestId="dataTestId"
     dense
     indicator-color="transparent"
     inline-label
     :model-value="selectedTab"
     no-caps
-    class="u-tabs-outer"
-    active-class="u-tab-active"
   >
-    <q-tab
-      :class="`u-tab-button text-caption-${size} u-tab-${size}`"
-      :ripple="false"
-      name="tab-button"
-      v-if="icon"
-      aria-label="tab-button"
-    >
-      <template v-slot:default>
-        <q-icon aria-label="Tab button Icon" v-if="icon" :class="`${icon}`" />
-        <p class="u-tab-label truncated-label left-icon-label">
-          {{ label ? label : '' }}
-        </p>
-        <UBadgeStd
-          v-if="badgeLabel"
-          :label="badgeLabel"
-          color="primary"
-          :size="size === 'md' ? 'md' : ''"
-          :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
-        />
-      </template>
-    </q-tab>
-    <q-tab
-      :class="`u-tab-button text-caption-${size} u-tab-${size}`"
-      :ripple="false"
-      name="tab-button"
-      v-else
-    >
-      <template v-slot:default>
-        <p class="u-tab-label truncated-label">{{ label ? label : '' }}</p>
-        <UBadgeStd
-          v-if="badgeLabel"
-          :label="badgeLabel"
-          color="primary"
-          :size="size === 'md' ? 'md' : ''"
-          :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
-        />
-      </template>
-    </q-tab>
+    <template v-for="(tabOption, key) in buttonTabsOptions" :key="tabOption.id">
+      <q-tab
+        v-if="tabOption.icon"
+        :class="`u-tab-button text-caption-${size} u-tab-${size} ${
+          key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
+        }`"
+        :aria-label="tabOption.label"
+        :disable="tabOption.disable"
+        :name="tabOption.id"
+        :ripple="false"
+        @click="handleTabClick(tabOption.id)"
+      >
+        <template v-slot:default>
+          <q-icon
+            v-if="tabOption.icon"
+            :class="tabOption.icon"
+            :alt="tabOption.label"
+            :aria-label="tabOption.label"
+          />
+          <p class="u-tab-label truncated-label left-icon-label">
+            {{ tabOption.label ? tabOption.label : '' }}
+          </p>
+          <UBadgeStd
+            v-if="tabOption.badgeLabel"
+            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
+            color="primary"
+            :label="tabOption.badgeLabel"
+            :size="size === 'md' ? 'md' : ''"
+          />
+        </template>
+      </q-tab>
+      <q-tab
+        v-else
+        :class="`u-tab-button text-caption-${size} u-tab-${size} ${
+          key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
+        }`"
+        :aria-label="tabOption.label"
+        :disable="tabOption.disable"
+        :name="tabOption.id"
+        :ripple="false"
+        @click="handleTabClick(tabOption.id)"
+      >
+        <template v-slot:default>
+          <p class="u-tab-label truncated-label">
+            {{ tabOption.label ? tabOption.label : '' }}
+          </p>
+          <UBadgeStd
+            v-if="tabOption.badgeLabel"
+            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
+            color="primary"
+            :label="tabOption.badgeLabel"
+            :size="size === 'md' ? 'md' : ''"
+          />
+        </template>
+      </q-tab>
+    </template>
   </q-tabs>
 </template>
 
@@ -113,10 +139,10 @@ const props = defineProps({
     margin: $xxs
 
   .q-tab__content
-    padding: 0.25rem 0
+    padding: $xxs 0
 
     .u-tab-label
-      font-size: 0.75rem
+      font-size: $sm
 
     .q-icon
       font-size: 1rem
@@ -125,10 +151,9 @@ const props = defineProps({
 
   .u-tab-md
     padding: 0 $ba
-    margin: $xs
 
     .q-tab__content
-      padding: 0.5rem 0
+      padding: $xs 0
 
     .u-tab-label
       font-size: 0.875rem
@@ -138,11 +163,14 @@ const props = defineProps({
       position: absolute
       left: -8px
 
-
   .u-tab-active
     background: $blue-1 !important
     color: $primary !important
 
+  .tab-standard
+    background: $primary !important
+    color: $neutral-1 !important
+
   .u-tab-badge-sm
     font-size: $xs
     font-weight: 500