@usssa/component-library 1.0.0-alpha.131 → 1.0.0-alpha.133

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.130
+# Component Library v1.0.0-alpha.133
 
 **This library provides custom UI components for USSSA applications.**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.131",
+  "version": "1.0.0-alpha.133",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UDialogStd.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
 import UBtnStd from './UBtnStd.vue'
 
 const emit = defineEmits(['onBackIconClick', 'hideDialog'])
@@ -14,6 +15,10 @@ const props = defineProps({
     type: String,
     default: 'dialog',
   },
+  dialogHeight: {
+    default: 850,
+    type: Number,
+  },
   divider: Boolean,
   heading: {
     type: String,
@@ -30,7 +35,19 @@ const props = defineProps({
   },
 })
 
+// constants
+const MAX_HEIGHT = props.dialogHeight
+const MIN_HEIGHT = 120
+let isDragging = false
+let startHeight = 0
+let startY = 0
+
+const $screen = useScreenType()
+const $slots = useSlots()
+
+const currentDialogHeight = ref(props.dialogHeight)
 const dialogRef = ref(true)
+const scrollableMarginHeight = ref(null)
 
 const dialogStyle = computed(() => ({
   '--customSize': props.customSize,
@@ -40,26 +57,140 @@ const headerClass = computed(() => {
   return props.divider ? 'divider' : ''
 })
 
+const isMobile = computed(() => $screen.value.isMobile)
+const isTablet = computed(() => $screen.value.isTablet)
+const isDesktop = computed(() => $screen.value.isDesktop)
+
+const getDialogHeaderheight = () => {
+  setTimeout(() => {
+    const headingWrapper =
+      document.getElementsByClassName('no-heading-section')[0]
+    if (headingWrapper) {
+      scrollableMarginHeight.value = headingWrapper.clientHeight
+    }
+  }, 100)
+}
+
 const handleBackClick = () => {
   return emit('onBackIconClick')
 }
+
+const hasAllActionSlots = () => {
+  return (
+    !!$slots['action_secondary_one'] &&
+    !!$slots['action_secondary_two'] &&
+    !!$slots['action_primary_one'] &&
+    !!$slots['action_primary_two']
+  )
+}
+
+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),
+    MAX_HEIGHT
+  )
+  if (Math.min(Math.max(MIN_HEIGHT, newHeight), MAX_HEIGHT) <= 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)
+}
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onDragMove)
+  window.removeEventListener('mouseup', onDragEnd)
+  window.removeEventListener('touchmove', onDragMove)
+  window.removeEventListener('touchend', onDragEnd)
+})
+
+onMounted(() => {
+  getDialogHeaderheight()
+})
+
+watch(
+  model,
+  (newData) => {
+    getDialogHeaderheight()
+    if (!newData) {
+      currentDialogHeight.value = MAX_HEIGHT
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
   <q-dialog
     v-bind="$attrs"
     v-model="model"
-    :class="`dialog-${size}`"
+    :class="`dialog-${isMobile ? 'full' : size}`"
     :dataTestId="dataTestId"
     full-width
     no-backdrop-dismiss
-    :position="position"
+    :position="isMobile ? 'bottom' : position"
     ref="dialogRef"
     :style="dialogStyle"
   >
-    <q-card class="dialog-wrapper full-height">
+    <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}`"
+        :class="`col items-center q-pa-none heading-section ${headerClass}${
+          isMobile ? ' no-heading-section' : ''
+        }`"
       >
         <div class="heading-wrapper row">
           <div class="flex items-center dialog-heading-container">
@@ -108,25 +239,62 @@ const handleBackClick = () => {
           </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"
+        :class="`full-height main-content-dialog scroll q-px-ba${
+          isMobile ? ' scrollable-content' : ''
+        }`"
+        :style="{
+          'margin-top': `${scrollableMarginHeight + (isMobile ? 16 : 0)}px`,
+          height:
+            isTablet || isDesktop
+              ? 'auto'
+              : currentDialogHeight -
+                (scrollableMarginHeight +
+                  (hasSlots() && hasAllActionSlots() ? 144 : 88)) +
+                'px !important',
+        }"
         tabindex="-1"
       >
         <slot name="content" />
       </q-card-section>
 
-      <div v-if="showActionButtons" class="q-pa-ba action-wrapper">
-        <q-card-actions class="action-buttons" align="left">
-          <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' : ''
+        }`"
+        :style="{
+          gap: hasSlots(),
+          flexWrap: isMobile && hasAllActionSlots() ? 'wrap' : 'no-wrap',
+          justifyContent:
+            (isMobile && hasAllActionSlots()) || hasSlots()
+              ? 'space-between'
+              : 'flex-end',
+        }"
+      >
+        <q-card-actions
+          v-if="
+            !!$slots['action_secondary_one'] || !!$slots['action_secondary_two']
+          "
+          :class="`action-buttons${isMobile ? ' full-width-actions' : ''}`"
+          align="left"
+        >
+          <slot name="action_secondary_one" />
+          <slot name="action_secondary_two" />
         </q-card-actions>
-        <q-card-actions class="action-buttons" align="right">
-          <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="`action-buttons${isMobile ? ' full-width-actions' : ''}`"
+          align="right"
+        >
+          <slot name="action_primary_one" />
+          <slot name="action_primary_two" />
         </q-card-actions>
       </div>
     </q-card>
@@ -246,4 +414,55 @@ const handleBackClick = () => {
 
 #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%
+
+.dialog-full .no-heading-section
+  padding-top: 0px !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 $sm !important
+
+.dialog-full .scrollable-content
+  margin-bottom: 4.5rem !important
+  height: auto !important
+
+.scrollable::-webkit-scrollbar
+  z-index: 9999
 </style>

package/src/components/core/URadioBtn.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { computed } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
 import URadioStd from './URadioStd.vue'
 
 const emit = defineEmits(['onClick', 'onButtonClick'])
-
 const model = defineModel()
-
 const props = defineProps({
   altText: {
     type: String,
@@ -46,6 +45,8 @@ const props = defineProps({
   },
 })
 
+const $screen = useScreenType()
+
 const activeClass = computed(() => {
   if (model.value === props.value) {
     return 'active'
@@ -53,6 +54,8 @@ const activeClass = computed(() => {
   return ''
 })
 
+const isMobile = computed(() => $screen.value.isMobile)
+
 const handleChange = () => {
   model.value = props.value
 }
@@ -60,33 +63,44 @@ const handleChange = () => {
 
 <template>
   <q-btn
-    :class="`u-radio-btn ${activeClass}`"
+    :class="`u-radio-btn ${activeClass}${isMobile ? ' full-width' : ''}`"
     :dataTestId="dataTestId"
     flat
     @click="handleChange"
   >
-    <div class="radio-btn-content flex items-center">
-      <URadioStd v-model="model" :aria-label="label" :id="id" :value="value" />
-      <div class="button-text">
-        <div class="text-caption-lg">{{ label }}</div>
-        <div class="description-text text-body-sm">{{ description }}</div>
+    <div class="radio-btn-content flex items-center justify-between full-width">
+      <div
+        class="flex items-center justify-center radio-btn-text-wrapper no-wrap"
+      >
+        <URadioStd
+          v-model="model"
+          :aria-label="label"
+          :id="id"
+          :value="value"
+        />
+        <div class="button-text">
+          <div class="text-caption-lg">{{ label }}</div>
+          <div class="description-text text-body-sm">{{ description }}</div>
+        </div>
       </div>
 
-      <img
-        v-if="image"
-        class="radio-btn-img"
-        :alt="altText"
-        :aria-label="imgAriaLabel"
-        size="1.5rem"
-        :src="image"
-      />
-      <q-icon
-        v-if="iconClass"
-        :class="iconClass"
-        :aria-label="imgAriaLabel"
-        :color="iconColor"
-        size="1.5rem"
-      />
+      <div class="flex items-center">
+        <img
+          v-if="image"
+          class="radio-btn-img"
+          :alt="altText"
+          :aria-label="imgAriaLabel"
+          size="1.5rem"
+          :src="image"
+        />
+        <q-icon
+          v-if="iconClass"
+          :class="iconClass"
+          :aria-label="imgAriaLabel"
+          :color="iconColor"
+          size="1.5rem"
+        />
+      </div>
     </div>
   </q-btn>
 </template>
@@ -123,4 +137,7 @@ const handleChange = () => {
 
   .q-radio .q-radio__inner
     color: $primary !important
+
+.radio-btn-text-wrapper
+  gap: $xs
 </style>

package/src/components/core/USelectStd.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import UAvatar from './UAvatar.vue'
 import UMenuItem from './UMenuItem.vue'
 import UTooltip from './UTooltip.vue'
@@ -84,6 +84,8 @@ const props = defineProps({
   },
 })
 
+const placeholderText = ref(props?.placeholder)
+
 const model = computed({
   get() {
     return props.modelValue
@@ -117,6 +119,17 @@ const handleKeydown = () => {
     }
   }, 100)
 }
+
+const updateVal = (val) => {
+  placeholderText.value = val?.length ? '' : props?.placeholder
+}
+
+watch(
+  () => props?.placeholder,
+  (value) => {
+    placeholderText.value = value
+  }
+)
 </script>
 
 <template>
@@ -160,10 +173,11 @@ const handleKeydown = () => {
       :option-value="optionValue"
       :options="options"
       outlined
-      :placeholder="placeholder"
+      :placeholder="placeholderText"
       :use-input="useInput"
       @filter="filterFn"
       @keydown="handleKeydown"
+      @update:model-value="(val) => updateVal(val)"
     >
       <template v-slot:no-option>
         <q-item>

package/src/components/core/USheet.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   },
   closeIconLabel: { type: String, default: 'close Icon' },
   dialogClass: {
-    type: String
+    type: String,
   },
   closeIconLabel: {
     type: String,
@@ -178,88 +178,82 @@ watch(
     :transition-hide="getDialogTransitions(dialog.position).hide"
     :transition-show="getDialogTransitions(dialog.position).show"
   >
-      <q-card
-        class="sheet-card-wrapper"
-        :style="{
-          height: dialog.height + 'px',
-        }"
+    <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-wrapper"
-          @mousedown="onMouseDown(key, $event)"
-          @touchstart="onTouchStart(key, $event)"
-        >
-          <div class="drag-handle" />
-        </div>
+        <div class="drag-handle" />
+      </div>
 
-        <q-card-section
-          class="row items-start justify-between no-wrap q-pt-none q-pb-xs q-px-ba"
-        >
-          <div class="heading-wrapper row">
-            <div
-              class="flex items-center justify-center dialog-heading-container"
+      <q-card-section
+        class="row items-start justify-between no-wrap q-pt-none q-pb-xs q-px-ba q-mt-ba"
+      >
+        <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()"
             >
-              <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>
+              <q-icon
+                :class="`icon-close ${leftIcon}`"
+                size="1.5rem"
+                tabindex="-1"
+              />
+            </UBtnStd>
+            <div>
+              <div class="text-heading-xs">
+                {{ heading }}
+              </div>
               <div>
-                <div class="text-heading-xs">
-                  {{ heading }}
-                </div>
-                <div>
-                  <span
-                    v-if="headingCaption"
-                    class="text-body-sm dialog-caption"
-                  >
-                    {{ headingCaption }}
-                  </span>
-                </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>
-        </q-card-section>
-        <q-card-section
-          class="main-content-dialog scroll q-px-ba"
-          :style="{ height: dialog.height - 84 + 'px !important' }"
-          tabindex="-1"
+        <UBtnStd
+          class="dialog-action-icons"
+          :aria-label="closeIconLabel"
+          :flat="true"
+          tabindex="0"
+          @click="handleCloseDialog(key)"
         >
-          <slot name="content"></slot>
-        </q-card-section>
-      </q-card>
-      <div
-        v-if="showActionButtons && dialog.height > 70"
-        class="action-wrapper"
+          <q-icon
+            :class="`icon-close ${closeIcon} icon-secondary-opacity`"
+            size="1.5rem"
+            tabindex="-1"
+          />
+        </UBtnStd>
+      </q-card-section>
+      <q-card-section
+        class="main-content-dialog scroll q-px-ba"
+        :style="{ height: dialog.height - 84 + 'px !important' }"
+        tabindex="-1"
       >
-        <q-card-actions class="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>
+        <slot name="content"></slot>
+      </q-card-section>
+    </q-card>
+    <div v-if="showActionButtons && dialog.height > 70" class="action-wrapper">
+      <q-card-actions class="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>