@dialpad/dialtone-vue 2.55.0 → 2.55.2

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [2.55.2](https://github.com/dialpad/dialtone-vue/compare/v2.55.1...v2.55.2) (2023-02-03)
+
+
+### Bug Fixes
+
+* **Combobox Multi Select:** wrong chips position while on modal ([#742](https://github.com/dialpad/dialtone-vue/issues/742)) ([6525827](https://github.com/dialpad/dialtone-vue/commit/6525827bd07a0cbebc9b0929a103329ed61f95d1))
+
+## [2.55.1](https://github.com/dialpad/dialtone-vue/compare/v2.55.0...v2.55.1) (2023-02-02)
+
 # [2.55.0](https://github.com/dialpad/dialtone-vue/compare/v2.54.2...v2.55.0) (2023-02-01)
 
 ## [2.54.2](https://github.com/dialpad/dialtone-vue/compare/v2.54.1...v2.54.2) (2023-01-26)

package/dist/dialtone-vue.common.js

@@ -20989,11 +20989,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=1ad6269f&
-var combobox_multi_selectvue_type_template_id_1ad6269f_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=cd2212ea&
+var combobox_multi_selectvue_type_template_id_cd2212ea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative d-d-block"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,class:['d-mt4', 'd-mx2', 'd-zi-base1'],attrs:{"label-class":['d-chip__label'],"close-button-props":{ ariaLabel: 'close' },"size":_vm.CHIP_SIZES[_vm.size]},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_1ad6269f_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_cd2212ea_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -21098,10 +21098,10 @@ const CHIP_SIZES = {
   sm: 'xs',
   md: 'sm'
 };
-const CHIP_BOTTOM_POSITION = {
-  xs: 4,
-  sm: 5,
-  md: 5
+const CHIP_TOP_POSITION = {
+  xs: 1.4,
+  sm: 0.4,
+  md: 0.2
 };
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js&
 //
@@ -21454,7 +21454,7 @@ const CHIP_BOTTOM_POSITION = {
       async handler() {
         await this.$nextTick();
         this.setInputPadding();
-        this.setChipsPosition();
+        this.setChipsTopPosition();
         this.setInputMinWidth();
         this.checkMaxSelected();
       }
@@ -21464,13 +21464,13 @@ const CHIP_BOTTOM_POSITION = {
     async label() {
       await this.$nextTick(); // Adjust the chips position if label changed
 
-      this.setChipsPosition();
+      this.setChipsTopPosition();
     },
 
     async description() {
       await this.$nextTick(); // Adjust the chips position if description changed
 
-      this.setChipsPosition();
+      this.setChipsTopPosition();
     },
 
     size: {
@@ -21480,6 +21480,7 @@ const CHIP_BOTTOM_POSITION = {
         this.revertInputPadding(input);
         this.originalInputSize = input.getBoundingClientRect().height;
         this.setInputPadding();
+        this.setChipsTopPosition();
       },
 
       immediate: true
@@ -21487,10 +21488,9 @@ const CHIP_BOTTOM_POSITION = {
   },
 
   mounted() {
-    this.setChipsPosition(); // Recalculate chip position and input padding when resizing window
-
-    this.resizeWindowObserver = new ResizeObserver(() => {
-      this.setChipsPosition();
+    // Recalculate chip position and input padding when resizing window
+    this.resizeWindowObserver = new ResizeObserver(async () => {
+      this.setChipsTopPosition();
       this.setInputPadding();
     });
     this.resizeWindowObserver.observe(document.body);
@@ -21612,9 +21612,15 @@ const CHIP_BOTTOM_POSITION = {
       this.closeComboboxList();
     },
 
-    setChipsPosition() {
+    setChipsTopPosition() {
+      // To place the chips in the input box
+      // The chip "top" position should be the same line as the input box
+      const input = this.getInput();
+      if (!input) return;
+      const inputSlotWrapper = this.$refs.inputSlotWrapper;
+      const top = input.getBoundingClientRect().top - inputSlotWrapper.getBoundingClientRect().top;
       const chipsWrapper = this.$refs.chipsWrapper;
-      chipsWrapper.style.bottom = `${CHIP_BOTTOM_POSITION[this.size]}px`;
+      chipsWrapper.style.top = top - CHIP_TOP_POSITION[this.size] + 'px';
     },
 
     setInputPadding() {
@@ -21689,8 +21695,8 @@ const CHIP_BOTTOM_POSITION = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_1ad6269f_render,
-  combobox_multi_selectvue_type_template_id_1ad6269f_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_cd2212ea_render,
+  combobox_multi_selectvue_type_template_id_cd2212ea_staticRenderFns,
   false,
   null,
   null,

package/dist/dialtone-vue.umd.js

@@ -20999,11 +20999,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=1ad6269f&
-var combobox_multi_selectvue_type_template_id_1ad6269f_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=cd2212ea&
+var combobox_multi_selectvue_type_template_id_cd2212ea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative d-d-block"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,class:['d-mt4', 'd-mx2', 'd-zi-base1'],attrs:{"label-class":['d-chip__label'],"close-button-props":{ ariaLabel: 'close' },"size":_vm.CHIP_SIZES[_vm.size]},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_1ad6269f_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_cd2212ea_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -21108,10 +21108,10 @@ const CHIP_SIZES = {
   sm: 'xs',
   md: 'sm'
 };
-const CHIP_BOTTOM_POSITION = {
-  xs: 4,
-  sm: 5,
-  md: 5
+const CHIP_TOP_POSITION = {
+  xs: 1.4,
+  sm: 0.4,
+  md: 0.2
 };
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js&
 //
@@ -21464,7 +21464,7 @@ const CHIP_BOTTOM_POSITION = {
       async handler() {
         await this.$nextTick();
         this.setInputPadding();
-        this.setChipsPosition();
+        this.setChipsTopPosition();
         this.setInputMinWidth();
         this.checkMaxSelected();
       }
@@ -21474,13 +21474,13 @@ const CHIP_BOTTOM_POSITION = {
     async label() {
       await this.$nextTick(); // Adjust the chips position if label changed
 
-      this.setChipsPosition();
+      this.setChipsTopPosition();
     },
 
     async description() {
       await this.$nextTick(); // Adjust the chips position if description changed
 
-      this.setChipsPosition();
+      this.setChipsTopPosition();
     },
 
     size: {
@@ -21490,6 +21490,7 @@ const CHIP_BOTTOM_POSITION = {
         this.revertInputPadding(input);
         this.originalInputSize = input.getBoundingClientRect().height;
         this.setInputPadding();
+        this.setChipsTopPosition();
       },
 
       immediate: true
@@ -21497,10 +21498,9 @@ const CHIP_BOTTOM_POSITION = {
   },
 
   mounted() {
-    this.setChipsPosition(); // Recalculate chip position and input padding when resizing window
-
-    this.resizeWindowObserver = new ResizeObserver(() => {
-      this.setChipsPosition();
+    // Recalculate chip position and input padding when resizing window
+    this.resizeWindowObserver = new ResizeObserver(async () => {
+      this.setChipsTopPosition();
       this.setInputPadding();
     });
     this.resizeWindowObserver.observe(document.body);
@@ -21622,9 +21622,15 @@ const CHIP_BOTTOM_POSITION = {
       this.closeComboboxList();
     },
 
-    setChipsPosition() {
+    setChipsTopPosition() {
+      // To place the chips in the input box
+      // The chip "top" position should be the same line as the input box
+      const input = this.getInput();
+      if (!input) return;
+      const inputSlotWrapper = this.$refs.inputSlotWrapper;
+      const top = input.getBoundingClientRect().top - inputSlotWrapper.getBoundingClientRect().top;
       const chipsWrapper = this.$refs.chipsWrapper;
-      chipsWrapper.style.bottom = `${CHIP_BOTTOM_POSITION[this.size]}px`;
+      chipsWrapper.style.top = top - CHIP_TOP_POSITION[this.size] + 'px';
     },
 
     setInputPadding() {
@@ -21699,8 +21705,8 @@ const CHIP_BOTTOM_POSITION = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_1ad6269f_render,
-  combobox_multi_selectvue_type_template_id_1ad6269f_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_cd2212ea_render,
+  combobox_multi_selectvue_type_template_id_cd2212ea_staticRenderFns,
   false,
   null,
   null,