Set up the Options view bound to the prefs & settings stores

resources/js_vue3/components/formElements/FormCheckbox.vue

@@ -0,0 +1,44 @@
+<script setup>
+    defineOptions({
+        inheritAttrs: false
+    })
+
+    const props = defineProps({
+        modelValue: Boolean,
+        fieldName: {
+            type: String,
+            default: '',
+            required: true
+        },
+        label: {
+            type: String,
+            default: ''
+        },
+        labelClass: {
+            type: String,
+            default: ''
+        },
+        help: {
+            type: String,
+            default: ''
+        },
+    })
+
+    const emit = defineEmits(['update:modelValue'])
+    const attrs = useAttrs()
+    const checked = ref(props.modelValue)
+
+    function setCheckbox() {
+        if (attrs['disabled'] == undefined) {
+            emit('update:modelValue', checked)
+        }
+    }
+</script>
+
+<template>
+    <div class="field">
+        <input :id="fieldName" type="checkbox" :name="fieldName" class="is-checkradio is-info" v-model="checked" v-on:change="setCheckbox" v-bind="$attrs"/>
+        <label tabindex="0" :for="fieldName" class="label" :class="labelClass" v-html="$t(label)" v-on:keypress.space.prevent="setCheckbox" />
+        <p class="help" v-html="$t(help)" v-if="help" />
+    </div>
+</template>

resources/js_vue3/components/formElements/FormSelect.vue

@@ -0,0 +1,39 @@
+<script setup>
+    const props = defineProps({
+        modelValue: [String, Number, Boolean],
+        label: {
+            type: String,
+            default: ''
+        },
+        fieldName: {
+            type: String,
+            default: '',
+            required: true
+        },
+        options: {
+            type: Array,
+            required: true
+        },
+        help: {
+            type: String,
+            default: ''
+        },
+    })
+
+    const selected = ref(props.modelValue)
+</script>
+
+<template>
+    <div class="field">
+        <label class="label" v-html="$t(label)"></label>
+        <div class="control">
+            <div class="select">
+                <select v-model="selected" v-on:change="$emit('update:modelValue', $event.target.value)">
+                    <option v-for="option in options" :value="option.value">{{ $t(option.text) }}</option>
+                </select>
+            </div>
+        </div>
+        <!-- <FieldError :form="form" :field="fieldName" /> -->
+        <p class="help" v-html="$t(help)" v-if="help"></p>
+    </div>
+</template>

resources/js_vue3/components/formElements/FormToggle.vue

@@ -0,0 +1,73 @@
+<script setup>
+    import { useIdGenerator } from '@/composables/helpers'
+    import { UseColorMode } from '@vueuse/components'
+
+    const props = defineProps({
+        modelValue: [String, Number, Boolean],
+        choices: {
+            type: Array,
+            required: true
+        },
+        fieldName: {
+            type: String,
+            required: true
+        },
+        hasOffset: Boolean,
+        isDisabled: Boolean,
+        label: {
+            type: String,
+            default: ''
+        },
+        help: {
+            type: String,
+            default: ''
+        },
+    })
+
+    // defines what events our component emits
+    const emit = defineEmits('update:modelValue')
+
+    function setRadio(event) {
+        emit('update:modelValue', event)
+    }
+    
+</script>
+
+<template>
+    <div class="field" :class="{ 'pt-3': hasOffset }" role="radiogroup"
+        :aria-labelledby="useIdGenerator('label',fieldName).inputId">
+        <label v-if="label" :id="useIdGenerator('label',fieldName).inputId" class="label" v-html="$t(label)" />
+        <div class="is-toggle buttons">
+            <UseColorMode v-slot="{ mode }">
+                <button
+                    v-for="choice in choices"
+                    :key="choice.value"
+                    :id="useIdGenerator('button',fieldName+choice.value).inputId"
+                    role="radio"
+                    type="button"
+                    class="button"
+                    :aria-checked="modelValue===choice.value"
+                    :disabled="isDisabled"
+                    :class="{
+                        'is-link': modelValue===choice.value,
+                        'is-dark': mode==='dark',
+                        'is-multiline': choice.legend,
+                    }"
+                    v-on:click.stop="setRadio(choice.value)"
+                    :title="choice.title? choice.title:''">
+                    <input
+                        :id="useIdGenerator('radio',choice.value).inputId"
+                        type="radio"
+                        class="is-hidden"
+                        :checked="modelValue===choice.value"
+                        :value="choice.value"
+                        :disabled="isDisabled" />
+                    <span v-if="choice.legend" v-html="$t(choice.legend)" class="is-block is-size-7" />
+                    <FontAwesomeIcon :icon="['fas',choice.icon]" v-if="choice.icon" class="mr-2" /> {{ $t(choice.text) }}
+                </button>
+            </UseColorMode>
+        </div>
+        <!-- <FieldError :form="form" :field="fieldName" /> -->
+        <p class="help" v-html="$t(help)" v-if="help" />
+    </div>
+</template>