@farris/ui-vue 1.0.0-beta.6 → 1.0.0

package/splitter/index.esm.js

@@ -0,0 +1,491 @@
+import { ref as b, computed as R, defineComponent as O, provide as $, createVNode as C, inject as H, onMounted as D } from "vue";
+const A = {};
+function k(n) {
+  const { properties: e } = n;
+  return Object.keys(e).reduce((t, l) => (t[l] = e[l].type === "object" && e[l].properties ? k(e[l]) : e[l].default, t), {});
+}
+function I(n) {
+  const e = A[n];
+  return e ? k(e) : null;
+}
+function X(n, e) {
+  const s = k(e);
+  return Object.keys(n).reduce((t, l) => (t[l] = n[l], t), s), s;
+}
+function Y(n, e) {
+  return Object.keys(n).filter((t) => n[t] != null).reduce((t, l) => {
+    if (e.has(l)) {
+      const o = e.get(l);
+      if (typeof o == "string")
+        t[o] = n[l];
+      else {
+        const m = o(l, n[l]);
+        Object.assign(t, m);
+      }
+    } else
+      t[l] = n[l];
+    return t;
+  }, {});
+}
+function q(n, e, s = /* @__PURE__ */ new Map()) {
+  const t = X(n, e);
+  return Y(t, s);
+}
+function L(n, e, s = /* @__PURE__ */ new Map()) {
+  return A[e.title] = e, (t) => {
+    const l = q(t, e, s), o = Object.keys(n).reduce((m, v) => (m[v] = n[v].default, m), {});
+    return Object.assign(o, l);
+  };
+}
+function N(n, e) {
+  return { customClass: e.class };
+}
+const G = /* @__PURE__ */ new Map([
+  ["appearance", N]
+]), J = "https://json-schema.org/draft/2020-12/schema", Q = "https://farris-design.gitee.io/splitter.schema.json", U = "Splitter", Z = "A Farris Container Component", _ = "object", K = {
+  id: {
+    description: "The unique identifier for a splitter",
+    type: "string"
+  },
+  type: {
+    description: "The type string of splitter component",
+    type: "string"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  direction: {
+    description: "",
+    type: "string",
+    default: "column",
+    enum: [
+      "column",
+      "row"
+    ]
+  }
+}, ee = {
+  $schema: J,
+  $id: Q,
+  title: U,
+  description: Z,
+  type: _,
+  properties: K
+}, E = {
+  direction: { Type: String, default: "column" }
+}, T = L(E, ee, G);
+function F(n) {
+  const e = b(-1), s = b(-1), t = b(0), l = b(0), o = b(!1), m = b(!1), v = R(() => ({
+    display: o.value ? "block" : "none",
+    left: `${t.value}px`
+  })), g = R(() => ({
+    display: m.value ? "block" : "none",
+    top: `${l.value}px`
+  })), u = R(() => ({
+    display: m.value || o.value ? "block" : "none"
+  }));
+  function a(f) {
+    const p = n.value;
+    if (p) {
+      const { left: r } = p.getBoundingClientRect();
+      t.value = f.clientX - r;
+    }
+  }
+  function i(f) {
+    const p = n.value;
+    if (p) {
+      const { top: r } = p.getBoundingClientRect();
+      l.value = f.clientY - r;
+    }
+  }
+  return {
+    horizontalResizeHandleStyle: v,
+    verticalResizeHandleStyle: g,
+    resizeOverlayStyle: u,
+    showHorizontalResizeHandle: o,
+    showVerticalResizeHandle: m,
+    horizontalResizeBarPosition: e,
+    verticalResizeBarPosition: s,
+    verticalResizeHandleOffset: l,
+    horizontalResizeHandleOffset: t,
+    draggingHorizontalResizeHandle: a,
+    draggingVerticalResizeHandle: i
+  };
+}
+const j = /* @__PURE__ */ O({
+  name: "FSplitter",
+  props: E,
+  emits: [],
+  setup(n, e) {
+    const s = b(), t = F(s), {
+      horizontalResizeHandleStyle: l,
+      verticalResizeHandleStyle: o,
+      resizeOverlayStyle: m
+    } = t;
+    $("splitter", {
+      useResizeHandleComposition: t
+    });
+    const v = R(() => ({
+      "flex-direction": n.direction === "row" ? "column" : "row"
+    }));
+    return () => C("div", {
+      class: "f-splitter",
+      ref: s,
+      style: v.value
+    }, [e.slots.default && e.slots.default(), C("div", {
+      class: "f-splitter-resize-overlay",
+      style: m.value
+    }, null), C("div", {
+      class: "f-splitter-horizontal-resize-proxy",
+      style: l.value
+    }, null), C("div", {
+      class: "f-splitter-vertical-resize-proxy",
+      style: o.value
+    }, null)]);
+  }
+}), te = /* @__PURE__ */ new Map([
+  ["appearance", N]
+]), ne = "https://json-schema.org/draft/2020-12/schema", se = "https://farris-design.gitee.io/splitter-pane.schema.json", le = "Splitter", ie = "A Farris Container Component", oe = "object", re = {
+  id: {
+    description: "The unique identifier for a splitter",
+    type: "string"
+  },
+  type: {
+    description: "The type string of splitter component",
+    type: "string"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  collapsable: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  height: {
+    description: "",
+    type: "number"
+  },
+  position: {
+    description: "",
+    type: "string",
+    default: "left",
+    enum: [
+      "left",
+      "center",
+      "right",
+      "top",
+      "boolean"
+    ]
+  },
+  resizeable: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  width: {
+    description: "",
+    type: "number"
+  },
+  visible: {
+    description: "",
+    type: "number",
+    default: !0
+  }
+}, ae = {
+  $schema: ne,
+  $id: se,
+  title: le,
+  description: ie,
+  type: oe,
+  properties: re
+}, M = {
+  customClass: { type: String, defaut: "" },
+  /** 记录原始定义宽度 */
+  width: { type: Number },
+  /** 记录原始定义高度 */
+  height: { type: Number },
+  /** 面板位置 */
+  position: { type: String, default: "left" },
+  /** 是否显示 */
+  visible: { type: Boolean, default: !0 },
+  /** True to allow the pane can be resized. */
+  resizable: { type: Boolean, default: !0 },
+  /** True to allow the pane can be collapsed. */
+  collapsable: { type: Boolean, default: !1 }
+}, x = L(
+  M,
+  ae,
+  te
+);
+function V(n, e) {
+  const s = b(n.width), t = b(n.height), {
+    horizontalResizeBarPosition: l,
+    horizontalResizeHandleOffset: o,
+    showHorizontalResizeHandle: m,
+    showVerticalResizeHandle: v,
+    verticalResizeBarPosition: g,
+    verticalResizeHandleOffset: u,
+    draggingHorizontalResizeHandle: a,
+    draggingVerticalResizeHandle: i
+  } = e;
+  let f = "", p, r;
+  function c(z) {
+    if ((f === "left" || f === "right") && r) {
+      const { left: h } = r.getBoundingClientRect(), { width: y } = p.getBoundingClientRect(), S = z.clientX - h;
+      f === "left" ? s.value = (y || 0) + (S - l.value) : s.value = (y || 0) - (S - l.value);
+    }
+    if ((f === "top" || f === "bottom") && r) {
+      const { top: h } = r.getBoundingClientRect(), { height: y } = p.getBoundingClientRect(), S = z.clientY - h;
+      f === "top" ? t.value = (y || 0) + (S - g.value) : t.value = (y || 0) - (S - g.value);
+    }
+    o.value = 0, u.value = 0, l.value = -1, g.value = -1, m.value = !1, v.value = !1, document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", c), document.body.style.userSelect = "", f = "", p = null, r = null;
+  }
+  function d(z, h, y) {
+    if (f = h, p = y, m.value = !0, r = z.composedPath().find((P) => P.className.split(" ")[0] === "f-splitter"), r) {
+      const { left: P } = r.getBoundingClientRect();
+      o.value = z.clientX - P, l.value = z.clientX - P, document.addEventListener("mousemove", a), document.addEventListener("mouseup", c), document.body.style.userSelect = "none";
+    }
+  }
+  function w(z, h, y) {
+    if (f = h, p = y, v.value = !0, r = z.composedPath().find((P) => P.className.split(" ")[0] === "f-splitter"), r) {
+      const { top: P } = r.getBoundingClientRect();
+      u.value = z.clientY - P, g.value = z.clientY - P, document.addEventListener("mousemove", i), document.addEventListener("mouseup", c), document.body.style.userSelect = "none";
+    }
+  }
+  return {
+    actualWidth: s,
+    actualHeight: t,
+    onClickSplitterHorizontalResizeBar: d,
+    onClickSplitterVerticalResizeBar: w
+  };
+}
+const B = /* @__PURE__ */ O({
+  name: "FSplitterPane",
+  props: M,
+  emits: [],
+  setup(n, e) {
+    const s = b(), t = H("splitter"), {
+      useResizeHandleComposition: l
+    } = t, o = V(n, l), {
+      actualHeight: m,
+      actualWidth: v,
+      onClickSplitterHorizontalResizeBar: g,
+      onClickSplitterVerticalResizeBar: u
+    } = o, a = b(n.position), i = R(() => {
+      const c = {
+        "f-splitter-pane": !0,
+        "f-splitter-pane-column": a.value === "left" || a.value === "right",
+        "f-splitter-pane-row": a.value === "bottom" || a.value === "top",
+        "f-splitter-pane-main": a.value === "center"
+      };
+      return n.customClass && String(n.customClass).split(" ").reduce((d, w) => (d[w] = !0, d), c), c;
+    }), f = R(() => {
+      const c = {};
+      return (v.value && a.value === "left" || a.value === "right") && (c.width = `${v.value}px`), (m.value && a.value === "bottom" || a.value === "top") && (c.height = `${m.value}px`), c;
+    }), p = R(() => ({
+      "f-splitter-resize-bar": !0,
+      "f-splitter-resize-bar-e": a.value === "left",
+      "f-splitter-resize-bar-n": a.value === "bottom",
+      "f-splitter-resize-bar-s": a.value === "top",
+      "f-splitter-resize-bar-w": a.value === "right"
+    }));
+    function r(c, d) {
+      (d === "left" || d === "right") && g(c, d, s.value), (d === "top" || d === "bottom") && u(c, d, s.value);
+    }
+    return () => C("div", {
+      ref: s,
+      class: i.value,
+      style: f.value
+    }, [e.slots.default && e.slots.default(), C("span", {
+      class: p.value,
+      onMousedown: (c) => r(c, a.value)
+    }, null)]);
+  }
+});
+function W(n, e, s) {
+  var z;
+  const t = s == null ? void 0 : s.checkIsInFixedContextRules(), l = s && s.getStyles && s.getStyles() || "";
+  function o() {
+    return !(e.schema.componentType || t);
+  }
+  function m() {
+    return !1;
+  }
+  function v() {
+    return !(e.schema.componentType || t);
+  }
+  function g() {
+    return !!t;
+  }
+  function u(h) {
+    if (!h)
+      return null;
+    if (h.schema.type === "Component")
+      return h;
+    const y = u(h.parent);
+    return y || null;
+  }
+  function a(h, y, S) {
+    return !!s && s.canAccepts();
+  }
+  function i() {
+    return e.schema.label || e.schema.title || e.schema.name;
+  }
+  function f() {
+  }
+  function p(h, y) {
+    y && (s == null || s.onAcceptMovedChildElement(y));
+  }
+  function r(h, y) {
+    const S = String(h.getAttribute("data-controltype"));
+    return I(S);
+  }
+  function c(h) {
+    return h.contents ? h.contents.length : -1;
+  }
+  function d(h) {
+  }
+  const w = {
+    canMove: o(),
+    canSelectParent: m(),
+    canDelete: v(),
+    canNested: !g(),
+    contents: e.schema.contents,
+    elementRef: n,
+    parent: (z = e.parent) == null ? void 0 : z.componentInstance.value,
+    schema: e.schema,
+    styles: l,
+    canAccepts: a,
+    getBelongedComponentInstance: u,
+    getDraggingDisplayText: i,
+    getDragScopeElement: f,
+    onAcceptMovedChildElement: p,
+    onAcceptNewChildElement: r,
+    onAddNewChildElement: c,
+    onChildElementMovedOut: d,
+    triggerBelongedComponentToMoveWhenMoved: !!s && s.triggerBelongedComponentToMoveWhenMoved
+  };
+  return b(w);
+}
+const ce = /* @__PURE__ */ O({
+  name: "FSplitterDesign",
+  props: E,
+  emits: [],
+  setup(n, e) {
+    const s = b(), t = H("design-item-context"), l = W(s, t);
+    l.value.canNested = !1;
+    const o = F(s), {
+      horizontalResizeHandleStyle: m,
+      verticalResizeHandleStyle: v,
+      resizeOverlayStyle: g
+    } = o;
+    $("splitter", {
+      useResizeHandleComposition: o
+    });
+    const u = R(() => ({
+      "flex-direction": n.direction === "row" ? "column" : "row"
+    }));
+    return D(() => {
+      s.value.componentInstance = l;
+    }), e.expose(l.value), () => C("div", {
+      class: "f-splitter",
+      ref: s,
+      style: u.value
+    }, [e.slots.default && e.slots.default(), C("div", {
+      class: "f-splitter-resize-overlay",
+      style: g.value
+    }, null), C("div", {
+      class: "f-splitter-horizontal-resize-proxy",
+      style: m.value
+    }, null), C("div", {
+      class: "f-splitter-vertical-resize-proxy",
+      style: v.value
+    }, null)]);
+  }
+});
+function ue(n, e) {
+  let t = !0;
+  function l() {
+    return !!t;
+  }
+  function o() {
+    const v = n, g = v.appearance && v.appearance.class || "", u = g ? g.split(" ") : [], a = v.contents || [], i = a.length ? a[0] : null, f = i && i.appearance && i.appearance.class || "", p = f ? f.split(" ") : [], r = e, c = r && r.appearance && r.appearance.class || "", d = c ? c.split(" ") : [];
+    return u.includes("f-section-form") && (r == null ? void 0 : r.type) === "content-container" && p.includes("f-form-layout") || u.includes("f-section-tabs") && d.includes("f-struct-wrapper") && p.includes("f-component-tabs") || u.includes("f-section-grid") && d.includes("f-struct-wrapper") && (p.includes("f-component-grid") || p.includes("f-filter-container")) || u.includes("f-section-treegrid") && d.includes("f-struct-wrapper") && p.includes("f-component-treetable") || u.includes("f-section-oa-table") && d.includes("f-struct-wrapper") && p.includes("f-form-is-table") || u.includes("f-section-card-table") && d.includes("f-struct-wrapper") && p.includes("f-form-is-table") || u.includes("f-section-scheme") && i && i.type === "query-solution" || (u.includes("f-section-in-main") || u.includes("f-section-in-mainsubcard")) && d.includes("f-struct-wrapper") && i && i.type === "content-container" || (u.includes("f-section-in-main") || u.includes("f-section-in-mainsubcard")) && d.includes("f-struct-wrapper") && i && i.type === "file-upload-preview" ? (t = !1, !0) : i && (i.type === "approval-comments" || i.type === "approval-comments") ? (t = !1, !1) : u.includes("f-section-grid") && d.includes("f-struct-wrapper") && p.includes("f-component-appointment-calendar") ? (t = !1, !0) : !1;
+  }
+  function m(v) {
+  }
+  return { canAccepts: l, checkIsInFixedContextRules: o, onAcceptMovedChildElement: m, triggerBelongedComponentToMoveWhenMoved: !1 };
+}
+const pe = /* @__PURE__ */ O({
+  name: "FSplitterPaneDesign",
+  props: M,
+  emits: [],
+  setup(n, e) {
+    var r;
+    const s = b(), t = H("design-item-context"), l = ue(t.schema, (r = t.parent) == null ? void 0 : r.schema), o = W(s, t, l);
+    o.value.canNested = !1, o.value.canMove = !1, o.value.canDelete = !1, D(() => {
+      s.value.componentInstance = o;
+    }), e.expose(o.value);
+    const m = H("splitter"), {
+      useResizeHandleComposition: v
+    } = m, g = V(n, v), {
+      actualHeight: u,
+      actualWidth: a
+    } = g, i = b(n.position), f = R(() => {
+      const c = {
+        "f-splitter-pane": !0,
+        "f-splitter-pane-column": i.value === "left" || i.value === "right",
+        "f-splitter-pane-row": i.value === "bottom" || i.value === "top",
+        "f-splitter-pane-main": i.value === "center",
+        "f-component-splitter-pane": !0,
+        "drag-container": !0
+      };
+      return n.customClass && String(n.customClass).split(" ").reduce((d, w) => (d[w] = !0, d), c), c;
+    }), p = R(() => {
+      const c = {};
+      return (a.value && i.value === "left" || i.value === "right") && (c.width = `${a.value}px`), (u.value && i.value === "bottom" || i.value === "top") && (c.height = `${u.value}px`), c;
+    });
+    return () => C("div", {
+      ref: s,
+      dragref: `${t.schema.id}-container`,
+      class: f.value,
+      style: p.value
+    }, [e.slots.default && e.slots.default()]);
+  }
+}), de = {
+  install(n) {
+    n.component(j.name, j), n.component(B.name, B);
+  },
+  register(n, e) {
+    n.splitter = j, e.splitter = T, n["splitter-pane"] = B, e["splitter-pane"] = x;
+  },
+  registerDesigner(n, e) {
+    n.splitter = ce, e.splitter = T, n["splitter-pane"] = pe, e["splitter-pane"] = x;
+  }
+};
+export {
+  j as Splitter,
+  de as default,
+  E as splitterProps,
+  T as splitterPropsResolver
+};

package/splitter/index.umd.js

@@ -0,0 +1 @@
+(function(z,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(z=typeof globalThis<"u"?globalThis:z||self,n(z.splitter={},z.Vue))})(this,function(z,n){"use strict";const M={};function O(s){const{properties:e}=s;return Object.keys(e).reduce((t,l)=>(t[l]=e[l].type==="object"&&e[l].properties?O(e[l]):e[l].default,t),{})}function x(s){const e=M[s];return e?O(e):null}function A(s,e){const i=O(e);return Object.keys(s).reduce((t,l)=>(t[l]=s[l],t),i),i}function L(s,e){return Object.keys(s).filter(t=>s[t]!=null).reduce((t,l)=>{if(e.has(l)){const r=e.get(l);if(typeof r=="string")t[r]=s[l];else{const h=r(l,s[l]);Object.assign(t,h)}}else t[l]=s[l];return t},{})}function F(s,e,i=new Map){const t=A(s,e);return L(t,i)}function k(s,e,i=new Map){return M[e.title]=e,t=>{const l=F(t,e,i),r=Object.keys(s).reduce((h,y)=>(h[y]=s[y].default,h),{});return Object.assign(r,l)}}function E(s,e){return{customClass:e.class}}const W=new Map([["appearance",E]]),I={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/splitter.schema.json",title:"Splitter",description:"A Farris Container Component",type:"object",properties:{id:{description:"The unique identifier for a splitter",type:"string"},type:{description:"The type string of splitter component",type:"string"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},direction:{description:"",type:"string",default:"column",enum:["column","row"]}}},w={direction:{Type:String,default:"column"}},H=k(w,I,W),ne="";function T(s){const e=n.ref(-1),i=n.ref(-1),t=n.ref(0),l=n.ref(0),r=n.ref(!1),h=n.ref(!1),y=n.computed(()=>({display:r.value?"block":"none",left:`${t.value}px`})),v=n.computed(()=>({display:h.value?"block":"none",top:`${l.value}px`})),p=n.computed(()=>({display:h.value||r.value?"block":"none"}));function a(d){const f=s.value;if(f){const{left:c}=f.getBoundingClientRect();t.value=d.clientX-c}}function o(d){const f=s.value;if(f){const{top:c}=f.getBoundingClientRect();l.value=d.clientY-c}}return{horizontalResizeHandleStyle:y,verticalResizeHandleStyle:v,resizeOverlayStyle:p,showHorizontalResizeHandle:r,showVerticalResizeHandle:h,horizontalResizeBarPosition:e,verticalResizeBarPosition:i,verticalResizeHandleOffset:l,horizontalResizeHandleOffset:t,draggingHorizontalResizeHandle:a,draggingVerticalResizeHandle:o}}const j=n.defineComponent({name:"FSplitter",props:w,emits:[],setup(s,e){const i=n.ref(),t=T(i),{horizontalResizeHandleStyle:l,verticalResizeHandleStyle:r,resizeOverlayStyle:h}=t;n.provide("splitter",{useResizeHandleComposition:t});const y=n.computed(()=>({"flex-direction":s.direction==="row"?"column":"row"}));return()=>n.createVNode("div",{class:"f-splitter",ref:i,style:y.value},[e.slots.default&&e.slots.default(),n.createVNode("div",{class:"f-splitter-resize-overlay",style:h.value},null),n.createVNode("div",{class:"f-splitter-horizontal-resize-proxy",style:l.value},null),n.createVNode("div",{class:"f-splitter-vertical-resize-proxy",style:r.value},null)])}}),q=new Map([["appearance",E]]),X={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/splitter-pane.schema.json",title:"Splitter",description:"A Farris Container Component",type:"object",properties:{id:{description:"The unique identifier for a splitter",type:"string"},type:{description:"The type string of splitter component",type:"string"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},collapsable:{description:"",type:"boolean",default:!1},height:{description:"",type:"number"},position:{description:"",type:"string",default:"left",enum:["left","center","right","top","boolean"]},resizeable:{description:"",type:"boolean",default:!0},width:{description:"",type:"number"},visible:{description:"",type:"number",default:!0}}},B={customClass:{type:String,defaut:""},width:{type:Number},height:{type:Number},position:{type:String,default:"left"},visible:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},collapsable:{type:Boolean,default:!1}},N=k(B,X,q);function V(s,e){const i=n.ref(s.width),t=n.ref(s.height),{horizontalResizeBarPosition:l,horizontalResizeHandleOffset:r,showHorizontalResizeHandle:h,showVerticalResizeHandle:y,verticalResizeBarPosition:v,verticalResizeHandleOffset:p,draggingHorizontalResizeHandle:a,draggingVerticalResizeHandle:o}=e;let d="",f,c;function u(b){if((d==="left"||d==="right")&&c){const{left:g}=c.getBoundingClientRect(),{width:C}=f.getBoundingClientRect(),S=b.clientX-g;d==="left"?i.value=(C||0)+(S-l.value):i.value=(C||0)-(S-l.value)}if((d==="top"||d==="bottom")&&c){const{top:g}=c.getBoundingClientRect(),{height:C}=f.getBoundingClientRect(),S=b.clientY-g;d==="top"?t.value=(C||0)+(S-v.value):t.value=(C||0)-(S-v.value)}r.value=0,p.value=0,l.value=-1,v.value=-1,h.value=!1,y.value=!1,document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",u),document.body.style.userSelect="",d="",f=null,c=null}function m(b,g,C){if(d=g,f=C,h.value=!0,c=b.composedPath().find(P=>P.className.split(" ")[0]==="f-splitter"),c){const{left:P}=c.getBoundingClientRect();r.value=b.clientX-P,l.value=b.clientX-P,document.addEventListener("mousemove",a),document.addEventListener("mouseup",u),document.body.style.userSelect="none"}}function R(b,g,C){if(d=g,f=C,y.value=!0,c=b.composedPath().find(P=>P.className.split(" ")[0]==="f-splitter"),c){const{top:P}=c.getBoundingClientRect();p.value=b.clientY-P,v.value=b.clientY-P,document.addEventListener("mousemove",o),document.addEventListener("mouseup",u),document.body.style.userSelect="none"}}return{actualWidth:i,actualHeight:t,onClickSplitterHorizontalResizeBar:m,onClickSplitterVerticalResizeBar:R}}const $=n.defineComponent({name:"FSplitterPane",props:B,emits:[],setup(s,e){const i=n.ref(),t=n.inject("splitter"),{useResizeHandleComposition:l}=t,r=V(s,l),{actualHeight:h,actualWidth:y,onClickSplitterHorizontalResizeBar:v,onClickSplitterVerticalResizeBar:p}=r,a=n.ref(s.position),o=n.computed(()=>{const u={"f-splitter-pane":!0,"f-splitter-pane-column":a.value==="left"||a.value==="right","f-splitter-pane-row":a.value==="bottom"||a.value==="top","f-splitter-pane-main":a.value==="center"};return s.customClass&&String(s.customClass).split(" ").reduce((m,R)=>(m[R]=!0,m),u),u}),d=n.computed(()=>{const u={};return(y.value&&a.value==="left"||a.value==="right")&&(u.width=`${y.value}px`),(h.value&&a.value==="bottom"||a.value==="top")&&(u.height=`${h.value}px`),u}),f=n.computed(()=>({"f-splitter-resize-bar":!0,"f-splitter-resize-bar-e":a.value==="left","f-splitter-resize-bar-n":a.value==="bottom","f-splitter-resize-bar-s":a.value==="top","f-splitter-resize-bar-w":a.value==="right"}));function c(u,m){(m==="left"||m==="right")&&v(u,m,i.value),(m==="top"||m==="bottom")&&p(u,m,i.value)}return()=>n.createVNode("div",{ref:i,class:o.value,style:d.value},[e.slots.default&&e.slots.default(),n.createVNode("span",{class:f.value,onMousedown:u=>c(u,a.value)},null)])}});function D(s,e,i){var b;const t=i==null?void 0:i.checkIsInFixedContextRules(),l=i&&i.getStyles&&i.getStyles()||"";function r(){return!(e.schema.componentType||t)}function h(){return!1}function y(){return!(e.schema.componentType||t)}function v(){return!!t}function p(g){if(!g)return null;if(g.schema.type==="Component")return g;const C=p(g.parent);return C||null}function a(g,C,S){return!!i&&i.canAccepts()}function o(){return e.schema.label||e.schema.title||e.schema.name}function d(){}function f(g,C){C&&(i==null||i.onAcceptMovedChildElement(C))}function c(g,C){const S=String(g.getAttribute("data-controltype"));return x(S)}function u(g){return g.contents?g.contents.length:-1}function m(g){}const R={canMove:r(),canSelectParent:h(),canDelete:y(),canNested:!v(),contents:e.schema.contents,elementRef:s,parent:(b=e.parent)==null?void 0:b.componentInstance.value,schema:e.schema,styles:l,canAccepts:a,getBelongedComponentInstance:p,getDraggingDisplayText:o,getDragScopeElement:d,onAcceptMovedChildElement:f,onAcceptNewChildElement:c,onAddNewChildElement:u,onChildElementMovedOut:m,triggerBelongedComponentToMoveWhenMoved:!!i&&i.triggerBelongedComponentToMoveWhenMoved};return n.ref(R)}const Y=n.defineComponent({name:"FSplitterDesign",props:w,emits:[],setup(s,e){const i=n.ref(),t=n.inject("design-item-context"),l=D(i,t);l.value.canNested=!1;const r=T(i),{horizontalResizeHandleStyle:h,verticalResizeHandleStyle:y,resizeOverlayStyle:v}=r;n.provide("splitter",{useResizeHandleComposition:r});const p=n.computed(()=>({"flex-direction":s.direction==="row"?"column":"row"}));return n.onMounted(()=>{i.value.componentInstance=l}),e.expose(l.value),()=>n.createVNode("div",{class:"f-splitter",ref:i,style:p.value},[e.slots.default&&e.slots.default(),n.createVNode("div",{class:"f-splitter-resize-overlay",style:v.value},null),n.createVNode("div",{class:"f-splitter-horizontal-resize-proxy",style:h.value},null),n.createVNode("div",{class:"f-splitter-vertical-resize-proxy",style:y.value},null)])}});function _(s,e){let t=!0;function l(){return!!t}function r(){const y=s,v=y.appearance&&y.appearance.class||"",p=v?v.split(" "):[],a=y.contents||[],o=a.length?a[0]:null,d=o&&o.appearance&&o.appearance.class||"",f=d?d.split(" "):[],c=e,u=c&&c.appearance&&c.appearance.class||"",m=u?u.split(" "):[];return p.includes("f-section-form")&&(c==null?void 0:c.type)==="content-container"&&f.includes("f-form-layout")||p.includes("f-section-tabs")&&m.includes("f-struct-wrapper")&&f.includes("f-component-tabs")||p.includes("f-section-grid")&&m.includes("f-struct-wrapper")&&(f.includes("f-component-grid")||f.includes("f-filter-container"))||p.includes("f-section-treegrid")&&m.includes("f-struct-wrapper")&&f.includes("f-component-treetable")||p.includes("f-section-oa-table")&&m.includes("f-struct-wrapper")&&f.includes("f-form-is-table")||p.includes("f-section-card-table")&&m.includes("f-struct-wrapper")&&f.includes("f-form-is-table")||p.includes("f-section-scheme")&&o&&o.type==="query-solution"||(p.includes("f-section-in-main")||p.includes("f-section-in-mainsubcard"))&&m.includes("f-struct-wrapper")&&o&&o.type==="content-container"||(p.includes("f-section-in-main")||p.includes("f-section-in-mainsubcard"))&&m.includes("f-struct-wrapper")&&o&&o.type==="file-upload-preview"?(t=!1,!0):o&&(o.type==="approval-comments"||o.type==="approval-comments")?(t=!1,!1):p.includes("f-section-grid")&&m.includes("f-struct-wrapper")&&f.includes("f-component-appointment-calendar")?(t=!1,!0):!1}function h(y){}return{canAccepts:l,checkIsInFixedContextRules:r,onAcceptMovedChildElement:h,triggerBelongedComponentToMoveWhenMoved:!1}}const G=n.defineComponent({name:"FSplitterPaneDesign",props:B,emits:[],setup(s,e){var c;const i=n.ref(),t=n.inject("design-item-context"),l=_(t.schema,(c=t.parent)==null?void 0:c.schema),r=D(i,t,l);r.value.canNested=!1,r.value.canMove=!1,r.value.canDelete=!1,n.onMounted(()=>{i.value.componentInstance=r}),e.expose(r.value);const h=n.inject("splitter"),{useResizeHandleComposition:y}=h,v=V(s,y),{actualHeight:p,actualWidth:a}=v,o=n.ref(s.position),d=n.computed(()=>{const u={"f-splitter-pane":!0,"f-splitter-pane-column":o.value==="left"||o.value==="right","f-splitter-pane-row":o.value==="bottom"||o.value==="top","f-splitter-pane-main":o.value==="center","f-component-splitter-pane":!0,"drag-container":!0};return s.customClass&&String(s.customClass).split(" ").reduce((m,R)=>(m[R]=!0,m),u),u}),f=n.computed(()=>{const u={};return(a.value&&o.value==="left"||o.value==="right")&&(u.width=`${a.value}px`),(p.value&&o.value==="bottom"||o.value==="top")&&(u.height=`${p.value}px`),u});return()=>n.createVNode("div",{ref:i,dragref:`${t.schema.id}-container`,class:d.value,style:f.value},[e.slots.default&&e.slots.default()])}}),J={install(s){s.component(j.name,j),s.component($.name,$)},register(s,e){s.splitter=j,e.splitter=H,s["splitter-pane"]=$,e["splitter-pane"]=N},registerDesigner(s,e){s.splitter=Y,e.splitter=H,s["splitter-pane"]=G,e["splitter-pane"]=N}};z.Splitter=j,z.default=J,z.splitterProps=w,z.splitterPropsResolver=H,Object.defineProperties(z,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/splitter/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "splitter",
+    "version": "1.0.2",
+    "main": "index.umd.js",
+    "module": "index.esm.js",
+    "style": "style.css",
+    "types": "../types/splitter/index.d.ts"
+}

package/splitter/style.css

@@ -0,0 +1 @@
+.f-splitter{flex-shrink:1;flex-grow:1;flex-basis:0;display:flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;position:relative}.f-splitter-pane.f-splitter-pane-main{flex-shrink:1;flex-grow:1;flex-basis:0;overflow:auto;display:flex}.f-splitter-pane.f-splitter-pane-column,.f-splitter-pane.f-splitter-pane-row{display:flex;flex-direction:column;box-shadow:0 0 8px #001c4014;padding:0;position:relative;z-index:100}.f-splitter-pane>.f-splitter-resize-bar.f-splitter-resize-bar-e{cursor:e-resize;width:.4375rem;right:-.3125rem;height:100%;top:0}.f-splitter-pane>.f-splitter-resize-bar.f-splitter-resize-bar-w{cursor:w-resize;width:.4375rem;left:-.3125rem;height:100%;top:0}.f-splitter-pane>.f-splitter-resize-bar.f-splitter-resize-bar-s{cursor:s-resize;height:.4375rem;bottom:-.3125rem;width:100%;left:0}.f-splitter-pane>.f-splitter-resize-bar.f-splitter-resize-bar-n{cursor:n-resize;height:.4375rem;top:-.3125rem;width:100%;left:0}.f-splitter-pane>.f-splitter-resize-bar{position:absolute;font-size:.1px;display:block;touch-action:none}.f-splitter-pane>.f-splitter-resize-bar:hover{background:rgba(42,135,255,.07)}.f-splitter-resize-overlay{z-index:98;width:100%;height:100%;cursor:e-resize;background:0 0;position:absolute}.f-splitter-horizontal-resize-proxy{width:.4375rem;background:rgba(42,135,255,.07);left:0;display:none;position:absolute;height:100%;z-index:100}.f-splitter-vertical-resize-proxy{height:.4375rem;background:rgba(42,135,255,.07);top:0;display:none;position:absolute;width:100%;z-index:100}

package/step/index.esm.js

@@ -0,0 +1,117 @@
+import { defineComponent as T, ref as a, computed as o, createVNode as l } from "vue";
+const B = {
+  direction: { type: String, default: "horizontal" },
+  fill: { type: Boolean, default: !1 },
+  height: { type: Number, default: 0 },
+  clickable: { type: Boolean, default: !0 },
+  steps: { type: Array, default: [] }
+};
+const h = /* @__PURE__ */ T({
+  name: "FStep",
+  props: B,
+  emits: [],
+  setup(n, N) {
+    const r = a(n.direction), p = a(n.fill), b = a(n.height), f = a(n.steps), c = a(0), d = a(n.clickable), g = a(0), y = o(() => ({
+      "f-progress-step-list": r.value === "horizontal",
+      "f-progress-step-list-block": r.value === "vertical",
+      "f-progress-step-horizontal-fill": r.value === "horizontal" && p.value,
+      "f-progress-step-vertical-fill": r.value === "vertical" && p.value
+    })), O = o(() => ({
+      height: r.value === "vertical" ? `${b.value}px` : ""
+    }));
+    function m(e, t) {
+      const s = {
+        step: !0,
+        active: t === c.value,
+        clickable: d.value,
+        "click-disable": e.disable,
+        current: t === c.value
+      };
+      return t < c.value && (s.finish = !0), e.status && (s[e.status] = !0), e.hasOwnProperty("class") && e.class.split(" ").reduce((u, i) => (u[i] = !0, u), s), s;
+    }
+    function A(e, t) {
+    }
+    function j(e, t) {
+      const s = {
+        "f-progressstep-row": !0,
+        "step-active": t === c.value,
+        "step-current": t === c.value
+      };
+      return t < c.value && (s["step-finish"] = !0), e.status && (s["step-" + e.status] = !0), s;
+    }
+    function v(e, t) {
+      const s = {
+        "step-icon": !0,
+        "step-success": t,
+        "k-icon": t,
+        "k-i-check": t
+      };
+      return e.hasOwnProperty("icon") && e.class.split(" ").reduce((u, i) => (u[i] = !0, u), s), s;
+    }
+    function k(e, t) {
+      const s = [];
+      return e.icon ? s.push(l("span", {
+        class: v(e, !1)
+      }, null)) : t >= c.value || t === g.value ? s.push(l("span", {
+        class: "step-icon"
+      }, [t + 1])) : s.push(l("span", {
+        class: v(e, !0)
+      }, null)), s;
+    }
+    function C(e, t) {
+      return {
+        "step-name": !0,
+        "step-name-success": t < c.value
+      };
+    }
+    function S(e, t) {
+      return l("div", {
+        class: "f-progress-step-title"
+      }, [l("p", {
+        class: C(e, t)
+      }, [e.title])]);
+    }
+    function z(e, t) {
+      return {
+        "f-progress-step-line": !0,
+        "f-progress-step-line-success": t === c.value
+      };
+    }
+    function w(e, t) {
+      return t !== f.value.length - 1;
+    }
+    const L = o(() => ({
+      triangle: !0,
+      "": r.value === "vertical"
+    }));
+    function P() {
+      return f.value.map((e, t) => l("li", {
+        class: m(e, t),
+        onClick: (s) => void 0
+      }, [l("div", {
+        class: j(e, t)
+      }, [l("div", {
+        class: "f-progress-step-content"
+      }, [k(e, t), S(e, t)]), w(e, t) && l("div", {
+        class: z(e, t)
+      }, [l("span", {
+        class: L.value
+      }, null)])])]));
+    }
+    return () => l("div", {
+      class: "f-progress-step"
+    }, [l("ul", {
+      class: y.value,
+      style: O.value
+    }, [P()])]);
+  }
+}), R = {
+  install(n) {
+    n.component(h.name, h);
+  }
+};
+export {
+  h as Step,
+  R as default,
+  B as stepProps
+};

package/step/index.umd.js

@@ -0,0 +1 @@
+(function(c,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(c=typeof globalThis<"u"?globalThis:c||self,s(c.step={},c.Vue))})(this,function(c,s){"use strict";const f={direction:{type:String,default:"horizontal"},fill:{type:Boolean,default:!1},height:{type:Number,default:0},clickable:{type:Boolean,default:!0},steps:{type:Array,default:[]}},w="",o=s.defineComponent({name:"FStep",props:f,emits:[],setup(n,L){const a=s.ref(n.direction),p=s.ref(n.fill),v=s.ref(n.height),d=s.ref(n.steps),r=s.ref(0),g=s.ref(n.clickable),y=s.ref(0),m=s.computed(()=>({"f-progress-step-list":a.value==="horizontal","f-progress-step-list-block":a.value==="vertical","f-progress-step-horizontal-fill":a.value==="horizontal"&&p.value,"f-progress-step-vertical-fill":a.value==="vertical"&&p.value})),O=s.computed(()=>({height:a.value==="vertical"?`${v.value}px`:""}));function j(e,t){const l={step:!0,active:t===r.value,clickable:g.value,"click-disable":e.disable,current:t===r.value};return t<r.value&&(l.finish=!0),e.status&&(l[e.status]=!0),e.hasOwnProperty("class")&&e.class.split(" ").reduce((i,u)=>(i[u]=!0,i),l),l}function B(e,t){}function N(e,t){const l={"f-progressstep-row":!0,"step-active":t===r.value,"step-current":t===r.value};return t<r.value&&(l["step-finish"]=!0),e.status&&(l["step-"+e.status]=!0),l}function h(e,t){const l={"step-icon":!0,"step-success":t,"k-icon":t,"k-i-check":t};return e.hasOwnProperty("icon")&&e.class.split(" ").reduce((i,u)=>(i[u]=!0,i),l),l}function V(e,t){const l=[];return e.icon?l.push(s.createVNode("span",{class:h(e,!1)},null)):t>=r.value||t===y.value?l.push(s.createVNode("span",{class:"step-icon"},[t+1])):l.push(s.createVNode("span",{class:h(e,!0)},null)),l}function k(e,t){return{"step-name":!0,"step-name-success":t<r.value}}function S(e,t){return s.createVNode("div",{class:"f-progress-step-title"},[s.createVNode("p",{class:k(e,t)},[e.title])])}function C(e,t){return{"f-progress-step-line":!0,"f-progress-step-line-success":t===r.value}}function T(e,t){return t!==d.value.length-1}const P=s.computed(()=>({triangle:!0,"":a.value==="vertical"}));function z(){return d.value.map((e,t)=>s.createVNode("li",{class:j(e,t),onClick:l=>void 0},[s.createVNode("div",{class:N(e,t)},[s.createVNode("div",{class:"f-progress-step-content"},[V(e,t),S(e,t)]),T(e,t)&&s.createVNode("div",{class:C(e,t)},[s.createVNode("span",{class:P.value},null)])])]))}return()=>s.createVNode("div",{class:"f-progress-step"},[s.createVNode("ul",{class:m.value,style:O.value},[z()])])}}),b={install(n){n.component(o.name,o)}};c.Step=o,c.default=b,c.stepProps=f,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/step/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "step",
+    "version": "1.0.2",
+    "main": "index.umd.js",
+    "module": "index.esm.js",
+    "style": "style.css",
+    "types": "../types/step/index.d.ts"
+}

package/step/style.css

@@ -0,0 +1 @@
+.f-progress-step .f-progress-step-list{display:flex;flex-direction:row;align-items:center}.f-progress-step .step{display:inline-block}.f-progress-step .step .f-progressstep-row{display:flex;position:relative;padding-right:.4375rem;padding-bottom:.9375rem}.f-progress-step .step .f-progressstep-row .f-progress-step-content{display:inline-block}.f-progress-step .step .f-progressstep-row .f-progress-step-content .step-icon{display:inline-block;width:1.875rem;height:1.875rem;margin-right:.5rem;margin-left:.5rem;line-height:1.875rem;border-radius:100%;font-size:.75rem;text-align:center;color:#fff;vertical-align:middle}.f-progress-step .step .f-progressstep-row .f-progress-step-content .f-progress-step-title{display:inline-block;vertical-align:middle}.f-progress-step .step .f-progressstep-row .f-progress-step-content .f-progress-step-title .step-name,.f-progress-step .step .f-progressstep-row .f-progress-step-content .f-progress-step-title .step-message{margin-bottom:0}.f-progress-step .step .f-progressstep-row .f-progress-step-content .f-progress-step-title .step-name{font-size:.875rem;color:#8c8c8c;line-height:1.25rem;padding-right:.625rem}.f-progress-step .step .f-progressstep-row .f-progress-step-content .f-progress-step-title .step-name.step-name-success{color:#000;opacity:.85}.f-progress-step .step .f-progressstep-row .f-progress-step-line{flex:1 1 auto;position:relative;display:inline-flex;min-width:3.75rem;vertical-align:middle}.f-progress-step .step .f-progressstep-row .f-progress-step-line:after{content:"";left:0;height:.125rem;overflow:hidden;position:absolute;right:.625rem;top:50%;margin-top:-.0625rem}.f-progress-step .step .f-progressstep-row .f-progress-step-line .triangle{position:absolute;right:0;top:50%;display:inline-block;width:.4375rem;height:.4375rem;margin-top:-.21875rem;transform:rotate(45deg)}.f-progress-step .f-progress-step-list-block .step{display:block}.f-progress-step .f-progress-step-list-block .step .f-progressstep-row{padding:0;flex-direction:column}.f-progress-step .f-progress-step-list-block .step .f-progressstep-row .f-progress-step-line{flex:1 1 auto;width:.625rem;min-width:.625rem;min-height:2.5rem;margin:.5rem 0 1.25rem 1.375rem}.f-progress-step .f-progress-step-list-block .step .f-progressstep-row .f-progress-step-line:after{content:"";border-top:0}.f-progress-step .f-progress-step-list-block .step .f-progressstep-row .f-progress-step-line .triangle{top:auto;left:-.3125rem;bottom:-.5rem;border-top:0}.f-progress-step .f-progress-step-list-block .step .f-progressstep-row .f-progress-step-line .f-progress-step-title .step-name{padding-right:.875rem}.f-progress-step .f-progress-step-horizontal-fill{display:flex;justify-content:space-between;flex-wrap:wrap}.f-progress-step .f-progress-step-horizontal-fill .step{flex:1 1 auto}.f-progress-step .f-progress-step-vertical-fill{display:flex;flex-direction:column;align-content:space-between}.f-progress-step .f-progress-step-vertical-fill .step{display:flex;flex:1 1 auto}.f-progress-step .f-progress-step-vertical-fill .step .f-progressstep-row{flex:1 1 auto;display:flex}.f-progress-step li.clickable{cursor:pointer}.f-progress-step li.click-disable{cursor:not-allowed}.f-progress-step .f-progress-step-empty{color:#000;opacity:.65;font-size:.875rem}.f-progress-step .f-progressstep-row-multi{display:flex;flex-direction:column;align-items:left}.f-progress-step .f-progressstep-row-multi .f-progressstep-multi-item-content{display:flex;flex-direction:row;align-items:center;cursor:pointer}.f-progress-step .f-progressstep-row-multi .f-step-multi-item{position:relative;padding-right:.4375rem;padding-bottom:.9375rem}.f-progress-step .f-progressstep-row-multi .f-step-multi-item:last-child{padding-bottom:0}.f-progress-step .f-progressstep-row-multi .f-step-multi-item.f-step-multi-item-active .f-progress-step-title .step-name,.f-progress-step .f-progressstep-row-multi .f-step-multi-item.f-step-multi-item-finish .f-progress-step-title .step-name{color:#000000d9!important}.f-progress-step .f-progress-step-list-block .step .f-progressstep-row.f-progressstep-row-multi{flex-direction:row}.f-progress-step .f-progress-step-list-block .step .f-progressstep-row.f-progressstep-row-multi .f-step-multi-item{padding:0;flex-direction:column}.f-progress-step .f-progress-step-list-block .step .f-progressstep-row.f-progressstep-row-multi .f-step-multi-item .f-progress-step-line{display:block}