refactor: flowdialog

src/pages/04_product-service/FlowDialog.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import DialogForm from 'src/components/DialogForm.vue';
+import SideMenu from 'src/components/SideMenu.vue';
+
+const model = defineModel<boolean>({ required: true, default: false });
+</script>
+<template>
+  <DialogForm :title="$t('flow.title')" v-model:modal="model">
+    <div
+      class="col surface-1 rounded bordered scroll row relative-position"
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <section
+        class="col"
+        style="height: 100%; max-height: 100; overflow-y: auto"
+        v-if="$q.screen.gt.sm"
+      >
+        <div class="q-py-md q-pl-md q-pr-sm">
+          <SideMenu
+            :menu="[
+              {
+                name: $t('general.name', { msg: $t('flow.template') }),
+                anchor: 'form-group',
+              },
+            ]"
+            background="transparent"
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+            scroll-element="#group-form"
+          />
+        </div>
+      </section>
+
+      <section
+        class="col-12 col-md-10"
+        id="customer-form-content"
+        :class="{
+          'q-py-md q-pr-md ': $q.screen.gt.sm,
+          'q-py-md q-px-lg': !$q.screen.gt.sm,
+        }"
+        style="height: 100%; max-height: 100%; overflow-y: auto"
+      >
+        <div class="row col-12">
+          <div class="col-12 q-pb-sm text-weight-bold text-body1">
+            <q-icon
+              flat
+              size="xs"
+              class="q-pa-sm rounded q-mr-xs"
+              color="info"
+              name="mdi-office-building-outline"
+              style="background-color: var(--surface-3)"
+            />
+            {{ $t(`general.name`, { msg: $t('') }) }}
+          </div>
+        </div>
+      </section>
+    </div>
+  </DialogForm>
+</template>
+<style scoped></style>