From b15b806948240e8cb7e87a6e4a8ff237674c6760 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Fri, 28 Jun 2024 15:50:40 +0200
Subject: [PATCH] Remove switch and form css

---
 resources/css/app.css                         |   2 -
 resources/css/form.css                        | 313 ------------------
 resources/css/switch.css                      | 116 -------
 .../js/components/form/Multipleselect.vue     |   2 +-
 resources/js/components/form/Switch.vue       | 216 ++++++------
 5 files changed, 95 insertions(+), 554 deletions(-)
 delete mode 100644 resources/css/form.css
 delete mode 100644 resources/css/switch.css

diff --git a/resources/css/app.css b/resources/css/app.css
index 28279b99..f7ca8c23 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -3,10 +3,8 @@
 @import 'tailwindcss/utilities';
 
 @import 'base.css';
-@import 'switch';
 @import 'layout';
 @import 'buttons';
 @import 'table';
 @import 'bool';
-@import 'form';
 @import 'editor';
diff --git a/resources/css/form.css b/resources/css/form.css
deleted file mode 100644
index cd23a5c3..00000000
--- a/resources/css/form.css
+++ /dev/null
@@ -1,313 +0,0 @@
-:root {
-    --h-field-sm: 23px;
-    --h-field-base: 35px;
-    --h-field-lg: 42px;
-    --m-field-sm: 0.2rem;
-    --m-field-base: 0.3rem;
-    --m-field-lg: 0.4rem;
-}
-.size-sm {
-    height: var(--h-field-sm);
-}
-.size-base {
-    height: var(--h-field-base);
-}
-.size-lg {
-    height: var(--h-field-lg);
-}
-
-.checkbox {
-    @apply flex flex-col relative cursor-pointer;
-    input[type="checkbox"] {
-        @apply invisible absolute;
-        & + span {
-            @apply transition-colors duration-300 flex items-center;
-            span {
-                @apply border-2 border-gray-800 relative rounded cursor-pointer flex flex-none justify-center items-center;
-            }
-            svg {
-                @apply text-white transition-opacity duration-300;
-                opacity: 0;
-            }
-            & + span {
-                a {
-                    @apply text-primary-300;
-                }
-            }
-        }
-        &:checked + span svg {
-            opacity: 1;
-        }
-    }
-    &.size-sm {
-        height: auto;
-        input[type="checkbox"] {
-            & + span {
-                min-height: var(--h-field-sm);
-                span {
-                    width: var(--h-field-sm);
-                    height: var(--h-field-sm);
-                }
-                svg {
-                    width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
-                    height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
-                }
-            }
-            & + span + span {
-                min-height: var(--h-field-sm);
-            }
-        }
-    }
-    &.size-base {
-        height: auto;
-        input[type="checkbox"] {
-            & + span {
-                min-height: var(--h-field-base);
-                span {
-                    width: var(--h-field-base);
-                    height: var(--h-field-base);
-                }
-                svg {
-                    width: calc(var(--h-field-base) - var(--m-field-base) * 2);
-                    height: calc(var(--h-field-base) - var(--m-field-base) * 2);
-                }
-            }
-            & + span + span {
-                min-height: var(--h-field-base);
-            }
-        }
-    }
-    &.size-lg {
-        height: auto;
-        input[type="checkbox"] {
-            & + span {
-                min-height: var(--h-field-lg);
-                span {
-                    width: var(--h-field-lg);
-                    height: var(--h-field-lg);
-                }
-                svg {
-                    width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
-                    height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
-                }
-            }
-            & + span + span {
-                min-height: var(--h-field-lg);
-            }
-        }
-    }
-}
-
-.field-wrap {
-    @apply flex flex-col;
-
-    .field-label {
-        @apply font-semibold leading-none text-gray-400;
-    }
-
-    .real-field-wrap {
-        @apply relative flex-none flex;
-    }
-
-    .info-wrap {
-        @apply h-full items-center flex;
-        &:not(.info-wrap-inline) {
-            @apply absolute top-0 right-0;
-        }
-        &.info-wrap-inline {
-            @apply ml-2;
-        }
-        .info-button {
-            @apply text-primary-700;
-        }
-        svg.chevron {
-            @apply text-gray-400;
-        }
-    }
-
-    input:not([type="checkbox"]):not([type="color"]), select {
-        @apply border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg;
-        &:disabled {
-            @apply bg-gray-400;
-        }
-    }
-    .switch {
-        input[type="checkbox"] {
-            @apply invisible absolute;
-            & + span {
-                @apply rounded transition-colors duration-300 relative cursor-pointer flex grow h-full;
-                span {
-                    @apply absolute flex items-center justify-center;
-                }
-                var {
-                    @apply duration-300;
-                    transition-property: left;
-                }
-            }
-        }
-    }
-
-    &.field-wrap-sm {
-        .field-label {
-            @apply text-xs;
-        }
-        input:not([type="checkbox"]), select, input:not([type="color"]) {
-            @apply size-sm text-xs px-1 border;
-        }
-        input[type="color"] {
-            @apply size-sm px-0;
-        }
-        select {
-            @apply pr-6;
-        }
-        .switch {
-            width: calc(var(--h-field-sm) * 2);
-            input[type="checkbox"] {
-                & + span {
-                    span:nth-of-type(1) {
-                        width: calc(var(--h-field-sm) - var(--m-field-sm));
-                        height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
-                        top: var(--m-field-sm);
-                        left: var(--m-field-sm);
-                    }
-                    span:nth-of-type(2) {
-                        width: calc(var(--h-field-sm) - var(--m-field-sm));
-                        height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
-                        top: var(--m-field-sm);
-                        left: calc(100% - var(--h-field-sm));
-                    }
-                    var {
-                        width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
-                        height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
-                        top: var(--m-field-sm);
-                        left: var(--m-field-sm);
-                    }
-                    svg {
-                        @apply w-2 h-2;
-                    }
-                }
-                &:checked + span var {
-                    left: calc(var(--h-field-sm) + var(--m-field-sm));
-                }
-            }
-        }
-        .info-wrap {
-            @apply mr-1;
-            .info-button {
-                @apply w-4 h-4;
-            }
-        }
-    }
-
-    &.field-wrap-base {
-        .field-label {
-            @apply text-sm;
-        }
-        input:not([type="checkbox"]):not([type="color"]), select {
-            @apply size-base text-sm px-2 border-2;
-        }
-        input[type="color"] {
-            @apply size-base px-0;
-        }
-        .switch {
-            width: calc(var(--h-field-base) * 2);
-            input[type="checkbox"] {
-                & + span {
-                    span:nth-of-type(1) {
-                        width: calc(var(--h-field-base) - var(--m-field-base));
-                        height: calc(var(--h-field-base) - var(--m-field-base) * 2);
-                        top: var(--m-field-base);
-                        left: var(--m-field-base);
-                    }
-                    span:nth-of-type(2) {
-                        width: calc(var(--h-field-base) - var(--m-field-base));
-                        height: calc(var(--h-field-base) - var(--m-field-base) * 2);
-                        top: var(--m-field-base);
-                        left: calc(100% - var(--h-field-base));
-                    }
-                    var {
-                        width: calc(var(--h-field-base) - var(--m-field-base) * 2);
-                        height: calc(var(--h-field-base) - var(--m-field-base) * 2);
-                        top: var(--m-field-base);
-                        left: var(--m-field-base);
-                    }
-                    svg {
-                        @apply w-3 h-3;
-                    }
-                }
-                &:checked + span var {
-                    left: calc(var(--h-field-base) + var(--m-field-base));
-                }
-            }
-        }
-        .info-wrap {
-            @apply mr-2;
-            .info-button {
-                @apply w-5 h-5;
-            }
-        }
-    }
-
-    &.field-wrap-lg {
-        .field-label {
-            @apply text-sm;
-        }
-        input:not([type="checkbox"]):not([type="color"]), select {
-            @apply size-lg px-3 border-2;
-        }
-        input[type="color"] {
-            @apply size-lg px-0;
-        }
-        .switch {
-            width: calc(var(--h-field-lg) * 2);
-            input[type="checkbox"] {
-                & + span {
-                    span:nth-of-type(1) {
-                        width: calc(var(--h-field-lg) - var(--m-field-lg));
-                        height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
-                        top: var(--m-field-lg);
-                        left: var(--m-field-lg);
-                    }
-                    span:nth-of-type(2) {
-                        width: calc(var(--h-field-lg) - var(--m-field-lg));
-                        height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
-                        top: var(--m-field-lg);
-                        left: calc(100% - var(--h-field-lg));
-                    }
-                    var {
-                        width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
-                        height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
-                        top: var(--m-field-lg);
-                        left: var(--m-field-lg);
-                    }
-                    svg {
-                        @apply w-5 h-5;
-                    }
-                }
-                &:checked + span var {
-                    left: calc(var(--h-field-lg) + var(--m-field-lg));
-                }
-            }
-        }
-        .info-wrap {
-            @apply mr-3;
-            .info-button {
-                @apply w-6 h-6;
-            }
-        }
-    }
-
-}
-
-.pointer-events-none {
-    pointer-events: none;
-}
-
-input:disabled, selct:disabled {
-    @apply bg-gray-400;
-}
-
-.justify-self-end {
-    justify-self: end;
-}
-
diff --git a/resources/css/switch.css b/resources/css/switch.css
deleted file mode 100644
index 6d70c6c3..00000000
--- a/resources/css/switch.css
+++ /dev/null
@@ -1,116 +0,0 @@
-:root {
-    --margin: 0.2rem;
-    --n-width: 37px;
-    --sm-width: 35px;
-    --sm-margin: 0.2rem;
-    --xs-width: 23px;
-    --xs-margin: 0.2rem;
-}
-
-.bg-switch {
-    @apply bg-primary-700;
-}
-
-.field-switch {
-    input:checked + span {
-        transition: background 0.3s;
-    }
-
-    .display {
-        width: calc(var(--n-width) * 2);
-        height: var(--n-width);
-        border-radius: 0.3rem;
-        var {
-            width: calc(var(--n-width) - var(--margin) * 2);
-            height: calc(var(--n-width) - var(--margin) * 2);
-            top: var(--margin);
-            left: var(--margin);
-            transition: left 0.3s;
-        }
-        & > span:nth-of-type(1) {
-            position: absolute;
-            width: calc(var(--n-width) - var(--margin));
-            height: calc(var(--n-width) - var(--margin) * 2);
-            top: var(--margin);
-            left: var(--margin);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        & > span:nth-of-type(2) {
-            position: absolute;
-            width: calc(var(--n-width) - var(--margin));
-            height: calc(var(--n-width) - var(--margin) * 2);
-            top: var(--margin);
-            left: calc(100% - var(--n-width));
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-    }
-
-    input:checked + .display var {
-        left: calc(var(--n-width) + var(--margin));
-        transition: left 0.3s;
-    }
-
-    /* --------------------------------- small size ---------------------------------- */
-    .inner-field.h-field-sm {
-        input:checked + .display var {
-            left: calc(var(--sm-width) + var(--sm-margin));
-        }
-
-        .display {
-            width: calc(var(--sm-width) * 2);
-            height: var(--sm-width);
-            var {
-                width: calc(var(--sm-width) - var(--sm-margin) * 2);
-                height: calc(var(--sm-width) - var(--sm-margin) * 2);
-                top: var(--sm-margin);
-                left: var(--sm-margin);
-            }
-            & > span:nth-of-type(1) {
-                width: calc(var(--sm-width) - var(--sm-margin));
-                height: calc(var(--sm-width) - var(--sm-margin) * 2);
-                top: var(--sm-margin);
-                left: var(--sm-margin);
-            }
-            & > span:nth-of-type(2) {
-                width: calc(var(--sm-width) - var(--sm-margin));
-                height: calc(var(--sm-width) - var(--sm-margin) * 2);
-                top: var(--sm-margin);
-                left: calc(100% - var(--sm-width));
-            }
-        }
-    }
-
-    /* ------------------------------ very small size -------------------------------- */
-    .inner-field.h-field-xs {
-        input:checked + .display var {
-            left: calc(var(--xs-width) + var(--xs-margin));
-        }
-
-        .display {
-            width: calc(var(--xs-width) * 2);
-            height: var(--xs-width);
-            var {
-                width: calc(var(--xs-width) - var(--xs-margin) * 2);
-                height: calc(var(--xs-width) - var(--xs-margin) * 2);
-                top: var(--xs-margin);
-                left: var(--xs-margin);
-            }
-            & > span:nth-of-type(1) {
-                width: calc(var(--xs-width) - var(--xs-margin));
-                height: calc(var(--xs-width) - var(--xs-margin) * 2);
-                top: var(--xs-margin);
-                left: var(--xs-margin);
-            }
-            & > span:nth-of-type(2) {
-                width: calc(var(--xs-width) - var(--xs-margin));
-                height: calc(var(--xs-width) - var(--xs-margin) * 2);
-                top: var(--xs-margin);
-                left: calc(100% - var(--xs-width));
-            }
-        }
-    }
-}
diff --git a/resources/js/components/form/Multipleselect.vue b/resources/js/components/form/Multipleselect.vue
index 3eea13a9..c0d9525e 100644
--- a/resources/js/components/form/Multipleselect.vue
+++ b/resources/js/components/form/Multipleselect.vue
@@ -8,7 +8,7 @@
                 @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-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 space-y-1">
                 <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>
                     <div class="text-sm text-gray-200" v-text="option.name"></div>
diff --git a/resources/js/components/form/Switch.vue b/resources/js/components/form/Switch.vue
index 6944bfa2..4c2329b1 100644
--- a/resources/js/components/form/Switch.vue
+++ b/resources/js/components/form/Switch.vue
@@ -1,130 +1,102 @@
 <template>
-    <label
-        class="flex relative field-switch cursor-pointer"
-        :for="id"
-        :class="{
-            'items-center flex-row-reverse space-x-3 space-x-reverse justify-end': inline,
-            'flex-col': !inline,
-            [sizes[size].wrap]: true,
-        }"
-    >
-        <span
-            v-if="label"
-            class="font-semibold leading-none text-gray-400"
-            :class="{
-                'text-xs': size == 'sm',
-                'text-sm': size === 'base',
-            }"
-            >{{ label }}</span
-        >
-        <div class="relative flex items-center inner-field mt-1" :class="`h-field-${fieldSize}`">
-            <span>
-                <input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer" @keypress="$emit('keypress', $event)" />
-                <span class="relative cursor-pointer peer-focus:bg-red-500 flex grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
-                    <span><ui-sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === 'base'}" src="check"></ui-sprite></span>
-                    <span><ui-sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === 'base'}" src="close"></ui-sprite></span>
-                    <var class="absolute overlay bg-gray-400 rounded top-0"></var>
-                </span>
-            </span>
-            <div v-if="hint" class="ml-2 info-wrap">
-                <div v-tooltip="hint">
-                    <ui-sprite src="info-button" class="info-button w-4 h-4 text-primary-700"></ui-sprite>
-                </div>
-            </div>
-        </div>
+    <label class="flex flex-col items-start group" :for="id" :class="sizeClass(size)">
+        <f-label v-if="label" :required="false" :value="label"></f-label>
+        <span class="relative flex-none flex" :class="{'pr-8': hint, [fieldHeight]: true}">
+            <input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer invisible" @keypress="$emit('keypress', $event)" />
+            <span
+                class="relative cursor-pointer h-full rounded peer-focus:bg-red-500 transition-all duration-300 group-[.field-base]:w-[70px] group-[.field-sm]:w-[46px] bg-gray-700 peer-checked:bg-primary-700"
+            ></span>
+            <span class="absolute h-full top-0 left-0 flex-none flex justify-center items-center aspect-square">
+                <ui-sprite
+                    class="relative text-gray-400 flex-none text-white duration-300 group-[.field-base]:w-3 group-[.field-base]:h-3 group-[.field-sm]:w-2 group-[.field-sm]:h-2"
+                    src="check"
+                ></ui-sprite
+            ></span>
+            <span class="absolute h-full top-0 group-[.field-base]:left-[35px] group-[.field-sm]:left-[23px] flex-none flex justify-center items-center aspect-square">
+                <ui-sprite
+                    class="relative text-gray-400 flex-none text-white duration-300 group-[.field-base]:w-3 group-[.field-base]:h-3 group-[.field-sm]:w-2 group-[.field-sm]:h-2"
+                    src="close"
+                ></ui-sprite
+            ></span>
+            <var
+                class="absolute transition-all duration-300 bg-gray-400 rounded group-[.field-base]:top-[3px] group-[.field-base]:left-[3px] group-[.field-sm]:top-[2px] group-[.field-sm]:left-[2px] group-[.field-base]:w-[29px] group-[.field-sm]:w-[19px] group-[.field-base]:h-[29px] group-[.field-sm]:h-[19px] group-[.field-base]:peer-checked:left-[37px] group-[.field-sm]:peer-checked:left-[25px]"
+            ></var>
+            <f-hint v-if="hint" :value="hint"></f-hint>
+        </span>
     </label>
 </template>
 
-<script>
-export default {
-    props: {
-        hint: {
-            default: null,
-        },
-        inline: {
-            default: false,
-            type: Boolean,
-        },
-        size: {
-            default: 'base',
-            required: false,
-        },
-        id: {
-            required: true,
-        },
-        name: {
-            default: '',
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        value: {
-            default: false,
-        },
-        label: {
-            default: false,
-        },
-        modelValue: {
-            default: undefined,
-        },
+<script setup>
+import {computed} from 'vue';
+import useFieldSize from '../../composables/useFieldSize.js';
+
+const {sizeClass, fieldHeight} = useFieldSize();
+
+const emit = defineEmits(['update:modelValue', 'keypress']);
+
+const props = defineProps({
+    hint: {
+        type: String,
+        default: () => '',
     },
-    emits: ['update:modelValue', 'keypress'],
-    data: function () {
-        return {
-            sizes: {
-                sm: {
-                    wrap: 'field-wrap-sm',
-                    field: 'size-sm',
-                },
-                base: {
-                    wrap: 'field-wrap-base',
-                    field: 'size-base',
-                },
-                lg: {
-                    wrap: 'field-wrap-lg',
-                    field: 'size-lg',
-                },
-            },
-        };
+    size: {
+        type: String,
+        default: () => 'base',
     },
-    computed: {
-        v: {
-            set(v) {
-                if (this.disabled === true) {
-                    return;
-                }
-
-                if (typeof this.modelValue === 'boolean') {
-                    this.$emit('update:modelValue', v);
-                    return;
-                }
-
-                var a = this.modelValue.filter((i) => i !== this.value);
-                if (v) {
-                    a.push(this.value);
-                }
-
-                this.$emit('update:modelValue', a);
-            },
-            get() {
-                if (typeof this.modelValue === 'boolean') {
-                    return this.modelValue;
-                }
-
-                if (typeof this.modelValue === 'undefined') {
-                    return this.$emit('update:modelValue', false);
-                }
-
-                return this.modelValue.indexOf(this.value) !== -1;
-            },
-        },
-        fieldSize() {
-            var sizes = ['xxs', 'xs', 'sm', 'md', 'lg'];
-
-            var sizeIndex = sizes.findIndex((s) => s === this.size);
-            return sizes[sizeIndex - 1];
-        },
+    id: {
+        type: String,
+        required: true,
     },
-};
+    name: {
+        required: true,
+        type: String,
+    },
+    disabled: {
+        type: Boolean,
+        default: () => false,
+    },
+    value: {
+        validator: (v) => true,
+        default: () => undefined,
+    },
+    label: {
+        type: String,
+        default: () => '',
+    },
+    modelValue: {
+        validator: (v) => true,
+        default: () => undefined,
+    },
+});
+
+const v = computed({
+    set: (v) => {
+        if (props.disabled === true) {
+            return;
+        }
+
+        if (typeof props.modelValue === 'boolean') {
+            emit('update:modelValue', v);
+            return;
+        }
+
+        var a = props.modelValue.filter((i) => i !== this.value);
+        if (v) {
+            a.push(this.value);
+        }
+
+        emit('update:modelValue', a);
+    },
+    get() {
+        if (typeof props.modelValue === 'boolean') {
+            return props.modelValue;
+        }
+
+        if (typeof props.modelValue === 'undefined') {
+            return emit('update:modelValue', false);
+        }
+
+        return props.modelValue.indexOf(props.value) !== -1;
+    },
+});
 </script>