@entry-ui/qwik 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/_internal/components/primitive/primitive.d.ts +2 -1
- package/lib/_internal/components/primitive/primitive.qwik.mjs +1 -0
- package/lib/_internal/hooks/index.d.ts +1 -0
- package/lib/_internal/hooks/use-id/index.d.ts +2 -0
- package/lib/_internal/hooks/use-id/use-id.d.ts +21 -0
- package/lib/_internal/hooks/use-id/use-id.qwik.mjs +10 -0
- package/lib/_internal/hooks/use-id/use-id.types.d.ts +22 -0
- package/lib/components/accordion/contexts/accordion-item-context/accordion-item-context.d.ts +11 -0
- package/lib/components/accordion/contexts/accordion-item-context/accordion-item-context.qwik.mjs +10 -0
- package/lib/components/accordion/contexts/accordion-item-context/accordion-item-context.types.d.ts +64 -0
- package/lib/components/accordion/contexts/accordion-item-context/index.d.ts +2 -0
- package/lib/components/accordion/contexts/accordion-item-trigger-context/accordion-item-trigger-context.d.ts +6 -0
- package/lib/components/accordion/contexts/accordion-item-trigger-context/accordion-item-trigger-context.qwik.mjs +5 -0
- package/lib/components/accordion/contexts/accordion-item-trigger-context/accordion-item-trigger-context.types.d.ts +13 -0
- package/lib/components/accordion/contexts/accordion-item-trigger-context/index.d.ts +2 -0
- package/lib/components/accordion/contexts/accordion-root-context/accordion-root-context.d.ts +11 -0
- package/lib/components/accordion/contexts/accordion-root-context/accordion-root-context.qwik.mjs +10 -0
- package/lib/components/accordion/contexts/accordion-root-context/accordion-root-context.types.d.ts +34 -0
- package/lib/components/accordion/contexts/accordion-root-context/index.d.ts +2 -0
- package/lib/components/accordion/contexts/index.d.ts +3 -0
- package/lib/components/accordion/hooks/index.d.ts +3 -0
- package/lib/components/accordion/hooks/use-accordion-item-context/index.d.ts +2 -0
- package/lib/components/accordion/hooks/use-accordion-item-context/use-accordion-item-context.d.ts +7 -0
- package/lib/components/accordion/hooks/use-accordion-item-context/use-accordion-item-context.qwik.mjs +14 -0
- package/lib/components/accordion/hooks/use-accordion-item-context/use-accordion-item-context.types.d.ts +28 -0
- package/lib/components/accordion/hooks/use-accordion-item-trigger-context/index.d.ts +2 -0
- package/lib/components/accordion/hooks/use-accordion-item-trigger-context/use-accordion-item-trigger-context.d.ts +7 -0
- package/lib/components/accordion/hooks/use-accordion-item-trigger-context/use-accordion-item-trigger-context.qwik.mjs +11 -0
- package/lib/components/accordion/hooks/use-accordion-item-trigger-context/use-accordion-item-trigger-context.types.d.ts +13 -0
- package/lib/components/accordion/hooks/use-accordion-root-context/index.d.ts +2 -0
- package/lib/components/accordion/hooks/use-accordion-root-context/use-accordion-root-context.d.ts +8 -0
- package/lib/components/accordion/hooks/use-accordion-root-context/use-accordion-root-context.qwik.mjs +13 -0
- package/lib/components/accordion/hooks/use-accordion-root-context/use-accordion-root-context.types.d.ts +22 -0
- package/lib/components/accordion/index.d.ts +2 -0
- package/lib/components/accordion/index.qwik.mjs +10 -0
- package/lib/components/accordion/parts/accordion-item/accordion-item.d.ts +7 -0
- package/lib/components/accordion/parts/accordion-item/accordion-item.qwik.mjs +49 -0
- package/lib/components/accordion/parts/accordion-item/accordion-item.types.d.ts +29 -0
- package/lib/components/accordion/parts/accordion-item/index.d.ts +2 -0
- package/lib/components/accordion/parts/accordion-item-header/accordion-item-header.d.ts +11 -0
- package/lib/components/accordion/parts/accordion-item-header/accordion-item-header.qwik.mjs +19 -0
- package/lib/components/accordion/parts/accordion-item-header/accordion-item-header.types.d.ts +15 -0
- package/lib/components/accordion/parts/accordion-item-header/index.d.ts +2 -0
- package/lib/components/accordion/parts/accordion-item-indicator/accordion-item-indicator.d.ts +8 -0
- package/lib/components/accordion/parts/accordion-item-indicator/accordion-item-indicator.qwik.mjs +27 -0
- package/lib/components/accordion/parts/accordion-item-indicator/accordion-item-indicator.types.d.ts +15 -0
- package/lib/components/accordion/parts/accordion-item-indicator/index.d.ts +2 -0
- package/lib/components/accordion/parts/accordion-item-panel/accordion-item-panel.d.ts +7 -0
- package/lib/components/accordion/parts/accordion-item-panel/accordion-item-panel.qwik.mjs +199 -0
- package/lib/components/accordion/parts/accordion-item-panel/accordion-item-panel.types.d.ts +31 -0
- package/lib/components/accordion/parts/accordion-item-panel/index.d.ts +2 -0
- package/lib/components/accordion/parts/accordion-item-trigger/accordion-item-trigger.d.ts +7 -0
- package/lib/components/accordion/parts/accordion-item-trigger/accordion-item-trigger.qwik.mjs +52 -0
- package/lib/components/accordion/parts/accordion-item-trigger/accordion-item-trigger.types.d.ts +23 -0
- package/lib/components/accordion/parts/accordion-item-trigger/index.d.ts +2 -0
- package/lib/components/accordion/parts/accordion-root/accordion-root.d.ts +7 -0
- package/lib/components/accordion/parts/accordion-root/accordion-root.qwik.mjs +137 -0
- package/lib/components/accordion/parts/accordion-root/accordion-root.types.d.ts +68 -0
- package/lib/components/accordion/parts/accordion-root/index.d.ts +2 -0
- package/lib/components/accordion/parts/index.d.ts +12 -0
- package/lib/components/accordion/parts/index.qwik.mjs +14 -0
- package/lib/components/collapsible/contexts/collapsible-trigger-context/collapsible-trigger-context.types.d.ts +2 -2
- package/lib/components/collapsible/hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.types.d.ts +2 -2
- package/lib/components/collapsible/parts/collapsible-panel/collapsible-panel.qwik.mjs +53 -30
- package/lib/components/index.d.ts +1 -0
- package/lib/index.qwik.mjs +16 -8
- package/lib/utilities/merge-refs/merge-refs.d.ts +1 -1
- package/package.json +6 -2
|
@@ -4,7 +4,7 @@ import type { Component } from '@qwik.dev/core';
|
|
|
4
4
|
* List of HTML elements that can be created as primitive components.
|
|
5
5
|
* Each node in this array will have a corresponding component in the `Primitive` object.
|
|
6
6
|
*/
|
|
7
|
-
declare const NODES: readonly ["button", "div", "span"];
|
|
7
|
+
declare const NODES: readonly ["button", "div", "h3", "span"];
|
|
8
8
|
/**
|
|
9
9
|
* A factory function that creates a polymorphic Qwik component for a specific HTML tag.
|
|
10
10
|
*/
|
|
@@ -21,6 +21,7 @@ export declare const createPrimitive: <Node extends (typeof NODES)[number]>(node
|
|
|
21
21
|
export declare const Primitive: {
|
|
22
22
|
div: Component<PrimitiveProps<"div">>;
|
|
23
23
|
button: Component<PrimitiveProps<"button">>;
|
|
24
|
+
h3: Component<PrimitiveProps<"h3">>;
|
|
24
25
|
span: Component<PrimitiveProps<"span">>;
|
|
25
26
|
};
|
|
26
27
|
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { UseIdParams } from './use-id.types';
|
|
2
|
+
/**
|
|
3
|
+
* A custom hook that generates stable, unique identifiers with support for custom prefixes and manual overrides.
|
|
4
|
+
*
|
|
5
|
+
* This hook is designed to provide consistent IDs for accessibility (A11Y) and DOM manipulation
|
|
6
|
+
* in a Qwik-native way. By combining Qwik's `useId` for SSR-safe uniqueness and `useConstant`
|
|
7
|
+
* for client-side stability, it ensures that the identifier remains unchanged throughout
|
|
8
|
+
* the component's entire lifecycle.
|
|
9
|
+
*
|
|
10
|
+
* The generated identifier follows a specific structure:
|
|
11
|
+
* `[prefix][baseId]`
|
|
12
|
+
* - prefix: A string prepended to the ID (defaults to `entry-ui-qwik-`).
|
|
13
|
+
* - baseId: Either a custom string provided via `generatedId` or a unique
|
|
14
|
+
* sequence generated by the Qwik's `useId` hook.
|
|
15
|
+
*
|
|
16
|
+
* Example Outputs:
|
|
17
|
+
* - Default: `"entry-ui-qwik-rs7mG5255s"` (where `"rs7mG5255s"` is the `autoId`)
|
|
18
|
+
* - Custom prefix: `"my-app-header-rs7mG5255s"`
|
|
19
|
+
* - Custom base: `"entry-ui-qwik-custom-id"`
|
|
20
|
+
*/
|
|
21
|
+
export declare const useId: (params?: UseIdParams) => string;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useId as useId$1, useConstant } from "@qwik.dev/core";
|
|
2
|
+
const useId = (params = {}) => {
|
|
3
|
+
const { prefix = "entry-ui-qwik-", generatedId } = params;
|
|
4
|
+
const autoId = useId$1();
|
|
5
|
+
const id = useConstant(() => `${prefix.trim()}${generatedId ? generatedId.trim() : autoId}`);
|
|
6
|
+
return id;
|
|
7
|
+
};
|
|
8
|
+
export {
|
|
9
|
+
useId
|
|
10
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Configuration parameters for the `useId` hook.
|
|
3
|
+
*/
|
|
4
|
+
export interface UseIdParams {
|
|
5
|
+
/**
|
|
6
|
+
* An optional prefix to prepend to the generated or provided identifier.
|
|
7
|
+
* This helps in namespacing IDs to ensure uniqueness across the DOM,
|
|
8
|
+
* particularly when multiple design system libraries or component instances coexist.
|
|
9
|
+
*
|
|
10
|
+
* @default "entry-ui-qwik-"
|
|
11
|
+
*/
|
|
12
|
+
prefix?: string;
|
|
13
|
+
/**
|
|
14
|
+
* An optional value to override the internal identifier.
|
|
15
|
+
* When provided, this value will be used as the base for the identifier.
|
|
16
|
+
* If omitted, the hook will fall back to a unique ID automatically
|
|
17
|
+
* generated by the Qwik's `useId` hook.
|
|
18
|
+
*
|
|
19
|
+
* @default undefined
|
|
20
|
+
*/
|
|
21
|
+
generatedId?: string;
|
|
22
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { AccordionItemContextValue } from './accordion-item-context.types';
|
|
2
|
+
/**
|
|
3
|
+
* Provides the context for the `Accordion.Item` component, allowing descendant
|
|
4
|
+
* components to access readonly signals and `QRL` functions without prop drilling.
|
|
5
|
+
*/
|
|
6
|
+
export declare const AccordionItemContext: import("@qwik.dev/core").ContextId<AccordionItemContextValue>;
|
|
7
|
+
/**
|
|
8
|
+
* A hook that provides access to the `Accordion.Item` component's internal state.
|
|
9
|
+
* It exposes readonly signals and `QRL` functions to interact with the component's state,
|
|
10
|
+
*/
|
|
11
|
+
export declare const useAccordionItemContext: () => AccordionItemContextValue;
|
package/lib/components/accordion/contexts/accordion-item-context/accordion-item-context.qwik.mjs
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { createContextId, useContext } from "@qwik.dev/core";
|
|
2
|
+
const AccordionItemContext = createContextId("entry-ui-qwik-accordion-item-context");
|
|
3
|
+
const useAccordionItemContext = () => {
|
|
4
|
+
const context = useContext(AccordionItemContext);
|
|
5
|
+
return context;
|
|
6
|
+
};
|
|
7
|
+
export {
|
|
8
|
+
AccordionItemContext,
|
|
9
|
+
useAccordionItemContext
|
|
10
|
+
};
|
package/lib/components/accordion/contexts/accordion-item-context/accordion-item-context.types.d.ts
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { ReadonlySignal, QRL } from '@qwik.dev/core';
|
|
2
|
+
/**
|
|
3
|
+
* The value provided by the `AccordionItemContext` context.
|
|
4
|
+
* Contains the readonly signals and `QRL` functions shared with descendant components.
|
|
5
|
+
*/
|
|
6
|
+
export interface AccordionItemContextValue {
|
|
7
|
+
/**
|
|
8
|
+
* A readonly signal whose value is the unique identifier for the specific accordion item.
|
|
9
|
+
* This is used to identify the item and control its open/closed state within the accordion component.
|
|
10
|
+
*/
|
|
11
|
+
value: ReadonlySignal<string>;
|
|
12
|
+
/**
|
|
13
|
+
* A readonly signal whose value indicates whether the accordion item is currently in an open (expanded) state.
|
|
14
|
+
* A value of `true` means the item's panel is visible, while `false` means it's hidden.
|
|
15
|
+
*/
|
|
16
|
+
open: ReadonlySignal<boolean>;
|
|
17
|
+
/**
|
|
18
|
+
* A `QRL` function used to programmatically set the open state of the accordion item.
|
|
19
|
+
* This function toggles the item's visibility based on the provided boolean value.
|
|
20
|
+
*/
|
|
21
|
+
setOpen$: QRL<(open: boolean) => void>;
|
|
22
|
+
/**
|
|
23
|
+
* A readonly signal whose value specifies if the accordion item is disabled.
|
|
24
|
+
* When `true`, the item cannot be interacted with by the user, and its trigger might be visually
|
|
25
|
+
* styled to reflect this inactive state.
|
|
26
|
+
*/
|
|
27
|
+
disabled: ReadonlySignal<boolean>;
|
|
28
|
+
/**
|
|
29
|
+
* An object containing the identifier state and management `QRL` functions for the trigger element.
|
|
30
|
+
* This is used to link the trigger and the accordion item panel for accessibility purposes (WAI-ARIA).
|
|
31
|
+
*/
|
|
32
|
+
triggerId: {
|
|
33
|
+
/**
|
|
34
|
+
* A readonly signal representing the unique identifier of the trigger.
|
|
35
|
+
*/
|
|
36
|
+
id: ReadonlySignal<string | undefined>;
|
|
37
|
+
/**
|
|
38
|
+
* A `QRL` function to manually set or update the trigger's identifier.
|
|
39
|
+
*/
|
|
40
|
+
set$: QRL<(value: string | undefined) => void>;
|
|
41
|
+
/**
|
|
42
|
+
* A `QRL` function to clear the trigger's identifier.
|
|
43
|
+
*/
|
|
44
|
+
delete$: QRL<() => void>;
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* An object containing the identifier state and management functions for the panel element.
|
|
48
|
+
* This ensures the content panel can be correctly referenced by the accordion item trigger's `aria-controls` attribute.
|
|
49
|
+
*/
|
|
50
|
+
panelId: {
|
|
51
|
+
/**
|
|
52
|
+
* A readonly signal representing the unique identifier of the panel.
|
|
53
|
+
*/
|
|
54
|
+
id: ReadonlySignal<string | undefined>;
|
|
55
|
+
/**
|
|
56
|
+
* A `QRL` function to manually set or update the panel's identifier.
|
|
57
|
+
*/
|
|
58
|
+
set$: QRL<(value: string | undefined) => void>;
|
|
59
|
+
/**
|
|
60
|
+
* A `QRL` function to clear the panel's identifier.
|
|
61
|
+
*/
|
|
62
|
+
delete$: QRL<() => void>;
|
|
63
|
+
};
|
|
64
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { AccordionItemTriggerContextValue } from './accordion-item-trigger-context.types';
|
|
2
|
+
/**
|
|
3
|
+
* Provides the context for the `Accordion.ItemTrigger` component, allowing descendant
|
|
4
|
+
* components to access readonly signal without prop drilling.
|
|
5
|
+
*/
|
|
6
|
+
export declare const AccordionItemTriggerContext: import("@qwik.dev/core").ContextId<AccordionItemTriggerContextValue>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ReadonlySignal } from '@qwik.dev/core';
|
|
2
|
+
/**
|
|
3
|
+
* The value provided by the `AccordionItemTriggerContext` context.
|
|
4
|
+
* Contains the readonly signal shared with descendant components.
|
|
5
|
+
*/
|
|
6
|
+
export interface AccordionItemTriggerContextValue {
|
|
7
|
+
/**
|
|
8
|
+
* A readonly signal representing the effective disabled state of the trigger.
|
|
9
|
+
* This value is computed by prioritizing the trigger's own `disabled` prop,
|
|
10
|
+
* falling back to the `Accordion.Item` disabled state if not explicitly set.
|
|
11
|
+
*/
|
|
12
|
+
disabled: ReadonlySignal<boolean>;
|
|
13
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { AccordionRootContextValue } from './accordion-root-context.types';
|
|
2
|
+
/**
|
|
3
|
+
* Provides the context for the `Accordion.Root` component, allowing descendant
|
|
4
|
+
* components to access readonly signals and `QRL` functions without prop drilling.
|
|
5
|
+
*/
|
|
6
|
+
export declare const AccordionRootContext: import("@qwik.dev/core").ContextId<AccordionRootContextValue>;
|
|
7
|
+
/**
|
|
8
|
+
* A hook that provides access to the `Accordion.Root` component's internal state.
|
|
9
|
+
* It exposes readonly signals and `QRL` functions to interact with the component's state,
|
|
10
|
+
*/
|
|
11
|
+
export declare const useAccordionRootContext: () => AccordionRootContextValue;
|
package/lib/components/accordion/contexts/accordion-root-context/accordion-root-context.qwik.mjs
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { createContextId, useContext } from "@qwik.dev/core";
|
|
2
|
+
const AccordionRootContext = createContextId("entry-ui-qwik-accordion-root-context");
|
|
3
|
+
const useAccordionRootContext = () => {
|
|
4
|
+
const context = useContext(AccordionRootContext);
|
|
5
|
+
return context;
|
|
6
|
+
};
|
|
7
|
+
export {
|
|
8
|
+
AccordionRootContext,
|
|
9
|
+
useAccordionRootContext
|
|
10
|
+
};
|
package/lib/components/accordion/contexts/accordion-root-context/accordion-root-context.types.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { ReadonlySignal, QRL } from '@qwik.dev/core';
|
|
2
|
+
/**
|
|
3
|
+
* The value provided by the `AccordionRootContext` context.
|
|
4
|
+
* Contains the readonly signals and `QRL` functions shared with descendant components.
|
|
5
|
+
*/
|
|
6
|
+
export interface AccordionRootContextValue {
|
|
7
|
+
/**
|
|
8
|
+
* A readonly signal whose value is an array of strings representing the currently expanded accordion item or items values.
|
|
9
|
+
* This signal reflects the internal state of which accordion items are open.
|
|
10
|
+
*/
|
|
11
|
+
value: ReadonlySignal<string[]>;
|
|
12
|
+
/**
|
|
13
|
+
* A `QRL` function used to programmatically set the open state of the accordion items.
|
|
14
|
+
* This function takes an array of strings, where each string represents the value of the accordion items to be opened.
|
|
15
|
+
*/
|
|
16
|
+
setValue$: QRL<(value: string[]) => void>;
|
|
17
|
+
/**
|
|
18
|
+
* A readonly signal indicating whether the `"hidden-until-found"` behavior is enabled for all panels within the accordion.
|
|
19
|
+
*/
|
|
20
|
+
hiddenUntilFound: ReadonlySignal<boolean>;
|
|
21
|
+
/**
|
|
22
|
+
* A readonly signal whose value indicates whether the entire accordion is disabled.
|
|
23
|
+
* When `true`, all interaction with the accordion and its items is prevented.
|
|
24
|
+
*/
|
|
25
|
+
disabled: ReadonlySignal<boolean>;
|
|
26
|
+
/**
|
|
27
|
+
* A `QRL` callback function invoked when an accordion item should be opened.
|
|
28
|
+
*/
|
|
29
|
+
onItemOpen$: QRL<(itemValue: string) => void>;
|
|
30
|
+
/**
|
|
31
|
+
* A `QRL` callback function invoked when an accordion item should be closed.
|
|
32
|
+
*/
|
|
33
|
+
onItemClose$: QRL<(itemValue: string) => void>;
|
|
34
|
+
}
|
package/lib/components/accordion/hooks/use-accordion-item-context/use-accordion-item-context.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { UseAccordionItemContextReturnValue } from './use-accordion-item-context.types';
|
|
2
|
+
/**
|
|
3
|
+
* A hook that provides access to the `Accordion.Item` component's internal state.
|
|
4
|
+
* It exposes readonly signals and a `QRL` function to synchronize with a specific
|
|
5
|
+
* item's state, managing its expanded status and disabled availability.
|
|
6
|
+
*/
|
|
7
|
+
export declare const useAccordionItemContext: () => UseAccordionItemContextReturnValue;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { useContext } from "@qwik.dev/core";
|
|
2
|
+
import { AccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
|
|
3
|
+
const useAccordionItemContext = () => {
|
|
4
|
+
const { value, open, setOpen$, disabled } = useContext(AccordionItemContext);
|
|
5
|
+
return {
|
|
6
|
+
value,
|
|
7
|
+
open,
|
|
8
|
+
setOpen$,
|
|
9
|
+
disabled
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export {
|
|
13
|
+
useAccordionItemContext
|
|
14
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { ReadonlySignal, QRL } from '@qwik.dev/core';
|
|
2
|
+
/**
|
|
3
|
+
* The value returned by the `useAccordionItemContext` hook.
|
|
4
|
+
* Provides access to the accordion item's readonly signals and `QRL` function for descendant components.
|
|
5
|
+
*/
|
|
6
|
+
export interface UseAccordionItemContextReturnValue {
|
|
7
|
+
/**
|
|
8
|
+
* A readonly signal whose value is the unique identifier for the specific accordion item.
|
|
9
|
+
* This is used to identify the item and control its open/closed state within the accordion component.
|
|
10
|
+
*/
|
|
11
|
+
value: ReadonlySignal<string>;
|
|
12
|
+
/**
|
|
13
|
+
* A readonly signal whose value indicates whether the accordion item is currently in an open (expanded) state.
|
|
14
|
+
* A value of `true` means the item's panel is visible, while `false` means it's hidden.
|
|
15
|
+
*/
|
|
16
|
+
open: ReadonlySignal<boolean>;
|
|
17
|
+
/**
|
|
18
|
+
* A `QRL` function used to programmatically set the open state of the accordion item.
|
|
19
|
+
* This function toggles the item's visibility based on the provided boolean value.
|
|
20
|
+
*/
|
|
21
|
+
setOpen$: QRL<(open: boolean) => void>;
|
|
22
|
+
/**
|
|
23
|
+
* A readonly signal whose value specifies if the accordion item is disabled.
|
|
24
|
+
* When `true`, the item cannot be interacted with by the user, and its trigger might be visually
|
|
25
|
+
* styled to reflect this inactive state.
|
|
26
|
+
*/
|
|
27
|
+
disabled: ReadonlySignal<boolean>;
|
|
28
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { UseAccordionItemTriggerContextReturnValue } from './use-accordion-item-trigger-context.types';
|
|
2
|
+
/**
|
|
3
|
+
* A hook that provides access to the `Accordion.ItemTrigger` component's internal state.
|
|
4
|
+
* It exposes a readonly signal to synchronize with the trigger's availability,
|
|
5
|
+
* reflecting its effective disabled or enabled status.
|
|
6
|
+
*/
|
|
7
|
+
export declare const useAccordionItemTriggerContext: () => UseAccordionItemTriggerContextReturnValue;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { useContext } from "@qwik.dev/core";
|
|
2
|
+
import { AccordionItemTriggerContext } from "../../contexts/accordion-item-trigger-context/accordion-item-trigger-context.qwik.mjs";
|
|
3
|
+
const useAccordionItemTriggerContext = () => {
|
|
4
|
+
const { disabled } = useContext(AccordionItemTriggerContext);
|
|
5
|
+
return {
|
|
6
|
+
disabled
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
useAccordionItemTriggerContext
|
|
11
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ReadonlySignal } from '@qwik.dev/core';
|
|
2
|
+
/**
|
|
3
|
+
* The value returned by the `useAccordionItemTriggerContext` hook.
|
|
4
|
+
* Provides access to the accordion item trigger's readonly signal for descendant components.
|
|
5
|
+
*/
|
|
6
|
+
export interface UseAccordionItemTriggerContextReturnValue {
|
|
7
|
+
/**
|
|
8
|
+
* A readonly signal representing the effective disabled state of the trigger.
|
|
9
|
+
* This value is computed by prioritizing the trigger's own `disabled` prop,
|
|
10
|
+
* falling back to the `Accordion.Item` disabled state if not explicitly set.
|
|
11
|
+
*/
|
|
12
|
+
disabled: ReadonlySignal<boolean>;
|
|
13
|
+
}
|
package/lib/components/accordion/hooks/use-accordion-root-context/use-accordion-root-context.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { UseAccordionRootContextReturnValue } from './use-accordion-root-context.types';
|
|
2
|
+
/**
|
|
3
|
+
* A hook that provides access to the `Accordion.Root` component's internal state.
|
|
4
|
+
* It exposes readonly signals and a `QRL` function to interact with the accordion's state,
|
|
5
|
+
* allowing descendant components to synchronize with or programmatically control
|
|
6
|
+
* which items are currently expanded.
|
|
7
|
+
*/
|
|
8
|
+
export declare const useAccordionRootContext: () => UseAccordionRootContextReturnValue;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { useContext } from "@qwik.dev/core";
|
|
2
|
+
import { AccordionRootContext } from "../../contexts/accordion-root-context/accordion-root-context.qwik.mjs";
|
|
3
|
+
const useAccordionRootContext = () => {
|
|
4
|
+
const { value, setValue$, disabled } = useContext(AccordionRootContext);
|
|
5
|
+
return {
|
|
6
|
+
value,
|
|
7
|
+
setValue$,
|
|
8
|
+
disabled
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
useAccordionRootContext
|
|
13
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { ReadonlySignal, QRL } from '@qwik.dev/core';
|
|
2
|
+
/**
|
|
3
|
+
* The value returned by the `useAccordionRootContext` hook.
|
|
4
|
+
* Provides access to the accordion's readonly signals and `QRL` function for descendant components.
|
|
5
|
+
*/
|
|
6
|
+
export interface UseAccordionRootContextReturnValue {
|
|
7
|
+
/**
|
|
8
|
+
* A readonly signal whose value is an array of strings representing the currently expanded accordion item or items values.
|
|
9
|
+
* This signal reflects the internal state of which accordion items are open.
|
|
10
|
+
*/
|
|
11
|
+
value: ReadonlySignal<string[]>;
|
|
12
|
+
/**
|
|
13
|
+
* A `QRL` function used to programmatically set the open state of the accordion items.
|
|
14
|
+
* This function takes an array of strings, where each string represents the value of the accordion items to be opened.
|
|
15
|
+
*/
|
|
16
|
+
setValue$: QRL<(value: string[]) => void>;
|
|
17
|
+
/**
|
|
18
|
+
* A readonly signal whose value indicates whether the entire accordion is disabled.
|
|
19
|
+
* When `true`, all interaction with the accordion and its items is prevented.
|
|
20
|
+
*/
|
|
21
|
+
disabled: ReadonlySignal<boolean>;
|
|
22
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as index from "./parts/index.qwik.mjs";
|
|
2
|
+
import { useAccordionRootContext } from "./hooks/use-accordion-root-context/use-accordion-root-context.qwik.mjs";
|
|
3
|
+
import { useAccordionItemContext } from "./hooks/use-accordion-item-context/use-accordion-item-context.qwik.mjs";
|
|
4
|
+
import { useAccordionItemTriggerContext } from "./hooks/use-accordion-item-trigger-context/use-accordion-item-trigger-context.qwik.mjs";
|
|
5
|
+
export {
|
|
6
|
+
index as Accordion,
|
|
7
|
+
useAccordionItemContext,
|
|
8
|
+
useAccordionItemTriggerContext,
|
|
9
|
+
useAccordionRootContext
|
|
10
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx } from "@qwik.dev/core/jsx-runtime";
|
|
2
|
+
import { component$, useComputed$, $, useContextProvider, Slot } from "@qwik.dev/core";
|
|
3
|
+
import { useId } from "../../../../_internal/hooks/use-id/use-id.qwik.mjs";
|
|
4
|
+
import { useIdManager } from "../../../../_internal/hooks/use-id-manager/use-id-manager.qwik.mjs";
|
|
5
|
+
import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
|
|
6
|
+
import { useAccordionRootContext } from "../../contexts/accordion-root-context/accordion-root-context.qwik.mjs";
|
|
7
|
+
import { AccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
|
|
8
|
+
const AccordionItem = component$((props) => {
|
|
9
|
+
const { as = "div", value: _value, disabled: _disabled = false, ...others } = props;
|
|
10
|
+
const { value: rootValue, disabled: rootDisabled, onItemOpen$, onItemClose$ } = useAccordionRootContext();
|
|
11
|
+
const fallbackValue = useId({
|
|
12
|
+
prefix: "entry-ui-qwik-accordion-item-"
|
|
13
|
+
});
|
|
14
|
+
const value = useComputed$(() => _value ?? fallbackValue);
|
|
15
|
+
const open = useComputed$(() => rootValue.value.includes(value.value));
|
|
16
|
+
const disabled = useComputed$(() => _disabled || rootDisabled.value);
|
|
17
|
+
const triggerId = useIdManager({
|
|
18
|
+
prefix: "entry-ui-qwik-accordion-item-trigger-"
|
|
19
|
+
});
|
|
20
|
+
const panelId = useIdManager({
|
|
21
|
+
prefix: "entry-ui-qwik-accordion-item-panel-"
|
|
22
|
+
});
|
|
23
|
+
const setOpen$ = $((open2) => {
|
|
24
|
+
if (open2) {
|
|
25
|
+
onItemOpen$(value.value);
|
|
26
|
+
} else {
|
|
27
|
+
onItemClose$(value.value);
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
useContextProvider(AccordionItemContext, {
|
|
31
|
+
value,
|
|
32
|
+
open,
|
|
33
|
+
setOpen$,
|
|
34
|
+
disabled,
|
|
35
|
+
triggerId,
|
|
36
|
+
panelId
|
|
37
|
+
});
|
|
38
|
+
return /* @__PURE__ */ jsx(Primitive.div, {
|
|
39
|
+
as,
|
|
40
|
+
"data-entry-ui-qwik-accordion-item": "",
|
|
41
|
+
"data-state": open.value ? "open" : "closed",
|
|
42
|
+
"data-disabled": disabled.value ? "" : void 0,
|
|
43
|
+
...others,
|
|
44
|
+
children: /* @__PURE__ */ jsx(Slot, {})
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
export {
|
|
48
|
+
AccordionItem
|
|
49
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { PropsOf, Component } from '@qwik.dev/core';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the `Accordion.Item` component.
|
|
4
|
+
* Extends the standard HTML attributes for a `<div>` element.
|
|
5
|
+
*/
|
|
6
|
+
export interface AccordionItemProps extends PropsOf<'div'> {
|
|
7
|
+
/**
|
|
8
|
+
* The element or component this component should render as.
|
|
9
|
+
*
|
|
10
|
+
* @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
|
|
11
|
+
*
|
|
12
|
+
* @default "div"
|
|
13
|
+
*/
|
|
14
|
+
as?: string | Component;
|
|
15
|
+
/**
|
|
16
|
+
* A unique value that identifies this accordion item.
|
|
17
|
+
* If no value is provided, a unique ID will be generated automatically.
|
|
18
|
+
* Use when controlling the accordion programmatically, or to set an initial open state.
|
|
19
|
+
*
|
|
20
|
+
* @default undefined
|
|
21
|
+
*/
|
|
22
|
+
value?: string;
|
|
23
|
+
/**
|
|
24
|
+
* When `true`, prevents the user from interacting with the accordion item.
|
|
25
|
+
*
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { AccordionItemHeaderProps } from './accordion-item-header.types';
|
|
2
|
+
/**
|
|
3
|
+
* A heading that labels the corresponding panel.
|
|
4
|
+
*
|
|
5
|
+
* It provides a semantic structure to the collapsible section,
|
|
6
|
+
* ensuring it follows accessibility best practices by wrapping
|
|
7
|
+
* the interactive trigger in a heading element.
|
|
8
|
+
*
|
|
9
|
+
* Renders an `<h3>` element.
|
|
10
|
+
*/
|
|
11
|
+
export declare const AccordionItemHeader: import("@qwik.dev/core").Component<AccordionItemHeaderProps>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "@qwik.dev/core/jsx-runtime";
|
|
2
|
+
import { component$, Slot } from "@qwik.dev/core";
|
|
3
|
+
import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
|
|
4
|
+
import { useAccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
|
|
5
|
+
const AccordionItemHeader = component$((props) => {
|
|
6
|
+
const { as = "h3", ...others } = props;
|
|
7
|
+
const { open, disabled } = useAccordionItemContext();
|
|
8
|
+
return /* @__PURE__ */ jsx(Primitive.h3, {
|
|
9
|
+
as,
|
|
10
|
+
"data-entry-ui-qwik-accordion-item-header": "",
|
|
11
|
+
"data-state": open.value ? "open" : "closed",
|
|
12
|
+
"data-disabled": disabled.value ? "" : void 0,
|
|
13
|
+
...others,
|
|
14
|
+
children: /* @__PURE__ */ jsx(Slot, {})
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
export {
|
|
18
|
+
AccordionItemHeader
|
|
19
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { PropsOf, Component } from '@qwik.dev/core';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the `Accordion.ItemHeader` component.
|
|
4
|
+
* Extends the standard HTML attributes for an `<h3>` element.
|
|
5
|
+
*/
|
|
6
|
+
export interface AccordionItemHeaderProps extends PropsOf<'h3'> {
|
|
7
|
+
/**
|
|
8
|
+
* The element or component this component should render as.
|
|
9
|
+
*
|
|
10
|
+
* @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
|
|
11
|
+
*
|
|
12
|
+
* @default "h3"
|
|
13
|
+
*/
|
|
14
|
+
as?: string | Component;
|
|
15
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { AccordionItemIndicatorProps } from './accordion-item-indicator.types';
|
|
2
|
+
/**
|
|
3
|
+
* An optional visual indicator that reflects the item's open or closed state.
|
|
4
|
+
* It typically displays an icon or other visual cue to show the current status.
|
|
5
|
+
*
|
|
6
|
+
* Renders a `<span>` element.
|
|
7
|
+
*/
|
|
8
|
+
export declare const AccordionItemIndicator: import("@qwik.dev/core").Component<AccordionItemIndicatorProps>;
|