feat(Affix): init affix

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    'Affix.story': typeof import('./src/components/Navigation/Affix/affix.story.vue')['default']
     'Alert.story': typeof import('./src/components/Feedback/alert.story.vue')['default']
     'Autocomplete.story': typeof import('./src/components/Form/autocomplete.story.vue')['default']
     'Avatar.story': typeof import('./src/components/Data/avatar.story.vue')['default']
@@ -28,90 +29,12 @@ declare module '@vue/runtime-core' {
     Controls: typeof import('./src/components/Feedback/MessageBox/controls.vue')['default']
     'DatePicker.story': typeof import('./src/components/Form/datePicker.story.vue')['default']
     'DateTimePicker.story': typeof import('./src/components/Form/dateTimePicker.story.vue')['default']
+    Demo: typeof import('./src/components/Navigation/Affix/demo.vue')['default']
     'Descriptions.story': typeof import('./src/components/Data/descriptions.story.vue')['default']
     'Dialog.story': typeof import('./src/components/Feedback/dialog.story.vue')['default']
     'Divider.story': typeof import('./src/components/Others/Divider/divider.story.vue')['default']
     'Drawer.story': typeof import('./src/components/Feedback/Drawer/drawer.story.vue')['default']
     'Dropdown.story': typeof import('./src/components/Navigation/Dropdown/dropdown.story.vue')['default']
-    ElAlert: typeof import('element-plus/es')['ElAlert']
-    ElAside: typeof import('element-plus/es')['ElAside']
-    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
-    ElBadge: typeof import('element-plus/es')['ElBadge']
-    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
-    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
-    ElCalendar: typeof import('element-plus/es')['ElCalendar']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCarousel: typeof import('element-plus/es')['ElCarousel']
-    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
-    ElCascaderPanel: typeof import('element-plus/es')['ElCascaderPanel']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
-    ElCheckTag: typeof import('element-plus/es')['ElCheckTag']
-    ElCol: typeof import('element-plus/es')['ElCol']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
-    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElDrawer: typeof import('element-plus/es')['ElDrawer']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElEmpty: typeof import('element-plus/es')['ElEmpty']
-    ElFooter: typeof import('element-plus/es')['ElFooter']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
-    ElMain: typeof import('element-plus/es')['ElMain']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
-    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRate: typeof import('element-plus/es')['ElRate']
-    ElResult: typeof import('element-plus/es')['ElResult']
-    ElRow: typeof import('element-plus/es')['ElRow']
-    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
-    ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     'Empty.story': typeof import('./src/components/Data/empty.story.vue')['default']
     'Form.story': typeof import('./src/components/Form/Form/form.story.vue')['default']
     HstColor: typeof import('./src/controls-components/HstColor.vue')['default']
@@ -156,10 +79,5 @@ declare module '@vue/runtime-core' {
     'TimeSelect.story': typeof import('./src/components/Form/TimeSelect/timeSelect.story.vue')['default']
     'Tooltip.story': typeof import('./src/components/Feedback/Tooltip/tooltip.story.vue')['default']
     'Transfer.story': typeof import('./src/components/Form/Transfer/transfer.story.vue')['default']
-    'Upload.story': typeof import('./src/components/Form/Upload/upload.story.vue')['default']
-  }
-  export interface ComponentCustomProperties {
-    vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }

src/components/Feedback/Message/message.story.md

@@ -1 +1,134 @@
-## Message Attributes
+---
+title: Message
+lang: en-US
+---
+
+# Message
+
+Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.
+
+## Basic usage
+
+Displays at the top, and disappears after 3 seconds.
+
+:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element Plus has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
+
+message/basic
+
+:::
+
+## Types
+
+Used to show the feedback of Success, Warning, Message and Error activities.
+
+:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
+
+message/different-types
+
+:::
+
+## Closable
+
+A close button can be added.
+
+:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
+
+message/closable
+
+:::
+
+## Centered text
+
+Use the `center` attribute to center the text.
+
+:::demo
+
+message/centered-content
+
+:::
+
+## Use HTML string
+
+`message` supports HTML string.
+
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+
+message/raw-html
+
+:::
+
+:::warning
+
+Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+
+:::
+
+## Grouping
+
+merge messages with the same content.
+
+:::demo Set `grouping` to true and the same content of `message` will be merged.
+
+message/grouping
+
+:::
+
+## Global method
+
+Element Plus has added a global method `$message` for `app.config.globalProperties`. So in a vue instance you can call `Message` like what we did in this page.
+
+## Local import
+
+```ts
+// import { ElMessage } from 'element-plus'
+```
+
+In this case you should call `ElMessage(options)`. We have also registered methods for different types, e.g. `ElMessage.success(options)`. You can call `ElMessage.closeAll()` to manually close all the instances.
+
+## App context inheritance <el-tag> >= 2.0.3</el-tag>
+
+Now message accepts a `context` as second parameter of the message constructor which allows you to inject current app's context to message which allows you to inherit all the properties of the app.
+
+You can use it like this:
+
+:::tip
+
+If you globally registered ElMessage component, it will automatically inherit your app context.
+
+:::
+
+```ts
+import { getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// in your setup method
+const { appContext } = getCurrentInstance()!
+ElMessage({}, appContext)
+```
+
+## Message API
+
+### Options
+
+| Attribute                  | Description                                                                    | Type                                          | Default         |
+| -------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------- | --------------- |
+| `message`                  | message text                                                                   | `string \| VNode \| (() => VNode)`            | —               |
+| `type`                     | message type                                                                   | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'`        |
+| `icon`                     | custom icon component, overrides `type`                                        | `string \| Component`                         | —               |
+| `dangerouslyUseHTMLString` | whether `message` is treated as HTML string                                    | `boolean`                                     | `false`         |
+| `custom-class`             | custom class name for Message                                                  | `string`                                      | —               |
+| `duration`                 | display duration, millisecond. If set to 0, it will not turn off automatically | `number`                                      | `3000`          |
+| `show-close`               | whether to show a close button                                                 | `boolean`                                     | `false`         |
+| `center`                   | whether to center the text                                                     | `boolean`                                     | `false`         |
+| `on-close`                 | callback function when closed with the message instance as the parameter       | `function`                                    | —               |
+| `offset`                   | set the distance to the top of viewport                                        | `number`                                      | `20`            |
+| `appendTo`                 | set the root element for the message                                           | `string \| HTMLElement`                       | `document.body` |
+| `grouping`                 | merge messages with the same content, type of VNode message is not supported   | `boolean`                                     | `false`         |
+
+### Methods
+
+`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
+
+| Method  | Description       |
+| ------- | ----------------- |
+| `close` | close the Message |

src/components/Feedback/Notification/notification.story.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NotificationProps } from 'element-plus'
+import { ElNotification } from 'element-plus'
 import { positionList, typeList } from './constants'
 import { isAttribute } from '@/utils'
 

src/components/Navigation/Affix/affix.story.md

@@ -0,0 +1,69 @@
+---
+title: Affix
+lang: en-US
+---
+
+# Affix
+
+Fix the element to a specific visible area.
+
+## Basic Usage
+
+Affix is fixed at the top of the page by default.
+
+:::demo You can set `offset` attribute to change the offset top，the default value is 0.
+
+affix/basic
+
+:::
+
+## Target Container
+
+You can set `target` attribute to keep the affix in the container at all times. It will be hidden if out of range.
+
+:::demo Please notice that the container avoid having scrollbar.
+
+affix/target
+
+:::
+
+## Fixed Position
+
+The affix component provides two fixed positions: `top` and `bottom`.
+
+:::demo You can set `position` attribute to change the fixed position, the default value is `top`.
+
+affix/fixed
+
+:::
+
+## Affix API
+
+### Affix Attributes
+
+| Name       | Description                      | Type                       | Default | Required |
+| ---------- | -------------------------------- | -------------------------- | ------- | -------- |
+| `offset`   | offset distance.                 | ^[number]                  | `0`     | No       |
+| `position` | position of affix.               | ^[enum]`'top' \| 'bottom'` | `'top'` | No       |
+| `target`   | target container. (CSS selector) | ^[string]                  | —       | No       |
+| `z-index`  | `z-index` of affix               | ^[number]                  | `100`   | No       |
+
+### Affix Events
+
+| Name     | Description                        | Type                                                                |
+| -------- | ---------------------------------- | ------------------------------------------------------------------- |
+| `change` | triggers when fixed state changed. | ^[Function]`(fixed: boolean) => void`                               |
+| `scroll` | triggers when scrolling.           | ^[Function]`(value: { scrollTop: number, fixed: boolean }) => void` |
+
+### Affix Exposes
+
+| Method       | Description                 | Type                    |
+| ------------ | --------------------------- | ----------------------- |
+| `update`     | update affix state manually | ^[Function]`() => void` |
+| `updateRoot` | update rootRect info        | ^[Function]`() => void` |
+
+### Affix Slots
+
+| Name      | Description                |
+| --------- | -------------------------- |
+| `default` | customize default content. |