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