sakana-element 2.1.3 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -80
- package/dist/es/{Alert-A4stKumX.js → Alert-C76ZWSVk.js} +5 -5
- package/dist/es/Button-fW_ZOLmT.js +24 -0
- package/dist/es/Card-BCBnlVi_.js +12 -0
- package/dist/es/{Dropdown-CA-nv-2j.js → Dropdown-49nf6F8P.js} +10 -10
- package/dist/es/{Form-VB1SL_iW.js → Form-CGiTDSGI.js} +1 -1
- package/dist/es/Input-DBPpvf0Y.js +42 -0
- package/dist/es/{Loading-4MsOvzx9.js → Loading-DlygqGOv.js} +3 -3
- package/dist/es/{Message-CxT9rRUp.js → Message-ganFfLeU.js} +11 -11
- package/dist/es/{Notification-D6em5HmO.js → Notification-D4RYHV9o.js} +3 -3
- package/dist/es/{Popconfirm-D0ABSr-F.js → Popconfirm-Cop44KwQ.js} +2 -2
- package/dist/es/Select-Blw_iO2r.js +133 -0
- package/dist/es/Switch-CHjcLtHs.js +34 -0
- package/dist/es/{Tooltip-KpwbZdMX.js → Tooltip-HWx_i2FA.js} +8 -8
- package/dist/es/{hooks-DNMt3QPi.js → hooks-CYdEHUVd.js} +6 -5
- package/dist/es/index.js +53 -51
- package/dist/index.css +1 -1
- package/dist/theme/Alert.css +51 -51
- package/dist/theme/Button.css +365 -105
- package/dist/theme/Card.css +112 -0
- package/dist/theme/Collapse.css +2 -2
- package/dist/theme/Dropdown.css +4 -4
- package/dist/theme/Input.css +213 -4
- package/dist/theme/Select.css +182 -38
- package/dist/theme/Switch.css +56 -0
- package/dist/theme/Tooltip.css +10 -10
- package/dist/theme/fonts/zpix.woff2 +0 -0
- package/dist/theme/index.css +19 -5
- package/dist/types/components/Button/types.d.ts +3 -0
- package/dist/types/components/Card/index.d.ts +26 -0
- package/dist/types/components/Card/types.d.ts +6 -0
- package/dist/types/components/Input/constants.d.ts +3 -0
- package/dist/types/components/Input/types.d.ts +2 -0
- package/dist/types/components/Select/constants.d.ts +3 -0
- package/dist/types/components/Select/index.d.ts +7 -5
- package/dist/types/components/Select/types.d.ts +4 -1
- package/dist/types/components/Select/useKeyMap.d.ts +1 -1
- package/dist/types/components/Switch/types.d.ts +6 -0
- package/dist/types/components/Tooltip/useEventsToTriggerNode.d.ts +4 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/hooks/useSystemTheme.d.ts +1 -1
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.css.gz +0 -0
- package/dist/umd/index.umd.cjs +3 -3
- package/dist/umd/index.umd.cjs.gz +0 -0
- package/package.json +1 -1
- package/dist/es/Button-CFGE4_Ng.js +0 -22
- package/dist/es/Input-C-bIqqo_.js +0 -38
- package/dist/es/Select-BKYDP224.js +0 -126
- package/dist/es/Switch-C1IdbnUa.js +0 -22
- package/dist/theme/fonts/zpix.ttf +0 -0
- package/dist/types/components/Tooltip/useEventsToTiggerNode.d.ts +0 -4
package/README.md
CHANGED
|
@@ -1,80 +1,81 @@
|
|
|
1
|
-
# Sakana Element
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/sakana-element)
|
|
4
|
-
[](https://github.com/yu859/sakana-element/blob/master/LICENSE)
|
|
5
|
-
|
|
6
|
-
A Vue 3 + TypeScript component library with pixel art design aesthetic.
|
|
7
|
-
|
|
8
|
-
像素风格的 Vue 3 + TypeScript 组件库。
|
|
9
|
-
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
## Install / 安装
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
pnpm add sakana-element
|
|
16
|
-
# or
|
|
17
|
-
npm install sakana-element
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## Quick Start / 快速开始
|
|
21
|
-
|
|
22
|
-
```ts
|
|
23
|
-
// main.ts
|
|
24
|
-
import { createApp } from 'vue'
|
|
25
|
-
import SakanaElement from 'sakana-element'
|
|
26
|
-
import 'sakana-element/dist/index.css'
|
|
27
|
-
import App from './App.vue'
|
|
28
|
-
|
|
29
|
-
createApp(App).use(SakanaElement).mount('#app')
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Components / 组件
|
|
33
|
-
|
|
34
|
-
| Component | Description / 描述 |
|
|
35
|
-
|-----------|-------------------|
|
|
36
|
-
| `PxButton` | Button / 按钮 |
|
|
37
|
-
| `PxInput` | Input / 输入框 |
|
|
38
|
-
| `PxSelect` | Select / 选择器 |
|
|
39
|
-
| `PxSwitch` | Switch / 开关 |
|
|
40
|
-
| `PxIcon` | Icon / 图标 |
|
|
41
|
-
| `PxAlert` | Alert / 警告提示 |
|
|
42
|
-
| `PxBadge` | Badge / 徽章 |
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
48
|
-
| `
|
|
49
|
-
| `
|
|
50
|
-
| `
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
- [
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
1
|
+
# Sakana Element
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/sakana-element)
|
|
4
|
+
[](https://github.com/yu859/sakana-element/blob/master/LICENSE)
|
|
5
|
+
|
|
6
|
+
A Vue 3 + TypeScript component library with pixel art design aesthetic.
|
|
7
|
+
|
|
8
|
+
像素风格的 Vue 3 + TypeScript 组件库。
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Install / 安装
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
pnpm add sakana-element
|
|
16
|
+
# or
|
|
17
|
+
npm install sakana-element
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Quick Start / 快速开始
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
// main.ts
|
|
24
|
+
import { createApp } from 'vue'
|
|
25
|
+
import SakanaElement from 'sakana-element'
|
|
26
|
+
import 'sakana-element/dist/index.css'
|
|
27
|
+
import App from './App.vue'
|
|
28
|
+
|
|
29
|
+
createApp(App).use(SakanaElement).mount('#app')
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Components / 组件
|
|
33
|
+
|
|
34
|
+
| Component | Description / 描述 |
|
|
35
|
+
|-----------|-------------------|
|
|
36
|
+
| `PxButton` | Button / 按钮 |
|
|
37
|
+
| `PxInput` | Input / 输入框 |
|
|
38
|
+
| `PxSelect` | Select / 选择器 |
|
|
39
|
+
| `PxSwitch` | Switch / 开关 |
|
|
40
|
+
| `PxIcon` | Icon / 图标 |
|
|
41
|
+
| `PxAlert` | Alert / 警告提示 |
|
|
42
|
+
| `PxBadge` | Badge / 徽章 |
|
|
43
|
+
| `PxCard` | Card / 卡片 |
|
|
44
|
+
| `PxCollapse` | Collapse / 折叠面板 |
|
|
45
|
+
| `PxDropdown` | Dropdown / 下拉菜单 |
|
|
46
|
+
| `PxForm` | Form / 表单 |
|
|
47
|
+
| `PxTooltip` | Tooltip / 文字提示 |
|
|
48
|
+
| `PxPopconfirm` | Popconfirm / 气泡确认框 |
|
|
49
|
+
| `PxMessage` | Message / 消息提示 |
|
|
50
|
+
| `PxMessageBox` | MessageBox / 消息弹框 |
|
|
51
|
+
| `PxNotification` | Notification / 通知 |
|
|
52
|
+
| `PxLoading` | Loading / 加载 |
|
|
53
|
+
| `PxOverlay` | Overlay / 遮罩层 |
|
|
54
|
+
| `PxConfigProvider` | ConfigProvider / 全局配置 |
|
|
55
|
+
|
|
56
|
+
## Bundled Font / 内置字体
|
|
57
|
+
|
|
58
|
+
This package includes the [zpix](https://github.com/SolidZORO/zpix-pixel-font) pixel font (~6.9MB `.ttf`), which provides the retro pixel art look. It loads automatically via CSS `@font-face` when you import `sakana-element/dist/index.css` — no extra setup required. The font accounts for most of the package size (~8MB total); actual library code + CSS is ~1MB.
|
|
59
|
+
|
|
60
|
+
本组件库内置了 [zpix 像素字体](https://github.com/SolidZORO/zpix-pixel-font)（~6.9MB `.ttf`），用于实现复古像素风格外观。导入 `sakana-element/dist/index.css` 后字体会通过 CSS `@font-face` 自动加载，无需额外配置。字体文件占包体积大部分（总计约 8MB），组件库本身的代码和样式仅约 1MB。
|
|
61
|
+
|
|
62
|
+
## Dark Mode / 暗色模式
|
|
63
|
+
|
|
64
|
+
Add the `px-dark` or `dark` class to an ancestor element:
|
|
65
|
+
|
|
66
|
+
在祖先元素上添加 `px-dark` 或 `dark` 类名：
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<html class="px-dark">
|
|
70
|
+
<!-- All Sakana Element components will render in dark mode -->
|
|
71
|
+
</html>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Links / 链接
|
|
75
|
+
|
|
76
|
+
- [GitHub](https://github.com/yu859/sakana-element)
|
|
77
|
+
- [npm](https://www.npmjs.com/package/sakana-element)
|
|
78
|
+
|
|
79
|
+
## License / 许可证
|
|
80
|
+
|
|
81
|
+
[ISC](https://github.com/yu859/sakana-element/blob/master/LICENSE)
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { t as e, r as t, S as l, c as o, _ as s, w as a } from "./utils-bsCscZfS.js";
|
|
2
|
-
import { defineComponent as
|
|
2
|
+
import { defineComponent as c, useSlots as n, ref as i, computed as r, createBlock as p, openBlock as u, Transition as d, withCtx as f, withDirectives as _, createElementVNode as y, normalizeStyle as x, normalizeClass as v, createCommentVNode as m, createElementBlock as h, renderSlot as k, createTextVNode as w, toDisplayString as B, createVNode as I, withModifiers as b, vShow as $ } from "vue";
|
|
3
3
|
import { P as g } from "./Icon-DpJyuj7c.js";
|
|
4
|
-
const P = { class: "px-alert__content" }, j = { key: 0, class: "px-alert__description" }, A = { key: 1, class: "px-alert__close" }, C = a(s(
|
|
5
|
-
const C2 = s2, S =
|
|
4
|
+
const P = { class: "px-alert__content" }, j = { key: 0, class: "px-alert__description" }, A = { key: 1, class: "px-alert__close" }, C = a(s(c({ name: "PxAlert", __name: "Alert", props: { title: {}, type: { default: "info" }, description: {}, effect: { default: "light" }, closable: { type: Boolean, default: true }, center: { type: Boolean }, showIcon: { type: Boolean }, outline: { type: Boolean }, dash: { type: Boolean }, color: {} }, emits: ["close"], setup(s2, { expose: a2, emit: c2 }) {
|
|
5
|
+
const C2 = s2, S = c2, q = n(), z = i(true), D = r((() => e.get(C2.type) ?? "circle-info")), E = r((() => C2.description || q.default)), F = r((() => {
|
|
6
6
|
if (!C2.color) return {};
|
|
7
7
|
const e2 = C2.outline ? "outline" : C2.dash ? "dash" : "default";
|
|
8
8
|
return t(o(C2.color), "px-alert", l[e2]);
|
|
@@ -12,8 +12,8 @@ const P = { class: "px-alert__content" }, j = { key: 0, class: "px-alert__descri
|
|
|
12
12
|
}
|
|
13
13
|
return a2({ open: function() {
|
|
14
14
|
z.value = true;
|
|
15
|
-
}, close: G }), (e2, t2) => (u(), p(d, { name: "px-alert-fade" }, { default: f((() => [_(y("div", { class: v(["px-alert", { [`px-alert__${e2.type}`]: e2.type, [`px-alert__${e2.effect}`]: e2.effect, "text-center": e2.center, "is-outline": e2.outline, "is-dash": e2.dash }]), role: "alert", style: x(F.value) }, [e2.showIcon ? (u(), p(g, { key: 0, class: v(["px-alert__icon", { "big-icon": E.value }]), icon: D.value }, null, 8, ["class", "icon"])) : m("", true), y("div", P, [y("span", { class: v(["px-alert__title", { "with-desc": E.value }]), style: x({ display: e2.center && !e2.showIcon ? "
|
|
16
|
-
} }), [["__scopeId", "data-v-
|
|
15
|
+
}, close: G }), (e2, t2) => (u(), p(d, { name: "px-alert-fade" }, { default: f((() => [_(y("div", { class: v(["px-alert", { [`px-alert__${e2.type}`]: e2.type, [`px-alert__${e2.effect}`]: e2.effect, "text-center": e2.center, "is-outline": e2.outline, "is-dash": e2.dash }]), role: "alert", style: x(F.value) }, [e2.showIcon ? (u(), p(g, { key: 0, class: v(["px-alert__icon", { "big-icon": E.value }]), icon: D.value }, null, 8, ["class", "icon"])) : m("", true), y("div", P, [y("span", { class: v(["px-alert__title", { "with-desc": E.value }]), style: x({ display: e2.center && !e2.showIcon ? "block" : "inline" }) }, [k(e2.$slots, "title", {}, (() => [w(B(e2.title), 1)]), true)], 6), E.value ? (u(), h("p", j, [k(e2.$slots, "default", {}, (() => [w(B(e2.description), 1)]), true)])) : m("", true), e2.closable ? (u(), h("div", A, [I(g, { onClick: b(G, ["stop"]), icon: "close" })])) : m("", true)])], 6), [[$, z.value]])])), _: 3 }));
|
|
16
|
+
} }), [["__scopeId", "data-v-772da9f8"]]));
|
|
17
17
|
export {
|
|
18
18
|
C as P
|
|
19
19
|
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { d as o, l as t, c as r, r as e, _ as l, w as a } from "./utils-bsCscZfS.js";
|
|
2
|
+
import { defineComponent as i, useSlots as s, inject as c, ref as n, computed as d, onBeforeUnmount as b, createBlock as p, openBlock as g, resolveDynamicComponent as u, unref as v, normalizeStyle as h, normalizeClass as y, withCtx as x, renderSlot as k, createCommentVNode as f, createVNode as B, provide as m, reactive as _, toRef as z, createElementBlock as w } from "vue";
|
|
3
|
+
import { P as T } from "./Icon-DpJyuj7c.js";
|
|
4
|
+
import { t as $ } from "./vendor-DXmGx29U.js";
|
|
5
|
+
const I = Symbol("BUTTON_GROUP_CTX_KEY"), P = { link: { "text-color": "color", "bg-color": "transparent", "border-color": "transparent", "shadow-color": "transparent", "hover-text-color": "dark", "hover-bg-color": "transparent", "hover-border-color": "transparent", "active-text-color": "dark", "active-bg-color": "transparent", "active-border-color": "transparent", "disabled-text-color": "light", "disabled-bg-color": "transparent", "disabled-border-color": "transparent" }, ghost: { "text-color": "color", "bg-color": "transparent", "border-color": "transparent", "shadow-color": "transparent", "hover-text-color": "dark", "hover-bg-color": "lighter", "hover-border-color": "transparent", "active-text-color": "dark", "active-bg-color": "light", "active-border-color": "transparent", "disabled-text-color": "light", "disabled-bg-color": "transparent", "disabled-border-color": "transparent" }, dash: { "text-color": "color", "bg-color": "lighter", "border-color": "color", "shadow-color": "transparent", "hover-text-color": "dark", "hover-bg-color": "light", "hover-border-color": "dark", "active-text-color": "dark", "active-bg-color": "color", "active-border-color": "dark", "disabled-text-color": "light", "disabled-bg-color": "lighter", "disabled-border-color": "light" }, plain: { "text-color": "color", "bg-color": "lighter", "border-color": "color", "hover-text-color": "contrast", "hover-bg-color": "color", "hover-border-color": "color", "active-text-color": "contrast", "active-bg-color": "dark", "active-border-color": "dark", "disabled-text-color": "light", "disabled-bg-color": "lighter", "disabled-border-color": "light" }, default: { "text-color": "contrast", "bg-color": "color", "border-color": "dark", "shadow-color": "dark", "hover-text-color": "contrast", "hover-bg-color": "light", "hover-border-color": "color", "active-text-color": "contrast", "active-bg-color": "dark", "active-border-color": "dark", "disabled-text-color": "contrast", "disabled-bg-color": "light", "disabled-border-color": "light" } }, j = l(i({ name: "PxButton", __name: "Button", props: { tag: { default: "button" }, type: {}, size: {}, nativeType: { default: "button" }, disabled: { type: Boolean }, loading: { type: Boolean }, icon: {}, circle: { type: Boolean }, plain: { type: Boolean }, round: { type: Boolean }, dash: { type: Boolean }, ghost: { type: Boolean }, link: { type: Boolean }, block: { type: Boolean }, responsive: { type: Boolean }, color: {}, loadingIcon: {}, ariaLabel: {}, autofocus: { type: Boolean }, useThrottle: { type: Boolean, default: true }, throttleDuration: { default: 500 } }, emits: ["click"], setup(l2, { expose: a2, emit: i2 }) {
|
|
6
|
+
const m2 = /* @__PURE__ */ new Set(["button", "a", "div", "span", "router-link"]), _2 = l2;
|
|
7
|
+
"string" != typeof _2.tag || m2.has(_2.tag) || o("PxButton", `Invalid tag "${_2.tag}". Allowed tags: ${[...m2].join(", ")}. Falling back to "button".`);
|
|
8
|
+
const z2 = i2, w2 = s(), j2 = c(I, void 0), G2 = n(), C2 = d((() => "string" != typeof _2.tag || m2.has(_2.tag) ? _2.tag : "button")), D2 = d((() => (j2 == null ? void 0 : j2.size) ?? (_2 == null ? void 0 : _2.size) ?? "")), L2 = d((() => (j2 == null ? void 0 : j2.type) ?? (_2 == null ? void 0 : _2.type) ?? "")), O = d((() => (j2 == null ? void 0 : j2.disabled) || (_2 == null ? void 0 : _2.disabled) || false)), R = d((() => ({ marginRight: w2.default ? "6px" : "0px" }))), S = d((() => {
|
|
9
|
+
if (!_2.color) return {};
|
|
10
|
+
const o2 = { ...r(_2.color), light: t(_2.color, 20), lighter: t(_2.color, 35) }, l3 = _2.ghost ? "ghost" : _2.dash ? "dash" : _2.plain ? "plain" : _2.link ? "link" : "default";
|
|
11
|
+
return e(o2, "px-button", P[l3]);
|
|
12
|
+
})), U = (o2) => z2("click", o2), A = $(U, _2.throttleDuration, { trailing: false });
|
|
13
|
+
return b((() => {
|
|
14
|
+
A.cancel();
|
|
15
|
+
})), a2({ ref: G2, disabled: O, size: D2, type: L2 }), (o2, t2) => (g(), p(u(C2.value), { ref_key: "_ref", ref: G2, autofocus: o2.autofocus, type: "button" === C2.value ? o2.nativeType : void 0, class: y(["px-button", { [`px-button--${L2.value}`]: L2.value, [`px-button--${D2.value}`]: D2.value, "is-plain": o2.plain, "is-round": o2.round, "is-circle": o2.circle, "is-dash": o2.dash, "is-ghost": o2.ghost, "is-link": o2.link, "is-block": o2.block, "is-responsive": o2.responsive, "is-disabled": O.value, "is-loading": o2.loading }]), "aria-label": o2.ariaLabel, disabled: !(!O.value && !o2.loading) || void 0, style: h(S.value), onClick: t2[0] || (t2[0] = (t3) => o2.useThrottle ? v(A)(t3) : U(t3)) }, { default: x((() => [o2.loading ? k(o2.$slots, "loading", { key: 0 }, (() => [B(T, { class: "loading-icon", icon: o2.loadingIcon ?? "loader", style: h(R.value), size: "1x", spin: "" }, null, 8, ["icon", "style"])]), true) : f("", true), o2.icon && !o2.loading ? (g(), p(T, { key: 1, icon: o2.icon, style: h(R.value), size: "1x" }, null, 8, ["icon", "style"])) : f("", true), k(o2.$slots, "default", {}, void 0, true)])), _: 3 }, 8, ["autofocus", "type", "aria-label", "disabled", "class", "style"]));
|
|
16
|
+
} }), [["__scopeId", "data-v-938fe053"]]), G = { class: "px-button-group" }, C = l(i({ name: "PxButtonGroup", __name: "ButtonGroup", props: { size: {}, type: {}, disabled: { type: Boolean } }, setup(o2) {
|
|
17
|
+
const t2 = o2;
|
|
18
|
+
return m(I, _({ size: z(t2, "size"), type: z(t2, "type"), disabled: z(t2, "disabled") })), (o3, t3) => (g(), w("div", G, [k(o3.$slots, "default", {}, void 0, true)]));
|
|
19
|
+
} }), [["__scopeId", "data-v-7bc34bb7"]]), D = a(j), L = a(C);
|
|
20
|
+
export {
|
|
21
|
+
L as P,
|
|
22
|
+
D as a,
|
|
23
|
+
j as b
|
|
24
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { _ as a, w as e } from "./utils-bsCscZfS.js";
|
|
2
|
+
import { defineComponent as s, useSlots as o, computed as r, createElementBlock as d, openBlock as t, normalizeClass as l, createCommentVNode as p, createElementVNode as c, unref as i, renderSlot as v } from "vue";
|
|
3
|
+
const h = { key: 0, class: "px-card__header" }, n = { class: "px-card__body" }, _ = { key: 1, class: "px-card__footer" }, x = e(a(s({ name: "PxCard", __name: "Card", props: { hoverable: { type: Boolean }, shadow: { type: [Boolean, String], default: "always" }, size: {} }, setup(a2) {
|
|
4
|
+
const e2 = a2, s2 = o(), x2 = r((() => {
|
|
5
|
+
const a3 = e2.shadow;
|
|
6
|
+
return true === a3 ? "px-card--shadow-always" : false === a3 ? "px-card--shadow-never" : `px-card--shadow-${a3}`;
|
|
7
|
+
}));
|
|
8
|
+
return (a3, e3) => (t(), d("div", { class: l(["px-card", [x2.value, { [`px-card--${a3.size}`]: a3.size, "is-hoverable": a3.hoverable }]]) }, [i(s2).header ? (t(), d("div", h, [v(a3.$slots, "header", {}, void 0, true)])) : p("", true), c("div", n, [v(a3.$slots, "default", {}, void 0, true)]), i(s2).footer ? (t(), d("div", _, [v(a3.$slots, "footer", {}, void 0, true)])) : p("", true)], 2));
|
|
9
|
+
} }), [["__scopeId", "data-v-1f65a210"]]));
|
|
10
|
+
export {
|
|
11
|
+
x as P
|
|
12
|
+
};
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { w as e } from "./utils-bsCscZfS.js";
|
|
2
|
-
import { defineComponent as o, inject as i, computed as
|
|
3
|
-
import { u as B, a as x, b as g } from "./hooks-
|
|
4
|
-
import { P as C, a as z } from "./Button-
|
|
5
|
-
import { T as $ } from "./Tooltip-
|
|
2
|
+
import { defineComponent as o, inject as i, computed as t, createElementBlock as a, openBlock as l, Fragment as d, createCommentVNode as n, createElementVNode as s, normalizeClass as p, unref as r, renderSlot as u, createTextVNode as m, toDisplayString as c, useSlots as f, ref as v, provide as h, createVNode as y, mergeProps as b, withCtx as k, createBlock as w, renderList as _ } from "vue";
|
|
3
|
+
import { u as B, a as x, b as g } from "./hooks-CYdEHUVd.js";
|
|
4
|
+
import { P as C, a as z } from "./Button-fW_ZOLmT.js";
|
|
5
|
+
import { T as $ } from "./Tooltip-HWx_i2FA.js";
|
|
6
6
|
import { a as j, i as T } from "./vendor-DXmGx29U.js";
|
|
7
7
|
const D = Symbol("dropdownContext"), I = { key: 0, role: "separator", class: "divided-placeholder" }, O = ["id"], P = o({ name: "PxDropdownItem", __name: "DropdownItem", props: { command: { default: B().value }, label: {}, disabled: { type: Boolean, default: false }, divided: { type: Boolean, default: false } }, setup(e2) {
|
|
8
|
-
const o2 = e2, f2 = i(D), v2 =
|
|
8
|
+
const o2 = e2, f2 = i(D), v2 = t((() => f2 == null ? void 0 : f2.size.value));
|
|
9
9
|
function h2() {
|
|
10
10
|
o2.disabled || (f2 == null ? void 0 : f2.handleItemClick(o2));
|
|
11
11
|
}
|
|
12
|
-
return (e3, o3) => (l(),
|
|
12
|
+
return (e3, o3) => (l(), a(d, null, [e3.divided ? (l(), a("li", I)) : n("", true), s("li", { id: `dropdown-item-${e3.command ?? r(B)().value}`, class: p({ "px-dropdown__item": true, ["px-dropdown__item--" + v2.value]: v2.value, "is-disabled": e3.disabled, "is-divided": e3.divided }), onClick: h2 }, [u(e3.$slots, "default", {}, (() => [m(c(e3.label), 1)]))], 10, O)], 64));
|
|
13
13
|
} }), R = ["aria-expanded"], A = { class: "px-dropdown__menu" }, S = e(o({ name: "PxDropdown", inheritAttrs: false, __name: "Dropdown", props: { type: {}, size: {}, items: { default: () => [] }, hideOnClick: { type: Boolean, default: true }, splitButton: { type: Boolean }, content: {}, trigger: {}, placement: {}, manual: { type: Boolean }, disabled: { type: Boolean }, popperOptions: {}, transition: {}, showTimeout: {}, hideTimeout: {}, virtualRef: {}, virtualTriggering: { type: Boolean } }, emits: ["visible-change", "command", "click"], setup(e2, { expose: o2, emit: i2 }) {
|
|
14
14
|
const n2 = e2, m2 = i2;
|
|
15
15
|
f();
|
|
16
|
-
const c2 = v(), B2 = v(), I2 = v(false), O2 =
|
|
16
|
+
const c2 = v(), B2 = v(), I2 = v(false), O2 = t((() => j(n2, ["items", "hideOnClick", "size", "type", "splitButton"])));
|
|
17
17
|
function S2() {
|
|
18
18
|
var _a;
|
|
19
19
|
(_a = c2.value) == null ? void 0 : _a.toggle();
|
|
@@ -24,15 +24,15 @@ const D = Symbol("dropdownContext"), I = { key: 0, role: "separator", class: "di
|
|
|
24
24
|
})), g(), h(D, { handleItemClick: function(e3) {
|
|
25
25
|
var _a;
|
|
26
26
|
n2.hideOnClick && ((_a = c2.value) == null ? void 0 : _a.hide()), !T(e3.command) && m2("command", e3.command);
|
|
27
|
-
}, size:
|
|
27
|
+
}, size: t((() => n2.size)) }), o2({ open: () => {
|
|
28
28
|
var _a;
|
|
29
29
|
return (_a = c2.value) == null ? void 0 : _a.show();
|
|
30
30
|
}, close: () => {
|
|
31
31
|
var _a;
|
|
32
32
|
return (_a = c2.value) == null ? void 0 : _a.hide();
|
|
33
|
-
} }), (e3, o3) => (l(),
|
|
33
|
+
} }), (e3, o3) => (l(), a("div", { ref_key: "dropdownRef", ref: B2, class: p(["px-dropdown", { "is-disabled": n2.disabled }]), role: "menu", "aria-haspopup": "true", "aria-expanded": I2.value }, [y($, b({ ref_key: "tooltipRef", ref: c2 }, O2.value, { manual: e3.splitButton, onVisibleChange: o3[1] || (o3[1] = (o4) => {
|
|
34
34
|
I2.value = o4, e3.$emit("visible-change", o4);
|
|
35
|
-
}) }), { content: k((() => [s("div", A, [u(e3.$slots, "dropdown", {}, (() => [(l(true),
|
|
35
|
+
}) }), { content: k((() => [s("div", A, [u(e3.$slots, "dropdown", {}, (() => [(l(true), a(d, null, _(e3.items, ((e4) => (l(), w(P, b({ key: e4.command, ref_for: true }, e4), null, 16)))), 128))]))])])), default: k((() => [e3.splitButton ? (l(), w(r(C), { key: 0, type: e3.type, size: e3.size, disabled: e3.disabled }, { default: k((() => [y(r(z), { onClick: o3[0] || (o3[0] = (o4) => e3.$emit("click", o4)) }, { default: k((() => [u(e3.$slots, "default")])), _: 3 }), y(r(z), { icon: "chevron-down", onClick: S2 })])), _: 3 }, 8, ["type", "size", "disabled"])) : u(e3.$slots, "default", { key: 1 })])), _: 3 }, 16, ["manual"])], 10, R));
|
|
36
36
|
} })), V = e(P);
|
|
37
37
|
export {
|
|
38
38
|
S as P,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent as e, reactive as r, toRefs as t, provide as a, createElementBlock as l, openBlock as s, renderSlot as o, useCssVars as i, computed as u, useSlots as d, inject as n, ref as p, onMounted as v, onUnmounted as c, normalizeStyle as m, normalizeClass as f, unref as h, createBlock as b, createCommentVNode as g, createElementVNode as y, resolveDynamicComponent as x, withCtx as _, createTextVNode as F, toDisplayString as q, nextTick as P } from "vue";
|
|
2
2
|
import { d as w, _ as k, w as j } from "./utils-bsCscZfS.js";
|
|
3
3
|
import { f as I, b as $, s as A, c as B, d as S, i as W, e as M, g as V, h as C, j as O, k as D, l as E, p as R } from "./vendor-DXmGx29U.js";
|
|
4
|
-
import { u as z } from "./hooks-
|
|
4
|
+
import { u as z } from "./hooks-CYdEHUVd.js";
|
|
5
5
|
import G from "async-validator";
|
|
6
6
|
const H = Symbol("formContext"), J = Symbol("formItemContext"), K = { class: "px-form" }, L = e({ name: "PxForm", __name: "Form", props: { model: {}, rules: {}, disabled: { type: Boolean }, labelWidth: {}, labelPosition: { default: "right" }, labelSuffix: {}, showMessage: { type: Boolean, default: true }, hideRequiredAsterisk: { type: Boolean, default: false }, requiredAsteriskPosition: { default: "left" } }, emits: ["validate"], setup(e2, { expose: i2, emit: u2 }) {
|
|
7
7
|
const d2 = u2, n2 = [], p2 = async (e3, r2) => {
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { c as e, r as o, d as a, w as l } from "./utils-bsCscZfS.js";
|
|
2
|
+
import { defineComponent as s, ref as r, shallowRef as u, useAttrs as t, computed as p, watch as n, createElementBlock as d, openBlock as c, normalizeStyle as i, normalizeClass as f, unref as v, withDirectives as m, Fragment as y, createCommentVNode as h, createElementVNode as x, renderSlot as _, mergeProps as w, vModelDynamic as k, createBlock as b, withModifiers as $, vModelText as g, nextTick as B } from "vue";
|
|
3
|
+
import { c as V, u as I } from "./hooks-CYdEHUVd.js";
|
|
4
|
+
import { u as P } from "./Form-CGiTDSGI.js";
|
|
5
|
+
import { P as j } from "./Icon-DpJyuj7c.js";
|
|
6
|
+
import { q as C, f as F } from "./vendor-DXmGx29U.js";
|
|
7
|
+
const R = /* @__PURE__ */ new Set(["primary", "success", "warning", "danger", "info"]), z = { default: { "border-color": "color", "hover-border-color": "dark", "focus-border-color": "dark", "shadow-color": "dark", "focus-shadow-color": "dark" }, ghost: { "border-color": "transparent", "hover-border-color": "color", "focus-border-color": "dark", "shadow-color": "transparent", "focus-shadow-color": "dark" } }, M = { key: 0, class: "px-input__prepend" }, U = { key: 0, class: "px-input__prefix" }, q = ["id", "type", "disabled", "readonly", "autocomplete", "placeholder", "autofocus", "form"], A = { key: 1, class: "px-input__suffix" }, S = { key: 1, class: "px-input__append" }, D = ["id", "disabled", "readonly", "autocomplete", "placeholder", "autofocus", "form"], E = s({ name: "PxInput", inheritAttrs: false, __name: "Input", props: { id: {}, modelValue: {}, type: { default: "text" }, size: {}, color: {}, ghost: { type: Boolean }, disabled: { type: Boolean }, clearable: { type: Boolean }, showPassword: { type: Boolean }, placeholder: {}, readonly: { type: Boolean }, autocomplete: { default: "off" }, autofocus: { type: Boolean }, form: {} }, emits: ["update:modelValue", "input", "change", "focus", "blur", "clear"], setup(l2, { expose: s2, emit: E2 }) {
|
|
8
|
+
const G2 = l2, H = E2, J = r(G2.modelValue), K = r(false), L = u(), N = u(), O = t(), { formItem: Q } = P(), T = p((() => L.value || N.value)), W = p((() => G2.disabled)), X = p((() => R.has(G2.color ?? ""))), Y = p((() => !!G2.color && !X.value)), Z = p((() => {
|
|
9
|
+
if (!Y.value) return {};
|
|
10
|
+
const a2 = e(G2.color), l3 = G2.ghost ? "ghost" : "default";
|
|
11
|
+
return o(a2, "px-input", z[l3]);
|
|
12
|
+
})), ee = p((() => G2.clearable && !!J.value && !W.value && le.value)), oe = p((() => "password" === G2.type && G2.showPassword && !W.value && !!J.value)), { wrapperRef: ae, isFocused: le, handleFocus: se, handleBlur: re } = V(T, { afterBlur() {
|
|
13
|
+
Q == null ? void 0 : Q.validate("blur").catch(((e2) => a()));
|
|
14
|
+
} }), ue = () => {
|
|
15
|
+
J.value = "", F(["input", "change", "update:modelValue"], ((e2) => H(e2, ""))), H("clear"), Q == null ? void 0 : Q.clearValidate();
|
|
16
|
+
};
|
|
17
|
+
function te() {
|
|
18
|
+
H("update:modelValue", J.value), H("input", J.value);
|
|
19
|
+
}
|
|
20
|
+
function pe() {
|
|
21
|
+
H("change", J.value);
|
|
22
|
+
}
|
|
23
|
+
function ne() {
|
|
24
|
+
K.value = !K.value;
|
|
25
|
+
}
|
|
26
|
+
return n((() => G2.modelValue), ((e2) => {
|
|
27
|
+
J.value = e2, Q == null ? void 0 : Q.validate("change").catch(((e3) => a()));
|
|
28
|
+
})), s2({ ref: T, focus: async () => {
|
|
29
|
+
var _a;
|
|
30
|
+
await B(), (_a = T.value) == null ? void 0 : _a.focus();
|
|
31
|
+
}, blur: () => {
|
|
32
|
+
var _a;
|
|
33
|
+
(_a = T.value) == null ? void 0 : _a.blur();
|
|
34
|
+
}, select: () => {
|
|
35
|
+
var _a;
|
|
36
|
+
(_a = T.value) == null ? void 0 : _a.select();
|
|
37
|
+
}, clear: ue }), (e2, o2) => (c(), d("div", { class: f(["px-input", { [`px-input--${e2.type}`]: e2.type, [`px-input--${e2.size}`]: e2.size, [`px-input--${e2.color}`]: X.value, "is-ghost": e2.ghost, "is-disabled": W.value, "is-prepend": e2.$slots.prepend, "is-append": e2.$slots.append, "is-prefix": e2.$slots.prefix, "is-suffix": e2.$slots.suffix, "is-focus": v(le) }]), style: i(Z.value) }, ["textarea" !== e2.type ? (c(), d(y, { key: 0 }, [e2.$slots.prepend ? (c(), d("div", M, [_(e2.$slots, "prepend")])) : h("", true), x("div", { class: "px-input__wrapper", ref_key: "wrapperRef", ref: ae }, [e2.$slots.prefix ? (c(), d("span", U, [_(e2.$slots, "prefix")])) : h("", true), m(x("input", w({ class: "px-input__inner", ref_key: "inputRef", ref: L, id: v(I)().value, type: e2.showPassword ? K.value ? "text" : "password" : e2.type, disabled: W.value, readonly: e2.readonly, autocomplete: e2.autocomplete, placeholder: e2.placeholder, autofocus: e2.autofocus, form: e2.form, "onUpdate:modelValue": o2[0] || (o2[0] = (e3) => J.value = e3) }, v(O), { onInput: te, onChange: pe, onFocus: o2[1] || (o2[1] = (...e3) => v(se) && v(se)(...e3)), onBlur: o2[2] || (o2[2] = (...e3) => v(re) && v(re)(...e3)) }), null, 16, q), [[k, J.value]]), e2.$slots.suffix || ee.value || oe.value ? (c(), d("span", A, [_(e2.$slots, "suffix"), ee.value ? (c(), b(j, { key: 0, icon: "close-box", class: "px-input__clear", onClick: ue, onMousedown: $(v(C), ["prevent"]) }, null, 8, ["onMousedown"])) : h("", true), oe.value && K.value ? (c(), b(j, { key: 1, icon: "eye", class: "px-input__password", onClick: ne })) : h("", true), oe.value && !K.value ? (c(), b(j, { key: 2, icon: "eye-closed", class: "px-input__password", onClick: ne })) : h("", true)])) : h("", true)], 512), e2.$slots.append ? (c(), d("div", S, [_(e2.$slots, "append")])) : h("", true)], 64)) : m((c(), d("textarea", w({ key: 1, class: "px-textarea__wrapper", ref_key: "textareaRef", ref: N, id: v(I)().value, disabled: W.value, readonly: e2.readonly, autocomplete: e2.autocomplete, placeholder: e2.placeholder, autofocus: e2.autofocus, form: e2.form, "onUpdate:modelValue": o2[3] || (o2[3] = (e3) => J.value = e3) }, v(O), { onInput: te, onChange: pe, onFocus: o2[4] || (o2[4] = (...e3) => v(se) && v(se)(...e3)), onBlur: o2[5] || (o2[5] = (...e3) => v(re) && v(re)(...e3)) }), null, 16, D)), [[g, J.value]])], 6));
|
|
38
|
+
} }), G = l(E);
|
|
39
|
+
export {
|
|
40
|
+
G as P,
|
|
41
|
+
E as _
|
|
42
|
+
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as e, useCssVars as n, computed as t, createBlock as o, openBlock as i, Transition as l, withCtx as r, withDirectives as s, createElementVNode as c, normalizeClass as d, createCommentVNode as
|
|
2
|
-
import { d as y } from "./hooks-
|
|
1
|
+
import { defineComponent as e, useCssVars as n, computed as t, createBlock as o, openBlock as i, Transition as l, withCtx as r, withDirectives as s, createElementVNode as c, normalizeClass as d, createCommentVNode as u, createElementBlock as a, toDisplayString as b, vShow as p, nextTick as m, ref as f, reactive as v, createApp as g } from "vue";
|
|
2
|
+
import { d as y } from "./hooks-CYdEHUVd.js";
|
|
3
3
|
import { P as x } from "./Icon-DpJyuj7c.js";
|
|
4
4
|
import { d as k, i as L, r as A, u as $ } from "./vendor-DXmGx29U.js";
|
|
5
5
|
const I = { class: "px-loading__spinner" }, _ = { key: 1, class: "px-loading-text" }, h = e({ name: "PxLoading", inheritAttrs: false, __name: "Loading", props: { visible: {}, background: {}, spinner: {}, text: {}, fullscreen: {}, lock: {}, beforeClose: { type: Function }, closed: { type: Function }, target: {}, body: { type: Boolean }, zIndex: {}, onAfterLeave: { type: Function } }, setup(e2) {
|
|
6
6
|
n(((e3) => ({ c7e915b4: e3.background, 24995070: e3.zIndex })));
|
|
7
7
|
const m2 = e2, f2 = t((() => k(m2.spinner) ? m2.spinner : "spinner"));
|
|
8
|
-
return (e3, n2) => (i(), o(l, { name: "fade-in-linear", onAfterLeave: e3.onAfterLeave }, { default: r((() => [s(c("div", { class: d(["px-loading px-loading__mask", { "is-fullscreen": e3.fullscreen }]) }, [c("div", I, [false !== m2.spinner ? (i(), o(x, { key: 0, icon: f2.value, spin: "" }, null, 8, ["icon"])) :
|
|
8
|
+
return (e3, n2) => (i(), o(l, { name: "fade-in-linear", onAfterLeave: e3.onAfterLeave }, { default: r((() => [s(c("div", { class: d(["px-loading px-loading__mask", { "is-fullscreen": e3.fullscreen }]) }, [c("div", I, [false !== m2.spinner ? (i(), o(x, { key: 0, icon: f2.value, spin: "" }, null, 8, ["icon"])) : u("", true), e3.text ? (i(), a("p", _, b(e3.text), 1)) : u("", true)])], 2), [[p, m2.visible.value]])])), _: 1 }, 8, ["onAfterLeave"]));
|
|
9
9
|
} }), C = "px-loading-parent--relative", P = "px-loading-parent--hiden", j = "px-loading-numb", z = /* @__PURE__ */ new Map(), { nextZIndex: F } = y(3e3);
|
|
10
10
|
function N(e2 = document.body) {
|
|
11
11
|
e2.classList.remove(P);
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { t as e, e as o, R as t, f as n } from "./utils-bsCscZfS.js";
|
|
2
|
-
import { defineComponent as s, ref as a, computed as l, watch as c, onMounted as i, createBlock as r, openBlock as u, Transition as p, withCtx as d, withDirectives as f, createElementVNode as m, normalizeStyle as y, normalizeClass as g, createVNode as v, createElementBlock as x, createCommentVNode as b, renderSlot as
|
|
3
|
-
import { e as A, f as L, d as V, u as E } from "./hooks-
|
|
2
|
+
import { defineComponent as s, ref as a, computed as l, watch as c, onMounted as i, createBlock as r, openBlock as u, Transition as p, withCtx as d, withDirectives as f, createElementVNode as m, normalizeStyle as y, normalizeClass as g, createVNode as v, createElementBlock as x, createCommentVNode as b, renderSlot as h, unref as B, withModifiers as _, vShow as C, shallowReactive as k, isVNode as w, h as I, render as T, reactive as P, nextTick as z, createTextVNode as $, toDisplayString as M, resolveDynamicComponent as O, withKeys as j } from "vue";
|
|
3
|
+
import { e as A, f as L, d as V, u as E } from "./hooks-CYdEHUVd.js";
|
|
4
4
|
import { P as D } from "./Icon-DpJyuj7c.js";
|
|
5
5
|
import { v as R, u as N, f as K, d as S, w as Z, g as H, x as U, i as q, y as F, z as G, A as J, B as Q } from "./vendor-DXmGx29U.js";
|
|
6
|
-
import { b as W } from "./Button-
|
|
7
|
-
import { _ as X } from "./Input-
|
|
6
|
+
import { b as W } from "./Button-fW_ZOLmT.js";
|
|
7
|
+
import { _ as X } from "./Input-DBPpvf0Y.js";
|
|
8
8
|
import { P as Y } from "./Overlay-BRDSWspM.js";
|
|
9
9
|
const ee = ["aria-live"], oe = { class: "px-message__content" }, te = { key: 0, class: "px-message__close" }, ne = s({ name: "PxMessage", __name: "Message", props: { id: {}, message: {}, duration: { default: 3e3 }, showClose: { type: Boolean }, center: { type: Boolean }, type: { default: "info" }, offset: { default: 10 }, zIndex: {}, transitionName: { default: "fade-up" }, onDestory: {} }, setup(n2, { expose: s2 }) {
|
|
10
10
|
const k2 = n2, w2 = a(false), I2 = a(), T2 = a(0), { topOffset: P2, bottomOffset: z2 } = A({ getLastBottomOffset: R(re, k2), offset: k2.offset, boxHeight: T2 }), $2 = l((() => e.get(k2.type) ?? "circle-info")), M2 = l((() => ({ top: o(P2.value), zIndex: k2.zIndex })));
|
|
@@ -25,7 +25,7 @@ const ee = ["aria-live"], oe = { class: "px-message__content" }, te = { key: 0,
|
|
|
25
25
|
"Escape" === o2 && E2();
|
|
26
26
|
})), i((() => {
|
|
27
27
|
w2.value = true, j2();
|
|
28
|
-
})), s2({ close: E2, bottomOffset: z2 }), (e2, o2) => (u(), r(p, { name: e2.transitionName, onEnter: o2[0] || (o2[0] = (e3) => T2.value = I2.value.getBoundingClientRect().height), onAfterLeave: o2[1] || (o2[1] = (o3) => !w2.value && e2.onDestory()) }, { default: d((() => [f(m("div", { ref_key: "messageRef", ref: I2, class: g(["px-message", { [`px-message--${e2.type}`]: e2.type, "is-close": e2.showClose, "text-center": e2.center }]), style: y(M2.value), role: "alert", "aria-live": "danger" === e2.type || "warning" === e2.type ? "assertive" : "polite", onMouseenter: V2, onMouseleave: j2 }, [v(D, { class: "px-message__icon", icon: $2.value }, null, 8, ["icon"]), m("div", oe, [
|
|
28
|
+
})), s2({ close: E2, bottomOffset: z2 }), (e2, o2) => (u(), r(p, { name: e2.transitionName, onEnter: o2[0] || (o2[0] = (e3) => T2.value = I2.value.getBoundingClientRect().height), onAfterLeave: o2[1] || (o2[1] = (o3) => !w2.value && e2.onDestory()) }, { default: d((() => [f(m("div", { ref_key: "messageRef", ref: I2, class: g(["px-message", { [`px-message--${e2.type}`]: e2.type, "is-close": e2.showClose, "text-center": e2.center }]), style: y(M2.value), role: "alert", "aria-live": "danger" === e2.type || "warning" === e2.type ? "assertive" : "polite", onMouseenter: V2, onMouseleave: j2 }, [v(D, { class: "px-message__icon", icon: $2.value }, null, 8, ["icon"]), m("div", oe, [h(e2.$slots, "default", {}, (() => [e2.message ? (u(), r(B(t), { key: 0, vNode: e2.message }, null, 8, ["vNode"])) : b("", true)]))]), e2.showClose ? (u(), x("div", te, [v(D, { icon: "close", onClick: _(E2, ["stop"]) })])) : b("", true)], 46, ee), [[C, w2.value]])])), _: 3 }, 8, ["name"]));
|
|
29
29
|
} }), se = ["info", "success", "warning", "danger", "error"], ae = k([]), { nextZIndex: le } = V(), ce = { type: "info", duration: 3e3, offset: 10, transitionName: "fade-up" }, ie = (e2) => {
|
|
30
30
|
const o2 = !e2 || w(e2) || S(e2) ? { message: e2 } : e2;
|
|
31
31
|
return { ...ce, ...o2 };
|
|
@@ -76,7 +76,7 @@ const pe = n(ue, "$message"), de = { class: "px-message-box__title" }, fe = { cl
|
|
|
76
76
|
(_a = y2.value) == null ? void 0 : _a.focus();
|
|
77
77
|
}));
|
|
78
78
|
})), (e2, o3) => (u(), r(p, { name: "fade-in-linear", onAfterLeave: e2.destroy }, { default: d((() => [f(v(Y, { "z-index": w2.zIndex, mask: "" }, { default: d((() => [m("div", { role: "dialog", class: "px-overlay-message-box", onClick: A2 }, [m("div", { ref: "rootRef", class: g(["px-message-box", { "is-center": w2.center }]), onClick: o3[5] || (o3[5] = _((() => {
|
|
79
|
-
}), ["stop"])) }, [
|
|
79
|
+
}), ["stop"])) }, [B(q)(w2.title) ? b("", true) : (u(), x("div", { key: 0, ref_key: "headerRef", ref: i2, class: g(["px-message-box__header", { "show-close": w2.showClose }]) }, [m("div", de, [T2.value && w2.center ? (u(), r(D, { key: 0, class: g({ [`px-icon-${w2.type}`]: w2.type }), icon: T2.value }, null, 8, ["class", "icon"])) : b("", true), $(" " + M(w2.title), 1)]), e2.showClose ? (u(), x("button", { key: 0, class: "px-message-box__header-btn", onClick: _(N2, ["stop"]) }, [v(D, { icon: "close" })])) : b("", true)], 2)), m("div", fe, [T2.value && !w2.center && I2.value ? (u(), r(D, { key: 0, class: g({ [`px-icon-${w2.type}`]: w2.type }), icon: T2.value }, null, 8, ["class", "icon"])) : b("", true), I2.value ? (u(), x("div", me, [h(e2.$slots, "default", {}, (() => [(u(), r(O(w2.showInput ? "label" : "p"), { for: w2.showInput ? B(k2) : void 0 }, { default: d((() => [$(M(w2.message), 1)])), _: 1 }, 8, ["for"]))]))])) : b("", true)]), f(m("div", ye, [v(X, { modelValue: w2.inputValue, "onUpdate:modelValue": o3[0] || (o3[0] = (e3) => w2.inputValue = e3), ref_key: "inputRef", ref: y2, placeholder: w2.inputPlaceholder, type: w2.inputType, onKeyup: j(L2, ["enter"]) }, null, 8, ["modelValue", "placeholder", "type"])], 512), [[C, w2.showInput]]), m("div", ge, [w2.showCancelButton ? (u(), r(W, { key: 0, class: "px-message-box__footer-btn px-message-box__cancel-btn", type: w2.cancelButtonType, round: w2.roundButton, loading: w2.cancelButtonLoading, onClick: o3[1] || (o3[1] = (e3) => R2("cancel")), onKeydown: o3[2] || (o3[2] = j(_(((e3) => R2("cancel")), ["prevent"]), ["enter"])) }, { default: d((() => [$(M(w2.cancelButtonText), 1)])), _: 1 }, 8, ["type", "round", "loading"])) : b("", true), f(v(W, { class: "px-message-box__footer-btn px-message-box__confirm-btn", type: w2.confirmButtonType ?? "primary", round: w2.roundButton, loading: w2.confirmButtonLoading, onClick: o3[3] || (o3[3] = (e3) => R2("confirm")), onKeydown: o3[4] || (o3[4] = j(_(((e3) => R2("confirm")), ["prevent"]), ["enter"])) }, { default: d((() => [$(M(w2.confirmButtonText), 1)])), _: 1 }, 8, ["type", "round", "loading"]), [[C, w2.showConfirmButton]])])], 2)])])), _: 3 }, 8, ["z-index"]), [[C, e2.visible.value]])])), _: 3 }, 8, ["onAfterLeave"]));
|
|
80
80
|
} }), xe = /* @__PURE__ */ new Map();
|
|
81
81
|
function be(e2) {
|
|
82
82
|
let o2;
|
|
@@ -100,11 +100,11 @@ function be(e2) {
|
|
|
100
100
|
xe.set(s2, { options: e2, callback: o2, resolve: t2, reject: n2 });
|
|
101
101
|
}));
|
|
102
102
|
}
|
|
103
|
-
const
|
|
103
|
+
const he = { alert: { closeOnClickModal: false }, confirm: { showCancelButton: true }, prompt: { showCancelButton: true, showInput: true } };
|
|
104
104
|
K(["alert", "confirm", "prompt"], ((e2) => {
|
|
105
105
|
return U(be, e2, (o2 = e2, (e3, t2, n2) => {
|
|
106
106
|
let s2 = "";
|
|
107
|
-
return J(t2) ? (n2 = t2, s2 = "") : s2 = Q(t2) ? "" : t2, be(G({ title: s2, message: e3, type: "", boxType: o2, ...
|
|
107
|
+
return J(t2) ? (n2 = t2, s2 = "") : s2 = Q(t2) ? "" : t2, be(G({ title: s2, message: e3, type: "", boxType: o2, ...he[o2] }, n2));
|
|
108
108
|
}));
|
|
109
109
|
var o2;
|
|
110
110
|
})), U(be, "close", (() => {
|
|
@@ -112,12 +112,12 @@ K(["alert", "confirm", "prompt"], ((e2) => {
|
|
|
112
112
|
o2.doClose();
|
|
113
113
|
})), xe.clear();
|
|
114
114
|
}));
|
|
115
|
-
const
|
|
116
|
-
U(
|
|
115
|
+
const Be = be;
|
|
116
|
+
U(Be, "install", ((e2) => {
|
|
117
117
|
e2.config.globalProperties.$msgbox = be, e2.config.globalProperties.$messagebox = be, e2.config.globalProperties.$alert = be.alert, e2.config.globalProperties.$confirm = be.confirm, e2.config.globalProperties.$prompt = be.prompt;
|
|
118
118
|
}));
|
|
119
119
|
export {
|
|
120
120
|
pe as P,
|
|
121
|
-
|
|
121
|
+
Be as a,
|
|
122
122
|
se as m
|
|
123
123
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t, e, R as o, _ as n, f as s } from "./utils-bsCscZfS.js";
|
|
2
|
-
import { defineComponent as i, ref as a, computed as l, onMounted as f, createBlock as r, openBlock as c, Transition as p, withCtx as d, withDirectives as u, createElementVNode as m, normalizeStyle as v, normalizeClass as h, createCommentVNode as g, createElementBlock as x, toDisplayString as y, renderSlot as _, unref as C, createVNode as k, withModifiers as
|
|
3
|
-
import { e as z, d as E, u as $ } from "./hooks-
|
|
2
|
+
import { defineComponent as i, ref as a, computed as l, onMounted as f, createBlock as r, openBlock as c, Transition as p, withCtx as d, withDirectives as u, createElementVNode as m, normalizeStyle as v, normalizeClass as h, createCommentVNode as g, createElementBlock as x, toDisplayString as y, renderSlot as _, unref as C, createVNode as k, withModifiers as b, vShow as w, isVNode as I, h as N, render as O, shallowReactive as j } from "vue";
|
|
3
|
+
import { e as z, d as E, u as $ } from "./hooks-CYdEHUVd.js";
|
|
4
4
|
import { P as B } from "./Icon-DpJyuj7c.js";
|
|
5
5
|
import { v as D, u as M, f as P, d as R, w as A, g as L, x as W } from "./vendor-DXmGx29U.js";
|
|
6
6
|
const H = ["aria-live"], T = { class: "px-notification__text" }, Z = { class: "px-notification__title" }, q = { class: "px-notification__content" }, F = { key: 1, class: "px-notification__close" }, G = n(i({ name: "PxNotification", __name: "Notification", props: { title: {}, id: {}, zIndex: {}, position: { default: "top-right" }, type: { default: "info" }, message: {}, duration: { default: 3e3 }, showClose: { type: Boolean, default: true }, offset: { default: 20 }, transitionName: { default: "fade" }, icon: {}, onClick: {}, onClose: {}, onDestory: {} }, setup(n2, { expose: s2 }) {
|
|
@@ -17,7 +17,7 @@ const H = ["aria-live"], T = { class: "px-notification__text" }, Z = { class: "p
|
|
|
17
17
|
}
|
|
18
18
|
return f((() => {
|
|
19
19
|
I2.value = true, W2();
|
|
20
|
-
})), s2({ bottomOffset: E2, close: J2 }), (t2, e2) => (c(), r(p, { name: `px-notification-${t2.transitionName}`, onAfterLeave: e2[1] || (e2[1] = (e3) => !I2.value && t2.onDestory()), onEnter: e2[2] || (e2[2] = (t3) => O2.value = N2.value.getBoundingClientRect().height) }, { default: d((() => [u(m("div", { ref_key: "notifyRef", ref: N2, class: h(["px-notification", { [`px-notification--${t2.type}`]: t2.type, [P2.value]: true, "show-close": t2.showClose }]), style: v(A2.value), role: "alert", "aria-live": "danger" === t2.type || "warning" === t2.type ? "assertive" : "polite", onClick: e2[0] || (e2[0] = (...e3) => t2.onClick && t2.onClick(...e3)), onMouseenter: G2, onMouseleave: W2 }, [$2.value ? (c(), r(B, { key: 0, icon: $2.value, class: "px-notification__icon" }, null, 8, ["icon"])) : g("", true), m("div", T, [m("div", Z, y(t2.title), 1), m("div", q, [_(t2.$slots, "default", {}, (() => [t2.message ? (c(), r(C(o), { key: 0, vNode: t2.message }, null, 8, ["vNode"])) : g("", true)]), true)])]), t2.showClose ? (c(), x("div", F, [k(B, { icon: "close", onClick:
|
|
20
|
+
})), s2({ bottomOffset: E2, close: J2 }), (t2, e2) => (c(), r(p, { name: `px-notification-${t2.transitionName}`, onAfterLeave: e2[1] || (e2[1] = (e3) => !I2.value && t2.onDestory()), onEnter: e2[2] || (e2[2] = (t3) => O2.value = N2.value.getBoundingClientRect().height) }, { default: d((() => [u(m("div", { ref_key: "notifyRef", ref: N2, class: h(["px-notification", { [`px-notification--${t2.type}`]: t2.type, [P2.value]: true, "show-close": t2.showClose }]), style: v(A2.value), role: "alert", "aria-live": "danger" === t2.type || "warning" === t2.type ? "assertive" : "polite", onClick: e2[0] || (e2[0] = (...e3) => t2.onClick && t2.onClick(...e3)), onMouseenter: G2, onMouseleave: W2 }, [$2.value ? (c(), r(B, { key: 0, icon: $2.value, class: "px-notification__icon" }, null, 8, ["icon"])) : g("", true), m("div", T, [m("div", Z, y(t2.title), 1), m("div", q, [_(t2.$slots, "default", {}, (() => [t2.message ? (c(), r(C(o), { key: 0, vNode: t2.message }, null, 8, ["vNode"])) : g("", true)]), true)])]), t2.showClose ? (c(), x("div", F, [k(B, { icon: "close", onClick: b(J2, ["stop"]) })])) : g("", true)], 46, H), [[w, I2.value]])])), _: 3 }, 8, ["name"]));
|
|
21
21
|
} }), [["__scopeId", "data-v-2111f4f7"]]), J = ["info", "success", "warning", "danger"], K = ["top-right", "top-left", "bottom-right", "bottom-left"], Q = /* @__PURE__ */ new Map();
|
|
22
22
|
P(K, ((t2) => {
|
|
23
23
|
Q.set(t2, j([]));
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { e as o, _ as e, w as t } from "./utils-bsCscZfS.js";
|
|
2
2
|
import { defineComponent as n, ref as i, computed as c, createBlock as l, openBlock as a, createSlots as r, withCtx as f, createElementVNode as s, normalizeStyle as p, createCommentVNode as m, createTextVNode as u, toDisplayString as d, createVNode as _, renderSlot as y } from "vue";
|
|
3
|
-
import { b as v } from "./Button-
|
|
3
|
+
import { b as v } from "./Button-fW_ZOLmT.js";
|
|
4
4
|
import { P as x } from "./Icon-DpJyuj7c.js";
|
|
5
|
-
import { T as h } from "./Tooltip-
|
|
5
|
+
import { T as h } from "./Tooltip-HWx_i2FA.js";
|
|
6
6
|
const B = { class: "px-popconfirm__main" }, T = { class: "px-popconfirm__action" }, k = t(e(n({ name: "PxPopconfirm", __name: "Popconfirm", props: { title: { default: "" }, confirmButtonText: {}, cancelButtonText: {}, confirmButtonType: { default: "primary" }, cancelButtonType: {}, icon: { default: "question-circle" }, iconColor: { default: "#f90" }, hideIcon: { type: Boolean }, hideAfter: { default: 200 }, width: { default: 150 } }, emits: ["confirm", "cancel"], setup(e2, { emit: t2 }) {
|
|
7
7
|
const n2 = e2, k2 = t2, C = i(), P = c((() => ({ width: o(n2.width) })));
|
|
8
8
|
function j() {
|