silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: silva:94bb663ae1222425e470657e5f4ef91a86c347a7
Branches Tags
silva:master
silva:dev
..
compare: silva:d84c48e0fa422bbc4f3676724d73eaea524eb173
Branches Tags
silva:master
silva:dev

No commits in common. "94bb663ae1222425e470657e5f4ef91a86c347a7" and "d84c48e0fa422bbc4f3676724d73eaea524eb173" have entirely different histories.
94bb663ae1 ... d84c48e0fa

11 changed files with 35 additions and 324 deletions
Show Stats Expand all files Collapse all files

10
index.html
View File

@ -7,13 +7,11 @@
</head> </head>
<body style="padding: 50px"> <body style="padding: 50px">
<event-form <event-form
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)" style="--primary: yellow; --secondary: green; --font: #ff6600; --circle: #111111"
value='{"sections": [ value='{"sections": [
{"name": "Personal", "intro": "Jaöaöd", "fields": [ {"name": "Personal", "intro": "Jaöaöd", "fields": [
{"name": "Vorname", "type": "TextField", "columns": {"mobile": 1, "tablet": 2, "desktop": 3}, "default": "", "required": true}, {"name": "Vorname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true},
{"name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 1, "tablet": 2, "desktop": 3}, "default": [], "required": true, "options": ["lal", "fff", "ccc"]}, {"name": "Geschlecht", "type": "SelectField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"name": "Datenschutz", "description": "Ich akzeptire das abfghg", "type": "CheckboxField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": false, "required": true},
{"name": "Geschlecht", "type": "DropdownField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"name": "Essgewohnheiten", "type": "RadioField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]}, {"name": "Essgewohnheiten", "type": "RadioField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"name": "Nachname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true} {"name": "Nachname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true}
]}, ]},
@ -22,8 +20,6 @@
{"name": "Abschicken", "intro": "Jaöaöd", "fields": [ {"name": "Abschicken", "intro": "Jaöaöd", "fields": [
]} ]}
]}' ]}'
fields='[{"id":"TextField","name":"Text","default":{"name":"","type":"TextField","columns":{"mobile":2,"tablet":4,"desktop":12},"default":"","required":false}}]'
editable
></event-form> ></event-form>
<script type="module" src="src/main.js"></script> <script type="module" src="src/main.js"></script>
</body> </body>

110
src/Eventform.ce.vue
View File

@ -2,11 +2,11 @@
<div> <div>
<form v-if="loaded" novalidate @submit.prevent="submit"> <form v-if="loaded" novalidate @submit.prevent="submit">
<div x-ref="eventFormContainer" class="bg-white rounded-lg shadow-lg" x-show="finished === false"> <div x-ref="eventFormContainer" class="bg-white rounded-lg shadow-lg" x-show="finished === false">
<div class="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg h-12 md:h-16"> <div class="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg">
<template v-for="(section, index) in v.sections"> <template v-for="(section, index) in v.sections">
<a <a
href="#" href="#"
class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-full transition duration-300 relative" class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative"
:class="{'bg-primary': index <= active, 'bg-secondary': index > active}" :class="{'bg-primary': index <= active, 'bg-secondary': index > active}"
@click.prevent="active = index" @click.prevent="active = index"
> >
@ -20,41 +20,27 @@
</svg> </svg>
<span class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span> <span class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span>
<span class="text-sm text-font ml-2" v-html="section.name"></span> <span class="text-sm text-font ml-2" v-html="section.name"></span>
<div v-if="editable" class="hidden md:flex items-center h-full">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)">
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
</a>
</div>
</a> </a>
</template> </template>
<div v-if="editable" class="hidden md:flex items-center h-full absolute right-0 mr-6">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font" @click.prevent.stop="$emit('addSection')">
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
<path
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
/>
</svg>
</a>
</div>
</div> </div>
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg sm:hidden bg-secondary"> <div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg sm:hidden bg-secondary">
<a <a
@click.prevent="back"
href="#" href="#"
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none" class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
:class="{'opacity-40': !backable}" :class="{'opacity-40': !backable}"
@click.prevent="back"
> >
<svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001"> <svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" /> <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
</svg> </svg>
</a> </a>
<carousel v-model="active" class="grow"> <carousel v-model="active" class="grow">
<slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden"> <slide v-for="(section, index) in v.sections" class="relative flex flex-no-wrap overflow-hidden" :key="index">
<div class="flex-none w-full"> <div class="flex-none w-full">
<div <div
@click="active = index"
href="#" href="#"
class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative" class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative"
@click="active = index"
> >
<span class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span> <span class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
<span class="text-sm text-font" v-html="section.name"></span> <span class="text-sm text-font" v-html="section.name"></span>
@ -63,10 +49,10 @@
</slide> </slide>
</carousel> </carousel>
<a <a
@click.prevent="next"
href="#" href="#"
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none" class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
:class="{'opacity-40': !nextable}" :class="{'opacity-40': !nextable}"
@click.prevent="next"
> >
<svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001"> <svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" /> <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
@ -76,41 +62,11 @@
<div class="py-4 xs:py-8"> <div class="py-4 xs:py-8">
<carousel v-model="active"> <carousel v-model="active">
<slide v-for="(section, index) in v.sections" :key="index"> <slide :key="index" v-for="(section, index) in v.sections">
<div class="w-full flex-none px-3 xs:px-6"> <div class="w-full flex-none px-3 xs:px-6">
<div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div> <div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4 mt-6 items-start"> <div class="grid grid-cols-2 gap-4 mt-6 items-start">
<div <component :is="resolveComponentName(field)" :field="field" v-for="(field, findex) in section.fields" :key="findex" v-model="payload[field.key]"></component>
v-for="(field, findex) in section.fields"
:key="findex"
class="flex justify-stretch relative group"
:class="{
'hover:ring-edit hover:ring-4': editable,
[colClasses.mobile[field.columns.mobile]]: true,
[colClasses.tablet[field.columns.tablet]]: true,
[colClasses.desktop[field.columns.desktop]]: true,
}"
>
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :field="field"></component>
<div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
</a>
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteField', index, findex)">
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
</a>
</div>
</div>
</div>
<div v-if="editable" class="flex justify-center mt-6 relative">
<a href="#" class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font" @click.prevent="$emit('addField', index)">
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
<path
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
/>
</svg>
</a>
</div> </div>
</div> </div>
@ -130,56 +86,17 @@ import {camelCase} from 'change-case';
import Navigation from './components/Navigation.vue'; import Navigation from './components/Navigation.vue';
import useNav from './composables/useNav.js'; import useNav from './composables/useNav.js';
import FieldText from './components/fields/Text.vue'; import FieldText from './components/fields/Text.vue';
import FieldTextarea from './components/fields/Textarea.vue'; import FieldSelect from './components/fields/Select.vue';
import FieldDropdown from './components/fields/Dropdown.vue';
import FieldCheckboxes from './components/fields/Checkboxes.vue';
import FieldCheckbox from './components/fields/Checkbox.vue';
import FieldRadio from './components/fields/Radio.vue'; import FieldRadio from './components/fields/Radio.vue';
import EditIcon from './components/icons/EditIcon.vue';
import DeleteIcon from './components/icons/DeleteIcon.vue';
const emits = defineEmits(['editSection']);
const colClasses = {
mobile: {
1: 'col-span-1',
2: 'col-span-2',
3: 'col-span-3',
4: 'col-span-4',
5: 'col-span-5',
6: 'col-span-6',
},
tablet: {
1: 'sm:col-span-1',
2: 'sm:col-span-2',
3: 'sm:col-span-3',
4: 'sm:col-span-4',
5: 'sm:col-span-5',
6: 'sm:col-span-6',
},
desktop: {
1: 'lg:col-span-1',
2: 'lg:col-span-2',
3: 'lg:col-span-3',
4: 'lg:col-span-4',
5: 'lg:col-span-5',
6: 'lg:col-span-6',
},
};
const props = defineProps({ const props = defineProps({
eventId: { eventId: {
type: Number, type: Number,
}, },
editable: {
type: Boolean,
default: () => false,
},
value: { value: {
type: String, type: String,
default: () => '{}', default: () => '{}',
}, },
fields: {},
}); });
const finished = ref(false); const finished = ref(false);
@ -188,19 +105,14 @@ const payload = ref({});
const loaded = ref(false); const loaded = ref(false);
const v = computed(() => JSON.parse(props.value)); const v = computed(() => JSON.parse(props.value));
const f = computed(() => JSON.parse(props.fields));
const addingFields = ref(false);
const {back, next, backable, nextable} = useNav(active, v.value.sections.length); const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
function resolveComponentName(field) { function resolveComponentName(field) {
return { return {
TextField: FieldText, TextField: FieldText,
TextareaField: FieldTextarea, SelectField: FieldSelect,
DropdownField: FieldDropdown,
RadioField: FieldRadio, RadioField: FieldRadio,
CheckboxesField: FieldCheckboxes,
CheckboxField: FieldCheckbox,
}[field.type]; }[field.type];
} }

43
src/components/fields/Checkbox.vue
View File

@ -1,43 +0,0 @@
<template>
<div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3">
<label :for="field.key" class="block relative flex items-center">
<input :id="field.key" v-model="inner" type="checkbox" :name="field.key" class="peer absolute invisible" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
<span class="pl-8 text-gray-600" v-text="field.description"></span>
</label>
</div>
<field-label :name="field.name" :required="field.required" inline></field-label>
</div>
</template>
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {
required: true,
validator: (value) => value === true || value === false,
},
field: {
required: true,
validator: (value) =>
hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default', 'description']) &&
typeof value.required === 'boolean' &&
typeof value.key === 'string' &&
value.key.length > 0 &&
typeof value.name === 'string' &&
typeof value.description === 'string' &&
value.name.length > 0,
},
});
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
</script>

44
src/components/fields/Checkboxes.vue
View File

@ -1,44 +0,0 @@
<template>
<div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3">
<label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-center">
<input :id="`${field.key}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option" class="peer absolute invisible" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
<span class="pl-8 text-gray-600" v-text="option"></span>
</label>
</div>
<field-label :name="field.name" :required="field.required" inline></field-label>
</div>
</template>
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {
required: true,
validator: (value) => Array.isArray(value),
},
field: {
required: true,
validator: (value) =>
hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default', 'options']) &&
typeof value.required === 'boolean' &&
typeof value.key === 'string' &&
value.key.length > 0 &&
typeof value.name === 'string' &&
value.name.length > 0 &&
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']) &&
typeof value.options === 'object',
},
});
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
</script>

4
src/components/fields/Radio.vue
View File

@ -2,10 +2,10 @@
<div class="relative"> <div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3"> <div class="grid grid-cols-1 gap-2 mt-3">
<label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-center"> <label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-center">
<input :id="`${field.key}-${index}`" v-model="inner" type="radio" :name="field.key" :value="option" class="peer absolute invisible" /> <input type="radio" :name="field.key" :value="option" v-model="inner" class="peer absolute invisible" :id="`${field.key}-${index}`" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span> <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span> <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
<span class="pl-8 text-gray-600" v-text="option"></span> <span class="pl-8" v-text="option"></span>
</label> </label>
</div> </div>

0
src/components/fields/Dropdown.vue → src/components/fields/Select.vue
View File

41
src/components/fields/Textarea.vue
View File

@ -1,41 +0,0 @@
<template>
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
<textarea
:id="field.key"
v-model="inner"
:name="field.key"
:rows="field.rows"
class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"
/>
<field-label :name="field.name" :required="field.required"></field-label>
</label>
</template>
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {
required: true,
validator: (value) => typeof value === 'string',
},
field: {
required: true,
validator: (value) =>
hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default']) &&
typeof value.required === 'boolean' &&
typeof value.key === 'string' &&
value.key.length > 0 &&
typeof value.name === 'string' &&
value.name.length > 0 &&
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
},
});
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
</script>

34
src/components/icons/DeleteIcon.vue
View File

@ -1,34 +0,0 @@
<template>
<svg
id="Capa_1"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 512 512"
style="enable-background: new 0 0 512 512"
xml:space="preserve"
>
<g>
<g>
<path
d="M486.4,102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36,0-25.6,10.24-25.6,25.6v76.8h-128
C10.24,102.4,0,112.64,0,128s10.24,25.6,25.6,25.6h460.8c15.36,0,25.6-10.24,25.6-25.6S501.76,102.4,486.4,102.4z M307.2,102.4
H204.8V51.2h102.4V102.4z"
/>
</g>
</g>
<g>
<g>
<path
d="M25.6,204.8l48.64,284.16c2.56,12.8,12.8,23.04,25.6,23.04h312.32c12.8,0,23.04-10.24,25.6-23.04L486.4,204.8H25.6z
M153.6,460.8c-15.36,0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6l25.6,153.6
C179.2,450.56,168.96,460.8,153.6,460.8z M281.6,435.2c0,15.36-10.24,25.6-25.6,25.6s-25.6-10.24-25.6-25.6V281.6
c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6V435.2z M384,435.2c0,15.36-10.24,25.6-25.6,25.6
c-15.36,0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6L384,435.2z"
/>
</g>
</g>
</svg>
</template>

29
src/components/icons/EditIcon.vue
View File

@ -1,29 +0,0 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 512 512"
style="enable-background: new 0 0 512 512"
xml:space="preserve"
>
<g>
<g>
<polygon points="51.2,353.28 0,512 158.72,460.8 " />
</g>
</g>
<g>
<g>
<rect x="89.73" y="169.097" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -95.8575 260.3719)" width="353.277" height="153.599" />
</g>
</g>
<g>
<g>
<path d="M504.32,79.36L432.64,7.68c-10.24-10.24-25.6-10.24-35.84,0l-23.04,23.04l107.52,107.52l23.04-23.04 C514.56,104.96,514.56,89.6,504.32,79.36z" />
</g>
</g>
</svg>
</template>

3
tailwind.config.js
View File

@ -4,9 +4,6 @@ export default {
theme: { theme: {
extend: { extend: {
colors: { colors: {
edit: {
DEFAULT: 'hsl(20, 77%, 55%)',
},
primary: { primary: {
DEFAULT: 'var(--primary)', DEFAULT: 'var(--primary)',
}, },

41
vite.config.js
View File

@ -1,28 +1,25 @@
import {defineConfig} from 'vite'; import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue'; import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue({ vue({
template: { template: {
compilerOptions: { compilerOptions: {
isCustomElement: (tag) => tag.includes('event-form'), isCustomElement: (tag) => tag.includes("event-form"),
},
},
}),
],
build: {
lib: {
entry: './src/main.js',
name: 'main',
fileName: 'main',
}, },
},
}),
],
build: {
lib: {
entry: "./src/main.js",
name: "main",
fileName: "main",
}, },
define: { },
'process.env': process.env, define: {
}, "process.env": process.env,
server: { },
port: 5174,
},
}); });