feat(search): [search] add disabled functionality to the search component and adapt to new specifications (#1756)

* feat(search): add disabled functionality to the search component and adapt to new specifications

* feat(search): add disabled docs

* feat(search): fix var bug

examples/sites/demos/apis/search.js

@@ -62,6 +62,17 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置是否禁用【3.18.0新增】',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-prefix'
+        },
         {
           name: 'is-enter-search',
           type: 'boolean',

examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue

@@ -1,20 +1,28 @@
 <template>
   <div>
-    <tiny-search v-model="value" placeholder="请输入关键字搜索" clearable>
+    <tiny-button class="mb10" @click="changeDisabled"
+      >点击切换为“{{ disabled ? '非禁用状态' : '禁用状态' }}”</tiny-button
+    >
+    <tiny-search class="mb10" v-model="value" placeholder="请输入关键字搜索" :disabled="disabled" clearable>
       <template #prefix>
         <tiny-icon-search />
       </template>
     </tiny-search>
+    <tiny-search v-model="value" placeholder="请输入关键词" :disabled="disabled"></tiny-search>
     <div class="mt10">{{ value }}</div>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { Search as TinySearch, Button as TinyButton } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 const value = ref('')
+const disabled = ref(false)
 
 const TinyIconSearch = iconSearch()
+const changeDisabled = () => {
+  disabled.value = !disabled.value
+}
 </script>

examples/sites/demos/pc/app/search/slot-prefix.spec.ts

@@ -4,7 +4,7 @@ test('左侧插槽是否正常显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('search#slot-prefix')
 
-  const search = page.locator('.tiny-search')
+  const search = page.locator('.tiny-search').first()
   const prefix = search.locator('.tiny-search__prefix > svg')
 
   await expect(prefix).toBeVisible()

examples/sites/demos/pc/app/search/slot-prefix.vue

@@ -1,26 +1,37 @@
 <template>
   <div>
-    <tiny-search v-model="value" placeholder="请输入关键字搜索" clearable>
+    <tiny-button class="mb10" @click="changeDisabled"
+      >点击切换为“{{ disabled ? '非禁用状态' : '禁用状态' }}”</tiny-button
+    >
+    <tiny-search class="mb10" v-model="value" placeholder="请输入关键字搜索" :disabled="disabled" clearable>
       <template #prefix>
-        <icon-search />
+        <tiny-icon-search />
       </template>
     </tiny-search>
+    <tiny-search v-model="value" placeholder="请输入关键词" :disabled="disabled"></tiny-search>
     <div class="mt10">{{ value }}</div>
   </div>
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { Search, Button } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinySearch: Search,
-    IconSearch: iconSearch()
+    TinyButton: Button,
+    TinyIconSearch: iconSearch()
   },
   data() {
     return {
-      value: ''
+      value: '',
+      disabled: false
+    }
+  },
+  methods: {
+    changeDisabled() {
+      this.disabled = !this.disabled
     }
   }
 }

examples/sites/demos/pc/app/search/webdoc/search.js

@@ -92,12 +92,13 @@ export default {
     {
       demoId: 'slot-prefix',
       name: {
-        'zh-CN': '左侧插槽',
+        'zh-CN': '左侧插槽与禁用',
-        'en-US': 'Left slot'
+        'en-US': 'Left slot and Disabled'
       },
       desc: {
-        'zh-CN': '通过 <code>prefix</code> 插槽自定义左侧内容。',
+        'zh-CN': '通过 <code>prefix</code> 插槽自定义左侧内容, <code>disabled</code> 控制禁用状态。',
-        'en-US': 'Customize the left content through the <code>prefix</code> slot.'
+        'en-US':
+          'Customize the left content through the <code>prefix</code> slot, <code>disabled</code>Control the disabled state.'
       },
       codeFiles: ['slot-prefix.vue']
     },

packages/theme/src/search/index.less

@@ -27,6 +27,36 @@
   font-size: var(--ti-search-font-size);
   width: 100%;
 
+  &.is-disabled &__input {
+    cursor: not-allowed;
+
+    .placeholder(@color: var(--ti-search-disabled-text-color));
+  }
+
+  &.is-disabled > &__line {
+    cursor: not-allowed;
+    border: 1px solid var(--ti-search-disabled-border-color);
+    color: var(--ti-search-disabled-border-color);
+    background: var(--ti-search-disabled-bg-color);
+
+    &:hover {
+      border-color: var(--ti-search-disabled-border-color);
+    }
+  }
+
+  &.is-disabled &__prefix,
+  &.is-disabled &__suffix,
+  &.is-disabled &__input-btn {
+    .@{css-prefix}svg {
+      cursor: not-allowed;
+
+      &,
+      &:hover {
+        fill: var(--ti-search-disabled-text-color);
+      }
+    }
+  }
+
   & &__line {
     display: flex;
     align-items: center;

packages/theme/src/search/smb-theme.js

@@ -4,6 +4,6 @@ export const tinySearchSmbTheme = {
   'ti-search-input-btn-icon-position-right': 'var(--ti-common-space-3x)',
   'ti-search-selector-box-shadow': 'var(--ti-common-shadow-3-up)',
   'ti-search-input-btn-icon-size': 'var(--ti-common-font-size-2)',
-  'ti-search-input-placeholder-color': 'var(--ti-common-color-placeholder)',
+  'ti-search-input-placeholder-text-color': 'var(--ti-common-color-placeholder)',
-  'ti-search-input-left-svg-margin-right': '-8px'
+  'ti-search-input-left-svg-margin-right': 'calc(0px - var(--ti-common-space-2x))'
 }

packages/theme/src/search/vars.less

@@ -82,4 +82,10 @@
   --ti-search-list-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
   // 搜索下拉框选项水平内边距
   --ti-search-selector-list-padding-horizontal: var(--ti-common-space-10, 10px);
+  // 边框禁用色
+  --ti-search-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
+  // 图标和占位文本禁用色
+  --ti-search-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+  // 背景禁用色
+  --ti-search-disabled-bg-color: var(--ti-common-bg-color-active, #0000000d);
 }

packages/vue/src/search/src/index.ts

@@ -92,7 +92,12 @@ export const searchProps = {
     default: 'small'
   },
   typeValue: Object,
-  suffixIcon: [Object, String]
+  suffixIcon: [Object, String],
+  // tiny新增
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 }
 
 export default defineComponent({

packages/vue/src/search/src/pc.vue

@@ -15,7 +15,8 @@
       'tiny-search',
       { mini },
       { collapse: state.collapse },
-      state.searchSize ? 'tiny-search--' + state.searchSize : ''
+      state.searchSize ? 'tiny-search--' + state.searchSize : '',
+      { 'is-disabled': disabled }
     ]"
     @mouseenter="state.hovering = true"
     @mouseleave="state.hovering = false"
@@ -36,8 +37,9 @@
       </transition>
       <input
         ref="input"
-        v-bind="a($attrs, ['type', 'class', 'style', '^on[A-Z]', 'id', 'disabled', 'clearable'])"
+        v-bind="a($attrs, ['type', 'class', 'style', '^on[A-Z]', 'id', 'clearable'])"
         v-model="state.currentValue"
+        :disabled="disabled"
         :style="
           transparent
             ? {
@@ -111,7 +113,8 @@ export default defineComponent({
     'clearable',
     'isEnterSearch',
     'typeValue',
-    'size'
+    'size',
+    'disabled'
   ],
   emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input'],
   components: {