@oruga-ui/oruga-next

Version:

UI components for Vue.js and CSS framework agnostic

1 lines • 6.64 kB

Source Map (JSON)

{"version":3,"file":"radio.mjs","sources":["../../src/components/radio/Radio.vue","../../src/components/radio/index.ts"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, useAttrs, useId, useSlots, useTemplateRef } from \"vue\";\n\nimport { getDefault } from \"@/utils/config\";\nimport { defineClasses, useInputHandler } from \"@/composables\";\n\nimport { injectField } from \"../field/fieldInjection\";\n\nimport type { RadioProps } from \"./props\";\n\n/**\n * Select an option from a set of options.\n * @displayName Radio\n * @style _radio.scss\n */\ndefineOptions({\n isOruga: true,\n name: \"ORadio\",\n configField: \"radio\",\n inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<RadioProps<T>>(), {\n override: undefined,\n modelValue: undefined,\n id: () => useId(),\n label: undefined,\n name: undefined,\n variant: () => getDefault(\"radio.variant\"),\n size: () => getDefault(\"radio.size\"),\n disabled: false,\n required: false,\n nativeValue: undefined,\n autocomplete: () => getDefault(\"radio.autocomplete\", \"off\"),\n useHtml5Validation: () => getDefault(\"useHtml5Validation\", true),\n});\n\nconst emits = defineEmits<{\n /**\n * modelValue prop two-way binding\n * @param value {T} updated modelValue prop\n */\n \"update:model-value\": [value: T];\n /**\n * on input change event\n * @param value {T} input value\n * @param event {Event} native event\n */\n input: [value: T, event: Event];\n /**\n * on input focus event\n * @param event {Event} native event\n */\n focus: [event: Event];\n /**\n * on input blur event\n * @param event {Event} native event\n */\n blur: [event: Event];\n /**\n * on input invalid event\n * @param event {Event} native event\n */\n invalid: [event: Event];\n}>();\n\nconst inputRef = useTemplateRef(\"inputElement\");\n\n// use form input functionalities\nconst { checkHtml5Validity, onBlur, onFocus, onInvalid, setFocus } = useInputHandler(\n inputRef,\n emits,\n props,\n);\n\n// inject parent field component if used inside one\nconst { parentField } = injectField();\n\n// set field labelId or create a unique label id if a label is given\nconst labelId =\n !!parentField.value || !!props.label || !!useSlots().default\n ? parentField.value?.labelId || useId()\n : undefined;\n\n// if no `label` is given and `id` is given set as `for` property on o-field wrapper\nif (!props.label && props.id) parentField.value?.setInputId(props.id);\n\nconst vmodel = defineModel<T>({ default: undefined });\n\nconst isChecked = computed(() => vmodel.value === props.nativeValue);\n\nfunction onInput(event: Event): void {\n emits(\"input\", vmodel.value, event);\n}\n\n// --- Computed Component Classes ---\n\nconst attrs = useAttrs();\n\nconst inputBind = computed(() => ({\n ...parentField?.value?.inputAttrs,\n ...attrs,\n}));\n\nconst rootClasses = defineClasses(\n [\"rootClass\", \"o-radio\"],\n [\n \"sizeClass\",\n \"o-radio--\",\n computed(() => props.size),\n computed(() => !!props.size),\n ],\n [\n \"variantClass\",\n \"o-radio--\",\n computed(() => props.variant),\n computed(() => !!props.variant),\n ],\n [\n \"disabledClass\",\n \"o-radio--disabled\",\n null,\n computed(() => props.disabled),\n ],\n [\"checkedClass\", \"o-radio--checked\", null, isChecked],\n);\n\nconst inputClasses = defineClasses([\"inputClass\", \"o-radio__input\"]);\n\nconst labelClasses = defineClasses([\"labelClass\", \"o-radio__label\"]);\n\n// --- Expose Public Functionalities ---\n\n/** expose functionalities for programmatic usage */\ndefineExpose({ checkHtml5Validity, focus: setFocus, value: vmodel });\n</script>\n\n<template>\n <div data-oruga=\"radio\" :class=\"rootClasses\">\n <input\n v-bind=\"inputBind\"\n :id=\"id\"\n ref=\"inputElement\"\n v-model=\"vmodel\"\n type=\"radio\"\n data-oruga-input=\"radio\"\n :class=\"inputClasses\"\n :name=\"name\"\n :value=\"nativeValue\"\n :required=\"required\"\n :disabled=\"disabled\"\n :autocomplete=\"autocomplete\"\n :aria-checked=\"isChecked\"\n :aria-labelledby=\"labelId\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @invalid=\"onInvalid\"\n @change=\"onInput\" />\n\n <label\n v-if=\"label || $slots.default\"\n :id=\"labelId\"\n :for=\"id\"\n :class=\"labelClasses\">\n \n <slot>{{ label }}</slot>\n </label>\n </div>\n</template>\n","import type { App, Plugin } from \"vue\";\n\nimport Radio from \"./Radio.vue\";\n\nimport { registerComponent } from \"@/utils/plugins\";\n\n/** export radio plugin */\nexport default {\n install(app: App) {\n registerComponent(app, Radio);\n },\n} as Plugin;\n\n/** export radio components */\nexport { Radio as ORadio };\n"],"names":["_useModel","_a","Radio"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,UAAM,QAAQ;AAed,UAAM,QAAQ;AA6BR,UAAA,WAAW,eAAe,cAAc;AAG9C,UAAM,EAAE,oBAAoB,QAAQ,SAAS,WAAW,aAAa;AAAA,MACjE;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAGM,UAAA,EAAE,YAAY,IAAI,YAAY;AAGpC,UAAM,UACF,CAAC,CAAC,YAAY,SAAS,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,WAAW,YAC/C,iBAAY,UAAZ,mBAAmB,YAAW,UAC9B;AAGN,QAAA,CAAC,MAAM,SAAS,MAAM,GAAgB,mBAAA,UAAA,mBAAO,WAAW,MAAM;AAE5D,UAAA,SAASA,8BAAqC;AAEpD,UAAM,YAAY,SAAS,MAAM,OAAO,UAAU,MAAM,WAAW;AAEnE,aAAS,QAAQ,OAAoB;AAC3B,YAAA,SAAS,OAAO,OAAO,KAAK;AAAA,IAAA;AAKtC,UAAM,QAAQ,SAAS;AAEjB,UAAA,YAAY,SAAS,MAAO;;AAAA;AAAA,QAC9B,IAAGC,MAAA,2CAAa,UAAb,gBAAAA,IAAoB;AAAA,QACvB,GAAG;AAAA,MAAA;AAAA,KACL;AAEF,UAAM,cAAc;AAAA,MAChB,CAAC,aAAa,SAAS;AAAA,MACvB;AAAA,QACI;AAAA,QACA;AAAA,QACA,SAAS,MAAM,MAAM,IAAI;AAAA,QACzB,SAAS,MAAM,CAAC,CAAC,MAAM,IAAI;AAAA,MAC/B;AAAA,MACA;AAAA,QACI;AAAA,QACA;AAAA,QACA,SAAS,MAAM,MAAM,OAAO;AAAA,QAC5B,SAAS,MAAM,CAAC,CAAC,MAAM,OAAO;AAAA,MAClC;AAAA,MACA;AAAA,QACI;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,MAAM,MAAM,QAAQ;AAAA,MACjC;AAAA,MACA,CAAC,gBAAgB,oBAAoB,MAAM,SAAS;AAAA,IACxD;AAEA,UAAM,eAAe,cAAc,CAAC,cAAc,gBAAgB,CAAC;AAEnE,UAAM,eAAe,cAAc,CAAC,cAAc,gBAAgB,CAAC;AAKnE,aAAa,EAAE,oBAAoB,OAAO,UAAU,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/HnE,MAAe,QAAA;AAAA,EACX,QAAQ,KAAU;AACd,sBAAkB,KAAKC,SAAK;AAAA,EAAA;AAEpC;"}