yc-design-vue 1.0.1

package/es/Input/Input.vue2.js

@@ -0,0 +1,231 @@
+import { defineComponent, toRefs, ref, computed, createElementBlock, openBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode, withCtx, renderSlot, withDirectives, mergeProps, withKeys, vShow, createSlots } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import { getGlobalConfig } from "../_shared/utils/global-config.js";
+import useControlValue from "../_shared/utils/control.js";
+import useLimitedInput from "./hooks/useLimitedInput.js";
+import IconButton from "../_shared/components/IconButton.vue.js";
+import _sfc_main$1 from "../_shared/components/PreventFocus.vue.js";
+/* empty css                                         */
+import InputSuffix from "./InputSuffix.vue.js";
+const _hoisted_1 = ["value", "type", "disabled", "readonly", "placeholder"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Input"
+  },
+  __name: "Input",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: "" },
+    size: { default: void 0 },
+    allowClear: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    error: { type: Boolean, default: void 0 },
+    placeholder: { default: "" },
+    maxLength: { default: void 0 },
+    wordLength: { type: Function, default: (value) => {
+      return value.length;
+    } },
+    wordSlice: { type: Function, default: (value, maxLength) => {
+      return value.slice(0, maxLength);
+    } },
+    showWordLimit: { type: Boolean, default: false },
+    inputAttrs: { default: () => {
+      return {};
+    } },
+    isPassword: { type: Boolean, default: false },
+    visibility: { type: Boolean, default: void 0 },
+    defaultVisibility: { type: Boolean, default: false },
+    invisibleButton: { type: Boolean, default: true },
+    showInput: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "update:visibility", "input", "change", "visibility-change", "pressEnter", "keydown", "clear", "focus", "blur"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { visibility, defaultVisibility } = toRefs(props);
+    const { size } = getGlobalConfig(props);
+    const inputRef = ref();
+    const computedVisibility = useControlValue(
+      visibility,
+      defaultVisibility.value,
+      (val) => {
+        emits("update:visibility", val);
+        emits("visibility-change", val);
+      }
+    );
+    const type = computed(() => {
+      return computedVisibility.value ? "password" : "text";
+    });
+    const {
+      computedValue,
+      showWordLimit,
+      showClearBtn,
+      curLength,
+      maxLength,
+      error,
+      handleInput,
+      handleComposition
+    } = useLimitedInput({
+      props,
+      emits,
+      inputRef
+    });
+    const handleEvent = async (type2, e) => {
+      switch (type2) {
+        case "input":
+          {
+            handleInput(e);
+          }
+          break;
+        case "change":
+          {
+            emits("change", computedValue.value, e);
+          }
+          break;
+        case "focus":
+        case "blur":
+          {
+            emits(type2, e);
+          }
+          break;
+        case "clear":
+          {
+            computedValue.value = "";
+            emits("clear", e);
+          }
+          break;
+        case "keydown":
+          {
+            const ev = e;
+            emits("keydown", ev);
+            ev.key == "Enter" && emits("pressEnter", ev);
+          }
+          break;
+      }
+    };
+    __expose({
+      focus() {
+        var _a;
+        (_a = inputRef.value) == null ? void 0 : _a.focus();
+      },
+      blur() {
+        var _a;
+        (_a = inputRef.value) == null ? void 0 : _a.blur();
+      },
+      getInputRef() {
+        return inputRef.value;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-input-outer",
+          `yc-input-size-${unref(size)}`,
+          {
+            "yc-input-disabled": _ctx.disabled,
+            "yc-input-error": unref(error),
+            "yc-input-has-prepend": _ctx.$slots.prepend,
+            "yc-input-has-append": _ctx.$slots.append
+          }
+        ])
+      }, [
+        _ctx.$slots.prepend ? (openBlock(), createBlock(unref(_sfc_main$1), {
+          key: 0,
+          class: "yc-input-prepend"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "prepend", {}, void 0, true)
+          ]),
+          _: 3
+        })) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["yc-input-wrapper", { "yc-input-wrapper-disabled": _ctx.disabled }])
+        }, [
+          _ctx.$slots.prefix ? (openBlock(), createBlock(unref(_sfc_main$1), {
+            key: 0,
+            class: "yc-input-prefix"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
+            ]),
+            _: 3
+          })) : createCommentVNode("", true),
+          withDirectives(createElementVNode("input", mergeProps({
+            value: unref(computedValue),
+            type: type.value,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            placeholder: _ctx.placeholder
+          }, _ctx.inputAttrs, {
+            class: "yc-input",
+            ref_key: "inputRef",
+            ref: inputRef,
+            onInput: _cache[0] || (_cache[0] = ($event) => handleEvent("input", $event)),
+            onChange: _cache[1] || (_cache[1] = ($event) => handleEvent("change", $event)),
+            onCompositionstart: _cache[2] || (_cache[2] = //@ts-ignore
+            (...args) => unref(handleComposition) && unref(handleComposition)(...args)),
+            onCompositionupdate: _cache[3] || (_cache[3] = //@ts-ignore
+            (...args) => unref(handleComposition) && unref(handleComposition)(...args)),
+            onCompositionend: _cache[4] || (_cache[4] = //@ts-ignore
+            (...args) => unref(handleComposition) && unref(handleComposition)(...args)),
+            onFocus: _cache[5] || (_cache[5] = ($event) => handleEvent("focus", $event)),
+            onBlur: _cache[6] || (_cache[6] = ($event) => handleEvent("blur", $event)),
+            onKeydown: _cache[7] || (_cache[7] = withKeys(($event) => handleEvent("keydown", $event), ["enter"]))
+          }), null, 16, _hoisted_1), [
+            [vShow, !_ctx.$slots.label || _ctx.$slots.label && _ctx.showInput]
+          ]),
+          _ctx.$slots.label ? withDirectives((openBlock(), createBlock(unref(_sfc_main$1), {
+            key: 1,
+            class: "yc-input text-ellipsis"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "label", {}, void 0, true)
+            ]),
+            _: 3
+          }, 512)), [
+            [vShow, !_ctx.showInput]
+          ]) : createCommentVNode("", true),
+          unref(showClearBtn) ? (openBlock(), createBlock(unref(IconButton), {
+            key: 2,
+            class: "yc-input-clear-button",
+            onClick: _cache[8] || (_cache[8] = ($event) => handleEvent("clear", $event))
+          })) : createCommentVNode("", true),
+          _ctx.$slots.suffix || unref(showWordLimit) || _ctx.isPassword && _ctx.invisibleButton ? (openBlock(), createBlock(InputSuffix, {
+            key: 3,
+            "cur-length": unref(curLength),
+            "max-length": unref(maxLength),
+            "computed-value": unref(computedValue),
+            "show-word-limit": unref(showWordLimit),
+            "computed-visibility": unref(computedVisibility),
+            "invisible-button": _ctx.invisibleButton,
+            "is-password": _ctx.isPassword,
+            onVisibilityChange: _cache[9] || (_cache[9] = (v) => computedVisibility.value = v)
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots.suffix ? {
+              name: "suffix",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["cur-length", "max-length", "computed-value", "show-word-limit", "computed-visibility", "invisible-button", "is-password"])) : createCommentVNode("", true)
+        ], 2),
+        _ctx.$slots.append ? (openBlock(), createBlock(unref(_sfc_main$1), {
+          key: 1,
+          class: "yc-input-append"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "append", {}, void 0, true)
+          ]),
+          _: 3
+        })) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Input/InputSuffix.vue.d.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    curLength: number;
+    maxLength?: number;
+    showWordLimit: boolean;
+    computedVisibility: boolean;
+    isPassword: boolean;
+    invisibleButton: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        suffix?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    clear: (ev: MouseEvent) => any;
+    visibilityChange: (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: ((ev: MouseEvent) => any) | undefined;
+    onVisibilityChange?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Input/InputSuffix.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./InputSuffix.vue2.js";
+/* empty css                 */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const InputSuffix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7922ddd3"]]);
+export {
+  InputSuffix as default
+};

package/es/Input/InputSuffix.vue2.js

@@ -0,0 +1,51 @@
+import { defineComponent, createBlock, openBlock, unref, withCtx, createElementBlock, createCommentVNode, renderSlot, toDisplayString } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                         */
+import _sfc_main$3 from "../_shared/icons/IconEyeClose.vue2.js";
+import _sfc_main$2 from "../_shared/icons/IconEyeOpen.vue2.js";
+import IconButton from "../_shared/components/IconButton.vue.js";
+import _sfc_main$1 from "../_shared/components/PreventFocus.vue.js";
+/* empty css                                         */
+const _hoisted_1 = {
+  key: 0,
+  class: "yc-input-word-limit"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InputSuffix",
+  props: {
+    curLength: {},
+    maxLength: {},
+    showWordLimit: { type: Boolean },
+    computedVisibility: { type: Boolean },
+    isPassword: { type: Boolean },
+    invisibleButton: { type: Boolean }
+  },
+  emits: ["clear", "visibilityChange"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), { class: "yc-input-suffix" }, {
+        default: withCtx(() => [
+          _ctx.showWordLimit ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(_ctx.curLength) + "/" + toDisplayString(_ctx.maxLength), 1)) : createCommentVNode("", true),
+          _ctx.isPassword && _ctx.invisibleButton ? (openBlock(), createBlock(unref(IconButton), {
+            key: 1,
+            size: 14,
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("visibilityChange", !_ctx.computedVisibility))
+          }, {
+            default: withCtx(() => [
+              _ctx.computedVisibility ? (openBlock(), createBlock(unref(_sfc_main$2), { key: 0 })) : (openBlock(), createBlock(unref(_sfc_main$3), { key: 1 }))
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          _ctx.$slots.suffix ? renderSlot(_ctx.$slots, "suffix", { key: 2 }, void 0, true) : createCommentVNode("", true)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Input/hooks/useCursor.d.ts

@@ -0,0 +1,19 @@
+import { Ref } from 'vue';
+export default function useCursor(input: Ref<HTMLInputElement | HTMLTextAreaElement | undefined>): {
+    recordCursor: () => void;
+    setCursor: () => void;
+    getCursor: () => number | undefined;
+    selectionRef: Ref<{
+        selectionStart?: number;
+        selectionEnd?: number;
+        value?: string;
+        beforeTxt?: string;
+        afterTxt?: string;
+    } | undefined, {
+        selectionStart?: number;
+        selectionEnd?: number;
+        value?: string;
+        beforeTxt?: string;
+        afterTxt?: string;
+    } | undefined>;
+};

package/es/Input/hooks/useCursor.js

@@ -0,0 +1,52 @@
+import { ref } from "vue";
+function useCursor(input) {
+  const selectionRef = ref();
+  function recordCursor() {
+    if (!input.value) return;
+    const { selectionStart, selectionEnd, value } = input.value;
+    if (selectionStart == null || selectionEnd == null) return;
+    const beforeTxt = value.slice(0, Math.max(0, selectionStart));
+    const afterTxt = value.slice(Math.max(0, selectionEnd));
+    selectionRef.value = {
+      selectionStart,
+      selectionEnd,
+      value,
+      beforeTxt,
+      afterTxt
+    };
+  }
+  function getCursor() {
+    if (!input.value || !selectionRef.value) return;
+    const { value } = input.value;
+    const { beforeTxt, afterTxt, selectionStart } = selectionRef.value;
+    if (!beforeTxt || !afterTxt || !selectionStart) return;
+    let startPos = value.length;
+    if (value.endsWith(afterTxt)) {
+      startPos = value.length - afterTxt.length;
+    } else if (value.startsWith(beforeTxt)) {
+      startPos = beforeTxt.length;
+    } else {
+      const beforeLastChar = beforeTxt[selectionStart - 1];
+      const newIndex = value.indexOf(beforeLastChar, selectionStart - 1);
+      if (newIndex !== -1) {
+        startPos = newIndex + 1;
+      }
+    }
+    return startPos;
+  }
+  function setCursor() {
+    var _a;
+    const startPos = getCursor();
+    if (!startPos) return;
+    (_a = input.value) == null ? void 0 : _a.setSelectionRange(startPos, startPos);
+  }
+  return {
+    recordCursor,
+    setCursor,
+    getCursor,
+    selectionRef
+  };
+}
+export {
+  useCursor as default
+};

package/es/Input/hooks/useLimitedInput.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'vue';
+import { Props, RequiredDeep } from '../../_shared/type';
+import { TextareaEmits } from '../../Textarea';
+import { InputProps as _InputProps, InputEmits } from '..';
+export type InputProps = RequiredDeep<_InputProps>;
+declare const _default: (params: {
+    props: Props;
+    emits: InputEmits | TextareaEmits;
+    inputRef: Ref<HTMLInputElement | HTMLTextAreaElement | undefined>;
+}) => {
+    computedValue: import('vue').WritableComputedRef<any, string>;
+    showClearBtn: import('vue').ComputedRef<boolean>;
+    showWordLimit: import('vue').ComputedRef<boolean>;
+    curLength: import('vue').ComputedRef<any>;
+    error: import('vue').WritableComputedRef<any, boolean>;
+    disabled: Ref<boolean, boolean>;
+    maxLength: import('vue').ComputedRef<number>;
+    handleInput: (e: Event) => Promise<void>;
+    handleComposition: (e: CompositionEvent) => Promise<void> | undefined;
+};
+export default _default;

package/es/Input/hooks/useLimitedInput.js

@@ -0,0 +1,124 @@
+import { toRefs, computed, ref, nextTick } from "vue";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "../../_shared/utils/dom.js";
+import { isNumber, isFunction, isUndefined } from "../../_shared/utils/is.js";
+import "../../_shared/utils/time.js";
+import "../../Empty/index.js";
+/* empty css                            */
+import useControlValue from "../../_shared/utils/control.js";
+import useCursor from "./useCursor.js";
+const useLimitedInput = (params) => {
+  const { props, emits, inputRef } = params;
+  const {
+    modelValue,
+    defaultValue,
+    disabled,
+    readonly,
+    allowClear,
+    error: _error,
+    showWordLimit: _showWordLimit,
+    maxLength: _maxLength
+  } = toRefs(props);
+  const { wordLength, wordSlice } = props;
+  const { setCursor, recordCursor } = useCursor(inputRef);
+  const maxLength = computed(() => {
+    var _a;
+    return isNumber(_maxLength.value) ? _maxLength.value : (_a = _maxLength.value) == null ? void 0 : _a.length;
+  });
+  const maxLengthErrorOnly = computed(() => {
+    var _a;
+    return isNumber(_maxLength.value) ? false : (_a = _maxLength.value) == null ? void 0 : _a.errorOnly;
+  });
+  const error = useControlValue(_error, false);
+  const computedValue = useControlValue(
+    modelValue,
+    defaultValue.value,
+    (val) => {
+      emits("update:modelValue", val);
+    }
+  );
+  const showWordLimit = computed(() => {
+    return isNumber(maxLength.value) && _showWordLimit.value;
+  });
+  const showClearBtn = computed(() => {
+    return allowClear.value && !disabled.value && !readonly.value && !!computedValue.value.length;
+  });
+  let wordLengthMax = 0;
+  const curLength = computed(() => {
+    return getValueLength(computedValue.value);
+  });
+  const isComposition = ref(false);
+  const recordWordMaxLength = () => {
+    if (curLength.value == maxLength.value) {
+      wordLengthMax = computedValue.value.length;
+    }
+  };
+  function getValueLength(value) {
+    if (isFunction(wordLength)) {
+      return wordLength(value);
+    }
+    return (value == null ? void 0 : value.length) || 0;
+  }
+  const keepControl = async () => {
+    recordCursor();
+    await nextTick();
+    if (inputRef.value && computedValue.value !== inputRef.value.value) {
+      inputRef.value.value = computedValue.value;
+      setCursor();
+    }
+  };
+  const updateValue = (value, e) => {
+    if (maxLength.value && getValueLength(value) > maxLength.value) {
+      if (!maxLengthErrorOnly.value) {
+        computedValue.value = wordSlice(value, wordLengthMax);
+      } else {
+        computedValue.value = value;
+        error.value = true;
+      }
+    } else {
+      computedValue.value = value;
+    }
+    emits("input", value, e);
+    keepControl();
+  };
+  const handleComposition = (e) => {
+    const { value, selectionStart, selectionEnd } = e.target;
+    isComposition.value = e.type !== "compositionend";
+    if (isComposition.value) {
+      if (isUndefined(maxLength.value)) {
+        emits("input", value, e);
+        computedValue.value = value;
+      }
+      return;
+    }
+    if (maxLength.value && !maxLengthErrorOnly.value && curLength.value >= maxLength.value && getValueLength(value) > maxLength.value && selectionStart === selectionEnd) {
+      return keepControl();
+    }
+    updateValue(value, e);
+  };
+  const handleInput = async (e) => {
+    const { value } = e.target;
+    if (isComposition.value) {
+      return;
+    }
+    recordWordMaxLength();
+    if (maxLength.value && !maxLengthErrorOnly.value && curLength.value >= maxLength.value && getValueLength(value) > maxLength.value && e.inputType === "insertText") {
+      return keepControl();
+    }
+    updateValue(value, e);
+  };
+  return {
+    computedValue,
+    showClearBtn,
+    showWordLimit,
+    curLength,
+    error,
+    disabled,
+    maxLength,
+    handleInput,
+    handleComposition
+  };
+};
+export {
+  useLimitedInput as default
+};