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

package/README.md

@@ -6,8 +6,11 @@ This library provides custom UI components for USSSA applications.
 
 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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.41",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",
-  "main": "index.js",
+  "main": "src/components/index.js",
   "files": [
-    "dist/spa",
+    "src",
     "README.md"
   ],
   "publishConfig": {
@@ -27,7 +27,9 @@
     "url": "git+https://github.com/usssa-org/component-library.git"
   },
   "dependencies": {
+    "@fawmi/vue-google-maps": "^0.9.79",
     "@quasar/extras": "^1.16.4",
+    "flag-icons": "^7.2.3",
     "quasar": "^2.16.0",
     "vue": "^3.4.18",
     "vue-router": "^4.0.12"
@@ -41,7 +43,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.14",
     "prettier": "^2.5.1",
-    "semantic-release": "^24.0.0",
+    "semantic-release": "^24.1.0",
     "vite-plugin-checker": "^0.6.4"
   },
   "engines": {

package/src/App.vue

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

package/src/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/src/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/components/ComponentLink.vue

@@ -0,0 +1,26 @@
+<template>
+  <q-item clickable :to="path">
+    <q-item-section class="bg-neutral-4">
+      <q-item-label class="q-pa-sm">{{ title }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ComponentLink',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+
+    path: {
+      type: String,
+      default: '/',
+    },
+  },
+})
+</script>

package/src/components/core/UAvatar.vue

@@ -0,0 +1,161 @@
+<script setup>
+import { computed } from 'vue'
+import UBadgeStd from './UBadgeStd.vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  icon: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'xl',
+  },
+  image: {
+    type: String,
+  },
+  indicatorColor: {
+    type: String,
+    default: 'neutral-4',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  showIndicator: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+
+const labelSize = computed(() => {
+  if (props.size === 'sm') {
+    return 'xs'
+  }
+  if (props.size === 'md') {
+    return 'sm'
+  }
+  if (props.size === 'lg') {
+    return 'md'
+  }
+  if (props.size === 'xl') {
+    return 'lg'
+  }
+
+  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"
+    :round="round"
+    :rounded="!round"
+    :icon="icon"
+    v-bind="$attrs"
+  >
+    <img v-if="image" :src="image" :alt="`avatar ${name}`" :aria-label="name" />
+    <span
+      v-if="!image"
+      class="name"
+      :class="`text-${color} text-caption-${labelSize}`"
+    >
+      {{ initials }}
+    </span>
+    <UBadgeStd
+      v-if="showIndicator"
+      :color="indicatorColor"
+      :class="`indicator`"
+      size="xs"
+      type="indicator"
+    />
+    <slot name="item" />
+  </q-avatar>
+</template>
+<style lang="sass">
+.u-avatar
+  position: relative
+  background: $blue-1
+
+  &.rounded-borders
+    border-radius: $xxs
+
+  &.size-lg.rounded-borders,&.size-xl.rounded-borders
+    border-radius: $xs
+
+  &.size-sm
+    width: $ba
+    height: $ba
+
+    .indicator
+      width: $xs
+      height: $xs
+
+    .q-avatar__content .name
+      line-height: $xs !important
+
+  &.size-md
+    width: $ms
+    height: $ms
+
+    .indicator
+      width: $xs
+      height: $xs
+
+  &.size-lg
+    width: $md
+    height: $md
+
+    .indicator
+      width: $sm
+      height: $sm
+
+  &.size-xl
+    width: $lg
+    height: $lg
+
+    .indicator
+      width: $ba
+      height: $ba
+
+  .indicator
+    position: absolute
+    bottom: 0
+    right: 0
+    width: $sm
+    height: $sm
+    border: 1.5px solid $neutral-1
+    background: $neutral-4
+</style>

package/src/components/core/UAvatarGroup.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
+import UAvatar from './UAvatar.vue'
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  icon: {
+    type: String,
+  },
+  size: {
+    type: String,
+  },
+  image: {
+    type: String,
+  },
+  images: {
+    type: Array,
+  },
+  indicatorColor: {
+    type: String,
+    default: 'neutral-4',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  showIndicator: {
+    type: Boolean,
+    default: false,
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+  avatarLimit: {
+    type: Number,
+    default: 4,
+  },
+})
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+
+const displayedAvatars = computed(() => {
+  return props.images.slice(0, props.avatarLimit)
+})
+const remainingAvatars = computed(() => {
+  return props.images.slice(props.avatarLimit)
+})
+</script>
+
+<template>
+  <UAvatar
+    v-for="(avatar, index) in displayedAvatars"
+    class="avatarGroup"
+    :name="avatar.name"
+    :size="size"
+    :showIndicator="showIndicator"
+    :indicatorColor="indicatorColor"
+    :round="round"
+    :image="avatar.image"
+    :key="index"
+    @click="handleClick"
+  />
+
+  <q-icon
+    :class="`avatarGroup additonalUsersAvatar size-${size} fa-duotone fa-solid fa-circle-plus`"
+    color="primary"
+    aria-label="See more Avatar"
+    v-if="remainingAvatars.length"
+  >
+    <UTooltip
+      anchor="bottom middle"
+      description=""
+      self="top middle"
+      :offset="[4, 4]"
+    >
+      <template v-slot:item>
+        <div class="text-body-xs tooltip-text">
+          <span v-for="(avatar, index) in remainingAvatars" :key="index">
+            {{ avatar.name }}<br />
+          </span>
+        </div>
+      </template>
+    </UTooltip>
+  </q-icon>
+</template>
+<style lang="sass">
+.additonalUsersAvatar:after
+  background-color: $blue-1
+  border-radius:50%
+
+.additonalUsersAvatar
+  cursor: pointer
+
+  &.size-sm
+    font-size: $ba !important
+
+  &.size-md
+    font-size: $ms !important
+
+  &.size-lg
+    font-size: $md !important
+
+  &.size-xl
+    font-size: $lg !important
+
+.avatarGroup
+  margin: -0.125rem
+.avatarGroup:not(:nth-child(1)) .q-avatar__content
+    border: 1.5px solid $neutral-1
+    background : lightgray 0px -0.033px / 100% 150.273% no-repeat
+</style>

package/src/components/core/UBadgeStd.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['xxs', 'xs', 'sm', 'md', 'lg'].includes(val),
+  },
+  type: {
+    type: String,
+    default: 'basic',
+    validator: (val) => ['basic', 'indicator'].includes(val),
+  },
+})
+
+const currentColor = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-6'
+  }
+  return props.color
+})
+</script>
+
+<template>
+  <q-badge
+    class="u-badge"
+    :class="[
+      type === 'basic' ? 'type-basic' : 'type-indicator justify-center',
+      `size-${size}`,
+      type === 'basic'
+        ? size === 'md'
+          ? `text-overline-xs`
+          : `text-overline-sm`
+        : '',
+    ]"
+    :color="currentColor"
+    rounded
+    tabindex="0"
+    :aria-label="label"
+  >
+    <div v-if="type === 'basic'">
+      {{ label }}
+    </div>
+    <slot name="default" />
+  </q-badge>
+</template>
+
+<style lang="sass">
+.u-badge
+  min-height:0px
+
+  &.size-xxs
+    width: $xs
+    height: $xs
+    padding: 0px
+
+  &.size-xs
+    width: $sm
+    height: $sm
+    padding: 0px
+
+  &.size-sm
+    width: $ba
+    height: $ba
+    padding: 0px
+
+  &.size-md
+    letter-spacing: 0.24px
+    line-height: 1.013rem
+
+  &.size-lg
+    width: $md
+    height: $ms
+    justify-content: center
+    line-height: 0
+
+  &.type-basic
+    border: 1.5px solid $neutral-1
+
+  &.type-indicator
+    border: 1px solid $neutral-1
+</style>

package/src/components/core/UBannerStd.vue

@@ -0,0 +1,115 @@
+<script setup>
+import UBtnStd from './UBtnStd.vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'info',
+  },
+  icon: {
+    type: String,
+    default: 'fa-kit-duotone fa-circle-info',
+  },
+  message: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  show: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  primaryActionLabel: {
+    type: String,
+  },
+  secondaryActionLabel: {
+    type: String,
+  },
+})
+
+const emit = defineEmits(['primaryAction', 'secondaryAction'])
+
+const handlePrimaryActionClick = () => {
+  emit('primaryAction')
+}
+
+const handleSecondaryActionClick = () => {
+  emit('secondaryAction')
+}
+</script>
+
+<template>
+  <q-banner
+    v-if="show && message"
+    inline-actions
+    :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"
+        :color="type"
+        alt="Banner Info Icon"
+      />
+    </template>
+    <span class="text-caption-lg">{{ message }}</span>
+    <template v-slot:action>
+      <u-btn-std
+        v-if="primaryActionLabel"
+        :flat="false"
+        :label="primaryActionLabel"
+        @onClick="handlePrimaryActionClick"
+        :color="type"
+        size="md"
+      />
+      <u-btn-std
+        class="q-ml-sm"
+        :outline="true"
+        v-if="secondaryActionLabel"
+        :label="secondaryActionLabel"
+        @onClick="handleSecondaryActionClick"
+        :color="type"
+        size="md"
+      />
+    </template>
+  </q-banner>
+</template>
+
+<style lang="sass">
+.u-banner
+  min-width: 24.563rem
+  padding: $sm
+  .q-banner__avatar
+    align-self: center
+
+  .q-banner__content
+    padding-left: $xs !important
+
+.u-banner-positive
+  background: $green-1 !important
+  color: $green-7 !important
+
+.u-banner-info
+  background: $purple-1 !important
+  color: $info !important
+
+.u-banner-warning
+  background: $orange-1 !important
+  color: $orange-7 !important
+
+.u-banner-accent
+  background: $red-1 !important
+  color: $red-7 !important
+
+.u-banner-primary
+  background: $blue-1 !important
+  color: $primary !important
+
+.no-padding-label
+  .q-banner__content
+    padding-left: 0px !important
+</style>

package/src/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>