エンジンの管理ダイアログのリデザイン (#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>