vue-devui 1.3.0 → 1.3.2

package/types/vue-devui.d.ts

@@ -1,63 +1,86 @@
-import type { App } from 'vue';
-import { Alert } from './alert';
-import { AutoComplete } from './auto-complete';
-import { Avatar } from './avatar';
-import { Badge } from './badge';
-import { Button, ButtonGroup } from './button';
-import { Card } from './card';
-import { Checkbox, CheckboxGroup, CheckboxButton } from './checkbox';
-import { Collapse, CollapseItem } from './collapse';
-import { Countdown } from './countdown';
-import { DatePickerPro, DRangeDatePickerPro } from './date-picker-pro';
-import { Drawer, DrawerService } from './drawer';
-import { Dropdown, DropdownMenu } from './dropdown';
-import { EditableSelect } from './editable-select';
-import { Form, FormItem, FormOperation } from './form';
-import { Fullscreen } from './fullscreen';
-import { Row, Col } from './grid';
-import { Icon, IconGroup } from './icon';
-import { ImagePreviewDirective, ImagePreviewService } from './image-preview';
-import { Input } from './input';
-import { InputNumber } from './input-number';
-import { Layout, Content, Header, Footer, Aside } from './layout';
-import { LoadingService, LoadingDirective } from './loading';
-import { Mention } from './mention';
-import { Menu, SubMenu, MenuItem } from './menu';
-import { Message } from './message';
-import { Modal } from './modal';
-import { Notification, NotificationService } from './notification';
-import { FlexibleOverlay, FixedOverlay } from './overlay';
-import { Pagination } from './pagination';
-import { Panel, PanelHeader, PanelBody, PanelFooter } from './panel';
-import { Popover } from './popover';
-import { Progress } from './progress';
-import { Radio, RadioGroup, RadioButton } from './radio';
-import { Rate } from './rate';
-import { Result } from './result';
-import { RippleDirective } from './ripple';
-import { Search } from './search';
-import { Select, Option, OptionGroup } from './select';
-import { Skeleton, SkeletonItem } from './skeleton';
-import { Slider } from './slider';
-import { Splitter } from './splitter';
-import { Statistic } from './statistic';
-import { Status } from './status';
-import { Steps, Step } from './steps';
-import { Switch } from './switch';
-import { Table, Column } from './table';
-import { Tabs, Tab } from './tabs';
-import { Tag } from './tag';
-import { Textarea } from './textarea';
-import { TimePicker } from './time-picker';
-import { TimeSelect } from './time-select';
-import { Timeline, TimelineItem } from './timeline';
-import { Tooltip } from './tooltip';
-import { Tree } from './tree';
-import { Upload } from './upload';
-import './style/devui.scss';
-export { Alert, AutoComplete, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, CheckboxGroup, CheckboxButton, Collapse, CollapseItem, Countdown, DatePickerPro, DRangeDatePickerPro, Drawer, DrawerService, Dropdown, DropdownMenu, EditableSelect, Form, FormItem, FormOperation, Fullscreen, Row, Col, Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, Input, InputNumber, Layout, Content, Header, Footer, Aside, LoadingService, LoadingDirective, Mention, Menu, SubMenu, MenuItem, Message, Modal, Notification, NotificationService, FlexibleOverlay, FixedOverlay, Pagination, Panel, PanelHeader, PanelBody, PanelFooter, Popover, Progress, Radio, RadioGroup, RadioButton, Rate, Result, RippleDirective, Search, Select, Option, OptionGroup, Skeleton, SkeletonItem, Slider, Splitter, Statistic, Status, Steps, Step, Switch, Table, Column, Tabs, Tab, Tag, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Tree, Upload };
-declare const _default: {
-    version: string;
-    install(app: App): void;
-};
-export default _default;
+import type { App } from 'vue';
+import { Accordion } from './accordion';
+import { Alert } from './alert';
+import { Anchor } from './anchor';
+import { AutoComplete } from './auto-complete';
+import { Avatar } from './avatar';
+import { BackTop } from './back-top';
+import { Badge } from './badge';
+import { Breadcrumb } from './breadcrumb';
+import { Button, ButtonGroup } from './button';
+import { Card } from './card';
+import { Carousel, CarouselItem } from './carousel';
+import { Cascader } from './cascader';
+import { Checkbox, CheckboxGroup, CheckboxButton } from './checkbox';
+import { Collapse, CollapseItem } from './collapse';
+import { ColorPicker } from './color-picker';
+import { Comment } from './comment';
+import { Countdown } from './countdown';
+import { DatePicker, StickSlider } from './date-picker';
+import { DatePickerPro, DRangeDatePickerPro } from './date-picker-pro';
+import { DraggableDirective, DroppableDirective, SortableDirective } from './dragdrop';
+import { Drawer, DrawerService } from './drawer';
+import { Dropdown, DropdownMenu } from './dropdown';
+import { EditableSelect } from './editable-select';
+import { Form, FormItem, FormOperation } from './form';
+import { Fullscreen } from './fullscreen';
+import { Gantt } from './gantt';
+import { Row, Col } from './grid';
+import { Icon, IconGroup } from './icon';
+import { ImagePreviewDirective, ImagePreviewService } from './image-preview';
+import { Input } from './input';
+import { InputIcon } from './input-icon';
+import { InputNumber } from './input-number';
+import { Layout, Content, Header, Footer, Aside } from './layout';
+import { List, ListItem } from './list';
+import { LoadingService, LoadingDirective } from './loading';
+import { Mention } from './mention';
+import { Menu, SubMenu, MenuItem } from './menu';
+import { Message } from './message';
+import { Modal } from './modal';
+import { MultiAutoComplete } from './multi-auto-complete';
+import { NavSprite } from './nav-sprite';
+import { Notification, NotificationService } from './notification';
+import { FlexibleOverlay, FixedOverlay } from './overlay';
+import { Pagination } from './pagination';
+import { Panel, PanelHeader, PanelBody, PanelFooter } from './panel';
+import { Popover } from './popover';
+import { Progress } from './progress';
+import { QuadrantDiagram } from './quadrant-diagram';
+import { Radio, RadioGroup, RadioButton } from './radio';
+import { Rate } from './rate';
+import { ReadTip } from './read-tip';
+import { Result } from './result';
+import { RippleDirective } from './ripple';
+import { Search } from './search';
+import { Select, Option, OptionGroup } from './select';
+import { Skeleton, SkeletonItem } from './skeleton';
+import { Slider } from './slider';
+import { Splitter } from './splitter';
+import { Statistic } from './statistic';
+import { Status } from './status';
+import { Steps, Step } from './steps';
+import { StepsGuide, StepsGuideDirective } from './steps-guide';
+import { Sticky } from './sticky';
+import { Switch } from './switch';
+import { Table, Column } from './table';
+import { Tabs, Tab } from './tabs';
+import { Tag } from './tag';
+import { TagInput } from './tag-input';
+import { Textarea } from './textarea';
+import { TimePicker } from './time-picker';
+import { TimeSelect } from './time-select';
+import { Timeline, TimelineItem } from './timeline';
+import { Tooltip } from './tooltip';
+import { Transfer } from './transfer';
+import { Tree } from './tree';
+import { TreeSelect } from './tree-select';
+import { Upload } from './upload';
+import { VirtualList } from './virtual-list';
+import './style/devui.scss';
+export { Accordion, Alert, Anchor, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxGroup, CheckboxButton, Collapse, CollapseItem, ColorPicker, Comment, Countdown, DatePicker, StickSlider, DatePickerPro, DRangeDatePickerPro, DraggableDirective, DroppableDirective, SortableDirective, Drawer, DrawerService, Dropdown, DropdownMenu, EditableSelect, Form, FormItem, FormOperation, Fullscreen, Gantt, Row, Col, Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, Input, InputIcon, InputNumber, Layout, Content, Header, Footer, Aside, List, ListItem, LoadingService, LoadingDirective, Mention, Menu, SubMenu, MenuItem, Message, Modal, MultiAutoComplete, NavSprite, Notification, NotificationService, FlexibleOverlay, FixedOverlay, Pagination, Panel, PanelHeader, PanelBody, PanelFooter, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, RadioButton, Rate, ReadTip, Result, RippleDirective, Search, Select, Option, OptionGroup, Skeleton, SkeletonItem, Slider, Splitter, Statistic, Status, Steps, Step, StepsGuide, StepsGuideDirective, Sticky, Switch, Table, Column, Tabs, Tab, Tag, TagInput, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Transfer, Tree, TreeSelect, Upload, VirtualList };
+declare const _default: {
+    version: string;
+    install(app: App): void;
+};
+export default _default;

package/vue-devui.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { createVNode, defineComponent, ref, onMounted, Transition, withDirectives, vShow, nextTick, watch, provide, reactive, toRefs, onUnmounted, mergeProps, unref, withModifiers, Comment, Text, h, Fragment, inject, cloneVNode, computed, Teleport, createTextVNode, onBeforeUnmount, render, getCurrentInstance, resolveDirective, resolveDynamicComponent, isVNode, toRef, shallowRef, onBeforeMount, onUpdated, toRaw, watchEffect, renderSlot, useSlots, createApp, resolveComponent, shallowReactive, effect, TransitionGroup } from "vue";
+import { createVNode, defineComponent, ref, onMounted, Transition, withDirectives, vShow, nextTick, watch, provide, reactive, toRefs, onUnmounted, mergeProps, unref, withModifiers, Comment, Text, h, Fragment, inject, cloneVNode, computed, Teleport, createTextVNode, onBeforeUnmount, render, getCurrentInstance, resolveDirective, resolveDynamicComponent, isVNode, resolveComponent, toRef, shallowRef, onBeforeMount, onUpdated, toRaw, watchEffect, renderSlot, useSlots, createApp, shallowReactive, effect, TransitionGroup } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
 const AlertCloseIcon = () => createVNode("svg", {
@@ -9764,7 +9764,7 @@ var Button = defineComponent({
     };
     return () => {
       var _a, _b;
-      return withDirectives(createVNode("button", {
+      return createVNode("button", {
         "class": classes.value,
         "disabled": disabled.value,
         "onClick": onClick
@@ -9773,9 +9773,15 @@ var Button = defineComponent({
         "size": "var(--devui-font-size, 12px)",
         "color": "",
         "class": iconClass.value
-      }, null), createVNode("span", {
+      }, null), withDirectives(createVNode("div", {
+        "class": "loading-icon__container"
+      }, [createVNode(resolveComponent("d-icon"), {
+        "name": "icon-loading",
+        "class": "button-icon-loading",
+        "color": "#BBDEFB"
+      }, null)]), [[vShow, loading2.value]]), createVNode("span", {
         "class": "button-content"
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("loading"), loading2.value]]);
+      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)])]);
     };
   }
 });
@@ -12550,6 +12556,7 @@ var VirtualList = defineComponent({
       const newTop = newScrollTop;
       syncScrollTop(newTop);
     };
+    const oldScrollTop = ref(0);
     const onComponentScroll = (e) => {
       var _a, _b;
       const {
@@ -12558,7 +12565,10 @@ var VirtualList = defineComponent({
       if (Math.abs(newScrollTop - state.scrollTop) >= 1) {
         syncScrollTop(newScrollTop);
       }
-      (_b = (_a = barRef == null ? void 0 : barRef.value) == null ? void 0 : _a.onShowBar) == null ? void 0 : _b.call(_a);
+      if (oldScrollTop.value) {
+        (_b = (_a = barRef == null ? void 0 : barRef.value) == null ? void 0 : _a.onShowBar) == null ? void 0 : _b.call(_a);
+      }
+      oldScrollTop.value = newScrollTop;
       ctx2.emit("scroll", e);
     };
     const [onRawWheel, onFireFoxScroll] = useFrameWheel(isVirtual, isScrollAtTop, isScrollAtBottom, (offsetY) => {
@@ -16988,10 +16998,10 @@ var Mention = defineComponent({
       if (props.trigger.includes(val[0])) {
         showSuggestions.value = true;
         if (props.position === "top") {
-          nextTick(() => {
+          setTimeout(() => {
             const height = window.getComputedStyle(suggestionsDom.value, null).height;
             suggestionsTop.value = -Number(height.replace("px", ""));
-          });
+          }, 0);
         }
         filteredSuggestions.value = suggestions.value.filter((item) => String(item[props.dmValueParse.value]).toLocaleLowerCase().includes(val.slice(1).toLocaleLowerCase()));
       } else {
@@ -20603,7 +20613,12 @@ var PageSize = defineComponent({
         prefix: () => createVNode("span", null, [currentPageSize.value])
       })]),
       menu: () => createVNode("ul", null, [pageSizeOptions.value.map((item, index2) => createVNode("li", {
-        "onClick": withModifiers(pageSizeChange, ["stop"]),
+        "class": {
+          active: item === currentPageSize.value
+        },
+        "onClick": withModifiers(pageSizeChange.bind(null, {
+          value: item
+        }), ["stop"]),
         "key": index2
       }, [item]))])
     }), createVNode("span", {
@@ -22016,6 +22031,24 @@ const keydownHandles = (ctx2, keywords, props) => {
   };
 };
 var search = "";
+const SearchCloseIcon = () => createVNode("svg", {
+  "viewBox": "0 0 1024 1024",
+  "width": "12px",
+  "height": "12px"
+}, [createVNode("path", {
+  "d": "M940.8 207.530667L818.602667 85.333333l-305.493334 305.493334L207.616 85.333333       85.333333 207.530667l305.493334 305.493333L85.333333 818.517333l122.282667 122.282667       305.493333-305.493333 305.493334 305.493333 122.197333-122.282667-305.493333-305.493333z",
+  "p-id": "30810"
+}, null)]);
+const SearchIcon = () => createVNode("svg", {
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "width": "12px",
+  "height": "12px"
+}, [createVNode("path", {
+  "d": "M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288       358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z",
+  "fill": "#262626",
+  "p-id": "32547"
+}, null)]);
 var Search = defineComponent({
   name: "DSearch",
   props: searchProps,
@@ -22066,25 +22099,13 @@ var Search = defineComponent({
       }, [props.iconPosition === "left" && createVNode("div", {
         "class": ns2.e("icon"),
         "onClick": onClickHandle
-      }, [createVNode(DIcon, {
-        "name": "search",
-        "size": "inherit",
-        "key": "search"
-      }, null)]), createVNode(DInput, inputProps2, null), clearIconShow.value && createVNode("div", {
+      }, [createVNode(SearchIcon, null, null)]), createVNode(DInput, inputProps2, null), clearIconShow.value && createVNode("div", {
         "class": ns2.e("clear"),
         "onClick": onClearHandle
-      }, [createVNode(DIcon, {
-        "name": "close",
-        "size": "inherit",
-        "key": "close"
-      }, null)]), props.iconPosition === "right" && createVNode("div", {
+      }, [createVNode(SearchCloseIcon, null, null)]), props.iconPosition === "right" && createVNode("div", {
         "class": ns2.e("icon"),
         "onClick": onClickHandle
-      }, [createVNode(DIcon, {
-        "name": "search",
-        "size": "inherit",
-        "key": "search"
-      }, null)])]);
+      }, [createVNode(SearchIcon, null, null)])]);
     };
   }
 });
@@ -30147,7 +30168,7 @@ const installs = [
   UploadInstall
 ];
 var vueDevui = {
-  version: "1.2.0",
+  version: "1.3.1",
   install(app) {
     installs.forEach((p) => app.use(p));
   }