diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts index a57b4dd6d..db7ca75f6 100644 --- a/packages/components/config/src/defaultConfig.ts +++ b/packages/components/config/src/defaultConfig.ts @@ -136,6 +136,31 @@ export const defaultConfig: GlobalConfig = { size: 'md', borderless: true, }, + loadingBar: { + mask: false, + animation: { + loading: { + duration: 3000, + progress: { + start: 0, + end: 80, + }, + }, + finish: { + duration: 300, + progress: { + end: 100, + }, + }, + error: { + duration: 400, + progress: { + start: 0, + end: 100, + }, + }, + }, + }, image: { preview: true, }, diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts index faddb181d..2b3405b8a 100644 --- a/packages/components/config/src/types.ts +++ b/packages/components/config/src/types.ts @@ -15,9 +15,10 @@ import type { ButtonSize } from '@idux/components/button' import type { CardSize } from '@idux/components/card' import type { CarouselDotPlacement, CarouselDotTrigger } from '@idux/components/carousel' import type { CascaderData } from '@idux/components/cascader' -import type { DatePickerType } from '@idux/components/date-picker/src/types' +import type { DatePickerType } from '@idux/components/date-picker' import type { FormLabelAlign, FormLayout, FormSize } from '@idux/components/form' import type { ListSize } from '@idux/components/list' +import type { LoadingBarAnimation } from '@idux/components/loading-bar' import type { Locale } from '@idux/components/locales' import type { MenuData, MenuTheme } from '@idux/components/menu' import type { MessageType } from '@idux/components/message' @@ -62,6 +63,7 @@ export interface GlobalConfig { input: InputConfig inputNumber: InputNumberConfig list: ListConfig + loadingBar: LoadingBarConfig image: ImageConfig imageViewer: ImageViewerConfig menu: MenuConfig @@ -250,6 +252,11 @@ export interface ListConfig { borderless: boolean } +export interface LoadingBarConfig { + mask: boolean + animation: LoadingBarAnimation +} + export interface ImageConfig { preview: boolean } diff --git a/packages/components/default.less b/packages/components/default.less index 87495daf8..b5b1a0171 100644 --- a/packages/components/default.less +++ b/packages/components/default.less @@ -68,3 +68,4 @@ @import './typography/style/themes/default.less'; @import './upload/style/themes/default.less'; @import './watermark/style/themes/default.less'; +@import './loading-bar/style/themes/default.less'; diff --git a/packages/components/index.ts b/packages/components/index.ts index dccd8dc9d..448f368c7 100644 --- a/packages/components/index.ts +++ b/packages/components/index.ts @@ -35,6 +35,7 @@ import { IxInput } from '@idux/components/input' import { IxInputNumber } from '@idux/components/input-number' import { IxLayout, IxLayoutContent, IxLayoutFooter, IxLayoutHeader, IxLayoutSider } from '@idux/components/layout' import { IxList, IxListItem } from '@idux/components/list' +import { IxLoadingBarProvider } from '@idux/components/loading-bar' import { IxMenu, IxMenuDivider, IxMenuItem, IxMenuItemGroup, IxMenuSub } from '@idux/components/menu' import { IxMessage, IxMessageProvider } from '@idux/components/message' import { IxModal, IxModalProvider } from '@idux/components/modal' @@ -117,6 +118,7 @@ const components = [ IxLayoutSider, IxList, IxListItem, + IxLoadingBarProvider, IxMenu, IxMenuDivider, IxMenuItem, @@ -216,6 +218,7 @@ export * from '@idux/components/input' export * from '@idux/components/input-number' export * from '@idux/components/layout' export * from '@idux/components/list' +export * from '@idux/components/loading-bar' export * from '@idux/components/locales' export * from '@idux/components/menu' export * from '@idux/components/message' diff --git a/packages/components/loading-bar/__tests__/__snapshots__/loadingBar.spec.ts.snap b/packages/components/loading-bar/__tests__/__snapshots__/loadingBar.spec.ts.snap new file mode 100644 index 000000000..b43b1f619 --- /dev/null +++ b/packages/components/loading-bar/__tests__/__snapshots__/loadingBar.spec.ts.snap @@ -0,0 +1,6 @@ +// Vitest Snapshot v1 + +exports[`LoadingBarProvider > render work 1`] = ` +" +<button>ok</button>" +`; diff --git a/packages/components/loading-bar/__tests__/loadingBar.spec.ts b/packages/components/loading-bar/__tests__/loadingBar.spec.ts new file mode 100644 index 000000000..5e1587d2c --- /dev/null +++ b/packages/components/loading-bar/__tests__/loadingBar.spec.ts @@ -0,0 +1,61 @@ +/* eslint-disable vue/one-component-per-file */ +import { MountingOptions, VueWrapper, flushPromises, mount } from '@vue/test-utils' + +import { renderWork } from '@tests' + +import IxLoadingBarProvider from '../src/LoadingBarProvider' +import { LoadingBarProviderInstance, LoadingBarProviderProps } from '../src/types' + +describe('LoadingBarProvider', () => { + const sleepMs = (ms = 1000) => new Promise(r => setTimeout(() => r(), ms)) + const LoadingBarMount = (options?: MountingOptions>) => + mount(IxLoadingBarProvider, { ...options }) as VueWrapper + + renderWork(IxLoadingBarProvider, { + props: {}, + slots: { default: () => `` }, + }) + + test('render', async () => { + LoadingBarMount({ props: {}, slots: { default: () => `` } }) + await flushPromises() + + const containerEl = document.querySelector('.ix-loading-bar-container') as HTMLElement + expect(containerEl).not.toBeNull() + + const loadingBarEl = document.querySelector('.ix-loading-bar') as HTMLElement + expect(loadingBarEl).not.toBeNull() + expect(window.getComputedStyle(loadingBarEl).display).toBe('none') + + const maskEl = document.querySelector('.ix-loading-bar-mask') as HTMLElement + expect(maskEl).not.toBeNull() + }) + + test('start', async () => { + const wrapper = LoadingBarMount() + await flushPromises() + const loadingBarEl = document.querySelector('.ix-loading-bar') as HTMLElement + expect(loadingBarEl).not.toBeNull() + wrapper.vm.start() + + await sleepMs(300) + expect(window.parseInt(window.getComputedStyle(loadingBarEl).maxWidth)).toBeLessThanOrEqual(80) + expect(document.querySelector('.ix-loading-bar--loading')).not.toBeNull() + wrapper.vm.finish() + + await sleepMs(500) + expect(window.parseInt(window.getComputedStyle(loadingBarEl).maxWidth)).toBeLessThanOrEqual(100) + }) + + test('error', async () => { + const wrapper = LoadingBarMount() + await flushPromises() + const loadingBarEl = document.querySelector('.ix-loading-bar') as HTMLElement + expect(loadingBarEl).not.toBeNull() + wrapper.vm.error() + await sleepMs(100) + expect(document.querySelector('.ix-loading-bar--error')).not.toBeNull() + await sleepMs() + expect(window.parseInt(window.getComputedStyle(loadingBarEl).maxWidth)).toBeLessThanOrEqual(100) + }) +}) diff --git a/packages/components/loading-bar/__tests__/useLoadingBar.spec.ts b/packages/components/loading-bar/__tests__/useLoadingBar.spec.ts new file mode 100644 index 000000000..458524e51 --- /dev/null +++ b/packages/components/loading-bar/__tests__/useLoadingBar.spec.ts @@ -0,0 +1,41 @@ +/* eslint-disable vue/one-component-per-file */ + +import { mount } from '@vue/test-utils' +import { defineComponent } from 'vue' + +import IxLoadingBarProvider from '../src/LoadingBarProvider' +import { LoadingBarProviderInstance } from '../src/types' +import { useLoadingBar } from '../src/useLoadingBar' + +describe('LoadingBarProvider', () => { + test('no provider', async () => { + const Test = defineComponent({ + setup() { + useLoadingBar() + }, + }) + expect(() => mount(Test)).toThrowError(/IxLoadingBarProvider/) + }) + + test('provider', async () => { + const Test = defineComponent({ + setup(props, { expose }) { + expose(useLoadingBar()) + }, + render() { + return null + }, + }) + const wrapper = mount({ + template: '', + components: { + IxLoadingBarProvider, + Test, + }, + }) + const instance = wrapper.vm.$refs['test'] as LoadingBarProviderInstance + expect(instance.start).not.toBeNull() + expect(instance.finish).not.toBeNull() + expect(instance.error).not.toBeNull() + }) +}) diff --git a/packages/components/loading-bar/demo/Basic.md b/packages/components/loading-bar/demo/Basic.md new file mode 100644 index 000000000..0ddf241aa --- /dev/null +++ b/packages/components/loading-bar/demo/Basic.md @@ -0,0 +1,14 @@ +--- +order: 0 +title: + zh: 基本使用 + en: Basic usage +--- + +## zh + +最简单的用法。 + +## en + +The simplest usage. diff --git a/packages/components/loading-bar/demo/Basic.vue b/packages/components/loading-bar/demo/Basic.vue new file mode 100644 index 000000000..c7b3a5a15 --- /dev/null +++ b/packages/components/loading-bar/demo/Basic.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/components/loading-bar/docs/Design.zh.md b/packages/components/loading-bar/docs/Design.zh.md new file mode 100644 index 000000000..933801767 --- /dev/null +++ b/packages/components/loading-bar/docs/Design.zh.md @@ -0,0 +1,3 @@ +## 组件定义 + +## 使用场景 diff --git a/packages/components/loading-bar/docs/Index.zh.md b/packages/components/loading-bar/docs/Index.zh.md new file mode 100644 index 000000000..8c61ea37c --- /dev/null +++ b/packages/components/loading-bar/docs/Index.zh.md @@ -0,0 +1,40 @@ +--- +category: components +type: 反馈 +order: 0 +title: LoadingBar +subtitle: 加载进度条 +--- + +## API + +使用 LoadingBar 只有一种方法，在 IxLoadingBarProvider 组件里面嵌套使用 `useLoadingBar` + +### IxLoadingProviderBar + +如果你想通过 `useLoadingBar` 来创建提示框，则你需要把组件包裹在 `IxLoadingBarProvider` 内部，因为这样才不会丢失应用的上下文信息。 + +#### LoadingBarProviderProps + +| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 | +| --- | --- | --- | --- | --- | --- | +| mask | `start()`后是否同时显示遮罩 | - | false | ✅ | - | + +#### LoadingBarProviderMethods + +| 名称 | 说明 | 参数类型 | 备注 | +| --- | --- | --- | --- | +| `start` | 开始 | (LoadingBarOptions) => void | 加载并显示进度条到80%暂停 | +| `finish` | 结束 | - | 继续加载进度条到100%，然后隐藏 | +| `error` | 错误 | - | 加载并显示，进度条继续加载到100，然后隐藏 | + + +## 主题变量 + +| 名称 | default | seer | 备注 | +| --- | --- | --- | --- | +|`@loading-bar-height` | `2px` | - | - | +|`@loading-bar-loading-color` | `@color-primary` | - | - | +|`@loading-bar-error-color` | `@color-error`| - | - | + + diff --git a/packages/components/loading-bar/index.ts b/packages/components/loading-bar/index.ts new file mode 100644 index 000000000..6a071390c --- /dev/null +++ b/packages/components/loading-bar/index.ts @@ -0,0 +1,25 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { LoadingBarProviderComponent } from './src/types' + +import LoadingBarProvider from './src/LoadingBarProvider' + +const IxLoadingBarProvider = LoadingBarProvider as unknown as LoadingBarProviderComponent + +export { IxLoadingBarProvider } + +export { useLoadingBar } from './src/useLoadingBar' + +export type { + LoadingBarOptions, + LoadingBarAnimation, + LoadingBarProviderInstance, + LoadingBarProviderPublicProps as LoadingBarProviderProps, + LoadingBarProviderComponent, + LoadingBarProviderRef, +} from './src/types' diff --git a/packages/components/loading-bar/src/LoadingBarProvider.tsx b/packages/components/loading-bar/src/LoadingBarProvider.tsx new file mode 100644 index 000000000..8e901eb93 --- /dev/null +++ b/packages/components/loading-bar/src/LoadingBarProvider.tsx @@ -0,0 +1,170 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import { Ref, Transition, computed, defineComponent, nextTick, normalizeClass, provide, ref } from 'vue' + +import { CdkPortal } from '@idux/cdk/portal' +import { cancelRAF, rAF } from '@idux/cdk/utils' +import { ɵMask } from '@idux/components/_private/mask' +import { LoadingBarConfig, useGlobalConfig } from '@idux/components/config' + +import { loadingBarProviderToken } from './token' +import { + LoadingBarOptions, + LoadingBarProviderProps, + LoadingBarProviderRef, + StatusType, + loadingBarProviderProps, +} from './types' + +export default defineComponent({ + name: 'IxLoadingBarProvider', + inheritAttrs: false, + props: loadingBarProviderProps, + setup(props, { slots, expose }) { + const common = useGlobalConfig('common') + const mergedPrefixCls = computed(() => `${common.prefixCls}-loading-bar`) + const config = useGlobalConfig('loadingBar') + + const { start, finish, error, status, visible, progress, mask } = useLoadingBarProvider(props, config) + + const classes = computed(() => { + const prefixCls = mergedPrefixCls.value + return normalizeClass({ + [`${prefixCls}`]: true, + [`${prefixCls}--${status.value}`]: !!status.value, + }) + }) + const apis = { start, finish, error } + + provide(loadingBarProviderToken, apis) + expose(apis) + + return () => { + return ( + <> + + <ɵMask class={`${mergedPrefixCls.value}-mask`} visible={visible.value && mask.value} /> + +
+ + + {slots.default?.()} + + ) + } + }, +}) + +interface LoadingBarProviderBindings extends LoadingBarProviderRef { + visible: Ref + status: Ref + mask: Ref + progress: Ref +} + +const useLoadingBarProvider = ( + props: LoadingBarProviderProps, + config: LoadingBarConfig, +): LoadingBarProviderBindings => { + const { loading: loadingConfig, error: errorConfig, finish: finishConfig } = config.animation + const maskEnable = computed(() => props.mask ?? config.mask) + const animation = (callback: (elapsed: number) => void) => { + let start = 0 + return async function (t: number) { + if (start === 0) { + start = t + } + callback(t - start) + } + } + + const visible = ref(false) + const status = ref('finish') + const mask = ref(false) + const progress = ref(0) + + let raf: number + const start = (options?: LoadingBarOptions) => { + raf && cancelRAF(raf) + + progress.value = loadingConfig.progress.start || 0 + status.value = 'loading' + visible.value = true + mask.value = options?.mask ?? maskEnable.value + + const animationFn = animation(elapsed => { + if (elapsed < loadingConfig.duration) { + progress.value = (elapsed / loadingConfig.duration) * loadingConfig.progress.end + raf = rAF(animationFn) + } else { + cancelRAF(raf) + progress.value = loadingConfig.progress.end + } + }) + raf = rAF(animationFn) + } + const error = () => { + raf && cancelRAF(raf) + + progress.value = errorConfig.progress.start || 0 + status.value = 'error' + visible.value = true + mask.value = maskEnable.value + + const animationFn = animation(async elapsed => { + if (elapsed < errorConfig.duration) { + progress.value = (elapsed / errorConfig.duration) * errorConfig.progress.end + + raf = rAF(animationFn) + } else { + cancelRAF(raf) + progress.value = errorConfig.progress.end + + await nextTick() + visible.value = false + } + }) + raf = rAF(animationFn) + } + + const finish = () => { + if (status.value !== 'loading') { + return + } + raf && cancelRAF(raf) + + const loadingProgress = Math.min(progress.value, loadingConfig.progress.end) + + const animationFn = animation(async elapsed => { + if (elapsed < finishConfig.duration) { + progress.value = + loadingProgress + (elapsed / finishConfig.duration) * (finishConfig.progress.end - loadingProgress) + raf = rAF(animationFn) + } else { + cancelRAF(raf) + progress.value = finishConfig.progress.end + + await nextTick() + mask.value = maskEnable.value + visible.value = false + status.value = 'finish' + } + }) + raf = rAF(animationFn) + } + + return { + start, + error, + finish, + status, + visible, + progress, + mask, + } +} diff --git a/packages/components/loading-bar/src/token.ts b/packages/components/loading-bar/src/token.ts new file mode 100644 index 000000000..c8a931fd3 --- /dev/null +++ b/packages/components/loading-bar/src/token.ts @@ -0,0 +1,11 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { LoadingBarProviderRef } from './types' +import type { InjectionKey } from 'vue' + +export const loadingBarProviderToken: InjectionKey = Symbol('loadingBarProviderToken') diff --git a/packages/components/loading-bar/src/types.ts b/packages/components/loading-bar/src/types.ts new file mode 100644 index 000000000..4b8024f7b --- /dev/null +++ b/packages/components/loading-bar/src/types.ts @@ -0,0 +1,43 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/utils' +import type { DefineComponent } from 'vue' + +export const STATUS_TYPE = ['loading', 'finish', 'error'] as const + +export type StatusType = typeof STATUS_TYPE[number] + +export interface LoadingBarOptions { + mask?: boolean +} + +export const loadingBarProviderProps = { + mask: { + type: Boolean, + default: false, + }, +} + +export interface LoadingBarStatusTypeAnimation { + duration: number + progress: { + start?: number + end: number + } +} +export type LoadingBarAnimation = Record + +export interface LoadingBarProviderRef { + start: (options?: LoadingBarOptions) => void + error: () => void + finish: () => void +} +export type LoadingBarProviderProps = ExtractInnerPropTypes +export type LoadingBarProviderPublicProps = ExtractPublicPropTypes +export type LoadingBarProviderComponent = DefineComponent +export type LoadingBarProviderInstance = InstanceType> diff --git a/packages/components/loading-bar/src/useLoadingBar.ts b/packages/components/loading-bar/src/useLoadingBar.ts new file mode 100644 index 000000000..2b88ecf88 --- /dev/null +++ b/packages/components/loading-bar/src/useLoadingBar.ts @@ -0,0 +1,22 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { LoadingBarProviderRef } from './types' + +import { inject } from 'vue' + +import { throwError } from '@idux/cdk/utils' + +import { loadingBarProviderToken } from './token' + +export const useLoadingBar = (): LoadingBarProviderRef => { + const providerRef = inject(loadingBarProviderToken, null) + if (providerRef === null) { + return throwError('cbomponents/loading-bar', ' not found.') + } + return providerRef +} diff --git a/packages/components/loading-bar/style/index.less b/packages/components/loading-bar/style/index.less new file mode 100644 index 000000000..4417b34a8 --- /dev/null +++ b/packages/components/loading-bar/style/index.less @@ -0,0 +1,26 @@ +@import '../../style/mixins/reset.less'; + +.@{loading-bar-prefix} { + .reset-component(); + + position: fixed; + left: 0; + top: 0; + right: 0; + height: @loading-bar-height; + width: 100%; + z-index: @zindex-l5-1 + 1; + transition: none; + + &.@{loading-bar-prefix}--loading, + &.@{loading-bar-prefix}--finish { + background: @loading-bar-loading-color; + } + + &.@{loading-bar-prefix}--error { + background: @color-error; + } + &-mask { + z-index: @zindex-l5-1; + } +} diff --git a/packages/components/loading-bar/style/themes/default.less b/packages/components/loading-bar/style/themes/default.less new file mode 100644 index 000000000..a66443560 --- /dev/null +++ b/packages/components/loading-bar/style/themes/default.less @@ -0,0 +1,4 @@ +@import '../../../style/themes/default.less'; +@import './default.variable.less'; + +@import '../index.less'; diff --git a/packages/components/loading-bar/style/themes/default.ts b/packages/components/loading-bar/style/themes/default.ts new file mode 100644 index 000000000..47fe656f7 --- /dev/null +++ b/packages/components/loading-bar/style/themes/default.ts @@ -0,0 +1,3 @@ +// style dependencies + +import './default.less' diff --git a/packages/components/loading-bar/style/themes/default.variable.less b/packages/components/loading-bar/style/themes/default.variable.less new file mode 100644 index 000000000..66fe24c5a --- /dev/null +++ b/packages/components/loading-bar/style/themes/default.variable.less @@ -0,0 +1,3 @@ +@loading-bar-height: 2px; +@loading-bar-loading-color: @color-primary; +@loading-bar-error-color: @color-error; diff --git a/packages/components/loading-bar/style/themes/seer.less b/packages/components/loading-bar/style/themes/seer.less new file mode 100644 index 000000000..32bf707c1 --- /dev/null +++ b/packages/components/loading-bar/style/themes/seer.less @@ -0,0 +1,4 @@ +@import '../../../style/themes/seer.less'; +@import './seer.variable.less'; + +@import '../index.less'; diff --git a/packages/components/loading-bar/style/themes/seer.ts b/packages/components/loading-bar/style/themes/seer.ts new file mode 100644 index 000000000..63a4fe708 --- /dev/null +++ b/packages/components/loading-bar/style/themes/seer.ts @@ -0,0 +1,2 @@ +// style dependencies +import './seer.less' diff --git a/packages/components/loading-bar/style/themes/seer.variable.less b/packages/components/loading-bar/style/themes/seer.variable.less new file mode 100644 index 000000000..498793af1 --- /dev/null +++ b/packages/components/loading-bar/style/themes/seer.variable.less @@ -0,0 +1 @@ +@import './default.variable.less'; diff --git a/packages/components/seer.less b/packages/components/seer.less index f1284131c..5dd7f8b07 100644 --- a/packages/components/seer.less +++ b/packages/components/seer.less @@ -36,6 +36,7 @@ @import './input-number/style/themes/seer.less'; @import './layout/style/themes/seer.less'; @import './list/style/themes/seer.less'; +@import './loading-bar/style/themes/seer.less'; @import './menu/style/themes/seer.less'; @import './message/style/themes/seer.less'; @import './modal/style/themes/seer.less'; diff --git a/packages/components/style/variable/prefix.less b/packages/components/style/variable/prefix.less index ec98511a7..88f637c6d 100644 --- a/packages/components/style/variable/prefix.less +++ b/packages/components/style/variable/prefix.less @@ -79,6 +79,7 @@ @result-prefix: ~'@{idux-prefix}-result'; @spin-prefix: ~'@{idux-prefix}-spin'; @progress-prefix: ~'@{idux-prefix}-progress'; +@loading-bar-prefix: ~'@{idux-prefix}-loading-bar'; @drawer-prefix: ~'@{idux-prefix}-drawer'; @modal-prefix: ~'@{idux-prefix}-modal'; diff --git a/packages/components/style/variable/zindex.less b/packages/components/style/variable/zindex.less index a655ffbed..3545b72cc 100644 --- a/packages/components/style/variable/zindex.less +++ b/packages/components/style/variable/zindex.less @@ -11,3 +11,4 @@ @zindex-l4-4: 1040; // popoconfirm @zindex-l4-5: 1050; // tooltip @zindex-l4-6: 1060; // image +@zindex-l5-1: 10010; // loading-bar diff --git a/packages/components/types.d.ts b/packages/components/types.d.ts index 959accdc1..e75ef8668 100644 --- a/packages/components/types.d.ts +++ b/packages/components/types.d.ts @@ -42,6 +42,7 @@ import type { LayoutSiderComponent, } from '@idux/components/layout' import type { ListComponent, ListItemComponent } from '@idux/components/list' +import type { LoadingBarProviderComponent } from '@idux/components/loading-bar' import type { MenuComponent, MenuDividerComponent, @@ -137,6 +138,7 @@ declare module 'vue' { IxMenuSub: MenuSubComponent IxMessage: MessageComponent IxMessageProvider: MessageProviderComponent + IxLoadingBarProvider: LoadingBarProviderComponent IxModal: ModalComponent IxModalProvider: ModalProviderComponent IxNotification: NotificationComponent diff --git a/packages/site/src/App.vue b/packages/site/src/App.vue index 748609289..58bbe04e0 100644 --- a/packages/site/src/App.vue +++ b/packages/site/src/App.vue @@ -1,59 +1,61 @@