refactor(client): use setup syntax

packages/client/src/components/form/range.vue

@@ -16,49 +16,26 @@
 </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,
+}>(), {
+	step: 1,
+	textConverter: (v) => v.toString(),
+});
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: number): void;
+}>();
 
-	setup(props, context) {
 const containerEl = ref<HTMLElement>();
 const thumbEl = ref<HTMLElement>();
 
@@ -150,7 +127,7 @@ export default defineComponent({
 
 		// 値が変わってたら通知
 		if (beforeValue !== finalValue.value) {
-					context.emit('update:modelValue', finalValue.value);
+			emit('update:modelValue', finalValue.value);
 		}
 	};
 
@@ -159,19 +136,6 @@ export default defineComponent({
 	window.addEventListener('mouseup', onMouseup, { once: true });
 	window.addEventListener('touchend', onMouseup, { once: true });
 };
-
-		return {
-			rawValue,
-			finalValue,
-			steppedRawValue,
-			onMousedown,
-			containerEl,
-			thumbEl,
-			thumbPosition,
-			steps,
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>