@phila/phila-ui-radio 1.0.0-beta.11 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +61 -63
- package/package.json +3 -3
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-
|
|
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}.philaRadio-row[data-v-305d0fad]{display:inline-flex;align-items:center;gap:var(--spacing-xs, .5rem)}.philaRadio[data-v-305d0fad]{display:flex;width:fit-content;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;gap:var(--spacing-s, .75rem)}.philaRadio input[data-v-305d0fad]{opacity:0;cursor:pointer;height:0;width:0}.radio-svg[data-v-305d0fad]{flex-shrink:0;overflow:visible}.philaRadio__info[data-v-305d0fad]{display:inline-flex;align-items:center;padding:0;border:none;background:none;cursor:help;color:var(--Schemes-On-Surface-Variant, inherit)}.radio-bg[data-v-305d0fad]{fill:var(--Schemes-Surface-Bright, #fafafa);stroke:var(--Schemes-Border, #cfcfcf);stroke-width:1}.radio-dot[data-v-305d0fad]{fill:none}.philaRadio:has(input:checked) .radio-svg .radio-bg[data-v-305d0fad]{fill:var(--Schemes-Primary, #0f33f5);stroke:var(--Schemes-Primary, #0f33f5)}.philaRadio:has(input:checked) .radio-svg .radio-dot[data-v-305d0fad]{fill:var(--Schemes-Surface-Bright, #fafafa)}.philaRadio[data-v-305d0fad]:focus-within{outline:2px solid var(--Schemes-Primary, #0f33f5);outline-offset:2px}.philaRadio-error .radio-svg .radio-bg[data-v-305d0fad]{stroke:var(--Schemes-Error, #cc0406);stroke-width:2}.philaRadio-enabled:hover .radio-svg .radio-bg[data-v-305d0fad]{stroke:var(--Schemes-Primary, #0f33f5);stroke-width:2}.philaRadio-disabled[data-v-305d0fad]{cursor:not-allowed;color:var(--Schemes-Surface-Variant, #a2a2a2)}.philaRadio-disabled .radio-svg .radio-bg[data-v-305d0fad]{stroke:var(--Schemes-Surface-Dim, #cfcfcf);stroke-width:1}.group-container[data-v-af0e1574]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, .5rem)}.labels-container[data-v-af0e1574]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2xs, .25rem);align-self:stretch}span[data-v-af0e1574]{display:block}.radio-container[data-v-af0e1574]{display:flex;padding:var(--spacing-m, 1rem);flex-direction:column;align-items:flex-start;gap:var(--spacing-m, 1rem);align-self:stretch}.radio-container-error[data-v-af0e1574]{border-radius:var(--border-radius-m, .75rem)}.error-message[data-v-af0e1574]{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"),c=require("@phila/phila-ui-core"),E=require("@phila/phila-ui-core/icons"),F=["disabled"],S=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,r=e.computed(()=>c.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:r.value}:{href:o.href,target:o.target,rel:o.rel,disabled:o.disabled,className:r.value}:{}),d=e.computed(()=>({icon:o.icon,src:o.src,iconRight:o.iconRight,iconOnly:o.iconOnly,text:o.text,size:o.size}));return(i,m)=>t(o)?(e.openBlock(),e.createBlock(e.unref(c.BaseLink),e.mergeProps({key:0},{...a.value,...i.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(c.ActionContent),e.normalizeProps(e.guardReactiveProps(d.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:r.value},i.$attrs),[e.createVNode(e.unref(c.ActionContent),e.normalizeProps(e.guardReactiveProps(d.value)),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])]),_:3},16)],16,F))}}),U=["id"],q={key:0,class:"tooltip__tail","aria-hidden":"true"},A={key:1,class:"tooltip__plain-row has-text-body-small"},G={key:0,class:"tooltip__title-row"},H={key:0},j=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(()=>c.cn("tooltip","content","resets-link-colors",`tooltip--${o.type}`,`tooltip--${o.color}`,o.tail&&`tooltip--${o.placement}`,o.className));return(r,a)=>(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",A,[e.renderSlot(r.$slots,"default",{},void 0,!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(S),{key:0,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(E.IconClose),"aria-label":"Dismiss tooltip",onClick:a[0]||(a[0]=d=>r.$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",G,[l.title?(e.openBlock(),e.createElementBlock("h6",H,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(S),{key:1,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(E.IconClose),"aria-label":"Dismiss tooltip",onClick:a[1]||(a[1]=d=>r.$emit("dismiss"))},null,8,["icon"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default",{},void 0,!0)],64))],10,U))}}),z=(l,o)=>{const t=l.__vccOpts||l;for(const[r,a]of o)t[r]=a;return t},K=z(j,[["__scopeId","data-v-af4a0398"]]),V=8,w=8,W=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,r=e.useId(),a=e.ref(!1),d=e.ref(null),i=e.ref(null),m=e.ref("top-center"),y=e.ref({top:0,left:0});let s=null;const h=()=>{const n=d.value?.getBoundingClientRect();if(!n)return"top-center";const{innerWidth:u,innerHeight:b}=window,k=n.top,R=b-n.bottom,_=i.value?.getBoundingClientRect().height??0,B=(_>0?k>=_:k>=R)?"top":"bottom",v=n.left+n.width/2,O=v<u/3?"left":v>u*2/3?"right":"center";return`${B}-${O}`};function g(){const n=d.value?.getBoundingClientRect(),u=i.value?.getBoundingClientRect();if(!n||!u)return;const{innerWidth:b,innerHeight:k}=window,[R,_]=m.value.split("-");let B=R==="top"?n.top-V-u.height:n.bottom+V,v;_==="center"?v=n.left+n.width/2-u.width/2:_==="left"?v=n.left-V:v=n.right+V-u.width,v=Math.min(Math.max(v,w),b-w-u.width),B=Math.min(Math.max(B,w),k-w-u.height),y.value={top:B,left:v}}const p=n=>{n.key==="Escape"&&f()},x=n=>{const u=n.target,b=d.value?.contains(u),k=i.value?.contains(u);!b&&!k&&f()},C=()=>{a.value&&g()},N=async()=>{s&&(clearTimeout(s),s=null),m.value=t.placement==="auto"?h():t.placement,a.value=!0,document.addEventListener("keydown",p),t.trigger==="click"&&document.addEventListener("click",x),window.addEventListener("scroll",C,!0),window.addEventListener("resize",C),await e.nextTick(),t.placement==="auto"&&(m.value=h()),g()},f=()=>{a.value=!1,s&&(clearTimeout(s),s=null),document.removeEventListener("keydown",p),document.removeEventListener("click",x),window.removeEventListener("scroll",C,!0),window.removeEventListener("resize",C)},$=()=>{if(t.trigger!=="hover")return f();s=setTimeout(f,100)},D=()=>{s&&(clearTimeout(s),s=null)},L=()=>{a.value?f():N()};e.onUnmounted(f),o({show:N,hide:f});const M=e.computed(()=>({type:t.type,color:t.color,tail:t.tail,placement:m.value,title:t.title,dismissable:t.dismissable})),P=e.computed(()=>({top:`${y.value.top}px`,left:`${y.value.left}px`,visibility:a.value?"visible":"hidden"}));return(n,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("span",e.mergeProps({ref_key:"wrapperEl",ref:d,class:e.unref(c.cn)("tooltip-trigger",t.className)},l.trigger==="click"?{onClick:L}:{onMouseenter:N,onMouseleave:$,onFocusin:N,onFocusout:f}),[e.renderSlot(n.$slots,"default",{tooltipId:e.unref(r),isOpen:a.value},void 0,!0)],16),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{ref_key:"bubbleEl",ref:i,class:"tooltip-positioner",style:e.normalizeStyle(P.value),onMouseenter:D,onMouseleave:$},[e.createVNode(K,e.mergeProps(M.value,{id:e.unref(r),onDismiss:f}),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"body",{},void 0,!0)]),_:3},16,["id"])],36)]))],64))}}),X=z(W,[["__scopeId","data-v-591a1092"]]),Y={class:"philaRadio-row"},Z=["for"],J=["id","name","value","checked","disabled"],Q={type:"button",class:"philaRadio__info","aria-label":"More information"},ee=e.defineComponent({__name:"Radio",props:{name:{},value:{},text:{},tooltip:{},modelValue:{},disabled:{type:Boolean},error:{type:Boolean},className:{}},emits:["update:modelValue"],setup(l,{emit:o}){const t=l,r=o,a=c.generateRandomId(),d=e.computed(()=>t.modelValue!==void 0?t.modelValue===t.value:void 0);function i(){r("update:modelValue",t.value)}const m=e.computed(()=>c.cn("philaRadio","has-text-body-default",t.className,!t.disabled&&"philaRadio-enabled",t.disabled&&"philaRadio-disabled",t.error&&"philaRadio-error"));return(y,s)=>(e.openBlock(),e.createElementBlock("span",Y,[e.createElementVNode("label",{class:e.normalizeClass(m.value),for:e.unref(a)},[s[0]||(s[0]=e.createElementVNode("svg",{class:"radio-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[e.createElementVNode("circle",{class:"radio-bg",cx:"10",cy:"10",r:"9.5"}),e.createElementVNode("circle",{class:"radio-dot",cx:"10",cy:"10",r:"4"})],-1)),e.createTextVNode(" "+e.toDisplayString(t.text)+" ",1),e.createElementVNode("input",{id:e.unref(a),type:"radio",name:t.name,value:t.value,checked:d.value,disabled:t.disabled,onChange:i},null,40,J)],10,Z),t.tooltip?(e.openBlock(),e.createBlock(e.unref(X),{key:0,trigger:"hover",class:"philaRadio__tooltip"},{body:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.tooltip),1)]),default:e.withCtx(()=>[e.createElementVNode("button",Q,[e.createVNode(e.unref(c.Icon),{icon:e.unref(E.IconCircleInfo),size:"small",inline:"",decorative:""},null,8,["icon"])])]),_:1})):e.createCommentVNode("",!0)]))}}),I=(l,o)=>{const t=l.__vccOpts||l;for(const[r,a]of o)t[r]=a;return t},T=I(ee,[["__scopeId","data-v-305d0fad"]]),te={class:"labels-container"},oe={class:"has-text-body-default"},le={key:0,class:"error-message has-text-error content"},ae=e.defineComponent({__name:"RadioGroup",props:{groupLabel:{},description:{},choices:{},modelValue:{},error:{type:Boolean},errorMessage:{},disabled:{type:Boolean},className:{}},emits:["update:modelValue"],setup(l,{emit:o}){const t=l,r=o,a=c.generateRandomId(),d=e.computed(()=>{const h=Object.entries(t.modelValue??{}).filter(([,g])=>g);return h.length>1,h[0]?.[0]??""}),i=e.computed(()=>c.cn("group-container",t.className)),m=e.computed(()=>c.cn("radio-container",t.error&&"radio-container-error has-background-error")),y=e.computed(()=>c.cn("has-text-label-default",t.error&&"has-text-error"));function s(h){const g={};for(const p of t.choices)g[String(p.value)]=String(p.value)===h;r("update:modelValue",g)}return(h,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(i.value)},[e.createElementVNode("div",te,[e.createElementVNode("span",{class:e.normalizeClass(y.value)},e.toDisplayString(l.groupLabel),3),e.createElementVNode("span",oe,e.toDisplayString(l.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(m.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.choices,(p,x)=>(e.openBlock(),e.createBlock(T,{key:e.unref(a)+x,name:e.unref(a),value:p.value,text:p.text,tooltip:p.tooltip,"model-value":d.value,disabled:t.disabled||p.disabled,error:t.error,"onUpdate:modelValue":s},null,8,["name","value","text","tooltip","model-value","disabled","error"]))),128)),t.error?(e.openBlock(),e.createElementBlock("div",le,[e.createVNode(e.unref(c.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))}}),ne=I(ae,[["__scopeId","data-v-af0e1574"]]);exports.Radio=T;exports.RadioGroup=ne;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),c=require("@phila/phila-ui-core"),E=require("@phila/phila-ui-core/icons"),F=["disabled"],S=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,r=e.computed(()=>c.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:r.value}:{href:o.href,target:o.target,rel:o.rel,disabled:o.disabled,className:r.value}:{}),d=e.computed(()=>({icon:o.icon,src:o.src,iconRight:o.iconRight,iconOnly:o.iconOnly,text:o.text,size:o.size}));return(i,m)=>t(o)?(e.openBlock(),e.createBlock(e.unref(c.BaseLink),e.mergeProps({key:0},{...a.value,...i.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(c.ActionContent),e.normalizeProps(e.guardReactiveProps(d.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:r.value},i.$attrs),[e.createVNode(e.unref(c.ActionContent),e.normalizeProps(e.guardReactiveProps(d.value)),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])]),_:3},16)],16,F))}}),U=["id"],q={key:0,class:"tooltip__tail","aria-hidden":"true"},A={key:1,class:"tooltip__plain-row has-text-body-small"},G={key:0,class:"tooltip__title-row"},H={key:0},j=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(()=>c.cn("tooltip","content","resets-link-colors",`tooltip--${o.type}`,`tooltip--${o.color}`,o.tail&&`tooltip--${o.placement}`,o.className));return(r,a)=>(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",A,[e.renderSlot(r.$slots,"default",{},void 0,!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(S),{key:0,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(E.IconClose),"aria-label":"Dismiss tooltip",onClick:a[0]||(a[0]=d=>r.$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",G,[l.title?(e.openBlock(),e.createElementBlock("h6",H,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(S),{key:1,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(E.IconClose),"aria-label":"Dismiss tooltip",onClick:a[1]||(a[1]=d=>r.$emit("dismiss"))},null,8,["icon"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default",{},void 0,!0)],64))],10,U))}}),z=(l,o)=>{const t=l.__vccOpts||l;for(const[r,a]of o)t[r]=a;return t},K=z(j,[["__scopeId","data-v-af4a0398"]]),w=8,V=8,W=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,r=e.useId(),a=e.ref(!1),d=e.ref(null),i=e.ref(null),m=e.ref("top-center"),y=e.ref({top:0,left:0});let s=null;const h=()=>{const n=d.value?.getBoundingClientRect();if(!n)return"top-center";const{innerWidth:u,innerHeight:b}=window,k=n.top,R=b-n.bottom,_=i.value?.getBoundingClientRect().height??0,B=(_>0?k>=_:k>=R)?"top":"bottom",v=n.left+n.width/2,O=v<u/3?"left":v>u*2/3?"right":"center";return`${B}-${O}`};function g(){const n=d.value?.getBoundingClientRect(),u=i.value?.getBoundingClientRect();if(!n||!u)return;const{innerWidth:b,innerHeight:k}=window,[R,_]=m.value.split("-");let B=R==="top"?n.top-w-u.height:n.bottom+w,v;_==="center"?v=n.left+n.width/2-u.width/2:_==="left"?v=n.left-w:v=n.right+w-u.width,v=Math.min(Math.max(v,V),b-V-u.width),B=Math.min(Math.max(B,V),k-V-u.height),y.value={top:B,left:v}}const p=n=>{n.key==="Escape"&&f()},x=n=>{const u=n.target,b=d.value?.contains(u),k=i.value?.contains(u);!b&&!k&&f()},C=()=>{a.value&&g()},N=async()=>{s&&(clearTimeout(s),s=null),m.value=t.placement==="auto"?h():t.placement,a.value=!0,document.addEventListener("keydown",p),t.trigger==="click"&&document.addEventListener("click",x),window.addEventListener("scroll",C,!0),window.addEventListener("resize",C),await e.nextTick(),t.placement==="auto"&&(m.value=h()),g()},f=()=>{a.value=!1,s&&(clearTimeout(s),s=null),document.removeEventListener("keydown",p),document.removeEventListener("click",x),window.removeEventListener("scroll",C,!0),window.removeEventListener("resize",C)},$=()=>{if(t.trigger!=="hover")return f();s=setTimeout(f,100)},D=()=>{s&&(clearTimeout(s),s=null)},L=()=>{a.value?f():N()};e.onUnmounted(f),o({show:N,hide:f});const M=e.computed(()=>({type:t.type,color:t.color,tail:t.tail,placement:m.value,title:t.title,dismissable:t.dismissable})),P=e.computed(()=>({top:`${y.value.top}px`,left:`${y.value.left}px`,visibility:a.value?"visible":"hidden"}));return(n,u)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({ref_key:"wrapperEl",ref:d,class:e.unref(c.cn)("tooltip-trigger",t.className)},l.trigger==="click"?{onClick:L}:{onMouseenter:N,onMouseleave:$,onFocusin:N,onFocusout:f}),[e.renderSlot(n.$slots,"default",{tooltipId:e.unref(r),isOpen:a.value},void 0,!0),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{ref_key:"bubbleEl",ref:i,class:"tooltip-positioner",style:e.normalizeStyle(P.value),onMouseenter:D,onMouseleave:$},[e.createVNode(K,e.mergeProps(M.value,{id:e.unref(r),onDismiss:f}),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"body",{},void 0,!0)]),_:3},16,["id"])],36)]))],16))}}),J=z(W,[["__scopeId","data-v-a68ae692"]]),Q={class:"philaRadio-row"},X=["for"],Y=["id","name","value","checked","disabled"],Z={type:"button",class:"philaRadio__info","aria-label":"More information"},ee=e.defineComponent({__name:"Radio",props:{name:{},value:{},text:{},tooltip:{},modelValue:{},disabled:{type:Boolean},error:{type:Boolean},className:{}},emits:["update:modelValue"],setup(l,{emit:o}){const t=l,r=o,a=c.generateRandomId(),d=e.computed(()=>t.modelValue!==void 0?t.modelValue===t.value:void 0);function i(){r("update:modelValue",t.value)}const m=e.computed(()=>c.cn("philaRadio","has-text-body-default",t.className,!t.disabled&&"philaRadio-enabled",t.disabled&&"philaRadio-disabled",t.error&&"philaRadio-error"));return(y,s)=>(e.openBlock(),e.createElementBlock("span",Q,[e.createElementVNode("label",{class:e.normalizeClass(m.value),for:e.unref(a)},[s[0]||(s[0]=e.createElementVNode("svg",{class:"radio-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[e.createElementVNode("circle",{class:"radio-bg",cx:"10",cy:"10",r:"9.5"}),e.createElementVNode("circle",{class:"radio-dot",cx:"10",cy:"10",r:"4"})],-1)),e.createTextVNode(" "+e.toDisplayString(t.text)+" ",1),e.createElementVNode("input",{id:e.unref(a),type:"radio",name:t.name,value:t.value,checked:d.value,disabled:t.disabled,onChange:i},null,40,Y)],10,X),t.tooltip?(e.openBlock(),e.createBlock(e.unref(J),{key:0,trigger:"hover",class:"philaRadio__tooltip"},{body:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.tooltip),1)]),default:e.withCtx(()=>[e.createElementVNode("button",Z,[e.createVNode(e.unref(c.Icon),{icon:e.unref(E.IconCircleInfo),size:"small",inline:"",decorative:""},null,8,["icon"])])]),_:1})):e.createCommentVNode("",!0)]))}}),I=(l,o)=>{const t=l.__vccOpts||l;for(const[r,a]of o)t[r]=a;return t},T=I(ee,[["__scopeId","data-v-305d0fad"]]),te={class:"labels-container"},oe={class:"has-text-body-default"},le={key:0,class:"error-message has-text-error content"},ae=e.defineComponent({__name:"RadioGroup",props:{groupLabel:{},description:{},choices:{},modelValue:{},error:{type:Boolean},errorMessage:{},disabled:{type:Boolean},className:{}},emits:["update:modelValue"],setup(l,{emit:o}){const t=l,r=o,a=c.generateRandomId(),d=e.computed(()=>{const h=Object.entries(t.modelValue??{}).filter(([,g])=>g);return h.length>1,h[0]?.[0]??""}),i=e.computed(()=>c.cn("group-container",t.className)),m=e.computed(()=>c.cn("radio-container",t.error&&"radio-container-error has-background-error")),y=e.computed(()=>c.cn("has-text-label-default",t.error&&"has-text-error"));function s(h){const g={};for(const p of t.choices)g[String(p.value)]=String(p.value)===h;r("update:modelValue",g)}return(h,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(i.value)},[e.createElementVNode("div",te,[e.createElementVNode("span",{class:e.normalizeClass(y.value)},e.toDisplayString(l.groupLabel),3),e.createElementVNode("span",oe,e.toDisplayString(l.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(m.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.choices,(p,x)=>(e.openBlock(),e.createBlock(T,{key:e.unref(a)+x,name:e.unref(a),value:p.value,text:p.text,tooltip:p.tooltip,"model-value":d.value,disabled:t.disabled||p.disabled,error:t.error,"onUpdate:modelValue":s},null,8,["name","value","text","tooltip","model-value","disabled","error"]))),128)),t.error?(e.openBlock(),e.createElementBlock("div",le,[e.createVNode(e.unref(c.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))}}),ne=I(ae,[["__scopeId","data-v-af0e1574"]]);exports.Radio=T;exports.RadioGroup=ne;
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as O, useId as se, ref as I, onUnmounted as ne, computed as
|
|
2
|
-
import { cn as w, BaseLink as pe, ActionContent as
|
|
3
|
-
import { IconClose as
|
|
4
|
-
import './index.css';const fe = ["disabled"],
|
|
1
|
+
import { defineComponent as O, useId as se, ref as I, onUnmounted as ne, computed as m, createElementBlock as p, openBlock as r, mergeProps as U, unref as s, renderSlot as R, createBlock as N, Teleport as re, createElementVNode as v, normalizeStyle as de, createVNode as M, withCtx as C, nextTick as ce, normalizeClass as L, createCommentVNode as x, Fragment as X, toDisplayString as k, normalizeProps as K, guardReactiveProps as W, createTextVNode as T, renderList as ue } from "vue";
|
|
2
|
+
import { cn as w, BaseLink as pe, ActionContent as j, generateRandomId as Y, Icon as Z } from "@phila/phila-ui-core";
|
|
3
|
+
import { IconClose as J, IconCircleInfo as me, IconCircleExclamation as ve } from "@phila/phila-ui-core/icons";
|
|
4
|
+
import './index.css';const fe = ["disabled"], Q = /* @__PURE__ */ O({
|
|
5
5
|
inheritAttrs: !1,
|
|
6
6
|
__name: "PhlButton",
|
|
7
7
|
props: {
|
|
@@ -22,14 +22,14 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
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, i =
|
|
25
|
+
const t = o, e = (n) => "href" in n && n.href !== void 0 || "to" in n && n.to !== void 0, i = m(() => 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 =
|
|
32
|
+
)), a = m(() => e(t) ? "to" in t && t.to !== void 0 ? {
|
|
33
33
|
to: t.to,
|
|
34
34
|
disabled: t.disabled,
|
|
35
35
|
className: i.value
|
|
@@ -39,7 +39,7 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
39
39
|
rel: t.rel,
|
|
40
40
|
disabled: t.disabled,
|
|
41
41
|
className: i.value
|
|
42
|
-
} : {}), c =
|
|
42
|
+
} : {}), c = m(
|
|
43
43
|
() => ({
|
|
44
44
|
icon: t.icon,
|
|
45
45
|
src: t.src,
|
|
@@ -49,11 +49,11 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
49
49
|
size: t.size
|
|
50
50
|
})
|
|
51
51
|
);
|
|
52
|
-
return (n, h) => e(t) ? (r(),
|
|
52
|
+
return (n, h) => e(t) ? (r(), N(s(pe), U({ key: 0 }, { ...a.value, ...n.$attrs }, { role: "button" }), {
|
|
53
53
|
default: C(() => [
|
|
54
|
-
M(s(
|
|
54
|
+
M(s(j), K(W(c.value)), {
|
|
55
55
|
default: C(() => [
|
|
56
|
-
|
|
56
|
+
R(n.$slots, "default", {}, () => [
|
|
57
57
|
T(k(t.text), 1)
|
|
58
58
|
])
|
|
59
59
|
]),
|
|
@@ -67,9 +67,9 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
67
67
|
disabled: t.disabled,
|
|
68
68
|
class: i.value
|
|
69
69
|
}, n.$attrs), [
|
|
70
|
-
M(s(
|
|
70
|
+
M(s(j), K(W(c.value)), {
|
|
71
71
|
default: C(() => [
|
|
72
|
-
|
|
72
|
+
R(n.$slots, "default", {}, () => [
|
|
73
73
|
T(k(t.text), 1)
|
|
74
74
|
])
|
|
75
75
|
]),
|
|
@@ -101,7 +101,7 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
101
101
|
},
|
|
102
102
|
emits: ["dismiss"],
|
|
103
103
|
setup(o) {
|
|
104
|
-
const t = o, e =
|
|
104
|
+
const t = o, e = m(
|
|
105
105
|
() => w(
|
|
106
106
|
"tooltip",
|
|
107
107
|
"content",
|
|
@@ -119,41 +119,41 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
119
119
|
}, [
|
|
120
120
|
o.tail ? (r(), p("div", be)) : x("", !0),
|
|
121
121
|
o.type === "plain" ? (r(), p("div", ge, [
|
|
122
|
-
|
|
123
|
-
o.dismissable ? (r(),
|
|
122
|
+
R(i.$slots, "default", {}, void 0, !0),
|
|
123
|
+
o.dismissable ? (r(), N(s(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: s(
|
|
129
|
+
icon: s(J),
|
|
130
130
|
"aria-label": "Dismiss tooltip",
|
|
131
131
|
onClick: a[0] || (a[0] = (c) => i.$emit("dismiss"))
|
|
132
132
|
}, null, 8, ["icon"])) : x("", !0)
|
|
133
|
-
])) : (r(), p(
|
|
133
|
+
])) : (r(), p(X, { key: 2 }, [
|
|
134
134
|
o.title || o.dismissable ? (r(), p("div", ye, [
|
|
135
135
|
o.title ? (r(), p("h6", _e, k(o.title), 1)) : x("", !0),
|
|
136
|
-
o.dismissable ? (r(),
|
|
136
|
+
o.dismissable ? (r(), N(s(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: s(
|
|
142
|
+
icon: s(J),
|
|
143
143
|
"aria-label": "Dismiss tooltip",
|
|
144
144
|
onClick: a[1] || (a[1] = (c) => i.$emit("dismiss"))
|
|
145
145
|
}, null, 8, ["icon"])) : x("", !0)
|
|
146
146
|
])) : x("", !0),
|
|
147
|
-
|
|
147
|
+
R(i.$slots, "default", {}, void 0, !0)
|
|
148
148
|
], 64))
|
|
149
149
|
], 10, he));
|
|
150
150
|
}
|
|
151
|
-
}),
|
|
151
|
+
}), q = (o, t) => {
|
|
152
152
|
const e = o.__vccOpts || o;
|
|
153
153
|
for (const [i, a] of t)
|
|
154
154
|
e[i] = a;
|
|
155
155
|
return e;
|
|
156
|
-
}, xe = /* @__PURE__ */
|
|
156
|
+
}, xe = /* @__PURE__ */ q(ke, [["__scopeId", "data-v-af4a0398"]]), F = 8, H = 8, we = /* @__PURE__ */ O({
|
|
157
157
|
__name: "Tooltip",
|
|
158
158
|
props: {
|
|
159
159
|
trigger: { default: "hover" },
|
|
@@ -192,7 +192,7 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
192
192
|
d && (clearTimeout(d), d = null), h.value = e.placement === "auto" ? y() : e.placement, a.value = !0, document.addEventListener("keydown", f), e.trigger === "click" && document.addEventListener("click", P), window.addEventListener("scroll", S, !0), window.addEventListener("resize", S), await ce(), e.placement === "auto" && (h.value = y()), _();
|
|
193
193
|
}, b = () => {
|
|
194
194
|
a.value = !1, d && (clearTimeout(d), d = null), document.removeEventListener("keydown", f), document.removeEventListener("click", P), window.removeEventListener("scroll", S, !0), window.removeEventListener("resize", S);
|
|
195
|
-
},
|
|
195
|
+
}, G = () => {
|
|
196
196
|
if (e.trigger !== "hover") return b();
|
|
197
197
|
d = setTimeout(b, 100);
|
|
198
198
|
}, te = () => {
|
|
@@ -201,55 +201,53 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
201
201
|
a.value ? b() : D();
|
|
202
202
|
};
|
|
203
203
|
ne(b), t({ show: D, hide: b });
|
|
204
|
-
const ae =
|
|
204
|
+
const ae = m(() => ({
|
|
205
205
|
type: e.type,
|
|
206
206
|
color: e.color,
|
|
207
207
|
tail: e.tail,
|
|
208
208
|
placement: h.value,
|
|
209
209
|
title: e.title,
|
|
210
210
|
dismissable: e.dismissable
|
|
211
|
-
})), le =
|
|
211
|
+
})), le = m(() => ({
|
|
212
212
|
top: `${$.value.top}px`,
|
|
213
213
|
left: `${$.value.left}px`,
|
|
214
214
|
visibility: a.value ? "visible" : "hidden"
|
|
215
215
|
}));
|
|
216
|
-
return (l, u) => (r(), p(
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
(r(), R(re, { to: "body" }, [
|
|
231
|
-
m("div", {
|
|
216
|
+
return (l, u) => (r(), p("span", U(
|
|
217
|
+
{
|
|
218
|
+
ref_key: "wrapperEl",
|
|
219
|
+
ref: c,
|
|
220
|
+
class: s(w)("tooltip-trigger", e.className)
|
|
221
|
+
},
|
|
222
|
+
o.trigger === "click" ? { onClick: oe } : { onMouseenter: D, onMouseleave: G, onFocusin: D, onFocusout: b }
|
|
223
|
+
), [
|
|
224
|
+
R(l.$slots, "default", {
|
|
225
|
+
tooltipId: s(i),
|
|
226
|
+
isOpen: a.value
|
|
227
|
+
}, void 0, !0),
|
|
228
|
+
(r(), N(re, { to: "body" }, [
|
|
229
|
+
v("div", {
|
|
232
230
|
ref_key: "bubbleEl",
|
|
233
231
|
ref: n,
|
|
234
232
|
class: "tooltip-positioner",
|
|
235
233
|
style: de(le.value),
|
|
236
234
|
onMouseenter: te,
|
|
237
|
-
onMouseleave:
|
|
235
|
+
onMouseleave: G
|
|
238
236
|
}, [
|
|
239
237
|
M(xe, U(ae.value, {
|
|
240
238
|
id: s(i),
|
|
241
239
|
onDismiss: b
|
|
242
240
|
}), {
|
|
243
241
|
default: C(() => [
|
|
244
|
-
|
|
242
|
+
R(l.$slots, "body", {}, void 0, !0)
|
|
245
243
|
]),
|
|
246
244
|
_: 3
|
|
247
245
|
}, 16, ["id"])
|
|
248
246
|
], 36)
|
|
249
247
|
]))
|
|
250
|
-
],
|
|
248
|
+
], 16));
|
|
251
249
|
}
|
|
252
|
-
}), $e = /* @__PURE__ */
|
|
250
|
+
}), $e = /* @__PURE__ */ q(we, [["__scopeId", "data-v-a68ae692"]]), Be = { class: "philaRadio-row" }, Ce = ["for"], Re = ["id", "name", "value", "checked", "disabled"], Ne = {
|
|
253
251
|
type: "button",
|
|
254
252
|
class: "philaRadio__info",
|
|
255
253
|
"aria-label": "More information"
|
|
@@ -267,11 +265,11 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
267
265
|
},
|
|
268
266
|
emits: ["update:modelValue"],
|
|
269
267
|
setup(o, { emit: t }) {
|
|
270
|
-
const e = o, i = t, a =
|
|
268
|
+
const e = o, i = t, a = Y(), c = m(() => e.modelValue !== void 0 ? e.modelValue === e.value : void 0);
|
|
271
269
|
function n() {
|
|
272
270
|
i("update:modelValue", e.value);
|
|
273
271
|
}
|
|
274
|
-
const h =
|
|
272
|
+
const h = m(() => w(
|
|
275
273
|
"philaRadio",
|
|
276
274
|
"has-text-body-default",
|
|
277
275
|
e.className,
|
|
@@ -280,11 +278,11 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
280
278
|
e.error && "philaRadio-error"
|
|
281
279
|
));
|
|
282
280
|
return ($, d) => (r(), p("span", Be, [
|
|
283
|
-
|
|
281
|
+
v("label", {
|
|
284
282
|
class: L(h.value),
|
|
285
283
|
for: s(a)
|
|
286
284
|
}, [
|
|
287
|
-
d[0] || (d[0] =
|
|
285
|
+
d[0] || (d[0] = v("svg", {
|
|
288
286
|
class: "radio-svg",
|
|
289
287
|
width: "20",
|
|
290
288
|
height: "20",
|
|
@@ -293,13 +291,13 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
293
291
|
xmlns: "http://www.w3.org/2000/svg",
|
|
294
292
|
"aria-hidden": "true"
|
|
295
293
|
}, [
|
|
296
|
-
|
|
294
|
+
v("circle", {
|
|
297
295
|
class: "radio-bg",
|
|
298
296
|
cx: "10",
|
|
299
297
|
cy: "10",
|
|
300
298
|
r: "9.5"
|
|
301
299
|
}),
|
|
302
|
-
|
|
300
|
+
v("circle", {
|
|
303
301
|
class: "radio-dot",
|
|
304
302
|
cx: "10",
|
|
305
303
|
cy: "10",
|
|
@@ -307,7 +305,7 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
307
305
|
})
|
|
308
306
|
], -1)),
|
|
309
307
|
T(" " + k(e.text) + " ", 1),
|
|
310
|
-
|
|
308
|
+
v("input", {
|
|
311
309
|
id: s(a),
|
|
312
310
|
type: "radio",
|
|
313
311
|
name: e.name,
|
|
@@ -317,7 +315,7 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
317
315
|
onChange: n
|
|
318
316
|
}, null, 40, Re)
|
|
319
317
|
], 10, Ce),
|
|
320
|
-
e.tooltip ? (r(),
|
|
318
|
+
e.tooltip ? (r(), N(s($e), {
|
|
321
319
|
key: 0,
|
|
322
320
|
trigger: "hover",
|
|
323
321
|
class: "philaRadio__tooltip"
|
|
@@ -326,8 +324,8 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
326
324
|
T(k(e.tooltip), 1)
|
|
327
325
|
]),
|
|
328
326
|
default: C(() => [
|
|
329
|
-
|
|
330
|
-
M(s(
|
|
327
|
+
v("button", Ne, [
|
|
328
|
+
M(s(Z), {
|
|
331
329
|
icon: s(me),
|
|
332
330
|
size: "small",
|
|
333
331
|
inline: "",
|
|
@@ -361,10 +359,10 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
361
359
|
},
|
|
362
360
|
emits: ["update:modelValue"],
|
|
363
361
|
setup(o, { emit: t }) {
|
|
364
|
-
const e = o, i = t, a =
|
|
362
|
+
const e = o, i = t, a = Y(), c = m(() => {
|
|
365
363
|
const y = Object.entries(e.modelValue ?? {}).filter(([, _]) => _);
|
|
366
364
|
return y.length > 1, y[0]?.[0] ?? "";
|
|
367
|
-
}), n =
|
|
365
|
+
}), n = m(() => w("group-container", e.className)), h = m(() => w("radio-container", e.error && "radio-container-error has-background-error")), $ = m(() => w("has-text-label-default", e.error && "has-text-error"));
|
|
368
366
|
function d(y) {
|
|
369
367
|
const _ = {};
|
|
370
368
|
for (const f of e.choices) _[String(f.value)] = String(f.value) === y;
|
|
@@ -373,16 +371,16 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
373
371
|
return (y, _) => (r(), p("div", {
|
|
374
372
|
class: L(n.value)
|
|
375
373
|
}, [
|
|
376
|
-
|
|
377
|
-
|
|
374
|
+
v("div", ze, [
|
|
375
|
+
v("span", {
|
|
378
376
|
class: L($.value)
|
|
379
377
|
}, k(o.groupLabel), 3),
|
|
380
|
-
|
|
378
|
+
v("span", Ie, k(o.description), 1)
|
|
381
379
|
]),
|
|
382
|
-
|
|
380
|
+
v("div", {
|
|
383
381
|
class: L(h.value)
|
|
384
382
|
}, [
|
|
385
|
-
(r(!0), p(
|
|
383
|
+
(r(!0), p(X, null, ue(e.choices, (f, P) => (r(), N(Ve, {
|
|
386
384
|
key: s(a) + P,
|
|
387
385
|
name: s(a),
|
|
388
386
|
value: f.value,
|
|
@@ -394,7 +392,7 @@ import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ O({
|
|
|
394
392
|
"onUpdate:modelValue": d
|
|
395
393
|
}, null, 8, ["name", "value", "text", "tooltip", "model-value", "disabled", "error"]))), 128)),
|
|
396
394
|
e.error ? (r(), p("div", Le, [
|
|
397
|
-
M(s(
|
|
395
|
+
M(s(Z), {
|
|
398
396
|
style: { height: "fit-content", width: "fit-content", padding: "0" },
|
|
399
397
|
size: "large",
|
|
400
398
|
inline: "",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-radio",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A radio input component for Phila UI.",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"vue": "^3.0.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@phila/phila-ui-core": "3.0.0
|
|
32
|
-
"@phila/phila-ui-tooltip": "0.1.0
|
|
31
|
+
"@phila/phila-ui-core": "3.0.0",
|
|
32
|
+
"@phila/phila-ui-tooltip": "0.1.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/node": "^24.0.0",
|