{"version":3,"file":"chunk-90824f06.js","sources":["../../../src/widgets/VerifyCodeInput.svelte"],"sourcesContent":["<script context=\"module\">\n  function convertStringToObject(value, size) {\n    const result = {};\n    for (let i = 0; i < size; i++) {\n      result[i] = value[i] || '';\n    }\n    return result;\n  }\n\n  function genInitValue(value, size) {\n    if (value && value.length === size) {\n      return value.split('');\n    }\n    return [...Array(size)].map(() => '');\n  }\n\n  function getPastedText(e) {\n    const win = window;\n    if (win.clipboardData && win.clipboardData.getData) {\n      // IE\n      return win.clipboardData.getData('Text') || '';\n    }\n    return e.clipboardData.getData('Text') || '';\n  }\n</script>\n\n<script>\n  import {onMount, createEventDispatcher} from 'svelte';\n  import Loading from '@/icons/Loading.svelte';\n  import Success from '@/icons/Success.svelte';\n  import Error from '@/icons/Error.svelte';\n\n  let className = '';\n  export {className as class};\n  export let size = 6;\n  export let explain = '';\n  export let value = '';\n  export let disabled = false;\n  export let status = '';\n  export let focus = true;\n\n  const dispatch = createEventDispatcher();\n\n  $: isDisabled = status === 'loading' || disabled;\n\n  let activeIndex = -1;\n  let container = null;\n\n  let digits = genInitValue(value, size);\n  let ds = convertStringToObject('', size);\n\n  $: digitsCount = digits.filter(Boolean).length;\n\n  $: {\n    if (status === 'success') {\n      activeIndex = -1;\n    }\n    if (status === 'fail') {\n      digits = genInitValue('', size);\n      ds = convertStringToObject('', size);\n      moveCaret(0);\n    }\n  }\n\n  $: {\n    if (digitsCount === size) {\n      dispatch('change', {value: digits.join('')});\n    }\n    // 值发生变化就同步数据\n    if (digitsCount !== null) {\n      dispatch('codeChange', {value: digits.join('')});\n    }\n  }\n\n  onMount(() => {\n    focus && moveCaret(0);\n  });\n\n  function handleClick(e) {\n    e.preventDefault();\n    moveCaret(digitsCount);\n  }\n\n  function moveCaret(index) {\n    if (!container) {\n      return;\n    }\n    if (index < 0) {\n      index = 0;\n    }\n    if (index >= size) {\n      index = size - 1;\n    }\n    const inputs = container.querySelectorAll('input');\n    inputs[index].focus();\n  }\n\n  function handleKeyDownFun(index) {\n    return function (e) {\n      const {keyCode} = e;\n      if (keyCode === 9) {\n        // Tab\n        if (index < size - 1) {\n          e.preventDefault();\n          return;\n        }\n      }\n      if (keyCode === 8) {\n        // Backspace\n        if (digits[index] === '' && index > 0) {\n          digits[index - 1] = '';\n          digits = [...digits];\n          moveCaret(index - 1);\n          return;\n        }\n        if (digits[index] !== '' && index === size - 1) {\n          digits[index] = '';\n          digits = [...digits];\n          return;\n        }\n        digits[index] = '';\n        digits = [...digits];\n        moveCaret(index - 1);\n      }\n    };\n  }\n\n  function handleInputFun(index) {\n    return function (e) {\n      dispatch('input');\n      const {value} = e.target;\n      if (/^\\d$/.test(value)) {\n        digits[index] = value;\n        digits = [...digits];\n        moveCaret(index + 1);\n      }\n      ds[index] = '';\n    };\n  }\n\n  function handlePasteInput(e) {\n    e.preventDefault();\n    const pastedText = getPastedText(e);\n    if (pastedText.length < 1 || isNaN(pastedText)) {\n      return;\n    }\n    const pastedDigits = pastedText.substr(0, size).split('');\n    digits = digits.map((o, index) => pastedDigits[index] || '');\n    const inputs = container.querySelectorAll('input');\n    inputs[pastedDigits.length === size ? pastedDigits.length - 1 : pastedDigits.length].focus();\n  }\n\n  function handleFocusFun(index) {\n    return function () {\n      activeIndex = index;\n    };\n  }\n</script>\n\n<style>\n  .wrap {\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n  .wrap .disabled {\n    pointer-events: none;\n    opacity: 0.8;\n  }\n  .digits {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    user-select: none;\n  }\n  .digit-box {\n    display: flex;\n    justify-content: center;\n    box-sizing: border-box;\n    border-bottom: solid 2px #e5e5e5;\n    width: 48px;\n    height: 48px;\n  }\n  .active.digit-box {\n    border-bottom-color: #003fe6;\n  }\n  .disabled.digits:hover .digit-box,\n  .disabled .digit-box {\n    border-bottom-color: #e5e5e5;\n  }\n  .fail .digit-box,\n  .fail:hover .digit-box {\n    border-bottom: solid 1px #f24e53;\n  }\n  .txt {\n    display: inline-block;\n    line-height: 48px;\n    font-weight: var(--fw3);\n    font-size: 16px;\n    color: var(--T1);\n    pointer-events: none;\n  }\n  input {\n    border: none;\n    border-radius: 0;\n    width: 1px;\n    height: 45px;\n    text-align: center;\n    background: transparent;\n    outline: none;\n    -moz-appearance: textfield;\n  }\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    margin: 0;\n    -webkit-appearance: none;\n  }\n  .loading :global(svg) {\n    animation: rotate 1s linear infinite;\n  }\n  .explain {\n    margin: 6px 0 0 0;\n    text-align: left;\n    font-size: 12px;\n    color: #dc4a45;\n  }\n  @keyframes rotate {\n    from {\n      transform: rotate(0);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .explain {\n      margin: 6px 0 0 0;\n      text-align: left;\n      font-size: 12px;\n      color: #dc4a45;\n  }\n  .digit-box.fail {\n    border-bottom: 1px solid #f24e53 !important;\n  }\n  @media screen and (max-width: 640px) {\n    .digit-box {\n      margin: 0 8px;\n      width: 32px;\n      height: 48px;\n    }\n  }\n</style>\n\n<div class=\"wrap {className}\">\n  <div class=\"digits\" class:fail={status === 'fail'} class:disabled={isDisabled} bind:this={container} on:click={handleClick}>\n    {#each digits as d, index}\n      <div class=\"digit-box df aic jcc\" class:active={activeIndex === index} class:fail={status === 'fail'}>\n        <span class=\"txt\">{d}</span>\n        <input\n          type=\"number\"\n          maxlength=\"1\"\n          max=\"9\"\n          bind:value={ds[index]}\n          data-index={index}\n          on:click={handleClick}\n          on:keydown={handleKeyDownFun(index)}\n          on:input={handleInputFun(index)}\n          on:paste={handlePasteInput}\n          on:focus={handleFocusFun(index)}\n        />\n      </div>\n    {/each}\n  </div>\n  <div class=\"explain\">{explain}</div>\n</div>\n"],"names":["ctx","toggle_class","div","insert_hydration","target","anchor","append_hydration","span","input","set_input_value","listen","set_data","t0","t0_value","dirty","to_number","i","div0","div2","div1","convertStringToObject","value","size","result","genInitValue","getPastedText","win","className","$$props","explain","disabled","status","focus","dispatch","createEventDispatcher","activeIndex","container","digits","ds","onMount","moveCaret","handleClick","e","digitsCount","index","handleKeyDownFun","keyCode","$$invalidate","handleInputFun","handlePasteInput","pastedText","pastedDigits","o","handleFocusFun","$$value","isDisabled"],"mappings":"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"}