cnhis-design-vue 3.4.0-beta.4 → 3.4.0-beta.7

package/es/components/form-render/src/utils/dom.js

@@ -16,10 +16,7 @@ function queryInput(decoratorElement) {
 function findNextWidget(containers, currentContainerIndex, currentWidget) {
   const nextWidget = findInnerNextWidget(containers[currentContainerIndex], currentWidget);
   if (nextWidget)
-    return {
-      widget: nextWidget,
-      field: getFormField(containers[currentContainerIndex])
-    };
+    return { widget: nextWidget, field: getFormField(containers[currentContainerIndex]) };
   let widget = null;
   let field = null;
   containers.slice(currentContainerIndex + 1).some((container) => {
@@ -28,17 +25,16 @@ function findNextWidget(containers, currentContainerIndex, currentWidget) {
       field = getFormField(container);
     return res;
   });
-  return {
-    widget,
-    field
-  };
+  return { widget, field };
   function getFormField(formItemElement) {
     return formItemElement && formItemElement.getAttribute("field-key");
   }
   function findInnerNextWidget(container, currentWidget2) {
     const widgets = Array.from(container.querySelectorAll("textarea,input,[tabindex]"));
     const widgetIndex = currentWidget2 ? widgets.findIndex((widget2) => widget2 === currentWidget2) : -1;
-    return widgets.slice(widgetIndex + 1).find((widget2) => !Reflect.get(widget2, "disabled") && !Array.from(widget2.classList).some((className) => className.endsWith("--disabled")));
+    return widgets.slice(widgetIndex + 1).find(
+      (widget2) => !Reflect.get(widget2, "disabled") && !Array.from(widget2.classList).some((className) => className.endsWith("--disabled"))
+    );
   }
 }
 

package/es/components/form-render/src/utils/index.d.ts

@@ -15,14 +15,14 @@ export declare function parseNumberFromMaybeString<T>(value: T): T extends numbe
 export declare function createSlot(renderer: unknown, props: AnyObject, defaultRenderer?: (v: unknown) => unknown[]): Record<string, () => ArrayAble<VNode>> | {
     default(): any;
 };
-export declare function createInputSlot(props: AnyObject, defaultRenderer?: (v: unknown) => unknown[]): import("vue").ComputedRef<Record<string, FunctionalComponent<{}, {}, any, {}>>>;
+export declare function createInputSlot(props: AnyObject, defaultRenderer?: (v: unknown) => unknown[]): import("vue").ComputedRef<Record<string, FunctionalComponent<{}, {}>>>;
 export declare function validateMessageParser(message: string, fieldItem: Omit<FieldItem, 'reactions'>): string;
 export declare function combineExtendKey(fieldList: FieldItem[], values: AnyObject): AnyObject;
 export declare function splitExtendKey(fieldList: FieldItem[], values: AnyObject): AnyObject;
 export declare function isNestedType(type?: string): boolean | "" | undefined;
 export declare function isNestedFieldType(field: FieldItem | GeneralField): boolean | "" | undefined;
-export declare function renderOptionLabel(option: AnyObject, labelKey: string): any;
-export declare function renderDescOption(labelNode: any, option: AnyObject): any;
+export declare function renderOptionLabel(option: AnyObject, labelKey: string): JSX.Element;
+export declare function renderDescOption(labelNode: any, option: AnyObject): JSX.Element;
 export declare function getAbsoluteKey(fieldKey: string, field: Pattern): string;
 export declare function editorUnescape(content: string): string;
 export declare function FieldListFilter(list: FieldItem[], condition: (item: FieldItem) => boolean): FieldItem[];

package/es/components/form-render/src/utils/schema.js

@@ -1,3 +1,4 @@
+import { i18n } from '../../../../_virtual/_virtual_i18n-methods.js';
 import { uuidGenerator } from '../../../../shared/utils/index.js';
 import { isField } from '@formily/core';
 import { isObject, isPromise } from '@vue/shared';
@@ -101,30 +102,9 @@ function assignUpdateValue(props, field) {
           try {
             await new Promise((resolve, reject) => {
               const params = {
-                title: function() {
-                  var _a, _b, _c;
-                  try {
-                    return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.228")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.228")) || "\u8B66\u544A";
-                  } catch (e) {
-                    return "\u8B66\u544A";
-                  }
-                }(),
-                positiveText: function() {
-                  var _a, _b, _c;
-                  try {
-                    return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.27")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.27")) || "\u786E\u5B9A";
-                  } catch (e) {
-                    return "\u786E\u5B9A";
-                  }
-                }(),
-                negativeText: function() {
-                  var _a, _b, _c;
-                  try {
-                    return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.28")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.28")) || "\u53D6\u6D88";
-                  } catch (e) {
-                    return "\u53D6\u6D88";
-                  }
-                }(),
+                title: i18n("10010.1.228", "\u8B66\u544A"),
+                positiveText: i18n("10010.1.27", "\u786E\u5B9A"),
+                negativeText: i18n("10010.1.28", "\u53D6\u6D88"),
                 onPositiveClick: resolve,
                 onNegativeClick: reject,
                 content: confirmText != null ? confirmText : DEFAULT_TEXT,

package/es/components/form-render/src/utils/valueFormatter.js

@@ -8,15 +8,16 @@ function formValueFormatter(formModel, contextCollector) {
   Object.entries(formModel.fields).forEach(([, field]) => {
     if (!isField(field) || field.value == null || field.value == "" || !isArray(field.component))
       return;
-    const {
-      currentOption,
-      labelField = "label"
-    } = contextCollector.getContext(field.props.name.toString(), field.value) || {};
+    const { currentOption, labelField = "label" } = contextCollector.getContext(field.props.name.toString(), field.value) || {};
     const componentName = field.component[0];
     if (["SELECT", "RADIO", "CHECKBOX"].includes(componentName)) {
       if (!currentOption)
         return;
-      Path.setIn(result, field.path, arrayed(currentOption).map((option) => isObject(option) ? option[labelField] : option).join());
+      Path.setIn(
+        result,
+        field.path,
+        arrayed(currentOption).map((option) => isObject(option) ? option[labelField] : option).join()
+      );
     } else if (["SEARCH_CASCADER", "LEVEL_SEARCH_CASCADER"].includes(componentName)) {
       const value = isString(field.value) ? jsonParse(field.value) : field.value;
       if (!isArray(value))

package/es/components/grid/index.d.ts

@@ -1,3 +1,3 @@
 import { SFCWithInstall } from '../../shared/types';
-declare const Grid: SFCWithInstall<import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+declare const Grid: SFCWithInstall<import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
 export default Grid;

package/es/components/grid/src/Grid.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/es/components/grid/src/hooks.js

@@ -2,7 +2,157 @@ import { ref } from 'vue';
 
 const useMethods = () => {
   const xGrid = ref({});
-  const methodKeys = ["loadData", "reloadData", "updateData", "reloadRow", "reloadExpandContent", "reloadTreeChilds", "loadColumn", "reloadColumn", "refreshColumn", "createRow", "createData", "insert", "insertAt", "revertData", "remove", "removeCheckboxRow", "removeRadioRow", "removeCurrentRow", "removeMergeCells", "removeMergeFooterItems", "getEditRecord", "getRowIndex", "getVTRowIndex", "getVMRowIndex", "getRowNode", "getColumns", "getColid", "getColumnById", "getColumnByField", "getTableColumn", "getColumnIndex", "getVMColumnIndex", "getVTColumnIndex", "getColumnNode", "getSortColumns", "getCheckedFilters", "getTableData", "getRowById", "getRowid", "getData", "getRecordset", "getInsertRecords", "getRemoveRecords", "getUpdateRecords", "getMergeCells", "getMergeFooterItems", "getCurrentColumn", "getCurrentRecord", "getRadioRecord", "getRadioReserveRecord", "getCheckboxRecords", "getCheckboxReserveRecords", "getCheckboxIndeterminateRecords", "getRowExpandRecords", "getTreeExpandRecords", "getActiveRecord", "getSelectedCell", "getScroll", "isActiveByRow", "isInsertByRow", "isUpdateByRow", "isAllCheckboxChecked", "isAllCheckboxIndeterminate", "isCheckedByCheckboxRow", "isIndeterminateByCheckboxRow", "isCheckedByRadioRow", "isExpandByRow", "isRowExpandLoaded", "isTreeExpandByRow", "isTreeExpandLoaded", "isFilter", "setFilter", "setActiveRow", "setActiveCell", "setSelectCell", "setMergeCells", "setMergeFooterItems", "setRowExpand", "setAllRowExpand", "setTreeExpand", "setAllTreeExpand", "setCurrentRow", "setCurrentColumn", "setRadioRow", "setCheckboxRow", "setAllCheckboxRow", "setEditCell", "toggleCheckboxRow", "toggleAllCheckboxRow", "toggleRowExpand", "toggleTreeExpand", "clearMergeCells", "clearMergeFooterItems", "clearCurrentRow", "clearCurrentColumn", "clearRadioRow", "clearRadioReserve", "clearCheckboxRow", "clearCheckboxReserve", "clearRowExpand", "clearRowExpandLoaded", "clearTreeExpand", "clearTreeExpandLoaded", "clearSort", "clearFilter", "clearSelected", "clearActived", "clearData", "clearScroll", "clearValidate", "clearAll", "clearEdit", "resetColumn", "closeFilter", "closeTooltip", "closeMenu", "updateFooter", "updateStatus", "hideColumn", "showColumn", "scrollTo", "scrollToRow", "scrollToColumn", "sort", "isSort", "recalculate", "refreshScroll", "validate", "fullValidate", "exportData", "openExport", "importData", "openImport", "print", "openPrint", "saveFile", "readFile", "openTooltip", "connect", "focus", "blur", "commitProxy", "zoom", "isMaximized", "maximize", "revert", "getFormItems", "getPendingRecords", "getProxyInfo"];
+  const methodKeys = [
+    "loadData",
+    "reloadData",
+    "updateData",
+    "reloadRow",
+    "reloadExpandContent",
+    "reloadTreeChilds",
+    "loadColumn",
+    "reloadColumn",
+    "refreshColumn",
+    "createRow",
+    "createData",
+    "insert",
+    "insertAt",
+    "revertData",
+    "remove",
+    "removeCheckboxRow",
+    "removeRadioRow",
+    "removeCurrentRow",
+    "removeMergeCells",
+    "removeMergeFooterItems",
+    "getEditRecord",
+    "getRowIndex",
+    "getVTRowIndex",
+    "getVMRowIndex",
+    "getRowNode",
+    "getColumns",
+    "getColid",
+    "getColumnById",
+    "getColumnByField",
+    "getTableColumn",
+    "getColumnIndex",
+    "getVMColumnIndex",
+    "getVTColumnIndex",
+    "getColumnNode",
+    "getSortColumns",
+    "getCheckedFilters",
+    "getTableData",
+    "getRowById",
+    "getRowid",
+    "getData",
+    "getRecordset",
+    "getInsertRecords",
+    "getRemoveRecords",
+    "getUpdateRecords",
+    "getMergeCells",
+    "getMergeFooterItems",
+    "getCurrentColumn",
+    "getCurrentRecord",
+    "getRadioRecord",
+    "getRadioReserveRecord",
+    "getCheckboxRecords",
+    "getCheckboxReserveRecords",
+    "getCheckboxIndeterminateRecords",
+    "getRowExpandRecords",
+    "getTreeExpandRecords",
+    "getActiveRecord",
+    "getSelectedCell",
+    "getScroll",
+    "isActiveByRow",
+    "isInsertByRow",
+    "isUpdateByRow",
+    "isAllCheckboxChecked",
+    "isAllCheckboxIndeterminate",
+    "isCheckedByCheckboxRow",
+    "isIndeterminateByCheckboxRow",
+    "isCheckedByRadioRow",
+    "isExpandByRow",
+    "isRowExpandLoaded",
+    "isTreeExpandByRow",
+    "isTreeExpandLoaded",
+    "isFilter",
+    "setFilter",
+    "setActiveRow",
+    "setActiveCell",
+    "setSelectCell",
+    "setMergeCells",
+    "setMergeFooterItems",
+    "setRowExpand",
+    "setAllRowExpand",
+    "setTreeExpand",
+    "setAllTreeExpand",
+    "setCurrentRow",
+    "setCurrentColumn",
+    "setRadioRow",
+    "setCheckboxRow",
+    "setAllCheckboxRow",
+    "setEditCell",
+    "toggleCheckboxRow",
+    "toggleAllCheckboxRow",
+    "toggleRowExpand",
+    "toggleTreeExpand",
+    "clearMergeCells",
+    "clearMergeFooterItems",
+    "clearCurrentRow",
+    "clearCurrentColumn",
+    "clearRadioRow",
+    "clearRadioReserve",
+    "clearCheckboxRow",
+    "clearCheckboxReserve",
+    "clearRowExpand",
+    "clearRowExpandLoaded",
+    "clearTreeExpand",
+    "clearTreeExpandLoaded",
+    "clearSort",
+    "clearFilter",
+    "clearSelected",
+    "clearActived",
+    "clearData",
+    "clearScroll",
+    "clearValidate",
+    "clearAll",
+    "clearEdit",
+    "resetColumn",
+    "closeFilter",
+    "closeTooltip",
+    "closeMenu",
+    "updateFooter",
+    "updateStatus",
+    "hideColumn",
+    "showColumn",
+    "scrollTo",
+    "scrollToRow",
+    "scrollToColumn",
+    "sort",
+    "isSort",
+    "recalculate",
+    "refreshScroll",
+    "validate",
+    "fullValidate",
+    "exportData",
+    "openExport",
+    "importData",
+    "openImport",
+    "print",
+    "openPrint",
+    "saveFile",
+    "readFile",
+    "openTooltip",
+    "connect",
+    "focus",
+    "blur",
+    "commitProxy",
+    "zoom",
+    "isMaximized",
+    "maximize",
+    "revert",
+    "getFormItems",
+    "getPendingRecords",
+    "getProxyInfo"
+  ];
   const funcs = {};
   methodKeys.forEach((name) => {
     funcs[name] = (...args) => {

package/es/components/guide/src/renderer.d.ts

@@ -1,6 +1,6 @@
 import { ComponentInternalInstance, PropType } from 'vue';
 import { GuideDefine } from '../../../components/guide/src/types';
-export declare function createGuideStep(instance?: ComponentInternalInstance | null): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export declare function createGuideStep(instance?: ComponentInternalInstance | null): import("vue").DefineComponent<{
     config: {
         type: PropType<GuideDefine.Config>;
         required: true;
@@ -14,7 +14,7 @@ export declare function createGuideStep(instance?: ComponentInternalInstance | n
         type: NumberConstructor;
         required: true;
     };
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "next" | "toNext")[], "cancel" | "next" | "toNext", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "next" | "toNext")[], "cancel" | "next" | "toNext", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     config: {
         type: PropType<GuideDefine.Config>;
         required: true;
@@ -28,10 +28,10 @@ export declare function createGuideStep(instance?: ComponentInternalInstance | n
         type: NumberConstructor;
         required: true;
     };
-}>> & Readonly<{
+}>> & {
     onCancel?: ((...args: any[]) => any) | undefined;
     onNext?: ((...args: any[]) => any) | undefined;
     onToNext?: ((...args: any[]) => any) | undefined;
-}>, {
+}, {
     config: GuideDefine.Config;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> | import("vue").DefineComponent<{}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}> | import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;

package/es/components/guide/src/utils/index.js

@@ -35,10 +35,7 @@ const GuideUtils = Object.freeze({
     const shadowEle = this.getShadowEleFromWrapper(wrapper);
     if (!shadowEle)
       return;
-    const {
-      left,
-      top
-    } = target.getBoundingClientRect();
+    const { left, top } = target.getBoundingClientRect();
     Object.assign(shadowEle.style, {
       left: widthAppend(left),
       top: widthAppend(top),
@@ -47,22 +44,9 @@ const GuideUtils = Object.freeze({
     });
   },
   syncPosition(ele, target, offset = 24, placement = "right-start") {
-    const {
-      top,
-      left,
-      right,
-      bottom,
-      width: targetWidth,
-      height: targetHeight
-    } = target.getBoundingClientRect();
-    const {
-      clientHeight,
-      clientWidth
-    } = ele;
-    const {
-      clientHeight: bodyHeight,
-      clientWidth: bodyWidth
-    } = document.body;
+    const { top, left, right, bottom, width: targetWidth, height: targetHeight } = target.getBoundingClientRect();
+    const { clientHeight, clientWidth } = ele;
+    const { clientHeight: bodyHeight, clientWidth: bodyWidth } = document.body;
     const pointer = ele.querySelector(".guide__stepPointerWrapper");
     const line = pointer && pointer.querySelector(".guide__stepPointerLine");
     const styles = {};
@@ -91,170 +75,123 @@ const GuideUtils = Object.freeze({
       "bottom-end": yRightEnough && yBottomEnough
     };
     const HEADER_OFFSET = 18, WIDTH_OFFSET = 4, OFFSET_RIGHT = widthAppend(right + offset), OFFSET_LEFT = widthAppend(left - offset - clientWidth), OFFSET_TOP = widthAppend(top - offset - clientHeight), OFFSET_BOTTOM = widthAppend(bottom + offset), Y_START = widthAppend(top - HEADER_OFFSET), Y_CENTER = widthAppend(Math.floor((top + bottom - clientHeight) / 2)), Y_END = widthAppend(bottom - clientHeight + HEADER_OFFSET), X_START = widthAppend(left), X_CENTER = widthAppend(Math.floor(left + right - clientWidth) / 2), X_END = widthAppend(right - clientWidth), Y_POINTER = widthAppend(Math.min(HEADER_OFFSET + 8, HEADER_OFFSET + targetHeight - 6)), X_POINTER = widthAppend(Math.min(HEADER_OFFSET + 8, targetWidth - 8));
-    const placementStyleSequence = [["right-start", {
-      step: {
-        left: OFFSET_RIGHT,
-        top: Y_START
-      },
-      pointer: {
-        left: widthAppend(-offset),
-        flexDirection: "row-reverse",
-        top: Y_POINTER
-      },
-      line: {
-        width: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["right-end", {
-      step: {
-        left: OFFSET_RIGHT,
-        top: Y_END
-      },
-      pointer: {
-        left: widthAppend(-offset),
-        flexDirection: "row-reverse",
-        bottom: Y_POINTER
-      },
-      line: {
-        width: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["right", {
-      step: {
-        left: OFFSET_RIGHT,
-        top: Y_CENTER
-      },
-      pointer: {
-        left: widthAppend(-offset),
-        flexDirection: "row-reverse",
-        top: "50%",
-        transform: "translateY(-50%)"
-      },
-      line: {
-        width: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["left-start", {
-      step: {
-        left: OFFSET_LEFT,
-        top: Y_START
-      },
-      pointer: {
-        right: widthAppend(-offset),
-        top: Y_POINTER
-      },
-      line: {
-        width: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["left-end", {
-      step: {
-        left: OFFSET_LEFT,
-        top: Y_END
-      },
-      pointer: {
-        right: widthAppend(-offset),
-        bottom: Y_POINTER
-      },
-      line: {
-        width: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["left", {
-      step: {
-        left: OFFSET_LEFT,
-        top: Y_CENTER
-      },
-      pointer: {
-        right: widthAppend(-offset),
-        top: "50%",
-        transform: "translateY(-50%)"
-      },
-      line: {
-        width: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["top-start", {
-      step: {
-        left: X_START,
-        top: OFFSET_TOP
-      },
-      pointer: {
-        left: X_POINTER,
-        flexDirection: "column",
-        bottom: widthAppend(-offset)
-      },
-      line: {
-        width: widthAppend(3),
-        height: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["top-end", {
-      step: {
-        left: X_END,
-        top: OFFSET_TOP
-      },
-      pointer: {
-        right: X_POINTER,
-        flexDirection: "column",
-        bottom: widthAppend(-offset)
-      },
-      line: {
-        width: widthAppend(3),
-        height: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["top", {
-      step: {
-        left: X_CENTER,
-        top: OFFSET_TOP
-      },
-      pointer: {
-        left: "50%",
-        transform: "translateX(-50%)",
-        flexDirection: "column",
-        bottom: widthAppend(-offset)
-      },
-      line: {
-        width: widthAppend(3),
-        height: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["bottom-start", {
-      step: {
-        left: X_START,
-        top: OFFSET_BOTTOM
-      },
-      pointer: {
-        left: X_POINTER,
-        flexDirection: "column-reverse",
-        top: widthAppend(-offset)
-      },
-      line: {
-        width: widthAppend(3),
-        height: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["bottom-end", {
-      step: {
-        left: X_END,
-        top: OFFSET_BOTTOM
-      },
-      pointer: {
-        right: X_POINTER,
-        flexDirection: "column-reverse",
-        top: widthAppend(-offset)
-      },
-      line: {
-        width: widthAppend(3),
-        height: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }], ["bottom", {
-      step: {
-        left: X_CENTER,
-        top: OFFSET_BOTTOM
-      },
-      pointer: {
-        left: "50%",
-        transform: "translateX(-50%)",
-        flexDirection: "column-reverse",
-        top: widthAppend(-offset)
-      },
-      line: {
-        width: widthAppend(3),
-        height: widthAppend(offset + WIDTH_OFFSET)
-      }
-    }]];
+    const placementStyleSequence = [
+      [
+        "right-start",
+        {
+          step: { left: OFFSET_RIGHT, top: Y_START },
+          pointer: { left: widthAppend(-offset), flexDirection: "row-reverse", top: Y_POINTER },
+          line: { width: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "right-end",
+        {
+          step: { left: OFFSET_RIGHT, top: Y_END },
+          pointer: { left: widthAppend(-offset), flexDirection: "row-reverse", bottom: Y_POINTER },
+          line: { width: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "right",
+        {
+          step: { left: OFFSET_RIGHT, top: Y_CENTER },
+          pointer: {
+            left: widthAppend(-offset),
+            flexDirection: "row-reverse",
+            top: "50%",
+            transform: "translateY(-50%)"
+          },
+          line: { width: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "left-start",
+        {
+          step: { left: OFFSET_LEFT, top: Y_START },
+          pointer: { right: widthAppend(-offset), top: Y_POINTER },
+          line: { width: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "left-end",
+        {
+          step: { left: OFFSET_LEFT, top: Y_END },
+          pointer: { right: widthAppend(-offset), bottom: Y_POINTER },
+          line: { width: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "left",
+        {
+          step: { left: OFFSET_LEFT, top: Y_CENTER },
+          pointer: { right: widthAppend(-offset), top: "50%", transform: "translateY(-50%)" },
+          line: { width: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "top-start",
+        {
+          step: { left: X_START, top: OFFSET_TOP },
+          pointer: { left: X_POINTER, flexDirection: "column", bottom: widthAppend(-offset) },
+          line: { width: widthAppend(3), height: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "top-end",
+        {
+          step: { left: X_END, top: OFFSET_TOP },
+          pointer: { right: X_POINTER, flexDirection: "column", bottom: widthAppend(-offset) },
+          line: { width: widthAppend(3), height: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "top",
+        {
+          step: { left: X_CENTER, top: OFFSET_TOP },
+          pointer: {
+            left: "50%",
+            transform: "translateX(-50%)",
+            flexDirection: "column",
+            bottom: widthAppend(-offset)
+          },
+          line: { width: widthAppend(3), height: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "bottom-start",
+        {
+          step: { left: X_START, top: OFFSET_BOTTOM },
+          pointer: { left: X_POINTER, flexDirection: "column-reverse", top: widthAppend(-offset) },
+          line: { width: widthAppend(3), height: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "bottom-end",
+        {
+          step: { left: X_END, top: OFFSET_BOTTOM },
+          pointer: {
+            right: X_POINTER,
+            flexDirection: "column-reverse",
+            top: widthAppend(-offset)
+          },
+          line: { width: widthAppend(3), height: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ],
+      [
+        "bottom",
+        {
+          step: { left: X_CENTER, top: OFFSET_BOTTOM },
+          pointer: {
+            left: "50%",
+            transform: "translateX(-50%)",
+            flexDirection: "column-reverse",
+            top: widthAppend(-offset)
+          },
+          line: { width: widthAppend(3), height: widthAppend(offset + WIDTH_OFFSET) }
+        }
+      ]
+    ];
     const [, placementStyle] = (placementEnableMap[placement] ? placementStyleSequence.find((p) => p[0] === placement) : placementStyleSequence.find((p) => placementEnableMap[p[0]])) || placementStyleSequence.find((p) => p[0] === placement) || placementStyleSequence[0];
     Object.assign(styles, placementStyle.step);
     pointer && Object.assign(pointer.style, placementStyle.pointer);