jiezaizone / metaui

a meta-data driven ui(web component based) framework

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Published on webcomponents.org

Published on Vaadin  Directory Stars on vaadin.com/directory

Introduces

A metadata-driven front-end framework, which you can easily create a component in your web app with metadata.

Tutorials

Installation

bower install git://github.com/isuwang/metaui.git

Example

<m2-crud metadata="{{metadata}}"></m2-crud>
metadata = {
  query: {
    formUrl: "/query.do",
    fields: [
      {
        name: "username",
        label: "Username",
        editable: true
      }
    ]
  },
  result: {
    grids: [
      {
        name: "username",
        label: "Username"
      },
      {
        name: "phone",
        label: "Phone"
      },
      {
        name: "addr",
        label: "Addr"
      },
      {
        metaType: {type: "ACTION"},
        name: "actions",
        label: "Actions"
      }
    ],
    actions: {
      "record-delete": {
        actionId: "record-delete",
        actionName: "DELETE",
        operType: 2,
        formMeta: {
          formUrl: "/url-to-send-form",
          confirm: "Sure to submit?",
          fields: [
            {
              name: "phone",
              label: "Phone"
            },
          ],
        }
      },
      "record-edit": {
        actionId: "record-edit",
        actionName: "Edit",
        operType: 2,
        formMeta: {
          formUrl: "/url-to-send-form",
          confirm: "Sure to submit?",
          fields: [
            {
              name: "username",
              label: "Username",
              visible:true,
              editable:true
            },
            {
              name: "phone",
              label: "Phone",
              visible:true,
              editable:true
            },
            {
              name: "addr",
              label: "Addr",
              visible:true,
              editable:true
            }
          ],
        }
      }
    }
  }
};

ui

Create custom style

In most of <m2-*/> components, you can custom your own style sheets, use the selectors just like you used in the <style> tag.

metadata.style = `
  .container {
    display: flex;
    justify-content: flex-end;
  }
  .container__item {
    width: 100px;
  }
`;

Create custom widgets

A widget is an element nested in a <m2-field>. Metaui provides four internal widgets(<m2-text><m2-text-area><m2-select-list<m2-radio-group>, maybe more in the future). But in fact, you can use almost all <m2-*> components as your widget. Also, you can create your own widgets.

  • Create your polymer element.

    <link rel="import" href="m2-widget-base.html">
    <dom-module id="your-widget-name">
      <template>
        <!--your code here-->
        
        <!--eg.-->
        <!--<paper-input-->
        <!--          id="input"-->
        <!--          always-float-label-->
        <!--          value="{{ value }}"-->
        <!--          label="[[ metadata.label ]]"-->
        <!--          auto-validate-->
        <!--          required="[[ metadata.required]]"-->
        <!--          error-message="[[ metadata.prompt ]]"-->
        <!--          min="[[ metadata.min ]]"-->
        <!--          minlength="[[ metadata.minLength ]]"-->
        <!--          max="[[ metadata.max ]]"-->
        <!--          maxlength="[[ metadata.maxLength ]]"-->
        <!--          pattern="[[ metadata.regexp ]]"-->
        <!--          readonly="[[ !metadata.editable ]]">-->
        <!--  </paper-input>-->
      </template>
      <script>
    
      class YourWidget extends M2WidgetBase {
        static get is() {
          return "your-widget-name";
        }
        /**
         * Before a form being submitted, validate() will be called automatically to check if the value is legal.
         * You can override it if needed.
         */
        validate() {
          // return this.$.input.validate();
          return true;
        }
        // more methods here
      }
      customElements.define(YourWidget.is, YourWidget);
      </script>
    </dom-module>

    Notice: Your must maintenance the value property of your widget. And don't forget to import your element in your index page.

  • Configure in the metadata. See more about FieldMeta

    fieldMeta = {
      elememt: "your-widget-name",
      label: "<labelForName>",
      name: "<someName>",
      required: true,
      editable: true
    }
    

About

a meta-data driven ui(web component based) framework

License:MIT License


Languages

Language:HTML 100.0%