From 49e2d25d6d1b9e0996c70a5452535482357bb8b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= <zhangzheng7856@126.com>
Date: Mon, 18 Jul 2022 15:41:02 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=80(component):=20input=20select=20cas?=
 =?UTF-8?q?cader=20datepicker=E5=8A=A0=E5=85=A5size=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/cascader/index.vue          |  5 ++-
 .../src/component/datePicker/index.vue        |  5 +++
 .../component/src/component/input/index.less  | 30 +++++++++++++
 .../component/src/component/input/index.vue   |  4 +-
 .../component/src/component/select/index.less | 45 ++++++++++++++++++-
 .../component/src/component/select/index.vue  |  3 ++
 .../src/document/zh-CN/components/cascader.md |  1 +
 .../document/zh-CN/components/datePicker.md   |  2 +-
 .../src/document/zh-CN/components/input.md    | 20 +++++++++
 .../src/document/zh-CN/components/select.md   |  1 +
 10 files changed, 111 insertions(+), 5 deletions(-)

diff --git a/package/component/src/component/cascader/index.vue b/package/component/src/component/cascader/index.vue
index c4c4f42f..507baf0a 100644
--- a/package/component/src/component/cascader/index.vue
+++ b/package/component/src/component/cascader/index.vue
@@ -14,6 +14,7 @@
       v-if="!slots.default"
       :allow-clear="allowClear"
       @clear="onClear"
+      :size="size"
     ></lay-input>
     <slot v-else></slot>
 
@@ -74,6 +75,7 @@ export interface LayCascaderProps {
   onlyLastLevel?: boolean;
   replaceFields?: { label: string; value: string; children: string };
   allowClear?: boolean;
+  size?: "lg" | "md" | "sm" | "xs";
 }
 const props = withDefaults(defineProps<LayCascaderProps>(), {
   options: null,
@@ -82,6 +84,7 @@ const props = withDefaults(defineProps<LayCascaderProps>(), {
   placeholder: "",
   onlyLastLevel: false,
   allowClear: false,
+  size:'md',
   replaceFields: () => {
     return {
       label: "label",
@@ -250,7 +253,7 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
   }
 };
 
-const displayValue = ref<string | number | null>(null);
+const displayValue = ref<string | number >('');
 const slots = useSlots();
 const dropdownRef = ref();
 const dropDownDisabled = ref(false);
diff --git a/package/component/src/component/datePicker/index.vue b/package/component/src/component/datePicker/index.vue
index 314a0b29..f2c80854 100644
--- a/package/component/src/component/datePicker/index.vue
+++ b/package/component/src/component/datePicker/index.vue
@@ -15,6 +15,7 @@
         v-if="!range"
         @change="onChange"
         :allow-clear="!disabled && allowClear"
+        :size="size"
         @clear="
           dateValue = '';
           onChange();
@@ -29,6 +30,7 @@
           :disabled="disabled"
           @change="onChange"
           class="start-input"
+          :size="size"
         >
         </lay-input>
         <span class="range-separator">{{ rangeSeparator }}</span>
@@ -40,6 +42,7 @@
           :disabled="disabled"
           @change="onChange"
           class="end-input"
+          :size="size"
           @clear="
             dateValue = [];
             onChange();
@@ -130,6 +133,7 @@ export interface LayDatePickerProps {
   rangeSeparator?: string;
   readonly?: boolean;
   allowClear?: boolean;
+  size?: "lg" | "md" | "sm" | "xs";
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -141,6 +145,7 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   rangeSeparator: "至",
   readonly: false,
   allowClear: true,
+  size:'md',
 });
 
 const dropdownRef = ref(null);
diff --git a/package/component/src/component/input/index.less b/package/component/src/component/input/index.less
index 1bfe4d1d..7a205211 100644
--- a/package/component/src/component/input/index.less
+++ b/package/component/src/component/input/index.less
@@ -3,6 +3,21 @@
   --input-border-color: var(--global-neutral-color-3);
 }
 
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+
+.set-size(@size) {
+  & {
+    height: @size;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+  }
+}
+
 
 .layui-input {
   width: 100%;
@@ -82,3 +97,18 @@
 .layui-input input::-webkit-input-placeholder {
   line-height: 1.3;
 }
+
+.layui-input{
+  &[size="lg"] {
+    .set-size(@lg);
+  }
+  &[size="md"] {
+    .set-size(@md);
+  }
+  &[size="sm"] {
+    .set-size(@sm);
+  }
+  &[size="xs"] {
+    .set-size(@xs);
+  }
+}
\ No newline at end of file
diff --git a/package/component/src/component/input/index.vue b/package/component/src/component/input/index.vue
index 8133d562..61b269df 100644
--- a/package/component/src/component/input/index.vue
+++ b/package/component/src/component/input/index.vue
@@ -23,6 +23,7 @@ export interface LayInputProps {
   disabled?: boolean;
   readonly?: boolean;
   password?: boolean;
+  size?: "lg" | "md" | "sm" | "xs";
 }
 
 const props = withDefaults(defineProps<LayInputProps>(), {
@@ -32,6 +33,7 @@ const props = withDefaults(defineProps<LayInputProps>(), {
   autofocus: false,
   password: false,
   modelValue: "",
+  size:'md',
 });
 
 interface InputEmits {
@@ -115,7 +117,7 @@ const showPassword = () => {
 </script>
 
 <template>
-  <div class="layui-input">
+  <div class="layui-input" :size="size">
     <div class="layui-input-prepend" v-if="slots.prepend">
       <slot name="prepend"></slot>
     </div>
diff --git a/package/component/src/component/select/index.less b/package/component/src/component/select/index.less
index e426ec7a..aea512dd 100644
--- a/package/component/src/component/select/index.less
+++ b/package/component/src/component/select/index.less
@@ -1,5 +1,30 @@
 @import "../badge/index.less";
 @import "../checkbox/index.less";
+@import "../input/index.less";
+
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+@lg-badge:32px;
+@md-badge:26px;
+@sm-badge:20px;
+@xs-badge:14px;
+
+.set-size(@size,@badge-size) {
+  & {
+    height: @size;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+    .layui-badge{
+      height: @badge-size;
+      line-height: @badge-size;
+      box-sizing: border-box;
+    }
+  }
+}
 
 dl.layui-anim-upbit > dd input[type="checkbox"] {
   display: none;
@@ -62,7 +87,9 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 .layui-form-select {
   position: relative;
 }
-
+.layui-select-title{
+  height: 100%;
+}
 .layui-select-title .layui-input {
   padding-left: 10px;
   padding-right: 30px;
@@ -155,4 +182,18 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
   .layui-input-wrapper:focus-within {
     border-color: var(--input-border-color);
   }
-}
\ No newline at end of file
+}
+.layui-form-select{
+  &[size="lg"] {
+    .set-size(@lg,@lg-badge);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-badge);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-badge);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-badge);
+  }
+}
diff --git a/package/component/src/component/select/index.vue b/package/component/src/component/select/index.vue
index 1d3ee39e..7817a89c 100644
--- a/package/component/src/component/select/index.vue
+++ b/package/component/src/component/select/index.vue
@@ -30,6 +30,7 @@ export interface LaySelectProps {
     disabled: boolean;
     keyword: string;
   }[];
+  size?: "lg" | "md" | "sm" | "xs";
 }
 
 const selectRef = shallowRef<undefined | HTMLElement>(undefined);
@@ -46,6 +47,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
   showEmpty: true,
   multiple: false,
   create: false,
+  size:'md',
 });
 
 const openState = ref(false);
@@ -173,6 +175,7 @@ provide("keyword", txt);
     ref="selectRef"
     class="layui-unselect layui-form-select"
     :class="{ 'layui-form-selected': openState }"
+    :size='size'
   >
     <div class="layui-select-title" @click="open">
       <input
diff --git a/package/document-component/src/document/zh-CN/components/cascader.md b/package/document-component/src/document/zh-CN/components/cascader.md
index 0a0673a2..f74b4289 100644
--- a/package/document-component/src/document/zh-CN/components/cascader.md
+++ b/package/document-component/src/document/zh-CN/components/cascader.md
@@ -699,6 +699,7 @@ const options3=[
 | onlyLastLevel            | 回显display仅显示最后一级，默认为 `false`  |
 | replaceFields            | 自定义数据key名,可配置项为`label`,`value`,`children`,用法详见上面案例  |
 | allow-clear              | 默认slot提供清空功能，与lay-input保持一致|
+| size                     | 尺寸参数，与lay-input保持一致|
 :::
 
 ::: title Cascader 事件
diff --git a/package/document-component/src/document/zh-CN/components/datePicker.md b/package/document-component/src/document/zh-CN/components/datePicker.md
index aaf894bd..1b6b8fb8 100644
--- a/package/document-component/src/document/zh-CN/components/datePicker.md
+++ b/package/document-component/src/document/zh-CN/components/datePicker.md
@@ -262,7 +262,7 @@ const rangeTime3 = ref(['2022-01-01','2023-02-1']);
 | simple      | 一次性选择，无需点击确认按钮             | `boolean`         | false    | —             |
 | readonly      | 只读             | `boolean`         | false    | —             |
 | allowClear    | 允许清空             | `boolean`         | true    | —             |
-
+| size    | 尺寸            | `string`         | `lg` `md` `sm` `xs`    | `md`            |
 
 :::
 
diff --git a/package/document-component/src/document/zh-CN/components/input.md b/package/document-component/src/document/zh-CN/components/input.md
index 845af2ea..ec804982 100644
--- a/package/document-component/src/document/zh-CN/components/input.md
+++ b/package/document-component/src/document/zh-CN/components/input.md
@@ -243,6 +243,25 @@ export default {
 
 :::
 
+::: title 尺寸Size
+:::
+
+::: demo
+
+<template>
+  <div>
+      <lay-input size="lg" placeholder='lg'></lay-input>
+      <lay-input size="md" placeholder='md' style='margin-top:10px'></lay-input>
+      <lay-input size="sm" placeholder='sm' style='margin-top:10px'></lay-input>
+      <lay-input size="xs" placeholder='xs' style='margin-top:10px'></lay-input>
+    </div>
+</template>
+
+<script>
+</script>
+
+:::
+
 ::: title Input 属性
 :::
 
@@ -261,6 +280,7 @@ export default {
 | prefix-icon              | 前置图标              | --             |
 | suffix-icon              | 后置图标              | --             |
 | password                 | 开启密码显示隐藏       | `true` `false`|
+| size                     | 尺寸       | `lg` `md` `sm` `xs`，默认`md`|
 
 :::
 
diff --git a/package/document-component/src/document/zh-CN/components/select.md b/package/document-component/src/document/zh-CN/components/select.md
index 4d9806bb..c8c5e546 100644
--- a/package/document-component/src/document/zh-CN/components/select.md
+++ b/package/document-component/src/document/zh-CN/components/select.md
@@ -310,6 +310,7 @@ export default {
 | showEmpty    | 是否增加空提示选项     | `boolean`                  | `true` `false` | `true` |
 | multiple     | 是否为多选            | `boolean`                  | `true` `false` | `false` |
 | create       | 是否允许创建            | `boolean`                  | `true` `false` | `false` |
+| size         | 尺寸            | `string`                  | `lg` `md` `sm` `xs`| `md` |
 
 
 :::