@atooyu/uxto-ui 1.0.0

package/src/components/u-code-input/u-code-input.vue

@@ -0,0 +1,248 @@
+<template>
+  <view class="u-code-input">
+    <view class="u-code-input__wrapper">
+      <view
+        v-for="i in length"
+        :key="i"
+        class="u-code-input__item"
+        :class="itemClass(i)"
+        :style="itemStyle"
+      >
+        <text v-if="values[i - 1] && !password" class="u-code-input__char">{{ values[i - 1] }}</text>
+        <view v-else-if="values[i - 1] && password" class="u-code-input__dot" />
+        <view v-else class="u-code-input__placeholder">{{ placeholderChar }}</view>
+        <view v-if="focus && i - 1 === currentIndex" class="u-code-input__cursor" />
+      </view>
+    </view>
+    <input
+      class="u-code-input__input"
+      type="text"
+      :value="innerValue"
+      :maxlength="length"
+      :disabled="disabled"
+      :focus="focus"
+      :password="password"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  value?: string
+  length?: number
+  size?: number
+  gap?: number
+  plain?: boolean
+  disabled?: boolean
+  password?: boolean
+  focus?: boolean
+  borderColor?: string
+  activeBorderColor?: string
+  placeholderChar?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  length: 6,
+  size: 40,
+  gap: 10,
+  plain: false,
+  disabled: false,
+  password: false,
+  focus: false,
+  borderColor: '#dcdee0',
+  activeBorderColor: '#1989fa',
+  placeholderChar: '·'
+})
+
+const emit = defineEmits<{
+  'update:value': [value: string]
+  'update:modelValue': [value: string]
+  input: [value: string]
+  complete: [value: string]
+  focus: []
+  blur: []
+}>()
+
+const innerValue = ref(props.value)
+
+watch(() => props.value, (val) => {
+  innerValue.value = val
+})
+
+const values = computed(() => {
+  const chars = innerValue.value.split('')
+  return chars
+})
+
+const currentIndex = computed(() => {
+  return Math.min(values.value.length, props.length - 1)
+})
+
+const itemStyle = computed(() => {
+  return {
+    width: `${props.size}px`,
+    height: `${props.size}px`,
+    marginRight: `${props.gap}px`
+  }
+})
+
+const itemClass = (i: number) => {
+  const classes: string[] = []
+
+  if (props.plain) {
+    classes.push('u-code-input__item--plain')
+  }
+
+  if (!props.plain) {
+    classes.push('u-code-input__item--filled')
+  }
+
+  if (values.value[i - 1]) {
+    classes.push('u-code-input__item--active')
+  }
+
+  if (props.focus && i - 1 === currentIndex.value) {
+    classes.push('u-code-input__item--focused')
+  }
+
+  if (props.disabled) {
+    classes.push('u-code-input__item--disabled')
+  }
+
+  return classes
+}
+
+const handleInput = (e: any) => {
+  const val = e.detail.value.replace(/\D/g, '').slice(0, props.length)
+  innerValue.value = val
+
+  emit('update:value', val)
+  emit('update:modelValue', val)
+  emit('input', val)
+
+  if (val.length === props.length) {
+    emit('complete', val)
+  }
+}
+
+const handleFocus = () => {
+  emit('focus')
+}
+
+const handleBlur = () => {
+  emit('blur')
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-code-input {
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 1;
+    position: relative;
+    flex-shrink: 0;
+
+    &:last-child {
+      margin-right: 0 !important;
+    }
+
+    &--filled {
+      background-color: $--bg-color;
+      border: 1px solid $--border-color;
+      border-radius: $--radius-sm;
+    }
+
+    &--plain {
+      border-bottom: 2px solid $--border-color;
+      background-color: transparent;
+    }
+
+    &--active {
+      border-color: $--color-primary;
+    }
+
+    &--focused {
+      border-color: $--color-primary;
+    }
+
+    &--disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &__char {
+    color: $--text-color;
+  }
+
+  &__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: $--text-color;
+  }
+
+  &__placeholder {
+    color: $--text-color-3;
+    font-size: 24px;
+  }
+
+  &__cursor {
+    position: absolute;
+    left: 0;
+    top: 10%;
+    height: 80%;
+    width: 2px;
+    background-color: $--color-primary;
+    animation: u-code-input-cursor 1s infinite;
+  }
+
+  @keyframes u-code-input-cursor {
+    0%, 50% {
+      opacity: 1;
+    }
+    51%, 100% {
+      opacity: 0;
+    }
+  }
+
+  &__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 100%;
+    opacity: 0;
+    z-index: 2;
+  }
+}
+</style>

package/src/components/u-count-down/u-count-down.vue

@@ -0,0 +1,182 @@
+<template>
+  <view class="u-count-down">
+    <slot :time="timeData" :current="current">
+      <text class="u-count-down__text" :style="textStyle">{{ formattedTime }}</text>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+interface TimeData {
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+  total: number
+}
+
+interface Props {
+  time: number
+  format?: string
+  millisecond?: boolean
+  autoStart?: boolean
+  fontSize?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  time: 0,
+  format: 'HH:mm:ss',
+  millisecond: false,
+  autoStart: true,
+  fontSize: 14,
+  color: ''
+})
+
+const emit = defineEmits<{
+  finish: []
+  change: [timeData: TimeData]
+}>()
+
+const current = ref(props.time)
+const counting = ref(false)
+let timer: ReturnType<typeof setInterval> | null = null
+
+const textStyle = computed(() => {
+  const fontSize = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize
+  return {
+    fontSize,
+    color: props.color || undefined
+  }
+})
+
+const padZero = (num: number, length: number = 2): string => {
+  return String(num).padStart(length, '0')
+}
+
+const timeData = computed<TimeData>(() => {
+  const total = current.value
+  const days = Math.floor(total / (1000 * 60 * 60 * 24))
+  const hours = Math.floor((total % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+  const minutes = Math.floor((total % (1000 * 60 * 60)) / (1000 * 60))
+  const seconds = Math.floor((total % (1000 * 60)) / 1000)
+  const milliseconds = total % 1000
+
+  return {
+    days,
+    hours,
+    minutes,
+    seconds,
+    milliseconds,
+    total
+  }
+})
+
+const formattedTime = computed(() => {
+  const data = timeData.value
+  let result = props.format
+
+  // 按照从长到短的顺序替换，避免错误替换
+  const replacements: [string, string][] = [
+    ['DD', padZero(data.days)],
+    ['D', String(data.days)],
+    ['HH', padZero(data.hours)],
+    ['H', String(data.hours)],
+    ['mm', padZero(data.minutes)],
+    ['m', String(data.minutes)],
+    ['ss', padZero(data.seconds)],
+    ['s', String(data.seconds)],
+    ['SSS', padZero(data.milliseconds, 3)],
+    ['S', String(Math.floor(data.milliseconds / 100))]
+  ]
+
+  replacements.forEach(([key, value]) => {
+    result = result.replace(new RegExp(key, 'g'), value)
+  })
+
+  return result
+})
+
+const tick = () => {
+  if (current.value <= 0) {
+    stop()
+    emit('finish')
+    return
+  }
+
+  const interval = props.millisecond ? 10 : 1000
+  current.value = Math.max(0, current.value - interval)
+  emit('change', timeData.value)
+}
+
+const start = () => {
+  if (counting.value || current.value <= 0) return
+  counting.value = true
+  const interval = props.millisecond ? 10 : 1000
+  timer = setInterval(tick, interval)
+}
+
+const stop = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+  counting.value = false
+}
+
+const pause = () => {
+  stop()
+}
+
+const reset = (newTime?: number) => {
+  stop()
+  current.value = newTime !== undefined ? newTime : props.time
+  if (props.autoStart) {
+    start()
+  }
+}
+
+watch(() => props.time, (val) => {
+  reset(val)
+})
+
+onMounted(() => {
+  if (props.autoStart) {
+    start()
+  }
+})
+
+onUnmounted(() => {
+  stop()
+})
+
+defineExpose({
+  start,
+  stop,
+  pause,
+  reset,
+  timeData
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-count-down {
+  display: inline-block;
+
+  &__text {
+    font-variant-numeric: tabular-nums;
+  }
+}
+</style>