eco-vue-js 0.10.92 → 0.10.94

package/dist/components/FormAsync/WFormAsyncInput.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, openBlock, mergeProps, unref, createSlots, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, createBlock, openBlock, mergeProps, unref, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import _sfc_main$1 from '../Input/WInputAsync.vue.js';
 import { validateRequired } from '../../utils/validate.js';
 import { useFormAsync } from './use/useFormAsync.js';
@@ -8,7 +8,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     validate: {},
     debounce: {},
-    hideButton: { type: Boolean },
+    instant: { type: Boolean },
     type: {},
     textarea: { type: Boolean },
     resize: { type: Boolean },
@@ -33,6 +33,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     allowPaste: { type: Boolean },
     hideInput: { type: Boolean },
     noWrap: { type: Boolean },
+    textTransparent: { type: Boolean },
     title: {},
     titleIcon: {},
     description: {},
@@ -52,6 +53,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     filterValue: {},
     subgrid: { type: Boolean },
     seamless: { type: Boolean },
+    savedText: {},
+    topText: { type: Boolean },
     useQueryFn: {},
     noParams: { type: Boolean },
     queryParams: {},
@@ -102,6 +105,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "right")
           ]),
           key: "2"
+        } : void 0,
+        _ctx.$slots.prefix ? {
+          name: "prefix",
+          fn: withCtx((scope) => [
+            renderSlot(_ctx.$slots, "prefix", normalizeProps(guardReactiveProps(scope)))
+          ]),
+          key: "3"
+        } : void 0,
+        _ctx.$slots.before ? {
+          name: "before",
+          fn: withCtx((scope) => [
+            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(scope)))
+          ]),
+          key: "4"
         } : void 0
       ]), 1040);
     };

package/dist/components/FormAsync/WFormAsyncSelect.vue.js

@@ -42,6 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     placeholderSecure: { type: Boolean },
     allowPaste: { type: Boolean },
     noWrap: { type: Boolean },
+    textTransparent: { type: Boolean },
     title: {},
     titleIcon: {},
     description: {},
@@ -60,6 +61,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     filterValue: {},
     subgrid: { type: Boolean },
     seamless: { type: Boolean },
+    savedText: {},
+    topText: { type: Boolean },
     parentElement: {},
     maxHeight: {},
     maxWidth: {},

package/dist/components/FormAsync/WFormAsyncSelectInfiniteSingle.vue.js

@@ -47,6 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     placeholderSecure: { type: Boolean },
     allowPaste: { type: Boolean },
     noWrap: { type: Boolean },
+    textTransparent: { type: Boolean },
     title: {},
     titleIcon: {},
     description: {},
@@ -65,6 +66,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     filterValue: {},
     subgrid: { type: Boolean },
     seamless: { type: Boolean },
+    savedText: {},
+    topText: { type: Boolean },
     parentElement: {},
     maxHeight: {},
     maxWidth: {},

package/dist/components/FormAsync/WFormAsyncSelectSingle.vue.js

@@ -43,6 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     placeholderSecure: { type: Boolean },
     allowPaste: { type: Boolean },
     noWrap: { type: Boolean },
+    textTransparent: { type: Boolean },
     title: {},
     titleIcon: {},
     description: {},
@@ -61,6 +62,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     filterValue: {},
     subgrid: { type: Boolean },
     seamless: { type: Boolean },
+    savedText: {},
+    topText: { type: Boolean },
     parentElement: {},
     maxHeight: {},
     maxWidth: {},

package/dist/components/FormAsync/WFormAsyncSelectStringified.vue.js

@@ -43,6 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     placeholderSecure: { type: Boolean },
     allowPaste: { type: Boolean },
     noWrap: { type: Boolean },
+    textTransparent: { type: Boolean },
     title: {},
     titleIcon: {},
     description: {},
@@ -61,6 +62,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     filterValue: {},
     subgrid: { type: Boolean },
     seamless: { type: Boolean },
+    savedText: {},
+    topText: { type: Boolean },
     parentElement: {},
     maxHeight: {},
     maxWidth: {},

package/dist/components/FormAsync/use/useFormAsync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormAsync.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormAsync/use/useFormAsync.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAA;AAS5C,eAAO,MAAM,YAAY,GAAI,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,cAAc,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;;;;;uBAgCvH,SAAS;CA8BpC,CAAA"}
+{"version":3,"file":"useFormAsync.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormAsync/use/useFormAsync.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAA;AAS5C,eAAO,MAAM,YAAY,GAAI,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,cAAc,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;;;;;uBAkCvH,SAAS;CA8BpC,CAAA"}

package/dist/components/FormAsync/use/useFormAsync.js

@@ -1,11 +1,12 @@
 import { toRef, ref, computed, onBeforeUnmount } from 'vue';
+import { useFieldSaved } from '../../FieldWrapper/use/useFieldSaved.js';
 import { Modal } from '../../../utils/Modal.js';
-import { Notify } from '../../../utils/Notify.js';
 import { handleApiError } from '../../../utils/api.js';
 import { get, set } from '../../../utils/utils.js';
 
 const useFormAsync = (props, onSuccess) => {
   const enabled = toRef(props, "queryEnabled");
+  const { showSaved } = useFieldSaved();
   const { data, setData, isLoadingError } = props.noParams === true ? props.useQueryFn({ enabled }) : props.useQueryFn(toRef(props, "queryParams"), { enabled });
   const submitting = ref(false);
   const modelValue = computed(() => get(data.value ?? {}, props.field));
@@ -14,7 +15,7 @@ const useFormAsync = (props, onSuccess) => {
     submitting.value = true;
     return props.apiMethod(set({}, props.field, value)).then((response) => {
       setData(response.data);
-      Notify.success({ title: "Saved" });
+      showSaved();
       onSuccess(response.data);
     }).catch((error) => handleApiError(error, void 0, props.field)).finally(() => {
       submitting.value = false;

package/dist/components/Input/WInput.vue.d.ts

@@ -12,12 +12,17 @@ declare const _default: <Type extends InputType = "text">(__VLS_props: NonNullab
         title?(_: {}): any;
         subtitle?(_: {}): any;
         prefix?(_: {}): any;
-        prefix?(_: {}): any;
-        before?(_: {}): any;
+        prefix?(_: {
+            modelValue: (Type extends "number" ? number : string) | undefined;
+        }): any;
+        before?(_: {
+            modelValue: (Type extends "number" ? number : string) | undefined;
+        }): any;
         after?(_: {}): any;
         suffix?(_: {}): any;
         inner?(_: {}): any;
         right?(_: {}): any;
+        bottom?(_: {}): any;
     };
     emit: {
         (e: "update:model-value", value: (Type extends "number" ? number : string) | undefined): void;

package/dist/components/Input/WInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInput.vue"],"names":[],"mappings":"AA0MA;AA+aA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,SAAS,CAAA;yBAYtB,IAAI,SAAS,SAAS,GAAG,MAAM,EAC/C,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAwoBO,mBAAmB,CAAC,oCAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;qBA3hB7B,IAAI;oBAOL,IAAI;;;MAohBgD,GAAG,IAAI;WACpE,GAAG;;uBArDgB,GAAG;0BACA,GAAG;wBACJ,GAAG;wBACH,GAAG;wBACH,GAAG;uBACJ,GAAG;wBACF,GAAG;uBACJ,GAAG;uBACH,GAAG;;;YA3kBzB,oBAAoB,SAAS,4CAAa,SAAS,GAAG,IAAI;YAC1D,gBAAgB,SAAS,aAAa,GAAG,IAAI;YAC7C,aAAa,SAAS,aAAa,GAAG,IAAI;YAC1C,eAAe,SAAS,aAAa,GAAG,IAAI;YAC5C,iBAAiB,SAAS,aAAa,GAAG,IAAI;YAC9C,oBAAoB,SAAS,aAAa,GAAG,IAAI;YACjD,aAAa,GAAG,IAAI;YACpB,OAAO,SAAS,UAAU,GAAG,SAAS,GAAG,IAAI;YAC7C,MAAM,SAAS,UAAU,GAAG,IAAI;YAChC,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,WAAW,SAAS,UAAU,GAAG,IAAI;YACrC,cAAc,SAAS,UAAU,GAAG,IAAI;YACxC,cAAc,SAAS,KAAK,GAAG,IAAI;YACnC,OAAO,GAAG,IAAI;;EA+mBhB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAnpBzE,wBAmpB4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"WInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInput.vue"],"names":[],"mappings":"AA4NA;AAkcA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,SAAS,CAAA;yBAatB,IAAI,SAAS,SAAS,GAAG,MAAM,EAC/C,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAypBO,mBAAmB,CAAC,oCAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;qBA5iB7B,IAAI;oBAOL,IAAI;;;MAqiBgD,GAAG,IAAI;WACpE,GAAG;;uBAxDgB,GAAG;0BACA,GAAG;wBACJ,GAAG;;;YACH,GAAG;;;YACH,GAAG;uBACJ,GAAG;wBACF,GAAG;uBACJ,GAAG;uBACH,GAAG;wBACF,GAAG;;;YA1lB1B,oBAAoB,SAAS,4CAAa,SAAS,GAAG,IAAI;YAC1D,gBAAgB,SAAS,aAAa,GAAG,IAAI;YAC7C,aAAa,SAAS,aAAa,GAAG,IAAI;YAC1C,eAAe,SAAS,aAAa,GAAG,IAAI;YAC5C,iBAAiB,SAAS,aAAa,GAAG,IAAI;YAC9C,oBAAoB,SAAS,aAAa,GAAG,IAAI;YACjD,aAAa,GAAG,IAAI;YACpB,OAAO,SAAS,UAAU,GAAG,SAAS,GAAG,IAAI;YAC7C,MAAM,SAAS,UAAU,GAAG,IAAI;YAChC,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,WAAW,SAAS,UAAU,GAAG,IAAI;YACrC,cAAc,SAAS,UAAU,GAAG,IAAI;YACxC,cAAc,SAAS,KAAK,GAAG,IAAI;YACnC,OAAO,GAAG,IAAI;;EAgoBhB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AApqBzE,wBAoqB4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/Input/WInput.vue.js

@@ -1,10 +1,12 @@
-import { defineComponent, useTemplateRef, ref, watch, nextTick, onMounted, onBeforeUnmount, computed, createBlock, openBlock, mergeProps, createSlots, withCtx, renderSlot, unref, createElementVNode, normalizeClass, createElementBlock, createCommentVNode, toDisplayString, withModifiers, resolveDynamicComponent, withKeys } from 'vue';
+import { defineComponent, useTemplateRef, ref, watch, nextTick, onMounted, onBeforeUnmount, computed, createBlock, openBlock, mergeProps, createSlots, withCtx, renderSlot, unref, createElementVNode, normalizeClass, createElementBlock, createCommentVNode, toDisplayString, resolveDynamicComponent, normalizeProps, guardReactiveProps, withModifiers, withKeys } from 'vue';
 import _sfc_main$1 from '../FieldWrapper/WFieldWrapper.vue.js';
 import { useTabActiveListener } from '../Tabs/use/useTabActiveListener.js';
 import { Notify } from '../../utils/Notify.js';
 import { useComponentStates } from '../../utils/useComponentStates.js';
-import _sfc_main$2 from './components/InputActions.vue.js';
+import _sfc_main$2 from './components/ContentEditable.vue.js';
+import _sfc_main$3 from './components/InputActions.vue.js';
 
+const _hoisted_1 = { class: "relative flex min-h-full flex-1" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "WInput",
@@ -35,6 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     allowPaste: { type: Boolean },
     hideInput: { type: Boolean },
     noWrap: { type: Boolean },
+    textTransparent: { type: Boolean },
     title: {},
     titleIcon: {},
     description: {},
@@ -53,7 +56,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     filterField: {},
     filterValue: {},
     subgrid: { type: Boolean },
-    seamless: { type: Boolean }
+    seamless: { type: Boolean },
+    savedText: {},
+    topText: { type: Boolean }
   },
   emits: ["update:model-value", "keypress:enter", "keypress:up", "keypress:down", "keypress:delete", "keypress:backspace", "click:clear", "focus", "blur", "click", "mousedown", "click:suffix", "select:input", "paste"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -194,7 +199,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, mergeProps({ ref: "fieldWrapper" }, props, {
         class: _ctx.$attrs.class,
-        onClick: _cache[10] || (_cache[10] = ($event) => {
+        onClick: _cache[9] || (_cache[9] = ($event) => {
           _ctx.$emit("click:suffix", $event);
           _ctx.seamless && focus();
         })
@@ -246,9 +251,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "border-opacity-0 group-hover/field:border-opacity-100 dark:border-opacity-0 dark:group-hover/field:border-opacity-100": _ctx.seamless && !focused,
                 "bg-default dark:bg-default-dark": !_ctx.seamless || focused
               }]),
-              onClick: focus,
-              onMousedown: _cache[9] || (_cache[9] = withModifiers(() => {
-              }, ["prevent"]))
+              onClick: focus
             }, [
               _ctx.icon ? (openBlock(), createElementBlock("div", {
                 key: 0,
@@ -273,70 +276,76 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     "flex-wrap": !_ctx.noWrap
                   }])
                 }, [
-                  renderSlot(_ctx.$slots, "prefix"),
+                  renderSlot(_ctx.$slots, "prefix", normalizeProps(guardReactiveProps({ modelValue: _ctx.modelValue }))),
                   createElementVNode("div", {
-                    class: normalizeClass(["flex flex-1 items-baseline", {
+                    class: normalizeClass(["overflow-auto font-normal", {
                       "absolute w-0 max-w-0": _ctx.hideInput,
-                      "w-option-has-bg-input": _ctx.$slots.prefix
+                      "w-full": !_ctx.hideInput,
+                      "w-option-has-bg-input": _ctx.$slots.prefix,
+                      "resize-y": _ctx.resize && _ctx.textarea,
+                      "resize-none": !_ctx.resize && _ctx.textarea,
+                      "h-[calc(var(--w-input-height,2.75rem)-2px)]": !_ctx.textarea && !_ctx.$slots.suffix,
+                      "w-option": !_ctx.textarea && _ctx.$slots.prefix,
+                      "font-mono": _ctx.mono,
+                      "text-black-default dark:text-gray-200": !unref(isDisabled),
+                      "text-black-default/50 dark:text-gray-200/50": unref(isDisabled),
+                      "-p--w-option-padding h-[--w-textarea-height,10rem] min-h-[--w-textarea-height,10rem] w-full": _ctx.textarea
                     }])
                   }, [
-                    renderSlot(_ctx.$slots, "before"),
-                    (openBlock(), createBlock(resolveDynamicComponent(_ctx.textarea ? "textarea" : "input"), {
-                      id,
-                      ref: "input",
-                      class: normalizeClass(["w-input max-w-full flex-1 basis-auto appearance-none border-none bg-[inherit] font-normal outline-0 placeholder:text-gray-400 disabled:cursor-not-allowed disabled:opacity-80 dark:placeholder:text-gray-500", {
-                        "-p--w-option-padding min-h-[--w-textarea-height,10rem] w-full": _ctx.textarea,
-                        "resize-y": _ctx.resize && _ctx.textarea,
-                        "resize-none": !_ctx.resize && _ctx.textarea,
-                        "h-[calc(var(--w-input-height,2.75rem)-2px)]": !_ctx.textarea && !_ctx.$slots.suffix,
-                        "w-option": !_ctx.textarea && _ctx.$slots.prefix,
-                        "font-mono": _ctx.mono,
-                        "text-secure": _ctx.textSecure && !isSecureVisible.value,
-                        "text-black-default dark:text-gray-200": !unref(isDisabled),
-                        "text-black-default/50 dark:text-gray-200/50": unref(isDisabled)
-                      }]),
-                      value: _ctx.placeholderSecure && _ctx.modelValue === void 0 && !focused ? "******" : _ctx.modelValue,
-                      placeholder: _ctx.placeholder,
-                      type: _ctx.type ?? "text",
-                      name: _ctx.name,
-                      disabled: unref(isDisabled),
-                      readonly: unref(isReadonly) || _ctx.unclickable,
-                      autocomplete: _ctx.autocomplete,
-                      size: _ctx.size || void 0,
-                      step: _ctx.step,
-                      min: _ctx.min,
-                      max: _ctx.max,
-                      spellcheck: _ctx.spellcheck ? "true" : "false",
-                      onInput: handleInputEvent,
-                      onKeypress: _cache[0] || (_cache[0] = withKeys(withModifiers(($event) => !unref(isDisabled) && !unref(isReadonly) && _ctx.$emit("keypress:enter", $event), ["exact"]), ["enter"])),
-                      onKeydown: [
-                        _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => !unref(isDisabled) && !unref(isReadonly) && _ctx.$emit("keypress:up", $event), ["exact", "stop"]), ["up"])),
-                        _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => !unref(isDisabled) && !unref(isReadonly) && _ctx.$emit("keypress:down", $event), ["exact", "stop"]), ["down"])),
-                        _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => {
-                          !unref(isDisabled) && !unref(isReadonly) && _ctx.$emit("keypress:delete", $event);
-                          handleBackspace($event);
-                        }, ["exact", "stop"]), ["delete"]))
-                      ],
-                      onFocus: ($event) => {
-                        _ctx.$emit("focus", $event);
-                        setFocused(true);
-                        _ctx.seamless && nextTick(scrollToInput);
-                      },
-                      onBlur: ($event) => {
-                        _ctx.$emit("blur", $event);
-                        setFocused(false);
-                        isSecureVisible.value = false;
-                        _ctx.seamless && unref(contentRef)?.scrollTo({ left: 0 });
-                      },
-                      onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("click", $event)),
-                      onMousedown: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.$emit("mousedown", $event), ["stop"])),
-                      onSelect: _cache[6] || (_cache[6] = withModifiers(($event) => _ctx.$emit("select:input", $event), ["stop"]))
-                    }, null, 40, ["id", "class", "value", "placeholder", "type", "name", "disabled", "readonly", "autocomplete", "size", "step", "min", "max", "spellcheck", "onFocus", "onBlur"])),
-                    renderSlot(_ctx.$slots, "after")
+                    createElementVNode("div", _hoisted_1, [
+                      renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ modelValue: _ctx.modelValue }))),
+                      (openBlock(), createBlock(resolveDynamicComponent(_ctx.textarea ? _sfc_main$2 : "input"), {
+                        id,
+                        ref: "input",
+                        class: normalizeClass(["w-input min-h-full flex-1 basis-auto appearance-none border-none bg-[inherit] outline-0 placeholder:text-gray-400 disabled:cursor-not-allowed dark:placeholder:text-gray-500", {
+                          "text-secure": _ctx.textSecure && !isSecureVisible.value,
+                          "[-webkit-text-fill-color:transparent]": _ctx.textTransparent
+                        }]),
+                        value: _ctx.placeholderSecure && _ctx.modelValue === void 0 && !focused ? "******" : _ctx.modelValue,
+                        placeholder: _ctx.placeholder,
+                        type: _ctx.type ?? "text",
+                        name: _ctx.name,
+                        disabled: unref(isDisabled),
+                        readonly: unref(isReadonly) || _ctx.unclickable,
+                        autocomplete: _ctx.autocomplete,
+                        size: _ctx.size || void 0,
+                        step: _ctx.step,
+                        min: _ctx.min,
+                        max: _ctx.max,
+                        spellcheck: _ctx.spellcheck ? "true" : "false",
+                        "max-length": _ctx.maxLength,
+                        onInput: handleInputEvent,
+                        onKeypress: _cache[0] || (_cache[0] = withKeys(withModifiers(($event) => !unref(isDisabled) && !unref(isReadonly) && _ctx.$emit("keypress:enter", $event), ["exact"]), ["enter"])),
+                        onKeydown: [
+                          _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => !unref(isDisabled) && !unref(isReadonly) && _ctx.$emit("keypress:up", $event), ["exact", "stop"]), ["up"])),
+                          _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => !unref(isDisabled) && !unref(isReadonly) && _ctx.$emit("keypress:down", $event), ["exact", "stop"]), ["down"])),
+                          _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => {
+                            !unref(isDisabled) && !unref(isReadonly) && _ctx.$emit("keypress:delete", $event);
+                            handleBackspace($event);
+                          }, ["exact", "stop"]), ["delete"]))
+                        ],
+                        onFocus: ($event) => {
+                          _ctx.$emit("focus", $event);
+                          setFocused(true);
+                          _ctx.seamless && nextTick(scrollToInput);
+                        },
+                        onBlur: ($event) => {
+                          _ctx.$emit("blur", $event);
+                          setFocused(false);
+                          isSecureVisible.value = false;
+                          _ctx.seamless && unref(contentRef)?.scrollTo({ left: 0 });
+                        },
+                        onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("click", $event)),
+                        onMousedown: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.$emit("mousedown", $event), ["stop"])),
+                        onSelect: _cache[6] || (_cache[6] = withModifiers(($event) => _ctx.$emit("select:input", $event), ["stop"])),
+                        "onUpdate:modelValue": updateModelValue
+                      }, null, 40, ["id", "class", "value", "placeholder", "type", "name", "disabled", "readonly", "autocomplete", "size", "step", "min", "max", "spellcheck", "max-length", "onFocus", "onBlur"])),
+                      renderSlot(_ctx.$slots, "after")
+                    ])
                   ], 2)
                 ], 2)
               ], 2),
-              !_ctx.seamless || focused ? (openBlock(), createBlock(_sfc_main$2, {
+              !_ctx.seamless || focused ? (openBlock(), createBlock(_sfc_main$3, {
                 key: 1,
                 "model-value": _ctx.modelValue,
                 loading: _ctx.loading,
@@ -369,7 +378,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 } : void 0
               ]), 1032, ["model-value", "loading", "allow-clear", "disabled", "readonly", "text-secure", "is-secure-visible", "allow-paste", "allow-copy", "focused", "onClick:slot"])) : createCommentVNode("", true),
               renderSlot(_ctx.$slots, "inner")
-            ], 34)
+            ], 2)
           ]),
           key: "3"
         },
@@ -379,6 +388,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "right")
           ]),
           key: "4"
+        } : void 0,
+        _ctx.$slots.bottom ? {
+          name: "bottom",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "bottom")
+          ]),
+          key: "5"
         } : void 0
       ]), 1040, ["class"]);
     };

package/dist/components/Input/WInputAsync.vue.d.ts

@@ -9,6 +9,12 @@ declare const _default: <Type extends InputType = "text">(__VLS_props: NonNullab
         title?(_: {}): any;
         subtitle?(_: {}): any;
         right?(_: {}): any;
+        prefix?(_: {
+            modelValue: string | undefined;
+        }): any;
+        before?(_: {
+            modelValue: string | undefined;
+        }): any;
     };
     emit: (e: "update:model-value", value: (Type extends "number" ? number : string) | undefined) => void;
 }>) => import('vue').VNode & {

package/dist/components/Input/WInputAsync.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WInputAsync.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInputAsync.vue"],"names":[],"mappings":"AAwFA;AAoPA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAA;yBAa3B,IAAI,SAAS,SAAS,GAAG,MAAM,EAC/C,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAyYO,mBAAmB,CAAC;;kLAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;uBAlDiB,GAAG;0BACA,GAAG;uBACN,GAAG;;cA3UzB,oBAAoB,SAAS,4CAAa,SAAS,KAAG,IAAI;EA+X5D,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AApZzE,wBAoZ4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"WInputAsync.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInputAsync.vue"],"names":[],"mappings":"AA2HA;AAgRA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAA;yBAU3B,IAAI,SAAS,SAAS,GAAG,MAAM,EAC/C,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAubO,mBAAmB,CAAC;;kLAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;uBA/CiB,GAAG;0BACA,GAAG;uBACN,GAAG;;;YACF,GAAG;;;YACH,GAAG;;cA9X1B,oBAAoB,SAAS,4CAAa,SAAS,KAAG,IAAI;EA6a5D,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAlczE,wBAkc4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/Input/WInputAsync.vue.js

@@ -1,13 +1,12 @@
-import { defineComponent, ref, useTemplateRef, computed, watch, toRef, createBlock, openBlock, mergeProps, createSlots, withCtx, renderSlot, unref, createCommentVNode, normalizeClass, markRaw, createElementVNode, createVNode, Transition, createElementBlock, normalizeStyle } from 'vue';
-import _sfc_main$2 from '../Button/WButtonInput.vue.js';
+import { defineComponent, ref, useTemplateRef, computed, watch, toRef, createBlock, openBlock, mergeProps, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, createVNode, withModifiers, unref, createTextVNode, Transition, createElementBlock, createCommentVNode, normalizeStyle } from 'vue';
+import _sfc_main$2 from '../Button/WButton.vue.js';
 import _sfc_main$1 from './WInput.vue.js';
-import IconCheck from '../../assets/icons/default/IconCheck.svg.js';
-import IconEdit from '../../assets/icons/sax/IconEdit.svg.js';
-import IconSlash from '../../assets/icons/sax/IconSlash.svg.js';
+import { SemanticType } from '../../utils/SemanticType.js';
 import { useComponentStates } from '../../utils/useComponentStates.js';
 
-const _hoisted_1 = { class: "absolute inset-x-3 bottom-1 isolate h-0.5" };
-const _hoisted_2 = {
+const _hoisted_1 = { class: "flex justify-end gap-4 pt-4" };
+const _hoisted_2 = { class: "absolute inset-x-3 bottom-[calc((var(--w-input-height)-1.75em)/2)] isolate h-0.5" };
+const _hoisted_3 = {
   key: 0,
   class: "absolute inset-0 -z-10 bg-gray-200 dark:bg-gray-700"
 };
@@ -17,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     validate: {},
     debounce: {},
-    hideButton: { type: Boolean },
+    instant: { type: Boolean },
     modelValue: {},
     type: {},
     textarea: { type: Boolean },
@@ -44,6 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     allowPaste: { type: Boolean },
     hideInput: { type: Boolean },
     noWrap: { type: Boolean },
+    textTransparent: { type: Boolean },
     title: {},
     titleIcon: {},
     description: {},
@@ -62,7 +62,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     filterField: {},
     filterValue: {},
     subgrid: { type: Boolean },
-    seamless: { type: Boolean }
+    seamless: { type: Boolean },
+    savedText: {},
+    topText: { type: Boolean }
   },
   emits: ["update:model-value"],
   setup(__props, { emit: __emit }) {
@@ -75,7 +77,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const inputRef = useTemplateRef("input");
     const errorMessageValue = ref();
     const hasChangesValue = computed(() => props.modelValue !== value.value);
-    const canSave = computed(() => props.textSecure && focused.value || hasChangesValue.value);
     const timeout = ref(null);
     const doClearTimeout = () => {
       if (timeout.value) {
@@ -92,14 +93,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       reset();
       inputRef.value?.blur();
     };
-    const toggle = async () => {
+    const save = async () => {
       if (isDisabled.value || isReadonly.value || props.loading) return;
-      if (canSave.value) {
-        emitUpdateModelValue(value.value);
-      } else {
-        if (focused.value) cancel();
-        else open();
-      }
+      emitUpdateModelValue(value.value);
     };
     const open = () => {
       if (isDisabled.value || isReadonly.value || props.loading) return;
@@ -125,6 +121,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (isDisabled.value || isReadonly.value || props.loading) return;
       if (errorMessageValue.value) return;
       if (props.placeholderSecure) inputRef.value?.blur();
+      if (timeout.value) clearTimeout(timeout.value);
       emit("update:model-value", newValue);
       if (!props.placeholderSecure) saved.value = true;
     };
@@ -133,20 +130,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       doClearTimeout();
       event.stopPropagation();
       event.preventDefault();
-      if (canSave.value) emitUpdateModelValue(value.value);
+      if (value.value !== props.modelValue) emitUpdateModelValue(value.value);
     };
     const handlePaste = () => {
       doClearTimeout();
       if (!value.value) return;
-      if (canSave.value) emitUpdateModelValue(value.value);
+      if (value.value !== props.modelValue) emitUpdateModelValue(value.value);
     };
     const saveDebounced = () => {
-      if (canSave.value) emit("update:model-value", value.value);
+      if (value.value !== props.modelValue) emit("update:model-value", value.value);
       timeout.value = null;
     };
     const updateModelValueDebounced = () => {
       if (timeout.value) clearTimeout(timeout.value);
-      if (!canSave.value) {
+      if (value.value === props.modelValue) {
         timeout.value = null;
         return;
       }
@@ -168,13 +165,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: _ctx.$attrs.class,
         "onKeypress:enter": handleEnterPress,
         onClick: open,
-        onBlur: _cache[0] || (_cache[0] = ($event) => {
-          props.textSecure ? cancel() : toggle();
+        onBlur: _cache[2] || (_cache[2] = ($event) => {
+          props.textSecure || !hasChangesValue.value ? cancel() : save();
           focused.value = false;
         }),
-        onFocus: _cache[1] || (_cache[1] = ($event) => focused.value = true),
+        onFocus: _cache[3] || (_cache[3] = ($event) => focused.value = true),
         onPaste: handlePaste,
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => value.value = $event)
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => value.value = $event)
       }), createSlots({ _: 2 }, [
         _ctx.$slots.title ? {
           name: "title",
@@ -190,29 +187,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "1"
         } : void 0,
-        !unref(isReadonly) && !_ctx.hideButton || _ctx.$slots.right ? {
+        _ctx.$slots.right ? {
           name: "right",
           fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "right"),
-            !unref(isReadonly) && !_ctx.hideButton ? (openBlock(), createBlock(_sfc_main$2, {
-              key: 0,
-              icon: canSave.value ? markRaw(unref(IconCheck)) : focused.value ? markRaw(unref(IconSlash)) : markRaw(unref(IconEdit)),
-              "tooltip-text": !_ctx.loading && focused.value ? canSave.value ? "Save" : "Cancel" : void 0,
-              loading: _ctx.loading,
-              skeleton: _ctx.skeleton,
-              disabled: _ctx.disabled,
-              class: normalizeClass({
-                "bg-primary dark:bg-primary-dark text-default dark:text-default-dark": canSave.value
-              }),
-              onClick: toggle
-            }, null, 8, ["icon", "tooltip-text", "loading", "skeleton", "disabled", "class"])) : createCommentVNode("", true)
+            renderSlot(_ctx.$slots, "right")
           ]),
           key: "2"
         } : void 0,
+        _ctx.$slots.prefix ? {
+          name: "prefix",
+          fn: withCtx((scope) => [
+            renderSlot(_ctx.$slots, "prefix", normalizeProps(guardReactiveProps(scope)))
+          ]),
+          key: "3"
+        } : void 0,
+        _ctx.$slots.before ? {
+          name: "before",
+          fn: withCtx((scope) => [
+            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(scope)))
+          ]),
+          key: "4"
+        } : void 0,
+        !_ctx.skeleton && _ctx.textSecure && focused.value ? {
+          name: "bottom",
+          fn: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              createVNode(_sfc_main$2, {
+                "semantic-type": unref(SemanticType).SECONDARY,
+                disabled: _ctx.disabled || _ctx.loading,
+                class: "basis-32",
+                onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["prevent"])),
+                onClick: cancel
+              }, {
+                default: withCtx(() => _cache[5] || (_cache[5] = [
+                  createTextVNode(" Cancel ")
+                ])),
+                _: 1
+              }, 8, ["semantic-type", "disabled"]),
+              createVNode(_sfc_main$2, {
+                "semantic-type": unref(SemanticType).PRIMARY,
+                loading: _ctx.loading,
+                disabled: _ctx.disabled,
+                class: "basis-32",
+                onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
+                }, ["prevent"])),
+                onClick: save
+              }, {
+                default: withCtx(() => _cache[6] || (_cache[6] = [
+                  createTextVNode(" Save ")
+                ])),
+                _: 1
+              }, 8, ["semantic-type", "loading", "disabled"])
+            ])
+          ]),
+          key: "5"
+        } : void 0,
         _ctx.debounce ? {
           name: "inner",
           fn: withCtx(() => [
-            createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
               createVNode(Transition, {
                 "enter-active-class": "transition-opacity",
                 "leave-active-class": "transition-opacity",
@@ -220,7 +254,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "leave-to-class": "opacity-0"
               }, {
                 default: withCtx(() => [
-                  timeout.value ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true)
+                  timeout.value ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true)
                 ]),
                 _: 1
               }),
@@ -241,7 +275,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               })
             ])
           ]),
-          key: "3"
+          key: "6"
         } : void 0
       ]), 1040, ["class"]);
     };