[Perf]: component typings & fix select component multiple mode style …

…err (#233) * fix(component): type deduction * chore(hooks): update hooks version
fect-org · May 29, 2022 · 6577fc4 · 6577fc4
1 parent f1fca03
commit 6577fc4
Show file tree

Hide file tree

Showing 36 changed files with 111 additions and 82 deletions.
diff --git a/packages/vue-hooks/package.json b/packages/vue-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fect-ui/vue-hooks",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Minimalist Vue Compostion Hooks",
   "author": "XeryYue",
   "main": "lib/index.js",

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -41,7 +41,7 @@
   ],
   "dependencies": {
     "@fect-ui/themes": "^2.2.0",
-    "@fect-ui/vue-hooks": "^1.2.1",
+    "@fect-ui/vue-hooks": "^1.3.0",
     "proy": "^0.0.3",
     "@popperjs/core": "^2.11.2"
   },

diff --git a/packages/vue/src/avatar-group/avatar-context.ts b/packages/vue/src/avatar-group/avatar-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { AvatarContext } from './interface'
 
-export const READONLY_AVATAR_KEY = Symbol('avatarKey')
+export const READONLY_AVATAR_KEY: InjectionKey<AvatarContext> = Symbol('avatarKey')
 
 export const createAvatarContext = () => createProvider(READONLY_AVATAR_KEY)
 
-export const useAvatarContext = () => useProvider<AvatarContext>(READONLY_AVATAR_KEY)
+export const useAvatarContext = () => useProvider(READONLY_AVATAR_KEY)
diff --git a/packages/vue/src/badge-anchor/badge-context.ts b/packages/vue/src/badge-anchor/badge-context.ts
@@ -1,8 +1,9 @@
+import type { InjectionKey } from 'vue'
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
 import type { TransformStyles } from './interface'
 
-const READONLY_BADGE_ANCHOR_KEY = Symbol('badgeAnchorKey')
+const READONLY_BADGE_ANCHOR_KEY: InjectionKey<TransformStyles> = Symbol('badgeAnchorKey')
 
 export const createBadgeContext = () => createProvider(READONLY_BADGE_ANCHOR_KEY)
 
-export const useBadgeContext = () => useProvider<TransformStyles>(READONLY_BADGE_ANCHOR_KEY)
+export const useBadgeContext = () => useProvider(READONLY_BADGE_ANCHOR_KEY)
diff --git a/packages/vue/src/breadcrumbs/breadcrumbs-context.ts b/packages/vue/src/breadcrumbs/breadcrumbs-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { BreadcrumbsContext } from './interface'
 
-const READONLY_BREADCRUMBS_KEY = Symbol('breadcrumbsKey')
+const READONLY_BREADCRUMBS_KEY: InjectionKey<BreadcrumbsContext> = Symbol('breadcrumbsKey')
 
 export const createBreadcrumbsContext = () => createProvider(READONLY_BREADCRUMBS_KEY)
 
-export const useBreadcrumbsContext = () => useProvider<BreadcrumbsContext>(READONLY_BREADCRUMBS_KEY)
+export const useBreadcrumbsContext = () => useProvider(READONLY_BREADCRUMBS_KEY)
diff --git a/packages/vue/src/button-group/button-group-context.ts b/packages/vue/src/button-group/button-group-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { ButtonGroupContext } from './interface'
 
-const READONLY_BUTTON_GROUP_KEY = Symbol('buttonGroupKey')
+const READONLY_BUTTON_GROUP_KEY: InjectionKey<ButtonGroupContext> = Symbol('buttonGroupKey')
 
 export const createButtonGroupContext = () => createProvider(READONLY_BUTTON_GROUP_KEY)
 
-export const useButtonGroupContext = () => useProvider<ButtonGroupContext>(READONLY_BUTTON_GROUP_KEY)
+export const useButtonGroupContext = () => useProvider(READONLY_BUTTON_GROUP_KEY)
diff --git a/packages/vue/src/button/__tests__/__snapshots__/index.spec.tsx.snap b/packages/vue/src/button/__tests__/__snapshots__/index.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`Button button have icon only 1`] = `
 <div class="container"><button class="fect-button fect-button--default fect-button--medium" style="--button-hover-bg: var(--button-default-color); --button-hover-border: var(--primary-foreground); --button-hover-color: var(--primary-foreground);" type="button">
     <!---->
     <!---->
-    <div class="fect-button__icon" style="left: 50%; transform: translate(-50%, -50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+    <div class="fect-button__icon" style="left: 50%; transform: translate(-50%, -50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
         <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
       </svg></div>
     <!---->
@@ -67,7 +67,7 @@ exports[`Button should be support icon 1`] = `
 <div class="container"><button class="fect-button fect-button--default fect-button--medium" style="--button-hover-bg: var(--button-default-color); --button-hover-border: var(--primary-foreground); --button-hover-color: var(--primary-foreground);" type="button">
     <!---->
     <!---->
-    <div class="fect-button__icon" style="left: 15%; transform: translateY(-50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+    <div class="fect-button__icon" style="left: 15%; transform: translateY(-50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
         <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
       </svg></div>
     <div class="fect-button__text"> Button </div>

diff --git a/packages/vue/src/checkbox-group/checkbox-context.ts b/packages/vue/src/checkbox-group/checkbox-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { CheckboxContext } from './interface'
 
-export const READONLY_CHECKBOX_KEY = Symbol('checkboxKey')
+export const READONLY_CHECKBOX_KEY: InjectionKey<CheckboxContext> = Symbol('checkboxKey')
 
 export const createCheckboxContext = () => createProvider(READONLY_CHECKBOX_KEY)
 
-export const useCheckboxContext = () => useProvider<CheckboxContext>(READONLY_CHECKBOX_KEY)
+export const useCheckboxContext = () => useProvider(READONLY_CHECKBOX_KEY)
diff --git a/packages/vue/src/checkbox-group/interface.ts b/packages/vue/src/checkbox-group/interface.ts
@@ -1,5 +1,5 @@
 import { checkboxGroupProps } from './props'
-import type { Ref, ExtractPropTypes } from 'vue'
+import type { Ref, ExtractPropTypes, DeepReadonly } from 'vue'
 
 interface CheckboxEeventTarget {
   checked?: boolean
@@ -15,7 +15,7 @@ export interface CheckboxEvent {
 
 export interface CheckboxContext {
   props: ExtractPropTypes<typeof checkboxGroupProps>
-  parentValue: Ref<string[]>
+  parentValue: DeepReadonly<Ref<string[]>>
   updateCheckboxGroupValue: (val: string) => void
   updateCheckboxGroupEvent: (e: CheckboxEvent) => void
 }
diff --git a/packages/vue/src/collapse-group/collapse-context.ts b/packages/vue/src/collapse-group/collapse-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { CollapseContext } from './interface'
 
-export const READONLY_COLLAPSE_KEY = Symbol('collapseKey')
+export const READONLY_COLLAPSE_KEY: InjectionKey<CollapseContext> = Symbol('collapseKey')
 
 export const createCollapseContext = () => createProvider(READONLY_COLLAPSE_KEY)
 
-export const useCollapseContext = () => useProvider<CollapseContext>(READONLY_COLLAPSE_KEY)
+export const useCollapseContext = () => useProvider(READONLY_COLLAPSE_KEY)
diff --git a/packages/vue/src/collapse-group/interface.ts b/packages/vue/src/collapse-group/interface.ts
@@ -1,6 +1,6 @@
-import type { Ref } from 'vue'
+import type { DeepReadonly, Ref } from 'vue'
 
 export interface CollapseContext {
-  checked: Ref<number[]>
+  checked: DeepReadonly<Ref<number[]>>
   updateCollapseGroupChecked(childIdx: number): void
 }
diff --git a/packages/vue/src/form-item/form-item.tsx b/packages/vue/src/form-item/form-item.tsx
@@ -87,7 +87,8 @@ export default defineComponent({
       const { prop } = props
       if (!prop) {
         if (process.env.NODE_ENV !== 'production') {
-          return console.error(`[Fect] <FormItem> prop is required for validate`)
+          console.error(`[Fect] <FormItem> prop is required for validate`)
+          return
         }
       }
       const { model } = context!.props

diff --git a/packages/vue/src/form/form-context.ts b/packages/vue/src/form/form-context.ts
@@ -1,19 +1,19 @@
-import { inject } from 'vue'
+import { inject, InjectionKey } from 'vue'
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
 import { pickContextProps } from '../utils'
 import type { FormContext, FormItemCotnext, FormItemInstance } from './interface'
 
-const READONLY_FORM_KEY = Symbol('formKey')
+const READONLY_FORM_KEY: InjectionKey<FormContext> = Symbol('formKey')
 
-const READONLY_FORM_ITEM_KEY = Symbol('formItemKey')
+const READONLY_FORM_ITEM_KEY: InjectionKey<FormItemCotnext> = Symbol('formItemKey')
 
-export const createFormContext = () => createProvider<FormItemInstance>(READONLY_FORM_KEY)
+export const createFormContext = () => createProvider<FormItemInstance, FormContext>(READONLY_FORM_KEY)
 
-export const useFormContext = () => useProvider<FormContext>(READONLY_FORM_KEY)
+export const useFormContext = () => useProvider(READONLY_FORM_KEY)
 
 export const createFormItemContext = () => createProvider(READONLY_FORM_ITEM_KEY)
 
-export const useFormItemCotnext = () => useProvider<FormItemCotnext>(READONLY_FORM_ITEM_KEY)
+export const useFormItemCotnext = () => useProvider(READONLY_FORM_ITEM_KEY)
 
 export const useFormStateContext = (): Pick<FormItemCotnext, 'behavior' | 'validate'> | undefined => {
   const parentState = inject<FormItemCotnext | null>(READONLY_FORM_ITEM_KEY, null)

diff --git a/packages/vue/src/form/form.tsx b/packages/vue/src/form/form.tsx
@@ -3,7 +3,7 @@ import { useExpose } from '@fect-ui/vue-hooks'
 import { props } from './props'
 import { createName, createBem, isPlainObject, len, isArray } from '../utils'
 import { createFormContext } from './form-context'
-import type { PromisfyValidate, ValidateCallback } from './interface'
+import type { PromisfyValidate, ValidateCallback, ValidateResult } from './interface'
 import './index.less'
 import { Apollo } from './apollo'
 
@@ -49,7 +49,7 @@ export default defineComponent({
     const validateField = (fields: string | string[], callback?: ValidateCallback) => {
       fields = isArray(fields) ? fields : [fields]
       const fds = children.filter((_) => fields.includes(_.prop))
-      const result = fds.map((fd) => fd.validate('', callback))
+      const result = fds.map((fd) => fd.validate('', callback)) as ValidateResult[]
       if (!len(result) && callback) return callback(true, {})
       result.forEach(({ state, errs }) => {
         callback && callback(state, errs)

diff --git a/packages/vue/src/form/interface.ts b/packages/vue/src/form/interface.ts
@@ -16,13 +16,22 @@ export interface FormContext {
   props: FormProps
 }
 
-export type FormItemInstance = ComponentInstance<Omit<FormItemCotnext, 'behavior'> & FormItemProps>
+export type FormItemInstance = ComponentInstance<
+  Omit<FormItemCotnext, 'behavior'> &
+    FormItemProps & {
+      updateShowLogState: (state: boolean) => void
+      clearValidate: () => void
+    }
+>
+
+export interface ValidateResult {
+  state: boolean
+  errs: ValidateErrorParams
+}
 
 export interface FormItemCotnext {
   behavior: ComputedRef<Pick<FormProps, 'disabled' | 'size'>>
-  validate: (trigger: Trigger, callback?: ValidateCallback) => { state: boolean; errs: ValidateErrorParams }
-  updateShowLogState: (state: boolean) => void
-  clearValidate: () => void
+  validate: (trigger: Trigger, callback?: ValidateCallback) => ValidateResult | void
 }
 
 export type FormInstance = ComponentInstance<{

diff --git a/packages/vue/src/grid-group/grid-context.ts b/packages/vue/src/grid-group/grid-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import { InjectionKey } from 'vue'
 import type { GridGroupContext } from './interface'
 
-const READONLY_GRID_KEY = Symbol('grdiKey')
+const READONLY_GRID_KEY: InjectionKey<GridGroupContext> = Symbol('grdiKey')
 
 export const createGridContext = () => createProvider(READONLY_GRID_KEY)
 
-export const useGridContext = () => useProvider<GridGroupContext>(READONLY_GRID_KEY)
+export const useGridContext = () => useProvider(READONLY_GRID_KEY)
diff --git a/packages/vue/src/input/__tests__/__snapshots__/index.spec.ts.snap b/packages/vue/src/input/__tests__/__snapshots__/index.spec.ts.snap
@@ -58,11 +58,11 @@ exports[`Input should support render prefix and suffix icon 1`] = `
     <div class="fect-input__container">
       <!---->
       <div class="fect-input__wrapper">
-        <div class="fect-input__icon fect-input__icon--prefix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+        <div class="fect-input__icon fect-input__icon--prefix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
             <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
           </svg></div><input type="text" class="">
         <!---->
-        <div class="fect-input__icon fect-input__icon--suffix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+        <div class="fect-input__icon fect-input__icon--suffix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
             <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
           </svg></div>
       </div>

diff --git a/packages/vue/src/modal/modal-context.ts b/packages/vue/src/modal/modal-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { ModalContext } from './interface'
 
-export const READONLY_MODAL_KEY = Symbol('modalKey')
+export const READONLY_MODAL_KEY: InjectionKey<ModalContext> = Symbol('modalKey')
 
 export const createModalContext = () => createProvider(READONLY_MODAL_KEY)
 
-export const useModalContext = () => useProvider<ModalContext>(READONLY_MODAL_KEY)
+export const useModalContext = () => useProvider(READONLY_MODAL_KEY)
diff --git a/packages/vue/src/pagination/pagination-context.ts b/packages/vue/src/pagination/pagination-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import { InjectionKey } from 'vue'
 import type { PaginationContext } from './interface'
 
-const READONLY_PAGINATION_KEY = Symbol('paginationKey')
+const READONLY_PAGINATION_KEY: InjectionKey<PaginationContext> = Symbol('paginationKey')
 
 export const createPaginationContext = () => createProvider(READONLY_PAGINATION_KEY)
 
-export const usePaginationContext = () => useProvider<PaginationContext>(READONLY_PAGINATION_KEY)
+export const usePaginationContext = () => useProvider(READONLY_PAGINATION_KEY)
diff --git a/packages/vue/src/radio-group/interface.ts b/packages/vue/src/radio-group/interface.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { DeepReadonly, Ref } from 'vue'
 import type { NormalSizes } from '../utils'
 
 export type Parent = number | string
@@ -23,6 +23,6 @@ export interface RadioGroupContext {
     size: NormalSizes
   }
   updateRadioGroupChangeEvent: (val: RadioEvent) => void
-  parentValue: Ref<Parent>
+  parentValue: DeepReadonly<Ref<Parent>>
   updateRadioGroupValue: (val: Parent) => void
 }
diff --git a/packages/vue/src/radio-group/radio-context.ts b/packages/vue/src/radio-group/radio-context.ts
@@ -1,9 +1,10 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 
 import type { RadioGroupContext } from './interface'
 
-export const READNONLY_RADIO_KEY = Symbol('radioKey')
+export const READNONLY_RADIO_KEY: InjectionKey<RadioGroupContext> = Symbol('radioKey')
 
 export const createRadioContext = () => createProvider(READNONLY_RADIO_KEY)
 
-export const useRadioContext = () => useProvider<RadioGroupContext>(READNONLY_RADIO_KEY)
+export const useRadioContext = () => useProvider(READNONLY_RADIO_KEY)