message: refactor(Search): extract render fns
diff: // Utils
  -import { createNamespace } from '../utils';
  +import { createNamespace, pick } from '../utils';
  import { preventDefault } from '../utils/dom/event';
  // Components
  @@ -32,11 +32,25 @@ export default createComponent({
  },
  },
  - emits: ['search', 'cancel', 'keypress'],
  + emits: ['search', 'cancel'],
  - setup(props, { emit, slots }) {
  - return function () {
  - function Label() {
  + setup(props, { emit, slots, attrs }) {
  + const onCancel = () => {
  + if (!slots.action) {
  + emit('update:modelValue', '');
  + emit('cancel');
  + }
  + };
  +
  + const onKeypress = (event) => {
  + const ENTER_CODE = 13;
  + if (event.keyCode === ENTER_CODE) {
  + preventDefault(event);
  + emit('search', props.modelValue);
  + }
  + };
  +
  + const renderLabel = () => {
  if (slots.label || props.label) {
  return (
  <div class={bem('label')}>
  @@ -44,22 +58,11 @@ export default createComponent({
  </div>
  );
  }
  - }
  -
  - function Action() {
  - if (!props.showAction) {
  - return;
  - }
  -
  - function onCancel() {
  - if (slots.action) {
  - return;
  - }
  -
  - emit('update:modelValue', '');
  - emit('cancel');
  - }
  + };
  + const renderAction = () => {
  + if (props.showAction) {
  + const text = props.actionText || t('cancel');
  return (
  <div
  class={bem('action')}
  @@ -67,51 +70,51 @@ export default createComponent({
  tabindex="0"
  onClick={onCancel}
  >
  - {slots.action ? slots.action() : props.actionText || t('cancel')}
  + {slots.action ? slots.action() : text}
  </div>
  );
  }
  + };
  +
  + const fieldPropNames = [
  + 'leftIcon',
  + 'rightIcon',
  + 'clearable',
  + 'modelValue',
  + 'clearTrigger',
  + ];
  - const fieldData = {
  - ...this.$attrs,
  + const renderField = () => {
  + const fieldAttrs = {
  + ...attrs,
  + ...pick(props, fieldPropNames),
  style: null,
  class: null,
  - onKeypress(event) {
  - // press enter
  - if (event.keyCode === 13) {
  - preventDefault(event);
  - emit('search', props.modelValue);
  - }
  - emit('keypress', event);
  - },
  };
  return (
  - <div
  - class={[bem({ 'show-action': props.showAction }), this.$attrs.class]}
  - style={{ background: props.background, ...this.$attrs.style }}
  - >
  - {slots.left?.()}
  - <div class={bem('content', props.shape)}>
  - {Label()}
  <Field
  - v-slots={{
  - 'left-icon': slots['left-icon'],
  - 'right-icon': slots['right-icon'],
  - }}
  + v-slots={pick(slots, ['left-icon', 'right-icon'])}
  type="search"
  border={false}
  - leftIcon={props.leftIcon}
  - rightIcon={props.rightIcon}
  - clearable={props.clearable}
  - modelValue={props.modelValue}
  - clearTrigger={props.clearTrigger}
  - {...fieldData}
  + onKeypress={onKeypress}
  + {...fieldAttrs}
  />
  + );
  + };
  +
  + return () => (
  + <div
  + class={[bem({ 'show-action': props.showAction }), attrs.class]}
  + style={{ background: props.background, ...attrs.style }}
  + >
  + {slots.left?.()}
  + <div class={bem('content', props.shape)}>
  + {renderLabel()}
  + {renderField()}
  </div>
  - {Action()}
  + {renderAction()}
  </div>
  );
  - };
  },
  });
  