test-bentoweb-ui 1.0.15

package/README.md

@@ -0,0 +1,29 @@
+# bentoweb-ui
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+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/bentoweb-ui.css

@@ -0,0 +1 @@
+.btn-success[data-v-8a6bc7dd],.btn-success[data-v-2f61fe32],.btn-success[data-v-55608666]{background-color:#0a3622}.nav-tabs .nav-link[data-v-01e864de]{cursor:pointer}

package/dist/bentoweb-ui.es.js

@@ -0,0 +1,628 @@
+import { openBlock as a, createElementBlock as s, normalizeClass as c, renderSlot as m, inject as M, resolveComponent as N, createElementVNode as n, Fragment as f, renderList as v, unref as z, createBlock as I, withCtx as _, createCommentVNode as h, createTextVNode as b, toDisplayString as d, computed as S, ref as y, createVNode as k, createStaticVNode as j, withModifiers as G, withDirectives as L, vShow as q } from "vue";
+const p = (e, r) => {
+  const t = e.__vccOpts || e;
+  for (const [u, l] of r)
+    t[u] = l;
+  return t;
+}, A = {
+  name: "BtwBadge",
+  props: {
+    size: {
+      type: String,
+      default: null,
+      validator(e) {
+        return ["14", "16", "18"].includes(e);
+      }
+    },
+    variant: {
+      type: String,
+      default: null,
+      validator(e) {
+        return ["primary", "success", "secondary", "danger", "warning", "light", "dim-danger", "light-border"].includes(e);
+      }
+    },
+    pill: {
+      type: String,
+      default: null,
+      validator(e) {
+        return ["pill"].includes(e);
+      }
+    }
+  },
+  computed: {
+    sizeClass() {
+      return this.size ? `size${this.size}` : "";
+    },
+    pillClass() {
+      return this.pill ? `rounded-${this.pill}` : "";
+    }
+  }
+};
+function U(e, r, t, u, l, i) {
+  return a(), s("span", {
+    class: c(["badge", "text-bg-" + t.variant, i.sizeClass, i.pillClass])
+  }, [
+    m(e.$slots, "default", {}, void 0, !0)
+  ], 2);
+}
+const H = /* @__PURE__ */ p(A, [["render", U], ["__scopeId", "data-v-8a6bc7dd"]]), K = {
+  name: "BtwButton",
+  props: {
+    size: {
+      type: String,
+      default: null,
+      validator(e) {
+        return ["sm", "md", "lg"].includes(e);
+      }
+    },
+    variant: {
+      type: String,
+      default: "",
+      validator(e) {
+        return ["primary", "secondary", "success", "danger", "btn-info", "warning", "light", "disable", "outline-secondary", "outline-danger", "dim-success", "dim-danger", "link", "icon"].includes(e);
+      }
+    },
+    block: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    sizeClass() {
+      return this.size ? `btn-${this.size}` : "";
+    },
+    blockClass() {
+      return this.block ? `btn-${this.block}` : "";
+    }
+  }
+};
+function J(e, r, t, u, l, i) {
+  return a(), s("button", {
+    class: c(["btn", "btn-" + t.variant, i.blockClass, i.sizeClass]),
+    onClick: r[0] || (r[0] = (o) => e.$emit("click"))
+  }, [
+    m(e.$slots, "default")
+  ], 2);
+}
+const Q = /* @__PURE__ */ p(K, [["render", J]]);
+/*!
+  * vue-router v4.4.3
+  * (c) 2024 Eduardo San Martin Morote
+  * @license MIT
+  */
+var D;
+(function(e) {
+  e.pop = "pop", e.push = "push";
+})(D || (D = {}));
+var P;
+(function(e) {
+  e.back = "back", e.forward = "forward", e.unknown = "";
+})(P || (P = {}));
+Symbol(process.env.NODE_ENV !== "production" ? "navigation failure" : "");
+var O;
+(function(e) {
+  e[e.aborted = 4] = "aborted", e[e.cancelled = 8] = "cancelled", e[e.duplicated = 16] = "duplicated";
+})(O || (O = {}));
+Symbol(process.env.NODE_ENV !== "production" ? "router view location matched" : "");
+Symbol(process.env.NODE_ENV !== "production" ? "router view depth" : "");
+Symbol(process.env.NODE_ENV !== "production" ? "router" : "");
+const W = Symbol(process.env.NODE_ENV !== "production" ? "route location" : "");
+Symbol(process.env.NODE_ENV !== "production" ? "router view location" : "");
+function T(e) {
+  return M(W);
+}
+const X = { "aria-label": "breadcrumb" }, Y = { class: "breadcrumb" }, Z = { key: 1 }, F = {
+  __name: "BtwBreadcrumb",
+  setup(e) {
+    const t = T().meta.breadcrumb || [];
+    return (u, l) => {
+      const i = N("router-link");
+      return a(), s("nav", X, [
+        n("ol", Y, [
+          (a(!0), s(f, null, v(z(t), (o, g) => (a(), s("li", {
+            key: g,
+            class: c(["breadcrumb-item", { active: g === z(t).length - 1 }])
+          }, [
+            o.link && g !== z(t).length - 1 ? (a(), I(i, {
+              key: 0,
+              to: o.link
+            }, {
+              default: _(() => [
+                o.icon ? (a(), s("i", {
+                  key: 0,
+                  class: c(o.icon)
+                }, null, 2)) : h("", !0),
+                b(" " + d(o.name), 1)
+              ]),
+              _: 2
+            }, 1032, ["to"])) : (a(), s("span", Z, d(o.name), 1))
+          ], 2))), 128))
+        ])
+      ]);
+    };
+  }
+}, ee = {
+  name: "Btwcard",
+  props: {
+    hideHeaderSlot: {
+      type: Boolean,
+      default: !1
+    },
+    cardHeaderClass: {
+      type: String,
+      default: "card-header border-bottom border-light py-3"
+    },
+    cardBodyClass: {
+      type: String,
+      default: "card-body p-0 "
+    },
+    border: {
+      type: String,
+      default: "white",
+      validator(e) {
+        return ["white", "light"].includes(e);
+      }
+    },
+    rounded: {
+      type: String,
+      default: "3",
+      validator(e) {
+        return ["2", "3", "4", "5"].includes(e);
+      }
+    },
+    headerBg: {
+      type: String,
+      default: "white",
+      validator(e) {
+        return ["primary", "secondary", "light", "white", "dark", "success"].includes(e);
+      }
+    },
+    bodyBg: {
+      type: String,
+      default: null,
+      validator(e) {
+        return ["light", "white", "dark", "success"].includes(e);
+      }
+    }
+  },
+  computed: {
+    bodyBgClass() {
+      return this.bodyBg ? `bg-${this.bodyBg}` : "";
+    }
+  }
+};
+function te(e, r, t, u, l, i) {
+  return a(), s("div", {
+    class: c(["card border", "border-" + t.border, "rounded-" + t.rounded])
+  }, [
+    t.hideHeaderSlot ? h("", !0) : (a(), s("div", {
+      key: 0,
+      class: c([t.cardHeaderClass, "bg-" + t.headerBg])
+    }, [
+      m(e.$slots, "card-header")
+    ], 2)),
+    n("div", {
+      class: c([t.cardBodyClass, i.bodyBgClass])
+    }, [
+      m(e.$slots, "card-body")
+    ], 2)
+  ], 2);
+}
+const ne = /* @__PURE__ */ p(ee, [["render", te]]), ae = {
+  name: "BtwDropdownButton",
+  props: {
+    variant: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: null,
+      validator(e) {
+        return ["sm", "md", "lg"].includes(e);
+      }
+    },
+    icon: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    sizeClass() {
+      return this.size ? `btn-${this.size}` : "";
+    }
+  }
+}, se = { class: "dropdown" }, oe = {
+  class: "dropdown-menu",
+  "aria-labelledby": "dropdownMenuButton"
+};
+function re(e, r, t, u, l, i) {
+  return a(), s("div", se, [
+    n("button", {
+      class: c(["btn dropdown-toggle", ["btn-" + t.variant, i.sizeClass]]),
+      type: "button",
+      id: "dropdownMenuButton",
+      "data-bs-toggle": "dropdown",
+      "aria-expanded": "false"
+    }, [
+      t.icon ? (a(), s("i", {
+        key: 0,
+        class: c(t.icon)
+      }, null, 2)) : h("", !0),
+      e.$slots["button-content"] ? (a(), s("div", {
+        key: 1,
+        class: c(t.icon ? "me-2" : "")
+      }, [
+        m(e.$slots, "button-content")
+      ], 2)) : h("", !0)
+    ], 2),
+    n("ul", oe, [
+      m(e.$slots, "default")
+    ])
+  ]);
+}
+const C = /* @__PURE__ */ p(ae, [["render", re]]), ie = { class: "border-bottom bg-white py-10" }, le = { class: "container-fluid d-flex justify-content-between" }, de = { class: "d-flex align-items-center" }, ce = { class: "ms-2" }, ue = ["src"], ge = { class: "d-flex align-items-end align-items-stretch" }, me = ["href"], _e = {
+  __name: "BtwHeader",
+  setup(e) {
+    const r = T(), t = S(() => r.name === "dashboard" ? "danger" : "disabled"), u = S(() => r.name === "dashboard" ? "outline-success" : "outline-danger"), l = S(() => r.name === "dashboard" ? "2000 Parcel" : "-50 Parcel"), i = y("../img/bento-logo.svg"), o = y("ณัฐนันท์"), g = y([
+      { link: "#", name: "บัญชีของฉัน" },
+      { link: "#", name: "ออกจากระบบ" }
+    ]), B = y("30"), w = y([
+      { page: "/messagebox", name: "Booking failed" },
+      { page: "/messagebox", name: "ออเดอร์ที่มีปัญหา" }
+    ]);
+    return (E, V) => {
+      const R = N("router-link");
+      return a(), s("header", ie, [
+        n("div", le, [
+          n("div", de, [
+            n("div", ce, [
+              n("img", {
+                src: i.value,
+                alt: "Logo",
+                height: "40"
+              }, null, 8, ue)
+            ])
+          ]),
+          n("div", ge, [
+            k(H, {
+              size: "18",
+              class: "me-2",
+              variant: u.value
+            }, {
+              default: _(() => [
+                V[0] || (V[0] = n("i", { class: "icon-wallet me-2" }, null, -1)),
+                b(d(l.value), 1)
+              ]),
+              _: 1
+            }, 8, ["variant"]),
+            k(C, {
+              variant: t.value,
+              icon: "icon-ntfy",
+              class: "me-2"
+            }, {
+              "button-content": _(() => [
+                b(d(B.value), 1)
+              ]),
+              default: _(() => [
+                (a(!0), s(f, null, v(w.value, ($, x) => (a(), s("li", { key: x }, [
+                  k(R, {
+                    to: $.page,
+                    class: "dropdown-item"
+                  }, {
+                    default: _(() => [
+                      b(d($.name), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["to"])
+                ]))), 128))
+              ]),
+              _: 1
+            }, 8, ["variant"]),
+            k(C, {
+              variant: "light",
+              icon: "icon-user"
+            }, {
+              "button-content": _(() => [
+                b(d(o.value), 1)
+              ]),
+              default: _(() => [
+                (a(!0), s(f, null, v(g.value, ($, x) => (a(), s("li", { key: x }, [
+                  n("a", {
+                    class: "dropdown-item",
+                    href: $.link
+                  }, d($.name), 9, me)
+                ]))), 128))
+              ]),
+              _: 1
+            })
+          ])
+        ])
+      ]);
+    };
+  }
+}, be = {
+  key: 0,
+  class: "modal",
+  tabindex: "-1",
+  role: "dialog"
+}, fe = { class: "modal-content" }, ve = {
+  key: 0,
+  class: "modal-header"
+}, he = { class: "modal-title" }, pe = { class: "d-flex justify-content-end align-items-center" }, we = { class: "modal-body" }, ye = /* @__PURE__ */ Object.assign({
+  name: "BtwModal"
+}, {
+  __name: "BtwModal",
+  props: {
+    //visible: Boolean, // Boolean prop to control visibility
+    id: String,
+    activeId: String,
+    size: {
+      type: String,
+      default: "md",
+      validator(e) {
+        return ["sm", "md", "lg"].includes(e);
+      }
+    },
+    hideHeaderSlot: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["close"],
+  setup(e, { emit: r }) {
+    const t = e, u = S(() => t.id === t.activeId);
+    return (l, i) => u.value ? (a(), s("div", be, [
+      n("div", {
+        class: c(["modal-dialog", "modal-" + e.size])
+      }, [
+        n("div", fe, [
+          e.hideHeaderSlot ? h("", !0) : (a(), s("div", ve, [
+            n("h5", he, [
+              m(l.$slots, "modal-title")
+            ]),
+            n("div", pe, [
+              m(l.$slots, "modal-close"),
+              n("button", {
+                type: "button",
+                class: "btn-close",
+                onClick: i[0] || (i[0] = (o) => l.$emit("close")),
+                "aria-label": "Close"
+              })
+            ])
+          ])),
+          n("div", we, [
+            m(l.$slots, "modal-body")
+          ])
+        ])
+      ], 2)
+    ])) : h("", !0);
+  }
+}), $e = {
+  name: "BtwPagination",
+  props: {
+    size: {
+      type: String,
+      default: "md",
+      validator(e) {
+        return ["sm", "md", "lg"].includes(e);
+      }
+    }
+  }
+};
+function ke(e, r, t, u, l, i) {
+  return a(), s("nav", null, [
+    n("ul", {
+      class: c(["pagination", "pagination-" + t.size])
+    }, r[0] || (r[0] = [
+      j('<li class="page-item disabled" data-v-2f61fe32><a class="page-link" data-v-2f61fe32>Previous</a></li><li class="page-item active" data-v-2f61fe32><a class="page-link" href="#" data-v-2f61fe32>1</a></li><li class="page-item" data-v-2f61fe32><a class="page-link" href="#" data-v-2f61fe32>2</a></li><li class="page-item" data-v-2f61fe32><a class="page-link" href="#" data-v-2f61fe32>3</a></li><li class="page-item" data-v-2f61fe32><a class="page-link" href="#" data-v-2f61fe32>Next</a></li>', 5)
+    ]), 2)
+  ]);
+}
+const Be = /* @__PURE__ */ p($e, [["render", ke], ["__scopeId", "data-v-2f61fe32"]]), Se = { class: "btw-sidebar bg-white px-3 py-4" }, xe = { class: "list-unstyled mb-0" }, ze = { class: "btw-links-heading py-3" }, Ce = { class: "list-unstyled" }, Ne = {
+  __name: "BtwSidebar",
+  setup(e) {
+    const r = T(), t = y([
+      {
+        heading: "Packing",
+        sidebarSubGroup: [
+          { to: "/", icon: "home", text: "Dashboard", activeRoutes: ["dashboard"] },
+          { to: "/packing", icon: "print-2", text: "แพ็ค", activeRoutes: ["packing", "createpickslip"] },
+          { to: "/orders", icon: "doc", text: "ออเดอร์", activeRoutes: ["orders"] },
+          { to: "/task", icon: "upload", text: "Task", activeRoutes: ["task", "taskid"] }
+        ]
+      },
+      {
+        heading: "เตรียมการจัดการ",
+        sidebarSubGroup: [
+          { to: "/boxs", icon: "box", text: "กล่อง", activeRoutes: ["boxs"] },
+          { to: "/orderspattern", icon: "box", text: "Order Pattern", activeRoutes: ["orderspattern", "orderspatternid", "orderspatternadd", "orderspatternedit"] },
+          { to: "/privacy", icon: "setting", text: "นโยบาย", activeRoutes: ["privacy"] }
+        ]
+      }
+    ]);
+    function u(l) {
+      return l.activeRoutes.includes(r.name);
+    }
+    return (l, i) => {
+      const o = N("router-link");
+      return a(), s("aside", Se, [
+        n("ul", xe, [
+          (a(!0), s(f, null, v(t.value, (g, B) => (a(), s("li", {
+            class: "btw-link-group",
+            key: B
+          }, [
+            n("strong", ze, d(g.heading), 1),
+            n("ul", Ce, [
+              (a(!0), s(f, null, v(g.sidebarSubGroup, (w, E) => (a(), s("li", { key: E }, [
+                k(o, {
+                  to: w.to,
+                  "exact-active-class": "active",
+                  class: c(["btw-links-link", { active: u(w) }])
+                }, {
+                  default: _(() => [
+                    n("i", {
+                      class: c(["me-2", ["icon-" + w.icon]])
+                    }, null, 2),
+                    b(" " + d(w.text), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["to", "class"])
+              ]))), 128))
+            ])
+          ]))), 128))
+        ])
+      ]);
+    };
+  }
+}, Te = {
+  name: "BtwBadge",
+  props: {
+    size: {
+      type: String,
+      default: null,
+      validator(e) {
+        return ["sm", "md", "lg"].includes(e);
+      }
+    },
+    variant: {
+      type: String,
+      default: null,
+      validator(e) {
+        return ["primary", "success", "secondary", "danger", "warning", "light"].includes(e);
+      }
+    }
+  }
+};
+function Ee(e, r, t, u, l, i) {
+  return a(), s("span", {
+    class: c(["badge rounded-pill", "text-bg-" + t.variant, "size-" + t.size])
+  }, [
+    m(e.$slots, "default", {}, void 0, !0)
+  ], 2);
+}
+const Ve = /* @__PURE__ */ p(Te, [["render", Ee], ["__scopeId", "data-v-55608666"]]), De = {
+  name: "Btwcard",
+  props: {
+    titlePage: {
+      type: String,
+      required: !0
+    },
+    selectedTab: {
+      type: String,
+      default: null
+      // Initially selected tab passed from parent
+    },
+    tabs: {
+      type: Array,
+      required: !0
+      // Array of tab objects passed from parent
+    },
+    contentTab: {
+      type: String,
+      default: "mt-4"
+    }
+  },
+  methods: {
+    selectTab(e) {
+      this.$emit("update:selectedTab", e);
+    }
+  }
+}, Pe = { class: "card border border-white p-3" }, Oe = { class: "topic-normal mb-3" }, He = { class: "nav nav-tabs" }, Re = ["onClick"], Me = { class: "nav-text size25 fw-bold" }, Ie = {
+  key: 0,
+  class: "text-muted size18"
+}, je = { class: "size40 fw-bolder" }, Ge = { class: "tab-content" };
+function Le(e, r, t, u, l, i) {
+  return a(), s("div", null, [
+    n("div", Pe, [
+      n("h1", Oe, [
+        m(e.$slots, "topbar-title", {}, () => [
+          b(d(t.titlePage), 1)
+        ], !0)
+      ]),
+      n("ul", He, [
+        (a(!0), s(f, null, v(t.tabs, (o, g) => (a(), s("li", {
+          key: g,
+          class: "nav-item"
+        }, [
+          n("a", {
+            class: c(["nav-link rounded-3", { active: t.selectedTab === o.name }]),
+            href: "#",
+            onClick: G((B) => i.selectTab(o.name), ["prevent"])
+          }, [
+            n("div", Me, [
+              b(d(o.label) + " ", 1),
+              o.labelSub ? (a(), s("div", Ie, d(o.labelSub), 1)) : h("", !0)
+            ]),
+            n("div", je, d(o.number), 1)
+          ], 10, Re)
+        ]))), 128))
+      ])
+    ]),
+    n("div", {
+      class: c([t.contentTab])
+    }, [
+      n("div", Ge, [
+        (a(!0), s(f, null, v(t.tabs, (o, g) => L((a(), s("div", { key: g }, [
+          m(e.$slots, o.name, {}, void 0, !0)
+        ])), [
+          [q, t.selectedTab === o.name]
+        ])), 128))
+      ])
+    ], 2)
+  ]);
+}
+const qe = /* @__PURE__ */ p(De, [["render", Le], ["__scopeId", "data-v-01e864de"]]), Ae = { class: "switches-container" }, Ue = ["id", "name", "value"], Ke = ["id", "name", "value"], Je = ["for"], Qe = ["for"], We = { class: "switch-wrapper" }, Xe = { class: "switch" }, Ye = /* @__PURE__ */ Object.assign({
+  name: "BtwToggleSwitch"
+}, {
+  __name: "BtwToggleSwitch",
+  props: {
+    toggle1: String,
+    toggle2: String,
+    name: String
+  },
+  setup(e) {
+    return (r, t) => (a(), s("div", Ae, [
+      n("input", {
+        type: "radio",
+        id: e.toggle1,
+        name: e.name,
+        value: e.toggle1,
+        checked: "checked"
+      }, null, 8, Ue),
+      n("input", {
+        type: "radio",
+        id: e.toggle2,
+        name: e.name,
+        value: e.toggle2
+      }, null, 8, Ke),
+      n("label", { for: e.toggle1 }, d(e.toggle1), 9, Je),
+      n("label", { for: e.toggle2 }, d(e.toggle2), 9, Qe),
+      n("div", We, [
+        n("div", Xe, [
+          n("div", null, d(e.toggle1), 1),
+          n("div", null, d(e.toggle2), 1)
+        ])
+      ])
+    ]));
+  }
+}), Fe = {
+  install(e) {
+    e.component("BtwBadge", H), e.component("BtwButton", Q), e.component("BtwBreadcrumb", F), e.component("BtwCard", ne), e.component("BtwDropdownButton", C), e.component("BtwHeader", _e), e.component("BtwModal", ye), e.component("BtwPagination", Be), e.component("BtwSidebar", Ne), e.component("BtwTable", Ve), e.component("BtwTabs", qe), e.component("BtwToggleSwitch", Ye);
+  }
+};
+export {
+  H as BtwBadge,
+  F as BtwBreadcrumb,
+  Q as BtwButton,
+  ne as BtwCard,
+  C as BtwDropdownButton,
+  _e as BtwHeader,
+  ye as BtwModal,
+  Be as BtwPagination,
+  Ne as BtwSidebar,
+  Ve as BtwTable,
+  qe as BtwTabs,
+  Ye as BtwToggleSwitch,
+  Fe as default
+};