@antsoo-lib/components 0.1.11 → 0.1.12

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

@@ -1,122 +0,0 @@
----
-category: Components
-type: Layout
-cols: 1
-title: Layout
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAAAAAAAAAAAADrJ8AQ/original
----
-
-Handling the overall layout of a page.
-
-## Specification
-
-### Size
-
-The first level navigation is inclined left near a logo, and the secondary menu is inclined right.
-
-- Top Navigation (almost systems): the height of the first level navigation `64px`, the second level navigation `48px`.
-- Top Navigation(contents page): the height of the first level navigation `80px`, the second level navigation `56px`.
-- Calculation formula of a top navigation: `48+8n`.
-- Calculation formula of an aside navigation: `200+8n`.
-
-### Interaction rules
-
-- The first level navigation and the last level navigation should be distinguishable by visualization;
-- The current item should have the highest priority of visualization;
-- When the current navigation item is collapsed, the style of the current navigation item is applied to its parent level;
-- The left side navigation bar has support for both the accordion and expanding styles; you can choose the one that fits your case the best.
-
-## Visualization rules
-
-Style of a navigation should conform to its level.
-
-- **Emphasis by colorblock**
-
-  When background color is a deep color, you can use this pattern for the parent level navigation item of the current page.
-
-- **The highlight match stick**
-
-  When background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.
-
-- **Highlighted font**
-
-  From the visualization aspect, a highlighted font is stronger than colorblock; this pattern is often used for the parent level of the current item.
-
-- **Enlarge the size of the font**
-
-  `12px`, `14px` is a standard font size of navigations, `14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
-
-## Component Overview
-
-- `Layout`: The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` itself can be nested, and can be placed in any parent container.
-- `Header`: The top layout with the default style, in which any element can be nested, and must be placed in `Layout`.
-- `Sider`: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in `Layout`.
-- `Content`: The content layout with the default style, in which any element can be nested, and must be placed in `Layout`.
-- `Footer`: The bottom layout with the default style, in which any element can be nested, and must be placed in `Layout`.
-
-> Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).
-
-## API
-
-```jsx
-<Layout>
-  <Header>header</Header>
-  <Layout>
-    <Sider>left sidebar</Sider>
-    <Content>main content</Content>
-    <Sider>right sidebar</Sider>
-  </Layout>
-  <Footer>footer</Footer>
-</Layout>
-```
-
-### Layout
-
-The wrapper.
-
-| Property | Description                                                                                               | Type           | Default |
-| -------- | --------------------------------------------------------------------------------------------------------- | -------------- | ------- |
-| class    | container className                                                                                       | string         | -       |
-| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean        | -       |
-| style    | to customize the styles                                                                                   | object\|string | -       |
-
-### Layout.Sider
-
-The sidebar.
-
-| Property              | Description                                                                            | Type                                          | Default | Version |
-| --------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------- | ------- | ------- |
-| breakpoint            | [breakpoints](/components/grid#api) of the responsive layout                           | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | -       |         |
-| class                 | container className                                                                    | string                                        | -       |         |
-| collapsed(v-model)    | to set the current status                                                              | boolean                                       | -       |         |
-| collapsedWidth        | width of the collapsed sidebar, by setting to `0` a special trigger will appear        | number                                        | 80      |         |
-| collapsible           | whether can be collapsed                                                               | boolean                                       | false   |         |
-| defaultCollapsed      | to set the initial status                                                              | boolean                                       | false   |         |
-| reverseArrow          | reverse direction of arrow, for a sider that expands from the right                    | boolean                                       | false   |         |
-| style                 | to customize the styles                                                                | object\|string                                | -       |         |
-| theme                 | color theme of the sidebar                                                             | `light` \| `dark`                             | `dark`  |         |
-| trigger               | specify the customized trigger, set to null to hide the trigger                        | string\|slot                                  | -       |         |
-| width                 | width of the sidebar                                                                   | number\|string                                | 200     |         |
-| zeroWidthTriggerStyle | to customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object                                        | -       | 1.5.0   |
-
-### Events
-
-| Events Name | Description                                                                                 | Arguments               |     |
-| ----------- | ------------------------------------------------------------------------------------------- | ----------------------- | --- |
-| breakpoint  | the callback function, executed when [breakpoints](/components/grid#api) changed            | (broken) => {}          | -   |
-| collapse    | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} |     |
-
-#### breakpoint width
-
-```jsx
-{
-  xs: '480px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  xl: '1200px',
-  xxl: '1600px',
-  xxxl: '2000px',
-}
-```

package/src/layout/index.ts

@@ -1,28 +0,0 @@
-import type { App } from 'vue'
-
-import Sider from './Sider'
-import Layout, { Content, Footer, Header } from './layout'
-
-export type { BasicProps as LayoutProps } from './layout'
-export type { SiderProps } from './Sider'
-
-/* istanbul ignore next */
-export const LayoutHeader = Header
-export const LayoutFooter = Footer
-export const LayoutSider = Sider
-export const LayoutContent = Content
-
-export default Object.assign(Layout, {
-  Header,
-  Footer,
-  Content,
-  Sider,
-  install: (app: App) => {
-    app.component(Layout.name, Layout)
-    app.component(Header.name, Header)
-    app.component(Footer.name, Footer)
-    app.component(Sider.name, Sider)
-    app.component(Content.name, Content)
-    return app
-  },
-})

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

@@ -1,123 +0,0 @@
----
-category: Components
-subtitle: 布局
-type: 布局
-cols: 1
-title: Layout
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAAAAAAAAAAAADrJ8AQ/original
----
-
-协助进行页面级整体布局。
-
-## 设计规则
-
-### 尺寸
-
-一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
-
-- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。
-- 顶部导航（展示类页面）：一级导航高度 `80px`，二级导航 `56px`。
-- 顶部导航高度的范围计算公式为：`48+8n`。
-- 侧边导航宽度的范围计算公式：`200+8n`。
-
-### 交互
-
-- 一级导航和末级的导航需要在可视化的层面被强调出来；
-- 当前项应该在呈现上优先级最高；
-- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
-- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
-
-### 视觉
-
-导航样式上需要根据信息层级合理的选择样式：
-
-- **大色块强调**
-
-  建议用于底色为深色系时，当前页面父级的导航项。
-
-- **高亮火柴棍**
-
-  当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
-
-- **字体高亮变色**
-
-  从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
-
-- **字体放大**
-
-  `12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
-
-## 组件概述
-
-- `Layout`：布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。
-- `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
-- `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。
-- `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
-- `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
-
-> 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。
-
-## API
-
-```jsx
-<Layout>
-  <Header>header</Header>
-  <Layout>
-    <Sider>left sidebar</Sider>
-    <Content>main content</Content>
-    <Sider>right sidebar</Sider>
-  </Layout>
-  <Footer>footer</Footer>
-</Layout>
-```
-
-### Layout
-
-布局容器。
-
-| 参数     | 说明                                                               | 类型    | 默认值 |
-| -------- | ------------------------------------------------------------------ | ------- | ------ |
-| class    | 容器 class                                                         | string  | -      |
-| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | -      |
-| style    | 指定样式                                                           | object  | -      |
-
-### Layout.Sider
-
-侧边栏。
-
-| 参数                  | 说明                                                     | 类型                                          | 默认值 | 版本  |
-| --------------------- | -------------------------------------------------------- | --------------------------------------------- | ------ | ----- |
-| breakpoint            | 触发响应式布局的[断点](/components/grid#api)             | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | -      |       |
-| class                 | 容器 class                                               | string                                        | -      |       |
-| collapsed(v-model)    | 当前收起状态                                             | boolean                                       | -      |       |
-| collapsedWidth        | 收缩宽度，设置为 0 会出现特殊 trigger                    | number                                        | 80     |       |
-| collapsible           | 是否可收起                                               | boolean                                       | false  |       |
-| defaultCollapsed      | 是否默认收起                                             | boolean                                       | false  |       |
-| reverseArrow          | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用        | boolean                                       | false  |       |
-| style                 | 指定样式                                                 | object\|string                                | -      |       |
-| theme                 | 主题颜色                                                 | `light` \| `dark`                             | `dark` |       |
-| trigger               | 自定义 trigger，设置为 null 时隐藏 trigger               | string\|slot                                  | -      |       |
-| width                 | 宽度                                                     | number\|string                                | 200    |       |
-| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object                                        | -      | 1.5.0 |
-
-### 事件
-
-| 事件名称   | 说明                                                                 | 回调参数                |
-| ---------- | -------------------------------------------------------------------- | ----------------------- |
-| breakpoint | 触发响应式布局[断点](/components/grid#api)时的回调                   | (broken) => {}          |
-| collapse   | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} |
-
-#### breakpoint width
-
-```js
-{
-  xs: '480px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  xl: '1200px',
-  xxl: '1600px',
-  xxxl: '2000px',
-}
-```

package/src/layout/injectionKey.ts

@@ -1,12 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-export type SiderCollapsed = Ref<boolean>
-
-export const SiderCollapsedKey: InjectionKey<SiderCollapsed> = Symbol('siderCollapsed')
-
-export interface SiderHookProvider {
-  addSider?: (id: string) => void
-  removeSider?: (id: string) => void
-}
-
-export const SiderHookProviderKey: InjectionKey<SiderHookProvider> = Symbol('siderHookProvider')

package/src/layout/layout.tsx

@@ -1,113 +0,0 @@
-import type { ExtractPropTypes, HTMLAttributes } from 'vue'
-import { computed, createVNode, defineComponent, provide, ref } from 'vue'
-
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { SiderHookProviderKey } from './injectionKey'
-import useStyle from './style'
-
-export const basicProps = () => ({
-  prefixCls: String,
-  hasSider: { type: Boolean, default: undefined },
-  tagName: String,
-})
-
-export type BasicProps = Partial<ExtractPropTypes<ReturnType<typeof basicProps>>> & HTMLAttributes
-
-interface GeneratorArgument {
-  suffixCls: string
-  tagName: 'header' | 'footer' | 'main' | 'section'
-  name: string
-}
-
-function generator({ suffixCls, tagName, name }: GeneratorArgument) {
-  return (BasicComponent: typeof BasicLayout) => {
-    const Adapter = defineComponent({
-      compatConfig: { MODE: 3 },
-      name,
-      props: basicProps(),
-      setup(props, { slots }) {
-        const { prefixCls } = useConfigInject(suffixCls, props)
-        return () => {
-          const basicComponentProps = {
-            ...props,
-            prefixCls: prefixCls.value,
-            tagName,
-          }
-          return <BasicComponent {...basicComponentProps} v-slots={slots}></BasicComponent>
-        }
-      },
-    })
-    return Adapter
-  }
-}
-
-const Basic = defineComponent({
-  compatConfig: { MODE: 3 },
-  props: basicProps(),
-  setup(props, { slots }) {
-    return () => createVNode(props.tagName, { class: props.prefixCls }, slots)
-  },
-})
-
-const BasicLayout = defineComponent({
-  compatConfig: { MODE: 3 },
-  inheritAttrs: false,
-  props: basicProps(),
-  setup(props, { slots, attrs }) {
-    const { prefixCls, direction } = useConfigInject('', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const siders = ref<string[]>([])
-    const siderHookProvider = {
-      addSider: (id: string) => {
-        siders.value = [...siders.value, id]
-      },
-      removeSider: (id: string) => {
-        siders.value = siders.value.filter((currentId) => currentId !== id)
-      },
-    }
-
-    provide(SiderHookProviderKey, siderHookProvider)
-    const divCls = computed(() => {
-      const { prefixCls, hasSider } = props
-      return {
-        [hashId.value]: true,
-        [`${prefixCls}`]: true,
-        [`${prefixCls}-has-sider`]:
-          typeof hasSider === 'boolean' ? hasSider : siders.value.length > 0,
-        [`${prefixCls}-rtl`]: direction.value === 'rtl',
-      }
-    })
-    return () => {
-      const { tagName } = props
-      return wrapSSR(createVNode(tagName, { ...attrs, class: [divCls.value, attrs.class] }, slots))
-    }
-  },
-})
-
-const Layout = generator({
-  suffixCls: 'layout',
-  tagName: 'section',
-  name: 'ALayout',
-})(BasicLayout)
-
-const Header = generator({
-  suffixCls: 'layout-header',
-  tagName: 'header',
-  name: 'ALayoutHeader',
-})(Basic)
-
-const Footer = generator({
-  suffixCls: 'layout-footer',
-  tagName: 'footer',
-  name: 'ALayoutFooter',
-})(Basic)
-
-const Content = generator({
-  suffixCls: 'layout-content',
-  tagName: 'main',
-  name: 'ALayoutContent',
-})(Basic)
-
-export { Content, Footer, Header }
-
-export default Layout

package/src/layout/style/index.ts

@@ -1,226 +0,0 @@
-import type { CSSObject } from '../../_util/cssinjs'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-import genLayoutLightStyle from './light'
-
-export interface ComponentToken {
-  colorBgHeader: string
-  colorBgBody: string
-  colorBgTrigger: string
-}
-
-export interface LayoutToken extends FullToken<'Layout'> {
-  // Layout
-  layoutHeaderHeight: number
-  layoutHeaderPaddingInline: number
-  layoutHeaderColor: string
-  layoutFooterPadding: string
-  layoutTriggerHeight: number
-  layoutZeroTriggerSize: number
-}
-
-const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
-  const {
-    antCls, // .ant
-    componentCls, // .ant-layout
-    colorText,
-    colorTextLightSolid,
-    colorBgHeader,
-    colorBgBody,
-    colorBgTrigger,
-    layoutHeaderHeight,
-    layoutHeaderPaddingInline,
-    layoutHeaderColor,
-    layoutFooterPadding,
-    layoutTriggerHeight,
-    layoutZeroTriggerSize,
-    motionDurationMid,
-    motionDurationSlow,
-    fontSize,
-    borderRadius,
-  } = token
-
-  return {
-    [componentCls]: {
-      display: 'flex',
-      flex: 'auto',
-      flexDirection: 'column',
-      color: colorText,
-
-      /* fix firefox can't set height smaller than content on flex item */
-      minHeight: 0,
-      background: colorBgBody,
-
-      '&, *': {
-        boxSizing: 'border-box',
-      },
-
-      [`&${componentCls}-has-sider`]: {
-        flexDirection: 'row',
-        [`> ${componentCls}, > ${componentCls}-content`]: {
-          // https://segmentfault.com/a/1190000019498300
-          width: 0,
-        },
-      },
-
-      [`${componentCls}-header, &${componentCls}-footer`]: {
-        flex: '0 0 auto',
-      },
-
-      [`${componentCls}-header`]: {
-        height: layoutHeaderHeight,
-        paddingInline: layoutHeaderPaddingInline,
-        color: layoutHeaderColor,
-        lineHeight: `${layoutHeaderHeight}px`,
-        background: colorBgHeader,
-        // Other components/menu/style/index.less line:686
-        // Integration with header element so menu items have the same height
-        [`${antCls}-menu`]: {
-          lineHeight: 'inherit',
-        },
-      },
-
-      [`${componentCls}-footer`]: {
-        padding: layoutFooterPadding,
-        color: colorText,
-        fontSize,
-        background: colorBgBody,
-      },
-
-      [`${componentCls}-content`]: {
-        flex: 'auto',
-
-        // fix firefox can't set height smaller than content on flex item
-        minHeight: 0,
-      },
-
-      [`${componentCls}-sider`]: {
-        position: 'relative',
-
-        // fix firefox can't set width smaller than content on flex item
-        minWidth: 0,
-        background: colorBgHeader,
-        transition: `all ${motionDurationMid}, background 0s`,
-
-        '&-children': {
-          height: '100%',
-          // Hack for fixing margin collapse bug
-          // https://github.com/ant-design/ant-design/issues/7967
-          // solution from https://stackoverflow.com/a/33132624/3040605
-          marginTop: -0.1,
-          paddingTop: 0.1,
-
-          [`${antCls}-menu${antCls}-menu-inline-collapsed`]: {
-            width: 'auto',
-          },
-        },
-
-        '&-has-trigger': {
-          paddingBottom: layoutTriggerHeight,
-        },
-
-        '&-right': {
-          order: 1,
-        },
-
-        '&-trigger': {
-          position: 'fixed',
-          bottom: 0,
-          zIndex: 1,
-          height: layoutTriggerHeight,
-          color: colorTextLightSolid,
-          lineHeight: `${layoutTriggerHeight}px`,
-          textAlign: 'center',
-          background: colorBgTrigger,
-          cursor: 'pointer',
-          transition: `all ${motionDurationMid}`,
-        },
-
-        '&-zero-width': {
-          '> *': {
-            overflow: 'hidden',
-          },
-
-          '&-trigger': {
-            position: 'absolute',
-            top: layoutHeaderHeight,
-            insetInlineEnd: -layoutZeroTriggerSize,
-            zIndex: 1,
-            width: layoutZeroTriggerSize,
-            height: layoutZeroTriggerSize,
-            color: colorTextLightSolid,
-            fontSize: token.fontSizeXL,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: colorBgHeader,
-            borderStartStartRadius: 0,
-            borderStartEndRadius: borderRadius,
-            borderEndEndRadius: borderRadius,
-            borderEndStartRadius: 0,
-
-            cursor: 'pointer',
-            transition: `background ${motionDurationSlow} ease`,
-
-            '&::after': {
-              position: 'absolute',
-              inset: 0,
-              background: 'transparent',
-              transition: `all ${motionDurationSlow}`,
-              content: '""',
-            },
-
-            '&:hover::after': {
-              // FIXME: Hardcode, but seems no need to create a token for this
-              background: `rgba(255, 255, 255, 0.2)`,
-            },
-
-            '&-right': {
-              insetInlineStart: -layoutZeroTriggerSize,
-              borderStartStartRadius: borderRadius,
-              borderStartEndRadius: 0,
-              borderEndEndRadius: 0,
-              borderEndStartRadius: borderRadius,
-            },
-          },
-        },
-      },
-      // Light
-      ...genLayoutLightStyle(token),
-      // RTL
-      '&-rtl': {
-        direction: 'rtl',
-      },
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook(
-  'Layout',
-  (token) => {
-    const { colorText, controlHeightSM, controlHeight, controlHeightLG, marginXXS } = token
-    const layoutHeaderPaddingInline = controlHeightLG * 1.25
-
-    const layoutToken = mergeToken<LayoutToken>(token, {
-      // Layout
-      layoutHeaderHeight: controlHeight * 2,
-      layoutHeaderPaddingInline,
-      layoutHeaderColor: colorText,
-      layoutFooterPadding: `${controlHeightSM}px ${layoutHeaderPaddingInline}px`,
-      layoutTriggerHeight: controlHeightLG + marginXXS * 2, // = item height + margin
-      layoutZeroTriggerSize: controlHeightLG,
-    })
-
-    return [genLayoutStyle(layoutToken)]
-  },
-  (token) => {
-    const { colorBgLayout } = token
-
-    return {
-      colorBgHeader: '#001529',
-      colorBgBody: colorBgLayout,
-      colorBgTrigger: '#002140',
-    }
-  },
-)

package/src/layout/style/light.ts

@@ -1,27 +0,0 @@
-import type { LayoutToken } from '.'
-import type { CSSObject } from '../../_util/cssinjs'
-import type { GenerateStyle } from '../../theme/internal'
-
-const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
-  const { componentCls, colorBgContainer, colorBgBody, colorText } = token
-
-  return {
-    [`${componentCls}-sider-light`]: {
-      background: colorBgContainer,
-
-      [`${componentCls}-sider-trigger`]: {
-        color: colorText,
-        background: colorBgContainer,
-      },
-
-      [`${componentCls}-sider-zero-width-trigger`]: {
-        color: colorText,
-        background: colorBgContainer,
-        border: `1px solid ${colorBgBody}`, // Safe to modify to any other color
-        borderInlineStart: 0,
-      },
-    },
-  }
-}
-
-export default genLayoutLightStyle