@phila/phila-ui-callout 0.0.25 → 1.0.0-beta.10

package/dist/Callout.vue.d.ts

@@ -1,4 +1,8 @@
 import { CalloutProps } from './index';
+type __VLS_Props = CalloutProps;
+type __VLS_PublicProps = {
+    "open"?: boolean;
+} & __VLS_Props;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -8,14 +12,14 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<CalloutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    dismiss: () => any;
-}, string, import('vue').PublicProps, Readonly<CalloutProps> & Readonly<{
-    onDismiss?: (() => any) | undefined;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    title: string;
     message: string;
-    type: "info" | "warning" | "error";
-    dismissible: boolean;
+    type: "info" | "warning" | "error" | "success";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/Callout.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.vue.d.ts","sourceRoot":"","sources":["../src/Callout.vue"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA2B5C,iBAAS,cAAc;WA8DT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAeD,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"}
+{"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

@@ -0,0 +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.d.ts

@@ -1,9 +1,8 @@
 import { BaseProps } from '@phila/phila-ui-core';
 export { default as Callout } from './Callout.vue';
 export interface CalloutProps extends BaseProps {
+    title?: string;
     message?: string;
-    type?: "info" | "warning" | "error";
-    icon?: string;
-    dismissible?: boolean;
+    type?: "info" | "warning" | "error" | "success";
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAInD,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAInD,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;CACjD"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),l=require("@phila/phila-ui-core"),d=["disabled"],u=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:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{}},setup(n){const t=n,a=o=>"href"in o&&o.href!==void 0||"to"in o&&o.to!==void 0,s=e.computed(()=>l.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)),i=e.computed(()=>a(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:s.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:s.value}:{}),r=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,iconRight:t.iconRight,iconOnly:t.iconOnly,text:t.text,size:t.size}));return(o,c)=>a(t)?(e.openBlock(),e.createBlock(e.unref(l.BaseLink),e.mergeProps({key:0},{...i.value,...o.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(l.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(o.$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:s.value},o.$attrs),[e.createVNode(e.unref(l.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,d))}});var m={prefix:"fas",iconName:"xmark",icon:[384,512,[128473,10005,10006,10060,215,"close","multiply","remove","times"],"f00d","M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]},f=m;const p={class:"content"},v=e.defineComponent({__name:"Callout",props:{message:{default:""},type:{default:"info"},icon:{},dismissible:{type:Boolean,default:!1},className:{}},emits:["dismiss"],setup(n,{emit:t}){const a=e.useSlots(),s=n,i=t,r=e.computed(()=>l.cn(s.className));return(o,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["callout",r.value])},[e.createElementVNode("div",p,[e.unref(a).default?e.renderSlot(o.$slots,"default",{key:0},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(s.message),1)],64))]),s.dismissible?(e.openBlock(),e.createBlock(e.unref(u),{key:0,variant:"standard",size:"extra-small","icon-only":"",icon:e.unref(f),"aria-label":"Dismiss",onClick:c[0]||(c[0]=e.withModifiers(()=>i("dismiss"),["prevent"]))},null,8,["icon"])):e.createCommentVNode("",!0)],2))}}),y=(n,t)=>{const a=n.__vccOpts||n;for(const[s,i]of t)a[s]=i;return a},k=y(v,[["__scopeId","data-v-df7d37eb"]]);exports.Callout=k;
+"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

@@ -1,126 +1,74 @@
-import { defineComponent as h, computed as c, createBlock as x, createElementBlock as m, openBlock as l, unref as i, mergeProps as y, withCtx as u, createVNode as b, normalizeProps as _, guardReactiveProps as g, renderSlot as f, createTextVNode as p, toDisplayString as v, useSlots as C, normalizeClass as z, createElementVNode as B, createCommentVNode as $, Fragment as L, withModifiers as O } from "vue";
-import { cn as N, BaseLink as D, ActionContent as k } from "@phila/phila-ui-core";
-import './index.css';const R = ["disabled"], P = /* @__PURE__ */ h({
-  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: {},
-    iconDefinition: {},
-    iconClass: {},
-    src: {},
-    svgRaw: {}
-  },
-  setup(o) {
-    const e = o, a = (t) => "href" in t && t.href !== void 0 || "to" in t && t.to !== void 0, s = c(() => N(
-      "phila-button",
-      `phila-button--${e.variant}`,
-      e.size && `is-${e.size}`,
-      e.iconOnly && "icon-button",
-      e.iconOnly && e.variant === "standard" && "icon-button--standard",
-      e.className
-    )), n = c(() => a(e) ? "to" in e && e.to !== void 0 ? {
-      to: e.to,
-      disabled: e.disabled,
-      className: s.value
-    } : {
-      href: e.href,
-      target: e.target,
-      rel: e.rel,
-      disabled: e.disabled,
-      className: s.value
-    } : {}), r = c(
-      () => ({
-        iconDefinition: e.iconDefinition,
-        iconClass: e.iconClass,
-        src: e.src,
-        iconRight: e.iconRight,
-        iconOnly: e.iconOnly,
-        text: e.text,
-        size: e.size
-      })
-    );
-    return (t, d) => a(e) ? (l(), x(i(D), y({ key: 0 }, { ...n.value, ...t.$attrs }, { role: "button" }), {
-      default: u(() => [
-        b(i(k), _(g(r.value)), {
-          default: u(() => [
-            f(t.$slots, "default", {}, () => [
-              p(v(e.text), 1)
-            ])
-          ]),
-          _: 3
-        }, 16)
-      ]),
-      _: 3
-    }, 16)) : (l(), m("button", y({
-      key: 1,
-      type: "button",
-      disabled: e.disabled,
-      class: s.value
-    }, t.$attrs), [
-      b(i(k), _(g(r.value)), {
-        default: u(() => [
-          f(t.$slots, "default", {}, () => [
-            p(v(e.text), 1)
-          ])
-        ]),
-        _: 3
-      }, 16)
-    ], 16, R));
-  }
-});
-var V = {
-  prefix: "fas",
-  iconName: "xmark",
-  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
-}, w = V;
-const S = { class: "content" }, T = /* @__PURE__ */ h({
+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";
+import { cn as E, Icon as p } from "@phila/phila-ui-core";
+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";
+import './index.css';const b = { class: "callout-header-left" }, D = { class: "callout-title" }, O = {
+  key: 0,
+  class: "callout--content"
+}, T = /* @__PURE__ */ _({
   __name: "Callout",
-  props: {
+  props: /* @__PURE__ */ C({
+    title: { default: "" },
     message: { default: "" },
     type: { default: "info" },
-    icon: {},
-    dismissible: { type: Boolean, default: !1 },
     className: {}
-  },
-  emits: ["dismiss"],
-  setup(o, { emit: e }) {
-    const a = C(), s = o, n = e, r = c(() => N(s.className));
-    return (t, d) => (l(), m("div", {
-      class: z(["callout", r.value])
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(o) {
+    const l = g(), e = o, t = h(o, "open"), c = () => {
+      t.value = !t.value;
+    }, m = i(() => E("callout", `callout--${e.type}`, e.className)), f = i(() => {
+      switch (e.type) {
+        case "success":
+          return B;
+        case "warning":
+          return z;
+        case "error":
+          return w;
+        default:
+          return V;
+      }
+    });
+    return (v, F) => (a(), s("div", {
+      class: y(m.value)
     }, [
-      B("div", S, [
-        i(a).default ? f(t.$slots, "default", { key: 0 }, void 0, !0) : (l(), m(L, { key: 1 }, [
-          p(v(s.message), 1)
-        ], 64))
+      r("button", {
+        type: "button",
+        class: "callout-header",
+        onClick: c
+      }, [
+        r("div", b, [
+          u(n(p), {
+            icon: f.value,
+            decorative: "",
+            inline: "",
+            size: "small",
+            class: "callout-icon"
+          }, null, 8, ["icon"]),
+          r("span", D, d(e.title), 1)
+        ]),
+        u(n(p), {
+          icon: t.value ? n(M) : n(S),
+          decorative: "",
+          inline: "",
+          size: "small"
+        }, null, 8, ["icon"])
       ]),
-      s.dismissible ? (l(), x(i(P), {
-        key: 0,
-        variant: "standard",
-        size: "extra-small",
-        "icon-only": "",
-        icon: i(w),
-        "aria-label": "Dismiss",
-        onClick: d[0] || (d[0] = O(() => n("dismiss"), ["prevent"]))
-      }, null, 8, ["icon"])) : $("", !0)
+      t.value ? (a(), s("div", O, [
+        n(l).default ? k(v.$slots, "default", { key: 0 }, void 0, !0) : (a(), s(N, { key: 1 }, [
+          x(d(e.message), 1)
+        ], 64))
+      ])) : I("", !0)
     ], 2));
   }
-}), A = (o, e) => {
-  const a = o.__vccOpts || o;
-  for (const [s, n] of e)
-    a[s] = n;
-  return a;
-}, F = /* @__PURE__ */ A(T, [["__scopeId", "data-v-df7d37eb"]]);
+}), $ = (o, l) => {
+  const e = o.__vccOpts || o;
+  for (const [t, c] of l)
+    e[t] = c;
+  return e;
+}, A = /* @__PURE__ */ $(T, [["__scopeId", "data-v-391366fe"]]);
 export {
-  F as Callout
+  A as Callout
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-callout",
-  "version": "0.0.25",
+  "version": "1.0.0-beta.10",
   "type": "module",
   "description": "A vue component for displaying important messages and warnings.",
   "main": "./dist/index.js",
@@ -25,13 +25,11 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "vue": "^3.0.0",
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/pro-solid-svg-icons": "^7.1.0"
+    "vue": "^3.0.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "2.4.0",
-    "@phila/phila-ui-button": "2.2.3"
+    "@phila/phila-ui-core": "3.0.0-beta.9",
+    "@phila/phila-ui-button": "2.3.0-beta.10"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",