chore: modify useState file name,modify UseState type define
This commit is contained in:
parent
1a474fdff7
commit
58cb4b1eca
|
@ -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 };
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from './types';
|
||||||
|
export * from './use-state';
|
|
@ -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];
|
|
@ -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];
|
||||||
}
|
}
|
Loading…
Reference in New Issue