chore: modify useState file name,modify UseState type define

This commit is contained in:
aalizzwell 2022-10-12 14:36:09 +08:00
parent 1a474fdff7
commit 58cb4b1eca
5 changed files with 17 additions and 10 deletions

View File

@ -3,6 +3,7 @@ import FComboList from './src/combo-list.component';
export * from './src/types'; export * from './src/types';
export * from './src/combo-list.props'; export * from './src/combo-list.props';
export * from './src/composition';
export { FComboList }; export { FComboList };

View File

@ -2,19 +2,22 @@ import { defineComponent, ref, SetupContext } from 'vue';
import { comboListProps, ComboListProps } from './combo-list.props'; import { comboListProps, ComboListProps } from './combo-list.props';
import { ButtonEdit } from '../../button-edit'; import { ButtonEdit } from '../../button-edit';
import { ViewType } from './types'; import { ViewType } from './types';
import { useState } from './composition/state'; import { useState } from './composition/use-state';
export default defineComponent({ export default defineComponent({
name: 'FComboList', name: 'FComboList',
props: comboListProps, props: comboListProps,
emits: [], emits: [],
setup(props: ComboListProps, context: SetupContext) { setup(props: ComboListProps, context: SetupContext) {
//const modelValue = ref(props.modelValue); const modelValue = ref(props.modelValue);
// showPanel state // is panel visible
const [showPanel] = useState<boolean>(false); const [isPanelVisible] = useState<boolean>(false);
return () => { return () => {
return ( return (
<> <>
<ButtonEdit disable={props.disabled} readonly={props.readonly} /> {/** main component */}
{(!props.viewType || props.viewType === ViewType.Text) && (
<ButtonEdit disable={props.disabled} readonly={props.readonly} />
)}
{/** tag area */} {/** tag area */}
{props.viewType === ViewType.Tag && ( {props.viewType === ViewType.Tag && (
<div class="f-cmp-inputgroup"> <div class="f-cmp-inputgroup">
@ -41,7 +44,7 @@ export default defineComponent({
</div> </div>
)} )}
{/** panel area */} {/** panel area */}
{showPanel.value && ( {isPanelVisible.value && (
<div class="comboPanel f-area-hide" style="z-index: 99999"></div> <div class="comboPanel f-area-hide" style="z-index: 99999"></div>
)} )}
</> </>

View File

@ -0,0 +1,2 @@
export * from './types';
export * from './use-state';

View File

@ -1,6 +1,7 @@
import { DeepReadonly, Ref, UnwrapRef } from "vue"; import { Ref, UnwrapRef } from "vue";
/** /**
* UseState type * UseState type
* @description vue类型系统限制state只读
*/ */
export type UseState<T> = [Readonly<Ref<DeepReadonly<UnwrapRef<T>>>>, (state: UnwrapRef<T>) => void]; export type UseState<T> = [Readonly<Ref<UnwrapRef<T>>>, (state: UnwrapRef<T>) => void];

View File

@ -1,4 +1,4 @@
import { ref, readonly, UnwrapRef } from 'vue'; import { ref } from 'vue';
import { UseState } from './types'; import { UseState } from './types';
/** /**
@ -14,5 +14,5 @@ export function useState<T = any>(initial: T): UseState<T> {
const action = (value: any) => { const action = (value: any) => {
state.value = value; state.value = value;
}; };
return [readonly(state), action]; return [state, action];
} }