From 05ad94514ac4c67364d8bb07c1e16376a3fdd56d Mon Sep 17 00:00:00 2001 From: Calcite Admin Date: Thu, 24 Oct 2024 15:23:47 -0700 Subject: [PATCH] docs: update component READMEs (#10600) This PR was automatically generated by the update-doc GitHub action Co-authored-by: benelan <10986395+benelan@users.noreply.github.com> --- .../calcite-components/src/components.d.ts | 100 ------------------ .../src/components/action/readme.md | 2 + .../src/components/date-picker-day/readme.md | 6 +- .../date-picker-month-header/readme.md | 18 +++- .../components/date-picker-month/readme.md | 33 ++++-- .../src/components/date-picker/readme.md | 46 ++++---- .../src/components/icon/readme.md | 2 - .../components/input-date-picker/readme.md | 11 +- .../src/components/list/readme.md | 41 +++---- .../src/components/option/readme.md | 14 +++ .../src/components/select/readme.md | 14 ++- 11 files changed, 123 insertions(+), 164 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 70288fce667..9dee40c58d4 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -9,191 +9,91 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Intera import { RequestedItem } from "./components/accordion/interfaces"; import { IconNameOrString } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; -import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, AlertQueue } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; -import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; -import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -import { ButtonMessages } from "./components/button/assets/button/t9n"; -import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; -import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; -import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { HoverRange } from "./utils/date"; import { DateLocaleData } from "./components/date-picker/utils"; -import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; -import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; -import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; -import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; -import { InputMessages } from "./components/input/assets/input/t9n"; -import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; -import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; -import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -import { MenuMessages } from "./components/menu/assets/menu/t9n"; -import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -import { ModalMessages } from "./components/modal/assets/modal/t9n"; -import { NoticeMessages } from "./components/notice/assets/notice/t9n"; -import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; -import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -import { PopoverMessages } from "./components/popover/assets/popover/t9n"; -import { RatingMessages } from "./components/rating/assets/rating/t9n"; -import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -import { TableMessages } from "./components/table/assets/table/t9n"; -import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -import { TipMessages } from "./components/tip/assets/tip/t9n"; -import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { IconNameOrString } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; -export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, AlertQueue } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; -export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; -export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -export { ButtonMessages } from "./components/button/assets/button/t9n"; -export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; -export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; -export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { HoverRange } from "./utils/date"; export { DateLocaleData } from "./components/date-picker/utils"; -export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; -export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; -export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; -export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; -export { InputMessages } from "./components/input/assets/input/t9n"; -export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; -export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; -export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -export { MenuMessages } from "./components/menu/assets/menu/t9n"; -export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -export { ModalMessages } from "./components/modal/assets/modal/t9n"; -export { NoticeMessages } from "./components/notice/assets/notice/t9n"; -export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; -export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -export { PopoverMessages } from "./components/popover/assets/popover/t9n"; -export { RatingMessages } from "./components/rating/assets/rating/t9n"; -export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -export { TableMessages } from "./components/table/assets/table/t9n"; -export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -export { TipMessages } from "./components/tip/assets/tip/t9n"; -export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/components/action/readme.md b/packages/calcite-components/src/components/action/readme.md index e2929e717ce..68910df5b98 100755 --- a/packages/calcite-components/src/components/action/readme.md +++ b/packages/calcite-components/src/components/action/readme.md @@ -64,6 +64,7 @@ Type: `Promise` - [calcite-action-group](../action-group) - [calcite-action-menu](../action-menu) - [calcite-action-pad](../action-pad) +- [calcite-date-picker-month-header](../date-picker-month-header) - [calcite-flow-item](../flow-item) - [calcite-list-item](../list-item) - [calcite-menu-item](../menu-item) @@ -90,6 +91,7 @@ graph TD; calcite-action-group --> calcite-action calcite-action-menu --> calcite-action calcite-action-pad --> calcite-action + calcite-date-picker-month-header --> calcite-action calcite-flow-item --> calcite-action calcite-list-item --> calcite-action calcite-menu-item --> calcite-action diff --git a/packages/calcite-components/src/components/date-picker-day/readme.md b/packages/calcite-components/src/components/date-picker-day/readme.md index 8a3787f38f1..94c08bd32a3 100644 --- a/packages/calcite-components/src/components/date-picker-day/readme.md +++ b/packages/calcite-components/src/components/date-picker-day/readme.md @@ -21,9 +21,9 @@ ## Events -| Event | Description | Type | -| ------------------ | ---------------------------- | ------------------- | -| `calciteDaySelect` | Fires when user selects day. | `CustomEvent` | +| Event | Description | Type | +| -------------------------- | ---------------------------- | ------------------- | +| `calciteInternalDaySelect` | Fires when user selects day. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/date-picker-month-header/readme.md b/packages/calcite-components/src/components/date-picker-month-header/readme.md index ed7af88b882..13602062c39 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/readme.md +++ b/packages/calcite-components/src/components/date-picker-month-header/readme.md @@ -11,6 +11,7 @@ | `localeData` | -- | CLDR locale data for translated calendar info. | `DateLocaleData` | `undefined` | | `max` | -- | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | | `min` | -- | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | +| `monthStyle` | `month-style` | Specifies the monthStyle used by the component. | `"abbreviated" \| "wide"` | `undefined` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | | `selectedDate` | -- | Already selected date. | `Date` | `undefined` | @@ -18,18 +19,27 @@ ### Used by -- [calcite-date-picker](../date-picker) +- [calcite-date-picker-month](../date-picker-month) ### Depends on -- [calcite-icon](../icon) +- [calcite-select](../select) +- [calcite-option](../option) +- [calcite-action](../action) ### Graph ```mermaid graph TD; - calcite-date-picker-month-header --> calcite-icon - calcite-date-picker --> calcite-date-picker-month-header + calcite-date-picker-month-header --> calcite-select + calcite-date-picker-month-header --> calcite-option + calcite-date-picker-month-header --> calcite-action + calcite-select --> calcite-icon + calcite-select --> calcite-input-message + calcite-input-message --> calcite-icon + calcite-action --> calcite-loader + calcite-action --> calcite-icon + calcite-date-picker-month --> calcite-date-picker-month-header style calcite-date-picker-month-header fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/calcite-components/src/components/date-picker-month/readme.md b/packages/calcite-components/src/components/date-picker-month/readme.md index 52ddf034db5..9b042cff920 100644 --- a/packages/calcite-components/src/components/date-picker-month/readme.md +++ b/packages/calcite-components/src/components/date-picker-month/readme.md @@ -4,16 +4,19 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------- | ----------------------------------------------------- | ------------------- | ------------ | -| `activeDate` | -- | The currently active Date. | `Date` | `new Date()` | -| `endDate` | -- | End date currently active. | `Date` | `undefined` | -| `hoverRange` | -- | The range of dates currently being hovered. | `HoverRange` | `undefined` | -| `max` | -- | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | -| `min` | -- | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | -| `selectedDate` | -- | Already selected date. | `Date` | `undefined` | -| `startDate` | -- | Start date currently active. | `Date` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | +| `activeDate` | -- | The currently active Date. | `Date` | `new Date()` | +| `endDate` | -- | End date currently active. | `Date` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `hoverRange` | -- | The range of dates currently being hovered. | `HoverRange` | `undefined` | +| `max` | -- | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | +| `min` | -- | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | +| `monthStyle` | `month-style` | Specifies the monthStyle used by the component. | `"abbreviated" \| "wide"` | `undefined` | +| `range` | `range` | When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | +| `selectedDate` | -- | Already selected date. | `Date` | `undefined` | +| `startDate` | -- | Start date currently active. | `Date` | `undefined` | ## Dependencies @@ -24,12 +27,22 @@ ### Depends on - [calcite-date-picker-day](../date-picker-day) +- [calcite-date-picker-month-header](../date-picker-month-header) ### Graph ```mermaid graph TD; calcite-date-picker-month --> calcite-date-picker-day + calcite-date-picker-month --> calcite-date-picker-month-header + calcite-date-picker-month-header --> calcite-select + calcite-date-picker-month-header --> calcite-option + calcite-date-picker-month-header --> calcite-action + calcite-select --> calcite-icon + calcite-select --> calcite-input-message + calcite-input-message --> calcite-icon + calcite-action --> calcite-loader + calcite-action --> calcite-icon calcite-date-picker --> calcite-date-picker-month style calcite-date-picker-month fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/calcite-components/src/components/date-picker/readme.md b/packages/calcite-components/src/components/date-picker/readme.md index 5d939459f7b..53836bf039c 100644 --- a/packages/calcite-components/src/components/date-picker/readme.md +++ b/packages/calcite-components/src/components/date-picker/readme.md @@ -6,22 +6,24 @@ For comprehensive guidance on using and implementing `calcite-date-picker`, refe ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | -| `activeDate` | -- | Specifies the component's active date. | `Date` | `undefined` | -| `activeRange` | `active-range` | When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. | `"end" \| "start"` | `undefined` | -| `headingLevel` | `heading-level` | Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `max` | `max` | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | -| `maxAsDate` | -- | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `DatePickerMessages` | `undefined` | -| `min` | `min` | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | -| `minAsDate` | -- | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | `boolean` | `false` | -| `range` | `range` | When `true`, activates the component's range mode to allow a start and end date. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `value` | `value` | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). | `string \| string[]` | `undefined` | -| `valueAsDate` | -- | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------- | +| `activeDate` | -- | Specifies the component's active date. | `Date` | `undefined` | +| `activeRange` | `active-range` | When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. | `"end" \| "start"` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` | +| `max` | `max` | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | +| `maxAsDate` | -- | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `DatePickerMessages` | `undefined` | +| `min` | `min` | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | +| `minAsDate` | -- | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | +| `monthStyle` | `month-style` | Specifies the monthStyle used by the component. | `"abbreviated" \| "wide"` | `"wide"` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | `boolean` | `false` | +| `range` | `range` | When `true`, activates the component's range mode to allow a start and end date. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `value` | `value` | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). | `string \| string[]` | `undefined` | +| `valueAsDate` | -- | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]` | `undefined` | ## Events @@ -48,17 +50,23 @@ Type: `Promise` ### Depends on -- [calcite-date-picker-month-header](../date-picker-month-header) - [calcite-date-picker-month](../date-picker-month) ### Graph ```mermaid graph TD; - calcite-date-picker --> calcite-date-picker-month-header calcite-date-picker --> calcite-date-picker-month - calcite-date-picker-month-header --> calcite-icon calcite-date-picker-month --> calcite-date-picker-day + calcite-date-picker-month --> calcite-date-picker-month-header + calcite-date-picker-month-header --> calcite-select + calcite-date-picker-month-header --> calcite-option + calcite-date-picker-month-header --> calcite-action + calcite-select --> calcite-icon + calcite-select --> calcite-input-message + calcite-input-message --> calcite-icon + calcite-action --> calcite-loader + calcite-action --> calcite-icon calcite-input-date-picker --> calcite-date-picker style calcite-date-picker fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/calcite-components/src/components/icon/readme.md b/packages/calcite-components/src/components/icon/readme.md index a72cd7b0bcf..2f605dd9453 100644 --- a/packages/calcite-components/src/components/icon/readme.md +++ b/packages/calcite-components/src/components/icon/readme.md @@ -36,7 +36,6 @@ For comprehensive guidance on using and implementing `calcite-icon`, refer to th - [calcite-chip](../chip) - [calcite-combobox](../combobox) - [calcite-combobox-item](../combobox-item) -- [calcite-date-picker-month-header](../date-picker-month-header) - [calcite-dropdown-item](../dropdown-item) - [calcite-handle](../handle) - [calcite-input](../input) @@ -84,7 +83,6 @@ graph TD; calcite-chip --> calcite-icon calcite-combobox --> calcite-icon calcite-combobox-item --> calcite-icon - calcite-date-picker-month-header --> calcite-icon calcite-dropdown-item --> calcite-icon calcite-handle --> calcite-icon calcite-input --> calcite-icon diff --git a/packages/calcite-components/src/components/input-date-picker/readme.md b/packages/calcite-components/src/components/input-date-picker/readme.md index f6724f2c989..6239a7084ba 100644 --- a/packages/calcite-components/src/components/input-date-picker/readme.md +++ b/packages/calcite-components/src/components/input-date-picker/readme.md @@ -19,6 +19,7 @@ For comprehensive guidance on using and implementing `calcite-input-date-picker` | `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `any` | `undefined` | | `min` | `min` | Specifies the earliest allowed date ("yyyy-mm-dd"). | `string` | `undefined` | | `minAsDate` | -- | Specifies the earliest allowed date as a full date object. | `Date` | `undefined` | +| `monthStyle` | `month-style` | Specifies the monthStyle used by the component. | `"abbreviated" \| "wide"` | `"wide"` | | `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | | `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` | | `open` | `open` | When `true`, displays the `calcite-date-picker` component. | `boolean` | `false` | @@ -93,10 +94,16 @@ graph TD; calcite-input-text --> calcite-icon calcite-input-text --> calcite-input-message calcite-input-message --> calcite-icon - calcite-date-picker --> calcite-date-picker-month-header calcite-date-picker --> calcite-date-picker-month - calcite-date-picker-month-header --> calcite-icon calcite-date-picker-month --> calcite-date-picker-day + calcite-date-picker-month --> calcite-date-picker-month-header + calcite-date-picker-month-header --> calcite-select + calcite-date-picker-month-header --> calcite-option + calcite-date-picker-month-header --> calcite-action + calcite-select --> calcite-icon + calcite-select --> calcite-input-message + calcite-action --> calcite-loader + calcite-action --> calcite-icon style calcite-input-date-picker fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/calcite-components/src/components/list/readme.md b/packages/calcite-components/src/components/list/readme.md index 6ce602fe36e..41a353ecffd 100644 --- a/packages/calcite-components/src/components/list/readme.md +++ b/packages/calcite-components/src/components/list/readme.md @@ -10,26 +10,27 @@ A general purpose list that enables users to construct list items that conform t ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ----------- | -| `canPull` | -- | When provided, the method will be called to determine whether the element can move from the list. | `(detail: ListDragDetail) => boolean` | `undefined` | -| `canPut` | -- | When provided, the method will be called to determine whether the element can be added from another list. | `(detail: ListDragDetail) => boolean` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `dragEnabled` | `drag-enabled` | When `true`, `calcite-list-item`s are sortable via a draggable button. | `boolean` | `false` | -| `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. | `boolean` | `false` | -| `filterPlaceholder` | `filter-placeholder` | Placeholder text for the component's filter input field. | `string` | `undefined` | -| `filterProps` | -- | Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). | `string[]` | `undefined` | -| `filterText` | `filter-text` | Text for the component's filter input field. | `string` | `undefined` | -| `filteredData` | -- | The currently filtered `calcite-list-item` data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` | -| `filteredItems` | -- | The currently filtered `calcite-list-item`s. | `HTMLCalciteListItemElement[]` | `[]` | -| `group` | `group` | The list's group identifier. To drag elements from one list into another, both lists must have the same group value. | `string` | `undefined` | -| `label` | `label` | Specifies an accessible name for the component. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ListMessages` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `selectedItems` | -- | The currently selected items. | `HTMLCalciteListItemElement[]` | `[]` | -| `selectionAppearance` | `selection-appearance` | Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). | `"border" \| "icon"` | `"icon"` | -| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. | `"multiple" \| "none" \| "single" \| "single-persist"` | `"none"` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- | --------------- | +| `canPull` | -- | When provided, the method will be called to determine whether the element can move from the list. | `(detail: ListDragDetail) => boolean` | `undefined` | +| `canPut` | -- | When provided, the method will be called to determine whether the element can be added from another list. | `(detail: ListDragDetail) => boolean` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `dragEnabled` | `drag-enabled` | When `true`, `calcite-list-item`s are sortable via a draggable button. | `boolean` | `false` | +| `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. | `boolean` | `false` | +| `filterPlaceholder` | `filter-placeholder` | Placeholder text for the component's filter input field. | `string` | `undefined` | +| `filterProps` | -- | Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). | `string[]` | `undefined` | +| `filterText` | `filter-text` | Text for the component's filter input field. | `string` | `undefined` | +| `filteredData` | -- | The currently filtered `calcite-list-item` data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` | +| `filteredItems` | -- | The currently filtered `calcite-list-item`s. | `HTMLCalciteListItemElement[]` | `[]` | +| `group` | `group` | The list's group identifier. To drag elements from one list into another, both lists must have the same group value. | `string` | `undefined` | +| `interactionMode` | `interaction-mode` | Specifies the interaction mode of the component. `"interactive"` allows interaction styling and pointer changes on hover `"static"` does not allow interaction styling and pointer changes on hover The `"static"` value should only be used when `selectionMode` is `"none"`. | `"interactive" \| "static"` | `"interactive"` | +| `label` | `label` | Specifies an accessible name for the component. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ListMessages` | `undefined` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `selectedItems` | -- | The currently selected items. | `HTMLCalciteListItemElement[]` | `[]` | +| `selectionAppearance` | `selection-appearance` | Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). | `"border" \| "icon"` | `"icon"` | +| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. | `"multiple" \| "none" \| "single" \| "single-persist"` | `"none"` | ## Events diff --git a/packages/calcite-components/src/components/option/readme.md b/packages/calcite-components/src/components/option/readme.md index ca2be50c1bd..62ab3393889 100644 --- a/packages/calcite-components/src/components/option/readme.md +++ b/packages/calcite-components/src/components/option/readme.md @@ -13,6 +13,20 @@ For comprehensive guidance on using and implementing `calcite-option`, refer to | `selected` | `selected` | When `true`, the component is selected. | `boolean` | `undefined` | | `value` | `value` | The component's value. | `any` | `undefined` | +## Dependencies + +### Used by + +- [calcite-date-picker-month-header](../date-picker-month-header) + +### Graph + +```mermaid +graph TD; + calcite-date-picker-month-header --> calcite-option + style calcite-option fill:#f9f,stroke:#333,stroke-width:4px +``` + --- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/calcite-components/src/components/select/readme.md b/packages/calcite-components/src/components/select/readme.md index 5113c0252a2..13bace1ad17 100644 --- a/packages/calcite-components/src/components/select/readme.md +++ b/packages/calcite-components/src/components/select/readme.md @@ -46,13 +46,18 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ---------------------------- | ---------------------------------------------------- | -| `--calcite-select-font-size` | The font size of `calcite-option`s in the component. | -| `--calcite-select-spacing` | The padding around the selected option text. | +| Name | Description | +| ----------------------------- | ---------------------------------------------------- | +| `--calcite-select-font-size` | The font size of `calcite-option`s in the component. | +| `--calcite-select-spacing` | The padding around the selected option text. | +| `--calcite-select-text-color` | The text color of the component. | ## Dependencies +### Used by + +- [calcite-date-picker-month-header](../date-picker-month-header) + ### Depends on - [calcite-icon](../icon) @@ -65,6 +70,7 @@ graph TD; calcite-select --> calcite-icon calcite-select --> calcite-input-message calcite-input-message --> calcite-icon + calcite-date-picker-month-header --> calcite-select style calcite-select fill:#f9f,stroke:#333,stroke-width:4px ```