vue-devui 1.0.0 → 1.1.0

package/README.md

@@ -12,7 +12,7 @@ English | [简体中文](README.zh-CN.md)
 
 🌈 Features：
 
-- 📦 40 high-quality components that are simple, easy to use, and flexible.
+- 📦 55 high-quality components that are simple, easy to use, and flexible.
 - 🔑 Support for TypeScript.
 - ⛰️ Support for Nuxt3.
 - ⚡ Support for on-demand import.
@@ -21,12 +21,27 @@ English | [简体中文](README.zh-CN.md)
 
 ## 🔧 Usage
 
-The first step is to install vue devui:
+First install vue-devui with npm, yarn or pnpm.
 
+Install with npm
+
+```sh
+npm install vue-devui --save
 ```
-npm i vue-devui
+
+Install with yarn
+
+```sh
+yarn add vue-devui
 ```
 
+Install with pnpm
+
+```sh
+pnpm add vue-devui
+```
+
+
 Then import `DevUI` in the `main.ts` file:
 
 ```ts
@@ -50,20 +65,27 @@ Then you can use the vue devui component(such as `<d-button>`) in the `App.vue`
 
 ## 🖥️ Development
 
-```shell
+```sh
 git clone git@github.com:DevCloudFE/vue-devui.git
 cd vue-devui
-pnpm i
+pnpm install
 pnpm dev
 ```
 
 Open your browser and visit: [http://localhost:3000/](http://localhost:3000/).
 
+Or you can run other command
+
+```sh
+pnpm scripts
+```
+
 ## 🤝 Contributing
 
 Welcome to join our Vue DevUI open source project!🎉
 
 By participating in the Vue DevUI project, we can together:
+
 - 🔥 Learn the latest cool `Vite` + `Vue3` + `TypeScript` + `JSX` technology.
 - 🎁 Learn how to design and develop UI components.
 - ⭐ Hone programming skills and learn excellent programming practice.
@@ -144,6 +166,15 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/79E"><img src="https://avatars.githubusercontent.com/u/71202421?v=4?s=100" width="100px;" alt=""/><br /><sub><b>79</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=79E" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/SituC"><img src="https://avatars.githubusercontent.com/u/29355875?v=4?s=100" width="100px;" alt=""/><br /><sub><b>wailen</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=SituC" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/JensonMiao"><img src="https://avatars.githubusercontent.com/u/46488783?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jenson</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=JensonMiao" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/dbsdaicheng"><img src="https://avatars.githubusercontent.com/u/62135142?v=4?s=100" width="100px;" alt=""/><br /><sub><b>dbsdaicheng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=dbsdaicheng" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/qinwencheng"><img src="https://avatars.githubusercontent.com/u/24841685?v=4?s=100" width="100px;" alt=""/><br /><sub><b>qinwencheng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=qinwencheng" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/angelanana"><img src="https://avatars.githubusercontent.com/u/63281354?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Angelanana</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=angelanana" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/joo1es"><img src="https://avatars.githubusercontent.com/u/76929557?v=4?s=100" width="100px;" alt=""/><br /><sub><b>joo1es</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=joo1es" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/handsomezyw"><img src="https://avatars.githubusercontent.com/u/34366225?v=4?s=100" width="100px;" alt=""/><br /><sub><b>handsomezyw</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=handsomezyw" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/iamyoki"><img src="https://avatars.githubusercontent.com/u/74389358?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yoki</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=iamyoki" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/LadyChatterleyLover"><img src="https://avatars.githubusercontent.com/u/35223515?v=4?s=100" width="100px;" alt=""/><br /><sub><b>luopei</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=LadyChatterleyLover" title="Code">💻</a></td>
   </tr>
 </table>
 

package/alert/style.css

@@ -1 +1 @@
-.devui-alert{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);border:1px solid transparent;padding:8px 16px;line-height:24px;border-radius:var(--devui-border-radius, 4px);display:flex;align-items:center;position:relative;width:100%;overflow:hidden}.devui-alert.devui-alert--center{justify-content:center}.devui-alert .devui-alert__content{display:flex;padding:0 16px 0 4px;word-break:normal;word-wrap:break-word}.devui-alert .devui-alert__close-icon{color:var(--devui-text, #252b3a);opacity:1;line-height:26px;height:24px;position:absolute;right:16px;top:8px}.devui-alert .devui-alert__close-icon>svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__close-icon span{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);font-weight:700}.devui-alert.devui-alert--success{background-color:var(--devui-success-bg, #edfff9);border-color:var(--devui-success-line, #50d4ab);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--success .devui-alert__close-icon>svg path{fill:var(--devui-success-line, #50d4ab)}.devui-alert.devui-alert--info{background-color:var(--devui-info-bg, #f2f5fc);border-color:var(--devui-info-line, #5e7ce0);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--info .devui-alert__close-icon>svg path{fill:var(--devui-info-line, #5e7ce0)}.devui-alert.devui-alert--warning{background-color:var(--devui-warning-bg, #fff3e8);border-color:var(--devui-warning-line, #fa9841);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--warning .devui-alert__close-icon>svg path{fill:var(--devui-warning-line, #fa9841)}.devui-alert.devui-alert--danger{background-color:var(--devui-danger-bg, #ffeeed);border-color:var(--devui-danger-line, #f66f6a);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--danger .devui-alert__close-icon>svg path{fill:var(--devui-danger-line, #f66f6a)}.devui-alert.devui-alert--simple{border-color:var(--devui-line, #d7d8da);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--simple .devui-alert__close-icon>svg path{fill:var(--devui-text-weak, #575d6c)}.devui-alert svg.devui-alert__icon{width:16px;height:16px;vertical-align:middle;transform:translateY(-1px)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g path{fill:var(--devui-success-line, #50d4ab)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g polygon{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-outer{fill:var(--devui-warning-line, #fa9841)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-outer{fill:var(--devui-info-line, #5e7ce0)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-outer{fill:var(--devui-danger-line, #f66f6a)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert__icon-wrap{margin-right:4px}.devui-alter--close{margin:0;padding-top:0;padding-bottom:0;transform-origin:50% 0;transition:all .3s ease-in-out}.devui-alert-leave-active{animation:alertUpOut .3s ease-in-out;animation-fill-mode:both}@keyframes alertUpOut{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(0);transform-origin:0% 0%;opacity:0}}
+.devui-alert{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);border:1px solid transparent;padding:8px 16px;line-height:24px;border-radius:var(--devui-border-radius, 2px);display:flex;align-items:center;position:relative;width:100%;overflow:hidden}.devui-alert.devui-alert--center{justify-content:center}.devui-alert .devui-alert__content{display:flex;padding:0 16px 0 4px;word-break:normal;word-wrap:break-word}.devui-alert .devui-alert__close-icon{color:var(--devui-text, #252b3a);opacity:1;line-height:26px;height:24px;position:absolute;right:16px;top:8px}.devui-alert .devui-alert__close-icon>svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__close-icon span{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);font-weight:700}.devui-alert.devui-alert--success{background-color:var(--devui-success-bg, #edfff9);border-color:var(--devui-success-line, #50d4ab);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--success .devui-alert__close-icon>svg path{fill:var(--devui-success-line, #50d4ab)}.devui-alert.devui-alert--info{background-color:var(--devui-info-bg, #f2f5fc);border-color:var(--devui-info-line, #5e7ce0);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--info .devui-alert__close-icon>svg path{fill:var(--devui-info-line, #5e7ce0)}.devui-alert.devui-alert--warning{background-color:var(--devui-warning-bg, #fff3e8);border-color:var(--devui-warning-line, #fa9841);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--warning .devui-alert__close-icon>svg path{fill:var(--devui-warning-line, #fa9841)}.devui-alert.devui-alert--danger{background-color:var(--devui-danger-bg, #ffeeed);border-color:var(--devui-danger-line, #f66f6a);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--danger .devui-alert__close-icon>svg path{fill:var(--devui-danger-line, #f66f6a)}.devui-alert.devui-alert--simple{border-color:var(--devui-line, #d7d8da);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--simple .devui-alert__close-icon>svg path{fill:var(--devui-text-weak, #575d6c)}.devui-alert svg.devui-alert__icon{width:16px;height:16px;vertical-align:middle;transform:translateY(-1px)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g path{fill:var(--devui-success-line, #50d4ab)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g polygon{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-outer{fill:var(--devui-warning-line, #fa9841)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-outer{fill:var(--devui-info-line, #5e7ce0)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-outer{fill:var(--devui-danger-line, #f66f6a)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert__icon-wrap{margin-right:4px}.devui-alter--close{margin:0;padding-top:0;padding-bottom:0;transform-origin:50% 0;transition:all .3s ease-in-out}.devui-alert-leave-active{animation:alertUpOut .3s ease-in-out;animation-fill-mode:both}@keyframes alertUpOut{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(0);transform-origin:0% 0%;opacity:0}}

package/auto-complete/index.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, nextTick, defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, unref, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, withModifiers, createTextVNode, onBeforeUnmount, render, getCurrentInstance, resolveDirective, vShow, resolveDynamicComponent, isVNode } from "vue";
+import { ref, nextTick, defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, unref, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, render, getCurrentInstance, resolveDirective, vShow, resolveDynamicComponent, isVNode } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const defaultFormatter = (item) => {
   if (typeof item === "string") {
@@ -6171,6 +6171,10 @@ const flexibleOverlayProps = {
   isArrowCenter: {
     type: Boolean,
     default: true
+  },
+  clickEventBubble: {
+    type: Boolean,
+    default: false
   }
 };
 function getScrollParent(element) {
@@ -6285,6 +6289,9 @@ const FlexibleOverlay = defineComponent({
     expose
   }) {
     const ns2 = useNamespace("flexible-overlay");
+    const {
+      clickEventBubble
+    } = toRefs(props);
     const {
       arrowRef,
       overlayRef,
@@ -6298,7 +6305,10 @@ const FlexibleOverlay = defineComponent({
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
         "class": ns2.b()
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+      }, attrs, {
+        "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
+        "onPointerup": withModifiers(() => ({}), ["stop"])
+      }), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
         "ref": arrowRef,
         "class": ns2.e("arrow")
       }, null)]);
@@ -6417,7 +6427,7 @@ const TransformOriginMap = {
 function usePopover(props, visible, placement, origin, popoverRef) {
   const { trigger, isOpen } = toRefs(props);
   const overlayStyles = computed(() => ({
-    zIndex: 1060,
+    zIndex: "var(--devui-z-index-pop-up, 1060)",
     transformOrigin: TransformOriginMap[placement.value]
   }));
   const onDocumentClick = (e) => {
@@ -6660,8 +6670,6 @@ var Popover = defineComponent({
           "style": overlayStyles.value
         }, attrs, {
           "onPositionChange": handlePositionChange,
-          "onClick": withModifiers(() => ({}), ["stop"]),
-          "onPointerup": withModifiers(() => ({}), ["stop"]),
           "onMouseenter": onMouseenter,
           "onMouseleave": onMouseleave
         }), {
@@ -6860,9 +6868,7 @@ var FormControl = defineComponent({
     }, {
       default: () => {
         var _a, _b;
-        return [createVNode("div", {
-          "class": ns2.e("control-content")
-        }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]), createTextVNode(",")];
+        return [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)];
       }
     }), showFeedback.value && createVNode("span", {
       "class": [ns2.e("feedback-icon"), ns2.em("feedback-icon", feedbackStatus.value)]
@@ -8197,7 +8203,7 @@ class LoadingOptions {
 }
 var loading = "";
 var Loading = defineComponent({
-  name: "DLoading",
+  name: "Loading",
   inheritAttrs: false,
   props: loadingProps,
   setup(props) {
@@ -8350,12 +8356,12 @@ const handleProps = (el, vprops) => {
   const props = __spreadValues(__spreadValues({}, new LoadingOptions()), vprops);
   const loadingTemplateRef = props.loadingTemplateRef;
   const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
-  el.style.position = props.positionType;
+  el.style.position = props.positionType || "relative";
   el.options = props;
   el.instance = loadingInstance;
   el.mask = (_a = loadingInstance == null ? void 0 : loadingInstance.proxy) == null ? void 0 : _a.$el;
 };
-const loadingDirective = {
+const LoadingDirective = {
   mounted: function(el, binding, vnode) {
     handleProps(el, vnode.props);
     removeAttribute(el);
@@ -8390,7 +8396,8 @@ function deepAssign(...objects) {
 var zhCN = {
   pagination: {
     totalItemText: "\u6240\u6709\u6761\u76EE",
-    goToText: "\u8DF3\u81F3"
+    goToText: "\u8DF3\u81F3",
+    perPage: "\u6761/\u9875"
   },
   accordion: {
     loading: "\u52A0\u8F7D\u4E2D",
@@ -8541,7 +8548,7 @@ function createI18nTranslate(name, app, newPrefix) {
 var DAutoCompleteDropdown = defineComponent({
   name: "DAutoCompleteDropdown",
   directives: {
-    dLoading: loadingDirective
+    Loading: LoadingDirective
   },
   setup(props, ctx2) {
     const app = getCurrentInstance();
@@ -8611,7 +8618,7 @@ var DAutoCompleteDropdown = defineComponent({
         "class": ns2.e("no-result-template")
       }, [createVNode("div", {
         "class": noDataNs.b()
-      }, [ctx2.slots.noResultItemTemplate()])])])]), [[resolveDirective("dLoading"), showLoading.value], [vShow, visible.value && searchList.value.length > 0 || ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value || isSearching && ctx2.slots.searchingTemplate && (searchStatus == null ? void 0 : searchStatus.value)]]);
+      }, [ctx2.slots.noResultItemTemplate()])])])]), [[resolveDirective("loading"), showLoading.value], [vShow, visible.value && searchList.value.length > 0 || ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value || isSearching && ctx2.slots.searchingTemplate && (searchStatus == null ? void 0 : searchStatus.value)]]);
     };
   }
 });
@@ -8824,7 +8831,8 @@ var Icon = defineComponent({
     const wrapClassed = computed(() => ({
       [ns2.e("container")]: true,
       [ns2.m("disabled")]: disabled.value,
-      [ns2.m("operable")]: operable.value
+      [ns2.m("operable")]: operable.value,
+      [ns2.m("no-slots")]: !Object.keys(ctx2.slots).length
     }));
     const onClick = (e) => {
       if (disabled.value) {
@@ -8959,7 +8967,10 @@ var AutoComplete = defineComponent({
           "origin": origin.value,
           "position": position.value,
           "modelValue": visible.value,
-          "onUpdate:modelValue": ($event) => visible.value = $event
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          "style": {
+            zIndex: "var(--devui-z-index-dropdown, 1052)"
+          }
         }, {
           default: () => [createVNode("div", {
             "class": ns2.e("menu"),