Skip to content

CodeCoupler DOM Basics Form 🔒

What is this?

When you display multiple input elements on a page, what do you get? That's right, a form. That is precisely the purpose of this library. It helps you combine the input elements you get with the “Editor” library into a form.

Setup

Install Bundle, Base Extensions, Dependencies:

1
2
3
4
npm i vue luxon dompurify \
  @codecoupler-pro/ui-bundle \
  @codecoupler-pro/dom-editor-extensions-base \
  @codecoupler/js-bundle

Define Aliases, Externals and Assets:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{
  module: "vue",
  global: "Vue",
  entries: ["dist/vue.runtime.global.prod.js"]
},
{
  module: "luxon",
  global: "luxon",
  entries: ["build/global/luxon.min.js"]
},
{
  module: "dompurify",
  global: "DOMPurify",
  entries: ["dist/purify.min.js"]
},
{
  module: "@codecoupler/js-bundle",
  global: ["codecoupler", "js", "bundle"],
  entries: ["dist/codecoupler-js-bundle.js"]
},
{
  module: "@codecoupler-pro/dom-editor",
  global: ["codecoupler", "dom", "editor"]
},
{
  module: "@codecoupler-pro/dom-form",
  global: ["codecoupler", "dom", "form"]
},
{
  module: "@codecoupler-pro/ui-bundle",
  global: ["codecoupler", "ui", "bundle"],
  entries: [
    "dist/codecoupler-pro-ui-bundle.js",
    "dist/codecoupler-pro-ui-bundle.css"
  ]
},
{
  module: "@codecoupler-pro/dom-editor-extensions-base",
  entries: ["dist/codecoupler-pro-dom-editor-extensions-base.js"],
  copy: ["dist/parts"]
}

Basic Usage

Set global variable (read the chapter Loading the Extensions for more details):

1
2
3
4
window.codecoupler.ui.editorExtensions.base.$publicPath =
  window.externalsPath[process.env.PACKAGE_NAME][
    "@codecoupler-pro/dom-editor-extensions-base"
  ] + "/dist/";

Use in JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { createApp } from "vue";
import { Form } from "@codecoupler-pro/dom-form";
let app = createApp(Form, {
  values: {
    editor1: "Editor Value 1",
    editor2: "Editor Value 2",
    editor3: "Editor Value 3"
  },
  editors: {
    editor1: {
      type: "string",
      label: "Editor 1"
    },
    editor2: {
      type: "string",
      label: "Editor 2"
    },
    editor3: {
      type: "string",
      label: "Editor 3"
    }
  },
  "onUpdate:values": (values) => {
    // Access here the updates values object
  }
});
let vue = app.mount(div);

Use as Vue Component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <editor-form v-model:values="values" :editors="editors"></editor-form>
</template>
<script>
import { Form as EditorForm } from "@codecoupler-pro/dom-form";
export default {
  components: { EditorForm },
  data: function () {
    return {
      values: {
        editor1: "Editor Value 1",
        editor2: "Editor Value 2",
        editor3: "Editor Value 3"
      },
      editors: {
        editor1: {
          type: "string",
          label: "Editor 1"
        },
        editor2: {
          type: "string",
          label: "Editor 2"
        },
        editor3: {
          type: "string",
          label: "Editor 3"
        }
      }
    };
  }
};
</script>