feat #272 ipAddress组件ipv6类型整改 (#337)

* close #272 ipAddress组件ipv6类型整改 * fix: 检视意见修改
2023-08-01 18:31:33 -07:00 · 2023-08-01 18:31:33 -07:00 · e26f182602
parent b9086540ee
commit e26f182602
5 changed files with 227 additions and 151 deletions
--- a/examples/docs/resources/pc/demo/ip-address/ipv6-type.vue
+++ b/examples/docs/resources/pc/demo/ip-address/ipv6-type.vue
@ -11,7 +11,7 @@ export default {
  },
  data() {
    return {
-      value: '3FFE:FFFF:7654:FEDA:1245'
+      value: 'fe80::204:61ff:fe9d:f156'
    }
  }
 }
--- a/packages/renderless/src/ip-address/index.ts
+++ b/packages/renderless/src/ip-address/index.ts
@ -16,20 +16,25 @@ export const isIP6 = (str) => /^IPv6$/i.test(str)

 export const isIP4 = (str) => /^IPv4$/i.test(str)

-export const ipValidator = ({ props, api }) => (value) => {
-  let result = true
+export const ipValidator =
+  ({ props, api }) =>
+  (value) => {
+    let result = true

-  if (props.type) {
-    /* istanbul ignore else */
-    if (api.isIP6(props.type)) {
-      result = typeof value === 'string'
-    } else if (api.isIP4(props.type)) {
-      result = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/.test(value)
+    if (props.type) {
+      /* istanbul ignore else */
+      if (api.isIP6(props.type)) {
+        result =
+          /^(((([\da-fA-F]{1,4}):){7}([\da-fA-F]{1,4}))|(((([\da-fA-F]{1,4}):){1,7}:)|((([\da-fA-F]{1,4}):){6}:([\da-fA-F]{1,4}))|((([\da-fA-F]{1,4}):){5}:(([\da-fA-F]{1,4}):)?([\da-fA-F]{1,4}))|((([\da-fA-F]{1,4}):){4}:(([\da-fA-F]{1,4}):){0,2}([\da-fA-F]{1,4}))|((([\da-fA-F]{1,4}):){3}:(([\da-fA-F]{1,4}):){0,3}([\da-fA-F]{1,4}))|((([\da-fA-F]{1,4}):){2}:(([\da-fA-F]{1,4}):){0,4}([\da-fA-F]{1,4}))|((([\da-fA-F]{1,4}):){1}:(([\da-fA-F]{1,4}):){0,5}([\da-fA-F]{1,4}))|(::(([\da-fA-F]{1,4}):){0,6}([\da-fA-F]{1,4}))|(::([\da-fA-F]{1,4})?))|(((([\da-fA-F]{1,4}):){6}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|((([\da-fA-F]{1,4}):){5}:(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|((([\da-fA-F]{1,4}):){4}:(([\da-fA-F]{1,4}):)?(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|((([\da-fA-F]{1,4}):){3}:(([\da-fA-F]{1,4}):){0,2}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|((([\da-fA-F]{1,4}):){2}:(([\da-fA-F]{1,4}):){0,3}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|(([\da-fA-F]{1,4})::(([\da-fA-F]{1,4}):){0,4}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|(::(([\da-fA-F]{1,4}):){0,5}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))))$/.test(
+            value
+          )
+      } else if (api.isIP4(props.type)) {
+        result = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/.test(value)
+      }
    }
-  }

-  return result
-}
+    return result
+  }

 export const getCursorPosition = (el) => {
  let cursorPos = 0
@ -48,41 +53,65 @@ export const getCursorPosition = (el) => {
  return cursorPos
 }

-export const getValue = ({ api, props, state }) => () => {
-  const valueArr = []
-  let result = ''
+export const getValue =
+  ({ api, props, state }) =>
+  () => {
+    const valueArr = []
+    let result = ''

-  if (api.isIP6(props.type)) {
-    result = state.address[0].value || ''
-  } else {
-    state.address.forEach((item) => {
-      if (api.isIP4(props.type) && item.value) {
-        item.value = item.value.replace(/\D/g, '')
-      }
+    if (api.isIP6(props.type)) {
+      state.address.forEach((item) => {
+        if (item.value) {
+          item.value = item.value.replace(/[^a-fA-F\d]/g, '')
+        }

-      item.value && valueArr.push(item.value)
-    })
+        item.value && valueArr.push(item.value)
+      })

-    result = state.address.filter((item) => item.value).length === 4 ? valueArr.join('.') : ''
-  }
+      result = state.address.filter((item) => item.value).length === 8 ? valueArr.join(':') : ''
+    } else {
+      state.address.forEach((item) => {
+        if (api.isIP4(props.type) && item.value) {
+          item.value = item.value.replace(/\D/g, '')
+        }

-  return result
-}
+        item.value && valueArr.push(item.value)
+      })

-export const setValue = ({ api, props, state }) => (value) => {
-  if (value) {
-    /* istanbul ignore else */
-    if (api.ipValidator(value)) {
-      if (api.isIP6(props.type)) {
-        state.address = [{ value }]
-      } else {
-        state.address = value.split('.').map((item) => ({ value: item }))
-      }
+      result = state.address.filter((item) => item.value).length === 4 ? valueArr.join('.') : ''
+    }
+
+    return result
+  }
+
+export const setValue =
+  ({ api, props, state }) =>
+  (value) => {
+    if (value) {
+      /* istanbul ignore else */
+      if (api.ipValidator(value)) {
+        if (api.isIP6(props.type)) {
+          state.address = value.split(':').map((item) => ({ value: item }))
+          if (state.address.length < 8) {
+            let insertIndex = 0
+            state.address.forEach((item, index) => {
+              if (item.value === '') {
+                item.value = '0000'
+                insertIndex = index
+              }
+            })
+            for (var i = 0; i <= 8 - state.address.length; i++) {
+              state.address.splice(insertIndex, 0, { value: '0000' })
+            }
+          }
+        } else {
+          state.address = value.split('.').map((item) => ({ value: item }))
+        }
+      }
+    } else {
+      state.address = api.isIP6(props.type) ? new Array(8).fill({ value: '' }) : new Array(4).fill({ value: '' })
    }
-  } else {
-    state.address = api.isIP6(props.type) ? [{ value: '' }] : [{ value: '' }, { value: '' }, { value: '' }, { value: '' }]
  }
-}

 const activeEvent = ({ emit, parent, state, index, event, type }) => {
  const target = event && event.target ? event.target : parent.$el.querySelectorAll('input')[index || 0]
@ -105,76 +134,108 @@ const activeEvent = ({ emit, parent, state, index, event, type }) => {
  }
 }

-export const focus = ({ emit, parent, state }) => ({ index, event }) => {
-  activeEvent({ emit, parent, state, index, event, type: 'focus' })
-}
+export const focus =
+  ({ emit, parent, state }) =>
+  ({ index, event }) => {
+    activeEvent({ emit, parent, state, index, event, type: 'focus' })
+  }

-export const select = ({ emit, parent, state }) => ({ index, event }) => {
-  activeEvent({ emit, parent, state, index, event, type: 'select' })
-}
+export const select =
+  ({ emit, parent, state }) =>
+  ({ index, event }) => {
+    activeEvent({ emit, parent, state, index, event, type: 'select' })
+  }

-export const inputEvent = ({ api, componentName, emit, eventName, props }) => ({ item, index }) => {
-  const val = item.value.trim()
-  let value = ''
+export const inputEvent =
+  ({ api, componentName, emit, eventName, props }) =>
+  ({ item, index }) => {
+    const val = item.value.trim()
+    let value = ''

-  if (api.isIP4(props.type)) {
-    if (!index && api.ipValidator(val)) {
-      api.setValue(val)
-    } else if (isNaN(val) || val < IPTHRESHOLD.Min || val > IPTHRESHOLD.Max) {
-      item.value = ''
+    if (api.isIP4(props.type)) {
+      if (!index && api.ipValidator(val)) {
+        api.setValue(val)
+      } else if (isNaN(val) || val < IPTHRESHOLD.Min || val > IPTHRESHOLD.Max) {
+        item.value = ''
+      }
+    } else {
+      if (!index && api.ipValidator(val)) {
+        api.setValue(val)
+      } else if (val.length > 4) {
+        item.value = item.value.slice(0, 4)
+      }
    }
-  } else {
-    item.value = val.replace(/[\u4E00-\u9FA5]/g, '')
+
+    value = api.getValue()
+
+    emit('update:modelValue', value, index)
+    api.dispatch(componentName, eventName, [value])
  }

-  value = api.getValue()
-
-  emit('update:modelValue', value, index)
-  api.dispatch(componentName, eventName, [value])
-}
-
-export const change = ({ api, emit }) => () => {
-  const value = api.getValue()
-  emit('change', value)
-}
-
-export const blur = ({ api, componentName, emit, eventName, props, state }) => ({ item, index }) => {
-  state.active = false
-  state.isDel = false
-
-  if (api.isIP4(props.type)) {
-    item.value = item.value.replace(/\D/g, '')
+export const change =
+  ({ api, emit }) =>
+  () => {
+    const value = api.getValue()
+    emit('change', value)
  }

-  emit('blur', item.value, index)
-  api.dispatch(componentName, eventName, [item.value])
-}
+export const blur =
+  ({ api, componentName, emit, eventName, props, state }) =>
+  ({ item, index }) => {
+    state.active = false
+    state.isDel = false

-export const keyup = ({ api, props }) => ({ item, index, event }) => {
-  const { keyCode } = event
-  const value = item.value.trim()
-  const nextIndex = index + 1
-
-  if (api.isIP4(props.type)) {
-    if (isNaN(item.value)) {
+    if (api.isIP4(props.type)) {
      item.value = item.value.replace(/\D/g, '')
-      return false
    }

-    if ([KEY_CODE.Tab, KEY_CODE.Space, KEY_CODE.NumpadDecimal, KEY_CODE.NumpadComma].includes(keyCode) && value) {
-      api.select({ index: nextIndex })
-      return false
+    emit('blur', item.value, index)
+    api.dispatch(componentName, eventName, [item.value])
+  }
+
+export const keyup =
+  ({ api, props }) =>
+  ({ item, index, event }) => {
+    const { keyCode } = event
+    const value = item.value.trim()
+    const nextIndex = index + 1
+
+    if (api.isIP4(props.type)) {
+      if (isNaN(item.value)) {
+        item.value = item.value.replace(/\D/g, '')
+        return false
+      }
+
+      if ([KEY_CODE.Tab, KEY_CODE.Space, KEY_CODE.NumpadDecimal, KEY_CODE.NumpadComma].includes(keyCode) && value) {
+        api.select({ index: nextIndex })
+        return false
+      }
+
+      /* istanbul ignore next */
+      if ((value === '0' || value > IPTHRESHOLD.NonNumeric || value.length === 3) && !isNaN(event.key)) {
+        api.focus({ index: nextIndex })
+        api.select({ index: nextIndex })
+
+        return false
+      }
    }
+    if (api.isIP6(props.type)) {
+      if ([KEY_CODE.Tab, KEY_CODE.Space, KEY_CODE.NumpadDecimal, KEY_CODE.NumpadComma].includes(keyCode) && value) {
+        api.select({ index: nextIndex })

-    /* istanbul ignore next */
-    if ((value === '0' || value > IPTHRESHOLD.NonNumeric || value.length === 3) && !isNaN(event.key)) {
-      api.focus({ index: nextIndex })
-      api.select({ index: nextIndex })
+        return false
+      }
+      if (
+        (value.length === 4 || value === '0000') &&
+        (!isNaN(event.key) || (keyCode >= KEY_CODE.KeyA && keyCode <= KEY_CODE.KeyF))
+      ) {
+        api.focus({ index: nextIndex })
+        api.select({ index: nextIndex })

-      return false
+        return false
+      }
    }
  }
-}

 const checkError1 = ({ Tab, Space, NumpadDecimal, NumpadComma, keyCode, value }) =>
  [Tab, Space, NumpadDecimal, NumpadComma].includes(keyCode) && value
@ -186,36 +247,50 @@ const checkError2 = (newValue) => newValue && (isNaN(newValue) || newValue > IPT
 const checkError3 = ({ isfilterKeyCodes, isSelected, value }) => !isfilterKeyCodes && !isSelected && value === '0'

 // NEXT 当内容加输入的数字大于255时，屏蔽输入
-const checkError4 = ({ isfilterKeyCodes, isSelected, value, key }) => !isfilterKeyCodes && !isSelected && value + key > IPTHRESHOLD.Max
+const checkError4 = ({ isfilterKeyCodes, isSelected, value, key }) =>
+  !isfilterKeyCodes && !isSelected && value + key > IPTHRESHOLD.Max

 // NEXT 屏蔽非数字键
-const checkError5 = ({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV }) => isNaN(key) && !isfilterKeyCodes && !(!value && ctrlKey && keyCode === KeyV)
+const checkError5 = ({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV }) =>
+  isNaN(key) && !isfilterKeyCodes && !(!value && ctrlKey && keyCode === KeyV)

-const isError = ({ key, value, isSelected, isfilterKeyCodes, ctrlKey, keyCode, newValue }) => {
-  const { Tab, Space, NumpadDecimal, NumpadComma, KeyV } = KEY_CODE
+// ipv6类型，屏蔽输入除A-F、a-f、数字的键
+const checkError6 = ({ KeyA, KeyF, key, isfilterKeyCodes, value, keyCode }) =>
+  !(keyCode >= KeyA && keyCode <= KeyF) && isNaN(key) && !isfilterKeyCodes && value

-  return (
-    checkError1({ Tab, Space, NumpadDecimal, NumpadComma, keyCode, value }) ||
-    checkError2(newValue) ||
-    checkError3({ isfilterKeyCodes, isSelected, value }) ||
-    checkError4({ isfilterKeyCodes, isSelected, value, key }) ||
-    checkError5({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV })
-  )
-}
-
-export const keydown = ({ api, props, state }) => ({ item, index, event }) => {
-  const { target, key, keyCode, ctrlKey } = event
-  const value = item.value
-  const selectionStart = target.selectionStart
-  const selectionEnd = target.selectionEnd
-  const isSelected = selectionStart !== selectionEnd
-  const cursorPosition = api.getCursorPosition(target)
-  const isfilterKeyCodes = state.filterKeyCodes.includes(keyCode)
-  const nextIndex = index + 1
-  const lastIndex = index - 1
-  const newValue = isSelected && !isfilterKeyCodes && value.substr(0, selectionStart) + key + value.substr(selectionEnd)
+const isError = ({ key, value, isSelected, isfilterKeyCodes, ctrlKey, keyCode, newValue, api, props }) => {
+  const { Tab, Space, KeyA, KeyF, NumpadDecimal, NumpadComma, KeyV } = KEY_CODE

  if (api.isIP4(props.type)) {
+    return (
+      checkError1({ Tab, Space, NumpadDecimal, NumpadComma, keyCode, value }) ||
+      checkError2(newValue) ||
+      checkError3({ isfilterKeyCodes, isSelected, value }) ||
+      checkError4({ isfilterKeyCodes, isSelected, value, key }) ||
+      checkError5({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV })
+    )
+  } else if (api.isIP6(props.type)) {
+    return (
+      checkError1({ Tab, Space, NumpadDecimal, NumpadComma, keyCode, value }) ||
+      checkError6({ KeyA, KeyF, key, isfilterKeyCodes, value, keyCode })
+    )
+  }
+}
+
+export const keydown =
+  ({ api, props, state }) =>
+  ({ item, index, event }) => {
+    const { target, key, keyCode, ctrlKey } = event
+    const value = item.value
+    const selectionStart = target.selectionStart
+    const selectionEnd = target.selectionEnd
+    const isSelected = selectionStart !== selectionEnd
+    const cursorPosition = api.getCursorPosition(target)
+    const isfilterKeyCodes = state.filterKeyCodes.includes(keyCode)
+    const nextIndex = index + 1
+    const lastIndex = index - 1
+    const newValue =
+      isSelected && !isfilterKeyCodes && value.substr(0, selectionStart) + key + value.substr(selectionEnd)
    state.isDel = keyCode === KEY_CODE.Backspace || keyCode === KEY_CODE.Delete

    if (keyCode === KEY_CODE.Backspace && cursorPosition === 0 && !selectionEnd) {
@ -247,14 +322,15 @@ export const keydown = ({ api, props, state }) => ({ item, index, event }) => {
        isfilterKeyCodes,
        ctrlKey,
        keyCode,
-        newValue
+        newValue,
+        api,
+        props
      })
    ) {
      event.preventDefault()
      return false
    }
  }
-}

 export const getHeightOfSize = (size, isLineHeight = 'height') => {
  const sizeMap = {
--- a/packages/theme/src/ip-address/index.less
+++ b/packages/theme/src/ip-address/index.less
@ -88,7 +88,7 @@
      display: inline-flex;
      align-items: center;

-      >input {
+      > input {
        border: none;
        text-align: center;
        outline: none;
@ -127,20 +127,20 @@
      }

      &:last-child {
-        >svg {
+        margin-right: var(--ti-ip-address-padding-horizontal);
+        > svg {
          display: none;
        }
      }

-      &:only-child {
-        width: 100%;
-
-        >input {
-          width: 100%;
-          text-align: left;
-          padding: var(--ti-ip-address-only-child-padding-vertical) var(--ti-ip-address-only-child-padding-horizontal);
-        }
+      &:first-child {
+        margin-left: var(--ti-ip-address-padding-horizontal);
      }
    }
+
+    &__ipv6-delimiter {
+      width: var(--ti-ip-address-icon-width);
+      text-align: center;
+    }
  }
-}
+}
--- a/packages/theme/src/ip-address/vars.less
+++ b/packages/theme/src/ip-address/vars.less
@ -15,10 +15,8 @@
  --ti-ip-address-normal-height: var(--ti-common-size-7x);
  // IP地址输入框宽度
  --ti-ip-address-normal-width: calc(var(--ti-common-size-base) * 40);
-  // IP地址输入框IPv6 类型垂直内边距
-  --ti-ip-address-only-child-padding-vertical: var(--ti-common-space-0);
-  // IP地址输入框IPv6 类型水平内边距
-  --ti-ip-address-only-child-padding-horizontal: var(--ti-common-space-2x);
+  // IP地址输入框水平内边距
+  --ti-ip-address-padding-horizontal: var(--ti-common-space-3x);
  // IP地址输入框默认文本色
  --ti-ip-address-normal-text-color: var(--ti-common-color-info-normal);
  // IP地址输入框图标文本色
--- a/packages/vue/src/ip-address/src/pc.vue
+++ b/packages/vue/src/ip-address/src/pc.vue
@ -13,9 +13,9 @@
  <div class="tiny-ip-address">
    <ul
      :class="{
-        active: state.active,
-        disabled: state.disabled,
-        'tiny-ip-address__input': true
+          active: state.active,
+          disabled: state.disabled,
+          'tiny-ip-address__input': true
      }"
      :style="state.heightStyle"
    >
@ -38,7 +38,9 @@
        />
        <template v-if="index < state.address.length - 1">
          <slot :slot-scope="{ state, index, item }">
-            <component :is="delimiter" class="tiny-svg-size" />
+            <span v-if="type === 'IPv6' && delimiter === 'icon-dot-ipv4'"
+              class="tiny-ip-address__input__ipv6-delimiter">:</span>
+            <component v-else :is="delimiter" class="tiny-svg-size" />
          </slot>
        </template>
      </li>
@ -47,18 +49,18 @@
 </template>

 <script lang="ts">
-import { renderless, api } from '@opentiny/vue-renderless/ip-address/vue'
-import { props, setup, defineComponent } from '@opentiny/vue-common'
-import { iconDotIpv4 } from '@opentiny/vue-icon'
+  import { renderless, api } from '@opentiny/vue-renderless/ip-address/vue'
+  import { props, setup, defineComponent } from '@opentiny/vue-common'
+  import { iconDotIpv4 } from '@opentiny/vue-icon'

-export default defineComponent({
-  props: [...props, 'size', 'modelValue', 'type', 'readonly', 'disabled', 'delimiter'],
-  emits: ['update:modelValue', 'change', 'blur', 'focus', 'select', 'inputEvent'],
-  components: {
-    IconDotIpv4: iconDotIpv4()
-  },
-  setup(props, context) {
-    return setup({ props, context, renderless, api })
-  }
-})
+  export default defineComponent({
+    props: [...props, 'size', 'modelValue', 'type', 'readonly', 'disabled', 'delimiter'],
+    emits: ['update:modelValue', 'change', 'blur', 'focus', 'select', 'inputEvent'],
+    components: {
+      IconDotIpv4: iconDotIpv4()
+    },
+    setup(props, context) {
+      return setup({ props, context, renderless, api })
+    }
+  })
 </script>