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

schema extensions

Browse Source
This commit is contained in:
Tobias Klika
2022-01-14 11:51:38 +01:00
parent 0f3fe4362a
commit 110d4e6a3d
16 changed files with 200 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Backoffice.UI/app/components/ui-check-list.vue
+96 -79
View File
@@ -1,134 +1,151 @@
<template>
<div class="ui-input-list" :class="{'is-disabled': disabled }">
<div v-for="item in items" class="ui-input-list-item">
<input v-model="item.value" type="text" class="ui-input" :maxlength="maxLength" :readonly="disabled" @input="onChange" size="5" />
<ui-icon-button type="light" icon="fth-x" @click="removeItem(item)" v-if="!disabled" />
</div>
<ui-button v-if="!disabled && !plusButton" type="light" :label="addLabel" @click="addItem" />
<ui-select-button v-if="!disabled && plusButton" icon="fth-plus" :label="items.length > 0 ? null : addLabel" @click="addItem" />
<div class="ui-check-list" :class="{'is-disabled': disabled, 'is-inline': inline }">
<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[labelKey]"></span>
<span class="-desc" v-if="item[descriptionKey]" v-localize="item[descriptionKey]"></span>
</label>
</div>
</template>
<script>
export default {
name: 'uiInputList',
name: 'uiCheckList',
props: {
addLabel: {
type: String,
default: '@ui.add'
},
value: {
type: Array,
default: () => []
},
items: {
type: [Array, Function, Promise],
required: true
},
disabled: {
type: Boolean,
default: false
},
maxItems: {
type: Number,
default: 100
},
maxLength: {
type: Number,
default: 200
},
plusButton: {
inline: {
type: Boolean,
default: false
},
limit: {
type: Number,
default: 100
},
reverse: Boolean,
labelKey: {
type: String,
default: 'value'
},
descriptionKey: {
type: String,
default: 'description'
},
idKey: {
type: String,
default: 'key'
}
},
data: () => ({
items: []
list: []
}),
watch: {
value(value)
items()
{
this.reload();
this.init();
}
},
mounted()
{
this.reload();
this.init();
},
methods: {
reload()
init()
{
this.items = this.value.map(item => ({ value: item }));
},
onChange()
{
this.$emit('input', this.items.map(item => item.value));
this.$emit('change', this.items.map(item => item.value));
},
addItem()
{
this.items.push({
value: null
});
this.onChange();
this.$nextTick(() =>
if (typeof this.items === 'function')
{
this.$el.querySelector('.ui-input-list-item:last-of-type input').focus();
});
this.items().then(res =>
{
this.list = res.data;
});
}
else
{
this.list = JSON.parse(JSON.stringify(this.items));
}
},
removeItem(item)
isChecked(item)
{
const index = this.items.indexOf(item);
this.items.splice(index, 1);
this.onChange();
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[this.idKey]);
let value = JSON.parse(JSON.stringify(this.value));
if (index < 0)
{
value.push(item[this.idKey]);
}
else
{
value.splice(index, 1);
}
this.$emit('input', value);
}
}
}
</script>
<style lang="scss">
.ui-input-list
.ui-check-list-item
{
display: block;
}
.ui-input-list-item
.ui-check-list .ui-check-list-item + .ui-check-list-item
{
display: grid;
grid-template-columns: 1fr auto auto;
background: var(--color-input);
border-radius: var(--radius);
margin-bottom: 6px;
margin-top: 8px;
}
.ui-input-list.is-disabled &
{
background: transparent;
}
.ui-alias + .ui-check-list-item
{
margin-top: 14px;
}
.ui-input
{
border-radius: var(--radius) 0 0 var(--radius);
}
.ui-check-list.is-inline .ui-check-list-item
{
display: inline-block;
}
.ui-icon-button
{
border-radius: 0 var(--radius) var(--radius) 0;
height: 48px;
width: 48px;
border-left: none;
background: transparent !important;
box-shadow: none;
}
.ui-check-list.is-inline .ui-check-list-item + .ui-check-list-item
{
margin-top: 0;
margin-left: 30px;
}
.ui-icon-button + .ui-icon-button
{
margin-left: 0;
}
.ui-check-list.is-inline .ui-check-list-item .ui-native-check-toggle
{
margin-right: 6px;
}
.ui-check-list-item .-desc
{
display: inline-block;
color: var(--color-text-dim);
font-size: var(--font-size-s);
margin-left: 0.5em;
&:before { content: '('; }
&:after { content: ')'; }
}
</style>
zero.Backoffice.UI/app/components/ui-form.vue
-2
View File
@@ -143,8 +143,6 @@
this.setState('loading');
this.clearErrors();
console.info(response);
if (!response.success)
{
this.setState('error');
zero.Backoffice.UI/app/components/ui-pick.vue
+1 -1
View File
@@ -426,7 +426,7 @@
if (this.configuration.paging && typeof items === 'object' && !Array.isArray(items))
{
// TODO we need to store metadata to allow pagination
items = items.items;
items = items.data;
}
if (needsFilter)
zero.Backoffice.UI/app/core/types/zero.ts
+6 -1
View File
@@ -1,6 +1,6 @@
import { Emitter, EventType } from "mitt";
import { Component } from "vue";
import { ZeroSchema } from "zero/schemas";
import { ZeroSchema, ZeroSchemaExtension } from "zero/schemas";
export interface Zero
{
@@ -27,6 +27,11 @@ export interface Zero
**/
getSchema(alias: string): Promise<ZeroSchema | null>;
/**
* get all defined extensions for a schema
**/
getSchemaExtensions(alias: string): ZeroSchemaExtension[];
/**
* get all defined link areas
**/
zero.Backoffice.UI/app/core/types/zeroPluginOptions.ts
+3
View File
@@ -3,6 +3,7 @@ import { RouteRecordRaw } from 'vue-router';
import { App, Component } from 'vue';
import { ZeroSchemaProp } from '../zero';
import { ZeroLinkArea } from './zero';
import { ZeroSchema, ZeroSchemaExtension } from 'zero/schemas';
export interface ZeroPluginOptions
{
@@ -11,6 +12,8 @@ export interface ZeroPluginOptions
route: (route: RouteRecordRaw) => void;
schemas: Record<string, ZeroSchemaProp>;
schema: (alias: string, schema: ZeroSchemaProp) => void;
schemaExtensions: ZeroSchemaExtension[];
extendSchema: (alias: string, extension: ((schema: ZeroSchema) => void)) => void;
fieldTypes: Record<string, Component>;
fieldType: (alias: string, component: Component) => void;
linkAreas: Record<string, ZeroLinkArea>;
zero.Backoffice.UI/app/core/zeroRuntime.ts
+20 -3
View File
@@ -25,7 +25,7 @@ import
pageModulePlugin
} from '../modules';
import editorPlugin from '../editor/plugin';
import { ZeroSchema } from 'zero/schemas';
import { ZeroSchema, ZeroSchemaExtension } from 'zero/schemas';
import { ZeroSchemaProp } from './zero';
import * as zeroOptions from '../options';
import plugins from '../plugins.generated';
@@ -45,6 +45,7 @@ export class ZeroRuntime implements Zero
_installOptions: ZeroInstallOptions;
_routerConfig: RouterOptions;
_schemas: Record<string, ZeroSchemaProp> = {};
_schemaExtensions: ZeroSchemaExtension[] = [];
_fieldTypes: Record<string, Component> = {};
_linkAreas: Record<string, ZeroLinkArea> = {};
@@ -105,6 +106,7 @@ export class ZeroRuntime implements Zero
vue: this._app,
routes: this._routerConfig.routes,
schemas: this._schemas,
schemaExtensions: this._schemaExtensions,
fieldTypes: this._fieldTypes,
linkAreas: this._linkAreas,
route(route: RouteRecordRaw)
@@ -115,6 +117,10 @@ export class ZeroRuntime implements Zero
{
this.schemas[alias] = schema;
},
extendSchema(alias: string, extension: ((schema: ZeroSchema) => void))
{
this.schemaExtensions.push({ alias, extension });
},
fieldType(alias: string, component: Component) // TODO v3 allow default field options
{
this.fieldTypes[alias] = component;
@@ -171,7 +177,7 @@ export class ZeroRuntime implements Zero
**/
async getSchema(alias: string): Promise<ZeroSchema | null>
{
const schema: ZeroSchemaProp = this._schemas[alias];
let schema: ZeroSchemaProp = this._schemas[alias];
if (!schema)
{
@@ -181,13 +187,24 @@ export class ZeroRuntime implements Zero
if (typeof schema === 'function')
{
const res = await schema();
return res.default;
schema = res.default as ZeroSchema;
}
schema.alias = alias;
return Promise.resolve(schema);
}
/**
* get all defined extensions for a schema
**/
getSchemaExtensions(alias: string): ZeroSchemaExtension[]
{
return this._schemaExtensions.filter(x => x.alias == alias);
}
/**
* get all defined link areas
**/
zero.Backoffice.UI/app/editor/_fields/pagepicker.vue
-24
View File
@@ -1,24 +0,0 @@
<template>
<ui-pagepicker :config="config" :value="value" @input="$emit('input', $event)" :disabled="disabled" :limit="1" />
</template>
<script>
export default {
props: {
value: {
type: [String, Array],
default: null
},
disabled: {
type: Boolean,
default: false
},
limit: {
type: Number,
default: 1
},
config: Object
},
}
</script>
zero.Backoffice.UI/app/editor/compile.ts
+14
View File
@@ -8,6 +8,8 @@ import { ZeroEditorFieldConfiguration, ZeroEditorFieldFilterPreview } from "./ed
import { localize } from '../services/localization';
let appliedExtensionsTo: string[] = [];
export interface ZeroCompiledEditor
{
alias: string;
@@ -162,6 +164,18 @@ export function compileEditor(zero: Zero, editor: ZeroEditor): ZeroCompiledEdito
return null;
}
if (appliedExtensionsTo.indexOf(editor.alias) < 0)
{
appliedExtensionsTo.push(editor.alias);
let extensions = zero.getSchemaExtensions(editor.alias);
extensions.forEach(extension =>
{
extension.extension(editor);
});
}
let model = {
alias: editor.alias,
blueprint: null,
zero.Backoffice.UI/app/editor/editor-canvas.ts
+10
View File
@@ -21,6 +21,11 @@ export class ZeroEditorCanvasBase
this.fields.push(proxy);
return proxy;
}
getField(path: string): ZeroEditorField | undefined
{
return this.fields.find(x => x.path == path);
}
}
@@ -55,6 +60,11 @@ export class ZeroEditorCanvas extends ZeroEditorCanvasBaseWithFieldset
this.tabs.push(tab);
return tab;
}
getTab(alias: string): ZeroEditorTab | undefined
{
return this.tabs.find(x => x.alias == alias);
}
}
zero.Backoffice.UI/app/editor/fields/createFields.ts
+1
View File
@@ -6,6 +6,7 @@ export default function createFields(app: ZeroPluginOptions): void
{
app.fieldType('text', defineAsyncComponent(() => import('./text.vue')));
app.fieldType('number', defineAsyncComponent(() => import('./number.vue')));
app.fieldType('password', defineAsyncComponent(() => import('./password.vue')));
app.fieldType('toggle', defineAsyncComponent(() => import('./toggle.vue')));
app.fieldType('rte', defineAsyncComponent(() => import('./rte.vue')));
app.fieldType('output', defineAsyncComponent(() => import('./output.vue')));
zero.Backoffice.UI/app/editor/fields/editor-field-extensions.d.ts
Vendored
+8 -1
View File
@@ -22,6 +22,12 @@ declare module 'zero/schemas'
*/
number(options?: NumberFieldOptions): ZeroEditorField;
/**
* Render a password input
* @param {TextFieldOptions} [options] - Custom options
*/
password(options?: TextFieldOptions): ZeroEditorField;
/**
* Render a toggle
* @param {ToggleFieldOptions} [options] - Custom options
@@ -132,7 +138,7 @@ declare module 'zero/schemas'
export interface SelectFieldOptions
{
items: SelectFieldItem[];
items: SelectFieldItem[] | ((model: any) => SelectFieldItem[]);
emptyOption?: boolean | null;
}
@@ -156,6 +162,7 @@ declare module 'zero/schemas'
limit?: number;
reverse?: boolean | null;
labelKey?: string;
descriptionKey?: string;
idKey?: string;
}
zero.Backoffice.UI/app/editor/fields/nested.vue
+5 -3
View File
@@ -127,8 +127,6 @@
width: this.width,
});
console.info('nested result: ', result);
if (result.eventType == 'confirm')
{
if (isAdd)
@@ -141,6 +139,8 @@
this.removeItem(index);
this.items.splice(index, 0, result.value);
}
this.onChange();
}
},
@@ -154,7 +154,9 @@
onChange()
{
this.$emit('input', this.multiple ? this.items : (this.items.length > 0 ? this.items[0] : null));
let value = this.multiple ? this.items : (this.items.length > 0 ? this.items[0] : null)
this.$emit('input', value);
this.$emit('update:value', value);
},
zero.Backoffice.UI/app/editor/_fields/password.vue → zero.Backoffice.UI/app/editor/fields/password.vue
+6 -12
View File
@@ -1,28 +1,22 @@
<template>
<input :value="value" @input="$emit('input', $event.target.value)" type="password" class="ui-input" v-placeholder="{ placeholder, model: entity }" :maxlength="maxLength" :disabled="disabled" />
<input :value="value" @input="$emit('input', $event.target.value)" type="password" class="ui-input" v-placeholder="{ placeholder, model: config.model }" :maxlength="maxLength" :disabled="config.disabled" />
</template>
<script>
export default {
props: {
value: {
type: String,
default: null
},
value: String,
config: Object,
maxLength: {
type: Number,
default: null
},
disabled: {
type: Boolean,
default: false
},
placeholder: {
type: String,
type: [String, Function],
default: null
},
entity: Object
}
}
}
</script>
zero.Backoffice.UI/app/editor/fields/select.vue
+22 -10
View File
@@ -32,13 +32,15 @@
watch: {
items: {
deep: true,
handler()
handler(val)
{
this.rebuild();
this.onChange({ target: { value: this.value } });
if (typeof val !== 'function')
{
this.rebuild();
}
}
},
'config.model.addresses': {
'config.model': {
deep: true,
handler()
{
@@ -52,20 +54,24 @@
rebuild()
{
let items = [];
let options = [];
if (!this.config.model || !this.items)
{
this.options = items;
return;
options = items;
}
if (typeof this.items === 'function')
else if (typeof this.items === 'function')
{
this.options = this.items(this.config.model);
options = this.items(this.config.model);
}
else
{
this.options = [...this.items];
options = [...this.items];
}
if (JSON.stringify(options) !== JSON.stringify(this.options))
{
this.options = options;
}
},
@@ -78,7 +84,13 @@
value = null;
}
if (this.value === value)
{
return;
}
this.$emit('input', value);
this.$emit('update:value', value);
}
}
}
zero.Backoffice.UI/app/schemas/schemas.d.ts
Vendored
+6
View File
@@ -5,4 +5,10 @@ declare module 'zero/schemas'
{
alias: string;
}
export interface ZeroSchemaExtension
{
alias: string;
extension: (schema: ZeroSchema) => void;
}
}
zero.Core/Localization/CountryStore.cs
+2 -2
View File
@@ -9,8 +9,8 @@ public class CountryStore : EntityStore<Country>, ICountryStore
/// <inheritdoc />
protected override void ValidationRules(ZeroValidator<Country> validator)
{
validator.RuleFor(x => x.Code).Length(2).Unique(Session);
validator.RuleFor(x => x.Name).Length(2, 120);
validator.RuleFor(x => x.Code).NotEmpty().Length(2).Unique(Session);
validator.RuleFor(x => x.Name).NotEmpty().Length(2, 120);
}
}