@wikimedia/codex
Version:
Codex Design System for Wikimedia
122 lines (121 loc) • 7.15 kB
TypeScript
/**
* This file contains all constants used in the codex package.
*
* Exported constants should be marked with `@public` comments in this file, AND explicitly
* exported in lib.ts.
*
* IMPORTANT NOTE: All constants should be added to the Types and Constants page on the Codex docs
* site. Refer to `packages/codex-docs/docs/components/types-and-constants.md`.
*/
import { ComputedRef, Ref, InjectionKey, WritableComputedRef } from 'vue';
import { TabData, ValidationStatusType } from './types';
import { Placement, Side } from '@floating-ui/vue';
/**
* String prefix for use in namespacing, etc
*/
export declare const LibraryPrefix = "cdx";
export declare const ContainerSizes: readonly ["medium", "large", "x-large", "full"];
export declare const ButtonActions: readonly ["default", "progressive", "destructive"];
export declare const ButtonWeights: readonly ["normal", "primary", "quiet"];
export declare const ButtonSizes: readonly ["small", "medium", "large"];
/**
* Corresponds to the native button types, see
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes.
*/
export declare const ButtonTypes: readonly ["button", "submit", "reset"];
export declare const IconSizes: readonly ["x-small", "small", "medium"];
export declare const StatusTypes: readonly ["notice", "warning", "error", "success"];
export declare const statusTypeValidator: import("./types").StringTypeValidator<"notice" | "warning" | "error" | "success">;
export declare const TextInputTypes: readonly ["text", "search", "number", "email", "month", "password", "tel", "url", "week", "date", "datetime-local", "time"];
export declare const ValidationStatusTypes: readonly ["default", "warning", "error", "success"];
export declare const MenuStates: readonly ["selected", "highlighted", "highlightedViaKeyboard", "active"];
export declare const TableTextAlignments: string[];
/**
* The predefined aspect ratios that can be applied to the image.
*/
export declare const ImageAspectRatios: readonly ["16:9", "3:2", "4:3", "1:1", "3:4", "2:3"];
/**
* Validator for the `aspectRatio` prop.
*/
export declare const imageAspectRatioValidator: import("./types").StringTypeValidator<"16:9" | "3:2" | "4:3" | "1:1" | "3:4" | "2:3">;
/**
* The available options for the `object-fit` CSS property.
*/
export declare const ObjectFitOptions: readonly ["fill", "contain", "cover", "none", "scale-down"];
/**
* Validator for the `objectFit` prop.
*/
export declare const objectFitValidator: import("./types").StringTypeValidator<"none" | "fill" | "contain" | "cover" | "scale-down">;
/**
* The available options for the `object-position` CSS property.
*/
export declare const ObjectPositions: readonly ["top", "bottom", "left", "right", "center"];
/**
* Validator for the `position` prop.
*/
export declare const imagePositionValidator: import("./types").StringTypeValidator<"top" | "right" | "bottom" | "left" | "center">;
/**
* Available options for Accordion's `separation` prop.
*/
export declare const AccordionSeparations: readonly ["none", "minimal", "divider", "outline"];
/**
* Default length of delay for debouncing, in milliseconds.
*/
export declare const DebounceInterval = 120;
/**
* Default length of delay for displaying pending state, in milliseconds.
*/
export declare const PendingDelay = 500;
/**
* Sometimes, a menu will have an extra item at the end that provides some
* additional behavior, e.g. TypeaheadSearch's final menu item that links to the
* search page for the current search query. This extra item will not have a
* true value, so this string can be used in the code to identify it as a
* footer item.
*/
export declare const MenuFooterValue = "cdx-menu-footer-item";
export declare const TabsKey: InjectionKey<ComputedRef<Map<string, TabData>>>;
export declare const ActiveTabKey: InjectionKey<WritableComputedRef<string>>;
export declare const AllowArbitraryKey: InjectionKey<Ref<boolean>>;
export declare const FieldInputIdKey: InjectionKey<ComputedRef<string | undefined>>;
export declare const FieldDescriptionIdKey: InjectionKey<ComputedRef<string | undefined>>;
export declare const FieldStatusKey: InjectionKey<Ref<ValidationStatusType>>;
export declare const DisabledKey: InjectionKey<Ref<boolean>>;
/**
* A utility class to indicate that certain elements (like thumbnail images)
* should be excluded from any invert-based "dark mode" theming applied
* downstream (by the DarkMode extension, for example). No styles are applied
* to this class within Codex.
*
* https://phabricator.wikimedia.org/T345281
*/
export declare const NoInvertClass: "cdx-no-invert";
/**
* Special property of a table row for a unique identifier. Required when both sorting and row
* selection are enabled.
*
* @public
*/
export declare const TableRowIdentifier: unique symbol;
export declare const TablePaginationPositions: readonly ["top", "bottom", "both"];
/**
* This constant contains all i18n message keys which are currently in use in
* the library. Only these values may be provided as key arguments to the
* useI18n composable. If a new message needs to be defined, the key should
* be added here as well. External consumers of Codex (including MediaWiki)
* which implement their own I18n systems will want to ensure that they have
* translations available for all messages defined here (Codex does not
* currently provide its own messages beyond English default values, although
* this may change in a future major version release).
*/
export declare const I18nMessageKeys: readonly ["cdx-breadcrumb-navigation-label", "cdx-breadcrumb-overflow-label", "cdx-chip-input-chip-added", "cdx-chip-input-chip-removed", "cdx-dialog-close-button-label", "cdx-input-chip-aria-description", "cdx-label-optional-flag", "cdx-message-dismiss-button-label", "cdx-popover-close-button-label", "cdx-search-input-search-button-label", "cdx-table-pager-button-first-page", "cdx-table-pager-button-last-page", "cdx-table-pager-button-next-page", "cdx-table-pager-button-prev-page", "cdx-table-pager-items-per-page-current", "cdx-table-pager-items-per-page-default", "cdx-table-pagination-status-message-determinate-long", "cdx-table-pagination-status-message-determinate-short", "cdx-table-pagination-status-message-indeterminate-short", "cdx-table-pagination-status-message-indeterminate-long", "cdx-table-pagination-status-message-indeterminate-final", "cdx-table-pagination-status-message-pending", "cdx-table-select-all-label", "cdx-table-select-row-label", "cdx-table-sort-caption", "cdx-typeahead-search-search-results-label"];
/**
* Components like Popover and Tooltip use Floating UI to position itself.
* This object's key-value pair is placements as the key and its opposite side as the value.
* Opposite sides include 'top', 'bottom', 'left', and 'right'.
* The final placement's opposite side is needed to reposition the component
* e.g. when it flips across an axis.
* In Popover, apply negative pixel to final placement's opposite side.
* In Tooltip, set the `transform-origin` to the final placement's opposite side.
*/
export declare const oppositeSides: Record<Placement, Side>;