aloha-vue 1.0.308 → 1.0.310

package/docs/src/views/PageSelect/PageSelect.js

@@ -37,7 +37,7 @@ export default {
           group: "group 2",
         },
         {
-          label: "AlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAloha 6",
+          label: "AlohaAlohaAlohaAlohaAlohaAlohaAl ohaAlohaAlohaAlohaAlohaAloha AlohaAlohaAlohaAlohaAlohaAlohaAloha 6",
           id: "aloha_6",
           group: "group 2",
         },

package/docs/src/views/PageSelect/PageSelect.pug

@@ -1,18 +1,21 @@
 div
   h1 ASelect
-  a-select(
-    v-model="model"
-    :data="data"
-    key-id="id"
-    key-label="label"
-    label="Test label"
-    type="select"
-    :search="true"
-    key-group="group"
-    sort-order-group="desc"
-    :loading="true"
-  )
-  div model: {{ model }}
+  .a_columns.a_columns_count_12
+    .a_column.a_column_6
+      a-select(
+        v-model="model"
+        :data="data"
+        key-id="id"
+        key-label="label"
+        label="Test label"
+        type="select"
+        :search="true"
+        key-group="group"
+        sort-order-group="desc"
+        :is-menu-width-as-button="false"
+        menu-width-type="by_content"
+      )
+      div model: {{ model }}
   a-select(
     v-model="model"
     :data="data"

package/docs/src/views/PageTinyMce/PageTinyMce.js

@@ -9,6 +9,12 @@ export default {
   data() {
     return {
       model1: "aloha",
+      model2: "hola",
     };
   },
+  created() {
+    setTimeout(() => {
+      this.model2 = "Aloha";
+    }, 1000);
+  },
 };

package/docs/src/views/PageTinyMce/PageTinyMce.pug

@@ -9,3 +9,12 @@ div
     :required="true"
   )
   div model1: {{ model1 }}
+  h2 Input
+  a-tinymce(
+    id="input2"
+    v-model="model2"
+    type="text"
+    label="ATinymce 2"
+    :required="true"
+  )
+  div model2: {{ model2 }}

package/package.json

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

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

@@ -35,6 +35,7 @@
   --a_select_divider_bg: var(--a_color_gray_300);
   --a_select_border_radius: var(--a_border_radius);
   --a_select_menu_max_height: 250px;
+  --a_select_menu_max_width: 400px;
   --a_select_menu_link_color: var(--a_color_text);
   --a_select_menu_link_hover_color: var(--a_color_text);
   --a_select_menu_link_hover_bg: var(--a_color_gray_200);
@@ -43,7 +44,7 @@
   display: block;
   position: relative;
   min-width: 200px;
-  max-width: 400px;
+  max-width: var(--a_select_menu_max_width);
   z-index: 1055;
   background-color: #fff;
   border: 1px solid grey;
@@ -54,6 +55,12 @@
     pointer-events: none !important;
   }
 }
+.a_select_menu_by_content {
+  --a_select_menu_max_width: 100vw;
+  .a_select__menu__link {
+    white-space: nowrap;
+  }
+}
 .a_select_menu_right {
   right: 0;
   left: auto;
@@ -79,8 +86,7 @@
 
 .a_select__menu__link {
   position: relative;
-  min-width: 100%;
-  display: inline-block;
+  display: block;
   text-align: left;
   padding: 2px 4px 2px 25px;
   border: none;

package/src/ui/ASelect/ASelect.js

@@ -26,9 +26,10 @@ import ASelectModelChangeAPI from "./compositionAPI/ASelectModelChangeAPI";
 import ASelectSearchAPI from "./compositionAPI/ASelectSearchAPI";
 import ASelectSelectedTitleAPI from "./compositionAPI/ASelectSelectedTitleAPI";
 import ASelectToggleAPI from "./compositionAPI/ASelectToggleAPI";
+import PopperContainerAPI from "../../ATooltip/compositionAPI/PopperContainerAPI";
 import UiAPI from "../compositionApi/UiAPI";
-import UiDataWithKeyIdAndLabelAPI from "../compositionApi/UiDataWithKeyIdAndLabelAPI";
 import UiDataWatchEmitAPI from "../compositionApi/UiDataWatchEmitAPI";
+import UiDataWithKeyIdAndLabelAPI from "../compositionApi/UiDataWithKeyIdAndLabelAPI";
 import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
 import AKeyId from "../const/AKeyId";
@@ -75,11 +76,7 @@ export default {
       type: Boolean,
       required: false,
     },
-    isMenuWidthAsButton: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
+
     isSelectAll: {
       type: Boolean,
       required: false,
@@ -183,6 +180,17 @@ export default {
       default: "select",
       validator: value => ["select", "multiselect"].indexOf(value) !== -1,
     },
+    popperContainerId: {
+      type: String,
+      required: false,
+      default: "a_select_container",
+    },
+    menuWidthType: {
+      type: String,
+      required: false,
+      default: "as_button",
+      validator: value => ["as_button", "by_content"].indexOf(value) !== -1,
+    },
   },
   emits: [
     "onSearchOutside",
@@ -211,6 +219,11 @@ export default {
       dataLocal,
     } = UiDataWithKeyIdAndLabelAPI(props);
 
+    const {
+      addPopperContainerInBody,
+      popperContainerIdSelector,
+    } = PopperContainerAPI(props);
+
     UiDataWatchEmitAPI(props, context, {
       dataKeyByKeyIdLocal,
     });
@@ -338,7 +351,10 @@ export default {
       return ATTRIBUTES;
     });
 
+    addPopperContainerInBody();
+
     return {
+      popperContainerIdSelector,
       componentStyleHide,
 
       ariaDescribedbyLocal,
@@ -495,7 +511,7 @@ export default {
                   }, this.$slots)
                 : "",
               h(Teleport, {
-                to: "body",
+                to: this.popperContainerIdSelector,
               }, [
                 h("div", {
                   ref: "menuParentRef",
@@ -507,6 +523,7 @@ export default {
                     ref: "menuRef",
                     class: ["a_select_menu", {
                       a_select_menu_right: this.menuRightLocal,
+                      a_select_menu_by_content: this.menuWidthType === "by_content",
                     }],
                     role: "listbox",
                     ariaLabelledby: this.htmlIdLocal,

package/src/ui/ASelect/compositionAPI/ASelectToggleAPI.js

@@ -103,9 +103,9 @@ export default function ASelectToggleAPI(props, {
     emit("open");
   };
 
-  const isMenuWidthAsButton = toRef(props, "isMenuWidthAsButton");
+  const menuWidthType = toRef(props, "menuWidthType");
   const setMenuWidth = () => {
-    if (isMenuWidthAsButton.value) {
+    if (menuWidthType.value === "as_button") {
       const BUTTON_WIDTH = buttonRef.value.clientWidth;
       const BUTTON_WIDTH_STRING = `${ BUTTON_WIDTH }px`;
       menuRef.value.style.minWidth = BUTTON_WIDTH_STRING;
@@ -141,23 +141,25 @@ export default function ASelectToggleAPI(props, {
   const placement = toRef(props, "placement");
   const openPopoverWithPopperjs = () => {
     if (!popper.value) {
-      popper.value = createPopper(
-        buttonRef.value,
-        menuRef.value,
-        {
-          placement: placement.value,
-          removeOnDestroy: true,
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [0, 0],
+      setTimeout(() => {
+        popper.value = createPopper(
+          buttonRef.value,
+          menuRef.value,
+          {
+            placement: placement.value,
+            removeOnDestroy: true,
+            modifiers: [
+              {
+                name: "offset",
+                options: {
+                  offset: [0, 0],
+                },
               },
-            },
-          ],
-        },
-      );
-      onShow();
+            ],
+          },
+        );
+        onShow();
+      });
     }
   };
 

package/src/ui/ATinymce/compositionAPI/ATinymceAPI.js

@@ -52,6 +52,7 @@ export default function ATinymceAPI(props, context, {
   const promotion = toRef(props, "promotion");
   const toolbar = toRef(props, "toolbar");
   const toolbarMode = toRef(props, "toolbarMode");
+  const modelValue = toRef(props, "modelValue");
 
   let vueEditor = null;
 
@@ -92,6 +93,10 @@ export default function ATinymceAPI(props, context, {
     }
   });
 
+  watch(modelValue, newValue => {
+    tinymce.get(htmlIdLocal.value).setContent(newValue);
+  });
+
   onBeforeUnmount(() => {
     tinymce.remove(vueEditor);
   });