@orchidui/core 0.0.1 → 0.2.0

package/dist/OcInput-tcRxG3Y2.js

@@ -0,0 +1,227 @@
+import { useAttrs as R, ref as c, computed as f, openBlock as i, createBlock as m, unref as y, createSlots as P, withCtx as v, createElementVNode as d, normalizeClass as x, createElementBlock as r, renderSlot as u, createCommentVNode as s, mergeProps as S, toDisplayString as $, withModifiers as V } from "vue";
+import "dayjs";
+import { _ as M } from "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
+import { _ as k } 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 F = {
+  key: 0,
+  class: "border-r border-gray-200 pr-3 py-3"
+}, L = { class: "flex flex-1 items-baseline gap-x-2" }, O = {
+  key: 0,
+  class: "text-oc-text-300"
+}, T = { class: "flex items-center gap-x-1 w-full" }, q = {
+  key: 0,
+  class: "text-oc-text-300"
+}, E = ["value", "readonly", "placeholder", "disabled", "autocomplete", "inputmode", "type"], X = {
+  __name: "OcInput",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    iconProps: {
+      type: Object,
+      default: () => ({})
+    },
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    hint: {
+      type: String,
+      default: ""
+    },
+    isInlineLabel: {
+      type: Boolean,
+      default: !1
+    },
+    isReadonly: {
+      type: Boolean,
+      default: !1
+    },
+    placeholder: {
+      type: String,
+      default: "Placeholder"
+    },
+    icon: {
+      type: String,
+      default: ""
+    },
+    inputType: {
+      type: String,
+      default: "text"
+    },
+    autocomplete: {
+      type: String,
+      default: "one-time-code"
+    },
+    preFill: {
+      type: String,
+      default: ""
+    },
+    hasError: {
+      type: Boolean,
+      default: !1
+    },
+    isRequired: {
+      type: Boolean,
+      default: !1
+    },
+    labelIcon: {
+      type: String,
+      default: ""
+    },
+    tooltipText: {
+      type: String,
+      default: ""
+    },
+    tooltipOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    hasLeadingSeparator: {
+      type: Boolean,
+      default: !0
+    },
+    inputMode: {
+      type: String,
+      validator: (e) => ["text", "decimal", "numeric", "tel", "search", "email", "url"].includes(e),
+      default: "text"
+    },
+    pattern: {
+      type: String,
+      default: ""
+    },
+    labelClass: {
+      type: String,
+      default: ""
+    },
+    inputClass: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "blur", "focus", "paste"],
+  setup(e, { expose: w }) {
+    const a = e, B = R(), b = c(), n = c(!1);
+    w({
+      focus: () => b.value.focus()
+    });
+    const p = c(!1), C = f(() => [
+      {
+        "shadow-[0_0_0_2px]": p.value && !a.isReadonly
+      },
+      !a.disabled && (a.errorMessage || a.hasError) ? "border-oc-error shadow-oc-error" : "border-oc-gray-200 shadow-oc-gray-200",
+      a.disabled ? "bg-oc-bg-dark pointer-events-none" : "bg-oc-bg-light",
+      a.inputClass
+    ]), I = f(() => {
+      const { class: t, ...l } = B, o = {};
+      return a.pattern && (o.pattern = a.pattern), { inputAttributes: o, ...l };
+    }), g = f(() => a.inputType === "password");
+    return (t, l) => (i(), m(y(M), {
+      label: e.isInlineLabel ? "" : e.label,
+      "label-class": e.labelClass,
+      hint: e.hint,
+      "error-message": e.errorMessage,
+      "is-required": e.isRequired,
+      "label-icon": e.labelIcon,
+      "tooltip-text": e.tooltipText,
+      "tooltip-options": e.tooltipOptions
+    }, P({
+      default: v(() => [
+        d("div", {
+          class: x(["rounded h-[36px] border flex items-center gap-x-3 px-3 cursor-pointer", C.value]),
+          onClick: l[5] || (l[5] = (o) => {
+            var h;
+            return (h = t.$refs.inputRef) == null ? void 0 : h.focus();
+          })
+        }, [
+          t.$slots.trailing ? (i(), r("div", F, [
+            u(t.$slots, "trailing")
+          ])) : s("", !0),
+          u(t.$slots, "icon", {}, () => [
+            e.icon ? (i(), m(y(k), S({
+              key: 0,
+              class: "w-5 h-5 text-oc-text-400",
+              name: e.icon
+            }, e.iconProps), null, 16, ["name"])) : s("", !0)
+          ]),
+          d("div", L, [
+            e.isInlineLabel && e.label ? (i(), r("label", O, $(e.label) + ": ", 1)) : s("", !0),
+            d("div", T, [
+              e.preFill ? (i(), r("span", q, $(e.preFill), 1)) : s("", !0),
+              d("input", S({
+                ref_key: "inputRef",
+                ref: b,
+                value: e.modelValue,
+                readonly: e.isReadonly,
+                placeholder: e.placeholder,
+                disabled: e.disabled,
+                autocomplete: e.autocomplete,
+                inputmode: e.inputMode,
+                class: "h-7 outline-none md:text-base text-lg w-full text-oc-text disabled:bg-transparent disabled:text-oc-text-300 text-ellipsis placeholder:font-normal placeholder:text-oc-text-300 bg-oc-bg-light"
+              }, I.value, {
+                type: g.value && n.value ? "text" : e.inputType,
+                onFocus: l[0] || (l[0] = (o) => {
+                  p.value = !0, t.$emit("focus", o);
+                }),
+                onBlur: l[1] || (l[1] = () => {
+                  p.value = !1, t.$emit("blur");
+                }),
+                onInput: l[2] || (l[2] = (o) => t.$emit("update:modelValue", o.target.value)),
+                onPaste: l[3] || (l[3] = (o) => t.$emit("paste"))
+              }), null, 16, E)
+            ])
+          ]),
+          t.$slots.leading || g.value ? (i(), r("div", {
+            key: 1,
+            class: x({
+              "border-l border-gray-200 pl-3 py-3": e.hasLeadingSeparator
+            })
+          }, [
+            t.$slots.leading ? s("", !0) : (i(), r("span", {
+              key: 0,
+              class: "text-oc-text-200",
+              onClick: l[4] || (l[4] = V((o) => n.value = !n.value, ["prevent"]))
+            }, [
+              (i(), m(y(k), {
+                key: n.value,
+                name: n.value ? "eye-open" : "eye-close",
+                width: "16",
+                height: "16"
+              }, null, 8, ["name"]))
+            ])),
+            u(t.$slots, "leading")
+          ], 2)) : s("", !0)
+        ], 2)
+      ]),
+      _: 2
+    }, [
+      t.$slots.hint ? {
+        name: "hint",
+        fn: v(() => [
+          u(t.$slots, "hint")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["label", "label-class", "hint", "error-message", "is-required", "label-icon", "tooltip-text", "tooltip-options"]));
+  }
+};
+export {
+  X as _
+};

package/dist/OcInputOption-CncASfNt.js

@@ -0,0 +1,160 @@
+import { ref as u, computed as I, watch as q, openBlock as a, createBlock as p, unref as b, withCtx as h, createElementVNode as d, createElementBlock as x, toDisplayString as w, createCommentVNode as k, normalizeClass as O, renderSlot as C, Fragment as L, renderList as N, withKeys as A } from "vue";
+import "dayjs";
+import { _ as E } from "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
+import { _ as F } from "./OcIcon-CJgBICxh.js";
+import { _ as $ } 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 M = { class: "flex flex-1 items-baseline gap-x-2" }, j = {
+  key: 0,
+  class: "text-oc-text-300"
+}, K = { class: "w-full flex flex-wrap gap-2" }, T = { key: 1 }, z = ["value", "readonly", "placeholder", "disabled"], oe = {
+  __name: "OcInputOption",
+  props: {
+    label: String,
+    hint: String,
+    errorMessage: String,
+    placeholder: String,
+    isInlineLabel: Boolean,
+    isReadonly: Boolean,
+    isDisabled: Boolean,
+    modelValue: Array,
+    maxVisibleOptions: {
+      type: Number,
+      default: 2
+    },
+    isRequired: {
+      type: Boolean,
+      default: !1
+    },
+    allowDuplicated: {
+      type: Boolean,
+      default: !1
+    },
+    labelIcon: {
+      type: String,
+      default: ""
+    },
+    tooltipText: {
+      type: String,
+      default: ""
+    },
+    tooltipOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: {
+    "update:modelValue": [],
+    "option-added": [],
+    "option-removed": [],
+    blur: []
+  },
+  setup(e, { expose: B, emit: R }) {
+    const m = e, c = R, o = u([]), v = u(), g = u(""), s = u(!1), y = u(!1), f = I(() => s.value ? o.value : o.value.slice(0, m.maxVisibleOptions)), S = (t) => {
+      o.value = o.value.filter((l) => l !== t), c("option-removed", t), c("update:modelValue", o.value);
+    }, V = (t) => {
+      if (!(t != null && t.trim()))
+        return;
+      const l = (t == null ? void 0 : t.split(",")) || [];
+      l.forEach((n) => {
+        var r;
+        n != null && n.trim() && (!m.allowDuplicated && ((r = o.value) != null && r.includes(n)) || (o.value.push(n), c("option-added", n)));
+      }), l.length && (g.value = "", c("update:modelValue", o.value));
+    };
+    return q(
+      () => m.modelValue,
+      () => {
+        o.value = [...m.modelValue || []];
+      },
+      {
+        immediate: !0,
+        deep: !0
+      }
+    ), B({
+      focus: () => v.value.focus()
+    }), (t, l) => (a(), p(b(E), {
+      label: e.isInlineLabel ? "" : e.label,
+      hint: e.hint,
+      "error-message": e.errorMessage,
+      "is-required": e.isRequired,
+      "label-icon": e.labelIcon,
+      "tooltip-text": e.tooltipText,
+      "tooltip-options": e.tooltipOptions
+    }, {
+      default: h(() => {
+        var n, r;
+        return [
+          d("div", M, [
+            e.isInlineLabel && e.label ? (a(), x("label", j, w(e.label) + ": ", 1)) : k("", !0),
+            d("div", {
+              class: "bg-oc-bg-light flex items-center gap-x-1 w-full",
+              onClick: l[4] || (l[4] = (i) => v.value.focus())
+            }, [
+              d("div", {
+                class: O(["border min-h-[36px] py-3 w-full px-3 flex justify-between items-center cursor-pointer gap-x-3 rounded", {
+                  "border-oc-error": e.errorMessage && !e.isDisabled,
+                  "pointer-events-none bg-oc-bg-dark": e.isDisabled
+                }])
+              }, [
+                d("div", K, [
+                  C(t.$slots, "default", {
+                    options: f.value,
+                    areAllOptionsVisible: s.value
+                  }, () => [
+                    (a(!0), x(L, null, N(f.value, (i, D) => (a(), p(b($), {
+                      key: `${i}-${D}`,
+                      closable: "",
+                      label: i,
+                      onRemove: (G) => S(i)
+                    }, null, 8, ["label", "onRemove"]))), 128)),
+                    o.value.length > e.maxVisibleOptions ? (a(), p(b($), {
+                      key: 0,
+                      variant: "gray",
+                      onClick: l[0] || (l[0] = (i) => s.value = !s.value)
+                    }, {
+                      default: h(() => [
+                        s.value ? (a(), p(b(F), {
+                          key: 0,
+                          name: "minus",
+                          width: "12",
+                          height: "12"
+                        })) : (a(), x("span", T, w(`+${o.value.length - e.maxVisibleOptions}`), 1))
+                      ]),
+                      _: 1
+                    })) : k("", !0)
+                  ]),
+                  d("input", {
+                    ref_key: "inputRef",
+                    ref: v,
+                    type: "text",
+                    value: g.value,
+                    readonly: e.isReadonly,
+                    placeholder: ((n = f.value) == null ? void 0 : n.length) === 0 ? e.placeholder : "",
+                    disabled: e.isDisabled,
+                    class: O(["h-7 flex-1 outline-none text-oc-text disabled:bg-transparent placeholder:font-normal placeholder:text-oc-text-300 bg-oc-bg-light", ((r = f.value) == null ? void 0 : r.length) === 0 ? "min-w-full" : "min-w-[80px]"]),
+                    onFocus: l[1] || (l[1] = (i) => y.value = !0),
+                    onBlur: l[2] || (l[2] = (i) => {
+                      console.log("$event: ", i), y.value = !1, t.$emit("blur", i);
+                    }),
+                    onKeyup: l[3] || (l[3] = A((i) => V(i.target.value), ["enter"]))
+                  }, null, 42, z)
+                ])
+              ], 2)
+            ])
+          ])
+        ];
+      }),
+      _: 3
+    }, 8, ["label", "hint", "error-message", "is-required", "label-icon", "tooltip-text", "tooltip-options"]));
+  }
+};
+export {
+  oe as _
+};

package/dist/OcLinkInput-C2ixk-gk.js

@@ -0,0 +1,143 @@
+import { ref as p, computed as c, openBlock as o, createElementBlock as v, createBlock as L, unref as n, createCommentVNode as g, createVNode as f, withCtx as b, Fragment as O, renderList as C, createTextVNode as F, toDisplayString as q, createElementVNode as N, normalizeClass as $ } from "vue";
+import "dayjs";
+import { D as M } from "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
+import { _ as h } from "./OcIcon-CJgBICxh.js";
+/* empty css                                                                    */
+import { _ as T } from "./OcInput-tcRxG3Y2.js";
+import "libphonenumber-js";
+/* empty css                                                                  */
+import "v-calendar";
+/* empty css                                                                  */
+import "./Cropper.js";
+import "vue-draggable-next";
+import "@popperjs/core";
+const U = { class: "flex text-oc-text-400 items-center gap-x-2" }, P = {
+  key: 0,
+  class: "flex flex-col p-2 py-3 gap-2"
+}, R = ["onClick"], ee = {
+  __name: "OcLinkInput",
+  props: {
+    placeholder: String,
+    hint: String,
+    label: String,
+    errorMessage: String,
+    isInlineLabel: Boolean,
+    isDisabled: Boolean,
+    modelValue: String,
+    type: String,
+    title: String,
+    links: {
+      type: Array,
+      default: () => []
+    },
+    isRequired: {
+      type: Boolean,
+      default: !1
+    },
+    labelIcon: {
+      type: String,
+      default: ""
+    },
+    tooltipText: {
+      type: String,
+      default: ""
+    },
+    tooltipOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    isEdit: Boolean
+  },
+  emits: {
+    "update:modelValue": [],
+    "update:type": [],
+    "update:title": []
+  },
+  setup(e, { emit: w }) {
+    var V, x;
+    const i = e, s = w, d = p(!1), r = p(i.type ?? ((x = (V = i.links) == null ? void 0 : V[0]) == null ? void 0 : x.value)), k = p(i.title ?? ""), u = c(
+      () => i.links.find((t) => t.value === r.value) ?? {}
+    ), m = c(() => u.value.preFill ?? ""), y = p(i.modelValue ? i.modelValue.replace(m.value, "") : ""), B = (t) => {
+      var l;
+      const a = (l = i.links.find((S) => S.value === t)) == null ? void 0 : l.preFill;
+      s("update:modelValue", i.modelValue.replace(m.value, a)), r.value = t, s("update:type", t), d.value = !1;
+    }, D = (t) => {
+      y.value = t, s("update:modelValue", m.value + t), !i.isEdit && r.value !== "link" && s("update:title", t);
+    }, E = c(() => u.value.placeholder ?? ""), I = c(() => r.value === "link");
+    return (t, a) => (o(), v("div", null, [
+      I.value || e.isEdit ? (o(), L(n(T), {
+        key: 0,
+        modelValue: k.value,
+        "onUpdate:modelValue": [
+          a[0] || (a[0] = (l) => k.value = l),
+          a[1] || (a[1] = (l) => t.$emit("update:title", l))
+        ],
+        class: "mb-3",
+        label: "Title",
+        placeholder: "Title",
+        "error-message": e.errorMessage ? " " : ""
+      }, null, 8, ["modelValue", "error-message"])) : g("", !0),
+      f(n(T), {
+        placeholder: E.value,
+        label: r.value === "link" ? "Link" : e.label,
+        "error-message": e.errorMessage,
+        "is-inline-label": e.isInlineLabel,
+        disabled: e.isDisabled,
+        hint: e.hint,
+        "pre-fill": m.value,
+        "model-value": y.value,
+        "is-required": e.isRequired,
+        "label-icon": e.labelIcon,
+        "tooltip-text": e.tooltipText,
+        "tooltip-options": e.tooltipOptions,
+        "onUpdate:modelValue": D
+      }, {
+        trailing: b(() => [
+          f(n(M), {
+            modelValue: d.value,
+            "onUpdate:modelValue": a[2] || (a[2] = (l) => d.value = l),
+            distance: 10
+          }, {
+            menu: b(() => [
+              e.isEdit ? g("", !0) : (o(), v("div", P, [
+                (o(!0), v(O, null, C(e.links, (l) => (o(), v("div", {
+                  key: l.value,
+                  class: "flex rounded-sm items-center px-3 py-2 gap-x-3 cursor-pointer text-oc-text-400 hover:bg-gray-50",
+                  onClick: (S) => B(l.value)
+                }, [
+                  f(n(h), {
+                    width: "20",
+                    height: "20",
+                    name: l.icon
+                  }, null, 8, ["name"]),
+                  F(" " + q(l.label), 1)
+                ], 8, R))), 128))
+              ]))
+            ]),
+            default: b(() => [
+              N("div", U, [
+                u.value.icon ? (o(), L(n(h), {
+                  key: 0,
+                  width: "20",
+                  height: "20",
+                  name: u.value.icon
+                }, null, 8, ["name"])) : g("", !0),
+                f(n(h), {
+                  width: "16",
+                  height: "16",
+                  class: $(["transition duration-300", d.value ? "-rotate-180" : ""]),
+                  name: "chevron-down"
+                }, null, 8, ["class"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        _: 1
+      }, 8, ["placeholder", "label", "error-message", "is-inline-label", "disabled", "hint", "pre-fill", "model-value", "is-required", "label-icon", "tooltip-text", "tooltip-options"])
+    ]));
+  }
+};
+export {
+  ee as _
+};

package/dist/OcListDetail-6XeME6ko.js

@@ -0,0 +1,76 @@
+import { computed as m, openBlock as l, createElementBlock as p, normalizeClass as e, createElementVNode as o, createTextVNode as u, toDisplayString as i, createBlock as d, unref as r, withCtx as f, createVNode as v, createCommentVNode as g, renderSlot as x } from "vue";
+import "dayjs";
+import "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
+import { _ as y } 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";
+import { _ as h } from "./OcCopyTooltip.vue_vue_type_script_setup_true_lang-S2RAfV_g.js";
+const L = {
+  __name: "OcListDetail",
+  props: {
+    label: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: "small",
+      validator: (t) => ["small", "big"].includes(t)
+    },
+    alignment: {
+      type: String,
+      default: "horizontal",
+      validator: (t) => ["horizontal", "vertical"].includes(t)
+    },
+    showCopyTooltip: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(t) {
+    const n = t, a = m(() => n.alignment === "vertical");
+    return (c, S) => (l(), p("div", {
+      class: e(["flex gap-x-5 text-sm group", { "flex-col": a.value }])
+    }, [
+      o("div", {
+        class: e(["flex gap-x-2 items-center shrink-0 text-oc-text-400", { "w-[80px]": t.variant === "small" && !a.value }])
+      }, [
+        u(i(t.label) + " ", 1),
+        t.showCopyTooltip ? (l(), d(r(h), {
+          key: 0,
+          value: t.content
+        }, {
+          default: f(({ isShow: s }) => [
+            v(r(y), {
+              width: "14",
+              height: "14",
+              class: e(["cursor-pointer transition-all duration-500 group-hover:opacity-100", s ? "opacity-100" : "opacity-0"]),
+              name: "copy"
+            }, null, 8, ["class"])
+          ]),
+          _: 1
+        }, 8, ["value"])) : g("", !0)
+      ], 2),
+      o("div", {
+        class: e({ "text-base font-medium": a.value })
+      }, [
+        x(c.$slots, "content", {}, () => [
+          o("span", null, i(t.content), 1)
+        ])
+      ], 2)
+    ], 2));
+  }
+};
+export {
+  L as _
+};