@farris/ui-vue/designer/number-spinner/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { FormSchemaEntityFieldTypeName as C, withInstall as P } from "../../components/common/index.esm.js";
import S, { numberSpinnerProps as F } from "../../components/number-spinner/index.esm.js";
import { computed as p, createVNode as l, defineComponent as N, ref as y, inject as v, onMounted as j } from "vue";
import { resolveAppearance as R, createPropsResolver as B } from "../../components/dynamic-resolver/index.esm.js";
import { useDesignerComponent as V } from "../../components/designer-canvas/index.esm.js";
import { InputBaseProperty as M } from "../../components/property-panel/index.esm.js";
const I = /* @__PURE__ */ new Map([
  ["appearance", R]
]), A = "https://json-schema.org/draft/2020-12/schema", O = "https://farris-design.gitee.io/number-spinner.schema.json", k = "number-spinner", T = "A Farris Input Component", q = "object", $ = {
  id: {
    description: "The unique identifier for a number spinner",
    type: "string"
  },
  type: {
    description: "The type string of number spinner component",
    type: "string",
    default: "number-spinner"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: "请输入数字"
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  disabled: {
    description: "",
    type: "boolean",
    default: !1
  },
  required: {
    description: "",
    type: "boolean",
    default: !1
  },
  precision: {
    description: "",
    type: "number",
    default: 0
  },
  min: {
    description: "",
    type: "number"
  },
  step: {
    description: "",
    type: "number",
    default: 1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  textAlign: {
    description: "",
    type: "string",
    enum: [
      "left",
      "middle",
      "right"
    ],
    default: "left"
  },
  nullable: {
    description: "",
    type: "boolean",
    default: !1
  },
  max: {
    description: "",
    type: "number"
  },
  onBlur: {
    description: "",
    type: "string",
    default: ""
  },
  onClickLinkLabel: {
    description: "",
    type: "string",
    default: ""
  },
  showZero: {
    description: "",
    type: "boolean",
    default: !0
  },
  useThousands: {
    description: "",
    type: "boolean",
    default: !0
  },
  keyboard: {
    description: "",
    type: "boolean",
    default: !0
  },
  bigNumber: {
    description: "",
    type: "boolean",
    default: !1
  },
  updateOn: {
    description: "",
    type: "string",
    default: "blur"
  },
  showButton: {
    description: "",
    type: "boolean",
    default: !0
  },
  needValid: {
    description: "",
    type: "boolean",
    default: !1
  }
}, E = [
  "type"
], G = [
  "id",
  "appearance",
  "binding",
  "visible"
], L = {
  $schema: A,
  $id: O,
  title: k,
  description: T,
  type: q,
  properties: $,
  required: E,
  ignore: G
};
function Z(r, e, n) {
  return e;
}
const w = Object.assign({}, F, {
  readonly: {}
}), x = B(w, L, I, Z);
function H() {
  const r = p(() => ({
    "input-group-append": !0,
    "btn-group": !0,
    "btn-group-number": !0
  })), e = p(() => ({
    btn: !0,
    "btn-secondary": !0,
    "btn-number-flag": !0
  })), n = p(() => ({
    cursor: "pointer",
    "margin-left": 0
  })), i = p(() => ({
    cursor: "pointer",
    "margin-left": 0
  }));
  return () => l("div", {
    class: r.value
  }, [l("button", {
    class: e.value,
    style: n.value
  }, [l("span", {
    class: "f-icon f-icon-arrow-chevron-up number-arrow-chevron"
  }, null)]), l("button", {
    class: e.value,
    style: i.value
  }, [l("span", {
    class: "f-icon f-icon-arrow-chevron-down number-arrow-chevron"
  }, null)])]);
}
class z extends M {
  constructor(e, n) {
    super(e, n);
  }
  getEditorProperties(e) {
    var s, u, c, d, a, b, f, g;
    let n, i = !1;
    if (((s = e == null ? void 0 : e.binding) == null ? void 0 : s.type) === "Form") {
      const o = this.schemaService.getFieldByIDAndVMID(e.binding.field, this.viewModelId);
      (u = o == null ? void 0 : o.schemaField) != null && u.type && (n = o.schemaField.type.precision, i = o.schemaField.type.name === "BigNumber");
    }
    return this.getComponentConfig(e, { type: "number-spinner" }, {
      precision: {
        description: "",
        title: "精度",
        type: "number",
        editor: {
          readonly: n === 0,
          min: 0,
          max: n,
          needValid: !0
        },
        refreshPanelAfterChanged: !0
      },
      step: {
        description: "",
        title: "步长",
        type: "number",
        editor: {
          min: 0,
          needValid: !0,
          precision: (c = e == null ? void 0 : e.editor) == null ? void 0 : c.precision
        }
      },
      min: {
        description: "",
        title: "最小值",
        type: "number",
        editor: {
          nullable: !0,
          max: (d = e == null ? void 0 : e.editor) == null ? void 0 : d.max,
          precision: (a = e == null ? void 0 : e.editor) == null ? void 0 : a.precision,
          bigNumber: i,
          needValid: !0
        },
        refreshPanelAfterChanged: !0,
        visible: this.designViewModelField != null || this.formRule != null
      },
      max: {
        description: "",
        title: "最大值",
        type: "number",
        editor: {
          nullable: !0,
          min: ((b = e == null ? void 0 : e.editor) == null ? void 0 : b.min) === void 0 || (f = e == null ? void 0 : e.editor) == null ? void 0 : f.min,
          precision: (g = e == null ? void 0 : e.editor) == null ? void 0 : g.precision,
          bigNumber: i,
          needValid: !0
        },
        refreshPanelAfterChanged: !0,
        visible: this.designViewModelField != null || this.formRule != null
      },
      textAlign: {
        description: "",
        title: "对齐方式",
        type: "enum",
        editor: {
          editable: !1,
          data: [
            {
              id: "left",
              name: "左对齐"
            },
            {
              id: "center",
              name: "居中"
            },
            {
              id: "right",
              name: "右对齐"
            }
          ]
        }
      },
      bigNumber: {
        description: "",
        title: "支持大数字",
        type: "boolean",
        readonly: !0,
        visible: i
      },
      showZero: {
        description: "",
        title: "显示0值",
        type: "boolean"
      },
      nullable: {
        description: "允许设置为 null",
        title: "允许为空",
        type: "boolean"
      },
      useThousands: {
        description: "",
        title: "启用千分位",
        type: "boolean"
      },
      showButton: {
        description: "",
        title: "显示加减按钮",
        type: "boolean"
      }
    }, function(o, h, K) {
      if (o)
        switch (o.propertyID) {
          case "precision": {
            h.formatter && (h.formatter.precision = o.propertyValue);
            break;
          }
        }
    });
  }
  /**
   * 切换绑定属性 
   */
  changeBindingField(e, n, i) {
    var s;
    super.changeBindingField(e, n);
    const t = i;
    e.editor && ((s = t == null ? void 0 : t.type) == null ? void 0 : s.name) === C.Number && (e.editor.precision = t.type.precision);
  }
}
function J(r, e) {
  const n = r.schema;
  function i(t, s) {
    return new z(t, e).getPropertyConfig(n, s);
  }
  return { getPropsConfig: i };
}
const m = /* @__PURE__ */ N({
  name: "FNumberSpinnerDesign",
  props: w,
  emits: ["update:modelValue", "valueChange", "change", "blur", "focus", "click", "input"],
  setup(r, e) {
    const n = H(), i = y(), t = v("designer-host-service"), s = v("design-item-context"), u = J(s, t), c = V(i, s, u);
    j(() => {
      i.value.componentInstance = c;
    }), e.expose(c.value);
    const d = y();
    return () => l("div", {
      ref: i,
      class: "input-group flex-row f-cmp-number-spinner"
    }, [l("input", {
      ref: d,
      class: "form-control",
      readonly: !0,
      placeholder: r.placeholder
    }, null), n()]);
  }
});
m.register = (r, e, n, i) => {
  r["number-spinner"] = S, e["number-spinner"] = x;
};
m.registerDesigner = (r, e, n) => {
  r["number-spinner"] = m, e["number-spinner"] = x;
};
const D = P(m);
export {
  m as FNumberSpinnerDesign,
  D as default,
  w as numberSpinnerDesignProps,
  x as propsResolver
};