From 6902969a09864ee250cf0e1f326b2ca53cb1cfa1 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Thu, 19 Feb 2026 15:42:34 +0530 Subject: [PATCH] chore: Remove `vue-multiselect` package and styles from codebase (#13585) --- app/javascript/dashboard/App.vue | 6 - .../dashboard/assets/scss/_base.scss | 15 +- .../dashboard/assets/scss/_woot.scss | 1 - .../assets/scss/plugins/_multiselect.scss | 273 ------------------ .../dashboard/conversation/ContactPanel.vue | 12 - .../conversation/ConversationAction.vue | 6 +- .../reports/components/ReportsWrapper.vue | 78 +---- app/javascript/entrypoints/dashboard.js | 2 - package.json | 1 - pnpm-lock.yaml | 9 - 10 files changed, 7 insertions(+), 396 deletions(-) delete mode 100644 app/javascript/dashboard/assets/scss/plugins/_multiselect.scss diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue index 61d7631e7..8912c03d1 100644 --- a/app/javascript/dashboard/App.vue +++ b/app/javascript/dashboard/App.vue @@ -164,10 +164,4 @@ export default { .v-popper--theme-tooltip .v-popper__arrow-container { display: none; } - -.multiselect__input { - margin-bottom: 0px !important; -} - - diff --git a/app/javascript/dashboard/assets/scss/_base.scss b/app/javascript/dashboard/assets/scss/_base.scss index d3d3f6726..84c8a4b0f 100644 --- a/app/javascript/dashboard/assets/scss/_base.scss +++ b/app/javascript/dashboard/assets/scss/_base.scss @@ -78,7 +78,7 @@ textarea { } } -$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.multiselect__input):not(.no-margin)"; +$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.no-margin)"; #{$form-input-selector} { @apply field-base h-10; @@ -92,7 +92,7 @@ $form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not } } -input[type='file']:not(.multiselect__input) { +input[type='file'] { @apply leading-[1.15] mb-4 border-0 bg-transparent text-sm; } @@ -126,13 +126,6 @@ label:has(.help-text) { } } -// Error handling -.has-multi-select-error { - div.multiselect { - @apply mb-1; - } -} - // FormKit support .formkit-outer[data-invalid='true'] { #{$form-input-selector}, @@ -150,9 +143,7 @@ label:has(.help-text) { #{$form-input-selector}, input:not([type]), textarea, - select, - .multiselect > .multiselect__tags, - .multiselect:not(.no-margin) { + select { @apply field-error; } diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss index 81a4569b5..27764d150 100644 --- a/app/javascript/dashboard/assets/scss/_woot.scss +++ b/app/javascript/dashboard/assets/scss/_woot.scss @@ -13,7 +13,6 @@ @import 'base'; // Plugins -@import 'plugins/multiselect'; @import 'plugins/date-picker'; html, diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss deleted file mode 100644 index 9567d66c3..000000000 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ /dev/null @@ -1,273 +0,0 @@ -@mixin label-multiselect-hover { - &::after { - @apply text-n-brand; - } - - &:hover { - @apply bg-n-slate-3; - - &::after { - @apply text-n-blue-11; - } - } -} - -.multiselect { - &:not(.no-margin) { - @apply mb-4; - } - - &.invalid .multiselect__tags { - @apply border-0 outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8; - } - - &.multiselect--disabled { - @apply opacity-50 rounded-lg cursor-not-allowed pointer-events-auto; - - .multiselect__select { - @apply cursor-not-allowed bg-transparent rounded-lg; - } - } - - .multiselect--active { - > .multiselect__tags { - @apply outline-n-blue-border; - } - } - - .multiselect__select { - @apply min-h-[2.875rem] p-0 right-0 top-0; - - &::before { - @apply right-0; - } - } - - .multiselect__content-wrapper { - @apply bg-n-alpha-black2 text-n-slate-12 backdrop-blur-[100px] border-0 border-none outline outline-1 outline-n-weak rounded-b-lg; - } - - .multiselect__content { - @apply max-w-full; - - .multiselect__option { - @apply text-sm font-normal flex justify-between items-center; - - span { - @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap w-fit; - } - - p { - @apply mb-0; - } - - &::after { - @apply bottom-0 flex items-center justify-center text-center relative px-1 leading-tight; - } - - &.multiselect__option--highlight { - @apply bg-n-alpha-black2 text-n-slate-12; - } - - &.multiselect__option--highlight:hover { - @apply bg-n-brand/10 text-n-slate-12; - - &::after { - @apply bg-transparent text-center text-n-slate-12; - } - } - - &.multiselect__option--highlight::after { - @apply bg-transparent text-n-slate-12; - } - - &.multiselect__option--selected { - @apply bg-n-brand/20 text-n-slate-12; - - &::after { - @apply bg-transparent; - } - - &.multiselect__option--highlight:hover { - @apply bg-transparent; - - &::after:hover { - @apply text-n-slate-12 bg-transparent; - } - } - } - } - } - - .multiselect__tags { - @apply bg-n-alpha-black2 border-0 grid items-center w-full border-none outline-1 outline outline-n-weak hover:outline-n-slate-6 m-0 min-h-[2.875rem] rounded-lg pt-0; - - input { - @apply border-0 border-none bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-10; - } - } - - .multiselect__spinner { - background-color: transparent; - } - - .multiselect__tags-wrap { - @apply inline-block leading-none mt-1; - } - - .multiselect__placeholder { - @apply text-n-slate-10 font-normal pt-3; - } - - .multiselect__tag { - @apply bg-n-alpha-white mt-1 text-n-slate-12 pr-6 pl-2.5 py-1.5; - } - - .multiselect__tag-icon { - @include label-multiselect-hover; - } - - .multiselect__input { - @apply text-sm h-[2.875rem] mb-0 p-0 shadow-none border-transparent hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none active:border-transparent active:shadow-none; - } - - .multiselect__single { - @apply bg-transparent text-n-slate-12 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis; - } -} - -.sidebar-labels-wrap { - &.has-edited, - &:hover { - .multiselect { - @apply cursor-pointer; - } - } - - .multiselect { - > .multiselect__select { - @apply invisible; - } - - > .multiselect__tags { - @apply outline-transparent; - } - - &.multiselect--active > .multiselect__tags { - @apply outline-n-blue-border; - } - } -} - -.multiselect-wrap--small { - // To be removed one SLA reports date picker is created - &.tiny { - .multiselect.no-margin { - @apply min-h-[32px]; - } - - .multiselect__select { - @apply min-h-[32px] h-8; - - &::before { - @apply top-[60%]; - } - } - - .multiselect__tags { - @apply min-h-[32px] max-h-[32px]; - - .multiselect__single { - @apply pt-1 pb-1; - } - } - } - - .multiselect__tags, - .multiselect__input, - .multiselect { - @apply text-n-slate-12 rounded-lg text-sm min-h-[2.5rem]; - } - - .multiselect__input { - @apply h-[2.375rem] min-h-[2.375rem]; - } - - .multiselect__single { - @apply items-center flex m-0 text-sm max-h-[2.375rem] bg-transparent text-n-slate-12 py-3 px-0.5; - } - - .multiselect__placeholder { - @apply m-0 py-2 px-0.5; - } - - .multiselect__tag { - @apply py-[6px] my-[1px]; - } - - .multiselect__select { - @apply min-h-[2.5rem]; - } - - .multiselect--disabled .multiselect__current, - .multiselect--disabled .multiselect__select { - @apply bg-transparent; - } -} - -.multiselect--disabled { - background-color: rgba(var(--black-alpha-2)) !important; - - .multiselect__tags { - @apply hover:outline-n-weak; - } -} - -.multiselect--active { - .multiselect__select::before { - @apply top-[62%]; - } -} - -.multiselect__select::before { - top: 60% !important; -} - -.multiselect-wrap--medium { - .multiselect__tags, - .multiselect__input { - @apply items-center flex; - } - - .multiselect__tags, - .multiselect__input, - .multiselect { - @apply bg-n-alpha-black2 text-n-slate-12 text-sm h-12 min-h-[3rem]; - } - - .multiselect__input { - @apply h-[2.875rem] min-h-[2.875rem]; - margin-bottom: 0 !important; - } - - .multiselect__single { - @apply items-center flex m-0 text-sm py-1 px-0.5 bg-transparent text-n-slate-12; - } - - .multiselect__placeholder { - @apply m-0 py-1 px-0.5; - } - - .multiselect__select { - @apply min-h-[3rem]; - } - - .multiselect--disabled .multiselect__current, - .multiselect--disabled .multiselect__select { - @apply bg-transparent; - } - - .multiselect__tags-wrap { - @apply flex-shrink-0; - } -} diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue index b163bfdc8..653b43840 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue @@ -308,17 +308,5 @@ onMounted(() => { .contact--profile { @apply pb-3 border-b border-solid border-n-weak; } - - .conversation--actions .multiselect-wrap--small { - .multiselect { - @apply box-border pl-6; - } - - .multiselect__element { - span { - @apply w-full; - } - } - } } diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue index 35d985c77..4c14ba2ab 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue @@ -211,7 +211,7 @@ export default { - - diff --git a/app/javascript/entrypoints/dashboard.js b/app/javascript/entrypoints/dashboard.js index cd2cda6bd..d0c6c808d 100644 --- a/app/javascript/entrypoints/dashboard.js +++ b/app/javascript/entrypoints/dashboard.js @@ -5,7 +5,6 @@ import axios from 'axios'; // Global Components import hljsVuePlugin from '@highlightjs/vue-plugin'; -import Multiselect from 'vue-multiselect'; import { plugin, defaultConfig } from '@formkit/vue'; import WootWizard from 'components/ui/Wizard.vue'; import FloatingVue from 'floating-vue'; @@ -92,7 +91,6 @@ app.use(FloatingVue, { }); app.use(hljsVuePlugin); -app.component('multiselect', Multiselect); app.component('woot-wizard', WootWizard); app.component('fluent-icon', FluentIcon); diff --git a/package.json b/package.json index b062495a0..e36b2f53f 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,6 @@ "vue-dompurify-html": "^5.1.0", "vue-i18n": "9.14.5", "vue-letter": "^0.2.1", - "vue-multiselect": "3.1.0", "vue-router": "~4.4.5", "vue-upload-component": "^3.1.17", "vue-virtual-scroller": "^2.0.0-beta.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7a1b6f35f..e880b4aaf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -223,9 +223,6 @@ importers: vue-letter: specifier: ^0.2.1 version: 0.2.1 - vue-multiselect: - specifier: 3.1.0 - version: 3.1.0 vue-router: specifier: ~4.4.5 version: 4.4.5(vue@3.5.12(typescript@5.6.2)) @@ -4628,10 +4625,6 @@ packages: vue-letter@0.2.1: resolution: {integrity: sha512-IYWp47XUikjKfEniWYlFxeJFKABZwAE5IEjz866qCBytBr2dzqVDdjoMDpBP//krxkzN/QZYyHe6C09y/IODYg==} - vue-multiselect@3.1.0: - resolution: {integrity: sha512-+i/fjTqFBpaay9NP+lU7obBeNaw2DdFDFs4mqhsM0aEtKRdvIf7CfREAx2o2B4XDmPrBt1r7x1YCM3BOMLaUgQ==} - engines: {node: '>= 14.18.1', npm: '>= 6.14.15'} - vue-observe-visibility@2.0.0-alpha.1: resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==} peerDependencies: @@ -9699,8 +9692,6 @@ snapshots: dependencies: lettersanitizer: 1.0.6 - vue-multiselect@3.1.0: {} - vue-observe-visibility@2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2)): dependencies: vue: 3.5.12(typescript@5.6.2)