Merge pull request #3 from eidng8/dev

Dev

.eslintrc.js

@@ -14,8 +14,8 @@ const rules = {
       onlyEquality: true,
     },
   ],
-  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  'no-console': 'production' === process.env.NODE_ENV ? 'error' : 'off',
+  'no-debugger': 'production' === process.env.NODE_ENV ? 'error' : 'off',
 };
 
 module.exports = {

.gitignore

@@ -1,6 +1,6 @@
 /release
 /dist
-/docs
+/docs/typedoc
 /lib
 /tests/e2e/reports
 

.npmignore

@@ -0,0 +1,2 @@
+/docs
+/typings/main.d.ts

README.md

@@ -3,3 +3,32 @@
 [![master build](https://img.shields.io/travis/com/eidng8/xml-edit?color=333&logo=travis)](https://travis-ci.com/eidng8/xml-edit) [![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/eidng8/xml-edit?color=333&logo=snyk)](https://snyk.io/test/github/eidng8/xml-edit?targetFile=package.json) [![maintainability](https://img.shields.io/codeclimate/maintainability/eidng8/xml-edit?color=333&logo=code-climate)](https://codeclimate.com/github/eidng8/xml-edit/maintainability) [![master coverage](https://img.shields.io/coveralls/github/eidng8/xml-edit/master?color=333&logo=coveralls)](https://coveralls.io/github/eidng8/xml-edit?branch=master) [![dev build](https://img.shields.io/travis/com/eidng8/xml-edit/dev?color=333&label=dev%20build&logo=travis)](https://travis-ci.com/eidng8/xml-edit/tree/dev) [![dev coverage](https://img.shields.io/coveralls/github/eidng8/xml-edit/dev?color=333&label=dev%20coverage&logo=coveralls)](https://coveralls.io/github/eidng8/xml-edit?branch=dev)
 
 A Vue.js component showing and editing XML in tree view.
+
+## Installation
+
+```bash
+npm i -S g8-xml-edit
+```
+
+## Usage
+
+```html
+<g8-xml-edit :xml="xml" />
+```
+
+## Documentation
+
+### Public
+
+https://eidng8.github.io/xml-edit/index.html
+
+### Internal
+
+- [xml-edit](docs/md/xml-edit.md)
+- [input-encoding](docs/md/inputs/input-encoding.md)
+- [input-name](docs/md/inputs/input-name.md)
+- [menu](docs/md/menus/node-menu.md)
+- [popup-attribute](docs/md/popup/popup-attribute.md)
+- [popup-box](docs/md/popup/popup-box.md)
+- [popup-declaration](docs/md/popup/popup-declaration.md)
+- [popup-node](docs/md/popup/popup-node.md)

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: ['@vue/cli-plugin-babel/preset'],
 };

docgen.config.js

@@ -7,5 +7,5 @@
 module.exports = {
   componentsRoot: 'src/components',
   components: '**/*.vue',
-  outDir: 'docs',
+  outDir: 'docs/md',
 };

docs/md/inputs/input-encoding.md

@@ -0,0 +1,15 @@
+# input-encoding
+
+> An HTML input field for entering character encoding. It uses [iconv-lite](https://www.npmjs.com/package/iconv-lite) to validate the input.
+
+## Props
+
+| Prop name | Description   | Type         | Values | Default |
+| --------- | ------------- | ------------ | ------ | ------- |
+| value     | Input's value | XmlAttribute | -      |         |
+
+## Events
+
+| Event name | Type       | Description                        |
+| ---------- | ---------- | ---------------------------------- |
+| input      | InputEvent | Emitted when there is valid input. |

docs/md/inputs/input-name.md

@@ -0,0 +1,15 @@
+# input-name
+
+> An HTML input field for entering XML tag name. It uses [XRegExp](http://xregexp.com/) to validate the input.
+
+## Props
+
+| Prop name | Description   | Type  | Values | Default |
+| --------- | ------------- | ----- | ------ | ------- |
+| node      | Input's value | union | -      |         |
+
+## Events
+
+| Event name | Type       | Description                        |
+| ---------- | ---------- | ---------------------------------- |
+| input      | InputEvent | Emitted when there is valid input. |

docs/md/menus/node-menu.md

@@ -0,0 +1,10 @@
+# node-menu
+
+> Generate menu for a tree node.
+
+## Events
+
+| Event name | Type          | Description                               |
+| ---------- | ------------- | ----------------------------------------- |
+| select     | G8MenuItem    | Emitted when a menu item has be selected. |
+| menu-open  | MenuOpenEvent |

docs/md/popup/popup-attribute.md

@@ -0,0 +1,16 @@
+# popup-attribute
+
+> Popup box for editing attribute.
+
+## Props
+
+| Prop name | Description     | Type         | Values | Default |
+| --------- | --------------- | ------------ | ------ | ------- |
+| attribute | Attribute value | XmlAttribute | -      |         |
+
+## Events
+
+| Event name | Type               | Description                         |
+| ---------- | ------------------ | ----------------------------------- |
+| save       | SaveNodePopupEvent | The `save` button has been pressed. |
+| close      | UIEvent            | The popup has been closed.          |

docs/md/popup/popup-box.md

@@ -0,0 +1,25 @@
+# popup-box
+
+> Popup box
+
+## Props
+
+| Prop name | Description | Type | Values | Default |
+| --- | --- | --- | --- | --- |
+| message | Message to be shown in the popup box. | string | - |  |
+| messageHint | Message tooltip to the popup box message. | string | - |  |
+
+## Events
+
+| Event name | Type               | Description                         |
+| ---------- | ------------------ | ----------------------------------- |
+| close      | UIEvent            | The popup has been closed.          |
+| save       | SaveNodePopupEvent | The `save` button has been pressed. |
+
+## Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| title   |             |          |
+| default |             |          |
+| footer  |             |          |

docs/md/popup/popup-declaration.md

@@ -0,0 +1,16 @@
+# popup-declaration
+
+> Popup box for editing XML declaration.
+
+## Props
+
+| Prop name | Description            | Type           | Values | Default |
+| --------- | ---------------------- | -------------- | ------ | ------- |
+| node      | The node to be edited. | XmlDeclaration | -      |         |
+
+## Events
+
+| Event name | Type      | Description                                         |
+| ---------- | --------- | --------------------------------------------------- |
+| save       | undefined | The node passed in the `data` field shall be saved. |
+| close      | UIEvent   | The popup has been closed.                          |

docs/md/popup/popup-node.md

@@ -0,0 +1,16 @@
+# popup-node
+
+> Popup box for editing XML node.
+
+## Props
+
+| Prop name | Description            | Type    | Values | Default |
+| --------- | ---------------------- | ------- | ------ | ------- |
+| node      | The node to be edited. | XmlNode | -      |         |
+
+## Events
+
+| Event name | Type | Description |
+| --- | --- | --- |
+| save | SaveNodePopupEvent | The node passed in the `data` field shall be saved. |
+| close | UIEvent | The popup has been closed. |

docs/md/xml-edit.md

@@ -0,0 +1,42 @@
+# g8-xml-edit
+
+> Presents an XML document in tree view for editing.
+
+## Installation
+
+```bash
+npm i -S g8-xml-edit
+```
+
+## Usage
+
+```html
+<g8-xml-edit :xml="xml" />
+```
+
+## Props
+
+| Prop name | Description | Type | Values | Default |
+| --- | --- | --- | --- | --- |
+| showAttrValue | Whether to show attribute value in tree item badges. | boolean | `true`, `false` | false |
+| piUseAttribute | Set to `false` to treat processing instruction as text;<br>or `true` to facilitate attributes. | boolean | `true`, `false` | false |
+| xml | Input XML content. This component doesn't mutate the input XML content. | string | `XML string` |  |
+
+## Events
+
+| Event name | Type | Description |
+| --- | --- | --- |
+| menu-open | MenuOpenEvent | A menu item has been selected. |
+| default-declaration | DefaultDeclarationEvent | Emitted when the input XML document doesn't have declaration. |
+| xml-reload | XmlReloadEvent | Emits when XML document has been reloaded. The `detail.document` field<br>holds the newly loaded XML object.<br>Please note that this event is fired only when {@see reloadXml} is<br>called. Changing the {@see xml} property will _not_ trigger this event. |
+| select-node | SelectNodeEvent | Emitted when a node in the tree view has been selected. |
+| edit-node | EditNodeEvent | A node is about to be edited. |
+| save-node | SaveNodeEvent | A node is about to be saved. |
+| declaration-changed | DeclarationChangedEvent | The XML declaration has been changed. |
+| node-changed | NodeChangedEvent | An XML node has been changed. |
+| node-created | NodeCreatedEvent | A new XML node has been created. |
+| edit-attribute | EditAttributeEvent | An attribute is about to be edited. |
+| save-attribute | SaveAttributeEvent | An attribute is about to be saved. |
+| attribute-changed | AttributeChangedEvent | A XML node attribute has been changed. |
+| delete-node | DeleteNodeEvent | A node is about to be deleted. |
+| node-removed | NodeRemovedEvent | A new XML node has been deleted. |