summaryrefslogtreecommitdiff
path: root/packages/client/src/components/form/range.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/components/form/range.vue')
-rw-r--r--packages/client/src/components/form/range.vue256
1 files changed, 118 insertions, 138 deletions
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index 07f2c23124..ebec482d84 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -1,164 +1,142 @@
<template>
<div class="timctyfi" :class="{ disabled }">
<div class="label"><slot name="label"></slot></div>
- <div v-panel class="body">
+ <div v-adaptive-border class="body">
<div ref="containerEl" class="container">
<div class="track">
- <div class="highlight" :style="{ width: (steppedValue * 100) + '%' }"></div>
+ <div class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div>
</div>
- <div v-if="steps" class="ticks">
+ <div v-if="steps && showTicks" class="ticks">
<div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div>
</div>
<div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div>
</div>
</div>
+ <div class="caption"><slot name="caption"></slot></div>
</div>
</template>
-<script lang="ts">
-import { computed, defineAsyncComponent, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
import * as os from '@/os';
-export default defineComponent({
- props: {
- modelValue: {
- type: Number,
- required: false,
- default: 0
- },
- disabled: {
- type: Boolean,
- required: false,
- default: false
- },
- min: {
- type: Number,
- required: false,
- default: 0
- },
- max: {
- type: Number,
- required: false,
- default: 100
- },
- step: {
- type: Number,
- required: false,
- default: 1
- },
- autofocus: {
- type: Boolean,
- required: false
- },
- textConverter: {
- type: Function,
- required: false,
- default: (v) => v.toString(),
- },
- },
+const props = withDefaults(defineProps<{
+ modelValue: number;
+ disabled?: boolean;
+ min: number;
+ max: number;
+ step?: number;
+ textConverter?: (value: number) => string,
+ showTicks?: boolean;
+}>(), {
+ step: 1,
+ textConverter: (v) => v.toString(),
+});
- setup(props, context) {
- const containerEl = ref<HTMLElement>();
- const thumbEl = ref<HTMLElement>();
+const emit = defineEmits<{
+ (ev: 'update:modelValue', value: number): void;
+}>();
- const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
- const steppedValue = computed(() => {
- if (props.step) {
- const step = props.step / (props.max - props.min);
- return (step * Math.round(rawValue.value / step));
- } else {
- return rawValue.value;
- }
- });
- const finalValue = computed(() => {
- return (steppedValue.value * (props.max - props.min)) + props.min;
- });
- watch(finalValue, () => {
- context.emit('update:modelValue', finalValue.value);
- });
+const containerEl = ref<HTMLElement>();
+const thumbEl = ref<HTMLElement>();
- const thumbWidth = computed(() => {
- if (thumbEl.value == null) return 0;
- return thumbEl.value!.offsetWidth;
- });
- const thumbPosition = ref(0);
- const calcThumbPosition = () => {
- if (containerEl.value == null) {
- thumbPosition.value = 0;
- } else {
- thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value;
- }
- };
- watch([steppedValue, containerEl], calcThumbPosition);
- onMounted(() => {
- const ro = new ResizeObserver((entries, observer) => {
- calcThumbPosition();
- });
- ro.observe(containerEl.value);
- onUnmounted(() => {
- ro.disconnect();
- });
- });
+const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
+const steppedRawValue = computed(() => {
+ if (props.step) {
+ const step = props.step / (props.max - props.min);
+ return (step * Math.round(rawValue.value / step));
+ } else {
+ return rawValue.value;
+ }
+});
+const finalValue = computed(() => {
+ if (Number.isInteger(props.step)) {
+ return Math.round((steppedRawValue.value * (props.max - props.min)) + props.min);
+ } else {
+ return (steppedRawValue.value * (props.max - props.min)) + props.min;
+ }
+});
- const steps = computed(() => {
- if (props.step) {
- return (props.max - props.min) / props.step;
- } else {
- return 0;
- }
- });
+const thumbWidth = computed(() => {
+ if (thumbEl.value == null) return 0;
+ return thumbEl.value!.offsetWidth;
+});
+const thumbPosition = ref(0);
+const calcThumbPosition = () => {
+ if (containerEl.value == null) {
+ thumbPosition.value = 0;
+ } else {
+ thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedRawValue.value;
+ }
+};
+watch([steppedRawValue, containerEl], calcThumbPosition);
- const onMousedown = (ev: MouseEvent | TouchEvent) => {
- ev.preventDefault();
+let ro: ResizeObserver | undefined;
- const tooltipShowing = ref(true);
- os.popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), {
- showing: tooltipShowing,
- text: computed(() => {
- return props.textConverter(finalValue.value);
- }),
- targetElement: thumbEl,
- }, {}, 'closed');
+onMounted(() => {
+ ro = new ResizeObserver((entries, observer) => {
+ calcThumbPosition();
+ });
+ ro.observe(containerEl.value);
+});
- const style = document.createElement('style');
- style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
- document.head.appendChild(style);
+onUnmounted(() => {
+ if (ro) ro.disconnect();
+});
- const onDrag = (ev: MouseEvent | TouchEvent) => {
- ev.preventDefault();
- const containerRect = containerEl.value!.getBoundingClientRect();
- const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
- const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2));
- rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value)));
- };
+const steps = computed(() => {
+ if (props.step) {
+ return (props.max - props.min) / props.step;
+ } else {
+ return 0;
+ }
+});
- const onMouseup = () => {
- document.head.removeChild(style);
- tooltipShowing.value = false;
- window.removeEventListener('mousemove', onDrag);
- window.removeEventListener('touchmove', onDrag);
- window.removeEventListener('mouseup', onMouseup);
- window.removeEventListener('touchend', onMouseup);
- };
+const onMousedown = (ev: MouseEvent | TouchEvent) => {
+ ev.preventDefault();
- window.addEventListener('mousemove', onDrag);
- window.addEventListener('touchmove', onDrag);
- window.addEventListener('mouseup', onMouseup, { once: true });
- window.addEventListener('touchend', onMouseup, { once: true });
- };
+ const tooltipShowing = ref(true);
+ os.popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), {
+ showing: tooltipShowing,
+ text: computed(() => {
+ return props.textConverter(finalValue.value);
+ }),
+ targetElement: thumbEl,
+ }, {}, 'closed');
- return {
- rawValue,
- finalValue,
- steppedValue,
- onMousedown,
- containerEl,
- thumbEl,
- thumbPosition,
- steps,
- };
- },
-});
+ const style = document.createElement('style');
+ style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
+ document.head.appendChild(style);
+
+ const onDrag = (ev: MouseEvent | TouchEvent) => {
+ ev.preventDefault();
+ const containerRect = containerEl.value!.getBoundingClientRect();
+ const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
+ const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2));
+ rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value)));
+ };
+
+ let beforeValue = finalValue.value;
+
+ const onMouseup = () => {
+ document.head.removeChild(style);
+ tooltipShowing.value = false;
+ window.removeEventListener('mousemove', onDrag);
+ window.removeEventListener('touchmove', onDrag);
+ window.removeEventListener('mouseup', onMouseup);
+ window.removeEventListener('touchend', onMouseup);
+
+ // 値が変わってたら通知
+ if (beforeValue !== finalValue.value) {
+ emit('update:modelValue', finalValue.value);
+ }
+ };
+
+ window.addEventListener('mousemove', onDrag);
+ window.addEventListener('touchmove', onDrag);
+ window.addEventListener('mouseup', onMouseup, { once: true });
+ window.addEventListener('touchend', onMouseup, { once: true });
+};
</script>
<style lang="scss" scoped>
@@ -191,7 +169,9 @@ export default defineComponent({
$thumbWidth: 20px;
> .body {
- padding: 12px;
+ padding: 10px 12px;
+ background: var(--panel);
+ border: solid 1px var(--panel);
border-radius: 6px;
> .container {
@@ -209,7 +189,7 @@ export default defineComponent({
height: 3px;
background: rgba(0, 0, 0, 0.1);
border-radius: 999px;
- overflow: clip;
+ overflow: hidden; overflow: clip;
> .highlight {
position: absolute;
@@ -218,7 +198,7 @@ export default defineComponent({
height: 100%;
background: var(--accent);
opacity: 0.5;
- transition: width 0.2s cubic-bezier(0,0,0,1);
+ //transition: width 0.2s cubic-bezier(0,0,0,1);
}
}
@@ -251,7 +231,7 @@ export default defineComponent({
cursor: grab;
background: var(--accent);
border-radius: 999px;
- transition: left 0.2s cubic-bezier(0,0,0,1);
+ //transition: left 0.2s cubic-bezier(0,0,0,1);
&:hover {
background: var(--accentLighten);
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-04-19 05:05:42 +0000