vue-admin-core/lib/formily/preview-text/src/index.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../__builtins__/shared/index.js');
var reactiveVue = require('@formily/reactive-vue');
var vue$1 = require('@formily/vue');
var shared = require('@formily/shared');
var index = require('../../__builtins__/configs/index.js');
var _const = require('../../../utils/const.js');
require('../../space/index.js');
var elementPlus = require('element-plus');
var numeral = require('numeral');
require('numeral/locales/chs.js');
require('../../../components/config-provider/index.js');
var lodashEs = require('lodash-es');
var findTree = require('xe-utils/findTree.js');
var vueDompurifyHtml = require('vue-dompurify-html');
var utils = require('../../../components/msg-editor/src/utils.js');
var createContext = require('../../__builtins__/shared/create-context.js');
var resolveComponent = require('../../__builtins__/shared/resolve-component.js');
var index$1 = require('../../space/src/index.js');
var useGlobalConfig = require('../../../components/config-provider/src/hooks/use-global-config.js');
var utils$1 = require('../../__builtins__/shared/utils.js');

numeral.locale("chs");
const prefixCls = `${index.stylePrefix}-preview-text`;
const PlaceholderContext = createContext.createContext("N/A");
const domHtml = vueDompurifyHtml.buildVueDompurifyHTMLDirective({
  default: {
    USE_PROFILES: { html: true, mathMl: true }
  }
});
const usePlaceholder = (value) => {
  const placeholderCtx = createContext.useContext(PlaceholderContext);
  const placeholder = vue.computed(() => {
    return shared.isValid(value == null ? void 0 : value.value) && (value == null ? void 0 : value.value) !== "" ? value == null ? void 0 : value.value : resolveComponent.resolveComponent(placeholderCtx.value) || "N/A";
  });
  return placeholder;
};
const Input = vue.defineComponent({
  name: "FPreviewTextInput",
  props: ["value", "format"],
  setup(props, { attrs, slots }) {
    const value = vue.toRef(props, "value");
    const formatVal = props.format ? numeral(value.value).format(props.format) : null;
    const placeholder = usePlaceholder(value);
    return () => {
      return vue.h(
        index$1.Space,
        {
          class: [prefixCls],
          style: attrs.style
        },
        {
          default: () => {
            var _a, _b, _c, _d;
            return [
              (_a = slots == null ? void 0 : slots.prepend) == null ? void 0 : _a.call(slots),
              (_b = slots == null ? void 0 : slots.prefix) == null ? void 0 : _b.call(slots),
              formatVal || placeholder.value,
              (_c = slots == null ? void 0 : slots.suffix) == null ? void 0 : _c.call(slots),
              (_d = slots == null ? void 0 : slots.append) == null ? void 0 : _d.call(slots)
            ].filter((child) => !!child);
          }
        }
      );
    };
  }
});
const RichText = vue.defineComponent({
  name: "FPreviewTextRichText",
  props: ["value"],
  setup(props, { attrs }) {
    const value = vue.toRef(props, "value");
    const placeholder = usePlaceholder(value);
    return () => {
      return vue.h(
        "div",
        {
          class: [prefixCls, "w-e-text-container"],
          style: attrs.style
        },
        {
          default: () => [
            vue.withDirectives(vue.h("div", { "data-slate-editor": "" }), [[domHtml, placeholder.value]])
          ]
        }
      );
    };
  }
});
const MsgEditor = vue.defineComponent({
  name: "FPreviewTextMsgEditor",
  props: ["value", "options", "prefix", "suffix"],
  setup(props, { attrs }) {
    const fieldRef = vue$1.useField();
    const field = fieldRef.value;
    const value = vue.toRef(props, "value");
    const placeholder = usePlaceholder(value);
    return () => {
      var _a, _b;
      let dataSource = ((_a = field == null ? void 0 : field.dataSource) == null ? void 0 : _a.length) ? field.dataSource : ((_b = props == null ? void 0 : props.options) == null ? void 0 : _b.length) ? props.options : [];
      dataSource = dataSource.reduce(
        (pre, next) => ({
          ...pre,
          [next.value]: { label: next.label, value: next.value }
        }),
        {}
      );
      return vue.h(
        "div",
        {
          class: [prefixCls, `${_const.getPrefixCls("msg-editor")}`],
          style: attrs.style
        },
        {
          default: () => [
            vue.withDirectives(vue.h("div", { "data-slate-editor": "" }), [
              [
                domHtml,
                utils.textToHtml(value.value, dataSource, {
                  prefix: props.prefix || "\\$\\{",
                  suffix: props.suffix || "\\}"
                }) || placeholder.value
              ]
            ])
          ]
        }
      );
    };
  }
});
const Select = reactiveVue.observer(
  vue.defineComponent({
    name: "FPreviewTextSelect",
    setup(_props, { attrs }) {
      const config = useGlobalConfig.useGlobalConfig();
      const fieldRef = vue$1.useField();
      const schema = vue$1.useFieldSchema();
      const field = fieldRef.value;
      const props = attrs;
      const optionsProps = {
        label: "label",
        value: "value",
        ...props.props
      };
      const valueKey = optionsProps.value;
      const labelKey = optionsProps.label;
      const placeholder = usePlaceholder();
      const getSelected = () => {
        var _a;
        const value = props.value;
        if (props.multiple) {
          if (shared.isArr(value)) {
            return value.map((val) => ({ label: val, value: val }));
          }
          if (lodashEs.isString(value)) {
            return value.split(((_a = schema.value["x-data"]) == null ? void 0 : _a["separator"]) || ",").map((val) => ({ label: val, value: val }));
          }
          return [];
        } else {
          return shared.isValid(value) ? [{ label: value, value }] : [];
        }
      };
      const getLabels = () => {
        var _a, _b;
        const selected = getSelected();
        if (!selected.length) {
          return vue.h(
            elementPlus.ElTag,
            {},
            {
              default: () => placeholder.value
            }
          );
        }
        const dataSource = ((_a = field == null ? void 0 : field.dataSource) == null ? void 0 : _a.length) ? field.dataSource : ((_b = props == null ? void 0 : props.options) == null ? void 0 : _b.length) ? props.options : [];
        return selected.map(({ value, label }, key) => {
          const item = dataSource == null ? void 0 : dataSource.find(
            (item2) => item2[valueKey] == value || item2[config.value.dictValueKey] == value
          );
          const text = (item == null ? void 0 : item[labelKey]) || (item == null ? void 0 : item[config.value.dictLabelKey]) || label;
          return vue.h(
            elementPlus.ElTag,
            {
              key,
              type: (item == null ? void 0 : item[config.value.elTagTypeKey || "type"]) || (item == null ? void 0 : item.type),
              effect: "light"
            },
            {
              default: () => text || placeholder.value
            }
          );
        });
      };
      return () => {
        return vue.h(
          index$1.Space,
          {
            class: [prefixCls],
            style: attrs.style
          },
          {
            default: () => getLabels()
          }
        );
      };
    }
  })
);
const Cascader = reactiveVue.observer(
  vue.defineComponent({
    name: "FPreviewTextCascader",
    setup(_props, { attrs }) {
      var _a, _b, _c;
      const fieldRef = vue$1.useField();
      const schema = vue$1.useFieldSchema();
      const field = fieldRef.value;
      const props = attrs;
      const placeholder = usePlaceholder();
      const valueKey = ((_a = props.props) == null ? void 0 : _a.value) || "value";
      const labelKey = ((_b = props.props) == null ? void 0 : _b.label) || "label";
      const childrenKey = ((_c = props.props) == null ? void 0 : _c.children) || "children";
      const getSelected = () => {
        var _a2;
        if (lodashEs.isString(props.value)) {
          return props.value.split(((_a2 = schema.value["x-data"]) == null ? void 0 : _a2["separator"]) || ",").map((val) => ({ label: val, value: val }));
        }
        return shared.isArr(props.value) ? props.value.map((val) => ({ label: val, value: val })) : [];
      };
      const getLabels = () => {
        var _a2, _b2;
        const selected = getSelected();
        if (!(selected == null ? void 0 : selected.length)) {
          return placeholder.value;
        }
        const dataSource = ((_a2 = field == null ? void 0 : field.dataSource) == null ? void 0 : _a2.length) ? field.dataSource : ((_b2 = props == null ? void 0 : props.options) == null ? void 0 : _b2.length) ? props.options : [];
        return selected.map(({ label, value }) => {
          const item = findTree(dataSource, (item2) => (item2 == null ? void 0 : item2[valueKey]) == value, {
            children: childrenKey
          });
          const text = label;
          if (item) {
            return item.item[labelKey];
          }
          return text || placeholder.value;
        }).join(" / ");
      };
      return () => {
        return getLabels();
      };
    }
  })
);
const DatePicker = vue.defineComponent({
  name: "FPreviewTextDatePicker",
  setup(_props, { attrs }) {
    const props = attrs;
    const placeholder = usePlaceholder();
    const config = useGlobalConfig.useGlobalConfig();
    const format = attrs.format || config.value.dateTimeFormat;
    const getLabels = () => {
      if (shared.isArr(props.value)) {
        const labels = props.value.map(
          (value) => elementPlus.dayjs(value).format(format) || placeholder.value
        );
        return labels.join("~");
      } else {
        return elementPlus.dayjs(props.value).format(format) || placeholder.value;
      }
    };
    return () => {
      return vue.h(
        "div",
        {
          class: [prefixCls],
          style: attrs.style
        },
        {
          default: () => getLabels()
        }
      );
    };
  }
});
const TimePicker = vue.defineComponent({
  name: "FPreviewTextTimePicker",
  setup(_props, { attrs }) {
    const props = attrs;
    const config = useGlobalConfig.useGlobalConfig();
    const placeholder = usePlaceholder();
    const format = attrs.format || config.value.timeFormat;
    const getLabels = () => {
      if (shared.isArr(props.value)) {
        const labels = props.value.map(
          (value) => elementPlus.dayjs(value).format(format) || placeholder.value
        );
        return labels.join("~");
      } else {
        return elementPlus.dayjs(props.value).format(format) || placeholder.value;
      }
    };
    return () => {
      return vue.h(
        "div",
        {
          class: [prefixCls],
          style: attrs.style
        },
        {
          default: () => getLabels()
        }
      );
    };
  }
});
const Text = vue.defineComponent({
  name: "FPreviewText",
  props: ["value", "format"],
  setup(props, { attrs }) {
    const value = vue.toRef(props, "value");
    const formatVal = props.format ? numeral(value.value).format(props.format) : null;
    const placeholder = usePlaceholder(value);
    return () => {
      return vue.h(
        "span",
        {
          class: [prefixCls],
          style: attrs.style
        },
        {
          default: () => formatVal || placeholder.value
        }
      );
    };
  }
});
const TreeSelect = vue.defineComponent({
  name: "FPreviewTextTreeSelect",
  setup(_props, { attrs }) {
    var _a, _b, _c;
    const config = useGlobalConfig.useGlobalConfig();
    const fieldRef = vue$1.useField();
    const schema = vue$1.useFieldSchema();
    const field = fieldRef.value;
    const props = attrs;
    const valueKey = (props == null ? void 0 : props.nodeKey) || ((_a = props == null ? void 0 : props.props) == null ? void 0 : _a.value) || "value";
    const labelKey = ((_b = props == null ? void 0 : props.props) == null ? void 0 : _b.label) || "label";
    const childrenKey = ((_c = props == null ? void 0 : props.props) == null ? void 0 : _c.children) || "children";
    const placeholder = usePlaceholder();
    const getSelected = () => {
      var _a2;
      const value = props.value;
      if (props.multiple) {
        if (shared.isArr(value)) {
          return value.map((val) => ({ label: val, value: val }));
        }
        if (lodashEs.isString(value)) {
          return value.split(((_a2 = schema.value["x-data"]) == null ? void 0 : _a2["separator"]) || ",").map((val) => ({ label: val, value: val }));
        }
        return [];
      } else {
        return lodashEs.isEmpty(value) ? [] : [{ label: value, value }];
      }
    };
    const getLabels = () => {
      var _a2, _b2;
      const selected = getSelected();
      if (!selected.length) {
        return vue.h(
          elementPlus.ElTag,
          {},
          {
            default: () => placeholder.value
          }
        );
      }
      const dataSource = ((_a2 = field == null ? void 0 : field.dataSource) == null ? void 0 : _a2.length) ? field.dataSource : ((_b2 = props == null ? void 0 : props.data) == null ? void 0 : _b2.length) ? props.data : [];
      return selected.map(({ value, label }, key) => {
        var _a3, _b3, _c2;
        const item = findTree(dataSource, (item2) => item2[valueKey] == value, {
          children: childrenKey
        });
        const text = ((_a3 = item == null ? void 0 : item.item) == null ? void 0 : _a3[labelKey]) || label || placeholder.value;
        return vue.h(
          elementPlus.ElTag,
          {
            key,
            type: ((_b3 = item == null ? void 0 : item.item) == null ? void 0 : _b3[config.value.elTagTypeKey || "type"]) || ((_c2 = item == null ? void 0 : item.item) == null ? void 0 : _c2.type),
            effect: "light"
          },
          {
            default: () => text
          }
        );
      });
    };
    return () => {
      return vue.h(
        index$1.Space,
        {
          class: [prefixCls],
          style: attrs.style
        },
        {
          default: () => getLabels()
        }
      );
    };
  }
});
const PreviewText = utils$1.composeExport(Text, {
  Input,
  Select,
  CheckboxGroup: Select,
  RadioGroup: Select,
  Cascader,
  DatePicker,
  TimePicker,
  TreeSelect,
  Placeholder: PlaceholderContext.Provider,
  RichText,
  MsgEditor,
  usePlaceholder
});

exports.PreviewText = PreviewText;
exports.default = PreviewText;
exports.usePlaceholder = usePlaceholder;
//# sourceMappingURL=index.js.map