aloha-vue 1.0.332 → 1.0.334

package/docs/package.json

@@ -12,14 +12,15 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.7",
-    "aloha-css": "1.0.97",
+    "aloha-css": "1.0.98",
     "dompurify": "2.4.1",
     "fecha": "^4.2.3",
+    "highlight.js": "11.8.0",
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",
     "tinymce": "6.2.0",
-    "vue": "3.2.47",
-    "vue-router": "4.1.6"
+    "vue": "3.3.4",
+    "vue-router": "4.2.0"
   },
   "devDependencies": {
     "@babel/core": "7.17.10",

package/docs/src/components/TheMenu/TheMenu.js

@@ -12,31 +12,42 @@ export default {
     return {
       menuItems: [
         {
-          group: "Aloha",
-          id: "spinner",
-          label: "Spinner",
+          id: "accordion",
+          label: "Accordion",
           to: {
-            name: "PageSpinner",
+            name: "PageAccordion",
           },
-          icon: "HourglassSplit",
+          icon: "ListNested",
         },
         {
-          group: "Aloha",
-          id: "table",
-          label: "Table",
+          id: "accordion2",
+          label: "Accordion seeeeeehr lange name",
+          icon: "ListNested",
+          children: [
+            {
+              id: "accordion3",
+              label: "Accordion seeeeeehr lange name",
+              to: {
+                name: "PageAccordion",
+              }
+            }
+          ]
+        },
+        {
+          id: "alert",
+          label: "Alert",
           to: {
-            name: "PageTable",
+            name: "PageAlert",
           },
-          icon: "Table",
+          icon: "ExclamationTriangle",
         },
         {
-          group: "Hola",
-          id: "collapse",
-          label: "Collapse",
+          id: "Button",
+          label: "Button",
           to: {
-            name: "PageCollapse",
+            name: "PageButton",
           },
-          icon: "ArrowsCollapse",
+          icon: "EjectFill",
         },
         {
           group: "Hola",
@@ -59,149 +70,69 @@ export default {
         },
         {
           group: "Hola",
-          id: "loading",
-          label: "Loading",
+          id: "collapse",
+          label: "Collapse",
           to: {
-            name: "PageLoading",
+            name: "PageCollapse",
           },
-          icon: "HourglassSplit",
+          icon: "ArrowsCollapse",
         },
         {
-          id: "ui",
-          label: "ui",
-          icon: "InputCursor",
-          children: [
-            {
-              id: "ui-child",
-              label: "Child",
-              children: [
-                {
-                  id: "input",
-                  to: {
-                    name: "PageInput",
-                  },
-                  label: "Input",
-                },
-              ],
-            },
-            {
-              id: "input",
-              to: {
-                name: "PageInput",
-              },
-              label: "Input",
-            },
-            {
-              id: "input-number",
-              to: {
-                name: "PageInputNumber",
-              },
-              label: "Input number",
-            },
-            {
-              id: "json",
-              label: "JSON",
-              to: {
-                name: "PageAJson",
-              },
-            },
-            {
-              id: "tinyMce",
-              label: "TinyMce",
-              to: {
-                name: "PageTinyMce",
-              },
-            },
-            {
-              id: "checkbox",
-              label: "Checkbox",
-              to: {
-                name: "PageCheckbox",
-              },
-            },
-            {
-              id: "slotItem",
-              label: "Slot",
-              slot: "slotItem",
-              to: {
-                name: "PageRadio",
-              },
-            },
-            {
-              id: "radio",
-              label: "Radio",
-              to: {
-                name: "PageRadio",
-              },
-            },
-            {
-              id: "datepicker",
-              label: "Datepicker",
-              to: {
-                name: "PageDatepicker",
-              },
-            },
-            {
-              id: "select",
-              label: "Select",
-              to: {
-                name: "PageSelect",
-              },
-            },
-            {
-              id: "form",
-              label: "Form",
-              to: {
-                name: "PageForm",
-              },
-            },
-          ],
+          id: "confirm",
+          label: "Confirm",
+          to: {
+            name: "PageConfirm",
+          },
+          icon: "CheckLg",
         },
         {
-          id: "accordion",
-          label: "Accordion",
+          id: "dropdown",
+          label: "Dropdown",
           to: {
-            name: "PageAccordion",
+            name: "PageDropdown",
           },
-          icon: "ListNested",
+          icon: "MenuDown",
         },
         {
-          id: "accordion2",
-          label: "Accordion seeeeeehr lange name",
-          icon: "ListNested",
-          children: [
-            {
-              id: "accordion3",
-              label: "Accordion seeeeeehr lange name",
-              to: {
-                name: "PageAccordion",
-              },
-            },
-          ],
+          id: "GroupButtonDropdown",
+          label: "GroupButtonDropdown",
+          to: {
+            name: "PageGroupButtonDropdown",
+          },
+          icon: "MenuDown",
         },
         {
-          id: "alert",
-          label: "Alert",
+          id: "Link",
+          label: "Link",
           to: {
-            name: "PageAlert",
+            name: "PageLink",
           },
-          icon: "ExclamationTriangle",
+          icon: "BoxArrowUpRight",
         },
         {
-          id: "modal",
-          label: "Modal",
+          id: "list",
+          label: "List",
           to: {
-            name: "PageModal",
+            name: "PageList",
           },
-          icon: "Lock",
+          icon: "ListUl",
         },
         {
-          id: "confirm",
-          label: "Confirm",
+          group: "Hola",
+          id: "loading",
+          label: "Loading",
           to: {
-            name: "PageConfirm",
+            name: "PageLoading",
           },
-          icon: "CheckLg",
+          icon: "HourglassSplit",
+        },
+        {
+          id: "modal",
+          label: "Modal",
+          to: {
+            name: "PageModal",
+          },
+          icon: "Lock",
         },
         {
           id: "notification",
@@ -212,52 +143,88 @@ export default {
           icon: "Bell",
         },
         {
-          id: "dropdown",
-          label: "Dropdown",
+          id: "progress",
+          label: "Progress",
           to: {
-            name: "PageDropdown",
+            name: "PageProgress",
           },
-          icon: "MenuDown",
+          icon: "Reception2",
         },
         {
-          id: "GroupButtonDropdown",
-          label: "GroupButtonDropdown",
+          id: "scale",
+          label: "Scale",
           to: {
-            name: "PageGroupButtonDropdown",
+            name: "PageScale",
           },
-          icon: "MenuDown",
+          icon: "Dnd",
         },
         {
-          id: "tabs",
-          label: "Tabs",
+          id: "ShowMore",
+          label: "Show more",
           to: {
-            name: "PageTabs",
+            name: "PageShowMore",
           },
-          icon: "SegmentedNav",
+          icon: "ChevronDown",
         },
         {
-          id: "progress",
-          label: "Progress",
+          group: "Aloha",
+          id: "spinner",
+          label: "Spinner",
           to: {
-            name: "PageProgress",
+            name: "PageSpinner",
           },
-          icon: "Reception2",
+          icon: "HourglassSplit",
         },
         {
-          id: "list",
-          label: "List",
+          id: "svg",
+          label: "Svg",
           to: {
-            name: "PageList",
+            name: "PageSvg",
           },
-          icon: "ListUl",
+          icon: "FiletypeSvg",
         },
         {
-          id: "scale",
-          label: "Scale",
+          id: "Table",
+          label: "Tables",
+          icon: "Table",
+          children: [
+            {
+              id: "PageTableComplex",
+              label: "Table complex",
+              to: {
+                name: "PageTableComplex",
+              }
+            },
+            {
+              id: "PageTablePagination",
+              label: "Table pagination",
+              to: {
+                name: "PageTablePagination",
+              }
+            },
+            {
+              id: "PageTableSimple",
+              label: "Table simple",
+              to: {
+                name: "PageTableSimple",
+              }
+            },
+            {
+              id: "PageTableSort",
+              label: "Table sort",
+              to: {
+                name: "PageTableSort",
+              }
+            }
+          ]
+        },
+        {
+          id: "tabs",
+          label: "Tabs",
           to: {
-            name: "PageScale",
+            name: "PageTabs",
           },
-          icon: "Dnd",
+          icon: "SegmentedNav",
         },
         {
           id: "title",
@@ -269,12 +236,12 @@ export default {
           titleHtml: "PageTitle PageTitle PageTitle PageTitle PageTitle PageTitle",
         },
         {
-          id: "svg",
-          label: "Svg",
+          id: "Translation",
+          label: "Translation",
           to: {
-            name: "PageSvg",
+            name: "PageTranslation",
           },
-          icon: "FiletypeSvg",
+          icon: "Translate",
         },
         {
           id: "wizard",
@@ -285,12 +252,95 @@ export default {
           icon: "Dnd",
         },
         {
-          id: "ShowMore",
-          label: "Show more",
-          to: {
-            name: "PageShowMore",
-          },
-          icon: "ChevronDown",
+          id: "ui",
+          label: "ui",
+          icon: "InputCursor",
+          children: [
+            {
+              id: "checkbox",
+              label: "Checkbox",
+              to: {
+                name: "PageCheckbox",
+              }
+            },
+            {
+              id: "ui-child",
+              label: "Child",
+              children: [
+                {
+                  id: "input",
+                  to: {
+                    name: "PageInput",
+                  },
+                  label: "Input",
+                }
+              ]
+            },
+            {
+              id: "datepicker",
+              label: "Datepicker",
+              to: {
+                name: "PageDatepicker",
+              }
+            },
+            {
+              id: "form",
+              label: "Form",
+              to: {
+                name: "PageForm",
+              }
+            },
+            {
+              id: "input",
+              to: {
+                name: "PageInput",
+              },
+              label: "Input",
+            },
+            {
+              id: "input-number",
+              to: {
+                name: "PageInputNumber",
+              },
+              label: "Input number",
+            },
+            {
+              id: "json",
+              label: "JSON",
+              to: {
+                name: "PageAJson",
+              }
+            },
+            {
+              id: "radio",
+              label: "Radio",
+              to: {
+                name: "PageRadio",
+              }
+            },
+            {
+              id: "select",
+              label: "Select",
+              to: {
+                name: "PageSelect",
+              }
+            },
+            {
+              id: "slotItem",
+              label: "Slot",
+              slot: "slotItem",
+              to: {
+                name: "PageRadio",
+              }
+            },
+            {
+              id: "tinyMce",
+              label: "TinyMce",
+              to: {
+                name: "PageTinyMce",
+              },
+            },
+          ],
         },
       ],
     };

package/docs/src/global/components/AlohaExample/AlohaExample.js

@@ -1,17 +1,24 @@
 import AButton from "../../../../../src/AButton/AButton";
+import AlohaHighlightjs from "../AlohaHighlightjs/AlohaHighlightjs";
 import ATranslation from "../../../../../src/ATranslation/ATranslation";
 
 import ClipboardAPI from "./compositionAPI/ClipboardAPI";
 import CodeToggleAPI from "./compositionAPI/CodeToggleAPI";
+import ParametersAPI from "./compositionAPI/ParametersAPI";
 
 export default {
   name: "AlohaExample",
   components: {
     AButton,
+    AlohaHighlightjs,
     ATranslation,
   },
   props: {
-    header: {
+    codeHtml: {
+      type: String,
+      required: true,
+    },
+    codeJs: {
       type: String,
       required: true,
     },
@@ -20,13 +27,30 @@ export default {
       required: false,
       default: undefined,
     },
-    codeHtml: {
-      type: String,
-      required: true,
+    emits: {
+      type: [String, Array],
+      required: false,
+      default: undefined,
     },
-    codeJs: {
+    exposes: {
+      type: [String, Array],
+      required: false,
+      default: undefined,
+    },
+    header: {
       type: String,
-      required: true,
+      required: false,
+      default: undefined,
+    },
+    props: {
+      type: [String, Array],
+      required: false,
+      default: undefined,
+    },
+    slots: {
+      type: [String, Array],
+      required: false,
+      default: undefined,
     },
   },
   setup(props) {
@@ -41,11 +65,32 @@ export default {
       copyJsToClipboard,
     } = ClipboardAPI(props);
 
+    const {
+      emitsLocal,
+      exposesLocal,
+      hasAtLeastOneProperty,
+      hasEmits,
+      hasExposes,
+      hasProps,
+      hasSlots,
+      propsLocal,
+      slotsLocal,
+    } = ParametersAPI(props);
+
     return {
       btnToggleCodeTitle,
       copyHtmlToClipboard,
       copyJsToClipboard,
+      emitsLocal,
+      exposesLocal,
+      hasAtLeastOneProperty,
+      hasEmits,
+      hasExposes,
+      hasProps,
+      hasSlots,
       isCodeVisible,
+      propsLocal,
+      slotsLocal,
       toggleCode,
     };
   },

package/docs/src/global/components/AlohaExample/AlohaExample.pug

@@ -1,8 +1,52 @@
 .aloha_example
   a-translation.aloha_example__h2(
+    v-if="header"
     tag="h2"
     :html="header"
   )
+  dl(
+    v-if="hasAtLeastOneProperty"
+  )
+    template(
+      v-if="hasProps"
+    )
+      dt.a_fs_4 Props:
+      dd(
+        v-for="property in propsLocal"
+        :key="property"
+      )
+        strong {{ property }}
+
+    template(
+      v-if="hasEmits"
+    )
+      dt.a_fs_4 Emits:
+      dd(
+        v-for="emit in emitsLocal"
+        :key="emit"
+      )
+        strong {{ emit }}
+
+    template(
+      v-if="hasSlots"
+    )
+      dt.a_fs_4 Slots:
+      dd(
+        v-for="slot in slotsLocal"
+        :key="slot"
+      )
+        strong {{ slot }}
+
+    template(
+      v-if="hasExposes"
+    )
+      dt.a_fs_4 Exposes:
+      dd(
+        v-for="expose in exposesLocal"
+        :key="expose"
+      )
+        strong {{ expose }}
+
 
   a-translation(
     v-if="description"
@@ -35,9 +79,13 @@
     v-if="isCodeVisible"
   )
     h3.aloha_example__h3 HTML
-    pre
-      code {{ codeHtml }}
+    aloha-highlightjs(
+      :code="codeHtml"
+      language="html"
+    )
 
     h3.aloha_example__h3.a_mt_3 JS
-    pre
-      code {{ codeJs }}
+    aloha-highlightjs(
+      :code="codeJs"
+      language="javascript"
+    )