vue-devui 1.0.0-rc.5 → 1.0.0-rc.8

package/search/index.es.js

@@ -1,4 +1,4 @@
-import { computed, ref, watch, defineComponent, inject, createVNode, withDirectives, mergeProps, resolveDirective, resolveComponent } from "vue";
+import { computed, ref, watch, inject, toRefs, defineComponent, createVNode, mergeProps, resolveComponent } from "vue";
 const searchProps = {
   size: {
     type: String,
@@ -49,21 +49,46 @@ const searchProps = {
     default: void 0
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 const SIZE_CLASS = {
   lg: "lg",
+  md: "md",
   sm: "sm"
 };
 const ICON_POSITION = {
   right: "right",
   left: "left"
 };
+const ns = useNamespace("search");
 const getRootClass = (props) => {
   return computed(() => ({
-    "devui-search": true,
-    "devui-search__disbaled": props.disabled,
-    "devui-search__no-border": props.noBorder,
-    [`devui-search__${props.size}`]: SIZE_CLASS[props.size],
-    [`devui-search__${props.iconPosition}`]: ICON_POSITION[props.iconPosition]
+    [ns.b()]: true,
+    [ns.m("disabled")]: props.disabled,
+    [ns.m("no-border")]: props.noBorder,
+    [ns.m(props.size)]: SIZE_CLASS[props.size],
+    [ns.m(props.iconPosition)]: ICON_POSITION[props.iconPosition]
   }));
 };
 const keywordsHandles = (ctx, props) => {
@@ -5523,179 +5548,102 @@ const keydownHandles = (ctx, keywords, props) => {
   };
 };
 const inputProps = {
-  placeholder: {
+  modelValue: {
     type: String,
-    default: void 0
+    default: ""
   },
   disabled: {
     type: Boolean,
     default: false
   },
-  autoFocus: {
-    type: Boolean,
-    default: false
-  },
-  maxLength: {
-    type: Number,
-    default: Number.MAX_SAFE_INTEGER
-  },
-  cssClass: {
-    type: String,
-    default: ""
-  },
   error: {
     type: Boolean,
     default: false
   },
   size: {
     type: String,
-    default: ""
-  },
-  showPassword: {
-    type: Boolean,
-    default: false
-  },
-  modelValue: {
-    type: String,
-    default: ""
-  },
-  "update:modelValue": {
-    type: Function,
-    default: void 0
-  },
-  onChange: {
-    type: Function,
-    default: void 0
-  },
-  onKeydown: {
-    type: Function,
-    default: void 0
-  },
-  onFocus: {
-    type: Function,
-    default: void 0
-  },
-  onBlur: {
-    type: Function,
-    default: void 0
+    default: "md"
   }
 };
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+function useInputRender(props) {
+  const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
+  const ns2 = useNamespace("input");
+  const isFocus = ref(false);
+  const { error, size, disabled } = toRefs(props);
+  const wrapClasses = computed(() => ({
+    [ns2.b()]: true,
+    [ns2.m("focus")]: isFocus.value,
+    [ns2.m("disabled")]: disabled.value,
+    [ns2.m("error")]: error.value || isValidateError.value,
+    [ns2.m("feedback")]: formItemContext == null ? void 0 : formItemContext.showFeedback,
+    [ns2.m(size.value)]: true
+  }));
+  return { isFocus, wrapClasses };
+}
+function useInputEvent(isFocus, ctx) {
+  const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const onFocus = (e) => {
+    isFocus.value = true;
+    ctx.emit("focus", e);
+  };
+  const onBlur = (e) => {
+    isFocus.value = false;
+    ctx.emit("blur", e);
+    formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
+  };
+  const onInput = (e) => {
+    ctx.emit("update:modelValue", e.target.value);
+  };
+  const onChange = (e) => {
+    ctx.emit("change", e.target.value);
+  };
+  const onKeydown = (e) => {
+    ctx.emit("keydown", e);
+  };
+  return { onFocus, onBlur, onInput, onChange, onKeydown };
+}
 var input = "";
-const formItemInjectionKey = Symbol("dFormItem");
-const dFormItemEvents = {
-  blur: "d.form.blur",
-  change: "d.form.change",
-  input: "d.form.input"
-};
 var DInput = defineComponent({
   name: "DInput",
-  directives: {
-    focus: {
-      mounted: function(el, binding) {
-        if (binding.value) {
-          el.focus();
-        }
-      }
-    }
-  },
+  inheritAttrs: false,
   props: inputProps,
-  emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
+  emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown"],
   setup(props, ctx) {
-    const formItem = inject(formItemInjectionKey, {});
-    const hasFormItem = Object.keys(formItem).length > 0;
-    const sizeCls = computed(() => `devui-input-${props.size}`);
-    const showPwdIcon = ref(false);
-    const inputType = ref("text");
-    const inputCls = computed(() => {
-      return {
-        error: props.error,
-        [props.cssClass]: true,
-        "devui-input-restore": showPwdIcon.value,
-        [sizeCls.value]: props.size !== ""
-      };
-    });
-    const showPreviewIcon = computed(() => inputType.value === "password");
-    watch(() => props.showPassword, (flg) => {
-      inputType.value = flg ? "password" : "text";
-      showPwdIcon.value = props.showPassword;
-    }, {
-      immediate: true
-    });
-    const onInput = ($event) => {
-      ctx.emit("update:modelValue", $event.target.value);
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input);
-    }, onFocus = () => {
-      ctx.emit("focus");
-    }, onBlur = () => {
-      ctx.emit("blur");
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.blur);
-    }, onChange = ($event) => {
-      ctx.emit("change", $event.target.value);
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.change);
-    }, onKeydown = ($event) => {
-      ctx.emit("keydown", $event);
-    }, onChangeInputType = () => {
-      inputType.value = inputType.value === "password" ? "text" : "password";
-    };
-    return {
-      inputCls,
-      inputType,
-      showPreviewIcon,
-      showPwdIcon,
-      onInput,
-      onFocus,
-      onBlur,
-      onChange,
-      onKeydown,
-      onChangeInputType
-    };
-  },
-  render() {
+    const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const {
       modelValue,
-      showPreviewIcon,
-      showPwdIcon,
-      inputCls,
-      inputType,
-      maxLength,
-      autoFocus,
-      placeholder,
-      disabled,
-      onInput,
+      disabled
+    } = toRefs(props);
+    const ns2 = useNamespace("input");
+    const {
+      isFocus,
+      wrapClasses
+    } = useInputRender(props);
+    const {
       onFocus,
       onBlur,
+      onInput,
       onChange,
-      onKeydown,
-      onChangeInputType
-    } = this;
-    return createVNode("div", {
-      "class": "devui-input__wrap"
-    }, [withDirectives(createVNode("input", mergeProps({
-      dinput: true
-    }, {
-      "value": modelValue,
-      "disabled": disabled,
-      "type": inputType,
-      "maxlength": maxLength,
-      "placeholder": placeholder,
-      "class": inputCls,
+      onKeydown
+    } = useInputEvent(isFocus, ctx);
+    watch(() => props.modelValue, () => {
+      formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+    });
+    return () => createVNode("div", {
+      "class": wrapClasses.value
+    }, [createVNode("input", mergeProps({
+      "value": modelValue.value,
+      "disabled": disabled.value,
+      "class": ns2.e("inner")
+    }, ctx.attrs, {
       "onInput": onInput,
       "onFocus": onFocus,
       "onBlur": onBlur,
       "onChange": onChange,
       "onKeydown": onKeydown
-    }), null), [[resolveDirective("focus"), autoFocus]]), showPwdIcon && createVNode("div", {
-      "class": "devui-input__preview",
-      "onClick": onChangeInputType
-    }, [showPreviewIcon ? createVNode(resolveComponent("d-icon"), {
-      "name": "preview-forbidden",
-      "size": "12px",
-      "key": 1
-    }, null) : createVNode(resolveComponent("d-icon"), {
-      "name": "preview",
-      "size": "12px",
-      "key": 2
-    }, null)])]);
+    }), null)]);
   }
 });
 var search = "";
@@ -5704,6 +5652,7 @@ var Search = defineComponent({
   props: searchProps,
   emits: ["update:modelValue", "search"],
   setup(props, ctx) {
+    const ns2 = useNamespace("search");
     const rootClasses = getRootClass(props);
     const {
       keywords,
@@ -5729,6 +5678,7 @@ var Search = defineComponent({
         autoFocus: props.autoFocus,
         modelValue: keywords.value,
         placeholder: props.placeholder,
+        maxLength: props.maxLength,
         cssClass: props.cssClass,
         onKeydown: onInputKeydown,
         "onUpdate:modelValue": onInputUpdate
@@ -5736,21 +5686,21 @@ var Search = defineComponent({
       return createVNode("div", {
         "class": rootClasses.value
       }, [props.iconPosition === "left" && createVNode("div", {
-        "class": "devui-search__icon",
+        "class": ns2.e("icon"),
         "onClick": onClickHandle
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "search",
         "size": "inherit",
         "key": "search"
       }, null)]), createVNode(DInput, inputProps2, null), clearIconShow.value && createVNode("div", {
-        "class": "devui-search__clear",
+        "class": ns2.e("clear"),
         "onClick": onClearHandle
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "close",
         "size": "inherit",
         "key": "close"
       }, null)]), props.iconPosition === "right" && createVNode("div", {
-        "class": "devui-search__icon",
+        "class": ns2.e("icon"),
         "onClick": onClickHandle
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "search",