aloha-vue 1.0.375 → 1.0.377

package/dist/index.js

@@ -0,0 +1,76 @@
+//  components
+export { default as AAccordion } from "../src/AAccordion/AAccordion";
+export { default as AAlert } from "../src/AAlert/AAlert";
+export { default as AButton } from "../src/AButton/AButton";
+export { default as ACheckbox } from "../src/ui/ACheckbox/ACheckbox";
+export { default as ACloak } from "../src/ACloak/ACloak";
+export { default as ADatepicker } from "../src/ui/ADatepicker/ADatepicker";
+export { default as ADisclosure } from "../src/ADisclosure/ADisclosure";
+export { default as ADropdown } from "../src/ADropdown/ADropdown";
+export { default as AErrors } from "../src/ui/AErrors/AErrors";
+export { default as AFieldset } from "../src/ui/AFieldset/AFieldset";
+export { default as AForm } from "../src/ui/AForm/AForm";
+export { default as AGet } from "../src/AGet/AGet";
+export { default as AGroup } from "../src/ui/AGroup/AGroup";
+export { default as AGroupButtonDropdown } from "../src/AGroupButtonDropdown/AGroupButtonDropdown";
+export { default as AIcon } from "../src/AIcon/AIcon";
+export { default as AInfiniteScroll } from "../src/AInfiniteScroll/AInfiniteScroll";
+export { default as AInput } from "../src/ui/AInput/AInput";
+export { default as AInputFile } from "../src/ui/AInputFile/AInputFile";
+export { default as AInputNumber } from "../src/ui/AInputNumber/AInputNumber";
+export { default as ALabel } from "../src/ui/ALabel/ALabel";
+export { default as ALink } from "../src/ALink/ALink";
+export { default as AList } from "../src/AList/AList";
+export { default as ALoading } from "../src/ALoading/ALoading";
+export { default as AMenu } from "../src/AMenu/AMenu";
+export { default as AModal } from "../src/AModal/AModal";
+export { default as AModalConfirm } from "../src/AModalConfirm/AModalConfirm";
+export { default as ANotification } from "../src/ANotification/ANotification";
+export { default as AOneCheckbox } from "../src/ui/AOneCheckbox/AOneCheckbox";
+export { default as APageTabTitle } from "../src/APageTabTitle/APageTabTitle";
+export { default as APagination } from "../src/APagination/APagination";
+export { default as AProgress } from "../src/AProgress/AProgress";
+export { default as AProgressCircle } from "../src/AProgressCircle/AProgressCircle";
+export { default as ARadio } from "../src/ui/ARadio/ARadio";
+export { default as ARate } from "../src/ARate/ARate";
+export { default as ARequired } from "../src/ui/ARequired/ARequired";
+export { default as AResizer } from "../src/AResizer/AResizer";
+export { default as ASelect } from "../src/ui/ASelect/ASelect";
+export { default as AShowMore } from "../src/AShowMore/AShowMore";
+export { default as ASpinner } from "../src/ASpinner/ASpinner";
+export { default as ASwitch } from "../src/ui/ASwitch/ASwitch";
+export { default as ATable } from "../src/ATable/ATable";
+export { default as ATabs } from "../src/ATabs/ATabs";
+export { default as ATemplate } from "../src/ui/ATemplate/ATemplate";
+export { default as ATextarea } from "../src/ui/ATextarea/ATextarea";
+export { default as ATinymce } from "../src/ui/ATinymce/ATinymce";
+export { default as ATooltip } from "../src/ATooltip/ATooltip";
+export { default as ATranslation } from "../src/ATranslation/ATranslation";
+export { default as AWizard } from "../src/AWizard/AWizard";
+
+//  compositionAPI
+export { default as AConfirmAPI } from "../src/compositionAPI/AConfirmAPI";
+export { default as ADropdownGlobalAPI } from "../src/compositionAPI/ADropdownGlobalAPI";
+export { default as AEventOutsideAPI } from "../src/compositionAPI/AEventOutsideAPI";
+export { default as AFiltersAPI } from "../src/compositionAPI/AFiltersAPI";
+export { default as AHttpAPI } from "../src/compositionAPI/AHttpAPI";
+export { default as AMobileAPI } from "../src/compositionAPI/AMobileAPI";
+export { default as ANotificationAPI } from "../src/compositionAPI/ANotificationAPI";
+export { default as APageTabTitleAPI } from "../src/compositionAPI/APageTabTitleAPI";
+
+// directives
+export { default as AOnHooks } from "../src/directives/AOnHooks";
+export { default as ASafeHtml } from "../src/directives/ASafeHtml";
+
+// plugins
+export { default as AAlertPlugin } from "../src/plugins/AAlertPlugin";
+export { default as AGroupButtonDropdownPlugin } from "../src/plugins/AGroupButtonDropdownPlugin";
+export { default as AHttpPlugin } from "../src/plugins/AHttpPlugin";
+export { default as AI18nPlugin } from "../src/plugins/AI18nPlugin";
+export { default as AIconPlugin } from "../src/plugins/AIconPlugin";
+export { default as AMobilePlugin } from "../src/plugins/AMobilePlugin";
+export { default as AModalPlugin } from "../src/plugins/AModalPlugin";
+export { default as APageTabTitlePlugin } from "../src/plugins/APageTabTitlePlugin";
+export { default as ASelectPlugin } from "../src/plugins/ASelectPlugin";
+export { default as ASpinnerPlugin } from "../src/plugins/ASpinnerPlugin";
+export { default as ATablePlugin } from "../src/plugins/ATablePlugin";

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",
@@ -235,6 +242,14 @@ export default {
           },
           icon: "BoxArrowUpRight",
         },
+        {
+          id: "LinkCopy",
+          label: "Link copy",
+          to: {
+            name: "PageLinkCopy",
+          },
+          icon: "Files",
+        },
         {
           id: "list",
           label: "List",
@@ -354,8 +369,15 @@ export default {
               to: {
                 name: "PageTableSort",
               }
-            }
-          ]
+            },
+            {
+              id: "PageTableFilters",
+              label: "Table filters",
+              to: {
+                name: "PageTableFilters",
+              }
+            },
+          ],
         },
         {
           id: "tabs",

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

@@ -9,3 +9,9 @@
     :is-sorting-multi-column="false"
     :show-first-sorting-sequence-number="false"
   )
+    template(
+      v-slot:description="{ row }"
+    )
+      div(
+        v-html="row.description"
+      )

package/docs/src/global/components/AlohaTableProps/compositionAPI/ColumnsAPI.js

@@ -22,6 +22,7 @@ export default function ColumnsAPI(props) {
       label: "_ALOHA_TABLE_COLUMN_DESCRIPTION_",
       keyLabel: "description",
       sortId: "description",
+      slot: "description",
     },
     type: {
       label: "_ALOHA_TABLE_COLUMN_TYPE_",

package/docs/src/main.js

@@ -1,14 +1,17 @@
 import App from "./App/App.vue";
 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";
+import {
+  AIconPlugin,
+  AI18nPlugin,
+  AMobilePlugin,
+  AModalPlugin,
+  ASafeHtml,
+  ASelectPlugin,
+  ATablePlugin,
+} from "../../dist";
 import mainIcons from "./mainIcons";
-import ASafeHtml from "../../src/directives/ASafeHtml";
 
 import {
   mainTranslation,
@@ -34,6 +37,11 @@ APP.use(ASelectPlugin, {
     menuWidthType: "by_content",
   },
 });
+APP.use(ATablePlugin, {
+  config: {
+
+  },
+});
 // APP.use(AGroupButtonDropdownPlugin, {
 //   propsDefault: {
 //     dropdownAttributes: {

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,10 @@ 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";
+import PageLinkCopyI18n from "./views/PageLinkCopy/i18n/PageLinkCopyI18n";
 
 export const mainTranslation = {
   ar: {
@@ -43,6 +48,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.ar,
     ...PageTablePaginationI18n.ar,
     ...PageTableSortI18n.ar,
+    ...PageTableFiltersI18n.ar,
     ...PageAOnHooksI18n.ar,
     ...PageDisclosureI18n.ar,
     ...PageTooltipI18n.ar,
@@ -52,6 +58,10 @@ export const mainTranslation = {
     ...PageSelectI18n.ar,
     ...PageProgressI18n.ar,
     ...PageProgressCircleI18n.ar,
+    ...PageRadioI18n.ar,
+    ...PageCheckboxI18n.ar,
+    ...PageFieldsetI18n.ar,
+    ...PageLinkCopyI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -66,6 +76,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.de,
     ...PageTablePaginationI18n.de,
     ...PageTableSortI18n.de,
+    ...PageTableFiltersI18n.de,
     ...PageAOnHooksI18n.de,
     ...PageDisclosureI18n.de,
     ...PageTooltipI18n.de,
@@ -75,6 +86,10 @@ export const mainTranslation = {
     ...PageSelectI18n.de,
     ...PageProgressI18n.de,
     ...PageProgressCircleI18n.de,
+    ...PageRadioI18n.de,
+    ...PageCheckboxI18n.de,
+    ...PageFieldsetI18n.de,
+    ...PageLinkCopyI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -89,6 +104,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.en,
     ...PageTablePaginationI18n.en,
     ...PageTableSortI18n.en,
+    ...PageTableFiltersI18n.en,
     ...PageAOnHooksI18n.en,
     ...PageDisclosureI18n.en,
     ...PageTooltipI18n.en,
@@ -98,6 +114,10 @@ export const mainTranslation = {
     ...PageSelectI18n.en,
     ...PageProgressI18n.en,
     ...PageProgressCircleI18n.en,
+    ...PageRadioI18n.en,
+    ...PageCheckboxI18n.en,
+    ...PageFieldsetI18n.en,
+    ...PageLinkCopyI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -112,6 +132,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.es,
     ...PageTablePaginationI18n.es,
     ...PageTableSortI18n.es,
+    ...PageTableFiltersI18n.es,
     ...PageAOnHooksI18n.es,
     ...PageDisclosureI18n.es,
     ...PageTooltipI18n.es,
@@ -121,6 +142,10 @@ export const mainTranslation = {
     ...PageSelectI18n.es,
     ...PageProgressI18n.es,
     ...PageProgressCircleI18n.es,
+    ...PageRadioI18n.es,
+    ...PageCheckboxI18n.es,
+    ...PageFieldsetI18n.es,
+    ...PageLinkCopyI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -135,6 +160,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.fr,
     ...PageTablePaginationI18n.fr,
     ...PageTableSortI18n.fr,
+    ...PageTableFiltersI18n.fr,
     ...PageAOnHooksI18n.fr,
     ...PageDisclosureI18n.fr,
     ...PageTooltipI18n.fr,
@@ -144,6 +170,10 @@ export const mainTranslation = {
     ...PageSelectI18n.fr,
     ...PageProgressI18n.fr,
     ...PageProgressCircleI18n.fr,
+    ...PageRadioI18n.fr,
+    ...PageCheckboxI18n.fr,
+    ...PageFieldsetI18n.fr,
+    ...PageLinkCopyI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -158,6 +188,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.hr,
     ...PageTablePaginationI18n.hr,
     ...PageTableSortI18n.hr,
+    ...PageTableFiltersI18n.hr,
     ...PageAOnHooksI18n.hr,
     ...PageDisclosureI18n.hr,
     ...PageTooltipI18n.hr,
@@ -167,6 +198,10 @@ export const mainTranslation = {
     ...PageSelectI18n.hr,
     ...PageProgressI18n.hr,
     ...PageProgressCircleI18n.hr,
+    ...PageRadioI18n.hr,
+    ...PageCheckboxI18n.hr,
+    ...PageFieldsetI18n.hr,
+    ...PageLinkCopyI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -181,6 +216,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.it,
     ...PageTablePaginationI18n.it,
     ...PageTableSortI18n.it,
+    ...PageTableFiltersI18n.it,
     ...PageAOnHooksI18n.it,
     ...PageDisclosureI18n.it,
     ...PageTooltipI18n.it,
@@ -190,6 +226,10 @@ export const mainTranslation = {
     ...PageSelectI18n.it,
     ...PageProgressI18n.it,
     ...PageProgressCircleI18n.it,
+    ...PageRadioI18n.it,
+    ...PageCheckboxI18n.it,
+    ...PageFieldsetI18n.it,
+    ...PageLinkCopyI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -204,6 +244,7 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.ru,
     ...PageTablePaginationI18n.ru,
     ...PageTableSortI18n.ru,
+    ...PageTableFiltersI18n.ru,
     ...PageAOnHooksI18n.ru,
     ...PageDisclosureI18n.ru,
     ...PageTooltipI18n.ru,
@@ -213,5 +254,9 @@ export const mainTranslation = {
     ...PageSelectI18n.ru,
     ...PageProgressI18n.ru,
     ...PageProgressCircleI18n.ru,
+    ...PageRadioI18n.ru,
+    ...PageCheckboxI18n.ru,
+    ...PageFieldsetI18n.ru,
+    ...PageLinkCopyI18n.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",
@@ -209,6 +219,11 @@ const ROUTES = [
     name: "PageLink",
     component: () => import(/* webpackChunkName: "PageLink" */ "../views/PageLink/PageLink.vue"),
   },
+  {
+    path: "/link-copy",
+    name: "PageLinkCopy",
+    component: () => import(/* webpackChunkName: "PageLinkCopy" */ "../views/PageLinkCopy/PageLinkCopy.vue"),
+  },
   {
     path: "/on-hooks",
     name: "PageOnHooks",

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,
+    };
+  },
+};