swcs/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix a lot of editor fields

Browse Source
This commit is contained in:
Tobias Klika
2020-10-20 13:27:17 +02:00
parent 37fe4777a6
commit 61dfb40fa9
16 changed files with 150 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Web.UI/App/components/forms/check-list.vue
+13 -8
View File
@@ -3,7 +3,7 @@
<label v-for="item in list" class="ui-native-check ui-check-list-item">
<input type="checkbox" :checked="isChecked(item)" @input="onChange(item)" :disabled="disabled" />
<span class="ui-native-check-toggle"></span>
<span v-localize="item.name"></span>
<span v-localize="item[labelKey]"></span>
</label>
</div>
</template>
@@ -32,13 +32,18 @@
type: Boolean,
default: false
},
maxItems: {
limit: {
type: Number,
default: 100
},
reverse: {
type: Boolean,
default: false
reverse: Boolean,
labelKey: {
type: String,
default: 'value'
},
idKey: {
type: String,
default: 'key'
}
},
@@ -81,18 +86,18 @@
isChecked(item)
{
let index = this.value.indexOf(item.id);
let index = this.value.indexOf(item[this.idKey]);
return (!this.reverse && index > -1) || (this.reverse && index < 0);
},
onChange(item)
{
let index = this.value.indexOf(item.id);
let index = this.value.indexOf(item[this.idKey]);
let value = JSON.parse(JSON.stringify(this.value));
if (index < 0)
{
value.push(item.id);
value.push(item[this.idKey]);
}
else
{
zero.Web.UI/App/config/router.config.js
+1 -1
View File
@@ -67,7 +67,7 @@ export default {
base: __zero.path,
linkActiveClass: 'is-active',
linkExactActiveClass: 'is-active-exact',
beforeEach: beforeEach,
//beforeEach: beforeEach,
scrollBehavior(to, from, savedPosition)
{
return savedPosition ? savedPosition : { x: 0, y: 0 };
zero.Web.UI/App/core/editor-field.js
+18 -4
View File
@@ -98,6 +98,17 @@ class EditorField
}
/**
* Conditionally render this field (this is an alternative method to the field options 'condition')
* @param {function} condition - function which returns a boolean and gets passed the current model
*/
when(condition)
{
this.options.condition = condition;
return this;
}
/**
* Render a custom component
* @param {object} component - The custom vue component
@@ -220,13 +231,16 @@ class EditorField
/**
* Renders an input which generates an alias for a given name or an alternative custom alias
* @param {EditorSelectItem[]|function} items - Set items to choose from, either via an array or a promise which returns such array
* @param {number} [limit=100] - Maximum items to be checked
* @param {boolean} [reverse] - Reverse the checklist behaviour, so all items are checked by default and unchecking them adds them to the result list
* @param {object} [options] - Custom options
* @param {number} [options.limit=100] - Maximum items to be checked
* @param {boolean} [options.reverse=false] - Reverse the checklist behaviour, so all items are checked by default and unchecking them adds them to the result list
* @param {string} [options.labelKey=value] - Object key to get the label
* @param {string} [options.idKey=key] - Object key to get the id
* @returns {EditorField}
*/
checkList(items, limit)
checkList(items, options)
{
return this._setComponent(Checklist, { items, limit, reverse });
return this._setComponent(Checklist, { items, ...options });
}
zero.Web.UI/App/editor/editor-component.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<ui-property v-if="!isHidden" :field="config.path" :label="label" :hide-label="config.options.hideLabel"
:description="description" :required="isRequired">
<component :is="config.component" v-bind="config.componentOptions" :value="model" @input="onChange" />
<component :is="config.component" v-bind="config.componentOptions" :value="model" :entity="value" @input="onChange" />
<p v-if="config.options.helpText" class="ui-property-help" v-localize="config.options.helpText"></p>
</ui-property>
</template>
zero.Web.UI/App/editor/editor-overlay.vue
+3 -1
View File
@@ -14,7 +14,7 @@
<ui-loading v-if="loading" :is-big="true" />
<div v-if="!loading" class="ui-editor-overlay-editor">
<ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" :disabled="disabled" />
<ui-editor :config="editor" v-model="model" :meta="meta" :is-page="false" infos="none" :disabled="disabled" />
</div>
</ui-overlay-editor>
@@ -39,6 +39,7 @@
id: null,
loading: true,
state: 'default',
editor: null,
meta: {},
model: {}
}),
@@ -50,6 +51,7 @@
{
this.isAdd = this.config.create === true;
this.model = JSON.parse(JSON.stringify(this.config.model));
this.editor = this.config.editor;
this.loading = false;
},
zero.Web.UI/App/editor/editor.vue
+1 -2
View File
@@ -13,7 +13,6 @@
<script>
import EditorComponent from 'zero/editor/editor-component.vue';
import Editor from 'zero/core/editor.js';
export default {
name: 'uiEditor',
@@ -28,7 +27,7 @@
props: {
config: {
type: [String, Editor],
type: [String, Object],
required: true
},
meta: {
zero.Web.UI/App/editor/fields/checklist.vue
+24 -2
View File
@@ -1,5 +1,11 @@
<template>
<ui-check-list :value="value" @input="$emit('input', $event)" :reverse="config.reverse" :items="config.items" :disabled="disabled" />
<ui-check-list :value="value" @input="$emit('input', $event)"
:reverse="reverse"
:items="items"
:limit="limit"
:label-key="labelKey"
:id-key="idKey"
:disabled="disabled" />
</template>
<script>
@@ -13,7 +19,23 @@
type: Boolean,
default: false
},
config: Object
items: {
type: [Array, Function, Promise],
required: true
},
limit: {
type: Number,
default: 100
},
reverse: Boolean,
labelKey: {
type: String,
default: 'value'
},
idKey: {
type: String,
default: 'key'
}
},
}
</script>
zero.Web.UI/App/editor/fields/countrypicker.vue
+7 -9
View File
@@ -1,19 +1,17 @@
<template>
<ui-countrypicker :value="value" @input="$emit('input', $event)" :limit="config.limit || 1" :disabled="disabled" />
<ui-countrypicker :value="value" @input="$emit('input', $event)" :limit="limit" :disabled="disabled" />
</template>
<script>
export default {
props: {
value: {
type: [String, Array]
},
disabled: {
type: Boolean,
default: false
},
config: Object
value: [String, Array],
disabled: Boolean,
limit: {
type: Number,
default: 1
}
}
}
</script>
zero.Web.UI/App/editor/fields/currency.vue
+3 -10
View File
@@ -1,6 +1,6 @@
<template>
<div class="ui-box">
<input :value="value" @input="$emit('input', $event.target.value)" type="text" class="ui-input" v-localize:placeholder="config.placeholder" :maxlength="maxLength" :disabled="disabled" />
<input :value="value" @input="$emit('input', +$event.target.value)" type="text" class="ui-input" v-localize:placeholder="placeholder" :disabled="disabled" />
</div>
</template>
@@ -12,18 +12,11 @@
type: Number,
default: null
},
config: Object,
disabled: {
type: Boolean,
default: false
}
},
placeholder: String
},
computed: {
maxLength()
{
return this.config.maxLength > 0 ? this.config.maxLength : null;
}
}
}
</script>
zero.Web.UI/App/editor/fields/nested.vue
+53 -28
View File
@@ -2,11 +2,11 @@
<div class="editor-nested" :depth="depth">
<div class="ui-pick-previews" v-if="items.length">
<div v-for="(item, index) in items" class="ui-pick-preview">
<ui-select-button :icon="config.icon" :label="getName(item)" :description="getDescription(item)" :disabled="disabled" @click="editItem(item)" />
<ui-select-button :icon="getIcon(item)" :label="getName(item)" :description="getDescription(item)" :disabled="disabled" @click="editItem(item)" />
<ui-icon-button v-if="!disabled" icon="fth-x" title="@ui.close" @click="removeItem(index)" :disabled="disabled" />
</div>
</div>
<ui-select-button v-if="limit > items.length" icon="fth-plus" :label="config.addLabel || '@ui.add'" @click="addItem" :disabled="disabled" />
<ui-select-button v-if="limit > items.length" icon="fth-plus" :label="addLabel || '@ui.add'" @click="addItem" :disabled="disabled" />
</div>
</template>
@@ -14,55 +14,74 @@
import UiEditor from 'zero/editor/editor';
import UiEditorOverlay from 'zero/editor/editor-overlay';
import Overlay from 'zero/services/overlay';
import Editor from 'zero/core/editor.js';
export default {
components: { UiEditor },
props: {
value: {
type: [Array, Object]
value: [Array, Object],
meta: Object,
depth: Number,
disabled: Boolean,
editor: {
type: Editor,
required: true
},
meta: {
type: Object,
default: () => { }
},
depth: {
limit: {
type: Number,
default: 0
default: 100
},
disabled: {
type: Boolean,
default: false
},
config: Object
title: String,
addLabel: String,
itemLabel: Function,
itemDescription: Function,
itemIcon: [String, Function],
template: {
type: Object,
required: true
}
},
watch: {
value: {
deep: true,
handler(val)
{
this.setup();
}
}
},
data: () => ({
items: [],
limit: 100,
multiple: false
}),
mounted()
{
this.items = JSON.parse(JSON.stringify(this.value));
this.limit = this.config.limit || this.limit;
this.multiple = this.limit > 1;
if (!this.multiple)
{
this.items = this.items ? [this.items] : [];
}
this.setup();
},
methods: {
setup()
{
this.items = JSON.parse(JSON.stringify(this.value)) || [];
this.multiple = this.limit > 1;
if (!this.multiple)
{
this.items = this.items ? [this.items] : [];
}
},
getNewItem()
{
return JSON.parse(JSON.stringify(this.config.template || {}));
return JSON.parse(JSON.stringify(this.template || {}));
},
addItem()
@@ -82,8 +101,8 @@
return Overlay.open({
component: UiEditorOverlay,
display: 'editor',
renderer: this.config.renderer,
title: this.config.title || '@ui.edit.title',
editor: this.editor,
title: this.title || '@ui.edit.title',
model: item,
width: 1100,
create: isAdd
@@ -119,13 +138,19 @@
getName(item)
{
return this.config.item && typeof this.config.item.label === 'function' ? this.config.item.label(item) : 'Item';
return typeof this.itemLabel === 'function' ? this.itemLabel(item) : 'Item';
},
getDescription(item)
{
return this.config.item && typeof this.config.item.description === 'function' ? this.config.item.description(item) : '';
return typeof this.itemDescription === 'function' ? this.itemDescription(item) : '';
},
getIcon(item)
{
return typeof this.itemIcon === 'function' ? this.itemIcon(item) : this.itemIcon;
}
}
}
zero.Web.UI/App/editor/fields/number.vue
+5 -17
View File
@@ -1,27 +1,15 @@
<template>
<input :value="value" @input="onChange($event.target.value)" type="text" class="ui-input" v-localize:placeholder="" :maxlength="maxLength" :disabled="disabled" />
<input :value="value" @input="onChange($event.target.value)" type="text" class="ui-input" v-localize:placeholder="placeholder" :maxlength="maxLength" :disabled="disabled" />
</template>
<script>
export default {
props: {
value: {
type: Number,
default: null
},
config: Object,
disabled: {
type: Boolean,
default: false
}
},
computed: {
maxLength()
{
return this.config.maxLength > 0 ? this.config.maxLength : null;
},
value: Number,
maxLength: Number,
placeholder: String,
disabled: Boolean
},
methods: {
zero.Web.UI/App/editor/fields/output.vue
+3 -2
View File
@@ -6,13 +6,14 @@
export default {
props: {
value: [Object, String, Array, Number, Boolean],
config: Object
entity: Object,
render: Function
},
computed: {
output()
{
return typeof this.config.render === 'function' ? this.config.render(this.value, this.config) : this.value;
return typeof this.render === 'function' ? this.render(this.value, this.entity) : this.value;
}
}
}
zero.Web.UI/App/editor/fields/select.vue
+4 -14
View File
@@ -1,28 +1,18 @@
<template>
<div class="ui-native-select" :disabled="disabled">
<select :value="value" @input="$emit('input', $event.target.value)" :disabled="disabled">
<option v-for="item in config.items" :value="item.value" v-localize="item.label"></option>
<option v-for="item in items" :value="item.key" v-localize="item.value"></option>
</select>
</div>
</template>
<script>
import { map as _map, filter as _filter } from 'underscore';
export default {
name: 'uiSelect',
props: {
value: {
type: [String, Number, Object],
default: null
},
config: Object,
disabled: {
type: Boolean,
default: false
}
value: [String, Number, Object],
items: Array,
disabled: Boolean
},
}
</script>
zero.Web.UI/App/editor/fields/tags.vue
+9 -5
View File
@@ -1,5 +1,5 @@
<template>
<ui-tags :value="value" @input="$emit('input', $event)" :add-label="config.addLabel || '@ui.add'" :disabled="disabled" />
<ui-tags :value="value" @input="$emit('input', $event)" :max-items="limit" :max-length="maxItemLength" :disabled="disabled" />
</template>
<script>
@@ -9,11 +9,15 @@
type: Array,
default: () => []
},
disabled: {
type: Boolean,
default: false
disabled: Boolean,
limit: {
type: Number,
default: 10
},
config: Object
maxItemLength: {
type: Number,
default: 200
}
},
}
</script>
zero.Web.UI/App/editor/fields/toggle.vue
+3 -12
View File
@@ -6,18 +6,9 @@
<script>
export default {
props: {
value: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
negative: {
type: Boolean,
default: false
}
value: Boolean,
disabled: Boolean,
negative: Boolean
}
}
</script>
zero.Web.UI/App/pages/notfound.vue
+2
View File
@@ -60,6 +60,8 @@
this.path = this.$router.options.base + this.$route.path.substring(1);
this.routes = [];
console.info(this.$router.options.routes);
this.$router.options.routes.forEach(route =>
{
this.routes.push({