remove hideCloseButton, change icon object property names, and add JS…

…X to icon options
Maronato · Mar 16, 2020 · ea1a448 · ea1a448
1 parent 58731ea
commit ea1a448
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 85 deletions.
diff --git a/README.md b/README.md
diff --git a/public/App.vue b/public/App.vue
@@ -155,7 +155,8 @@
               </v-col>
               <v-col cols="6">
                 <v-switch
-                  v-model="options.hideCloseButton"
+                  :value="!Boolean(options.closeButton)"
+                  @change="setHideCloseButton"
                   label="Hide close button"
                 ></v-switch>
               </v-col>
@@ -484,13 +485,13 @@ export default {
       }
     ],
     options: {
+      closeButton: "button",
       pauseOnHover: true,
       draggable: true,
       draggablePercent: 60,
       pauseOnFocusLoss: true,
       closeOnClick: true,
       timeout: 5000,
-      hideCloseButton: false,
       showCloseButtonOnHover: false,
       hideProgressBar: false,
       icon: {
@@ -557,9 +558,9 @@ export default {
       {
         text: "Material Icons code",
         value: {
-          class: "material-icons",
-          children: "code",
-          tag: "span"
+          iconClass: "material-icons",
+          iconChildren: "code",
+          iconTag: "span"
         }
       }
     ]
@@ -593,9 +594,9 @@ export default {
             return Object.keys(this.toastIcon.component)[0];
           }
           return `{
-    class: "${this.toastIcon.class}",
-    children: "${this.toastIcon.children || ""}",
-    tag: "${this.toastIcon.tag || "i"}"
+    iconClass: "${this.toastIcon.class}",
+    iconChildren: "${this.toastIcon.children || ""}",
+    iconTag: "${this.toastIcon.tag || "i"}"
   }`;
         }
         default:
@@ -610,9 +611,11 @@ export default {
   pauseOnHover: ${this.options.pauseOnHover},
   draggable: ${this.options.draggable},
   draggablePercent: ${this.options.draggablePercent / 100},
-  hideCloseButton: ${this.options.hideCloseButton},
   showCloseButtonOnHover: ${this.options.showCloseButtonOnHover},
-  hideProgressBar: ${this.options.hideProgressBar},
+  hideProgressBar: ${!this.options.hideProgressBar},
+  closeButton: ${
+    this.options.closeButton ? `"${this.options.closeButton}"` : "false"
+  },
   icon: ${this.toastIconExample}`;
       return options;
     },
@@ -746,6 +749,13 @@ Vue.use(Toast, {
           .toLowerCase()
           .indexOf(query.toString().toLowerCase()) > -1
       );
+    },
+    setHideCloseButton(v) {
+      if (v) {
+        this.options.closeButton = false;
+      } else {
+        this.options.closeButton = "button";
+      }
     }
   }
 };

diff --git a/src/components/VtCloseButton.vue b/src/components/VtCloseButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="buttonComponet" :class="classes" v-on="$listeners">
+  <component :is="buttonComponent" :class="classes" v-on="$listeners">
     ✖
   </component>
 </template>
@@ -15,8 +15,11 @@ export default Vue.extend({
   props: PROPS.CLOSE_BUTTON,
 
   computed: {
-    buttonComponet(): RenderableToastContent {
-      return getVueComponentFromObj(this.component);
+    buttonComponent(): RenderableToastContent {
+      if (this.component !== false) {
+        return getVueComponentFromObj(this.component);
+      }
+      return "button";
     },
     classes(): string[] {
       const classes = [`${VT_NAMESPACE}__close-button`];

diff --git a/src/components/VtIcon.vue b/src/components/VtIcon.vue
@@ -12,8 +12,9 @@ import { TYPE, VT_NAMESPACE } from "../ts/constants";
 import {
   isNonEmptyString,
   isToastContent,
-  getVueComponentFromObj,
-  hasProp
+  hasProp,
+  isString,
+  getVueComponentFromObj
 } from "../ts/utils";
 import PROPS from "../ts/propValidators";
 import SuccessIcon from "./icons/VtSuccessIcon.vue";
@@ -26,21 +27,21 @@ export default Vue.extend({
 
   computed: {
     customIconChildren(): string {
-      return hasProp(this.customIcon, "children")
-        ? this.trimValue(this.customIcon.children)
+      return hasProp(this.customIcon, "iconChildren")
+        ? this.trimValue(this.customIcon.iconChildren)
         : "";
     },
     customIconClass(): string {
-      if (typeof this.customIcon === "string") {
+      if (isString(this.customIcon)) {
         return this.trimValue(this.customIcon);
-      } else if (hasProp(this.customIcon, "class")) {
-        return this.trimValue(this.customIcon.class);
+      } else if (hasProp(this.customIcon, "iconClass")) {
+        return this.trimValue(this.customIcon.iconClass);
       }
       return "";
     },
     customIconTag(): string {
-      if (hasProp(this.customIcon, "tag")) {
-        return this.trimValue(this.customIcon.tag, "i");
+      if (hasProp(this.customIcon, "iconTag")) {
+        return this.trimValue(this.customIcon.iconTag, "i");
       }
       return "i";
     },

diff --git a/src/components/VtToast.vue b/src/components/VtToast.vue
@@ -21,7 +21,7 @@
       />
     </div>
     <CloseButton
-      v-if="!hideCloseButton"
+      v-if="closeButton !== false"
       :component="closeButton"
       :class-names="closeButtonClassName"
       :show-on-hover="showCloseButtonOnHover"

diff --git a/src/ts/propValidators.ts b/src/ts/propValidators.ts
@@ -35,7 +35,7 @@ const ICON = {
 
 const CLOSE_BUTTON = {
   component: {
-    type: [String, Object, Function] as PropType<
+    type: [String, Object, Function, Boolean] as PropType<
       NonNullable<CommonOptions["closeButton"]>
     >,
     default: "button"
@@ -83,7 +83,6 @@ const CORE_TOAST = {
   closeOnClick: COMMON.trueBoolean,
   timeout: PROGRESS_BAR.timeout,
   hideProgressBar: PROGRESS_BAR.hideProgressBar,
-  hideCloseButton: Boolean,
   toastClassName: COMMON.classNames,
   bodyClassName: COMMON.classNames,
   icon: ICON.customIcon,

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -49,10 +49,6 @@ export interface CommonOptions {
    * Whether or not the progress bar is hidden.
    */
   hideProgressBar?: boolean;
-  /**
-   * Whether or not the close button is hidden.
-   */
-  hideCloseButton?: boolean;
   /**
    * Only shows the close button when hovering the toast
    */
@@ -65,14 +61,19 @@ export interface CommonOptions {
   icon?:
     | boolean
     | string
-    | { tag?: keyof HTMLElementTagNameMap; children?: string; class?: string }
-    | Component;
+    | {
+        iconTag?: keyof HTMLElementTagNameMap;
+        iconChildren?: string;
+        iconClass?: string;
+      }
+    | Component
+    | JSX.Element;
   /**
    * Custom close button component
    *
    * Alternative close button component to be displayed in toasts
    */
-  closeButton?: keyof HTMLElementTagNameMap | Component | JSX.Element;
+  closeButton?: false | keyof HTMLElementTagNameMap | Component | JSX.Element;
   /**
    * 	Custom classes applied to the close button of the toast.
    */

diff --git a/tsconfig.json b/tsconfig.json
@@ -13,7 +13,8 @@
     "noImplicitAny": true,
     "noImplicitThis": true,
     "strictNullChecks": true,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "jsx": "preserve",
   },
   "include": [
     "src"