chore: resolve sass and vue compiler deprecation warnings (#13794)

2026-05-22 12:16:43 +05:30
parent 0722750a55
commit 4cdfe4168c
60 changed files with 153 additions and 179 deletions
@@ -317,9 +317,7 @@ onMounted(() => {
 </template>

 <style lang="scss" scoped>
-::v-deep {
-  .contact--profile {
-    @apply pb-3 border-b border-solid border-n-weak;
-  }
+:deep(.contact--profile) {
+  @apply pb-3 border-b border-solid border-n-weak;
 }
 </style>
@@ -143,17 +143,15 @@ export default {
 </template>

 <style scoped lang="scss">
-::v-deep {
-  .ProseMirror-menubar {
-    @apply hidden;
-  }
+:deep(.ProseMirror-menubar) {
+  @apply hidden;
+}

-  .ProseMirror-woot-style {
-    @apply min-h-[12.5rem];
+:deep(.ProseMirror-woot-style) {
+  @apply min-h-[12.5rem];

-    p {
-      @apply text-base;
-    }
+  p {
+    @apply text-base;
  }
 }
 </style>
@@ -147,17 +147,15 @@ export default {
 </template>

 <style scoped lang="scss">
-::v-deep {
-  .ProseMirror-menubar {
-    @apply hidden;
-  }
+:deep(.ProseMirror-menubar) {
+  @apply hidden;
+}

-  .ProseMirror-woot-style {
-    @apply min-h-[12.5rem];
+:deep(.ProseMirror-woot-style) {
+  @apply min-h-[12.5rem];

-    p {
-      @apply text-base;
-    }
+  p {
+    @apply text-base;
  }
 }
 </style>
@@ -4,7 +4,7 @@ import AddCanned from './AddCanned.vue';
 import EditCanned from './EditCanned.vue';
 import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
-import { computed, onMounted, ref, defineOptions } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import { picoSearch } from '@scmmishra/pico-search';
@@ -74,23 +74,25 @@ const tableHeaders = computed(() => {

 <template>
  <div class="w-full min-h-[12rem] relative">
-    <div class="w-full space-y-3 text-sm">
-      <thead class="opacity-30 dark:opacity-30">
-        <th
-          v-for="thHeader in tableHeaders"
-          :key="thHeader"
-          class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12"
-        >
-          <span class="mb-0">
-            {{ thHeader }}
-          </span>
-        </th>
-      </thead>
-      <CustomRoleListItem
-        class="opacity-25 dark:opacity-20"
-        :roles="dummyCustomRolesData"
-        :loading="{}"
-      />
+    <div class="w-full space-y-3 text-sm overflow-x-auto">
+      <table class="min-w-full">
+        <thead class="opacity-30 dark:opacity-30">
+          <tr>
+            <th
+              v-for="thHeader in tableHeaders"
+              :key="thHeader"
+              class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12"
+            >
+              <span class="mb-0">
+                {{ thHeader }}
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="opacity-25 dark:opacity-20">
+          <CustomRoleListItem :roles="dummyCustomRolesData" :loading="{}" />
+        </tbody>
+      </table>
    </div>
    <div
      class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
@@ -156,10 +156,8 @@ onMounted(() => {
 .message-editor {
  @apply px-3;

-  ::v-deep {
-    .ProseMirror-menubar {
-      @apply rounded-tl-[4px];
-    }
+  :deep(.ProseMirror-menubar) {
+    @apply rounded-tl-[4px];
  }
 }
 </style>
@@ -1,6 +1,5 @@
 <script setup>
 import OAuthChannel from './OAuthChannel.vue';
-import { defineOptions } from 'vue';

 defineOptions({
  name: 'GoogleOAuthChannel',
@@ -1,6 +1,5 @@
 <script setup>
 import OAuthChannel from './OAuthChannel.vue';
-import { defineOptions } from 'vue';

 defineOptions({
  name: 'MicrosoftOAuthChannel',
@@ -227,7 +227,7 @@ export default {
 </template>

 <style lang="scss" scoped>
-::v-deep.message-editor {
+:deep(.message-editor) {
  @apply border-0;
 }

@@ -446,7 +446,7 @@ export default {

 <style lang="scss" scoped>
 .whatsapp-settings--content {
-  ::v-deep input {
+  :deep(input) {
    margin-bottom: 0;
  }
 }
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, onMounted, ref, defineProps, watch, computed } from 'vue';
+import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import { useBranding } from 'shared/composables/useBranding';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -132,10 +132,8 @@ export default {
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
+  :deep(input) {
+    @apply lowercase;
  }
 }
 </style>
@@ -135,10 +135,8 @@ export default {
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
+  :deep(input) {
+    @apply lowercase;
  }
 }
 </style>
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, defineModel } from 'vue';
+import { computed, inject } from 'vue';
 import { useMacros } from 'dashboard/composables/useMacros';
 import { useI18n } from 'vue-i18n';
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
@@ -163,11 +163,11 @@ export default {
 </template>

 <style scoped lang="scss">
-::v-deep input[type='text'] {
+:deep(input[type='text']) {
  @apply mb-0;
 }

-::v-deep .error {
+:deep(.error) {
  .message {
    @apply mb-0;
  }
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch, defineModel } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import addMonths from 'date-fns/addMonths';
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, defineExpose, defineProps } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useRouter } from 'vue-router';