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

package/README.md

@@ -1,6 +1,6 @@
 # Component Library
 
-This library provides custom UI components for USSSA applications.
+**This library provides custom UI components for USSSA applications.**
 
 ## Installation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.40",
+  "version": "1.0.0-alpha.42",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UDialogStd.vue

@@ -13,6 +13,9 @@ const props = defineProps({
     type: String,
     default: 'default',
   },
+  customSize: {
+    type: String,
+  },
   headingCaption: String,
   leftIcon: String,
   closeIcon: String,
@@ -34,6 +37,11 @@ const handleBackClick = () => {
 const headerClass = computed(() => {
   return props.divider ? 'divider' : ''
 })
+
+const dialogStyle = computed(() => ({
+  '--customSize': props.customSize
+}))
+
 </script>
 
 <template>
@@ -43,6 +51,7 @@ const headerClass = computed(() => {
     :position="position"
     full-width
     :class="`dialog-${size}`"
+    :style="dialogStyle"
     v-model="model"
     v-bind="$attrs"
   >
@@ -176,6 +185,11 @@ const headerClass = computed(() => {
   .action-wrapper
     padding: $ba $ms
 
+.dialog-custom
+  .q-dialog__inner
+    padding: $ba 0
+    width: var(--customSize)
+
 .dialog-default
   .q-dialog__inner
     padding: $ba 0

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/index.js

@@ -28,6 +28,8 @@ 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 UToolbar from './core/UToolbar.vue'
+
 import { useNotify } from '../composables/useNotify.js'
 import { useOverlayLoader } from '../composables/useOverlayLoader.js'
 
@@ -63,4 +65,5 @@ export {
   UToggleStd,
   UTooltip,
   UMenuDropdownAdvancedSearch,
+  UToolbar,
 }

package/src/layouts/MainLayout.vue

@@ -114,6 +114,10 @@ const components = [
     title: 'Tab Button',
     path: '/tab-button',
   },
+  {
+    title: 'Toolbar',
+    path: '/toolbar',
+  },
   {
     title: 'Tooltip',
     path: '/tooltip',
@@ -130,10 +134,6 @@ const components = [
     title: 'Inner Loader',
     path: '/inner-loader',
   },
-  {
-    title: 'Typeahead Dropdown Search',
-    path: '/typeahead-advance-search',
-  },
   {
     title: 'Overlay Loader',
     path: '/overlay-loader',

package/src/pages/Dialog.vue

@@ -17,11 +17,13 @@ const caption = ref('This is the caption')
 const divider = ref(true)
 const size = ref('half')
 const tab = ref('movie')
+const customSize = ref('75%')
 
 const htmlContent = `<UDialogStd
   :heading="heading"
   :position="position"
   :size="size"
+  :customSize="customSize"
   :headingCaption="caption"
   @onBackIconClick="handleBackclick()"
   :showActionButtons="showActionButtons"
@@ -80,6 +82,7 @@ const showDialog = () => {
           :heading="heading"
           :position="position"
           :size="size"
+          :customSize="customSize"
           :headingCaption="caption"
           @onBackIconClick="handleBackclick()"
           :showActionButtons="showActionButtons"
@@ -158,6 +161,18 @@ const showDialog = () => {
                 label="Full"
                 class="q-pa-sm"
               />
+              <q-radio
+                dense
+                v-model="size"
+                val="custom"
+                label="Custom"
+                class="q-pa-sm"
+              />
+              <q-input
+                v-if="size === 'custom'"
+                label="Custom Size"
+                v-model="customSize"
+              />
             </div>
           </div>
           <div class="column">

package/src/pages/Toolbar.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { UToolbar, UBtnIcon, UMenuButtonStd } from 'src/components'
+
+defineOptions({
+  name: 'ToolbarPages',
+})
+
+const htmlContent = `<UToolbar 
+:isMiniState="isMiniState"
+:isSubPage="false" // Dynamic 
+title="Team Management" // Dynamic
+@navigateBack="navigateBack"
+/>`
+
+const isMiniState = ref(false)
+const subPage = ref('Hide')
+
+const navigateBack = () => {
+  subPage.value = 'Hide'
+}
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4963-84250&node-type=canvas&t=8c9AFBd3MDUS3kt3-0"
+      cardWidth="90%"
+    >
+      <template v-slot:component>
+        <div class="shadow-2 q-mt-xs">
+          <!-- Toolbar component -->
+          <UToolbar
+            :isMiniState="isMiniState"
+            :isSubPage="subPage == 'Hide' ? false : true"
+            :title="subPage == 'Hide' ? 'Team Management' : 'teams'"
+            @navigateBack="navigateBack"
+          >
+            <!-- Contain action elements -->
+            <template #right_section>
+              <UBtnIcon
+                aria-label="Shopping cart icon"
+                class="icon-secondary-opacity toolbar-icon"
+                iconClass="fa-kit-duotone fa-cart-shopping"
+                size="md"
+              />
+              <UBtnIcon
+                aria-label="Notification icon"
+                class="icon-secondary-opacity toolbar-icon"
+                iconClass="fa-kit-duotone fa-bell"
+                size="md"
+              />
+              <UMenuButtonStd
+                aria-label="Menu button item"
+                avatarUrl="https://cdn.quasar.dev/img/avatar1.jpg"
+                color="neutral-2"
+                displayName="Henry Finkle"
+                states="Avatar"
+              />
+            </template>
+          </UToolbar>
+        </div>
+      </template>
+
+      <!-- Properties  -->
+      <template v-slot:properties>
+        <div class="column">
+          <span class="text-grey-8 text-caption-sm">Show</span>
+          <div>
+            <q-radio
+              v-model="subPage"
+              class="q-pa-sm"
+              dense
+              label="Hide sub page"
+              val="Hide"
+            />
+            <q-radio v-model="subPage" dense label="Show sub page" val="Show" />
+          </div>
+        </div>
+        <div class="column q-mt-sm">
+          <span class="text-grey-8 text-caption-sm">Sidebar</span>
+          <div>
+            <q-radio
+              v-model="isMiniState"
+              class="q-pa-sm"
+              dense
+              label="Expand"
+              :val="false"
+            />
+            <q-radio v-model="isMiniState" dense label="Collapse" :val="true" />
+          </div>
+        </div>
+      </template>
+
+      <!-- Component structure -->
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+
+<style lang="sass"></style>

package/src/router/routes.js

@@ -135,6 +135,10 @@ const routes = [
         path: 'overlay-loader',
         component: () => import('src/pages/OverlayLoader.vue'),
       },
+      {
+        path: 'toolbar',
+        component: () => import('src/pages/Toolbar.vue'),
+      },
     ],
   },