(component): 完善 ts 类型

This commit is contained in:
就眠儀式 2022-10-17 22:19:33 +08:00
parent dbf9374b6b
commit e8f8c8c2ea
20 changed files with 38 additions and 26 deletions

View File

@ -1,5 +1,5 @@
export type ButtonType = "primary" | "normal" | "warm" | "danger"; export type ButtonType = "primary" | "normal" | "warm" | "danger";
export type ButtonSize = "lg" | "sm" | "xs"; export type ButtonSize = "lg" | "md" | "sm" | "xs";
export type ButtonBorder = "green" | "blue" | "orange" | "red" | "black"; export type ButtonBorder = "green" | "blue" | "orange" | "red" | "black";
export type ButtonNativeType = "button" | "submit" | "reset"; export type ButtonNativeType = "button" | "submit" | "reset";

View File

@ -74,10 +74,11 @@ import LayInput from "../input/index.vue";
import LayScroll from "../scroll/index.vue"; import LayScroll from "../scroll/index.vue";
import LayDropdown from "../dropdown/index.vue"; import LayDropdown from "../dropdown/index.vue";
import { ref, onMounted, watch, useSlots } from "vue"; import { ref, onMounted, watch, useSlots } from "vue";
import { CascaderSize } from "./interface";
export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu"; export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
export interface LayCascaderProps { export interface CascaderProps {
options?: Array<any> | null; options?: Array<any> | null;
modelValue?: string; modelValue?: string;
decollator?: string; decollator?: string;
@ -85,11 +86,11 @@ export interface LayCascaderProps {
onlyLastLevel?: boolean; onlyLastLevel?: boolean;
replaceFields?: { label: string; value: string; children: string }; replaceFields?: { label: string; value: string; children: string };
allowClear?: boolean; allowClear?: boolean;
size?: "lg" | "md" | "sm" | "xs"; size?: CascaderSize;
trigger?: DropdownTrigger | DropdownTrigger[]; trigger?: DropdownTrigger | DropdownTrigger[];
} }
const props = withDefaults(defineProps<LayCascaderProps>(), { const props = withDefaults(defineProps<CascaderProps>(), {
options: null, options: null,
modelValue: "", modelValue: "",
decollator: "/", decollator: "/",

View File

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

View File

@ -8,6 +8,7 @@ export default {
import { LayIcon } from "@layui/icons-vue"; import { LayIcon } from "@layui/icons-vue";
import { computed, inject, useSlots } from "vue"; import { computed, inject, useSlots } from "vue";
import "./index.less"; import "./index.less";
import { CheckboxSize } from "./interface";
export interface LayCheckboxProps { export interface LayCheckboxProps {
name?: string; name?: string;
@ -17,7 +18,7 @@ export interface LayCheckboxProps {
isIndeterminate?: boolean; isIndeterminate?: boolean;
modelValue?: boolean | Array<string | number | object>; modelValue?: boolean | Array<string | number | object>;
disabled?: boolean; disabled?: boolean;
size?: "lg" | "md" | "sm" | "xs"; size?: CheckboxSize;
} }
const props = withDefaults(defineProps<LayCheckboxProps>(), { const props = withDefaults(defineProps<LayCheckboxProps>(), {

View File

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

View File

@ -29,7 +29,7 @@ provide("checkboxGroup", {
}); });
watch( watch(
() => modelValue, () => modelValue,
(val) => { (val) => {
emit("change", modelValue.value); emit("change", modelValue.value);
emit("update:modelValue", modelValue.value); emit("update:modelValue", modelValue.value);

View File

@ -8,25 +8,25 @@ export default {
import "./index.less"; import "./index.less";
import { withDefaults, provide, ref, watch } from "vue"; import { withDefaults, provide, ref, watch } from "vue";
export interface LayCollapseProps { export interface CollapseProps {
modelValue?: number | string | [];
accordion?: boolean; accordion?: boolean;
modelValue?: number | string | number[] | string[];
collapseTransition?: boolean; collapseTransition?: boolean;
} }
const props = withDefaults(defineProps<LayCollapseProps>(), { const props = withDefaults(defineProps<CollapseProps>(), {
modelValue: () => [], modelValue: () => [],
accordion: false, accordion: false,
collapseTransition: true, collapseTransition: true,
}); });
//
watch( watch(
() => props.modelValue, () => props.modelValue,
(val, oldVal) => { (val) => {
activeValues.value = ([] as any[]).concat(val); activeValues.value = ([] as any[]).concat(val);
} }
); );
const emit = defineEmits(["update:modelValue", "change"]); const emit = defineEmits(["update:modelValue", "change"]);
const activeValues = ref<Array<any>>(([] as any[]).concat(props.modelValue)); const activeValues = ref<Array<any>>(([] as any[]).concat(props.modelValue));

View File

@ -8,13 +8,13 @@ export default {
import LayTransition from "../transition/index.vue"; import LayTransition from "../transition/index.vue";
import { withDefaults, inject, computed, ref } from "vue"; import { withDefaults, inject, computed, ref } from "vue";
export interface LayCollapseItemProps { export interface CollapseItemProps {
id: number | string; id: number | string;
title: string; title: string;
disabled?: boolean; disabled?: boolean;
} }
const props = withDefaults(defineProps<LayCollapseItemProps>(), { const props = withDefaults(defineProps<CollapseItemProps>(), {
disabled: false, disabled: false,
}); });

View File

@ -41,12 +41,9 @@ const props = withDefaults(defineProps<LayCountupProps>(), {
let localStartVal: Ref<number> = ref(props.startVal); let localStartVal: Ref<number> = ref(props.startVal);
const isNumber = (val: string) => !isNaN(parseFloat(val)); const isNumber = (val: string) => !isNaN(parseFloat(val));
/** /**
* from: https://github.com/PanJiaChen/vue-countTo/blob/master/src/vue-countTo.vue * from: https://github.com/PanJiaChen/vue-countTo/blob/master/src/vue-countTo.vue
* @description 格式化数字 * */
* @param num 要格式化的数字
* @returns 格式化后的数字
*/
const formatNumber = (num: number | string): string => { const formatNumber = (num: number | string): string => {
if (typeof num != "number") return "0"; if (typeof num != "number") return "0";
num = num.toFixed(props.decimalPlaces); num = num.toFixed(props.decimalPlaces);
@ -69,6 +66,7 @@ const printVal = useTransition(localStartVal, {
disabled: !props.useEasing, disabled: !props.useEasing,
transition: transition:
typeof props.easingFn === "string" typeof props.easingFn === "string"
// @ts-ignore
? TransitionPresets[props.easingFn] ? TransitionPresets[props.easingFn]
: props.easingFn, : props.easingFn,
}); });

View File

@ -11,6 +11,7 @@ import { computed, ref, useSlots, watch } from "vue";
import { useI18n } from "../../language"; import { useI18n } from "../../language";
import PasswordIcon from "./svg/Password.vue"; import PasswordIcon from "./svg/Password.vue";
import UnPasswordIcon from "./svg/unPassword.vue"; import UnPasswordIcon from "./svg/unPassword.vue";
import { InputSize } from "./interface";
export interface LayInputProps { export interface LayInputProps {
name?: string; name?: string;
@ -25,7 +26,7 @@ export interface LayInputProps {
disabled?: boolean; disabled?: boolean;
readonly?: boolean; readonly?: boolean;
password?: boolean; password?: boolean;
size?: "lg" | "md" | "sm" | "xs"; size?: InputSize;
maxlength?: number; maxlength?: number;
} }

View File

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

View File

@ -10,6 +10,7 @@ import layInput from "../input/index.vue";
import { LayIcon } from "@layui/icons-vue"; import { LayIcon } from "@layui/icons-vue";
import layButton from "../button/index.vue"; 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";
export interface LayInputNumberProps { export interface LayInputNumberProps {
modelValue?: number; modelValue?: number;
@ -20,7 +21,7 @@ export interface LayInputNumberProps {
position?: "right"; position?: "right";
min?: number; min?: number;
max?: number; max?: number;
size?: "lg" | "md" | "sm" | "xs"; size?: InputNumberSize;
} }
const props = withDefaults(defineProps<LayInputNumberProps>(), { const props = withDefaults(defineProps<LayInputNumberProps>(), {

View File

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

View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { computed, inject } from "vue"; import { computed, inject } from "vue";
import { RadioSize } from "./interface";
export default { export default {
name: "LayRadio", name: "LayRadio",
}; };
@ -10,7 +11,7 @@ import "./index.less";
export interface LayRadioProps { export interface LayRadioProps {
name?: string; name?: string;
size?: "lg" | "md" | "sm" | "xs"; size?: RadioSize;
disabled?: boolean; disabled?: boolean;
modelValue?: string | boolean | number; modelValue?: string | boolean | number;
value?: string | boolean | number; value?: string | boolean | number;

View File

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

View File

@ -8,7 +8,7 @@ export default {
import { computed, onMounted, ref, watch } from "vue"; import { computed, onMounted, ref, watch } from "vue";
import "./index.less"; import "./index.less";
export interface LayRippletProps { export interface RippleProps {
type?: "out" | "inset"; type?: "out" | "inset";
color?: string; color?: string;
borderRadius?: string; borderRadius?: string;
@ -18,7 +18,7 @@ export interface LayRippletProps {
center?: boolean; center?: boolean;
} }
const props = withDefaults(defineProps<LayRippletProps>(), { const props = withDefaults(defineProps<RippleProps>(), {
type: "inset", type: "inset",
color: "currentColor", color: "currentColor",
borderRadius: "0", borderRadius: "0",

View File

@ -28,6 +28,7 @@ import LaySelectOption, {
LaySelectOptionProps, LaySelectOptionProps,
} from "../selectOption/index.vue"; } from "../selectOption/index.vue";
import { arrayExpression } from "@babel/types"; import { arrayExpression } from "@babel/types";
import { SelectSize } from "./interface";
export interface LaySelectProps { export interface LaySelectProps {
name?: string; name?: string;
@ -39,7 +40,7 @@ export interface LaySelectProps {
modelValue?: any; modelValue?: any;
multiple?: boolean; multiple?: boolean;
items?: LaySelectOptionProps[]; items?: LaySelectOptionProps[];
size?: "lg" | "md" | "sm" | "xs"; size?: SelectSize;
collapseTagsTooltip?: boolean; collapseTagsTooltip?: boolean;
minCollapsedNum?: number; minCollapsedNum?: number;
allowClear?: boolean; allowClear?: boolean;

View File

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

View File

@ -18,6 +18,7 @@ import {
} from "vue"; } from "vue";
import { isObject, reactiveOmit, useResizeObserver } from "@vueuse/core"; import { isObject, reactiveOmit, useResizeObserver } from "@vueuse/core";
import { LayIcon } from "@layui/icons-vue"; import { LayIcon } from "@layui/icons-vue";
import { TagInputSize } from "./inerface";
export interface TagData { export interface TagData {
value?: string | number; value?: string | number;
@ -36,7 +37,7 @@ export interface LayTagInputProps {
max?: number; max?: number;
minCollapsedNum?: number; minCollapsedNum?: number;
collapseTagsTooltip?: boolean; collapseTagsTooltip?: boolean;
size?: "lg" | "md" | "sm" | "xs"; size?: TagInputSize;
tagProps?: LayTagProps; tagProps?: LayTagProps;
disabledInput?: boolean; disabledInput?: boolean;
} }

View File

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