From 8818998748945eea3acd88f88eff8d9387a9e86c Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sat, 24 Apr 2021 23:27:24 +0800 Subject: [PATCH 01/18] =?UTF-8?q?feat(ui/types):=20=E6=8F=90=E4=BE=9Bjsx,t?= =?UTF-8?q?sx=E6=94=AF=E6=8C=81.=E5=AE=8C=E6=88=90=E4=BB=A5=E4=B8=8B?= =?UTF-8?q?=E7=BB=84=E4=BB=B6button,checkbox,checkboxGroup,col,counter,dia?= =?UTF-8?q?log,form,icon,image,i?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/ui --- packages/varlet-ui/src/tabs/props.ts | 7 ++-- packages/varlet-ui/types/button.d.ts | 23 ++++++++++- packages/varlet-ui/types/checkbox.d.ts | 31 ++++++++++++++- packages/varlet-ui/types/checkboxGroup.d.ts | 26 ++++++++++++- packages/varlet-ui/types/col.d.ts | 12 +++++- packages/varlet-ui/types/counter.d.ts | 41 +++++++++++++++++++- packages/varlet-ui/types/dialog.d.ts | 42 ++++++++++++++++++--- packages/varlet-ui/types/form.d.ts | 15 +++++++- packages/varlet-ui/types/icon.d.ts | 13 ++++++- packages/varlet-ui/types/image.d.ts | 19 +++++++++- packages/varlet-ui/types/input.d.ts | 42 ++++++++++++++++++++- packages/varlet-ui/types/menu.d.ts | 20 +++++++++- packages/varlet-ui/types/option.d.ts | 9 ++++- packages/varlet-ui/types/picker.d.ts | 42 ++++++++++++++++++--- packages/varlet-ui/types/popup.d.ts | 21 ++++++++++- packages/varlet-ui/types/radio.d.ts | 31 ++++++++++++++- packages/varlet-ui/types/radioGroup.d.ts | 20 +++++++++- packages/varlet-ui/types/select.d.ts | 42 ++++++++++++++++++++- packages/varlet-ui/types/snackbar.d.ts | 9 ++--- packages/varlet-ui/types/sticky.d.ts | 12 +++++- packages/varlet-ui/types/swipe.d.ts | 24 +++++++++++- packages/varlet-ui/types/tab.d.ts | 12 +++++- packages/varlet-ui/types/tabItem.d.ts | 10 ++++- packages/varlet-ui/types/tabs.d.ts | 27 ++++++++++++- packages/varlet-ui/types/tabsItems.d.ts | 11 +++++- 25 files changed, 513 insertions(+), 48 deletions(-) diff --git a/packages/varlet-ui/src/tabs/props.ts b/packages/varlet-ui/src/tabs/props.ts index 6f575239297..c835ea9fc3e 100644 --- a/packages/varlet-ui/src/tabs/props.ts +++ b/packages/varlet-ui/src/tabs/props.ts @@ -14,12 +14,12 @@ export const props = { layoutDirection: { type: String, default: 'horizontal', - validator: directionValidator + validator: directionValidator, }, itemDirection: { - type: String, + type: String, default: 'horizontal', - validator: directionValidator + validator: directionValidator, }, fixedBottom: { type: Boolean, @@ -55,7 +55,6 @@ export const props = { onClick: { type: Function as PropType<(active: string | number) => void>, }, - // 激活标签切换事件 onChange: { type: Function as PropType<(active: string | number) => void>, }, diff --git a/packages/varlet-ui/types/button.d.ts b/packages/varlet-ui/types/button.d.ts index ef755ef7270..418c52a9e02 100644 --- a/packages/varlet-ui/types/button.d.ts +++ b/packages/varlet-ui/types/button.d.ts @@ -1,3 +1,24 @@ import { VarComponent } from './varComponent' -export class Button extends VarComponent {} +interface ButtonProps { + type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' + size?: 'normal' | 'mini' | 'small' | 'large' + loading?: boolean + round?: boolean + block?: boolean + text?: boolean + outline?: boolean + disabled?: boolean + ripple?: boolean + color?: string + textColor?: string + loadingRadius?: string | number + loadingType?: 'circle' | 'wave' | 'cube' | 'rect' | 'disappear' + loadingSize?: 'normal' | 'mini' | 'small' | 'large' + onClick?: (e: Event) => void + onTouchstart?: (e: Event) => void +} + +export class Button extends VarComponent { + $props: ButtonProps +} diff --git a/packages/varlet-ui/types/checkbox.d.ts b/packages/varlet-ui/types/checkbox.d.ts index 4e3b7435585..1b4d2de9c88 100644 --- a/packages/varlet-ui/types/checkbox.d.ts +++ b/packages/varlet-ui/types/checkbox.d.ts @@ -1,3 +1,32 @@ import { VarComponent } from './varComponent' -export class Checkbox extends VarComponent {} +type ValidateTriggers = 'onChange' + +interface CheckboxProps { + modelValue?: any + checkedValue?: any + uncheckedValue?: any + checkedColor?: string + uncheckedColor?: string + disabled?: boolean + readonly?: boolean + iconSize?: string | number + ripple?: boolean + validateTrigger?: Array + rules?: Array<(value: any) => any> + onClick?: (e: Event) => void + onChange?: (value: any) => void + 'onUpdate:modelValue'?: (value: any) => void +} + +export class Checkbox extends VarComponent { + $props: CheckboxProps + + validate(): Promise + + resetValidation(): void + + reset(): void + + toggle(value: any): void +} diff --git a/packages/varlet-ui/types/checkboxGroup.d.ts b/packages/varlet-ui/types/checkboxGroup.d.ts index b699786de96..341245b4dc2 100644 --- a/packages/varlet-ui/types/checkboxGroup.d.ts +++ b/packages/varlet-ui/types/checkboxGroup.d.ts @@ -1,3 +1,27 @@ import { VarComponent } from './varComponent' -export class CheckboxGroup extends VarComponent {} +export type ValidateTriggers = 'onChange' + +interface CheckboxGroupProps { + modelValue?: any[] + max?: string | number + direction?: 'horizontal' | 'vertical' + validateTrigger?: Array + rules?: Array<(value: any) => any> + onChange?: (value: Array) => void + 'onUpdate:modelValue'?: (value: Array) => void +} + +export class CheckboxGroup extends VarComponent { + $props: CheckboxGroupProps + + validate(): Promise + + resetValidation(): void + + reset(): void + + checkAll(): any + + inverseAll(): any +} diff --git a/packages/varlet-ui/types/col.d.ts b/packages/varlet-ui/types/col.d.ts index 1953b3d2ff9..4e896628dcf 100644 --- a/packages/varlet-ui/types/col.d.ts +++ b/packages/varlet-ui/types/col.d.ts @@ -1,3 +1,11 @@ -import { VarComponent } from './varComponent'; +import { VarComponent } from './varComponent' -export class Col extends VarComponent {} +interface ColProps { + span?: string | number + offset?: string | number + onClick?: (e: Event) => void +} + +export class Col extends VarComponent { + $props: ColProps +} diff --git a/packages/varlet-ui/types/counter.d.ts b/packages/varlet-ui/types/counter.d.ts index 8f5262950bd..bf5cea97294 100644 --- a/packages/varlet-ui/types/counter.d.ts +++ b/packages/varlet-ui/types/counter.d.ts @@ -1,3 +1,42 @@ import { VarComponent } from './varComponent' -export class Counter extends VarComponent {} +export type ValidateTriggers = 'onIncrement' | 'onDecrement' | 'onInputChange' | 'onLazyChange' + +interface CounterProps { + modelValue?: string | number + min?: string | number + max?: string | number + step?: string | number + color?: string + inputWidth?: string | number + inputTextSize?: string | number + buttonSize?: string | number + decimalLength?: string | number + disabled?: boolean + readonly?: boolean + disableIncrement?: boolean + disableDecrement?: boolean + disableInput?: boolean + lazyChange?: boolean + incrementButton?: boolean + decrementButton?: boolean + press?: boolean + ripple?: boolean + validateTrigger?: Array + rules?: Array<(v: number) => any> + onBeforeChange?: (value: number, change: (value: string | number) => void) => void + onChange?: (value: number) => void + onIncrement?: (value: number) => void + onDecrement?: (value: number) => void + 'onUpdate:modelValue'?: (value: number) => void +} + +export class Counter extends VarComponent { + $props: CounterProps + + validate(): Promise + + resetValidation(): void + + reset(): void +} diff --git a/packages/varlet-ui/types/dialog.d.ts b/packages/varlet-ui/types/dialog.d.ts index a58f675b38b..60efb1098c8 100644 --- a/packages/varlet-ui/types/dialog.d.ts +++ b/packages/varlet-ui/types/dialog.d.ts @@ -1,8 +1,38 @@ import { App, Component } from 'vue' import { VarComponent } from './varComponent' +interface DialogProps { + show?: boolean + title?: string + message?: string + messageAlign?: 'left' | 'center' | 'right' + confirmButton?: boolean + cancelButton?: boolean + confirmButtonText?: string + cancelButtonText?: string + confirmButtonTextColor?: string + cancelButtonTextColor?: string + confirmButtonColor?: string + cancelButtonColor?: string + overlay?: boolean + overlayClass?: string + overlayStyle?: Record + lockScroll?: boolean + closeOnClickOverlay?: boolean + teleport?: boolean + onOpen?: () => void + onOpened?: () => void + onBeforeClose?: (action: DialogActions, done: () => void) => void + onClose?: () => void + onClosed?: () => void + onConfirm?: () => void + onCancel?: () => void + onClickOverlay?: () => void + 'onUpdate:show': (show: boolean) => void +} + export class DialogComponent extends VarComponent { - static Component: Component + $props: DialogProps } export type DialogActions = 'confirm' | 'cancel' | 'close' @@ -10,7 +40,7 @@ export type DialogActions = 'confirm' | 'cancel' | 'close' export interface DialogOptions { title?: string message?: string - messageAlign?: string + messageAlign?: 'left' | 'center' | 'right' confirmButton?: boolean cancelButton?: boolean confirmButtonText?: string @@ -26,7 +56,7 @@ export interface DialogOptions { closeOnClickOverlay?: boolean onOpen?: () => void onOpened?: () => void - onBeforeClose?: (done: () => void) => void + onBeforeClose?: (action: DialogActions, done: () => void) => void onClose?: () => void onClosed?: () => void onConfirm?: () => void @@ -36,9 +66,11 @@ export interface DialogOptions { export interface IDialog { (options: DialogOptions | string): Promise - install(app: App): void + Component: typeof DialogComponent + close(): void - Component: DialogComponent + + install(app: App): void } export const Dialog: IDialog diff --git a/packages/varlet-ui/types/form.d.ts b/packages/varlet-ui/types/form.d.ts index b14412bba4a..d5d414331ce 100644 --- a/packages/varlet-ui/types/form.d.ts +++ b/packages/varlet-ui/types/form.d.ts @@ -1,3 +1,16 @@ import { VarComponent } from './varComponent' -export class Form extends VarComponent {} +interface FormProps { + disabled?: boolean + readonly?: boolean +} + +export class Form extends VarComponent { + $props: FormProps + + validate(): Promise + + resetValidation(): void + + reset(): void +} diff --git a/packages/varlet-ui/types/icon.d.ts b/packages/varlet-ui/types/icon.d.ts index d1108c5389c..f8e06aaa1c9 100644 --- a/packages/varlet-ui/types/icon.d.ts +++ b/packages/varlet-ui/types/icon.d.ts @@ -1,3 +1,14 @@ import { VarComponent } from './varComponent' -export class Icon extends VarComponent {} +interface IconProps { + name?: string + size?: string | number + color?: string + namespace?: string + transition?: string | number + onClick?: () => (event: Event) => void +} + +export class Icon extends VarComponent { + $props: IconProps +} diff --git a/packages/varlet-ui/types/image.d.ts b/packages/varlet-ui/types/image.d.ts index a72650227cf..996c65353d2 100644 --- a/packages/varlet-ui/types/image.d.ts +++ b/packages/varlet-ui/types/image.d.ts @@ -1,3 +1,20 @@ -import { VarComponent } from './varComponent'; +import { VarComponent } from './varComponent' + +interface ImageProps { + src?: string + fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' + alt?: string + width?: string | number + height?: string | number + radius?: string | number + loading?: string + error?: string + lazy?: boolean + ripple?: boolean + block?: boolean + onClick?: (e: Event) => void + onLoad?: (e: Event) => void + onError?: (e: Event) => void +} export class Image extends VarComponent {} diff --git a/packages/varlet-ui/types/input.d.ts b/packages/varlet-ui/types/input.d.ts index b67aa3e53bb..9250dbd0d83 100644 --- a/packages/varlet-ui/types/input.d.ts +++ b/packages/varlet-ui/types/input.d.ts @@ -1,3 +1,43 @@ import { VarComponent } from './varComponent' -export class Input extends VarComponent {} +type ValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onInput' + +interface InputProps { + modelValue?: string | number + type?: 'text' | 'password' + textarea?: boolean + rows?: string | number + placeholder?: string + hint?: boolean + textColor?: string + focusColor?: string + blurColor?: string + maxlength?: string | number + disabled?: boolean + readonly?: boolean + clearable?: boolean + resize?: boolean + validateTrigger?: ValidateTriggers[] + rules?: Array<(v: string | number) => any> + onFocus?: (e: Event) => void + onBlur?: (e: Event) => void + onClick?: (e: Event) => void + onClear?: (value: string | number) => void + onInput?: (value: string | number, e: Event) => void + onChange?: (value: string | number, e: Event) => void + 'onUpdate:modelValue': (value: string | number) => void +} + +export class Input extends VarComponent { + $props: InputProps + + focus(): void + + blur(): void + + validate(): Promise + + resetValidation(): void + + reset(): void +} diff --git a/packages/varlet-ui/types/menu.d.ts b/packages/varlet-ui/types/menu.d.ts index 381ebace08b..d86c06aede4 100644 --- a/packages/varlet-ui/types/menu.d.ts +++ b/packages/varlet-ui/types/menu.d.ts @@ -1,3 +1,19 @@ -import { VarComponent } from './varComponent'; +import { VarComponent } from './varComponent' -export class Menu extends VarComponent {} +interface MenuProps { + show?: boolean + alignment?: 'top' | 'bottom' + offsetX?: string | number + offsetY?: string | number + onOpen?: () => void + onOpened?: () => void + onClose?: () => void + onClosed?: () => void + 'onUpdate:show': (show: boolean) => void +} + +export class Menu extends VarComponent { + $props: MenuProps + + resize(): void +} diff --git a/packages/varlet-ui/types/option.d.ts b/packages/varlet-ui/types/option.d.ts index 6223fa182cb..00cd70d5e1a 100644 --- a/packages/varlet-ui/types/option.d.ts +++ b/packages/varlet-ui/types/option.d.ts @@ -1,3 +1,10 @@ import { VarComponent } from './varComponent' -export class Option extends VarComponent {} +interface OptionProps { + label?: any + value?: any +} + +export class Option extends VarComponent { + $props: OptionProps +} diff --git a/packages/varlet-ui/types/picker.d.ts b/packages/varlet-ui/types/picker.d.ts index 60cc4658efd..15eb35988c1 100644 --- a/packages/varlet-ui/types/picker.d.ts +++ b/packages/varlet-ui/types/picker.d.ts @@ -1,13 +1,43 @@ -import { App, Component } from 'vue' +import { App } from 'vue' import { VarComponent } from './varComponent' -import { CascadeColumn, NormalColumn } from '../src/picker/props' -export class PickerComponent extends VarComponent { - static Component: Component +interface NormalColumn { + texts: Texts + initialIndex?: number +} + +interface CascadeColumn { + [textKey: string]: any + children: CascadeColumn[] } type Texts = any[] +interface PickerProps { + columns?: NormalColumn[] | CascadeColumn[] | Texts + title?: string + textKey?: string + toolbar?: boolean + cascade?: boolean + optionHeight?: string | number + optionCount?: string | number + confirmButtonText?: string + cancelButtonText?: string + confirmButtonTextColor?: string + cancelButtonTextColor?: string + onChange?: (texts: Texts, indexes: number[]) => void + onConfirm?: (texts: Texts, indexes: number[]) => void + onCancel?: (texts: Texts, indexes: number[]) => void +} + +export class PickerComponent extends VarComponent { + $props: PickerProps + + confirm(): void + + cancel(): void +} + export type PickerActions = 'confirm' | 'cancel' | 'close' export interface PickerResolvedData { @@ -34,9 +64,11 @@ interface PickerOptions { export interface IPicker { (options: PickerOptions | Texts): Promise + Component: typeof PickerComponent + install(app: App): void + close(): void - Component: PickerComponent } export const Picker: IPicker diff --git a/packages/varlet-ui/types/popup.d.ts b/packages/varlet-ui/types/popup.d.ts index adc9cf152ad..b8de58bca22 100644 --- a/packages/varlet-ui/types/popup.d.ts +++ b/packages/varlet-ui/types/popup.d.ts @@ -1,3 +1,22 @@ import { VarComponent } from './varComponent' -export class Popup extends VarComponent {} +interface PopupProps { + show?: boolean + position?: 'top' | 'bottom' | 'right' | 'left' | 'center' + overlay?: boolean + overlayClass?: string + overlayStyle?: Record + lockScroll?: boolean + closeOnClickOverlay?: boolean + teleport?: any + onOpen?: () => void + onOpened?: () => void + onClose?: () => void + onClosed?: () => void + onClickOverlay?: () => void + 'onUpdate:show'?: (show: boolean) => void +} + +export class Popup extends VarComponent { + $props: PopupProps +} diff --git a/packages/varlet-ui/types/radio.d.ts b/packages/varlet-ui/types/radio.d.ts index 26bbdae25e3..44c515a946e 100644 --- a/packages/varlet-ui/types/radio.d.ts +++ b/packages/varlet-ui/types/radio.d.ts @@ -1,3 +1,32 @@ import { VarComponent } from './varComponent' -export class Radio extends VarComponent {} +type ValidateTriggers = 'onChange' + +interface RadioProps { + modelValue?: any + checkedValue?: any + uncheckedValue?: any + checkedColor?: string + uncheckedColor?: string + disabled?: boolean + readonly?: boolean + iconSize?: string | number + ripple?: boolean + validateTrigger?: Array + rules?: Array<(value: any) => any> + onClick?: (e: Event) => void + onChange?: (value: any) => void + 'onUpdate:modelValue'?: (value: any) => void +} + +export class Radio extends VarComponent { + $props: RadioProps + + validate(): Promise + + resetValidation(): void + + reset(): void + + toggle(value: any): void +} diff --git a/packages/varlet-ui/types/radioGroup.d.ts b/packages/varlet-ui/types/radioGroup.d.ts index f9d3fea776d..61d7cd4d531 100644 --- a/packages/varlet-ui/types/radioGroup.d.ts +++ b/packages/varlet-ui/types/radioGroup.d.ts @@ -1,3 +1,21 @@ import { VarComponent } from './varComponent' +import { ValidateTriggers } from './checkboxGroup' -export class RadioGroup extends VarComponent {} +interface RadioGroupProps { + modelValue?: any[] + direction?: 'horizontal' | 'vertical' + validateTrigger?: Array + rules?: Array<(value: any) => any> + onChange?: (value: Array) => void + 'onUpdate:modelValue'?: (value: Array) => void +} + +export class RadioGroup extends VarComponent { + $props: RadioGroupProps + + validate(): Promise + + resetValidation(): void + + reset(): void +} diff --git a/packages/varlet-ui/types/select.d.ts b/packages/varlet-ui/types/select.d.ts index 3aa5861b7a7..1097506911f 100644 --- a/packages/varlet-ui/types/select.d.ts +++ b/packages/varlet-ui/types/select.d.ts @@ -1,3 +1,43 @@ import { VarComponent } from './varComponent' -export class Select extends VarComponent {} +export type ValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onClose' + +interface SelectProps { + modelValue?: any + placeholder?: string + multiple?: boolean + chip?: boolean + line?: boolean + hint?: boolean + textColor?: string + focusColor?: string + blurColor?: string + disabled?: boolean + readonly?: boolean + clearable?: boolean + separator?: string + textAlign?: 'left' | 'right' | 'center' + validateTrigger?: Array + rules?: Array<(v: any) => any> + onFocus?: (e: Event) => void + onBlur?: (e: Event) => void + onClick?: (e: Event) => void + onClear?: (value: any) => void + onClose?: (value: any) => void + onChange?: (value: any) => void + 'onUpdate:modelValue'?: (value: any) => void +} + +export class Select extends VarComponent { + $props: SelectProps + + focus(): void + + blur(): void + + validate(): Promise + + resetValidation(): void + + reset(): void +} diff --git a/packages/varlet-ui/types/snackbar.d.ts b/packages/varlet-ui/types/snackbar.d.ts index f899b9a0b2a..7bb916bbaec 100644 --- a/packages/varlet-ui/types/snackbar.d.ts +++ b/packages/varlet-ui/types/snackbar.d.ts @@ -1,9 +1,7 @@ -import { App, Component } from 'vue' +import { App } from 'vue' import { VarComponent } from './varComponent' -export class SnackbarComponent extends VarComponent { - static Component: Component -} +export class SnackbarComponent extends VarComponent {} export type SnackbarType = 'success' | 'warning' | 'info' | 'error' | 'loading' @@ -32,6 +30,7 @@ export interface SnackbarOptions { export interface ISnackbar { (options: SnackbarOptions): SnackbarHandel + Component: typeof SnackbarComponent install(app: App): void @@ -48,8 +47,6 @@ export interface ISnackbar { loading(options: SnackbarOptions | string): SnackbarHandel clear(): void - - Component: SnackbarComponent } export const Snackbar: ISnackbar diff --git a/packages/varlet-ui/types/sticky.d.ts b/packages/varlet-ui/types/sticky.d.ts index d19a0df1237..8818f68312a 100644 --- a/packages/varlet-ui/types/sticky.d.ts +++ b/packages/varlet-ui/types/sticky.d.ts @@ -1,3 +1,11 @@ -import { VarComponent } from './varComponent'; +import { VarComponent } from './varComponent' -export class Sticky extends VarComponent {} +interface StickyProps { + offsetTop?: string | number + zIndex?: string | number + onScroll?: (offsetTop: number, isFixed: boolean) => void +} + +export class Sticky extends VarComponent { + $props: StickyProps +} diff --git a/packages/varlet-ui/types/swipe.d.ts b/packages/varlet-ui/types/swipe.d.ts index 44612ac9d8f..6e9da6f05c4 100644 --- a/packages/varlet-ui/types/swipe.d.ts +++ b/packages/varlet-ui/types/swipe.d.ts @@ -1,3 +1,25 @@ import { VarComponent } from './varComponent' -export class Swipe extends VarComponent {} +interface SwipeProps { + loop?: boolean + autoplay?: string | number + duration?: string | number + initialIndex?: string | number + indicator?: boolean + indicatorColor?: string + vertical?: boolean + touchable?: boolean + onChange?: (index: number) => void +} + +export class Swipe extends VarComponent { + $props: SwipeProps + + resize(): void + + prev(): void + + next(): void + + to(index: number): void +} diff --git a/packages/varlet-ui/types/tab.d.ts b/packages/varlet-ui/types/tab.d.ts index 515b732d862..390cfb9a27f 100644 --- a/packages/varlet-ui/types/tab.d.ts +++ b/packages/varlet-ui/types/tab.d.ts @@ -1,3 +1,11 @@ -import { VarComponent } from './varComponent'; +import { VarComponent } from './varComponent' -export class Tab extends VarComponent {} +interface TabProps { + name?: string | number + disabled?: boolean + onClick?: (active: string | number, e: Event) => void +} + +export class Tab extends VarComponent { + $props: TabProps +} diff --git a/packages/varlet-ui/types/tabItem.d.ts b/packages/varlet-ui/types/tabItem.d.ts index 7af06a9bcb3..3fc4afe47fb 100644 --- a/packages/varlet-ui/types/tabItem.d.ts +++ b/packages/varlet-ui/types/tabItem.d.ts @@ -1,3 +1,9 @@ -import { VarComponent } from './varComponent'; +import { VarComponent } from './varComponent' -export class TabItem extends VarComponent {} +interface TabItemProps { + name?: string | number +} + +export class TabItem extends VarComponent { + $props: TabItemProps +} diff --git a/packages/varlet-ui/types/tabs.d.ts b/packages/varlet-ui/types/tabs.d.ts index 95a931a3836..07bbcf74135 100644 --- a/packages/varlet-ui/types/tabs.d.ts +++ b/packages/varlet-ui/types/tabs.d.ts @@ -1,3 +1,26 @@ -import { VarComponent } from './varComponent'; +import { VarComponent } from './varComponent' -export class Tabs extends VarComponent {} +interface TabsProps { + active?: string | number + layoutDirection?: 'horizontal' | 'vertical' + itemDirection?: 'horizontal' | 'vertical' + fixedBottom?: boolean + activeColor?: string + inactiveColor?: string + disabledColor?: string + color?: string + indicatorColor?: string + indicatorSize?: string | number + elevation?: boolean + sticky?: boolean + offsetTop?: string | number + onClick?: (active: string | number) => void + onChange?: (active: string | number) => void + 'onUpdate:active'?: (active: string | number) => void +} + +export class Tabs extends VarComponent { + $props: TabsProps + + resize(): void +} diff --git a/packages/varlet-ui/types/tabsItems.d.ts b/packages/varlet-ui/types/tabsItems.d.ts index 1880febf0d9..c7059670614 100644 --- a/packages/varlet-ui/types/tabsItems.d.ts +++ b/packages/varlet-ui/types/tabsItems.d.ts @@ -1,3 +1,10 @@ -import { VarComponent } from './varComponent'; +import { VarComponent } from './varComponent' -export class TabsItems extends VarComponent {} +interface TabsItemsProps { + active?: string | number + 'onUpdate:active'?: (active: string | number) => void +} + +export class TabsItems extends VarComponent { + $props: TabsItemsProps +} From b15658715a3c64cada1c9be4d80c0ffc1df701fd Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sat, 24 Apr 2021 23:33:39 +0800 Subject: [PATCH 02/18] =?UTF-8?q?feat(ui/types):=20uploader=E6=8F=90?= =?UTF-8?q?=E4=BE=9Bjsx,tsx=E7=B1=BB=E5=9E=8B=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/ui --- packages/varlet-ui/types/uploader.d.ts | 48 +++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/packages/varlet-ui/types/uploader.d.ts b/packages/varlet-ui/types/uploader.d.ts index caf454bde96..e07a0715075 100644 --- a/packages/varlet-ui/types/uploader.d.ts +++ b/packages/varlet-ui/types/uploader.d.ts @@ -1,3 +1,49 @@ import { VarComponent } from './varComponent' -export class Uploader extends VarComponent {} +interface VarFile { + file?: File + name?: string + url?: string + cover?: string + fit?: string + state?: 'loading' | 'success' | 'error' +} + +type ValidateTriggers = 'onChange' | 'onRemove' + +interface UploaderProps { + modelValue?: VarFile[] + accept?: string + capture?: string + multiple?: boolean + readonly?: boolean + disabled?: boolean + removable?: boolean + maxlength?: string | number + maxsize?: string | number + previewed?: boolean + ripple?: boolean + validateTrigger?: Array + rules?: Array<(v: VarFile) => any> + onBeforeRead?: (file: VarFile) => Promise | boolean + onAfterRead?: (file: VarFile) => any + onOversize?: (file: VarFile) => any + onRemove?: (file: VarFile) => any + 'onUpdate:modelValue'?: (files: VarFile[]) => any +} + +export class Uploader extends VarComponent { + $props: UploaderProps + + getLoading(varFiles: VarFile[]): VarFile[] + + getSuccess(varFiles: VarFile[]): VarFile[] + + getError(varFiles: VarFile[]): VarFile[] + + validate(): Promise + + resetValidation(): void + + reset(): void +} From d1006ac168a192a871b12184935ed4716ee62645 Mon Sep 17 00:00:00 2001 From: BeADre Date: Sun, 25 Apr 2021 15:45:48 +0800 Subject: [PATCH 03/18] docs(example): optimize example --- packages/varlet-ui/src/progress/docs/en-US.md | 32 ++++-------------- packages/varlet-ui/src/progress/docs/zh-CN.md | 33 +++++-------------- .../varlet-ui/src/progress/example/index.vue | 12 +++---- .../src/progress/example/locale/en-US.ts | 2 +- .../src/progress/example/locale/zh-CN.ts | 2 +- packages/varlet-ui/src/slider/Slider.vue | 1 - packages/varlet-ui/src/slider/slider.less | 2 +- 7 files changed, 22 insertions(+), 62 deletions(-) diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md index d5739784202..fecc6d31c08 100644 --- a/packages/varlet-ui/src/progress/docs/en-US.md +++ b/packages/varlet-ui/src/progress/docs/en-US.md @@ -46,16 +46,6 @@ The action is displayed through the `show-action` attribute. The action is the p ## Progress circle -### Size - -Change the size of the progress bar through the `size` attribute. - -```html - - - -``` - ### Custom Style ```html @@ -67,23 +57,15 @@ Change the size of the progress bar through the `size` attribute. color="purple" track-color="#dec3e6" /> - - ``` +### Hide Track + +Use `show-track` prop to hide track. + +```html + +``` ## API ### Props diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md index 19daabb20e7..e4baf96049f 100644 --- a/packages/varlet-ui/src/progress/docs/zh-CN.md +++ b/packages/varlet-ui/src/progress/docs/zh-CN.md @@ -46,16 +46,6 @@ createApp().use(Progress) ## 环形进度条 -### 不同尺寸 - -通过`size`属性改变进度条大小。 - -```html - - - -``` - ### 自定义样式 ```html @@ -67,23 +57,16 @@ createApp().use(Progress) color="purple" track-color="#dec3e6" /> - - ``` + +### 隐藏轨道 + +通过`show-track`属性隐藏 track。 + +```html + +``` ## API ### 属性 diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue index 0e0fb3c9d5a..633ae574c73 100644 --- a/packages/varlet-ui/src/progress/example/index.vue +++ b/packages/varlet-ui/src/progress/example/index.vue @@ -23,20 +23,16 @@

{{ pack.circle }}

- {{ pack.size }} + {{ pack.style }}
- - - +
- {{ pack.style }} + {{ pack.hideTrack }}
- - - +
diff --git a/packages/varlet-ui/src/progress/example/locale/en-US.ts b/packages/varlet-ui/src/progress/example/locale/en-US.ts index 9378f06095a..c84974066e4 100644 --- a/packages/varlet-ui/src/progress/example/locale/en-US.ts +++ b/packages/varlet-ui/src/progress/example/locale/en-US.ts @@ -4,5 +4,5 @@ export default { basicUsage: 'Basic Usage', style: 'Custom Style', showLabel: 'Show Action', - size: 'Size', + hideTrack: 'Hide Track', } diff --git a/packages/varlet-ui/src/progress/example/locale/zh-CN.ts b/packages/varlet-ui/src/progress/example/locale/zh-CN.ts index b05ea6ba786..e7b6b3a6981 100644 --- a/packages/varlet-ui/src/progress/example/locale/zh-CN.ts +++ b/packages/varlet-ui/src/progress/example/locale/zh-CN.ts @@ -4,5 +4,5 @@ export default { basicUsage: '基本使用', style: '自定义样式', showLabel: '显示标签', - size: '不同尺寸', + hideTrack: '隐藏轨道', } diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue index 5684f36124c..9a6f254ceff 100644 --- a/packages/varlet-ui/src/slider/Slider.vue +++ b/packages/varlet-ui/src/slider/Slider.vue @@ -106,7 +106,6 @@ diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less index 71ad9e0b1b8..1e6057ed615 100644 --- a/packages/varlet-ui/src/slider/slider.less +++ b/packages/varlet-ui/src/slider/slider.less @@ -125,6 +125,6 @@ } &__form[var-slider-cover] { - margin: 0 0 0 6px; + margin: 0; } } From 0eb9f5f2826aa628995e5fb19d63ad3745ddbcb6 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sun, 25 Apr 2021 20:13:05 +0800 Subject: [PATCH 04/18] =?UTF-8?q?docs(root=20ui/docs):=20=E5=AE=8C?= =?UTF-8?q?=E5=96=84=E5=BC=80=E5=8F=91=E6=8C=87=E5=8D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/cli, @varlet/ui --- TODO-zh-CN.md | 11 ---------- TODO.md | 11 ---------- developerGuide.md | 20 +++++++++++++++++++ developerGuide.zh-CN.md | 20 +++++++++++++++++++ packages/varlet-cli/site/site.config.json | 6 +++--- .../varlet-ui/docs/developerGuide.en-US.md | 20 +++++++++++++++++++ .../varlet-ui/docs/developerGuide.zh-CN.md | 20 +++++++++++++++++++ packages/varlet-ui/docs/todo.en-US.md | 11 ---------- packages/varlet-ui/docs/todo.zh-CN.md | 11 ---------- packages/varlet-ui/varlet.config.js | 6 +++--- 10 files changed, 86 insertions(+), 50 deletions(-) delete mode 100644 TODO-zh-CN.md delete mode 100644 TODO.md create mode 100644 developerGuide.md create mode 100644 developerGuide.zh-CN.md create mode 100644 packages/varlet-ui/docs/developerGuide.en-US.md create mode 100644 packages/varlet-ui/docs/developerGuide.zh-CN.md delete mode 100644 packages/varlet-ui/docs/todo.en-US.md delete mode 100644 packages/varlet-ui/docs/todo.zh-CN.md diff --git a/TODO-zh-CN.md b/TODO-zh-CN.md deleted file mode 100644 index 2752f1eb0a8..00000000000 --- a/TODO-zh-CN.md +++ /dev/null @@ -1,11 +0,0 @@ -# 下一步开发计划 - -### 介绍 - -这里为您介绍组件库下一步开发计划，欢迎社区小伙伴参与其中。 - -### Todo list -- 1.提供jsx，tsx语法高亮支持。 -- 2.完善文档阅读体验，修复存在的问题。 -- 3.全组件单元测试，并出测试报告。 -- 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/TODO.md b/TODO.md deleted file mode 100644 index de4bffa055b..00000000000 --- a/TODO.md +++ /dev/null @@ -1,11 +0,0 @@ -# Todo - -### Intro - -Here we introduce the next development plan of the component library, welcome the community partners to participate in it. - -### Todo list -- 1.Provides `jsx`, `tsx` syntax highlighting support -- 2.Improve the document reading experience and fix problems. -- 3.Unit test all components and issue test report. -- 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/developerGuide.md b/developerGuide.md new file mode 100644 index 00000000000..ca47e079a55 --- /dev/null +++ b/developerGuide.md @@ -0,0 +1,20 @@ +# Developer Guide + +### Intro +First, thank you for your interest in joining our development. Here are some considerations. + +### Quickstart +The project is based on the workspace feature of `yarn` and `lerna` as the basic architecture of Monorepo. +The first fork of the repository is based on the dev branch, which is in the project root directory. + +```shell +yarn bootstrap +cd packages/varlet-ui +yarn dev +``` + +### Todo list +- 1.Provides `jsx`, `tsx` syntax highlighting support +- 2.Improve the document reading experience and fix problems. +- 3.Unit test all components and issue test report. +- 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/developerGuide.zh-CN.md b/developerGuide.zh-CN.md new file mode 100644 index 00000000000..032fc082c69 --- /dev/null +++ b/developerGuide.zh-CN.md @@ -0,0 +1,20 @@ +# 开发指南 + +### 介绍 +首先感谢您有兴趣加入我们的开发，以下介绍一些注意事项。 + +### 快速开始 +项目基于yarn的workspace特性和lerna作为monorepo的基本架构。 +首先fork仓库，基于dev分支进行开发，在项目根目录下. + +```shell +yarn bootstrap +cd packages/varlet-ui +yarn dev +``` + +### Todo list +- 1.提供`jsx`，`tsx`语法高亮支持。 +- 2.完善文档阅读体验，修复存在的问题。 +- 3.全组件单元测试，并出测试报告。 +- 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/packages/varlet-cli/site/site.config.json b/packages/varlet-cli/site/site.config.json index eca33c19606..c453d8bf44a 100644 --- a/packages/varlet-cli/site/site.config.json +++ b/packages/varlet-cli/site/site.config.json @@ -89,10 +89,10 @@ }, { "text": { - "zh-CN": "Todo", - "en-US": "Todo" + "zh-CN": "开发指南", + "en-US": "Developer Guide" }, - "doc": "todo", + "doc": "developerGuide", "nonComponent": true }, { diff --git a/packages/varlet-ui/docs/developerGuide.en-US.md b/packages/varlet-ui/docs/developerGuide.en-US.md new file mode 100644 index 00000000000..ca47e079a55 --- /dev/null +++ b/packages/varlet-ui/docs/developerGuide.en-US.md @@ -0,0 +1,20 @@ +# Developer Guide + +### Intro +First, thank you for your interest in joining our development. Here are some considerations. + +### Quickstart +The project is based on the workspace feature of `yarn` and `lerna` as the basic architecture of Monorepo. +The first fork of the repository is based on the dev branch, which is in the project root directory. + +```shell +yarn bootstrap +cd packages/varlet-ui +yarn dev +``` + +### Todo list +- 1.Provides `jsx`, `tsx` syntax highlighting support +- 2.Improve the document reading experience and fix problems. +- 3.Unit test all components and issue test report. +- 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/packages/varlet-ui/docs/developerGuide.zh-CN.md b/packages/varlet-ui/docs/developerGuide.zh-CN.md new file mode 100644 index 00000000000..032fc082c69 --- /dev/null +++ b/packages/varlet-ui/docs/developerGuide.zh-CN.md @@ -0,0 +1,20 @@ +# 开发指南 + +### 介绍 +首先感谢您有兴趣加入我们的开发，以下介绍一些注意事项。 + +### 快速开始 +项目基于yarn的workspace特性和lerna作为monorepo的基本架构。 +首先fork仓库，基于dev分支进行开发，在项目根目录下. + +```shell +yarn bootstrap +cd packages/varlet-ui +yarn dev +``` + +### Todo list +- 1.提供`jsx`，`tsx`语法高亮支持。 +- 2.完善文档阅读体验，修复存在的问题。 +- 3.全组件单元测试，并出测试报告。 +- 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/packages/varlet-ui/docs/todo.en-US.md b/packages/varlet-ui/docs/todo.en-US.md deleted file mode 100644 index de4bffa055b..00000000000 --- a/packages/varlet-ui/docs/todo.en-US.md +++ /dev/null @@ -1,11 +0,0 @@ -# Todo - -### Intro - -Here we introduce the next development plan of the component library, welcome the community partners to participate in it. - -### Todo list -- 1.Provides `jsx`, `tsx` syntax highlighting support -- 2.Improve the document reading experience and fix problems. -- 3.Unit test all components and issue test report. -- 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/packages/varlet-ui/docs/todo.zh-CN.md b/packages/varlet-ui/docs/todo.zh-CN.md deleted file mode 100644 index 47a4e6b6186..00000000000 --- a/packages/varlet-ui/docs/todo.zh-CN.md +++ /dev/null @@ -1,11 +0,0 @@ -# 下一步开发计划 - -### 介绍 - -这里为您介绍组件库下一步开发计划，欢迎社区小伙伴参与其中。 - -### Todo list -- 1.提供`jsx`，`tsx`语法高亮支持。 -- 2.完善文档阅读体验，修复存在的问题。 -- 3.全组件单元测试，并出测试报告。 -- 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js index 4861dbebe19..0021d08f442 100644 --- a/packages/varlet-ui/varlet.config.js +++ b/packages/varlet-ui/varlet.config.js @@ -86,10 +86,10 @@ module.exports = { }, { text: { - 'zh-CN': 'Todo', - 'en-US': 'Todo', + 'zh-CN': '开发指南', + 'en-US': 'Developer Guide', }, - doc: 'todo', + doc: 'developerGuide', nonComponent: true, }, { From 8d10c08845432a33d04c464a88a4ad593baea0db Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sun, 25 Apr 2021 20:29:27 +0800 Subject: [PATCH 05/18] =?UTF-8?q?docs(root=20ui/docs):=20=E5=AE=8C?= =?UTF-8?q?=E5=96=84=E5=BC=80=E5=8F=91=E6=8C=87=E5=8D=97=E6=A0=87=E7=82=B9?= =?UTF-8?q?=E7=AC=A6=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/ui --- developerGuide.md | 4 ++-- developerGuide.zh-CN.md | 6 +++--- packages/varlet-ui/docs/developerGuide.en-US.md | 4 ++-- packages/varlet-ui/docs/developerGuide.zh-CN.md | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/developerGuide.md b/developerGuide.md index ca47e079a55..f64bd3e8348 100644 --- a/developerGuide.md +++ b/developerGuide.md @@ -4,7 +4,7 @@ First, thank you for your interest in joining our development. Here are some considerations. ### Quickstart -The project is based on the workspace feature of `yarn` and `lerna` as the basic architecture of Monorepo. +The project is based on the `workspace` feature of yarn and `lerna` as the basic architecture of Monorepo. The first fork of the repository is based on the dev branch, which is in the project root directory. ```shell @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.Provides `jsx`, `tsx` syntax highlighting support +- 1.Provides `jsx`、`tsx` syntax highlighting support. - 2.Improve the document reading experience and fix problems. - 3.Unit test all components and issue test report. - 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/developerGuide.zh-CN.md b/developerGuide.zh-CN.md index 032fc082c69..a99e5758ef8 100644 --- a/developerGuide.zh-CN.md +++ b/developerGuide.zh-CN.md @@ -4,8 +4,8 @@ 首先感谢您有兴趣加入我们的开发，以下介绍一些注意事项。 ### 快速开始 -项目基于yarn的workspace特性和lerna作为monorepo的基本架构。 -首先fork仓库，基于dev分支进行开发，在项目根目录下. +项目基于yarn的`workspace`特性和`lerna`作为monorepo的基本架构。 +首先fork仓库，基于dev分支进行开发，在项目根目录下。 ```shell yarn bootstrap @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.提供`jsx`，`tsx`语法高亮支持。 +- 1.提供`jsx`,`tsx`语法高亮支持。 - 2.完善文档阅读体验，修复存在的问题。 - 3.全组件单元测试，并出测试报告。 - 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/packages/varlet-ui/docs/developerGuide.en-US.md b/packages/varlet-ui/docs/developerGuide.en-US.md index ca47e079a55..f64bd3e8348 100644 --- a/packages/varlet-ui/docs/developerGuide.en-US.md +++ b/packages/varlet-ui/docs/developerGuide.en-US.md @@ -4,7 +4,7 @@ First, thank you for your interest in joining our development. Here are some considerations. ### Quickstart -The project is based on the workspace feature of `yarn` and `lerna` as the basic architecture of Monorepo. +The project is based on the `workspace` feature of yarn and `lerna` as the basic architecture of Monorepo. The first fork of the repository is based on the dev branch, which is in the project root directory. ```shell @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.Provides `jsx`, `tsx` syntax highlighting support +- 1.Provides `jsx`、`tsx` syntax highlighting support. - 2.Improve the document reading experience and fix problems. - 3.Unit test all components and issue test report. - 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/packages/varlet-ui/docs/developerGuide.zh-CN.md b/packages/varlet-ui/docs/developerGuide.zh-CN.md index 032fc082c69..a99e5758ef8 100644 --- a/packages/varlet-ui/docs/developerGuide.zh-CN.md +++ b/packages/varlet-ui/docs/developerGuide.zh-CN.md @@ -4,8 +4,8 @@ 首先感谢您有兴趣加入我们的开发，以下介绍一些注意事项。 ### 快速开始 -项目基于yarn的workspace特性和lerna作为monorepo的基本架构。 -首先fork仓库，基于dev分支进行开发，在项目根目录下. +项目基于yarn的`workspace`特性和`lerna`作为monorepo的基本架构。 +首先fork仓库，基于dev分支进行开发，在项目根目录下。 ```shell yarn bootstrap @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.提供`jsx`，`tsx`语法高亮支持。 +- 1.提供`jsx`,`tsx`语法高亮支持。 - 2.完善文档阅读体验，修复存在的问题。 - 3.全组件单元测试，并出测试报告。 - 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file From 7eba4c95e4a0349a42579aa56625fc74bdbac7f8 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sun, 25 Apr 2021 20:33:02 +0800 Subject: [PATCH 06/18] =?UTF-8?q?docs(root=20ui/docs):=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=BC=80=E5=8F=91=E6=8C=87=E5=8D=97=E6=A0=87=E7=82=B9?= =?UTF-8?q?=E7=AC=A6=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/ui --- developerGuide.md | 2 +- developerGuide.zh-CN.md | 2 +- packages/varlet-ui/docs/developerGuide.en-US.md | 2 +- packages/varlet-ui/docs/developerGuide.zh-CN.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/developerGuide.md b/developerGuide.md index f64bd3e8348..5af36388da5 100644 --- a/developerGuide.md +++ b/developerGuide.md @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.Provides `jsx`、`tsx` syntax highlighting support. +- 1.Provides `jsx`,`tsx` syntax highlighting support. - 2.Improve the document reading experience and fix problems. - 3.Unit test all components and issue test report. - 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/developerGuide.zh-CN.md b/developerGuide.zh-CN.md index a99e5758ef8..360590f76e9 100644 --- a/developerGuide.zh-CN.md +++ b/developerGuide.zh-CN.md @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.提供`jsx`,`tsx`语法高亮支持。 +- 1.提供`jsx`、`tsx`语法高亮支持。 - 2.完善文档阅读体验，修复存在的问题。 - 3.全组件单元测试，并出测试报告。 - 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/packages/varlet-ui/docs/developerGuide.en-US.md b/packages/varlet-ui/docs/developerGuide.en-US.md index f64bd3e8348..5af36388da5 100644 --- a/packages/varlet-ui/docs/developerGuide.en-US.md +++ b/packages/varlet-ui/docs/developerGuide.en-US.md @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.Provides `jsx`、`tsx` syntax highlighting support. +- 1.Provides `jsx`,`tsx` syntax highlighting support. - 2.Improve the document reading experience and fix problems. - 3.Unit test all components and issue test report. - 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/packages/varlet-ui/docs/developerGuide.zh-CN.md b/packages/varlet-ui/docs/developerGuide.zh-CN.md index a99e5758ef8..360590f76e9 100644 --- a/packages/varlet-ui/docs/developerGuide.zh-CN.md +++ b/packages/varlet-ui/docs/developerGuide.zh-CN.md @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.提供`jsx`,`tsx`语法高亮支持。 +- 1.提供`jsx`、`tsx`语法高亮支持。 - 2.完善文档阅读体验，修复存在的问题。 - 3.全组件单元测试，并出测试报告。 - 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file From dcd579da4ff2b1447c39db2b51a74a5128302792 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sun, 25 Apr 2021 21:13:57 +0800 Subject: [PATCH 07/18] =?UTF-8?q?test(ui/button):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E5=BF=AB=E7=85=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/cli, @varlet/ui --- packages/varlet-cli/src/commands/jest.ts | 3 +- .../__snapshots__/index.spec.js.snap | 242 +----------------- .../src/button/__tests__/index.spec.js | 26 +- packages/varlet-ui/types/dialog.d.ts | 2 +- 4 files changed, 23 insertions(+), 250 deletions(-) diff --git a/packages/varlet-cli/src/commands/jest.ts b/packages/varlet-cli/src/commands/jest.ts index 0570645db13..08868368aa2 100644 --- a/packages/varlet-cli/src/commands/jest.ts +++ b/packages/varlet-cli/src/commands/jest.ts @@ -6,9 +6,8 @@ export async function jest(cmd: { watch: boolean }, args: any) { rootDir: CWD, watch: cmd.watch, config: JEST_CONFIG, - testMatch: Array.isArray(args) ? [`**/${args[0]}/__tests__/*.[jt]s`] : undefined + testMatch: Array.isArray(args) ? [`**/${args[0]}/__tests__/*.[jt]s`] : undefined, } - await runCLI(config as any, [CWD]) } diff --git a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap index f4c1505b188..c4d406a6856 100644 --- a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap @@ -1,123 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`test button color & textColor 1`] = ` -VueWrapper { - "__app": Object { - "_component": Object { - "__emits": Object {}, - "__props": Array [ - Object {}, - Array [], - ], - "name": "VTU_ROOT", - "render": [Function], - }, - "_container":
- -
, - "_context": Object { - "app": [Circular], - "components": Object { - "transition": Object { - "name": "transition", - "props": undefined, - "render": [Function], - }, - "transition-group": Object { - "name": "transition-group", - "props": undefined, - "render": [Function], - }, - }, - "config": Object { - "errorHandler": undefined, - "globalProperties": Object {}, - "isCustomElement": [Function], - "isNativeTag": [Function], - "optionMergeStrategies": Object {}, - "performance": false, - "warnHandler": undefined, - }, - "directives": Object {}, - "mixins": Array [ - Object { - "__emits": null, - "__props": Array [], - "beforeCreate": [Function], - }, - ], - "provides": Object {}, - "reload": [Function], - }, - "_props": null, - "_uid": 6, - "component": [Function], - "config": Object { - "errorHandler": undefined, - "globalProperties": Object {}, - "isCustomElement": [Function], - "isNativeTag": [Function], - "optionMergeStrategies": Object {}, - "performance": false, - "warnHandler": undefined, - }, - "directive": [Function], - "mixin": [Function], - "mount": [Function], - "provide": [Function], - "unmount": [Function], - "use": [Function], - "version": "3.0.7", - }, - "__setProps": [Function], - "componentVM": Object { - "block": false, - "color": "#000", - "disabled": false, - "handleClick": [Function], - "handleTouchstart": [Function], - "hasOwnProperty": [Function], - "loading": false, - "loadingRadius": 12, - "loadingSize": "normal", - "loadingType": "circle", - "onClick": undefined, - "onTouchstart": undefined, - "outline": false, - "ripple": true, - "round": false, - "size": "normal", - "text": false, - "textColor": "#000", - "type": "default", - }, - "rootVM": Object {}, - "wrapperElement": , -} +"" `; exports[`test button example 1`] = ` @@ -268,121 +155,8 @@ exports[`test button example 1`] = ` `; exports[`test button size & text & block & round 1`] = ` -VueWrapper { - "__app": Object { - "_component": Object { - "__emits": Object {}, - "__props": Array [ - Object {}, - Array [], - ], - "name": "VTU_ROOT", - "render": [Function], - }, - "_container":
- -
, - "_context": Object { - "app": [Circular], - "components": Object { - "transition": Object { - "name": "transition", - "props": undefined, - "render": [Function], - }, - "transition-group": Object { - "name": "transition-group", - "props": undefined, - "render": [Function], - }, - }, - "config": Object { - "errorHandler": undefined, - "globalProperties": Object {}, - "isCustomElement": [Function], - "isNativeTag": [Function], - "optionMergeStrategies": Object {}, - "performance": false, - "warnHandler": undefined, - }, - "directives": Object {}, - "mixins": Array [ - Object { - "__emits": null, - "__props": Array [], - "beforeCreate": [Function], - }, - ], - "provides": Object {}, - "reload": [Function], - }, - "_props": null, - "_uid": 7, - "component": [Function], - "config": Object { - "errorHandler": undefined, - "globalProperties": Object {}, - "isCustomElement": [Function], - "isNativeTag": [Function], - "optionMergeStrategies": Object {}, - "performance": false, - "warnHandler": undefined, - }, - "directive": [Function], - "mixin": [Function], - "mount": [Function], - "provide": [Function], - "unmount": [Function], - "use": [Function], - "version": "3.0.7", - }, - "__setProps": [Function], - "componentVM": Object { - "block": true, - "color": undefined, - "disabled": false, - "handleClick": [Function], - "handleTouchstart": [Function], - "hasOwnProperty": [Function], - "loading": false, - "loadingRadius": 12, - "loadingSize": "normal", - "loadingType": "circle", - "onClick": undefined, - "onTouchstart": undefined, - "outline": false, - "ripple": true, - "round": true, - "size": "large", - "text": true, - "textColor": undefined, - "type": "default", - }, - "rootVM": Object {}, - "wrapperElement": , -} +"" `; diff --git a/packages/varlet-ui/src/button/__tests__/index.spec.js b/packages/varlet-ui/src/button/__tests__/index.spec.js index f8b5487d3a2..b79add858a1 100644 --- a/packages/varlet-ui/src/button/__tests__/index.spec.js +++ b/packages/varlet-ui/src/button/__tests__/index.spec.js @@ -4,12 +4,12 @@ import VarButton from '../Button' import { mount } from '@vue/test-utils' import { createApp } from 'vue' -test('test button example',() => { +test('test button example', () => { const wrapper = mount(example) expect(wrapper.html()).toMatchSnapshot() }) -test('test button plugin',() => { +test('test button plugin', () => { const app = createApp({}).use(Button) expect(app.component('VarButton')).toBeTruthy() }) @@ -20,15 +20,15 @@ test('test button click & touchstart', () => { wrapper.trigger('touchstart') }) -test('test button onClick & onTouchstart',() => { +test('test button onClick & onTouchstart', () => { const onClick = jest.fn() const onTouchstart = jest.fn() const wrapper = mount(VarButton, { props: { onClick, - onTouchstart - } + onTouchstart, + }, }) wrapper.trigger('click') @@ -45,8 +45,8 @@ test('test button disabled', () => { props: { disabled: true, onClick, - onTouchstart - } + onTouchstart, + }, }) wrapper.trigger('click') @@ -61,8 +61,8 @@ test('test button loading', () => { const wrapper = mount(VarButton, { props: { - loading: true - } + loading: true, + }, }) wrapper.trigger('click') @@ -76,10 +76,10 @@ test('test button color & textColor', () => { props: { color: '#000', textColor: '#000', - } + }, }) - expect(wrapper).toMatchSnapshot() + expect(wrapper.html()).toMatchSnapshot() }) test('test button size & text & block & round', () => { @@ -89,8 +89,8 @@ test('test button size & text & block & round', () => { round: true, text: true, block: true, - } + }, }) - expect(wrapper).toMatchSnapshot() + expect(wrapper.html()).toMatchSnapshot() }) diff --git a/packages/varlet-ui/types/dialog.d.ts b/packages/varlet-ui/types/dialog.d.ts index 60efb1098c8..dc6042d023a 100644 --- a/packages/varlet-ui/types/dialog.d.ts +++ b/packages/varlet-ui/types/dialog.d.ts @@ -1,4 +1,4 @@ -import { App, Component } from 'vue' +import { App } from 'vue' import { VarComponent } from './varComponent' interface DialogProps { From 2e14190d8ade54a05522efcb2528d8d5cf5b892b Mon Sep 17 00:00:00 2001 From: BeADre Date: Sun, 25 Apr 2021 22:01:10 +0800 Subject: [PATCH 08/18] chore(types): complete declare of component --- packages/varlet-ui/src/loading/props.ts | 10 +++++++-- packages/varlet-ui/types/backTop.d.ts | 12 +++++++++- packages/varlet-ui/types/cell.d.ts | 15 ++++++++++++- packages/varlet-ui/types/collapse.d.ts | 14 +++++++++++- packages/varlet-ui/types/collapseItem.d.ts | 11 ++++++++- packages/varlet-ui/types/countdown.d.ts | 26 +++++++++++++++++++++- packages/varlet-ui/types/datePicker.d.ts | 23 ++++++++++++++++++- packages/varlet-ui/types/indexAnchor.d.ts | 8 ++++++- packages/varlet-ui/types/indexBar.d.ts | 16 ++++++++++++- packages/varlet-ui/types/loading.d.ts | 11 ++++++++- packages/varlet-ui/types/progress.d.ts | 17 +++++++++++++- packages/varlet-ui/types/pullRefresh.d.ts | 17 +++++++++++++- packages/varlet-ui/types/slider.d.ts | 24 +++++++++++++++++++- packages/varlet-ui/types/step.d.ts | 10 ++++++++- packages/varlet-ui/types/steps.d.ts | 12 +++++++++- packages/varlet-ui/types/switch.d.ts | 20 ++++++++++++++++- packages/varlet-ui/types/timePicker.d.ts | 18 ++++++++++++++- 17 files changed, 246 insertions(+), 18 deletions(-) diff --git a/packages/varlet-ui/src/loading/props.ts b/packages/varlet-ui/src/loading/props.ts index 889e0730bff..ad3c84171e3 100644 --- a/packages/varlet-ui/src/loading/props.ts +++ b/packages/varlet-ui/src/loading/props.ts @@ -1,3 +1,9 @@ +import { PropType } from 'vue' + +type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear' + +type LoadingSize = 'normal' | 'mini' | 'small' | 'large' + export function typeValidator(type: string): boolean { return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type) } @@ -9,7 +15,7 @@ export function sizeValidator(size: string): boolean { export const props = { // loading类型 type: { - type: String, + type: String as PropType, default: 'circle', validator: typeValidator, }, @@ -19,7 +25,7 @@ export const props = { }, // loading尺寸 size: { - type: String, + type: String as PropType, default: 'normal', validator: sizeValidator, }, diff --git a/packages/varlet-ui/types/backTop.d.ts b/packages/varlet-ui/types/backTop.d.ts index 0eae1428e29..54485e3e3aa 100644 --- a/packages/varlet-ui/types/backTop.d.ts +++ b/packages/varlet-ui/types/backTop.d.ts @@ -1,3 +1,13 @@ import { VarComponent } from './varComponent' -export class BackTop extends VarComponent {} +interface BackTopProps { + visibilityHeight?: number | string + duration?: number + target?: string + onClick?: (e: Event) => void +} + + +export class BackTop extends VarComponent { + $props: BackTopProps +} diff --git a/packages/varlet-ui/types/cell.d.ts b/packages/varlet-ui/types/cell.d.ts index 0edf48045fd..93798aeccb4 100644 --- a/packages/varlet-ui/types/cell.d.ts +++ b/packages/varlet-ui/types/cell.d.ts @@ -1,3 +1,16 @@ import { VarComponent } from './varComponent' -export class Cell extends VarComponent {} +interface CellProps { + title?: string | number + icon?: string + desc?: string + border?: boolean + iconClass?: string + titleClass?: string + descClass?: string + extraClass?: string +} + +export class Cell extends VarComponent { + $props: CellProps +} diff --git a/packages/varlet-ui/types/collapse.d.ts b/packages/varlet-ui/types/collapse.d.ts index d88084107ba..019ae5d8fc8 100644 --- a/packages/varlet-ui/types/collapse.d.ts +++ b/packages/varlet-ui/types/collapse.d.ts @@ -1,3 +1,15 @@ import { VarComponent } from './varComponent' -export class Collapse extends VarComponent {} +type ModelValue = null | string | number | Array + +interface CollapseProps { + modelValue?: ModelValue + accordion?: boolean + offset?: boolean + onChange?: (value: ModelValue) => void + 'onUpdate:modelValue'?: (value: ModelValue) => void +} + +export class Collapse extends VarComponent { + $props: CollapseProps +} diff --git a/packages/varlet-ui/types/collapseItem.d.ts b/packages/varlet-ui/types/collapseItem.d.ts index eed254d5f6d..23490c15c99 100644 --- a/packages/varlet-ui/types/collapseItem.d.ts +++ b/packages/varlet-ui/types/collapseItem.d.ts @@ -1,3 +1,12 @@ import { VarComponent } from './varComponent' -export class CollapseItem extends VarComponent {} +interface CollapseItemProps { + name?: string | number + title?: string + icon?: string + disabled?: boolean +} + +export class CollapseItem extends VarComponent { + $props: CollapseItemProps +} diff --git a/packages/varlet-ui/types/countdown.d.ts b/packages/varlet-ui/types/countdown.d.ts index fa6377d3a73..48f705bff30 100644 --- a/packages/varlet-ui/types/countdown.d.ts +++ b/packages/varlet-ui/types/countdown.d.ts @@ -1,3 +1,27 @@ import { VarComponent } from './varComponent' -export class Countdown extends VarComponent {} +type TimeData = { + days: number + hours: number + minutes: number + seconds: number + milliseconds: number +} + +interface CountdownProps { + time?: string | number + format?: string + autoStart?: boolean + onEnd?: () => void + onChange?: (value: TimeData) => void +} + +export class Countdown extends VarComponent { + $props: CountdownProps + + start(): void + + pause(): void + + reset(): void +} diff --git a/packages/varlet-ui/types/datePicker.d.ts b/packages/varlet-ui/types/datePicker.d.ts index ebaab45301a..e9302a7f385 100644 --- a/packages/varlet-ui/types/datePicker.d.ts +++ b/packages/varlet-ui/types/datePicker.d.ts @@ -1,3 +1,24 @@ import { VarComponent } from './varComponent' -export class DatePicker extends VarComponent {} +interface DatePickerProps { + modelValue: string | Array + type?: 'date' | 'month' + allowedDates?: (val: string) => boolean + color?: string + headerColor?: string + shadow?: boolean + firstDayOfWeek?: string | number + min?: string + max?: string + showCurrent?: boolean + readonly?: boolean + multiple?: boolean + range?: boolean + onChange?: (value: string | string[]) => void + 'onUpdate:modelValue'?: (value: string | string[]) => void + +} + +export class DatePicker extends VarComponent { + $props: DatePickerProps +} diff --git a/packages/varlet-ui/types/indexAnchor.d.ts b/packages/varlet-ui/types/indexAnchor.d.ts index 34702ee1301..ae24b80703c 100644 --- a/packages/varlet-ui/types/indexAnchor.d.ts +++ b/packages/varlet-ui/types/indexAnchor.d.ts @@ -1,3 +1,9 @@ import { VarComponent } from './varComponent' -export class IndexAnchor extends VarComponent {} +interface IndexAnchorProps { + index: string | number +} + +export class IndexAnchor extends VarComponent { + $props: IndexAnchorProps +} diff --git a/packages/varlet-ui/types/indexBar.d.ts b/packages/varlet-ui/types/indexBar.d.ts index 7b0c885aa01..26797349b5c 100644 --- a/packages/varlet-ui/types/indexBar.d.ts +++ b/packages/varlet-ui/types/indexBar.d.ts @@ -1,3 +1,17 @@ import { VarComponent } from './varComponent' -export class IndexBar extends VarComponent {} +interface IndexBarProps { + sticky?: boolean + stickyOffsetTop?: number + zIndex?: number | string + highlightColor?: string + onClick?: (value: string | number) => void + onChange?: (value: string | number) => void + 'onUpdate:modelValue'?: (value: string | number) => void +} + +export class IndexBar extends VarComponent { + $props: IndexBarProps + + scrollTo: (index: number | string) => void +} diff --git a/packages/varlet-ui/types/loading.d.ts b/packages/varlet-ui/types/loading.d.ts index d74acd477a9..e56104aed93 100644 --- a/packages/varlet-ui/types/loading.d.ts +++ b/packages/varlet-ui/types/loading.d.ts @@ -1,3 +1,12 @@ import { VarComponent } from './varComponent' -export class Loading extends VarComponent {} +interface LoadingProps { + type?: 'circle' | 'wave' | 'cube' | 'rect' | 'disappear' + radius?: string | number + size?: 'normal' | 'mini' | 'small' | 'large' + color?: string +} + +export class Loading extends VarComponent { + $props: LoadingProps +} diff --git a/packages/varlet-ui/types/progress.d.ts b/packages/varlet-ui/types/progress.d.ts index 12746c92af0..4c5d7769768 100644 --- a/packages/varlet-ui/types/progress.d.ts +++ b/packages/varlet-ui/types/progress.d.ts @@ -1,3 +1,18 @@ import { VarComponent } from './varComponent' -export class Progress extends VarComponent {} +interface ProgressProps { + mode?: 'linear' | 'circle' + lineWidth?: string | number + color?: string + trackColor?: string + ripple?: boolean + showAction?: boolean + showTrack?: boolean + value?: number | string + size?: number + rotate?: number +} + +export class Progress extends VarComponent { + $props: ProgressProps +} diff --git a/packages/varlet-ui/types/pullRefresh.d.ts b/packages/varlet-ui/types/pullRefresh.d.ts index 7896c57235d..02f81beb67b 100644 --- a/packages/varlet-ui/types/pullRefresh.d.ts +++ b/packages/varlet-ui/types/pullRefresh.d.ts @@ -1,3 +1,18 @@ import { VarComponent } from './varComponent' -export class PullRefresh extends VarComponent {} +interface PullRefreshProps { + modelValue?: boolean + disable?: boolean + animationDuration?: number | string + successDuration?: number | string + bgColor?: string + successBgColor?: string + color?: string + successColor?: string + onRefresh: () => void + 'onUpdate:modelValue': (value: boolean) => void +} + +export class PullRefresh extends VarComponent { + $props: PullRefreshProps +} diff --git a/packages/varlet-ui/types/slider.d.ts b/packages/varlet-ui/types/slider.d.ts index 9599f114cd7..7490badfc71 100644 --- a/packages/varlet-ui/types/slider.d.ts +++ b/packages/varlet-ui/types/slider.d.ts @@ -1,3 +1,25 @@ import { VarComponent } from './varComponent' -export class Slider extends VarComponent {} +interface SliderProps { + modelValue?: number | Array + step?: number | string + range?: boolean + labelVisible?: 'always' | 'normal' | 'never' + activeColor?: string + trackColor?: string + thumbColor?: string + labelTextColor?: string + labelColor?: string + trackHeight?: string | number + thumbSize?: string | number + disabled?: boolean + readonly?: boolean + rules?: Array<(value: any) => any> + onChange?: (value: number | Array) => void + onStart?: () => void + onEnd?: (value: number | Array) => void +} + +export class Slider extends VarComponent { + $props: SliderProps +} diff --git a/packages/varlet-ui/types/step.d.ts b/packages/varlet-ui/types/step.d.ts index 35fa479caea..c6ec46d51ca 100644 --- a/packages/varlet-ui/types/step.d.ts +++ b/packages/varlet-ui/types/step.d.ts @@ -1,3 +1,11 @@ import { VarComponent } from './varComponent' -export class Step extends VarComponent {} +interface StepProps { + activeIcon?: string + currentIcon?: string + inactiveIcon?: string +} + +export class Step extends VarComponent { + $props: StepProps +} diff --git a/packages/varlet-ui/types/steps.d.ts b/packages/varlet-ui/types/steps.d.ts index 0cb7911f54c..585e01521ef 100644 --- a/packages/varlet-ui/types/steps.d.ts +++ b/packages/varlet-ui/types/steps.d.ts @@ -1,3 +1,13 @@ import { VarComponent } from './varComponent' -export class Steps extends VarComponent {} +interface StepsProps { + active?: string | number + direction?: 'horizontal' | 'vertical' + activeColor?: string + inactiveColor?: string + onClickStep?: (index: number) => void +} + +export class Steps extends VarComponent { + $props: StepsProps +} diff --git a/packages/varlet-ui/types/switch.d.ts b/packages/varlet-ui/types/switch.d.ts index 8b5b0eb17e8..a80ec593bc7 100644 --- a/packages/varlet-ui/types/switch.d.ts +++ b/packages/varlet-ui/types/switch.d.ts @@ -1,3 +1,21 @@ import { VarComponent } from './varComponent' -export class Switch extends VarComponent {} +interface SwitchProps { + modelValue?: boolean + disabled?: boolean + readonly?: boolean + loading?: boolean + ripple?: boolean + color?: string + loadingColor?: string + closeColor?: string + size?: string | number + rules?: Array<(value: any) => any> + onClick?: (e: Event) => void + onChange?: (value: boolean) => void + 'onUpdate:modelValue'?: (value: boolean) => void +} + +export class Switch extends VarComponent { + $props: SwitchProps +} diff --git a/packages/varlet-ui/types/timePicker.d.ts b/packages/varlet-ui/types/timePicker.d.ts index 77f615df004..c19514d1c21 100644 --- a/packages/varlet-ui/types/timePicker.d.ts +++ b/packages/varlet-ui/types/timePicker.d.ts @@ -1,3 +1,19 @@ import { VarComponent } from './varComponent' -export class TimePicker extends VarComponent {} +interface TimePickerProps { + modelValue?: string + shadow?: boolean + color?: string + headerColor?: string + format?: 'ampm' | '24hr' + min?: string + max?: string + useSeconds?: boolean + readonly?: boolean + onChange?: (value: string) => void + 'onUpdate:modelValue'?: (value: string) => void +} + +export class TimePicker extends VarComponent { + $props: TimePickerProps +} From 4630be3dd3678d35e8f5e9d194de84c6043797dd Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sun, 25 Apr 2021 22:11:28 +0800 Subject: [PATCH 09/18] =?UTF-8?q?feat(ui/types):=20=E5=AE=8C=E5=96=84row?= =?UTF-8?q?=E7=BB=84=E4=BB=B6jsx,tsx=E7=B1=BB=E5=9E=8B=E6=8E=A8=E6=96=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/ui --- packages/varlet-ui/types/row.d.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/varlet-ui/types/row.d.ts b/packages/varlet-ui/types/row.d.ts index a19bea30e74..30d9ef084e8 100644 --- a/packages/varlet-ui/types/row.d.ts +++ b/packages/varlet-ui/types/row.d.ts @@ -1,3 +1,12 @@ -import { VarComponent } from './varComponent'; +import { VarComponent } from './varComponent' -export class Row extends VarComponent {} +interface RowProps { + gutter?: string | number + justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' + align?: 'flex-start' | 'flex-center' | 'flex-end' + onClick?: (e: Event) => void +} + +export class Row extends VarComponent { + $props: RowProps +} From af74e30e3298cd8e8f5ad9ff651155a244c5de8e Mon Sep 17 00:00:00 2001 From: BeADre Date: Sun, 25 Apr 2021 22:20:10 +0800 Subject: [PATCH 10/18] docs: update readme --- README.md | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 371e4a7fdb7..14629b047d7 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,27 @@
- + -
VARLET
-
- Material design mobile component library for Vue3 -
+

VARLET

+
Material design mobile component library for Vue3
--- ### Intro -Varlet is a Material design mobile component library developed based on `Vue3`，Developed and maintained by partners in the community。 +Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by partners in the community. ### Features -- 1.Provide more than 40 high quality general purpose components -- 2.Components are very lightweight -- 3.Developed by Chinese, complete Chinese and English documentation and logistics support -- 4.Support on-demand introduction -- 5.Support theme customization -- 6.Support internationalization -- 7.Support WebStorm, VS Code component syntax highlighting -- 8.Support the SSR -- 9.Support the Typescript + 1. Provide more than 40 high quality general purpose components + 2. Components are very lightweight + 3. Developed by Chinese, complete Chinese and English documentation and logistics support + 4. Support on-demand introduction + 5. Support theme customization + 6. Support internationalization + 7. Support WebStorm, VS Code component syntax highlighting + 8. Support the SSR + 9. Support the Typescript ### Install From 3cc20cdd76ca1e5e85c19c7c4d03d3b9b9e4e354 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sun, 25 Apr 2021 22:29:29 +0800 Subject: [PATCH 11/18] =?UTF-8?q?chore(ui/**/props):=20=E4=BF=AE=E6=94=B9s?= =?UTF-8?q?tring=E7=B1=BB=E5=9E=8B=E4=B8=BA=E5=85=B7=E4=BD=93=E5=8F=AF?= =?UTF-8?q?=E9=80=89=E9=A1=B9=E7=9A=84=E8=81=94=E5=90=88=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?,=E4=BC=98=E5=8C=96=E7=B1=BB=E5=9E=8B=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/ui --- packages/varlet-ui/src/button/props.ts | 4 ++-- .../varlet-ui/src/checkbox-group/props.ts | 2 +- packages/varlet-ui/src/dialog/props.ts | 2 +- packages/varlet-ui/src/image/props.ts | 4 ++-- packages/varlet-ui/src/input/props.ts | 2 +- packages/varlet-ui/src/menu/props.ts | 2 +- packages/varlet-ui/src/popup/props.ts | 2 +- packages/varlet-ui/src/radio-group/props.ts | 2 +- packages/varlet-ui/src/row/props.ts | 24 +++++++------------ packages/varlet-ui/src/select/props.ts | 2 +- packages/varlet-ui/src/tabs/props.ts | 4 ++-- packages/varlet-ui/types/row.d.ts | 2 +- 12 files changed, 23 insertions(+), 29 deletions(-) diff --git a/packages/varlet-ui/src/button/props.ts b/packages/varlet-ui/src/button/props.ts index 7b2ec319485..68c375bab7d 100644 --- a/packages/varlet-ui/src/button/props.ts +++ b/packages/varlet-ui/src/button/props.ts @@ -12,12 +12,12 @@ function sizeValidator(size: string): boolean { export const props = { type: { - type: String, + type: String as PropType<'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'>, default: 'default', validator: typeValidator, }, size: { - type: String, + type: String as PropType<'normal' | 'mini' | 'small' | 'large'>, default: 'normal', validator: sizeValidator, }, diff --git a/packages/varlet-ui/src/checkbox-group/props.ts b/packages/varlet-ui/src/checkbox-group/props.ts index 63b3d168805..dd4a1931f11 100644 --- a/packages/varlet-ui/src/checkbox-group/props.ts +++ b/packages/varlet-ui/src/checkbox-group/props.ts @@ -15,7 +15,7 @@ export const props = { type: [String, Number], }, direction: { - type: String, + type: String as PropType<'horizontal' | 'vertical'>, default: 'horizontal', }, validateTrigger: { diff --git a/packages/varlet-ui/src/dialog/props.ts b/packages/varlet-ui/src/dialog/props.ts index 7fc7feb2cd1..5f513eb130b 100644 --- a/packages/varlet-ui/src/dialog/props.ts +++ b/packages/varlet-ui/src/dialog/props.ts @@ -19,7 +19,7 @@ export const props = { type: String, }, messageAlign: { - type: String, + type: String as PropType<'left' | 'center' | 'right'>, default: 'left', validator: messageAlignValidator, }, diff --git a/packages/varlet-ui/src/image/props.ts b/packages/varlet-ui/src/image/props.ts index fff8a7a99c0..4df3ef30547 100644 --- a/packages/varlet-ui/src/image/props.ts +++ b/packages/varlet-ui/src/image/props.ts @@ -9,7 +9,7 @@ export const props = { type: String, }, fit: { - type: String, + type: String as PropType<'fill' | 'contain' | 'cover' | 'none' | 'scale-down'>, validator: fitValidator, default: 'fill', }, @@ -34,7 +34,7 @@ export const props = { }, lazy: { type: Boolean, - default: false + default: false, }, ripple: { type: Boolean, diff --git a/packages/varlet-ui/src/input/props.ts b/packages/varlet-ui/src/input/props.ts index edd226af5d0..4f561be7849 100644 --- a/packages/varlet-ui/src/input/props.ts +++ b/packages/varlet-ui/src/input/props.ts @@ -11,7 +11,7 @@ export const props = { type: [String, Number], }, type: { - type: String, + type: String as PropType<'text' | 'password'>, default: 'text', validator: typeValidator, }, diff --git a/packages/varlet-ui/src/menu/props.ts b/packages/varlet-ui/src/menu/props.ts index 1391a2107b7..396dd0fd7ce 100644 --- a/packages/varlet-ui/src/menu/props.ts +++ b/packages/varlet-ui/src/menu/props.ts @@ -10,7 +10,7 @@ export const props = { default: false, }, alignment: { - type: String, + type: String as PropType<'top' | 'bottom'>, default: 'top', validator: alignmentValidator, }, diff --git a/packages/varlet-ui/src/popup/props.ts b/packages/varlet-ui/src/popup/props.ts index 0a3d6edb222..7a004725665 100644 --- a/packages/varlet-ui/src/popup/props.ts +++ b/packages/varlet-ui/src/popup/props.ts @@ -10,7 +10,7 @@ export const props = { default: false, }, position: { - type: String, + type: String as PropType<'top' | 'bottom' | 'right' | 'left' | 'center'>, default: 'center', validator: positionValidator, }, diff --git a/packages/varlet-ui/src/radio-group/props.ts b/packages/varlet-ui/src/radio-group/props.ts index df7a44dfeab..92946de0668 100644 --- a/packages/varlet-ui/src/radio-group/props.ts +++ b/packages/varlet-ui/src/radio-group/props.ts @@ -11,7 +11,7 @@ export const props = { default: undefined, }, direction: { - type: String, + type: String as PropType<'horizontal' | 'vertical'>, default: 'horizontal', }, validateTrigger: { diff --git a/packages/varlet-ui/src/row/props.ts b/packages/varlet-ui/src/row/props.ts index 3d812633de2..c9994efbb07 100644 --- a/packages/varlet-ui/src/row/props.ts +++ b/packages/varlet-ui/src/row/props.ts @@ -1,35 +1,29 @@ import { PropType } from 'vue' function justifyValidator(justify: string) { - return [ - 'flex-start', - 'flex-end', - 'center', - 'space-between', - 'space-around' - ].includes(justify) + return ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'].includes(justify) } function alignValidator(align: string) { - return ['flex-start', 'flex-center', 'flex-end'].includes(align) + return ['flex-start', 'center', 'flex-end'].includes(align) } export const props = { gutter: { type: [String, Number], - default: 0 + default: 0, }, justify: { - type: String, + type: String as PropType<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'>, default: 'flex-start', - validator: justifyValidator + validator: justifyValidator, }, align: { - type: String, + type: String as PropType<'flex-start' | 'center' | 'flex-end'>, default: 'flex-start', - validator: alignValidator + validator: alignValidator, }, onClick: { - type: Function as PropType<(e: Event) => void> - } + type: Function as PropType<(e: Event) => void>, + }, } diff --git a/packages/varlet-ui/src/select/props.ts b/packages/varlet-ui/src/select/props.ts index 340cc32e690..88b4701a317 100644 --- a/packages/varlet-ui/src/select/props.ts +++ b/packages/varlet-ui/src/select/props.ts @@ -55,7 +55,7 @@ export const props = { default: ',', }, textAlign: { - type: String, + type: String as PropType<'left' | 'right' | 'center'>, default: 'left', validator: textAlignValidator, }, diff --git a/packages/varlet-ui/src/tabs/props.ts b/packages/varlet-ui/src/tabs/props.ts index c835ea9fc3e..2a24e75b10d 100644 --- a/packages/varlet-ui/src/tabs/props.ts +++ b/packages/varlet-ui/src/tabs/props.ts @@ -12,12 +12,12 @@ export const props = { default: 0, }, layoutDirection: { - type: String, + type: String as PropType<'horizontal' | 'vertical'>, default: 'horizontal', validator: directionValidator, }, itemDirection: { - type: String, + type: String as PropType<'horizontal' | 'vertical'>, default: 'horizontal', validator: directionValidator, }, diff --git a/packages/varlet-ui/types/row.d.ts b/packages/varlet-ui/types/row.d.ts index 30d9ef084e8..a8968b90473 100644 --- a/packages/varlet-ui/types/row.d.ts +++ b/packages/varlet-ui/types/row.d.ts @@ -3,7 +3,7 @@ import { VarComponent } from './varComponent' interface RowProps { gutter?: string | number justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' - align?: 'flex-start' | 'flex-center' | 'flex-end' + align?: 'flex-start' | 'center' | 'flex-end' onClick?: (e: Event) => void } From bc19bbb9806dfdb047e2e036dab07753ca97a25b Mon Sep 17 00:00:00 2001 From: BeADre Date: Sun, 25 Apr 2021 22:29:39 +0800 Subject: [PATCH 12/18] docs: update readme --- README.zh-CN.md | 29 +++++++++++-------------- developerGuide.md | 8 +++---- developerGuide.zh-CN.md | 8 +++---- packages/varlet-eslint-config/README.md | 4 ++-- packages/varlet-ui/README.md | 28 +++++++++++------------- packages/varlet-ui/README.zh-CN.md | 28 +++++++++++------------- 6 files changed, 49 insertions(+), 56 deletions(-) diff --git a/README.zh-CN.md b/README.zh-CN.md index 76bad1b8d8e..bb24c87e6fb 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,13 +1,10 @@
- + -
VARLET
-
- 面向Vue3的Material风格移动端组件库 -
+

VARLET

+
面向Vue3的Material风格移动端组件库
- --- ### 介绍 @@ -15,20 +12,20 @@ Varlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥抱`Vue3`生态，由社区几个不知天高地厚的小伙伴开发和维护。 ### 特性 -- 1.提供40多个高质量通用组件 -- 2.组件十分轻量 -- 3.由国人开发，完善的中英文文档和后勤保障 -- 4.支持按需引入 -- 5.支持主题定制 -- 6.支持国际化 -- 7.支持webstorm，vscode组件属性高亮 -- 8.支持SSR -- 9.支持Typescript +1. 提供40多个高质量通用组件 +2. 组件十分轻量 +3. 由国人开发，完善的中英文文档和后勤保障 +4. 支持按需引入 +5. 支持主题定制 +6. 支持国际化 +7. 支持webstorm，vscode组件属性高亮 +8. 支持SSR +9. 支持Typescript ### 安装 ### CDN -`varlet.js`包含组件库的所有样式和逻辑, 引入即可。 +`varlet.js`包含组件库的所有样式和逻辑，引入即可。 ```html
diff --git a/developerGuide.md b/developerGuide.md index 5af36388da5..54241f8ae5c 100644 --- a/developerGuide.md +++ b/developerGuide.md @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.Provides `jsx`,`tsx` syntax highlighting support. -- 2.Improve the document reading experience and fix problems. -- 3.Unit test all components and issue test report. -- 4.Full component style detail optimization, animation curve optimization. \ No newline at end of file +1. Provides `jsx`,`tsx` syntax highlighting support. +2. Improve the document reading experience and fix problems. +3. Unit test all components and issue test report. +4. Full component style detail optimization, animation curve optimization. \ No newline at end of file diff --git a/developerGuide.zh-CN.md b/developerGuide.zh-CN.md index 360590f76e9..e73bcce9a5b 100644 --- a/developerGuide.zh-CN.md +++ b/developerGuide.zh-CN.md @@ -14,7 +14,7 @@ yarn dev ``` ### Todo list -- 1.提供`jsx`、`tsx`语法高亮支持。 -- 2.完善文档阅读体验，修复存在的问题。 -- 3.全组件单元测试，并出测试报告。 -- 4.全组件样式细节优化，动画曲线优化。 \ No newline at end of file +1. 提供`jsx`、`tsx`语法高亮支持。 +2. 完善文档阅读体验，修复存在的问题。 +3. 全组件单元测试，并出测试报告。 +4. 全组件样式细节优化，动画曲线优化。 \ No newline at end of file diff --git a/packages/varlet-eslint-config/README.md b/packages/varlet-eslint-config/README.md index d9104cbeccd..170b9142911 100644 --- a/packages/varlet-eslint-config/README.md +++ b/packages/varlet-eslint-config/README.md @@ -2,8 +2,8 @@ varlet eslint 配置文件 ## 快速上手 ``` -npm安装:npm i eslint @varlet/eslint-config -D -yarn安装:yarn add eslint @varlet/eslint-config -D +npm安装：npm i eslint @varlet/eslint-config -D +yarn安装：yarn add eslint @varlet/eslint-config -D ``` ``` diff --git a/packages/varlet-ui/README.md b/packages/varlet-ui/README.md index 371e4a7fdb7..7c7931b2a9c 100644 --- a/packages/varlet-ui/README.md +++ b/packages/varlet-ui/README.md @@ -1,29 +1,27 @@
- + -
VARLET
-
- Material design mobile component library for Vue3 -
+

VARLET

+
Material design mobile component library for Vue3
--- ### Intro -Varlet is a Material design mobile component library developed based on `Vue3`，Developed and maintained by partners in the community。 +Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by partners in the community. ### Features -- 1.Provide more than 40 high quality general purpose components -- 2.Components are very lightweight -- 3.Developed by Chinese, complete Chinese and English documentation and logistics support -- 4.Support on-demand introduction -- 5.Support theme customization -- 6.Support internationalization -- 7.Support WebStorm, VS Code component syntax highlighting -- 8.Support the SSR -- 9.Support the Typescript +1. Provide more than 40 high quality general purpose components +2. Components are very lightweight +3. Developed by Chinese, complete Chinese and English documentation and logistics support +4. Support on-demand introduction +5. Support theme customization +6. Support internationalization +7. Support WebStorm, VS Code component syntax highlighting +8. Support the SSR +9. Support the Typescript ### Install diff --git a/packages/varlet-ui/README.zh-CN.md b/packages/varlet-ui/README.zh-CN.md index 76bad1b8d8e..78ad9f80d9e 100644 --- a/packages/varlet-ui/README.zh-CN.md +++ b/packages/varlet-ui/README.zh-CN.md @@ -1,11 +1,9 @@
- + -
VARLET
-
- 面向Vue3的Material风格移动端组件库 -
+

VARLET

+
面向Vue3的Material风格移动端组件库
--- @@ -15,20 +13,20 @@ Varlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥抱`Vue3`生态，由社区几个不知天高地厚的小伙伴开发和维护。 ### 特性 -- 1.提供40多个高质量通用组件 -- 2.组件十分轻量 -- 3.由国人开发，完善的中英文文档和后勤保障 -- 4.支持按需引入 -- 5.支持主题定制 -- 6.支持国际化 -- 7.支持webstorm，vscode组件属性高亮 -- 8.支持SSR -- 9.支持Typescript +1. 提供40多个高质量通用组件 +2. 组件十分轻量 +3. 由国人开发，完善的中英文文档和后勤保障 +4. 支持按需引入 +5. 支持主题定制 +6. 支持国际化 +7. 支持webstorm，vscode组件属性高亮 +8. 支持SSR +9. 支持Typescript ### 安装 ### CDN -`varlet.js`包含组件库的所有样式和逻辑, 引入即可。 +`varlet.js`包含组件库的所有样式和逻辑，引入即可。 ```html
From 5312a7788ca70f716ef6bba6ed25c36e0b8fff0c Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sun, 25 Apr 2021 22:40:32 +0800 Subject: [PATCH 13/18] =?UTF-8?q?chore(cli/jest):=20=E4=BC=98=E5=8C=96jest?= =?UTF-8?q?=E5=91=BD=E4=BB=A4=E9=80=89=E9=A1=B9=E7=9A=84parse=E6=96=B9?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/cli --- packages/varlet-cli/lib/index.js | 5 ++--- packages/varlet-cli/src/commands/jest.ts | 4 ++-- packages/varlet-cli/src/index.ts | 5 ++--- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/varlet-cli/lib/index.js b/packages/varlet-cli/lib/index.js index 949de1367f3..23eaf9d426e 100755 --- a/packages/varlet-cli/lib/index.js +++ b/packages/varlet-cli/lib/index.js @@ -9,12 +9,11 @@ var create_1 = require("./commands/create"); var jest_1 = require("./commands/jest"); commander_1.command('dev').description('Run varlet development environment').action(dev_1.dev); commander_1.command('build').description('Build varlet site for production').action(build_1.build); -commander_1.command('compile') - .description('Compile varlet components library code') - .action(compile_1.compile); +commander_1.command('compile').description('Compile varlet components library code').action(compile_1.compile); commander_1.command('create ').description('Create a component directory').action(create_1.create); commander_1.command('jest') .description('Run Jest in work directory') .option('-w, --watch', 'Watch files change auto jest') + .option('-c, --component ', 'Test a specific component') .action(jest_1.jest); commander_1.parse(); diff --git a/packages/varlet-cli/src/commands/jest.ts b/packages/varlet-cli/src/commands/jest.ts index 08868368aa2..273794dfe76 100644 --- a/packages/varlet-cli/src/commands/jest.ts +++ b/packages/varlet-cli/src/commands/jest.ts @@ -1,12 +1,12 @@ import { runCLI } from 'jest' import { CWD, JEST_CONFIG } from '../shared/constant' -export async function jest(cmd: { watch: boolean }, args: any) { +export async function jest(cmd: { watch: boolean; component: string }) { const config = { rootDir: CWD, watch: cmd.watch, config: JEST_CONFIG, - testMatch: Array.isArray(args) ? [`**/${args[0]}/__tests__/*.[jt]s`] : undefined, + testMatch: cmd.component && [`**/${cmd.component}/__tests__/*.[jt]s`], } await runCLI(config as any, [CWD]) diff --git a/packages/varlet-cli/src/index.ts b/packages/varlet-cli/src/index.ts index 7f9cb577355..ce5eef5b782 100644 --- a/packages/varlet-cli/src/index.ts +++ b/packages/varlet-cli/src/index.ts @@ -10,15 +10,14 @@ command('dev').description('Run varlet development environment').action(dev) command('build').description('Build varlet site for production').action(build) -command('compile') - .description('Compile varlet components library code') - .action(compile) +command('compile').description('Compile varlet components library code').action(compile) command('create ').description('Create a component directory').action(create) command('jest') .description('Run Jest in work directory') .option('-w, --watch', 'Watch files change auto jest') + .option('-c, --component ', 'Test a specific component') .action(jest) parse() From e68100877c178b7657df1f671af1148823452391 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sun, 25 Apr 2021 22:44:20 +0800 Subject: [PATCH 14/18] =?UTF-8?q?chore(ui/package.json):=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9scripts=20jest=20->=20test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/ui --- packages/varlet-ui/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/varlet-ui/package.json b/packages/varlet-ui/package.json index 0b3c8c2538d..ff9a019fd09 100644 --- a/packages/varlet-ui/package.json +++ b/packages/varlet-ui/package.json @@ -40,8 +40,8 @@ "build": "varlet-cli build", "compile": "varlet-cli compile", "create": "varlet-cli create", - "jest": "varlet-cli jest", - "jest:watch": "varlet-cli jest -w" + "test": "varlet-cli jest", + "test:watch": "varlet-cli jest -w" }, "peerDependencies": { "vue": "^3.0.7" From 7d82141aef288e03b580b6ffabc0844f8f889ba3 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Mon, 26 Apr 2021 15:23:13 +0800 Subject: [PATCH 15/18] =?UTF-8?q?fix(ui/progress):=20=E4=BC=98=E5=8C=96pro?= =?UTF-8?q?gress=E6=96=87=E6=A1=A3,=20=E9=87=8D=E5=91=BD=E5=90=8Dprops=20s?= =?UTF-8?q?how-active=20->=20label,=20show-track=20->=20track?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/cli, @varlet/ui --- packages/varlet-cli/site/pc/App.vue | 9 ++-- packages/varlet-cli/src/commands/compile.ts | 10 +--- packages/varlet-ui/src/progress/Progress.vue | 6 +-- packages/varlet-ui/src/progress/docs/en-US.md | 44 +++++++---------- packages/varlet-ui/src/progress/docs/zh-CN.md | 42 +++++++--------- .../varlet-ui/src/progress/example/index.vue | 49 ++++++++++--------- .../src/progress/example/locale/en-US.ts | 3 +- .../src/progress/example/locale/zh-CN.ts | 3 +- packages/varlet-ui/src/progress/progress.less | 4 +- packages/varlet-ui/src/progress/props.ts | 6 +-- 10 files changed, 77 insertions(+), 99 deletions(-) diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue index 13825b11160..42d48a982a5 100644 --- a/packages/varlet-cli/site/pc/App.vue +++ b/packages/varlet-cli/site/pc/App.vue @@ -102,7 +102,7 @@ export default defineComponent({ [Cell.name]: Cell, [Icon.name]: Icon, [Menu.name]: Menu, - [Loading.name]: Loading + [Loading.name]: Loading, }, setup() { const menu: Ref = ref([]) @@ -157,7 +157,7 @@ export default defineComponent({ if (index !== -1) { childrenElement[index].scrollIntoView({ block: 'center', - inline: 'start' + inline: 'start', }) } }) @@ -228,9 +228,9 @@ export default defineComponent({ nav, code, changeRoute, - changeLanguage + changeLanguage, } - } + }, }) @@ -351,6 +351,7 @@ iframe { position: relative; z-index: 2; border-bottom: 1px solid rgba(0, 0, 0, 0.12); + box-sizing: border-box; &__logo { display: flex; diff --git a/packages/varlet-cli/src/commands/compile.ts b/packages/varlet-cli/src/commands/compile.ts index afd703c7cb0..e33d9fb84d5 100644 --- a/packages/varlet-cli/src/commands/compile.ts +++ b/packages/varlet-cli/src/commands/compile.ts @@ -1,10 +1,9 @@ -import logger from '../shared/logger' import ora from 'ora' import { remove } from 'fs-extra' import { CJS_DIR, ES_DIR, UMD_DIR } from '../shared/constant' import { compileModule } from '../compiler/compileModule' import { compileTemplateHighlight } from '../compiler/compileTemplateHighlight' -import { compileTypes } from '../compiler/compileTypes'; +import { compileTypes } from '../compiler/compileTypes' export function removeDir() { return Promise.all([remove(ES_DIR), remove(CJS_DIR), remove(UMD_DIR)]) @@ -15,12 +14,7 @@ export async function compile() { await removeDir() - await Promise.all([ - compileTypes(), - compileTemplateHighlight(), - compileModule(), - compileModule('cjs') - ]) + await Promise.all([compileTypes(), compileTemplateHighlight(), compileModule(), compileModule('cjs')]) await compileModule('umd') s.succeed('Compile success!') diff --git a/packages/varlet-ui/src/progress/Progress.vue b/packages/varlet-ui/src/progress/Progress.vue index 06edab17931..1c34100dd71 100644 --- a/packages/varlet-ui/src/progress/Progress.vue +++ b/packages/varlet-ui/src/progress/Progress.vue @@ -8,7 +8,7 @@ :style="{ background: color, width: linearProps.width }" > -
+
{{ linearProps.roundValue }} @@ -22,7 +22,7 @@ :viewBox="circleProps.viewBox" > -
+
{{ circleProps.roundValue }} diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md index fecc6d31c08..e35f94de0ba 100644 --- a/packages/varlet-ui/src/progress/docs/en-US.md +++ b/packages/varlet-ui/src/progress/docs/en-US.md @@ -13,8 +13,6 @@ import { Progress } from '@varlet/ui' createApp().use(Progress) ``` -## Progress linear - ### Basic Usage Set the current progress through the `value` attribute. @@ -22,6 +20,7 @@ Set the current progress through the `value` attribute. ```html + ``` ### Custom Style @@ -29,42 +28,35 @@ Set the current progress through the `value` attribute. Set the line width, progress bar color, track color and ripple loading effect through the attributes of `line-width`, `color`, `track-color` and `ripple`. ```html - - - + + + ``` -### Show Action +### Show Label -The action is displayed through the `show-action` attribute. The action is the percentage of progress by default. You can use the slot to insert custom content. +The label is displayed through the `label` attribute. The label is the percentage of progress by default. You can use the slot to insert custom content. ```html - - - success + + +success ``` -## Progress circle - -### Custom Style +### Progress circle ```html - + + + ``` ### Hide Track -Use `show-track` prop to hide track. +Use `track` prop to hide track. ```html - + ``` ## API @@ -77,17 +69,17 @@ Use `show-track` prop to hide track. | `line-width` | Width of the progress bar | _string \| number_ | `4` | | `color` | Color of the progress bar | _string_ | `#005CAF` | | `track-color` | Color of the progress track | _string_ | `#d8d8d8` | -| `show-action` | Whether the action is visible or not | _boolean_ | `false` | +| `label` | Whether the label is visible or not | _boolean_ | `false` | | `ripple` | Loading style for progress (only supports linear progress) | _boolean_ | `false` | | `size` | Size of progress (only supports circle progress) | _string \| number_ | `40` | | `rotate` | Origin of progress (only supports circle progress) | _number_ | `0` | -| `show-track` | Whether the progress track is visible or not (only supports circle progress) | _boolean_ | `true` | +| `track` | Whether the progress track is visible or not (only supports circle progress) | _boolean_ | `true` | ### Slots | Name | Description | SlotProps | | ----- | -------------- | -------- | -| `default` | Custom action | `-` | +| `default` | Custom label | `-` | ### Theme Variables #### The following LESS variables can be overridden at build time to modify the theme style diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md index e4baf96049f..be48a604eed 100644 --- a/packages/varlet-ui/src/progress/docs/zh-CN.md +++ b/packages/varlet-ui/src/progress/docs/zh-CN.md @@ -13,8 +13,6 @@ import { Progress } from '@varlet/ui' createApp().use(Progress) ``` -## 线性进度条 - ### 基本使用 通过 `value` 属性设置当前进度。 @@ -22,6 +20,7 @@ createApp().use(Progress) ```html + ``` ### 自定义样式 @@ -29,43 +28,36 @@ createApp().use(Progress) 通过`line-width`、`color`、`track-color`、`ripple` 属性设置线宽、进度条颜色、轨道颜色、水波纹加载效果。 ```html - - - + + + ``` ### 显示标签 -通过 `show-action`属性将action显示，action 默认为进度的百分比，可以使用插槽插入自定义内容。 +通过`label`属性将label显示，label默认为进度的百分比，可以使用插槽插入自定义内容。 ```html - - - success + + +success ``` -## 环形进度条 - -### 自定义样式 +### 环形进度条 ```html - + + + ``` ### 隐藏轨道 -通过`show-track`属性隐藏 track。 +通过`track`属性隐藏 track。 ```html - + ``` ## API @@ -78,17 +70,17 @@ createApp().use(Progress) | `line-width` | `progress` 的线宽 | _string \| number_ | `4` | | `color` | `progress` 的颜色 | _string_ | `#005CAF` | | `track-color` | `progress` 轨道的颜色 | _string_ | `#d8d8d8` | -| `show-action` | 是否显示 action | _boolean_ | `false` | +| `label` | 是否显示 label | _boolean_ | `false` | | `ripple` | 水波纹加载效果（仅支持线性进度条） | _boolean_ | `false` | | `size` | `progress` 的尺寸（仅支持环形进度条） | _string \| number_ | `40` | | `rotate` | `progress` 的原点（仅支持环形进度条） | _number_ | `0` | -| `show-track` | 是否显示 `progress` 的轨道（仅支持环形进度条） | _boolean_ | `true` | +| `track` | 是否显示 `progress` 的轨道（仅支持环形进度条） | _boolean_ | `true` | ### 插槽 | 名称 | 说明 | 参数 | | ----- | -------------- | -------- | -| `default` | 自定义 action | `-` | +| `default` | 自定义 label | `-` | ### 主题变量 #### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue index 633ae574c73..5409b52b752 100644 --- a/packages/varlet-ui/src/progress/example/index.vue +++ b/packages/varlet-ui/src/progress/example/index.vue @@ -1,49 +1,47 @@ diff --git a/packages/varlet-ui/src/radio/example/index.vue b/packages/varlet-ui/src/radio/example/index.vue deleted file mode 100644 index 09c8958ed4a..00000000000 --- a/packages/varlet-ui/src/radio/example/index.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - diff --git a/packages/varlet-ui/src/steps/docs/en-US.md b/packages/varlet-ui/src/steps/docs/en-US.md index d356df1965d..08d527d1b65 100644 --- a/packages/varlet-ui/src/steps/docs/en-US.md +++ b/packages/varlet-ui/src/steps/docs/en-US.md @@ -24,7 +24,7 @@ Use `active` prop to control the progress of step, value is index of step and is Step3 Step4 -next +next ``` ```javascript @@ -35,11 +35,11 @@ export default { const active = ref(0) const next = () => { - active.value = active.value === 4 ? 0 : active.value + 1 + active.value = (active.value + 1) % 4 } return { - value, + active, next } } @@ -48,98 +48,37 @@ export default { ### Custom Style -Clicking on `step` will trigger the `click-step` event. - ```html - + Step1 - + Step2 - + Step3 - + Step4 ``` -```javascript -import { ref } from 'vue' - -export default { - setup() { - const active = ref(0) - - const click = (index) => { - active.value = index - } - - return { - value, - click - } - } -} -``` - -### Dynamic steps - -Steppers can have their steps dynamically added or removed. - -```html - - - - - Step{{ i }} - -``` -```javascript -import { ref } from 'vue' - -export default { - setup() { - const list = ref([2, 3, 4, 5]) - const count = ref(4) - - return { - list, - count - } - } -} -``` ### Vertical Mode Change the display direction of the step bar through the `direction` attribute. ```html - - -

2021-02-13

- do something... - - -

2021-02-14

- do something... - - -

2021-02-15

- do something... - - -

2021-02-16

- do something... - + + Step1 + Step2 + Step3 + Step4 ``` diff --git a/packages/varlet-ui/src/steps/docs/zh-CN.md b/packages/varlet-ui/src/steps/docs/zh-CN.md index f96fd55f9fa..64dd858c8d9 100644 --- a/packages/varlet-ui/src/steps/docs/zh-CN.md +++ b/packages/varlet-ui/src/steps/docs/zh-CN.md @@ -24,7 +24,7 @@ createApp().use(Steps).use(Step) 步骤3 步骤4 -下一步 +下一步 ``` ```javascript @@ -35,11 +35,11 @@ export default { const active = ref(0) const next = () => { - active.value = active.value === 4 ? 0 : active.value + 1 + active.value = (active.value + 1) % 4 } return { - value, + active, next } } @@ -48,98 +48,37 @@ export default { ### 自定义样式 -点击 `step` 会触发`click-step` 事件。 - ```html - + 步骤1 - + 步骤2 - + 步骤3 - + 步骤4 ``` -```javascript -import { ref } from 'vue' - -export default { - setup() { - const active = ref(0) - - const click = (index) => { - active.value = index - } - - return { - value, - click - } - } -} -``` - -### 动态步骤 - -步骤条可以动态地添加或移除他们的步骤。 - -```html - - - - - 步骤{{ i }} - -``` -```javascript -import { ref } from 'vue' - -export default { - setup() { - const list = ref([2, 3, 4, 5]) - const count = ref(4) - - return { - list, - count - } - } -} -``` ### 垂直模式 通过 `direction` 属性改变步骤条的显示方向。 ```html - - -

2021-02-13

- 接下来... - - -

2021-02-14

- 接下来... - - -

2021-02-15

- 接下来... - - -

2021-02-16

- 接下来... - + + 步骤1 + 步骤2 + 步骤3 + 步骤4 ``` diff --git a/packages/varlet-ui/src/steps/example/index.vue b/packages/varlet-ui/src/steps/example/index.vue index 505c25223eb..57e94d77b16 100644 --- a/packages/varlet-ui/src/steps/example/index.vue +++ b/packages/varlet-ui/src/steps/example/index.vue @@ -1,69 +1,37 @@