vue-admin-core/es/formily/preview-text/src/index.mjs

A Component Library for Vue 3

import { computed, defineComponent, toRef, h, withDirectives } from 'vue';
import '../../__builtins__/shared/index.mjs';
import { observer } from '@formily/reactive-vue';
import { useField, useFieldSchema } from '@formily/vue';
import { isValid, isArr } from '@formily/shared';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import { getPrefixCls } from '../../../utils/const.mjs';
import '../../space/index.mjs';
import { ElTag, dayjs } from 'element-plus';
import numeral from 'numeral';
import 'numeral/locales/chs.js';
import '../../../components/config-provider/index.mjs';
import { isString, isEmpty } from 'lodash-es';
import findTree from 'xe-utils/findTree.js';
import { buildVueDompurifyHTMLDirective } from 'vue-dompurify-html';
import { textToHtml } from '../../../components/msg-editor/src/utils.mjs';
import { createContext, useContext } from '../../__builtins__/shared/create-context.mjs';
import { resolveComponent } from '../../__builtins__/shared/resolve-component.mjs';
import { Space } from '../../space/src/index.mjs';
import { useGlobalConfig } from '../../../components/config-provider/src/hooks/use-global-config.mjs';
import { composeExport } from '../../__builtins__/shared/utils.mjs';

numeral.locale("chs");
const prefixCls = `${stylePrefix}-preview-text`;
const PlaceholderContext = createContext("N/A");
const domHtml = buildVueDompurifyHTMLDirective({
  default: {
    USE_PROFILES: { html: true, mathMl: true }
  }
});
const usePlaceholder = (value) => {
  const placeholderCtx = useContext(PlaceholderContext);
  const placeholder = computed(() => {
    return isValid(value == null ? void 0 : value.value) && (value == null ? void 0 : value.value) !== "" ? value == null ? void 0 : value.value : resolveComponent(placeholderCtx.value) || "N/A";
  });
  return placeholder;
};
const Input = defineComponent({
  name: "FPreviewTextInput",
  props: ["value", "format"],
  setup(props, { attrs, slots }) {
    const value = toRef(props, "value");
    const formatVal = props.format ? numeral(value.value).format(props.format) : null;
    const placeholder = usePlaceholder(value);
    return () => {
      return h(
        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 = defineComponent({
  name: "FPreviewTextRichText",
  props: ["value"],
  setup(props, { attrs }) {
    const value = toRef(props, "value");
    const placeholder = usePlaceholder(value);
    return () => {
      return h(
        "div",
        {
          class: [prefixCls, "w-e-text-container"],
          style: attrs.style
        },
        {
          default: () => [
            withDirectives(h("div", { "data-slate-editor": "" }), [[domHtml, placeholder.value]])
          ]
        }
      );
    };
  }
});
const MsgEditor = defineComponent({
  name: "FPreviewTextMsgEditor",
  props: ["value", "options", "prefix", "suffix"],
  setup(props, { attrs }) {
    const fieldRef = useField();
    const field = fieldRef.value;
    const value = 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 h(
        "div",
        {
          class: [prefixCls, `${getPrefixCls("msg-editor")}`],
          style: attrs.style
        },
        {
          default: () => [
            withDirectives(h("div", { "data-slate-editor": "" }), [
              [
                domHtml,
                textToHtml(value.value, dataSource, {
                  prefix: props.prefix || "\\$\\{",
                  suffix: props.suffix || "\\}"
                }) || placeholder.value
              ]
            ])
          ]
        }
      );
    };
  }
});
const Select = observer(
  defineComponent({
    name: "FPreviewTextSelect",
    setup(_props, { attrs }) {
      const config = useGlobalConfig();
      const fieldRef = useField();
      const schema = 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 (isArr(value)) {
            return value.map((val) => ({ label: val, value: val }));
          }
          if (isString(value)) {
            return value.split(((_a = schema.value["x-data"]) == null ? void 0 : _a["separator"]) || ",").map((val) => ({ label: val, value: val }));
          }
          return [];
        } else {
          return isValid(value) ? [{ label: value, value }] : [];
        }
      };
      const getLabels = () => {
        var _a, _b;
        const selected = getSelected();
        if (!selected.length) {
          return h(
            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 h(
            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 h(
          Space,
          {
            class: [prefixCls],
            style: attrs.style
          },
          {
            default: () => getLabels()
          }
        );
      };
    }
  })
);
const Cascader = observer(
  defineComponent({
    name: "FPreviewTextCascader",
    setup(_props, { attrs }) {
      var _a, _b, _c;
      const fieldRef = useField();
      const schema = 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 (isString(props.value)) {
          return props.value.split(((_a2 = schema.value["x-data"]) == null ? void 0 : _a2["separator"]) || ",").map((val) => ({ label: val, value: val }));
        }
        return 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 = defineComponent({
  name: "FPreviewTextDatePicker",
  setup(_props, { attrs }) {
    const props = attrs;
    const placeholder = usePlaceholder();
    const config = useGlobalConfig();
    const format = attrs.format || config.value.dateTimeFormat;
    const getLabels = () => {
      if (isArr(props.value)) {
        const labels = props.value.map(
          (value) => dayjs(value).format(format) || placeholder.value
        );
        return labels.join("~");
      } else {
        return dayjs(props.value).format(format) || placeholder.value;
      }
    };
    return () => {
      return h(
        "div",
        {
          class: [prefixCls],
          style: attrs.style
        },
        {
          default: () => getLabels()
        }
      );
    };
  }
});
const TimePicker = defineComponent({
  name: "FPreviewTextTimePicker",
  setup(_props, { attrs }) {
    const props = attrs;
    const config = useGlobalConfig();
    const placeholder = usePlaceholder();
    const format = attrs.format || config.value.timeFormat;
    const getLabels = () => {
      if (isArr(props.value)) {
        const labels = props.value.map(
          (value) => dayjs(value).format(format) || placeholder.value
        );
        return labels.join("~");
      } else {
        return dayjs(props.value).format(format) || placeholder.value;
      }
    };
    return () => {
      return h(
        "div",
        {
          class: [prefixCls],
          style: attrs.style
        },
        {
          default: () => getLabels()
        }
      );
    };
  }
});
const Text = defineComponent({
  name: "FPreviewText",
  props: ["value", "format"],
  setup(props, { attrs }) {
    const value = toRef(props, "value");
    const formatVal = props.format ? numeral(value.value).format(props.format) : null;
    const placeholder = usePlaceholder(value);
    return () => {
      return h(
        "span",
        {
          class: [prefixCls],
          style: attrs.style
        },
        {
          default: () => formatVal || placeholder.value
        }
      );
    };
  }
});
const TreeSelect = defineComponent({
  name: "FPreviewTextTreeSelect",
  setup(_props, { attrs }) {
    var _a, _b, _c;
    const config = useGlobalConfig();
    const fieldRef = useField();
    const schema = 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 (isArr(value)) {
          return value.map((val) => ({ label: val, value: val }));
        }
        if (isString(value)) {
          return value.split(((_a2 = schema.value["x-data"]) == null ? void 0 : _a2["separator"]) || ",").map((val) => ({ label: val, value: val }));
        }
        return [];
      } else {
        return isEmpty(value) ? [] : [{ label: value, value }];
      }
    };
    const getLabels = () => {
      var _a2, _b2;
      const selected = getSelected();
      if (!selected.length) {
        return h(
          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 h(
          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 h(
        Space,
        {
          class: [prefixCls],
          style: attrs.style
        },
        {
          default: () => getLabels()
        }
      );
    };
  }
});
const PreviewText = composeExport(Text, {
  Input,
  Select,
  CheckboxGroup: Select,
  RadioGroup: Select,
  Cascader,
  DatePicker,
  TimePicker,
  TreeSelect,
  Placeholder: PlaceholderContext.Provider,
  RichText,
  MsgEditor,
  usePlaceholder
});

export { PreviewText, PreviewText as default, usePlaceholder };
//# sourceMappingURL=index.mjs.map