エンジンの管理ダイアログのリデザイン (#2255)

* BaseListItemの高さを可変に変更

* BaseToggleGroup関連コンポーネントを追加

* 親のheightの100%が伝搬できるように変更

* BaseNavigationViewコンポーネントを追加

* BaseTextFieldコンポーネントを追加

* エンジンの管理ダイアログをリデザイン

* propsにdisabledを追加

* デザイン調整

* Baseコンポーネントのstoriesファイルを追加

* Storyを拡充

* チェック・非チェック時で幅が変わらないように変更

* clickイベントを追加

* 余白を調整

* 関数の指定ミスを修正

* クラスを整理

* SCSSの不要なuseを削除

* コメントを追加

src/components/Base/BaseButton.vue

@@ -2,6 +2,7 @@
   <button
     class="button"
     :class="variant ? variant : 'default'"
+    :disabled
     @click="(payload) => $emit('click', payload)"
   >
     <!-- 暫定でq-iconを使用 -->
@@ -14,6 +15,7 @@
 defineProps<{
   label: string;
   icon?: string;
+  disabled?: boolean;
   variant?: "default" | "primary" | "danger";
 }>();
 
@@ -31,6 +33,7 @@ defineEmits<{
   display: flex;
   justify-content: space-between;
   align-items: center;
+  text-wrap: nowrap;
   height: vars.$size-control;
   border-radius: vars.$radius-1;
   padding: 0 vars.$padding-2;

src/components/Base/BaseListItem.vue

@@ -29,12 +29,12 @@ defineEmits<{
   color: colors.$display;
   cursor: pointer;
   position: relative;
-  height: vars.$size-listitem;
+  min-height: vars.$size-listitem;
   display: flex;
   align-items: center;
   background-color: colors.$clear;
   border: none;
-  padding: 0 vars.$padding-2;
+  padding: vars.$padding-1 vars.$padding-2;
   border-radius: vars.$radius-1;
   transition: background-color vars.$transition-duration;
 

src/components/Base/BaseNavigationView.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseNavigationView from "./BaseNavigationView.vue";
+import BaseListItem from "./BaseListItem.vue";
+
+const meta: Meta<typeof BaseNavigationView> = {
+  component: BaseNavigationView,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseNavigationView>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BaseNavigationView, BaseListItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseNavigationView style="width: 100%; height:480px" v-bind="args">
+        <template #sidebar>
+          <BaseListItem>ListItem</BaseListItem>
+        </template>
+        <div>Content</div>
+      </BaseNavigationView>`,
+  }),
+};

src/components/Base/BaseNavigationView.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="grid">
+    <div class="sidebar">
+      <BaseScrollArea>
+        <div class="sidebar-inner">
+          <slot name="sidebar" />
+        </div>
+      </BaseScrollArea>
+    </div>
+
+    <main class="content">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseScrollArea from "./BaseScrollArea.vue";
+</script>
+
+<style lang="scss" scoped>
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+
+// TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
+.grid {
+  height: calc(100vh - 90px);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 100%;
+  backdrop-filter: blur(32px);
+  background-color: colors.$background-drawer;
+}
+
+.sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+  width: max-content;
+}
+
+.content {
+  background-color: colors.$background;
+  border-left: 1px solid colors.$border;
+}
+</style>

src/components/Base/BaseScrollArea.vue

@@ -1,7 +1,9 @@
 <template>
   <ScrollAreaRoot class="ScrollAreaRoot" type="auto">
-    <ScrollAreaViewport class="ScrollAreaViewport">
-      <slot />
+    <ScrollAreaViewport asChild>
+      <div class="ScrollAreaViewport">
+        <slot />
+      </div>
     </ScrollAreaViewport>
     <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="horizontal">
       <ScrollAreaThumb class="ScrollAreaThumb">
@@ -37,11 +39,16 @@ import {
   flex-direction: column;
 }
 
-.ScrollAreaViewport {
+// 親要素のサイズいっぱいに広げさせるためプライベートなデータ属性を使用
+:deep([data-radix-scroll-area-viewport]) {
   width: 100%;
   height: 100%;
 }
 
+:deep(.ScrollAreaViewport) {
+  height: 100%;
+}
+
 .ScrollAreaScrollbar {
   user-select: none;
   touch-action: none;

src/components/Base/BaseTextField.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseTextField from "./BaseTextField.vue";
+
+const meta: Meta<typeof BaseTextField> = {
+  component: BaseTextField,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseTextField>;
+
+export const Default: Story = {};
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: "Placeholder",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readonly: true,
+  },
+};
+
+export const HasError: Story = {
+  args: {
+    hasError: true,
+  },
+  render: (args) => ({
+    components: { BaseTextField },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseTextField v-bind="args">
+        <template #error>
+          ERROR TEXT
+        </template>
+      </BaseTextField>`,
+  }),
+};

src/components/Base/BaseTextField.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="wrapper">
+    <input
+      v-model="model"
+      type="text"
+      class="input"
+      :class="{ error: hasError }"
+      :placeholder
+      :readonly
+      :disabled
+      @click="(payload) => $emit('click', payload)"
+    />
+    <div v-if="hasError" class="error-label">
+      <slot name="error" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  placeholder?: string;
+  hasError?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  click: [payload: MouseEvent];
+}>();
+
+const model = defineModel<string>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.wrapper {
+  width: 100%;
+}
+
+.input {
+  height: vars.$size-control;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: vars.$gap-1;
+  border: 1px solid colors.$border;
+  border-radius: vars.$radius-1;
+  padding-inline: vars.$padding-1;
+  background-color: colors.$control;
+  color: colors.$display;
+
+  &:focus {
+    @include mixin.on-focus;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &::placeholder {
+    color: colors.$display-sub;
+  }
+}
+
+.error {
+  border: 2px solid colors.$display-warning;
+}
+
+.error-label {
+  color: colors.$display-warning;
+}
+</style>

src/components/Base/BaseToggleGroup.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseToggleGroup from "./BaseToggleGroup.vue";
+import BaseToggleGroupItem from "./BaseToggleGroupItem.vue";
+
+const meta: Meta<typeof BaseToggleGroup> = {
+  component: BaseToggleGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseToggleGroup>;
+
+export const Single: Story = {
+  args: {
+    type: "single",
+  },
+  render: (args) => ({
+    components: { BaseToggleGroup, BaseToggleGroupItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseToggleGroup v-bind="args">
+        <BaseToggleGroupItem label="A" value="a" />
+        <BaseToggleGroupItem label="B" value="B" />
+        <BaseToggleGroupItem label="C" value="C" />
+      </BaseToggleGroup>`,
+  }),
+};
+
+export const Multiple: Story = {
+  args: {
+    type: "multiple",
+  },
+  render: (args) => ({
+    components: { BaseToggleGroup, BaseToggleGroupItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseToggleGroup v-bind="args">
+        <BaseToggleGroupItem label="A" value="a" />
+        <BaseToggleGroupItem label="B" value="B" />
+        <BaseToggleGroupItem label="C" value="C" />
+      </BaseToggleGroup>`,
+  }),
+};

src/components/Base/BaseToggleGroup.vue

@@ -0,0 +1,44 @@
+<template>
+  <ToggleGroupRoot
+    class="ToggleGroup"
+    :type
+    :modelValue
+    :disabled
+    @update:modelValue="
+      (value) => {
+        if (value != undefined) {
+          $emit('update:modelValue', value);
+        }
+      }
+    "
+  >
+    <slot />
+  </ToggleGroupRoot>
+</template>
+
+<script setup lang="ts">
+import { ToggleGroupRoot } from "radix-vue";
+
+defineProps<{
+  type: "single" | "multiple";
+  modelValue: string | string[];
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  "update:modelValue": [payload: string | string[]];
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.ToggleGroup {
+  display: inline-flex;
+  background-color: var(--mauve-6);
+  border-radius: 4px;
+  box-shadow: 0 2px 10px var(--black-a7);
+}
+</style>