docs: domstyle for component (#119)

lerna.json

@@ -3,11 +3,13 @@
   "useWorkspaces": true,
   "version": "independent",
   "command": {
+    "version": {
+      "ignoreChanges": ["**/__tests__/**", "**/*.md"],
+      "message": "chore: publish %s",
+      "private": false
+    },
     "publish": {
-      "packages": ["packages/*"],
-      "ignoreChanges": ["__tests__", "*.md", "website", "storybook"],
-      "registry": "https://registry.npmjs.com",
-      "message": "chore: publish"
+      "registry": "https://registry.npmjs.org"
     }
   },
   "publishConfig": {

package.json

@@ -28,7 +28,9 @@
     "build-website": "lerna run build --stream --scope=l7plot-website",
     "bundle": "lerna run build:umd --stream --scope=@antv/l7plot",
     "deploy-website": "lerna run deploy --stream --scope=l7plot-website",
-    "publish": "lerna publish"
+    "version": "lerna version",
+    "prepublish-package": "yarn build && yarn bundle",
+    "publish-package": "lerna publish from-package"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",

packages/component/__tests__/unit/tooltip/index.test.ts

@@ -33,12 +33,12 @@ describe('tooltip', () => {
     const container = tooltip.getContainer();
 
     expect(Array.from(container.classList).includes('l7plot-tooltip')).toBe(true);
-    const title = container.getElementsByClassName('l7plot-tooltip-title')[0] as HTMLElement;
+    const title = container.getElementsByClassName('l7plot-tooltip__title')[0] as HTMLElement;
     expect(title.innerText).toBe('my title');
 
-    const listItems = Array.from(container.getElementsByClassName('l7plot-tooltip-list-item')) as HTMLElement[];
+    const listItems = Array.from(container.getElementsByClassName('l7plot-tooltip__list-item')) as HTMLElement[];
     each(listItems, (listItem, index) => {
-      expect(listItem.getElementsByClassName('l7plot-tooltip-value')[0].innerText).toBe(items[index].value);
+      expect(listItem.getElementsByClassName('l7plot-tooltip__value')[0].innerText).toBe(items[index].value);
     });
 
     each(Theme[Constants.CONTAINER_CLASS], (val, key) => {

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7plot-component",
-  "version": "0.0.3-alpha.5",
+  "version": "0.0.3-alpha.6",
   "description": "Components for L7Plot",
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.ts",

packages/component/src/index.ts

@@ -1,4 +1,4 @@
-export const version = '0.0.3-alpha.5';
+export const version = '0.0.3-alpha.6';
 
 // 类型定义导出
 export * from './types';

packages/component/src/tooltip/constants.ts

@@ -1,9 +1,9 @@
 export const CONTAINER_CLASS = 'l7plot-tooltip';
-export const TITLE_CLASS = 'l7plot-tooltip-title';
-export const LIST_CLASS = 'l7plot-tooltip-list';
-export const LIST_ITEM_CLASS = 'l7plot-tooltip-list-item';
-export const NAME_CLASS = 'l7plot-tooltip-name';
-export const VALUE_CLASS = 'l7plot-tooltip-value';
+export const TITLE_CLASS = 'l7plot-tooltip__title';
+export const LIST_CLASS = 'l7plot-tooltip__list';
+export const LIST_ITEM_CLASS = 'l7plot-tooltip__list-item';
+export const NAME_CLASS = 'l7plot-tooltip__name';
+export const VALUE_CLASS = 'l7plot-tooltip__value';
 
 export const CONTAINER_TPL = `<div class="${CONTAINER_CLASS}">
   <div class="${TITLE_CLASS}"></div>

packages/l7plot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7plot",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Geospatial Visualization Chart Library",
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.ts",
@@ -46,7 +46,7 @@
   "dependencies": {
     "@antv/event-emitter": "^0.1.2",
     "@antv/l7": "^2.6.25",
-    "@antv/l7plot-component": "^0.0.3-alpha.5",
+    "@antv/l7plot-component": "^0.0.3-alpha.6",
     "@antv/util": "^2.0.13",
     "lodash-es": "^4.17.21",
     "topojson-client": "^3.1.0"

packages/l7plot/src/index.ts

@@ -1,4 +1,4 @@
-export const version = '0.0.3';
+export const version = '0.0.4';
 
 /** 资源静态注册 **/
 export {

website/docs/api/components/legend.zh.md

@@ -41,11 +41,40 @@ DOM 容器自定义 className 。
 
 自定义 legend 样式。
 
+<tag color="green" text="分类图例">分类图例</tag> CSS 样式自定义：
+
+```ts
+{
+  domStyles: {
+    'l7plot-legend__category'?: CSSProperties;
+    'l7plot-legend__title'?: CSSProperties;
+    'l7plot-legend__category-list'?: CSSProperties;
+    'l7plot-legend__list-item'?: CSSProperties;
+    'l7plot-legend__category-marker'?: CSSProperties;
+    'l7plot-legend__category-value'?: CSSProperties;
+  }
+}
+```
+
+<tag color="cyan" text="连续图例">连续图例</tag> CSS 样式自定义：
+
+```ts
+{
+  domStyles: {
+    'l7plot-legend__continue'?: CSSProperties;
+    'l7plot-legend__title'?: CSSProperties;
+    'l7plot-legend__ribbon'?: CSSProperties;
+    'l7plot-legend__gradient-bar'?: CSSProperties;
+    'l7plot-legend__value-range'?: CSSProperties;
+  }
+}
+```
+
 ## `legend.`items
 
-`ICategoryLegendListItem[]` optional
+`CategoryLegendListItem[]` optional
 
-适用于 <tag color="green" text="分类图例">分类图例</tag>，自定义配置图例项的内容。_ICategoryLegendListItem_ 配置如下：
+适用于 <tag color="green" text="分类图例">分类图例</tag>，自定义配置图例项的内容。_CategoryLegendListItem_ 配置如下：
 
 | 参数名 | 类型   | 是否必选 | 默认值 | 描述             |
 | ------ | ------ | -------- | ------ | ---------------- |

website/docs/api/components/tooltip.zh.md

@@ -93,7 +93,20 @@ tooltip 相对锚点的偏移量。
 
 `object` optional default: `{}`
 
-自定义 tooltip 样式。
+自定义 tooltip 样式，CSS 样式自定义如下：
+
+```ts
+{
+  domStyles: {
+    'l7plot-tooltip'?: CSSProperties;
+    'l7plot-tooltip__title'?: CSSProperties;
+    'l7plot-tooltip__list'?: CSSProperties;
+    'l7plot-tooltip__list-item'?: CSSProperties;
+    'l7plot-tooltip__name'?: CSSProperties;
+    'l7plot-tooltip__value'?: CSSProperties;
+  }
+}
+```
 
 ### `tooltip.`showComponent