@pantograph/vue 0.30.3 → 0.30.4
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 +31 -31
- package/dist/Toast/Toast.d.ts +1 -0
- package/dist/Toast/index.js +116 -103
- package/dist/Toast/index.umd.cjs +1 -1
- package/dist/style/index.css +1 -1
- package/dist/use/index.js +1 -1
- package/dist/use/index.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<img src="./public/logo.svg" alt="Pantograph Logo" width="160" />
|
|
3
|
-
</p>
|
|
4
|
-
|
|
5
|
-
# @pantograph/vue
|
|
6
|
-
|
|
7
|
-
Pantograph's Vue 3 component library, built with TypeScript and token-based design. Ready to use in your apps with light/dark token switching and simple, consistent APIs.
|
|
8
|
-
|
|
9
|
-
## Install
|
|
10
|
-
```bash
|
|
11
|
-
npm i @pantograph/vue
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## Quick usage
|
|
15
|
-
```vue
|
|
16
|
-
<script setup>
|
|
17
|
-
import { Button } from '@pantograph/vue'
|
|
18
|
-
import '@pantograph/style'
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
<template>
|
|
22
|
-
<Button>Click me</Button>
|
|
23
|
-
</template>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## Documentation
|
|
27
|
-
For full documentation and live examples, visit the Pantograph docs:
|
|
28
|
-
|
|
29
|
-
- Docs: [Introduction & Stories](https://panto.stg.bounteco.com/story/src-story-introduction-story-js)
|
|
30
|
-
|
|
31
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="./public/logo.svg" alt="Pantograph Logo" width="160" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
# @pantograph/vue
|
|
6
|
+
|
|
7
|
+
Pantograph's Vue 3 component library, built with TypeScript and token-based design. Ready to use in your apps with light/dark token switching and simple, consistent APIs.
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
```bash
|
|
11
|
+
npm i @pantograph/vue
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Quick usage
|
|
15
|
+
```vue
|
|
16
|
+
<script setup>
|
|
17
|
+
import { Button } from '@pantograph/vue'
|
|
18
|
+
import '@pantograph/style'
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<template>
|
|
22
|
+
<Button>Click me</Button>
|
|
23
|
+
</template>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Documentation
|
|
27
|
+
For full documentation and live examples, visit the Pantograph docs:
|
|
28
|
+
|
|
29
|
+
- Docs: [Introduction & Stories](https://panto.stg.bounteco.com/story/src-story-introduction-story-js)
|
|
30
|
+
|
|
31
|
+
|
package/dist/Toast/Toast.d.ts
CHANGED
package/dist/Toast/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { cva as
|
|
3
|
-
import { getComponentOptions as
|
|
4
|
-
import {
|
|
5
|
-
import { _ as
|
|
1
|
+
import { defineComponent as $, useSlots as z, computed as b, createElementBlock as P, openBlock as T, normalizeClass as I, unref as p, renderSlot as H, createVNode as _, createBlock as O, createCommentVNode as R, h as c } from "vue";
|
|
2
|
+
import { cva as w } from "class-variance-authority";
|
|
3
|
+
import { getComponentOptions as j, getBemBlock as q, generateVariantClassList as y, getBemElement as a, normCls as l, getComponentName as F } from "@pantograph/utils";
|
|
4
|
+
import { isEmptyElement as d, installComponent as G } from "@pantograph/utils-vue";
|
|
5
|
+
import { _ as J } from "../IconButton.vue_vue_type_script_setup_true_lang-DsSD_y63.js";
|
|
6
|
+
import { _ as K } from "../Icon.vue_vue_type_style_index_0_lang-CD9EvvB5.js";
|
|
6
7
|
import "../Progress/index.js";
|
|
7
|
-
import { getCssCoreVar as
|
|
8
|
-
import { i as
|
|
9
|
-
import { _ as
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
...I("Toast"),
|
|
8
|
+
import { getCssCoreVar as M } from "@pantograph/tokens";
|
|
9
|
+
import { i as Q } from "../isNumber-BduWbB-B.js";
|
|
10
|
+
import { _ as U } from "../Progress.vue_vue_type_style_index_0_lang-Ba_Fby6M.js";
|
|
11
|
+
const W = ["info", "success", "warning", "error"], X = /* @__PURE__ */ $({
|
|
12
|
+
...j("Toast"),
|
|
13
13
|
__name: "Toast",
|
|
14
14
|
props: {
|
|
15
15
|
type: {},
|
|
@@ -31,14 +31,20 @@ const F = ["info", "success", "warning", "error"], G = /* @__PURE__ */ T({
|
|
|
31
31
|
closeCls: {},
|
|
32
32
|
onCloseNotification: {}
|
|
33
33
|
},
|
|
34
|
-
setup(
|
|
35
|
-
const
|
|
34
|
+
setup(N) {
|
|
35
|
+
const o = N, t = z(), s = q("toast"), L = w(s, {
|
|
36
36
|
variants: {
|
|
37
|
-
type:
|
|
38
|
-
paused:
|
|
37
|
+
type: y(W, s),
|
|
38
|
+
paused: y("paused", s)
|
|
39
39
|
}
|
|
40
|
-
}), h =
|
|
41
|
-
|
|
40
|
+
}), h = a(s, "body");
|
|
41
|
+
w(h, {
|
|
42
|
+
variants: {
|
|
43
|
+
inline: y("inline", h)
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
const A = b(() => {
|
|
47
|
+
switch (o.type) {
|
|
42
48
|
case "info":
|
|
43
49
|
return "sky";
|
|
44
50
|
case "success":
|
|
@@ -49,9 +55,9 @@ const F = ["info", "success", "warning", "error"], G = /* @__PURE__ */ T({
|
|
|
49
55
|
return "red";
|
|
50
56
|
}
|
|
51
57
|
return "primary";
|
|
52
|
-
}),
|
|
53
|
-
if (
|
|
54
|
-
switch (
|
|
58
|
+
}), g = b(() => {
|
|
59
|
+
if (o.icon) return o.icon;
|
|
60
|
+
switch (o.type) {
|
|
55
61
|
case "info":
|
|
56
62
|
return "tabler:info-circle";
|
|
57
63
|
case "success":
|
|
@@ -61,95 +67,102 @@ const F = ["info", "success", "warning", "error"], G = /* @__PURE__ */ T({
|
|
|
61
67
|
case "error":
|
|
62
68
|
return "tabler:circle-x";
|
|
63
69
|
}
|
|
64
|
-
})
|
|
65
|
-
|
|
66
|
-
|
|
70
|
+
}), D = () => {
|
|
71
|
+
var m;
|
|
72
|
+
const r = (m = t.icon) == null ? void 0 : m.call(t), u = !d(r);
|
|
73
|
+
if (u || g.value)
|
|
74
|
+
return c(
|
|
75
|
+
"div",
|
|
76
|
+
{ class: a(s, "icon") },
|
|
77
|
+
c(
|
|
78
|
+
K,
|
|
79
|
+
{
|
|
80
|
+
icon: g.value,
|
|
81
|
+
size: "sm",
|
|
82
|
+
style: { color: M("rouad") }
|
|
83
|
+
},
|
|
84
|
+
u ? { icon: r } : {}
|
|
85
|
+
)
|
|
86
|
+
);
|
|
87
|
+
}, E = () => {
|
|
88
|
+
const u = (() => {
|
|
89
|
+
var n;
|
|
90
|
+
const e = (n = t.description) == null ? void 0 : n.call(t), i = !d(e);
|
|
91
|
+
if (i || o.description)
|
|
92
|
+
return c(
|
|
93
|
+
"div",
|
|
94
|
+
{
|
|
95
|
+
class: l(a(s, "description"), o.descriptionCls, "paragraph")
|
|
96
|
+
},
|
|
97
|
+
i ? e : o.description
|
|
98
|
+
);
|
|
99
|
+
})(), v = (() => {
|
|
100
|
+
var n;
|
|
101
|
+
const e = (n = t.title) == null ? void 0 : n.call(t), i = !d(e);
|
|
102
|
+
if (o.title || i)
|
|
103
|
+
return c(
|
|
104
|
+
"div",
|
|
105
|
+
{ class: l(a(s, "title"), o.titleCls, "paragraph") },
|
|
106
|
+
i ? e : o.title
|
|
107
|
+
);
|
|
108
|
+
})(), S = (() => {
|
|
109
|
+
var n;
|
|
110
|
+
const e = (n = t.closeButton) == null ? void 0 : n.call(t), i = !d(e);
|
|
111
|
+
if (o.closable || i)
|
|
112
|
+
return c(
|
|
113
|
+
"div",
|
|
114
|
+
{ class: l(a(s, "close"), o.closeCls) },
|
|
115
|
+
i ? e : c(J, {
|
|
116
|
+
icon: "tabler:x",
|
|
117
|
+
color: "neutral",
|
|
118
|
+
type: "ghost",
|
|
119
|
+
onClick: o.onCloseNotification
|
|
120
|
+
})
|
|
121
|
+
);
|
|
122
|
+
})(), k = (() => {
|
|
123
|
+
var n;
|
|
124
|
+
const e = (n = t.link) == null ? void 0 : n.call(t);
|
|
125
|
+
if (!d(e)) return e;
|
|
126
|
+
})(), f = (() => {
|
|
127
|
+
var n;
|
|
128
|
+
const e = (n = t.actions) == null ? void 0 : n.call(t);
|
|
129
|
+
if (!d(e))
|
|
130
|
+
return c(
|
|
131
|
+
"div",
|
|
132
|
+
{ class: l(a(s, "actions"), o.actionsCls) },
|
|
133
|
+
e
|
|
134
|
+
);
|
|
135
|
+
})(), C = !k && !u, V = () => {
|
|
136
|
+
if (!v && !S && !(C && f)) return null;
|
|
137
|
+
const e = [v];
|
|
138
|
+
return C && e.push(f), e.push(S), c("div", { class: l(a(s, "header"), o.headerCls) }, e);
|
|
139
|
+
}, B = [c("div", { class: l(a(s, "content"), o.contentCls) }, [
|
|
140
|
+
V(),
|
|
141
|
+
u
|
|
142
|
+
])];
|
|
143
|
+
return C || B.push(k, f), c("div", { class: l(a(s, "body"), o.bodyCls) }, B);
|
|
144
|
+
};
|
|
145
|
+
return (r, u) => (T(), P("div", {
|
|
146
|
+
class: I(p(l)(p(L)({ type: r.type, paused: r.paused }), o.class))
|
|
67
147
|
}, [
|
|
68
|
-
|
|
69
|
-
|
|
148
|
+
H(r.$slots, "render", {}, () => [
|
|
149
|
+
_(D),
|
|
150
|
+
_(E),
|
|
151
|
+
r.progress && p(Q)(r.duration) && ![0, 1 / 0].includes(r.duration) ? (T(), O(p(U), {
|
|
70
152
|
key: 0,
|
|
71
|
-
class:
|
|
72
|
-
}, [
|
|
73
|
-
g(P, {
|
|
74
|
-
icon: d.value,
|
|
75
|
-
size: "sm",
|
|
76
|
-
style: V({ color: e(R)("rouad") })
|
|
77
|
-
}, S({ _: 2 }, [
|
|
78
|
-
l.icon ? {
|
|
79
|
-
name: "icon",
|
|
80
|
-
fn: z(() => [
|
|
81
|
-
u(o.$slots, "icon")
|
|
82
|
-
]),
|
|
83
|
-
key: "0"
|
|
84
|
-
} : void 0
|
|
85
|
-
]), 1032, ["icon", "style"])
|
|
86
|
-
], 2)) : c("", !0),
|
|
87
|
-
y("div", {
|
|
88
|
-
class: t(e(r)(e(n)(e(s), "body"), o.bodyCls))
|
|
89
|
-
}, [
|
|
90
|
-
y("div", {
|
|
91
|
-
class: t(e(r)(e(n)(e(s), "content"), o.contentCls))
|
|
92
|
-
}, [
|
|
93
|
-
o.title || l.title ? (a(), i("div", {
|
|
94
|
-
key: 0,
|
|
95
|
-
class: t(e(r)(e(n)(e(s), "header"), o.headerCls))
|
|
96
|
-
}, [
|
|
97
|
-
o.title || l.title ? (a(), i("div", {
|
|
98
|
-
key: 0,
|
|
99
|
-
class: t(e(r)(e(n)(e(s), "title"), o.titleCls, "paragraph"))
|
|
100
|
-
}, [
|
|
101
|
-
u(o.$slots, "title", {}, () => [
|
|
102
|
-
B(v(o.title), 1)
|
|
103
|
-
])
|
|
104
|
-
], 2)) : c("", !0),
|
|
105
|
-
p.closable || l.closeButton ? (a(), i("div", {
|
|
106
|
-
key: 1,
|
|
107
|
-
class: t(e(r)(e(n)(e(s), "close"), o.closeCls))
|
|
108
|
-
}, [
|
|
109
|
-
u(o.$slots, "closeButton", {}, () => [
|
|
110
|
-
g(O, {
|
|
111
|
-
icon: "tabler:x",
|
|
112
|
-
color: "neutral",
|
|
113
|
-
type: "ghost",
|
|
114
|
-
onClick: m[0] || (m[0] = (H) => {
|
|
115
|
-
var C;
|
|
116
|
-
return (C = o.onCloseNotification) == null ? void 0 : C.call(o);
|
|
117
|
-
})
|
|
118
|
-
})
|
|
119
|
-
])
|
|
120
|
-
], 2)) : c("", !0)
|
|
121
|
-
], 2)) : c("", !0),
|
|
122
|
-
o.description || l.description ? (a(), i("div", {
|
|
123
|
-
key: 1,
|
|
124
|
-
class: t(e(r)(e(n)(e(s), "description"), o.descriptionCls, "paragraph"))
|
|
125
|
-
}, [
|
|
126
|
-
u(o.$slots, "description", {}, () => [
|
|
127
|
-
B(v(o.description), 1)
|
|
128
|
-
])
|
|
129
|
-
], 2)) : c("", !0)
|
|
130
|
-
], 2),
|
|
131
|
-
l.actions ? (a(), i("div", {
|
|
132
|
-
key: 0,
|
|
133
|
-
class: t(e(r)(e(n)(e(s), "actions"), o.actionsCls))
|
|
134
|
-
}, [
|
|
135
|
-
u(o.$slots, "actions")
|
|
136
|
-
], 2)) : c("", !0)
|
|
137
|
-
], 2),
|
|
138
|
-
o.progress && e(j)(o.duration) && ![0, 1 / 0].includes(o.duration) ? (a(), w(e(q), {
|
|
139
|
-
key: 1,
|
|
140
|
-
class: t(e(r)(e(n)(e(s), "progress"), o.progressCls)),
|
|
153
|
+
class: I(p(l)(p(a)(p(s), "progress"), r.progressCls)),
|
|
141
154
|
noTransition: "",
|
|
142
155
|
notRounded: "",
|
|
143
|
-
duration:
|
|
144
|
-
color:
|
|
145
|
-
}, null, 8, ["class", "duration", "color"])) :
|
|
156
|
+
duration: r.duration,
|
|
157
|
+
color: A.value
|
|
158
|
+
}, null, 8, ["class", "duration", "color"])) : R("", !0)
|
|
146
159
|
])
|
|
147
160
|
], 2));
|
|
148
161
|
}
|
|
149
|
-
}),
|
|
162
|
+
}), mo = G(X, F("Toast"));
|
|
150
163
|
export {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
164
|
+
X as Toast,
|
|
165
|
+
mo as ToastPlugin,
|
|
166
|
+
W as ToastTypes,
|
|
167
|
+
X as default
|
|
155
168
|
};
|
package/dist/Toast/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),B=require("class-variance-authority"),t=require("@pantograph/utils"),a=require("@pantograph/utils-vue"),V=require("../IconButton.vue_vue_type_script_setup_true_lang-CY2MXWF8.js"),N=require("../Icon.vue_vue_type_style_index_0_lang-DOQsa_aO.js");require("../Progress/index.umd.cjs");const L=require("@pantograph/tokens"),w=require("../isNumber-DMOjxgl8.js"),A=require("../Progress.vue_vue_type_style_index_0_lang-D_g_XsJ4.js"),E=["info","success","warning","error"],C=e.defineComponent({...t.getComponentOptions("Toast"),__name:"Toast",props:{type:{},duration:{default:3e3},progress:{type:Boolean,default:!1},closable:{type:Boolean,default:!0},paused:{type:Boolean},title:{},description:{},icon:{},class:{},bodyCls:{},progressCls:{},contentCls:{},titleCls:{},descriptionCls:{},actionsCls:{},headerCls:{},closeCls:{},onCloseNotification:{}},setup(S){const n=S,s=e.useSlots(),i=t.getBemBlock("toast"),k=B.cva(i,{variants:{type:t.generateVariantClassList(E,i),paused:t.generateVariantClassList("paused",i)}}),g=t.getBemElement(i,"body");B.cva(g,{variants:{inline:t.generateVariantClassList("inline",g)}});const b=e.computed(()=>{switch(n.type){case"info":return"sky";case"success":return"green";case"warning":return"yellow";case"error":return"red"}return"primary"}),y=e.computed(()=>{if(n.icon)return n.icon;switch(n.type){case"info":return"tabler:info-circle";case"success":return"tabler:circle-check";case"warning":return"tabler:alert-triangle";case"error":return"tabler:circle-x"}}),T=()=>{var p;const c=(p=s.icon)==null?void 0:p.call(s),u=!a.isEmptyElement(c);if(u||y.value)return e.h("div",{class:t.getBemElement(i,"icon")},e.h(N._sfc_main,{icon:y.value,size:"sm",style:{color:L.getCssCoreVar("rouad")}},u?{icon:c}:{}))},q=()=>{const u=(()=>{var r;const o=(r=s.description)==null?void 0:r.call(s),l=!a.isEmptyElement(o);if(l||n.description)return e.h("div",{class:t.normCls(t.getBemElement(i,"description"),n.descriptionCls,"paragraph")},l?o:n.description)})(),f=(()=>{var r;const o=(r=s.title)==null?void 0:r.call(s),l=!a.isEmptyElement(o);if(n.title||l)return e.h("div",{class:t.normCls(t.getBemElement(i,"title"),n.titleCls,"paragraph")},l?o:n.title)})(),h=(()=>{var r;const o=(r=s.closeButton)==null?void 0:r.call(s),l=!a.isEmptyElement(o);if(n.closable||l)return e.h("div",{class:t.normCls(t.getBemElement(i,"close"),n.closeCls)},l?o:e.h(V._sfc_main,{icon:"tabler:x",color:"neutral",type:"ghost",onClick:n.onCloseNotification}))})(),_=(()=>{var r;const o=(r=s.link)==null?void 0:r.call(s);if(!a.isEmptyElement(o))return o})(),m=(()=>{var r;const o=(r=s.actions)==null?void 0:r.call(s);if(!a.isEmptyElement(o))return e.h("div",{class:t.normCls(t.getBemElement(i,"actions"),n.actionsCls)},o)})(),d=!_&&!u,I=()=>{if(!f&&!h&&!(d&&m))return null;const o=[f];return d&&o.push(m),o.push(h),e.h("div",{class:t.normCls(t.getBemElement(i,"header"),n.headerCls)},o)},v=[e.h("div",{class:t.normCls(t.getBemElement(i,"content"),n.contentCls)},[I(),u])];return d||v.push(_,m),e.h("div",{class:t.normCls(t.getBemElement(i,"body"),n.bodyCls)},v)};return(c,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(t.normCls)(e.unref(k)({type:c.type,paused:c.paused}),n.class))},[e.renderSlot(c.$slots,"render",{},()=>[e.createVNode(T),e.createVNode(q),c.progress&&e.unref(w.isNumber)(c.duration)&&![0,1/0].includes(c.duration)?(e.openBlock(),e.createBlock(e.unref(A._sfc_main),{key:0,class:e.normalizeClass(e.unref(t.normCls)(e.unref(t.getBemElement)(e.unref(i),"progress"),c.progressCls)),noTransition:"",notRounded:"",duration:c.duration,color:b.value},null,8,["class","duration","color"])):e.createCommentVNode("",!0)])],2))}}),P=a.installComponent(C,t.getComponentName("Toast"));exports.Toast=C;exports.ToastPlugin=P;exports.ToastTypes=E;exports.default=C;
|