@usssa/component-library 1.0.0-alpha.21 → 1.0.0-alpha.211

package/README.md

@@ -1,13 +1,16 @@
-# Component Library v1.0.0-alpha.21
+# Component Library v1.0.0-alpha.211
 
-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
 
@@ -22,11 +25,11 @@ yarn dev
 
 ## Usage in other local projects
 
-1. Clone the component-library repo and install dependencies
+1. Clone the component-library repo and install dependencies.
 2. In component-library directory run `yarn link`
 3. In Nuxt or Quasar project directory run `yarn link @usssa/component-library`
 
 When done:
 
-1. In Nuxt or Quasar project directory run `yarn unlink @usssa/component-library`
+1. In Nuxt or Quasar project directory run to unlink `yarn unlink @usssa/component-library`
 2. In component-library directory run `yarn unlink`

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.211",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
-  "author": "Troy Moreland <troy.moreland@usssa.com>",
+  "author": "Engineering Team <engineering@usssa.com>",
   "main": "src/components/index.js",
   "files": [
-    "src",
-    "README.md"
+    "src/assets",
+    "src/composables",
+    "src/components",
+    "src/css",
+    "src/utils",
+    "README.md",
+    "package.json"
   ],
   "publishConfig": {
     "access": "public"
@@ -20,10 +25,19 @@
     "deploy": "firebase deploy",
     "dev": "quasar dev",
     "build": "quasar build",
-    "start": "node --experimental-detect-module index.js"
+    "start": "node --experimental-detect-module index.js",
+    "test:component:ci": "cypress run --component",
+    "test:component": "cypress open --component"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/usssa-org/component-library.git"
   },
   "dependencies": {
+    "@fawmi/vue-google-maps": "^0.9.79",
     "@quasar/extras": "^1.16.4",
+    "@usssa/core-client": "^0.0.19",
+    "algoliasearch": "4",
     "flag-icons": "^7.2.3",
     "quasar": "^2.16.0",
     "vue": "^3.4.18",
@@ -31,7 +45,10 @@
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.0",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^6.1.0",
     "autoprefixer": "^10.4.2",
+    "cypress": "^13.17.0",
+    "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-vue": "^9.0.0",
@@ -39,6 +56,7 @@
     "postcss": "^8.4.14",
     "prettier": "^2.5.1",
     "semantic-release": "^24.1.0",
+    "vite-plugin-alias": "^0.1.1",
     "vite-plugin-checker": "^0.6.4"
   },
   "engines": {
@@ -50,5 +68,6 @@
   "bugs": {
     "url": "https://github.com/usssa-org/component-library/issues"
   },
-  "license": "ISC"
+  "license": "ISC",
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/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/src/assets/no-result.svg

@@ -0,0 +1,25 @@
+<svg width="125" height="124" viewBox="0 0 125 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11793_42180)">
+<path d="M62.5 124C96.7417 124 124.5 96.2417 124.5 62C124.5 27.7583 96.7417 0 62.5 0C28.2583 0 0.5 27.7583 0.5 62C0.5 96.2417 28.2583 124 62.5 124Z" fill="#12316C"/>
+<mask id="mask0_11793_42180" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="125" height="124">
+<path d="M62.5 124C96.7417 124 124.5 96.2417 124.5 62C124.5 27.7583 96.7417 0 62.5 0C28.2583 0 0.5 27.7583 0.5 62C0.5 96.2417 28.2583 124 62.5 124Z" fill="#1048BD"/>
+</mask>
+<g mask="url(#mask0_11793_42180)">
+<path d="M-41.5147 19.8398C-78.3898 19.8398 -119.384 46.858 -133.078 80.1865C-146.773 113.515 -127.981 140.533 -91.1059 140.533H68.2098C78.0276 116.747 60.037 90.8359 33.7036 90.8359H-20.6698V126.334L-45.3014 105.035L-86.2352 126.334L-61.0733 90.8359L-86.3264 69.5371H-45.9396L-20.6745 34.0391V69.5371H42.4827C75.6912 69.5371 105.554 49.8552 117.887 19.8398H-41.5147Z" fill="#1048BD"/>
+<rect x="21.9932" y="30.5864" width="80.1867" height="107.467" rx="8" fill="white"/>
+<rect x="30.2598" y="89.2798" width="63.6533" height="23" rx="3" fill="#B9E0FF"/>
+<ellipse cx="39.7664" cy="100.78" rx="4.54667" ry="5.5" fill="white"/>
+<rect x="47.6196" y="98.2798" width="26.4533" height="3" rx="1.5" fill="white"/>
+<rect x="47.6196" y="102.28" width="9.92" height="2" rx="1" fill="white"/>
+<rect x="30.2598" y="115.28" width="63.6533" height="23" rx="3" fill="#B9E0FF"/>
+<ellipse cx="39.7664" cy="126.78" rx="4.54667" ry="5.5" fill="white"/>
+</g>
+<circle opacity="0.2" cx="62.5003" cy="62.0003" r="19.2889" fill="#CB2A3D"/>
+<path d="M69.8603 56.3566C70.3343 55.8826 70.3343 55.1141 69.8603 54.6401C69.3863 54.1662 68.6179 54.1662 68.1439 54.6401L62.5002 60.2838L56.8566 54.6401C56.3826 54.1662 55.6141 54.1662 55.1401 54.6401C54.6662 55.1141 54.6662 55.8826 55.1401 56.3566L60.7838 62.0002L55.1401 67.6439C54.6662 68.1179 54.6662 68.8863 55.1401 69.3603C55.6141 69.8343 56.3826 69.8343 56.8566 69.3603L62.5002 63.7166L68.1439 69.3603C68.6179 69.8343 69.3863 69.8343 69.8603 69.3603C70.3343 68.8863 70.3343 68.1179 69.8603 67.6439L64.2166 62.0002L69.8603 56.3566Z" fill="#CB2A3D"/>
+</g>
+<defs>
+<clipPath id="clip0_11793_42180">
+<rect width="124" height="124" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/upload-illustration.svg

@@ -0,0 +1,48 @@
+<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4523_215)">
+<path d="M75 150C116.421 150 150 116.421 150 75C150 33.5786 116.421 0 75 0C33.5786 0 0 33.5786 0 75C0 116.421 33.5786 150 75 150Z" fill="#12316C"/>
+<mask id="mask0_4523_215" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="150" height="150">
+<path d="M75 150C116.421 150 150 116.421 150 75C150 33.5786 116.421 0 75 0C33.5786 0 0 33.5786 0 75C0 116.421 33.5786 150 75 150Z" fill="#0C5DF3"/>
+</mask>
+<g mask="url(#mask0_4523_215)">
+<path d="M-50.8244 24C-95.4313 24 -145.021 56.6832 -161.587 97C-178.152 137.317 -155.421 170 -110.814 170H81.9069C93.7832 141.226 72.0204 109.882 40.1655 109.882H-25.6088V152.824L-55.4051 127.059L-104.922 152.824L-74.4839 109.882L-105.032 84.1177H-56.177L-25.6144 41.1765V84.1177H50.7853C90.9569 84.1177 127.081 60.3089 142 24H-50.8244Z" fill="#1048BD"/>
+<rect x="55.5648" y="44.3368" width="89.4842" height="119.927" rx="8" transform="rotate(15 55.5648 44.3368)" fill="white"/>
+</g>
+<rect x="61.6106" y="57.4174" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 61.6106 57.4174)" fill="#B9E0FF"/>
+<rect x="55.8801" y="78.8034" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 55.8801 78.8034)" fill="#B9E0FF"/>
+<rect x="50.1498" y="100.189" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 50.1498 100.189)" fill="#52B3FF"/>
+<rect x="44.4194" y="121.575" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 44.4194 121.575)" fill="#B9E0FF"/>
+<rect x="38.6891" y="142.961" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 38.6891 142.961)" fill="#B9E0FF"/>
+<rect x="58.7454" y="68.1104" width="59.9637" height="5.53511" rx="2.76755" transform="rotate(15 58.7454 68.1104)" fill="#52B3FF"/>
+<rect x="53.015" y="89.4965" width="63.6537" height="5.53511" rx="2.76755" transform="rotate(15 53.015 89.4965)" fill="#B9E0FF"/>
+<rect x="47.2847" y="110.882" width="67.3438" height="5.53511" rx="2.76755" transform="rotate(15 47.2847 110.882)" fill="#B9E0FF"/>
+<rect x="41.5542" y="132.268" width="28.5981" height="5.53511" rx="2.76755" transform="rotate(15 41.5542 132.268)" fill="#52B3FF"/>
+<g filter="url(#filter0_d_4523_215)">
+<rect x="9" y="56.7385" width="89.4842" height="119.927" rx="8" transform="rotate(-15 9 56.7385)" fill="white"/>
+</g>
+<rect x="20.776" y="65.0439" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 20.776 65.0439)" fill="#B9E0FF"/>
+<rect x="26.5063" y="86.4299" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 26.5063 86.4299)" fill="#B9E0FF"/>
+<rect x="32.2367" y="107.816" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 32.2367 107.816)" fill="#52B3FF"/>
+<rect x="37.967" y="129.202" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 37.967 129.202)" fill="#B9E0FF"/>
+<rect x="43.6975" y="150.588" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 43.6975 150.588)" fill="#B9E0FF"/>
+<rect x="23.6411" y="75.7369" width="59.9637" height="5.53511" rx="2.76755" transform="rotate(-15 23.6411 75.7369)" fill="#52B3FF"/>
+<rect x="29.3716" y="97.1229" width="63.6537" height="5.53511" rx="2.76755" transform="rotate(-15 29.3716 97.1229)" fill="#B9E0FF"/>
+<rect x="35.1019" y="118.509" width="67.3438" height="5.53511" rx="2.76755" transform="rotate(-15 35.1019 118.509)" fill="#B9E0FF"/>
+<rect x="40.8323" y="139.895" width="28.5981" height="5.53511" rx="2.76755" transform="rotate(-15 40.8323 139.895)" fill="#52B3FF"/>
+</g>
+<defs>
+<filter id="filter0_d_4523_215" x="2.79602" y="27.3742" width="129.883" height="151.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0666667 0 0 0 0 0.0784314 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4523_215"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4523_215" result="shape"/>
+</filter>
+<clipPath id="clip0_4523_215">
+<rect width="150" height="150" rx="75" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/core/UAccordionSelect.vue

@@ -0,0 +1,237 @@
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onItemClick'])
+
+const props = defineProps({
+  data: { type: Array, default: () => [] },
+  dataTestId: {
+    type: String,
+    default: 'accordion-select',
+  },
+  multiple: { type: Boolean, default: false },
+  title: { type: String, default: 'Select Division' },
+})
+
+const activeLineStyles = ref({})
+const selectedRows = ref({})
+const showTooltipFor = ref({})
+
+//Tooltip handling
+const checkEllipsis = (sectionIndex, rowIndex, el) => {
+  if (!el) return
+  setTimeout(() => {
+    const isEllipsed = el.scrollWidth > el.clientWidth
+    if (!showTooltipFor.value[sectionIndex]) {
+      showTooltipFor.value[sectionIndex] = {}
+    }
+    showTooltipFor.value[sectionIndex][rowIndex] = isEllipsed
+  }, 50)
+}
+
+//Selection handling
+const isSelected = (sectionIndex, rowIndex) =>
+  selectedRows.value[sectionIndex]?.includes(rowIndex)
+
+const selectItem = (sectionIndex, rowIndex, item) => {
+  if (item.disabled) return
+
+  let isSelected = false
+  if (props.multiple) {
+    if (!selectedRows.value[sectionIndex]) {
+      selectedRows.value[sectionIndex] = []
+    }
+    const idx = selectedRows.value[sectionIndex].indexOf(rowIndex)
+    if (idx > -1) {
+      selectedRows.value[sectionIndex].splice(idx, 1)
+      isSelected = false
+    } else {
+      selectedRows.value[sectionIndex].push(rowIndex)
+      isSelected = true
+    }
+
+    selectedRows.value[sectionIndex].sort((a, b) => a - b)
+    updateActiveLine(sectionIndex)
+  } else {
+    const alreadySelected =
+      selectedRows.value[sectionIndex]?.[0] === rowIndex &&
+      Object.keys(selectedRows.value).length === 1
+
+    if (alreadySelected) {
+      selectedRows.value = {}
+      activeLineStyles.value = {}
+      isSelected = false
+    } else {
+      selectedRows.value = { [sectionIndex]: [rowIndex] }
+      activeLineStyles.value = {}
+      updateActiveLine(sectionIndex)
+      isSelected = true
+    }
+  }
+
+  emit('onItemClick', { sectionIndex, item, selected: isSelected })
+}
+
+//Active line handling
+const updateActiveLine = (sectionIndex) => {
+  nextTick(() => {
+    const container = document.querySelector(`[data-section="${sectionIndex}"]`)
+    const allRows = [...(container?.querySelectorAll('.row-item') || [])]
+
+    const selectedIndexes = selectedRows.value[sectionIndex] || []
+    const groups = []
+    let currentGroup = []
+
+    selectedIndexes.forEach((idx, i) => {
+      if (i === 0 || idx === selectedIndexes[i - 1] + 1) {
+        currentGroup.push(idx)
+      } else {
+        groups.push(currentGroup)
+        currentGroup = [idx]
+      }
+    })
+    if (currentGroup.length) groups.push(currentGroup)
+
+    activeLineStyles.value[sectionIndex] = groups.map((group) => {
+      const firstEl = allRows[group[0]]
+      const lastEl = allRows[group[group.length - 1]]
+      const top = firstEl.offsetTop
+      const height = lastEl.offsetTop + lastEl.offsetHeight - top
+      return { top: `${top}px`, height: `${height}px` }
+    })
+  })
+}
+
+//Reset when switching to single select
+watch(
+  () => props.multiple,
+  (value) => {
+    if (!value) {
+      selectedRows.value = {}
+      activeLineStyles.value = {}
+      showTooltipFor.value = {}
+    }
+  }
+)
+</script>
+
+<template>
+  <div class="u-accordion-select" :dataTestId="dataTestId">
+    <div class="q-pa-xs">
+      <span class="text-heading-xxs text-dark" tabindex="0">{{ title }}</span>
+    </div>
+
+    <q-expansion-item
+      v-bind="$attrs"
+      v-for="(item, sectionIndex) in data"
+      header-class="q-px-xxs accordion-header text-caption-md"
+      :caption="item.caption"
+      dataTestId="division-item"
+      :disable="item.disabled"
+      :key="sectionIndex"
+      :label="item.title"
+      switch-toggle-side
+    >
+      <div class="content-with-line q-mx-sm" :data-section="sectionIndex">
+        <template
+          v-for="styleObj in activeLineStyles[sectionIndex] || []"
+          :key="styleObj.index"
+        >
+          <div class="active-line" :style="styleObj" />
+        </template>
+
+        <div
+          v-for="(row, rowIndex) in item?.children"
+          :class="[
+            'row-item q-py-xs',
+            row.disabled ? 'disabled' : '',
+            isSelected(sectionIndex, rowIndex) ? 'active' : '',
+          ]"
+          dataTestId="division-child"
+          :key="rowIndex"
+          role="option"
+          :tabindex="row.disabled ? -1 : 0"
+          @click="selectItem(sectionIndex, rowIndex, row)"
+          @keydown.enter.prevent="selectItem(sectionIndex, rowIndex, row)"
+        >
+          <span
+            class="text-body-sm row-text ellipsis"
+            dataTestId="child-item"
+            :ref="(el) => checkEllipsis(sectionIndex, rowIndex, el)"
+          >
+            {{ row.title }}
+            <UTooltip
+              v-if="showTooltipFor[sectionIndex]?.[rowIndex] && row?.title"
+              :description="row?.title"
+            />
+          </span>
+        </div>
+      </div>
+    </q-expansion-item>
+  </div>
+</template>
+
+<style lang="sass">
+.u-accordion-select
+  border: 1.5px solid $neutral-4
+  border-radius: $xs
+  padding: $xxs
+
+  .accordion-header
+    .q-item__section--avatar
+      min-width: 0px
+    .q-item__section--side
+      padding-right: $xxs
+    border-radius: $xxs
+    .q-item__label
+      word-break: break-word
+
+  .q-expansion-item__toggle-icon
+    font-size: $ba
+  .q-expansion-item--expanded .q-expansion-item__toggle-icon
+    line-height: 4.5
+
+  .content-with-line
+    position: relative
+    padding-left: $sm
+
+    &::before
+      content: ''
+      position: absolute
+      top: 0
+      bottom: 2px
+      left: 0
+      width: 2px
+      background-color: $neutral-4
+
+    .active-line
+      position: absolute
+      left: 0
+      width: 2px
+      background-color: $primary
+      z-index: 1
+      border-radius: $xs
+
+  .row-text
+    flex: 1 1 auto
+    word-wrap: break-word
+    min-width: 0px
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis
+
+  .row-item
+    border: 0px
+    cursor: pointer
+    position: relative
+    display: flex
+    align-items: center
+    &:hover:not(.disabled)
+      .row-text
+        color: $primary
+    .row-item.disabled
+      opacity: 0.5
+      cursor: not-allowed
+      pointer-events: none
+</style>

package/src/components/core/UAvatar.vue

@@ -1,47 +1,71 @@
 <script setup>
 import { computed } from 'vue'
 import UBadgeStd from './UBadgeStd.vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onClick'])
 const props = defineProps({
+  bgColor: {
+    type: String,
+  },
   color: {
     type: String,
     default: 'primary',
   },
-  icon: {
+  dataTestId: {
     type: String,
+    default: 'avatar',
   },
-  size: {
+  icon: {
     type: String,
-    default: 'xl',
   },
   image: {
     type: String,
   },
   indicatorColor: {
-    type: String,
+    type: [Function, String, Object],
     default: 'neutral-4',
   },
+  indicatorIcon: {
+    type: [Function, String, Object],
+    default: '',
+  },
   name: {
     type: String,
     required: true,
   },
+  round: {
+    type: Boolean,
+    default: true,
+  },
   showIndicator: {
     type: Boolean,
     default: false,
   },
-  icon: {
-    type: String,
-  },
-  round: {
+  showTooltip: {
     type: Boolean,
-    default: true,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'xl',
   },
 })
 
-const emit = defineEmits(['onClick'])
+// computed
+const initials = computed(() => {
+  if (props.name) {
+    const name = props.name.replace(/\s+/g, ' ')
+    const parts = name.split(' ')
 
-const handleClick = () => {
-  return emit('onClick')
-}
+    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
+})
 
 const labelSize = computed(() => {
   if (props.size === 'sm') {
@@ -59,33 +83,49 @@ const labelSize = computed(() => {
 
   return props.size
 })
+
+// custom functions
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
   <q-avatar
-    class="u-avatar"
-    :class="`size-${size}`"
-    @click="handleClick"
+    v-bind="$attrs"
+    :class="`u-avatar size-${size}`"
+    :aria-label="name"
+    :color="bgColor"
+    :dataTestId="dataTestId"
+    :icon="icon"
     :round="round"
     :rounded="!round"
-    :icon="icon"
-    v-bind="$attrs"
+    @click="handleClick"
   >
-    <img v-if="image" :src="image" :alt="`avatar ${name}`" :aria-label="name" />
-    <span
-      v-if="!image"
-      class="name"
-      :class="`text-${color} text-caption-${labelSize}`"
+    <UTooltip
+      v-if="showTooltip"
+      anchor="bottom middle"
+      :description="name"
+      :offset="[4, 4]"
+      self="top middle"
     >
-      {{ name }}
+    </UTooltip>
+    <img v-if="image" :alt="`avatar ${name}`" :aria-label="name" :src="image" />
+    <span v-if="!image" :class="`name text-${color} text-caption-${labelSize}`">
+      {{ initials }}
     </span>
     <UBadgeStd
-      v-if="showIndicator"
-      :color="indicatorColor"
+      v-if="!indicatorIcon && showIndicator && indicatorColor"
       :class="`indicator`"
+      :color="indicatorColor"
       size="xs"
+      tabindex="-1"
       type="indicator"
     />
+    <div v-if="showIndicator && indicatorIcon" class="indicator-icon">
+      <q-icon :class="`${indicatorIcon}`" :color="indicatorColor" />
+    </div>
+
     <slot name="item" />
   </q-avatar>
 </template>
@@ -108,6 +148,9 @@ const labelSize = computed(() => {
       width: $xs
       height: $xs
 
+    .q-icon
+      font-size: $xs
+
     .q-avatar__content .name
       line-height: $xs !important
 
@@ -119,6 +162,9 @@ const labelSize = computed(() => {
       width: $xs
       height: $xs
 
+    .q-icon
+      font-size: $sm
+
   &.size-lg
     width: $md
     height: $md
@@ -127,6 +173,9 @@ const labelSize = computed(() => {
       width: $sm
       height: $sm
 
+    .q-icon
+      font-size: $sm
+
   &.size-xl
     width: $lg
     height: $lg
@@ -135,6 +184,21 @@ const labelSize = computed(() => {
       width: $ba
       height: $ba
 
+    .q-icon
+      font-size: $ba
+
+  .indicator-icon
+    position: absolute
+    bottom: -$xxs
+    right: -$xxs
+    width: $sm
+    height: $sm
+    border-radius: 50%
+    background: $neutral-1
+    display: flex
+    justify-content: center
+    align-items: center
+
   .indicator
     position: absolute
     bottom: 0