npm - @vuesimple/vs-toast - Versions diffs - 1.4.18 → 3.0.0 - Mend

@vuesimple/vs-toast 1.4.18 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md CHANGED Viewed

@@ -29,10 +29,6 @@ Code Sandbox: [Link](https://codesandbox.io/s/vs-toast-hti14)
 npm i @vuesimple/vs-toast
 ```
-```bash
-yarn add @vuesimple/vs-toast
-```
 <br />
 ### 🚀 Usage
@@ -63,6 +59,11 @@ yarn add @vuesimple/vs-toast
 <script src="https://unpkg.com/@vuesimple/vs-toast@<version>/dist/vs-toast.min.js"></script>
 ```
+```javascript
+// Main/Entry file
+app.use(VsToast);
+```
 ```html
 <script>
   export default {

package/build/vite.config.js ADDED Viewed

@@ -0,0 +1,33 @@
+import vue from '@vitejs/plugin-vue';
+import VitePluginStyleInject from 'vite-plugin-style-inject';
+export default {
+  plugins: [vue(), VitePluginStyleInject()],
+  build: {
+    // separate css file or not
+    cssCodeSplit: false,
+    lib: {
+      entry: './src/index.js',
+      formats: ['es', 'umd', 'iife'],
+      name: 'VsToast',
+      fileName: format => {
+        if (format === 'es') {
+          return 'index.js';
+        }
+        if (format === 'umd') {
+          return 'index.umd.js';
+        }
+        return 'index.min.js';
+      },
+    },
+    rollupOptions: {
+      // Not to bundle vue core in this plugin
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+};

package/dist/index.js ADDED Viewed

@@ -0,0 +1,389 @@
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{background-color:transparent;border:solid 1px #d8dcde;color:#2f3941;box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}.vs-toast{position:fixed;width:350px;max-width:350px;background-color:#fff;z-index:9999;font-family:inherit;text-align:left}.vs-toast .vs-alert{padding:15px 40px}.vs-toast .vs-alert .vs-alert-button{top:10px}.vs-toast--top-center{left:calc(50% - 175px);top:5px}.vs-toast--top-left{left:5px;top:5px}.vs-toast--top-right{right:5px;top:5px}.vs-toast--bottom-center{left:calc(50% - 175px);bottom:5px}.vs-toast--bottom-left{left:5px;bottom:5px}.vs-toast--bottom-right{right:5px;bottom:5px}.vs-toast--transition-slide-down-enter-active,.vs-toast--transition-slide-down-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:0;transform:translateY(-30px)}.vs-toast--transition-slide-up-enter-active,.vs-toast--transition-slide-up-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:0;transform:translateY(30px)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as i, createElementBlock as r, normalizeClass as h, createElementVNode as s, renderSlot as c, createCommentVNode as a, Fragment as C, createTextVNode as m, toDisplayString as p, resolveComponent as x, createBlock as b, Transition as B, withCtx as _, createVNode as T, createApp as O, h as S } from "vue";
+const g = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [l, u] of e)
+    o[l] = u;
+  return o;
+}, M = {
+  name: "VsAlert",
+  props: {
+    variant: {
+      type: String,
+      required: !0,
+      validator: (t) => ["success", "error", "info", "warning", "secondary"].includes(t.toLowerCase())
+    },
+    showClose: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String
+    },
+    noBg: {
+      type: Boolean,
+      default: !1
+    },
+    small: {
+      type: Boolean,
+      default: !1
+    },
+    toast: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    classList() {
+      return [
+        `vs-alert-${this.variant}`,
+        { "vs-alert--no-bg": this.noBg },
+        { "vs-alert--small": this.small },
+        { "vs-alert--toast": this.toast },
+        { "vs-alert--is-close": this.showClose }
+      ];
+    }
+  }
+}, L = { class: "vs-alert-icon__wrapper" }, V = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, $ = /* @__PURE__ */ s("g", {
+  fill: "none",
+  stroke: "var(--vs-alert-success-icon)"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    d: "M4 9l2.5 2.5 5-5"
+  }),
+  /* @__PURE__ */ s("circle", {
+    cx: "7.5",
+    cy: "8.5",
+    r: "7"
+  })
+], -1), E = [
+  $
+], A = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, H = /* @__PURE__ */ s("path", {
+  fill: "none",
+  stroke: "var(--vs-alert-warning-icon)",
+  "stroke-linecap": "round",
+  d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
+}, null, -1), I = /* @__PURE__ */ s("circle", {
+  cx: "7.5",
+  cy: "12",
+  r: "1",
+  fill: "#ad5918"
+}, null, -1), N = [
+  H,
+  I
+], j = {
+  key: 2,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, z = /* @__PURE__ */ s("g", {
+  fill: "none",
+  stroke: "var(--vs-alert-error-icon)"
+}, [
+  /* @__PURE__ */ s("circle", {
+    cx: "7.5",
+    cy: "8.5",
+    r: "7"
+  }),
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    d: "M7.5 4.5V9"
+  })
+], -1), q = /* @__PURE__ */ s("circle", {
+  cx: "7.5",
+  cy: "12",
+  r: "1",
+  fill: "var(--vs-alert-error-icon)"
+}, null, -1), D = [
+  z,
+  q
+], F = {
+  key: 3,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, P = /* @__PURE__ */ s("g", { stroke: "var(--vs-alert-info-icon)" }, [
+  /* @__PURE__ */ s("circle", {
+    cx: "7.5",
+    cy: "8.5",
+    r: "7",
+    fill: "none"
+  }),
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    d: "M7.5 12.5V8"
+  })
+], -1), G = /* @__PURE__ */ s("circle", {
+  cx: "7.5",
+  cy: "5",
+  r: "1",
+  fill: "var(--vs-alert-info-icon)"
+}, null, -1), J = [
+  P,
+  G
+], K = {
+  key: 4,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, Q = /* @__PURE__ */ s("g", { stroke: "var(--vs-alert-secondary-icon)" }, [
+  /* @__PURE__ */ s("circle", {
+    cx: "7.5",
+    cy: "8.5",
+    r: "7",
+    fill: "none"
+  }),
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    d: "M7.5 12.5V8"
+  })
+], -1), R = /* @__PURE__ */ s("circle", {
+  cx: "7.5",
+  cy: "5",
+  r: "1",
+  fill: "var(--vs-alert-secondary-icon)"
+}, null, -1), U = [
+  Q,
+  R
+], W = { class: "vs-alert__heading" }, X = /* @__PURE__ */ s("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "12",
+  viewBox: "0 0 12 12",
+  role: "presentation",
+  focusable: "false"
+}, [
+  /* @__PURE__ */ s("path", {
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    d: "M3 9l6-6m0 6L3 3"
+  })
+], -1), Y = [
+  X
+];
+function Z(t, e, o, l, u, n) {
+  return i(), r("div", {
+    class: h(["vs-alert", n.classList])
+  }, [
+    s("span", L, [
+      c(t.$slots, "icon", {}, () => [
+        o.variant === "success" ? (i(), r("svg", V, E)) : a("", !0),
+        o.variant === "warning" ? (i(), r("svg", A, N)) : a("", !0),
+        o.variant === "error" ? (i(), r("svg", j, D)) : a("", !0),
+        o.variant === "info" ? (i(), r("svg", F, J)) : a("", !0),
+        o.variant === "secondary" ? (i(), r("svg", K, U)) : a("", !0)
+      ])
+    ]),
+    s("div", W, [
+      c(t.$slots, "title", {}, () => [
+        o.title ? (i(), r(C, { key: 0 }, [
+          m(p(o.title), 1)
+        ], 64)) : a("", !0)
+      ])
+    ]),
+    c(t.$slots, "default"),
+    o.showClose ? (i(), r("button", {
+      key: 0,
+      class: h(["vs-alert-button", o.variant]),
+      onClick: e[0] || (e[0] = (f) => t.$emit("close", !0)),
+      "aria-label": "Close"
+    }, Y, 2)) : a("", !0)
+  ], 2);
+}
+const tt = /* @__PURE__ */ g(M, [["render", Z]]);
+const et = {
+  name: "VsToast",
+  props: {
+    type: {
+      type: String,
+      default: "toast"
+    },
+    title: {
+      type: String
+    },
+    message: {
+      type: String
+    },
+    variant: {
+      type: String
+    },
+    showClose: {
+      type: Boolean,
+      default: !0
+    },
+    position: {
+      type: String,
+      default: "top-center",
+      validator: (t) => ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"].includes(
+        t.toLowerCase()
+      )
+    },
+    animation: {
+      type: String
+    },
+    timeout: {
+      type: Number,
+      default: 5e3
+    },
+    isSticky: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  components: {
+    VsAlert: tt
+  },
+  data() {
+    return {
+      isOpen: !1,
+      timerId: null,
+      isMouseHovered: !1,
+      isTimedOut: !1,
+      _position: "top-center"
+    };
+  },
+  computed: {
+    classList() {
+      return [`vs-toast--${this._position}`];
+    },
+    toggleTransition() {
+      var e, o;
+      const t = ((o = (e = this._position) == null ? void 0 : e.split("-")) == null ? void 0 : o[0]) || "";
+      return this._animation ? `vs-toast--transition-${this._animation}` : t === "top" ? "vs-toast--transition-slide-down" : "vs-toast--transition-slide-up";
+    }
+  },
+  methods: {
+    async open(t = {}) {
+      if (Object.keys(t).length !== 0) {
+        if (this.isOpen) {
+          this.close(), this.$nextTick(() => this.open(t));
+          return;
+        }
+        t = { ...this.$props, ...t }, Object.keys(t).forEach((e) => this[`_${e}`] = t[e] || "");
+      }
+      this.timerId && await this.close(), this.isOpen = !0, this.isTimedOut = !1, this._isSticky || (this.timerId = setTimeout(async () => {
+        this.isMouseHovered || await this.close(), this.isTimedOut = !0;
+      }, this._timeout));
+    },
+    close() {
+      return this.timerId && (clearTimeout(this.timerId), this.timerId = null), this.isOpen = !1, new Promise(
+        (t) => setTimeout(() => {
+          this.$emit("input", this.isOpen), t();
+        }, 10)
+      );
+    },
+    mouseHover(t = !1) {
+      this.isMouseHovered = t, this.isTimedOut && !this.isMouseHovered && this.close();
+    },
+    onEnter() {
+      this.$emit("reveal");
+    },
+    onLeave() {
+      this.$emit("hide");
+    }
+  }
+};
+function st(t, e, o, l, u, n) {
+  const f = x("vs-alert");
+  return i(), b(B, {
+    name: n.toggleTransition,
+    onAfterEnter: n.onEnter,
+    onAfterLeave: n.onLeave
+  }, {
+    default: _(() => [
+      u.isOpen ? (i(), r("div", {
+        key: 0,
+        class: h(["vs-toast", n.classList]),
+        role: "status",
+        onMouseover: e[0] || (e[0] = (k) => n.mouseHover(!0)),
+        onMouseleave: e[1] || (e[1] = (k) => n.mouseHover(!1))
+      }, [
+        c(t.$slots, "custom", { close: n.close }, () => [
+          T(f, {
+            title: t._title,
+            variant: t._variant,
+            "show-close": t._showClose,
+            onClose: n.close,
+            toast: t._type === "toast"
+          }, {
+            default: _(() => [
+              c(t.$slots, "default", {}, () => [
+                m(p(t._message), 1)
+              ])
+            ]),
+            _: 3
+          }, 8, ["title", "variant", "show-close", "onClose", "toast"])
+        ])
+      ], 34)) : a("", !0)
+    ]),
+    _: 3
+  }, 8, ["name", "onAfterEnter", "onAfterLeave"]);
+}
+const ot = /* @__PURE__ */ g(et, [["render", st]]), nt = ["success", "warning", "error", "info", "secondary"], w = {
+  title: "",
+  message: "",
+  variant: "success",
+  position: "top-center",
+  type: "toast",
+  timeout: 5e3,
+  showClose: !0,
+  isSticky: !1
+};
+let d = null;
+function it() {
+  const t = O({
+    render() {
+      return S(ot, { ref: "toast" });
+    }
+  }), e = document.createElement("div");
+  return document.body.appendChild(e), t.mount(e);
+}
+function v() {
+  return d || (d = it()), d;
+}
+function y(t = {}) {
+  v().$refs.toast.open({ ...w, ...t });
+}
+function rt() {
+  v().$refs.toast.close();
+}
+function at() {
+  const t = {};
+  return nt.forEach((e) => t[e] = (o, l = {}) => y({ variant: e, message: o, ...l })), t;
+}
+const ct = {
+  show: y,
+  close: rt,
+  getToastCmp: v,
+  defaultOptions: w,
+  ...at()
+};
+export {
+  ct as default
+};

package/dist/index.min.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vuesimple/vs-toast",
-  "version": "1.4.18",
+  "version": "3.0.0",
   "description": "A simple vue toast.",
   "main": "dist/vs-toast.umd.js",
   "module": "dist/vs-toast.esm.js",
@@ -9,20 +9,14 @@
     "./sfc": "src/vs-toast.vue"
   },
   "scripts": {
-    "build": "rm -rfv dist && npm run build:umd & npm run build:es & npm run build:unpkg",
-    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vs-toast.umd.js",
-    "build:es": "rollup --config build/rollup.config.js --format es --file dist/vs-toast.esm.js",
-    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vs-toast.min.js --module-name vsToast"
+    "build": "rm -rfv dist && vite build --config build/vite.config.js"
   },
   "devDependencies": {
-    "@rollup/plugin-image": "2.0.5",
-    "minimist": "1.2.5",
-    "rollup": "1.32.0",
-    "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-terser": "6.1.0",
-    "rollup-plugin-vue": "5.1.9",
-    "vue": "2.6.10",
-    "vue-template-compiler": "2.6.10"
+    "@vitejs/plugin-vue": "^3.0.1",
+    "sass": "^1.54.4",
+    "vite": "^3.0.5",
+    "vite-plugin-style-inject": "0.0.1",
+    "vue": "^3.2.37"
   },
   "private": false,
   "repository": {
@@ -34,6 +28,7 @@
   },
   "keywords": [
     "vue",
+    "vue3",
     "vuejs",
     "toast",
     "notification",
@@ -51,5 +46,5 @@
     "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
   },
   "homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-toast",
-  "gitHead": "d861c686610167888eb6eeaa4f8001424026a1dd"
+  "gitHead": "c666ac905df7e5b10f9198cd056cdd3fa88e212e"
 }

package/src/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { createApp, ref, h } from 'vue';
 import VsToast from './vs-toast.vue';
 const variant = ['success', 'warning', 'error', 'info', 'secondary'];
@@ -17,9 +17,16 @@ const defaultOptions = {
 let toastCmp = null;
 function createToastCmp() {
-  const cmp = new Vue(VsToast);
-  document.body.appendChild(cmp.$mount().$el);
-  return cmp;
+  const app = createApp({
+    render() {
+      return h(VsToast, { ref: 'toast' });
+    },
+  });
+  const toastElement = document.createElement('div');
+  document.body.appendChild(toastElement);
+  const vm = app.mount(toastElement);
+  return vm;
 }
 function getToastCmp() {
@@ -30,11 +37,11 @@ function getToastCmp() {
 }
 function show(options = {}) {
-  getToastCmp().open({ ...defaultOptions, ...options });
+  getToastCmp().$refs.toast.open({ ...defaultOptions, ...options });
 }
 function close() {
-  getToastCmp().close();
+  getToastCmp().$refs.toast.close();
 }
 function createShorthands() {