@nuxt/ui 2.18.3 → 3.0.0-alpha.0

package/dist/runtime/components/RadioGroup.vue

@@ -0,0 +1,111 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/radio-group";
+const appConfig = _appConfig;
+const radioGroup = tv({ extend: tv(theme), ...appConfig.ui?.radioGroup || {} });
+</script>
+
+<script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
+import { computed, useId } from 'vue'
+import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+
+const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
+  valueKey: 'value',
+  orientation: 'vertical'
+})
+const emits = defineEmits<RadioGroupEmits>()
+const slots = defineSlots<RadioGroupSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
+
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
+const id = _id.value ?? useId()
+
+const ui = computed(() => radioGroup({
+  size: size.value,
+  color: color.value,
+  disabled: disabled.value,
+  required: props.required,
+  orientation: props.orientation
+}))
+
+function normalizeItem(item: any) {
+  if (['string', 'number', 'boolean'].includes(typeof item)) {
+    return {
+      id: `${id}:${item}`,
+      value: item,
+      label: item
+    }
+  }
+
+  const value = item[props.valueKey]
+
+  return {
+    ...item,
+    value,
+    id: `${id}:${value}`
+  }
+}
+
+const normalizedItems = computed(() => {
+  if (!props.items) {
+    return []
+  }
+
+  return props.items.map(normalizeItem)
+})
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+</script>
+
+<template>
+  <RadioGroupRoot
+    :id="id"
+    v-slot="{ modelValue }"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    @update:model-value="onUpdate"
+  >
+    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })">
+      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </legend>
+      <div v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: props.ui?.item })">
+        <div :class="ui.container({ class: props.ui?.container })">
+          <RadioGroupItem
+            :id="item.id"
+            :value="item.value"
+            :disabled="disabled"
+            :class="ui.base({ class: props.ui?.base })"
+          >
+            <RadioGroupIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+          </RadioGroupItem>
+        </div>
+
+        <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <Label :class="ui.label({ class: props.ui?.label })" :for="item.id">
+            <slot name="label" :item="item" :model-value="modelValue">{{ item.label }}</slot>
+          </Label>
+          <p v-if="item.description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <slot name="description" :item="item" :model-value="modelValue">
+              {{ item.description }}
+            </slot>
+          </p>
+        </div>
+      </div>
+    </fieldset>
+  </RadioGroupRoot>
+</template>