@opentiny/vue-renderless 3.16.0 → 3.17.0

package/fluent-editor/options.js

@@ -0,0 +1,234 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { isNull } from "../common/type";
+const betterTable = {
+  operationMenu: {
+    items: {
+      copyCells: { text: "\u590D\u5236" },
+      copyTable: { text: "\u590D\u5236\u8868\u683C" },
+      emptyCells: { text: "\u6E05\u7A7A\u5185\u5BB9" },
+      insertRowUp: { text: "\u4E0A\u63D2\u5165\u884C" },
+      insertRowDown: { text: "\u4E0B\u63D2\u5165\u884C" },
+      insertColumnLeft: { text: "\u5DE6\u63D2\u5165\u5217" },
+      insertColumnRight: { text: "\u53F3\u63D2\u5165\u5217" },
+      mergeCells: { text: "\u5408\u5E76\u5355\u5143\u683C" },
+      unmergeCells: { text: "\u62C6\u5206\u5355\u5143\u683C" },
+      deleteRow: { text: "\u5220\u9664\u5F53\u524D\u884C" },
+      deleteColumn: { text: "\u5220\u9664\u5F53\u524D\u5217" },
+      deleteTable: { text: "\u5220\u9664\u8868\u683C" }
+    },
+    color: true
+  }
+};
+const toolbar = (FluentEditor) => {
+  const underline = ["bold", "italic", "underline", "strike"];
+  const list = [{ list: "ordered" }, { list: "bullet" }];
+  const script = [{ script: "sub" }, { script: "super" }];
+  return {
+    container: [
+      ["undo", "redo", "clean"],
+      [
+        { font: FluentEditor.imports["formats/font"].whitelist },
+        { size: FluentEditor.imports["formats/size"].whitelist },
+        { lineheight: FluentEditor.imports["formats/lineheight"].whitelist },
+        { header: [1, 2, 3, 4, 5, 6, false] }
+      ],
+      underline,
+      ["blockquote", "code-block"],
+      [{ header: 1 }, { header: 2 }],
+      list,
+      script,
+      [{ indent: "-1" }, { indent: "+1" }],
+      [{ direction: "rtl" }],
+      [{ color: [] }, { background: [] }],
+      [{ align: [] }],
+      ["link", "image", "video", "file"],
+      ["better-table"],
+      ["fullscreen"]
+    ]
+  };
+};
+const mention = (mentionObj) => ({
+  search: async (term) => {
+    const { data, searchKey } = mentionObj;
+    try {
+      return data.filter((d) => {
+        return d[searchKey] && String(d[searchKey]).includes(term);
+      });
+    } catch (e) {
+      return [];
+    }
+  }
+});
+const listAutofillHandler = ({ FluentEditor, state }) => (range, context) => {
+  const formats = state.quill.getFormat(range);
+  if (formats["table-cell-line"]) {
+    return true;
+  }
+  if (isNull(state.quill.scroll.query("list"))) {
+    return true;
+  }
+  const { length } = context.prefix;
+  const [line, offset] = state.quill.getLine(range.index);
+  if (offset > length) {
+    return true;
+  }
+  let value;
+  let prefix = context.prefix.trim();
+  if (~["[]", "[ ]"].indexOf(prefix)) {
+    value = "unchecked";
+  } else if (prefix === "[x]") {
+    value = "checked";
+  } else if (~["-", "*"].indexOf(prefix)) {
+    value = "bullet";
+  } else {
+    value = "ordered";
+  }
+  state.quill.insertText(range.index, " ", FluentEditor.sources.USER);
+  state.quill.history.cutoff();
+  const delta = new FluentEditor.imports["delta"]().retain(range.index - offset).delete(length + 1).retain(line.length() - 2 - offset).retain(1, { list: { value } });
+  state.quill.updateContents(delta, FluentEditor.sources.USER);
+  state.quill.history.cutoff();
+  state.quill.setSelection(range.index - length, FluentEditor.sources.SILENT);
+  return false;
+};
+const listAutofill = ({ FluentEditor, state }) => ({
+  key: " ",
+  shiftKey: null,
+  collapsed: true,
+  format: { list: false, "code-block": false, blockquote: false, header: false, table: true },
+  prefix: /^\s*?(\d+\.|-|\*|\[ ?\]|\[x\])$/,
+  handler: listAutofillHandler({ FluentEditor, state })
+});
+const listIgnoreRight = ({ FluentEditor, state }) => ({
+  key: "ArrowRight",
+  shiftKey: null,
+  format: ["list"],
+  collapsed: true,
+  offset: 0,
+  handler(range) {
+    state.quill.setSelection(range.index + 1, FluentEditor.sources.SILENT);
+  }
+});
+const listIgnoreLeft = ({ FluentEditor, state }) => ({
+  key: "ArrowLeft",
+  shiftKey: null,
+  format: ["list"],
+  collapsed: true,
+  offset: 0,
+  handler(range) {
+    state.quill.setSelection(range.index - 1, FluentEditor.sources.SILENT);
+  }
+});
+const listSoftBreak = ({ FluentEditor, state }) => ({
+  key: "Enter",
+  format: ["list"],
+  shiftKey: true,
+  collapsed: true,
+  handler(range) {
+    const [line, offset] = state.quill.getLine(range.index);
+    const length = line.length();
+    if (length > offset + 1) {
+      state.quill.insertEmbed(range.index, "soft-break", true, FluentEditor.sources.USER);
+    }
+  }
+});
+const keyboard = ({ FluentEditor, state }) => {
+  const BetterTable = FluentEditor.imports["modules/better-table"];
+  return {
+    bindings: __spreadProps(__spreadValues({}, BetterTable.keyboardBindings), {
+      "list autofill": listAutofill({ FluentEditor, state }),
+      // fix:在list的offset为0时（即只在最左侧触发）加键盘事件，使其跳过contenteditable=false的span进行移动
+      "list ignoreRight": listIgnoreRight({ FluentEditor, state }),
+      "list ignoreLeft": listIgnoreLeft({ FluentEditor, state }),
+      "list softBreak": listSoftBreak({ FluentEditor, state })
+    })
+  };
+};
+const defaultOption = ({ FluentEditor, state, mentionObj }) => {
+  return {
+    theme: "snow",
+    modules: {
+      file: true,
+      // 上传文件需开启
+      image: FluentEditor.imports["modules/image-spec"],
+      counter: false,
+      toolbar: toolbar(FluentEditor),
+      "better-table": betterTable,
+      mention: mention(mentionObj),
+      keyboard: keyboard({ FluentEditor, state })
+    },
+    // 上传：图片、视频和文件,相关配置
+    uploadOption: {
+      fileAccept: ".mp4,.xls,.xlsx,.doc,.docx,.ppt,.pptx",
+      imageAccept: ".gif,.png,.tiff,image/jpeg",
+      isVideoPlay: true,
+      imageUploadToServer: true
+      // 是否需要上传到服务器
+    },
+    placeholder: "Insert text here ...",
+    readOnly: false
+  };
+};
+const iconOption = {
+  align: {
+    default: "IconEditorAlignLeft",
+    center: "IconEditorAlignCenter",
+    right: "IconEditorAlignRight"
+  },
+  background: "IconEditorBackground",
+  "better-table": "IconEditorTable",
+  blockquote: "IconEditorQuote",
+  bold: "IconEditorBold",
+  clean: "IconEditorEraser",
+  code: "",
+  "code-block": "IconEditorCode",
+  color: "IconEditorTextcolor",
+  direction: {
+    default: "IconEditorRightBorder",
+    rtl: "IconEditorLeftBorder"
+  },
+  emoji: "",
+  file: "IconCloudUpload",
+  font: "",
+  formula: "",
+  fullscreen: "IconFullscreen",
+  "global-link": "",
+  header: {
+    1: "IconEditorTitle",
+    2: "IconEditorSubtitle"
+  },
+  help: "",
+  image: "IconPicture",
+  indent: {
+    "+1": "IconEditorMenuRight",
+    "-1": "IconEditorMenuLeft"
+  },
+  italic: "IconEditorItalic",
+  link: "IconLink",
+  list: {
+    bullet: "IconEditorListDot",
+    check: "",
+    ordered: "IconEditorListNum"
+  },
+  redo: "IconEditorRedo",
+  screenshot: "",
+  script: {
+    sub: "IconEditorSub",
+    super: "IconEditorSuper"
+  },
+  size: "",
+  strike: "IconEditorDeleteline",
+  table: "",
+  underline: "IconEditorUnderline",
+  undo: "IconEditorUndo",
+  video: "IconEditorVideo"
+};
+export {
+  defaultOption,
+  iconOption,
+  keyboard,
+  mention
+};

package/fluent-editor/vue.js

@@ -0,0 +1,192 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  beforeUnmount,
+  computePreviewOptions,
+  stringToJson,
+  doPreview,
+  fileHandler,
+  fileOperationToSev,
+  getFileUploadUrl,
+  handleDblclick,
+  handlers,
+  handleUploadFile,
+  handleUploadImage,
+  imageHandler,
+  init,
+  initContent,
+  inputFileHandler,
+  insertFileToEditor,
+  insertImageToEditor,
+  lineheightHandler,
+  mounted,
+  redoHandler,
+  selectionChange,
+  textChange,
+  undoHandler,
+  uploaderDflsHandler,
+  uploadImageToSev,
+  setToolbarTips,
+  getOuterHTML,
+  setToolbarTitle,
+  addFullscreenchange,
+  removeFullscreenchange,
+  keyDownHandler,
+  computeZIndex,
+  handleComposition,
+  handleCompositionstart,
+  handleCompositionend,
+  removeHandleComposition,
+  checkTableISEndElement
+} from "./index";
+import { defaultOption, iconOption } from "./options";
+const api = ["state", "init", "initContent", "selectionChange", "textChange", "doPreview", "handleDblclick"];
+const initState = ({ api: api2, reactive, computed, props }) => {
+  const state = reactive({
+    promises: [],
+    promisesData: [],
+    cbNum: 0,
+    innerOptions: {},
+    innerContent: "",
+    fileUploadUrl: props.fileUpload && props.fileUpload.url || "",
+    quill: null,
+    fileInput: null,
+    previewOptions: computed(() => api2.computePreviewOptions()),
+    previewImgUrl: "",
+    showPreview: false,
+    content: props.modelValue || props.content,
+    isFullscreen: false,
+    zIndex: computed(() => api2.computeZIndex()),
+    icons: [
+      "IconEditorAlignCenter",
+      "IconEditorAlignLeft",
+      "IconEditorAlignRight",
+      "IconEditorBackground",
+      "IconEditorBold",
+      "IconEditorCode",
+      "IconEditorDeleteline",
+      "IconEditorEraser",
+      "IconEditorItalic",
+      "IconEditorLeftBorder",
+      "IconEditorList",
+      "IconEditorListDot",
+      "IconEditorListNum",
+      "IconEditorMenuLeft",
+      "IconEditorMenuRight",
+      "IconEditorQuote",
+      "IconEditorRedo",
+      "IconEditorRightBorder",
+      "IconEditorSub",
+      "IconEditorSubtitle",
+      "IconEditorSuper",
+      "IconEditorTable",
+      "IconEditorTextcolor",
+      "IconEditorTitle",
+      "IconEditorUnderline",
+      "IconEditorUndo",
+      "IconEditorVideo",
+      "IconLink",
+      "IconPicture",
+      "IconCloudUpload",
+      "IconFullscreen"
+    ]
+  });
+  return state;
+};
+const initApi = ({ api: api2, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t }) => {
+  Object.assign(api2, {
+    state,
+    getFileUploadUrl: getFileUploadUrl({ service }),
+    selectionChange: selectionChange({ emit, state }),
+    fileOperationToSev: fileOperationToSev({ state }),
+    undoHandler: undoHandler({ state }),
+    redoHandler: redoHandler({ state }),
+    lineheightHandler: lineheightHandler({ state, FluentEditor }),
+    inputFileHandler: inputFileHandler({ state, UploaderDfls }),
+    insertFileToEditor: insertFileToEditor({ state, FluentEditor, Delta }),
+    insertImageToEditor: insertImageToEditor({ state, FluentEditor, Delta }),
+    uploadImageToSev: uploadImageToSev({ state }),
+    doPreview: doPreview({ props, state, nextTick }),
+    stringToJson: stringToJson({ props }),
+    setToolbarTips: setToolbarTips({ api: api2, vm, FluentEditor, iconOption }),
+    getOuterHTML: getOuterHTML(),
+    setToolbarTitle: setToolbarTitle({ state, t })
+  });
+};
+const mergeApi = (args) => {
+  let { api: api2, state, service, emit, props, vm, i18n, watch, nextTick } = args;
+  let { constants, FluentEditor, UploaderDfls, Delta, defaultOptions } = args;
+  Object.assign(api2, {
+    init: init({ api: api2, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm }),
+    initContent: initContent({ state, props, api: api2, nextTick }),
+    fileHandler: fileHandler({ api: api2, state }),
+    imageHandler: imageHandler({ api: api2, state }),
+    uploaderDflsHandler: uploaderDflsHandler({ api: api2, modules: defaultOptions.modules }),
+    handleUploadFile: handleUploadFile({ api: api2, UploaderDfls }),
+    handleUploadImage: handleUploadImage({ state, api: api2, FluentEditor, Delta, UploaderDfls }),
+    handlers: handlers({ api: api2 }),
+    mounted: mounted({ api: api2, props, state, i18n, watch }),
+    beforeUnmount: beforeUnmount({ api: api2, state, vm }),
+    computePreviewOptions: computePreviewOptions({ props, state, constants, api: api2 }),
+    handleDblclick: handleDblclick({ props, api: api2 }),
+    textChange: textChange({ emit, vm, state, props, api: api2 }),
+    keyDownHandler: keyDownHandler({ state }),
+    computeZIndex: computeZIndex({ constants, props }),
+    addFullscreenchange: addFullscreenchange({ api: api2 }),
+    removeFullscreenchange: removeFullscreenchange({ api: api2 }),
+    handleComposition: handleComposition({ state, api: api2 }),
+    handleCompositionstart: handleCompositionstart({ state }),
+    handleCompositionend: handleCompositionend({ state }),
+    removeHandleComposition: removeHandleComposition({ state, api: api2 })
+  });
+};
+const initWatch = ({ watch, state, api: api2, props, vm }) => {
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (checkTableISEndElement(vm.$refs.editor.children[0])) {
+        state.content = value + "<p><br></p><p><br></p>";
+      } else {
+        state.content = value;
+      }
+      api2.initContent();
+    }
+  );
+  watch(
+    () => props.content,
+    (value) => {
+      state.content = value;
+      api2.initContent();
+    }
+  );
+  watch(
+    () => props.disabled,
+    (value) => {
+      if (state.quill) {
+        state.quill.enable(!value);
+      }
+    }
+  );
+};
+const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { service, emit, i18n, constants, nextTick, vm, t }, { FluentEditor }) => {
+  const api2 = {};
+  const { DEFAULTS: UploaderDfls } = FluentEditor.imports["modules/uploader"];
+  const Delta = FluentEditor.imports["delta"];
+  const state = initState({ reactive, computed, api: api2, props });
+  const defaultOptions = defaultOption({ FluentEditor, state, mentionObj: props.mentionObj });
+  initApi({ api: api2, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t });
+  const args = { api: api2, state, service, emit, props, vm, i18n, watch, nextTick };
+  Object.assign(args, { constants, FluentEditor, UploaderDfls, Delta, defaultOptions });
+  mergeApi(args);
+  initWatch({ watch, state, api: api2, props, vm });
+  onMounted(api2.mounted);
+  onBeforeUnmount(() => {
+    UploaderDfls.handler = null;
+    UploaderDfls.imagePasteFailCallback = null;
+    api2.beforeUnmount();
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/form/index.js

@@ -100,14 +100,18 @@ const validate = ({ props, state }) => (callback) => {
     callback(true);
   }
   let invalidFields = {};
+  let invalidFieldArr = [];
   state.fields.forEach((field) => {
     field.validate("", (message, field2) => {
       if (message) {
         valid = false;
       }
       invalidFields = merge({}, invalidFields, field2);
+      if (field2) {
+        Object.keys(field2).forEach((item) => invalidFieldArr.push(item));
+      }
       if (typeof callback === "function" && ++count === state.fields.length) {
-        callback(valid, invalidFields);
+        callback(valid, invalidFields, invalidFieldArr);
       }
     });
   });

package/grid/utils/column.js

@@ -2,6 +2,7 @@ import "../../chunk-G2ADBYYC.js";
 import { isBoolean } from "../static";
 import { initFilter } from "./common";
 let columnUniqueId = 0;
+const setColumnFormat = (column, props) => column.format = props.formatConfig;
 function setBasicProperty(column, context) {
   column.id = `col_${++columnUniqueId}`;
   column.type = context.type;
@@ -28,7 +29,7 @@ function setBasicProperty(column, context) {
   column.indexMethod = context.indexMethod;
   column.formatText = context.formatText;
   column.formatValue = context.formatValue;
-  column.format = context.formatConfig;
+  setColumnFormat(column, context);
   column.sortable = context.sortable;
   column.sortBy = context.sortBy;
   column.sortMethod = context.sortMethod;
@@ -67,5 +68,6 @@ function ColumnConfig(context, { renderHeader, renderCell, renderData } = {}, co
 }
 const getColumnConfig = (context, options, config) => context instanceof ColumnConfig ? context : new ColumnConfig(context, options, config);
 export {
-  getColumnConfig
+  getColumnConfig,
+  setColumnFormat
 };

package/grid/utils/common.js

@@ -3,7 +3,7 @@ import {
 } from "../../chunk-G2ADBYYC.js";
 import { isNull } from "../../common/type";
 import { find } from "../../common/array";
-import { get, isFunction, set, findTree } from "../static";
+import { get, isFunction, set } from "../static";
 const gridSize = ["medium", "small", "mini"];
 const getSize = ({ size, $parent }) => size || ($parent && gridSize.includes($parent.size) ? $parent.size : null);
 const getFuncText = (content) => isFunction(content) ? content() : content;
@@ -76,41 +76,31 @@ const setCellValue = (row, column, value) => {
   set(row, property, value);
 };
 const hasChildrenList = (item) => item && item.children && item.children.length > 0;
-const destroyColumn = ($table, { columnConfig }) => {
-  const matchObj = findTree($table.collectColumn, (column) => column === columnConfig);
-  if (matchObj) {
-    matchObj.items.splice(matchObj.index, 1);
-  }
-  $table.collectColumn = $table.collectColumn.slice(0);
-};
 const emitEvent = (vm, type, args) => {
   if (vm.tableListeners[type]) {
     const params = [].concat(args);
     vm.$emit(type, ...params);
   }
 };
-const assemColumn = ($table, $column, instance) => {
-  const { columnConfig, $el: elm, slots, $parent } = instance;
-  const { collectColumn } = $table;
-  columnConfig.slots = slots;
-  const parentNode = elm.parentNode;
-  const insertIndex = [].indexOf.call(parentNode.children, elm);
-  if (!$column || $column !== $parent) {
-    collectColumn.splice(insertIndex, 0, columnConfig);
-  } else {
-    const parentConfig = $column.columnConfig;
-    if (!parentConfig.children) {
-      parentConfig.children = [];
+const assemColumn = ($table) => {
+  const collectColumn = [];
+  const assem = (columnVms, columns) => {
+    if (Array.isArray(columnVms)) {
+      columnVms.forEach((columnVm) => {
+        const column = columnVm.columnConfig;
+        const children = [];
+        if (column) {
+          columns.push(column);
+          assem(columnVm.childColumns, children);
+          column.children = children.length > 0 ? children : null;
+        }
+      });
     }
-    parentConfig.children.splice(insertIndex, 0, columnConfig);
-  }
-  $table.collectColumn = collectColumn.slice(0);
-};
-const getCellValue = (row, column) => {
-  const { field, prop } = column.own;
-  const property = field || prop;
-  return get(row, property);
+  };
+  assem($table.childColumns, collectColumn);
+  $table.collectColumn = collectColumn;
 };
+const getCellValue = (row, column) => get(row, column.own.field);
 const getListeners = ($attrs, $listeners) => {
   const regHyphenate = /\B([A-Z])/g;
   const regEventPrefix = /^on[A-Z]/;
@@ -128,7 +118,6 @@ const getListeners = ($attrs, $listeners) => {
 };
 export {
   assemColumn,
-  destroyColumn,
   emitEvent,
   formatText,
   getCellValue,

package/grid/utils/event.js

@@ -4,27 +4,32 @@ import { remove } from "../static";
 import { on } from "../../common/deps/dom";
 const wheelName = browser.isDoc && /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll" : "mousewheel";
 const eventStore = [];
+const invoke = ({ comp, type, cb }, event) => {
+  if (type === event.type || type === "mousewheel" && event.type === wheelName) {
+    cb.call(comp, event);
+  }
+};
 const GlobalEvent = {
-  on(comp, type, cb) {
+  on(comp, type, cb, capture = false) {
     if (cb) {
-      eventStore.push({ comp, type, cb });
+      eventStore.push({ comp, type, cb, capture });
     }
   },
-  off(comp, type) {
-    remove(eventStore, (item) => item.comp === comp && item.type === type);
+  off(comp, type, capture = false) {
+    remove(eventStore, (item) => item.comp === comp && item.type === type && item.capture === capture);
   },
   trigger(event) {
-    eventStore.forEach(({ comp, type, cb }) => {
-      if (type === event.type || type === "mousewheel" && event.type === wheelName) {
-        cb.call(comp, event);
-      }
-    });
+    eventStore.filter((item) => !item.capture).forEach((item) => invoke(item, event));
+  },
+  capture(event) {
+    eventStore.filter((item) => item.capture).forEach((item) => invoke(item, event));
   }
 };
 if (browser.isDoc) {
   on(document, "keydown", GlobalEvent.trigger);
   on(document, "contextmenu", GlobalEvent.trigger);
   on(window, "mousedown", GlobalEvent.trigger);
+  on(window, "mousedown", GlobalEvent.capture, true);
   on(window, "blur", GlobalEvent.trigger);
   on(window, "resize", GlobalEvent.trigger);
   on(window, wheelName, GlobalEvent.trigger);

package/guide/index.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import { xss } from "../common/xss";
-const createShepherd = ({ state, props, Shepherd, offset }) => () => {
-  const tour = newTour(state, Shepherd, offset);
+const createShepherd = ({ state, props, Shepherd, offset, designConfig }) => () => {
+  const tour = newTour(state, Shepherd, offset, designConfig);
   state.tour = tour;
   const result = {};
   const deepCopy = getItemCopy(props, tour, result);
@@ -9,7 +9,7 @@ const createShepherd = ({ state, props, Shepherd, offset }) => () => {
     state.domData.forEach((item, i) => {
       let steps = itemStep(item, state, deepCopy, i, Shepherd);
       const step = tour.addStep(steps);
-      if (steps.hightBox && steps.hightBox.length != 0) {
+      if (steps.hightBox && steps.hightBox.length !== 0) {
         step.on("show", () => {
           steps.hightBox.forEach((item2) => {
             document.querySelector(item2).classList.add("tiny-guide__z-top");
@@ -64,9 +64,10 @@ const getItemCopy = (props, tour, result) => {
   });
   return result;
 };
-const newTour = (state, Shepherd, offset) => {
+const newTour = (state, Shepherd, offset, designConfig) => {
+  var _a;
   const tour = new Shepherd.Tour({
-    useModalOverlay: true,
+    useModalOverlay: !((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.isUseModalOverlay),
     defaultStepOptions: {
       modalOverlayOpeningPadding: state.modalOverlayOpeningPadding,
       modalOverlayOpeningRadius: state.modalOverlayOpeningRadius,

package/guide/vue.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-G2ADBYYC.js";
 import { createShepherd, mounted } from "./index";
 const api = ["state"];
-const renderless = (props, { reactive, onMounted, watch }, utils, { Shepherd, offset }) => {
+const renderless = (props, { reactive, onMounted, watch }, { designConfig }, { Shepherd, offset }) => {
   const state = reactive({
     tour: null,
     tour1: null,
@@ -21,7 +21,7 @@ const renderless = (props, { reactive, onMounted, watch }, utils, { Shepherd, of
   });
   let baseApi = {
     state,
-    createShepherd: createShepherd({ state, props, Shepherd, offset })
+    createShepherd: createShepherd({ state, props, Shepherd, offset, designConfig })
   };
   const api2 = __spreadProps(__spreadValues({}, baseApi), {
     mounted: mounted({ state, api: baseApi })