aloha-vue 1.0.372 → 1.0.374

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",
-    "aloha-css": "1.0.118",
+    "aloha-css": "1.0.120",
     "axios": "1.4.0",
     "dompurify": "3.0.3",
     "fecha": "4.2.3",

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

@@ -271,10 +271,23 @@ export default {
         {
           id: "progress",
           label: "Progress",
-          to: {
-            name: "PageProgress",
-          },
           icon: "Reception2",
+          children: [
+            {
+              id: "progressBar",
+              label: "Progress bar",
+              to: {
+                name: "PageProgress",
+              },
+            },
+            {
+              id: "progressCircle",
+              label: "Progress circle",
+              to: {
+                name: "PageProgressCircle",
+              },
+            },
+          ],
         },
         {
           id: "scale",

package/docs/src/main.js

@@ -3,6 +3,7 @@ import { createApp } from "vue";
 import router from "./router/index";
 import AI18nPlugin from "../../src/plugins/AI18nPlugin";
 import AMobilePlugin from "../../src/plugins/AMobilePlugin";
+import ASelectPlugin from "../../src/plugins/ASelectPlugin";
 // import AGroupButtonDropdownPlugin from "../../src/plugins/AGroupButtonDropdownPlugin";
 import AIconPlugin from "../../src/plugins/AIconPlugin";
 import AModalPlugin from "../../src/plugins/AModalPlugin";
@@ -28,6 +29,11 @@ APP.use(AModalPlugin, {
     closeButtonClass: "a_btn a_btn_link",
   },
 });
+APP.use(ASelectPlugin, {
+  propsDefault: {
+    menuWidthType: "by_content",
+  },
+});
 // APP.use(AGroupButtonDropdownPlugin, {
 //   propsDefault: {
 //     dropdownAttributes: {

package/docs/src/mainTranslation.js

@@ -26,7 +26,8 @@ import PageGroupButtonDropdownI18n from "./views/PageGroupButtonDropdown/i18n/Pa
 import PageDropdownI18n from "./views/PageDropdown/i18n/PageDropdownI18n";
 import PageListI18n from "./views/PageList/i18n/PageListI18n";
 import PageSelectI18n from "./views/Form/PageSelect/i18n/PageSelectI18n";
-import PageProgressI18n from "./views/PageProgress/i18n/PageProgressI18n";
+import PageProgressI18n from "./views/Progress/PageProgress/i18n/PageProgressI18n";
+import PageProgressCircleI18n from "./views/Progress/PageProgressCircle/i18n/PageProgressCircleI18n";
 
 export const mainTranslation = {
   ar: {
@@ -50,6 +51,7 @@ export const mainTranslation = {
     ...PageListI18n.ar,
     ...PageSelectI18n.ar,
     ...PageProgressI18n.ar,
+    ...PageProgressCircleI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -72,6 +74,7 @@ export const mainTranslation = {
     ...PageListI18n.de,
     ...PageSelectI18n.de,
     ...PageProgressI18n.de,
+    ...PageProgressCircleI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -94,6 +97,7 @@ export const mainTranslation = {
     ...PageListI18n.en,
     ...PageSelectI18n.en,
     ...PageProgressI18n.en,
+    ...PageProgressCircleI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -116,6 +120,7 @@ export const mainTranslation = {
     ...PageListI18n.es,
     ...PageSelectI18n.es,
     ...PageProgressI18n.es,
+    ...PageProgressCircleI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -138,6 +143,7 @@ export const mainTranslation = {
     ...PageListI18n.fr,
     ...PageSelectI18n.fr,
     ...PageProgressI18n.fr,
+    ...PageProgressCircleI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -160,6 +166,7 @@ export const mainTranslation = {
     ...PageListI18n.hr,
     ...PageSelectI18n.hr,
     ...PageProgressI18n.hr,
+    ...PageProgressCircleI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -182,6 +189,7 @@ export const mainTranslation = {
     ...PageListI18n.it,
     ...PageSelectI18n.it,
     ...PageProgressI18n.it,
+    ...PageProgressCircleI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -204,5 +212,6 @@ export const mainTranslation = {
     ...PageListI18n.ru,
     ...PageSelectI18n.ru,
     ...PageProgressI18n.ru,
+    ...PageProgressCircleI18n.ru,
   },
 };

package/docs/src/router/index.js

@@ -127,7 +127,12 @@ const ROUTES = [
   {
     path: "/progress",
     name: "PageProgress",
-    component: () => import(/* webpackChunkName: "PageProgress" */ "../views/PageProgress/PageProgress.vue"),
+    component: () => import(/* webpackChunkName: "PageProgress" */ "../views/Progress/PageProgress/PageProgress.vue"),
+  },
+  {
+    path: "/progress-circle",
+    name: "PageProgressCircle",
+    component: () => import(/* webpackChunkName: "PageProgressCircle" */ "../views/Progress/PageProgressCircle/PageProgressCircle.vue"),
   },
   {
     path: "/list",

package/docs/src/views/PageList/PageList.js

@@ -3,9 +3,13 @@ import AlohaTableProps from "../../global/components/AlohaTableProps/AlohaTableP
 import ATranslation from "../../../../src/ATranslation/ATranslation";
 import AList from "../../../../src/AList/AList";
 import PageListClassGroup from "./PageListClassGroup/PageListClassGroup.vue";
+import PageListKeyChildren from "./PageListKeyChildren/PageListKeyChildren.vue";
+import PageListKeyLabelCallback from "./PageListKeyLabelCallback/PageListKeyLabelCallback.vue";
+import PageListTagLabelTag from "./PageListTagLabelTag/PageListTagLabelTag.vue";
+import PageListWithSlot from "./PageListWithSlot/PageListWithSlot.vue";
+import PageListWithChildren from "./PageListWithChildren/PageListWithChildren.vue";
+import PageListWithoutChildren from "./PageListWithoutChildren/PageListWithoutChildren.vue";
 
-import EventsAPI from "./compositionAPI/EventsAPI";
-import ExposesAPI from "./compositionAPI/ExposesAPI";
 import PageTitleAPI from "./compositionAPI/PageTitleAPI";
 import PropsAPI from "./compositionAPI/PropsAPI";
 import SlotsAPI from "./compositionAPI/SlotsAPI";
@@ -18,6 +22,12 @@ export default {
     ATranslation,
     AList,
     PageListClassGroup,
+    PageListKeyChildren,
+    PageListKeyLabelCallback,
+    PageListTagLabelTag,
+    PageListWithSlot,
+    PageListWithChildren,
+    PageListWithoutChildren
   },
   setup() {
     const {
@@ -32,68 +42,10 @@ export default {
       dataSlots,
     } = SlotsAPI();
 
-    const {
-      dataEvents,
-    } = EventsAPI();
-
-    const {
-      dataExposes,
-    } = ExposesAPI();
-
     return {
-      dataEvents,
-      dataExposes,
       dataProps,
       dataSlots,
       pageTitle,
     };
   },
-  data() {
-    return {
-      items: [
-        {
-          label: "label 1",
-          items: [
-            {
-              label: "label 1.1",
-              items: [
-                {
-                  label: "label 1.1.1",
-                },
-                {
-                  label: "label 1.1.2",
-                },
-                {
-                  label: "label 1.1.3",
-                },
-              ],
-            },
-            {
-              label: "label 1.2",
-            },
-            {
-              label: "label 1.3",
-              items: [
-                {
-                  label: "label 1.3.1",
-                },
-                {
-                  label: "label 1.3.2",
-                },
-                {
-                  label: "label 1.3.3",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: "level 2",
-        },
-        {
-          label: "level 3",
-        },
-      ],
-    };
-  },
 };

package/docs/src/views/PageList/PageList.pug

@@ -11,26 +11,24 @@ aloha-page(
 
     page-list-class-group
 
+    page-list-without-children
 
+    page-list-with-children
 
-    h2 without children
-    a-list(
-      :data="items"
-      key-label="label"
-    )
-    h2 with children
-    a-list(
-      :data="items"
-      key-label="label"
-      key-children="items"
-    )
-    h2 with slot
-    a-list(
-      :data="items"
-      key-children="items"
+    page-list-with-slot
+
+    page-list-key-children
+
+    page-list-key-label-callback
+
+    page-list-tag-label-tag
+
+    aloha-table-props(
+      :data="dataProps"
     )
-      template(
-        v-slot:listItem="vm"
-      )
-        pre {{ vm.item.label }}
 
+    aloha-table-props(
+      table-label="Slots"
+      :data="dataSlots"
+      :columns="['name', 'description']"
+    )

package/docs/src/views/PageList/PageListClassGroup/compositionAPI/HtmlAPI.js

@@ -1,15 +1,7 @@
 export default function HtmlAPI() {
-  const codeHtml = `<a-dropdown
-  :actions="dropdownActions"
-  :in-body="true"
-  button-text="in-body='true'"
-></a-dropdown>
-<a-dropdown
-  class="a_ml_2"
-  :actions="dropdownActions"
-  :in-body="false"
-  button-text="in-body='false'"
-></a-dropdown>`;
+  const codeHtml = `<a-list :data="items" key-label="label" class-main="a_list_group" class-item="a_list_group__item"></a-list>
+<a-list class="a_mt_5" :data="items" key-label="label" class-main="a_list_group a_list_group_gap" class-item="a_list_group__item"></a-list>
+<a-list class="a_mt_5" :data="items" key-label="label" class-main="a_list_group a_list_group_edge" class-item="a_list_group__item"></a-list>`;
 
   return {
     codeHtml,

package/docs/src/views/PageList/PageListKeyChildren/PageListKeyChildren.js

@@ -0,0 +1,52 @@
+import AList from "../../../../../src/AList/AList";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageListKeyChildren",
+  components: {
+    AList,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml
+    } = HtmlAPI();
+    const {
+      codeJs
+    } = JsAPI();
+
+    const items = [
+      {
+        label: "Parent 1",
+        children: [
+          {
+            label: "Child 1"
+          },
+          {
+            label: "Child 2"
+          }
+        ],
+      },
+      {
+        label: "Parent 2",
+        children: [
+          {
+            label: "Child 3"
+          },
+          {
+            label: "Child 4"
+          }
+        ],
+      }
+    ];
+
+    return {
+      codeHtml,
+      codeJs,
+      items,
+    };
+  },
+};

package/docs/src/views/PageList/PageListKeyChildren/PageListKeyChildren.pug

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_LIST_KEY_CHILDREN_HEADER_"
+  description="_A_LIST_KEY_CHILDREN_DESCRIPTION_"
+  :props="['keyChildren']"
+)
+  a-list(
+    :data="items"
+    key-label="label"
+    key-children="children"
+  )

package/docs/src/views/PageList/PageListKeyChildren/PageListKeyChildren.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageListKeyChildren.pug"></template>
+<script src="./PageListKeyChildren.js"></script>

package/docs/src/views/PageList/PageListKeyChildren/compositionAPI/HtmlAPI.js

@@ -0,0 +1,7 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-list :data="items" key-label="label" key-children="children"></a-list>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageList/PageListKeyChildren/compositionAPI/JsAPI.js

@@ -0,0 +1,44 @@
+export default function JsAPI() {
+  const codeJs = `import AList from "aloha-vue/src/AList/AList";
+    
+export default {
+  name: "PageListKeyChildren",
+  components: {
+    AList,
+  },
+  setup() {
+    const items = [
+      {
+        label: "Parent 1",
+        children: [
+          {
+            label: "Child 1" 
+          },
+          {
+            label: "Child 2"
+          }
+        ],
+      },
+      {
+        label: "Parent 2",
+        children: [
+          {
+            label: "Child 3" 
+          },
+          {
+            label: "Child 4"
+          }
+        ],
+      }
+    ];
+
+    return {
+      items,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageList/PageListKeyLabelCallback/PageListKeyLabelCallback.js

@@ -0,0 +1,45 @@
+import AList from "../../../../../src/AList/AList";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageListKeyLabelCallback",
+  components: {
+    AList,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml
+    } = HtmlAPI();
+    const {
+      codeJs
+    } = JsAPI();
+
+    const items = [
+      {
+        label: "Item 1",
+      },
+      {
+        label: "Item 2",
+      },
+      {
+        label: "Item 3",
+      },
+      {
+        label: "Item 4",
+      },
+    ];
+
+    const keyLabelCallback = ({ item, itemIndex }) => `${ item.label } - Index: ${ itemIndex }`;
+
+    return {
+      codeHtml,
+      codeJs,
+      items,
+      keyLabelCallback,
+    };
+  },
+};

package/docs/src/views/PageList/PageListKeyLabelCallback/PageListKeyLabelCallback.pug

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_LIST_KEY_LABEL_CALLBACK_HEADER_"
+  description="_A_LIST_KEY_LABEL_CALLBACK_DESCRIPTION_"
+  :props="['keyLabelCallback']"
+)
+  a-list(
+    :data="items"
+    :key-label-callback="keyLabelCallback"
+    key-label="label"
+  )

package/docs/src/views/PageList/PageListKeyLabelCallback/PageListKeyLabelCallback.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageListKeyLabelCallback.pug"></template>
+<script src="./PageListKeyLabelCallback.js"></script>

package/docs/src/views/PageList/PageListKeyLabelCallback/compositionAPI/HtmlAPI.js

@@ -0,0 +1,7 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-list :data="items" :key-label-callback="keyLabelCallback" key-label="label"></a-list>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageList/PageListKeyLabelCallback/compositionAPI/JsAPI.js

@@ -0,0 +1,34 @@
+export default function JsAPI() {
+  const codeJs = `import AList from "aloha-vue/src/AList/AList";
+    
+export default {
+  name: "PageListKeyLabelCallback",
+  components: {
+    AList,
+  },
+  setup() {
+    const items = [
+      {
+        label: "label 1",
+      },
+      {
+        label: "label 2",
+      },
+      {
+        label: "label 3",
+      },
+      {
+        label: "label 4",
+      },
+    ];
+
+    return {
+      items,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageList/PageListTagLabelTag/PageListTagLabelTag.js

@@ -0,0 +1,38 @@
+import AList from "../../../../../src/AList/AList";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageListTagLabelTag",
+  components: {
+    AList,
+    AlohaExample,
+  },
+  setup() {
+    const { codeHtml } = HtmlAPI();
+    const { codeJs } = JsAPI();
+
+    const items = [
+      {
+        label: "Item 1",
+      },
+      {
+        label: "Item 2",
+      },
+      {
+        label: "Item 3",
+      },
+      {
+        label: "Item 4",
+      },
+    ];
+
+    return {
+      codeHtml,
+      codeJs,
+      items,
+    };
+  },
+};

package/docs/src/views/PageList/PageListTagLabelTag/PageListTagLabelTag.pug

@@ -0,0 +1,13 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_LIST_TAG_LABEL_TAG_HEADER_"
+  description="_A_LIST_TAG_LABEL_TAG_DESCRIPTION_"
+  :props="['tag', 'labelTag']"
+)
+  a-list(
+    :data="items"
+    key-label="label"
+    tag="div"
+    label-tag="span"
+  )

package/docs/src/views/PageList/PageListTagLabelTag/PageListTagLabelTag.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageListTagLabelTag.pug"></template>
+<script src="./PageListTagLabelTag.js"></script>

package/docs/src/views/PageList/PageListTagLabelTag/compositionAPI/HtmlAPI.js

@@ -0,0 +1,7 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-list :data="items" key-label="label" tag="div" label-tag="h3"></a-list>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageList/PageListTagLabelTag/compositionAPI/JsAPI.js

@@ -0,0 +1,34 @@
+export default function JsAPI() {
+  const codeJs = `import AList from "aloha-vue/src/AList/AList";
+    
+export default {
+  name: "PageListTagLabelTag",
+  components: {
+    AList,
+  },
+  setup() {
+    const items = [
+      {
+        label: "label 1",
+      },
+      {
+        label: "label 2",
+      },
+      {
+        label: "label 3",
+      },
+      {
+        label: "label 4",
+      },
+    ];
+
+    return {
+      items,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}