perf(import): perf components import

src/components/StrengthMeter/index.ts

@@ -1,7 +1,3 @@
-import { withInstall } from '../util';
-
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
-export const StrengthMeter = createAsyncComponent(() => import('./src/index'));
-
-withInstall(StrengthMeter);
+export const StrengthMeter = createAsyncComponent(() => import('./src/index.vue'));

src/components/StrengthMeter/src/index.less

@@ -1,69 +0,0 @@
-@import (reference) '../../../design/index.less';
-
-.strength-meter {
-  position: relative;
-
-  &-bar {
-    position: relative;
-    height: 4px;
-    margin: 10px auto 6px;
-    background: @disabled-color;
-    border-radius: 3px;
-
-    &::before,
-    &::after {
-      position: absolute;
-      z-index: 10;
-      display: block;
-      width: 20%;
-      height: inherit;
-      background: transparent;
-      border-color: @white;
-      border-style: solid;
-      border-width: 0 5px 0 5px;
-      content: '';
-    }
-
-    &::before {
-      left: 20%;
-    }
-
-    &::after {
-      right: 20%;
-    }
-
-    &__fill {
-      position: absolute;
-      width: 0;
-      height: inherit;
-      background: transparent;
-      border-radius: inherit;
-      transition: width 0.5s ease-in-out, background 0.25s;
-
-      &[data-score='0'] {
-        width: 20%;
-        background: darken(@error-color, 10%);
-      }
-
-      &[data-score='1'] {
-        width: 40%;
-        background: @error-color;
-      }
-
-      &[data-score='2'] {
-        width: 60%;
-        background: @warning-color;
-      }
-
-      &[data-score='3'] {
-        width: 80%;
-        background: fade(@success-color, 50%);
-      }
-
-      &[data-score='4'] {
-        width: 100%;
-        background: @success-color;
-      }
-    }
-  }
-}

src/components/StrengthMeter/src/index.tsx

@@ -1,77 +0,0 @@
-import './index.less';
-
-import { PropType } from 'vue';
-
-import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
-
-import { Input } from 'ant-design-vue';
-
-import zxcvbn from 'zxcvbn';
-import { extendSlots } from '/@/utils/helper/tsxHelper';
-import { propTypes } from '/@/utils/propTypes';
-
-const prefixCls = 'strength-meter';
-export default defineComponent({
-  name: 'StrengthMeter',
-  props: {
-    value: propTypes.string,
-
-    userInputs: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-
-    showInput: propTypes.bool.def(true),
-    disabled: propTypes.bool,
-  },
-  emits: ['score-change', 'change'],
-  setup(props, { emit, attrs, slots }) {
-    const innerValueRef = ref('');
-    const getPasswordStrength = computed(() => {
-      const { userInputs, disabled } = props;
-      if (disabled) return null;
-      const innerValue = unref(innerValueRef);
-      const score = innerValue
-        ? zxcvbn(unref(innerValueRef), (userInputs as string[]) || null).score
-        : null;
-      emit('score-change', score);
-      return score;
-    });
-
-    function handleChange(e: ChangeEvent) {
-      innerValueRef.value = e.target.value;
-    }
-
-    watchEffect(() => {
-      innerValueRef.value = props.value || '';
-    });
-    watch(
-      () => unref(innerValueRef),
-      (val) => {
-        emit('change', val);
-      }
-    );
-
-    return () => {
-      const { showInput, disabled } = props;
-      return (
-        <div class={prefixCls}>
-          {showInput && (
-            <Input.Password
-              {...attrs}
-              allowClear={true}
-              value={unref(innerValueRef)}
-              onChange={handleChange}
-              disabled={disabled}
-            >
-              {extendSlots(slots)}
-            </Input.Password>
-          )}
-          <div class={`${prefixCls}-bar`}>
-            <div class={`${prefixCls}-bar__fill`} data-score={unref(getPasswordStrength)}></div>
-          </div>
-        </div>
-      );
-    };
-  },
-});

src/components/StrengthMeter/src/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div :class="prefixCls">
+    <InputPassword
+      v-if="showInput"
+      v-bind="$attrs"
+      allowClear
+      :value="innerValueRef"
+      @change="handleChange"
+      :disabled="disabled"
+    >
+      <template #[item]="data" v-for="item in Object.keys($slots)">
+        <slot :name="item" v-bind="data" />
+      </template>
+    </InputPassword>
+    <div :class="`${prefixCls}-bar`">
+      <div :class="`${prefixCls}-bar--fill`" :data-score="getPasswordStrength"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType } from 'vue';
+
+  import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
+
+  import { Input } from 'ant-design-vue';
+
+  import zxcvbn from 'zxcvbn';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'StrengthMeter',
+    components: { InputPassword: Input.Password },
+    props: {
+      value: propTypes.string,
+
+      userInputs: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+      },
+
+      showInput: propTypes.bool.def(true),
+      disabled: propTypes.bool,
+    },
+    emits: ['score-change', 'change'],
+    setup(props, { emit }) {
+      const innerValueRef = ref('');
+      const { prefixCls } = useDesign('strength-meter');
+
+      const getPasswordStrength = computed(() => {
+        const { userInputs, disabled } = props;
+        if (disabled) return null;
+        const innerValue = unref(innerValueRef);
+        const score = innerValue
+          ? zxcvbn(unref(innerValueRef), (userInputs as string[]) || null).score
+          : null;
+        emit('score-change', score);
+        return score;
+      });
+
+      function handleChange(e: ChangeEvent) {
+        innerValueRef.value = e.target.value;
+      }
+
+      watchEffect(() => {
+        innerValueRef.value = props.value || '';
+      });
+      watch(
+        () => unref(innerValueRef),
+        (val) => {
+          emit('change', val);
+        }
+      );
+
+      return {
+        getPasswordStrength,
+        handleChange,
+        prefixCls,
+        innerValueRef,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-strength-meter';
+
+  .@{prefix-cls} {
+    position: relative;
+
+    &-bar {
+      position: relative;
+      height: 4px;
+      margin: 10px auto 6px;
+      background: @disabled-color;
+      border-radius: 3px;
+
+      &::before,
+      &::after {
+        position: absolute;
+        z-index: 10;
+        display: block;
+        width: 20%;
+        height: inherit;
+        background: transparent;
+        border-color: @white;
+        border-style: solid;
+        border-width: 0 5px 0 5px;
+        content: '';
+      }
+
+      &::before {
+        left: 20%;
+      }
+
+      &::after {
+        right: 20%;
+      }
+
+      &--fill {
+        position: absolute;
+        width: 0;
+        height: inherit;
+        background: transparent;
+        border-radius: inherit;
+        transition: width 0.5s ease-in-out, background 0.25s;
+
+        &[data-score='0'] {
+          width: 20%;
+          background: darken(@error-color, 10%);
+        }
+
+        &[data-score='1'] {
+          width: 40%;
+          background: @error-color;
+        }
+
+        &[data-score='2'] {
+          width: 60%;
+          background: @warning-color;
+        }
+
+        &[data-score='3'] {
+          width: 80%;
+          background: fade(@success-color, 50%);
+        }
+
+        &[data-score='4'] {
+          width: 100%;
+          background: @success-color;
+        }
+      }
+    }
+  }
+</style>