diff --git a/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap b/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap
index 743f1c006..94c88970f 100644
--- a/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap
+++ b/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap
@@ -1,404 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`OkuAlertDialog > Controlled > renders correctly 1`] = `
-"
-
Buy this house
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Buy this house
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Buy this house
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Are you sure?
-
-
- This will do a very dangerous thing. Thar be dragons!
-
-
- yolo, do it
-
-
- maybe not
-
-
-
-
delete everything
-
-
-
-
-
"
-`;
-
-exports[`OkuAlertDialog > StyledVue > should be able to close 1`] = `
-
-
-
-
-
-
-
-
- delete everything
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- delete everything
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Are you sure?
-
-
- This will do a very dangerous thing. Thar be dragons!
-
-
- yolo, do it
-
-
- maybe not
-
-
-
-
Buy this house
@@ -545,13 +146,17 @@ exports[`okuAlertDialog > controlled > should be able to open 1`] = `
+
+
+
+
styledVue > should be able to open 1`] = `
+
+
+
+
slots.default?.()))
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAspectRatio = aspectRatio as typeof aspectRatio &
- (new () => { $props: AspectRatioNativeElement })
+export const OkuAspectRatio = aspectRatio as typeof aspectRatio & (new () => { $props: AspectRatioNativeElement })
diff --git a/packages/components/aspect-ratio/tests/aspect-ratio.test.ts b/packages/components/aspect-ratio/tests/aspect-ratio.test.ts
index ecb9232cd..b88e851ad 100644
--- a/packages/components/aspect-ratio/tests/aspect-ratio.test.ts
+++ b/packages/components/aspect-ratio/tests/aspect-ratio.test.ts
@@ -47,7 +47,7 @@ describe('okuAspectRatio', () => {
/**
* @vitest-environment jsdom
*/
- it('should pass accessibility tests', async () => {
+ it('should have no accessibility violations', async () => {
expect(await axe(wrapper.element)).toHaveNoViolations()
})
})
@@ -65,7 +65,7 @@ describe('okuAspectRatio Stories', () => {
/**
* @vitest-environment jsdom
*/
- it('should pass accessibility tests', async () => {
+ it('should have no accessibility violations', async () => {
expect(await axe(wrapper.element)).toHaveNoViolations()
})
@@ -86,7 +86,7 @@ describe('okuAspectRatio Stories', () => {
/**
* @vitest-environment jsdom
*/
- it('should pass accessibility tests', async () => {
+ it('should have no accessibility violations', async () => {
expect(await axe(wrapper.element)).toHaveNoViolations()
})
@@ -107,7 +107,7 @@ describe('okuAspectRatio Stories', () => {
/**
* @vitest-environment jsdom
*/
- it('should pass accessibility tests', async () => {
+ it('should have no accessibility violations', async () => {
expect(await axe(wrapper.element)).toHaveNoViolations()
})
diff --git a/packages/components/avatar/src/avatar-fallback.ts b/packages/components/avatar/src/avatar-fallback.ts
index 71b48e06f..8d41c99b1 100644
--- a/packages/components/avatar/src/avatar-fallback.ts
+++ b/packages/components/avatar/src/avatar-fallback.ts
@@ -41,15 +41,15 @@ const avatarFallback = defineComponent({
onBeforeUnmount(() => window.clearTimeout(timerId))
- return () => canRender.value && inject.imageLoadingStatus.value !== 'loaded'
+ return () => [canRender.value && inject.imageLoadingStatus.value !== 'loaded'
? h(Primitive.span, {
...mergeProps(attrs, otherProps, listeners),
ref: forwardedRef,
- }, slots)
- : null
+ }, () => slots.default?.())
+ : null,
+ ]
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAvatarFallback = avatarFallback as typeof avatarFallback &
- (new () => { $props: AvatarFallbackNativeElement })
+export const OkuAvatarFallback = avatarFallback as typeof avatarFallback & (new () => { $props: AvatarFallbackNativeElement })
diff --git a/packages/components/avatar/src/avatar-image.ts b/packages/components/avatar/src/avatar-image.ts
index f855be467..3efd18a40 100644
--- a/packages/components/avatar/src/avatar-image.ts
+++ b/packages/components/avatar/src/avatar-image.ts
@@ -38,16 +38,16 @@ const avatarImage = defineComponent({
handleLoadingStatusChange(imageLoadingStatus.value)
})
- return () => imageLoadingStatus.value === 'loaded'
+ return () => [imageLoadingStatus.value === 'loaded'
? h(Primitive.img, {
...mergeProps(attrs, otherProps, emits),
src: src.value,
ref: forwardedRef,
- }, slots)
- : null
+ }, () => slots.default?.())
+ : null,
+ ]
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAvatarImage = avatarImage as typeof avatarImage &
- (new () => { $props: AvatarImageNativeElement })
+export const OkuAvatarImage = avatarImage as typeof avatarImage & (new () => { $props: AvatarImageNativeElement })
diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index 547a00ad4..3abf664cd 100644
--- a/packages/components/avatar/src/avatar.ts
+++ b/packages/components/avatar/src/avatar.ts
@@ -24,7 +24,7 @@ const avatar = defineComponent({
const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
const forwardedRef = useForwardRef()
- const listeners = useListeners()
+ const emits = useListeners()
const imageLoadingStatus = ref
('idle')
@@ -35,12 +35,11 @@ const avatar = defineComponent({
})
return () => h(Primitive.span, {
- ...mergeProps(attrs, otherProps, listeners),
+ ...mergeProps(attrs, otherProps, emits),
ref: forwardedRef,
- }, slots)
+ }, () => slots.default?.())
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAvatar = avatar as typeof avatar &
- (new () => { $props: AvatarNativeElement })
+export const OkuAvatar = avatar as typeof avatar & (new () => { $props: AvatarNativeElement })
diff --git a/packages/components/avatar/tests/avatar.test.ts b/packages/components/avatar/tests/avatar.test.ts
index 12753f0c2..b3049941c 100644
--- a/packages/components/avatar/tests/avatar.test.ts
+++ b/packages/components/avatar/tests/avatar.test.ts
@@ -70,7 +70,7 @@ describe('okuAvatar', () => {
/**
* @vitest-environment jsdom
*/
- it('should pass accessibility tests', async () => {
+ it('should have no accessibility violations', async () => {
expect(await axe(wrapper.element)).toHaveNoViolations()
})
@@ -195,7 +195,7 @@ describe('okuAvatar Stories', () => {
/**
* @vitest-environment jsdom
*/
- it('should pass accessibility tests', async () => {
+ it('should have no accessibility violations', async () => {
expect(await axe(wrapper.element)).toHaveNoViolations()
})
@@ -216,7 +216,7 @@ describe('okuAvatar Stories', () => {
/**
* @vitest-environment jsdom
*/
- it('should pass accessibility tests', async () => {
+ it('should have no accessibility violations', async () => {
expect(await axe(wrapper.element)).toHaveNoViolations()
})
diff --git a/packages/components/checkbox/README.md b/packages/components/checkbox/README.md
index 493381b25..348027304 100644
--- a/packages/components/checkbox/README.md
+++ b/packages/components/checkbox/README.md
@@ -4,7 +4,7 @@ A control that allows the user to toggle between checked and not checked.
- |
+[](https://www.npmjs.com/package/@oku-ui/checkbox) [](https://www.npmjs.com/package/@oku-ui/checkbox)
## Installation
@@ -12,4 +12,4 @@ A control that allows the user to toggle between checked and not checked.
$ pnpm add @oku-ui/checkbox
```
-[Documentation](https://oku-ui.com/primitives/components/checkbox)
+[Documentation](https://oku-ui.com/primitives/components/checkbox)
\ No newline at end of file
diff --git a/packages/components/checkbox/src/__snapshots__/checkbox.test.ts.snap b/packages/components/checkbox/src/__snapshots__/checkbox.test.ts.snap
deleted file mode 100644
index 5ae21bb41..000000000
--- a/packages/components/checkbox/src/__snapshots__/checkbox.test.ts.snap
+++ /dev/null
@@ -1,273 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`OkuCheckbox > can be checked 1`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuCheckbox > can be checked 2`] = `
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuCheckbox > can be checked 3`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuCheckbox > can be checked with checked prop 1`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuCheckbox > can be checked with checked prop 2`] = `
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuCheckbox > can be checked with checked prop 3`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuCheckbox > renders the component correctly with a label 1`] = `
-
-
-
- Label
-
-
-
-
-`;
-
-exports[`okuCheckbox > can be checked 1`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`okuCheckbox > can be checked 2`] = `
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`okuCheckbox > can be checked 3`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`okuCheckbox > can be checked with checked prop 1`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`okuCheckbox > can be checked with checked prop 2`] = `
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`okuCheckbox > can be checked with checked prop 3`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`okuCheckbox > renders the component correctly with a label 1`] = `
-
-
-
- Label
-
-
-
-
-`;
diff --git a/packages/components/checkbox/src/bubble-input.ts b/packages/components/checkbox/src/bubble-input.ts
new file mode 100644
index 000000000..79e4e929e
--- /dev/null
+++ b/packages/components/checkbox/src/bubble-input.ts
@@ -0,0 +1,67 @@
+import { computed, defineComponent, h, mergeProps, reactive, ref, toRefs, watchEffect } from 'vue'
+import { reactiveOmit, useListeners, usePrevious, useSize } from '@oku-ui/use-composable'
+import { isIndeterminate } from './utils'
+import { CHECKBOX_BUBBLE_INPUT_NAME, bubbleInputProps } from './props'
+import type { BubbleInputNativeElement } from './props'
+
+const bubbleInput = defineComponent({
+ name: CHECKBOX_BUBBLE_INPUT_NAME,
+ inheritAttrs: false,
+ props: {
+ ...bubbleInputProps.props,
+ },
+ emits: {
+ ...bubbleInputProps.emits,
+ },
+ setup(props, { attrs }) {
+ const {
+ checked,
+ bubbles,
+ control,
+ ...inputProps
+ } = toRefs(props)
+
+ const _reactive = reactive(inputProps)
+ const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
+ const emits = useListeners()
+
+ const inputRef = ref(null)
+ const prevChecked = usePrevious(checked)
+ const controlSize = computed(() => useSize(control))
+
+ // Bubble checked change to parents (e.g form change event)
+ watchEffect(() => {
+ const input = inputRef.value!
+ const inputProto = window.HTMLInputElement.prototype
+ const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor
+ const setChecked = descriptor.set
+
+ if (prevChecked.value !== checked.value && setChecked) {
+ const event = new Event('click', { bubbles: bubbles.value })
+ input.indeterminate = isIndeterminate(checked.value)
+ setChecked.call(input, isIndeterminate(checked.value) ? false : checked)
+ input.dispatchEvent(event)
+ }
+ })
+
+ return () => h('input', {
+ 'type': 'checkbox',
+ 'aria-hidden': true,
+ 'defaultChecked': isIndeterminate(checked.value) ? false : checked.value,
+ ...mergeProps(attrs, otherProps, emits),
+ 'tabIndex': -1,
+ 'ref': inputRef,
+ 'style': {
+ ...attrs.style as any,
+ ...controlSize.value,
+ position: 'absolute',
+ pointerEvents: 'none',
+ opacity: 0,
+ margin: '0px',
+ },
+ })
+ },
+})
+
+export const OkuBubbleInput = bubbleInput as typeof bubbleInput & (new () => { $props: BubbleInputNativeElement })
diff --git a/packages/components/checkbox/src/bubbleInput.ts b/packages/components/checkbox/src/bubbleInput.ts
deleted file mode 100644
index 7ee325c2c..000000000
--- a/packages/components/checkbox/src/bubbleInput.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import type { PropType } from 'vue'
-import { computed, defineComponent, h, mergeProps, reactive, ref, toRefs, watchEffect } from 'vue'
-
-import { reactiveOmit, usePrevious, useSize } from '@oku-ui/use-composable'
-
-import type { OkuElement } from '@oku-ui/primitive'
-
-import { type CheckedState, isIndeterminate } from './utils'
-
-export type BubbleInputNaviteElement = Omit, 'checked'>
-
-export interface BubbleInputProps {
- checked: CheckedState
- control: HTMLElement | null
- bubbles: boolean
-}
-
-export const bubbleInputProps = {
- props: {
- checked: {
- type: [Boolean, String, Number] as PropType,
- required: true,
- },
- control: {
- type: Object as PropType,
- default: null,
- required: true,
- },
- bubbles: {
- type: Boolean,
- default: true,
- required: true,
- },
- },
-}
-
-const bubbleInput = defineComponent({
- name: 'OkuBubbleInput',
- inheritAttrs: false,
- props: {
- ...bubbleInputProps.props,
- },
- setup(props, { attrs }) {
- const { checked, bubbles, control, ...inputProps } = toRefs(props)
- const _reactive = reactive(inputProps)
- const reactiveIputProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
-
- const _ref = ref()
-
- const prevChecked = usePrevious(checked)
- const controlSize = computed(() => useSize(control))
-
- watchEffect(() => {
- const input = _ref.value!
- const inputProto = window.HTMLInputElement.prototype
- const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor
- const setChecked = descriptor.set
-
- if (prevChecked.value !== checked.value && setChecked) {
- const event = new Event('click', { bubbles: bubbles.value })
- input.indeterminate = isIndeterminate(checked.value)
- setChecked.call(input, isIndeterminate(checked.value) ? false : checked)
- input.dispatchEvent(event)
- }
- })
-
- return () =>
- h('input', {
- 'type': 'checkbox',
- 'aria-hidden': true,
- 'defaultChecked': isIndeterminate(checked.value) ? false : checked.value,
- ...mergeProps(attrs, reactiveIputProps),
- 'tabindex': -1,
- 'ref': _ref,
- 'style': {
- ...attrs.style as any,
- ...controlSize.value,
- position: 'absolute',
- pointerEvents: 'none',
- opacity: 0,
- margin: '0px',
- },
- })
- },
-})
-
-export const OkuBubbleInput = bubbleInput as typeof bubbleInput
- & (new () => {
- $props: BubbleInputNaviteElement
- })
diff --git a/packages/components/checkbox/src/checkbox-indicator.ts b/packages/components/checkbox/src/checkbox-indicator.ts
new file mode 100644
index 000000000..4737d1769
--- /dev/null
+++ b/packages/components/checkbox/src/checkbox-indicator.ts
@@ -0,0 +1,46 @@
+import { computed, defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
+import { reactiveOmit, useForwardRef, useListeners } from '@oku-ui/use-composable'
+import { Primitive } from '@oku-ui/primitive'
+import { OkuPresence } from '@oku-ui/presence'
+import { getState, isIndeterminate } from './utils'
+import { CHECKBOX_INDICATOR_NAME, checkboxIndicatorProps, scopeCheckboxProps, useCheckboxInject } from './props'
+import type { CheckboxIndicatorNativeElement } from './props'
+
+const checkboxIndicator = defineComponent({
+ name: CHECKBOX_INDICATOR_NAME,
+ props: {
+ ...checkboxIndicatorProps.props,
+ ...scopeCheckboxProps,
+ },
+ emits: {
+ ...checkboxIndicatorProps.emits,
+ },
+ setup(props, { attrs, slots }) {
+ const {
+ scopeOkuCheckbox,
+ forceMount,
+ ...indicatorProps
+ } = toRefs(props)
+
+ const _reactive = reactive(indicatorProps)
+ const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
+ const forwardedRef = useForwardRef()
+ const emits = useListeners()
+
+ const inject = useCheckboxInject(CHECKBOX_INDICATOR_NAME, scopeOkuCheckbox.value)
+
+ return () => h(OkuPresence, {
+ present: computed(() => forceMount.value || isIndeterminate(inject.state.value) || inject.state.value === true).value,
+ }, () => h(Primitive.span, {
+ 'data-state': computed(() => getState(inject.state.value)).value,
+ 'data-disabled': inject.disabled?.value ? '' : undefined,
+ ...mergeProps(attrs, otherProps, emits),
+ 'ref': forwardedRef,
+ 'style': { pointerEvents: 'none', ...attrs.style as any },
+ }, () => slots.default?.()))
+ },
+})
+
+// TODO: https://github.com/vuejs/core/pull/7444 after delete
+export const OkuCheckboxIndicator = checkboxIndicator as typeof checkboxIndicator & (new () => { $props: CheckboxIndicatorNativeElement })
diff --git a/packages/components/checkbox/src/checkbox.test.ts b/packages/components/checkbox/src/checkbox.test.ts
deleted file mode 100644
index 8cece8d21..000000000
--- a/packages/components/checkbox/src/checkbox.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import type { Component } from 'vue'
-import { h, ref } from 'vue'
-import { OkuCheckbox } from './checkbox'
-import { OkuCheckboxIndicator } from './checkboxIndicator'
-import type { CheckedState } from './utils'
-
-const component = {
- setup(props, { attrs, slots }) {
- return () => h(OkuCheckbox, { ...attrs }, slots)
- },
-} as Component
-
-const componentVModel = {
- setup(props, { attrs }) {
- const checked = ref(false)
- return () => h(OkuCheckbox, {
- ...attrs,
- 'modelValue': checked.value,
- 'onUpdate:modelValue': e => checked.value = e,
- }, {
- default: () => h(OkuCheckboxIndicator),
- })
- },
-} as Component
-
-const componentChecked = {
- setup(props, { attrs }) {
- const checked = ref(false)
- return () => h(OkuCheckbox, {
- ...attrs,
- checked: checked.value,
- onCheckedChange: e => checked.value = e,
- }, {
- default: () => h(OkuCheckboxIndicator),
- })
- },
-} as Component
-
-describe('okuCheckbox', () => {
- it('renders the component correctly', () => {
- const wrapper = mount(component)
- expect(wrapper.exists()).toBe(true)
- })
-
- it('renders the component correctly with a label', () => {
- const wrapper = mount(component, {
- slots: {
- default: 'Label',
- },
- })
- expect(wrapper.element).toMatchSnapshot()
- })
-
- it('can be checked', async () => {
- const wrapper = mount(componentVModel)
- expect(wrapper.element).toMatchSnapshot()
-
- const button = wrapper.find('button')
- await button.trigger('click')
-
- expect(wrapper.element).toMatchSnapshot()
-
- await button.trigger('click')
-
- expect(wrapper.element).toMatchSnapshot()
- })
-
- it('can be checked with checked prop', async () => {
- const wrapper = mount(componentChecked)
- expect(wrapper.element).toMatchSnapshot()
-
- const button = wrapper.find('button')
- await button.trigger('click')
-
- expect(wrapper.element).toMatchSnapshot()
-
- await button.trigger('click')
-
- expect(wrapper.element).toMatchSnapshot()
- })
-})
diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
index c96fbfd31..41fb26d0c 100644
--- a/packages/components/checkbox/src/checkbox.ts
+++ b/packages/components/checkbox/src/checkbox.ts
@@ -1,127 +1,46 @@
-import { createProvideScope } from '@oku-ui/provide'
-import type { PropType, Ref } from 'vue'
import { computed, defineComponent, h, mergeProps, reactive, ref, toRefs, useModel, watchEffect } from 'vue'
-
+import { reactiveOmit, useComposedRefs, useControllable, useForwardRef, useListeners } from '@oku-ui/use-composable'
import { composeEventHandlers } from '@oku-ui/utils'
-import { reactiveOmit, useComposedRefs, useControllable, useForwardRef } from '@oku-ui/use-composable'
-import { Primitive, primitiveProps } from '@oku-ui/primitive'
-
-import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
-
-import type { Scope } from '@oku-ui/provide'
-import { getState, isIndeterminate, scopeCheckboxProps } from './utils'
-import type { CheckedState } from './utils'
-import { OkuBubbleInput } from './bubbleInput'
-
-const CHECKBOX_NAME = 'OkuCheckbox'
-
-const [createCheckboxProvider, createCheckboxScope] = createProvideScope(CHECKBOX_NAME)
-
-type CheckboxInjectValue = {
- state: Ref
- disabled?: Ref
-}
-
-export const [CheckboxProvider, useCheckboxInject]
- = createCheckboxProvider(CHECKBOX_NAME)
-
-export type CheckboxNaviteElement = Omit, 'checked' | 'defaultChecked'>
-export type CheckboxElement = HTMLButtonElement
-
-export interface CheckboxProps extends PrimitiveProps {
- modelValue?: CheckedState
- checked?: CheckedState
- defaultChecked?: CheckedState
- required?: boolean
- scopeCheckbox?: Scope
- name?: string
- disabled?: boolean
- value?: string
-}
-
-export type CheckboxEmits = {
- 'update:modelValue': [checked: CheckedState]
- 'checkedChange': [checked: CheckedState]
- 'keydown': [event: KeyboardEvent]
- 'click': [event: MouseEvent]
-}
-
-export const checkboxProps = {
- props: {
- modelValue: {
- type: [Boolean, String, Number, undefined] as PropType,
- default: undefined,
- },
- checked: {
- type: [Boolean, String, Number, undefined] as PropType,
- default: undefined,
- },
- defaultChecked: {
- type: [Boolean, String, undefined] as PropType,
- default: undefined,
- },
- required: {
- type: Boolean as PropType,
- default: undefined,
- },
- name: {
- type: String as PropType,
- default: undefined,
- },
- disabled: {
- type: Boolean as PropType,
- default: undefined,
- },
- value: {
- type: String as PropType,
- default: undefined,
- },
- },
- emits: {
- // eslint-disable-next-line unused-imports/no-unused-vars
- 'update:modelValue': (checked: CheckedState) => true,
- // eslint-disable-next-line unused-imports/no-unused-vars
- 'checkedChange': (checked: CheckedState) => true,
- // eslint-disable-next-line unused-imports/no-unused-vars
- 'keydown': (event: KeyboardEvent) => true,
- // eslint-disable-next-line unused-imports/no-unused-vars
- 'click': (event: MouseEvent) => true,
- },
-}
-
-const checkboxDisplayName = 'OkuCheckbox'
+import { Primitive } from '@oku-ui/primitive'
+import { OkuBubbleInput } from './bubble-input'
+import { getState, isIndeterminate } from './utils'
+import { CHECKBOX_NAME, checkboxProps, checkboxProvider, scopeCheckboxProps } from './props'
+import type { CheckboxEmits, CheckboxNativeElement } from './props'
const Checkbox = defineComponent({
- name: checkboxDisplayName,
- components: { OkuBubbleInput },
+ name: CHECKBOX_NAME,
+ components: {
+ OkuBubbleInput,
+ },
inheritAttrs: false,
props: {
...checkboxProps.props,
...scopeCheckboxProps,
- ...primitiveProps,
},
emits: checkboxProps.emits,
- setup(props, { attrs, slots, emit }) {
+ setup(props, { attrs, emit, slots }) {
const {
- modelValue: _modelValue,
scopeOkuCheckbox,
+ name,
checked: checkedProp,
defaultChecked,
required,
disabled,
- name,
value,
...checkboxProps
} = toRefs(props)
const _reactive = reactive(checkboxProps)
- const reactiveCheckboxProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+ const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
- const buttonRef = ref(null)
const forwardedRef = useForwardRef()
- const composedRefs = useComposedRefs(buttonRef, forwardedRef)
+ const emits = useListeners()
+ const buttonRef = ref(null)
+ const composedRefs = useComposedRefs(forwardedRef, buttonRef)
const hasConsumerStoppedPropagationRef = ref(false)
+ // We set this to true by default so that events bubble to forms without JS (SSR)
+ const isFormControl = computed(() => buttonRef.value instanceof HTMLElement ? Boolean(buttonRef.value.closest('form')) : false)
const modelValue = useModel(props, 'modelValue')
const proxyChecked = computed({
@@ -136,58 +55,57 @@ const Checkbox = defineComponent({
onChange: (result: any) => {
modelValue.value = result
emit('checkedChange', result)
+ emit('update:modelValue', result)
},
initialValue: false,
})
const initialCheckedStateRef = ref(state.value)
- const isFormControl = computed(() => {
- return Boolean(buttonRef.value?.closest('form')) || false
- })
-
- watchEffect(() => {
+ watchEffect((onInvalidate) => {
const form = buttonRef.value?.form
if (form) {
const reset = () => updateValue(initialCheckedStateRef.value)
form.addEventListener('reset', reset)
- return () => form.removeEventListener('reset', reset)
+
+ onInvalidate(() => form.removeEventListener('reset', reset))
}
})
- CheckboxProvider({
+ checkboxProvider({
scope: scopeOkuCheckbox.value,
state,
disabled,
})
- const originalReturn = () =>
- [h(Primitive.button, {
+ return () => [
+ h(Primitive.button, {
'type': 'button',
'role': 'checkbox',
- 'aria-checked': computed(() => isIndeterminate(state.value) ? 'mixed' : state.value).value as any,
+ 'aria-checked': computed(() => isIndeterminate(state.value) ? 'mixed' : state.value).value,
'aria-required': required.value,
'data-state': computed(() => getState(state.value)).value,
'data-disabled': disabled.value ? '' : undefined,
'disabled': disabled.value,
'value': value.value,
- 'asChild': props.asChild,
- ...mergeProps(attrs, reactiveCheckboxProps),
+ ...mergeProps(attrs, otherProps, emits),
'ref': composedRefs,
- 'onKeydown': composeEventHandlers((e) => {
- emit('keydown', e)
+ 'onKeydown': composeEventHandlers((event) => {
+ emit('keydown', event)
}, (event) => {
// According to WAI ARIA, Checkboxes don't activate on enter keypress
if (event.key === 'Enter')
event.preventDefault()
}),
- 'onClick': composeEventHandlers((e) => {
- emit('click', e)
+ 'onClick': composeEventHandlers((event) => {
+ emit('click', event)
}, (event) => {
updateValue(isIndeterminate(state.value) ? true : !state.value)
if (isFormControl.value) {
+ // TODO: isPropagationStopped() is not supported in vue
// hasConsumerStoppedPropagationRef.value = event.isPropagationStopped()
+
// if checkbox is in a form, stop propagation from the button so that we only propagate
// one click event (from the input). We propagate changes from an input so that native
// form validation works and form events reflect checkbox updates.
@@ -195,35 +113,24 @@ const Checkbox = defineComponent({
event.stopPropagation()
}
}),
- }, {
- default: () => slots.default?.(),
- }), isFormControl.value && h(
- OkuBubbleInput,
- {
- bubbles: computed(() => !hasConsumerStoppedPropagationRef.value).value,
- name: name.value,
- value: value.value,
- checked: state.value,
- required: required.value,
- control: buttonRef.value,
- disabled: disabled.value,
- // We transform because the input is absolutely positioned but we have
- // rendered it **after** the button. This pulls it back to sit on top
- // of the button.
- style: { transform: 'translateX(-100%)' },
- },
- )]
-
- return originalReturn
+ }, () => slots.default?.()),
+
+ isFormControl.value && h(OkuBubbleInput, {
+ control: buttonRef.value,
+ bubbles: computed(() => !hasConsumerStoppedPropagationRef.value).value,
+ name: name.value,
+ value: value.value,
+ checked: state.value,
+ required: required.value,
+ disabled: disabled.value,
+ // We transform because the input is absolutely positioned but we have
+ // rendered it **after** the button. This pulls it back to sit on top
+ // of the button.
+ style: { transform: 'translateX(-100%)' },
+ }),
+ ]
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuCheckbox = Checkbox as typeof Checkbox &
- (new () => {
- $props: CheckboxNaviteElement
- })
-
-export {
- createCheckboxScope,
-}
+export const OkuCheckbox = Checkbox as typeof Checkbox & (new () => { $props: CheckboxNativeElement })
diff --git a/packages/components/checkbox/src/checkboxIndicator.ts b/packages/components/checkbox/src/checkboxIndicator.ts
deleted file mode 100644
index 62e255ad1..000000000
--- a/packages/components/checkbox/src/checkboxIndicator.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { PropType } from 'vue'
-import { computed, defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
-
-import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
-import { Primitive, primitiveProps } from '@oku-ui/primitive'
-
-import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
-
-import { OkuPresence } from '@oku-ui/presence'
-import { getState, isIndeterminate, scopeCheckboxProps } from './utils'
-import { useCheckboxInject } from './checkbox'
-
-export type CheckboxIndicatorNaviteElement = OkuElement<'span'>
-export type CheckboxElement = HTMLSpanElement
-
-export interface CheckboxIndicatorProps extends PrimitiveProps {
- forceMount?: true
-}
-
-export const checkboxIndicatorProps = {
- props: {
- forceMount: {
- type: Boolean as PropType,
- default: undefined,
- },
- },
- emits: {},
-}
-
-const INDICATOR_NAME = 'OkuCheckboxIndicator'
-
-const checkboxIndicator = defineComponent({
- name: INDICATOR_NAME,
- props: {
- ...checkboxIndicatorProps.props,
- ...scopeCheckboxProps,
- ...primitiveProps,
- },
- setup(props, { attrs, slots }) {
- const { forceMount, scopeOkuCheckbox, ...indicatorProps } = toRefs(props)
- const _reactive = reactive(indicatorProps)
- const reactiveIndicatorProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
-
- const forwardedRef = useForwardRef()
-
- const context = useCheckboxInject(INDICATOR_NAME, scopeOkuCheckbox.value)
-
- const originalReturn = () => h(OkuPresence, {
- present: computed(() => forceMount.value || isIndeterminate(context.state.value) || context.state.value === true).value,
- }, {
- default: () => h(Primitive.span, {
- 'ref': forwardedRef,
- 'data-state': computed(() => getState(context.state.value)).value,
- 'data-disabled': context.disabled?.value ? '' : undefined,
- ...mergeProps(attrs, reactiveIndicatorProps),
- 'style': { pointerEvents: 'none', ...attrs.style as any },
- }, {
- default: () => slots.default?.(),
- }),
- })
-
- return originalReturn
- },
-})
-
-// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuCheckboxIndicator = checkboxIndicator as typeof checkboxIndicator &
- (new () => {
- $props: CheckboxIndicatorNaviteElement
- })
diff --git a/packages/components/checkbox/src/index.ts b/packages/components/checkbox/src/index.ts
index 3a72cde5a..cdf52c98d 100644
--- a/packages/components/checkbox/src/index.ts
+++ b/packages/components/checkbox/src/index.ts
@@ -1,22 +1,15 @@
-export {
- OkuCheckbox,
- createCheckboxScope,
- checkboxProps,
-} from './checkbox'
+export { OkuCheckbox } from './checkbox'
+export { OkuCheckboxIndicator } from './checkbox-indicator'
export type {
CheckboxProps,
- CheckboxElement,
- CheckboxNaviteElement,
CheckboxEmits,
-} from './checkbox'
-
-export {
- OkuCheckboxIndicator,
- checkboxIndicatorProps,
-} from './checkboxIndicator'
+ CheckboxElement,
+ CheckboxNativeElement,
+} from './props'
export type {
CheckboxIndicatorProps,
- CheckboxIndicatorNaviteElement,
-} from './checkboxIndicator'
+ CheckboxIndicatorElement,
+ CheckboxIndicatorNativeElement,
+} from './props'
diff --git a/packages/components/checkbox/src/props.ts b/packages/components/checkbox/src/props.ts
new file mode 100644
index 000000000..69ff47270
--- /dev/null
+++ b/packages/components/checkbox/src/props.ts
@@ -0,0 +1,149 @@
+import type { PropType, Ref } from 'vue'
+import { ScopePropObject, createProvideScope } from '@oku-ui/provide'
+import type { Scope } from '@oku-ui/provide'
+import { primitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
+
+export type ScopeCheckbox = T & { scopeOkuCheckbox?: Scope }
+
+export const scopeCheckboxProps = {
+ scopeOkuCheckbox: {
+ ...ScopePropObject,
+ },
+}
+
+export const CHECKBOX_NAME = 'OkuCheckbox'
+export const CHECKBOX_INDICATOR_NAME = 'OkuCheckboxIndicator'
+export const CHECKBOX_BUBBLE_INPUT_NAME = 'OkuBubbleInput'
+
+/* -------------------------------------------------------------------------------------------------
+ * Checkbox - checkbox.ts
+ * ----------------------------------------------------------------------------------------------- */
+
+export type CheckboxNativeElement = Omit, 'checked' | 'defaultChecked'>
+export type CheckboxElement = HTMLButtonElement
+
+export const [createCheckboxProvider, createCheckboxScope] = createProvideScope(CHECKBOX_NAME)
+
+export const [checkboxProvider, useCheckboxInject]
+ = createCheckboxProvider(CHECKBOX_NAME)
+
+export type CheckedState = boolean | 'indeterminate'
+
+export type CheckboxInjectValue = {
+ state: Ref
+ disabled?: Ref
+}
+
+export interface CheckboxProps extends PrimitiveProps {
+ checked?: CheckedState
+ defaultChecked?: CheckedState
+ required?: boolean
+ name?: string
+ disabled?: boolean
+ value?: string
+ modelValue?: CheckedState
+}
+
+export type CheckboxEmits = {
+ 'update:modelValue': [checked: CheckedState]
+ 'checkedChange': [checked: CheckedState]
+ 'keydown': [event: KeyboardEvent]
+ 'click': [event: MouseEvent]
+}
+
+export const checkboxProps = {
+ props: {
+ modelValue: {
+ type: [Boolean, String] as PropType,
+ default: undefined,
+ },
+ checked: {
+ type: [Boolean, String] as PropType,
+ default: undefined,
+ },
+ defaultChecked: {
+ type: [Boolean, String] as PropType,
+ default: undefined,
+ },
+ required: {
+ type: Boolean as PropType,
+ },
+ name: {
+ type: String as PropType,
+ },
+ disabled: {
+ type: [Boolean, String] as PropType,
+ },
+ value: {
+ type: String as PropType,
+ default: 'on',
+ },
+ ...primitiveProps,
+ },
+ emits: {
+ // eslint-disable-next-line unused-imports/no-unused-vars
+ 'update:modelValue': (checked: CheckboxEmits['update:modelValue'][0]) => true,
+ // eslint-disable-next-line unused-imports/no-unused-vars
+ 'checkedChange': (checked: CheckboxEmits['checkedChange'][0]) => true,
+ // eslint-disable-next-line unused-imports/no-unused-vars
+ 'keydown': (event: CheckboxEmits['keydown'][0]) => true,
+ // eslint-disable-next-line unused-imports/no-unused-vars
+ 'click': (event: CheckboxEmits['click'][0]) => true,
+ },
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * CheckboxIndicator - checkbox-indicator.ts
+ * ----------------------------------------------------------------------------------------------- */
+
+export type CheckboxIndicatorNativeElement = OkuElement<'span'>
+export type CheckboxIndicatorElement = HTMLSpanElement
+
+export interface CheckboxIndicatorProps extends PrimitiveProps {
+ forceMount?: true
+}
+
+export const checkboxIndicatorProps = {
+ props: {
+ forceMount: {
+ type: Boolean as PropType,
+ default: undefined,
+ },
+ ...primitiveProps,
+ },
+ emits: {},
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * BubbleInput - bubble-input.ts
+ * ----------------------------------------------------------------------------------------------- */
+
+export type BubbleInputNativeElement = Omit, 'checked'>
+export type BubbleInputElement = HTMLInputElement
+
+export interface BubbleInputProps {
+ checked: CheckedState
+ control: HTMLElement | null
+ bubbles: boolean
+}
+
+export const bubbleInputProps = {
+ props: {
+ checked: {
+ type: [Boolean, String] as PropType,
+ required: true,
+ },
+ control: {
+ type: [HTMLElement, null] as PropType,
+ default: null,
+ required: true,
+ },
+ bubbles: {
+ type: Boolean as PropType,
+ default: true,
+ required: true,
+ },
+ },
+ emits: {},
+}
diff --git a/packages/components/checkbox/src/stories/Animated.vue b/packages/components/checkbox/src/stories/Animated.vue
new file mode 100644
index 000000000..33531d9ba
--- /dev/null
+++ b/packages/components/checkbox/src/stories/Animated.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+ Toggle indeterminate
+
+
diff --git a/packages/components/checkbox/src/stories/Checkbox.stories.ts b/packages/components/checkbox/src/stories/Checkbox.stories.ts
new file mode 100644
index 000000000..0c36eea60
--- /dev/null
+++ b/packages/components/checkbox/src/stories/Checkbox.stories.ts
@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import type { ICheckBoxProps } from './CheckboxDemo.vue'
+import OkuCheckbox from './CheckboxDemo.vue'
+
+interface StoryProps extends ICheckBoxProps {
+}
+
+interface StoryProps extends ICheckBoxProps { }
+
+const meta = {
+ title: 'Components/Checkbox',
+ component: OkuCheckbox,
+ args: {
+ template: 'Styled',
+ },
+} satisfies Meta & {
+ args: StoryProps
+}
+
+export default meta
+type Story = StoryObj & {
+ args: StoryProps
+}
+
+export const Styled: Story = {
+ args: {
+ template: 'Styled',
+ },
+ render: (args: any) => ({
+ components: { OkuCheckbox },
+ setup() {
+ return { args }
+ },
+ template: `
+
-
-
-
-
This checkbox is nested inside a label. The state is uncontrolled.
-
- Custom label
-
-
-
-
-
-
-
-
-
-
- Native label
-
-
- Label
-
-
-
-
-
-
-
-
-
-
- Native label + native checkbox
-
-
- Label
- Label
-
-
-
-
- Native label
-
-
- Label
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Toggle indeterminate
-
-
-
-
-
-
-
-
-
-
- V-Model
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
diff --git a/packages/components/checkbox/src/stories/Chromatic.vue b/packages/components/checkbox/src/stories/Chromatic.vue
new file mode 100644
index 000000000..637777fd3
--- /dev/null
+++ b/packages/components/checkbox/src/stories/Chromatic.vue
@@ -0,0 +1,68 @@
+
+
+
+ Uncontrolled
+ Unchecked
+
+
+
+ Checked
+
+
+
+ Controlled
+ Unchecked
+
+
+
+ Checked
+
+
+
+ Indeterminate
+
+
+
+ Disabled
+
+
+
+ Force mounted indicator
+
+
+
+ State attributes
+ Unchecked
+
+
+
+ Checked
+
+
+
+ Indeterminate
+
+
+
+ Disabled
+
+
+
+ Force mounted indicator
+
+
+
diff --git a/packages/components/checkbox/src/stories/Controlled.vue b/packages/components/checkbox/src/stories/Controlled.vue
new file mode 100644
index 000000000..b451e7daa
--- /dev/null
+++ b/packages/components/checkbox/src/stories/Controlled.vue
@@ -0,0 +1,20 @@
+
+
+
+ This checkbox is placed adjacent to its label. The state is controlled.
+ Label {{ ' ' }}
+
+
+
diff --git a/packages/components/checkbox/src/stories/Indeterminate.vue b/packages/components/checkbox/src/stories/Indeterminate.vue
new file mode 100644
index 000000000..ed29586fa
--- /dev/null
+++ b/packages/components/checkbox/src/stories/Indeterminate.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+ Toggle indeterminate
+
+
diff --git a/packages/components/checkbox/src/stories/Label.vue b/packages/components/checkbox/src/stories/Label.vue
new file mode 100644
index 000000000..748b2b03f
--- /dev/null
+++ b/packages/components/checkbox/src/stories/Label.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/packages/components/checkbox/src/stories/Styled.vue b/packages/components/checkbox/src/stories/Styled.vue
new file mode 100644
index 000000000..74f518385
--- /dev/null
+++ b/packages/components/checkbox/src/stories/Styled.vue
@@ -0,0 +1,51 @@
+
+
+
+ This checkbox is nested inside a label. The state is uncontrolled.
+
+ Custom label
+
+ Label{{ ' ' }}
+
+
+
+
+ Native label
+
+ Label{{ ' ' }}
+
+
+
+
+ Native label + native checkbox
+
+ Label
+
+ Custom label + htmlFor
+ Label
+
+
+
+ Native label + htmlFor
+ Label
+
+
+
+ Native label + native checkbox
+ Label
+
diff --git a/packages/components/checkbox/src/stories/WithinForm.vue b/packages/components/checkbox/src/stories/WithinForm.vue
new file mode 100644
index 000000000..595e134d7
--- /dev/null
+++ b/packages/components/checkbox/src/stories/WithinForm.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
diff --git a/packages/components/checkbox/src/stories/checkbox.stories.ts b/packages/components/checkbox/src/stories/checkbox.stories.ts
deleted file mode 100644
index 57e3e553f..000000000
--- a/packages/components/checkbox/src/stories/checkbox.stories.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-import type { ICheckBoxProps } from './CheckboxDemo.vue'
-import OkuCheckboxComponent from './CheckboxDemo.vue'
-
-interface StoryProps extends ICheckBoxProps {
-}
-
-const meta = {
- title: 'Components/Checkbox',
- args: {
- template: '#1',
- },
- component: OkuCheckboxComponent,
-
-} satisfies Meta
& {
- args: StoryProps
-}
-
-export default meta
-type Story = StoryObj & {
- args: StoryProps
-}
-
-export const Styled: Story = {
- args: {
- template: '#1',
- allshow: true,
- },
- render: (args: any) => ({
- components: { OkuCheckboxComponent },
- setup() {
- return { args }
- },
- template: `
- = T & { scopeOkuCheckbox?: Scope }
-
-export const scopeCheckboxProps = {
- scopeOkuCheckbox: {
- ...ScopePropObject,
- },
-}
+import type { CheckedState } from './props'
function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {
return checked === 'indeterminate'
@@ -19,7 +8,4 @@ function getState(checked: CheckedState) {
return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'
}
-export {
- isIndeterminate,
- getState,
-}
+export { isIndeterminate, getState }
diff --git a/packages/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap b/packages/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap
new file mode 100644
index 000000000..a53832b00
--- /dev/null
+++ b/packages/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap
@@ -0,0 +1,105 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`okuCheckbox > should render OkuCheckbox correctly 1`] = `
+"
+
+
+
+
"
+`;
+
+exports[`okuCheckbox > should render OkuCheckbox correctly 2`] = `"
+
+ Toggle indeterminate "
+`;
+
+exports[`okuCheckbox Stories > chromatic > should render correctly 1`] = `
+"Uncontrolled
+Unchecked
+Checked
+Controlled
+Unchecked
+Checked
+Indeterminate
+Disabled
+Force mounted indicator
+State attributes
+Unchecked
+Checked
+Indeterminate
+Disabled
+Force mounted indicator
+This checkbox is placed adjacent to its label. The state is controlled.
+
+
+ Toggle indeterminate "
+`;
+
+exports[`okuCheckbox Stories > styled > should render correctly 1`] = `
+"This checkbox is nested inside a label. The state is uncontrolled.
+Custom label
+Native label
+ Label
+Native label + native checkbox
+ Label
+Custom label + htmlFor
+Native label + htmlFor
+Label
+Native label + native checkbox
+Label
+(null)
+ watchEffect(() => {
+ // We use the `hidden` attribute to hide the nested input from both sighted users and the
+ // accessibility tree. This is perfectly valid so long as users don't override the display of
+ // `hidden` in CSS. Unfortunately axe doesn't recognize this, so we get a violation because the
+ // input doesn't have a label. This adds an additional `aria-hidden` attribute to the input to
+ // get around that.
+ // https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
+ containerRef.value?.querySelector('input')?.setAttribute('aria-hidden', 'true')
+ })
+
+ return {
+ containerRef,
+ INDICATOR_TEST_ID,
+ onCheckedChange,
+ }
+ },
+ template: `
+
+
+
+
+ `,
+})
+
+globalThis.ResizeObserver = class ResizeObserver {
+ cb: any
+ constructor(cb: any) {
+ this.cb = cb
+ }
+
+ observe() {
+ this.cb([{ borderBoxSize: { inlineSize: 0, blockSize: 0 } }])
+ }
+
+ unobserve() {}
+ disconnect() {}
+}
+
+describe('okuCheckbox', () => {
+ let wrapper: VueWrapper
+ let checkbox: DOMWrapper
+ // let indicator: DOMWrapper
+
+ beforeEach(() => {
+ wrapper = mount(CheckboxTest, {
+ attachTo: document.body,
+ })
+
+ checkbox = wrapper.find(`[role="${CHECKBOX_ROLE}"]`)
+ // indicator = wrapper.find(`[data-testid="${INDICATOR_TEST_ID}"]`)
+ })
+
+ it('should render OkuCheckbox correctly', () => {
+ expect(wrapper.html()).toMatchSnapshot()
+
+ expect(shallowMount(OkuCheckbox).html()).toMatchSnapshot()
+ })
+
+ it('should render OkuCheckboxIndicator correctly', () => {
+ const spy = vi.spyOn(globalThis.console, 'warn').mockImplementation(() => { })
+ const wrapper = () => shallowMount(OkuCheckboxIndicator)
+
+ expect(() => wrapper()).toThrowErrorMatchingSnapshot()
+
+ expect(spy).toHaveBeenCalled()
+
+ expect(spy.mock.calls[0][0]).toContain('[Vue warn]: injection "Symbol(OkuCheckbox)" not found.')
+ })
+
+ /**
+ * @vitest-environment jsdom
+ */
+ it('should have no accessibility violations', async () => {
+ expect(await axe(wrapper.element)).toHaveNoViolations()
+ })
+
+ describe('when clicking the checkbox', () => {
+ beforeEach(async () => {
+ checkbox.trigger('click')
+ // indicator = wrapper.find(`[data-testid="${INDICATOR_TEST_ID}"]`)
+ })
+
+ it('should render a visible indicator', () => {
+ // expect(indicator.exists()).toBe(true)
+ // indicator.exists() ? expect(indicator.isVisible()).toBe(true) : console.error('Indicator not found.')
+ expect(wrapper.find(`[data-testid="${INDICATOR_TEST_ID}"]`).isVisible()).toBe(true)
+ })
+
+ describe('and clicking the checkbox again', () => {
+ beforeEach(async () => {
+ checkbox.trigger('click')
+ })
+
+ it('should remove the indicator', () => {
+ // expect(indicator.exists()).toBe(false)
+ // expect(wrapper.find(`[data-testid="${INDICATOR_TEST_ID}"]`).isVisible()).toBe(false)
+ expect(wrapper.find(`[data-testid="${INDICATOR_TEST_ID}"]`).exists()).toBe(false)
+ })
+ })
+ })
+
+ describe('given a disabled Checkbox', () => {
+ let wrapper: VueWrapper
+
+ beforeEach(() => {
+ wrapper = mount(CheckboxTest, {
+ props: {
+ disabled: false,
+ },
+ attachTo: document.body,
+ })
+ })
+
+ /**
+ * @vitest-environment jsdom
+ */
+ it('should have no accessibility violations', async () => {
+ expect(await axe(wrapper.element)).toHaveNoViolations()
+ })
+ })
+
+ describe('given an uncontrolled `checked` Checkbox', () => {
+ let wrapper: VueWrapper
+ let checkbox: DOMWrapper
+ let indicator: DOMWrapper
+
+ // const onCheckedChange = vi.fn()
+
+ beforeEach(() => {
+ wrapper = mount(CheckboxTest, {
+ props: {
+ defaultChecked: true,
+ },
+ attachTo: document.body,
+ })
+
+ checkbox = wrapper.find(`[role="${CHECKBOX_ROLE}"]`)
+ indicator = wrapper.find(`[data-testid="${INDICATOR_TEST_ID}"]`)
+ })
+
+ /**
+ * @vitest-environment jsdom
+ */
+ it('should have no accessibility violations', async () => {
+ expect(await axe(wrapper.element)).toHaveNoViolations()
+ })
+
+ describe('when clicking the checkbox', () => {
+ beforeEach(async () => {
+ checkbox.trigger('click')
+ })
+
+ it('should remove the indicator', () => {
+ expect(indicator.exists()).toBe(false)
+ })
+
+ it('should call `onCheckedChange` event', () => {
+ expect(onCheckedChange).toHaveBeenCalled()
+ })
+ })
+
+ describe('given a controlled `checked` Checkbox', () => {
+ let wrapper: VueWrapper
+ let checkbox: DOMWrapper
+
+ // const onCheckedChange = vi.fn()
+
+ beforeEach(() => {
+ wrapper = mount(CheckboxTest, {
+ props: {
+ checked: true,
+ },
+ attachTo: document.body,
+ })
+
+ checkbox = wrapper.find(`[role="${CHECKBOX_ROLE}"]`)
+ })
+
+ describe('when clicking the checkbox', () => {
+ beforeEach(() => {
+ checkbox.trigger('click')
+ })
+
+ it('should call `onCheckedChange` event', () => {
+ expect(onCheckedChange).toHaveBeenCalled()
+ })
+ })
+ })
+ })
+})
+
+describe('okuCheckbox Stories', () => {
+ describe('styled', () => {
+ let wrapper: VueWrapper>
+
+ beforeEach(async () => {
+ wrapper = shallowMount(Styled, {
+ attachTo: document.body,
+ })
+ })
+
+ /**
+ * @vitest-environment jsdom
+ */
+ it('should have no accessibility violations', async () => {
+ expect(await axe(wrapper.element)).toHaveNoViolations()
+ })
+
+ it('should render correctly', () => {
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+ })
+
+ describe('controlled', () => {
+ let wrapper: VueWrapper>
+
+ beforeEach(async () => {
+ wrapper = shallowMount(Controlled, {
+ attachTo: document.body,
+ })
+ })
+
+ /**
+ * @vitest-environment jsdom
+ */
+ it('should have no accessibility violations', async () => {
+ expect(await axe(wrapper.element)).toHaveNoViolations()
+ })
+
+ it('should render correctly', () => {
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+ })
+
+ describe('indeterminate', () => {
+ let wrapper: VueWrapper>
+
+ beforeEach(async () => {
+ wrapper = shallowMount(Indeterminate, {
+ attachTo: document.body,
+ })
+ })
+
+ /**
+ * @vitest-environment jsdom
+ */
+ it('should have no accessibility violations', async () => {
+ expect(await axe(wrapper.element)).toHaveNoViolations()
+ })
+
+ it('should render correctly', () => {
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+ })
+
+ describe('withinForm', () => {
+ let wrapper: VueWrapper>
+
+ beforeEach(async () => {
+ wrapper = shallowMount(WithinForm, {
+ attachTo: document.body,
+ })
+ })
+
+ /**
+ * @vitest-environment jsdom
+ */
+ it('should have no accessibility violations', async () => {
+ expect(await axe(wrapper.element)).toHaveNoViolations()
+ })
+
+ it('should render correctly', () => {
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+ })
+
+ describe('animated', () => {
+ let wrapper: VueWrapper>
+
+ beforeEach(async () => {
+ wrapper = shallowMount(Animated, {
+ attachTo: document.body,
+ })
+ })
+
+ /**
+ * @vitest-environment jsdom
+ */
+ it('should have no accessibility violations', async () => {
+ expect(await axe(wrapper.element)).toHaveNoViolations()
+ })
+
+ it('should render correctly', () => {
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+ })
+
+ describe('chromatic', () => {
+ let wrapper: VueWrapper>
+
+ beforeEach(async () => {
+ wrapper = shallowMount(Chromatic, {
+ attachTo: document.body,
+ })
+ })
+
+ /**
+ * @vitest-environment jsdom
+ */
+ it('should have no accessibility violations', async () => {
+ expect(await axe(wrapper.element)).toHaveNoViolations()
+ })
+
+ it('should render correctly', () => {
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+ })
+})
diff --git a/packages/components/popover/src/popover.ts b/packages/components/popover/src/popover.ts
index 713f31627..315c31e8c 100644
--- a/packages/components/popover/src/popover.ts
+++ b/packages/components/popover/src/popover.ts
@@ -69,7 +69,7 @@ const popover = defineComponent({
return () => h(OkuPopper, {
...popperScope,
- }, slots)
+ }, () => slots.default?.())
},
})
diff --git a/packages/components/popover/src/popoverAnchor.ts b/packages/components/popover/src/popoverAnchor.ts
index eb0c433d1..7d0de36df 100644
--- a/packages/components/popover/src/popoverAnchor.ts
+++ b/packages/components/popover/src/popoverAnchor.ts
@@ -15,13 +15,14 @@ const popoverAnchor = defineComponent({
emits: popoverAnchorProps.emits,
setup(props, { attrs, slots }) {
const { scopeOkuPopover, ...anchorProps } = toRefs(props)
+
const _reactive = reactive(anchorProps)
- const reactiveAnchorProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+ const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
- const inject = usePopoverInject(ANCHOR_NAME, scopeOkuPopover?.value)
+ const forwardedRef = useForwardRef()
+ const inject = usePopoverInject(ANCHOR_NAME, scopeOkuPopover?.value)
const popperScope = usePopperScope(scopeOkuPopover?.value)
- const forwardedRef = useForwardRef()
watchEffect((onClean) => {
inject.onCustomAnchorAdd()
@@ -32,16 +33,11 @@ const popoverAnchor = defineComponent({
return () => h(OkuPopperAnchor, {
...popperScope,
- ...mergeProps(attrs, reactiveAnchorProps),
+ ...mergeProps(attrs, otherProps),
ref: forwardedRef,
- }, {
- default: () => slots.default?.(),
- })
+ }, () => slots.default?.())
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuPopoverAnchor = popoverAnchor as typeof popoverAnchor &
- (new () => {
- $props: PopoverAnchorNaviteElement
- })
+export const OkuPopoverAnchor = popoverAnchor as typeof popoverAnchor & (new () => { $props: PopoverAnchorNaviteElement })
diff --git a/packages/components/popover/src/popoverArrow.ts b/packages/components/popover/src/popoverArrow.ts
index beedd7e6c..ebed6e76e 100644
--- a/packages/components/popover/src/popoverArrow.ts
+++ b/packages/components/popover/src/popoverArrow.ts
@@ -14,24 +14,21 @@ const popoverArrow = defineComponent({
emits: popoverArrowProps.emits,
setup(props, { attrs, slots }) {
const { scopeOkuPopover, ...arrowProps } = toRefs(props)
+
const _reactive = reactive(arrowProps)
- const reactiveArrowProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+ const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
const forwardedRef = useForwardRef()
+
const popperScope = usePopperScope(scopeOkuPopover.value)
return () => h(OkuPopperArrow, {
...popperScope,
- ...mergeProps(attrs, reactiveArrowProps),
+ ...mergeProps(attrs, otherProps),
ref: forwardedRef,
- }, {
- default: () => slots.default?.(),
- })
+ }, () => slots.default?.())
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuPopoverArrow = popoverArrow as typeof popoverArrow &
- (new () => {
- $props: PopoverArrowNaviteElement
- })
+export const OkuPopoverArrow = popoverArrow as typeof popoverArrow & (new () => { $props: PopoverArrowNaviteElement })
diff --git a/packages/components/popover/src/popoverClose.ts b/packages/components/popover/src/popoverClose.ts
index 93662e8c3..662649fcf 100644
--- a/packages/components/popover/src/popoverClose.ts
+++ b/packages/components/popover/src/popoverClose.ts
@@ -14,27 +14,24 @@ const popoverClose = defineComponent({
},
setup(props, { attrs, slots, emit }) {
const { scopeOkuPopover, ...closeProps } = toRefs(props)
+
const _reactive = reactive(closeProps)
- const reactiveCloseProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+ const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
const forwardedRef = useForwardRef()
+
const inject = usePopoverInject(CLOSE_NAME, scopeOkuPopover?.value)
return () => h(Primitive.button, {
type: 'button',
- ...mergeProps(attrs, reactiveCloseProps),
+ ...mergeProps(attrs, otherProps),
ref: forwardedRef,
onClick: composeEventHandlers((event) => {
emit('click', event)
}, () => inject.onOpenChange(false)),
- }, {
- default: () => slots.default?.(),
- })
+ }, () => slots.default?.())
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuPopoverClose = popoverClose as typeof popoverClose &
- (new () => {
- $props: PopoverCloseNaviteElement
- })
+export const OkuPopoverClose = popoverClose as typeof popoverClose & (new () => { $props: PopoverCloseNaviteElement })
diff --git a/packages/components/popover/src/popoverContent.ts b/packages/components/popover/src/popoverContent.ts
index 76c53c83d..35e80117b 100644
--- a/packages/components/popover/src/popoverContent.ts
+++ b/packages/components/popover/src/popoverContent.ts
@@ -15,27 +15,28 @@ const popoverContent = defineComponent({
emits: popoverContentProps.emits,
setup(props, { attrs, slots }) {
const { scopeOkuPopover, forceMount: asForceMount, ...contentProps } = toRefs(props)
+
const _reactive = reactive(contentProps)
- const reactiveContentProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+ const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
+ const forwardedRef = useForwardRef()
const portalInject = usePortalInject(CONTENT_NAME, scopeOkuPopover.value)
const forceMount = computed(() => asForceMount.value || portalInject.forceMount?.value)
const inject = usePopoverInject(CONTENT_NAME, scopeOkuPopover.value)
- const forwardedRef = useForwardRef()
return () => h(OkuPresence, {
present: forceMount.value || inject.open.value,
- }, {
- default: () => inject.modal.value
- ? h(OkuPopoverContentModal, {
- ...mergeProps(attrs, reactiveContentProps),
- ref: forwardedRef,
- }, slots)
- : h(OkuPopoverContentNonModal, {
- ...mergeProps(attrs, reactiveContentProps),
- ref: forwardedRef,
- }, slots),
- })
+ }, () => [inject.modal.value
+ ? h(OkuPopoverContentModal, {
+ ...mergeProps(attrs, otherProps),
+ ref: forwardedRef,
+ }, () => slots.default?.())
+ : h(OkuPopoverContentNonModal, {
+ ...mergeProps(attrs, otherProps),
+ ref: forwardedRef,
+ }, () => slots.default?.()),
+ ])
},
})
diff --git a/packages/components/popover/src/popoverContentImpl.ts b/packages/components/popover/src/popoverContentImpl.ts
index 21edb0ebe..0504b7c07 100644
--- a/packages/components/popover/src/popoverContentImpl.ts
+++ b/packages/components/popover/src/popoverContentImpl.ts
@@ -23,14 +23,15 @@ const popoverContentImpl = defineComponent({
scopeOkuPopover,
...contentProps
} = toRefs(props)
+
const _reactive = reactive(contentProps)
- const reactiveContentProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+ const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
+ const forwardedRef = useForwardRef()
const inject = usePopoverInject(CONTENT_IMPL_NAME, scopeOkuPopover.value)
const popperScope = usePopperScope(scopeOkuPopover.value)
- const forwardedRef = useForwardRef()
-
useFocusGuards()
return () => h(OkuFocusScope, {
@@ -43,54 +44,45 @@ const popoverContentImpl = defineComponent({
onUnmountAutoFocus: (event) => {
emit('closeAutoFocus', event)
},
- }, {
- default: () => h(OkuDismissableLayer, {
- asChild: true,
- disableOutsidePointerEvents: disableOutsidePointerEvents.value,
- onInteractOutside: (event) => {
- emit('interactOutside', event)
- },
- onEscapeKeydown: (event) => {
- emit('escapeKeydown', event)
- },
- onPointerdownOutside: (event) => {
- emit('pointerdownOutside', event)
- },
- onFocusOutside: (event) => {
- emit('focusOutside', event)
- },
- onDismiss: () => {
- inject.onOpenChange(false)
+ }, () => h(OkuDismissableLayer, {
+ asChild: true,
+ disableOutsidePointerEvents: disableOutsidePointerEvents.value,
+ onInteractOutside: (event) => {
+ emit('interactOutside', event)
+ },
+ onEscapeKeydown: (event) => {
+ emit('escapeKeydown', event)
+ },
+ onPointerdownOutside: (event) => {
+ emit('pointerdownOutside', event)
+ },
+ onFocusOutside: (event) => {
+ emit('focusOutside', event)
+ },
+ onDismiss: () => {
+ inject.onOpenChange(false)
+ },
+ }, () => h(OkuPopperContent, {
+ 'data-state': getState(inject.open.value!),
+ 'role': 'dialog',
+ 'id': inject.contentId.value,
+ ...popperScope,
+ ...mergeProps(attrs, otherProps),
+ 'ref': forwardedRef,
+ 'style': {
+ ...attrs.style as any,
+ // re-namespace exposed content custom properties
+ ...{
+ '--oku-popover-content-transform-origin': 'var(--oku-popper-transform-origin)',
+ '--oku-popover-content-available-width': 'var(--oku-popper-available-width)',
+ '--oku-popover-content-available-height': 'var(--oku-popper-available-height)',
+ '--oku-popover-trigger-width': 'var(--oku-popper-anchor-width)',
+ '--oku-popover-trigger-height': 'var(--oku-popper-anchor-height)',
},
- }, {
- default: () => h(OkuPopperContent, {
- 'data-state': getState(inject.open.value!),
- 'role': 'dialog',
- 'id': inject.contentId.value,
- ...popperScope,
- ...mergeProps(attrs, reactiveContentProps),
- 'ref': forwardedRef,
- 'style': {
- ...attrs.style as any,
- // re-namespace exposed content custom properties
- ...{
- '--oku-popover-content-transform-origin': 'var(--oku-popper-transform-origin)',
- '--oku-popover-content-available-width': 'var(--oku-popper-available-width)',
- '--oku-popover-content-available-height': 'var(--oku-popper-available-height)',
- '--oku-popover-trigger-width': 'var(--oku-popper-anchor-width)',
- '--oku-popover-trigger-height': 'var(--oku-popper-anchor-height)',
- },
- },
- }, {
- default: () => slots.default?.(),
- }),
- }),
- })
+ },
+ }, () => slots.default?.())))
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuPopoverContentImpl = popoverContentImpl as typeof popoverContentImpl &
- (new () => {
- $props: PopoverContentImplNaviteElement
- })
+export const OkuPopoverContentImpl = popoverContentImpl as typeof popoverContentImpl & (new () => { $props: PopoverContentImplNaviteElement })
diff --git a/packages/components/popover/src/popoverContentModal.ts b/packages/components/popover/src/popoverContentModal.ts
index 95b9b279d..fdc1d351f 100644
--- a/packages/components/popover/src/popoverContentModal.ts
+++ b/packages/components/popover/src/popoverContentModal.ts
@@ -17,8 +17,8 @@ const popoverContentModal = defineComponent({
emits: popoverContentTypeProps.emits,
setup(props, { attrs, slots, emit }) {
const inject = usePopoverInject(CONTENT_NAME, props.scopeOkuPopover)
-
const contentRef = ref(null)
+
const forwardedRef = useForwardRef()
const composedRefs = useComposedRefs(contentRef, forwardedRef)
@@ -32,42 +32,35 @@ const popoverContentModal = defineComponent({
useScrollLock(contentRef, true)
- return () => h(OkuSlot, {}, {
- default: () => h(OkuPopoverContentImpl, {
- ...mergeProps(attrs, props),
- ref: composedRefs,
- trapFocus: inject.open.value,
- disableOutsidePointerEvents: true,
- onCloseAutoFocus: composeEventHandlers((el) => {
- emit('closeAutoFocus', el)
- }, (event) => {
- event.preventDefault()
- if (!isRightClickOutsideRef.value)
- inject.triggerRef.value?.focus()
- }),
- onPointerdownOutside: composeEventHandlers((el) => {
- emit('pointerdownOutside', el)
- }, (event) => {
- const originalEvent = event.detail.originalEvent
- const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true
- const isRightClick = originalEvent.button === 2 || ctrlLeftClick
-
- isRightClickOutsideRef.value = isRightClick
- }, { checkForDefaultPrevented: false }),
- // When focus is trapped, a `focusout` event may still happen.
- // We make sure we don't trigger our `onDismiss` in such case.
- onFocusOutside: composeEventHandlers((el) => {
- emit('focusOutside', el)
- }, event => event.preventDefault(), { checkForDefaultPrevented: false }),
- }, {
- default: () => slots.default?.(),
+ return () => h(OkuSlot, {}, () => h(OkuPopoverContentImpl, {
+ ...mergeProps(attrs, props),
+ ref: composedRefs,
+ trapFocus: inject.open.value,
+ disableOutsidePointerEvents: true,
+ onCloseAutoFocus: composeEventHandlers((el) => {
+ emit('closeAutoFocus', el)
+ }, (event) => {
+ event.preventDefault()
+ if (!isRightClickOutsideRef.value)
+ inject.triggerRef.value?.focus()
}),
- })
+ onPointerdownOutside: composeEventHandlers((el) => {
+ emit('pointerdownOutside', el)
+ }, (event) => {
+ const originalEvent = event.detail.originalEvent
+ const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true
+ const isRightClick = originalEvent.button === 2 || ctrlLeftClick
+
+ isRightClickOutsideRef.value = isRightClick
+ }, { checkForDefaultPrevented: false }),
+ // When focus is trapped, a `focusout` event may still happen.
+ // We make sure we don't trigger our `onDismiss` in such case.
+ onFocusOutside: composeEventHandlers((el) => {
+ emit('focusOutside', el)
+ }, event => event.preventDefault(), { checkForDefaultPrevented: false }),
+ }, () => slots.default?.()))
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuPopoverContentModal = popoverContentModal as typeof popoverContentModal &
- (new () => {
- $props: PopoverContentTypeNaviteElement
- })
+export const OkuPopoverContentModal = popoverContentModal as typeof popoverContentModal & (new () => { $props: PopoverContentTypeNaviteElement })
diff --git a/packages/components/popover/src/popoverContentNonModal.ts b/packages/components/popover/src/popoverContentNonModal.ts
index 601a22d57..6cdc36ccf 100644
--- a/packages/components/popover/src/popoverContentNonModal.ts
+++ b/packages/components/popover/src/popoverContentNonModal.ts
@@ -16,11 +16,11 @@ const popoverContentNonModal = defineComponent({
setup(props, { attrs, slots, emit }) {
const inject = usePopoverInject(CONTENT_NAME, props.scopeOkuPopover)
+ const forwardedRef = useForwardRef()
+
const hasInteractedOutsideRef = ref(false)
const hasPointerDownOutsideRef = ref(false)
- const forwardedRef = useForwardRef()
-
return () => h(OkuPopoverContentImpl, {
...mergeProps(attrs, props),
ref: forwardedRef,
@@ -63,12 +63,9 @@ const popoverContentNonModal = defineComponent({
if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.value)
event.preventDefault()
}),
- }, slots)
+ }, () => slots.default?.())
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuPopoverContentNonModal = popoverContentNonModal as typeof popoverContentNonModal &
- (new () => {
- $props: PopoverContentTypeNaviteElement
- })
+export const OkuPopoverContentNonModal = popoverContentNonModal as typeof popoverContentNonModal & (new () => { $props: PopoverContentTypeNaviteElement })
diff --git a/packages/components/popover/src/popoverPortal.ts b/packages/components/popover/src/popoverPortal.ts
index bd8a18636..f9f4739af 100644
--- a/packages/components/popover/src/popoverPortal.ts
+++ b/packages/components/popover/src/popoverPortal.ts
@@ -12,6 +12,7 @@ const popoverPortal = defineComponent({
},
setup(props, { slots }) {
const { container, forceMount, scopeOkuPopover } = toRefs(props)
+
const inject = usePopoverInject(PORTAL_NAME, scopeOkuPopover?.value)
portalProvider({
@@ -21,12 +22,10 @@ const popoverPortal = defineComponent({
return () => h(OkuPresence, {
present: forceMount?.value || inject.open.value,
- }, {
- default: () => h(OkuPortal, {
- asChild: true,
- container: container?.value,
- }, slots),
- })
+ }, () => h(OkuPortal, {
+ asChild: true,
+ container: container?.value,
+ }, () => slots.default?.()))
},
})
diff --git a/packages/components/popover/src/popoverTrigger.ts b/packages/components/popover/src/popoverTrigger.ts
index 7095043d5..7d8dae69f 100644
--- a/packages/components/popover/src/popoverTrigger.ts
+++ b/packages/components/popover/src/popoverTrigger.ts
@@ -16,50 +16,44 @@ const popoverTrigger = defineComponent({
emits: popoverTriggerProps.emits,
setup(props, { attrs, slots, emit }) {
const { scopeOkuPopover, ...triggerProps } = toRefs(props)
+
const _reactive = reactive(triggerProps)
- const reactiveTriggerProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+ const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
- const inject = usePopoverInject(TRIGGER_NAME, scopeOkuPopover?.value)
+ const forwardedRef = useForwardRef()
+ const inject = usePopoverInject(TRIGGER_NAME, scopeOkuPopover?.value)
const popperScope = usePopperScope(scopeOkuPopover?.value)
- const forwardedRef = useForwardRef()
const composedTriggerRef = useComposedRefs(forwardedRef, (el) => {
if (el)
inject.triggerRef.value = el as HTMLButtonElement
})
return () => {
- const trigger
- = h(Primitive.button, {
- 'type': 'button',
- 'aria-haspopup': 'dialog',
- 'aria-expanded': inject.open.value,
- 'aria-controls': inject.contentId.value,
- 'data-state': getState(inject.open.value),
- ...mergeProps(attrs, reactiveTriggerProps),
- 'ref': composedTriggerRef,
- 'onClick': composeEventHandlers((el) => {
- emit('click', el)
- }, inject.onOpenToggle),
- }, {
- default: () => slots.default?.(),
- })
+ const trigger = h(Primitive.button, {
+ 'type': 'button',
+ 'aria-haspopup': 'dialog',
+ 'aria-expanded': inject.open.value,
+ 'aria-controls': inject.contentId.value,
+ 'data-state': getState(inject.open.value),
+ ...mergeProps(attrs, otherProps),
+ 'ref': composedTriggerRef,
+ 'onClick': composeEventHandlers((el) => {
+ emit('click', el)
+ }, inject.onOpenToggle),
+ }, () => slots.default?.())
- return inject.hasCustomAnchor.value
+ return [inject.hasCustomAnchor.value
? trigger
: h(OkuPopperAnchor, {
asChild: true,
...popperScope,
- }, {
- default: () => trigger,
- })
+ }, () => trigger),
+ ]
}
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuPopoverTrigger = popoverTrigger as typeof popoverTrigger &
- (new () => {
- $props: PopoverTriggerNaviteElement
- })
+export const OkuPopoverTrigger = popoverTrigger as typeof popoverTrigger & (new () => { $props: PopoverTriggerNaviteElement })
diff --git a/packages/components/popover/tests/__snapshots__/popover.test.ts.snap b/packages/components/popover/tests/__snapshots__/popover.test.ts.snap
index 030ac13d7..0487433f9 100644
--- a/packages/components/popover/tests/__snapshots__/popover.test.ts.snap
+++ b/packages/components/popover/tests/__snapshots__/popover.test.ts.snap
@@ -1,1704 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`OkuPopper > Animated > renders correctly 1`] = `
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuPopper > Boundary > renders correctly 1`] = `
-
-
-
-
-
-
-
-
- out of bound out of bound out of bound out of bound out of bound out of bound out of bound out of bound out of bound
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuPopper > Controlled > renders correctly 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
- close
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuPopper > CustomAnchor > renders correctly 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Item
-
- open
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Item
-
- open
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Non modal (default)
-
-
-
- open
-
-
-
-
-
-
-
-
- Modal
-
-
-
- open
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Non modal (default)
-
-
-
- open
-
-
-
-
-
-
-
- Modal
-
-
-
- open
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Focus popover button
-
-
-
- Open popover
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Focus popover button
-
-
-
- Open popover
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- close
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`OkuPopper > WithSlottedTrigger > renders correctly 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- open
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- open
-
-
-
-
-
-`;
-
exports[`okuPopper > animated > renders correctly 1`] = `
animated > renders correctly 1`] = `
style="display: flex; align-items: center; justify-content: center; height: 200vh;"
>
+
+
animated > renders correctly 1`] = `
>
open
+
+
+
+
animated > should be able to close 1`] = `
style="display: flex; align-items: center; justify-content: center; height: 200vh;"
>
+
+
animated > should be able to close 1`] = `
>
open
+
+
@@ -1836,6 +147,8 @@ exports[`okuPopper > boundary > renders correctly 1`] = `
style="border: 3px dashed red; width: 200px; height: 200px;"
>
+
+
boundary > renders correctly 1`] = `
>
open
+
+
+
+
boundary > should be able to close 1`] = `
style="border: 3px dashed red; width: 200px; height: 200px;"
>
+
+
boundary > should be able to close 1`] = `
>
open
+
+
@@ -1950,6 +271,8 @@ exports[`okuPopper > controlled > renders correctly 1`] = `
style="display: flex; align-items: center; justify-content: center; height: 50vh;"
>
+
+
controlled > renders correctly 1`] = `
>
close
+
+
+
+
controlled > should be able to close 1`] = `
style="display: flex; align-items: center; justify-content: center; height: 50vh;"
>
+
+
controlled > should be able to close 1`] = `
>
open
+
+
@@ -2103,10 +434,12 @@ exports[`okuPopper > customAnchor > renders correctly 1`] = `
data-v-app=""
>
+
Item
+
customAnchor > renders correctly 1`] = `
>
open
+
+
+
+
customAnchor > should be able to close 1`] = `
data-v-app=""
>
+
Item
+
customAnchor > should be able to close 1`] = `
>
open
+
+
forcedMount > renders correctly 1`] = `
>
open
+
+
+
+
forcedMount > should be able to close 1`] = `
style="display: flex; align-items: center; justify-content: center; height: 200vh;"
>
+
+
forcedMount > should be able to close 1`] = `
>
open
+
+
+
+
modality > renders correctly 1`] = `
Non modal (default)
+
+
modality > renders correctly 1`] = `
>
open
+
+
+
+
![\\"a](\\"https://images.unsplash.com/photo-1682686580224-cd46ea1a6950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80\\")
- 
| 
| 
+[](https://www.npmjs.com/package/@oku-ui/checkbox) [](https://www.npmjs.com/package/@oku-ui/checkbox)
## Installation
@@ -12,4 +12,4 @@ A control that allows the user to toggle between checked and not checked.
$ pnpm add @oku-ui/checkbox
```
-[Documentation](https://oku-ui.com/primitives/components/checkbox)
+[Documentation](https://oku-ui.com/primitives/components/checkbox)
\ No newline at end of file
diff --git a/packages/components/checkbox/src/__snapshots__/checkbox.test.ts.snap b/packages/components/checkbox/src/__snapshots__/checkbox.test.ts.snap
deleted file mode 100644
index 5ae21bb41..000000000
--- a/packages/components/checkbox/src/__snapshots__/checkbox.test.ts.snap
+++ /dev/null
@@ -1,273 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`OkuCheckbox > can be checked 1`] = `
-