aloha-vue 1.1.5 → 1.1.7

package/docs/src/views/PageNotification/PageNotification.pug

@@ -8,5 +8,9 @@ div
     :text="'_ADD_NOTIFICATION_{{type}}_'"
     :extra="{type: type}"
     @click="addNotificationLocal(type)"
-    text="Open Modal"
   )
+  .a_mt_4
+    a-button.a_btn.a_btn_primary(
+      text="Object"
+      @click="addNotificationLocal({ sdf: 'x', abc: 'y', aloha: 'z' })"
+    )

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/compositionAPI/ANotificationAPI.js

@@ -3,8 +3,12 @@ import {
   ref,
 } from "vue";
 
+import {
+  createListFromObject,
+} from "../utils/utils";
 import {
   isNil,
+  isPlainObject,
   values,
 } from "lodash-es";
 
@@ -28,13 +32,17 @@ export function setNotificationTimeout(timeout) {
   notificationTimeout = timeout;
 }
 
-export function addNotification({ text, type = "success", timeout }) {
+export function addNotification({ text, type = "success", timeout, useValuesFromObject = true }) {
   const TIMEOUT_LOCAL = isNil(timeout) ? notificationTimeout : timeout;
   const CURRENT_INDEX = notificationsCount;
   const TYPE = type === "error" ? "danger" : type;
+  let textLocal = text;
+  if (isPlainObject(text) && useValuesFromObject) {
+    textLocal = createListFromObject(text); // TODO: filterList
+  }
 
   notificationsObj.value[CURRENT_INDEX] = {
-    text,
+    text: textLocal,
     type: TYPE,
     index: CURRENT_INDEX,
   };

package/src/plugins/ATinymcePlugin.js

@@ -0,0 +1,48 @@
+import {
+  ref,
+} from "vue";
+
+export const tinymcePluginOptions = ref({
+  propsDefault: {
+    branding: true,
+    contentCustomStyle: undefined,
+    contentLangs: [
+      { title: "English", code: "en" },
+      { title: "Spanish", code: "es" },
+      { title: "French", code: "fr" },
+      { title: "Deutsch", code: "de" },
+      { title: "Portuguese", code: "pt" },
+      { title: "Chinese", code: "zh" },
+    ],
+    languageDefault: "de",
+    maxlength: undefined,
+    menu: undefined,
+    menubar: false,
+    plugins: "advlist code emoticons link lists table help",
+    promotion: false,
+    rows: undefined,
+    toolbar: [
+      { name: "Formatierung", items: ["bold", "italic", "underline"] },
+      { name: "Ausrichtung", items: ["alignleft", "aligncenter", "alignright", "alignjustify"] },
+      { name: "Liste", items: ["bullist", "numlist"] },
+      { name: "Einrücken", items: ["indent", "outdent"] },
+      { name: "Sprache", items: ["language"] },
+      { name: "Link", items: ["link", "unlink"] },
+      { name: "Historie", items: ["undo", "redo"] },
+      { name: "Hilfe", items: ["help"] },
+    ],
+    toolbarMode: "wrap",
+    validElements: "a[href|target=_blank],strong/b,div,br,p,span,ul,ol,li,table,thead,tbody,th,tr,td",
+  },
+});
+
+export default {
+  install: (app, {
+    propsDefault = {},
+  } = {}) => {
+    tinymcePluginOptions.value.propsDefault = {
+      ...tinymcePluginOptions.value.propsDefault,
+      ...propsDefault,
+    };
+  },
+};

package/src/ui/ATinymce/ATinymce.js

@@ -17,6 +17,10 @@ import ATinymceAPI from "./compositionAPI/ATinymceAPI";
 import UiAPI from "../compositionApi/UiAPI";
 import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
+import {
+  tinymcePluginOptions,
+} from "../../plugins/ATinymcePlugin";
+
 export default {
   name: "ATinymce",
   mixins: [
@@ -26,71 +30,62 @@ export default {
     branding: {
       type: Boolean,
       required: false,
-      default: true,
+      default: () => tinymcePluginOptions.value.propsDefault.branding,
+    },
+    contentCustomStyle: {
+      type: String,
+      required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.contentCustomStyle,
     },
     contentLangs: {
       type: Array,
       required: false,
-      default: () => [
-        { title: "English", code: "en" },
-        { title: "Spanish", code: "es" },
-        { title: "French", code: "fr" },
-        { title: "Deutsch", code: "de" },
-        { title: "Portuguese", code: "pt" },
-        { title: "Chinese", code: "zh" },
-      ],
+      default: () => tinymcePluginOptions.value.propsDefault.contentLangs,
     },
     languageDefault: {
       type: String,
       required: false,
-      default: "de",
+      default: () => tinymcePluginOptions.value.propsDefault.languageDefault,
     },
     maxlength: {
       type: [String, Number],
       required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.maxlength,
     },
     menu: {
       type: Object,
       required: false,
-      default: undefined,
+      default: () => tinymcePluginOptions.value.propsDefault.menu,
     },
     menubar: {
       type: [String, Boolean],
       required: false,
-      default: false,
+      default: () => tinymcePluginOptions.value.propsDefault.menubar,
     },
     plugins: {
       type: String,
       required: false,
-      default: "advlist code emoticons link lists table help",
+      default: () => tinymcePluginOptions.value.propsDefault.plugins,
     },
     promotion: {
       type: Boolean,
       required: false,
-      default: false,
+      default: () => tinymcePluginOptions.value.propsDefault.promotion,
     },
     rows: {
       type: [String, Number],
       required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.rows,
     },
     toolbar: {
       type: [String, Object, Array],
       required: false,
-      default: () => ([
-        { name: "Formatierung", items: ["bold", "italic", "underline"] },
-        { name: "Ausrichtung", items: ["alignleft", "aligncenter", "alignright", "alignjustify"] },
-        { name: "Liste", items: ["bullist", "numlist"] },
-        { name: "Einrücken", items: ["indent", "outdent"] },
-        { name: "Sprache", items: ["language"] },
-        { name: "Link", items: ["link", "unlink"] },
-        { name: "Historie", items: ["undo", "redo"] },
-        { name: "Hilfe", items: ["help"] },
-      ]),
+      default: () => tinymcePluginOptions.value.propsDefault.toolbar,
     },
     toolbarMode: {
       type: String,
       required: false,
-      default: "wrap",
+      default: () => tinymcePluginOptions.value.propsDefault.toolbarMode,
       validator: value => ["floating", "sliding", "scrolling", "wrap"].indexOf(value) !== -1,
     },
     type: {
@@ -98,6 +93,11 @@ export default {
       required: false,
       default: "tinymce",
     },
+    validElements: {
+      type: String,
+      required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.validElements,
+    },
   },
   setup(props, context) {
     const {

package/src/ui/ATinymce/compositionAPI/ATinymceAPI.js

@@ -45,20 +45,26 @@ export default function ATinymceAPI(props, context, {
   htmlIdLocal = computed(() => ""),
 }) {
   const branding = toRef(props, "branding");
+  const contentCustomStyle = toRef(props, "contentCustomStyle");
   const contentLangs = toRef(props, "contentLangs");
   const disabled = toRef(props, "disabled");
   const languageDefault = toRef(props, "languageDefault");
   const menu = toRef(props, "menu");
   const menubar = toRef(props, "menubar");
+  const modelValue = toRef(props, "modelValue");
   const plugins = toRef(props, "plugins");
   const promotion = toRef(props, "promotion");
   const toolbar = toRef(props, "toolbar");
   const toolbarMode = toRef(props, "toolbarMode");
-  const modelValue = toRef(props, "modelValue");
+  const validElements = toRef(props, "validElements");
 
   let vueEditor = null;
   let modelValueLocal = undefined;
 
+  const contentStyle = computed(() => {
+    return `${ contentUiSkinCss.toString() }\n${ contentCss.toString() }\n${ contentCustomStyle.value ? contentCustomStyle.value : "" }`;
+  });
+
   const changeModelLocal = ({ model }) => {
     modelValueLocal = model;
     changeModel({ model });
@@ -74,7 +80,7 @@ export default function ATinymceAPI(props, context, {
       skin: false,
       content_css: false,
       entity_encoding: "raw",
-      content_style: `${ contentUiSkinCss.toString() }\n${ contentCss.toString() }`,
+      content_style: contentStyle.value,
       branding: branding.value,
       promotion: promotion.value,
       language: languageDefault.value,
@@ -82,6 +88,7 @@ export default function ATinymceAPI(props, context, {
       menu: menu.value,
       menubar: menubar.value,
       readonly: !!disabled.value,
+      valid_elements: validElements.value,
       setup: editor => {
         vueEditor = editor;
         editor.on("change input undo redo", () => {

package/src/utils/utils.js

@@ -47,3 +47,13 @@ export function concatenateTwoStringsWithSpace({ class1, class2, defaultValue =
   }
   return defaultValue;
 }
+
+export function createListFromObject(obj) { // TODO: filterList, soll gelöscht werden
+  const keys = Object.keys(obj);
+  if (keys.length === 0) {
+    return "";
+  }
+
+  const items = keys.map(key => `<li>${ obj[key] }</li>`).join("");
+  return `<ul class="a_list_without_styles">${ items }</ul>`;
+}