@antv/s2-vue 2.0.0-next.5 → 2.0.0-next.7

package/esm/style.css

@@ -1,8 +1,8 @@
 .antv-s2-tooltip-operator {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
+  background: var(--antv-s2-tooltip-operator-background, #f9f9f9);
   font-size: 12px;
   line-height: 32px;
-  background: #f9f9f9;
   padding: 0 12px;
   border: 0;
   cursor: pointer;
@@ -14,7 +14,7 @@
 .antv-s2-tooltip-operator-menus.ant-menu-vertical.ant-menu {
   font-size: 12px;
   line-height: 32px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
   border: 0;
   margin: 0 -12px;
 }
@@ -28,7 +28,7 @@
   height: 30px;
 }
 .antv-s2-tooltip-operator-menus.ant-menu-vertical.ant-menu .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
 }
 .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-dropdown-menu-item,
 .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-dropdown-menu-item,
@@ -44,7 +44,7 @@
 .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-dropdown-menu-item:not(.ant-menu-item-active),
 .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-menu-item:not(.ant-menu-item-active),
 .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-item:not(.ant-menu-item-active) {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
 }
 .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-dropdown-menu-submenu .ant-menu-submenu-title,
 .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-dropdown-menu-submenu .ant-menu-submenu-title,
@@ -67,7 +67,7 @@
 .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu .ant-menu-submenu-title:not(.ant-menu-item-active),
 .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title:not(.ant-menu-item-active),
 .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title:not(.ant-menu-item-active) {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
 }
 .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-dropdown-menu-submenu .ant-menu-submenu-title .ant-dropdown-menu-title-content,
 .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-dropdown-menu-submenu .ant-menu-submenu-title .ant-dropdown-menu-title-content,
@@ -95,7 +95,7 @@
 }
 .antv-s2-tooltip-operator-submenu-popup .ant-dropdown-menu-item:not(.ant-menu-item-active),
 .antv-s2-tooltip-operator-submenu-popup .ant-menu-item:not(.ant-menu-item-active) {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
 }
 .antv-s2-tooltip-operator-submenu-popup .ant-menu-vertical .ant-menu-item {
   margin: 0;
@@ -112,6 +112,7 @@
 .antv-s2-tooltip-operator-icon svg {
   width: 12px;
   height: 12px;
+  fill: var(--antv-s2-font);
 }
 @media only screen and (max-device-width: 480px) {
 .antv-s2-tooltip-operator-menus.ant-menu-vertical.ant-menu {
@@ -144,7 +145,7 @@
   .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu .ant-menu-submenu-title:not(.ant-menu-item-active),
   .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title:not(.ant-menu-item-active),
   .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title:not(.ant-menu-item-active) {
-    color: rgba(0, 0, 0, 0.65);
+    color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
 }
 .antv-s2-tooltip-operator-submenu-popup .ant-dropdown-menu-item,
   .antv-s2-tooltip-operator-submenu-popup .ant-menu-item {
@@ -152,7 +153,7 @@
 }
 .antv-s2-tooltip-operator-submenu-popup .ant-dropdown-menu-item:not(.ant-menu-item-active),
   .antv-s2-tooltip-operator-submenu-popup .ant-menu-item:not(.ant-menu-item-active) {
-    color: rgba(0, 0, 0, 0.65);
+    color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
 }
 .antv-s2-tooltip-operator-icon svg {
     width: 12px;
@@ -168,7 +169,7 @@
   overflow: auto;
   z-index: 1024;
   display: inline-block;
-  background: rgba(255, 255, 255, 0.96);
+  background: var(--antv-s2-tooltip-background, rgba(255, 255, 255, 0.95));
   border-radius: 2px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
   font-size: 12px;
@@ -192,22 +193,22 @@
   padding: 12px;
   line-height: 16px;
   overflow-wrap: break-word;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--antv-s2-font-85, rgba(0, 0, 0, 0.85));
 }
 .antv-s2-tooltip-description {
   padding: 0 12px 12px;
   line-height: 16px;
   overflow-wrap: break-word;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--antv-s2-font-45, rgba(0, 0, 0, 0.45));
 }
 .antv-s2-tooltip-tips {
   padding: 4px 12px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--antv-s2-font-45, rgba(0, 0, 0, 0.45));
 }
 .antv-s2-tooltip-infos {
   padding: 4px 12px;
   line-height: 20px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--antv-s2-font-45, rgba(0, 0, 0, 0.45));
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
@@ -220,7 +221,7 @@
 }
 .antv-s2-tooltip-summary {
   line-height: 20px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--antv-s2-font-65, rgba(0, 0, 0, 0.65));
   overflow: hidden;
   padding: 12px;
 }
@@ -243,7 +244,7 @@
   padding: 12px;
 }
 .antv-s2-tooltip-interpretation + .antv-s2-tooltip-head-info-list {
-  border-top: 1px solid #e9e9e9;
+  border-top: 1px solid var(--antv-s2-border, #e9e9e9);
 }
 .antv-s2-tooltip-interpretation .antv-s2-tooltip-interpretation-head {
   margin-bottom: 12px;
@@ -253,10 +254,10 @@
   height: 14px;
 }
 .antv-s2-tooltip-interpretation .antv-s2-tooltip-interpretation-head .antv-s2-tooltip-interpretation-name {
-  color: #000;
+  color: var(--antv-s2-font, #000);
 }
 .antv-s2-tooltip-head-info-list {
-  color: #a2a2a2;
+  color: var(--antv-s2-font-65, #a2a2a2);
   padding: 12px 12px 4px;
   line-height: 24px;
   word-break: break-word;
@@ -269,13 +270,13 @@
   margin-right: 5px;
 }
 .antv-s2-tooltip-highlight {
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--antv-s2-font-85, rgba(0, 0, 0, 0.85));
 }
 .antv-s2-tooltip-detail-list {
   padding: 2px 12px 8px;
 }
 .antv-s2-tooltip-detail-list .antv-s2-tooltip-detail-item {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--antv-s2-font-65, rgba(0, 0, 0, 0.65));
   overflow: hidden;
   margin: 4px 0;
   display: flex;
@@ -362,6 +363,12 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+.antv-s2-drill-down-menu.ant-menu[data-v-8dd920ec] {
+  background: var(--antv-s2-tooltip-background, #fff);
+}
+.antv-s2-drill-down-menu.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected[data-v-8dd920ec] {
+  background-color: var(--antv-s2-block-background, #e6f7ff);
+}
 .antv-s2-drill-down-menu-item[data-v-8dd920ec] {
   height: 32px !important;
   line-height: 32px !important;

package/lib/index.js

@@ -93,7 +93,7 @@ const Locale = {
 };
 const SHEET_COMPONENT_DEFAULT_OPTIONS = {
   tooltip: {
-    showTooltip: true,
+    enable: true,
     autoAdjustBoundary: "body",
     operation: {
       hiddenColumns: true,
@@ -1725,10 +1725,10 @@ const buildDrillDownOptions = (options, partDrillDown, callback) => {
   if (!isEmpty(partDrillDown)) {
     const drillDownActionIcon = {
       belongsCell: "rowCell",
-      iconNames: ["DrillDownIcon"],
+      icons: ["DrillDownIcon"],
       defaultHide: true,
       displayCondition: partDrillDown.displayCondition || defaultPartDrillDownDisplayCondition,
-      action: (actionIconProps) => {
+      onClick: (actionIconProps) => {
         const { iconName, meta, event } = actionIconProps;
         if (iconName === "DrillDownIcon") {
           meta.spreadsheet.store.set("drillDownNode", meta);
@@ -2065,7 +2065,7 @@ const _sfc_main$7 = vue.defineComponent({
   name: "TooltipOperator",
   props: [
     "menus",
-    "onlyMenu",
+    "onlyShowOperator",
     "onClick",
     "cell"
   ],
@@ -2094,7 +2094,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(`${_ctx.TOOLTIP_PREFIX_CLS}-operator`)
   }, [
-    _ctx.onlyMenu ? (vue.openBlock(), vue.createBlock(_component_Menu, {
+    _ctx.onlyShowOperator ? (vue.openBlock(), vue.createBlock(_component_Menu, {
       key: 0,
       class: vue.normalizeClass(`${_ctx.TOOLTIP_PREFIX_CLS}-operator-menus`),
       onClick: _ctx.onMenuClick
@@ -2161,10 +2161,12 @@ const _sfc_main$6 = vue.defineComponent({
     "content"
   ],
   setup(props) {
-    const { operator, onlyMenu } = s2.getTooltipDefaultOptions(props.options);
+    const { operator, onlyShowOperator } = s2.getTooltipDefaultOptions(
+      props.options
+    );
     return {
       operator,
-      onlyMenu
+      onlyShowOperator
     };
   },
   components: {
@@ -2185,16 +2187,16 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TooltipHeadInfo = vue.resolveComponent("TooltipHeadInfo");
   const _component_TooltipDetail = vue.resolveComponent("TooltipDetail");
   const _component_TooltipInfos = vue.resolveComponent("TooltipInfos");
-  return _ctx.onlyMenu ? (vue.openBlock(), vue.createBlock(_component_TooltipOperator, {
+  return _ctx.onlyShowOperator ? (vue.openBlock(), vue.createBlock(_component_TooltipOperator, {
     key: 0,
     menus: ((_a = _ctx.operator) == null ? void 0 : _a.menus) || [],
-    onlyMenu: true,
+    onlyShowOperator: true,
     cell: _ctx.cell,
     onClick: (_b = _ctx.operator) == null ? void 0 : _b.onClick
   }, null, 8, ["menus", "cell", "onClick"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
     vue.createVNode(_component_TooltipOperator, {
       menus: ((_c = _ctx.operator) == null ? void 0 : _c.menus) || [],
-      onlyMenu: false,
+      onlyShowOperator: false,
       cell: _ctx.cell,
       onClick: (_d = _ctx.operator) == null ? void 0 : _d.onClick
     }, null, 8, ["menus", "cell", "onClick"]),
@@ -2386,7 +2388,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
 const S2Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 const RENDER_TOOLTIP_OPTION = {
   tooltip: {
-    renderTooltip: (spreadsheet) => new CustomTooltip(spreadsheet)
+    render: (spreadsheet) => new CustomTooltip(spreadsheet)
   }
 };
 const getSheetComponentOptions = (...options) => getBaseSheetComponentOptions(RENDER_TOOLTIP_OPTION, ...options);
@@ -2710,7 +2712,7 @@ const useSheetUpdate = (s2Ref, props) => {
     (dataCfg, prevDataCfg) => {
       var _a, _b, _c, _d, _e, _f;
       if (((_b = (_a = prevDataCfg == null ? void 0 : prevDataCfg.fields) == null ? void 0 : _a.columns) == null ? void 0 : _b.length) !== ((_d = (_c = dataCfg == null ? void 0 : dataCfg.fields) == null ? void 0 : _c.columns) == null ? void 0 : _d.length)) {
-        (_e = s2Ref.value) == null ? void 0 : _e.clearColumnLeafNodes();
+        (_e = s2Ref.value) == null ? void 0 : _e.facet.clearInitColLeafNodes();
       }
       updateFlag.rerender = true;
       updateFlag.reloadData = true;