refactor!: rename util functions to useForwardPropsWithout, useForwardPropsEmitsWithout

Author: lepture

.vitepress/config.ts

@@ -68,6 +68,7 @@ export default defineConfig({
               { text: 'Toggle', link: '/components/toggle' },
               { text: 'Toggle Group', link: '/components/toggle-group' },
               { text: 'Checkbox', link: '/components/checkbox' },
+              { text: 'Checkbox Group', link: '/components/checkbox-group' },
               { text: 'Radio', link: '/components/radio' },
               { text: 'Radio Group', link: '/components/radio-group' },
               { text: 'TextField', link: '/components/text-field' },

src/components/accordion/AccordionRoot.vue

@@ -11,15 +11,16 @@ export interface AccordionRootProps extends _AccordionRootProps {
 
 <script setup lang="ts">
 import { AccordionRoot } from 'reka-ui'
-import { extractForwardPropsEmits } from '../util'
+import { useForwardPropsEmitsWithout, buildPropsClass } from '../util'
 
 const props = withDefaults(defineProps<AccordionRootProps>(), {
   size: '1',
 })
 
 const emits = defineEmits<AccordionRootEmits>()
 
-const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, ['size'])
+const forwarded = useForwardPropsEmitsWithout(props, emits, ['size'])
+const resetClass = buildPropsClass(props, ['size'])
 </script>
 
 <template>

src/components/accordion/AccordionTrigger.vue

@@ -12,7 +12,7 @@ export interface AccordionTriggerProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import { AccordionTrigger } from 'reka-ui'
-import { extractForwardProps } from '../util'
+import { useForwardPropsWithout, buildPropsClass } from '../util'
 import PlusMinusIcon from '../icon/PlusMinusIcon.vue'
 import ChevronIcon from '../icon/ChevronIcon.vue'
 
@@ -21,7 +21,8 @@ const props = withDefaults(defineProps<AccordionTriggerProps>(), {
   indicator: 'chevron',
 })
 
-const [forwarded, resetClass] = extractForwardProps(props, ['size'])
+const forwarded = useForwardPropsWithout(props, ['size'])
+const resetClass = buildPropsClass(props, ['size'])
 </script>
 
 <template>

src/components/alert/AlertDialogPopup.vue

@@ -16,7 +16,7 @@ import {
   AlertDialogContent,
   AlertDialogOverlay,
 } from 'reka-ui'
-import { useForwardPropsEmits } from '../util'
+import { useForwardPropsEmitsWithout } from '../util'
 
 defineOptions({
   inheritAttrs: false,
@@ -25,7 +25,7 @@ defineOptions({
 const props = defineProps<AlertDialogPopupProps>()
 const emits = defineEmits<AlertDialogContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits, ['to', 'align', 'size'])
+const forwarded = useForwardPropsEmitsWithout(props, emits, ['to', 'align', 'size'])
 </script>
 
 <template>

src/components/avatar/Avatar.vue

@@ -35,16 +35,15 @@ import {
   AvatarImage,
   AvatarFallback,
 } from 'reka-ui'
-import { extractClass } from '../util'
+import { buildPropsClass } from '../util'
 
 const props = withDefaults(defineProps<AvatarProps>(), {
   radius: 'small',
   variant: 'solid',
   size: '2',
 })
-const resetClass = computed(() => {
-  return extractClass(props, ['size', 'variant'])
-})
+const resetClass = buildPropsClass(props, ['size', 'variant'])
+
 const fallback = computed(() => {
   if (props.fallback) {
     return props.fallback

src/components/badge/Badge.vue

@@ -32,9 +32,8 @@ export interface BadgeProps {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
-import { extractClass } from '../util'
+import { buildPropsClass } from '../util'
 
 const props = withDefaults(defineProps<BadgeProps>(), {
   as: 'span',
@@ -44,9 +43,7 @@ const props = withDefaults(defineProps<BadgeProps>(), {
   highContrast: undefined,
 })
 
-const resetClass = computed(() => {
-  return extractClass(props, ['size', 'variant', 'highContrast'])
-})
+const resetClass = buildPropsClass(props, ['size', 'variant', 'highContrast'])
 </script>
 
 <template>

src/components/button/Button.vue

@@ -32,9 +32,8 @@ export interface ButtonProps {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
-import { extractClass } from '../util'
+import { buildPropsClass } from '../util'
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   as: 'button',
@@ -43,9 +42,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   highContrast: false,
 })
 
-const resetClass = computed(() => {
-  return extractClass(props, ['size', 'variant', 'highContrast'])
-})
+const resetClass = buildPropsClass(props, ['size', 'variant', 'highContrast'])
 </script>
 
 <template>

src/components/button/SocialButton.vue

@@ -30,16 +30,14 @@ export interface SocialButtonProps extends PrimitiveProps {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { Icon } from '@iconify/vue'
-import { extractClass } from '../util'
+import { buildPropsClass } from '../util'
 
 const props = withDefaults(defineProps<SocialButtonProps>(), {
   as: 'button',
   size: '2',
 })
 
-const resetClass = computed(() => {
-  return extractClass(props, ['size', 'brand'])
-})
+const resetClass = buildPropsClass(props, ['size', 'brand'])
 
 const brandIcon = computed(() => {
   return BRAND_ICONS[props.brand]

src/components/card/Card.vue

@@ -10,18 +10,15 @@ export interface CardProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
-import { extractClass } from '../util'
+import { buildPropsClass } from '../util'
 
 const props = withDefaults(defineProps<CardProps>(), {
   as: 'div',
   variant: 'surface',
   size: '1',
 })
-const resetClass = computed(() => {
-  return extractClass(props, ['size', 'variant'])
-})
+const resetClass = buildPropsClass(props, ['size', 'variant'])
 </script>
 
 <template>

src/components/checkbox/Checkbox.vue

@@ -3,6 +3,7 @@ import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import type { ColorType } from '../types'
 
 export interface CheckboxProps extends CheckboxRootProps {
+  parent?: boolean
   color?: ColorType
   variant?: 'surface' | 'soft'
   size?: '1' | '2' | '3'
@@ -12,15 +13,17 @@ export interface CheckboxProps extends CheckboxRootProps {
 
 <script setup lang="ts">
 import { CheckboxRoot, CheckboxIndicator } from 'reka-ui'
-import { extractForwardPropsEmits } from '../util'
+import { useForwardPropsEmitsWithout, buildPropsClass } from '../util'
 
 const emits = defineEmits<CheckboxRootEmits>()
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
   size: '2',
   variant: 'surface',
 })
-const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, ['color', 'size', 'variant', 'highContrast'])
+
+const forwarded = useForwardPropsEmitsWithout(props, emits, ['parent', 'color', 'size', 'variant', 'highContrast'])
+const resetClass = buildPropsClass(props, ['size', 'variant', 'highContrast'])
 </script>
 
 <template>