Merge pull request #4146 from traPtitech/SSlime/form-button-imp

✨ FormButton の構造を変えて新たな状態を追加

package.json

@@ -42,6 +42,7 @@
     "skyway-js": "^4.4.5",
     "text-field-edit": "^3.2.0",
     "throttle-debounce": "^5.0.0",
+    "ts-pattern": "^5.0.5",
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
     "vue": "^3.3.4",

src/components/GroupManager/GroupListGroupEdit.vue

@@ -29,7 +29,12 @@
       :members="group.members"
     />
     <div :class="[$style.item, $style.deleteButtonWrapper]">
-      <form-button label="グループを削除" color="error" @click="onDelete" />
+      <form-button
+        label="グループを削除"
+        type="secondary"
+        is-danger
+        @click="onDelete"
+      />
     </div>
   </div>
 </template>

src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationPanel.vue

@@ -16,7 +16,7 @@
       <form-button
         v-if="showExpandButton"
         :class="$style.expandButton"
-        color="secondary"
+        type="tertiary"
         label="全て表示"
         @click="expand"
       />

src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue

@@ -23,7 +23,12 @@
       </content-editor>
     </sidebar-content-container-foldable>
     <div :class="$style.item">
-      <form-button label="削除" color="error" @click="deleteClip" />
+      <form-button
+        label="削除"
+        type="secondary"
+        is-danger
+        @click="deleteClip"
+      />
     </div>
   </div>
 </template>

src/components/Main/MainView/MessageElement/MessageEditor.vue

@@ -32,7 +32,7 @@
       </div>
     </div>
     <div :class="$style.controls">
-      <form-button label="キャンセル" color="secondary" @click="cancel" />
+      <form-button label="キャンセル" type="tertiary" @click="cancel" />
       <form-button
         label="OK"
         :disabled="isPostingAttachment"

src/components/Settings/SessionTab/AccountState.vue

@@ -5,9 +5,15 @@
       <form-button
         label="ログアウト"
         :class="$style.logout"
+        type="secondary"
+        is-danger
         @click="onLogoutClick"
       />
-      <form-button label="全セッション破棄" @click="onSessionDelete" />
+      <form-button
+        label="全セッション破棄"
+        is-danger
+        @click="onSessionDelete"
+      />
     </div>
   </div>
 </template>

src/components/Settings/ThemeTab/EditTheme.vue

@@ -5,22 +5,23 @@
       label="エクスポート"
       @click="onImportClick"
       :disabled="isImporterOpen"
-      color="secondary"
+      type="tertiary"
       :class="$style.element"
     />
     -->
     <form-button
       label="インポート/エクスポート"
       :disabled="isImporterOpen"
-      color="secondary"
+      type="tertiary"
       :class="$style.element"
       @click="onImportClick"
     />
     <!--
     <form-button
       label="選択中のテーマで上書き"
       @click="onUpdateClick"
-      color="error"
+      type="secondary"
+      is-danger
       :class="$style.element"
     />
     -->
@@ -31,7 +32,7 @@
       <form-button
         label="保存"
         :disabled="!isChanged"
-        color="primary"
+        type="primary"
         @click="applyTheme"
       />
     </div>

src/components/UI/FormButton.vue

@@ -3,7 +3,8 @@
     :class="$style.container"
     :disabled="loading || disabled"
     :data-is-loading="$boolAttr(loading)"
-    :data-color="color"
+    :data-type="type"
+    :data-is-danger="$boolAttr(isDanger)"
   >
     <div :class="$style.label">{{ label }}</div>
     <loading-spinner
@@ -17,29 +18,43 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import LoadingSpinner from '/@/components/UI/LoadingSpinner.vue'
+import { match, P } from 'ts-pattern'
 
-const props = withDefaults(
-  defineProps<{
-    label?: string
-    loading?: boolean
-    disabled?: boolean
-    color?: 'primary' | 'secondary' | 'error' | 'tertiary'
-  }>(),
-  {
-    label: '',
-    loading: false,
-    disabled: false,
-    color: 'primary' as const
-  }
-)
+interface Type {
+  type?: 'primary' | 'secondary' | 'tertiary'
+  isDanger?: boolean
+}
+
+interface NonDangerType extends Type {
+  type?: 'primary' | 'secondary' | 'tertiary'
+  isDanger?: false
+}
+interface DangerType extends Type {
+  type?: 'primary' | 'secondary'
+  isDanger: true
+}
+
+type Props = {
+  label?: string
+  loading?: boolean
+  disabled?: boolean
+} & (NonDangerType | DangerType)
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  loading: false,
+  disabled: false,
+  type: 'primary',
+  isDanger: false
+})
 
 const spinnerColor = computed(() => {
-  switch (props.color) {
-    case 'tertiary':
-      return 'accent-primary'
-    default:
-      return 'white'
-  }
+  return match([props.type, props.isDanger] as const)
+    .with(['primary', P._], () => 'white' as const)
+    .with(['secondary', true], () => 'accent-error' as const)
+    .with(['secondary', false], () => 'accent-primary' as const)
+    .with(['tertiary', P._], () => 'ui-secondary' as const)
+    .exhaustive()
 })
 </script>
 
@@ -57,20 +72,26 @@ const spinnerColor = computed(() => {
   &[data-is-loading] {
     cursor: wait;
   }
-  &[data-color='primary'] {
+  &[data-type='primary'] {
     @include color-common-text-white-primary;
     @include background-accent-primary;
+    border-color: $theme-ui-primary-default;
+  }
+  &[data-type='secondary'] {
+    @include color-accent-primary;
     border-color: $theme-accent-primary-default;
   }
-  &[data-color='secondary'] {
+  &[data-type='tertiary'] {
     @include color-ui-secondary;
     border-color: $theme-ui-secondary-default;
   }
-  &[data-color='tertiary'] {
-    @include color-accent-primary;
-    border-color: $theme-accent-primary-default;
+
+  &[data-type='primary'][data-is-danger] {
+    @include color-common-text-white-primary;
+    @include background-accent-error;
+    border-color: $theme-accent-error-default;
   }
-  &[data-color='error'] {
+  &[data-type='secondary'][data-is-danger] {
     color: $theme-accent-error-default;
     border-color: $theme-accent-error-default;
   }

src/components/UI/LoadingSpinner.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-type SpinnerColor = 'white' | 'ui-secondary' | 'accent-primary'
+type SpinnerColor = 'white' | 'ui-secondary' | 'accent-primary' | 'accent-error'
 
 withDefaults(
   defineProps<{
@@ -37,6 +37,10 @@ $spinner-width: 0.35em;
     --spinner-color: #{$theme-accent-primary-default};
     --spinner-gap-color: transparent;
   }
+  &[data-color='accent-error'] {
+    --spinner-color: #{$theme-accent-error-default};
+    --spinner-gap-color: transparent;
+  }
 }
 .spinner {
   position: relative;