@phila/phila-ui-radio 0.1.1 → 1.0.0-beta.10
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/Radio.vue.d.ts +1 -1
- package/dist/Radio.vue.d.ts.map +1 -1
- package/dist/RadioGroup.vue.d.ts +2 -2
- package/dist/RadioGroup.vue.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +348 -87
- package/package.json +3 -2
package/dist/Radio.vue.d.ts
CHANGED
|
@@ -3,6 +3,6 @@ declare const _default: import('vue').DefineComponent<RadioProps, {}, {}, {}, {}
|
|
|
3
3
|
"update:modelValue": (value: string) => any;
|
|
4
4
|
}, string, import('vue').PublicProps, Readonly<RadioProps> & Readonly<{
|
|
5
5
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
6
|
-
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {},
|
|
6
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
|
|
7
7
|
export default _default;
|
|
8
8
|
//# sourceMappingURL=Radio.vue.d.ts.map
|
package/dist/Radio.vue.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.vue.d.ts","sourceRoot":"","sources":["../src/Radio.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Radio.vue.d.ts","sourceRoot":"","sources":["../src/Radio.vue"],"names":[],"mappings":"AAsKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;AAmK1C,wBASG"}
|
package/dist/RadioGroup.vue.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { RadioGroupProps } from './index';
|
|
2
2
|
declare const _default: import('vue').DefineComponent<RadioGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
3
|
-
"update:modelValue": (value: string) => any;
|
|
3
|
+
"update:modelValue": (value: Record<string, boolean>) => any;
|
|
4
4
|
}, string, import('vue').PublicProps, Readonly<RadioGroupProps> & Readonly<{
|
|
5
|
-
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
5
|
+
"onUpdate:modelValue"?: ((value: Record<string, boolean>) => any) | undefined;
|
|
6
6
|
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
7
7
|
export default _default;
|
|
8
8
|
//# sourceMappingURL=RadioGroup.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.vue.d.ts","sourceRoot":"","sources":["../src/RadioGroup.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioGroup.vue.d.ts","sourceRoot":"","sources":["../src/RadioGroup.vue"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;;;;;;AAwK/C,wBASG"}
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.philaRadio[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-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)}.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.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export interface RadioProps extends BaseProps {
|
|
|
5
5
|
name?: string;
|
|
6
6
|
value: string;
|
|
7
7
|
text: string;
|
|
8
|
+
tooltip?: string;
|
|
8
9
|
modelValue?: string;
|
|
9
10
|
disabled?: boolean;
|
|
10
11
|
error?: boolean;
|
|
@@ -13,7 +14,7 @@ export interface RadioGroupProps extends BaseProps {
|
|
|
13
14
|
groupLabel: string;
|
|
14
15
|
description?: string;
|
|
15
16
|
choices: RadioChoice[];
|
|
16
|
-
modelValue?: string
|
|
17
|
+
modelValue?: Record<string, boolean>;
|
|
17
18
|
error?: boolean;
|
|
18
19
|
errorMessage?: string;
|
|
19
20
|
disabled?: boolean;
|
|
@@ -22,5 +23,6 @@ export type RadioChoice = {
|
|
|
22
23
|
text: string;
|
|
23
24
|
value: string;
|
|
24
25
|
disabled?: boolean;
|
|
26
|
+
tooltip?: string;
|
|
25
27
|
};
|
|
26
28
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),s=require("@phila/phila-ui-core"),_=require("@phila/phila-ui-core/icons"),I=["disabled"],x=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=r=>"href"in r&&r.href!==void 0||"to"in r&&r.to!==void 0,n=e.computed(()=>s.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}:{}),c=e.computed(()=>({icon:o.icon,src:o.src,iconRight:o.iconRight,iconOnly:o.iconOnly,text:o.text,size:o.size}));return(r,d)=>t(o)?(e.openBlock(),e.createBlock(e.unref(s.BaseLink),e.mergeProps({key:0},{...a.value,...r.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.ActionContent),e.normalizeProps(e.guardReactiveProps(c.value)),{default:e.withCtx(()=>[e.renderSlot(r.$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},r.$attrs),[e.createVNode(e.unref(s.ActionContent),e.normalizeProps(e.guardReactiveProps(c.value)),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])]),_:3},16)],16,I))}}),D=["id"],O={key:0,class:"tooltip__tail","aria-hidden":"true"},P={key:1,class:"tooltip__plain-row has-text-body-small"},T={key:0,class:"tooltip__title-row"},L={key:0},M=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(()=>s.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",O)):e.createCommentVNode("",!0),l.type==="plain"?(e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(n.$slots,"default",{},void 0,!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(x),{key:0,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(_.IconClose),"aria-label":"Dismiss tooltip",onClick:a[0]||(a[0]=c=>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",L,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(x),{key:1,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(_.IconClose),"aria-label":"Dismiss tooltip",onClick:a[1]||(a[1]=c=>n.$emit("dismiss"))},null,8,["icon"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},void 0,!0)],64))],10,D))}}),N=(l,o)=>{const t=l.__vccOpts||l;for(const[n,a]of o)t[n]=a;return t},U=N(M,[["__scopeId","data-v-af4a0398"]]),j=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),c=e.ref(null),r=e.ref(null),d=e.ref("top-center"),h=e.ref(0),g=()=>{const i=c.value?.getBoundingClientRect();if(!i)return"top-center";const{innerWidth:v,innerHeight:b}=window,k=i.top,$=b-i.bottom,B=r.value?.firstElementChild?.getBoundingClientRect().height??0,S=(B>0?k>=B:k>=$)?"top":"bottom",C=i.left+i.width/2,z=C<v/3?"left":C>v*2/3?"right":"center";return`${S}-${z}`},p=i=>{i.key==="Escape"&&f()},m=i=>{c.value&&!c.value.contains(i.target)&&f()};function u(){const i=r.value?.firstElementChild?.getBoundingClientRect();if(!i)return;const v=8,b=i.right-(window.innerWidth-v),k=v-i.left;b<=0&&k<=0||(h.value=window.innerWidth/2-(i.left+i.width/2))}const y=async()=>{t.placement==="auto"?d.value=g():d.value=t.placement,h.value=0,a.value=!0,document.addEventListener("keydown",p),t.trigger==="click"&&document.addEventListener("click",m),await e.nextTick(),u()},f=()=>{a.value=!1,document.removeEventListener("keydown",p),document.removeEventListener("click",m)},w=()=>{a.value?f():y()};e.onUnmounted(f),o({show:y,hide:f});const R=e.computed(()=>({type:t.type,color:t.color,tail:t.tail,placement:d.value,title:t.title,dismissable:t.dismissable}));return(i,v)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({ref_key:"wrapperEl",ref:c,class:e.unref(s.cn)("tooltip-trigger",t.className)},l.trigger==="click"?{onClick:w}:{onMouseenter:y,onMouseleave:f,onFocusin:y,onFocusout:f}),[e.renderSlot(i.$slots,"default",{tooltipId:e.unref(n),isOpen:a.value},void 0,!0),e.createElementVNode("span",{ref_key:"positionerEl",ref:r,class:e.normalizeClass(["tooltip-trigger__positioner",`tooltip-trigger__positioner--${d.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(U,e.mergeProps(R.value,{id:e.unref(n),onDismiss:f}),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"body",{},void 0,!0)]),_:3},16,["id"])],6)],16))}}),q=N(j,[["__scopeId","data-v-b3f93b8c"]]),F={class:"philaRadio-row"},W=["for"],A=["id","name","value","checked","disabled"],G={type:"button",class:"philaRadio__info","aria-label":"More information"},H=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,n=o,a=s.generateRandomId(),c=e.computed(()=>t.modelValue!==void 0?t.modelValue===t.value:void 0);function r(){n("update:modelValue",t.value)}const d=e.computed(()=>s.cn("philaRadio","has-text-body-default",t.className,!t.disabled&&"philaRadio-enabled",t.disabled&&"philaRadio-disabled",t.error&&"philaRadio-error"));return(h,g)=>(e.openBlock(),e.createElementBlock("span",F,[e.createElementVNode("label",{class:e.normalizeClass(d.value),for:e.unref(a)},[g[0]||(g[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:c.value,disabled:t.disabled,onChange:r},null,40,A)],10,W),t.tooltip?(e.openBlock(),e.createBlock(e.unref(q),{key:0,trigger:"hover",class:"philaRadio__tooltip"},{body:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.tooltip),1)]),default:e.withCtx(()=>[e.createElementVNode("button",G,[e.createVNode(e.unref(s.Icon),{icon:e.unref(_.IconCircleInfo),size:"small",inline:"",decorative:""},null,8,["icon"])])]),_:1})):e.createCommentVNode("",!0)]))}}),V=(l,o)=>{const t=l.__vccOpts||l;for(const[n,a]of o)t[n]=a;return t},E=V(H,[["__scopeId","data-v-305d0fad"]]),K={class:"labels-container"},X={class:"has-text-body-default"},J={key:0,class:"error-message has-text-error content"},Q=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,n=o,a=s.generateRandomId(),c=e.computed(()=>{const p=Object.entries(t.modelValue??{}).filter(([,m])=>m);return p.length>1,p[0]?.[0]??""}),r=e.computed(()=>s.cn("group-container",t.className)),d=e.computed(()=>s.cn("radio-container",t.error&&"radio-container-error has-background-error")),h=e.computed(()=>s.cn("has-text-label-default",t.error&&"has-text-error"));function g(p){const m={};for(const u of t.choices)m[String(u.value)]=String(u.value)===p;n("update:modelValue",m)}return(p,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.value)},[e.createElementVNode("div",K,[e.createElementVNode("span",{class:e.normalizeClass(h.value)},e.toDisplayString(l.groupLabel),3),e.createElementVNode("span",X,e.toDisplayString(l.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(d.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.choices,(u,y)=>(e.openBlock(),e.createBlock(E,{key:e.unref(a)+y,name:e.unref(a),value:u.value,text:u.text,tooltip:u.tooltip,"model-value":c.value,disabled:t.disabled||u.disabled,error:t.error,"onUpdate:modelValue":g},null,8,["name","value","text","tooltip","model-value","disabled","error"]))),128)),t.error?(e.openBlock(),e.createElementBlock("div",J,[e.createVNode(e.unref(s.Icon),{style:{height:"fit-content",width:"fit-content",padding:"0"},size:"large",inline:"","aria-hidden":"true",icon:e.unref(_.IconCircleExclamation)},null,8,["icon"]),e.createTextVNode(" "+e.toDisplayString(l.errorMessage),1)])):e.createCommentVNode("",!0)],2)],2))}}),Y=V(Q,[["__scopeId","data-v-af0e1574"]]);exports.Radio=E;exports.RadioGroup=Y;
|
package/dist/index.mjs
CHANGED
|
@@ -1,23 +1,262 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import { defineComponent as E, useId as Z, ref as N, onUnmounted as ee, computed as p, createElementBlock as c, openBlock as r, mergeProps as L, unref as i, renderSlot as R, createElementVNode as u, withModifiers as te, normalizeStyle as oe, normalizeClass as C, createVNode as V, withCtx as B, nextTick as ae, createCommentVNode as y, createBlock as z, Fragment as F, toDisplayString as b, normalizeProps as P, guardReactiveProps as T, createTextVNode as I, renderList as le } from "vue";
|
|
2
|
+
import { cn as k, BaseLink as ie, ActionContent as U, generateRandomId as A, Icon as G } from "@phila/phila-ui-core";
|
|
3
|
+
import { IconClose as W, IconCircleInfo as se, IconCircleExclamation as ne } from "@phila/phila-ui-core/icons";
|
|
4
|
+
import './index.css';const re = ["disabled"], j = /* @__PURE__ */ E({
|
|
5
|
+
inheritAttrs: !1,
|
|
6
|
+
__name: "PhlButton",
|
|
7
|
+
props: {
|
|
8
|
+
href: {},
|
|
9
|
+
to: {},
|
|
10
|
+
target: {},
|
|
11
|
+
rel: {},
|
|
12
|
+
disabled: { type: Boolean, default: !1 },
|
|
13
|
+
clickTarget: {},
|
|
14
|
+
variant: { default: "primary" },
|
|
15
|
+
size: { default: "medium" },
|
|
16
|
+
iconOnly: { type: Boolean, default: !1 },
|
|
17
|
+
iconRight: { type: Boolean },
|
|
18
|
+
text: {},
|
|
19
|
+
className: {},
|
|
20
|
+
icon: {},
|
|
21
|
+
src: {},
|
|
22
|
+
svgRaw: {}
|
|
23
|
+
},
|
|
24
|
+
setup(o) {
|
|
25
|
+
const t = o, e = (n) => "href" in n && n.href !== void 0 || "to" in n && n.to !== void 0, l = p(() => k(
|
|
26
|
+
"phila-button",
|
|
27
|
+
`phila-button--${t.variant}`,
|
|
28
|
+
t.size && `is-${t.size}`,
|
|
29
|
+
t.iconOnly && "icon-button",
|
|
30
|
+
t.iconOnly && t.variant === "standard" && "icon-button--standard",
|
|
31
|
+
t.className
|
|
32
|
+
)), a = p(() => e(t) ? "to" in t && t.to !== void 0 ? {
|
|
33
|
+
to: t.to,
|
|
34
|
+
disabled: t.disabled,
|
|
35
|
+
className: l.value
|
|
36
|
+
} : {
|
|
37
|
+
href: t.href,
|
|
38
|
+
target: t.target,
|
|
39
|
+
rel: t.rel,
|
|
40
|
+
disabled: t.disabled,
|
|
41
|
+
className: l.value
|
|
42
|
+
} : {}), d = p(
|
|
43
|
+
() => ({
|
|
44
|
+
icon: t.icon,
|
|
45
|
+
src: t.src,
|
|
46
|
+
iconRight: t.iconRight,
|
|
47
|
+
iconOnly: t.iconOnly,
|
|
48
|
+
text: t.text,
|
|
49
|
+
size: t.size
|
|
50
|
+
})
|
|
51
|
+
);
|
|
52
|
+
return (n, m) => e(t) ? (r(), z(i(ie), L({ key: 0 }, { ...a.value, ...n.$attrs }, { role: "button" }), {
|
|
53
|
+
default: B(() => [
|
|
54
|
+
V(i(U), P(T(d.value)), {
|
|
55
|
+
default: B(() => [
|
|
56
|
+
R(n.$slots, "default", {}, () => [
|
|
57
|
+
I(b(t.text), 1)
|
|
58
|
+
])
|
|
59
|
+
]),
|
|
60
|
+
_: 3
|
|
61
|
+
}, 16)
|
|
62
|
+
]),
|
|
63
|
+
_: 3
|
|
64
|
+
}, 16)) : (r(), c("button", L({
|
|
65
|
+
key: 1,
|
|
66
|
+
type: "button",
|
|
67
|
+
disabled: t.disabled,
|
|
68
|
+
class: l.value
|
|
69
|
+
}, n.$attrs), [
|
|
70
|
+
V(i(U), P(T(d.value)), {
|
|
71
|
+
default: B(() => [
|
|
72
|
+
R(n.$slots, "default", {}, () => [
|
|
73
|
+
I(b(t.text), 1)
|
|
74
|
+
])
|
|
75
|
+
]),
|
|
76
|
+
_: 3
|
|
77
|
+
}, 16)
|
|
78
|
+
], 16, re));
|
|
79
|
+
}
|
|
80
|
+
}), de = ["id"], ce = {
|
|
81
|
+
key: 0,
|
|
82
|
+
class: "tooltip__tail",
|
|
83
|
+
"aria-hidden": "true"
|
|
84
|
+
}, ue = {
|
|
85
|
+
key: 1,
|
|
86
|
+
class: "tooltip__plain-row has-text-body-small"
|
|
87
|
+
}, pe = {
|
|
88
|
+
key: 0,
|
|
89
|
+
class: "tooltip__title-row"
|
|
90
|
+
}, me = { key: 0 }, ve = /* @__PURE__ */ E({
|
|
91
|
+
__name: "TooltipBubble",
|
|
92
|
+
props: {
|
|
93
|
+
id: {},
|
|
94
|
+
type: { default: "plain" },
|
|
95
|
+
color: { default: "default" },
|
|
96
|
+
tail: { type: Boolean, default: !1 },
|
|
97
|
+
placement: { default: "top-center" },
|
|
98
|
+
title: {},
|
|
99
|
+
dismissable: { type: Boolean, default: !1 },
|
|
100
|
+
className: {}
|
|
101
|
+
},
|
|
102
|
+
emits: ["dismiss"],
|
|
103
|
+
setup(o) {
|
|
104
|
+
const t = o, e = p(
|
|
105
|
+
() => k(
|
|
106
|
+
"tooltip",
|
|
107
|
+
"content",
|
|
108
|
+
"resets-link-colors",
|
|
109
|
+
`tooltip--${t.type}`,
|
|
110
|
+
`tooltip--${t.color}`,
|
|
111
|
+
t.tail && `tooltip--${t.placement}`,
|
|
112
|
+
t.className
|
|
113
|
+
)
|
|
114
|
+
);
|
|
115
|
+
return (l, a) => (r(), c("div", {
|
|
116
|
+
id: o.id,
|
|
117
|
+
class: C(e.value),
|
|
118
|
+
role: "tooltip"
|
|
119
|
+
}, [
|
|
120
|
+
o.tail ? (r(), c("div", ce)) : y("", !0),
|
|
121
|
+
o.type === "plain" ? (r(), c("div", ue, [
|
|
122
|
+
R(l.$slots, "default", {}, void 0, !0),
|
|
123
|
+
o.dismissable ? (r(), z(i(j), {
|
|
124
|
+
key: 0,
|
|
125
|
+
class: "tooltip__dismiss",
|
|
126
|
+
variant: "standard",
|
|
127
|
+
size: "extra-small",
|
|
128
|
+
"icon-only": !0,
|
|
129
|
+
icon: i(W),
|
|
130
|
+
"aria-label": "Dismiss tooltip",
|
|
131
|
+
onClick: a[0] || (a[0] = (d) => l.$emit("dismiss"))
|
|
132
|
+
}, null, 8, ["icon"])) : y("", !0)
|
|
133
|
+
])) : (r(), c(F, { key: 2 }, [
|
|
134
|
+
o.title || o.dismissable ? (r(), c("div", pe, [
|
|
135
|
+
o.title ? (r(), c("h6", me, b(o.title), 1)) : y("", !0),
|
|
136
|
+
o.dismissable ? (r(), z(i(j), {
|
|
137
|
+
key: 1,
|
|
138
|
+
class: "tooltip__dismiss",
|
|
139
|
+
variant: "standard",
|
|
140
|
+
size: "extra-small",
|
|
141
|
+
"icon-only": !0,
|
|
142
|
+
icon: i(W),
|
|
143
|
+
"aria-label": "Dismiss tooltip",
|
|
144
|
+
onClick: a[1] || (a[1] = (d) => l.$emit("dismiss"))
|
|
145
|
+
}, null, 8, ["icon"])) : y("", !0)
|
|
146
|
+
])) : y("", !0),
|
|
147
|
+
R(l.$slots, "default", {}, void 0, !0)
|
|
148
|
+
], 64))
|
|
149
|
+
], 10, de));
|
|
150
|
+
}
|
|
151
|
+
}), H = (o, t) => {
|
|
152
|
+
const e = o.__vccOpts || o;
|
|
153
|
+
for (const [l, a] of t)
|
|
154
|
+
e[l] = a;
|
|
155
|
+
return e;
|
|
156
|
+
}, fe = /* @__PURE__ */ H(ve, [["__scopeId", "data-v-af4a0398"]]), he = /* @__PURE__ */ E({
|
|
157
|
+
__name: "Tooltip",
|
|
158
|
+
props: {
|
|
159
|
+
trigger: { default: "hover" },
|
|
160
|
+
type: { default: "plain" },
|
|
161
|
+
color: { default: "default" },
|
|
162
|
+
tail: { type: Boolean, default: !1 },
|
|
163
|
+
placement: { default: "auto" },
|
|
164
|
+
title: {},
|
|
165
|
+
dismissable: { type: Boolean },
|
|
166
|
+
className: {}
|
|
167
|
+
},
|
|
168
|
+
setup(o, { expose: t }) {
|
|
169
|
+
const e = o, l = Z(), a = N(!1), d = N(null), n = N(null), m = N("top-center"), x = N(0), w = () => {
|
|
170
|
+
const s = d.value?.getBoundingClientRect();
|
|
171
|
+
if (!s) return "top-center";
|
|
172
|
+
const { innerWidth: g, innerHeight: M } = window, O = s.top, J = M - s.bottom, S = n.value?.firstElementChild?.getBoundingClientRect().height ?? 0, Q = (S > 0 ? O >= S : O >= J) ? "top" : "bottom", D = s.left + s.width / 2, Y = D < g / 3 ? "left" : D > g * 2 / 3 ? "right" : "center";
|
|
173
|
+
return `${Q}-${Y}`;
|
|
174
|
+
}, f = (s) => {
|
|
175
|
+
s.key === "Escape" && _();
|
|
176
|
+
}, h = (s) => {
|
|
177
|
+
d.value && !d.value.contains(s.target) && _();
|
|
178
|
+
};
|
|
179
|
+
function v() {
|
|
180
|
+
const s = n.value?.firstElementChild?.getBoundingClientRect();
|
|
181
|
+
if (!s) return;
|
|
182
|
+
const g = 8, M = s.right - (window.innerWidth - g), O = g - s.left;
|
|
183
|
+
M <= 0 && O <= 0 || (x.value = window.innerWidth / 2 - (s.left + s.width / 2));
|
|
184
|
+
}
|
|
185
|
+
const $ = async () => {
|
|
186
|
+
e.placement === "auto" ? m.value = w() : m.value = e.placement, x.value = 0, a.value = !0, document.addEventListener("keydown", f), e.trigger === "click" && document.addEventListener("click", h), await ae(), v();
|
|
187
|
+
}, _ = () => {
|
|
188
|
+
a.value = !1, document.removeEventListener("keydown", f), document.removeEventListener("click", h);
|
|
189
|
+
}, K = () => {
|
|
190
|
+
a.value ? _() : $();
|
|
191
|
+
};
|
|
192
|
+
ee(_), t({ show: $, hide: _ });
|
|
193
|
+
const X = p(() => ({
|
|
194
|
+
type: e.type,
|
|
195
|
+
color: e.color,
|
|
196
|
+
tail: e.tail,
|
|
197
|
+
placement: m.value,
|
|
198
|
+
title: e.title,
|
|
199
|
+
dismissable: e.dismissable
|
|
200
|
+
}));
|
|
201
|
+
return (s, g) => (r(), c("span", L(
|
|
202
|
+
{
|
|
203
|
+
ref_key: "wrapperEl",
|
|
204
|
+
ref: d,
|
|
205
|
+
class: i(k)("tooltip-trigger", e.className)
|
|
206
|
+
},
|
|
207
|
+
o.trigger === "click" ? { onClick: K } : { onMouseenter: $, onMouseleave: _, onFocusin: $, onFocusout: _ }
|
|
208
|
+
), [
|
|
209
|
+
R(s.$slots, "default", {
|
|
210
|
+
tooltipId: i(l),
|
|
211
|
+
isOpen: a.value
|
|
212
|
+
}, void 0, !0),
|
|
213
|
+
u("span", {
|
|
214
|
+
ref_key: "positionerEl",
|
|
215
|
+
ref: n,
|
|
216
|
+
class: C(["tooltip-trigger__positioner", `tooltip-trigger__positioner--${m.value}`]),
|
|
217
|
+
style: oe({
|
|
218
|
+
visibility: a.value ? "visible" : "hidden",
|
|
219
|
+
"--positioner-gap": o.tail ? "var(--spacing-l)" : "0.5rem",
|
|
220
|
+
"--adjust-x": `${x.value}px`
|
|
221
|
+
}),
|
|
222
|
+
onClick: g[0] || (g[0] = te(() => {
|
|
223
|
+
}, ["stop"]))
|
|
224
|
+
}, [
|
|
225
|
+
V(fe, L(X.value, {
|
|
226
|
+
id: i(l),
|
|
227
|
+
onDismiss: _
|
|
228
|
+
}), {
|
|
229
|
+
default: B(() => [
|
|
230
|
+
R(s.$slots, "body", {}, void 0, !0)
|
|
231
|
+
]),
|
|
232
|
+
_: 3
|
|
233
|
+
}, 16, ["id"])
|
|
234
|
+
], 6)
|
|
235
|
+
], 16));
|
|
236
|
+
}
|
|
237
|
+
}), _e = /* @__PURE__ */ H(he, [["__scopeId", "data-v-b3f93b8c"]]), ge = { class: "philaRadio-row" }, be = ["for"], ye = ["id", "name", "value", "checked", "disabled"], ke = {
|
|
238
|
+
type: "button",
|
|
239
|
+
class: "philaRadio__info",
|
|
240
|
+
"aria-label": "More information"
|
|
241
|
+
}, xe = /* @__PURE__ */ E({
|
|
4
242
|
__name: "Radio",
|
|
5
243
|
props: {
|
|
6
244
|
name: {},
|
|
7
245
|
value: {},
|
|
8
246
|
text: {},
|
|
247
|
+
tooltip: {},
|
|
9
248
|
modelValue: {},
|
|
10
249
|
disabled: { type: Boolean },
|
|
11
250
|
error: { type: Boolean },
|
|
12
251
|
className: {}
|
|
13
252
|
},
|
|
14
253
|
emits: ["update:modelValue"],
|
|
15
|
-
setup(
|
|
16
|
-
const e =
|
|
17
|
-
function
|
|
18
|
-
|
|
254
|
+
setup(o, { emit: t }) {
|
|
255
|
+
const e = o, l = t, a = A(), d = p(() => e.modelValue !== void 0 ? e.modelValue === e.value : void 0);
|
|
256
|
+
function n() {
|
|
257
|
+
l("update:modelValue", e.value);
|
|
19
258
|
}
|
|
20
|
-
const
|
|
259
|
+
const m = p(() => k(
|
|
21
260
|
"philaRadio",
|
|
22
261
|
"has-text-body-default",
|
|
23
262
|
e.className,
|
|
@@ -25,59 +264,75 @@ import './index.css';const I = ["for"], E = ["id", "name", "value", "checked", "
|
|
|
25
264
|
e.disabled && "philaRadio-disabled",
|
|
26
265
|
e.error && "philaRadio-error"
|
|
27
266
|
));
|
|
28
|
-
return (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
s[0] || (s[0] = o("svg", {
|
|
33
|
-
class: "radio-svg",
|
|
34
|
-
width: "20",
|
|
35
|
-
height: "20",
|
|
36
|
-
viewBox: "0 0 20 20",
|
|
37
|
-
fill: "none",
|
|
38
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
39
|
-
"aria-hidden": "true"
|
|
267
|
+
return (x, w) => (r(), c("span", ge, [
|
|
268
|
+
u("label", {
|
|
269
|
+
class: C(m.value),
|
|
270
|
+
for: i(a)
|
|
40
271
|
}, [
|
|
41
|
-
|
|
42
|
-
class: "radio-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
272
|
+
w[0] || (w[0] = u("svg", {
|
|
273
|
+
class: "radio-svg",
|
|
274
|
+
width: "20",
|
|
275
|
+
height: "20",
|
|
276
|
+
viewBox: "0 0 20 20",
|
|
277
|
+
fill: "none",
|
|
278
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
279
|
+
"aria-hidden": "true"
|
|
280
|
+
}, [
|
|
281
|
+
u("circle", {
|
|
282
|
+
class: "radio-bg",
|
|
283
|
+
cx: "10",
|
|
284
|
+
cy: "10",
|
|
285
|
+
r: "9.5"
|
|
286
|
+
}),
|
|
287
|
+
u("circle", {
|
|
288
|
+
class: "radio-dot",
|
|
289
|
+
cx: "10",
|
|
290
|
+
cy: "10",
|
|
291
|
+
r: "4"
|
|
292
|
+
})
|
|
293
|
+
], -1)),
|
|
294
|
+
I(" " + b(e.text) + " ", 1),
|
|
295
|
+
u("input", {
|
|
296
|
+
id: i(a),
|
|
297
|
+
type: "radio",
|
|
298
|
+
name: e.name,
|
|
299
|
+
value: e.value,
|
|
300
|
+
checked: d.value,
|
|
301
|
+
disabled: e.disabled,
|
|
302
|
+
onChange: n
|
|
303
|
+
}, null, 40, ye)
|
|
304
|
+
], 10, be),
|
|
305
|
+
e.tooltip ? (r(), z(i(_e), {
|
|
306
|
+
key: 0,
|
|
307
|
+
trigger: "hover",
|
|
308
|
+
class: "philaRadio__tooltip"
|
|
309
|
+
}, {
|
|
310
|
+
body: B(() => [
|
|
311
|
+
I(b(e.tooltip), 1)
|
|
312
|
+
]),
|
|
313
|
+
default: B(() => [
|
|
314
|
+
u("button", ke, [
|
|
315
|
+
V(i(G), {
|
|
316
|
+
icon: i(se),
|
|
317
|
+
size: "small",
|
|
318
|
+
inline: "",
|
|
319
|
+
decorative: ""
|
|
320
|
+
}, null, 8, ["icon"])
|
|
321
|
+
])
|
|
322
|
+
]),
|
|
323
|
+
_: 1
|
|
324
|
+
})) : y("", !0)
|
|
325
|
+
]));
|
|
65
326
|
}
|
|
66
|
-
}),
|
|
67
|
-
const e =
|
|
68
|
-
for (const [
|
|
69
|
-
e[
|
|
327
|
+
}), q = (o, t) => {
|
|
328
|
+
const e = o.__vccOpts || o;
|
|
329
|
+
for (const [l, a] of t)
|
|
330
|
+
e[l] = a;
|
|
70
331
|
return e;
|
|
71
|
-
},
|
|
72
|
-
var $ = {
|
|
73
|
-
prefix: "fas",
|
|
74
|
-
iconName: "circle-exclamation",
|
|
75
|
-
icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
|
|
76
|
-
};
|
|
77
|
-
const G = { class: "labels-container" }, U = { class: "has-text-body-default" }, D = {
|
|
332
|
+
}, we = /* @__PURE__ */ q(xe, [["__scopeId", "data-v-305d0fad"]]), $e = { class: "labels-container" }, Ce = { class: "has-text-body-default" }, Be = {
|
|
78
333
|
key: 0,
|
|
79
334
|
class: "error-message has-text-error content"
|
|
80
|
-
},
|
|
335
|
+
}, Re = /* @__PURE__ */ E({
|
|
81
336
|
__name: "RadioGroup",
|
|
82
337
|
props: {
|
|
83
338
|
groupLabel: {},
|
|
@@ -90,48 +345,54 @@ const G = { class: "labels-container" }, U = { class: "has-text-body-default" },
|
|
|
90
345
|
className: {}
|
|
91
346
|
},
|
|
92
347
|
emits: ["update:modelValue"],
|
|
93
|
-
setup(
|
|
94
|
-
const e =
|
|
95
|
-
|
|
96
|
-
|
|
348
|
+
setup(o, { emit: t }) {
|
|
349
|
+
const e = o, l = t, a = A(), d = p(() => {
|
|
350
|
+
const f = Object.entries(e.modelValue ?? {}).filter(([, h]) => h);
|
|
351
|
+
return f.length > 1, f[0]?.[0] ?? "";
|
|
352
|
+
}), n = p(() => k("group-container", e.className)), m = p(() => k("radio-container", e.error && "radio-container-error has-background-error")), x = p(() => k("has-text-label-default", e.error && "has-text-error"));
|
|
353
|
+
function w(f) {
|
|
354
|
+
const h = {};
|
|
355
|
+
for (const v of e.choices) h[String(v.value)] = String(v.value) === f;
|
|
356
|
+
l("update:modelValue", h);
|
|
97
357
|
}
|
|
98
|
-
return (
|
|
99
|
-
class:
|
|
358
|
+
return (f, h) => (r(), c("div", {
|
|
359
|
+
class: C(n.value)
|
|
100
360
|
}, [
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
class:
|
|
104
|
-
},
|
|
105
|
-
|
|
361
|
+
u("div", $e, [
|
|
362
|
+
u("span", {
|
|
363
|
+
class: C(x.value)
|
|
364
|
+
}, b(o.groupLabel), 3),
|
|
365
|
+
u("span", Ce, b(o.description), 1)
|
|
106
366
|
]),
|
|
107
|
-
|
|
108
|
-
class:
|
|
367
|
+
u("div", {
|
|
368
|
+
class: C(m.value)
|
|
109
369
|
}, [
|
|
110
|
-
(
|
|
111
|
-
key:
|
|
112
|
-
name:
|
|
113
|
-
value:
|
|
114
|
-
text:
|
|
115
|
-
|
|
116
|
-
|
|
370
|
+
(r(!0), c(F, null, le(e.choices, (v, $) => (r(), z(we, {
|
|
371
|
+
key: i(a) + $,
|
|
372
|
+
name: i(a),
|
|
373
|
+
value: v.value,
|
|
374
|
+
text: v.text,
|
|
375
|
+
tooltip: v.tooltip,
|
|
376
|
+
"model-value": d.value,
|
|
377
|
+
disabled: e.disabled || v.disabled,
|
|
117
378
|
error: e.error,
|
|
118
|
-
"onUpdate:modelValue":
|
|
119
|
-
}, null, 8, ["name", "value", "text", "model-value", "disabled", "error"]))), 128)),
|
|
120
|
-
e.error ? (
|
|
121
|
-
|
|
379
|
+
"onUpdate:modelValue": w
|
|
380
|
+
}, null, 8, ["name", "value", "text", "tooltip", "model-value", "disabled", "error"]))), 128)),
|
|
381
|
+
e.error ? (r(), c("div", Be, [
|
|
382
|
+
V(i(G), {
|
|
122
383
|
style: { height: "fit-content", width: "fit-content", padding: "0" },
|
|
123
384
|
size: "large",
|
|
124
385
|
inline: "",
|
|
125
386
|
"aria-hidden": "true",
|
|
126
|
-
|
|
127
|
-
}, null, 8, ["icon
|
|
128
|
-
|
|
129
|
-
])) :
|
|
387
|
+
icon: i(ne)
|
|
388
|
+
}, null, 8, ["icon"]),
|
|
389
|
+
I(" " + b(o.errorMessage), 1)
|
|
390
|
+
])) : y("", !0)
|
|
130
391
|
], 2)
|
|
131
392
|
], 2));
|
|
132
393
|
}
|
|
133
|
-
}),
|
|
394
|
+
}), Ie = /* @__PURE__ */ q(Re, [["__scopeId", "data-v-af0e1574"]]);
|
|
134
395
|
export {
|
|
135
|
-
|
|
136
|
-
|
|
396
|
+
we as Radio,
|
|
397
|
+
Ie as RadioGroup
|
|
137
398
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-radio",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-beta.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A radio input component for Phila UI.",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,7 +28,8 @@
|
|
|
28
28
|
"vue": "^3.0.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@phila/phila-ui-core": "
|
|
31
|
+
"@phila/phila-ui-core": "3.0.0-beta.9",
|
|
32
|
+
"@phila/phila-ui-tooltip": "0.1.0-beta.10"
|
|
32
33
|
},
|
|
33
34
|
"devDependencies": {
|
|
34
35
|
"@types/node": "^24.0.0",
|