aloha-vue 1.0.375 → 1.0.376

package/docs/package.json

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

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

@@ -141,6 +141,13 @@ export default {
                 name: "PageCheckbox",
               }
             },
+            {
+              id: "fieldset",
+              label: "Fieldset",
+              to: {
+                name: "PageFieldset",
+              }
+            },
             {
               id: "ui-child",
               label: "Child",
@@ -354,8 +361,15 @@ export default {
               to: {
                 name: "PageTableSort",
               }
-            }
-          ]
+            },
+            {
+              id: "PageTableFilters",
+              label: "Table filters",
+              to: {
+                name: "PageTableFilters",
+              }
+            },
+          ],
         },
         {
           id: "tabs",

package/docs/src/mainTranslation.js

@@ -19,6 +19,7 @@ import PageTableI18n from "./views/PageTable/i18n/PageTableI18n";
 import PageTableSimpleI18n from "./views/PageTable/PageTableSimple/i18n/PageTableSimpleI18n";
 import PageTablePaginationI18n from "./views/PageTable/PageTablePagination/i18n/PageTablePaginationI18n";
 import PageTableSortI18n from "./views/PageTable/PageTableSort/i18n/PageTableSortI18n";
+import PageTableFiltersI18n from "./views/PageTable/PageTableFilters/i18n/PageTableFiltersI18n";
 import PageAOnHooksI18n from "./views/PageDirectives/PageOnHooks/i18n/PageAOnHooksI18n";
 import PageDisclosureI18n from "./views/PageDisclosure/i18n/PageDisclosureI18n";
 import PageTooltipI18n from "./views/PageTooltip/i18n/PageTooltipI18n";
@@ -28,6 +29,9 @@ import PageListI18n from "./views/PageList/i18n/PageListI18n";
 import PageSelectI18n from "./views/Form/PageSelect/i18n/PageSelectI18n";
 import PageProgressI18n from "./views/Progress/PageProgress/i18n/PageProgressI18n";
 import PageProgressCircleI18n from "./views/Progress/PageProgressCircle/i18n/PageProgressCircleI18n";
+import PageRadioI18n from "./views/Form/PageRadio/i18n/PageRadioI18n";
+import PageCheckboxI18n from "./views/Form/PageCheckbox/i18n/PageCheckboxI18n";
+import PageFieldsetI18n from "./views/Form/PageFieldset/i18n/PageFieldsetI18n";
 
 export const mainTranslation = {
   ar: {
@@ -43,6 +47,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.ar,
     ...PageTablePaginationI18n.ar,
     ...PageTableSortI18n.ar,
+    ...PageTableFiltersI18n.ar,
     ...PageAOnHooksI18n.ar,
     ...PageDisclosureI18n.ar,
     ...PageTooltipI18n.ar,
@@ -52,6 +57,9 @@ export const mainTranslation = {
     ...PageSelectI18n.ar,
     ...PageProgressI18n.ar,
     ...PageProgressCircleI18n.ar,
+    ...PageRadioI18n.ar,
+    ...PageCheckboxI18n.ar,
+    ...PageFieldsetI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -66,6 +74,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.de,
     ...PageTablePaginationI18n.de,
     ...PageTableSortI18n.de,
+    ...PageTableFiltersI18n.de,
     ...PageAOnHooksI18n.de,
     ...PageDisclosureI18n.de,
     ...PageTooltipI18n.de,
@@ -75,6 +84,9 @@ export const mainTranslation = {
     ...PageSelectI18n.de,
     ...PageProgressI18n.de,
     ...PageProgressCircleI18n.de,
+    ...PageRadioI18n.de,
+    ...PageCheckboxI18n.de,
+    ...PageFieldsetI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -89,6 +101,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.en,
     ...PageTablePaginationI18n.en,
     ...PageTableSortI18n.en,
+    ...PageTableFiltersI18n.en,
     ...PageAOnHooksI18n.en,
     ...PageDisclosureI18n.en,
     ...PageTooltipI18n.en,
@@ -98,6 +111,9 @@ export const mainTranslation = {
     ...PageSelectI18n.en,
     ...PageProgressI18n.en,
     ...PageProgressCircleI18n.en,
+    ...PageRadioI18n.en,
+    ...PageCheckboxI18n.en,
+    ...PageFieldsetI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -112,6 +128,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.es,
     ...PageTablePaginationI18n.es,
     ...PageTableSortI18n.es,
+    ...PageTableFiltersI18n.es,
     ...PageAOnHooksI18n.es,
     ...PageDisclosureI18n.es,
     ...PageTooltipI18n.es,
@@ -121,6 +138,9 @@ export const mainTranslation = {
     ...PageSelectI18n.es,
     ...PageProgressI18n.es,
     ...PageProgressCircleI18n.es,
+    ...PageRadioI18n.es,
+    ...PageCheckboxI18n.es,
+    ...PageFieldsetI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -135,6 +155,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.fr,
     ...PageTablePaginationI18n.fr,
     ...PageTableSortI18n.fr,
+    ...PageTableFiltersI18n.fr,
     ...PageAOnHooksI18n.fr,
     ...PageDisclosureI18n.fr,
     ...PageTooltipI18n.fr,
@@ -144,6 +165,9 @@ export const mainTranslation = {
     ...PageSelectI18n.fr,
     ...PageProgressI18n.fr,
     ...PageProgressCircleI18n.fr,
+    ...PageRadioI18n.fr,
+    ...PageCheckboxI18n.fr,
+    ...PageFieldsetI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -158,6 +182,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.hr,
     ...PageTablePaginationI18n.hr,
     ...PageTableSortI18n.hr,
+    ...PageTableFiltersI18n.hr,
     ...PageAOnHooksI18n.hr,
     ...PageDisclosureI18n.hr,
     ...PageTooltipI18n.hr,
@@ -167,6 +192,9 @@ export const mainTranslation = {
     ...PageSelectI18n.hr,
     ...PageProgressI18n.hr,
     ...PageProgressCircleI18n.hr,
+    ...PageRadioI18n.hr,
+    ...PageCheckboxI18n.hr,
+    ...PageFieldsetI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -181,6 +209,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.it,
     ...PageTablePaginationI18n.it,
     ...PageTableSortI18n.it,
+    ...PageTableFiltersI18n.it,
     ...PageAOnHooksI18n.it,
     ...PageDisclosureI18n.it,
     ...PageTooltipI18n.it,
@@ -190,6 +219,9 @@ export const mainTranslation = {
     ...PageSelectI18n.it,
     ...PageProgressI18n.it,
     ...PageProgressCircleI18n.it,
+    ...PageRadioI18n.it,
+    ...PageCheckboxI18n.it,
+    ...PageFieldsetI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -204,6 +236,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.ru,
     ...PageTablePaginationI18n.ru,
     ...PageTableSortI18n.ru,
+    ...PageTableFiltersI18n.ru,
     ...PageAOnHooksI18n.ru,
     ...PageDisclosureI18n.ru,
     ...PageTooltipI18n.ru,
@@ -213,5 +246,8 @@ export const mainTranslation = {
     ...PageSelectI18n.ru,
     ...PageProgressI18n.ru,
     ...PageProgressCircleI18n.ru,
+    ...PageRadioI18n.ru,
+    ...PageCheckboxI18n.ru,
+    ...PageFieldsetI18n.ru,
   },
 };

package/docs/src/router/index.js

@@ -39,6 +39,11 @@ const ROUTES = [
     name: "PageTableSort",
     component: () => import(/* webpackChunkName: "PageTableSort" */ "../views/PageTable/PageTableSort/PageTableSort.vue"),
   },
+  {
+    path: "/table-filters",
+    name: "PageTableFilters",
+    component: () => import(/* webpackChunkName: "PageTableFilters" */ "../views/PageTable/PageTableFilters/PageTableFilters.vue"),
+  },
   {
     path: "/spinner",
     name: "PageSpinner",
@@ -104,6 +109,11 @@ const ROUTES = [
     name: "PageRadio",
     component: () => import(/* webpackChunkName: "PageRadio" */ "../views/Form/PageRadio/PageRadio.vue"),
   },
+  {
+    path: "/fieldset",
+    name: "PageFieldset",
+    component: () => import(/* webpackChunkName: "PageFieldset" */ "../views/Form/PageFieldset/PageFieldset.vue"),
+  },
   {
     path: "/select",
     name: "PageSelect",

package/docs/src/views/Form/PageCheckbox/PageCheckbox.js

@@ -1,11 +1,62 @@
-import ACheckbox from "../../../../../src/ui/ACheckbox/ACheckbox";
+import AlohaPage from "../../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../../global/components/AlohaTableProps/AlohaTableProps.vue";
 import AOneCheckbox from "../../../../../src/ui/AOneCheckbox/AOneCheckbox";
+import ATranslation from "../../../../../src/ATranslation/ATranslation";
+import PageCheckboxCollapse from "./PageCheckboxCollapse/PageCheckboxCollapse.vue";
+import PageCheckboxIsButtonGroup from "./PageCheckboxIsButtonGroup/PageCheckboxIsButtonGroup.vue";
+import PageCheckboxKeyDisabled from "./PageCheckboxKeyDisabled/PageCheckboxKeyDisabled.vue";
+import PageCheckboxSearch from "./PageCheckboxSearch/PageCheckboxSearch.vue";
+import PageCheckboxTranslateData from "./PageCheckboxTranslateData/PageCheckboxTranslateData.vue";
+import PageCheckboxTwoColumns from "./PageCheckboxTwoColumns/PageCheckboxTwoColumns.vue";
+
+import PageTitleAPI from "./compositionAPI/PageTitleAPI";
+import PropsAPI from "./compositionAPI/PropsAPI";
+import SlotsAPI from "./compositionAPI/SlotsAPI";
+import EventsAPI from "./compositionAPI/EventsAPI";
+import ExposesAPI from "./compositionAPI/ExposesAPI";
 
 export default {
   name: "PageCheckbox",
   components: {
-    ACheckbox,
+    AlohaPage,
+    AlohaTableProps,
+    ATranslation,
     AOneCheckbox,
+    PageCheckboxCollapse,
+    PageCheckboxSearch,
+    PageCheckboxKeyDisabled,
+    PageCheckboxTranslateData,
+    PageCheckboxTwoColumns,
+    PageCheckboxIsButtonGroup,
+  },
+  setup() {
+    const {
+      pageTitle,
+    } = PageTitleAPI();
+
+    const {
+      dataProps,
+    } = PropsAPI();
+
+    const {
+      dataSlots,
+    } = SlotsAPI();
+
+    const {
+      dataEvents,
+    } = EventsAPI();
+
+    const {
+      dataExposes,
+    } = ExposesAPI();
+
+    return {
+      dataEvents,
+      dataExposes,
+      dataProps,
+      dataSlots,
+      pageTitle,
+    };
   },
   data() {
     return {

package/docs/src/views/Form/PageCheckbox/PageCheckbox.pug

@@ -1,130 +1,38 @@
-div
-  h1 ACheckbox
-  a-one-checkbox(
-    v-model="model"
-    label="aloha one checkbox"
-    true-value="aloha"
-    :false-value="undefined"
-    :required="true"
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
   )
-  div model: {{ model }}
-  a-one-checkbox(
-    v-model="model1"
-    label="aloha one checkbox"
-    :is-width-auto="true"
-    :false-value="false"
-  )
-  div model1: {{ model1 }}
-  a-checkbox(
-    v-model="modelArr"
-    :data="data"
-    key-id="id"
-    key-label="label"
-    label=":is-button-group=true"
-    :is-button-group="true"
-    :required="true"
-    sort-order="desc"
-    sort-order-group="asc"
-  )
-  a-checkbox(
-    v-model="modelArr"
-    :data="data"
-    key-id="id"
-    key-label="label"
-    label=":is-button-group=true und key-group"
-    :is-button-group="true"
-    :key-group="['alohaBR', 'aloha']"
-    :required="true"
-    sort-order="desc"
-    sort-order-group="asc"
-  )
-  a-checkbox(
-    v-model="modelArr"
-    :data="data"
-    key-id="id"
-    key-label="label"
-    label="group alohaBR -> aloha"
-    :is-button-group="false"
-    :required="true"
-    :key-group="['alohaBR', 'aloha']"
-    sort-order="desc"
-    sort-order-group="asc"
-  )
-  a-checkbox(
-    v-model="modelArr"
-    :data="data"
-    key-id="id"
-    key-label="label"
-    label="group aloha -> alohaBR"
-    :is-button-group="false"
-    :required="true"
-    :key-group="['aloha', 'alohaBR']"
-  )
-  div modelArr:
-    pre {{ modelArr }}
-
-  .a_custom_control.a_custom_checkbox
-    input.a_custom_control_input(
-      id="checkbox_0"
-      type="checkbox"
-      value="0"
+    a-translation(
+      tag="p"
+      html="_A_CHECKBOX_COMPONENT_DESCRIPTION_"
     )
-    label.a_custom_control_label(
-      for="checkbox_0"
-    ) Aloha
 
-  .a_custom_control.a_custom_checkbox
-    input.a_custom_control_input(
-      id="checkbox_1"
-      type="checkbox"
-      value="1"
-      :indeterminate="true"
-    )
-    label.a_custom_control_label(
-      for="checkbox_1"
-    ) Aloha indeterminate
+    page-checkbox-search
 
-  .a_custom_control.a_custom_checkbox
-    input.a_custom_control_input(
-      id="checkbox_2"
-      type="checkbox"
-      value="1"
-      :disabled="true"
-    )
-    label.a_custom_control_label(
-      for="checkbox_2"
-    ) Aloha
+    page-checkbox-key-disabled
 
-  .a_custom_control.a_custom_checkbox
-    input.a_custom_control_input(
-      id="checkbox_3"
-      type="checkbox"
-      value="1"
-      :checked="true"
-      :disabled="true"
-    )
-    label.a_custom_control_label(
-      for="checkbox_3"
-    ) Aloha
+    page-checkbox-translate-data
 
-  .a_custom_control.a_custom_checkbox
-    input.a_custom_control_input(
-      id="checkbox_4"
-      type="checkbox"
-      value="1"
-      :indeterminate="true"
-      :disabled="true"
-    )
-    label.a_custom_control_label(
-      for="checkbox_4"
-    ) Aloha
+    page-checkbox-two-columns
 
-  div
-    input.a_btn_check(
-      id="checkbox_button_1"
-      type="checkbox"
-      autocomplete="off"
+    page-checkbox-is-button-group
+
+    page-checkbox-collapse
+
+    a-one-checkbox(
+      v-model="model"
+      label="aloha one checkbox"
+      true-value="aloha"
+      :false-value="undefined"
+      :required="true"
+    )
+    div model: {{ model }}
+    a-one-checkbox(
+      v-model="model1"
+      label="aloha one checkbox"
+      :is-width-auto="true"
+      :false-value="false"
     )
-    label.a_btn.a_btn_outline_primary(
-      for="checkbox_button_1"
-    ) Aloha
+    div model1: {{ model1 }}

package/docs/src/views/Form/PageCheckbox/PageCheckboxCollapse/PageCheckboxCollapse.js

@@ -0,0 +1,73 @@
+import {
+  ref,
+} from "vue";
+
+import ACheckbox from "../../../../../../src/ui/ACheckbox/ACheckbox";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageCheckboxCollapse",
+  components: {
+    ACheckbox,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const data = [
+      {
+        label: "Aloha 0",
+        id: "aloha_0",
+      },
+      {
+        label: "Aloha 1",
+        id: "aloha_1",
+      },
+      {
+        label: "Aloha 2",
+        id: "aloha_2",
+      },
+      {
+        label: "Aloha 3",
+        id: "aloha_3",
+      },
+      {
+        label: "Aloha 4",
+        id: "aloha_4",
+      },
+      {
+        label: "Aloha 5",
+        id: "aloha_5",
+      },
+      {
+        label: "Aloha 6",
+        id: "aloha_6",
+      },
+      {
+        label: "Aloha 7",
+        id: "aloha_7",
+      },
+      {
+        label: "Aloha 8",
+        id: "aloha_8",
+      },
+    ];
+    const model = ref(undefined);
+
+    return {
+      codeHtml,
+      codeJs,
+      data,
+      model,
+    };
+  },
+};

package/docs/src/views/Form/PageCheckbox/PageCheckboxCollapse/PageCheckboxCollapse.pug

@@ -0,0 +1,30 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_CHECKBOX_GROUP_COLLAPSE_HEADER_"
+  description="_A_CHECKBOX_GROUP_COLLAPSE_DESCRIPTION_"
+  :props="['collapse', 'is-collapsed']"
+)
+  .a_columns.a_columns_count_12
+    .a_column.a_column_6.a_columns_count_12_touch
+      a-checkbox(
+        v-model="model"
+        :data="data"
+        key-id="id"
+        key-label="label"
+        label="Aloha"
+        type="select"
+        :collapse="true"
+      )
+      div model: {{ model }}
+      a-checkbox(
+        v-model="model"
+        :data="data"
+        key-id="id"
+        key-label="label"
+        label="Aloha"
+        type="select"
+        :collapse="true"
+        :is-collapsed="true"
+      )
+      div model: {{ model }}

package/docs/src/views/Form/PageCheckbox/PageCheckboxCollapse/PageCheckboxCollapse.vue

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

package/docs/src/views/Form/PageCheckbox/PageCheckboxCollapse/compositionAPI/HtmlAPI.js

@@ -0,0 +1,27 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-checkbox
+  v-model="model"
+  :data="data"
+  key-id="id"
+  key-label="label"
+  label="Aloha"
+  type="select"
+  :collapse="true"
+></a-checkbox>
+<div>model: {{ model }}</div>
+<a-checkbox
+  v-model="model"
+  :data="data"
+  key-id="id"
+  key-label="label"
+  label="Aloha"
+  type="select"
+  :collapse="true"
+  :is-collapsed="true"
+></a-checkbox>
+<div>model: {{ model }}</div>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageCheckbox/PageCheckboxCollapse/compositionAPI/JsAPI.js

@@ -0,0 +1,64 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import ACheckbox from "aloha-vue/src/ui/ACheckbox/ACheckbox";
+    
+export default {
+  name: "PageCheckboxCollapse",
+  components: {
+    ACheckbox,
+  },
+  setup() {
+    const data = [
+      {
+        label: "Aloha 0",
+        id: "aloha_0",
+      },
+      {
+        label: "Aloha 1",
+        id: "aloha_1",
+      },
+      {
+        label: "Aloha 2",
+        id: "aloha_2",
+      },
+      {
+        label: "Aloha 3",
+        id: "aloha_3",
+      },
+      {
+        label: "Aloha 4",
+        id: "aloha_4",
+      },
+      {
+        label: "Aloha 5",
+        id: "aloha_5",
+      },
+      {
+        label: "Aloha 6",
+        id: "aloha_6",
+      },
+      {
+        label: "Aloha 7",
+        id: "aloha_7",
+      },
+      {
+        label: "Aloha 8",
+        id: "aloha_8",
+      },
+    ];
+    const model = ref(undefined);
+
+    return {
+      data,
+      model,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}