@vuesimple/vs-tag 3.0.8 → 3.1.1

package/README.md

@@ -19,7 +19,7 @@ A light weight vue plugin built groundup.
 
 ### 📺 Live Demo
 
-Code Sandbox: [Link](https://codesandbox.io/s/vs-tag-l7q3d)
+Demo: [Link](https://vuesimple.netlify.app)
 
 <br />
 

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-tag{--vs-tag-bg-color: #e9ebed;--vs-tag-text-color: #49545c;--vs-tag-primary: #1f73b7;--vs-tag-success: #186146;--vs-tag-danger: #cc3340;--vs-tag-warning: #ffb057;--vs-tag-secondary: #3a3a3a;--vs-tag-font-bold: 600;background-color:var(--vs-tag-bg-color);color:var(--vs-tag-text-color);max-width:100%;display:inline-flex;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center;justify-content:center;line-height:19px}.vs-tag__button{display:inline-flex;margin-left:5px;border:none;padding:0;cursor:pointer;color:inherit;background:transparent;opacity:.85;margin-right:-3px}.vs-tag__button:focus-visible{box-shadow:0 0 0 2px #1f73b759;outline:none}.vs-tag__primary{background:var(--vs-tag-primary);color:#fff}.vs-tag__success{background:var(--vs-tag-success);color:#fff}.vs-tag__danger{background:var(--vs-tag-danger);color:#fff}.vs-tag__warning{background:var(--vs-tag-warning);color:#703815}.vs-tag__secondary{background:var(--vs-tag-secondary);color:#fff}.vs-tag__size-small{padding:2px 5px;font-size:10px;border-radius:2px}.vs-tag__size-medium{font-size:12px;min-width:calc(16px + 1ch);padding:4px 8px;border-radius:2px}.vs-tag__size-large{font-size:12px;min-width:calc(24px + 1ch);padding:8px 13px;border-radius:4px}.vs-tag--bold{font-weight:var(--vs-tag-font-bold)}.vs-tag--pill{border-radius:100px;min-width:20px;text-align:center}.vs-tag--round{border-radius:50%;min-width:9px;text-align:center}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as i, createElementBlock as c, normalizeClass as u, normalizeStyle as d, createElementVNode as o, renderSlot as n, withModifiers as g, createCommentVNode as p } from "vue";
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("[data-theme=dark] .vs-tag,.dark .vs-tag{--vs-tag-bg-color: #39434b;--vs-tag-text-color: #d8dcde}.vs-tag{--vs-tag-bg-color: #e9ebed;--vs-tag-text-color: #49545c;--vs-tag-primary: #1f73b7;--vs-tag-success: #186146;--vs-tag-danger: #cc3340;--vs-tag-warning: #ffb057;--vs-tag-secondary: #3a3a3a;--vs-tag-font-bold: 600;background-color:var(--vs-tag-bg-color);color:var(--vs-tag-text-color);max-width:100%;display:inline-flex;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center;justify-content:center;line-height:19px}.vs-tag__button{display:inline-flex;margin-left:5px;border:none;padding:0;cursor:pointer;color:inherit;background:transparent;opacity:.85;margin-right:-3px}.vs-tag__button:focus-visible{box-shadow:0 0 0 2px #1f73b759;outline:none}.vs-tag__primary{background:var(--vs-tag-primary);color:#fff}.vs-tag__success{background:var(--vs-tag-success);color:#fff}.vs-tag__danger{background:var(--vs-tag-danger);color:#fff}.vs-tag__warning{background:var(--vs-tag-warning);color:#703815}.vs-tag__secondary{background:var(--vs-tag-secondary);color:#fff}.vs-tag__size-small{padding:2px 5px;font-size:10px;border-radius:2px}.vs-tag__size-medium{font-size:12px;min-width:calc(16px + 1ch);padding:4px 8px;border-radius:2px}.vs-tag__size-large{font-size:12px;min-width:calc(24px + 1ch);padding:8px 13px;border-radius:4px}.vs-tag--bold{font-weight:var(--vs-tag-font-bold)}.vs-tag--pill{border-radius:100px;min-width:20px;text-align:center}.vs-tag--round{border-radius:50%;min-width:9px;text-align:center}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as i, createElementBlock as c, normalizeClass as u, normalizeStyle as d, createElementVNode as o, renderSlot as n, withModifiers as g, createCommentVNode as p } from "vue";
 const _ = (t, s) => {
   const e = t.__vccOpts || t;
   for (const [l, a] of s)

package/dist/index.min.js

@@ -1 +1 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-tag{--vs-tag-bg-color: #e9ebed;--vs-tag-text-color: #49545c;--vs-tag-primary: #1f73b7;--vs-tag-success: #186146;--vs-tag-danger: #cc3340;--vs-tag-warning: #ffb057;--vs-tag-secondary: #3a3a3a;--vs-tag-font-bold: 600;background-color:var(--vs-tag-bg-color);color:var(--vs-tag-text-color);max-width:100%;display:inline-flex;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center;justify-content:center;line-height:19px}.vs-tag__button{display:inline-flex;margin-left:5px;border:none;padding:0;cursor:pointer;color:inherit;background:transparent;opacity:.85;margin-right:-3px}.vs-tag__button:focus-visible{box-shadow:0 0 0 2px #1f73b759;outline:none}.vs-tag__primary{background:var(--vs-tag-primary);color:#fff}.vs-tag__success{background:var(--vs-tag-success);color:#fff}.vs-tag__danger{background:var(--vs-tag-danger);color:#fff}.vs-tag__warning{background:var(--vs-tag-warning);color:#703815}.vs-tag__secondary{background:var(--vs-tag-secondary);color:#fff}.vs-tag__size-small{padding:2px 5px;font-size:10px;border-radius:2px}.vs-tag__size-medium{font-size:12px;min-width:calc(16px + 1ch);padding:4px 8px;border-radius:2px}.vs-tag__size-large{font-size:12px;min-width:calc(24px + 1ch);padding:8px 13px;border-radius:4px}.vs-tag--bold{font-weight:var(--vs-tag-font-bold)}.vs-tag--pill{border-radius:100px;min-width:20px;text-align:center}.vs-tag--round{border-radius:50%;min-width:9px;text-align:center}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var VsTag=function(s,t){"use strict";const p="",c=(e,o)=>{const l=e.__vccOpts||e;for(const[n,r]of o)l[n]=r;return l},d={name:"VsTag",props:{variant:{type:String},size:{type:String,default:"medium"},isBold:{type:Boolean,default:!0},isPill:{type:Boolean,default:!1},isRound:{type:Boolean,default:!1},bgColor:{type:String},textColor:{type:String},isClose:{type:Boolean,default:!1}},computed:{classList(){return[this.variant?`vs-tag__${this.variant}`:"",`vs-tag__size-${this.size}`,{"vs-tag--bold":this.isBold},{"vs-tag--pill":this.isPill},{"vs-tag--round":this.isRound}]},cssVars(){return{"--vs-tag-bg-color":this.bgColor,"--vs-tag-text-color":this.textColor}},isCssVars(){return this.bgColor||this.textColor?this.cssVars:""}}},g=[t.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",focusable:"false",role:"presentation"},[t.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"})],-1)];function u(e,o,l,n,r,i){return t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["vs-tag",i.classList]),style:t.normalizeStyle(i.isCssVars)},[t.createElementVNode("span",null,[t.renderSlot(e.$slots,"default")]),l.isClose?t.renderSlot(e.$slots,"close",{key:0},()=>[t.createElementVNode("button",{class:"vs-tag__button",onClick:o[0]||(o[0]=t.withModifiers(h=>e.$emit("click",!0),["stop"]))},g)]):t.createCommentVNode("",!0)],6)}const a=c(d,[["render",u]]),_={install(e){e.component("VsTag",a)}};return s.default=a,s.plugin=_,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),s}({},Vue);
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("[data-theme=dark] .vs-tag,.dark .vs-tag{--vs-tag-bg-color: #39434b;--vs-tag-text-color: #d8dcde}.vs-tag{--vs-tag-bg-color: #e9ebed;--vs-tag-text-color: #49545c;--vs-tag-primary: #1f73b7;--vs-tag-success: #186146;--vs-tag-danger: #cc3340;--vs-tag-warning: #ffb057;--vs-tag-secondary: #3a3a3a;--vs-tag-font-bold: 600;background-color:var(--vs-tag-bg-color);color:var(--vs-tag-text-color);max-width:100%;display:inline-flex;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center;justify-content:center;line-height:19px}.vs-tag__button{display:inline-flex;margin-left:5px;border:none;padding:0;cursor:pointer;color:inherit;background:transparent;opacity:.85;margin-right:-3px}.vs-tag__button:focus-visible{box-shadow:0 0 0 2px #1f73b759;outline:none}.vs-tag__primary{background:var(--vs-tag-primary);color:#fff}.vs-tag__success{background:var(--vs-tag-success);color:#fff}.vs-tag__danger{background:var(--vs-tag-danger);color:#fff}.vs-tag__warning{background:var(--vs-tag-warning);color:#703815}.vs-tag__secondary{background:var(--vs-tag-secondary);color:#fff}.vs-tag__size-small{padding:2px 5px;font-size:10px;border-radius:2px}.vs-tag__size-medium{font-size:12px;min-width:calc(16px + 1ch);padding:4px 8px;border-radius:2px}.vs-tag__size-large{font-size:12px;min-width:calc(24px + 1ch);padding:8px 13px;border-radius:4px}.vs-tag--bold{font-weight:var(--vs-tag-font-bold)}.vs-tag--pill{border-radius:100px;min-width:20px;text-align:center}.vs-tag--round{border-radius:50%;min-width:9px;text-align:center}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var VsTag=function(s,t){"use strict";const p="",c=(e,o)=>{const l=e.__vccOpts||e;for(const[n,r]of o)l[n]=r;return l},d={name:"VsTag",props:{variant:{type:String},size:{type:String,default:"medium"},isBold:{type:Boolean,default:!0},isPill:{type:Boolean,default:!1},isRound:{type:Boolean,default:!1},bgColor:{type:String},textColor:{type:String},isClose:{type:Boolean,default:!1}},computed:{classList(){return[this.variant?`vs-tag__${this.variant}`:"",`vs-tag__size-${this.size}`,{"vs-tag--bold":this.isBold},{"vs-tag--pill":this.isPill},{"vs-tag--round":this.isRound}]},cssVars(){return{"--vs-tag-bg-color":this.bgColor,"--vs-tag-text-color":this.textColor}},isCssVars(){return this.bgColor||this.textColor?this.cssVars:""}}},g=[t.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",focusable:"false",role:"presentation"},[t.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"})],-1)];function u(e,o,l,n,r,i){return t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["vs-tag",i.classList]),style:t.normalizeStyle(i.isCssVars)},[t.createElementVNode("span",null,[t.renderSlot(e.$slots,"default")]),l.isClose?t.renderSlot(e.$slots,"close",{key:0},()=>[t.createElementVNode("button",{class:"vs-tag__button",onClick:o[0]||(o[0]=t.withModifiers(h=>e.$emit("click",!0),["stop"]))},g)]):t.createCommentVNode("",!0)],6)}const a=c(d,[["render",u]]),_={install(e){e.component("VsTag",a)}};return s.default=a,s.plugin=_,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),s}({},Vue);

package/dist/index.umd.js

@@ -1 +1 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-tag{--vs-tag-bg-color: #e9ebed;--vs-tag-text-color: #49545c;--vs-tag-primary: #1f73b7;--vs-tag-success: #186146;--vs-tag-danger: #cc3340;--vs-tag-warning: #ffb057;--vs-tag-secondary: #3a3a3a;--vs-tag-font-bold: 600;background-color:var(--vs-tag-bg-color);color:var(--vs-tag-text-color);max-width:100%;display:inline-flex;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center;justify-content:center;line-height:19px}.vs-tag__button{display:inline-flex;margin-left:5px;border:none;padding:0;cursor:pointer;color:inherit;background:transparent;opacity:.85;margin-right:-3px}.vs-tag__button:focus-visible{box-shadow:0 0 0 2px #1f73b759;outline:none}.vs-tag__primary{background:var(--vs-tag-primary);color:#fff}.vs-tag__success{background:var(--vs-tag-success);color:#fff}.vs-tag__danger{background:var(--vs-tag-danger);color:#fff}.vs-tag__warning{background:var(--vs-tag-warning);color:#703815}.vs-tag__secondary{background:var(--vs-tag-secondary);color:#fff}.vs-tag__size-small{padding:2px 5px;font-size:10px;border-radius:2px}.vs-tag__size-medium{font-size:12px;min-width:calc(16px + 1ch);padding:4px 8px;border-radius:2px}.vs-tag__size-large{font-size:12px;min-width:calc(24px + 1ch);padding:8px 13px;border-radius:4px}.vs-tag--bold{font-weight:var(--vs-tag-font-bold)}.vs-tag--pill{border-radius:100px;min-width:20px;text-align:center}.vs-tag--round{border-radius:50%;min-width:9px;text-align:center}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.VsTag={},t.Vue))})(this,function(t,e){"use strict";const f="",d=(s,o)=>{const n=s.__vccOpts||s;for(const[i,r]of o)n[i]=r;return n},c={name:"VsTag",props:{variant:{type:String},size:{type:String,default:"medium"},isBold:{type:Boolean,default:!0},isPill:{type:Boolean,default:!1},isRound:{type:Boolean,default:!1},bgColor:{type:String},textColor:{type:String},isClose:{type:Boolean,default:!1}},computed:{classList(){return[this.variant?`vs-tag__${this.variant}`:"",`vs-tag__size-${this.size}`,{"vs-tag--bold":this.isBold},{"vs-tag--pill":this.isPill},{"vs-tag--round":this.isRound}]},cssVars(){return{"--vs-tag-bg-color":this.bgColor,"--vs-tag-text-color":this.textColor}},isCssVars(){return this.bgColor||this.textColor?this.cssVars:""}}},u=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",focusable:"false",role:"presentation"},[e.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"})],-1)];function p(s,o,n,i,r,a){return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["vs-tag",a.classList]),style:e.normalizeStyle(a.isCssVars)},[e.createElementVNode("span",null,[e.renderSlot(s.$slots,"default")]),n.isClose?e.renderSlot(s.$slots,"close",{key:0},()=>[e.createElementVNode("button",{class:"vs-tag__button",onClick:o[0]||(o[0]=e.withModifiers(h=>s.$emit("click",!0),["stop"]))},u)]):e.createCommentVNode("",!0)],6)}const l=d(c,[["render",p]]),g={install(s){s.component("VsTag",l)}};t.default=l,t.plugin=g,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("[data-theme=dark] .vs-tag,.dark .vs-tag{--vs-tag-bg-color: #39434b;--vs-tag-text-color: #d8dcde}.vs-tag{--vs-tag-bg-color: #e9ebed;--vs-tag-text-color: #49545c;--vs-tag-primary: #1f73b7;--vs-tag-success: #186146;--vs-tag-danger: #cc3340;--vs-tag-warning: #ffb057;--vs-tag-secondary: #3a3a3a;--vs-tag-font-bold: 600;background-color:var(--vs-tag-bg-color);color:var(--vs-tag-text-color);max-width:100%;display:inline-flex;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center;justify-content:center;line-height:19px}.vs-tag__button{display:inline-flex;margin-left:5px;border:none;padding:0;cursor:pointer;color:inherit;background:transparent;opacity:.85;margin-right:-3px}.vs-tag__button:focus-visible{box-shadow:0 0 0 2px #1f73b759;outline:none}.vs-tag__primary{background:var(--vs-tag-primary);color:#fff}.vs-tag__success{background:var(--vs-tag-success);color:#fff}.vs-tag__danger{background:var(--vs-tag-danger);color:#fff}.vs-tag__warning{background:var(--vs-tag-warning);color:#703815}.vs-tag__secondary{background:var(--vs-tag-secondary);color:#fff}.vs-tag__size-small{padding:2px 5px;font-size:10px;border-radius:2px}.vs-tag__size-medium{font-size:12px;min-width:calc(16px + 1ch);padding:4px 8px;border-radius:2px}.vs-tag__size-large{font-size:12px;min-width:calc(24px + 1ch);padding:8px 13px;border-radius:4px}.vs-tag--bold{font-weight:var(--vs-tag-font-bold)}.vs-tag--pill{border-radius:100px;min-width:20px;text-align:center}.vs-tag--round{border-radius:50%;min-width:9px;text-align:center}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.VsTag={},t.Vue))})(this,function(t,e){"use strict";const f="",d=(s,o)=>{const n=s.__vccOpts||s;for(const[i,r]of o)n[i]=r;return n},c={name:"VsTag",props:{variant:{type:String},size:{type:String,default:"medium"},isBold:{type:Boolean,default:!0},isPill:{type:Boolean,default:!1},isRound:{type:Boolean,default:!1},bgColor:{type:String},textColor:{type:String},isClose:{type:Boolean,default:!1}},computed:{classList(){return[this.variant?`vs-tag__${this.variant}`:"",`vs-tag__size-${this.size}`,{"vs-tag--bold":this.isBold},{"vs-tag--pill":this.isPill},{"vs-tag--round":this.isRound}]},cssVars(){return{"--vs-tag-bg-color":this.bgColor,"--vs-tag-text-color":this.textColor}},isCssVars(){return this.bgColor||this.textColor?this.cssVars:""}}},u=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",focusable:"false",role:"presentation"},[e.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"})],-1)];function p(s,o,n,i,r,a){return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["vs-tag",a.classList]),style:e.normalizeStyle(a.isCssVars)},[e.createElementVNode("span",null,[e.renderSlot(s.$slots,"default")]),n.isClose?e.renderSlot(s.$slots,"close",{key:0},()=>[e.createElementVNode("button",{class:"vs-tag__button",onClick:o[0]||(o[0]=e.withModifiers(h=>s.$emit("click",!0),["stop"]))},u)]):e.createCommentVNode("",!0)],6)}const l=d(c,[["render",p]]),g={install(s){s.component("VsTag",l)}};t.default=l,t.plugin=g,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuesimple/vs-tag",
-  "version": "3.0.8",
+  "version": "3.1.1",
   "description": "A simple vue tag. Perfect for all your tag scenarios.",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -44,5 +44,5 @@
     "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
   },
   "homepage": "https://github.com/ashwinkshenoy/vue-simple",
-  "gitHead": "32b74133a5f1e145f07810121cc7ff1cc37a94f6"
+  "gitHead": "dbda7c423a550ef9aa42b3f82f92bb38d76a6948"
 }

package/src/vs-tag.vue

@@ -84,6 +84,15 @@
 <style lang="scss">
   $el: '.vs-tag';
 
+  // Dark mode styles are handled globally
+  [data-theme='dark'],
+  .dark {
+    #{$el} {
+      --vs-tag-bg-color: #39434b;
+      --vs-tag-text-color: #d8dcde;
+    }
+  }
+
   #{$el} {
     --vs-tag-bg-color: #e9ebed;
     --vs-tag-text-color: #49545c;