@vue-interface/badge 0.9.3 → 1.0.0

package/dist/badge.es.js

@@ -0,0 +1,128 @@
+var Variant = {
+  props: {
+    variant: String,
+    variantPrefix: {
+      type: String,
+      default() {
+        return this.$options.name && this.$options.name.toLowerCase();
+      }
+    }
+  },
+  computed: {
+    variantClassPrefix() {
+      return this.variantPrefix;
+    },
+    variantClass() {
+      if (!this.variant || !this.variantClassPrefix) {
+        return "";
+      }
+      return `${this.variantClassPrefix}-${this.variant}`;
+    }
+  }
+};
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(_vm.component || _vm.type, { tag: "component", staticClass: "badge", class: _vm.classes, attrs: { "href": _vm.href, "to": _vm.to } }, [_vm._t("default")], 2);
+};
+var staticRenderFns = [];
+function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render2) {
+    options.render = render2;
+    options.staticRenderFns = staticRenderFns2;
+    options._compiled = true;
+  }
+  if (functionalTemplate) {
+    options.functional = true;
+  }
+  if (scopeId) {
+    options._scopeId = "data-v-" + scopeId;
+  }
+  var hook;
+  if (moduleIdentifier) {
+    hook = function(context) {
+      context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
+        context = __VUE_SSR_CONTEXT__;
+      }
+      if (injectStyles) {
+        injectStyles.call(this, context);
+      }
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    };
+    options._ssrRegister = hook;
+  } else if (injectStyles) {
+    hook = shadowMode ? function() {
+      injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
+    } : injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+const __vue2_script = {
+  name: "Badge",
+  mixins: [
+    Variant
+  ],
+  props: {
+    component: String,
+    href: String,
+    pill: Boolean,
+    to: [Object, String],
+    variant: {
+      type: String,
+      default: "primary"
+    }
+  },
+  computed: {
+    type() {
+      if (this.to) {
+        return "router-link";
+      }
+      if (this.href) {
+        return "a";
+      }
+      return "span";
+    },
+    variantClass() {
+      return `bg-${this.variant} text-${["muted", "light", "white"].indexOf(this.variant) > -1 ? "dark" : "white"}`;
+    },
+    classes() {
+      return {
+        "badge-pill": this.pill,
+        "badge-secondary": this.secondary,
+        [this.variantClass]: !!this.variant
+      };
+    }
+  }
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var Badge = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+export { Badge };

package/dist/badge.umd.js

@@ -0,0 +1 @@
+(function(a,s){typeof exports=="object"&&typeof module!="undefined"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(a=typeof globalThis!="undefined"?globalThis:a||self,s(a.Badge={}))})(this,function(a){"use strict";var s={props:{variant:String,variantPrefix:{type:String,default(){return this.$options.name&&this.$options.name.toLowerCase()}}},computed:{variantClassPrefix(){return this.variantPrefix},variantClass(){return!this.variant||!this.variantClassPrefix?"":`${this.variantClassPrefix}-${this.variant}`}}},_=function(){var e=this,r=e.$createElement,f=e._self._c||r;return f(e.component||e.type,{tag:"component",staticClass:"badge",class:e.classes,attrs:{href:e.href,to:e.to}},[e._t("default")],2)},v=[];function c(e,r,f,y,o,u,d,S){var t=typeof e=="function"?e.options:e;r&&(t.render=r,t.staticRenderFns=f,t._compiled=!0),y&&(t.functional=!0),u&&(t._scopeId="data-v-"+u);var i;if(d?(i=function(n){n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!n&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(n=__VUE_SSR_CONTEXT__),o&&o.call(this,n),n&&n._registeredComponents&&n._registeredComponents.add(d)},t._ssrRegister=i):o&&(i=S?function(){o.call(this,(t.functional?this.parent:this).$root.$options.shadowRoot)}:o),i)if(t.functional){t._injectStyles=i;var b=t.render;t.render=function(T,p){return i.call(p),b(T,p)}}else{var h=t.beforeCreate;t.beforeCreate=h?[].concat(h,i):[i]}return{exports:e,options:t}}const m={name:"Badge",mixins:[s],props:{component:String,href:String,pill:Boolean,to:[Object,String],variant:{type:String,default:"primary"}},computed:{type(){return this.to?"router-link":this.href?"a":"span"},variantClass(){return`bg-${this.variant} text-${["muted","light","white"].indexOf(this.variant)>-1?"dark":"white"}`},classes(){return{"badge-pill":this.pill,"badge-secondary":this.secondary,[this.variantClass]:!!this.variant}}}},l={};var g=c(m,_,v,!1,C,null,null,null);function C(e){for(let r in l)this[r]=l[r]}var $=function(){return g.exports}();a.Badge=$,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/index.js

@@ -1,2 +1,5 @@
-import Badge from './src/Badge';
-export default Badge;
+import Badge from './src/Badge.vue';
+
+export {
+    Badge
+};

package/package.json

@@ -1,22 +1,25 @@
 {
   "name": "@vue-interface/badge",
-  "version": "0.9.3",
-  "description": "Vue badge component",
-  "main": "index.js",
+  "version": "1.0.0",
+  "description": "A Vue badge component.",
+  "files": [
+    "index.js",
+    "dist",
+    "src",
+    "tailwindcss"
+  ],
+  "main": "./dist/badge.umd.js",
+  "module": "./index.js",
+  "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
-    "watch": "npm run serve",
-    "serve": "vue-cli-service build --target lib --name=Badge ./main.vue --watch",
-    "build": "vue-cli-service build --target lib --name=Badge ./main.vue",
-    "lint": "vue-cli-service lint",
-    "fix": "vue-cli-service lint --fix",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
     "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
     "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
     "release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
-    "release": "git add . -A; git commit; git push --tags origin; npm publish;",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "docs:dev": "./node_modules/.bin/vuepress dev docs",
-    "docs:build": "./node_modules/.bin/vuepress build docs"
+    "release": "git add . -A; git commit; git push --tags origin; npm publish;"
   },
   "repository": {
     "type": "git",
@@ -36,23 +39,22 @@
   },
   "homepage": "https://github.com/vue-interface/badge/docs#readme",
   "dependencies": {
-    "@vue-interface/variant": "^1.0.12",
-    "core-js": "^3.6.4",
-    "tailwindcss": "^1.6.0",
-    "vue": "^2.6.11"
+    "@vue-interface/variant": "^1.2.1",
+    "vue": "^2.6.14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.0",
-    "@vue/cli-plugin-eslint": "^4.0",
-    "@vue/cli-service": "^4.0",
-    "@vuepress/plugin-register-components": "^1.5.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "autoprefixer": "^10.4.2",
     "babel-eslint": "^10.1.0",
+    "babel-preset-vue": "^2.0.2",
+    "change-case": "^4.1.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "markdown-it-meta": "0.0.1",
-    "postcss-cli": "^7.1.1",
-    "vue-template-compiler": "^2.6.11",
-    "vuepress": "^1.5.0",
-    "vuepress-plugin-template-constants": "^0.2.1"
+    "pascalcase": "^2.0.0",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.0",
+    "vite": "^2.7.2",
+    "vite-plugin-vue2": "^1.9.3",
+    "vue-router": "^3.5.3"
   }
 }

package/src/Badge.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Variant from '@vue-interface/variant';
+import { Variant } from '@vue-interface/variant';
 
 export default {
 
@@ -42,13 +42,6 @@ export default {
          * @property {Boolean}
          */
         pill: Boolean,
-
-        /**
-         * The badge appear as secondary in size to the parent element.
-         *
-         * @property {Boolean}
-         */
-        secondary: Boolean,
         
         /**
          * The to route. If used, badge will be a router-link component.
@@ -56,6 +49,16 @@ export default {
          * @property {Object|String}
          */
         to: [Object, String],
+        
+        /**
+         * The variant name.
+         *
+         * @param {String}
+         */
+        variant: {
+            type: String,
+            default: 'primary'
+        }
     },
 
     computed: {
@@ -85,11 +88,4 @@ export default {
         }
     }
 };
-</script>
-
-<style>
-a.badge:hover {
-    color: white;
-    text-decoration: none;
-}
-</style>
+</script>

package/tailwindcss/index.js

@@ -3,17 +3,17 @@ const { colors } = require('tailwindcss/defaultTheme');
 
 module.exports = plugin(function({ addComponents, theme }) {
     const badge = {
-        ':root': {
-            '--badge-font-size': theme('badge.fontSize'),
-            '--badge-font-weight': theme('badge.fontWeight'),
-            '--badge-color': theme('badge.color'),
-            '--badge-padding-y': theme('badge.paddingY'),
-            '--badge-padding-x': theme('badge.paddingX'),
-            '--badge-border-radius': theme('badge.borderRadius')
-        },
+        // ':root': {
+        //     '--badge-font-size': theme('badge.fontSize'),
+        //     '--badge-font-weight': theme('badge.fontWeight'),
+        //     '--badge-color': theme('badge.color'),
+        //     '--badge-padding-y': theme('badge.paddingY'),
+        //     '--badge-padding-x': theme('badge.paddingX'),
+        //     '--badge-border-radius': theme('badge.borderRadius')
+        // },
         
         '.badge': {
-            display: 'inline-block',
+            display: theme('badge.display'),
             padding: `${theme('badge.paddingY')} ${theme('badge.paddingX')}`,
             fontSize: theme('badge.fontSize'),
             fontWeight: theme('badge.fontWeight'),
@@ -24,6 +24,10 @@ module.exports = plugin(function({ addComponents, theme }) {
             verticalAlign: 'baseline',
             borderRadius: theme('badge.borderRadius'),
         },
+
+        '.badge-pill': {
+            borderRadius: '1000rem'
+        },
         
         '.badge:empty': {
             display: 'none'
@@ -40,6 +44,7 @@ module.exports = plugin(function({ addComponents, theme }) {
 }, {
     theme: {
         badge: theme => ({
+            display: 'inline-block',
             fontSize: '.75em',
             fontWeight: 'bold',
             color: theme('colors.white'),

package/tailwindcss/safelist.js

@@ -0,0 +1,4 @@
+module.exports = () => ([
+    'badge',
+    'badge-pill'
+]);

package/.eslintrc.js

@@ -1,53 +0,0 @@
-module.exports = {
-    extends: [
-        'plugin:vue/recommended'
-    ],
-    parserOptions: {
-        'parser': 'babel-eslint'
-    },
-    // add your custom rules here
-    rules: {
-        'vue/no-v-html': 0,
-        'vue/require-default-prop': 0,
-        "vue/max-attributes-per-line": ["error", {
-            "singleline": 5,
-            "multiline": {
-                "max": 1,
-                "allowFirstLine": true
-            }
-        }],
-        "vue/html-indent": ["error", 4, {
-            "attribute": 1,
-            "baseIndent": 1,
-            "closeBracket": 1,
-            "alignAttributesVertically": false,
-            "ignores": []
-        }],
-        "vue/html-closing-bracket-newline": ["error", {
-            "singleline": "never",
-            "multiline": "never"
-        }],
-        // Ensure no space after keywords like if.
-        'keyword-spacing': ["error", {
-            "overrides": {
-                "if": { "after": false },
-                "for": { "after": false },
-                "while": { "after": false }
-            }
-        }],
-        // Use alternative brace style
-        'brace-style': ['error', 'stroustrup'],
-        // No spaces before parens
-        'space-before-function-paren': ['error', 'never'],
-        // Indent for tabs because spaces suck
-        'indent': ['error', 4],
-        // Semi colons always where they need to be
-        'semi': [2,'always'],
-        // allow paren-less arrow functions
-        'arrow-parens': 0,
-        // allow async-await
-        'generator-star-spacing': 0,
-        // allow debugger during development
-        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
-    }
-}

package/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-    presets: [
-        '@vue/cli-plugin-babel/preset'
-    ]
-};