@oneflowui/ui 0.1.0

package/README.md

@@ -0,0 +1,161 @@
+# OneFlow UI
+
+OneFlow 设计系统组件库，基于 Vue 3 + TypeScript 构建。
+
+## 安装
+
+```bash
+# pnpm（推荐）
+pnpm add oneflow-ui
+
+# npm
+npm install oneflow-ui
+
+# yarn
+yarn add oneflow-ui
+```
+
+## 开发与测试
+
+```bash
+# 启动开发环境（固定端口 5174）
+npm run dev
+
+# 类型检查
+npm run type-check
+
+# 集成测试
+npm run test
+```
+
+## 全局注册
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import OneflowUI from 'oneflow-ui'
+import 'oneflow-ui/styles'
+
+const app = createApp(App)
+app.use(OneflowUI)
+app.mount('#app')
+```
+
+## 按需引入
+
+```ts
+import { DetailLayout, PropPanel, DataTable } from 'oneflow-ui'
+import 'oneflow-ui/styles'
+```
+
+## 样式引入
+
+```ts
+// 在入口文件引入 CSS 变量和基础样式
+import 'oneflow-ui/styles'
+```
+
+---
+
+## 组件示例
+
+### KanbanBoard
+
+```vue
+<KanbanBoard
+  :columns="[
+    { id: 'todo', title: '待处理', color: '#64748B', tasks: [] },
+    { id: 'in_progress', title: '进行中', color: '#2563EB', tasks: [] },
+  ]"
+  @task-click="onTaskClick"
+  @add-task="onAddTask"
+/>
+
+<!-- 或者使用 DataRecord 配置泳道字段 -->
+<KanbanBoard
+  :records="records"
+  kanban-field-id="stage"
+  :lane-order="['todo', 'doing', 'done']"
+  :lane-titles="{ todo: '待处理', doing: '进行中', done: '已完成' }"
+/>
+```
+
+### DataTable
+
+```vue
+<DataTable
+  :columns="[
+    { key: 'title', label: '标题', width: 'fill' },
+    { key: 'status', label: '状态', width: 120 },
+    { key: 'priority', label: '优先级', width: 100 },
+  ]"
+  :rows="tasks"
+  @row-click="onRowClick"
+/>
+```
+
+### GalleryView
+
+```vue
+<GalleryView
+  :items="galleryItems"
+  @card-click="onCardClick"
+/>
+
+<!-- 或者使用 DataRecord 配置封面字段 -->
+<GalleryView
+  :records="records"
+  cover-field-id="coverUrl"
+  :card-field-ids="['assignee', 'priority']"
+/>
+```
+
+### GanttTimeline
+
+```vue
+<GanttTimeline
+  :items="ganttItems"
+  :start-date="'2026-01-01'"
+  :end-date="'2026-12-31'"
+  @item-click="onItemClick"
+/>
+```
+
+### DetailLayout
+
+```vue
+<DetailLayout
+  :task="currentTask"
+  v-model:description-content="detailDescription"
+  :description-editable="true"
+  :comments="comments"
+  :prop-items="[
+    { key: '状态', value: '进行中' },
+    { key: '优先级', value: 'P1' },
+    { key: '负责人', value: '张三' },
+    { key: '截止日期', value: '2026-06-30' },
+  ]"
+/>
+```
+
+### CodeBlock
+
+```vue
+<CodeBlock
+  language="typescript"
+  :code="sourceCode"
+/>
+```
+
+---
+
+## 集成测试覆盖（Task 2.4）
+
+- 三层数据模型：`TableSchema + DataRecord + ViewConfig` 联动可用
+- Table + Detail：表格点击事件与详情渲染链路可用
+- Dashboard 甘特图：空态/有数据态渲染与点击事件可用
+
+对应测试文件：
+- `src/tests/three-layer-model.integration.spec.ts`
+- `src/tests/table-detail.integration.spec.ts`
+- `src/tests/gantt.integration.spec.ts`

package/dist/FieldCheckbox-B1eVag_x.js

@@ -0,0 +1,30 @@
+import { defineComponent as s, computed as f, openBlock as p, createElementBlock as r, withModifiers as d, createElementVNode as m, toDisplayString as _ } from "vue";
+import { _ as u } from "./index-B9LF7Kv4.js";
+const k = { class: "of-field-checkbox__icon" }, x = /* @__PURE__ */ s({
+  __name: "FieldCheckbox",
+  props: {
+    value: {},
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(n, { emit: a }) {
+    const i = n, t = a, o = f(() => !!i.value);
+    function c() {
+      t("commit", !o.value);
+    }
+    function l(e) {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), c()), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("tabNext"));
+    }
+    return (e, b) => (p(), r("div", {
+      class: "of-field-checkbox",
+      tabindex: "0",
+      onClick: d(c, ["stop"]),
+      onKeydown: l
+    }, [
+      m("span", k, _(o.value ? "☑" : "☐"), 1)
+    ], 32));
+  }
+}), y = /* @__PURE__ */ u(x, [["__scopeId", "data-v-e5dffacb"]]);
+export {
+  y as default
+};

package/dist/FieldDate-BCitHPQn.js

@@ -0,0 +1,34 @@
+import { defineComponent as f, ref as u, onMounted as m, nextTick as s, withDirectives as d, openBlock as v, createElementBlock as y, vModelText as _ } from "vue";
+import { _ as k } from "./index-B9LF7Kv4.js";
+const x = /* @__PURE__ */ f({
+  __name: "FieldDate",
+  props: {
+    value: { type: [String, Number, Boolean, Array, null] },
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(i, { emit: r }) {
+    const c = i, t = r, o = u(null), n = u(String(c.value ?? ""));
+    m(() => s(() => {
+      var e;
+      return (e = o.value) == null ? void 0 : e.focus();
+    }));
+    function p(e) {
+      e.key === "Enter" && (e.preventDefault(), t("commit", n.value || null)), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("commit", n.value || null), t("tabNext"));
+    }
+    return (e, l) => d((v(), y("input", {
+      ref_key: "inputRef",
+      ref: o,
+      "onUpdate:modelValue": l[0] || (l[0] = (a) => n.value = a),
+      class: "of-field-input",
+      type: "date",
+      onKeydown: p,
+      onBlur: l[1] || (l[1] = (a) => t("commit", n.value || null))
+    }, null, 544)), [
+      [_, n.value]
+    ]);
+  }
+}), B = /* @__PURE__ */ k(x, [["__scopeId", "data-v-3acdd712"]]);
+export {
+  B as default
+};

package/dist/FieldDatetime-BGeyZJl-.js

@@ -0,0 +1,34 @@
+import { defineComponent as f, ref as i, onMounted as p, nextTick as s, withDirectives as d, openBlock as v, createElementBlock as y, vModelText as _ } from "vue";
+import { _ as k } from "./index-B9LF7Kv4.js";
+const x = /* @__PURE__ */ f({
+  __name: "FieldDatetime",
+  props: {
+    value: { type: [String, Number, Boolean, Array, null] },
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(u, { emit: r }) {
+    const c = u, t = r, o = i(null), n = i(String(c.value ?? ""));
+    p(() => s(() => {
+      var e;
+      return (e = o.value) == null ? void 0 : e.focus();
+    }));
+    function m(e) {
+      e.key === "Enter" && (e.preventDefault(), t("commit", n.value || null)), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("commit", n.value || null), t("tabNext"));
+    }
+    return (e, l) => d((v(), y("input", {
+      ref_key: "inputRef",
+      ref: o,
+      "onUpdate:modelValue": l[0] || (l[0] = (a) => n.value = a),
+      class: "of-field-input",
+      type: "datetime-local",
+      onKeydown: m,
+      onBlur: l[1] || (l[1] = (a) => t("commit", n.value || null))
+    }, null, 544)), [
+      [_, n.value]
+    ]);
+  }
+}), B = /* @__PURE__ */ k(x, [["__scopeId", "data-v-bedfdcc6"]]);
+export {
+  B as default
+};

package/dist/FieldEmail-Ds8lTvNh.js

@@ -0,0 +1,34 @@
+import { defineComponent as f, ref as a, onMounted as p, nextTick as s, withDirectives as d, openBlock as v, createElementBlock as y, vModelText as _ } from "vue";
+import { _ as k } from "./index-B9LF7Kv4.js";
+const x = /* @__PURE__ */ f({
+  __name: "FieldEmail",
+  props: {
+    value: { type: [String, Number, Boolean, Array, null] },
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(u, { emit: r }) {
+    const c = u, t = r, o = a(null), n = a(String(c.value ?? ""));
+    p(() => s(() => {
+      var e;
+      return (e = o.value) == null ? void 0 : e.focus();
+    }));
+    function m(e) {
+      e.key === "Enter" && (e.preventDefault(), t("commit", n.value)), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("commit", n.value), t("tabNext"));
+    }
+    return (e, l) => d((v(), y("input", {
+      ref_key: "inputRef",
+      ref: o,
+      class: "of-field-input",
+      type: "email",
+      "onUpdate:modelValue": l[0] || (l[0] = (i) => n.value = i),
+      onKeydown: m,
+      onBlur: l[1] || (l[1] = (i) => t("commit", n.value))
+    }, null, 544)), [
+      [_, n.value]
+    ]);
+  }
+}), B = /* @__PURE__ */ k(x, [["__scopeId", "data-v-cdd23fdc"]]);
+export {
+  B as default
+};

package/dist/FieldMultiSelect-_cY4aZuE.js

@@ -0,0 +1,145 @@
+import { defineComponent as $, ref as a, computed as M, onMounted as z, nextTick as F, onBeforeUnmount as O, watch as T, openBlock as l, createElementBlock as i, Fragment as A, renderList as L, normalizeStyle as w, toDisplayString as k, createBlock as I, Teleport as P, withModifiers as m, normalizeClass as U, createElementVNode as p, createCommentVNode as V } from "vue";
+import { _ as K } from "./index-B9LF7Kv4.js";
+const W = {
+  key: 0,
+  class: "of-field-multiselect__chips"
+}, j = {
+  key: 1,
+  class: "of-field-multiselect__placeholder"
+}, q = ["onMouseenter", "onClick"], G = ["checked"], H = { key: 1 }, J = { class: "of-field-multiselect__actions" }, Q = /* @__PURE__ */ $({
+  __name: "FieldMultiSelect",
+  props: {
+    value: { type: [String, Number, Boolean, Array, null] },
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(S, { emit: B }) {
+    const d = S, _ = B, s = a(null), b = a(null), h = a({ top: "0px", left: "0px", width: "0px" }), f = a(!0), v = M(() => d.field.options ?? []), o = a([]), r = a(0), x = M(() => {
+      const e = new Set(o.value);
+      return v.value.filter((n) => e.has(n.value));
+    });
+    function g() {
+      o.value = Array.isArray(d.value) ? d.value.filter((e) => typeof e == "string") : [];
+    }
+    function u() {
+      if (!s.value) return;
+      const e = s.value.getBoundingClientRect();
+      h.value = {
+        top: `${e.bottom}px`,
+        left: `${e.left}px`,
+        width: `${Math.max(e.width, 220)}px`
+      };
+    }
+    function C(e) {
+      if (o.value.indexOf(e) >= 0) {
+        o.value = o.value.filter((t) => t !== e);
+        return;
+      }
+      o.value = [...o.value, e];
+    }
+    function y() {
+      f.value = !1, _("commit", [...o.value]);
+    }
+    function D() {
+      f.value && (f.value = !1, _("cancel"));
+    }
+    function N(e) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), r.value = Math.min(r.value + 1, Math.max(v.value.length - 1, 0));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), r.value = Math.max(r.value - 1, 0);
+        return;
+      }
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        const n = v.value[r.value];
+        n && C(n.value);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault(), D();
+        return;
+      }
+      e.key === "Tab" && (e.preventDefault(), y(), _("tabNext"));
+    }
+    function E(e) {
+      var t, c;
+      const n = e.target;
+      n && ((t = s.value) != null && t.contains(n) || (c = b.value) != null && c.contains(n) || y());
+    }
+    return z(() => {
+      g(), F(() => {
+        var e;
+        u(), (e = s.value) == null || e.focus();
+      }), window.addEventListener("resize", u), window.addEventListener("scroll", u, !0), window.addEventListener("mousedown", E, !0);
+    }), O(() => {
+      window.removeEventListener("resize", u), window.removeEventListener("scroll", u, !0), window.removeEventListener("mousedown", E, !0);
+    }), T(
+      () => d.value,
+      () => {
+        g();
+      }
+    ), (e, n) => (l(), i("div", {
+      ref_key: "triggerRef",
+      ref: s,
+      class: "of-field-multiselect",
+      tabindex: "0",
+      onKeydown: N
+    }, [
+      x.value.length ? (l(), i("div", W, [
+        (l(!0), i(A, null, L(x.value, (t) => (l(), i("span", {
+          key: t.value,
+          class: "of-field-multiselect__badge",
+          style: w(t.color ? { background: t.color } : void 0)
+        }, k(t.label), 5))), 128))
+      ])) : (l(), i("span", j, "—")),
+      (l(), I(P, { to: "body" }, [
+        f.value ? (l(), i("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: b,
+          class: "of-field-multiselect__dropdown",
+          style: w(h.value)
+        }, [
+          (l(!0), i(A, null, L(v.value, (t, c) => (l(), i("div", {
+            key: t.value,
+            class: U(["of-field-multiselect__option", { active: c === r.value, selected: o.value.includes(t.value) }]),
+            onMouseenter: (R) => r.value = c,
+            onClick: m((R) => C(t.value), ["stop"])
+          }, [
+            p("input", {
+              class: "of-field-multiselect__checkbox",
+              type: "checkbox",
+              tabindex: "-1",
+              checked: o.value.includes(t.value),
+              onChange: n[0] || (n[0] = m(() => {
+              }, ["prevent"]))
+            }, null, 40, G),
+            t.color ? (l(), i("span", {
+              key: 0,
+              class: "of-field-multiselect__badge",
+              style: w({ background: t.color })
+            }, k(t.label), 5)) : (l(), i("span", H, k(t.label), 1))
+          ], 42, q))), 128)),
+          p("div", J, [
+            p("button", {
+              class: "of-field-multiselect__btn",
+              type: "button",
+              onClick: m(D, ["stop"])
+            }, "取消"),
+            p("button", {
+              class: "of-field-multiselect__btn of-field-multiselect__btn--primary",
+              type: "button",
+              onClick: m(y, ["stop"])
+            }, "完成")
+          ])
+        ], 4)) : V("", !0)
+      ]))
+    ], 544));
+  }
+}), Z = /* @__PURE__ */ K(Q, [["__scopeId", "data-v-8e54ce8e"]]);
+export {
+  Z as default
+};

package/dist/FieldNumber-DayaF31C.js

@@ -0,0 +1,43 @@
+import { defineComponent as p, ref as m, onMounted as v, nextTick as d, withDirectives as N, openBlock as b, createElementBlock as y, vModelText as k } from "vue";
+import { _ } from "./index-B9LF7Kv4.js";
+const x = /* @__PURE__ */ p({
+  __name: "FieldNumber",
+  props: {
+    value: { type: [String, Number, Boolean, Array, null] },
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(f, { emit: c }) {
+    const o = f, u = c, a = m(null), t = m(o.value === null || o.value === void 0 ? "" : String(o.value));
+    v(() => d(() => {
+      var e;
+      return (e = a.value) == null ? void 0 : e.focus();
+    }));
+    function r() {
+      if (t.value === "") return null;
+      const e = Number(t.value);
+      return Number.isNaN(e) ? null : e;
+    }
+    function i(e) {
+      const n = t.value === "" ? 0 : Number(t.value), l = Number.isNaN(n) ? 0 : n;
+      t.value = String(l + e);
+    }
+    function s(e) {
+      e.key === "ArrowUp" && (e.preventDefault(), i(1)), e.key === "ArrowDown" && (e.preventDefault(), i(-1)), e.key === "Enter" && (e.preventDefault(), u("commit", r())), e.key === "Escape" && (e.preventDefault(), u("cancel")), e.key === "Tab" && (e.preventDefault(), u("commit", r()), u("tabNext"));
+    }
+    return (e, n) => N((b(), y("input", {
+      ref_key: "inputRef",
+      ref: a,
+      class: "of-field-input",
+      type: "number",
+      "onUpdate:modelValue": n[0] || (n[0] = (l) => t.value = l),
+      onKeydown: s,
+      onBlur: n[1] || (n[1] = (l) => u("commit", r()))
+    }, null, 544)), [
+      [k, t.value]
+    ]);
+  }
+}), B = /* @__PURE__ */ _(x, [["__scopeId", "data-v-81dd7528"]]);
+export {
+  B as default
+};

package/dist/FieldRating-Dw9rvhUe.js

@@ -0,0 +1,32 @@
+import { defineComponent as v, ref as _, openBlock as o, createElementBlock as r, withKeys as x, Fragment as g, renderList as b, unref as c, withModifiers as k, normalizeClass as y } from "vue";
+import { _ as C } from "./index-B9LF7Kv4.js";
+const M = ["onMouseenter", "onClick"], $ = /* @__PURE__ */ v({
+  __name: "FieldRating",
+  props: {
+    value: { type: [String, Number, Boolean, Array, null] },
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(u, { emit: m }) {
+    const s = u, a = m, n = _(0), d = s.field.max ?? 5, f = Number(s.value ?? 0);
+    function p(i) {
+      a("commit", i);
+    }
+    return (i, t) => (o(), r("div", {
+      class: "of-field-rating",
+      onKeydown: t[1] || (t[1] = x((e) => a("cancel"), ["escape"])),
+      tabindex: "0"
+    }, [
+      (o(!0), r(g, null, b(c(d), (e) => (o(), r("span", {
+        key: e,
+        class: y(["of-field-rating__star", { filled: e <= (n.value || c(f)) }]),
+        onMouseenter: (l) => n.value = e,
+        onMouseleave: t[0] || (t[0] = (l) => n.value = 0),
+        onClick: k((l) => p(e), ["stop"])
+      }, "★", 42, M))), 128))
+    ], 32));
+  }
+}), F = /* @__PURE__ */ C($, [["__scopeId", "data-v-80c63bd9"]]);
+export {
+  F as default
+};

package/dist/FieldSelect-DEVkjnNY.js

@@ -0,0 +1,122 @@
+import { defineComponent as N, ref as f, computed as x, onMounted as R, nextTick as V, onBeforeUnmount as z, watch as A, openBlock as l, createElementBlock as a, normalizeStyle as b, toDisplayString as w, createBlock as I, Teleport as F, createElementVNode as T, withModifiers as C, normalizeClass as L, Fragment as O, renderList as P, createCommentVNode as U } from "vue";
+import { _ as K } from "./index-B9LF7Kv4.js";
+const W = {
+  key: 1,
+  class: "of-field-select__display"
+}, j = ["onMouseenter", "onClick"], q = { key: 1 }, G = /* @__PURE__ */ N({
+  __name: "FieldSelect",
+  props: {
+    value: { type: [String, Number, Boolean, Array, null] },
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(M, { emit: B }) {
+    const s = M, y = B, i = f(null), h = f(null), E = f({ top: "0px", left: "0px", width: "0px" }), p = f(!0), r = x(() => s.field.options ?? []), c = x(() => {
+      const e = typeof s.value == "string" ? s.value : null;
+      return r.value.findIndex((t) => t.value === e);
+    }), n = f(0);
+    function d() {
+      if (!i.value) return;
+      const e = i.value.getBoundingClientRect();
+      E.value = {
+        top: `${e.bottom}px`,
+        left: `${e.left}px`,
+        width: `${Math.max(e.width, 160)}px`
+      };
+    }
+    function m(e) {
+      p.value = !1, y("commit", e);
+    }
+    function k() {
+      p.value && (p.value = !1, y("cancel"));
+    }
+    function S(e) {
+      var t, o;
+      if (!r.value.length) {
+        e.key === "Escape" && (e.preventDefault(), k());
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), n.value = Math.min(n.value + 1, r.value.length - 1);
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), n.value = Math.max(n.value - 1, 0);
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault(), m(((t = r.value[n.value]) == null ? void 0 : t.value) ?? null);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault(), k();
+        return;
+      }
+      e.key === "Tab" && (e.preventDefault(), m(((o = r.value[n.value]) == null ? void 0 : o.value) ?? null), y("tabNext"));
+    }
+    function D(e) {
+      var o, v;
+      const t = e.target;
+      t && ((o = i.value) != null && o.contains(t) || (v = h.value) != null && v.contains(t) || k());
+    }
+    R(() => {
+      n.value = c.value >= 0 ? c.value : 0, V(() => {
+        var e;
+        d(), (e = i.value) == null || e.focus();
+      }), window.addEventListener("resize", d), window.addEventListener("scroll", d, !0), window.addEventListener("mousedown", D, !0);
+    }), z(() => {
+      window.removeEventListener("resize", d), window.removeEventListener("scroll", d, !0), window.removeEventListener("mousedown", D, !0);
+    }), A(c, (e) => {
+      e >= 0 && (n.value = e);
+    });
+    const _ = x(() => {
+      const e = typeof s.value == "string" ? s.value : null;
+      return r.value.find((t) => t.value === e);
+    });
+    return (e, t) => {
+      var o, v;
+      return l(), a("div", {
+        ref_key: "triggerRef",
+        ref: i,
+        class: "of-field-select",
+        tabindex: "0",
+        onKeydown: S
+      }, [
+        (o = _.value) != null && o.color ? (l(), a("span", {
+          key: 0,
+          class: "of-field-select__badge",
+          style: b({ background: _.value.color })
+        }, w(_.value.label), 5)) : (l(), a("span", W, w(((v = _.value) == null ? void 0 : v.label) ?? "—"), 1)),
+        (l(), I(F, { to: "body" }, [
+          p.value ? (l(), a("div", {
+            key: 0,
+            ref_key: "dropdownRef",
+            ref: h,
+            class: "of-field-select__dropdown",
+            style: b(E.value)
+          }, [
+            T("div", {
+              class: L(["of-field-select__option of-field-select__option--clear", { active: n.value === -1, selected: c.value === -1 }]),
+              onClick: t[0] || (t[0] = C((u) => m(null), ["stop"]))
+            }, " — ", 2),
+            (l(!0), a(O, null, P(r.value, (u, g) => (l(), a("div", {
+              key: u.value,
+              class: L(["of-field-select__option", { active: g === n.value, selected: g === c.value }]),
+              onMouseenter: ($) => n.value = g,
+              onClick: C(($) => m(u.value), ["stop"])
+            }, [
+              u.color ? (l(), a("span", {
+                key: 0,
+                class: "of-field-select__badge",
+                style: b({ background: u.color })
+              }, w(u.label), 5)) : (l(), a("span", q, w(u.label), 1))
+            ], 42, j))), 128))
+          ], 4)) : U("", !0)
+        ]))
+      ], 544);
+    };
+  }
+}), Q = /* @__PURE__ */ K(G, [["__scopeId", "data-v-7a426fe0"]]);
+export {
+  Q as default
+};

package/dist/FieldText-LzCqM7jk.js

@@ -0,0 +1,34 @@
+import { defineComponent as f, ref as a, onMounted as m, nextTick as s, withDirectives as v, openBlock as d, createElementBlock as x, vModelText as y } from "vue";
+import { _ } from "./index-B9LF7Kv4.js";
+const k = /* @__PURE__ */ f({
+  __name: "FieldText",
+  props: {
+    value: { type: [String, Number, Boolean, Array, null] },
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(u, { emit: r }) {
+    const c = u, t = r, l = a(null), n = a(String(c.value ?? ""));
+    m(() => s(() => {
+      var e;
+      return (e = l.value) == null ? void 0 : e.focus();
+    }));
+    function p(e) {
+      e.key === "Enter" && (e.preventDefault(), t("commit", n.value)), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("commit", n.value), t("tabNext"));
+    }
+    return (e, o) => v((d(), x("input", {
+      ref_key: "inputRef",
+      ref: l,
+      class: "of-field-input",
+      type: "text",
+      "onUpdate:modelValue": o[0] || (o[0] = (i) => n.value = i),
+      onKeydown: p,
+      onBlur: o[1] || (o[1] = (i) => t("commit", n.value))
+    }, null, 544)), [
+      [y, n.value]
+    ]);
+  }
+}), B = /* @__PURE__ */ _(k, [["__scopeId", "data-v-14e46c45"]]);
+export {
+  B as default
+};