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

package/src/components/core/UChip.vue

@@ -0,0 +1,251 @@
+<script setup>
+import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
+
+const props = defineProps({
+  chipLabel: {
+    type: String,
+    default: 'Chip',
+  },
+  dense: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  avatarLabel: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+  },
+  iconClass: {
+    type: String,
+  },
+  type: {
+    type: String,
+    default: 'neutral',
+  },
+  removable: {
+    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'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+const size = computed(() => {
+  if (props.dense) {
+    return 'xs'
+  }
+  return 'sm'
+})
+
+const avatarLabel = computed(() => {
+  if (props.avatarLabel && props.avatarLabel.length > 2) {
+    return props.avatarLabel.substring(0, 2)
+  }
+  return props.avatarLabel
+})
+</script>
+
+<template>
+  <q-chip
+    v-if="chipLabel"
+    class="u-chip q-px-xs"
+    v-bind="$attrs"
+    :class="type"
+    :modelValue="modelValue"
+    :dense="dense"
+    @remove="remove"
+    :removable="removable"
+    :aria-label="chipLabel"
+    @click="handleClick"
+  >
+    <q-avatar v-if="avatarLabel" class="u-avatar">
+      <span class="text-caption-xs">{{ avatarLabel }}</span>
+    </q-avatar>
+
+    <q-icon v-if="iconClass" :class="`iconLeft ${iconClass}`" />
+
+    <span :class="`chip-label text-overline-${size} text-uppercase`">
+      {{ chipLabel }}
+    </span>
+    <UTooltip
+      v-if="isShowTooltip"
+      :description="chipLabel"
+      :offset="offset"
+      :anchor="anchor"
+    />
+  </q-chip>
+</template>
+
+<style lang="sass">
+.u-chip
+  padding: $xs
+  border-radius: 20px
+  height: $lg
+
+  .u-avatar
+    width: $ms
+    height: $ms
+    margin-left:0 !important
+
+
+  .q-icon
+    width: $ba
+    height: $ba
+    font-size:$ba
+
+  .iconLeft
+    padding-right: $xs
+
+  .q-chip__icon--remove
+    padding: $xs 0 $xs $xs
+    margin:0
+
+
+  &.neutral
+    background-color: $neutral-3
+    color: $neutral-9
+    .q-avatar
+      background-color: $neutral-9 !important
+      color: $neutral-3
+
+    .q-icon
+      color: $neutral-9 !important
+
+  &.primary
+    background-color: $blue-2
+    color: $primary
+    .q-avatar
+      background-color: $primary !important
+      color: $blue-2 !important
+
+    .q-icon
+      color: $primary !important
+
+  &.positive
+    background-color: $green-2
+    color: $green-7
+    .q-avatar
+      background-color: $green-7 !important
+      color: $green-2 !important
+
+    .q-icon
+      color: $green-7 !important
+
+  &.accent
+    background-color: $red-2
+    color: $red-7
+    .q-avatar
+      background-color: $red-7 !important
+      color: $red-2 !important
+
+    .q-icon
+      color: $red-7 !important
+
+  &.info
+    background-color: $purple-2
+    color: $purple-7
+    .q-avatar
+      background-color: $purple-7 !important
+      color: $purple-2 !important
+
+    .q-icon
+      color: $purple-7 !important
+
+  &.warning
+    background-color: $orange-2
+    color: $orange-7
+    .q-avatar
+      background-color: $orange-7 !important
+      color: $orange-2 !important
+
+    .q-icon
+      color: $orange-7 !important
+  &.yellow
+    background-color: $yellow-1
+    color: $yellow-9
+    .q-avatar
+      background-color: $yellow-9 !important
+      color: $yellow-1 !important
+
+    .q-icon
+      color: $yellow-9 !important
+
+  &.teal
+    background-color: $teal-1
+    color: $teal-7
+    .q-avatar
+      background-color: $teal-7 !important
+      color: $teal-1 !important
+
+    .q-icon
+      color: $teal-7 !important
+
+  &.gold
+    background-color: $gold-2
+    color: $gold-8
+    .q-avatar
+      background-color: $gold-8 !important
+      color: $gold-2 !important
+
+    .q-icon
+      color: $gold-8 !important
+
+  &.pink
+    background-color: $pink-1
+    color: $pink-7
+    .q-avatar
+      background-color: $pink-7 !important
+      color: $pink-1 !important
+
+    .q-icon
+      color: $pink-7 !important
+
+  &.q-chip--dense
+    padding: $xxs !important
+    height: $ms !important
+    .q-avatar
+      width: $ba !important
+      height: $ba !important
+    .q-avatar__content span
+      font-size:$xs !important
+      line-height:0rem !important
+    .q-icon
+      width: $sm !important
+      height: $sm !important
+      font-size:$sm !important
+      padding: $xxs $xxs $xxs 0rem
+
+    .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>