@dialpad/dialtone-vue 2.9.1 → 2.10.0

package/dist/dialtone-vue.common.js

@@ -14877,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=6db045bb&
-var toastvue_type_template_id_6db045bb_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.hidden)?_c('div',{class:[
+;// 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.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_6db045bb_staticRenderFns = []
+    { '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&
 //
@@ -15026,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.
      */
@@ -15044,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;
       }
     }
   },
@@ -15058,7 +15072,8 @@ const TOAST_ROLES = ['status', 'alert'];
 
   data() {
     return {
-      hidden: true
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
     };
   },
 
@@ -15072,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);
+      }
     }
 
   }
@@ -15111,8 +15151,8 @@ const TOAST_ROLES = ['status', 'alert'];
 ;
 var toast_component = normalizeComponent(
   toast_toastvue_type_script_lang_js_,
-  toastvue_type_template_id_6db045bb_render,
-  toastvue_type_template_id_6db045bb_staticRenderFns,
+  toastvue_type_template_id_7c8c2d2a_render,
+  toastvue_type_template_id_7c8c2d2a_staticRenderFns,
   false,
   null,
   null,

package/dist/dialtone-vue.umd.js

@@ -14895,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=6db045bb&
-var toastvue_type_template_id_6db045bb_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.hidden)?_c('div',{class:[
+;// 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.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_6db045bb_staticRenderFns = []
+    { '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&
 //
@@ -15044,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.
      */
@@ -15062,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;
       }
     }
   },
@@ -15076,7 +15090,8 @@ const TOAST_ROLES = ['status', 'alert'];
 
   data() {
     return {
-      hidden: true
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
     };
   },
 
@@ -15090,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);
+      }
     }
 
   }
@@ -15129,8 +15169,8 @@ const TOAST_ROLES = ['status', 'alert'];
 ;
 var toast_component = normalizeComponent(
   toast_toastvue_type_script_lang_js_,
-  toastvue_type_template_id_6db045bb_render,
-  toastvue_type_template_id_6db045bb_staticRenderFns,
+  toastvue_type_template_id_7c8c2d2a_render,
+  toastvue_type_template_id_7c8c2d2a_staticRenderFns,
   false,
   null,
   null,