@farris/ui-vue/designer/textarea/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { withInstall as b } from "../../components/common/index.esm.js";
import x, { textAreaProps as c } from "../../components/textarea/index.esm.js";
import { defineComponent as h, ref as v, inject as d, computed as p, onMounted as C, createVNode as l } from "vue";
import { useDesignerComponent as w } from "../../components/designer-canvas/index.esm.js";
import { resolveAppearance as P, createPropsResolver as R } from "../../components/dynamic-resolver/index.esm.js";
import { InputBaseProperty as j } from "../../components/property-panel/index.esm.js";
const T = /* @__PURE__ */ new Map([
  ["appearance", P]
]), D = "https://json-schema.org/draft/2020-12/schema", I = "https://farris-design.gitee.io/switch.schema.json", M = "textarea", $ = "A Farris Component", F = "object", S = {
  id: {
    description: "The unique identifier for a textarea",
    type: "string"
  },
  type: {
    description: "The type string of textarea component",
    type: "string",
    default: "textarea"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disabled: {
    type: "boolean",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  required: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  rows: {
    description: "",
    type: "number"
  },
  showCount: {
    description: "",
    type: "boolean",
    default: !1
  },
  maxLength: {
    description: "",
    type: "number",
    default: 0
  },
  updateOn: {
    description: "",
    type: "string",
    default: "blur"
  },
  allowUnlimtedWhenEmpty: {
    description: "",
    type: "boolean",
    default: !0
  },
  autoHeight: {
    description: "",
    type: "boolean",
    default: !1
  },
  resizable: {
    description: "",
    type: "boolean",
    default: !1
  },
  lineBreak: {
    description: "",
    type: "boolean",
    default: "enter"
  }
}, q = [
  "type"
], A = [
  "id",
  "appearance",
  "binding",
  "visible"
], H = {
  $schema: D,
  $id: I,
  title: M,
  description: $,
  type: F,
  properties: S,
  required: q,
  ignore: A
};
function E(e, t, o) {
  return t;
}
const G = Object.assign({}, c, {
  readonly: {}
}), u = R(c, H, T, E);
class L extends j {
  constructor(t, o) {
    super(t, o);
  }
  /**
   * 多行文本应用在卡片
   * @param propertyData 
   * @returns 
   */
  getEditorProperties(t) {
    return this.getComponentConfig(t, { type: "textarea" }, {
      // rows: {
      //     description: "指定的可见行数的最小值为2",
      //     title: "文本区域可见的行数",
      //     type: "number",
      //     editor: {
      //         min: 2,
      //         nullable:true
      //     }
      // },
      // maxLength: {
      //     description: "文本字数最大长度",
      //     title: "最大长度",
      //     type: "number",
      //     editor: {
      //         nullable: true,
      //         min: 0, 
      //         useThousands: false
      //     }
      // },
      // showCount: {
      //     description: "",
      //     title: "展示输入文本数量",
      //     type: "boolean"
      // },
      resizable: {
        description: "",
        title: "拖拽调整大小",
        type: "boolean"
      },
      autoHeight: {
        description: "",
        title: "自动高度",
        visible: !1,
        type: "boolean"
      }
    });
  }
  /**
   * 多行文本应用在表格
   * @param propertyData 
   * @returns 
   */
  getGridFieldEdtiorProperties(t) {
    return this.getComponentConfig(t, { type: "textarea" }, {
      autoHeight: {
        description: "",
        title: "自动高度",
        visible: !1,
        type: "boolean"
      }
    });
  }
}
function V(e, t) {
  const o = e.schema;
  function n(r, s) {
    return new L(r, t).getPropertyConfig(o, s);
  }
  return { getPropsConfig: n };
}
const i = /* @__PURE__ */ h({
  name: "FTextareaDesign",
  props: G,
  emits: [""],
  setup(e, t) {
    const o = v(), n = d("designer-host-service"), r = d("design-item-context"), s = V(r, n), a = w(o, r, s), f = p(() => e.maxLength ? e.maxLength : e.modelValue.length), g = p(() => ({
      position: "relative"
    })), m = p(() => ({
      "box-shadow": "0 0 0 1px #dcdfe6 inset",
      border: "none",
      padding: "5px 10px",
      width: "100%"
    })), y = {
      position: "absolute",
      bottom: "5px",
      right: "10px"
    };
    return C(() => {
      o.value.componentInstance = a;
    }), t.expose(a.value), () => l("div", {
      style: g.value,
      ref: o
    }, [l("textarea", {
      id: e.id,
      tabindex: e.tabIndex,
      disabled: !1,
      readonly: !0,
      style: m.value,
      placeholder: e.placeholder,
      rows: e.rows
    }, null), e.showCount && l("span", {
      style: y
    }, [`${e.modelValue.length}/${f.value}`])]);
  }
});
i.register = (e, t, o, n) => {
  e.textarea = x, t.textarea = u;
};
i.registerDesigner = (e, t, o) => {
  e.textarea = i, t.textarea = u;
};
const W = b(i);
export {
  i as FTextareaDesign,
  W as default
};