aloha-vue 1.2.241 → 1.2.243

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

@@ -81,25 +81,11 @@ export default {
     ];
     const model = ref(undefined);
 
-    // eslint-disable-next-line no-unused-vars
-    const onGroupLabelCallback = ({ group, item }) => {
-      if (group === "_not_grouped") {
-        return "---";
-      }
-
-      if (group === "Alex") {
-        return `-${ group }-`;
-      }
-
-      return group;
-    };
-
     return {
       codeHtml,
       codeJs,
       data,
       model,
-      onGroupLabelCallback,
     };
   },
 };

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

@@ -68,23 +68,10 @@ export default {
       },
     ];
     const model = ref(undefined);
-    
-    const onGroupLabelCallback = ({ group, item }) => {
-      if (group === "_not_grouped") {
-        return "---";
-      }
-
-      if (group === "Alex") {
-        return \`-\${ group }-\`;
-      }
-
-      return group;
-    };
 
     return {
       data,
       model,
-      onGroupLabelCallback,
     };
   },
 };`;

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

@@ -147,13 +147,6 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
-    {
-      name: "input-attributes",
-      description: "_A_UI_PROPS_INPUT_ATTRIBUTES_DESCRIPTION_",
-      type: "Object",
-      default: "() => ({})",
-      required: false,
-    },
     {
       name: "is-button-group",
       description: "_A_CHECKBOX_PROPS_IS_BUTTON_GROUP_DESCRIPTION_",

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

@@ -1,49 +1,53 @@
-import AlohaPage from "../../../global/components/AlohaPage/AlohaPage.vue";
-import AlohaTableProps from "../../../global/components/AlohaTableProps/AlohaTableProps.vue";
-import ATranslation from "../../../../../src/ATranslation/ATranslation";
-import PageFieldsetCollapse from "./PageFieldsetCollapse/PageFieldsetCollapse.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: "PageFieldset",
-  components: {
-    AlohaPage,
-    AlohaTableProps,
-    ATranslation,
-    PageFieldsetCollapse,
-  },
-  setup() {
-    const {
-      pageTitle,
-    } = PageTitleAPI();
-
-    const {
-      dataProps,
-    } = PropsAPI();
-
-    const {
-      dataSlots,
-    } = SlotsAPI();
-
-    const {
-      dataEvents,
-    } = EventsAPI();
-
-    const {
-      dataExposes,
-    } = ExposesAPI();
-
-    return {
-      dataEvents,
-      dataExposes,
-      dataProps,
-      dataSlots,
-      pageTitle,
-    };
-  },
-};
+import AlohaPage from "../../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../../global/components/AlohaTableProps/AlohaTableProps.vue";
+import AlohaTableTranslate from "../../../global/components/AlohaTableTranslate/AlohaTableTranslate.vue";
+import ATranslation from "../../../../../src/ATranslation/ATranslation";
+import PageFieldsetCollapse from "./PageFieldsetCollapse/PageFieldsetCollapse.vue";
+import PageFieldsetBasic from "./PageFieldsetBasic/PageFieldsetBasic.vue";
+import PageFieldsetChange from "./PageFieldsetChange/PageFieldsetChange.vue";
+import PageFieldsetHelpText from "./PageFieldsetHelpText/PageFieldsetHelpText.vue";
+import PageFieldsetError from "./PageFieldsetError/PageFieldsetError.vue";
+
+import PageTitleAPI from "./compositionAPI/PageTitleAPI";
+import PropsAPI from "./compositionAPI/PropsAPI";
+import EventsAPI from "./compositionAPI/EventsAPI";
+import TranslateAPI from "./compositionAPI/TranslateAPI";
+
+export default {
+  name: "PageFieldset",
+  components: {
+    AlohaPage,
+    AlohaTableProps,
+    AlohaTableTranslate,
+    ATranslation,
+    PageFieldsetCollapse,
+    PageFieldsetBasic,
+    PageFieldsetChange,
+    PageFieldsetHelpText,
+    PageFieldsetError,
+  },
+  setup() {
+    const {
+      pageTitle,
+    } = PageTitleAPI();
+
+    const {
+      dataProps,
+    } = PropsAPI();
+
+    const {
+      dataEvents,
+    } = EventsAPI();
+
+    const {
+      dataTranslate,
+    } = TranslateAPI();
+
+    return {
+      dataEvents,
+      dataProps,
+      dataTranslate,
+      pageTitle,
+    };
+  },
+};

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

@@ -1,12 +1,34 @@
-aloha-page(
-  :page-title="pageTitle"
-)
-  template(
-    v-slot:body
-  )
-    a-translation(
-      tag="p"
-      html="_A_FIELDSET_COMPONENT_DESCRIPTION_"
-    )
-
-    page-fieldset-collapse
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
+  )
+    a-translation(
+      tag="p"
+      html="_A_FIELDSET_COMPONENT_DESCRIPTION_"
+    )
+
+    page-fieldset-basic
+
+    page-fieldset-change
+
+    page-fieldset-help-text
+
+    page-fieldset-error
+
+    page-fieldset-collapse
+
+    aloha-table-props(
+      :data="dataProps"
+    )
+
+    aloha-table-props(
+      table-label="Events"
+      :data="dataEvents"
+      :columns="['name', 'type', 'description']"
+    )
+
+    aloha-table-translate(
+      :data="dataTranslate"
+    )

package/docs/src/views/Form/PageFieldset/PageFieldsetBasic/PageFieldsetBasic.js

@@ -0,0 +1,47 @@
+import {
+  ref,
+} from "vue";
+
+import AFieldset from "../../../../../../src/ui/AFieldset/AFieldset";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageFieldsetBasic",
+  components: {
+    AFieldset,
+    AlohaExample,
+  },
+  setup() {
+    const children = [
+      {
+        type: "text",
+        label: "Text",
+        id: "aloha.text",
+      },
+      {
+        type: "oneCheckbox",
+        label: "Checkbox",
+        id: "aloha.checkbox",
+      },
+    ];
+    const model = ref(undefined);
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      children,
+      codeHtml,
+      codeJs,
+      model,
+    };
+  },
+};

package/docs/src/views/Form/PageFieldset/PageFieldsetBasic/PageFieldsetBasic.pug

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_BASIC_USAGE_"
+  :props="['model-value', 'label', 'children']"
+)
+  a-fieldset(
+    v-model="model"
+    :children="children"
+    label="Fieldset"
+  )
+  div model: {{ model }}

package/docs/src/views/Form/PageFieldset/PageFieldsetBasic/PageFieldsetBasic.vue

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

package/docs/src/views/Form/PageFieldset/PageFieldsetBasic/compositionAPI/HtmlAPI.js

@@ -0,0 +1,12 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-fieldset
+  v-model="model"
+  :children="children"
+  label="Fieldset"
+></a-fieldset>
+<div>model: {{ model }}</div>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageFieldset/PageFieldsetBasic/compositionAPI/JsAPI.js

@@ -0,0 +1,38 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AFieldset from "aloha-vue/src/ui/AFieldset/AFieldset";
+    
+export default {
+  name: "PageFieldsetBasic",
+  components: {
+    AFieldset,
+  },
+  setup() {
+    const children = [
+      {
+        type: "text",
+        label: "Text",
+        id: "aloha.text",
+      },
+      {
+        type: "oneCheckbox",
+        label: "Checkbox",
+        id: "aloha.checkbox",
+      },
+    ];
+    const model = ref(undefined);
+    
+    return {
+      children,
+      model,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageFieldset/PageFieldsetChange/PageFieldsetChange.js

@@ -0,0 +1,53 @@
+import {
+  ref,
+} from "vue";
+
+import AFieldset from "../../../../../../src/ui/AFieldset/AFieldset";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageFieldsetChange",
+  components: {
+    AFieldset,
+    AlohaExample,
+  },
+  setup() {
+    const children = [
+      {
+        type: "text",
+        label: "Text",
+        id: "aloha.text1",
+      },
+      {
+        type: "oneCheckbox",
+        label: "Checkbox",
+        id: "aloha.checkbox1",
+      },
+    ];
+    const model = ref(undefined);
+
+    const changeModel = ({ model: _model, id, props }) => {
+      model.value = _model;
+      console.log(id, props);
+    };
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      changeModel,
+      children,
+      codeHtml,
+      codeJs,
+      model,
+    };
+  },
+};

package/docs/src/views/Form/PageFieldset/PageFieldsetChange/PageFieldsetChange.pug

@@ -0,0 +1,14 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_UI_GROUP_CHANGE_HEADER_"
+  description="_A_UI_GROUP_CHANGE_DESCRIPTION_"
+  :props="['change', 'model-value']"
+)
+  a-fieldset(
+    :change="changeModel"
+    :children="children"
+    :model-value="model"
+    label="Fieldset"
+  )
+  div model: {{ model }}

package/docs/src/views/Form/PageFieldset/PageFieldsetChange/PageFieldsetChange.vue

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

package/docs/src/views/Form/PageFieldset/PageFieldsetChange/compositionAPI/HtmlAPI.js

@@ -0,0 +1,13 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-fieldset
+  :change="changeModel"
+  :children="children"
+  :model-value="model"
+  label="Fieldset"
+></a-fieldset>
+<div>model: {{ model }}</div>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageFieldset/PageFieldsetChange/compositionAPI/JsAPI.js

@@ -0,0 +1,44 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AFieldset from "aloha-vue/src/ui/AFieldset/AFieldset";
+    
+export default {
+  name: "PageFieldsetChange",
+  components: {
+    AFieldset,
+  },
+  setup() {
+    const children = [
+      {
+        type: "text",
+        label: "Text",
+        id: "aloha.text",
+      },
+      {
+        type: "oneCheckbox",
+        label: "Checkbox",
+        id: "aloha.checkbox",
+      },
+    ];
+    const model = ref(undefined);
+    
+    const changeModel = ({ model: _model, id, props }) => {
+      model.value = _model;
+      console.log(id, props);
+    };
+    
+    return {
+      children,
+      changeModel,
+      model,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageFieldset/PageFieldsetCollapse/PageFieldsetCollapse.js

@@ -1,27 +1,57 @@
-import AFieldset from "../../../../../../src/ui/AFieldset/AFieldset";
-import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
-
-import HtmlAPI from "./compositionAPI/HtmlAPI";
-import JsAPI from "./compositionAPI/JsAPI";
-
-export default {
-  name: "PageFieldsetCollapse",
-  components: {
-    AFieldset,
-    AlohaExample,
-  },
-  setup() {
-    const {
-      codeHtml,
-    } = HtmlAPI();
-
-    const {
-      codeJs,
-    } = JsAPI();
-
-    return {
-      codeHtml,
-      codeJs,
-    };
-  },
-};
+import {
+  ref,
+} from "vue";
+
+import AFieldset from "../../../../../../src/ui/AFieldset/AFieldset";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageFieldsetCollapse",
+  components: {
+    AFieldset,
+    AlohaExample,
+  },
+  setup() {
+    const children1 = [
+      {
+        type: "text",
+        label: "Text",
+        id: "aloha1.text",
+      },
+    ];
+    const children2 = [
+      {
+        type: "text",
+        label: "Text",
+        id: "aloha2.text",
+      },
+    ];
+    const model1 = ref(undefined);
+    const model2 = ref(undefined);
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const toggleCollapse = ({ isCollapsed, id, props }) => {
+      console.log(isCollapsed, id, props);
+    };
+
+    return {
+      children1,
+      children2,
+      codeHtml,
+      codeJs,
+      model1,
+      model2,
+      toggleCollapse,
+    };
+  },
+};

package/docs/src/views/Form/PageFieldset/PageFieldsetCollapse/PageFieldsetCollapse.pug

@@ -1,31 +1,28 @@
-aloha-example(
-  :code-html="codeHtml"
-  :code-js="codeJs"
-  header="_A_FIELDSET_GROUP_COLLAPSE_HEADER_"
-  description="_A_FIELDSET_GROUP_COLLAPSE_DESCRIPTION_"
-  :props="['collapsible', 'is-collapsed']"
-)
-  .a_columns.a_columns_count_12
-    .a_column.a_column_6.a_columns_count_12_touch
-      a-fieldset(
-        :collapsible="true"
-        slot-name="fieldset"
-        class-columns=""
-        label="Aloha"
-      )
-        template(
-          v-slot:fieldset
-        )
-          div Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
-
-      a-fieldset(
-        class="a_mt_5"
-        :collapsible="true"
-        :is-collapsed="true"
-        slot-name="fieldset"
-        class-columns=""
-      )
-        template(
-          v-slot:fieldset
-        )
-          div Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_UI_GROUP_COLLAPSE_HEADER_"
+  description="_A_UI_GROUP_COLLAPSE_DESCRIPTION_"
+  :props="['collapsible', 'is-collapsed']"
+  :emits="['toggle-collapse']"
+)
+  .a_columns.a_columns_count_12
+    .a_column.a_column_6.a_columns_count_12_touch
+      a-fieldset(
+        v-model="model1"
+        :children="children1"
+        :collapsible="true"
+        label="Aloha"
+        @toggle-collapse="toggleCollapse"
+      )
+      div model1: {{ model1 }}
+      a-fieldset(
+        v-model="model2"
+        :children="children2"
+        :collapsible="true"
+        :is-collapsed="true"
+        class="a_mt_3"
+        label="Aloha"
+        @toggle-collapse="toggleCollapse"
+      )
+      div model2: {{ model2 }}

package/docs/src/views/Form/PageFieldset/PageFieldsetCollapse/compositionAPI/HtmlAPI.js

@@ -1,31 +1,23 @@
-export default function HtmlAPI() {
-  const codeHtml = `<a-fieldset
-  :collapsible="true"
-  slot-name="fieldset"
-  class-columns=""
-  label="Aloha"
->
-  <template
-    v-slot:fieldset
-  >
-    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum</div>
-  </template>
-</a-fieldset>
-<a-fieldset
-  class="a_mt_5"
-  :collapsible="true"
-  :is-collapsed="true"
-  slot-name="fieldset"
-  class-columns=""
->
-  <template
-    v-slot:fieldset
-  >
-    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum</div>
-  </template>
-</a-fieldset>`;
-
-  return {
-    codeHtml,
-  };
-}
+export default function HtmlAPI() {
+  const codeHtml = `<a-fieldset
+  v-model="model1"
+  :children="children1"
+  :collapsible="true"
+  label="Aloha"
+  @toggle-collapse="toggleCollapse"
+></a-fieldset>
+<div>model1: {{ model1 }}</div>
+<a-fieldset
+  v-model="model2"
+  :children="children2"
+  :collapsible="true"
+  class="a_mt_3"
+  label="Aloha"
+  @toggle-collapse="toggleCollapse"
+></a-fieldset>
+<div>model2: {{ model2 }}</div>`;
+
+  return {
+    codeHtml,
+  };
+}