@usssa/component-library 1.0.0-alpha.155 → 1.0.0-alpha.157

package/README.md

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

package/src/components/core/UMultiSelectStd.vue

@@ -2,12 +2,12 @@
 import { computed, 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 USheet from './USheet.vue'
+import UTooltip from './UTooltip.vue'
 import { useScreenType } from '../../composables/useScreenType'
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'onClick'])
 const props = defineProps({
   caption: {
     type: String,
@@ -54,14 +54,14 @@ const props = defineProps({
     type: String,
     required: false,
   },
-  options: {
-    type: Array,
-    required: true,
-  },
   optionLabel: {
     type: String,
     default: 'label',
   },
+  options: {
+    type: Array,
+    required: true,
+  },
   optionValue: {
     type: String,
     default: 'value',
@@ -82,6 +82,10 @@ const props = defineProps({
     type: Function,
     required: true,
   },
+  useCustomComponent: {
+    type: Boolean,
+    default: false,
+  },
   useInput: {
     type: Boolean,
     required: false,
@@ -113,14 +117,22 @@ const filterSheetOptions = (val, update) => {
     )
   })
 }
+
 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) {
+
+  if(props.useCustomComponent && isSelectElement) {
+    // Emit click event for handling in parent component
+    emit('onClick')
+  }
+ if ($screen.value.isMobile && isSelectElement) {
     event.stopPropagation()
+
     dialogs.value = [
       {
         open: true,
@@ -133,12 +145,15 @@ const handleClick = (event) => {
     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 {
@@ -147,23 +162,28 @@ const handleSheetItemClick = (val) => {
     )
   }
 }
+
 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
@@ -269,7 +289,7 @@ watch(
       <template v-slot:option="scope">
         <q-item
           v-bind="scope.itemProps"
-          v-if="!$screen.isMobile"
+          v-if="!$screen.isMobile && !useCustomComponent"
           class="items-center u-custom-options"
         >
           <div v-if="scope.opt.icon" class="q-pr-xs">
@@ -307,7 +327,7 @@ watch(
     </q-select>
   </div>
   <USheet
-    v-if="$screen.isMobile"
+    v-if="$screen.isMobile && !useCustomComponent"
     v-model:dialogs="dialogs"
     :heading="sheetHeading"
     :heading-caption="caption"
@@ -435,7 +455,7 @@ watch(
     box-shadow : 0 0 0 2px $primary-transparent
 
   .q-field__bottom
-    padding: 4px 0 0 0
+    padding: $xxs 0 0 0
 
   .q-chip__content
     color: $neutral-9

package/src/composables/useNotify.js

@@ -60,7 +60,7 @@ export const useNotify = () => {
         caption: props.message,
         color: props.type,
         timeout: props.timeout,
-        classes: `u-notify u-type-${props.type} q-notification-elem-${randomId}`,
+        classes: `u-notify u-type-${props.type} q-notification-elem-${randomId} ${props?.altclasses}`,
         position: props.position,
         progress: props.progress,
         icon: props.icon ? handleGetCustomIcon(props.icon, randomId) : null,