fix(QSelect): types

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';

src/qComponents/QSelect/src/QSelect.vue

@@ -124,21 +124,42 @@ 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,
-  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
+  QSelectState
 } 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
     }
   },

src/qComponents/QSelect/src/components/QSelectDropdown/index.ts

@@ -0,0 +1,5 @@
+import QSelectDropdown from './index.vue';
+
+export default QSelectDropdown;
+
+export type { QSelectDropdownProps, QSelectDropdownInstance } from './types';

src/qComponents/QSelect/src/QSelectDropdown.vue → src/qComponents/QSelect/src/components/QSelectDropdown/index.vue

@@ -82,6 +82,7 @@ const DEFAULT_Z_INDEX = 2000;
 
 export default defineComponent({
   name: 'QSelectDropdown',
+
   componentName: 'QSelectDropdown',
 
   components: {
@@ -91,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'],

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>>;
+}

src/qComponents/QSelect/src/components/QSelectTags/index.ts

@@ -0,0 +1,5 @@
+import QSelectTags from './index.vue';
+
+export default QSelectTags;
+
+export type { QSelectTagsInstance } from './types';