reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 3.94 kB
Source Map (JSON)
{"version":3,"file":"CheckboxGroupRoot.cjs","sources":["../../src/Checkbox/CheckboxGroupRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { type Ref, computed, toRefs } from 'vue'\nimport { createContext, useDirection, useFormControl } from '@/shared'\nimport type { RovingFocusGroupProps } from '@/RovingFocus'\nimport type { AcceptableValue, FormFieldProps } from '@/shared/types'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nexport interface CheckboxGroupRootProps<T = AcceptableValue> extends Pick<RovingFocusGroupProps, 'as' | 'asChild' | 'dir' | 'orientation' | 'loop'>, FormFieldProps {\n /** The value of the checkbox when it is initially rendered. Use when you do not need to control its value. */\n defaultValue?: T[]\n /** The controlled value of the checkbox. Can be binded with v-model. */\n modelValue?: T[]\n /** When `false`, navigating through the items using arrow keys will be disabled. */\n rovingFocus?: boolean\n /** When `true`, prevents the user from interacting with the checkboxes */\n disabled?: boolean\n}\n\nexport type CheckboxGroupRootEmits<T = AcceptableValue> = {\n /** Event handler called when the value of the checkbox changes. */\n 'update:modelValue': [value: T[]]\n}\n\ninterface CheckboxGroupRootContext {\n modelValue: Ref<AcceptableValue[]>\n rovingFocus: Ref<boolean>\n disabled: Ref<boolean>\n}\n\nexport const [injectCheckboxGroupRootContext, provideCheckboxGroupRootContext]\n = createContext<CheckboxGroupRootContext>('CheckboxGroupRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { RovingFocusGroup } from '@/RovingFocus'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\nconst props = withDefaults(defineProps<CheckboxGroupRootProps<T>>(), {\n rovingFocus: true,\n})\nconst emits = defineEmits<CheckboxGroupRootEmits<T>>()\n\nconst { disabled, rovingFocus, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst isFormControl = useFormControl(currentElement)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n defaultValue: props.defaultValue ?? [],\n passive: (props.modelValue === undefined) as false,\n}) as Ref<T[]>\n\nconst rovingFocusProps = computed(() => {\n return rovingFocus.value ? { loop: props.loop, dir: dir.value, orientation: props.orientation } : {}\n})\n\nprovideCheckboxGroupRootContext({\n modelValue,\n rovingFocus,\n disabled,\n})\n</script>\n\n<template>\n <component\n :is=\"rovingFocus ? RovingFocusGroup : Primitive\"\n ref=\"primitiveElement\"\n :as=\"as\"\n :as-child=\"asChild\"\n v-bind=\"rovingFocusProps\"\n >\n <slot />\n\n <VisuallyHiddenInput\n v-if=\"isFormControl && name\"\n :name=\"name\"\n :value=\"modelValue\"\n :required=\"required\"\n />\n </component>\n</template>\n"],"names":["createContext","toRefs","useDirection","usePrimitiveElement","useFormControl","useVModel","computed"],"mappings":";;;;;;;;;;;;AA8BO,MAAM,CAAC,8BAAA,EAAgC,+BAA+B,CAAA,GACzEA,mCAAwC,mBAAmB;;;;;;;;;;;;;;;;;;AAO/D,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,QAAU,EAAA,WAAA,EAAa,KAAK,OAAQ,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC5D,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAEhC,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AACjE,IAAM,MAAA,aAAA,GAAgBC,qCAAe,cAAc,CAAA;AAEnD,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,KAAM,CAAA,YAAA,IAAgB,EAAC;AAAA,MACrC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmBC,aAAS,MAAM;AACtC,MAAA,OAAO,WAAY,CAAA,KAAA,GAAQ,EAAE,IAAA,EAAM,KAAM,CAAA,IAAA,EAAM,GAAK,EAAA,GAAA,CAAI,KAAO,EAAA,WAAA,EAAa,KAAM,CAAA,WAAA,KAAgB,EAAC;AAAA,KACpG,CAAA;AAED,IAAgC,+BAAA,CAAA;AAAA,MAC9B,UAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}