vue3-radio-card/dist/radio-card.umd.cjs

A tailwind based radio card component for Vue3

(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o["vue3-radio-card"]={},o.Vue))})(this,function(o,e){"use strict";const s=t=>(e.pushScopeId("data-v-2089dda0"),t=t(),e.popScopeId(),t),c={class:"w-full max-w-screen-md"},i={class:"space-y-6"},m={key:0,class:"flex items-center justify-between py-4 border-b border-gray-300"},p={class:"text-2xl text-gray-700 mr-4"},f={class:"grid sm:grid-cols-4 gap-6"},h=["onClick","for"],g={class:"text-black dark:text-white"},u=["name","id","value","checked"],_=s(()=>e.createElementVNode("span",{"aria-hidden":"true",class:"hidden absolute inset-0 border-2 border-green-500 bg-green-200 bg-opacity-10 rounded-lg"},[e.createElementVNode("span",{class:"absolute top-2 right-2 h-4 w-4 md:h-6 md:w-6 inline-flex items-center justify-center rounded-full bg-green-200"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",class:"h-5 w-5 text-green-600"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z","clip-rule":"evenodd"})])])],-1)),b=((t,d)=>{const n=t.__vccOpts||t;for(const[a,r]of d)n[a]=r;return n})(e.defineComponent({__name:"RadioCard",props:e.mergeModels({options:Array,title:String},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const d=e.useModel(t,"modelValue");function n(a){d.value=a}return(a,r)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("form",c,[e.createElementVNode("fieldset",i,[t.title?(e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("legend",p,e.toDisplayString(t.title),1)])):e.createCommentVNode("",!0),e.createElementVNode("div",f,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,l=>(e.openBlock(),e.createElementBlock("label",{onClick:y=>n(l.value),for:l.value,class:"relative flex flex-col bg-white dark:bg-slate-800 hover:bg-slate-100 hover:dark:bg-slate-700 p-5 rounded-lg shadow-md cursor-pointer"},[e.renderSlot(a.$slots,"item",e.normalizeProps(e.guardReactiveProps(l)),()=>[e.createElementVNode("span",g,e.toDisplayString(l.label),1)],!0),e.createElementVNode("input",{type:"radio",name:l.value,id:l.value,value:l.value,class:"absolute h-0 w-0 appearance-none",checked:l.value===d.value},null,8,u),_],8,h))),256))])])])]))}}),[["__scopeId","data-v-2089dda0"]]);o.RadioCard=b,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});