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

package/src/components/core/UDialogStd.vue

@@ -0,0 +1,242 @@
+<script setup>
+import { computed, ref } from 'vue'
+import UBtnStd from './UBtnStd.vue'
+
+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 model = defineModel()
+
+const emit = defineEmits(['onBackIconClick', 'hideDialog'])
+const dialogRef = ref(true)
+
+const handleBackClick = () => {
+  return emit('onBackIconClick')
+}
+
+const headerClass = computed(() => {
+  return props.divider ? 'divider' : ''
+})
+
+const dialogStyle = computed(() => ({
+  '--customSize': props.customSize
+}))
+
+</script>
+
+<template>
+  <q-dialog
+    no-backdrop-dismiss
+    ref="dialogRef"
+    :position="position"
+    full-width
+    :class="`dialog-${size}`"
+    :style="dialogStyle"
+    v-model="model"
+    v-bind="$attrs"
+  >
+    <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
+                tabindex="-1"
+                class="dialog-action-icons"
+                :flat="true"
+                @click="handleBackClick()"
+              >
+                <q-icon
+                  class="icon-back"
+                  :class="leftIcon"
+                  size="1.5rem"
+                  :aria-label="leftIconLabel"
+                  tabindex="0"
+                />
+              </UBtnStd>
+            </div>
+            <div class="col">
+              <div>
+                <span class="text-heading-sm dialog-heading">
+                  {{ heading }}
+                </span>
+              </div>
+              <div>
+                <span class="text-body-sm dialog-caption" v-if="headingCaption">
+                  {{ headingCaption }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <UBtnStd
+            class="dialog-action-icons"
+            :flat="true"
+            tabindex="-1"
+            @click="dialogRef.hide()"
+          >
+            <q-icon
+              v-if="closeIcon"
+              class="icon-close"
+              :class="closeIcon"
+              size="1.5rem"
+              :aria-label="closeIconLabel"
+              tabindex="0"
+            />
+          </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 class="q-pa-ba action-wrapper" v-if="showActionButtons">
+        <q-card-actions align="left" class="action-buttons">
+          <slot name="action_secondary_one"></slot>
+          <slot name="action_secondary_two"></slot>
+        </q-card-actions>
+        <q-card-actions align="right" class="action-buttons">
+          <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: 0px !important
+  min-height: 0px !important
+  height: auto !important
+
+  .q-focus-helper
+    background: transparent !important
+
+#closeIconLabelRef
+  display: none
+
+#leftIconLabelRef
+  display: none
+</style>

package/src/components/core/UDrawer.vue

@@ -0,0 +1,211 @@
+<script setup>
+import { useRouter } from 'vue-router'
+import UMenuItem from './UMenuItem.vue'
+import { computed } from 'vue'
+import UBtnIcon from './UBtnIcon.vue'
+import UTooltip from './UTooltip.vue'
+import UBadgeStd from './UBadgeStd.vue'
+const props = defineProps({
+  menu: {
+    default: () => [],
+    type: Array,
+  },
+  brandLogo: {
+    default: '',
+  },
+  brandMiniLogo: {
+    default: '',
+  },
+  homeLink: {
+    required: true,
+    default: '/home',
+    type: String,
+  },
+})
+const $router = useRouter()
+const currentRoute = computed(() => $router.currentRoute.value.fullPath)
+
+const open = defineModel('open', {
+  default: false,
+  type: Boolean,
+})
+const miniState = defineModel('miniState', {
+  default: false,
+  type: Boolean,
+})
+
+const getCurrentPath = (int = 1) => {
+  return currentRoute.value.split('/')[int]
+}
+
+const currentPath = computed(() => getCurrentPath())
+
+const emit = defineEmits(['menuItemClicked', 'closeDrawer'])
+
+const handleClick = (menu) => {
+  emit('menuItemClicked', menu)
+}
+
+const handleCloseDrawer = () => {
+  emit('closeDrawer')
+}
+
+/**
+ * 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
+}
+</script>
+<template>
+  <q-drawer
+    v-model="open"
+    show-if-above
+    :mini="miniState"
+    :width="224"
+    :mini-width="64"
+    :breakpoint="400"
+    :class="`u-drawer ${miniState ? 'u-mini-drawer' : ''}`"
+    side="left"
+  >
+    <q-scroll-area class="u-drawer-scrollable-area">
+      <div
+        :class="`flex items-center justify-${
+          miniState ? 'center' : 'between'
+        } ${miniState ? 'q-py-ba' : 'q-py-xs q-pl-ba q-pr-xxs'}`"
+      >
+        <NuxtLink
+          class="flex items-center justify-center cursor-pointer"
+          :to="homeLink"
+        >
+          <img
+            v-if="!miniState"
+            :src="`${brandLogo}`"
+            alt="usssa-logo"
+            aria-label="usssa logo"
+            class="full-logo"
+          />
+          <img
+            v-else
+            :src="brandMiniLogo"
+            alt="usssa-logo"
+            aria-label="usssa logo"
+            class="mini-state-logo"
+          />
+        </NuxtLink>
+        <div
+          v-if="!miniState"
+          class="drawer-open-close-icon-wrapper flex items-center justify-center"
+        >
+          <UBtnIcon
+            ref="btn-icon"
+            size="sm"
+            ariaLabel="Sidebar shrink icon"
+            color="primary"
+            iconClass="fa-kit-duotone fa-sidebar-shrink"
+            @click="handleCloseDrawer"
+            dense
+          />
+        </div>
+      </div>
+      <q-list
+        :class="`drawer-menu-list ${miniState ? 'drawer-menu-mini-list' : ''}`"
+        padding
+      >
+        <template v-for="(m, i) in menu" :key="i">
+          <UMenuItem
+            :label="m.label"
+            :left-icon="m.leftIcon"
+            @onClick="handleClick(m)"
+            :id="`u-drawer-menu-${i}`"
+            :selected="currentPath === m.to.replaceAll('/', '')"
+            :class="`q-pb-xs ${miniState ? 'mini-menu-box' : ''}`"
+          >
+            <template v-if="!miniState" #trailing_slot>
+              <UBadgeStd v-if="m.badgeInfo" size="lg" :label="m.badgeInfo" />
+              <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
+            :description="m.label"
+            v-if="miniState"
+            :target="`#u-drawer-menu-${i}`"
+            anchor="center right"
+            self="center right"
+            :offset="[getXOffset(m.label), 20]"
+          />
+        </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%
+
+.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
+
+.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
+</style>

package/src/components/core/UInnerLoader.vue

@@ -0,0 +1,58 @@
+<script setup>
+defineProps({
+  loading: {
+    type: Boolean,
+    required: true,
+  },
+  loadingMessage: {
+    type: String,
+    required: true,
+  },
+  image: {
+    type: String,
+    required: true,
+  },
+  spinnerColor: {
+    type: String,
+    required: false,
+  },
+  spinnerSize: {
+    type: String,
+    requried: false,
+    default: '2rem',
+  },
+  imageHeight: {
+    type: String,
+  },
+  imageWidth: {
+    type: String,
+  },
+})
+</script>
+<template>
+  <q-inner-loading :showing="loading" color="primary" v-bind="$attrs">
+    <div class="column items-center q-gutter-y-sm">
+      <img
+        class="q-my-none"
+        alt="Loader Image"
+        :src="image"
+        :width="imageWidth"
+        :height="imageHeight"
+      />
+      <div class="row items-center">
+        <div v-if="loadingMessage">
+          <span class="message q-mr-sm">{{ loadingMessage }}</span>
+        </div>
+        <q-spinner-facebook :color="spinnerColor" :size="spinnerSize" />
+      </div>
+    </div>
+  </q-inner-loading>
+</template>
+<style scoped lang="sass">
+.u-loader
+  position: relative
+  height: 100%
+.message
+  color: $dark
+  font-weight: 500
+</style>