@usssa/component-library 1.0.0-alpha.134 → 1.0.0-alpha.135

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.133
+# Component Library v1.0.0-alpha.135
 
 **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.134",
+  "version": "1.0.0-alpha.135",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UMenuItem.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 const emit = defineEmits(['onClick'])
 const props = defineProps({
@@ -22,6 +22,10 @@ const props = defineProps({
   iconClass: {
     type: String,
   },
+  inSheet: {
+    type: Boolean,
+    default: false,
+  },
   label: {
     type: String,
   },
@@ -45,7 +49,7 @@ const backgroundColor = computed(() => {
   if (props.selected && !props.destructive && !props.positive) {
     return 'bg-blue-1'
   }
-  return 'bg-neutral-1'
+  return props.inSheet ? 'bg-neutral-2' : 'bg-neutral-1'
 })
 
 const iconColor = computed(() => {
@@ -62,7 +66,7 @@ const iconColor = computed(() => {
 const labelColor = computed(() => {
   if (props.destructive) {
     return 'text-accent'
-  } else if (props.selected) {
+  } else if (props.selected && !props.inSheet) {
     return 'text-primary'
   } else if (props.positive) {
     return 'text-positive'
@@ -70,6 +74,13 @@ const labelColor = computed(() => {
   return 'text-dark'
 })
 
+const labelStyle = computed(() => {
+  if (props.inSheet) {
+    return 'text-caption-lg'
+  }
+  return 'text-body-sm'
+})
+
 const type = computed(() => {
   if (props.destructive) {
     return 'destructive'
@@ -105,7 +116,7 @@ const handleClick = () => {
       />
     </q-item-section>
     <slot name="leading_slot"></slot>
-    <q-item-section :class="`${labelColor} text-body-sm label`">
+    <q-item-section :class="`${labelColor} ${labelStyle} label`">
       {{ label }}
     </q-item-section>
     <q-item-section v-if="rightIcon" side>

package/src/components/core/UMultiSelectStd.vue

@@ -1,16 +1,25 @@
 <script setup>
-import { ref, watch} from 'vue'
+import { ref, watch } from 'vue'
+import UBtnStd from './UBtnStd.vue'
 import UChip from './UChip.vue'
 import UTooltip from './UTooltip.vue'
+import USheet from './USheet.vue'
+import UMenuItem from './UMenuItem.vue'
+import { useScreenType } from '../../composables/useScreenType'
 
+const emit = defineEmits(['update:modelValue'])
 const props = defineProps({
+  caption: {
+    type: String,
+    default: '',
+  },
   color: {
     type: String,
     default: 'neutral-7',
   },
-  dataTestId:{
+  dataTestId: {
     type: String,
-    default: 'multi-select'
+    default: 'multi-select',
   },
   filterFn: {
     type: Function,
@@ -77,12 +86,84 @@ const props = defineProps({
   useInput: {
     type: Boolean,
     required: false,
-  }
+  },
 })
 
+const $screen = useScreenType()
+
 const chipModelVal = ref(true)
+const dialogs = ref([])
+const filterOptions = ref([...props.options])
 const placeholderText = ref(props.placeholder)
+const selectedItems = ref([...props.modelValue])
+const sheetHeading = ref(props.label)
+
+const filterSheetOptions = (val, update) => {
+  if (val === '') {
+    update(() => {
+      filterOptions.value = [...props.options]
+    })
+    return
+  }
 
+  const typeValue = val.toLowerCase()
+  update(() => {
+    filterOptions.value = props.options.filter((option) =>
+      option.label.toLowerCase().includes(typeValue)
+    )
+  })
+}
+const handleApply = () => {
+  dialogs.value[0].open = false
+  emit('update:modelValue', selectedItems.value)
+}
+const handleClick = (event) => {
+  const isSelectElement = event.target.closest('.q-field__control')
+  if ($screen.value.isMobile && isSelectElement) {
+    event.stopPropagation()
+    dialogs.value = [
+      {
+        open: true,
+        height: 350,
+        persistent: true,
+        transitionDuration: 500,
+        position: 'bottom',
+      },
+    ]
+    selectedItems.value = props.modelValue
+  }
+}
+const handleClose = () => {
+  dialogs.value[0].open = false
+  selectedItems.value = props.modelValue.length ? props.modelValue : []
+}
+const handleSheetItemClick = (val) => {
+  const exists = selectedItems.value.find((item) => item.value === val.value)
+  if (!exists) {
+    selectedItems.value = [...selectedItems.value, val]
+  } else {
+    selectedItems.value = selectedItems.value.filter(
+      (item) => item.value !== val.value
+    )
+  }
+}
+const handleSheetItemRemove = (item) => {
+  selectedItems.value = selectedItems.value.filter(
+    (option) => option.value !== item.value
+  )
+}
+const handleSheetSelectionUpdate = (val) => {
+  selectedItems.value = val
+}
+const isSelected = (value) => {
+  let getItems = selectedItems.value.filter((e) => e.value === value)
+  return getItems.length ? true : false
+}
+const removeItems = (item) => {
+  selectedItems.value = selectedItems.value.filter(
+    (option) => option.value !== item.value
+  )
+}
 const updateVal = (val) => {
   props.updateFn(val)
   placeholderText.value = val.length ? '' : props.placeholder
@@ -94,11 +175,19 @@ watch(
     placeholderText.value = value
   }
 )
+watch(
+  () => $screen.value,
+  (newValue) => {
+    if (newValue) {
+      selectedItems.value = [...props.modelValue]
+    }
+  }
+)
 </script>
 
 <template>
-  <div class="q-gutter-xs" :dataTestId="dataTestId">
-    <label class="row items-center" for="select" >
+  <div class="q-gutter-xs" :dataTestId="dataTestId" @click="handleClick">
+    <label class="row items-center" for="select">
       <div class="u-select-label text-body-sm">
         <span>{{ label }}</span>
         <span v-if="isRequired" class="text-red-5 q-ml-xs">*</span>
@@ -121,6 +210,7 @@ watch(
     <q-select
       v-bind="$attrs"
       :class="`u-multi-select field-${size}`"
+      behavior="menu"
       bottom-slots
       :color="color"
       hide-bottom-space
@@ -133,7 +223,7 @@ watch(
       options-selected-class="primary bg-blue-1"
       :option-value="optionValue"
       outlined
-      :placeholder="placeholderText"
+      :placeholder="modelValue.length ? '' : placeholderText"
       popup-content-class="u-option-menu"
       use-chips
       :use-input="useInput"
@@ -168,7 +258,7 @@ watch(
 
       <template v-if="hintText" v-slot:hint>
         <div class="row no-wrap items-center">
-          <q-icon v-if="hintIcon" :class="hintIcon" size="1rem"/>
+          <q-icon v-if="hintIcon" :class="hintIcon" size="1rem" />
 
           <div class="q-mx-xxs text-body-xs">
             {{ hintText }}
@@ -177,7 +267,11 @@ watch(
       </template>
 
       <template v-slot:option="scope">
-        <q-item v-bind="scope.itemProps" class="items-center u-custom-options">
+        <q-item
+          v-bind="scope.itemProps"
+          v-if="!$screen.isMobile"
+          class="items-center u-custom-options"
+        >
           <div v-if="scope.opt.icon" class="q-pr-xs">
             <q-icon :class="scope.opt.icon" color="neutral-13" size="1rem" />
           </div>
@@ -186,7 +280,7 @@ watch(
             <q-item-label class="text-body-sm">
               {{ scope.opt.label }}
             </q-item-label>
-            <q-item-label  v-if="scope.opt.description" caption>
+            <q-item-label v-if="scope.opt.description" caption>
               {{ scope.opt.description }}
             </q-item-label>
           </q-item-section>
@@ -212,6 +306,95 @@ watch(
       </template>
     </q-select>
   </div>
+  <USheet
+    v-if="$screen.isMobile"
+    v-model:dialogs="dialogs"
+    :heading="sheetHeading"
+    :heading-caption="caption"
+    :show-action-buttons="true"
+  >
+    <template #header>
+      <q-select
+        :model-value="selectedItems"
+        :class="`u-multi-select field-md q-mt-ba`"
+        behavior="menu"
+        multiple
+        outlined
+        :placeholder="selectedItems.length ? '' : placeholderText"
+        use-chips
+        :use-input="useInput"
+        @click="() => null"
+        @filter="filterSheetOptions"
+        @remove="handleSheetItemRemove"
+        @update:model-value="handleSheetSelectionUpdate"
+      >
+        <template v-if="leftIcon" v-slot:prepend>
+          <q-icon :class="leftIcon" size="1rem" />
+        </template>
+        <template v-slot:selected-item="scope">
+          <UChip
+            v-model="chipModelVal"
+            :chipLabel="scope.opt.label"
+            dense
+            :removable="true"
+            :tabindex="scope.tabindex"
+            @remove="removeItems(scope.opt)"
+          />
+        </template>
+      </q-select>
+    </template>
+    <template #content>
+      <template v-if="filterOptions.length > 0">
+        <template v-for="(item, index) in filterOptions" :key="index">
+          <UMenuItem
+            iconClass=""
+            :destructive="item.destructive"
+            :disable="item.disable"
+            :hide="item.hide"
+            :index="index"
+            :inSheet="true"
+            :label="item.label"
+            labelStyle="text-caption-lg"
+            :leftIcon="item.leftIcon"
+            :positive="item.positive"
+            :rightIcon="item.rightIcon"
+            :selected="isSelected(item.value)"
+            @onClick="handleSheetItemClick(item, index)"
+          >
+            <template #trailing_slot>
+              <slot name="trailing_slot">
+                <q-icon
+                  v-if="isSelected(item.value)"
+                  class="fa-kit-duotone fa-circle-check"
+                  color="primary"
+                  size="1rem"
+                />
+              </slot>
+            </template>
+          </UMenuItem>
+        </template>
+      </template>
+      <template v-else>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ noSearchText }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </template>
+    <template #action_primary_one>
+      <UBtnStd
+        color="primary"
+        label="Cancel"
+        outline
+        size="md"
+        @onClick="handleClose"
+      />
+    </template>
+    <template #action_primary_two>
+      <UBtnStd color="primary" label="Apply" size="md" @onClick="handleApply" />
+    </template>
+  </USheet>
 </template>
 
 <style lang="sass">
@@ -273,4 +456,7 @@ watch(
   border-radius: $xxs
   padding: $xs
   min-height: $lg
+
+.sheet-card-wrapper .q-select__dropdown-icon
+  display: none !important
 </style>

package/src/components/core/USelectStd.vue

@@ -1,19 +1,27 @@
 <script setup>
 import { computed, ref, watch } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
 import UAvatar from './UAvatar.vue'
+import UBtnStd from './UBtnStd.vue'
+import UInputTextStd from './UInputTextStd.vue'
 import UMenuItem from './UMenuItem.vue'
+import USheet from './USheet.vue'
 import UTooltip from './UTooltip.vue'
 
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
+  caption: {
+    type: String,
+    default: '',
+  },
   color: {
     type: String,
     default: 'neutral-7',
   },
-  dataTestId:{
-   type: String,
-   default: 'select-std'
+  dataTestId: {
+    type: String,
+    default: 'select-std',
   },
   disableAvatar: {
     type: Boolean,
@@ -84,17 +92,71 @@ const props = defineProps({
   },
 })
 
+const $screen = useScreenType()
+
+const dialogs = ref([])
+const initialOptions= ref([...props.options])
 const placeholderText = ref(props?.placeholder)
+const search = ref('')
+const selectedItem = ref(props.modelValue)
+const sheetHeading = ref(props.label)
 
+const filterOptions = computed(() => {
+  if (!search.value) return initialOptions.value
+  return props.options.filter((option) =>
+    option.label.toLowerCase().includes(search.value.toLocaleLowerCase())
+  )
+})
 const model = computed({
   get() {
     return props.modelValue
   },
   set(value) {
+    selectedItem.value = value
     return emit('update:modelValue', value)
   },
 })
 
+// sheet apply action
+const handleApply = () => {
+  dialogs.value[0].open = false
+  model.value = selectedItem.value
+}
+// for opening the sheet in mobile screen
+const handleClick = (event) => {
+  const isSelectElement = event.target.closest('.q-field__control')
+  if ($screen.value.isMobile && isSelectElement) {
+    event.stopPropagation()
+    dialogs.value = [
+      {
+        open: true,
+        height: 350,
+        persistent: true,
+        transitionDuration: 500,
+        position: 'bottom',
+      },
+    ]
+    search.value = ''
+    if (model.value === '') {
+      selectedItem.value = ''
+    } else {
+      selectedItem.value = model.value
+    }
+  }
+}
+// sheet closing action
+const handleClose = () => {
+  dialogs.value[0].open = false
+  if (model.value) {
+    if (selectedItem.value) {
+      if (model.value !== selectedItem.value) {
+        selectedItem.value = model.value
+      }
+    }
+  } else {
+    selectedItem.value = ''
+  }
+}
 // adding scroll if highlighted menu is not visible to user
 const handleKeydown = () => {
   setTimeout(() => {
@@ -119,6 +181,10 @@ const handleKeydown = () => {
     }
   }, 100)
 }
+// selecting sheet items
+const handleSheetItemClick = (item, key) => {
+  selectedItem.value = item.value
+}
 
 const updateVal = (val) => {
   placeholderText.value = val?.length ? '' : props?.placeholder
@@ -130,10 +196,22 @@ watch(
     placeholderText.value = value
   }
 )
+watch(
+  () => $screen.value,
+  (newValue) => {
+    if (newValue) {
+      selectedItem.value = props.modelValue
+    }
+  }
+)
 </script>
 
 <template>
-  <section class="column q-gutter-y-xs" :dataTestId="dataTestId">
+  <section
+    class="column q-gutter-y-xs"
+    :dataTestId="dataTestId"
+    @click="handleClick"
+  >
     <label class="row items-center" for="select">
       <div class="u-select-label text-body-sm">
         <span>{{ label }}</span>
@@ -160,6 +238,7 @@ watch(
       v-model="model"
       :class="`u-select field-${size}`"
       :popup-content-class="`u-options-menu ${popupClass}`"
+      behavior="menu"
       options-selected-class="primary bg-blue-1"
       bottom-slots
       :color="color"
@@ -203,12 +282,14 @@ watch(
       <template v-slot:option="scope">
         <UMenuItem
           v-bind="scope.itemProps"
+          v-if="!$screen.isMobile"
           class="q-ma-xxs"
           iconClass="icon-secondary-opacity"
           :label="scope.opt.label"
           :leftIcon="scope.opt.leftIcon"
+          :key="scope.opt.value"
           :rightIcon="scope.opt.rightIcon"
-          :selected="scope.selected"
+          :selected="scope.selected || model === scope.label"
         >
           <template #leading_slot>
             <slot name="leading_slot" />
@@ -225,7 +306,7 @@ watch(
           <template #trailing_slot>
             <slot name="trailing_slot">
               <q-icon
-                v-if="scope.selected"
+                v-if="scope.selected || model === scope.label"
                 class="fa-kit-duotone fa-circle-check"
                 color="primary"
                 size="1rem"
@@ -235,6 +316,95 @@ watch(
         </UMenuItem>
       </template>
     </q-select>
+    <USheet
+      v-if="$screen.isMobile"
+      v-model:dialogs="dialogs"
+      :heading="sheetHeading"
+      :heading-caption="caption"
+      :show-action-buttons="true"
+    >
+      <template #header>
+        <UInputTextStd
+          v-if="useInput"
+          v-model="search"
+          class="q-mt-ba"
+          :leftIcon="leftIcon"
+          :placeholder="placeholder"
+          size="md"
+        />
+      </template>
+      <template #content>
+        <template v-if="filterOptions.length > 0">
+          <template v-for="(item, index) in filterOptions" :key="item.value">
+            <UMenuItem
+              iconClass=""
+              :destructive="item.destructive"
+              :disable="item.disable"
+              :hide="item.hide"
+              :inSheet="true"
+              :label="item.label"
+              labelStyle="text-caption-lg"
+              :leftIcon="item.leftIcon"
+              :positive="item.positive"
+              :rightIcon="item.rightIcon"
+              :selected="
+                item.value === selectedItem || item.label === selectedItem
+              "
+              @onClick="handleSheetItemClick(item, index)"
+            >
+              <template #leading_slot>
+                <slot name="leading_slot" />
+                <div v-if="!disableAvatar">
+                  <UAvatar
+                    v-if="item.avatarUrl"
+                    :image="item.avatarUrl"
+                    :name="item.label"
+                    size="md"
+                  />
+                  <UAvatar v-else :name="item.label" size="md" />
+                </div>
+              </template>
+              <template #trailing_slot>
+                <slot name="trailing_slot">
+                  <q-icon
+                    v-if="
+                      item.value === selectedItem || item.label === selectedItem
+                    "
+                    class="fa-kit-duotone fa-circle-check"
+                    color="primary"
+                    size="1rem"
+                  />
+                </slot>
+              </template>
+            </UMenuItem>
+          </template>
+        </template>
+        <template v-else>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ noSearchText }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </template>
+      <template #action_primary_one>
+        <UBtnStd
+          color="primary"
+          label="Cancel"
+          outline
+          size="md"
+          @onClick="handleClose"
+        />
+      </template>
+      <template #action_primary_two>
+        <UBtnStd
+          color="primary"
+          label="Apply"
+          size="md"
+          @onClick="handleApply"
+        />
+      </template>
+    </USheet>
   </section>
 </template>
 
@@ -290,4 +460,19 @@ watch(
 .u-options-menu
   .q-item:last-child
     margin-bottom: $xxs
+
+.sheet-card-wrapper .q-card__section .q-item
+  padding:$ba $sm !important
+  margin-bottom: $xs !important
+  border-radius: $xs !important
+  .q-icon
+    font-size: $ms !important
+
+.sheet-action-wrapper .action-buttons
+  gap: $ba !important
+  padding: $ba !important
+
+.sheet-card-wrapper .main-content-dialog
+  padding-top: $xs !important
+  padding-bottom: $xs !important
 </style>

package/src/components/core/USheet.vue

@@ -48,9 +48,10 @@ const props = defineProps({
 })
 
 // constants
+
+let isDragging = false
 const MAX_HEIGHT = 750
 const MIN_HEIGHT = 40
-let isDragging = false
 let startHeight = 0
 let startY = 0
 
@@ -193,62 +194,67 @@ watch(
       </div>
 
       <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()"
+          class="column q-pt-none q-pb-xs q-px-ba q-mt-ba"
+        >
+         <div class="row items-start justify-between no-wrap">
+          <div class="heading-wrapper row">
+            <div
+              class="flex items-center justify-center dialog-heading-container"
             >
-              <q-icon
-                :class="`icon-close ${leftIcon}`"
-                size="1.5rem"
-                tabindex="-1"
-              />
-            </UBtnStd>
-            <div>
-              <div class="text-heading-xs">
-                {{ heading }}
-              </div>
+              <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>
-                <span v-if="headingCaption" class="text-body-sm dialog-caption">
-                  {{ headingCaption }}
-                </span>
+                <div class="text-heading-xs">
+                  {{ heading }}
+                </div>
+                <div>
+                  <span
+                    v-if="headingCaption"
+                    class="text-body-sm dialog-caption"
+                  >
+                    {{ headingCaption }}
+                  </span>
+                </div>
               </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>
 
-        <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>
+         </div>
+         <slot name="header"></slot>
+        </q-card-section>
       <q-card-section
-        class="main-content-dialog scroll q-px-ba"
-        :style="{ height: dialog.height - 84 + 'px !important' }"
+        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="action-wrapper">
+    <div v-if="showActionButtons && dialog.height > 70" class="sheet-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>
@@ -259,9 +265,11 @@ watch(
 
 <style lang="sass">
 .sheet-card-wrapper
+  display: flex
+  flex-direction: column
   position: relative
   width: 100%
-  overflow: hidden
+  overflow: hidden !important
   transition: height 0.02s ease-in-out
   background: $neutral-1
   border-radius: $sm $sm 0 0 !important
@@ -312,12 +320,15 @@ watch(
   .q-item__section
     color: red !important
 
-.action-wrapper
+.sheet-action-wrapper
   background: $neutral-1
 
 .main-content-dialog
-  margin-bottom: $ba
+  margin-bottom: 0px !important
   padding-bottom: 0
+  flex-grow: 1
+  overflow-y: auto !important
+  overflow-x: hidden
 
 .dialog-caption
   color: $neutral-9
@@ -329,4 +340,9 @@ watch(
 
 .dialog-heading-container
   gap: $xs
+
+.action-wrapper
+  position: relative
+  width: 100%
+  background: $neutral-1
 </style>