feat(QSelect): add class for wrapper

altai-ui · Jun 29, 2022 · c5cb34a · c5cb34a
1 parent 12d1a29
commit c5cb34a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/qComponents/QSelect/src/QSelect.vue b/src/qComponents/QSelect/src/QSelect.vue
@@ -2,6 +2,7 @@
   <div
     ref="root"
     class="q-select"
+    :class="qSelectClasses"
     @click="toggleMenu"
     @mouseenter="state.hover = true"
     @mouseleave="state.hover = false"
@@ -122,7 +123,12 @@ import type { QFormItemProvider } from '@/qComponents/QFormItem';
 import type { QInputInstance } from '@/qComponents/QInput';
 import type { QOptionModel, QOptionPropValue } from '@/qComponents/QOption';
 
-import type { Nullable, Optional, UnwrappedInstance } from '#/helpers';
+import type {
+  Nullable,
+  Optional,
+  UnwrappedInstance,
+  ClassValue
+} from '#/helpers';
 
 import QSelectDropdown from './components/QSelectDropdown';
 import type { QSelectDropdownInstance } from './components/QSelectDropdown';
@@ -464,6 +470,10 @@ export default defineComponent({
       );
     });
 
+    const qSelectClasses = computed<ClassValue>(() => ({
+      'q-select__disabled': isDisabled.value
+    }));
+
     const iconClass = computed<string>(() => {
       if (props.remote && props.filterable) return 'q-icon-search';
       return state.isDropdownShown
@@ -944,6 +954,7 @@ export default defineComponent({
       isReadonly,
       isDisabled,
       isClearBtnShown,
+      qSelectClasses,
       iconClass,
       emptyText,
       isNewOptionShown,

diff --git a/src/qComponents/QSelect/src/types.ts b/src/qComponents/QSelect/src/types.ts
@@ -4,7 +4,7 @@ import type { Ref, ComputedRef } from 'vue';
 import type { QInputInstance } from '@/qComponents/QInput';
 import type { QOptionModel, QOptionPropValue } from '@/qComponents/QOption';
 
-import type { Nullable, UnwrappedInstance } from '#/helpers';
+import type { Nullable, UnwrappedInstance, ClassValue } from '#/helpers';
 
 import type { QSelectDropdownInstance } from './components/QSelectDropdown';
 import type { QSelectTagsInstance } from './components/QSelectTags';
@@ -76,6 +76,7 @@ export interface QSelectInstance {
   isReadonly: ComputedRef<Nullable<boolean>>;
   isDisabled: ComputedRef<boolean>;
   isClearBtnShown: ComputedRef<Nullable<boolean>>;
+  qSelectClasses: ComputedRef<ClassValue>;
   iconClass: ComputedRef<string>;
   emptyText: ComputedRef<string>;
   isNewOptionShown: ComputedRef<boolean>;