This commit is contained in:
+44
@@ -0,0 +1,44 @@
|
||||
import { Context } from "runed";
|
||||
import { type ReadableBoxedValues } from "svelte-toolbelt";
|
||||
import type { BitsConfigPropsWithoutChildren } from "./types.js";
|
||||
type BitsConfigStateProps = ReadableBoxedValues<BitsConfigPropsWithoutChildren>;
|
||||
export declare const BitsConfigContext: Context<BitsConfigState>;
|
||||
/**
|
||||
* Gets the current Bits UI configuration state from the context.
|
||||
*
|
||||
* Returns a default configuration (where all values are `undefined`) if no configuration is found.
|
||||
*/
|
||||
export declare function getBitsConfig(): Required<ReadableBoxedValues<BitsConfigPropsWithoutChildren>>;
|
||||
/**
|
||||
* Creates and sets a new Bits UI configuration state that inherits from parent configs.
|
||||
*
|
||||
* @param opts - Configuration options for this level
|
||||
* @returns The configuration state instance
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // In a component that wants to set a default portal target
|
||||
* const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
|
||||
*
|
||||
* // Child components will inherit this config and can override specific values
|
||||
* const childConfig = useBitsConfig({ someOtherProp: box("value") });
|
||||
* // childConfig still has defaultPortalTo="#some-element" from parent
|
||||
* ```
|
||||
*/
|
||||
export declare function useBitsConfig(opts: BitsConfigStateProps): BitsConfigState;
|
||||
/**
|
||||
* Configuration state that inherits from parent configurations.
|
||||
*
|
||||
* @example
|
||||
* Config resolution:
|
||||
* ```
|
||||
* Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
|
||||
* Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
|
||||
* Level 3: { theme: "light" } // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
|
||||
* ```
|
||||
*/
|
||||
export declare class BitsConfigState {
|
||||
readonly opts: Required<BitsConfigStateProps>;
|
||||
constructor(parent: BitsConfigState | null, opts: BitsConfigStateProps);
|
||||
}
|
||||
export {};
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
import { Context } from "runed";
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
export const BitsConfigContext = new Context("BitsConfig");
|
||||
/**
|
||||
* Gets the current Bits UI configuration state from the context.
|
||||
*
|
||||
* Returns a default configuration (where all values are `undefined`) if no configuration is found.
|
||||
*/
|
||||
export function getBitsConfig() {
|
||||
const fallback = new BitsConfigState(null, {});
|
||||
return BitsConfigContext.getOr(fallback).opts;
|
||||
}
|
||||
/**
|
||||
* Creates and sets a new Bits UI configuration state that inherits from parent configs.
|
||||
*
|
||||
* @param opts - Configuration options for this level
|
||||
* @returns The configuration state instance
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // In a component that wants to set a default portal target
|
||||
* const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
|
||||
*
|
||||
* // Child components will inherit this config and can override specific values
|
||||
* const childConfig = useBitsConfig({ someOtherProp: box("value") });
|
||||
* // childConfig still has defaultPortalTo="#some-element" from parent
|
||||
* ```
|
||||
*/
|
||||
export function useBitsConfig(opts) {
|
||||
return BitsConfigContext.set(new BitsConfigState(BitsConfigContext.getOr(null), opts));
|
||||
}
|
||||
/**
|
||||
* Configuration state that inherits from parent configurations.
|
||||
*
|
||||
* @example
|
||||
* Config resolution:
|
||||
* ```
|
||||
* Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
|
||||
* Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
|
||||
* Level 3: { theme: "light" } // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
|
||||
* ```
|
||||
*/
|
||||
export class BitsConfigState {
|
||||
opts;
|
||||
constructor(parent, opts) {
|
||||
const resolveConfigOption = createConfigResolver(parent, opts);
|
||||
this.opts = {
|
||||
defaultPortalTo: resolveConfigOption((config) => config.defaultPortalTo),
|
||||
defaultLocale: resolveConfigOption((config) => config.defaultLocale),
|
||||
};
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Returns a config resolver that resolves a given config option's value.
|
||||
*
|
||||
* The resolver creates reactive boxes that resolve config option values using this priority:
|
||||
* 1. Current level's value (if defined)
|
||||
* 2. Parent level's value (if defined and current is undefined)
|
||||
* 3. `undefined` (if no value is found in either parent or child)
|
||||
*
|
||||
* @param parent - Parent configuration state (null if this is root level)
|
||||
* @param currentOpts - Current level's configuration options
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // Given this hierarchy:
|
||||
* // Root: { defaultPortalTo: "#some-element" }
|
||||
* // Child: { someOtherProp: "value" } // no defaultPortalTo specified
|
||||
*
|
||||
* const resolveConfigOption = createConfigResolver(parent, opts);
|
||||
* const portalTo = resolveConfigOption(config => config.defaultPortalTo);
|
||||
*
|
||||
* // portalTo.current === "#some-element" (inherited from parent)
|
||||
* // even when child didn't specify `defaultPortalTo`
|
||||
* ```
|
||||
*/
|
||||
function createConfigResolver(parent, currentOpts) {
|
||||
return (getter) => {
|
||||
const configOption = boxWith(() => {
|
||||
// try current opts first
|
||||
const value = getter(currentOpts)?.current;
|
||||
if (value !== undefined)
|
||||
return value;
|
||||
// if no parent, return undefined
|
||||
if (parent === null)
|
||||
return undefined;
|
||||
// get value from parent (which already has its own chain resolved)
|
||||
return getter(parent.opts)?.current;
|
||||
});
|
||||
return configOption;
|
||||
};
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import type { BitsConfigProps } from "../types.js";
|
||||
import { useBitsConfig } from "../bits-config.js";
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
|
||||
let { children, defaultPortalTo, defaultLocale }: BitsConfigProps = $props();
|
||||
|
||||
useBitsConfig({
|
||||
defaultPortalTo: boxWith(() => defaultPortalTo),
|
||||
defaultLocale: boxWith(() => defaultLocale),
|
||||
});
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { BitsConfigProps } from "../types.js";
|
||||
declare const BitsConfig: import("svelte").Component<BitsConfigProps, {}, "">;
|
||||
type BitsConfig = ReturnType<typeof BitsConfig>;
|
||||
export default BitsConfig;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as BitsConfig } from "./components/bits-config.svelte";
|
||||
export { getBitsConfig, BitsConfigState } from "./bits-config.js";
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as BitsConfig } from "./components/bits-config.svelte";
|
||||
export { getBitsConfig, BitsConfigState } from "./bits-config.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./exports.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./exports.js";
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import { type Getter, type ReadableBox } from "svelte-toolbelt";
|
||||
/**
|
||||
* Resolves a locale value using the prop, the config default, or a fallback.
|
||||
*
|
||||
* Default value: `"en"`
|
||||
*/
|
||||
export declare const resolveLocaleProp: (getProp: Getter<string | undefined>) => ReadableBox<string>;
|
||||
/**
|
||||
* Resolves a portal's `to` value using the prop, the config default, or a fallback.
|
||||
*
|
||||
* Default value: `"body"`
|
||||
*/
|
||||
export declare const resolvePortalToProp: (getProp: Getter<string | Element | undefined>) => ReadableBox<string | Element>;
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import { getBitsConfig } from "./bits-config.js";
|
||||
/**
|
||||
* Creates a generic prop resolver that follows a standard priority chain:
|
||||
* 1. The getter's prop value (if defined)
|
||||
* 2. The config default value (if no getter prop value is defined)
|
||||
* 3. The fallback value (if no config value found)
|
||||
*/
|
||||
function createPropResolver(configOption, fallback) {
|
||||
return (getProp) => {
|
||||
const config = getBitsConfig();
|
||||
return boxWith(() => {
|
||||
// 1. return the prop's value, if provided
|
||||
const propValue = getProp();
|
||||
if (propValue !== undefined)
|
||||
return propValue;
|
||||
// 2. return the resolved config option value, if available
|
||||
const option = configOption(config).current;
|
||||
if (option !== undefined)
|
||||
return option;
|
||||
// 3. return the fallback if no other value is found
|
||||
return fallback;
|
||||
});
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Resolves a locale value using the prop, the config default, or a fallback.
|
||||
*
|
||||
* Default value: `"en"`
|
||||
*/
|
||||
export const resolveLocaleProp = createPropResolver((config) => config.defaultLocale, "en");
|
||||
/**
|
||||
* Resolves a portal's `to` value using the prop, the config default, or a fallback.
|
||||
*
|
||||
* Default value: `"body"`
|
||||
*/
|
||||
export const resolvePortalToProp = createPropResolver((config) => config.defaultPortalTo, "body");
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import type { WithChildren } from "../../../internal/types.js";
|
||||
import type { PortalTarget } from "../portal/types.js";
|
||||
export type BitsConfigPropsWithoutChildren = {
|
||||
/**
|
||||
* The default portal `to`/target to use for the `Portal` components throughout the app.
|
||||
*/
|
||||
defaultPortalTo?: PortalTarget;
|
||||
/**
|
||||
* The default locale to use for the components that support localization.
|
||||
*/
|
||||
defaultLocale?: string;
|
||||
};
|
||||
export type BitsConfigProps = WithChildren<BitsConfigPropsWithoutChildren>;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user