npm - vue3-tailwind-components - Versions diffs - 0.0.1 - Mend

vue3-tailwind-components 0.0.1

Files changed (5) hide show

package/README.md +89 -0
package/dist/favicon.ico +0 -0
package/dist/vue3-tailwind-components.es.js +302 -0
package/dist/vue3-tailwind-components.umd.js +1 -0
package/package.json +32 -0

package/README.md ADDED Viewed

@@ -0,0 +1,89 @@
+# vue3-tailwind-components
+This is a simple set of Vue 3, Tailwind based components. At the moment these consist of:
+* [Button](./src/components/button/README.md)
+* [Table](./src/components/table/README.md)
+* [Paginator](./src/components/paginator/README.md)
+* [Switch](./src/components/switch/README.md)
+I will be extending them as I need more Vue 3 Tailwind components. To use them you can
+```shell
+npm install richardhulbert/vue3-tailwind-components --save
+```
+You can then just import the ones you want to use.
+### Colors
+I expect that if you use this library you will already understand how to use Tailwind generally. It comes with a generous
+color pallet of gradated colors. In the background Tailwind strips out the classes it does not see directly in your code to keep your css small
+but this creates a problem for us. It cannot see computed (concatenated strings). In order to use our components you will need to edit your.
+`tailwind.config.js` file in the root of your project.
+```javascript
+ ...
+safelist: [
+    {
+      pattern: /bg-(\w+)-(\d00)/,
+      variants:  ['hover', 'focus'],
+    },
+    {
+      pattern: /border-(\w+)-(\d00)/,
+    },
+    {
+      pattern: /text-(\w+)-(\d00)/,
+    },
+  ],
+...
+```
+This tells Tailwind - Do not remove these classes from the CSS
+You can be more specific and therefore reduce the size of the resultant css by doing something like this
+```javascript
+{
+    pattern: /border-(slate|amber|primary)-(200|500|700)/
+}
+```
+Another suggestion would be to create color aliases in `tailwind.config.js` like this:
+```javascript
+theme: {
+    extend: {
+      colors:{
+        primary:colors.cyan,
+        secondary:colors.lime
+      }
+    },
+  }
+```
+You can then do something like this:
+```vue
+<tw-button @click="clearProducts" color="primary" ouutline class="ml-3 ">Clear</tw-button>`
+```
+This is useful in the situation where you want to change the colour of a lot of buttons in one go.
+## Running this project locally
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+## Project Setup
+```sh
+npm install
+```
+### Compile and Hot-Reload for Development
+```sh
+npm run dev
+```
+### Compile and Minify for Production
+```sh
+npm run build
+```

package/dist/favicon.ico ADDED Viewed

Binary file

package/dist/vue3-tailwind-components.es.js ADDED Viewed

@@ -0,0 +1,302 @@
+import { openBlock as o, createElementBlock as l, createElementVNode as n, normalizeClass as i, Fragment as p, renderList as b, toDisplayString as y, renderSlot as h, createTextVNode as g, resolveComponent as k, createVNode as C, withCtx as _, createBlock as v } from "vue";
+const f = (e, s) => {
+  const t = e.__vccOpts || e;
+  for (const [u, c] of s)
+    t[u] = c;
+  return t;
+}, w = {
+  props: {
+    items: {
+      type: Array,
+      default: []
+    },
+    headings: {
+      type: Array
+    },
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    striped: {
+      type: Boolean,
+      default: !1
+    },
+    hover: {
+      type: Boolean,
+      default: !1
+    },
+    headingColor: {
+      type: String,
+      default: "slate"
+    },
+    borderColor: {
+      type: String,
+      default: "slate"
+    },
+    stripeColor: {
+      type: String,
+      default: "slate"
+    },
+    hoverColor: {
+      type: String,
+      default: "slate"
+    }
+  },
+  computed: {
+    headingClass() {
+      return "bg-" + this.headingColor + "-200";
+    },
+    boarderClass() {
+      return this.border ? "border border-" + this.borderColor + "-200" : "";
+    }
+  },
+  methods: {
+    rowStripe(e) {
+      let s = this.hover ? " hover:bg-" + this.hoverColor + "-100" : "";
+      return this.striped ? e % 2 !== 0 ? "bg-" + this.stripeColor + "-100 " + s : "" + s : s;
+    }
+  }
+}, P = { class: "border-collapse table-auto w-full text-sm" }, x = { class: "p-2 font-normal" }, $ = { class: "text-gray-600" };
+function B(e, s, t, u, c, r) {
+  return o(), l("table", P, [
+    n("thead", {
+      class: i([r.headingClass, "text-gray-800"])
+    }, [
+      n("tr", null, [
+        (o(!0), l(p, null, b(t.headings, (a) => (o(), l("th", x, y(a.label), 1))), 256))
+      ])
+    ], 2),
+    n("tbody", $, [
+      (o(!0), l(p, null, b(t.items, (a, d) => (o(), l("tr", {
+        key: d,
+        class: i(r.rowStripe(d))
+      }, [
+        (o(!0), l(p, null, b(t.headings, (m) => (o(), l("td", {
+          class: i([r.boarderClass, "p-2"])
+        }, [
+          h(e.$slots, m.field, { item: a }, () => [
+            g(y(a[m.field]), 1)
+          ])
+        ], 2))), 256))
+      ], 2))), 128))
+    ])
+  ]);
+}
+const G = /* @__PURE__ */ f(w, [["render", B]]), S = {
+  props: {
+    color: {
+      type: String,
+      default: "slate"
+    },
+    outline: {
+      type: Boolean,
+      default: !1
+    },
+    corners: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    bgcolor() {
+      let e = "bg-" + this.color + "-500 hover:bg-" + this.color + "-700 text-white border-" + this.color + "-500";
+      return this.outline && (e = "border-" + this.color + "-500 hover:bg-" + this.color + "-500 text-" + this.color + "-500 hover:text-white border"), this.corners || (e += " rounded "), e;
+    }
+  }
+};
+function T(e, s, t, u, c, r) {
+  return o(), l("button", {
+    class: i([r.bgcolor, "transition-colors ease-in font-bold py-2 px-6 font-light border text-sm"])
+  }, [
+    h(e.$slots, "default")
+  ], 2);
+}
+const H = /* @__PURE__ */ f(S, [["render", T]]), N = {
+  props: {
+    buttonPosition: {
+      type: String,
+      default: "middle"
+    },
+    color: {
+      type: String,
+      default: "slate"
+    },
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    positionClass() {
+      switch (this.buttonPosition) {
+        case "first":
+          return " rounded-l ";
+        case "last":
+          return " rounded-r ";
+        default:
+          return "";
+      }
+    },
+    finalClass() {
+      return this.disabled ? " border-" + this.color + "-200 text-" + this.color + "-200 " + this.positionClass : this.selected ? " bg-" + this.color + "-200 " + this.positionClass : " hover:bg-" + this.color + "-300 border-" + this.color + "-300 text-" + this.color + "-500 " + this.positionClass;
+    }
+  }
+};
+function V(e, s, t, u, c, r) {
+  return o(), l("li", null, [
+    n("button", {
+      class: i([r.finalClass, "px-3 py-2 ml-0 leading-tight transition-colors border"])
+    }, [
+      h(e.$slots, "default")
+    ], 2)
+  ]);
+}
+const O = /* @__PURE__ */ f(N, [["render", V]]), I = {
+  components: { TwPaginatorButton: O },
+  props: {
+    numOfPages: {
+      type: Number,
+      default: 0
+    },
+    currentPage: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: "slate"
+    }
+  },
+  methods: {
+    paginate(e) {
+      this.$emit("paginate", e);
+    },
+    increment() {
+      this.currentPage < this.numOfPages && this.$emit("paginate", this.currentPage + 1);
+    },
+    decrement() {
+      this.currentPage > 1 && this.$emit("paginate", this.currentPage - 1);
+    }
+  }
+}, A = { "aria-label": "Pagination" }, E = { class: "inline-flex -space-x-px" };
+function z(e, s, t, u, c, r) {
+  const a = k("tw-paginator-button");
+  return o(), l("nav", A, [
+    n("ul", E, [
+      C(a, {
+        color: t.color,
+        onClick: r.decrement,
+        disabled: t.currentPage <= 1,
+        "button-position": "first"
+      }, {
+        default: _(() => [
+          h(e.$slots, "first", {}, () => [
+            g("Previous")
+          ])
+        ]),
+        _: 3
+      }, 8, ["color", "onClick", "disabled"]),
+      (o(!0), l(p, null, b(t.numOfPages, (d) => (o(), v(a, {
+        color: t.color,
+        key: d,
+        onClick: (m) => r.paginate(d),
+        selected: d === t.currentPage
+      }, {
+        default: _(() => [
+          g(y(d), 1)
+        ]),
+        _: 2
+      }, 1032, ["color", "onClick", "selected"]))), 128)),
+      C(a, {
+        color: t.color,
+        onClick: r.increment,
+        disabled: t.currentPage >= t.numOfPages,
+        "button-position": "last"
+      }, {
+        default: _(() => [
+          h(e.$slots, "last", {}, () => [
+            g("Next")
+          ])
+        ]),
+        _: 3
+      }, 8, ["color", "onClick", "disabled"])
+    ])
+  ]);
+}
+const J = /* @__PURE__ */ f(I, [["render", z]]), D = {
+  props: {
+    color: {
+      type: String,
+      default: "slate"
+    },
+    modelValue: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      checked: !1
+    };
+  },
+  methods: {
+    handleInput(e) {
+      this.checked = !this.checked, this.$emit("update:modelValue", this.checked);
+    }
+  },
+  watch: {
+    modelValue: {
+      handler(e) {
+        this.checked = e;
+      },
+      immediate: !0
+    }
+  },
+  computed: {
+    backClass() {
+      return this.checked ? "bg-" + this.color + "-500" : "bg-" + this.color + "-200";
+    },
+    knobClass() {
+      return this.checked ? "right-0" : "left-0";
+    },
+    labelClass() {
+      return "text-" + this.color + "-500";
+    }
+  }
+}, F = { class: "relative" }, L = ["value"];
+function j(e, s, t, u, c, r) {
+  return o(), l("div", {
+    class: "flex cursor-pointer select-none items-center",
+    onClick: s[0] || (s[0] = (...a) => r.handleInput && r.handleInput(...a))
+  }, [
+    n("div", F, [
+      n("input", {
+        type: "checkbox",
+        class: "sr-only",
+        value: c.checked
+      }, null, 8, L),
+      n("div", {
+        class: i([r.backClass, "h-5 w-10 rounded-full shadow-inner"])
+      }, null, 2),
+      n("div", {
+        class: i([r.knobClass, "dot border border-slate-200 shadow-switch-1 absolute -top-0 h-5 w-5 rounded-full bg-white transition-transform transition-duration: 300ms"])
+      }, null, 2)
+    ]),
+    n("div", {
+      class: i([r.labelClass, "mx-2"])
+    }, [
+      h(e.$slots, "default")
+    ], 2)
+  ]);
+}
+const K = /* @__PURE__ */ f(D, [["render", j]]);
+export {
+  H as TwButton,
+  J as TwPaginator,
+  K as TwSwitch,
+  G as TwTable
+};

package/dist/vue3-tailwind-components.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "name": "vue3-tailwind-components",
+  "version": "0.0.1",
+  "description": "A library of Vue 3 components that use Tailwind",
+  "license": "MIT",
+  "repository": "richardhulbert/vue3-tailwind-components",
+  "files": ["dist"],
+  "main": "./dist/vue3-tailwind-components.umd.js",
+  "module": "./dist/vue3-tailwind-componentses.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vue3-tailwind-components.js",
+      "require": "./dist/vue3-tailwind-components.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.45"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^7.6.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.20",
+    "tailwindcss": "^3.2.4",
+    "vite": "^4.0.0"
+  }
+}