Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

2026-09-10 19:21:56 +08:00
commit 51ce3a28f7
654 changed files with 49082 additions and 0 deletions
@@ -0,0 +1,62 @@
+<template>
+  <div class="aa-autocomplete" ref="root">
+    <input
+      class="aa-autocomplete-input"
+      :value="modelValue"
+      :placeholder="placeholder"
+      @input="onInput"
+      @keydown.down.prevent="move(1)"
+      @keydown.up.prevent="move(-1)"
+      @keydown.enter="enter"
+      @keydown.esc="close"
+    />
+    <div v-show="open && list.length" class="aa-autocomplete-pop">
+      <div
+        v-for="(it, i) in list"
+        :key="i"
+        class="aa-autocomplete-item"
+        :class="{ 'is-active': i === active }"
+        @click="choose(i)"
+        v-html="highlight(it)"
+      ></div>
+    </div>
+    <div v-show="open && modelValue && !list.length" class="aa-autocomplete-pop"><div class="aa-autocomplete-empty">无匹配结果</div></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  options: { type: Array, default: () => ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '西安', '南京', '苏州', '天津'] },
+  placeholder: { type: String, default: '输入关键字…' }
+});
+const emit = defineEmits(['update:modelValue', 'select']);
+const root = ref(null);
+const open = ref(false);
+const active = ref(-1);
+const list = ref([]);
+
+function onInput(e) {
+  const q = e.target.value;
+  emit('update:modelValue', q);
+  active.value = -1;
+  list.value = q ? props.options.filter((d) => d.indexOf(q) >= 0) : [];
+  open.value = true;
+}
+function highlight(it) {
+  const q = props.modelValue.trim();
+  if (!q) return it;
+  return it.replace(new RegExp('(' + q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'g'), '<mark>$1</mark>');
+}
+function move(d) { open.value = true; active.value = Math.max(-1, Math.min(list.value.length - 1, active.value + d)); }
+function enter() { if (active.value >= 0) choose(active.value); }
+function choose(i) { emit('update:modelValue', list.value[i]); emit('select', list.value[i]); open.value = false; }
+function close() { open.value = false; }
+function onDoc(e) { if (root.value && !root.value.contains(e.target)) close(); }
+onMounted(() => document.addEventListener('click', onDoc));
+onBeforeUnmount(() => document.removeEventListener('click', onDoc));
+</script>
+
+<style src="./AutoComplete.css"></style>