@nixweb/nixloc-ui 1.17.0 → 1.20.0

package/@nixweb/nixloc-ui/src/component/shared/Collapse.vue

@@ -1,131 +1,131 @@
-<template>
-  <div>
-    <div class="line-arrow" v-if="type == 'arrow'">
-      <div class="arrow" @click="show" v-if="!showCollapse">
-        <b-row>
-          <b-col sm="6" class="text-left">
-            <span class="title">{{ title }}</span>
-          </b-col>
-          <b-col sm="6" class="text-right">
-            <i class="far fa-plus"></i>
-          </b-col>
-        </b-row>
-      </div>
-      <div class="arrow" @click="hide" v-if="showCollapse">
-        <b-row>
-          <b-col sm="6" class="text-left">
-            <span class="title">{{ title }}</span>
-          </b-col>
-          <b-col sm="6" class="text-right">
-            <i class="far fa-minus"></i>
-          </b-col>
-        </b-row>
-      </div>
-    </div>
-    <b-collapse id="collapse-4" v-model="showCollapse" class="mt-2">
-      <slot></slot>
-    </b-collapse>
-    <div v-if="type == 'button'">
-      <b-row>
-        <b-col sm="12">
-          <div class="text-center">
-            <Button
-              v-if="!showCollapse"
-              :title="buttonShow.title"
-              :classIcon="buttonShow.icon"
-              :type="buttonShow.type"
-              size="small"
-              :clicked="show"
-            />
-          </div>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col>
-          <div class="text-center">
-            <Button
-              v-if="showCollapse"
-              key="hideCollapse"
-              :title="buttonHide.title"
-              :classIcon="buttonHide.icon"
-              :type="buttonHide.type"
-              size="small"
-              :clicked="hide"
-            />
-          </div>
-        </b-col>
-      </b-row>
-    </div>
-  </div>
-</template>
-
-<script>
-import Button from "../forms/Button.vue";
-
-import { mapMutations } from "vuex";
-
-export default {
-  components: { Button },
-  name: "Collapse",
-  props: {
-    buttonShow: Object,
-    buttonHide: Object,
-    type: {
-      type: String,
-      default: "button",
-    },
-    title: String,
-    startOpen: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      showCollapse: false,
-    };
-  },
-  created() {
-    this.showCollapse = this.startOpen;
-  },
-  methods: {
-    ...mapMutations("generic", ["removeLoading"]),
-    show() {
-      let self = this;
-      setTimeout(function () {
-        self.showCollapse = true;
-      }, 200);
-      this.removeLoadingButton();
-    },
-    hide() {
-      let self = this;
-      setTimeout(function () {
-        self.showCollapse = false;
-      }, 200);
-      this.removeLoadingButton();
-    },
-    removeLoadingButton() {
-      this.removeLoading(["showCollapse", "hideCollapse"]);
-    },
-  },
-};
-</script>
-<style scoped>
-.arrow {
-  font-size: 14px;
-  color: #577696;
-  cursor: pointer;
-  margin-bottom: 10px;
-}
-
-.title {
-  font-size: 16px;
-  margin-left: 5px;
-}
-
-.line-arrow {
-  border-top: solid 1px #dbdfe9;
-  margin-top: 10px;
-  padding-top: 10px;
-}
-</style>
+<template>
+  <div>
+    <div class="line-arrow" v-if="type == 'arrow'">
+      <div class="arrow" @click="show" v-if="!showCollapse">
+        <b-row>
+          <b-col sm="6" class="text-left">
+            <span class="title">{{ title }}</span>
+          </b-col>
+          <b-col sm="6" class="text-right">
+            <i class="far fa-plus"></i>
+          </b-col>
+        </b-row>
+      </div>
+      <div class="arrow" @click="hide" v-if="showCollapse">
+        <b-row>
+          <b-col sm="6" class="text-left">
+            <span class="title">{{ title }}</span>
+          </b-col>
+          <b-col sm="6" class="text-right">
+            <i class="far fa-minus"></i>
+          </b-col>
+        </b-row>
+      </div>
+    </div>
+    <b-collapse id="collapse-4" v-model="showCollapse" class="mt-2">
+      <slot></slot>
+    </b-collapse>
+    <div v-if="type == 'button'">
+      <b-row>
+        <b-col sm="12">
+          <div class="text-center">
+            <Button
+              v-if="!showCollapse"
+              :title="buttonShow.title"
+              :classIcon="buttonShow.icon"
+              :type="buttonShow.type"
+              size="small"
+              :clicked="show"
+            />
+          </div>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col>
+          <div class="text-center">
+            <Button
+              v-if="showCollapse"
+              key="hideCollapse"
+              :title="buttonHide.title"
+              :classIcon="buttonHide.icon"
+              :type="buttonHide.type"
+              size="small"
+              :clicked="hide"
+            />
+          </div>
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "../forms/Button.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  components: { Button },
+  name: "Collapse",
+  props: {
+    buttonShow: Object,
+    buttonHide: Object,
+    type: {
+      type: String,
+      default: "button",
+    },
+    title: String,
+    startOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showCollapse: false,
+    };
+  },
+  created() {
+    this.showCollapse = this.startOpen;
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    show() {
+      let self = this;
+      setTimeout(function () {
+        self.showCollapse = true;
+      }, 200);
+      this.removeLoadingButton();
+    },
+    hide() {
+      let self = this;
+      setTimeout(function () {
+        self.showCollapse = false;
+      }, 200);
+      this.removeLoadingButton();
+    },
+    removeLoadingButton() {
+      this.removeLoading(["showCollapse", "hideCollapse"]);
+    },
+  },
+};
+</script>
+<style scoped>
+.arrow {
+  font-size: 14px;
+  color: #577696;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 16px;
+  margin-left: 5px;
+}
+
+.line-arrow {
+  border-top: solid 1px #dbdfe9;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+</style>

package/@nixweb/nixloc-ui/src/component/shared/Confirmation.vue

@@ -1,74 +1,74 @@
-<template>
-  <div>
-    <div @click="execute()">
-      <slot></slot>
-    </div>
-    <Modal v-if="isModal" :title="title" :width="450" :height="250" v-show="showModal(`confirmation${data.id}`)">
-      <b-col sm="12">
-        <div class="div-button text-center">
-          <Button key="notConfirm" type="edit" title="cancel" :disabled="disabled" size="small" :clicked="cancel" />
-          <Button key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled"
-            :clicked="confirm" />
-        </div>
-      </b-col>
-    </Modal>
-    <div v-else class="div-button text-center">
-      <Button _key="notConfirm" type="edit" title="cancel" size="small" :disabled="disabled" :clicked="cancel" />
-      <Button _key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled" :clicked="confirm" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
-
-import { mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "Confirmation",
-  components: {
-    Button,
-    Modal,
-  },
-  props: {
-    title: String,
-    type: String,
-    data: Object,
-    isModal: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    confirmed: Function,
-  },
-  methods: {
-    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
-    execute() {
-      this.openModal(`confirmation${this.data.id}`);
-    },
-    confirm() {
-      let self = this;
-      setTimeout(function () {
-        if (self.confirmed) self.confirmed(self.data);
-      }, 200);
-    },
-    cancel() {
-      this.removeLoading(["notConfirm"]);
-      this.hideModal();
-    },
-  },
-  computed: {
-    ...mapGetters("generic", ["showModal", "event"]),
-  },
-};
-</script>
-<style scoped>
-.div-button {
-  padding-top: 20px;
-  height: 100px;
-}
-</style>
+<template>
+  <div>
+    <div @click="execute()">
+      <slot></slot>
+    </div>
+    <Modal v-if="isModal" :title="title" :width="450" :height="250" v-show="showModal(`confirmation${data.id}`)">
+      <b-col sm="12">
+        <div class="div-button text-center">
+          <Button key="notConfirm" type="edit" title="cancel" :disabled="disabled" size="small" :clicked="cancel" />
+          <Button key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled"
+            :clicked="confirm" />
+        </div>
+      </b-col>
+    </Modal>
+    <div v-else class="div-button text-center">
+      <Button _key="notConfirm" type="edit" title="cancel" size="small" :disabled="disabled" :clicked="cancel" />
+      <Button _key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled" :clicked="confirm" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Confirmation",
+  components: {
+    Button,
+    Modal,
+  },
+  props: {
+    title: String,
+    type: String,
+    data: Object,
+    isModal: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    confirmed: Function,
+  },
+  methods: {
+    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
+    execute() {
+      this.openModal(`confirmation${this.data.id}`);
+    },
+    confirm() {
+      let self = this;
+      setTimeout(function () {
+        if (self.confirmed) self.confirmed(self.data);
+      }, 200);
+    },
+    cancel() {
+      this.removeLoading(["notConfirm"]);
+      this.hideModal();
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+  },
+};
+</script>
+<style scoped>
+.div-button {
+  padding-top: 20px;
+  height: 100px;
+}
+</style>

package/@nixweb/nixloc-ui/src/component/shared/DocumentEditor.vue

@@ -1,99 +1,99 @@
-<template>
-  <div>
-    <div class="form-group">
-      <div>
-        <div class="document-editor__toolbar"></div>
-        <div class="document-editor__editable-container">
-          <div id="template-dev">
-            <ckeditor :editor="editor" v-model="computedDocumentHtml" @ready="onReady" @focus="changed"></ckeditor>
-          </div>
-        </div>
-      </div>
-    </div>
-    <br />
-  </div>
-</template>
-
-<script>
-import CKEditor from "ckeditor5-custom-build/build/ckeditor";
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  name: "DocumentEditor",
-  props: ["editMode"],
-  components: {
-    CKEditor,
-  },
-  data() {
-    return {
-      editor: CKEditor,
-    };
-  },
-  computed: {
-    ...mapState("generic", ["documentHtml", "documentHtmlFinal"]),
-    computedDocumentHtml: {
-      get() {
-        if (this.editMode) {
-          return this.documentHtmlFinal
-        } else {
-          return this.documentHtml;
-        }
-      },
-      set(newValue) {
-        if (this.editMode) {
-          this.updateDocumentHtmlFinal(newValue);
-        } else {
-          this.updateDocumentHtml(newValue);
-        }
-      },
-    },
-  },
-  methods: {
-    ...mapMutations("generic", ["updateDocumentHtmlFinal", "updateDocumentHtml", "addEvent"]),
-    onReady(editor) {
-      const toolbarContainer = document.querySelector(".document-editor__toolbar");
-      toolbarContainer.appendChild(editor.ui.view.toolbar.element);
-    },
-    changed() {
-      this.addEvent({ name: "documentEditorChanged" });
-    },
-  },
-};
-</script>
-
-<style scoped>
-/* Estilos do seu componente */
-.document-editor {
-  border-radius: var(--ck-border-radius);
-  max-height: 700px;
-  display: flex;
-  flex-flow: column nowrap;
-  margin: auto !important;
-}
-
-.document-editor__toolbar {
-  z-index: 1 !important;
-  min-width: 1100px;
-}
-
-.document-editor__editable-container {
-  padding: 10px;
-  border: 1px solid #e4e6ec;
-  background: var(--ck-color-base-foreground);
-}
-
-.document-editor__editable-container .ck-editor__editable {
-  width: 26cm;
-  height: 700px;
-  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 {
-  font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-</style>
+<template>
+  <div>
+    <div class="form-group">
+      <div>
+        <div class="document-editor__toolbar"></div>
+        <div class="document-editor__editable-container">
+          <div id="template-dev">
+            <ckeditor :editor="editor" v-model="computedDocumentHtml" @ready="onReady" @focus="changed"></ckeditor>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import CKEditor from "ckeditor5-custom-build/build/ckeditor";
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  name: "DocumentEditor",
+  props: ["editMode"],
+  components: {
+    CKEditor,
+  },
+  data() {
+    return {
+      editor: CKEditor,
+    };
+  },
+  computed: {
+    ...mapState("generic", ["documentHtml", "documentHtmlFinal"]),
+    computedDocumentHtml: {
+      get() {
+        if (this.editMode) {
+          return this.documentHtmlFinal
+        } else {
+          return this.documentHtml;
+        }
+      },
+      set(newValue) {
+        if (this.editMode) {
+          this.updateDocumentHtmlFinal(newValue);
+        } else {
+          this.updateDocumentHtml(newValue);
+        }
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["updateDocumentHtmlFinal", "updateDocumentHtml", "addEvent"]),
+    onReady(editor) {
+      const toolbarContainer = document.querySelector(".document-editor__toolbar");
+      toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+    },
+    changed() {
+      this.addEvent({ name: "documentEditorChanged" });
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Estilos do seu componente */
+.document-editor {
+  border-radius: var(--ck-border-radius);
+  max-height: 700px;
+  display: flex;
+  flex-flow: column nowrap;
+  margin: auto !important;
+}
+
+.document-editor__toolbar {
+  z-index: 1 !important;
+  min-width: 1100px;
+}
+
+.document-editor__editable-container {
+  padding: 10px;
+  border: 1px solid #e4e6ec;
+  background: var(--ck-color-base-foreground);
+}
+
+.document-editor__editable-container .ck-editor__editable {
+  width: 26cm;
+  height: 700px;
+  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 {
+  font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+</style>