'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
var lodashEs = require('lodash-es');
var input = require('./input.js');
var createNamespace = require('../../../utils/create-namespace.js');

"use strict";
const _hoisted_1 = { class: "title" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "LlPasswordInput", inheritAttrs: false },
  __name: "password-input",
  props: input.passwordInputProps,
  emits: input.passwordInputEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace.createNamespace("password-input");
    const attrs = vue.useAttrs();
    const inputPasswordRef = vue.ref();
    const clickVisible = vue.ref(false);
    const holdVisible = vue.ref(false);
    const containerAttrs = vue.computed(() => ({
      class: attrs.class,
      style: attrs.style
    }));
    const componentAttrs = vue.computed(() => lodashEs.omit(attrs, ["class", "style"]));
    const newValue = vue.computed({
      get() {
        return props.value;
      },
      set(value) {
        emits("update:value", value);
        emits("change", value);
      }
    });
    const holdVisibleValue = vue.computed({
      get() {
        return props.visible || holdVisible.value;
      },
      set(value) {
        holdVisible.value = value;
        emits("update:visible", value);
      }
    });
    const clickVisibleValue = vue.computed({
      get() {
        return props.visible || clickVisible.value;
      },
      set(value) {
        clickVisible.value = value;
        emits("update:visible", value);
      }
    });
    const newMaxlength = vue.computed(() => {
      if (typeof props.maxlength === "number") {
        return props.maxlength <= 0 ? null : props.maxlength;
      }
      return props.maxlength;
    });
    const checkResults = vue.computed(() => {
      return props.rules.map((rule) => {
        const regexPattern = rule.regex.replace(/^['"]|['"]$/g, "");
        const regex = new RegExp(regexPattern);
        return regex.test(props.value);
      });
    });
    const percent = vue.computed(() => {
      return 100 / props.rules.length * checkResults.value.filter(Boolean).length;
    });
    const color = vue.computed(() => {
      if (percent.value < 50) {
        return props.weakColor;
      } else if (percent.value < 100) {
        return props.mediumColor;
      } else {
        return props.strongColor;
      }
    });
    const focus = () => {
      inputPasswordRef.value.focus();
    };
    const select = () => {
      inputPasswordRef.value.select();
    };
    const handleMouseDown = () => {
      holdVisible.value = true;
    };
    const handleMouseUp = () => {
      holdVisible.value = false;
    };
    vue.watch(
      () => percent.value,
      (v) => {
        emits("state", v === 100);
      },
      {
        immediate: true
      }
    );
    vue.watch(
      () => props.trigger,
      (v) => {
        if (v === "hold") {
          holdVisible.value = false;
        }
      },
      {
        immediate: true
      }
    );
    __expose({
      focus,
      select
    });
    return (_ctx, _cache) => {
      const _component_ll_icon = vue.resolveComponent("ll-icon");
      const _component_a_input_password = vue.resolveComponent("a-input-password");
      const _component_a_progress = vue.resolveComponent("a-progress");
      const _component_ll_tooltip = vue.resolveComponent("ll-tooltip");
      return vue.openBlock(), vue.createElementBlock(
        "div",
        vue.mergeProps({
          class: [vue.unref(bem).b(), vue.unref(bem).is(_ctx.isGray ? "gray-input-password" : "")]
        }, containerAttrs.value),
        [
          vue.createVNode(_component_a_input_password, vue.mergeProps(componentAttrs.value, {
            ref_key: "inputPasswordRef",
            ref: inputPasswordRef,
            value: newValue.value,
            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => newValue.value = $event),
            visible: _ctx.trigger === "hold" ? holdVisibleValue.value : clickVisibleValue.value,
            class: vue.unref(bem).e("input"),
            maxlength: newMaxlength.value,
            "onUpdate:visible": _cache[1] || (_cache[1] = (v) => clickVisibleValue.value = v)
          }), vue.createSlots({
            iconRender: vue.withCtx(() => [
              vue.createCommentVNode(" \u4FEE\u6539\u56FE\u6807\u5BB9\u5668\uFF0C\u6DFB\u52A0\u9F20\u6807\u4E8B\u4EF6 "),
              _ctx.trigger === "hold" ? (vue.openBlock(), vue.createElementBlock(
                "span",
                {
                  key: 0,
                  class: vue.normalizeClass(vue.unref(bem).e("icon-wrapper")),
                  onMousedown: vue.withModifiers(handleMouseDown, ["stop"]),
                  onMouseup: handleMouseUp,
                  onMouseleave: handleMouseUp,
                  onTouchstart: vue.withModifiers(handleMouseDown, ["stop"]),
                  onTouchend: handleMouseUp,
                  onClick: vue.withModifiers(handleMouseUp, ["stop"])
                },
                [
                  vue.createVNode(_component_ll_icon, {
                    "icon-name": holdVisibleValue.value ? "icon-pwd-look" : "icon-pwd-hide"
                  }, null, 8, ["icon-name"])
                ],
                34
                /* CLASS, NEED_HYDRATION */
              )) : (vue.openBlock(), vue.createBlock(_component_ll_icon, {
                key: 1,
                "icon-name": clickVisibleValue.value ? "icon-pwd-look" : "icon-pwd-hide"
              }, null, 8, ["icon-name"]))
            ]),
            _: 2
            /* DYNAMIC */
          }, [
            vue.renderList(Object.keys(_ctx.$slots).filter(
              (key) => key !== "iconRender"
            ), (item) => {
              return {
                name: item,
                fn: vue.withCtx((data) => [
                  vue.renderSlot(_ctx.$slots, item, vue.normalizeProps(vue.guardReactiveProps(data || {})))
                ])
              };
            })
          ]), 1040, ["value", "visible", "class", "maxlength"]),
          vue.createCommentVNode(" \u8FDB\u5EA6\u6761 "),
          _ctx.pwdStrength && _ctx.rules.length > 0 ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 0,
              class: vue.normalizeClass(vue.unref(bem).e("strength"))
            },
            [
              vue.createVNode(_component_a_progress, {
                class: vue.normalizeClass(vue.unref(bem).m("progress")),
                percent: percent.value,
                "show-info": false,
                "stroke-color": color.value
              }, null, 8, ["class", "percent", "stroke-color"]),
              vue.createVNode(_component_ll_tooltip, {
                "is-white-bg": "",
                "overlay-class-name": vue.unref(bem).b("tooltip")
              }, {
                title: vue.withCtx(() => [
                  vue.createElementVNode(
                    "div",
                    _hoisted_1,
                    vue.toDisplayString(_ctx.tipTitle),
                    1
                    /* TEXT */
                  ),
                  (vue.openBlock(true), vue.createElementBlock(
                    vue.Fragment,
                    null,
                    vue.renderList(_ctx.rules, (item, idx) => {
                      return vue.openBlock(), vue.createElementBlock(
                        "div",
                        {
                          key: idx,
                          class: "rule-item",
                          style: vue.normalizeStyle({
                            color: checkResults.value[idx] ? "var(--color-success)" : "var(--color-text-tertiary)"
                          })
                        },
                        [
                          vue.createVNode(_component_ll_icon, {
                            "icon-name": checkResults.value[idx] ? "icon-check" : "icon-close2",
                            size: 14
                          }, null, 8, ["icon-name"]),
                          vue.createTextVNode(
                            " " + vue.toDisplayString(item.label),
                            1
                            /* TEXT */
                          )
                        ],
                        4
                        /* STYLE */
                      );
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ]),
                _: 1
                /* STABLE */
              }, 8, ["overlay-class-name"])
            ],
            2
            /* CLASS */
          )) : vue.createCommentVNode("v-if", true)
        ],
        16
        /* FULL_PROPS */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=password-input.vue2.js.map
