aloha-vue 1.0.46 → 1.0.49

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "aloha-css": "1.0.43",
+    "aloha-css": "1.0.44",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",

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

@@ -93,6 +93,11 @@ export default {
           name: "PageTabs",
           label: "Tabs",
         },
+        {
+          id: "progress",
+          name: "PageProgress",
+          label: "Progress",
+        },
       ],
     };
   },

package/docs/src/router/index.js

@@ -104,6 +104,11 @@ const ROUTES = [
     name: "PageTabs",
     component: () => import(/* webpackChunkName: "PageTabs" */ "../views/PageTabs/PageTabs.vue"),
   },
+  {
+    path: "/progress",
+    name: "PageProgress",
+    component: () => import(/* webpackChunkName: "PageProgress" */ "../views/PageProgress/PageProgress.vue"),
+  },
   {
     // If the routing configuration '*' reports an error, replace it with '/: catchAll(. *)'
     // caught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

package/docs/src/views/PageDropdown/PageDropdown.pug

@@ -2,7 +2,8 @@ div
   h1 ADropdown
 
   a-dropdown(
-    button-class: "a_btn a_btn_link",
+    button-class="a_btn a_btn_link"
+    :is-render-default="true"
   )
     template(
       v-slot:button

package/docs/src/views/PageProgress/PageProgress.js

@@ -0,0 +1,8 @@
+import AProgress from "../../../../src/AProgress/AProgress";
+
+export default {
+  name: "PageProgress",
+  components: {
+    AProgress,
+  },
+};

package/docs/src/views/PageProgress/PageProgress.pug

@@ -0,0 +1,34 @@
+div
+  h1 PageProgress
+  a-progress(
+    :value="50"
+    :is-integer="true"
+  )
+  a-progress.a_mt_4(
+    :value="50"
+    :is-value-visible="false"
+  )
+
+  a-progress.a_mt_4(
+    :value="20.2"
+    :is-integer="false"
+    class-progress-bar="a_bg_success"
+  )
+  h2 Small
+  a-progress.a_mt_4.a_progress_small(
+    :value="20.2"
+    :is-integer="false"
+    class-progress-bar="a_bg_success"
+  )
+  h2 Medium
+  a-progress.a_mt_4.a_progress_medium(
+    :value="20.2"
+    :is-integer="false"
+    class-progress-bar="a_bg_success"
+  )
+  h2 Large
+  a-progress.a_mt_4.a_progress_large(
+    :value="20.2"
+    :is-integer="false"
+    class-progress-bar="a_bg_success"
+  )

package/docs/src/views/PageProgress/PageProgress.vue

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

package/package.json

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

package/src/ADropdown/ADropdown.js

@@ -124,6 +124,11 @@ export default {
       required: false,
       default: undefined,
     },
+    isRenderDefault: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -193,6 +198,10 @@ export default {
       }
       return DROPDOWN_ATTRIBUTES;
     },
+
+    isMenuRendered() {
+      return this.isRenderDefault || this.statusExpanded;
+    },
   },
   beforeUnmount() {
     this.destroyEventCloseClick();
@@ -381,7 +390,7 @@ export default {
         h(Teleport, {
           to: "body",
         }, [
-          this.statusExpanded && h("div", null, [
+          this.isMenuRendered && h("div", null, [
             h(
               this.dropdownTag,
               this.dropdownAttributesLocal,

package/src/AProgress/AProgress.js

@@ -0,0 +1,85 @@
+import {
+  computed,
+  h, toRef,
+} from "vue";
+
+import AFiltersAPI from "../compositionAPI/AFiltersAPI";
+
+export default {
+  name: "AProgress",
+  props: {
+    min: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      required: false,
+      default: 100,
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    isInteger: {
+      type: Boolean,
+      required: false,
+    },
+    isValueVisible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    classProgressBar: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const {
+      filterCurrency,
+    } = AFiltersAPI();
+
+    const isInteger = toRef(props, "isInteger");
+    const value = toRef(props, "value");
+    const valuePercent = computed(() => {
+      if (isInteger.value) {
+        return filterCurrency(value.value, {
+          suffix: "%",
+          digits: 0,
+        });
+      }
+      return filterCurrency(value.value, {
+        suffix: "%",
+        digits: 2,
+      });
+    });
+
+    return {
+      valuePercent,
+    };
+  },
+  render() {
+    return h("div", {
+      class: "a_progress",
+    }, [
+      h("div", {
+        class: ["a_progress__bar", this.classProgressBar],
+        role: "progressbar",
+        "aria-valuenow": this.value,
+        "aria-valuemin": this.min,
+        "aria-valuemax": this.max,
+        style: {
+          width: `${ this.value }%`,
+        },
+      }, [
+        this.isValueVisible && h("span", {
+          class: "a_progress__text",
+        }, this.valuePercent),
+      ]),
+    ]);
+  },
+};

package/src/styles/components/ADropdown.scss

@@ -1,7 +1,3 @@
-:root {
-
-}
-
 .a_dropdown {
   display: inline-block;
   position: relative;
@@ -51,9 +47,9 @@
   border: var(--a_dropdown_border_width) solid var(--a_dropdown_border_color);
   border-radius: var(--a_dropdown_border_radius);
   overflow-x: auto;
-}
-.a_dropdown__menu_show {
-  // display: block;
+  &:not([data-popper-placement]) {
+    display: none;
+  }
 }
 .a_dropdown__item {
   display: block;

package/src/ui/ACheckbox/ACheckbox.js

@@ -9,7 +9,7 @@ import UiMixinProps from "../mixins/UiMixinProps";
 
 import UiAPI from "../compositionApi/UiAPI";
 import UiDataWithKeyIdAndLabelAPI from "../compositionApi/UiDataWithKeyIdAndLabelAPI";
-import UiDependenciesAPI from "../compositionApi/UiDependenciesAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
 export default {
   name: "ACheckbox",
@@ -47,8 +47,8 @@ export default {
   },
   setup(props, context) {
     const {
-      componentStyleHideDependencies,
-    } = UiDependenciesAPI(props);
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
 
     const {
       ariaDescribedbyLocal,
@@ -79,7 +79,7 @@ export default {
     };
 
     return {
-      componentStyleHideDependencies,
+      componentStyleHide,
 
       ariaDescribedbyLocal,
       errorsId,
@@ -95,8 +95,8 @@ export default {
     };
   },
   render() {
-    return !this.isHide && h("div", {
-      style: this.componentStyleHideDependencies,
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
     }, [
       h("div", {
         class: ["a_form_element__parent"],

package/src/ui/AFieldset/AFieldset.js

@@ -9,7 +9,7 @@ import AUiComponents from "../AUiComponents";
 import UiMixinProps from "../mixins/UiMixinProps";
 
 import UiAPI from "../compositionApi/UiAPI";
-import UiDependenciesAPI from "../compositionApi/UiDependenciesAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 import { cloneDeep } from "lodash-es";
 
 export default {
@@ -32,8 +32,8 @@ export default {
     const componentTypesMapping = AUiComponents;
 
     const {
-      componentStyleHideDependencies,
-    } = UiDependenciesAPI(props);
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
 
     const {
       ariaDescribedbyLocal,
@@ -56,7 +56,7 @@ export default {
       componentTypesMapping,
       onUpdateModelLocal,
 
-      componentStyleHideDependencies,
+      componentStyleHide,
 
       ariaDescribedbyLocal,
       changeModel,
@@ -68,8 +68,8 @@ export default {
     };
   },
   render() {
-    return !this.isHide && h("div", {
-      style: this.componentStyleHideDependencies,
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
     }, [
       h("fieldset", {
         id: this.htmlIdLocal,

package/src/ui/AInput/AInput.js

@@ -16,7 +16,7 @@ import UiMixinProps from "../mixins/UiMixinProps";
 
 import UiAPI from "../compositionApi/UiAPI";
 import UiClearButtonAPI from "../compositionApi/UiClearButtonAPI";
-import UiDependenciesAPI from "../compositionApi/UiDependenciesAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
 export default {
   name: "AInput",
@@ -51,8 +51,8 @@ export default {
   },
   setup(props, context) {
     const {
-      componentStyleHideDependencies,
-    } = UiDependenciesAPI(props);
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
 
     const {
       ariaDescribedbyLocal,
@@ -101,7 +101,7 @@ export default {
     };
 
     return {
-      componentStyleHideDependencies,
+      componentStyleHide,
 
       ariaDescribedbyLocal,
       clearModel,
@@ -122,8 +122,8 @@ export default {
     };
   },
   render() {
-    return !this.isHide && h("div", {
-      style: this.componentStyleHideDependencies,
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
     }, [
       h("div", {
         class: ["a_form_element__parent", {

package/src/ui/AOneCheckbox/AOneCheckbox.js

@@ -9,7 +9,7 @@ import AErrorsText from "../AErrorsText/AErrorsText";
 import UiMixinProps from "../mixins/UiMixinProps";
 
 import UiAPI from "../compositionApi/UiAPI";
-import UiDependenciesAPI from "../compositionApi/UiDependenciesAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
 const KEY_CODE_SPACE = 32;
 
@@ -30,8 +30,8 @@ export default {
   },
   setup(props, context) {
     const {
-      componentStyleHideDependencies,
-    } = UiDependenciesAPI(props);
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
 
     const {
       ariaDescribedbyLocal,
@@ -73,7 +73,7 @@ export default {
     };
 
     return {
-      componentStyleHideDependencies,
+      componentStyleHide,
 
       ariaDescribedbyLocal,
       errorsId,
@@ -89,8 +89,8 @@ export default {
     };
   },
   render() {
-    return !this.isHide && h("div", {
-      style: this.componentStyleHideDependencies,
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
     }, [
       h("div", {
         class: ["a_form_element__parent"],

package/src/ui/ARadio/ARadio.js

@@ -9,7 +9,7 @@ import UiMixinProps from "../mixins/UiMixinProps";
 
 import UiAPI from "../compositionApi/UiAPI";
 import UiDataWithKeyIdAndLabelAPI from "../compositionApi/UiDataWithKeyIdAndLabelAPI";
-import UiDependenciesAPI from "../compositionApi/UiDependenciesAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
 export default {
   name: "ARadio",
@@ -52,8 +52,8 @@ export default {
   },
   setup(props, context) {
     const {
-      componentStyleHideDependencies,
-    } = UiDependenciesAPI(props);
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
 
     const {
       ariaDescribedbyLocal,
@@ -84,7 +84,7 @@ export default {
     };
 
     return {
-      componentStyleHideDependencies,
+      componentStyleHide,
 
       ariaDescribedbyLocal,
       errorsId,
@@ -100,8 +100,8 @@ export default {
     };
   },
   render() {
-    return !this.isHide && h("div", {
-      style: this.componentStyleHideDependencies,
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
     }, [
       h("div", {
         class: ["a_form_element__parent"],

package/src/ui/ASelect/ASelect.js

@@ -23,7 +23,7 @@ import ASelectSearchAPI from "./compositionAPI/ASelectSearchAPI";
 import ASelectToggleAPI from "./compositionAPI/ASelectToggleAPI";
 import UiAPI from "../compositionApi/UiAPI";
 import UiDataWithKeyIdAndLabelAPI from "../compositionApi/UiDataWithKeyIdAndLabelAPI";
-import UiDependenciesAPI from "../compositionApi/UiDependenciesAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
 import AKeyId from "../const/AKeyId";
 import {
@@ -168,8 +168,8 @@ export default {
   ],
   setup(props, context) {
     const {
-      componentStyleHideDependencies,
-    } = UiDependenciesAPI(props);
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
 
     const {
       ariaDescribedbyLocal,
@@ -300,7 +300,7 @@ export default {
     });
 
     return {
-      componentStyleHideDependencies,
+      componentStyleHide,
 
       ariaDescribedbyLocal,
       clearModel,
@@ -356,8 +356,8 @@ export default {
     };
   },
   render() {
-    return !this.isHide && h("div", {
-      style: this.componentStyleHideDependencies,
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
     }, [
       h("div", {
         class: ["a_form_element__parent", {

package/src/ui/ASwitch/ASwitch.js

@@ -10,7 +10,7 @@ import ALabel from "../ALabel/ALabel";
 import UiMixinProps from "../mixins/UiMixinProps";
 
 import UiAPI from "../compositionApi/UiAPI";
-import UiDependenciesAPI from "../compositionApi/UiDependenciesAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
 const KEY_CODE_SPACE = 32;
 
@@ -63,8 +63,8 @@ export default {
   },
   setup(props, context) {
     const {
-      componentStyleHideDependencies,
-    } = UiDependenciesAPI(props);
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
 
     const {
       ariaDescribedbyLocal,
@@ -159,7 +159,7 @@ export default {
     };
 
     return {
-      componentStyleHideDependencies,
+      componentStyleHide,
 
       ariaDescribedbyLocal,
       clearModel,
@@ -179,8 +179,8 @@ export default {
     };
   },
   render() {
-    return !this.isHide && h("div", {
-      style: this.componentStyleHideDependencies,
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
     }, [
       h("div", {
         class: ["a_form_element__parent", {

package/src/ui/ATemplate/ATemplate.js

@@ -6,6 +6,8 @@ import {
 
 import UiMixinProps from "../mixins/UiMixinProps";
 
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
+
 export default {
   name: "ATemplate",
   mixins: [
@@ -24,6 +26,10 @@ export default {
     },
   },
   setup(props) {
+    const {
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
+
     const html = toRef(props, "html");
     const attributesWithHtml = computed(() => {
       const ATTRIBUTES = {};
@@ -34,14 +40,20 @@ export default {
     });
 
     return {
+      componentStyleHide,
+
       attributesWithHtml,
     };
   },
   render() {
-    return !this.isHide && h("div", {
-      class: "a_template",
-      ...this.attributesWithHtml,
-    }, this.$slots[this.slotName] &&
-      this.$slots[this.slotName]());
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
+    }, [
+      h("div", {
+        class: "a_template",
+        ...this.attributesWithHtml,
+      }, this.$slots[this.slotName] &&
+        this.$slots[this.slotName]())
+    ]);
   },
 };

package/src/ui/ATextarea/ATextarea.js

@@ -17,7 +17,7 @@ import UiMixinProps from "../mixins/UiMixinProps";
 
 import UiAPI from "../compositionApi/UiAPI";
 import UiClearButtonAPI from "../compositionApi/UiClearButtonAPI";
-import UiDependenciesAPI from "../compositionApi/UiDependenciesAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
 import autosize from "../../utils/autosize";
 
@@ -53,8 +53,8 @@ export default {
   },
   setup(props, context) {
     const {
-      componentStyleHideDependencies,
-    } = UiDependenciesAPI(props);
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
 
     const {
       ariaDescribedbyLocal,
@@ -135,7 +135,7 @@ export default {
     });
 
     return {
-      componentStyleHideDependencies,
+      componentStyleHide,
 
       ariaDescribedbyLocal,
       changeModel,
@@ -157,7 +157,9 @@ export default {
     };
   },
   render() {
-    return !this.isHide && h("div", null, [
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
+    }, [
       h("div", {
         class: ["a_form_element__parent", {
           a_form_element__parent_float: this.isLabelFloat,

package/src/ui/compositionApi/{UiDependenciesAPI.js → UiStyleHideAPI.js}

@@ -9,8 +9,9 @@ import {
   isPlainObject,
 } from "lodash-es";
 
-export default function UiDependenciesAPI(props) {
+export default function UiStyleHideAPI(props) {
   const dependencies = toRef(props, "dependencies");
+  const isHide = toRef(props, "isHide");
   const modelDependencies = toRef(props, "modelDependencies");
 
   const isComponentVisibleWithDependence = ({ id, value }) => {
@@ -37,11 +38,11 @@ export default function UiDependenciesAPI(props) {
     return false;
   });
 
-  const componentStyleHideDependencies = computed(() => {
-    return isComponentHideDependencies.value ? "display: none;" : "";
+  const componentStyleHide = computed(() => {
+    return isHide.value || isComponentHideDependencies.value ? "display: none;" : "";
   });
 
   return {
-    componentStyleHideDependencies,
+    componentStyleHide,
   };
 }

package/src/ui/mixins/UiMixinProps.js

@@ -95,6 +95,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    isRender: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     change: {
       type: Function,
       required: false,