@phila/phila-ui-button 2.2.3-beta.1 → 2.2.3-beta.3

package/README.md

@@ -2,7 +2,12 @@
 
 <!-- status-badge-start -->
 
-![Status: Stable](https://img.shields.io/badge/-Stable-brightgreen)
+### Component Status
+
+| Component   | Status                                                      |
+| ----------- | ----------------------------------------------------------- |
+| Button      | ![Stable](https://img.shields.io/badge/-Stable-brightgreen) |
+| CloseButton | ![Stable](https://img.shields.io/badge/-Stable-brightgreen) |
 
 <!-- status-badge-end -->
 

package/dist/index.d.ts

@@ -1,16 +1,42 @@
 import { BaseIconProps } from '@phila/phila-ui-core';
 import { BaseProps } from '@phila/phila-ui-core';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { ComponentSize } from '@phila/phila-ui-core';
+import { DefineComponent } from 'vue';
 import { DefineSetupFnComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 import { RouteLocationRaw } from '@phila/phila-ui-core';
 
 declare const __VLS_component: DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, PublicProps>;
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
 
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -34,6 +60,28 @@ export declare type ButtonProps = EventButtonProps | LinkButtonProps;
 
 export declare type ButtonVariant = "primary" | "secondary" | "destructive" | "standard";
 
+export declare const CloseButton: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BaseProps & {
+disabled?: boolean;
+size?: ComponentSize;
+ariaLabel?: string;
+}>, {
+disabled: boolean;
+size: string;
+ariaLabel: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BaseProps & {
+disabled?: boolean;
+size?: ComponentSize;
+ariaLabel?: string;
+}>, {
+disabled: boolean;
+size: string;
+ariaLabel: string;
+}>>> & Readonly<{}>, {
+size: ComponentSize;
+disabled: boolean;
+ariaLabel: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
 export declare interface EventButtonProps extends BaseButtonProps {
     /** No href or to - renders as <button> */
     href?: never;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("@phila/phila-ui-core"),c=["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(s){const t=s,a=n=>"href"in n&&n.href!==void 0||"to"in n&&n.to!==void 0,i=e.computed(()=>o.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)),l=e.computed(()=>a(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:i.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:i.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(n,d)=>a(t)?(e.openBlock(),e.createBlock(e.unref(o.BaseLink),e.mergeProps({key:0},{...l.value,...n.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(o.ActionContent),e.normalizeProps(e.guardReactiveProps(r.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:i.value},n.$attrs),[e.createVNode(e.unref(o.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,c))}});exports.PhilaButton=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("@phila/phila-ui-core"),d=["disabled"],r=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,i=a=>"href"in a&&a.href!==void 0||"to"in a&&a.to!==void 0,s=e.computed(()=>o.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)),c=e.computed(()=>i(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}:{}),l=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,iconRight:t.iconRight,iconOnly:t.iconOnly,text:t.text,size:t.size}));return(a,m)=>i(t)?(e.openBlock(),e.createBlock(e.unref(o.BaseLink),e.mergeProps({key:0},{...c.value,...a.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(o.ActionContent),e.normalizeProps(e.guardReactiveProps(l.value)),{default:e.withCtx(()=>[e.renderSlot(a.$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},a.$attrs),[e.createVNode(e.unref(o.ActionContent),e.normalizeProps(e.guardReactiveProps(l.value)),{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,d))}});var u={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"]};const f=e.defineComponent({inheritAttrs:!1,__name:"CloseButton",props:{className:{},disabled:{type:Boolean,default:!1},size:{default:"small"},ariaLabel:{default:"Close"}},setup(n){return(t,i)=>(e.openBlock(),e.createBlock(r,e.mergeProps({variant:"standard","icon-definition":e.unref(u),"icon-only":"",disabled:n.disabled,size:n.size,"class-name":e.unref(o.cn)("phila-close-button",n.className),"aria-label":n.ariaLabel},t.$attrs),null,16,["icon-definition","disabled","size","class-name","aria-label"]))}});exports.CloseButton=f;exports.PhilaButton=r;

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as g, computed as o, createBlock as B, createElementBlock as k, openBlock as r, unref as a, mergeProps as c, withCtx as i, createVNode as d, normalizeProps as u, guardReactiveProps as f, renderSlot as m, createTextVNode as p, toDisplayString as b } from "vue";
-import { cn as C, BaseLink as P, ActionContent as h } from "@phila/phila-ui-core";
-const _ = ["disabled"], x = /* @__PURE__ */ g({
+import { defineComponent as y, computed as o, createBlock as B, createElementBlock as z, openBlock as r, unref as n, mergeProps as c, withCtx as l, createVNode as u, normalizeProps as f, guardReactiveProps as m, renderSlot as b, createTextVNode as h, toDisplayString as p } from "vue";
+import { cn as g, BaseLink as C, ActionContent as v } from "@phila/phila-ui-core";
+const L = ["disabled"], N = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "PhlButton",
   props: {
@@ -21,64 +21,91 @@ const _ = ["disabled"], x = /* @__PURE__ */ g({
     src: {},
     svgRaw: {}
   },
-  setup(v) {
-    const t = v, s = (e) => "href" in e && e.href !== void 0 || "to" in e && e.to !== void 0, n = o(() => C(
+  setup(a) {
+    const e = a, i = (t) => "href" in t && t.href !== void 0 || "to" in t && t.to !== void 0, s = o(() => g(
       "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
-    )), y = o(() => s(t) ? "to" in t && t.to !== void 0 ? {
-      to: t.to,
-      disabled: t.disabled,
-      className: n.value
+      `phila-button--${e.variant}`,
+      e.size && `is-${e.size}`,
+      e.iconOnly && "icon-button",
+      e.iconOnly && e.variant === "standard" && "icon-button--standard",
+      e.className
+    )), k = o(() => i(e) ? "to" in e && e.to !== void 0 ? {
+      to: e.to,
+      disabled: e.disabled,
+      className: s.value
     } : {
-      href: t.href,
-      target: t.target,
-      rel: t.rel,
-      disabled: t.disabled,
-      className: n.value
-    } : {}), l = o(
+      href: e.href,
+      target: e.target,
+      rel: e.rel,
+      disabled: e.disabled,
+      className: s.value
+    } : {}), d = o(
       () => ({
-        iconDefinition: t.iconDefinition,
-        iconClass: t.iconClass,
-        src: t.src,
-        iconRight: t.iconRight,
-        iconOnly: t.iconOnly,
-        text: t.text,
-        size: t.size
+        iconDefinition: e.iconDefinition,
+        iconClass: e.iconClass,
+        src: e.src,
+        iconRight: e.iconRight,
+        iconOnly: e.iconOnly,
+        text: e.text,
+        size: e.size
       })
     );
-    return (e, z) => s(t) ? (r(), B(a(P), c({ key: 0 }, { ...y.value, ...e.$attrs }, { role: "button" }), {
-      default: i(() => [
-        d(a(h), u(f(l.value)), {
-          default: i(() => [
-            m(e.$slots, "default", {}, () => [
-              p(b(t.text), 1)
+    return (t, x) => i(e) ? (r(), B(n(C), c({ key: 0 }, { ...k.value, ...t.$attrs }, { role: "button" }), {
+      default: l(() => [
+        u(n(v), f(m(d.value)), {
+          default: l(() => [
+            b(t.$slots, "default", {}, () => [
+              h(p(e.text), 1)
             ])
           ]),
           _: 3
         }, 16)
       ]),
       _: 3
-    }, 16)) : (r(), k("button", c({
+    }, 16)) : (r(), z("button", c({
       key: 1,
       type: "button",
-      disabled: t.disabled,
-      class: n.value
-    }, e.$attrs), [
-      d(a(h), u(f(l.value)), {
-        default: i(() => [
-          m(e.$slots, "default", {}, () => [
-            p(b(t.text), 1)
+      disabled: e.disabled,
+      class: s.value
+    }, t.$attrs), [
+      u(n(v), f(m(d.value)), {
+        default: l(() => [
+          b(t.$slots, "default", {}, () => [
+            h(p(e.text), 1)
           ])
         ]),
         _: 3
       }, 16)
-    ], 16, _));
+    ], 16, L));
+  }
+});
+var $ = {
+  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"]
+};
+const O = /* @__PURE__ */ y({
+  inheritAttrs: !1,
+  __name: "CloseButton",
+  props: {
+    className: {},
+    disabled: { type: Boolean, default: !1 },
+    size: { default: "small" },
+    ariaLabel: { default: "Close" }
+  },
+  setup(a) {
+    return (e, i) => (r(), B(N, c({
+      variant: "standard",
+      "icon-definition": n($),
+      "icon-only": "",
+      disabled: a.disabled,
+      size: a.size,
+      "class-name": n(g)("phila-close-button", a.className),
+      "aria-label": a.ariaLabel
+    }, e.$attrs), null, 16, ["icon-definition", "disabled", "size", "class-name", "aria-label"]));
   }
 });
 export {
-  x as PhilaButton
+  O as CloseButton,
+  N as PhilaButton
 };

package/dist/phila-ui-button.css

@@ -0,0 +1 @@
+.phila-button.icon-button.phila-close-button.icon-button--standard:not(:disabled),.phila-button.icon-button.phila-close-button.icon-button--standard:not(:disabled):hover,.phila-button.icon-button.phila-close-button.icon-button--standard:not(:disabled):focus{color:var(--Schemes-On-Primary-Container)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-button",
-  "version": "2.2.3-beta.1",
+  "version": "2.2.3-beta.3",
   "type": "module",
   "description": "Button component for Phila UI library",
   "main": "./dist/index.js",
@@ -30,7 +30,7 @@
     "@fortawesome/vue-fontawesome": "^3.1.2"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "2.3.3-beta.1"
+    "@phila/phila-ui-core": "2.4.0-beta.2"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",