fix(QSelect): types (#296)

altai-ui · Jun 20, 2022 · 0f8318b · 0f8318b
1 parent da85128
commit 0f8318b
Show file tree

Hide file tree

Showing 14 changed files with 326 additions and 155 deletions.
diff --git 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
@@ -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/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';