@phila/phila-ui-callout 1.0.0-beta.8 → 1.0.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.
- package/dist/Callout.vue.d.ts +9 -1
- package/dist/Callout.vue.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +40 -121
- package/package.json +3 -3
package/dist/Callout.vue.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { CalloutProps } from './index';
|
|
2
|
+
type __VLS_Props = CalloutProps;
|
|
3
|
+
type __VLS_PublicProps = {
|
|
4
|
+
"open"?: boolean;
|
|
5
|
+
} & __VLS_Props;
|
|
2
6
|
declare function __VLS_template(): {
|
|
3
7
|
attrs: Partial<{}>;
|
|
4
8
|
slots: {
|
|
@@ -8,7 +12,11 @@ declare function __VLS_template(): {
|
|
|
8
12
|
rootEl: HTMLDivElement;
|
|
9
13
|
};
|
|
10
14
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
11
|
-
declare const __VLS_component: import('vue').DefineComponent<
|
|
15
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
16
|
+
"update:open": (value: boolean) => any;
|
|
17
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
18
|
+
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
19
|
+
}>, {
|
|
12
20
|
title: string;
|
|
13
21
|
message: string;
|
|
14
22
|
type: "info" | "warning" | "error" | "success";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Callout.vue.d.ts","sourceRoot":"","sources":["../src/Callout.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Callout.vue.d.ts","sourceRoot":"","sources":["../src/Callout.vue"],"names":[],"mappings":"AA0IA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAU5C,KAAK,WAAW,GAAG,YAAY,CAAC;AA2ChC,KAAK,iBAAiB,GAAG;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WA4FT,OAAO,IAA6B;;yBAVpB,GAAG;;;;EAehC;AAkBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;wFASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.callout[data-v-
|
|
1
|
+
.callout[data-v-391366fe]{font-family:var(--Body-Default-font-body-default-family);line-height:var(--Body-Default-font-body-default-lineheight);border-radius:var(--border-radius-l)}.callout--success[data-v-391366fe]{background:var(--Schemes-Success-Container)}.callout--success .callout-icon[data-v-391366fe]{color:var(--Schemes-On-Success-Container)}.callout--warning[data-v-391366fe]{background:var(--Schemes-Alert-Container)}.callout--info[data-v-391366fe]{background:var(--Schemes-Info-Container)}.callout--error[data-v-391366fe]{background:var(--Schemes-Error-Container)}.callout--error .callout-icon[data-v-391366fe]{color:var(--Schemes-On-Error-Container)}.callout-header[data-v-391366fe]{cursor:pointer;width:100%;display:flex;justify-content:space-between;text-align:left;padding:var(--spacing-m);background:none;border:none}.callout-header-left[data-v-391366fe]{display:flex;gap:var(--spacing-xs)}.callout-title[data-v-391366fe]{font-weight:600;font-size:var(--Heading-H5-font-heading-5-size)}.callout--chevron[data-v-391366fe]{position:relative;float:right}.callout--content[data-v-391366fe]{font-size:var(--Body-Default-font-body-default-size);padding:0 var(--spacing-m) var(--spacing-m)}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),s=require("@phila/phila-ui-core"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),s=require("@phila/phila-ui-core"),n=require("@phila/phila-ui-core/icons"),d={class:"callout-header-left"},p={class:"callout-title"},m={key:0,class:"callout--content"},f=e.defineComponent({__name:"Callout",props:e.mergeModels({title:{default:""},message:{default:""},type:{default:"info"},className:{}},{open:{type:Boolean,default:!1},openModifiers:{}}),emits:["update:open"],setup(l){const c=e.useSlots(),t=l,o=e.useModel(l,"open"),a=()=>{o.value=!o.value},r=e.computed(()=>s.cn("callout",`callout--${t.type}`,t.className)),u=e.computed(()=>{switch(t.type){case"success":return n.IconCircleCheck;case"warning":return n.IconTriangleExclamation;case"error":return n.IconCircleExclamation;default:return n.IconCircleInfo}});return(i,C)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.value)},[e.createElementVNode("button",{type:"button",class:"callout-header",onClick:a},[e.createElementVNode("div",d,[e.createVNode(e.unref(s.Icon),{icon:u.value,decorative:"",inline:"",size:"small",class:"callout-icon"},null,8,["icon"]),e.createElementVNode("span",p,e.toDisplayString(t.title),1)]),e.createVNode(e.unref(s.Icon),{icon:o.value?e.unref(n.IconChevronUp):e.unref(n.IconChevronDown),decorative:"",inline:"",size:"small"},null,8,["icon"])]),o.value?(e.openBlock(),e.createElementBlock("div",m,[e.unref(c).default?e.renderSlot(i.$slots,"default",{key:0},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(t.message),1)],64))])):e.createCommentVNode("",!0)],2))}}),v=(l,c)=>{const t=l.__vccOpts||l;for(const[o,a]of c)t[o]=a;return t},_=v(f,[["__scopeId","data-v-391366fe"]]);exports.Callout=_;
|
package/dist/index.mjs
CHANGED
|
@@ -1,155 +1,74 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { cn as
|
|
3
|
-
import { IconCircleInfo as V, IconCircleExclamation as
|
|
4
|
-
import './index.css';const
|
|
5
|
-
inheritAttrs: !1,
|
|
6
|
-
__name: "PhlButton",
|
|
7
|
-
props: {
|
|
8
|
-
href: {},
|
|
9
|
-
to: {},
|
|
10
|
-
target: {},
|
|
11
|
-
rel: {},
|
|
12
|
-
disabled: { type: Boolean, default: !1 },
|
|
13
|
-
clickTarget: {},
|
|
14
|
-
variant: { default: "primary" },
|
|
15
|
-
size: { default: "medium" },
|
|
16
|
-
iconOnly: { type: Boolean, default: !1 },
|
|
17
|
-
iconRight: { type: Boolean },
|
|
18
|
-
text: {},
|
|
19
|
-
className: {},
|
|
20
|
-
icon: {},
|
|
21
|
-
src: {},
|
|
22
|
-
svgRaw: {}
|
|
23
|
-
},
|
|
24
|
-
setup(s) {
|
|
25
|
-
const e = s, t = (o) => "href" in o && o.href !== void 0 || "to" in o && o.to !== void 0, a = c(() => $(
|
|
26
|
-
"phila-button",
|
|
27
|
-
`phila-button--${e.variant}`,
|
|
28
|
-
e.size && `is-${e.size}`,
|
|
29
|
-
e.iconOnly && "icon-button",
|
|
30
|
-
e.iconOnly && e.variant === "standard" && "icon-button--standard",
|
|
31
|
-
e.className
|
|
32
|
-
)), i = c(() => t(e) ? "to" in e && e.to !== void 0 ? {
|
|
33
|
-
to: e.to,
|
|
34
|
-
disabled: e.disabled,
|
|
35
|
-
className: a.value
|
|
36
|
-
} : {
|
|
37
|
-
href: e.href,
|
|
38
|
-
target: e.target,
|
|
39
|
-
rel: e.rel,
|
|
40
|
-
disabled: e.disabled,
|
|
41
|
-
className: a.value
|
|
42
|
-
} : {}), r = c(
|
|
43
|
-
() => ({
|
|
44
|
-
icon: e.icon,
|
|
45
|
-
src: e.src,
|
|
46
|
-
iconRight: e.iconRight,
|
|
47
|
-
iconOnly: e.iconOnly,
|
|
48
|
-
text: e.text,
|
|
49
|
-
size: e.size
|
|
50
|
-
})
|
|
51
|
-
);
|
|
52
|
-
return (o, f) => t(e) ? (n(), N(l(E), b({ key: 0 }, { ...i.value, ...o.$attrs }, { role: "button" }), {
|
|
53
|
-
default: p(() => [
|
|
54
|
-
d(l(x), g(C(r.value)), {
|
|
55
|
-
default: p(() => [
|
|
56
|
-
y(o.$slots, "default", {}, () => [
|
|
57
|
-
h(m(e.text), 1)
|
|
58
|
-
])
|
|
59
|
-
]),
|
|
60
|
-
_: 3
|
|
61
|
-
}, 16)
|
|
62
|
-
]),
|
|
63
|
-
_: 3
|
|
64
|
-
}, 16)) : (n(), u("button", b({
|
|
65
|
-
key: 1,
|
|
66
|
-
type: "button",
|
|
67
|
-
disabled: e.disabled,
|
|
68
|
-
class: a.value
|
|
69
|
-
}, o.$attrs), [
|
|
70
|
-
d(l(x), g(C(r.value)), {
|
|
71
|
-
default: p(() => [
|
|
72
|
-
y(o.$slots, "default", {}, () => [
|
|
73
|
-
h(m(e.text), 1)
|
|
74
|
-
])
|
|
75
|
-
]),
|
|
76
|
-
_: 3
|
|
77
|
-
}, 16)
|
|
78
|
-
], 16, M));
|
|
79
|
-
}
|
|
80
|
-
}), j = { class: "callout-header-left" }, q = { class: "callout-title" }, G = {
|
|
1
|
+
import { defineComponent as _, mergeModels as C, useSlots as g, useModel as h, computed as i, createElementBlock as s, openBlock as a, normalizeClass as y, createElementVNode as r, createCommentVNode as I, createVNode as u, unref as n, toDisplayString as d, renderSlot as k, Fragment as N, createTextVNode as x } from "vue";
|
|
2
|
+
import { cn as E, Icon as p } from "@phila/phila-ui-core";
|
|
3
|
+
import { IconCircleInfo as V, IconCircleExclamation as w, IconTriangleExclamation as z, IconCircleCheck as B, IconChevronUp as M, IconChevronDown as S } from "@phila/phila-ui-core/icons";
|
|
4
|
+
import './index.css';const b = { class: "callout-header-left" }, D = { class: "callout-title" }, O = {
|
|
81
5
|
key: 0,
|
|
82
6
|
class: "callout--content"
|
|
83
|
-
},
|
|
7
|
+
}, T = /* @__PURE__ */ _({
|
|
84
8
|
__name: "Callout",
|
|
85
|
-
props: {
|
|
9
|
+
props: /* @__PURE__ */ C({
|
|
86
10
|
title: { default: "" },
|
|
87
11
|
message: { default: "" },
|
|
88
12
|
type: { default: "info" },
|
|
89
13
|
className: {}
|
|
90
|
-
},
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
14
|
+
}, {
|
|
15
|
+
open: { type: Boolean, default: !1 },
|
|
16
|
+
openModifiers: {}
|
|
17
|
+
}),
|
|
18
|
+
emits: ["update:open"],
|
|
19
|
+
setup(o) {
|
|
20
|
+
const l = g(), e = o, t = h(o, "open"), c = () => {
|
|
21
|
+
t.value = !t.value;
|
|
22
|
+
}, m = i(() => E("callout", `callout--${e.type}`, e.className)), f = i(() => {
|
|
23
|
+
switch (e.type) {
|
|
96
24
|
case "success":
|
|
97
|
-
return
|
|
25
|
+
return B;
|
|
98
26
|
case "warning":
|
|
99
|
-
return
|
|
27
|
+
return z;
|
|
100
28
|
case "error":
|
|
101
|
-
return
|
|
29
|
+
return w;
|
|
102
30
|
default:
|
|
103
31
|
return V;
|
|
104
32
|
}
|
|
105
33
|
});
|
|
106
|
-
return (
|
|
107
|
-
class:
|
|
34
|
+
return (v, F) => (a(), s("div", {
|
|
35
|
+
class: y(m.value)
|
|
108
36
|
}, [
|
|
109
|
-
|
|
37
|
+
r("button", {
|
|
110
38
|
type: "button",
|
|
111
39
|
class: "callout-header",
|
|
112
|
-
onClick:
|
|
40
|
+
onClick: c
|
|
113
41
|
}, [
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
icon:
|
|
42
|
+
r("div", b, [
|
|
43
|
+
u(n(p), {
|
|
44
|
+
icon: f.value,
|
|
117
45
|
decorative: "",
|
|
118
46
|
inline: "",
|
|
119
47
|
size: "small",
|
|
120
48
|
class: "callout-icon"
|
|
121
49
|
}, null, 8, ["icon"]),
|
|
122
|
-
|
|
50
|
+
r("span", D, d(e.title), 1)
|
|
123
51
|
]),
|
|
124
|
-
|
|
125
|
-
icon:
|
|
52
|
+
u(n(p), {
|
|
53
|
+
icon: t.value ? n(M) : n(S),
|
|
126
54
|
decorative: "",
|
|
127
55
|
inline: "",
|
|
128
56
|
size: "small"
|
|
129
57
|
}, null, 8, ["icon"])
|
|
130
58
|
]),
|
|
131
|
-
|
|
132
|
-
l
|
|
133
|
-
|
|
59
|
+
t.value ? (a(), s("div", O, [
|
|
60
|
+
n(l).default ? k(v.$slots, "default", { key: 0 }, void 0, !0) : (a(), s(N, { key: 1 }, [
|
|
61
|
+
x(d(e.message), 1)
|
|
134
62
|
], 64))
|
|
135
|
-
])) :
|
|
136
|
-
t.dismissible ? (n(), N(l(U), {
|
|
137
|
-
key: 1,
|
|
138
|
-
variant: "standard",
|
|
139
|
-
size: "extra-small",
|
|
140
|
-
"icon-only": "",
|
|
141
|
-
icon: l(L),
|
|
142
|
-
"aria-label": "Dismiss",
|
|
143
|
-
onClick: _[0] || (_[0] = R(() => f.emit("dismiss"), ["prevent"]))
|
|
144
|
-
}, null, 8, ["icon"])) : k("", !0)
|
|
63
|
+
])) : I("", !0)
|
|
145
64
|
], 2));
|
|
146
65
|
}
|
|
147
|
-
}),
|
|
148
|
-
const
|
|
149
|
-
for (const [
|
|
150
|
-
t
|
|
151
|
-
return
|
|
152
|
-
},
|
|
66
|
+
}), $ = (o, l) => {
|
|
67
|
+
const e = o.__vccOpts || o;
|
|
68
|
+
for (const [t, c] of l)
|
|
69
|
+
e[t] = c;
|
|
70
|
+
return e;
|
|
71
|
+
}, A = /* @__PURE__ */ $(T, [["__scopeId", "data-v-391366fe"]]);
|
|
153
72
|
export {
|
|
154
|
-
|
|
73
|
+
A as Callout
|
|
155
74
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-callout",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A vue component for displaying important messages and warnings.",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"vue": "^3.0.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@phila/phila-ui-core": "3.0.0
|
|
32
|
-
"@phila/phila-ui-button": "2.3.0
|
|
31
|
+
"@phila/phila-ui-core": "3.0.0",
|
|
32
|
+
"@phila/phila-ui-button": "2.3.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/node": "^24.0.0",
|