vue-devui 1.0.0-beta.17 → 1.0.0-beta.18

package/README.md

@@ -1,179 +1,187 @@
-<p align="center">
-  <a href="https://devui.design/home" target="_blank" rel="noopener noreferrer">
-    <img alt="DevUI Logo" src="https://github.com/DevCloudFE/vue-devui/raw/dev/packages/devui-vue/public/logo.svg" width="180" style="max-width:100%;">
-  </a>
-</p>
-
-Vue DevUI 是 Vue3 版本的 DevUI 组件库，基于 [https://github.com/devcloudfe/ng-devui](https://github.com/devcloudfe/ng-devui)，倡导`沉浸`、`灵活`、`至简`的设计价值观。
-
-DevUI 官方网站：[https://devui.design](https://devui.design)
-
-## 当前状态: Beta
-
-该项目还处于孵化和演进阶段，欢迎大家参与到 Vue DevUI 项目的建设中来！🎉🎉
-
-通过参与 Vue DevUI 项目，你可以：
-- 🔥 学习最新的 `Vite`+`Vue3`+`TypeScript`+`JSX` 技术
-- 🎁 学习如何设计和开发组件
-- ⭐ 参与到开源社区中来
-- 🎊 结识一群热爱学习、热爱开源的朋友
-
-[贡献指南](https://github.com/DevCloudFE/vue-devui/wiki/%E8%B4%A1%E7%8C%AE%E6%8C%87%E5%8D%97)
-
-## 快速开始
-
-### 1 安装依赖
-
-```
-pnpm i
-```
-
-### 2 启动
-
-```
-pnpm dev
-```
-
-### 3 访问
-
-[http://localhost:3000/](http://localhost:3000/)
-
-### 4 生产打包
-
-```
-pnpm build
-```
-
-## 使用 Vue DevUI
-
-### 1. 安装
-
-```
-pnpm i vue-devui
-```
-
-### 2. 全量引入
-
-在`main.ts`文件中编写以下代码：
-```
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// Step 1: 引入 Vue DevUI 组件库
-import DevUI from 'vue-devui'
-// Step 2: 引入组件库样式
-import 'vue-devui/style.css'
-
-createApp(App)
-.use(DevUI) // Step 3: 使用 Vue DevUI
-.mount('#app')
-```
-
-### 3. 按需引入
-
-除了全量引入，我们也支持单个组件按需引入。
-
-在`main.ts`文件中编写以下代码：
-```
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// Step 1: 引入单个组件
-import { Button } from 'vue-devui'
-// or import Button from 'vue-devui/button'
-// Step 2: 引入组件样式
-import 'vue-devui/button/style.css'
-
-createApp(App)
-.use(Button) // Step 3: 使用组件
-.mount('#app')
-```
-
-### 4. 配置自动按需引入`unplugin-vue-components`（推荐）
-
-配置`unplugin-vue-components`插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：
-
-在`vite.config.ts`文件中添加以下代码：
-```
-import Components from 'unplugin-vue-components/vite'
-import { DevUiResolver } from 'unplugin-vue-components/resolvers'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-
-    // 新增
-    Components({
-      resolvers: [
-        DevUiResolver()
-      ]
-    })
-  ]
-})
-```
-
-配置了以上插件，就可以直接在代码中使用`Vue DevUI`的组件，而无需在`main.ts`文件中引入`Vue DevUI`。
-
-### 5. 使用
-
-```
-<template>
-  <d-button>确定</d-button>
-</template>
-```
-
-## 图标库
-
-图标库推荐使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
-
-### 使用DevUI图标库
-
-#### 安装
-
-```
-pnpm i @devui-design/icons
-```
-
-#### 引入
-
-在`main.ts`文件中，编写以下代码：
-
-```
-import '@devui-design/icons/icomoon/devui-icon.css'
-```
-
-#### 使用
-
-```
-<d-icon name="love" color="red"></d-icon>
-```
-
-## Contributors ✨
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="https://juejin.cn/user/712139267650141"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kagol</b></sub></a><br /><a href="#maintenance-kagol" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/TinsFox"><img src="https://avatars.githubusercontent.com/u/33956589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>TinsFox</b></sub></a><br /><a href="#maintenance-TinsFox" title="Maintenance">🚧</a> <a href="#infra-TinsFox" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
-    <td align="center"><a href="https://github.com/lnzhangsong"><img src="https://avatars.githubusercontent.com/u/15092594?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nif</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=lnzhangsong" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Zcating"><img src="https://avatars.githubusercontent.com/u/13329558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zcating</b></sub></a><br /><a href="#maintenance-Zcating" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=Zcating" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/sufuwang"><img src="https://avatars.githubusercontent.com/u/46395105?v=4?s=100" width="100px;" alt=""/><br /><sub><b>王凯</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=sufuwang" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/iel-h"><img src="https://avatars.githubusercontent.com/u/53589602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>iel</b></sub></a><br /><a href="#maintenance-iel-h" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=iel-h" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/chenxi24"><img src="https://avatars.githubusercontent.com/u/40349890?v=4?s=100" width="100px;" alt=""/><br /><sub><b>chenxi24</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=chenxi24" title="Code">💻</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
-
-## License
-
-[MIT](https://github.com/DevCloudFE/vue-devui/blob/dev/LICENSE)
+<p align="center">
+  <a href="https://devui.design/home" target="_blank" rel="noopener noreferrer">
+    <img alt="DevUI Logo" src="https://github.com/DevCloudFE/vue-devui/raw/dev/packages/devui-vue/public/logo.svg" width="180" style="max-width:100%;">
+  </a>
+</p>
+
+Vue DevUI 是 Vue3 版本的 DevUI 组件库，基于 [https://github.com/devcloudfe/ng-devui](https://github.com/devcloudfe/ng-devui)，倡导`沉浸`、`灵活`、`至简`的设计价值观。
+
+DevUI 官方网站：[https://devui.design](https://devui.design)
+
+## 当前状态: Beta
+
+该项目还处于孵化和演进阶段，欢迎大家参与到 Vue DevUI 项目的建设中来！🎉🎉
+
+通过参与 Vue DevUI 项目，你可以：
+- 🔥 学习最新的 `Vite`+`Vue3`+`TypeScript`+`JSX` 技术
+- 🎁 学习如何设计和开发组件
+- ⭐ 参与到开源社区中来
+- 🎊 结识一群热爱学习、热爱开源的朋友
+
+[贡献指南](https://github.com/DevCloudFE/vue-devui/wiki/%E8%B4%A1%E7%8C%AE%E6%8C%87%E5%8D%97)
+
+## 快速开始
+
+### 1 安装依赖
+
+```
+pnpm i
+```
+
+### 2 启动
+
+```
+pnpm dev
+```
+
+### 3 访问
+
+[http://localhost:3000/](http://localhost:3000/)
+
+### 4 生产打包
+
+```
+pnpm build
+```
+
+## 使用 Vue DevUI
+
+### 1. 安装
+
+```
+pnpm i vue-devui
+```
+
+### 2. 全量引入
+
+在`main.ts`文件中编写以下代码：
+```
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// Step 1: 引入 Vue DevUI 组件库
+import DevUI from 'vue-devui'
+// Step 2: 引入组件库样式
+import 'vue-devui/style.css'
+
+createApp(App)
+.use(DevUI) // Step 3: 使用 Vue DevUI
+.mount('#app')
+```
+
+### 3. 按需引入
+
+除了全量引入，我们也支持单个组件按需引入。
+
+在`main.ts`文件中编写以下代码：
+```
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// Step 1: 引入单个组件
+import { Button } from 'vue-devui'
+// or import Button from 'vue-devui/button'
+// Step 2: 引入组件样式
+import 'vue-devui/button/style.css'
+
+createApp(App)
+.use(Button) // Step 3: 使用组件
+.mount('#app')
+```
+
+### 4. 配置自动按需引入`unplugin-vue-components`（推荐）
+
+配置`unplugin-vue-components`插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：
+
+在`vite.config.ts`文件中添加以下代码：
+```
+import Components from 'unplugin-vue-components/vite'
+import { DevUiResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+
+    // 新增
+    Components({
+      resolvers: [
+        DevUiResolver()
+      ]
+    })
+  ]
+})
+```
+
+配置了以上插件，就可以直接在代码中使用`Vue DevUI`的组件，而无需在`main.ts`文件中引入`Vue DevUI`。
+
+### 5. 使用
+
+```
+<template>
+  <d-button>确定</d-button>
+</template>
+```
+
+## 图标库
+
+图标库推荐使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
+
+### 使用DevUI图标库
+
+#### 安装
+
+```
+pnpm i @devui-design/icons
+```
+
+#### 引入
+
+在`main.ts`文件中，编写以下代码：
+
+```
+import '@devui-design/icons/icomoon/devui-icon.css'
+```
+
+#### 使用
+
+```
+<d-icon name="love" color="red"></d-icon>
+```
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://juejin.cn/user/712139267650141"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kagol</b></sub></a><br /><a href="#maintenance-kagol" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Code">💻</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=kagol" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/TinsFox"><img src="https://avatars.githubusercontent.com/u/33956589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>TinsFox</b></sub></a><br /><a href="#maintenance-TinsFox" title="Maintenance">🚧</a> <a href="#infra-TinsFox" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/lnzhangsong"><img src="https://avatars.githubusercontent.com/u/15092594?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nif</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=lnzhangsong" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Zcating"><img src="https://avatars.githubusercontent.com/u/13329558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zcating</b></sub></a><br /><a href="#maintenance-Zcating" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=Zcating" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/sufuwang"><img src="https://avatars.githubusercontent.com/u/46395105?v=4?s=100" width="100px;" alt=""/><br /><sub><b>王凯</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=sufuwang" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/iel-h"><img src="https://avatars.githubusercontent.com/u/53589602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>iel</b></sub></a><br /><a href="#maintenance-iel-h" title="Maintenance">🚧</a> <a href="https://github.com/DevCloudFE/vue-devui/commits?author=iel-h" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/chenxi24"><img src="https://avatars.githubusercontent.com/u/40349890?v=4?s=100" width="100px;" alt=""/><br /><sub><b>chenxi24</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=chenxi24" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/asdlml6"><img src="https://avatars.githubusercontent.com/u/61737780?v=4?s=100" width="100px;" alt=""/><br /><sub><b>小九九</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=asdlml6" title="Code">💻</a></td>
+    <td align="center"><a href="http://blog.alanlee.top"><img src="https://avatars.githubusercontent.com/u/42601044?v=4?s=100" width="100px;" alt=""/><br /><sub><b>AlanLee</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=AlanLee97" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ForeseeBear"><img src="https://avatars.githubusercontent.com/u/15258339?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Echo</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=ForeseeBear" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/GaoNeng-wWw"><img src="https://avatars.githubusercontent.com/u/31283122?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GaoNeng</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=GaoNeng-wWw" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/xingyan95"><img src="https://avatars.githubusercontent.com/u/11143986?v=4?s=100" width="100px;" alt=""/><br /><sub><b>行言</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xingyan95" title="Code">💻</a></td>
+    <td align="center"><a href="https://devin974.github.io/"><img src="https://avatars.githubusercontent.com/u/67035714?v=4?s=100" width="100px;" alt=""/><br /><sub><b>devin</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=devin974" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+
+## License
+
+[MIT](https://github.com/DevCloudFE/vue-devui/blob/dev/LICENSE)

package/button/index.es.js

@@ -18,7 +18,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, createVNode, ref, h, render, computed, mergeProps, withDirectives, resolveDirective } from "vue";
+import { defineComponent, createVNode, ref, h, render, computed, toRefs, withDirectives, resolveDirective } from "vue";
 var Icon = defineComponent({
   name: "DIcon",
   props: {
@@ -265,49 +265,59 @@ const loadingDirective = {
   }
 };
 const buttonProps = {
-  type: {
-    type: String,
-    default: "button"
-  },
   variant: {
     type: String,
-    default: "primary"
+    default: "outline"
   },
   size: {
     type: String,
     default: "md"
   },
-  position: {
-    type: String,
-    default: "default"
-  },
-  bordered: {
-    type: Boolean,
-    default: false
+  color: {
+    type: String
   },
   icon: {
     type: String,
     default: ""
   },
-  showLoading: {
+  loading: {
     type: Boolean,
     default: false
   },
-  width: {
-    type: String
-  },
   disabled: {
     type: Boolean,
     default: false
-  },
-  autofocus: {
-    type: Boolean,
-    default: false
-  },
-  onClick: {
-    type: Function
   }
 };
+function useButton(props, ctx) {
+  const hasContent = computed(() => ctx.slots.default);
+  const colorMap = {
+    solid: "primary",
+    outline: "secondary",
+    text: "secondary"
+  };
+  const defaultColor = colorMap[props.variant];
+  const classes = computed(() => ({
+    "devui-btn": true,
+    [`devui-btn-${props.variant}`]: true,
+    [`devui-btn-${props.variant}-${props.color || defaultColor}`]: true,
+    [`devui-btn-${props.size}`]: true,
+    "devui-btn-icon-wrap": props.icon,
+    "devui-btn-icon": props.icon && !hasContent.value && props.variant !== "solid"
+  }));
+  const iconClass = computed(() => {
+    if (!props.icon) {
+      return;
+    }
+    const origin = "devui-icon-fix icon";
+    if (hasContent.value) {
+      return `${origin} clear-right-5`;
+    } else {
+      return origin;
+    }
+  });
+  return { classes, iconClass };
+}
 var button = "";
 var Button = defineComponent({
   name: "DButton",
@@ -315,81 +325,45 @@ var Button = defineComponent({
     devLoading: loadingDirective
   },
   props: buttonProps,
+  emits: ["click"],
   setup(props, ctx) {
-    const buttonContent = ref(null);
+    const {
+      icon,
+      disabled,
+      loading: loading2
+    } = toRefs(props);
+    const {
+      classes,
+      iconClass
+    } = useButton(props, ctx);
     const onClick = (e) => {
-      var _a;
-      if (props.showLoading) {
+      if (loading2.value) {
         return;
       }
-      (_a = props.onClick) == null ? void 0 : _a.call(props, e);
+      ctx.emit("click", e);
     };
-    const hasContent = computed(() => ctx.slots.default);
-    const btnClass = computed(() => {
-      const {
-        variant,
-        size,
-        position,
-        bordered,
-        icon
-      } = props;
-      const origin = `devui-btn devui-btn-${variant} devui-btn-${size} devui-btn-${position}`;
-      const borderedClass = bordered ? "bordered" : "";
-      const btnIcon = !!icon && !hasContent.value && variant !== "primary" ? "d-btn-icon" : "";
-      const btnIconWrap = !!icon ? "d-btn-icon-wrap" : "";
-      return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
-    });
-    const iconClass = computed(() => {
-      if (!props.icon) {
-        return;
-      }
-      const origin = "devui-icon-fix icon";
-      if (hasContent.value) {
-        return `${origin} clear-right-5`;
-      } else {
-        return origin;
-      }
-    });
     return () => {
       var _a, _b;
-      const {
-        icon,
-        type,
-        disabled,
-        showLoading,
-        width
-      } = props;
-      return createVNode("div", mergeProps({
-        "class": "devui-btn-host"
-      }, ctx.attrs), [withDirectives(createVNode("button", {
-        "class": btnClass.value,
-        "type": type,
-        "disabled": disabled,
-        "style": {
-          width
-        },
+      return withDirectives(createVNode("button", {
+        "class": classes.value,
+        "disabled": disabled.value,
         "onClick": onClick
-      }, [!!icon ? createVNode(Icon, {
-        "name": icon,
+      }, [icon.value && createVNode(Icon, {
+        "name": icon.value,
+        "size": "12px",
         "class": iconClass.value
-      }, null) : null, createVNode("span", {
-        "class": "button-content",
-        "ref": buttonContent
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("devLoading"), showLoading]])]);
+      }, null), createVNode("span", {
+        "class": "button-content"
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("dLoading"), loading2.value]]);
     };
   }
 });
-defineComponent(Loading);
-Button.install = function(app) {
-  app.directive("dLoading", loadingDirective);
-  app.component(Button.name, Button);
-};
 var index = {
   title: "Button \u6309\u94AE",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(Button);
+    app.component(Button.name, Button);
   }
 };
 export { Button, buttonProps, index as default };

package/button/index.umd.js

@@ -1 +1 @@
-var F=Object.defineProperty;var $=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var S=(i,t,r)=>t in i?F(i,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[t]=r,u=(i,t)=>{for(var r in t||(t={}))W.call(t,r)&&S(i,r,t[r]);if($)for(var r of $(t))q.call(t,r)&&S(i,r,t[r]);return i};var l=(i,t,r)=>(S(i,typeof t!="symbol"?t+"":t,r),r);(function(i,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis!="undefined"?globalThis:i||self,t(i.index={},i.Vue))})(this,function(i,t){"use strict";var r=t.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(e){return u({},e)},render(){const{name:e,size:n,color:o,classPrefix:s}=this;return/^((https?):)?\/\//.test(e)?t.createVNode("img",{src:e,alt:e.split("/")[e.split("/").length-1],style:{width:n,verticalAlign:"text-bottom"}},null):t.createVNode("i",{class:`${s} ${s}-${e}`,style:{fontSize:n,color:o}},null)}});r.install=function(e){e.component(r.name,r)};class V{constructor(){l(this,"top","50%");l(this,"left","50%")}}const I={message:String,backdrop:Boolean,view:{type:Object,default:()=>new V},zIndex:Number,isFull:{type:Boolean,default:!1}};class O{constructor(){l(this,"target");l(this,"message");l(this,"loadingTemplateRef");l(this,"backdrop",!0);l(this,"positionType","relative");l(this,"view",new V);l(this,"zIndex")}}var Y="",C=t.defineComponent({name:"DLoading",inheritAttrs:!1,props:I,setup(e){const n={top:e.view.top,left:e.view.left,zIndex:e.zIndex};e.message||(n.background="none");const o=t.ref(!1);return{style:n,isShow:o,open:()=>{o.value=!0},close:()=>{o.value=!1}}},render(){var g;const{isShow:e,isFull:n,backdrop:o,style:s,message:a,$slots:m}=this;return e&&t.createVNode("div",{class:["devui-loading-contanier",n?"devui-loading--full":""]},[((g=m.default)==null?void 0:g.call(m))||t.createVNode("div",{class:"devui-loading-wrapper"},[o?t.createVNode("div",{class:"devui-loading-mask"},null):null,t.createVNode("div",{style:s,class:"devui-loading-area"},[t.createVNode("div",{class:"devui-busy-default-spinner"},[t.createVNode("div",{class:"devui-loading-bar1"},null),t.createVNode("div",{class:"devui-loading-bar2"},null),t.createVNode("div",{class:"devui-loading-bar3"},null),t.createVNode("div",{class:"devui-loading-bar4"},null)]),a?t.createVNode("span",{class:"devui-loading-text"},[a]):null])])])}});const P=Symbol("dev_component_container");function E(e,n,o=null){const s=t.h(e,u({},n),o),a=document.createElement("div");return s[P]=a,t.render(s,a),s.component}function j(e){t.render(null,e==null?void 0:e.vnode[P])}const D=t.defineComponent(C),f=new WeakSet,v=e=>{if(!e)return!0;if(Array.isArray(e))return e.length===0;if(e instanceof Set||e instanceof Map)return e.size===0;if(e instanceof Promise)return!1;if(typeof e=="object")try{return Object.keys(e).length===0}catch{return!1}return!1},k=e=>Object.prototype.toString.call(e).slice(8,-1).toLowerCase(),_=e=>{switch(k(e)){case"promise":return[e];case"array":return e.some(o=>k(o)!=="promise")?(console.error(new TypeError("Binding values should all be of type Promise")),"error"):e;default:return!1}},A=e=>{f.delete(e),e.instance.proxy.close(),j(e.instance)},x=(e,n)=>{if(n.value){const o=_(n.value);if(o==="error")return;e.instance.proxy.open(),e.appendChild(e.mask),f.add(e),o&&Promise.all(o).catch(s=>{console.error(new Error("Promise handling errors"),s)}).finally(()=>{A(e)})}else A(e)},B=e=>{e.removeAttribute("zindex"),e.removeAttribute("positiontype"),e.removeAttribute("backdrop"),e.removeAttribute("message"),e.removeAttribute("view"),e.removeAttribute("loadingtemplateref")},L=(e,n)=>{const o=u(u({},new O),n),s=o.loadingTemplateRef,a=E(D,u({},o),s?()=>s:null);e.style.position=o.positionType,e.options=o,e.instance=a,e.mask=a.proxy.$el},T={mounted:function(e,n,o){L(e,o.props),B(e),!v(n.value)&&x(e,n)},updated:function(e,n,o){!v(n.value)&&f.has(e)||v(n.value)&&!f.has(e)||(!f.has(e)&&L(e,o.props),B(e),x(e,n))}},z={type:{type:String,default:"button"},variant:{type:String,default:"primary"},size:{type:String,default:"md"},position:{type:String,default:"default"},bordered:{type:Boolean,default:!1},icon:{type:String,default:""},showLoading:{type:Boolean,default:!1},width:{type:String},disabled:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},onClick:{type:Function}};var G="",p=t.defineComponent({name:"DButton",directives:{devLoading:T},props:z,setup(e,n){const o=t.ref(null),s=d=>{var c;e.showLoading||(c=e.onClick)==null||c.call(e,d)},a=t.computed(()=>n.slots.default),m=t.computed(()=>{const{variant:d,size:c,position:w,bordered:N,icon:y}=e,b=`devui-btn devui-btn-${d} devui-btn-${c} devui-btn-${w}`,h=N?"bordered":"",R=!!y&&!a.value&&d!=="primary"?"d-btn-icon":"";return`${b} ${h} ${R} ${y?"d-btn-icon-wrap":""}`}),g=t.computed(()=>{if(!e.icon)return;const d="devui-icon-fix icon";return a.value?`${d} clear-right-5`:d});return()=>{var b,h;const{icon:d,type:c,disabled:w,showLoading:N,width:y}=e;return t.createVNode("div",t.mergeProps({class:"devui-btn-host"},n.attrs),[t.withDirectives(t.createVNode("button",{class:m.value,type:c,disabled:w,style:{width:y},onClick:s},[d?t.createVNode(r,{name:d,class:g.value},null):null,t.createVNode("span",{class:"button-content",ref:o},[(h=(b=n.slots).default)==null?void 0:h.call(b)])]),[[t.resolveDirective("devLoading"),N]])])}}});t.defineComponent(C),p.install=function(e){e.directive("dLoading",T),e.component(p.name,p)};var M={title:"Button \u6309\u94AE",category:"\u901A\u7528",status:"100%",install(e){e.use(p)}};i.Button=p,i.buttonProps=z,i.default=M,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+var D=Object.defineProperty;var P=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var v=(i,t,r)=>t in i?D(i,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[t]=r,u=(i,t)=>{for(var r in t||(t={}))_.call(t,r)&&v(i,r,t[r]);if(P)for(var r of P(t))I.call(t,r)&&v(i,r,t[r]);return i};var l=(i,t,r)=>(v(i,typeof t!="symbol"?t+"":t,r),r);(function(i,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis!="undefined"?globalThis:i||self,t(i.index={},i.Vue))})(this,function(i,t){"use strict";var r=t.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(e){return u({},e)},render(){const{name:e,size:o,color:n,classPrefix:a}=this;return/^((https?):)?\/\//.test(e)?t.createVNode("img",{src:e,alt:e.split("/")[e.split("/").length-1],style:{width:o,verticalAlign:"text-bottom"}},null):t.createVNode("i",{class:`${a} ${a}-${e}`,style:{fontSize:o,color:n}},null)}});r.install=function(e){e.component(r.name,r)};class b{constructor(){l(this,"top","50%");l(this,"left","50%")}}const C={message:String,backdrop:Boolean,view:{type:Object,default:()=>new b},zIndex:Number,isFull:{type:Boolean,default:!1}};class z{constructor(){l(this,"target");l(this,"message");l(this,"loadingTemplateRef");l(this,"backdrop",!0);l(this,"positionType","relative");l(this,"view",new b);l(this,"zIndex")}}var R="",T=t.defineComponent({name:"DLoading",inheritAttrs:!1,props:C,setup(e){const o={top:e.view.top,left:e.view.left,zIndex:e.zIndex};e.message||(o.background="none");const n=t.ref(!1);return{style:o,isShow:n,open:()=>{n.value=!0},close:()=>{n.value=!1}}},render(){var d;const{isShow:e,isFull:o,backdrop:n,style:a,message:s,$slots:c}=this;return e&&t.createVNode("div",{class:["devui-loading-contanier",o?"devui-loading--full":""]},[((d=c.default)==null?void 0:d.call(c))||t.createVNode("div",{class:"devui-loading-wrapper"},[n?t.createVNode("div",{class:"devui-loading-mask"},null):null,t.createVNode("div",{style:a,class:"devui-loading-area"},[t.createVNode("div",{class:"devui-busy-default-spinner"},[t.createVNode("div",{class:"devui-loading-bar1"},null),t.createVNode("div",{class:"devui-loading-bar2"},null),t.createVNode("div",{class:"devui-loading-bar3"},null),t.createVNode("div",{class:"devui-loading-bar4"},null)]),s?t.createVNode("span",{class:"devui-loading-text"},[s]):null])])])}});const h=Symbol("dev_component_container");function B(e,o,n=null){const a=t.h(e,u({},o),n),s=document.createElement("div");return a[h]=s,t.render(a,s),a.component}function L(e){t.render(null,e==null?void 0:e.vnode[h])}const O=t.defineComponent(T),f=new WeakSet,g=e=>{if(!e)return!0;if(Array.isArray(e))return e.length===0;if(e instanceof Set||e instanceof Map)return e.size===0;if(e instanceof Promise)return!1;if(typeof e=="object")try{return Object.keys(e).length===0}catch{return!1}return!1},w=e=>Object.prototype.toString.call(e).slice(8,-1).toLowerCase(),$=e=>{switch(w(e)){case"promise":return[e];case"array":return e.some(n=>w(n)!=="promise")?(console.error(new TypeError("Binding values should all be of type Promise")),"error"):e;default:return!1}},N=e=>{f.delete(e),e.instance.proxy.close(),L(e.instance)},S=(e,o)=>{if(o.value){const n=$(o.value);if(n==="error")return;e.instance.proxy.open(),e.appendChild(e.mask),f.add(e),n&&Promise.all(n).catch(a=>{console.error(new Error("Promise handling errors"),a)}).finally(()=>{N(e)})}else N(e)},V=e=>{e.removeAttribute("zindex"),e.removeAttribute("positiontype"),e.removeAttribute("backdrop"),e.removeAttribute("message"),e.removeAttribute("view"),e.removeAttribute("loadingtemplateref")},k=(e,o)=>{const n=u(u({},new z),o),a=n.loadingTemplateRef,s=B(O,u({},n),a?()=>a:null);e.style.position=n.positionType,e.options=n,e.instance=s,e.mask=s.proxy.$el},E={mounted:function(e,o,n){k(e,n.props),V(e),!g(o.value)&&S(e,o)},updated:function(e,o,n){!g(o.value)&&f.has(e)||g(o.value)&&!f.has(e)||(!f.has(e)&&k(e,n.props),V(e),S(e,o))}},x={variant:{type:String,default:"outline"},size:{type:String,default:"md"},color:{type:String},icon:{type:String,default:""},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}};function M(e,o){const n=t.computed(()=>o.slots.default),s={solid:"primary",outline:"secondary",text:"secondary"}[e.variant],c=t.computed(()=>({"devui-btn":!0,[`devui-btn-${e.variant}`]:!0,[`devui-btn-${e.variant}-${e.color||s}`]:!0,[`devui-btn-${e.size}`]:!0,"devui-btn-icon-wrap":e.icon,"devui-btn-icon":e.icon&&!n.value&&e.variant!=="solid"})),d=t.computed(()=>{if(!e.icon)return;const p="devui-icon-fix icon";return n.value?`${p} clear-right-5`:p});return{classes:c,iconClass:d}}var q="",y=t.defineComponent({name:"DButton",directives:{devLoading:E},props:x,emits:["click"],setup(e,o){const{icon:n,disabled:a,loading:s}=t.toRefs(e),{classes:c,iconClass:d}=M(e,o),p=m=>{s.value||o.emit("click",m)};return()=>{var m,A;return t.withDirectives(t.createVNode("button",{class:c.value,disabled:a.value,onClick:p},[n.value&&t.createVNode(r,{name:n.value,size:"12px",class:d.value},null),t.createVNode("span",{class:"button-content"},[(A=(m=o.slots).default)==null?void 0:A.call(m)])]),[[t.resolveDirective("dLoading"),s.value]])}}}),j={title:"Button \u6309\u94AE",category:"\u901A\u7528",status:"100%",install(e){e.component(y.name,y)}};i.Button=y,i.buttonProps=x,i.default=j,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});