init

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/searchbar/searchbar.js

@@ -0,0 +1,251 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
+const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
+require("../_utils/env.js");
+const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
+require("../../locale/locale.js");
+const uni_modules_nutuiUni_locale_useTranslate = require("../../locale/useTranslate.js");
+const form = require("../../../../form.js");
+const uni_modules_nutuiUni_components__utils_is = require("../_utils/is.js");
+const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
+const searchbarProps = {
+  ...uni_modules_nutuiUni_components__utils_props.commonProps,
+  /**
+   * @description 当前输入的值
+   */
+  modelValue: uni_modules_nutuiUni_components__utils_props.makeNumericProp(""),
+  /**
+   * @description 输入框类型
+   */
+  inputType: uni_modules_nutuiUni_components__utils_props.makeStringProp("text"),
+  /**
+   * @description 搜索框形状，可选值为 `square` `round`
+   */
+  shape: uni_modules_nutuiUni_components__utils_props.makeStringProp("round"),
+  /**
+   * @description 最大输入长度
+   */
+  maxLength: uni_modules_nutuiUni_components__utils_props.numericProp,
+  /**
+   * @description 输入框默认占位符
+   */
+  placeholder: String,
+  /**
+   * @description 是否展示清除按钮
+   */
+  clearable: uni_modules_nutuiUni_components__utils_props.truthProp,
+  /**
+   * @description 自定义清除按钮图标
+   */
+  clearIcon: uni_modules_nutuiUni_components__utils_props.makeStringProp("circle-close"),
+  /**
+   * @description 输入框外部背景
+   */
+  background: String,
+  /**
+   * @description 输入框内部背景
+   */
+  inputBackground: String,
+  /**
+   * @description 聚焦时搜索框样式
+   */
+  focusStyle: uni_modules_nutuiUni_components__utils_props.makeObjectProp({}),
+  /**
+   * @description 是否自动聚焦
+   */
+  autofocus: Boolean,
+  /**
+   * @description 是否禁用输入框
+   */
+  disabled: uni_modules_nutuiUni_components__utils_props.nullableBooleanProp,
+  /**
+   * @description 输入框只读
+   */
+  readonly: Boolean,
+  /**
+   * @description 对齐方式，可选 `left` `center` `right`
+   */
+  inputAlign: uni_modules_nutuiUni_components__utils_props.makeStringProp("left"),
+  /**
+   * @description 键盘右下角按钮的文字，仅在`type='text'`时生效，可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成
+   */
+  confirmType: uni_modules_nutuiUni_components__utils_props.makeStringProp("done"),
+  /**
+   * @description 是否开启 iphone 系列全面屏底部安全区适配
+   */
+  safeAreaInsetBottom: Boolean,
+  /**
+   * @description 指定的距离的最小值作为光标与键盘的距离
+   */
+  cursorSpacing: uni_modules_nutuiUni_components__utils_props.makeNumberProp(0)
+};
+const searchbarEmits = {
+  [uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT]: (val, event) => (uni_modules_nutuiUni_components__utils_is.isString(val) || val === void 0) && event instanceof Object,
+  [uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT]: (val, event) => (uni_modules_nutuiUni_components__utils_is.isString(val) || val === void 0) && event instanceof Object,
+  [uni_modules_nutuiUni_components__constants_event.BLUR_EVENT]: (val, event) => (uni_modules_nutuiUni_components__utils_is.isString(val) || val === void 0) && event instanceof Object,
+  [uni_modules_nutuiUni_components__constants_event.FOCUS_EVENT]: (val, event) => (uni_modules_nutuiUni_components__utils_is.isString(val) || val === void 0) && event instanceof Object,
+  [uni_modules_nutuiUni_components__constants_event.CLEAR_EVENT]: (val) => uni_modules_nutuiUni_components__utils_is.isString(val) || val === void 0,
+  [uni_modules_nutuiUni_components__constants_event.SEARCH_EVENT]: (val) => uni_modules_nutuiUni_components__utils_is.isString(val) || val === void 0,
+  clickInput: (val, event) => (uni_modules_nutuiUni_components__utils_is.isString(val) || val === void 0) && event instanceof Object,
+  clickLeftIcon: (val, event) => (uni_modules_nutuiUni_components__utils_is.isString(val) || val === void 0) && event instanceof Object,
+  clickRightIcon: (val, event) => (uni_modules_nutuiUni_components__utils_is.isString(val) || val === void 0) && event instanceof Object
+};
+if (!Math) {
+  NutIcon();
+}
+const NutIcon = () => "../icon/icon.js";
+const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-searchbar`;
+const { translate } = uni_modules_nutuiUni_locale_useTranslate.useTranslate(componentName);
+const __default__ = common_vendor.defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: "shared"
+  }
+});
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  ...__default__,
+  props: searchbarProps,
+  emits: searchbarEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = common_vendor.useSlots();
+    function hasSlot(name) {
+      return Boolean(slots[name]);
+    }
+    const formDisabled = form.useFormDisabled(common_vendor.toRef(props, "disabled"));
+    const state = common_vendor.reactive({
+      active: false
+    });
+    function stringModelValue() {
+      if (props.modelValue == null)
+        return "";
+      return String(props.modelValue);
+    }
+    const innerValue = common_vendor.computed(() => {
+      return stringModelValue();
+    });
+    const innerMaxLength = common_vendor.computed(() => {
+      if (props.maxLength == null)
+        return -1;
+      return Number(props.maxLength);
+    });
+    const classes = common_vendor.computed(() => {
+      return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
+        "safe-area-inset-bottom": props.safeAreaInsetBottom
+      });
+    });
+    const styles = common_vendor.computed(() => {
+      return uni_modules_nutuiUni_components__utils_style.getMainStyle(props, {
+        background: props.background
+      });
+    });
+    const inputWrapperStyles = common_vendor.computed(() => {
+      const style = {
+        background: props.inputBackground
+      };
+      if (state.active)
+        Object.assign(style, props.focusStyle);
+      return style;
+    });
+    const inputStyles = common_vendor.computed(() => {
+      return {
+        textAlign: props.inputAlign
+      };
+    });
+    function handleValue(value) {
+      if (innerMaxLength.value > 0 && value.length > innerMaxLength.value)
+        value = value.slice(0, innerMaxLength.value);
+      return value;
+    }
+    function handleInput(event) {
+      const value = handleValue(event.detail.value);
+      emit(uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT, value, event);
+      emit(uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT, value, event);
+    }
+    function handleFocus(event) {
+      const value = handleValue(event.detail.value);
+      state.active = true;
+      emit(uni_modules_nutuiUni_components__constants_event.FOCUS_EVENT, value, event);
+    }
+    function handleBlur(event) {
+      const value = handleValue(event.detail.value);
+      setTimeout(() => {
+        state.active = false;
+      }, 200);
+      emit(uni_modules_nutuiUni_components__constants_event.BLUR_EVENT, value, event);
+    }
+    function handleClear(event) {
+      emit(uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT, "", event);
+      emit(uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT, "", event);
+      emit(uni_modules_nutuiUni_components__constants_event.CLEAR_EVENT, "");
+    }
+    function handleSubmit() {
+      emit(uni_modules_nutuiUni_components__constants_event.SEARCH_EVENT, innerValue.value);
+    }
+    function handleInputClick(event) {
+      emit("clickInput", innerValue.value, event);
+    }
+    function handleLeftIconClick(event) {
+      emit("clickLeftIcon", innerValue.value, event);
+    }
+    function handleRightIconClick(event) {
+      emit("clickRightIcon", innerValue.value, event);
+    }
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: hasSlot("leftout")
+      }, hasSlot("leftout") ? {
+        b: common_vendor.o(handleLeftIconClick)
+      } : {}, {
+        c: hasSlot("leftin")
+      }, hasSlot("leftin") ? {} : {}, {
+        d: props.clearable ? 1 : "",
+        e: common_vendor.s(inputStyles.value),
+        f: props.inputType,
+        g: innerMaxLength.value,
+        h: props.placeholder || common_vendor.unref(translate)("placeholder"),
+        i: innerValue.value,
+        j: props.autofocus,
+        k: props.confirmType,
+        l: common_vendor.unref(formDisabled),
+        m: props.readonly,
+        n: props.cursorSpacing,
+        o: common_vendor.o(handleInputClick),
+        p: common_vendor.o(handleInput),
+        q: common_vendor.o(handleFocus),
+        r: common_vendor.o(handleBlur),
+        s: common_vendor.o(handleSubmit),
+        t: common_vendor.o(handleSubmit),
+        v: hasSlot("rightin") ? 1 : "",
+        w: props.clearable
+      }, props.clearable ? common_vendor.e({
+        x: hasSlot("clear-icon")
+      }, hasSlot("clear-icon") ? {} : {
+        y: common_vendor.p({
+          name: props.clearIcon
+        })
+      }, {
+        z: innerValue.value.length <= 0 ? 1 : "",
+        A: common_vendor.o(handleClear)
+      }) : {}, {
+        B: hasSlot("rightin")
+      }, hasSlot("rightin") ? {
+        C: common_vendor.o(handleRightIconClick)
+      } : {}, {
+        D: hasSlot("rightin") ? 1 : "",
+        E: common_vendor.n(props.shape),
+        F: common_vendor.s(inputWrapperStyles.value),
+        G: hasSlot("rightout")
+      }, hasSlot("rightout") ? {} : {}, {
+        H: common_vendor.n(classes.value),
+        I: common_vendor.s(styles.value)
+      });
+    };
+  }
+});
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/searchbar/searchbar.js.map

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/searchbar/searchbar.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "nut-icon": "../icon/icon"
+  }
+}

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/searchbar/searchbar.wxml

@@ -0,0 +1 @@
+<view class="{{H}}" style="{{I}}"><view wx:if="{{a}}" class="nut-searchbar__search-icon nut-searchbar__left-search-icon" bindtap="{{b}}"><slot name="leftout"/></view><view class="{{['nut-searchbar__search-input', E]}}" style="{{F}}"><view wx:if="{{c}}" class="nut-searchbar__search-icon nut-searchbar__iptleft-search-icon"><slot name="leftin"/></view><view class="{{['nut-searchbar__input-inner', v && 'nut-searchbar__input-inner-absolute']}}"><form class="nut-searchbar__input-form" action="#" onsubmit="return false" catchsubmit="{{t}}"><block wx:if="{{r0}}"><input class="{{['nut-searchbar__input-bar', d && 'nut-searchbar__input-bar_clear']}}" style="{{e}}" type="{{f}}" maxlength="{{g}}" placeholder="{{h}}" value="{{i}}" focus="{{j}}" confirm-type="{{k}}" disabled="{{l}}" readonly="{{m}}" cursor-spacing="{{n}}" bindtap="{{o}}" bindinput="{{p}}" bindfocus="{{q}}" bindblur="{{r}}" bindconfirm="{{s}}"></input></block></form></view><view class="{{['nut-searchbar__input-inner-icon', D && 'nut-searchbar__input-inner-icon-absolute']}}"><view wx:if="{{w}}" class="{{['nut-searchbar__search-icon', 'nut-searchbar__input-clear', z && 'nut-hidden']}}" bindtap="{{A}}"><block wx:if="{{x}}"><slot name="clear-icon"/></block><nut-icon wx:else u-i="47d71ab2-0" bind:__l="__l" u-p="{{y||''}}"/></view><view wx:if="{{B}}" class="nut-searchbar__search-icon nut-searchbar__iptright-search-icon" bindtap="{{C}}"><slot name="rightin"/></view></view></view><view wx:if="{{G}}" class="nut-searchbar__search-icon nut-searchbar__right-search-icon"><slot name="rightout"/></view></view>

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/searchbar/searchbar.wxss

@@ -0,0 +1,165 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.nut-theme-dark .nut-searchbar {
+  background: var(--nut-dark-background, #131313);
+}
+.nut-theme-dark .nut-searchbar__search-input {
+  background: var(--nut-dark-background4, #323233);
+}
+.nut-theme-dark .nut-searchbar__right-search-icon, .nut-theme-dark .nut-searchbar__left-search-icon {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+}
+.nut-searchbar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: var(--nut-searchbar-width, 100%);
+  padding: var(--nut-searchbar-padding, 9px 16px);
+  color: var(--nut-searchbar-input-bar-color, inherit);
+  background: var(--nut-searchbar-background, var(--nut-white, #fff));
+}
+.nut-searchbar.safe-area-inset-bottom {
+  position: relative;
+  margin-bottom: constant(safe-area-inset-bottom);
+  margin-bottom: env(safe-area-inset-bottom);
+}
+.nut-searchbar.safe-area-inset-bottom::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: constant(safe-area-inset-bottom);
+  height: env(safe-area-inset-bottom);
+  content: "";
+  background: var(--nut-searchbar-background, var(--nut-white, #fff));
+}
+.nut-searchbar::-webkit-input-placeholder {
+  color: var(--nut-searchbar-input-bar-placeholder-color, inherit);
+}
+.nut-searchbar::placeholder {
+  color: var(--nut-searchbar-input-bar-placeholder-color, inherit);
+}
+.nut-searchbar__search-input {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  height: var(--nut-searchbar-input-height, 32px);
+  padding: var(--nut-searchbar-input-padding, 0 0 0 13px);
+  background: var(--nut-searchbar-input-background, #f7f7f7);
+  border-radius: var(--nut-searchbar-input-border-radius, 16px);
+  box-shadow: var(--nut-searchbar-input-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.04));
+}
+.nut-searchbar__search-input.square {
+  border-radius: 0;
+}
+.nut-searchbar__search-input .nut-searchbar__input-inner {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  overflow: hidden;
+}
+.nut-searchbar__search-input .nut-searchbar__input-inner .nut-searchbar__input-form {
+  flex: 1;
+  overflow: hidden;
+}
+.nut-searchbar__search-input .nut-searchbar__input-inner-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 7px;
+}
+.nut-searchbar__search-input .nut-searchbar__input-clear {
+  position: relative;
+  z-index: 10;
+  padding: 0 5px;
+}
+.nut-searchbar__search-input .nut-searchbar__input-inner-icon-absolute .nut-searchbar__input-clear {
+  position: absolute;
+  left: -20px;
+}
+.nut-searchbar__search-input .nut-searchbar__iptleft-search-icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 6px;
+}
+.nut-searchbar__search-input .nut-searchbar__iptright-search-icon {
+  margin-left: 5px;
+}
+.nut-searchbar__search-input .nut-searchbar__input-bar {
+  flex: 1;
+  height: var(--nut-searchbar-input-height, 32px);
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: var(--nut-searchbar-input-height, 32px);
+  background-color: transparent;
+  border-color: transparent;
+  outline: none;
+}
+.nut-searchbar__search-input .nut-searchbar__input-inner-absolute .nut-searchbar__input-bar {
+  box-sizing: border-box;
+  padding-right: 20px;
+}
+.nut-searchbar__left-search-icon {
+  margin-right: 8px;
+}
+.nut-searchbar__search-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nut-searchbar__right-search-icon {
+  margin-left: 16px;
+  font-size: 14px;
+  color: var(--nut-searchbar-right-out-color, var(--nut-black, #000));
+}