choo-taro-ui-vue3/lib/search-bar/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, reactive, ref, computed, toRefs, createCommentVNode, resolveComponent, createVNode, toDisplayString, createTextVNode, normalizeStyle, withCtx, openBlock, createBlock, mergeProps } from 'vue';
import { uuid } from '../utils';
import { useModelValue } from '../composables';

const AtSearchBar = defineComponent({
  name: "AtSearchBar",
  emits: [
    "blur",
    "focus",
    "confirm",
    "action-click",
    "update:modelValue"
  ],
  props: {
    modelValue: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "\u641C\u7D22"
    },
    maxLength: {
      type: Number,
      default: 140
    },
    fixed: Boolean,
    focus: Boolean,
    disabled: Boolean,
    showActionButton: Boolean,
    actionName: {
      type: String,
      default: "\u641C\u7D22"
    },
    inputType: {
      type: String,
      default: "text"
    },
    onClear: Function
  },
  setup(props, { emit }) {
    const state = reactive({
      isFocus: !!props.focus
    });
    const fontSize = 14;
    const inputID = ref("weui-input" + uuid());
    const inputValue = useModelValue(props, emit);
    const rootClasses = computed(() => ({
      "at-search-bar": true,
      "at-search-bar--fixed": props.fixed
    }));
    const placeholderWrapStyle = computed(() => {
      const placeholderWrapStyle2 = {};
      if (state.isFocus || !state.isFocus && inputValue.value) {
        placeholderWrapStyle2.flexGrow = 0;
      } else if (!state.isFocus && !inputValue.value) {
        placeholderWrapStyle2.flexGrow = 1;
      }
      return placeholderWrapStyle2;
    });
    const actionStyle = computed(() => {
      const actionStyle2 = {};
      if (state.isFocus || !state.isFocus && inputValue.value) {
        actionStyle2.opacity = 1;
        actionStyle2.marginRight = `0`;
      } else if (!state.isFocus && !inputValue.value) {
        actionStyle2.opacity = 0;
        actionStyle2.marginRight = `-${(props.actionName.length + 1) * fontSize + fontSize / 2 + 10}px`;
      }
      if (props.showActionButton) {
        actionStyle2.opacity = 1;
        actionStyle2.marginRight = `0`;
      }
      return actionStyle2;
    });
    const clearIconStyle = computed(() => ({
      display: !inputValue.value.length ? "none" : "flex"
    }));
    const placeholderStyle = computed(() => ({
      visibility: !inputValue.value.length ? "visible" : "hidden"
    }));
    function handleFocus(event) {
      if (process.env.TARO_ENV === "h5") {
        inputID.value = "weui-input" + uuid(10, 32);
      }
      state.isFocus = true;
      emit("focus", event);
    }
    function handleBlur(event) {
      state.isFocus = false;
      emit("blur", event);
    }
    function handleInput(e) {
      inputValue.value = e.detail.value;
      if (process.env.TARO_ENV === "h5" && e.detail.value === "") {
        clearInputNodeValue();
      }
    }
    function clearInputNodeValue() {
      const inputNode = document.querySelector(`#${inputID.value} > .weui-input`);
      inputNode.value = "";
    }
    function handleClear(event) {
      if (typeof props.onClear === "function") {
        props.onClear(event);
      } else {
        inputValue.value = "";
      }
      if (process.env.TARO_ENV === "h5") {
        clearInputNodeValue();
      }
    }
    function handleConfirm(event) {
      emit("confirm", event);
    }
    function handleActionClick(event) {
      emit("action-click", event);
    }
    return {
      ...toRefs(props),
      ...toRefs(state),
      inputID,
      inputValue,
      rootClasses,
      actionStyle,
      clearIconStyle,
      placeholderStyle,
      placeholderWrapStyle,
      handleBlur,
      handleClear,
      handleFocus,
      handleInput,
      handleConfirm,
      handleActionClick
    };
  }
});

// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _createVNode = createVNode, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _normalizeStyle = normalizeStyle, _withCtx = withCtx, _openBlock = openBlock, _createBlock = createBlock, _mergeProps = mergeProps;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_text = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-text") : "text";
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";
  const _component_taro_input = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-input") : "input";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: _ctx.rootClasses }), {
    default: _withCtx(() => [
      _createCommentVNode(" searchbar input "),
      _createVNode(_component_taro_view, { class: "at-search-bar__input-cnt" }, {
        default: _withCtx(() => [
          _createCommentVNode(" placeholder "),
          _createVNode(_component_taro_view, {
            class: "at-search-bar__placeholder-wrap",
            style: _normalizeStyle(_ctx.placeholderWrapStyle)
          }, {
            default: _withCtx(() => [
              _createVNode(_component_taro_text, { class: "at-icon at-icon-search" }),
              _createVNode(_component_taro_text, {
                class: "at-search-bar__placeholder",
                style: _normalizeStyle(_ctx.placeholderStyle)
              }, {
                default: _withCtx(() => [
                  _createTextVNode(_toDisplayString(_ctx.isFocus ? '' : _ctx.placeholder), 1 /* TEXT */)
                ]),
                _: 1 /* STABLE */
              }, 8 /* PROPS */, ["style"])
            ]),
            _: 1 /* STABLE */
          }, 8 /* PROPS */, ["style"]),
          _createCommentVNode(" input "),
          _createVNode(_component_taro_input, {
            class: "at-search-bar__input",
            id: _ctx.inputID,
            type: _ctx.inputType,
            focus: _ctx.isFocus,
            disabled: _ctx.disabled,
            maxlength: _ctx.maxLength,
            value: _ctx.inputValue,
            "confirm-type": "search",
            onBlur: _ctx.handleBlur,
            onInput: _ctx.handleInput,
            onFocus: _ctx.handleFocus,
            onConfirm: _ctx.handleConfirm
          }, null, 8 /* PROPS */, ["id", "type", "focus", "disabled", "maxlength", "value", "onBlur", "onInput", "onFocus", "onConfirm"]),
          _createCommentVNode(" clear icon "),
          (_ctx.inputValue)
            ? (_openBlock(), _createBlock(_component_taro_view, {
                key: 0,
                class: "at-search-bar__clear",
                style: _normalizeStyle(_ctx.clearIconStyle),
                onTouchstart: _ctx.handleClear
              }, {
                default: _withCtx(() => [
                  _createVNode(_component_taro_text, { class: "at-icon at-icon-close-circle" })
                ]),
                _: 1 /* STABLE */
              }, 8 /* PROPS */, ["style", "onTouchstart"]))
            : _createCommentVNode("v-if", true)
        ]),
        _: 1 /* STABLE */
      }),
      _createCommentVNode(" action "),
      _createVNode(_component_taro_view, {
        class: "at-search-bar__action",
        style: _normalizeStyle(_ctx.actionStyle),
        onTap: _ctx.handleActionClick
      }, {
        default: _withCtx(() => [
          _createTextVNode(_toDisplayString(_ctx.actionName), 1 /* TEXT */)
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ["style", "onTap"])
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class"]))
}


AtSearchBar.render = _sfc_render;

export default AtSearchBar;