dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

dev

Browse Source
This commit is contained in:
imelon
2025-05-15 23:15:57 +08:00
parent 723ceb5f6f
commit 900d8e8560
86 changed files with 2350 additions and 1905 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/calc/autocomplete/index.vue
+139 -114
View File
@@ -1,31 +1,40 @@
<script lang="tsx">
import { debouncedWatch, onClickOutside, useVModel } from "@vueuse/core"
import type { CSSProperties, PropType } from "vue";
import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, renderList, watch } from "vue"
import { debouncedWatch, onClickOutside, useVModel } from '@vueuse/core'
import type { CSSProperties, PropType } from 'vue'
import {
Teleport,
Transition,
computed,
defineComponent,
onDeactivated,
ref,
renderList,
watch,
} from 'vue'
type HandleChangeFunction = (value: string | number) => string[] | Promise<string[]>
type HandleChangeFunction = (value: string | number) => string[] | Promise<string[]>
export default defineComponent({
props: {
modelValue: {
type: [String, Number] as PropType<string | number>,
default: () => ""
default: () => '',
},
placeholder: {
type: String,
default: ""
default: '',
},
handleChange: {
type: Function as PropType<HandleChangeFunction>,
default: () => () => []
default: () => () => [],
},
delay: {
type: Number,
default: 300
}
default: 300,
},
},
setup(props, { emit }) {
const modelValue = useVModel(props, "modelValue")
const modelValue = useVModel(props, 'modelValue')
const isOpen = ref(false)
const triggerRef = ref<HTMLElement>()
@@ -39,7 +48,7 @@ export default defineComponent({
return {
left: `${dropdownPosition.value.x}px`,
top: `${dropdownPosition.value.y}px`,
width: `${dropdownPosition.value.w}px`
width: `${dropdownPosition.value.w}px`,
}
})
@@ -49,19 +58,19 @@ export default defineComponent({
dropdownPosition.value = {
w: width,
x: left,
y: top + height + 2
y: top + height + 2,
}
}
}
onClickOutside(triggerRef, () => (isOpen.value = false))
window.addEventListener("resize", onResize)
window.addEventListener("scroll", onResize)
window.addEventListener('resize', onResize)
window.addEventListener('scroll', onResize)
onDeactivated(() => {
window.removeEventListener("resize", onResize)
window.removeEventListener("scroll", onResize)
window.removeEventListener('resize', onResize)
window.removeEventListener('scroll', onResize)
})
function selectItem(item: string) {
@@ -74,17 +83,21 @@ export default defineComponent({
const droplist = ref<string[]>([])
debouncedWatch(modelValue, async value => (droplist.value = await props.handleChange(value)), {
debounce: delay
})
debouncedWatch(
modelValue,
async (value) => (droplist.value = await props.handleChange(value)),
{
debounce: delay,
},
)
function handleInput() {
isOpen.value = droplist.value.length > 0
}
function handleKeyPress(event: KeyboardEvent) {
if (event.code == "Enter") {
emit("enter", modelValue.value)
if (event.code == 'Enter') {
emit('enter', modelValue.value)
}
}
@@ -92,12 +105,24 @@ export default defineComponent({
return (
<div class="i-autocomplete">
<div class="i-autocomplete-trigger" ref={triggerRef}>
<input onKeypress={handleKeyPress} class="i-autocomplete-input" onFocus={handleInput} onInput={handleInput} type="text" v-model={modelValue.value} placeholder={props.placeholder} />
<input
onKeypress={handleKeyPress}
class="i-autocomplete-input"
onFocus={handleInput}
onInput={handleInput}
type="text"
v-model={modelValue.value}
placeholder={props.placeholder}
/>
</div>
<Teleport to="body">
<Transition name="dropdown" mode="out-in">
<div class="i-autocomplete-dropdown" style={dropdownStyle.value} v-show={isOpen.value}>
{renderList(droplist.value, item => (
<div
class="i-autocomplete-dropdown"
style={dropdownStyle.value}
v-show={isOpen.value}
>
{renderList(droplist.value, (item) => (
<div class="i-autocomplete-dropdown-item" onClick={selectItem(item)}>
{item}
</div>
@@ -108,115 +133,115 @@ export default defineComponent({
</div>
)
}
}
},
})
</script>
<style scoped lang="scss">
$text-color: #937639;
.i-autocomplete {
min-width: 80px;
width: 160px;
user-select: none;
outline: none;
height: 24px;
min-height: 16px;
line-height: 100%;
// font-size: 12px;
color: $text-color;
background-color: rgba(0, 0, 0, 1);
border: 1px solid #5b472a;
border-radius: 2px;
display: block;
$text-color: #937639;
.i-autocomplete {
min-width: 80px;
width: 160px;
user-select: none;
outline: none;
height: 24px;
min-height: 16px;
line-height: 100%;
// font-size: 12px;
color: $text-color;
background-color: rgba(0, 0, 0, 1);
border: 1px solid #5b472a;
border-radius: 2px;
display: block;
.i-autocomplete-trigger {
display: flex;
height: 100%;
opacity: 0.8;
justify-content: space-between;
align-items: center;
.i-autocomplete-trigger {
display: flex;
height: 100%;
opacity: 0.8;
justify-content: space-between;
align-items: center;
.i-autocomplete-input {
padding-left: 8px;
width: 100%;
border: none;
outline: none;
color: inherit;
// font-size: 12px;
background-color: black;
font-family: SimSun;
}
&.disabled {
color: gray;
.i-select-down-icon {
background-image: url("./img/select_down_disabled.png");
}
}
}
.i-autocomplete-trigger:hover {
opacity: 1;
}
}
.i-autocomplete-dropdown {
position: fixed;
max-height: 160px;
overflow-y: auto;
background: black;
// font-size: 12px;
z-index: 888;
$hoverColor: #002947;
$activeColor: color.scale($hoverColor, $lightness: 5%);
color: $text-color;
.i-autocomplete-dropdown-item {
// font-size: 12px;
height: 20px;
line-height: 20px;
margin: 0;
padding: 0 8px;
.i-autocomplete-input {
padding-left: 8px;
width: 100%;
border: none;
outline: none;
appearance: none;
display: block;
overflow: hidden;
color: inherit;
// font-size: 12px;
background-color: black;
font-family: SimSun;
}
&.active {
background-color: $activeColor;
}
&.disabled {
color: gray;
&:hover:not(.active) {
// font-size: 12px;
background-color: $hoverColor;
.i-select-down-icon {
background-image: url('./img/select_down_disabled.png');
}
}
}
.dropdown-active {
animation: dropdown-enter 0.2s ease-in;
.i-autocomplete-trigger:hover {
opacity: 1;
}
}
.dropdown-active {
animation: dropdown-leave 0.2s ease-in;
}
.i-autocomplete-dropdown {
position: fixed;
max-height: 160px;
overflow-y: auto;
background: black;
// font-size: 12px;
z-index: 888;
.dropdown-enter-active {
animation: dropdown-enter 0.2s ease-in;
}
$hoverColor: #002947;
$activeColor: color.scale($hoverColor, $lightness: 5%);
color: $text-color;
.dropdown-leave-active {
animation: dropdown-leave 0.2s ease-in;
}
.i-autocomplete-dropdown-item {
// font-size: 12px;
height: 20px;
line-height: 20px;
margin: 0;
padding: 0 8px;
border: none;
outline: none;
appearance: none;
display: block;
overflow: hidden;
.dropdown-enter-active {
animation: dropdown-enter 0.2s ease-in;
}
&.active {
background-color: $activeColor;
}
.dropdown-leave-active {
animation: dropdown-leave 0.2s ease-in;
&:hover:not(.active) {
// font-size: 12px;
background-color: $hoverColor;
}
}
}
.dropdown-active {
animation: dropdown-enter 0.2s ease-in;
}
.dropdown-active {
animation: dropdown-leave 0.2s ease-in;
}
.dropdown-enter-active {
animation: dropdown-enter 0.2s ease-in;
}
.dropdown-leave-active {
animation: dropdown-leave 0.2s ease-in;
}
.dropdown-enter-active {
animation: dropdown-enter 0.2s ease-in;
}
.dropdown-leave-active {
animation: dropdown-leave 0.2s ease-in;
}
</style>