@usssa/component-library 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/components/core/UMenuButtonStd.vue

@@ -0,0 +1,274 @@
+<script setup>
+import { computed, ref } from 'vue'
+import UAvatar from './UAvatar.vue'
+import UBtnStd from './UBtnStd.vue'
+import UBtnIcon from './UBtnIcon.vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+  },
+  label: {
+    type: String
+  },
+  iconClass: {
+    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),
+  },
+  selectedCountry: {
+    type: Object,
+  },
+  tooltip: {
+    type: String,
+  },
+  anchor: {
+    type: String,
+  },
+  self: {
+    type: String,
+  },
+  displayName: {
+    type: String,
+  },
+  avatarUrl: {
+    type: String,
+  },  
+  ariaLabel: {
+    type: String,
+  },
+   menuOffset: {
+    type: Array,
+    default: () => [4, 4],
+  },
+})
+
+const emit = defineEmits(['update-country', 'onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+const selectCountry = (country) => {
+  emit('update-country', country)
+}
+const toLowerCase = (str) => str.toLowerCase()
+</script>
+
+<template>
+
+  <!-- 1. Menu button Basic state -->
+  <q-btn-dropdown
+    v-if="states === 'Basic'"
+    :aria-label="label"
+    :class="`u-mb-btn u-mb-basic size-${size}`"
+    :color="color"
+    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 }}</div>
+    </template>
+    <slot name='menu' />
+  </q-btn-dropdown>
+  
+  
+  <!-- 2. Menu button Icon state -->
+  <UBtnIcon
+    v-if="states === 'Icon'"
+    :ariaLabel="ariaLabel"
+    :anchor="anchor"
+    class="u-mb-icon"
+    :color="color"
+    :iconClass="iconClass"
+    :offset="menuOffset"
+    ref="btn-icon"
+    :size="size"
+    :self="self"
+    :tooltip="tooltip"
+    @onClick="handleClick"
+  >
+    <template v-slot:menu>
+      <slot name='menu' />
+    </template>
+  </UBtnIcon>
+
+  <!-- 3. Menu button Button state -->
+  <UBtnStd
+    v-if="states === 'Button'"
+    class="u-mb-btn"
+    :color="color"
+    :left-icon="iconClass"
+    :label="label"
+    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}`"
+    :color="color"
+    content-class="u-options-menu"
+    no-caps
+    :menu-offset="menuOffset"
+    rounded
+    text-color="black"
+    unelevated
+  >
+    <template #label>
+      <q-item class="account-drop-down">
+        <q-item-section avatar class="q-pr-xs">
+          <UAvatar
+            v-if="avatarUrl"
+            :image="avatarUrl"
+            :name="displayName"
+            size="md"
+            :showIndicator="false"
+            :round="true"
+          />
+          <UAvatar
+            v-else
+            :name="displayName"
+            size="md"
+            :showIndicator="false"
+            :round="true"
+          />
+        </q-item-section>
+        <q-item-section v-if="displayName">
+          <q-item-label class="text-body-md">
+            {{ 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"
+    :class="`btn-field-${size}`"
+    content-class="u-prefix-dropdown-list"
+    flat
+    menu-anchor="top right"
+    menu-self="bottom middle"
+    :menu-offset="menuOffset"
+    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
+
+.u-mb-avatar
+  padding: 0rem $xs
+  align-items: center
+  &:hover::before
+    background-color: $neutral-3
+  gap: $xs
+  .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: 0 $sm !important
+  &.size-md
+    min-height: $lg
+    padding: 0 $ba !important
+  &.size-lg
+    min-height: $xl
+    padding: 0 $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,77 @@
+<script setup>
+import UMenuItem from './UMenuItem.vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+  },
+  destructive: {
+    type: Boolean,
+    default: false,
+  },
+  iconClass: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  menuClass: {
+    type: String,
+  },
+  selected: {
+    type: Boolean,
+  },
+})
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+</script>
+
+<template>
+  <q-list :class="`u-menu-dropdown size-${size} ${menuClass}`">
+    <template v-for="(item, index) in data" :key="index">
+      <UMenuItem
+        :label="item.label"
+        :leftIcon="item.leftIcon"
+        :rightIcon="item.rightIcon"
+        @onClick="handleClick"
+        :destructive="destructive"
+        :iconClass="iconClass"
+      >
+        <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
+</style>

package/src/components/core/UMenuDropdownAdvancedSearch.vue

@@ -0,0 +1,262 @@
+<script setup>
+import { computed } from 'vue'
+import UInputPhoneStd from './UInputPhoneStd.vue'
+import UInputTextStd from './UInputTextStd.vue'
+import UMultiSelectStd from './UMultiSelectStd.vue'
+import USelectStd from './USelectStd.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Advanced search',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md'].includes(val),
+  },
+  searchType: {
+    type: String,
+  },
+  fields: {
+    type: Array,
+  },
+  showCustomMenu: {
+    type: Boolean,
+    default: false,
+  },
+  menuClass: {
+    type: String,
+  },
+  labelIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-filter-search',
+  },
+  model: {
+    type: Object,
+  },
+})
+const emit = defineEmits(['updateModelVal', 'updateCountry'])
+
+const menuSize = computed(() => {
+  if (props.size === 'md') {
+    return '24.1875rem'
+  } else if (props.size === 'sm') {
+    return '23.5625rem'
+  } else {
+    return props.size
+  }
+})
+
+const updateModelVal = (event, index) => {
+  emit('updateModelVal', event, index)
+}
+
+const updateCountry = (val, label) => {
+  emit('updateCountry', val, label)
+}
+
+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 getKeyValueByTitle = (label) => {
+  const model = props.model
+  const camelCaseKey = titleToCamelCase(label)
+  if (camelCaseKey in model) {
+    return model[camelCaseKey]
+  } else {
+    return ''
+  }
+}
+</script>
+
+<template>
+  <div>
+    <q-expansion-item
+      v-bind="$attrs"
+      class="overflow-hidden u-expansion"
+      header-class="bg-neutral-2"
+      dense-toggle
+      :style="`width: ${menuSize}`"
+    >
+      <template #header>
+        <div class="row items-center full-width">
+          <q-icon :class="labelIcon" size="1rem" color="neutral-9" />
+          <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 class="bg-neutral-2 q-px-ba" v-else>
+        <div class="row items-container">
+          <div
+            v-for="(item, index) in fields && fields.length ? fields : []"
+            :key="index"
+            :class="`${
+              size === 'sm'
+                ? 'full-width'
+                : `col-${item?.col || 12} ${
+                    item?.col !== 12 ? 'half-width' : ''
+                  }`
+            }`"
+          >
+            <UInputTextStd
+              v-if="item.inputType === 'Text'"
+              v-bind="item.props"
+              :aria-label="item.label"
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(item.label)"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <USelectStd
+              v-if="item.inputType === 'Select'"
+              v-bind="item.props"
+              :aria-label="item.label"
+              hintIcon=""
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :options="item.options"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <UMultiSelectStd
+              v-if="item.inputType === 'Multiselect'"
+              v-bind="item.props"
+              :aria-label="item.label"
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :options="item.options"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <UInputPhoneStd
+              v-if="item.inputType === 'Phone'"
+              v-bind="item.props"
+              :aria-label="item.label"
+              hintIcon=""
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(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"
+              :aria-label="item.label"
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(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"
+                  aria-label="Birthday calendar"
+                  color="neutral-9"
+                  size="1rem"
+                  tabindex="0"
+                >
+                  <q-popup-proxy
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                  >
+                    <q-date
+                      v-model="item.value"
+                      v-bind="item.dateProps"
+                      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-card-actions align="left" class="full-width">
+            <slot name="action_left_button"></slot>
+          </q-card-actions>
+          <q-card-actions align="right" class="full-width">
+            <slot name="action_right_button"></slot>
+          </q-card-actions>
+        </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
+    justify-content: space-between
+    gap: $xs
+  .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>