(component): 整理代码

This commit is contained in:
就眠儀式 2022-10-18 00:23:07 +08:00
parent e732e8ed17
commit d9116dc47e
21 changed files with 51 additions and 60 deletions

View File

@ -8,11 +8,11 @@ export default {
import { inject, Ref } from "vue"; import { inject, Ref } from "vue";
import { DropdownContext, dropdownInjectionKey } from "../dropdown/interface"; import { DropdownContext, dropdownInjectionKey } from "../dropdown/interface";
export interface LayDropdownMenuItemProps { export interface DropdownMenuItemProps {
disabled?: boolean; disabled?: boolean;
} }
const props = withDefaults(defineProps<LayDropdownMenuItemProps>(), { const props = withDefaults(defineProps<DropdownMenuItemProps>(), {
disabled: false, disabled: false,
}); });

View File

@ -14,14 +14,14 @@ import { DropdownPlacement } from "../dropdown/interface";
export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu"; export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
export interface LayDropdownSubMenuProps { export interface DropdownSubMenuProps {
trigger?: DropdownTrigger | DropdownTrigger[]; trigger?: DropdownTrigger | DropdownTrigger[];
placement?: DropdownPlacement; placement?: DropdownPlacement;
disabled?: boolean; disabled?: boolean;
contentOffset?: number; contentOffset?: number;
} }
const props = withDefaults(defineProps<LayDropdownSubMenuProps>(), { const props = withDefaults(defineProps<DropdownSubMenuProps>(), {
trigger: "hover", trigger: "hover",
disabled: false, disabled: false,
placement: "right-start", placement: "right-start",

View File

@ -8,12 +8,12 @@ export default {
import "./index.less"; import "./index.less";
import { useSlots, withDefaults } from "vue"; import { useSlots, withDefaults } from "vue";
export interface LayEmptyProps { export interface EmptyProps {
description?: string; description?: string;
image?: string; image?: string;
} }
const props = withDefaults(defineProps<LayEmptyProps>(), { const props = withDefaults(defineProps<EmptyProps>(), {
description: "暂无数据", description: "暂无数据",
}); });

View File

@ -7,7 +7,7 @@ export default {
import { useSlots } from "vue"; import { useSlots } from "vue";
import "./index.less"; import "./index.less";
export interface LayDropdownProps { export interface DropdownProps {
title?: string; title?: string;
status?: "401" | "403" | "404" | "500"; status?: "401" | "403" | "404" | "500";
describe?: string; describe?: string;
@ -15,8 +15,8 @@ export interface LayDropdownProps {
const slots = useSlots(); const slots = useSlots();
const props = withDefaults(defineProps<LayDropdownProps>(), { const props = withDefaults(defineProps<DropdownProps>(), {
title: "Exception", title: "exception",
describe: "describe", describe: "describe",
}); });
</script> </script>

View File

@ -8,12 +8,12 @@ export default {
import "./index.less"; import "./index.less";
import { useSlots } from "vue"; import { useSlots } from "vue";
export interface LayFieldProps { export interface FieldProps {
title?: string; title?: string;
} }
const slot = useSlots(); const slot = useSlots();
const props = defineProps<LayFieldProps>(); const props = defineProps<FieldProps>();
</script> </script>
<template> <template>

View File

@ -10,7 +10,7 @@ import { toRefs, provide, reactive, onMounted } from "vue";
import { Rule, ValidateError, ValidateMessages } from "async-validator"; import { Rule, ValidateError, ValidateMessages } from "async-validator";
import { LayFormItemContext, FormCallback, modelType } from "../../types/form"; import { LayFormItemContext, FormCallback, modelType } from "../../types/form";
export interface LayFormProps { export interface FormProps {
model?: modelType; model?: modelType;
required?: boolean; required?: boolean;
rules?: Rule; rules?: Rule;
@ -21,7 +21,7 @@ export interface LayFormProps {
useCN?: boolean; useCN?: boolean;
} }
const props = withDefaults(defineProps<LayFormProps>(), { const props = withDefaults(defineProps<FormProps>(), {
model: function () { model: function () {
return {}; return {};
}, },

View File

@ -28,7 +28,7 @@ import Schema, {
} from "async-validator"; } from "async-validator";
import cnValidateMessage from "./cnValidateMessage"; import cnValidateMessage from "./cnValidateMessage";
export interface LayFormItemProps { export interface FormItemProps {
prop?: string; prop?: string;
mode?: string; mode?: string;
label?: string; label?: string;
@ -40,7 +40,7 @@ export interface LayFormItemProps {
requiredErrorMessage?: string; requiredErrorMessage?: string;
} }
const props = withDefaults(defineProps<LayFormItemProps>(), { const props = withDefaults(defineProps<FormItemProps>(), {
mode: "block", mode: "block",
labelPosition: "right", labelPosition: "right",
labelWidth: 95, labelWidth: 95,

View File

@ -15,14 +15,14 @@ import {
} from "vue"; } from "vue";
import "./index.less"; import "./index.less";
export interface LayFullscreenProps { export interface FullscreenProps {
target?: HTMLElement; target?: HTMLElement;
immersive?: boolean; immersive?: boolean;
position?: string; position?: string;
zIndex?: string; zIndex?: string;
} }
const props = withDefaults(defineProps<LayFullscreenProps>(), { const props = withDefaults(defineProps<FullscreenProps>(), {
immersive: true, immersive: true,
}); });
@ -36,7 +36,7 @@ type MethodMap = [
"fullscreenerror" "fullscreenerror"
]; ];
const methodMap: MethodMap[] = [ const methodMap: any[] = [
[ [
"requestFullscreen", "requestFullscreen",
"exitFullscreen", "exitFullscreen",
@ -45,7 +45,6 @@ const methodMap: MethodMap[] = [
"fullscreenchange", "fullscreenchange",
"fullscreenerror", "fullscreenerror",
], ],
// New WebKit
[ [
"webkitRequestFullscreen", "webkitRequestFullscreen",
"webkitExitFullscreen", "webkitExitFullscreen",
@ -54,7 +53,6 @@ const methodMap: MethodMap[] = [
"webkitfullscreenchange", "webkitfullscreenchange",
"webkitfullscreenerror", "webkitfullscreenerror",
], ],
// Old WebKit
[ [
"webkitRequestFullScreen", "webkitRequestFullScreen",
"webkitCancelFullScreen", "webkitCancelFullScreen",

View File

@ -12,13 +12,13 @@ import LayDropdown from "../dropdown/index.vue";
import LayInput from "../input/index.vue"; import LayInput from "../input/index.vue";
import LayScroll from "../scroll/index.vue"; import LayScroll from "../scroll/index.vue";
export interface LayIconPickerProps { export interface IconPickerProps {
page?: boolean; page?: boolean;
modelValue?: string; modelValue?: string;
showSearch?: boolean; showSearch?: boolean;
} }
const props = withDefaults(defineProps<LayIconPickerProps>(), { const props = withDefaults(defineProps<IconPickerProps>(), {
modelValue: "layui-icon-face-smile", modelValue: "layui-icon-face-smile",
page: false, page: false,
}); });

View File

@ -12,7 +12,7 @@ import layButton from "../button/index.vue";
import { ref, watch, withDefaults, computed, Ref } from "vue"; import { ref, watch, withDefaults, computed, Ref } from "vue";
import { InputNumberSize } from "./interface"; import { InputNumberSize } from "./interface";
export interface LayInputNumberProps { export interface InputNumberProps {
modelValue?: number; modelValue?: number;
name?: string; name?: string;
disabled?: boolean; disabled?: boolean;
@ -24,7 +24,7 @@ export interface LayInputNumberProps {
size?: InputNumberSize; size?: InputNumberSize;
} }
const props = withDefaults(defineProps<LayInputNumberProps>(), { const props = withDefaults(defineProps<InputNumberProps>(), {
disabled: false, disabled: false,
disabledInput: false, disabledInput: false,
modelValue: 0, modelValue: 0,

View File

@ -10,13 +10,13 @@ import Header from "../header/index.vue";
import Footer from "../footer/index.vue"; import Footer from "../footer/index.vue";
import "./index.less"; import "./index.less";
export interface LayLayoutProps { export interface LayoutProps {
isVertical?: boolean; isVertical?: boolean;
} }
const slots = useSlots(); const slots = useSlots();
const props = withDefaults(defineProps<LayLayoutProps>(), { const props = withDefaults(defineProps<LayoutProps>(), {
isVertical: false, isVertical: false,
}); });

View File

@ -7,7 +7,7 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { computed, useSlots } from "vue"; import { computed, useSlots } from "vue";
import "./index.less"; import "./index.less";
export interface LayLineProps { export interface LineProps {
direction?: "horizontal" | "vertical"; direction?: "horizontal" | "vertical";
contentPosition?: "center" | "left" | "right"; contentPosition?: "center" | "left" | "right";
borderWidth?: string; borderWidth?: string;
@ -17,7 +17,7 @@ export interface LayLineProps {
margin?: string; margin?: string;
} }
const props = withDefaults(defineProps<LayLineProps>(), { const props = withDefaults(defineProps<LineProps>(), {
direction: "horizontal", direction: "horizontal",
contentPosition: "center", contentPosition: "center",
borderWidth: "1px", borderWidth: "1px",

View File

@ -9,7 +9,7 @@ import { computed, ComputedRef, provide, Ref, ref, watch } from "vue";
import { provideLevel } from "./useLevel"; import { provideLevel } from "./useLevel";
import "./index.less"; import "./index.less";
export interface LayMenuProps { export interface MenuProps {
selectedKey?: string; selectedKey?: string;
openKeys?: string[]; openKeys?: string[];
tree?: boolean; tree?: boolean;
@ -28,7 +28,7 @@ const emit = defineEmits([
"changeOpenKeys", "changeOpenKeys",
]); ]);
const props = withDefaults(defineProps<LayMenuProps>(), { const props = withDefaults(defineProps<MenuProps>(), {
selectedKey: "", selectedKey: "",
openKeys: () => [], openKeys: () => [],
tree: false, tree: false,
@ -70,14 +70,9 @@ const selectedKey = computed({
}, },
}); });
const indent = computed({ const indent = computed(() => {
get() { return props.indent;
return props.indent; })
},
set(val) {
// emit("update:indent", val);
},
});
watch( watch(
() => props.collapse, () => props.collapse,

View File

@ -11,13 +11,13 @@ import useLevel from "../menu/useLevel";
import { indentHandle } from "../menu/utils"; import { indentHandle } from "../menu/utils";
import LayTooltip from "../tooltip/index.vue"; import LayTooltip from "../tooltip/index.vue";
export interface LayMenuItemProps { export interface MenuItemProps {
id: string; id: string;
title?: string; title?: string;
} }
const slots = useSlots(); const slots = useSlots();
const props = defineProps<LayMenuItemProps>(); const props = defineProps<MenuItemProps>();
const { level } = useLevel(); const { level } = useLevel();
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>; const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const isTree = inject("isTree") as ComputedRef<boolean>; const isTree = inject("isTree") as ComputedRef<boolean>;

View File

@ -11,13 +11,13 @@ import SubMenuPopup from "./SubMenuPopup.vue";
import { indentHandle } from "../menu/utils"; import { indentHandle } from "../menu/utils";
import { provideLevel, default as useLevel } from "../menu/useLevel"; import { provideLevel, default as useLevel } from "../menu/useLevel";
export interface LaySubMenuProps { export interface SubMenuProps {
id: string; id: string;
title?: string; title?: string;
} }
const slots = useSlots(); const slots = useSlots();
const props = defineProps<LaySubMenuProps>(); const props = defineProps<SubMenuProps>();
const { level } = useLevel(); const { level } = useLevel();
const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>; const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
@ -45,7 +45,6 @@ watchEffect(() => {
const _isCollapse = const _isCollapse =
isCollapse.value === true || isCollapse.value === "true"; isCollapse.value === true || isCollapse.value === "true";
if (_isCollapse && level.value === 1) { if (_isCollapse && level.value === 1) {
//
setTimeout(() => { setTimeout(() => {
needPopup.value = isTree.value && _isCollapse; needPopup.value = isTree.value && _isCollapse;
}, 200); }, 200);

View File

@ -7,8 +7,9 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue"; import { computed } from "vue";
import "./index.less"; import "./index.less";
import { SwitchSize } from "./interface";
export interface LaySwitchProps { export interface SwitchProps {
name?: string; name?: string;
disabled?: boolean; disabled?: boolean;
modelValue?: string | number | boolean; modelValue?: string | number | boolean;
@ -18,12 +19,12 @@ export interface LaySwitchProps {
unswitchColor?: string; unswitchColor?: string;
onswitchValue?: string | number | boolean; onswitchValue?: string | number | boolean;
unswitchValue?: string | number | boolean; unswitchValue?: string | number | boolean;
size?: "lg" | "md" | "sm" | "xs"; size?: SwitchSize;
loadingIcon?: string; loadingIcon?: string;
loading?: boolean; loading?: boolean;
} }
const props = withDefaults(defineProps<LaySwitchProps>(), { const props = withDefaults(defineProps<SwitchProps>(), {
disabled: false, disabled: false,
onswitchValue: true, onswitchValue: true,
unswitchValue: false, unswitchValue: false,

View File

@ -0,0 +1 @@
export type SwitchSize = "lg" | "md" | "sm" | "xs";

View File

@ -29,15 +29,13 @@ import {
Fragment, Fragment,
} from "vue"; } from "vue";
import { useResizeObserver } from "@vueuse/core"; import { useResizeObserver } from "@vueuse/core";
import { TabData, TabInjectKey } from "./interface"; import { TabData, TabInjectKey, TabPosition } from "./interface";
export type tabPositionType = "top" | "bottom" | "left" | "right"; export interface TabProps {
export interface LayTabProps {
type?: string; type?: string;
modelValue: string; modelValue: string;
allowClose?: boolean; allowClose?: boolean;
tabPosition?: tabPositionType; tabPosition?: TabPosition;
beforeClose?: Function; beforeClose?: Function;
beforeLeave?: Function; beforeLeave?: Function;
activeBarTransition?: boolean; activeBarTransition?: boolean;
@ -58,7 +56,7 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
}); });
}; };
const props = withDefaults(defineProps<LayTabProps>(), { const props = withDefaults(defineProps<TabProps>(), {
tabPosition: "top", tabPosition: "top",
}); });

View File

@ -15,3 +15,5 @@ export interface TabsContext {
addItem: (id: string, data: TabData) => void; addItem: (id: string, data: TabData) => void;
removeItem: (id: string) => void; removeItem: (id: string) => void;
} }
export type TabPosition = "top" | "bottom" | "left" | "right";

View File

@ -8,24 +8,21 @@ export default {
import { import {
withDefaults, withDefaults,
inject, inject,
Ref,
useSlots, useSlots,
getCurrentInstance, getCurrentInstance,
computed,
reactive, reactive,
onBeforeUnmount, onBeforeUnmount,
toRefs,
} from "vue"; } from "vue";
import { TabInjectKey, TabsContext } from "../tab/interface"; import { TabInjectKey, TabsContext } from "../tab/interface";
export interface LayTabItemProps { export interface TabItemProps {
id: string; id: string;
title?: string | Function; title?: string | Function;
icon?: string | Function; icon?: string | Function;
closable?: boolean | string; closable?: boolean | string;
} }
const props = withDefaults(defineProps<LayTabItemProps>(), { const props = withDefaults(defineProps<TabItemProps>(), {
closable: true, closable: true,
}); });

View File

@ -25,7 +25,7 @@ import TableRow from "./TableRow.vue";
import TablePage from "./TablePage.vue"; import TablePage from "./TablePage.vue";
import { nextTick } from "vue"; import { nextTick } from "vue";
export interface LayTableProps { export interface TableProps {
id?: string; id?: string;
skin?: string; skin?: string;
size?: string; size?: string;
@ -53,7 +53,7 @@ export interface LayTableProps {
getRadioProps?: Function; getRadioProps?: Function;
} }
const props = withDefaults(defineProps<LayTableProps>(), { const props = withDefaults(defineProps<TableProps>(), {
id: "id", id: "id",
size: "md", size: "md",
indentSize: 30, indentSize: 30,
@ -909,4 +909,4 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
</div> </div>
</template> </template>