appsilon/shiny.semantic

Shiny support for powerful Fomantic UI library.

shiny.semantic

Fomantic (Semantic) UI wrapper for Shiny.

With this library it is easy to wrap Shiny with Fomantic UI (previously Semantic). Add a few simple lines of code to give your UI a fresh, modern and highly interactive look.

• shiny

library(shiny)
ui <- fluidPage(
  div(
    div(
      a("Link"),
      p("Lorem ipsum, lorem ipsum, lorem ipsum"),
      actionButton("button", "Click")
    )
  )
)

• shiny.semantic

library(shiny.semantic)
ui <- semanticPage(
  div(class = "ui raised segment",
    div(
      a(class="ui green ribbon label", "Link"),
      p("Lorem ipsum, lorem ipsum, lorem ipsum"),
      actionButton("button", "Click")
    )
  )
)

Shiny.semantic demos

Case studies

🔗 Churn analytics	🔗 Fraud detection

Before and after

We show how shiny.semantic can be used to style an app and change it’s look.

🔗 BEFORE Utah Division of Water Quality (DWQ)	🔗 AFTER Utah Division of Water Quality (DWQ)

Component examples

Components live demo

See more examples with code in the examples folder:

• Static Semantic components demo
• Calendar date and month demo with update
• Counter button demo
• Custom CSS demo
• Dropdown update demo
• Form inputs demo
• Modal demos
• Multiple checkbox demo
• Rating with update demo
• Search selection demos
• Shiny numericInput demo
• Shiny selectInput demo
• Shiny fileInput demo
• Slider and range with update demo
• Multiple tab demo
• Notification demo

How to install?

You can install a stable shiny.semantic release from CRAN repository:

install.packages("shiny.semantic")

and the latest version with remotes:

remotes::install_github("Appsilon/shiny.semantic@develop")

(master branch contains the stable version. Use develop branch for latest features)

To install previous versions you can run:

remotes::install_github("Appsilon/shiny.semantic", ref = "0.1.0")

How to use it?

Firstly, you will have to invoke shinyUI() with semanticPage() instead of standard Shiny UI definitions like e.g. bootstrapPage(). From now on, all components can be annotated with Fomantic UI specific CSS classes and also you will be able to use shiny.semantic components.

Basic example for rendering a simple button. will look like this:

library(shiny)
library(shiny.semantic)
ui <- semanticPage(
      title = "My page",
      div(class = "ui button", icon("user"),  "Icon button")
    )
server <- function(input, output) {}
shinyApp(ui, server)

For better understanding it’s good to check Fomantic UI documentation.

Note #1

At the moment you have to pass page title in semanticPage()

semanticPage(title = "Your page title", ...)

Note #2

The shiny package works with Bootstrap library under the hood. shiny.semantic uses Fomantic UI. Sometimes using both of these libraries may cause troubles with rendering specific UI elements. That is why by default we turn off Bootstrap dependencies.

However, you can switch off suppressing bootstrap by calling semanticPage(suppress_bootstrap = FALSE, ...)

How to contribute?

We welcome contributions of all types!

We encourage typo corrections, bug reports, bug fixes and feature requests. Feedback on the clarity of the documentation and examples is especially valuable.

If you want to contribute to this project please submit a regular PR, once you’re done with new feature or bug fix.

Changes in vignettes

If you modified or added a new vignette, please rebuild them with devtools::build_vignettes().

Important:

1. Please follow the code style from out styleguide.

2. We have a Contributor Code of Conduct. Make sure to check it and to follow it.

Troubleshooting

We used the latest versions of dependencies for this library, so please update your R environment before installation.

However, if you encounter any problems, try the following:

1. Up-to-date R language environment
2. Installing specific dependent libraries versions

• shiny

install.packages("shiny", version='1.4')

3. Some bugs may be related directly to Semantic UI. In that case please try to check issues on its repository.
4. Some bugs may be related to Bootstrap. Please make sure you have it suppressed. Instructions are above in How to use it? section.

Future enhacements

• create all update functions for input components to mimic shiny as close as possible
• add some glue code in dsl.R to make using this package smoother
• adding more semantic components
• new version release on CRAN

Appsilon

Appsilon is a Posit (formerly RStudio) Full Service Certified Partner.
Learn more at appsilon.com.

Get in touch [email protected]

Explore the Rhinoverse - a family of R packages built around Rhino!

shiny.semantic's Issues

sidebar not exported

not sure about other functions, please check as well.

Icons not exported

Hi Appsilon team,

while working on a social media project I need icons from twitter, facebook, instagram and telegram. But only standard icons like setting, play and pause are available.

follow_buttons <- function(){
  tagList(
    div(class="icon item",
      uiicon("facebook")
    ),
    div(class="icon item",
      uiicon("setting")
    ),
    div(class="icon item",
      uiicon("play")
    ),
    div(class="icon item",
      uiicon("twitter")
    )
  )
}

Plugging this function into the dashboard_header function I get that result...

Do you know where the error is caused? Thanks in Advance. Best, Simon

Feature request: Add support for themes from http://semantic-ui-forest.com/

Semantic-UI-Forest is a collection of design, themes and templates for Semantic-UI: http://semantic-ui-forest.com/

We want to add support for these to allow seamless change between themes in the Shiny app.

Acceptance criteria:

• backward compatibility - no need to add anything to use default theme
• single drop-in - theme should be configured in one place
• loading only stylesheets for specified theme in the app.

Keep info about active tab item

Similar to Appsilon/semantic.dashboard#93, it would be good to be able to reference the active item in tabset() within the server function, much like tabsetPanel() in standard shiny.

Shiny.semantic inputs slow down the app

Compare dropdown with selectInput and numericInput with shiny_text_input.

Split components page using shiny.router

Currently we use single page layout for components documentation. It would be great to use router and have separate page for buttons and icons, etc.

This way it would look more similar to native Semantic UI documentation, which is additional advantage.

changing theme programmatically

Hi - what is the easiest way to change between two themes programmatically? There is a boostrap example of theme selector that accomplishes exactly that. Maybe you have an idea how to implement it?

BUG: Doubled dropdown input

Using dropdown function from current develop branch all select options are doubled.
See proposed example from shiny.semantic::dropdown help:

Create list of already existing, not tested components

Create list of components that are not tested yet, before we'll start creating new ones.

Feature request: create semantic version of slider_input

The goal is to slider_input based on semantic UI.

Listing semantic library version

Is there an official listing of the Semantic UI version used by shiny.semantic?

Many icons in uilist

Following the discussion from PR #67 I think we should support a situation when user wants to assign different icon to each element of the uilist.

Post Code for Demo Applications

Would it be possible on GitHub to post the code behind the demo apps that have been built using shiny.semantic? I learn better from having the full app to see how things come together and allows me to repurpose code to build and play with the code and how I could leverage it to build some of my own cool things. Thanks!

http://demo.appsilondatascience.com/shiny.semantic/churn/

Insert shiny.semantic card into flexdashboard

Hi, team! I want to include some cards I've built using shiny.semantic into a flexdashboard that I'm building with a shiny runtime. Here is my code that works and I want to bring into my flexdashboard:

library(shiny)
library(shiny.semantic)
uirender(
 div(class="demo",
  div(class="ui card",
    div(class="content",
    tags$b("Contact Information: "),br(),
    "Name",br(),
    "Address"),
      div(class="extra content")
      )
  )
)

However, when I try to run it in the flexdashboard context, with this code:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    runtime: shiny
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
library(shiny.semantic)
library(shiny)

Column {data-width=650}

Card A

renderUI({
uirender(
 div(class="demo",
  div(class="ui card",
    div(class="content",
    tags$b("Contact Information: "),br(),
    "Name",br(),
    "Address"),
      div(class="extra content")
      )
  )
)
})

I get this error message:

Warning: Error in addResourcePath: addResourcePath called with invalid prefix; please see documentation.

Any idea what this error might be referring to? I want to be able to show a set of cards with reactive output in them but I can't seem to get over this issue. Thank you for developing this. Very cool!

Feature request: Add menu component syntactic sugar.

The goal is to allow to create menu's easily. There are many different types of menus possible to create with semantic, so this should be quite abstract way.

The function below creates hardcoded menu. It should be possible to:

• pass somehow custome items (and attributes and icons as well)
• specify all additional classes for menu

menu <- function() {
  div(class = "ui visible sidebar vertical menu",
    div(class = "item",
      style = "text-align: center",
      h4(class = "ui icon header", uiicon("calendar"), div(class = "content", "Menu"))
    ),
    a(class = "item", href = "/index", uiicon("user"), "A"),
    a(class = "item", href = "/team", uiicon("users"), "B"),
    a(class = "item", href = "/projects", uiicon("calculator"), "C")
  )
}

Feature request: add custom css path support

Currently semantic files are taken from CDN, but in some special cases it'd be worth to customise them. Problem raised here: Appsilon/semantic.dashboard#110 .

Request for fraud detection code source

Hello,

I'm working on a project using shiny package, I want to get the code source of fraud detection project, is that possible ?

Thanks

Feature request: Make dropdown compatible with updateSelectInput

Is it possible to make dropdown compatible with updateSelectInput, so you can change an input like you can with a selectInput item?

Add shiny_input example

Add example shiny app on how to use shiny_input function with button and input classes to get inputs on server side.

Feature request: create sidebar object

Goal is to create uisidebar function based on semantic UI. Could be something like:

Fix failing tests on CI

Previously, our CI configuration was broken and CI showed passing tests even though check failed. I have started a PR by adding a commit that fixes that. Now we need to fix errors that were there, but were hidden.

This task is to finish this PR by fixing code to pass the build: #59

As the first step it would make sense to change https://github.com/Appsilon/shiny.semantic/blob/develop/tests/testthat/test_style.R to be more like the respective file in semantic.dashboard

Would you have soon a new CRAN release?

While the current CRAN version is already quite good, it will be quite beneficial to the visualization and data science community to use instead the version containing all the enhancements that were done since 2018 on both shiny.semantic and SemanticUI

Sorting in semantic table using shiny

I am playing with semantic tables within shiny and could get most of the variants given here https://semantic-ui.com/collections/table.html except the sort feature.

I followed the instructions of downloading the tablesort.js and placed it inside www folder and then ran runApp() from the console ,but it still doesn't work, also looked at semantic git for any issues, couldn't find one.

The original code is here : https://github.com/pandeymanishh/shinyknapsack/blob/master/sample.R
Formatting gets messed when pasted here .

Here's the code snippet I am using :

library(shiny)
#devtools::install_github("Appsilon/shiny.semantic")
library(shiny.semantic)
library(shinyjs)

ui <- function() {
shinyUI(
semanticPage(
shinyjs::useShinyjs(),
tags$head(tags$script(src="tablesort.js")),
title = "My page",
suppressDependencies("bootstrap"),
p(),
h4("Table with the class 'ui red table'"),
HTML('

Food	Calories	Protein
Apples	200	0g
Orange	310	0g

'), p(), h4("Table with the class 'ui sortable celled table'"), HTML('

Food	Calories	Protein
Apples	200	0g
Orange	310	0g

') ) ) }

server <- shinyServer(function(input, output) {
runjs("$('table').tablesort();")
} )
shinyApp(ui = ui(), server = server)

Best,
Manish

Themes example has wrong uilist argument

PTAL: https://github.com/Appsilon/shiny.semantic/blob/develop/examples/themes/app.R#L246

is_icon is logical parameter not character

The package is missing update calendar method

JS part is already prepared. We just need to create R functions.

Feature request: update_search_selection_choices

I wish to update the selected choice interactively on the shiny dashboard server side according to leaflet map click. Previously i have used updateSelectInput() to update selectInput(). Is there an option to update search_selection_choices() or how can i hack it?

Fix minimal exampe with drodown and search api

The dropdown search api is not working.

Add complete list of icons to documentation.

There is vast number of possible icons you can use. Please add a list to the documentation.

https://semantic-ui.com/elements/icon.html

CRAN release notes

Let's keep here important notes that should be included in the changelog for new CRAN release:

• checkbox_ui was completely removed. Use simple_checkbox instead.

• slider_input was removed

• Migrate to fomantic 2.8.3

• shiny.custom.semantic.cdn options introduced to get dependencies from custom location.

• added semantic modal

• added slider

• added calendar

Feature request: Add message component syntactic sugar.

This one is very easy. The more abstract the better. Please before implementation go through: https://semantic-ui.com/collections/message.html

Below simple implementation from our current app:

render_warning <- function(header, content) {
    div(class = "ui error message",
      div(class = "header", header),
      content
    )
}

Requirements:

• optional icon parameter
• IDEA: if content is a list then use List Message
• support for Dismissable messages (This requires javascript!)
• support for additional classes (e.g. Attached, Floating, Warning, Positive, Size)

Add suppress_bootstrap option for semantic_page

Add suppress_bootstrap (default to TRUE)

Slider creates float breaks when only integers conisdered.

The problem is illustrated in the fig below:

Expected behaviour:
When dealing with integers only (e.g. based on limits and default value), slider should display and get only discrete integer values.

Pagination in rshiny

Feature request: Add modal support to shiny.semantic

As far as I can see, there is no way to use showModal from Shiny, or a div with class = ui modal. This is a pretty important feature in Shiny apps.

Navbar in shiny.semantic?

I wonder how can I create the navbar showcased in your app with shiny.semantic?
It looks awesome and really useful.

Thanks!

uirender doesn't show modal correctly

Knitting below code makes displaying modal all grey. The change happened around commit: 477343a87f5d6eccc73a34b1cbe76f5adf40de8f

---
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(shiny)
library(shiny.semantic)
```\

```{r, echo=FALSE}
make_table_row <- function() {

    button_class <- "ui tiny button"
    
    onclick <- sprintf("$('#%s').modal('show');", "modal_id")
    modal <- 
      div(id = "modal_id", class = "ui longer test modal visible scrolling", 
          div(class = "header", tags$h5("Modal title")),
          div(class = "scrolling content",
              div(class = "description",
                  "Description"
              )
          )
      )

  tags$tr(
    tags$td(class = "left aligned",
            tags$h6("Title")
    ),
    tags$td(class = "center aligned",
            tagList(
              modal,
              tags$button(class = button_class, "Show", onclick = onclick)
            )
    )
  )
}

shiny.semantic::uirender(make_table_row(), width = "100%", height = "100%")
```\

Restore checkbox_ui function.

We moved checkbox_ui into simple_checkbox. We should restore the old one and add a warning that the one is deprecated.

Fancy Issue (sticky segment)

Hi guys,

at the moment i'm asked to build a profile manager. For better usability it would be good if the profile on the right hand side sticks to the view of the user while scrolling down.

A miminal example ...

ui <- function() {
  shinyUI(
    semanticPage(
      div(class = "ui grid",
        div(class ="row",
          div(class = "eight wide column",
            div(class = "ui segment",
              purrr::map(1:100, ~ br()),
              "End of the page ..."
            )
          ),
          div(class = "eight wide column",
            div(class = "ui secondary segment",
                "Profile - How to make this segment sticky?"
            )
          )
        )  
      )
    )
  )
}

server <- shinyServer(function(input, output) {
})

shinyApp(ui = ui(), server = server)

I already tried to implement the semantic sticky example, but it didn't work out. So does someone know how to approach this?

Thanks in advance!
Simon

How to load custom css and js paths

According to this closed issue (Appsilon/semantic.dashboard#110) you can specify a custom css file. This is useful for me, as you can't point to the default cdn behind an https connection (this results in a cross domain violation). How is this done in practice, for the css and js files?

For example, if in my shiny app, I put semantic.min.css and semantic.min.js in the www folder (all content of which is visible to the browser), I hoped you could maybe do:
options(shiny.custom.semantic = 'www/')

This didn't work. Nor did this:
options(shiny.custom.semantic = 'https://example.com/public/')

where https://example.com/public/semantic.min.css and https://example.com/public/semantic.min.js exist. The first item in the cran documentation is CDN_PATH, but it doesn't state how to change this.

Accordion does not trigger module visibility

Hi guys,

i came across the problem of how to proper initialise hidden or suspended (dynamic) content of an accordion, like a module. This might be related to the trigger visibility of reactive Shiny outputs which you have already solved for tabs.

Here a minimal example:

library(shiny)
library(shiny.semantic)
library(semantic.dashboard)

# Module
example_module_ui <- function(id){
  ns <- NS(id)
  tagList(
    uiOutput(ns("dynamic_select"))
  )
}

example_module_server <- function(input, output, session){
  
  output$dynamic_select <- renderUI({
    shiny.semantic::dropdown(session$ns("example"), choices = c("first", "second", "third"))
  })
  
}

# Javascript for Accordion
accordion_js <- "
$(document).ready(function() {
  $('.ui.accordion').accordion();
})
"

# Main App
ui <- function() {
  semanticPage(
    div(class = "ui text container", 
      div(class ="ui fluid styled accordion", 
        div(class = "title",
          "Title 1"
        ),
        ### Content
        div(class = "content active",
          example_module_ui("first")
        ),
        div(class = "title",
          "Title 2"
        ),
        ### Content
        div(class = "content active",
          example_module_ui("second")
        )
      )
    ),
    shiny::tags$script(accordion_js)
  )
}

server <- function(input, output, session){
  
  callModule(example_module_server, "first")
  callModule(example_module_server, "second")
  
}

shinyApp(ui = ui(), server = server)

The module repeats the same dynamics for the active content and the non-active. The non-active content doesn't get initialised properly. Whereas if I put both content active, both get initialised correctly.

Thanks for suggestions!

div ui card not rendered correctly when using dashboardPage

I have the following shiny app including multiple tabPanels. In one tabPanel I have a dashboardPage while in the other I want to use ui cards from shiny.semantic. Then the ui card is not rendered correctly.

library(shiny)
library(shinydashboard)
library(shiny.semantic)
ui <- fluidPage(
  tabsetPanel(
    tabPanel("shiny.semantic Panel", 
      semanticPage(
        div(class = "ui card", div(class = "content", div(class = "right floated meta", "14h"), 
          img(class = "ui avatar image", src = "http://semantic-ui.com/images/avatar/large/elliot.jpg"), 
          "Elliot"), div(class = "image", img(src = "http://semantic-ui.com/images/wireframe/image.png")), 
          div(class = "content", span(class = "right floated", uiicon("heart outline like"), 
            "17 likes"), uiicon("comment"), "3 comments"), div(class = "extra content", 
              div(class = "ui large transparent left icon input", uiicon("heart ouline"), 
                tags$input(type = "text", placeholder = "Add Comment..."))))
      )
    ),
    tabPanel("Dashboard Panel",
      dashboardPage(
        dashboardHeader(disable = TRUE),
        dashboardSidebar(disable = TRUE),
        dashboardBody(
          infoBox("Box")
        )
      )
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

devtools::session_info()

─ Session info ───────────────────────────────────────────────────────────────────────────────────────────────────────────────
setting value
version R version 3.4.3 (2017-11-30)
os Windows >= 8 x64
system x86_64, mingw32
ui RStudio
language (EN)
collate English_Germany.1252
tz Europe/Berlin
date 2018-01-02

─ Packages ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────
package * version date source
assertthat 0.2.0 2017-04-11 CRAN (R 3.4.2)
backports 1.1.1 2017-09-25 CRAN (R 3.4.1)
cli 1.0.0 2017-12-22 Github (r-lib/cli@ab1c3aa)
clisymbols 1.2.0 2017-05-21 CRAN (R 3.4.3)
crayon 1.3.4 2017-09-16 CRAN (R 3.4.2)
desc 1.1.1 2017-08-03 CRAN (R 3.4.2)
devtools 1.13.3.9000 2017-12-22 Github (r-lib/devtools@0bcfd6e)
digest 0.6.13 2017-12-14 CRAN (R 3.4.3)
htmltools 0.3.6 2017-04-28 CRAN (R 3.4.2)
htmlwidgets 0.9 2018-01-02 Github (ramnathv/htmlwidgets@18687ee)
httpuv 1.3.5 2017-07-04 CRAN (R 3.4.2)
jsonlite 1.5 2017-06-01 CRAN (R 3.4.2)
magrittr 1.5 2014-11-22 CRAN (R 3.4.2)
memoise 1.1.0 2017-04-21 CRAN (R 3.4.2)
mime 0.5 2016-07-07 CRAN (R 3.4.1)
pkgbuild 0.0.0.9000 2017-12-22 Github (r-lib/pkgbuild@ce7f6d1)
pkgload 0.0.0.9000 2017-12-22 Github (r-lib/pkgload@70eaef8)
R6 2.2.2 2017-06-17 CRAN (R 3.4.2)
Rcpp 0.12.13 2017-09-28 CRAN (R 3.4.2)
rlang 0.1.6.9000 2018-01-02 Github (r-lib/rlang@383a1e1)
rprojroot 1.3-1 2017-12-18 CRAN (R 3.4.3)
rstudioapi 0.7.0-9000 2017-12-22 Github (rstudio/rstudioapi@109e593)
sessioninfo 1.0.1.9000 2017-12-22 Github (r-lib/sessioninfo@c871d01)
shiny * 1.0.5 2017-08-23 CRAN (R 3.4.2)
shiny.semantic * 0.1.1 2018-01-02 Github (4517c93)
shinydashboard * 0.6.1 2017-06-14 CRAN (R 3.4.3)
testthat 2.0.0 2017-12-13 CRAN (R 3.4.3)
usethis 1.1.0.9000 2017-12-22 Github (r-lib/usethis@973bcab)
withr 2.1.1 2017-12-19 CRAN (R 3.4.3)
xtable 1.8-2 2016-02-05 CRAN (R 3.4.2)
yaml 2.1.16 2017-12-12 CRAN (R 3.4.3)

Render Elements in Tabset

Started to learn about this great package and was not able to render elements in tabset.

UI.R:

library(shiny)
shinyUI(semanticPage(
  suppressDependencies("bootstrap"),
  tabset(tabs=
  list(
    list(menu="First Tab", content=
  "Text works well"),
   list(menu="Second Tab",content=plotOutput("plot1"))
  )
)
  ))

Server.R:

library(shiny)
library(shiny.semantic)
library(highlighter)

shinyServer(function(input, output) {
  output$plot1 <- renderPlot(plot(1,1))

})

Plot (and other render elements) are not appearing in tabset.

Merge conflicts in docs/index.html not completely resolved

It appears that there are still a few lingering merge conflicts in docs/index.html that weren't entirely resolved in 6335193, for example:

shiny.semantic/docs/index.html

Lines 141 to 147 in 0b0b98b

	<<<<<<< HEAD
	<div id="htmlwidget-7c7b572707f4ac03eadc" style="width:100%;height:100px;" class="uirender html-widget"></div>
	<script type="application/json" data-for="htmlwidget-7c7b572707f4ac03eadc">{"x":{"ui":"<div class=\"demo\">\n <div class=\"container-fluid\">\n <div style=\"margin-left: 20px; background: white\">\n <div>\n <div>\n <a>Client's info<\/a>\n <p><\/p>\n <table class = 'table shiny-table table- spacing-s' style = 'width:auto;'>\n<thead> <tr> <th style='text-align: left;'> Name <\/th> <th style='text-align: left;'> City <\/th> <th style='text-align: left;'> Revenue <\/th> <\/tr> <\/thead> <tbody>\n <tr> <td> John Smith <\/td> <td> Warsaw, Poland <\/td> <td> $210.50 <\/td> <\/tr>\n <tr> <td> Lindsay More <\/td> <td> SF, United States <\/td> <td> $172.78 <\/td> <\/tr>\n <\/tbody> <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>"},"evals":[],"jsHooks":[]}</script>
	=======
	<div id="htmlwidget-dc9d19f95b7f54faecd9" style="width:100%;height:100px;" class="uirender html-widget"></div>
	<script type="application/json" data-for="htmlwidget-dc9d19f95b7f54faecd9">{"x":{"ui":"<div class=\"demo\">\n <div class=\"container-fluid\">\n <div style=\"margin-left: 20px; background: white\">\n <div>\n <div>\n <a>Client's info<\/a>\n <p><\/p>\n <table class = 'table shiny-table table- spacing-s' style = 'width:auto;'>\n<thead> <tr> <th style='text-align: left;'> Name <\/th> <th style='text-align: left;'> City <\/th> <th style='text-align: left;'> Revenue <\/th> <\/tr> <\/thead> <tbody>\n <tr> <td> John Smith <\/td> <td> Warsaw, Poland <\/td> <td> $210.50 <\/td> <\/tr>\n <tr> <td> Lindsay More <\/td> <td> SF, United States <\/td> <td> $172.78 <\/td> <\/tr>\n <\/tbody> <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>"},"evals":[],"jsHooks":[]}</script>
	>>>>>>> 0c67d5f05901a7385eb7026ca20bd2bfb62df1d6

Inconsistent documentation in modals

Currently the documentation looks like this:

... | Content to be displayed in the modal body.
-- | --
id | ID to be added to the modal div. Default "".
class | Classes except "ui modal" to be added to the modal. Semantic UI classes can be used. Default "".
header | Content to be displayed in the modal header. Default "".
content | Content to be displayed in the modal body.
footer | Content to be displayed in the modal footer. Usually for buttons. Default NULL.
target | Javascript selector for the element that will open the modal. Default NULL.
settings | List of vectors of Semantic UI settings to be added to the modal. Default NULL.
modal_tags | Other modal elements. Default NULL.

with content being held by both ... and content. We should stick to ... only.

Feature request: Add tabset component syntactic sugar.

The goal is to allow to create tabsets easily. Final effect should look like here: https://semantic-ui.com/modules/tab.html#/examples

We've already implemented following solution via shiny.semantic. We want to move code into the package and maybe add a little abstraction through parameters.

Example of implementation:

# Pass a list(tabName1 = tabUI1, tabName2 = tabUI2)
tabset <- function(tabs) {
  identifiers <- names(tabs)

  tagList(
    div(class="ui top attached tabular menu",
      identifiers %>% map(~ div(class = paste("item", if (. == identifiers[1]) "active" else ""), `data-tab`=., .))
    ),
    identifiers %>% map(~
      div(class = paste("ui bottom attached tab segment", if (. == identifiers[1]) "active" else ""),
          `data-tab`=.,
          tabs[[.]]
      )
    ),
    tags$script("$('.menu .item').tab();")
  )
}

This can be used with:

tabset(list(
  Main = div(h4("Editor"), ...), 
  `Available resources` = div(h4("Hours available per week:"), ... )
))

Enchance tabset to make (suspendWhenHidden = FALSE) non necessary.

Please see how we solved Appsilon/semantic.dashboard#48 for reference.

CSS stylesheets broken when using SSL

There is at least one stylesheet that is obtained via http and not https. Here is one example in uirender.js:
http://d335w9rbwpvuxm.cloudfront.net/semantic.min.css

If you run Shiny server behind a reverse proxy (Nginx or Apache) with SSL enabled (i.e. https), then you get a cross-domain violation and the style sheet isn't obtained and therefore the formatting gets broken.

Update methods are missing namespace handling

See https://github.com/Appsilon/shiny.semantic/blob/develop/R/dropdown.R#L86

I want below component source code please help me

Rendered web page still shows merge conflicts

https://appsilon.github.io/shiny.semantic/

Follow-up to #122?