aloha-vue 1.2.89 → 1.2.91

package/docs/src/views/Functions/PageFilterLimitTo/i18n/hr.json

@@ -1,7 +1,6 @@
 {
-  "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_TEXT_": "Der Eingangsstring, der beschnitten werden soll",
-  "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_LIMIT_": "Die maximale Länge des zurückgegebenen Strings",
-  "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_MAX_THREE_DOTS_": "Gibt an, ob maximal drei Punkten am Ende des Strings angezeigt werden",
-  "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_": "# Argumenti: \ntext (string): Ulazni string čija će duljina biti ograničena\n[limit=30] (cijeli broj): Maksimalna duljina povratnog stringa\n[maxThreeDots=true] (boolean): Određuje hoće li se najviše tri točke vratiti na kraju povratnog stringa\n",
+  "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_TEXT_": "Ulazni string čija će duljina biti ograničena.",
+  "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_LIMIT_": "Maksimalna duljina povratnog stringa",
+  "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_MAX_THREE_DOTS_": "Određuje hoće li se najviše tri točke vratiti na kraju povratnog stringa.",
   "_PAGE_FILTER_LIMIT_TO_DESCRIPTION_": "Funkcija <strong>filterLimitTo</strong> koristi se za ograničavanje duljine ulaznog stringa na zadanu maksimalnu vrijednost, kao i za opcionalno primjenjivanje posebne logike točaka na kraju stringa."
 }

package/docs/src/views/Functions/PageFilterList/i18n/hr.json

@@ -1,14 +1,13 @@
 {
-  "_PAGE_FILTER_LIST_ARGUMENTS_ARRAY_": "Das Array für die Liste",
-  "_PAGE_FILTER_LIST_ARGUMENTS_IS_HTML_": "Wenn true, wird eine HTML-Liste (<ul><li>...</li></ul>) erstellt. Andernfalls wird eine Textliste generiert",
-  "_PAGE_FILTER_LIST_ARGUMENTS_IS_SIMPLE_ARRAY_": "Gibt an, ob nur ein einfaches Array ohne Objekte verwendet wird",
-  "_PAGE_FILTER_LIST_ARGUMENTS_KEY_CHILDREN_": "Schlüssel für Kinderelemente (nur wenn <strong>isSimpleArray=false</strong>)",
-  "_PAGE_FILTER_LIST_ARGUMENTS_KEY_LABEL_": "Schlüssel für das anzuzeigende Text (nur wenn <strong>isSimpleArray=false</strong>)",
-  "_PAGE_FILTER_LIST_ARGUMENTS_KEY_LABEL_CALLBACK_": "Funktion zur Generierung von Labels mit zwei Parametern (<strong>item</strong>, <strong>itemIndex</strong>)",
-  "_PAGE_FILTER_LIST_ARGUMENTS_SEPARATOR_": "Separator zwischen Elementen (nur wenn <strong>isHtml=false</strong>)",
-  "_PAGE_FILTER_LIST_ARGUMENTS_TAG_": "HTML-Tag für die gesamte Liste",
-  "_PAGE_FILTER_LIST_ARGUMENTS_LIST_CLASS_": "CSS-Klasse z.B.: (a_list_without_styles)",
-  "_PAGE_FILTER_LIST_ARGUMENTS_": "# Argumenti:  \narray (niz): Niz od kojeg se kreira lista\n[isHtml=true] (boolean): Za istinitu vrijednost će se kreirati lista u HTML formatu (<ul><li>...</li></ul>). U suprotnom će se kreirati lista u tekstualnom formatu (<span>...</span>)\n[isSimpleArray=false] (boolean): Određuje hoće li se koristiti jednostavan niz bez objekata\n[keyChildren=\"\"] (string): Ključ za podelemente (samo ako je isSimpleArray=false)\n[keyLabel=\"\"] (string): Ključ teksta koji će biti prikazan (samo ako je isSimpleArray=false)\n[keyLabelCallback] (funkcija): Funkcija za generiranje oznaka s dva parametra (item, itemIndex)\n[separator=\", \"] (string): separator između elemenata (samo ako je isHtml=false)\n[tag=\"ul\"] (string): HTML oznaka za cijelu listu\n[listClass=\"\"] (sString): CSS klasa (a_list_without_styles)",
+  "_PAGE_FILTER_LIST_ARGUMENTS_ARRAY_": "Niz od kojeg se kreira lista",
+  "_PAGE_FILTER_LIST_ARGUMENTS_IS_HTML_": "Za <strong>istinitu</strong> vrijednost će se kreirati lista u HTML formatu (&lt;ul&gt;&lt;li&gt;...&lt;/li&gt;&lt;/ul&gt;). U suprotnom će se kreirati lista u tekstualnom formatu.",
+  "_PAGE_FILTER_LIST_ARGUMENTS_IS_SIMPLE_ARRAY_": "Određuje hoće li se koristiti jednostavan niz bez objekata.",
+  "_PAGE_FILTER_LIST_ARGUMENTS_KEY_CHILDREN_": "Ključ za podelemente (samo ako je <strong>isSimpleArray=false</strong>)",
+  "_PAGE_FILTER_LIST_ARGUMENTS_KEY_LABEL_": "Ključ teksta koji će biti prikazan (samo ako je <strong>isSimpleArray=false</strong>)",
+  "_PAGE_FILTER_LIST_ARGUMENTS_KEY_LABEL_CALLBACK_": "Funkcija za generiranje oznaka s dva parametra (<strong>item</strong>, <strong>itemIndex</strong>).",
+  "_PAGE_FILTER_LIST_ARGUMENTS_SEPARATOR_": "Separator separator između elemenata (samo ako je <strong>isHtml=false</strong>)",
+  "_PAGE_FILTER_LIST_ARGUMENTS_TAG_": "HTML oznaka za cijelu listu",
+  "_PAGE_FILTER_LIST_ARGUMENTS_LIST_CLASS_": "CSS klasa (Npr. a_list_without_styles)",
   "_PAGE_FILTER_LIST_DESCRIPTION_": "Ova funkcija kreira listu od niza.",
   "_PAGE_FILTER_LIST_IS_SIMPLE_ARRAY_TREE_HEADER_": "Struktura stabla isSimpleArray=true"
 }

package/package.json

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

package/src/plugins/ASelectPlugin.js

@@ -5,6 +5,7 @@ import {
 export const selectPluginOptions = ref({
   propsDefault: {
     buttonClass: undefined,
+    caretIcon: "ChevronDown",
     countMultiselect: 4,
     dataExtra: [],
     inBody: true,

package/src/plugins/ATinymcePlugin.js

@@ -18,7 +18,7 @@ export const tinymcePluginOptions = ref({
     maxlength: undefined,
     menu: undefined,
     menubar: false,
-    plugins: "advlist code emoticons link lists table help",
+    plugins: "advlist code emoticons link lists table help example",
     promotion: false,
     rows: undefined,
     toolbar: [
@@ -32,7 +32,12 @@ export const tinymcePluginOptions = ref({
       { name: "Hilfe", items: ["help"] },
     ],
     toolbarMode: "wrap",
-    validElements: "@[style],a[href|target|title],strong/b,em/i,div,br,p,span,ul,ol,li,table,thead,tbody,th,tr,td",
+    validElements: "@[style],a[href|target|title],strong/b[style],em/i[style],br[style],p[style],span[style],ul[style],ol[style],li[style],table[],thead[],tbody[],th[],tr[],td[]",
+    validStyles: {
+      "*": "text-align,padding-left,text-decoration",
+      ul: "list-style-type",
+      ol: "list-style-type",
+    },
   },
 });
 

package/src/styles/components/ui/ASelect.scss

@@ -11,6 +11,8 @@
 .a_select_toggle {
   position: relative;
   min-width: var(--a_select_min_width);
+  min-height: calc(26px + 0.375rem * 2);
+  padding-right: 30px;
   text-align: left;
 }
 .a_select_toggle_closeable {
@@ -18,12 +20,14 @@
 }
 
 .a_caret {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right 0.75rem center;
-  background-size: 16px 12px;
-  min-height: calc(26px + 0.375rem * 2);
-  padding-right: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 30px;
 }
 
 .a_select__search {
@@ -161,6 +165,7 @@
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding-right: 18px;
 }
 
 .a_select__ul_closeable {

package/src/ui/ASelect/ASelect.js

@@ -56,6 +56,11 @@ export default {
       required: false,
       default: () => selectPluginOptions.value.propsDefault.buttonClass,
     },
+    caretIcon: {
+      type: [String, Object],
+      required: false,
+      default: () => selectPluginOptions.value.propsDefault.caretIcon,
+    },
     change: {
       type: Function,
       required: false,
@@ -614,7 +619,7 @@ export default {
             h("div", {
               ref: "buttonRef",
               id: this.htmlIdLocal,
-              class: ["a_form_control a_select_toggle a_caret", this.buttonClass, {
+              class: ["a_form_control a_select_toggle", this.buttonClass, {
                 disabled: this.disabled,
                 a_select_toggle_closeable: this.isMultiselect && this.isSelectionCloseable,
                 a_form_control_invalid: this.isErrors,
@@ -853,6 +858,13 @@ export default {
                   ]),
                 ]),
               ]),
+              h("span", {
+                class: "a_caret",
+              }, [
+                h(AIcon, {
+                  icon: this.caretIcon,
+                }),
+              ])
             ]),
           ]),
         ]),

package/src/ui/ATinymce/ATinymce.js

@@ -96,6 +96,11 @@ export default {
       required: false,
       default: () => tinymcePluginOptions.value.propsDefault.validElements,
     },
+    validStyles: {
+      type: Object,
+      required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.validStyles,
+    },
   },
   setup(props, context) {
     const {

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

@@ -5,8 +5,11 @@ import {
   watch,
 } from "vue";
 
+import MyPowerPaste from "../plugins/MyPowerPaste";
+
 /* Import TinyMCE */
 import tinymce from "tinymce";
+tinymce.PluginManager.add("example", MyPowerPaste);
 
 /* Default icons are required. After that, import custom icons if applicable */
 import "tinymce/icons/default";
@@ -57,6 +60,7 @@ export default function ATinymceAPI(props, context, {
   const toolbar = toRef(props, "toolbar");
   const toolbarMode = toRef(props, "toolbarMode");
   const validElements = toRef(props, "validElements");
+  const validStyles = toRef(props, "validStyles");
 
   let vueEditor = null;
   let modelValueLocal = undefined;
@@ -89,6 +93,8 @@ export default function ATinymceAPI(props, context, {
       menubar: menubar.value,
       readonly: !!disabled.value,
       valid_elements: validElements.value,
+      valid_styles: validStyles.value,
+
       setup: editor => {
         vueEditor = editor;
         editor.on("change input undo redo", () => {

package/src/ui/ATinymce/plugins/MyPowerPaste.js

@@ -0,0 +1,187 @@
+import {
+  forEach,
+} from "lodash-es";
+
+export default function(editor) {
+  // Event-Handler für Einfügevorgänge
+  editor.on("paste", function(e) {
+    const clipboardData = (e.clipboardData || window.clipboardData);
+    e.stopPropagation();
+    e.preventDefault();
+
+    const PAGE_HTML = clipboardData.getData("text/html");
+    const HTML_FRAGMENT = extractTextBetween({
+      html: PAGE_HTML,
+      start: "<!--StartFragment-->",
+      end: "<!--EndFragment-->",
+    });
+
+    if (isMsWord({ html: PAGE_HTML })) {
+      editor.insertContent(parseWord({ html: HTML_FRAGMENT }));
+    } else {
+      const cleanedHtml = HTML_FRAGMENT.replace(/\sdata-[a-z0-9-]+="[^"]*"/gi, "").replace(/\saria-[a-z0-9-]+="[^"]*"/gi, "");
+
+      editor.insertContent(cleanedHtml);
+    }
+  });
+  /* Return the metadata for the help plugin */
+  return {
+    getMetadata: () => ({
+      name: "My power paste",
+      url: "https://ilia-brykin.github.io/aloha/#/"
+    })
+  };
+}
+
+function extractTextBetween({ html, start, end }) {
+  const startIndex = html.indexOf(start);
+  const endIndex = html.indexOf(end);
+
+  if (startIndex !== -1 && endIndex !== -1) {
+    return html.substring(startIndex + start.length, endIndex).trim();
+  }
+  return html;
+}
+
+function isMsWord({ html }) {
+  const HTML_TAG = extractTextBetween({
+    html,
+    start: "<html",
+    end: ">",
+  });
+
+  return HTML_TAG.indexOf(":office:word") !== -1;
+}
+
+function parseWord({ html }) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  const allChildren = doc.body.querySelectorAll(":scope > *");
+
+  const rootElement = document.createElement("div");
+  let currentList = null;
+  let lastLevel = 0;
+  const listStack = [];
+
+  forEach(allChildren, element => {
+    const isTagP = element.tagName === "P";
+    if (!isTagP) {
+      rootElement.appendChild(element);
+      lastLevel = 0;
+      currentList = null;
+      return;
+    }
+
+    const isNormalParagraph = element.className.includes("MsoNormal");
+    const htmlContent = element.innerHTML.trim()
+      .replace(/<u>/g, "<span style=\"text-decoration: underline;\">")
+      .replace(/<\/u>/g, "</span>")
+      .replace(/<!--\[if !supportLists]-->.*?<!--\[endif]-->/gs, "")
+      .replace(/&nbsp;/g, " ")
+      .replace(/^[\s·o§1-9]+[.)]?/g, "");
+
+    if (isTagP && isNormalParagraph && !element.className.includes("MsoListParagraph")) {
+      const newParagraph = document.createElement("p");
+      newParagraph.innerHTML = htmlContent;
+      rootElement.appendChild(newParagraph);
+      lastLevel = 0;
+      currentList = null;
+      return;
+    }
+
+    const LIST_LEVEL = getCurrentLevelForList(element);
+    const { type, style } = getListTypeAndStyleFromSpanContent(element);
+
+    if (!currentList || LIST_LEVEL > lastLevel) {
+      const newList = document.createElement(type);
+      if (style) {
+        newList.style.listStyleType = style;
+      }
+
+      if (currentList) {
+        currentList.appendChild(newList);
+      } else {
+        rootElement.appendChild(newList);
+      }
+      currentList = newList;
+      listStack.push({ element: newList, level: LIST_LEVEL });
+    } else if (LIST_LEVEL < lastLevel) {
+      while (listStack.length > 1 && LIST_LEVEL < listStack[listStack.length - 1].level) {
+        listStack.pop();
+        currentList = listStack[listStack.length - 1].element;
+      }
+    }
+
+    const li = document.createElement("li");
+    li.innerHTML = htmlContent;
+    currentList.appendChild(li);
+
+    lastLevel = LIST_LEVEL;
+  });
+
+  return rootElement.innerHTML;
+}
+
+function getListTypeAndStyleFromSpanContent(p) {
+  const spans = p.querySelectorAll("span");
+  let spanContent = "";
+  forEach(spans, span => {
+    const styleAttr = span.getAttribute("style");
+    if (styleAttr && styleAttr.includes("mso-list:Ignore")) {
+      spanContent = span.textContent || "";
+      return false;
+    }
+  });
+
+  spanContent = spanContent.trim();
+  if (!spanContent) {
+    return { type: "ul", style: "" };
+  }
+  // Check for ordered list with Arabic numerals or numbers within parentheses
+  if (/^\d+[.)]/.test(spanContent) || /^\(\d+\)/.test(spanContent)) {
+    return { type: "ol", style: "" }; // Default style for <ol>
+  }
+  // Check for ordered list with uppercase Roman numerals
+  if (/^[IVXLCDM]+\./.test(spanContent)) {
+    return { type: "ol", style: "upper-roman" };
+  }
+  // Check for ordered list with lowercase Roman numerals
+  if (/^[ivxlcdm]+\./.test(spanContent)) {
+    return { type: "ol", style: "lower-roman" };
+  }
+  // Check for ordered list with uppercase letters
+  if (/^[A-Z]+[.)]/.test(spanContent)) {
+    return { type: "ol", style: "upper-alpha" };
+  }
+  // Check for ordered list with lowercase letters
+  if (/^[a-z]+[.)]/.test(spanContent)) {
+    return { type: "ol", style: "lower-alpha" };
+  }
+  // Check for unordered list with various symbols
+  if (/^[·o§]/.test(spanContent)) {
+    // Determine list style based on the symbol
+    let style;
+    switch (spanContent.trim()[0]) {
+    case "·": style = "disc"; break;
+    case "o": style = "circle"; break;
+    case "§": style = "square"; break;
+    default: style = "";
+    }
+    return { type: "ul", style: style };
+  }
+
+  return { type: "ul", style: "" };
+}
+
+function getCurrentLevelForList(p) {
+  const styleAttr = p.getAttribute("style");
+  let level = 1;
+  if (styleAttr) {
+    const levelMatch = styleAttr.match(/mso-list:l\d+ level(\d+)/);
+    if (levelMatch) {
+      level = parseInt(levelMatch[1], 10);
+    }
+  }
+
+  return level;
+}