@oinone/kunlun-vue-ui-antd 6.2.0

package/src/component/oio-input/oio-input-number.vue

@@ -0,0 +1,374 @@
+<script lang="ts">
+import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
+import {
+  BigNumber,
+  CastHelper,
+  fetchRealValue,
+  NumberHelper,
+  Optional,
+  StandardNumber,
+  StringHelper
+} from '@oinone/kunlun-shared';
+import { OioInputNumberProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { isEmpty, isNil, isString, toString } from 'lodash-es';
+import { computed, createVNode, defineComponent, ref, Slot } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import OioInput from './oio-input.vue';
+
+export default defineComponent({
+  name: 'OioInputNumber',
+  components: {
+    OioInput
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioInputNumberProps
+  },
+  slots: ['prepend', 'append', 'prefix', 'suffix'],
+  emits: ['update:value', 'focus', 'blur'],
+  setup(props, context) {
+    const origin = ref();
+    const realValue = computed<BigNumber | undefined>(() => {
+      return Optional.ofNullable(props.value)
+        .map<BigNumber | undefined>((v) => new BigNumber(v!))
+        .orElse(undefined);
+    });
+    const focused = ref<boolean>(false);
+
+    const realMinValue = computed(() => {
+      const { min, minSafeInteger } = props;
+      return fetchRealValue(min, minSafeInteger);
+    });
+
+    const realMaxValue = computed(() => {
+      const { max, maxSafeInteger } = props;
+      return fetchRealValue(max, maxSafeInteger);
+    });
+
+    const compareToMinValue = (val: BigNumber): boolean => {
+      const min = realMinValue.value;
+      if (isNil(min)) {
+        return true;
+      }
+      return val.comparedTo(min.value) >= 0;
+    };
+
+    const compareToMaxValue = (val: BigNumber): boolean => {
+      const max = realMaxValue.value;
+      if (isNil(max)) {
+        return true;
+      }
+      return val.comparedTo(max.value) <= 0;
+    };
+
+    const change = (val: BigNumber | StandardNumber): boolean => {
+      const rv = realValue.value;
+      if (isNil(val)) {
+        if (isNil(rv)) {
+          return false;
+        }
+        context.emit('update:value', val);
+        return true;
+      }
+      let newVal = val.toString();
+      if (newVal.endsWith('.') || newVal.endsWith('0')) {
+        context.emit('update:value', newVal);
+        return true;
+      }
+      const newNumberVal = new BigNumber(newVal);
+      if (!newNumberVal.isNaN()) {
+        newVal = newNumberVal.toString();
+      }
+      const { value } = props;
+      if (value && toString(value) === newVal) {
+        return false;
+      }
+      context.emit('update:value', newVal);
+      return true;
+    };
+
+    const setValue = (val: BigNumber | StandardNumber): boolean => {
+      if (isNil(val)) {
+        return change(val);
+      }
+      if (isString(val)) {
+        if (isEmpty(val)) {
+          return change(null);
+        }
+        if (val === '-' || val.indexOf('.') === val.length - 1) {
+          if (props.precision === 0) {
+            const ra = val.replaceAll('.', '');
+            if (ra === '') {
+              return change(undefined);
+            }
+            return change(ra);
+          }
+          return change(val);
+        }
+        const vsl = val.split('.').length;
+        if (!isNil(props.precision)) {
+          if (vsl > 2) {
+            return false;
+          }
+        } else if (vsl !== 1) {
+          return false;
+        }
+        if (!NumberHelper.isNumber(val)) {
+          return false;
+        }
+      }
+      return change(val);
+    };
+
+    const realAddStep = computed<BigNumber>(() => {
+      return Optional.ofNullable(props.addStep)
+        .map((v) => new BigNumber(v!))
+        .filter((v) => !v.isNaN())
+        .orElseGet(() =>
+          Optional.ofNullable(props.step)
+            .map((v) => new BigNumber(v!))
+            .filter((v) => !v.isNaN())
+            .orElse(new BigNumber(1))
+        );
+    });
+
+    const realReduceStep = computed<BigNumber>(() => {
+      return Optional.ofNullable(props.reduceStep)
+        .map((v) => new BigNumber(v!))
+        .filter((v) => !v.isNaN())
+        .orElseGet(() =>
+          Optional.ofNullable(props.step)
+            .map((v) => new BigNumber(v!))
+            .filter((v) => !v.isNaN())
+            .orElse(new BigNumber(1))
+        );
+    });
+
+    const upStep = (event) => {
+      let rv = realValue.value;
+      if (realValue.value && realValue.value.c === null) {
+        rv = new BigNumber(0);
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      origin.value.focus();
+      change((rv || new BigNumber(0)).plus(realAddStep.value));
+    };
+
+    const downStep = (event) => {
+      let rv = realValue.value;
+      if (realValue.value && realValue.value.c === null) {
+        rv = new BigNumber(0);
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      origin.value.focus();
+      change((rv || new BigNumber(0)).minus(realReduceStep.value));
+    };
+
+    const formatterShowThousandth = (val: string): string => {
+      if (props.showThousandth) {
+        const vs = val.split('.');
+        let fv = vs[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        if (val.indexOf('.') !== -1) {
+          fv += '.';
+        }
+        fv += vs[1] || '';
+        return fv;
+      }
+      return val;
+    };
+
+    const parserShowThousandth = (val: string): string => {
+      return val.replace(/,/g, '');
+    };
+
+    const fetchFormatterValue = (val: BigNumber | string | number | null | undefined): string => {
+      let fv: string | undefined = '';
+      if (isNil(val)) {
+        return '';
+      }
+      if (isString(val)) {
+        if (val === '-' || val === '-0' || val.endsWith('.')) {
+          fv = val;
+        }
+      }
+      if (isEmpty(fv)) {
+        fv = val.toString();
+      }
+      if (props.formatter) {
+        return props.formatter(fv);
+      }
+      return formatterShowThousandth(fv);
+    };
+
+    const fetchParserValue = (val: string | undefined): string => {
+      let fv: string | undefined;
+      if (isNil(val)) {
+        fv = '';
+      } else {
+        fv = val.toString();
+      }
+      if (props.parser) {
+        return props.parser(fv);
+      }
+      return parserShowThousandth(fv);
+    };
+
+    const autocorrection = (): BigNumber | undefined => {
+      const rv = realValue.value;
+      let fv: BigNumber | undefined;
+      if (isNil(rv) || rv.isNaN()) {
+        fv = undefined;
+      } else if (!compareToMinValue(rv)) {
+        const rmv = realMinValue.value;
+        if (isNil(rmv) || rmv.isSafeInteger) {
+          return;
+        }
+        fv = rmv.value;
+      } else if (!compareToMaxValue(rv)) {
+        const rmv = realMaxValue.value;
+        if (isNil(rmv) || rmv.isSafeInteger) {
+          return;
+        }
+        fv = rmv.value;
+      } else {
+        fv = rv;
+      }
+      return fv;
+    };
+
+    const focus = (event: Event) => {
+      focused.value = true;
+      context.emit('focus', event);
+    };
+
+    const blur = (event: Event) => {
+      focused.value = false;
+      let fv: BigNumber | undefined;
+      let isModify = false;
+      if (props.autocorrection) {
+        fv = autocorrection();
+        if (!isNil(fv)) {
+          isModify = true;
+        }
+      }
+      if (isModify) {
+        change(fv);
+      }
+      context.emit('blur', event);
+    };
+
+    context.expose({
+      getRealValue: (): BigNumber | undefined => realValue.value,
+      setValue,
+      autocorrection
+    });
+
+    return {
+      origin,
+      realValue,
+      focused,
+      setValue,
+      upStep,
+      downStep,
+      fetchFormatterValue,
+      fetchParserValue,
+      focus,
+      blur
+    };
+  },
+  render() {
+    const slots: Record<string, Slot> = PropRecordHelper.collectionSlots(this.$slots, [
+      'prepend',
+      'append',
+      'prefix',
+      'suffix'
+    ]);
+    const classList = [`${DEFAULT_PREFIX}-input-number`];
+    if (this.hiddenStepHandle || this.disabled || this.readonly) {
+      classList.push(`${DEFAULT_PREFIX}-input-number-not-handler`);
+    } else {
+      const handlerComponent = createVNode(
+        'div',
+        {
+          class: `${DEFAULT_PREFIX}-handler-wrapper`
+        },
+        [
+          createVNode(UpOutlined, {
+            class: `${DEFAULT_PREFIX}-handler-up-inner`,
+            onClick: this.upStep,
+            onMousedown: (e) => e?.preventDefault()
+          }),
+          createVNode(DownOutlined, {
+            class: `${DEFAULT_PREFIX}-handler-down-inner`,
+            onClick: this.downStep,
+            onMousedown: (e) => e?.preventDefault()
+          })
+        ]
+      );
+      const { suffix } = slots;
+      if (suffix) {
+        slots.suffix = () => [...suffix(), handlerComponent];
+      } else {
+        slots.suffix = () => [handlerComponent];
+      }
+    }
+    if (this.unit) {
+      const unitComponent = createVNode(
+        'div',
+        {
+          class: `${DEFAULT_PREFIX}-unit`
+        },
+        this.unit
+      );
+      const { append } = slots;
+      if (append) {
+        slots.append = () => [...append(), unitComponent];
+      } else {
+        slots.append = () => [unitComponent];
+      }
+    }
+    const { value } = this;
+    let fv: string | undefined;
+    if (isString(value)) {
+      const vsl = value.split('.').length;
+      if (value === '-' || value === '-0' || vsl === 2) {
+        fv = value;
+      }
+    }
+    if (isEmpty(fv)) {
+      const rv = this.realValue;
+      if (isNil(rv)) {
+        fv = '';
+      } else {
+        fv = rv.toString();
+      }
+    }
+    fv = this.focused ? fv : this.fetchFormatterValue(fv);
+    return createVNode(
+      OioInput,
+      {
+        value: fv,
+        defaultValue: Optional.ofNullable(this.defaultValue)
+          .map((v) => new BigNumber(v!))
+          .filter((v) => !v.isNaN())
+          .map<string | undefined>((v) => v.toString())
+          .map((v) => (this.focused ? v : this.fetchFormatterValue(v)))
+          .orElse(undefined),
+        placeholder: this.placeholder,
+        disabled: this.disabled,
+        readonly: this.readonly,
+        allowClear: false,
+        ...this.$attrs,
+        'onUpdate:value': (val) => this.setValue(val),
+        onFocus: this.focus,
+        onBlur: this.blur,
+        class: StringHelper.append(classList, CastHelper.cast(this.$attrs.class)),
+        ref: 'origin'
+      },
+      slots
+    );
+  }
+});
+</script>

package/src/component/oio-input/oio-input-password.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons-vue';
+import { BooleanHelper, CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import { AInputPasswordProps, OioInputPasswordProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { InputPassword as AInputPassword } from 'ant-design-vue';
+import { isBoolean, isNil } from 'lodash-es';
+import { computed, createVNode, defineComponent, VNode } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioInputPassword',
+  components: {
+    AInputPassword
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioInputPasswordProps
+  },
+  slots: ['prepend', 'append', 'prefix'],
+  emits: ['update:value'],
+  setup(props) {
+    const autocomplete = computed<string | undefined>(() => {
+      if (props.autocomplete == null) {
+        return 'new-password';
+      }
+      const val = BooleanHelper.toBoolean(props.autocomplete);
+      if (isBoolean(val)) {
+        return val ? 'on' : 'off';
+      }
+      return props.autocomplete as string | undefined;
+    });
+
+    return {
+      autocomplete
+    };
+  },
+  render() {
+    return createVNode(
+      AInputPassword,
+      {
+        ...PropRecordHelper.convert(AInputPasswordProps, CastHelper.cast(this)),
+        readonly: this.readonly,
+        iconRender: (visible: boolean) => {
+          const result: VNode[] = [];
+          const { value } = this;
+          if (isNil(value) || !value.length) {
+            return result;
+          }
+          if (visible) {
+            result.push(createVNode(EyeOutlined));
+          } else {
+            result.push(createVNode(EyeInvisibleOutlined));
+          }
+          return result;
+        },
+        ...this.$attrs,
+        'onUpdate:value': (val) => this.$emit('update:value', val),
+        class: StringHelper.append(
+          [`${DEFAULT_PREFIX}-input`, `${DEFAULT_PREFIX}-input-password`],
+          CastHelper.cast(this.$attrs.class)
+        )
+      },
+      PropRecordHelper.collectionSlots(this.$slots, [['prepend', 'addonBefore'], ['append', 'addonAfter'], 'prefix'])
+    );
+  }
+});
+</script>

package/src/component/oio-input/oio-input-search.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+import { BooleanHelper, CastHelper } from '@oinone/kunlun-shared';
+import { AInputSearchProps, InputSearchEvent, OioInputSearchProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { InputSearch as AInputSearch } from 'ant-design-vue';
+import { isBoolean, isEmpty } from 'lodash-es';
+import { computed, createVNode, defineComponent, ref } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioButton } from '../oio-button';
+
+export default defineComponent({
+  name: 'OioInputSearch',
+  components: {
+    AInputSearch
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioInputSearchProps
+  },
+  slots: ['prepend', 'append', 'prefix', 'suffix', 'enter'],
+  emits: ['update:value', 'search'],
+  setup(props, context) {
+    const internalValue = ref();
+    const value = computed(() => {
+      if (props.value === undefined) {
+        return internalValue.value;
+      }
+      return props.value;
+    });
+
+    const autocomplete = computed<string | undefined>(() => {
+      if (props.autocomplete == null) {
+        return 'new-password';
+      }
+      const val = BooleanHelper.toBoolean(props.autocomplete);
+      if (isBoolean(val)) {
+        return val ? 'on' : 'off';
+      }
+      return props.autocomplete as string | undefined;
+    });
+
+    const onUpdateValue = (val: string) => {
+      internalValue.value = val;
+      context.emit('update:value', val);
+    };
+
+    const onSearch = (val: string, e: PointerEvent | KeyboardEvent) => {
+      const event: InputSearchEvent = {
+        origin: [val, e],
+        event: e,
+        value: val
+      };
+      context.emit('search', event);
+    };
+
+    return {
+      value,
+      autocomplete,
+
+      onUpdateValue,
+      onSearch
+    };
+  },
+  render() {
+    const mainClassName = `${DEFAULT_PREFIX}-input-search`;
+    const inputClassList = [mainClassName, `${mainClassName}-normal`];
+    if (this.readonly) {
+      inputClassList.push(`${DEFAULT_PREFIX}-input-readonly`);
+    }
+    const allowClear = this.allowClear && !isEmpty(this.value);
+    if (allowClear) {
+      inputClassList.push(`${DEFAULT_PREFIX}-input-allow-clear`);
+    }
+    return createVNode(
+      AInputSearch,
+      {
+        ...PropRecordHelper.convert(AInputSearchProps, CastHelper.cast(this)),
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, inputClassList),
+        readonly: this.readonly,
+        minlength: this.minlength,
+        'onUpdate:value': this.onUpdateValue,
+        onSearch: this.onSearch
+      },
+      PropRecordHelper.collectionSlots(this.$slots, [
+        ['prepend', 'addonBefore'],
+        ['append', 'addonAfter'],
+        'prefix',
+        'suffix',
+        {
+          origin: 'enter',
+          target: 'enterButton',
+          default: () => {
+            return [
+              createVNode(
+                {
+                  ...OioButton,
+                  __ANT_BUTTON: true
+                },
+                { icon: 'oinone-sousuo1' }
+              )
+            ];
+          }
+        }
+      ])
+    );
+  }
+});
+</script>

package/src/component/oio-input/oio-input.vue

@@ -0,0 +1,124 @@
+<script lang="ts">
+import { BooleanHelper, CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import { AInputProps, InputFocusOptions, OioInputProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Input as AInput } from 'ant-design-vue';
+import { isBoolean, isEmpty, isNil } from 'lodash-es';
+import { computed, createVNode, defineComponent, onMounted, ref } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioInput',
+  components: {
+    AInput
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioInputProps
+  },
+  slots: ['prepend', 'append', 'prefix', 'suffix'],
+  emits: ['update:value', 'press-enter'],
+  setup(props, context) {
+    const origin = ref();
+
+    const internalValue = ref<string | undefined>();
+    const value = computed<string | undefined>({
+      get() {
+        return props.value || internalValue.value;
+      },
+      set(value) {
+        context.emit('update:value', value);
+        internalValue.value = value;
+      }
+    });
+
+    const autocomplete = computed<string | undefined>(() => {
+      if (props.autocomplete == null) {
+        return 'new-password';
+      }
+      const val = BooleanHelper.toBoolean(props.autocomplete);
+      if (isBoolean(val)) {
+        return val ? 'on' : 'off';
+      }
+      return props.autocomplete as string | undefined;
+    });
+
+    const onUpdateValue = (val: string | undefined) => {
+      value.value = val;
+    };
+
+    const onPressEnter = (event: KeyboardEvent) => {
+      context.emit('press-enter', event);
+    };
+
+    context.expose({
+      focus: (options?: InputFocusOptions) => origin.value.focus(options),
+      blur: () => origin.value.blur()
+    });
+
+    onMounted(() => {
+      if (props.autofocus) {
+        origin.value.focus();
+      }
+    });
+
+    return {
+      origin,
+      value,
+      autocomplete,
+
+      onUpdateValue,
+      onPressEnter
+    };
+  },
+  render() {
+    const inputClassList = [`${DEFAULT_PREFIX}-input`];
+    if (this.readonly) {
+      inputClassList.push(`${DEFAULT_PREFIX}-input-readonly`);
+    }
+    const allowClear = this.allowClear && !isEmpty(this.value);
+    if (allowClear) {
+      inputClassList.push(`${DEFAULT_PREFIX}-input-allow-clear`);
+    }
+    let component = createVNode(
+      AInput,
+      {
+        ...PropRecordHelper.convert(AInputProps, CastHelper.cast(this)),
+        autocomplete: this.autocomplete,
+        readonly: this.readonly,
+        ...this.$attrs,
+        'onUpdate:value': this.onUpdateValue,
+        onPressEnter: this.onPressEnter,
+        class: StringHelper.append(inputClassList, CastHelper.cast(this.$attrs.class)),
+        ref: 'origin'
+      },
+      PropRecordHelper.collectionSlots(this.$slots, [
+        ['prepend', 'addonBefore'],
+        ['append', 'addonAfter'],
+        'prefix',
+        'suffix'
+      ])
+    );
+    const maxlenght = this.maxlength;
+    if (this.showCount && !isNil(maxlenght)) {
+      const wrapperClassList = [`${DEFAULT_PREFIX}-input-wrapper`, `${DEFAULT_PREFIX}-input-show-count`];
+      if (allowClear) {
+        wrapperClassList.push(`${DEFAULT_PREFIX}-input-allow-clear`);
+      }
+      let { value } = this;
+      if (isNil(value)) {
+        value = '';
+      }
+      component = createVNode(
+        'div',
+        {
+          class: wrapperClassList,
+          'data-count': value.length,
+          'data-total': maxlenght
+        },
+        [component]
+      );
+    }
+    return component;
+  }
+});
+</script>