bge-ui 1.5.3 → 1.5.4

package/dist/index.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle, createStaticVNode, provide, reactive, toRefs, ref, watch, unref, getCurrentScope, onScopeDispose, readonly, computed, getCurrentInstance, onMounted, useSlots, inject, createTextVNode, toDisplayString, createCommentVNode, TransitionGroup, withCtx, withDirectives, vModelDynamic, vModelText, createBlock, withModifiers, cloneVNode, Fragment, Text, Comment, onUnmounted, h, Transition, vShow, onBeforeMount, nextTick, Teleport, resolveDynamicComponent, shallowReactive, render as render$7, isVNode, vModelCheckbox, renderList, toRef, useAttrs, normalizeProps, mergeProps, onBeforeUpdate, withKeys, createSlots, guardReactiveProps, isRef } from "vue";
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle, createStaticVNode, provide, reactive, toRefs, ref, watch, unref, getCurrentScope, onScopeDispose, readonly, computed, getCurrentInstance, onMounted, useSlots, inject, createTextVNode, toDisplayString, createCommentVNode, TransitionGroup, withCtx, createBlock, withModifiers, withDirectives, cloneVNode, Fragment, Text, Comment, onUnmounted, h, Transition, vShow, onBeforeMount, nextTick, Teleport, resolveDynamicComponent, shallowReactive, render as render$7, isVNode, vModelCheckbox, renderList, toRef, useAttrs, normalizeProps, mergeProps, onBeforeUpdate, withKeys, createSlots, guardReactiveProps, isRef } from "vue";
 const _hoisted_1$26 = ["disabled"];
 const _hoisted_2$1M = { class: "loading-icon" };
 const _sfc_main$2g = /* @__PURE__ */ defineComponent({
@@ -6162,8 +6162,8 @@ const _hoisted_2$f = {
   class: "bge-input__prefix"
 };
 const _hoisted_3$b = { class: "bge-input__prefix-inner" };
-const _hoisted_4$a = ["maxlength", "disabled", "readonly", "type", "placeholder"];
-const _hoisted_5$6 = ["rows", "maxlength", "disabled", "readonly", "placeholder"];
+const _hoisted_4$a = ["value", "maxlength", "disabled", "readonly", "type", "placeholder"];
+const _hoisted_5$6 = ["rows", "maxlength", "value", "disabled", "readonly", "placeholder"];
 const _hoisted_6$5 = { class: "bge-input__suffix-inner" };
 const formItemContextKey$4 = "bge-form-item-context";
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
@@ -6182,6 +6182,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       type: [String, Number],
       default: ""
     },
+    thousand: Boolean,
     placeholder: String,
     disabled: Boolean,
     readonly: Boolean,
@@ -6204,49 +6205,68 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const input = ref("");
+    const inputField = ref();
     const formItemContext = inject(formItemContextKey$4, void 0);
     const suffixSlot = useSlots().suffix;
     const prefixSlot = useSlots().prefix;
-    const input = ref("");
     const isFocus = ref(false);
     const isClearHover = ref(false);
     function handleFocus() {
       isFocus.value = true;
       emit("focus");
     }
-    function handleBlur() {
+    function handleBlur(event) {
       isFocus.value = false;
       emit("blur");
-      emit("update:modelValue", input.value);
+      emit("update:modelValue", toNormal(event.target.value));
     }
-    watch(() => props.modelValue, (val) => {
-      input.value = val;
+    watch(() => props.modelValue, () => {
+      input.value = filterValue(props.modelValue);
       formItemContext && formItemContext.validate && formItemContext.validate().catch((err) => err);
     });
-    function handleChange() {
-      emit("change", input.value);
-      emit("update:modelValue", input.value);
+    onMounted(() => {
+      input.value = filterValue(props.modelValue);
+    });
+    function toNormal(value) {
+      if (props.thousand) {
+        return value.toString().split(",").join("");
+      }
+      return value.toString();
+    }
+    function filterValue(value) {
+      if (props.thousand) {
+        return toNormal(value.toString()).replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ","));
+      }
+      return value;
+    }
+    function handleChange(event) {
+      emit("change", toNormal(event.target.value));
+      emit("update:modelValue", toNormal(event.target.value));
     }
-    function handleInput() {
-      emit("input", input.value);
-      emit("update:modelValue", input.value);
+    function handleInput(event) {
+      const cursorPosition = filterValue(event.target.value).toString().length - (event.target.value.length - event.target.selectionEnd);
+      if (toNormal(event.target.value) === toNormal(props.modelValue)) {
+        return false;
+      }
+      emit("input", toNormal(event.target.value));
+      emit("update:modelValue", toNormal(event.target.value));
+      setTimeout(() => {
+        if (inputField.value) {
+          inputField.value.setSelectionRange(cursorPosition, cursorPosition);
+        }
+      });
     }
     function hoverClear(isHover) {
       isClearHover.value = isHover;
     }
     function handelClear() {
-      input.value = "";
       isFocus.value = false;
-      emit("clear", input.value);
-      emit("input", input.value);
-      emit("change", input.value);
-      emit("update:modelValue", input.value);
+      emit("clear", "");
+      emit("input", "");
+      emit("change", "");
+      emit("update:modelValue", "");
     }
-    onMounted(() => {
-      if (props.modelValue) {
-        input.value = props.modelValue;
-      }
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createElementVNode("div", {
@@ -6257,10 +6277,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "prefix")
             ])
           ])) : createCommentVNode("", true),
-          __props.type !== "textarea" ? withDirectives((openBlock(), createElementBlock("input", {
+          __props.type !== "textarea" ? (openBlock(), createElementBlock("input", {
             key: 1,
+            ref_key: "inputField",
+            ref: inputField,
             class: "bge-input__inner",
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => input.value = $event),
+            value: input.value,
             maxlength: __props.maxlength,
             disabled: __props.disabled,
             readonly: __props.readonly,
@@ -6270,14 +6292,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onChange: handleChange,
             onInput: handleInput
-          }, null, 40, _hoisted_4$a)), [
-            [vModelDynamic, input.value]
-          ]) : withDirectives((openBlock(), createElementBlock("textarea", {
+          }, null, 40, _hoisted_4$a)) : (openBlock(), createElementBlock("textarea", {
             key: 2,
             rows: __props.rows,
             maxlength: __props.maxlength,
             class: "bge-input__inner",
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => input.value = $event),
+            value: input.value,
             disabled: __props.disabled,
             readonly: __props.readonly,
             placeholder: __props.placeholder,
@@ -6285,18 +6305,16 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onChange: handleChange,
             onInput: handleInput
-          }, null, 40, _hoisted_5$6)), [
-            [vModelText, input.value]
-          ]),
+          }, null, 40, _hoisted_5$6)),
           createElementVNode("span", {
             class: normalizeClass(["bge-input__suffix", { suffix: !!unref(suffixSlot) }])
           }, [
             createElementVNode("span", _hoisted_6$5, [
-              input.value && !__props.readonly && !__props.disabled ? (openBlock(), createBlock(_sfc_main$27, {
+              __props.modelValue && !__props.readonly && !__props.disabled ? (openBlock(), createBlock(_sfc_main$27, {
                 key: 0,
                 class: "bge-input__icon clear",
-                onMouseover: _cache[2] || (_cache[2] = withModifiers(($event) => hoverClear(true), ["prevent"])),
-                onMouseout: _cache[3] || (_cache[3] = withModifiers(($event) => hoverClear(false), ["prevent"])),
+                onMouseover: _cache[0] || (_cache[0] = withModifiers(($event) => hoverClear(true), ["prevent"])),
+                onMouseout: _cache[1] || (_cache[1] = withModifiers(($event) => hoverClear(false), ["prevent"])),
                 onClick: handelClear,
                 size: "20"
               })) : createCommentVNode("", true),

package/dist/input/index.vue.d.ts

@@ -8,6 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    thousand: BooleanConstructor;
     placeholder: StringConstructor;
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
@@ -35,6 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    thousand: BooleanConstructor;
     placeholder: StringConstructor;
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
@@ -57,6 +59,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     modelValue: string | number;
     readonly: boolean;
+    thousand: boolean;
     rows: string | number;
 }, {}>, {
     prefix?(_: {}): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/input/index.vue

@@ -6,15 +6,15 @@
           <slot name="prefix" />
         </span>
       </span>
-      <input v-if="type !== 'textarea'" class="bge-input__inner" v-model="input" :maxlength="maxlength"
+      <input v-if="type !== 'textarea'" ref="inputField" class="bge-input__inner" :value="input" :maxlength="maxlength"
         :disabled="disabled" :readonly="readonly" :type="type" :placeholder="placeholder" @focus="handleFocus"
         @blur="handleBlur" @change="handleChange" @input="handleInput" />
-      <textarea v-else="type !== 'textarea'" :rows="rows" :maxlength="maxlength" class="bge-input__inner" v-model="input"
+      <textarea v-else="type !== 'textarea'" :rows="rows" :maxlength="maxlength" class="bge-input__inner" :value="input"
         :disabled="disabled" :readonly="readonly" :placeholder="placeholder" @focus="handleFocus" @blur="handleBlur"
         @change="handleChange" @input="handleInput" />
       <span class="bge-input__suffix" :class="{ suffix: !!suffixSlot }">
         <span class="bge-input__suffix-inner">
-          <mono-close class="bge-input__icon clear" v-if="input && !readonly && !disabled"  @mouseover.prevent="hoverClear(true)"
+          <mono-close class="bge-input__icon clear" v-if="modelValue && !readonly && !disabled"  @mouseover.prevent="hoverClear(true)"
             @mouseout.prevent="hoverClear(false)" @click="handelClear" size="20" />
           <slot v-if="type !== 'textarea'" name="suffix" />
         </span>
@@ -39,6 +39,7 @@ const props = defineProps({
     type: [String, Number],
     default: '',
   },
+  thousand: Boolean,
   placeholder: String,
   disabled: Boolean,
   readonly: Boolean,
@@ -58,13 +59,14 @@ const emit = defineEmits([
   'clear',
   'update:modelValue'
 ])
+const input = ref<string | number>('')
+const inputField = ref()
 const formItemContextKey = 'bge-form-item-context'
 
 const formItemContext: any = inject(formItemContextKey, undefined)
 
 const suffixSlot = useSlots().suffix
 const prefixSlot = useSlots().prefix
-const input = ref<string | number>('')
 const isFocus = ref(false)
 const isClearHover = ref<Boolean>(false)
 function handleFocus() {
@@ -72,25 +74,53 @@ function handleFocus() {
   emit('focus')
 }
 
-function handleBlur() {
+function handleBlur(event: any) {
   isFocus.value = false
   emit('blur')
-  emit('update:modelValue', input.value)
+  emit('update:modelValue', toNormal(event.target.value))
 }
 
-watch(() => props.modelValue, (val) => {
-  input.value = val
+watch(() => props.modelValue, () => {
+  input.value = filterValue(props.modelValue)
   formItemContext && formItemContext.validate && formItemContext.validate().catch((err: any) => (err))
 })
 
-function handleChange() {
-  emit('change', input.value)
-  emit('update:modelValue', input.value)
+onMounted(() => {
+  input.value = filterValue(props.modelValue)
+})
+
+function toNormal(value: string|number) {
+  if (props.thousand) {
+    return value.toString().split(',').join('')
+  }
+  return value.toString()
 }
 
-function handleInput() {
-  emit('input', input.value)
-  emit('update:modelValue', input.value)
+function filterValue(value: string|number) {
+  if (props.thousand) {
+    return toNormal(value.toString()).replace(/(^|\s)\d+/g, (m: string) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
+  }
+  return value
+}
+
+
+function handleChange(event: any) {
+  emit('change', toNormal(event.target.value))
+  emit('update:modelValue', toNormal(event.target.value))
+}
+
+function handleInput(event: any) {
+  const cursorPosition = filterValue(event.target.value).toString().length - (event.target.value.length - event.target.selectionEnd)
+  if (toNormal(event.target.value) === toNormal(props.modelValue)) {
+    return false
+  }
+  emit('input', toNormal(event.target.value))
+  emit('update:modelValue', toNormal(event.target.value))
+  setTimeout(() => {
+    if (inputField.value) {
+      inputField.value.setSelectionRange(cursorPosition, cursorPosition)
+    }
+  })
 }
 
 function hoverClear(isHover: Boolean) {
@@ -98,20 +128,13 @@ function hoverClear(isHover: Boolean) {
 }
 
 function handelClear() {
-  input.value = ''
   isFocus.value = false
-  emit('clear', input.value)
-  emit('input', input.value)
-  emit('change', input.value)
-  emit('update:modelValue', input.value)
+  emit('clear', '')
+  emit('input', '')
+  emit('change', '')
+  emit('update:modelValue', '')
 }
 
-onMounted(() => { 
-  if (props.modelValue) {
-    input.value = props.modelValue
-  } 
-})
-
 </script>
 <style lang="scss">
 .bge-input {