@open-dcp/vue-basic-components 0.0.1 → 0.0.7

package/dist/dcp-vue-basic-components.es.js

@@ -0,0 +1,658 @@
+import { defineComponent as u, computed as B, withDirectives as E, openBlock as s, createElementBlock as i, normalizeClass as D, createElementVNode as v, withModifiers as M, normalizeStyle as S, renderSlot as l, createCommentVNode as b, vShow as G, ref as C, onMounted as P, watch as N, toDisplayString as k, resolveComponent as m, createBlock as _, withCtx as f, createTextVNode as z, createVNode as y, mergeProps as V, Fragment as x, renderList as F, watchEffect as O, onBeforeUnmount as A, resolveDynamicComponent as R, normalizeProps as j } from "vue";
+const L = {
+  key: 0,
+  class: "dcp-modal__header"
+}, q = { class: "dcp-modal__content" }, H = {
+  key: 1,
+  class: "dcp-modal__footer"
+}, U = /* @__PURE__ */ u({
+  __name: "Modal",
+  props: {
+    isActive: { type: Boolean, default: !1 },
+    showClose: { type: Boolean, default: !1 },
+    backgroundClose: { type: Boolean, default: !0 },
+    size: { default: "medium" }
+  },
+  emits: ["update:isActive"],
+  setup(e, { emit: t }) {
+    const o = e, n = t, a = B(() => ({
+      "dcp-modal--active": o.isActive,
+      [`dcp-modal--${o.size}`]: typeof o.size == "string"
+    })), c = B(() => typeof o.size == "number" ? {
+      width: `${o.size}px`,
+      maxWidth: `${o.size}px`
+    } : {}), r = () => {
+      n("update:isActive", !1);
+    }, h = () => {
+      o.backgroundClose && r();
+    };
+    return (p, $) => E((s(), i("div", {
+      class: D(["dcp-modal", a.value]),
+      onClick: h
+    }, [
+      v("div", {
+        class: "dcp-modal__dialog",
+        style: S(c.value),
+        onClick: $[0] || ($[0] = M(() => {
+        }, ["stop"]))
+      }, [
+        p.$slots.header ? (s(), i("div", L, [
+          l(p.$slots, "header")
+        ])) : b("", !0),
+        v("div", q, [
+          l(p.$slots, "default", {}, () => [
+            l(p.$slots, "content")
+          ])
+        ]),
+        p.$slots.footer ? (s(), i("div", H, [
+          l(p.$slots, "footer")
+        ])) : b("", !0),
+        e.showClose ? (s(), i("button", {
+          key: 2,
+          class: "dcp-modal__close",
+          onClick: r
+        }, "×")) : b("", !0)
+      ], 4)
+    ], 2)), [
+      [G, e.isActive]
+    ]);
+  }
+}), W = u({
+  name: "DcpChip",
+  props: {
+    isEditable: {
+      type: Boolean,
+      default: !1
+    },
+    isRemovable: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:content", "remove", "click"],
+  setup(e, { emit: t, slots: o }) {
+    const n = C(null), a = C("");
+    return P(() => {
+      const d = o.default ? o.default() : [];
+      d.length > 0 && d[0].type === "text" && (a.value = String(d[0].children));
+    }), N(
+      () => o.default ? o.default() : [],
+      // Safely access the default slot
+      (d) => {
+        d && d.length > 0 && d[0].type === "text" && (a.value = String(d[0].children));
+      }
+    ), {
+      chipInput: n,
+      chipContent: a,
+      focusInput: () => {
+        e.isEditable && n.value && n.value.focus();
+      },
+      onInput: (d) => {
+        const w = d.target;
+        t("update:content", w.value);
+      },
+      onBlur: () => {
+      },
+      removeChip: (d) => {
+        d.stopPropagation(), t("remove");
+      },
+      handleClick: (d) => {
+        t("click", d);
+      }
+    };
+  }
+}), g = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [n, a] of t)
+    o[n] = a;
+  return o;
+}, X = {
+  key: 0,
+  class: "chip-content"
+}, J = ["value"];
+function K(e, t, o, n, a, c) {
+  return s(), i("div", {
+    class: D(["dcp-chip", { editable: e.isEditable, removable: e.isRemovable }]),
+    onClick: t[3] || (t[3] = (...r) => e.handleClick && e.handleClick(...r))
+  }, [
+    e.isEditable ? (s(), i("input", {
+      key: 1,
+      class: "chip-edit",
+      type: "text",
+      value: e.chipContent,
+      onInput: t[0] || (t[0] = (...r) => e.onInput && e.onInput(...r)),
+      onBlur: t[1] || (t[1] = (...r) => e.onBlur && e.onBlur(...r)),
+      ref: "chipInput"
+    }, null, 40, J)) : (s(), i("div", X, [
+      l(e.$slots, "default")
+    ])),
+    e.isRemovable ? (s(), i("button", {
+      key: 2,
+      class: "chip-close",
+      "aria-label": "Remove chip",
+      onClick: t[2] || (t[2] = (...r) => e.removeChip && e.removeChip(...r))
+    }, " × ")) : b("", !0)
+  ], 2);
+}
+const Q = /* @__PURE__ */ g(W, [["render", K]]), Y = {}, Z = { class: "dcp-card" }, ee = {
+  key: 0,
+  class: "dcp-card-header"
+}, te = { class: "dcp-card-body" }, oe = {
+  key: 1,
+  class: "dcp-card-footer"
+};
+function ne(e, t) {
+  return s(), i("div", Z, [
+    e.$slots.header ? (s(), i("div", ee, [
+      l(e.$slots, "header")
+    ])) : b("", !0),
+    v("div", te, [
+      l(e.$slots, "default")
+    ]),
+    e.$slots.footer ? (s(), i("div", oe, [
+      l(e.$slots, "footer")
+    ])) : b("", !0)
+  ]);
+}
+const se = /* @__PURE__ */ g(Y, [["render", ne]]), ae = u({
+  name: "DcpGxpStatus",
+  props: {
+    isGxp: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: null
+      // Default is null to indicate no specific size
+    }
+  },
+  setup(e) {
+    return { sizeClass: B(
+      () => e.size ? `dcp-gxp-status--${e.size}` : null
+    ) };
+  }
+});
+function le(e, t, o, n, a, c) {
+  return s(), i("span", {
+    class: D([
+      "dcp-gxp-status",
+      e.isGxp ? "gxp" : "non-gxp",
+      e.sizeClass
+    ])
+  }, k(e.isGxp ? "" : "Non") + "GXP ", 3);
+}
+const ie = /* @__PURE__ */ g(ae, [["render", le]]), de = /* @__PURE__ */ u({
+  __name: "Loader",
+  props: {
+    indeterminate: {},
+    size: {},
+    width: {},
+    value: {},
+    visibleValue: {}
+  },
+  setup(e) {
+    return (t, o) => {
+      const n = m("v-progress-circular");
+      return s(), _(n, {
+        indeterminate: e.indeterminate,
+        size: e.size,
+        class: "text-primary",
+        "model-value": e.value,
+        width: e.width
+      }, {
+        default: f(() => [
+          z(k(e.visibleValue), 1)
+        ]),
+        _: 1
+      }, 8, ["indeterminate", "size", "model-value", "width"]);
+    };
+  }
+}), ce = {}, re = { class: "dc-content_title" };
+function ue(e, t) {
+  return s(), i("h1", re, [
+    l(e.$slots, "default")
+  ]);
+}
+const pe = /* @__PURE__ */ g(ce, [["render", ue]]), fe = { class: "dc-content flex flex-col" }, me = { class: "dc-content_header" }, ve = /* @__PURE__ */ u({
+  __name: "BasicPage",
+  props: {
+    p: {
+      type: Number,
+      default: 4
+    },
+    rounded: {
+      type: Number,
+      default: 5
+    },
+    hasFooter: {
+      type: Boolean,
+      default: !1
+    },
+    background: {
+      type: String,
+      required: !1
+    },
+    noGrow: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const t = e, o = B(() => [
+      "paper-content",
+      `p-${t.p}`,
+      `rounded-${t.rounded}`,
+      t.noGrow ? "" : "flex-grow",
+      t.hasFooter ? "mb-6" : ""
+    ].filter(Boolean));
+    return (n, a) => (s(), i("div", fe, [
+      v("header", me, [
+        l(n.$slots, "pageHeader")
+      ]),
+      l(n.$slots, "nonPaperContent"),
+      v("div", {
+        class: D(o.value),
+        style: S({ background: e.background })
+      }, [
+        l(n.$slots, "default")
+      ], 6)
+    ]));
+  }
+}), _e = {}, be = { class: "dc-content page-editor page-editor--with-bottom-bar" }, he = { class: "dc-content_header" }, $e = { class: "page-editor_content" }, ye = { class: "ml-auto" };
+function ge(e, t) {
+  const o = m("v-toolbar");
+  return s(), i("div", be, [
+    v("header", he, [
+      l(e.$slots, "pageHeader")
+    ]),
+    v("div", $e, [
+      l(e.$slots, "default")
+    ]),
+    y(o, { class: "dc-content_footer page-editor_bottom-bar shadow-xs" }, {
+      default: f(() => [
+        v("div", ye, [
+          l(e.$slots, "pageFooter")
+        ])
+      ]),
+      _: 3
+    })
+  ]);
+}
+const Be = /* @__PURE__ */ g(_e, [["render", ge]]), Ce = { class: "page-create-menu" }, De = {
+  key: 0,
+  class: "page-create-menu_buttons"
+}, ke = /* @__PURE__ */ u({
+  __name: "DcpPageCreateMenu",
+  props: {
+    buttonTooltip: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    const t = C(!1);
+    function o() {
+      t.value = !t.value;
+    }
+    return (n, a) => {
+      const c = m("v-btn"), r = m("v-tooltip");
+      return s(), i("div", Ce, [
+        t.value ? (s(), i("div", De, [
+          l(n.$slots, "default")
+        ])) : b("", !0),
+        y(r, {
+          disabled: e.buttonTooltip === "",
+          text: e.buttonTooltip,
+          location: "top"
+        }, {
+          activator: f(({ props: h }) => [
+            y(c, V(h, {
+              variant: "flat",
+              class: "page-create-menu_button-show-extra",
+              color: t.value ? "primary" : "",
+              onClick: a[0] || (a[0] = (p) => o())
+            }), {
+              default: f(() => [...a[1] || (a[1] = [
+                z(" + ", -1)
+              ])]),
+              _: 1
+            }, 16, ["color"])
+          ]),
+          _: 1
+        }, 8, ["disabled", "text"])
+      ]);
+    };
+  }
+}), I = /* @__PURE__ */ u({
+  __name: "DcpDefaultButton",
+  props: {
+    size: {
+      type: String,
+      default: "default"
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (t, o) => {
+      const n = m("v-btn");
+      return s(), _(n, {
+        variant: "elevated",
+        type: "button",
+        disabled: e.disabled,
+        size: e.size,
+        color: e.color
+      }, {
+        default: f(() => [
+          l(t.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["disabled", "size", "color"]);
+    };
+  }
+}), ze = { class: "flex row dcp-page-switcher" }, we = /* @__PURE__ */ u({
+  __name: "DcpPageSwitcher",
+  props: {
+    buttons: {
+      type: Array,
+      required: !0
+    }
+  },
+  setup(e) {
+    return C(!1), (t, o) => (s(), i("div", ze, [
+      (s(!0), i(x, null, F(e.buttons, (n) => (s(), _(I, {
+        onClick: (a) => n.click(),
+        disabled: n.disabled && n.disabled() || !1,
+        color: n.active() ? "primary" : "default",
+        key: n.label
+      }, {
+        default: f(() => [
+          z(k(n.label), 1)
+        ]),
+        _: 2
+      }, 1032, ["onClick", "disabled", "color"]))), 128))
+    ]));
+  }
+}), Se = { class: "sidebar-drawer_header p-3 d-flex align-content-center justify-content-between" }, Pe = /* @__PURE__ */ u({
+  __name: "SideBarHeader",
+  props: {
+    closeButton: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["close"],
+  setup(e) {
+    return (t, o) => {
+      const n = m("v-icon");
+      return s(), i("div", Se, [
+        l(t.$slots, "default"),
+        y(n, {
+          class: "pointer close-help-button",
+          icon: "mdi-close",
+          onClick: o[0] || (o[0] = (a) => t.$emit("close"))
+        })
+      ]);
+    };
+  }
+}), Ve = /* @__PURE__ */ u({
+  __name: "SideBar",
+  props: {
+    modelValue: Boolean,
+    // Allows v-model binding
+    title: String,
+    openOnMounted: {
+      type: Boolean,
+      default: !1
+    },
+    location: {
+      type: String,
+      default: "right"
+    },
+    width: {
+      type: Number,
+      default: 300
+    },
+    sidebarComponent: {
+      type: Object,
+      required: !1
+    },
+    sidebarProps: {
+      type: Object,
+      default: () => ({})
+    },
+    isResizing: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(e, { emit: t }) {
+    const o = t, n = B(() => {
+      const p = {};
+      return a.isResizing && (p.transition = "none !important"), p;
+    }), a = e, c = C(!1);
+    O(() => {
+      c.value = a.modelValue;
+    }), A(() => {
+      c.value = !1, o("close");
+    }), P(() => {
+      a.openOnMounted && setTimeout(() => {
+        c.value = !0;
+      }, 100);
+    });
+    const r = () => {
+      c.value = !1, o("update:modelValue", !1), o("close");
+    }, h = () => {
+      c.value || o("close");
+    };
+    return (p, $) => {
+      const d = m("v-navigation-drawer"), w = m("v-layout");
+      return s(), _(w, null, {
+        default: f(() => [
+          y(d, {
+            modelValue: c.value,
+            "onUpdate:modelValue": $[0] || ($[0] = (T) => c.value = T),
+            location: e.location,
+            temporary: "",
+            width: e.width,
+            style: S(n.value),
+            onTransitionend: h
+          }, {
+            default: f(() => [
+              y(Pe, { onClose: r }, {
+                default: f(() => [
+                  z(k(e.title), 1)
+                ]),
+                _: 1
+              }),
+              e.sidebarComponent ? (s(), _(R(e.sidebarComponent), j(V({ key: 0 }, e.sidebarProps)), null, 16)) : l(p.$slots, "default", {}, void 0, void 0, 1)
+            ]),
+            _: 3
+          }, 8, ["modelValue", "location", "width", "style"])
+        ]),
+        _: 3
+      });
+    };
+  }
+}), Ie = u({
+  name: "DcpButton",
+  props: {
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    buttonClass() {
+      return ["dcp-button", this.variant, { disabled: this.disabled }];
+    }
+  }
+}), Te = ["disabled"];
+function Ee(e, t, o, n, a, c) {
+  return s(), i("button", {
+    class: D(e.buttonClass),
+    disabled: e.disabled
+  }, [
+    l(e.$slots, "default")
+  ], 10, Te);
+}
+const Me = /* @__PURE__ */ g(Ie, [["render", Ee]]), Ge = /* @__PURE__ */ u({
+  __name: "DcpFlatButton",
+  props: {
+    size: {
+      type: String,
+      default: "default"
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (t, o) => {
+      const n = m("v-btn");
+      return s(), _(n, {
+        variant: "flat",
+        type: "button",
+        disabled: e.disabled,
+        size: e.size,
+        color: e.color
+      }, {
+        default: f(() => [
+          l(t.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["disabled", "size", "color"]);
+    };
+  }
+}), Ne = /* @__PURE__ */ u({
+  __name: "DcpIconButton",
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: ""
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    rounded: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    return (t, o) => {
+      const n = m("v-btn");
+      return s(), _(n, {
+        icon: e.icon,
+        color: e.color,
+        rounded: e.rounded,
+        variant: e.variant,
+        size: e.size,
+        disabled: e.disabled
+      }, null, 8, ["icon", "color", "rounded", "variant", "size", "disabled"]);
+    };
+  }
+}), xe = /* @__PURE__ */ u({
+  __name: "DcpTextButton",
+  props: {
+    size: {
+      type: String,
+      default: "default"
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (t, o) => {
+      const n = m("v-btn");
+      return s(), _(n, {
+        color: e.color,
+        size: e.size,
+        disabled: e.disabled,
+        variant: "text"
+      }, {
+        default: f(() => [
+          l(t.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["color", "size", "disabled"]);
+    };
+  }
+}), Fe = {
+  DcpButton: Me,
+  DcpModal: U,
+  DcpLoader: de,
+  DcpChip: Q,
+  DcpCard: se,
+  DcpGxpStatus: ie,
+  DcpBasicPage: ve,
+  DcpEditorPage: Be,
+  DcpPageTitle: pe,
+  DcpPageCreateMenu: ke,
+  DcpDefaultButton: I,
+  DcpFlatButton: Ge,
+  DcpIconButton: Ne,
+  DcpTextButton: xe,
+  DcpPageSwitcher: we,
+  DcpSideBar: Ve
+}, Ae = {
+  install(e) {
+    for (const [t, o] of Object.entries(Fe))
+      e.component(t, o);
+  }
+};
+export {
+  ve as DcpBasicPage,
+  Me as DcpButton,
+  se as DcpCard,
+  Q as DcpChip,
+  I as DcpDefaultButton,
+  Be as DcpEditorPage,
+  Ge as DcpFlatButton,
+  ie as DcpGxpStatus,
+  Ne as DcpIconButton,
+  de as DcpLoader,
+  U as DcpModal,
+  ke as DcpPageCreateMenu,
+  we as DcpPageSwitcher,
+  pe as DcpPageTitle,
+  Ve as DcpSideBar,
+  xe as DcpTextButton,
+  Ae as default
+};

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import { default as DcpModal } from './components/Modal.vue';
+import { default as DcpChip } from './components/Chip.vue';
+import { default as DcpCard } from './components/Card.vue';
+import { default as DcpGxpStatus } from './components/GxpStatus.vue';
+import { default as DcpLoader } from './components/Loader.vue';
+import { default as DcpPageTitle } from './components/pages/PageTitle.vue';
+import { default as DcpBasicPage } from './components/pages/BasicPage.vue';
+import { default as DcpEditorPage } from './components/pages/EditorPage.vue';
+import { default as DcpPageCreateMenu } from './components/pages/DcpPageCreateMenu.vue';
+import { default as DcpPageSwitcher } from './components/pages/DcpPageSwitcher.vue';
+import { default as DcpSideBar } from './components/pages/components/sidebar/SideBar.vue';
+import { default as DcpButton } from './components/Button.vue';
+import { default as DcpDefaultButton } from './components/buttons/DcpDefaultButton.vue';
+import { default as DcpFlatButton } from './components/buttons/DcpFlatButton.vue';
+import { default as DcpIconButton } from './components/buttons/DcpIconButton.vue';
+import { default as DcpTextButton } from './components/buttons/DcpTextButton.vue';
+declare const _default: {
+    install(app: any): void;
+};
+export default _default;
+export { DcpButton, DcpModal, DcpLoader, DcpChip, DcpCard, DcpGxpStatus, DcpBasicPage, DcpPageTitle, DcpPageCreateMenu, DcpDefaultButton, DcpFlatButton, DcpIconButton, DcpTextButton, DcpPageSwitcher, DcpEditorPage, DcpSideBar, };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAGhD,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAC5D,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAC5D,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAC9D,OAAO,iBAAiB,MAAM,0CAA0C,CAAC;AACzE,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAErE,OAAO,UAAU,MAAM,mDAAmD,CAAC;AAG3E,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,gBAAgB,MAAM,2CAA2C,CAAC;AACzE,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,aAAa,MAAM,wCAAwC,CAAC;;iBA0BpD,GAAG;;AADlB,wBAME;AAGF,OAAO,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EAET,OAAO,EACP,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,YAAY,EAEZ,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,aAAa,EACb,eAAe,EACf,aAAa,EAEb,UAAU,GACX,CAAC"}