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

Farris Vue, a Farris Design based Vue3 component library.

import { getCustomStyle as v, getCustomClass as C, withInstall as w } from "../../components/common/index.esm.js";
import P, { textAreaProps as u } from "../../components/textarea/index.esm.js";
import { defineComponent as R, ref as M, inject as d, computed as r, onMounted as j, createVNode as p } from "vue";
import { useDesignerComponent as S } from "../../components/designer-canvas/index.esm.js";
import { resolveAppearance as T, createPropsResolver as D } from "../../components/dynamic-resolver/index.esm.js";
import { InputBaseProperty as I } from "../../components/property-panel/index.esm.js";
const $ = /* @__PURE__ */ new Map([
  ["appearance", T]
]), F = "https://json-schema.org/draft/2020-12/schema", q = "https://farris-design.gitee.io/switch.schema.json", A = "textarea", H = "A Farris Component", E = "object", G = {
  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"
  }
}, L = [
  "type"
], V = [
  "id",
  "appearance",
  "binding",
  "visible"
], z = {
  $schema: F,
  $id: q,
  title: A,
  description: H,
  type: E,
  properties: G,
  required: L,
  ignore: V
};
function B(e, t, o) {
  return t;
}
const O = Object.assign({}, u, {
  readonly: {}
}), f = D(u, z, $, B);
class k extends I {
  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 N(e, t) {
  const o = e.schema;
  function n(s, a) {
    return new k(s, t).getPropertyConfig(o, a);
  }
  return { getPropsConfig: n };
}
const i = /* @__PURE__ */ R({
  name: "FTextareaDesign",
  props: O,
  emits: [""],
  setup(e, t) {
    const o = M(), n = d("designer-host-service"), s = d("design-item-context"), a = N(s, n), l = S(o, s, a), {
      designerContext: c
    } = n, g = r(() => c && c.terminalRef.value === "Mobile"), m = r(() => e.maxLength ? e.maxLength : e.modelValue.length), y = r(() => v({
      position: "relative"
    }, e.customStyle)), b = r(() => ({
      "box-shadow": g.value ? void 0 : "0 0 0 1px #dcdfe6 inset",
      border: "none",
      padding: "5px 10px",
      width: "100%"
    })), x = {
      position: "absolute",
      bottom: "5px",
      right: "10px"
    };
    j(() => {
      o.value.componentInstance = l;
    }), t.expose(l.value);
    const h = r(() => C({
      "h-100": !0
    }, e.customClass));
    return () => p("div", {
      class: h.value,
      style: y.value,
      ref: o
    }, [p("textarea", {
      id: e.id,
      tabindex: e.tabIndex,
      disabled: !1,
      readonly: !0,
      style: b.value,
      placeholder: e.placeholder,
      rows: e.rows
    }, null), e.showCount && p("span", {
      style: x
    }, [`${e.modelValue.length}/${m.value}`])]);
  }
});
i.register = (e, t, o, n) => {
  e.textarea = P, t.textarea = f;
};
i.registerDesigner = (e, t, o) => {
  e.textarea = i, t.textarea = f;
};
const Y = w(i);
export {
  i as FTextareaDesign,
  Y as default
};