✨(component): 整理代码
This commit is contained in:
parent
e732e8ed17
commit
d9116dc47e
@ -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,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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",
|
||||||
|
@ -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: "暂无数据",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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 {};
|
||||||
},
|
},
|
||||||
|
@ -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,
|
||||||
|
@ -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",
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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",
|
||||||
|
@ -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,
|
||||||
|
@ -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>;
|
||||||
|
@ -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);
|
||||||
|
@ -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,
|
||||||
|
1
package/component/src/component/switch/interface.ts
Normal file
1
package/component/src/component/switch/interface.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export type SwitchSize = "lg" | "md" | "sm" | "xs";
|
@ -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",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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";
|
@ -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,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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>
|
Loading…
x
Reference in New Issue
Block a user