theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增 empty 组件 image 插槽, 完成部分组件的按需加载

Browse Source
This commit is contained in:
就眠儀式 2022-04-10 12:46:31 +08:00
parent ca2ff33119
commit 516fc19eb0
17 changed files with 199 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
package/component/src/component/button/index.less
View File

@ -1,27 +1,22 @@
@import (reference) "../../theme/variable.less";
@button-primary-color: var(--button-primary-color);
@button-primary-border-color: var(--button-primary-border-color);
@button-normal-color: var(--button-normal-color);
@button-normal-border-color: var(--button-normal-border-color);
@button-warm-color: var(--button-warm-color);
@button-warm-border-color: var(--button-warm-border-color);
@button-danger-color: var(--button-danger-color);
@button-danger-border-color: var(--button-danger-border-color);
@button-border-radius: var(--button-border-radius);
@button-border-color: var(--button-border-color);
:root {
--button-primary-color: @global-primary-color;
--button-primary-border-color: @global-primary-color;
--button-normal-color: @global-normal-color;
--button-normal-border-color: @global-normal-color;
--button-warm-color: @global-warm-color;
--button-warm-border-color: @global-warm-color;
--button-danger-color: @global-danger-color;
--button-danger-border-color: @global-danger-color;
--button-border-radius: @global-border-radius;
--button-border-color: @global-neutral-color-6;
--button-primary-text-color: #fff;
--button-primary-background-color: var(--global-primary-color);
--button-primary-border-color: var(--global-primary-color);
--button-normal-text-color: #fff;
--button-normal-background-color: var(--global-normal-color);
--button-normal-border-color: var(--global-normal-color);
--button-warm-text-color: #fff;
--button-warm-background-color: var(--global-warm-color);
--button-warm-border-color: var(--global-warm-color);
--button-danger-text-color: #fff;
--button-danger-background-color: var(--global-danger-color);
--button-danger-border-color: var(--global-danger-color);
--button-border-radius: var(--global-border-radius);
--button-border-color: var(--global-neutral-color-6);
--button-background-color: 0 0;
--button-text-color: #666;
}
.layui-btn {
@ -31,63 +26,47 @@
font-size: 14px;
text-align: center;
white-space: nowrap;
border-radius: @button-border-radius;
border-color: @button-border-color;
color: var(--button-text-color);
background: var(--button-background-color);
border-radius: var(--button-border-radius);
border-color: var(--button-border-color);
border-width: 1px;
border-style: solid;
background: 0 0;
color: #666;
cursor: pointer;
}
.layui-btn:hover,
.layui-btn:active {
:hover,
:active {
color: #333;
}
.layui-btn + .layui-btn {
margin-left: 10px;
}
.layui-btn-radius {
border-radius: 100px;
}
.layui-btn .layui-icon {
padding: 0 2px;
vertical-align: middle\9;
vertical-align: bottom;
}
}
.layui-btn-primary {
color: #fff;
background-color: @button-primary-color;
border-color: @button-primary-border-color;
color: var(--button-primary-text-color);
background-color: var(--button-primary-background-color);
border-color: var(--button-primary-border-color);
}
.layui-btn-normal {
color: #fff;
background-color: @button-normal-color;
border-color: @button-normal-border-color;
color: var(--button-normal-text-color);
background-color: var(--button-normal-background-color);
border-color: var(--button-normal-border-color);
}
.layui-btn-warm {
color: #fff;
background-color: @button-warm-color;
border-color: @button-warm-border-color;
color: var(--button-warm-text-color);
background-color: var(--button-warm-background-color);
border-color: var(--button-warm-border-color);
}
.layui-btn-danger {
color: #fff;
background-color: @button-danger-color;
border-color: @button-danger-border-color;
color: var(--button-danger-text-color);
background-color: var(--button-danger-background-color);
border-color: var(--button-danger-border-color);
}
.layui-btn-primary:hover,
.layui-btn-normal:hover,
.layui-btn-warm:hover,
.layui-btn-danger:hover {
color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
}
@ -120,6 +99,10 @@
width: 100%;
}
.layui-btn-radius {
border-radius: 100px;
}
.layui-btn-disabled,
.layui-btn-disabled:active,
.layui-btn-disabled:hover {
@ -129,3 +112,13 @@
cursor: not-allowed !important;
opacity: 1;
}
.layui-btn + .layui-btn {
margin-left: 10px;
}
.layui-btn .layui-icon {
padding: 0 2px;
vertical-align: middle\9;
vertical-align: bottom;
}

6
package/component/src/component/button/index.vue
View File

@ -1,3 +1,4 @@
<!-- done -->
<script lang="ts">
export default {
name: "LayButton",
@ -9,6 +10,7 @@ import "./index.less";
import { computed } from "vue";
import {
ButtonBorder,
ButtonEmits,
ButtonNativeType,
ButtonSize,
ButtonType,
@ -38,9 +40,9 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
borderStyle: "soild",
});
const emit = defineEmits(["click"]);
const emit = defineEmits(ButtonEmits);
const onClick = (event: any) => {
const onClick = (event: MouseEvent) => {
if (!props.disabled) {
emit("click", event);
}

4
package/component/src/component/button/interface.ts
View File

@ -2,3 +2,7 @@ export type ButtonType = "primary" | "normal" | "warm" | "danger";
export type ButtonSize = "lg" | "sm" | "xs";
export type ButtonBorder = "green" | "blue" | "orange" | "red" | "black";
export type ButtonNativeType = "button" | "submit" | "reset";
export const ButtonEmits = {
click: (evt: MouseEvent) => evt instanceof MouseEvent,
}

12
package/component/src/component/buttonContainer/index.less
View File

@ -2,11 +2,13 @@
.layui-btn-container {
font-size: 0;
.layui-btn {
}
.layui-btn-container .layui-btn {
margin-right: 10px;
margin-bottom: 10px;
}
.layui-btn + .layui-btn {
margin-left: 0;
}
}
.layui-btn-container .layui-btn + .layui-btn {
margin-left: 0;
}

24
package/component/src/component/card/index.less
View File

@ -1,32 +1,30 @@
@import (reference) "../../theme/variable.less";
@card-border-radius: var(--card-border-radius);
@card-fore-color: var(--card-fore-color);
:root {
--card-border-radius: @global-border-radius;
--card-fore-color: @global-fore-color;
--card-border-radius: var(--global-border-radius);
}
.layui-card {
margin-bottom: 15px;
border-radius: @card-border-radius;
background-color: #ffffff;
.layui-card-header {
border-radius: var(--card-border-radius);
}
.layui-card .layui-card-header {
height: 42px;
line-height: 42px;
padding: 0 15px;
border-bottom: 1px solid #f6f6f6;
color: @card-fore-color;
font-size: 14px;
.layui-card-header-extra {
}
.layui-card .layui-card-header .layui-card-header-extra {
float: right;
}
}
.layui-card-body {
}
.layui-card .layui-card-body {
padding: 10px 15px;
line-height: 24px;
}
}
.layui-card:last-child {

5
package/component/src/component/container/index.vue
View File

@ -5,11 +5,12 @@ export default {
</script>
<script setup lang="ts">
import { computed } from "vue";
import "./index.less";
import { computed } from "vue";
import { BooleanOrString } from '../../types';
export interface LayContainerProps {
fluid?: boolean | string;
fluid?: BooleanOrString;
}
const props = withDefaults(defineProps<LayContainerProps>(), {

3
package/component/src/component/empty/index.less
View File

@ -8,12 +8,11 @@
}
.layui-empty-image {
height: 100px;
margin-bottom: 8px;
}
.layui-empty-image img {
height: 100%;
height: 100px;
margin: auto;
}

7
package/component/src/component/empty/index.vue
View File

@ -6,13 +6,15 @@ export default {
<script setup lang="ts">
import "./index.less";
import { withDefaults } from "vue";
import { useSlots, withDefaults } from "vue";
export interface LayEmptyProps {
description?: string;
image?: string;
}
const slots = useSlots();
const props = withDefaults(defineProps<LayEmptyProps>(), {
description: "暂无数据",
});
@ -21,7 +23,8 @@ const props = withDefaults(defineProps<LayEmptyProps>(), {
<template>
<div class="layui-empty">
<div class="layui-empty-image">
<img class="layui-empty-image-default" src="./index.svg" />
<slot v-if="slots.image" name="image"></slot>
<img v-else class="layui-empty-image-default" src="./index.svg" />
</div>
<div class="layui-empty-description">{{ description }}</div>
<div class="layui-empty-extra">

14
package/component/src/component/panel/index.less
View File

@ -14,10 +14,12 @@
border-radius: @panel-border-radius;
border-color: @panel-border-color;
background-color: #fff;
.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);
}
}
.layui-panel.is-hover-shadow:hover {
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
}
.layui-panel.shadow {
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
}

2
package/component/src/component/timeline/index.vue
View File

@ -9,7 +9,7 @@ import "./index.less";
import { computed, withDefaults } from "vue";
export interface LayTimelineProps {
direction: "horizontal" | "vertical";
direction?: "horizontal" | "vertical";
}
const props = withDefaults(defineProps<LayTimelineProps>(), {

38
package/component/src/resolver/index.ts
View File

@ -6,6 +6,44 @@
* √ layer API
*/
const matchComponents = [
// done
{
pattern: /^LayButton$/,
styleDir: "button",
},
{
pattern: /^LayButtonContainer$/,
styleDir: "container",
},
{
pattern: /^LayButtonGroup$/,
styleDir: "buttonGroup",
},
{
pattern: /^LayContainer$/,
styleDir: "container",
},
{
pattern: /^LayCard$/,
styleDir: "card",
},
{
pattern: /^LayPanel$/,
styleDir: "panel",
},
{
pattern: /^LayFooter$/,
styleDir: "footer",
},
{
pattern: /^LayBody$/,
styleDir: "body",
},
{
pattern: /^LayEmpty$/,
styleDir: "empty",
},
// ....
{
pattern: /^LayAvatarList$/,
styleDir: "avatar",

14
package/component/src/theme/index.less
View File

@ -302,20 +302,16 @@ a cite {
box-sizing: border-box;
}
.layui-card-body,
.layui-card-header,
.layui-form-label,
.layui-form-mid,
.layui-input-block,
.layui-input-inline,
.layui-input-wrap,
.layui-panel,
.layui-textarea {
position: relative;
}
.layui-form-select dl,
.layui-panel {
.layui-form-select dl {
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
}
@ -328,14 +324,6 @@ a cite {
color: #fff !important;
}
.layui-panel-window {
position: relative;
padding: 15px;
border-radius: 0;
border-top: 5px solid @global-neutral-color-3;
background-color: #fff;
}
.layui-border,
.layui-border-black,
.layui-border-blue,

4
package/document/src/document/zh-CN/components/animation.md
View File

@ -99,7 +99,7 @@ export default {
::: table
| 类名 | 描述 | 使用 |
| --------------------------------- | ------------ | ---------------------------------------------- |
| ---------------------------------| ------------ | ---------------------------------------------- |
| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |
| layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` |
@ -111,7 +111,7 @@ export default {
| layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein` |
| layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout` |
| layui-anim-rotate | 360 度旋转 | `layui-anim layui-anim-rotate` |
| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` |
| layui-anim-rotate layui-anim-loop| 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` |
:::

27
package/document/src/document/zh-CN/components/empty.md
View File

@ -80,6 +80,33 @@ export default {
:::
::: title 图片插槽
:::
::: demo
<template>
<lay-empty description="刷新试试">
<template #image>
图片
</template>
</lay-empty>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title Empty 属性
:::

11
package/document/src/document/zh-CN/components/panel.md
View File

@ -30,6 +30,17 @@ export default {
:::
::: title Panel 属性
:::
::: table
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
| ------- | -------- | ------ | ------ | ----- |
| shadow | 阴影 | `string` | `always` | `always` `hover` `never` |
:::
::: title Panel 插槽
:::