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

package/src/components/core/UMenuButtonStd.vue

@@ -0,0 +1,280 @@
+<script setup>
+import UAvatar from './UAvatar.vue'
+import UBtnIcon from './UBtnIcon.vue'
+import UBtnStd from './UBtnStd.vue'
+
+const emit = defineEmits(['update-country', 'onClick'])
+
+const props = defineProps({
+  anchor: {
+    type: String,
+  },
+  ariaLabel: {
+    type: String,
+  },
+  avatarUrl: {
+    type: String,
+  },
+  color: {
+    type: String,
+  },
+  dataTestId: {
+    type: String,
+    default: 'menu-button',
+  },
+  displayName: {
+    type: String,
+  },
+  iconClass: {
+    type: String,
+  },
+  label: {
+    type: String,
+  },
+  menuOffset: {
+    type: Array,
+    default: () => [4, 4],
+  },
+  outline: {
+    type: Boolean,
+    default: true,
+  },
+  selectedCountry: {
+    type: Object,
+  },
+  self: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  states: {
+    type: String,
+    default: 'Basic',
+    validator: (val) =>
+      ['Basic', 'Icon', 'Button', 'Avatar', 'Prefix'].includes(val),
+  },
+  tooltip: {
+    type: String,
+  },
+})
+
+const handleClick = () => {
+  return emit('onClick')
+}
+const toLowerCase = (str) => str.toLowerCase()
+</script>
+
+<template>
+  <!-- 1. Menu button Basic state -->
+  <q-btn-dropdown
+    v-if="states === 'Basic'"
+    :class="`u-mb-btn u-mb-basic size-${size}`"
+    :aria-label="label"
+    :color="color"
+    :dataTestId="dataTestId"
+    flat
+    :menu-offset="menuOffset"
+    no-caps
+    text-color="dark"
+  >
+    <template #label>
+      <q-icon v-if="iconClass" :class="iconClass" size="sm" />
+      <div class="text-body-md q-ml-xs label">{{ label }}</div>
+    </template>
+    <slot name="menu" />
+  </q-btn-dropdown>
+
+  <!-- 2. Menu button Icon state -->
+  <UBtnIcon
+    v-bind="$attrs"
+    v-if="states === 'Icon'"
+    class="u-mb-icon"
+    :anchor="anchor"
+    :ariaLabel="ariaLabel"
+    :color="color"
+    :dataTestId="dataTestId"
+    :iconClass="iconClass"
+    :offset="menuOffset"
+    ref="btn-icon"
+    :self="self"
+    :size="size"
+    :tooltip="tooltip"
+    @onClick="handleClick"
+  >
+    <template v-slot:menu>
+      <slot name="menu" />
+    </template>
+  </UBtnIcon>
+
+  <!-- 3. Menu button Button state -->
+  <UBtnStd
+    v-bind="$attrs"
+    v-if="states === 'Button'"
+    class="u-mb-btn"
+    :color="color"
+    :dataTestId="dataTestId"
+    :label="label"
+    :left-icon="iconClass"
+    :outline="outline"
+    :size="size"
+  >
+    <template v-slot:menu>
+      <slot name="menu" />
+    </template>
+  </UBtnStd>
+
+  <!-- 4. Menu button Avatar state -->
+  <q-btn-dropdown
+    v-if="states === 'Avatar'"
+    :class="`u-mb-avatar size-${size}`"
+    content-class="u-options-menu"
+    :color="color"
+    :dataTestId="dataTestId"
+    :menu-offset="menuOffset"
+    no-caps
+    rounded
+    text-color="black"
+    unelevated
+  >
+    <template #label>
+      <q-item class="account-drop-down">
+        <q-item-section class="q-pr-xs" avatar>
+          <UAvatar
+            v-if="avatarUrl"
+            :image="avatarUrl"
+            :name="displayName"
+            :round="true"
+            :showIndicator="false"
+            size="md"
+          />
+          <UAvatar
+            v-else
+            :name="displayName"
+            :round="true"
+            :showIndicator="false"
+            size="md"
+          />
+        </q-item-section>
+        <q-item-section v-if="displayName">
+          <q-item-label class="text-body-md text-dark">
+            {{ displayName }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+    <slot name="menu" />
+  </q-btn-dropdown>
+
+  <!-- 5. Menu button Prefix state -->
+  <q-btn-dropdown
+    v-if="states === 'Prefix'"
+    :class="`u-prefix-dropdown text-body-sm btn-field-${size}`"
+    content-class="u-prefix-dropdown-list"
+    :dataTestId="dataTestId"
+    flat
+    menu-anchor="top right"
+    :menu-offset="menuOffset"
+    menu-self="bottom middle"
+    rounded
+  >
+    <template #label>
+      <q-icon
+        :class="`fi fi-${toLowerCase(selectedCountry.flag)} q-mr-xxs`"
+        :aria-label="selectedCountry.name"
+        left
+      />
+      <label class="selected-code"> {{ selectedCountry.code }}</label>
+    </template>
+    <slot name="menu" />
+  </q-btn-dropdown>
+</template>
+
+<style lang="sass">
+.u-mb-basic
+  .q-icon
+    font-size: 1.875rem
+  .label
+    text-wrap: wrap
+    overflow-wrap: anywhere
+
+.u-mb-avatar
+  padding: 0rem $xs
+  align-items: center
+  &:hover::before
+    background-color: $neutral-3
+  .account-drop-down
+    padding: 0
+    min-height: 0
+    .q-item__section--avatar
+      min-width: 0
+  .q-btn__content
+    .q-icon
+      width:1rem
+      height:1rem
+
+.u-mb-icon
+  &:hover::before
+      background-color: $blue-1
+  &:focus
+    border: 1.5px solid $primary
+    background-color: $blue-1
+    box-shadow: 0px 0px 0px 2px $primary-transparent
+
+.u-mb-btn
+  border-radius: $xs
+  min-width: 5.5rem !important
+  &.bg-neutral
+    background-color: $neutral-3
+  &.size-sm
+    min-height: $md
+    padding: $xs $sm !important
+  &.size-md
+    min-height: $lg
+    padding: $xs $ba !important
+  &.size-lg
+    min-height: $xl
+    padding: $xs $ba !important
+
+.u-mb-avatar
+  &.size-sm
+    min-height: $md
+  &.size-md
+    min-height: $lg
+  &.size-lg
+    min-height: $xl
+
+.u-prefix-dropdown
+  border-radius: $xs 0px 0px $xs
+  border: 1.5px solid $neutral-4
+  background: $neutral-2
+  &:hover
+    border: 1.5px solid $primary
+    background-color: $neutral-2
+  &:focus
+    border: 1.5px solid $primary
+    background-color: $neutral-2
+    box-shadow: 0px 0px 0px 2px $primary-transparent
+  &.q-btn
+    height: 2rem
+    min-height: 2rem
+    padding: 0px $xs
+  .selected-code
+    width: 2rem
+  &.btn-field-sm
+    height: $md
+  &.btn-field-md
+    height: $lg
+  &.btn-field-lg
+    height: $xl
+  .q-icon.on-left
+    width: 1rem
+    height: 0.655rem
+
+  .q-btn-dropdown__arrow
+    width: 1rem
+    height: 1rem
+    margin-left: $xxs
+</style>

package/src/components/core/UMenuDropdown.vue

@@ -0,0 +1,80 @@
+<script setup>
+import UMenuItem from './UMenuItem.vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+  },
+  dataTestId: {
+    type: String,
+    default: 'menu-dropdown',
+  },
+  iconClass: {
+    type: String,
+  },
+  menuClass: {
+    type: String,
+  },
+  selected: {
+    type: Boolean,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+})
+</script>
+
+<template>
+  <q-list
+    :class="`u-menu-dropdown size-${size} ${menuClass} q-gutter-y-xxs`"
+    :dataTestId="dataTestId"
+  >
+    <template v-for="(item, index) in data" :key="index">
+      <UMenuItem
+        :iconClass="iconClass"
+        :destructive="item.destructive"
+        :disable="item.disable"
+        :hide="item.hide"
+        :index="index"
+        :label="item.label"
+        :leftIcon="item.leftIcon"
+        :positive="item.positive"
+        :rightIcon="item.rightIcon"
+        @onClick="item.handler"
+      >
+        <template #leading_slot>
+          <slot name="leading_slot"></slot>
+        </template>
+        <template #trailing_slot>
+          <slot name="trailing_slot"></slot>
+        </template>
+      </UMenuItem>
+    </template>
+  </q-list>
+</template>
+
+<style lang="sass">
+.u-menu-dropdown
+  width: 11.5rem
+  padding: $xxs
+  flex-direction: column
+  align-items: flex-start
+  gap: q-my-xxs
+  flex-shrink: 0
+  border-radius: $xs
+  background: $neutral-1
+  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+  &.size-sm
+    min-width: 11.5rem
+    max-width: 11.5rem
+  &.size-md
+    min-width: 11.75rem
+    max-width: 15rem
+  &.size-lg
+      width: 18rem
+  .u-menu-link
+    &.q-item:last-child
+      margin-bottom: 0px
+</style>

package/src/components/core/UMenuDropdownAdvancedSearch.vue

@@ -0,0 +1,293 @@
+<script setup>
+import UBtnStd from './UBtnStd.vue'
+import UInputPhoneStd from './UInputPhoneStd.vue'
+import UInputTextStd from './UInputTextStd.vue'
+import UMultiSelectStd from './UMultiSelectStd.vue'
+import USelectStd from './USelectStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const props = defineProps({
+  disbaleApplyFilter: {
+    type: Boolean,
+  },
+  fields: {
+    type: Array,
+  },
+  labelIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-filter-search',
+  },
+  model: {
+    type: Object,
+  },
+  searchType: {
+    type: String,
+  },
+  showCustomMenu: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'md',
+  },
+  title: {
+    type: String,
+    default: 'Advanced search',
+  },
+  toggle: {
+    type: Boolean,
+  },
+})
+
+const emit = defineEmits([
+  'updateModelVal',
+  'updateCountry',
+  'onClearAdvancedSearchFilter',
+  'onApplyAdvancedSearchFilter',
+  'updateAdvanceSearchToggle',
+])
+
+const $screen = useScreenType()
+
+const clearFields = () => {
+  emit('onClearAdvancedSearchFilter')
+}
+
+const getKeyValueByTitle = (label) => {
+  const model = props.model
+  const camelCaseKey = titleToCamelCase(label)
+  if (camelCaseKey in model) {
+    return model[camelCaseKey]
+  } else {
+    return ''
+  }
+}
+
+const onApply = () => {
+  emit('onApplyAdvancedSearchFilter')
+}
+
+const titleToCamelCase = (str) => {
+  return str
+    .split(' ')
+    .map((word, index) => {
+      if (index === 0) {
+        return word.toLowerCase()
+      } else {
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+      }
+    })
+    .join('')
+}
+
+const updateCountry = (val, label) => {
+  emit('updateCountry', val, label)
+}
+
+const updateModelVal = (event, index) => {
+  emit('updateModelVal', event.trim(), index)
+}
+
+const updateToggle = (val) => {
+  emit('updateAdvanceSearchToggle', val)
+}
+</script>
+
+<template>
+  <div>
+    <q-expansion-item
+      v-bind="$attrs"
+      :modelValue="toggle"
+      class="overflow-hidden u-expansion"
+      dense-toggle
+      header-class="bg-neutral-2"
+      :label="title"
+      :style="`width: ${size}`"
+      @update:modelValue="(val) => updateToggle(val)"
+    >
+      <template #header>
+        <div class="row items-center full-width">
+          <q-icon :class="`${labelIcon}`" color="neutral-9" size="1rem" />
+          <span class="q-ml-xs text-caption-sm text-neutral-13">
+            {{ title }}
+          </span>
+        </div>
+      </template>
+
+      <!-- Using slot for custom menu  -->
+      <template v-if="showCustomMenu">
+        <slot name="custom-menu" />
+      </template>
+
+      <section v-else class="q-px-ba q-pb-ba bg-neutral-2">
+        <div class="row items-container">
+          <div
+            v-for="(item, index) in fields && fields.length ? fields : []"
+            :class="`${
+              size === 'sm'
+                ? 'full-width'
+                : `col-${item?.col || 12} ${
+                    item?.col !== 12 ? 'half-width' : ''
+                  }`
+            }`"
+            :key="index"
+          >
+            <UInputTextStd
+              v-if="item.inputType === 'Text'"
+              v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :aria-label="item.label"
+              :hintText="item.hintText"
+              :label="item.label"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <USelectStd
+              v-if="item.inputType === 'Select'"
+              v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :aria-label="item.label"
+              hintIcon=""
+              :hintText="item.hintText"
+              :label="item.label"
+              :options="item.options"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <UMultiSelectStd
+              v-if="item.inputType === 'Multiselect'"
+              v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :aria-label="item.label"
+              :hintText="item.hintText"
+              :label="item.label"
+              :options="item.options"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <UInputPhoneStd
+              v-if="item.inputType === 'Phone'"
+              v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :aria-label="item.label"
+              hintIcon=""
+              :hintText="item.hintText"
+              :label="item.label"
+              :options="item.options"
+              placeholder=""
+              :selected-country="model.selectedCountry"
+              :validationRules="[]"
+              @update-country="
+                updateCountry($event, titleToCamelCase(item.label))
+              "
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+
+            <UInputTextStd
+              v-if="item.inputType === 'Date'"
+              v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :aria-label="item.label"
+              :hintText="item.hintText"
+              :label="item.label"
+              outlined
+              parentClass="col"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            >
+              <template v-slot:append>
+                <q-icon
+                  class="fa-kit-duotone fa-calendar-range cursor-pointer icon-secondary-opacity"
+                  aria-label="Birthday calendar"
+                  color="neutral-9"
+                  size="1rem"
+                  tabindex="0"
+                >
+                  <q-popup-proxy
+                    cover
+                    transition-hide="scale"
+                    transition-show="scale"
+                  >
+                    <q-date
+                      v-model="item.value"
+                      v-bind="item.dateProps"
+                      :modelValue="getKeyValueByTitle(item.label)"
+                      mask="MM/DD/YYYY"
+                      @update:modelValue="
+                        updateModelVal($event, titleToCamelCase(item.label))
+                      "
+                    >
+                      <div class="row items-center justify-end">
+                        <q-btn
+                          v-close-popup
+                          color="primary"
+                          flat
+                          label="Close"
+                        />
+                      </div>
+                    </q-date>
+                  </q-popup-proxy>
+                </q-icon>
+              </template>
+            </UInputTextStd>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+
+        <div class="action-wrapper q-mt-ba">
+          <UBtnStd
+            class="col"
+            color="primary"
+            flat
+            label="Clear All Fields"
+            leftIcon="fa-kit fa-rotate-left"
+            @onClick="clearFields"
+          />
+
+          <UBtnStd
+            class="col"
+            color="primary"
+            :disable="disbaleApplyFilter"
+            label="Apply"
+            @onClick="onApply"
+          />
+        </div>
+      </section>
+    </q-expansion-item>
+  </div>
+</template>
+
+<style lang="sass">
+.u-expansion
+  border-radius: $xs
+  justify-content: space-between
+  align-items: center
+  align-self: stretch
+  .q-item
+    padding: $xs $xs $xs $ba
+    .q-item__section--side
+      padding-right: 0px
+      color: $neutral-9
+  .action-wrapper
+    display: flex
+    gap: $xs
+    background: $neutral-2 !important
+    .button-label
+      word-break: break-word
+  .q-card__actions
+    padding: 0px
+    margin: $ba 0px $ba 0px
+  .items-container
+    gap: $ba $xs
+  .half-width
+    flex: 1 1 calc(50% - 44px)
+    box-sizing: border-box
+</style>