Merge branch 'next' into doc-demand

2022-05-09 20:34:29 +08:00
parent e1dce138ff 1f605715fc
commit de27474ac7
22 changed files with 257 additions and 157 deletions
--- a/package/component/package.json
+++ b/package/component/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@layui/layui-vue",
-  "version": "1.0.7-alpha.1",
+  "version": "1.0.7",
  "author": "就眠儀式",
  "license": "MIT",
  "description": "a component library for Vue 3 base on layui-vue",
@@ -32,7 +32,7 @@
  "dependencies": {
    "@layui/icons-vue": "^1.0.8",
    "@layui/layer-vue": "^1.3.13",
-    "@vueuse/core": "^8.3.1",
+    "@vueuse/core": "^8.4.2",
    "animate.css": "^4.1.1",
    "async-validator": "^4.0.7",
    "cropperjs": "^1.5.12",
@@ -55,7 +55,7 @@
    "rimraf": "^3.0.2",
    "rollup": "^2.70.1",
    "typescript": "^4.6.3",
-    "vite": "2.9.2"
+    "vite": "2.9.8"
  },
  "files": [
    "lib",
--- a/package/component/src/component/checkbox/index.less
+++ b/package/component/src/component/checkbox/index.less
@@ -1,3 +1,7 @@
+.layui-checkbox input[type="checkbox"] {
+  display: none;
+}
+
 .layui-form-checkbox {
  position: relative;
  height: 30px;
--- a/package/component/src/component/checkbox/index.vue
+++ b/package/component/src/component/checkbox/index.vue
@@ -94,7 +94,7 @@ const handleClick = function () {
 </script>

 <template>
-  <span @click.stop="handleClick">
+  <span @click.stop="handleClick" class="layui-checkbox">
    <input type="checkbox" :name="name" :value="label" />
    <div
      class="layui-unselect layui-form-checkbox"
--- a/package/component/src/component/input/index.vue
+++ b/package/component/src/component/input/index.vue
@@ -22,9 +22,17 @@ export interface LayInputProps {
  modelValue?: string;
  placeholder?: string;
  allowClear?: boolean;
+  autofocus?: boolean;
+  autocomplete?: boolean;
 }

-const props = withDefaults(defineProps<LayInputProps>(), {});
+const props = withDefaults(defineProps<LayInputProps>(), {
+  disabled: false,
+  readonly: false,
+  allowClear: false,
+  autofocus: false,
+  autocomplete: false,
+});

 const emit = defineEmits([
  "update:modelValue",
@@ -34,9 +42,10 @@ const emit = defineEmits([
  "blur",
 ]);

-const onInput = function (event: InputEvent) {
+const onInput = function (event: Event) {
  const inputElement = event.target as HTMLInputElement;
-  emit("update:modelValue", inputElement.value);
+  const value = inputElement.value;
+  emit("update:modelValue", value);
  emit("input", event);
 };

@@ -44,16 +53,16 @@ const onClear = () => {
  emit("update:modelValue", "");
 };

-const onFocus = (event: FocusEvent) => {
+const onFocus = (event: Event) => {
  emit("focus", event);
 };

-const onChange = () => {
-  emit("change");
+const onChange = (event: Event) => {
+  emit("change", event);
 };

-const onBlur = () => {
-  emit("blur");
+const onBlur = (event: Event) => {
+  emit("blur", event);
 };
 </script>

@@ -68,13 +77,15 @@ const onBlur = () => {
      :value="modelValue || value"
      :disabled="disabled"
      :placeholder="placeholder"
+      :autofocus="autofocus"
+      :autocomplete="autocomplete"
+      :readonly="readonly"
      :class="{ 'layui-disabled': disabled }"
      class="layui-input"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      @change="onChange"
-      :readonly="props.readonly"
    />
    <span class="layui-input-suffix" v-if="slots.suffix">
      <slot name="suffix"></slot>
--- a/package/component/src/component/inputNumber/index.vue
+++ b/package/component/src/component/inputNumber/index.vue
@@ -5,10 +5,10 @@ export default {
 </script>

 <script setup lang="ts">
-import layButton from "../button/index.vue";
+import "./index.less";
 import layInput from "../input/index.vue";
 import { LayIcon } from "@layui/icons-vue";
-import "./index.less";
+import layButton from "../button/index.vue";
 import { ref, watch, withDefaults, computed } from "vue";

 export interface LayInputNumberProps {
@@ -65,6 +65,7 @@ let timer: any = 0;
 const minControl = computed(
  () => props.min !== -Infinity && Number(props.min) >= num.value
 );
+
 const maxControl = computed(
  () => props.max !== Infinity && Number(props.max) <= num.value
 );
--- a/package/component/src/component/menu/index.vue
+++ b/package/component/src/component/menu/index.vue
@@ -5,7 +5,15 @@ export default {
 </script>

 <script setup lang="ts">
-import { computed, provide, ref, watch } from "vue";
+import {
+  computed,
+  ComputedRef,
+  provide,
+  Ref,
+  ref,
+  watch,
+  WritableComputedRef,
+} from "vue";
 import "./index.less";

 export interface LayMenuProps {
@@ -39,10 +47,12 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
  childSpacing: false,
 });

-const isTree = computed(() => props.tree);
-const isCollapse = computed(() => props.collapse);
-const isCollapseTransition = computed(() => props.collapseTransition);
-let oldOpenKeys = ref<string[]>(props.openKeys);
+const isTree: ComputedRef = computed(() => props.tree);
+const isCollapse: ComputedRef = computed(() => props.collapse);
+const isCollapseTransition: ComputedRef = computed(
+  () => props.collapseTransition
+);
+const oldOpenKeys: Ref = ref<string[]>(props.openKeys);

 const openKeys = computed({
  get() {
--- a/package/component/src/component/radio/index.less
+++ b/package/component/src/component/radio/index.less
@@ -1,3 +1,7 @@
+.layui-radio input[type="radio"]{
+  display: none;
+}
+
 .layui-form-radio,
 .layui-form-radio * {
  display: inline-block;
--- a/package/component/src/component/radio/index.vue
+++ b/package/component/src/component/radio/index.vue
@@ -28,7 +28,7 @@ const handleClick = function () {
 </script>

 <template>
-  <span>
+  <span class="layui-radio">
    <input type="radio" :value="label" :name="name" />
    <div
      class="layui-unselect layui-form-radio"
--- a/package/component/src/component/select/index.less
+++ b/package/component/src/component/select/index.less
@@ -60,7 +60,6 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
  line-height: 1.3;
 }

-
 .layui-form-select {
  .layui-input {
    border: 1px solid #eeeeee;
--- a/package/component/src/component/side/index.vue
+++ b/package/component/src/component/side/index.vue
@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<LaySideProps>(), {

 const styles = computed<CSSProperties>(() => {
  return {
-    "flex": `0 0 ${props.width}`,
-    "width": `${props.width}`
+    flex: `0 0 ${props.width}`,
+    width: `${props.width}`,
  };
 });
 </script>
--- a/package/component/src/component/subMenu/index.vue
+++ b/package/component/src/component/subMenu/index.vue
@@ -48,11 +48,13 @@ watch(isOpen, () => {

 const openHandle = function () {
  if (!isCollapse.value) {
+    let newOpenKeys = [...openKeys.value];
    if (openKeys.value.includes(props.id)) {
-      openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
+      newOpenKeys.splice(newOpenKeys.indexOf(props.id), 1);
    } else {
-      openKeys.value.push(props.id);
+      newOpenKeys.push(props.id);
    }
+    openKeys.value = newOpenKeys;
  }
 };

--- a/package/component/src/theme/public.less
+++ b/package/component/src/theme/public.less
@@ -178,12 +178,6 @@ a cite {
  border-color: var(--global-neutral-color-3);
 }

-.layui-form input[type="checkbox"],
-.layui-form input[type="radio"],
-.layui-form select {
-  display: none;
-}
-
 .layui-form-checkbox,
 .layui-form-checkbox *,
 .layui-form-switch {
--- a/package/document/package.json
+++ b/package/document/package.json
@@ -36,7 +36,7 @@
    "rimraf": "^3.0.2",
    "rollup": "^2.70.1",
    "typescript": "^4.6.3",
-    "vite": "2.9.2",
+    "vite": "2.9.8",
    "vite-plugin-md": "^0.12.4",
    "unplugin-auto-import": "^0.7.1",
    "unplugin-vue-components": "^0.19.3",
--- a/package/document/src/document/zh-CN/components/checkbox.md
+++ b/package/document/src/document/zh-CN/components/checkbox.md
@@ -13,9 +13,7 @@
 ::: demo 使用 `lay-checkbox` 标签, 创建一个复选框

 <template>
-  <lay-form>
    <lay-checkbox name="like" skin="primary"  v-model="checked1" label="1" ></lay-checkbox>
- </lay-form>
 </template>

 <script>
@@ -41,9 +39,7 @@ export default {
 ::: demo

 <template>
-  <lay-form>
    <lay-checkbox name="like" label="1" v-model="checked2" >普通</lay-checkbox>
- </lay-form>
 </template>

 <script>
@@ -69,13 +65,11 @@ export default {
 ::: demo

 <template>
-  <lay-form>
    <lay-checkbox-group v-model="checkeds" @change="groupChange">
      <lay-checkbox name="like" skin="primary" label="1">写作</lay-checkbox>
      <lay-checkbox name="like" skin="primary" label="2">画画</lay-checkbox>
      <lay-checkbox name="like" skin="primary" label="3">运动</lay-checkbox>
    </lay-checkbox-group>
-  </lay-form>
 </template>

 <script>
@@ -105,11 +99,9 @@ export default {
 ::: demo

 <template>
-  <lay-form>
    <lay-checkbox name="like" skin="primary" v-model="checked3" label="1">写作</lay-checkbox>
    <lay-checkbox name="like" skin="primary" v-model="checked4" label="2">画画</lay-checkbox>
    <lay-checkbox name="like" skin="primary" v-model="checked5" label="3">运动</lay-checkbox>
-  </lay-form>
 </template>

 <script>
@@ -137,9 +129,7 @@ export default {
 ::: demo

 <template>
-  <lay-form>
    <lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
- </lay-form>
 </template>

 <script>
@@ -167,9 +157,7 @@ export default {
 ::: demo

 <template>
-  <lay-form>
    <lay-checkbox name="like" skin="primary" label="1" @change="change" v-model="checked7">回调</lay-checkbox>
- </lay-form>
 </template>

 <script>
--- a/package/document/src/document/zh-CN/components/input.md
+++ b/package/document/src/document/zh-CN/components/input.md
@@ -13,6 +13,7 @@
 ::: demo 使用 `lay-input` 标签, 创建输入框

 <template>
+  {{ data1 }}
  <lay-input v-model="data1"></lay-input>
 </template>

@@ -170,29 +171,32 @@ export default {

 ::: table

-| 属性        | 描述          | 可选值         |
-| ----------- | ------------- | -------------- |
-| name        | 原始属性 name | --             |
-| placeholder | 提示信息      | --             |
-| disabled    | 禁用          | `true` `false` |
-| v-model     | 值            | --             |
+| 属性                     | 描述                  | 可选值         |
+| -----------------------  | -------------------- | -------------- |
+| name                     | 原始属性 name         | --             |
+| placeholder              | 提示信息              | --             |
+| disabled                 | 禁用                  | `true` `false` |
+| readonly                 | 原生属性 readonly     | `true` `false` |
+| v-model / modelValue     | 值                   | --             |
+| autofocus                | 原生属性 autofocus    | `true` `false` |
+| autocomplete             | 原生属性 autocomplete | `true` `false` |

 :::

-::: title Input 属性
+::: title Input 事件
 :::

 ::: table

-| 事件  | 描述            | 参数             |
-| ----- | --------------- | ---------------- |
-| input | 原生 input 事件 | event : 事件对象 |
-| foucs | 原生 foucs 事件 | event : 事件对象 |
-| blur  | 原生 blur 事件  | --               |
+| 事件  | 描述                | 参数             |
+| ----- | ------------------- | ----------------|
+| input | 原生 input 事件     | event : Event    |
+| foucs | 原生 foucs 事件     | event : Event    |
+| blur  | 原生 blur 事件      | event : Event    |
+| change| 原生 change 事件    | event : Event    |
+| clear | 清空 事件           | --               |

 :::

- 
-
 ::: previousNext input
 :::
--- a/package/document/src/document/zh-CN/components/menu.md
+++ b/package/document/src/document/zh-CN/components/menu.md
@@ -59,7 +59,8 @@ export default {
 ::: demo

 <template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :tree="true">
+  选中：{{ selectedKey }} 打开： {{ openKeys2 }}
+  <lay-menu :selectedKey="selectedKey" @changeSelectedKey="changeSelectedKey" @changeOpenKeys="changeOpenKeys" v-model:openKeys="openKeys2" :tree="true">
    <lay-menu-item id="1">首页</lay-menu-item>
    <lay-menu-item id="2">首页</lay-menu-item>
    <lay-menu-item id="3">首页</lay-menu-item> 
@@ -89,10 +90,19 @@ export default {

    const openKeys2 = ref(["7"])
    const selectedKey = ref("5")
+    const changeSelectedKey = (val) => {
+      selectedKey.value = val;
+    }
+
+    const changeOpenKeys = (val) => {
+      openKeys2.value = val;
+    }

    return {
      openKeys2,
-      selectedKey
+      selectedKey,
+      changeOpenKeys,
+      changeSelectedKey
    }
  }
 }
@@ -473,6 +483,65 @@ export default {

 :::

+::: title 层级缩进
+:::
+
+::: demo
+
+<template>
+  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys7" :child-spacing="childSpacing" v-model:tree="isTree">
+    <lay-menu-item id="1">
+      <router-link to="">
+        <lay-icon type="layui-icon-home"></lay-icon> 
+        首页
+      </router-link>
+    </lay-menu-item>
+    <lay-sub-menu id="7">
+        <template v-slot:title> 
+          <router-link to="">
+            <lay-icon type="layui-icon-home"></lay-icon> 
+            目录
+          </router-link>
+        </template>
+        <lay-menu-item id="8">
+            <router-link to="">
+              <lay-icon type="layui-icon-home"></lay-icon> 
+              菜单
+            </router-link>
+        </lay-menu-item> 
+        <lay-menu-item id="9">
+            <router-link to="">
+              <lay-icon type="layui-icon-home"></lay-icon> 
+              菜单
+            </router-link>
+        </lay-menu-item>
+    </lay-sub-menu> 
+  </lay-menu>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const isTree = ref(true)
+    const selectedKey = ref("5")
+    const openKeys7 = ref(["7"])
+    const childSpacing = ref(true); 
+
+    return {
+      isTree,
+      openKeys7,
+      selectedKey,
+      childSpacing
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Menu 属性
 :::

@@ -535,7 +604,5 @@ export default {

 :::

- 
-
 ::: previousNext nav
 :::
--- a/package/document/src/document/zh-CN/components/radio.md
+++ b/package/document/src/document/zh-CN/components/radio.md
@@ -13,11 +13,9 @@
 ::: demo 使用 `lay-radio` 标签, 创建一个单选框

 <template>
-  <lay-form>
    <lay-radio v-model="selected1" name="action" label="1">写作</lay-radio>
    <lay-radio v-model="selected1" name="action" label="2">画画</lay-radio>
    <lay-radio v-model="selected1" name="action" label="3">运动</lay-radio>
-  </lay-form>
 </template>

 <script>
@@ -43,12 +41,10 @@ export default {
 ::: demo

 <template>
-  <lay-form>
    <lay-radio v-model="selected2" name="action" label="1">写作</lay-radio>
    <lay-radio v-model="selected2" name="action" label="2">画画</lay-radio>
    <lay-radio v-model="selected2" name="action" label="3">运动</lay-radio>
    <lay-radio v-model="selected2" name="action" label="4" :disabled="disabled">禁用</lay-radio>
-  </lay-form>
 </template>

 <script>
@@ -76,11 +72,9 @@ export default {
 ::: demo

 <template>
-  <lay-form>
    <lay-radio v-model="selected3" name="action" label="1" @change="change">写作</lay-radio>
    <lay-radio v-model="selected3" name="action" label="2" @change="change">画画</lay-radio>
    <lay-radio v-model="selected3" name="action" label="3" @change="change">运动</lay-radio>
-  </lay-form>
 </template>

 <script>
--- a/package/document/src/document/zh-CN/components/switch.md
+++ b/package/document/src/document/zh-CN/components/switch.md
@@ -194,13 +194,12 @@ export default {

 ::: table

-| 属性   | 描述     | 可选值           |
+| 属性   | 描述     | 参数           |
 | ------ | -------- | ---------------- |
-| change | 切换事件 | current : 当前值 |
+| change | 切换事件 | val : 当前值 |

 :::

- 
 ::: title Switch 插槽
 :::

--- a/package/document/src/document/zh-CN/guide/changelog.md
+++ b/package/document/src/document/zh-CN/guide/changelog.md
@@ -14,12 +14,18 @@
    <ul> 
      <a name="1-0-7"></a> 
      <li> 
-        <h3>1.0.7 <span class="layui-badge-rim">2022-05-03</span></h3> 
+        <h3>1.0.7 <span class="layui-badge-rim">2022-05-09</span></h3> 
        <ul>
          <li>[新增] menu 组件 changeOpenKeys 事件。</li>
          <li>[新增] menu 组件 changeSelectedKey 事件。</li>
+          <li>[新增] menu 组件 childSpacing 属性, 开启菜单层级缩进。</li>
          <li>[新增] slider 组件 showDots 属性, 显示步长断点。</li>
-          <li>[修复] side 组件 width 属性失效, 随内容宽度自适应的问题。</li>
+          <li>[新增] input 组件 autocomplete 原生属性。</li>
+          <li>[新增] input 组件 autofocus 原生属性。</li>
+          <li>[修复] side 组件 width 属性无效。</li>
+          <li>[优化] checkbox 组件 css 样式。</li>
+          <li>[优化] radio 组件 css 样式。</li>
+          <li>[升级] vueuse/core 8.4.2。</li>
        </ul> 
      </li>
    </ul>
--- a/package/icons/package.json
+++ b/package/icons/package.json
@@ -39,7 +39,7 @@
    "rimraf": "^3.0.2",
    "rollup": "^2.70.1",
    "typescript": "^4.6.3",
-    "vite": "2.9.2"
+    "vite": "2.9.8"
  },
  "files": [
    "lib",
--- a/package/layer/package.json
+++ b/package/layer/package.json
@@ -36,7 +36,7 @@
    "rimraf": "^3.0.2",
    "rollup": "^2.70.1",
    "typescript": "^4.6.3",
-    "vite": "2.9.2"
+    "vite": "2.9.8"
  },
  "files": [
    "lib",