@usssa/component-library 1.0.0-alpha.7 → 1.0.0-alpha.71

package/README.md

@@ -1,13 +1,16 @@
 # Component Library
 
-This library provides custom UI components for USSSA applications.
+**This library provides custom UI components for USSSA applications.**
 
 ## Installation
 
 1. Install the packge using command 'yarn'
 2. Go to specific page where you want to use a component from that library.
-   a. Import the library in your Quasar project: `import { UBtnStd } from 'component-library'`
+   a. Import the component in your project: `import { UBtnStd } from '@usssa/component-library'`
    b. Use the BtnStd component in your Nuxt app: `<UBtnStd label="Test" size="lg" />`
+3. We need to import below file to support component library styling in our project
+   a. @import '@usssa/component-library/src/css/app.sass'
+   b. @import '@usssa/component-library/src/css/quasar.variables.sass'
 
 ## Development
 

package/dist/component-library/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+defineOptions({
+  name: "App",
+});
+</script>

package/dist/component-library/assets/logo.svg

@@ -0,0 +1,19 @@
+<svg width="95" height="24" viewBox="0 0 95 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<g id="Lettering">
+<path d="M3.80408 2.66675H8.95923L4.80595 13.2946L11.6168 13.2333L15.8059 2.66675H20.8L16.7704 12.978C15.8482 15.3379 13.5896 16.889 11.0754 16.889H3.24023L3.23972 16.8853C0.95221 16.7796 -0.597379 14.4417 0.221722 12.2504L3.80408 2.66675Z" fill="#234BA9"/>
+<path d="M25.3431 2.66675C24.1871 2.66675 23.1592 3.40891 22.7861 4.5129L22.2017 6.24262L21.3962 8.1931L20.9479 9.20419C20.5153 10.1799 21.2229 11.2814 22.2822 11.2814H30.0955L29.3215 13.3117H19.4306L17.9807 16.8876H30.4658C31.6432 16.8876 32.7118 16.1933 33.199 15.1119L34.01 13.3117H33.9934L34.7674 11.2814H34.7746L35.0296 10.6669C35.5176 9.49105 34.6615 8.1931 33.398 8.1931H26.3902L27.1957 6.24262H36.3783L37.8282 2.66675H25.3431Z" fill="#234BA9"/>
+<path d="M65.9075 2.66675C64.7515 2.66675 63.7235 3.40891 63.3505 4.5129L62.7661 6.24262L61.9606 8.1931L61.5123 9.20419C61.0797 10.1799 61.7873 11.2814 62.8466 11.2814H70.6599L69.8859 13.3117H59.995L58.5451 16.8876H71.0302C72.2076 16.8876 73.2762 16.1933 73.7634 15.1119L74.5744 13.3117H74.5578L75.3318 11.2814H75.339L75.594 10.6669C76.0819 9.49105 75.2259 8.1931 73.9624 8.1931H66.9546L67.7601 6.24262H76.9427L78.3926 2.66675H65.9075Z" fill="#234BA9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.0723 2.66675H80.9702L79.6009 6.24262H89.5386L88.7205 8.27437H81.103C79.3981 8.27437 77.8944 9.40113 77.4017 11.0479L76.8451 12.908C76.2519 14.8906 77.7229 16.8889 79.7755 16.8888L90.3945 16.8883L93.6818 8.51818H93.697L94.5025 6.24262C95.162 4.52034 93.9023 2.66675 92.0723 2.66675ZM81.373 13.3131L82.259 11.2001H87.6558L86.7698 13.3131H81.373Z" fill="#234BA9"/>
+</g>
+<path id="top" d="M47.7783 0.00113767H62.8782C61.1471 3.8405 58.0313 4.88033 55.3948 4.88033H49.6691V1.41424L47.2456 4.88033H43.464L45.8076 6.95998L43.464 10.3994L47.3255 8.34642L49.6957 10.4794L49.6691 6.95998H54.5426C58.271 6.93332 58.8036 10.4794 58.1378 11.8125H42.7184C41.3069 11.8125 37.1258 10.7724 39.0166 5.76018C40.7743 1.78735 44.982 -0.0524702 47.7783 0.00113767Z" fill="#234BA9"/>
+<g id="bottom">
+<path d="M32.3588 20.1976C32.705 18.5712 34.7556 15.5317 38.484 15.2917H46.1804C46.3668 15.2917 46.8835 15.2704 47.2456 14.5452L47.7516 13.1987H57.6318C57.2324 14.2741 55.7943 16.5448 52.6518 16.7315H46.5532C46.5 16.7315 45.6899 16.8463 45.3282 17.6913C44.9287 18.6245 44.2097 18.7845 43.8368 18.8111H35.9007C35.2616 18.8378 33.7702 19.0511 32.3588 20.1976Z" fill="#CB2A3D"/>
+<path d="M56.1937 16.7181C55.7943 18.3445 53.8875 21.4054 50.0952 21.5973H44.1032C43.5439 21.6507 42.9484 21.7679 42.6118 22.6105C42.2603 23.4904 41.4933 23.7037 40.9873 23.7037H30.8674C31.258 22.6372 32.7902 20.4455 35.7942 20.2109H43.5173C43.7658 20.202 44.2363 20.1842 44.6092 19.3044C44.982 18.4245 45.2217 18.1312 46.0639 18.1046H52.6252C53.1844 18.1135 54.8089 17.838 56.1937 16.7181Z" fill="#CB2A3D"/>
+</g>
+<g id="shadow">
+<path d="M49.7491 13.1987L48.3643 16.7315H46.7132C46.367 16.7493 45.6394 16.9261 45.2985 17.758L46.2871 15.2864C46.4735 15.2784 46.8996 15.1611 47.2192 14.5852L47.7518 13.1987H49.7491Z" fill="#951F23"/>
+<path d="M42.6119 22.6114L42.6274 22.5736C42.959 21.7945 43.8175 21.5982 44.2631 21.5982H45.6745L47.0594 18.1055H46.0474C45.1419 18.0788 44.8377 18.6727 44.5747 19.3844C44.4761 19.651 44.1299 20.1538 43.5973 20.2072L42.6274 22.5736C42.6221 22.586 42.617 22.5986 42.6119 22.6114Z" fill="#951F23"/>
+</g>
+</g>
+</svg>

package/dist/component-library/assets/quasar-logo-vertical.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
+	<path
+		d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
+	<path fill="#050A14"
+		d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
+	<path fill="#00B4FF"
+		d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
+	<path fill="#00B4FF"
+		d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
+	<path fill="#050A14"
+		d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
+	<path fill="#00B4FF"
+		d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
+	<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
+</svg>

package/dist/component-library/boot/google-maps.js

@@ -0,0 +1,11 @@
+import { boot } from 'quasar/wrappers'
+import VueGoogleMaps from '@fawmi/vue-google-maps'
+
+export default boot(({ app }) => {
+  app.use(VueGoogleMaps, {
+    load: {
+      key: 'AIzaSyCUda4H5O67XNdBnIwRi3jiYrj41zTRbUk',
+      libraries: 'places',
+    },
+  })
+})

package/{src → dist/component-library}/components/core/UAvatar.vue

@@ -1,11 +1,15 @@
 <script setup>
 import { computed } from 'vue'
 import UBadgeStd from './UBadgeStd.vue'
+
 const props = defineProps({
   color: {
     type: String,
     default: 'primary',
   },
+  bgColor: {
+    type: String,
+  },
   icon: {
     type: String,
   },
@@ -59,16 +63,31 @@ const labelSize = computed(() => {
 
   return props.size
 })
+
+const initials = computed(() => {
+  if (props.name) {
+    const name = props.name.replace(/\s+/g, ' ')
+    const parts = name.split(' ')
+
+    if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase()
+
+    return `${parts[0].substring(0, 1).toUpperCase()}${parts[parts.length - 1]
+      .substring(0, 1)
+      .toUpperCase()}`
+  }
+  return props?.name
+})
 </script>
 
 <template>
   <q-avatar
     class="u-avatar"
     :class="`size-${size}`"
-    @click="handleClick"
+    :color="bgColor"
     :round="round"
     :rounded="!round"
     :icon="icon"
+    @click="handleClick"
     v-bind="$attrs"
   >
     <img v-if="image" :src="image" :alt="`avatar ${name}`" :aria-label="name" />
@@ -77,7 +96,7 @@ const labelSize = computed(() => {
       class="name"
       :class="`text-${color} text-caption-${labelSize}`"
     >
-      {{ name }}
+      {{ initials }}
     </span>
     <UBadgeStd
       v-if="showIndicator"

package/{src → dist/component-library}/components/core/UBannerStd.vue

@@ -1,6 +1,5 @@
 <script setup>
-import UBtnStd from 'src/components/core/UBtnStd.vue'
-import { computed } from 'vue'
+import UBtnStd from './UBtnStd.vue'
 
 const props = defineProps({
   type: {
@@ -23,11 +22,9 @@ const props = defineProps({
   },
   primaryActionLabel: {
     type: String,
-    default: 'Action 1',
   },
   secondaryActionLabel: {
     type: String,
-    default: 'Action 2',
   },
 })
 
@@ -46,11 +43,12 @@ const handleSecondaryActionClick = () => {
   <q-banner
     v-if="show && message"
     inline-actions
-    :class="`u-banner u-banner-${type}`"
+    :class="`u-banner u-banner-${type} ${!icon ? 'no-padding-label' : ''}`"
     tabindex="0"
   >
     <template v-slot:avatar>
       <q-icon
+        v-if="icon"
         aria-label="Banner Icon"
         :class="icon"
         size="1.5rem"
@@ -93,7 +91,7 @@ const handleSecondaryActionClick = () => {
 
 .u-banner-positive
   background: $green-1 !important
-  color: $green-6 !important
+  color: $green-7 !important
 
 .u-banner-info
   background: $purple-1 !important
@@ -110,4 +108,8 @@ const handleSecondaryActionClick = () => {
 .u-banner-primary
   background: $blue-1 !important
   color: $primary !important
+
+.no-padding-label
+  .q-banner__content
+    padding-left: 0px !important
 </style>

package/dist/component-library/components/core/UBreadCrumbs.vue

@@ -0,0 +1,67 @@
+<script setup>
+const props = defineProps({
+  align: {
+    type: String,
+    default: 'left',
+  },
+  links: {
+    type: Array,
+    default: () => [],
+  },
+  clickable: {
+    type: Boolean,
+    default: true,
+  },
+  showActiveRoute: {
+    type: Boolean,
+    default: true,
+  },
+  activeColor: {
+    type: String,
+    default: 'primary',
+  },
+})
+</script>
+<template>
+  <q-breadcrumbs
+    gutter="none"
+    v-bind="$attrs"
+    class="u-breadcrumb"
+    :align="align"
+    :active-color="activeColor"
+  >
+    <q-breadcrumbs-el
+      v-for="(link, index) of links"
+      :key="index"
+      :label="link.label"
+      :to="link.to"
+      :class="`breadcrumb-label text-caption-lg ${
+        index === 0
+          ? 'q-mr-xs'
+          : index === links.length - 1
+          ? 'q-ml-xs'
+          : 'q-mx-xs'
+      } ${!showActiveRoute ? 'hide-active-route' : null} ${
+        !clickable ? 'non-clickable-route' : null
+      }`"
+    />
+  </q-breadcrumbs>
+</template>
+<style lang="sass">
+.u-breadcrumb
+  .q-breadcrumbs__separator
+    font-size: 1rem
+    font-weight: 500
+    line-height: 1.25rem
+    letter-spacing: 0.03333rem
+
+  .q-router-link--active
+    cursor: default
+
+  .hide-active-route
+    color: $dark !important
+
+  .non-clickable-route
+    cursor: default !important
+    pointer-events: none
+</style>

package/{src → dist/component-library}/components/core/UBtnIcon.vue

@@ -40,6 +40,10 @@ const props = defineProps({
     type: String,
     default: 'center end',
   },
+  offset: {
+    type: Array,
+    default: () => [4, 4],
+  },
 })
 
 const emit = defineEmits(['onClick'])
@@ -85,20 +89,23 @@ const btnClass = computed(() => {
     class="u-btn-icon"
     :class="`size-${size} ${btnClass}`"
   >
-    <q-icon
-      :color="iconColor"
-      :aria-hidden="true"
-      :class="`${iconClass} size-${size}`"
-      :size="iconSize"
-    />
-
-    <UTooltip
-      v-if="tooltip"
-      :description="tooltip"
-      :anchor="anchor"
-      :self="self"
-      :offset="[4, 4]"
-    />
+    <template #default>
+      <q-icon
+        :color="iconColor"
+        :aria-hidden="true"
+        :class="`${iconClass} size-${size}`"
+        :size="iconSize"
+      />
+
+      <UTooltip
+        v-if="tooltip"
+        :description="tooltip"
+        :anchor="anchor"
+        :self="self"
+        :offset="offset"
+      />
+      <slot name="menu" />
+    </template>
   </q-btn>
 </template>
 
@@ -140,6 +147,9 @@ const btnClass = computed(() => {
     &.neutral-9
       color: $neutral-9
 
+  &.accent:hover
+    background: $accent-bg-hover
+
 .icon-tooltip
   background: $dark
   border-radius: $xxs

package/{src → dist/component-library}/components/core/UBtnStd.vue

@@ -39,20 +39,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['onClick'])
 
 const handleClick = () => {
   return emit('onClick')
 }
 
-const paddingClass = computed(() => {
-  if (props.size === 'sm') {
-    return 'q-px-sm'
-  }
-
-  return 'q-px-ba'
-})
-
 const textClass = computed(() => {
   if (props.color === 'neutral') {
     return 'text-neutral-9'
@@ -71,7 +63,7 @@ const isFullWidth = computed(() => {
 <template>
   <q-btn
     class="u-btn q-py-none"
-    :class="`size-${size} ${paddingClass} ${textClass} focus-${color} ${isFullWidth}`"
+    :class="`size-${size} ${textClass} focus-${color} ${isFullWidth}`"
     :color="color"
     :disable="disable"
     :unelevated="!outline"
@@ -80,45 +72,57 @@ const isFullWidth = computed(() => {
     :flat="flat"
     @click="handleClick"
   >
-    <div class="row items-center no-wrap">
-      <q-icon
-        v-if="leftIcon"
-        left
-        :class="leftIcon"
-        class="q-mr-xs"
-        size="1.25rem"
-      />
-
-      <div class="text-center text-caption-md button-label">
-        {{ label }}
-      </div>
-      <q-icon
-        v-if="rightIcon"
-        right
-        :class="rightIcon"
-        class="q-ml-xs"
-        size="1.25rem"
-      />
-    </div>
+    <template #default>
+      <slot name="default">
+        <div class="row items-center no-wrap">
+          <q-icon
+            v-if="leftIcon"
+            left
+            :class="leftIcon"
+            class="q-mr-xs"
+            size="1rem"
+          />
+
+          <div class="text-center text-caption-md button-label">
+            {{ label }}
+          </div>
+          <q-icon
+            v-if="rightIcon"
+            right
+            :class="rightIcon"
+            class="q-ml-xs"
+            size="1rem"
+          />
+        </div>
+      </slot>
+
+      <slot name="tooltip" />
+      <slot name="menu" />
+    </template>
   </q-btn>
 </template>
 
 <style lang="sass">
 .u-btn
   border-radius: $xs
-  min-width: 5.5rem
+  min-width: 5.5rem !important
 
   &.bg-neutral
     background-color: $neutral-3
 
   &.size-sm
     min-height: $md
+    padding: 0 $sm !important
 
   &.size-md
     min-height: $lg
+    padding: 0 $ba !important
+
 
   &.size-lg
     min-height: $xl
+    padding: 0 $ba !important
+
 
 .button-label
   word-break: break-all

package/dist/component-library/components/core/UBtnToggle.vue

@@ -0,0 +1,68 @@
+<script setup>
+const props = defineProps({
+  options: {
+    type: Array,
+    require: true,
+  },
+})
+const model = defineModel()
+</script>
+
+<template>
+  <q-btn-toggle
+    class="u-btn-toggle"
+    v-model="model"
+    size="md"
+    text-color="dark"
+    unelevated
+    color="white"
+    no-caps
+    spread
+    toggle-color="primary"
+    :options="options"
+  >
+    <template
+      v-for="(option, index) in options"
+      v-slot:[option.slot]
+      :key="option"
+    >
+      <div class="row items-center no-wrap slot">
+        <q-icon
+          :class="options[index].iconClass"
+          v-if="options[index].iconClass"
+        />
+        <div class="text-center text-caption-md">
+          {{ options[index].name }}
+        </div>
+      </div>
+    </template>
+  </q-btn-toggle>
+</template>
+
+<style lang="sass">
+.slot
+  gap: $xxs
+
+.u-btn-toggle
+  &.q-btn-toggle
+    border-radius: $xs
+    padding: $xxs
+    box-shadow: $shadow-inner
+
+  .q-btn-item
+    .q-btn__content
+      font-size: 0.875rem
+      line-height: 1.25rem
+      letter-spacing: .03333rem
+      font-weight: 500
+
+  .q-btn-item
+    border-radius: $xxs !important
+    padding: $xs $sm !important
+    &[aria-pressed="true"]
+      &::before
+        color: $neutral-1
+        box-shadow: $shadow-skeumorphic-primary
+        border: $stroke-skeuomorphic
+        z-index: 2
+</style>

package/{src → dist/component-library}/components/core/UCheckboxStd.vue

@@ -4,7 +4,7 @@ import { onMounted } from 'vue'
 const props = defineProps({
   label: {
     type: String,
-    default: 'Checkbox',
+    default: '',
   },
   name: {
     type: String,
@@ -23,23 +23,29 @@ const props = defineProps({
     default: 'u-checkbox',
     required: true, // it is required for to match accessibility crieteria
   },
+  indeterminate: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const isChecked = defineModel({ default: false, type: Boolean })
 
 onMounted(() => {
-  const checkboxElement = document.getElementById(`u-checkbox-${props.id}`)
+  const checkboxElement = document.getElementById(`${props.id}`)
   if (checkboxElement) {
     const inputElement = checkboxElement.querySelector('input')
-    inputElement.id = `u-checkbox-${props.id}`
+    inputElement.id = `${props.id}`
+  } else {
+    // need to add if element is not found
   }
 })
 </script>
 
 <template>
-  <label style="display: none" :for="`u-checkbox-${id}`">Checkbox </label>
+  <label style="display: none" :for="`${id}`">Checkbox </label>
   <q-checkbox
-    :id="`u-checkbox-${id}`"
+    :id="`${id}`"
     class="u-checkbox text-caption-lg"
     :name="name"
     v-model="isChecked"
@@ -48,6 +54,8 @@ onMounted(() => {
     size="md"
     keep-color
     color="primary"
+    :toggle-indeterminate="indeterminate"
+    v-bind="$attrs"
   />
 </template>
 
@@ -56,12 +64,21 @@ onMounted(() => {
   color: $primary
   font-weight: 500
 
-  &.q-checkbox__inner
+  .q-checkbox__inner
     display: flex
     justify-content: center
     align-items: center
+    height: $ms
+    width: $ms
+
+  .q-checkbox__inner:before
+    top: -9px !important
+    left: -2px !important
+    width: 2.7rem
+    height: 2.7rem
+    border-radius: 10rem !important
 
-  &.q-checkbox__bg
+  .q-checkbox__bg
     border: 0.125rem solid $primary
     border-radius: $xxs
     height: $ms
@@ -71,7 +88,7 @@ onMounted(() => {
     justify-content: center
     align-items: center
 
-  &.q-checkbox__svg
+  .q-checkbox__svg
     position: static
     height: 1rem !important
     width: 1rem !important

package/{src → dist/component-library}/components/core/UChip.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
 
 const props = defineProps({
   chipLabel: {
@@ -16,15 +17,13 @@ const props = defineProps({
   },
   avatarLabel: {
     type: String,
-    default: 'NA',
+    default: '',
   },
   icon: {
     type: String,
-    default: 'NA',
   },
   iconClass: {
     type: String,
-    default: 'NA',
   },
   type: {
     type: String,
@@ -34,6 +33,21 @@ const props = defineProps({
     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'])
@@ -64,7 +78,7 @@ const avatarLabel = computed(() => {
     :class="type"
     :modelValue="modelValue"
     :dense="dense"
-    @remove="() => $emit('update:modelValue', false)"
+    @remove="remove"
     :removable="removable"
     :aria-label="chipLabel"
     @click="handleClick"
@@ -78,6 +92,12 @@ const avatarLabel = computed(() => {
     <span :class="`chip-label text-overline-${size} text-uppercase`">
       {{ chipLabel }}
     </span>
+    <UTooltip
+      v-if="isShowTooltip"
+      :description="chipLabel"
+      :offset="offset"
+      :anchor="anchor"
+    />
   </q-chip>
 </template>
 
@@ -222,4 +242,10 @@ const avatarLabel = computed(() => {
 
     .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>