Merge branch 'main' into details-css

.github/workflows/ExportPluto.yml

@@ -11,7 +11,7 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - name: Checkout
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
 
             - name: Install Julia

.github/workflows/Test.yml

@@ -23,7 +23,7 @@ jobs:
 
         steps:
             # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
 
             - uses: julia-actions/setup-julia@v1
               with:

Project.toml

@@ -1,7 +1,7 @@
 name = "PlutoUI"
 uuid = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
 authors = ["Fons van der Plas <[email protected]>"]
-version = "0.7.56"
+version = "0.7.60"
 
 [deps]
 AbstractPlutoDingetjes = "6e696c72-6542-2067-7265-42206c756150"

src/Builtins.jl

@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.19.32
+# v0.19.38
 
 using Markdown
 using InteractiveUtils
@@ -667,7 +667,7 @@ begin
 	Base.get(select::Select) = ismissing(select.default) ? first(select.options).first : select.default
 	Bonds.initial_value(select::Select) = ismissing(select.default) ? first(select.options).first : select.default
 
-	Bonds.possible_values(select::Select) = (string(i) for i in 1:length(select.options))
+	Bonds.possible_values(select::Select) = ("puiselect-$(i)" for i in 1:length(select.options))
 
 	function Bonds.transform_value(select::Select, val_from_js)
 		if startswith(val_from_js, "puiselect-")

src/Confirm.jl

@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.19.12
+# v0.19.38
 
 using Markdown
 using InteractiveUtils
@@ -114,16 +114,18 @@ begin
 	Base.@kwdef struct ConfirmBond
 		element::Any
 		secret_key::String=String(rand('a':'z', 10))
+		label::Union{String, Nothing}=nothing
 	end
 
 	function Base.show(io::IO, m::MIME"text/html", cb::ConfirmBond)
 		if !AbstractPlutoDingetjes.is_supported_by_display(io, Bonds.transform_value)
 			return Base.show(io, m, HTML("<span>❌ You need to update Pluto to use this PlutoUI element.</span>"))
 		end
 		output = @htl(
-			"""<span style='display: contents;'>$(
-				cb.element
-			)<input type=submit id=$(cb.secret_key)><script id=$(cb.secret_key)>
+			"""<span style='display: contents;'>
+			$(cb.element)
+			<input type=submit $((id=cb.secret_key, value=cb.label))>
+			<script id=$(cb.secret_key)>
 		
 		let key = $(cb.secret_key)
 		
@@ -210,7 +212,7 @@ end
 # ╔═╡ a20da18f-7a74-43ca-9b66-1f3b82efa0c3
 """
 ```julia
-confirm(element::Any)
+confirm(element::Any; label::Union{String, Nothing}=nothing)
 ```
 
 Normally, when you move a [`Slider`](@ref) or type in a [`TextField`](@ref), all intermediate values are sent back to `@bind`.
@@ -219,6 +221,8 @@ By wrapping an input element in `confirm`, you get a button to manually control
 
 One case where this is useful is a notebook that does a long computation based on a `@bind` input.
 
+`label` specifies a custom label for the confirm button.
+
 # Examples
 
 ```julia
@@ -258,9 +262,10 @@ You can combine this with [`PlutoUI.combine`](@ref)!
 > ![screenshot of running the code above in pluto](https://user-images.githubusercontent.com/6933510/145614965-7a1e8630-4766-4589-8a84-b022bdfb09fc.gif)
 
 """
-function confirm(element::Any)
+function confirm(element::Any; label::Union{String, Nothing}=nothing)
 	ConfirmBond(;
 		element=element,
+		label=label,
 	)
 end
 
@@ -291,7 +296,7 @@ x(234)
 # ╔═╡ fc92b3fc-6143-477c-a413-84dcd1b4cfc0
 # ╠═╡ skip_as_script = true
 #=╠═╡
-@bind t confirm(html"<input>")
+@bind t confirm(html"<input>"; label="Submit your text")
   ╠═╡ =#
 
 # ╔═╡ 363a65ec-218c-43a2-b740-8061fac25011

src/Details.jl

@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.19.38
+# v0.19.40
 
 using Markdown
 using InteractiveUtils
@@ -45,6 +45,18 @@ plutoui-detail {
 plutoui-detail:last-child {
 	margin-block-end: 0;
 }
+
+pluto-output div.summary-title-outer {
+	display: inline-flex;
+	vertical-align: text-top;
+	width: calc(100% - 1em);
+	margin-left: -1em;
+	padding-left: 1em;
+}
+
+pluto-output div.summary-title-outer > div.summary-title-inner {
+	display: inline-block;
+}
 </style>
 """)
 
@@ -53,13 +65,24 @@ const Iterable = Union{AbstractVector, Tuple, Base.Generator}
 
 # ╔═╡ 46521e2b-ea06-491a-9842-13dff7dc8299
 begin
-	embed_detail(x) = isdefined(Main, :PlutoRunner) && isdefined(Main.PlutoRunner, :embed_display) ? Main.PlutoRunner.embed_display(x) : x
-	embed_detail(x::AbstractString) = x
+	embed_summary(summary) = @htl("""
+		<div class='summary-title-outer'>
+			<div class='summary-title-inner'>
+				$(summary)
+			</div>
+		</div>
+		""")
+	embed_summary(summary::AbstractString) = summary
+
+	embed_detail(detail) = isdefined(Main, :PlutoRunner) && isdefined(Main.PlutoRunner, :embed_display) ?
+		Main.PlutoRunner.embed_display(detail) :
+		detail
+	embed_detail(detail::AbstractString) = detail
 
-	function details(summary::AbstractString, contents::Iterable; open::Bool=false)
+	function details(summary, contents::Iterable; open::Bool=false)
 		@htl("""
 		<details $(open ? (open=true,) : nothing)>
-			<summary>$(summary)</summary>
+			<summary>$(embed_summary(summary))</summary>
 			<div class="details-content">
 				$(Iterators.map(contents) do detail
 					@htl("<plutoui-detail>$(embed_detail(detail))</plutoui-detail>")
@@ -71,11 +94,11 @@ begin
 	end
 
 	# Convenience function for when you just provide a single detail
-	details(summary::AbstractString, contents; open::Bool=false) = details(summary, (contents,); open)
+	details(summary, contents; open::Bool=false) = details(summary, (contents,); open)
 
 	"""
 	```julia
-	details(summary::AbstractString, contents; open::Bool=false)
+	details(summary, contents; open::Bool=false)
 	```
 	
 	Create a collapsable details disclosure element (`<details>`).
@@ -84,7 +107,7 @@ begin
 	
 	# Arguments
 	
-	- `summary::AbstractString`: the always visible summary of the details element.
+	- `summary::Any`: the always visible summary of the details element.
 	- `contents::Any`: the item(s) to nest within the details element.
 	
 	# Keyword arguments
@@ -131,20 +154,19 @@ end
 #=╠═╡
 begin
 	my_details = details(
-		"I'm going to take over the world! Would you like to know more?", 
+		htl"I'm going to take over <u>the world!</u> Would you like to know more?", 
 		[
-			"I'm going to start small",
-			"I'm going to start small",
-			"I'm going to start small",
-			md"#### But don't mark me down just yet!",
+			htl"<small>I'm going to start small</small>",
+			"But not too small, mind you",
+			htl"<big>Don't mark me down!</big>", # Even funnier now that this isn't md
 			md"""
-			Here are my steps for world domination! 🌍
+			## Here are my steps for world domination! 🌍
 			- Perfect my **evil laugh** 🦹
 			- Create **_Laser (Pointer) of Doom_™** ⚡
 			- Train **ninja cats** 🥷🐈
 			- Build **volcanic lair** 🌋
 			""",
-			@htl("<p>Fantastic!</p>"),
+			@htl("<p style='font-variant: small-caps'>fantastic!</p>"),
 			["Cat", "Laser (Pointer)", "Volcano"],
 			Dict(
 				:cat => "Fluffy",
@@ -165,19 +187,25 @@ end
 # ╔═╡ b8434c11-2bb5-47ba-8562-e1176cba0af7
 # ╠═╡ skip_as_script = true
 #=╠═╡
-details("hello", "asdf")
+details("# Hello!", "**How are you?**")
   ╠═╡ =#
 
 # ╔═╡ f833a0bf-f7f7-417d-8cd9-5f93a90aecf6
 # ╠═╡ skip_as_script = true
 #=╠═╡
-details("hello", "asdf"; open=true)
+details("# Hello!", "**How are you?**"; open=true)
   ╠═╡ =#
 
 # ╔═╡ ef3ebb39-03ce-407b-9796-cae10d88f4a0
 # ╠═╡ skip_as_script = true
 #=╠═╡
-details("hello", md"asdf"; open=true)
+details(md"# Hello!", md"**How are you?**"; open=true)
+  ╠═╡ =#
+
+# ╔═╡ 2f3bc9f1-3055-465a-8a29-792969279e06
+# ╠═╡ skip_as_script = true
+#=╠═╡
+details(htl"<h1>Hello!</h1>", md"**How are you?**"; open=true)
   ╠═╡ =#
 
 # ╔═╡ b7349133-2590-415c-9a11-15c85e897a5c
@@ -204,21 +232,56 @@ my_var
 feeling
   ╠═╡ =#
 
+# ╔═╡ ffb735cd-a98e-4e98-909e-4d7e9f2dec5e
+# ╠═╡ skip_as_script = true
+#=╠═╡
+begin
+	bad_summary = Dict(
+		:a => "A",
+		:b => "B",
+	)
+	details(bad_summary, "Why have you done this?"; open=true)
+end
+  ╠═╡ =#
+
+# ╔═╡ f18bf0a3-e59b-45d4-b8b1-5404145db44e
+# ╠═╡ skip_as_script = true
+#=╠═╡
+details(md"This is a very long markdown summary to make sure everything is hunky-dory :)", "arst"; open=true)
+  ╠═╡ =#
+
 # ╔═╡ 5d28fa36-49dc-4d0f-a1c3-3fc2a5efdd0a
 export details
 
+# ╔═╡ 1a6003f5-0157-43cb-9316-bbdf9fccb438
+# ╠═╡ skip_as_script = true
+#=╠═╡
+details(md"_I'm_ **going** _to_ **take** _over_ **the world!** _Would_ **you** _like_ **to** _know_ **more?** _Let's_ **make** _this_ **even** _longer_ **to** _check_ **how** _everything_ **wraps.**", "arst", open=true)
+  ╠═╡ =#
+
+# ╔═╡ 0bc0b59e-a84f-465a-9397-9d81db09a3b6
+# ╠═╡ skip_as_script = true
+#=╠═╡
+details(htl"<em>I'm</em> <b>going</b> <em>to</em> <b>take</b> <em>over</em> <b>the world!</b> <em>Would</em> <b>you</b> <em>like</em> <b>to</b> <em>know</em> <b>more?</b> <em>Let's</em> <b>make</b> <em>this</em> <b>even</b> <em>longer</em> <b>to</b> <em>check</em> <b>how</b> <em>everything</em> <b>wraps.</b>", "arst", open=true)
+  ╠═╡ =#
+
 # ╔═╡ Cell order:
 # ╠═81f5b495-76c4-4c54-93ab-b49c5ecb810a
 # ╠═b7b18a54-afd7-4467-83ed-cc4f07c321fb
 # ╠═da0fb772-9a70-4616-a540-5770a8d48476
 # ╠═b8434c11-2bb5-47ba-8562-e1176cba0af7
 # ╠═f833a0bf-f7f7-417d-8cd9-5f93a90aecf6
 # ╠═ef3ebb39-03ce-407b-9796-cae10d88f4a0
+# ╠═2f3bc9f1-3055-465a-8a29-792969279e06
 # ╠═b3732e34-d331-4dd2-b4fb-11b2f397d7c1
 # ╠═b7349133-2590-415c-9a11-15c85e897a5c
 # ╠═a5663932-9a19-4d6d-9b20-d6fefac8cf9d
 # ╠═cd2bcfa2-5759-40d6-9358-3e7e605c5bc2
+# ╠═ffb735cd-a98e-4e98-909e-4d7e9f2dec5e
+# ╠═f18bf0a3-e59b-45d4-b8b1-5404145db44e
 # ╠═5d28fa36-49dc-4d0f-a1c3-3fc2a5efdd0a
 # ╠═13e81634-3b72-4b1d-a89b-36d184698d21
+# ╠═1a6003f5-0157-43cb-9316-bbdf9fccb438
+# ╠═0bc0b59e-a84f-465a-9397-9d81db09a3b6
 # ╟─df840588-23bd-4b03-b5ab-ef273052d198
 # ╠═46521e2b-ea06-491a-9842-13dff7dc8299

src/PlutoUI.jl

@@ -79,5 +79,6 @@ end
 
 
 include("./ScrubbableMatrix.jl")
+include("./bindname.jl")
 
 end

src/TableOfContents.jl

@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.19.37
+# v0.19.41
 
 using Markdown
 using InteractiveUtils
@@ -278,11 +278,14 @@ const bodyClassObserver = new MutationObserver(updateCallback)
 bodyClassObserver.observe(document.body, {attributeFilter: ["class"]})
 
 // Hide/show the ToC when the screen gets small
-let m = matchMedia("(max-width: 1000px)")
 let match_listener = () => 
-	tocNode.classList.toggle("hide", m.matches)
+	tocNode.classList.toggle("hide", (tocNode.closest("pluto-editor") ?? document.body).scrollWidth < 1000)
+for(let s of [1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000]) {
+	let m = matchMedia(`(max-width: \${s}px)`)
+	m.addListener(match_listener)
+	invalidation.then(() => m.removeListener(match_listener))
+}
 match_listener()
-m.addListener(match_listener)
 
 invalidation.then(() => {
 	invalidated.current = true
@@ -292,7 +295,6 @@ invalidation.then(() => {
 	bodyClassObserver.disconnect()
 	mut_observers.current.forEach((o) => o.disconnect())
 	document.removeEventListener("click", document_click_handler)
-	m.removeListener(match_listener)
 })
 
 return tocNode

src/bindname.jl

@@ -0,0 +1,35 @@
+import HypertextLiteral
+
+"""
+```julia
+@bindname name Slider(1:10)
+```
+
+Like `@bind` in Pluto, but it also displays the name of the variable before the input widget.
+"""
+macro bindname(name::Symbol, ex::Expr)
+
+    # Some macro magic to call the `@bind` macro without hygiene. This will use whatever `@bind` is defined in the scope of the caller of this macro.
+    # We could just do `Main.PlutoRunner.@bind`, but then if you run the notebook.jl as a standalone script, it does not find the mock `@bind`.
+    bindcall = Expr(:macrocall, 
+        Symbol("@bind"),
+        __source__,
+        name,
+        ex
+    )
+
+    # Messy HTML to avoid unintended whitespace, which can show up in rare cases.
+    quote
+        bond = $(esc(bindcall))
+
+        HypertextLiteral.@htl(
+            """<div style='display: flex; flex-wrap: wrap; align-items: baseline;'><code style='color: var(--cm-color-var) !important; font-weight: 700;'>$(
+                $(String(name))
+            )&nbsp<span style="opacity: .6">=</span>&nbsp</code>$(
+                bond
+            )</div>"""
+        )
+    end
+end
+
+export @bindname