npm - vx-vue - Versions diffs - 0.0.1 - Mend

vx-vue 0.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 (4) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Recommended IDE Setup
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

package/dist/vxvue.es.js ADDED Viewed

@@ -0,0 +1,180 @@
+import { openBlock as s, createElementBlock as l, createElementVNode as n, ref as c, computed as V, useAttrs as _, normalizeClass as k, mergeProps as A, withModifiers as j, createBlock as C, unref as b, renderSlot as h, toDisplayString as v, createCommentVNode as m, Fragment as x, renderList as L, createVNode as M, Transition as z, withCtx as B, createTextVNode as $, nextTick as N } from "vue";
+function O(t, a) {
+  return s(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    n("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+    })
+  ]);
+}
+function E(t, a) {
+  return s(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    n("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+    }),
+    n("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+    })
+  ]);
+}
+const P = ["value", "type"], te = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "password-input",
+  props: ["modelValue"],
+  emits: ["update:modelValue"],
+  setup(t, { emit: a }) {
+    const r = c(!1), i = V(() => {
+      let e = Object.assign({}, _());
+      return delete e.class, e;
+    });
+    return (e, o) => (s(), l("div", {
+      class: k("inline-block relative " + _().class)
+    }, [
+      n("input", A({
+        value: t.modelValue,
+        type: r.value ? "text" : "password",
+        onInput: o[0] || (o[0] = (u) => a("update:modelValue", u.target.value))
+      }, i.value, { class: "block pr-10 w-full form-input peer" }), null, 16, P),
+      n("button", {
+        onClick: o[1] || (o[1] = j((u) => r.value = !r.value, ["stop"])),
+        class: "flex absolute inset-y-0 right-0 items-center pr-3 text-brand-700 hover:text-brand"
+      }, [
+        r.value ? (s(), C(b(O), {
+          key: 0,
+          class: "w-5 h-5"
+        })) : (s(), C(b(E), {
+          key: 1,
+          class: "w-5 h-5"
+        }))
+      ]),
+      h(e.$slots, "default")
+    ], 2));
+  }
+}), T = ["value"], F = {
+  key: 0,
+  disabled: "",
+  value: ""
+}, I = ["value", "selected"], se = {
+  __name: "form-select",
+  props: { options: Array, modelValue: [String, Number], disabledLabel: String },
+  emits: ["update:modelValue"],
+  setup(t, { emit: a }) {
+    return (r, i) => (s(), l("select", A(r.$attrs, {
+      value: t.modelValue,
+      class: "form-select",
+      onChange: i[0] || (i[0] = (e) => a("update:modelValue", e.target.value))
+    }), [
+      t.disabledLabel ? (s(), l("option", F, v(t.disabledLabel), 1)) : m("", !0),
+      (s(!0), l(x, null, L(t.options, (e) => (s(), l("option", {
+        value: e.key !== void 0 ? e.key : e.label || e,
+        selected: (e.key !== void 0 ? e.key : e.label || e) === t.modelValue
+      }, v(e.label || e), 9, I))), 256))
+    ], 16, T));
+  }
+}, D = {
+  key: 0,
+  class: "fixed inset-0 z-50 bg-black bg-opacity-50 backdrop-blur-sm",
+  "aria-hidden": "true"
+}, q = {
+  key: 0,
+  class: "overflow-y-auto fixed inset-0 z-50"
+}, G = { class: "flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0" }, H = { key: 0 }, J = /* @__PURE__ */ n("span", {
+  class: "hidden sm:inline-block sm:h-screen sm:align-middle",
+  "aria-hidden": "true"
+}, "", -1), K = { class: "inline-block overflow-hidden text-left align-bottom bg-white rounded shadow-xl transition-all transform sm:my-8 sm:w-full sm:max-w-sm sm:align-middle lg:max-w-lg" }, Q = { class: "px-4 pb-4 mt-4 sm:px-6 sm:pb-6 sm:mt-5" }, R = { class: "flex flex-row items-center" }, U = { class: "flex-shrink-0" }, W = { class: "flex-grow text-center" }, X = ["onClick"], le = {
+  __name: "confirm",
+  props: {
+    buttons: {
+      type: [Object, Array],
+      default: { label: "Ok" },
+      validator: (t) => Array.isArray(t) && t.length <= 2 && t.filter((a) => a.label !== "undefined" && a.value !== "undefined").length === t.length || t.label !== void 0 && t.value !== void 0
+    },
+    headerClass: {
+      type: String,
+      default: "text-vxvue-alt-900 bg-vxvue-alt-400"
+    },
+    buttonClass: {
+      type: String,
+      default: "button"
+    }
+  },
+  setup(t, { expose: a }) {
+    const r = t, i = c(""), e = c(""), o = c(!1);
+    let u = null, g = null;
+    const S = V(() => Array.isArray(r.buttons) ? r.buttons : [r.buttons]), y = c(null);
+    return a({ open: (d, w) => (i.value = d, e.value = w, o.value = !0, N(() => y.value.firstElementChild.focus()), new Promise((f, p) => {
+      u = f, g = p;
+    })) }), (d, w) => (s(), l(x, null, [
+      o.value ? (s(), l("div", D)) : m("", !0),
+      M(z, { name: "appear" }, {
+        default: B(() => [
+          o.value ? (s(), l("div", q, [
+            n("div", G, [
+              o.value ? (s(), l("div", H, [
+                J,
+                n("div", K, [
+                  i.value ? (s(), l("h3", {
+                    key: 0,
+                    class: k(["py-4 pt-4 text-lg font-medium text-center sm:py-6", t.headerClass])
+                  }, [
+                    h(d.$slots, "title", { title: i.value }, () => [
+                      $(v(i.value), 1)
+                    ])
+                  ], 2)) : m("", !0),
+                  n("div", Q, [
+                    n("div", R, [
+                      n("div", U, [
+                        h(d.$slots, "icon")
+                      ]),
+                      n("p", W, [
+                        h(d.$slots, "default", { message: e.value }, () => [
+                          $(v(e.value), 1)
+                        ])
+                      ])
+                    ]),
+                    n("div", {
+                      class: "flex justify-center mt-5 space-x-2 sm:mt-6",
+                      ref_key: "buttonsContainer",
+                      ref: y
+                    }, [
+                      (s(!0), l(x, null, L(S.value, (f, p) => (s(), l("button", {
+                        class: k([t.buttonClass, f.class]),
+                        onClick: j((Z) => {
+                          o.value = !1, p === 0 ? b(u)() : b(g)();
+                        }, ["prevent"])
+                      }, v(f.label), 11, X))), 256))
+                    ], 512)
+                  ])
+                ])
+              ])) : m("", !0)
+            ])
+          ])) : m("", !0)
+        ]),
+        _: 3
+      })
+    ], 64));
+  }
+};
+export {
+  le as Confirm,
+  se as FormSelect,
+  te as PasswordInput
+};

package/dist/vxvue.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "vx-vue",
+  "files": ["dist"],
+  "main": "./dist/vxvue.umd.js",
+  "module": "./dist/vxvue.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vxvue.es.js",
+      "require": "./dist/vxvue.umd.js"
+    }
+  },
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vue": "^3.3.4",
+    "tailwindcss": "^3.3.3",
+    "@tailwindcss/forms": "^0.5.6",
+    "@heroicons/vue": "^2.0.18",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "vite": "^4.4.11"
+  }
+}