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

Merge branch 'next' into doc-demand

Browse Source
This commit is contained in:
sight
2022-05-05 20:45:26 +08:00
parent 4417797ae1 a71dffb6f5
commit ec7af67032
23 changed files with 274 additions and 170 deletions
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",
"version": "1.0.6",
"version": "1.0.7-alpha.1",
"author": "就眠儀式",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue",

5
package/component/src/component/menu/index.less
View File

@@ -309,3 +309,8 @@
background-color: transparent;
}
}
.layui-nav-child-spacing .layui-nav-item .layui-nav-child {
padding-left: 10px;
box-sizing: border-box;
}

18
package/component/src/component/menu/index.vue
View File

@@ -17,9 +17,15 @@ export interface LayMenuProps {
level?: boolean | string;
collapse?: boolean | string;
collapseTransition?: boolean | string;
childSpacing?: boolean;
}
const emit = defineEmits(["update:selectedKey", "update:openKeys"]);
const emit = defineEmits([
"update:selectedKey",
"update:openKeys",
"changeSelectedKey",
"changeOpenKeys",
]);
const props = withDefaults(defineProps<LayMenuProps>(), {
selectedKey: "",
@@ -30,6 +36,7 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
level: true,
collapse: false,
collapseTransition: true,
childSpacing: false,
});
const isTree = computed(() => props.tree);
@@ -43,6 +50,7 @@ const openKeys = computed({
},
set(val) {
emit("update:openKeys", val);
emit("changeOpenKeys", val);
},
});
@@ -52,6 +60,7 @@ const selectedKey = computed({
},
set(val) {
emit("update:selectedKey", val);
emit("changeSelectedKey", val);
},
});
@@ -59,12 +68,10 @@ watch(
() => props.collapse,
() => {
if (props.collapse) {
// 删除所有打开
oldOpenKeys.value = props.openKeys;
emit("update:openKeys", []);
openKeys.value = [];
} else {
// 赋值所有打开
emit("update:openKeys", oldOpenKeys.value);
openKeys.value = oldOpenKeys.value;
}
},
{ immediate: true }
@@ -86,6 +93,7 @@ provide("isCollapseTransition", isCollapseTransition);
tree ? 'layui-nav-tree' : '',
theme === 'dark' ? 'layui-nav-dark' : 'layui-nav-light',
collapse ? 'layui-nav-collapse' : '',
childSpacing ? 'layui-nav-child-spacing' : '',
]"
>
<slot></slot>

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

@@ -13,12 +13,13 @@ export interface LaySideProps {
}
const props = withDefaults(defineProps<LaySideProps>(), {
width: "200",
width: "200px",
});
const styles = computed<CSSProperties>(() => {
return {
width: `${props.width}px`,
"flex": `0 0 ${props.width}`,
"width": `${props.width}`
};
});
</script>

22
package/component/src/component/slider/Standard.vue
View File

@@ -7,8 +7,9 @@ export default {
<script setup lang="ts">
import { Ref, ref } from "vue";
import { on, off } from "evtd";
import { throttle, handle_select } from "./utils/index";
// import { throttle, handle_select } from "./utils/index";
import LayTooltip from "../tooltip/index.vue";
import { throttle, handle_select, makeDots } from "./utils/index";
interface Prop {
val?: number | Array<number>;
@@ -16,6 +17,7 @@ interface Prop {
step?: number;
min?: number;
max?: number;
showDots?: boolean;
}
const props = withDefaults(defineProps<Prop>(), {
@@ -24,6 +26,7 @@ const props = withDefaults(defineProps<Prop>(), {
step: 0,
min: 0,
max: 100,
showDots: false,
});
const moveAction = throttle(standardMove);
@@ -88,6 +91,15 @@ function calcWithStep(
}
}
}
// 断点
const dots = makeDots(props);
const focusDot = (val: number) => {
emit("link-val-hook", val);
};
// const focusClick = (e: MouseEvent)=>{
// console.log(e);
// standardMove(e)
// }
</script>
<template>
@@ -111,5 +123,13 @@ function calcWithStep(
:class="[disabled ? 'layui-slider-disabled disable-line' : '']"
></div>
<div class="layui-slider-line-v"></div>
<div
v-show="showDots"
@click="focusDot(item)"
class="layui-slider-dots"
v-for="(item, index) in dots"
:key="index"
:style="{ left: item + '%' }"
></div>
</div>
</template>

23
package/component/src/component/slider/StandardRange.vue
View File

@@ -7,15 +7,16 @@ export default {
<script setup lang="ts">
import { ref, toRef, Ref } from "vue";
import { on, off } from "evtd";
import { throttle } from "./utils/index";
// import { throttle } from "./utils/index";
import LayTooltip from "../tooltip/index.vue";
import { throttle, makeDots } from "./utils/index";
interface Prop {
rangeValue: Array<number>;
disabled?: boolean;
step?: number;
min?: number;
max?: number;
showDots?: boolean;
}
const props = withDefaults(defineProps<Prop>(), {
@@ -23,6 +24,7 @@ const props = withDefaults(defineProps<Prop>(), {
min: 0,
max: 100,
disabled: false,
showDots: true,
});
let rv = toRef(props, "rangeValue");
@@ -129,6 +131,15 @@ function cross(val: any) {
currbtn = currbtn === 0 ? 1 : 0;
}
}
// 断点
const dots = makeDots(props);
console.log(dots);
const focusDot = (item: number) => {
let currbtn = moveNeighbors(item, rv);
rv.value[currbtn] = item;
emit("link-val-hook", rv.value);
};
</script>
<template>
@@ -162,5 +173,13 @@ function cross(val: any) {
class="layui-slider-rate-v"
:class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
></div>
<div
v-show="showDots"
@click="focusDot(item)"
class="layui-slider-dots"
v-for="(item, index) in dots"
:key="index"
:style="{ left: item + '%' }"
></div>
</div>
</template>

26
package/component/src/component/slider/Vertical.vue
View File

@@ -16,6 +16,7 @@ interface Prop {
step?: number;
min?: number;
max?: number;
showDots: boolean;
}
const props = withDefaults(defineProps<Prop>(), {
@@ -24,6 +25,7 @@ const props = withDefaults(defineProps<Prop>(), {
step: 0,
min: 0,
max: 100,
showDots: false,
});
const moveAction = throttle(verticalMove);
@@ -91,6 +93,22 @@ function calcWithStep(
}
}
}
// 断点
const makeDots = () => {
if (props.step === 0) return [];
let val = 0;
let dots = [];
let count = Math.floor(100 / props.step) - 1;
for (let i = 0; i < count; i++) {
val += props.step;
dots.push(val);
}
return dots;
};
const dots = makeDots();
const focusDot = (val: number) => {
emit("link-val-hook", val);
};
</script>
<template>
@@ -115,6 +133,14 @@ function calcWithStep(
class="layui-slider-vertical-rate"
></div>
<div class="layui-slider-vertical-line"></div>
<div
v-show="showDots"
@click="focusDot(item)"
class="layui-slider-vertical-dots"
v-for="(item, index) in dots"
:key="index"
:style="{ bottom: item + '%' }"
></div>
</div>
</div>
</template>

23
package/component/src/component/slider/VerticalRange.vue
View File

@@ -7,15 +7,16 @@ export default {
<script setup lang="ts">
import { ref, toRef, Ref } from "vue";
import { on, off } from "evtd";
import { throttle } from "./utils/index";
// import { throttle } from "./utils/index";
import LayTooltip from "../tooltip/index.vue";
import { throttle, makeDots } from "./utils/index";
interface Prop {
rangeValue: Array<number>;
disabled?: boolean;
step?: number;
min?: number;
max?: number;
showDots?: boolean;
}
const props = withDefaults(defineProps<Prop>(), {
@@ -23,6 +24,7 @@ const props = withDefaults(defineProps<Prop>(), {
min: 0,
max: 100,
disabled: false,
showDots: false,
});
let rv = toRef(props, "rangeValue");
@@ -128,6 +130,15 @@ function cross(val: any) {
currbtn = currbtn === 0 ? 1 : 0;
}
}
// 断点
const dots = makeDots(props);
console.log(dots);
const focusDot = (item: number) => {
let currbtn = moveNeighbors(item, rv);
rv.value[currbtn] = item;
emit("link-val-hook", rv.value);
};
</script>
<template>
@@ -163,6 +174,14 @@ function cross(val: any) {
class="layui-slider-vertical-rate"
:class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
></div>
<div
v-show="showDots"
@click="focusDot(item)"
class="layui-slider-vertical-dots"
v-for="(item, index) in dots"
:key="index"
:style="{ bottom: item + '%' }"
></div>
</div>
</div>
</template>

23
package/component/src/component/slider/index.less
View File

@@ -17,6 +17,7 @@
.layui-slider-btn-v {
width: 12px;
height: 12px;
// background-color: @global-back-color;
background-color: white;
position: absolute;
border: 2px solid var(--global-primary-color);
@@ -39,7 +40,7 @@
.layui-slider-line-v {
width: 100%;
height: 4px;
background-color: #eee;
background-color: #cccccc;
position: absolute;
top: 6px;
}
@@ -114,3 +115,23 @@
position: relative;
cursor: pointer;
}
.layui-slider-dots {
margin-top: 4px;
width: 8px;
height: 8px;
background-color: #ffffff;
border-radius: 5px;
position: absolute;
top:0;
z-index: 1;
}
.layui-slider-vertical-dots {
width: 8px;
height: 8px;
background-color: #ffffff;
border-radius: 5px;
position: absolute;
z-index: 1;
margin-left: 5px;
}

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

@@ -21,6 +21,7 @@ export interface LaySliderProps {
disabled?: boolean;
range?: boolean;
rangeValue?: number[];
showDots?: boolean;
}
const emit = defineEmits(["update:modelValue"]);
@@ -32,6 +33,7 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
step: 0,
min: 0,
max: 100,
showDots: false,
});
let rangeValues: Ref<number[]> | any = toRef(props, "rangeValue");
@@ -53,6 +55,7 @@ function valHook(val: any) {
:rangeValue="rangeValues"
:min="min"
:max="max"
:showDots="showDots"
/>
</div>
<div v-else>
@@ -64,6 +67,7 @@ function valHook(val: any) {
:val="modelValue"
:min="min"
:max="max"
:showDots="showDots"
/>
</div>
</div>
@@ -77,6 +81,7 @@ function valHook(val: any) {
:rangeValue="rangeValues"
:min="min"
:max="max"
:showDots="showDots"
/>
</div>
<div v-else>
@@ -88,6 +93,7 @@ function valHook(val: any) {
:step="step"
:min="min"
:max="max"
:showDots="showDots"
></StandardVue>
</div>
</div>

13
package/component/src/component/slider/utils/index.ts
View File

@@ -13,3 +13,16 @@ export function throttle(func: Function) {
export function handle_select(e: Event): void {
e.preventDefault();
}
export function makeDots(props: any) {
if (props.step === 0) return [];
let val = 0;
let dots = [0];
let count = Math.floor(100 / props.step) - 1;
for (let i = 0; i < count; i++) {
val += props.step;
dots.push(val);
}
dots.push(100);
return dots;
}

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

@@ -8,10 +8,10 @@ export default {
import { watch } from "vue";
import { useI18n } from "vue-i18n";
import {
enable as enableDarkMode,
disable as disableDarkMode,
Theme,
DynamicThemeFix,
enable as enableDarkMode,
disable as disableDarkMode,
} from "darkreader";
const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
@@ -60,9 +60,7 @@ const changeTheme = (theme: string) => {
"div.layui-color-picker *",
],
};
Object.assign(defaultPartial, props.darkPartial);
if (theme === "dark") {
enableDarkMode(defaultPartial, defaultFixes);
} else if (theme === "light") {

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

@@ -188,7 +188,7 @@ export default {
<lay-header>Header</lay-header>
<lay-body>
<lay-layout>
<lay-side :width="160">Left</lay-side>
<lay-side>Left</lay-side>
<lay-body>Content</lay-body>
</lay-layout>
</lay-body>
@@ -200,7 +200,7 @@ export default {
<lay-body>
<lay-layout>
<lay-body>Content</lay-body>
<lay-side :width="160">Right</lay-side>
<lay-side>Right</lay-side>
</lay-layout>
</lay-body>
<lay-footer>Footer</lay-footer>

1
package/document/src/document/zh-CN/components/menu.md
View File

@@ -487,6 +487,7 @@ export default {
| level | 菜单层级 | `true` `false` |
| collapse | 折叠状态 | `true` `false` |
| collapse-transition | 折叠动画 | `true` `false` |
| child-spacing | 子菜单增加间距 | `true` `false` |
:::

7
package/document/src/document/zh-CN/components/slider.md
View File

@@ -13,7 +13,7 @@
::: demo 使用 `lay-slider` 标签, 创建滑块
<template>
<lay-slider :max="88" v-model="value1" :disabled="false"></lay-slider>
<lay-slider :showDots="true" :step="10" :max="100" v-model="value1" :disabled="false"></lay-slider>
<lay-input-number v-model="value1"></lay-input-number>
</template>
@@ -37,7 +37,7 @@ export default {
::: demo
<template>
<lay-slider v-model="value2" :vertical="true" :disabled="false"></lay-slider>
<lay-slider :showDots="false" :step="10" v-model="value2" :vertical="true" :disabled="false"></lay-slider>
</template>
<script>
@@ -63,7 +63,7 @@ export default {
::: demo
<template>
<lay-slider :disabled="false" :min="10" :max="80" v-model:rangeValue="value3" :range="true"></lay-slider>
<lay-slider :disabled="false" :min="0" :max="100" v-model:rangeValue="value3" :range="true"></lay-slider>
</template>
<script>
@@ -115,6 +115,7 @@ export default {
| step | 步长 | `Number` | - | - |
| min | 最小值 | `Number` | - | - |
| max | 最大值 | `Number` | - | - |
| showDots | 是否显示断点 | `Boolean` | - | false |
:::

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

@@ -11,6 +11,18 @@
<template>
<lay-timeline>
<lay-timeline-item title="1.0.x">
<ul>
<a name="1-0-7"></a>
<li>
<h3>1.0.7 <span class="layui-badge-rim">2022-05-03</span></h3>
<ul>
<li>[新增] menu 组件 changeOpenKeys 事件。</li>
<li>[新增] menu 组件 changeSelectedKey 事件。</li>
<li>[新增] slider 组件 showDots 属性, 显示步长断点。</li>
<li>[修复] side 组件 width 属性失效, 随内容宽度自适应的问题。</li>
</ul>
</li>
</ul>
<ul>
<a name="1-0-6"></a>
<li>

25
package/document/src/document/zh-CN/guide/locale.md
View File

@@ -10,4 +10,29 @@
<App />
</lay-config-provider>
</template>
```
::: describe layui-vue 内部会维护一个 vue-i18n 实例, 你无需再去创建，直接使用 useI18n() 获取即可
:::
::: describe 你可以使用 locales 属性来扩展语言包, 用户自定义语言包优先级大于组件库内部维护的语言包, 即你可以扩展亦可以覆盖。
:::
```vue
<template>
<lay-config-provider locale="zh_CN" :locales="locales">
<App />
</lay-config-provider>
</template>
<script setup>
const locales = [
'zh_CN': {
message: '你好, layui-vue'
},
'en_US': {
message: 'hello, layui-vue'
}
];
</script>
```

10
package/document/src/document/zh-CN/guide/member.md
View File

@@ -43,7 +43,7 @@
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar>
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png!avatar200"></lay-avatar>
</lay-col>
<lay-col md="3">
halo
@@ -83,7 +83,7 @@
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png!avatar200"></lay-avatar>
</lay-col>
<lay-col md="3">
Sight
@@ -103,7 +103,7 @@
<lay-card>
<lay-row>
<lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png!avatar200"></lay-avatar>
</lay-col>
<lay-col md="3">
finalsummer
@@ -151,6 +151,8 @@
::: describe
[![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/DBC9Z6HQ.png)](https://giteye.net/chart/DBC9Z6HQ)
<a href="https://github.com/layui-vue/layui-vue/graphs/contributors">
<img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
</a>
:::