feat: add view doc

src/pages/11_credit-note/expansion/RemarkExpansion.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+defineProps<{
+  readonly?: boolean;
+}>();
+
+const remark = defineModel<string>('remark', { default: '' });
+</script>
+<template>
+  <q-expansion-item
+    dense
+    class="overflow-hidden bordered full-width"
+    switch-toggle-side
+    style="border-radius: var(--radius-2)"
+    expand-icon="mdi-chevron-down-circle"
+    header-class="surface-1 q-py-sm text-medium text-body1"
+  >
+    <template #header>
+      <span>
+        {{ $t('general.remark') }}
+      </span>
+    </template>
+
+    <main class="surface-1 q-pa-md full-width">
+      <q-editor
+        dense
+        :readonly="readonly"
+        :model-value="remark"
+        min-height="5rem"
+        class="full-width"
+        toolbar-bg="input-border"
+        style="cursor: auto; color: var(--foreground)"
+        :content-class="readonly ? 'q-mt-sm' : 'bordered q-mt-sm rounded'"
+        :flat="!readonly"
+        :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
+        :toolbar="[['left', 'center', 'justify'], ['clip']]"
+        :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
+        :toolbar-color="readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''"
+        :definitions="{
+          clip: {
+            icon: 'mdi-paperclip',
+            tip: 'Upload',
+            disable: readonly,
+            handler: () => console.log('upload'),
+          },
+        }"
+        @update:model-value="
+          (v) => {
+            remark = v;
+          }
+        "
+      />
+    </main>
+  </q-expansion-item>
+</template>
+<style scoped>
+:deep(.q-editor__toolbar-group):nth-child(2) {
+  margin-left: auto !important;
+}
+
+:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
+  background-color: var(--surface-2) !important;
+}
+
+:deep(.q-editor__toolbar) {
+  border-color: var(--surface-3) !important;
+}
+</style>