mirror of
https://github.com/misskey-dev/misskey.git
synced 2026-05-13 15:15:45 +02:00
wip
This commit is contained in:
@@ -53,7 +53,7 @@ type ModelValueType<T extends SupportedTypes> =
|
||||
|
||||
<script lang="ts" setup generic="T extends SupportedTypes = 'text'">
|
||||
import { onMounted, onUnmounted, nextTick, ref, useTemplateRef, watch, computed, toRefs } from 'vue';
|
||||
import { debounce } from 'throttle-debounce';
|
||||
import { throttle, debounce } from 'throttle-debounce';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import type { InputHTMLAttributes } from 'vue';
|
||||
import type { SuggestionType } from '@/utility/autocomplete.js';
|
||||
@@ -81,7 +81,8 @@ const props = defineProps<{
|
||||
min?: number;
|
||||
max?: number;
|
||||
inline?: boolean;
|
||||
debounce?: boolean;
|
||||
debounce?: boolean | number;
|
||||
throttle?: boolean | number;
|
||||
manualSave?: boolean;
|
||||
small?: boolean;
|
||||
large?: boolean;
|
||||
@@ -135,7 +136,8 @@ const updated = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const debouncedUpdated = debounce(1000, updated);
|
||||
const throttledUpdated = throttle(typeof props.throttle === 'number' ? props.throttle : 1000, updated);
|
||||
const debouncedUpdated = debounce(typeof props.debounce === 'number' ? props.debounce : 1000, updated);
|
||||
|
||||
watch(modelValue, newValue => {
|
||||
v.value = newValue;
|
||||
@@ -143,7 +145,9 @@ watch(modelValue, newValue => {
|
||||
|
||||
watch(v, () => {
|
||||
if (!props.manualSave) {
|
||||
if (props.debounce) {
|
||||
if (props.throttle === true || typeof props.throttle === 'number') {
|
||||
throttledUpdated();
|
||||
} else if (props.debounce === true || typeof props.debounce === 'number') {
|
||||
debouncedUpdated();
|
||||
} else {
|
||||
updated();
|
||||
|
||||
@@ -16,8 +16,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #label>Env type</template>
|
||||
</MkSelect>
|
||||
|
||||
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(controller.roomState.value.roomLightColor)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateRoomLightColor(c); }">
|
||||
<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(controller.roomState.value.roomLightColor)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateRoomLightColor(c); }">
|
||||
<template #label>light color</template>
|
||||
</MkInput>
|
||||
|
||||
|
||||
@@ -9,8 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<div v-for="[k, s] in Object.entries(schema)" :key="k">
|
||||
<div>{{ s.label }}</div>
|
||||
<div v-if="s.type === 'color'">
|
||||
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options[k])" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) emit('update', k, c); }"></MkInput>
|
||||
<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options[k])" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) emit('update', k, c); }"></MkInput>
|
||||
</div>
|
||||
<div v-else-if="s.type === 'boolean'">
|
||||
<MkSwitch :modelValue="options[k]" @update:modelValue="v => emit('update', k, v)"></MkSwitch>
|
||||
|
||||
@@ -69,8 +69,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
>
|
||||
<template #label>wallpaper</template>
|
||||
</MkSelect>
|
||||
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.ceiling.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ ceiling: { ...options.ceiling, color: c } }); }">
|
||||
<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.ceiling.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ ceiling: { ...options.ceiling, color: c } }); }">
|
||||
<template #label>color</template>
|
||||
</MkInput>
|
||||
</MkFolder>
|
||||
@@ -86,8 +86,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
>
|
||||
<template #label>material</template>
|
||||
</MkSelect>
|
||||
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.flooring.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ flooring: { ...options.flooring, color: c } }); }">
|
||||
<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.flooring.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ flooring: { ...options.flooring, color: c } }); }">
|
||||
<template #label>color</template>
|
||||
</MkInput>
|
||||
</MkFolder>
|
||||
|
||||
@@ -15,8 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
>
|
||||
<template #label>wallpaper</template>
|
||||
</MkSelect>
|
||||
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
|
||||
<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
|
||||
<template #label>color</template>
|
||||
</MkInput>
|
||||
<MkSwitch :modelValue="options.show" @update:modelValue="v => { update({ show: v }); }">
|
||||
|
||||
@@ -15,8 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
>
|
||||
<template #label>wallpaper</template>
|
||||
</MkSelect>
|
||||
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
|
||||
<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
|
||||
<template #label>color</template>
|
||||
</MkInput>
|
||||
<hr>
|
||||
@@ -32,8 +32,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
>
|
||||
<template #label>beam material</template>
|
||||
</MkSelect>
|
||||
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.beamColor)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ beamColor: c }); }">
|
||||
<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
|
||||
<MkInput :modelValue="getHex(options.beamColor)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ beamColor: c }); }">
|
||||
<template #label>beam color</template>
|
||||
</MkInput>
|
||||
<hr>
|
||||
|
||||
Reference in New Issue
Block a user