diff --git a/CLAUDE.md b/CLAUDE.md index 25fe582..b8a4b4f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,4 +1,39 @@ -This is the source of the R-ArcGIS Bridge package clacite which provides bindings to Esri Calcite Design System components. +- This is the source of the R-ArcGIS Bridge package {clacite} which provides bindings to Esri Calcite Design System components. +- The components were originally automatically generated by data-raw/generate-component-new.R +- The auto-generated shiny bindings are created via inst/www/calcite-bindings.js +- We are in the process of re-writing them manually. -The components are automatically generated by data-raw/generate-component-new.R -The shiny bindings are created via inst/www/calcite-bindings.js \ No newline at end of file +## Creating new components + +When creating a new component: + +- remind me to remove the component from R/components-generated.R +- remind me to remove the binding from inst/www/calcite-bindings.js +- create a new binding inst/www/calcite-{component}.js +- add the binding using `htmltools::htmlDependency()` + + +R/action.R example: +``` + action_binding <- htmltools::htmlDependency( + name = "calcite-action-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-action.js" + ) +``` + +- Component properties (except read-only) must be arguments +- Component slots must be arguments +- Ignore all deprecated properties and slots +- Bindings must register each event + +- New components must have a `inst/examples/calcite-{component}.R` file based on calcite JS examples + - The example should always use `verbatimTextOutput()` to show how components change + + +## Etiquette + +- Never run R code, ask me to. +- Use `compact()` to remove NULL elements from a list +- Use `rlang::arg_match()` to validate input string values \ No newline at end of file diff --git a/DESCRIPTION b/DESCRIPTION index 4621573..bb09f23 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,7 +1,7 @@ Package: calcite Title: Bindings to the Calcite Design System 'JavaScript' Component Library -Version: 0.1.2 +Version: 0.1.2.9000 Authors@R: person("Josiah", "Parry", , "josiah.parry@gmail.com", role = c("aut", "cre"), comment = c(ORCID = "0000-0001-9910-865X")) @@ -19,4 +19,4 @@ Imports: Encoding: UTF-8 Language: en Roxygen: list(markdown = TRUE) -RoxygenNote: 7.3.2 +RoxygenNote: 7.3.3 diff --git a/NAMESPACE b/NAMESPACE index 61f8f1a..e4b1f1c 100644 --- a/NAMESPACE +++ b/NAMESPACE @@ -87,8 +87,6 @@ export(calcite_tabs) export(calcite_text_area) export(calcite_tile) export(calcite_tile_group) -export(calcite_tile_select) -export(calcite_tile_select_group) export(calcite_time_picker) export(calcite_tip) export(calcite_tip_group) @@ -97,4 +95,7 @@ export(calcite_tooltip) export(calcite_tree) export(calcite_tree_item) export(calcite_version) +export(page_actionbar) +export(page_navbar) +export(page_sidebar) export(update_calcite) diff --git a/NEWS.md b/NEWS.md index 6c1829a..3226154 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,3 +1,17 @@ +# calcite (development version) + +- adds experimental page layous: `page_navbar()`, `page_sidebar()`, `page_actionbar()` +- manually implements numerous components for improved shiny integration and documentation clarity: + - `calcite_action()` + - `calcite_block()` + - `calcite_date_picker()` + - `calcite_tile()` + - `calcite_tile_group()` + - `calcite_slider()` + - `calcite_segmented_control_item()` + - `calcite_notice()` + - `calcite_panel()` + # calcite 0.1.2 - `calcite_button()` click handler can be tracked via `input$your_button$clicked` diff --git a/R/action-group.R b/R/action-group.R new file mode 100644 index 0000000..4ed00d4 --- /dev/null +++ b/R/action-group.R @@ -0,0 +1,93 @@ +#' Create a Calcite Action Group Component +#' +#' Groups multiple action components together with consistent layout and spacing. +#' Action groups can be used within action bars to organize related actions. +#' +#' @param ... Child `calcite_action()` components or other content +#' @param id Optional ID for the action group +#' @param layout Layout style: "vertical", "horizontal", or "grid" +#' @param columns Number of columns when layout is "grid" (1-6) +#' @param scale Size of the group: "s" (small), "m" (medium), or "l" (large) +#' @param expanded Whether the group is expanded +#' @param label Accessibility label for the group +#' @param slot Optional slot name (e.g., "bottom-actions" for action bars) +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/action-group/) +#' @examples +#' # Basic action group with vertical layout +#' calcite_action_group( +#' calcite_action(text = "Add", icon = "plus"), +#' calcite_action(text = "Edit", icon = "pencil"), +#' calcite_action(text = "Delete", icon = "trash") +#' ) +#' +#' # Horizontal group with custom scale +#' calcite_action_group( +#' layout = "horizontal", +#' scale = "l", +#' calcite_action(text = "Save", icon = "save"), +#' calcite_action(text = "Cancel", icon = "x") +#' ) +#' +#' # Grid layout with 2 columns +#' calcite_action_group( +#' layout = "grid", +#' columns = 2, +#' calcite_action(text = "A", icon = "letter-a"), +#' calcite_action(text = "B", icon = "letter-b"), +#' calcite_action(text = "C", icon = "letter-c"), +#' calcite_action(text = "D", icon = "letter-d") +#' ) +calcite_action_group <- function( + ..., + id = NULL, + layout = NULL, + columns = NULL, + scale = NULL, + expanded = NULL, + label = NULL, + slot = NULL +) { + # Validate layout if provided + if (!is.null(layout)) { + layout <- match.arg(layout, c("vertical", "horizontal", "grid")) + } + + # Validate scale if provided + if (!is.null(scale)) { + scale <- match.arg(scale, c("s", "m", "l")) + } + + # Validate columns if provided + if (!is.null(columns)) { + if (!is.numeric(columns) || columns < 1 || columns > 6) { + stop("columns must be a number between 1 and 6") + } + } + + # Build attributes list + attribs <- compact(list( + id = id, + layout = layout, + columns = columns, + scale = scale, + expanded = expanded, + label = label, + slot = slot + )) + + # Build the tag + res <- htmltools::tag( + "calcite-action-group", + c( + attribs, + rlang::dots_list(...), + list(calcite_dependency(), calcite_bindings()) + ) + ) + + class(res) <- c("calcite_component", class(res)) + res +} diff --git a/R/action.R b/R/action.R new file mode 100644 index 0000000..2547f67 --- /dev/null +++ b/R/action.R @@ -0,0 +1,175 @@ +#' Create a Calcite Action Component +#' +#' Creates an action button that can be used within action bars and action groups. +#' Actions provide a compact way to trigger operations with icon-based buttons. +#' +#' @param text Text label for the action (required, also used for accessibility) +#' @param icon Icon name from the Calcite icon set +#' @param id Optional ID for the action (required for Shiny reactivity) +#' @param active Whether the action is highlighted/selected +#' @param disabled Whether the action is disabled +#' @param indicator Whether to show a visual indicator (e.g., notification badge) +#' @param text_enabled Whether to display the text label alongside the icon +#' @param scale Size of the action: "s" (small), "m" (medium), or "l" (large) +#' @param alignment Text alignment: "start", "center", or "end" +#' @param appearance Visual style: "solid" or "transparent" +#' @param loading Whether to show a loading indicator +#' @param label Custom accessibility label (defaults to `text` if not provided) +#' @param ... Additional attributes passed to the component +#' +#' @details +#' ## Shiny Integration +#' +#' When used in a Shiny app, `calcite_action()` returns a reactive list containing +#' all component properties. You can observe the entire component state or watch +#' individual properties: +#' +#' **Available properties:** +#' - `$clicked` - Boolean that toggles on each click (use this to detect clicks) +#' - `$active` - Whether the action is currently active/highlighted +#' - `$disabled` - Whether the action is disabled +#' - `$icon` - The icon name +#' - `$text` - The text label +#' - `$indicator` - Whether an indicator is shown +#' - `$alignment`, `$appearance`, `$scale`, etc. - Other component properties +#' +#' **Usage in server:** +#' ```r +#' # Watch for any change to the action (including clicks) +#' observeEvent(input$my_action, { +#' print("Action changed!") +#' }) +#' +#' # Watch only the clicked state +#' observeEvent(input$my_action$clicked, { +#' print("Action was clicked!") +#' }) +#' +#' # Access specific properties +#' observeEvent(input$my_action, { +#' is_active <- input$my_action$active +#' click_state <- input$my_action$clicked +#' }) +#' ``` +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/action/) +#' @examples +#' # Basic action with icon +#' calcite_action( +#' text = "Layers", +#' icon = "layers", +#' id = "layers-action" +#' ) +#' +#' # Active action with text label +#' calcite_action( +#' text = "Settings", +#' icon = "gear", +#' active = TRUE, +#' text_enabled = TRUE +#' ) +#' +#' # Action with indicator +#' calcite_action( +#' text = "Notifications", +#' icon = "bell", +#' indicator = TRUE +#' ) +#' +#' # Shiny example +#' if (interactive()) { +#' library(shiny) +#' +#' ui <- calcite_shell( +#' calcite_action( +#' id = "my_action", +#' text = "Click me", +#' icon = "check", +#' text_enabled = TRUE +#' ), +#' verbatimTextOutput("status") +#' ) +#' +#' server <- function(input, output, session) { +#' # Respond to clicks +#' observeEvent(input$my_action$clicked, { +#' message("Action clicked! State: ", input$my_action$clicked) +#' }) +#' +#' # Display all properties +#' output$status <- renderPrint({ +#' input$my_action +#' }) +#' } +#' +#' shinyApp(ui, server) +#' } +calcite_action <- function( + text, + icon = NULL, + id = NULL, + active = NULL, + disabled = NULL, + indicator = NULL, + text_enabled = NULL, + scale = NULL, + alignment = NULL, + appearance = NULL, + loading = NULL, + label = NULL, + ... +) { + if (!is.null(scale)) { + scale <- match.arg(scale, c("s", "m", "l")) + } + + if (!is.null(alignment)) { + alignment <- match.arg(alignment, c("start", "center", "end")) + } + + if (!is.null(appearance)) { + appearance <- match.arg(appearance, c("solid", "transparent")) + } + + attribs <- compact(list( + id = id, + text = text, + icon = icon, + active = active, + disabled = disabled, + indicator = indicator, + `text-enabled` = text_enabled, + scale = scale, + alignment = alignment, + appearance = appearance, + loading = loading, + label = label + )) + + extra_attribs <- rlang::dots_list(...) + + all_attribs <- c( + attribs, + extra_attribs[!names(extra_attribs) %in% names(attribs)] + ) + + action_binding <- htmltools::htmlDependency( + name = "calcite-action-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-action.js" + ) + + res <- htmltools::tag( + "calcite-action", + c( + all_attribs, + list(calcite_dependency(), action_binding) + ) + ) + + class(res) <- c("calcite_component", class(res)) + res +} diff --git a/R/block.R b/R/block.R new file mode 100644 index 0000000..4ca58d5 --- /dev/null +++ b/R/block.R @@ -0,0 +1,168 @@ +#' Create a Calcite Block Component +#' +#' Creates a collapsible block component designed to house content and controls +#' within a Panel, most often as part of an application layout with Shell Panels. +#' +#' @param ... Child content for the block +#' @param id Component ID (required for Shiny reactivity) +#' @param heading Header text for the block +#' @param description Description text displayed below the heading +#' @param collapsible Whether the block can be collapsed (default: FALSE) +#' @param expanded Whether the block is currently expanded (default: FALSE) +#' @param disabled Whether interaction is prevented (default: FALSE) +#' @param loading Whether to display a busy indicator (default: FALSE) +#' @param icon_start Icon to display at the start of the header +#' @param icon_end Icon to display at the end of the header +#' @param icon_flip_rtl Flip icons in RTL languages: "start", "end", or "both" +#' @param scale Size of the component: "s" (small), "m" (medium), or "l" (large) +#' @param heading_level Semantic heading level (1-6) for accessibility +#' @param label Accessible name for the component +#' @param drag_disabled Prevent dragging when parent Block Group enables it (default: FALSE) +#' @param sort_handle_open Display and position the sort handle (default: FALSE) +#' @param menu_placement Placement of the action menu +#' @param overlay_positioning Positioning type for overlaid content: "absolute" or "fixed" +#' +#' @details +#' ## Shiny Integration +#' +#' The block emits events when it's expanded or collapsed, making it easy to track state. +#' +#' **Available properties in `input$id`:** +#' - `$expanded` - Whether the block is currently expanded +#' - `$collapsible` - Whether the block is collapsible +#' - `$disabled` - Whether the block is disabled +#' - `$heading` - The heading text +#' - Other component properties +#' +#' **Basic usage:** +#' ```r +#' calcite_block( +#' id = "my_block", +#' heading = "Layer effects", +#' description = "Adjust blur, highlight, and more", +#' collapsible = TRUE, +#' expanded = TRUE, +#' icon_start = "effects", +#' # Block content... +#' ) +#' +#' # In server +#' observeEvent(input$my_block$expanded, { +#' if (input$my_block$expanded) { +#' message("Block was expanded") +#' } else { +#' message("Block was collapsed") +#' } +#' }) +#' ``` +#' +#' **Update from server:** +#' ```r +#' # Programmatically expand or collapse the block +#' update_calcite("my_block", expanded = TRUE) +#' update_calcite("my_block", expanded = FALSE) +#' ``` +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/block/) +#' @examples +#' # Basic collapsible block +#' calcite_block( +#' id = "effects_block", +#' heading = "Layer effects", +#' description = "Adjust blur, highlight, and more", +#' collapsible = TRUE, +#' icon_start = "effects", +#' "Block content goes here..." +#' ) +calcite_block <- function( + ..., + id = NULL, + heading = NULL, + description = NULL, + collapsible = NULL, + expanded = NULL, + disabled = NULL, + loading = NULL, + icon_start = NULL, + icon_end = NULL, + icon_flip_rtl = NULL, + scale = NULL, + heading_level = NULL, + label = NULL, + drag_disabled = NULL, + sort_handle_open = NULL, + menu_placement = NULL, + overlay_positioning = NULL +) { + # Validate icon_flip_rtl if provided + if (!is.null(icon_flip_rtl)) { + icon_flip_rtl <- rlang::arg_match(icon_flip_rtl, c("start", "end", "both")) + } + + # Validate scale if provided + if (!is.null(scale)) { + scale <- rlang::arg_match(scale, c("s", "m", "l")) + } + + # Validate heading_level if provided + if (!is.null(heading_level)) { + heading_level <- rlang::arg_match( + as.character(heading_level), + as.character(1:6) + ) + } + + # Validate overlay_positioning if provided + if (!is.null(overlay_positioning)) { + overlay_positioning <- rlang::arg_match( + overlay_positioning, + c("absolute", "fixed") + ) + } + + # Build attributes list + attribs <- compact(list( + id = id, + heading = heading, + description = description, + collapsible = collapsible, + expanded = expanded, + disabled = disabled, + loading = loading, + `icon-start` = icon_start, + `icon-end` = icon_end, + `icon-flip-rtl` = icon_flip_rtl, + scale = scale, + `heading-level` = heading_level, + label = label, + `drag-disabled` = drag_disabled, + `sort-handle-open` = sort_handle_open, + `menu-placement` = menu_placement, + `overlay-positioning` = overlay_positioning + )) + + # Combine with dots + extra_attribs <- rlang::dots_list(...) + all_attribs <- c( + attribs, + extra_attribs[!names(extra_attribs) %in% names(attribs)] + ) + + # Custom binding for block + block_binding <- htmltools::htmlDependency( + name = "calcite-block-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-block.js" + ) + + res <- htmltools::tag( + "calcite-block", + c(all_attribs, list(calcite_dependency(), block_binding)) + ) + + class(res) <- c("calcite_component", class(res)) + res +} diff --git a/R/components-generated.R b/R/components-generated.R index 98a0458..5730491 100644 --- a/R/components-generated.R +++ b/R/components-generated.R @@ -1,13 +1,13 @@ #' Create a Accordion component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-------------|:--------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------|:---------------------| @@ -19,7 +19,7 @@ #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-------------------------------------------------------------------------------------------------------------------------| @@ -42,14 +42,14 @@ calcite_accordion <- function(...) { } #' Create a AccordionItem component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------|:-------------|:-----------------------------------------------------------------------------------------------------------|:----------------------------------|:---------------------| @@ -62,7 +62,7 @@ calcite_accordion <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-------------------------------------------------------------------------------------------| @@ -85,68 +85,17 @@ calcite_accordion_item <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a Action component -#' -#' -#' -#' -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:----------------|:-------------|:----------------------------------------------------------------------------------------------------------------------|:------------------------------------|:---------------------| -#' |active |active |When `true`, the component is highlighted. |boolean |TRUE | -#' |alignment |alignment |Specifies the horizontal alignment of button elements with text content. |"center" | "end" | "start" |TRUE | -#' |appearance |appearance |Specifies the appearance of the component. |"solid" | "transparent" |TRUE | -#' |compact |compact |When `true`, the side padding of the component is reduced. |boolean |TRUE | -#' |disabled |disabled |When `true`, interaction is prevented and the component is displayed with lower opacity. |boolean |TRUE | -#' |icon |icon |Specifies an icon to display. |string |TRUE | -#' |iconFlipRtl |icon-flip-rtl |When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). |boolean |TRUE | -#' |indicator |indicator |When `true`, displays a visual indicator. |boolean |TRUE | -#' |label |label |Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. |string |FALSE | -#' |loading |loading |When `true`, a busy indicator is displayed. |boolean |TRUE | -#' |messageOverrides |NA |Use this property to override individual strings used by the component. |Check API reference |FALSE | -#' |scale |scale |Specifies the size of the component. |"l" | "m" | "s" |TRUE | -#' |text |text |Specifies text that accompanies the icon. |string |FALSE | -#' |textEnabled |text-enabled |Indicates whether the text is displayed. |boolean |TRUE | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:-----------------|:---------------------------------------------------------| -#' |Default (unnamed) |A slot for adding a `calcite-icon`. | -#' |tooltip |[Deprecated] Use the `calcite-tooltip` component instead. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/action/) -#' @examples -#' calcite_action() -calcite_action <- function(...) { - res <- htmltools::tag( - "calcite-action", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - class(res) <- c("calcite_component", class(res)) - res -} #' Create a ActionBar component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------------|:-------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------|:---------------------| @@ -170,7 +119,7 @@ calcite_action <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------| @@ -194,65 +143,17 @@ calcite_action_bar <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a ActionGroup component -#' -#' -#' -#' -#' -#' @details -#' ## Properties -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:------------------|:-------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------| -#' |columns |columns |Indicates number of columns. |1 | 2 | 3 | 4 | 5 | 6 |TRUE | -#' |expanded |expanded |When `true`, the component is expanded. |boolean |TRUE | -#' |label |label |Accessible name for the component. |string |FALSE | -#' |layout |layout |Indicates the layout of the component. |"grid" | "horizontal" | "vertical" |TRUE | -#' |menuFlipPlacements |NA |Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. |Check API reference |FALSE | -#' |menuOpen |menu-open |When `true`, the `calcite-action-menu` is open. |boolean |TRUE | -#' |menuPlacement |menu-placement |Determines where the action menu will be positioned. |"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" |TRUE | -#' |messageOverrides |NA |Use this property to override individual strings used by the component. |Check API reference |FALSE | -#' |overlayPositioning |overlay-positioning |Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. |"absolute" | "fixed" |TRUE | -#' |scale |scale |Specifies the size of the `calcite-action-menu`. |"l" | "m" | "s" |TRUE | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:-----------------|:--------------------------------------------------------------------------------------| -#' |Default (unnamed) |A slot for adding a group of `calcite-action`s. | -#' |menu-actions |A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`. | -#' |menu-tooltip |A slot for adding a `calcite-tooltip` for the menu. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/action-group/) -#' @examples -#' calcite_action_group() -calcite_action_group <- function(...) { - res <- htmltools::tag( - "calcite-action-group", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} #' Create a ActionPad component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------------------|:-----------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------|:---------------------| @@ -275,7 +176,7 @@ calcite_action_group <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:----------------------------------------------------------| @@ -299,14 +200,14 @@ calcite_action_pad <- function(...) { } #' Create a Alert component #' -#' +#' #' #' Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided. #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------|:-------------------|:---------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------|:---------------------| @@ -336,7 +237,7 @@ calcite_action_pad <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------|:------------------------------------------------------------------------------------------------------------------| @@ -362,14 +263,14 @@ calcite_alert <- function(...) { } #' Create a Avatar component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:---------|:---------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| @@ -395,93 +296,17 @@ calcite_avatar <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a Block component -#' -#' -#' -#' -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:------------------|:-------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------| -#' |collapsible |collapsible |When `true`, the component is collapsible. |boolean |TRUE | -#' |description |description |A description for the component, which displays below the heading. |string |FALSE | -#' |disabled |disabled |When `true`, interaction is prevented and the component is displayed with lower opacity. |boolean |TRUE | -#' |dragDisabled |drag-disabled |When `true`, and a parent Block Group is `dragEnabled`, the component is not draggable. |boolean |TRUE | -#' |dragHandle |drag-handle |When `true`, the component displays a draggable button. |boolean |TRUE | -#' |heading |heading |The component header text. |string |FALSE | -#' |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 |TRUE | -#' |iconEnd |icon-end |Specifies an icon to display at the end of the component. |string |TRUE | -#' |iconFlipRtl |icon-flip-rtl |Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). |"both" | "end" | "start" |TRUE | -#' |iconStart |icon-start |Specifies an icon to display at the start of the component. |string |TRUE | -#' |label |label |Specifies an accessible name for the component. |string |FALSE | -#' |loading |loading |When `true`, a busy indicator is displayed. |boolean |TRUE | -#' |menuFlipPlacements |NA |Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. |Check API reference |FALSE | -#' |menuPlacement |menu-placement |Determines where the action menu will be positioned. |"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" |TRUE | -#' |messageOverrides |NA |Use this property to override individual strings used by the component. |Check API reference |FALSE | -#' |open |open |When `true`, expands the component and its contents. |boolean |TRUE | -#' |overlayPositioning |overlay-positioning |Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. |"absolute" | "fixed" |TRUE | -#' |sortHandleOpen |sort-handle-open |When `true`, displays and positions the sort handle. |boolean |TRUE | -#' |status |status |Displays a status-related indicator icon. |"idle" | "invalid" | "valid" |TRUE | -#' ## Events - -#' The following events are observed by shiny: - -#' |Event |Description | -#' |:---------------------------------|:----------------------------------------------------------------------------------------------------------| -#' |calciteBlockBeforeClose |Fires when the component is requested to be closed and before the closing transition begins. | -#' |calciteBlockBeforeOpen |Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | -#' |calciteBlockClose |Fires when the component is closed and animation is complete. | -#' |calciteBlockOpen |Fires when the component is open and animation is complete. | -#' |calciteBlockSortHandleBeforeClose |Fires when the sort handle is requested to be closed and before the closing transition begins. | -#' |calciteBlockSortHandleBeforeOpen |Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. | -#' |calciteBlockSortHandleClose |Fires when the sort handle is closed and animation is complete. | -#' |calciteBlockSortHandleOpen |Fires when the sort handle is open and animation is complete. | -#' |calciteBlockToggle |Fires when the component's header is clicked. | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:-------------------|:-----------------------------------------------------------------------------------------------------------------------------------------| -#' |Default (unnamed) |A slot for adding custom content. | -#' |actions-end |A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions. | -#' |icon |[Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead. | -#' |content-start |A slot for adding non-actionable elements before content of the component. | -#' |control |[Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead. | -#' |header-menu-actions |A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/block/) -#' @examples -#' calcite_block() -calcite_block <- function(...) { - res <- htmltools::tag( - "calcite-block", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} #' Create a BlockSection component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:--------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------|:---------------------| @@ -504,7 +329,7 @@ calcite_block <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------------| @@ -527,14 +352,14 @@ calcite_block_section <- function(...) { } #' Create a Button component #' -#' +#' #' #' Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------|:---------------------| @@ -562,7 +387,7 @@ calcite_block_section <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------| @@ -585,14 +410,14 @@ calcite_button <- function(...) { } #' Create a Card component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------|:------------------|:----------------------------------------------------------------------------------------|:--------------------------------------------------------------------------|:---------------------| @@ -614,7 +439,7 @@ calcite_button <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:------------------------------------------------------------------------| @@ -644,14 +469,14 @@ calcite_card <- function(...) { } #' Create a CardGroup component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-------------|:--------------|:----------------------------------------------------------------------------------------|:----------------------------------------------------------------|:---------------------| @@ -670,7 +495,7 @@ calcite_card <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:----------------------------------------------| @@ -693,14 +518,14 @@ calcite_card_group <- function(...) { } #' Create a Carousel component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-----------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------------|:---------------------| @@ -727,7 +552,7 @@ calcite_card_group <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-------------------------------------------| @@ -750,14 +575,14 @@ calcite_carousel <- function(...) { } #' Create a CarouselItem component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------|:---------|:---------------------------------------|:-------|:---------------------| @@ -766,7 +591,7 @@ calcite_carousel <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:--------------------------| @@ -789,14 +614,14 @@ calcite_carousel_item <- function(...) { } #' Create a Checkbox component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-------------|:-------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------|:---------------------| @@ -837,14 +662,14 @@ calcite_checkbox <- function(...) { } #' Create a Chip component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:---------------|:-------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------|:---------------------| @@ -873,7 +698,7 @@ calcite_checkbox <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------| @@ -897,14 +722,14 @@ calcite_chip <- function(...) { } #' Create a ChipGroup component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-------------|:--------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------|:---------------------| @@ -924,7 +749,7 @@ calcite_chip <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:----------------------------------------------| @@ -947,14 +772,14 @@ calcite_chip_group <- function(...) { } #' Create a ColorPicker component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-----------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------| @@ -998,14 +823,14 @@ calcite_color_picker <- function(...) { } #' Create a Combobox component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------------|:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------|:---------------------| @@ -1054,7 +879,7 @@ calcite_color_picker <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-------------------------------------------| @@ -1077,14 +902,14 @@ calcite_combobox <- function(...) { } #' Create a ComboboxItem component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------------|:---------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------|:---------------------| @@ -1114,7 +939,7 @@ calcite_combobox <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-------------------------------------------------------------------------| @@ -1139,14 +964,14 @@ calcite_combobox_item <- function(...) { } #' Create a ComboboxItemGroup component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:---------|:---------|:---------------------------------------------------------------------------------------------------|:-------------------|:---------------------| @@ -1155,7 +980,7 @@ calcite_combobox_item <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-------------------------------------------| @@ -1176,70 +1001,16 @@ calcite_combobox_item_group <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a DatePicker component +#' Create a Dialog component #' -#' #' -#' #' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:--------------------------|:----------------------------|:----------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------|:---------------------| -#' |activeDate |NA |Specifies the component's active date. |Date |FALSE | -#' |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" |TRUE | -#' |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 |TRUE | -#' |layout |layout |Defines the layout of the component. |"horizontal" | "vertical" |TRUE | -#' |max |max |When the component resides in a form, specifies the latest allowed date (`"yyyy-mm-dd"`). |string |TRUE | -#' |maxAsDate |NA |Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). |Date |FALSE | -#' |messageOverrides |NA |Use this property to override individual strings used by the component. |Check API reference |FALSE | -#' |min |min |When the component resides in a form, specifies the earliest allowed date (`"yyyy-mm-dd"`). |string |TRUE | -#' |minAsDate |NA |Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). |Date |FALSE | -#' |monthStyle |month-style |Specifies the monthStyle used by the component. |"abbreviated" | "wide" |FALSE | -#' |numberingSystem |numbering-system |Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. |"arab" | "arabext" | "latn" |TRUE | -#' |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 |TRUE | -#' |range |range |When `true`, activates the component's range mode to allow a start and end date. |boolean |TRUE | -#' |scale |scale |Specifies the size of the component. |"l" | "m" | "s" |TRUE | -#' |value |value |Check API reference |Check API reference |FALSE | -#' |valueAsDate |NA |Check API reference |Check API reference |FALSE | - -#' ## Events - -#' The following events are observed by shiny: - -#' |Event |Description | -#' |:----------------------------|:---------------------------------------------------------------------------------------------------------------------| -#' |calciteDatePickerChange |Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. | -#' |calciteDatePickerRangeChange |Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. | #' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/date-picker/) -#' @examples -#' calcite_date_picker() -calcite_date_picker <- function(...) { - res <- htmltools::tag( - "calcite-date-picker", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} -#' Create a Dialog component -#' -#' -#' -#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------------------|:----------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------|:---------------------| @@ -1278,7 +1049,7 @@ calcite_date_picker <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:--------------------|:---------------------------------------------------------------------------------------------------------------------------------------| @@ -1315,14 +1086,14 @@ calcite_dialog <- function(...) { } #' Create a Dropdown component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:---------------------|:------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------|:---------------------| @@ -1353,7 +1124,7 @@ calcite_dialog <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------| @@ -1377,14 +1148,14 @@ calcite_dropdown <- function(...) { } #' Create a DropdownGroup component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-------------|:--------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------|:---------------------| @@ -1393,7 +1164,7 @@ calcite_dropdown <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-------------------------------------------| @@ -1416,14 +1187,14 @@ calcite_dropdown_group <- function(...) { } #' Create a DropdownItem component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------|:-------------|:--------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------|:---------------------| @@ -1447,7 +1218,7 @@ calcite_dropdown_group <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------| @@ -1470,14 +1241,14 @@ calcite_dropdown_item <- function(...) { } #' Create a Fab component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------|:-------------|:--------------------------------------------------------------------------------------------|:---------------------------------------------------------|:---------------------| @@ -1509,14 +1280,14 @@ calcite_fab <- function(...) { } #' Create a Filter component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-----------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| @@ -1555,14 +1326,14 @@ calcite_filter <- function(...) { } #' Create a Flow component #' -#' #' -#' +#' +#' #' #' @details #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:----------------------------------------------------------------| @@ -1585,14 +1356,14 @@ calcite_flow <- function(...) { } #' Create a FlowItem component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:------------------|:-------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------|:---------------------| @@ -1627,7 +1398,7 @@ calcite_flow <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:--------------------|:---------------------------------------------------------------------------------------------------------------------------------| @@ -1663,14 +1434,14 @@ calcite_flow_item <- function(...) { } #' Create a Icon component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:---------|:----------|:-------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| @@ -1697,14 +1468,14 @@ calcite_icon <- function(...) { } #' Create a InlineEditable component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:---------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| @@ -1727,7 +1498,7 @@ calcite_icon <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:------------------------------------| @@ -1750,14 +1521,14 @@ calcite_inline_editable <- function(...) { } #' Create a Input component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------|:------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------| @@ -1808,7 +1579,7 @@ calcite_inline_editable <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:------|:----------------------------------------------------------------| @@ -1831,14 +1602,14 @@ calcite_input <- function(...) { } #' Create a InputDatePicker component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------------------------|:----------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------|:---------------------| @@ -1900,14 +1671,14 @@ calcite_input_date_picker <- function(...) { } #' Create a InputMessage component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------|:-------------|:--------------------------------------------------------------------------------------------|:--------------------------------------|:---------------------| @@ -1918,7 +1689,7 @@ calcite_input_date_picker <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------| @@ -1941,14 +1712,14 @@ calcite_input_message <- function(...) { } #' Create a InputNumber component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------|:------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------|:---------------------| @@ -1995,7 +1766,7 @@ calcite_input_message <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:------|:------------------------------------------------------| @@ -2018,14 +1789,14 @@ calcite_input_number <- function(...) { } #' Create a InputText component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------|:------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------|:---------------------| @@ -2066,7 +1837,7 @@ calcite_input_number <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:------|:------------------------------------------------------| @@ -2089,14 +1860,14 @@ calcite_input_text <- function(...) { } #' Create a InputTimePicker component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:------------------|:-------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------| @@ -2151,14 +1922,14 @@ calcite_input_time_picker <- function(...) { } #' Create a InputTimeZone component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:------------------|:-------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------|:---------------------| @@ -2210,14 +1981,14 @@ calcite_input_time_zone <- function(...) { } #' Create a Label component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:---------|:---------|:---------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------|:---------------------| @@ -2228,7 +1999,7 @@ calcite_input_time_zone <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------------------------------------------| @@ -2251,14 +2022,14 @@ calcite_label <- function(...) { } #' Create a Link component #' -#' +#' #' #' Any attributes placed on `` component will propagate to the rendered child Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------|:-------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------|:---------------------| @@ -2273,7 +2044,7 @@ calcite_label <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------| @@ -2296,14 +2067,14 @@ calcite_link <- function(...) { } #' Create a List component #' -#' +#' #' #' A general purpose list that enables users to construct list items that conform to Calcite styling. #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-------------------|:--------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------|:---------------------| @@ -2345,7 +2116,7 @@ calcite_link <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:--------------------|:-----------------------------------------------------------------------------------------------| @@ -2371,14 +2142,14 @@ calcite_list <- function(...) { } #' Create a ListItem component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:----------------|:------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------|:---------------------| @@ -2416,7 +2187,7 @@ calcite_list <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:--------------------------------------------------------------------------------------------------------------| @@ -2445,14 +2216,14 @@ calcite_list_item <- function(...) { } #' Create a ListItemGroup component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------|:---------|:----------------------------------------------------------------------------------------|:-------------------------|:---------------------| @@ -2462,7 +2233,7 @@ calcite_list_item <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------------------------------------------------------------| @@ -2485,14 +2256,14 @@ calcite_list_item_group <- function(...) { } #' Create a Loader component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:------|:---------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------|:---------------------| @@ -2520,14 +2291,14 @@ calcite_loader <- function(...) { } #' Create a Menu component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:---------|:-----------------------------------------------------------------------|:------------------------------|:---------------------| @@ -2552,14 +2323,14 @@ calcite_menu <- function(...) { } #' Create a MenuItem component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-------------|:-----------------------------------------------------------------------------------------------------------|:----------------------------------|:---------------------| @@ -2586,7 +2357,7 @@ calcite_menu <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:------------|:----------------------------------------------------| @@ -2609,14 +2380,14 @@ calcite_menu_item <- function(...) { } #' Create a Meter component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:---------------|:----------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------|:---------------------| @@ -2659,12 +2430,12 @@ calcite_meter <- function(...) { #' #' Use the `calcite-dialog` component instead. #' -#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------------------|:----------------------|:--------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------|:---------------------| @@ -2694,7 +2465,7 @@ calcite_meter <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:--------------|:--------------------------------------------------------------------------------------------------------------------------------------------| @@ -2723,14 +2494,14 @@ calcite_modal <- function(...) { } #' Create a Navigation component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-----------------|:--------------------------------------------------------------------------------------------------------|:-------|:---------------------| @@ -2747,7 +2518,7 @@ calcite_modal <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:--------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| @@ -2778,14 +2549,14 @@ calcite_navigation <- function(...) { } #' Create a NavigationLogo component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:------------|:-------------|:-----------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------|:---------------------| @@ -2818,14 +2589,14 @@ calcite_navigation_logo <- function(...) { } #' Create a NavigationUser component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:------------|:-------------|:------------------------------------------------------------------------------------------------------------------------|:-------|:---------------------| @@ -2852,75 +2623,17 @@ calcite_navigation_user <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a Notice component -#' -#' -#' -#' Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy. They are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users. -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:----------------|:-------------|:---------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------|:---------------------| -#' |closable |closable |When `true`, a close button is added to the component. |boolean |TRUE | -#' |icon |icon |When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. |boolean | string |TRUE | -#' |iconFlipRtl |icon-flip-rtl |When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). |boolean |TRUE | -#' |kind |kind |Specifies the kind of the component, which will apply to top border and icon. |"brand" | "danger" | "info" | "success" | "warning" |TRUE | -#' |messageOverrides |NA |Use this property to override individual strings used by the component. |Check API reference |FALSE | -#' |open |open |When `true`, the component is visible. |boolean |TRUE | -#' |scale |scale |Specifies the size of the component. |"l" | "m" | "s" |TRUE | -#' |width |width |Check API reference |"auto" | "full" | "half" |TRUE | - -#' ## Events - -#' The following events are observed by shiny: - -#' |Event |Description | -#' |:------------------------|:--------------------------------------------------------------------------------------------------------| -#' |calciteNoticeBeforeClose |Fires when the component is requested to be closed and before the closing transition begins. | -#' |calciteNoticeBeforeOpen |Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | -#' |calciteNoticeClose |Fires when the component is closed and animation is complete. | -#' |calciteNoticeOpen |Fires when the component is open and animation is complete. | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:-----------|:--------------------------------------------------------------------------------------------------------------| -#' |title |A slot for adding the title. | -#' |message |A slot for adding the message. | -#' |link |A slot for adding a `calcite-action` to take, such as: "undo", "try again", "link to page", etc. | -#' |actions-end |A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/notice/) -#' @examples -#' calcite_notice() -calcite_notice <- function(...) { - res <- htmltools::tag( - "calcite-notice", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - class(res) <- c("calcite_component", class(res)) - res -} #' Create a Option component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------|:---------|:----------------------------------------------------------------------------------------|:-------|:---------------------| @@ -2946,14 +2659,14 @@ calcite_option <- function(...) { } #' Create a OptionGroup component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------|:---------|:----------------------------------------------------------------------------------------|:-------|:---------------------| @@ -2962,7 +2675,7 @@ calcite_option <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:------------------------------------| @@ -2985,14 +2698,14 @@ calcite_option_group <- function(...) { } #' Create a Pagination component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:----------------|:-----------------------------------------------------------------------------------------------------------------|:-------------------------------------|:---------------------| @@ -3027,92 +2740,17 @@ calcite_pagination <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a Panel component -#' -#' -#' -#' -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:------------------|:-------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------| -#' |beforeClose |NA |Passes a function to run before the component closes. |Check API reference |FALSE | -#' |closable |closable |When `true`, displays a close button in the trailing side of the header. |boolean |TRUE | -#' |closed |closed |When `true`, the component will be hidden. |boolean |TRUE | -#' |collapsed |collapsed |When `true`, hides the component's content area. |boolean |TRUE | -#' |collapsible |collapsible |When `true`, the component is collapsible. |boolean |TRUE | -#' |description |description |A description for the component. |string |FALSE | -#' |disabled |disabled |When `true`, interaction is prevented and the component is displayed with lower opacity. |boolean |TRUE | -#' |heading |heading |The component header text. |string |FALSE | -#' |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 |TRUE | -#' |loading |loading |When `true`, a busy indicator is displayed. |boolean |TRUE | -#' |menuFlipPlacements |NA |Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. |Check API reference |FALSE | -#' |menuOpen |menu-open |When `true`, the action menu items in the `header-menu-actions` slot are open. |boolean |TRUE | -#' |menuPlacement |menu-placement |Determines where the action menu will be positioned. |"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" |TRUE | -#' |messageOverrides |NA |Use this property to override individual strings used by the component. |Check API reference |FALSE | -#' |overlayPositioning |overlay-positioning |Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. |"absolute" | "fixed" |TRUE | -#' |scale |scale |Specifies the size of the component. |"l" | "m" | "s" |TRUE | - -#' ## Events - -#' The following events are observed by shiny: -#' |Event |Description | -#' |:------------------|:------------------------------------------| -#' |calcitePanelClose |Fires when the close button is clicked. | -#' |calcitePanelScroll |Fires when the content is scrolled. | -#' |calcitePanelToggle |Fires when the collapse button is clicked. | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:--------------------|:----------------------------------------------------------------------------------------------------------------------------------| -#' |Default (unnamed) |A slot for adding custom content. | -#' |action-bar |A slot for adding a `calcite-action-bar` to the component. | -#' |alerts |A slot for adding `calcite-alert`s to the component. | -#' |content-bottom |A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) | -#' |content-top |A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). | -#' |header-actions-start |A slot for adding actions or content to the start side of the header. | -#' |header-actions-end |A slot for adding actions or content to the end side of the header. | -#' |header-content |A slot for adding custom content to the header. | -#' |header-menu-actions |A slot for adding an overflow menu with actions inside a `calcite-dropdown`. | -#' |fab |A slot for adding a `calcite-fab` (floating action button) to perform an action. | -#' |footer |A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots. | -#' |footer-actions |[Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer. | -#' |footer-end |A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot. | -#' |footer-start |A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/panel/) -#' @examples -#' calcite_panel() -calcite_panel <- function(...) { - res <- htmltools::tag( - "calcite-panel", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} #' Create a Popover component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:---------------------|:------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------| @@ -3149,7 +2787,7 @@ calcite_panel <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------------| @@ -3172,14 +2810,14 @@ calcite_popover <- function(...) { } #' Create a Progress component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------|:---------|:----------------------------------------------------------------------------------------------------|:------------------------------------|:---------------------| @@ -3206,14 +2844,14 @@ calcite_progress <- function(...) { } #' Create a RadioButton component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------|:---------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| @@ -3250,14 +2888,14 @@ calcite_radio_button <- function(...) { } #' Create a RadioButtonGroup component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------|:------------------|:-----------------------------------------------------------------------------------------------------------------|:--------------------------------------------|:---------------------| @@ -3281,7 +2919,7 @@ calcite_radio_button <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:------------------------------------------| @@ -3304,14 +2942,14 @@ calcite_radio_button_group <- function(...) { } #' Create a Rating component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------|:------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------|:---------------------| @@ -3355,14 +2993,14 @@ calcite_rating <- function(...) { } #' Create a Scrim component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:---------|:-----------------------------------------------------------------------|:-------------------|:---------------------| @@ -3371,7 +3009,7 @@ calcite_rating <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:----------------------------------------------------------------| @@ -3392,109 +3030,16 @@ calcite_scrim <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a SegmentedControl component -#' -#' -#' -#' -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:-----------------|:------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------|:---------------------| -#' |appearance |appearance |Specifies the appearance style of the component. |"outline" | "outline-fill" | "solid" |TRUE | -#' |disabled |disabled |When `true`, interaction is prevented and the component is displayed with lower opacity. |boolean |TRUE | -#' |form |form |The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. |string |TRUE | -#' |layout |layout |Defines the layout of the component. |"horizontal" | "vertical" |TRUE | -#' |name |name |Specifies the name of the component. Required to pass the component's `value` on form submission. |string |TRUE | -#' |required |required |When `true` and the component resides in a form, the component must have a value in order for the form to submit. |boolean |TRUE | -#' |scale |scale |Specifies the size of the component. |"l" | "m" | "s" |TRUE | -#' |selectedItem |NA |The component's selected item `HTMLElement`. |HTMLCalciteSegmentedControlItemElement |FALSE | -#' |status |status |Specifies the status of the validation message. |"idle" | "invalid" | "valid" |TRUE | -#' |validationIcon |validation-icon |Specifies the validation icon to display under the component. |boolean | string |TRUE | -#' |validationMessage |validation-message |Specifies the validation message to display under the component. |string |FALSE | -#' |validity |NA |The current validation state of the component. |Check API reference |FALSE | -#' |value |value |The component's `selectedItem` value. |string |FALSE | -#' |width |width |Check API reference |"auto" | "full" |TRUE | - -#' ## Events - -#' The following events are observed by shiny: - -#' |Event |Description | -#' |:-----------------------------|:------------------------------------------------------------------| -#' |calciteSegmentedControlChange |Fires when the `calcite-segmented-control-item` selection changes. | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:-----------------|:----------------------------------------------------| -#' |Default (unnamed) |A slot for adding `calcite-segmented-control-item`s. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/segmented-control/) -#' @examples -#' calcite_segmented_control() -calcite_segmented_control <- function(...) { - res <- htmltools::tag( - "calcite-segmented-control", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} -#' Create a SegmentedControlItem component -#' -#' -#' -#' +#' Create a Select component #' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:-----------|:-------------|:--------------------------------------------------------------------------------------------|:-------|:---------------------| -#' |checked |checked |When `true`, the component is checked. |boolean |TRUE | -#' |iconEnd |icon-end |Specifies an icon to display at the end of the component. |string |TRUE | -#' |iconFlipRtl |icon-flip-rtl |When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). |boolean |TRUE | -#' |iconStart |icon-start |Specifies an icon to display at the start of the component. |string |TRUE | -#' |value |value |The component's value. |any |FALSE | #' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/segmented-control-item/) -#' @examples -#' calcite_segmented_control_item() -calcite_segmented_control_item <- function(...) { - res <- htmltools::tag( - "calcite-segmented-control-item", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} -#' Create a Select component #' -#' #' -#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------|:------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------|:---------------------| @@ -3522,7 +3067,7 @@ calcite_segmented_control_item <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:------------------------------------| @@ -3545,14 +3090,14 @@ calcite_select <- function(...) { } #' Create a Sheet component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------------------|:----------------------|:---------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------|:---------------------| @@ -3597,65 +3142,17 @@ calcite_sheet <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a Shell component -#' -#' -#' -#' -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:-------------|:--------------|:---------------------------------------------------------------|:-------|:---------------------| -#' |contentBehind |content-behind |Positions the center content behind any `calcite-shell-panel`s. |boolean |TRUE | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:-----------------|:------------------------------------------------------------------------------------------------------------------------------------------------------| -#' |Default (unnamed) |A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map. | -#' |header |A slot for adding header content. This content will be positioned at the top of the component. | -#' |footer |A slot for adding footer content. This content will be positioned at the bottom of the component. | -#' |panel-start |A slot for adding the starting `calcite-shell-panel`. | -#' |panel-end |A slot for adding the ending `calcite-shell-panel`. | -#' |panel-top |A slot for adding the top `calcite-shell-panel`. | -#' |panel-bottom |A slot for adding the bottom `calcite-shell-panel`. | -#' |center-row |[Deprecated] Use the `"panel-bottom"` slot instead. A slot for adding the bottom `calcite-shell-center-row`. | -#' |modals |A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the `calcite-shell`. | -#' |dialogs |A slot for adding `calcite-dialog` components. When placed in this slot, the dialog position will be constrained to the extent of the `calcite-shell`. | -#' |alerts |A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the `calcite-shell`. | -#' |sheets |A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the `calcite-shell`. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/shell/) -#' @examples -#' calcite_shell() -calcite_shell <- function(...) { - res <- htmltools::tag( - "calcite-shell", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - class(res) <- c("calcite_component", class(res)) - res -} #' Create a ShellCenterRow component #' #' Use the `calcite-shell-panel` component instead. #' -#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------|:------------|:----------------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| @@ -3665,7 +3162,7 @@ calcite_shell <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:----------------------------------------------------------------------| @@ -3689,14 +3186,14 @@ calcite_shell_center_row <- function(...) { } #' Create a ShellPanel component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:------------|:-----------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------|:---------------------| @@ -3713,7 +3210,7 @@ calcite_shell_center_row <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:----------------------------------------------------------| @@ -3735,85 +3232,17 @@ calcite_shell_panel <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a Slider component -#' -#' -#' -#' -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:-----------------|:------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------|:---------------------| -#' |disabled |disabled |When `true`, interaction is prevented and the component is displayed with lower opacity. |boolean |TRUE | -#' |fillPlacement |fill-placement |Used to configure where the fill is placed along the slider track in relation to the value handle. Range mode will always display the fill between the min and max handles. |"end" | "none" | "start" |TRUE | -#' |form |form |The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. |string |TRUE | -#' |groupSeparator |group-separator |When `true`, number values are displayed with a group separator corresponding to the language and country format. |boolean |TRUE | -#' |hasHistogram |has-histogram |When `true`, indicates a histogram is present. |boolean |TRUE | -#' |histogram |NA |A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track. |Check API reference |FALSE | -#' |histogramStops |NA |A set of single color stops for a histogram, sorted by offset ascending. |Check API reference |FALSE | -#' |labelFormatter |NA |When specified, allows users to customize handle labels. |(value: number, type: "min" | "value" | "max" | "tick", defaultFormatter: (value: number) => string) => string |FALSE | -#' |labelHandles |label-handles |When `true`, displays label handles with their numeric value. |boolean |TRUE | -#' |labelTicks |label-ticks |When `true` and `ticks` is specified, displays label tick marks with their numeric value. |boolean |TRUE | -#' |max |max |The component's maximum selectable value. |number |TRUE | -#' |maxLabel |max-label |For multiple selections, the accessible name for the second handle, such as `"Temperature, upper bound"`. |string |FALSE | -#' |maxValue |max-value |For multiple selections, the component's upper value. |number |FALSE | -#' |min |min |The component's minimum selectable value. |number |TRUE | -#' |minLabel |min-label |Accessible name for first (or only) handle, such as `"Temperature, lower bound"`. |string |FALSE | -#' |minValue |min-value |For multiple selections, the component's lower value. |number |FALSE | -#' |mirrored |mirrored |When `true`, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. |boolean |TRUE | -#' |name |name |Specifies the name of the component. Required to pass the component's `value` on form submission. |string |TRUE | -#' |numberingSystem |numbering-system |Specifies the Unicode numeral system used by the component for localization. |"arab" | "arabext" | "latn" |FALSE | -#' |pageStep |page-step |Specifies the interval to move with the page up, or page down keys. |number |TRUE | -#' |precise |precise |When `true`, sets a finer point for handles. |boolean |TRUE | -#' |required |required |When `true` and the component resides in a form, the component must have a value in order for the form to submit. |boolean |TRUE | -#' |scale |scale |Specifies the size of the component. |"l" | "m" | "s" |TRUE | -#' |snap |snap |When `true`, enables snap selection in coordination with `step` via a mouse. |boolean |TRUE | -#' |status |status |Specifies the status of the input field, which determines message and icons. |"idle" | "invalid" | "valid" |TRUE | -#' |step |step |Specifies the interval to move with the up, or down keys. |number |TRUE | -#' |ticks |ticks |Displays tick marks on the number line at a specified interval. |number |TRUE | -#' |validationIcon |validation-icon |Specifies the validation icon to display under the component. |boolean | string |TRUE | -#' |validationMessage |validation-message |Specifies the validation message to display under the component. |string |FALSE | -#' |validity |NA |The current validation state of the component. |Check API reference |FALSE | -#' |value |value |The component's value. |Check API reference |TRUE | - -#' ## Events -#' The following events are observed by shiny: - -#' |Event |Description | -#' |:-------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -#' |calciteSliderChange |Fires when the thumb is released on the component. Note: To constantly listen to the drag event, use `calciteSliderInput` instead. | -#' |calciteSliderInput |Fires on all updates to the component. Note: Fires frequently during drag. To perform expensive operations consider using a debounce or throttle to avoid locking up the main thread. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/slider/) -#' @examples -#' calcite_slider() -calcite_slider <- function(...) { - res <- htmltools::tag( - "calcite-slider", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} #' Create a SplitButton component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:------------------|:---------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------|:---------------------| @@ -3845,7 +3274,7 @@ calcite_slider <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------------------------| @@ -3868,14 +3297,14 @@ calcite_split_button <- function(...) { } #' Create a Stepper component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:----------------|:----------------------------------------------------------------------------|:---------------------------------------------------------|:---------------------| @@ -3898,7 +3327,7 @@ calcite_split_button <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:--------------------------------------------------| @@ -3921,14 +3350,14 @@ calcite_stepper <- function(...) { } #' Create a StepperItem component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-------------|:--------------------------------------------------------------------------------------------|:-------------------|:---------------------| @@ -3951,7 +3380,7 @@ calcite_stepper <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------------| @@ -3974,14 +3403,14 @@ calcite_stepper_item <- function(...) { } #' Create a Switch component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------|:---------|:--------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| @@ -4018,14 +3447,14 @@ calcite_switch <- function(...) { } #' Create a Tab component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------|:---------|:-------------------------------------------------------------------------------------------------------------------|:-------|:---------------------| @@ -4034,7 +3463,7 @@ calcite_switch <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------------| @@ -4057,14 +3486,14 @@ calcite_tab <- function(...) { } #' Create a TabNav component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:----------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------|:---------------------| @@ -4084,7 +3513,7 @@ calcite_tab <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------------------| @@ -4107,14 +3536,14 @@ calcite_tab_nav <- function(...) { } #' Create a TabTitle component #' -#' +#' #' #' Tab-titles are optionally individually closable. #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------|:---------------------| @@ -4140,7 +3569,7 @@ calcite_tab_nav <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------| @@ -4163,14 +3592,14 @@ calcite_tab_title <- function(...) { } #' Create a Table component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-----------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------|:---------------------| @@ -4200,7 +3629,7 @@ calcite_tab_title <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------------------------------------------------------------------------------------------------------------------------| @@ -4226,14 +3655,14 @@ calcite_table <- function(...) { } #' Create a TableCell component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:---------|:-----------------------------------------------------------------------|:------------------------------------|:---------------------| @@ -4244,7 +3673,7 @@ calcite_table <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:------------------------------------------------| @@ -4267,14 +3696,14 @@ calcite_table_cell <- function(...) { } #' Create a TableHeader component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-----------|:-----------------------------------------------------------------------|:------------------------------------|:---------------------| @@ -4302,14 +3731,14 @@ calcite_table_header <- function(...) { } #' Create a TableRow component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:---------|:---------|:----------------------------------------------------------------------------------------|:------------------------------------|:---------------------| @@ -4327,7 +3756,7 @@ calcite_table_header <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:--------------------------------------------------------------------------| @@ -4350,14 +3779,14 @@ calcite_table_row <- function(...) { } #' Create a Tabs component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:--------|:---------|:--------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| @@ -4368,7 +3797,7 @@ calcite_table_row <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:--------------------------------------| @@ -4392,14 +3821,14 @@ calcite_tabs <- function(...) { } #' Create a TextArea component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------------|:------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------|:---------------------| @@ -4438,7 +3867,7 @@ calcite_tabs <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------------------------------------------------| @@ -4461,225 +3890,17 @@ calcite_text_area <- function(...) { class(res) <- c("calcite_component", class(res)) res } -#' Create a Tile component -#' -#' -#' -#' -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:-----------|:-------------|:---------------------------------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| -#' |active |active |When `true`, the component is active. |boolean |TRUE | -#' |alignment |alignment |Specifies the alignment of the Tile's content. |"center" | "start" |TRUE | -#' |description |description |A description for the component, which displays below the heading. |string |TRUE | -#' |disabled |disabled |When `true`, interaction is prevented and the component is displayed with lower opacity. |boolean |TRUE | -#' |embed |embed |The component's embed mode. When `true`, renders without a border and padding for use by other components. |boolean |TRUE | -#' |heading |heading |The component header text, which displays between the icon and description. |string |TRUE | -#' |href |href |When embed is `"false"`, the URL for the component. |string |TRUE | -#' |icon |icon |Specifies an icon to display. |string |TRUE | -#' |iconFlipRtl |icon-flip-rtl |When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). |boolean |TRUE | -#' |label |label |Accessible name for the component. |string |FALSE | -#' |scale |scale |Specifies the size of the component. |"l" | "m" | "s" |TRUE | -#' |selected |selected |When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. |boolean |TRUE | - -#' ## Events - -#' The following events are observed by shiny: - -#' |Event |Description | -#' |:-----------------|:-------------------------------------------------------| -#' |calciteTileSelect |Fires when the selected state of the component changes. | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:--------------|:-------------------------------------------------------------------------------------------------------------------------------------------| -#' |content-top |A slot for adding non-actionable elements above the component's content. Content slotted here will render in place of the `icon` property. | -#' |content-bottom |A slot for adding non-actionable elements below the component's content. | -#' |content-start |[Deprecated] use `content-top` slot instead. A slot for adding non-actionable elements before the component's content. | -#' |content-end |[Deprecated] use `content-bottom` slot instead. A slot for adding non-actionable elements after the component's content. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/tile/) -#' @examples -#' calcite_tile() -calcite_tile <- function(...) { - res <- htmltools::tag( - "calcite-tile", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} -#' Create a TileGroup component -#' -#' -#' -#' -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:-------------------|:--------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------|:---------------------| -#' |alignment |alignment |Specifies the alignment of each `calcite-tile`'s content. |"center" | "start" |TRUE | -#' |disabled |disabled |When `true`, interaction is prevented and the component is displayed with lower opacity. |boolean |TRUE | -#' |label |label |Accessible name for the component. |string |FALSE | -#' |layout |layout |Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. |"horizontal" | "vertical" |TRUE | -#' |scale |scale |Specifies the size of the component. |"l" | "m" | "s" |TRUE | -#' |selectedItems |NA |Specifies the component's selected items. |Check API reference |FALSE | -#' |selectionAppearance |selection-appearance |Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). |"border" | "icon" |TRUE | -#' |selectionMode |selection-mode |Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). |"multiple" | "none" | "single" | "single-persist" |TRUE | - -#' ## Events - -#' The following events are observed by shiny: - -#' |Event |Description | -#' |:----------------------|:---------------------------------------------| -#' |calciteTileGroupSelect |Fires when the component's selection changes. | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:-----------------|:------------------------------------------| -#' |Default (unnamed) |A slot for adding `calcite-tile` elements. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/tile-group/) -#' @examples -#' calcite_tile_group() -calcite_tile_group <- function(...) { - res <- htmltools::tag( - "calcite-tile-group", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} -#' Create a TileSelect component -#' -#' Use the `calcite-tile` component instead. -#' -#' -#' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:--------------|:---------------|:---------------------------------------------------------------------------------------------------------------------------------------|:-------------------------|:---------------------| -#' |checked |checked |When `true`, the component is checked. |boolean |TRUE | -#' |description |description |A description for the component, which displays below the heading. |string |TRUE | -#' |disabled |disabled |When `true`, interaction is prevented and the component is displayed with lower opacity. |boolean |TRUE | -#' |heading |heading |The component header text, which displays between the icon and description. |string |TRUE | -#' |icon |icon |Specifies an icon to display. |string |TRUE | -#' |iconFlipRtl |icon-flip-rtl |When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). |boolean |TRUE | -#' |inputAlignment |input-alignment |When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. |"end" | "start" |TRUE | -#' |inputEnabled |input-enabled |When `true`, displays an interactive input based on the `type` property. |boolean |TRUE | -#' |name |name |Specifies the name of the component on form submission. |any |TRUE | -#' |type |type |Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. |"checkbox" | "radio" |TRUE | -#' |value |value |The component's value. |any |FALSE | -#' |width |width |Specifies the width of the component. |"auto" | "full" |TRUE | - -#' ## Events - -#' The following events are observed by shiny: - -#' |Event |Description | -#' |:-----------------------|:----------------------------------------------------------------------------------------------------------------------| -#' |calciteTileSelectChange |Emits a custom change event. For checkboxes it emits when checked or unchecked. For radios it only emits when checked. | - -#' ## Slots - -#' The following slots are provided by this component: -#' |Slot |Description | -#' |:-----------------|:---------------------------------| -#' |Default (unnamed) |A slot for adding custom content. | -#' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/tile-select/) -#' @examples -#' calcite_tile_select() -calcite_tile_select <- function(...) { - res <- htmltools::tag( - "calcite-tile-select", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} -#' Create a TileSelectGroup component -#' -#' Use the `calcite-tile-group` component instead. +#' Create a TimePicker component #' -#' #' -#' @details -#' ## Properties - -#' The following properties are provided by this component: - -#' |Name |Attribute |Description |Values |Reflects to Attribute | -#' |:--------|:---------|:--------------------------------------------------------------------------------------------------------|:------------------------------|:---------------------| -#' |disabled |disabled |When `true`, interaction is prevented and the component is displayed with lower opacity. |boolean |TRUE | -#' |layout |layout |Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. |"horizontal" | "vertical" |TRUE | - -#' ## Slots - -#' The following slots are provided by this component: - -#' |Slot |Description | -#' |:-----------------|:-------------------------------------------------| -#' |Default (unnamed) |A slot for adding `calcite-tile-select` elements. | #' -#' @param ... named attributes passed to `htmltools::tag()` -#' @export -#' @return an object of class `calcite_component` which is a subclass of `shiny.tag` -#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/tile-select-group/) -#' @examples -#' calcite_tile_select_group() -calcite_tile_select_group <- function(...) { - res <- htmltools::tag( - "calcite-tile-select-group", - rlang::dots_list(..., calcite_dependency(), calcite_bindings()) - ) - - class(res) <- c("calcite_component", class(res)) - res -} -#' Create a TimePicker component -#' -#' #' -#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:----------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------|:---------------------| @@ -4717,12 +3938,12 @@ calcite_time_picker <- function(...) { #' #' Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead. #' -#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:--------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------|:---------------------| @@ -4743,7 +3964,7 @@ calcite_time_picker <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:----------------------------------------| @@ -4769,12 +3990,12 @@ calcite_tip <- function(...) { #' #' Use the `calcite-carousel` and `calcite-carousel-item` components instead. #' -#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------|:-----------|:--------------------------------------------------------|:------|:---------------------| @@ -4782,7 +4003,7 @@ calcite_tip <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------------| @@ -4807,12 +4028,12 @@ calcite_tip_group <- function(...) { #' #' Use the `calcite-carousel` and `calcite-carousel-item` components instead. #' -#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:----------------|:-------------|:-------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------|:---------------------| @@ -4830,7 +4051,7 @@ calcite_tip_group <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:---------------------------------| @@ -4853,14 +4074,14 @@ calcite_tip_manager <- function(...) { } #' Create a Tooltip component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:------------------|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------| @@ -4886,7 +4107,7 @@ calcite_tip_manager <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------| @@ -4909,14 +4130,14 @@ calcite_tooltip <- function(...) { } #' Create a Tree component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-------------|:--------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------|:---------------------| @@ -4935,7 +4156,7 @@ calcite_tooltip <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:----------------------------------------| @@ -4958,14 +4179,14 @@ calcite_tree <- function(...) { } #' Create a TreeItem component #' -#' #' -#' +#' +#' #' #' @details #' ## Properties -#' The following properties are provided by this component: +#' The following properties are provided by this component: #' |Name |Attribute |Description |Values |Reflects to Attribute | #' |:-----------|:-------------|:--------------------------------------------------------------------------------------------|:----------------------------------|:---------------------| @@ -4978,7 +4199,7 @@ calcite_tree <- function(...) { #' ## Slots -#' The following slots are provided by this component: +#' The following slots are provided by this component: #' |Slot |Description | #' |:-----------------|:-----------------------------------------------------------------------------------------------------| diff --git a/R/date-picker.R b/R/date-picker.R new file mode 100644 index 0000000..9925707 --- /dev/null +++ b/R/date-picker.R @@ -0,0 +1,195 @@ +#' Create a Calcite Date Picker Component +#' +#' Provides a calendar interface for selecting dates. Supports single date +#' selection or date range selection with various customization options. +#' +#' @param id Optional ID for the date picker (required for Shiny reactivity) +#' @param value Selected date as a string ("yyyy-mm-dd"), or array of strings for range values +#' @param range When TRUE, activates range mode to allow start and end dates (default: FALSE) +#' @param min Earliest allowed date ("yyyy-mm-dd") +#' @param max Latest allowed date ("yyyy-mm-dd") +#' @param scale Specifies size of the component: "s" (small), "m" (medium), or "l" (large) +#' @param layout Defines the layout: "horizontal" or "vertical" +#' @param calendars Number of calendars displayed when range is TRUE: 1 or 2 (default: 2) +#' @param active_range When range is TRUE, specifies active range: "start" or "end" +#' @param heading_level Heading level for document structure (1-6) +#' @param month_style Month display style: "wide" (default) or "abbreviated" +#' @param numbering_system Unicode numeral system: "latn", "arab", or "arabext" +#' @param proximity_selection_disabled When TRUE, disables default range narrowing behavior (default: FALSE) +#' @param ... Additional attributes passed to the component +#' +#' @details +#' ## Date Formats +#' +#' - Dates should be provided as strings in "yyyy-mm-dd" format +#' - For range mode, provide an array: `c("2024-01-15", "2024-01-20")` +#' - The component always returns dates as an array of strings, even in single date mode +#' +#' ## Shiny Integration +#' +#' When used in a Shiny app with an `id`, `calcite_date_picker()` returns a reactive +#' list containing component properties. +#' +#' **Available properties:** +#' - `$value` - Array of selected date strings (always an array, even for single dates) +#' - `$range` - Whether range mode is enabled +#' - `$min` - Minimum allowed date +#' - `$max` - Maximum allowed date +#' - Other component properties +#' +#' **Usage in server:** +#' ```r +#' # Single date mode +#' observeEvent(input$my_date$value, { +#' selected_date <- input$my_date$value[1] # Get first (and only) date +#' message("Selected: ", selected_date) +#' }) +#' +#' # Range mode +#' observeEvent(input$my_date_range$value, { +#' start_date <- input$my_date_range$value[1] +#' end_date <- input$my_date_range$value[2] +#' message("Range: ", start_date, " to ", end_date) +#' }) +#' ``` +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/date-picker/) +#' @examples +#' # Basic date picker +#' calcite_date_picker( +#' id = "my_date" +#' ) +#' +#' # Date picker with initial value +#' calcite_date_picker( +#' id = "event_date", +#' value = "2024-12-25" +#' ) +#' +#' # Date picker with min/max constraints +#' calcite_date_picker( +#' id = "booking_date", +#' min = "2024-01-01", +#' max = "2024-12-31" +#' ) +#' +#' # Range date picker +#' calcite_date_picker( +#' id = "date_range", +#' range = TRUE, +#' value = c("2024-01-15", "2024-01-20") +#' ) +calcite_date_picker <- function( + id = NULL, + value = NULL, + range = NULL, + min = NULL, + max = NULL, + scale = NULL, + layout = NULL, + calendars = NULL, + active_range = NULL, + heading_level = NULL, + month_style = NULL, + numbering_system = NULL, + proximity_selection_disabled = NULL, + ... +) { + # Validate scale if provided + if (!is.null(scale)) { + scale <- rlang::arg_match(scale, c("s", "m", "l")) + } + + # Validate layout if provided + if (!is.null(layout)) { + layout <- rlang::arg_match(layout, c("horizontal", "vertical")) + } + + # Validate calendars if provided + if (!is.null(calendars)) { + if (!rlang::is_integerish(calendars, n = 1)) { + cli::cli_abort( + "{.arg calendars} must be a scalar integer either {.val 1} or {.val 2}" + ) + } + + if (calendars > 2 || calendars < 1) { + cli::cli_abort( + "{.arg calendars} must be a scalar integer either {.val 1} or {.val 2}" + ) + } + } + + # Validate active_range if provided + if (!is.null(active_range)) { + active_range <- rlang::arg_match(active_range, c("start", "end")) + } + + # Validate heading_level if provided + if (!is.null(heading_level)) { + heading_level <- rlang::arg_match( + as.character(heading_level), + as.character(1:6) + ) + } + + # Validate month_style if provided + if (!is.null(month_style)) { + month_style <- rlang::arg_match(month_style, c("wide", "abbreviated")) + } + + # Validate numbering_system if provided + if (!is.null(numbering_system)) { + numbering_system <- rlang::arg_match( + numbering_system, + c("latn", "arab", "arabext") + ) + } + + # Handle value - convert to JSON array if it's a vector + if (!is.null(value) && length(value) > 1) { + value <- jsonlite::toJSON(value, auto_unbox = FALSE) + } + + # Build attributes list + attribs <- compact(list( + id = id, + value = value, + range = range, + min = min, + max = max, + scale = scale, + layout = layout, + calendars = calendars, + `active-range` = active_range, + `heading-level` = heading_level, + `month-style` = month_style, + `numbering-system` = numbering_system, + `proximity-selection-disabled` = proximity_selection_disabled + )) + + # Combine with dots + extra_attribs <- rlang::dots_list(...) + all_attribs <- c( + attribs, + extra_attribs[!names(extra_attribs) %in% names(attribs)] + ) + + # Custom binding for date-picker + date_picker_binding <- htmltools::htmlDependency( + name = "calcite-date-picker-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-date-picker.js" + ) + + res <- htmltools::tag( + "calcite-date-picker", + c(all_attribs, list(calcite_dependency(), date_picker_binding)) + ) + + class(res) <- c("calcite_component", class(res)) + res +} diff --git a/R/notice.R b/R/notice.R new file mode 100644 index 0000000..a80f76e --- /dev/null +++ b/R/notice.R @@ -0,0 +1,209 @@ +#' Create a Calcite Notice Component +#' +#' Creates a notice component for displaying informative, contextually relevant +#' messages. Best for persistent information that can be open at page load or +#' displayed as a result of user action. +#' +#' @param ... Child content for slots (title, message, link, actions-end) +#' @param id Component ID (required for Shiny reactivity) +#' @param open Whether the notice is visible (default: FALSE) +#' @param closable Whether to show a close button (default: FALSE) +#' @param icon Show default icon (TRUE) or specific icon name (string) +#' @param icon_flip_rtl Flip icon in RTL languages (default: FALSE) +#' @param kind Type of notice: "brand", "danger", "info", "success", or "warning" +#' @param scale Size of the component: "s" (small), "m" (medium), or "l" (large) +#' @param width Width behavior: "auto" or "full" (note: "half" is deprecated) +#' +#' @details +#' ## Shiny Integration +#' +#' The notice emits events when opened or closed, making it easy to track state +#' and respond to user dismissals. +#' +#' **Available properties in `input$id`:** +#' - `$open` - Whether the notice is currently visible +#' - `$closable` - Whether the notice can be closed +#' - `$kind` - The type of notice +#' - Other component properties +#' +#' **Basic usage:** +#' ```r +#' calcite_notice( +#' id = "my_notice", +#' open = TRUE, +#' closable = TRUE, +#' kind = "success", +#' icon = TRUE, +#' div(slot = "title", "Success!"), +#' div(slot = "message", "Your changes have been saved.") +#' ) +#' +#' # In server - detect when user closes the notice +#' observeEvent(input$my_notice$open, { +#' if (!input$my_notice$open) { +#' message("User dismissed the notice") +#' } +#' }) +#' ``` +#' +#' **Show/hide from server:** +#' ```r +#' # Show a notice +#' update_calcite("my_notice", open = TRUE) +#' +#' # Hide a notice +#' update_calcite("my_notice", open = FALSE) +#' ``` +#' +#' ## Slots +#' +#' The notice supports several slots for organizing content: +#' - **title**: The notice title +#' - **message**: The notice message +#' - **link**: A calcite-action for links like "Read more" +#' - **actions-end**: Additional actions (recommended: 2 or fewer) +#' +#' ## Best Practices +#' +#' - Use for informative, contextually relevant information +#' - Can be open at page load or shown based on user action +#' - Can be persistent or closable +#' - Use appropriate `kind` to convey message severity +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/notice/) +#' @examples +#' # Basic notice +#' calcite_notice( +#' open = TRUE, +#' icon = TRUE, +#' closable = TRUE, +#' div(slot = "title", "New feature available"), +#' div(slot = "message", "Check out the reporting dashboard") +#' ) +#' +#' # Notice with specific icon and kind +#' calcite_notice( +#' open = TRUE, +#' kind = "danger", +#' icon = "exclamation-mark-triangle", +#' div(slot = "title", "Error in form"), +#' div(slot = "message", "Please correct the highlighted fields") +#' ) +#' +#' # Notice with action link +#' calcite_notice( +#' open = TRUE, +#' icon = "layers-reference", +#' div(slot = "title", "Try this trick"), +#' div(slot = "message", "Select multiple layers at once"), +#' calcite_link(slot = "link", title = "my action", "Read more") +#' ) +#' +#' # Shiny example with server control +#' if (interactive()) { +#' library(shiny) +#' +#' ui <- calcite_shell( +#' calcite_panel( +#' heading = "Notice Demo", +#' +#' calcite_notice( +#' id = "my_notice", +#' open = FALSE, +#' closable = TRUE, +#' kind = "success", +#' icon = TRUE, +#' div(slot = "title", "Success!"), +#' div(slot = "message", "Your action completed successfully") +#' ), +#' +#' calcite_button( +#' id = "show_notice", +#' "Show Notice" +#' ), +#' +#' verbatimTextOutput("notice_status") +#' ) +#' ) +#' +#' server <- function(input, output, session) { +#' # Show notice when button clicked +#' observeEvent(input$show_notice$clicked, { +#' update_calcite("my_notice", open = TRUE) +#' }) +#' +#' # Track notice state +#' output$notice_status <- renderPrint({ +#' list( +#' is_open = input$my_notice$open, +#' kind = input$my_notice$kind +#' ) +#' }) +#' } +#' +#' shinyApp(ui, server) +#' } +calcite_notice <- function( + ..., + id = NULL, + open = NULL, + closable = NULL, + icon = NULL, + icon_flip_rtl = NULL, + kind = NULL, + scale = NULL, + width = NULL +) { + # Validate kind if provided + if (!is.null(kind)) { + kind <- rlang::arg_match(kind, c("brand", "danger", "info", "success", "warning")) + } + + # Validate scale if provided + if (!is.null(scale)) { + scale <- rlang::arg_match(scale, c("s", "m", "l")) + } + + # Validate width if provided + if (!is.null(width)) { + width <- rlang::arg_match(width, c("auto", "full")) + } + + # Build attributes list + # For boolean attributes, only include them if TRUE (omit if FALSE/NULL) + attribs <- compact(list( + id = id, + open = if (isTRUE(open)) TRUE else NULL, + closable = if (isTRUE(closable)) TRUE else NULL, + icon = icon, + `icon-flip-rtl` = if (isTRUE(icon_flip_rtl)) TRUE else NULL, + kind = kind, + scale = scale, + width = width + )) + + # Combine with dots + extra_attribs <- rlang::dots_list(...) + all_attribs <- c( + attribs, + extra_attribs[!names(extra_attribs) %in% names(attribs)] + ) + + # Custom binding for notice + notice_binding <- htmltools::htmlDependency( + name = "calcite-notice-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-notice.js" + ) + + res <- htmltools::tag( + "calcite-notice", + c(all_attribs, list(calcite_dependency(), notice_binding)) + ) + + class(res) <- c("calcite_component", class(res)) + res +} diff --git a/R/panel.R b/R/panel.R new file mode 100644 index 0000000..0fc12a0 --- /dev/null +++ b/R/panel.R @@ -0,0 +1,265 @@ +#' Create a Calcite Panel Component +#' +#' Panel is a container that can house interactions as well as live within other +#' Calcite Components. It provides a header with heading text and a summary, and +#' slots to add Actions and Icons to the start and end of the header. +#' +#' @param ... Main content for the panel (default slot) +#' @param id Component ID (required for Shiny reactivity) +#' @param heading Header text for the panel +#' @param description Description text displayed below the heading +#' @param closable Whether to display a close button in the header (default: FALSE) +#' @param closed Whether the component is hidden (default: FALSE) +#' @param collapsed Whether the content area is hidden (default: FALSE) +#' @param collapse_direction Direction of collapse icon: "down" or "up" (default: "down") +#' @param collapsible Whether the panel can be collapsed (default: FALSE) +#' @param disabled Whether interaction is prevented (default: FALSE) +#' @param heading_level Semantic heading level (1-6) for accessibility +#' @param icon Icon to display in the header +#' @param icon_flip_rtl Flip icon in RTL languages (default: FALSE) +#' @param loading Whether to display a busy indicator (default: FALSE) +#' @param menu_flip_placements Fallback placements for the menu when space is insufficient +#' @param menu_open Whether the action menu items are open (default: FALSE) +#' @param menu_placement Placement of the action menu (default: "bottom-end") +#' @param message_overrides Override individual strings used by the component +#' @param overlay_positioning Positioning type for overlaid content: "absolute" or "fixed" (default: "absolute") +#' @param scale Size of the component: "s" (small), "m" (medium), or "l" (large) (default: "m") +#' @param action_bar Content for the action-bar slot (typically [calcite_action_bar()]) +#' @param alerts Content for the alerts slot (typically [calcite_alert()] components) +#' @param content_bottom Content below the main slot and above the footer +#' @param content_top Content above the main slot and below the action-bar +#' @param header_actions_start Actions or content at the start of the header +#' @param header_actions_end Actions or content at the end of the header +#' @param header_content Custom content for the header +#' @param header_menu_actions Overflow menu with actions (typically in [calcite_dropdown()]) +#' @param fab Floating action button (typically [calcite_fab()]) +#' @param footer Custom content for the footer (don't use with footer_start/footer_end) +#' @param footer_start Leading footer content (don't use with footer slot) +#' @param footer_end Trailing footer content (don't use with footer slot) +#' +#' @details +#' ## Shiny Integration +#' +#' The panel emits events when it's closed, collapsed, expanded, scrolled, or toggled. +#' +#' **Available properties in `input$id`:** +#' - `$closable` - Whether the close button is displayed +#' - `$closed` - Whether the panel is hidden +#' - `$collapsed` - Whether the content area is collapsed +#' - `$collapsible` - Whether the panel is collapsible +#' - `$disabled` - Whether the panel is disabled +#' - Other component properties +#' +#' **Events:** +#' - `calcitePanelClose` - Fires when the close button is clicked +#' - `calcitePanelCollapse` - Fires when the content area is collapsed +#' - `calcitePanelExpand` - Fires when the content area is expanded +#' - `calcitePanelScroll` - Fires when the content is scrolled +#' - `calcitePanelToggle` - Fires when the collapse button is clicked +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/panel/) +#' @examples +#' # Basic panel with heading +#' calcite_panel( +#' id = "my_panel", +#' heading = "Map Options", +#' "Panel content goes here..." +#' ) +#' +#' # Collapsible panel with icon +#' calcite_panel( +#' heading = "Layer effects", +#' description = "Adjust blur, highlight, and more", +#' collapsible = TRUE, +#' icon = "effects", +#' "Panel content" +#' ) +#' +#' # Panel with header actions and footer +#' calcite_panel( +#' heading = "Settings", +#' header_actions_start = calcite_action( +#' icon = "question", +#' text = "Help", +#' slot = "header-actions-start" +#' ), +#' header_actions_end = calcite_action( +#' icon = "save", +#' text = "Save", +#' slot = "header-actions-end" +#' ), +#' footer = tagList( +#' calcite_button(width = "half", appearance = "outline", "Cancel"), +#' calcite_button(width = "half", "Save") +#' ), +#' "Panel content" +#' ) +calcite_panel <- function( + ..., + id = NULL, + heading = NULL, + description = NULL, + closable = NULL, + closed = NULL, + collapsed = NULL, + collapse_direction = NULL, + collapsible = NULL, + disabled = NULL, + heading_level = NULL, + icon = NULL, + icon_flip_rtl = NULL, + loading = NULL, + menu_flip_placements = NULL, + menu_open = NULL, + menu_placement = NULL, + message_overrides = NULL, + overlay_positioning = NULL, + scale = NULL, + action_bar = NULL, + alerts = NULL, + content_bottom = NULL, + content_top = NULL, + header_actions_start = NULL, + header_actions_end = NULL, + header_content = NULL, + header_menu_actions = NULL, + fab = NULL, + footer = NULL, + footer_start = NULL, + footer_end = NULL +) { + # Validate collapse_direction if provided + if (!is.null(collapse_direction)) { + collapse_direction <- rlang::arg_match(collapse_direction, c("down", "up")) + } + + # Validate heading_level if provided + if (!is.null(heading_level)) { + heading_level <- rlang::arg_match( + as.character(heading_level), + as.character(1:6) + ) + } + + # Validate menu_placement if provided + if (!is.null(menu_placement)) { + menu_placement <- rlang::arg_match( + menu_placement, + c( + "auto", "auto-end", "auto-start", + "bottom", "bottom-end", "bottom-start", + "leading", "leading-end", "leading-start", + "left", "left-end", "left-start", + "right", "right-end", "right-start", + "top", "top-end", "top-start", + "trailing", "trailing-end", "trailing-start" + ) + ) + } + + # Validate overlay_positioning if provided + if (!is.null(overlay_positioning)) { + overlay_positioning <- rlang::arg_match( + overlay_positioning, + c("absolute", "fixed") + ) + } + + # Validate scale if provided + if (!is.null(scale)) { + scale <- rlang::arg_match(scale, c("s", "m", "l")) + } + + # Build attributes list + attribs <- compact(list( + id = id, + heading = heading, + description = description, + closable = closable, + closed = closed, + collapsed = collapsed, + `collapse-direction` = collapse_direction, + collapsible = collapsible, + disabled = disabled, + `heading-level` = heading_level, + icon = icon, + `icon-flip-rtl` = icon_flip_rtl, + loading = loading, + `menu-open` = menu_open, + `menu-placement` = menu_placement, + `overlay-positioning` = overlay_positioning, + scale = scale + )) + + # Combine with dots (child content) + extra_attribs <- rlang::dots_list(...) + all_attribs <- c( + attribs, + extra_attribs[!names(extra_attribs) %in% names(attribs)] + ) + + # Helper to add slot attribute if content exists + add_slot <- function(content, slot_name) { + if (is.null(content)) return(NULL) + + # If content is already a tag, add/override the slot attribute + if (inherits(content, "shiny.tag")) { + content$attribs$slot <- slot_name + return(content) + } + + # If it's a list of tags, add slot to each + if (is.list(content)) { + return(lapply(content, function(x) { + if (inherits(x, "shiny.tag")) { + x$attribs$slot <- slot_name + } + x + })) + } + + # Otherwise wrap in div with slot + htmltools::div(slot = slot_name, content) + } + + # Collect all slot content + slot_content <- c( + add_slot(action_bar, "action-bar"), + add_slot(alerts, "alerts"), + add_slot(content_bottom, "content-bottom"), + add_slot(content_top, "content-top"), + add_slot(header_actions_start, "header-actions-start"), + add_slot(header_actions_end, "header-actions-end"), + add_slot(header_content, "header-content"), + add_slot(header_menu_actions, "header-menu-actions"), + add_slot(fab, "fab"), + add_slot(footer, "footer"), + add_slot(footer_start, "footer-start"), + add_slot(footer_end, "footer-end") + ) + + # Remove NULLs + slot_content <- Filter(Negate(is.null), slot_content) + + # Custom binding for panel + panel_binding <- htmltools::htmlDependency( + name = "calcite-panel-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-panel.js" + ) + + res <- htmltools::tag( + "calcite-panel", + c( + all_attribs, + slot_content, + list(calcite_dependency(), panel_binding) + ) + ) + + class(res) <- c("calcite_component", class(res)) + res +} diff --git a/R/segmented-control.R b/R/segmented-control.R new file mode 100644 index 0000000..d7bd9b7 --- /dev/null +++ b/R/segmented-control.R @@ -0,0 +1,244 @@ +#' Create a Calcite Segmented Control Component +#' +#' Creates a segmented control for selecting between multiple options. Similar to +#' radio buttons but with a more compact, segmented button appearance. +#' +#' @param ... Child `calcite_segmented_control_item()` elements +#' @param id Component ID (required for Shiny reactivity) +#' @param value Initial selected value (should match a child item's value) +#' @param appearance Visual style: "solid", "outline", or "outline-fill" +#' @param disabled Whether the control is disabled (default: FALSE) +#' @param layout Orientation: "horizontal" or "vertical" +#' @param scale Size of the control: "s" (small), "m" (medium), or "l" (large) +#' @param width Width behavior: "auto" or "full" +#' @param name Name for form submission +#' @param label_text Label displayed on the component +#' @param status Validation state: "idle", "valid", or "invalid" +#' @param validation_message Message displayed for validation feedback +#' @param required Whether selection is required +#' @param ... Additional attributes passed to the component +#' +#' @details +#' ## Shiny Integration +#' +#' The segmented control emits a `calciteSegmentedControlChange` event when the +#' selected item changes. +#' +#' **Available properties in `input$id`:** +#' - `$value` - Currently selected value (matches a child item's value attribute) +#' - `$disabled` - Whether the control is disabled +#' - `$scale` - Current scale setting +#' - Other component properties +#' +#' **Basic usage:** +#' ```r +#' calcite_segmented_control( +#' id = "effect_type", +#' width = "full", +#' calcite_segmented_control_item(value = "blur"), +#' calcite_segmented_control_item(value = "highlight", checked = TRUE), +#' calcite_segmented_control_item(value = "party") +#' ) +#' +#' # In server +#' observeEvent(input$effect_type, { +#' selected <- input$effect_type$value +#' print(paste("Selected:", selected)) +#' }) +#' ``` +#' +#' **Update from server:** +#' ```r +#' update_calcite("effect_type", value = "blur") +#' ``` +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/segmented-control/) +#' @examples +#' # Basic segmented control +#' calcite_segmented_control( +#' id = "view_mode", +#' calcite_segmented_control_item(value = "list", icon_start = "list"), +#' calcite_segmented_control_item(value = "grid", icon_start = "grid", checked = TRUE), +#' calcite_segmented_control_item(value = "table", icon_start = "table") +#' ) +#' +#' # Full width with text +#' calcite_segmented_control( +#' id = "effect", +#' width = "full", +#' calcite_segmented_control_item(value = "Blur"), +#' calcite_segmented_control_item(value = "Highlight", checked = TRUE), +#' calcite_segmented_control_item(value = "Party mode") +#' ) +#' +#' # Shiny example +#' if (interactive()) { +#' library(shiny) +#' +#' ui <- calcite_shell( +#' calcite_card( +#' heading = "Segmented Control Example", +#' calcite_label( +#' "Choose an option", +#' calcite_segmented_control( +#' id = "my_control", +#' width = "full", +#' calcite_segmented_control_item(value = "option1"), +#' calcite_segmented_control_item(value = "option2", checked = TRUE), +#' calcite_segmented_control_item(value = "option3") +#' ) +#' ), +#' verbatimTextOutput("selected_value") +#' ) +#' ) +#' +#' server <- function(input, output, session) { +#' output$selected_value <- renderPrint({ +#' paste("Selected:", input$my_control$value) +#' }) +#' } +#' +#' shinyApp(ui, server) +#' } +calcite_segmented_control <- function( + ..., + id = NULL, + value = NULL, + appearance = NULL, + disabled = NULL, + layout = NULL, + scale = NULL, + width = NULL, + name = NULL, + label_text = NULL, + status = NULL, + validation_message = NULL, + required = NULL +) { + # Validate appearance if provided + if (!is.null(appearance)) { + appearance <- rlang::arg_match(appearance, c("solid", "outline", "outline-fill")) + } + + # Validate layout if provided + if (!is.null(layout)) { + layout <- rlang::arg_match(layout, c("horizontal", "vertical")) + } + + # Validate scale if provided + if (!is.null(scale)) { + scale <- rlang::arg_match(scale, c("s", "m", "l")) + } + + # Validate width if provided + if (!is.null(width)) { + width <- rlang::arg_match(width, c("auto", "full")) + } + + # Validate status if provided + if (!is.null(status)) { + status <- rlang::arg_match(status, c("idle", "valid", "invalid")) + } + + # Build attributes list + attribs <- compact(list( + id = id, + value = value, + appearance = appearance, + disabled = disabled, + layout = layout, + scale = scale, + width = width, + name = name, + `label-text` = label_text, + status = status, + `validation-message` = validation_message, + required = required + )) + + # Custom binding for segmented control + control_binding <- htmltools::htmlDependency( + name = "calcite-segmented-control-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-segmented-control.js" + ) + + res <- htmltools::tag( + "calcite-segmented-control", + c( + attribs, + rlang::dots_list(...), + list(calcite_dependency(), control_binding) + ) + ) + + class(res) <- c("calcite_component", class(res)) + res +} + +#' Create a Calcite Segmented Control Item Component +#' +#' Creates an individual item within a segmented control. Must be used as a child +#' of `calcite_segmented_control()`. +#' +#' @param value The value this item represents (required) +#' @param checked Whether this item is initially selected (default: FALSE) +#' @param icon_start Icon to display at the start of the item +#' @param icon_end Icon to display at the end of the item +#' @param icon_flip_rtl Whether to flip the icon in RTL languages (default: FALSE) +#' @param ... Additional content or attributes (text label if provided as unnamed argument) +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/segmented-control-item/) +#' @examples +#' # Item with text label +#' calcite_segmented_control_item(value = "option1") +#' +#' # Item with icon +#' calcite_segmented_control_item( +#' value = "list", +#' icon_start = "list" +#' ) +#' +#' # Initially selected item +#' calcite_segmented_control_item( +#' value = "default", +#' checked = TRUE +#' ) +calcite_segmented_control_item <- function( + value, + label = value, + checked = NULL, + icon_start = NULL, + icon_end = NULL, + icon_flip_rtl = NULL, + ... +) { + # Build attributes list + attribs <- compact(list( + value = value, + checked = checked, + `icon-start` = icon_start, + `icon-end` = icon_end, + `icon-flip-rtl` = icon_flip_rtl + )) + + # Combine attributes with extra attributes from dots + extra_attribs <- rlang::dots_list(...) + all_attribs <- c( + attribs, + extra_attribs[!names(extra_attribs) %in% names(attribs)] + ) + + res <- htmltools::tag( + "calcite-segmented-control-item", + c(all_attribs, list(label, calcite_dependency())) + ) + + class(res) <- c("calcite_component", class(res)) + res +} diff --git a/R/shell.R b/R/shell.R new file mode 100644 index 0000000..092d8dd --- /dev/null +++ b/R/shell.R @@ -0,0 +1,382 @@ +#' Create a Calcite Shell Layout +#' +#' The Shell is a foundational layout component in Calcite, enabling the creation +#' of rich, interactive experiences. It provides structured slots for headers, +#' footers, side panels, and main content. +#' +#' @param ... Main content to display in the default slot (between panels) +#' @param header Content for the header slot (top of shell). Typically a +#' [calcite_navigation()] component. +#' @param footer Content for the footer slot (bottom of shell) +#' @param panel_start Content for the start/left panel. Use [calcite_shell_panel()] +#' with `position = "start"`. +#' @param panel_end Content for the end/right panel. Use [calcite_shell_panel()] +#' with `position = "end"`. +#' @param panel_top Content for the top panel (below header) +#' @param panel_bottom Content for the bottom panel (above footer) +#' @param modals Slot for [calcite_modal()] components +#' @param dialogs Slot for [calcite_dialog()] components +#' @param alerts Slot for [calcite_alert()] components +#' @param sheets Slot for [calcite_sheet()] components +#' +#' @details +#' ## Shell Structure +#' +#' The shell organizes your application into distinct regions: +#' +#' - **header**: Top navigation bar +#' - **panel-start/panel-end**: Side panels (left/right) +#' - **panel-top/panel-bottom**: Top/bottom panels +#' - **Default content**: Main application area (maps, charts, etc.) +#' - **footer**: Bottom information/links +#' - **Overlay slots**: modals, dialogs, alerts, sheets +#' +#' When embedded within other content, the overlay slots (modals, dialogs, alerts, sheets) +#' facilitate placement of these components relative to the Shell, constraining them +#' to the shell's boundaries rather than the full page. +#' +#' @export +#' @return An object of class `calcite_component` which is a subclass of `shiny.tag` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/shell/) +#' @examples +#' # Basic shell with header and content +#' calcite_shell( +#' header = calcite_navigation( +#' calcite_navigation_logo(slot = "logo", heading = "My App") +#' ), +#' "Main content goes here" +#' ) +#' +#' # Shell with action bar sidebar +#' calcite_shell( +#' header = calcite_navigation( +#' calcite_navigation_logo(slot = "logo", heading = "Wildlife Areas") +#' ), +#' panel_start = calcite_shell_panel( +#' position = "start", +#' calcite_action_bar( +#' slot = "action-bar", +#' calcite_action(text = "Layers", icon = "layers") +#' ), +#' calcite_panel(heading = "Layers") +#' ), +#' calcite_panel(heading = "Map View") +#' ) +calcite_shell <- function( + ..., + header = NULL, + footer = NULL, + panel_start = NULL, + panel_end = NULL, + panel_top = NULL, + panel_bottom = NULL, + modals = NULL, + dialogs = NULL, + alerts = NULL, + sheets = NULL +) { + + # Helper to add slot attribute if content exists + add_slot <- function(content, slot_name) { + if (is.null(content)) return(NULL) + + # If content is already a tag, add/override the slot attribute + if (inherits(content, "shiny.tag")) { + content$attribs$slot <- slot_name + return(content) + } + + # If it's a list of tags, add slot to each + if (is.list(content)) { + return(lapply(content, function(x) { + if (inherits(x, "shiny.tag")) { + x$attribs$slot <- slot_name + } + x + })) + } + + # Otherwise wrap in div with slot + htmltools::div(slot = slot_name, content) + } + + # Collect all slot content + slot_content <- list( + add_slot(header, "header"), + add_slot(footer, "footer"), + add_slot(panel_start, "panel-start"), + add_slot(panel_end, "panel-end"), + add_slot(panel_top, "panel-top"), + add_slot(panel_bottom, "panel-bottom"), + add_slot(modals, "modals"), + add_slot(dialogs, "dialogs"), + add_slot(alerts, "alerts"), + add_slot(sheets, "sheets") + ) + + # Remove NULLs + slot_content <- Filter(Negate(is.null), slot_content) + + # Build the shell tag + res <- htmltools::tag( + "calcite-shell", + c( + rlang::dots_list(...), # Main content (no slot attribute) + slot_content, + list(calcite_dependency(), calcite_bindings()) + ) + ) + + class(res) <- c("calcite_component", class(res)) + res +} + + +#' Create a Shell with Action Bar Layout +#' +#' A convenience function that creates a common layout pattern: a shell with +#' a navigation header and a collapsible action bar panel on the start (left) side. +#' This is ideal for map-based applications or tools with multiple layers/options. +#' +#' @param ... Main content area (typically a map or primary view) +#' @param title Application title shown in the navigation header +#' @param header_actions Optional actions for the header (e.g., user menu, settings). +#' These will be placed in the `content-end` slot of the navigation. +#' @param actions Action bar content. Either a [calcite_action_bar()] component or +#' a list of [calcite_action()] components that will be wrapped in an action bar. +#' @param panel_content Content for the side panel (shown when an action is selected). +#' Can be a [calcite_panel()] or other content. +#' @param panel_position Position of the panel. Either "start" (left) or "end" (right). +#' @param panel_width Width of the panel when expanded. Options: "s", "m", "l". +#' @param footer Optional footer content +#' +#' @export +#' @return An object of class `calcite_component` containing a configured shell +#' @examples +#' page_actionbar( +#' title = "Wildlife Areas", +#' actions = calcite_action_bar( +#' calcite_action(text = "Add", icon = "plus"), +#' calcite_action(text = "Layers", icon = "layers", active = TRUE) +#' ), +#' panel_content = calcite_panel( +#' heading = "Layers", +#' "Layer controls here" +#' ), +#' "Map content here" +#' ) +page_actionbar <- function( + ..., + title = NULL, + header_actions = NULL, + actions = NULL, + panel_content = NULL, + panel_position = c("start", "end"), + panel_width = c("m", "s", "l"), + footer = NULL +) { + + panel_position <- match.arg(panel_position) + panel_width <- match.arg(panel_width) + + # Create navigation header if title provided + nav <- if (!is.null(title)) { + calcite_navigation( + calcite_navigation_logo(slot = "logo", heading = title), + if (!is.null(header_actions)) { + htmltools::tagList( + lapply(header_actions, function(action) { + if (inherits(action, "shiny.tag")) { + action$attribs$slot <- "content-end" + } + action + }) + ) + } + ) + } + + # Create shell panel if actions provided + panel <- if (!is.null(actions) || !is.null(panel_content)) { + + # Wrap actions in action-bar if they aren't already + action_bar_content <- if (!is.null(actions)) { + if (inherits(actions, "shiny.tag") && grepl("calcite-action-bar", actions$name)) { + actions$attribs$slot <- "action-bar" + actions + } else { + calcite_action_bar(slot = "action-bar", actions) + } + } + + calcite_shell_panel( + position = panel_position, + width = panel_width, + id = paste0("shell-panel-", panel_position), + action_bar_content, + panel_content + ) + } + + # Determine which panel slot to use + panel_slot <- if (panel_position == "start") panel else NULL + panel_end_slot <- if (panel_position == "end") panel else NULL + + calcite_shell( + ..., + header = nav, + panel_start = panel_slot, + panel_end = panel_end_slot, + footer = footer + ) +} + + +#' Create a Shell with Navigation Bar Layout +#' +#' A convenience function for creating a simple layout with a navigation header +#' and main content area. This is ideal for dashboard-style applications. +#' +#' @param ... Main content area +#' @param title Application title shown in the navigation header +#' @param logo Optional logo component for the navigation +#' @param nav_actions Optional actions for the navigation bar (placed in `content-end`) +#' @param footer Optional footer content +#' +#' @export +#' @return An object of class `calcite_component` containing a configured shell +#' @examples +#' page_navbar( +#' title = "My Dashboard", +#' nav_actions = list( +#' calcite_action(icon = "gear", text = "Settings"), +#' calcite_action(icon = "sign-out", text = "Logout") +#' ), +#' "Dashboard content here" +#' ) +page_navbar <- function( + ..., + title = NULL, + logo = NULL, + nav_actions = NULL, + footer = NULL +) { + + # Create logo element + logo_elem <- if (!is.null(logo)) { + if (inherits(logo, "shiny.tag")) { + logo$attribs$slot <- "logo" + logo + } else { + logo + } + } else if (!is.null(title)) { + calcite_navigation_logo(slot = "logo", heading = title) + } + + # Add slot to nav actions + nav_actions_elem <- if (!is.null(nav_actions)) { + if (is.list(nav_actions)) { + lapply(nav_actions, function(action) { + if (inherits(action, "shiny.tag")) { + action$attribs$slot <- "content-end" + } + action + }) + } else if (inherits(nav_actions, "shiny.tag")) { + nav_actions$attribs$slot <- "content-end" + nav_actions + } + } + + # Create navigation + nav <- calcite_navigation( + logo_elem, + nav_actions_elem + ) + + calcite_shell( + ..., + header = nav, + footer = footer + ) +} + + +#' Create a Shell with Sidebar Panel Layout +#' +#' Similar to [bslib::page_sidebar()], this creates a layout with a sidebar panel +#' and main content area. The sidebar can be positioned on the left or right. +#' +#' @param ... Main content area +#' @param sidebar Content for the sidebar panel +#' @param title Optional application title +#' @param position Position of sidebar: "start" (left) or "end" (right) +#' @param width Width of the sidebar: "s", "m", or "l" +#' @param collapsible Whether the sidebar can be collapsed (default TRUE) +#' @param footer Optional footer content +#' +#' @export +#' @return An object of class `calcite_component` containing a configured shell +#' @examples +#' page_sidebar( +#' title = "Data Explorer", +#' sidebar = calcite_panel( +#' heading = "Filters", +#' "Filter controls here" +#' ), +#' "Main data view here" +#' ) +page_sidebar <- function( + ..., + sidebar = NULL, + title = NULL, + position = c("start", "end"), + width = c("m", "s", "l"), + collapsible = TRUE, + footer = NULL +) { + + position <- match.arg(position) + width <- match.arg(width) + + # Create navigation if title provided + nav <- if (!is.null(title)) { + calcite_navigation( + calcite_navigation_logo(slot = "logo", heading = title) + ) + } + + # Create sidebar panel + panel <- if (!is.null(sidebar)) { + # If sidebar is already a shell-panel, use it + if (inherits(sidebar, "shiny.tag") && grepl("calcite-shell-panel", sidebar$name)) { + sidebar$attribs$position <- position + sidebar$attribs$width <- width + if (!collapsible) { + sidebar$attribs$`display-mode` <- "float" + } + sidebar + } else { + # Otherwise wrap it + calcite_shell_panel( + position = position, + width = width, + displayMode = if (!collapsible) "float" else NULL, + sidebar + ) + } + } + + # Determine which panel slot to use + panel_slot <- if (position == "start") panel else NULL + panel_end_slot <- if (position == "end") panel else NULL + + calcite_shell( + ..., + header = nav, + panel_start = panel_slot, + panel_end = panel_end_slot, + footer = footer + ) +} diff --git a/R/slider.R b/R/slider.R new file mode 100644 index 0000000..da857b0 --- /dev/null +++ b/R/slider.R @@ -0,0 +1,295 @@ +#' Create a Calcite Slider Component +#' +#' Creates a slider input for selecting numeric values. Supports both single-value +#' and range selection (dual handles). +#' +#' @param id Component ID (required for Shiny reactivity) +#' @param value Initial value (for single slider) or NULL +#' @param min Minimum selectable value (default: 0) +#' @param max Maximum selectable value (default: 100) +#' @param step Increment step for up/down arrows and keyboard (default: 1) +#' @param min_value For range sliders, the lower bound value +#' @param max_value For range sliders, the upper bound value +#' @param label_handles Whether to display numeric labels on handles (default: FALSE) +#' @param label_ticks Whether to display numeric labels on tick marks (default: FALSE) +#' @param ticks Interval for displaying tick marks on the number line +#' @param disabled Whether the slider is disabled (default: FALSE) +#' @param scale Size of the slider: "s" (small), "m" (medium), or "l" (large) +#' @param snap Whether to enable snap-to-step on mouse interaction (default: FALSE) +#' @param precise Whether to use finer positioning for handles (default: FALSE) +#' @param group_separator Whether to display thousand separators in numbers (default: FALSE) +#' @param page_step Interval to move with Page Up/Down keys +#' @param min_label Accessible label for the minimum handle (for screen readers) +#' @param max_label Accessible label for the maximum handle (for screen readers) +#' @param ... Additional attributes passed to the component +#' +#' @details +#' ## Shiny Integration +#' +#' The slider emits two types of events: +#' - **`calciteSliderChange`** - Fires when the user releases the handle (debounced, final value) +#' - **`calciteSliderInput`** - Fires continuously during drag (use with caution for expensive operations) +#' +#' **Available properties in `input$id`:** +#' - `$value` - Current value (single slider) or array of `[minValue, maxValue]` (range slider) +#' - `$min` / `$max` - Slider bounds +#' - `$step` - Step increment +#' - `$disabled` - Whether disabled +#' - Other component properties +#' +#' **Single-value slider:** +#' ```r +#' observeEvent(input$my_slider, { +#' current_value <- input$my_slider$value +#' print(paste("Slider value:", current_value)) +#' }) +#' ``` +#' +#' **Range slider (dual handles):** +#' ```r +#' # Provide both min_value and max_value to create a range slider +#' calcite_slider( +#' id = "range_slider", +#' min = 0, +#' max = 100, +#' min_value = 20, +#' max_value = 80 +#' ) +#' +#' observeEvent(input$range_slider, { +#' lower <- input$range_slider$minValue +#' upper <- input$range_slider$maxValue +#' print(paste("Range:", lower, "to", upper)) +#' }) +#' ``` +#' +#' **Update from server:** +#' ```r +#' # Update single value +#' update_calcite("my_slider", value = 50) +#' +#' # Update range +#' update_calcite("range_slider", minValue = 30, maxValue = 70) +#' ``` +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/slider/) +#' @examples +#' # Basic slider +#' calcite_slider( +#' id = "my_slider", +#' value = 50, +#' min = 0, +#' max = 100, +#' step = 5 +#' ) +#' +#' # Slider with ticks and labels +#' calcite_slider( +#' id = "temperature", +#' value = 72, +#' min = 32, +#' max = 212, +#' step = 1, +#' ticks = 10, +#' label_handles = TRUE, +#' label_ticks = TRUE +#' ) +#' +#' # Range slider (dual handles) +#' calcite_slider( +#' id = "price_range", +#' min = 0, +#' max = 1000, +#' min_value = 100, +#' max_value = 500, +#' step = 10, +#' label_handles = TRUE +#' ) +#' +#' # Shiny example +#' if (interactive()) { +#' library(shiny) +#' +#' ui <- calcite_shell( +#' calcite_card( +#' heading = "Slider Example", +#' calcite_label( +#' "Choose a value", +#' calcite_slider( +#' id = "my_slider", +#' value = 50, +#' min = 0, +#' max = 100, +#' step = 5, +#' label_handles = TRUE +#' ) +#' ), +#' verbatimTextOutput("slider_value") +#' ) +#' ) +#' +#' server <- function(input, output, session) { +#' output$slider_value <- renderPrint({ +#' paste("Current value:", input$my_slider$value) +#' }) +#' } +#' +#' shinyApp(ui, server) +#' } +calcite_slider <- function( + id = NULL, + value = NULL, + min = 0, + max = 100, + step = 1, + min_value = NULL, + max_value = NULL, + label_handles = NULL, + label_ticks = NULL, + label_text = NULL, + ticks = NULL, + disabled = NULL, + required = NULL, + scale = NULL, + snap = NULL, + precise = NULL, + mirrored = NULL, + fill_placement = NULL, + histogram = NULL, + histogram_stops = NULL, + group_separator = NULL, + page_step = NULL, + min_label = NULL, + max_label = NULL, + name = NULL, + form = NULL, + numbering_system = NULL, + status = NULL, + validation_icon = NULL, + validation_message = NULL, + ... +) { + # check histogram data + if (!is.null(histogram)) { + histogram <- check_hist(histogram, min, max) + } + + # Validate scale if provided + if (!is.null(scale)) { + scale <- rlang::arg_match(scale, c("s", "m", "l")) + } + + # Validate fill_placement if provided + if (!is.null(fill_placement)) { + fill_placement <- rlang::arg_match( + fill_placement, + c("start", "end", "none") + ) + } + + # Validate numbering_system if provided + if (!is.null(numbering_system)) { + numbering_system <- rlang::arg_match( + numbering_system, + c("arab", "arabext", "latn") + ) + } + + # Validate status if provided + if (!is.null(status)) { + status <- rlang::arg_match(status, c("idle", "valid", "invalid")) + } + + # Build attributes list + attribs <- compact(list( + id = id, + value = value, + min = min, + max = max, + step = step, + `min-value` = min_value, + `max-value` = max_value, + `label-handles` = label_handles, + `label-ticks` = label_ticks, + `label-text` = label_text, + ticks = ticks, + disabled = disabled, + required = required, + scale = scale, + snap = snap, + precise = precise, + mirrored = mirrored, + `fill-placement` = fill_placement, + `has-histogram` = !is.null(histogram), + `histogram-stops` = histogram_stops, + `group-separator` = group_separator, + `page-step` = page_step, + `min-label` = min_label, + `max-label` = max_label, + name = name, + form = form, + `numbering-system` = numbering_system, + status = status, + `validation-icon` = validation_icon, + `validation-message` = validation_message + )) + + # Combine with additional attributes + extra_attribs <- rlang::dots_list(...) + + all_attribs <- c( + attribs, + extra_attribs[!names(extra_attribs) %in% names(attribs)] + ) + + # Add histogram as data attribute with JSON serialization + if (!is.null(histogram)) { + all_attribs$`data-histogram` <- yyjsonr::write_json_str(histogram, auto_unbox = TRUE) + } + + # Custom binding for slider + slider_binding <- htmltools::htmlDependency( + name = "calcite-slider-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-slider.js" + ) + + res <- htmltools::tag( + "calcite-slider", + c(all_attribs, list(calcite_dependency(), slider_binding)) + ) + + class(res) <- c("calcite_component", class(res)) + res +} + +check_hist <- function(x, min, max, error_call = rlang::caller_call()) { + e_msg <- "{.arg histogram} must be either a 2 column numeric matrix or data.frame" + if (!rlang::inherits_any(x, c("matrix", "data.frame"))) { + cli::cli_abort( + e_msg, + call = error_call + ) + } + + # if a matrix ensure it has 2 columns + # ensure they are both numeric + x <- as.matrix(x) + if (!rlang::is_bare_numeric(x) || NCOL(x) != 2L) { + cli::cli_abort(e_msg, call = error_call) + } + + # x (first column), must be within min and max + if (any(x[, 1] > max | x[, 1] < min)) { + cli::cli_abort( + "{.arg histogram} falls out of range specified by {.arg min} ({.val {min}}) and {.arg max} ({.val {max}})", + call = error_call + ) + } + + # Convert matrix to list of [x, y] pairs for JSON serialization + lapply(seq_len(nrow(x)), function(i) as.list(x[i, ])) +} diff --git a/R/tile-group.R b/R/tile-group.R new file mode 100644 index 0000000..c26baf8 --- /dev/null +++ b/R/tile-group.R @@ -0,0 +1,158 @@ +#' Create a Calcite Tile Group Component +#' +#' Tile Group can be used to organize multiple Tile components within a layout. +#' It supports workflows and patterns using more than one Tile, with opt-in +#' selection modes for interactive workflows. +#' +#' @param ... Child `calcite_tile()` components +#' @param id Optional ID for the tile group (required for Shiny reactivity to track selection) +#' @param label Accessible name for the component (required for accessibility) +#' @param layout Defines the layout: "horizontal" for rows, "vertical" for a single column +#' @param alignment Specifies alignment of each tile's content: "start" or "center" +#' @param scale Specifies size of the component: "s" (small), "m" (medium), or "l" (large) +#' @param selection_mode Specifies the selection mode: "none" (default), "single", "single-persist", or "multiple" +#' @param selection_appearance Specifies selection appearance: "icon" (checkmark/dot) or "border" +#' @param disabled When TRUE, interaction is prevented and component displays with lower opacity (default: FALSE) +#' +#' @details +#' ## Selection Modes +#' +#' - `"none"` - No selection allowed (default) +#' - `"single"` - Only one tile can be selected at a time +#' - `"single-persist"` - Only one tile selected, prevents de-selection +#' - `"multiple"` - Any number of tiles can be selected +#' +#' ## Shiny Integration +#' +#' When used in a Shiny app with an `id`, `calcite_tile_group()` returns a reactive +#' list containing component properties and emits events when selection changes. +#' +#' **Available properties:** +#' - `$selectedItems` - Array of selected tile IDs +#' - `$selectionMode` - Current selection mode +#' - `$layout` - Current layout +#' - `$disabled` - Whether the group is disabled +#' - Other component properties +#' +#' **Usage in server:** +#' ```r +#' # Watch for selection changes +#' observeEvent(input$my_tile_group$selectedItems, { +#' selected <- input$my_tile_group$selectedItems +#' message("Selected tiles: ", paste(selected, collapse = ", ")) +#' }) +#' ``` +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/tile-group/) +#' @examples +#' # Basic tile group +#' calcite_tile_group( +#' label = "Role selection", +#' calcite_tile( +#' icon = "rangefinder", +#' heading = "Field operator", +#' description = "Create and edit Reports in the field" +#' ), +#' calcite_tile( +#' icon = "knowledge-graph-dashboard", +#' heading = "Office coordinator", +#' description = "View and analyze Reports from the office" +#' ) +#' ) +#' +#' # Tile group with multiple selection +#' calcite_tile_group( +#' id = "role_selector", +#' label = "Select roles", +#' selection_mode = "multiple", +#' selection_appearance = "border", +#' layout = "vertical", +#' calcite_tile( +#' id = "construction", +#' icon = "wrench", +#' heading = "Construction Worker", +#' description = "Manage construction projects and coordinate teams" +#' ), +#' calcite_tile( +#' id = "engineer", +#' icon = "rangefinder", +#' heading = "Civil Engineer", +#' description = "Design infrastructure and ensure compliance" +#' ) +#' ) +calcite_tile_group <- function( + ..., + id = NULL, + label = NULL, + layout = NULL, + alignment = NULL, + scale = NULL, + selection_mode = NULL, + selection_appearance = NULL, + disabled = NULL +) { + # Validate layout if provided + if (!is.null(layout)) { + layout <- rlang::arg_match(layout, c("horizontal", "vertical")) + } + + # Validate alignment if provided + if (!is.null(alignment)) { + alignment <- rlang::arg_match(alignment, c("start", "center")) + } + + # Validate scale if provided + if (!is.null(scale)) { + scale <- rlang::arg_match(scale, c("s", "m", "l")) + } + + # Validate selection_mode if provided + if (!is.null(selection_mode)) { + selection_mode <- rlang::arg_match( + selection_mode, + c("none", "single", "single-persist", "multiple") + ) + } + + # Validate selection_appearance if provided + if (!is.null(selection_appearance)) { + selection_appearance <- rlang::arg_match( + selection_appearance, + c("icon", "border") + ) + } + + # Build attributes list + attribs <- compact(list( + id = id, + label = label, + layout = layout, + alignment = alignment, + scale = scale, + `selection-mode` = selection_mode, + `selection-appearance` = selection_appearance, + disabled = disabled + )) + + # Custom binding for tile-group + tile_group_binding <- htmltools::htmlDependency( + name = "calcite-tile-group-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-tile-group.js" + ) + + res <- htmltools::tag( + "calcite-tile-group", + c( + attribs, + rlang::dots_list(...), + list(calcite_dependency(), tile_group_binding) + ) + ) + + class(res) <- c("calcite_component", class(res)) + res +} diff --git a/R/tile.R b/R/tile.R new file mode 100644 index 0000000..6025d31 --- /dev/null +++ b/R/tile.R @@ -0,0 +1,152 @@ +#' Create a Calcite Tile Component +#' +#' Tiles are presentational components useful for presenting consequential +#' information in a compact, consistent format. They can contain supportive +#' icons, a heading, and a description. +#' +#' @param ... Child content for the tile +#' @param id Optional ID for the tile (required for Shiny reactivity) +#' @param heading The component header text +#' @param description A description for the component, which displays below the heading +#' @param icon Specifies an icon to display +#' @param href When provided, the URL for the component (makes tile a link) +#' @param active When TRUE, the component is active (default: FALSE) +#' @param selected When TRUE and parent's selectionMode allows it, component is selected (default: FALSE) +#' @param disabled When TRUE, interaction is prevented and component displays with lower opacity (default: FALSE) +#' @param alignment Specifies alignment of tile's content: "start" or "center" +#' @param scale Specifies size of the component: "s" (small), "m" (medium), or "l" (large) +#' @param icon_flip_rtl When TRUE, icon will be flipped when element direction is RTL (default: FALSE) +#' @param label Accessible name for the component +#' @param content_top Slot for adding non-interactive elements above the component's content +#' @param content_bottom Slot for adding non-interactive elements below the component's content +#' +#' @details +#' ## Best Practices +#' +#' - Tiles are best used to represent one of a limited number of options, actions, or choices +#' - The component is wholly focusable - it should not contain slotted focusable elements +#' - Text should be concise (heading max ~50 chars, description max ~175 chars) +#' - Use sentence case for heading and description +#' - End description with proper punctuation +#' +#' ## Shiny Integration +#' +#' When used in a Shiny app with an `id`, `calcite_tile()` returns a reactive list +#' containing component properties. +#' +#' **Available properties:** +#' - `$active` - Whether the tile is currently active +#' - `$selected` - Whether the tile is selected +#' - `$disabled` - Whether the tile is disabled +#' - `$heading` - The heading text +#' - `$description` - The description text +#' - `$icon` - The icon name +#' - Other component properties +#' +#' @export +#' @return An object of class `calcite_component` +#' @references [Official Documentation](https://developers.arcgis.com/calcite-design-system/components/tile/) +#' @examples +#' # Basic tile with icon and description +#' calcite_tile( +#' icon = "3d-glasses", +#' heading = "Special viewing glasses", +#' description = "Great for eclipses and optical illusions" +#' ) +#' +#' # Tile with content in bottom slot +#' calcite_tile( +#' icon = "rangefinder", +#' heading = "Rangefinder", +#' description = "A time-tested tool for field engineers", +#' content_bottom = calcite_chip("214 in use") +#' ) +#' +#' # Active tile with link +#' calcite_tile( +#' icon = "data", +#' heading = "Data Analysis", +#' href = "https://example.com/data", +#' active = TRUE +#' ) +calcite_tile <- function( + ..., + id = NULL, + heading = NULL, + description = NULL, + icon = NULL, + href = NULL, + active = NULL, + selected = NULL, + disabled = NULL, + alignment = NULL, + scale = NULL, + icon_flip_rtl = NULL, + label = NULL, + content_top = NULL, + content_bottom = NULL +) { + # Validate alignment if provided + if (!is.null(alignment)) { + alignment <- rlang::arg_match(alignment, c("start", "center")) + } + + # Validate scale if provided + if (!is.null(scale)) { + scale <- rlang::arg_match(scale, c("s", "m", "l")) + } + + # Build attributes list + attribs <- compact(list( + id = id, + heading = heading, + description = description, + icon = icon, + href = href, + active = active, + selected = selected, + disabled = disabled, + alignment = alignment, + scale = scale, + `icon-flip-rtl` = icon_flip_rtl, + label = label + )) + + # Handle slot content + slot_content <- list() + + if (!is.null(content_top)) { + slot_content <- c( + slot_content, + list(htmltools::div(slot = "content-top", content_top)) + ) + } + + if (!is.null(content_bottom)) { + slot_content <- c( + slot_content, + list(htmltools::div(slot = "content-bottom", content_bottom)) + ) + } + + # Custom binding for tile + tile_binding <- htmltools::htmlDependency( + name = "calcite-tile-binding", + version = calcite_version(), + src = c(file = system.file("www", package = "calcite")), + script = "calcite-tile.js" + ) + + res <- htmltools::tag( + "calcite-tile", + c( + attribs, + rlang::dots_list(...), + slot_content, + list(calcite_dependency(), tile_binding) + ) + ) + + class(res) <- c("calcite_component", class(res)) + res +} diff --git a/R/utils.R b/R/utils.R index 5c83455..bf472cf 100644 --- a/R/utils.R +++ b/R/utils.R @@ -1,4 +1,4 @@ -CALCITE_VERSION <- "2.7.1" +CALCITE_VERSION <- "3.3.3" calcite_dependency <- function() { htmltools::htmlDependency( name = "calcite", @@ -83,3 +83,15 @@ update_calcite <- function( vals <- rlang::list2(...) session$sendInputMessage(id, vals) } + + +# print.calcite_component <- function(x, ...) { +# if (interactive()) { +# htmltools::browsable(x) +# } +# x +# } + +compact <- function(.x) { + Filter(length, .x) +} diff --git a/dev/calcite-button-test.R b/dev/calcite-button-test.R new file mode 100644 index 0000000..f7c5263 --- /dev/null +++ b/dev/calcite-button-test.R @@ -0,0 +1,72 @@ +library(shiny) +library(calcite) +library(shinyOAuth) +library(arcgisutils) + +# create the shiny AGOL login provider +client <- auth_shiny() + +ui <- calcite_shell( + # Include the shinyOAuth module + use_shinyOAuth(), + uiOutput("navigation") +) + +server <- function(input, output, session) { + auth <- shinyOAuth::oauth_module_server( + "auth", + client, + auto_redirect = FALSE + ) + + # Render entire navigation based on authentication status + output$navigation <- renderUI({ + calcite_navigation( + slot = "header", + calcite_menu( + slot = "content-end", + calcite_menu_item( + text = "Drivers", + `icon-start` = "license" + ), + calcite_menu_item( + text = "Routes", + `icon-start` = "road-sign" + ), + calcite_menu_item( + text = "Forecast", + `icon-start` = "snow" + ) + ), + # Conditionally render user slot + if (auth$authenticated) { + user_info <- auth$token@userinfo + calcite_navigation_user( + slot = "user", + username = user_info$user$username, + `full-name` = user_info$user$fullName, + `user-id` = user_info$user$id + ) + } else { + calcite_button( + id = "login_btn", + slot = "user", + "Login" + ) + } + ) + }) + + # Trigger login when button is clicked + observeEvent(input$login_btn$clicked, { + cat(str(input$login_btn_clicked)) + cat(str(input$login_btn)) + auth$request_login() + }) +} + +runApp( + shinyApp(ui, server), + port = 8100, + launch.browser = FALSE +) diff --git a/dev/list-components.R b/dev/list-components.R new file mode 100644 index 0000000..d391b3a --- /dev/null +++ b/dev/list-components.R @@ -0,0 +1,9 @@ +library(rvest) + +components <- read_html( + "https://developers.arcgis.com/calcite-design-system/components/" +) |> + html_node("div .not-afd-flow-content.card-group") |> + html_children() + +html_text(components) diff --git a/dev/shell-examples.R b/dev/shell-examples.R new file mode 100644 index 0000000..fa4094d --- /dev/null +++ b/dev/shell-examples.R @@ -0,0 +1,285 @@ +library(calcite) +library(shiny) + +# ---- Example 1: Basic calcite_shell with named parameters ---- + +# Much clearer than the old approach of manually specifying slots +basic_shell <- calcite_shell( + header = calcite_navigation( + calcite_navigation_logo(slot = "logo", heading = "My Application") + ), + panel_start = calcite_shell_panel( + position = "start", + calcite_panel(heading = "Sidebar", "Sidebar content here") + ), + "Main content area", + footer = div("© 2024 My Company") +) + +if (interactive()) { + shinyApp( + ui = basic_shell, + server = function(input, output, session) {} + ) +} + + +# ---- Example 3: page_navbar() - Simple navbar layout ---- + +navbar_app <- page_navbar( + title = "Analytics Dashboard", + + nav_actions = list( + calcite_action(icon = "bell", text = "Notifications", indicator = TRUE), + calcite_action(icon = "gear", text = "Settings"), + calcite_action(icon = "user", text = "Profile") + ), + + # Main content + div( + style = "padding: 20px;", + calcite_card( + heading = "Welcome", + "This is a simple dashboard layout with a navigation bar" + ) + ) +) + +if (interactive()) { + shinyApp( + ui = navbar_app, + server = function(input, output, session) {} + ) +} + + +# ---- Example 4: page_sidebar() - Sidebar layout (like bslib::page_sidebar) ---- + +sidebar_app <- page_sidebar( + title = "Data Explorer", + + sidebar = calcite_panel( + heading = "Filters", + + calcite_block( + heading = "Date Range", + collapsible = TRUE, + + calcite_input_date_picker( + label = "Start Date" + ), + calcite_input_date_picker( + label = "End Date" + ) + ), + + calcite_block( + heading = "Categories", + collapsible = TRUE, + + calcite_checkbox(label = "Category A", checked = TRUE), + calcite_checkbox(label = "Category B"), + calcite_checkbox(label = "Category C") + ) + ), + + position = "start", # or "end" for right sidebar + width = "m", + + # Main content + calcite_panel( + heading = "Results", + "Your filtered data appears here" + ) +) + +if (interactive()) { + shinyApp( + ui = sidebar_app, + server = function(input, output, session) {} + ) +} + + +# ---- Example 5: Interactive action bar with Shiny ---- + +interactive_actionbar <- page_actionbar( + title = "Map Viewer", + + actions = calcite_action_bar( + calcite_action( + id = "layers-btn", + text = "Layers", + icon = "layers", + active = TRUE, + `text-enabled` = TRUE + ), + calcite_action( + id = "basemap-btn", + text = "Basemap", + icon = "basemap", + `text-enabled` = TRUE + ), + calcite_action( + id = "legend-btn", + text = "Legend", + icon = "legend", + `text-enabled` = TRUE + ) + ), + + panel_content = calcite_panel( + id = "side-panel", + heading = "Layers", + "Layer controls appear here" + ), + + # Map content + calcite_panel( + heading = "Map", + div( + style = "height: 600px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;", + "Map goes here" + ) + ) +) + +if (interactive()) { + shinyApp( + ui = interactive_actionbar, + + server = function(input, output, session) { + # Update panel heading when actions are clicked + observeEvent(input$`layers-btn_click`, { + update_calcite("side-panel", heading = "Layers") + }) + + observeEvent(input$`basemap-btn_click`, { + update_calcite("side-panel", heading = "Basemap") + }) + + observeEvent(input$`legend-btn_click`, { + update_calcite("side-panel", heading = "Legend") + }) + } + ) +} + + +# ---- Example 6: Full-featured application ---- + +full_app <- page_actionbar( + title = "Project Management", + + header_actions = list( + calcite_action( + slot = "content-end", + icon = "bell", + text = "Notifications", + indicator = TRUE, + id = "notifications" + ), + calcite_action( + slot = "content-end", + icon = "user", + text = "Profile", + id = "profile" + ) + ), + + actions = calcite_action_bar( + calcite_action_group( + calcite_action( + id = "home", + text = "Home", + icon = "home", + active = TRUE, + `text-enabled` = TRUE + ), + calcite_action( + id = "projects", + text = "Projects", + icon = "folder", + `text-enabled` = TRUE + ), + calcite_action( + id = "tasks", + text = "Tasks", + icon = "list-check", + indicator = TRUE, + `text-enabled` = TRUE + ) + ), + calcite_action_group( + slot = "bottom-actions", + calcite_action( + id = "settings", + text = "Settings", + icon = "gear", + `text-enabled` = TRUE + ), + calcite_action( + id = "help", + text = "Help", + icon = "question", + `text-enabled` = TRUE + ) + ) + ), + + panel_content = calcite_panel( + id = "main-panel", + heading = "Home", + + calcite_block( + heading = "Quick Stats", + collapsible = TRUE, + open = TRUE, + + "Dashboard content here..." + ) + ), + + # Main content area + calcite_panel( + heading = "Overview", + div( + style = "padding: 20px;", + h3("Welcome to Project Management"), + p("Select an action from the sidebar to get started.") + ) + ), + + # Footer + footer = div( + style = "padding: 10px; text-align: center; background: var(--calcite-ui-foreground-1);", + "© 2024 Your Company | ", + a(href = "#", "Privacy Policy"), + " | ", + a(href = "#", "Terms of Service") + ) +) + +if (interactive()) { + shinyApp( + ui = full_app, + server = function(input, output, session) { + # Handle navigation between different sections + observeEvent(input$home_click, { + update_calcite("main-panel", heading = "Home") + }) + + observeEvent(input$projects_click, { + update_calcite("main-panel", heading = "Projects") + }) + + observeEvent(input$tasks_click, { + update_calcite("main-panel", heading = "Tasks") + }) + + observeEvent(input$settings_click, { + update_calcite("main-panel", heading = "Settings") + }) + } + ) +} diff --git a/dev/shell-guide.md b/dev/shell-guide.md new file mode 100644 index 0000000..a07f813 --- /dev/null +++ b/dev/shell-guide.md @@ -0,0 +1,228 @@ +# Calcite Shell Layouts Guide + +This guide demonstrates the improved `calcite_shell()` API and new layout helper functions that make it easier to create structured Shiny applications with Calcite Design System components. + +## Overview + +The Calcite Shell is a foundational layout component that structures your application into distinct regions: + +- **header**: Top navigation bar +- **panel-start/panel-end**: Side panels (left/right) +- **panel-top/panel-bottom**: Top/bottom panels +- **Default content**: Main application area +- **footer**: Bottom information/links +- **Overlay slots**: modals, dialogs, alerts, sheets + +## Improved `calcite_shell()` Function + +The enhanced `calcite_shell()` function provides named parameters for each slot, making it much clearer and easier to use than manually specifying slot attributes. + +### Before (manual slots): + +```r +calcite_shell( + div(slot = "header", + calcite_navigation(...) + ), + div(slot = "panel-start", + calcite_shell_panel(...) + ), + "Main content" +) +``` + +### After (named parameters): + +```r +calcite_shell( + header = calcite_navigation(...), + panel_start = calcite_shell_panel(...), + "Main content" +) +``` + +## Layout Helper Functions + +Three new convenience functions create common layout patterns, similar to `bslib::page_sidebar()`: + +### 1. `page_actionbar()` - Action Bar Layout + +Creates a shell with a navigation header and a collapsible action bar panel. Ideal for map-based applications or tools with multiple layers/options. + +**Key Features:** +- Automatic action bar setup +- Collapsible side panel +- Support for header actions +- Configurable panel position (left/right) + +**Example:** + +```r +page_actionbar( + title = "Wildlife Areas", + + actions = calcite_action_bar( + calcite_action(text = "Layers", icon = "layers", active = TRUE), + calcite_action(text = "Basemap", icon = "basemap"), + calcite_action(text = "Legend", icon = "legend") + ), + + panel_content = calcite_panel( + heading = "Layers", + "Layer controls here" + ), + + "Map content here" +) +``` + +### 2. `page_navbar()` - Navigation Bar Layout + +Creates a simple layout with a navigation header and main content area. Ideal for dashboard-style applications. + +**Key Features:** +- Clean navigation bar +- Support for nav actions (settings, profile, etc.) +- Custom logo support +- Minimal setup for simple layouts + +**Example:** + +```r +page_navbar( + title = "Analytics Dashboard", + + nav_actions = list( + calcite_action(icon = "bell", text = "Notifications"), + calcite_action(icon = "gear", text = "Settings"), + calcite_action(icon = "user", text = "Profile") + ), + + "Dashboard content here" +) +``` + +### 3. `page_sidebar()` - Sidebar Layout + +Similar to `bslib::page_sidebar()`, creates a layout with a sidebar panel and main content area. + +**Key Features:** +- Configurable sidebar position (left/right) +- Adjustable width (s, m, l) +- Optional collapsibility +- Familiar API for bslib users + +**Example:** + +```r +page_sidebar( + title = "Data Explorer", + + sidebar = calcite_panel( + heading = "Filters", + calcite_input_date_picker(label = "Date"), + calcite_checkbox(label = "Active only") + ), + + position = "start", # left side + width = "m", + + "Main content here" +) +``` + +## Parameters Reference + +### `page_actionbar()` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `...` | Main content area | - | +| `title` | Application title | `NULL` | +| `header_actions` | Actions for navigation bar | `NULL` | +| `actions` | Action bar content | `NULL` | +| `panel_content` | Side panel content | `NULL` | +| `panel_position` | Panel position: "start" or "end" | `"start"` | +| `panel_width` | Panel width: "s", "m", "l" | `"m"` | +| `footer` | Footer content | `NULL` | + +### `page_navbar()` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `...` | Main content area | - | +| `title` | Application title | `NULL` | +| `logo` | Custom logo component | `NULL` | +| `nav_actions` | Navigation bar actions | `NULL` | +| `footer` | Footer content | `NULL` | + +### `page_sidebar()` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `...` | Main content area | - | +| `sidebar` | Sidebar content | `NULL` | +| `title` | Application title | `NULL` | +| `position` | Sidebar position: "start" or "end" | `"start"` | +| `width` | Sidebar width: "s", "m", "l" | `"m"` | +| `collapsible` | Allow collapse | `TRUE` | +| `footer` | Footer content | `NULL` | + +## Comparison with bslib + +If you're familiar with `bslib::page_sidebar()`, the calcite equivalent offers similar functionality with Calcite Design System styling: + +### bslib +```r +page_sidebar( + sidebar = sidebar("Filters"), + "Main content" +) +``` + +### calcite +```r +page_sidebar( + sidebar = calcite_panel(heading = "Filters"), + "Main content" +) +``` + +## Use Cases + +### Map Applications +Use `page_actionbar()` for map-based apps with layer controls, drawing tools, and settings. + +### Dashboards +Use `page_navbar()` for analytics dashboards with top navigation and minimal chrome. + +### Data Explorers +Use `page_sidebar()` for data exploration tools with filters and configuration options. + +### Custom Layouts +Use `calcite_shell()` directly when you need full control over all shell slots and positions. + +## Interactive Examples + +See `dev/shell-examples.R` for complete working examples of: + +1. Basic shell usage +2. Action bar layouts with CodePen example recreation +3. Simple navbar applications +4. Sidebar layouts +5. Interactive Shiny applications +6. Full-featured applications with navigation + +## Tips + +1. **Start Simple**: Use the layout helpers (`page_*` functions) for common patterns +2. **Slot Management**: The functions handle slot attributes automatically +3. **Shiny Integration**: All components work seamlessly with Shiny's reactivity +4. **Responsive Design**: Calcite components are mobile-friendly by default +5. **Custom Components**: Drop down to `calcite_shell()` when you need custom layouts + +## Next Steps + +- Explore the examples in `dev/shell-examples.R` +- Check the [official Calcite documentation](https://developers.arcgis.com/calcite-design-system/components/shell/) +- Build your own layouts using these functions as templates diff --git a/inst/examples/calcite-action-button.R b/inst/examples/calcite-action-button.R new file mode 100644 index 0000000..c87f91d --- /dev/null +++ b/inst/examples/calcite-action-button.R @@ -0,0 +1,26 @@ +library(shiny) +library(shinyjs) +devtools::load_all() + +ui <- calcite_shell( + shinyjs::useShinyjs(), + calcite_action( + id = "test_action", + text = "Click me", + icon = "check", + text_enabled = TRUE + ), + verbatimTextOutput("output") +) + +server <- function(input, output, session) { + observeEvent(input$test_action, { + shinyjs::logjs("hi") + }) + + output$output <- renderPrint({ + input$test_action + }) +} + +shinyApp(ui, server) diff --git a/inst/examples/calcite-block.R b/inst/examples/calcite-block.R new file mode 100644 index 0000000..2b758e7 --- /dev/null +++ b/inst/examples/calcite-block.R @@ -0,0 +1,87 @@ +library(shiny) +devtools::load_all() + +ui <- calcite_shell( + calcite_shell_panel( + slot = "panel-end", + width = "l", + + calcite_panel( + heading = "Block example", + + calcite_block( + id = "effects_block", + heading = "Layer effects", + description = "Adjust blur, highlight, and more", + collapsible = TRUE, + expanded = TRUE, + icon_start = "effects", + + calcite_label( + "Effect type", + calcite_segmented_control( + id = "effect_type", + width = "full", + calcite_segmented_control_item(value = "blur", label = "Blur"), + calcite_segmented_control_item( + value = "highlight", + label = "Highlight", + checked = TRUE + ), + calcite_segmented_control_item(value = "party", label = "Party mode") + ) + ), + + calcite_label( + "Effect intensity", + calcite_slider( + id = "intensity", + value = 50, + min = 0, + max = 100, + step = 5, + label_handles = TRUE + ) + ) + ), + + calcite_block( + id = "symbology_block", + heading = "Symbology", + description = "Select type, color, and transparency", + collapsible = TRUE, + expanded = FALSE, + icon_start = "map-pin", + + calcite_notice( + open = TRUE, + div(slot = "message", "The viewers are going to love this") + ) + ) + ) + ), + + calcite_panel( + heading = "Content", + verbatimTextOutput("output") + ) +) + +server <- function(input, output, session) { + output$output <- renderPrint({ + list( + effects_block = list( + expanded = input$effects_block$expanded, + heading = input$effects_block$heading + ), + symbology_block = list( + expanded = input$symbology_block$expanded, + heading = input$symbology_block$heading + ), + effect_type = input$effect_type$value, + intensity = input$intensity$value + ) + }) +} + +shinyApp(ui, server) diff --git a/inst/examples/calcite-date-picker.R b/inst/examples/calcite-date-picker.R new file mode 100644 index 0000000..3b51c10 --- /dev/null +++ b/inst/examples/calcite-date-picker.R @@ -0,0 +1,70 @@ +library(shiny) +devtools::load_all() + +ui <- calcite_shell( + calcite_shell_panel( + slot = "panel-start", + position = "start", + width = "l", + + calcite_panel( + heading = "Date Picker Examples", + + tags$h3("Basic Date Picker"), + calcite_date_picker( + id = "basic_date" + ), + + tags$br(), + tags$h3("Date Picker with Initial Value"), + calcite_date_picker( + id = "preset_date", + value = "2024-12-25" + ), + + tags$br(), + tags$h3("Range Date Picker (Horizontal)"), + calcite_date_picker( + id = "date_range", + range = TRUE, + layout = "horizontal", + value = c("2024-01-15", "2024-01-21") + ) + ) + ), + + calcite_panel( + heading = "Output", + verbatimTextOutput("date_output") + ) +) + +server <- function(input, output, session) { + output$date_output <- renderPrint({ + list( + basic_date = input$basic_date$value, + preset_date = input$preset_date$value, + date_range = input$date_range$value + ) + }) + + # Log date changes + observeEvent(input$basic_date$value, { + if (length(input$basic_date$value) > 0) { + message("Basic date selected: ", input$basic_date$value[1]) + } + }) + + observeEvent(input$date_range$value, { + if (length(input$date_range$value) == 2) { + message( + "Range selected: ", + input$date_range$value[1], + " to ", + input$date_range$value[2] + ) + } + }) +} + +shinyApp(ui, server) diff --git a/inst/examples/calcite-notice.R b/inst/examples/calcite-notice.R new file mode 100644 index 0000000..70dfc52 --- /dev/null +++ b/inst/examples/calcite-notice.R @@ -0,0 +1,139 @@ +library(shiny) +devtools::load_all() + +ui <- calcite_shell( + calcite_panel( + heading = "Notice Demo", + + # Buttons to trigger different notices + calcite_button( + id = "show_success", + "Show Success", + kind = "brand" + ), + calcite_button( + id = "show_warning", + "Show Warning" + ), + calcite_button( + id = "show_info", + "Show Info" + ), + calcite_button( + id = "show_danger", + "Show Danger", + kind = "danger" + ), + + # Success notice + calcite_notice( + id = "success_notice", + open = FALSE, + closable = TRUE, + kind = "success", + icon = TRUE, + div(slot = "title", "Success!"), + div(slot = "message", "Your changes have been saved successfully") + ), + + # Warning notice + calcite_notice( + id = "warning_notice", + open = FALSE, + closable = TRUE, + kind = "warning", + icon = "exclamation-mark-triangle", + div(slot = "title", "Warning"), + div(slot = "message", "This action cannot be undone") + ), + + # Info notice with link + calcite_notice( + id = "info_notice", + open = FALSE, + closable = TRUE, + kind = "info", + icon = "layers-reference", + div(slot = "title", "Try this trick next time"), + div( + slot = "message", + "Level up your skills - Select and take action on multiple layers at once" + ), + calcite_link(slot = "link", title = "Read more", "Learn more") + ), + + # Danger notice + calcite_notice( + id = "danger_notice", + open = FALSE, + closable = TRUE, + kind = "danger", + icon = TRUE, + div(slot = "title", "Error"), + div(slot = "message", "There are unresolved errors in the form") + ), + + tags$br(), + + verbatimTextOutput("notice_status") + ) +) + +server <- function(input, output, session) { + # Show success notice + observeEvent(input$show_success$clicked, { + update_calcite("success_notice", open = input$show_success$clicked) + }) + + # Show warning notice + observeEvent(input$show_warning$clicked, { + update_calcite("warning_notice", open = input$show_warning$clicked) + }) + + # Show info notice + observeEvent(input$show_info$clicked, { + update_calcite("info_notice", open = input$show_info$clicked) + }) + + # Show danger notice + observeEvent(input$show_danger$clicked, { + update_calcite("danger_notice", open = input$show_danger$clicked) + }) + + # Track notice states + output$notice_status <- renderPrint({ + list( + success = list( + open = input$success_notice$open, + kind = input$success_notice$kind + ), + warning = list( + open = input$warning_notice$open, + kind = input$warning_notice$kind + ), + info = list( + open = input$info_notice$open, + kind = input$info_notice$kind + ), + danger = list( + open = input$danger_notice$open, + kind = input$danger_notice$kind + ) + ) + }) + + # Log when user dismisses a notice + observeEvent(input$success_notice$open, { + if (isFALSE(input$success_notice$open)) { + message("User dismissed success notice") + } + }) + + observeEvent(input$warning_notice$open, { + if (isFALSE(input$warning_notice$open)) { + message("User dismissed warning notice") + } + }) +} + +shinyApp(ui, server) diff --git a/inst/examples/calcite-panel.R b/inst/examples/calcite-panel.R new file mode 100644 index 0000000..a05bdc3 --- /dev/null +++ b/inst/examples/calcite-panel.R @@ -0,0 +1,79 @@ +library(shiny) +library(calcite) + +ui <- calcite_shell( + calcite_shell_panel( + slot = "panel-start", + width = "l", + calcite_panel( + closable = TRUE, + id = "map_options_panel", + heading = "Map Options", + header_actions_start = calcite_action( + icon = "question", + text = "Favorite" + ), + header_actions_end = calcite_action( + icon = "save", + text = "Save" + ), + header_menu_actions = tagList( + calcite_action( + icon = "reset", + text = "Reset", + text_enabled = TRUE + ), + calcite_action( + icon = "pencil", + text = "Rename", + text_enabled = TRUE + ) + ), + footer = tagList( + calcite_button( + width = "half", + appearance = "outline", + "Cancel" + ), + calcite_button( + width = "half", + "Next" + ) + ), + fab = calcite_fab(slot = "fab"), + # Panel content + calcite_block( + collapsible = TRUE, + heading = "Layer effects", + description = "Adjust blur, highlight, and more", + icon_start = "effects", + calcite_notice( + open = TRUE, + div(slot = "message", "Use layer effects sparingly, for emphasis") + ) + ), + calcite_block( + collapsible = TRUE, + heading = "Symbology", + description = "Select type, color, and transparency", + icon_start = "map-pin", + calcite_notice( + open = TRUE, + div(slot = "message", "The viewers are going to love this") + ) + ) + ) + ), + calcite_panel( + heading = "Content", + verbatimTextOutput("panel_state") + ) +) + +server <- function(input, output, session) { + output$panel_state <- renderPrint({ + input$map_options_panel + }) +} + +shinyApp(ui, server) diff --git a/inst/examples/calcite-segmented-control.R b/inst/examples/calcite-segmented-control.R new file mode 100644 index 0000000..0ad3e73 --- /dev/null +++ b/inst/examples/calcite-segmented-control.R @@ -0,0 +1,62 @@ +library(shiny) +devtools::load_all() + +ui <- calcite_shell( + calcite_card( + heading = "Segmented Control Example", + + calcite_segmented_control( + label_text = "Effect type", + id = "effect_type", + width = "full", + calcite_segmented_control_item( + value = "blur", + label = "Blur", + icon_start = "effects" + ), + calcite_segmented_control_item( + value = "highlight", + label = "Highlight", + icon_start = "highlighter", + checked = TRUE + ), + calcite_segmented_control_item( + value = "party", + label = "Party mode", + icon_start = "smile" + ) + ), + br(), + calcite_label( + "Effect intensity", + calcite_slider( + id = "intensity", + value = 50, + min = 0, + max = 100, + step = 5, + label_handles = TRUE, + ) + ), + + verbatimTextOutput("output") + ) +) + +server <- function(input, output, session) { + output$output <- renderPrint({ + list( + selected_effect = input$effect_type$value, + intensity = input$intensity$value, + message = paste0( + "Applying '", + input$effect_type$value, + "' effect at ", + input$intensity$value, + "% intensity" + ) + ) + }) +} + +shinyApp(ui, server) diff --git a/inst/examples/calcite-slider.R b/inst/examples/calcite-slider.R new file mode 100644 index 0000000..c862329 --- /dev/null +++ b/inst/examples/calcite-slider.R @@ -0,0 +1,64 @@ +library(shiny) +devtools::load_all() + +hist_data <- cbind(seq(0, 100, by = 20), c(0, 12, 35, 65, 25, 0)) + +ui <- calcite_shell( + calcite_card( + heading = "Slider Example", + + calcite_slider( + id = "my_slider", + value = 50, + min = 0, + max = 100, + step = 5, + ticks = 10, + label_handles = TRUE, + label_text = "Choose a value" + ), + + calcite_button( + id = "toggle_histogram", + "Toggle Histogram", + icon_start = "graph-bar" + ), + + verbatimTextOutput("output") + ) +) + +server <- function(input, output, session) { + # Track histogram state + show_histogram <- reactiveVal(FALSE) + + # Toggle histogram on button click + observeEvent(input$toggle_histogram$clicked, { + show_histogram(!show_histogram()) + + if (show_histogram()) { + # Show histogram + update_calcite( + "my_slider", + histogram = hist_data, + hasHistogram = TRUE + ) + } else { + update_calcite( + "my_slider", + histogram = NULL, + hasHistogram = FALSE + ) + } + }) + + observeEvent(input$my_slider, { + print(input$my_slider) + }) + + output$output <- renderPrint({ + input$my_slider + }) +} + +shinyApp(ui, server) diff --git a/inst/examples/calcite-tile-group.R b/inst/examples/calcite-tile-group.R new file mode 100644 index 0000000..dbb118c --- /dev/null +++ b/inst/examples/calcite-tile-group.R @@ -0,0 +1,63 @@ +library(shiny) +devtools::load_all() + +ui <- calcite_shell( + calcite_panel( + heading = "Tile Group Example", + + calcite_tile_group( + id = "role_selector", + label = "Select roles", + selection_mode = "multiple", + selection_appearance = "border", + + calcite_tile( + id = "construction_worker", + icon = "wrench", + heading = "Construction Worker", + description = "This role involves managing construction projects, tracking progress, and coordinating with teams on-site." + ), + + calcite_tile( + id = "civil_engineer", + icon = "rangefinder", + heading = "Civil Engineer", + description = "This role focuses on designing infrastructure projects, analyzing data, and ensuring regulatory compliance." + ), + + calcite_tile( + id = "project_supervisor", + icon = "knowledge-graph-dashboard", + heading = "Project Supervisor", + description = "This role oversees multiple construction projects, manages budgets, and ensures quality control." + ), + + calcite_tile( + id = "operations_manager", + icon = "system-management", + heading = "Operations Manager", + description = "This role involves strategic planning, resource allocation, and optimizing processes for efficiency." + ) + ), + + tags$br(), + verbatimTextOutput("selection_output") + ) +) + +server <- function(input, output, session) { + output$selection_output <- renderPrint({ + list( + selectedItems = input$role_selector$selectedItems, + selectionMode = input$role_selector$selectionMode, + selectionAppearance = input$role_selector$selectionAppearance + ) + }) + + # Log selection changes + observeEvent(input$role_selector$selectedItems, { + message("Selected tiles: ", paste(input$role_selector$selectedItems, collapse = ", ")) + }) +} + +shinyApp(ui, server) diff --git a/inst/examples/page-actionbar.R b/inst/examples/page-actionbar.R new file mode 100644 index 0000000..caa2191 --- /dev/null +++ b/inst/examples/page-actionbar.R @@ -0,0 +1,104 @@ +library(shiny) +devtools::load_all() + +actionbar_app <- page_actionbar( + title = "Wildlife Areas", + + header_actions = calcite_action( + slot = "content-end", + icon = "map-pin", + scale = "l", + text = "Choose location" + ), + + actions = calcite_action_bar( + calcite_action_group( + calcite_action(text = "Add", icon = "plus", text_enabled = TRUE), + calcite_action( + text = "Layers", + icon = "layers", + active = TRUE, + indicator = TRUE, + text_enabled = TRUE, + id = "layers-action" + ) + ), + calcite_action_group( + calcite_action(text = "Undo", icon = "undo", text_enabled = TRUE), + calcite_action( + text = "Redo", + icon = "redo", + indicator = TRUE, + text_enabled = TRUE + ), + calcite_action( + text = "Save", + icon = "save", + disabled = TRUE, + text_enabled = TRUE + ) + ), + calcite_action_group( + slot = "bottom-actions", + calcite_action(text = "Tips", icon = "question", text_enabled = TRUE), + calcite_action( + text = "Settings", + icon = "gear", + indicator = TRUE, + text_enabled = TRUE + ) + ) + ), + + panel_content = calcite_panel( + heading = "Layers", + id = "panel-start", + + calcite_block( + collapsible = TRUE, + heading = "Layer effects", + description = "Adjust blur, highlight, and more", + icon_start = "effects", + + calcite_label( + "Effect type", + calcite_segmented_control( + width = "full", + calcite_segmented_control_item(value = "blur", label = "Blur"), + calcite_segmented_control_item( + value = "highlight", + label = "Highlight", + checked = TRUE + ), + calcite_segmented_control_item(value = "party", label = "Party mode") + ) + ), + calcite_label( + "Effect intensity", + calcite_slider() + ) + ), + + calcite_block( + collapsible = TRUE, + heading = "Symbology", + description = "Select type, color, and transparency", + icon_start = "map-pin", + + calcite_notice( + open = TRUE, + div(slot = "message", "The viewers are going to love this") + ) + ) + ), + + # Main content + calcite_panel(heading = "Content") +) + +if (interactive()) { + shinyApp( + ui = actionbar_app, + server = function(input, output, session) {} + ) +} diff --git a/inst/www/calcite-action.js b/inst/www/calcite-action.js new file mode 100644 index 0000000..10d23cb --- /dev/null +++ b/inst/www/calcite-action.js @@ -0,0 +1,91 @@ +// Custom Shiny input binding for calcite-action +(function() { + const binding = new Shiny.InputBinding(); + + $.extend(binding, { + find: function(scope) { + return $(scope).find("calcite-action"); + }, + + getId: function(el) { + return el.id; + }, + + getValue: function(el) { + // Initialize click state if needed + if (el._clickState === undefined) { + el._clickState = false; + } + + return { + active: el.active, + alignment: el.alignment, + appearance: el.appearance, + compact: el.compact, + disabled: el.disabled, + icon: el.icon, + indicator: el.indicator, + label: el.label, + loading: el.loading, + scale: el.scale, + text: el.text, + textEnabled: el.textEnabled, + clicked: el._clickState + }; + }, + + setValue: function(el, data) { + Object.entries(data).forEach(([key, value]) => { + el[key] = value; + }); + $(el).trigger("calciteActionInputBinding:updated"); + }, + + subscribe: function(el, callback) { + // Listen for click events + $(el).on("click.calciteActionInputBinding", function() { + // Toggle click state + el._clickState = !el._clickState; + + const currentValue = binding.getValue(el); + + // Send to Shiny with priority event + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for update events (from server) + $(el).on("calciteActionInputBinding:updated", function() { + const currentValue = binding.getValue(el); + + Shiny.setInputValue(el.id, currentValue); + + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(false); + }); + }, + + unsubscribe: function(el) { + $(el).off(".calciteActionInputBinding"); + }, + + receiveMessage: function(el, data) { + this.setValue(el, data); + }, + + getState: function(el) { + return this.getValue(el); + } + }); + + Shiny.inputBindings.register(binding, "calcite.calciteAction"); +})(); diff --git a/inst/www/calcite-bindings.js b/inst/www/calcite-bindings.js index 0e0cbdf..224d928 100644 --- a/inst/www/calcite-bindings.js +++ b/inst/www/calcite-bindings.js @@ -47,7 +47,7 @@ function createCalciteInputBinding(componentNameCamel, componentNameKebab, prope // Toggle the click state and add it to the value el._clickState = !el._clickState; currentValue.clicked = el._clickState; - Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + Shiny.setInputValue(el.id, currentValue, { priority: "event" }); } else { Shiny.setInputValue(el.id, currentValue); } @@ -109,16 +109,16 @@ createCalciteInputBinding("calciteActionBar", "calcite-action-bar", ["actionsEnd createCalciteInputBinding("calciteActionGroup", "calcite-action-group", ["columns", "expanded", "label", "layout", "menuFlipPlacements", "menuOpen", "menuPlacement", "messageOverrides", "overlayPositioning", "scale"], []) // Component: calcite-action-menu -createCalciteInputBinding("calciteActionMenu", "calcite-action-menu", ["appearance", "expanded", "flipPlacements", "label (required)", "open", "overlayPositioning", "placement", "scale"], ["calciteActionMenuOpen"]) +createCalciteInputBinding("calciteActionMenu", "calcite-action-menu", ["appearance", "expanded", "flipPlacements", "label", "open", "overlayPositioning", "placement", "scale"], ["calciteActionMenuOpen"]) // Component: calcite-action-pad createCalciteInputBinding("calciteActionPad", "calcite-action-pad", ["actionsEndGroupLabel", "expandDisabled", "expanded", "layout", "messageOverrides", "overlayPositioning", "position", "scale"], ["calciteActionPadToggle"]) // Component: calcite-action -createCalciteInputBinding("calciteAction", "calcite-action", ["active", "alignment", "appearance", "compact", "disabled", "icon", "iconFlipRtl", "indicator", "label", "loading", "messageOverrides", "scale", "text (required)", "textEnabled"], []) +// createCalciteInputBinding("calciteAction", "calcite-action", ["active", "alignment", "appearance", "compact", "disabled", "icon", "iconFlipRtl", "indicator", "label", "loading", "messageOverrides", "scale", "text", "textEnabled"], []) // Component: calcite-alert -createCalciteInputBinding("calciteAlert", "calcite-alert", ["autoClose", "autoCloseDuration", "icon", "iconFlipRtl", "kind", "label (required)", "messageOverrides", "numberingSystem", "open", "placement", "queue", "scale"], ["calciteAlertBeforeClose", "calciteAlertBeforeOpen", "calciteAlertClose", "calciteAlertOpen"]) +createCalciteInputBinding("calciteAlert", "calcite-alert", ["autoClose", "autoCloseDuration", "icon", "iconFlipRtl", "kind", "label", "messageOverrides", "numberingSystem", "open", "placement", "queue", "scale"], ["calciteAlertBeforeClose", "calciteAlertBeforeOpen", "calciteAlertClose", "calciteAlertOpen"]) // Component: calcite-autocomplete-item-group createCalciteInputBinding("calciteAutocompleteItemGroup", "calcite-autocomplete-item-group", [], []) @@ -135,32 +135,29 @@ createCalciteInputBinding("calciteAvatar", "calcite-avatar", ["fullName", "label // Component: calcite-block-section createCalciteInputBinding("calciteBlockSection", "calcite-block-section", ["iconEnd", "iconFlipRtl", "iconStart", "messageOverrides", "open", "status", "text", "toggleDisplay"], ["calciteBlockSectionToggle"]) -// Component: calcite-block -createCalciteInputBinding("calciteBlock", "calcite-block", ["collapsible", "description", "disabled", "dragHandle", "heading (required)", "headingLevel", "iconEnd", "iconFlipRtl", "iconStart", "loading", "menuFlipPlacements", "menuPlacement", "messageOverrides", "open", "overlayPositioning", "status"], ["calciteBlockBeforeClose", "calciteBlockBeforeOpen", "calciteBlockClose", "calciteBlockOpen", "calciteBlockToggle"]) - // Component: calcite-button createCalciteInputBinding("calciteButton", "calcite-button", ["alignment", "appearance", "disabled", "download", "form", "href", "iconEnd", "iconFlipRtl", "iconStart", "kind", "label", "loading", "messageOverrides", "name", "rel", "round", "scale", "splitChild", "target", "type", "width"], ["click"]) // Component: calcite-card-group -createCalciteInputBinding("calciteCardGroup", "calcite-card-group", ["disabled", "label (required)", "selectedItems", "selectionMode"], ["calciteCardGroupSelect"]) +createCalciteInputBinding("calciteCardGroup", "calcite-card-group", ["disabled", "label", "selectedItems", "selectionMode"], ["calciteCardGroupSelect"]) // Component: calcite-card createCalciteInputBinding("calciteCard", "calcite-card", ["disabled", "label", "loading", "messageOverrides", "selectable", "selected", "thumbnailPosition"], ["calciteCardSelect"]) // Component: calcite-carousel-item -createCalciteInputBinding("calciteCarouselItem", "calcite-carousel-item", ["label (required)", "selected"], []) +createCalciteInputBinding("calciteCarouselItem", "calcite-carousel-item", ["label", "selected"], []) // Component: calcite-carousel -createCalciteInputBinding("calciteCarousel", "calcite-carousel", ["arrowType", "autoplay", "autoplayDuration", "controlOverlay", "disabled", "label (required)", "messageOverrides", "selectedItem"], ["calciteCarouselChange", "calciteCarouselPause", "calciteCarouselPlay", "calciteCarouselResume", "calciteCarouselStop"]) +createCalciteInputBinding("calciteCarousel", "calcite-carousel", ["arrowType", "autoplay", "autoplayDuration", "controlOverlay", "disabled", "label", "messageOverrides", "selectedItem"], ["calciteCarouselChange", "calciteCarouselPause", "calciteCarouselPlay", "calciteCarouselResume", "calciteCarouselStop"]) // Component: calcite-checkbox createCalciteInputBinding("calciteCheckbox", "calcite-checkbox", ["checked", "disabled", "form", "guid", "indeterminate", "label", "name", "required", "scale", "status", "validity", "value"], ["calciteCheckboxChange"]) // Component: calcite-chip-group -createCalciteInputBinding("calciteChipGroup", "calcite-chip-group", ["disabled", "label (required)", "scale", "selectedItems", "selectionMode"], ["calciteChipGroupSelect"]) +createCalciteInputBinding("calciteChipGroup", "calcite-chip-group", ["disabled", "label", "scale", "selectedItems", "selectionMode"], ["calciteChipGroupSelect"]) // Component: calcite-chip -createCalciteInputBinding("calciteChip", "calcite-chip", ["appearance", "closable", "closed", "disabled", "icon", "iconFlipRtl", "kind", "label", "messageOverrides", "scale", "selected", "value (required)"], ["calciteChipClose", "calciteChipSelect"]) +createCalciteInputBinding("calciteChip", "calcite-chip", ["appearance", "closable", "closed", "disabled", "icon", "iconFlipRtl", "kind", "label", "messageOverrides", "scale", "selected", "value"], ["calciteChipClose", "calciteChipSelect"]) // Component: calcite-color-picker-hex-input createCalciteInputBinding("calciteColorPickerHexInput", "calcite-color-picker-hex-input", ["allowEmpty", "alphaChannel", "hexLabel", "numberingSystem", "scale", "value"], ["calciteColorPickerHexInputChange"]) @@ -172,16 +169,16 @@ createCalciteInputBinding("calciteColorPickerSwatch", "calcite-color-picker-swat createCalciteInputBinding("calciteColorPicker", "calcite-color-picker", ["allowEmpty", "alphaChannel", "channelsDisabled", "clearable", "disabled", "format", "hexDisabled", "hideChannels", "hideHex", "hideSaved", "messageOverrides", "numberingSystem", "savedDisabled", "scale", "storageId", "value"], ["calciteColorPickerChange", "calciteColorPickerInput"]) // Component: calcite-combobox-item-group -createCalciteInputBinding("calciteComboboxItemGroup", "calcite-combobox-item-group", ["ancestors", "label (required)"], []) +createCalciteInputBinding("calciteComboboxItemGroup", "calcite-combobox-item-group", ["ancestors", "label"], []) // Component: calcite-combobox-item -createCalciteInputBinding("calciteComboboxItem", "calcite-combobox-item", ["active", "ancestors", "description", "disabled", "filterDisabled", "guid", "heading", "icon", "iconFlipRtl", "label", "metadata", "selected", "shortHeading", "textLabel (required)", "value (required)"], ["calciteComboboxItemChange"]) +createCalciteInputBinding("calciteComboboxItem", "calcite-combobox-item", ["active", "ancestors", "description", "disabled", "filterDisabled", "guid", "heading", "icon", "iconFlipRtl", "label", "metadata", "selected", "shortHeading", "textLabel", "value"], ["calciteComboboxItemChange"]) // Component: calcite-combobox -createCalciteInputBinding("calciteCombobox", "calcite-combobox", ["allowCustomValues", "clearDisabled", "disabled", "filterText", "filteredItems", "flipPlacements", "form", "label (required)", "maxItems", "messageOverrides", "name", "open", "overlayPositioning", "placeholder", "placeholderIcon", "placeholderIconFlipRtl", "readOnly", "required", "scale", "selectedItems", "selectionDisplay", "selectionMode", "status", "validationIcon", "validationMessage", "validity", "value"], ["calciteComboboxBeforeClose", "calciteComboboxBeforeOpen", "calciteComboboxChange", "calciteComboboxChipClose", "calciteComboboxClose", "calciteComboboxFilterChange", "calciteComboboxOpen"]) +createCalciteInputBinding("calciteCombobox", "calcite-combobox", ["allowCustomValues", "clearDisabled", "disabled", "filterText", "filteredItems", "flipPlacements", "form", "label", "maxItems", "messageOverrides", "name", "open", "overlayPositioning", "placeholder", "placeholderIcon", "placeholderIconFlipRtl", "readOnly", "required", "scale", "selectedItems", "selectionDisplay", "selectionMode", "status", "validationIcon", "validationMessage", "validity", "value"], ["calciteComboboxBeforeClose", "calciteComboboxBeforeOpen", "calciteComboboxChange", "calciteComboboxChipClose", "calciteComboboxClose", "calciteComboboxFilterChange", "calciteComboboxOpen"]) // Component: calcite-date-picker-day -createCalciteInputBinding("calciteDatePickerDay", "calcite-date-picker-day", ["active", "currentMonth", "day (required)", "disabled", "endOfRange", "highlighted", "range", "rangeHover", "scale", "selected", "startOfRange", "value"], ["calciteInternalDaySelect"]) +createCalciteInputBinding("calciteDatePickerDay", "calcite-date-picker-day", ["active", "currentMonth", "day", "disabled", "endOfRange", "highlighted", "range", "rangeHover", "scale", "selected", "startOfRange", "value"], ["calciteInternalDaySelect"]) // Component: calcite-date-picker-month-header createCalciteInputBinding("calciteDatePickerMonthHeader", "calcite-date-picker-month-header", ["activeDate", "headingLevel", "localeData", "max", "min", "monthStyle", "scale", "selectedDate"], []) @@ -189,8 +186,6 @@ createCalciteInputBinding("calciteDatePickerMonthHeader", "calcite-date-picker-m // Component: calcite-date-picker-month createCalciteInputBinding("calciteDatePickerMonth", "calcite-date-picker-month", ["activeDate", "endDate", "headingLevel", "hoverRange", "max", "min", "monthStyle", "range", "scale", "selectedDate", "startDate"], []) -// Component: calcite-date-picker -createCalciteInputBinding("calciteDatePicker", "calcite-date-picker", ["activeDate", "activeRange", "headingLevel", "layout", "max", "maxAsDate", "messageOverrides", "min", "minAsDate", "monthStyle", "numberingSystem", "proximitySelectionDisabled", "range", "scale", "value", "valueAsDate"], ["calciteDatePickerChange", "calciteDatePickerRangeChange"]) // Component: calcite-dialog createCalciteInputBinding("calciteDialog", "calcite-dialog", ["beforeClose", "closeDisabled", "description", "dragEnabled", "escapeDisabled", "heading", "headingLevel", "kind", "loading", "menuOpen", "messageOverrides", "modal", "open", "outsideCloseDisabled", "overlayPositioning", "placement", "resizable", "scale", "widthScale"], ["calciteDialogBeforeClose", "calciteDialogBeforeOpen", "calciteDialogClose", "calciteDialogOpen", "calciteDialogScroll"]) @@ -220,7 +215,7 @@ createCalciteInputBinding("calciteFlow", "calcite-flow", [], []) createCalciteInputBinding("calciteFunctional", "calcite-functional", [], []) // Component: calcite-graph -createCalciteInputBinding("calciteGraph", "calcite-graph", ["colorStops", "data", "highlightMax", "highlightMin", "max (required)", "min (required)"], []) +createCalciteInputBinding("calciteGraph", "calcite-graph", ["colorStops", "data", "highlightMax", "highlightMin", "max", "min"], []) // Component: calcite-handle createCalciteInputBinding("calciteHandle", "calcite-handle", ["disabled", "dragHandle", "messageOverrides", "selected"], ["calciteHandleChange", "calciteHandleNudge"]) @@ -268,16 +263,16 @@ createCalciteInputBinding("calciteListItem", "calcite-list-item", ["closable", " createCalciteInputBinding("calciteList", "calcite-list", ["canPull", "canPut", "disabled", "dragEnabled", "filterEnabled", "filterPlaceholder", "filterProps", "filterText", "filteredData", "filteredItems", "group", "interactionMode", "label", "loading", "messageOverrides", "numberingSystem", "selectedItems", "selectionAppearance", "selectionMode"], ["calciteInternalListDefaultSlotChange", "calciteListChange", "calciteListDragEnd", "calciteListDragStart", "calciteListFilter", "calciteListOrderChange"]) // Component: calcite-loader -createCalciteInputBinding("calciteLoader", "calcite-loader", ["inline", "label (required)", "scale", "text", "type", "value"], []) +createCalciteInputBinding("calciteLoader", "calcite-loader", ["inline", "label", "scale", "text", "type", "value"], []) // Component: calcite-menu-item -createCalciteInputBinding("calciteMenuItem", "calcite-menu-item", ["active", "breadcrumb", "href", "iconEnd", "iconFlipRtl", "iconStart", "label (required)", "messageOverrides", "open", "rel", "target", "text"], ["calciteMenuItemSelect"]) +createCalciteInputBinding("calciteMenuItem", "calcite-menu-item", ["active", "breadcrumb", "href", "iconEnd", "iconFlipRtl", "iconStart", "label", "messageOverrides", "open", "rel", "target", "text"], ["calciteMenuItemSelect"]) // Component: calcite-menu -createCalciteInputBinding("calciteMenu", "calcite-menu", ["label (required)", "layout", "messageOverrides"], []) +createCalciteInputBinding("calciteMenu", "calcite-menu", ["label", "layout", "messageOverrides"], []) // Component: calcite-meter -createCalciteInputBinding("calciteMeter", "calcite-meter", ["appearance", "disabled", "fillType", "form", "groupSeparator", "high", "label (required)", "low", "max", "min", "name", "numberingSystem", "rangeLabelType", "rangeLabels", "scale", "unitLabel", "value", "valueLabel", "valueLabelType"], []) +createCalciteInputBinding("calciteMeter", "calcite-meter", ["appearance", "disabled", "fillType", "form", "groupSeparator", "high", "label", "low", "max", "min", "name", "numberingSystem", "rangeLabelType", "rangeLabels", "scale", "unitLabel", "value", "valueLabel", "valueLabelType"], []) // Component: calcite-modal createCalciteInputBinding("calciteModal", "calcite-modal", ["beforeClose", "closeButtonDisabled", "docked", "escapeDisabled", "focusTrapDisabled", "fullscreen", "kind", "messageOverrides", "open", "outsideCloseDisabled", "scale", "widthScale"], ["calciteModalBeforeClose", "calciteModalBeforeOpen", "calciteModalClose", "calciteModalOpen"]) @@ -291,11 +286,8 @@ createCalciteInputBinding("calciteNavigationUser", "calcite-navigation-user", [" // Component: calcite-navigation createCalciteInputBinding("calciteNavigation", "calcite-navigation", ["label", "navigationAction"], ["calciteNavigationActionSelect"]) -// Component: calcite-notice -createCalciteInputBinding("calciteNotice", "calcite-notice", ["closable", "icon", "iconFlipRtl", "kind", "messageOverrides", "open", "scale", "width"], ["calciteNoticeBeforeClose", "calciteNoticeBeforeOpen", "calciteNoticeClose", "calciteNoticeOpen"]) - // Component: calcite-option-group -createCalciteInputBinding("calciteOptionGroup", "calcite-option-group", ["disabled", "label (required)"], []) +createCalciteInputBinding("calciteOptionGroup", "calcite-option-group", ["disabled", "label"], []) // Component: calcite-option createCalciteInputBinding("calciteOption", "calcite-option", ["disabled", "label", "selected", "value"], []) @@ -303,20 +295,18 @@ createCalciteInputBinding("calciteOption", "calcite-option", ["disabled", "label // Component: calcite-pagination createCalciteInputBinding("calcitePagination", "calcite-pagination", ["groupSeparator", "messageOverrides", "numberingSystem", "pageSize", "scale", "startItem", "totalItems"], ["calcitePaginationChange"]) -// Component: calcite-panel -createCalciteInputBinding("calcitePanel", "calcite-panel", ["beforeClose", "closable", "closed", "collapsed", "collapsible", "description", "disabled", "heading", "headingLevel", "loading", "menuFlipPlacements", "menuOpen", "menuPlacement", "messageOverrides", "overlayPositioning", "scale"], ["calcitePanelClose", "calcitePanelScroll", "calcitePanelToggle"]) // Component: calcite-popover -createCalciteInputBinding("calcitePopover", "calcite-popover", ["autoClose", "closable", "flipDisabled", "flipPlacements", "focusTrapDisabled", "heading", "headingLevel", "label (required)", "messageOverrides", "offsetDistance", "offsetSkidding", "open", "overlayPositioning", "placement", "pointerDisabled", "referenceElement (required)", "scale", "triggerDisabled"], ["calcitePopoverBeforeClose", "calcitePopoverBeforeOpen", "calcitePopoverClose", "calcitePopoverOpen"]) +createCalciteInputBinding("calcitePopover", "calcite-popover", ["autoClose", "closable", "flipDisabled", "flipPlacements", "focusTrapDisabled", "heading", "headingLevel", "label", "messageOverrides", "offsetDistance", "offsetSkidding", "open", "overlayPositioning", "placement", "pointerDisabled", "referenceElement", "scale", "triggerDisabled"], ["calcitePopoverBeforeClose", "calcitePopoverBeforeOpen", "calcitePopoverClose", "calcitePopoverOpen"]) // Component: calcite-progress createCalciteInputBinding("calciteProgress", "calcite-progress", ["label", "reversed", "text", "type", "value"], []) // Component: calcite-radio-button-group -createCalciteInputBinding("calciteRadioButtonGroup", "calcite-radio-button-group", ["disabled", "layout", "name (required)", "required", "scale", "selectedItem", "status", "validationIcon", "validationMessage"], ["calciteRadioButtonGroupChange"]) +createCalciteInputBinding("calciteRadioButtonGroup", "calcite-radio-button-group", ["disabled", "layout", "name", "required", "scale", "selectedItem", "status", "validationIcon", "validationMessage"], ["calciteRadioButtonGroupChange"]) // Component: calcite-radio-button -createCalciteInputBinding("calciteRadioButton", "calcite-radio-button", ["checked", "disabled", "form", "guid", "name", "required", "scale", "value (required)"], ["calciteRadioButtonChange"]) +createCalciteInputBinding("calciteRadioButton", "calcite-radio-button", ["checked", "disabled", "form", "guid", "name", "required", "scale", "value"], ["calciteRadioButtonChange"]) // Component: calcite-rating createCalciteInputBinding("calciteRating", "calcite-rating", ["average", "count", "disabled", "form", "messageOverrides", "name", "readOnly", "scale", "showChip", "value"], ["calciteRatingChange"]) @@ -324,17 +314,12 @@ createCalciteInputBinding("calciteRating", "calcite-rating", ["average", "count" // Component: calcite-scrim createCalciteInputBinding("calciteScrim", "calcite-scrim", ["loading", "messageOverrides"], []) -// Component: calcite-segmented-control-item -createCalciteInputBinding("calciteSegmentedControlItem", "calcite-segmented-control-item", ["checked", "iconEnd", "iconFlipRtl", "iconStart", "value"], []) - -// Component: calcite-segmented-control -createCalciteInputBinding("calciteSegmentedControl", "calcite-segmented-control", ["appearance", "disabled", "form", "layout", "name", "required", "scale", "selectedItem", "status", "validationIcon", "validationMessage", "validity", "value", "width"], ["calciteSegmentedControlChange"]) // Component: calcite-select -createCalciteInputBinding("calciteSelect", "calcite-select", ["disabled", "form", "label (required)", "name", "required", "scale", "selectedOption", "status", "validationIcon", "validationMessage", "validity", "value", "width"], ["calciteSelectChange"]) +createCalciteInputBinding("calciteSelect", "calcite-select", ["disabled", "form", "label", "name", "required", "scale", "selectedOption", "status", "validationIcon", "validationMessage", "validity", "value", "width"], ["calciteSelectChange"]) // Component: calcite-sheet -createCalciteInputBinding("calciteSheet", "calcite-sheet", ["beforeClose", "displayMode", "escapeDisabled", "focusTrapDisabled", "heightScale", "label (required)", "open", "outsideCloseDisabled", "position", "widthScale"], ["calciteSheetBeforeClose", "calciteSheetBeforeOpen", "calciteSheetClose", "calciteSheetOpen"]) +createCalciteInputBinding("calciteSheet", "calcite-sheet", ["beforeClose", "displayMode", "escapeDisabled", "focusTrapDisabled", "heightScale", "label", "open", "outsideCloseDisabled", "position", "widthScale"], ["calciteSheetBeforeClose", "calciteSheetBeforeOpen", "calciteSheetClose", "calciteSheetOpen"]) // Component: calcite-shell-center-row createCalciteInputBinding("calciteShellCenterRow", "calcite-shell-center-row", ["detached", "heightScale", "position"], []) @@ -345,8 +330,7 @@ createCalciteInputBinding("calciteShellPanel", "calcite-shell-panel", ["collapse // Component: calcite-shell createCalciteInputBinding("calciteShell", "calcite-shell", ["contentBehind"], []) -// Component: calcite-slider -createCalciteInputBinding("calciteSlider", "calcite-slider", ["disabled", "fillPlacement", "form", "groupSeparator", "hasHistogram", "histogram", "histogramStops", "labelFormatter", "labelHandles", "labelTicks", "max", "maxLabel", "maxValue", "min", "minLabel", "minValue", "mirrored", "name", "numberingSystem", "pageStep", "precise", "required", "scale", "snap", "step", "ticks", "value"], ["calciteSliderChange", "calciteSliderInput"]) + // Component: calcite-sort-handle createCalciteInputBinding("calciteSortHandle", "calcite-sort-handle", [], []) @@ -388,7 +372,7 @@ createCalciteInputBinding("calciteTableHeader", "calcite-table-header", ["alignm createCalciteInputBinding("calciteTableRow", "calcite-table-row", ["alignment", "disabled", "selected"], ["calciteTableRowSelect"]) // Component: calcite-table -createCalciteInputBinding("calciteTable", "calcite-table", ["bordered", "caption (required)", "groupSeparator", "interactionMode", "layout", "messageOverrides", "numbered", "numberingSystem", "pageSize", "scale", "selectedItems", "selectionDisplay", "selectionMode", "striped", "zebra"], ["calciteTablePageChange", "calciteTableSelect"]) +createCalciteInputBinding("calciteTable", "calcite-table", ["bordered", "caption", "groupSeparator", "interactionMode", "layout", "messageOverrides", "numbered", "numberingSystem", "pageSize", "scale", "selectedItems", "selectionDisplay", "selectionMode", "striped", "zebra"], ["calciteTablePageChange", "calciteTableSelect"]) // Component: calcite-tabs createCalciteInputBinding("calciteTabs", "calcite-tabs", ["bordered", "layout", "position", "scale"], []) @@ -396,8 +380,6 @@ createCalciteInputBinding("calciteTabs", "calcite-tabs", ["bordered", "layout", // Component: calcite-text-area createCalciteInputBinding("calciteTextArea", "calcite-text-area", ["columns", "disabled", "form", "groupSeparator", "label", "maxLength", "messageOverrides", "minLength", "name", "numberingSystem", "placeholder", "readOnly", "required", "resize", "rows", "scale", "status", "validationIcon", "validationMessage", "validity", "value", "wrap"], ["calciteTextAreaChange", "calciteTextAreaInput"]) -// Component: calcite-tile-group -createCalciteInputBinding("calciteTileGroup", "calcite-tile-group", ["alignment", "disabled", "label (required)", "layout", "scale", "selectedItems", "selectionAppearance", "selectionMode"], ["calciteTileGroupSelect"]) // Component: calcite-tile-select-group createCalciteInputBinding("calciteTileSelectGroup", "calcite-tile-select-group", ["disabled", "layout"], []) @@ -405,8 +387,6 @@ createCalciteInputBinding("calciteTileSelectGroup", "calcite-tile-select-group", // Component: calcite-tile-select createCalciteInputBinding("calciteTileSelect", "calcite-tile-select", ["checked", "description", "disabled", "heading", "icon", "iconFlipRtl", "inputAlignment", "inputEnabled", "name", "type", "value", "width"], ["calciteTileSelectChange"]) -// Component: calcite-tile -createCalciteInputBinding("calciteTile", "calcite-tile", ["active", "alignment", "description", "disabled", "embed", "heading", "href", "icon", "iconFlipRtl", "label", "scale", "selected"], ["calciteTileSelect"]) // Component: calcite-time-picker createCalciteInputBinding("calciteTimePicker", "calcite-time-picker", ["messageOverrides", "numberingSystem", "scale", "step", "value"], []) diff --git a/inst/www/calcite-block.js b/inst/www/calcite-block.js new file mode 100644 index 0000000..ded15c9 --- /dev/null +++ b/inst/www/calcite-block.js @@ -0,0 +1,96 @@ +// Custom Shiny input binding for calcite-block +(function() { + const binding = new Shiny.InputBinding(); + + $.extend(binding, { + find: function(scope) { + return $(scope).find("calcite-block"); + }, + + getId: function(el) { + return el.id; + }, + + getValue: function(el) { + return { + expanded: el.expanded, + collapsible: el.collapsible, + disabled: el.disabled, + loading: el.loading, + heading: el.heading, + description: el.description, + iconStart: el.iconStart, + iconEnd: el.iconEnd, + iconFlipRtl: el.iconFlipRtl, + scale: el.scale, + headingLevel: el.headingLevel, + label: el.label, + dragDisabled: el.dragDisabled, + sortHandleOpen: el.sortHandleOpen, + menuPlacement: el.menuPlacement, + overlayPositioning: el.overlayPositioning + }; + }, + + setValue: function(el, data) { + Object.entries(data).forEach(([key, value]) => { + el[key] = value; + }); + $(el).trigger("calciteBlockInputBinding:updated"); + }, + + subscribe: function(el, callback) { + // Listen for block open event (after animation complete) + $(el).on("calciteBlockOpen.calciteBlockInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for block close event (after animation complete) + $(el).on("calciteBlockClose.calciteBlockInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for update events (from server) + $(el).on("calciteBlockInputBinding:updated", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue); + + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(false); + }); + }, + + unsubscribe: function(el) { + $(el).off(".calciteBlockInputBinding"); + }, + + receiveMessage: function(el, data) { + this.setValue(el, data); + }, + + getState: function(el) { + return this.getValue(el); + } + }); + + Shiny.inputBindings.register(binding, "calcite.calciteBlock"); +})(); diff --git a/inst/www/calcite-date-picker.js b/inst/www/calcite-date-picker.js new file mode 100644 index 0000000..68cf6c1 --- /dev/null +++ b/inst/www/calcite-date-picker.js @@ -0,0 +1,119 @@ +// Custom Shiny input binding for calcite-date-picker +(function() { + const binding = new Shiny.InputBinding(); + + $.extend(binding, { + find: function(scope) { + return $(scope).find("calcite-date-picker"); + }, + + getId: function(el) { + return el.id; + }, + + initialize: function(el) { + // Handle initial value from HTML attribute + const valueAttr = el.getAttribute('value'); + if (valueAttr) { + try { + // Try to parse as JSON array first + const parsed = JSON.parse(valueAttr); + el.value = parsed; + } catch (e) { + // If not JSON, treat as single value + el.value = valueAttr; + } + } + }, + + getValue: function(el) { + // Always return value as an array of strings + let value = el.value; + let valueArray = []; + + if (value) { + if (Array.isArray(value)) { + valueArray = value; + } else if (value) { + valueArray = [value]; + } + } + + return { + value: valueArray, + range: el.range, + min: el.min, + max: el.max, + scale: el.scale, + layout: el.layout, + calendars: el.calendars, + activeRange: el.activeRange, + headingLevel: el.headingLevel, + monthStyle: el.monthStyle, + numberingSystem: el.numberingSystem, + proximitySelectionDisabled: el.proximitySelectionDisabled + }; + }, + + setValue: function(el, data) { + Object.entries(data).forEach(([key, value]) => { + el[key] = value; + }); + $(el).trigger("calciteDatePickerInputBinding:updated"); + }, + + subscribe: function(el, callback) { + // Listen for single date change + $(el).on("calciteDatePickerChange.calciteDatePickerInputBinding", function(event) { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for range change + $(el).on("calciteDatePickerRangeChange.calciteDatePickerInputBinding", function(event) { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for update events (from server) + $(el).on("calciteDatePickerInputBinding:updated", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue); + + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(false); + }); + }, + + unsubscribe: function(el) { + $(el).off(".calciteDatePickerInputBinding"); + }, + + receiveMessage: function(el, data) { + this.setValue(el, data); + }, + + getState: function(el) { + return this.getValue(el); + } + }); + + Shiny.inputBindings.register(binding, "calcite.calciteDatePicker"); +})(); diff --git a/inst/www/calcite-notice.js b/inst/www/calcite-notice.js new file mode 100644 index 0000000..4f88709 --- /dev/null +++ b/inst/www/calcite-notice.js @@ -0,0 +1,87 @@ +// Custom Shiny input binding for calcite-notice +(function() { + const binding = new Shiny.InputBinding(); + + $.extend(binding, { + find: function(scope) { + return $(scope).find("calcite-notice"); + }, + + getId: function(el) { + return el.id; + }, + + getValue: function(el) { + return { + open: el.open, + closable: el.closable, + icon: el.icon, + iconFlipRtl: el.iconFlipRtl, + kind: el.kind, + scale: el.scale, + width: el.width + }; + }, + + setValue: function(el, data) { + Object.entries(data).forEach(([key, value]) => { + el[key] = value; + }); + $(el).trigger("calciteNoticeInputBinding:updated"); + }, + + subscribe: function(el, callback) { + // Listen for notice open event (after animation complete) + $(el).on("calciteNoticeOpen.calciteNoticeInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for notice close event (after animation complete) + $(el).on("calciteNoticeClose.calciteNoticeInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for update events (from server) + $(el).on("calciteNoticeInputBinding:updated", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue); + + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(false); + }); + }, + + unsubscribe: function(el) { + $(el).off(".calciteNoticeInputBinding"); + }, + + receiveMessage: function(el, data) { + this.setValue(el, data); + }, + + getState: function(el) { + return this.getValue(el); + } + }); + + Shiny.inputBindings.register(binding, "calcite.calciteNotice"); +})(); diff --git a/inst/www/calcite-panel.js b/inst/www/calcite-panel.js new file mode 100644 index 0000000..ff4f23d --- /dev/null +++ b/inst/www/calcite-panel.js @@ -0,0 +1,152 @@ +// Custom Shiny input binding for calcite-panel +(function() { + const binding = new Shiny.InputBinding(); + + $.extend(binding, { + find: function(scope) { + return $(scope).find("calcite-panel"); + }, + + getId: function(el) { + return el.id; + }, + + getValue: function(el) { + return { + closable: el.closable, + closed: el.closed, + collapsed: el.collapsed, + collapseDirection: el.collapseDirection, + collapsible: el.collapsible, + description: el.description, + disabled: el.disabled, + heading: el.heading, + headingLevel: el.headingLevel, + icon: el.icon, + iconFlipRtl: el.iconFlipRtl, + loading: el.loading, + menuOpen: el.menuOpen, + menuPlacement: el.menuPlacement, + overlayPositioning: el.overlayPositioning, + scale: el.scale + }; + }, + + setValue: function(el, data) { + Object.entries(data).forEach(([key, value]) => { + el[key] = value; + }); + $(el).trigger("calcitePanelInputBinding:updated"); + }, + + subscribe: function(el, callback) { + // Wait for component to be ready, then initialize + const initializeValue = function() { + const initialValue = binding.getValue(el); + Shiny.setInputValue(el.id, initialValue); + + for (const [key, value] of Object.entries(initialValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + }; + + if (el.componentOnReady) { + el.componentOnReady().then(initializeValue); + } else { + // Fallback: wait a bit for component to initialize + setTimeout(initializeValue, 100); + } + + // Listen for panel close event + $(el).on("calcitePanelClose.calcitePanelInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for panel collapse event + $(el).on("calcitePanelCollapse.calcitePanelInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for panel expand event + $(el).on("calcitePanelExpand.calcitePanelInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for panel scroll event + $(el).on("calcitePanelScroll.calcitePanelInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for panel toggle event + $(el).on("calcitePanelToggle.calcitePanelInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for update events (from server) + $(el).on("calcitePanelInputBinding:updated", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue); + + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(false); + }); + }, + + unsubscribe: function(el) { + $(el).off(".calcitePanelInputBinding"); + }, + + receiveMessage: function(el, data) { + this.setValue(el, data); + }, + + getState: function(el) { + return this.getValue(el); + } + }); + + Shiny.inputBindings.register(binding, "calcite.calcitePanel"); +})(); diff --git a/inst/www/calcite-segmented-control.js b/inst/www/calcite-segmented-control.js new file mode 100644 index 0000000..70e27a0 --- /dev/null +++ b/inst/www/calcite-segmented-control.js @@ -0,0 +1,78 @@ +// Custom Shiny input binding for calcite-segmented-control +(function() { + const binding = new Shiny.InputBinding(); + + $.extend(binding, { + find: function(scope) { + return $(scope).find("calcite-segmented-control"); + }, + + getId: function(el) { + return el.id; + }, + + getValue: function(el) { + return { + value: el.value, + appearance: el.appearance, + disabled: el.disabled, + layout: el.layout, + scale: el.scale, + width: el.width, + name: el.name, + labelText: el.labelText, + status: el.status, + validationMessage: el.validationMessage, + required: el.required + }; + }, + + setValue: function(el, data) { + Object.entries(data).forEach(([key, value]) => { + el[key] = value; + }); + $(el).trigger("calciteSegmentedControlInputBinding:updated"); + }, + + subscribe: function(el, callback) { + // Listen for selection change events + $(el).on("calciteSegmentedControlChange.calciteSegmentedControlInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for update events (from server) + $(el).on("calciteSegmentedControlInputBinding:updated", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue); + + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(false); + }); + }, + + unsubscribe: function(el) { + $(el).off(".calciteSegmentedControlInputBinding"); + }, + + receiveMessage: function(el, data) { + this.setValue(el, data); + }, + + getState: function(el) { + return this.getValue(el); + } + }); + + Shiny.inputBindings.register(binding, "calcite.calciteSegmentedControl"); +})(); diff --git a/inst/www/calcite-slider.js b/inst/www/calcite-slider.js new file mode 100644 index 0000000..285a46b --- /dev/null +++ b/inst/www/calcite-slider.js @@ -0,0 +1,117 @@ +// Custom Shiny input binding for calcite-slider +(function() { + const binding = new Shiny.InputBinding(); + + $.extend(binding, { + find: function(scope) { + return $(scope).find("calcite-slider"); + }, + + getId: function(el) { + return el.id; + }, + + initialize: function(el) { + // Set histogram from data attribute if present + const histogramData = $(el).attr("data-histogram"); + if (histogramData) { + try { + el.histogram = JSON.parse(histogramData); + // Remove the data attribute after setting the property + $(el).removeAttr("data-histogram"); + } catch(e) { + console.error("Failed to parse histogram data:", e); + } + } + }, + + getValue: function(el) { + // Convert histogram from array of pairs to x/y arrays + let histogram = null; + if (el.histogram && Array.isArray(el.histogram)) { + histogram = { + x: el.histogram.map(d => d[0]), + y: el.histogram.map(d => d[1]) + }; + } + + return { + value: el.value, + minValue: el.minValue, + maxValue: el.maxValue, + min: el.min, + max: el.max, + step: el.step, + disabled: el.disabled, + histogram: histogram, + labelHandles: el.labelHandles, + labelTicks: el.labelTicks, + ticks: el.ticks, + scale: el.scale, + precise: el.precise, + snap: el.snap + }; + }, + + setValue: function(el, data) { + Object.entries(data).forEach(([key, value]) => { + el[key] = value; + }); + $(el).trigger("calciteSliderInputBinding:updated"); + }, + + subscribe: function(el, callback) { + // Listen for slider change events (when handle is released) + $(el).on("calciteSliderChange.calciteSliderInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for slider input events (during drag) + $(el).on("calciteSliderInput.calciteSliderInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for update events (from server) + $(el).on("calciteSliderInputBinding:updated", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue); + + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(false); + }); + }, + + unsubscribe: function(el) { + $(el).off(".calciteSliderInputBinding"); + }, + + receiveMessage: function(el, data) { + this.setValue(el, data); + }, + + getState: function(el) { + return this.getValue(el); + } + }); + + Shiny.inputBindings.register(binding, "calcite.calciteSlider"); +})(); diff --git a/inst/www/calcite-tile-group.js b/inst/www/calcite-tile-group.js new file mode 100644 index 0000000..538d5f7 --- /dev/null +++ b/inst/www/calcite-tile-group.js @@ -0,0 +1,79 @@ +// Custom Shiny input binding for calcite-tile-group +(function() { + const binding = new Shiny.InputBinding(); + + $.extend(binding, { + find: function(scope) { + return $(scope).find("calcite-tile-group"); + }, + + getId: function(el) { + return el.id; + }, + + getValue: function(el) { + // Get selected items as an array of IDs + const selectedItems = el.selectedItems || []; + const selectedIds = Array.from(selectedItems).map(item => item.id).filter(id => id); + + return { + selectedItems: selectedIds, + selectionMode: el.selectionMode, + selectionAppearance: el.selectionAppearance, + layout: el.layout, + alignment: el.alignment, + scale: el.scale, + disabled: el.disabled, + label: el.label + }; + }, + + setValue: function(el, data) { + Object.entries(data).forEach(([key, value]) => { + el[key] = value; + }); + $(el).trigger("calciteTileGroupInputBinding:updated"); + }, + + subscribe: function(el, callback) { + // Listen for tile group select events + $(el).on("calciteTileGroupSelect.calciteTileGroupInputBinding", function(event) { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for update events (from server) + $(el).on("calciteTileGroupInputBinding:updated", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue); + + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(false); + }); + }, + + unsubscribe: function(el) { + $(el).off(".calciteTileGroupInputBinding"); + }, + + receiveMessage: function(el, data) { + this.setValue(el, data); + }, + + getState: function(el) { + return this.getValue(el); + } + }); + + Shiny.inputBindings.register(binding, "calcite.calciteTileGroup"); +})(); diff --git a/inst/www/calcite-tile.js b/inst/www/calcite-tile.js new file mode 100644 index 0000000..772ac9e --- /dev/null +++ b/inst/www/calcite-tile.js @@ -0,0 +1,78 @@ +// Custom Shiny input binding for calcite-tile +(function() { + const binding = new Shiny.InputBinding(); + + $.extend(binding, { + find: function(scope) { + return $(scope).find("calcite-tile"); + }, + + getId: function(el) { + return el.id; + }, + + getValue: function(el) { + return { + active: el.active, + selected: el.selected, + disabled: el.disabled, + heading: el.heading, + description: el.description, + icon: el.icon, + href: el.href, + alignment: el.alignment, + scale: el.scale, + iconFlipRtl: el.iconFlipRtl, + label: el.label + }; + }, + + setValue: function(el, data) { + Object.entries(data).forEach(([key, value]) => { + el[key] = value; + }); + $(el).trigger("calciteTileInputBinding:updated"); + }, + + subscribe: function(el, callback) { + // Listen for click events on the tile + $(el).on("click.calciteTileInputBinding", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue, {priority: "event"}); + + // Set individual properties + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(true); + }); + + // Listen for update events (from server) + $(el).on("calciteTileInputBinding:updated", function() { + const currentValue = binding.getValue(el); + Shiny.setInputValue(el.id, currentValue); + + for (const [key, value] of Object.entries(currentValue)) { + Shiny.setInputValue(`${el.id}_${key}`, { values: value }); + } + + callback(false); + }); + }, + + unsubscribe: function(el) { + $(el).off(".calciteTileInputBinding"); + }, + + receiveMessage: function(el, data) { + this.setValue(el, data); + }, + + getState: function(el) { + return this.getValue(el); + } + }); + + Shiny.inputBindings.register(binding, "calcite.calciteTile"); +})(); diff --git a/man/calcite_action.Rd b/man/calcite_action.Rd index aa75958..ee6ec94 100644 --- a/man/calcite_action.Rd +++ b/man/calcite_action.Rd @@ -1,55 +1,148 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/action.R \name{calcite_action} \alias{calcite_action} -\title{Create a Action component} +\title{Create a Calcite Action Component} \usage{ -calcite_action(...) +calcite_action( + text, + icon = NULL, + id = NULL, + active = NULL, + disabled = NULL, + indicator = NULL, + text_enabled = NULL, + scale = NULL, + alignment = NULL, + appearance = NULL, + loading = NULL, + label = NULL, + ... +) } \arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} +\item{text}{Text label for the action (required, also used for accessibility)} + +\item{icon}{Icon name from the Calcite icon set} + +\item{id}{Optional ID for the action (required for Shiny reactivity)} + +\item{active}{Whether the action is highlighted/selected} + +\item{disabled}{Whether the action is disabled} + +\item{indicator}{Whether to show a visual indicator (e.g., notification badge)} + +\item{text_enabled}{Whether to display the text label alongside the icon} + +\item{scale}{Size of the action: "s" (small), "m" (medium), or "l" (large)} + +\item{alignment}{Text alignment: "start", "center", or "end"} + +\item{appearance}{Visual style: "solid" or "transparent"} + +\item{loading}{Whether to show a loading indicator} + +\item{label}{Custom accessibility label (defaults to \code{text} if not provided)} + +\item{...}{Additional attributes passed to the component} } \value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} +An object of class \code{calcite_component} } \description{ -Create a Action component +Creates an action button that can be used within action bars and action groups. +Actions provide a compact way to trigger operations with icon-based buttons. } \details{ -\subsection{Properties}{ +\subsection{Shiny Integration}{ -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - active \tab active \tab When \code{true}, the component is highlighted. \tab boolean \tab TRUE \cr - alignment \tab alignment \tab Specifies the horizontal alignment of button elements with text content. \tab "center" | "end" | "start" \tab TRUE \cr - appearance \tab appearance \tab Specifies the appearance of the component. \tab "solid" | "transparent" \tab TRUE \cr - compact \tab compact \tab When \code{true}, the side padding of the component is reduced. \tab boolean \tab TRUE \cr - disabled \tab disabled \tab When \code{true}, interaction is prevented and the component is displayed with lower opacity. \tab boolean \tab TRUE \cr - icon \tab icon \tab Specifies an icon to display. \tab string \tab TRUE \cr - iconFlipRtl \tab icon-flip-rtl \tab When \code{true}, the icon will be flipped when the element direction is right-to-left (\code{"rtl"}). \tab boolean \tab TRUE \cr - indicator \tab indicator \tab When \code{true}, displays a visual indicator. \tab boolean \tab TRUE \cr - label \tab label \tab Specifies the label of the component. If no label is provided, the label inherits what's provided for the \code{text} prop. \tab string \tab FALSE \cr - loading \tab loading \tab When \code{true}, a busy indicator is displayed. \tab boolean \tab TRUE \cr - messageOverrides \tab NA \tab Use this property to override individual strings used by the component. \tab Check API reference \tab FALSE \cr - scale \tab scale \tab Specifies the size of the component. \tab "l" | "m" | "s" \tab TRUE \cr - text \tab text \tab Specifies text that accompanies the icon. \tab string \tab FALSE \cr - textEnabled \tab text-enabled \tab Indicates whether the text is displayed. \tab boolean \tab TRUE \cr -} +When used in a Shiny app, \code{calcite_action()} returns a reactive list containing +all component properties. You can observe the entire component state or watch +individual properties: +\strong{Available properties:} +\itemize{ +\item \verb{$clicked} - Boolean that toggles on each click (use this to detect clicks) +\item \verb{$active} - Whether the action is currently active/highlighted +\item \verb{$disabled} - Whether the action is disabled +\item \verb{$icon} - The icon name +\item \verb{$text} - The text label +\item \verb{$indicator} - Whether an indicator is shown +\item \verb{$alignment}, \verb{$appearance}, \verb{$scale}, etc. - Other component properties } -\subsection{Slots}{ +\strong{Usage in server:} -The following slots are provided by this component:\tabular{ll}{ - Slot \tab Description \cr - Default (unnamed) \tab A slot for adding a \code{calcite-icon}. \cr - tooltip \tab \link{Deprecated} Use the \code{calcite-tooltip} component instead. \cr -} +\if{html}{\out{
}}\preformatted{# Watch for any change to the action (including clicks) +observeEvent(input$my_action, \{ + print("Action changed!") +\}) + +# Watch only the clicked state +observeEvent(input$my_action$clicked, \{ + print("Action was clicked!") +\}) +# Access specific properties +observeEvent(input$my_action, \{ + is_active <- input$my_action$active + click_state <- input$my_action$clicked +\}) +}\if{html}{\out{
}} } } \examples{ -calcite_action() +# Basic action with icon +calcite_action( + text = "Layers", + icon = "layers", + id = "layers-action" +) + +# Active action with text label +calcite_action( + text = "Settings", + icon = "gear", + active = TRUE, + text_enabled = TRUE +) + +# Action with indicator +calcite_action( + text = "Notifications", + icon = "bell", + indicator = TRUE +) + +# Shiny example +if (interactive()) { + library(shiny) + + ui <- calcite_shell( + calcite_action( + id = "my_action", + text = "Click me", + icon = "check", + text_enabled = TRUE + ), + verbatimTextOutput("status") + ) + + server <- function(input, output, session) { + # Respond to clicks + observeEvent(input$my_action$clicked, { + message("Action clicked! State: ", input$my_action$clicked) + }) + + # Display all properties + output$status <- renderPrint({ + input$my_action + }) + } + + shinyApp(ui, server) +} } \references{ \href{https://developers.arcgis.com/calcite-design-system/components/action/}{Official Documentation} diff --git a/man/calcite_action_group.Rd b/man/calcite_action_group.Rd index 72f00f1..cd3a839 100644 --- a/man/calcite_action_group.Rd +++ b/man/calcite_action_group.Rd @@ -1,19 +1,38 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/action-group.R, R/components-generated.R \name{calcite_action_group} \alias{calcite_action_group} -\title{Create a ActionGroup component} +\title{Create a Calcite Action Group Component} \usage{ +calcite_action_group(...) + calcite_action_group(...) } \arguments{ \item{...}{named attributes passed to \code{htmltools::tag()}} + +\item{id}{Optional ID for the action group} + +\item{layout}{Layout style: "vertical", "horizontal", or "grid"} + +\item{columns}{Number of columns when layout is "grid" (1-6)} + +\item{scale}{Size of the group: "s" (small), "m" (medium), or "l" (large)} + +\item{expanded}{Whether the group is expanded} + +\item{label}{Accessibility label for the group} + +\item{slot}{Optional slot name (e.g., "bottom-actions" for action bars)} } \value{ +An object of class \code{calcite_component} + an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} } \description{ -Create a ActionGroup component +Groups multiple action components together with consistent layout and spacing. +Action groups can be used within action bars to organize related actions. } \details{ \subsection{Properties}{ @@ -46,8 +65,34 @@ The following slots are provided by this component:\tabular{ll}{ } } \examples{ +# Basic action group with vertical layout +calcite_action_group( + calcite_action(text = "Add", icon = "plus"), + calcite_action(text = "Edit", icon = "pencil"), + calcite_action(text = "Delete", icon = "trash") +) + +# Horizontal group with custom scale +calcite_action_group( + layout = "horizontal", + scale = "l", + calcite_action(text = "Save", icon = "save"), + calcite_action(text = "Cancel", icon = "x") +) + +# Grid layout with 2 columns +calcite_action_group( + layout = "grid", + columns = 2, + calcite_action(text = "A", icon = "letter-a"), + calcite_action(text = "B", icon = "letter-b"), + calcite_action(text = "C", icon = "letter-c"), + calcite_action(text = "D", icon = "letter-d") +) calcite_action_group() } \references{ +\href{https://developers.arcgis.com/calcite-design-system/components/action-group/}{Official Documentation} + \href{https://developers.arcgis.com/calcite-design-system/components/action-group/}{Official Documentation} } diff --git a/man/calcite_block.Rd b/man/calcite_block.Rd index 1e5f328..f6e2734 100644 --- a/man/calcite_block.Rd +++ b/man/calcite_block.Rd @@ -1,81 +1,128 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/block.R \name{calcite_block} \alias{calcite_block} -\title{Create a Block component} +\title{Create a Calcite Block Component} \usage{ -calcite_block(...) +calcite_block( + ..., + id = NULL, + heading = NULL, + description = NULL, + collapsible = NULL, + expanded = NULL, + disabled = NULL, + loading = NULL, + icon_start = NULL, + icon_end = NULL, + icon_flip_rtl = NULL, + scale = NULL, + heading_level = NULL, + label = NULL, + drag_disabled = NULL, + sort_handle_open = NULL, + menu_placement = NULL, + overlay_positioning = NULL +) } \arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} +\item{...}{Child content for the block} + +\item{id}{Component ID (required for Shiny reactivity)} + +\item{heading}{Header text for the block} + +\item{description}{Description text displayed below the heading} + +\item{collapsible}{Whether the block can be collapsed (default: FALSE)} + +\item{expanded}{Whether the block is currently expanded (default: FALSE)} + +\item{disabled}{Whether interaction is prevented (default: FALSE)} + +\item{loading}{Whether to display a busy indicator (default: FALSE)} + +\item{icon_start}{Icon to display at the start of the header} + +\item{icon_end}{Icon to display at the end of the header} + +\item{icon_flip_rtl}{Flip icons in RTL languages: "start", "end", or "both"} + +\item{scale}{Size of the component: "s" (small), "m" (medium), or "l" (large)} + +\item{heading_level}{Semantic heading level (1-6) for accessibility} + +\item{label}{Accessible name for the component} + +\item{drag_disabled}{Prevent dragging when parent Block Group enables it (default: FALSE)} + +\item{sort_handle_open}{Display and position the sort handle (default: FALSE)} + +\item{menu_placement}{Placement of the action menu} + +\item{overlay_positioning}{Positioning type for overlaid content: "absolute" or "fixed"} } \value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} +An object of class \code{calcite_component} } \description{ -Create a Block component +Creates a collapsible block component designed to house content and controls +within a Panel, most often as part of an application layout with Shell Panels. } \details{ -\subsection{Properties}{ - -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - collapsible \tab collapsible \tab When \code{true}, the component is collapsible. \tab boolean \tab TRUE \cr - description \tab description \tab A description for the component, which displays below the heading. \tab string \tab FALSE \cr - disabled \tab disabled \tab When \code{true}, interaction is prevented and the component is displayed with lower opacity. \tab boolean \tab TRUE \cr - dragDisabled \tab drag-disabled \tab When \code{true}, and a parent Block Group is \code{dragEnabled}, the component is not draggable. \tab boolean \tab TRUE \cr - dragHandle \tab drag-handle \tab When \code{true}, the component displays a draggable button. \tab boolean \tab TRUE \cr - heading \tab heading \tab The component header text. \tab string \tab FALSE \cr - headingLevel \tab heading-level \tab Specifies the heading level of the component's \code{heading} for proper document structure, without affecting visual styling. \tab 1 | 2 | 3 | 4 | 5 | 6 \tab TRUE \cr - iconEnd \tab icon-end \tab Specifies an icon to display at the end of the component. \tab string \tab TRUE \cr - iconFlipRtl \tab icon-flip-rtl \tab Displays the \code{iconStart} and/or \code{iconEnd} as flipped when the element direction is right-to-left (\code{"rtl"}). \tab "both" | "end" | "start" \tab TRUE \cr - iconStart \tab icon-start \tab Specifies an icon to display at the start of the component. \tab string \tab TRUE \cr - label \tab label \tab Specifies an accessible name for the component. \tab string \tab FALSE \cr - loading \tab loading \tab When \code{true}, a busy indicator is displayed. \tab boolean \tab TRUE \cr - menuFlipPlacements \tab NA \tab Specifies the component's fallback menu \code{placement} when it's initial or specified \code{placement} has insufficient space available. \tab Check API reference \tab FALSE \cr - menuPlacement \tab menu-placement \tab Determines where the action menu will be positioned. \tab "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" \tab TRUE \cr - messageOverrides \tab NA \tab Use this property to override individual strings used by the component. \tab Check API reference \tab FALSE \cr - open \tab open \tab When \code{true}, expands the component and its contents. \tab boolean \tab TRUE \cr - overlayPositioning \tab overlay-positioning \tab Determines the type of positioning to use for the overlaid content. Using \code{"absolute"} will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. \code{"fixed"} should be used to escape an overflowing parent container, or when the reference element's \code{position} CSS property is \code{"fixed"}. \tab "absolute" | "fixed" \tab TRUE \cr - sortHandleOpen \tab sort-handle-open \tab When \code{true}, displays and positions the sort handle. \tab boolean \tab TRUE \cr - status \tab status \tab Displays a status-related indicator icon. \tab "idle" | "invalid" | "valid" \tab TRUE \cr -} +\subsection{Shiny Integration}{ -} +The block emits events when it's expanded or collapsed, making it easy to track state. -\subsection{Events}{ - -The following events are observed by shiny:\tabular{ll}{ - Event \tab Description \cr - calciteBlockBeforeClose \tab Fires when the component is requested to be closed and before the closing transition begins. \cr - calciteBlockBeforeOpen \tab Fires when the component is added to the DOM but not rendered, and before the opening transition begins. \cr - calciteBlockClose \tab Fires when the component is closed and animation is complete. \cr - calciteBlockOpen \tab Fires when the component is open and animation is complete. \cr - calciteBlockSortHandleBeforeClose \tab Fires when the sort handle is requested to be closed and before the closing transition begins. \cr - calciteBlockSortHandleBeforeOpen \tab Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. \cr - calciteBlockSortHandleClose \tab Fires when the sort handle is closed and animation is complete. \cr - calciteBlockSortHandleOpen \tab Fires when the sort handle is open and animation is complete. \cr - calciteBlockToggle \tab Fires when the component's header is clicked. \cr +\strong{Available properties in \code{input$id}:} +\itemize{ +\item \verb{$expanded} - Whether the block is currently expanded +\item \verb{$collapsible} - Whether the block is collapsible +\item \verb{$disabled} - Whether the block is disabled +\item \verb{$heading} - The heading text +\item Other component properties } -} +\strong{Basic usage:} -\subsection{Slots}{ +\if{html}{\out{
}}\preformatted{calcite_block( + id = "my_block", + heading = "Layer effects", + description = "Adjust blur, highlight, and more", + collapsible = TRUE, + expanded = TRUE, + icon_start = "effects", + # Block content... +) -The following slots are provided by this component:\tabular{ll}{ - Slot \tab Description \cr - Default (unnamed) \tab A slot for adding custom content. \cr - actions-end \tab A slot for adding actionable \code{calcite-action} elements after the content of the component. It is recommended to use two or fewer actions. \cr - icon \tab \link{Deprecated} A slot for adding a leading header icon with \code{calcite-icon}. Use \code{icon-start} instead. \cr - content-start \tab A slot for adding non-actionable elements before content of the component. \cr - control \tab \link{Deprecated} A slot for adding a single HTML input element in a header. Use \code{actions-end} instead. \cr - header-menu-actions \tab A slot for adding an overflow menu with \code{calcite-action}s inside a dropdown menu. \cr -} +# In server +observeEvent(input$my_block$expanded, \{ + if (input$my_block$expanded) \{ + message("Block was expanded") + \} else \{ + message("Block was collapsed") + \} +\}) +}\if{html}{\out{
}} + +\strong{Update from server:} +\if{html}{\out{
}}\preformatted{# Programmatically expand or collapse the block +update_calcite("my_block", expanded = TRUE) +update_calcite("my_block", expanded = FALSE) +}\if{html}{\out{
}} } } \examples{ -calcite_block() +# Basic collapsible block +calcite_block( + id = "effects_block", + heading = "Layer effects", + description = "Adjust blur, highlight, and more", + collapsible = TRUE, + icon_start = "effects", + "Block content goes here..." +) } \references{ \href{https://developers.arcgis.com/calcite-design-system/components/block/}{Official Documentation} diff --git a/man/calcite_notice.Rd b/man/calcite_notice.Rd index a3423c8..5ee5acb 100644 --- a/man/calcite_notice.Rd +++ b/man/calcite_notice.Rd @@ -1,64 +1,184 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/notice.R \name{calcite_notice} \alias{calcite_notice} -\title{Create a Notice component} +\title{Create a Calcite Notice Component} \usage{ -calcite_notice(...) +calcite_notice( + ..., + id = NULL, + open = NULL, + closable = NULL, + icon = NULL, + icon_flip_rtl = NULL, + kind = NULL, + scale = NULL, + width = NULL +) } \arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} +\item{...}{Child content for slots (title, message, link, actions-end)} + +\item{id}{Component ID (required for Shiny reactivity)} + +\item{open}{Whether the notice is visible (default: FALSE)} + +\item{closable}{Whether to show a close button (default: FALSE)} + +\item{icon}{Show default icon (TRUE) or specific icon name (string)} + +\item{icon_flip_rtl}{Flip icon in RTL languages (default: FALSE)} + +\item{kind}{Type of notice: "brand", "danger", "info", "success", or "warning"} + +\item{scale}{Size of the component: "s" (small), "m" (medium), or "l" (large)} + +\item{width}{Width behavior: "auto" or "full" (note: "half" is deprecated)} } \value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} +An object of class \code{calcite_component} } \description{ -Create a Notice component +Creates a notice component for displaying informative, contextually relevant +messages. Best for persistent information that can be open at page load or +displayed as a result of user action. } \details{ -Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy. They are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users. -\subsection{Properties}{ - -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - closable \tab closable \tab When \code{true}, a close button is added to the component. \tab boolean \tab TRUE \cr - icon \tab icon \tab When \code{true}, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. \tab boolean | string \tab TRUE \cr - iconFlipRtl \tab icon-flip-rtl \tab When \code{true}, the icon will be flipped when the element direction is right-to-left (\code{"rtl"}). \tab boolean \tab TRUE \cr - kind \tab kind \tab Specifies the kind of the component, which will apply to top border and icon. \tab "brand" | "danger" | "info" | "success" | "warning" \tab TRUE \cr - messageOverrides \tab NA \tab Use this property to override individual strings used by the component. \tab Check API reference \tab FALSE \cr - open \tab open \tab When \code{true}, the component is visible. \tab boolean \tab TRUE \cr - scale \tab scale \tab Specifies the size of the component. \tab "l" | "m" | "s" \tab TRUE \cr - width \tab width \tab Check API reference \tab "auto" | "full" | "half" \tab TRUE \cr -} +\subsection{Shiny Integration}{ +The notice emits events when opened or closed, making it easy to track state +and respond to user dismissals. + +\strong{Available properties in \code{input$id}:} +\itemize{ +\item \verb{$open} - Whether the notice is currently visible +\item \verb{$closable} - Whether the notice can be closed +\item \verb{$kind} - The type of notice +\item Other component properties } -\subsection{Events}{ +\strong{Basic usage:} -The following events are observed by shiny:\tabular{ll}{ - Event \tab Description \cr - calciteNoticeBeforeClose \tab Fires when the component is requested to be closed and before the closing transition begins. \cr - calciteNoticeBeforeOpen \tab Fires when the component is added to the DOM but not rendered, and before the opening transition begins. \cr - calciteNoticeClose \tab Fires when the component is closed and animation is complete. \cr - calciteNoticeOpen \tab Fires when the component is open and animation is complete. \cr -} +\if{html}{\out{
}}\preformatted{calcite_notice( + id = "my_notice", + open = TRUE, + closable = TRUE, + kind = "success", + icon = TRUE, + div(slot = "title", "Success!"), + div(slot = "message", "Your changes have been saved.") +) + +# In server - detect when user closes the notice +observeEvent(input$my_notice$open, \{ + if (!input$my_notice$open) \{ + message("User dismissed the notice") + \} +\}) +}\if{html}{\out{
}} + +\strong{Show/hide from server:} + +\if{html}{\out{
}}\preformatted{# Show a notice +update_calcite("my_notice", open = TRUE) +# Hide a notice +update_calcite("my_notice", open = FALSE) +}\if{html}{\out{
}} } \subsection{Slots}{ -The following slots are provided by this component:\tabular{ll}{ - Slot \tab Description \cr - title \tab A slot for adding the title. \cr - message \tab A slot for adding the message. \cr - link \tab A slot for adding a \code{calcite-action} to take, such as: "undo", "try again", "link to page", etc. \cr - actions-end \tab A slot for adding \code{calcite-action}s to the end of the component. It is recommended to use two or less actions. \cr +The notice supports several slots for organizing content: +\itemize{ +\item \strong{title}: The notice title +\item \strong{message}: The notice message +\item \strong{link}: A calcite-action for links like "Read more" +\item \strong{actions-end}: Additional actions (recommended: 2 or fewer) +} } +\subsection{Best Practices}{ +\itemize{ +\item Use for informative, contextually relevant information +\item Can be open at page load or shown based on user action +\item Can be persistent or closable +\item Use appropriate \code{kind} to convey message severity +} } } \examples{ -calcite_notice() +# Basic notice +calcite_notice( + open = TRUE, + icon = TRUE, + closable = TRUE, + div(slot = "title", "New feature available"), + div(slot = "message", "Check out the reporting dashboard") +) + +# Notice with specific icon and kind +calcite_notice( + open = TRUE, + kind = "danger", + icon = "exclamation-mark-triangle", + div(slot = "title", "Error in form"), + div(slot = "message", "Please correct the highlighted fields") +) + +# Notice with action link +calcite_notice( + open = TRUE, + icon = "layers-reference", + div(slot = "title", "Try this trick"), + div(slot = "message", "Select multiple layers at once"), + calcite_link(slot = "link", title = "my action", "Read more") +) + +# Shiny example with server control +if (interactive()) { + library(shiny) + + ui <- calcite_shell( + calcite_panel( + heading = "Notice Demo", + + calcite_notice( + id = "my_notice", + open = FALSE, + closable = TRUE, + kind = "success", + icon = TRUE, + div(slot = "title", "Success!"), + div(slot = "message", "Your action completed successfully") + ), + + calcite_button( + id = "show_notice", + "Show Notice" + ), + + verbatimTextOutput("notice_status") + ) + ) + + server <- function(input, output, session) { + # Show notice when button clicked + observeEvent(input$show_notice$clicked, { + update_calcite("my_notice", open = TRUE) + }) + + # Track notice state + output$notice_status <- renderPrint({ + list( + is_open = input$my_notice$open, + kind = input$my_notice$kind + ) + }) + } + + shinyApp(ui, server) +} } \references{ \href{https://developers.arcgis.com/calcite-design-system/components/notice/}{Official Documentation} diff --git a/man/calcite_segmented_control.Rd b/man/calcite_segmented_control.Rd index 59817a2..746c727 100644 --- a/man/calcite_segmented_control.Rd +++ b/man/calcite_segmented_control.Rd @@ -1,63 +1,143 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/segmented-control.R \name{calcite_segmented_control} \alias{calcite_segmented_control} -\title{Create a SegmentedControl component} +\title{Create a Calcite Segmented Control Component} \usage{ -calcite_segmented_control(...) +calcite_segmented_control( + ..., + id = NULL, + value = NULL, + appearance = NULL, + disabled = NULL, + layout = NULL, + scale = NULL, + width = NULL, + name = NULL, + label_text = NULL, + status = NULL, + validation_message = NULL, + required = NULL +) } \arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} +\item{...}{Additional attributes passed to the component} + +\item{id}{Component ID (required for Shiny reactivity)} + +\item{value}{Initial selected value (should match a child item's value)} + +\item{appearance}{Visual style: "solid", "outline", or "outline-fill"} + +\item{disabled}{Whether the control is disabled (default: FALSE)} + +\item{layout}{Orientation: "horizontal" or "vertical"} + +\item{scale}{Size of the control: "s" (small), "m" (medium), or "l" (large)} + +\item{width}{Width behavior: "auto" or "full"} + +\item{name}{Name for form submission} + +\item{label_text}{Label displayed on the component} + +\item{status}{Validation state: "idle", "valid", or "invalid"} + +\item{validation_message}{Message displayed for validation feedback} + +\item{required}{Whether selection is required} } \value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} +An object of class \code{calcite_component} } \description{ -Create a SegmentedControl component +Creates a segmented control for selecting between multiple options. Similar to +radio buttons but with a more compact, segmented button appearance. } \details{ -\subsection{Properties}{ - -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - appearance \tab appearance \tab Specifies the appearance style of the component. \tab "outline" | "outline-fill" | "solid" \tab TRUE \cr - disabled \tab disabled \tab When \code{true}, interaction is prevented and the component is displayed with lower opacity. \tab boolean \tab TRUE \cr - form \tab form \tab The \code{id} of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. \tab string \tab TRUE \cr - layout \tab layout \tab Defines the layout of the component. \tab "horizontal" | "vertical" \tab TRUE \cr - name \tab name \tab Specifies the name of the component. Required to pass the component's \code{value} on form submission. \tab string \tab TRUE \cr - required \tab required \tab When \code{true} and the component resides in a form, the component must have a value in order for the form to submit. \tab boolean \tab TRUE \cr - scale \tab scale \tab Specifies the size of the component. \tab "l" | "m" | "s" \tab TRUE \cr - selectedItem \tab NA \tab The component's selected item \code{HTMLElement}. \tab HTMLCalciteSegmentedControlItemElement \tab FALSE \cr - status \tab status \tab Specifies the status of the validation message. \tab "idle" | "invalid" | "valid" \tab TRUE \cr - validationIcon \tab validation-icon \tab Specifies the validation icon to display under the component. \tab boolean | string \tab TRUE \cr - validationMessage \tab validation-message \tab Specifies the validation message to display under the component. \tab string \tab FALSE \cr - validity \tab NA \tab The current validation state of the component. \tab Check API reference \tab FALSE \cr - value \tab value \tab The component's \code{selectedItem} value. \tab string \tab FALSE \cr - width \tab width \tab Check API reference \tab "auto" | "full" \tab TRUE \cr -} - -} +\subsection{Shiny Integration}{ -\subsection{Events}{ +The segmented control emits a \code{calciteSegmentedControlChange} event when the +selected item changes. -The following events are observed by shiny:\tabular{ll}{ - Event \tab Description \cr - calciteSegmentedControlChange \tab Fires when the \code{calcite-segmented-control-item} selection changes. \cr +\strong{Available properties in \code{input$id}:} +\itemize{ +\item \verb{$value} - Currently selected value (matches a child item's value attribute) +\item \verb{$disabled} - Whether the control is disabled +\item \verb{$scale} - Current scale setting +\item Other component properties } -} +\strong{Basic usage:} -\subsection{Slots}{ +\if{html}{\out{
}}\preformatted{calcite_segmented_control( + id = "effect_type", + width = "full", + calcite_segmented_control_item(value = "blur"), + calcite_segmented_control_item(value = "highlight", checked = TRUE), + calcite_segmented_control_item(value = "party") +) -The following slots are provided by this component:\tabular{ll}{ - Slot \tab Description \cr - Default (unnamed) \tab A slot for adding \code{calcite-segmented-control-item}s. \cr -} +# In server +observeEvent(input$effect_type, \{ + selected <- input$effect_type$value + print(paste("Selected:", selected)) +\}) +}\if{html}{\out{
}} + +\strong{Update from server:} +\if{html}{\out{
}}\preformatted{update_calcite("effect_type", value = "blur") +}\if{html}{\out{
}} } } \examples{ -calcite_segmented_control() +# Basic segmented control +calcite_segmented_control( + id = "view_mode", + calcite_segmented_control_item(value = "list", icon_start = "list"), + calcite_segmented_control_item(value = "grid", icon_start = "grid", checked = TRUE), + calcite_segmented_control_item(value = "table", icon_start = "table") +) + +# Full width with text +calcite_segmented_control( + id = "effect", + width = "full", + calcite_segmented_control_item(value = "Blur"), + calcite_segmented_control_item(value = "Highlight", checked = TRUE), + calcite_segmented_control_item(value = "Party mode") +) + +# Shiny example +if (interactive()) { + library(shiny) + + ui <- calcite_shell( + calcite_card( + heading = "Segmented Control Example", + calcite_label( + "Choose an option", + calcite_segmented_control( + id = "my_control", + width = "full", + calcite_segmented_control_item(value = "option1"), + calcite_segmented_control_item(value = "option2", checked = TRUE), + calcite_segmented_control_item(value = "option3") + ) + ), + verbatimTextOutput("selected_value") + ) + ) + + server <- function(input, output, session) { + output$selected_value <- renderPrint({ + paste("Selected:", input$my_control$value) + }) + } + + shinyApp(ui, server) +} } \references{ \href{https://developers.arcgis.com/calcite-design-system/components/segmented-control/}{Official Documentation} diff --git a/man/calcite_segmented_control_item.Rd b/man/calcite_segmented_control_item.Rd index 2caccfc..7c75686 100644 --- a/man/calcite_segmented_control_item.Rd +++ b/man/calcite_segmented_control_item.Rd @@ -1,36 +1,54 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/segmented-control.R \name{calcite_segmented_control_item} \alias{calcite_segmented_control_item} -\title{Create a SegmentedControlItem component} +\title{Create a Calcite Segmented Control Item Component} \usage{ -calcite_segmented_control_item(...) +calcite_segmented_control_item( + value, + label = value, + checked = NULL, + icon_start = NULL, + icon_end = NULL, + icon_flip_rtl = NULL, + ... +) } \arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} +\item{value}{The value this item represents (required)} + +\item{checked}{Whether this item is initially selected (default: FALSE)} + +\item{icon_start}{Icon to display at the start of the item} + +\item{icon_end}{Icon to display at the end of the item} + +\item{icon_flip_rtl}{Whether to flip the icon in RTL languages (default: FALSE)} + +\item{...}{Additional content or attributes (text label if provided as unnamed argument)} } \value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} +An object of class \code{calcite_component} } \description{ -Create a SegmentedControlItem component +Creates an individual item within a segmented control. Must be used as a child +of \code{calcite_segmented_control()}. } -\details{ -\subsection{Properties}{ +\examples{ +# Item with text label +calcite_segmented_control_item(value = "option1") -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - checked \tab checked \tab When \code{true}, the component is checked. \tab boolean \tab TRUE \cr - iconEnd \tab icon-end \tab Specifies an icon to display at the end of the component. \tab string \tab TRUE \cr - iconFlipRtl \tab icon-flip-rtl \tab When \code{true}, the icon will be flipped when the element direction is right-to-left (\code{"rtl"}). \tab boolean \tab TRUE \cr - iconStart \tab icon-start \tab Specifies an icon to display at the start of the component. \tab string \tab TRUE \cr - value \tab value \tab The component's value. \tab any \tab FALSE \cr -} +# Item with icon +calcite_segmented_control_item( + value = "list", + icon_start = "list" +) -} -} -\examples{ -calcite_segmented_control_item() +# Initially selected item +calcite_segmented_control_item( + value = "default", + checked = TRUE +) } \references{ \href{https://developers.arcgis.com/calcite-design-system/components/segmented-control-item/}{Official Documentation} diff --git a/man/calcite_shell.Rd b/man/calcite_shell.Rd index 4fc9870..23d15fa 100644 --- a/man/calcite_shell.Rd +++ b/man/calcite_shell.Rd @@ -1,52 +1,99 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/shell.R \name{calcite_shell} \alias{calcite_shell} -\title{Create a Shell component} +\title{Create a Calcite Shell Layout} \usage{ -calcite_shell(...) +calcite_shell( + ..., + header = NULL, + footer = NULL, + panel_start = NULL, + panel_end = NULL, + panel_top = NULL, + panel_bottom = NULL, + modals = NULL, + dialogs = NULL, + alerts = NULL, + sheets = NULL +) } \arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} +\item{...}{Main content to display in the default slot (between panels)} + +\item{header}{Content for the header slot (top of shell). Typically a +\code{\link[=calcite_navigation]{calcite_navigation()}} component.} + +\item{footer}{Content for the footer slot (bottom of shell)} + +\item{panel_start}{Content for the start/left panel. Use \code{\link[=calcite_shell_panel]{calcite_shell_panel()}} +with \code{position = "start"}.} + +\item{panel_end}{Content for the end/right panel. Use \code{\link[=calcite_shell_panel]{calcite_shell_panel()}} +with \code{position = "end"}.} + +\item{panel_top}{Content for the top panel (below header)} + +\item{panel_bottom}{Content for the bottom panel (above footer)} + +\item{modals}{Slot for \code{\link[=calcite_modal]{calcite_modal()}} components} + +\item{dialogs}{Slot for \code{\link[=calcite_dialog]{calcite_dialog()}} components} + +\item{alerts}{Slot for \code{\link[=calcite_alert]{calcite_alert()}} components} + +\item{sheets}{Slot for \code{\link[=calcite_sheet]{calcite_sheet()}} components} } \value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} +An object of class \code{calcite_component} which is a subclass of \code{shiny.tag} } \description{ -Create a Shell component +The Shell is a foundational layout component in Calcite, enabling the creation +of rich, interactive experiences. It provides structured slots for headers, +footers, side panels, and main content. } \details{ -\subsection{Properties}{ - -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - contentBehind \tab content-behind \tab Positions the center content behind any \code{calcite-shell-panel}s. \tab boolean \tab TRUE \cr -} +\subsection{Shell Structure}{ +The shell organizes your application into distinct regions: +\itemize{ +\item \strong{header}: Top navigation bar +\item \strong{panel-start/panel-end}: Side panels (left/right) +\item \strong{panel-top/panel-bottom}: Top/bottom panels +\item \strong{Default content}: Main application area (maps, charts, etc.) +\item \strong{footer}: Bottom information/links +\item \strong{Overlay slots}: modals, dialogs, alerts, sheets } -\subsection{Slots}{ - -The following slots are provided by this component:\tabular{ll}{ - Slot \tab Description \cr - Default (unnamed) \tab A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map. \cr - header \tab A slot for adding header content. This content will be positioned at the top of the component. \cr - footer \tab A slot for adding footer content. This content will be positioned at the bottom of the component. \cr - panel-start \tab A slot for adding the starting \code{calcite-shell-panel}. \cr - panel-end \tab A slot for adding the ending \code{calcite-shell-panel}. \cr - panel-top \tab A slot for adding the top \code{calcite-shell-panel}. \cr - panel-bottom \tab A slot for adding the bottom \code{calcite-shell-panel}. \cr - center-row \tab \link{Deprecated} Use the \code{"panel-bottom"} slot instead. A slot for adding the bottom \code{calcite-shell-center-row}. \cr - modals \tab A slot for adding \code{calcite-modal} components. When placed in this slot, the modal position will be constrained to the extent of the \code{calcite-shell}. \cr - dialogs \tab A slot for adding \code{calcite-dialog} components. When placed in this slot, the dialog position will be constrained to the extent of the \code{calcite-shell}. \cr - alerts \tab A slot for adding \code{calcite-alert} components. When placed in this slot, the alert position will be constrained to the extent of the \code{calcite-shell}. \cr - sheets \tab A slot for adding \code{calcite-sheet} components. When placed in this slot, the sheet position will be constrained to the extent of the \code{calcite-shell}. \cr -} - +When embedded within other content, the overlay slots (modals, dialogs, alerts, sheets) +facilitate placement of these components relative to the Shell, constraining them +to the shell's boundaries rather than the full page. } } \examples{ -calcite_shell() +# Basic shell with header and content +calcite_shell( + header = calcite_navigation( + calcite_navigation_logo(slot = "logo", heading = "My App") + ), + "Main content goes here" +) + +# Shell with action bar sidebar +calcite_shell( + header = calcite_navigation( + calcite_navigation_logo(slot = "logo", heading = "Wildlife Areas") + ), + panel_start = calcite_shell_panel( + position = "start", + calcite_action_bar( + slot = "action-bar", + calcite_action(text = "Layers", icon = "layers") + ), + calcite_panel(heading = "Layers") + ), + calcite_panel(heading = "Map View") +) } \references{ \href{https://developers.arcgis.com/calcite-design-system/components/shell/}{Official Documentation} diff --git a/man/calcite_slider.Rd b/man/calcite_slider.Rd index 763a9e6..5bfe526 100644 --- a/man/calcite_slider.Rd +++ b/man/calcite_slider.Rd @@ -1,72 +1,206 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/slider.R \name{calcite_slider} \alias{calcite_slider} -\title{Create a Slider component} +\title{Create a Calcite Slider Component} \usage{ -calcite_slider(...) +calcite_slider( + id = NULL, + value = NULL, + min = 0, + max = 100, + step = 1, + min_value = NULL, + max_value = NULL, + label_handles = NULL, + label_ticks = NULL, + label_text = NULL, + ticks = NULL, + disabled = NULL, + required = NULL, + scale = NULL, + snap = NULL, + precise = NULL, + mirrored = NULL, + fill_placement = NULL, + histogram = NULL, + histogram_stops = NULL, + group_separator = NULL, + page_step = NULL, + min_label = NULL, + max_label = NULL, + name = NULL, + form = NULL, + numbering_system = NULL, + status = NULL, + validation_icon = NULL, + validation_message = NULL, + ... +) } \arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} +\item{id}{Component ID (required for Shiny reactivity)} + +\item{value}{Initial value (for single slider) or NULL} + +\item{min}{Minimum selectable value (default: 0)} + +\item{max}{Maximum selectable value (default: 100)} + +\item{step}{Increment step for up/down arrows and keyboard (default: 1)} + +\item{min_value}{For range sliders, the lower bound value} + +\item{max_value}{For range sliders, the upper bound value} + +\item{label_handles}{Whether to display numeric labels on handles (default: FALSE)} + +\item{label_ticks}{Whether to display numeric labels on tick marks (default: FALSE)} + +\item{ticks}{Interval for displaying tick marks on the number line} + +\item{disabled}{Whether the slider is disabled (default: FALSE)} + +\item{scale}{Size of the slider: "s" (small), "m" (medium), or "l" (large)} + +\item{snap}{Whether to enable snap-to-step on mouse interaction (default: FALSE)} + +\item{precise}{Whether to use finer positioning for handles (default: FALSE)} + +\item{group_separator}{Whether to display thousand separators in numbers (default: FALSE)} + +\item{page_step}{Interval to move with Page Up/Down keys} + +\item{min_label}{Accessible label for the minimum handle (for screen readers)} + +\item{max_label}{Accessible label for the maximum handle (for screen readers)} + +\item{...}{Additional attributes passed to the component} } \value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} +An object of class \code{calcite_component} } \description{ -Create a Slider component +Creates a slider input for selecting numeric values. Supports both single-value +and range selection (dual handles). } \details{ -\subsection{Properties}{ - -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - disabled \tab disabled \tab When \code{true}, interaction is prevented and the component is displayed with lower opacity. \tab boolean \tab TRUE \cr - fillPlacement \tab fill-placement \tab Used to configure where the fill is placed along the slider track in relation to the value handle. Range mode will always display the fill between the min and max handles. \tab "end" | "none" | "start" \tab TRUE \cr - form \tab form \tab The \code{id} of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. \tab string \tab TRUE \cr - groupSeparator \tab group-separator \tab When \code{true}, number values are displayed with a group separator corresponding to the language and country format. \tab boolean \tab TRUE \cr - hasHistogram \tab has-histogram \tab When \code{true}, indicates a histogram is present. \tab boolean \tab TRUE \cr - histogram \tab NA \tab A list of the histogram's x,y coordinates within the component's \code{min} and \code{max}. Displays above the component's track. \tab Check API reference \tab FALSE \cr - histogramStops \tab NA \tab A set of single color stops for a histogram, sorted by offset ascending. \tab Check API reference \tab FALSE \cr - labelFormatter \tab NA \tab When specified, allows users to customize handle labels. \tab (value: number, type: "min" | "value" | "max" | "tick", defaultFormatter: (value: number) => string) => string \tab FALSE \cr - labelHandles \tab label-handles \tab When \code{true}, displays label handles with their numeric value. \tab boolean \tab TRUE \cr - labelTicks \tab label-ticks \tab When \code{true} and \code{ticks} is specified, displays label tick marks with their numeric value. \tab boolean \tab TRUE \cr - max \tab max \tab The component's maximum selectable value. \tab number \tab TRUE \cr - maxLabel \tab max-label \tab For multiple selections, the accessible name for the second handle, such as \code{"Temperature, upper bound"}. \tab string \tab FALSE \cr - maxValue \tab max-value \tab For multiple selections, the component's upper value. \tab number \tab FALSE \cr - min \tab min \tab The component's minimum selectable value. \tab number \tab TRUE \cr - minLabel \tab min-label \tab Accessible name for first (or only) handle, such as \code{"Temperature, lower bound"}. \tab string \tab FALSE \cr - minValue \tab min-value \tab For multiple selections, the component's lower value. \tab number \tab FALSE \cr - mirrored \tab mirrored \tab When \code{true}, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. \tab boolean \tab TRUE \cr - name \tab name \tab Specifies the name of the component. Required to pass the component's \code{value} on form submission. \tab string \tab TRUE \cr - numberingSystem \tab numbering-system \tab Specifies the Unicode numeral system used by the component for localization. \tab "arab" | "arabext" | "latn" \tab FALSE \cr - pageStep \tab page-step \tab Specifies the interval to move with the page up, or page down keys. \tab number \tab TRUE \cr - precise \tab precise \tab When \code{true}, sets a finer point for handles. \tab boolean \tab TRUE \cr - required \tab required \tab When \code{true} and the component resides in a form, the component must have a value in order for the form to submit. \tab boolean \tab TRUE \cr - scale \tab scale \tab Specifies the size of the component. \tab "l" | "m" | "s" \tab TRUE \cr - snap \tab snap \tab When \code{true}, enables snap selection in coordination with \code{step} via a mouse. \tab boolean \tab TRUE \cr - status \tab status \tab Specifies the status of the input field, which determines message and icons. \tab "idle" | "invalid" | "valid" \tab TRUE \cr - step \tab step \tab Specifies the interval to move with the up, or down keys. \tab number \tab TRUE \cr - ticks \tab ticks \tab Displays tick marks on the number line at a specified interval. \tab number \tab TRUE \cr - validationIcon \tab validation-icon \tab Specifies the validation icon to display under the component. \tab boolean | string \tab TRUE \cr - validationMessage \tab validation-message \tab Specifies the validation message to display under the component. \tab string \tab FALSE \cr - validity \tab NA \tab The current validation state of the component. \tab Check API reference \tab FALSE \cr - value \tab value \tab The component's value. \tab Check API reference \tab TRUE \cr +\subsection{Shiny Integration}{ + +The slider emits two types of events: +\itemize{ +\item \strong{\code{calciteSliderChange}} - Fires when the user releases the handle (debounced, final value) +\item \strong{\code{calciteSliderInput}} - Fires continuously during drag (use with caution for expensive operations) } +\strong{Available properties in \code{input$id}:} +\itemize{ +\item \verb{$value} - Current value (single slider) or array of \verb{[minValue, maxValue]} (range slider) +\item \verb{$min} / \verb{$max} - Slider bounds +\item \verb{$step} - Step increment +\item \verb{$disabled} - Whether disabled +\item Other component properties } -\subsection{Events}{ +\strong{Single-value slider:} -The following events are observed by shiny:\tabular{ll}{ - Event \tab Description \cr - calciteSliderChange \tab Fires when the thumb is released on the component. Note: To constantly listen to the drag event, use \code{calciteSliderInput} instead. \cr - calciteSliderInput \tab Fires on all updates to the component. Note: Fires frequently during drag. To perform expensive operations consider using a debounce or throttle to avoid locking up the main thread. \cr -} +\if{html}{\out{
}}\preformatted{observeEvent(input$my_slider, \{ + current_value <- input$my_slider$value + print(paste("Slider value:", current_value)) +\}) +}\if{html}{\out{
}} + +\strong{Range slider (dual handles):} + +\if{html}{\out{
}}\preformatted{# Provide both min_value and max_value to create a range slider +calcite_slider( + id = "range_slider", + min = 0, + max = 100, + min_value = 20, + max_value = 80 +) + +observeEvent(input$range_slider, \{ + lower <- input$range_slider$minValue + upper <- input$range_slider$maxValue + print(paste("Range:", lower, "to", upper)) +\}) +}\if{html}{\out{
}} + +\strong{Update from server:} +\if{html}{\out{
}}\preformatted{# Update single value +update_calcite("my_slider", value = 50) + +# Update range +update_calcite("range_slider", minValue = 30, maxValue = 70) +}\if{html}{\out{
}} } } \examples{ -calcite_slider() +# Basic slider +calcite_slider( + id = "my_slider", + value = 50, + min = 0, + max = 100, + step = 5 +) + +# Slider with ticks and labels +calcite_slider( + id = "temperature", + value = 72, + min = 32, + max = 212, + step = 1, + ticks = 10, + label_handles = TRUE, + label_ticks = TRUE +) + +# Range slider (dual handles) +calcite_slider( + id = "price_range", + min = 0, + max = 1000, + min_value = 100, + max_value = 500, + step = 10, + label_handles = TRUE +) + +# Shiny example +if (interactive()) { + library(shiny) + + ui <- calcite_shell( + calcite_card( + heading = "Slider Example", + calcite_label( + "Choose a value", + calcite_slider( + id = "my_slider", + value = 50, + min = 0, + max = 100, + step = 5, + label_handles = TRUE + ) + ), + verbatimTextOutput("slider_value") + ) + ) + + server <- function(input, output, session) { + output$slider_value <- renderPrint({ + paste("Current value:", input$my_slider$value) + }) + } + + shinyApp(ui, server) +} } \references{ \href{https://developers.arcgis.com/calcite-design-system/components/slider/}{Official Documentation} diff --git a/man/calcite_tile.Rd b/man/calcite_tile.Rd index caac89a..81dfcd5 100644 --- a/man/calcite_tile.Rd +++ b/man/calcite_tile.Rd @@ -1,64 +1,117 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/tile.R \name{calcite_tile} \alias{calcite_tile} -\title{Create a Tile component} +\title{Create a Calcite Tile Component} \usage{ -calcite_tile(...) +calcite_tile( + ..., + id = NULL, + heading = NULL, + description = NULL, + icon = NULL, + href = NULL, + active = NULL, + selected = NULL, + disabled = NULL, + alignment = NULL, + scale = NULL, + icon_flip_rtl = NULL, + label = NULL, + content_top = NULL, + content_bottom = NULL +) } \arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} +\item{...}{Child content for the tile} + +\item{id}{Optional ID for the tile (required for Shiny reactivity)} + +\item{heading}{The component header text} + +\item{description}{A description for the component, which displays below the heading} + +\item{icon}{Specifies an icon to display} + +\item{href}{When provided, the URL for the component (makes tile a link)} + +\item{active}{When TRUE, the component is active (default: FALSE)} + +\item{selected}{When TRUE and parent's selectionMode allows it, component is selected (default: FALSE)} + +\item{disabled}{When TRUE, interaction is prevented and component displays with lower opacity (default: FALSE)} + +\item{alignment}{Specifies alignment of tile's content: "start" or "center"} + +\item{scale}{Specifies size of the component: "s" (small), "m" (medium), or "l" (large)} + +\item{icon_flip_rtl}{When TRUE, icon will be flipped when element direction is RTL (default: FALSE)} + +\item{label}{Accessible name for the component} + +\item{content_top}{Slot for adding non-interactive elements above the component's content} + +\item{content_bottom}{Slot for adding non-interactive elements below the component's content} } \value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} +An object of class \code{calcite_component} } \description{ -Create a Tile component +Tiles are presentational components useful for presenting consequential +information in a compact, consistent format. They can contain supportive +icons, a heading, and a description. } \details{ -\subsection{Properties}{ - -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - active \tab active \tab When \code{true}, the component is active. \tab boolean \tab TRUE \cr - alignment \tab alignment \tab Specifies the alignment of the Tile's content. \tab "center" | "start" \tab TRUE \cr - description \tab description \tab A description for the component, which displays below the heading. \tab string \tab TRUE \cr - disabled \tab disabled \tab When \code{true}, interaction is prevented and the component is displayed with lower opacity. \tab boolean \tab TRUE \cr - embed \tab embed \tab The component's embed mode. When \code{true}, renders without a border and padding for use by other components. \tab boolean \tab TRUE \cr - heading \tab heading \tab The component header text, which displays between the icon and description. \tab string \tab TRUE \cr - href \tab href \tab When embed is \code{"false"}, the URL for the component. \tab string \tab TRUE \cr - icon \tab icon \tab Specifies an icon to display. \tab string \tab TRUE \cr - iconFlipRtl \tab icon-flip-rtl \tab When \code{true}, the icon will be flipped when the element direction is right-to-left (\code{"rtl"}). \tab boolean \tab TRUE \cr - label \tab label \tab Accessible name for the component. \tab string \tab FALSE \cr - scale \tab scale \tab Specifies the size of the component. \tab "l" | "m" | "s" \tab TRUE \cr - selected \tab selected \tab When \code{true} and the parent's \code{selectionMode} is \code{"single"}, \verb{"single-persist"', or }"multiple"`, the component is selected. \tab boolean \tab TRUE \cr +\subsection{Best Practices}{ +\itemize{ +\item Tiles are best used to represent one of a limited number of options, actions, or choices +\item The component is wholly focusable - it should not contain slotted focusable elements +\item Text should be concise (heading max ~50 chars, description max ~175 chars) +\item Use sentence case for heading and description +\item End description with proper punctuation } - } -\subsection{Events}{ +\subsection{Shiny Integration}{ -The following events are observed by shiny:\tabular{ll}{ - Event \tab Description \cr - calciteTileSelect \tab Fires when the selected state of the component changes. \cr -} +When used in a Shiny app with an \code{id}, \code{calcite_tile()} returns a reactive list +containing component properties. +\strong{Available properties:} +\itemize{ +\item \verb{$active} - Whether the tile is currently active +\item \verb{$selected} - Whether the tile is selected +\item \verb{$disabled} - Whether the tile is disabled +\item \verb{$heading} - The heading text +\item \verb{$description} - The description text +\item \verb{$icon} - The icon name +\item Other component properties } - -\subsection{Slots}{ - -The following slots are provided by this component:\tabular{ll}{ - Slot \tab Description \cr - content-top \tab A slot for adding non-actionable elements above the component's content. Content slotted here will render in place of the \code{icon} property. \cr - content-bottom \tab A slot for adding non-actionable elements below the component's content. \cr - content-start \tab \link{Deprecated} use \code{content-top} slot instead. A slot for adding non-actionable elements before the component's content. \cr - content-end \tab \link{Deprecated} use \code{content-bottom} slot instead. A slot for adding non-actionable elements after the component's content. \cr -} - } } \examples{ -calcite_tile() +# Basic tile with icon and description +calcite_tile( + icon = "3d-glasses", + heading = "Special viewing glasses", + description = "Great for eclipses and optical illusions" +) + +# Tile with content in bottom slot +calcite_tile( + icon = "rangefinder", + heading = "Rangefinder", + description = "A time-tested tool for field engineers", + content_bottom = calcite_chip("214 in use") +) + +# Active tile with link +calcite_tile( + icon = "data", + heading = "Data Analysis", + href = "https://example.com/data", + active = TRUE +) } \references{ \href{https://developers.arcgis.com/calcite-design-system/components/tile/}{Official Documentation} diff --git a/man/calcite_tile_group.Rd b/man/calcite_tile_group.Rd index 924ce13..536ef17 100644 --- a/man/calcite_tile_group.Rd +++ b/man/calcite_tile_group.Rd @@ -1,57 +1,118 @@ % Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R +% Please edit documentation in R/tile-group.R \name{calcite_tile_group} \alias{calcite_tile_group} -\title{Create a TileGroup component} +\title{Create a Calcite Tile Group Component} \usage{ -calcite_tile_group(...) +calcite_tile_group( + ..., + id = NULL, + label = NULL, + layout = NULL, + alignment = NULL, + scale = NULL, + selection_mode = NULL, + selection_appearance = NULL, + disabled = NULL +) } \arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} +\item{...}{Child \code{calcite_tile()} components} + +\item{id}{Optional ID for the tile group (required for Shiny reactivity to track selection)} + +\item{label}{Accessible name for the component (required for accessibility)} + +\item{layout}{Defines the layout: "horizontal" for rows, "vertical" for a single column} + +\item{alignment}{Specifies alignment of each tile's content: "start" or "center"} + +\item{scale}{Specifies size of the component: "s" (small), "m" (medium), or "l" (large)} + +\item{selection_mode}{Specifies the selection mode: "none" (default), "single", "single-persist", or "multiple"} + +\item{selection_appearance}{Specifies selection appearance: "icon" (checkmark/dot) or "border"} + +\item{disabled}{When TRUE, interaction is prevented and component displays with lower opacity (default: FALSE)} } \value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} +An object of class \code{calcite_component} } \description{ -Create a TileGroup component +Tile Group can be used to organize multiple Tile components within a layout. +It supports workflows and patterns using more than one Tile, with opt-in +selection modes for interactive workflows. } \details{ -\subsection{Properties}{ - -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - alignment \tab alignment \tab Specifies the alignment of each \code{calcite-tile}'s content. \tab "center" | "start" \tab TRUE \cr - disabled \tab disabled \tab When \code{true}, interaction is prevented and the component is displayed with lower opacity. \tab boolean \tab TRUE \cr - label \tab label \tab Accessible name for the component. \tab string \tab FALSE \cr - layout \tab layout \tab Defines the layout of the component. Use \code{"horizontal"} for rows, and \code{"vertical"} for a single column. \tab "horizontal" | "vertical" \tab TRUE \cr - scale \tab scale \tab Specifies the size of the component. \tab "l" | "m" | "s" \tab TRUE \cr - selectedItems \tab NA \tab Specifies the component's selected items. \tab Check API reference \tab FALSE \cr - selectionAppearance \tab selection-appearance \tab Specifies the selection appearance, where: - \code{"icon"} (displays a checkmark or dot), or - \code{"border"} (displays a border). \tab "border" | "icon" \tab TRUE \cr - selectionMode \tab selection-mode \tab Specifies the selection mode, where: - \code{"multiple"} (allows any number of selected items), - \code{"single"} (allows only one selected item), - \code{"single-persist"} (allows only one selected item and prevents de-selection), - \code{"none"} (allows no selected items). \tab "multiple" | "none" | "single" | "single-persist" \tab TRUE \cr +\subsection{Selection Modes}{ +\itemize{ +\item \code{"none"} - No selection allowed (default) +\item \code{"single"} - Only one tile can be selected at a time +\item \code{"single-persist"} - Only one tile selected, prevents de-selection +\item \code{"multiple"} - Any number of tiles can be selected } - } -\subsection{Events}{ +\subsection{Shiny Integration}{ -The following events are observed by shiny:\tabular{ll}{ - Event \tab Description \cr - calciteTileGroupSelect \tab Fires when the component's selection changes. \cr -} +When used in a Shiny app with an \code{id}, \code{calcite_tile_group()} returns a reactive +list containing component properties and emits events when selection changes. +\strong{Available properties:} +\itemize{ +\item \verb{$selectedItems} - Array of selected tile IDs +\item \verb{$selectionMode} - Current selection mode +\item \verb{$layout} - Current layout +\item \verb{$disabled} - Whether the group is disabled +\item Other component properties } -\subsection{Slots}{ - -The following slots are provided by this component:\tabular{ll}{ - Slot \tab Description \cr - Default (unnamed) \tab A slot for adding \code{calcite-tile} elements. \cr -} +\strong{Usage in server:} +\if{html}{\out{
}}\preformatted{# Watch for selection changes +observeEvent(input$my_tile_group$selectedItems, \{ + selected <- input$my_tile_group$selectedItems + message("Selected tiles: ", paste(selected, collapse = ", ")) +\}) +}\if{html}{\out{
}} } } \examples{ -calcite_tile_group() +# Basic tile group +calcite_tile_group( + label = "Role selection", + calcite_tile( + icon = "rangefinder", + heading = "Field operator", + description = "Create and edit Reports in the field" + ), + calcite_tile( + icon = "knowledge-graph-dashboard", + heading = "Office coordinator", + description = "View and analyze Reports from the office" + ) +) + +# Tile group with multiple selection +calcite_tile_group( + id = "role_selector", + label = "Select roles", + selection_mode = "multiple", + selection_appearance = "border", + layout = "vertical", + calcite_tile( + id = "construction", + icon = "wrench", + heading = "Construction Worker", + description = "Manage construction projects and coordinate teams" + ), + calcite_tile( + id = "engineer", + icon = "rangefinder", + heading = "Civil Engineer", + description = "Design infrastructure and ensure compliance" + ) +) } \references{ \href{https://developers.arcgis.com/calcite-design-system/components/tile-group/}{Official Documentation} diff --git a/man/calcite_tile_select.Rd b/man/calcite_tile_select.Rd deleted file mode 100644 index 69874c5..0000000 --- a/man/calcite_tile_select.Rd +++ /dev/null @@ -1,62 +0,0 @@ -% Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R -\name{calcite_tile_select} -\alias{calcite_tile_select} -\title{Create a TileSelect component} -\usage{ -calcite_tile_select(...) -} -\arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} -} -\value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} -} -\description{ -Use the \code{calcite-tile} component instead. -} -\details{ -\subsection{Properties}{ - -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - checked \tab checked \tab When \code{true}, the component is checked. \tab boolean \tab TRUE \cr - description \tab description \tab A description for the component, which displays below the heading. \tab string \tab TRUE \cr - disabled \tab disabled \tab When \code{true}, interaction is prevented and the component is displayed with lower opacity. \tab boolean \tab TRUE \cr - heading \tab heading \tab The component header text, which displays between the icon and description. \tab string \tab TRUE \cr - icon \tab icon \tab Specifies an icon to display. \tab string \tab TRUE \cr - iconFlipRtl \tab icon-flip-rtl \tab When \code{true}, the icon will be flipped when the element direction is right-to-left (\code{"rtl"}). \tab boolean \tab TRUE \cr - inputAlignment \tab input-alignment \tab When \code{inputEnabled} is \code{true}, specifies the placement of the interactive input on the component. \tab "end" | "start" \tab TRUE \cr - inputEnabled \tab input-enabled \tab When \code{true}, displays an interactive input based on the \code{type} property. \tab boolean \tab TRUE \cr - name \tab name \tab Specifies the name of the component on form submission. \tab any \tab TRUE \cr - type \tab type \tab Specifies the selection mode of the component, where: \code{"radio"} is for single selection, and \code{"checkbox"} is for multiple selections. \tab "checkbox" | "radio" \tab TRUE \cr - value \tab value \tab The component's value. \tab any \tab FALSE \cr - width \tab width \tab Specifies the width of the component. \tab "auto" | "full" \tab TRUE \cr -} - -} - -\subsection{Events}{ - -The following events are observed by shiny:\tabular{ll}{ - Event \tab Description \cr - calciteTileSelectChange \tab Emits a custom change event. For checkboxes it emits when checked or unchecked. For radios it only emits when checked. \cr -} - -} - -\subsection{Slots}{ - -The following slots are provided by this component:\tabular{ll}{ - Slot \tab Description \cr - Default (unnamed) \tab A slot for adding custom content. \cr -} - -} -} -\examples{ -calcite_tile_select() -} -\references{ -\href{https://developers.arcgis.com/calcite-design-system/components/tile-select/}{Official Documentation} -} diff --git a/man/calcite_tile_select_group.Rd b/man/calcite_tile_select_group.Rd deleted file mode 100644 index 7c3d95c..0000000 --- a/man/calcite_tile_select_group.Rd +++ /dev/null @@ -1,43 +0,0 @@ -% Generated by roxygen2: do not edit by hand -% Please edit documentation in R/components-generated.R -\name{calcite_tile_select_group} -\alias{calcite_tile_select_group} -\title{Create a TileSelectGroup component} -\usage{ -calcite_tile_select_group(...) -} -\arguments{ -\item{...}{named attributes passed to \code{htmltools::tag()}} -} -\value{ -an object of class \code{calcite_component} which is a subclass of \code{shiny.tag} -} -\description{ -Use the \code{calcite-tile-group} component instead. -} -\details{ -\subsection{Properties}{ - -The following properties are provided by this component:\tabular{lllll}{ - Name \tab Attribute \tab Description \tab Values \tab Reflects to Attribute \cr - disabled \tab disabled \tab When \code{true}, interaction is prevented and the component is displayed with lower opacity. \tab boolean \tab TRUE \cr - layout \tab layout \tab Defines the layout of the component. Use \code{"horizontal"} for rows, and \code{"vertical"} for a single column. \tab "horizontal" | "vertical" \tab TRUE \cr -} - -} - -\subsection{Slots}{ - -The following slots are provided by this component:\tabular{ll}{ - Slot \tab Description \cr - Default (unnamed) \tab A slot for adding \code{calcite-tile-select} elements. \cr -} - -} -} -\examples{ -calcite_tile_select_group() -} -\references{ -\href{https://developers.arcgis.com/calcite-design-system/components/tile-select-group/}{Official Documentation} -} diff --git a/man/page_actionbar.Rd b/man/page_actionbar.Rd new file mode 100644 index 0000000..36fcbaa --- /dev/null +++ b/man/page_actionbar.Rd @@ -0,0 +1,59 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/shell.R +\name{page_actionbar} +\alias{page_actionbar} +\title{Create a Shell with Action Bar Layout} +\usage{ +page_actionbar( + ..., + title = NULL, + header_actions = NULL, + actions = NULL, + panel_content = NULL, + panel_position = c("start", "end"), + panel_width = c("m", "s", "l"), + footer = NULL +) +} +\arguments{ +\item{...}{Main content area (typically a map or primary view)} + +\item{title}{Application title shown in the navigation header} + +\item{header_actions}{Optional actions for the header (e.g., user menu, settings). +These will be placed in the \code{content-end} slot of the navigation.} + +\item{actions}{Action bar content. Either a \code{\link[=calcite_action_bar]{calcite_action_bar()}} component or +a list of \code{\link[=calcite_action]{calcite_action()}} components that will be wrapped in an action bar.} + +\item{panel_content}{Content for the side panel (shown when an action is selected). +Can be a \code{\link[=calcite_panel]{calcite_panel()}} or other content.} + +\item{panel_position}{Position of the panel. Either "start" (left) or "end" (right).} + +\item{panel_width}{Width of the panel when expanded. Options: "s", "m", "l".} + +\item{footer}{Optional footer content} +} +\value{ +An object of class \code{calcite_component} containing a configured shell +} +\description{ +A convenience function that creates a common layout pattern: a shell with +a navigation header and a collapsible action bar panel on the start (left) side. +This is ideal for map-based applications or tools with multiple layers/options. +} +\examples{ +page_actionbar( + title = "Wildlife Areas", + actions = calcite_action_bar( + calcite_action(text = "Add", icon = "plus"), + calcite_action(text = "Layers", icon = "layers", active = TRUE) + ), + panel_content = calcite_panel( + heading = "Layers", + "Layer controls here" + ), + "Map content here" +) +} diff --git a/man/page_navbar.Rd b/man/page_navbar.Rd new file mode 100644 index 0000000..4199c6d --- /dev/null +++ b/man/page_navbar.Rd @@ -0,0 +1,36 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/shell.R +\name{page_navbar} +\alias{page_navbar} +\title{Create a Shell with Navigation Bar Layout} +\usage{ +page_navbar(..., title = NULL, logo = NULL, nav_actions = NULL, footer = NULL) +} +\arguments{ +\item{...}{Main content area} + +\item{title}{Application title shown in the navigation header} + +\item{logo}{Optional logo component for the navigation} + +\item{nav_actions}{Optional actions for the navigation bar (placed in \code{content-end})} + +\item{footer}{Optional footer content} +} +\value{ +An object of class \code{calcite_component} containing a configured shell +} +\description{ +A convenience function for creating a simple layout with a navigation header +and main content area. This is ideal for dashboard-style applications. +} +\examples{ +page_navbar( + title = "My Dashboard", + nav_actions = list( + calcite_action(icon = "gear", text = "Settings"), + calcite_action(icon = "sign-out", text = "Logout") + ), + "Dashboard content here" +) +} diff --git a/man/page_sidebar.Rd b/man/page_sidebar.Rd new file mode 100644 index 0000000..5587997 --- /dev/null +++ b/man/page_sidebar.Rd @@ -0,0 +1,48 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/shell.R +\name{page_sidebar} +\alias{page_sidebar} +\title{Create a Shell with Sidebar Panel Layout} +\usage{ +page_sidebar( + ..., + sidebar = NULL, + title = NULL, + position = c("start", "end"), + width = c("m", "s", "l"), + collapsible = TRUE, + footer = NULL +) +} +\arguments{ +\item{...}{Main content area} + +\item{sidebar}{Content for the sidebar panel} + +\item{title}{Optional application title} + +\item{position}{Position of sidebar: "start" (left) or "end" (right)} + +\item{width}{Width of the sidebar: "s", "m", or "l"} + +\item{collapsible}{Whether the sidebar can be collapsed (default TRUE)} + +\item{footer}{Optional footer content} +} +\value{ +An object of class \code{calcite_component} containing a configured shell +} +\description{ +Similar to \code{\link[bslib:page_sidebar]{bslib::page_sidebar()}}, this creates a layout with a sidebar panel +and main content area. The sidebar can be positioned on the left or right. +} +\examples{ +page_sidebar( + title = "Data Explorer", + sidebar = calcite_panel( + heading = "Filters", + "Filter controls here" + ), + "Main data view here" +) +}