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

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/UToolbar.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue'
+import UBtnIcon from './UBtnIcon.vue'
+import UBtnStd from './UBtnStd.vue';
+
+
+const emit = defineEmits(['navigateBack'])
+const props = defineProps({
+  isMiniState: {
+    type: Boolean,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  isSubPage: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+// Computed property for the title text
+const pageTitle = computed(() => {
+  return props.isSubPage ? `Back to ${props.title} ` : props.title
+})
+
+// Function to handle the back navigation
+const handleClick = () => {
+  emit('navigateBack')
+}
+</script>
+
+<template>
+  <q-toolbar class="u-header-toolbar-container">
+    <!-- Expand icon to open sidebar or drawer-->
+    <UBtnIcon
+      v-if="isMiniState"
+      ariaLabel="Sidebar expand icon"
+      color="primary"
+      class="q-ml-xxs"
+      iconClass="fa-kit-duotone fa-sidebar-shrink"
+      size="md"
+    />
+
+    <section class="fit row justify-between items-center q-mx-ms">
+      <!-- Title container with dynamic title and optional back button -->
+      <UBtnStd
+       v-if="isSubPage"
+       :aria-label="pageTitle"
+       class="back_to_button"
+       color="primary"
+       :flat="true"
+       :label="pageTitle"
+       left-icon="fa-kit-duotone fa-circle-arrow-left"
+       @click="handleClick"
+       />
+      <span v-else class="q-my-none text-heading-sm">{{ pageTitle }}</span>
+
+      <!-- Action element container -->
+      <div class="u-header-toolbar-action-container">
+        <slot name="right_section"/>
+      </div>
+    </section>
+  </q-toolbar>
+</template>
+
+<style lang="sass"> 
+.u-header-toolbar-container
+  background-color: white
+  width: 100%
+  padding: 0px
+  display: flex
+  align-items: center
+  align-self: stretch
+  padding: $sm 0
+
+.u-header-toolbar-inner-container
+  width: 100%
+
+.u-header-toolbar-title-container
+  display: flex
+  align-items: center
+  gap: $xs
+
+.u-header-toolbar-action-container
+  display: flex
+  align-items: center
+  gap: $sm
+
+.back_to_button
+  .button-label
+    color: $dark !important
+</style>

package/src/components/core/UTooltip.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { computed, useSlots  } 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: '',
+  },
+})
+
+const slots = useSlots()
+
+/**
+ * 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
+    v-if="getTooltipText || slots.item"
+    v-bind="$attrs"
+    class="u-tooltip shadow-2 bg-dark row"
+    :anchor="anchor"
+    :offset="offset"
+    :self="self"
+    :target="target"
+  >
+    <div class="row no-wrap tooltip-content">
+      <div v-if="icon" class="flex items-center">
+        <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>