sakana-element 2.0.1 → 2.1.0

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.
Files changed (38) hide show
  1. package/README.md +79 -0
  2. package/dist/es/{Alert-D4jZO-Gv.js → Alert-C5X-XFGJ.js} +1 -1
  3. package/dist/es/Button-DTik2ZP6.js +33 -0
  4. package/dist/es/{Collapse-CgadjkRS.js → Collapse-l_8qKOBG.js} +1 -1
  5. package/dist/es/Dropdown-ZjZ0qSn2.js +40 -0
  6. package/dist/es/{Form-X4dNzwFt.js → Form-pxRZxseS.js} +1 -1
  7. package/dist/es/Icon-UBaqO2nY.js +27 -0
  8. package/dist/es/{Input-C0g1h9x2.js → Input-BJoBaFXa.js} +3 -3
  9. package/dist/es/{Loading-Cv4Fsu-C.js → Loading-BJJBJhg3.js} +2 -2
  10. package/dist/es/{Message-BuoSEEVc.js → Message-CqBKW0c8.js} +41 -41
  11. package/dist/es/Notification-CVACM2cj.js +58 -0
  12. package/dist/es/{Popconfirm-mMYpa7O6.js → Popconfirm-CW8oRycq.js} +3 -3
  13. package/dist/es/{Select-SRw_b6I2.js → Select-C7mwByXa.js} +4 -4
  14. package/dist/es/{Switch-bhJBaSI7.js → Switch-CgFPFC3j.js} +1 -1
  15. package/dist/es/Tooltip-D9rQ4LEg.js +74 -0
  16. package/dist/es/hooks-DNMt3QPi.js +104 -0
  17. package/dist/es/index.js +55 -51
  18. package/dist/index.css +1 -1
  19. package/dist/theme/Button.css +508 -116
  20. package/dist/theme/Notification.css +20 -20
  21. package/dist/theme/Tooltip.css +10 -10
  22. package/dist/theme/fonts/zpix.ttf +0 -0
  23. package/dist/theme/index.css +1 -1
  24. package/dist/types/components/Button/types.d.ts +3 -0
  25. package/dist/types/components/Icon/icons/pixelarticons-all.d.ts +1 -0
  26. package/dist/types/core/index.d.ts +1 -0
  27. package/dist/umd/index.css +1 -1
  28. package/dist/umd/index.css.gz +0 -0
  29. package/dist/umd/index.umd.cjs +12 -12
  30. package/dist/umd/index.umd.cjs.gz +0 -0
  31. package/package.json +11 -3
  32. package/dist/es/Button-l3ljgd74.js +0 -33
  33. package/dist/es/Dropdown-DBqye5wx.js +0 -38
  34. package/dist/es/Icon-4XdUD4qc.js +0 -27
  35. package/dist/es/Notification-Bv_vDOpB.js +0 -58
  36. package/dist/es/Tooltip-CUOZC7JN.js +0 -74
  37. package/dist/es/hooks-qpAqkY5H.js +0 -64
  38. /package/dist/types/components/Button/{contants.d.ts → constants.d.ts} +0 -0
package/README.md ADDED
@@ -0,0 +1,79 @@
1
+ # Sakana Element
2
+
3
+ [![npm version](https://img.shields.io/npm/v/sakana-element.svg)](https://www.npmjs.com/package/sakana-element)
4
+ [![license](https://img.shields.io/npm/l/sakana-element.svg)](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
+ | `PxCollapse` | Collapse / 折叠面板 |
43
+ | `PxDropdown` | Dropdown / 下拉菜单 |
44
+ | `PxForm` | Form / 表单 |
45
+ | `PxTooltip` | Tooltip / 文字提示 |
46
+ | `PxPopconfirm` | Popconfirm / 气泡确认框 |
47
+ | `PxMessage` | Message / 消息提示 |
48
+ | `PxMessageBox` | MessageBox / 消息弹框 |
49
+ | `PxNotification` | Notification / 通知 |
50
+ | `PxLoading` | Loading / 加载 |
51
+ | `PxOverlay` | Overlay / 遮罩层 |
52
+ | `PxConfigProvider` | ConfigProvider / 全局配置 |
53
+
54
+ ## Bundled Font / 内置字体
55
+
56
+ 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.
57
+
58
+ 本组件库内置了 [zpix 像素字体](https://github.com/SolidZORO/zpix-pixel-font)（~6.9MB `.ttf`），用于实现复古像素风格外观。导入 `sakana-element/dist/index.css` 后字体会通过 CSS `@font-face` 自动加载，无需额外配置。字体文件占包体积大部分（总计约 8MB），组件库本身的代码和样式仅约 1MB。
59
+
60
+ ## Dark Mode / 暗色模式
61
+
62
+ Add the `px-dark` or `dark` class to an ancestor element:
63
+
64
+ 在祖先元素上添加 `px-dark` 或 `dark` 类名：
65
+
66
+ ```html
67
+ <html class="px-dark">
68
+ <!-- All Sakana Element components will render in dark mode -->
69
+ </html>
70
+ ```
71
+
72
+ ## Links / 链接
73
+
74
+ - [GitHub](https://github.com/yu859/sakana-element)
75
+ - [npm](https://www.npmjs.com/package/sakana-element)
76
+
77
+ ## License / 许可证
78
+
79
+ [ISC](https://github.com/yu859/sakana-element/blob/master/LICENSE)
package/dist/es/{Alert-D4jZO-Gv.js → Alert-C5X-XFGJ.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { t as e, _ as t, w as l } from "./utils-340oIQ8K.js";
2
2
  import { defineComponent as o, useSlots as s, ref as a, computed as c, createBlock as n, openBlock as i, Transition as p, withCtx as r, withDirectives as f, createElementVNode as _, normalizeClass as u, createCommentVNode as d, createElementBlock as x, normalizeStyle as m, renderSlot as v, createTextVNode as y, toDisplayString as w, createVNode as h, withModifiers as I, vShow as $ } from "vue";
3
- import { P as b } from "./Icon-4XdUD4qc.js";
3
+ import { P as b } from "./Icon-UBaqO2nY.js";
4
4
  const g = { class: "px-alert__content" }, k = { class: "px-alert__description" }, B = { key: 0, class: "px-alert__close" }, P = l(t(o({ name: "PxAlert", __name: "Alert", props: { title: {}, type: { default: "info" }, description: {}, effect: { default: "light" }, closable: { type: Boolean, default: true }, center: { type: Boolean }, showIcon: { type: Boolean } }, emits: ["close"], setup(t2, { expose: l2, emit: o2 }) {
5
5
  const P2 = t2, j = o2, A = s(), C = a(true), q = c((() => e.get(P2.type) ?? "circle-info")), z = c((() => P2.description || A.default));
6
6
  function D() {
package/dist/es/Button-DTik2ZP6.js ADDED
@@ -0,0 +1,33 @@
1
+ import { d as t, _ as o, w as e } from "./utils-340oIQ8K.js";
2
+ import { defineComponent as a, useSlots as r, inject as n, ref as l, computed as u, createBlock as b, openBlock as s, resolveDynamicComponent as i, unref as p, normalizeStyle as c, normalizeClass as d, withCtx as x, renderSlot as v, createCommentVNode as g, createVNode as h, provide as y, reactive as f, toRef as m, createElementBlock as B } from "vue";
3
+ import { P as _ } from "./Icon-UBaqO2nY.js";
4
+ import { t as M } from "./vendor-DXmGx29U.js";
5
+ const z = Symbol("BUTTON_GROUP_CTX_KEY"), I = o(a({ 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 }, color: {}, loadingIcon: {}, ariaLabel: {}, autofocus: { type: Boolean }, useThrottle: { type: Boolean, default: true }, throttleDuration: { default: 500 } }, emits: ["click"], setup(o2, { expose: e2, emit: a2 }) {
6
+ const y2 = /* @__PURE__ */ new Set(["button", "a", "div", "span", "router-link"]), f2 = o2;
7
+ "string" != typeof f2.tag || y2.has(f2.tag) || t("PxButton", `Invalid tag "${f2.tag}". Allowed tags: ${[...y2].join(", ")}. Falling back to "button".`);
8
+ const m2 = a2, B2 = r(), I2 = n(z, void 0), $2 = l(), k2 = u((() => "string" != typeof f2.tag || y2.has(f2.tag) ? f2.tag : "button")), T2 = u((() => (I2 == null ? void 0 : I2.size) ?? (f2 == null ? void 0 : f2.size) ?? "")), w2 = u((() => (I2 == null ? void 0 : I2.type) ?? (f2 == null ? void 0 : f2.type) ?? "")), P = u((() => (I2 == null ? void 0 : I2.disabled) || (f2 == null ? void 0 : f2.disabled) || false)), S = u((() => ({ marginRight: B2.default ? "6px" : "0px" })));
9
+ function j(t2, o3) {
10
+ const e3 = parseInt(t2.replace("#", ""), 16);
11
+ return `#${(Math.min(255, (e3 >> 16) + Math.round(2.55 * o3)) << 16 | Math.min(255, (e3 >> 8 & 255) + Math.round(2.55 * o3)) << 8 | Math.min(255, (255 & e3) + Math.round(2.55 * o3))).toString(16).padStart(6, "0")}`;
12
+ }
13
+ const G = u((() => {
14
+ if (!f2.color) return {};
15
+ const t2 = f2.color, o3 = (function(t3) {
16
+ const o4 = parseInt(t3.replace("#", ""), 16);
17
+ return (0.299 * (o4 >> 16) + 0.587 * (o4 >> 8 & 255) + 0.114 * (255 & o4)) / 255 > 0.6 ? "#1e1e2e" : "#ffffff";
18
+ })(t2), e3 = (function(t3) {
19
+ const o4 = parseInt(t3.replace("#", ""), 16);
20
+ return `#${(Math.max(0, (o4 >> 16) - Math.round(38.25)) << 16 | Math.max(0, (o4 >> 8 & 255) - Math.round(38.25)) << 8 | Math.max(0, (255 & o4) - Math.round(38.25))).toString(16).padStart(6, "0")}`;
21
+ })(t2), a3 = j(t2, 20), r2 = j(t2, 35);
22
+ return f2.ghost ? { "--px-button-text-color": t2, "--px-button-bg-color": "transparent", "--px-button-border-color": "transparent", "--px-button-shadow-color": "transparent", "--px-button-hover-text-color": e3, "--px-button-hover-bg-color": r2, "--px-button-hover-border-color": "transparent", "--px-button-active-text-color": e3, "--px-button-active-bg-color": a3, "--px-button-active-border-color": "transparent", "--px-button-disabled-text-color": a3, "--px-button-disabled-bg-color": "transparent", "--px-button-disabled-border-color": "transparent" } : f2.dash ? { "--px-button-text-color": t2, "--px-button-bg-color": r2, "--px-button-border-color": t2, "--px-button-shadow-color": "transparent", "--px-button-hover-text-color": e3, "--px-button-hover-bg-color": a3, "--px-button-hover-border-color": e3, "--px-button-active-text-color": e3, "--px-button-active-bg-color": t2, "--px-button-active-border-color": e3, "--px-button-disabled-text-color": a3, "--px-button-disabled-bg-color": r2, "--px-button-disabled-border-color": a3 } : f2.plain ? { "--px-button-text-color": t2, "--px-button-bg-color": r2, "--px-button-border-color": t2, "--px-button-hover-text-color": o3, "--px-button-hover-bg-color": t2, "--px-button-hover-border-color": t2, "--px-button-active-text-color": o3, "--px-button-active-bg-color": e3, "--px-button-active-border-color": e3, "--px-button-disabled-text-color": a3, "--px-button-disabled-bg-color": r2, "--px-button-disabled-border-color": a3 } : { "--px-button-text-color": o3, "--px-button-bg-color": t2, "--px-button-border-color": e3, "--px-button-shadow-color": e3, "--px-button-hover-text-color": o3, "--px-button-hover-bg-color": a3, "--px-button-hover-border-color": t2, "--px-button-active-text-color": o3, "--px-button-active-bg-color": e3, "--px-button-active-border-color": e3, "--px-button-disabled-text-color": o3, "--px-button-disabled-bg-color": a3, "--px-button-disabled-border-color": a3 };
23
+ })), C = (t2) => m2("click", t2), D = M(C, f2.throttleDuration, { trailing: false });
24
+ return e2({ ref: $2, disabled: P, size: T2, type: w2 }), (t2, o3) => (s(), b(i(k2.value), { ref_key: "_ref", ref: $2, autofocus: t2.autofocus, type: "button" === k2.value ? t2.nativeType : void 0, class: d(["px-button", { [`px-button--${w2.value}`]: w2.value, [`px-button--${T2.value}`]: T2.value, "is-plain": t2.plain, "is-round": t2.round, "is-circle": t2.circle, "is-dash": t2.dash, "is-ghost": t2.ghost, "is-disabled": P.value, "is-loading": t2.loading }]), "aria-label": t2.ariaLabel, disabled: !(!P.value && !t2.loading) || void 0, style: c(G.value), onClick: o3[0] || (o3[0] = (o4) => t2.useThrottle ? p(D)(o4) : C(o4)) }, { default: x((() => [t2.loading ? v(t2.$slots, "loading", { key: 0 }, (() => [h(_, { class: "loading-icon", icon: t2.loadingIcon ?? "loader", style: c(S.value), size: "1x", spin: "" }, null, 8, ["icon", "style"])]), true) : g("", true), t2.icon && !t2.loading ? (s(), b(_, { key: 1, icon: t2.icon, style: c(S.value), size: "1x" }, null, 8, ["icon", "style"])) : g("", true), v(t2.$slots, "default", {}, void 0, true)])), _: 3 }, 8, ["autofocus", "type", "aria-label", "disabled", "class", "style"]));
25
+ } }), [["__scopeId", "data-v-7044e22a"]]), $ = { class: "px-button-group" }, k = o(a({ name: "PxButtonGroup", __name: "ButtonGroup", props: { size: {}, type: {}, disabled: { type: Boolean } }, setup(t2) {
26
+ const o2 = t2;
27
+ return y(z, f({ size: m(o2, "size"), type: m(o2, "type"), disabled: m(o2, "disabled") })), (t3, o3) => (s(), B("div", $, [v(t3.$slots, "default", {}, void 0, true)]));
28
+ } }), [["__scopeId", "data-v-7bc34bb7"]]), T = e(I), w = e(k);
29
+ export {
30
+ w as P,
31
+ T as a,
32
+ I as b
33
+ };
package/dist/es/{Collapse-CgadjkRS.js → Collapse-l_8qKOBG.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { _ as e, w as a } from "./utils-340oIQ8K.js";
2
2
  import { defineComponent as l, ref as t, watchEffect as s, watch as o, provide as i, createElementBlock as d, openBlock as n, renderSlot as c, inject as p, computed as m, normalizeClass as r, createElementVNode as u, createVNode as v, createTextVNode as f, toDisplayString as h, Transition as _, mergeProps as x, toHandlers as g, unref as b, withCtx as y, withDirectives as C, vShow as I } from "vue";
3
- import { P as $ } from "./Icon-4XdUD4qc.js";
3
+ import { P as $ } from "./Icon-UBaqO2nY.js";
4
4
  const V = Symbol("collapseContext"), w = { class: "px-collapse" }, P = e(l({ name: "PxCollapse", __name: "Collapse", props: { modelValue: {}, accordion: { type: Boolean } }, emits: ["update:modelValue", "change"], setup(e2, { emit: a2 }) {
5
5
  const l2 = e2, p2 = a2, m2 = t(l2.modelValue);
6
6
  function r2(e3) {
package/dist/es/Dropdown-ZjZ0qSn2.js ADDED
@@ -0,0 +1,40 @@
1
+ import { w as e } from "./utils-340oIQ8K.js";
2
+ import { defineComponent as o, inject as i, computed as a, createElementBlock as t, 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-DNMt3QPi.js";
4
+ import { P as C, a as z } from "./Button-DTik2ZP6.js";
5
+ import { T as $ } from "./Tooltip-D9rQ4LEg.js";
6
+ import { a as j, i as T } from "./vendor-DXmGx29U.js";
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 = a((() => f2 == null ? void 0 : f2.size.value));
9
+ function h2() {
10
+ o2.disabled || (f2 == null ? void 0 : f2.handleItemClick(o2));
11
+ }
12
+ return (e3, o3) => (l(), t(d, null, [e3.divided ? (l(), t("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
+ } }), 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
+ const n2 = e2, m2 = i2;
15
+ f();
16
+ const c2 = v(), B2 = v(), I2 = v(false), O2 = a((() => j(n2, ["items", "hideOnClick", "size", "type", "splitButton"])));
17
+ function S2() {
18
+ var _a;
19
+ (_a = c2.value) == null ? void 0 : _a.toggle();
20
+ }
21
+ return x(B2, (() => {
22
+ var _a;
23
+ n2.splitButton && ((_a = c2.value) == null ? void 0 : _a.hide());
24
+ })), g(), h(D, { handleItemClick: function(e3) {
25
+ var _a;
26
+ n2.hideOnClick && ((_a = c2.value) == null ? void 0 : _a.hide()), !T(e3.command) && m2("command", e3.command);
27
+ }, size: a((() => n2.size)) }), o2({ open: () => {
28
+ var _a;
29
+ return (_a = c2.value) == null ? void 0 : _a.show();
30
+ }, close: () => {
31
+ var _a;
32
+ return (_a = c2.value) == null ? void 0 : _a.hide();
33
+ } }), (e3, o3) => (l(), t("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
+ I2.value = o4, e3.$emit("visible-change", o4);
35
+ }) }), { content: k((() => [s("div", A, [u(e3.$slots, "dropdown", {}, (() => [(l(true), t(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
+ } })), V = e(P);
37
+ export {
38
+ S as P,
39
+ V as a
40
+ };
package/dist/es/{Form-X4dNzwFt.js → Form-pxRZxseS.js} RENAMED
@@ -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-340oIQ8K.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-qpAqkY5H.js";
4
+ import { u as z } from "./hooks-DNMt3QPi.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) => {