Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

docs/細かい設計方針.md

@@ -49,3 +49,63 @@ export type HogeFugaType = z.infer<typeof hogeFugaSchema>;
 | 追加時の処理         | zipファイルを所定のフォルダに展開    | エンジンのパスを`config.json`に保存 |
 | 読み込み時の処理     | 所定のフォルダ内にあるものを読む     | `config.json`に保存されたパスを読む |
 | 削除時の処理         | 所定のフォルダ内のディレクトリを削除 | `config.json`からパスを削除         |
+
+## デフォルトエンジンの更新情報
+
+デフォルトエンジンの更新情報をjson形式で管理しています。
+更新情報には最新のパッケージ（VVPP・VVPPPファイル）のURLやバージョンなどを記載しています。
+パッケージの情報はOS・アーキテクチャ・デバイスごとに分けています。
+
+ファイルフォーマットは以下の通りです。
+
+```JSONC
+{
+  //[number] ファイル構造バージョン（仕様変更毎にインクリメントされる）
+  "formatVersion": 1,
+
+  // Windowsの情報
+  "windows": {
+    "x64": {
+      "CPU": {
+        //[string] バージョン
+        "version": "x.x.x",
+
+        // vvppやvvpppの情報
+        "packages": [
+          {
+            //[string] ダウンロードURL
+            "url": "https://example.com/example.vvpp",
+
+            //[string] ファイル名
+            "name": "example.vvpp",
+
+            //[number] バイト数
+            "size": 123456,
+
+            //[string(Optional)] ハッシュ値
+            "hash": "xxxxxxx",
+          },
+          //...
+        ]
+      },
+      "GPU/CPU": { /* 同上 */ }
+    }
+  },
+
+  "macos": {
+    "x64": {
+      "CPU": { /* 同上 */ }
+    },
+    "arm64": {
+      "CPU": { /* 同上 */ }
+    }
+  },
+
+  "linux": {
+    "x64": {
+      "CPU": { /* 同上 */ },
+      "GPU/CPU": { /* 同上 */ }
+    }
+  }
+}
+```

public/howtouse.md

@@ -302,6 +302,12 @@ VOICEVOX では、歌声合成機能がプロトタイプ版として提供さ
 
 ソング機能は鋭意制作中です。フィードバックをお待ちしています。
 
+### ノート（音符）の追加
+
+ピアノロールをクリックすることで、その高さのノート（音符）を追加できます。
+ドラッグすることで、長さを指定しつつノートを追加することもできます。
+`Esc`キーでノートの選択状態を解除できます。
+
 ### 歌詞の入力
 
 ノートをダブルクリックすることで歌詞を入力できます。複数の文字を入力すれば一括入力できます。

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>`,
+  }),
+};