docs: 更新日志, 修复文档细节

This commit is contained in:
就眠儀式
2022-03-31 14:19:37 +08:00
parent da148ac779
commit 9e9efec10c
11 changed files with 80 additions and 53 deletions

View File

@@ -8,12 +8,15 @@ export default {
import "./index.less";
export interface LayAvatarProps {
src?: String;
size?: string;
src?: string;
size?: 'xs' | 'sm' | 'md' | 'lg';
radius?: boolean;
}
const props = withDefaults(defineProps<LayAvatarProps>(), {});
const props = withDefaults(defineProps<LayAvatarProps>(), {
size: 'md',
radius: false
});
</script>
<template>

View File

@@ -6,25 +6,25 @@ export default {
<script setup lang="ts">
import "./index.less";
import { provide, ref, watch } from "vue";
import { provide, ref } from "vue";
import { onClickOutside } from "@vueuse/core";
import { DropdownTrigger } from "./interface";
export interface LayDropdownProps {
trigger?: string;
trigger?: DropdownTrigger;
}
const dropdownRef = ref<null | HTMLElement>(null);
const props = withDefaults(defineProps<LayDropdownProps>(), {
trigger: "click",
});
const openState = ref(false);
const dropdownRef = ref<null | HTMLElement>(null);
onClickOutside(dropdownRef, (event) => {
openState.value = false;
});
const openState = ref(false);
const open = function () {
openState.value = true;
};

View File

@@ -0,0 +1 @@
export type DropdownTrigger = 'click' | 'hover';

View File

@@ -5,12 +5,13 @@ export default {
</script>
<script setup lang="ts">
import { withDefaults } from "vue";
import "./index.less";
import { withDefaults } from "vue";
import { String } from 'src/types';
export interface LayEmptyProps {
description?: string;
image?: string;
description?: String;
image?: String;
}
const props = withDefaults(defineProps<LayEmptyProps>(), {

View File

@@ -6,25 +6,26 @@ export default {
<script setup lang="ts">
import "./index.less";
import { useSlots } from "vue";
import { useI18n } from "vue-i18n";
import { computed, useSlots } from "vue-demi";
import { Boolean, String } from 'src/types';
const { t } = useI18n();
const slots = useSlots();
export interface LayInputProps {
name?: string;
type?: string;
value?: string;
disabled?: boolean;
modelValue?: string;
placeholder?: string;
allowClear?: boolean;
name?: String;
type?: String;
value?: String;
disabled?: Boolean;
modelValue?: String;
placeholder?: String;
allowClear?: Boolean;
}
const props = withDefaults(defineProps<LayInputProps>(), {});
const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
const emit = defineEmits(["update:modelValue", "input", "change", "focus", "blur"]);
const onInput = function (event: InputEvent) {
const inputElement = event.target as HTMLInputElement;
@@ -32,16 +33,20 @@ const onInput = function (event: InputEvent) {
emit("input", event);
};
const onFocus = function (event: FocusEvent) {
const onClear = () => {
emit("update:modelValue", "");
};
const onFocus = (event: FocusEvent) => {
emit("focus", event);
};
const onBlur = function () {
emit("blur");
};
const onChange = () => {
emit("change");
}
const clear = () => {
emit("update:modelValue", "");
const onBlur = () => {
emit("blur");
};
</script>
@@ -61,12 +66,13 @@ const clear = () => {
@input="onInput"
@focus="onFocus"
@blur="onBlur"
@change="onChange"
/>
<span class="layui-input-suffix" v-if="slots.suffix">
<slot name="suffix"></slot>
</span>
<span class="layui-input-clear" v-if="allowClear">
<lay-icon type="layui-icon-close-fill" @click="clear"></lay-icon>
<lay-icon type="layui-icon-close-fill" @click="onClear"></lay-icon>
</span>
</div>
</template>

View File

@@ -19,4 +19,11 @@
border-color: @panel-border-color;
background-color: @panel-back-color;
color: @panel-fore-color;
.is-hover-shadow:hover {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.shadow {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
}

View File

@@ -6,10 +6,27 @@ export default {
<script setup lang="ts">
import "./index.less";
import {computed} from "vue";
import {PanelShadow} from "./interface";
export interface LayPanelProps {
shadow?: PanelShadow;
}
const props = withDefaults(defineProps<LayPanelProps>(), {
shadow: "always",
});
const classes = computed(() => {
return {
shadow: props.shadow === "always",
"is-hover-shadow": props.shadow === "hover",
};
});
</script>
<template>
<div class="layui-panel">
<div class="layui-panel" :class="classes">
<slot></slot>
</div>
</template>

View File

@@ -0,0 +1 @@
export type PanelShadow = "always" | "hover" | "never";