✨(component): update

2022-09-24 13:22:05 +08:00 · 2022-09-24 13:22:05 +08:00 · 4db23c9f8a
commit 4db23c9f8a
parent 06149b7e77
7 changed files with 117 additions and 49 deletions
--- a/package/component/src/component/input/index.vue
+++ b/package/component/src/component/input/index.vue
@ -166,14 +166,6 @@ const showPassword = () => {
        @compositionstart="onCompositionstart"
        @compositionend="onCompositionend"
      />
-      <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
-        <slot name="suffix" v-if="slots.suffix"></slot>
-        <lay-icon
-          v-else
-          :type="props.suffixIcon"
-          class="layui-input-suffix-icon"
-        ></lay-icon>
-      </span>
      <span
        class="layui-input-password"
        @click="showPassword"
@ -185,6 +177,14 @@ const showPassword = () => {
      <span class="layui-input-clear" v-if="allowClear && hasContent">
        <lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
      </span>
+      <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
+        <slot name="suffix" v-if="slots.suffix"></slot>
+        <lay-icon
+          v-else
+          :type="props.suffixIcon"
+          class="layui-input-suffix-icon"
+        ></lay-icon>
+      </span>
    </div>
    <div class="layui-input-append" v-if="slots.append">
      <slot name="append"></slot>
--- a/package/component/src/component/select/index.vue
+++ b/package/component/src/component/select/index.vue
@ -10,9 +10,7 @@ import { provide, computed, WritableComputedRef, ref } from "vue";
 import LayInput from "../input/index.vue";
 import LayTagInput from "../tagInput/index.vue";
 import LayDropdown from "../dropdown/index.vue";
-import LaySelectOption, {
-  LaySelectOptionProps,
-} from "../selectOption/index.vue";
+import LaySelectOption, { LaySelectOptionProps } from "../selectOption/index.vue";

 export interface LaySelectProps {
  name?: string;
@ -67,16 +65,35 @@ provide("multiple", multiple);
 <template>
  <div class="layui-select">
    <lay-dropdown update-at-scroll>
-      <lay-tag-input v-if="multiple" v-model="selectedValue" :disabledInput="true"></lay-tag-input>
+      <lay-tag-input
+        v-if="multiple"
+        v-model="selectedValue"
+        :disabledInput="true"
+        :allow-clear="true"
+      >
+        <template #suffix>
+          <lay-icon type="layui-icon-triangle-d"></lay-icon>
+        </template>
+      </lay-tag-input>
      <lay-input
        v-else
-        :placeholder="placeholder"
        v-model="selectedValue"
-      ></lay-input>
+        :placeholder="placeholder"
+        :allow-clear="true"
+      >
+        <template #suffix>
+          <lay-icon type="layui-icon-triangle-d"></lay-icon>
+        </template>
+      </lay-input>
      <template #content>
        <dl class="layui-select-options">
          <div class="layui-select-search">
-            <lay-input v-model="searchValue" size="sm" placeholder="请选择" prefix-icon="layui-icon-search"></lay-input>
+            <lay-input
+              v-model="searchValue"
+              size="sm"
+              placeholder="请选择"
+              prefix-icon="layui-icon-search"
+            ></lay-input>
          </div>
          <template v-if="items">
            <lay-select-option
--- a/package/component/src/component/selectOption/index.vue
+++ b/package/component/src/component/selectOption/index.vue
@ -22,7 +22,7 @@ const props = withDefaults(defineProps<LaySelectOptionProps>(), {
 });

 const selectedValue: WritableComputedRef<any> = inject("selectedValue") as WritableComputedRef<any>;
-const searchValue: Ref<string> = inject('searchValue') as Ref<string>;
+const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
 const multiple: ComputedRef = inject("multiple") as ComputedRef;

 const handleSelect = () => {
@ -35,14 +35,16 @@ const selected = computed(() => {
  if (multiple.value) {
    return selectedValue.value.indexOf(props.value) != -1;
  } else {
-    // close dropdown
    return selectedValue.value === props.value;
  }
 });

 const display = computed(() => {
-  return props.keyword.indexOf(searchValue.value) > -1 || props.label.indexOf(searchValue.value) > -1;
-})
+  return (
+    props.keyword.indexOf(searchValue.value) > -1 ||
+    props.label.indexOf(searchValue.value) > -1
+  );
+});
 </script>

 <template>
@ -52,7 +54,11 @@ const display = computed(() => {
    @click="handleSelect"
  >
    <template v-if="multiple">
-      <lay-checkbox v-model="selectedValue" :value="value" skin="primary"></lay-checkbox>
+      <lay-checkbox
+        v-model="selectedValue"
+        :value="value"
+        skin="primary"
+      ></lay-checkbox>
    </template>
    <slot>{{ label }}</slot>
  </dd>
--- a/package/component/src/component/tagInput/index.less
+++ b/package/component/src/component/tagInput/index.less
@ -28,7 +28,6 @@
  border-style: solid;
  border-color: var(--input-border-color);
  border-radius: var(--input-border-radius);
-  padding: 0 5px;
  cursor: text;

  &-inner {
@ -48,8 +47,11 @@
  }

  &-clear {
-    display: none;
+    flex: none;
+    display: flex;
    align-items: center;
+    padding-right: 10px;
+    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
  }

@ -112,7 +114,7 @@
      }

      .layui-tag-input-inner {
-        padding: @@inner-padding 0;
+        padding: @@inner-padding 5px;
      }

      .layui-tag {
@ -129,6 +131,13 @@
  .set-size(xs);
 }

+.layui-tag-input-suffix {
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding: 0 15px;
+}
+
 .layui-tag-input:hover,
 .layui-tag-input:focus-within {
  border-color: #d2d2d2 !important;
--- a/package/component/src/component/tagInput/index.vue
+++ b/package/component/src/component/tagInput/index.vue
@ -46,7 +46,7 @@ const props = withDefaults(defineProps<LayInputTagProps>(), {
  disabledInput: false,
  placeholder: "",
  readonly: false,
-  allowClear: true,
+  allowClear: false,
  minCollapsedNum: 3,
  size: "md",
 });
@ -245,23 +245,26 @@ defineExpose({
      </template>
      <template v-if="!disabledInput">
        <input
-        ref="inputRefEl"
-        class="layui-tag-input-inner-input"
-        :style="inputStyle"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        @keydown.enter="handleEnter"
-        @keyup="handleBackspaceKeyUp"
-        @input="handleInput"
-        @compositionstart="handleComposition"
-        @compositionupdate="handleComposition"
-        @compositionend="handleComposition"
-      />
+          ref="inputRefEl"
+          class="layui-tag-input-inner-input"
+          :style="inputStyle"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :readonly="readonly"
+          @keydown.enter="handleEnter"
+          @keyup="handleBackspaceKeyUp"
+          @input="handleInput"
+          @compositionstart="handleComposition"
+          @compositionupdate="handleComposition"
+          @compositionend="handleComposition"
+        />
      </template>
    </span>
    <span v-if="allowClear && tagData?.length" class="layui-tag-input-clear">
      <lay-icon type="layui-icon-close-fill" @click.stop="handleClearClick" />
    </span>
+    <span class="layui-tag-input-suffix"  v-if="$slots.suffix">
+      <slot name="suffix"></slot> 
+    </span> 
  </div>
 </template>
--- a/package/document-component/src/document/zh-CN/components/tagInput.md
+++ b/package/document-component/src/document/zh-CN/components/tagInput.md
@ -86,4 +86,31 @@ export default {
 }
 </script>

+:::
+
+::: title 禁用状态
+:::
+
+::: demo 使用 `lay-tag-input` 标签, 创建标签输入框。  
+
+<template>
+  <lay-tag-input v-model="data5" v-model:inputValue="inputValue5" :allow-clear="true"></lay-tag-input>
+</template>
+
+<script>
+import { ref,watch } from 'vue'
+
+export default {
+  setup() {
+    const data5 = ref(['Vue', 'React']);
+    const inputValue5 = ref("");
+
+    return {
+      data5,
+      inputValue5
+    }
+  }
+}
+</script>
+
 :::
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@ -10,23 +10,29 @@
 ::: demo
 <template>
 <lay-timeline>
-  <lay-timeline-item title="1.4.x">
+  <lay-timeline-item title="1.5.x">
    <ul> 
-      <a name="1-4-14"></a> 
+      <a name="1-5-0"></a> 
      <li> 
-        <h3>1.4.15 <span class="layui-badge-rim">2022-09-27</span></h3> 
-        <ul>     
-          <li>[新增] tag-input 标签输入框组件。</li>
+        <h3>1.5.0 <span class="layui-badge-rim">2022-05-27</span></h3> 
+        <ul>
+          <li>[新增] tag-input 标签输入框组件, 用于录入事物的属性与纬度。</li>
          <li>[新增] table 组件 header 插槽, 用于在工具栏与表格之间插入元素。</li>
-          <li>[新增] tabitem 组件 icon 属性, 用于自定义 tab-item 图标。</li>
-          <li>[修复] layout 组件只引入了 footer 时, layui-layout-vertical样式不生效。</li>
-          <li>[修复] cascader 外部清空modelValue, 内部displayValue不清空问题。</li>
-          <li>[修复] tolltip 组件 content 自动定位。</li>
-          <li>[修复] breadcrumb-item 组件无法正确传递 attrs 的问题。</li>
-          <li>[优化] tag 组件 border background height 等默认样式。</li>
-        </ul>
+          <li>[新增] tabitem 组件 icon 属性, 提供 title 属性前置 icon 设置。</li>
+          <li>[修复] tolltip 组件 content 变化时, 位置无法自动计算调整的问题。</li>
+          <li>[修复] breadcrumb-item 组件无法正确传递 attrs, 导致 @click 等自定义事件失效。</li>
+          <li>[修复] layout 组件仅引入了 footer 作为内容元素时, layui-layout-vertical 样式不生效, 导致布局错误。</li>
+          <li>[修复] select 组件 multiple 属性为 true 时, 删除选项时清空筛选条件的问题。</li>
+          <li>[修复] cascader 外部清空 modelValue, 选中项仍不清楚的问题。</li>
+          <li>[修复] select 组件位于 layer 底部时, 点击时出现滚动条。</li>
+          <li>[修复] select 组件与 table 组件组合使用时, 下拉内容被遮盖。</li>
+          <li>[优化] tag 组件 border background height 等, 使其更贴合 layui 的设计规范。</li>
+          <li>[优化] input 组件 suffix 插槽与 allow-clear 启用时的显示顺序, clear > suffix。</li>
+        </ul> 
      </li>
    </ul>
+  </lay-timeline-item>
+  <lay-timeline-item title="1.4.x">
    <ul> 
      <a name="1-4-14"></a> 
      <li>