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

✨(all): 发布 1.1.5

Browse Source
This commit is contained in:
就眠儀式 2022-06-05 02:03:45 +08:00
parent f198443eaa
commit be2f31ba9c
9 changed files with 115 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@layui/layui-vue", "name": "@layui/layui-vue",
"version": "1.1.5-alpha.5", "version": "1.1.5",
"author": "就眠儀式", "author": "就眠儀式",
"license": "MIT", "license": "MIT",
"description": "a component library for Vue 3 base on layui-vue", "description": "a component library for Vue 3 base on layui-vue",

7
package/component/src/component/form/index.less
View File

@ -32,11 +32,10 @@
.layui-form-label { .layui-form-label {
float: left; float: left;
display: block; display: block;
padding: 9px 15px; width: 95px;
width: 80px; padding-right: 15px;
line-height: 38px;
font-weight: 400; font-weight: 400;
line-height: 20px;
text-align: right;
} }
.layui-form-label-col { .layui-form-label-col {

8
package/component/src/component/formItem/index.vue
View File

@ -40,7 +40,7 @@ export interface LayFormItemProps {
const props = withDefaults(defineProps<LayFormItemProps>(), { const props = withDefaults(defineProps<LayFormItemProps>(), {
mode: "block", mode: "block",
labelPosition: 'right' labelPosition: "right",
}); });
const layForm = inject("LayForm", {} as LayFormContext); const layForm = inject("LayForm", {} as LayFormContext);
@ -165,7 +165,11 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="layui-form-item" :class="[`layui-form-item-${labelPosition}`]" ref="formItemRef"> <div
class="layui-form-item"
:class="[`layui-form-item-${labelPosition}`]"
ref="formItemRef"
>
<label class="layui-form-label"> <label class="layui-form-label">
<span <span
v-if="props.prop && isRequired" v-if="props.prop && isRequired"

1
package/component/src/component/select/index.vue
View File

@ -232,7 +232,6 @@ provide("keyword", txt);
></i> ></i>
</lay-badge> </lay-badge>
</template> </template>
<input />
</div> </div>
</div> </div>
</div> </div>

1
package/document/src/assets/css/index.css
View File

@ -1,5 +1,6 @@
@import './code.css'; @import './code.css';
@import './markdown.css'; @import './markdown.css';
@import './mobile.css';
.layui-menu-lg li { .layui-menu-lg li {
line-height: 32px; line-height: 32px;

29
package/document/src/assets/css/mobile.css Normal file
View File

@ -0,0 +1,29 @@
@media screen and (max-width:768px) {
#app > .layui-layout > .layui-header > .layui-logo {
display: none;
}
#app > .layui-layout > .layui-header > .layui-layout-right {
display: none;
}
#app > .layui-layout > .layui-header > .layui-layout-left {
display: none;
}
#app > .layui-layout > .layui-layout > .layui-side {
display: none;
}
#app > .layui-layout > .layui-layout > .layui-body {
width: 100%;
left: 0px;
}
#app > .layui-layout > .layui-layout > .layui-body > div {
padding: 10px!important;
margin-right: 0px!important;
width: calc(100% - 20px)!important;
}
#app > .layui-layout > .layui-layout > .layui-body .lay-aside {
display: none;
}
.site-banner {
background-size: 100% 100%;
}
}

3
package/document/src/document/zh-CN/components/form.md
View File

@ -73,7 +73,7 @@ export default {
::: title 对齐方式 ::: title 对齐方式
::: :::
::: demo ::: demo 通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left， 当设为 top 时标签会置于表单域的顶部
<template> <template>
<lay-form :model="model"> <lay-form :model="model">
@ -531,6 +531,7 @@ export default {
| ------------- | -------------------------------------------------------------- | --------- | -------------- | ------- | | ------------- | -------------------------------------------------------------- | --------- | -------------- | ------- |
| prop | 在表单绑定值(`model`)中字段`key` | `string` | - | - | | prop | 在表单绑定值(`model`)中字段`key` | `string` | - | - |
| label | 子项前边描述值，**尽量填写**，中文校验错误需要用到 | `string` | - | - | | label | 子项前边描述值，**尽量填写**，中文校验错误需要用到 | `string` | - | - |
| label-position| 子项前边描述值的位置 | `string` | `left` `top` `right` |`right` |
| required | 是否必填 | `boolean` | `true` `false` | `false` | | required | 是否必填 | `boolean` | `true` `false` | `false` |
| rules | 表单校验规则; <br>可查看[async-validator](https://github.com/yiminghe/async-validator) | `object` | - | - | | rules | 表单校验规则; <br>可查看[async-validator](https://github.com/yiminghe/async-validator) | `object` | - | - |
| error-message | 表单校验失败固定提示语 | `string` |`block` `inline`| `block` | | error-message | 表单校验失败固定提示语 | `string` |`block` `inline`| `block` |

1
package/document/src/document/zh-CN/guide/changelog.md
View File

@ -16,6 +16,7 @@
<li> <li>
<h3>1.1.5 <span class="layui-badge-rim">2022-06-04</span></h3> <h3>1.1.5 <span class="layui-badge-rim">2022-06-04</span></h3>
<ul> <ul>
<li>[新增] input 组件 label-position 属性, 通过设置改变表单域标签的位置, top、left 为可选值</li>
<li>[修复] tab 组件 brief 风格 position 为 bottom 时 active-bar 的位置</li> <li>[修复] tab 组件 brief 风格 position 为 bottom 时 active-bar 的位置</li>
<li>[修复] tab 组件 brief 风格 background-color 为 transparent 透明色</li> <li>[修复] tab 组件 brief 风格 background-color 为 transparent 透明色</li>
<li>[优化] tab 组件 tab-panel 宽度超出当前组件宽度时, 增加左右滑动的能力</li> <li>[优化] tab 组件 tab-panel 宽度超出当前组件宽度时, 增加左右滑动的能力</li>

242
package/document/src/layouts/Layout.vue
View File

@ -1,56 +1,34 @@
<template> <template>
<lay-config-provider <lay-config-provider :locale="locale" :locales="locales" :theme="appStore.theme"
:locale="locale" :themeVariable="appStore.themeVariable">
:locales="locales"
:theme="appStore.theme"
:themeVariable="appStore.themeVariable"
>
<lay-layout class="layui-layout-document" style="height: 100%"> <lay-layout class="layui-layout-document" style="height: 100%">
<lay-header <lay-header>
><lay-logo> <lay-logo>
<img src="../assets/logo-png.png" /><span <img src="../assets/logo-png.png" /><span style="
style="
margin-left: 12px; margin-left: 12px;
font-size: 20px; font-size: 20px;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
letter-spacing: -0.2px; letter-spacing: -0.2px;
opacity: 0.8; opacity: 0.8;
" ">layui - vue</span>
>layui - vue</span
>
</lay-logo> </lay-logo>
<ul <ul class="layui-nav layui-layout-left" style="margin-top: 0px; margin-bottom: 0px">
class="layui-nav layui-layout-left" <li class="layui-nav-item" :class="{ 'layui-active': currentPath.includes('/zh-CN/index') }">
style="margin-top: 0px; margin-bottom: 0px"
>
<li
class="layui-nav-item"
:class="{ 'layui-active': currentPath.includes('/zh-CN/index') }"
>
<router-link to="/zh-CN/index"> {{ t("nav.home") }} </router-link> <router-link to="/zh-CN/index"> {{ t("nav.home") }} </router-link>
</li> </li>
<li <li class="layui-nav-item" :class="{ 'layui-active': currentPath.includes('/zh-CN/guide') }">
class="layui-nav-item"
:class="{ 'layui-active': currentPath.includes('/zh-CN/guide') }"
>
<router-link to="/zh-CN/guide"> {{ t("nav.guide") }} </router-link> <router-link to="/zh-CN/guide"> {{ t("nav.guide") }} </router-link>
</li> </li>
<li <li class="layui-nav-item" :class="{
class="layui-nav-item" 'layui-active': currentPath.includes('/zh-CN/components'),
:class="{ }">
'layui-active': currentPath.includes('/zh-CN/components'),
}"
>
<router-link to="/zh-CN/components"> <router-link to="/zh-CN/components">
{{ t("nav.components") }} {{ t("nav.components") }}
</router-link> </router-link>
</li> </li>
<li <li class="layui-nav-item" :class="{
class="layui-nav-item" 'layui-active': currentPath.includes('/zh-CN/resources'),
:class="{ }">
'layui-active': currentPath.includes('/zh-CN/resources'),
}"
>
<router-link to="/zh-CN/resources"> <router-link to="/zh-CN/resources">
{{ t("nav.resources") }} {{ t("nav.resources") }}
</router-link> </router-link>
@ -61,77 +39,37 @@
</lay-form> </lay-form>
</li> </li>
</ul> </ul>
<ul <ul class="layui-nav layui-layout-right" style="margin-top: 0px; margin-bottom: 0px">
class="layui-nav layui-layout-right"
style="margin-top: 0px; margin-bottom: 0px"
>
<li class="layui-nav-item"> <li class="layui-nav-item">
<lay-dropdown> <lay-dropdown>
<a href="javascript:void(0);"> <a href="javascript:void(0);">
<lay-icon <lay-icon size="15px" type="layui-icon-theme" style="padding-left: 30px; padding-right: 30px">
size="15px" </lay-icon>
type="layui-icon-theme"
style="padding-left: 30px; padding-right: 30px"
></lay-icon>
</a> </a>
<template #content> <template #content>
<div style="width: 380px; padding: 0px 10px 10px 10px"> <div style="width: 380px; padding: 0px 10px 10px 10px">
<lay-color-picker <lay-color-picker v-model="appStore.themeVariable['--global-primary-color']"></lay-color-picker>&nbsp;
v-model="appStore.themeVariable['--global-primary-color']" <lay-color-picker v-model="appStore.themeVariable['--global-normal-color']"></lay-color-picker>&nbsp;
></lay-color-picker <lay-color-picker v-model="appStore.themeVariable['--global-warm-color']"></lay-color-picker>&nbsp;
>&nbsp; <lay-color-picker v-model="appStore.themeVariable['--global-danger-color']"></lay-color-picker>&nbsp;
<lay-color-picker <lay-color-picker v-model="appStore.themeVariable['--global-checked-color']"></lay-color-picker>&nbsp;
v-model="appStore.themeVariable['--global-normal-color']" <lay-input v-model="appStore.themeVariable['--global-border-radius']"
></lay-color-picker style="display: inline-block; width: 130px"></lay-input>
>&nbsp; <lay-color-picker v-model="appStore.themeVariable['--global-neutral-color-1']"></lay-color-picker>
<lay-color-picker &nbsp;
v-model="appStore.themeVariable['--global-warm-color']" <lay-color-picker v-model="appStore.themeVariable['--global-neutral-color-2']"></lay-color-picker>
></lay-color-picker &nbsp;
>&nbsp; <lay-color-picker v-model="appStore.themeVariable['--global-neutral-color-3']"></lay-color-picker>
<lay-color-picker &nbsp;
v-model="appStore.themeVariable['--global-danger-color']" <lay-color-picker v-model="appStore.themeVariable['--global-neutral-color-4']"></lay-color-picker>
></lay-color-picker &nbsp;
>&nbsp; <lay-color-picker v-model="appStore.themeVariable['--global-neutral-color-5']"></lay-color-picker>
<lay-color-picker &nbsp;
v-model="appStore.themeVariable['--global-checked-color']" <lay-color-picker v-model="appStore.themeVariable['--global-neutral-color-6']"></lay-color-picker>
></lay-color-picker &nbsp;
>&nbsp; <lay-color-picker v-model="appStore.themeVariable['--global-neutral-color-7']"></lay-color-picker>
<lay-input &nbsp;
v-model="appStore.themeVariable['--global-border-radius']" <lay-color-picker v-model="appStore.themeVariable['--global-neutral-color-8']"></lay-color-picker>
style="display: inline-block; width: 130px"
></lay-input>
<lay-color-picker
v-model="appStore.themeVariable['--global-neutral-color-1']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="appStore.themeVariable['--global-neutral-color-2']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="appStore.themeVariable['--global-neutral-color-3']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="appStore.themeVariable['--global-neutral-color-4']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="appStore.themeVariable['--global-neutral-color-5']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="appStore.themeVariable['--global-neutral-color-6']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="appStore.themeVariable['--global-neutral-color-7']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="appStore.themeVariable['--global-neutral-color-8']"
></lay-color-picker>
<lay-button fluid="true">导 出 配 置</lay-button>
</div> </div>
</template> </template>
</lay-dropdown> </lay-dropdown>
@ -141,82 +79,45 @@
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<lay-badge <lay-badge type="rim" class="layui-local-badge" v-if="locale === 'en_US'" @click="changeLocale('zh_CN')">中
type="rim" 文</lay-badge>
class="layui-local-badge" <lay-badge type="rim" class="layui-local-badge" v-else @click="changeLocale('en_US')">英 文</lay-badge>
v-if="locale === 'en_US'"
@click="changeLocale('zh_CN')"
>中 文</lay-badge
>
<lay-badge
type="rim"
class="layui-local-badge"
v-else
@click="changeLocale('en_US')"
>英 文</lay-badge
>
</a> </a>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<lay-switch <lay-switch v-model="appStore.theme" class="switch" onswitch-value="dark" unswitch-value="light"
v-model="appStore.theme" onswitch-color="rgba(255, 255, 255, 0.05)" unswitch-color="rgba(255, 255, 255, 0.05)">
class="switch"
onswitch-value="dark"
unswitch-value="light"
onswitch-color="rgba(255, 255, 255, 0.05)"
unswitch-color="rgba(255, 255, 255, 0.05)"
>
<template #onswitch-icon> <template #onswitch-icon>
<svg <svg xmlns="http://www.w3.org/2000/svg" fill="rgba(60, 60, 60, .7)" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" class="vt-switch-appearance-moon">
fill="rgba(60, 60, 60, .7)"
aria-hidden="true"
focusable="false"
viewBox="0 0 24 24"
class="vt-switch-appearance-moon"
>
<path <path
d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z">
></path> </path>
</svg> </svg>
</template> </template>
<template #unswitch-icon> <template #unswitch-icon>
<svg <svg xmlns="http://www.w3.org/2000/svg" fill="rgba(60, 60, 60, .7)" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" class="vt-switch-appearance-sun">
fill="rgba(60, 60, 60, .7)"
aria-hidden="true"
focusable="false"
viewBox="0 0 24 24"
class="vt-switch-appearance-sun"
>
<path <path
d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z">
></path> </path>
<path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path>
<path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path>
<path <path
d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z">
></path> </path>
<path <path
d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z">
></path> </path>
<path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path>
<path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
<path <path
d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z">
></path> </path>
<path <path
d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z">
></path> </path>
<path
d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"
></path>
<path
d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"
></path>
<path
d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"
></path>
<path
d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"
></path>
</svg> </svg>
</template> </template>
</lay-switch> </lay-switch>
@ -310,7 +211,8 @@ export default {
<style> <style>
@import "@layui/layui-vue/es/menu/index.css"; @import "@layui/layui-vue/es/menu/index.css";
@import "@layui/layui-vue/es/row/index.css"; @import "@layui/layui-vue/es/row/index.css";
.layui-layout-document > .layui-header {
.layui-layout-document>.layui-header {
z-index: 99; z-index: 99;
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -318,7 +220,7 @@ export default {
border-bottom: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
} }
.layui-layout-document > .layui-layout > .layui-side { .layui-layout-document>.layui-layout>.layui-side {
overflow-x: hidden; overflow-x: hidden;
position: fixed; position: fixed;
margin-top: 60px; margin-top: 60px;
@ -327,7 +229,7 @@ export default {
border-right: 1px solid #eeeeee; border-right: 1px solid #eeeeee;
} }
.layui-layout-document > .layui-layout > .layui-body { .layui-layout-document>.layui-layout>.layui-body {
margin-top: 60px; margin-top: 60px;
left: 200px; left: 200px;
position: absolute; position: absolute;
@ -351,16 +253,16 @@ export default {
} }
.layui-logo img { .layui-logo img {
margin-top: -5px;
height: 45px; height: 45px;
left: 15px; left: 15px;
top: 0px;
} }
.layui-header > .layui-nav { .layui-header>.layui-nav {
background-color: transparent; background-color: transparent;
} }
.layui-header > .layui-nav .layui-active * { .layui-header>.layui-nav .layui-active * {
color: var(--global-checked-color) !important; color: var(--global-checked-color) !important;
} }