npm - @vuesimple/vs-alert - Versions diffs - 1.4.18 → 3.0.1 - Mend

@vuesimple/vs-alert 1.4.18 → 3.0.1

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

@@ -31,19 +31,13 @@ Code Sandbox: [Link](https://codesandbox.io/s/vs-alert-yhjce)
 npm i @vuesimple/vs-alert
 ```
-```bash
-yarn add @vuesimple/vs-alert
-```
 <br />
 ### 🚀 Usage
 ```html
 <template>
-  <vs-alert variant="success">
-    Success
-  </vs-alert>
+  <vs-alert variant="success"> Success </vs-alert>
 </template>
 <script>
@@ -65,11 +59,14 @@ yarn add @vuesimple/vs-alert
 <script src="https://unpkg.com/@vuesimple/vs-alert@<version>/dist/vs-alert.min.js"></script>
 ```
+```javascript
+// Main/Entry file
+app.use(VsAlert);
+```
 ```html
 <template>
-  <vs-alert variant="success">
-    Success
-  </vs-alert>
+  <vs-alert variant="success"> Success </vs-alert>
 </template>
 ```
@@ -106,9 +103,7 @@ After installation,
   ```html
   <template>
-    <vs-alert variant="success">
-      Success
-    </vs-alert>
+    <vs-alert variant="success"> Success </vs-alert>
   </template>
   ```

package/build/rollup.config.js CHANGED Viewed

@@ -3,6 +3,8 @@ import buble from '@rollup/plugin-buble';
 import image from '@rollup/plugin-image';
 import vue from 'rollup-plugin-vue';
 import minimist from 'minimist';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
 const argv = minimist(process.argv.slice(2));
@@ -14,12 +16,15 @@ const config = {
   },
   plugins: [
     vue({
-      css: true,
+      css: false,
       compileTemplate: true,
       needMap: false,
+      preprocessStyles: true,
     }),
+    postcss(),
     buble(),
     image(),
+    peerDepsExternal(),
   ],
 };

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: 'VsAlert',
+      fileName: format => {
+        if (format === 'es') {
+          return 'index.js';
+        }
+        if (format === 'umd') {
+          return 'index.umd.min.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,226 @@
+(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}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as o, createElementBlock as l, normalizeClass as d, createElementVNode as e, renderSlot as a, createCommentVNode as n, Fragment as v, createTextVNode as _, toDisplayString as u } from "vue";
+const w = (s, r) => {
+  const t = s.__vccOpts || s;
+  for (const [i, c] of r)
+    t[i] = c;
+  return t;
+}, g = {
+  name: "VsAlert",
+  props: {
+    variant: {
+      type: String,
+      required: !0,
+      validator: (s) => ["success", "error", "info", "warning", "secondary"].includes(s.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 }
+      ];
+    }
+  }
+}, f = { class: "vs-alert-icon__wrapper" }, p = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, y = /* @__PURE__ */ e("g", {
+  fill: "none",
+  stroke: "var(--vs-alert-success-icon)"
+}, [
+  /* @__PURE__ */ e("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    d: "M4 9l2.5 2.5 5-5"
+  }),
+  /* @__PURE__ */ e("circle", {
+    cx: "7.5",
+    cy: "8.5",
+    r: "7"
+  })
+], -1), k = [
+  y
+], m = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, x = /* @__PURE__ */ e("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), B = /* @__PURE__ */ e("circle", {
+  cx: "7.5",
+  cy: "12",
+  r: "1",
+  fill: "#ad5918"
+}, null, -1), b = [
+  x,
+  B
+], C = {
+  key: 2,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, V = /* @__PURE__ */ e("g", {
+  fill: "none",
+  stroke: "var(--vs-alert-error-icon)"
+}, [
+  /* @__PURE__ */ e("circle", {
+    cx: "7.5",
+    cy: "8.5",
+    r: "7"
+  }),
+  /* @__PURE__ */ e("path", {
+    "stroke-linecap": "round",
+    d: "M7.5 4.5V9"
+  })
+], -1), M = /* @__PURE__ */ e("circle", {
+  cx: "7.5",
+  cy: "12",
+  r: "1",
+  fill: "var(--vs-alert-error-icon)"
+}, null, -1), L = [
+  V,
+  M
+], A = {
+  key: 3,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, S = /* @__PURE__ */ e("g", { stroke: "var(--vs-alert-info-icon)" }, [
+  /* @__PURE__ */ e("circle", {
+    cx: "7.5",
+    cy: "8.5",
+    r: "7",
+    fill: "none"
+  }),
+  /* @__PURE__ */ e("path", {
+    "stroke-linecap": "round",
+    d: "M7.5 12.5V8"
+  })
+], -1), N = /* @__PURE__ */ e("circle", {
+  cx: "7.5",
+  cy: "5",
+  r: "1",
+  fill: "var(--vs-alert-info-icon)"
+}, null, -1), z = [
+  S,
+  N
+], E = {
+  key: 4,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  role: "presentation",
+  focussable: "false"
+}, j = /* @__PURE__ */ e("g", { stroke: "var(--vs-alert-secondary-icon)" }, [
+  /* @__PURE__ */ e("circle", {
+    cx: "7.5",
+    cy: "8.5",
+    r: "7",
+    fill: "none"
+  }),
+  /* @__PURE__ */ e("path", {
+    "stroke-linecap": "round",
+    d: "M7.5 12.5V8"
+  })
+], -1), q = /* @__PURE__ */ e("circle", {
+  cx: "7.5",
+  cy: "5",
+  r: "1",
+  fill: "var(--vs-alert-secondary-icon)"
+}, null, -1), D = [
+  j,
+  q
+], F = { class: "vs-alert__heading" }, H = /* @__PURE__ */ e("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "12",
+  viewBox: "0 0 12 12",
+  role: "presentation",
+  focusable: "false"
+}, [
+  /* @__PURE__ */ e("path", {
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    d: "M3 9l6-6m0 6L3 3"
+  })
+], -1), O = [
+  H
+];
+function T(s, r, t, i, c, h) {
+  return o(), l("div", {
+    class: d(["vs-alert", h.classList])
+  }, [
+    e("span", f, [
+      a(s.$slots, "icon", {}, () => [
+        t.variant === "success" ? (o(), l("svg", p, k)) : n("", !0),
+        t.variant === "warning" ? (o(), l("svg", m, b)) : n("", !0),
+        t.variant === "error" ? (o(), l("svg", C, L)) : n("", !0),
+        t.variant === "info" ? (o(), l("svg", A, z)) : n("", !0),
+        t.variant === "secondary" ? (o(), l("svg", E, D)) : n("", !0)
+      ])
+    ]),
+    e("div", F, [
+      a(s.$slots, "title", {}, () => [
+        t.title ? (o(), l(v, { key: 0 }, [
+          _(u(t.title), 1)
+        ], 64)) : n("", !0)
+      ])
+    ]),
+    a(s.$slots, "default"),
+    t.showClose ? (o(), l("button", {
+      key: 0,
+      class: d(["vs-alert-button", t.variant]),
+      onClick: r[0] || (r[0] = (I) => s.$emit("close", !0)),
+      "aria-label": "Close"
+    }, O, 2)) : n("", !0)
+  ], 2);
+}
+const G = /* @__PURE__ */ w(g, [["render", T]]), K = {
+  install(s) {
+    s.component("VsAlert", G);
+  }
+};
+export {
+  K as default
+};

package/dist/index.min.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.umd.min.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vuesimple/vs-alert",
-  "version": "1.4.18",
+  "version": "3.0.1",
   "description": "A simple vue alert. Perfect for all your alert scenarios.",
   "main": "dist/vs-alert.umd.js",
   "module": "dist/vs-alert.esm.js",
@@ -9,20 +9,14 @@
     "./sfc": "src/vs-alert.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-alert.umd.js",
-    "build:es": "rollup --config build/rollup.config.js --format es --file dist/vs-alert.esm.js",
-    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vs-alert.min.js"
+    "build": "rm -rfv dist && vite build --config build/vite.config.js"
   },
   "devDependencies": {
-    "@rollup/plugin-buble": "0.21.3",
-    "@rollup/plugin-image": "2.0.5",
-    "minimist": "1.2.5",
-    "rollup": "1.32.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": {
@@ -52,5 +46,5 @@
     "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
   },
   "homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-alert",
-  "gitHead": "d861c686610167888eb6eeaa4f8001424026a1dd"
+  "gitHead": "97848d8e6d712ac6595ca1d9c9bd94a11b6b26ba"
 }

package/src/index.js CHANGED Viewed

@@ -1,28 +1,9 @@
-// Import vue component
 import VsAlert from './vs-alert.vue';
-// Declare install function executed by Vue.use()
-export function install(Vue) {
-  if (install.installed) return;
-  install.installed = true;
-  Vue.component('VsAlert', VsAlert);
-}
-// Create module definition for Vue.use()
 const plugin = {
-  install,
+  install(Vue) {
+    Vue.component('VsAlert', VsAlert);
+  },
 };
-// Auto-install when vue is found (eg. in browser via <script> tag)
-let GlobalVue = null;
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue;
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue;
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin);
-}
-// To allow use as module (npm/webpack/etc.) export component
-export default VsAlert;
+export default plugin;