aloha-vue 1.0.70 → 1.0.72

package/docs/src/views/PageForm/PageForm.js

@@ -164,6 +164,71 @@ export default {
               id: "aloha13",
               classColumn: "a_column_8",
             },
+            {
+              type: "fieldset",
+              label: "Aloha fieldset",
+              id: "aloha111",
+              classColumn: "a_column_8",
+              helpText: "ALOHA help!!!",
+              children: [
+                {
+                  type: "text",
+                  label: "Aloha 12",
+                  id: "aloha122",
+                  classColumn: "a_column_4",
+                },
+                {
+                  type: "text",
+                  label: "Aloha 13",
+                  id: "aloha132",
+                  classColumn: "a_column_8",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "fieldset",
+          id: "aloha112",
+          classColumn: "a_column_8",
+          inputClass: "a_p_0",
+          helpText: "fieldset without border",
+          hasBorder: false,
+          children: [
+            {
+              type: "text",
+              label: "Aloha 12",
+              id: "aloha122",
+              classColumn: "a_column_4",
+            },
+            {
+              type: "text",
+              label: "Aloha 13",
+              id: "aloha132",
+              classColumn: "a_column_8",
+            },
+          ],
+        },
+        {
+          type: "group",
+          id: "group1",
+          helpText: "group text",
+          children: [
+            {
+              type: "text",
+              label: "Group text",
+              labelClass: "a_column_4 a_text_right",
+              id: "group_text",
+              classColumn: "a_column_4",
+            },
+            {
+              type: "switch",
+              label: "Group switch",
+              id: "group_switch",
+              classColumn: "a_column_4",
+              labelClass: "a_sr_only",
+              helpText: "ALOHA help!!!",
+            },
           ],
         },
         {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.70",
+  "version": "1.0.72",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/AGet/AGet.js

@@ -59,37 +59,9 @@ export default {
     },
   },
   setup() {
-    const {
-      filterBoolean,
-      filterCurrency,
-      filterDate,
-      filterDefaultForEmpty,
-      filterEmail,
-      filterFileSize,
-      filterIban,
-      filterJson,
-      filterKeyValue,
-      filterLimitTo,
-      filterLink,
-      filterList,
-      filterSearchHighlight,
-    } = AFiltersAPI();
+    const filters = AFiltersAPI();
 
-    return {
-      filterBoolean,
-      filterCurrency,
-      filterDate,
-      filterDefaultForEmpty,
-      filterEmail,
-      filterFileSize,
-      filterIban,
-      filterJson,
-      filterKeyValue,
-      filterLimitTo,
-      filterLink,
-      filterList,
-      filterSearchHighlight,
-    };
+    return filters;
   },
   computed: {
     valueLocal() {

package/src/styles/components/ui/AFieldset.scss

@@ -10,10 +10,14 @@
   border-radius: var(--a_fieldset_border_radius);
   border: var(--a_fieldset_border_width) solid var(--a_fieldset_border_color);
 }
+.a_fieldset_no_border {
+  --a_fieldset_border_color: transparent;
+}
 .a_fieldset_invalid {
   --a_fieldset_border_color: var(--a_fieldset_invalid_color);
 }
 
+
 .a_legend {
   --a_legend_padding_x: .5rem;
   --a_legend_color: inherit;
@@ -24,4 +28,4 @@
 }
 .a_legend_invalid {
   --a_legend_color: var(--a_flegend_invalid_color);
-}
+}

package/src/ui/AFieldset/AFieldset.js

@@ -1,5 +1,5 @@
 import {
-  h,
+  h, resolveComponent,
   toRef,
 } from "vue";
 
@@ -10,7 +10,11 @@ import UiMixinProps from "../mixins/UiMixinProps";
 
 import UiAPI from "../compositionApi/UiAPI";
 import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
-import { cloneDeep } from "lodash-es";
+
+import AUiTypesContainer from "../const/AUiTypesContainer";
+import {
+  cloneDeep,
+} from "lodash-es";
 
 export default {
   name: "AFieldset",
@@ -27,9 +31,17 @@ export default {
       required: false,
       default: () => [],
     },
+    hasBorder: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   setup(props, context) {
-    const componentTypesMapping = AUiComponents;
+    const componentTypesMapping = {
+      fieldset: resolveComponent("AFieldset"),
+      ...AUiComponents
+    };
 
     const {
       componentStyleHide,
@@ -47,9 +59,13 @@ export default {
 
     const modelValue = toRef(props, "modelValue");
     const onUpdateModelLocal = ({ item, model }) => {
-      const MODEL_VALUE = cloneDeep(modelValue.value);
-      MODEL_VALUE[item.id] = cloneDeep(model);
-      context.emit("update:modelValue", MODEL_VALUE);
+      if (AUiTypesContainer[item.type]) {
+        context.emit("update:modelValue", model);
+      } else {
+        const MODEL_VALUE = cloneDeep(modelValue.value);
+        MODEL_VALUE[item.id] = cloneDeep(model);
+        context.emit("update:modelValue", MODEL_VALUE);
+      }
     };
 
     return {
@@ -74,8 +90,9 @@ export default {
       h("fieldset", {
         id: this.htmlIdLocal,
         tabindex: -1,
-        class: ["a_fieldset", {
+        class: ["a_fieldset", this.inputClass, {
           a_fieldset_invalid: this.isErrors,
+          a_fieldset_no_border: !this.hasBorder,
         }],
         "aria-describedby": this.ariaDescribedbyLocal,
       }, [
@@ -89,9 +106,10 @@ export default {
           class: "a_columns a_columns_count_12 a_columns_gab_2",
         }, [
           this.children.map((item, itemIndex) => {
+            const IS_CONTAINER = AUiTypesContainer[item.type];
             return h(this.componentTypesMapping[item.type], {
               key: itemIndex,
-              modelValue: this.modelValue[item.id],
+              modelValue: IS_CONTAINER ? this.modelValue : this.modelValue[item.id],
               modelDependencies: this.modelValue,
               class: ["a_column", item.classColumn || "a_column_12"],
               errors: this.errorsAll[item.id],

package/src/ui/AForm/AForm.js

@@ -1,11 +1,16 @@
-import { computed, h, toRef, } from "vue";
+import {
+  computed,
+  h,
+  toRef,
+} from "vue";
 
-import AFieldset from "../AFieldset/AFieldset";
 import AErrors from "../AErrors/AErrors";
 import ARequired from "../ARequired/ARequired";
 
 import AUiComponents from "../AUiComponents";
+import AUiContainerComponents from "../AUiContainerComponents";
 
+import AUiTypesContainer from "../const/AUiTypesContainer";
 import {
   cloneDeep,
   forEach,
@@ -63,8 +68,8 @@ export default {
   ],
   setup(props, { emit }) {
     const componentTypesMapping = {
-      fieldset: AFieldset,
       ...AUiComponents,
+      ...AUiContainerComponents,
     };
 
     const modelValue = toRef(props, "modelValue");
@@ -73,9 +78,13 @@ export default {
     });
 
     const onUpdateModelLocal = ({ item, model }) => {
-      const MODEL_VALUE = cloneDeep(modelValueLocal.value);
-      MODEL_VALUE[item.id] = cloneDeep(model);
-      emit("update:modelValue", MODEL_VALUE);
+      if (AUiTypesContainer[item.type]) {
+        emit("update:modelValue", model);
+      } else {
+        const MODEL_VALUE = cloneDeep(modelValueLocal.value);
+        MODEL_VALUE[item.id] = cloneDeep(model);
+        emit("update:modelValue", MODEL_VALUE);
+      }
     };
 
     const isRequired = toRef(props, "isRequired");
@@ -127,10 +136,10 @@ export default {
       }, [
         this.$slots.formDataPrepend && this.$slots.formDataPrepend(),
         ...this.data.map((item, itemIndex) => {
-          const IS_FIELDSET = item.type === "fieldset";
+          const IS_CONTAINER = AUiTypesContainer[item.type];
           return h(this.componentTypesMapping[item.type], {
             key: itemIndex,
-            modelValue: IS_FIELDSET ? this.modelValueLocal : this.modelValueLocal[item.id],
+            modelValue: IS_CONTAINER ? this.modelValueLocal : this.modelValueLocal[item.id],
             modelDependencies: this.modelValueLocal,
             class: ["a_column", item.classColumn || "a_column_12"],
             errors: this.errors[item.id],

package/src/ui/AGroup/AGroup.js

@@ -0,0 +1,151 @@
+import {
+  computed,
+  h,
+  toRef,
+} from "vue";
+
+import AErrorsText from "../AErrorsText/AErrorsText";
+import ALabel from "../ALabel/ALabel";
+import AUiComponents from "../AUiComponents";
+
+import UiMixinProps from "../mixins/UiMixinProps";
+
+import UiAPI, { getHtmlId } from "../compositionApi/UiAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
+
+import {
+  cloneDeep,
+} from "lodash-es";
+
+export default {
+  name: "AGroup",
+  mixins: [
+    UiMixinProps,
+  ],
+  props: {
+    modelValue: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    children: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    classColumns: {
+      type: [String, Object],
+      required: false,
+      default: "a_columns_count_12 a_columns_gab_2",
+    },
+  },
+  setup(props, context) {
+    const componentTypesMapping = {
+      ...AUiComponents
+    };
+
+    const {
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
+
+    const {
+      ariaDescribedbyLocal,
+      changeModel,
+      clearModel,
+      errorsId,
+      helpTextId,
+      htmlIdLocal,
+      isErrors,
+    } = UiAPI(props, context);
+
+    const modelValue = toRef(props, "modelValue");
+
+    const onUpdateModelLocal = ({ item, model }) => {
+      const MODEL_VALUE = cloneDeep(modelValue.value);
+      MODEL_VALUE[item.id] = cloneDeep(model);
+      context.emit("update:modelValue", MODEL_VALUE);
+    };
+
+    const children = toRef(props, "children");
+    const idPrefix = toRef(props, "idPrefix");
+
+    const firstChild = computed(() => {
+      return children.value[0] || {};
+    });
+
+    const htmlIdFirstChild = computed(() => {
+      return getHtmlId({
+        id: firstChild.value.id,
+        idPrefix: firstChild.value.idPrefix || idPrefix.value,
+        htmlId: firstChild.value.htmlId,
+      });
+    });
+
+    return {
+      componentTypesMapping,
+      firstChild,
+      htmlIdFirstChild,
+      onUpdateModelLocal,
+
+      componentStyleHide,
+
+      ariaDescribedbyLocal,
+      changeModel,
+      clearModel,
+      errorsId,
+      helpTextId,
+      htmlIdLocal,
+      isErrors,
+    };
+  },
+  render() {
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
+    }, [
+      h("div", {
+        id: this.htmlIdLocal,
+        role: "group",
+        tabindex: -1,
+        class: [this.inputClass, {
+          a_group_invalid: this.isErrors,
+        }],
+        "aria-describedby": this.ariaDescribedbyLocal,
+      }, [
+        h("div", {
+          class: ["a_columns", this.classColumns],
+        }, [
+          this.firstChild.label && h(ALabel, {
+            id: this.htmlIdFirstChild,
+            label: this.firstChild.label,
+            labelClass: ["a_column", this.firstChild.labelClass],
+            required: this.firstChild.required,
+            type: this.firstChild.type,
+            isLabelFloat: false,
+          }),
+          this.children.map((item, itemIndex) => {
+            return h(this.componentTypesMapping[item.type], {
+              key: itemIndex,
+              modelValue: this.modelValue[item.id],
+              modelDependencies: this.modelValue,
+              class: ["a_column", item.classColumn || "a_column_2"],
+              errors: this.errorsAll[item.id],
+              idPrefix: item.idPrefix || this.idPrefix,
+              "onUpdate:modelValue": model => this.onUpdateModelLocal({ item, model }),
+              ...item,
+              label: itemIndex === 0 ? undefined : item.label,
+            }, this.$slots);
+          }),
+        ]),
+      ]),
+      this.helpText && h("div", {
+        id: this.helpTextId,
+        class: "a_form_element__help_text",
+        innerHTML: this.helpText,
+      }),
+      this.isErrors && h(AErrorsText, {
+        id: this.errorsId,
+        errors: this.errors,
+      }),
+    ]);
+  },
+};

package/src/ui/AUiContainerComponents.js

@@ -0,0 +1,7 @@
+import AFieldset from "./AFieldset/AFieldset";
+import AGroup from "./AGroup/AGroup";
+
+export default {
+  fieldset: AFieldset,
+  group: AGroup,
+};

package/src/ui/const/AUiTypesContainer.js

@@ -0,0 +1,4 @@
+export default {
+  fieldset: true,
+  group: true,
+};