@phila/phila-ui-checkbox 1.0.0-beta.10 → 1.0.0-beta.12

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.
Files changed (4) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.js +1 -1
  3. package/dist/index.mjs +184 -171
  4. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .tooltip[data-v-af4a0398]{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;border-radius:var(--border-radius-xs);filter:drop-shadow(0px 1px 2px rgba(0,0,0,.3)) drop-shadow(0px 1px 3px rgba(0,0,0,.15));--tooltip-bg: var(--Schemes-On-Primary);background-color:var(--tooltip-bg);color:var(--Schemes-On-Background)}.tooltip.tooltip--grey[data-v-af4a0398]{--tooltip-bg: var(--Schemes-Surface-Container-Lowest);color:var(--Schemes-On-Surface)}.tooltip.tooltip--plain[data-v-af4a0398]{--tail-height: 10px;padding:var(--spacing-2xs) var(--spacing-xs);justify-content:center;width:max-content;max-width:min(18rem,calc(100vw - 3rem))}.tooltip.tooltip--rich[data-v-af4a0398]{--tail-height: 12px;padding:var(--spacing-s) var(--spacing-m);width:max-content;min-width:11.25rem;max-width:min(25rem,calc(100vw - 3rem));gap:var(--spacing-xs)}.tooltip .tooltip__tail[data-v-af4a0398]{position:absolute;width:20px;height:var(--tail-height);background-color:var(--tooltip-bg)}.tooltip.tooltip--top-left .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--top-right .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--top-center .tooltip__tail[data-v-af4a0398]{clip-path:polygon(0 0,100% 0,50% 100%);bottom:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--bottom-left .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-af4a0398]{clip-path:polygon(50% 0,0 100%,100% 100%);top:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--top-left .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-left .tooltip__tail[data-v-af4a0398]{left:8px}.tooltip.tooltip--top-right .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-af4a0398]{right:8px}.tooltip.tooltip--top-center .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-af4a0398]{left:50%;transform:translate(-50%)}.tooltip__plain-row[data-v-af4a0398],.tooltip__title-row[data-v-af4a0398]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-xs);width:100%}.tooltip__title-row h6[data-v-af4a0398]{flex:1}.tooltip__dismiss[data-v-af4a0398]{margin-left:auto;flex-shrink:0}.tooltip-trigger[data-v-b3f93b8c]{position:relative;display:inline-block}.tooltip-trigger__positioner[data-v-b3f93b8c]{position:absolute;z-index:1000}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-left[data-v-b3f93b8c]{bottom:100%;left:-8px;padding-bottom:var(--positioner-gap);transform:translate(var(--adjust-x, 0px))}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-right[data-v-b3f93b8c]{bottom:100%;right:-8px;padding-bottom:var(--positioner-gap);transform:translate(var(--adjust-x, 0px))}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-center[data-v-b3f93b8c]{bottom:100%;left:50%;transform:translate(calc(-50% + var(--adjust-x, 0px)));padding-bottom:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-left[data-v-b3f93b8c]{top:100%;left:-8px;padding-top:var(--positioner-gap);transform:translate(var(--adjust-x, 0px))}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-right[data-v-b3f93b8c]{top:100%;right:-8px;padding-top:var(--positioner-gap);transform:translate(var(--adjust-x, 0px))}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-center[data-v-b3f93b8c]{top:100%;left:50%;transform:translate(calc(-50% + var(--adjust-x, 0px)));padding-top:var(--positioner-gap)}.checkbox-svg .checkbox-bg{fill:var(--Schemes-Surface-Bright, #fafafa);stroke:var(--Schemes-Border, #cfcfcf);stroke-width:1}.checkbox-svg .checkbox-check{stroke:none;fill:none}.checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Primary, #0f33f5);stroke:var(--Schemes-Primary, #0f33f5)}.checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-On-Primary, #ffffff);stroke-width:2}.philaCheckbox-row[data-v-6d41adb5]{display:inline-flex;align-items:center;gap:var(--spacing-xs, .5rem)}.philaCheckbox[data-v-6d41adb5]{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.philaCheckbox__visual[data-v-6d41adb5]{display:flex;align-items:center;gap:var(--spacing-s, .75rem)}.philaCheckbox__info[data-v-6d41adb5]{display:inline-flex;align-items:center;padding:0;border:none;background:none;cursor:help;color:var(--Schemes-On-Surface-Variant, inherit)}.philaCheckbox--icon-only .philaCheckbox__visual[data-v-6d41adb5]{gap:0}.philaCheckbox input[data-v-6d41adb5]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}[data-v-6d41adb5] .checkbox-svg{flex-shrink:0;overflow:visible}.philaCheckbox[data-v-6d41adb5]:focus-within{outline:2px solid var(--Schemes-Primary, #0f33f5);outline-offset:2px}.philaCheckbox-enabled[data-v-6d41adb5]:hover .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Primary, #0f33f5);stroke-width:2}.philaCheckbox-error[data-v-6d41adb5] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Error, #cc0406);stroke-width:2}.philaCheckbox-disabled[data-v-6d41adb5]{cursor:not-allowed;color:var(--Schemes-Surface-Variant, #a2a2a2)}.philaCheckbox-disabled[data-v-6d41adb5] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Surface-Dim, #cfcfcf);stroke-width:1;fill:var(--Schemes-Surface-Bright, #fafafa)}.philaCheckbox-disabled[data-v-6d41adb5] .checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Surface-Dim, #cfcfcf);stroke:var(--Schemes-Surface-Dim, #cfcfcf)}.philaCheckbox-disabled[data-v-6d41adb5] .checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-Surface-Bright, #fafafa);stroke-width:2}.group-container[data-v-dfb87f32]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, .5rem)}.labels-container[data-v-dfb87f32]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2xs, .25rem);align-self:stretch}span[data-v-dfb87f32]{display:block}.checkbox-container[data-v-dfb87f32]{display:flex;padding:var(--spacing-m, 1rem);flex-direction:column;align-items:flex-start;gap:var(--Radio-margin-bottom, 1rem);align-self:stretch}.checkbox-container-error[data-v-dfb87f32]{border-radius:var(--border-radius-m, .75rem)}.error-message[data-v-dfb87f32]{display:flex;align-items:center;gap:var(--spacing-s, .75rem);align-self:stretch;font-weight:600}
1
+ .tooltip[data-v-af4a0398]{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;border-radius:var(--border-radius-xs);filter:drop-shadow(0px 1px 2px rgba(0,0,0,.3)) drop-shadow(0px 1px 3px rgba(0,0,0,.15));--tooltip-bg: var(--Schemes-On-Primary);background-color:var(--tooltip-bg);color:var(--Schemes-On-Background)}.tooltip.tooltip--grey[data-v-af4a0398]{--tooltip-bg: var(--Schemes-Surface-Container-Lowest);color:var(--Schemes-On-Surface)}.tooltip.tooltip--plain[data-v-af4a0398]{--tail-height: 10px;padding:var(--spacing-2xs) var(--spacing-xs);justify-content:center;width:max-content;max-width:min(18rem,calc(100vw - 3rem))}.tooltip.tooltip--rich[data-v-af4a0398]{--tail-height: 12px;padding:var(--spacing-s) var(--spacing-m);width:max-content;min-width:11.25rem;max-width:min(25rem,calc(100vw - 3rem));gap:var(--spacing-xs)}.tooltip .tooltip__tail[data-v-af4a0398]{position:absolute;width:20px;height:var(--tail-height);background-color:var(--tooltip-bg)}.tooltip.tooltip--top-left .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--top-right .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--top-center .tooltip__tail[data-v-af4a0398]{clip-path:polygon(0 0,100% 0,50% 100%);bottom:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--bottom-left .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-af4a0398]{clip-path:polygon(50% 0,0 100%,100% 100%);top:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--top-left .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-left .tooltip__tail[data-v-af4a0398]{left:8px}.tooltip.tooltip--top-right .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-af4a0398]{right:8px}.tooltip.tooltip--top-center .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-af4a0398]{left:50%;transform:translate(-50%)}.tooltip__plain-row[data-v-af4a0398],.tooltip__title-row[data-v-af4a0398]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-xs);width:100%}.tooltip__title-row h6[data-v-af4a0398]{flex:1}.tooltip__dismiss[data-v-af4a0398]{margin-left:auto;flex-shrink:0}.tooltip-trigger[data-v-a68ae692]{position:relative;display:inline-block}.tooltip-positioner[data-v-a68ae692]{position:fixed;z-index:10010;width:max-content}.checkbox-svg .checkbox-bg{fill:var(--Schemes-Surface-Bright, #fafafa);stroke:var(--Schemes-Border, #cfcfcf);stroke-width:1}.checkbox-svg .checkbox-check{stroke:none;fill:none}.checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Primary, #0f33f5);stroke:var(--Schemes-Primary, #0f33f5)}.checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-On-Primary, #ffffff);stroke-width:2}.philaCheckbox-row[data-v-6d41adb5]{display:inline-flex;align-items:center;gap:var(--spacing-xs, .5rem)}.philaCheckbox[data-v-6d41adb5]{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.philaCheckbox__visual[data-v-6d41adb5]{display:flex;align-items:center;gap:var(--spacing-s, .75rem)}.philaCheckbox__info[data-v-6d41adb5]{display:inline-flex;align-items:center;padding:0;border:none;background:none;cursor:help;color:var(--Schemes-On-Surface-Variant, inherit)}.philaCheckbox--icon-only .philaCheckbox__visual[data-v-6d41adb5]{gap:0}.philaCheckbox input[data-v-6d41adb5]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}[data-v-6d41adb5] .checkbox-svg{flex-shrink:0;overflow:visible}.philaCheckbox[data-v-6d41adb5]:focus-within{outline:2px solid var(--Schemes-Primary, #0f33f5);outline-offset:2px}.philaCheckbox-enabled[data-v-6d41adb5]:hover .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Primary, #0f33f5);stroke-width:2}.philaCheckbox-error[data-v-6d41adb5] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Error, #cc0406);stroke-width:2}.philaCheckbox-disabled[data-v-6d41adb5]{cursor:not-allowed;color:var(--Schemes-Surface-Variant, #a2a2a2)}.philaCheckbox-disabled[data-v-6d41adb5] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Surface-Dim, #cfcfcf);stroke-width:1;fill:var(--Schemes-Surface-Bright, #fafafa)}.philaCheckbox-disabled[data-v-6d41adb5] .checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Surface-Dim, #cfcfcf);stroke:var(--Schemes-Surface-Dim, #cfcfcf)}.philaCheckbox-disabled[data-v-6d41adb5] .checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-Surface-Bright, #fafafa);stroke-width:2}.group-container[data-v-dfb87f32]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, .5rem)}.labels-container[data-v-dfb87f32]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2xs, .25rem);align-self:stretch}span[data-v-dfb87f32]{display:block}.checkbox-container[data-v-dfb87f32]{display:flex;padding:var(--spacing-m, 1rem);flex-direction:column;align-items:flex-start;gap:var(--Radio-margin-bottom, 1rem);align-self:stretch}.checkbox-container-error[data-v-dfb87f32]{border-radius:var(--border-radius-m, .75rem)}.error-message[data-v-dfb87f32]{display:flex;align-items:center;gap:var(--spacing-s, .75rem);align-self:stretch;font-weight:600}
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),u=require("@phila/phila-ui-core"),y=require("@phila/phila-ui-core/icons"),D=["disabled"],B=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(l){const o=l,t=i=>"href"in i&&i.href!==void 0||"to"in i&&i.to!==void 0,n=e.computed(()=>u.cn("phila-button",`phila-button--${o.variant}`,o.size&&`is-${o.size}`,o.iconOnly&&"icon-button",o.iconOnly&&o.variant==="standard"&&"icon-button--standard",o.className)),a=e.computed(()=>t(o)?"to"in o&&o.to!==void 0?{to:o.to,disabled:o.disabled,className:n.value}:{href:o.href,target:o.target,rel:o.rel,disabled:o.disabled,className:n.value}:{}),s=e.computed(()=>({icon:o.icon,src:o.src,iconRight:o.iconRight,iconOnly:o.iconOnly,text:o.text,size:o.size}));return(i,f)=>t(o)?(e.openBlock(),e.createBlock(e.unref(u.BaseLink),e.mergeProps({key:0},{...a.value,...i.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.ActionContent),e.normalizeProps(e.guardReactiveProps(s.value)),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])]),_:3},16)]),_:3},16)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,type:"button",disabled:o.disabled,class:n.value},i.$attrs),[e.createVNode(e.unref(u.ActionContent),e.normalizeProps(e.guardReactiveProps(s.value)),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])]),_:3},16)],16,D))}}),O=["id"],P={key:0,class:"tooltip__tail","aria-hidden":"true"},L={key:1,class:"tooltip__plain-row has-text-body-small"},T={key:0,class:"tooltip__title-row"},M={key:0},A=e.defineComponent({__name:"TooltipBubble",props:{id:{},type:{default:"plain"},color:{default:"default"},tail:{type:Boolean,default:!1},placement:{default:"top-center"},title:{},dismissable:{type:Boolean,default:!1},className:{}},emits:["dismiss"],setup(l){const o=l,t=e.computed(()=>u.cn("tooltip","content","resets-link-colors",`tooltip--${o.type}`,`tooltip--${o.color}`,o.tail&&`tooltip--${o.placement}`,o.className));return(n,a)=>(e.openBlock(),e.createElementBlock("div",{id:l.id,class:e.normalizeClass(t.value),role:"tooltip"},[l.tail?(e.openBlock(),e.createElementBlock("div",P)):e.createCommentVNode("",!0),l.type==="plain"?(e.openBlock(),e.createElementBlock("div",L,[e.renderSlot(n.$slots,"default",{},void 0,!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(B),{key:0,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(y.IconClose),"aria-label":"Dismiss tooltip",onClick:a[0]||(a[0]=s=>n.$emit("dismiss"))},null,8,["icon"])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[l.title||l.dismissable?(e.openBlock(),e.createElementBlock("div",T,[l.title?(e.openBlock(),e.createElementBlock("h6",M,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(B),{key:1,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(y.IconClose),"aria-label":"Dismiss tooltip",onClick:a[1]||(a[1]=s=>n.$emit("dismiss"))},null,8,["icon"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},void 0,!0)],64))],10,O))}}),V=(l,o)=>{const t=l.__vccOpts||l;for(const[n,a]of o)t[n]=a;return t},F=V(A,[["__scopeId","data-v-af4a0398"]]),U=e.defineComponent({__name:"Tooltip",props:{trigger:{default:"hover"},type:{default:"plain"},color:{default:"default"},tail:{type:Boolean,default:!1},placement:{default:"auto"},title:{},dismissable:{type:Boolean},className:{}},setup(l,{expose:o}){const t=l,n=e.useId(),a=e.ref(!1),s=e.ref(null),i=e.ref(null),f=e.ref("top-center"),h=e.ref(0),c=()=>{const r=s.value?.getBoundingClientRect();if(!r)return"top-center";const{innerWidth:v,innerHeight:_}=window,g=r.top,z=_-r.bottom,x=i.value?.firstElementChild?.getBoundingClientRect().height??0,I=(x>0?g>=x:g>=z)?"top":"bottom",C=r.left+r.width/2,R=C<v/3?"left":C>v*2/3?"right":"center";return`${I}-${R}`},p=r=>{r.key==="Escape"&&k()},d=r=>{s.value&&!s.value.contains(r.target)&&k()};function b(){const r=i.value?.firstElementChild?.getBoundingClientRect();if(!r)return;const v=8,_=r.right-(window.innerWidth-v),g=v-r.left;_<=0&&g<=0||(h.value=window.innerWidth/2-(r.left+r.width/2))}const m=async()=>{t.placement==="auto"?f.value=c():f.value=t.placement,h.value=0,a.value=!0,document.addEventListener("keydown",p),t.trigger==="click"&&document.addEventListener("click",d),await e.nextTick(),b()},k=()=>{a.value=!1,document.removeEventListener("keydown",p),document.removeEventListener("click",d)},$=()=>{a.value?k():m()};e.onUnmounted(k),o({show:m,hide:k});const S=e.computed(()=>({type:t.type,color:t.color,tail:t.tail,placement:f.value,title:t.title,dismissable:t.dismissable}));return(r,v)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({ref_key:"wrapperEl",ref:s,class:e.unref(u.cn)("tooltip-trigger",t.className)},l.trigger==="click"?{onClick:$}:{onMouseenter:m,onMouseleave:k,onFocusin:m,onFocusout:k}),[e.renderSlot(r.$slots,"default",{tooltipId:e.unref(n),isOpen:a.value},void 0,!0),e.createElementVNode("span",{ref_key:"positionerEl",ref:i,class:e.normalizeClass(["tooltip-trigger__positioner",`tooltip-trigger__positioner--${f.value}`]),style:e.normalizeStyle({visibility:a.value?"visible":"hidden","--positioner-gap":l.tail?"var(--spacing-l)":"0.5rem","--adjust-x":`${h.value}px`}),onClick:v[0]||(v[0]=e.withModifiers(()=>{},["stop"]))},[e.createVNode(F,e.mergeProps(S.value,{id:e.unref(n),onDismiss:k}),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"body",{},void 0,!0)]),_:3},16,["id"])],6)],16))}}),j=V(U,[["__scopeId","data-v-b3f93b8c"]]),N=e.defineComponent({__name:"CheckboxIcon",props:{checked:{type:Boolean}},setup(l){return(o,t)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["checkbox-svg",{"checkbox-svg--checked":l.checked}]),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...t[0]||(t[0]=[e.createElementVNode("rect",{class:"checkbox-bg",x:"1",y:"1",width:"18",height:"18",rx:"3",ry:"3"},null,-1),e.createElementVNode("path",{class:"checkbox-check",d:"M 4.5 10 L 8.5 14 L 15.5 6","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])],2))}}),q={class:"philaCheckbox-row"},W={class:"philaCheckbox__visual"},G={key:0},H=["name","value","checked","disabled"],X={type:"button",class:"philaCheckbox__info","aria-label":"More information"},J=e.defineComponent({__name:"Checkbox",props:{name:{},value:{type:[String,Number,Boolean]},modelValue:{type:[Boolean,Array]},text:{},tooltip:{},disabled:{type:Boolean},error:{type:Boolean},indeterminate:{type:Boolean},className:{}},emits:["update:modelValue","change","focus","blur"],setup(l,{emit:o}){const t=l,n=o,a=e.ref(null);e.watchEffect(()=>{a.value&&(a.value.indeterminate=t.indeterminate??!1)});const s=e.computed(()=>Array.isArray(t.modelValue)?t.modelValue.includes(t.value):!!t.modelValue);function i(h){if(Array.isArray(t.modelValue)){const c=[...t.modelValue],p=t.value,d=c.indexOf(p);d===-1?c.push(p):c.splice(d,1),n("update:modelValue",c)}else n("update:modelValue",!t.modelValue);n("change",h)}const f=e.computed(()=>u.cn("philaCheckbox","has-text-body-default",t.className,!t.disabled&&"philaCheckbox-enabled",t.disabled&&"philaCheckbox-disabled",t.error&&"philaCheckbox-error",!t.text&&"philaCheckbox--icon-only"));return(h,c)=>(e.openBlock(),e.createElementBlock("span",q,[e.createElementVNode("label",{class:e.normalizeClass(f.value)},[e.createElementVNode("span",W,[e.createVNode(N,{checked:s.value},null,8,["checked"]),t.text?(e.openBlock(),e.createElementBlock("span",G,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),e.createElementVNode("input",{ref_key:"inputRef",ref:a,type:"checkbox",name:t.name,value:t.value,checked:s.value,disabled:t.disabled,onChange:i,onFocus:c[0]||(c[0]=p=>n("focus",p)),onBlur:c[1]||(c[1]=p=>n("blur",p))},null,40,H)],2),t.tooltip?(e.openBlock(),e.createBlock(e.unref(j),{key:0,trigger:"hover",class:"philaCheckbox__tooltip"},{body:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.tooltip),1)]),default:e.withCtx(()=>[e.createElementVNode("button",X,[e.createVNode(e.unref(u.Icon),{icon:e.unref(y.IconCircleInfo),size:"small",inline:"",decorative:""},null,8,["icon"])])]),_:1})):e.createCommentVNode("",!0)]))}}),E=(l,o)=>{const t=l.__vccOpts||l;for(const[n,a]of o)t[n]=a;return t},w=E(J,[["__scopeId","data-v-6d41adb5"]]),K={class:"labels-container"},Q={class:"has-text-body-default"},Y={key:0,class:"error-message has-text-error content"},Z=e.defineComponent({__name:"CheckboxGroup",props:{groupLabel:{},description:{},choices:{},modelValue:{},error:{type:Boolean},errorMessage:{},disabled:{type:Boolean},className:{}},emits:["update:modelValue"],setup(l,{emit:o}){const t=l,n=o,a=u.generateRandomId(),s=e.computed(()=>u.cn("group-container",t.className)),i=e.computed(()=>u.cn("checkbox-container",t.error&&"checkbox-container-error has-background-error")),f=e.computed(()=>u.cn("has-text-label-default",t.error&&"has-text-error"));function h(c,p){const d={};for(const b of t.choices){const m=String(b.value);d[m]=m===String(c)?p:!!t.modelValue?.[m]}n("update:modelValue",d)}return(c,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(s.value)},[e.createElementVNode("div",K,[e.createElementVNode("span",{class:e.normalizeClass(f.value)},e.toDisplayString(l.groupLabel),3),e.createElementVNode("span",Q,e.toDisplayString(l.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(i.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.choices,(d,b)=>(e.openBlock(),e.createBlock(w,{key:e.unref(a)+b,name:e.unref(a),value:d.value,text:d.text,tooltip:d.tooltip,"model-value":t.modelValue?.[String(d.value)]??!1,disabled:t.disabled,error:t.error,"onUpdate:modelValue":m=>h(d.value,m)},null,8,["name","value","text","tooltip","model-value","disabled","error","onUpdate:modelValue"]))),128)),t.error?(e.openBlock(),e.createElementBlock("div",Y,[e.createVNode(e.unref(u.Icon),{style:{height:"fit-content",width:"fit-content",padding:"0"},size:"large",inline:"","aria-hidden":"true",icon:e.unref(y.IconCircleExclamation)},null,8,["icon"]),e.createTextVNode(" "+e.toDisplayString(l.errorMessage),1)])):e.createCommentVNode("",!0)],2)],2))}}),ee=E(Z,[["__scopeId","data-v-dfb87f32"]]);exports.Checkbox=w;exports.CheckboxGroup=ee;exports.CheckboxIcon=N;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),p=require("@phila/phila-ui-core"),E=require("@phila/phila-ui-core/icons"),F=["disabled"],z=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(l){const o=l,t=s=>"href"in s&&s.href!==void 0||"to"in s&&s.to!==void 0,a=e.computed(()=>p.cn("phila-button",`phila-button--${o.variant}`,o.size&&`is-${o.size}`,o.iconOnly&&"icon-button",o.iconOnly&&o.variant==="standard"&&"icon-button--standard",o.className)),n=e.computed(()=>t(o)?"to"in o&&o.to!==void 0?{to:o.to,disabled:o.disabled,className:a.value}:{href:o.href,target:o.target,rel:o.rel,disabled:o.disabled,className:a.value}:{}),c=e.computed(()=>({icon:o.icon,src:o.src,iconRight:o.iconRight,iconOnly:o.iconOnly,text:o.text,size:o.size}));return(s,h)=>t(o)?(e.openBlock(),e.createBlock(e.unref(p.BaseLink),e.mergeProps({key:0},{...n.value,...s.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(p.ActionContent),e.normalizeProps(e.guardReactiveProps(c.value)),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])]),_:3},16)]),_:3},16)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,type:"button",disabled:o.disabled,class:a.value},s.$attrs),[e.createVNode(e.unref(p.ActionContent),e.normalizeProps(e.guardReactiveProps(c.value)),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])]),_:3},16)],16,F))}}),U=["id"],q={key:0,class:"tooltip__tail","aria-hidden":"true"},G={key:1,class:"tooltip__plain-row has-text-body-small"},H={key:0,class:"tooltip__title-row"},j={key:0},W=e.defineComponent({__name:"TooltipBubble",props:{id:{},type:{default:"plain"},color:{default:"default"},tail:{type:Boolean,default:!1},placement:{default:"top-center"},title:{},dismissable:{type:Boolean,default:!1},className:{}},emits:["dismiss"],setup(l){const o=l,t=e.computed(()=>p.cn("tooltip","content","resets-link-colors",`tooltip--${o.type}`,`tooltip--${o.color}`,o.tail&&`tooltip--${o.placement}`,o.className));return(a,n)=>(e.openBlock(),e.createElementBlock("div",{id:l.id,class:e.normalizeClass(t.value),role:"tooltip"},[l.tail?(e.openBlock(),e.createElementBlock("div",q)):e.createCommentVNode("",!0),l.type==="plain"?(e.openBlock(),e.createElementBlock("div",G,[e.renderSlot(a.$slots,"default",{},void 0,!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(z),{key:0,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(E.IconClose),"aria-label":"Dismiss tooltip",onClick:n[0]||(n[0]=c=>a.$emit("dismiss"))},null,8,["icon"])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[l.title||l.dismissable?(e.openBlock(),e.createElementBlock("div",H,[l.title?(e.openBlock(),e.createElementBlock("h6",j,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(z),{key:1,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(E.IconClose),"aria-label":"Dismiss tooltip",onClick:n[1]||(n[1]=c=>a.$emit("dismiss"))},null,8,["icon"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"default",{},void 0,!0)],64))],10,U))}}),I=(l,o)=>{const t=l.__vccOpts||l;for(const[a,n]of o)t[a]=n;return t},J=I(W,[["__scopeId","data-v-af4a0398"]]),N=8,w=8,K=e.defineComponent({__name:"Tooltip",props:{trigger:{default:"hover"},type:{default:"plain"},color:{default:"default"},tail:{type:Boolean,default:!1},placement:{default:"auto"},title:{},dismissable:{type:Boolean},className:{}},setup(l,{expose:o}){const t=l,a=e.useId(),n=e.ref(!1),c=e.ref(null),s=e.ref(null),h=e.ref("top-center"),k=e.ref({top:0,left:0});let r=null;const m=()=>{const i=c.value?.getBoundingClientRect();if(!i)return"top-center";const{innerWidth:u,innerHeight:x}=window,y=i.top,$=x-i.bottom,_=s.value?.getBoundingClientRect().height??0,B=(_>0?y>=_:y>=$)?"top":"bottom",v=i.left+i.width/2,A=v<u/3?"left":v>u*2/3?"right":"center";return`${B}-${A}`};function d(){const i=c.value?.getBoundingClientRect(),u=s.value?.getBoundingClientRect();if(!i||!u)return;const{innerWidth:x,innerHeight:y}=window,[$,_]=h.value.split("-");let B=$==="top"?i.top-N-u.height:i.bottom+N,v;_==="center"?v=i.left+i.width/2-u.width/2:_==="left"?v=i.left-N:v=i.right+N-u.width,v=Math.min(Math.max(v,w),x-w-u.width),B=Math.min(Math.max(B,w),y-w-u.height),k.value={top:B,left:v}}const g=i=>{i.key==="Escape"&&f()},b=i=>{const u=i.target,x=c.value?.contains(u),y=s.value?.contains(u);!x&&!y&&f()},C=()=>{n.value&&d()},V=async()=>{r&&(clearTimeout(r),r=null),h.value=t.placement==="auto"?m():t.placement,n.value=!0,document.addEventListener("keydown",g),t.trigger==="click"&&document.addEventListener("click",b),window.addEventListener("scroll",C,!0),window.addEventListener("resize",C),await e.nextTick(),t.placement==="auto"&&(h.value=m()),d()},f=()=>{n.value=!1,r&&(clearTimeout(r),r=null),document.removeEventListener("keydown",g),document.removeEventListener("click",b),window.removeEventListener("scroll",C,!0),window.removeEventListener("resize",C)},S=()=>{if(t.trigger!=="hover")return f();r=setTimeout(f,100)},R=()=>{r&&(clearTimeout(r),r=null)},D=()=>{n.value?f():V()};e.onUnmounted(f),o({show:V,hide:f});const P=e.computed(()=>({type:t.type,color:t.color,tail:t.tail,placement:h.value,title:t.title,dismissable:t.dismissable})),O=e.computed(()=>({top:`${k.value.top}px`,left:`${k.value.left}px`,visibility:n.value?"visible":"hidden"}));return(i,u)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({ref_key:"wrapperEl",ref:c,class:e.unref(p.cn)("tooltip-trigger",t.className)},l.trigger==="click"?{onClick:D}:{onMouseenter:V,onMouseleave:S,onFocusin:V,onFocusout:f}),[e.renderSlot(i.$slots,"default",{tooltipId:e.unref(a),isOpen:n.value},void 0,!0),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{ref_key:"bubbleEl",ref:s,class:"tooltip-positioner",style:e.normalizeStyle(O.value),onMouseenter:R,onMouseleave:S},[e.createVNode(J,e.mergeProps(P.value,{id:e.unref(a),onDismiss:f}),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"body",{},void 0,!0)]),_:3},16,["id"])],36)]))],16))}}),Q=I(K,[["__scopeId","data-v-a68ae692"]]),T=e.defineComponent({__name:"CheckboxIcon",props:{checked:{type:Boolean}},setup(l){return(o,t)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["checkbox-svg",{"checkbox-svg--checked":l.checked}]),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...t[0]||(t[0]=[e.createElementVNode("rect",{class:"checkbox-bg",x:"1",y:"1",width:"18",height:"18",rx:"3",ry:"3"},null,-1),e.createElementVNode("path",{class:"checkbox-check",d:"M 4.5 10 L 8.5 14 L 15.5 6","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])],2))}}),X={class:"philaCheckbox-row"},Y={class:"philaCheckbox__visual"},Z={key:0},ee=["name","value","checked","disabled"],te={type:"button",class:"philaCheckbox__info","aria-label":"More information"},oe=e.defineComponent({__name:"Checkbox",props:{name:{},value:{type:[String,Number,Boolean]},modelValue:{type:[Boolean,Array]},text:{},tooltip:{},disabled:{type:Boolean},error:{type:Boolean},indeterminate:{type:Boolean},className:{}},emits:["update:modelValue","change","focus","blur"],setup(l,{emit:o}){const t=l,a=o,n=e.ref(null);e.watchEffect(()=>{n.value&&(n.value.indeterminate=t.indeterminate??!1)});const c=e.computed(()=>Array.isArray(t.modelValue)?t.modelValue.includes(t.value):!!t.modelValue);function s(k){if(Array.isArray(t.modelValue)){const r=[...t.modelValue],m=t.value,d=r.indexOf(m);d===-1?r.push(m):r.splice(d,1),a("update:modelValue",r)}else a("update:modelValue",!t.modelValue);a("change",k)}const h=e.computed(()=>p.cn("philaCheckbox","has-text-body-default",t.className,!t.disabled&&"philaCheckbox-enabled",t.disabled&&"philaCheckbox-disabled",t.error&&"philaCheckbox-error",!t.text&&"philaCheckbox--icon-only"));return(k,r)=>(e.openBlock(),e.createElementBlock("span",X,[e.createElementVNode("label",{class:e.normalizeClass(h.value)},[e.createElementVNode("span",Y,[e.createVNode(T,{checked:c.value},null,8,["checked"]),t.text?(e.openBlock(),e.createElementBlock("span",Z,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),e.createElementVNode("input",{ref_key:"inputRef",ref:n,type:"checkbox",name:t.name,value:t.value,checked:c.value,disabled:t.disabled,onChange:s,onFocus:r[0]||(r[0]=m=>a("focus",m)),onBlur:r[1]||(r[1]=m=>a("blur",m))},null,40,ee)],2),t.tooltip?(e.openBlock(),e.createBlock(e.unref(Q),{key:0,trigger:"hover",class:"philaCheckbox__tooltip"},{body:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.tooltip),1)]),default:e.withCtx(()=>[e.createElementVNode("button",te,[e.createVNode(e.unref(p.Icon),{icon:e.unref(E.IconCircleInfo),size:"small",inline:"",decorative:""},null,8,["icon"])])]),_:1})):e.createCommentVNode("",!0)]))}}),L=(l,o)=>{const t=l.__vccOpts||l;for(const[a,n]of o)t[a]=n;return t},M=L(oe,[["__scopeId","data-v-6d41adb5"]]),le={class:"labels-container"},ne={class:"has-text-body-default"},ae={key:0,class:"error-message has-text-error content"},re=e.defineComponent({__name:"CheckboxGroup",props:{groupLabel:{},description:{},choices:{},modelValue:{},error:{type:Boolean},errorMessage:{},disabled:{type:Boolean},className:{}},emits:["update:modelValue"],setup(l,{emit:o}){const t=l,a=o,n=p.generateRandomId(),c=e.computed(()=>p.cn("group-container",t.className)),s=e.computed(()=>p.cn("checkbox-container",t.error&&"checkbox-container-error has-background-error")),h=e.computed(()=>p.cn("has-text-label-default",t.error&&"has-text-error"));function k(r,m){const d={};for(const g of t.choices){const b=String(g.value);d[b]=b===String(r)?m:!!t.modelValue?.[b]}a("update:modelValue",d)}return(r,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(c.value)},[e.createElementVNode("div",le,[e.createElementVNode("span",{class:e.normalizeClass(h.value)},e.toDisplayString(l.groupLabel),3),e.createElementVNode("span",ne,e.toDisplayString(l.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(s.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.choices,(d,g)=>(e.openBlock(),e.createBlock(M,{key:e.unref(n)+g,name:e.unref(n),value:d.value,text:d.text,tooltip:d.tooltip,"model-value":t.modelValue?.[String(d.value)]??!1,disabled:t.disabled,error:t.error,"onUpdate:modelValue":b=>k(d.value,b)},null,8,["name","value","text","tooltip","model-value","disabled","error","onUpdate:modelValue"]))),128)),t.error?(e.openBlock(),e.createElementBlock("div",ae,[e.createVNode(e.unref(p.Icon),{style:{height:"fit-content",width:"fit-content",padding:"0"},size:"large",inline:"","aria-hidden":"true",icon:e.unref(E.IconCircleExclamation)},null,8,["icon"]),e.createTextVNode(" "+e.toDisplayString(l.errorMessage),1)])):e.createCommentVNode("",!0)],2)],2))}}),ie=L(re,[["__scopeId","data-v-dfb87f32"]]);exports.Checkbox=M;exports.CheckboxGroup=ie;exports.CheckboxIcon=T;
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
- import { defineComponent as I, useId as Y, ref as B, onUnmounted as Z, computed as v, createElementBlock as p, openBlock as i, mergeProps as L, unref as r, renderSlot as V, createElementVNode as h, withModifiers as ee, normalizeStyle as te, normalizeClass as C, createVNode as N, withCtx as $, nextTick as oe, createCommentVNode as g, createBlock as E, Fragment as W, toDisplayString as x, normalizeProps as T, guardReactiveProps as D, createTextVNode as O, watchEffect as le, renderList as ae } from "vue";
2
- import { cn as w, BaseLink as ie, ActionContent as P, Icon as j, generateRandomId as se } from "@phila/phila-ui-core";
3
- import { IconClose as F, IconCircleInfo as ne, IconCircleExclamation as re } from "@phila/phila-ui-core/icons";
4
- import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
1
+ import { defineComponent as M, useId as ne, ref as V, onUnmounted as se, computed as f, createElementBlock as p, openBlock as i, mergeProps as F, unref as c, renderSlot as I, createBlock as z, Teleport as ie, createElementVNode as v, normalizeStyle as re, createVNode as L, withCtx as N, nextTick as ce, normalizeClass as E, createCommentVNode as x, Fragment as X, toDisplayString as C, normalizeProps as W, guardReactiveProps as j, createTextVNode as H, watchEffect as de, renderList as ue } from "vue";
2
+ import { cn as w, BaseLink as pe, ActionContent as J, Icon as Y, generateRandomId as me } from "@phila/phila-ui-core";
3
+ import { IconClose as K, IconCircleInfo as he, IconCircleExclamation as ve } from "@phila/phila-ui-core/icons";
4
+ import './index.css';const fe = ["disabled"], Q = /* @__PURE__ */ M({
5
5
  inheritAttrs: !1,
6
6
  __name: "PhlButton",
7
7
  props: {
@@ -22,24 +22,24 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
22
22
  svgRaw: {}
23
23
  },
24
24
  setup(o) {
25
- const t = o, e = (n) => "href" in n && n.href !== void 0 || "to" in n && n.to !== void 0, l = v(() => w(
25
+ const t = o, e = (r) => "href" in r && r.href !== void 0 || "to" in r && r.to !== void 0, a = f(() => w(
26
26
  "phila-button",
27
27
  `phila-button--${t.variant}`,
28
28
  t.size && `is-${t.size}`,
29
29
  t.iconOnly && "icon-button",
30
30
  t.iconOnly && t.variant === "standard" && "icon-button--standard",
31
31
  t.className
32
- )), a = v(() => e(t) ? "to" in t && t.to !== void 0 ? {
32
+ )), l = f(() => e(t) ? "to" in t && t.to !== void 0 ? {
33
33
  to: t.to,
34
34
  disabled: t.disabled,
35
- className: l.value
35
+ className: a.value
36
36
  } : {
37
37
  href: t.href,
38
38
  target: t.target,
39
39
  rel: t.rel,
40
40
  disabled: t.disabled,
41
- className: l.value
42
- } : {}), c = v(
41
+ className: a.value
42
+ } : {}), d = f(
43
43
  () => ({
44
44
  icon: t.icon,
45
45
  src: t.src,
@@ -49,45 +49,45 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
49
49
  size: t.size
50
50
  })
51
51
  );
52
- return (n, b) => e(t) ? (i(), E(r(ie), L({ key: 0 }, { ...a.value, ...n.$attrs }, { role: "button" }), {
53
- default: $(() => [
54
- N(r(P), T(D(c.value)), {
55
- default: $(() => [
56
- V(n.$slots, "default", {}, () => [
57
- O(x(t.text), 1)
52
+ return (r, b) => e(t) ? (i(), z(c(pe), F({ key: 0 }, { ...l.value, ...r.$attrs }, { role: "button" }), {
53
+ default: N(() => [
54
+ L(c(J), W(j(d.value)), {
55
+ default: N(() => [
56
+ I(r.$slots, "default", {}, () => [
57
+ H(C(t.text), 1)
58
58
  ])
59
59
  ]),
60
60
  _: 3
61
61
  }, 16)
62
62
  ]),
63
63
  _: 3
64
- }, 16)) : (i(), p("button", L({
64
+ }, 16)) : (i(), p("button", F({
65
65
  key: 1,
66
66
  type: "button",
67
67
  disabled: t.disabled,
68
- class: l.value
69
- }, n.$attrs), [
70
- N(r(P), T(D(c.value)), {
71
- default: $(() => [
72
- V(n.$slots, "default", {}, () => [
73
- O(x(t.text), 1)
68
+ class: a.value
69
+ }, r.$attrs), [
70
+ L(c(J), W(j(d.value)), {
71
+ default: N(() => [
72
+ I(r.$slots, "default", {}, () => [
73
+ H(C(t.text), 1)
74
74
  ])
75
75
  ]),
76
76
  _: 3
77
77
  }, 16)
78
- ], 16, ce));
78
+ ], 16, fe));
79
79
  }
80
- }), de = ["id"], ue = {
80
+ }), be = ["id"], ye = {
81
81
  key: 0,
82
82
  class: "tooltip__tail",
83
83
  "aria-hidden": "true"
84
- }, pe = {
84
+ }, ge = {
85
85
  key: 1,
86
86
  class: "tooltip__plain-row has-text-body-small"
87
- }, me = {
87
+ }, ke = {
88
88
  key: 0,
89
89
  class: "tooltip__title-row"
90
- }, he = { key: 0 }, fe = /* @__PURE__ */ I({
90
+ }, _e = { key: 0 }, xe = /* @__PURE__ */ M({
91
91
  __name: "TooltipBubble",
92
92
  props: {
93
93
  id: {},
@@ -101,7 +101,7 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
101
101
  },
102
102
  emits: ["dismiss"],
103
103
  setup(o) {
104
- const t = o, e = v(
104
+ const t = o, e = f(
105
105
  () => w(
106
106
  "tooltip",
107
107
  "content",
@@ -112,48 +112,48 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
112
112
  t.className
113
113
  )
114
114
  );
115
- return (l, a) => (i(), p("div", {
115
+ return (a, l) => (i(), p("div", {
116
116
  id: o.id,
117
- class: C(e.value),
117
+ class: E(e.value),
118
118
  role: "tooltip"
119
119
  }, [
120
- o.tail ? (i(), p("div", ue)) : g("", !0),
121
- o.type === "plain" ? (i(), p("div", pe, [
122
- V(l.$slots, "default", {}, void 0, !0),
123
- o.dismissable ? (i(), E(r(U), {
120
+ o.tail ? (i(), p("div", ye)) : x("", !0),
121
+ o.type === "plain" ? (i(), p("div", ge, [
122
+ I(a.$slots, "default", {}, void 0, !0),
123
+ o.dismissable ? (i(), z(c(Q), {
124
124
  key: 0,
125
125
  class: "tooltip__dismiss",
126
126
  variant: "standard",
127
127
  size: "extra-small",
128
128
  "icon-only": !0,
129
- icon: r(F),
129
+ icon: c(K),
130
130
  "aria-label": "Dismiss tooltip",
131
- onClick: a[0] || (a[0] = (c) => l.$emit("dismiss"))
132
- }, null, 8, ["icon"])) : g("", !0)
133
- ])) : (i(), p(W, { key: 2 }, [
134
- o.title || o.dismissable ? (i(), p("div", me, [
135
- o.title ? (i(), p("h6", he, x(o.title), 1)) : g("", !0),
136
- o.dismissable ? (i(), E(r(U), {
131
+ onClick: l[0] || (l[0] = (d) => a.$emit("dismiss"))
132
+ }, null, 8, ["icon"])) : x("", !0)
133
+ ])) : (i(), p(X, { key: 2 }, [
134
+ o.title || o.dismissable ? (i(), p("div", ke, [
135
+ o.title ? (i(), p("h6", _e, C(o.title), 1)) : x("", !0),
136
+ o.dismissable ? (i(), z(c(Q), {
137
137
  key: 1,
138
138
  class: "tooltip__dismiss",
139
139
  variant: "standard",
140
140
  size: "extra-small",
141
141
  "icon-only": !0,
142
- icon: r(F),
142
+ icon: c(K),
143
143
  "aria-label": "Dismiss tooltip",
144
- onClick: a[1] || (a[1] = (c) => l.$emit("dismiss"))
145
- }, null, 8, ["icon"])) : g("", !0)
146
- ])) : g("", !0),
147
- V(l.$slots, "default", {}, void 0, !0)
144
+ onClick: l[1] || (l[1] = (d) => a.$emit("dismiss"))
145
+ }, null, 8, ["icon"])) : x("", !0)
146
+ ])) : x("", !0),
147
+ I(a.$slots, "default", {}, void 0, !0)
148
148
  ], 64))
149
- ], 10, de));
149
+ ], 10, be));
150
150
  }
151
- }), G = (o, t) => {
151
+ }), Z = (o, t) => {
152
152
  const e = o.__vccOpts || o;
153
- for (const [l, a] of t)
154
- e[l] = a;
153
+ for (const [a, l] of t)
154
+ e[a] = l;
155
155
  return e;
156
- }, ve = /* @__PURE__ */ G(fe, [["__scopeId", "data-v-af4a0398"]]), be = /* @__PURE__ */ I({
156
+ }, Ce = /* @__PURE__ */ Z(xe, [["__scopeId", "data-v-af4a0398"]]), P = 8, D = 8, we = /* @__PURE__ */ M({
157
157
  __name: "Tooltip",
158
158
  props: {
159
159
  trigger: { default: "hover" },
@@ -166,82 +166,95 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
166
166
  className: {}
167
167
  },
168
168
  setup(o, { expose: t }) {
169
- const e = o, l = Y(), a = B(!1), c = B(null), n = B(null), b = B("top-center"), y = B(0), d = () => {
170
- const s = c.value?.getBoundingClientRect();
169
+ const e = o, a = ne(), l = V(!1), d = V(null), r = V(null), b = V("top-center"), k = V({ top: 0, left: 0 });
170
+ let n = null;
171
+ const h = () => {
172
+ const s = d.value?.getBoundingClientRect();
171
173
  if (!s) return "top-center";
172
- const { innerWidth: k, innerHeight: M } = window, R = s.top, J = M - s.bottom, S = n.value?.firstElementChild?.getBoundingClientRect().height ?? 0, K = (S > 0 ? R >= S : R >= J) ? "top" : "bottom", A = s.left + s.width / 2, Q = A < k / 3 ? "left" : A > k * 2 / 3 ? "right" : "center";
173
- return `${K}-${Q}`;
174
- }, m = (s) => {
175
- s.key === "Escape" && _();
176
- }, u = (s) => {
177
- c.value && !c.value.contains(s.target) && _();
174
+ const { innerWidth: m, innerHeight: R } = window, $ = s.top, U = R - s.bottom, T = r.value?.getBoundingClientRect().height ?? 0, O = (T > 0 ? $ >= T : $ >= U) ? "top" : "bottom", g = s.left + s.width / 2, ae = g < m / 3 ? "left" : g > m * 2 / 3 ? "right" : "center";
175
+ return `${O}-${ae}`;
178
176
  };
179
- function z() {
180
- const s = n.value?.firstElementChild?.getBoundingClientRect();
181
- if (!s) return;
182
- const k = 8, M = s.right - (window.innerWidth - k), R = k - s.left;
183
- M <= 0 && R <= 0 || (y.value = window.innerWidth / 2 - (s.left + s.width / 2));
177
+ function u() {
178
+ const s = d.value?.getBoundingClientRect(), m = r.value?.getBoundingClientRect();
179
+ if (!s || !m) return;
180
+ const { innerWidth: R, innerHeight: $ } = window, [U, T] = b.value.split("-");
181
+ let O = U === "top" ? s.top - P - m.height : s.bottom + P, g;
182
+ T === "center" ? g = s.left + s.width / 2 - m.width / 2 : T === "left" ? g = s.left - P : g = s.right + P - m.width, g = Math.min(Math.max(g, D), R - D - m.width), O = Math.min(Math.max(O, D), $ - D - m.height), k.value = { top: O, left: g };
184
183
  }
185
- const f = async () => {
186
- e.placement === "auto" ? b.value = d() : b.value = e.placement, y.value = 0, a.value = !0, document.addEventListener("keydown", m), e.trigger === "click" && document.addEventListener("click", u), await oe(), z();
187
- }, _ = () => {
188
- a.value = !1, document.removeEventListener("keydown", m), document.removeEventListener("click", u);
189
- }, q = () => {
190
- a.value ? _() : f();
184
+ const B = (s) => {
185
+ s.key === "Escape" && y();
186
+ }, _ = (s) => {
187
+ const m = s.target, R = d.value?.contains(m), $ = r.value?.contains(m);
188
+ !R && !$ && y();
189
+ }, S = () => {
190
+ l.value && u();
191
+ }, A = async () => {
192
+ n && (clearTimeout(n), n = null), b.value = e.placement === "auto" ? h() : e.placement, l.value = !0, document.addEventListener("keydown", B), e.trigger === "click" && document.addEventListener("click", _), window.addEventListener("scroll", S, !0), window.addEventListener("resize", S), await ce(), e.placement === "auto" && (b.value = h()), u();
193
+ }, y = () => {
194
+ l.value = !1, n && (clearTimeout(n), n = null), document.removeEventListener("keydown", B), document.removeEventListener("click", _), window.removeEventListener("scroll", S, !0), window.removeEventListener("resize", S);
195
+ }, G = () => {
196
+ if (e.trigger !== "hover") return y();
197
+ n = setTimeout(y, 100);
198
+ }, ee = () => {
199
+ n && (clearTimeout(n), n = null);
200
+ }, te = () => {
201
+ l.value ? y() : A();
191
202
  };
192
- Z(_), t({ show: f, hide: _ });
193
- const X = v(() => ({
203
+ se(y), t({ show: A, hide: y });
204
+ const oe = f(() => ({
194
205
  type: e.type,
195
206
  color: e.color,
196
207
  tail: e.tail,
197
208
  placement: b.value,
198
209
  title: e.title,
199
210
  dismissable: e.dismissable
211
+ })), le = f(() => ({
212
+ top: `${k.value.top}px`,
213
+ left: `${k.value.left}px`,
214
+ visibility: l.value ? "visible" : "hidden"
200
215
  }));
201
- return (s, k) => (i(), p("span", L(
216
+ return (s, m) => (i(), p("span", F(
202
217
  {
203
218
  ref_key: "wrapperEl",
204
- ref: c,
205
- class: r(w)("tooltip-trigger", e.className)
219
+ ref: d,
220
+ class: c(w)("tooltip-trigger", e.className)
206
221
  },
207
- o.trigger === "click" ? { onClick: q } : { onMouseenter: f, onMouseleave: _, onFocusin: f, onFocusout: _ }
222
+ o.trigger === "click" ? { onClick: te } : { onMouseenter: A, onMouseleave: G, onFocusin: A, onFocusout: y }
208
223
  ), [
209
- V(s.$slots, "default", {
210
- tooltipId: r(l),
211
- isOpen: a.value
224
+ I(s.$slots, "default", {
225
+ tooltipId: c(a),
226
+ isOpen: l.value
212
227
  }, void 0, !0),
213
- h("span", {
214
- ref_key: "positionerEl",
215
- ref: n,
216
- class: C(["tooltip-trigger__positioner", `tooltip-trigger__positioner--${b.value}`]),
217
- style: te({
218
- visibility: a.value ? "visible" : "hidden",
219
- "--positioner-gap": o.tail ? "var(--spacing-l)" : "0.5rem",
220
- "--adjust-x": `${y.value}px`
221
- }),
222
- onClick: k[0] || (k[0] = ee(() => {
223
- }, ["stop"]))
224
- }, [
225
- N(ve, L(X.value, {
226
- id: r(l),
227
- onDismiss: _
228
- }), {
229
- default: $(() => [
230
- V(s.$slots, "body", {}, void 0, !0)
231
- ]),
232
- _: 3
233
- }, 16, ["id"])
234
- ], 6)
228
+ (i(), z(ie, { to: "body" }, [
229
+ v("div", {
230
+ ref_key: "bubbleEl",
231
+ ref: r,
232
+ class: "tooltip-positioner",
233
+ style: re(le.value),
234
+ onMouseenter: ee,
235
+ onMouseleave: G
236
+ }, [
237
+ L(Ce, F(oe.value, {
238
+ id: c(a),
239
+ onDismiss: y
240
+ }), {
241
+ default: N(() => [
242
+ I(s.$slots, "body", {}, void 0, !0)
243
+ ]),
244
+ _: 3
245
+ }, 16, ["id"])
246
+ ], 36)
247
+ ]))
235
248
  ], 16));
236
249
  }
237
- }), ye = /* @__PURE__ */ G(be, [["__scopeId", "data-v-b3f93b8c"]]), _e = /* @__PURE__ */ I({
250
+ }), Be = /* @__PURE__ */ Z(we, [["__scopeId", "data-v-a68ae692"]]), $e = /* @__PURE__ */ M({
238
251
  __name: "CheckboxIcon",
239
252
  props: {
240
253
  checked: { type: Boolean }
241
254
  },
242
255
  setup(o) {
243
256
  return (t, e) => (i(), p("svg", {
244
- class: C(["checkbox-svg", { "checkbox-svg--checked": o.checked }]),
257
+ class: E(["checkbox-svg", { "checkbox-svg--checked": o.checked }]),
245
258
  width: "20",
246
259
  height: "20",
247
260
  viewBox: "0 0 20 20",
@@ -249,7 +262,7 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
249
262
  xmlns: "http://www.w3.org/2000/svg",
250
263
  "aria-hidden": "true"
251
264
  }, [...e[0] || (e[0] = [
252
- h("rect", {
265
+ v("rect", {
253
266
  class: "checkbox-bg",
254
267
  x: "1",
255
268
  y: "1",
@@ -258,7 +271,7 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
258
271
  rx: "3",
259
272
  ry: "3"
260
273
  }, null, -1),
261
- h("path", {
274
+ v("path", {
262
275
  class: "checkbox-check",
263
276
  d: "M 4.5 10 L 8.5 14 L 15.5 6",
264
277
  "stroke-linecap": "round",
@@ -266,11 +279,11 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
266
279
  }, null, -1)
267
280
  ])], 2));
268
281
  }
269
- }), ke = { class: "philaCheckbox-row" }, ge = { class: "philaCheckbox__visual" }, xe = { key: 0 }, Ce = ["name", "value", "checked", "disabled"], we = {
282
+ }), Ve = { class: "philaCheckbox-row" }, Ne = { class: "philaCheckbox__visual" }, Ee = { key: 0 }, Ie = ["name", "value", "checked", "disabled"], ze = {
270
283
  type: "button",
271
284
  class: "philaCheckbox__info",
272
285
  "aria-label": "More information"
273
- }, Be = /* @__PURE__ */ I({
286
+ }, Le = /* @__PURE__ */ M({
274
287
  __name: "Checkbox",
275
288
  props: {
276
289
  name: {},
@@ -285,20 +298,20 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
285
298
  },
286
299
  emits: ["update:modelValue", "change", "focus", "blur"],
287
300
  setup(o, { emit: t }) {
288
- const e = o, l = t, a = B(null);
289
- le(() => {
290
- a.value && (a.value.indeterminate = e.indeterminate ?? !1);
301
+ const e = o, a = t, l = V(null);
302
+ de(() => {
303
+ l.value && (l.value.indeterminate = e.indeterminate ?? !1);
291
304
  });
292
- const c = v(() => Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : !!e.modelValue);
293
- function n(y) {
305
+ const d = f(() => Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : !!e.modelValue);
306
+ function r(k) {
294
307
  if (Array.isArray(e.modelValue)) {
295
- const d = [...e.modelValue], m = e.value, u = d.indexOf(m);
296
- u === -1 ? d.push(m) : d.splice(u, 1), l("update:modelValue", d);
308
+ const n = [...e.modelValue], h = e.value, u = n.indexOf(h);
309
+ u === -1 ? n.push(h) : n.splice(u, 1), a("update:modelValue", n);
297
310
  } else
298
- l("update:modelValue", !e.modelValue);
299
- l("change", y);
311
+ a("update:modelValue", !e.modelValue);
312
+ a("change", k);
300
313
  }
301
- const b = v(() => w(
314
+ const b = f(() => w(
302
315
  "philaCheckbox",
303
316
  "has-text-body-default",
304
317
  e.className,
@@ -307,39 +320,39 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
307
320
  e.error && "philaCheckbox-error",
308
321
  !e.text && "philaCheckbox--icon-only"
309
322
  ));
310
- return (y, d) => (i(), p("span", ke, [
311
- h("label", {
312
- class: C(b.value)
323
+ return (k, n) => (i(), p("span", Ve, [
324
+ v("label", {
325
+ class: E(b.value)
313
326
  }, [
314
- h("span", ge, [
315
- N(_e, { checked: c.value }, null, 8, ["checked"]),
316
- e.text ? (i(), p("span", xe, x(e.text), 1)) : g("", !0)
327
+ v("span", Ne, [
328
+ L($e, { checked: d.value }, null, 8, ["checked"]),
329
+ e.text ? (i(), p("span", Ee, C(e.text), 1)) : x("", !0)
317
330
  ]),
318
- h("input", {
331
+ v("input", {
319
332
  ref_key: "inputRef",
320
- ref: a,
333
+ ref: l,
321
334
  type: "checkbox",
322
335
  name: e.name,
323
336
  value: e.value,
324
- checked: c.value,
337
+ checked: d.value,
325
338
  disabled: e.disabled,
326
- onChange: n,
327
- onFocus: d[0] || (d[0] = (m) => l("focus", m)),
328
- onBlur: d[1] || (d[1] = (m) => l("blur", m))
329
- }, null, 40, Ce)
339
+ onChange: r,
340
+ onFocus: n[0] || (n[0] = (h) => a("focus", h)),
341
+ onBlur: n[1] || (n[1] = (h) => a("blur", h))
342
+ }, null, 40, Ie)
330
343
  ], 2),
331
- e.tooltip ? (i(), E(r(ye), {
344
+ e.tooltip ? (i(), z(c(Be), {
332
345
  key: 0,
333
346
  trigger: "hover",
334
347
  class: "philaCheckbox__tooltip"
335
348
  }, {
336
- body: $(() => [
337
- O(x(e.tooltip), 1)
349
+ body: N(() => [
350
+ H(C(e.tooltip), 1)
338
351
  ]),
339
- default: $(() => [
340
- h("button", we, [
341
- N(r(j), {
342
- icon: r(ne),
352
+ default: N(() => [
353
+ v("button", ze, [
354
+ L(c(Y), {
355
+ icon: c(he),
343
356
  size: "small",
344
357
  inline: "",
345
358
  decorative: ""
@@ -347,18 +360,18 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
347
360
  ])
348
361
  ]),
349
362
  _: 1
350
- })) : g("", !0)
363
+ })) : x("", !0)
351
364
  ]));
352
365
  }
353
- }), H = (o, t) => {
366
+ }), q = (o, t) => {
354
367
  const e = o.__vccOpts || o;
355
- for (const [l, a] of t)
356
- e[l] = a;
368
+ for (const [a, l] of t)
369
+ e[a] = l;
357
370
  return e;
358
- }, $e = /* @__PURE__ */ H(Be, [["__scopeId", "data-v-6d41adb5"]]), Ve = { class: "labels-container" }, Ne = { class: "has-text-body-default" }, Ie = {
371
+ }, Me = /* @__PURE__ */ q(Le, [["__scopeId", "data-v-6d41adb5"]]), Re = { class: "labels-container" }, Te = { class: "has-text-body-default" }, Oe = {
359
372
  key: 0,
360
373
  class: "error-message has-text-error content"
361
- }, ze = /* @__PURE__ */ I({
374
+ }, Se = /* @__PURE__ */ M({
362
375
  __name: "CheckboxGroup",
363
376
  props: {
364
377
  groupLabel: {},
@@ -372,54 +385,54 @@ import './index.css';const ce = ["disabled"], U = /* @__PURE__ */ I({
372
385
  },
373
386
  emits: ["update:modelValue"],
374
387
  setup(o, { emit: t }) {
375
- const e = o, l = t, a = se(), c = v(() => w("group-container", e.className)), n = v(() => w("checkbox-container", e.error && "checkbox-container-error has-background-error")), b = v(() => w("has-text-label-default", e.error && "has-text-error"));
376
- function y(d, m) {
388
+ const e = o, a = t, l = me(), d = f(() => w("group-container", e.className)), r = f(() => w("checkbox-container", e.error && "checkbox-container-error has-background-error")), b = f(() => w("has-text-label-default", e.error && "has-text-error"));
389
+ function k(n, h) {
377
390
  const u = {};
378
- for (const z of e.choices) {
379
- const f = String(z.value);
380
- u[f] = f === String(d) ? m : !!e.modelValue?.[f];
391
+ for (const B of e.choices) {
392
+ const _ = String(B.value);
393
+ u[_] = _ === String(n) ? h : !!e.modelValue?.[_];
381
394
  }
382
- l("update:modelValue", u);
395
+ a("update:modelValue", u);
383
396
  }
384
- return (d, m) => (i(), p("div", {
385
- class: C(c.value)
397
+ return (n, h) => (i(), p("div", {
398
+ class: E(d.value)
386
399
  }, [
387
- h("div", Ve, [
388
- h("span", {
389
- class: C(b.value)
390
- }, x(o.groupLabel), 3),
391
- h("span", Ne, x(o.description), 1)
400
+ v("div", Re, [
401
+ v("span", {
402
+ class: E(b.value)
403
+ }, C(o.groupLabel), 3),
404
+ v("span", Te, C(o.description), 1)
392
405
  ]),
393
- h("div", {
394
- class: C(n.value)
406
+ v("div", {
407
+ class: E(r.value)
395
408
  }, [
396
- (i(!0), p(W, null, ae(e.choices, (u, z) => (i(), E($e, {
397
- key: r(a) + z,
398
- name: r(a),
409
+ (i(!0), p(X, null, ue(e.choices, (u, B) => (i(), z(Me, {
410
+ key: c(l) + B,
411
+ name: c(l),
399
412
  value: u.value,
400
413
  text: u.text,
401
414
  tooltip: u.tooltip,
402
415
  "model-value": e.modelValue?.[String(u.value)] ?? !1,
403
416
  disabled: e.disabled,
404
417
  error: e.error,
405
- "onUpdate:modelValue": (f) => y(u.value, f)
418
+ "onUpdate:modelValue": (_) => k(u.value, _)
406
419
  }, null, 8, ["name", "value", "text", "tooltip", "model-value", "disabled", "error", "onUpdate:modelValue"]))), 128)),
407
- e.error ? (i(), p("div", Ie, [
408
- N(r(j), {
420
+ e.error ? (i(), p("div", Oe, [
421
+ L(c(Y), {
409
422
  style: { height: "fit-content", width: "fit-content", padding: "0" },
410
423
  size: "large",
411
424
  inline: "",
412
425
  "aria-hidden": "true",
413
- icon: r(re)
426
+ icon: c(ve)
414
427
  }, null, 8, ["icon"]),
415
- O(" " + x(o.errorMessage), 1)
416
- ])) : g("", !0)
428
+ H(" " + C(o.errorMessage), 1)
429
+ ])) : x("", !0)
417
430
  ], 2)
418
431
  ], 2));
419
432
  }
420
- }), Oe = /* @__PURE__ */ H(ze, [["__scopeId", "data-v-dfb87f32"]]);
433
+ }), Fe = /* @__PURE__ */ q(Se, [["__scopeId", "data-v-dfb87f32"]]);
421
434
  export {
422
- $e as Checkbox,
423
- Oe as CheckboxGroup,
424
- _e as CheckboxIcon
435
+ Me as Checkbox,
436
+ Fe as CheckboxGroup,
437
+ $e as CheckboxIcon
425
438
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phila/phila-ui-checkbox",
3
- "version": "1.0.0-beta.10",
3
+ "version": "1.0.0-beta.12",
4
4
  "type": "module",
5
5
  "description": "A checkbox input.",
6
6
  "main": "./dist/index.js",
@@ -29,7 +29,7 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@phila/phila-ui-core": "3.0.0-beta.9",
32
- "@phila/phila-ui-tooltip": "0.1.0-beta.10"
32
+ "@phila/phila-ui-tooltip": "0.1.0-beta.12"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@types/node": "^24.0.0",