aloha-vue 2.75.1 → 2.77.0

package/src/ui/ATemplate/ATemplate.js

@@ -1,162 +1,166 @@
-import {
-  h,
-  withDirectives,
-} from "vue";
-
-import UIExcludeRenderAttributesAPI from "../compositionApi/UIExcludeRenderAttributesAPI";
-import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
-
-import ASafeHtml from "../../directives/ASafeHtml";
-
-export default {
-  name: "ATemplate",
-  inheritAttrs: false,
-  props: {
-    alwaysTranslate: {
-      type: Boolean,
-      required: false,
-    },
-    change: {
-      type: Function,
-      required: false,
-      default: () => {},
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
-    errors: {
-      type: [String, Array],
-      required: false,
-      default: undefined,
-    },
-    excludeRenderAttributes: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    extra: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    helpText: {
-      type: String,
-      required: false,
-    },
-    html: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    htmlId: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    id: {
-      type: [String, Number],
-      required: false,
-      default: undefined,
-    },
-    idPrefix: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    isHide: {
-      type: Boolean,
-      required: false,
-      default: undefined,
-    },
-    isRender: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    label: {
-      type: [String, Number],
-      required: false,
-      default: undefined,
-    },
-    labelClass: {
-      type: [String, Object],
-      required: false,
-      default: undefined,
-    },
-    labelScreenReader: {
-      type: [String, Number],
-      required: false,
-      default: undefined,
-    },
-    modelValue: {
-      required: false,
-    },
-    options: {
-      type: [String, Number, Object, Array, Boolean],
-      required: false,
-      default: undefined,
-    },
-    readonly: {
-      type: Boolean,
-      required: false,
-    },
-    readonlyDefault: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    slotName: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-  },
-  setup(props) {
-    const {
-      attributesToExcludeFromRender,
-    } = UIExcludeRenderAttributesAPI(props);
-
-    const {
-      componentStyleHide,
-    } = UiStyleHideAPI(props);
-
-    return {
-      attributesToExcludeFromRender,
-      componentStyleHide,
-    };
-  },
-  render() {
-    if (!this.isRender) {
-      return null;
-    }
-
-    return h("div", {
-      ...this.$attrs,
-      style: this.componentStyleHide,
-      type: undefined,
-      ...this.attributesToExcludeFromRender,
-    }, [
-      this.$slots[this.slotName] ?
-        h("div", {
-          class: "a_template",
-        }, this.$slots[this.slotName]({
-          options: this.options,
-          props: this.$props,
-        })) :
-        "",
-      this.html ?
-        withDirectives(h("div", {
-          class: "a_template",
-        }), [
-          [ASafeHtml, this.html],
-        ]) :
-        "",
-    ]);
-  },
-};
+import {
+  h,
+  withDirectives,
+} from "vue";
+
+import UIExcludeRenderAttributesAPI from "../compositionApi/UIExcludeRenderAttributesAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
+
+import ASafeHtml from "../../directives/ASafeHtml";
+import UiDependenciesMixinProps from "../mixins/UiDependenciesMixinProps";
+
+export default {
+  name: "ATemplate",
+  inheritAttrs: false,
+  mixins: [
+    UiDependenciesMixinProps,
+  ],
+  props: {
+    alwaysTranslate: {
+      type: Boolean,
+      required: false,
+    },
+    change: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    errors: {
+      type: [String, Array],
+      required: false,
+      default: undefined,
+    },
+    excludeRenderAttributes: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    extra: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    helpText: {
+      type: String,
+      required: false,
+    },
+    html: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    htmlId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    id: {
+      type: [String, Number],
+      required: false,
+      default: undefined,
+    },
+    idPrefix: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    isHide: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
+    isRender: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    label: {
+      type: [String, Number],
+      required: false,
+      default: undefined,
+    },
+    labelClass: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    labelScreenReader: {
+      type: [String, Number],
+      required: false,
+      default: undefined,
+    },
+    modelValue: {
+      required: false,
+    },
+    options: {
+      type: [String, Number, Object, Array, Boolean],
+      required: false,
+      default: undefined,
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+    },
+    readonlyDefault: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    slotName: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const {
+      attributesToExcludeFromRender,
+    } = UIExcludeRenderAttributesAPI(props);
+
+    const {
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
+
+    return {
+      attributesToExcludeFromRender,
+      componentStyleHide,
+    };
+  },
+  render() {
+    if (!this.isRender) {
+      return null;
+    }
+
+    return h("div", {
+      ...this.$attrs,
+      style: this.componentStyleHide,
+      type: undefined,
+      ...this.attributesToExcludeFromRender,
+    }, [
+      this.$slots[this.slotName] ?
+        h("div", {
+          class: "a_template",
+        }, this.$slots[this.slotName]({
+          options: this.options,
+          props: this.$props,
+        })) :
+        "",
+      this.html ?
+        withDirectives(h("div", {
+          class: "a_template",
+        }), [
+          [ASafeHtml, this.html],
+        ]) :
+        "",
+    ]);
+  },
+};

package/src/ui/AValidatedJson/AValidatedJson.js

@@ -25,6 +25,7 @@ import ModelAPI from "./compositionAPI/ModelAPI";
 import SingleModeAPI from "./compositionAPI/SingleModeAPI";
 import TranslateAPI from "./compositionAPI/TranslateAPI";
 
+import UiDependenciesMixinProps from "../mixins/UiDependenciesMixinProps";
 import {
   uniqueId,
 } from "lodash-es";
@@ -36,6 +37,9 @@ const Plus = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fil
 export default {
   name: "AValidatedJson",
   inheritAttrs: false,
+  mixins: [
+    UiDependenciesMixinProps,
+  ],
   props: {
     alwaysTranslate: {
       type: Boolean,
@@ -353,6 +357,7 @@ export default {
         ...this.$attrs,
         alwaysTranslate: this.alwaysTranslate,
         children: this.singleModeChildren,
+        dependencies: this.dependencies,
         disabled: this.disabled,
         errors: this.errors,
         excludeRenderAttributes: this.excludeRenderAttributes,
@@ -368,6 +373,7 @@ export default {
         labelDescription: this.labelDescription,
         labelScreenReader: this.labelScreenReader,
         modelAll: this.modelAll,
+        modelDependencies: this.modelDependencies,
         modelValue: this.modelValue,
         readonly: this.readonly,
         required: this.required,
@@ -394,6 +400,7 @@ export default {
           "a_validated_json a_validated_json_list",
           this.$attrs.class,
         ],
+        dependencies: this.dependencies,
         errors: this.errors ? "_A_VALIDATED_JSON_ERROR_FIELDSET_" : undefined,
         extra: this.extra,
         helpText: this.helpText,
@@ -403,6 +410,7 @@ export default {
         labelClass: this.labelClass,
         labelDescription: this.labelDescription,
         labelScreenReader: this.labelScreenReader,
+        modelDependencies: this.modelDependencies,
         required: this.required,
         slotName: `slotAppend_${ this.id }`,
       }, {
@@ -498,6 +506,7 @@ export default {
           "a_validated_json a_validated_json_json",
           this.$attrs.class,
         ],
+        dependencies: this.dependencies,
         extra: this.extra,
         errors: this.errors ? "_A_VALIDATED_JSON_ERROR_FIELDSET_" : undefined,
         helpText: this.helpText,
@@ -507,6 +516,7 @@ export default {
         labelClass: this.labelClass,
         labelDescription: this.labelDescription,
         labelScreenReader: this.labelScreenReader,
+        modelDependencies: this.modelDependencies,
         required: this.required,
         slotName: "slotAppend",
       }, {

package/src/ui/AValidatedJson/i18n/AValidatedJsonI18n.js

@@ -6,6 +6,7 @@ import fr from "./fr.json";
 import hr from "./hr.json";
 import it from "./it.json";
 import ru from "./ru.json";
+import uk from "./uk.json";
 
 export default {
   ar,
@@ -16,4 +17,5 @@ export default {
   hr,
   it,
   ru,
+  uk,
 };

package/src/ui/AValidatedJson/i18n/uk.json

@@ -0,0 +1,4 @@
+{
+  "_A_FIELDSET_COLLAPSE_OPEN_": "Відкрити",
+  "_A_FIELDSET_COLLAPSE_CLOSE_": "Закрити"
+}

package/src/ui/compositionApi/UiModelDependenciesProvideAPI.js

@@ -0,0 +1,11 @@
+import {
+  provide,
+} from "vue";
+
+import {
+  AModelDependenciesInjection,
+} from "../const/UiInjectionKeys";
+
+export default function UiModelDependenciesProvideAPI(modelDependencies) {
+  provide(AModelDependenciesInjection, modelDependencies);
+}

package/src/ui/compositionApi/UiStyleHideAPI.js

@@ -1,48 +1,65 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-import {
-  forEach,
-  isArray,
-  isPlainObject,
-} from "lodash-es";
-
-export default function UiStyleHideAPI(props) {
-  const dependencies = toRef(props, "dependencies");
-  const isHide = toRef(props, "isHide");
-  const modelDependencies = toRef(props, "modelDependencies");
-
-  const isComponentVisibleWithDependence = ({ id, value }) => {
-    return modelDependencies.value?.[id] === value;
-  };
-
-  const isComponentHideDependencies = computed(() => {
-    if (!dependencies.value) {
-      return false;
-    }
-    if (isPlainObject(dependencies.value)) {
-      return !isComponentVisibleWithDependence(dependencies.value);
-    }
-    if (isArray(dependencies.value)) {
-      let isHide = false;
-      forEach(dependencies.value, dependence => {
-        if (!isComponentVisibleWithDependence(dependence)) {
-          isHide = true;
-          return false;
-        }
-      });
-      return isHide;
-    }
-    return false;
-  });
-
-  const componentStyleHide = computed(() => {
-    return isHide.value || isComponentHideDependencies.value ? "display: none;" : "";
-  });
-
-  return {
-    componentStyleHide,
-  };
-}
+import {
+  computed,
+  inject,
+  toRef,
+  unref,
+} from "vue";
+
+import {
+  AModelDependenciesInjection,
+} from "../const/UiInjectionKeys";
+import {
+  forEach,
+  isArray,
+  isEmpty,
+  isPlainObject,
+} from "lodash-es";
+
+export default function UiStyleHideAPI(props) {
+  const dependencies = toRef(props, "dependencies");
+  const isHide = toRef(props, "isHide");
+  const modelDependencies = toRef(props, "modelDependencies");
+  const modelDependenciesInjected = inject(AModelDependenciesInjection, undefined);
+
+  const modelDependenciesLocal = computed(() => {
+    if (!isEmpty(modelDependencies.value)) {
+      return modelDependencies.value;
+    }
+    if (modelDependenciesInjected !== undefined) {
+      return unref(modelDependenciesInjected);
+    }
+    return modelDependencies.value;
+  });
+
+  const isComponentVisibleWithDependence = ({ id, value }) => {
+    return modelDependenciesLocal.value?.[id] === value;
+  };
+
+  const isComponentHideDependencies = computed(() => {
+    if (!dependencies.value) {
+      return false;
+    }
+    if (isPlainObject(dependencies.value)) {
+      return !isComponentVisibleWithDependence(dependencies.value);
+    }
+    if (isArray(dependencies.value)) {
+      let isHide = false;
+      forEach(dependencies.value, dependence => {
+        if (!isComponentVisibleWithDependence(dependence)) {
+          isHide = true;
+          return false;
+        }
+      });
+      return isHide;
+    }
+    return false;
+  });
+
+  const componentStyleHide = computed(() => {
+    return isHide.value || isComponentHideDependencies.value ? "display: none;" : "";
+  });
+
+  return {
+    componentStyleHide,
+  };
+}

package/src/ui/compositionApi/__tests__/UiStyleHideAPI.test.js

@@ -0,0 +1,113 @@
+/* eslint-disable vue/one-component-per-file */
+import {
+  defineComponent,
+  h,
+  nextTick,
+  provide,
+  ref,
+} from "vue";
+import {
+  mount,
+} from "@vue/test-utils";
+
+import UiStyleHideAPI from "../UiStyleHideAPI";
+
+import {
+  AModelDependenciesInjection,
+} from "../../const/UiInjectionKeys";
+
+const Consumer = defineComponent({
+  name: "UiStyleHideAPIConsumer",
+  props: {
+    dependencies: {
+      type: [Array, Object],
+      default: undefined,
+    },
+    isHide: {
+      type: Boolean,
+      default: false,
+    },
+    modelDependencies: {
+      type: Object,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const {
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
+
+    return () => h("div", {
+      style: componentStyleHide.value,
+    });
+  },
+});
+
+describe("UiStyleHideAPI", () => {
+  it("uses the nearest injected form model reactively", async() => {
+    const modelDependencies = ref({
+      controller: false,
+    });
+    const Provider = defineComponent({
+      name: "UiStyleHideAPIProvider",
+      setup() {
+        provide(AModelDependenciesInjection, modelDependencies);
+        return () => h(Consumer, {
+          dependencies: {
+            id: "controller",
+            value: true,
+          },
+        });
+      },
+    });
+    const wrapper = mount(Provider);
+
+    expect(wrapper.get("div").isVisible()).toBe(false);
+
+    modelDependencies.value = {
+      controller: true,
+    };
+    await nextTick();
+
+    expect(wrapper.get("div").isVisible()).toBe(true);
+  });
+
+  it("falls back to the modelDependencies prop without a provider", () => {
+    const wrapper = mount(Consumer, {
+      props: {
+        dependencies: {
+          id: "controller",
+          value: true,
+        },
+        modelDependencies: {
+          controller: true,
+        },
+      },
+    });
+
+    expect(wrapper.get("div").isVisible()).toBe(true);
+  });
+
+  it("allows an explicit modelDependencies prop to override an injected model", () => {
+    const Provider = defineComponent({
+      name: "UiStyleHideAPIOverrideProvider",
+      setup() {
+        provide(AModelDependenciesInjection, ref({
+          controller: false,
+        }));
+        return () => h(Consumer, {
+          dependencies: {
+            id: "controller",
+            value: true,
+          },
+          modelDependencies: {
+            controller: true,
+          },
+        });
+      },
+    });
+    const wrapper = mount(Provider);
+
+    expect(wrapper.get("div").isVisible()).toBe(true);
+  });
+});

package/src/ui/const/UiInjectionKeys.js

@@ -1 +1,2 @@
-export const AIsDataPreparedInjection = "AIsDataPrepared";
+export const AIsDataPreparedInjection = "AIsDataPrepared";
+export const AModelDependenciesInjection = "AModelDependencies";

package/src/ui/mixins/UiDependenciesMixinProps.js

@@ -0,0 +1,14 @@
+export default {
+  props: {
+    dependencies: {
+      type: [Array, Object],
+      required: false,
+      default: undefined,
+    },
+    modelDependencies: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+  },
+};