@qsxy/element-plus-react 1.0.0-next.1

package/dist/index.d.ts

@@ -0,0 +1,110 @@
+export { Link as ElLink } from './Link';
+export type { LinkProps as ElLinkProps } from './Link';
+export { Button as ElButton } from './Button';
+export type { ButtonGroupProps, ButtonProps } from './Button';
+export { Col as ElCol } from './Col';
+export type { ColProps as ElColProps } from './Col';
+export { Icon as ElIcon } from './Icon';
+export type { IconName, IconPrefix, IconProps } from './Icon';
+export * from './Icon/IconList';
+export { Row as ElRow, RowContext } from './Row';
+export type { RowProps as ElRowProps } from './Row';
+export { Scrollbar as ElScrollbar } from './Scrollbar';
+export type { BarProps, ScrollbarProps, ScrollbarRef } from './Scrollbar';
+export { Popper as ElPopper } from './Popper';
+export type { PopperOptionRef, PopperOptions, PopperProps } from './Popper';
+export { Transition as ElTransition } from './Transition';
+export type { TransitionProps } from './Transition';
+export { Cascader as ElCascader } from './Cascader';
+export type { CascaderMenuProps, CascaderProps, TreeMenuProps } from './Cascader';
+export { Checkbox as ElCheckbox, CheckboxButton as ElCheckboxButton } from './Checkbox';
+export type { CheckboxProps, ValueType as CheckboxValueType } from './Checkbox';
+export { CheckboxGroup as ElCheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupContextValue, CheckboxGroupProps } from './CheckboxGroup';
+export { ColorPicker as ElColorPicker } from './ColorPicker';
+export type { ColorPickerProps } from './ColorPicker';
+export { Radio as ElRadio } from './Radio';
+export type { RadioProps, ValueType } from './Radio';
+export { RadioGroup as ElRadioGroup } from './RadioGroup';
+export type { RadioContextProps, RadioGroupProps } from './RadioGroup';
+export { Input as ElInput } from './Input';
+export type { InputProps, InputRangeProps, InputRef, TextareaProps, TextareaRef } from './Input';
+export { InputNumber as ElInputNumber } from './InputNumber';
+export type { InputNumberProps, InputNumberRef } from './InputNumber';
+export { Select as ElSelect } from './Select';
+export type { SelectOptionGroupProps, SelectOptionProps, SelectProps, SelectRef } from './Select';
+export { Calendar, CalendarContext } from './Calendar';
+export type { DateRangeType, DateType } from './Calendar';
+export { DatePicker as ElDatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerRef } from './DatePicker';
+export { DateTimePicker as ElDateTimePicker } from './DateTimePicker';
+export type { DateTimePickerProps, DateTimePickerRef } from './DateTimePicker';
+export { TimePicker as ElTimePicker } from './TimePicker';
+export type { TimePickerProps, TimePickerRef } from './TimePicker';
+export { Switch as ElSwitch } from './Switch';
+export type { ChangeValue, ISwitchProps, ValueType as SwitchValueType } from './Switch';
+export { Transfer as ElTransfer } from './Transfer';
+export type { ListStyle, SelectAllLabel, TransferDirection, TransferItem, TransferLocale, TransferProps, TransferRender } from './Transfer';
+export { Form as ElForm, useForm } from './Form';
+export type { FormInstance, FormItemProps, FormProps, FormRules, InternalFormInstance, InternalNamePath, NamePath, Rule, RuleType, ValidateErrorEntity, ValidateMessages, ValidateOptions, } from './Form';
+export { Upload as ElUpload } from './Upload';
+export type { UploadFile, UploadFiles, UploadProps, UploadRawFile, UploadRef, UploadStatus, UploadUserFile } from './Upload';
+export { Badge as ElBadge } from './Badge';
+export type { BadgeProps } from './Badge';
+export { Card as ElCard } from './Card';
+export type { CardProps } from './Card';
+export { Collapse as ElCollapse, CollapseItem as ElCollapseItem } from './Collapse';
+export type { CollapseItemProps, CollapseProps } from './Collapse';
+export { Descriptions as ElDescriptions, DescriptionsItem as ElDescriptionsItem } from './Descriptions';
+export type { DescriptionsItemProps, DescriptionsProps } from './Descriptions';
+export { Pagination as ElPagination } from './Pagination';
+export type { PageType, PaginationProps, PaginationRef } from './Pagination';
+export { Progress as ElProgress } from './Progress';
+export type { PropgressProps } from './Progress';
+export { Table as ElTable, TableColumn as ElTableColumn } from './Table';
+export type { RenderCell, TableColumnCtx, TableColumnProps, TableProps, TableRef, TableSort } from './Table';
+export { Tag as ElTag } from './Tag';
+export type { TagProps } from './Tag';
+export { TimeLine as ElTimeLine, TimeLineItem as ElTimeLineItem } from './TimeLine';
+export type { TimeLineItemProps, TimeLineProps } from './TimeLine';
+export { DirectoryTree as ElDirectoryTree, Tree as ElTree, TreeNode } from './Tree';
+export type { AntTreeNode, AntTreeNodeCheckedEvent, AntTreeNodeExpandedEvent, AntTreeNodeMouseEvent, AntTreeNodeProps, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, BasicDataNode, DataNode, DirectoryTreeExpandAction, DirectoryTreeProps, EventDataNode, Key, TreeNodeProps, TreeProps, } from './Tree';
+export { TreeSelect as ElTreeSelect } from './TreeSelect';
+export type { SelectInfo, TreeSelectProps, TreeSelectRef } from './TreeSelect';
+export { VirtualList } from './VirtualList';
+export type { ListProps, ListRef, ScrollTo } from './VirtualList';
+export { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from './Breadcrumb';
+export type { BreadcrumbItemProps, BreadcrumbProps } from './Breadcrumb';
+export { Dropdown as ElDropdown, DropdownItem as ElDropdownItem, DropdownMenu as ElDropdownMenu } from './Dropdown';
+export type { DropdownItemProps, DropdownMenuProps, DropdownProps } from './Dropdown';
+export { TabPane as ElTabPane, Tabs as ElTabs } from './Tabs';
+export type { TabPaneProps, TabsPaneContext, TabsProps } from './Tabs';
+export { Empty as ElEmpty } from './Empty';
+export type { IEmptyProps } from './Empty';
+export { Skeleton as ElSkeleton } from './Skeleton';
+export type { Skeleton as PlaceholderGraphProps, PlaceholderGridProps, PlaceholderParagraphProps } from './Skeleton';
+export { Dialog as ElDialog } from './Dialog';
+export type { DialogBeforeCloseFn, DialogProps } from './Dialog';
+export { Drawer as ElDrawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { Loading as ElLoading } from './Loading';
+export type { LoadingProps } from './Loading';
+export { Message as ElMessage } from './Message';
+export type { MessageDispatcher, MessageMethod, MessageProps, MessageType } from './Message';
+export { MessageBox as ElMessageBox } from './MessageBox';
+export type { MessageBoxAction, MessageBoxMethod, MessageBoxProps, MessageBoxRef } from './MessageBox';
+export { Notification as ElNotification } from './Notification';
+export type { INotification, INotificationHandle, INotificationOptions } from './Notification';
+export { Tooltip as ElTooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+export { Popconfirm as ElPopconfirm } from './Popconfirm';
+export type { PopconfirmProps } from './Popconfirm';
+export { Popover as ElPopover } from './Popover';
+export type { PopoverProps } from './Popover';
+export { Divider as ElDivider } from './Divider';
+export type { DividerProps } from './Divider';
+export { PopupManager, download, genFileId, generateTree, getScrollWidth, isEmpty, isNotEmpty, randomCode } from './Util';
+export * from './hooks';
+export type { AnimationEventProps, BaseProps, FormControlBaseProps, NativeProps, StandardProps, TooltipBaseProps, TypeAttributes } from './types/common';
+export { ConfigProvider } from './ConfigProvider';
+export type { ConfigProviderProps } from './ConfigProvider';

package/dist/index.js

@@ -0,0 +1,235 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Calendar: () => import_Calendar.Calendar,
+  CalendarContext: () => import_Calendar.CalendarContext,
+  ConfigProvider: () => import_ConfigProvider.ConfigProvider,
+  ElBadge: () => import_Badge.Badge,
+  ElBreadcrumb: () => import_Breadcrumb.Breadcrumb,
+  ElBreadcrumbItem: () => import_Breadcrumb.BreadcrumbItem,
+  ElButton: () => import_Button.Button,
+  ElCard: () => import_Card.Card,
+  ElCascader: () => import_Cascader.Cascader,
+  ElCheckbox: () => import_Checkbox.Checkbox,
+  ElCheckboxButton: () => import_Checkbox.CheckboxButton,
+  ElCheckboxGroup: () => import_CheckboxGroup.CheckboxGroup,
+  ElCol: () => import_Col.Col,
+  ElCollapse: () => import_Collapse.Collapse,
+  ElCollapseItem: () => import_Collapse.CollapseItem,
+  ElColorPicker: () => import_ColorPicker.ColorPicker,
+  ElDatePicker: () => import_DatePicker.DatePicker,
+  ElDateTimePicker: () => import_DateTimePicker.DateTimePicker,
+  ElDescriptions: () => import_Descriptions.Descriptions,
+  ElDescriptionsItem: () => import_Descriptions.DescriptionsItem,
+  ElDialog: () => import_Dialog.Dialog,
+  ElDirectoryTree: () => import_Tree.DirectoryTree,
+  ElDivider: () => import_Divider.Divider,
+  ElDrawer: () => import_Drawer.Drawer,
+  ElDropdown: () => import_Dropdown.Dropdown,
+  ElDropdownItem: () => import_Dropdown.DropdownItem,
+  ElDropdownMenu: () => import_Dropdown.DropdownMenu,
+  ElEmpty: () => import_Empty.Empty,
+  ElForm: () => import_Form.Form,
+  ElIcon: () => import_Icon.Icon,
+  ElInput: () => import_Input.Input,
+  ElInputNumber: () => import_InputNumber.InputNumber,
+  ElLink: () => import_Link.Link,
+  ElLoading: () => import_Loading.Loading,
+  ElMessage: () => import_Message.Message,
+  ElMessageBox: () => import_MessageBox.MessageBox,
+  ElNotification: () => import_Notification.Notification,
+  ElPagination: () => import_Pagination.Pagination,
+  ElPopconfirm: () => import_Popconfirm.Popconfirm,
+  ElPopover: () => import_Popover.Popover,
+  ElPopper: () => import_Popper.Popper,
+  ElProgress: () => import_Progress.Progress,
+  ElRadio: () => import_Radio.Radio,
+  ElRadioGroup: () => import_RadioGroup.RadioGroup,
+  ElRow: () => import_Row.Row,
+  ElScrollbar: () => import_Scrollbar.Scrollbar,
+  ElSelect: () => import_Select.Select,
+  ElSkeleton: () => import_Skeleton.Skeleton,
+  ElSwitch: () => import_Switch.Switch,
+  ElTabPane: () => import_Tabs.TabPane,
+  ElTable: () => import_Table.Table,
+  ElTableColumn: () => import_Table.TableColumn,
+  ElTabs: () => import_Tabs.Tabs,
+  ElTag: () => import_Tag.Tag,
+  ElTimeLine: () => import_TimeLine.TimeLine,
+  ElTimeLineItem: () => import_TimeLine.TimeLineItem,
+  ElTimePicker: () => import_TimePicker.TimePicker,
+  ElTooltip: () => import_Tooltip.Tooltip,
+  ElTransfer: () => import_Transfer.Transfer,
+  ElTransition: () => import_Transition.Transition,
+  ElTree: () => import_Tree.Tree,
+  ElTreeSelect: () => import_TreeSelect.TreeSelect,
+  ElUpload: () => import_Upload.Upload,
+  PopupManager: () => import_Util.PopupManager,
+  RowContext: () => import_Row.RowContext,
+  TreeNode: () => import_Tree.TreeNode,
+  VirtualList: () => import_VirtualList.VirtualList,
+  download: () => import_Util.download,
+  genFileId: () => import_Util.genFileId,
+  generateTree: () => import_Util.generateTree,
+  getScrollWidth: () => import_Util.getScrollWidth,
+  isEmpty: () => import_Util.isEmpty,
+  isNotEmpty: () => import_Util.isNotEmpty,
+  randomCode: () => import_Util.randomCode,
+  useForm: () => import_Form.useForm
+});
+module.exports = __toCommonJS(src_exports);
+var import_Link = require("./Link");
+var import_Button = require("./Button");
+var import_Col = require("./Col");
+var import_Icon = require("./Icon");
+__reExport(src_exports, require("./Icon/IconList"), module.exports);
+var import_Row = require("./Row");
+var import_Scrollbar = require("./Scrollbar");
+var import_Popper = require("./Popper");
+var import_Transition = require("./Transition");
+var import_Cascader = require("./Cascader");
+var import_Checkbox = require("./Checkbox");
+var import_CheckboxGroup = require("./CheckboxGroup");
+var import_ColorPicker = require("./ColorPicker");
+var import_Radio = require("./Radio");
+var import_RadioGroup = require("./RadioGroup");
+var import_Input = require("./Input");
+var import_InputNumber = require("./InputNumber");
+var import_Select = require("./Select");
+var import_Calendar = require("./Calendar");
+var import_DatePicker = require("./DatePicker");
+var import_DateTimePicker = require("./DateTimePicker");
+var import_TimePicker = require("./TimePicker");
+var import_Switch = require("./Switch");
+var import_Transfer = require("./Transfer");
+var import_Form = require("./Form");
+var import_Upload = require("./Upload");
+var import_Badge = require("./Badge");
+var import_Card = require("./Card");
+var import_Collapse = require("./Collapse");
+var import_Descriptions = require("./Descriptions");
+var import_Pagination = require("./Pagination");
+var import_Progress = require("./Progress");
+var import_Table = require("./Table");
+var import_Tag = require("./Tag");
+var import_TimeLine = require("./TimeLine");
+var import_Tree = require("./Tree");
+var import_TreeSelect = require("./TreeSelect");
+var import_VirtualList = require("./VirtualList");
+var import_Breadcrumb = require("./Breadcrumb");
+var import_Dropdown = require("./Dropdown");
+var import_Tabs = require("./Tabs");
+var import_Empty = require("./Empty");
+var import_Skeleton = require("./Skeleton");
+var import_Dialog = require("./Dialog");
+var import_Drawer = require("./Drawer");
+var import_Loading = require("./Loading");
+var import_Message = require("./Message");
+var import_MessageBox = require("./MessageBox");
+var import_Notification = require("./Notification");
+var import_Tooltip = require("./Tooltip");
+var import_Popconfirm = require("./Popconfirm");
+var import_Popover = require("./Popover");
+var import_Divider = require("./Divider");
+var import_Util = require("./Util");
+__reExport(src_exports, require("./hooks"), module.exports);
+var import_ConfigProvider = require("./ConfigProvider");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Calendar,
+  CalendarContext,
+  ConfigProvider,
+  ElBadge,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElButton,
+  ElCard,
+  ElCascader,
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+  ElCol,
+  ElCollapse,
+  ElCollapseItem,
+  ElColorPicker,
+  ElDatePicker,
+  ElDateTimePicker,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDialog,
+  ElDirectoryTree,
+  ElDivider,
+  ElDrawer,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElEmpty,
+  ElForm,
+  ElIcon,
+  ElInput,
+  ElInputNumber,
+  ElLink,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+  ElPagination,
+  ElPopconfirm,
+  ElPopover,
+  ElPopper,
+  ElProgress,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElScrollbar,
+  ElSelect,
+  ElSkeleton,
+  ElSwitch,
+  ElTabPane,
+  ElTable,
+  ElTableColumn,
+  ElTabs,
+  ElTag,
+  ElTimeLine,
+  ElTimeLineItem,
+  ElTimePicker,
+  ElTooltip,
+  ElTransfer,
+  ElTransition,
+  ElTree,
+  ElTreeSelect,
+  ElUpload,
+  PopupManager,
+  RowContext,
+  TreeNode,
+  VirtualList,
+  download,
+  genFileId,
+  generateTree,
+  getScrollWidth,
+  isEmpty,
+  isNotEmpty,
+  randomCode,
+  useForm,
+  ...require("./Icon/IconList"),
+  ...require("./hooks")
+});

package/dist/theme-chalk/badge/index.scss

@@ -0,0 +1,63 @@
+@use '../common/var';
+
+@use 'sass:math';
+@use 'sass:map';
+
+.#{$namespace}-badge {
+    --#{$namespace}-badge-bg-color: var(--#{$namespace}-color-error);
+    --#{$namespace}-badge-radius: 10px;
+    --#{$namespace}-badge-font-size: 12px;
+    --#{$namespace}-badge-padding: 6px;
+    --#{$namespace}-badge-size: 18px;
+
+    position: relative;
+    vertical-align: middle;
+    display: inline-block;
+    width: fit-content;
+}
+
+.#{$namespace}-badge__content {
+    background-color: var(--#{$namespace}-badge-bg-color);
+    border-radius: var(--#{$namespace}-badge-radius);
+    color: var(--#{$namespace}-color-white);
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: var(--#{$namespace}-badge-font-size);
+    height: var(--#{$namespace}-badge-size);
+    padding: 0 var(--#{$namespace}-badge-padding);
+    white-space: nowrap;
+    border: 1px solid var(--#{$namespace}-bg-color);
+
+    &.is-fixed {
+        position: absolute;
+        top: 0;
+        right: calc(1px + #{var(--#{$namespace}-badge-size)} / 2);
+        transform: translateY(-50%) translateX(100%);
+        z-index: 1;
+
+        &.is-dot {
+            right: 5px;
+        }
+    }
+
+    &.is-dot {
+        height: 8px;
+        width: 8px;
+        padding: 0;
+        right: 0;
+        border-radius: 50%;
+    }
+}
+
+.#{$namespace}-badge__content--primary {
+    background-color: var(--#{$namespace}-color-primary);
+}
+
+@each $type in (success, warning, info, error) {
+    .#{$namespace}-badge__content--#{$type} {
+        background-color: var(--#{$namespace}-color-#{$type});
+    }
+}

package/dist/theme-chalk/bak/common/popup.scss

@@ -0,0 +1,47 @@
+@use './var' as *;
+@use '../mixins/mixins' as *;
+@use '../mixins/var' as *;
+
+:root {
+    @include set-component-css-var('popup', $popup);
+}
+
+.v-modal-enter {
+    animation: v-modal-in getCssVar('transition-duration-fast') ease;
+}
+
+.v-modal-leave {
+    animation: v-modal-out getCssVar('transition-duration-fast') ease forwards;
+}
+
+@keyframes v-modal-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+    }
+}
+
+@keyframes v-modal-out {
+    0% {
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+.v-modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: getCssVar('popup-modal-opacity');
+    background: getCssVar('popup-modal-bg-color');
+}
+
+@include b(popup-parent) {
+    @include m(hidden) {
+        overflow: hidden;
+    }
+}

package/dist/theme-chalk/bak/common/transition.scss

@@ -0,0 +1,118 @@
+@use '../mixins/config' as *;
+@use '../mixins/mixins' as *;
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
+    opacity: 0;
+}
+
+.#{$namespace}-zoom-in-center-enter-active,
+.#{$namespace}-zoom-in-center-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-zoom-in-center-enter-from,
+.#{$namespace}-zoom-in-center-leave-active {
+    opacity: 0;
+    transform: scaleX(0);
+}
+
+.#{$namespace}-zoom-in-top-enter-active,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center top;
+
+    &[data-popper-placement^='top'] {
+        transform-origin: center bottom;
+    }
+}
+.#{$namespace}-zoom-in-top-enter-from,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-bottom-enter-active,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center bottom;
+}
+.#{$namespace}-zoom-in-bottom-enter-from,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-left-enter-active,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 1;
+    transform: scale(1, 1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: top left;
+}
+.#{$namespace}-zoom-in-left-enter-from,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 0;
+    transform: scale(0.45, 0.45);
+}
+
+.collapse-transition {
+    transition: getCssVar('transition-duration') height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-collapse-transition-leave-active,
+.#{$namespace}-collapse-transition-enter-active {
+    transition: getCssVar('transition-duration') max-height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.horizontal-collapse-transition {
+    transition: getCssVar('transition-duration') width ease-in-out, getCssVar('transition-duration') padding-left ease-in-out,
+        getCssVar('transition-duration') padding-right ease-in-out;
+}
+
+.#{$namespace}-list-enter-active,
+.#{$namespace}-list-leave-active {
+    transition: all 1s;
+}
+
+.#{$namespace}-list-enter-from,
+.#{$namespace}-list-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+}
+
+.#{$namespace}-list-leave-active {
+    position: absolute !important;
+}
+
+.#{$namespace}-opacity-transition {
+    transition: opacity getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}