Compare commits
13 Commits
| Author | SHA1 | Date |
|---|---|---|
philipp lang
|
e4fa326f35 | |
|
philipp lang
|
a6ca0d2a6c | |
|
philipp lang
|
a4a2a2b3fd | |
|
philipp lang
|
54efebf12e | |
|
philipp lang
|
38d56d1285 | |
|
philipp lang
|
768cf47bd3 | |
|
philipp lang
|
4dd0fc4c4b | |
|
philipp lang
|
c0a18e8ee1 | |
|
philipp lang
|
0c0961dac4 | |
|
philipp lang
|
25d36a53ce | |
|
philipp lang
|
bd4118040f | |
|
philipp lang
|
41adb7ecb0 | |
|
philipp lang
|
bf94349dca |
211
index.html
211
index.html
|
|
@ -6,167 +6,72 @@
|
|||
<title>Vite + Vue</title>
|
||||
<meta name="adrema_base_url" content="/" />
|
||||
</head>
|
||||
<body style="padding: 50px">
|
||||
<body>
|
||||
<event-form
|
||||
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
|
||||
value='{"sections":[
|
||||
{
|
||||
"name": "tet",
|
||||
"intro": "",
|
||||
"fields": [
|
||||
{
|
||||
"name": "checkbox",
|
||||
"type": "CheckboxField",
|
||||
"columns": {
|
||||
value='{
|
||||
"sections": [
|
||||
{
|
||||
"name": "sdfs",
|
||||
"fields": [
|
||||
{
|
||||
"required": true,
|
||||
"key": "vorname",
|
||||
"name": "Vorname",
|
||||
"nami_type": null,
|
||||
"columns": {
|
||||
"mobile": 2,
|
||||
"tablet": 4,
|
||||
"desktop": 6
|
||||
},
|
||||
"value": false,
|
||||
"required": true,
|
||||
"nami_type": null,
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"description": "Sed laoreet mattis sem, vel sodales leo ullamcorper ut. Aliquam hendrerit vestibulum ex, sit amet consequat dolor donec.",
|
||||
"hint": "Quisque justo leo, ultricies vestibulum.",
|
||||
"key": "checkbox"
|
||||
},
|
||||
{
|
||||
"name": "checkboxes Praesent tortor ligula, accumsan quis neque eget, laoreet convallis nunc. Morbi a urna sem. Mauris venenatis a felis ex.",
|
||||
"hint": "Quisque justo leo, ultricies vestibulum.",
|
||||
"type": "CheckboxesField",
|
||||
"columns": {
|
||||
},
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"hint": null,
|
||||
"intro": null,
|
||||
"value": null,
|
||||
"type": "TextField"
|
||||
},
|
||||
{
|
||||
"required": true,
|
||||
"key": "nachname",
|
||||
"name": "Nachname",
|
||||
"nami_type": null,
|
||||
"columns": {
|
||||
"mobile": 2,
|
||||
"tablet": 4,
|
||||
"desktop": 6
|
||||
},
|
||||
"value": [],
|
||||
"required": false,
|
||||
"nami_type": null,
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"options": [
|
||||
"Integer molestie enim vitae enim tellus.",
|
||||
"Cras ut magna ac metus rutrum efficitur."
|
||||
],
|
||||
"key": "checkboxes"
|
||||
},
|
||||
{
|
||||
"name": "date",
|
||||
"hint": "Quisque justo leo, ultricies vestibulum.",
|
||||
"type": "DateField",
|
||||
"columns": {
|
||||
"mobile": 2,
|
||||
"tablet": 4,
|
||||
"desktop": 6
|
||||
},
|
||||
"value": null,
|
||||
"required": false,
|
||||
"nami_type": null,
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"max_today": false,
|
||||
"key": "date"
|
||||
},
|
||||
{
|
||||
"name": "dropdown",
|
||||
"hint": "Quisque justo leo, ultricies vestibulum.",
|
||||
"type": "DropdownField",
|
||||
"columns": {
|
||||
"mobile": 2,
|
||||
"tablet": 4,
|
||||
"desktop": 6
|
||||
},
|
||||
"value": null,
|
||||
"required": false,
|
||||
"nami_type": null,
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"options": [
|
||||
"a",
|
||||
"v"
|
||||
],
|
||||
"key": "dropdown",
|
||||
"allowcustom": false
|
||||
},
|
||||
{
|
||||
"name": "radio",
|
||||
"hint": "Quisque justo leo, ultricies vestibulum.",
|
||||
"type": "RadioField",
|
||||
"columns": {
|
||||
"mobile": 2,
|
||||
"tablet": 4,
|
||||
"desktop": 6
|
||||
},
|
||||
"value": null,
|
||||
"required": false,
|
||||
"nami_type": null,
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"options": [
|
||||
"a",
|
||||
"v"
|
||||
],
|
||||
"key": "radio",
|
||||
"allowcustom": false
|
||||
},
|
||||
{
|
||||
"name": "text",
|
||||
"hint": "Quisque justo leo, ultricies vestibulum.",
|
||||
"type": "TextField",
|
||||
"columns": {
|
||||
"mobile": 2,
|
||||
"tablet": 4,
|
||||
"desktop": 6
|
||||
},
|
||||
"value": "",
|
||||
"required": false,
|
||||
"nami_type": null,
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"key": "text"
|
||||
},
|
||||
{
|
||||
"name": "textarea",
|
||||
"hint": "Quisque justo leo, ultricies vestibulum.",
|
||||
"type": "TextareaField",
|
||||
"columns": {
|
||||
"mobile": 2,
|
||||
"tablet": 4,
|
||||
"desktop": 6
|
||||
},
|
||||
"value": "",
|
||||
"required": false,
|
||||
"nami_type": null,
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"rows": 5,
|
||||
"key": "textarea"
|
||||
},
|
||||
{
|
||||
"name": "numerisch",
|
||||
"hint": "Quisque justo leo, ultricies vestibulum.",
|
||||
"type": "NumberField",
|
||||
"columns": {
|
||||
"mobile": 2,
|
||||
"tablet": 4,
|
||||
"desktop": 6
|
||||
},
|
||||
"value": null,
|
||||
"required": false,
|
||||
"nami_type": null,
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"key": "numerisch",
|
||||
"min": null,
|
||||
"max": "7"
|
||||
},
|
||||
{"required":true,"parent_field":null,"parent_group":2,"has_empty_option":true,"key":"stamm","name":"Stamm","nami_type":null,"columns":{"mobile":2,"tablet":4,"desktop":6},"for_members":true,"special_type":null,"hint":null,"value":null,"type":"GroupField", "empty_option_value": "Kein Stamm"}
|
||||
]
|
||||
}
|
||||
]}'
|
||||
"desktop": 3
|
||||
},
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"hint": null,
|
||||
"intro": null,
|
||||
"value": null,
|
||||
"type": "TextField"
|
||||
},
|
||||
{
|
||||
"required": true,
|
||||
"key": "mail",
|
||||
"name": "Mail",
|
||||
"nami_type": null,
|
||||
"columns": {
|
||||
"mobile": 1,
|
||||
"tablet": 2,
|
||||
"desktop": 3
|
||||
},
|
||||
"for_members": true,
|
||||
"special_type": null,
|
||||
"hint": null,
|
||||
"intro": null,
|
||||
"value": null,
|
||||
"type": "EmailField"
|
||||
}
|
||||
],
|
||||
"intro": null
|
||||
}
|
||||
]
|
||||
}'
|
||||
payload='{"vorname": "Philipp", "nachname": "Lang", "mail": "a@b.de"}'
|
||||
url="http://localhost:8000"
|
||||
editable
|
||||
></event-form>
|
||||
<event-overview
|
||||
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
|
||||
|
|
|
|||
|
|
@ -57,18 +57,12 @@
|
|||
<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>
|
||||
</a>
|
||||
<div class="overflow-hidden">
|
||||
<div class="overflow-hidden grow">
|
||||
<carousel :touch-drag="false" :mouse-drag="false" v-model="active">
|
||||
<slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
|
||||
<div class="flex-none w-full">
|
||||
<div
|
||||
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"
|
||||
@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="text-sm text-font" v-html="section.name"></span>
|
||||
</div>
|
||||
<slide v-for="(section, index) in v.sections" :key="index">
|
||||
<div v-if="active === index" class="w-full flex-none px-2 flex flex-col items-center justify-center h-12" @click="active = index">
|
||||
<span class="flex items-center justify-center w-4 h-4 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>
|
||||
</div>
|
||||
</slide>
|
||||
</carousel>
|
||||
|
|
@ -119,7 +113,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<navigation v-if="active === index" v-model="active" :last="v.sections.length"></navigation>
|
||||
<navigation v-if="active === index" :as-form="asForm" v-model="active" :last="v.sections.length"></navigation>
|
||||
</slide>
|
||||
</carousel>
|
||||
</div>
|
||||
|
|
@ -155,14 +149,16 @@ import useToastify from './composables/useToastify.js';
|
|||
import useFields from './composables/useFields.js';
|
||||
import SettingIcon from './components/icons/SettingIcon.vue';
|
||||
import useColumns from './composables/useColumns.js';
|
||||
import usePageMeta from './composables/usePageMeta.js';
|
||||
|
||||
const {scroll} = useScroll();
|
||||
const {errorFromResponse} = useToastify();
|
||||
const {colClassesForField, containerClasses} = useColumns();
|
||||
const finished = ref(false);
|
||||
const eventForm = ref(null);
|
||||
const pageMeta = usePageMeta();
|
||||
|
||||
const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'editField', 'deleteField', 'active']);
|
||||
const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'editField', 'deleteField', 'active', 'save']);
|
||||
|
||||
const props = defineProps({
|
||||
editable: {
|
||||
|
|
@ -185,6 +181,10 @@ const props = defineProps({
|
|||
default: () => false,
|
||||
type: Boolean,
|
||||
},
|
||||
asForm: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
});
|
||||
|
||||
const active = ref(0);
|
||||
|
|
@ -233,8 +233,14 @@ const {back, next, backable, nextable} = useNav(active, v.value.sections.length)
|
|||
const {resolveComponentName} = useFields();
|
||||
|
||||
async function submit() {
|
||||
if (props.asForm) {
|
||||
emits('save', payload.value);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await axios.post('/api/form/' + props.formId + '/register', payload.value);
|
||||
await axios.post('/api/form/' + props.formId + '/register', payload.value, {
|
||||
params: pageMeta.value.later === '1' ? pageMeta.value : {},
|
||||
});
|
||||
finished.value = true;
|
||||
} catch (e) {
|
||||
errorFromResponse(e);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<box size="none" class="opacity-[0.8] hover:opacity-[1.0]" :type="type">
|
||||
<div href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2">
|
||||
<div href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2 cursor-pointer">
|
||||
<div v-text="title"></div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<slot name="buttons"></slot>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,17 @@
|
|||
<a
|
||||
:href="registerUrl.replace(':slug', event.slug)"
|
||||
class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-font focus:outline-none bg-primary text-font"
|
||||
v-if="event.can_register"
|
||||
>
|
||||
Zur Anmeldung
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-font focus:outline-none bg-gray-700 text-font"
|
||||
v-else
|
||||
>
|
||||
Anmeldung zzt nicht möglich
|
||||
</button>
|
||||
</div>
|
||||
</popup>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
Anmeldung absenden
|
||||
<span v-text="asForm ? 'Speichern' : 'Anmeldung absenden'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -29,6 +29,10 @@ const props = defineProps({
|
|||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
asForm: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const innerValue = computed({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-checkbox :id="innerId" v-model="inner" :name="field.key" :label="field.description" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
|
||||
<v-checkbox :id="innerId" v-model="inner" :label="field.name" :description="field.description" :name="field.key" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
|
|
@ -13,16 +13,27 @@
|
|||
Bitte achte außerdem darauf, dass du mindestens <span class="font-semibold">Leserechte</span> auf deine Gruppierung hast. Diese kann dir i.d.R. dein
|
||||
<span class="font-semibold">StaVo</span> erteilen.
|
||||
</p>
|
||||
<v-checkbox
|
||||
:modelValue="loginState !== 'nami'"
|
||||
@update:modelValue="loginState = $event ? 'skipping' : 'nami'"
|
||||
name="login_state"
|
||||
id="login_state"
|
||||
description="Ich bin kein Mitglied der DPSG im DV Köln und möchte daher meine Mitglieder selbst eingeben."
|
||||
intro=""
|
||||
></v-checkbox>
|
||||
</div>
|
||||
<div class="flex mt-4 space-x-3">
|
||||
<v-text @keypress.enter="innerLogin" name="nami_mglnr" label="Mitgliedsnummer" id="nami_mglnr" v-model="loginData.mglnr" required></v-text>
|
||||
<v-text @keypress.enter="innerLogin" name="nami_password" label="Passwort" id="nami_password" v-model="loginData.password" type="password" required></v-text>
|
||||
<v-btn class="self-end" @click.prevent="innerLogin">Anmelden</v-btn>
|
||||
<v-btn class="self-end" @click.prevent="innerLogin">
|
||||
<span v-text="loginState === 'nami' ? 'Anmelden' : 'Weiter'"></span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
<template #finished>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>Erfolgreich eingeloggt als {{ user }}.</div>
|
||||
<div v-if="user">Erfolgreich eingeloggt als {{ user }}.</div>
|
||||
<div v-else>Nicht eingeloggt</div>
|
||||
<v-btn class="self-end" @click.prevent="innerLogout">Abmelden</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -57,7 +68,7 @@
|
|||
@update:modelValue="toggleMember(member)"
|
||||
:name="`${field.key}-memberselect-${member.id}`"
|
||||
:id="`${field.key}-memberselect-${member.id}`"
|
||||
:label="member.name"
|
||||
:description="member.name"
|
||||
intro=""
|
||||
v-for="member in searchResults.data"
|
||||
></v-checkbox>
|
||||
|
|
@ -102,7 +113,7 @@
|
|||
v-model="member[memberField.key]"
|
||||
:name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
|
||||
:id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
|
||||
:label="memberField.description"
|
||||
:description="memberField.description"
|
||||
intro=""
|
||||
:required="memberField.required"
|
||||
:class="colClassesForField(memberField)"
|
||||
|
|
@ -225,7 +236,7 @@ if (user.value !== null) {
|
|||
|
||||
const {resolveComponentName} = useFields();
|
||||
const step = computed(() => {
|
||||
if (user.value === null) {
|
||||
if (user.value === null && loginState.value !== 'skipped') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
|
|
@ -247,6 +258,7 @@ function deleteMember(index) {
|
|||
}
|
||||
|
||||
const membersAccepted = ref(false);
|
||||
const loginState = ref('nami');
|
||||
const membersCompleted = ref(false);
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const props = defineProps({
|
||||
|
|
@ -288,6 +300,13 @@ const inner = computed(
|
|||
{deep: true},
|
||||
);
|
||||
async function innerLogin() {
|
||||
if (loginState.value === 'skipping') {
|
||||
loginState.value = 'skipped';
|
||||
membersAccepted.value = true;
|
||||
membersCompleted.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
await login();
|
||||
membersAccepted.value = false;
|
||||
membersCompleted.value = false;
|
||||
|
|
@ -312,8 +331,11 @@ function toggleMember(member) {
|
|||
}
|
||||
|
||||
async function innerLogout() {
|
||||
logout();
|
||||
resetSearchData();
|
||||
if (loginState.value !== 'skipped') {
|
||||
logout();
|
||||
resetSearchData();
|
||||
}
|
||||
loginState.value = 'nami';
|
||||
membersAccepted.value = false;
|
||||
membersCompleted.value = false;
|
||||
inner.value = [];
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" v-model="inner"></v-text>
|
||||
<v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" :intro="field.intro" v-model="inner"></v-text>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="relative">
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<field-label v-if="label" :name="label" :required="required" :hint="hint" inline></field-label>
|
||||
<div class="grid grid-cols-1 gap-2 pt-1">
|
||||
<div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
|
||||
<label :for="id" class="p-0 block leading-none relative flex items-start">
|
||||
<input :id="id" v-model="inner" type="checkbox" :name="name" class="peer absolute invisible" />
|
||||
|
|
@ -8,11 +9,9 @@
|
|||
class="border-neutral-400 border-4 group-[.box]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.box]:w-4 group-[.box]:h-4 group-[.box]:top-[5px] rounded block top-0"
|
||||
></span>
|
||||
<span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded block top-0"></span>
|
||||
<span v-if="label" class="pl-8 group-[.box]:pl-6 pt-1 @sm:pt-0 @sm:group-[.box]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.box]:text-sm">
|
||||
<span v-text="label"></span>
|
||||
<span v-show="required" class="text-red-800"> *</span>
|
||||
<span v-if="description" class="pl-8 group-[.box]:pl-6 pt-1 @sm:pt-0 @sm:group-[.box]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.box]:text-sm">
|
||||
<span v-text="description"></span>
|
||||
</span>
|
||||
<hint :value="hint" class="ml-2" v-if="hint"></hint>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
|
||||
<script setup>
|
||||
import {computed} from 'vue';
|
||||
import Hint from '../Hint.vue';
|
||||
import FieldLabel from '../FieldLabel.vue';
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const props = defineProps({
|
||||
|
|
@ -41,6 +40,10 @@ const props = defineProps({
|
|||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
description: {
|
||||
required: false,
|
||||
type: String,
|
||||
},
|
||||
required: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<span
|
||||
class="border-neutral-400 border-4 group-[.box]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.box]:w-4 group-[.box]:h-4 group-[.box]:top-[5px] rounded-full block top-0"
|
||||
></span>
|
||||
<span class="peer-checked:bg-primary left-2 group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded-full block"></span>
|
||||
<span class="peer-checked:bg-primary left-2 top-2 group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded-full block"></span>
|
||||
<span v-if="option.iscustom" class="ml-8 w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex h-6">
|
||||
<input
|
||||
:id="`${id}-custom-value`"
|
||||
|
|
|
|||
|
|
@ -1,21 +1,24 @@
|
|||
<template>
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
|
||||
<input
|
||||
:id="id"
|
||||
v-model="inner"
|
||||
:name="name"
|
||||
:min="min"
|
||||
:max="presentMax"
|
||||
:type="type"
|
||||
placeholder=""
|
||||
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.box]:py-1 px-2 @sm:px-3 @sm:group-[.box]:px-2 text-sm @sm:text-base @sm:group-[.box]:text-sm"
|
||||
@keypress="$emit('keypress', $event)"
|
||||
/>
|
||||
<div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
|
||||
<hint :value="hint"></hint>
|
||||
</div>
|
||||
<field-label :name="label" :required="required"></field-label>
|
||||
</label>
|
||||
<div>
|
||||
<div class="text-sm text-gray-600 mb-4" v-text="intro" v-if="intro"></div>
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
|
||||
<input
|
||||
:id="id"
|
||||
v-model="inner"
|
||||
:name="name"
|
||||
:min="min"
|
||||
:max="presentMax"
|
||||
:type="type"
|
||||
placeholder=""
|
||||
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.box]:py-1 px-2 @sm:px-3 @sm:group-[.box]:px-2 text-sm @sm:text-base @sm:group-[.box]:text-sm"
|
||||
@keypress="$emit('keypress', $event)"
|
||||
/>
|
||||
<div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
|
||||
<hint :value="hint"></hint>
|
||||
</div>
|
||||
<field-label :name="label" :required="required"></field-label>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -70,6 +73,11 @@ const props = defineProps({
|
|||
validator: (value) => value === null || typeof value === 'string',
|
||||
default: () => null,
|
||||
},
|
||||
intro: {
|
||||
required: false,
|
||||
validator: (value) => value === null || typeof value === 'string',
|
||||
default: () => null,
|
||||
},
|
||||
});
|
||||
|
||||
const presentMax = computed(() => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { ref } from 'vue';
|
||||
|
||||
export default function useEventMeta() {
|
||||
const varName = 'adrema_page_meta';
|
||||
const pageMeta = ref(null);
|
||||
if (window[varName]) {
|
||||
pageMeta.value = window[varName];
|
||||
}
|
||||
return pageMeta;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.vue'],
|
||||
content: ['./src/**/*.vue', './src/**/*.js'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
|
|
|
|||
|
|
@ -24,5 +24,6 @@ export default defineConfig({
|
|||
},
|
||||
server: {
|
||||
port: 5174,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue