@usssa/component-library 1.0.0-alpha.200 → 1.0.0-alpha.202

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.200
+# Component Library v1.0.0-alpha.202
 
 **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.200",
+  "version": "1.0.0-alpha.202",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UExpansionStd.vue

@@ -64,6 +64,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  toggleIconRotationClass: {
+    type: String,
+    default: 'rotate-180',
+  },
 })
 
 const isExpanded = ref(false)
@@ -123,7 +127,7 @@ const toggleExpansion = () => {
             'icon-secondary-opacity',
             'transition-all',
             expansionIcon,
-            { 'rotate-180': isExpanded },
+            isExpanded ? toggleIconRotationClass : '',
           ]"
           :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
           :color="expansionIconColor"
@@ -145,7 +149,7 @@ const toggleExpansion = () => {
             'icon-secondary-opacity',
             'transition-all',
             expansionIcon,
-            { 'rotate-180': isExpanded },
+            isExpanded ? toggleIconRotationClass : '',
           ]"
           :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
           :color="expansionIconColor"
@@ -197,7 +201,7 @@ const toggleExpansion = () => {
             'icon-secondary-opacity',
             'transition-all',
             expansionIcon,
-            { 'rotate-180': isExpanded },
+            isExpanded ? toggleIconRotationClass : '',
           ]"
           :color="expansionIconColor"
           :size="expansionIconSize"
@@ -215,7 +219,7 @@ const toggleExpansion = () => {
             'icon-secondary-opacity',
             'transition-all',
             expansionIcon,
-            { 'rotate-180': isExpanded },
+            isExpanded ? toggleIconRotationClass : '',
           ]"
           :color="expansionIconColor"
           :size="expansionIconSize"
@@ -260,6 +264,10 @@ const toggleExpansion = () => {
     transform: rotate(180deg)
     transition: 0.3s
 
+  .rotate-90
+    transform: rotate(90deg)
+    transition: 0.3s
+
 .expansion-radio-wrapper
   .q-radio__label
     padding-left: 0px !important

package/src/components/core/UFilter.vue

@@ -0,0 +1,89 @@
+<script setup>
+import UExpansionStd from './UExpansionStd.vue'
+
+const filterOptions = defineModel('filterOptions', {
+  default: () => [],
+  type: Array,
+})
+const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'u-expansion-filter',
+  },
+  header: {
+    type: String,
+    default: null,
+  },
+  subHeader: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>
+
+<template>
+  <div
+    v-if="filterOptions.length"
+    class="u-expansion-filter q-pa-sm"
+    :dataTestId="dataTestId"
+  >
+    <div v-if="header" class="text-heading-sm text-dark q-pb-xs q-mb-xxs">
+      {{ header }}
+    </div>
+    <div
+      v-if="subHeader"
+      class="q-mb-xxs"
+      dataTestId="expansion-filter-sub-header"
+    >
+      <slot name="subHeader" />
+    </div>
+    <template v-for="filter in filterOptions" :key="filter.type">
+      <q-list v-if="filter.label" bordered>
+        <UExpansionStd
+          v-model="filter.isExpanded"
+          class="expansion-filter-item-wrapper"
+          :disabled="filter.disabled"
+          expansion-icon="fa-kit fa-chevron-right rotate-0"
+          :id="`filter-expansion-item-${filter.type}`"
+          :label="filter.label"
+          :toggle-icon-left="true"
+          toggle-icon-rotation-class="rotate-90"
+        >
+          <template #body>
+            <div class="expansion-filter-body-wrapper">
+              <slot :name="`type${filter.type}`" />
+            </div>
+          </template>
+        </UExpansionStd>
+      </q-list>
+    </template>
+  </div>
+</template>
+
+<style lang="sass">
+.u-expansion-filter
+  .q-list
+    margin-bottom: $xxs
+
+  border: 1px solid $neutral-4
+  border-radius: $sm
+  .q-list
+    border: none
+
+  .q-item.q-item-type
+    padding: $xs $xxs !important
+    display: flex
+    justify-content: start
+    align-items: center
+    min-height: $lg
+
+  .expansion-transition-icon
+    transition: all 0.2s ease-in-out 0.1s
+
+  .expansion-filter-item-wrapper
+    border: none !important
+    min-height: auto !important
+
+    .expansion-filter-body-wrapper
+      padding: $xs
+</style>

package/src/components/core/UMenuDropdown.vue

@@ -34,6 +34,7 @@ const props = defineProps({
     <template v-for="(item, index) in data" :key="index">
       <UMenuItem
         :iconClass="iconClass"
+        :avatarImage="item.avatarImage"
         :destructive="item.destructive"
         :disable="item.disable"
         :hide="item.hide"
@@ -42,6 +43,7 @@ const props = defineProps({
         :leftIcon="item.leftIcon"
         :positive="item.positive"
         :rightIcon="item.rightIcon"
+        :typeIcon="item.typeIcon"
         @onClick="item.handler"
       >
         <template #leading_slot>

package/src/components/core/UMenuItem.vue

@@ -1,8 +1,20 @@
 <script setup>
 import { computed } from 'vue'
+import UAvatar from './UAvatar.vue'
 
 const emit = defineEmits(['onClick'])
 const props = defineProps({
+  // Avatar props
+  avatarImage: { type: String },
+  avatarIndicatorColor: {
+    type: [Function, String, Object],
+    default: 'neutral-4',
+  },
+  avatarIndicatorIcon: { type: [Function, String, Object], default: '' },
+  avatarName: { type: String },
+  avatarRound: { type: Boolean, default: true },
+  avatarShowIndicator: { type: Boolean, default: false },
+  avatarSize: { type: String, default: 'sm' },
   caption: {
     type: String,
     default: '',
@@ -50,8 +62,22 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  typeIcon: {
+    type: String,
+    default: 'icon',
+  },
 })
 
+const avatarProps = computed(() => ({
+  image: props.avatarImage,
+  indicatorColor: props.avatarIndicatorColor,
+  indicatorIcon: props.avatarIndicatorIcon,
+  name: props.avatarName,
+  round: props.avatarRound,
+  showIndicator: props.avatarShowIndicator,
+  size: props.avatarSize,
+}))
+
 /* Computed variables */
 const backgroundColor = computed(() => {
   if (props.selected && !props.destructive && !props.positive) {
@@ -89,6 +115,8 @@ const labelStyle = computed(() => {
   return 'text-body-sm'
 })
 
+const showAvatar = computed(() => props.typeIcon === 'avatar')
+
 const type = computed(() => {
   if (props.destructive) {
     return 'destructive'
@@ -115,7 +143,8 @@ const handleClick = () => {
     :tabindex="inSheet ? '-1' : '0'"
     @click="handleClick"
   >
-    <q-item-section v-if="leftIcon" side>
+    <!-- Left Icon -->
+    <q-item-section v-if="typeIcon === 'icon' && leftIcon" side>
       <q-icon
         :class="`${leftIcon} ${iconClass}`"
         :aria-hidden="true"
@@ -123,6 +152,13 @@ const handleClick = () => {
         size="1rem"
       />
     </q-item-section>
+
+    <!-- Avatar -->
+    <q-item-section v-if="showAvatar" side>
+      <slot name="avatar">
+        <UAvatar v-bind="avatarProps" :name="props.avatarName || ''" />
+      </slot>
+    </q-item-section>
     <slot name="leading_slot"></slot>
     <q-item-section
       v-if="showCaption"
@@ -130,7 +166,9 @@ const handleClick = () => {
       :tabindex="!inSheet ? '-1' : '0'"
     >
       <q-item-label>{{ label }}</q-item-label>
-      <q-item-label class="text-body-xs text-description">{{ caption }}</q-item-label>
+      <q-item-label class="text-body-xs text-description">
+        {{ caption }}
+      </q-item-label>
     </q-item-section>
     <q-item-section
       v-else

package/src/components/index.js

@@ -13,6 +13,7 @@ import UDate from './core/UDate.vue'
 import UDialogStd from './core/UDialogStd.vue'
 import UDrawer from './core/UDrawer/UDrawer.vue'
 import UExpansionStd from './core/UExpansionStd.vue'
+import UFilter from './core/UFilter.vue'
 import UInnerLoader from './core/UInnerLoader.vue'
 import UInputAddressLookup from './core/UInputAddressLookup.vue'
 import UInputPhoneStd from './core/UInputPhoneStd.vue'
@@ -59,6 +60,7 @@ export {
   UDialogStd,
   UDrawer,
   UExpansionStd,
+  UFilter,
   UInnerLoader,
   UInputAddressLookup,
   UInputPhoneStd,