feat: add page settings section

components.d.ts

@@ -52,6 +52,7 @@ declare module 'vue' {
     BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
     BFormInvalidFeedback: typeof import('bootstrap-vue-next')['BFormInvalidFeedback']
     BFormRadio: typeof import('bootstrap-vue-next')['BFormRadio']
+    BFormRadioGroup: typeof import('bootstrap-vue-next')['BFormRadioGroup']
     BFormRow: typeof import('bootstrap-vue-next')['BFormRow']
     BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
     BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
@@ -148,6 +149,10 @@ declare module 'vue' {
     NavigationBreadcrumbLink: typeof import('./src/components/NavigationBreadcrumb/NavigationBreadcrumbLink.vue')['default']
     PageHeader: typeof import('./src/components/PageHeader.vue')['default']
     PageIcon: typeof import('./src/components/PageIcon.vue')['default']
+    PageSettingsEntry: typeof import('./src/components/PageSettingsEntry.vue')['default']
+    PageSettingsSection: typeof import('./src/components/PageSettingsSection.vue')['default']
+    PageSettingsSectionLabel: typeof import('./src/components/PageSettingsSectionLabel.vue')['default']
+    PaginatedViewer: typeof import('./src/components/document/viewers/PaginatedViewer.vue')['default']
     Pagination: typeof import('./src/components/Pagination.vue')['default']
     PhosphorIcon: typeof import('./src/components/PhosphorIcon.vue')['default']
     Plugins: typeof import('./src/components/Plugins.vue')['default']

src/components/PageSettingsEntry.vue

@@ -1,27 +1,10 @@
 <template>
-  <component :is="formInputType" :value="value" v-model="localValue">
-    <slot>
       <span class="page-settings-entry"><phosphor-icon v-if="icon" :name="icon"/>{{ text }}</span>
-    </slot>
-  </component>
 </template>
 
 <script setup>
 import {PhosphorIcon} from "@icij/murmur-next";
-import {computed, inject} from "vue";
-import {BFormCheckbox, BFormRadio} from "bootstrap-vue-next";
-const RADIO = "radio"
-const CHECKBOX = "checkbox"
 const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    required: false
-  },
-  type: {
-    type: String,
-    required:true,
-    validator:(inputType) => [RADIO, CHECKBOX].includes(inputType)
-  },
   icon: {
     type: String,
   },
@@ -34,17 +17,6 @@ const props = defineProps({
     required: false
   }
 })
-const emits = defineEmits(["update:modelValue"])
-const formInputType = computed(()=>{return props.type === RADIO? BFormRadio:BFormCheckbox})
-const modelValue = defineModel({
-  default: undefined,
-})
-const localValue = computed({
-  get: () => modelValue.value,
-  set: (newVal) => {
-    modelValue.value = newVal
-  }
-})
 
 </script>
 

src/components/PageSettingsSection.vue

@@ -0,0 +1,59 @@
+<template>
+    <component :is="formGroup"
+               id="checkbox-group-1"
+               v-model="localValue"
+               :name="name"
+               stacked
+    >
+      <component :is="formInput" v-for="(option,index) in options" :key="index" :value="option.value">
+        <page-settings-entry :text="option.text" :icon="option.icon" />
+      </component>
+    </component>
+</template>
+
+<script setup>
+import {computed, ref} from "vue";
+import {PhosphorIcon} from "@icij/murmur-next";
+import PageSettingsEntry from "@/components/PageSettingsEntry.vue";
+import {BFormCheckbox, BFormCheckboxGroup, BFormRadio, BFormRadioGroup} from "bootstrap-vue-next";
+defineOptions({
+  name:"PageSettingsSection"
+})
+
+const RADIO = "radio"
+const CHECKBOX = "checkbox"
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+    validator: (inputType) => [RADIO, CHECKBOX].includes(inputType)
+  },
+  name: {
+    type: String,
+    default: 'settings'
+  },
+  options: {
+    type: Object,
+    required: true
+  }
+
+})
+const modelValue = defineModel({
+  type: [String, Array],
+  default: () => [],
+})
+
+const formGroup = computed(() => {
+  return props.type === RADIO ? BFormRadioGroup : BFormCheckboxGroup
+})
+const formInput = computed(() => {
+  return props.type === RADIO ? BFormRadio : BFormCheckbox
+})
+const localValue = computed({
+  get: () => modelValue.value,
+  set: (newVal) => {
+    modelValue.value = newVal
+  }
+})
+</script>
+

src/components/PageSettingsSectionLabel.vue

@@ -0,0 +1,42 @@
+<template>
+  <b-form-group ref="form-group">
+    <template #label>
+      <div class="d-flex justify-content-between">{{label}}<phosphor-icon class="d-inline-flex" :name="caretIcon" @click="toggleSection"/></div>
+    </template>
+    <slot v-bind="{open}"></slot>
+  </b-form-group>
+</template>
+
+<script setup>
+import {computed, ref} from "vue";
+import {PhosphorIcon} from "@icij/murmur-next";
+import PageSettingsEntry from "@/components/PageSettingsEntry.vue";
+import {BFormCheckbox, BFormCheckboxGroup, BFormRadio, BFormRadioGroup} from "bootstrap-vue-next";
+import PageSettingsSection from "@/components/PageSettingsSection.vue";
+defineOptions({
+  name:"PageSettingsSectionLabel"
+})
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: 'Settings'
+  },
+  show:{
+    type:Boolean,
+    default:true
+  }
+})
+const open = defineModel({
+  type:Boolean,
+  default:true
+})
+
+const caretIcon = computed(()=> open.value?'caret-up':'caret-down')
+
+function toggleSection(){
+  open.value = !open.value
+}
+
+</script>
+

src/stories/components/PageSettingsSection.stories.js

@@ -0,0 +1,65 @@
+import PageSettingsSectionLabel from '@/components/PageSettingsSectionLabel'
+import PageSettingsSection from '@/components/PageSettingsSection'
+import {ref} from "vue";
+
+export default {
+  title: 'Components/PageSettings/Section',
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: { type: 'radio' },
+      options: ['radio','checkbox']
+    },
+  },
+  render: (args) => ({
+    components: {
+      PageSettingsSection,PageSettingsSectionLabel
+    },
+    setup: () => {
+      const selected = ref("")
+      return {selected,args}
+    },
+    template: `
+      <page-settings-section-label :title="args.label" v-slot="{open}">
+      <page-settings-section v-show="open" v-bind="args"></page-settings-section>
+      </page-settings-section-label>
+
+      Selection {{args.modelValue}}
+    `
+  })
+}
+const props = {label: 'Show in document details',
+  name:'document-details',
+  type:"checkbox",
+  options:[
+    {
+      value: "thumbnail",
+      text: "Thumbnail",
+      icon: 'image-square'
+    },
+    {
+      value: "path",
+      text: "Path",
+      icon: 'tree-structure'
+    },
+    {
+      value: "creation-date",
+      text: "Creation date",
+      icon: 'calendar-blank'
+    },
+    {
+      value: "highlight",
+      text: "Highlight",
+      icon: 'quotes'
+    }
+  ]}
+export const Default = {
+  args: {
+    ...props,modelValue:[]
+  }
+}
+export const Radio = {
+  args: {
+    ...props,type:"radio",modelValue:''
+  }
+}