++

zero.Backoffice.UI/app/editor/editor.d.ts

@@ -0,0 +1,24 @@
+
+
+declare module 'zero/editor'
+{
+  export interface FieldSupportsMaxLength
+  {
+    maxLength?: number;
+  }
+
+  export interface FieldSupportsPlaceholder
+  {
+    placeholder?: string;
+  }
+
+  export type TextFieldOptions = FieldSupportsMaxLength | FieldSupportsPlaceholder;
+  export type NumberFieldOptions = FieldSupportsMaxLength | FieldSupportsPlaceholder;
+
+
+  export interface EditorField
+  {
+    text(options?: TextFieldOptions): void;
+    number(options?: NumberFieldOptions): void;
+  }
+}

zero.Backoffice.UI/app/editor/editorFieldProxy.ts

@@ -0,0 +1,15 @@
+import { EditorField } from "zero/editor";
+
+export const fieldTypes: Record<string, any> = {};
+
+export const proxy = new Proxy(fieldTypes, {
+
+  get(target, handler)
+  {
+    console.info({ target, handler });
+    return target[handler];
+  }
+
+}) as EditorField;
+
+//var field = editor.field('name').text("hallo");

zero.Backoffice.UI/app/editor/fields/text.vue

@@ -0,0 +1,32 @@
+<template>
+  <input :value="value" @input="$emit('input', $event.target.value)" type="text" class="ui-input" v-placeholder="{ placeholder: options.placeholder, model: entity }" :maxlength="options.maxLength" :disabled="disabled" />
+</template>
+
+
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import { TextFieldOptions } from 'zero/editor';
+
+  export default defineComponent({
+    props: {
+      value: {
+        type: String,
+        default: null
+      },
+      maxLength: {
+        type: Number,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      placeholder: {
+        type: [String, Function],
+        default: null
+      },
+      entity: Object,
+      options: Object as PropType<TextFieldOptions>
+    }
+  });
+</script>

zero.Backoffice.UI/app/editor/tests/_testcmp.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="testcmp">
+    testcmp
+  </div>
+</template>
+
+
+
+// @ts-ignore
+<script lang="ts">
+
+  import { defineComponent } from 'vue';
+
+  interface Props
+  {
+    maxLength: number;
+    placeholder: string | Function;
+  }
+
+  //function TestCmpOptions(maxLength?: number, placeholder?: string)
+  //{
+  //  this.maxLenght =
+  //}
+
+  export default defineComponent({
+    name: 'editorTestCmp',
+
+    props: {
+      options: {
+        type: Object as Props,
+        default: {
+          maxLength: null,
+          placeholder: null
+        } as Props
+      }
+    },
+
+    data: () => ({
+
+    }),
+
+    mounted()
+    {
+
+    },
+
+    methods: {
+
+    }
+
+  });
+</script>
+
+<style lang="scss">
+</style>

zero.Backoffice.UI/app/editor/tests/types.ts

@@ -0,0 +1,120 @@
+
+import { Component, ComponentPropsOptions } from 'vue';
+import { proxy, fieldTypes } from '../editorFieldProxy';
+import TestCmp from './_testcmp.vue';
+
+export interface ZeroEditor
+{
+  
+}
+
+
+export interface ZeroFieldType
+{
+  component: Promise<Component>;
+  options: any;
+}
+
+
+
+
+//const testField = {
+//  component: () => import('./_testcmp.vue'),
+//  options: {
+//    maxLength: {
+//      type: Number,
+//      default: null
+//    },
+//    placeholder: {
+//      type: [String, Function],
+//      default: null
+//    }
+//  }
+
+//} as ZeroFieldType;
+
+
+export class ZeroEditorCanvasBase<TModel>
+{
+  field<TField>(path: string, component: Component): ZeroEditorField<TModel, TField>
+  {
+    return new ZeroEditorField(path, component);
+  }
+}
+
+
+export class ZeroEditorCanvasBaseWithFieldset<TModel> extends ZeroEditorCanvasBase<TModel>
+{
+  fieldset(): ZeroEditorCanvasBase<TModel>
+  {
+    return new ZeroEditorCanvasBase();
+  }
+}
+
+
+export class ZeroEditorCanvas<TModel> extends ZeroEditorCanvasBaseWithFieldset<TModel>
+{
+  tab(alias: string, name: string): ZeroEditorTab<TModel>
+  {
+    return new ZeroEditorTab(alias, name);
+  }
+}
+
+
+export class ZeroEditorTab<TModel> extends ZeroEditorCanvasBaseWithFieldset <TModel>
+{
+  alias: string;
+  name: string;
+
+  constructor(alias: string, name: string)
+  {
+    super();
+    this.alias = alias;
+    this.name = name;
+  }
+}
+
+
+export declare type BooleanExpression<TModel, TField> = (model: TModel, value: TField) => boolean;
+
+
+export class ZeroEditorField<TModel, TField>
+{
+  path: string;
+  component: Component;
+
+  constructor(path: string, component: Component)
+  {
+    this.path = path;
+    this.component = component;
+  }
+
+  when(condition: BooleanExpression<TModel, TField>): ZeroEditorField<TModel, TField>
+  {
+    return this;
+  }
+
+  required(required: boolean | BooleanExpression<TModel, TField>): ZeroEditorField<TModel, TField>
+  {
+    return this;
+  }
+
+  configure(opts: ComponentPropsOptions)
+  {
+
+  }
+}
+
+
+export function test()
+{
+  fieldTypes.text = (maxLength?: number, placeholder?: string | Function) => console.log(`text() called with maxLength: ${maxLength}, placeholder: ${placeholder}`);
+
+  proxy.text(17, 'Enter your text...');
+
+  //var editor = new ZeroEditorCanvas<any>();
+
+  //editor.field('hi', TestCmp)
+
+  //console.info(TestCmp.);
+}

zero.Backoffice.UI/app/editor/types.ts

@@ -1,81 +0,0 @@
-
-export interface ZeroEditor
-{
-  
-}
-
-
-export class ZeroFieldComponent // TODO this needs to extend a vue component
-{
-
-}
-
-export class ConfigurableZeroFieldComponent<TConfiguration = any> extends ZeroFieldComponent
-{
-
-}
-
-
-export class ZeroEditorCanvasBase<TModel>
-{
-  field<TField, TConfiguration>(path: string, component: ZeroFieldComponent | ConfigurableZeroFieldComponent<TConfiguration>): ZeroEditorField<TModel, TField, TConfiguration>
-  {
-    return new ZeroEditorField();
-  }
-}
-
-
-export class ZeroEditorCanvasBaseWithFieldset<TModel> extends ZeroEditorCanvasBase<TModel>
-{
-  fieldset(): ZeroEditorCanvasBase<TModel>
-  {
-    return new ZeroEditorCanvasBase();
-  }
-}
-
-
-export class ZeroEditorCanvas<TModel> extends ZeroEditorCanvasBaseWithFieldset<TModel>
-{
-  tab(alias: string, name: string): ZeroEditorTab<TModel>
-  {
-    return new ZeroEditorTab(alias, name);
-  }
-}
-
-
-export class ZeroEditorTab<TModel> extends ZeroEditorCanvasBaseWithFieldset <TModel>
-{
-  alias: string;
-  name: string;
-
-  constructor(alias: string, name: string)
-  {
-    super();
-    this.alias = alias;
-    this.name = name;
-  }
-}
-
-
-export declare type BooleanExpression<TModel, TField> = (model: TModel, value: TField) => boolean;
-
-
-export class ZeroEditorField<TModel, TField, TConfiguration>
-{
-  when(condition: BooleanExpression<TModel, TField>): ZeroEditorField<TModel, TField, TConfiguration>
-  {
-    return this;
-  }
-
-  required(required: boolean | BooleanExpression<TModel, TField>): ZeroEditorField<TModel, TField, TConfiguration>
-  {
-    return this;
-  }
-}
-
-
-//var editor = new ZeroEditorCanvas<any>();
-
-//editor.field('hi', null);
-//editor.fieldset();
-//editor.tab('hi', 'ho').

zero.Backoffice.UI/app/modules/countries/plugin.ts

@@ -1,5 +1,8 @@
 import { ZeroPlugin, ZeroPluginOptions } from '../../core';
 import { defineAsyncComponent } from 'vue';
+import { test } from '../../editor/tests/types';
+import { proxy, fieldTypes } from '../../editor/editorFieldProxy';
+import { TextFieldOptions } from 'zero/editor';
 
 const Picker = () => import('./ui-countrypicker.vue');
 const Page = () => import('./_page.vue');
@@ -12,7 +15,12 @@ export default {
     app.vue.component('ui-countrypicker', defineAsyncComponent(Picker));
     app.route({ path: '/countries', component: Page });
 
-    app.editor('country', null);
-    app.editorField('')
+    //app.editor('country', null);
+    //app.editorField('')
+    test();
+
+    fieldTypes.number = (maxLength?: number, placeholder?: string | Function) => console.log(`number() called with maxLength: ${maxLength}, placeholder: ${placeholder}`);
+
+    proxy.number({ maxLength: 17, placeholder: 'Enter your number...' });
   }
 } as ZeroPlugin;