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

package/src/components/core/UTabsStd.vue

@@ -0,0 +1,111 @@
+<script setup>
+const props = defineProps({
+  tabs: {
+    type: Array,
+    required: true,
+  },
+  align: { type: String, default: 'justify' },
+})
+
+const selectedTab = defineModel({
+  required: true,
+  type: [Boolean, String, Number],
+})
+</script>
+
+<template>
+  <q-tabs
+    v-model="selectedTab"
+    :dense="true"
+    active-color="primary"
+    indicator-color="primary"
+    outside-arrows
+    inline-label
+    mobile-arrows
+    :align="align"
+    no-caps
+    class="u-tabs-std text-caption-md"
+  >
+    <template v-for="tab in tabs" :key="tab.name">
+      <q-tab
+        :aria-label="tab.label"
+        v-if="!tab.route"
+        :name="tab.name"
+        :ripple="false"
+        :disable="tab.disable"
+      >
+        <template v-slot:default>
+          <q-icon
+            :aria-label="tab.label"
+            :alt="tab.label"
+            v-if="tab.leftIcon"
+            :class="`left-icon ${tab.leftIcon}`"
+          />
+          <p class="q-ma-none">{{ tab.label }}</p>
+          <q-icon
+            :aria-label="tab.label"
+            :alt="tab.label"
+            v-if="tab.rightIcon"
+            :class="`right-icon ${tab.rightIcon}`"
+          />
+        </template>
+      </q-tab>
+      <q-route-tab
+        v-else
+        :name="tab.name"
+        :ripple="false"
+        :to="`${tab.route}`"
+        exact
+        :aria-label="tab.label"
+        :disable="tab.disable"
+      >
+        <template v-slot:default>
+          <q-icon
+            :aria-label="tab.label"
+            :alt="tab.label"
+            v-if="tab.leftIcon"
+            :class="`left-icon ${tab.leftIcon}`"
+          />
+          <p class="q-ma-none">{{ tab.label }}</p>
+          <q-icon
+            :aria-label="tab.label"
+            :alt="tab.label"
+            v-if="tab.rightIcon"
+            :class="`right-icon ${tab.rightIcon}`"
+          />
+        </template>
+      </q-route-tab>
+    </template>
+  </q-tabs>
+</template>
+
+<style lang="sass">
+.u-tabs-std
+  color: $dark
+  font-weight: 500
+
+  & .q-tab__content
+    & .q-icon
+      width: $ms
+      height: $ms
+      font-size: $ms
+
+  & .left-icon
+    margin-right: 0.45rem
+
+  .right-icon
+    width: $ms
+    height: $ms
+    font-size: $ms
+    margin-left: 0.45rem
+
+  .q-tab--inactive, .q-tab--active
+    min-width: 5.5rem
+
+  .q-tab--inactive
+    border-bottom: 2px solid $neutral-3
+    opacity: 1
+
+  .q-tab--inactive:hover
+    color: $primary
+</style>

package/src/components/core/UToggleStd.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { onMounted, watch } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: 'toggle',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  id: {
+    type: [String, Number],
+    default: 'u-toggle',
+    required: true, // it is required for to match accessibility crieteria
+  },
+  checkedIcon: {
+    type: String,
+    default: '',
+  },
+  unCheckedIcon: {
+    type: String,
+    default: '',
+  },
+})
+
+const toggle = defineModel({ default: false, type: Boolean })
+
+/**
+ * adding icons as a child of toggle thumb to keep icons in center
+ */
+const updateIconPosition = () => {
+  setTimeout(() => {
+    const thumbElement = document.getElementsByClassName('q-toggle__thumb')
+    const leftIconElement = document.getElementById(
+      `u-toggle-left-icon-${props.name}`
+    )
+    const rightIconElement = document.getElementById(
+      `u-toggle-right-icon-${props.name}`
+    )
+    if (thumbElement.length > 0) {
+      Array.from(thumbElement).forEach((element) => {
+        if (leftIconElement && element.id === props.id) {
+          leftIconElement.style.display = 'block'
+          element.appendChild(leftIconElement)
+        }
+        if (rightIconElement && element.id === props.id) {
+          rightIconElement.style.display = 'block'
+          element.appendChild(rightIconElement)
+        }
+      })
+    }
+  }, 100)
+}
+
+/**
+ * adding the label to corresponding toggle input to match the accessibility
+ */
+onMounted(() => {
+  const toggleElement = document.getElementById(`u-toggle-${props.id}`)
+  if (toggleElement) {
+    const inputElement = toggleElement.querySelector('input')
+    const thumbElement = toggleElement.getElementsByClassName('q-toggle__thumb')
+    thumbElement[0].id = `${props.id}`
+    if (inputElement) {
+      inputElement.id = `u-toggle-${props.id}`
+    }
+  }
+  updateIconPosition()
+})
+
+watch(toggle, () => {
+  updateIconPosition()
+})
+</script>
+
+<template>
+  <label class="hidden" :for="`u-toggle-${id}`">{{ label }}</label>
+  <q-toggle
+    :id="`u-toggle-${id}`"
+    v-model="toggle"
+    :name="name"
+    color="primary"
+    class="u-toggle"
+    :disable="disabled"
+    v-bind="$attrs"
+  >
+    <template v-slot:default>
+      <q-icon
+        v-if="checkedIcon && toggle"
+        :id="`u-toggle-right-icon-${name}`"
+        :class="`${checkedIcon} u-checked-icon`"
+        :aria-label="`${name ? name : ''} checked toggle icon`"
+      >
+      </q-icon>
+      <q-icon
+        v-if="unCheckedIcon && !toggle"
+        :id="`u-toggle-left-icon-${name}`"
+        :class="`${unCheckedIcon} u-unchecked-icon`"
+        :aria-label="`${name ? name : ''} unchecked toggle icon`"
+      >
+      </q-icon>
+    </template>
+  </q-toggle>
+</template>
+
+<style lang="sass">
+.u-toggle
+  .q-toggle__inner
+    padding: 0
+
+  .q-toggle__label
+    q-label
+      position: absolute
+      bottom: 1.8rem
+      left: 4.8rem
+
+  .u-checked-icon
+    color: $primary !important
+    font-size: 1rem
+    display: none
+
+  .u-unchecked-icon
+    font-size: 1rem
+    color: $description !important
+    display: none
+
+  .q-toggle__inner--truthy
+    .q-toggle__track
+      background: $primary
+      opacity: 1
+
+    .q-toggle__thumb:after
+      background: $neutral-1
+
+  .q-toggle__track
+    height: $md
+    border-radius: 1.175em
+    width: 3.5rem
+    padding: $xxs
+    background: $neutral-4
+
+  .q-toggle__thumb
+    top: 0.26rem
+    left: 0.27rem
+    width: $ms
+    height: $ms
+
+  .q-toggle__inner--truthy
+    .q-toggle__thumb
+      left: 1.72rem
+      width: $ms
+      height: $ms
+</style>

package/src/components/core/UTooltip.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  icon: {
+    type: String,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  anchor: {
+    type: String,
+  },
+  self: {
+    type: String,
+  },
+  offset: {
+    type: Array,
+  },
+  target: {
+    type: String,
+    default: '',
+  },
+})
+
+/**
+ * checking if string contains only white spaces
+ */
+const getTooltipText = computed(() => {
+  if (!props.description.replace(/\s/g, '')) {
+    return null
+  } else {
+    return props.description
+  }
+})
+</script>
+
+<template>
+  <q-tooltip
+    class="u-tooltip shadow-2 bg-dark row"
+    v-bind="$attrs"
+    :anchor="anchor"
+    :self="self"
+    :offset="offset"
+    :target="target"
+    v-if="getTooltipText"
+  >
+    <div class="row no-wrap tooltip-content">
+      <div class="flex items-center" v-if="icon">
+        <q-icon :class="icon" size="1rem"></q-icon>
+      </div>
+      <div class="text-body-xs tooltip-text">{{ getTooltipText }}</div>
+      <slot name="item" />
+    </div>
+  </q-tooltip>
+</template>
+
+<style lang="sass">
+.u-tooltip
+  border-radius: $xs
+  padding: $xs $sm
+  max-width: 22.5rem !important
+
+.tooltip-text
+  color: $neutral-1
+  word-wrap: break-word
+
+.tooltip-content
+  gap: $xxs
+</style>

package/src/components/index.js

@@ -0,0 +1,66 @@
+// import BtnStd from "./BtnStd.vue";
+import UCheckboxStd from './core/UCheckboxStd.vue'
+import UBtnStd from './core/UBtnStd.vue'
+import UBtnToggle from './core/UBtnToggle.vue'
+import URadioStd from './core/URadioStd.vue'
+import UTabsStd from './core/UTabsStd.vue'
+import UTabBtnStd from './core/UTabBtnStd.vue'
+import UMultiSelectStd from './core/UMultiSelectStd.vue'
+import UTooltip from './core/UTooltip.vue'
+import UBannerStd from './core/UBannerStd.vue'
+import UToggleStd from './core/UToggleStd.vue'
+import USelectStd from './core/USelectStd.vue'
+import UTableStd from './core/UTableStd.vue'
+import UAvatar from './core/UAvatar.vue'
+import UAvatarGroup from './core/UAvatarGroup.vue'
+import UBadgeStd from './core/UBadgeStd.vue'
+import UBtnIcon from './core/UBtnIcon.vue'
+import UChip from './core/UChip.vue'
+import UInputAddressLookup from './core/UInputAddressLookup.vue'
+import UInputPhoneStd from './core/UInputPhoneStd.vue'
+import UInputTextStd from './core/UInputTextStd.vue'
+import UDialogStd from './core/UDialogStd.vue'
+import URadioBtn from './core/URadioBtn.vue'
+import UInnerLoader from './core/UInnerLoader.vue'
+import UMenuItem from './core/UMenuItem.vue'
+import UDrawer from './core/UDrawer.vue'
+import UMenuDropdown from './core/UMenuDropdown.vue'
+import UMenuButtonStd from './core/UMenuButtonStd.vue'
+import UBreadCrumbs from './core/UBreadCrumbs.vue'
+import UMenuDropdownAdvancedSearch from './core/UMenuDropdownAdvancedSearch.vue'
+import { useNotify } from '../composables/useNotify.js'
+import { useOverlayLoader } from '../composables/useOverlayLoader.js'
+
+export {
+  useOverlayLoader,
+  useNotify,
+  UAvatar,
+  UAvatarGroup,
+  UBadgeStd,
+  UBannerStd,
+  UBreadCrumbs,
+  UBtnIcon,
+  UBtnStd,
+  UBtnToggle,
+  UCheckboxStd,
+  UChip,
+  UDialogStd,
+  UDrawer,
+  UInnerLoader,
+  UInputAddressLookup,
+  UInputPhoneStd,
+  UInputTextStd,
+  UMenuButtonStd,
+  UMenuDropdown,
+  UMenuItem,
+  UMultiSelectStd,
+  URadioBtn,
+  URadioStd,
+  USelectStd,
+  UTabBtnStd,
+  UTableStd,
+  UTabsStd,
+  UToggleStd,
+  UTooltip,
+  UMenuDropdownAdvancedSearch,
+}

package/src/composables/useNotify.js

@@ -0,0 +1,79 @@
+import { useQuasar } from 'quasar'
+
+export const useNotify = () => {
+  const $q = useQuasar()
+
+  const handleGetActions = (data) => {
+    if (data.actionLabel) {
+      return [
+        {
+          label: data.actionLabel,
+          color: 'white',
+          noCaps: true,
+          unelevated: true,
+          class: 'u-notify-action-button',
+          handler: data.handler,
+        },
+      ]
+    } else {
+      return [
+        {
+          round: true,
+          color: 'white',
+          flat: true,
+          class: `u-notify-action-icon u-action-icon-${data.type}`,
+          icon: 'close',
+          handler: data.handler,
+        },
+      ]
+    }
+  }
+  /**
+   * it is chaing the custom icon with font awesome custom class
+   * @param {*} icon
+   */
+
+  // Adding class to Notification element to make it customizable
+  const handleGetCustomIcon = (icon, randomId) => {
+    setTimeout(() => {
+      let getNotificationElement = document.querySelector(
+        `.q-notification-elem-${randomId}`
+      )
+      if (getNotificationElement) {
+        let childElement = getNotificationElement.querySelector(
+          `.q-notification__wrapper .q-notification__content`
+        )
+        if (childElement.childNodes.length == 1) {
+          const iconEleHTML = `<i class='${icon}' aria-label='Custom Icon' style='height:24px; width:24px; font-size: 24px; margin-right: 8px' alt='Custom Icon Alt'></i>`
+          childElement.insertAdjacentHTML('afterbegin', iconEleHTML)
+        }
+      }
+    }, 100)
+  }
+
+  const notify = (props) => {
+    if (props.label && props.type) {
+      let randomId = Math.floor(100000 + Math.random() * 900000)
+      let notifyProps = {
+        type: props.type === 'accent' ? 'negative' : props.type,
+        message: props.label,
+        caption: props.message,
+        color: props.type,
+        timeout: props.timeout,
+        classes: `u-notify u-type-${props.type} q-notification-elem-${randomId}`,
+        position: props.position,
+        progress: props.progress,
+        icon: props.icon ? handleGetCustomIcon(props.icon, randomId) : null,
+        actions: handleGetActions(props),
+      }
+
+      $q.notify(notifyProps)
+    } else {
+      console.error(
+        'Error: Failed prop types: The props `label` and `type` are marked as required in Notify, but its values are `undefined'
+      )
+    }
+  }
+
+  return { notify }
+}

package/src/composables/useOverlayLoader.js

@@ -0,0 +1,23 @@
+import { Loading, QSpinnerGears } from 'quasar'
+
+export const useOverlayLoader = () => {
+
+    const showLoader = (props) => {
+
+    Loading.show({
+        backgroundColor: props?.backgroundColor,
+        customClass: props.customClass ? props.customClass : '',
+        message: props?.message,
+        messageColor: props.messageColor ? props.messageColor: 'dark',
+        spinner: props.spinner ? props.spinner : QSpinnerGears,
+        spinnerSize: props.spinnerSize ? props.spinnerSize : '6rem',
+        spinnerColor: props?.spinnerColor
+    })
+   }
+
+  const hideLoader = () =>{
+   Loading.hide()
+  }
+ 
+  return { showLoader, hideLoader }
+}

package/src/css/app.sass

@@ -0,0 +1,159 @@
+@import './vars/colors.variables'
+@import './colors'
+@import './typography'
+@import 'flag-icons/css/flag-icons.min'
+
+// @import './media'
+
+*
+  font-family: 'neue-haas-grotesk-text', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'
+
+//FOCUS CLASSES
+
+.focus-primary
+    &:focus
+        box-shadow: 0 0 0 2px rgba(35, 75, 169, .20)
+
+.focus-positive
+    &:focus
+        box-shadow: 0 0 0 2px rgba(36, 133, 96, .20)
+
+.focus-warning
+    &:focus
+        box-shadow: 0 0 0 2px rgba(254, 78, 17, .20)
+
+.focus-accent
+    &:focus
+        box-shadow: 0 0 0 2px rgba(203, 42, 61, .20)
+
+.focus-info
+    &:focus
+        box-shadow: 0 0 0 2px rgba(92, 74, 184, .20)
+
+.focus-neutral
+    &:focus
+        box-shadow: 0 0 0 2px rgba(220, 225, 233, .20)
+
+//Shadow CLASSES
+
+.shadow-1
+    box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+
+.shadow-2
+    box-shadow: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
+
+.shadow-3
+    box-shadow: 0px 12px 12px 0px rgba(16, 17, 20, 0.16)
+
+.shadow-4
+    box-shadow: 0px 0px 16px 0px rgba(16, 17, 20, 0.20)
+
+.shadow-down-1
+    box-shadow: 0px 2px 2px 0px rgba(16, 17, 20, 0.04)
+
+.shadow-down-2
+    box-shadow: 0px 4px 4px 0px rgba(16, 17, 20, 0.08)
+
+.shadow-down-3
+    box-shadow: 0px 8px 8px 0px rgba(16, 17, 20, 0.12)
+
+.shadow-down-4
+    box-shadow: 0px 12px 12px 0px rgba(16, 17, 20, 0.16)
+
+.shadow-up-1
+    box-shadow: 0px -2px 2px 0px rgba(16, 17, 20, 0.04)
+
+.shadow-up-2
+    box-shadow: 0px -4px 4px 0px rgba(16, 17, 20, 0.08)
+
+.shadow-up-3
+    box-shadow: 0px -8px 8px 0px rgba(16, 17, 20, 0.12)
+
+.shadow-up-4
+    box-shadow: 0px -12px 12px 0px rgba(16, 17, 20, 0.16)
+
+
+// NOTIFY Custom CLASSES
+
+.u-notify
+  width: 25.25rem
+  min-height: $xxl
+  border-radius: $xs
+  padding: $sm $sm $xs $sm
+  box-shadow: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
+
+  .q-notification__actions
+    padding: 0rem 0.5rem
+
+  .q-notification__progress
+    width: 25.25rem
+    bottom: -0.5rem
+    border-radius: 0rem 0.25rem
+    height: 0.25rem
+
+  .q-notification__content
+    .q-icon
+      margin-right: $xs
+
+  .q-notification__message
+    padding: 0rem
+    > div:first-child
+      font-size: 0.875rem
+      font-weight: 500
+      line-height: 1.25rem
+      letter-spacing: 0.03333rem
+
+    .q-notification__caption
+      font-size: 0.75rem
+      font-weight: 400
+      line-height: 1.25rem
+      letter-spacing: 0.01786rem
+
+.u-notify-action-button
+  height: $lg
+  min-width: 5.5rem
+  padding: 0rem $ba
+  border-radius: $xs
+
+.u-notify-action-icon
+  background: transparent !important
+
+.u-action-icon-positive
+  .q-icon
+    color: $positive
+.u-action-icon-info
+  .q-icon
+    color: $info
+.u-action-icon-warning
+  .q-icon
+    color: $warning
+.u-action-icon-accent
+  .q-icon
+    color: $accent
+
+.u-type-positive
+  background: $green-2 !important
+  color: $green-7 !important
+  .q-btn
+    background: $positive
+
+.u-type-info
+  background: $purple-1 !important
+  color: $purple-7 !important
+  .q-btn
+    background: $info
+
+.u-type-warning
+  background: $orange-1 !important
+  color: $orange-7 !important
+  .q-btn
+    background: $warning
+
+.u-type-accent
+  background: $red-1 !important
+  color: $red-7 !important
+  .q-btn
+    background: $accent
+
+.icon-secondary-opacity
+  --fa-secondary-opacity: 0.20