Mod fields

resources/js/components/form/Multipleselect.vue

@@ -1,111 +1,66 @@
 <template>
-    <label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
-        <span v-if="label" class="field-label">
-            {{ label }}
-            <span v-show="required" class="text-red-800">&nbsp;*</span>
-        </span>
-        <div class="relative real-field-wrap" :class="`size-${size}`">
-            <div class="flex items-center border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg size-sm text-xs px-1 border pr-6"
-                @click="visible = !visible" v-text="`${modelValue.length} Einträge ausgewählt`"></div>
-            <div v-show="visible"
-                class="absolute w-[max-content] z-30 max-h-[31rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7">
+    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+        <f-label v-if="label" :required="false" :value="label"></f-label>
+        <div class="relative flex-none flex">
+            <div
+                :class="[fieldHeight, fieldAppearance, selectAppearance]"
+                class="form-select flex items-center w-full"
+                @click="visible = !visible"
+                v-text="`${modelValue.length} Einträge ausgewählt`"
+            ></div>
+            <div v-show="visible" class="absolute w-[max-content] z-30 max-h-[25rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7">
                 <div v-for="(option, index) in parsedOptions" :key="index" class="flex items-center space-x-2">
-                    <f-switch :id="`${id}-${index}`" size="sm" :model-value="modelValue.includes(option.id)"
-                        :value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
+                    <f-switch :id="`${id}-${index}`" size="sm" :model-value="modelValue.includes(option.id)" :value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
                     <div class="text-sm text-gray-200" v-text="option.name"></div>
                 </div>
             </div>
-
-            <div class="info-wrap">
-                <div v-if="hint" v-tooltip="hint">
-                    <ui-sprite src="info-button" class="info-button"></ui-sprite>
-                </div>
-                <div v-if="size != 'xs'" class="px-1 relative">
-                    <ui-sprite class="chevron w-3 h-3 fill-current" src="chevron"></ui-sprite>
-                </div>
-                <div v-if="size == 'xs'" class="px-1 relative">
-                    <ui-sprite class="chevron w-2 h-2 fill-current" src="chevron"></ui-sprite>
-                </div>
-            </div>
         </div>
     </label>
 </template>
 
-<script>
+<script setup>
 import map from 'lodash/map';
+import {ref, computed} from 'vue';
+import useFieldSize from '../../composables/useFieldSize';
 
-export default {
-    props: {
-        disabled: {
-            type: Boolean,
-            default: function () {
-                return false;
-            },
-        },
-        id: {},
-        inset: {
-            type: Boolean,
-            default: false,
-        },
-        size: {
-            default: function () {
-                return 'base';
-            },
-        },
-        emptyLabel: {
-            default: false,
-            type: Boolean,
-        },
-        modelValue: {
-            default: undefined,
-        },
-        label: {
-            default: null,
-        },
-        required: {
-            type: Boolean,
-            default: false,
-        },
-        name: {
-            required: true,
-        },
-        hint: {},
-        options: {
-            default: function () {
-                return [];
-            },
-        },
-    },
-    emits: ['update:modelValue'],
-    data: function () {
-        return {
-            visible: false,
-        };
-    },
-    computed: {
-        parsedOptions() {
-            return Array.isArray(this.options)
-                ? this.options
-                : map(this.options, (value, key) => {
-                    return { name: value, id: key };
-                });
-        },
-    },
-    methods: {
-        trigger(option, v) {
-            var value = [...this.modelValue];
+const {fieldHeight, fieldAppearance, paddingX, sizeClass, selectAppearance} = useFieldSize();
 
-            this.$emit('update:modelValue', value.includes(option.id) ? value.filter((cv) => cv !== option.id) : [...value, option.id]);
-        },
-        clear() {
-            this.$emit('update:modelValue', null);
-        },
-    },
-};
-</script>
+const emit = defineEmits(['update:modelValue']);
 
-<style scope>
-.inset-bg {
-    background: linear-gradient(to bottom, hsl(247.5, 66.7%, 97.6%) 0%, hsl(247.5, 66.7%, 97.6%) 41%, hsl(0deg 0% 100%) 41%, hsl(180deg 0% 100%) 100%);
+const props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    size: {
+        type: String,
+        default: () => 'base',
+    },
+    modelValue: {
+        validator: (v) => Array.isArray(v),
+        required: true,
+    },
+    label: {
+        type: String,
+        default: () => '',
+    },
+    options: {
+        validator: (v) => Array.isArray(v),
+        default: () => [],
+    },
+});
+
+const visible = ref(false);
+const parsedOptions = computed(() =>
+    Array.isArray(props.options)
+        ? props.options
+        : map(props.options, (value, key) => {
+              return {name: value, id: key};
+          })
+);
+function trigger(option, v) {
+    var value = JSON.parse(JSON.stringify(props.modelValue));
+
+    emit('update:modelValue', value.includes(option.id) ? value.filter((cv) => cv !== option.id) : [...value, option.id]);
 }
-</style>
+</script>

resources/js/components/form/Select.vue

@@ -2,7 +2,7 @@
     <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
         <f-label v-if="label" :required="required" :value="label"></f-label>
         <div class="relative flex-none flex">
-            <select v-model="inner" :disabled="disabled" :name="name" :class="[fieldHeight, fieldAppearance]" class="py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full">
+            <select v-model="inner" :disabled="disabled" :name="name" :class="[fieldHeight, fieldAppearance, selectAppearance]">
                 <option v-if="placeholder" :value="def">{{ placeholder }}</option>
                 <option v-for="option in parsedOptions" :key="option.id" :value="option.id">{{ option.name }}</option>
             </select>
@@ -16,7 +16,7 @@ import {computed, ref} from 'vue';
 import useFieldSize from '../../composables/useFieldSize.js';
 import map from 'lodash/map';
 
-const {fieldHeight, fieldAppearance, sizeClass} = useFieldSize();
+const {fieldHeight, fieldAppearance, selectAppearance, sizeClass} = useFieldSize();
 
 const emit = defineEmits(['update:modelValue']);
 

resources/js/composables/useFieldSize.js

@@ -13,6 +13,7 @@ export default function () {
 
     const paddingX = 'group-[.field-base]:px-2 group-[.field-sm]:px-1';
     const paddingY = 'group-[.field-base]:py-2 group-[.field-sm]:py-1';
+    const selectAppearance = 'py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full';
 
     return {
         fieldHeight,
@@ -20,5 +21,6 @@ export default function () {
         paddingX,
         paddingY,
         sizeClass,
+        selectAppearance,
     };
 }

resources/js/views/form/Conditions.vue

@@ -39,7 +39,6 @@
                 :id="`value-${index}`"
                 v-model="condition.value"
                 :options="getOptions(condition.field)"
-                :name="`value-${index}`"
                 label="Wert"
             ></f-multipleselect>
             <f-switch

resources/js/views/form/Participants.vue

@@ -11,7 +11,7 @@
         </ui-popup>
         <page-filter breakpoint="lg">
             <f-switch v-if="meta.has_nami_field" id="group_participants" v-model="groupParticipants" label="Gruppieren" size="sm" name="group_participants"></f-switch>
-            <f-multipleselect id="active_columns" v-model="activeColumnsConfig" :options="meta.columns" label="Aktive Spalten" size="sm" name="active_columns"></f-multipleselect>
+            <f-multipleselect id="active_columns" v-model="activeColumnsConfig" :options="meta.columns" label="Aktive Spalten" size="sm"></f-multipleselect>
 
             <template v-for="(filter, index) in meta.filters">
                 <f-select

resources/js/views/invoice/Index.vue

@@ -79,7 +79,6 @@
                 :model-value="getFilter('statuses')"
                 label="Status"
                 size="sm"
-                name="group_ids"
                 @update:model-value="setFilter('statuses', $event)"
             ></f-multipleselect>
         </page-filter>

resources/js/views/maildispatcher/MaildispatcherForm.vue

@@ -18,7 +18,6 @@
                     <f-multipleselect
                         id="activity_ids"
                         v-model="model.filter.activity_ids"
-                        name="activity_ids"
                         :options="members.meta.filterActivities"
                         label="Tätigkeit"
                         size="sm"
@@ -27,7 +26,6 @@
                     <f-multipleselect
                         id="subactivity_ids"
                         v-model="model.filter.subactivity_ids"
-                        name="subactivity_ids"
                         :options="members.meta.filterSubactivities"
                         label="Unterttätigkeit"
                         size="sm"
@@ -36,7 +34,6 @@
                     <f-multipleselect
                         id="include"
                         v-model="model.filter.include"
-                        name="include"
                         :options="members.meta.members"
                         label="Zusätzliche Mitglieder"
                         size="sm"
@@ -45,21 +42,12 @@
                     <f-multipleselect
                         id="exclude"
                         v-model="model.filter.exclude"
-                        name="exclude"
                         :options="members.meta.members"
                         label="Mitglieder ausschließen"
                         size="sm"
                         @update:model-value="reload(1)"
                     ></f-multipleselect>
-                    <f-multipleselect
-                        id="groupIds"
-                        v-model="model.filter.group_ids"
-                        name="groupIds"
-                        :options="members.meta.groups"
-                        label="Gruppierungen"
-                        size="sm"
-                        @update:model-value="reload(1)"
-                    ></f-multipleselect>
+                    <f-multipleselect id="groupIds" v-model="model.filter.group_ids" :options="members.meta.groups" label="Gruppierungen" size="sm" @update:model-value="reload(1)"></f-multipleselect>
                 </div>
             </ui-box>
             <ui-box v-if="members !== null" heading="Mitglieder">

resources/js/views/member/VIndex.vue

@@ -24,30 +24,9 @@
                 <span class="hidden xl:inline">Hinzufügen</span>
             </button>
             <div v-for="(filter, index) in membershipFilters" :key="index" class="flex space-x-2 mt-2">
-                <f-multipleselect
-                    :id="`group_ids-multiple-${index}`"
-                    v-model="filter.group_ids"
-                    :options="meta.groups"
-                    label="Gruppierung"
-                    size="sm"
-                    :name="`group_ids-multiple-${index}`"
-                ></f-multipleselect>
-                <f-multipleselect
-                    :id="`activity_ids-multiple-${index}`"
-                    v-model="filter.activity_ids"
-                    :options="meta.filterActivities"
-                    label="Tätigkeiten"
-                    size="sm"
-                    :name="`activity_ids-multiple-${index}`"
-                ></f-multipleselect>
-                <f-multipleselect
-                    :id="`subactivity_ids-multiple-${index}`"
-                    v-model="filter.subactivity_ids"
-                    :options="meta.filterSubactivities"
-                    label="Untertätigkeiten"
-                    size="sm"
-                    :name="`subactivity_ids-multiple-${index}`"
-                ></f-multipleselect>
+                <f-multipleselect :id="`group_ids-multiple-${index}`" v-model="filter.group_ids" :options="meta.groups" label="Gruppierung" size="sm"></f-multipleselect>
+                <f-multipleselect :id="`activity_ids-multiple-${index}`" v-model="filter.activity_ids" :options="meta.filterActivities" label="Tätigkeiten" size="sm"></f-multipleselect>
+                <f-multipleselect :id="`subactivity_ids-multiple-${index}`" v-model="filter.subactivity_ids" :options="meta.filterSubactivities" label="Untertätigkeiten" size="sm"></f-multipleselect>
             </div>
             <button
                 class="btn btn-primary label mt-3"
@@ -68,7 +47,6 @@
                 :model-value="getFilter('group_ids')"
                 label="Gruppierungen"
                 size="sm"
-                name="group_ids"
                 @update:model-value="setFilter('group_ids', $event)"
             ></f-multipleselect>
             <f-select