;
6 | export * from './type';
7 |
8 | const Cascader = Object.assign(_Cascader, {
9 | install: (app: App) => {
10 | app.component('Yc' + _Cascader.name, _Cascader);
11 | app.component('Yc' + _CascaderPanel.name, _CascaderPanel);
12 | },
13 | });
14 |
15 | export { _CascaderPanel as CascaderPanel };
16 |
17 | export default Cascader;
18 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/spin/component/spin-icon.md:
--------------------------------------------------------------------------------
1 | ### 自定义图标
2 |
3 | 通过 `#icon` 插槽可以自定义图标。
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/alert/component/alert-banner.md:
--------------------------------------------------------------------------------
1 | ### 顶部公告
2 |
3 | 通过设置 `banner`，可将警告提示作为顶部公告使用（去除边框和圆角）。
4 |
5 |
6 | This is an info alert.
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 | This is an info alert.
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/affix/component/affix-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 基本用法，不设置固定位置时，当页面滚动元素不可见时，元素固定在页面最顶部。
4 |
5 |
6 |
7 | Affix Top
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 | ```vue
19 |
20 |
21 | Affix Top
22 |
23 |
24 | ```
25 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/pagination/component/pagination-complete.md:
--------------------------------------------------------------------------------
1 | ### 全部展示
2 |
3 | 展示全部配置项。
4 |
5 |
6 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/switch/component/switch-size.md:
--------------------------------------------------------------------------------
1 | ### 开关尺寸
2 |
3 | 开关分为 `small`、`medium` 两种尺寸。
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 | ```vue
20 |
21 |
22 |
23 |
24 |
25 |
26 | ```
27 |
28 |
29 |
--------------------------------------------------------------------------------
/packages/web-vue/src/resolver/autoImportPlugin.d.ts:
--------------------------------------------------------------------------------
1 | export interface ComponentInfo {
2 | name: string;
3 | from: string;
4 | as: string;
5 | sideEffects?: string | string[];
6 | }
7 |
8 | export interface ComponentResolver {
9 | type: 'component';
10 | resolve: (name: string) => ComponentInfo | undefined | null;
11 | }
12 |
13 | export interface YcDesignVueResolverOptions {
14 | exclude?: string | RegExp | (string | RegExp)[];
15 | sideEffect?: boolean;
16 | }
17 |
18 | export declare const YcDesignVueResolver: (
19 | options?: YcDesignVueResolverOptions
20 | ) => ComponentResolver;
21 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/watermark/index.md:
--------------------------------------------------------------------------------
1 | # 水印 Watermark
2 |
3 | 用于给页面的指定区域加上水印。
4 |
5 | ---
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Link/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 | import { Status } from '@shared/type';
3 | // icon
4 | export interface LinkProps {
5 | href?: string;
6 | icon?: boolean;
7 | status?: Status;
8 | hoverable?: boolean;
9 | disabled?: boolean;
10 | loading?: boolean;
11 | }
12 |
13 | export interface LinkEmits {
14 | (e: 'click', event: MouseEvent): void;
15 | (e: 'dblclick', event: MouseEvent): void;
16 | (e: 'contextmenu', event: MouseEvent): void;
17 | }
18 |
19 | export interface LinkSlots {
20 | default?: () => VNode[];
21 | icon?: () => VNode[];
22 | }
23 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/link/index.md:
--------------------------------------------------------------------------------
1 | # 链接 Link
2 |
3 | Link 链接组件用于页面间导航或外部链接跳转，支持不同状态和样式。
4 |
5 | ---
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/popconfirm/index.md:
--------------------------------------------------------------------------------
1 | # 气泡确认框 Popconfirm
2 |
3 | 点击元素，弹出气泡式的确认框。
4 |
5 | ---
6 |
7 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/watermark/component/watermark-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本使用
2 |
3 | 水印的基本用法。
4 |
5 |
10 |
11 |
12 |
13 |
16 |
17 |
18 | ```vue
19 |
20 |
21 |
22 |
23 |
24 | ```
25 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/_shared/icons/IconWarning.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
16 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/textarea/index.md:
--------------------------------------------------------------------------------
1 | # 文本域 Textarea
2 |
3 | 多行纯文本编辑控件，适用于评论或反馈表单中的一段意见。
4 |
5 | ---
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Card/CardGrid.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
13 |
14 |
24 |
25 |
28 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/time-picker/component/picker-extra.md:
--------------------------------------------------------------------------------
1 | ### 附加内容
2 |
3 | 选择框底部显示自定义的内容。
4 |
5 |
6 |
7 | Extra Footer
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 | ```vue
19 |
20 |
21 | Extra Footer
22 |
23 |
24 | ```
25 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Comment/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 |
3 | export interface CommentProps {
4 | author?: string;
5 | avatar?: string;
6 | content?: string;
7 | datetime?: string;
8 | align?: CommentAlign;
9 | }
10 |
11 | export interface CommentSlots {
12 | avatar?: () => VNode[];
13 | author?: () => VNode[];
14 | datetime?: () => VNode[];
15 | content?: () => VNode[];
16 | actions?: () => VNode[];
17 | default?: () => VNode[][];
18 | }
19 |
20 | export type CommentAlign =
21 | | 'left'
22 | | 'right'
23 | | { datetime?: 'left' | 'right'; actions?: 'left' | 'right' };
24 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Skeleton/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 | import { Shape, Size } from '@shared/type';
3 |
4 | export interface SkeletonProps {
5 | animation?: boolean;
6 | loading?: boolean;
7 | }
8 |
9 | export interface SkeletonSlots {
10 | default?: () => VNode[];
11 | content?: () => VNode[];
12 | }
13 |
14 | export interface SkeletonLineProps {
15 | rows?: number;
16 | widths?: number[];
17 | lineHeight?: number;
18 | lineSpacing?: number;
19 | }
20 |
21 | export interface SkeletonShapeProps {
22 | shape?: Exclude;
23 | size?: Exclude;
24 | }
25 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/pagination/component/pagination-simple.md:
--------------------------------------------------------------------------------
1 | ### 简洁模式
2 |
3 | 通过设置 `simple` 属性开启简洁模式。
4 |
5 |
6 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
21 |
22 |
23 | ```vue
24 |
25 |
28 |
29 | ```
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/tooltip/index.md:
--------------------------------------------------------------------------------
1 | # 文字气泡 文字提示
2 |
3 | 鼠标悬停、聚焦或点击在某个组件时，弹出的文字提示。
4 |
5 | ---
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 | `tooltip` 组件的 `trigger-props` 继承 `trigger` 组件的全部属性
21 |
22 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/date-picker/component/picker-disabled.md:
--------------------------------------------------------------------------------
1 | ### 禁用
2 |
3 | 禁用状态。
4 |
5 |
6 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 | ```vue
20 |
21 |
25 |
26 | ```
27 |
28 |
29 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Empty/style/empty.less:
--------------------------------------------------------------------------------
1 | .yc-empty {
2 | padding: 10px 0;
3 | color: var(--color-neutral-5);
4 | line-height: 1;
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: center;
8 | align-items: center;
9 | gap: 4px;
10 | .yc-empty-image {
11 | width: 48px;
12 | height: 48px;
13 | font-size: 48px;
14 | color: inherit;
15 |
16 | img {
17 | height: 100%;
18 | width: 100%;
19 | object-fit: contain;
20 | }
21 | }
22 | .yc-empty-description {
23 | line-height: 21px;
24 | font-size: 14px;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/OverflowList/style/overflow-list.less:
--------------------------------------------------------------------------------
1 | .yc-overflow-list {
2 | position: relative;
3 | display: flex;
4 | align-items: center;
5 | .yc-tag {
6 | flex-shrink: 0;
7 | overflow: hidden;
8 | left: 0;
9 | right: 0;
10 | .yc-tag-label {
11 | text-wrap: nowrap;
12 | }
13 | }
14 | .yc-overflow-tag {
15 | position: absolute;
16 | }
17 | }
18 | // from
19 | .yc-overflow-list-from-start {
20 | .yc-overflow-tag {
21 | left: 0;
22 | }
23 | }
24 | .yc-overflow-list-from-end {
25 | .yc-overflow-tag {
26 | right: 0;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/_shared/icons/IconSuccess.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
16 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/statistic/index.md:
--------------------------------------------------------------------------------
1 | # 数值显示 Statistic
2 |
3 | 突出展示某个或某组数字、带描述的统计类数据。
4 |
5 | ---
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Alert/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 | import { Type } from '@shared/type';
3 |
4 | export interface AlertProps {
5 | type?: Type<'normal'>;
6 | showIcon?: boolean;
7 | closable?: boolean;
8 | title?: string;
9 | banner?: boolean;
10 | center?: boolean;
11 | }
12 |
13 | export interface AlertEmits {
14 | (e: 'close', ev: MouseEvent): void;
15 | (e: 'after-close'): void;
16 | }
17 |
18 | export interface AlertSlots {
19 | default?: () => VNode[];
20 | icon?: () => VNode[];
21 | title?: () => VNode[];
22 | action?: () => VNode[];
23 | 'close-element'?: () => VNode[];
24 | }
25 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Card/hooks/useContext.ts:
--------------------------------------------------------------------------------
1 | import { useSlots, Slots, provide as _provide, inject as _inject } from 'vue';
2 |
3 | const CARD_CONTEXT_KEY = 'card-context';
4 | type CardContext = {
5 | slots: Slots;
6 | };
7 |
8 | export default function useCardContext() {
9 | const provide = () => {
10 | const slots = useSlots();
11 | _provide(CARD_CONTEXT_KEY, {
12 | slots,
13 | });
14 | };
15 | const inject = () => {
16 | return _inject(CARD_CONTEXT_KEY, {
17 | slots: {},
18 | });
19 | };
20 | return {
21 | provide,
22 | inject,
23 | };
24 | }
25 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Radio/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Radio from './Radio.vue';
3 | import _RadioGroup from './RadioGroup.vue';
4 |
5 | export type RadioInstance = InstanceType;
6 | export type RadioGroupInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Radio = Object.assign(_Radio, {
10 | group: _RadioGroup,
11 | install: (app: App) => {
12 | app.component('Yc' + _Radio.name, _Radio);
13 | app.component('Yc' + _RadioGroup.name, _RadioGroup);
14 | },
15 | });
16 |
17 | export { _RadioGroup as RadioGroup };
18 |
19 | export default Radio;
20 |
--------------------------------------------------------------------------------
/packages/web-vue/src/dev/README.md:
--------------------------------------------------------------------------------
1 | ## 待实现的组件
2 | Form Tree TreeSelect Table
3 | Icon(没有意义不在实现)
4 | DatePicker(RangePicker、QuarterPicker)
5 | ## 组件未实现的属性
6 | 1. Typography：ellipsis
7 | 2. Tabs：lazyLoad
8 | 3. cascader：virtualListProps、checkStrictly
9 | 4. DatePicker：pickerValue、defaultPickerValue
10 | 5. TimePicker：pickerValue、defaultPickerValue
11 | 6. Upload：跟自动上传的全部相关属性
12 | ## 移除的无用属性
13 | 1. InputNumber：modelEvent
14 | 2. Select、List、Scrollbar、TimePicker：scrollbar
15 | 3. Drawer、Modal、Trigger：renderToBody
16 | 4. List：gridProps
17 | 5. TimePicker：use12Hours
18 | 6. Tabs：scrollPosition
19 | 7. Men：mode('pop' | 'popButton')
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Anchor/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Anchor from './Anchor.vue';
3 | import _AnchorLink from './AnchorLink.vue';
4 |
5 | export type AnchorInstance = InstanceType;
6 | export type AnchorLinkInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Anchor = Object.assign(_Anchor, {
10 | link: _AnchorLink,
11 | install: (app: App) => {
12 | app.component('Yc' + _Anchor.name, _Anchor);
13 | app.component('Yc' + _AnchorLink.name, _AnchorLink);
14 | },
15 | });
16 |
17 | export { _AnchorLink as AnchorLink };
18 |
19 | export default Anchor;
20 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/List/style/list-item-meta.less:
--------------------------------------------------------------------------------
1 | .yc-list-item-meta {
2 | overflow: hidden;
3 | width: 100%;
4 | padding: 4px 0;
5 | display: flex;
6 | align-items: center;
7 | gap: 16px;
8 | .yc-list-item-avatar {
9 | flex-shrink: 0;
10 | }
11 | .yc-list-item-meta-content {
12 | flex: 1;
13 | display: flex;
14 | flex-direction: column;
15 | gap: 2px;
16 | .yc-list-item-meta-title {
17 | color: var(--color-text-1);
18 | font-weight: 500;
19 | }
20 | .yc-list-item-meta-description {
21 | color: var(--color-text-2);
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/anchor/index.md:
--------------------------------------------------------------------------------
1 | # 锚点 Anchor
2 |
3 | 通过锚点可快速找到信息内容在当前页面的位置。
4 |
5 | ---
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/spin/component/spin-size.md:
--------------------------------------------------------------------------------
1 | ### 不同尺寸
2 |
3 | 设置 `size` 可以得到不同尺寸的加载图标。
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/verification-code/index.md:
--------------------------------------------------------------------------------
1 | # 验证码输入 VerificationCode
2 |
3 | 验证码输入组件
4 |
5 | ---
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Avatar/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Avatar from './Avatar.vue';
3 | import _AvatarGroup from './AvatarGroup.vue';
4 |
5 | export type AvatarInstance = InstanceType;
6 | export type AvatarGroupInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Avatar = Object.assign(_Avatar, {
10 | group: _AvatarGroup,
11 | install: (app: App) => {
12 | app.component('Yc' + _Avatar.name, _Avatar);
13 | app.component('Yc' + _AvatarGroup.name, _AvatarGroup);
14 | },
15 | });
16 |
17 | export { _AvatarGroup as AvatarGroup };
18 |
19 | export default Avatar;
20 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Button/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Button from './Button.vue';
3 | import _ButtonGroup from './ButtonGroup.vue';
4 |
5 | export type ButonInstance = InstanceType;
6 | export type ButonGroupInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Button = Object.assign(_Button, {
10 | group: _ButtonGroup,
11 | install: (app: App) => {
12 | app.component('Yc' + _Button.name, _Button);
13 | app.component('Yc' + _ButtonGroup.name, _ButtonGroup);
14 | },
15 | });
16 |
17 | export { _ButtonGroup as ButtonGroup };
18 |
19 | export default Button;
20 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/popconfirm/component/popconfirm-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 气泡确认框的基本用法。
4 |
5 |
6 |
7 | Click To Delete
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 | ```vue
19 |
20 |
21 | Click To Delete
22 |
23 |
24 | ```
25 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/cascader/component/cascader-loading.md:
--------------------------------------------------------------------------------
1 | ### 加载中
2 |
3 | 选择框和下拉菜单显示加载中状态。
4 |
5 |
6 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/layout/index.md:
--------------------------------------------------------------------------------
1 | # 布局 Layout
2 |
3 | 页面的基础布局框架，常与组件嵌套使用，构建页面整体布局。
4 |
5 | ---
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/upload/component/upload-directory.md:
--------------------------------------------------------------------------------
1 | ### 文件夹上传
2 |
3 | 可以通过 `directory` 开启文件夹上传
4 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
25 |
26 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Timeline/TimelineItemPending.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{ pending }}
9 |
10 |
11 |
12 |
25 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/_shared/icons/IconInfo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
16 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/date-picker/component/picker-extra.md:
--------------------------------------------------------------------------------
1 | ### 额外的页脚
2 |
3 | 在浮层中加入额外的页脚，以满足某些定制信息的需求。
4 |
5 |
6 |
7 | Extra footer
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 | ```vue
19 |
20 |
21 | Extra footer
22 |
23 |
24 | ```
25 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Rate/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 |
3 | export interface RateProps {
4 | count?: number;
5 | modelValue?: number;
6 | defaultValue?: number;
7 | allowHalf?: boolean;
8 | allowClear?: boolean;
9 | grading?: boolean;
10 | readonly?: boolean;
11 | disabled?: boolean;
12 | color?: string | Record;
13 | }
14 |
15 | export interface RateEmits {
16 | (e: 'update:modelValue', value: number): void;
17 | (e: 'change', value: number): void;
18 | (e: 'hover-change', value: number): void;
19 | }
20 |
21 | export interface RateSlots {
22 | character?: (scope: { index: number }) => VNode[];
23 | }
24 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/affix/component/affix-cb.md:
--------------------------------------------------------------------------------
1 | ### 固定状态改变回调
2 |
3 | 当固定状态发生改变时，会触发事件。
4 |
5 |
6 |
10 | 80px to affix bottom
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
24 | 80px to affix bottom
25 |
26 |
27 | ```
28 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/message/component/message-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 全局提示的基本用法。
4 |
5 |
6 | Info Message
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 | Info Message
25 |
26 |
27 | ```
28 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Statistic/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Statistic from './Statistic.vue';
3 | import _Countdown from './Countdown.vue';
4 |
5 | export type StatisticInstance = InstanceType;
6 | export type CountdownInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Statistic = Object.assign(_Statistic, {
10 | countdown: _Countdown,
11 | install: (app: App) => {
12 | app.component('Yc' + _Statistic.name, _Statistic);
13 | app.component('Yc' + _Countdown.name, _Countdown);
14 | },
15 | });
16 |
17 | export { _Countdown as Countdown };
18 |
19 | export default Statistic;
20 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/input-tag/component/input-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 标签输入框的基本用法。
4 |
5 |
6 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/menu/index.md:
--------------------------------------------------------------------------------
1 | # 菜单 Menu
2 |
3 | 收纳、排列并展示一系列选项的列表。
4 |
5 | ---
6 |
7 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Anchor/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 | import { TargetContainer } from '@shared/type';
3 |
4 | export interface AnchorProps {
5 | boundary?: Boundary;
6 | lineLess?: boolean;
7 | scrollContainer?: TargetContainer;
8 | changeHash?: boolean;
9 | smooth?: boolean;
10 | }
11 |
12 | export interface AnchorSlots {
13 | default?: () => VNode[];
14 | }
15 |
16 | export interface AnchorLinkProps {
17 | title?: string;
18 | href?: string;
19 | }
20 |
21 | export interface AnchorLinkSlots {
22 | default?: () => VNode[];
23 | sublist?: () => VNode[];
24 | }
25 |
26 | type Boundary = 'start' | 'end' | 'center' | 'nearest' | number;
27 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Carousel/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Carousel from './Carousel.vue';
3 | import _CarouselItem from './CarouselItem.vue';
4 |
5 | export type CarouselInstance = InstanceType;
6 | export type CarouselItemInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Carousel = Object.assign(_Carousel, {
10 | item: _CarouselItem,
11 | install: (app: App) => {
12 | app.component('Yc' + _Carousel.name, _Carousel);
13 | app.component('Yc' + _CarouselItem.name, _CarouselItem);
14 | },
15 | });
16 |
17 | export { _CarouselItem as CarouselItem };
18 |
19 | export default Carousel;
20 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Collapse/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Collapse from './Collapse.vue';
3 | import _CollapseItem from './CollapseItem.vue';
4 |
5 | export type CollapseInstance = InstanceType;
6 | export type CollapseItemInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Collapse = Object.assign(_Collapse, {
10 | item: _CollapseItem,
11 | install: (app: App) => {
12 | app.component('Yc' + _Collapse.name, _Collapse);
13 | app.component('Yc' + _CollapseItem.name, _CollapseItem);
14 | },
15 | });
16 |
17 | export { _CollapseItem as CollapseItem };
18 |
19 | export default Collapse;
20 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Statistic/style/statistic.less:
--------------------------------------------------------------------------------
1 | .yc-statistic {
2 | color: var(--color-text-2);
3 | line-height: 1.5715;
4 | display: inline-flex;
5 | flex-direction: column;
6 | gap: 8px;
7 | .yc-statistic-title,
8 | .yc-statistic-extra {
9 | color: var(--color-text-2);
10 | font-size: 14px;
11 | }
12 | .yc-statistic-content {
13 | .yc-statistic-value {
14 | color: var(--color-text-1);
15 | font-weight: 500;
16 | font-size: 26px;
17 | white-space: nowrap;
18 | .yc-statistic-prefix,
19 | .yc-statistic-suffix {
20 | font-size: 14px;
21 | }
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Timeline/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Timeline from './Timeline.vue';
3 | import _TimelineItem from './TimelineItem.vue';
4 |
5 | export type TimelineInstance = InstanceType;
6 | export type TimelineItemInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Timeline = Object.assign(_Timeline, {
10 | item: _TimelineItem,
11 | install: (app: App) => {
12 | app.component('Yc' + _Timeline.name, _Timeline);
13 | app.component('Yc' + _TimelineItem.name, _TimelineItem);
14 | },
15 | });
16 |
17 | export { _TimelineItem as TimelineItem };
18 |
19 | export default Timeline;
20 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Typography/style/typography-title.less:
--------------------------------------------------------------------------------
1 | .yc-typography {
2 | margin-top: 1em;
3 | margin-bottom: 0.5em;
4 | font-weight: 500;
5 | }
6 | // style
7 | h1.yc-typography {
8 | font-size: 36px;
9 | line-height: 1.23;
10 | }
11 | h2.yc-typography {
12 | font-size: 32px;
13 | line-height: 1.25;
14 | }
15 | h3.yc-typography {
16 | font-size: 28px;
17 | line-height: 1.29;
18 | }
19 | h4.yc-typography {
20 | font-size: 24px;
21 | line-height: 1.33;
22 | }
23 | h5.yc-typography {
24 | font-size: 20px;
25 | line-height: 1.4;
26 | }
27 | h6.yc-typography {
28 | font-size: 16px;
29 | line-height: 1.5;
30 | }
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/affix/component/affix-bottom.md:
--------------------------------------------------------------------------------
1 | ### 底部固定
2 |
3 | 当页面滚动或浏览器窗口改变时，元素向下滚动到距底部一定距离时固定。
4 |
5 |
6 |
10 | 120px to affix bottom
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
24 | 120px to affix bottom
25 |
26 |
27 | ```
28 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/link/component/link-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 链接的基本用法。
4 |
5 |
6 |
7 | Link
8 | Link
9 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 | ```vue
20 |
21 |
22 | Link
23 | Link
28 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Checkbox/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Checkbox from './Checkbox.vue';
3 | import _CheckboxGroup from './CheckboxGroup.vue';
4 |
5 | export type CheckboxInstance = InstanceType;
6 | export type CheckboxGroupInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Checkbox = Object.assign(_Checkbox, {
10 | group: _CheckboxGroup,
11 | install: (app: App) => {
12 | app.component('Yc' + _Checkbox.name, _Checkbox);
13 | app.component('Yc' + _CheckboxGroup.name, _CheckboxGroup);
14 | },
15 | });
16 |
17 | export { _CheckboxGroup as CheckboxGroup };
18 |
19 | export default Checkbox;
20 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/spin/index.md:
--------------------------------------------------------------------------------
1 | # 加载中 Spin
2 |
3 | 用于页面和区块的加载中状态 - 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
4 |
5 | ---
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/switch/component/switch-type.md:
--------------------------------------------------------------------------------
1 | ### 开关类型
2 |
3 | 开关分为 `circle` - 圆形（默认）、`round` - 圆角、`line` - 线性三种类型。
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Dropdown/style/dropdown.less:
--------------------------------------------------------------------------------
1 | .yc-dropdown-popup {
2 | .yc-dropdown {
3 | padding: 4px 0;
4 | background-color: var(--color-bg-popup);
5 | border: 1px solid var(--color-fill-3);
6 | border-radius: var(--border-radius-medium);
7 | box-shadow: 0 4px 10px #0000001a;
8 | .yc-dropdown-list {
9 | display: flex;
10 | flex-direction: column;
11 | }
12 | .yc-dropdown-footer {
13 | border-top: 1px solid var(--color-fill-3);
14 | }
15 | }
16 | .yc-trigger-arrow {
17 | z-index: 0;
18 | background-color: var(--color-bg-popup);
19 | border: 1px solid var(--color-neutral-3);
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Skeleton/Skeleton.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
13 |
14 |
27 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/affix/component/affix-top.md:
--------------------------------------------------------------------------------
1 | ### 顶部固定
2 |
3 | 当页面滚动或浏览器窗口改变时，元素向上滚动到距顶部一定距离时固定。
4 |
5 |
6 |
9 | 80px to affix top
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
25 | 80px to affix top
26 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/input-number/index.md:
--------------------------------------------------------------------------------
1 | # InputNumber 数字输入框
2 |
3 | 仅允许输入数字格式的输入框。
4 |
5 | ---
6 |
7 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/space/index.md:
--------------------------------------------------------------------------------
1 | # 间距 Space
2 |
3 | 设置组件之间的间距
4 |
5 | ---
6 |
7 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/tooltip/component/tooltip-mini.md:
--------------------------------------------------------------------------------
1 | ### 迷你尺寸
2 |
3 | 适用于小场景或数字气泡样式。
4 |
5 |
6 |
10 | Mouse over to display tooltip
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
27 | Mouse over to display tooltip
28 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Slider/type.ts:
--------------------------------------------------------------------------------
1 | import { Direction, Format } from '@shared/type';
2 |
3 | export interface SliderProps {
4 | modelValue?: SliderValue;
5 | defaultValue?: SliderValue;
6 | step?: number;
7 | min?: number;
8 | marks?: Record;
9 | max?: number;
10 | direction?: Direction;
11 | disabled?: boolean;
12 | showTicks?: boolean;
13 | showInput?: boolean;
14 | range?: boolean;
15 | showTooltip?: boolean;
16 | formatTooltip?: Format;
17 | }
18 |
19 | export interface SliderEmits {
20 | (e: 'update:modelValue', value: number): void;
21 | (e: 'change', value: number): void;
22 | }
23 |
24 | export type SliderValue = number | number[];
25 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/avatar/index.md:
--------------------------------------------------------------------------------
1 | # 头像 Avatar
2 |
3 | 用作头像显示，可以为图片、图标或字符形式展示。
4 |
5 | ---
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/typography/index.md:
--------------------------------------------------------------------------------
1 | # 排版 Typography
2 |
3 | 用于展示标题、段落、文本内容。
4 |
5 | ---
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/empty/component/empty-image.md:
--------------------------------------------------------------------------------
1 | ### 自定义图片和文案
2 |
3 | 对不同章节的文本段落进行分割，默认为水平分割线，可在中间加入文字。
4 |
5 |
6 |
7 |
8 |
9 |
10 | No data, please reload!
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
24 |
25 |
26 |
27 | No data, please reload!
28 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Breadcrumb/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Breadcrumb from './Breadcrumb.vue';
3 | import _BreadcrumbItem from './BreadcrumbItem.vue';
4 |
5 | export type BreadcrumbInstance = InstanceType;
6 | export type BreadcrumbItemInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Breadcrumb = Object.assign(_Breadcrumb, {
10 | item: _BreadcrumbItem,
11 | install: (app: App) => {
12 | app.component('Yc' + _Breadcrumb.name, _Breadcrumb);
13 | app.component('Yc' + _BreadcrumbItem.name, _BreadcrumbItem);
14 | },
15 | });
16 |
17 | export { _BreadcrumbItem as BreadcrumbItem };
18 |
19 | export default Breadcrumb;
20 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Typography/TypographyText.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
22 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/steps/component/steps-dot.md:
--------------------------------------------------------------------------------
1 | ### 点状步骤条
2 |
3 | 通过设置 `type="dot"` ， 可以使用点状的步骤条。此模式没有 `small` 尺寸。
4 |
5 |
6 |
7 | Succeeded
8 | Processing
9 | Pending
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
23 | Succeeded
24 | Processing
25 | Pending
26 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/steps/component/steps-nav.md:
--------------------------------------------------------------------------------
1 | ### 导航步骤条
2 |
3 | 通过设置 `type="navigation"` 展示导航类型的步骤条。
4 |
5 |
6 |
7 | Succeeded
8 | Processing
9 | Pending
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
23 | Succeeded
24 | Processing
25 | Pending
26 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/descriptions/index.md:
--------------------------------------------------------------------------------
1 | # 描述列表 Descriptions
2 |
3 | 一般用于详情页的信息展示。
4 |
5 | ---
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Split/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 | import { Direction } from '@shared/type';
3 |
4 | export interface SplitProps {
5 | component?: string;
6 | direction?: Direction;
7 | size?: number | string;
8 | defaultSize?: number | string;
9 | min?: number;
10 | max?: number;
11 | disabled?: boolean;
12 | }
13 |
14 | export interface SplitEmits {
15 | (e: 'update:size', value: number): void;
16 | (e: 'moving-start'): void;
17 | (e: 'moving'): void;
18 | (e: 'moving-end'): void;
19 | }
20 |
21 | export interface SplitSlots {
22 | 'resize-trigger-icon'?: () => VNode[];
23 | 'resize-trigger'?: () => VNode[];
24 | first?: () => VNode[];
25 | second?: () => VNode[];
26 | }
27 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/watermark/component/watermark-image.md:
--------------------------------------------------------------------------------
1 | ### 图片水印
2 |
3 | 通过 `image` 设置图片水印。建议使用 2 倍或 3 倍图（支持Base64）。
4 |
5 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
27 |
28 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Skeleton/SkeletonShape.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
24 |
25 |
28 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/image/component/image-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 需要查看图片的时候，简单的设置 `src` 属性，就能获得一个有预览图片功能的组件。
4 |
5 |
6 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 | ```vue
20 |
21 |
24 |
25 | ```
26 |
27 |
28 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/message/index.md:
--------------------------------------------------------------------------------
1 | # 全局提示 Message
2 |
3 | 由用户的操作触发的轻量级全局反馈。
4 |
5 | ---
6 |
7 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/tag/component/tag-size.md:
--------------------------------------------------------------------------------
1 | ### 标签的尺寸
2 |
3 | 标签的大小分为：`small`、`medium`、`large` 三种，可以在不同场景下选择合适按钮尺寸。推荐及默认尺寸为 `medium`。
4 |
5 |
6 |
7 | Large
8 | Medium
9 | Small
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
23 | Large
24 | Medium
25 | Small
26 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/empty/component/empty-api.md:
--------------------------------------------------------------------------------
1 | ## API
2 |
3 | ### empty Props
4 |
5 |
6 |
7 | ### empty Slots
8 |
9 |
10 |
11 |
38 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/time-picker/component/picker-vmodel.md:
--------------------------------------------------------------------------------
1 | ### 双向绑定
2 |
3 | 支持 `v-model` 进行数据的双向绑定。
4 |
5 |
6 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
21 |
22 |
23 | ```vue
24 |
25 |
28 |
29 |
33 | ```
34 |
35 |
36 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Descriptions/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Descriptions from './Descriptions.vue';
3 | import _DescriptionsItem from './DescriptionsItem.vue';
4 |
5 | export type DescriptionsInstance = InstanceType;
6 | export type DescriptionsItemInstance = InstanceType;
7 | export * from './type';
8 |
9 | const Descriptions = Object.assign(_Descriptions, {
10 | item: _DescriptionsItem,
11 | install: (app: App) => {
12 | app.component('Yc' + _Descriptions.name, _Descriptions);
13 | app.component('Yc' + _DescriptionsItem.name, _DescriptionsItem);
14 | },
15 | });
16 | export { _DescriptionsItem as DescriptionsItem };
17 |
18 | export default Descriptions;
19 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/_shared/icons/IconError.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
16 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/_shared/icons/IconStar.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
14 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/date-picker/component/picker-week.md:
--------------------------------------------------------------------------------
1 | ### 周选择器
2 |
3 | 周选择器提供了一种选择星期的简单方法。也可以指定一周的起始日。
4 |
5 |
6 |
7 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 | ```vue
20 |
21 |
22 |
25 |
26 | ```
27 |
28 |
29 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/popconfirm/component/popconfirm-btn.md:
--------------------------------------------------------------------------------
1 | ### 自定义按钮
2 |
3 | 自定义按钮的文字或图标。
4 |
5 |
6 |
10 | Discard
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
27 | Discard
28 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Calendar/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 |
3 | export interface CalendarProps {
4 | modelValue?: Date;
5 | defaultValue?: Date;
6 | mode?: CalendarMode;
7 | defaultMode?: CalendarMode;
8 | modes?: CalendarMode[];
9 | }
10 |
11 | export interface CalendarEmits {
12 | (e: 'update:modelValue', value: Date): void;
13 | (e: 'update:mode', mode: CalendarMode): void;
14 | (e: 'change', value: Date): void;
15 | (e: 'panel-change', value: Date): void;
16 | }
17 |
18 | export interface CalendarSlots {
19 | header?: (scope: { year: number; month: number }) => VNode[];
20 | default?: (scope: { year: number; month: number; day: number }) => VNode[];
21 | }
22 |
23 | export type CalendarMode = 'month' | 'year';
24 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Scrollbar/type.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties, VNode } from 'vue';
2 | import { ClassName } from '@shared/type';
3 |
4 | export interface ScrollbarProps {
5 | type?: TackType;
6 | outerClass?: ClassName;
7 | outerStyle?: CSSProperties;
8 | thumbStyle?: CSSProperties;
9 | }
10 |
11 | export interface ScrollbarEmits {
12 | (e: 'scroll', left: number, top: number, ev: Event): void;
13 | }
14 |
15 | export interface ScrollbarSlots {
16 | default?: () => VNode[];
17 | }
18 |
19 | export interface ScrollbarExpose {
20 | scrollTo(options: ScrollOptions): void;
21 | scrollLeft(left: number): void;
22 | scrollTop(top: number): void;
23 | getScrollRef(): HTMLDivElement;
24 | }
25 |
26 | type TackType = 'track' | 'embed';
27 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Message/MessageList.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
13 |
14 |
15 |
16 |
24 |
25 |
28 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/input-number/component/input-button-mode.md:
--------------------------------------------------------------------------------
1 | ### 按钮模式
2 |
3 | 指定 `mode` 为 `button` 来使用带按钮的数字输入框。
4 |
5 |
6 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/time-picker/component/picker-step.md:
--------------------------------------------------------------------------------
1 | ### 定制步长
2 |
3 | 通过设置 `step`，可以定制需要显示的时、分、秒的步长。
4 |
5 |
6 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
23 | ```vue
24 |
25 |
33 |
34 | ```
35 |
36 |
37 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/calendar/component/calendar-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 展示和选择日历
4 |
5 |
6 |
7 | select: {{value}}
8 |
9 |
10 |
14 |
15 |
16 |
17 |
20 |
21 |
22 | ```vue
23 |
24 |
25 | select: {{ value }}
26 |
27 |
28 |
32 | ```
33 |
34 |
35 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/tabs/index.md:
--------------------------------------------------------------------------------
1 | # 标签页 Tabs
2 |
3 | 将内容组织同一视图中，一次可查看一个视图内容，查看其他内容可切换选项卡查看。
4 |
5 | ---
6 |
7 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/transfer/index.md:
--------------------------------------------------------------------------------
1 | # 数据穿梭框 Transfer
2 |
3 | 两栏布局的多选组件，将元素从一栏即时移到另一栏。
4 |
5 | ---
6 |
7 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Anchor/style/anchor.less:
--------------------------------------------------------------------------------
1 | .yc-anchor {
2 | position: relative;
3 | width: 150px;
4 | overflow: auto;
5 | .yc-anchor-line-slider {
6 | position: absolute;
7 | top: 0;
8 | left: 0;
9 | z-index: 1;
10 | width: 2px;
11 | height: 12px;
12 | background-color: rgb(var(--primary-6));
13 | transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
14 | }
15 | .yc-anchor-line-track {
16 | position: absolute;
17 | left: 0;
18 | top: 0;
19 | bottom: 0;
20 | width: 2px;
21 | background-color: var(--color-fill-3);
22 | }
23 |
24 | .yc-anchor-list {
25 | margin-left: 4px;
26 | display: flex;
27 | flex-direction: column;
28 | gap: 2px;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Dropdown/Dgroup.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 | {{ title }}
11 |
12 |
13 |
14 |
15 |
16 |
27 |
28 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/rate/component/rate-custom.md:
--------------------------------------------------------------------------------
1 | ### 自定义评分字符
2 |
3 | 可以将星星替换为其他字符，比如表情、字母，数字，字体图标甚至中文。
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Tabs/TabButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
14 |
15 |
16 |
29 |
30 |
33 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/_shared/utils/dependencies.ts:
--------------------------------------------------------------------------------
1 | export {
2 | unrefElement,
3 | createReusableTemplate,
4 | useEventListener,
5 | useResizeObserver,
6 | useDraggable,
7 | useElementBounding,
8 | useElementSize,
9 | useMediaQuery,
10 | useMutationObserver,
11 | useClipboard,
12 | onClickOutside,
13 | useTimeoutFn,
14 | onKeyStroke,
15 | useScroll,
16 | useDropZone,
17 | useFileDialog,
18 | } from '@vueuse/core';
19 |
20 | export { nanoid } from 'nanoid';
21 |
22 | export { default as BTween } from 'b-tween';
23 |
24 | export { default as dayjs, isDayjs } from 'dayjs';
25 |
26 | export type { UnitType, Dayjs } from 'dayjs';
27 |
28 | export { default as tinycolor } from 'tinycolor2';
29 |
30 | export type { ColorInput } from 'tinycolor2';
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/badge/index.md:
--------------------------------------------------------------------------------
1 | # 徽标 Badge
2 |
3 | 一般出现在图标或文字的右上角。提供及时、重要的信息提示。
4 |
5 | ---
6 |
7 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/input-tag/component/input-max-count.md:
--------------------------------------------------------------------------------
1 | ### 最多展示标签数量
2 |
3 | 设置最多展示标签数量。
4 |
5 |
6 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/time-picker/component/picker-disabled.md:
--------------------------------------------------------------------------------
1 | ### 禁用
2 |
3 | 禁用状态。
4 |
5 |
6 |
9 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 | ```vue
23 |
24 |
27 |
31 |
32 | ```
33 |
34 |
35 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Popover/style/popover.less:
--------------------------------------------------------------------------------
1 | .yc-popover {
2 | .yc-popover-popup-content {
3 | padding: 12px 16px;
4 | background-color: var(--color-bg-popup);
5 | border: 1px solid var(--color-neutral-3);
6 | border-radius: var(--border-radius-medium);
7 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
8 | color: var(--color-text-2);
9 | font-size: 14px;
10 | line-height: 1.5715;
11 |
12 | .yc-popover-title {
13 | margin-bottom: 4px;
14 | color: var(--color-text-1);
15 | font-weight: 500;
16 | font-size: 16px;
17 | }
18 | }
19 | .yc-popover-popup-arrow {
20 | z-index: 1;
21 | background-color: var(--color-bg-popup);
22 | border: 1px solid var(--color-neutral-3);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/trigger/index.md:
--------------------------------------------------------------------------------
1 | # 触发器 Trigger
2 |
3 | 用于对元素添加 hover, click, focus 等事件，并且弹出下拉框。
4 |
5 | ---
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/upload/component/upload-avatar.md:
--------------------------------------------------------------------------------
1 | ### 用户头像上传
2 |
3 | 点击上传用户头像，可使用 `beforeUpload` 限制用户上传的图片格式和大小。
4 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
25 |
29 |
30 |
31 | ```
32 |
33 |
34 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/carousel/index.md:
--------------------------------------------------------------------------------
1 | # 图片轮播 Carousel
2 |
3 | 用于展示多张图片、视频或内嵌框架等内容的循环播放，支持系统自动播放或用户手动切换。
4 |
5 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/_shared/icons/IconFaceSmile.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
16 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/_shared/utils/hooks.ts:
--------------------------------------------------------------------------------
1 | import { computed, ref, Ref } from 'vue';
2 | import { isUndefined } from './is';
3 |
4 | type OnSet = (...args: any) => any;
5 | type OnGet = (...args: any) => any;
6 |
7 | export const useControlValue = (
8 | modelValue: Ref,
9 | defaultValue: T,
10 | onSet: OnSet = (data: T) => data,
11 | onGet: OnGet = (data: T) => data
12 | ) => {
13 | const controlValue = ref(defaultValue);
14 | return computed({
15 | get() {
16 | const value = isUndefined(modelValue.value)
17 | ? controlValue.value
18 | : modelValue.value;
19 | return onGet(value);
20 | },
21 | set(value: T) {
22 | controlValue.value = value;
23 | onSet(value, controlValue);
24 | },
25 | });
26 | };
27 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/breadcrumb/component/breadcrumb-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 面包屑的基本用法。
4 |
5 |
6 |
7 | Home
8 | Channel
9 | News
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 | ```vue
21 |
22 |
23 | Home
24 | Channel
25 | News
26 |
27 |
28 | ```
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/list/index.md:
--------------------------------------------------------------------------------
1 | # 列表 List
2 |
3 | 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
4 |
5 | ---
6 |
7 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/rate/index.md:
--------------------------------------------------------------------------------
1 | # 评分 Rate
2 |
3 | 用于评分或打星的组件。
4 |
5 | ---
6 |
7 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/slider/component/slider-range.md:
--------------------------------------------------------------------------------
1 | ### 范围选择
2 |
3 | 通过设置 `range` 可开启范围选择，此时 `modelValue` 为数组。
4 |
5 |
6 |
10 |
11 |
12 |
16 |
17 |
18 |
19 |
22 |
23 |
24 | ```vue
25 |
26 |
30 |
31 |
32 |
36 | ```
37 |
38 |
39 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Card/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Card from './Card.vue';
3 | import _CardMeta from './CardMeta.vue';
4 | import _CardGrid from './CardGrid.vue';
5 |
6 | export type CardInstance = InstanceType;
7 | export type CardMetaInstance = InstanceType;
8 | export type CardGridInstance = InstanceType;
9 | export * from './type';
10 |
11 | const Card = Object.assign(_Card, {
12 | meta: _CardMeta,
13 | grid: _CardGrid,
14 | install: (app: App) => {
15 | app.component('Yc' + _Card.name, _Card);
16 | app.component('Yc' + _CardMeta.name, _CardMeta);
17 | app.component('Yc' + _CardGrid.name, _CardGrid);
18 | },
19 | });
20 |
21 | export { _CardMeta as CardMeta, _CardGrid as CardGrid };
22 |
23 | export default Card;
24 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/ResizeBox/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 | import { Position } from '@shared/type';
3 |
4 | export interface ResizeBoxProps {
5 | width?: number;
6 | height?: number;
7 | component?: string;
8 | directions?: Position[];
9 | }
10 |
11 | export interface ResizeBoxEmits {
12 | (e: 'update:width', value: number): void;
13 | (e: 'update:height', value: number): void;
14 | (e: 'moving-start', ev: MouseEvent): void;
15 | (e: 'moving', size: { width: number; height: number }, ev: MouseEvent): void;
16 | (e: 'moving-end', ev: MouseEvent): void;
17 | }
18 |
19 | export interface ResizeBoxSlots {
20 | default?: () => VNode[];
21 | 'resize-trigger'?: (scope: { direction: Position }) => VNode[];
22 | 'resize-trigger-icon'?: (scope: { direction: Position }) => VNode[];
23 | }
24 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Select/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Select from './Select.vue';
3 | import _Option from './Option.vue';
4 | import _Optgroup from './Optgroup.vue';
5 |
6 | export type SelectInstance = InstanceType;
7 | export type OptionInstance = InstanceType;
8 | export type OptgroupInstance = InstanceType;
9 | export * from './type';
10 |
11 | const Select = Object.assign(_Select, {
12 | option: _Option,
13 | group: _Optgroup,
14 | install: (app: App) => {
15 | app.component('Yc' + _Select.name, _Select);
16 | app.component('Yc' + _Option.name, _Option);
17 | app.component('Yc' + _Optgroup.name, _Optgroup);
18 | },
19 | });
20 |
21 | export { _Option as Option, _Optgroup as Optgroup };
22 |
23 | export default Select;
24 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/drawer/index.md:
--------------------------------------------------------------------------------
1 | # Drawer 抽屉
2 |
3 | 触发命令后，从屏幕一侧滑出的抽屉式的面板。
4 |
5 | ---
6 |
7 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Grid/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _Col from './GridCol.vue';
3 | import _Row from './GridRow.vue';
4 | import _Grid from './Grid.vue';
5 | import _GridItem from './GridItem.vue';
6 |
7 | export type RowInstance = InstanceType;
8 | export type ColInstance = InstanceType;
9 | export * from './type';
10 |
11 | const Grid = Object.assign(_Grid, {
12 | col: _Col,
13 | row: _Row,
14 | item: _GridItem,
15 | install: (app: App) => {
16 | app.component('Yc' + _Grid.name, _Grid);
17 | app.component('Yc' + _GridItem.name, _GridItem);
18 | app.component('Yc' + _Row.name, _Row);
19 | app.component('Yc' + _Col.name, _Col);
20 | },
21 | });
22 |
23 | export { _Col as GridCol, _Row as GridRow, _GridItem as GridItem };
24 |
25 | export default Grid;
26 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/color-picker/component/picker-disabled.md:
--------------------------------------------------------------------------------
1 | ### 禁用
2 |
3 | 设置 `disabled` 禁用选择器。
4 |
5 |
6 |
7 |
10 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 | ```vue
25 |
26 |
27 |
30 |
34 |
35 |
36 | ```
37 |
38 |
39 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/ColorPicker/type.ts:
--------------------------------------------------------------------------------
1 | import { Size } from '@shared/type';
2 | import { TriggerProps } from '@/components/Trigger';
3 |
4 | export interface ColorPickerProps {
5 | modelValue?: string;
6 | defaultValue?: string;
7 | format?: ColorFormat;
8 | size?: Size;
9 | showText?: boolean;
10 | showHistory?: boolean;
11 | showPreset?: boolean;
12 | disabled?: boolean;
13 | disabledAlpha?: boolean;
14 | hideTrigger?: boolean;
15 | triggerProps?: TriggerProps;
16 | historyColors?: string[];
17 | presetColors?: string[];
18 | }
19 |
20 | export interface ColorPickerEmits {
21 | (e: 'update:modelValue', value: string): void;
22 | (e: 'change', value: boolean): void;
23 | (e: 'popup-visible-change', value: boolean, color: string): void;
24 | }
25 |
26 | export type ColorFormat = 'hex' | 'rgb';
27 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/back-top/component/back-api.md:
--------------------------------------------------------------------------------
1 | ## API
2 |
3 | ### back-top Props
4 |
5 |
6 |
7 |
38 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Upload/UploadButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
25 |
26 |
29 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/link/component/link-hover.md:
--------------------------------------------------------------------------------
1 | ### 悬浮状态底色
2 |
3 | 可以通过 hoverable 属性设置是否在悬浮状态时隐藏底色。
4 |
5 |
6 |
7 | Link
8 | Link
9 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 | ```vue
20 |
21 |
22 | Link
27 | Link
33 |
34 |
35 | ```
36 |
37 |
38 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/time-picker/component/picker-confirm.md:
--------------------------------------------------------------------------------
1 | ### 跳过确认
2 |
3 | 跳过确认步骤，直接点击选择时间。
4 |
5 |
6 |
9 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 | ```vue
23 |
24 |
27 |
31 |
32 | ```
33 |
34 |
35 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/watermark/component/watermark-content.md:
--------------------------------------------------------------------------------
1 | ### 多行文本
2 |
3 | 通过 `content` 设置字符串数组可指定多行文字水印内容。
4 |
5 |
10 |
11 |
14 |
15 |
16 |
17 |
20 |
21 |
22 | ```vue
23 |
24 |
25 |
26 |
27 |
28 |
29 |
32 | ```
33 |
34 |
35 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/VerificationCode/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 | import { Size } from '@shared/type';
3 |
4 | export interface VerificationCodeProps {
5 | modelValue?: string;
6 | defaultValue?: string;
7 | length?: number;
8 | size?: Size;
9 | disabled?: boolean;
10 | masked?: boolean;
11 | readonly?: boolean;
12 | error?: boolean;
13 | separator?: Separator;
14 | formatter?: Formatter;
15 | }
16 |
17 | export interface VerificationCodeEmits {
18 | (e: 'update:modelValue', value: string): void;
19 | (e: 'input', value: string, ev: Event, i: number): void;
20 | (e: 'change', value: string): void;
21 | (e: 'finish', value: string): void;
22 | }
23 |
24 | type Separator = (index: number, character: string) => VNode;
25 |
26 | type Formatter = (inputValue: string, index: number, value: string) => string;
27 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/button/index.md:
--------------------------------------------------------------------------------
1 | # 按钮 Button
2 |
3 | 按钮用于开始一个即时操作。
4 |
5 | ---
6 |
7 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/popover/component/popover-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 鼠标移入或点击，弹出气泡，可对浮层上元素进行操作，承载复杂内容和操作。
4 |
5 |
6 |
7 | Hover
8 |
9 | Here is the text content
10 | Here is the text content
11 |
12 |
13 |
16 |
17 |
20 |
21 |
22 | ```vue
23 |
24 |
25 | Hover
26 |
27 | Here is the text content
28 | Here is the text content
29 |
30 |
31 |
32 | ```
33 |
34 |
35 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/scrollbar/component/scrollbar-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 滚动条组件基本用法。scrollbar 的默认插槽需要唯一的子元素。
4 |
5 |
6 |
7 |
9 | Content
10 |
11 |
12 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
24 |
26 | Content
27 |
28 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/upload/component/upload-basic-use.md:
--------------------------------------------------------------------------------
1 | ### 基本用法
2 |
3 | 上传组件的基本用法。
4 |
5 |
6 |
9 |
10 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 | ```vue
25 |
26 |
29 |
30 |
34 |
35 |
36 | ```
37 |
38 |
39 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Button/ButtonGroup.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
30 |
31 |
34 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/ConfigProvider/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
31 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/date-picker/component/picker-vmodel.md:
--------------------------------------------------------------------------------
1 | ### 双向绑定
2 |
3 | 通过 `v-model` 实现值的双向绑定
4 |
5 |
6 |
7 |
10 |
11 |
12 |
13 |
17 |
18 |
19 |
20 |
23 |
24 |
25 | ```vue
26 |
27 |
28 |
31 |
32 |
33 |
34 |
38 | ```
39 |
40 |
41 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/divider/component/divider-vertical.md:
--------------------------------------------------------------------------------
1 | ### 竖直分割线
2 |
3 | 指定 `direction` 为 `vertical` 即可使用竖直分割线。竖直分割线不能带文字。
4 |
5 |
6 |
7 | Item 1
8 |
9 | Item 2
10 |
11 | Item 3
12 |
13 |
16 |
17 |
20 |
21 |
22 | ```vue
23 |
24 |
25 | Item 1
26 |
27 | Item 2
28 |
29 | Item 3
30 |
31 |
32 | ```
33 |
34 |
35 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/notification/index.md:
--------------------------------------------------------------------------------
1 | # 通知提醒框 Notification
2 |
3 | 全局展示通知提醒，将信息及时有效的传达给用户。
4 |
5 | ---
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/time-picker/component/picker-format.md:
--------------------------------------------------------------------------------
1 | ### 定制格式
2 |
3 | 通过设置 `format`，可以定制需要显示的时、分、秒。
4 |
5 |
6 |
10 |
11 |
12 |
16 |
17 |
18 |
19 |
22 |
23 |
24 | ```vue
25 |
26 |
30 |
31 |
32 |
36 | ```
37 |
38 |
39 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/List/index.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import _List from './List.vue';
3 | import _ListItem from './ListItem.vue';
4 | import _ListItemMeta from './ListItemMeta.vue';
5 |
6 | export type ListInstance = InstanceType;
7 | export type ListItemInstance = InstanceType;
8 | export type ListItemMetaInstance = InstanceType;
9 | export * from './type';
10 |
11 | const List = Object.assign(_List, {
12 | item: _ListItem,
13 | ['item-meta']: _ListItemMeta,
14 | install: (app: App) => {
15 | app.component('Yc' + _List.name, _List);
16 | app.component('Yc' + _ListItem.name, _ListItem);
17 | app.component('Yc' + _ListItemMeta.name, _ListItemMeta);
18 | },
19 | });
20 |
21 | export { _ListItem as ListItem, _ListItemMeta as ListItemMeta };
22 |
23 | export default List;
24 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Tag/type.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 | import { Size } from '@shared/type';
3 |
4 | export interface TagProps {
5 | color?: string;
6 | size?: Exclude;
7 | bordered?: boolean;
8 | visible?: boolean;
9 | defaultVisible?: boolean;
10 | loading?: boolean;
11 | closable?: boolean;
12 | checkable?: boolean;
13 | checked?: boolean;
14 | defaultChecked?: boolean;
15 | nowrap?: boolean;
16 | }
17 |
18 | export interface TagEmits {
19 | (e: 'update:visible', value: boolean): void;
20 | (e: 'update:checked', value: boolean): void;
21 | (e: 'close', ev: MouseEvent, value?: string): void;
22 | (e: 'check', value: boolean, ev: MouseEvent): void;
23 | }
24 |
25 | export interface TagSlots {
26 | default?: () => VNode[];
27 | icon?: () => VNode[];
28 | 'close-icon'?: () => VNode[];
29 | }
30 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/tag/index.md:
--------------------------------------------------------------------------------
1 | # 标签 Tag
2 |
3 | 用于信息的选择、筛选、分类。用户通过标签进行信息反馈和交互操作。
4 |
5 | ---
6 |
7 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/web-vue/src/components/Comment/hooks/useContext.ts:
--------------------------------------------------------------------------------
1 | import {
2 | provide as _provide,
3 | inject,
4 | onBeforeUnmount,
5 | computed,
6 | Reactive,
7 | reactive,
8 | } from 'vue';
9 | import { nanoid } from '@shared/utils';
10 |
11 | const COMMENT_CONTEXT_KEY = 'comment-context';
12 | type CommentContext = {
13 | depths: Reactive>;
14 | };
15 |
16 | export default function useCommentContext() {
17 | const { depths } = inject(COMMENT_CONTEXT_KEY, {
18 | depths: reactive(new Map()),
19 | });
20 | const hasChildren = computed(() => depths.size > 1);
21 | const id = nanoid();
22 | depths.set(id, id);
23 | onBeforeUnmount(() => {
24 | depths.delete(id);
25 | });
26 | _provide(COMMENT_CONTEXT_KEY, {
27 | depths,
28 | });
29 | return {
30 | hasChildren,
31 | };
32 | }
33 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/.vitepress/hooks/useCodeExpand.ts:
--------------------------------------------------------------------------------
1 | import { watch, nextTick } from 'vue';
2 | import { useRoute } from 'vitepress';
3 |
4 | export default () => {
5 | // route信息
6 | const route = useRoute();
7 | watch(
8 | () => route.path,
9 | async () => {
10 | await nextTick();
11 | document?.querySelectorAll('details')?.forEach((details) => {
12 | const summary = details.querySelector('summary');
13 | if (!summary) {
14 | return;
15 | }
16 | summary.onclick = () => {
17 | if (details.hasAttribute('open')) {
18 | details.removeAttribute('open');
19 | } else {
20 | details.setAttribute('open', 'true');
21 | }
22 | };
23 | });
24 | },
25 | {
26 | immediate: true,
27 | }
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/alert/index.md:
--------------------------------------------------------------------------------
1 | # 警告提示 Alert
2 |
3 | 向用户显示警告的信息时，通过警告提示，展现需要关注的信息。
4 |
5 | ---
6 |
7 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/config-provider/component/provider-api.md:
--------------------------------------------------------------------------------
1 | ## API
2 |
3 | ### config-provider Props
4 |
5 |
6 |
7 |
38 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/tag/component/tag-close.md:
--------------------------------------------------------------------------------
1 | ### 可关闭标签
2 |
3 | 通过 `closable` 属性控制标签是否可关闭。可关闭标签可通过 `close` 事件执行一些关闭后操作，也可通过 `visible` 属性控制标签的显示或隐藏。
4 |
5 |
6 |
7 | Tag
8 |
9 |
10 |
11 |
12 | Tag
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 | ```vue
25 |
26 |
27 | Tag
28 |
29 |
30 |
31 |
32 | Tag
33 |
34 |
35 |
36 | ```
37 |
38 |
39 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/message/component/message-close.md:
--------------------------------------------------------------------------------
1 | ### 可关闭
2 |
3 | 设置 `closable` 来显示关闭按钮。
4 |
5 |
6 | Closeable Message
14 |
15 |
16 |
17 |
18 |
19 |
20 |
23 |
24 |
25 | ```vue
26 |
27 | Closeable Message
36 |
37 |
38 |
39 | ```
40 |
41 |
42 |
--------------------------------------------------------------------------------
/packages/web-docs/docs/components/radio/component/radio-group-dir.md:
--------------------------------------------------------------------------------
1 | ### 单选框组方向
2 |
3 | 通过设置 `direction="vertical"` 可以展示竖直的单选框组。
4 |
5 |
6 |
7 | A
8 | B
9 | C
10 | D
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | ```vue
22 |
23 |
24 | A
25 | B
26 | C
27 | D
28 |
29 |
30 | ```
31 |
32 |
33 |
--------------------------------------------------------------------------------