diff --git a/.eslintrc.js b/.eslintrc.js index 34c68225740033e70734d224f559663addae8cfc..6b40df4027e25d491ec4c4f524f3819c91550097 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -18,14 +18,13 @@ module.exports = { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', quotes: ['error', 'single', { avoidEscape: true }], 'quote-props': ['warn', 'as-needed'], - 'comma-dangle': ['error', 'always-multiline'], + 'comma-dangle': ['error', 'only-multiline'], camelcase: ['error', { properties: 'never' }], 'array-bracket-spacing': 'warn', 'arrow-spacing': 'warn', 'block-spacing': 'warn', 'comma-spacing': 'warn', 'computed-property-spacing': 'warn', - 'func-call-spacing': 'warn', 'generator-star-spacing': 'warn', 'key-spacing': 'warn', 'keyword-spacing': 'warn', @@ -53,10 +52,11 @@ module.exports = { 'default-param-last': 'off', 'no-param-reassign': ['error', { props: false }], - 'vue/max-attributes-per-line': ['error', { - singleline: { max: 4 }, - multiline: { max: 2 }, - }], + // 'vue/max-attributes-per-line': ['error', { + // singleline: { max: 4 }, + // multiline: { max: 2 }, + // }], + 'vue/max-attributes-per-line': 'off', 'vue/html-self-closing': ['warn', { html: { void: 'always', @@ -82,6 +82,8 @@ module.exports = { '@typescript-eslint/no-useless-constructor': 'warn', 'no-use-before-define': 'off', '@typescript-eslint/no-use-before-define': 'warn', + 'func-call-spacing': 'off', + '@typescript-eslint/func-call-spacing': 'warn' // 'dot-notation': 'off', // '@typescript-eslint/dot-notation': 'warn', diff --git a/packages/docs/button.md b/packages/docs/button.md index 663e3e2c929ee3898521e99ae9fbc24c329fdd88..3ec6b396654c307d28f29fed0d54f2dfdc7d7317 100644 --- a/packages/docs/button.md +++ b/packages/docs/button.md @@ -2,14 +2,14 @@ # props -| name | type | 说明 | -| :---- | :---------- | :--- | -| type | ButtonTypeT | 类型 | -| size | SizeT | 尺寸 | -| shape | ShapeT | 形状 | +| name | type | 说明 | +| :---- | :--------- | :--- | +| type | ButtonType | 类型 | +| size | SizeT | 尺寸 | +| shape | ShapeT | 形状 | ``` -enum ButtonTypeT { +enum ButtonType { PRIMARY = 'primary', OUTLINE = 'outline', TEXT = 'text', diff --git a/packages/docs/select.md b/packages/docs/select.md new file mode 100644 index 0000000000000000000000000000000000000000..842df15a03409e5a6bb2ba7200551fda6302588b --- /dev/null +++ b/packages/docs/select.md @@ -0,0 +1,35 @@ +# Select 下拉选择器 + +# props + +| name | type | 默认值 | 说明 | +| :----------- | :------- | :------------ | ------------------------------------------------------------- | +| model:value | Boolean | false | 开关状态 | +| shape | ShapeT | ShapeT.NORMAL | 形状 | +| size | SizeT | SizeT.NORMAL | 形状 | +| disabled | Boolean | false | 形状 | +| loading | Boolean | false | 加载状态 | +| beforeChange | Function | ()=>true | return Promise. resolve(true)继续切换，resolve(false)阻止切换 | + +``` +enum SizeT { + LARGE = 'large', + NORMAL = 'normal', + SMALL = 'small' +} + +enum ShapeT { + ROUND = 'round', + NORMAL = 'normal' +} +``` + +# event + +| name | 参数 | 说明 | +| :----- | :------------------------ | :------------- | +| change | value: boolean; ev: Event | 选择切换后触发 | + +# expose + +# slot diff --git a/packages/docs/switch.md b/packages/docs/switch.md index 258b3827c3c0792c9ad667064049283b250f7265..fa5638c73e3626f9f9755680aa343a255f2dc91b 100644 --- a/packages/docs/switch.md +++ b/packages/docs/switch.md @@ -2,14 +2,14 @@ # props -| name | type | 默认值 | 说明 | -| :----------- | :------- | :------------ | ------------------------------------------------------------ | -| model:value | Boolean | false | 开关状态 | -| shape | ShapeT | ShapeT.NORMAL | 形状 | -| size | SizeT | SizeT.NORMAL | 尺寸 | -| disabled | Boolean | false | 是否禁用 | -| loading | Boolean | false | 加载状态 | -| beforeChange |(val: boolean): Promise\\|boolean| - | return Promise.resolve(true)继续切换，resolve(false)阻止切换 | +| name | type | 默认值 | 说明 | +| :----------- | :------------------------------------------ | :------------ | ------------------------------------------------------------ | +| model:value | Boolean | false | 开关状态 | +| shape | ShapeT | ShapeT.NORMAL | 形状 | +| size | SizeT | SizeT.NORMAL | 尺寸 | +| disabled | Boolean | false | 是否禁用 | +| loading | Boolean | false | 加载状态 | +| beforeChange | (val: boolean): Promise\\|boolean | - | return Promise.resolve(true)继续切换，resolve(false)阻止切换 | ``` enum SizeT { diff --git a/packages/opendesign/README.md b/packages/opendesign/README.md index 7fe8d1c3985d993794688100cf70a67d1ca15b35..e47e7b781bad7f641eb2ac4510ef77f7184a2fd6 100644 --- a/packages/opendesign/README.md +++ b/packages/opendesign/README.md @@ -1,3 +1,21 @@ # opendesign components - vue3 components + +# build + +1. generate icon component + ``` + pnpm gen:icon + ``` +2. build component + + ``` + pnpm build:component + ``` + +3. build style + + ``` + pnpm build:style + ``` diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json index dc0c51bfc0893c1e6e46cc45f35671baf7a93e21..038394c8255f34fb734866c2d16e006fac94aee5 100644 --- a/packages/opendesign/package.json +++ b/packages/opendesign/package.json @@ -18,7 +18,8 @@ "scripts": { "gen:icon": "opensig-scripts gen:icon", "build:component": "opensig-scripts build:component", - "build:style": "opensig-scripts build:style" + "build:style": "opensig-scripts build:style", + "build": "opensig-scripts gen:icon && opensig-scripts build:component && opensig-scripts build:style" }, "peerDependencies": { "vue": "^3.1.0" diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts new file mode 100644 index 0000000000000000000000000000000000000000..4ecdbd952874bc729c4d81604ece92242352be1a --- /dev/null +++ b/packages/opendesign/src/components/_shared/dom.ts @@ -0,0 +1,38 @@ +export function isElement(el: any) { + return (typeof HTMLElement === 'object') + ? (el instanceof HTMLElement) + : !!(el && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 9) && typeof el.nodeName === 'string'); +} + +export function isRootEl(el: HTMLElement | Window) { + return el === window || ['BODY', 'HTML'].includes((el as HTMLElement).tagName); +} + +export function getScroll(el: HTMLElement | Window = window) { + if (!el) { + return { + left: 0, + top: 0 + }; + } + const isroot = isRootEl(el); + return { + left: isroot ? window.scrollX : (el as HTMLElement).scrollLeft, + top: isroot ? window.scrollY : (el as HTMLElement).scrollTop, + }; +} +export function getRelativeBounding(el: HTMLElement, c: DOMRect) { + const e = el.getBoundingClientRect(); + return { + top: e.top, + bottom: e.bottom, + left: e.left, + right: e.right, + width: e.width, + height: e.height, + offsetLeft: e.left - c.left, + offsetTop: e.top - c.top, + offsetRight: e.right - c.left, + offsetBottom: e.bottom - c.top, + }; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts index 6d797244fdda5e40bb7c12d3b78c0f656aef19fb..05782af61103190c990046b7e0b463c2025126bf 100644 --- a/packages/opendesign/src/components/_shared/global.ts +++ b/packages/opendesign/src/components/_shared/global.ts @@ -1,25 +1,31 @@ import { ref } from 'vue'; // 尺寸 -export enum SizeT { +export enum Size { LARGE = 'large', NORMAL = 'normal', SMALL = 'small' } -export const defaultSize = ref(SizeT.NORMAL); +export const defaultSize = ref(Size.NORMAL); -export function initSize(type: SizeT) { +export function initSize(type: Size) { defaultSize.value = type; } // 形状 -export enum ShapeT { +export enum Shape { ROUND = 'round', NORMAL = 'normal' } -export const defaultShape = ref(ShapeT.NORMAL); +export const defaultShape = ref(Shape.NORMAL); -export function initShape(shape: ShapeT) { +export function initShape(shape: Shape) { defaultShape.value = shape; +} + +export const OptionProvideKey = 'option-provide'; +export interface OptionValueT { + label: string; + value: string | number; } \ No newline at end of file diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue index bcc5347a51b558e0a3507847952216ea15a321de..cc9f1dd1f52eed702f63fdd101bcd32a877f9613 100644 --- a/packages/opendesign/src/components/button/OButton.vue +++ b/packages/opendesign/src/components/button/OButton.vue @@ -1,14 +1,14 @@ diff --git a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue b/packages/opendesign/src/components/button/__demo__/BtnIcon.vue index 3bb975955f31fc74766326b7ea7e5a4e1302f072..c56dce8ab1916d597034789357bd4d06df3147a5 100644 --- a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue +++ b/packages/opendesign/src/components/button/__demo__/BtnIcon.vue @@ -1,45 +1,45 @@ diff --git a/packages/opendesign/src/components/button/__demo__/BtnShape.vue b/packages/opendesign/src/components/button/__demo__/BtnShape.vue index 30df340d9cdde6f17b3e59ae8b7af716fb408337..d72c066f365ad8fa96b00fbb960f8f934e0276c2 100644 --- a/packages/opendesign/src/components/button/__demo__/BtnShape.vue +++ b/packages/opendesign/src/components/button/__demo__/BtnShape.vue @@ -1,27 +1,27 @@ diff --git a/packages/opendesign/src/components/button/__demo__/BtnSize.vue b/packages/opendesign/src/components/button/__demo__/BtnSize.vue index ee44432017daeb7cbb1b1d1fac2ae833853df4be..da1a553f958e4b1a917e3cb1c8fe0ceb07a3752b 100644 --- a/packages/opendesign/src/components/button/__demo__/BtnSize.vue +++ b/packages/opendesign/src/components/button/__demo__/BtnSize.vue @@ -1,11 +1,11 @@ diff --git a/packages/opendesign/src/components/button/__demo__/BtnType.vue b/packages/opendesign/src/components/button/__demo__/BtnType.vue index c781fc926c37333fe2ef4144d2cf50df2b7d8918..0e81e3503855b2f0ac4ba719fcbef45c38691152 100644 --- a/packages/opendesign/src/components/button/__demo__/BtnType.vue +++ b/packages/opendesign/src/components/button/__demo__/BtnType.vue @@ -1,12 +1,12 @@ diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts index f98f0e1562913b06c25e82b2fe42f0c56ebb016b..e885ef920ad362afa49e64afbfb29c54f8805528 100644 --- a/packages/opendesign/src/components/button/types.ts +++ b/packages/opendesign/src/components/button/types.ts @@ -1,8 +1,8 @@ -import { SizeT as ButtonSizeT, ShapeT as ButtonShapeT } from '../_shared/global'; +import { Size as ButtonSize, Shape as ButtonShape } from '../_shared/global'; -export { ButtonSizeT, ButtonShapeT }; +export { ButtonSize, ButtonShape }; -export enum ButtonTypeT { +export enum ButtonType { PRIMARY = 'primary', OUTLINE = 'outline', TEXT = 'text', diff --git a/packages/opendesign/src/components/config.ts b/packages/opendesign/src/components/config.ts index 1bb58256b3694a6b1fe989620d5fe8dfe6c9e015..0c01796531bec9c043a3d3c1096e7f6cb6c3ac79 100644 --- a/packages/opendesign/src/components/config.ts +++ b/packages/opendesign/src/components/config.ts @@ -1,6 +1,6 @@ -import { initSize, SizeT } from './_shared/global'; +import { initSize, Size } from './_shared/global'; export { initSize, - SizeT, + Size, }; \ No newline at end of file diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts index ed24dac2e3bc9853d7a23035a3350851c3dfabfa..aaa2a6d53bfe4c4211faa0042734fca0bbce3f18 100644 --- a/packages/portal/src/main.ts +++ b/packages/portal/src/main.ts @@ -1,7 +1,7 @@ import { createApp } from 'vue'; import './style.scss'; -import '@opensig/opendesign/es/style/token.css'; -import '@opensig/opendesign/es/style'; +import '@opensig/opendesign/src/components/style/token.css'; +import '@opensig/opendesign/src/components/style'; // import { initSize, SizeT } from 'opendesign/config'; import { router } from '@/router'; diff --git a/packages/portal/src/pages/TheButton.vue b/packages/portal/src/pages/TheButton.vue index 2f67ada0e1b47002ab7611f4be2370d6d2b399f7..2a2f0c965b1be183b8650cd7978fd6a6d57f86b0 100644 --- a/packages/portal/src/pages/TheButton.vue +++ b/packages/portal/src/pages/TheButton.vue @@ -1,5 +1,5 @@