diff --git a/packages/docs/ReleaesNote.md b/packages/docs/ReleaesNote.md new file mode 100644 index 0000000000000000000000000000000000000000..32ca0f984926de868e953793bf50b912782a327b --- /dev/null +++ b/packages/docs/ReleaesNote.md @@ -0,0 +1,9 @@ +# 0.0.26 + +## card + +- 去掉 titleMaxRow、detailMaxRow 属性,使用 css 变量设置: --card-title-max-row,--card-detail-max-row + +## figure + +- 去掉 position、fit 属性,使用 css 变量设置:--figure-fit --figure-position diff --git a/packages/docs/global.md b/packages/docs/global.md index a5cb12b338235fa6df0cc9db20281b9a8664cc3a..d67b52f6ee80dc77ecc00c3a8bd1556f3b0abe67 100644 --- a/packages/docs/global.md +++ b/packages/docs/global.md @@ -5,7 +5,7 @@ | 方法名 | 参数 | 返回值 | 说明 | | :-------- | :------------------------------------- | :----- | :--------------- | | initSize | (type: 'large' \| 'normal' \| 'small') | -- | 设置全局组件尺寸 | -| initShape | (type: 'normal' \| 'round') | -- | 设置全局组件形状 | +| initRound | (type: 'pill' \| '') | -- | 设置全局组件圆角 | ## 配置全局图标 diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json index eeb5c5077196fa3ed34d4d00317b1f012410643e..0c57c9dcc7c455af3a4a1ff17b63fe7f1eb9930b 100644 --- a/packages/opendesign/package.json +++ b/packages/opendesign/package.json @@ -1,6 +1,6 @@ { "name": "@opensig/opendesign", - "version": "0.0.19", + "version": "0.0.26", "main": "lib/index.js", "module": "es/index.mjs", "types": "es/index.d.ts", @@ -27,7 +27,7 @@ "vue": "^3.1.0" }, "devDependencies": { - "@opensig/opensig-scripts": "workspace:^0.0.1", + "@opensig/opensig-scripts": "workspace:^0.0.6", "@types/lodash-es": "^4.17.6", "typescript": "^4.6.4", "vue": "^3.2.41", diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts index ead36de1bc3bacdec791eb6a6664699122eb8731..6cb43794655c3df5b54f0b7a1f31c20a6d8768cf 100644 --- a/packages/opendesign/src/components/_shared/dom.ts +++ b/packages/opendesign/src/components/_shared/dom.ts @@ -99,3 +99,7 @@ export function getCssVariable(key: string, el?: HTMLElement) { const ele = el ? el : document.documentElement; return ele.style.getPropertyValue(key); } + +export function supportTouch() { + return 'ontouchstart' in window; +} diff --git a/packages/opendesign/src/components/_shared/export.ts b/packages/opendesign/src/components/_shared/export.ts index 66e8ca7af330e0bf65b33d250328de42aa1fb657..54b272ab148b6db290dbc23fbc902bf2f5442b0b 100644 --- a/packages/opendesign/src/components/_shared/export.ts +++ b/packages/opendesign/src/components/_shared/export.ts @@ -1,4 +1,4 @@ -export { initSize, initShape, initRound } from './global'; +export { initSize, initRound } from './global'; export * from './init-icons'; diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts index 8be32c05f6fac79a408f2f6e3b7282025f7ac3b5..b5deb32e1f4dea1a5c366797e8b529e0db161ca0 100644 --- a/packages/opendesign/src/components/_shared/global.ts +++ b/packages/opendesign/src/components/_shared/global.ts @@ -1,34 +1,29 @@ import { ref } from 'vue'; // 尺寸 -export type SizeT = 'large' | 'medium' | 'small'; +export const SizeTypes = ['large', 'medium', 'small'] as const; +export type SizeT = typeof SizeTypes[number]; export const defaultSize = ref('medium'); export function initSize(val: SizeT) { defaultSize.value = val; } // 圆角 -export type RoundT = 'pill' | 'normal' | string; -export const defaultRound = ref<'pill' | 'normal'>('normal'); - -export function initRound(type: 'pill' | 'normal') { +export type RoundT = 'pill' | string; +export const defaultRound = ref<'pill' | string>(''); +export function initRound(type: RoundT) { defaultRound.value = type; } // 方向 -export type DirectionT = 'h' | 'v'; - -export type VariantT = 'solid' | 'outline' | 'text'; +export const DirectionTypes = ['h', 'v'] as const; +export type DirectionT = typeof DirectionTypes[number]; -export type ColorT = 'normal' | 'primary' | 'success' | 'warning' | 'danger'; +export const VariantTypes = ['solid', 'outline', 'text'] as const; +export type VariantT = typeof VariantTypes[number]; +export const ColorTypes = ['normal', 'primary', 'success', 'warning', 'danger'] as const; +export type ColorT = typeof ColorTypes[number]; -// todo 废弃 -// 形状 -export type ShapeT = 'round' | 'normal'; -export const defaultShape = ref('normal'); -export function initShape(type: ShapeT) { - defaultShape.value = type; -} -// 状态 -export type StatusT = 'normal' | 'primary' | 'warning' | 'danger' | 'success'; +export const Color2Types = ['normal', 'success', 'warning', 'danger'] as const; +export type Color2T = typeof ColorTypes[number]; diff --git a/packages/opendesign/src/components/_shared/pointer.ts b/packages/opendesign/src/components/_shared/pointer.ts new file mode 100644 index 0000000000000000000000000000000000000000..629c34acc85075ad8935495c0a92e3a1102087ed --- /dev/null +++ b/packages/opendesign/src/components/_shared/pointer.ts @@ -0,0 +1,94 @@ +interface PointT { + x: number; + y: number; +} +interface PointMoveT { + x: number; + y: number; + dx: number; + dy: number; +} +interface TouchOptionsT { + onStart?: (pos: PointT, e: TouchEvent) => void; + onMove?: (pos: PointMoveT, e: TouchEvent) => void; + onEnd?: (pos: PointMoveT, e: TouchEvent) => void; +} +function noop() {} +export class OTouch { + private el: HTMLElement; + private x1: number; + private y1: number; + private onStart: (position: PointT, e: TouchEvent) => void; + private onMove: (position: PointMoveT, e: TouchEvent) => void; + private onEnd: (position: PointMoveT, e: TouchEvent) => void; + private removeListener: (() => void) | null; + constructor(el: HTMLElement, options: TouchOptionsT) { + this.el = el; + this.x1 = 0; + this.y1 = 0; + + this.bind(); + + this.onStart = options.onStart || noop; + this.onMove = options.onMove || noop; + this.onEnd = options.onEnd || noop; + + this.removeListener = null; + } + private bind() { + this.el.addEventListener('touchstart', (e: TouchEvent) => { + const { pageX: x, pageY: y } = e.touches[0]; + this.x1 = x; + this.y1 = y; + + const moveFn = this.onPointerMove.bind(this); + const upFn = this.onPointerUp.bind(this); + window.addEventListener('touchmove', moveFn, { passive: false }); + window.addEventListener('touchend', upFn); + window.addEventListener('touchcancel', upFn); + this.removeListener = () => { + window.removeEventListener('touchmove', moveFn); + window.removeEventListener('touchend', upFn); + window.removeEventListener('touchcancel', upFn); + }; + this.onStart( + { + x, + y, + }, + e + ); + }); + } + private onPointerMove(e: TouchEvent) { + const { pageX: x, pageY: y } = e.touches[0]; + let dx = x - this.x1; + let dy = y - this.y1; + this.onMove( + { + x, + y, + dx, + dy, + }, + e + ); + } + private onPointerUp(e: TouchEvent) { + const { pageX: x, pageY: y } = e.changedTouches[0]; + let dx = x - this.x1; + let dy = y - this.y1; + this.onEnd( + { + x, + y, + dx, + dy, + }, + e + ); + if (this.removeListener) { + this.removeListener(); + } + } +} diff --git a/packages/opendesign/src/components/badge/types.ts b/packages/opendesign/src/components/badge/types.ts index 2e14440779a5436022cd2df58e3dd10014541b33..467030b279c44bce9089c3f762d18e3979223809 100644 --- a/packages/opendesign/src/components/badge/types.ts +++ b/packages/opendesign/src/components/badge/types.ts @@ -17,8 +17,7 @@ export const badgeProps = { default: 99, }, /** - * 颜色类型 - * 'normal' | 'primary' | 'success' | 'warning' | 'danger' + * 颜色类型 'normal' | 'primary' | 'success' | 'warning' | 'danger' */ color: { type: String as PropType, @@ -30,11 +29,10 @@ export const badgeProps = { dot: { type: Boolean, default: false, - } + }, /** * 徽标位置偏移量 - */, - offset: { + */ offset: { type: Array as PropType>, default: () => [], }, diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts index 98dcbc5390f2528486e2c5540e1b5e73fc561df0..758a649ac7e2bd55a12b08656dbf2502c8f19fb7 100644 --- a/packages/opendesign/src/components/button/types.ts +++ b/packages/opendesign/src/components/button/types.ts @@ -1,53 +1,54 @@ import { ExtractPropTypes, PropType } from 'vue'; import { RoundT, ColorT, VariantT } from '../_shared/global'; -export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link' +export const ButtonSizeTypes = ['large', 'medium', 'small', 'mini'] as const; +export type ButtonSizeT = typeof ButtonSizeTypes[number]; export const buttonProps = { /** - * 颜色类型:ColorT + * 颜色类型 ColorT */ color: { type: String as PropType, - default: 'normal' + default: 'normal', }, /** - * 按钮类型:ColorT + * 按钮类型 VariantT */ variant: { type: String as PropType, - default: 'outline' + default: 'outline', }, /** - * 按钮尺寸:SizeT + * 按钮尺寸 ButtonSizeT */ size: { - type: String as PropType<'mini' | 'small' | 'medium' | 'large'> + type: String as PropType, }, /** - * 圆角值 + * 圆角值 RoundT */ round: { - type: String as PropType + type: String as PropType, }, /** * 是否为loading状态 */ loading: { - type: Boolean + type: Boolean, }, /** * 是否为禁用状态 */ disabled: { - type: Boolean + type: Boolean, }, /** * 链接跳转 */ href: { type: String, - } + }, }; export type ButtonPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/card/OCard.vue b/packages/opendesign/src/components/card/OCard.vue index 6c8ae1552625724fde96b9fdaf9611b26df3c765..04b811961ce23592da522a613ad1dd0783691bfa 100644 --- a/packages/opendesign/src/components/card/OCard.vue +++ b/packages/opendesign/src/components/card/OCard.vue @@ -1,10 +1,10 @@