@vlalg-nimbus/nb-buttons 1.0.0

package/README.md

@@ -0,0 +1,43 @@
+# nb-buttons
+> This component is only for [Vue.js 3+](https://vuejs.org/)
+
+<br />
+
+This lib contains button components.
+
+## Installation
+
+```bash
+npm install @vlalg-nimbus/nb-buttons
+
+# or
+
+yarn add @vlalg-nimbus/nb-buttons
+```
+
+## Usage
+
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import NbButtonsComponents from '@vlalg-nimbus/nb-buttons'
+import "@vlalg-nimbus/nb-buttons/dist/style.css";
+
+const app = createApp(App)
+app.use(NbButtonsComponents)
+app.mount('#app')
+```
+
+## Components list
+
+The components that are part of this lib are:
+
+- <a href="http://nimbus.tec.br/vue-components/nb-buttons/nb-button-mechanical" target="_blank">nb-button-mechanical</a>
+
+Click on each one above to find out how to use it, properties, events, etc.
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)

package/dist/nb-buttons.js

@@ -0,0 +1,157 @@
+import { useCssVars as T, unref as j, toRefs as E, computed as a, openBlock as F, createElementBlock as q, normalizeClass as V, normalizeStyle as g, createElementVNode as A, renderSlot as P, createTextVNode as G, createCommentVNode as H } from "vue";
+const J = (e, o) => {
+  const n = e.__vccOpts || e;
+  for (const [r, u] of o)
+    n[r] = u;
+  return n;
+}, K = ["id"], Q = /* @__PURE__ */ Object.assign({
+  name: "NbButtonMechanical",
+  inheritAttrs: !1
+}, {
+  __name: "NbButtonMechanical",
+  props: {
+    nbId: {
+      type: String,
+      required: !0
+    },
+    display: {
+      type: String,
+      default: "b",
+      validator: (e = "b") => {
+        const o = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(o);
+      }
+    },
+    textColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    containerColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    buttonColor: {
+      type: String,
+      default: "#bbbbbb"
+    },
+    paddingX: {
+      type: Number,
+      default: 1,
+      validator: (e) => e || 1
+    },
+    paddingY: {
+      type: Number,
+      default: 0.2,
+      validator: (e) => e || 0.2
+    },
+    disabled: {
+      type: Boolean,
+      default: !1,
+      validator: (e) => typeof e == "boolean" && [!0, !1].includes(e)
+    },
+    borderRadius: {
+      type: Number,
+      default: 0.375
+    },
+    animationSlow: {
+      type: Boolean,
+      default: !1
+    },
+    fontFamily: {
+      type: String,
+      default: "'Lato', sans-serif"
+    },
+    fontSize: {
+      type: String,
+      default: "1.6em",
+      validator: (e) => e || "1.6em"
+    },
+    fontWeight: {
+      type: Number,
+      default: 400,
+      validator: (e) => e || 400
+    }
+  },
+  emits: ["clicked"],
+  setup(e, { emit: o }) {
+    const n = e;
+    T((t) => ({
+      "3ae6a9db": N.value,
+      "2c6fd776": j(u),
+      "137d346c": B.value,
+      14622611: k.value
+    }));
+    const {
+      display: r,
+      buttonColor: u,
+      textColor: p,
+      containerColor: b,
+      paddingX: s,
+      paddingY: d,
+      borderRadius: i,
+      disabled: C,
+      animationSlow: S,
+      fontFamily: v,
+      fontSize: m,
+      fontWeight: c
+    } = E(n), l = a(() => {
+      const t = C.value ? "component-disabled" : "", y = r.value !== "b" ? "inline-block" : "block", R = b.value ? b.value : "#ffffff", W = u.value ? u.value : "#bbbbbb", X = p.value ? p.value : "#ffffff", Y = !s.value || s.value < 0 ? 1 : s.value, $ = !d.value || d.value < 0 ? 0.2 : d.value, I = !i.value || i.value < 0 ? 0 : i.value, M = S.value ? "" : "component-transition__no-slow", O = v.value ? v.value : "'Lato', sans-serif", D = m.value ? m.value : "1.6em", L = !c.value || c.value < 0 ? 100 : c.value;
+      return {
+        disabled: t,
+        display: y,
+        containerColor: R,
+        buttonColor: W,
+        textColor: X,
+        paddingX: Y,
+        paddingY: $,
+        borderRadius: I,
+        animationSlow: M,
+        font: O,
+        fontSize: D,
+        fontWeight: L
+      };
+    }), _ = a(() => l.value.disabled), h = a(() => ({
+      display: l.value.display
+    })), x = a(() => {
+      const t = l.value;
+      return {
+        border: `2px solid ${t.containerColor}`,
+        color: t.textColor,
+        backgroundColor: t.buttonColor,
+        padding: `${t.paddingY}rem ${t.paddingX}rem`,
+        borderRadius: `${t.borderRadius}rem`,
+        fontSize: t.fontSize,
+        fontWeight: t.fontWeight
+      };
+    }), w = a(() => l.value.animationSlow), N = a(() => l.value.font), k = a(() => l.value.textColor), B = a(() => l.value.buttonColor), z = () => {
+      o("clicked");
+    };
+    return (t, y) => e.nbId ? (F(), q("div", {
+      key: 0,
+      class: V(["nb-wrapper", _.value]),
+      style: g([h.value]),
+      onClick: z
+    }, [
+      A("div", {
+        id: e.nbId,
+        class: V(["nb-reset", "component", "component-transition", w.value]),
+        style: g([x.value])
+      }, [
+        P(t.$slots, "content", {}, () => [
+          G("Default Text")
+        ], !0)
+      ], 14, K)
+    ], 6)) : H("", !0);
+  }
+}), U = /* @__PURE__ */ J(Q, [["__scopeId", "data-v-05891c86"]]), f = { NbButtonMechanical: U }, ee = {
+  install(e) {
+    for (const o in f)
+      if (Object.prototype.hasOwnProperty.call(f, o)) {
+        const n = f[o];
+        e.component(n.name, n);
+      }
+  }
+};
+export {
+  ee as default
+};

package/dist/nb-buttons.umd.cjs

@@ -0,0 +1 @@
+(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.NbButtons=r(e.Vue))})(this,function(e){"use strict";const r="",v=(t,n)=>{const a=t.__vccOpts||t;for(const[d,u]of n)a[d]=u;return a},C=["id"],s={NbButtonMechanical:v(Object.assign({name:"NbButtonMechanical",inheritAttrs:!1},{__name:"NbButtonMechanical",props:{nbId:{type:String,required:!0},display:{type:String,default:"b",validator:(t="b")=>{const n=t?t.toLowerCase():"";return["b","ib"].includes(n)}},textColor:{type:String,default:"#ffffff"},containerColor:{type:String,default:"#ffffff"},buttonColor:{type:String,default:"#bbbbbb"},paddingX:{type:Number,default:1,validator:t=>t||1},paddingY:{type:Number,default:.2,validator:t=>t||.2},disabled:{type:Boolean,default:!1,validator:t=>typeof t=="boolean"&&[!0,!1].includes(t)},borderRadius:{type:Number,default:.375},animationSlow:{type:Boolean,default:!1},fontFamily:{type:String,default:"'Lato', sans-serif"},fontSize:{type:String,default:"1.6em",validator:t=>t||"1.6em"},fontWeight:{type:Number,default:400,validator:t=>t||400}},emits:["clicked"],setup(t,{emit:n}){const a=t;e.useCssVars(o=>({"3ae6a9db":B.value,"2c6fd776":e.unref(u),"137d346c":z.value,14622611:k.value}));const{display:d,buttonColor:u,textColor:b,containerColor:m,paddingX:i,paddingY:c,borderRadius:f,disabled:S,animationSlow:_,fontFamily:y,fontSize:V,fontWeight:p}=e.toRefs(a),l=e.computed(()=>{const o=S.value?"component-disabled":"",g=d.value!=="b"?"inline-block":"block",W=m.value?m.value:"#ffffff",M=u.value?u.value:"#bbbbbb",T=b.value?b.value:"#ffffff",X=!i.value||i.value<0?1:i.value,Y=!c.value||c.value<0?.2:c.value,$=!f.value||f.value<0?0:f.value,I=_.value?"":"component-transition__no-slow",O=y.value?y.value:"'Lato', sans-serif",j=V.value?V.value:"1.6em",D=!p.value||p.value<0?100:p.value;return{disabled:o,display:g,containerColor:W,buttonColor:M,textColor:T,paddingX:X,paddingY:Y,borderRadius:$,animationSlow:I,font:O,fontSize:j,fontWeight:D}}),h=e.computed(()=>l.value.disabled),x=e.computed(()=>({display:l.value.display})),N=e.computed(()=>{const o=l.value;return{border:`2px solid ${o.containerColor}`,color:o.textColor,backgroundColor:o.buttonColor,padding:`${o.paddingY}rem ${o.paddingX}rem`,borderRadius:`${o.borderRadius}rem`,fontSize:o.fontSize,fontWeight:o.fontWeight}}),w=e.computed(()=>l.value.animationSlow),B=e.computed(()=>l.value.font),k=e.computed(()=>l.value.textColor),z=e.computed(()=>l.value.buttonColor),R=()=>{n("clicked")};return(o,g)=>t.nbId?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nb-wrapper",h.value]),style:e.normalizeStyle([x.value]),onClick:R},[e.createElementVNode("div",{id:t.nbId,class:e.normalizeClass(["nb-reset","component","component-transition",w.value]),style:e.normalizeStyle([N.value])},[e.renderSlot(o.$slots,"content",{},()=>[e.createTextVNode("Default Text")],!0)],14,C)],6)):e.createCommentVNode("",!0)}}),[["__scopeId","data-v-05891c86"]])};return{install(t){for(const n in s)if(Object.prototype.hasOwnProperty.call(s,n)){const a=s[n];t.component(a.name,a)}}}});

package/dist/style.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";.nb-wrapper[data-v-05891c86]{margin:0;padding:0;font-size:62.5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.nb-reset[data-v-05891c86]{font-family:Lato,sans-serif;font-style:normal;font-weight:light;line-height:1.42857143}.nb-reset *[data-v-05891c86]{margin:0;padding:0}.nb-reset *[data-v-05891c86],.nb-reset *[data-v-05891c86]:before,.nb-reset *[data-v-05891c86]:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.component[data-v-05891c86]{margin:0 3px 5px 0;padding:0;box-sizing:border-box;line-height:1.42857143;font-family:Lato,sans-serif;font-family:var(--3ae6a9db);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;text-align:center;-webkit-text-decoration-line:none;text-decoration-line:none;white-space:nowrap;box-shadow:3px 3px 0 -1px var(--2c6fd776),3px 3px 0 var(--2c6fd776)}.component.component-transition[data-v-05891c86]{transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.component.component-transition.component-transition__no-slow[data-v-05891c86]{transition:all .05s ease-in!important}.component[data-v-05891c86]:hover{box-shadow:0 0 0 -1px var(--2c6fd776),0 0 0 var(--2c6fd776);transform:translate(3px,3px)}.component[data-v-05891c86]:active,.component[data-v-05891c86]:focus{outline:2px solid transparent;outline-offset:2px}.component[data-v-05891c86]:active{box-shadow:0 0 #0000,0 0 #0000,0 0 #0000;left:1px;top:1px}.component-disabled[data-v-05891c86]{cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}.component-disabled .component[data-v-05891c86]{--disabled-button-color: var(--137d346c);--disabled-color: var(--14622611);background-color:var(--disabled-button-color)!important;color:var(--disabled-color)!important;opacity:.7;border-radius:inherit}

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@vlalg-nimbus/nb-buttons",
+  "description": "Button components for Vuejs 3",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/nb-buttons.umd.js",
+  "module": "./dist/nb-buttons.js",
+  "exports": {
+    ".": {
+      "import": "./dist/nb-buttons.js",
+      "require": "./dist/nb-buttons.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./dist/images": "./dist/images"
+  },
+  "browser": {
+    "./style.css": "./dist/style.css",
+    "./dist/images": "./dist/images"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 4173",
+    "test:unit": "vitest --environment jsdom",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "format:prettier": "prettier --write . '!**/*.{js,vue}'",
+    "npm:publish": "vite build && npm login && npm publish --access=public"
+  },
+  "dependencies": {
+    "@vlalg-nimbus/bee-css-reset": "^2.0.2",
+    "@vlalg-nimbus/chameleon-grid-layout": "^1.0.2",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.5",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.2",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/test-utils": "^2.4.1",
+    "eslint": "^8.51.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "jsdom": "^22.1.0",
+    "prettier": "^3.0.3",
+    "sass": "^1.69.0",
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/VemLavarALoucaGamers/vlalg-nimbus"
+  },
+  "bugs": {
+    "url": "https://github.com/VemLavarALoucaGamers/vlalg-nimbus/issues"
+  },
+  "homepage": "https://nimbus.tec.br",
+  "keywords": [
+    "vuejs",
+    "vue js",
+    "vue plugin",
+    "delete button",
+    "delete",
+    "buttons",
+    "button",
+    "components",
+    "component",
+    "vue components",
+    "vuejs components",
+    "vue js components"
+  ],
+  "author": "Antonio and Felipe <Vem Lavar a Louca Gamers> (https://vemlavaralouca.com.br)",
+  "contributors": [
+    "TonhaoSantos (https://github.com/TonhaoSantos)",
+    "Felipecss (https://github.com/lipecss)"
+  ]
+}