@dialpad/dialtone-vue 2.8.1 → 2.10.0

package/dist/dialtone-vue.common.js

@@ -12642,12 +12642,12 @@ var list_section_component = normalizeComponent(
 /* harmony default export */ const list_section = (list_section_component.exports);
 ;// CONCATENATED MODULE: ./components/list_section/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!./components/list_item/list_item.vue?vue&type=template&id=3925f490&
-var list_itemvue_type_template_id_3925f490_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,{tag:"component",class:['dt-list-item d-ls-none focus-visible', {
+;// 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!./components/list_item/list_item.vue?vue&type=template&id=78ac4fcc&
+var list_itemvue_type_template_id_78ac4fcc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
     'dt-list-item--focusable': _vm.isFocusable,
     'dt-list-item--highlighted': _vm.isHighlighted,
-  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onClick.apply(null, arguments)}],"mousemove":_vm.onMouseHover,"mouseleave":_vm.onMouseLeave,"click":_vm.onClick}},[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
-var list_itemvue_type_template_id_3925f490_staticRenderFns = []
+  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
+var list_itemvue_type_template_id_78ac4fcc_staticRenderFns = []
 
 
 ;// 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!./components/list_item/default_list_item.vue?vue&type=template&id=4c89d4ed&
@@ -12759,10 +12759,6 @@ var default_list_item_component = normalizeComponent(
 //
 //
 //
-//
-//
-//
-//
 
 
 
@@ -12830,7 +12826,7 @@ var default_list_item_component = normalizeComponent(
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
     }
   },
-  emits: ['click'],
+  emits: ['click', 'keydown', 'mousemove', 'mouseleave'],
 
   data() {
     return {
@@ -12850,6 +12846,26 @@ var default_list_item_component = normalizeComponent(
       }
     },
 
+    listItemListeners() {
+      return { ...this.$listeners,
+        keydown: event => {
+          if (['enter', 'space'].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+
+          this.$emit('keydown', event);
+        },
+        mousemove: event => {
+          this.onMouseHover(event);
+          this.$emit('mousemove', event);
+        },
+        mouseleave: event => {
+          this.onMouseLeave(event);
+          this.$emit('mouseleave', event);
+        }
+      };
+    },
+
     /**
      * For keyboard navigation, whether or not this item is currently highlighted.
      * An injected highlightId will override the default mouseover highlight.
@@ -12876,8 +12892,8 @@ var default_list_item_component = normalizeComponent(
 
   },
   methods: {
-    onClick() {
-      this.$emit('click');
+    onClick(e) {
+      this.$emit('click', e);
     },
 
     onMouseHover() {
@@ -12907,8 +12923,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(502);
 
 var list_item_component = normalizeComponent(
   list_item_list_itemvue_type_script_lang_js_,
-  list_itemvue_type_template_id_3925f490_render,
-  list_itemvue_type_template_id_3925f490_staticRenderFns,
+  list_itemvue_type_template_id_78ac4fcc_render,
+  list_itemvue_type_template_id_78ac4fcc_staticRenderFns,
   false,
   null,
   null,
@@ -14861,18 +14877,20 @@ var select_menu_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/select_menu/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!./components/toast/toast.vue?vue&type=template&id=a5474c4e&
-var toastvue_type_template_id_a5474c4e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{staticClass:"d-toast-wrapper"},[(!_vm.hidden)?_c('div',{class:[
-      'd-toast',
-      _vm.kindClass,
-      { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":_vm.hidden.toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.$listeners),[_vm._t("action")],2)],1)]):_vm._e()])}
-var toastvue_type_template_id_a5474c4e_staticRenderFns = []
+;// 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!./components/toast/toast.vue?vue&type=template&id=7c8c2d2a&
+var toastvue_type_template_id_7c8c2d2a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isShown)?_c('div',{class:[
+    'd-toast',
+    _vm.kindClass,
+    { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":(!_vm.isShown).toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.noticeActionListeners),[_vm._t("action")],2)],1)]):_vm._e()}
+var toastvue_type_template_id_7c8c2d2a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
 const TOAST_ROLES = ['status', 'alert'];
+const TOAST_MIN_DURATION = 6000;
 /* harmony default export */ const toast_constants = ({
-  TOAST_ROLES
+  TOAST_ROLES,
+  TOAST_MIN_DURATION
 });
 ;// 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!./components/toast/toast.vue?vue&type=script&lang=js&
 //
@@ -14923,8 +14941,6 @@ const TOAST_ROLES = ['status', 'alert'];
 //
 //
 //
-//
-//
 
 
 
@@ -15012,6 +15028,17 @@ const TOAST_ROLES = ['status', 'alert'];
       default: false
     },
 
+    /**
+     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
+     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update
+     * the data in your component.
+     * Supports .sync modifier
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Props for the toast close button.
      */
@@ -15030,13 +15057,14 @@ const TOAST_ROLES = ['status', 'alert'];
 
     /**
      * The duration in ms the toast will display before disappearing.
-     * Defaults to 6000 ms and the prop validation is that provided duration is equal to or greater than 6000.
+     * The toast won't disappear if the duration is not provided.
+     * If it's provided, it should be equal to or greater than 6000.
      */
     duration: {
       type: Number,
-      default: 6000,
+      default: null,
       validator: duration => {
-        return duration >= 6000;
+        return duration >= TOAST_MIN_DURATION;
       }
     }
   },
@@ -15044,7 +15072,8 @@ const TOAST_ROLES = ['status', 'alert'];
 
   data() {
     return {
-      hidden: true
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
     };
   },
 
@@ -15058,29 +15087,54 @@ const TOAST_ROLES = ['status', 'alert'];
         base: 'd-toast--base'
       };
       return kindClasses[this.kind];
+    },
+
+    noticeActionListeners() {
+      return { // eslint-disable-next-line vue/no-deprecated-dollar-listeners-api
+        ...this.$listeners,
+        close: event => {
+          this.isShown = false;
+          this.$emit('update:show', false);
+          this.$emit('close', event);
+        }
+      };
+    },
+
+    shouldSetTimeout() {
+      return !!this.duration && this.duration >= this.minDuration;
     }
 
   },
+  watch: {
+    show: {
+      handler: function (show) {
+        this.isShown = show;
+
+        if (show) {
+          this.setTimeout();
+        } else {
+          clearTimeout(this.displayTimer);
+        }
+      },
+      immediate: true
+    }
+  },
 
-  /* TODO Vue 3 Migration
-   * destroyed() should be updated to unmounted() when migrating to Vue 3.
-   */
   // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
   destroyed() {
-    clearTimeout(this.displayTimer);
+    if (this.shouldSetTimeout) {
+      clearTimeout(this.displayTimer);
+    }
   },
 
   methods: {
-    show() {
-      this.hidden = false;
-      this.displayTimer = setTimeout(() => {
-        this.hidden = true;
-      }, this.duration);
-    },
-
-    close() {
-      this.hidden = true;
-      clearTimeout(this.displayTimer);
+    setTimeout() {
+      if (this.shouldSetTimeout) {
+        this.displayTimer = setTimeout(() => {
+          this.isShown = false;
+          this.$emit('update:show', false);
+        }, this.duration);
+      }
     }
 
   }
@@ -15097,8 +15151,8 @@ const TOAST_ROLES = ['status', 'alert'];
 ;
 var toast_component = normalizeComponent(
   toast_toastvue_type_script_lang_js_,
-  toastvue_type_template_id_a5474c4e_render,
-  toastvue_type_template_id_a5474c4e_staticRenderFns,
+  toastvue_type_template_id_7c8c2d2a_render,
+  toastvue_type_template_id_7c8c2d2a_staticRenderFns,
   false,
   null,
   null,

package/dist/dialtone-vue.umd.js

@@ -12660,12 +12660,12 @@ var list_section_component = normalizeComponent(
 /* harmony default export */ const list_section = (list_section_component.exports);
 ;// CONCATENATED MODULE: ./components/list_section/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!./components/list_item/list_item.vue?vue&type=template&id=3925f490&
-var list_itemvue_type_template_id_3925f490_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,{tag:"component",class:['dt-list-item d-ls-none focus-visible', {
+;// 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!./components/list_item/list_item.vue?vue&type=template&id=78ac4fcc&
+var list_itemvue_type_template_id_78ac4fcc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
     'dt-list-item--focusable': _vm.isFocusable,
     'dt-list-item--highlighted': _vm.isHighlighted,
-  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onClick.apply(null, arguments)}],"mousemove":_vm.onMouseHover,"mouseleave":_vm.onMouseLeave,"click":_vm.onClick}},[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
-var list_itemvue_type_template_id_3925f490_staticRenderFns = []
+  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
+var list_itemvue_type_template_id_78ac4fcc_staticRenderFns = []
 
 
 ;// 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!./components/list_item/default_list_item.vue?vue&type=template&id=4c89d4ed&
@@ -12777,10 +12777,6 @@ var default_list_item_component = normalizeComponent(
 //
 //
 //
-//
-//
-//
-//
 
 
 
@@ -12848,7 +12844,7 @@ var default_list_item_component = normalizeComponent(
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
     }
   },
-  emits: ['click'],
+  emits: ['click', 'keydown', 'mousemove', 'mouseleave'],
 
   data() {
     return {
@@ -12868,6 +12864,26 @@ var default_list_item_component = normalizeComponent(
       }
     },
 
+    listItemListeners() {
+      return { ...this.$listeners,
+        keydown: event => {
+          if (['enter', 'space'].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+
+          this.$emit('keydown', event);
+        },
+        mousemove: event => {
+          this.onMouseHover(event);
+          this.$emit('mousemove', event);
+        },
+        mouseleave: event => {
+          this.onMouseLeave(event);
+          this.$emit('mouseleave', event);
+        }
+      };
+    },
+
     /**
      * For keyboard navigation, whether or not this item is currently highlighted.
      * An injected highlightId will override the default mouseover highlight.
@@ -12894,8 +12910,8 @@ var default_list_item_component = normalizeComponent(
 
   },
   methods: {
-    onClick() {
-      this.$emit('click');
+    onClick(e) {
+      this.$emit('click', e);
     },
 
     onMouseHover() {
@@ -12925,8 +12941,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(285);
 
 var list_item_component = normalizeComponent(
   list_item_list_itemvue_type_script_lang_js_,
-  list_itemvue_type_template_id_3925f490_render,
-  list_itemvue_type_template_id_3925f490_staticRenderFns,
+  list_itemvue_type_template_id_78ac4fcc_render,
+  list_itemvue_type_template_id_78ac4fcc_staticRenderFns,
   false,
   null,
   null,
@@ -14879,18 +14895,20 @@ var select_menu_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/select_menu/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!./components/toast/toast.vue?vue&type=template&id=a5474c4e&
-var toastvue_type_template_id_a5474c4e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{staticClass:"d-toast-wrapper"},[(!_vm.hidden)?_c('div',{class:[
-      'd-toast',
-      _vm.kindClass,
-      { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":_vm.hidden.toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.$listeners),[_vm._t("action")],2)],1)]):_vm._e()])}
-var toastvue_type_template_id_a5474c4e_staticRenderFns = []
+;// 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!./components/toast/toast.vue?vue&type=template&id=7c8c2d2a&
+var toastvue_type_template_id_7c8c2d2a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isShown)?_c('div',{class:[
+    'd-toast',
+    _vm.kindClass,
+    { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":(!_vm.isShown).toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.noticeActionListeners),[_vm._t("action")],2)],1)]):_vm._e()}
+var toastvue_type_template_id_7c8c2d2a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
 const TOAST_ROLES = ['status', 'alert'];
+const TOAST_MIN_DURATION = 6000;
 /* harmony default export */ const toast_constants = ({
-  TOAST_ROLES
+  TOAST_ROLES,
+  TOAST_MIN_DURATION
 });
 ;// 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!./components/toast/toast.vue?vue&type=script&lang=js&
 //
@@ -14941,8 +14959,6 @@ const TOAST_ROLES = ['status', 'alert'];
 //
 //
 //
-//
-//
 
 
 
@@ -15030,6 +15046,17 @@ const TOAST_ROLES = ['status', 'alert'];
       default: false
     },
 
+    /**
+     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
+     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update
+     * the data in your component.
+     * Supports .sync modifier
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Props for the toast close button.
      */
@@ -15048,13 +15075,14 @@ const TOAST_ROLES = ['status', 'alert'];
 
     /**
      * The duration in ms the toast will display before disappearing.
-     * Defaults to 6000 ms and the prop validation is that provided duration is equal to or greater than 6000.
+     * The toast won't disappear if the duration is not provided.
+     * If it's provided, it should be equal to or greater than 6000.
      */
     duration: {
       type: Number,
-      default: 6000,
+      default: null,
       validator: duration => {
-        return duration >= 6000;
+        return duration >= TOAST_MIN_DURATION;
       }
     }
   },
@@ -15062,7 +15090,8 @@ const TOAST_ROLES = ['status', 'alert'];
 
   data() {
     return {
-      hidden: true
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
     };
   },
 
@@ -15076,29 +15105,54 @@ const TOAST_ROLES = ['status', 'alert'];
         base: 'd-toast--base'
       };
       return kindClasses[this.kind];
+    },
+
+    noticeActionListeners() {
+      return { // eslint-disable-next-line vue/no-deprecated-dollar-listeners-api
+        ...this.$listeners,
+        close: event => {
+          this.isShown = false;
+          this.$emit('update:show', false);
+          this.$emit('close', event);
+        }
+      };
+    },
+
+    shouldSetTimeout() {
+      return !!this.duration && this.duration >= this.minDuration;
     }
 
   },
+  watch: {
+    show: {
+      handler: function (show) {
+        this.isShown = show;
+
+        if (show) {
+          this.setTimeout();
+        } else {
+          clearTimeout(this.displayTimer);
+        }
+      },
+      immediate: true
+    }
+  },
 
-  /* TODO Vue 3 Migration
-   * destroyed() should be updated to unmounted() when migrating to Vue 3.
-   */
   // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
   destroyed() {
-    clearTimeout(this.displayTimer);
+    if (this.shouldSetTimeout) {
+      clearTimeout(this.displayTimer);
+    }
   },
 
   methods: {
-    show() {
-      this.hidden = false;
-      this.displayTimer = setTimeout(() => {
-        this.hidden = true;
-      }, this.duration);
-    },
-
-    close() {
-      this.hidden = true;
-      clearTimeout(this.displayTimer);
+    setTimeout() {
+      if (this.shouldSetTimeout) {
+        this.displayTimer = setTimeout(() => {
+          this.isShown = false;
+          this.$emit('update:show', false);
+        }, this.duration);
+      }
     }
 
   }
@@ -15115,8 +15169,8 @@ const TOAST_ROLES = ['status', 'alert'];
 ;
 var toast_component = normalizeComponent(
   toast_toastvue_type_script_lang_js_,
-  toastvue_type_template_id_a5474c4e_render,
-  toastvue_type_template_id_a5474c4e_staticRenderFns,
+  toastvue_type_template_id_7c8c2d2a_render,
+  toastvue_type_template_id_7c8c2d2a_staticRenderFns,
   false,
   null,
   null,