migrate admin settings

src/components/settings/MenuDisplay.vue

@@ -1,6 +1,4 @@
-<template>
-
-</template>
+<template></template>
 
 <script setup>
 // import AlwaysDisplayImg from '../../img/admin/layout-always-displayed.svg'
@@ -17,7 +15,7 @@ const choices = [
 
 const carouselConfig = {
   itemsToShow: 1.3,
-  wrapAround: true
+  wrapAround: true,
 }
 
 const { mode, alwaysDisplayed } = defineProps({
@@ -28,6 +26,6 @@ const { mode, alwaysDisplayed } = defineProps({
   alwaysDisplayed: {
     type: Boolean,
     required: true,
-  }
+  },
 })
 </script>

src/components/settings/SectionTitle.vue

@@ -0,0 +1,19 @@
+<template>
+  <h2>{{ t('side_menu', label) }}</h2>
+</template>
+
+<style scoped>
+h2 {
+  font-size: 1.3em;
+  margin: 0 0 12px 0;
+}
+</style>
+
+<script setup>
+const { label } = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+})
+</script>

src/components/settings/TableLabel.vue

@@ -1,10 +1,18 @@
 <template>
-  <div class="side-menu-setting-label" :class="{
-    'side-menu-setting-label-short': short,
-    'side-menu-setting-label--top': top,
-    'side-menu-setting-label--middle': middle,
-  }">
+  <div
+    class="side-menu-setting-label"
+    :class="{
+      'side-menu-setting-label-short': short,
+      'side-menu-setting-label--top': top,
+      'side-menu-setting-label--middle': middle,
+    }"
+  >
     {{ t('side_menu', label) }}
+
+    <template v-if="help">
+      <br />
+      <em>{{ help }}</em>
+    </template>
   </div>
 </template>
 
@@ -29,5 +37,10 @@ const { short, label } = defineProps({
     required: false,
     default: true,
   },
+  help: {
+    type: [String, null],
+    required: false,
+    default: false,
+  },
 })
 </script>

src/components/settings/TableValue.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="side-menu-setting-form" :class="{'side-menu-setting-form-long': long}">
+  <div
+    class="side-menu-setting-form"
+    :class="{ 'side-menu-setting-form-long': long }"
+  >
     <slot></slot>
   </div>
 </template>

src/components/settings/form/FormAppPicker.vue

@@ -0,0 +1,82 @@
+<template>
+  <NcButton
+    aria-label="t('side_menu', 'Select apps')"
+    @click="openModal"
+    variant="primary"
+  >
+    {{ t('side_menu', 'Select apps') }} ({{ model.length }})
+  </NcButton>
+
+  <NcModal
+    v-if="modal"
+    @close="closeModal"
+  >
+    <div class="modal__content">
+      <NcCheckboxRadioSwitch
+        v-for="(item, key) in apps"
+        v-model="model"
+        name="value"
+        :value="item.id"
+        :key="key"
+      >
+        <img
+          :src="item.icon"
+          :alt="item.name"
+        />
+        {{ item.name }}
+      </NcCheckboxRadioSwitch>
+
+      <div class="modal__footer">
+        <NcButton
+          @click="closeModal"
+          variant="primary"
+        >
+          {{ t('side_menu', 'Close') }}
+        </NcButton>
+      </div>
+    </div>
+  </NcModal>
+</template>
+
+<style scoped>
+.modal__content {
+  padding: 20px;
+}
+
+.modal__footer {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.modal__footer button {
+  display: inline-block;
+}
+
+img {
+  width: 15px;
+  height: 15px;
+}
+</style>
+
+<script setup>
+import { NcButton, NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { useNavStore } from '../../../store/nav.js'
+import { ref, onMounted } from 'vue'
+
+const model = defineModel()
+const navStore = useNavStore()
+const modal = ref(false)
+const apps = ref([])
+
+const openModal = () => {
+  modal.value = true
+}
+
+const closeModal = () => {
+  modal.value = false
+}
+
+onMounted(async () => {
+  apps.value = await navStore.getApps()
+})
+</script>

src/components/settings/form/FormColorPicker.vue

@@ -0,0 +1,17 @@
+<template>
+  <NcColorPicker
+    v-model="model"
+    class="side-menu-setting-color-picker"
+  >
+    <div
+      :style="{ 'background-color': model }"
+      class="side-menu-setting-color-picker-value"
+    />
+  </NcColorPicker>
+</template>
+
+<script setup>
+import { NcColorPicker } from '@nextcloud/vue'
+
+const model = defineModel()
+</script>

src/components/settings/form/FormOpener.vue

@@ -0,0 +1,20 @@
+<template>
+  <FormSelect
+    v-model="model"
+    :options="options"
+  />
+</template>
+
+<script setup>
+import FormSelect from './FormSelect'
+
+const model = defineModel()
+const options = [
+  { id: 'side-menu-opener', label: 'Default' },
+  { id: 'side-menu-opener-dark', label: 'Default (dark)' },
+  { id: 'side-menu-opener-hamburger', label: 'Hamburger' },
+  { id: 'side-menu-opener-hamburger-dark', label: 'Hamburger (dark)' },
+  { id: 'side-menu-opener-hamburger-2', label: 'Hamburger 2' },
+  { id: 'side-menu-opener-hamburger-2-dark', label: 'Hamburger 2 (dark)' },
+]
+</script>

src/components/settings/form/FormRange.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <em v-if="prepend">{{ t('side_menu', prepend) }}</em>
+
+    <input
+      type="range"
+      :min="min"
+      :max="max"
+      v-model="model"
+    />
+
+    <em v-if="append">{{ t('side_menu', append) }}</em>
+  </div>
+</template>
+
+<style scoped>
+input {
+  min-height: auto;
+}
+
+div * {
+  vertical-align: middle;
+}
+
+em + input,
+input + em {
+  margin-left: 10px;
+}
+</style>
+
+<script setup>
+const model = defineModel()
+
+const { prefix, suffix } = defineProps({
+  prepend: {
+    type: [String, null],
+    required: false,
+    default: null,
+  },
+  append: {
+    type: [String, null],
+    required: false,
+    default: null,
+  },
+  min: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    required: false,
+    default: 100,
+  },
+})
+</script>

src/components/settings/form/FormSelect.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <template v-if="!expanded">
+      <select v-model="model" v-if="!expanded" :multiple="multiple">
+        <option
+          v-for="option in options"
+          :value="option.id"
+        >
+          {{ t('side_menu', option.label) }}
+        </option>
+      </select>
+    </template>
+    <template v-else>
+      <NcCheckboxRadioSwitch
+        v-for="option in options"
+        v-model="model"
+        :value="option.id"
+        :key="option.id"
+        :type="multiple ? 'checkbox' : 'radio'"
+        name="value"
+      >
+        {{ option.label }}
+      </NcCheckboxRadioSwitch>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
+
+const model = defineModel()
+const { options, expanded } = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  expanded: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  multiple: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+</script>

src/components/settings/form/FormSize.vue

@@ -0,0 +1,18 @@
+<template>
+  <FormSelect
+    v-model="model"
+    :options="options"
+  />
+</template>
+
+<script setup>
+import FormSelect from './FormSelect'
+
+const model = defineModel()
+const options = [
+  { id: 'hidden', label: 'Hidden' },
+  { id: 'small', label: 'Small' },
+  { id: 'normal', label: 'Normal' },
+  { id: 'big', label: 'Big' },
+]
+</script>

src/components/settings/form/FormYesNo.vue

@@ -0,0 +1,12 @@
+<template>
+  <NcCheckboxRadioSwitch
+    v-model="model"
+    type="switch"
+  />
+</template>
+
+<script setup>
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
+
+const model = defineModel()
+</script>