@antsoo-lib/components 0.1.9 → 0.1.12

package/src/anchor/style/index.ts

@@ -1,173 +0,0 @@
-import type { CSSObject } from '../../_util/cssinjs'
-import { resetComponent, textEllipsis } from '../../style'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export interface ComponentToken {}
-
-interface AnchorToken extends FullToken<'Anchor'> {
-  holderOffsetBlock: number
-  anchorPaddingBlock: number
-  anchorPaddingBlockSecondary: number
-  anchorPaddingInline: number
-  anchorBallSize: number
-  anchorTitleBlock: number
-}
-
-// ============================== Shared ==============================
-const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
-  const {
-    componentCls,
-    holderOffsetBlock,
-    motionDurationSlow,
-    lineWidthBold,
-    colorPrimary,
-    lineType,
-    colorSplit,
-  } = token
-
-  return {
-    [`${componentCls}-wrapper`]: {
-      marginBlockStart: -holderOffsetBlock,
-      paddingBlockStart: holderOffsetBlock,
-
-      // delete overflow: auto
-      // overflow: 'auto',
-
-      backgroundColor: 'transparent',
-
-      [componentCls]: {
-        ...resetComponent(token),
-        position: 'relative',
-        paddingInlineStart: lineWidthBold,
-
-        [`${componentCls}-link`]: {
-          paddingBlock: token.anchorPaddingBlock,
-          paddingInline: `${token.anchorPaddingInline}px 0`,
-
-          '&-title': {
-            ...textEllipsis,
-            position: 'relative',
-            display: 'block',
-            marginBlockEnd: token.anchorTitleBlock,
-            color: token.colorText,
-            transition: `all ${token.motionDurationSlow}`,
-
-            '&:only-child': {
-              marginBlockEnd: 0,
-            },
-          },
-
-          [`&-active > ${componentCls}-link-title`]: {
-            color: token.colorPrimary,
-          },
-
-          // link link
-          [`${componentCls}-link`]: {
-            paddingBlock: token.anchorPaddingBlockSecondary,
-          },
-        },
-      },
-
-      [`&:not(${componentCls}-wrapper-horizontal)`]: {
-        [componentCls]: {
-          '&::before': {
-            position: 'absolute',
-            left: {
-              _skip_check_: true,
-              value: 0,
-            },
-            top: 0,
-            height: '100%',
-            borderInlineStart: `${lineWidthBold}px ${lineType} ${colorSplit}`,
-            content: '" "',
-          },
-
-          [`${componentCls}-ink`]: {
-            position: 'absolute',
-            left: {
-              _skip_check_: true,
-              value: 0,
-            },
-            display: 'none',
-            transform: 'translateY(-50%)',
-            transition: `top ${motionDurationSlow} ease-in-out`,
-            width: lineWidthBold,
-            backgroundColor: colorPrimary,
-
-            [`&${componentCls}-ink-visible`]: {
-              display: 'inline-block',
-            },
-          },
-        },
-      },
-
-      [`${componentCls}-fixed ${componentCls}-ink ${componentCls}-ink`]: {
-        display: 'none',
-      },
-    },
-  }
-}
-
-const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
-  const { componentCls, motionDurationSlow, lineWidthBold, colorPrimary } = token
-
-  return {
-    [`${componentCls}-wrapper-horizontal`]: {
-      position: 'relative',
-
-      '&::before': {
-        position: 'absolute',
-        left: {
-          _skip_check_: true,
-          value: 0,
-        },
-        right: {
-          _skip_check_: true,
-          value: 0,
-        },
-        bottom: 0,
-        borderBottom: `1px ${token.lineType} ${token.colorSplit}`,
-        content: '" "',
-      },
-
-      [componentCls]: {
-        overflowX: 'scroll',
-        position: 'relative',
-        display: 'flex',
-        scrollbarWidth: 'none' /* Firefox */,
-
-        '&::-webkit-scrollbar': {
-          display: 'none' /* Safari and Chrome */,
-        },
-
-        [`${componentCls}-link:first-of-type`]: {
-          paddingInline: 0,
-        },
-
-        [`${componentCls}-ink`]: {
-          position: 'absolute',
-          bottom: 0,
-          transition: `left ${motionDurationSlow} ease-in-out, width ${motionDurationSlow} ease-in-out`,
-          height: lineWidthBold,
-          backgroundColor: colorPrimary,
-        },
-      },
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('Anchor', (token) => {
-  const { fontSize, fontSizeLG, padding, paddingXXS } = token
-
-  const anchorToken = mergeToken<AnchorToken>(token, {
-    holderOffsetBlock: paddingXXS,
-    anchorPaddingBlock: paddingXXS,
-    anchorPaddingBlockSecondary: paddingXXS / 2,
-    anchorPaddingInline: padding,
-    anchorTitleBlock: (fontSize / 14) * 3,
-    anchorBallSize: fontSizeLG / 2,
-  })
-  return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)]
-})

package/src/app/context.ts

@@ -1,45 +0,0 @@
-import { inject, provide, reactive } from 'vue'
-import type { InjectionKey } from 'vue'
-
-import type { ConfigOptions as MessageConfig, MessageInstance } from '../message/interface'
-import type { ModalStaticFunctions } from '../modal/confirm'
-import type { NotificationConfig, NotificationInstance } from '../notification/interface'
-
-export interface AppConfig {
-  message?: MessageConfig
-  notification?: NotificationConfig
-}
-
-export const AppConfigContextKey: InjectionKey<AppConfig> = Symbol('appConfigContext')
-
-export const useProvideAppConfigContext = (appConfigContext: AppConfig) => {
-  return provide(AppConfigContextKey, appConfigContext)
-}
-
-export const useInjectAppConfigContext = () => {
-  return inject(AppConfigContextKey, {})
-}
-
-type ModalType = Omit<ModalStaticFunctions, 'warn'>
-
-export interface useAppProps {
-  message: MessageInstance
-  notification: NotificationInstance
-  modal: ModalType
-}
-
-export const AppContextKey: InjectionKey<useAppProps> = Symbol('appContext')
-
-export const useProvideAppContext = (appContext: useAppProps) => {
-  return provide(AppContextKey, appContext)
-}
-
-const defaultAppContext: useAppProps = reactive({
-  message: {},
-  notification: {},
-  modal: {},
-} as useAppProps)
-
-export const useInjectAppContext = () => {
-  return inject(AppContextKey, defaultAppContext)
-}

package/src/app/index.en-US.md

@@ -1,131 +0,0 @@
----
-category: Components
-cols: 1
-type: Other
-title: App
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original
-tag: New
----
-
-Application wrapper for some global usages.
-
-## When To Use
-
-- Provide reset styles based on `.ant-app` element.
-- You could use static methods of `message/notification/Modal` form `useApp` without writing `contextHolder` manually.
-
-## API
-
-### App
-
-| Property     | Description                    | Type                                                               | Default | Version |
-| ------------ | ------------------------------ | ------------------------------------------------------------------ | ------- | ------- |
-| message      | Global config for Message      | [MessageConfig](/components/message/#messageconfig)                | -       | 4.x     |
-| notification | Global config for Notification | [NotificationConfig](/components/notification/#notificationconfig) | -       | 4.x     |
-
-## How to use
-
-### Basic usage
-
-App provides upstream and downstream method calls through `provide/inject`, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.
-
-```html
-/*myPage.vue*/
-<template>
-  <a-space>
-    <a-button type="primary" @click="showMessage">Open message</a-button>
-    <a-button type="primary" @click="showModal">Open modal</a-button>
-    <a-button type="primary" @click="showNotification">Open notification</a-button>
-  </a-space>
-</template>
-
-<script setup lang="ts">
-  import { App } from 'ant-design-vue'
-
-  const { message, modal, notification } = App.useApp()
-
-  const showMessage = () => {
-    message.success('Success!')
-  }
-
-  const showModal = () => {
-    modal.warning({
-      title: 'This is a warning message',
-      content: 'some messages...some messages...',
-    })
-  }
-
-  const showNotification = () => {
-    notification.info({
-      message: `Notification topLeft`,
-      description: 'Hello, Ant Design Vue!!',
-      placement: 'topLeft',
-    })
-  }
-</script>
-```
-
-Note: App.useApp must be available under App.
-
-#### Embedded usage scenarios (if not necessary, try not to do nesting)
-
-```html
-<a-app>
-  <a-space>
-    ...
-    <a-app>...</a-app>
-  </a-space>
-</a-app>
-```
-
-#### Sequence with ConfigProvider
-
-The App component can only use the token in the `ConfigProvider`, if you need to use the Token, the ConfigProvider and the App component must appear in pairs.
-
-```html
-<a-config-provider theme="{{ ... }}">
-  <a-app>...</a-app>
-</a-config-provider>
-```
-
-#### Global scene (pinia scene)
-
-```ts
-import { App } from 'ant-design-vue'
-import type { MessageInstance } from 'ant-design-vue/es/message/interface'
-import type { ModalStaticFunctions } from 'ant-design-vue/es/modal/confirm'
-import type { NotificationInstance } from 'ant-design-vue/es/notification/interface'
-
-export const useGlobalStore = defineStore('global', () => {
-  const message: MessageInstance = ref()
-  const notification: NotificationInstance = ref()
-  const modal: Omit<ModalStaticFunctions, 'warn'> = ref()
-  ;(() => {
-    const staticFunction = App.useApp()
-    message.value = staticFunction.message
-    modal.value = staticFunction.modal
-    notification.value = staticFunction.notification
-  })()
-
-  return { message, notification, modal }
-})
-```
-
-```html
-// sub page
-<template>
-  <a-space>
-    <a-button type="primary" @click="showMessage">Open message</a-button>
-  </a-space>
-</template>
-
-<script setup>
-  import { useGlobalStore } from '@/stores/global'
-
-  const global = useGlobalStore()
-  const showMessage = () => {
-    global.message.success('Success!')
-  }
-</script>
-```

package/src/app/index.tsx

@@ -1,84 +0,0 @@
-import { computed, defineComponent } from 'vue'
-import type { Plugin, App as TypeApp } from 'vue'
-
-import classNames from '../_util/classNames'
-import { initDefaultProps } from '../_util/props-util'
-import { objectType } from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import useMessage from '../message/useMessage'
-import useModal from '../modal/useModal'
-import useNotification from '../notification/useNotification'
-import type { AppConfig } from './context'
-import {
-  useInjectAppConfigContext,
-  useInjectAppContext,
-  useProvideAppConfigContext,
-  useProvideAppContext,
-} from './context'
-import useStyle from './style'
-
-export const AppProps = () => {
-  return {
-    rootClassName: String,
-    message: objectType<AppConfig['message']>(),
-    notification: objectType<AppConfig['notification']>(),
-  }
-}
-
-const useApp = () => {
-  return useInjectAppContext()
-}
-
-const App = defineComponent({
-  name: 'AApp',
-  props: initDefaultProps(AppProps(), {}),
-  setup(props, { slots }) {
-    const { prefixCls } = useConfigInject('app', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const customClassName = computed(() => {
-      return classNames(hashId.value, prefixCls.value, props.rootClassName)
-    })
-
-    const appConfig = useInjectAppConfigContext()
-    const mergedAppConfig = computed(() => ({
-      message: { ...appConfig.message, ...props.message },
-      notification: { ...appConfig.notification, ...props.notification },
-    }))
-    useProvideAppConfigContext(mergedAppConfig.value)
-
-    const [messageApi, messageContextHolder] = useMessage(mergedAppConfig.value.message)
-    const [notificationApi, notificationContextHolder] = useNotification(
-      mergedAppConfig.value.notification,
-    )
-    const [ModalApi, ModalContextHolder] = useModal()
-
-    const memoizedContextValue = computed(() => ({
-      message: messageApi,
-      notification: notificationApi,
-      modal: ModalApi,
-    }))
-    useProvideAppContext(memoizedContextValue.value)
-
-    return () => {
-      return wrapSSR(
-        <div class={customClassName.value}>
-          {ModalContextHolder()}
-          {messageContextHolder()}
-          {notificationContextHolder()}
-          {slots.default?.()}
-        </div>,
-      )
-    }
-  },
-})
-
-App.useApp = useApp
-
-App.install = function (app: TypeApp) {
-  app.component(App.name, App)
-}
-
-export default App as typeof App &
-  Plugin & {
-    readonly useApp: typeof useApp
-  }

package/src/app/index.zh-CN.md

@@ -1,132 +0,0 @@
----
-category: Components
-subtitle: 包裹组件
-cols: 1
-type: 其它
-title: App
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original
-tag: New
----
-
-新的包裹组件，提供重置样式和提供消费上下文的默认环境。
-
-## 何时使用
-
-- 提供可消费 provide/inject 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
-- 提供基于 `.ant-app` 的默认重置样式，解决原生元素没有 antd 规范样式的问题。
-
-## API
-
-### App
-
-| 参数         | 说明                           | 类型                                                                  | 默认值 | 版本 |
-| ------------ | ------------------------------ | --------------------------------------------------------------------- | ------ | ---- |
-| message      | App 内 Message 的全局配置      | [MessageConfig](/components/message-cn/#messageconfig)                | -      | 4.x  |
-| notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | -      | 4.x  |
-
-## 如何使用
-
-### 基础用法
-
-App 组件通过 `provide/inject` 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。
-
-```html
-/*myPage.vue*/
-<template>
-  <a-space>
-    <a-button type="primary" @click="showMessage">Open message</a-button>
-    <a-button type="primary" @click="showModal">Open modal</a-button>
-    <a-button type="primary" @click="showNotification">Open notification</a-button>
-  </a-space>
-</template>
-
-<script setup lang="ts">
-  import { App } from 'ant-design-vue'
-
-  const { message, modal, notification } = App.useApp()
-
-  const showMessage = () => {
-    message.success('Success!')
-  }
-
-  const showModal = () => {
-    modal.warning({
-      title: 'This is a warning message',
-      content: 'some messages...some messages...',
-    })
-  }
-
-  const showNotification = () => {
-    notification.info({
-      message: `Notification topLeft`,
-      description: 'Hello, Ant Design Vue!!',
-      placement: 'topLeft',
-    })
-  }
-</script>
-```
-
-注意：App.useApp 必须在 App 之下方可使用。
-
-#### 内嵌使用场景（如无必要，尽量不做嵌套）
-
-```html
-<a-app>
-  <a-space>
-    ...
-    <a-app>...</a-app>
-  </a-space>
-</a-app>
-```
-
-#### 与 ConfigProvider 先后顺序
-
-App 组件只能在 `ConfigProvider` 之下才能使用 Design Token， 如果需要使用其样式重置能力，则 ConfigProvider 与 App 组件必须成对出现。
-
-```html
-<a-config-provider theme="{{ ... }}">
-  <a-app>...</a-app>
-</a-config-provider>
-```
-
-#### 全局场景 (pinia 场景)
-
-```ts
-import { App } from 'ant-design-vue'
-import type { MessageInstance } from 'ant-design-vue/es/message/interface'
-import type { ModalStaticFunctions } from 'ant-design-vue/es/modal/confirm'
-import type { NotificationInstance } from 'ant-design-vue/es/notification/interface'
-
-export const useGlobalStore = defineStore('global', () => {
-  const message: MessageInstance = ref()
-  const notification: NotificationInstance = ref()
-  const modal: Omit<ModalStaticFunctions, 'warn'> = ref()
-  ;(() => {
-    const staticFunction = App.useApp()
-    message.value = staticFunction.message
-    modal.value = staticFunction.modal
-    notification.value = staticFunction.notification
-  })()
-
-  return { message, notification, modal }
-})
-```
-
-```html
-// sub page
-<template>
-  <a-space>
-    <a-button type="primary" @click="showMessage">Open message</a-button>
-  </a-space>
-</template>
-
-<script setup>
-  import { useGlobalStore } from '@/stores/global'
-
-  const global = useGlobalStore()
-  const showMessage = () => {
-    global.message.success('Success!')
-  }
-</script>
-```

package/src/app/style/index.ts

@@ -1,22 +0,0 @@
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook } from '../../theme/internal'
-
-export interface ComponentToken {}
-
-interface AppToken extends FullToken<'App'> {}
-
-// =============================== Base ===============================
-const genBaseStyle: GenerateStyle<AppToken> = (token) => {
-  const { componentCls, colorText, fontSize, lineHeight, fontFamily } = token
-  return {
-    [componentCls]: {
-      color: colorText,
-      fontSize,
-      lineHeight,
-      fontFamily,
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('App', (token) => [genBaseStyle(token)])

package/src/auto-complete/OptGroup.tsx

@@ -1,15 +0,0 @@
-import type { FunctionalComponent } from 'vue'
-
-import type { DefaultOptionType } from '../select'
-
-export type OptGroupProps = Omit<DefaultOptionType, 'options'>
-
-export interface OptionGroupFC extends FunctionalComponent<OptGroupProps> {
-  /** Legacy for check if is a Option Group */
-  isSelectOptGroup: boolean
-}
-
-const OptGroup: OptionGroupFC = () => null
-OptGroup.isSelectOptGroup = true
-OptGroup.displayName = 'AAutoCompleteOptGroup'
-export default OptGroup

package/src/auto-complete/Option.tsx

@@ -1,18 +0,0 @@
-import type { FunctionalComponent } from 'vue'
-
-import type { DefaultOptionType } from '../vc-select/Select'
-
-export interface OptionProps extends Omit<DefaultOptionType, 'label'> {
-  /** Save for customize data */
-  [prop: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-export interface OptionFC extends FunctionalComponent<OptionProps> {
-  /** Legacy for check if is a Option Group */
-  isSelectOption: boolean
-}
-
-const Option: OptionFC = () => null
-Option.isSelectOption = true
-Option.displayName = 'AAutoCompleteOption'
-export default Option