@usssa/component-library 1.0.0-alpha.10 → 1.0.0-alpha.100

package/src/components/core/UBtnToggle.vue

@@ -0,0 +1,68 @@
+<script setup>
+const props = defineProps({
+  options: {
+    type: Array,
+    require: true,
+  },
+})
+const model = defineModel()
+</script>
+
+<template>
+  <q-btn-toggle
+    class="u-btn-toggle"
+    v-model="model"
+    size="md"
+    text-color="dark"
+    unelevated
+    color="white"
+    no-caps
+    spread
+    toggle-color="primary"
+    :options="options"
+  >
+    <template
+      v-for="(option, index) in options"
+      v-slot:[option.slot]
+      :key="option"
+    >
+      <div class="row items-center no-wrap slot">
+        <q-icon
+          :class="options[index].iconClass"
+          v-if="options[index].iconClass"
+        />
+        <div class="text-center text-caption-md">
+          {{ options[index].name }}
+        </div>
+      </div>
+    </template>
+  </q-btn-toggle>
+</template>
+
+<style lang="sass">
+.slot
+  gap: $xxs
+
+.u-btn-toggle
+  &.q-btn-toggle
+    border-radius: $xs
+    padding: $xxs
+    box-shadow: $shadow-inner
+
+  .q-btn-item
+    .q-btn__content
+      font-size: 0.875rem
+      line-height: 1.25rem
+      letter-spacing: .03333rem
+      font-weight: 500
+
+  .q-btn-item
+    border-radius: $xxs !important
+    padding: $xs $sm !important
+    &[aria-pressed="true"]
+      &::before
+        color: $neutral-1
+        box-shadow: $shadow-skeumorphic-primary
+        border: $stroke-skeuomorphic
+        z-index: 2
+</style>

package/src/components/core/UCheckboxStd.vue

@@ -4,7 +4,7 @@ import { onMounted } from 'vue'
 const props = defineProps({
   label: {
     type: String,
-    default: 'Checkbox',
+    default: '',
   },
   name: {
     type: String,
@@ -23,23 +23,29 @@ const props = defineProps({
     default: 'u-checkbox',
     required: true, // it is required for to match accessibility crieteria
   },
+  indeterminate: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const isChecked = defineModel({ default: false, type: Boolean })
 
 onMounted(() => {
-  const checkboxElement = document.getElementById(`u-checkbox-${props.id}`)
+  const checkboxElement = document.getElementById(`${props.id}`)
   if (checkboxElement) {
     const inputElement = checkboxElement.querySelector('input')
-    inputElement.id = `u-checkbox-${props.id}`
+    inputElement.id = `${props.id}`
+  } else {
+    // need to add if element is not found
   }
 })
 </script>
 
 <template>
-  <label style="display: none" :for="`u-checkbox-${id}`">Checkbox </label>
+  <label style="display: none" :for="`${id}`">Checkbox </label>
   <q-checkbox
-    :id="`u-checkbox-${id}`"
+    :id="`${id}`"
     class="u-checkbox text-caption-lg"
     :name="name"
     v-model="isChecked"
@@ -48,6 +54,8 @@ onMounted(() => {
     size="md"
     keep-color
     color="primary"
+    :toggle-indeterminate="indeterminate"
+    v-bind="$attrs"
   />
 </template>
 
@@ -56,12 +64,21 @@ onMounted(() => {
   color: $primary
   font-weight: 500
 
-  &.q-checkbox__inner
+  .q-checkbox__inner
     display: flex
     justify-content: center
     align-items: center
+    height: $ms
+    width: $ms
+
+  .q-checkbox__inner:before
+    top: -9px !important
+    left: -2px !important
+    width: 2.7rem
+    height: 2.7rem
+    border-radius: 10rem !important
 
-  &.q-checkbox__bg
+  .q-checkbox__bg
     border: 0.125rem solid $primary
     border-radius: $xxs
     height: $ms
@@ -71,7 +88,7 @@ onMounted(() => {
     justify-content: center
     align-items: center
 
-  &.q-checkbox__svg
+  .q-checkbox__svg
     position: static
     height: 1rem !important
     width: 1rem !important

package/src/components/core/UChip.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
 
 const props = defineProps({
   chipLabel: {
@@ -16,15 +17,13 @@ const props = defineProps({
   },
   avatarLabel: {
     type: String,
-    default: 'NA',
+    default: '',
   },
   icon: {
     type: String,
-    default: 'NA',
   },
   iconClass: {
     type: String,
-    default: 'NA',
   },
   type: {
     type: String,
@@ -34,6 +33,21 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  remove: {
+    type: Function,
+  },
+  isShowTooltip: {
+    type: Boolean,
+    default: false,
+  },
+  offset: {
+    default: () => [14, 14],
+    type: Array,
+  },
+  anchor: {
+    type: String,
+    default: 'bottom middle',
+  },
 })
 
 const emit = defineEmits(['update:modelValue', 'onClick'])
@@ -64,7 +78,7 @@ const avatarLabel = computed(() => {
     :class="type"
     :modelValue="modelValue"
     :dense="dense"
-    @remove="() => $emit('update:modelValue', false)"
+    @remove="remove"
     :removable="removable"
     :aria-label="chipLabel"
     @click="handleClick"
@@ -78,6 +92,12 @@ const avatarLabel = computed(() => {
     <span :class="`chip-label text-overline-${size} text-uppercase`">
       {{ chipLabel }}
     </span>
+    <UTooltip
+      v-if="isShowTooltip"
+      :description="chipLabel"
+      :offset="offset"
+      :anchor="anchor"
+    />
   </q-chip>
 </template>
 
@@ -222,4 +242,10 @@ const avatarLabel = computed(() => {
 
     .q-chip__icon--remove
       padding: $xxs
+
+.chip-label
+  max-width: 12.5rem
+  white-space: normal
+  overflow-wrap: break-word
+  line-height: 1.2 !important // over-ridding this in long chip label case
 </style>

package/src/components/core/UDialogStd.vue

@@ -0,0 +1,244 @@
+<script setup>
+import { computed, ref } from 'vue'
+import UBtnStd from './UBtnStd.vue'
+
+const emit = defineEmits(['onBackIconClick', 'hideDialog'])
+const model = defineModel()
+const props = defineProps({
+  heading: {
+    type: String,
+    required: true,
+  },
+  fields: Object,
+  position: String,
+  size: {
+    type: String,
+    default: 'default',
+  },
+  customSize: {
+    type: String,
+  },
+  headingCaption: String,
+  leftIcon: String,
+  closeIcon: String,
+  showActionButtons: Boolean,
+  leftIconLabel: String,
+  closeIconLabel: String,
+  divider: Boolean,
+})
+
+const dialogRef = ref(true)
+
+const dialogStyle = computed(() => ({
+  '--customSize': props.customSize,
+}))
+
+const headerClass = computed(() => {
+  return props.divider ? 'divider' : ''
+})
+
+const handleBackClick = () => {
+  return emit('onBackIconClick')
+}
+</script>
+
+<template>
+  <q-dialog
+    v-bind="$attrs"
+    v-model="model"
+    :class="`dialog-${size}`"
+    full-width
+    no-backdrop-dismiss
+    :position="position"
+    ref="dialogRef"
+    :style="dialogStyle"
+  >
+    <q-card class="dialog-wrapper full-height">
+      <q-card-section
+        :class="`col items-center q-pa-none heading-section ${headerClass}`"
+      >
+        <div class="heading-wrapper row">
+          <div class="flex items-center dialog-heading-container">
+            <div v-if="leftIcon">
+              <UBtnStd
+                class="dialog-action-icons"
+                :aria-label="leftIconLabel"
+                :flat="true"
+                tabindex="0"
+                @click="handleBackClick()"
+              >
+                <q-icon
+                  class="icon-back"
+                  :class="leftIcon"
+                  size="1.5rem"
+                  tabindex="-1"
+                />
+              </UBtnStd>
+            </div>
+            <div class="col">
+              <div>
+                <span class="text-heading-sm dialog-heading">
+                  {{ heading }}
+                </span>
+              </div>
+              <div>
+                <span v-if="headingCaption" class="text-body-sm dialog-caption">
+                  {{ headingCaption }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <UBtnStd
+            class="dialog-action-icons"
+            :aria-label="closeIconLabel"
+            :flat="true"
+            tabindex="0"
+            @click="dialogRef.hide()"
+          >
+            <q-icon
+              v-if="closeIcon"
+              class="icon-close"
+              :class="closeIcon"
+              size="1.5rem"
+              tabindex="-1"
+            />
+          </UBtnStd>
+        </div>
+        <div class="row">
+          <slot name="secondary_row"></slot>
+        </div>
+      </q-card-section>
+
+      <q-card-section class="full-height main-content-dialog scroll q-px-ba">
+        <slot name="content" />
+      </q-card-section>
+
+      <div v-if="showActionButtons" class="q-pa-ba action-wrapper">
+        <q-card-actions class="action-buttons" align="left">
+          <slot name="action_secondary_one"></slot>
+          <slot name="action_secondary_two"></slot>
+        </q-card-actions>
+        <q-card-actions class="action-buttons" align="right">
+          <slot name="action_primary_one"></slot>
+          <slot name="action_primary_two"></slot>
+        </q-card-actions>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="sass">
+.dialog-default, .dialog-half
+  .q-dialog__inner--left, .q-dialog__inner--right
+    .dialog-wrapper
+      max-height: 100vh !important
+  .q-dialog__inner
+    &.q-dialog__inner--right
+      padding-right: $ba !important
+    &.q-dialog__inner--left
+      padding-left: $ba !important
+.dialog-heading-container
+  gap: $xs
+
+.dialog-caption
+  color: $neutral-9
+.dialog-heading
+  color: $dark
+
+.heading-section
+    padding: $ba
+
+.dialog-wrapper
+  border-radius: $xs !important
+  .divider
+    border-bottom: 1.5px solid $neutral-4
+  .action-wrapper
+    display: flex
+    justify-content: space-between
+    border-radius: 0 0 $xs $xs !important
+  .q-card__actions
+    padding: 0
+
+.dialog-half
+  .q-dialog__inner
+    padding: $ba 0
+    width: 50% !important
+
+.dialog-full
+  .q-dialog__inner
+    padding: 0 0
+    width: 100% !important
+  .dialog-wrapper
+    max-height: calc(100vh - 1rem)
+    border-radius: $xs $xs 0 0 !important
+    &.action-wrapper
+      border-radius: 0 !important
+  .main-content-dialog
+    padding: $ms $ms
+    padding-bottom: 0
+    margin-bottom: $ms !important
+  .heading-section
+    padding: $ba $ms !important
+  .action-wrapper
+    padding: $ba $ms
+
+.dialog-custom
+  .q-dialog__inner
+    padding: $ba 0
+    width: var(--customSize)
+
+.dialog-default
+  .q-dialog__inner
+    padding: $ba 0
+    width: 35.25rem !important
+
+.heading-wrapper
+  justify-content: space-between
+  flex-wrap: nowrap
+  margin-bottom: $ba
+
+.icon-close
+  color: $neutral-9
+  cursor: pointer
+  align-self: flex-start
+
+.icon-back
+  cursor: pointer
+  color: $neutral-9
+
+.main-content-dialog
+  margin-bottom: $ba
+  padding-bottom: 0
+
+.full-height
+  height: 100vh
+  display: flex
+  flex-direction: column
+
+.action-buttons
+  display: flex
+  align-items: center
+  gap: $xs
+  .q-btn
+    margin: 0 !important
+
+.q-btn.dialog-action-icons
+  padding: 0px 0px !important
+  min-width: 1.5rem !important
+  min-height: 0px !important
+  height: fit-content !important
+  border-radius: 0px
+
+  &:focus
+    outline: auto !important
+
+  .q-focus-helper
+    background: transparent !important
+
+#closeIconLabelRef
+  display: none
+
+#leftIconLabelRef
+  display: none
+</style>

package/src/components/core/UDrawer.vue

@@ -0,0 +1,235 @@
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import UBadgeStd from './UBadgeStd.vue'
+import UBtnIcon from './UBtnIcon.vue'
+import UBtnStd from './UBtnStd.vue'
+import UMenuItem from './UMenuItem.vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['menuItemClicked', 'closeDrawer'])
+const miniState = defineModel('miniState', {
+  default: false,
+  type: Boolean,
+})
+const open = defineModel('open', {
+  default: false,
+  type: Boolean,
+})
+const props = defineProps({
+  menu: {
+    default: () => [],
+    type: Array,
+  },
+  brandLogo: {
+    default: '',
+  },
+  brandMiniLogo: {
+    default: '',
+  },
+  homeLink: {
+    required: true,
+    default: '/home',
+    type: String,
+  },
+})
+
+const $router = useRouter()
+const currentPath = computed(() => getCurrentPath())
+const currentRoute = computed(() => $router.currentRoute.value.fullPath)
+
+const getCurrentPath = (int = 1) => {
+  return currentRoute.value.split('/')[int]
+}
+
+/**
+ * returning x offset for tooltip for long text
+ * @param {*} label
+ */
+const getXOffset = (label) => {
+  let labelLength = label.trim().length
+  return labelLength <= 4 ? 65 : labelLength < 9 ? 85 : 145
+}
+
+const handleClick = (menu) => {
+  emit('menuItemClicked', menu)
+}
+
+const handleCloseDrawer = () => {
+  emit('closeDrawer')
+}
+</script>
+<template>
+  <q-drawer
+    v-model="open"
+    :class="`u-drawer ${miniState ? 'u-mini-drawer' : ''}`"
+    :breakpoint="400"
+    :mini="miniState"
+    :mini-width="64"
+    show-if-above
+    side="left"
+    :width="224"
+  >
+    <q-scroll-area class="u-drawer-scrollable-area">
+      <div
+        :class="`flex items-center justify-${
+          miniState ? 'center q-py-xs' : 'between q-py-xs q-pl-ba q-pr-xxs'
+        } `"
+      >
+        <UBtnStd
+          class="flex items-center justify-center drawer-logo q-pa-none"
+          flat
+          :ripple="false"
+          size="sm"
+          :to="homeLink"
+        >
+          <q-img
+            v-if="!miniState"
+            class="full-logo"
+            alt="usssa-logo"
+            aria-label="usssa logo"
+            :src="`${brandLogo}`"
+          />
+          <q-img
+            v-else
+            class="mini-state-logo"
+            alt="usssa-logo"
+            aria-label="usssa logo"
+            :src="brandMiniLogo"
+          />
+        </UBtnStd>
+        <div
+          v-if="!miniState"
+          class="drawer-open-close-icon-wrapper flex items-center justify-center"
+        >
+          <UBtnIcon
+            iconClass="fa-kit-duotone fa-sidebar-shrink"
+            ariaLabel="Sidebar shrink icon"
+            color="primary"
+            dense
+            ref="btn-icon"
+            size="sm"
+            @click="handleCloseDrawer"
+          />
+          <UTooltip
+            anchor="center right"
+            description="Collapse Menu"
+            :offset="[4, 14]"
+            self="center start"
+          />
+        </div>
+      </div>
+      <q-list
+        :class="`drawer-menu-list ${miniState ? 'drawer-menu-mini-list' : ''}`"
+        padding
+      >
+        <template v-for="(m, i) in menu" :key="i">
+          <UMenuItem
+            :class="`drawer-items ${miniState ? 'mini-menu-box' : ''}`"
+            :id="`u-drawer-menu-${i}`"
+            :label="m.label"
+            :left-icon="m.leftIcon"
+            :selected="currentPath === m.to.replaceAll('/', '')"
+            @onClick="handleClick(m)"
+          >
+            <template v-if="!miniState" #trailing_slot>
+              <UBadgeStd v-if="m.badgeInfo" :label="m.badgeInfo" size="lg" />
+              <q-icon
+                v-if="m.rightIcon"
+                :class="`${m.rightIcon} ${
+                  currentPath === m.to.replaceAll('/', '')
+                    ? ''
+                    : 'non-active-right-icon'
+                }`"
+                :aria-label="m.badgeInfo"
+                size="1rem"
+              />
+            </template>
+          </UMenuItem>
+          <UTooltip
+            v-if="miniState"
+            anchor="center right"
+            :description="m.label"
+            :offset="[getXOffset(m.label), 20]"
+            self="center right"
+            :target="`#u-drawer-menu-${i}`"
+          />
+        </template>
+      </q-list>
+    </q-scroll-area>
+  </q-drawer>
+</template>
+<style lang="sass">
+.mini-state-logo
+  height: 1.5rem
+  width: 2.022rem
+
+.q-drawer:has(.u-drawer)
+  width: 14rem !important
+
+.q-drawer:has(.u-mini-drawer)
+  width: 4rem !important
+
+.u-drawer
+  background: $surface-bg-1
+  .q-scrollarea__content
+    width: 100%
+  .drawer-logo
+    padding: 0px !important
+    min-width: 0px !important
+    &.q-hoverable:hover > .q-focus-helper
+      opacity: 0
+    &:focus-visible
+      outline: auto !important
+      .q-focus-helper
+        display: none
+       
+.u-drawer-scrollable-area
+  height: calc(100% - 0px)
+  margin-top: 0px
+
+.menu-icon-class
+  font-size: 1rem
+
+.menu-icon-wrapper
+  min-width: auto !important
+
+.full-logo
+  width: 5.918rem
+  height: 1.5rem
+
+.drawer-open-close-icon
+  font-size: 1rem
+  color: $primary
+
+.drawer-open-close-icon-wrapper
+  height: $md
+  width: $md
+
+.drawer-menu-list
+  padding: 0px $xs
+
+  .u-menu-link
+    .q-item
+      margin-bottom: 0
+
+.drawer-menu-mini-list
+  display: grid
+  place-content: center
+  place-items: center
+
+.u-drawer
+  .drawer-menu-list
+    .q-icon
+      color: $primary !important
+
+.mini-menu-box
+  width: 3.5rem
+
+.u-drawer
+  .drawer-menu-list
+    .non-active-right-icon
+      color: $dark !important
+    .drawer-items
+      margin-bottom: $xs!important
+</style>