@farris/ui-vue/components/spacing-editor/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as l, computed as v, createVNode as e, createTextVNode as m, nextTick as D, defineComponent as w } from "vue";
import V from "../number-spinner/index.esm.js";
import b from "../combo-list/index.esm.js";
const P = {
  /** 预设间距列表 */
  defaultSpacings: {
    type: Array,
    default: [
      { id: "default", value: "4", name: "系统默认" },
      { id: "large", value: "20", name: "大(20px)" },
      { id: "middle", value: "16", name: "中(16px)" },
      { id: "small", value: "12", name: "小(12px)" },
      { id: "exsmall", value: "8", name: "超小(8px)" },
      { id: "none", value: "0", name: "无(0px)" },
      { id: "custom", value: "custom", name: "自定义" }
    ]
  },
  /** 方向列表 */
  directions: {
    type: Array,
    default: [
      { id: "top", title: "上" },
      { id: "right", title: "右" },
      { id: "bottom", title: "下" },
      { id: "left", title: "左" }
    ]
  },
  /** 外间距 */
  margins: { type: Array, default: [4, 4, 4, 4] },
  /** 内间距 */
  paddings: { type: Array, default: [4, 4, 4, 4] }
};
function E(t, i) {
  const {
    defaultSpacings: s
  } = t, {
    directions: r
  } = t, o = l(t.margins), d = l(t.paddings), n = l(!1), u = l("default"), f = v(() => ({
    "f-icon": !0,
    "mr-1": !0,
    "f-spacing-editor-icon": !0,
    "f-icon-arrow-60-right": !n.value,
    "f-icon-arrow-60-down": n.value
  })), c = v(() => ({
    margin: o.value.join("px ") + "px",
    padding: d.value.join("px ") + "px"
  }));
  function p() {
    n.value = !n.value;
  }
  function C(a) {
    a[0].name !== "自定义" ? (o.value.fill(a[0].value), n.value = !1, D(() => {
      n.value = !0;
    }), i.emit("valueChanged", c.value)) : n.value = !0;
  }
  function y() {
    u.value = "custom", i.emit("valueChanged", c.value);
  }
  function x() {
    return n.value ? e("div", {
      class: "f-spacing-editor-custom-container"
    }, [r.map((a, g) => e("div", null, [e("div", {
      class: "f-spacing-editor-custom"
    }, [e("div", {
      class: "f-spacing-editor-title"
    }, [a.title, m("间距(px)")]), e(V, {
      style: "flex: 1 1 0",
      min: 0,
      modelValue: o.value[g],
      "onUpdate:modelValue": (S) => o.value[g] = S,
      onChange: y
    }, null)])]))]) : "";
  }
  function h() {
    return e("div", {
      class: "f-spacing-editor-container"
    }, [e("div", {
      style: "display: flex"
    }, [e("div", {
      class: "f-spacing-editor-title"
    }, [e("div", {
      class: f.value,
      onClick: p
    }, null), e("div", null, [m("外间距")])]), e(b, {
      style: "flex: 1 1 0",
      data: s,
      modelValue: u.value,
      "onUpdate:modelValue": (a) => u.value = a,
      onChange: C
    }, null)]), x()]);
  }
  return {
    renderSpacingEditorMargin: h
  };
}
function M(t, i) {
  const {
    defaultSpacings: s
  } = t, {
    directions: r
  } = t, o = l(t.margins), d = l(t.paddings), n = l(!1), u = l("default"), f = v(() => ({
    "f-icon": !0,
    "mr-1": !0,
    "f-spacing-editor-icon": !0,
    "f-icon-arrow-60-right": !n.value,
    "f-icon-arrow-60-down": n.value
  })), c = v(() => ({
    margin: o.value.join("px ") + "px",
    padding: d.value.join("px ") + "px"
  }));
  function p() {
    n.value = !n.value;
  }
  function C(a) {
    a[0].name !== "自定义" ? (d.value.fill(a[0].value), n.value = !1, D(() => {
      n.value = !0;
    }), i.emit("valueChanged", c.value)) : n.value = !0;
  }
  function y() {
    u.value = "custom", i.emit("valueChanged", c.value);
  }
  function x() {
    return n.value ? e("div", {
      class: "f-spacing-editor-custom-container"
    }, [r.map((a, g) => e("div", null, [e("div", {
      class: "f-spacing-editor-custom"
    }, [e("div", {
      class: "f-spacing-editor-title"
    }, [a.title, m("间距(px)")]), e(V, {
      style: "flex: 1 1 0",
      min: 0,
      modelValue: d.value[g],
      "onUpdate:modelValue": (S) => d.value[g] = S,
      onChange: y
    }, null)])]))]) : "";
  }
  function h() {
    return e("div", {
      class: "f-spacing-editor-container"
    }, [e("div", {
      style: "display: flex"
    }, [e("div", {
      class: "f-spacing-editor-title"
    }, [e("div", {
      class: f.value,
      onClick: p
    }, null), e("div", null, [m("内间距")])]), e(b, {
      style: "flex: 1 1 0",
      data: s,
      modelValue: u.value,
      "onUpdate:modelValue": (a) => u.value = a,
      onChange: C
    }, null)]), x()]);
  }
  return {
    renderSpacingEditorPadding: h
  };
}
const j = /* @__PURE__ */ w({
  name: "FSpacingEditor",
  props: P,
  emits: ["valueChanged"],
  setup(t, i) {
    const {
      renderSpacingEditorMargin: s
    } = E(t, i), {
      renderSpacingEditorPadding: r
    } = M(t, i);
    return () => e("div", null, [s(), r()]);
  }
}), U = {
  install(t) {
    t.component(j.name, j);
  }
  // register(componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>, resolverMap: Record<string, any>): void {
  //     componentMap.spacingEditor = SpacingEditor;
  //     propsResolverMap.spacingEditor = propsResolver;
  // },
  // registerDesigner(componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>): void {
  //     componentMap.spacingEditor = SpacingEditorDesign;
  //     propsResolverMap.spacingEditor = propsResolver;
  // }
};
export {
  j as SpacingEditor,
  U as default,
  P as spacingEditorProps
};