プリセットの管理ダイアログのリデザイン

src/components/Base/BaseSlider.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { ref } from "vue";
+import BaseSlider from "./BaseSlider.vue";
+
+const meta: Meta<typeof BaseSlider> = {
+  component: BaseSlider,
+  args: {
+    modelValue: 50,
+    min: 0,
+    max: 100,
+    step: 1,
+  },
+  render: (args) => ({
+    components: { BaseSlider },
+    setup() {
+      const model = ref(Number(args.modelValue));
+      return { args, model };
+    },
+    template: `<BaseSlider v-bind="args" v-model="model"></BaseSlider>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseSlider>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};

src/components/Base/BaseSlider.vue

@@ -0,0 +1,90 @@
+<template>
+  <SliderRoot
+    class="SliderRoot"
+    :min
+    :max
+    :step
+    :disabled
+    :modelValue="[model]"
+    @update:modelValue="(value) => $emit('update:modelValue', value[0])"
+  >
+    <SliderTrack class="SliderTrack">
+      <SliderRange class="SliderRange" />
+    </SliderTrack>
+    <SliderThumb class="SliderThumb" />
+  </SliderRoot>
+</template>
+
+<script setup lang="ts">
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "radix-vue";
+
+defineProps<{
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+}>();
+
+const model = defineModel<number>({ required: true });
+</script>
+
+<style lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.SliderRoot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: vars.$size-control;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.SliderTrack {
+  background-color: colors.$border;
+  position: relative;
+  flex-grow: 1;
+  border-radius: 9999px;
+  height: 4px;
+}
+
+.SliderRange {
+  position: absolute;
+  background-color: colors.$primary;
+  border-radius: 9999px;
+  height: 100%;
+}
+
+.SliderThumb {
+  display: block;
+  width: 8px;
+  height: vars.$size-indicator;
+  background-color: colors.$primary;
+  border: 1px solid colors.$border;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  border-radius: vars.$radius-1;
+
+  :hover:not([data-disabled]) > & {
+    background-color: colors.$primary-hovered;
+  }
+
+  :active:not([data-disabled]) > & {
+    background-color: colors.$primary-pressed;
+    box-shadow: 0 0 0 transparent;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+</style>