@orchidui/core 0.0.1 → 0.2.0

package/dist/OcFeatureOverviewCard-RVyrWLVW.js

@@ -0,0 +1,71 @@
+import { openBlock as t, createElementBlock as i, createElementVNode as n, toDisplayString as s, createCommentVNode as a, Fragment as m, renderList as d, createBlock as p, unref as l, createVNode as u } from "vue";
+import "dayjs";
+import "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
+import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { _ as f } from "./OcIcon-CJgBICxh.js";
+import { _ as v } from "./OcChip-B1hm2Qni.js";
+/* empty css                                                                    */
+import "libphonenumber-js";
+/* empty css                                                                  */
+import "v-calendar";
+/* empty css                                                                  */
+import "./Cropper.js";
+import "vue-draggable-next";
+import "@popperjs/core";
+const x = { class: "send-money-initial-state relative border rounded" }, h = { class: "z-10 p-7 flex flex-col relative" }, y = { class: "text-xl font-medium mb-4" }, g = {
+  key: 0,
+  class: "text-oc-text-400 mb-10"
+}, k = {
+  key: 1,
+  class: "flex gap-4 flex-wrap"
+}, b = { class: "text-sm font-medium" }, w = {
+  __name: "OcFeatureOverviewCard",
+  props: {
+    title: {
+      type: String,
+      required: !0
+    },
+    description: {
+      type: String,
+      default: ""
+    },
+    features: {
+      type: Array,
+      default: () => [],
+      validator: (e) => e.every((o) => "title" in o && "icon" in o)
+    }
+  },
+  setup(e) {
+    return (o, O) => {
+      var c;
+      return t(), i("div", x, [
+        n("div", h, [
+          n("h2", y, s(e.title), 1),
+          e.description ? (t(), i("p", g, s(e.description), 1)) : a("", !0),
+          (c = e.features) != null && c.length ? (t(), i("div", k, [
+            (t(!0), i(m, null, d(e.features, (r) => (t(), i("div", {
+              key: r.title,
+              class: "rounded bg-white flex flex-col gap-2 p-6 items-center justify-center relative"
+            }, [
+              r.comingSoon ? (t(), p(l(v), {
+                key: 0,
+                variant: "accent-2",
+                label: "Coming soon",
+                class: "absolute top-3 left-3"
+              })) : a("", !0),
+              u(l(f), {
+                name: r.icon,
+                height: "56",
+                width: "56"
+              }, null, 8, ["name"]),
+              n("span", b, s(r.title), 1)
+            ]))), 128))
+          ])) : a("", !0)
+        ])
+      ]);
+    };
+  }
+}, L = /* @__PURE__ */ _(w, [["__scopeId", "data-v-d658d1d3"]]);
+export {
+  L as O
+};

package/dist/OcFloatContent-BIKQOxSw.js

@@ -0,0 +1,142 @@
+import { ref as w, openBlock as e, createElementBlock as i, normalizeClass as V, createElementVNode as r, renderSlot as d, createTextVNode as k, toDisplayString as x, createCommentVNode as n, createVNode as m, unref as l, withCtx as u, createBlock as p, mergeProps as f, Fragment as y, renderList as v } from "vue";
+import "dayjs";
+import { D as O } from "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
+import { _ as g } from "./OcIcon-CJgBICxh.js";
+/* empty css                                                                    */
+import "libphonenumber-js";
+/* empty css                                                                  */
+import "v-calendar";
+/* empty css                                                                  */
+import "./Cropper.js";
+import "vue-draggable-next";
+import { _ as b } from "./OcDropdownItem-DAElmzEu.js";
+import "@popperjs/core";
+import { _ as $ } from "./OcCopyTooltip.vue_vue_type_script_setup_true_lang-S2RAfV_g.js";
+const C = { key: 0 }, S = { class: "flex border-oc-gray-200 gap-x-9 justify-between p-5 items-start border-b sticky bg-oc-bg-light top-0" }, B = { class: "flex flex-col gap-y-1 max-w-[300px]" }, N = { class: "text-lg font-medium truncate" }, j = { class: "flex gap-3 items-center" }, D = {
+  key: 0,
+  class: "text-sm text-oc-text-300 truncate"
+}, P = { class: "flex items-center gap-3" }, z = { class: "p-[6px] rounded cursor-pointer text-oc-gray-500 hover:bg-gray-100 hover:text-oc-text" }, E = { class: "p-2 border-b border-gray-200" }, F = {
+  key: 0,
+  class: "p-2"
+}, Y = {
+  __name: "OcFloatContent",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    isClose: {
+      type: Boolean,
+      default: !0
+    },
+    title: String,
+    description: String,
+    dropdownOptions: {
+      type: Object
+    },
+    dropdownProps: {
+      type: Object,
+      default: () => ({})
+    },
+    position: {
+      type: String,
+      validator: (t) => ["left", "right"].includes(t),
+      default: "right"
+    }
+  },
+  emits: ["update:model-value"],
+  setup(t, { emit: L }) {
+    const h = w(!1);
+    return (s, a) => (e(), i("div", {
+      class: V(["fixed top-0 bottom-0 shadow-xl bg-oc-bg-light transition-all h-full z-50 overflow-y-auto", {
+        "right-0": t.modelValue && t.position === "right",
+        "right-[-999px] w-0": !t.modelValue && t.position === "right",
+        "left-0": t.modelValue && t.position === "left",
+        "left-[-999px] w-0": !t.modelValue && t.position === "left"
+      }])
+    }, [
+      t.modelValue ? (e(), i("div", C, [
+        r("div", S, [
+          d(s.$slots, "header", {}, () => [
+            r("div", B, [
+              r("span", N, [
+                d(s.$slots, "title", {}, () => [
+                  k(x(t.title), 1)
+                ])
+              ]),
+              d(s.$slots, "description", {}, () => [
+                r("div", j, [
+                  t.description ? (e(), i("span", D, x(t.description), 1)) : n("", !0),
+                  m(l($), {
+                    value: t.description,
+                    "tooltip-options": { strategy: "fixed" }
+                  }, {
+                    default: u(({ isShow: o }) => [
+                      m(l(g), {
+                        width: "14",
+                        height: "14",
+                        class: "cursor-pointer text-oc-text-400",
+                        name: "copy"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["value"])
+                ])
+              ])
+            ]),
+            r("div", P, [
+              t.dropdownOptions ? (e(), p(l(O), f({
+                key: 0,
+                modelValue: h.value,
+                "onUpdate:modelValue": a[0] || (a[0] = (o) => h.value = o),
+                "popper-options": { strategy: "fixed" },
+                placement: "bottom",
+                class: "text-sm"
+              }, t.dropdownProps), {
+                menu: u(() => [
+                  r("div", E, [
+                    (e(!0), i(y, null, v(t.dropdownOptions.top, (o, c) => (e(), p(l(b), f({
+                      key: c,
+                      ref_for: !0
+                    }, o), null, 16))), 128))
+                  ]),
+                  t.dropdownOptions.bottom ? (e(), i("div", F, [
+                    (e(!0), i(y, null, v(t.dropdownOptions.bottom, (o, c) => (e(), p(l(b), f({
+                      key: c,
+                      ref_for: !0
+                    }, o), null, 16))), 128))
+                  ])) : n("", !0)
+                ]),
+                default: u(() => [
+                  r("div", z, [
+                    m(l(g), {
+                      name: "dots-vertical",
+                      width: "20",
+                      height: "20"
+                    })
+                  ])
+                ]),
+                _: 1
+              }, 16, ["modelValue"])) : n("", !0),
+              t.isClose ? (e(), i("div", {
+                key: 1,
+                class: "p-[6px] rounded cursor-pointer text-oc-gray-500 hover:bg-gray-100 hover:text-oc-text",
+                onClick: a[1] || (a[1] = (o) => s.$emit("update:model-value", !1))
+              }, [
+                m(l(g), {
+                  name: "x",
+                  width: "20",
+                  height: "20"
+                })
+              ])) : n("", !0)
+            ])
+          ])
+        ]),
+        d(s.$slots, "bottom")
+      ])) : n("", !0)
+    ], 2));
+  }
+};
+export {
+  Y as _
+};

package/dist/OcFormBuilder-CRXWtt8I.js

@@ -0,0 +1,177 @@
+import { computed as S, ref as m, watch as v, onMounted as U, openBlock as _, createElementBlock as y, normalizeClass as F, normalizeStyle as K, Fragment as V, renderList as x, createBlock as A, resolveDynamicComponent as D, mergeProps as N, renderSlot as P, createCommentVNode as G } from "vue";
+import "dayjs";
+import { a as q } from "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
+/* empty css                                                                    */
+import { _ as z } from "./OcCardInput-BFE4Xu-S.js";
+import { _ as L } from "./OcCheckboxesGroup-CLbquUO2.js";
+import { _ as R } from "./OcInput-tcRxG3Y2.js";
+import { _ as H } from "./OcPhoneInput-AC6BgQhN.js";
+import { _ as J } from "./OcRadioGroup-DgfdWJos.js";
+import { _ as Q } from "./OcRangeInput-C-hoHFhr.js";
+import { _ as W } from "./OcOption-DK2FBGq7.js";
+import { T as X } from "./OcToggle-C0wTjM_Y.js";
+import { _ as Y } from "./OcLinkInput-C2ixk-gk.js";
+import { _ as Z } from "./OcTextArea-BpV1Bnj_.js";
+import { _ as ee } from "./DatePicker-D3w435Ml.js";
+import { _ as ae } from "./OcTimePicker-B61MCi0D.js";
+import { S as te } from "./OcSlider-Bsi-ckbP.js";
+import { _ as se } from "./OcSectionItem-BFgxO3se.js";
+import { _ as ne } from "./OcSelectOptions-BQlG_EUA.js";
+import "./Cropper.js";
+import "vue-draggable-next";
+import { _ as ie } from "./OcNumberInput.vue_vue_type_script_setup_true_lang-C4EXUIUe.js";
+import "@popperjs/core";
+const Ke = {
+  __name: "OcFormBuilder",
+  props: {
+    id: {
+      type: String,
+      required: !0
+    },
+    jsonForm: {
+      type: Array
+    },
+    /**
+     * Grid needs to be defined in the following format:
+     * `{`
+     *   `[Responsive size (xs, sm, md, lg, xl, xxl)]: {`
+     *     `area: [Grid area definition (names of areas in order)],`
+     *     `rows: [Count and size of rows i.e: 'auto' | '100%' | ...],`
+     *     `columns: [Count and size of columns i.e: '33% 33% 33%'],`
+     *   `}`
+     * `}`
+     */
+    grid: {
+      type: Object,
+      default: null
+    },
+    class: String,
+    errors: {
+      type: Object
+    },
+    values: {
+      type: Object,
+      required: !0
+    },
+    previewMode: String
+    // only for store design
+  },
+  emits: ["onUpdate"],
+  setup(l, { emit: E }) {
+    const s = l, M = E, h = (e, t) => {
+      M("onUpdate", e, t);
+    }, f = {
+      CardInput: z,
+      CheckboxesGroup: L,
+      Input: R,
+      NumberInput: ie,
+      LinkInput: Y,
+      Select: W,
+      TextArea: Z,
+      Toggle: X,
+      RadioGroup: J,
+      TimePicker: ae,
+      DatePicker: ee,
+      Checkbox: q,
+      Slider: te,
+      RangeInput: Q,
+      PhoneInput: H,
+      SectionItem: se,
+      SelectOptions: ne
+    }, g = (e) => f[e] ? f[e] : null, O = S(() => {
+      const e = (a) => a.split(`
+`).map((i) => i.trim()).filter(Boolean).map((i) => `"${i}"`).join(" "), t = {};
+      return Object.entries(s.grid).forEach(([a, i]) => {
+        Object.entries(i).forEach(([r, p]) => {
+          t[`--grid-${a}-${r}`] = r === "area" ? e(p) : p;
+        });
+      }), t;
+    }), w = (e) => typeof e == "object" ? e[0].key : e, T = (e) => `grid-area: ${w(e)}`, b = S(() => s.class), n = m({}), c = m({}), u = m({}), o = (e) => typeof e == "object" ? e[0].key : e, d = (e) => {
+      s.jsonForm.forEach((t) => {
+        var a;
+        if (typeof t.name == "object") {
+          let i = null;
+          t.name.forEach((r) => {
+            e[r.key] && (i ? i.push(e[r.key]) : i = [e[r.key]]);
+          }), n.value[o(t.name)] = i, $(t);
+        } else
+          (a = t.props) != null && a.parentKey ? (n.value[t.props.parentKey] = e[t.props.parentKey] ?? {}, n.value[t.props.parentKey][t.name] = e[t.props.parentKey][t.name] ?? "") : n.value[t.name] = e[t.name] ?? "", $(t);
+      });
+    }, j = () => {
+      s.jsonForm.forEach((e) => {
+        if (typeof e.name == "object") {
+          let t = [];
+          e.name.forEach((a) => {
+            s.errors[a.key] && t.push(s.errors[a.key]);
+          }), c.value[o(e.name)] = t.join(",");
+        } else
+          c.value[e.name] = s.errors[e.name] ?? "";
+      });
+    }, $ = (e) => {
+      if (e.show_if || e.show_if_preview) {
+        let t = e.class ? e.class : "";
+        e.show_if ? e.show_if_value !== void 0 ? e.show_if_value !== n.value[e.show_if] && (t = t + " hidden") : e.show_if_not !== void 0 ? e.show_if_not === n.value[e.show_if] && (t = t + " hidden") : e.show_if_min !== void 0 && (isNaN(parseInt(n.value[e.show_if])) ? 1 : parseInt(n.value[e.show_if])) < parseInt(e.show_if_min) && (t = t + " hidden") : e.show_if_preview && (e.show_if_preview_only !== void 0 ? e.show_if_preview_only !== s.previewMode && (t = t + " hidden") : e.show_if_preview_not !== void 0 && e.show_if_preview_not === s.previewMode && (t = t + " hidden")), typeof e.name == "object" ? u.value[o(e.name)] = t : u.value[e.name] = t;
+      } else
+        u.value[e.name] = e.class ? e.class : "";
+    };
+    return v(
+      () => s.values,
+      (e) => {
+        d(e);
+      },
+      {
+        deep: !0
+      }
+    ), v(
+      () => s.errors,
+      (e) => {
+        j();
+      },
+      {
+        deep: !0
+      }
+    ), v(
+      () => s.previewMode,
+      () => {
+        d(s.values);
+      }
+    ), U(() => {
+      d(s.values), j(s.errors);
+    }), (e, t) => Object.values(n.value).length > 0 ? (_(), y("div", {
+      key: 0,
+      class: F(l.grid ? `responsive-smart-form-grid ${b.value}` : b.value),
+      style: K(l.grid ? O.value : "")
+    }, [
+      (_(!0), y(V, null, x(l.jsonForm, (a) => {
+        var i, r, p, k, C, I;
+        return _(), y("div", {
+          key: w(a.name),
+          style: K(l.grid ? T(a.name) : ""),
+          class: F([
+            a.type !== "Children" ? u.value[typeof a.name == "object" ? o(a.name) : a.name] : "",
+            a.class
+          ])
+        }, [
+          g(a.type) ? (_(), A(D(g(a.type)), N({
+            key: 0,
+            ref_for: !0
+          }, a.props, {
+            "model-value": (i = a.props) != null && i.parentKey ? (p = (r = n.value) == null ? void 0 : r[a.props.parentKey]) == null ? void 0 : p[a.name] : n.value[typeof a.name == "object" ? o(a.name) : a.name],
+            "error-message": c.value[typeof a.name == "object" ? o(a.name) : a.name],
+            "onUpdate:modelValue": (B) => h(a, B)
+          }), null, 16, ["model-value", "error-message", "onUpdate:modelValue"])) : P(e.$slots, a.type, {
+            key: 1,
+            formId: l.id,
+            form: a,
+            value: (k = a.props) != null && k.parentKey ? (I = (C = n.value) == null ? void 0 : C[a.props.parentKey]) == null ? void 0 : I[a.name] : n.value[typeof a.name == "object" ? o(a.name) : a.name],
+            error: c.value[typeof a.name == "object" ? o(a.name) : a.name],
+            onUpdate: h
+          })
+        ], 6);
+      }), 128))
+    ], 6)) : G("", !0);
+  }
+};
+export {
+  Ke as _
+};

package/dist/OcGroupOptions-ChGJvTXl.js

@@ -0,0 +1,16 @@
+import { openBlock as o, createElementBlock as r, createElementVNode as s, toDisplayString as l, renderSlot as c } from "vue";
+const n = { class: "flex flex-col" }, p = { class: "px-3 pt-3 pb-2 border-y border-white text-oc-text uppercase text-xs font-medium" }, d = {
+  __name: "OcGroupOptions",
+  props: {
+    label: String
+  },
+  setup(e) {
+    return (t, a) => (o(), r("div", n, [
+      s("div", p, l(e.label), 1),
+      c(t.$slots, "default")
+    ]));
+  }
+};
+export {
+  d as _
+};

package/dist/OcHorizontalProgressbar.vue_vue_type_script_setup_true_lang-4eVgPDi5.js

@@ -0,0 +1,32 @@
+import { defineComponent as l, openBlock as r, createElementBlock as n, createElementVNode as t, toDisplayString as o, normalizeStyle as a } from "vue";
+const s = { class: "flex items-center gap-x-3" }, c = { class: "text-oc-text-400 text-sm shrink-0" }, i = { class: "w-full rounded-full bg-oc-gray-100 h-[8px] overflow-hidden" }, p = /* @__PURE__ */ l({
+  __name: "OcHorizontalProgressbar",
+  props: {
+    label: {
+      type: String,
+      default: ""
+    },
+    max: {
+      type: Number,
+      default: 0
+    },
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(e) {
+    return (d, u) => (r(), n("div", s, [
+      t("span", c, o(e.label), 1),
+      t("div", i, [
+        t("div", {
+          class: "h-[8px] rounded-l-full bg-oc-primary transition-all",
+          style: a({ width: e.current / e.max * 100 + "%" })
+        }, null, 4)
+      ])
+    ]));
+  }
+});
+export {
+  p as _
+};

package/dist/OcIcon-CJgBICxh.js

@@ -0,0 +1,63 @@
+import { ref as w, onMounted as h, watch as a, openBlock as d, createElementBlock as l } from "vue";
+const u = ["width", "height", "viewBox"], g = {
+  __name: "OcIcon",
+  props: {
+    path: {
+      type: String,
+      default: "/icons/orchidui"
+    },
+    name: {
+      type: String,
+      required: !0
+    },
+    width: {
+      type: String,
+      default: "24"
+    },
+    height: {
+      type: String,
+      default: "24"
+    }
+  },
+  setup(s) {
+    const t = s, o = w(null), c = (n) => {
+      const e = document.createElement("div");
+      e.innerHTML = n, e.querySelector("svg") && (e.querySelector("svg").removeAttribute("width"), e.querySelector("svg").removeAttribute("height"), o.value.innerHTML = e.innerHTML), e.remove();
+    }, r = () => {
+      let n = "";
+      window.oc_icons && (n = JSON.parse(window.oc_icons).find((i) => i.name === t.name)), n ? o.value && c(n.svg) : fetch(`${t.path}/${t.name}.svg`).then((e) => e.status === 200 ? e.text() : "").then((e) => {
+        if (e && o.value) {
+          if (window.oc_icons) {
+            let i = JSON.parse(window.oc_icons);
+            window.oc_icons = JSON.stringify([
+              ...i,
+              {
+                name: t.name,
+                svg: e
+              }
+            ]);
+          }
+          c(e);
+        }
+      });
+    };
+    return h(() => {
+      r();
+    }), a(
+      () => t.name,
+      () => {
+        r();
+      }
+    ), (n, e) => (d(), l("svg", {
+      ref_key: "iconRef",
+      ref: o,
+      width: `${t.width}px`,
+      height: `${t.height}px`,
+      viewBox: `0 0 ${t.width} ${t.height}`,
+      xmlns: "http://www.w3.org/2000/svg"
+    }, null, 8, u));
+  }
+};
+export {
+  g as _
+};

package/dist/OcInfoCard-DpYUZOMZ.js

@@ -0,0 +1,81 @@
+import { useSlots as x, openBlock as o, createElementBlock as i, normalizeClass as r, createElementVNode as a, toDisplayString as c, createBlock as u, unref as s, withCtx as m, createVNode as d, createCommentVNode as l, renderSlot as n } from "vue";
+import "dayjs";
+import { T as g } from "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
+import { _ as p } from "./OcIcon-CJgBICxh.js";
+/* empty css                                                                    */
+import "libphonenumber-js";
+/* empty css                                                                  */
+import "v-calendar";
+/* empty css                                                                  */
+import "./Cropper.js";
+import "vue-draggable-next";
+import "@popperjs/core";
+const b = { class: "uppercase" }, v = { class: "flex flex-col px-3 py-2 text-[12px] text-oc-text-400 font-medium text-sm" }, w = { class: "mb-auto" }, B = {
+  key: 1,
+  class: "absolute top-2 right-2 left-2 bottom-2 bg-white flex items-center justify-center"
+}, O = {
+  __name: "OcInfoCard",
+  props: {
+    isLoading: Boolean,
+    title: String,
+    titleIcon: String,
+    titleIconTooltip: String,
+    titleClass: Object,
+    transparent: Boolean,
+    hover: Boolean,
+    shadow: Boolean,
+    noData: Boolean,
+    noDataDescription: String
+  },
+  setup(t) {
+    const h = x(), f = (e) => !!h[e];
+    return (e, S) => (o(), i("div", {
+      class: r(["border border-gray-200 rounded p-5 flex flex-col grow transition relative", {
+        "border-transparent": t.transparent,
+        "hover:shadow": t.hover,
+        shadow: t.shadow
+      }])
+    }, [
+      t.title && !f("header") ? (o(), i("div", {
+        key: 0,
+        class: r(["flex items-start text-oc-text-400 font-medium text-[10px]", t.titleClass])
+      }, [
+        a("div", b, c(t.title), 1),
+        t.titleIconTooltip ? (o(), u(s(g), {
+          key: 0,
+          "popper-class": "w-max bg-oc-bg",
+          position: "top-start"
+        }, {
+          popper: m(() => [
+            a("div", v, c(t.titleIconTooltip), 1)
+          ]),
+          default: m(() => [
+            d(s(p), {
+              class: "ml-[3px]",
+              name: t.titleIcon,
+              width: "16",
+              height: "16"
+            }, null, 8, ["name"])
+          ]),
+          _: 1
+        })) : l("", !0)
+      ], 2)) : l("", !0),
+      n(e.$slots, "header"),
+      a("div", w, [
+        n(e.$slots, "default")
+      ]),
+      n(e.$slots, "footer"),
+      t.isLoading ? (o(), i("div", B, [
+        d(s(p), {
+          name: "loading-2",
+          width: "32",
+          height: "32",
+          class: "text-oc-text-400 motion-safe:animate-spin"
+        })
+      ])) : l("", !0)
+    ], 2));
+  }
+};
+export {
+  O as _
+};