From 570063d9efd5b758079cd930f283c66c825cb236 Mon Sep 17 00:00:00 2001
From: shamilfrontend <shoma.alisultanov@yandex.ru>
Date: Thu, 26 May 2022 16:20:45 +0300
Subject: [PATCH 1/6] feat: types

---
 src/qComponents/QSelect/index.ts        |  24 +++-
 src/qComponents/QSelect/src/QSelect.vue | 145 ++++++++++++++++++++----
 src/qComponents/QSelect/src/types.ts    |  90 +++++++++++----
 3 files changed, 210 insertions(+), 49 deletions(-)

diff --git a/src/qComponents/QSelect/index.ts b/src/qComponents/QSelect/index.ts
index ede98c2c..7ba09023 100644
--- a/src/qComponents/QSelect/index.ts
+++ b/src/qComponents/QSelect/index.ts
@@ -5,9 +5,29 @@ import Select from './src/QSelect.vue';
 export const QSelect = withInstall(Select);
 
 export type {
-  QSelectPropModelValue,
   NewOption,
   QSelectProvider,
   QSelectState,
-  QSelectProps
+  QSelectProps,
+  QSelectPropModelValue,
+  QSelectPropAutocomplete,
+  QSelectPropCanLoadMore,
+  QSelectPropDisabled,
+  QSelectPropClearable,
+  QSelectPropFilterable,
+  QSelectPropAllowCreate,
+  QSelectPropLoading,
+  QSelectPropRemote,
+  QSelectPropLoadingText,
+  QSelectPropLoadMoreText,
+  QSelectPropNoMatchText,
+  QSelectPropNoDataText,
+  QSelectPropMultiple,
+  QSelectPropMultipleLimit,
+  QSelectPropPlaceholder,
+  QSelectPropSelectAllShown,
+  QSelectPropSelectAllText,
+  QSelectPropValueKey,
+  QSelectPropCollapseTags,
+  QSelectPropTeleportTo
 } from './src/types';
diff --git a/src/qComponents/QSelect/src/QSelect.vue b/src/qComponents/QSelect/src/QSelect.vue
index d19b755d..a6c8c6c3 100644
--- a/src/qComponents/QSelect/src/QSelect.vue
+++ b/src/qComponents/QSelect/src/QSelect.vue
@@ -128,17 +128,38 @@ import QSelectDropdown from './QSelectDropdown.vue';
 import QSelectTags from './QSelectTags.vue';
 import type {
   QSelectPropModelValue,
-  NewOption,
+  QSelectPropAutocomplete,
+  QSelectPropCanLoadMore,
+  QSelectPropDisabled,
+  QSelectPropClearable,
+  QSelectPropFilterable,
+  QSelectPropAllowCreate,
+  QSelectPropLoading,
+  QSelectPropRemote,
+  QSelectPropLoadingText,
+  QSelectPropLoadMoreText,
+  QSelectPropNoMatchText,
+  QSelectPropNoDataText,
+  QSelectPropMultiple,
+  QSelectPropMultipleLimit,
+  QSelectPropPlaceholder,
+  QSelectPropSelectAllShown,
+  QSelectPropSelectAllText,
+  QSelectPropValueKey,
+  QSelectPropCollapseTags,
+  QSelectPropTeleportTo,
+  QSelectProps,
   QSelectInstance,
+  NewOption,
   QSelectProvider,
   QSelectState,
-  QSelectProps,
   QSelectTagsInstance,
   QSelectDropdownInstance
 } from './types';
 
 export default defineComponent({
   name: 'QSelect',
+
   componentName: 'QSelect',
 
   components: {
@@ -154,88 +175,168 @@ export default defineComponent({
       type: [String, Number, Object, Array] as PropType<QSelectPropModelValue>,
       default: null
     },
+
     /**
      * the autocomplete attribute of select input
      */
-    autocomplete: { type: String as PropType<'on' | 'off'>, default: 'off' },
+    autocomplete: {
+      type: String as PropType<QSelectPropAutocomplete>,
+      default: 'off'
+    },
+
     /**
      * whether loadMoreText is shown
      */
-    canLoadMore: { type: Boolean, default: false },
+    canLoadMore: {
+      type: Boolean as PropType<QSelectPropCanLoadMore>,
+      default: false
+    },
+
     /**
      * whether Select is disabled
      */
-    disabled: { type: Boolean, default: false },
+    disabled: {
+      type: Boolean as PropType<QSelectPropDisabled>,
+      default: false
+    },
+
     /**
      * whether select can be cleared
      */
-    clearable: { type: Boolean, default: false },
+    clearable: {
+      type: Boolean as PropType<QSelectPropClearable>,
+      default: false
+    },
+
     /**
      * whether Select is filterable
      */
-    filterable: { type: Boolean, default: false },
+    filterable: {
+      type: Boolean as PropType<QSelectPropFilterable>,
+      default: false
+    },
+
     /**
      * whether creating new items is allowed. To use this, `filterable` must be true
      */
-    allowCreate: { type: Boolean, default: false },
+    allowCreate: {
+      type: Boolean as PropType<QSelectPropAllowCreate>,
+      default: false
+    },
+
     /**
      * whether Select is loading data from server
      */
-    loading: { type: Boolean, default: false },
+    loading: {
+      type: Boolean as PropType<QSelectPropLoading>,
+      default: false
+    },
+
     /**
      * whether options are loaded from server
      */
-    remote: { type: Boolean, default: false },
+    remote: {
+      type: Boolean as PropType<QSelectPropRemote>,
+      default: false
+    },
+
     /**
      * text that is shown when `loading` is true
      */
-    loadingText: { type: String, default: null },
+    loadingText: {
+      type: String as PropType<QSelectPropLoadingText>,
+      default: null
+    },
+
     /**
      * text that is shown when `canLoadMore` is true
      */
-    loadMoreText: { type: String, default: null },
+    loadMoreText: {
+      type: String as PropType<QSelectPropLoadMoreText>,
+      default: null
+    },
+
     /**
      * text of no match state
      */
-    noMatchText: { type: String, default: null },
+    noMatchText: {
+      type: String as PropType<QSelectPropNoMatchText>,
+      default: null
+    },
+
     /**
      * text of no data state
      */
-    noDataText: { type: String, default: null },
+    noDataText: {
+      type: String as PropType<QSelectPropNoDataText>,
+      default: null
+    },
+
     /**
      * whether multiple-select is activated
      */
-    multiple: { type: Boolean, default: false },
+    multiple: {
+      type: Boolean as PropType<QSelectPropMultiple>,
+      default: false
+    },
+
     /**
      * maximum number of options user can select when `multiple` is true. No `limit` when set to 0
      */
-    multipleLimit: { type: Number, default: 0 },
+    multipleLimit: {
+      type: Number as PropType<QSelectPropMultipleLimit>,
+      default: 0
+    },
+
     /**
      * placeholder
      */
-    placeholder: { type: String, default: '' },
+    placeholder: {
+      type: String as PropType<QSelectPropPlaceholder>,
+      default: ''
+    },
+
     /**
      * whether select all button is shown
      */
-    selectAllShown: { type: Boolean, default: false },
+    selectAllShown: {
+      type: Boolean as PropType<QSelectPropSelectAllShown>,
+      default: false
+    },
+
     /**
      * text of select all button
      */
-    selectAllText: { type: String, default: null },
+    selectAllText: {
+      type: String as PropType<QSelectPropSelectAllText>,
+      default: null
+    },
+
     /**
      * unique identity key name for value, required when option's value is an object
      */
-    valueKey: { type: String, default: 'value' },
+    valueKey: {
+      type: String as PropType<QSelectPropValueKey>,
+      default: 'value'
+    },
+
     /**
      * whether to collapse tags to a text when multiple selecting
      */
-    collapseTags: { type: Boolean, default: false },
+    collapseTags: {
+      type: Boolean as PropType<QSelectPropCollapseTags>,
+      default: false
+    },
+
     /**
      * Specifies a target element where QSelect will be moved.
      * (has to be a valid query selector, or an HTMLElement)
      */
     teleportTo: {
-      type: [String, isServer ? Object : HTMLElement],
+      type: [
+        String,
+        isServer ? Object : HTMLElement
+      ] as PropType<QSelectPropTeleportTo>,
       default: null
     }
   },
diff --git a/src/qComponents/QSelect/src/types.ts b/src/qComponents/QSelect/src/types.ts
index c3db8ad0..01af5871 100644
--- a/src/qComponents/QSelect/src/types.ts
+++ b/src/qComponents/QSelect/src/types.ts
@@ -7,10 +7,74 @@ import type { QScrollbarInstance } from '@/qComponents/QScrollbar';
 
 import type { Nullable, Optional, UnwrappedInstance } from '#/helpers';
 
-type QSelectPropModelValue = Nullable<
+export type QSelectPropModelValue = Nullable<
   string | number | QOptionPropValue | (string | number | QOptionPropValue)[]
 >;
 
+export type QSelectPropAutocomplete = Nullable<'on' | 'off'>;
+
+export type QSelectPropCanLoadMore = Nullable<boolean>;
+
+export type QSelectPropDisabled = Nullable<boolean>;
+
+export type QSelectPropClearable = Nullable<boolean>;
+
+export type QSelectPropFilterable = Nullable<boolean>;
+
+export type QSelectPropAllowCreate = Nullable<boolean>;
+
+export type QSelectPropLoading = Nullable<boolean>;
+
+export type QSelectPropRemote = Nullable<boolean>;
+
+export type QSelectPropLoadingText = Nullable<string>;
+
+export type QSelectPropLoadMoreText = Nullable<string>;
+
+export type QSelectPropNoMatchText = Nullable<string>;
+
+export type QSelectPropNoDataText = Nullable<string>;
+
+export type QSelectPropMultiple = Nullable<boolean>;
+
+export type QSelectPropMultipleLimit = Nullable<number>;
+
+export type QSelectPropPlaceholder = Nullable<string>;
+
+export type QSelectPropSelectAllShown = Nullable<boolean>;
+
+export type QSelectPropSelectAllText = Nullable<string>;
+
+export type QSelectPropValueKey = Nullable<string>;
+
+export type QSelectPropCollapseTags = Nullable<boolean>;
+
+export type QSelectPropTeleportTo = Nullable<string | HTMLElement>;
+
+interface QSelectProps {
+  modelValue: QSelectPropModelValue;
+  autocomplete: QSelectPropAutocomplete;
+  canLoadMore: QSelectPropCanLoadMore;
+  disabled: QSelectPropDisabled;
+  clearable: QSelectPropClearable;
+  filterable: QSelectPropFilterable;
+  allowCreate: QSelectPropAllowCreate;
+  loading: QSelectPropLoading;
+  remote: QSelectPropRemote;
+  loadingText: QSelectPropLoadingText;
+  loadMoreText: QSelectPropLoadMoreText;
+  noMatchText: QSelectPropNoMatchText;
+  noDataText: QSelectPropNoDataText;
+  multiple: QSelectPropMultiple;
+  multipleLimit: QSelectPropMultipleLimit;
+  placeholder: QSelectPropPlaceholder;
+  selectAllShown: QSelectPropSelectAllShown;
+  selectAllText: QSelectPropSelectAllText;
+  valueKey: QSelectPropValueKey;
+  collapseTags: QSelectPropCollapseTags;
+  teleportTo: QSelectPropTeleportTo;
+}
+
 type NewOption = {
   value: QSelectPropModelValue;
   key: QSelectPropModelValue;
@@ -72,29 +136,6 @@ interface QSelectProvider {
   modelValue: Ref<QSelectPropModelValue>;
 }
 
-interface QSelectProps {
-  selectAllShown: Nullable<boolean>;
-  selectAllText: Nullable<string>;
-  loadMoreText: Nullable<string>;
-  filterable: Nullable<boolean>;
-  collapseTags: Nullable<boolean>;
-  autocomplete: Nullable<'on' | 'off'>;
-  multiple: Nullable<boolean>;
-  modelValue: Nullable<QSelectPropModelValue>;
-  placeholder: Nullable<string>;
-  disabled: Nullable<boolean>;
-  canLoadMore: Nullable<boolean>;
-  loading: Nullable<boolean>;
-  loadingText: Nullable<string>;
-  noMatchText: Nullable<string>;
-  noDataText: Nullable<string>;
-  allowCreate: Nullable<boolean>;
-  clearable: Nullable<boolean>;
-  remote: Nullable<boolean>;
-  valueKey: Nullable<string>;
-  multipleLimit: Nullable<number>;
-}
-
 interface QSelectState {
   options: QOptionModel[];
   selected: Nullable<QOptionModel | NewOption | (QOptionModel | NewOption)[]>;
@@ -149,7 +190,6 @@ interface QSelectTagsInstance {
 
 export {
   QOptionPropValue,
-  QSelectPropModelValue,
   NewOption,
   QSelectInstance,
   QSelectProps,

From f993569191add5fc738d3440c787462f5ecf6a77 Mon Sep 17 00:00:00 2001
From: shamilfrontend <shoma.alisultanov@yandex.ru>
Date: Thu, 26 May 2022 16:51:39 +0300
Subject: [PATCH 2/6] feat: components

---
 .../QSelect/src/components/QSelectDropdown/index.ts          | 3 +++
 .../QSelectDropdown/index.vue}                               | 5 ++++-
 .../{ => components/QSelectDropdown}/q-select-dropdown.scss  | 0
 .../QSelect/src/components/QSelectDropdown/types.ts          | 0
 src/qComponents/QSelect/src/components/QSelectTags/index.ts  | 3 +++
 .../{QSelectTags.vue => components/QSelectTags/index.vue}    | 3 ++-
 .../src/{ => components/QSelectTags}/q-select-tags.scss      | 0
 src/qComponents/QSelect/src/components/QSelectTags/types.ts  | 0
 src/qComponents/QSelect/src/q-select.scss                    | 4 ++--
 9 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 src/qComponents/QSelect/src/components/QSelectDropdown/index.ts
 rename src/qComponents/QSelect/src/{QSelectDropdown.vue => components/QSelectDropdown/index.vue} (98%)
 rename src/qComponents/QSelect/src/{ => components/QSelectDropdown}/q-select-dropdown.scss (100%)
 create mode 100644 src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
 create mode 100644 src/qComponents/QSelect/src/components/QSelectTags/index.ts
 rename src/qComponents/QSelect/src/{QSelectTags.vue => components/QSelectTags/index.vue} (97%)
 rename src/qComponents/QSelect/src/{ => components/QSelectTags}/q-select-tags.scss (100%)
 create mode 100644 src/qComponents/QSelect/src/components/QSelectTags/types.ts

diff --git a/src/qComponents/QSelect/src/components/QSelectDropdown/index.ts b/src/qComponents/QSelect/src/components/QSelectDropdown/index.ts
new file mode 100644
index 00000000..a56fddaf
--- /dev/null
+++ b/src/qComponents/QSelect/src/components/QSelectDropdown/index.ts
@@ -0,0 +1,3 @@
+import QSelectDropdown from './index.vue';
+
+export default QSelectDropdown;
diff --git a/src/qComponents/QSelect/src/QSelectDropdown.vue b/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
similarity index 98%
rename from src/qComponents/QSelect/src/QSelectDropdown.vue
rename to src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
index 4cda69b6..5fdb31b8 100644
--- a/src/qComponents/QSelect/src/QSelectDropdown.vue
+++ b/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
@@ -76,7 +76,10 @@ import type { QSelectProvider } from '@/qComponents/QSelect';
 
 import type { Nullable, UnwrappedInstance } from '#/helpers';
 
-import type { QSelectDropdownInstance, QSelectDropdownProps } from './types';
+import type {
+  QSelectDropdownInstance,
+  QSelectDropdownProps
+} from '../../types';
 
 const DEFAULT_Z_INDEX = 2000;
 
diff --git a/src/qComponents/QSelect/src/q-select-dropdown.scss b/src/qComponents/QSelect/src/components/QSelectDropdown/q-select-dropdown.scss
similarity index 100%
rename from src/qComponents/QSelect/src/q-select-dropdown.scss
rename to src/qComponents/QSelect/src/components/QSelectDropdown/q-select-dropdown.scss
diff --git a/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts b/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/qComponents/QSelect/src/components/QSelectTags/index.ts b/src/qComponents/QSelect/src/components/QSelectTags/index.ts
new file mode 100644
index 00000000..c179c43a
--- /dev/null
+++ b/src/qComponents/QSelect/src/components/QSelectTags/index.ts
@@ -0,0 +1,3 @@
+import QSelectTags from './index.vue';
+
+export default QSelectTags;
diff --git a/src/qComponents/QSelect/src/QSelectTags.vue b/src/qComponents/QSelect/src/components/QSelectTags/index.vue
similarity index 97%
rename from src/qComponents/QSelect/src/QSelectTags.vue
rename to src/qComponents/QSelect/src/components/QSelectTags/index.vue
index e85996e1..1bc0c6a5 100644
--- a/src/qComponents/QSelect/src/QSelectTags.vue
+++ b/src/qComponents/QSelect/src/components/QSelectTags/index.vue
@@ -57,10 +57,11 @@ import type { QSelectProvider } from '@/qComponents/QSelect';
 
 import type { Nullable } from '#/helpers';
 
-import type { NewOption, QSelectTagsInstance } from './types';
+import type { NewOption, QSelectTagsInstance } from '../../types';
 
 export default defineComponent({
   name: 'QSelectTags',
+
   componentName: 'QSelectTags',
 
   emits: ['remove-tag', 'exit', 'update:query', 'focus', 'keyup-enter'],
diff --git a/src/qComponents/QSelect/src/q-select-tags.scss b/src/qComponents/QSelect/src/components/QSelectTags/q-select-tags.scss
similarity index 100%
rename from src/qComponents/QSelect/src/q-select-tags.scss
rename to src/qComponents/QSelect/src/components/QSelectTags/q-select-tags.scss
diff --git a/src/qComponents/QSelect/src/components/QSelectTags/types.ts b/src/qComponents/QSelect/src/components/QSelectTags/types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/qComponents/QSelect/src/q-select.scss b/src/qComponents/QSelect/src/q-select.scss
index bef69864..c5ce3c50 100644
--- a/src/qComponents/QSelect/src/q-select.scss
+++ b/src/qComponents/QSelect/src/q-select.scss
@@ -1,5 +1,5 @@
-@import './q-select-tags';
-@import './q-select-dropdown';
+@import './components/QSelectTags/q-select-tags';
+@import './components/QSelectDropdown/q-select-dropdown';
 
 .q-select {
   position: relative;

From ba388873f95b33d26d24d446326f74f5d564c941 Mon Sep 17 00:00:00 2001
From: shamilfrontend <shoma.alisultanov@yandex.ru>
Date: Fri, 27 May 2022 10:18:54 +0300
Subject: [PATCH 3/6] feat: types

---
 src/qComponents/QSelect/src/QSelect.vue       | 10 +--
 .../src/components/QSelectDropdown/index.ts   |  2 +
 .../src/components/QSelectDropdown/index.vue  | 59 ++++++++++++----
 .../src/components/QSelectDropdown/types.ts   | 32 +++++++++
 .../src/components/QSelectTags/index.ts       |  2 +
 .../src/components/QSelectTags/index.vue      |  8 ++-
 .../src/components/QSelectTags/types.ts       | 20 ++++++
 src/qComponents/QSelect/src/types.ts          | 67 +++----------------
 8 files changed, 121 insertions(+), 79 deletions(-)

diff --git a/src/qComponents/QSelect/src/QSelect.vue b/src/qComponents/QSelect/src/QSelect.vue
index a6c8c6c3..7182ae39 100644
--- a/src/qComponents/QSelect/src/QSelect.vue
+++ b/src/qComponents/QSelect/src/QSelect.vue
@@ -124,8 +124,10 @@ import type { QOptionModel, QOptionPropValue } from '@/qComponents/QOption';
 
 import type { Nullable, Optional, UnwrappedInstance } from '#/helpers';
 
-import QSelectDropdown from './QSelectDropdown.vue';
-import QSelectTags from './QSelectTags.vue';
+import QSelectDropdown from './components/QSelectDropdown';
+import type { QSelectDropdownInstance } from './components/QSelectDropdown';
+import QSelectTags from './components/QSelectTags';
+import type { QSelectTagsInstance } from './components/QSelectTags';
 import type {
   QSelectPropModelValue,
   QSelectPropAutocomplete,
@@ -152,9 +154,7 @@ import type {
   QSelectInstance,
   NewOption,
   QSelectProvider,
-  QSelectState,
-  QSelectTagsInstance,
-  QSelectDropdownInstance
+  QSelectState
 } from './types';
 
 export default defineComponent({
diff --git a/src/qComponents/QSelect/src/components/QSelectDropdown/index.ts b/src/qComponents/QSelect/src/components/QSelectDropdown/index.ts
index a56fddaf..5fb08cdf 100644
--- a/src/qComponents/QSelect/src/components/QSelectDropdown/index.ts
+++ b/src/qComponents/QSelect/src/components/QSelectDropdown/index.ts
@@ -1,3 +1,5 @@
 import QSelectDropdown from './index.vue';
 
 export default QSelectDropdown;
+
+export type { QSelectDropdownProps, QSelectDropdownInstance } from './types';
diff --git a/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue b/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
index 5fdb31b8..c965e1a2 100644
--- a/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
+++ b/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
@@ -76,15 +76,13 @@ import type { QSelectProvider } from '@/qComponents/QSelect';
 
 import type { Nullable, UnwrappedInstance } from '#/helpers';
 
-import type {
-  QSelectDropdownInstance,
-  QSelectDropdownProps
-} from '../../types';
+import type { QSelectDropdownInstance, QSelectDropdownProps } from './types';
 
 const DEFAULT_Z_INDEX = 2000;
 
 export default defineComponent({
   name: 'QSelectDropdown',
+
   componentName: 'QSelectDropdown',
 
   components: {
@@ -94,15 +92,50 @@ export default defineComponent({
   },
 
   props: {
-    shown: { type: Boolean, required: true },
-    selectAllShown: { type: Boolean, required: true },
-    selectAllText: { type: String, required: true },
-    showEmptyContent: { type: Boolean, required: true },
-    emptyText: { type: String, required: true },
-    isCanLoadMoreShown: { type: Boolean, required: true },
-    loadMoreText: { type: String, required: true },
-    isNewOptionShown: { type: Boolean, required: true },
-    width: { type: Number, default: null }
+    shown: {
+      type: Boolean,
+      required: true
+    },
+
+    selectAllShown: {
+      type: Boolean,
+      required: true
+    },
+
+    selectAllText: {
+      type: String,
+      required: true
+    },
+
+    showEmptyContent: {
+      type: Boolean,
+      required: true
+    },
+
+    emptyText: {
+      type: String,
+      required: true
+    },
+
+    isCanLoadMoreShown: {
+      type: Boolean,
+      required: true
+    },
+
+    loadMoreText: {
+      type: String,
+      required: true
+    },
+
+    isNewOptionShown: {
+      type: Boolean,
+      required: true
+    },
+
+    width: {
+      type: Number,
+      default: null
+    }
   },
 
   emits: ['select-all'],
diff --git a/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts b/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
index e69de29b..93af8cf0 100644
--- a/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
+++ b/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
@@ -0,0 +1,32 @@
+import type { ComputedRef, Ref } from 'vue';
+
+import type { QScrollbarInstance } from '@/qComponents/QScrollbar';
+import type { QSelectState } from '@/qComponents/QSelect';
+
+import type { Nullable, UnwrappedInstance } from '#/helpers';
+
+export interface QSelectDropdownProps {
+  shown: Nullable<boolean>;
+  selectAllShown: Nullable<boolean>;
+  selectAllText: Nullable<string>;
+  showEmptyContent: Nullable<boolean>;
+  emptyText: Nullable<string>;
+  isCanLoadMoreShown: Nullable<boolean>;
+  loadMoreText: Nullable<string>;
+  isNewOptionShown: Nullable<boolean>;
+  width: Nullable<number>;
+}
+
+export interface QSelectDropdownInstance {
+  zIndex: Ref<number>;
+  styles: ComputedRef<Record<string, Nullable<string | number>>>;
+  isVisibleOptionExist: ComputedRef<boolean>;
+  areAllSelected: ComputedRef<boolean>;
+  isIndeterminate: ComputedRef<boolean>;
+  navigateDropdown: (e: KeyboardEvent) => void;
+  handleSelectAllClick: () => void;
+  root: Ref<Nullable<HTMLDivElement>>;
+  multiple: Ref<Nullable<boolean>> | boolean;
+  scrollbar: Ref<UnwrappedInstance<QScrollbarInstance>>;
+  qSelectState: Partial<Nullable<QSelectState>>;
+}
diff --git a/src/qComponents/QSelect/src/components/QSelectTags/index.ts b/src/qComponents/QSelect/src/components/QSelectTags/index.ts
index c179c43a..726887d8 100644
--- a/src/qComponents/QSelect/src/components/QSelectTags/index.ts
+++ b/src/qComponents/QSelect/src/components/QSelectTags/index.ts
@@ -1,3 +1,5 @@
 import QSelectTags from './index.vue';
 
 export default QSelectTags;
+
+export type { QSelectTagsInstance } from './types';
diff --git a/src/qComponents/QSelect/src/components/QSelectTags/index.vue b/src/qComponents/QSelect/src/components/QSelectTags/index.vue
index 1bc0c6a5..84186ba7 100644
--- a/src/qComponents/QSelect/src/components/QSelectTags/index.vue
+++ b/src/qComponents/QSelect/src/components/QSelectTags/index.vue
@@ -39,7 +39,7 @@
       :value="query"
       type="text"
       class="q-select-tags__input"
-      :autocomplete="autocomplete"
+      :autocomplete="autocomplete ?? 'off'"
       @focus="$emit('focus')"
       @keyup.esc="$emit('exit')"
       @keyup.enter="$emit('keyup-enter')"
@@ -57,7 +57,9 @@ import type { QSelectProvider } from '@/qComponents/QSelect';
 
 import type { Nullable } from '#/helpers';
 
-import type { NewOption, QSelectTagsInstance } from '../../types';
+import type { NewOption } from '../../types';
+
+import type { QSelectTagsInstance } from './types';
 
 export default defineComponent({
   name: 'QSelectTags',
@@ -88,7 +90,7 @@ export default defineComponent({
       ctx.emit('remove-tag', option);
     };
 
-    const handleInput = (event: KeyboardEvent): void => {
+    const handleInput = (event: Event): void => {
       const target = event.target as HTMLInputElement;
       ctx.emit('update:query', target.value);
     };
diff --git a/src/qComponents/QSelect/src/components/QSelectTags/types.ts b/src/qComponents/QSelect/src/components/QSelectTags/types.ts
index e69de29b..7e370ecf 100644
--- a/src/qComponents/QSelect/src/components/QSelectTags/types.ts
+++ b/src/qComponents/QSelect/src/components/QSelectTags/types.ts
@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+
+import type { QOptionModel } from '@/qComponents/QOption';
+
+import type { Nullable, Optional } from '#/helpers';
+
+import type { NewOption, QSelectState } from '../../types';
+
+export interface QSelectTagsInstance {
+  filterable: Ref<Nullable<boolean> | boolean>;
+  collapseTags: Ref<Nullable<boolean> | boolean>;
+  isDisabled: Ref<Nullable<boolean> | boolean>;
+  autocomplete: Ref<Nullable<string>>;
+  selected: Ref<Optional<QSelectState['selected']>>;
+  query: Ref<Optional<string>>;
+  handleBackspaceKeyDown: () => void;
+  handleTagClose: (option: Nullable<QOptionModel | NewOption>) => void;
+  handleInput: (event: Event) => void;
+  input: Ref<Nullable<HTMLInputElement>>;
+}
diff --git a/src/qComponents/QSelect/src/types.ts b/src/qComponents/QSelect/src/types.ts
index 01af5871..149aed30 100644
--- a/src/qComponents/QSelect/src/types.ts
+++ b/src/qComponents/QSelect/src/types.ts
@@ -3,9 +3,11 @@ import type { Ref, ComputedRef } from 'vue';
 
 import type { QInputInstance } from '@/qComponents/QInput';
 import type { QOptionModel, QOptionPropValue } from '@/qComponents/QOption';
-import type { QScrollbarInstance } from '@/qComponents/QScrollbar';
 
-import type { Nullable, Optional, UnwrappedInstance } from '#/helpers';
+import type { Nullable, UnwrappedInstance } from '#/helpers';
+
+import type { QSelectDropdownInstance } from './components/QSelectDropdown/types';
+import type { QSelectTagsInstance } from './components/QSelectTags/types';
 
 export type QSelectPropModelValue = Nullable<
   string | number | QOptionPropValue | (string | number | QOptionPropValue)[]
@@ -51,7 +53,7 @@ export type QSelectPropCollapseTags = Nullable<boolean>;
 
 export type QSelectPropTeleportTo = Nullable<string | HTMLElement>;
 
-interface QSelectProps {
+export interface QSelectProps {
   modelValue: QSelectPropModelValue;
   autocomplete: QSelectPropAutocomplete;
   canLoadMore: QSelectPropCanLoadMore;
@@ -75,13 +77,13 @@ interface QSelectProps {
   teleportTo: QSelectPropTeleportTo;
 }
 
-type NewOption = {
+export type NewOption = {
   value: QSelectPropModelValue;
   key: QSelectPropModelValue;
   preparedLabel: string | number;
 };
 
-interface QSelectInstance {
+export interface QSelectInstance {
   input: Ref<UnwrappedInstance<QInputInstance>>;
   tags: Ref<UnwrappedInstance<QSelectTagsInstance>>;
   dropdown: Ref<UnwrappedInstance<QSelectDropdownInstance>>;
@@ -117,7 +119,7 @@ interface QSelectInstance {
   t: (key: string) => string;
 }
 
-interface QSelectProvider {
+export interface QSelectProvider {
   toggleMenu: (event: MouseEvent | KeyboardEvent) => void;
   toggleOptionSelection: (option: QOptionModel) => void;
   setSelected: () => void;
@@ -136,7 +138,7 @@ interface QSelectProvider {
   modelValue: Ref<QSelectPropModelValue>;
 }
 
-interface QSelectState {
+export interface QSelectState {
   options: QOptionModel[];
   selected: Nullable<QOptionModel | NewOption | (QOptionModel | NewOption)[]>;
   inputWidth: number;
@@ -148,54 +150,3 @@ interface QSelectState {
   popper: Nullable<PopperInstance>;
   isDropdownShown: boolean;
 }
-
-interface QSelectDropdownInstance {
-  zIndex: Ref<number>;
-  styles: ComputedRef<Record<string, Nullable<string | number>>>;
-  isVisibleOptionExist: ComputedRef<boolean>;
-  areAllSelected: ComputedRef<boolean>;
-  isIndeterminate: ComputedRef<boolean>;
-  navigateDropdown: (e: KeyboardEvent) => void;
-  handleSelectAllClick: () => void;
-  root: Ref<Nullable<HTMLDivElement>>;
-  multiple: Ref<Nullable<boolean>> | boolean;
-  scrollbar: Ref<UnwrappedInstance<QScrollbarInstance>>;
-  qSelectState: Partial<Nullable<QSelectState>>;
-}
-
-interface QSelectDropdownProps {
-  shown: Nullable<boolean>;
-  selectAllShown: Nullable<boolean>;
-  selectAllText: Nullable<string>;
-  showEmptyContent: Nullable<boolean>;
-  emptyText: Nullable<string>;
-  isCanLoadMoreShown: Nullable<boolean>;
-  loadMoreText: Nullable<string>;
-  isNewOptionShown: Nullable<boolean>;
-  width: Nullable<number>;
-}
-
-interface QSelectTagsInstance {
-  filterable: Ref<Nullable<boolean> | boolean>;
-  collapseTags: Ref<Nullable<boolean> | boolean>;
-  isDisabled: Ref<Nullable<boolean> | boolean>;
-  autocomplete: Ref<Nullable<string>>;
-  selected: Ref<Optional<QSelectState['selected']>>;
-  query: Ref<Optional<string>>;
-  handleBackspaceKeyDown: () => void;
-  handleTagClose: (option: Nullable<QOptionModel | NewOption>) => void;
-  handleInput: (event: KeyboardEvent) => void;
-  input: Ref<Nullable<HTMLInputElement>>;
-}
-
-export {
-  QOptionPropValue,
-  NewOption,
-  QSelectInstance,
-  QSelectProps,
-  QSelectProvider,
-  QSelectState,
-  QSelectDropdownInstance,
-  QSelectDropdownProps,
-  QSelectTagsInstance
-};

From 43d786cbb30abea20d7ae012335bcf1e42419755 Mon Sep 17 00:00:00 2001
From: shamilfrontend <shoma.alisultanov@yandex.ru>
Date: Mon, 30 May 2022 09:42:34 +0300
Subject: [PATCH 4/6] fix: by comments

---
 .../src/components/QSelectDropdown/index.vue  | 60 ++++---------------
 .../src/components/QSelectDropdown/types.ts   |  6 +-
 .../src/components/QSelectTags/types.ts       |  6 +-
 src/qComponents/QSelect/src/types.ts          | 20 -------
 4 files changed, 19 insertions(+), 73 deletions(-)

diff --git a/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue b/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
index c965e1a2..8e363bc9 100644
--- a/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
+++ b/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
@@ -64,7 +64,8 @@
 
 <script lang="ts">
 import { get, isPlainObject } from 'lodash-es';
-import { computed, defineComponent, inject, ref, watch } from 'vue';
+import { defineComponent, computed, inject, ref, watch } from 'vue';
+import type { CSSProperties } from 'vue';
 
 import { getConfig } from '@/qComponents/config';
 import { QCheckbox } from '@/qComponents/QCheckbox';
@@ -92,50 +93,15 @@ export default defineComponent({
   },
 
   props: {
-    shown: {
-      type: Boolean,
-      required: true
-    },
-
-    selectAllShown: {
-      type: Boolean,
-      required: true
-    },
-
-    selectAllText: {
-      type: String,
-      required: true
-    },
-
-    showEmptyContent: {
-      type: Boolean,
-      required: true
-    },
-
-    emptyText: {
-      type: String,
-      required: true
-    },
-
-    isCanLoadMoreShown: {
-      type: Boolean,
-      required: true
-    },
-
-    loadMoreText: {
-      type: String,
-      required: true
-    },
-
-    isNewOptionShown: {
-      type: Boolean,
-      required: true
-    },
-
-    width: {
-      type: Number,
-      default: null
-    }
+    shown: { type: Boolean, required: true },
+    selectAllShown: { type: Boolean, required: true },
+    selectAllText: { type: String, required: true },
+    showEmptyContent: { type: Boolean, required: true },
+    emptyText: { type: String, required: true },
+    isCanLoadMoreShown: { type: Boolean, required: true },
+    loadMoreText: { type: String, required: true },
+    isNewOptionShown: { type: Boolean, required: true },
+    width: { type: Number, default: null }
   },
 
   emits: ['select-all'],
@@ -148,9 +114,9 @@ export default defineComponent({
     const multiple = qSelect.multiple ?? ref(false);
     const zIndex = ref<number>(DEFAULT_Z_INDEX);
 
-    const styles = computed<Record<string, Nullable<string | number>>>(() => ({
+    const styles = computed<CSSProperties>(() => ({
       zIndex: zIndex.value,
-      width: props.width ? `${props.width}px` : null
+      width: props.width ? `${props.width}px` : undefined
     }));
 
     const isVisibleOptionExist = computed<boolean>(() =>
diff --git a/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts b/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
index 93af8cf0..312c9dd4 100644
--- a/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
+++ b/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
@@ -1,4 +1,4 @@
-import type { ComputedRef, Ref } from 'vue';
+import type { ComputedRef, Ref, CSSProperties } from 'vue';
 
 import type { QScrollbarInstance } from '@/qComponents/QScrollbar';
 import type { QSelectState } from '@/qComponents/QSelect';
@@ -19,14 +19,14 @@ export interface QSelectDropdownProps {
 
 export interface QSelectDropdownInstance {
   zIndex: Ref<number>;
-  styles: ComputedRef<Record<string, Nullable<string | number>>>;
+  styles: ComputedRef<CSSProperties>;
   isVisibleOptionExist: ComputedRef<boolean>;
   areAllSelected: ComputedRef<boolean>;
   isIndeterminate: ComputedRef<boolean>;
   navigateDropdown: (e: KeyboardEvent) => void;
   handleSelectAllClick: () => void;
   root: Ref<Nullable<HTMLDivElement>>;
-  multiple: Ref<Nullable<boolean>> | boolean;
+  multiple: Ref<Nullable<boolean>>;
   scrollbar: Ref<UnwrappedInstance<QScrollbarInstance>>;
   qSelectState: Partial<Nullable<QSelectState>>;
 }
diff --git a/src/qComponents/QSelect/src/components/QSelectTags/types.ts b/src/qComponents/QSelect/src/components/QSelectTags/types.ts
index 7e370ecf..598c8cce 100644
--- a/src/qComponents/QSelect/src/components/QSelectTags/types.ts
+++ b/src/qComponents/QSelect/src/components/QSelectTags/types.ts
@@ -7,9 +7,9 @@ import type { Nullable, Optional } from '#/helpers';
 import type { NewOption, QSelectState } from '../../types';
 
 export interface QSelectTagsInstance {
-  filterable: Ref<Nullable<boolean> | boolean>;
-  collapseTags: Ref<Nullable<boolean> | boolean>;
-  isDisabled: Ref<Nullable<boolean> | boolean>;
+  filterable: Ref<Nullable<boolean>>;
+  collapseTags: Ref<Nullable<boolean>>;
+  isDisabled: Ref<Nullable<boolean>>;
   autocomplete: Ref<Nullable<string>>;
   selected: Ref<Optional<QSelectState['selected']>>;
   query: Ref<Optional<string>>;
diff --git a/src/qComponents/QSelect/src/types.ts b/src/qComponents/QSelect/src/types.ts
index 149aed30..cc9aa145 100644
--- a/src/qComponents/QSelect/src/types.ts
+++ b/src/qComponents/QSelect/src/types.ts
@@ -12,45 +12,25 @@ import type { QSelectTagsInstance } from './components/QSelectTags/types';
 export type QSelectPropModelValue = Nullable<
   string | number | QOptionPropValue | (string | number | QOptionPropValue)[]
 >;
-
 export type QSelectPropAutocomplete = Nullable<'on' | 'off'>;
-
 export type QSelectPropCanLoadMore = Nullable<boolean>;
-
 export type QSelectPropDisabled = Nullable<boolean>;
-
 export type QSelectPropClearable = Nullable<boolean>;
-
 export type QSelectPropFilterable = Nullable<boolean>;
-
 export type QSelectPropAllowCreate = Nullable<boolean>;
-
 export type QSelectPropLoading = Nullable<boolean>;
-
 export type QSelectPropRemote = Nullable<boolean>;
-
 export type QSelectPropLoadingText = Nullable<string>;
-
 export type QSelectPropLoadMoreText = Nullable<string>;
-
 export type QSelectPropNoMatchText = Nullable<string>;
-
 export type QSelectPropNoDataText = Nullable<string>;
-
 export type QSelectPropMultiple = Nullable<boolean>;
-
 export type QSelectPropMultipleLimit = Nullable<number>;
-
 export type QSelectPropPlaceholder = Nullable<string>;
-
 export type QSelectPropSelectAllShown = Nullable<boolean>;
-
 export type QSelectPropSelectAllText = Nullable<string>;
-
 export type QSelectPropValueKey = Nullable<string>;
-
 export type QSelectPropCollapseTags = Nullable<boolean>;
-
 export type QSelectPropTeleportTo = Nullable<string | HTMLElement>;
 
 export interface QSelectProps {

From bb88049bb8b67c8645f14a7ea6799dc6dfb2d2a6 Mon Sep 17 00:00:00 2001
From: shamilfrontend <shoma.alisultanov@yandex.ru>
Date: Tue, 31 May 2022 11:07:06 +0300
Subject: [PATCH 5/6] fix: types

---
 src/qComponents/QOption/src/QOption.vue | 34 +++++++++++---------
 src/qComponents/QOption/src/types.ts    | 42 ++++++++++++++-----------
 src/qComponents/QSelect/src/QSelect.vue |  2 +-
 src/qComponents/QSelect/src/types.ts    |  8 ++---
 4 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/qComponents/QOption/src/QOption.vue b/src/qComponents/QOption/src/QOption.vue
index ceed71ab..b919605e 100644
--- a/src/qComponents/QOption/src/QOption.vue
+++ b/src/qComponents/QOption/src/QOption.vue
@@ -3,12 +3,8 @@
     v-show="isVisible"
     ref="root"
     class="q-option"
-    :class="{
-      'q-option_selected': isSelected,
-      'q-option_disabled': isDisabled,
-      'q-option_with-checkbox': multiple
-    }"
-    :tabindex="isDisabled ? null : '-1'"
+    :class="qOptionClasses"
+    :tabindex="isDisabled ? undefined : '-1'"
     @mouseenter="handleMouseEnter"
     @click.stop="handleOptionClick"
   >
@@ -38,23 +34,26 @@ import {
   defineComponent,
   inject,
   onBeforeUnmount,
-  PropType,
   ref,
   reactive,
   toRefs,
   onMounted
 } from 'vue';
+import type { PropType } from 'vue';
 
 import { QCheckbox } from '@/qComponents/QCheckbox';
 import type { QSelectProvider } from '@/qComponents/QSelect';
 
-import type { Nullable } from '#/helpers';
+import type { Nullable, ClassValue } from '#/helpers';
 
 import type {
   QOptionPropValue,
-  QOptionInstance,
+  QOptionPropLabel,
+  QOptionPropCreated,
+  QOptionPropDisabled,
   QOptionProps,
-  QOptionModel
+  QOptionModel,
+  QOptionInstance
 } from './types';
 
 export default defineComponent({
@@ -69,15 +68,15 @@ export default defineComponent({
       required: true
     },
     label: {
-      type: [String, Number],
+      type: [String, Number] as PropType<QOptionPropLabel>,
       default: null
     },
     created: {
-      type: Boolean,
+      type: Boolean as PropType<QOptionPropCreated>,
       default: false
     },
     disabled: {
-      type: Boolean,
+      type: Boolean as PropType<QOptionPropDisabled>,
       default: false
     }
   },
@@ -168,6 +167,12 @@ export default defineComponent({
       }
     };
 
+    const qOptionClasses = computed<ClassValue>(() => ({
+      'q-option_selected': isSelected.value,
+      'q-option_disabled': isDisabled.value,
+      'q-option_with-checkbox': multiple
+    }));
+
     onBeforeUnmount(() => {
       qSelect?.removeOption(self);
     });
@@ -185,7 +190,8 @@ export default defineComponent({
       handleMouseEnter,
       handleOptionClick,
       multiple,
-      root
+      root,
+      qOptionClasses
     };
   }
 });
diff --git a/src/qComponents/QOption/src/types.ts b/src/qComponents/QOption/src/types.ts
index 497d7e12..a53c4a95 100644
--- a/src/qComponents/QOption/src/types.ts
+++ b/src/qComponents/QOption/src/types.ts
@@ -1,26 +1,19 @@
 import type { Ref, ComputedRef } from 'vue';
 
-import type { Nullable } from '#/helpers';
+import type { Nullable, Nillable, ClassValue } from '#/helpers';
 
-export type QOptionPropValue = string | number | Record<string, unknown>;
-
-export interface QOptionInstance {
-  multiple: boolean;
-  preparedLabel: ComputedRef<string>;
-  isVisible: ComputedRef<Nullable<boolean>>;
-  isSelected: ComputedRef<boolean>;
-  isLimitReached: ComputedRef<boolean>;
-  isDisabled: ComputedRef<boolean>;
-  handleMouseEnter: () => void;
-  handleOptionClick: () => void;
-  root: Ref<Nullable<HTMLElement>>;
-}
+export type QOptionPropValue = Nillable<
+  string | number | Record<string, unknown>
+>;
+export type QOptionPropLabel = Nillable<string | number>;
+export type QOptionPropCreated = Nullable<boolean>;
+export type QOptionPropDisabled = Nullable<boolean>;
 
 export interface QOptionProps {
-  value: Nullable<QOptionPropValue>;
-  label: Nullable<string | number>;
-  created: Nullable<boolean>;
-  disabled: Nullable<boolean>;
+  value: QOptionPropValue;
+  label: QOptionPropLabel;
+  created: QOptionPropCreated;
+  disabled: QOptionPropDisabled;
 }
 
 export interface QOptionModel extends QOptionProps {
@@ -32,3 +25,16 @@ export interface QOptionModel extends QOptionProps {
   key: string | number;
   root: Nullable<HTMLElement>;
 }
+
+export interface QOptionInstance {
+  multiple: boolean;
+  preparedLabel: ComputedRef<string>;
+  isVisible: ComputedRef<Nullable<boolean>>;
+  isSelected: ComputedRef<boolean>;
+  isLimitReached: ComputedRef<boolean>;
+  isDisabled: ComputedRef<boolean>;
+  handleMouseEnter: () => void;
+  handleOptionClick: () => void;
+  root: Ref<Nullable<HTMLElement>>;
+  qOptionClasses: ComputedRef<ClassValue>;
+}
diff --git a/src/qComponents/QSelect/src/QSelect.vue b/src/qComponents/QSelect/src/QSelect.vue
index 7182ae39..cc97d158 100644
--- a/src/qComponents/QSelect/src/QSelect.vue
+++ b/src/qComponents/QSelect/src/QSelect.vue
@@ -63,7 +63,7 @@
           ref="dropdown"
           :shown="state.isDropdownShown"
           :width="state.inputWidth"
-          :select-all-shown="selectAllShown"
+          :select-all-shown="Boolean(selectAllShown)"
           :select-all-text="selectAllText || t('QSelect.selectAll')"
           :show-empty-content="showEmptyContent"
           :empty-text="emptyText"
diff --git a/src/qComponents/QSelect/src/types.ts b/src/qComponents/QSelect/src/types.ts
index cc9aa145..4b10b317 100644
--- a/src/qComponents/QSelect/src/types.ts
+++ b/src/qComponents/QSelect/src/types.ts
@@ -6,8 +6,8 @@ import type { QOptionModel, QOptionPropValue } from '@/qComponents/QOption';
 
 import type { Nullable, UnwrappedInstance } from '#/helpers';
 
-import type { QSelectDropdownInstance } from './components/QSelectDropdown/types';
-import type { QSelectTagsInstance } from './components/QSelectTags/types';
+import type { QSelectDropdownInstance } from './components/QSelectDropdown';
+import type { QSelectTagsInstance } from './components/QSelectTags';
 
 export type QSelectPropModelValue = Nullable<
   string | number | QOptionPropValue | (string | number | QOptionPropValue)[]
@@ -71,14 +71,14 @@ export interface QSelectInstance {
   state: QSelectState;
   preparedPlaceholder: ComputedRef<Nullable<string>>;
   visibleOptionsCount: ComputedRef<number>;
-  isCanLoadMoreShown: ComputedRef<Nullable<boolean>>;
+  isCanLoadMoreShown: ComputedRef<boolean>;
   showEmptyContent: ComputedRef<boolean>;
   isReadonly: ComputedRef<Nullable<boolean>>;
   isDisabled: ComputedRef<boolean>;
   isClearBtnShown: ComputedRef<Nullable<boolean>>;
   iconClass: ComputedRef<string>;
   emptyText: ComputedRef<string>;
-  isNewOptionShown: ComputedRef<Nullable<boolean>>;
+  isNewOptionShown: ComputedRef<boolean>;
   popperInit: () => void;
   showPopper: () => void;
   hidePopper: () => void;

From e4dff2688a839c27129609a6101e2c3202b8d830 Mon Sep 17 00:00:00 2001
From: shamilfrontend <shoma.alisultanov@yandex.ru>
Date: Tue, 31 May 2022 11:53:11 +0300
Subject: [PATCH 6/6] fix: types

---
 .../QSelect/src/components/QSelectDropdown/index.vue          | 4 ++--
 .../QSelect/src/components/QSelectDropdown/types.ts           | 4 ++--
 src/qComponents/QSelect/src/components/QSelectTags/index.vue  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue b/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
index 8e363bc9..a6183991 100644
--- a/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
+++ b/src/qComponents/QSelect/src/components/QSelectDropdown/index.vue
@@ -65,7 +65,7 @@
 <script lang="ts">
 import { get, isPlainObject } from 'lodash-es';
 import { defineComponent, computed, inject, ref, watch } from 'vue';
-import type { CSSProperties } from 'vue';
+import type { StyleValue } from 'vue';
 
 import { getConfig } from '@/qComponents/config';
 import { QCheckbox } from '@/qComponents/QCheckbox';
@@ -114,7 +114,7 @@ export default defineComponent({
     const multiple = qSelect.multiple ?? ref(false);
     const zIndex = ref<number>(DEFAULT_Z_INDEX);
 
-    const styles = computed<CSSProperties>(() => ({
+    const styles = computed<StyleValue>(() => ({
       zIndex: zIndex.value,
       width: props.width ? `${props.width}px` : undefined
     }));
diff --git a/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts b/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
index 312c9dd4..fef23890 100644
--- a/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
+++ b/src/qComponents/QSelect/src/components/QSelectDropdown/types.ts
@@ -1,4 +1,4 @@
-import type { ComputedRef, Ref, CSSProperties } from 'vue';
+import type { ComputedRef, Ref, StyleValue } from 'vue';
 
 import type { QScrollbarInstance } from '@/qComponents/QScrollbar';
 import type { QSelectState } from '@/qComponents/QSelect';
@@ -19,7 +19,7 @@ export interface QSelectDropdownProps {
 
 export interface QSelectDropdownInstance {
   zIndex: Ref<number>;
-  styles: ComputedRef<CSSProperties>;
+  styles: ComputedRef<StyleValue>;
   isVisibleOptionExist: ComputedRef<boolean>;
   areAllSelected: ComputedRef<boolean>;
   isIndeterminate: ComputedRef<boolean>;
diff --git a/src/qComponents/QSelect/src/components/QSelectTags/index.vue b/src/qComponents/QSelect/src/components/QSelectTags/index.vue
index 84186ba7..f0084e82 100644
--- a/src/qComponents/QSelect/src/components/QSelectTags/index.vue
+++ b/src/qComponents/QSelect/src/components/QSelectTags/index.vue
@@ -71,7 +71,7 @@ export default defineComponent({
   setup(props, ctx): QSelectTagsInstance {
     const input = ref<Nullable<HTMLInputElement>>(null);
     const qSelect = inject<Nullable<QSelectProvider>>('qSelect', null);
-    const { selected = ref([]), query = ref('') } = toRefs(
+    const { selected = ref<QOptionModel[]>([]), query = ref('') } = toRefs(
       qSelect?.state ?? {}
     );