From 935b50096fe6bafa573c52804306c2a154cc95bf Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Fri, 4 Aug 2023 09:00:59 +0100 Subject: [PATCH 01/23] feat: dismissable layer component --- .../components/dismissable-layer/README.md | 10 + .../dismissable-layer/build.config.ts | 12 + .../components/dismissable-layer/package.json | 50 +++ .../src/DismissableLayer.test.ts | 7 + .../dismissable-layer/src/DismissableLayer.ts | 356 ++++++++++++++++++ .../src/DismissableLayerBranch.ts | 12 + .../components/dismissable-layer/src/index.ts | 1 + .../components/dismissable-layer/src/util.ts | 184 +++++++++ .../dismissable-layer/tsconfig.json | 10 + .../dismissable-layer/tsup.config.ts | 22 ++ packages/components/switch/src/Switch.ts | 18 +- .../{src => tests}/useEscapeKeydown.test.ts | 2 +- packages/core/use-composable/tsconfig.json | 2 +- pnpm-lock.yaml | 22 ++ scripts/_utils.ts | 32 +- 15 files changed, 726 insertions(+), 14 deletions(-) create mode 100644 packages/components/dismissable-layer/README.md create mode 100644 packages/components/dismissable-layer/build.config.ts create mode 100644 packages/components/dismissable-layer/package.json create mode 100644 packages/components/dismissable-layer/src/DismissableLayer.test.ts create mode 100644 packages/components/dismissable-layer/src/DismissableLayer.ts create mode 100644 packages/components/dismissable-layer/src/DismissableLayerBranch.ts create mode 100644 packages/components/dismissable-layer/src/index.ts create mode 100644 packages/components/dismissable-layer/src/util.ts create mode 100644 packages/components/dismissable-layer/tsconfig.json create mode 100644 packages/components/dismissable-layer/tsup.config.ts rename packages/core/use-composable/{src => tests}/useEscapeKeydown.test.ts (96%) diff --git a/packages/components/dismissable-layer/README.md b/packages/components/dismissable-layer/README.md new file mode 100644 index 000000000..5ed5eadff --- /dev/null +++ b/packages/components/dismissable-layer/README.md @@ -0,0 +1,10 @@ +# `@oku-ui/example` + +## Installation + +```sh +$ pnpm add @oku-ui/example +``` + +## Usage +... \ No newline at end of file diff --git a/packages/components/dismissable-layer/build.config.ts b/packages/components/dismissable-layer/build.config.ts new file mode 100644 index 000000000..b972b9a78 --- /dev/null +++ b/packages/components/dismissable-layer/build.config.ts @@ -0,0 +1,12 @@ +import { defineBuildConfig } from 'unbuild' + +export default defineBuildConfig({ + entries: [ + { + builder: 'mkdist', + input: './src/', + pattern: ['**/!(*.test|*.stories).ts'], + }, + ], + declaration: true, +}) diff --git a/packages/components/dismissable-layer/package.json b/packages/components/dismissable-layer/package.json new file mode 100644 index 000000000..bbb946698 --- /dev/null +++ b/packages/components/dismissable-layer/package.json @@ -0,0 +1,50 @@ +{ + "name": "@oku-ui/dismissable-layer", + "type": "module", + "version": "0.0.0", + "license": "MIT", + "source": "src/index.ts", + "funding": "https://github.com/sponsors/productdevbook", + "homepage": "https://oku-ui.com/primitives", + "repository": { + "type": "git", + "url": "git+https://github.com/oku-ui/primitives.git", + "directory": "packages/components/dismissable-layer" + }, + "bugs": { + "url": "https://github.com/oku-ui/primitives/issues" + }, + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs" + } + }, + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "files": [ + "dist" + ], + "engines": { + "node": ">=18" + }, + "scripts": { + "build": "tsup", + "dev": "tsup --watch" + }, + "peerDependencies": { + "vue": "^3.3.0" + }, + "dependencies": { + "@oku-ui/primitive": "latest", + "@oku-ui/provide": "latest", + "@oku-ui/use-composable": "latest", + "@oku-ui/utils": "latest" + }, + "devDependencies": { + "tsconfig": "workspace:^" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/components/dismissable-layer/src/DismissableLayer.test.ts b/packages/components/dismissable-layer/src/DismissableLayer.test.ts new file mode 100644 index 000000000..958ce8854 --- /dev/null +++ b/packages/components/dismissable-layer/src/DismissableLayer.test.ts @@ -0,0 +1,7 @@ +import { describe, expect, it } from 'vitest' + +describe('example', () => { + it('should work', () => { + expect('example').toBe('example') + }) +}) diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts new file mode 100644 index 000000000..018de677d --- /dev/null +++ b/packages/components/dismissable-layer/src/DismissableLayer.ts @@ -0,0 +1,356 @@ +import { + useComposedRefs, + useEscapeKeydown, + useForwardRef, +} from '@oku-ui/use-composable' +import type { + ComponentPublicInstanceRef, + ElementType, + InstanceTypeRef, + MergeProps, + PrimitiveProps, +} from '@oku-ui/primitive' +import { + Primitive, +} from '@oku-ui/primitive' +import type { + PropType, + Ref, +} from 'vue' +import { + computed, + defineComponent, + h, + ref, + toRefs, + toValue, + unref, + watch, + watchEffect, +} from 'vue' +import type { Scope } from '@oku-ui/provide' +import { createProvideScope } from '@oku-ui/provide' +import type { DismissableLayerBranchElement } from './DismissableLayerBranch' +import { useFocusOutside, usePointerDownOutside } from './util' + +/* ------------------------------------------------------------------------------------------------- + * DismissableLayer + * ----------------------------------------------------------------------------------------------- */ + +const DISMISSABLE_LAYER_NAME = 'DismissableLayer' + +export const CONTEXT_UPDATE = 'dismissableLayer.update' +export const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside' +export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside' + +let originalBodyPointerEvents: string + +const DISMISSABLE_NAME = 'OkuDismissableLayer' + +type DismissableLayerElement = ElementType<'div'> + +type DismissableLayerContextValue = { + layers: Ref> + layersWithOutsidePointerEventsDisabled: Ref> + branches: Ref> +} + +export type PointerDownOutsideEvent = CustomEvent<{ + originalEvent: PointerEvent +}> +export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }> + +interface DismissableLayerProps extends PrimitiveProps { + /** + * When `true`, hover/focus/click interactions will be disabled on elements outside + * the `DismissableLayer`. Users will need to click twice on outside elements to + * interact with them: once to close the `DismissableLayer`, and again to trigger the element. + */ + disableOutsidePointerEvents?: boolean + /** + * Event handler called when the escape key is down. + * Can be prevented. + */ + onEscapeKeyDown?: (event: KeyboardEvent) => void + /** + * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. + * Can be prevented. + */ + onPointerDownOutside?: (event: PointerDownOutsideEvent) => void + /** + * Event handler called when the focus moves outside of the `DismissableLayer`. + * Can be prevented. + */ + onFocusOutside?: (event: FocusOutsideEvent) => void + /** + * Event handler called when an interaction happens outside the `DismissableLayer`. + * Specifically, when a `pointerdown` event happens outside or focus moves outside of it. + * Can be prevented. + */ + onInteractOutside?: ( + event: PointerDownOutsideEvent | FocusOutsideEvent + ) => void + /** + * Handler called when the `DismissableLayer` should be dismissed + */ + onDismiss?: () => void +} + +export const [createDismissableLayerProvide, _createDismissableLayerScope] + = createProvideScope(DISMISSABLE_NAME) + +export const [dismissableLayerProvider, useDismissableLayerInject] + = createDismissableLayerProvide(DISMISSABLE_NAME) + +const DismissableLayer = defineComponent({ + name: DISMISSABLE_NAME, + inheritAttrs: false, + props: { + disableOutsidePointerEvents: { + type: Boolean, + default: false, + }, + onEscapeKeyDown: { + type: Function as PropType, + required: false, + }, + onPointerDownOutside: { + type: Function as PropType, + required: false, + }, + onInteractOutside: { + type: Function as PropType, + required: false, + }, + onFocusOutside: { + type: Function as PropType, + required: false, + }, + onDismiss: { + type: Function as PropType<() => void>, + required: false, + }, + asChild: { + type: Boolean, + default: undefined, + }, + scopeDismissableLayer: { + type: Object as unknown as PropType, + required: false, + }, + }, + emits: [ + 'onFocusOutside', + 'onDismiss', + 'onPointerDownOutside', + 'onInteractOutside', + 'onEscapeKeyDown', + ], + setup(props, { attrs }) { + const { + onDismiss, + onFocusOutside, + onEscapeKeyDown, + onInteractOutside, + onPointerDownOutside, + disableOutsidePointerEvents, + scopeDismissableLayer, + } = toRefs(props) + + const { ...dismissableLayerAttrs } = attrs + + const layers = ref>(new Set()) + + const layersWithOutsidePointerEventsDisabled = ref< + Set + >(new Set()) + + const branches = ref>(new Set()) + + dismissableLayerProvider({ + layers, + layersWithOutsidePointerEventsDisabled, + branches, + scope: scopeDismissableLayer.value, + }) + + const node = ref | null>(null) + + const forwardedRef = useForwardRef() + const composedRefs = useComposedRefs(node, forwardedRef) + + const ownerDocument = computed( + () => node.value?.$el?.ownerDocument ?? globalThis?.document, + ) + + const context = toValue( + useDismissableLayerInject(DISMISSABLE_NAME, scopeDismissableLayer.value), + ) + + watch( + () => context, + () => { + if (context?.layers.value) + layers.value = context.layers.value + if (context?.layersWithOutsidePointerEventsDisabled.value) { + layersWithOutsidePointerEventsDisabled.value + = context.layersWithOutsidePointerEventsDisabled.value + } + }, + { immediate: true, deep: true }, + ) + + const isBodyPointerEventsDisabled = computed( + () => context.layersWithOutsidePointerEventsDisabled.value.size > 0, + ) + + const index = computed(() => { + return node.value?.$el + ? Array.from(layers.value).indexOf(node.value.$el as any) + : -1 + }) + + const isPointerEventsEnabled = computed(() => { + const layers = Array.from(context.layers.value) + const [highestLayerWithOutsidePointerEventsDisabled] = [ + ...context.layersWithOutsidePointerEventsDisabled.value, + ].slice(-1) + const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf( + highestLayerWithOutsidePointerEventsDisabled, + ) + return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex + }) + + const pointerDownOutside = usePointerDownOutside((event) => { + const target = event.target as HTMLElement + const isPointerDownOnBranch = [...context.branches.value].some( + (branch: any) => branch.contains(target), + ) + if (!isPointerEventsEnabled.value || isPointerDownOnBranch) + return + onPointerDownOutside.value?.(event) + onInteractOutside.value?.(event) + if (!event.defaultPrevented) + onDismiss.value?.() + }, ownerDocument) + + const focusOutside = useFocusOutside((event) => { + const target = event.target as HTMLElement + const isFocusInBranch = [...context.branches.value].some((branch: any) => + branch.contains(target), + ) + if (isFocusInBranch) + return + onFocusOutside.value?.(event) + onInteractOutside.value?.(event) + if (!event.defaultPrevented) + onDismiss.value?.() + }, unref(ownerDocument)) + + useEscapeKeydown((event) => { + const isHighestLayer = index.value === context.layers.value.size - 1 + if (!isHighestLayer) + return + onEscapeKeyDown.value?.(event) + if (!event.defaultPrevented && onDismiss) { + event.preventDefault() + onDismiss.value?.() + } + }, unref(ownerDocument)) + + watchEffect((onInvalidate) => { + if (!node.value) + return + if (disableOutsidePointerEvents.value) { + if (context.layersWithOutsidePointerEventsDisabled.value.size === 0) { + originalBodyPointerEvents + = ownerDocument.value.body.style.pointerEvents + ownerDocument.value.body.style.pointerEvents = 'none' + } + context.layersWithOutsidePointerEventsDisabled.value.add( + node.value as any, + ) + } + context.layers.value.add(node.value as any) + + onInvalidate(() => { + if ( + disableOutsidePointerEvents.value + && context.layersWithOutsidePointerEventsDisabled.value.size === 1 + ) { + ownerDocument.value.body.style.pointerEvents + = originalBodyPointerEvents + } + }) + }) + + /** + * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect + * because a change to `disableOutsidePointerEvents` would remove this layer from the stack + * and add it to the end again so the layering order wouldn't be _creation order_. + * We only want them to be removed from context stacks when unmounted. + */ + watchEffect((onInvalidate) => { + onInvalidate(() => { + if (!node.value) + return + context.layers.value.delete(node.value as any) + context.layersWithOutsidePointerEventsDisabled.value.delete( + node.value as any, + ) + }) + }) + + watchEffect((onInvalidate) => { + const handleUpdate = () => {} + document.addEventListener(CONTEXT_UPDATE, handleUpdate) + + onInvalidate(() => + document.removeEventListener(CONTEXT_UPDATE, handleUpdate), + ) + }) + + const originalReturn = () => + h(Primitive.div, { + ref: composedRefs, + style: { + pointerEvents: isBodyPointerEventsDisabled.value + ? isPointerEventsEnabled.value + ? 'auto' + : 'none' + : undefined, + ...(dismissableLayerAttrs.style as CSSPropertyRule), + }, + ...dismissableLayerAttrs, + // onFocusCapture: composeEventHandlers( + // onFocusCapture, + // focusOutside.onFocusCapture + // ), + // onBlurCapture: composeEventHandlers( + // props.onBlurCapture, + // focusOutside.onBlurCapture + // ), + // onPointerDownCapture: composeEventHandlers( + // onPointerDownCapture, + // pointerDownOutside.onPointerDownCapture + // ), + }) + }, +}) + +export type _DismissableLayerEl = HTMLDivElement + +type _DismissableLayer = MergeProps< + DismissableLayerProps, + DismissableLayerElement +> + +type InstanceSwitchType = InstanceTypeRef< + typeof DismissableLayer, + _DismissableLayerEl +> + +const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer & +(new () => { $props: _DismissableLayer }) + +export { OkuDismissableLayer } diff --git a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts new file mode 100644 index 000000000..0cee2e553 --- /dev/null +++ b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts @@ -0,0 +1,12 @@ +import type { ElementType, PrimitiveProps } from '@oku-ui/primitive' + +/* ------------------------------------------------------------------------------------------------- + * DismissableLayerBranch + * ----------------------------------------------------------------------------------------------- */ + +const BRANCH_NAME = 'DismissableLayerBranch' +type DismissableLayerBranchElement = ElementType<'div'> + +interface DismissableLayerBranchProps extends PrimitiveProps {} + +export { DismissableLayerBranchElement } diff --git a/packages/components/dismissable-layer/src/index.ts b/packages/components/dismissable-layer/src/index.ts new file mode 100644 index 000000000..1e35759d6 --- /dev/null +++ b/packages/components/dismissable-layer/src/index.ts @@ -0,0 +1 @@ +export * from './DismissableLayerBranch' diff --git a/packages/components/dismissable-layer/src/util.ts b/packages/components/dismissable-layer/src/util.ts new file mode 100644 index 000000000..a8fe0a4a5 --- /dev/null +++ b/packages/components/dismissable-layer/src/util.ts @@ -0,0 +1,184 @@ +import { useCallbackRef } from '@oku-ui/use-composable' +import type { ComputedRef } from 'vue' +import { ref, unref, watchEffect } from 'vue' +import type { + FocusOutsideEvent, + PointerDownOutsideEvent, +} from './DismissableLayer' +import { + CONTEXT_UPDATE, + FOCUS_OUTSIDE, + POINTER_DOWN_OUTSIDE, +} from './DismissableLayer' + +/** + * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup` + * to mimic layer dismissing behaviour present in OS. + * Returns props to pass to the node we want to check for outside events. + */ +function usePointerDownOutside( + onPointerDownOutside?: (event: PointerDownOutsideEvent) => void, + ownerDocument: ComputedRef | Document = globalThis?.document, +) { + const handlePointerDownOutside = useCallbackRef( + onPointerDownOutside, + ) as EventListener + + const isPointerInsideTreeRef = ref(false) + const handleClickRef = ref(() => {}) + + const document = unref(ownerDocument) + + watchEffect((onInvalidate) => { + const handlePointerDown = (event: PointerEvent) => { + if (event.target && !isPointerInsideTreeRef.value) { + const eventDetail = { originalEvent: event } + + function handleAndDispatchPointerDownOutsideEvent() { + handleAndDispatchCustomEvent( + POINTER_DOWN_OUTSIDE, + handlePointerDownOutside, + eventDetail, + { discrete: true }, + ) + } + + /** + * On touch devices, we need to wait for a click event because browsers implement + * a ~350ms delay between the time the user stops touching the display and when the + * browser executres events. We need to ensure we don't reactivate pointer-events within + * this timeframe otherwise the browser may execute events that should have been prevented. + * + * Additionally, this also lets us deal automatically with cancellations when a click event + * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc. + * + * This is why we also continuously remove the previous listener, because we cannot be + * certain that it was raised, and therefore cleaned-up. + */ + if (event.pointerType === 'touch') { + document.removeEventListener('click', handleClickRef.value) + handleClickRef.value = handleAndDispatchPointerDownOutsideEvent + document.addEventListener('click', handleClickRef.value, { + once: true, + }) + } + else { + handleAndDispatchPointerDownOutsideEvent() + } + } + else { + // We need to remove the event listener in case the outside click has been canceled. + // See: https://github.com/radix-ui/primitives/issues/2171 + document.removeEventListener('click', handleClickRef.value) + } + isPointerInsideTreeRef.value = false + } + /** + * if this hook executes in a component that mounts via a `pointerdown` event, the event + * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid + * this by delaying the event listener registration on the document. + * This is not specific, but rather how the DOM works, ie: + * ``` + * button.addEventListener('pointerdown', () => { + * console.log('I will log'); + * document.addEventListener('pointerdown', () => { + * console.log('I will also log'); + * }) + * }); + */ + const timerId = window.setTimeout(() => { + document.addEventListener('pointerdown', handlePointerDown) + }, 0) + + onInvalidate(() => { + window.clearTimeout(timerId) + document.removeEventListener('pointerdown', handlePointerDown) + document.removeEventListener('click', handleClickRef.value) + }) + }) + + return { + // ensures we check component tree (not just DOM tree) + onPointerDownCapture: () => (isPointerInsideTreeRef.value = true), + } +} + +/** + * Listens for when focus happens outside a react subtree. + * Returns props to pass to the root (node) of the subtree we want to check. + */ +function useFocusOutside( + onFocusOutside?: (event: FocusOutsideEvent) => void, + ownerDocument: ComputedRef | Document = globalThis?.document, +) { + const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener + const isFocusInsideReactTreeRef = ref(false) + + const document = unref(ownerDocument) + + watchEffect((onInvalidate) => { + const handleFocus = (event: FocusEvent) => { + if (event.target && !isFocusInsideReactTreeRef.value) { + const eventDetail = { originalEvent: event } + handleAndDispatchCustomEvent( + FOCUS_OUTSIDE, + handleFocusOutside, + eventDetail, + { + discrete: false, + }, + ) + } + } + document.addEventListener('focusin', handleFocus) + + onInvalidate(() => { + document.removeEventListener('focusin', handleFocus) + }) + }) + + return { + onFocusCapture: () => (isFocusInsideReactTreeRef.value = true), + onBlurCapture: () => (isFocusInsideReactTreeRef.value = false), + } +} + +function dispatchUpdate() { + const event = new CustomEvent(CONTEXT_UPDATE) + document.dispatchEvent(event) +} + +function handleAndDispatchCustomEvent< + E extends CustomEvent, + OriginalEvent extends Event, +>( + name: string, + handler: ((event: E) => void) | undefined, + detail: { originalEvent: OriginalEvent } & (E extends CustomEvent + ? D + : never), + { discrete }: { discrete: boolean }, +) { + const target = detail.originalEvent.target + const event = new CustomEvent(name, { + bubbles: false, + cancelable: true, + detail, + }) + if (handler) + target.addEventListener(name, handler as EventListener, { once: true }) + + if (discrete) { + // dispatchDiscreteCustomEvent(target, event); + } + else { + target.dispatchEvent(event) + } +} + +export { + usePointerDownOutside, + handleAndDispatchCustomEvent, + useFocusOutside, + dispatchUpdate, +} diff --git a/packages/components/dismissable-layer/tsconfig.json b/packages/components/dismissable-layer/tsconfig.json new file mode 100644 index 000000000..b8dfa9041 --- /dev/null +++ b/packages/components/dismissable-layer/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "tsconfig/node16.json", + "compilerOptions": { + "rootDir": "src", + "outDir": "dist" + }, + "include": [ + "src" + ] +} diff --git a/packages/components/dismissable-layer/tsup.config.ts b/packages/components/dismissable-layer/tsup.config.ts new file mode 100644 index 000000000..a2f7a0d8b --- /dev/null +++ b/packages/components/dismissable-layer/tsup.config.ts @@ -0,0 +1,22 @@ +import { defineConfig } from 'tsup' +import pkg from './package.json' + +const external = [ + ...Object.keys(pkg.dependencies || {}), + ...Object.keys(pkg.peerDependencies || {}), +] + +export default defineConfig((options) => { + return [ + { + ...options, + entryPoints: ['src/index.ts'], + external, + dts: true, + clean: true, + target: 'node16', + format: ['esm'], + outExtension: () => ({ js: '.mjs' }), + }, + ] +}) diff --git a/packages/components/switch/src/Switch.ts b/packages/components/switch/src/Switch.ts index 96b0f98c7..969730692 100644 --- a/packages/components/switch/src/Switch.ts +++ b/packages/components/switch/src/Switch.ts @@ -9,7 +9,11 @@ import { toValue, useModel, } from 'vue' -import { useComposedRefs, useControllable, useForwardRef } from '@oku-ui/use-composable' +import { + useComposedRefs, + useControllable, + useForwardRef, +} from '@oku-ui/use-composable' import type { ComponentPublicInstanceRef, ElementType, @@ -107,9 +111,11 @@ const Switch = defineComponent({ name, } = toRefs(props) - const { ...switchProps } = attrs as SwitchElement + const { ...switchAttrs } = attrs as SwitchElement - const buttonRef = ref | null>(null) + const buttonRef = ref | null>( + null, + ) const forwardedRef = useForwardRef() const composedRefs = useComposedRefs(buttonRef, forwardedRef) @@ -122,7 +128,7 @@ const Switch = defineComponent({ onMounted(() => { isFormControl.value = buttonRef.value ? typeof buttonRef.value.$el.closest === 'function' - && Boolean(buttonRef.value.$el.closest('form')) + && Boolean(buttonRef.value.$el.closest('form')) : true }) @@ -155,8 +161,8 @@ const Switch = defineComponent({ 'data-state': getState(state.value), 'ref': composedRefs, 'asChild': props.asChild, - ...switchProps, - 'onClick': composeEventHandlers(switchProps.onClick, (event) => { + ...switchAttrs, + 'onClick': composeEventHandlers(switchAttrs.onClick, (event) => { updateValue(!state.value) if (isFormControl.value) { diff --git a/packages/core/use-composable/src/useEscapeKeydown.test.ts b/packages/core/use-composable/tests/useEscapeKeydown.test.ts similarity index 96% rename from packages/core/use-composable/src/useEscapeKeydown.test.ts rename to packages/core/use-composable/tests/useEscapeKeydown.test.ts index da78997d5..7ff7412ca 100644 --- a/packages/core/use-composable/src/useEscapeKeydown.test.ts +++ b/packages/core/use-composable/tests/useEscapeKeydown.test.ts @@ -1,7 +1,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import type { SpyInstance } from 'vitest' import { mount } from '@vue/test-utils' -import { useEscapeKeydown } from './useEscapeKeydown' +import { useEscapeKeydown } from '../src/useEscapeKeydown' describe('useEscapeKeydown', () => { let onEscapeKeyDown: any diff --git a/packages/core/use-composable/tsconfig.json b/packages/core/use-composable/tsconfig.json index b8dfa9041..daca2395c 100644 --- a/packages/core/use-composable/tsconfig.json +++ b/packages/core/use-composable/tsconfig.json @@ -6,5 +6,5 @@ }, "include": [ "src" - ] +, "tests/useEscapeKeydown.test.ts" ] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5daa60bce..aaff6fba0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -330,6 +330,28 @@ importers: specifier: workspace:^ version: link:../../tsconfig + packages/components/dismissable-layer: + dependencies: + '@oku-ui/primitive': + specifier: latest + version: link:../../core/primitive + '@oku-ui/provide': + specifier: latest + version: link:../../core/provide + '@oku-ui/use-composable': + specifier: latest + version: link:../../core/use-composable + '@oku-ui/utils': + specifier: latest + version: link:../../core/utils + vue: + specifier: ^3.3.0 + version: 3.3.4 + devDependencies: + tsconfig: + specifier: workspace:^ + version: link:../../tsconfig + packages/components/label: dependencies: '@oku-ui/primitive': diff --git a/scripts/_utils.ts b/scripts/_utils.ts index 212a3ce13..21440d84c 100644 --- a/scripts/_utils.ts +++ b/scripts/_utils.ts @@ -2,7 +2,12 @@ import { promises as fsp } from 'node:fs' import process from 'node:process' import { resolve } from 'pathe' import { execaSync } from 'execa' -import { determineSemverChange, getGitDiff, loadChangelogConfig, parseCommits } from 'changelogen' +import { + determineSemverChange, + getGitDiff, + loadChangelogConfig, + parseCommits, +} from 'changelogen' export interface Dep { name: string @@ -15,11 +20,19 @@ export type Package = ThenArg> export async function loadPackage(dir: string) { const pkgPath = resolve(dir, 'package.json') - const data = JSON.parse(await fsp.readFile(pkgPath, 'utf-8').catch(() => '{}')) - const save = () => fsp.writeFile(pkgPath, `${JSON.stringify(data, null, 2)}\n`) + const data = JSON.parse( + await fsp.readFile(pkgPath, 'utf-8').catch(() => '{}'), + ) + const save = () => + fsp.writeFile(pkgPath, `${JSON.stringify(data, null, 2)}\n`) const updateDeps = (reviver: (dep: Dep) => Dep | void) => { - for (const type of ['dependencies', 'devDependencies', 'optionalDependencies', 'peerDependencies']) { + for (const type of [ + 'dependencies', + 'devDependencies', + 'optionalDependencies', + 'peerDependencies', + ]) { if (!data[type]) continue for (const e of Object.entries(data[type])) { @@ -52,7 +65,10 @@ export async function loadWorkspace(dir: string) { }) } - const setVersion = (newVersion: string, opts: { updateDeps?: boolean } = {}) => { + const setVersion = ( + newVersion: string, + opts: { updateDeps?: boolean } = {}, + ) => { workspacePkg.data.version = newVersion } @@ -78,7 +94,11 @@ export async function determineBumpType() { export async function getLatestCommits() { const config = await loadChangelogConfig(process.cwd()) - const latestTag = execaSync('git', ['describe', '--tags', '--abbrev=0']).stdout + const latestTag = execaSync('git', [ + 'describe', + '--tags', + '--abbrev=0', + ]).stdout return parseCommits(await getGitDiff(latestTag), config) } From 6b1965a96064f0cea6763bd64f7713b5065173c2 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 4 Aug 2023 08:04:24 +0000 Subject: [PATCH 02/23] fix: lint issues --- packages/core/use-composable/tsconfig.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/use-composable/tsconfig.json b/packages/core/use-composable/tsconfig.json index daca2395c..f03f18200 100644 --- a/packages/core/use-composable/tsconfig.json +++ b/packages/core/use-composable/tsconfig.json @@ -5,6 +5,6 @@ "outDir": "dist" }, "include": [ - "src" -, "tests/useEscapeKeydown.test.ts" ] + "src", + "tests/useEscapeKeydown.test.ts"] } From 7eb32819291264dd14cafa0a00d842454d20f8df Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Sun, 6 Aug 2023 19:39:23 +0100 Subject: [PATCH 03/23] chore: update package --- .../dismissable-layer/src/DismissableLayer.ts | 77 +++++++++------ .../src/DismissableLayerBranch.ts | 97 ++++++++++++++++++- .../components/dismissable-layer/src/index.ts | 2 + .../components/dismissable-layer/src/util.ts | 1 + packages/core/use-composable/tsconfig.json | 5 +- 5 files changed, 151 insertions(+), 31 deletions(-) diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts index 018de677d..8e830afa4 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.ts @@ -10,13 +10,8 @@ import type { MergeProps, PrimitiveProps, } from '@oku-ui/primitive' -import { - Primitive, -} from '@oku-ui/primitive' -import type { - PropType, - Ref, -} from 'vue' +import { Primitive } from '@oku-ui/primitive' +import type { PropType, Ref } from 'vue' import { computed, defineComponent, @@ -30,6 +25,7 @@ import { } from 'vue' import type { Scope } from '@oku-ui/provide' import { createProvideScope } from '@oku-ui/provide' +import { composeEventHandlers } from '@oku-ui/utils' import type { DismissableLayerBranchElement } from './DismissableLayerBranch' import { useFocusOutside, usePointerDownOutside } from './util' @@ -45,7 +41,7 @@ export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside' let originalBodyPointerEvents: string -const DISMISSABLE_NAME = 'OkuDismissableLayer' +export const DISMISSABLE_NAME = 'OkuDismissableLayer' type DismissableLayerElement = ElementType<'div'> @@ -58,6 +54,7 @@ type DismissableLayerContextValue = { export type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }> + export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }> interface DismissableLayerProps extends PrimitiveProps { @@ -96,10 +93,10 @@ interface DismissableLayerProps extends PrimitiveProps { onDismiss?: () => void } -export const [createDismissableLayerProvide, _createDismissableLayerScope] +const [createDismissableLayerProvide, _createDismissableLayerScope] = createProvideScope(DISMISSABLE_NAME) -export const [dismissableLayerProvider, useDismissableLayerInject] +const [dismissableLayerProvider, useDismissableLayerInject] = createDismissableLayerProvide(DISMISSABLE_NAME) const DismissableLayer = defineComponent({ @@ -155,6 +152,7 @@ const DismissableLayer = defineComponent({ onPointerDownOutside, disableOutsidePointerEvents, scopeDismissableLayer, + asChild, } = toRefs(props) const { ...dismissableLayerAttrs } = attrs @@ -205,19 +203,22 @@ const DismissableLayer = defineComponent({ ) const index = computed(() => { - return node.value?.$el - ? Array.from(layers.value).indexOf(node.value.$el as any) + return node.value + ? Array.from(layers.value).indexOf(node.value as any) : -1 }) const isPointerEventsEnabled = computed(() => { const layers = Array.from(context.layers.value) + const [highestLayerWithOutsidePointerEventsDisabled] = [ ...context.layersWithOutsidePointerEventsDisabled.value, ].slice(-1) + const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf( highestLayerWithOutsidePointerEventsDisabled, ) + return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex }) @@ -226,10 +227,13 @@ const DismissableLayer = defineComponent({ const isPointerDownOnBranch = [...context.branches.value].some( (branch: any) => branch.contains(target), ) + if (!isPointerEventsEnabled.value || isPointerDownOnBranch) return + onPointerDownOutside.value?.(event) onInteractOutside.value?.(event) + if (!event.defaultPrevented) onDismiss.value?.() }, ownerDocument) @@ -239,19 +243,25 @@ const DismissableLayer = defineComponent({ const isFocusInBranch = [...context.branches.value].some((branch: any) => branch.contains(target), ) + if (isFocusInBranch) return + onFocusOutside.value?.(event) onInteractOutside.value?.(event) + if (!event.defaultPrevented) onDismiss.value?.() - }, unref(ownerDocument)) + }, ownerDocument) useEscapeKeydown((event) => { const isHighestLayer = index.value === context.layers.value.size - 1 + if (!isHighestLayer) return + onEscapeKeyDown.value?.(event) + if (!event.defaultPrevented && onDismiss) { event.preventDefault() onDismiss.value?.() @@ -261,6 +271,7 @@ const DismissableLayer = defineComponent({ watchEffect((onInvalidate) => { if (!node.value) return + if (disableOutsidePointerEvents.value) { if (context.layersWithOutsidePointerEventsDisabled.value.size === 0) { originalBodyPointerEvents @@ -271,6 +282,7 @@ const DismissableLayer = defineComponent({ node.value as any, ) } + context.layers.value.add(node.value as any) onInvalidate(() => { @@ -313,6 +325,7 @@ const DismissableLayer = defineComponent({ const originalReturn = () => h(Primitive.div, { ref: composedRefs, + asChild: asChild.value, style: { pointerEvents: isBodyPointerEventsDisabled.value ? isPointerEventsEnabled.value @@ -322,19 +335,27 @@ const DismissableLayer = defineComponent({ ...(dismissableLayerAttrs.style as CSSPropertyRule), }, ...dismissableLayerAttrs, - // onFocusCapture: composeEventHandlers( - // onFocusCapture, - // focusOutside.onFocusCapture - // ), - // onBlurCapture: composeEventHandlers( - // props.onBlurCapture, - // focusOutside.onBlurCapture - // ), - // onPointerDownCapture: composeEventHandlers( - // onPointerDownCapture, - // pointerDownOutside.onPointerDownCapture - // ), + onFocusCapture: composeEventHandlers( + dismissableLayerAttrs?.onFocusCapture as ( + event: GlobalEventHandlersEventMap['focus'] + ) => void, + focusOutside.onFocusCapture, + ), + onBlurCapture: composeEventHandlers( + dismissableLayerAttrs?.onBlurCapture as ( + event: GlobalEventHandlersEventMap['blur'] + ) => void, + focusOutside.onBlurCapture, + ), + onPointerDownCapture: composeEventHandlers( + dismissableLayerAttrs?.onPointerDownCapture as ( + event: GlobalEventHandlersEventMap['pointerdown'] + ) => void, + pointerDownOutside.onPointerDownCapture, + ), }) + + return originalReturn }, }) @@ -345,7 +366,7 @@ type _DismissableLayer = MergeProps< DismissableLayerElement > -type InstanceSwitchType = InstanceTypeRef< +type InstanceDismissableLayerType = InstanceTypeRef< typeof DismissableLayer, _DismissableLayerEl > @@ -353,4 +374,6 @@ type InstanceSwitchType = InstanceTypeRef< const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer & (new () => { $props: _DismissableLayer }) -export { OkuDismissableLayer } +export { OkuDismissableLayer, useDismissableLayerInject } + +export type { InstanceDismissableLayerType } diff --git a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts index 0cee2e553..b445a2be6 100644 --- a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts +++ b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts @@ -1,4 +1,27 @@ -import type { ElementType, PrimitiveProps } from '@oku-ui/primitive' +import { Primitive } from '@oku-ui/primitive' +import type { + type ComponentPublicInstanceRef, + type ElementType, + + InstanceTypeRef, + MergeProps, + type PrimitiveProps, +} from '@oku-ui/primitive' +import type { PropType } from 'vue' +import { + defineComponent, + h, + ref, + toRefs, + toValue, + watchEffect, +} from 'vue' +import type { Scope } from '@oku-ui/provide' +import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable' +import { + DISMISSABLE_NAME, + useDismissableLayerInject, +} from './DismissableLayer' /* ------------------------------------------------------------------------------------------------- * DismissableLayerBranch @@ -9,4 +32,74 @@ type DismissableLayerBranchElement = ElementType<'div'> interface DismissableLayerBranchProps extends PrimitiveProps {} -export { DismissableLayerBranchElement } +export type { DismissableLayerBranchElement } + +const DismissableLayerBranch = defineComponent({ + name: BRANCH_NAME, + inheritAttrs: false, + props: { + asChild: { + type: Boolean, + default: undefined, + }, + scopeDismissableLayerbranch: { + type: Object as unknown as PropType, + required: false, + }, + }, + setup(props, { attrs }) { + const { scopeDismissableLayerbranch, asChild } = toRefs(props) + + const { ...dismissableLayerBranchAttrs } = attrs + + const context = toValue( + useDismissableLayerInject( + DISMISSABLE_NAME, + scopeDismissableLayerbranch.value, + ), + ) + + const node = ref | null>(null) + + const forwardedRef = useForwardRef() + const composedRefs = useComposedRefs(node, forwardedRef) + + watchEffect((onInvalidate) => { + if (node.value) + context.branches.value.add(node.value as any) + + onInvalidate(() => { + context.branches.value.delete(node.value as any) + }) + }) + + const originalReturn = () => + h(Primitive.div, { + ref: composedRefs, + asChild: asChild.value, + ...dismissableLayerBranchAttrs, + }) + + return originalReturn + }, +}) + +export type _DismissableLayerBranchEl = HTMLDivElement + +type _DismissableLayerBranch = MergeProps< + DismissableLayerBranchProps, + DismissableLayerBranchElement +> + +type InstanceDismissableLayerBranchType = InstanceTypeRef< + typeof DismissableLayerBranch, + _DismissableLayerBranchEl +> + +const OkuDismissableLayerBranch + = DismissableLayerBranch as typeof DismissableLayerBranch & + (new () => { $props: _DismissableLayerBranch }) + +export { OkuDismissableLayerBranch } + +export type { InstanceDismissableLayerBranchType } diff --git a/packages/components/dismissable-layer/src/index.ts b/packages/components/dismissable-layer/src/index.ts index 1e35759d6..c5efbf9dc 100644 --- a/packages/components/dismissable-layer/src/index.ts +++ b/packages/components/dismissable-layer/src/index.ts @@ -1 +1,3 @@ export * from './DismissableLayerBranch' +export { OkuDismissableLayer } from './DismissableLayer' +export type { InstanceDismissableLayerType } from './DismissableLayer' diff --git a/packages/components/dismissable-layer/src/util.ts b/packages/components/dismissable-layer/src/util.ts index a8fe0a4a5..4c0e86eee 100644 --- a/packages/components/dismissable-layer/src/util.ts +++ b/packages/components/dismissable-layer/src/util.ts @@ -130,6 +130,7 @@ function useFocusOutside( ) } } + document.addEventListener('focusin', handleFocus) onInvalidate(() => { diff --git a/packages/core/use-composable/tsconfig.json b/packages/core/use-composable/tsconfig.json index daca2395c..3b4666929 100644 --- a/packages/core/use-composable/tsconfig.json +++ b/packages/core/use-composable/tsconfig.json @@ -5,6 +5,7 @@ "outDir": "dist" }, "include": [ - "src" -, "tests/useEscapeKeydown.test.ts" ] + "src", + "tests/useEscapeKeydown.test.ts" + ] } From d60e84a9c3981104fa5d254480098cace9773d39 Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Sun, 6 Aug 2023 19:44:40 +0100 Subject: [PATCH 04/23] chore: fix build --- .../src/DismissableLayerBranch.ts | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts index b445a2be6..8990f5dd7 100644 --- a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts +++ b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts @@ -1,21 +1,13 @@ import { Primitive } from '@oku-ui/primitive' import type { - type ComponentPublicInstanceRef, - type ElementType, - + ComponentPublicInstanceRef, + ElementType, InstanceTypeRef, MergeProps, - type PrimitiveProps, + PrimitiveProps, } from '@oku-ui/primitive' import type { PropType } from 'vue' -import { - defineComponent, - h, - ref, - toRefs, - toValue, - watchEffect, -} from 'vue' +import { defineComponent, h, ref, toRefs, toValue, watchEffect } from 'vue' import type { Scope } from '@oku-ui/provide' import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable' import { From d46c66c331c7f3fe58224b6bbe889e55f45942d3 Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Mon, 7 Aug 2023 06:03:13 +0100 Subject: [PATCH 05/23] chore: add tests and stories --- package.json | 1 + .../dismissable-layer/src/DismissableLayer.ts | 23 +++- .../src/DismissableLayerBranch.ts | 2 +- .../components/dismissable-layer/src/index.ts | 5 +- .../src/stories/DismissableLayer.stories.ts | 43 +++++++ .../src/stories/DismissableLayer.vue | 112 ++++++++++++++++ .../dismissable-layer/src/util.test.ts | 57 +++++++++ .../components/dismissable-layer/src/util.ts | 82 ++++++------ packages/core/primitive/src/index.ts | 2 + packages/core/primitive/src/primitive.test.ts | 120 +++++++++++++----- packages/core/primitive/src/utils.ts | 19 ++- pnpm-lock.yaml | 22 ++-- 12 files changed, 393 insertions(+), 95 deletions(-) create mode 100644 packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts create mode 100644 packages/components/dismissable-layer/src/stories/DismissableLayer.vue create mode 100644 packages/components/dismissable-layer/src/util.test.ts diff --git a/package.json b/package.json index ee2fa4350..e80f49da2 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@oku-ui/use-composable": "workspace:^", "@oku-ui/utils": "workspace:^", "@oku-ui/visually-hidden": "workspace:^", + "@oku-ui/dismissable-layer": "workspace:^", "@storybook/addon-essentials": "^7.2.0", "@storybook/addon-interactions": "^7.2.0", "@storybook/addon-links": "^7.2.0", diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts index 8e830afa4..6179d1cba 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.ts @@ -32,9 +32,6 @@ import { useFocusOutside, usePointerDownOutside } from './util' /* ------------------------------------------------------------------------------------------------- * DismissableLayer * ----------------------------------------------------------------------------------------------- */ - -const DISMISSABLE_LAYER_NAME = 'DismissableLayer' - export const CONTEXT_UPDATE = 'dismissableLayer.update' export const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside' export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside' @@ -143,7 +140,7 @@ const DismissableLayer = defineComponent({ 'onInteractOutside', 'onEscapeKeyDown', ], - setup(props, { attrs }) { + setup(props, { attrs, emit }) { const { onDismiss, onFocusOutside, @@ -234,8 +231,13 @@ const DismissableLayer = defineComponent({ onPointerDownOutside.value?.(event) onInteractOutside.value?.(event) - if (!event.defaultPrevented) + emit('onPointerDownOutside', event) + emit('onInteractOutside', event) + + if (!event.defaultPrevented) { onDismiss.value?.() + emit('onDismiss') + } }, ownerDocument) const focusOutside = useFocusOutside((event) => { @@ -250,8 +252,13 @@ const DismissableLayer = defineComponent({ onFocusOutside.value?.(event) onInteractOutside.value?.(event) - if (!event.defaultPrevented) + emit('onFocusOutside', event) + emit('onInteractOutside', event) + + if (!event.defaultPrevented) { onDismiss.value?.() + emit('onDismiss') + } }, ownerDocument) useEscapeKeydown((event) => { @@ -261,10 +268,12 @@ const DismissableLayer = defineComponent({ return onEscapeKeyDown.value?.(event) + emit('onEscapeKeyDown', event) if (!event.defaultPrevented && onDismiss) { event.preventDefault() onDismiss.value?.() + emit('onDismiss') } }, unref(ownerDocument)) @@ -376,4 +385,4 @@ const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer & export { OkuDismissableLayer, useDismissableLayerInject } -export type { InstanceDismissableLayerType } +export type { InstanceDismissableLayerType, DismissableLayerProps } diff --git a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts index 8990f5dd7..7e673b08a 100644 --- a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts +++ b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts @@ -94,4 +94,4 @@ const OkuDismissableLayerBranch export { OkuDismissableLayerBranch } -export type { InstanceDismissableLayerBranchType } +export type { InstanceDismissableLayerBranchType, DismissableLayerBranchProps } diff --git a/packages/components/dismissable-layer/src/index.ts b/packages/components/dismissable-layer/src/index.ts index c5efbf9dc..fe7a53627 100644 --- a/packages/components/dismissable-layer/src/index.ts +++ b/packages/components/dismissable-layer/src/index.ts @@ -1,3 +1,6 @@ export * from './DismissableLayerBranch' export { OkuDismissableLayer } from './DismissableLayer' -export type { InstanceDismissableLayerType } from './DismissableLayer' +export type { + InstanceDismissableLayerType, + DismissableLayerProps, +} from './DismissableLayer' diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts new file mode 100644 index 000000000..f9c1e5545 --- /dev/null +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts @@ -0,0 +1,43 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import type { IDismissableLayerProps } from './DismissableLayer.vue' +import OkuDismissableLayerComponent from './DismissableLayer.vue' + +interface StoryProps extends IDismissableLayerProps {} + +const meta = { + title: 'Utilities/DismissableLayer', + component: OkuDismissableLayerComponent, + args: { + template: '#1', + }, + argTypes: { + template: { + control: 'text', + }, + }, + tags: ['autodocs'], +} satisfies Meta & { + args: StoryProps +} + +export default meta +type Story = StoryObj & { + args: StoryProps +} + +export const Basic: Story = { + args: { + template: '#1', + // allShow: true, + }, + + render: (args: any) => ({ + components: { OkuDismissableLayerComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue new file mode 100644 index 000000000..20d19a2be --- /dev/null +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue @@ -0,0 +1,112 @@ + + + diff --git a/packages/components/dismissable-layer/src/util.test.ts b/packages/components/dismissable-layer/src/util.test.ts new file mode 100644 index 000000000..f015aa800 --- /dev/null +++ b/packages/components/dismissable-layer/src/util.test.ts @@ -0,0 +1,57 @@ +import { describe, expect, it, vi } from 'vitest' +import { mount } from '@vue/test-utils' +import { useFocusOutside, usePointerDownOutside } from './util' + +describe('useFocusOutside', () => { + it('should call onFocusOutside when focusin event happens outside', () => { + const onFocusOutside = vi.fn() + + const wrapper = mount({ + template: '
', + setup() { + const events = useFocusOutside(onFocusOutside) + return { events } + }, + }) + + wrapper.trigger('focusin') + + document.dispatchEvent(new FocusEvent('focusin')) + + expect(onFocusOutside).toHaveBeenCalled() + }) + + it('should not call onFocusOutside when focusin event happens inside', () => { + const onFocusOutside = vi.fn() + const wrapper = mount({ + template: '
', + setup() { + const events = useFocusOutside(onFocusOutside) + return { events } + }, + }) + + // Simulate focusin event inside the component + wrapper.find('button').trigger('focusin') + + expect(onFocusOutside).not.toHaveBeenCalled() + }) +}) + +describe('usePointerDownOutside', () => { + it('should not call onPointerDownOutside when pointerdown event happens inside', () => { + const onPointerDownOutside = vi.fn() + const wrapper = mount({ + template: '
', + setup() { + const events = usePointerDownOutside(onPointerDownOutside) + return { events } + }, + }) + + // Simulate pointerdown event inside the component + wrapper.find('button').trigger('pointerdown') + + expect(onPointerDownOutside).not.toHaveBeenCalled() + }) +}) diff --git a/packages/components/dismissable-layer/src/util.ts b/packages/components/dismissable-layer/src/util.ts index 4c0e86eee..825a19bda 100644 --- a/packages/components/dismissable-layer/src/util.ts +++ b/packages/components/dismissable-layer/src/util.ts @@ -1,6 +1,7 @@ import { useCallbackRef } from '@oku-ui/use-composable' import type { ComputedRef } from 'vue' -import { ref, unref, watchEffect } from 'vue' +import { onBeforeUnmount, ref, unref, watchEffect } from 'vue' +import { dispatchDiscreteCustomEvent } from '@oku-ui/primitive' import type { FocusOutsideEvent, PointerDownOutsideEvent, @@ -12,7 +13,7 @@ import { } from './DismissableLayer' /** - * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup` + * Listens for `pointerdown` outside a subtree. We use `pointerdown` rather than `pointerup` * to mimic layer dismissing behaviour present in OS. * Returns props to pass to the node we want to check for outside events. */ @@ -25,28 +26,28 @@ function usePointerDownOutside( ) as EventListener const isPointerInsideTreeRef = ref(false) - const handleClickRef = ref(() => {}) + const handleClickRef = ref(() => {}) as any const document = unref(ownerDocument) + function handleAndDispatchPointerDownOutsideEvent(event: PointerEvent) { + const eventDetail = { originalEvent: event } + + handleAndDispatchCustomEvent( + POINTER_DOWN_OUTSIDE, + handlePointerDownOutside, + eventDetail, + { discrete: true }, + ) + } + watchEffect((onInvalidate) => { const handlePointerDown = (event: PointerEvent) => { if (event.target && !isPointerInsideTreeRef.value) { - const eventDetail = { originalEvent: event } - - function handleAndDispatchPointerDownOutsideEvent() { - handleAndDispatchCustomEvent( - POINTER_DOWN_OUTSIDE, - handlePointerDownOutside, - eventDetail, - { discrete: true }, - ) - } - /** * On touch devices, we need to wait for a click event because browsers implement * a ~350ms delay between the time the user stops touching the display and when the - * browser executres events. We need to ensure we don't reactivate pointer-events within + * browser executes events. We need to ensure we don't reactivate pointer-events within * this timeframe otherwise the browser may execute events that should have been prevented. * * Additionally, this also lets us deal automatically with cancellations when a click event @@ -58,12 +59,13 @@ function usePointerDownOutside( if (event.pointerType === 'touch') { document.removeEventListener('click', handleClickRef.value) handleClickRef.value = handleAndDispatchPointerDownOutsideEvent + document.addEventListener('click', handleClickRef.value, { once: true, }) } else { - handleAndDispatchPointerDownOutsideEvent() + handleAndDispatchPointerDownOutsideEvent(event) } } else { @@ -73,6 +75,7 @@ function usePointerDownOutside( } isPointerInsideTreeRef.value = false } + /** * if this hook executes in a component that mounts via a `pointerdown` event, the event * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid @@ -90,15 +93,19 @@ function usePointerDownOutside( document.addEventListener('pointerdown', handlePointerDown) }, 0) - onInvalidate(() => { - window.clearTimeout(timerId) + onBeforeUnmount(() => { + clearTimeout(timerId) + document.removeEventListener('pointerdown', handlePointerDown) document.removeEventListener('click', handleClickRef.value) }) + + onInvalidate(() => { + window.clearTimeout(timerId) + }) }) return { - // ensures we check component tree (not just DOM tree) onPointerDownCapture: () => (isPointerInsideTreeRef.value = true), } } @@ -116,21 +123,22 @@ function useFocusOutside( const document = unref(ownerDocument) - watchEffect((onInvalidate) => { - const handleFocus = (event: FocusEvent) => { - if (event.target && !isFocusInsideReactTreeRef.value) { - const eventDetail = { originalEvent: event } - handleAndDispatchCustomEvent( - FOCUS_OUTSIDE, - handleFocusOutside, - eventDetail, - { - discrete: false, - }, - ) - } + const handleFocus = (event: FocusEvent) => { + if (event.target && !isFocusInsideReactTreeRef.value) { + const eventDetail = { originalEvent: event } + + handleAndDispatchCustomEvent( + FOCUS_OUTSIDE, + handleFocusOutside, + eventDetail, + { + discrete: false, + }, + ) } + } + watchEffect((onInvalidate) => { document.addEventListener('focusin', handleFocus) onInvalidate(() => { @@ -161,20 +169,20 @@ function handleAndDispatchCustomEvent< { discrete }: { discrete: boolean }, ) { const target = detail.originalEvent.target + const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail, }) + if (handler) target.addEventListener(name, handler as EventListener, { once: true }) - if (discrete) { - // dispatchDiscreteCustomEvent(target, event); - } - else { + if (discrete) + dispatchDiscreteCustomEvent(target, event) + else target.dispatchEvent(event) - } } export { diff --git a/packages/core/primitive/src/index.ts b/packages/core/primitive/src/index.ts index 9ebbc0a4b..c8b652246 100644 --- a/packages/core/primitive/src/index.ts +++ b/packages/core/primitive/src/index.ts @@ -10,3 +10,5 @@ export type { InstanceTypeRef, ComponentPublicInstanceRef, } from './primitive' + +export { dispatchDiscreteCustomEvent } from './utils' diff --git a/packages/core/primitive/src/primitive.test.ts b/packages/core/primitive/src/primitive.test.ts index 2fad34f5a..9b127e755 100644 --- a/packages/core/primitive/src/primitive.test.ts +++ b/packages/core/primitive/src/primitive.test.ts @@ -1,6 +1,7 @@ -import { describe, expect, it, test } from 'vitest' +import { describe, expect, it, test, vi } from 'vitest' import { mount } from '@vue/test-utils' -import { Primitive } from './index' +import { nextTick } from 'vue' +import { Primitive, dispatchDiscreteCustomEvent } from './index' describe('Primitive', () => { it('should render div element correctly', () => { @@ -275,7 +276,9 @@ describe('Primitive', () => { default: '
Oku
', }, }) - expect(wrapper.html()).toBe('
Oku
') + expect(wrapper.html()).toBe( + '
Oku
', + ) }) test('asChild with props', () => { @@ -292,61 +295,108 @@ describe('Primitive', () => { default: '
Oku
', }, }) - expect(wrapper.html()).toBe('
Oku
') + expect(wrapper.html()).toBe( + '
Oku
', + ) }) test('asChild with 2 children', () => { - const wrapper = () => mount(Primitive.div, { - props: { - asChild: true, - }, - slots: { - default: ` + const wrapper = () => + mount(Primitive.div, { + props: { + asChild: true, + }, + slots: { + default: `
Oku
Oku
`, - }, - }) + }, + }) expect(() => wrapper()).toThrowError(/Detected an invalid children/) }) test('asChild with 2 children and attrs', () => { - const wrapper = () => mount(Primitive.div, { - props: { - asChild: true, - disabled: true, - }, - attrs: { - id: 'test', - class: 'text-red-500', - }, - slots: { - default: ` + const wrapper = () => + mount(Primitive.div, { + props: { + asChild: true, + disabled: true, + }, + attrs: { + id: 'test', + class: 'text-red-500', + }, + slots: { + default: `
Oku
Oku
`, - }, - }) + }, + }) expect(() => wrapper()).toThrowError(/Detected an invalid children/) }) test('asChild with default 3 children', () => { - const wrapper = () => mount(Primitive.div, { - props: { - asChild: true, - disabled: true, - disabled2: true, - }, - slots: { - default: ` + const wrapper = () => + mount(Primitive.div, { + props: { + asChild: true, + disabled: true, + disabled2: true, + }, + slots: { + default: `
Oku
Oku Oku `, - }, - }) + }, + }) expect(() => wrapper()).toThrowError(/Detected an invalid children/) }) }) + +describe('dispatchDiscreteCustomEvent', () => { + it('should dispatch the custom event on the target element', async () => { + const customEventName = 'customEvent' + + // Create a mock target element + const targetElement = document.createElement('div') + document.body.appendChild(targetElement) + + // Spy on the dispatchEvent method + const dispatchEventSpy = vi.spyOn(targetElement, 'dispatchEvent') + + // Dispatch the custom event + const customEvent = new CustomEvent(customEventName) + dispatchDiscreteCustomEvent(targetElement, customEvent) + + // Wait for the next tick to ensure event is dispatched + await nextTick() + + // Check if dispatchEvent was called with the correct event + expect(dispatchEventSpy).toHaveBeenCalledWith(customEvent) + + // Clean up + dispatchEventSpy.mockRestore() + document.body.removeChild(targetElement) + }) + + it('should not dispatch the custom event on null or undefined target', async () => { + const customEventName = 'customEvent' + + // Mock dispatchEvent and check if it was not called + const dispatchEventSpy = vi.spyOn(document, 'dispatchEvent') + dispatchDiscreteCustomEvent(null, new CustomEvent(customEventName)) + + // Wait for the next tick to ensure event is not dispatched + await nextTick() + + expect(dispatchEventSpy).not.toHaveBeenCalled() + + dispatchEventSpy.mockRestore() + }) +}) diff --git a/packages/core/primitive/src/utils.ts b/packages/core/primitive/src/utils.ts index 618c5c3ea..0184e7e95 100644 --- a/packages/core/primitive/src/utils.ts +++ b/packages/core/primitive/src/utils.ts @@ -1,7 +1,7 @@ // same inspiration and resource https://github.com/chakra-ui/ark/blob/main/packages/vue/src/factory.tsx import type { VNode } from 'vue' -import { Fragment } from 'vue' +import { Fragment, nextTick } from 'vue' /** * Checks whether a given VNode is a render-vialble element. @@ -9,9 +9,9 @@ import { Fragment } from 'vue' export function isValidVNodeElement(input: any): boolean { return ( input - && (typeof input.type === 'string' - || typeof input.type === 'object' - || typeof input.type === 'function') + && (typeof input.type === 'string' + || typeof input.type === 'object' + || typeof input.type === 'function') ) } @@ -42,3 +42,14 @@ export function renderSlotFragments(children: VNode[]): VNode[] { return [child] }) } + +export function dispatchDiscreteCustomEvent( + target: E['target'], + event: E, +) { + if (target) { + nextTick(() => { + target.dispatchEvent(event) + }) + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aaff6fba0..0f5f5551f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,6 +37,9 @@ importers: '@oku-ui/collection': specifier: workspace:^ version: link:packages/components/collection + '@oku-ui/dismissable-layer': + specifier: workspace:^ + version: link:packages/components/dismissable-layer '@oku-ui/label': specifier: workspace:^ version: link:packages/components/label @@ -955,7 +958,7 @@ packages: '@babel/helper-plugin-utils': 7.22.5 debug: 4.3.4 lodash.debounce: 4.0.8 - resolve: 1.22.2 + resolve: 1.22.3 transitivePeerDependencies: - supports-color dev: true @@ -3926,7 +3929,7 @@ packages: deepmerge: 4.3.1 is-builtin-module: 3.2.1 is-module: 1.0.0 - resolve: 1.22.2 + resolve: 1.22.3 rollup: 3.21.0 dev: true @@ -3944,7 +3947,7 @@ packages: deepmerge: 4.3.1 is-builtin-module: 3.2.1 is-module: 1.0.0 - resolve: 1.22.2 + resolve: 1.22.3 rollup: 3.26.2 dev: true @@ -4054,7 +4057,7 @@ packages: fs-extra: 7.0.1 import-lazy: 4.0.0 jju: 1.4.0 - resolve: 1.22.2 + resolve: 1.22.3 semver: 7.5.4 z-schema: 5.0.5 dev: true @@ -4062,7 +4065,7 @@ packages: /@rushstack/rig-package@0.4.0: resolution: {integrity: sha512-FnM1TQLJYwSiurP6aYSnansprK5l8WUK8VG38CmAaZs29ZeL1msjK0AP1VS4ejD33G0kE/2cpsPsS9jDenBMxw==} dependencies: - resolve: 1.22.2 + resolve: 1.22.3 strip-json-comments: 3.1.1 dev: true @@ -8037,7 +8040,7 @@ packages: dependencies: debug: 3.2.7 is-core-module: 2.12.1 - resolve: 1.22.2 + resolve: 1.22.3 transitivePeerDependencies: - supports-color dev: false @@ -10877,7 +10880,7 @@ packages: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: hosted-git-info: 2.8.9 - resolve: 1.22.2 + resolve: 1.22.3 semver: 5.7.1 validate-npm-package-license: 3.0.4 @@ -11558,7 +11561,7 @@ packages: postcss: 8.4.27 postcss-value-parser: 4.2.0 read-cache: 1.0.0 - resolve: 1.22.2 + resolve: 1.22.3 dev: true /postcss-import@15.1.0(postcss@8.4.27): @@ -12063,7 +12066,7 @@ packages: jstransformer: 1.0.0 pug-error: 2.0.0 pug-walk: 2.0.0 - resolve: 1.22.2 + resolve: 1.22.3 dev: true /pug-lexer@5.0.1: @@ -12564,7 +12567,6 @@ packages: is-core-module: 2.12.1 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 - dev: false /restore-cursor@3.1.0: resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==} From 1e94e3d8705430453d0f6edfd98a2a801c880929 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 7 Aug 2023 05:05:20 +0000 Subject: [PATCH 06/23] fix: lint issues --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d1b8f4c67..49c81aae9 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@oku-ui/checkbox": "workspace:^", "@oku-ui/collapsible": "workspace:^", "@oku-ui/collection": "workspace:^", + "@oku-ui/dismissable-layer": "workspace:^", "@oku-ui/label": "workspace:^", "@oku-ui/popper": "workspace:^", "@oku-ui/presence": "workspace:^", @@ -56,7 +57,6 @@ "@oku-ui/use-composable": "workspace:^", "@oku-ui/utils": "workspace:^", "@oku-ui/visually-hidden": "workspace:^", - "@oku-ui/dismissable-layer": "workspace:^", "@storybook/addon-essentials": "^7.2.0", "@storybook/addon-interactions": "^7.2.0", "@storybook/addon-links": "^7.2.0", From 24eee230fbdd51fe270fe2b0fbf3af9f57f57a0d Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Mon, 7 Aug 2023 07:39:15 +0100 Subject: [PATCH 07/23] chore: update --- package.json | 2 +- .../dismissable-layer/src/DismissableLayer.test.ts | 9 ++++++--- .../dismissable-layer/src/DismissableLayer.ts | 12 ++++++------ 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index e80f49da2..0645aec5f 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@oku-ui/checkbox": "workspace:^", "@oku-ui/collapsible": "workspace:^", "@oku-ui/collection": "workspace:^", + "@oku-ui/dismissable-layer": "workspace:^", "@oku-ui/label": "workspace:^", "@oku-ui/popper": "workspace:^", "@oku-ui/presence": "workspace:^", @@ -54,7 +55,6 @@ "@oku-ui/use-composable": "workspace:^", "@oku-ui/utils": "workspace:^", "@oku-ui/visually-hidden": "workspace:^", - "@oku-ui/dismissable-layer": "workspace:^", "@storybook/addon-essentials": "^7.2.0", "@storybook/addon-interactions": "^7.2.0", "@storybook/addon-links": "^7.2.0", diff --git a/packages/components/dismissable-layer/src/DismissableLayer.test.ts b/packages/components/dismissable-layer/src/DismissableLayer.test.ts index 958ce8854..80096f2dd 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.test.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.test.ts @@ -1,7 +1,10 @@ +import { mount } from '@vue/test-utils' import { describe, expect, it } from 'vitest' +import { OkuDismissableLayer } from './DismissableLayer' -describe('example', () => { - it('should work', () => { - expect('example').toBe('example') +describe('DismissableLayer', () => { + it('should render correctly', () => { + const wrapper = mount(OkuDismissableLayer) + expect(wrapper.exists()).toBe(true) }) }) diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts index 6179d1cba..439fd0842 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.ts @@ -169,6 +169,10 @@ const DismissableLayer = defineComponent({ scope: scopeDismissableLayer.value, }) + const context = toValue( + useDismissableLayerInject(DISMISSABLE_NAME, scopeDismissableLayer.value), + ) + const node = ref | null>(null) const forwardedRef = useForwardRef() @@ -178,10 +182,6 @@ const DismissableLayer = defineComponent({ () => node.value?.$el?.ownerDocument ?? globalThis?.document, ) - const context = toValue( - useDismissableLayerInject(DISMISSABLE_NAME, scopeDismissableLayer.value), - ) - watch( () => context, () => { @@ -189,14 +189,14 @@ const DismissableLayer = defineComponent({ layers.value = context.layers.value if (context?.layersWithOutsidePointerEventsDisabled.value) { layersWithOutsidePointerEventsDisabled.value - = context.layersWithOutsidePointerEventsDisabled.value + = context?.layersWithOutsidePointerEventsDisabled.value } }, { immediate: true, deep: true }, ) const isBodyPointerEventsDisabled = computed( - () => context.layersWithOutsidePointerEventsDisabled.value.size > 0, + () => context!.layersWithOutsidePointerEventsDisabled.value.size > 0, ) const index = computed(() => { From aa9567ef81ae3f669bb04dfbf4f42591cadcdd59 Mon Sep 17 00:00:00 2001 From: Mehmet Date: Mon, 14 Aug 2023 05:27:26 +0300 Subject: [PATCH 08/23] refactor: dismisslable layer (#281) --- .eslintrc | 12 +- .storybook/DocsContainer.tsx | 1 - package.json | 4 +- packages/components/arrow/src/arrow.ts | 7 +- .../arrow/src/stories/ArrowDemo.vue | 1 - .../aspect-ratio/src/aspect-ratio.ts | 4 +- .../src/stories/AspectRatioDemo.vue | 1 - packages/components/avatar/src/avatar.ts | 6 +- .../components/avatar/src/avatarFallback.ts | 8 +- packages/components/avatar/src/avatarImage.ts | 2 +- packages/components/checkbox/src/checkbox.ts | 13 +- .../checkbox/src/checkboxIndicator.ts | 16 +- packages/components/checkbox/src/index.ts | 5 +- .../components/collapsible/src/collapsible.ts | 27 +- .../collapsible/src/collapsibleContent.ts | 21 +- .../collapsible/src/collapsibleContentImpl.ts | 24 +- .../collapsible/src/collapsibleTrigger.ts | 30 +- packages/components/collapsible/src/index.ts | 5 +- .../components/collection/src/collection.ts | 16 +- .../collection/src/stories/CollectionDemo.vue | 2 +- .../components/direction/src/Direction.ts | 5 +- .../dismissable-layer/src/DismissableLayer.ts | 202 ++- .../src/DismissableLayerBranch.ts | 34 +- .../src/stories/DismissableLayer.vue | 12 +- .../components/dismissable-layer/src/util.ts | 31 +- packages/components/label/src/label.ts | 6 +- packages/components/popper/src/index.ts | 1 + packages/components/popper/src/popper.ts | 15 +- .../components/popper/src/popperAnchor.ts | 19 +- packages/components/popper/src/popperArrow.ts | 20 +- .../components/popper/src/popperContent.ts | 21 +- packages/components/presence/package.json | 1 - .../components/presence/src/presence.test.ts | 47 +- packages/components/presence/src/presence.ts | 62 +- .../presence/src/stories/PresenceDemo.vue | 6 +- .../components/presence/src/usePresence.ts | 48 +- packages/components/presence/tsup.config.ts | 5 +- packages/components/progress/src/progress.ts | 9 +- .../progress/src/progressIndicator.ts | 17 +- .../roving-focus/src/RovingFocusGroup.ts | 28 +- .../roving-focus/src/RovingFocusGroupImpl.ts | 17 +- .../roving-focus/src/RovingFocusGroupItem.ts | 56 +- packages/components/roving-focus/src/index.ts | 2 +- packages/components/roving-focus/src/types.ts | 8 + .../components/roving-focus/tsup.config.ts | 5 +- .../components/separator/src/separator.ts | 4 +- packages/components/slot/tsup.config.ts | 5 +- packages/components/switch/src/Switch.ts | 18 +- packages/components/switch/src/SwitchThumb.ts | 21 +- packages/components/switch/src/index.ts | 2 +- .../switch/src/stories/SwitchDemo.vue | 5 +- packages/components/tabs/README.md | 10 + packages/components/tabs/build.config.ts | 12 + packages/components/tabs/package.json | 47 + packages/components/tabs/src/index.ts | 9 + .../components/tabs/src/stories/TabsDemo.vue | 301 +++++ .../tabs/src/stories/tabs.stories.ts | 70 ++ packages/components/tabs/src/tab-content.ts | 91 ++ packages/components/tabs/src/tab-list.ts | 79 ++ packages/components/tabs/src/tab-trigger.ts | 112 ++ packages/components/tabs/src/tabs.ts | 199 +++ packages/components/tabs/src/utils.ts | 7 + packages/components/tabs/tsconfig.json | 10 + packages/components/tabs/tsup.config.ts | 22 + packages/components/toggle/src/toggle.ts | 4 +- .../visually-hidden/src/VisuallyHidden.ts | 9 +- packages/core/primitive/tsup.config.ts | 8 +- packages/core/provide/src/createProvide.ts | 52 +- packages/core/provide/src/index.ts | 2 +- packages/core/provide/tsup.config.ts | 6 +- packages/core/use-composable/src/index.ts | 1 - packages/core/use-composable/tsup.config.ts | 8 +- packages/core/utils/src/index.ts | 2 +- .../core/utils/src/isValidVNodeElement.ts | 11 + packages/core/utils/tsup.config.ts | 8 +- packages/tsconfig/node18.json | 21 + playground/nuxt3/package.json | 1 + playground/nuxt3/pages/index.vue | 4 + playground/nuxt3/pages/tabs.vue | 5 + playground/vue3/package.json | 1 + playground/vue3/src/pages/index.vue | 4 + playground/vue3/src/pages/tabs.vue | 7 + pnpm-lock.yaml | 1098 ++++++++++++----- scripts/dev.ts | 14 +- 84 files changed, 2338 insertions(+), 834 deletions(-) create mode 100644 packages/components/roving-focus/src/types.ts create mode 100644 packages/components/tabs/README.md create mode 100644 packages/components/tabs/build.config.ts create mode 100644 packages/components/tabs/package.json create mode 100644 packages/components/tabs/src/index.ts create mode 100644 packages/components/tabs/src/stories/TabsDemo.vue create mode 100644 packages/components/tabs/src/stories/tabs.stories.ts create mode 100644 packages/components/tabs/src/tab-content.ts create mode 100644 packages/components/tabs/src/tab-list.ts create mode 100644 packages/components/tabs/src/tab-trigger.ts create mode 100644 packages/components/tabs/src/tabs.ts create mode 100644 packages/components/tabs/src/utils.ts create mode 100644 packages/components/tabs/tsconfig.json create mode 100644 packages/components/tabs/tsup.config.ts create mode 100644 packages/core/utils/src/isValidVNodeElement.ts create mode 100644 packages/tsconfig/node18.json create mode 100644 playground/nuxt3/pages/tabs.vue create mode 100644 playground/vue3/src/pages/tabs.vue diff --git a/.eslintrc b/.eslintrc index 037b2702f..e6c838afb 100644 --- a/.eslintrc +++ b/.eslintrc @@ -4,5 +4,15 @@ "extends": ["custom", "plugin:storybook/recommended"], "rules": { "vue/one-component-per-file": "off" - } + }, + "overrides": [ + { + "files": [ + "**/stories/*.vue" + ], + "rules": { + "no-console": "off" + } + } + ] } diff --git a/.storybook/DocsContainer.tsx b/.storybook/DocsContainer.tsx index bc2e96bc1..cf90b7f07 100644 --- a/.storybook/DocsContainer.tsx +++ b/.storybook/DocsContainer.tsx @@ -6,7 +6,6 @@ import { useDarkMode } from 'storybook-dark-mode'; export const DocsContainer = ( props: PropsWithChildren ) => { - console.log(props.children) const dark = useDarkMode(); return ( =18" @@ -43,6 +43,7 @@ "@oku-ui/checkbox": "workspace:^", "@oku-ui/collapsible": "workspace:^", "@oku-ui/collection": "workspace:^", + "@oku-ui/direction": "workspace:^", "@oku-ui/dismissable-layer": "workspace:^", "@oku-ui/label": "workspace:^", "@oku-ui/popper": "workspace:^", @@ -54,6 +55,7 @@ "@oku-ui/separator": "workspace:^", "@oku-ui/slot": "workspace:^", "@oku-ui/switch": "workspace:^", + "@oku-ui/tabs": "workspace:^", "@oku-ui/toggle": "workspace:^", "@oku-ui/use-composable": "workspace:^", "@oku-ui/utils": "workspace:^", diff --git a/packages/components/arrow/src/arrow.ts b/packages/components/arrow/src/arrow.ts index 6e972804d..5c5858701 100644 --- a/packages/components/arrow/src/arrow.ts +++ b/packages/components/arrow/src/arrow.ts @@ -1,6 +1,6 @@ import { cloneVNode, defineComponent, h } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { Primitive } from '@oku-ui/primitive' +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' import { useForwardRef } from '@oku-ui/use-composable' type ArrowElement = ElementType<'svg'> @@ -14,10 +14,7 @@ const arrow = defineComponent({ name: NAME, inheritAttrs: false, props: { - asChild: { - type: Boolean, - default: false, - }, + ...PrimitiveProps, }, setup(props, { attrs, slots }) { const forwardedRef = useForwardRef() diff --git a/packages/components/arrow/src/stories/ArrowDemo.vue b/packages/components/arrow/src/stories/ArrowDemo.vue index ce4cb7bc1..8e221ec19 100644 --- a/packages/components/arrow/src/stories/ArrowDemo.vue +++ b/packages/components/arrow/src/stories/ArrowDemo.vue @@ -14,7 +14,6 @@ withDefaults(defineProps(), { const arrowRef = ref() onMounted(() => { - // eslint-disable-next-line no-console console.log(arrowRef.value?.$el) }) const alert = () => window.alert('clicked') diff --git a/packages/components/aspect-ratio/src/aspect-ratio.ts b/packages/components/aspect-ratio/src/aspect-ratio.ts index 8d9f6a612..e5208adc2 100644 --- a/packages/components/aspect-ratio/src/aspect-ratio.ts +++ b/packages/components/aspect-ratio/src/aspect-ratio.ts @@ -1,6 +1,6 @@ import { defineComponent, h } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { Primitive } from '@oku-ui/primitive' +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' import { useForwardRef } from '@oku-ui/use-composable' interface AspectRatioProps extends IPrimitiveProps { @@ -20,6 +20,7 @@ const AspectRatio = defineComponent({ type: Number, default: 1 / 1, }, + ...PrimitiveProps, }, setup(props, { attrs, slots }) { const { style, ...aspectRatioProps } = attrs as AspectRatioElement @@ -49,6 +50,7 @@ const AspectRatio = defineComponent({ bottom: 0, left: 0, }, + asChild: props.asChild, }, { default: () => slots.default?.(), diff --git a/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue b/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue index c7294217c..b638cb968 100644 --- a/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue +++ b/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue @@ -17,7 +17,6 @@ withDefaults(defineProps(), { const root = ref() onMounted(() => { - // eslint-disable-next-line no-console console.log(root.value?.$el) }) diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts index 20f66a45a..841a9348e 100644 --- a/packages/components/avatar/src/avatar.ts +++ b/packages/components/avatar/src/avatar.ts @@ -1,9 +1,8 @@ -import type { PropType } from 'vue' import { defineComponent, h, ref } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' import { Primitive } from '@oku-ui/primitive' import type { Scope } from '@oku-ui/provide' -import { createProvideScope } from '@oku-ui/provide' +import { ScopePropObject, createProvideScope } from '@oku-ui/provide' import { useForwardRef } from '@oku-ui/use-composable' const AVATAR_NAME = 'Avatar' @@ -30,8 +29,7 @@ const Avatar = defineComponent({ inheritAttrs: false, props: { scopeAvatar: { - type: Object as unknown as PropType, - required: false, + ...ScopePropObject, }, }, setup(props, { attrs, slots }) { diff --git a/packages/components/avatar/src/avatarFallback.ts b/packages/components/avatar/src/avatarFallback.ts index 657e7e319..0e8f76f43 100644 --- a/packages/components/avatar/src/avatarFallback.ts +++ b/packages/components/avatar/src/avatarFallback.ts @@ -1,8 +1,7 @@ -import type { PropType } from 'vue' import { defineComponent, h, onMounted, ref, watchEffect } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' import { Primitive } from '@oku-ui/primitive' -import type { Scope } from '@oku-ui/provide' +import { ScopePropObject } from '@oku-ui/provide' import { useForwardRef } from '@oku-ui/use-composable' import { useAvatarInject } from './avatar' @@ -24,8 +23,7 @@ const AvatarFallback = defineComponent({ required: false, }, scopeAvatar: { - type: Object as unknown as PropType, - required: false, + ...ScopePropObject, }, }, setup(props, { attrs, slots }) { @@ -54,7 +52,7 @@ const AvatarFallback = defineComponent({ }) const originalReturn = () => { - return (canRender.value && (provide.value.imageLoadingStatus !== 'loaded')) + return (canRender.value && (provide.imageLoadingStatus !== 'loaded')) ? h( Primitive.span, { ...fallbackProps, diff --git a/packages/components/avatar/src/avatarImage.ts b/packages/components/avatar/src/avatarImage.ts index c6203c0a2..1a1532877 100644 --- a/packages/components/avatar/src/avatarImage.ts +++ b/packages/components/avatar/src/avatarImage.ts @@ -47,7 +47,7 @@ const AvatarImage = defineComponent({ const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => { props.onLoadingStatusChange(status) - inject.value.onImageLoadingStatusChange(status) + inject.onImageLoadingStatusChange(status) }) onMounted(() => { diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts index 961357604..9a5a03c59 100644 --- a/packages/components/checkbox/src/checkbox.ts +++ b/packages/components/checkbox/src/checkbox.ts @@ -1,4 +1,4 @@ -import { createProvideScope } from '@oku-ui/provide' +import { ScopePropObject, createProvideScope } from '@oku-ui/provide' import type { PropType, Ref } from 'vue' import { computed, defineComponent, h, ref, toRefs, watchEffect } from 'vue' @@ -14,7 +14,7 @@ import { OkuBubbleInput } from './bubbleInput' const CHECKBOX_NAME = 'OkuCheckbox' -const [createCheckboxProvider, _createCheckboxScope] = createProvideScope(CHECKBOX_NAME) +const [createCheckboxProvider, createCheckboxScope] = createProvideScope(CHECKBOX_NAME) type CheckboxInjectValue = { state: Ref @@ -62,14 +62,12 @@ const Checkbox = defineComponent({ default: undefined, }, scopeCheckbox: { - type: Object as unknown as PropType, - required: false, - default: undefined, + ...ScopePropObject, }, }, emits: ['update:checked', 'update:modelValue'], setup(props, { attrs, slots, emit }) { - const { checked: checkedProp, scopeCheckbox, defaultChecked, required } = toRefs(props) + const { checked: checkedProp, defaultChecked, required } = toRefs(props) const buttonRef = ref | null>(null) const forwardedRef = useForwardRef() @@ -109,7 +107,7 @@ const Checkbox = defineComponent({ }) CheckboxProvider({ - scope: scopeCheckbox.value as Scope, + scope: props.scopeCheckbox, state, disabled: disabled as boolean, }) @@ -189,6 +187,7 @@ const OkuCheckbox = Checkbox as typeof Checkbox & (new () => { $props: _OkuCheck export { OkuCheckbox, + createCheckboxScope, } export type { diff --git a/packages/components/checkbox/src/checkboxIndicator.ts b/packages/components/checkbox/src/checkboxIndicator.ts index d25697236..5686113c1 100644 --- a/packages/components/checkbox/src/checkboxIndicator.ts +++ b/packages/components/checkbox/src/checkboxIndicator.ts @@ -1,4 +1,3 @@ -import type { PropType } from 'vue' import { Transition, defineComponent, h, toRefs } from 'vue' import { useForwardRef } from '@oku-ui/use-composable' @@ -6,7 +5,7 @@ import { Primitive } from '@oku-ui/primitive' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import type { Scope } from '@oku-ui/provide' +import { ScopePropObject } from '@oku-ui/provide' import { getState, isIndeterminate } from './utils' import { useCheckboxInject } from './checkbox' @@ -24,25 +23,24 @@ const CheckboxIndicator = defineComponent({ components: { Transition }, props: { scopeCheckbox: { - type: Object as unknown as PropType, - required: false, + ...ScopePropObject, }, forceMount: Boolean, }, setup(props, { attrs, slots }) { - const { scopeCheckbox, forceMount } = toRefs(props) + const { forceMount } = toRefs(props) const { ...indicatorProps } = attrs as CheckboxIndicatorElement const forwardedRef = useForwardRef() - const context = useCheckboxInject(INDICATOR_NAME, scopeCheckbox.value) + const context = useCheckboxInject(INDICATOR_NAME, props.scopeCheckbox) const originalReturn = () => h(Transition, {}, { - default: () => (forceMount.value || isIndeterminate(context.value.state.value) || context.value.state.value === true) + default: () => (forceMount.value || isIndeterminate(context.state.value) || context.state.value === true) ? h(Primitive.span, { 'ref': forwardedRef, - 'data-state': getState(context.value.state.value), - 'data-disabled': context.value.disabled ? '' : undefined, + 'data-state': getState(context.state.value), + 'data-disabled': context.disabled ? '' : undefined, ...indicatorProps, 'style': { pointerEvents: 'none', ...attrs.style as any }, }, diff --git a/packages/components/checkbox/src/index.ts b/packages/components/checkbox/src/index.ts index e78962c15..5e6dd56a5 100644 --- a/packages/components/checkbox/src/index.ts +++ b/packages/components/checkbox/src/index.ts @@ -1,4 +1,7 @@ -export { OkuCheckbox } from './checkbox' +export { + OkuCheckbox, + createCheckboxScope, +} from './checkbox' export type { CheckboxProps, diff --git a/packages/components/collapsible/src/collapsible.ts b/packages/components/collapsible/src/collapsible.ts index 5165dedcf..69f09f4b8 100644 --- a/packages/components/collapsible/src/collapsible.ts +++ b/packages/components/collapsible/src/collapsible.ts @@ -1,9 +1,8 @@ -import type { PropType, Ref } from 'vue' +import type { ComputedRef, PropType, Ref } from 'vue' import { computed, defineComponent, h, toRefs, useModel } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import type { Scope } from '@oku-ui/provide' -import { createProvideScope } from '@oku-ui/provide' -import { Primitive } from '@oku-ui/primitive' +import { ScopePropObject, createProvideScope } from '@oku-ui/provide' +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' import { useControllable, useForwardRef, useId } from '@oku-ui/use-composable' import { getState } from './utils' @@ -16,12 +15,12 @@ export type _CollapsibleEl = HTMLDivElement type CollapsibleProvideValue = { contentId: string disabled?: Ref - open: Ref + open: ComputedRef onOpenToggle(): void } const COLLAPSIBLE_NAME = 'Collapsible' -export const [createCollapsibleProvide, _createCollapsibleScope] = createProvideScope(COLLAPSIBLE_NAME) +export const [createCollapsibleProvide, createCollapsibleScope] = createProvideScope(COLLAPSIBLE_NAME) export const [collapsibleProvider, useCollapsibleInject] = createCollapsibleProvide(COLLAPSIBLE_NAME) @@ -45,22 +44,18 @@ const Collapsible = defineComponent({ type: Boolean, default: false, }, - scopeCollapsible: { - type: Object as unknown as PropType, - required: false, - }, onOpenChange: { type: Function as PropType<(open: boolean) => void>, }, - asChild: { - type: Boolean, - default: undefined, + ...PrimitiveProps, + scopeCollapsible: { + ...ScopePropObject, }, }, emits: ['update:open', 'update:modelValue'], setup(props, { attrs, slots, emit }) { const { ...collapsibleAttr } = attrs as CollapsibleElement - const { disabled, scopeCollapsible, open, defaultOpen } = toRefs(props) + const { disabled, open, defaultOpen } = toRefs(props) const modelValue = useModel(props, 'modelValue') @@ -81,8 +76,8 @@ const Collapsible = defineComponent({ onOpenToggle() { updateValue(!state.value) }, - scope: scopeCollapsible.value, - open: state as Ref, + scope: props.scopeCollapsible, + open: computed(() => state.value || false), }) const originalReturn = () => h( diff --git a/packages/components/collapsible/src/collapsibleContent.ts b/packages/components/collapsible/src/collapsibleContent.ts index b816a9681..ecde0afda 100644 --- a/packages/components/collapsible/src/collapsibleContent.ts +++ b/packages/components/collapsible/src/collapsibleContent.ts @@ -1,10 +1,10 @@ -import type { PropType } from 'vue' +import type { ComputedRef } from 'vue' import { Transition, defineComponent, h, toRefs } from 'vue' -import type { Scope } from '@oku-ui/provide' import { useForwardRef } from '@oku-ui/use-composable' -import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' +import { type ElementType, type IPrimitiveProps, type InstanceTypeRef, type MergeProps, PrimitiveProps } from '@oku-ui/primitive' import { OkuPresence } from '@oku-ui/presence' +import { ScopePropObject } from '@oku-ui/provide' import { OkuCollapsibleContentImpl } from './collapsibleContentImpl' import { useCollapsibleInject } from './collapsible' @@ -33,16 +33,12 @@ const CollapsibleContent = defineComponent({ default: true, }, scopeCollapsible: { - type: Object as unknown as PropType, - required: false, - }, - asChild: { - type: Boolean, - default: undefined, + ...ScopePropObject, }, + ...PrimitiveProps, }, setup(props, { attrs, slots }) { - const { scopeCollapsible } = toRefs(props) + const { scopeCollapsible, forceMount } = toRefs(props) const { ...contentProps } = attrs as CollapsibleContentElement const context = useCollapsibleInject(CONTENT_NAME, scopeCollapsible.value) @@ -53,16 +49,17 @@ const CollapsibleContent = defineComponent({ const originalReturn = () => h( OkuPresence, { - present: props.forceMount || context.value.open.value, + present: forceMount.value || context.open.value, }, { - default: () => h( + default: ({ isPresent }: { isPresent: ComputedRef }) => h( OkuCollapsibleContentImpl, { ...contentProps, ref: forwardedRef, asChild: props.asChild, scopeCollapsible: scopeCollapsible.value, + present: isPresent, }, { default: () => slots.default && slots.default(), diff --git a/packages/components/collapsible/src/collapsibleContentImpl.ts b/packages/components/collapsible/src/collapsibleContentImpl.ts index 0e5293bd8..b1db7f176 100644 --- a/packages/components/collapsible/src/collapsibleContentImpl.ts +++ b/packages/components/collapsible/src/collapsibleContentImpl.ts @@ -1,8 +1,8 @@ import type { PropType, Ref } from 'vue' import { computed, defineComponent, h, nextTick, onMounted, ref, toRefs, watch, watchEffect } from 'vue' import type { ComponentPublicInstanceRef, ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import type { Scope } from '@oku-ui/provide' -import { Primitive } from '@oku-ui/primitive' +import { ScopePropObject } from '@oku-ui/provide' +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable' import { useCollapsibleInject } from './collapsible' @@ -21,18 +21,14 @@ const CollapsibleContentImpl = defineComponent({ type: Object as unknown as PropType>, }, scopeCollapsible: { - type: Object as unknown as PropType, - required: false, - }, - asChild: { - type: Boolean, - default: undefined, + ...ScopePropObject, }, + ...PrimitiveProps, }, setup(props, { attrs, slots }) { - const { scopeCollapsible, present, asChild } = toRefs(props) + const { present, asChild } = toRefs(props) const { ...contentAttrs } = attrs as CollapsibleContentImplElement - const context = useCollapsibleInject(CONTENT_NAME, scopeCollapsible.value) + const context = useCollapsibleInject(CONTENT_NAME, props.scopeCollapsible) const _ref = ref | undefined>(undefined) const forwardedRef = useForwardRef() @@ -44,7 +40,7 @@ const CollapsibleContentImpl = defineComponent({ const width = computed(() => widthRef.value) const isPresent = ref(present?.value?.value) - const isOpen = computed(() => context.value.open.value || isPresent.value) + const isOpen = computed(() => context.open.value || isPresent.value) const isMountAnimationPreventedRef = ref(isOpen.value) const originalStylesRef = ref>() @@ -85,9 +81,9 @@ const CollapsibleContentImpl = defineComponent({ const originalReturn = () => h( Primitive.div, { - 'data-state': getState(context.value.open.value), - 'data-disabled': context.value.disabled?.value ? '' : undefined, - 'id': context.value.contentId, + 'data-state': getState(context.open.value), + 'data-disabled': context.disabled?.value ? '' : undefined, + 'id': context.contentId, 'hidden': !isOpen.value, ...contentAttrs, 'ref': composedRefs, diff --git a/packages/components/collapsible/src/collapsibleTrigger.ts b/packages/components/collapsible/src/collapsibleTrigger.ts index c1b752290..0ba61f20f 100644 --- a/packages/components/collapsible/src/collapsibleTrigger.ts +++ b/packages/components/collapsible/src/collapsibleTrigger.ts @@ -1,11 +1,10 @@ -import type { PropType } from 'vue' -import { defineComponent, h, toRefs } from 'vue' -import type { Scope } from '@oku-ui/provide' +import { defineComponent, h } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { Primitive } from '@oku-ui/primitive' +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' import { composeEventHandlers } from '@oku-ui/utils' import { useForwardRef } from '@oku-ui/use-composable' +import { ScopePropObject } from '@oku-ui/provide' import { useCollapsibleInject } from './collapsible' import { getState } from './utils' @@ -21,18 +20,13 @@ const CollapsibleTrigger = defineComponent({ inheritAttrs: false, props: { scopeCollapsible: { - type: Object as unknown as PropType, - required: false, - }, - asChild: { - type: Boolean, - default: undefined, + ...ScopePropObject, }, + ...PrimitiveProps, }, setup(props, { attrs, slots }) { - const { scopeCollapsible } = toRefs(props) const { ...triggerProps } = attrs as CollapsibleTriggerElement - const context = useCollapsibleInject(TRIGGER_NAME, scopeCollapsible.value) + const context = useCollapsibleInject(TRIGGER_NAME, props.scopeCollapsible) const forwardedRef = useForwardRef() @@ -40,15 +34,15 @@ const CollapsibleTrigger = defineComponent({ Primitive.button, { 'type': 'button', - 'aria-controls': context.value.contentId, - 'aria-expanded': context.value.open.value || false, - 'data-state': getState(context.value.open.value || false), - 'data-disabled': context.value.disabled?.value ? '' : undefined, - 'disabled': context.value.disabled?.value, + 'aria-controls': context.contentId, + 'aria-expanded': context.open.value || false, + 'data-state': getState(context.open.value || false), + 'data-disabled': context.disabled?.value ? '' : undefined, + 'disabled': context.disabled?.value, ...triggerProps, 'asChild': props.asChild, 'ref': forwardedRef, - 'onClick': composeEventHandlers(triggerProps.onClick, context.value.onOpenToggle), + 'onClick': composeEventHandlers(triggerProps.onClick, context.onOpenToggle), }, { default: () => slots.default && slots.default(), diff --git a/packages/components/collapsible/src/index.ts b/packages/components/collapsible/src/index.ts index 35753124e..b4472e9ff 100644 --- a/packages/components/collapsible/src/index.ts +++ b/packages/components/collapsible/src/index.ts @@ -5,7 +5,10 @@ export type { _CollapsibleEl, } from './collapsible' -export { OkuCollapsible } from './collapsible' +export { + OkuCollapsible, + createCollapsibleScope, +} from './collapsible' export { OkuCollapsibleContent, diff --git a/packages/components/collection/src/collection.ts b/packages/components/collection/src/collection.ts index 5a02c7623..9c29ff82b 100644 --- a/packages/components/collection/src/collection.ts +++ b/packages/components/collection/src/collection.ts @@ -1,11 +1,11 @@ import type { AllowedComponentProps, ComponentCustomProps, ComponentObjectPropsOptions, ComponentPublicInstance, Ref, VNodeProps } from 'vue' -import { computed, createVNode, defineComponent, h, ref, watchEffect } from 'vue' +import { computed, defineComponent, h, ref, watchEffect } from 'vue' import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable' import { createProvideScope } from '@oku-ui/provide' import { OkuSlot } from '@oku-ui/slot' const CollectionProps = { - scope: { type: null as any, required: false }, + scope: { type: null, required: false }, } interface CollectionPropsType { scope: any @@ -79,7 +79,7 @@ function createCollection(name: string, Item setup(props, { slots }) { const inject = useCollectionInject(COLLECTION_SLOT_NAME, props.scope) const forwaredRef = useForwardRef() - const composedRefs = useComposedRefs(forwaredRef, inject.value.collectionRef) + const composedRefs = useComposedRefs(forwaredRef, inject.collectionRef) return () => h(OkuSlot, { ref: composedRefs }, slots) }, }) @@ -110,14 +110,14 @@ function createCollection(name: string, Item const inject = useCollectionInject(ITEM_SLOT_NAME, scope) watchEffect((onClean) => { - inject.value.itemMap.value.set(refValue, { ref: refValue, ...(itemData as any), ...attrs }) + inject.itemMap.value.set(refValue, { ref: refValue, ...(itemData as any), ...attrs }) onClean(() => { - inject.value.itemMap.value.delete(refValue) + inject.itemMap.value.delete(refValue) }) }) - return () => createVNode(OkuSlot, { ref: composedRefs, ...{ [ITEM_DATA_ATTR]: '' } }, slots) + return () => h(OkuSlot, { ref: composedRefs, ...{ [ITEM_DATA_ATTR]: '' } }, slots) }, }) @@ -136,13 +136,13 @@ function createCollection(name: string, Item function useCollection(scope: any) { const inject = useCollectionInject(`${name}CollectionConsumer`, scope) const getItems = computed(() => { - const collectionNode = inject.value.collectionRef.value?.$el + const collectionNode = inject.collectionRef.value?.$el if (!collectionNode) return [] const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)) - const items = Array.from(inject.value.itemMap.value.values()) + const items = Array.from(inject.itemMap.value.values()) const orderedItems = items.sort( (a, b) => { return orderedNodes.indexOf(a.ref.$el!) - orderedNodes.indexOf(b.ref.$el!) diff --git a/packages/components/collection/src/stories/CollectionDemo.vue b/packages/components/collection/src/stories/CollectionDemo.vue index 426ce92da..eab2c0603 100644 --- a/packages/components/collection/src/stories/CollectionDemo.vue +++ b/packages/components/collection/src/stories/CollectionDemo.vue @@ -24,7 +24,7 @@ const alert = () => window.alert('clicked') function LogsItem() { const getItems = useCollection(undefined) - console.log(getItems.value[0].ref.value) + console.log(getItems.value) } diff --git a/packages/components/direction/src/Direction.ts b/packages/components/direction/src/Direction.ts index 55094db59..fe4625e6d 100644 --- a/packages/components/direction/src/Direction.ts +++ b/packages/components/direction/src/Direction.ts @@ -10,7 +10,10 @@ const DirectionContextSymbol = Symbol('DirectionContext') const DirectionProvider = defineComponent({ name: 'DirectionProvider', props: { - dir: { type: String as PropType, required: true }, + dir: { + type: String as PropType, + required: true, + }, }, setup(props, { slots }) { // Direction context diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts index 366106320..47f910555 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.ts @@ -10,42 +10,39 @@ import type { InstanceTypeRef, MergeProps, } from '@oku-ui/primitive' -import { Primitive } from '@oku-ui/primitive' +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' import type { PropType, Ref } from 'vue' import { computed, defineComponent, h, + provide, ref, toRefs, - toValue, - unref, - watch, watchEffect, } from 'vue' -import type { Scope } from '@oku-ui/provide' -import { createProvideScope } from '@oku-ui/provide' +import { ScopePropObject } from '@oku-ui/provide' import { composeEventHandlers } from '@oku-ui/utils' -import type { DismissableLayerBranchElement } from './DismissableLayerBranch' -import { useFocusOutside, usePointerDownOutside } from './util' +import { dispatchUpdate, useFocusOutside, usePointerDownOutside } from './util' /* ------------------------------------------------------------------------------------------------- * DismissableLayer * ----------------------------------------------------------------------------------------------- */ -export const CONTEXT_UPDATE = 'dismissableLayer.update' +export const INJECT_UPDATE = 'dismissableLayer.update' export const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside' export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside' let originalBodyPointerEvents: string export const DISMISSABLE_NAME = 'OkuDismissableLayer' - +export const DismissableLayerProvideKey = Symbol('DismissableLayerProvide') type DismissableLayerElement = ElementType<'div'> +type _ElDismissableLayerElement = HTMLDivElement -type DismissableLayerContextValue = { - layers: Ref> - layersWithOutsidePointerEventsDisabled: Ref> - branches: Ref> +export type DismissableLayerProvideValue = { + layers: Ref> + layersWithOutsidePointerEventsDisabled: Ref> + branches: Ref> } export type PointerDownOutsideEvent = CustomEvent<{ @@ -90,12 +87,6 @@ interface DismissableLayerProps extends IPrimitiveProps { onDismiss?: () => void } -const [createDismissableLayerProvide, _createDismissableLayerScope] - = createProvideScope(DISMISSABLE_NAME) - -const [dismissableLayerProvider, useDismissableLayerInject] - = createDismissableLayerProvide(DISMISSABLE_NAME) - const DismissableLayer = defineComponent({ name: DISMISSABLE_NAME, inheritAttrs: false, @@ -124,21 +115,29 @@ const DismissableLayer = defineComponent({ type: Function as PropType<() => void>, required: false, }, - asChild: { - type: Boolean, - default: undefined, + onFocusCapture: { + type: Function as PropType<() => void>, + required: false, }, - scopeDismissableLayer: { - type: Object as unknown as PropType, + onBlurCapture: { + type: Function as PropType<() => void>, required: false, }, + onPointerDownCapture: { + type: Function as PropType<() => void>, + required: false, + }, + ...PrimitiveProps, + scopeDismissableLayer: { + ...ScopePropObject, + }, }, emits: [ - 'onFocusOutside', - 'onDismiss', - 'onPointerDownOutside', - 'onInteractOutside', - 'onEscapeKeyDown', + 'focusOutside', + 'dismiss', + 'pointerDownOutside', + 'interactOutside', + 'escapeKeyDown', ], setup(props, { attrs, emit }) { const { @@ -148,31 +147,20 @@ const DismissableLayer = defineComponent({ onInteractOutside, onPointerDownOutside, disableOutsidePointerEvents, - scopeDismissableLayer, - asChild, } = toRefs(props) - const { ...dismissableLayerAttrs } = attrs + const _layers = ref(new Set<_ElDismissableLayerElement>()) + const layersWithOutsidePointerEventsDisabled = ref(new Set<_ElDismissableLayerElement>()) + const branches = ref(new Set<_ElDismissableLayerElement>()) - const layers = ref>(new Set()) - - const layersWithOutsidePointerEventsDisabled = ref< - Set - >(new Set()) + const layers = computed(() => Array.from(_layers.value)) - const branches = ref>(new Set()) - - dismissableLayerProvider({ - layers, + provide(DismissableLayerProvideKey, { + layers: _layers, layersWithOutsidePointerEventsDisabled, branches, - scope: scopeDismissableLayer.value, }) - const context = toValue( - useDismissableLayerInject(DISMISSABLE_NAME, scopeDismissableLayer.value), - ) - const node = ref | null>(null) const forwardedRef = useForwardRef() @@ -182,47 +170,31 @@ const DismissableLayer = defineComponent({ () => node.value?.$el?.ownerDocument ?? globalThis?.document, ) - watch( - () => context, - () => { - if (context?.layers.value) - layers.value = context.layers.value - if (context?.layersWithOutsidePointerEventsDisabled.value) { - layersWithOutsidePointerEventsDisabled.value - = context?.layersWithOutsidePointerEventsDisabled.value - } - }, - { immediate: true, deep: true }, - ) + const highestLayerWithOutsidePointerEventsDisabled = computed(() => { + const [highestLayerWithOutsidePointerEventsDisabled] = [...layersWithOutsidePointerEventsDisabled.value].slice(-1) + return highestLayerWithOutsidePointerEventsDisabled + }) - const isBodyPointerEventsDisabled = computed( - () => context!.layersWithOutsidePointerEventsDisabled.value.size > 0, - ) + const highestLayerWithOutsidePointerEventsDisabledIndex = computed(() => layers.value.indexOf(highestLayerWithOutsidePointerEventsDisabled.value)) const index = computed(() => { - return node.value - ? Array.from(layers.value).indexOf(node.value as any) + return node.value?.$el + ? layers.value.indexOf(node.value.$el) : -1 }) - const isPointerEventsEnabled = computed(() => { - const layers = Array.from(context.layers.value) - - const [highestLayerWithOutsidePointerEventsDisabled] = [ - ...context.layersWithOutsidePointerEventsDisabled.value, - ].slice(-1) - - const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf( - highestLayerWithOutsidePointerEventsDisabled, - ) + const isBodyPointerEventsDisabled = computed( + () => layersWithOutsidePointerEventsDisabled.value.size > 0, + ) - return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex + const isPointerEventsEnabled = computed(() => { + return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex.value }) const pointerDownOutside = usePointerDownOutside((event) => { const target = event.target as HTMLElement - const isPointerDownOnBranch = [...context.branches.value].some( - (branch: any) => branch.contains(target), + const isPointerDownOnBranch = [...branches.value].some( + branch => branch.contains(target), ) if (!isPointerEventsEnabled.value || isPointerDownOnBranch) @@ -231,18 +203,18 @@ const DismissableLayer = defineComponent({ onPointerDownOutside.value?.(event) onInteractOutside.value?.(event) - emit('onPointerDownOutside', event) - emit('onInteractOutside', event) + emit('pointerDownOutside', event) + emit('interactOutside', event) if (!event.defaultPrevented) { onDismiss.value?.() - emit('onDismiss') + emit('dismiss') } - }, ownerDocument) + }, ownerDocument.value) const focusOutside = useFocusOutside((event) => { const target = event.target as HTMLElement - const isFocusInBranch = [...context.branches.value].some((branch: any) => + const isFocusInBranch = [...branches.value].some(branch => branch.contains(target), ) @@ -252,52 +224,54 @@ const DismissableLayer = defineComponent({ onFocusOutside.value?.(event) onInteractOutside.value?.(event) - emit('onFocusOutside', event) - emit('onInteractOutside', event) + emit('focusOutside', event) + emit('interactOutside', event) if (!event.defaultPrevented) { onDismiss.value?.() - emit('onDismiss') + emit('dismiss') } - }, ownerDocument) + }, ownerDocument.value) useEscapeKeydown((event) => { - const isHighestLayer = index.value === context.layers.value.size - 1 + const isHighestLayer = index.value === _layers.value.size - 1 if (!isHighestLayer) return onEscapeKeyDown.value?.(event) - emit('onEscapeKeyDown', event) + emit('escapeKeyDown', event) if (!event.defaultPrevented && onDismiss) { event.preventDefault() onDismiss.value?.() - emit('onDismiss') + emit('dismiss') } - }, unref(ownerDocument)) + }, ownerDocument.value) watchEffect((onInvalidate) => { - if (!node.value) + if (!node.value?.$el) return if (disableOutsidePointerEvents.value) { - if (context.layersWithOutsidePointerEventsDisabled.value.size === 0) { + if (layersWithOutsidePointerEventsDisabled.value.size === 0) { originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents ownerDocument.value.body.style.pointerEvents = 'none' } - context.layersWithOutsidePointerEventsDisabled.value.add( - node.value as any, + layersWithOutsidePointerEventsDisabled.value.add( + node.value.$el, ) } - context.layers.value.add(node.value as any) + _layers.value.add(node.value.$el) + + dispatchUpdate() onInvalidate(() => { if ( disableOutsidePointerEvents.value - && context.layersWithOutsidePointerEventsDisabled.value.size === 1 + && layersWithOutsidePointerEventsDisabled.value.size === 1 ) { ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents @@ -309,32 +283,34 @@ const DismissableLayer = defineComponent({ * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect * because a change to `disableOutsidePointerEvents` would remove this layer from the stack * and add it to the end again so the layering order wouldn't be _creation order_. - * We only want them to be removed from context stacks when unmounted. + * We only want them to be removed from inject stacks when unmounted. */ watchEffect((onInvalidate) => { onInvalidate(() => { - if (!node.value) + if (!node.value?.$el) return - context.layers.value.delete(node.value as any) - context.layersWithOutsidePointerEventsDisabled.value.delete( - node.value as any, + _layers.value.delete(node.value.$el) + layersWithOutsidePointerEventsDisabled.value.delete( + node.value.$el, ) + dispatchUpdate() }) }) watchEffect((onInvalidate) => { const handleUpdate = () => {} - document.addEventListener(CONTEXT_UPDATE, handleUpdate) + document.addEventListener(INJECT_UPDATE, handleUpdate) onInvalidate(() => - document.removeEventListener(CONTEXT_UPDATE, handleUpdate), + document.removeEventListener(INJECT_UPDATE, handleUpdate), ) }) const originalReturn = () => h(Primitive.div, { + ...dismissableLayerAttrs, ref: composedRefs, - asChild: asChild.value, + asChild: props.asChild, style: { pointerEvents: isBodyPointerEventsDisabled.value ? isPointerEventsEnabled.value @@ -343,23 +319,13 @@ const DismissableLayer = defineComponent({ : undefined, ...(dismissableLayerAttrs.style as CSSPropertyRule), }, - ...dismissableLayerAttrs, - onFocusCapture: composeEventHandlers( - dismissableLayerAttrs?.onFocusCapture as ( - event: GlobalEventHandlersEventMap['focus'] - ) => void, + onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture, ), - onBlurCapture: composeEventHandlers( - dismissableLayerAttrs?.onBlurCapture as ( - event: GlobalEventHandlersEventMap['blur'] - ) => void, + onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture, ), - onPointerDownCapture: composeEventHandlers( - dismissableLayerAttrs?.onPointerDownCapture as ( - event: GlobalEventHandlersEventMap['pointerdown'] - ) => void, + onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture, ), }) @@ -383,6 +349,6 @@ type InstanceDismissableLayerType = InstanceTypeRef< const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer & (new () => { $props: _DismissableLayer }) -export { OkuDismissableLayer, useDismissableLayerInject } +export { OkuDismissableLayer } export type { InstanceDismissableLayerType, DismissableLayerProps } diff --git a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts index cd30049d0..6d0724e4b 100644 --- a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts +++ b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts @@ -6,13 +6,11 @@ import type { InstanceTypeRef, MergeProps, } from '@oku-ui/primitive' -import type { PropType } from 'vue' -import { defineComponent, h, ref, toRefs, toValue, watchEffect } from 'vue' -import type { Scope } from '@oku-ui/provide' +import { defineComponent, h, inject, ref, watchEffect } from 'vue' import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable' +import type { DismissableLayerProvideValue } from './DismissableLayer' import { - DISMISSABLE_NAME, - useDismissableLayerInject, + DismissableLayerProvideKey, } from './DismissableLayer' /* ------------------------------------------------------------------------------------------------- @@ -34,42 +32,30 @@ const DismissableLayerBranch = defineComponent({ type: Boolean, default: undefined, }, - scopeDismissableLayerbranch: { - type: Object as unknown as PropType, - required: false, - }, }, setup(props, { attrs }) { - const { scopeDismissableLayerbranch, asChild } = toRefs(props) - - const { ...dismissableLayerBranchAttrs } = attrs - - const context = toValue( - useDismissableLayerInject( - DISMISSABLE_NAME, - scopeDismissableLayerbranch.value, - ), - ) + const _inject = inject(DismissableLayerProvideKey) as DismissableLayerProvideValue - const node = ref | null>(null) + const node = ref | null>() const forwardedRef = useForwardRef() const composedRefs = useComposedRefs(node, forwardedRef) watchEffect((onInvalidate) => { if (node.value) - context.branches.value.add(node.value as any) + _inject.branches.value.add(node.value.$el) onInvalidate(() => { - context.branches.value.delete(node.value as any) + if (node.value && node.value.$el) + _inject.branches.value.delete(node.value.$el) }) }) const originalReturn = () => h(Primitive.div, { ref: composedRefs, - asChild: asChild.value, - ...dismissableLayerBranchAttrs, + asChild: props.asChild, + ...attrs, }) return originalReturn diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue index 20d19a2be..65bf48da0 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue @@ -1,9 +1,8 @@ diff --git a/packages/components/tabs/README.md b/packages/components/tabs/README.md new file mode 100644 index 000000000..31237339f --- /dev/null +++ b/packages/components/tabs/README.md @@ -0,0 +1,10 @@ +# `@oku-ui/tabs` + +## Installation + +```sh +$ pnpm add @oku-ui/tabs +``` + +## Usage +... \ No newline at end of file diff --git a/packages/components/tabs/build.config.ts b/packages/components/tabs/build.config.ts new file mode 100644 index 000000000..b972b9a78 --- /dev/null +++ b/packages/components/tabs/build.config.ts @@ -0,0 +1,12 @@ +import { defineBuildConfig } from 'unbuild' + +export default defineBuildConfig({ + entries: [ + { + builder: 'mkdist', + input: './src/', + pattern: ['**/!(*.test|*.stories).ts'], + }, + ], + declaration: true, +}) diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json new file mode 100644 index 000000000..561893bcf --- /dev/null +++ b/packages/components/tabs/package.json @@ -0,0 +1,47 @@ +{ + "name": "@oku-ui/tabs", + "type": "module", + "version": "0.1.0", + "license": "MIT", + "source": "src/index.ts", + "funding": "https://github.com/sponsors/productdevbook", + "homepage": "https://oku-ui.com/primitives", + "repository": { + "type": "git", + "url": "git+https://github.com/oku-ui/primitives.git", + "directory": "packages/components/tabs" + }, + "bugs": { + "url": "https://github.com/oku-ui/primitives/issues" + }, + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs" + } + }, + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsup", + "dev": "tsup --watch" + }, + "peerDependencies": { + "vue": "^3.3.4" + }, + "dependencies": { + "@oku-ui/direction": "latest", + "@oku-ui/presence": "latest", + "@oku-ui/primitive": "latest", + "@oku-ui/provide": "latest", + "@oku-ui/roving-focus": "latest", + "@oku-ui/use-composable": "latest", + "@oku-ui/utils": "latest" + }, + "devDependencies": { + "tsconfig": "workspace:^" + } +} diff --git a/packages/components/tabs/src/index.ts b/packages/components/tabs/src/index.ts new file mode 100644 index 000000000..517b59858 --- /dev/null +++ b/packages/components/tabs/src/index.ts @@ -0,0 +1,9 @@ +export { OkuTabs } from './tabs' +export { OkuTabList } from './tab-list' +export { OkuTabTrigger } from './tab-trigger' +export { OkuTabContent } from './tab-content' + +export type { TabsProps } from './tabs' +export { type TabListProps } from './tab-list' +export { type TabsTriggerProps } from './tab-trigger' +export { type TabsContentProps } from './tab-content' diff --git a/packages/components/tabs/src/stories/TabsDemo.vue b/packages/components/tabs/src/stories/TabsDemo.vue new file mode 100644 index 000000000..2bccf1c68 --- /dev/null +++ b/packages/components/tabs/src/stories/TabsDemo.vue @@ -0,0 +1,301 @@ + + + + + diff --git a/packages/components/tabs/src/stories/tabs.stories.ts b/packages/components/tabs/src/stories/tabs.stories.ts new file mode 100644 index 000000000..6aa681837 --- /dev/null +++ b/packages/components/tabs/src/stories/tabs.stories.ts @@ -0,0 +1,70 @@ +import type { Meta, StoryObj } from '@storybook/vue3' + +import type { ITabsProps } from './TabsDemo.vue' +import OkuTabsComponent from './TabsDemo.vue' + +interface StoryProps extends ITabsProps { } + +const meta = { + title: 'Components/Tabs', + component: OkuTabsComponent, + args: { + template: '#1', + }, + tags: ['autodocs'], +} satisfies Meta & { + args: StoryProps +} + +export default meta +type Story = StoryObj + +export const Styled: Story = { + args: { + template: '#1', + // allShow: true, + }, + render: (args: any) => ({ + components: { OkuTabsComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} + +export const Indeterminate: Story = { + args: { + template: '#2', + // allShow: true, + }, + + render: (args: any) => ({ + components: { OkuTabsComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} + +export const Form: Story = { + args: { + template: '#3', + // allShow: true, + }, + + render: (args: any) => ({ + components: { OkuTabsComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} diff --git a/packages/components/tabs/src/tab-content.ts b/packages/components/tabs/src/tab-content.ts new file mode 100644 index 000000000..8cc02e84e --- /dev/null +++ b/packages/components/tabs/src/tab-content.ts @@ -0,0 +1,91 @@ +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' +import { computed, defineComponent, h, ref, toRefs, watchEffect } from 'vue' +import type { ComputedRef, PropType } from 'vue' +import { OkuPresence } from '@oku-ui/presence' +import { useForwardRef } from '@oku-ui/use-composable' +import type { ScopedPropsInterface } from './tabs' +import { ScopedProps, useTabsInject } from './tabs' +import { makeContentId, makeTriggerId } from './utils' + +const TAB_CONTENT_NAME = 'OkuTabContent' as const + +type TabsContentElement = ElementType<'div'> +export type _TabsContentEl = HTMLDivElement + +interface TabsContentProps extends ScopedPropsInterface { + value: string + + /** + * Used to force mounting when more control is needed. Useful when + * controlling animation with React animation libraries. + */ + forceMount?: true +} + +const TabContent = defineComponent({ + name: TAB_CONTENT_NAME, + inheritAttrs: false, + props: { + value: { + type: String as PropType, + required: true, + }, + forceMount: { + type: Boolean as PropType, + default: false, + }, + ...PrimitiveProps, + ...ScopedProps, + }, + setup(props, { slots, attrs }) { + const { value } = toRefs(props) + const { ...ContentAttrs } = attrs + const injectTabs = useTabsInject(TAB_CONTENT_NAME, props.scopeTabs) + + const triggerId = makeTriggerId(injectTabs.baseId, value.value) + const contentId = makeContentId(injectTabs.baseId, value.value) + const isSelected = computed(() => value.value === injectTabs.value?.value) + + const forwardedRef = useForwardRef() + const isMountAnimationPreventedRef = ref(isSelected.value) + + watchEffect((onClean) => { + const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.value = false)) + onClean(() => cancelAnimationFrame(rAF)) + }) + + return () => h(OkuPresence, { + present: isSelected.value || props.forceMount, + }, { + default: ({ isPresent }: { isPresent: ComputedRef }) => h(Primitive.div, { + 'data-state': isSelected.value ? 'active' : 'inactive', + 'data-orientation': injectTabs.orientation, + 'role': 'tabpanel', + 'aria-labelledby': triggerId, + 'hidden': !isPresent, + 'id': contentId, + 'tabindex': '0', + ...ContentAttrs, + 'ref': forwardedRef, + 'style': { + ...ContentAttrs.style ?? {} as any, + animationDuration: isMountAnimationPreventedRef.value ? '0s' : undefined, + }, + }, { + default: () => isPresent ? slots.default?.() : null, + }), + }) + }, +}) + +type _TabsProps = MergeProps + +type InstanceTabsContent = InstanceTypeRef + +const OkuTabContent = TabContent as typeof TabContent & +(new () => { $props: _TabsProps }) + +export { OkuTabContent } + +export type { TabsContentProps, InstanceTabsContent } diff --git a/packages/components/tabs/src/tab-list.ts b/packages/components/tabs/src/tab-list.ts new file mode 100644 index 000000000..94bd1e5f9 --- /dev/null +++ b/packages/components/tabs/src/tab-list.ts @@ -0,0 +1,79 @@ +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import type { + ElementType, + IPrimitiveProps, + InstanceTypeRef, + MergeProps, +} from '@oku-ui/primitive' +import type { PropType } from 'vue' +import { defineComponent, h, toRefs } from 'vue' +import { useForwardRef } from '@oku-ui/use-composable' +import { OkuRovingFocusGroup, createRovingFocusGroupScope } from '@oku-ui/roving-focus' +import type { ScopedPropsInterface } from './tabs' +import { ScopedProps, useTabsInject } from './tabs' + +type TabListElement = ElementType<'div'> +export type _TabListEl = HTMLDivElement + +const TAB_LIST_NAME = 'OkuTabList' as const + +interface TabListProps extends ScopedPropsInterface { + loop?: boolean +} + +const useRovingFocusGroupScope = createRovingFocusGroupScope() + +const TabList = defineComponent({ + name: TAB_LIST_NAME, + inheritAttrs: false, + props: { + loop: { + type: Boolean as PropType, + default: true, + }, + ...PrimitiveProps, + ...ScopedProps, + }, + setup(props, { slots, attrs }) { + const { loop } = toRefs(props) + const { ...listAttrs } = attrs + + const injectTabs = useTabsInject(TAB_LIST_NAME, props.scopeTabs) + const forwardedRef = useForwardRef() + + const rovingFocusGroupScope = useRovingFocusGroupScope(props.scopeTabs) + + return () => + h(OkuRovingFocusGroup, { + asChild: true, + ...rovingFocusGroupScope.value, + dir: injectTabs.dir, + loop: loop.value, + orientation: injectTabs.orientation, + }, { + default: () => h( + Primitive.div, + { + 'role': 'tablist', + 'aria-orientation': injectTabs.orientation, + 'asChild': props.asChild, + ...listAttrs, + 'ref': forwardedRef, + }, + { + default: () => slots.default?.(), + }, + ), + }) + }, +}) + +type _TabListProps = MergeProps + +export type InstanceTabListType = InstanceTypeRef + +const OkuTabList = TabList as typeof TabList & (new () => { $props: _TabListProps }) + +export { OkuTabList } + +export type { TabListProps } diff --git a/packages/components/tabs/src/tab-trigger.ts b/packages/components/tabs/src/tab-trigger.ts new file mode 100644 index 000000000..fb0ec57e0 --- /dev/null +++ b/packages/components/tabs/src/tab-trigger.ts @@ -0,0 +1,112 @@ +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' +import { type PropType, computed, defineComponent, h, toRefs } from 'vue' +import { useForwardRef } from '@oku-ui/use-composable' +import { OkuRovingFocusGroupItem } from '@oku-ui/roving-focus' +import { composeEventHandlers } from '@oku-ui/utils' +import type { ScopedPropsInterface } from './tabs' +import { ScopedProps, useRovingFocusGroupScope, useTabsInject } from './tabs' +import { makeContentId, makeTriggerId } from './utils' + +type TabsTriggerElement = ElementType<'button'> +export type _TabsTriggerEl = HTMLButtonElement + +const TAB_TRIGGER_NAME = 'OkuTabTrigger' as const + +interface TabsTriggerProps extends ScopedPropsInterface { + value: string + disabled?: boolean + onMousedown?: (event: MouseEvent) => void + onKeydown?: (event: KeyboardEvent) => void + onFocus?: (event: FocusEvent) => void +} + +const TabTrigger = defineComponent({ + name: TAB_TRIGGER_NAME, + inheritAttrs: false, + props: { + value: { + type: String as PropType, + required: true, + }, + disabled: { + type: Boolean as PropType, + default: false, + }, + onMousedown: Function as PropType<(e: MouseEvent) => void>, + onKeydown: Function as PropType<(e: KeyboardEvent) => void>, + onFocus: Function as PropType<(e: FocusEvent) => void>, + ...ScopedProps, + ...PrimitiveProps, + }, + setup(props, { slots, attrs }) { + const { scopeTabs, value, disabled } = toRefs(props) + const { ...triggerAttrs } = attrs + const injectedValue = useTabsInject(TAB_TRIGGER_NAME, scopeTabs.value) + + const forwardedRef = useForwardRef() + + const rovingFocusGroupScope = useRovingFocusGroupScope(scopeTabs.value) + const triggerId = makeTriggerId(injectedValue.baseId, value.value) + const contentId = makeContentId(injectedValue.baseId, value.value) + const isSelected = computed(() => (value.value === injectedValue.value?.value)) + return () => + h(OkuRovingFocusGroupItem, { + asChild: true, + ...rovingFocusGroupScope, + active: isSelected.value, + focusable: !disabled.value, + }, { + default: () => h( + Primitive.button, + { + 'type': 'button', + 'role': 'tab', + 'aria-selected': isSelected.value, + 'aria-controls': contentId, + 'data-state': isSelected.value ? 'active' : 'inactive', + 'data-disabled': disabled.value ? '' : undefined, + 'disabled': disabled.value, + 'id': triggerId, + ...triggerAttrs, + 'ref': forwardedRef, + 'onMousedown': composeEventHandlers(props.onMousedown, (event: MouseEvent) => { + // only call handler if it's the left button (mousedown gets triggered by all mouse buttons) + // but not when the control key is pressed (avoiding MacOS right click) + if (!disabled.value && event.button === 0 && event.ctrlKey === false) { + injectedValue.onValueChange(value.value) + } + else { + // prevent focus to avoid accidental activation + event.preventDefault() + } + }), + 'onKeydown': composeEventHandlers(props.onKeydown, (event: KeyboardEvent) => { + if ([' ', 'Enter'].includes(event.key)) + injectedValue.onValueChange(value.value) + }), + 'onFocus': composeEventHandlers(props.onFocus, () => { + // handle "automatic" activation if necessary + // ie. activate tab following focus + const isAutomaticActivation = injectedValue.activationMode !== 'manual' + if (!isSelected.value && !disabled.value && isAutomaticActivation) + injectedValue.onValueChange(value.value) + }), + }, + { + default: () => slots.default?.(), + }, + ), + }) + }, +}) + +type _TabsProps = MergeProps + +export type InstanceTabsTriggerType = InstanceTypeRef + +const OkuTabTrigger = TabTrigger as typeof TabTrigger & (new () => { $props: _TabsProps }) + +export { OkuTabTrigger } + +export type { TabsTriggerProps } diff --git a/packages/components/tabs/src/tabs.ts b/packages/components/tabs/src/tabs.ts new file mode 100644 index 000000000..b0f00078e --- /dev/null +++ b/packages/components/tabs/src/tabs.ts @@ -0,0 +1,199 @@ +import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps, RefElement } from '@oku-ui/primitive' +import { Primitive } from '@oku-ui/primitive' +import { computed, defineComponent, h, toRefs, useModel } from 'vue' +import type { ComputedRef, PropType } from 'vue' +import type { Scope } from '@oku-ui/provide' +import { createProvideScope } from '@oku-ui/provide' +import { createRovingFocusGroupScope } from '@oku-ui/roving-focus' +import { useControllable, useForwardRef, useId } from '@oku-ui/use-composable' +import { useDirection } from '@oku-ui/direction' + +const TAB_NAME = 'OkuTab' as const + +type TabsElement = ElementType<'div'> +export type _TabsEl = HTMLDivElement + +export type ScopedPropsInterface

= P & { scopeTabs?: Scope } +export const ScopedProps = { + scopeTabs: { + type: Object as PropType, + required: false, + }, +} + +type Orientation = 'horizontal' | 'vertical' +type Direction = 'ltr' | 'rtl' +/** + * Whether a tab is activated automatically or manually. + * @defaultValue automatic + * */ +type ActivationMode = 'automatic' | 'manual' +interface TabsProps extends ScopedPropsInterface { + /** The value for the selected tab, if controlled */ + value?: string + /** + * The default value of the tab. + * @default 'tab1' + * @type string + * @example + * ```vue + * + // ... + * + * ``` + * @see link-to-oku-docs/tab + */ + defaultValue?: string + /** + * The callback function that is called when the tab value changes. + * @default () => {} + * @type (value: string) => void + * @example + * ```vue + * console.log(value)}> + // ... + * + * */ + onValueChange?: (value: string) => void + /** + * The orientation of the tabs. + * @default 'horizontal' + * @type 'horizontal' | 'vertical' + * @example + * ```vue + * + // ... + * + * ``` + * @see link-to-oku-docs/tab + * */ + orientation?: Orientation + /** + * The direction of navigation between toolbar items. + */ + dir?: Direction + /** + * Whether a tab is activated automatically or manually. + * @defaultValue automatic + * */ + activationMode?: ActivationMode +} + +interface TabsProvideValue { + baseId: string + value?: ComputedRef + onValueChange: (value: string) => void + orientation?: TabsProps['orientation'] + dir?: TabsProps['dir'] + activationMode?: TabsProps['activationMode'] +} + +export const [createTabsProvider, _createTabsScope] = createProvideScope(TAB_NAME, [ + createRovingFocusGroupScope, +]) + +export const [TabsProvider, useTabsInject] + = createTabsProvider(TAB_NAME) + +export const useRovingFocusGroupScope = createRovingFocusGroupScope() + +const Tabs = defineComponent({ + name: TAB_NAME, + inheritAttrs: false, + props: { + value: { + type: String as PropType, + required: false, + }, + defaultValue: { + type: String as PropType, + default: undefined, + }, + orientation: { + type: String as PropType, + default: 'horizontal', + }, + dir: { + type: String as PropType, + default: 'ltr', + required: false, + }, + activationMode: { + type: String as PropType, + default: 'automatic', + required: false, + }, + modelValue: { + type: String as PropType, + required: false, + }, + onValueChange: { + type: Function as PropType<(value: string) => void>, + required: false, + }, + asChild: { + type: Boolean as PropType, + default: false, + }, + ...ScopedProps, + }, + emits: ['update:modelValue'], + setup(props, { slots, emit, attrs }) { + const { + value: valueProp, + onValueChange, + defaultValue, + orientation, + dir, + activationMode, + } = toRefs(props) + + const direction = useDirection(dir.value) + + const forwardedRef = useForwardRef() + + const modelValue = useModel(props, 'modelValue') + + const { state, updateValue } = useControllable({ + prop: computed(() => modelValue.value ?? valueProp.value), + defaultProp: computed(() => defaultValue.value), + onChange: (result: any) => { + emit('update:modelValue', result) + onValueChange.value?.(result) + }, + }) + + TabsProvider({ + onValueChange: updateValue, + orientation: orientation.value, + dir: direction, + value: state, + activationMode: activationMode.value, + baseId: useId(), + scope: props.scopeTabs, + }) + + return () => + h( + Primitive.div, + { + 'dir': direction, + 'data-orientation': props.orientation, + 'ref': forwardedRef, + ...attrs, + 'asChild': props.asChild, + }, slots, + ) + }, +}) + +type _TabsProps = MergeProps +export type IstanceTabsType = InstanceTypeRef + +type TabsRef = RefElement + +const OkuTabs = Tabs as typeof Tabs & (new () => { $props: _TabsProps }) + +export { OkuTabs } + +export type { TabsProps, TabsRef } diff --git a/packages/components/tabs/src/utils.ts b/packages/components/tabs/src/utils.ts new file mode 100644 index 000000000..a865868d7 --- /dev/null +++ b/packages/components/tabs/src/utils.ts @@ -0,0 +1,7 @@ +export function makeTriggerId(baseId: string, value: string) { + return `${baseId}-trigger-${value}` +} + +export function makeContentId(baseId: string, value: string) { + return `${baseId}-content-${value}` +} diff --git a/packages/components/tabs/tsconfig.json b/packages/components/tabs/tsconfig.json new file mode 100644 index 000000000..b8dfa9041 --- /dev/null +++ b/packages/components/tabs/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "tsconfig/node16.json", + "compilerOptions": { + "rootDir": "src", + "outDir": "dist" + }, + "include": [ + "src" + ] +} diff --git a/packages/components/tabs/tsup.config.ts b/packages/components/tabs/tsup.config.ts new file mode 100644 index 000000000..a2f7a0d8b --- /dev/null +++ b/packages/components/tabs/tsup.config.ts @@ -0,0 +1,22 @@ +import { defineConfig } from 'tsup' +import pkg from './package.json' + +const external = [ + ...Object.keys(pkg.dependencies || {}), + ...Object.keys(pkg.peerDependencies || {}), +] + +export default defineConfig((options) => { + return [ + { + ...options, + entryPoints: ['src/index.ts'], + external, + dts: true, + clean: true, + target: 'node16', + format: ['esm'], + outExtension: () => ({ js: '.mjs' }), + }, + ] +}) diff --git a/packages/components/toggle/src/toggle.ts b/packages/components/toggle/src/toggle.ts index abf99262a..f503ab18b 100644 --- a/packages/components/toggle/src/toggle.ts +++ b/packages/components/toggle/src/toggle.ts @@ -1,6 +1,6 @@ import type { PropType } from 'vue' import { computed, defineComponent, h, toRefs, useModel } from 'vue' -import { Primitive } from '@oku-ui/primitive' +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' import { composeEventHandlers } from '@oku-ui/utils' import { useControllable, useForwardRef } from '@oku-ui/use-composable' @@ -42,6 +42,7 @@ const Toggle = defineComponent({ type: Boolean, default: false, }, + ...PrimitiveProps, }, emits: ['update:pressed', 'update:modelValue'], setup(props, { attrs, slots, emit }) { @@ -69,6 +70,7 @@ const Toggle = defineComponent({ 'data-disabled': disabled ? '' : undefined, ...toggleProps, 'ref': forwardedRef, + 'asChild': props.asChild, 'onClick': composeEventHandlers(toggleProps.onClick, () => { if (!disabled) updateValue(!state.value) diff --git a/packages/components/visually-hidden/src/VisuallyHidden.ts b/packages/components/visually-hidden/src/VisuallyHidden.ts index a3b877548..052e8b6e3 100644 --- a/packages/components/visually-hidden/src/VisuallyHidden.ts +++ b/packages/components/visually-hidden/src/VisuallyHidden.ts @@ -1,4 +1,4 @@ -import { Primitive } from '@oku-ui/primitive' +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' import type { ElementType, IPrimitiveProps, @@ -20,12 +20,9 @@ const VisuallyHidden = defineComponent({ name: NAME, inheritAttrs: false, props: { - asChild: { - type: Boolean, - default: undefined, - }, + ...PrimitiveProps, }, - setup(props, { attrs, expose }) { + setup(props, { attrs }) { const { ...visuallyHiddenAttrs } = attrs as VisuallyHiddenElement const forwardedRef = useForwardRef() diff --git a/packages/core/primitive/tsup.config.ts b/packages/core/primitive/tsup.config.ts index c5905e645..6cd5ada72 100644 --- a/packages/core/primitive/tsup.config.ts +++ b/packages/core/primitive/tsup.config.ts @@ -1,3 +1,4 @@ +import process from 'node:process' import { defineConfig } from 'tsup' import pkg from './package.json' @@ -6,6 +7,8 @@ const external = [ ...Object.keys(pkg.peerDependencies || {}), ] +const isClean = (process.env.CLEAN as unknown as number) !== 0 + export default defineConfig((options) => { return [ { @@ -13,9 +16,8 @@ export default defineConfig((options) => { entryPoints: ['src/index.ts'], external, dts: true, - clean: true, - outDir: './dist', - target: 'node16', + clean: isClean, + target: 'node18', format: ['esm'], outExtension: () => ({ js: '.mjs' }), }, diff --git a/packages/core/provide/src/createProvide.ts b/packages/core/provide/src/createProvide.ts index 9c98347f0..332e2ff2c 100644 --- a/packages/core/provide/src/createProvide.ts +++ b/packages/core/provide/src/createProvide.ts @@ -1,4 +1,4 @@ -import type { ComputedRef, InjectionKey } from 'vue' +import type { InjectionKey, PropType } from 'vue' import { computed, defineComponent, inject, provide } from 'vue' function createProvide( @@ -32,17 +32,13 @@ function createProvide( return [Provider, useContext] as const } -/* ------------------------------------------------------------------------------------------------- - * createProvideScope - * ----------------------------------------------------------------------------------------------- */ - type VueProvide = { key: InjectionKey value: C } type Scope = { [scopeName: string]: VueProvide[] } | undefined -type ScopeHook = (scope: Scope) => ComputedRef<{ [__scopeProp: string]: Scope }> +type ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope } interface CreateScope { scopeName: string (): ScopeHook @@ -51,35 +47,36 @@ interface CreateScope { function createProvideScope(scopeName: string, createProvideScopeDeps: CreateScope[] = []) { let defaultProviders: any[] = [] /* ----------------------------------------------------------------------------------------------- - * createContext + * createProvide * --------------------------------------------------------------------------------------------- */ function createProvide( rootComponentName: string, defaultValue?: ProvideValueType, ) { - const BaseProvideKey: InjectionKey = rootComponentName as any - // const BaseProvide = provide(BaseProvideKey, defaultValue) + const BaseProvideKey: InjectionKey = Symbol(rootComponentName) as any + const BaseScope = { key: BaseProvideKey, value: defaultValue } as VueProvide const index = defaultProviders.length - defaultProviders = [...defaultProviders, { [scopeName]: [{ key: BaseProvideKey, value: defaultValue }] }] + defaultProviders = [...defaultProviders, [{ key: BaseProvideKey, value: defaultValue }]] function Provider( - props: ProvideValueType & { scope: Scope }, + props: ProvideValueType & { scope: Scope | undefined }, ) { - const { scope, ...context } = props as any - const Provide = scope?.[scopeName][index] || BaseScope.key as ProvideValueType - const value = computed(() => context) - provide(Provide, value) + const { scope, ...context } = props + + const Provide = scope?.[scopeName][index] || BaseScope.key + provide(Provide, context) } - function useInject(consumerName: string, scope: Scope): ComputedRef { + function useInject(consumerName: string, scope: Scope | undefined): ProvideValueType { const Provide = scope?.[scopeName]?.[index] || BaseScope - const provide = inject(Provide.key) + const provide = inject(Provide.key) + if (provide) return provide if (defaultValue !== undefined) - return computed(() => defaultValue) + return defaultValue // // if a defaultProvide wasn't specified, it's a required provide. throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``) @@ -93,22 +90,21 @@ function createProvideScope(scopeName: string, createProvideScopeDeps: CreateSco * --------------------------------------------------------------------------------------------- */ const createScope: CreateScope = () => { const scopeProviders = defaultProviders[0] + return function useScope(scope: Scope) { const providers = scope?.[scopeName] || scopeProviders - return computed(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: providers } })) + return ({ [`scope${scopeName}`]: { ...scope, [scopeName]: providers } }) } } - createScope.scopeName = scopeName - return [createProvide, composeContextScopes(createScope, ...createProvideScopeDeps)] as const + return [createProvide, composeInjectScopes(createScope, ...createProvideScopeDeps)] as const } -function composeContextScopes(...scopes: CreateScope[]) { +function composeInjectScopes(...scopes: CreateScope[]) { const baseScope = scopes[0] if (scopes.length === 1) return baseScope - const createScope: CreateScope = () => { const scopeHooks = scopes.map(createScope => ({ useScope: createScope(), @@ -119,11 +115,12 @@ function composeContextScopes(...scopes: CreateScope[]) { // We are calling a hook inside a callback which React warns against to avoid inconsistent // renders, however, scoping doesn't have render side effects so we ignore the rule. const scopeProps = useScope(overrideScopes) - const currentScope = computed(() => scopeProps.value[`__scope${scopeName}`]) + const currentScope = scopeProps[`scope${scopeName}`] return { ...nextScopes, ...currentScope } }, {}) - return computed(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes })) + const data = ({ [`scope${baseScope.scopeName}`]: nextScopes }) + return data } } @@ -131,5 +128,10 @@ function composeContextScopes(...scopes: CreateScope[]) { return createScope } +export const ScopePropObject = { + type: Object as unknown as PropType, + required: false, +} + export { createProvide, createProvideScope } export type { CreateScope, Scope } diff --git a/packages/core/provide/src/index.ts b/packages/core/provide/src/index.ts index d49c2510c..c280869e1 100644 --- a/packages/core/provide/src/index.ts +++ b/packages/core/provide/src/index.ts @@ -1,2 +1,2 @@ -export { createProvide, createProvideScope } from './createProvide' +export { createProvide, createProvideScope, ScopePropObject } from './createProvide' export type { CreateScope, Scope } from './createProvide' diff --git a/packages/core/provide/tsup.config.ts b/packages/core/provide/tsup.config.ts index c5905e645..02745fc07 100644 --- a/packages/core/provide/tsup.config.ts +++ b/packages/core/provide/tsup.config.ts @@ -1,3 +1,4 @@ +import process from 'node:process' import { defineConfig } from 'tsup' import pkg from './package.json' @@ -6,6 +7,8 @@ const external = [ ...Object.keys(pkg.peerDependencies || {}), ] +const isClean = (process.env.CLEAN as unknown as number) !== 0 + export default defineConfig((options) => { return [ { @@ -13,8 +16,7 @@ export default defineConfig((options) => { entryPoints: ['src/index.ts'], external, dts: true, - clean: true, - outDir: './dist', + clean: isClean, target: 'node16', format: ['esm'], outExtension: () => ({ js: '.mjs' }), diff --git a/packages/core/use-composable/src/index.ts b/packages/core/use-composable/src/index.ts index bf791cd93..3a9b04522 100644 --- a/packages/core/use-composable/src/index.ts +++ b/packages/core/use-composable/src/index.ts @@ -10,5 +10,4 @@ export { useComposedRefs } from './useComposedRefs' export { useForwardRef } from './useForwardRef' export { useEscapeKeydown } from './useEscapeKeydown' export type { MaybeComputedElementRef } from './unrefElement' -export { useRect } from './use-rect' export { computedEager, syncRef, computedAsync } diff --git a/packages/core/use-composable/tsup.config.ts b/packages/core/use-composable/tsup.config.ts index c5905e645..6cd5ada72 100644 --- a/packages/core/use-composable/tsup.config.ts +++ b/packages/core/use-composable/tsup.config.ts @@ -1,3 +1,4 @@ +import process from 'node:process' import { defineConfig } from 'tsup' import pkg from './package.json' @@ -6,6 +7,8 @@ const external = [ ...Object.keys(pkg.peerDependencies || {}), ] +const isClean = (process.env.CLEAN as unknown as number) !== 0 + export default defineConfig((options) => { return [ { @@ -13,9 +16,8 @@ export default defineConfig((options) => { entryPoints: ['src/index.ts'], external, dts: true, - clean: true, - outDir: './dist', - target: 'node16', + clean: isClean, + target: 'node18', format: ['esm'], outExtension: () => ({ js: '.mjs' }), }, diff --git a/packages/core/utils/src/index.ts b/packages/core/utils/src/index.ts index ca68c35cd..7a9e017d8 100644 --- a/packages/core/utils/src/index.ts +++ b/packages/core/utils/src/index.ts @@ -1,6 +1,6 @@ export { clamp } from './number' export { composeEventHandlers } from './primitive' - +export { isValidVNodeElement } from './isValidVNodeElement' export { observeElementRect } from './observeElementRect' export type { Measurable } from './observeElementRect' diff --git a/packages/core/utils/src/isValidVNodeElement.ts b/packages/core/utils/src/isValidVNodeElement.ts new file mode 100644 index 000000000..3efbf6946 --- /dev/null +++ b/packages/core/utils/src/isValidVNodeElement.ts @@ -0,0 +1,11 @@ +/** + * Checks whether a given VNode is a render-vialble element. + */ +export function isValidVNodeElement(input: any): boolean { + return ( + input + && (typeof input.type === 'string' + || typeof input.type === 'object' + || typeof input.type === 'function') + ) +} diff --git a/packages/core/utils/tsup.config.ts b/packages/core/utils/tsup.config.ts index c5905e645..6cd5ada72 100644 --- a/packages/core/utils/tsup.config.ts +++ b/packages/core/utils/tsup.config.ts @@ -1,3 +1,4 @@ +import process from 'node:process' import { defineConfig } from 'tsup' import pkg from './package.json' @@ -6,6 +7,8 @@ const external = [ ...Object.keys(pkg.peerDependencies || {}), ] +const isClean = (process.env.CLEAN as unknown as number) !== 0 + export default defineConfig((options) => { return [ { @@ -13,9 +16,8 @@ export default defineConfig((options) => { entryPoints: ['src/index.ts'], external, dts: true, - clean: true, - outDir: './dist', - target: 'node16', + clean: isClean, + target: 'node18', format: ['esm'], outExtension: () => ({ js: '.mjs' }), }, diff --git a/packages/tsconfig/node18.json b/packages/tsconfig/node18.json new file mode 100644 index 000000000..75082d4bc --- /dev/null +++ b/packages/tsconfig/node18.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "display": "Node 18", + "_version": "18.2.0", + "compilerOptions": { + "lib": [ + "ES2023", + "DOM" + ], + "module": "Node16", + "target": "es2022", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "moduleResolution": "Node", + "types": [ + "vite/client" + ] + } +} diff --git a/playground/nuxt3/package.json b/playground/nuxt3/package.json index 3a5cc9eb8..f120bdc14 100644 --- a/playground/nuxt3/package.json +++ b/playground/nuxt3/package.json @@ -22,6 +22,7 @@ "@oku-ui/separator": "workspace:^", "@oku-ui/slot": "workspace:^", "@oku-ui/switch": "workspace:^", + "@oku-ui/tabs": "workspace:^", "@oku-ui/visually-hidden": "workspace:^" }, "devDependencies": { diff --git a/playground/nuxt3/pages/index.vue b/playground/nuxt3/pages/index.vue index fb7139b86..540ad87e7 100644 --- a/playground/nuxt3/pages/index.vue +++ b/playground/nuxt3/pages/index.vue @@ -56,6 +56,10 @@ const pages: Page[] = [ name: 'roving-focus', path: '/roving-focus', }, + { + name: 'OkuTabs', + path: '/tabs', + }, ] diff --git a/playground/nuxt3/pages/tabs.vue b/playground/nuxt3/pages/tabs.vue new file mode 100644 index 000000000..17f56e5f8 --- /dev/null +++ b/playground/nuxt3/pages/tabs.vue @@ -0,0 +1,5 @@ + diff --git a/playground/vue3/package.json b/playground/vue3/package.json index 627aa713c..1c01e3663 100644 --- a/playground/vue3/package.json +++ b/playground/vue3/package.json @@ -20,6 +20,7 @@ "@oku-ui/separator": "workspace:^", "@oku-ui/slot": "workspace:^", "@oku-ui/switch": "workspace:^", + "@oku-ui/tabs": "workspace:^", "vite-plugin-pages": "^0.31.0", "vue": "^3.3.4", "vue-router": "^4.2.4" diff --git a/playground/vue3/src/pages/index.vue b/playground/vue3/src/pages/index.vue index 9231170b9..f8594341b 100644 --- a/playground/vue3/src/pages/index.vue +++ b/playground/vue3/src/pages/index.vue @@ -32,6 +32,10 @@ const pages: Page[] = [ name: 'OkuToggle', path: '/toggle', }, + { + name: 'OkuTabs', + path: '/tabs', + }, { name: 'OkuPopper', path: '/popper', diff --git a/playground/vue3/src/pages/tabs.vue b/playground/vue3/src/pages/tabs.vue new file mode 100644 index 000000000..01ce69ffd --- /dev/null +++ b/playground/vue3/src/pages/tabs.vue @@ -0,0 +1,7 @@ + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c00ad022..6edc085a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,6 +37,9 @@ importers: '@oku-ui/collection': specifier: workspace:^ version: link:packages/components/collection + '@oku-ui/direction': + specifier: workspace:^ + version: link:packages/components/direction '@oku-ui/dismissable-layer': specifier: workspace:^ version: link:packages/components/dismissable-layer @@ -70,6 +73,9 @@ importers: '@oku-ui/switch': specifier: workspace:^ version: link:packages/components/switch + '@oku-ui/tabs': + specifier: workspace:^ + version: link:packages/components/tabs '@oku-ui/toggle': specifier: workspace:^ version: link:packages/components/toggle @@ -416,9 +422,6 @@ importers: packages/components/presence: dependencies: - '@oku-ui/primitive': - specifier: latest - version: link:../../core/primitive '@oku-ui/use-composable': specifier: latest version: link:../../core/use-composable @@ -540,6 +543,37 @@ importers: specifier: workspace:^ version: link:../../tsconfig + packages/components/tabs: + dependencies: + '@oku-ui/direction': + specifier: latest + version: link:../direction + '@oku-ui/presence': + specifier: latest + version: link:../presence + '@oku-ui/primitive': + specifier: latest + version: link:../../core/primitive + '@oku-ui/provide': + specifier: latest + version: link:../../core/provide + '@oku-ui/roving-focus': + specifier: latest + version: link:../roving-focus + '@oku-ui/use-composable': + specifier: latest + version: link:../../core/use-composable + '@oku-ui/utils': + specifier: latest + version: link:../../core/utils + vue: + specifier: ^3.3.4 + version: 3.3.4 + devDependencies: + tsconfig: + specifier: workspace:^ + version: link:../../tsconfig + packages/components/toggle: dependencies: '@oku-ui/primitive': @@ -682,6 +716,9 @@ importers: '@oku-ui/switch': specifier: workspace:^ version: link:../../packages/components/switch + '@oku-ui/tabs': + specifier: workspace:^ + version: link:../../packages/components/tabs '@oku-ui/visually-hidden': specifier: workspace:^ version: link:../../packages/components/visually-hidden @@ -725,6 +762,9 @@ importers: '@oku-ui/switch': specifier: workspace:^ version: link:../../packages/components/switch + '@oku-ui/tabs': + specifier: workspace:^ + version: link:../../packages/components/tabs vite-plugin-pages: specifier: ^0.31.0 version: 0.31.0(vite@4.3.5) @@ -895,7 +935,7 @@ packages: resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==} engines: {node: '>=6.9.0'} dependencies: - '@babel/highlight': 7.22.5 + '@babel/highlight': 7.18.6 dev: true /@babel/code-frame@7.22.5: @@ -904,11 +944,39 @@ packages: dependencies: '@babel/highlight': 7.22.5 + /@babel/compat-data@7.21.7: + resolution: {integrity: sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==} + engines: {node: '>=6.9.0'} + dev: true + /@babel/compat-data@7.22.9: resolution: {integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==} engines: {node: '>=6.9.0'} dev: true + /@babel/core@7.21.5: + resolution: {integrity: sha512-9M398B/QH5DlfCOTKDZT1ozXr0x8uBEeFd+dJraGUZGiaNpGCDVGCc14hZexsMblw3XxltJ+6kSvogp9J+5a9g==} + engines: {node: '>=6.9.0'} + dependencies: + '@ampproject/remapping': 2.2.1 + '@babel/code-frame': 7.22.5 + '@babel/generator': 7.21.5 + '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.21.5) + '@babel/helper-module-transforms': 7.21.5 + '@babel/helpers': 7.21.5 + '@babel/parser': 7.22.7 + '@babel/template': 7.20.7 + '@babel/traverse': 7.21.5 + '@babel/types': 7.22.5 + convert-source-map: 1.9.0 + debug: 4.3.4 + gensync: 1.0.0-beta.2 + json5: 2.2.3 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + dev: true + /@babel/core@7.22.9: resolution: {integrity: sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==} engines: {node: '>=6.9.0'} @@ -932,6 +1000,16 @@ packages: - supports-color dev: true + /@babel/generator@7.21.5: + resolution: {integrity: sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/trace-mapping': 0.3.18 + jsesc: 2.5.2 + dev: true + /@babel/generator@7.22.9: resolution: {integrity: sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==} engines: {node: '>=6.9.0'} @@ -942,6 +1020,13 @@ packages: jsesc: 2.5.2 dev: true + /@babel/helper-annotate-as-pure@7.18.6: + resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + /@babel/helper-annotate-as-pure@7.22.5: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} @@ -956,6 +1041,34 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/helper-compilation-targets@7.21.5(@babel/core@7.21.5): + resolution: {integrity: sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/compat-data': 7.21.7 + '@babel/core': 7.21.5 + '@babel/helper-validator-option': 7.21.0 + browserslist: 4.21.5 + lru-cache: 5.1.1 + semver: 6.3.1 + dev: true + + /@babel/helper-compilation-targets@7.22.9(@babel/core@7.21.5): + resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/compat-data': 7.22.9 + '@babel/core': 7.21.5 + '@babel/helper-validator-option': 7.22.5 + browserslist: 4.21.10 + lru-cache: 5.1.1 + semver: 6.3.1 + dev: true + /@babel/helper-compilation-targets@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==} engines: {node: '>=6.9.0'} @@ -970,6 +1083,64 @@ packages: semver: 6.3.1 dev: true + /@babel/helper-create-class-features-plugin@7.21.5(@babel/core@7.21.5): + resolution: {integrity: sha512-yNSEck9SuDvPTEUYm4BSXl6ZVC7yO5ZLEMAhG3v3zi7RDxyL/nQDemWWZmw4L0stPWwhpnznRRyJHPRcbXR2jw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.21.5 + '@babel/helper-annotate-as-pure': 7.18.6 + '@babel/helper-environment-visitor': 7.21.5 + '@babel/helper-function-name': 7.21.0 + '@babel/helper-member-expression-to-functions': 7.21.5 + '@babel/helper-optimise-call-expression': 7.18.6 + '@babel/helper-replace-supers': 7.21.5 + '@babel/helper-skip-transparent-expression-wrappers': 7.20.0 + '@babel/helper-split-export-declaration': 7.18.6 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/helper-create-class-features-plugin@7.21.5(@babel/core@7.22.9): + resolution: {integrity: sha512-yNSEck9SuDvPTEUYm4BSXl6ZVC7yO5ZLEMAhG3v3zi7RDxyL/nQDemWWZmw4L0stPWwhpnznRRyJHPRcbXR2jw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.22.9 + '@babel/helper-annotate-as-pure': 7.18.6 + '@babel/helper-environment-visitor': 7.21.5 + '@babel/helper-function-name': 7.21.0 + '@babel/helper-member-expression-to-functions': 7.21.5 + '@babel/helper-optimise-call-expression': 7.18.6 + '@babel/helper-replace-supers': 7.21.5 + '@babel/helper-skip-transparent-expression-wrappers': 7.20.0 + '@babel/helper-split-export-declaration': 7.18.6 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/helper-create-class-features-plugin@7.22.9(@babel/core@7.21.5): + resolution: {integrity: sha512-Pwyi89uO4YrGKxL/eNJ8lfEH55DnRloGPOseaA8NFNL6jAUnn+KccaISiFazCj5IolPPDjGSdzQzXVzODVRqUQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.21.5 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-function-name': 7.22.5 + '@babel/helper-member-expression-to-functions': 7.22.5 + '@babel/helper-optimise-call-expression': 7.22.5 + '@babel/helper-replace-supers': 7.22.9(@babel/core@7.21.5) + '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + semver: 6.3.1 + dev: true + /@babel/helper-create-class-features-plugin@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-Pwyi89uO4YrGKxL/eNJ8lfEH55DnRloGPOseaA8NFNL6jAUnn+KccaISiFazCj5IolPPDjGSdzQzXVzODVRqUQ==} engines: {node: '>=6.9.0'} @@ -982,31 +1153,31 @@ packages: '@babel/helper-function-name': 7.22.5 '@babel/helper-member-expression-to-functions': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.9) + '@babel/helper-replace-supers': 7.22.9(@babel/core@7.21.5) '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 semver: 6.3.1 dev: true - /@babel/helper-create-regexp-features-plugin@7.22.9(@babel/core@7.22.9): + /@babel/helper-create-regexp-features-plugin@7.22.9(@babel/core@7.21.5): resolution: {integrity: sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-annotate-as-pure': 7.22.5 regexpu-core: 5.3.2 semver: 6.3.1 dev: true - /@babel/helper-define-polyfill-provider@0.4.2(@babel/core@7.22.9): + /@babel/helper-define-polyfill-provider@0.4.2(@babel/core@7.21.5): resolution: {integrity: sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 debug: 4.3.4 lodash.debounce: 4.0.8 @@ -1015,11 +1186,24 @@ packages: - supports-color dev: true + /@babel/helper-environment-visitor@7.21.5: + resolution: {integrity: sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==} + engines: {node: '>=6.9.0'} + dev: true + /@babel/helper-environment-visitor@7.22.5: resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==} engines: {node: '>=6.9.0'} dev: true + /@babel/helper-function-name@7.21.0: + resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.20.7 + '@babel/types': 7.22.5 + dev: true + /@babel/helper-function-name@7.22.5: resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==} engines: {node: '>=6.9.0'} @@ -1028,6 +1212,13 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/helper-hoist-variables@7.18.6: + resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} @@ -1035,6 +1226,13 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/helper-member-expression-to-functions@7.21.5: + resolution: {integrity: sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + /@babel/helper-member-expression-to-functions@7.22.5: resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==} engines: {node: '>=6.9.0'} @@ -1042,6 +1240,13 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/helper-module-imports@7.21.4: + resolution: {integrity: sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + /@babel/helper-module-imports@7.22.5: resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==} engines: {node: '>=6.9.0'} @@ -1049,6 +1254,36 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/helper-module-transforms@7.21.5: + resolution: {integrity: sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-environment-visitor': 7.21.5 + '@babel/helper-module-imports': 7.21.4 + '@babel/helper-simple-access': 7.21.5 + '@babel/helper-split-export-declaration': 7.18.6 + '@babel/helper-validator-identifier': 7.22.5 + '@babel/template': 7.20.7 + '@babel/traverse': 7.21.5 + '@babel/types': 7.22.5 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/helper-module-transforms@7.22.9(@babel/core@7.21.5): + resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.21.5 + '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-module-imports': 7.22.5 + '@babel/helper-simple-access': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + '@babel/helper-validator-identifier': 7.22.5 + dev: true + /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==} engines: {node: '>=6.9.0'} @@ -1063,6 +1298,13 @@ packages: '@babel/helper-validator-identifier': 7.22.5 dev: true + /@babel/helper-optimise-call-expression@7.18.6: + resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + /@babel/helper-optimise-call-expression@7.22.5: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} @@ -1070,35 +1312,61 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/helper-plugin-utils@7.21.5: + resolution: {integrity: sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==} + engines: {node: '>=6.9.0'} + dev: true + /@babel/helper-plugin-utils@7.22.5: resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} engines: {node: '>=6.9.0'} dev: true - /@babel/helper-remap-async-to-generator@7.22.9(@babel/core@7.22.9): + /@babel/helper-remap-async-to-generator@7.22.9(@babel/core@7.21.5): resolution: {integrity: sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-wrap-function': 7.22.9 dev: true - /@babel/helper-replace-supers@7.22.9(@babel/core@7.22.9): + /@babel/helper-replace-supers@7.21.5: + resolution: {integrity: sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-member-expression-to-functions': 7.21.5 + '@babel/helper-optimise-call-expression': 7.18.6 + '@babel/template': 7.22.5 + '@babel/traverse': 7.22.8 + '@babel/types': 7.22.5 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/helper-replace-supers@7.22.9(@babel/core@7.21.5): resolution: {integrity: sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-member-expression-to-functions': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 dev: true + /@babel/helper-simple-access@7.21.5: + resolution: {integrity: sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + /@babel/helper-simple-access@7.22.5: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} @@ -1106,6 +1374,13 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/helper-skip-transparent-expression-wrappers@7.20.0: + resolution: {integrity: sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + /@babel/helper-skip-transparent-expression-wrappers@7.22.5: resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} engines: {node: '>=6.9.0'} @@ -1113,6 +1388,13 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/helper-split-export-declaration@7.18.6: + resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} @@ -1128,6 +1410,11 @@ packages: resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} engines: {node: '>=6.9.0'} + /@babel/helper-validator-option@7.21.0: + resolution: {integrity: sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==} + engines: {node: '>=6.9.0'} + dev: true + /@babel/helper-validator-option@7.22.5: resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==} engines: {node: '>=6.9.0'} @@ -1142,6 +1429,17 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/helpers@7.21.5: + resolution: {integrity: sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.20.7 + '@babel/traverse': 7.21.5 + '@babel/types': 7.22.5 + transitivePeerDependencies: + - supports-color + dev: true + /@babel/helpers@7.22.6: resolution: {integrity: sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==} engines: {node: '>=6.9.0'} @@ -1153,6 +1451,15 @@ packages: - supports-color dev: true + /@babel/highlight@7.18.6: + resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-validator-identifier': 7.22.5 + chalk: 2.4.2 + js-tokens: 4.0.0 + dev: true + /@babel/highlight@7.22.5: resolution: {integrity: sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==} engines: {node: '>=6.9.0'} @@ -1168,26 +1475,26 @@ packages: dependencies: '@babel/types': 7.22.5 - /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.9): + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.22.5(@babel/core@7.22.9): + /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.13.0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.22.9) + '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.21.5) dev: true /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.22.9): @@ -1224,69 +1531,69 @@ packages: '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.9) dev: true - /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.22.9): + /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.21.5): resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 dev: true - /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.22.9): + /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.21.5): resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==} engines: {node: '>=4'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.22.9): + /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.21.5): resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.22.9): + /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.21.5): resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.22.9): + /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.21.5): resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.22.9): + /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.21.5): resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.22.9): + /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.21.5): resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true @@ -1300,44 +1607,54 @@ packages: '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-import-assertions@7.22.5(@babel/core@7.22.9): + /@babel/plugin-syntax-import-assertions@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-import-attributes@7.22.5(@babel/core@7.22.9): + /@babel/plugin-syntax-import-attributes@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.22.9): + /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.21.5): resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.22.9): + /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.21.5): resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true + /@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.21.5): + resolution: {integrity: sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.5 + '@babel/helper-plugin-utils': 7.21.5 + dev: true + /@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.22.9): resolution: {integrity: sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==} engines: {node: '>=6.9.0'} @@ -1345,15 +1662,24 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.21.5 dev: true - /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.22.9): + /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.21.5): resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 + '@babel/helper-plugin-utils': 7.22.5 + dev: true + + /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.21.5): + resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true @@ -1366,30 +1692,39 @@ packages: '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.22.9): + /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.21.5): resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.22.9): + /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.21.5): resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.22.9): + /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.21.5): resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 + '@babel/helper-plugin-utils': 7.22.5 + dev: true + + /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.21.5): + resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true @@ -1402,26 +1737,36 @@ packages: '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.22.9): + /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.21.5): resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.22.9): + /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.21.5): resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true + /@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.21.5): + resolution: {integrity: sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.5 + '@babel/helper-plugin-utils': 7.21.5 + dev: true + /@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.22.9): resolution: {integrity: sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==} engines: {node: '>=6.9.0'} @@ -1429,189 +1774,189 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.21.5 dev: true - /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.22.9): + /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.21.5): resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-arrow-functions@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-arrow-functions@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-async-generator-functions@7.22.7(@babel/core@7.22.9): + /@babel/plugin-transform-async-generator-functions@7.22.7(@babel/core@7.21.5): resolution: {integrity: sha512-7HmE7pk/Fmke45TODvxvkxRMV9RazV+ZZzhOL9AG8G29TLrr3jkjwF7uJfxZ30EoXpO+LJkq4oA8NjO2DTnEDg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.22.9) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.9) + '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.21.5) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-async-to-generator@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-async-to-generator@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-module-imports': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.22.9) + '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-block-scoped-functions@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-block-scoped-functions@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-block-scoping@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-block-scoping@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-class-properties@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-class-properties@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-class-static-block@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-class-static-block@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.12.0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.22.9) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-classes@7.22.6(@babel/core@7.22.9): + /@babel/plugin-transform-classes@7.22.6(@babel/core@7.21.5): resolution: {integrity: sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-function-name': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.9) + '@babel/helper-replace-supers': 7.22.9(@babel/core@7.21.5) '@babel/helper-split-export-declaration': 7.22.6 globals: 11.12.0 dev: true - /@babel/plugin-transform-computed-properties@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-computed-properties@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 '@babel/template': 7.22.5 dev: true - /@babel/plugin-transform-destructuring@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-destructuring@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-dotall-regex@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-dotall-regex@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-duplicate-keys@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-duplicate-keys@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-dynamic-import@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-dynamic-import@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-exponentiation-operator@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-exponentiation-operator@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-export-namespace-from@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-export-namespace-from@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.21.5) dev: true /@babel/plugin-transform-flow-strip-types@7.21.0(@babel/core@7.22.9): @@ -1625,79 +1970,91 @@ packages: '@babel/plugin-syntax-flow': 7.21.4(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-for-of@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-for-of@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-function-name@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-function-name@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) '@babel/helper-function-name': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-json-strings@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-json-strings@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-literals@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-literals@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-logical-assignment-operators@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-logical-assignment-operators@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.9) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-member-expression-literals@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-member-expression-literals@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-modules-amd@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-modules-amd@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) + '@babel/helper-plugin-utils': 7.22.5 + dev: true + + /@babel/plugin-transform-modules-commonjs@7.22.5(@babel/core@7.21.5): + resolution: {integrity: sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.5 + '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-simple-access': 7.22.5 dev: true /@babel/plugin-transform-modules-commonjs@7.22.5(@babel/core@7.22.9): @@ -1707,242 +2064,257 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.9 - '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9) + '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-simple-access': 7.22.5 dev: true - /@babel/plugin-transform-modules-systemjs@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-modules-systemjs@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9) + '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-validator-identifier': 7.22.5 dev: true - /@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-new-target@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-new-target@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-nullish-coalescing-operator@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-nullish-coalescing-operator@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-numeric-separator@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-numeric-separator@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.9) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-object-rest-spread@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-object-rest-spread@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/compat-data': 7.22.9 - '@babel/core': 7.22.9 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.9) - '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-object-super@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-object-super@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.9) + '@babel/helper-replace-supers': 7.22.9(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-optional-catch-binding@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-optional-catch-binding@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-optional-chaining@7.22.6(@babel/core@7.22.9): + /@babel/plugin-transform-optional-chaining@7.22.6(@babel/core@7.21.5): resolution: {integrity: sha512-Vd5HiWml0mDVtcLHIoEU5sw6HOUW/Zk0acLs/SAeuLzkGNOPc9DB4nkUajemhCmTIz3eiaKREZn2hQQqF79YTg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-parameters@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-parameters@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-private-methods@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-private-methods@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-private-property-in-object@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-private-property-in-object@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.22.9) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.21.5) dev: true - /@babel/plugin-transform-property-literals@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-property-literals@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-regenerator@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-regenerator@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 regenerator-transform: 0.15.1 dev: true - /@babel/plugin-transform-reserved-words@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-reserved-words@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-shorthand-properties@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-shorthand-properties@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-spread@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-spread@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 dev: true - /@babel/plugin-transform-sticky-regex@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-sticky-regex@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-template-literals@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-template-literals@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-typeof-symbol@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-typeof-symbol@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true + /@babel/plugin-transform-typescript@7.21.3(@babel/core@7.21.5): + resolution: {integrity: sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.5 + '@babel/helper-annotate-as-pure': 7.18.6 + '@babel/helper-create-class-features-plugin': 7.21.5(@babel/core@7.21.5) + '@babel/helper-plugin-utils': 7.21.5 + '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.21.5) + transitivePeerDependencies: + - supports-color + dev: true + /@babel/plugin-transform-typescript@7.21.3(@babel/core@7.22.9): resolution: {integrity: sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==} engines: {node: '>=6.9.0'} @@ -1950,55 +2322,148 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.9 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-annotate-as-pure': 7.18.6 + '@babel/helper-create-class-features-plugin': 7.21.5(@babel/core@7.22.9) + '@babel/helper-plugin-utils': 7.21.5 '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.22.9) + transitivePeerDependencies: + - supports-color dev: true - /@babel/plugin-transform-unicode-escapes@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-unicode-escapes@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-biEmVg1IYB/raUO5wT1tgfacCef15Fbzhkx493D3urBI++6hpJ+RFG4SrWMn0NEZLfvilqKf3QDrRVZHo08FYg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-unicode-property-regex@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-unicode-property-regex@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-unicode-regex@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-unicode-regex@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-unicode-sets-regex@7.22.5(@babel/core@7.22.9): + /@babel/plugin-transform-unicode-sets-regex@7.22.5(@babel/core@7.21.5): resolution: {integrity: sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 dev: true + /@babel/preset-env@7.22.9(@babel/core@7.21.5): + resolution: {integrity: sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/compat-data': 7.22.9 + '@babel/core': 7.21.5 + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) + '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-validator-option': 7.22.5 + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.21.5) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.21.5) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.21.5) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.21.5) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-syntax-import-attributes': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.21.5) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.21.5) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.21.5) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.21.5) + '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.21.5) + '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.21.5) + '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-async-generator-functions': 7.22.7(@babel/core@7.21.5) + '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-block-scoped-functions': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-block-scoping': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-class-properties': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-class-static-block': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-classes': 7.22.6(@babel/core@7.21.5) + '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-destructuring': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-duplicate-keys': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-dynamic-import': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-exponentiation-operator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-export-namespace-from': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-for-of': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-function-name': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-json-strings': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-literals': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-logical-assignment-operators': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-member-expression-literals': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-modules-amd': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-modules-systemjs': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-modules-umd': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-new-target': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-nullish-coalescing-operator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-numeric-separator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-object-rest-spread': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-object-super': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-optional-catch-binding': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.21.5) + '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-private-methods': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-private-property-in-object': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-property-literals': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-regenerator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-reserved-words': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-shorthand-properties': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-sticky-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-template-literals': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-typeof-symbol': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-unicode-escapes': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-unicode-property-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.21.5) + '@babel/preset-modules': 0.1.5(@babel/core@7.21.5) + '@babel/types': 7.22.5 + babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.21.5) + babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.21.5) + babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.21.5) + core-js-compat: 3.32.0 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + dev: true + /@babel/preset-env@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==} engines: {node: '>=6.9.0'} @@ -2007,83 +2472,83 @@ packages: dependencies: '@babel/compat-data': 7.22.9 '@babel/core': 7.22.9 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-validator-option': 7.22.5 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.22.9) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.9) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.22.9) - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.22.9) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.9) - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.22.9) - '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-syntax-import-attributes': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.22.9) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.9) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.9) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.9) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.9) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.9) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.9) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.9) - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.22.9) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.22.9) - '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.22.9) - '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-async-generator-functions': 7.22.7(@babel/core@7.22.9) - '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-block-scoped-functions': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-block-scoping': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-class-properties': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-class-static-block': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-classes': 7.22.6(@babel/core@7.22.9) - '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-destructuring': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-duplicate-keys': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-dynamic-import': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-exponentiation-operator': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-export-namespace-from': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-for-of': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-function-name': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-json-strings': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-literals': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-logical-assignment-operators': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-member-expression-literals': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-modules-amd': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-modules-systemjs': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-modules-umd': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-new-target': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-nullish-coalescing-operator': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-numeric-separator': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-object-rest-spread': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-object-super': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-optional-catch-binding': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.22.9) - '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-private-methods': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-private-property-in-object': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-property-literals': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-regenerator': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-reserved-words': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-shorthand-properties': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-sticky-regex': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-template-literals': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-typeof-symbol': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-unicode-escapes': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-unicode-property-regex': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.9) - '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.22.9) - '@babel/preset-modules': 0.1.5(@babel/core@7.22.9) + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.21.5) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.21.5) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.21.5) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.21.5) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-syntax-import-attributes': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.21.5) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.21.5) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.21.5) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.21.5) + '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.21.5) + '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.21.5) + '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-async-generator-functions': 7.22.7(@babel/core@7.21.5) + '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-block-scoped-functions': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-block-scoping': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-class-properties': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-class-static-block': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-classes': 7.22.6(@babel/core@7.21.5) + '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-destructuring': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-duplicate-keys': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-dynamic-import': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-exponentiation-operator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-export-namespace-from': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-for-of': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-function-name': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-json-strings': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-literals': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-logical-assignment-operators': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-member-expression-literals': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-modules-amd': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-modules-systemjs': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-modules-umd': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-new-target': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-nullish-coalescing-operator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-numeric-separator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-object-rest-spread': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-object-super': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-optional-catch-binding': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.21.5) + '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-private-methods': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-private-property-in-object': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-property-literals': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-regenerator': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-reserved-words': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-shorthand-properties': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-sticky-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-template-literals': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-typeof-symbol': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-unicode-escapes': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-unicode-property-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.21.5) + '@babel/preset-modules': 0.1.5(@babel/core@7.21.5) '@babel/types': 7.22.5 - babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.22.9) - babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.22.9) - babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.22.9) + babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.21.5) + babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.21.5) + babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.21.5) core-js-compat: 3.32.0 semver: 6.3.1 transitivePeerDependencies: @@ -2102,15 +2567,15 @@ packages: '@babel/plugin-transform-flow-strip-types': 7.21.0(@babel/core@7.22.9) dev: true - /@babel/preset-modules@0.1.5(@babel/core@7.22.9): + /@babel/preset-modules@0.1.5(@babel/core@7.21.5): resolution: {integrity: sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.22.9) - '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.21.5) + '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.21.5) '@babel/types': 7.22.5 esutils: 2.0.3 dev: true @@ -2127,6 +2592,8 @@ packages: '@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.22.9) '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.22.9) '@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.22.9) + transitivePeerDependencies: + - supports-color dev: true /@babel/register@7.21.0(@babel/core@7.22.9): @@ -2159,6 +2626,15 @@ packages: engines: {node: '>=6.9.0'} dev: true + /@babel/template@7.20.7: + resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.22.5 + '@babel/parser': 7.22.7 + '@babel/types': 7.22.5 + dev: true + /@babel/template@7.22.5: resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==} engines: {node: '>=6.9.0'} @@ -2168,6 +2644,24 @@ packages: '@babel/types': 7.22.5 dev: true + /@babel/traverse@7.21.5: + resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.22.5 + '@babel/generator': 7.21.5 + '@babel/helper-environment-visitor': 7.21.5 + '@babel/helper-function-name': 7.21.0 + '@babel/helper-hoist-variables': 7.18.6 + '@babel/helper-split-export-declaration': 7.18.6 + '@babel/parser': 7.22.7 + '@babel/types': 7.22.5 + debug: 4.3.4 + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + dev: true + /@babel/traverse@7.22.8: resolution: {integrity: sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==} engines: {node: '>=6.9.0'} @@ -4738,7 +5232,7 @@ packages: hasBin: true dependencies: '@babel/core': 7.22.9 - '@babel/preset-env': 7.22.9(@babel/core@7.22.9) + '@babel/preset-env': 7.22.9(@babel/core@7.21.5) '@babel/types': 7.22.5 '@ndelangen/get-tarball': 3.0.7 '@storybook/codemod': 7.2.1 @@ -5921,9 +6415,9 @@ packages: vite: ^4.0.0 vue: ^3.0.0 dependencies: - '@babel/core': 7.22.9 - '@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.22.9) - '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.21.5) + '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.21.5) vite: 4.3.5(@types/node@18.17.1) vue: 3.3.4 transitivePeerDependencies: @@ -6042,13 +6536,13 @@ packages: resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==} dev: true - /@vue/babel-plugin-jsx@1.1.1(@babel/core@7.22.9): + /@vue/babel-plugin-jsx@1.1.1(@babel/core@7.21.5): resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==} dependencies: - '@babel/helper-module-imports': 7.22.5 - '@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.22.9) - '@babel/template': 7.22.5 - '@babel/traverse': 7.22.8 + '@babel/helper-module-imports': 7.21.4 + '@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.21.5) + '@babel/template': 7.20.7 + '@babel/traverse': 7.21.5 '@babel/types': 7.22.5 '@vue/babel-helper-vue-transform-on': 1.0.2 camelcase: 6.3.0 @@ -6743,38 +7237,38 @@ packages: - supports-color dev: true - /babel-plugin-polyfill-corejs2@0.4.5(@babel/core@7.22.9): + /babel-plugin-polyfill-corejs2@0.4.5(@babel/core@7.21.5): resolution: {integrity: sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: '@babel/compat-data': 7.22.9 - '@babel/core': 7.22.9 - '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.21.5) semver: 6.3.1 transitivePeerDependencies: - supports-color dev: true - /babel-plugin-polyfill-corejs3@0.8.3(@babel/core@7.22.9): + /babel-plugin-polyfill-corejs3@0.8.3(@babel/core@7.21.5): resolution: {integrity: sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.21.5) core-js-compat: 3.32.0 transitivePeerDependencies: - supports-color dev: true - /babel-plugin-polyfill-regenerator@0.5.2(@babel/core@7.22.9): + /babel-plugin-polyfill-regenerator@0.5.2(@babel/core@7.21.5): resolution: {integrity: sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.22.9 - '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.22.9) + '@babel/core': 7.21.5 + '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.21.5) transitivePeerDependencies: - supports-color dev: true @@ -6902,9 +7396,9 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001517 - electron-to-chromium: 1.4.477 - node-releases: 2.0.13 + caniuse-lite: 1.0.30001481 + electron-to-chromium: 1.4.377 + node-releases: 2.0.10 update-browserslist-db: 1.0.11(browserslist@4.21.5) dev: true @@ -7032,8 +7526,8 @@ packages: /caniuse-api@3.0.0: resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==} dependencies: - browserslist: 4.21.10 - caniuse-lite: 1.0.30001517 + browserslist: 4.21.5 + caniuse-lite: 1.0.30001481 lodash.memoize: 4.1.2 lodash.uniq: 4.5.0 dev: true @@ -8044,6 +8538,10 @@ packages: jake: 10.8.5 dev: true + /electron-to-chromium@1.4.377: + resolution: {integrity: sha512-H3BYG6DW5Z+l0xcfXaicJGxrpA4kMlCxnN71+iNX+dBLkRMOdVJqFJiAmbNZZKA1zISpRg17JR03qGifXNsJtw==} + dev: true + /electron-to-chromium@1.4.477: resolution: {integrity: sha512-shUVy6Eawp33dFBFIoYbIwLHrX0IZ857AlH9ug2o4rvbWmpaCUdBpQ5Zw39HRrfzAFm4APJE9V+E2A/WB0YqJw==} dev: true @@ -11127,6 +11625,10 @@ packages: resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==} dev: true + /node-releases@2.0.10: + resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==} + dev: true + /node-releases@2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} dev: true @@ -11809,7 +12311,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.10 + browserslist: 4.21.5 caniuse-api: 3.0.0 colord: 2.9.3 postcss: 8.4.27 @@ -11822,7 +12324,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.10 + browserslist: 4.21.5 postcss: 8.4.27 postcss-value-parser: 4.2.0 dev: true @@ -11966,7 +12468,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.10 + browserslist: 4.21.5 caniuse-api: 3.0.0 cssnano-utils: 4.0.0(postcss@8.4.27) postcss: 8.4.27 @@ -12001,7 +12503,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.10 + browserslist: 4.21.5 cssnano-utils: 4.0.0(postcss@8.4.27) postcss: 8.4.27 postcss-value-parser: 4.2.0 @@ -12144,7 +12646,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.10 + browserslist: 4.21.5 postcss: 8.4.27 postcss-value-parser: 4.2.0 dev: true @@ -12186,7 +12688,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.10 + browserslist: 4.21.5 caniuse-api: 3.0.0 postcss: 8.4.27 dev: true @@ -13488,7 +13990,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.10 + browserslist: 4.21.5 postcss: 8.4.27 postcss-selector-parser: 6.0.11 dev: true @@ -14358,7 +14860,7 @@ packages: resolution: {integrity: sha512-z219Z65rOGD6jXIvIhpZFfwWdqQckB8sdZec2NO+TkcH1Bph7gL0hwLzRJs1KsOo4Jz4mF9guBXhsEnyEBGVfw==} hasBin: true dependencies: - '@babel/core': 7.22.9 + '@babel/core': 7.21.5 '@babel/standalone': 7.21.7 '@babel/types': 7.22.5 defu: 6.1.2 diff --git a/scripts/dev.ts b/scripts/dev.ts index 73bc935e2..b842d0eee 100644 --- a/scripts/dev.ts +++ b/scripts/dev.ts @@ -37,7 +37,12 @@ async function deleteAllPackageDists() { console.log('finished deleting dist folders ✅') console.log('building components 🏗') - execSync('pnpm build', { stdio: 'inherit' }) + try { + execSync('pnpm build', { stdio: 'inherit' }) + } + catch (error) { + console.log('build problem 🚨') + } console.log('finished building components ✅') watchMode() @@ -71,7 +76,12 @@ function watchMode() { ], ignoreInitial: true, }).on('all', async (event, path) => { - await whereComponent(path) + try { + await whereComponent(path) + } + catch (error) { + console.log('build problem 🚨') + } }).once('ready', () => { console.log('watch mode active 🚀') }).prependListener('unlinkDir', async (path) => { From 06e59a71483ef6092d4b054fe294319baa5d9309 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Mon, 14 Aug 2023 05:29:05 +0300 Subject: [PATCH 09/23] Revert "refactor: dismisslable layer (#281)" This reverts commit aa9567ef81ae3f669bb04dfbf4f42591cadcdd59. --- .eslintrc | 12 +- .storybook/DocsContainer.tsx | 1 + package.json | 4 +- packages/components/arrow/src/arrow.ts | 7 +- .../arrow/src/stories/ArrowDemo.vue | 1 + .../aspect-ratio/src/aspect-ratio.ts | 4 +- .../src/stories/AspectRatioDemo.vue | 1 + packages/components/avatar/src/avatar.ts | 6 +- .../components/avatar/src/avatarFallback.ts | 8 +- packages/components/avatar/src/avatarImage.ts | 2 +- packages/components/checkbox/src/checkbox.ts | 13 +- .../checkbox/src/checkboxIndicator.ts | 16 +- packages/components/checkbox/src/index.ts | 5 +- .../components/collapsible/src/collapsible.ts | 27 +- .../collapsible/src/collapsibleContent.ts | 21 +- .../collapsible/src/collapsibleContentImpl.ts | 24 +- .../collapsible/src/collapsibleTrigger.ts | 30 +- packages/components/collapsible/src/index.ts | 5 +- .../components/collection/src/collection.ts | 16 +- .../collection/src/stories/CollectionDemo.vue | 2 +- .../components/direction/src/Direction.ts | 5 +- .../dismissable-layer/src/DismissableLayer.ts | 202 +-- .../src/DismissableLayerBranch.ts | 34 +- .../src/stories/DismissableLayer.vue | 12 +- .../components/dismissable-layer/src/util.ts | 31 +- packages/components/label/src/label.ts | 6 +- packages/components/popper/src/index.ts | 1 - packages/components/popper/src/popper.ts | 15 +- .../components/popper/src/popperAnchor.ts | 19 +- packages/components/popper/src/popperArrow.ts | 20 +- .../components/popper/src/popperContent.ts | 21 +- packages/components/presence/package.json | 1 + .../components/presence/src/presence.test.ts | 47 +- packages/components/presence/src/presence.ts | 62 +- .../presence/src/stories/PresenceDemo.vue | 6 +- .../components/presence/src/usePresence.ts | 48 +- packages/components/presence/tsup.config.ts | 5 +- packages/components/progress/src/progress.ts | 9 +- .../progress/src/progressIndicator.ts | 17 +- .../roving-focus/src/RovingFocusGroup.ts | 28 +- .../roving-focus/src/RovingFocusGroupImpl.ts | 17 +- .../roving-focus/src/RovingFocusGroupItem.ts | 56 +- packages/components/roving-focus/src/index.ts | 2 +- packages/components/roving-focus/src/types.ts | 8 - .../components/roving-focus/tsup.config.ts | 5 +- .../components/separator/src/separator.ts | 4 +- packages/components/slot/tsup.config.ts | 5 +- packages/components/switch/src/Switch.ts | 18 +- packages/components/switch/src/SwitchThumb.ts | 21 +- packages/components/switch/src/index.ts | 2 +- .../switch/src/stories/SwitchDemo.vue | 5 +- packages/components/tabs/README.md | 10 - packages/components/tabs/build.config.ts | 12 - packages/components/tabs/package.json | 47 - packages/components/tabs/src/index.ts | 9 - .../components/tabs/src/stories/TabsDemo.vue | 301 ----- .../tabs/src/stories/tabs.stories.ts | 70 -- packages/components/tabs/src/tab-content.ts | 91 -- packages/components/tabs/src/tab-list.ts | 79 -- packages/components/tabs/src/tab-trigger.ts | 112 -- packages/components/tabs/src/tabs.ts | 199 --- packages/components/tabs/src/utils.ts | 7 - packages/components/tabs/tsconfig.json | 10 - packages/components/tabs/tsup.config.ts | 22 - packages/components/toggle/src/toggle.ts | 4 +- .../visually-hidden/src/VisuallyHidden.ts | 9 +- packages/core/primitive/tsup.config.ts | 8 +- packages/core/provide/src/createProvide.ts | 52 +- packages/core/provide/src/index.ts | 2 +- packages/core/provide/tsup.config.ts | 6 +- packages/core/use-composable/src/index.ts | 1 + packages/core/use-composable/tsup.config.ts | 8 +- packages/core/utils/src/index.ts | 2 +- .../core/utils/src/isValidVNodeElement.ts | 11 - packages/core/utils/tsup.config.ts | 8 +- packages/tsconfig/node18.json | 21 - playground/nuxt3/package.json | 1 - playground/nuxt3/pages/index.vue | 4 - playground/nuxt3/pages/tabs.vue | 5 - playground/vue3/package.json | 1 - playground/vue3/src/pages/index.vue | 4 - playground/vue3/src/pages/tabs.vue | 7 - pnpm-lock.yaml | 1098 +++++------------ scripts/dev.ts | 14 +- 84 files changed, 834 insertions(+), 2338 deletions(-) delete mode 100644 packages/components/roving-focus/src/types.ts delete mode 100644 packages/components/tabs/README.md delete mode 100644 packages/components/tabs/build.config.ts delete mode 100644 packages/components/tabs/package.json delete mode 100644 packages/components/tabs/src/index.ts delete mode 100644 packages/components/tabs/src/stories/TabsDemo.vue delete mode 100644 packages/components/tabs/src/stories/tabs.stories.ts delete mode 100644 packages/components/tabs/src/tab-content.ts delete mode 100644 packages/components/tabs/src/tab-list.ts delete mode 100644 packages/components/tabs/src/tab-trigger.ts delete mode 100644 packages/components/tabs/src/tabs.ts delete mode 100644 packages/components/tabs/src/utils.ts delete mode 100644 packages/components/tabs/tsconfig.json delete mode 100644 packages/components/tabs/tsup.config.ts delete mode 100644 packages/core/utils/src/isValidVNodeElement.ts delete mode 100644 packages/tsconfig/node18.json delete mode 100644 playground/nuxt3/pages/tabs.vue delete mode 100644 playground/vue3/src/pages/tabs.vue diff --git a/.eslintrc b/.eslintrc index e6c838afb..037b2702f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -4,15 +4,5 @@ "extends": ["custom", "plugin:storybook/recommended"], "rules": { "vue/one-component-per-file": "off" - }, - "overrides": [ - { - "files": [ - "**/stories/*.vue" - ], - "rules": { - "no-console": "off" - } - } - ] + } } diff --git a/.storybook/DocsContainer.tsx b/.storybook/DocsContainer.tsx index cf90b7f07..bc2e96bc1 100644 --- a/.storybook/DocsContainer.tsx +++ b/.storybook/DocsContainer.tsx @@ -6,6 +6,7 @@ import { useDarkMode } from 'storybook-dark-mode'; export const DocsContainer = ( props: PropsWithChildren ) => { + console.log(props.children) const dark = useDarkMode(); return ( =18" @@ -43,7 +43,6 @@ "@oku-ui/checkbox": "workspace:^", "@oku-ui/collapsible": "workspace:^", "@oku-ui/collection": "workspace:^", - "@oku-ui/direction": "workspace:^", "@oku-ui/dismissable-layer": "workspace:^", "@oku-ui/label": "workspace:^", "@oku-ui/popper": "workspace:^", @@ -55,7 +54,6 @@ "@oku-ui/separator": "workspace:^", "@oku-ui/slot": "workspace:^", "@oku-ui/switch": "workspace:^", - "@oku-ui/tabs": "workspace:^", "@oku-ui/toggle": "workspace:^", "@oku-ui/use-composable": "workspace:^", "@oku-ui/utils": "workspace:^", diff --git a/packages/components/arrow/src/arrow.ts b/packages/components/arrow/src/arrow.ts index 5c5858701..6e972804d 100644 --- a/packages/components/arrow/src/arrow.ts +++ b/packages/components/arrow/src/arrow.ts @@ -1,6 +1,6 @@ import { cloneVNode, defineComponent, h } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import { Primitive } from '@oku-ui/primitive' import { useForwardRef } from '@oku-ui/use-composable' type ArrowElement = ElementType<'svg'> @@ -14,7 +14,10 @@ const arrow = defineComponent({ name: NAME, inheritAttrs: false, props: { - ...PrimitiveProps, + asChild: { + type: Boolean, + default: false, + }, }, setup(props, { attrs, slots }) { const forwardedRef = useForwardRef() diff --git a/packages/components/arrow/src/stories/ArrowDemo.vue b/packages/components/arrow/src/stories/ArrowDemo.vue index 8e221ec19..ce4cb7bc1 100644 --- a/packages/components/arrow/src/stories/ArrowDemo.vue +++ b/packages/components/arrow/src/stories/ArrowDemo.vue @@ -14,6 +14,7 @@ withDefaults(defineProps(), { const arrowRef = ref() onMounted(() => { + // eslint-disable-next-line no-console console.log(arrowRef.value?.$el) }) const alert = () => window.alert('clicked') diff --git a/packages/components/aspect-ratio/src/aspect-ratio.ts b/packages/components/aspect-ratio/src/aspect-ratio.ts index e5208adc2..8d9f6a612 100644 --- a/packages/components/aspect-ratio/src/aspect-ratio.ts +++ b/packages/components/aspect-ratio/src/aspect-ratio.ts @@ -1,6 +1,6 @@ import { defineComponent, h } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import { Primitive } from '@oku-ui/primitive' import { useForwardRef } from '@oku-ui/use-composable' interface AspectRatioProps extends IPrimitiveProps { @@ -20,7 +20,6 @@ const AspectRatio = defineComponent({ type: Number, default: 1 / 1, }, - ...PrimitiveProps, }, setup(props, { attrs, slots }) { const { style, ...aspectRatioProps } = attrs as AspectRatioElement @@ -50,7 +49,6 @@ const AspectRatio = defineComponent({ bottom: 0, left: 0, }, - asChild: props.asChild, }, { default: () => slots.default?.(), diff --git a/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue b/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue index b638cb968..c7294217c 100644 --- a/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue +++ b/packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue @@ -17,6 +17,7 @@ withDefaults(defineProps(), { const root = ref() onMounted(() => { + // eslint-disable-next-line no-console console.log(root.value?.$el) }) diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts index 841a9348e..20f66a45a 100644 --- a/packages/components/avatar/src/avatar.ts +++ b/packages/components/avatar/src/avatar.ts @@ -1,8 +1,9 @@ +import type { PropType } from 'vue' import { defineComponent, h, ref } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' import { Primitive } from '@oku-ui/primitive' import type { Scope } from '@oku-ui/provide' -import { ScopePropObject, createProvideScope } from '@oku-ui/provide' +import { createProvideScope } from '@oku-ui/provide' import { useForwardRef } from '@oku-ui/use-composable' const AVATAR_NAME = 'Avatar' @@ -29,7 +30,8 @@ const Avatar = defineComponent({ inheritAttrs: false, props: { scopeAvatar: { - ...ScopePropObject, + type: Object as unknown as PropType, + required: false, }, }, setup(props, { attrs, slots }) { diff --git a/packages/components/avatar/src/avatarFallback.ts b/packages/components/avatar/src/avatarFallback.ts index 0e8f76f43..657e7e319 100644 --- a/packages/components/avatar/src/avatarFallback.ts +++ b/packages/components/avatar/src/avatarFallback.ts @@ -1,7 +1,8 @@ +import type { PropType } from 'vue' import { defineComponent, h, onMounted, ref, watchEffect } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' import { Primitive } from '@oku-ui/primitive' -import { ScopePropObject } from '@oku-ui/provide' +import type { Scope } from '@oku-ui/provide' import { useForwardRef } from '@oku-ui/use-composable' import { useAvatarInject } from './avatar' @@ -23,7 +24,8 @@ const AvatarFallback = defineComponent({ required: false, }, scopeAvatar: { - ...ScopePropObject, + type: Object as unknown as PropType, + required: false, }, }, setup(props, { attrs, slots }) { @@ -52,7 +54,7 @@ const AvatarFallback = defineComponent({ }) const originalReturn = () => { - return (canRender.value && (provide.imageLoadingStatus !== 'loaded')) + return (canRender.value && (provide.value.imageLoadingStatus !== 'loaded')) ? h( Primitive.span, { ...fallbackProps, diff --git a/packages/components/avatar/src/avatarImage.ts b/packages/components/avatar/src/avatarImage.ts index 1a1532877..c6203c0a2 100644 --- a/packages/components/avatar/src/avatarImage.ts +++ b/packages/components/avatar/src/avatarImage.ts @@ -47,7 +47,7 @@ const AvatarImage = defineComponent({ const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => { props.onLoadingStatusChange(status) - inject.onImageLoadingStatusChange(status) + inject.value.onImageLoadingStatusChange(status) }) onMounted(() => { diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts index 9a5a03c59..961357604 100644 --- a/packages/components/checkbox/src/checkbox.ts +++ b/packages/components/checkbox/src/checkbox.ts @@ -1,4 +1,4 @@ -import { ScopePropObject, createProvideScope } from '@oku-ui/provide' +import { createProvideScope } from '@oku-ui/provide' import type { PropType, Ref } from 'vue' import { computed, defineComponent, h, ref, toRefs, watchEffect } from 'vue' @@ -14,7 +14,7 @@ import { OkuBubbleInput } from './bubbleInput' const CHECKBOX_NAME = 'OkuCheckbox' -const [createCheckboxProvider, createCheckboxScope] = createProvideScope(CHECKBOX_NAME) +const [createCheckboxProvider, _createCheckboxScope] = createProvideScope(CHECKBOX_NAME) type CheckboxInjectValue = { state: Ref @@ -62,12 +62,14 @@ const Checkbox = defineComponent({ default: undefined, }, scopeCheckbox: { - ...ScopePropObject, + type: Object as unknown as PropType, + required: false, + default: undefined, }, }, emits: ['update:checked', 'update:modelValue'], setup(props, { attrs, slots, emit }) { - const { checked: checkedProp, defaultChecked, required } = toRefs(props) + const { checked: checkedProp, scopeCheckbox, defaultChecked, required } = toRefs(props) const buttonRef = ref | null>(null) const forwardedRef = useForwardRef() @@ -107,7 +109,7 @@ const Checkbox = defineComponent({ }) CheckboxProvider({ - scope: props.scopeCheckbox, + scope: scopeCheckbox.value as Scope, state, disabled: disabled as boolean, }) @@ -187,7 +189,6 @@ const OkuCheckbox = Checkbox as typeof Checkbox & (new () => { $props: _OkuCheck export { OkuCheckbox, - createCheckboxScope, } export type { diff --git a/packages/components/checkbox/src/checkboxIndicator.ts b/packages/components/checkbox/src/checkboxIndicator.ts index 5686113c1..d25697236 100644 --- a/packages/components/checkbox/src/checkboxIndicator.ts +++ b/packages/components/checkbox/src/checkboxIndicator.ts @@ -1,3 +1,4 @@ +import type { PropType } from 'vue' import { Transition, defineComponent, h, toRefs } from 'vue' import { useForwardRef } from '@oku-ui/use-composable' @@ -5,7 +6,7 @@ import { Primitive } from '@oku-ui/primitive' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { ScopePropObject } from '@oku-ui/provide' +import type { Scope } from '@oku-ui/provide' import { getState, isIndeterminate } from './utils' import { useCheckboxInject } from './checkbox' @@ -23,24 +24,25 @@ const CheckboxIndicator = defineComponent({ components: { Transition }, props: { scopeCheckbox: { - ...ScopePropObject, + type: Object as unknown as PropType, + required: false, }, forceMount: Boolean, }, setup(props, { attrs, slots }) { - const { forceMount } = toRefs(props) + const { scopeCheckbox, forceMount } = toRefs(props) const { ...indicatorProps } = attrs as CheckboxIndicatorElement const forwardedRef = useForwardRef() - const context = useCheckboxInject(INDICATOR_NAME, props.scopeCheckbox) + const context = useCheckboxInject(INDICATOR_NAME, scopeCheckbox.value) const originalReturn = () => h(Transition, {}, { - default: () => (forceMount.value || isIndeterminate(context.state.value) || context.state.value === true) + default: () => (forceMount.value || isIndeterminate(context.value.state.value) || context.value.state.value === true) ? h(Primitive.span, { 'ref': forwardedRef, - 'data-state': getState(context.state.value), - 'data-disabled': context.disabled ? '' : undefined, + 'data-state': getState(context.value.state.value), + 'data-disabled': context.value.disabled ? '' : undefined, ...indicatorProps, 'style': { pointerEvents: 'none', ...attrs.style as any }, }, diff --git a/packages/components/checkbox/src/index.ts b/packages/components/checkbox/src/index.ts index 5e6dd56a5..e78962c15 100644 --- a/packages/components/checkbox/src/index.ts +++ b/packages/components/checkbox/src/index.ts @@ -1,7 +1,4 @@ -export { - OkuCheckbox, - createCheckboxScope, -} from './checkbox' +export { OkuCheckbox } from './checkbox' export type { CheckboxProps, diff --git a/packages/components/collapsible/src/collapsible.ts b/packages/components/collapsible/src/collapsible.ts index 69f09f4b8..5165dedcf 100644 --- a/packages/components/collapsible/src/collapsible.ts +++ b/packages/components/collapsible/src/collapsible.ts @@ -1,8 +1,9 @@ -import type { ComputedRef, PropType, Ref } from 'vue' +import type { PropType, Ref } from 'vue' import { computed, defineComponent, h, toRefs, useModel } from 'vue' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { ScopePropObject, createProvideScope } from '@oku-ui/provide' -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import type { Scope } from '@oku-ui/provide' +import { createProvideScope } from '@oku-ui/provide' +import { Primitive } from '@oku-ui/primitive' import { useControllable, useForwardRef, useId } from '@oku-ui/use-composable' import { getState } from './utils' @@ -15,12 +16,12 @@ export type _CollapsibleEl = HTMLDivElement type CollapsibleProvideValue = { contentId: string disabled?: Ref - open: ComputedRef + open: Ref onOpenToggle(): void } const COLLAPSIBLE_NAME = 'Collapsible' -export const [createCollapsibleProvide, createCollapsibleScope] = createProvideScope(COLLAPSIBLE_NAME) +export const [createCollapsibleProvide, _createCollapsibleScope] = createProvideScope(COLLAPSIBLE_NAME) export const [collapsibleProvider, useCollapsibleInject] = createCollapsibleProvide(COLLAPSIBLE_NAME) @@ -44,18 +45,22 @@ const Collapsible = defineComponent({ type: Boolean, default: false, }, + scopeCollapsible: { + type: Object as unknown as PropType, + required: false, + }, onOpenChange: { type: Function as PropType<(open: boolean) => void>, }, - ...PrimitiveProps, - scopeCollapsible: { - ...ScopePropObject, + asChild: { + type: Boolean, + default: undefined, }, }, emits: ['update:open', 'update:modelValue'], setup(props, { attrs, slots, emit }) { const { ...collapsibleAttr } = attrs as CollapsibleElement - const { disabled, open, defaultOpen } = toRefs(props) + const { disabled, scopeCollapsible, open, defaultOpen } = toRefs(props) const modelValue = useModel(props, 'modelValue') @@ -76,8 +81,8 @@ const Collapsible = defineComponent({ onOpenToggle() { updateValue(!state.value) }, - scope: props.scopeCollapsible, - open: computed(() => state.value || false), + scope: scopeCollapsible.value, + open: state as Ref, }) const originalReturn = () => h( diff --git a/packages/components/collapsible/src/collapsibleContent.ts b/packages/components/collapsible/src/collapsibleContent.ts index ecde0afda..b816a9681 100644 --- a/packages/components/collapsible/src/collapsibleContent.ts +++ b/packages/components/collapsible/src/collapsibleContent.ts @@ -1,10 +1,10 @@ -import type { ComputedRef } from 'vue' +import type { PropType } from 'vue' import { Transition, defineComponent, h, toRefs } from 'vue' +import type { Scope } from '@oku-ui/provide' import { useForwardRef } from '@oku-ui/use-composable' -import { type ElementType, type IPrimitiveProps, type InstanceTypeRef, type MergeProps, PrimitiveProps } from '@oku-ui/primitive' +import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' import { OkuPresence } from '@oku-ui/presence' -import { ScopePropObject } from '@oku-ui/provide' import { OkuCollapsibleContentImpl } from './collapsibleContentImpl' import { useCollapsibleInject } from './collapsible' @@ -33,12 +33,16 @@ const CollapsibleContent = defineComponent({ default: true, }, scopeCollapsible: { - ...ScopePropObject, + type: Object as unknown as PropType, + required: false, + }, + asChild: { + type: Boolean, + default: undefined, }, - ...PrimitiveProps, }, setup(props, { attrs, slots }) { - const { scopeCollapsible, forceMount } = toRefs(props) + const { scopeCollapsible } = toRefs(props) const { ...contentProps } = attrs as CollapsibleContentElement const context = useCollapsibleInject(CONTENT_NAME, scopeCollapsible.value) @@ -49,17 +53,16 @@ const CollapsibleContent = defineComponent({ const originalReturn = () => h( OkuPresence, { - present: forceMount.value || context.open.value, + present: props.forceMount || context.value.open.value, }, { - default: ({ isPresent }: { isPresent: ComputedRef }) => h( + default: () => h( OkuCollapsibleContentImpl, { ...contentProps, ref: forwardedRef, asChild: props.asChild, scopeCollapsible: scopeCollapsible.value, - present: isPresent, }, { default: () => slots.default && slots.default(), diff --git a/packages/components/collapsible/src/collapsibleContentImpl.ts b/packages/components/collapsible/src/collapsibleContentImpl.ts index b1db7f176..0e5293bd8 100644 --- a/packages/components/collapsible/src/collapsibleContentImpl.ts +++ b/packages/components/collapsible/src/collapsibleContentImpl.ts @@ -1,8 +1,8 @@ import type { PropType, Ref } from 'vue' import { computed, defineComponent, h, nextTick, onMounted, ref, toRefs, watch, watchEffect } from 'vue' import type { ComponentPublicInstanceRef, ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { ScopePropObject } from '@oku-ui/provide' -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import type { Scope } from '@oku-ui/provide' +import { Primitive } from '@oku-ui/primitive' import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable' import { useCollapsibleInject } from './collapsible' @@ -21,14 +21,18 @@ const CollapsibleContentImpl = defineComponent({ type: Object as unknown as PropType>, }, scopeCollapsible: { - ...ScopePropObject, + type: Object as unknown as PropType, + required: false, + }, + asChild: { + type: Boolean, + default: undefined, }, - ...PrimitiveProps, }, setup(props, { attrs, slots }) { - const { present, asChild } = toRefs(props) + const { scopeCollapsible, present, asChild } = toRefs(props) const { ...contentAttrs } = attrs as CollapsibleContentImplElement - const context = useCollapsibleInject(CONTENT_NAME, props.scopeCollapsible) + const context = useCollapsibleInject(CONTENT_NAME, scopeCollapsible.value) const _ref = ref | undefined>(undefined) const forwardedRef = useForwardRef() @@ -40,7 +44,7 @@ const CollapsibleContentImpl = defineComponent({ const width = computed(() => widthRef.value) const isPresent = ref(present?.value?.value) - const isOpen = computed(() => context.open.value || isPresent.value) + const isOpen = computed(() => context.value.open.value || isPresent.value) const isMountAnimationPreventedRef = ref(isOpen.value) const originalStylesRef = ref>() @@ -81,9 +85,9 @@ const CollapsibleContentImpl = defineComponent({ const originalReturn = () => h( Primitive.div, { - 'data-state': getState(context.open.value), - 'data-disabled': context.disabled?.value ? '' : undefined, - 'id': context.contentId, + 'data-state': getState(context.value.open.value), + 'data-disabled': context.value.disabled?.value ? '' : undefined, + 'id': context.value.contentId, 'hidden': !isOpen.value, ...contentAttrs, 'ref': composedRefs, diff --git a/packages/components/collapsible/src/collapsibleTrigger.ts b/packages/components/collapsible/src/collapsibleTrigger.ts index 0ba61f20f..c1b752290 100644 --- a/packages/components/collapsible/src/collapsibleTrigger.ts +++ b/packages/components/collapsible/src/collapsibleTrigger.ts @@ -1,10 +1,11 @@ -import { defineComponent, h } from 'vue' +import type { PropType } from 'vue' +import { defineComponent, h, toRefs } from 'vue' +import type { Scope } from '@oku-ui/provide' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import { Primitive } from '@oku-ui/primitive' import { composeEventHandlers } from '@oku-ui/utils' import { useForwardRef } from '@oku-ui/use-composable' -import { ScopePropObject } from '@oku-ui/provide' import { useCollapsibleInject } from './collapsible' import { getState } from './utils' @@ -20,13 +21,18 @@ const CollapsibleTrigger = defineComponent({ inheritAttrs: false, props: { scopeCollapsible: { - ...ScopePropObject, + type: Object as unknown as PropType, + required: false, + }, + asChild: { + type: Boolean, + default: undefined, }, - ...PrimitiveProps, }, setup(props, { attrs, slots }) { + const { scopeCollapsible } = toRefs(props) const { ...triggerProps } = attrs as CollapsibleTriggerElement - const context = useCollapsibleInject(TRIGGER_NAME, props.scopeCollapsible) + const context = useCollapsibleInject(TRIGGER_NAME, scopeCollapsible.value) const forwardedRef = useForwardRef() @@ -34,15 +40,15 @@ const CollapsibleTrigger = defineComponent({ Primitive.button, { 'type': 'button', - 'aria-controls': context.contentId, - 'aria-expanded': context.open.value || false, - 'data-state': getState(context.open.value || false), - 'data-disabled': context.disabled?.value ? '' : undefined, - 'disabled': context.disabled?.value, + 'aria-controls': context.value.contentId, + 'aria-expanded': context.value.open.value || false, + 'data-state': getState(context.value.open.value || false), + 'data-disabled': context.value.disabled?.value ? '' : undefined, + 'disabled': context.value.disabled?.value, ...triggerProps, 'asChild': props.asChild, 'ref': forwardedRef, - 'onClick': composeEventHandlers(triggerProps.onClick, context.onOpenToggle), + 'onClick': composeEventHandlers(triggerProps.onClick, context.value.onOpenToggle), }, { default: () => slots.default && slots.default(), diff --git a/packages/components/collapsible/src/index.ts b/packages/components/collapsible/src/index.ts index b4472e9ff..35753124e 100644 --- a/packages/components/collapsible/src/index.ts +++ b/packages/components/collapsible/src/index.ts @@ -5,10 +5,7 @@ export type { _CollapsibleEl, } from './collapsible' -export { - OkuCollapsible, - createCollapsibleScope, -} from './collapsible' +export { OkuCollapsible } from './collapsible' export { OkuCollapsibleContent, diff --git a/packages/components/collection/src/collection.ts b/packages/components/collection/src/collection.ts index 9c29ff82b..5a02c7623 100644 --- a/packages/components/collection/src/collection.ts +++ b/packages/components/collection/src/collection.ts @@ -1,11 +1,11 @@ import type { AllowedComponentProps, ComponentCustomProps, ComponentObjectPropsOptions, ComponentPublicInstance, Ref, VNodeProps } from 'vue' -import { computed, defineComponent, h, ref, watchEffect } from 'vue' +import { computed, createVNode, defineComponent, h, ref, watchEffect } from 'vue' import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable' import { createProvideScope } from '@oku-ui/provide' import { OkuSlot } from '@oku-ui/slot' const CollectionProps = { - scope: { type: null, required: false }, + scope: { type: null as any, required: false }, } interface CollectionPropsType { scope: any @@ -79,7 +79,7 @@ function createCollection(name: string, Item setup(props, { slots }) { const inject = useCollectionInject(COLLECTION_SLOT_NAME, props.scope) const forwaredRef = useForwardRef() - const composedRefs = useComposedRefs(forwaredRef, inject.collectionRef) + const composedRefs = useComposedRefs(forwaredRef, inject.value.collectionRef) return () => h(OkuSlot, { ref: composedRefs }, slots) }, }) @@ -110,14 +110,14 @@ function createCollection(name: string, Item const inject = useCollectionInject(ITEM_SLOT_NAME, scope) watchEffect((onClean) => { - inject.itemMap.value.set(refValue, { ref: refValue, ...(itemData as any), ...attrs }) + inject.value.itemMap.value.set(refValue, { ref: refValue, ...(itemData as any), ...attrs }) onClean(() => { - inject.itemMap.value.delete(refValue) + inject.value.itemMap.value.delete(refValue) }) }) - return () => h(OkuSlot, { ref: composedRefs, ...{ [ITEM_DATA_ATTR]: '' } }, slots) + return () => createVNode(OkuSlot, { ref: composedRefs, ...{ [ITEM_DATA_ATTR]: '' } }, slots) }, }) @@ -136,13 +136,13 @@ function createCollection(name: string, Item function useCollection(scope: any) { const inject = useCollectionInject(`${name}CollectionConsumer`, scope) const getItems = computed(() => { - const collectionNode = inject.collectionRef.value?.$el + const collectionNode = inject.value.collectionRef.value?.$el if (!collectionNode) return [] const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)) - const items = Array.from(inject.itemMap.value.values()) + const items = Array.from(inject.value.itemMap.value.values()) const orderedItems = items.sort( (a, b) => { return orderedNodes.indexOf(a.ref.$el!) - orderedNodes.indexOf(b.ref.$el!) diff --git a/packages/components/collection/src/stories/CollectionDemo.vue b/packages/components/collection/src/stories/CollectionDemo.vue index eab2c0603..426ce92da 100644 --- a/packages/components/collection/src/stories/CollectionDemo.vue +++ b/packages/components/collection/src/stories/CollectionDemo.vue @@ -24,7 +24,7 @@ const alert = () => window.alert('clicked') function LogsItem() { const getItems = useCollection(undefined) - console.log(getItems.value) + console.log(getItems.value[0].ref.value) } diff --git a/packages/components/direction/src/Direction.ts b/packages/components/direction/src/Direction.ts index fe4625e6d..55094db59 100644 --- a/packages/components/direction/src/Direction.ts +++ b/packages/components/direction/src/Direction.ts @@ -10,10 +10,7 @@ const DirectionContextSymbol = Symbol('DirectionContext') const DirectionProvider = defineComponent({ name: 'DirectionProvider', props: { - dir: { - type: String as PropType, - required: true, - }, + dir: { type: String as PropType, required: true }, }, setup(props, { slots }) { // Direction context diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts index 47f910555..366106320 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.ts @@ -10,39 +10,42 @@ import type { InstanceTypeRef, MergeProps, } from '@oku-ui/primitive' -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import { Primitive } from '@oku-ui/primitive' import type { PropType, Ref } from 'vue' import { computed, defineComponent, h, - provide, ref, toRefs, + toValue, + unref, + watch, watchEffect, } from 'vue' -import { ScopePropObject } from '@oku-ui/provide' +import type { Scope } from '@oku-ui/provide' +import { createProvideScope } from '@oku-ui/provide' import { composeEventHandlers } from '@oku-ui/utils' -import { dispatchUpdate, useFocusOutside, usePointerDownOutside } from './util' +import type { DismissableLayerBranchElement } from './DismissableLayerBranch' +import { useFocusOutside, usePointerDownOutside } from './util' /* ------------------------------------------------------------------------------------------------- * DismissableLayer * ----------------------------------------------------------------------------------------------- */ -export const INJECT_UPDATE = 'dismissableLayer.update' +export const CONTEXT_UPDATE = 'dismissableLayer.update' export const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside' export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside' let originalBodyPointerEvents: string export const DISMISSABLE_NAME = 'OkuDismissableLayer' -export const DismissableLayerProvideKey = Symbol('DismissableLayerProvide') + type DismissableLayerElement = ElementType<'div'> -type _ElDismissableLayerElement = HTMLDivElement -export type DismissableLayerProvideValue = { - layers: Ref> - layersWithOutsidePointerEventsDisabled: Ref> - branches: Ref> +type DismissableLayerContextValue = { + layers: Ref> + layersWithOutsidePointerEventsDisabled: Ref> + branches: Ref> } export type PointerDownOutsideEvent = CustomEvent<{ @@ -87,6 +90,12 @@ interface DismissableLayerProps extends IPrimitiveProps { onDismiss?: () => void } +const [createDismissableLayerProvide, _createDismissableLayerScope] + = createProvideScope(DISMISSABLE_NAME) + +const [dismissableLayerProvider, useDismissableLayerInject] + = createDismissableLayerProvide(DISMISSABLE_NAME) + const DismissableLayer = defineComponent({ name: DISMISSABLE_NAME, inheritAttrs: false, @@ -115,29 +124,21 @@ const DismissableLayer = defineComponent({ type: Function as PropType<() => void>, required: false, }, - onFocusCapture: { - type: Function as PropType<() => void>, - required: false, - }, - onBlurCapture: { - type: Function as PropType<() => void>, - required: false, - }, - onPointerDownCapture: { - type: Function as PropType<() => void>, - required: false, + asChild: { + type: Boolean, + default: undefined, }, - ...PrimitiveProps, scopeDismissableLayer: { - ...ScopePropObject, + type: Object as unknown as PropType, + required: false, }, }, emits: [ - 'focusOutside', - 'dismiss', - 'pointerDownOutside', - 'interactOutside', - 'escapeKeyDown', + 'onFocusOutside', + 'onDismiss', + 'onPointerDownOutside', + 'onInteractOutside', + 'onEscapeKeyDown', ], setup(props, { attrs, emit }) { const { @@ -147,20 +148,31 @@ const DismissableLayer = defineComponent({ onInteractOutside, onPointerDownOutside, disableOutsidePointerEvents, + scopeDismissableLayer, + asChild, } = toRefs(props) + const { ...dismissableLayerAttrs } = attrs - const _layers = ref(new Set<_ElDismissableLayerElement>()) - const layersWithOutsidePointerEventsDisabled = ref(new Set<_ElDismissableLayerElement>()) - const branches = ref(new Set<_ElDismissableLayerElement>()) - const layers = computed(() => Array.from(_layers.value)) + const layers = ref>(new Set()) + + const layersWithOutsidePointerEventsDisabled = ref< + Set + >(new Set()) - provide(DismissableLayerProvideKey, { - layers: _layers, + const branches = ref>(new Set()) + + dismissableLayerProvider({ + layers, layersWithOutsidePointerEventsDisabled, branches, + scope: scopeDismissableLayer.value, }) + const context = toValue( + useDismissableLayerInject(DISMISSABLE_NAME, scopeDismissableLayer.value), + ) + const node = ref | null>(null) const forwardedRef = useForwardRef() @@ -170,31 +182,47 @@ const DismissableLayer = defineComponent({ () => node.value?.$el?.ownerDocument ?? globalThis?.document, ) - const highestLayerWithOutsidePointerEventsDisabled = computed(() => { - const [highestLayerWithOutsidePointerEventsDisabled] = [...layersWithOutsidePointerEventsDisabled.value].slice(-1) - return highestLayerWithOutsidePointerEventsDisabled - }) + watch( + () => context, + () => { + if (context?.layers.value) + layers.value = context.layers.value + if (context?.layersWithOutsidePointerEventsDisabled.value) { + layersWithOutsidePointerEventsDisabled.value + = context?.layersWithOutsidePointerEventsDisabled.value + } + }, + { immediate: true, deep: true }, + ) - const highestLayerWithOutsidePointerEventsDisabledIndex = computed(() => layers.value.indexOf(highestLayerWithOutsidePointerEventsDisabled.value)) + const isBodyPointerEventsDisabled = computed( + () => context!.layersWithOutsidePointerEventsDisabled.value.size > 0, + ) const index = computed(() => { - return node.value?.$el - ? layers.value.indexOf(node.value.$el) + return node.value + ? Array.from(layers.value).indexOf(node.value as any) : -1 }) - const isBodyPointerEventsDisabled = computed( - () => layersWithOutsidePointerEventsDisabled.value.size > 0, - ) - const isPointerEventsEnabled = computed(() => { - return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex.value + const layers = Array.from(context.layers.value) + + const [highestLayerWithOutsidePointerEventsDisabled] = [ + ...context.layersWithOutsidePointerEventsDisabled.value, + ].slice(-1) + + const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf( + highestLayerWithOutsidePointerEventsDisabled, + ) + + return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex }) const pointerDownOutside = usePointerDownOutside((event) => { const target = event.target as HTMLElement - const isPointerDownOnBranch = [...branches.value].some( - branch => branch.contains(target), + const isPointerDownOnBranch = [...context.branches.value].some( + (branch: any) => branch.contains(target), ) if (!isPointerEventsEnabled.value || isPointerDownOnBranch) @@ -203,18 +231,18 @@ const DismissableLayer = defineComponent({ onPointerDownOutside.value?.(event) onInteractOutside.value?.(event) - emit('pointerDownOutside', event) - emit('interactOutside', event) + emit('onPointerDownOutside', event) + emit('onInteractOutside', event) if (!event.defaultPrevented) { onDismiss.value?.() - emit('dismiss') + emit('onDismiss') } - }, ownerDocument.value) + }, ownerDocument) const focusOutside = useFocusOutside((event) => { const target = event.target as HTMLElement - const isFocusInBranch = [...branches.value].some(branch => + const isFocusInBranch = [...context.branches.value].some((branch: any) => branch.contains(target), ) @@ -224,54 +252,52 @@ const DismissableLayer = defineComponent({ onFocusOutside.value?.(event) onInteractOutside.value?.(event) - emit('focusOutside', event) - emit('interactOutside', event) + emit('onFocusOutside', event) + emit('onInteractOutside', event) if (!event.defaultPrevented) { onDismiss.value?.() - emit('dismiss') + emit('onDismiss') } - }, ownerDocument.value) + }, ownerDocument) useEscapeKeydown((event) => { - const isHighestLayer = index.value === _layers.value.size - 1 + const isHighestLayer = index.value === context.layers.value.size - 1 if (!isHighestLayer) return onEscapeKeyDown.value?.(event) - emit('escapeKeyDown', event) + emit('onEscapeKeyDown', event) if (!event.defaultPrevented && onDismiss) { event.preventDefault() onDismiss.value?.() - emit('dismiss') + emit('onDismiss') } - }, ownerDocument.value) + }, unref(ownerDocument)) watchEffect((onInvalidate) => { - if (!node.value?.$el) + if (!node.value) return if (disableOutsidePointerEvents.value) { - if (layersWithOutsidePointerEventsDisabled.value.size === 0) { + if (context.layersWithOutsidePointerEventsDisabled.value.size === 0) { originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents ownerDocument.value.body.style.pointerEvents = 'none' } - layersWithOutsidePointerEventsDisabled.value.add( - node.value.$el, + context.layersWithOutsidePointerEventsDisabled.value.add( + node.value as any, ) } - _layers.value.add(node.value.$el) - - dispatchUpdate() + context.layers.value.add(node.value as any) onInvalidate(() => { if ( disableOutsidePointerEvents.value - && layersWithOutsidePointerEventsDisabled.value.size === 1 + && context.layersWithOutsidePointerEventsDisabled.value.size === 1 ) { ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents @@ -283,34 +309,32 @@ const DismissableLayer = defineComponent({ * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect * because a change to `disableOutsidePointerEvents` would remove this layer from the stack * and add it to the end again so the layering order wouldn't be _creation order_. - * We only want them to be removed from inject stacks when unmounted. + * We only want them to be removed from context stacks when unmounted. */ watchEffect((onInvalidate) => { onInvalidate(() => { - if (!node.value?.$el) + if (!node.value) return - _layers.value.delete(node.value.$el) - layersWithOutsidePointerEventsDisabled.value.delete( - node.value.$el, + context.layers.value.delete(node.value as any) + context.layersWithOutsidePointerEventsDisabled.value.delete( + node.value as any, ) - dispatchUpdate() }) }) watchEffect((onInvalidate) => { const handleUpdate = () => {} - document.addEventListener(INJECT_UPDATE, handleUpdate) + document.addEventListener(CONTEXT_UPDATE, handleUpdate) onInvalidate(() => - document.removeEventListener(INJECT_UPDATE, handleUpdate), + document.removeEventListener(CONTEXT_UPDATE, handleUpdate), ) }) const originalReturn = () => h(Primitive.div, { - ...dismissableLayerAttrs, ref: composedRefs, - asChild: props.asChild, + asChild: asChild.value, style: { pointerEvents: isBodyPointerEventsDisabled.value ? isPointerEventsEnabled.value @@ -319,13 +343,23 @@ const DismissableLayer = defineComponent({ : undefined, ...(dismissableLayerAttrs.style as CSSPropertyRule), }, - onFocusCapture: composeEventHandlers(props.onFocusCapture, + ...dismissableLayerAttrs, + onFocusCapture: composeEventHandlers( + dismissableLayerAttrs?.onFocusCapture as ( + event: GlobalEventHandlersEventMap['focus'] + ) => void, focusOutside.onFocusCapture, ), - onBlurCapture: composeEventHandlers(props.onBlurCapture, + onBlurCapture: composeEventHandlers( + dismissableLayerAttrs?.onBlurCapture as ( + event: GlobalEventHandlersEventMap['blur'] + ) => void, focusOutside.onBlurCapture, ), - onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, + onPointerDownCapture: composeEventHandlers( + dismissableLayerAttrs?.onPointerDownCapture as ( + event: GlobalEventHandlersEventMap['pointerdown'] + ) => void, pointerDownOutside.onPointerDownCapture, ), }) @@ -349,6 +383,6 @@ type InstanceDismissableLayerType = InstanceTypeRef< const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer & (new () => { $props: _DismissableLayer }) -export { OkuDismissableLayer } +export { OkuDismissableLayer, useDismissableLayerInject } export type { InstanceDismissableLayerType, DismissableLayerProps } diff --git a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts index 6d0724e4b..cd30049d0 100644 --- a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts +++ b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts @@ -6,11 +6,13 @@ import type { InstanceTypeRef, MergeProps, } from '@oku-ui/primitive' -import { defineComponent, h, inject, ref, watchEffect } from 'vue' +import type { PropType } from 'vue' +import { defineComponent, h, ref, toRefs, toValue, watchEffect } from 'vue' +import type { Scope } from '@oku-ui/provide' import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable' -import type { DismissableLayerProvideValue } from './DismissableLayer' import { - DismissableLayerProvideKey, + DISMISSABLE_NAME, + useDismissableLayerInject, } from './DismissableLayer' /* ------------------------------------------------------------------------------------------------- @@ -32,30 +34,42 @@ const DismissableLayerBranch = defineComponent({ type: Boolean, default: undefined, }, + scopeDismissableLayerbranch: { + type: Object as unknown as PropType, + required: false, + }, }, setup(props, { attrs }) { - const _inject = inject(DismissableLayerProvideKey) as DismissableLayerProvideValue + const { scopeDismissableLayerbranch, asChild } = toRefs(props) + + const { ...dismissableLayerBranchAttrs } = attrs + + const context = toValue( + useDismissableLayerInject( + DISMISSABLE_NAME, + scopeDismissableLayerbranch.value, + ), + ) - const node = ref | null>() + const node = ref | null>(null) const forwardedRef = useForwardRef() const composedRefs = useComposedRefs(node, forwardedRef) watchEffect((onInvalidate) => { if (node.value) - _inject.branches.value.add(node.value.$el) + context.branches.value.add(node.value as any) onInvalidate(() => { - if (node.value && node.value.$el) - _inject.branches.value.delete(node.value.$el) + context.branches.value.delete(node.value as any) }) }) const originalReturn = () => h(Primitive.div, { ref: composedRefs, - asChild: props.asChild, - ...attrs, + asChild: asChild.value, + ...dismissableLayerBranchAttrs, }) return originalReturn diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue index 65bf48da0..20d19a2be 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue @@ -1,8 +1,9 @@ diff --git a/packages/components/tabs/README.md b/packages/components/tabs/README.md deleted file mode 100644 index 31237339f..000000000 --- a/packages/components/tabs/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# `@oku-ui/tabs` - -## Installation - -```sh -$ pnpm add @oku-ui/tabs -``` - -## Usage -... \ No newline at end of file diff --git a/packages/components/tabs/build.config.ts b/packages/components/tabs/build.config.ts deleted file mode 100644 index b972b9a78..000000000 --- a/packages/components/tabs/build.config.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { defineBuildConfig } from 'unbuild' - -export default defineBuildConfig({ - entries: [ - { - builder: 'mkdist', - input: './src/', - pattern: ['**/!(*.test|*.stories).ts'], - }, - ], - declaration: true, -}) diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json deleted file mode 100644 index 561893bcf..000000000 --- a/packages/components/tabs/package.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "name": "@oku-ui/tabs", - "type": "module", - "version": "0.1.0", - "license": "MIT", - "source": "src/index.ts", - "funding": "https://github.com/sponsors/productdevbook", - "homepage": "https://oku-ui.com/primitives", - "repository": { - "type": "git", - "url": "git+https://github.com/oku-ui/primitives.git", - "directory": "packages/components/tabs" - }, - "bugs": { - "url": "https://github.com/oku-ui/primitives/issues" - }, - "exports": { - ".": { - "types": "./dist/index.d.ts", - "import": "./dist/index.mjs" - } - }, - "module": "./dist/index.mjs", - "types": "./dist/index.d.ts", - "files": [ - "dist" - ], - "scripts": { - "build": "tsup", - "dev": "tsup --watch" - }, - "peerDependencies": { - "vue": "^3.3.4" - }, - "dependencies": { - "@oku-ui/direction": "latest", - "@oku-ui/presence": "latest", - "@oku-ui/primitive": "latest", - "@oku-ui/provide": "latest", - "@oku-ui/roving-focus": "latest", - "@oku-ui/use-composable": "latest", - "@oku-ui/utils": "latest" - }, - "devDependencies": { - "tsconfig": "workspace:^" - } -} diff --git a/packages/components/tabs/src/index.ts b/packages/components/tabs/src/index.ts deleted file mode 100644 index 517b59858..000000000 --- a/packages/components/tabs/src/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { OkuTabs } from './tabs' -export { OkuTabList } from './tab-list' -export { OkuTabTrigger } from './tab-trigger' -export { OkuTabContent } from './tab-content' - -export type { TabsProps } from './tabs' -export { type TabListProps } from './tab-list' -export { type TabsTriggerProps } from './tab-trigger' -export { type TabsContentProps } from './tab-content' diff --git a/packages/components/tabs/src/stories/TabsDemo.vue b/packages/components/tabs/src/stories/TabsDemo.vue deleted file mode 100644 index 2bccf1c68..000000000 --- a/packages/components/tabs/src/stories/TabsDemo.vue +++ /dev/null @@ -1,301 +0,0 @@ - - - - - diff --git a/packages/components/tabs/src/stories/tabs.stories.ts b/packages/components/tabs/src/stories/tabs.stories.ts deleted file mode 100644 index 6aa681837..000000000 --- a/packages/components/tabs/src/stories/tabs.stories.ts +++ /dev/null @@ -1,70 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/vue3' - -import type { ITabsProps } from './TabsDemo.vue' -import OkuTabsComponent from './TabsDemo.vue' - -interface StoryProps extends ITabsProps { } - -const meta = { - title: 'Components/Tabs', - component: OkuTabsComponent, - args: { - template: '#1', - }, - tags: ['autodocs'], -} satisfies Meta & { - args: StoryProps -} - -export default meta -type Story = StoryObj - -export const Styled: Story = { - args: { - template: '#1', - // allShow: true, - }, - render: (args: any) => ({ - components: { OkuTabsComponent }, - setup() { - return { args } - }, - template: ` - - `, - }), -} - -export const Indeterminate: Story = { - args: { - template: '#2', - // allShow: true, - }, - - render: (args: any) => ({ - components: { OkuTabsComponent }, - setup() { - return { args } - }, - template: ` - - `, - }), -} - -export const Form: Story = { - args: { - template: '#3', - // allShow: true, - }, - - render: (args: any) => ({ - components: { OkuTabsComponent }, - setup() { - return { args } - }, - template: ` - - `, - }), -} diff --git a/packages/components/tabs/src/tab-content.ts b/packages/components/tabs/src/tab-content.ts deleted file mode 100644 index 8cc02e84e..000000000 --- a/packages/components/tabs/src/tab-content.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' -import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { computed, defineComponent, h, ref, toRefs, watchEffect } from 'vue' -import type { ComputedRef, PropType } from 'vue' -import { OkuPresence } from '@oku-ui/presence' -import { useForwardRef } from '@oku-ui/use-composable' -import type { ScopedPropsInterface } from './tabs' -import { ScopedProps, useTabsInject } from './tabs' -import { makeContentId, makeTriggerId } from './utils' - -const TAB_CONTENT_NAME = 'OkuTabContent' as const - -type TabsContentElement = ElementType<'div'> -export type _TabsContentEl = HTMLDivElement - -interface TabsContentProps extends ScopedPropsInterface { - value: string - - /** - * Used to force mounting when more control is needed. Useful when - * controlling animation with React animation libraries. - */ - forceMount?: true -} - -const TabContent = defineComponent({ - name: TAB_CONTENT_NAME, - inheritAttrs: false, - props: { - value: { - type: String as PropType, - required: true, - }, - forceMount: { - type: Boolean as PropType, - default: false, - }, - ...PrimitiveProps, - ...ScopedProps, - }, - setup(props, { slots, attrs }) { - const { value } = toRefs(props) - const { ...ContentAttrs } = attrs - const injectTabs = useTabsInject(TAB_CONTENT_NAME, props.scopeTabs) - - const triggerId = makeTriggerId(injectTabs.baseId, value.value) - const contentId = makeContentId(injectTabs.baseId, value.value) - const isSelected = computed(() => value.value === injectTabs.value?.value) - - const forwardedRef = useForwardRef() - const isMountAnimationPreventedRef = ref(isSelected.value) - - watchEffect((onClean) => { - const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.value = false)) - onClean(() => cancelAnimationFrame(rAF)) - }) - - return () => h(OkuPresence, { - present: isSelected.value || props.forceMount, - }, { - default: ({ isPresent }: { isPresent: ComputedRef }) => h(Primitive.div, { - 'data-state': isSelected.value ? 'active' : 'inactive', - 'data-orientation': injectTabs.orientation, - 'role': 'tabpanel', - 'aria-labelledby': triggerId, - 'hidden': !isPresent, - 'id': contentId, - 'tabindex': '0', - ...ContentAttrs, - 'ref': forwardedRef, - 'style': { - ...ContentAttrs.style ?? {} as any, - animationDuration: isMountAnimationPreventedRef.value ? '0s' : undefined, - }, - }, { - default: () => isPresent ? slots.default?.() : null, - }), - }) - }, -}) - -type _TabsProps = MergeProps - -type InstanceTabsContent = InstanceTypeRef - -const OkuTabContent = TabContent as typeof TabContent & -(new () => { $props: _TabsProps }) - -export { OkuTabContent } - -export type { TabsContentProps, InstanceTabsContent } diff --git a/packages/components/tabs/src/tab-list.ts b/packages/components/tabs/src/tab-list.ts deleted file mode 100644 index 94bd1e5f9..000000000 --- a/packages/components/tabs/src/tab-list.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' -import type { - ElementType, - IPrimitiveProps, - InstanceTypeRef, - MergeProps, -} from '@oku-ui/primitive' -import type { PropType } from 'vue' -import { defineComponent, h, toRefs } from 'vue' -import { useForwardRef } from '@oku-ui/use-composable' -import { OkuRovingFocusGroup, createRovingFocusGroupScope } from '@oku-ui/roving-focus' -import type { ScopedPropsInterface } from './tabs' -import { ScopedProps, useTabsInject } from './tabs' - -type TabListElement = ElementType<'div'> -export type _TabListEl = HTMLDivElement - -const TAB_LIST_NAME = 'OkuTabList' as const - -interface TabListProps extends ScopedPropsInterface { - loop?: boolean -} - -const useRovingFocusGroupScope = createRovingFocusGroupScope() - -const TabList = defineComponent({ - name: TAB_LIST_NAME, - inheritAttrs: false, - props: { - loop: { - type: Boolean as PropType, - default: true, - }, - ...PrimitiveProps, - ...ScopedProps, - }, - setup(props, { slots, attrs }) { - const { loop } = toRefs(props) - const { ...listAttrs } = attrs - - const injectTabs = useTabsInject(TAB_LIST_NAME, props.scopeTabs) - const forwardedRef = useForwardRef() - - const rovingFocusGroupScope = useRovingFocusGroupScope(props.scopeTabs) - - return () => - h(OkuRovingFocusGroup, { - asChild: true, - ...rovingFocusGroupScope.value, - dir: injectTabs.dir, - loop: loop.value, - orientation: injectTabs.orientation, - }, { - default: () => h( - Primitive.div, - { - 'role': 'tablist', - 'aria-orientation': injectTabs.orientation, - 'asChild': props.asChild, - ...listAttrs, - 'ref': forwardedRef, - }, - { - default: () => slots.default?.(), - }, - ), - }) - }, -}) - -type _TabListProps = MergeProps - -export type InstanceTabListType = InstanceTypeRef - -const OkuTabList = TabList as typeof TabList & (new () => { $props: _TabListProps }) - -export { OkuTabList } - -export type { TabListProps } diff --git a/packages/components/tabs/src/tab-trigger.ts b/packages/components/tabs/src/tab-trigger.ts deleted file mode 100644 index fb0ec57e0..000000000 --- a/packages/components/tabs/src/tab-trigger.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' -import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' -import { type PropType, computed, defineComponent, h, toRefs } from 'vue' -import { useForwardRef } from '@oku-ui/use-composable' -import { OkuRovingFocusGroupItem } from '@oku-ui/roving-focus' -import { composeEventHandlers } from '@oku-ui/utils' -import type { ScopedPropsInterface } from './tabs' -import { ScopedProps, useRovingFocusGroupScope, useTabsInject } from './tabs' -import { makeContentId, makeTriggerId } from './utils' - -type TabsTriggerElement = ElementType<'button'> -export type _TabsTriggerEl = HTMLButtonElement - -const TAB_TRIGGER_NAME = 'OkuTabTrigger' as const - -interface TabsTriggerProps extends ScopedPropsInterface { - value: string - disabled?: boolean - onMousedown?: (event: MouseEvent) => void - onKeydown?: (event: KeyboardEvent) => void - onFocus?: (event: FocusEvent) => void -} - -const TabTrigger = defineComponent({ - name: TAB_TRIGGER_NAME, - inheritAttrs: false, - props: { - value: { - type: String as PropType, - required: true, - }, - disabled: { - type: Boolean as PropType, - default: false, - }, - onMousedown: Function as PropType<(e: MouseEvent) => void>, - onKeydown: Function as PropType<(e: KeyboardEvent) => void>, - onFocus: Function as PropType<(e: FocusEvent) => void>, - ...ScopedProps, - ...PrimitiveProps, - }, - setup(props, { slots, attrs }) { - const { scopeTabs, value, disabled } = toRefs(props) - const { ...triggerAttrs } = attrs - const injectedValue = useTabsInject(TAB_TRIGGER_NAME, scopeTabs.value) - - const forwardedRef = useForwardRef() - - const rovingFocusGroupScope = useRovingFocusGroupScope(scopeTabs.value) - const triggerId = makeTriggerId(injectedValue.baseId, value.value) - const contentId = makeContentId(injectedValue.baseId, value.value) - const isSelected = computed(() => (value.value === injectedValue.value?.value)) - return () => - h(OkuRovingFocusGroupItem, { - asChild: true, - ...rovingFocusGroupScope, - active: isSelected.value, - focusable: !disabled.value, - }, { - default: () => h( - Primitive.button, - { - 'type': 'button', - 'role': 'tab', - 'aria-selected': isSelected.value, - 'aria-controls': contentId, - 'data-state': isSelected.value ? 'active' : 'inactive', - 'data-disabled': disabled.value ? '' : undefined, - 'disabled': disabled.value, - 'id': triggerId, - ...triggerAttrs, - 'ref': forwardedRef, - 'onMousedown': composeEventHandlers(props.onMousedown, (event: MouseEvent) => { - // only call handler if it's the left button (mousedown gets triggered by all mouse buttons) - // but not when the control key is pressed (avoiding MacOS right click) - if (!disabled.value && event.button === 0 && event.ctrlKey === false) { - injectedValue.onValueChange(value.value) - } - else { - // prevent focus to avoid accidental activation - event.preventDefault() - } - }), - 'onKeydown': composeEventHandlers(props.onKeydown, (event: KeyboardEvent) => { - if ([' ', 'Enter'].includes(event.key)) - injectedValue.onValueChange(value.value) - }), - 'onFocus': composeEventHandlers(props.onFocus, () => { - // handle "automatic" activation if necessary - // ie. activate tab following focus - const isAutomaticActivation = injectedValue.activationMode !== 'manual' - if (!isSelected.value && !disabled.value && isAutomaticActivation) - injectedValue.onValueChange(value.value) - }), - }, - { - default: () => slots.default?.(), - }, - ), - }) - }, -}) - -type _TabsProps = MergeProps - -export type InstanceTabsTriggerType = InstanceTypeRef - -const OkuTabTrigger = TabTrigger as typeof TabTrigger & (new () => { $props: _TabsProps }) - -export { OkuTabTrigger } - -export type { TabsTriggerProps } diff --git a/packages/components/tabs/src/tabs.ts b/packages/components/tabs/src/tabs.ts deleted file mode 100644 index b0f00078e..000000000 --- a/packages/components/tabs/src/tabs.ts +++ /dev/null @@ -1,199 +0,0 @@ -import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps, RefElement } from '@oku-ui/primitive' -import { Primitive } from '@oku-ui/primitive' -import { computed, defineComponent, h, toRefs, useModel } from 'vue' -import type { ComputedRef, PropType } from 'vue' -import type { Scope } from '@oku-ui/provide' -import { createProvideScope } from '@oku-ui/provide' -import { createRovingFocusGroupScope } from '@oku-ui/roving-focus' -import { useControllable, useForwardRef, useId } from '@oku-ui/use-composable' -import { useDirection } from '@oku-ui/direction' - -const TAB_NAME = 'OkuTab' as const - -type TabsElement = ElementType<'div'> -export type _TabsEl = HTMLDivElement - -export type ScopedPropsInterface

= P & { scopeTabs?: Scope } -export const ScopedProps = { - scopeTabs: { - type: Object as PropType, - required: false, - }, -} - -type Orientation = 'horizontal' | 'vertical' -type Direction = 'ltr' | 'rtl' -/** - * Whether a tab is activated automatically or manually. - * @defaultValue automatic - * */ -type ActivationMode = 'automatic' | 'manual' -interface TabsProps extends ScopedPropsInterface { - /** The value for the selected tab, if controlled */ - value?: string - /** - * The default value of the tab. - * @default 'tab1' - * @type string - * @example - * ```vue - * - // ... - * - * ``` - * @see link-to-oku-docs/tab - */ - defaultValue?: string - /** - * The callback function that is called when the tab value changes. - * @default () => {} - * @type (value: string) => void - * @example - * ```vue - * console.log(value)}> - // ... - * - * */ - onValueChange?: (value: string) => void - /** - * The orientation of the tabs. - * @default 'horizontal' - * @type 'horizontal' | 'vertical' - * @example - * ```vue - * - // ... - * - * ``` - * @see link-to-oku-docs/tab - * */ - orientation?: Orientation - /** - * The direction of navigation between toolbar items. - */ - dir?: Direction - /** - * Whether a tab is activated automatically or manually. - * @defaultValue automatic - * */ - activationMode?: ActivationMode -} - -interface TabsProvideValue { - baseId: string - value?: ComputedRef - onValueChange: (value: string) => void - orientation?: TabsProps['orientation'] - dir?: TabsProps['dir'] - activationMode?: TabsProps['activationMode'] -} - -export const [createTabsProvider, _createTabsScope] = createProvideScope(TAB_NAME, [ - createRovingFocusGroupScope, -]) - -export const [TabsProvider, useTabsInject] - = createTabsProvider(TAB_NAME) - -export const useRovingFocusGroupScope = createRovingFocusGroupScope() - -const Tabs = defineComponent({ - name: TAB_NAME, - inheritAttrs: false, - props: { - value: { - type: String as PropType, - required: false, - }, - defaultValue: { - type: String as PropType, - default: undefined, - }, - orientation: { - type: String as PropType, - default: 'horizontal', - }, - dir: { - type: String as PropType, - default: 'ltr', - required: false, - }, - activationMode: { - type: String as PropType, - default: 'automatic', - required: false, - }, - modelValue: { - type: String as PropType, - required: false, - }, - onValueChange: { - type: Function as PropType<(value: string) => void>, - required: false, - }, - asChild: { - type: Boolean as PropType, - default: false, - }, - ...ScopedProps, - }, - emits: ['update:modelValue'], - setup(props, { slots, emit, attrs }) { - const { - value: valueProp, - onValueChange, - defaultValue, - orientation, - dir, - activationMode, - } = toRefs(props) - - const direction = useDirection(dir.value) - - const forwardedRef = useForwardRef() - - const modelValue = useModel(props, 'modelValue') - - const { state, updateValue } = useControllable({ - prop: computed(() => modelValue.value ?? valueProp.value), - defaultProp: computed(() => defaultValue.value), - onChange: (result: any) => { - emit('update:modelValue', result) - onValueChange.value?.(result) - }, - }) - - TabsProvider({ - onValueChange: updateValue, - orientation: orientation.value, - dir: direction, - value: state, - activationMode: activationMode.value, - baseId: useId(), - scope: props.scopeTabs, - }) - - return () => - h( - Primitive.div, - { - 'dir': direction, - 'data-orientation': props.orientation, - 'ref': forwardedRef, - ...attrs, - 'asChild': props.asChild, - }, slots, - ) - }, -}) - -type _TabsProps = MergeProps -export type IstanceTabsType = InstanceTypeRef - -type TabsRef = RefElement - -const OkuTabs = Tabs as typeof Tabs & (new () => { $props: _TabsProps }) - -export { OkuTabs } - -export type { TabsProps, TabsRef } diff --git a/packages/components/tabs/src/utils.ts b/packages/components/tabs/src/utils.ts deleted file mode 100644 index a865868d7..000000000 --- a/packages/components/tabs/src/utils.ts +++ /dev/null @@ -1,7 +0,0 @@ -export function makeTriggerId(baseId: string, value: string) { - return `${baseId}-trigger-${value}` -} - -export function makeContentId(baseId: string, value: string) { - return `${baseId}-content-${value}` -} diff --git a/packages/components/tabs/tsconfig.json b/packages/components/tabs/tsconfig.json deleted file mode 100644 index b8dfa9041..000000000 --- a/packages/components/tabs/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "tsconfig/node16.json", - "compilerOptions": { - "rootDir": "src", - "outDir": "dist" - }, - "include": [ - "src" - ] -} diff --git a/packages/components/tabs/tsup.config.ts b/packages/components/tabs/tsup.config.ts deleted file mode 100644 index a2f7a0d8b..000000000 --- a/packages/components/tabs/tsup.config.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { defineConfig } from 'tsup' -import pkg from './package.json' - -const external = [ - ...Object.keys(pkg.dependencies || {}), - ...Object.keys(pkg.peerDependencies || {}), -] - -export default defineConfig((options) => { - return [ - { - ...options, - entryPoints: ['src/index.ts'], - external, - dts: true, - clean: true, - target: 'node16', - format: ['esm'], - outExtension: () => ({ js: '.mjs' }), - }, - ] -}) diff --git a/packages/components/toggle/src/toggle.ts b/packages/components/toggle/src/toggle.ts index f503ab18b..abf99262a 100644 --- a/packages/components/toggle/src/toggle.ts +++ b/packages/components/toggle/src/toggle.ts @@ -1,6 +1,6 @@ import type { PropType } from 'vue' import { computed, defineComponent, h, toRefs, useModel } from 'vue' -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import { Primitive } from '@oku-ui/primitive' import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive' import { composeEventHandlers } from '@oku-ui/utils' import { useControllable, useForwardRef } from '@oku-ui/use-composable' @@ -42,7 +42,6 @@ const Toggle = defineComponent({ type: Boolean, default: false, }, - ...PrimitiveProps, }, emits: ['update:pressed', 'update:modelValue'], setup(props, { attrs, slots, emit }) { @@ -70,7 +69,6 @@ const Toggle = defineComponent({ 'data-disabled': disabled ? '' : undefined, ...toggleProps, 'ref': forwardedRef, - 'asChild': props.asChild, 'onClick': composeEventHandlers(toggleProps.onClick, () => { if (!disabled) updateValue(!state.value) diff --git a/packages/components/visually-hidden/src/VisuallyHidden.ts b/packages/components/visually-hidden/src/VisuallyHidden.ts index 052e8b6e3..a3b877548 100644 --- a/packages/components/visually-hidden/src/VisuallyHidden.ts +++ b/packages/components/visually-hidden/src/VisuallyHidden.ts @@ -1,4 +1,4 @@ -import { Primitive, PrimitiveProps } from '@oku-ui/primitive' +import { Primitive } from '@oku-ui/primitive' import type { ElementType, IPrimitiveProps, @@ -20,9 +20,12 @@ const VisuallyHidden = defineComponent({ name: NAME, inheritAttrs: false, props: { - ...PrimitiveProps, + asChild: { + type: Boolean, + default: undefined, + }, }, - setup(props, { attrs }) { + setup(props, { attrs, expose }) { const { ...visuallyHiddenAttrs } = attrs as VisuallyHiddenElement const forwardedRef = useForwardRef() diff --git a/packages/core/primitive/tsup.config.ts b/packages/core/primitive/tsup.config.ts index 6cd5ada72..c5905e645 100644 --- a/packages/core/primitive/tsup.config.ts +++ b/packages/core/primitive/tsup.config.ts @@ -1,4 +1,3 @@ -import process from 'node:process' import { defineConfig } from 'tsup' import pkg from './package.json' @@ -7,8 +6,6 @@ const external = [ ...Object.keys(pkg.peerDependencies || {}), ] -const isClean = (process.env.CLEAN as unknown as number) !== 0 - export default defineConfig((options) => { return [ { @@ -16,8 +13,9 @@ export default defineConfig((options) => { entryPoints: ['src/index.ts'], external, dts: true, - clean: isClean, - target: 'node18', + clean: true, + outDir: './dist', + target: 'node16', format: ['esm'], outExtension: () => ({ js: '.mjs' }), }, diff --git a/packages/core/provide/src/createProvide.ts b/packages/core/provide/src/createProvide.ts index 332e2ff2c..9c98347f0 100644 --- a/packages/core/provide/src/createProvide.ts +++ b/packages/core/provide/src/createProvide.ts @@ -1,4 +1,4 @@ -import type { InjectionKey, PropType } from 'vue' +import type { ComputedRef, InjectionKey } from 'vue' import { computed, defineComponent, inject, provide } from 'vue' function createProvide( @@ -32,13 +32,17 @@ function createProvide( return [Provider, useContext] as const } +/* ------------------------------------------------------------------------------------------------- + * createProvideScope + * ----------------------------------------------------------------------------------------------- */ + type VueProvide = { key: InjectionKey value: C } type Scope = { [scopeName: string]: VueProvide[] } | undefined -type ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope } +type ScopeHook = (scope: Scope) => ComputedRef<{ [__scopeProp: string]: Scope }> interface CreateScope { scopeName: string (): ScopeHook @@ -47,36 +51,35 @@ interface CreateScope { function createProvideScope(scopeName: string, createProvideScopeDeps: CreateScope[] = []) { let defaultProviders: any[] = [] /* ----------------------------------------------------------------------------------------------- - * createProvide + * createContext * --------------------------------------------------------------------------------------------- */ function createProvide( rootComponentName: string, defaultValue?: ProvideValueType, ) { - const BaseProvideKey: InjectionKey = Symbol(rootComponentName) as any - + const BaseProvideKey: InjectionKey = rootComponentName as any + // const BaseProvide = provide(BaseProvideKey, defaultValue) const BaseScope = { key: BaseProvideKey, value: defaultValue } as VueProvide const index = defaultProviders.length - defaultProviders = [...defaultProviders, [{ key: BaseProvideKey, value: defaultValue }]] + defaultProviders = [...defaultProviders, { [scopeName]: [{ key: BaseProvideKey, value: defaultValue }] }] function Provider( - props: ProvideValueType & { scope: Scope | undefined }, + props: ProvideValueType & { scope: Scope }, ) { - const { scope, ...context } = props - - const Provide = scope?.[scopeName][index] || BaseScope.key - provide(Provide, context) + const { scope, ...context } = props as any + const Provide = scope?.[scopeName][index] || BaseScope.key as ProvideValueType + const value = computed(() => context) + provide(Provide, value) } - function useInject(consumerName: string, scope: Scope | undefined): ProvideValueType { + function useInject(consumerName: string, scope: Scope): ComputedRef { const Provide = scope?.[scopeName]?.[index] || BaseScope - const provide = inject(Provide.key) - + const provide = inject(Provide.key) if (provide) return provide if (defaultValue !== undefined) - return defaultValue + return computed(() => defaultValue) // // if a defaultProvide wasn't specified, it's a required provide. throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``) @@ -90,21 +93,22 @@ function createProvideScope(scopeName: string, createProvideScopeDeps: CreateSco * --------------------------------------------------------------------------------------------- */ const createScope: CreateScope = () => { const scopeProviders = defaultProviders[0] - return function useScope(scope: Scope) { const providers = scope?.[scopeName] || scopeProviders - return ({ [`scope${scopeName}`]: { ...scope, [scopeName]: providers } }) + return computed(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: providers } })) } } + createScope.scopeName = scopeName - return [createProvide, composeInjectScopes(createScope, ...createProvideScopeDeps)] as const + return [createProvide, composeContextScopes(createScope, ...createProvideScopeDeps)] as const } -function composeInjectScopes(...scopes: CreateScope[]) { +function composeContextScopes(...scopes: CreateScope[]) { const baseScope = scopes[0] if (scopes.length === 1) return baseScope + const createScope: CreateScope = () => { const scopeHooks = scopes.map(createScope => ({ useScope: createScope(), @@ -115,12 +119,11 @@ function composeInjectScopes(...scopes: CreateScope[]) { // We are calling a hook inside a callback which React warns against to avoid inconsistent // renders, however, scoping doesn't have render side effects so we ignore the rule. const scopeProps = useScope(overrideScopes) - const currentScope = scopeProps[`scope${scopeName}`] + const currentScope = computed(() => scopeProps.value[`__scope${scopeName}`]) return { ...nextScopes, ...currentScope } }, {}) - const data = ({ [`scope${baseScope.scopeName}`]: nextScopes }) - return data + return computed(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes })) } } @@ -128,10 +131,5 @@ function composeInjectScopes(...scopes: CreateScope[]) { return createScope } -export const ScopePropObject = { - type: Object as unknown as PropType, - required: false, -} - export { createProvide, createProvideScope } export type { CreateScope, Scope } diff --git a/packages/core/provide/src/index.ts b/packages/core/provide/src/index.ts index c280869e1..d49c2510c 100644 --- a/packages/core/provide/src/index.ts +++ b/packages/core/provide/src/index.ts @@ -1,2 +1,2 @@ -export { createProvide, createProvideScope, ScopePropObject } from './createProvide' +export { createProvide, createProvideScope } from './createProvide' export type { CreateScope, Scope } from './createProvide' diff --git a/packages/core/provide/tsup.config.ts b/packages/core/provide/tsup.config.ts index 02745fc07..c5905e645 100644 --- a/packages/core/provide/tsup.config.ts +++ b/packages/core/provide/tsup.config.ts @@ -1,4 +1,3 @@ -import process from 'node:process' import { defineConfig } from 'tsup' import pkg from './package.json' @@ -7,8 +6,6 @@ const external = [ ...Object.keys(pkg.peerDependencies || {}), ] -const isClean = (process.env.CLEAN as unknown as number) !== 0 - export default defineConfig((options) => { return [ { @@ -16,7 +13,8 @@ export default defineConfig((options) => { entryPoints: ['src/index.ts'], external, dts: true, - clean: isClean, + clean: true, + outDir: './dist', target: 'node16', format: ['esm'], outExtension: () => ({ js: '.mjs' }), diff --git a/packages/core/use-composable/src/index.ts b/packages/core/use-composable/src/index.ts index 3a9b04522..bf791cd93 100644 --- a/packages/core/use-composable/src/index.ts +++ b/packages/core/use-composable/src/index.ts @@ -10,4 +10,5 @@ export { useComposedRefs } from './useComposedRefs' export { useForwardRef } from './useForwardRef' export { useEscapeKeydown } from './useEscapeKeydown' export type { MaybeComputedElementRef } from './unrefElement' +export { useRect } from './use-rect' export { computedEager, syncRef, computedAsync } diff --git a/packages/core/use-composable/tsup.config.ts b/packages/core/use-composable/tsup.config.ts index 6cd5ada72..c5905e645 100644 --- a/packages/core/use-composable/tsup.config.ts +++ b/packages/core/use-composable/tsup.config.ts @@ -1,4 +1,3 @@ -import process from 'node:process' import { defineConfig } from 'tsup' import pkg from './package.json' @@ -7,8 +6,6 @@ const external = [ ...Object.keys(pkg.peerDependencies || {}), ] -const isClean = (process.env.CLEAN as unknown as number) !== 0 - export default defineConfig((options) => { return [ { @@ -16,8 +13,9 @@ export default defineConfig((options) => { entryPoints: ['src/index.ts'], external, dts: true, - clean: isClean, - target: 'node18', + clean: true, + outDir: './dist', + target: 'node16', format: ['esm'], outExtension: () => ({ js: '.mjs' }), }, diff --git a/packages/core/utils/src/index.ts b/packages/core/utils/src/index.ts index 7a9e017d8..ca68c35cd 100644 --- a/packages/core/utils/src/index.ts +++ b/packages/core/utils/src/index.ts @@ -1,6 +1,6 @@ export { clamp } from './number' export { composeEventHandlers } from './primitive' -export { isValidVNodeElement } from './isValidVNodeElement' + export { observeElementRect } from './observeElementRect' export type { Measurable } from './observeElementRect' diff --git a/packages/core/utils/src/isValidVNodeElement.ts b/packages/core/utils/src/isValidVNodeElement.ts deleted file mode 100644 index 3efbf6946..000000000 --- a/packages/core/utils/src/isValidVNodeElement.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Checks whether a given VNode is a render-vialble element. - */ -export function isValidVNodeElement(input: any): boolean { - return ( - input - && (typeof input.type === 'string' - || typeof input.type === 'object' - || typeof input.type === 'function') - ) -} diff --git a/packages/core/utils/tsup.config.ts b/packages/core/utils/tsup.config.ts index 6cd5ada72..c5905e645 100644 --- a/packages/core/utils/tsup.config.ts +++ b/packages/core/utils/tsup.config.ts @@ -1,4 +1,3 @@ -import process from 'node:process' import { defineConfig } from 'tsup' import pkg from './package.json' @@ -7,8 +6,6 @@ const external = [ ...Object.keys(pkg.peerDependencies || {}), ] -const isClean = (process.env.CLEAN as unknown as number) !== 0 - export default defineConfig((options) => { return [ { @@ -16,8 +13,9 @@ export default defineConfig((options) => { entryPoints: ['src/index.ts'], external, dts: true, - clean: isClean, - target: 'node18', + clean: true, + outDir: './dist', + target: 'node16', format: ['esm'], outExtension: () => ({ js: '.mjs' }), }, diff --git a/packages/tsconfig/node18.json b/packages/tsconfig/node18.json deleted file mode 100644 index 75082d4bc..000000000 --- a/packages/tsconfig/node18.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/tsconfig", - "display": "Node 18", - "_version": "18.2.0", - "compilerOptions": { - "lib": [ - "ES2023", - "DOM" - ], - "module": "Node16", - "target": "es2022", - "strict": true, - "esModuleInterop": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "Node", - "types": [ - "vite/client" - ] - } -} diff --git a/playground/nuxt3/package.json b/playground/nuxt3/package.json index f120bdc14..3a5cc9eb8 100644 --- a/playground/nuxt3/package.json +++ b/playground/nuxt3/package.json @@ -22,7 +22,6 @@ "@oku-ui/separator": "workspace:^", "@oku-ui/slot": "workspace:^", "@oku-ui/switch": "workspace:^", - "@oku-ui/tabs": "workspace:^", "@oku-ui/visually-hidden": "workspace:^" }, "devDependencies": { diff --git a/playground/nuxt3/pages/index.vue b/playground/nuxt3/pages/index.vue index 540ad87e7..fb7139b86 100644 --- a/playground/nuxt3/pages/index.vue +++ b/playground/nuxt3/pages/index.vue @@ -56,10 +56,6 @@ const pages: Page[] = [ name: 'roving-focus', path: '/roving-focus', }, - { - name: 'OkuTabs', - path: '/tabs', - }, ] diff --git a/playground/nuxt3/pages/tabs.vue b/playground/nuxt3/pages/tabs.vue deleted file mode 100644 index 17f56e5f8..000000000 --- a/playground/nuxt3/pages/tabs.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/playground/vue3/package.json b/playground/vue3/package.json index 1c01e3663..627aa713c 100644 --- a/playground/vue3/package.json +++ b/playground/vue3/package.json @@ -20,7 +20,6 @@ "@oku-ui/separator": "workspace:^", "@oku-ui/slot": "workspace:^", "@oku-ui/switch": "workspace:^", - "@oku-ui/tabs": "workspace:^", "vite-plugin-pages": "^0.31.0", "vue": "^3.3.4", "vue-router": "^4.2.4" diff --git a/playground/vue3/src/pages/index.vue b/playground/vue3/src/pages/index.vue index f8594341b..9231170b9 100644 --- a/playground/vue3/src/pages/index.vue +++ b/playground/vue3/src/pages/index.vue @@ -32,10 +32,6 @@ const pages: Page[] = [ name: 'OkuToggle', path: '/toggle', }, - { - name: 'OkuTabs', - path: '/tabs', - }, { name: 'OkuPopper', path: '/popper', diff --git a/playground/vue3/src/pages/tabs.vue b/playground/vue3/src/pages/tabs.vue deleted file mode 100644 index 01ce69ffd..000000000 --- a/playground/vue3/src/pages/tabs.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6edc085a5..4c00ad022 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,9 +37,6 @@ importers: '@oku-ui/collection': specifier: workspace:^ version: link:packages/components/collection - '@oku-ui/direction': - specifier: workspace:^ - version: link:packages/components/direction '@oku-ui/dismissable-layer': specifier: workspace:^ version: link:packages/components/dismissable-layer @@ -73,9 +70,6 @@ importers: '@oku-ui/switch': specifier: workspace:^ version: link:packages/components/switch - '@oku-ui/tabs': - specifier: workspace:^ - version: link:packages/components/tabs '@oku-ui/toggle': specifier: workspace:^ version: link:packages/components/toggle @@ -422,6 +416,9 @@ importers: packages/components/presence: dependencies: + '@oku-ui/primitive': + specifier: latest + version: link:../../core/primitive '@oku-ui/use-composable': specifier: latest version: link:../../core/use-composable @@ -543,37 +540,6 @@ importers: specifier: workspace:^ version: link:../../tsconfig - packages/components/tabs: - dependencies: - '@oku-ui/direction': - specifier: latest - version: link:../direction - '@oku-ui/presence': - specifier: latest - version: link:../presence - '@oku-ui/primitive': - specifier: latest - version: link:../../core/primitive - '@oku-ui/provide': - specifier: latest - version: link:../../core/provide - '@oku-ui/roving-focus': - specifier: latest - version: link:../roving-focus - '@oku-ui/use-composable': - specifier: latest - version: link:../../core/use-composable - '@oku-ui/utils': - specifier: latest - version: link:../../core/utils - vue: - specifier: ^3.3.4 - version: 3.3.4 - devDependencies: - tsconfig: - specifier: workspace:^ - version: link:../../tsconfig - packages/components/toggle: dependencies: '@oku-ui/primitive': @@ -716,9 +682,6 @@ importers: '@oku-ui/switch': specifier: workspace:^ version: link:../../packages/components/switch - '@oku-ui/tabs': - specifier: workspace:^ - version: link:../../packages/components/tabs '@oku-ui/visually-hidden': specifier: workspace:^ version: link:../../packages/components/visually-hidden @@ -762,9 +725,6 @@ importers: '@oku-ui/switch': specifier: workspace:^ version: link:../../packages/components/switch - '@oku-ui/tabs': - specifier: workspace:^ - version: link:../../packages/components/tabs vite-plugin-pages: specifier: ^0.31.0 version: 0.31.0(vite@4.3.5) @@ -935,7 +895,7 @@ packages: resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==} engines: {node: '>=6.9.0'} dependencies: - '@babel/highlight': 7.18.6 + '@babel/highlight': 7.22.5 dev: true /@babel/code-frame@7.22.5: @@ -944,39 +904,11 @@ packages: dependencies: '@babel/highlight': 7.22.5 - /@babel/compat-data@7.21.7: - resolution: {integrity: sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==} - engines: {node: '>=6.9.0'} - dev: true - /@babel/compat-data@7.22.9: resolution: {integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==} engines: {node: '>=6.9.0'} dev: true - /@babel/core@7.21.5: - resolution: {integrity: sha512-9M398B/QH5DlfCOTKDZT1ozXr0x8uBEeFd+dJraGUZGiaNpGCDVGCc14hZexsMblw3XxltJ+6kSvogp9J+5a9g==} - engines: {node: '>=6.9.0'} - dependencies: - '@ampproject/remapping': 2.2.1 - '@babel/code-frame': 7.22.5 - '@babel/generator': 7.21.5 - '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.21.5) - '@babel/helper-module-transforms': 7.21.5 - '@babel/helpers': 7.21.5 - '@babel/parser': 7.22.7 - '@babel/template': 7.20.7 - '@babel/traverse': 7.21.5 - '@babel/types': 7.22.5 - convert-source-map: 1.9.0 - debug: 4.3.4 - gensync: 1.0.0-beta.2 - json5: 2.2.3 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - dev: true - /@babel/core@7.22.9: resolution: {integrity: sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==} engines: {node: '>=6.9.0'} @@ -1000,16 +932,6 @@ packages: - supports-color dev: true - /@babel/generator@7.21.5: - resolution: {integrity: sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.22.5 - '@jridgewell/gen-mapping': 0.3.3 - '@jridgewell/trace-mapping': 0.3.18 - jsesc: 2.5.2 - dev: true - /@babel/generator@7.22.9: resolution: {integrity: sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==} engines: {node: '>=6.9.0'} @@ -1020,13 +942,6 @@ packages: jsesc: 2.5.2 dev: true - /@babel/helper-annotate-as-pure@7.18.6: - resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.22.5 - dev: true - /@babel/helper-annotate-as-pure@7.22.5: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} @@ -1041,34 +956,6 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/helper-compilation-targets@7.21.5(@babel/core@7.21.5): - resolution: {integrity: sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/compat-data': 7.21.7 - '@babel/core': 7.21.5 - '@babel/helper-validator-option': 7.21.0 - browserslist: 4.21.5 - lru-cache: 5.1.1 - semver: 6.3.1 - dev: true - - /@babel/helper-compilation-targets@7.22.9(@babel/core@7.21.5): - resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/compat-data': 7.22.9 - '@babel/core': 7.21.5 - '@babel/helper-validator-option': 7.22.5 - browserslist: 4.21.10 - lru-cache: 5.1.1 - semver: 6.3.1 - dev: true - /@babel/helper-compilation-targets@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==} engines: {node: '>=6.9.0'} @@ -1083,64 +970,6 @@ packages: semver: 6.3.1 dev: true - /@babel/helper-create-class-features-plugin@7.21.5(@babel/core@7.21.5): - resolution: {integrity: sha512-yNSEck9SuDvPTEUYm4BSXl6ZVC7yO5ZLEMAhG3v3zi7RDxyL/nQDemWWZmw4L0stPWwhpnznRRyJHPRcbXR2jw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.21.5 - '@babel/helper-annotate-as-pure': 7.18.6 - '@babel/helper-environment-visitor': 7.21.5 - '@babel/helper-function-name': 7.21.0 - '@babel/helper-member-expression-to-functions': 7.21.5 - '@babel/helper-optimise-call-expression': 7.18.6 - '@babel/helper-replace-supers': 7.21.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.20.0 - '@babel/helper-split-export-declaration': 7.18.6 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - dev: true - - /@babel/helper-create-class-features-plugin@7.21.5(@babel/core@7.22.9): - resolution: {integrity: sha512-yNSEck9SuDvPTEUYm4BSXl6ZVC7yO5ZLEMAhG3v3zi7RDxyL/nQDemWWZmw4L0stPWwhpnznRRyJHPRcbXR2jw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.22.9 - '@babel/helper-annotate-as-pure': 7.18.6 - '@babel/helper-environment-visitor': 7.21.5 - '@babel/helper-function-name': 7.21.0 - '@babel/helper-member-expression-to-functions': 7.21.5 - '@babel/helper-optimise-call-expression': 7.18.6 - '@babel/helper-replace-supers': 7.21.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.20.0 - '@babel/helper-split-export-declaration': 7.18.6 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - dev: true - - /@babel/helper-create-class-features-plugin@7.22.9(@babel/core@7.21.5): - resolution: {integrity: sha512-Pwyi89uO4YrGKxL/eNJ8lfEH55DnRloGPOseaA8NFNL6jAUnn+KccaISiFazCj5IolPPDjGSdzQzXVzODVRqUQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.21.5 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-environment-visitor': 7.22.5 - '@babel/helper-function-name': 7.22.5 - '@babel/helper-member-expression-to-functions': 7.22.5 - '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers': 7.22.9(@babel/core@7.21.5) - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - semver: 6.3.1 - dev: true - /@babel/helper-create-class-features-plugin@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-Pwyi89uO4YrGKxL/eNJ8lfEH55DnRloGPOseaA8NFNL6jAUnn+KccaISiFazCj5IolPPDjGSdzQzXVzODVRqUQ==} engines: {node: '>=6.9.0'} @@ -1153,31 +982,31 @@ packages: '@babel/helper-function-name': 7.22.5 '@babel/helper-member-expression-to-functions': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers': 7.22.9(@babel/core@7.21.5) + '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.9) '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 semver: 6.3.1 dev: true - /@babel/helper-create-regexp-features-plugin@7.22.9(@babel/core@7.21.5): + /@babel/helper-create-regexp-features-plugin@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-annotate-as-pure': 7.22.5 regexpu-core: 5.3.2 semver: 6.3.1 dev: true - /@babel/helper-define-polyfill-provider@0.4.2(@babel/core@7.21.5): + /@babel/helper-define-polyfill-provider@0.4.2(@babel/core@7.22.9): resolution: {integrity: sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 debug: 4.3.4 lodash.debounce: 4.0.8 @@ -1186,24 +1015,11 @@ packages: - supports-color dev: true - /@babel/helper-environment-visitor@7.21.5: - resolution: {integrity: sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==} - engines: {node: '>=6.9.0'} - dev: true - /@babel/helper-environment-visitor@7.22.5: resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==} engines: {node: '>=6.9.0'} dev: true - /@babel/helper-function-name@7.21.0: - resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/template': 7.20.7 - '@babel/types': 7.22.5 - dev: true - /@babel/helper-function-name@7.22.5: resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==} engines: {node: '>=6.9.0'} @@ -1212,13 +1028,6 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/helper-hoist-variables@7.18.6: - resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.22.5 - dev: true - /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} @@ -1226,13 +1035,6 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/helper-member-expression-to-functions@7.21.5: - resolution: {integrity: sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.22.5 - dev: true - /@babel/helper-member-expression-to-functions@7.22.5: resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==} engines: {node: '>=6.9.0'} @@ -1240,13 +1042,6 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/helper-module-imports@7.21.4: - resolution: {integrity: sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.22.5 - dev: true - /@babel/helper-module-imports@7.22.5: resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==} engines: {node: '>=6.9.0'} @@ -1254,36 +1049,6 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/helper-module-transforms@7.21.5: - resolution: {integrity: sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-environment-visitor': 7.21.5 - '@babel/helper-module-imports': 7.21.4 - '@babel/helper-simple-access': 7.21.5 - '@babel/helper-split-export-declaration': 7.18.6 - '@babel/helper-validator-identifier': 7.22.5 - '@babel/template': 7.20.7 - '@babel/traverse': 7.21.5 - '@babel/types': 7.22.5 - transitivePeerDependencies: - - supports-color - dev: true - - /@babel/helper-module-transforms@7.22.9(@babel/core@7.21.5): - resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.21.5 - '@babel/helper-environment-visitor': 7.22.5 - '@babel/helper-module-imports': 7.22.5 - '@babel/helper-simple-access': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - '@babel/helper-validator-identifier': 7.22.5 - dev: true - /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==} engines: {node: '>=6.9.0'} @@ -1298,13 +1063,6 @@ packages: '@babel/helper-validator-identifier': 7.22.5 dev: true - /@babel/helper-optimise-call-expression@7.18.6: - resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.22.5 - dev: true - /@babel/helper-optimise-call-expression@7.22.5: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} @@ -1312,61 +1070,35 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/helper-plugin-utils@7.21.5: - resolution: {integrity: sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==} - engines: {node: '>=6.9.0'} - dev: true - /@babel/helper-plugin-utils@7.22.5: resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} engines: {node: '>=6.9.0'} dev: true - /@babel/helper-remap-async-to-generator@7.22.9(@babel/core@7.21.5): + /@babel/helper-remap-async-to-generator@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-wrap-function': 7.22.9 dev: true - /@babel/helper-replace-supers@7.21.5: - resolution: {integrity: sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-environment-visitor': 7.22.5 - '@babel/helper-member-expression-to-functions': 7.21.5 - '@babel/helper-optimise-call-expression': 7.18.6 - '@babel/template': 7.22.5 - '@babel/traverse': 7.22.8 - '@babel/types': 7.22.5 - transitivePeerDependencies: - - supports-color - dev: true - - /@babel/helper-replace-supers@7.22.9(@babel/core@7.21.5): + /@babel/helper-replace-supers@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-member-expression-to-functions': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 dev: true - /@babel/helper-simple-access@7.21.5: - resolution: {integrity: sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.22.5 - dev: true - /@babel/helper-simple-access@7.22.5: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} @@ -1374,13 +1106,6 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/helper-skip-transparent-expression-wrappers@7.20.0: - resolution: {integrity: sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.22.5 - dev: true - /@babel/helper-skip-transparent-expression-wrappers@7.22.5: resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} engines: {node: '>=6.9.0'} @@ -1388,13 +1113,6 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/helper-split-export-declaration@7.18.6: - resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.22.5 - dev: true - /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} @@ -1410,11 +1128,6 @@ packages: resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} engines: {node: '>=6.9.0'} - /@babel/helper-validator-option@7.21.0: - resolution: {integrity: sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==} - engines: {node: '>=6.9.0'} - dev: true - /@babel/helper-validator-option@7.22.5: resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==} engines: {node: '>=6.9.0'} @@ -1429,17 +1142,6 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/helpers@7.21.5: - resolution: {integrity: sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/template': 7.20.7 - '@babel/traverse': 7.21.5 - '@babel/types': 7.22.5 - transitivePeerDependencies: - - supports-color - dev: true - /@babel/helpers@7.22.6: resolution: {integrity: sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==} engines: {node: '>=6.9.0'} @@ -1451,15 +1153,6 @@ packages: - supports-color dev: true - /@babel/highlight@7.18.6: - resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-validator-identifier': 7.22.5 - chalk: 2.4.2 - js-tokens: 4.0.0 - dev: true - /@babel/highlight@7.22.5: resolution: {integrity: sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==} engines: {node: '>=6.9.0'} @@ -1475,26 +1168,26 @@ packages: dependencies: '@babel/types': 7.22.5 - /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.21.5): + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.22.5(@babel/core@7.21.5): + /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.13.0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.21.5) + '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.22.9) dev: true /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.22.9): @@ -1531,69 +1224,69 @@ packages: '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.9) dev: true - /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.21.5): + /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.22.9): resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 dev: true - /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.21.5): + /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.22.9): resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==} engines: {node: '>=4'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.21.5): + /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.22.9): resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.21.5): + /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.22.9): resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.21.5): + /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.22.9): resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.21.5): + /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.22.9): resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.21.5): + /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.22.9): resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true @@ -1607,54 +1300,44 @@ packages: '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-import-assertions@7.22.5(@babel/core@7.21.5): + /@babel/plugin-syntax-import-assertions@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-import-attributes@7.22.5(@babel/core@7.21.5): + /@babel/plugin-syntax-import-attributes@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.21.5): + /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.22.9): resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.21.5): + /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.22.9): resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.21.5): - resolution: {integrity: sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.21.5 - '@babel/helper-plugin-utils': 7.21.5 - dev: true - /@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.22.9): resolution: {integrity: sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==} engines: {node: '>=6.9.0'} @@ -1662,24 +1345,15 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.9 - '@babel/helper-plugin-utils': 7.21.5 - dev: true - - /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.21.5): - resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.21.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.21.5): - resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==} + /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.22.9): + resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true @@ -1692,39 +1366,30 @@ packages: '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.21.5): + /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.22.9): resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.21.5): + /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.22.9): resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.21.5): + /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.22.9): resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-plugin-utils': 7.22.5 - dev: true - - /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.21.5): - resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true @@ -1737,36 +1402,26 @@ packages: '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.21.5): + /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.22.9): resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.21.5): + /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.22.9): resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.21.5): - resolution: {integrity: sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.21.5 - '@babel/helper-plugin-utils': 7.21.5 - dev: true - /@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.22.9): resolution: {integrity: sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==} engines: {node: '>=6.9.0'} @@ -1774,189 +1429,189 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.9 - '@babel/helper-plugin-utils': 7.21.5 + '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.21.5): + /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.22.9): resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-arrow-functions@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-arrow-functions@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-async-generator-functions@7.22.7(@babel/core@7.21.5): + /@babel/plugin-transform-async-generator-functions@7.22.7(@babel/core@7.22.9): resolution: {integrity: sha512-7HmE7pk/Fmke45TODvxvkxRMV9RazV+ZZzhOL9AG8G29TLrr3jkjwF7uJfxZ30EoXpO+LJkq4oA8NjO2DTnEDg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.21.5) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.21.5) + '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.22.9) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-async-to-generator@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-async-to-generator@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-module-imports': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.21.5) + '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-block-scoped-functions@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-block-scoped-functions@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-block-scoping@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-block-scoping@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-class-properties@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-class-properties@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-class-static-block@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-class-static-block@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.12.0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.21.5) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-classes@7.22.6(@babel/core@7.21.5): + /@babel/plugin-transform-classes@7.22.6(@babel/core@7.22.9): resolution: {integrity: sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-function-name': 7.22.5 '@babel/helper-optimise-call-expression': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.9(@babel/core@7.21.5) + '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.9) '@babel/helper-split-export-declaration': 7.22.6 globals: 11.12.0 dev: true - /@babel/plugin-transform-computed-properties@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-computed-properties@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/template': 7.22.5 dev: true - /@babel/plugin-transform-destructuring@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-destructuring@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-dotall-regex@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-dotall-regex@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-duplicate-keys@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-duplicate-keys@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-dynamic-import@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-dynamic-import@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-exponentiation-operator@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-exponentiation-operator@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-export-namespace-from@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-export-namespace-from@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.22.9) dev: true /@babel/plugin-transform-flow-strip-types@7.21.0(@babel/core@7.22.9): @@ -1970,91 +1625,79 @@ packages: '@babel/plugin-syntax-flow': 7.21.4(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-for-of@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-for-of@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-function-name@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-function-name@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) '@babel/helper-function-name': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-json-strings@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-json-strings@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-literals@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-literals@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-logical-assignment-operators@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-logical-assignment-operators@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.21.5) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-member-expression-literals@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-member-expression-literals@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-modules-amd@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-modules-amd@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) - '@babel/helper-plugin-utils': 7.22.5 - dev: true - - /@babel/plugin-transform-modules-commonjs@7.22.5(@babel/core@7.21.5): - resolution: {integrity: sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.21.5 - '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-simple-access': 7.22.5 dev: true /@babel/plugin-transform-modules-commonjs@7.22.5(@babel/core@7.22.9): @@ -2064,257 +1707,242 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.9 - '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) + '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-simple-access': 7.22.5 dev: true - /@babel/plugin-transform-modules-systemjs@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-modules-systemjs@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) + '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-validator-identifier': 7.22.5 dev: true - /@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-new-target@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-new-target@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-nullish-coalescing-operator@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-nullish-coalescing-operator@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-numeric-separator@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-numeric-separator@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.21.5) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-object-rest-spread@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-object-rest-spread@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: '@babel/compat-data': 7.22.9 - '@babel/core': 7.21.5 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-object-super@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-object-super@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.9(@babel/core@7.21.5) + '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-optional-catch-binding@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-optional-catch-binding@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-optional-chaining@7.22.6(@babel/core@7.21.5): + /@babel/plugin-transform-optional-chaining@7.22.6(@babel/core@7.22.9): resolution: {integrity: sha512-Vd5HiWml0mDVtcLHIoEU5sw6HOUW/Zk0acLs/SAeuLzkGNOPc9DB4nkUajemhCmTIz3eiaKREZn2hQQqF79YTg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.21.5) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-parameters@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-parameters@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-private-methods@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-private-methods@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-private-property-in-object@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-private-property-in-object@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.21.5) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.22.9) dev: true - /@babel/plugin-transform-property-literals@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-property-literals@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-regenerator@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-regenerator@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 regenerator-transform: 0.15.1 dev: true - /@babel/plugin-transform-reserved-words@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-reserved-words@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-shorthand-properties@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-shorthand-properties@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-spread@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-spread@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 dev: true - /@babel/plugin-transform-sticky-regex@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-sticky-regex@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-template-literals@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-template-literals@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-typeof-symbol@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-typeof-symbol@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-typescript@7.21.3(@babel/core@7.21.5): - resolution: {integrity: sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.21.5 - '@babel/helper-annotate-as-pure': 7.18.6 - '@babel/helper-create-class-features-plugin': 7.21.5(@babel/core@7.21.5) - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.21.5) - transitivePeerDependencies: - - supports-color - dev: true - /@babel/plugin-transform-typescript@7.21.3(@babel/core@7.22.9): resolution: {integrity: sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==} engines: {node: '>=6.9.0'} @@ -2322,148 +1950,55 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.22.9 - '@babel/helper-annotate-as-pure': 7.18.6 - '@babel/helper-create-class-features-plugin': 7.21.5(@babel/core@7.22.9) - '@babel/helper-plugin-utils': 7.21.5 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9) + '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.22.9) - transitivePeerDependencies: - - supports-color dev: true - /@babel/plugin-transform-unicode-escapes@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-unicode-escapes@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-biEmVg1IYB/raUO5wT1tgfacCef15Fbzhkx493D3urBI++6hpJ+RFG4SrWMn0NEZLfvilqKf3QDrRVZHo08FYg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-unicode-property-regex@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-unicode-property-regex@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-unicode-regex@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-unicode-regex@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/plugin-transform-unicode-sets-regex@7.22.5(@babel/core@7.21.5): + /@babel/plugin-transform-unicode-sets-regex@7.22.5(@babel/core@7.22.9): resolution: {integrity: sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 dev: true - /@babel/preset-env@7.22.9(@babel/core@7.21.5): - resolution: {integrity: sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/compat-data': 7.22.9 - '@babel/core': 7.21.5 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-validator-option': 7.22.5 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.21.5) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.21.5) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.21.5) - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.21.5) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-syntax-import-attributes': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.21.5) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.21.5) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.21.5) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.21.5) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.21.5) - '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.21.5) - '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-async-generator-functions': 7.22.7(@babel/core@7.21.5) - '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-block-scoped-functions': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-block-scoping': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-class-properties': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-class-static-block': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-classes': 7.22.6(@babel/core@7.21.5) - '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-destructuring': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-duplicate-keys': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-dynamic-import': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-exponentiation-operator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-export-namespace-from': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-for-of': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-function-name': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-json-strings': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-literals': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-logical-assignment-operators': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-member-expression-literals': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-modules-amd': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-modules-systemjs': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-modules-umd': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-new-target': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-nullish-coalescing-operator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-numeric-separator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-object-rest-spread': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-object-super': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-optional-catch-binding': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.21.5) - '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-private-methods': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-private-property-in-object': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-property-literals': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-regenerator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-reserved-words': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-shorthand-properties': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-sticky-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-template-literals': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-typeof-symbol': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-unicode-escapes': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-unicode-property-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.21.5) - '@babel/preset-modules': 0.1.5(@babel/core@7.21.5) - '@babel/types': 7.22.5 - babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.21.5) - babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.21.5) - babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.21.5) - core-js-compat: 3.32.0 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - dev: true - /@babel/preset-env@7.22.9(@babel/core@7.22.9): resolution: {integrity: sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==} engines: {node: '>=6.9.0'} @@ -2472,83 +2007,83 @@ packages: dependencies: '@babel/compat-data': 7.22.9 '@babel/core': 7.22.9 - '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.5) + '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-validator-option': 7.22.5 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.21.5) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.21.5) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.21.5) - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.21.5) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-syntax-import-attributes': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.21.5) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.21.5) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.21.5) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.21.5) - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.21.5) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.21.5) - '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.21.5) - '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-async-generator-functions': 7.22.7(@babel/core@7.21.5) - '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-block-scoped-functions': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-block-scoping': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-class-properties': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-class-static-block': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-classes': 7.22.6(@babel/core@7.21.5) - '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-destructuring': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-duplicate-keys': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-dynamic-import': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-exponentiation-operator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-export-namespace-from': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-for-of': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-function-name': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-json-strings': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-literals': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-logical-assignment-operators': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-member-expression-literals': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-modules-amd': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-modules-systemjs': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-modules-umd': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-new-target': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-nullish-coalescing-operator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-numeric-separator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-object-rest-spread': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-object-super': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-optional-catch-binding': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.21.5) - '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-private-methods': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-private-property-in-object': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-property-literals': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-regenerator': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-reserved-words': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-shorthand-properties': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-sticky-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-template-literals': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-typeof-symbol': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-unicode-escapes': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-unicode-property-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.21.5) - '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.21.5) - '@babel/preset-modules': 0.1.5(@babel/core@7.21.5) + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.22.9) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.9) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.22.9) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.22.9) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-syntax-import-attributes': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.22.9) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.9) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.9) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.9) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.22.9) + '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.22.9) + '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.22.9) + '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-async-generator-functions': 7.22.7(@babel/core@7.22.9) + '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-block-scoped-functions': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-block-scoping': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-class-properties': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-class-static-block': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-classes': 7.22.6(@babel/core@7.22.9) + '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-destructuring': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-duplicate-keys': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-dynamic-import': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-exponentiation-operator': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-export-namespace-from': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-for-of': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-function-name': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-json-strings': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-literals': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-logical-assignment-operators': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-member-expression-literals': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-modules-amd': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-modules-systemjs': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-modules-umd': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-new-target': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-nullish-coalescing-operator': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-numeric-separator': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-object-rest-spread': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-object-super': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-optional-catch-binding': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-optional-chaining': 7.22.6(@babel/core@7.22.9) + '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-private-methods': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-private-property-in-object': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-property-literals': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-regenerator': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-reserved-words': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-shorthand-properties': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-sticky-regex': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-template-literals': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-typeof-symbol': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-unicode-escapes': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-unicode-property-regex': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.9) + '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.22.9) + '@babel/preset-modules': 0.1.5(@babel/core@7.22.9) '@babel/types': 7.22.5 - babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.21.5) - babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.21.5) - babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.21.5) + babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.22.9) + babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.22.9) + babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.22.9) core-js-compat: 3.32.0 semver: 6.3.1 transitivePeerDependencies: @@ -2567,15 +2102,15 @@ packages: '@babel/plugin-transform-flow-strip-types': 7.21.0(@babel/core@7.22.9) dev: true - /@babel/preset-modules@0.1.5(@babel/core@7.21.5): + /@babel/preset-modules@0.1.5(@babel/core@7.22.9): resolution: {integrity: sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.21.5) - '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.21.5) + '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.22.9) + '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.22.9) '@babel/types': 7.22.5 esutils: 2.0.3 dev: true @@ -2592,8 +2127,6 @@ packages: '@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.22.9) '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.22.9) '@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.22.9) - transitivePeerDependencies: - - supports-color dev: true /@babel/register@7.21.0(@babel/core@7.22.9): @@ -2626,15 +2159,6 @@ packages: engines: {node: '>=6.9.0'} dev: true - /@babel/template@7.20.7: - resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/code-frame': 7.22.5 - '@babel/parser': 7.22.7 - '@babel/types': 7.22.5 - dev: true - /@babel/template@7.22.5: resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==} engines: {node: '>=6.9.0'} @@ -2644,24 +2168,6 @@ packages: '@babel/types': 7.22.5 dev: true - /@babel/traverse@7.21.5: - resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/code-frame': 7.22.5 - '@babel/generator': 7.21.5 - '@babel/helper-environment-visitor': 7.21.5 - '@babel/helper-function-name': 7.21.0 - '@babel/helper-hoist-variables': 7.18.6 - '@babel/helper-split-export-declaration': 7.18.6 - '@babel/parser': 7.22.7 - '@babel/types': 7.22.5 - debug: 4.3.4 - globals: 11.12.0 - transitivePeerDependencies: - - supports-color - dev: true - /@babel/traverse@7.22.8: resolution: {integrity: sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==} engines: {node: '>=6.9.0'} @@ -5232,7 +4738,7 @@ packages: hasBin: true dependencies: '@babel/core': 7.22.9 - '@babel/preset-env': 7.22.9(@babel/core@7.21.5) + '@babel/preset-env': 7.22.9(@babel/core@7.22.9) '@babel/types': 7.22.5 '@ndelangen/get-tarball': 3.0.7 '@storybook/codemod': 7.2.1 @@ -6415,9 +5921,9 @@ packages: vite: ^4.0.0 vue: ^3.0.0 dependencies: - '@babel/core': 7.21.5 - '@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.21.5) - '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.22.9) + '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.22.9) vite: 4.3.5(@types/node@18.17.1) vue: 3.3.4 transitivePeerDependencies: @@ -6536,13 +6042,13 @@ packages: resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==} dev: true - /@vue/babel-plugin-jsx@1.1.1(@babel/core@7.21.5): + /@vue/babel-plugin-jsx@1.1.1(@babel/core@7.22.9): resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==} dependencies: - '@babel/helper-module-imports': 7.21.4 - '@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.21.5) - '@babel/template': 7.20.7 - '@babel/traverse': 7.21.5 + '@babel/helper-module-imports': 7.22.5 + '@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.22.9) + '@babel/template': 7.22.5 + '@babel/traverse': 7.22.8 '@babel/types': 7.22.5 '@vue/babel-helper-vue-transform-on': 1.0.2 camelcase: 6.3.0 @@ -7237,38 +6743,38 @@ packages: - supports-color dev: true - /babel-plugin-polyfill-corejs2@0.4.5(@babel/core@7.21.5): + /babel-plugin-polyfill-corejs2@0.4.5(@babel/core@7.22.9): resolution: {integrity: sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: '@babel/compat-data': 7.22.9 - '@babel/core': 7.21.5 - '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.22.9) semver: 6.3.1 transitivePeerDependencies: - supports-color dev: true - /babel-plugin-polyfill-corejs3@0.8.3(@babel/core@7.21.5): + /babel-plugin-polyfill-corejs3@0.8.3(@babel/core@7.22.9): resolution: {integrity: sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.22.9) core-js-compat: 3.32.0 transitivePeerDependencies: - supports-color dev: true - /babel-plugin-polyfill-regenerator@0.5.2(@babel/core@7.21.5): + /babel-plugin-polyfill-regenerator@0.5.2(@babel/core@7.22.9): resolution: {integrity: sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.21.5 - '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.21.5) + '@babel/core': 7.22.9 + '@babel/helper-define-polyfill-provider': 0.4.2(@babel/core@7.22.9) transitivePeerDependencies: - supports-color dev: true @@ -7396,9 +6902,9 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001481 - electron-to-chromium: 1.4.377 - node-releases: 2.0.10 + caniuse-lite: 1.0.30001517 + electron-to-chromium: 1.4.477 + node-releases: 2.0.13 update-browserslist-db: 1.0.11(browserslist@4.21.5) dev: true @@ -7526,8 +7032,8 @@ packages: /caniuse-api@3.0.0: resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==} dependencies: - browserslist: 4.21.5 - caniuse-lite: 1.0.30001481 + browserslist: 4.21.10 + caniuse-lite: 1.0.30001517 lodash.memoize: 4.1.2 lodash.uniq: 4.5.0 dev: true @@ -8538,10 +8044,6 @@ packages: jake: 10.8.5 dev: true - /electron-to-chromium@1.4.377: - resolution: {integrity: sha512-H3BYG6DW5Z+l0xcfXaicJGxrpA4kMlCxnN71+iNX+dBLkRMOdVJqFJiAmbNZZKA1zISpRg17JR03qGifXNsJtw==} - dev: true - /electron-to-chromium@1.4.477: resolution: {integrity: sha512-shUVy6Eawp33dFBFIoYbIwLHrX0IZ857AlH9ug2o4rvbWmpaCUdBpQ5Zw39HRrfzAFm4APJE9V+E2A/WB0YqJw==} dev: true @@ -11625,10 +11127,6 @@ packages: resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==} dev: true - /node-releases@2.0.10: - resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==} - dev: true - /node-releases@2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} dev: true @@ -12311,7 +11809,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.5 + browserslist: 4.21.10 caniuse-api: 3.0.0 colord: 2.9.3 postcss: 8.4.27 @@ -12324,7 +11822,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.5 + browserslist: 4.21.10 postcss: 8.4.27 postcss-value-parser: 4.2.0 dev: true @@ -12468,7 +11966,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.5 + browserslist: 4.21.10 caniuse-api: 3.0.0 cssnano-utils: 4.0.0(postcss@8.4.27) postcss: 8.4.27 @@ -12503,7 +12001,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.5 + browserslist: 4.21.10 cssnano-utils: 4.0.0(postcss@8.4.27) postcss: 8.4.27 postcss-value-parser: 4.2.0 @@ -12646,7 +12144,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.5 + browserslist: 4.21.10 postcss: 8.4.27 postcss-value-parser: 4.2.0 dev: true @@ -12688,7 +12186,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.5 + browserslist: 4.21.10 caniuse-api: 3.0.0 postcss: 8.4.27 dev: true @@ -13990,7 +13488,7 @@ packages: peerDependencies: postcss: ^8.2.15 dependencies: - browserslist: 4.21.5 + browserslist: 4.21.10 postcss: 8.4.27 postcss-selector-parser: 6.0.11 dev: true @@ -14860,7 +14358,7 @@ packages: resolution: {integrity: sha512-z219Z65rOGD6jXIvIhpZFfwWdqQckB8sdZec2NO+TkcH1Bph7gL0hwLzRJs1KsOo4Jz4mF9guBXhsEnyEBGVfw==} hasBin: true dependencies: - '@babel/core': 7.21.5 + '@babel/core': 7.22.9 '@babel/standalone': 7.21.7 '@babel/types': 7.22.5 defu: 6.1.2 diff --git a/scripts/dev.ts b/scripts/dev.ts index b842d0eee..73bc935e2 100644 --- a/scripts/dev.ts +++ b/scripts/dev.ts @@ -37,12 +37,7 @@ async function deleteAllPackageDists() { console.log('finished deleting dist folders ✅') console.log('building components 🏗') - try { - execSync('pnpm build', { stdio: 'inherit' }) - } - catch (error) { - console.log('build problem 🚨') - } + execSync('pnpm build', { stdio: 'inherit' }) console.log('finished building components ✅') watchMode() @@ -76,12 +71,7 @@ function watchMode() { ], ignoreInitial: true, }).on('all', async (event, path) => { - try { - await whereComponent(path) - } - catch (error) { - console.log('build problem 🚨') - } + await whereComponent(path) }).once('ready', () => { console.log('watch mode active 🚀') }).prependListener('unlinkDir', async (path) => { From 703bdee03d7820aa2301562b8d71253b2718d143 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Mon, 14 Aug 2023 05:52:53 +0300 Subject: [PATCH 10/23] refaktor: struct --- .../dismissable-layer/src/DismissableLayer.ts | 217 ++++++++---------- .../src/DismissableLayerBranch.ts | 34 +-- .../src/stories/DismissableLayer.vue | 12 +- .../components/dismissable-layer/src/util.ts | 31 ++- 4 files changed, 123 insertions(+), 171 deletions(-) diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts index 366106320..083e6ca23 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.ts @@ -10,49 +10,51 @@ import type { InstanceTypeRef, MergeProps, } from '@oku-ui/primitive' -import { Primitive } from '@oku-ui/primitive' +import { Primitive, PrimitiveProps } from '@oku-ui/primitive' import type { PropType, Ref } from 'vue' import { computed, defineComponent, h, + provide, ref, toRefs, - toValue, - unref, - watch, watchEffect, } from 'vue' -import type { Scope } from '@oku-ui/provide' -import { createProvideScope } from '@oku-ui/provide' +import { ScopePropObject } from '@oku-ui/provide' import { composeEventHandlers } from '@oku-ui/utils' -import type { DismissableLayerBranchElement } from './DismissableLayerBranch' -import { useFocusOutside, usePointerDownOutside } from './util' +import { dispatchUpdate, useFocusOutside, usePointerDownOutside } from './util' /* ------------------------------------------------------------------------------------------------- * DismissableLayer * ----------------------------------------------------------------------------------------------- */ -export const CONTEXT_UPDATE = 'dismissableLayer.update' +export const INJECT_UPDATE = 'dismissableLayer.update' export const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside' export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside' let originalBodyPointerEvents: string export const DISMISSABLE_NAME = 'OkuDismissableLayer' - +export const DismissableLayerProvideKey = Symbol('DismissableLayerProvide') type DismissableLayerElement = ElementType<'div'> +type _ElDismissableLayerElement = HTMLDivElement -type DismissableLayerContextValue = { - layers: Ref> - layersWithOutsidePointerEventsDisabled: Ref> - branches: Ref> +export type DismissableLayerProvideValue = { + layers: Ref> + layersWithOutsidePointerEventsDisabled: Ref> + branches: Ref> } -export type PointerDownOutsideEvent = CustomEvent<{ - originalEvent: PointerEvent -}> - -export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }> +export type PointerDownOutsideEvent = +CustomEvent<{ originalEvent: PointerEvent }> +export type FocusOutsideEvent = +CustomEvent<{ originalEvent: FocusEvent }> +export type FocusCaptureEvent = +CustomEvent<{ originalEvent: FocusEvent }> +export type FocusBlurCaptureEvent = +CustomEvent<{ originalEvent: FocusEvent }> +export type PointerDownCaptureEvent = +CustomEvent<{ originalEvent: PointerEvent }> interface DismissableLayerProps extends IPrimitiveProps { /** @@ -90,12 +92,6 @@ interface DismissableLayerProps extends IPrimitiveProps { onDismiss?: () => void } -const [createDismissableLayerProvide, _createDismissableLayerScope] - = createProvideScope(DISMISSABLE_NAME) - -const [dismissableLayerProvider, useDismissableLayerInject] - = createDismissableLayerProvide(DISMISSABLE_NAME) - const DismissableLayer = defineComponent({ name: DISMISSABLE_NAME, inheritAttrs: false, @@ -121,24 +117,32 @@ const DismissableLayer = defineComponent({ required: false, }, onDismiss: { + type: Function as PropType, + required: false, + }, + onFocusCapture: { type: Function as PropType<() => void>, required: false, }, - asChild: { - type: Boolean, - default: undefined, + onBlurCapture: { + type: Function as PropType<() => void>, + required: false, }, - scopeDismissableLayer: { - type: Object as unknown as PropType, + onPointerDownCapture: { + type: Function as PropType<() => void>, required: false, }, + ...PrimitiveProps, + scopeDismissableLayer: { + ...ScopePropObject, + }, }, emits: [ - 'onFocusOutside', - 'onDismiss', - 'onPointerDownOutside', - 'onInteractOutside', - 'onEscapeKeyDown', + 'focusOutside', + 'dismiss', + 'pointerDownOutside', + 'interactOutside', + 'escapeKeyDown', ], setup(props, { attrs, emit }) { const { @@ -148,31 +152,20 @@ const DismissableLayer = defineComponent({ onInteractOutside, onPointerDownOutside, disableOutsidePointerEvents, - scopeDismissableLayer, - asChild, } = toRefs(props) - const { ...dismissableLayerAttrs } = attrs + const _layers = ref(new Set<_ElDismissableLayerElement>()) + const layersWithOutsidePointerEventsDisabled = ref(new Set<_ElDismissableLayerElement>()) + const branches = ref(new Set<_ElDismissableLayerElement>()) - const layers = ref>(new Set()) - - const layersWithOutsidePointerEventsDisabled = ref< - Set - >(new Set()) + const layers = computed(() => Array.from(_layers.value)) - const branches = ref>(new Set()) - - dismissableLayerProvider({ - layers, + provide(DismissableLayerProvideKey, { + layers: _layers, layersWithOutsidePointerEventsDisabled, branches, - scope: scopeDismissableLayer.value, }) - const context = toValue( - useDismissableLayerInject(DISMISSABLE_NAME, scopeDismissableLayer.value), - ) - const node = ref | null>(null) const forwardedRef = useForwardRef() @@ -182,47 +175,31 @@ const DismissableLayer = defineComponent({ () => node.value?.$el?.ownerDocument ?? globalThis?.document, ) - watch( - () => context, - () => { - if (context?.layers.value) - layers.value = context.layers.value - if (context?.layersWithOutsidePointerEventsDisabled.value) { - layersWithOutsidePointerEventsDisabled.value - = context?.layersWithOutsidePointerEventsDisabled.value - } - }, - { immediate: true, deep: true }, - ) + const highestLayerWithOutsidePointerEventsDisabled = computed(() => { + const [highestLayerWithOutsidePointerEventsDisabled] = [...layersWithOutsidePointerEventsDisabled.value].slice(-1) + return highestLayerWithOutsidePointerEventsDisabled + }) - const isBodyPointerEventsDisabled = computed( - () => context!.layersWithOutsidePointerEventsDisabled.value.size > 0, - ) + const highestLayerWithOutsidePointerEventsDisabledIndex = computed(() => layers.value.indexOf(highestLayerWithOutsidePointerEventsDisabled.value)) const index = computed(() => { - return node.value - ? Array.from(layers.value).indexOf(node.value as any) + return node.value?.$el + ? layers.value.indexOf(node.value.$el) : -1 }) - const isPointerEventsEnabled = computed(() => { - const layers = Array.from(context.layers.value) - - const [highestLayerWithOutsidePointerEventsDisabled] = [ - ...context.layersWithOutsidePointerEventsDisabled.value, - ].slice(-1) - - const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf( - highestLayerWithOutsidePointerEventsDisabled, - ) + const isBodyPointerEventsDisabled = computed( + () => layersWithOutsidePointerEventsDisabled.value.size > 0, + ) - return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex + const isPointerEventsEnabled = computed(() => { + return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex.value }) const pointerDownOutside = usePointerDownOutside((event) => { const target = event.target as HTMLElement - const isPointerDownOnBranch = [...context.branches.value].some( - (branch: any) => branch.contains(target), + const isPointerDownOnBranch = [...branches.value].some( + branch => branch.contains(target), ) if (!isPointerEventsEnabled.value || isPointerDownOnBranch) @@ -231,18 +208,18 @@ const DismissableLayer = defineComponent({ onPointerDownOutside.value?.(event) onInteractOutside.value?.(event) - emit('onPointerDownOutside', event) - emit('onInteractOutside', event) + emit('pointerDownOutside', event) + emit('interactOutside', event) if (!event.defaultPrevented) { onDismiss.value?.() - emit('onDismiss') + emit('dismiss') } - }, ownerDocument) + }, ownerDocument.value) const focusOutside = useFocusOutside((event) => { const target = event.target as HTMLElement - const isFocusInBranch = [...context.branches.value].some((branch: any) => + const isFocusInBranch = [...branches.value].some(branch => branch.contains(target), ) @@ -252,52 +229,54 @@ const DismissableLayer = defineComponent({ onFocusOutside.value?.(event) onInteractOutside.value?.(event) - emit('onFocusOutside', event) - emit('onInteractOutside', event) + emit('focusOutside', event) + emit('interactOutside', event) if (!event.defaultPrevented) { onDismiss.value?.() - emit('onDismiss') + emit('dismiss') } - }, ownerDocument) + }, ownerDocument.value) useEscapeKeydown((event) => { - const isHighestLayer = index.value === context.layers.value.size - 1 + const isHighestLayer = index.value === _layers.value.size - 1 if (!isHighestLayer) return onEscapeKeyDown.value?.(event) - emit('onEscapeKeyDown', event) + emit('escapeKeyDown', event) if (!event.defaultPrevented && onDismiss) { event.preventDefault() onDismiss.value?.() - emit('onDismiss') + emit('dismiss') } - }, unref(ownerDocument)) + }, ownerDocument.value) watchEffect((onInvalidate) => { - if (!node.value) + if (!node.value?.$el) return if (disableOutsidePointerEvents.value) { - if (context.layersWithOutsidePointerEventsDisabled.value.size === 0) { + if (layersWithOutsidePointerEventsDisabled.value.size === 0) { originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents ownerDocument.value.body.style.pointerEvents = 'none' } - context.layersWithOutsidePointerEventsDisabled.value.add( - node.value as any, + layersWithOutsidePointerEventsDisabled.value.add( + node.value.$el, ) } - context.layers.value.add(node.value as any) + _layers.value.add(node.value.$el) + + dispatchUpdate() onInvalidate(() => { if ( disableOutsidePointerEvents.value - && context.layersWithOutsidePointerEventsDisabled.value.size === 1 + && layersWithOutsidePointerEventsDisabled.value.size === 1 ) { ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents @@ -309,32 +288,34 @@ const DismissableLayer = defineComponent({ * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect * because a change to `disableOutsidePointerEvents` would remove this layer from the stack * and add it to the end again so the layering order wouldn't be _creation order_. - * We only want them to be removed from context stacks when unmounted. + * We only want them to be removed from inject stacks when unmounted. */ watchEffect((onInvalidate) => { onInvalidate(() => { - if (!node.value) + if (!node.value?.$el) return - context.layers.value.delete(node.value as any) - context.layersWithOutsidePointerEventsDisabled.value.delete( - node.value as any, + _layers.value.delete(node.value.$el) + layersWithOutsidePointerEventsDisabled.value.delete( + node.value.$el, ) + dispatchUpdate() }) }) watchEffect((onInvalidate) => { const handleUpdate = () => {} - document.addEventListener(CONTEXT_UPDATE, handleUpdate) + document.addEventListener(INJECT_UPDATE, handleUpdate) onInvalidate(() => - document.removeEventListener(CONTEXT_UPDATE, handleUpdate), + document.removeEventListener(INJECT_UPDATE, handleUpdate), ) }) const originalReturn = () => h(Primitive.div, { + ...dismissableLayerAttrs, ref: composedRefs, - asChild: asChild.value, + asChild: props.asChild, style: { pointerEvents: isBodyPointerEventsDisabled.value ? isPointerEventsEnabled.value @@ -343,23 +324,13 @@ const DismissableLayer = defineComponent({ : undefined, ...(dismissableLayerAttrs.style as CSSPropertyRule), }, - ...dismissableLayerAttrs, - onFocusCapture: composeEventHandlers( - dismissableLayerAttrs?.onFocusCapture as ( - event: GlobalEventHandlersEventMap['focus'] - ) => void, + onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture, ), - onBlurCapture: composeEventHandlers( - dismissableLayerAttrs?.onBlurCapture as ( - event: GlobalEventHandlersEventMap['blur'] - ) => void, + onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture, ), - onPointerDownCapture: composeEventHandlers( - dismissableLayerAttrs?.onPointerDownCapture as ( - event: GlobalEventHandlersEventMap['pointerdown'] - ) => void, + onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture, ), }) @@ -383,6 +354,6 @@ type InstanceDismissableLayerType = InstanceTypeRef< const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer & (new () => { $props: _DismissableLayer }) -export { OkuDismissableLayer, useDismissableLayerInject } +export { OkuDismissableLayer } export type { InstanceDismissableLayerType, DismissableLayerProps } diff --git a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts index cd30049d0..6d0724e4b 100644 --- a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts +++ b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts @@ -6,13 +6,11 @@ import type { InstanceTypeRef, MergeProps, } from '@oku-ui/primitive' -import type { PropType } from 'vue' -import { defineComponent, h, ref, toRefs, toValue, watchEffect } from 'vue' -import type { Scope } from '@oku-ui/provide' +import { defineComponent, h, inject, ref, watchEffect } from 'vue' import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable' +import type { DismissableLayerProvideValue } from './DismissableLayer' import { - DISMISSABLE_NAME, - useDismissableLayerInject, + DismissableLayerProvideKey, } from './DismissableLayer' /* ------------------------------------------------------------------------------------------------- @@ -34,42 +32,30 @@ const DismissableLayerBranch = defineComponent({ type: Boolean, default: undefined, }, - scopeDismissableLayerbranch: { - type: Object as unknown as PropType, - required: false, - }, }, setup(props, { attrs }) { - const { scopeDismissableLayerbranch, asChild } = toRefs(props) - - const { ...dismissableLayerBranchAttrs } = attrs - - const context = toValue( - useDismissableLayerInject( - DISMISSABLE_NAME, - scopeDismissableLayerbranch.value, - ), - ) + const _inject = inject(DismissableLayerProvideKey) as DismissableLayerProvideValue - const node = ref | null>(null) + const node = ref | null>() const forwardedRef = useForwardRef() const composedRefs = useComposedRefs(node, forwardedRef) watchEffect((onInvalidate) => { if (node.value) - context.branches.value.add(node.value as any) + _inject.branches.value.add(node.value.$el) onInvalidate(() => { - context.branches.value.delete(node.value as any) + if (node.value && node.value.$el) + _inject.branches.value.delete(node.value.$el) }) }) const originalReturn = () => h(Primitive.div, { ref: composedRefs, - asChild: asChild.value, - ...dismissableLayerBranchAttrs, + asChild: props.asChild, + ...attrs, }) return originalReturn diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue index 20d19a2be..65bf48da0 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue @@ -1,9 +1,8 @@ + + diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts index f9c1e5545..1a9b5e12b 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts @@ -41,3 +41,35 @@ export const Basic: Story = { `, }), } + +export const Nested: Story = { + args: { + template: '#2', + }, + + render: (args: any) => ({ + components: { OkuDismissableLayerComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} + +export const WithFocusScope: Story = { + args: { + template: '#3', + }, + + render: (args: any) => ({ + components: { OkuDismissableLayerComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue index 65bf48da0..caabac676 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue @@ -1,9 +1,10 @@ diff --git a/packages/components/dismissable-layer/src/stories/DummyDialog.vue b/packages/components/dismissable-layer/src/stories/DummyDialog.vue new file mode 100644 index 000000000..9862a530e --- /dev/null +++ b/packages/components/dismissable-layer/src/stories/DummyDialog.vue @@ -0,0 +1,88 @@ + + + diff --git a/packages/components/focus-guards/README.md b/packages/components/focus-guards/README.md new file mode 100644 index 000000000..a02c8239a --- /dev/null +++ b/packages/components/focus-guards/README.md @@ -0,0 +1,10 @@ +# `@oku-ui/focus-guards` + +## Installation + +```sh +$ pnpm add @oku-ui/focus-guards +``` + +## Usage +... diff --git a/packages/components/focus-guards/build.config.ts b/packages/components/focus-guards/build.config.ts new file mode 100644 index 000000000..b972b9a78 --- /dev/null +++ b/packages/components/focus-guards/build.config.ts @@ -0,0 +1,12 @@ +import { defineBuildConfig } from 'unbuild' + +export default defineBuildConfig({ + entries: [ + { + builder: 'mkdist', + input: './src/', + pattern: ['**/!(*.test|*.stories).ts'], + }, + ], + declaration: true, +}) diff --git a/packages/components/focus-guards/package.json b/packages/components/focus-guards/package.json new file mode 100644 index 000000000..7e6319c7b --- /dev/null +++ b/packages/components/focus-guards/package.json @@ -0,0 +1,47 @@ +{ + "name": "@oku-ui/focus-guards", + "type": "module", + "version": "0.0.0", + "license": "MIT", + "source": "src/index.ts", + "funding": "https://github.com/sponsors/productdevbook", + "homepage": "https://oku-ui.com/primitives", + "repository": { + "type": "git", + "url": "git+https://github.com/oku-ui/primitives.git", + "directory": "packages/components/focus-guards" + }, + "bugs": { + "url": "https://github.com/oku-ui/primitives/issues" + }, + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs" + } + }, + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "files": [ + "dist" + ], + "engines": { + "node": ">=18" + }, + "scripts": { + "build": "tsup", + "dev": "tsup --watch" + }, + "peerDependencies": { + "vue": "^3.3.0" + }, + "dependencies": { + "@oku-ui/primitive": "latest" + }, + "devDependencies": { + "tsconfig": "workspace:^" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/components/focus-guards/src/FocusGuards.ts b/packages/components/focus-guards/src/FocusGuards.ts new file mode 100644 index 000000000..aa280c128 --- /dev/null +++ b/packages/components/focus-guards/src/FocusGuards.ts @@ -0,0 +1,66 @@ +import { defineComponent, h, watchEffect } from 'vue' +import type { ElementType } from '@oku-ui/primitive' +import { Primitive } from '@oku-ui/primitive' + +export type FocusGuardsElement = ElementType<'div'> + +/** Number of components which have requested interest to have focus guards */ +let count = 0 + +const focusGuards = defineComponent({ + setup(_props, { slots }) { + useFocusGuards() + + const originalReturn = () => h(Primitive.div, () => slots.default?.()) + + return originalReturn + }, +}) + +/** + * Injects a pair of focus guards at the edges of the whole DOM tree + * to ensure `focusin` & `focusout` events can be caught consistently. + */ +function useFocusGuards() { + watchEffect((onInvalidate) => { + const edgeGuards = document.querySelectorAll( + '[data-oku-radix-focus-guard]', + ) + + document.body.insertAdjacentElement( + 'afterbegin', + edgeGuards[0] ?? createFocusGuard(), + ) + + document.body.insertAdjacentElement( + 'beforeend', + edgeGuards[1] ?? createFocusGuard(), + ) + + count++ + + onInvalidate(() => { + if (count === 1) { + document + .querySelectorAll('[data-oku-radix-focus-guard]') + .forEach(node => node.remove()) + } + + count-- + }) + }) +} + +function createFocusGuard() { + const element = document.createElement('span') + element.setAttribute('data-oku-radix-focus-guard', '') + element.tabIndex = 0 + element.style.cssText + = 'outline: none; opacity: 0; position: fixed; pointer-events: none' + return element +} + +export const OkuFocusGuards = focusGuards as typeof focusGuards & +(new () => { $props: Partial }) + +export { useFocusGuards } diff --git a/packages/components/focus-guards/src/focus-guards.test.ts b/packages/components/focus-guards/src/focus-guards.test.ts new file mode 100644 index 000000000..505455eef --- /dev/null +++ b/packages/components/focus-guards/src/focus-guards.test.ts @@ -0,0 +1,92 @@ +import { beforeEach, describe, expect, test } from 'vitest' +import { mount } from '@vue/test-utils' +import { OkuFocusGuards } from './FocusGuards' + +describe('OkuFocusGuards', () => { + beforeEach(() => { + document.body.innerHTML = '' + }) + + test('adds focus guards when used', async () => { + const wrapper = mount(OkuFocusGuards) + + await wrapper.vm.$nextTick() + + const edgeGuards = document.querySelectorAll( + '[data-oku-radix-focus-guard]', + ) + + expect(edgeGuards.length).toBe(2) + + const firstGuard = edgeGuards[0] + const lastGuard = edgeGuards[1] + + expect(firstGuard.getAttribute('data-oku-radix-focus-guard')).toBe('') + expect(lastGuard.getAttribute('data-oku-radix-focus-guard')).toBe('') + + wrapper.unmount() + }) + + test('removes focus guards on unmount if count is 1', async () => { + const mockGuard = document.createElement('span') + mockGuard.setAttribute('data-oku-radix-focus-guard', '') + document.body.appendChild(mockGuard) + + const wrapper = mount(OkuFocusGuards) + + await wrapper.vm.$nextTick() + + wrapper.unmount() + + const edgeGuards = document.querySelectorAll( + '[data-oku-radix-focus-guard]', + ) + expect(edgeGuards.length).toBe(0) + }) + + test('does not remove focus guards on unmount if count is greater than 1', async () => { + const mockGuard = document.createElement('span') + mockGuard.setAttribute('data-oku-radix-focus-guard', '') + document.body.appendChild(mockGuard) + + const wrapper1 = mount(OkuFocusGuards) + const wrapper2 = mount(OkuFocusGuards) + + await wrapper1.vm.$nextTick() + await wrapper2.vm.$nextTick() + + wrapper1.unmount() + + const edgeGuards = document.querySelectorAll( + '[data-oku-radix-focus-guard]', + ) + expect(edgeGuards.length).toBe(1) + + wrapper2.unmount() + }) + + test('adds and removes focus guards in the correct order', async () => { + const wrapper = mount(OkuFocusGuards) + + await wrapper.vm.$nextTick() + + const edgeGuards = document.querySelectorAll( + '[data-oku-radix-focus-guard]', + ) + + expect(edgeGuards.length).toBe(2) + + const firstGuard = edgeGuards[0] + const lastGuard = edgeGuards[1] + + expect(firstGuard.getAttribute('data-oku-radix-focus-guard')).toBe('') + expect(lastGuard.getAttribute('data-oku-radix-focus-guard')).toBe('') + + wrapper.unmount() + + const edgeGuardsAfterUnmount = document.querySelectorAll( + '[data-oku-radix-focus-guard]', + ) + expect(edgeGuardsAfterUnmount.length).toBe(0) + }) +}) diff --git a/packages/components/focus-guards/src/index.ts b/packages/components/focus-guards/src/index.ts new file mode 100644 index 000000000..130361a0a --- /dev/null +++ b/packages/components/focus-guards/src/index.ts @@ -0,0 +1 @@ +export * from './FocusGuards' diff --git a/packages/components/focus-guards/tsconfig.json b/packages/components/focus-guards/tsconfig.json new file mode 100644 index 000000000..723323cf6 --- /dev/null +++ b/packages/components/focus-guards/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "tsconfig/node16.json", + "compilerOptions": { + "baseUrl": "./", + "outDir": "dist" + }, + "include": [ + "src" + ] +} diff --git a/packages/components/focus-guards/tsup.config.ts b/packages/components/focus-guards/tsup.config.ts new file mode 100644 index 000000000..0d3eb9e1c --- /dev/null +++ b/packages/components/focus-guards/tsup.config.ts @@ -0,0 +1,21 @@ +import { defineConfig } from 'tsup' +import pkg from './package.json' + +const external = [ + ...Object.keys(pkg.dependencies || {}), + ...Object.keys(pkg.peerDependencies || {}), +] + +export default defineConfig((options) => { + return [ + { + entryPoints: ['src/index.ts'], + external, + dts: true, + outDir: './dist', + target: 'es2022', + format: ['esm'], + outExtension: () => ({ js: '.mjs' }), + }, + ] +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c485be65..f7349ba56 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,6 +43,9 @@ importers: '@oku-ui/dismissable-layer': specifier: workspace:^ version: link:packages/components/dismissable-layer + '@oku-ui/focus-guards': + specifier: workspace:^ + version: link:packages/components/focus-guards '@oku-ui/focus-scope': specifier: workspace:^ version: link:packages/components/focus-scope @@ -385,6 +388,19 @@ importers: specifier: workspace:^ version: link:../../tsconfig + packages/components/focus-guards: + dependencies: + '@oku-ui/primitive': + specifier: latest + version: link:../../core/primitive + vue: + specifier: ^3.3.0 + version: 3.3.4 + devDependencies: + tsconfig: + specifier: workspace:^ + version: link:../../tsconfig + packages/components/focus-scope: dependencies: '@oku-ui/primitive': From 2136bc0e1cf3ca6dfc55569f0d533a4bd2991fff Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Mon, 21 Aug 2023 08:50:40 +0100 Subject: [PATCH 14/23] feat: add focus guards component --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6c9c05a66..3869ffc06 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "@oku-ui/collection": "workspace:^", "@oku-ui/direction": "workspace:^", "@oku-ui/dismissable-layer": "workspace:^", - "@oku-ui/focus-scope": "workspace:^", "@oku-ui/focus-guards": "workspace:^", + "@oku-ui/focus-scope": "workspace:^", "@oku-ui/label": "workspace:^", "@oku-ui/popper": "workspace:^", "@oku-ui/portal": "workspace:^", From bd575dd3f88a79ea7ac84bb5bf94137ea7fb3b24 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 21 Aug 2023 07:55:42 +0000 Subject: [PATCH 15/23] fix: lint issues --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b7478ab4c..c3792c7e5 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "@oku-ui/collection": "workspace:^", "@oku-ui/direction": "workspace:^", "@oku-ui/dismissable-layer": "workspace:^", - "@oku-ui/focus-guards": "workspace:^", "@oku-ui/focus-group": "workspace:^", + "@oku-ui/focus-guards": "workspace:^", "@oku-ui/focus-scope": "workspace:^", "@oku-ui/label": "workspace:^", "@oku-ui/popper": "workspace:^", From d26c26af83bfaf83abe97c57b6bc883d64f3d36e Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Mon, 21 Aug 2023 09:10:42 +0100 Subject: [PATCH 16/23] chore: update --- package.json | 2 +- .../components/dismissable-layer/README.md | 6 ++-- .../src/DismissableLayer.test.ts | 31 +++++++++++++++++-- 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b7478ab4c..c3792c7e5 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "@oku-ui/collection": "workspace:^", "@oku-ui/direction": "workspace:^", "@oku-ui/dismissable-layer": "workspace:^", - "@oku-ui/focus-guards": "workspace:^", "@oku-ui/focus-group": "workspace:^", + "@oku-ui/focus-guards": "workspace:^", "@oku-ui/focus-scope": "workspace:^", "@oku-ui/label": "workspace:^", "@oku-ui/popper": "workspace:^", diff --git a/packages/components/dismissable-layer/README.md b/packages/components/dismissable-layer/README.md index 5ed5eadff..2cbbc4957 100644 --- a/packages/components/dismissable-layer/README.md +++ b/packages/components/dismissable-layer/README.md @@ -1,10 +1,10 @@ -# `@oku-ui/example` +# `@oku-ui/dismissable-layer` ## Installation ```sh -$ pnpm add @oku-ui/example +$ pnpm add @oku-ui/dismissable-layer ``` ## Usage -... \ No newline at end of file +... diff --git a/packages/components/dismissable-layer/src/DismissableLayer.test.ts b/packages/components/dismissable-layer/src/DismissableLayer.test.ts index 80096f2dd..b07c4ac85 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.test.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.test.ts @@ -2,9 +2,36 @@ import { mount } from '@vue/test-utils' import { describe, expect, it } from 'vitest' import { OkuDismissableLayer } from './DismissableLayer' -describe('DismissableLayer', () => { - it('should render correctly', () => { +// skipping this test for now. There's an error "TypeError: Cannot read properties of undefined (reading 'devtoolsRawSetupState')" +describe.skip('DismissableLayer', () => { + it('renders the component correctly', () => { const wrapper = mount(OkuDismissableLayer) + + // You can add more specific assertions based on your component's structure and props expect(wrapper.exists()).toBe(true) + expect(wrapper.find('div').exists()).toBe(true) + }) + + it('emits events when interactions happen outside the layer', async () => { + const wrapper = mount(OkuDismissableLayer) + + // Simulate a click outside the layer + await wrapper.trigger('pointerdown', { target: document.body }) + + // Check if the emitted events are correct + expect(wrapper.emitted('pointerDownOutside')).toHaveLength(1) + expect(wrapper.emitted('interactOutside')).toHaveLength(1) + expect(wrapper.emitted('dismiss')).toHaveLength(1) + }) + + it('emits events when Escape key is pressed', async () => { + const wrapper = mount(OkuDismissableLayer) + + // Simulate pressing the Escape key + await wrapper.trigger('keydown', { key: 'Escape' }) + + // Check if the emitted events are correct + expect(wrapper.emitted('escapeKeyDown')).toHaveLength(1) + expect(wrapper.emitted('dismiss')).toHaveLength(1) }) }) From b3a31a2d0e00c7e05d1cd7333e2e69941badfa46 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Mon, 21 Aug 2023 12:50:39 +0300 Subject: [PATCH 17/23] fix: focus guards --- package.json | 1 - packages/components/focus-guards/README.md | 10 -- packages/components/focus-guards/package.json | 47 ------- .../focus-guards/src/FocusGuards.ts | 66 --------- .../focus-guards/src/focus-guards.test.ts | 92 ------------ packages/components/focus-guards/src/index.ts | 1 - .../components/focus-guards/tsconfig.json | 10 -- .../components/focus-guards/tsup.config.ts | 21 --- packages/core/focus-group/build.config.ts | 12 -- .../core/focus-group/src/focusGroup.test.ts | 42 ------ .../{focus-group => focus-guards}/README.md | 0 .../focus-guards/build.config.ts | 0 .../package.json | 4 +- .../core/focus-guards/src/focusGuards.test.ts | 131 ++++++++++++++++++ .../src/focusGuards.ts} | 4 +- .../src/index.ts | 4 +- .../src/utils.ts | 0 .../tsconfig.json | 0 .../tsup.config.ts | 0 pnpm-lock.yaml | 20 +-- 20 files changed, 139 insertions(+), 326 deletions(-) delete mode 100644 packages/components/focus-guards/README.md delete mode 100644 packages/components/focus-guards/package.json delete mode 100644 packages/components/focus-guards/src/FocusGuards.ts delete mode 100644 packages/components/focus-guards/src/focus-guards.test.ts delete mode 100644 packages/components/focus-guards/src/index.ts delete mode 100644 packages/components/focus-guards/tsconfig.json delete mode 100644 packages/components/focus-guards/tsup.config.ts delete mode 100644 packages/core/focus-group/build.config.ts delete mode 100644 packages/core/focus-group/src/focusGroup.test.ts rename packages/core/{focus-group => focus-guards}/README.md (100%) rename packages/{components => core}/focus-guards/build.config.ts (100%) rename packages/core/{focus-group => focus-guards}/package.json (91%) create mode 100644 packages/core/focus-guards/src/focusGuards.test.ts rename packages/core/{focus-group/src/focusGroup.ts => focus-guards/src/focusGuards.ts} (70%) rename packages/core/{focus-group => focus-guards}/src/index.ts (56%) rename packages/core/{focus-group => focus-guards}/src/utils.ts (100%) rename packages/core/{focus-group => focus-guards}/tsconfig.json (100%) rename packages/core/{focus-group => focus-guards}/tsup.config.ts (100%) diff --git a/package.json b/package.json index c3792c7e5..014cd09fd 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "@oku-ui/collection": "workspace:^", "@oku-ui/direction": "workspace:^", "@oku-ui/dismissable-layer": "workspace:^", - "@oku-ui/focus-group": "workspace:^", "@oku-ui/focus-guards": "workspace:^", "@oku-ui/focus-scope": "workspace:^", "@oku-ui/label": "workspace:^", diff --git a/packages/components/focus-guards/README.md b/packages/components/focus-guards/README.md deleted file mode 100644 index a02c8239a..000000000 --- a/packages/components/focus-guards/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# `@oku-ui/focus-guards` - -## Installation - -```sh -$ pnpm add @oku-ui/focus-guards -``` - -## Usage -... diff --git a/packages/components/focus-guards/package.json b/packages/components/focus-guards/package.json deleted file mode 100644 index 7e6319c7b..000000000 --- a/packages/components/focus-guards/package.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "name": "@oku-ui/focus-guards", - "type": "module", - "version": "0.0.0", - "license": "MIT", - "source": "src/index.ts", - "funding": "https://github.com/sponsors/productdevbook", - "homepage": "https://oku-ui.com/primitives", - "repository": { - "type": "git", - "url": "git+https://github.com/oku-ui/primitives.git", - "directory": "packages/components/focus-guards" - }, - "bugs": { - "url": "https://github.com/oku-ui/primitives/issues" - }, - "exports": { - ".": { - "types": "./dist/index.d.ts", - "import": "./dist/index.mjs" - } - }, - "module": "./dist/index.mjs", - "types": "./dist/index.d.ts", - "files": [ - "dist" - ], - "engines": { - "node": ">=18" - }, - "scripts": { - "build": "tsup", - "dev": "tsup --watch" - }, - "peerDependencies": { - "vue": "^3.3.0" - }, - "dependencies": { - "@oku-ui/primitive": "latest" - }, - "devDependencies": { - "tsconfig": "workspace:^" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/components/focus-guards/src/FocusGuards.ts b/packages/components/focus-guards/src/FocusGuards.ts deleted file mode 100644 index aa280c128..000000000 --- a/packages/components/focus-guards/src/FocusGuards.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { defineComponent, h, watchEffect } from 'vue' -import type { ElementType } from '@oku-ui/primitive' -import { Primitive } from '@oku-ui/primitive' - -export type FocusGuardsElement = ElementType<'div'> - -/** Number of components which have requested interest to have focus guards */ -let count = 0 - -const focusGuards = defineComponent({ - setup(_props, { slots }) { - useFocusGuards() - - const originalReturn = () => h(Primitive.div, () => slots.default?.()) - - return originalReturn - }, -}) - -/** - * Injects a pair of focus guards at the edges of the whole DOM tree - * to ensure `focusin` & `focusout` events can be caught consistently. - */ -function useFocusGuards() { - watchEffect((onInvalidate) => { - const edgeGuards = document.querySelectorAll( - '[data-oku-radix-focus-guard]', - ) - - document.body.insertAdjacentElement( - 'afterbegin', - edgeGuards[0] ?? createFocusGuard(), - ) - - document.body.insertAdjacentElement( - 'beforeend', - edgeGuards[1] ?? createFocusGuard(), - ) - - count++ - - onInvalidate(() => { - if (count === 1) { - document - .querySelectorAll('[data-oku-radix-focus-guard]') - .forEach(node => node.remove()) - } - - count-- - }) - }) -} - -function createFocusGuard() { - const element = document.createElement('span') - element.setAttribute('data-oku-radix-focus-guard', '') - element.tabIndex = 0 - element.style.cssText - = 'outline: none; opacity: 0; position: fixed; pointer-events: none' - return element -} - -export const OkuFocusGuards = focusGuards as typeof focusGuards & -(new () => { $props: Partial }) - -export { useFocusGuards } diff --git a/packages/components/focus-guards/src/focus-guards.test.ts b/packages/components/focus-guards/src/focus-guards.test.ts deleted file mode 100644 index 505455eef..000000000 --- a/packages/components/focus-guards/src/focus-guards.test.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { beforeEach, describe, expect, test } from 'vitest' -import { mount } from '@vue/test-utils' -import { OkuFocusGuards } from './FocusGuards' - -describe('OkuFocusGuards', () => { - beforeEach(() => { - document.body.innerHTML = '' - }) - - test('adds focus guards when used', async () => { - const wrapper = mount(OkuFocusGuards) - - await wrapper.vm.$nextTick() - - const edgeGuards = document.querySelectorAll( - '[data-oku-radix-focus-guard]', - ) - - expect(edgeGuards.length).toBe(2) - - const firstGuard = edgeGuards[0] - const lastGuard = edgeGuards[1] - - expect(firstGuard.getAttribute('data-oku-radix-focus-guard')).toBe('') - expect(lastGuard.getAttribute('data-oku-radix-focus-guard')).toBe('') - - wrapper.unmount() - }) - - test('removes focus guards on unmount if count is 1', async () => { - const mockGuard = document.createElement('span') - mockGuard.setAttribute('data-oku-radix-focus-guard', '') - document.body.appendChild(mockGuard) - - const wrapper = mount(OkuFocusGuards) - - await wrapper.vm.$nextTick() - - wrapper.unmount() - - const edgeGuards = document.querySelectorAll( - '[data-oku-radix-focus-guard]', - ) - expect(edgeGuards.length).toBe(0) - }) - - test('does not remove focus guards on unmount if count is greater than 1', async () => { - const mockGuard = document.createElement('span') - mockGuard.setAttribute('data-oku-radix-focus-guard', '') - document.body.appendChild(mockGuard) - - const wrapper1 = mount(OkuFocusGuards) - const wrapper2 = mount(OkuFocusGuards) - - await wrapper1.vm.$nextTick() - await wrapper2.vm.$nextTick() - - wrapper1.unmount() - - const edgeGuards = document.querySelectorAll( - '[data-oku-radix-focus-guard]', - ) - expect(edgeGuards.length).toBe(1) - - wrapper2.unmount() - }) - - test('adds and removes focus guards in the correct order', async () => { - const wrapper = mount(OkuFocusGuards) - - await wrapper.vm.$nextTick() - - const edgeGuards = document.querySelectorAll( - '[data-oku-radix-focus-guard]', - ) - - expect(edgeGuards.length).toBe(2) - - const firstGuard = edgeGuards[0] - const lastGuard = edgeGuards[1] - - expect(firstGuard.getAttribute('data-oku-radix-focus-guard')).toBe('') - expect(lastGuard.getAttribute('data-oku-radix-focus-guard')).toBe('') - - wrapper.unmount() - - const edgeGuardsAfterUnmount = document.querySelectorAll( - '[data-oku-radix-focus-guard]', - ) - expect(edgeGuardsAfterUnmount.length).toBe(0) - }) -}) diff --git a/packages/components/focus-guards/src/index.ts b/packages/components/focus-guards/src/index.ts deleted file mode 100644 index 130361a0a..000000000 --- a/packages/components/focus-guards/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './FocusGuards' diff --git a/packages/components/focus-guards/tsconfig.json b/packages/components/focus-guards/tsconfig.json deleted file mode 100644 index 723323cf6..000000000 --- a/packages/components/focus-guards/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "tsconfig/node16.json", - "compilerOptions": { - "baseUrl": "./", - "outDir": "dist" - }, - "include": [ - "src" - ] -} diff --git a/packages/components/focus-guards/tsup.config.ts b/packages/components/focus-guards/tsup.config.ts deleted file mode 100644 index 0d3eb9e1c..000000000 --- a/packages/components/focus-guards/tsup.config.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { defineConfig } from 'tsup' -import pkg from './package.json' - -const external = [ - ...Object.keys(pkg.dependencies || {}), - ...Object.keys(pkg.peerDependencies || {}), -] - -export default defineConfig((options) => { - return [ - { - entryPoints: ['src/index.ts'], - external, - dts: true, - outDir: './dist', - target: 'es2022', - format: ['esm'], - outExtension: () => ({ js: '.mjs' }), - }, - ] -}) diff --git a/packages/core/focus-group/build.config.ts b/packages/core/focus-group/build.config.ts deleted file mode 100644 index b972b9a78..000000000 --- a/packages/core/focus-group/build.config.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { defineBuildConfig } from 'unbuild' - -export default defineBuildConfig({ - entries: [ - { - builder: 'mkdist', - input: './src/', - pattern: ['**/!(*.test|*.stories).ts'], - }, - ], - declaration: true, -}) diff --git a/packages/core/focus-group/src/focusGroup.test.ts b/packages/core/focus-group/src/focusGroup.test.ts deleted file mode 100644 index 56cb9b754..000000000 --- a/packages/core/focus-group/src/focusGroup.test.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { describe, expect, it } from 'vitest' -import { mount } from '@vue/test-utils' -import type { Component } from 'vue' -import { h } from 'vue' -import { createFocusGuard } from './utils' -import { OkuFocusGroup } from './' - -const component = { - setup(props, { attrs, slots }) { - return () => h(OkuFocusGroup, { ...attrs }, slots) - }, -} as Component - -describe('Focus Guards', () => { - it('correctly adds and removes focus guards', () => { - const wrapper = mount(component, { - slots: { - default: '

content
', - }, - }) - - // Focus protection elements are checked after first render - const focusGuards = document.querySelectorAll('[data-oku-focus-guard]') - expect(focusGuards.length).toBe(2) // Focus protection element must be added to the first and last - - // Destroy the component and verify that the focus guards are removed - wrapper.unmount() - const remainingFocusGuards = document.querySelectorAll('[data-oku-focus-guard]') - expect(remainingFocusGuards.length).toBe(0) - }) - - it('creates focus guard element correctly', () => { - const focusGuard = createFocusGuard() - expect(focusGuard.tagName).toBe('SPAN') - expect(focusGuard.getAttribute('data-oku-focus-guard')).toBe('') - expect(focusGuard.tabIndex).toBe(0) - expect(focusGuard.style.outline).toBe('none none') - expect(focusGuard.style.opacity).toBe('0') - expect(focusGuard.style.position).toBe('fixed') - expect(focusGuard.style.pointerEvents).toBe('none') - }) -}) diff --git a/packages/core/focus-group/README.md b/packages/core/focus-guards/README.md similarity index 100% rename from packages/core/focus-group/README.md rename to packages/core/focus-guards/README.md diff --git a/packages/components/focus-guards/build.config.ts b/packages/core/focus-guards/build.config.ts similarity index 100% rename from packages/components/focus-guards/build.config.ts rename to packages/core/focus-guards/build.config.ts diff --git a/packages/core/focus-group/package.json b/packages/core/focus-guards/package.json similarity index 91% rename from packages/core/focus-group/package.json rename to packages/core/focus-guards/package.json index 982e6ec8c..fdd9b1113 100644 --- a/packages/core/focus-group/package.json +++ b/packages/core/focus-guards/package.json @@ -1,5 +1,5 @@ { - "name": "@oku-ui/focus-group", + "name": "@oku-ui/focus-guards", "type": "module", "version": "0.2.3", "license": "MIT", @@ -9,7 +9,7 @@ "repository": { "type": "git", "url": "git+https://github.com/oku-ui/primitives.git", - "directory": "packages/core/focus-group" + "directory": "packages/core/focus-guards" }, "bugs": { "url": "https://github.com/oku-ui/primitives/issues" diff --git a/packages/core/focus-guards/src/focusGuards.test.ts b/packages/core/focus-guards/src/focusGuards.test.ts new file mode 100644 index 000000000..70ad0dd7e --- /dev/null +++ b/packages/core/focus-guards/src/focusGuards.test.ts @@ -0,0 +1,131 @@ +import { beforeEach, describe, expect, it, test } from 'vitest' +import { mount } from '@vue/test-utils' +import type { Component } from 'vue' +import { h } from 'vue' +import { createFocusGuard } from './utils' +import { OkuFocusGuards } from './' + +const component = { + setup(props, { attrs, slots }) { + return () => h(OkuFocusGuards, { ...attrs }, slots) + }, +} as Component + +describe('Focus Guards', () => { + it('correctly adds and removes focus guards', () => { + const wrapper = mount(component, { + slots: { + default: '
content
', + }, + }) + + // Focus protection elements are checked after first render + const focusGuards = document.querySelectorAll('[data-oku-focus-guard]') + expect(focusGuards.length).toBe(2) // Focus protection element must be added to the first and last + + // Destroy the component and verify that the focus guards are removed + wrapper.unmount() + const remainingFocusGuards = document.querySelectorAll('[data-oku-focus-guard]') + expect(remainingFocusGuards.length).toBe(0) + }) + + it('creates focus guard element correctly', () => { + const focusGuard = createFocusGuard() + expect(focusGuard.tagName).toBe('SPAN') + expect(focusGuard.getAttribute('data-oku-focus-guard')).toBe('') + expect(focusGuard.tabIndex).toBe(0) + expect(focusGuard.style.outline).toBe('none none') + expect(focusGuard.style.opacity).toBe('0') + expect(focusGuard.style.position).toBe('fixed') + expect(focusGuard.style.pointerEvents).toBe('none') + }) +}) + +describe('OkuFocusGuards', () => { + beforeEach(() => { + document.body.innerHTML = '' + }) + + test('adds focus guards when used', async () => { + const wrapper = mount(OkuFocusGuards) + + await wrapper.vm.$nextTick() + + const edgeGuards = document.querySelectorAll( + '[data-oku-focus-guard]', + ) + + expect(edgeGuards.length).toBe(2) + + const firstGuard = edgeGuards[0] + const lastGuard = edgeGuards[1] + + expect(firstGuard.getAttribute('data-oku-focus-guard')).toBe('') + expect(lastGuard.getAttribute('data-oku-focus-guard')).toBe('') + + wrapper.unmount() + }) + + test('removes focus guards on unmount if count is 1', async () => { + const mockGuard = document.createElement('span') + mockGuard.setAttribute('data-oku-focus-guard', '') + document.body.appendChild(mockGuard) + + const wrapper = mount(OkuFocusGuards) + + await wrapper.vm.$nextTick() + + wrapper.unmount() + + const edgeGuards = document.querySelectorAll( + '[data-oku-focus-guard]', + ) + expect(edgeGuards.length).toBe(0) + }) + + test('does not remove focus guards on unmount if count is greater than 1', async () => { + const mockGuard = document.createElement('span') + mockGuard.setAttribute('data-oku-focus-guard', '') + document.body.appendChild(mockGuard) + + const wrapper1 = mount(OkuFocusGuards) + const wrapper2 = mount(OkuFocusGuards) + + await wrapper1.vm.$nextTick() + await wrapper2.vm.$nextTick() + + wrapper1.unmount() + + const edgeGuards = document.querySelectorAll( + '[data-oku-focus-guard]', + ) + expect(edgeGuards.length).toBe(1) + + wrapper2.unmount() + }) + + test('adds and removes focus guards in the correct order', async () => { + const wrapper = mount(OkuFocusGuards) + + await wrapper.vm.$nextTick() + + const edgeGuards = document.querySelectorAll( + '[data-oku-focus-guard]', + ) + + expect(edgeGuards.length).toBe(2) + + const firstGuard = edgeGuards[0] + const lastGuard = edgeGuards[1] + + expect(firstGuard.getAttribute('data-oku-focus-guard')).toBe('') + expect(lastGuard.getAttribute('data-oku-focus-guard')).toBe('') + + wrapper.unmount() + + const edgeGuardsAfterUnmount = document.querySelectorAll( + '[data-oku-focus-guard]', + ) + expect(edgeGuardsAfterUnmount.length).toBe(0) + }) +}) diff --git a/packages/core/focus-group/src/focusGroup.ts b/packages/core/focus-guards/src/focusGuards.ts similarity index 70% rename from packages/core/focus-group/src/focusGroup.ts rename to packages/core/focus-guards/src/focusGuards.ts index 6565a7357..709278668 100644 --- a/packages/core/focus-group/src/focusGroup.ts +++ b/packages/core/focus-guards/src/focusGuards.ts @@ -1,8 +1,8 @@ import { defineComponent } from 'vue' import { useFocusGuards } from './utils' -export const OkuFocusGroup = defineComponent({ - name: 'OkuFocusGroup', +export const OkuFocusGuards = defineComponent({ + name: 'OkuFocusGuards', setup(props, { slots }) { useFocusGuards() diff --git a/packages/core/focus-group/src/index.ts b/packages/core/focus-guards/src/index.ts similarity index 56% rename from packages/core/focus-group/src/index.ts rename to packages/core/focus-guards/src/index.ts index 8f6ea4b5a..f899c3e21 100644 --- a/packages/core/focus-group/src/index.ts +++ b/packages/core/focus-guards/src/index.ts @@ -1,6 +1,6 @@ export { - OkuFocusGroup, -} from './focusGroup' + OkuFocusGuards, +} from './focusGuards' export { useFocusGuards, diff --git a/packages/core/focus-group/src/utils.ts b/packages/core/focus-guards/src/utils.ts similarity index 100% rename from packages/core/focus-group/src/utils.ts rename to packages/core/focus-guards/src/utils.ts diff --git a/packages/core/focus-group/tsconfig.json b/packages/core/focus-guards/tsconfig.json similarity index 100% rename from packages/core/focus-group/tsconfig.json rename to packages/core/focus-guards/tsconfig.json diff --git a/packages/core/focus-group/tsup.config.ts b/packages/core/focus-guards/tsup.config.ts similarity index 100% rename from packages/core/focus-group/tsup.config.ts rename to packages/core/focus-guards/tsup.config.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20ace35ae..68531bc3a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,12 +43,9 @@ importers: '@oku-ui/dismissable-layer': specifier: workspace:^ version: link:packages/components/dismissable-layer - '@oku-ui/focus-group': - specifier: workspace:^ - version: link:packages/core/focus-group '@oku-ui/focus-guards': specifier: workspace:^ - version: link:packages/components/focus-guards + version: link:packages/core/focus-guards '@oku-ui/focus-scope': specifier: workspace:^ version: link:packages/components/focus-scope @@ -391,19 +388,6 @@ importers: specifier: workspace:^ version: link:../../tsconfig - packages/components/focus-guards: - dependencies: - '@oku-ui/primitive': - specifier: latest - version: link:../../core/primitive - vue: - specifier: ^3.3.0 - version: 3.3.4 - devDependencies: - tsconfig: - specifier: workspace:^ - version: link:../../tsconfig - packages/components/focus-scope: dependencies: '@oku-ui/primitive': @@ -681,7 +665,7 @@ importers: specifier: workspace:^ version: link:../../tsconfig - packages/core/focus-group: + packages/core/focus-guards: dependencies: vue: specifier: ^3.3.0 From 3d0e0e79ff53825f7973a759b0abdcf4ac5fa606 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Mon, 21 Aug 2023 13:05:11 +0300 Subject: [PATCH 18/23] fix: new struct --- .../dismissable-layer/src/DismissableLayer.ts | 192 ++++++++---------- .../src/DismissableLayerBranch.ts | 42 ++-- .../components/dismissable-layer/src/util.ts | 11 + 3 files changed, 104 insertions(+), 141 deletions(-) diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts index 5b6acbd3c..00bdfe14b 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.ts @@ -4,14 +4,11 @@ import { useForwardRef, } from '@oku-ui/use-composable' import type { - ComponentPublicInstanceRef, ElementType, - InstanceTypeRef, - MergeProps, PrimitiveProps, } from '@oku-ui/primitive' import { Primitive, primitiveProps } from '@oku-ui/primitive' -import type { PropType, Ref } from 'vue' +import type { Ref } from 'vue' import { computed, defineComponent, @@ -21,9 +18,9 @@ import { toRefs, watchEffect, } from 'vue' -import { ScopePropObject } from '@oku-ui/provide' import { composeEventHandlers } from '@oku-ui/utils' -import { dispatchUpdate, useFocusOutside, usePointerDownOutside } from './util' +import type { ScopeDismissableLayer } from './util' +import { dispatchUpdate, scopeDismissableLayerProps, useFocusOutside, usePointerDownOutside } from './util' /* ------------------------------------------------------------------------------------------------- * DismissableLayer @@ -36,13 +33,14 @@ let originalBodyPointerEvents: string export const DISMISSABLE_NAME = 'OkuDismissableLayer' export const DismissableLayerProvideKey = Symbol('DismissableLayerProvide') -type DismissableLayerElement = ElementType<'div'> -type _ElDismissableLayerElement = HTMLDivElement + +export type DismissableLayerIntrinsicElement = ElementType<'div'> +export type DismissableLayerElement = HTMLDivElement export type DismissableLayerProvideValue = { - layers: Ref> - layersWithOutsidePointerEventsDisabled: Ref> - branches: Ref> + layers: Ref> + layersWithOutsidePointerEventsDisabled: Ref> + branches: Ref> } export type PointerDownOutsideEvent = CustomEvent<{ @@ -97,77 +95,65 @@ interface DismissableLayerProps extends PrimitiveProps { onPointerDownCapture?: (event: PointerDownCaptureEvent) => void } +const dismissableLayerProps = { + disableOutsidePointerEvents: { + type: Boolean, + default: false, + }, +} + const DismissableLayer = defineComponent({ name: DISMISSABLE_NAME, inheritAttrs: false, props: { - disableOutsidePointerEvents: { - type: Boolean, - default: false, - }, - onEscapeKeyDown: { - type: Function as PropType, - required: false, - }, - onPointerDownOutside: { - type: Function as PropType, - required: false, - }, - onInteractOutside: { - type: Function as PropType, - required: false, - }, - onFocusOutside: { - type: Function as PropType, - required: false, - }, - onDismiss: { - type: Function as PropType, - required: false, - }, - onFocusCapture: { - type: Function as PropType, - required: false, - }, - onBlurCapture: { - type: Function as PropType, - required: false, - }, - onPointerDownCapture: { - type: Function as PropType, - required: false, - }, + ...dismissableLayerProps, ...primitiveProps, - scopeDismissableLayer: { - ...ScopePropObject, - }, + ...scopeDismissableLayerProps, + }, + emits: { + /** + * Event handler called when the escape key is down. + * Can be prevented. + */ + escapeKeyDown: (event: KeyboardEvent) => true, + /** + * Event handler called when an interaction happens outside the `DismissableLayer`. + * Specifically, when a `pointerdown` event happens outside or focus moves outside of it. + * Can be prevented. + */ + interactOutside: (event: PointerDownOutsideEvent | FocusOutsideEvent) => true, + /** + * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. + * Can be prevented. + */ + pointerDownOutside: (event: PointerDownOutsideEvent) => true, + /** + * Event handler called when the focus moves outside of the `DismissableLayer`. + * Can be prevented. + */ + focusOutside: (event: FocusOutsideEvent) => true, + /** + * Handler called when the `DismissableLayer` should be dismissed + */ + dismiss: () => true, + focusCapture: (event: FocusCaptureEvent) => true, + blurCapture: (event: FocusBlurCaptureEvent) => true, + pointerDownCapture: (event: PointerDownCaptureEvent) => true, }, - emits: [ - 'focusOutside', - 'dismiss', - 'pointerDownOutside', - 'interactOutside', - 'escapeKeyDown', - ], setup(props, { attrs, emit, slots }) { const { - onDismiss, - onFocusOutside, - onEscapeKeyDown, - onInteractOutside, - onPointerDownOutside, disableOutsidePointerEvents, } = toRefs(props) const { ...dismissableLayerAttrs } = attrs - const _layers = ref(new Set<_ElDismissableLayerElement>()) + const _layers = ref(new Set()) const layersWithOutsidePointerEventsDisabled = ref( - new Set<_ElDismissableLayerElement>(), + new Set(), ) - const branches = ref(new Set<_ElDismissableLayerElement>()) + const branches = ref(new Set()) const layers = computed(() => Array.from(_layers.value)) @@ -177,13 +163,13 @@ const DismissableLayer = defineComponent({ branches, }) - const node = ref | null>(null) + const node = ref(null) const forwardedRef = useForwardRef() const composedRefs = useComposedRefs(node, forwardedRef) const ownerDocument = computed( - () => node.value?.$el?.ownerDocument ?? globalThis?.document, + () => node.value?.ownerDocument ?? globalThis?.document, ) const highestLayerWithOutsidePointerEventsDisabled = computed(() => { @@ -199,7 +185,7 @@ const DismissableLayer = defineComponent({ ) const index = computed(() => { - return node.value?.$el ? layers.value.indexOf(node.value.$el) : -1 + return node.value ? layers.value.indexOf(node.value) : -1 }) const isBodyPointerEventsDisabled = computed( @@ -221,16 +207,11 @@ const DismissableLayer = defineComponent({ if (!isPointerEventsEnabled.value || isPointerDownOnBranch) return - onPointerDownOutside.value?.(event) - onInteractOutside.value?.(event) - emit('pointerDownOutside', event) emit('interactOutside', event) - if (!event.defaultPrevented) { - onDismiss.value?.() + if (!event.defaultPrevented) emit('dismiss') - } }, ownerDocument.value) const focusOutside = useFocusOutside((event) => { @@ -242,16 +223,11 @@ const DismissableLayer = defineComponent({ if (isFocusInBranch) return - onFocusOutside.value?.(event) - onInteractOutside.value?.(event) - emit('focusOutside', event) emit('interactOutside', event) - if (!event.defaultPrevented) { - onDismiss.value?.() + if (!event.defaultPrevented) emit('dismiss') - } }, ownerDocument.value) useEscapeKeydown((event) => { @@ -260,18 +236,16 @@ const DismissableLayer = defineComponent({ if (!isHighestLayer) return - onEscapeKeyDown.value?.(event) emit('escapeKeyDown', event) - if (!event.defaultPrevented && onDismiss) { + if (!event.defaultPrevented && props.onDismiss) { event.preventDefault() - onDismiss.value?.() emit('dismiss') } }, ownerDocument.value) watchEffect((onInvalidate) => { - if (!node.value?.$el) + if (!node.value) return if (disableOutsidePointerEvents.value) { @@ -280,10 +254,10 @@ const DismissableLayer = defineComponent({ = ownerDocument.value.body.style.pointerEvents ownerDocument.value.body.style.pointerEvents = 'none' } - layersWithOutsidePointerEventsDisabled.value.add(node.value.$el) + layersWithOutsidePointerEventsDisabled.value.add(node.value) } - _layers.value.add(node.value.$el) + _layers.value.add(node.value) dispatchUpdate() @@ -306,10 +280,10 @@ const DismissableLayer = defineComponent({ */ watchEffect((onInvalidate) => { onInvalidate(() => { - if (!node.value?.$el) + if (!node.value) return - _layers.value.delete(node.value.$el) - layersWithOutsidePointerEventsDisabled.value.delete(node.value.$el) + _layers.value.delete(node.value) + layersWithOutsidePointerEventsDisabled.value.delete(node.value) dispatchUpdate() }) }) @@ -338,16 +312,22 @@ const DismissableLayer = defineComponent({ : undefined, ...(dismissableLayerAttrs.style as CSSPropertyRule), }, - onFocusCapture: composeEventHandlers( - props.onFocusCapture, + onFocusCapture: composeEventHandlers ( + (e) => { + emit('focusCapture', e) + }, focusOutside.onFocusCapture, ), - onBlurCapture: composeEventHandlers( - props.onBlurCapture, + onBlurCapture: composeEventHandlers ( + (e) => { + emit('blurCapture', e) + }, focusOutside.onBlurCapture, ), - onPointerDownCapture: composeEventHandlers( - props.onPointerDownCapture, + onPointerDownCapture: composeEventHandlers( + (e) => { + emit('pointerDownCapture', e) + }, pointerDownOutside.onPointerDownCapture, ), }, @@ -360,21 +340,9 @@ const DismissableLayer = defineComponent({ }, }) -export type _DismissableLayerEl = HTMLDivElement - -type _DismissableLayer = MergeProps< - DismissableLayerProps, - DismissableLayerElement -> - -type InstanceDismissableLayerType = InstanceTypeRef< - typeof DismissableLayer, - _DismissableLayerEl -> - -const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer & -(new () => { $props: _DismissableLayer }) - -export { OkuDismissableLayer } +export const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer & +(new () => { + $props: ScopeDismissableLayer> +}) -export type { InstanceDismissableLayerType, DismissableLayerProps } +export type { DismissableLayerProps } diff --git a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts index 291c1ace8..e58bef14f 100644 --- a/packages/components/dismissable-layer/src/DismissableLayerBranch.ts +++ b/packages/components/dismissable-layer/src/DismissableLayerBranch.ts @@ -1,9 +1,6 @@ import { Primitive, primitiveProps } from '@oku-ui/primitive' import type { - ComponentPublicInstanceRef, ElementType, - InstanceTypeRef, - MergeProps, PrimitiveProps, } from '@oku-ui/primitive' import { defineComponent, h, inject, ref, watchEffect } from 'vue' @@ -15,13 +12,12 @@ import { DismissableLayerProvideKey } from './DismissableLayer' * DismissableLayerBranch * ----------------------------------------------------------------------------------------------- */ -const BRANCH_NAME = 'DismissableLayerBranch' -type DismissableLayerBranchElement = ElementType<'div'> +const BRANCH_NAME = 'OkuDismissableLayerBranch' +export type DismissableLayerBranchIntrinsicElement = ElementType<'div'> +export type DismissableLayerBranchElement = HTMLDivElement interface DismissableLayerBranchProps extends PrimitiveProps {} -export type { DismissableLayerBranchElement } - const DismissableLayerBranch = defineComponent({ name: BRANCH_NAME, inheritAttrs: false, @@ -33,18 +29,18 @@ const DismissableLayerBranch = defineComponent({ DismissableLayerProvideKey, ) as DismissableLayerProvideValue - const node = ref | null>() + const node = ref() const forwardedRef = useForwardRef() const composedRefs = useComposedRefs(node, forwardedRef) watchEffect((onInvalidate) => { if (node.value) - _inject.branches.value.add(node.value.$el) + _inject.branches.value.add(node.value) onInvalidate(() => { - if (node.value && node.value.$el) - _inject.branches.value.delete(node.value.$el) + if (node.value && node.value) + _inject.branches.value.delete(node.value) }) }) @@ -59,22 +55,10 @@ const DismissableLayerBranch = defineComponent({ }, }) -export type _DismissableLayerBranchEl = HTMLDivElement - -type _DismissableLayerBranch = MergeProps< - DismissableLayerBranchProps, - DismissableLayerBranchElement -> - -type InstanceDismissableLayerBranchType = InstanceTypeRef< - typeof DismissableLayerBranch, - _DismissableLayerBranchEl -> - -const OkuDismissableLayerBranch - = DismissableLayerBranch as typeof DismissableLayerBranch & - (new () => { $props: _DismissableLayerBranch }) - -export { OkuDismissableLayerBranch } +export const OkuDismissableLayerBranch += DismissableLayerBranch as typeof DismissableLayerBranch & +(new () => { + $props: Partial +}) -export type { InstanceDismissableLayerBranchType, DismissableLayerBranchProps } +export type { DismissableLayerBranchProps } diff --git a/packages/components/dismissable-layer/src/util.ts b/packages/components/dismissable-layer/src/util.ts index a0956e57d..e15436f4e 100644 --- a/packages/components/dismissable-layer/src/util.ts +++ b/packages/components/dismissable-layer/src/util.ts @@ -1,6 +1,9 @@ import { useCallbackRef } from '@oku-ui/use-composable' import { onBeforeUnmount, ref, watchEffect } from 'vue' import { dispatchDiscreteCustomEvent } from '@oku-ui/primitive' + +import type { Scope } from '@oku-ui/provide' +import { ScopePropObject } from '@oku-ui/provide' import type { FocusOutsideEvent, PointerDownOutsideEvent, @@ -11,6 +14,14 @@ import { POINTER_DOWN_OUTSIDE, } from './DismissableLayer' +export type ScopeDismissableLayer = T & { scopeOkuDismissableLayer?: Scope } + +export const scopeDismissableLayerProps = { + scopeOkuDismissableLayer: { + ...ScopePropObject, + }, +} + /** * Listens for `pointerdown` outside a subtree. We use `pointerdown` rather than `pointerup` * to mimic layer dismissing behaviour present in OS. From 55ba6d3db97cfe40258695f4fb30006551023762 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Mon, 21 Aug 2023 13:18:13 +0300 Subject: [PATCH 19/23] fix: type --- packages/components/dismissable-layer/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/dismissable-layer/src/index.ts b/packages/components/dismissable-layer/src/index.ts index 79383e8f8..4f32588c2 100644 --- a/packages/components/dismissable-layer/src/index.ts +++ b/packages/components/dismissable-layer/src/index.ts @@ -3,6 +3,5 @@ export * from './DismissableLayerBranch' export { OkuDismissableLayer } from './DismissableLayer' export type { - InstanceDismissableLayerType, DismissableLayerProps, } from './DismissableLayer' From 1a7d029cf9e060d986ef1f69e91160b892c2a7ee Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Wed, 23 Aug 2023 13:44:35 +0100 Subject: [PATCH 20/23] chore: fix on dismiss event --- .../dismissable-layer/src/DismissableLayer.ts | 49 ++++++++----------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts index 00bdfe14b..8e4692c0b 100644 --- a/packages/components/dismissable-layer/src/DismissableLayer.ts +++ b/packages/components/dismissable-layer/src/DismissableLayer.ts @@ -3,10 +3,7 @@ import { useEscapeKeydown, useForwardRef, } from '@oku-ui/use-composable' -import type { - ElementType, - PrimitiveProps, -} from '@oku-ui/primitive' +import type { ElementType, PrimitiveProps } from '@oku-ui/primitive' import { Primitive, primitiveProps } from '@oku-ui/primitive' import type { Ref } from 'vue' import { @@ -20,7 +17,12 @@ import { } from 'vue' import { composeEventHandlers } from '@oku-ui/utils' import type { ScopeDismissableLayer } from './util' -import { dispatchUpdate, scopeDismissableLayerProps, useFocusOutside, usePointerDownOutside } from './util' +import { + dispatchUpdate, + scopeDismissableLayerProps, + useFocusOutside, + usePointerDownOutside, +} from './util' /* ------------------------------------------------------------------------------------------------- * DismissableLayer @@ -117,11 +119,12 @@ const DismissableLayer = defineComponent({ */ escapeKeyDown: (event: KeyboardEvent) => true, /** - * Event handler called when an interaction happens outside the `DismissableLayer`. - * Specifically, when a `pointerdown` event happens outside or focus moves outside of it. - * Can be prevented. - */ - interactOutside: (event: PointerDownOutsideEvent | FocusOutsideEvent) => true, + * Event handler called when an interaction happens outside the `DismissableLayer`. + * Specifically, when a `pointerdown` event happens outside or focus moves outside of it. + * Can be prevented. + */ + interactOutside: (event: PointerDownOutsideEvent | FocusOutsideEvent) => + true, /** * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. * Can be prevented. @@ -141,9 +144,7 @@ const DismissableLayer = defineComponent({ pointerDownCapture: (event: PointerDownCaptureEvent) => true, }, setup(props, { attrs, emit, slots }) { - const { - disableOutsidePointerEvents, - } = toRefs(props) + const { disableOutsidePointerEvents } = toRefs(props) const { ...dismissableLayerAttrs } = attrs @@ -238,10 +239,8 @@ const DismissableLayer = defineComponent({ emit('escapeKeyDown', event) - if (!event.defaultPrevented && props.onDismiss) { - event.preventDefault() + if (!event.defaultPrevented) emit('dismiss') - } }, ownerDocument.value) watchEffect((onInvalidate) => { @@ -312,18 +311,12 @@ const DismissableLayer = defineComponent({ : undefined, ...(dismissableLayerAttrs.style as CSSPropertyRule), }, - onFocusCapture: composeEventHandlers ( - (e) => { - emit('focusCapture', e) - }, - focusOutside.onFocusCapture, - ), - onBlurCapture: composeEventHandlers ( - (e) => { - emit('blurCapture', e) - }, - focusOutside.onBlurCapture, - ), + onFocusCapture: composeEventHandlers((e) => { + emit('focusCapture', e) + }, focusOutside.onFocusCapture), + onBlurCapture: composeEventHandlers((e) => { + emit('blurCapture', e) + }, focusOutside.onBlurCapture), onPointerDownCapture: composeEventHandlers( (e) => { emit('pointerDownCapture', e) From 261df83201fd6fbe6ba500ee8345de1ffa31eb46 Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Wed, 23 Aug 2023 15:39:26 +0100 Subject: [PATCH 21/23] chore: update storybook --- .../src/stories/DismissableLayer.stories.ts | 16 ++ .../src/stories/DismissableLayer.vue | 41 ++++- .../src/stories/DummyPopover.vue | 142 ++++++++++++++++++ 3 files changed, 198 insertions(+), 1 deletion(-) create mode 100644 packages/components/dismissable-layer/src/stories/DummyPopover.vue diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts index 29d464acb..b6c17b71b 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts @@ -89,3 +89,19 @@ export const DialogExample: Story = { `, }), } + +export const PopoverFullyModal: Story = { + args: { + template: '#5', + }, + + render: (args: any) => ({ + components: { OkuDismissableLayerComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue index 3f68197e4..6817a7496 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue @@ -3,10 +3,11 @@ import { OkuDismissableLayer } from '@oku-ui/dismissable-layer' import { ref } from 'vue' import { OkuFocusScope } from '@oku-ui/focus-scope' import DummyDialog from './DummyDialog.vue' +import DummyPopover from './DummyPopover.vue' import DismissableBox from './DismissableBox.vue' export interface IDismissableLayerProps { - template?: '#1' | '#2' | '#3' | '#4' + template?: '#1' | '#2' | '#3' | '#4' | '#5' | '#6' | '#7' | '#8' allshow?: boolean } @@ -210,5 +211,43 @@ function clicked() { + +
+

+ Popover (fully modal example) +

+
    +
  • ✅ focus should move inside `Popover` when mounted
    • +
  • ✅ focus should be trapped inside `Popover`
    • +
  • ✅ scrolling outside `Popover` should be disabled
    • +
  • ✅ should be able to dismiss `Popover` on pressing escape
    • +
  • + ✅ focus should return to the open button +
    • +
  • + ✅ interacting outside `Popover` should be disabled (clicking the + "alert me" button shouldn't do anything) +
    • +
  • ➕
    • +
  • ✅ should be able to dismiss `Popover` when interacting outside
    • +
  • + ✅ focus should return to the open button +
    • +
+ +
+ + + + +
+
diff --git a/packages/components/dismissable-layer/src/stories/DummyPopover.vue b/packages/components/dismissable-layer/src/stories/DummyPopover.vue new file mode 100644 index 000000000..546d208d2 --- /dev/null +++ b/packages/components/dismissable-layer/src/stories/DummyPopover.vue @@ -0,0 +1,142 @@ + + + From e623f896beca6db0463a92065baa5de5d2a3d85d Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Wed, 23 Aug 2023 16:14:59 +0100 Subject: [PATCH 22/23] chore: update stories --- .../src/stories/DismissableLayer.stories.ts | 64 +++++ .../src/stories/DismissableLayer.vue | 230 +++++++++++++++++- 2 files changed, 292 insertions(+), 2 deletions(-) diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts index b6c17b71b..96184adee 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts @@ -105,3 +105,67 @@ export const PopoverFullyModal: Story = { `, }), } + +export const PopoverSemiModal: Story = { + args: { + template: '#6', + }, + + render: (args: any) => ({ + components: { OkuDismissableLayerComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} + +export const PopoverNonModal: Story = { + args: { + template: '#7', + }, + + render: (args: any) => ({ + components: { OkuDismissableLayerComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} + +export const PopoverInDialog: Story = { + args: { + template: '#8', + }, + + render: (args: any) => ({ + components: { OkuDismissableLayerComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} + +export const PopoverNested: Story = { + args: { + template: '#9', + }, + + render: (args: any) => ({ + components: { OkuDismissableLayerComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue index 6817a7496..2bfee5f35 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue @@ -7,13 +7,16 @@ import DummyPopover from './DummyPopover.vue' import DismissableBox from './DismissableBox.vue' export interface IDismissableLayerProps { - template?: '#1' | '#2' | '#3' | '#4' | '#5' | '#6' | '#7' | '#8' + template?: '#1' | '#2' | '#3' | '#4' | '#5' | '#6' | '#7' | '#8' | '#9' allshow?: boolean } defineProps() const openButtonRef = ref(null) +const changeColorButtonRef = ref(null) + +const color = ref('royalblue') const open = ref(false) const dismissOnEscape = ref(false) const dismissOnPointerDownOutside = ref(false) @@ -54,6 +57,10 @@ function handleMouseDown() { function clicked() { alert('clicked!') } + +function setColor() { + color.value = color.value === 'royalblue' ? 'tomato' : 'royalblue' +} + + From 7552fc376118d0a48e5daa2b55d194280e4fae59 Mon Sep 17 00:00:00 2001 From: Damilare Anjorin Date: Wed, 23 Aug 2023 16:26:19 +0100 Subject: [PATCH 23/23] chore: complete stories --- .../src/stories/DismissableLayer.stories.ts | 16 +++++++ .../src/stories/DismissableLayer.vue | 46 ++++++++++++++++++- 2 files changed, 60 insertions(+), 2 deletions(-) diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts index 96184adee..5623eca2f 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.stories.ts @@ -169,3 +169,19 @@ export const PopoverNested: Story = { `, }), } + +export const InPopupWindow: Story = { + args: { + template: '#10', + }, + + render: (args: any) => ({ + components: { OkuDismissableLayerComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue index 2bfee5f35..509bf39d2 100644 --- a/packages/components/dismissable-layer/src/stories/DismissableLayer.vue +++ b/packages/components/dismissable-layer/src/stories/DismissableLayer.vue @@ -1,13 +1,24 @@