refactor: refactor Panel.vue (#1427)

src/components/ui/Panel.vue

@@ -1,37 +1,3 @@
-<style lang="scss" scoped>
-.expanded header.v-toolbar {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
-
-.btn-collapsible > * {
-    will-change: transform;
-    transition: transform 500ms;
-}
-.icon-rotate-90 {
-    transform: rotate(90deg);
-}
-</style>
-
-<style lang="scss">
-.v-card.panel .v-toolbar__content {
-    padding-right: 0;
-}
-.v-card.panel .v-toolbar__content .subheading {
-    user-select: none;
-}
-.panel-toolbar {
-    overflow-y: hidden;
-}
-.panel-toolbar .v-btn {
-    height: 100% !important;
-    max-height: none;
-}
-.panel-toolbar .v-btn.v-btn--icon {
-    width: var(--panel-toolbar-icon-btn-width) !important;
-}
-</style>
-
 <template>
     <v-card
         :class="'panel ' + cardClass + ' ' + (marginBottom ? 'mb-3 mb-md-6' : '') + ' ' + (!expand ? 'expanded' : '')"
@@ -43,17 +9,17 @@
             :class="getToolbarClass"
             :height="panelToolbarHeight"
             class="panel-toolbar">
-            <slot name="buttons-left"></slot>
+            <slot name="buttons-left" />
             <v-toolbar-title class="d-flex align-center">
-                <slot v-if="hasIconSlot" name="icon"></slot>
+                <slot v-if="hasIconSlot" name="icon" />
                 <v-icon v-if="icon !== null && !hasIconSlot" left>{{ icon }}</v-icon>
                 <span v-if="title" class="subheading">{{ title }}</span>
             </v-toolbar-title>
-            <slot name="buttons-title"></slot>
-            <v-spacer></v-spacer>
+            <slot name="buttons-title" />
+            <v-spacer />
             <v-toolbar-items v-show="hasButtonsSlot || collapsible">
                 <div v-if="expand || !hideButtonsOnCollapse" class="d-flex align-center">
-                    <slot name="buttons"></slot>
+                    <slot name="buttons" />
                 </div>
                 <v-btn v-if="collapsible" icon class="btn-collapsible" :ripple="true" @click="expand = !expand">
                     <v-icon :class="expand ? '' : 'icon-rotate-90'">{{ mdiChevronDown }}</v-icon>
@@ -62,7 +28,7 @@
         </v-toolbar>
         <v-expand-transition>
             <div v-show="expand || !collapsible">
-                <slot></slot>
+                <slot />
             </div>
         </v-expand-transition>
     </v-card>
@@ -73,16 +39,16 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { panelToolbarHeight } from '@/store/variables'
-import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
+import { mdiChevronDown } from '@mdi/js'
+import { TranslateResult } from 'vue-i18n'
 
 @Component
 export default class Panel extends Mixins(BaseMixin) {
-    mdiChevronUp = mdiChevronUp
     mdiChevronDown = mdiChevronDown
     panelToolbarHeight = panelToolbarHeight
 
     @Prop({ default: null }) declare readonly icon: string | null
-    @Prop({ required: true, default: '' }) declare readonly title: string
+    @Prop({ required: true, default: '' }) declare readonly title: string | TranslateResult
     @Prop({ default: false }) declare readonly collapsible: boolean
     @Prop({ required: true }) declare readonly cardClass: string
     @Prop({ default: '' }) declare readonly toolbarColor: string
@@ -116,3 +82,37 @@ export default class Panel extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style lang="scss" scoped>
+.expanded header.v-toolbar {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.btn-collapsible > * {
+    will-change: transform;
+    transition: transform 500ms;
+}
+.icon-rotate-90 {
+    transform: rotate(90deg);
+}
+</style>
+
+<style lang="scss">
+.v-card.panel .v-toolbar__content {
+    padding-right: 0;
+}
+.v-card.panel .v-toolbar__content .subheading {
+    user-select: none;
+}
+.panel-toolbar {
+    overflow-y: hidden;
+}
+.panel-toolbar .v-btn {
+    height: 100% !important;
+    max-height: none;
+}
+.panel-toolbar .v-btn.v-btn--icon {
+    width: var(--panel-toolbar-icon-btn-width) !important;
+}
+</style>