From 51154a49a23aaa6c5a7f72d0a94858cecffec74b Mon Sep 17 00:00:00 2001 From: lviser Date: Wed, 29 Dec 2021 19:10:07 +0800 Subject: [PATCH] docs: domstyle for component (#119) --- lerna.json | 10 +++--- package.json | 4 ++- .../__tests__/unit/tooltip/index.test.ts | 6 ++-- packages/component/package.json | 2 +- packages/component/src/index.ts | 2 +- packages/component/src/tooltip/constants.ts | 10 +++--- packages/l7plot/package.json | 4 +-- packages/l7plot/src/index.ts | 2 +- website/docs/api/components/legend.zh.md | 33 +++++++++++++++++-- website/docs/api/components/tooltip.zh.md | 15 ++++++++- 10 files changed, 67 insertions(+), 21 deletions(-) diff --git a/lerna.json b/lerna.json index 3f93f9b4c..6b1f70c91 100644 --- a/lerna.json +++ b/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": { diff --git a/package.json b/package.json index e4b663f55..013855991 100644 --- a/package.json +++ b/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", diff --git a/packages/component/__tests__/unit/tooltip/index.test.ts b/packages/component/__tests__/unit/tooltip/index.test.ts index 6b91c112d..158581bf4 100644 --- a/packages/component/__tests__/unit/tooltip/index.test.ts +++ b/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) => { diff --git a/packages/component/package.json b/packages/component/package.json index 16b32a248..5759fe9a9 100644 --- a/packages/component/package.json +++ b/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", diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts index 994435ac8..a8c607e34 100644 --- a/packages/component/src/index.ts +++ b/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'; diff --git a/packages/component/src/tooltip/constants.ts b/packages/component/src/tooltip/constants.ts index f07d45c9a..c11ca1436 100644 --- a/packages/component/src/tooltip/constants.ts +++ b/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 = `
diff --git a/packages/l7plot/package.json b/packages/l7plot/package.json index 434e4e683..e4f0fd16b 100644 --- a/packages/l7plot/package.json +++ b/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" diff --git a/packages/l7plot/src/index.ts b/packages/l7plot/src/index.ts index 0f9f24add..4496e07af 100644 --- a/packages/l7plot/src/index.ts +++ b/packages/l7plot/src/index.ts @@ -1,4 +1,4 @@ -export const version = '0.0.3'; +export const version = '0.0.4'; /** 资源静态注册 **/ export { diff --git a/website/docs/api/components/legend.zh.md b/website/docs/api/components/legend.zh.md index 2cc29305d..43c7cb898 100644 --- a/website/docs/api/components/legend.zh.md +++ b/website/docs/api/components/legend.zh.md @@ -41,11 +41,40 @@ DOM 容器自定义 className 。 自定义 legend 样式。 +分类图例 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; + } +} +``` + +连续图例 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 -适用于 分类图例，自定义配置图例项的内容。_ICategoryLegendListItem_ 配置如下： +适用于 分类图例，自定义配置图例项的内容。_CategoryLegendListItem_ 配置如下： | 参数名 | 类型 | 是否必选 | 默认值 | 描述 | | ------ | ------ | -------- | ------ | ---------------- | diff --git a/website/docs/api/components/tooltip.zh.md b/website/docs/api/components/tooltip.zh.md index 2a143f85a..26aadd5dd 100644 --- a/website/docs/api/components/tooltip.zh.md +++ b/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