1import{aU as s,s as p,aL as c,bJ as r,I as e,e2 as B,c3 as m,cd as D,ce as V,fS as v,fT as n,dY as I,v as u,bb as J,fc as S,H as _,q as O,eO as W,ar as Z,bk as g,ak as y}from"./index-DcDh_618.js";import{_ as E}from"./UsageExample-9JFD51b5.js";import{V as G}from"./VCheckbox-7yzHHbsu.js";import"./VSlideGroupItem-B1jLk4BV.js";import"./upperFirst-nFmnOqP0.js";const k=t=>t.exampleMeta=` 2 { 3 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2070-83999&t=tC3y53U3XKPv8ZyJ-4" 4 } 5`,T={__name:"prop-colors",setup(t){const a=s("red"),i=s("primary");return(o,l)=>(c(),p(I,{flat:""},{default:r(()=>[e(B,null,{default:r(()=>[e(m,{fluid:""},{default:r(()=>[e(D,null,{default:r(()=>[e(V,{cols:"12",md:"6",sm:"6"},{default:r(()=>[e(v,{modelValue:a.value,"onUpdate:modelValue":l[0]||(l[0]=d=>a.value=d)},{default:r(()=>[e(n,{color:"red",label:"red",value:"red"}),e(n,{color:"red-darken-3",label:"red-darken-3",value:"red-darken-3"}),e(n,{color:"indigo",label:"indigo",value:"indigo"}),e(n,{color:"indigo-darken-3",label:"indigo-darken-3",value:"indigo-darken-3"}),e(n,{color:"orange",label:"orange",value:"orange"}),e(n,{color:"orange-darken-3",label:"orange-darken-3",value:"orange-darken-3"})]),_:1},8,["modelValue"])]),_:1}),e(V,{cols:"12",md:"6",sm:"6"},{default:r(()=>[e(v,{modelValue:i.value,"onUpdate:modelValue":l[1]||(l[1]=d=>i.value=d)},{default:r(()=>[e(n,{color:"primary",label:"primary",value:"primary"}),e(n,{color:"secondary",label:"secondary",value:"secondary"}),e(n,{color:"\ 6success",label:"success",value:"success"}),e(n,{color:"info",label:"info",value:"info"}),e(n,{color:"warning",label:"warning",value:"warning"}),e(n,{color:"error",label:"error",value:"error"})]),_:1},8,["modelValue"])]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}))}};typeof k=="function"&&k(T);const j=`<template> 7 <v-card flat> 8 <v-card-text> 9 <v-container fluid> 10 <v-row> 11 <v-col 12 cols="12" 13 md="6" 14 sm="6" 15 > 16 <v-radio-group v-model="ex7"> 17 <v-radio 18 color="red" 19 label="red" 20 value="red" 21 ></v-radio> 22 <v-radio 23 color="red-darken-3" 24 label="red-darken-3" 25 value="red-darken-3" 26 ></v-radio> 27 <v-radio 28 color="indigo" 29 label="indigo" 30 value="indigo" 31 ></v-radio> 32 <v-radio 33 color="indigo-darken-3" 34 label="indigo-darken-3" 35 value="indigo-darken-3" 36 ></v-radio> 37 <v-radio 38 color="orange" 39 label="orange" 40 value="orange" 41 ></v-radio> 42 <v-radio 43 color="orange-darken-3" 44 label="orange-darken-3" 45 value="orange-darken-3" 46 ></v-radio> 47 </v-radio-group> 48 </v-col> 49 <v-col 50 cols="12" 51 md="6" 52 sm="6" 53 > 54 <v-radio-group v-model="ex8"> 55 <v-radio 56 color="primary" 57 label="primary" 58 value="primary" 59 ></v-radio> 60 <v-radio 61 color="secondary" 62 label="secondary" 63 value="secondary" 64 ></v-radio> 65 <v-radio 66 color="success" 67 label="success" 68 value="success" 69 ></v-radio> 70 <v-radio 71 color="info" 72 label="info" 73 value="info" 74 ></v-radio> 75 <v-radio 76 color="warning" 77 label="warning" 78 value="warning" 79 ></v-radio> 80 <v-radio 81 color="error" 82 label="error" 83 value="error" 84 ></v-radio> 85 </v-radio-group> 86 </v-col> 87 </v-row> 88 </v-container> 89 </v-card-text> 90 </v-card> 91</template> 92 93<script setup> 94 import { ref } from 'vue' 95 96 const ex7 = ref('red') 97 const ex8 = ref('primary') 98<\/script> 99 100<script> 101 export default { 102 data () { 103 return { 104 ex7: 'red', 105 ex8: 'primary', 106 } 107 }, 108 } 109<\/script> 110<example-meta lang="json"> 111 { 112 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2070-83999&t=tC3y53U3XKPv8ZyJ-4" 113 } 114</example-meta> 115`,w=t=>t.exampleMeta=` 116 { 117 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2073-36010&t=tC3y53U3XKPv8ZyJ-4" 118 } 119`,X={__name:"prop-direction",setup(t){const a=s(null),i=s(null);return(o,l)=>(c(),p(m,{fluid:""},{default:r(()=>[e(v,{modelValue:a.value,"onUpdate:modelValue":l[0]||(l[0]=d=>a.value=d)},{default:r(()=>[e(n,{label:"Option 1",value:"radio-1"}),e(n,{label:"Option 2",value:"radio-2"})]),_:1},8,["modelValue"]),l[2]||(l[2]=u("hr",null,null,-1)),e(v,{modelValue:i.value,"onUpdate:modelValue":l[1]||(l[1]=d=>i.value=d),inline:""},{default:r(()=>[e(n,{label:"Option 1",value:"radio-1"}),e(n,{label:"Option 2",value:"radio-2"})]),_:1},8,["modelValue"])]),_:1}))}};typeof w=="function"&&w(X);const M=`<template> 120 <v-container fluid> 121 <v-radio-group v-model="column"> 122 <v-radio 123 label="Option 1" 124 value="radio-1" 125 ></v-radio> 126 <v-radio 127 label="Option 2" 128 value="radio-2" 129 ></v-radio> 130 </v-radio-group> 131 <hr> 132 <v-radio-group 133 v-model="inline" 134 inline 135 > 136 <v-radio 137 label="Option 1" 138 value="radio-1" 139 ></v-radio> 140 <v-radio 141 label="Option 2" 142 value="radio-2" 143 ></v-radio> 144 </v-radio-group> 145 </v-container> 146</template> 147 148<script setup> 149 import { ref } from 'vue' 150 151 const column = ref(null) 152 const inline = ref(null) 153<\/script> 154 155<script> 156 export default { 157 data () { 158 return { 159 column: null, 160 inline: null, 161 } 162 }, 163 } 164<\/script> 165<example-meta lang="json"> 166 { 167 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2073-36010&t=tC3y53U3XKPv8ZyJ-4" 168 } 169</example-meta> 170`,U=t=>t.exampleMeta=` 171 { 172 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2070-80534&t=tC3y53U3XKPv8ZyJ-4" 173 } 174`,P={__name:"prop-model-group",setup(t){const a=s("one");return(i,o)=>(c(),p(m,{fluid:""},{default:r(()=>[u("p",null,"Selected Button: "+J(a.value),1),e(v,{modelValue:a.value,"onUpdate:modelValue":o[0]||(o[0]=l=>a.value=l)},{default:r(()=>[e(n,{label:"Option One",value:"one"}),e(n,{label:"Option 2 (string)",value:"2"}),e(n,{value:3,label:"Option 3 (integer)"})]),_:1},8,["modelValue"])]),_:1}))}};typeof U=="function"&&U(P);const N=`<template> 175 <v-container fluid> 176 <p>Selected Button: {{ radios }}</p> 177 <v-radio-group v-model="radios"> 178 <v-radio label="Option One" value="one"></v-radio> 179 <v-radio label="Option 2 (string)" value="2"></v-radio> 180 <v-radio :value="3" label="Option 3 (integer)"></v-radio> 181 </v-radio-group> 182 </v-container> 183</template> 184 185<script setup> 186 import { ref } from 'vue' 187 188 const radios = ref('one') 189<\/script> 190 191<script> 192 export default { 193 data () { 194 return { 195 radios: 'one', 196 } 197 }, 198 } 199<\/script> 200<example-meta lang="json"> 201 { 202 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2070-80534&t=tC3y53U3XKPv8ZyJ-4" 203 } 204</example-meta> 205`,R=t=>t.exampleMeta=` 206 { 207 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2070-80768&t=tC3y53U3XKPv8ZyJ-4" 208 } 209`,K={__name:"prop-model-radio",setup(t){const a=s("Option 1");return(i,o)=>(c(),p(m,{fluid:""},{default:r(()=>[e(S,{modelValue:a.value,"onUpdate:modelValue":o[0]||(o[0]=l=>a.value=l),items:["Option 1","Option 2"],label:"Select Option"},null,8,["modelValue"]),e(n,{modelValue:a.value,"onUpdate:modelValue":o[1]||(o[1]=l=>a.value=l),"false-value":"Option 2",label:"Option 1","true-value":"Option 1",readonly:""},null,8,["modelValue"]),e(n,{modelValue:a.value,"onUpdate:modelValue":o[2]||(o[2]=l=>a.value=l),"false-value":"Option 1",label:"Option 2","true-value":"Option 2",readonly:""},null,8,["modelValue"])]),_:1}))}};typeof R=="function"&&R(K);const Y=`<template> 210 <v-container fluid> 211 <v-select 212 v-model="radio" 213 :items="['Option 1', 'Option 2']" 214 label="Select Option" 215 ></v-select> 216 <v-radio 217 v-model="radio" 218 false-value="Option 2" 219 label="Option 1" 220 true-value="Option 1" 221 readonly 222 ></v-radio> 223 <v-radio 224 v-model="radio" 225 false-value="Option 1" 226 label="Option 2" 227 true-value="Option 2" 228 readonly 229 ></v-radio> 230 </v-container> 231</template> 232 233<script setup> 234 import { ref } from 'vue' 235 236 const radio = ref('Option 1') 237<\/script> 238 239<script> 240 export default { 241 data () { 242 return { 243 radio: 'Option 1', 244 } 245 }, 246 } 247<\/script> 248<example-meta lang="json"> 249 { 250 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2070-80768&t=tC3y53U3XKPv8ZyJ-4" 251 } 252</example-meta> 253`,h={__name:"slot-label",setup(t){const a=s("Duckduckgo");return(i,o)=>(c(),p(m,{fluid:""},{default:r(()=>[e(v,{modelValue:a.value,"onUpdate:modelValue":o[0]||(o[0]=l=>a.value=l)},{label:r(()=>[...o[1]||(o[1]=[u("div",null,[_("Your favourite "),u("strong",null,"search engine")],-1)])]),default:r(()=>[e(n,{value:"Google"},{label:r(()=>[...o[2]||(o[2]=[u("div",null,[_("Of course it's "),u("strong",{class:"text-success"},"Google")],-1)])]),_:1}),e(n,{value:"Duckduckgo"},{label:r(()=>[...o[3]||(o[3]=[u("div",null,[_("Definitely "),u("strong",{class:"text-primary"},"Duckduckgo")],-1)])]),_:1})]),_:1},8,["modelValue"])]),_:1}))}},q=`<template> 254 <v-container fluid> 255 <v-radio-group v-model="radios"> 256 <template v-slot:label> 257 <div>Your favourite <strong>search engine</strong></div> 258 </template> 259 <v-radio value="Google"> 260 <template v-slot:label> 261 <div>Of course it's <strong class="text-success">Google</strong></div> 262 </template> 263 </v-radio> 264 <v-radio value="Duckduckgo"> 265 <template v-slot:label> 266 <div>Definitely <strong class="text-primary">Duckduckgo</strong></div> 267 </template> 268 </v-radio> 269 </v-radio-group> 270 </v-container> 271</template> 272 273<script setup> 274 import { ref } from 'vue' 275 276 const radios = ref('Duckduckgo') 277<\/script> 278 279<script> 280 export default { 281 data () { 282 return { 283 radios: 'Duckduckgo', 284 } 285 }, 286 } 287<\/script> 288`,x="v-radio-group",H={__name:"usage",setup(t){const a=s("default"),i=["inline"],o=s(!1),l=O(()=>({inline:a.value==="inline"||void 0,label:o.value?"Radio group label":void 0})),d=O(()=>` 289 <v-radio label="Radio One" value="one"></v-radio> 290 <v-radio label="Radio Two" value="two"></v-radio> 291 <v-radio label="Radio Three" value="three"></v-radio> 292`),$=O(()=>`<${x}${W(l.value)}>${d.value}</${x}>`);return(z,f)=>{const C=E;return c(),p(C,{modelValue:g(a),"onUpdate:modelValue":f[1]||(f[1]=b=>y(a)?a.value=b:null),code:g($),name:x,options:i}
292,{configuration:r(()=>[e(G,{modelValue:g(o),"onUpdate:modelValue":f[0]||(f[0]=b=>y(o)?o.value=b:null),label:"Radio group label"},null,8,["modelValue"])]),default:r(()=>[u("div",null,[e(v,Z(g(l),{"hide-details":""}),{default:r(()=>[e(n,{label:"Radio One",value:"one"}),e(n,{label:"Radio Two",value:"two"}),e(n,{label:"Radio Three",value:"three"})]),_:1},16)])]),_:1},8,["modelValue","code"])}}},L=`<template> 293 <ExamplesUsageExample 294 v-model="model" 295 :code="code" 296 :name="name" 297 :options="options" 298 > 299 <div> 300 <v-radio-group v-bind="props" hide-details> 301 <v-radio label="Radio One" value="one"></v-radio> 302 <v-radio label="Radio Two" value="two"></v-radio> 303 <v-radio label="Radio Three" value="three"></v-radio> 304 </v-radio-group> 305 </div> 306 307 <template v-slot:configuration> 308 <v-checkbox v-model="label" label="Radio group label"></v-checkbox> 309 </template> 310 </ExamplesUsageExample> 311</template> 312 313<script setup> 314 const name = 'v-radio-group' 315 const model = ref('default') 316 const options = ['inline'] 317 const label = ref(false) 318 const props = computed(() => { 319 return { 320 inline: model.value === 'inline' || undefined, 321 label: label.value ? 'Radio group label' : undefined, 322 } 323 }) 324 325 const slots = computed(() => { 326 return \` 327 <v-radio label="Radio One" value="one"></v-radio> 328 <v-radio label="Radio Two" value="two"></v-radio> 329 <v-radio label="Radio Three" value="three"></v-radio> 330\` 331 }) 332 333 const code = computed(() => { 334 return \`<\${name}\${propsToString(props.value)}>\${slots.value}</\${name}>\` 335 }) 336<\/script> 337`,oe={"prop-colors":{component:T,source:j},"prop-direction":{component:X,source:M},"prop-model-group":{component:P,source:N},"prop-model-radio":{component:K,source:Y},"slot-label":{component:h,source:q},usage:{component:H,source:L}};export{oe as default}; 338//# sourceMappingURL=v-radio-group-CSNjeoan.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.