@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismCodeInput/PrismCodeInput.vue

@@ -1,156 +1,156 @@
-<template>
-  <view class="prism-code-input" :class="{ 'dark-mode': appStore.isDarkMode }">
-    <view class="code-boxes">
-      <view
-        v-for="(item, index) in codeLength"
-        :key="index"
-        class="code-box"
-        :class="{ 'active': focusIndex === index, 'filled': codeArray[index] }"
-        @click="handleFocus"
-      >
-        <text class="code-text">{{ codeArray[index] || '' }}</text>
-        <view class="cursor" v-if="focusIndex === index && !codeArray[index]"></view>
-      </view>
-    </view>
-    <input
-      ref="hiddenInput"
-      class="hidden-input"
-      type="number"
-      :maxlength="codeLength"
-      v-model="codeValue"
-      :focus="isFocused"
-      @input="handleInput"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </view>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { useAppStore } from '@/store/app';
-
-const props = defineProps({
-  length: {
-    type: Number,
-    default: 6
-  },
-  modelValue: {
-    type: String,
-    default: ''
-  }
-});
-
-const emit = defineEmits(['update:modelValue', 'complete']);
-
-const appStore = useAppStore();
-const codeValue = ref(props.modelValue);
-const isFocused = ref(false);
-
-const codeLength = computed(() => props.length);
-
-const codeArray = computed(() => {
-  return codeValue.value.split('').slice(0, props.length);
-});
-
-const focusIndex = computed(() => {
-  if (!isFocused.value) return -1;
-  return Math.min(codeArray.value.length, props.length - 1);
-});
-
-function handleFocus() {
-  isFocused.value = true;
-}
-
-function handleInput(e) {
-  const value = e.detail.value.replace(/\D/g, '').slice(0, props.length);
-  codeValue.value = value;
-  emit('update:modelValue', value);
-
-  if (value.length === props.length) {
-    emit('complete', value);
-  }
-}
-
-watch(() => props.modelValue, (val) => {
-  codeValue.value = val;
-});
-</script>
-
-<style lang="scss">
-.prism-code-input {
-  position: relative;
-
-  .code-boxes {
-    display: flex;
-    gap: 16rpx;
-  }
-
-  .code-box {
-    width: 76rpx;
-    height: 88rpx;
-    background: var(--prism-input-bg, #EBEEF2);
-    border-radius: 12rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    transition: all 0.2s ease;
-    border: 2rpx solid transparent;
-
-    &.active {
-      border-color: var(--prism-primary-color, #3478F6);
-      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
-    }
-
-    &.filled {
-      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
-    }
-
-    .code-text {
-      font-size: 48rpx;
-      font-weight: 600;
-      color: var(--prism-text-primary, #1D2129);
-    }
-
-    .cursor {
-      position: absolute;
-      width: 4rpx;
-      height: 40rpx;
-      background: var(--prism-primary-color, #3478F6);
-      animation: blink 1s infinite;
-    }
-  }
-
-  .hidden-input {
-    position: absolute;
-    left: -9999rpx;
-    opacity: 0;
-    width: 1rpx;
-    height: 1rpx;
-  }
-
-  @keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-  }
-}
-
-.dark-mode .prism-code-input {
-  .code-box {
-    background: var(--prism-input-bg, #2A2A2A);
-
-    &.active {
-      background: rgba(52, 120, 246, 0.15);
-    }
-
-    &.filled {
-      background: rgba(52, 120, 246, 0.15);
-    }
-
-    .code-text {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-}
-</style>
+<template>
+  <view class="prism-code-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <view class="code-boxes">
+      <view
+        v-for="(item, index) in codeLength"
+        :key="index"
+        class="code-box"
+        :class="{ 'active': focusIndex === index, 'filled': codeArray[index] }"
+        @click="handleFocus"
+      >
+        <text class="code-text">{{ codeArray[index] || '' }}</text>
+        <view class="cursor" v-if="focusIndex === index && !codeArray[index]"></view>
+      </view>
+    </view>
+    <input
+      ref="hiddenInput"
+      class="hidden-input"
+      type="number"
+      :maxlength="codeLength"
+      v-model="codeValue"
+      :focus="isFocused"
+      @input="handleInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  length: {
+    type: Number,
+    default: 6
+  },
+  modelValue: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'complete']);
+
+const appStore = useAppStore();
+const codeValue = ref(props.modelValue);
+const isFocused = ref(false);
+
+const codeLength = computed(() => props.length);
+
+const codeArray = computed(() => {
+  return codeValue.value.split('').slice(0, props.length);
+});
+
+const focusIndex = computed(() => {
+  if (!isFocused.value) return -1;
+  return Math.min(codeArray.value.length, props.length - 1);
+});
+
+function handleFocus() {
+  isFocused.value = true;
+}
+
+function handleInput(e) {
+  const value = e.detail.value.replace(/\D/g, '').slice(0, props.length);
+  codeValue.value = value;
+  emit('update:modelValue', value);
+
+  if (value.length === props.length) {
+    emit('complete', value);
+  }
+}
+
+watch(() => props.modelValue, (val) => {
+  codeValue.value = val;
+});
+</script>
+
+<style lang="scss">
+.prism-code-input {
+  position: relative;
+
+  .code-boxes {
+    display: flex;
+    gap: 16rpx;
+  }
+
+  .code-box {
+    width: 76rpx;
+    height: 88rpx;
+    background: var(--prism-input-bg, #EBEEF2);
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: all 0.2s ease;
+    border: 2rpx solid transparent;
+
+    &.active {
+      border-color: var(--prism-primary-color, #3478F6);
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+    }
+
+    &.filled {
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+    }
+
+    .code-text {
+      font-size: 48rpx;
+      font-weight: 600;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    .cursor {
+      position: absolute;
+      width: 4rpx;
+      height: 40rpx;
+      background: var(--prism-primary-color, #3478F6);
+      animation: blink 1s infinite;
+    }
+  }
+
+  .hidden-input {
+    position: absolute;
+    left: -9999rpx;
+    opacity: 0;
+    width: 1rpx;
+    height: 1rpx;
+  }
+
+  @keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+  }
+}
+
+.dark-mode .prism-code-input {
+  .code-box {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &.active {
+      background: rgba(52, 120, 246, 0.15);
+    }
+
+    &.filled {
+      background: rgba(52, 120, 246, 0.15);
+    }
+
+    .code-text {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+}
+</style>