@nixweb/nixloc-ui 0.0.98 → 0.0.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.98",
+  "version": "0.0.101",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -10,10 +10,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-vue2": "^2.0.0",
     "@babel/polyfill": "^7.2.5",
     "bootstrap-vue": "^2.0.0-rc.11",
+    "ckeditor5-custom-build": "file:ckeditor5",
     "sass-loader": "^12.4.0",
     "vodal": "^2.4.0",
+    "v-runtime-template": "^1.10.0",
     "vue-color": "^2.7.0",
     "vue-html2pdf": "^1.8.0",
     "vue-json-excel": "^0.3.0",
@@ -39,7 +42,8 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "script-loader": "^0.7.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.46.0"
   },
   "eslintConfig": {
     "root": true,
@@ -69,4 +73,4 @@
     "type": "git",
     "url": "git+https://github.com/nixweb-sistemas/nixloc-ui.git"
   }
-}
+}

package/src/component/forms/TextoArea.vue

@@ -36,7 +36,6 @@ import { mapState, mapMutations } from "vuex";
 export default {
   components: { Dica },
   name: "TextoArea",
-  mixins: [],
   props: {
     titulo: String,
     campo: String,

package/src/component/shared/DocumentoEditor.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div class="form-group row">
+      <div>
+        <div class="document-editor__toolbar"></div>
+        <div class="document-editor__editable-container">
+          <ckeditor :editor="editor" v-model="template" @ready="onReady"></ckeditor>
+        </div>
+      </div>
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import CKEditor from "ckeditor5-custom-build/build/ckeditor";
+
+export default {
+  name: "HtmlEditor",
+  components: {
+    CKEditor,
+  },
+  props: {
+    value: String,
+  },
+  data() {
+    return {
+      editor: CKEditor,
+      template: "",
+    };
+  },
+  methods: {
+    onReady(editor) {
+      const toolbarContainer = document.querySelector(".document-editor__toolbar");
+      toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+    },
+  },
+  watch: {
+    template() {
+      this.$emit("input", this.template);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.document-editor {
+  border-radius: var(--ck-border-radius);
+  max-height: 700px;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.document-editor__toolbar {
+  z-index: 1 !important;
+  min-width: 1100px;
+}
+
+.document-editor__toolbar .ck-toolbar {
+  border-radius: 0;
+}
+
+.document-editor__editable-container {
+  padding: 10px;
+  border: 1px solid #e4e6ec;
+  background: var(--ck-color-base-foreground);
+  overflow-y: scroll;
+}
+
+.document-editor__editable-container .ck-editor__editable {
+  width: 20.8cm;
+  min-height: 21cm;
+  padding: 20px;
+  border: 1px hsl(0, 0%, 82.7%) solid;
+  border-radius: var(--ck-border-radius);
+  background: white;
+  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1);
+  margin: 0 auto;
+}
+
+.document-editor .ck-content,
+.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
+  font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/* Adjust the headings dropdown to host some larger heading styles. */
+.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
+  line-height: calc(1.7 * var(--ck-line-height-base) * var(--ck-font-size-base));
+  min-width: 6em;
+}
+
+/* Scale down all heading previews because they are way too big to be presented in the UI.
+    Preserve the relative scale, though. */
+.document-editor
+  .ck-heading-dropdown
+  .ck-list
+  .ck-button:not(.ck-heading_paragraph)
+  .ck-button__label {
+  transform: scale(0.8);
+  transform-origin: left;
+}
+
+/* Set the styles for "Heading 1". */
+.document-editor .ck-content h2,
+.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
+  font-size: 2.18em;
+  font-weight: normal;
+}
+
+.document-editor .ck-content h2 {
+  line-height: 1.37em;
+  padding-top: 0.342em;
+  margin-bottom: 0.142em;
+}
+
+/* Set the styles for "Heading 2". */
+.document-editor .ck-content h3,
+.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
+  font-size: 1.75em;
+  font-weight: normal;
+  color: hsl(203, 100%, 50%);
+}
+
+.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
+  color: var(--ck-color-list-button-on-text);
+}
+
+/* Set the styles for "Heading 2". */
+.document-editor .ck-content h3 {
+  line-height: 1.86em;
+  padding-top: 0.171em;
+  margin-bottom: 0.357em;
+}
+</style>

package/src/component/shared/DocumentoPreview.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <v-runtime-template :template="template" />
+  </div>
+</template>
+
+<script>
+import VRuntimeTemplate from "v-runtime-template";
+
+export default {
+  name: "HtmlPreview",
+  components: {
+    VRuntimeTemplate,
+  },
+  props: {
+    template: String,
+  },
+  data() {
+    return {
+      nome: "Fábio",
+      sobrenome: "Gomes de Ávila",
+    };
+  },
+};
+</script>