silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add column selector

This commit is contained in:
philipp lang 2023-12-27 01:20:07 +01:00
parent d7e7fb3c27
commit 4ddf76943d
5 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/img/svg/desktop.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.664 503.664" style="enable-background:new 0 0 503.664 503.664" xml:space="preserve"><path d="M467.98 39.376H35.792C16.112 39.376.1 55.384.1 75.064L0 369.52c0 19.676 16.004 35.748 35.684 35.748h141.4v35.408h-27.612c-2.172 0-3.864 1.848-3.864 4.02v15.532c0 2.172 1.688 4.06 3.864 4.06h204c2.164 0 4.584-1.888 4.584-4.06v-15.532c0-2.172-2.42-4.02-4.584-4.02H326.58v-35.408h141.304c19.664 0 35.688-16.072 35.688-35.748l.092-294.424c.004-19.684-16.004-35.72-35.684-35.72zM251.34 377.524c-6.524 0-11.804-5.284-11.804-11.804 0-6.516 5.28-11.8 11.804-11.8 6.52 0 11.804 5.284 11.804 11.8 0 6.52-5.28 11.804-11.804 11.804zm220.812-50.944H31.512V70.848h440.64V326.58z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 723 B

1
resources/img/svg/mobile.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.604 503.604" style="enable-background:new 0 0 503.604 503.604" xml:space="preserve"><path d="M337.324 0H167.192c-28.924 0-53.5 23.584-53.5 52.5v398.664c0 28.916 24.056 52.44 52.98 52.44l170.412-.184c28.92 0 52.58-23.528 52.58-52.448l.248-398.5C389.908 23.452 366.364 0 337.324 0zM227.68 31.476h49.36c4.336 0 7.868 3.52 7.868 7.868 0 4.348-3.532 7.868-7.868 7.868h-49.36a7.865 7.865 0 0 1-7.868-7.868 7.865 7.865 0 0 1 7.868-7.868zm-29.66 2.504c2.916-2.912 8.224-2.952 11.136 0a7.973 7.973 0 0 1 2.324 5.588c0 2.048-.864 4.088-2.324 5.548-1.452 1.46-3.504 2.32-5.548 2.32-2.084 0-4.088-.86-5.588-2.32-1.452-1.456-2.28-3.5-2.28-5.548-.004-2.088.828-4.132 2.28-5.588zm52.752 454.028c-12.984 0-23.544-10.568-23.544-23.548 0-12.984 10.56-23.548 23.544-23.548s23.544 10.564 23.544 23.548c0 12.98-10.564 23.548-23.544 23.548zm114.716-63.1H141.232V74.756h224.256v350.152z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 929 B

1
resources/img/svg/tablet.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.592 503.592" style="enable-background:new 0 0 503.592 503.592" xml:space="preserve"><path d="M428.636 27.852C428.636 12.508 416.144 0 400.792 0H102.66C87.312 0 74.828 12.504 74.828 27.852l.132 447.892c0 15.352 12.488 27.848 27.832 27.848h298.136c15.352 0 27.836-12.496 27.836-27.848l-.128-447.892zm-196.276 3.62h38.884c4.36 0 7.868 3.52 7.868 7.868a7.863 7.863 0 0 1-7.868 7.872H232.36c-4.348 0-7.868-3.524-7.868-7.872s3.52-7.868 7.868-7.868zm-29.396 2.44c2.916-2.948 8.184-2.948 11.136 0 1.452 1.46 2.324 3.504 2.324 5.552 0 2.08-.872 4.084-2.324 5.544-1.46 1.496-3.504 2.324-5.584 2.324a7.747 7.747 0 0 1-5.552-2.324c-1.452-1.456-2.316-3.464-2.316-5.544 0-2.048.868-4.092 2.316-5.552zm47.252 454.216c-12.98 0-23.544-10.564-23.544-23.544 0-12.984 10.568-23.548 23.544-23.548 12.988 0 23.544 10.564 23.544 23.548s-10.552 23.544-23.544 23.544zM94.424 424.904V74.752h314.744v350.152H94.424z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 954 B

54
resources/js/views/formtemplate/ColumnSelector.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div class="space-y-1">
<span class="text-xs font-semibold text-gray-400">Spalten</span>
<div class="flex rounded-lg border border-gray-500 divide-x divide-gray-500 overflow-hidden">
<div class="bg-gray-600 w-8 h-6 flex items-center justify-center">
<ui-sprite src="mobile" class="w-4 h-4"></ui-sprite>
</div>
<div
v-for="(i, index) in 2"
class="hover:cursor-pointer grow flex items-center justify-center text-sm text-teal-600"
:class="{'bg-teal-900': i <= modelValue.mobile}"
@click.prevent="$emit('update:modelValue', {...modelValue, mobile: i})"
v-text="i"
></div>
</div>
<div class="flex rounded-lg border border-gray-500 divide-x divide-gray-500 overflow-hidden">
<div class="bg-gray-600 w-8 h-6 flex items-center justify-center">
<ui-sprite src="tablet" class="w-4 h-4"></ui-sprite>
</div>
<div
v-for="(i, index) in 4"
class="hover:cursor-pointer grow flex items-center justify-center text-sm text-teal-600"
:class="{'bg-teal-900': i <= modelValue.tablet}"
@click.prevent="$emit('update:modelValue', {...modelValue, tablet: i})"
v-text="i"
></div>
</div>
<div class="flex rounded-lg border border-gray-500 divide-x divide-gray-500 overflow-hidden">
<div class="bg-gray-600 w-8 h-6 flex items-center justify-center">
<ui-sprite src="desktop" class="w-4 h-4"></ui-sprite>
</div>
<div
v-for="(i, index) in 6"
class="hover:cursor-pointer grow flex items-center justify-center text-sm text-teal-600"
:class="{'bg-teal-900': i <= modelValue.desktop}"
@click.prevent="$emit('update:modelValue', {...modelValue, desktop: i})"
v-text="i"
></div>
</div>
</div>
</template>
<script setup>
defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {
required: true,
validator: (value) => typeof value === 'object' && JSON.stringify(Object.keys(value).sort()) === JSON.stringify(['desktop', 'mobile', 'tablet'].sort()),
},
});
</script>

2
resources/js/views/formtemplate/FormBuilder.vue
View File

@ -26,6 +26,7 @@
@submit="storeField"
>
<f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm" name="fieldname"></f-text>
<column-selector v-model="singleField.model.columns"></column-selector>
<component :is="fields[singleField.model.type]" v-model="singleField.model"></component>
</asideform>
</div>
@ -56,6 +57,7 @@ import DropdownField from './RadioField.vue';
import RadioField from './RadioField.vue';
import CheckboxField from './CheckboxField.vue';
import CheckboxesField from './CheckboxesField.vue';
import ColumnSelector from './ColumnSelector.vue';
const sectionVisible = ref(-1);
const singleSection = ref(null);