├── .gitignore ├── CHANGELOG.md ├── README.adoc ├── all-shadow-versions ├── deps.edn ├── package.json ├── pom.xml ├── resources └── public │ ├── css │ ├── semantic.min.css │ └── themes │ │ └── default │ │ └── assets │ │ ├── fonts │ │ ├── icons.eot │ │ ├── icons.otf │ │ ├── icons.svg │ │ ├── icons.ttf │ │ ├── icons.woff │ │ └── icons.woff2 │ │ └── images │ │ └── flags.png │ └── index.html ├── shadow-cljs.edn ├── src ├── dev │ └── user.clj ├── main │ └── com │ │ └── fulcrologic │ │ └── semantic_ui │ │ ├── addons │ │ ├── confirm │ │ │ └── ui_confirm.cljc │ │ ├── pagination │ │ │ ├── ui_pagination.cljc │ │ │ └── ui_pagination_item.cljc │ │ ├── portal │ │ │ ├── ui_portal.cljc │ │ │ └── ui_portal_inner.cljc │ │ ├── radio │ │ │ └── ui_radio.cljc │ │ ├── select │ │ │ └── ui_select.cljc │ │ ├── textarea │ │ │ └── ui_text_area.cljc │ │ └── transitionableportal │ │ │ └── ui_transitionable_portal.cljc │ │ ├── behaviors │ │ └── visibility │ │ │ └── ui_visibility.cljc │ │ ├── collections │ │ ├── breadcrumb │ │ │ ├── ui_breadcrumb.cljc │ │ │ ├── ui_breadcrumb_divider.cljc │ │ │ └── ui_breadcrumb_section.cljc │ │ ├── form │ │ │ ├── ui_form.cljc │ │ │ ├── ui_form_button.cljc │ │ │ ├── ui_form_checkbox.cljc │ │ │ ├── ui_form_dropdown.cljc │ │ │ ├── ui_form_field.cljc │ │ │ ├── ui_form_group.cljc │ │ │ ├── ui_form_input.cljc │ │ │ ├── ui_form_radio.cljc │ │ │ ├── ui_form_select.cljc │ │ │ └── ui_form_text_area.cljc │ │ ├── grid │ │ │ ├── ui_grid.cljc │ │ │ ├── ui_grid_column.cljc │ │ │ └── ui_grid_row.cljc │ │ ├── menu │ │ │ ├── ui_menu.cljc │ │ │ ├── ui_menu_header.cljc │ │ │ ├── ui_menu_item.cljc │ │ │ └── ui_menu_menu.cljc │ │ ├── message │ │ │ ├── ui_message.cljc │ │ │ ├── ui_message_content.cljc │ │ │ ├── ui_message_header.cljc │ │ │ ├── ui_message_item.cljc │ │ │ └── ui_message_list.cljc │ │ └── table │ │ │ ├── ui_table.cljc │ │ │ ├── ui_table_body.cljc │ │ │ ├── ui_table_cell.cljc │ │ │ ├── ui_table_footer.cljc │ │ │ ├── ui_table_header.cljc │ │ │ ├── ui_table_header_cell.cljc │ │ │ └── ui_table_row.cljc │ │ ├── elements │ │ ├── button │ │ │ ├── ui_button.cljc │ │ │ ├── ui_button_content.cljc │ │ │ ├── ui_button_group.cljc │ │ │ └── ui_button_or.cljc │ │ ├── container │ │ │ └── ui_container.cljc │ │ ├── divider │ │ │ └── ui_divider.cljc │ │ ├── flag │ │ │ └── ui_flag.cljc │ │ ├── header │ │ │ ├── ui_header.cljc │ │ │ ├── ui_header_content.cljc │ │ │ └── ui_header_subheader.cljc │ │ ├── icon │ │ │ ├── ui_icon.cljc │ │ │ └── ui_icon_group.cljc │ │ ├── image │ │ │ ├── ui_image.cljc │ │ │ └── ui_image_group.cljc │ │ ├── input │ │ │ └── ui_input.cljc │ │ ├── label │ │ │ ├── ui_label.cljc │ │ │ ├── ui_label_detail.cljc │ │ │ └── ui_label_group.cljc │ │ ├── list │ │ │ ├── ui_list.cljc │ │ │ ├── ui_list_content.cljc │ │ │ ├── ui_list_description.cljc │ │ │ ├── ui_list_header.cljc │ │ │ ├── ui_list_icon.cljc │ │ │ ├── ui_list_item.cljc │ │ │ └── ui_list_list.cljc │ │ ├── loader │ │ │ └── ui_loader.cljc │ │ ├── placeholder │ │ │ ├── ui_placeholder.cljc │ │ │ ├── ui_placeholder_header.cljc │ │ │ ├── ui_placeholder_image.cljc │ │ │ ├── ui_placeholder_line.cljc │ │ │ └── ui_placeholder_paragraph.cljc │ │ ├── rail │ │ │ └── ui_rail.cljc │ │ ├── reveal │ │ │ ├── ui_reveal.cljc │ │ │ └── ui_reveal_content.cljc │ │ ├── segment │ │ │ ├── ui_segment.cljc │ │ │ ├── ui_segment_group.cljc │ │ │ └── ui_segment_inline.cljc │ │ └── step │ │ │ ├── ui_step.cljc │ │ │ ├── ui_step_content.cljc │ │ │ ├── ui_step_description.cljc │ │ │ ├── ui_step_group.cljc │ │ │ └── ui_step_title.cljc │ │ ├── factories.cljc │ │ ├── factory_helpers.cljc │ │ ├── icons.cljc │ │ ├── modules │ │ ├── accordion │ │ │ ├── ui_accordion.cljc │ │ │ ├── ui_accordion_accordion.cljc │ │ │ ├── ui_accordion_content.cljc │ │ │ ├── ui_accordion_panel.cljc │ │ │ └── ui_accordion_title.cljc │ │ ├── checkbox │ │ │ └── ui_checkbox.cljc │ │ ├── dimmer │ │ │ ├── ui_dimmer.cljc │ │ │ ├── ui_dimmer_dimmable.cljc │ │ │ └── ui_dimmer_inner.cljc │ │ ├── dropdown │ │ │ ├── ui_dropdown.cljc │ │ │ ├── ui_dropdown_divider.cljc │ │ │ ├── ui_dropdown_header.cljc │ │ │ ├── ui_dropdown_item.cljc │ │ │ ├── ui_dropdown_menu.cljc │ │ │ ├── ui_dropdown_search_input.cljc │ │ │ └── ui_dropdown_text.cljc │ │ ├── embed │ │ │ └── ui_embed.cljc │ │ ├── modal │ │ │ ├── ui_modal.cljc │ │ │ ├── ui_modal_actions.cljc │ │ │ ├── ui_modal_content.cljc │ │ │ ├── ui_modal_description.cljc │ │ │ ├── ui_modal_dimmer.cljc │ │ │ └── ui_modal_header.cljc │ │ ├── popup │ │ │ ├── ui_popup.cljc │ │ │ ├── ui_popup_content.cljc │ │ │ └── ui_popup_header.cljc │ │ ├── progress │ │ │ └── ui_progress.cljc │ │ ├── rating │ │ │ ├── ui_rating.cljc │ │ │ └── ui_rating_icon.cljc │ │ ├── search │ │ │ ├── ui_search.cljc │ │ │ ├── ui_search_category.cljc │ │ │ ├── ui_search_category_layout.cljc │ │ │ ├── ui_search_result.cljc │ │ │ └── ui_search_results.cljc │ │ ├── sidebar │ │ │ ├── ui_sidebar.cljc │ │ │ ├── ui_sidebar_pushable.cljc │ │ │ └── ui_sidebar_pusher.cljc │ │ ├── sticky │ │ │ └── ui_sticky.cljc │ │ ├── tab │ │ │ ├── ui_tab.cljc │ │ │ └── ui_tab_pane.cljc │ │ └── transition │ │ │ ├── ui_transition.cljc │ │ │ └── ui_transition_group.cljc │ │ └── views │ │ ├── advertisement │ │ └── ui_advertisement.cljc │ │ ├── card │ │ ├── ui_card.cljc │ │ ├── ui_card_content.cljc │ │ ├── ui_card_description.cljc │ │ ├── ui_card_group.cljc │ │ ├── ui_card_header.cljc │ │ └── ui_card_meta.cljc │ │ ├── comment │ │ ├── ui_comment.cljc │ │ ├── ui_comment_action.cljc │ │ ├── ui_comment_actions.cljc │ │ ├── ui_comment_author.cljc │ │ ├── ui_comment_avatar.cljc │ │ ├── ui_comment_content.cljc │ │ ├── ui_comment_group.cljc │ │ ├── ui_comment_metadata.cljc │ │ └── ui_comment_text.cljc │ │ ├── feed │ │ ├── ui_feed.cljc │ │ ├── ui_feed_content.cljc │ │ ├── ui_feed_date.cljc │ │ ├── ui_feed_event.cljc │ │ ├── ui_feed_extra.cljc │ │ ├── ui_feed_label.cljc │ │ ├── ui_feed_like.cljc │ │ ├── ui_feed_meta.cljc │ │ ├── ui_feed_summary.cljc │ │ └── ui_feed_user.cljc │ │ ├── item │ │ ├── ui_item.cljc │ │ ├── ui_item_content.cljc │ │ ├── ui_item_description.cljc │ │ ├── ui_item_extra.cljc │ │ ├── ui_item_group.cljc │ │ ├── ui_item_header.cljc │ │ ├── ui_item_image.cljc │ │ └── ui_item_meta.cljc │ │ └── statistic │ │ ├── ui_statistic.cljc │ │ ├── ui_statistic_group.cljc │ │ ├── ui_statistic_label.cljc │ │ └── ui_statistic_value.cljc └── workspaces │ └── fulcrologic │ └── semantic_ui │ ├── workspaces │ ├── button.cljs │ ├── dropdown.cljs │ ├── form.cljs │ ├── icon.cljs │ └── input.cljs │ └── workspaces_main.cljs └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | *.iml 3 | .nrepl-port 4 | figwheel_server.log 5 | resources/public/js 6 | target 7 | componentInfo 8 | pom.xml.asc 9 | .cpcache 10 | .shadow-cljs 11 | node_modules/ 12 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 1.0.0 2 | ----- 3 | - Release for Fulcro 3 4 | -------------------------------------------------------------------------------- /README.adoc: -------------------------------------------------------------------------------- 1 | :toc: 2 | :toc-placement: preamble 3 | :toc-levels: 2 4 | 5 | = Fulcro 3 Semantic UI Wrappers 6 | 7 | Fulcro 3 convenience wrappers for using https://react.semantic-ui.com[Semantic UI React] components. 8 | 9 | WARNING: BREAK VERSIONING. This project is just wrappers for a js library which follows break versioning. This means 10 | they do things like remove and rename code artifacts over time in a way that may break your program. 11 | 12 | This library offers improved integration with the semantic-ui-react package with predefined 13 | factories and doc strings generated directly from the Semantic-UI source. It also includes symbols for 14 | all icon names. 15 | 16 | NOTE: This library requires that you use Fulcro 3. 17 | 18 | image::https://img.shields.io/clojars/v/com.fulcrologic/semantic-ui-wrapper.svg[link="https://clojars.org/com.fulcrologic/semantic-ui-wrapper"] 19 | 20 | == Versions/Compatibility 21 | 22 | * 1.0.x - Known compatible with Semantic UI React v0.88.2 23 | * 2.0.1+ - Newer versions _match_ the version of https://react.semantic-ui.com[Semantic UI React] that was 24 | used to generate the wrappers. *That* project follows BREAK versioning, and this library is just simple 25 | wrappers. Expect upgrades to possibly break your code. 26 | 27 | == Usage 28 | 29 | Add this library to your Fulcro project, and add `semantic-ui-react` to your `package.json`: 30 | 31 | [source] 32 | ----- 33 | $ npm install --save-dev semantic-ui-react 34 | ----- 35 | 36 | NOTE: Semantic UI CSS supplies the layout of everything. Simpler components like buttons can be created with simple 37 | factories like `(dom/button :.ui.button ...)`, so using the react wrappers for those bloats your code for no good reason. 38 | 39 | === Using Components 40 | 41 | If you just want everything (which will bloat your advanced compile build), then use: 42 | 43 | [source] 44 | ----- 45 | (:require [com.fulcrologic.semantic-ui.factories :refer [ui-button]] 46 | ----- 47 | 48 | But if you'd like to include just what you use in your build then 49 | individual factories can be found in namespaces that mirror the semantic-ui-react module structure: 50 | 51 | e.g. `Collections > Form > FormInput` is available as 52 | 53 | [source] 54 | ----- 55 | (:require [com.fulcrologic.semantic-ui.collections.form.ui-form-input :refer [ui-form-input]]) 56 | ----- 57 | 58 | and `Elements > Button > Button` is available as 59 | 60 | [source] 61 | ----- 62 | (:require [com.fulcrologic.semantic-ui.button.ui-button :refer [ui-button]]) 63 | ----- 64 | 65 | While this is a bit tedious in the requires, it ensures that you don't get components in your 66 | build that you don't use. 67 | 68 | == Porting from Semantic UI React Documentation Examples 69 | 70 | Props are required. The factories will convert them to js for you, but if you want every ounce of 71 | possible speed you can pre-tag your props with `#js`. Note that the "nested" elements with dot 72 | notation become just hyphenated names (e.g. `Button.Group` -> `ui-button-group`, 73 | and `List.List` -> `ui-list-list`): 74 | 75 | React Version: 76 | 77 | [source] 78 | ----- 79 | 89 | 92 | 95 | 98 | 99 | ----- 100 | 101 | This library: 102 | 103 | [source] 104 | ----- 105 | (f/ui-button {:content "Like" 106 | :icon i/heart-icon ; or just "heart" 107 | :label {:as "a" :basic true :content "2,048"} 108 | :labelPosition "right"})) 109 | 110 | (f/ui-button-group nil 111 | (f/ui-button {:icon true} 112 | (f/ui-icon {:name i/align-left-icon})) 113 | (f/ui-button {:icon true} 114 | (f/ui-icon {:name i/align-center-icon})) 115 | (f/ui-button {:icon true} 116 | (f/ui-icon {:name i/align-right-icon})) 117 | (f/ui-button {:icon true} 118 | (f/ui-icon {:name i/align-justify-icon}))) 119 | ----- 120 | 121 | == Icons 122 | 123 | The `icons` namespace simply has symbol definitions for each legal string icon name. This 124 | allows you to use your IDE's code completion to find icon names as long as 125 | you can remember something about that name. You may, of course, simply use a known icon 126 | name as a string instead. 127 | 128 | 129 | == Examples 130 | 131 | You can see some example usage in the workspaces of this repository. To play with them live 132 | clone this repo, and start the compiler: 133 | 134 | [source] 135 | ----- 136 | cd semantic-ui-wrapper 137 | npm install 138 | npx shadow-cljs server 139 | ----- 140 | 141 | Navigate to http://localhost:9630 and start the workspaces build 142 | 143 | Then navigate to http://localhost:8023 144 | 145 | == Contributing 146 | 147 | Ping the Fulcro slack channel with your idea, or create a github issue. It is a good 148 | idea to do that before trying to help. 149 | 150 | == Regenerating Factories 151 | 152 | The factories files are generated from a checkout of the (https://github.com/Semantic-Org/Semantic-UI)[Semantic-UI] 153 | source (to automatically get the docstrings). The `user` namespace can be run in a normal Clojure REPL, and 154 | contains the function to generate the files. 155 | 156 | First clone the semantic-ui-react repo: 157 | 158 | [source] 159 | ----- 160 | git clone https://github.com/Semantic-Org/Semantic-UI-React 161 | ----- 162 | 163 | In the cloned repository, run: 164 | 165 | [source] 166 | ----- 167 | yarn install 168 | yarn build:docs 169 | ----- 170 | 171 | Then using the path to the generated docs/src/componentInfo folder, start a repl and run 172 | 173 | [source] 174 | ----- 175 | (gen-factories "path/to/generated/componentInfo") 176 | ----- 177 | 178 | == LICENSE 179 | 180 | Copyright 2017-2020 by Fulcrologic 181 | 182 | MIT Public License 183 | -------------------------------------------------------------------------------- /all-shadow-versions: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fulcrologic/semantic-ui-wrapper/7bd53f445bc4ca7e052c69596dc089282671df6c/all-shadow-versions -------------------------------------------------------------------------------- /deps.edn: -------------------------------------------------------------------------------- 1 | {:paths ["src/main"] 2 | :deps {} 3 | :aliases {:dev {:extra-paths ["src/workspaces" "src/dev"] 4 | :extra-deps {org.clojure/clojure {:mvn/version "1.10.3" :scope "provided"} 5 | org.clojure/clojurescript {:mvn/version "1.10.844" :scope "provided"} 6 | com.fulcrologic/fulcro {:mvn/version "3.5.20" :scope "provided"} 7 | thheller/shadow-cljs {:mvn/version "2.12.6"} 8 | com.github.awkay/workspaces {:mvn/version "1.0.3"}}}}} 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fulcro3-semantic-ui-wrappers", 3 | "version": "1.0.0", 4 | "description": "Semantic UI Wrapper =================== :toc: :toc-placement: preamble :toc-levels: 2", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/fulcrologic/semantic-ui-wrapper.git" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "bugs": { 13 | "url": "https://github.com/fulcrologic/semantic-ui-wrapper/issues" 14 | }, 15 | "homepage": "https://github.com/fulcrologic/semantic-ui-wrapper#readme", 16 | "devDependencies": { 17 | "react": "^17.0.1", 18 | "react-dom": "^17.0.1", 19 | "semantic-ui-react": "^2.1.4", 20 | "shadow-cljs": "^2.11.8" 21 | }, 22 | "dependencies": { 23 | "highlight.js": "^9.12.0", 24 | "react-grid-layout": "^0.16.6" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /pom.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4.0.0 4 | com.fulcrologic 5 | semantic-ui-wrapper 6 | 2.1.5-SNAPSHOT 7 | semantic-ui-wrapper 8 | 9 | UTF-8 10 | 11 | 12 | 13 | MIT 14 | https://opensource.org/licenses/MIT 15 | 16 | 17 | 18 | https://github.com/fulcrologic/semantic-ui-wrappers 19 | scm:git:git://github.com/fulcrologic/semantic-ui-wrapper.git 20 | scm:git:ssh://git@github.com/fulcrologic/semantic-ui-wrapper.git 21 | HEAD 22 | 23 | 24 | 25 | clojars 26 | Clojars repository 27 | https://clojars.org/repo 28 | 29 | 30 | 31 | src/main 32 | 33 | 34 | src/main 35 | 36 | 37 | 38 | 39 | org.apache.maven.plugins 40 | maven-gpg-plugin 41 | 1.6 42 | 43 | 44 | sign-artifacts 45 | verify 46 | 47 | sign 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | clojars 57 | https://repo.clojars.org/ 58 | 59 | 60 | 61 | 62 | org.clojure 63 | clojure 64 | 1.10.1 65 | provided 66 | 67 | 68 | com.fulcrologic 69 | fulcro 70 | 3.5.20 71 | provided 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /resources/public/css/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fulcrologic/semantic-ui-wrapper/7bd53f445bc4ca7e052c69596dc089282671df6c/resources/public/css/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /resources/public/css/themes/default/assets/fonts/icons.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fulcrologic/semantic-ui-wrapper/7bd53f445bc4ca7e052c69596dc089282671df6c/resources/public/css/themes/default/assets/fonts/icons.otf -------------------------------------------------------------------------------- /resources/public/css/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fulcrologic/semantic-ui-wrapper/7bd53f445bc4ca7e052c69596dc089282671df6c/resources/public/css/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /resources/public/css/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fulcrologic/semantic-ui-wrapper/7bd53f445bc4ca7e052c69596dc089282671df6c/resources/public/css/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /resources/public/css/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fulcrologic/semantic-ui-wrapper/7bd53f445bc4ca7e052c69596dc089282671df6c/resources/public/css/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /resources/public/css/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fulcrologic/semantic-ui-wrapper/7bd53f445bc4ca7e052c69596dc089282671df6c/resources/public/css/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /resources/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Template Devcards 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /shadow-cljs.edn: -------------------------------------------------------------------------------- 1 | {:deps {:aliases [:dev]} 2 | :nrepl {:port 9000} 3 | :builds {:workspaces {:target :browser 4 | :output-dir "resources/public/js/workspaces" 5 | :asset-path "/js/workspaces" 6 | :devtools {:preloads [com.fulcrologic.fulcro.inspect.preload] 7 | :http-root "resources/public" 8 | :http-port 8023 9 | :http-resource-root "."} 10 | :modules {:main {:entries [fulcrologic.semantic-ui.workspaces-main]}}}}} 11 | 12 | -------------------------------------------------------------------------------- /src/dev/user.clj: -------------------------------------------------------------------------------- 1 | (ns user 2 | (:require 3 | [clojure.string :as str] 4 | [clojure.data.json :as json] 5 | [clojure.java.io :refer [as-file file make-parents reader]])) 6 | 7 | (def factories-preamble 8 | "(ns com.fulcrologic.semantic-ui.factories 9 | (:require 10 | #?(:cljs [semantic-ui-react :as suir]) 11 | [com.fulcrologic.semantic-ui.factory-helpers :as h])) 12 | 13 | ") 14 | 15 | (defn hyphenated [camelCase] 16 | (-> camelCase 17 | (str/replace #"([A-Z])" "-$1") 18 | (str/lower-case) 19 | (str/replace #"^-" ""))) 20 | 21 | (defn gen-docstring [doc-data] 22 | (let [description (get-in doc-data [:docblock :description]) 23 | description (if (seq description) (str/join "\n " description)) 24 | props (sort-by :name (get doc-data :props)) 25 | docs-by-name (map (fn [{:keys [type description name value]}] 26 | (let [n (count value)] 27 | (cond-> (str name " (" type "): " (first description)) 28 | value (str " (" (str/join ", " (take 100 value)) (when (> n 100) " ...") ")")))) props)] 29 | (str description "\n\n Props:\n - " (str/join "\n - " docs-by-name)))) 30 | 31 | (defn quoted [s] (str "\"" s "\"")) 32 | (defn escaped [s] (str/replace s "\"" "\\\"")) 33 | 34 | (def input-factory-classes 35 | #{"Input" 36 | "Checkbox" 37 | "FormInput" 38 | "DropdownSearchInput" 39 | "Search" 40 | "TextArea"}) 41 | 42 | (defn factory-helper [class] 43 | (if (contains? input-factory-classes class) 44 | "wrapped-factory-apply" 45 | "factory-apply")) 46 | 47 | (defn factory-helper-function 48 | ([{:keys [class factory-name docstring]}] 49 | (factory-helper-function class factory-name docstring true)) 50 | ([class factory-name docstring] 51 | (factory-helper-function class factory-name docstring false)) 52 | ([class factory-name docstring get-as-string] 53 | (let [class-ref (if get-as-string 54 | (str "suir/" class) 55 | class)] 56 | (str "(def " factory-name "\n" 57 | " \"" 58 | (escaped docstring) 59 | "\"" 60 | "\n " 61 | " #?(:cljs (h/" (factory-helper class) " " class-ref ")))\n")))) 62 | 63 | ; shadow-cljs v2.18.0 fails to build with this form of require: 64 | ;; [semantic-ui-react$Confirm :as Confirm] 65 | ;; "Multiple files failed to compile. aborted par-compile" 66 | ;; It passes with: 67 | ;; ["semantic-ui-react$Confirm" :as Confirm] 68 | (defn factory-ns-cljs [ns class factory-name docstring] 69 | (str "(ns " ns "\n" 70 | " (:require\n" 71 | " [com.fulcrologic.semantic-ui.factory-helpers :as h]\n" 72 | " #?(:cljs [\"semantic-ui-react$" class "\" :as " class "])))\n\n" 73 | " " (factory-helper-function class factory-name docstring))) 74 | 75 | (defn gen-factory-map [out-path] 76 | (fn [doc-data] 77 | (let [{:keys [displayName props type repoPath]} doc-data 78 | class displayName 79 | factory-name (str "ui-" (hyphenated class)) 80 | tree (-> repoPath str/lower-case (str/split #"/")) 81 | treeparts (subvec tree 1 (- (count tree) 1)) 82 | filename (str out-path "/" (str/join "/" treeparts) "/" (str/replace factory-name #"-" "_") ".cljc") 83 | nns (str "com.fulcrologic.semantic-ui" "." (str/join "." treeparts) "." factory-name) 84 | docstring (gen-docstring doc-data)] 85 | {:class class 86 | :factory-name factory-name 87 | :include-file (-> repoPath (str/replace #"src" "semantic-ui-react/dist/commonjs") 88 | (str/replace #"\.js" "")) 89 | :filename filename 90 | :ns nns 91 | :docstring docstring 92 | :props props}))) 93 | 94 | (defn read-info [dir filename] 95 | (with-open [r (reader (as-file (str dir "/" filename)))] 96 | (json/read r :key-fn keyword))) 97 | 98 | (defn icons-ns [icon-names] 99 | (let [icons (str/join "\n" 100 | (mapv (fn [[symbol css-class]] 101 | (str "(def " symbol " \"" css-class "\")")) 102 | (->> icon-names 103 | (map #(let [symbol (-> % 104 | (str/replace #" " "-") 105 | (str/replace #"^(\d+.*)" "_$1") 106 | (str "-icon")) 107 | css-class (-> % 108 | (str/replace #"-" " "))] 109 | [symbol css-class])) 110 | sort 111 | distinct)))] 112 | (str "(ns com.fulcrologic.semantic-ui.icons)\n\n" icons))) 113 | 114 | (defn gen-cljs-factories [modules] 115 | (str factories-preamble (str/join "\n" (map factory-helper-function modules)))) 116 | 117 | (defn gen-factories [component-dir] 118 | (let [modules (->> (seq (.list (file component-dir))) 119 | (map #(read-info component-dir %)) 120 | (map (gen-factory-map "src/main/com/fulcrologic/semantic_ui/")) 121 | (sort-by :factory-name))] 122 | (spit (as-file "src/main/com/fulcrologic/semantic_ui/factories.cljc") (gen-cljs-factories modules)) 123 | (doseq [{:keys [ns class factory-name filename docstring props]} modules] 124 | (make-parents filename) 125 | (spit (as-file filename) (factory-ns-cljs ns class factory-name docstring)) 126 | (if (= class "Icon") 127 | (spit (as-file "src/main/com/fulcrologic/semantic_ui/icons.cljc") (icons-ns (->> props (filter #(= (:name %) "name")) first :value))))))) 128 | 129 | (comment 130 | ;; to generate the factories files 131 | ;; clone semantic-ui-react: 132 | ;; git clone https://github.com/Semantic-Org/Semantic-UI-React 133 | ;; in the cloned repo: 134 | ;; yarn install 135 | ;; yarn build:docs 136 | ;; then using the path to the docs/src/componentInfo folder, start a repl and run 137 | ;; 138 | (gen-factories "/Users/tonykay/oss/Semantic-UI-React/docs/src/componentInfo") 139 | 140 | (gen-factories "/Users/danie/matter/source/Semantic-UI-React/docs/src/componentInfo")) 141 | 142 | 143 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/addons/confirm/ui_confirm.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.addons.confirm.ui-confirm 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Confirm" :as Confirm]))) 5 | 6 | (def ui-confirm 7 | "A Confirm modal gives the user a choice to confirm or cancel an action. 8 | 9 | Props: 10 | - cancelButton (custom): The cancel button text. 11 | - confirmButton (custom): The OK button text. 12 | - content (custom): The ModalContent text. 13 | - header (custom): The ModalHeader text. 14 | - onCancel (func): Called when the Modal is closed without clicking confirm. 15 | - onConfirm (func): Called when the OK button is clicked. 16 | - open (bool): Whether or not the modal is visible. 17 | - size (enum): A Confirm can vary in size (mini, tiny, small, large, fullscreen)" 18 | #?(:cljs (h/factory-apply Confirm))) 19 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/addons/pagination/ui_pagination.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.addons.pagination.ui-pagination 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Pagination" :as Pagination]))) 5 | 6 | (def ui-pagination 7 | "A component to render a pagination. 8 | 9 | Props: 10 | - activePage (number|string): Index of the currently active page. () 11 | - aria-label (string): A pagination item can have an aria label. 12 | - boundaryRange (number|string): Number of always visible pages at the beginning and end. () 13 | - defaultActivePage (number|string): Initial activePage value. () 14 | - disabled (bool): A pagination can be disabled. 15 | - ellipsisItem (custom): A shorthand for PaginationItem. 16 | - firstItem (custom): A shorthand for PaginationItem. 17 | - lastItem (custom): A shorthand for PaginationItem. 18 | - nextItem (custom): A shorthand for PaginationItem. 19 | - onPageChange (func): Called on change of an active page. 20 | - pageItem (custom): A shorthand for PaginationItem. 21 | - prevItem (custom): A shorthand for PaginationItem. 22 | - siblingRange (number|string): Number of always visible pages before and after the current one. () 23 | - totalPages (number|string): Total number of pages. ()" 24 | #?(:cljs (h/factory-apply Pagination))) 25 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/addons/pagination/ui_pagination_item.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.addons.pagination.ui-pagination-item 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$PaginationItem" :as PaginationItem]))) 5 | 6 | (def ui-pagination-item 7 | "An item of a pagination. 8 | 9 | Props: 10 | - active (bool): A pagination item can be active. 11 | - disabled (bool): A pagination item can be disabled. 12 | - onClick (func): Called on click. 13 | - onKeyDown (func): Called on key down. 14 | - type (enum): A pagination should have a type. (ellipsisItem, firstItem, prevItem, pageItem, nextItem, lastItem)" 15 | #?(:cljs (h/factory-apply PaginationItem))) 16 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/addons/portal/ui_portal.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.addons.portal.ui-portal 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Portal" :as Portal]))) 5 | 6 | (def ui-portal 7 | "A component that allows you to render children outside their parent. 8 | 9 | Props: 10 | - children (node): Primary content. 11 | - closeOnDocumentClick (bool): Controls whether or not the portal should close when the document is clicked. 12 | - closeOnEscape (bool): Controls whether or not the portal should close when escape is pressed is displayed. 13 | - closeOnPortalMouseLeave (bool): Controls whether or not the portal should close when mousing out of the portal. 14 | - closeOnTriggerBlur (bool): Controls whether or not the portal should close on blur of the trigger. 15 | - closeOnTriggerClick (bool): Controls whether or not the portal should close on click of the trigger. 16 | - closeOnTriggerMouseLeave (bool): Controls whether or not the portal should close when mousing out of the trigger. 17 | - defaultOpen (bool): Initial value of open. 18 | - eventPool (string): Event pool namespace that is used to handle component events 19 | - mountNode (any): The node where the portal should mount. 20 | - mouseEnterDelay (number): Milliseconds to wait before opening on mouse over 21 | - mouseLeaveDelay (number): Milliseconds to wait before closing on mouse leave 22 | - onClose (func): Called when a close event happens 23 | - onMount (func): Called when the portal is mounted on the DOM. 24 | - onOpen (func): Called when an open event happens 25 | - onUnmount (func): Called when the portal is unmounted from the DOM. 26 | - open (bool): Controls whether or not the portal is displayed. 27 | - openOnTriggerClick (bool): Controls whether or not the portal should open when the trigger is clicked. 28 | - openOnTriggerFocus (bool): Controls whether or not the portal should open on focus of the trigger. 29 | - openOnTriggerMouseEnter (bool): Controls whether or not the portal should open when mousing over the trigger. 30 | - trigger (node): Element to be rendered in-place where the portal is defined. 31 | - triggerRef (custom): Called with a ref to the trigger node." 32 | #?(:cljs (h/factory-apply Portal))) 33 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/addons/portal/ui_portal_inner.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.addons.portal.ui-portal-inner 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$PortalInner" :as PortalInner]))) 5 | 6 | (def ui-portal-inner 7 | "An inner component that allows you to render children outside their parent. 8 | 9 | Props: 10 | - children (node): Primary content. 11 | - innerRef (custom): Called with a ref to the inner node. 12 | - mountNode (any): The node where the portal should mount. 13 | - onMount (func): Called when the portal is mounted on the DOM 14 | - onUnmount (func): Called when the portal is unmounted from the DOM" 15 | #?(:cljs (h/factory-apply PortalInner))) 16 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/addons/radio/ui_radio.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.addons.radio.ui-radio 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Radio" :as Radio]))) 5 | 6 | (def ui-radio 7 | "A Radio is sugar for . 8 | Useful for exclusive groups of sliders or toggles. 9 | 10 | Props: 11 | - slider (custom): Format to emphasize the current selection state. 12 | - toggle (custom): Format to show an on or off choice. 13 | - type (custom): HTML input type, either checkbox or radio." 14 | #?(:cljs (h/factory-apply Radio))) 15 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/addons/select/ui_select.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.addons.select.ui-select 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Select" :as Select]))) 5 | 6 | (def ui-select 7 | "A Select is sugar for . 8 | 9 | Props: 10 | - options (arrayOf): Array of Dropdown.Item props e.g. `{ text: '', value: '' }` ([:name \"shape\"], [:value \"Dropdown.Item.propTypes\"], [:computed true])" 11 | #?(:cljs (h/factory-apply Select))) 12 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/addons/textarea/ui_text_area.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.addons.textarea.ui-text-area 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$TextArea" :as TextArea]))) 5 | 6 | (def ui-text-area 7 | "A TextArea can be used to allow for extended user input. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - onChange (func): Called on change. 12 | - onInput (func): Called on input. 13 | - rows (number|string): Indicates row count for a TextArea. () 14 | - value (number|string): The value of the textarea. ()" 15 | #?(:cljs (h/wrapped-factory-apply TextArea))) 16 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/addons/transitionableportal/ui_transitionable_portal.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.addons.transitionableportal.ui-transitionable-portal 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$TransitionablePortal" :as TransitionablePortal]))) 5 | 6 | (def ui-transitionable-portal 7 | "A sugar for `Portal` and `Transition`. 8 | 9 | Props: 10 | - children (node): Primary content. 11 | - onClose (func): Called when a close event happens. 12 | - onHide (func): Callback on each transition that changes visibility to hidden. 13 | - onOpen (func): Called when an open event happens. 14 | - onStart (func): Callback on animation start. 15 | - open (bool): Controls whether or not the portal is displayed. 16 | - transition (object): Transition props." 17 | #?(:cljs (h/factory-apply TransitionablePortal))) 18 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/behaviors/visibility/ui_visibility.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.behaviors.visibility.ui-visibility 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Visibility" :as Visibility]))) 5 | 6 | (def ui-visibility 7 | "Visibility provides a set of callbacks for when a content appears in the viewport. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - context (object): Context which visibility should attach onscroll events. 13 | - continuous (bool): When set to true a callback will occur anytime an element passes a condition not just immediately after the 14 | - fireOnMount (bool): Fires callbacks immediately after mount. 15 | - offset (number|string|arrayOf): Value that context should be adjusted in pixels. Useful for making content appear below content fixed to the () 16 | - onBottomPassed (func): Element's bottom edge has passed top of screen. 17 | - onBottomPassedReverse (func): Element's bottom edge has not passed top of screen. 18 | - onBottomVisible (func): Element's bottom edge has passed bottom of screen 19 | - onBottomVisibleReverse (func): Element's bottom edge has not passed bottom of screen. 20 | - onOffScreen (func): Element is not visible on the screen. 21 | - onOnScreen (func): Element is visible on the screen. 22 | - onPassed (object): Element is not visible on the screen. 23 | - onPassing (func): Any part of an element is visible on screen. 24 | - onPassingReverse (func): Element's top has not passed top of screen but bottom has. 25 | - onTopPassed (func): Element's top edge has passed top of the screen. 26 | - onTopPassedReverse (func): Element's top edge has not passed top of the screen. 27 | - onTopVisible (func): Element's top edge has passed bottom of screen. 28 | - onTopVisibleReverse (func): Element's top edge has not passed bottom of screen. 29 | - onUpdate (func): Element's top edge has passed bottom of screen. 30 | - once (bool): When set to false a callback will occur each time an element passes the threshold for a condition. 31 | - updateOn (enum): Allows to choose the mode of the position calculations: (events, repaint)" 32 | #?(:cljs (h/factory-apply Visibility))) 33 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/breadcrumb/ui_breadcrumb.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.breadcrumb.ui-breadcrumb 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Breadcrumb" :as Breadcrumb]))) 5 | 6 | (def ui-breadcrumb 7 | "A breadcrumb is used to show hierarchy between content. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - divider (custom): Shorthand for primary content of the Breadcrumb.Divider. () 14 | - icon (custom): For use with the sections prop. Render as an `Icon` component with `divider` class instead of a `div` in () 15 | - sections (custom): Shorthand array of props for Breadcrumb.Section. 16 | - size (enum): Size of Breadcrumb. (mini, tiny, small, large, big, huge, massive)" 17 | #?(:cljs (h/factory-apply Breadcrumb))) 18 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/breadcrumb/ui_breadcrumb_divider.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.breadcrumb.ui-breadcrumb-divider 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$BreadcrumbDivider" :as BreadcrumbDivider]))) 5 | 6 | (def ui-breadcrumb-divider 7 | "A divider sub-component for Breadcrumb component. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - content (custom): Shorthand for primary content. 14 | - icon (custom): Render as an `Icon` component with `divider` class instead of a `div`." 15 | #?(:cljs (h/factory-apply BreadcrumbDivider))) 16 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/breadcrumb/ui_breadcrumb_section.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.breadcrumb.ui-breadcrumb-section 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$BreadcrumbSection" :as BreadcrumbSection]))) 5 | 6 | (def ui-breadcrumb-section 7 | "A section sub-component for Breadcrumb component. 8 | 9 | Props: 10 | - active (bool): Style as the currently active section. 11 | - as (elementType): An element type to render as (string or function). 12 | - children (node): Primary content. 13 | - className (string): Additional classes. 14 | - content (custom): Shorthand for primary content. 15 | - href (string): Render as an `a` tag instead of a `div` and adds the href attribute. () 16 | - link (bool): Render as an `a` tag instead of a `div`. () 17 | - onClick (func): Called on click. When passed, the component will render as an `a`" 18 | #?(:cljs (h/factory-apply BreadcrumbSection))) 19 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Form" :as Form]))) 5 | 6 | (def ui-form 7 | "A Form displays a set of related user input fields in a structured way. 8 | 9 | Props: 10 | - action (string): The HTML form action 11 | - as (elementType): An element type to render as (string or function). 12 | - children (node): Primary content. 13 | - className (string): Additional classes. 14 | - error (bool): Automatically show any error Message children. 15 | - inverted (bool): A form can have its color inverted for contrast. 16 | - loading (bool): Automatically show a loading indicator. 17 | - onSubmit (func): The HTML form submit handler. 18 | - reply (bool): A comment can contain a form to reply to a comment. This may have arbitrary content. 19 | - size (enum): A form can vary in size. (mini, tiny, small, large, big, huge, massive) 20 | - success (bool): Automatically show any success Message children. 21 | - unstackable (bool): A form can prevent itself from stacking on mobile. 22 | - warning (bool): Automatically show any warning Message children. 23 | - widths (enum): Forms can automatically divide fields to be equal width. (equal)" 24 | #?(:cljs (h/factory-apply Form))) 25 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form_button.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form-button 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$FormButton" :as FormButton]))) 5 | 6 | (def ui-form-button 7 | "Sugar for . 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - control (custom): A FormField control prop." 12 | #?(:cljs (h/factory-apply FormButton))) 13 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form_checkbox.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form-checkbox 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$FormCheckbox" :as FormCheckbox]))) 5 | 6 | (def ui-form-checkbox 7 | "Sugar for . 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - control (custom): A FormField control prop." 12 | #?(:cljs (h/factory-apply FormCheckbox))) 13 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form_dropdown.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form-dropdown 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$FormDropdown" :as FormDropdown]))) 5 | 6 | (def ui-form-dropdown 7 | "Sugar for . 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - control (custom): A FormField control prop." 12 | #?(:cljs (h/factory-apply FormDropdown))) 13 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form_field.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form-field 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$FormField" :as FormField]))) 5 | 6 | (def ui-form-field 7 | "A field is a form element containing a label and an input. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - content (custom): Shorthand for primary content. 14 | - control (elementType|enum): A form control component (i.e. Dropdown) or HTML tagName (i.e. 'input'). (button, input, select, textarea) 15 | - disabled (bool): Individual fields may be disabled. 16 | - error (bool|custom): Individual fields may display an error state along with a message. () 17 | - id (string): The id of the control 18 | - inline (bool): A field can have its label next to instead of above it. 19 | - label (node|object): Mutually exclusive with children. () 20 | - required (bool): A field can show that input is mandatory. 21 | - type (): Passed to the control component (i.e. ) () 22 | - width (enum): A field can specify its width in grid columns (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen)" 23 | #?(:cljs (h/factory-apply FormField))) 24 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form_group.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form-group 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$FormGroup" :as FormGroup]))) 5 | 6 | (def ui-form-group 7 | "A set of fields can appear grouped together. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - grouped (bool): Fields can show related choices. () 14 | - inline (bool): Multiple fields may be inline in a row. () 15 | - unstackable (bool): A form group can prevent itself from stacking on mobile. 16 | - widths (enum): Fields Groups can specify their width in grid columns or automatically divide fields to be equal width. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, equal)" 17 | #?(:cljs (h/factory-apply FormGroup))) 18 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form_input.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form-input 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$FormInput" :as FormInput]))) 5 | 6 | (def ui-form-input 7 | "Sugar for . 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - control (custom): A FormField control prop." 12 | #?(:cljs (h/wrapped-factory-apply FormInput))) 13 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form_radio.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form-radio 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$FormRadio" :as FormRadio]))) 5 | 6 | (def ui-form-radio 7 | "Sugar for . 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - control (custom): A FormField control prop." 12 | #?(:cljs (h/factory-apply FormRadio))) 13 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form_select.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form-select 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$FormSelect" :as FormSelect]))) 5 | 6 | (def ui-form-select 7 | "Sugar for . 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - control (custom): A FormField control prop. 12 | - options (arrayOf): Array of Dropdown.Item props e.g. `{ text: '', value: '' }` ([:name \"shape\"], [:value \"Dropdown.Item.propTypes\"], [:computed true])" 13 | #?(:cljs (h/factory-apply FormSelect))) 14 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/form/ui_form_text_area.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.form.ui-form-text-area 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$FormTextArea" :as FormTextArea]))) 5 | 6 | (def ui-form-text-area 7 | "Sugar for . 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - control (custom): A FormField control prop." 12 | #?(:cljs (h/factory-apply FormTextArea))) 13 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/grid/ui_grid.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.grid.ui-grid 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Grid" :as Grid]))) 5 | 6 | (def ui-grid 7 | "A grid is used to harmonize negative space in a layout. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - celled (bool|enum): A grid can have rows divided into cells. (internally) 12 | - centered (bool): A grid can have its columns centered. 13 | - children (node): Primary content. 14 | - className (string): Additional classes. 15 | - columns (enum): Represents column count per row in Grid. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, equal) 16 | - container (bool): A grid can be combined with a container to use the available layout and alignment. 17 | - divided (bool|enum): A grid can have dividers between its columns. (vertically) 18 | - doubling (bool): A grid can double its column width on tablet and mobile sizes. 19 | - inverted (bool): A grid's colors can be inverted. 20 | - padded (bool|enum): A grid can preserve its vertical and horizontal gutters on first and last columns. (horizontally, vertically) 21 | - relaxed (bool|enum): A grid can increase its gutters to allow for more negative space. (very) 22 | - reversed (custom): A grid can specify that its columns should reverse order at different device sizes. 23 | - stackable (bool): A grid can have its columns stack on-top of each other after reaching mobile breakpoints. 24 | - stretched (bool): A grid can stretch its contents to take up the entire grid height. 25 | - textAlign (enum): A grid can specify its text alignment. (left, center, right, justified) 26 | - verticalAlign (enum): A grid can specify its vertical alignment to have all its columns vertically centered. (bottom, middle, top)" 27 | #?(:cljs (h/factory-apply Grid))) 28 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/grid/ui_grid_column.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.grid.ui-grid-column 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$GridColumn" :as GridColumn]))) 5 | 6 | (def ui-grid-column 7 | "A column sub-component for Grid. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - color (enum): A grid column can be colored. (red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black) 14 | - computer (enum): A column can specify a width for a computer. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen) 15 | - floated (enum): A column can sit flush against the left or right edge of a row. (left, right) 16 | - largeScreen (enum): A column can specify a width for a large screen device. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen) 17 | - mobile (enum): A column can specify a width for a mobile device. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen) 18 | - only (custom): A column can appear only for a specific device, or screen sizes. 19 | - stretched (bool): A column can stretch its contents to take up the entire grid or row height. 20 | - tablet (enum): A column can specify a width for a tablet device. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen) 21 | - textAlign (enum): A column can specify its text alignment. (left, center, right, justified) 22 | - verticalAlign (enum): A column can specify its vertical alignment to have all its columns vertically centered. (bottom, middle, top) 23 | - widescreen (enum): A column can specify a width for a wide screen device. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen) 24 | - width (enum): Represents width of column. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen)" 25 | #?(:cljs (h/factory-apply GridColumn))) 26 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/grid/ui_grid_row.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.grid.ui-grid-row 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$GridRow" :as GridRow]))) 5 | 6 | (def ui-grid-row 7 | "A row sub-component for Grid. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - centered (bool): A row can have its columns centered. 12 | - children (node): Primary content. 13 | - className (string): Additional classes. 14 | - color (enum): A grid row can be colored. (red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black) 15 | - columns (enum): Represents column count per line in Row. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, equal) 16 | - divided (bool): A row can have dividers between its columns. 17 | - only (custom): A row can appear only for a specific device, or screen sizes. 18 | - reversed (custom): A row can specify that its columns should reverse order at different device sizes. 19 | - stretched (bool): A row can stretch its contents to take up the entire column height. 20 | - textAlign (enum): A row can specify its text alignment. (left, center, right, justified) 21 | - verticalAlign (enum): A row can specify its vertical alignment to have all its columns vertically centered. (bottom, middle, top)" 22 | #?(:cljs (h/factory-apply GridRow))) 23 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/menu/ui_menu.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.menu.ui-menu 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Menu" :as Menu]))) 5 | 6 | (def ui-menu 7 | "A menu displays grouped navigation actions. 8 | 9 | Props: 10 | - activeIndex (number|string): Index of the currently active item. () 11 | - as (elementType): An element type to render as (string or function). 12 | - attached (bool|enum): A menu may be attached to other content segments. (top, bottom) 13 | - borderless (bool): A menu item or menu can have no borders. 14 | - children (node): Primary content. 15 | - className (string): Additional classes. 16 | - color (enum): Additional colors can be specified. (red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black) 17 | - compact (bool): A menu can take up only the space necessary to fit its content. 18 | - defaultActiveIndex (number|string): Initial activeIndex value. () 19 | - fixed (enum): A menu can be fixed to a side of its context. (left, right, bottom, top) 20 | - floated (bool|enum): A menu can be floated. (right) 21 | - fluid (bool): A vertical menu may take the size of its container. 22 | - icon (bool|enum): A menu may have just icons (bool) or labeled icons. (labeled) 23 | - inverted (bool): A menu may have its colors inverted to show greater contrast. 24 | - items (custom): Shorthand array of props for Menu. 25 | - onItemClick (func): onClick handler for MenuItem. Mutually exclusive with children. () 26 | - pagination (bool): A pagination menu is specially formatted to present links to pages of content. 27 | - pointing (bool): A menu can point to show its relationship to nearby content. 28 | - secondary (bool): A menu can adjust its appearance to de-emphasize its contents. 29 | - size (enum): A menu can vary in size. (mini, tiny, small, large, huge, massive) 30 | - stackable (bool): A menu can stack at mobile resolutions. 31 | - tabular (bool|enum): A menu can be formatted to show tabs of information. (right) 32 | - text (bool): A menu can be formatted for text content. 33 | - vertical (bool): A vertical menu displays elements vertically. 34 | - widths (enum): A menu can have its items divided evenly. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen)" 35 | #?(:cljs (h/factory-apply Menu))) 36 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/menu/ui_menu_header.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.menu.ui-menu-header 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$MenuHeader" :as MenuHeader]))) 5 | 6 | (def ui-menu-header 7 | "A menu item may include a header or may itself be a header. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - content (custom): Shorthand for primary content." 14 | #?(:cljs (h/factory-apply MenuHeader))) 15 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/menu/ui_menu_item.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.menu.ui-menu-item 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$MenuItem" :as MenuItem]))) 5 | 6 | (def ui-menu-item 7 | "A menu can contain an item. 8 | 9 | Props: 10 | - active (bool): A menu item can be active. 11 | - as (elementType): An element type to render as (string or function). 12 | - children (node): Primary content. 13 | - className (string): Additional classes. 14 | - color (enum): Additional colors can be specified. (red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black) 15 | - content (custom): Shorthand for primary content. 16 | - disabled (bool): A menu item can be disabled. 17 | - fitted (bool|enum): A menu item or menu can remove element padding, vertically or horizontally. (horizontally, vertically) 18 | - header (bool): A menu item may include a header or may itself be a header. 19 | - icon (bool|custom): MenuItem can be only icon. () 20 | - index (number): MenuItem index inside Menu. 21 | - link (bool): A menu item can be link. 22 | - name (string): Internal name of the MenuItem. 23 | - onClick (func): Called on click. When passed, the component will render as an `a` 24 | - position (enum): A menu item can take left or right position. (left, right)" 25 | #?(:cljs (h/factory-apply MenuItem))) 26 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/menu/ui_menu_menu.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.menu.ui-menu-menu 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$MenuMenu" :as MenuMenu]))) 5 | 6 | (def ui-menu-menu 7 | "A menu can contain a sub menu. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - content (custom): Shorthand for primary content. 14 | - position (enum): A sub menu can take left or right position. (left, right)" 15 | #?(:cljs (h/factory-apply MenuMenu))) 16 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/message/ui_message.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.message.ui-message 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Message" :as Message]))) 5 | 6 | (def ui-message 7 | "A message displays information that explains nearby content. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - attached (bool|enum): A message can be formatted to attach itself to other content. (bottom, top) 12 | - children (node): Primary content. 13 | - className (string): Additional classes. 14 | - color (enum): A message can be formatted to be different colors. (red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black) 15 | - compact (bool): A message can only take up the width of its content. 16 | - content (custom): Shorthand for primary content. 17 | - error (bool): A message may be formatted to display a negative message. Same as `negative`. 18 | - floating (bool): A message can float above content that it is related to. 19 | - header (custom): Shorthand for MessageHeader. 20 | - hidden (bool): A message can be hidden. 21 | - icon (custom|bool): A message can contain an icon. () 22 | - info (bool): A message may be formatted to display information. 23 | - list (custom): Array shorthand items for the MessageList. Mutually exclusive with children. 24 | - negative (bool): A message may be formatted to display a negative message. Same as `error`. 25 | - onDismiss (func): A message that the user can choose to hide. 26 | - positive (bool): A message may be formatted to display a positive message. Same as `success`. 27 | - size (enum): A message can have different sizes. (mini, tiny, small, large, big, huge, massive) 28 | - success (bool): A message may be formatted to display a positive message. Same as `positive`. 29 | - visible (bool): A message can be set to visible to force itself to be shown. 30 | - warning (bool): A message may be formatted to display warning messages." 31 | #?(:cljs (h/factory-apply Message))) 32 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/message/ui_message_content.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.message.ui-message-content 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$MessageContent" :as MessageContent]))) 5 | 6 | (def ui-message-content 7 | "A message can contain a content. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - content (custom): Shorthand for primary content." 14 | #?(:cljs (h/factory-apply MessageContent))) 15 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/message/ui_message_header.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.message.ui-message-header 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$MessageHeader" :as MessageHeader]))) 5 | 6 | (def ui-message-header 7 | "A message can contain a header. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - content (custom): Shorthand for primary content." 14 | #?(:cljs (h/factory-apply MessageHeader))) 15 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/message/ui_message_item.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.message.ui-message-item 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$MessageItem" :as MessageItem]))) 5 | 6 | (def ui-message-item 7 | "A message list can contain an item. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - content (custom): Shorthand for primary content." 14 | #?(:cljs (h/factory-apply MessageItem))) 15 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/message/ui_message_list.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.message.ui-message-list 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$MessageList" :as MessageList]))) 5 | 6 | (def ui-message-list 7 | "A message can contain a list of items. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - items (custom): Shorthand Message.Items." 14 | #?(:cljs (h/factory-apply MessageList))) 15 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/table/ui_table.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.table.ui-table 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Table" :as Table]))) 5 | 6 | (def ui-table 7 | "A table displays a collections of data grouped into rows. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - attached (bool|enum): Attach table to other content (top, bottom) 12 | - basic (enum|bool): A table can reduce its complexity to increase readability. (very) 13 | - celled (bool): A table may be divided into individual cells. 14 | - children (node): Primary content. 15 | - className (string): Additional classes. 16 | - collapsing (bool): A table can be collapsing, taking up only as much space as its rows. 17 | - color (enum): A table can be given a color to distinguish it from other tables. (red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black) 18 | - columns (enum): A table can specify its column count to divide its content evenly. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen) 19 | - compact (bool|enum): A table may sometimes need to be more compact to make more rows visible at a time. (very) 20 | - definition (bool): A table may be formatted to emphasize a first column that defines a rows content. 21 | - fixed (bool): A table can use fixed a special faster form of table rendering that does not resize table cells based on content 22 | - footerRow (custom): Shorthand for a TableRow to be placed within Table.Footer. 23 | - headerRow (custom): Shorthand for a TableRow to be placed within Table.Header. () 24 | - headerRows (custom): Shorthand for multiple TableRows to be placed within Table.Header. () 25 | - inverted (bool): A table's colors can be inverted. 26 | - padded (bool|enum): A table may sometimes need to be more padded for legibility. (very) 27 | - renderBodyRow (func): Mapped over `tableData` and should return shorthand for each Table.Row to be placed within Table.Body. () 28 | - selectable (bool): A table can have its rows appear selectable. 29 | - singleLine (bool): A table can specify that its cell contents should remain on a single line and not wrap. 30 | - size (enum): A table can also be small or large. (small, large) 31 | - sortable (bool): A table may allow a user to sort contents by clicking on a table header. 32 | - stackable (bool): A table can specify how it stacks table content responsively. 33 | - striped (bool): A table can stripe alternate rows of content with a darker color to increase contrast. 34 | - structured (bool): A table can be formatted to display complex structured data. 35 | - tableData (array): Data to be passed to the renderBodyRow function. () 36 | - textAlign (enum): A table can adjust its text alignment. (left, center, right) 37 | - unstackable (bool): A table can specify how it stacks table content responsively. 38 | - verticalAlign (enum): A table can adjust its text alignment. (bottom, middle, top)" 39 | #?(:cljs (h/factory-apply Table))) 40 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/table/ui_table_body.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.table.ui-table-body 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$TableBody" :as TableBody]))) 5 | 6 | (def ui-table-body 7 | " 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes." 13 | #?(:cljs (h/factory-apply TableBody))) 14 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/table/ui_table_cell.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.table.ui-table-cell 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$TableCell" :as TableCell]))) 5 | 6 | (def ui-table-cell 7 | "A table row can have cells. 8 | 9 | Props: 10 | - active (bool): A cell can be active or selected by a user. 11 | - as (elementType): An element type to render as (string or function). 12 | - children (node): Primary content. 13 | - className (string): Additional classes. 14 | - collapsing (bool): A cell can be collapsing so that it only uses as much space as required. 15 | - content (custom): Shorthand for primary content. 16 | - disabled (bool): A cell can be disabled. 17 | - error (bool): A cell may call attention to an error or a negative value. 18 | - icon (custom): Add an Icon by name, props object, or pass an 19 | - negative (bool): A cell may let a user know whether a value is bad. 20 | - positive (bool): A cell may let a user know whether a value is good. 21 | - selectable (bool): A cell can be selectable. 22 | - singleLine (bool): A cell can specify that its contents should remain on a single line and not wrap. 23 | - textAlign (enum): A table cell can adjust its text alignment. (left, center, right) 24 | - verticalAlign (enum): A table cell can adjust its text alignment. (bottom, middle, top) 25 | - warning (bool): A cell may warn a user. 26 | - width (enum): A table can specify the width of individual columns independently. (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen)" 27 | #?(:cljs (h/factory-apply TableCell))) 28 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/table/ui_table_footer.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.table.ui-table-footer 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$TableFooter" :as TableFooter]))) 5 | 6 | (def ui-table-footer 7 | "A table can have a footer. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function)." 11 | #?(:cljs (h/factory-apply TableFooter))) 12 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/table/ui_table_header.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.table.ui-table-header 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$TableHeader" :as TableHeader]))) 5 | 6 | (def ui-table-header 7 | "A table can have a header. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - children (node): Primary content. 12 | - className (string): Additional classes. 13 | - content (custom): Shorthand for primary content. 14 | - fullWidth (bool): A definition table can have a full width header or footer, filling in the gap left by the first column." 15 | #?(:cljs (h/factory-apply TableHeader))) 16 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/table/ui_table_header_cell.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.table.ui-table-header-cell 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$TableHeaderCell" :as TableHeaderCell]))) 5 | 6 | (def ui-table-header-cell 7 | "A table can have a header cell. 8 | 9 | Props: 10 | - as (elementType): An element type to render as (string or function). 11 | - className (string): Additional classes. 12 | - sorted (enum): A header cell can be sorted in ascending or descending order. (ascending, descending)" 13 | #?(:cljs (h/factory-apply TableHeaderCell))) 14 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/collections/table/ui_table_row.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.collections.table.ui-table-row 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$TableRow" :as TableRow]))) 5 | 6 | (def ui-table-row 7 | "A table can have rows. 8 | 9 | Props: 10 | - active (bool): A row can be active or selected by a user. 11 | - as (elementType): An element type to render as (string or function). 12 | - cellAs (elementType): An element type to render as (string or function). 13 | - cells (custom): Shorthand array of props for TableCell. 14 | - children (node): Primary content. 15 | - className (string): Additional classes. 16 | - disabled (bool): A row can be disabled. 17 | - error (bool): A row may call attention to an error or a negative value. 18 | - negative (bool): A row may let a user know whether a value is bad. 19 | - positive (bool): A row may let a user know whether a value is good. 20 | - textAlign (enum): A table row can adjust its text alignment. (left, center, right) 21 | - verticalAlign (enum): A table row can adjust its vertical alignment. (bottom, middle, top) 22 | - warning (bool): A row may warn a user." 23 | #?(:cljs (h/factory-apply TableRow))) 24 | -------------------------------------------------------------------------------- /src/main/com/fulcrologic/semantic_ui/elements/button/ui_button.cljc: -------------------------------------------------------------------------------- 1 | (ns com.fulcrologic.semantic-ui.elements.button.ui-button 2 | (:require 3 | [com.fulcrologic.semantic-ui.factory-helpers :as h] 4 | #?(:cljs ["semantic-ui-react$Button" :as Button]))) 5 | 6 | (def ui-button 7 | "A Button indicates a possible user action. 8 | 9 | Props: 10 | - active (bool): A button can show it is currently the active user selection. 11 | - animated (bool|enum): A button can animate to show hidden content. (fade, vertical) 12 | - as (elementType): An element type to render as (string or function). 13 | - attached (bool|enum): A button can be attached to other content. (left, right, top, bottom) 14 | - basic (bool): A basic button is less pronounced. 15 | - children (node): Primary content. () 16 | - circular (bool): A button can be circular. 17 | - className (string): Additional classes. 18 | - color (enum): A button can have different colors (red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black, facebook, google plus, instagram, linkedin, twitter, vk, youtube) 19 | - compact (bool): A button can reduce its padding to fit into tighter spaces. 20 | - content (custom): Shorthand for primary content. 21 | - disabled (bool): A button can show it is currently unable to be interacted with. 22 | - floated (enum): A button can be aligned to the left or right of its container. (left, right) 23 | - fluid (bool): A button can take the width of its container. 24 | - icon (bool|string|object|element): Add an Icon by name, props object, or pass an . () 25 | - inverted (bool): A button can be formatted to appear on dark backgrounds. 26 | - label (string|object|element): Add a Label by text, props object, or pass a