@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
2 lines (1 loc) • 10.9 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@vueuse/core"),require("dot-prop")):"function"==typeof define&&define.amd?define(["vue","@vueuse/core","dot-prop"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvRadioGroup=t(e.vue,e.core,e.dotProp)}(this,function(e,t,l){"use strict";var a=(e=>(e.local="local",e.session="session",e))(a||{}),o=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(o||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{}),r=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(r||{});const u=Symbol.for("volver"),d=Symbol.for("radioGroup"),s={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},v={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},f={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},p={disabled:{type:Boolean,default:!1}},c={required:{type:Boolean,default:!1}},m={label:{type:[String,Number],default:void 0}},b={readonly:{type:Boolean,default:!1}},y={modifiers:{type:[String,Array],default:void 0}},g={hintLabel:{type:String,default:""}},h={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}};i.before;const S={tabindex:{type:[String,Number],default:0}},L={id:[String,Number]};o.bottom;const O={...{...L,name:{type:String,required:!0}},...S,...s,...v,...g,...p,...b,...y,...m,...f,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}},k={...s,...v,...h,...g,...p,...b,...y,...m,...f,...c,modelValue:{type:[String,Array,Boolean,Number,Symbol],default:void 0},name:{type:String,required:!0},vertical:{type:Boolean,default:!1}};n.button,r.button,a.local;const V=k;function $(e,t,l){return B(e,t)}function B(e,t){if(e===t)return!0;if(e&&t&&"object"==typeof e&&"object"==typeof t){const l=Array.isArray(e),a=Array.isArray(t);let o,i,n;if(l&&a){if(i=e.length,i!==t.length)return!1;for(o=i;0!==o--;)if(!B(e[o],t[o]))return!1;return!0}if(l!==a)return!1;const r=e instanceof Date,u=t instanceof Date;if(r!==u)return!1;if(r&&u)return e.getTime()===t.getTime();const d=e instanceof RegExp,s=t instanceof RegExp;if(d!==s)return!1;if(d&&s)return e.toString()===t.toString();const v=Object.keys(e);if(i=v.length,i!==Object.keys(t).length)return!1;for(o=i;0!==o--;)if(!Object.prototype.hasOwnProperty.call(t,v[o]))return!1;for(o=i;0!==o--;)if(n=v[o],!B(e[n],t[n]))return!1;return!0}return Number.isNaN(e)&&Number.isNaN(t)}function R(e){return Array.isArray(e)?e.filter(e=>"string"==typeof e).join(" "):e}function P(t,l){const a=e.computed(()=>e.isRef(t)?t.value:t),o=e.computed(()=>R(a.value.invalidLabel)),i=e.computed(()=>R(a.value.validLabel)),n=e.computed(()=>a.value.loadingLabel),r=e.computed(()=>a.value.hintLabel),u=e.computed(()=>Boolean(a.value.loading&&(l.loading||n.value))),d=e.computed(()=>!u.value&&Boolean(a.value.invalid&&(l.invalid||o.value))),s=e.computed(()=>!u.value&&!d.value&&Boolean(a.value.valid&&(l.valid||i.value))),v=e.computed(()=>!u.value&&!d.value&&!s.value&&Boolean(l.hint||r.value)),f=e.computed(()=>d.value||s.value||u.value||v.value),p=e.computed(()=>({modelValue:a.value.modelValue,valid:a.value.valid,invalid:a.value.invalid,loading:a.value.loading})),c=e.defineComponent({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:f,invalidLabel:o,validLabel:i,loadingLabel:n,hintLabel:r,hasInvalidLabelOrSlot:d,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hasHintLabelOrSlot:v}),render(){if(this.isVisible){let t;return this.hasInvalidLabelOrSlot&&(t="alert"),this.hasValidLabelOrSlot&&(t="status"),this.hasLoadingLabelOrSlot?e.h(this.tag,{role:t},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?e.h(this.tag,{role:t},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?e.h(this.tag,{role:t},this.$slots.valid?.()??this.validLabel):e.h(this.tag,{role:t},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:d,hasHintLabelOrSlot:v,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hintSlotScope:p,HintSlot:c}}const x=O;function N(t,l){const{id:a}=e.toRefs(t),{group:o,isInGroup:i,getGroupOrLocalRef:n}=function(t){const l=e.inject(t,void 0),a=e.computed(()=>void 0!==l);return{group:l,isInGroup:a,getGroupOrLocalRef:function(t,a,o){const i=l?.[t];if(i)return e.computed({get:()=>i.value,set(e){i.value=e}});const n=e.toRef(a,t);return e.computed({get:()=>n.value,set(e){o&&o(`update:${t}`,e)}})}}}(d),r=n("modelValue",t,l),u=n("valid",t),s=n("invalid",t),v=e.computed(()=>Boolean(t.readonly||o?.readonly.value)),f=e.computed(()=>Boolean(t.disabled||o?.disabled.value));return{id:a,group:o,isInGroup:i,modelValue:r,valid:u,invalid:s,readonly:v,disabled:f}}function A(t,l,a){const o=e.inject(u,void 0),i=e.computed(()=>{if(o&&o.defaults.value?.[t])return o.defaults.value[t]});return e.computed(()=>{if(void 0===i.value)return a;const e=i.value,t=l,o=a;return Object.keys(t).reduce((l,a)=>{const i=o[a];if(l[a]=i,a in e){if(Array.isArray(t[a])){const o=t[a];if(o.length){o[0]===i&&(l[a]=e[a])}}if("function"==typeof t[a]){(0,t[a])()===i&&(l[a]=e[a])}if("object"==typeof t[a]){let o=t[a].default;"function"==typeof o&&(o=o()),"object"==typeof o?JSON.stringify(o)===JSON.stringify(i)&&(l[a]=e[a]):o===i&&(l[a]=e[a])}}return l},{})})}function C(t,l,a){return e.computed(()=>{const o={[t]:!0},i="string"==typeof l?.value?l.value.split(" "):l?.value;return i&&Array.isArray(i)&&i.forEach(e=>{e&&(o[`${t}--${e}`]=!0)}),a&&Object.keys(a.value).forEach(l=>{o[`${t}--${l}`]=e.unref(a.value[l])}),o})}const j=["for"],_=["id","name","disabled","value","tabindex","aria-invalid","aria-describedby","aria-errormessage"],w=e.defineComponent({name:"VvRadio",props:x,emits:["click","update:modelValue","change","blur"],setup(t,{emit:l}){const a=t,o=l,i=e.useSlots(),n=A("VvRadio",x,a),{id:r,disabled:u,readonly:d,modelValue:s,valid:v,invalid:f}=N(a,o),p=function(t){return e.computed(()=>String(t?.value||e.useId()))}(r),c=e.computed(()=>`${p.value}-hint`),m=e.computed(()=>y.value?-1:a.tabindex),b=e.ref(),y=e.computed(()=>u.value||d.value),g=e.computed(()=>!0===f.value||!0!==v.value&&void 0),h=e.computed(()=>Array.isArray(s.value)?function(e,t){if(null!=e&&t&&t.length)for(const l of t)if($(e,l))return!0;return!1}(a.value,s.value):$(a.value,s.value)),S=e.computed(()=>!["string","number","boolean"].includes(typeof a.value)||a.value),L=e.computed({get:()=>h.value?S.value:null,set(e){Array.isArray(s.value)?s.value=[a.value]:s.value=a.value,o("change",e)}}),{modifiers:O}=e.toRefs(a),k=C("vv-radio",O,e.computed(()=>({valid:v.value,invalid:f.value,disabled:u.value,readonly:d.value}))),{HintSlot:V,hasHintLabelOrSlot:B,hasInvalidLabelOrSlot:R,hintSlotScope:w}=P(n,i);return(t,l)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(k)),for:e.unref(p)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(p),ref_key:"input",ref:b,"onUpdate:modelValue":l[0]||(l[0]=t=>e.isRef(L)?L.value=t:null),type:"radio",class:"vv-radio__input",name:t.name,disabled:e.unref(y),value:e.unref(S),tabindex:e.unref(m),"aria-invalid":e.unref(g),"aria-describedby":e.unref(B)?e.unref(c):void 0,"aria-errormessage":e.unref(R)?e.unref(c):void 0},null,8,_),[[e.vModelRadio,e.unref(L)]]),e.renderSlot(t.$slots,"default",{value:e.unref(s)},()=>[e.createTextVNode(e.toDisplayString(t.label),1)]),e.createVNode(e.unref(V),{id:e.unref(c),class:"vv-radio__hint"},e.createSlots({_:2},[t.$slots.hint?{name:"hint",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps(e.unref(w))))]),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"loading",e.normalizeProps(e.guardReactiveProps(e.unref(w))))]),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"valid",e.normalizeProps(e.guardReactiveProps(e.unref(w))))]),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"invalid",e.normalizeProps(e.guardReactiveProps(e.unref(w))))]),key:"3"}:void 0]),1032,["id"])],10,j))}});const z=["textContent"],q={class:"vv-radio-group__wrapper"};return e.defineComponent({name:"VvRadioGroup",props:V,emits:["update:modelValue","change"],setup(a,{emit:o}){const i=a,n=o,r=e.useSlots(),u=A("VvRadioGroup",V,i),s=t.useVModel(i,"modelValue",n),{disabled:v,readonly:f,vertical:p,valid:c,invalid:m,modifiers:b}=e.toRefs(i);var y,g;y=d,g={modelValue:s,disabled:v,readonly:f,valid:c,invalid:m},e.provide(y,g);const{getOptionLabel:h,getOptionValue:S,isOptionDisabled:L}=function(t){const{options:a,labelKey:o,valueKey:i,disabledKey:n}=e.toRefs(t);return{options:a,getOptionLabel:e=>"string"==typeof e?e:"function"==typeof o.value?o.value(e):String(o.value?l.getProperty(e,o.value):e),getOptionValue:e=>"string"==typeof e?e:"function"==typeof i.value?i.value(e):i.value?l.getProperty(e,i.value):e,isOptionDisabled:e=>"string"!=typeof e&&("function"==typeof n.value?n.value(e):!!n.value&&Boolean(l.getProperty(e,n.value))),getOptionGrouped:e=>"string"==typeof e?[]:"object"==typeof e&&e&&"options"in e?e.options:[]}}(i),O=C("vv-radio-group",b,e.computed(()=>({disabled:v.value,readonly:f.value,required:i.required,horizontal:!p.value,valid:c.value,invalid:m.value})));const{HintSlot:k,hintSlotScope:$}=P(u,r);return(t,l)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(e.unref(O))},[t.label?(e.openBlock(),e.createElementBlock("legend",{key:0,textContent:e.toDisplayString(t.label)},null,8,z)):e.createCommentVNode("v-if",!0),e.createElementVNode("div",q,[t.options.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.options,(t,l)=>(e.openBlock(),e.createBlock(w,e.mergeProps({key:l},{ref_for:!0},function(e,t){return{id:`${i.name}_opt${t}`,name:i.name,label:h(e),value:S(e),required:i.required,disabled:L(e)}}(t,l)),null,16))),128)):e.renderSlot(t.$slots,"default",{key:1})]),e.createVNode(e.unref(k),{class:"vv-radio-group__hint"},e.createSlots({_:2},[t.$slots.hint?{name:"hint",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps(e.unref($))))]),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"loading",e.normalizeProps(e.guardReactiveProps(e.unref($))))]),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"valid",e.normalizeProps(e.guardReactiveProps(e.unref($))))]),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"invalid",e.normalizeProps(e.guardReactiveProps(e.unref($))))]),key:"3"}:void 0]),1024)],2))}})});