From ed574dd8d177ccef68c7c0780f868651c254354a Mon Sep 17 00:00:00 2001 From: Stu Cork Date: Wed, 26 Jan 2022 19:36:13 +0800 Subject: [PATCH 1/9] slider: implement bar_height and handle_size properties --- .anvil_editor.yaml | 21 ++++--- client_code/Demo/form_template.yaml | 11 ++-- client_code/Slider/__init__.py | 87 ++++++++++++++++++++------- client_code/Slider/form_template.yaml | 7 +++ 4 files changed, 90 insertions(+), 36 deletions(-) diff --git a/.anvil_editor.yaml b/.anvil_editor.yaml index 3e1084ac..4ec19629 100644 --- a/.anvil_editor.yaml +++ b/.anvil_editor.yaml @@ -6,16 +6,17 @@ unique_ids: ChipsInput: 2IUXJPHSKH5CW7WV2N2PTL2O6WAEWBPV, Demo: 7OHCYYNDEID2BZ5AN5DDP7K4XXGJTRZB, Autocomplete: BCY2XYD72YQ6XE35WSGDYNNDBRCSMYNV, ProgressBar.Determinate: J7HWVD2WBMZY7OCSOPNLPLHFQ4XCJBR2, Pivot: XGSRYGA4QFP5H57CKNWXCVOT5H7DGTEV, ProgressBar.Indeterminate: KSULDKU4IPBMWPU7OQLLU4YN35XCYTSV} - modules: {utils._component_helpers: '1621686339258612945000771.5087', utils._writeback_waiter: HPGIMFEAETCBPEDMGJSTIJXSMGGV4LMU, - storage: YCJGWKTKWGKIXPMF7R6FT2N5QH3TBETA, augment: DXXSTVAMYSLYZJOQS23I7R67JNE3YDEQ, - routing._navigation: MXGZMA7IRSF5XJMMR4XOL4O2J7KNYSI4, uuid: COAWBUSWZWBIJD75BBIBE7GAILKFICZF, + modules: {utils._canvas_helpers: MTD3HIE254CV2SZVETZ3JVTYRAYNOU4I, utils._component_helpers: '1621686339258612945000771.5087', + utils._writeback_waiter: HPGIMFEAETCBPEDMGJSTIJXSMGGV4LMU, storage: YCJGWKTKWGKIXPMF7R6FT2N5QH3TBETA, + augment: DXXSTVAMYSLYZJOQS23I7R67JNE3YDEQ, routing._navigation: MXGZMA7IRSF5XJMMR4XOL4O2J7KNYSI4, + uuid: COAWBUSWZWBIJD75BBIBE7GAILKFICZF, animation: S75G3LGMJ34O3EAGWYC3P7DJ43EXEKYG, routing: 763MIXLEPUMGF6VS2I7VHTDMXSNANWA3, utils._auto_refreshing: XM2GLNNTPYT25IMV2377R4PXTQCJE2SU, utils._timed: M2FMBJMUW4YW7ZZXZWEVMWV5PJQPEGTV, routing._alert: YOYXSYGZW45MSIHCYVJIZUTLLK5GI7WI, messaging: L6OUZBWTSWZU33JG4LAY36FYKSGCO7SS, popover: B6UIKKOXGZR7QK3ZO4P32GLP5AERNF3R, - navigation: YSGUSWEZXBEZEJKRIX7UPAS2Y64Q6EZ6, session: I6CPANLB5O7M2VDR2CZKLBV7THBW2SJF, - ProgressBar: 6RDMGEBZGTXV32KLZDKWPGBWXS3QKNRT, routing._logging: FAODPTGNRUOWMQZKLALPJUT73LTMUDRI, - routing._routing: SDYG54CLQVFHGY7XHB2R44TZR6PXYUKY, utils: E7XISEGXUVZXV24JEVFT4SV64AJED3XJ, - routing._session_expired: 7I5VIVGMNIHYLE3UOMQZULQDDF6XR7UX} - server_modules: {authorisation: Z6AZ64JBAAHAVRYQJ63VZLOU4TESTAUN, server_utils: 4XEM7IGABFRXOMKOT7WB5BYR22LF4QH7} - assets: {loading-spinner.js: GNN5BGLOS3BHSXWTHXXQUT5BPTJQEUXA, standard-page.html: JYT2VG6NOSSLRNZR5GDSLLXUFJ7AZF4J, - theme.css: S5NWY72JOUFUHCDRRQX7DV3C5CKF4TGN} + navigation: YSGUSWEZXBEZEJKRIX7UPAS2Y64Q6EZ6, ProgressBar: 6RDMGEBZGTXV32KLZDKWPGBWXS3QKNRT, + routing._logging: FAODPTGNRUOWMQZKLALPJUT73LTMUDRI, routing._routing: SDYG54CLQVFHGY7XHB2R44TZR6PXYUKY, + utils: E7XISEGXUVZXV24JEVFT4SV64AJED3XJ, routing._session_expired: 7I5VIVGMNIHYLE3UOMQZULQDDF6XR7UX} + server_modules: {authorisation: Z6AZ64JBAAHAVRYQJ63VZLOU4TESTAUN, lazy_module_loader: CNBKKECWCHI3OMBLKR6JZG6J6KI45D55, + serialisation: VBKY4WR2JYSA3V3HC3PTTRJWSHB2TBJR, server_utils: 4XEM7IGABFRXOMKOT7WB5BYR22LF4QH7} + assets: {loading-spinner.js: GNN5BGLOS3BHSXWTHXXQUT5BPTJQEUXA, new_file.js: '1643195695481907467310186.2722', + standard-page.html: JYT2VG6NOSSLRNZR5GDSLLXUFJ7AZF4J, theme.css: S5NWY72JOUFUHCDRRQX7DV3C5CKF4TGN} diff --git a/client_code/Demo/form_template.yaml b/client_code/Demo/form_template.yaml index a8151079..6fb22ce1 100644 --- a/client_code/Demo/form_template.yaml +++ b/client_code/Demo/form_template.yaml @@ -288,12 +288,13 @@ components: col_widths: {} grid_position: VGOMRT,ISPGIW - type: form:Slider - properties: {pips_mode: count, min: -5, tooltips: true, margin: null, pips_stepped: false, - pips: true, pips_values: '5', max: 5, padding: '', enabled: true, pips_density: -1, - limit: null, animate: false, visible: true, connect: lower, start: '0', behaviour: tap, - spacing_above: small, spacing_below: small, color: null, format: .1f, step: 1} + properties: {role: '', pips_mode: count, min: -5, tooltips: true, margin: null, + pips_stepped: false, pips: true, pips_values: '5', max: 5, padding: '', enabled: true, + pips_density: -1, limit: null, animate: false, visible: true, connect: lower, + start: '0', behaviour: tap, handle_size: '', spacing_above: small, spacing_below: small, + bar_height: '', color: null, format: .1f, step: 1} name: slider_agree - layout_properties: {grid_position: 'GJXJSN,BPVKWE'} + layout_properties: {grid_position: 'CVTVHB,QMZPRB'} event_bindings: {change: slider_agree_change} data_bindings: - {property: formatted_value, code: 'self.item[''agree'']', writeback: true} diff --git a/client_code/Slider/__init__.py b/client_code/Slider/__init__.py index 4c269173..ea9d9d31 100644 --- a/client_code/Slider/__init__.py +++ b/client_code/Slider/__init__.py @@ -19,30 +19,37 @@ f"https://cdn.jsdelivr.net/npm/nouislider@{noui_version}/dist/nouislider.min.css" ) +BAR_HEIGHT = "--slider-height" +BACKGROUND = "--slider-background" +HANDLE_SIZE = "--slider-handle-size" + _html_injector.css( - """ -.anvil-slider-container { + f""" +.anvil-slider-container {{ padding: 10px 0; -} -.anvil-slider-container.has-pips { +}} +.anvil-slider-container.has-pips {{ padding-bottom: 40px; -} -.anvil-container-overflow, .anvil-panel-col { +}} +.anvil-container-overflow, .anvil-panel-col {{ overflow: visible; -} -.noUi-connect { - background: var(--primary); -} -.noUi-horizontal .noUi-handle { - width: 34px; - height: 34px; - right: -17px; - top: -10px; +}} +.noUi-connect {{ + background: var({BACKGROUND}); +}} +.noUi-horizontal {{ + height: var({BAR_HEIGHT}) +}} +.noUi-horizontal .noUi-handle {{ + width: var({HANDLE_SIZE}); + height: var({HANDLE_SIZE}); + right: calc(var({HANDLE_SIZE}) / -2); + top: calc((-2px + var({BAR_HEIGHT}) - var({HANDLE_SIZE}))/2); border-radius: 50%; -} -.noUi-handle::before, .noUi-handle::after { +}} +.noUi-handle::before, .noUi-handle::after {{ content: none -} +}} """ ) @@ -239,6 +246,10 @@ def setter(self, value): "values": None, "formatted_value": None, "formatted_values": None, + "bar_height": None, + "handle_size": None, + "color": None, + "role": None, } @@ -281,10 +292,19 @@ def __init__(self, **properties): self._slider.on("change", lambda a, h, *e: self.raise_event("change", handle=h)) ###### PROPS TO INIT ###### - always = {p: props[p] for p in ("color", "spacing_above", "spacing_below")} + always = { + p: props[p] + for p in ( + "color", + "spacing_above", + "spacing_below", + "bar_height", + "handle_size", + ) + } if_true = { p: props[p] - for p in ("formatted_value", "formatted_values", "value", "values") + for p in ("formatted_value", "formatted_values", "value", "values", "role") if props[p] is not None } if_false = {p: props[p] for p in ("enabled", "visible") if not props[p]} @@ -357,6 +377,30 @@ def _make_pips(self): raise TypeError(f"pips should be a bool or a dict, got {type(pips)}") ###### VISUAL PROPS ###### + @property + def bar_height(self): + return self._props["bar_height"] + + @bar_height.setter + def bar_height(self, value): + self._props["bar_height"] = value + value = value or 18 + if isinstance(value, (int, float)) or value.isdigit(): + value = f"{value}px" + self._dom_node.style.setProperty(BAR_HEIGHT, value) + + @property + def handle_size(self): + return self._props["handle_size"] + + @handle_size.setter + def handle_size(self, value): + self._props["handle_size"] = value + value = value or 34 + if isinstance(value, (int, float)) or value.isdigit(): + value = f"{value}px" + self._dom_node.style.setProperty(HANDLE_SIZE, value) + @property def enabled(self): return not self._slider_node.getAttribute("disabled") @@ -375,11 +419,12 @@ def color(self): @color.setter def color(self, value): self._color = value - self._dom_node.style.setProperty("--primary", _get_color(value)) + self._dom_node.style.setProperty(BACKGROUND, _get_color(value)) spacing_above = _spacing_property("above") spacing_below = _spacing_property("below") visible = _HtmlPanel.visible + role = _HtmlPanel.role ###### METHODS ###### def reset(self): diff --git a/client_code/Slider/form_template.yaml b/client_code/Slider/form_template.yaml index 5055502e..e805641a 100644 --- a/client_code/Slider/form_template.yaml +++ b/client_code/Slider/form_template.yaml @@ -85,6 +85,13 @@ properties: binding_writeback_events: [x-writeback, change] group: values important: false +- {name: bar_height, type: string, default_value: '', default_binding_prop: false, + description: set the bar height for this slider - default height is 18, group: appearance, + important: false} +- {name: handle_size, type: string, default_value: '', default_binding_prop: false, + description: Set the size of the handle - the default size is 34, group: appearance, + important: false} +- {name: role, type: string, default_value: '', default_binding_prop: false, group: appearance} is_package: true events: - name: change From f79653cbefd03bbb3fa46b2a6690e6a807328887 Mon Sep 17 00:00:00 2001 From: Stu Cork Date: Wed, 26 Jan 2022 19:36:56 +0800 Subject: [PATCH 2/9] Designer Components: update slider component --- js/designer_components/DesignerComponent.ts | 7 +++++++ js/designer_components/DesignerSlider.ts | 17 ++++++++++++---- js/designer_components/bundle.js | 22 +++++++++++++++++---- js/designer_components/bundle.min.js | 13 ++++++------ 4 files changed, 45 insertions(+), 14 deletions(-) diff --git a/js/designer_components/DesignerComponent.ts b/js/designer_components/DesignerComponent.ts index 46ad8301..10e53551 100644 --- a/js/designer_components/DesignerComponent.ts +++ b/js/designer_components/DesignerComponent.ts @@ -5,6 +5,8 @@ interface Window { Sk: any; } +const HASUNITS = /[a-zA-Z%]/g + /** * To create a designer class that supports dynamically updating the design view * subclass from DesignerComponent @@ -239,6 +241,11 @@ export class DesignerComponent { return color; } + public getCssLength(len?: string) { + len ??= ""; + return ("" + len).match(HASUNITS) ? len : len + "px"; + } + /** helper method for clearing a domnode that will be reinstantiated during an update */ public clearElement(el: HTMLElement) { while (el.firstElementChild) { diff --git a/js/designer_components/DesignerSlider.ts b/js/designer_components/DesignerSlider.ts index c14e5a2d..6bb723a6 100644 --- a/js/designer_components/DesignerSlider.ts +++ b/js/designer_components/DesignerSlider.ts @@ -14,6 +14,9 @@ interface Formatter { from: (value: string) => number | false; } +const BACKGROUND = "--slider-background"; +const BAR_HEIGHT = "--slider-height"; +const HANDLE_SIZE = "--slider-handle-size"; export class DesignerSlider extends DesignerComponent { static defaults = { start: [20, 80], @@ -25,9 +28,10 @@ export class DesignerSlider extends DesignerComponent { }; static links = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.css"]; static scripts = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.js"]; - static css = `.anvil-container-overflow,.anvil-panel-col{overflow:visible}.anvil-slider-container{padding:10px 0;min-height:50px} -.anvil-slider-container.has-pips{padding-bottom:40px}.noUi-connect{background:var(--primary)} -.noUi-horizontal .noUi-handle{width:34px;height:34px;right:-17px;top:-10px;border-radius:50%}.noUi-handle::after,.noUi-handle::before{content:none}`; + static css = `.anvil-slider-container{padding:10px 0}.anvil-slider-container.has-pips{padding-bottom:40px} + .anvil-container-overflow,.anvil-panel-col{overflow:visible}.noUi-connect{background:var(${BACKGROUND})} + .noUi-horizontal{height:var(${BAR_HEIGHT})}.noUi-horizontal .noUi-handle{width:var(${HANDLE_SIZE});height:var(${HANDLE_SIZE});right:calc(var(${HANDLE_SIZE}) / -2);top:calc((-2px + var(${BAR_HEIGHT}) - var(${HANDLE_SIZE}))/2);border-radius:50%} + .noUi-handle::after,.noUi-handle::before{content:none}`; static init() { super.init(".anvil-slider", "anvil-slider-container"); } @@ -119,9 +123,14 @@ export class DesignerSlider extends DesignerComponent { if (this.slider.firstElementChild) { this.slider.removeChild(this.slider.firstElementChild); } - this.domNode.style.setProperty("--primary", this.getColor(props.color, true)); + this.domNode.style.setProperty(BACKGROUND, this.getColor(props.color, true)); this.updateSpacing(props); this.updateVisible(props); + this.updateRole(props); + const barHeight = this.getCssLength(props.bar_height || 18); + const handleSize = this.getCssLength(props.handle_size || 34); + this.domNode.style.setProperty(BAR_HEIGHT, barHeight); + this.domNode.style.setProperty(HANDLE_SIZE, handleSize); props.enabled ? this.slider.removeAttribute("disabled") : this.slider.setAttribute("disabled", ""); noUiSlider.create(this.slider, props); } catch (e) { diff --git a/js/designer_components/bundle.js b/js/designer_components/bundle.js index 2b6c0cf1..5cb84a85 100644 --- a/js/designer_components/bundle.js +++ b/js/designer_components/bundle.js @@ -1,4 +1,5 @@ // DesignerComponent.ts +var HASUNITS = /[a-zA-Z%]/g; var DesignerComponent = class { constructor(domNode, pyComponent, el) { this.domNode = domNode; @@ -137,6 +138,10 @@ var DesignerComponent = class { } return color; } + getCssLength(len) { + len ??= ""; + return ("" + len).match(HASUNITS) ? len : len + "px"; + } clearElement(el) { while (el.firstElementChild) { el.removeChild(el.firstElementChild); @@ -241,6 +246,9 @@ DesignerQuill.links = ["//cdn.quilljs.com/1.3.6/quill.snow.css", "//cdn.quilljs. DesignerQuill.scripts = ["//cdn.quilljs.com/1.3.6/quill.min.js"]; // DesignerSlider.ts +var BACKGROUND = "--slider-background"; +var BAR_HEIGHT = "--slider-height"; +var HANDLE_SIZE = "--slider-handle-size"; var DesignerSlider = class extends DesignerComponent { static init() { super.init(".anvil-slider", "anvil-slider-container"); @@ -325,9 +333,14 @@ var DesignerSlider = class extends DesignerComponent { if (this.slider.firstElementChild) { this.slider.removeChild(this.slider.firstElementChild); } - this.domNode.style.setProperty("--primary", this.getColor(props.color, true)); + this.domNode.style.setProperty(BACKGROUND, this.getColor(props.color, true)); this.updateSpacing(props); this.updateVisible(props); + this.updateRole(props); + const barHeight = this.getCssLength(props.bar_height || 18); + const handleSize = this.getCssLength(props.handle_size || 34); + this.domNode.style.setProperty(BAR_HEIGHT, barHeight); + this.domNode.style.setProperty(HANDLE_SIZE, handleSize); props.enabled ? this.slider.removeAttribute("disabled") : this.slider.setAttribute("disabled", ""); noUiSlider.create(this.slider, props); } catch (e) { @@ -355,9 +368,10 @@ DesignerSlider.defaults = { }; DesignerSlider.links = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.css"]; DesignerSlider.scripts = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.js"]; -DesignerSlider.css = `.anvil-container-overflow,.anvil-panel-col{overflow:visible}.anvil-slider-container{padding:10px 0;min-height:50px} -.anvil-slider-container.has-pips{padding-bottom:40px}.noUi-connect{background:var(--primary)} -.noUi-horizontal .noUi-handle{width:34px;height:34px;right:-17px;top:-10px;border-radius:50%}.noUi-handle::after,.noUi-handle::before{content:none}`; +DesignerSlider.css = `.anvil-slider-container{padding:10px 0}.anvil-slider-container.has-pips{padding-bottom:40px} + .anvil-container-overflow,.anvil-panel-col{overflow:visible}.noUi-connect{background:var(${BACKGROUND})} + .noUi-horizontal{height:var(${BAR_HEIGHT})}.noUi-horizontal .noUi-handle{width:var(${HANDLE_SIZE});height:var(${HANDLE_SIZE});right:calc(var(${HANDLE_SIZE}) / -2);top:calc((-2px + var(${BAR_HEIGHT}) - var(${HANDLE_SIZE}))/2);border-radius:50%} + .noUi-handle::after,.noUi-handle::before{content:none}`; // DesignerSwitch.ts var DesignerSwitch = class extends DesignerComponent { diff --git a/js/designer_components/bundle.min.js b/js/designer_components/bundle.min.js index fcaf541f..778a1ce1 100644 --- a/js/designer_components/bundle.min.js +++ b/js/designer_components/bundle.min.js @@ -1,8 +1,9 @@ -var r=class{constructor(t,e,i){this.domNode=t;this.pyComponent=e;this.el=i;this.domNode=t,this.pyComponent=e,this.el=i}static postLoad(){}static init(t,e="anvil-extras-designer"){let i=()=>{this.loading=!0,$(()=>{this.setup(t,e),this.postLoad(),this.loaded=!0,this.loading=!1})};if(!this.loaded&&!this.loading){if(this.loading=!0,this.links.forEach(s=>{let n=document.createElement("link");n.href=s,n.rel="stylesheet",document.body.appendChild(n)}),this.css){let s=document.createElement("style");s.innerHTML=this.css,document.body.appendChild(s)}if(this.scripts.length){let s=this.scripts.map(n=>new Promise((a,c)=>{let o=document.createElement("script");o.src=n,document.body.appendChild(o),o.onload=a,o.onerror=c}));Promise.all(s).then(i)}else i()}else this.loading||i()}static setup(t,e){for(let i of document.querySelectorAll(t)){let s=i.parentElement;if(s.classList.contains(e))return;s.classList.add(e);let n=$(s).data("anvilPyComponent"),a;try{a=n._anvil.customPropVals}catch(o){console.error(o);return}let c=new this(s,n,i);if(a)c.makeGetSets(a);else if(this.defaults){c.update({...this.defaults});for(let[o,d]of Object.entries(this.defaults))c.setProp(o,d,this.defaults)}}}makeGetSets(t){let e={...t},i=this;this.update({...e});for(let s in e)this.setProp(s,t[s],e),Object.defineProperty(t,s,{get(){return e[s]},set(n){e[s]=n;try{i.setProp(s,n,e),i.update({...e},s,n)}catch{}return!0}})}update(t,e,i){}setProp(t,e,i){}updateSpacing({spacing_above:t,spacing_below:e}){let i=Array.prototype.filter.call(this.domNode.classList,s=>s.startsWith("anvil-spacing-"));this.domNode.classList.remove(...i),t&&this.domNode.classList.add("anvil-spacing-above-"+t),e&&this.domNode.classList.add("anvil-spacing-above-"+e)}updateRole({role:t}){let e=Array.prototype.filter.call(this.domNode.classList,i=>i.startsWith("anvil-role-"));this.domNode.classList.remove(...e),t&&this.domNode.classList.add("anvil-role-"+t)}updateVisible({visible:t}){this.domNode.classList.toggle("visible-false",!t)}getColor(t,e){return t&&t.startsWith("theme:")&&(t=window.anvilThemeColors[t.replace("theme:","")]||""),!t&&e?e===!0||e==="primary"?window.anvilThemeColors["Primary 500"]||"#2196F3":e:t}getColorRGB(t,e){if(t=this.getColor(t,e),t&&t.startsWith("#")){let i=parseInt(t.slice(1),16);return[i>>16&255,i>>8&255,i&255].join(",")}else if(t&&t.startsWith("rgb("))return t.slice(4,t.length-1);return t}clearElement(t){for(;t.firstElementChild;)t.removeChild(t.firstElementChild)}get[Symbol.toStringTag](){return"Designer Component"}};r.css="",r.links=[],r.script=[],r.loaded=!1,r.loading=!1,r.defaults=null,r.initializing=!1;var b=class extends r{static postLoad(){$.fn.selectpicker.Constructor.BootstrapVersion="3"}static init(){super.init(".select-picker")}constructor(t,e,i){super(t,e,i);this.picker=$(i),this.picker.selectpicker()}update(t,e){e&&!(e in this.constructor.defaults)||(this.picker.attr("title",t.placeholder||null),this.picker.selectpicker({title:t.placeholder}),this.picker.attr("disabled",t.enabled?null:""),this.updateSpacing(t),this.updateVisible(t),this.picker.selectpicker("refresh"),this.picker.selectpicker("render"))}get[Symbol.toStringTag](){return"MultiSelectDropDown"}};b.defaults={placeholder:"None Selected",enabled:!0,visible:!0,spacing_above:"small",spacing_below:"small"},b.links=["https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css"],b.scripts=["https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"];var u=class extends r{static init(){super.init(".quill-editor")}constructor(t,e,i){super(t,e,i);this.editor=i}update(t){this.editor.firstElementChild&&this.editor.removeChild(this.editor.firstElementChild),this.domNode.firstElementChild!==this.editor&&this.domNode.removeChild(this.domNode.firstElementChild);let e=new Quill(this.editor,{modules:{toolbar:t.toolbar||!1},readOnly:t.readonly,theme:t.theme,placeholder:t.placeholder});this.updateSpacing(t),this.updateVisible(t);let i=t.height;i=(""+i).match(/[a-zA-Z%]/g)?i:i+"px",this.editor.style.minHeight=i,this.editor.style.height=t.auto_expand?i:"auto",e.setText(t.content||"")}get[Symbol.toStringTag](){return"Quill"}};u.defaults={auto_expand:!0,content:"",height:150,placeholder:null,readonly:!1,theme:"snow",toolbar:!0,visible:!0},u.links=["//cdn.quilljs.com/1.3.6/quill.snow.css","//cdn.quilljs.com/1.3.6/quill.bubble.css"],u.scripts=["//cdn.quilljs.com/1.3.6/quill.min.js"];var p=class extends r{static init(){super.init(".anvil-slider","anvil-slider-container")}constructor(t,e,i){super(t,e,i);this.slider=i}parse(t,e=!1){if(typeof t!="string")return t;if(t=t.toLowerCase().trim(),!t)return e?[]:null;try{return JSON.parse((e||t.includes(","))&&t[0]!=="["?`[${t}]`:t)}catch{return e?[]:t}}getFormatter(t){let e=t.indexOf("{"),i=t.indexOf("}"),s=e===-1?"":t.slice(0,e),n=i===-1?"":t.slice(i+1),a=t[i-1]==="%"?"%":null,c=Sk.ffi.toPy(t),o=c.tp$getattr(Sk.ffi.toPy("format")),d=l=>{let m=Sk.ffi.toPy(l);return e===-1?Sk.builtin.format(m,c):o.tp$call([m])};try{d(1.1)}catch(l){throw new Error(l.toString())}return{to:l=>{try{return d(l)}catch{return l}},from:l=>{l.startsWith(s)&&(l=l.slice(s.length)),l.endsWith(n)&&(l=l.slice(0,l.length-n.length));let m=a==="%"&&l.endsWith("%");l=l.trim().replace(/[,_]/g,"");let v=parseFloat(l);return m&&(v=v/100),v}}}update(t){try{for(let e of["start","connect","margin","padding","limit","pips_values"])t[e]=this.parse(t[e],e==="pips_values");t.range={min:t.min,max:t.max},t.format=this.getFormatter(t.format||".2f"),t.pips&&(t.pips={format:t.format,mode:t.pips_mode,values:t.pips_values,density:t.pips_density,stepped:t.pips_stepped}),this.domNode.classList.toggle("has-pips",!!t.pips),this.slider.noUiSlider?.destroy(),this.slider.firstElementChild&&this.slider.removeChild(this.slider.firstElementChild),this.domNode.style.setProperty("--primary",this.getColor(t.color,!0)),this.updateSpacing(t),this.updateVisible(t),t.enabled?this.slider.removeAttribute("disabled"):this.slider.setAttribute("disabled",""),noUiSlider.create(this.slider,t)}catch(e){this.slider.noUiSlider?.destroy(),this.slider.firstElementChild&&this.slider.removeChild(this.slider.firstElementChild);let i=$(`
+var _=/[a-zA-Z%]/g,r=class{constructor(t,e,i){this.domNode=t;this.pyComponent=e;this.el=i;this.domNode=t,this.pyComponent=e,this.el=i}static postLoad(){}static init(t,e="anvil-extras-designer"){let i=()=>{this.loading=!0,$(()=>{this.setup(t,e),this.postLoad(),this.loaded=!0,this.loading=!1})};if(!this.loaded&&!this.loading){if(this.loading=!0,this.links.forEach(s=>{let n=document.createElement("link");n.href=s,n.rel="stylesheet",document.body.appendChild(n)}),this.css){let s=document.createElement("style");s.innerHTML=this.css,document.body.appendChild(s)}if(this.scripts.length){let s=this.scripts.map(n=>new Promise((a,c)=>{let o=document.createElement("script");o.src=n,document.body.appendChild(o),o.onload=a,o.onerror=c}));Promise.all(s).then(i)}else i()}else this.loading||i()}static setup(t,e){for(let i of document.querySelectorAll(t)){let s=i.parentElement;if(s.classList.contains(e))return;s.classList.add(e);let n=$(s).data("anvilPyComponent"),a;try{a=n._anvil.customPropVals}catch(o){console.error(o);return}let c=new this(s,n,i);if(a)c.makeGetSets(a);else if(this.defaults){c.update({...this.defaults});for(let[o,d]of Object.entries(this.defaults))c.setProp(o,d,this.defaults)}}}makeGetSets(t){let e={...t},i=this;this.update({...e});for(let s in e)this.setProp(s,t[s],e),Object.defineProperty(t,s,{get(){return e[s]},set(n){e[s]=n;try{i.setProp(s,n,e),i.update({...e},s,n)}catch{}return!0}})}update(t,e,i){}setProp(t,e,i){}updateSpacing({spacing_above:t,spacing_below:e}){let i=Array.prototype.filter.call(this.domNode.classList,s=>s.startsWith("anvil-spacing-"));this.domNode.classList.remove(...i),t&&this.domNode.classList.add("anvil-spacing-above-"+t),e&&this.domNode.classList.add("anvil-spacing-above-"+e)}updateRole({role:t}){let e=Array.prototype.filter.call(this.domNode.classList,i=>i.startsWith("anvil-role-"));this.domNode.classList.remove(...e),t&&this.domNode.classList.add("anvil-role-"+t)}updateVisible({visible:t}){this.domNode.classList.toggle("visible-false",!t)}getColor(t,e){return t&&t.startsWith("theme:")&&(t=window.anvilThemeColors[t.replace("theme:","")]||""),!t&&e?e===!0||e==="primary"?window.anvilThemeColors["Primary 500"]||"#2196F3":e:t}getColorRGB(t,e){if(t=this.getColor(t,e),t&&t.startsWith("#")){let i=parseInt(t.slice(1),16);return[i>>16&255,i>>8&255,i&255].join(",")}else if(t&&t.startsWith("rgb("))return t.slice(4,t.length-1);return t}getCssLength(t){return t??="",(""+t).match(_)?t:t+"px"}clearElement(t){for(;t.firstElementChild;)t.removeChild(t.firstElementChild)}get[Symbol.toStringTag](){return"Designer Component"}};r.css="",r.links=[],r.script=[],r.loaded=!1,r.loading=!1,r.defaults=null,r.initializing=!1;var b=class extends r{static postLoad(){$.fn.selectpicker.Constructor.BootstrapVersion="3"}static init(){super.init(".select-picker")}constructor(t,e,i){super(t,e,i);this.picker=$(i),this.picker.selectpicker()}update(t,e){e&&!(e in this.constructor.defaults)||(this.picker.attr("title",t.placeholder||null),this.picker.selectpicker({title:t.placeholder}),this.picker.attr("disabled",t.enabled?null:""),this.updateSpacing(t),this.updateVisible(t),this.picker.selectpicker("refresh"),this.picker.selectpicker("render"))}get[Symbol.toStringTag](){return"MultiSelectDropDown"}};b.defaults={placeholder:"None Selected",enabled:!0,visible:!0,spacing_above:"small",spacing_below:"small"},b.links=["https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css"],b.scripts=["https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"];var u=class extends r{static init(){super.init(".quill-editor")}constructor(t,e,i){super(t,e,i);this.editor=i}update(t){this.editor.firstElementChild&&this.editor.removeChild(this.editor.firstElementChild),this.domNode.firstElementChild!==this.editor&&this.domNode.removeChild(this.domNode.firstElementChild);let e=new Quill(this.editor,{modules:{toolbar:t.toolbar||!1},readOnly:t.readonly,theme:t.theme,placeholder:t.placeholder});this.updateSpacing(t),this.updateVisible(t);let i=t.height;i=(""+i).match(/[a-zA-Z%]/g)?i:i+"px",this.editor.style.minHeight=i,this.editor.style.height=t.auto_expand?i:"auto",e.setText(t.content||"")}get[Symbol.toStringTag](){return"Quill"}};u.defaults={auto_expand:!0,content:"",height:150,placeholder:null,readonly:!1,theme:"snow",toolbar:!0,visible:!0},u.links=["//cdn.quilljs.com/1.3.6/quill.snow.css","//cdn.quilljs.com/1.3.6/quill.bubble.css"],u.scripts=["//cdn.quilljs.com/1.3.6/quill.min.js"];var C="--slider-background",k="--slider-height",m="--slider-handle-size",p=class extends r{static init(){super.init(".anvil-slider","anvil-slider-container")}constructor(t,e,i){super(t,e,i);this.slider=i}parse(t,e=!1){if(typeof t!="string")return t;if(t=t.toLowerCase().trim(),!t)return e?[]:null;try{return JSON.parse((e||t.includes(","))&&t[0]!=="["?`[${t}]`:t)}catch{return e?[]:t}}getFormatter(t){let e=t.indexOf("{"),i=t.indexOf("}"),s=e===-1?"":t.slice(0,e),n=i===-1?"":t.slice(i+1),a=t[i-1]==="%"?"%":null,c=Sk.ffi.toPy(t),o=c.tp$getattr(Sk.ffi.toPy("format")),d=l=>{let g=Sk.ffi.toPy(l);return e===-1?Sk.builtin.format(g,c):o.tp$call([g])};try{d(1.1)}catch(l){throw new Error(l.toString())}return{to:l=>{try{return d(l)}catch{return l}},from:l=>{l.startsWith(s)&&(l=l.slice(s.length)),l.endsWith(n)&&(l=l.slice(0,l.length-n.length));let g=a==="%"&&l.endsWith("%");l=l.trim().replace(/[,_]/g,"");let y=parseFloat(l);return g&&(y=y/100),y}}}update(t){try{for(let s of["start","connect","margin","padding","limit","pips_values"])t[s]=this.parse(t[s],s==="pips_values");t.range={min:t.min,max:t.max},t.format=this.getFormatter(t.format||".2f"),t.pips&&(t.pips={format:t.format,mode:t.pips_mode,values:t.pips_values,density:t.pips_density,stepped:t.pips_stepped}),this.domNode.classList.toggle("has-pips",!!t.pips),this.slider.noUiSlider?.destroy(),this.slider.firstElementChild&&this.slider.removeChild(this.slider.firstElementChild),this.domNode.style.setProperty(C,this.getColor(t.color,!0)),this.updateSpacing(t),this.updateVisible(t),this.updateRole(t);let e=this.getCssLength(t.bar_height||18),i=this.getCssLength(t.handle_size||34);this.domNode.style.setProperty(k,e),this.domNode.style.setProperty(m,i),t.enabled?this.slider.removeAttribute("disabled"):this.slider.setAttribute("disabled",""),noUiSlider.create(this.slider,t)}catch(e){this.slider.noUiSlider?.destroy(),this.slider.firstElementChild&&this.slider.removeChild(this.slider.firstElementChild);let i=$(`
-
${e.message.replaceAll("noUiSlider","Slider")}
`);this.slider.appendChild(i[0])}}get[Symbol.toStringTag](){return"Slider"}};p.defaults={start:[20,80],connect:!0,min:0,max:100,visible:!0,enabled:!0},p.links=["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.css"],p.scripts=["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.js"],p.css=`.anvil-container-overflow,.anvil-panel-col{overflow:visible}.anvil-slider-container{padding:10px 0;min-height:50px} -.anvil-slider-container.has-pips{padding-bottom:40px}.noUi-connect{background:var(--primary)} -.noUi-horizontal .noUi-handle{width:34px;height:34px;right:-17px;top:-10px;border-radius:50%}.noUi-handle::after,.noUi-handle::before{content:none}`;var y=class extends r{static init(){super.init(".anvil-extras-switch")}constructor(t,e,i){super(t,e,i);let s=e._anvil.components[0].component,n=s._anvil.domNode;n.classList.add("switch"),n.style.setProperty("--color",this.getColorRGB("#2196F3"));let a=n.querySelector("span");a.classList.add("lever"),a.removeAttribute("style");let c=n.querySelector("label"),o=document.createTextNode(""),d=document.createTextNode("");c.prepend(o),c.append(d),c.style.padding="7px 0",this.cb=s,this.cbNode=n,this.textNodePre=o,this.textNodePost=d}setProp(t,e,i){try{this.cb._anvil.setProp(t,Sk.ffi.toPy(e))}catch(s){t==="checked_color"?this.cbNode.style.setProperty("--color",this.getColorRGB(e,!0)):t==="text_pre"?this.textNodePre.textContent=e:this.textNodePost.textContent=e}}get[Symbol.toStringTag](){return"Switch"}};y.css=` +
${e.message.replaceAll("noUiSlider","Slider")}
`);this.slider.appendChild(i[0])}}get[Symbol.toStringTag](){return"Slider"}};p.defaults={start:[20,80],connect:!0,min:0,max:100,visible:!0,enabled:!0},p.links=["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.css"],p.scripts=["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.js"],p.css=`.anvil-slider-container{padding:10px 0}.anvil-slider-container.has-pips{padding-bottom:40px} + .anvil-container-overflow,.anvil-panel-col{overflow:visible}.noUi-connect{background:var(${C})} + .noUi-horizontal{height:var(${k})}.noUi-horizontal .noUi-handle{width:var(${m});height:var(${m});right:calc(var(${m}) / -2);top:calc((-2px + var(${k}) - var(${m}))/2);border-radius:50%} + .noUi-handle::after,.noUi-handle::before{content:none}`;var w=class extends r{static init(){super.init(".anvil-extras-switch")}constructor(t,e,i){super(t,e,i);let s=e._anvil.components[0].component,n=s._anvil.domNode;n.classList.add("switch"),n.style.setProperty("--color",this.getColorRGB("#2196F3"));let a=n.querySelector("span");a.classList.add("lever"),a.removeAttribute("style");let c=n.querySelector("label"),o=document.createTextNode(""),d=document.createTextNode("");c.prepend(o),c.append(d),c.style.padding="7px 0",this.cb=s,this.cbNode=n,this.textNodePre=o,this.textNodePost=d}setProp(t,e,i){try{this.cb._anvil.setProp(t,Sk.ffi.toPy(e))}catch(s){t==="checked_color"?this.cbNode.style.setProperty("--color",this.getColorRGB(e,!0)):t==="text_pre"?this.textNodePre.textContent=e:this.textNodePost.textContent=e}}get[Symbol.toStringTag](){return"Switch"}};w.css=` .switch,.switch *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .switch label{cursor:pointer} .switch label input[type=checkbox]{opacity:0;width:0;height:0}.switch label input[type=checkbox]:checked+.lever{background-color:rgba(var(--color), .5)} @@ -15,10 +16,10 @@ var r=class{constructor(t,e,i){this.domNode=t;this.pyComponent=e;this.el=i;this. input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before{-webkit-transform:scale(2.4);transform:scale(2.4);background-color:rgb(var(--color), 0.15)} input[type=checkbox]:not(:disabled) ~ .lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before{-webkit-transform:scale(2.4);transform:scale(2.4);background-color:rgba(0,0,0,0.08)} .switch input[type=checkbox][disabled]+.lever{cursor:default;background-color:rgba(0,0,0,0.12)} -.switch label input[type=checkbox][disabled]+.lever:after,.switch label input[type=checkbox][disabled]:checked+.lever:after{background-color:#949494}`;var g=class extends r{static init(){super.init(".anvil-container .tabs","anvil-extras-designer")}constructor(t,e,i){super(t,e,i);this.tabs=i,this.domNode.style.paddingTop="0",this.domNode.style.paddingBottom="0"}update(t){this.clearElement(this.tabs);let e={offsetLeft:0,offsetWidth:0};t.tab_titles||=[],t.tab_titles.forEach((a,c)=>{let o=document.createElement("li");o.className="tab";let d=document.createElement("a");d.style.cssText=` +.switch label input[type=checkbox][disabled]+.lever:after,.switch label input[type=checkbox][disabled]:checked+.lever:after{background-color:#949494}`;var f=class extends r{static init(){super.init(".anvil-container .tabs","anvil-extras-designer")}constructor(t,e,i){super(t,e,i);this.tabs=i,this.domNode.style.paddingTop="0",this.domNode.style.paddingBottom="0"}update(t){this.clearElement(this.tabs);let e={offsetLeft:0,offsetWidth:0};t.tab_titles||=[],t.tab_titles.forEach((a,c)=>{let o=document.createElement("li");o.className="tab";let d=document.createElement("a");d.style.cssText=` font-weight:${t.bold?"bold":""}; text-align: ${t.align}; font-size: ${t.font_size?t.font_size+"px":""}; font-family:${t.font||""}; font-style: ${t.italic?"italic":""}; - `,d.textContent=a,o.appendChild(d),this.tabs.appendChild(o),c===t.active_tab_index&&(d.className="active",e=o)});let i=document.createElement("li");this.tabs.appendChild(i),i.className="indicator",i.style.left=e.offsetLeft+"px",i.style.right=this.tabs.offsetWidth-e.offsetLeft-e.offsetWidth+"px";let s=this.getColorRGB(t.foreground,!0);this.tabs.style.setProperty("--color",s);let n=this.getColor(t.background);this.tabs.style.setProperty("--background",n),this.updateSpacing(t),this.updateRole(t),this.updateVisible(t)}get[Symbol.toStringTag](){return"Tabs"}};g.defaults={tab_titles:["Tab 1","Tab 2"],active_tab_index:0,visible:!0,align:"left"},g.css=".anvil-extras-tabs.anvil-role-card{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:-1px}.tabs{position:relative;overflow-x:auto;overflow-y:hidden;height:48px;width:100%;background-color:var(--background, inherit);margin:0 auto;white-space:nowrap;padding:0;display:flex;z-index:1}.tabs .tab{flex-grow:1;display:inline-block;text-align:center;line-height:48px;height:48px;padding:0;margin:0;text-transform:uppercase}.tabs .tab a{color:rgba(var(--color),0.7);display:block;width:100%;height:100%;padding:0 24px;font-size:14px;text-overflow:ellipsis;overflow:hidden;-webkit-transition:color 0.28s ease, background-color 0.28s ease;transition:color 0.28s ease, background-color 0.28s ease}.tabs .tab a:focus,.tabs .tab a:focus.active{background-color:rgb(var(--color), 0.2);outline:none}.tabs .tab a.active,.tabs .tab a:hover{background-color:transparent;color:rgb(var(--color))}.tabs .indicator{position:absolute;bottom:0;height:3px;background-color:rgb(var(--color), 0.4);will-change:left, right}";var f=class extends r{static init(){super.init(".chip-placeholder","anvil-extras-chip")}constructor(t,e,i){super(t,e,i);i.remove(),this.label=e._anvil.components[0].component,this.link=e._anvil.components[1].component,this.linkNode=this.link._anvil.domNode,this.linkNode.classList.remove("anvil-container")}setProp(t,e,i){switch(t){case"visible":this.updateVisible(i);break;case"spacing_above":case"spacing_below":this.updateSpacing(i);break;case"text":case"icon":this.label._anvil.setPropJS(t,e);break;case"foreground":this.link._anvil.setPropJS(t,e||"rgba(0,0,0,0.6)"),this.label._anvil.setPropJS(t,e||"rgba(0,0,0,0.6)");break;case"close_icon":this.linkNode.style.display=e?"block":"none";break;case"background":this.pyComponent._anvil.setPropJS(t,e);break}}get[Symbol.toStringTag](){return"Chip"}};f.css=".anvil-extras-chip{height:32px;font-size:14px;font-weight:500;color:rgba(0,0,0,0.6);line-height:32px;padding:0 12px;border-radius:16px;background-color:#e4e4e4;cursor:pointer;display:flex;gap:14px;align-items:center;width:fit-content;padding-left:12px;padding-right:12px}.anvil-extras-chip i.anvil-component-icon.left{font-size:1.5rem}.anvil-extras-chip a{user-select:none}.anvil-extras-chip a .link-text{}.anvil-extras-chip span{padding:0 !important}";var k=class extends r{static init(){f.init(),super.init(".chips-input-placeholder","anvil-extras-chips-input")}constructor(t,e,i){super(t,e,i);i.remove();let s=e._anvil.components[0].component;this.chipNode=s._anvil.domNode,this.input=e._anvil.components[1].component,this.inputNode=this.input._anvil.domNode,this.chips=[],Sk.misceval.callsimArray(s.tp$getattr(new Sk.builtin.str("remove_from_parent")))}setProp(t,e,i){switch(t){case"chips":debugger;e=Array.from(new Set((e||[]).filter(s=>s))),this.chips.forEach(s=>this.domNode.removeChild(s)),this.chips=[],e.forEach((s,n)=>{let a=this.chipNode.cloneNode(!0);a.querySelector("span").textContent=s,this.chips.push(a),this.domNode.insertBefore(a,this.inputNode)}),this.chips.length?this.input._anvil.setPropJS("placeholder",i.secondary_placeholder):this.input._anvil.setPropJS("placeholder",i.primary_placeholder);break;case"spacing_above":case"spacing_below":this.updateSpacing(i);break;case"visible":this.updateVisible(i);break;case"primary_placeholder":!this.chips.length&&this.input._anvil.setPropJS("placeholder",e);break;case"secondary_placeholder":this.chips.length&&this.input._anvil.setPropJS("placeholder",e);break}}get[Symbol.toStringTag](){return"ChipsInput"}};k.css=".anvil-extras-chips-input input{box-shadow:none !important;border:none !important;padding:7px 0 !important;margin-bottom:0 !important;flex:1;min-width:50px}.anvil-extras-chips-input{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid;align-items:center;padding-bottom:4px}";var x=class extends r{static init(){super.init(".pivot-placeholder")}constructor(t,e,i){super(t,e,i);this.pivot=$(t.querySelector(".anvil-extras-pivot"))}update({rows:t,columns:e,values:i,aggregator:s}){let n=[...t,...e,...i,"key A","key B","key C"],a=Object.fromEntries(n.map(c=>[c,1]));this.pivot.pivotUI([a],{rows:t,cols:e,vals:i,aggregatorName:s},!0)}};x.links=["https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.css"],x.scripts=["https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js","https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.js"];export{f as DesignerChip,k as DesignerChipsInput,r as DesignerComponent,b as DesignerMultiSelectDropDown,x as DesignerPivot,u as DesignerQuill,p as DesignerSlider,y as DesignerSwitch,g as DesignerTabs}; + `,d.textContent=a,o.appendChild(d),this.tabs.appendChild(o),c===t.active_tab_index&&(d.className="active",e=o)});let i=document.createElement("li");this.tabs.appendChild(i),i.className="indicator",i.style.left=e.offsetLeft+"px",i.style.right=this.tabs.offsetWidth-e.offsetLeft-e.offsetWidth+"px";let s=this.getColorRGB(t.foreground,!0);this.tabs.style.setProperty("--color",s);let n=this.getColor(t.background);this.tabs.style.setProperty("--background",n),this.updateSpacing(t),this.updateRole(t),this.updateVisible(t)}get[Symbol.toStringTag](){return"Tabs"}};f.defaults={tab_titles:["Tab 1","Tab 2"],active_tab_index:0,visible:!0,align:"left"},f.css=".anvil-extras-tabs.anvil-role-card{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:-1px}.tabs{position:relative;overflow-x:auto;overflow-y:hidden;height:48px;width:100%;background-color:var(--background, inherit);margin:0 auto;white-space:nowrap;padding:0;display:flex;z-index:1}.tabs .tab{flex-grow:1;display:inline-block;text-align:center;line-height:48px;height:48px;padding:0;margin:0;text-transform:uppercase}.tabs .tab a{color:rgba(var(--color),0.7);display:block;width:100%;height:100%;padding:0 24px;font-size:14px;text-overflow:ellipsis;overflow:hidden;-webkit-transition:color 0.28s ease, background-color 0.28s ease;transition:color 0.28s ease, background-color 0.28s ease}.tabs .tab a:focus,.tabs .tab a:focus.active{background-color:rgb(var(--color), 0.2);outline:none}.tabs .tab a.active,.tabs .tab a:hover{background-color:transparent;color:rgb(var(--color))}.tabs .indicator{position:absolute;bottom:0;height:3px;background-color:rgb(var(--color), 0.4);will-change:left, right}";var x=class extends r{static init(){super.init(".chip-placeholder","anvil-extras-chip")}constructor(t,e,i){super(t,e,i);i.remove(),this.label=e._anvil.components[0].component,this.link=e._anvil.components[1].component,this.linkNode=this.link._anvil.domNode,this.linkNode.classList.remove("anvil-container")}setProp(t,e,i){switch(t){case"visible":this.updateVisible(i);break;case"spacing_above":case"spacing_below":this.updateSpacing(i);break;case"text":case"icon":this.label._anvil.setPropJS(t,e);break;case"foreground":this.link._anvil.setPropJS(t,e||"rgba(0,0,0,0.6)"),this.label._anvil.setPropJS(t,e||"rgba(0,0,0,0.6)");break;case"close_icon":this.linkNode.style.display=e?"block":"none";break;case"background":this.pyComponent._anvil.setPropJS(t,e);break}}get[Symbol.toStringTag](){return"Chip"}};x.css=".anvil-extras-chip{height:32px;font-size:14px;font-weight:500;color:rgba(0,0,0,0.6);line-height:32px;padding:0 12px;border-radius:16px;background-color:#e4e4e4;cursor:pointer;display:flex;gap:14px;align-items:center;width:fit-content;padding-left:12px;padding-right:12px}.anvil-extras-chip i.anvil-component-icon.left{font-size:1.5rem}.anvil-extras-chip a{user-select:none}.anvil-extras-chip a .link-text{}.anvil-extras-chip span{padding:0 !important}";var S=class extends r{static init(){x.init(),super.init(".chips-input-placeholder","anvil-extras-chips-input")}constructor(t,e,i){super(t,e,i);i.remove();let s=e._anvil.components[0].component;this.chipNode=s._anvil.domNode,this.input=e._anvil.components[1].component,this.inputNode=this.input._anvil.domNode,this.chips=[],Sk.misceval.callsimArray(s.tp$getattr(new Sk.builtin.str("remove_from_parent")))}setProp(t,e,i){switch(t){case"chips":debugger;e=Array.from(new Set((e||[]).filter(s=>s))),this.chips.forEach(s=>this.domNode.removeChild(s)),this.chips=[],e.forEach((s,n)=>{let a=this.chipNode.cloneNode(!0);a.querySelector("span").textContent=s,this.chips.push(a),this.domNode.insertBefore(a,this.inputNode)}),this.chips.length?this.input._anvil.setPropJS("placeholder",i.secondary_placeholder):this.input._anvil.setPropJS("placeholder",i.primary_placeholder);break;case"spacing_above":case"spacing_below":this.updateSpacing(i);break;case"visible":this.updateVisible(i);break;case"primary_placeholder":!this.chips.length&&this.input._anvil.setPropJS("placeholder",e);break;case"secondary_placeholder":this.chips.length&&this.input._anvil.setPropJS("placeholder",e);break}}get[Symbol.toStringTag](){return"ChipsInput"}};S.css=".anvil-extras-chips-input input{box-shadow:none !important;border:none !important;padding:7px 0 !important;margin-bottom:0 !important;flex:1;min-width:50px}.anvil-extras-chips-input{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid;align-items:center;padding-bottom:4px}";var v=class extends r{static init(){super.init(".pivot-placeholder")}constructor(t,e,i){super(t,e,i);this.pivot=$(t.querySelector(".anvil-extras-pivot"))}update({rows:t,columns:e,values:i,aggregator:s}){let n=[...t,...e,...i,"key A","key B","key C"],a=Object.fromEntries(n.map(c=>[c,1]));this.pivot.pivotUI([a],{rows:t,cols:e,vals:i,aggregatorName:s},!0)}};v.links=["https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.css"],v.scripts=["https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js","https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.js"];export{x as DesignerChip,S as DesignerChipsInput,r as DesignerComponent,b as DesignerMultiSelectDropDown,v as DesignerPivot,u as DesignerQuill,p as DesignerSlider,w as DesignerSwitch,f as DesignerTabs}; From 326c46a7e0b072b9901b602f9bfd92745777285e Mon Sep 17 00:00:00 2001 From: Stu Cork Date: Wed, 26 Jan 2022 19:40:21 +0800 Subject: [PATCH 3/9] Update all designer components with new tag --- client_code/Chip/form_template.yaml | 2 +- client_code/ChipsInput/form_template.yaml | 2 +- client_code/MultiSelectDropDown/form_template.yaml | 2 +- client_code/Pivot/form_template.yaml | 2 +- client_code/Quill/form_template.yaml | 2 +- client_code/Slider/form_template.yaml | 2 +- client_code/Switch/form_template.yaml | 2 +- client_code/Tabs/form_template.yaml | 2 +- js/designer_components/README.md | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/client_code/Chip/form_template.yaml b/client_code/Chip/form_template.yaml index d29fd09a..67be3e59 100644 --- a/client_code/Chip/form_template.yaml +++ b/client_code/Chip/form_template.yaml @@ -36,7 +36,7 @@ container: "} event_bindings: {hide: _form_hide, show: _form_show} diff --git a/client_code/Pivot/form_template.yaml b/client_code/Pivot/form_template.yaml index 6c981c2c..eb01b8e7 100644 --- a/client_code/Pivot/form_template.yaml +++ b/client_code/Pivot/form_template.yaml @@ -14,7 +14,7 @@ container: role: null, html: '
\n\n\n"} diff --git a/js/designer_components/README.md b/js/designer_components/README.md index 8bb3215f..b959d40d 100644 --- a/js/designer_components/README.md +++ b/js/designer_components/README.md @@ -128,7 +128,7 @@ In each designer component, you'll see code like ```html "} event_bindings: {hide: _form_hide, show: _form_show} diff --git a/client_code/Pivot/form_template.yaml b/client_code/Pivot/form_template.yaml index eb01b8e7..e80a6094 100644 --- a/client_code/Pivot/form_template.yaml +++ b/client_code/Pivot/form_template.yaml @@ -14,7 +14,7 @@ container: role: null, html: '
\n\n\n"} diff --git a/js/designer_components/README.md b/js/designer_components/README.md index b959d40d..93a65652 100644 --- a/js/designer_components/README.md +++ b/js/designer_components/README.md @@ -128,7 +128,7 @@ In each designer component, you'll see code like ```html "} event_bindings: {hide: _form_hide, show: _form_show} diff --git a/client_code/Pivot/form_template.yaml b/client_code/Pivot/form_template.yaml index e80a6094..7de27d11 100644 --- a/client_code/Pivot/form_template.yaml +++ b/client_code/Pivot/form_template.yaml @@ -14,7 +14,7 @@ container: role: null, html: '
\n\n\n"} diff --git a/js/designer_components/DesignerSlider.ts b/js/designer_components/DesignerSlider.ts index 6bb723a6..35fc7044 100644 --- a/js/designer_components/DesignerSlider.ts +++ b/js/designer_components/DesignerSlider.ts @@ -14,9 +14,10 @@ interface Formatter { from: (value: string) => number | false; } -const BACKGROUND = "--slider-background"; +const BAR_COLOR = "--slider-bar-color"; const BAR_HEIGHT = "--slider-height"; const HANDLE_SIZE = "--slider-handle-size"; +const HANDLE_COLOR = "--slider-handle-color"; export class DesignerSlider extends DesignerComponent { static defaults = { start: [20, 80], @@ -29,8 +30,9 @@ export class DesignerSlider extends DesignerComponent { static links = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.css"]; static scripts = ["https://cdn.jsdelivr.net/npm/nouislider@15.4.0/dist/nouislider.js"]; static css = `.anvil-slider-container{padding:10px 0}.anvil-slider-container.has-pips{padding-bottom:40px} - .anvil-container-overflow,.anvil-panel-col{overflow:visible}.noUi-connect{background:var(${BACKGROUND})} - .noUi-horizontal{height:var(${BAR_HEIGHT})}.noUi-horizontal .noUi-handle{width:var(${HANDLE_SIZE});height:var(${HANDLE_SIZE});right:calc(var(${HANDLE_SIZE}) / -2);top:calc((-2px + var(${BAR_HEIGHT}) - var(${HANDLE_SIZE}))/2);border-radius:50%} + .anvil-container-overflow,.anvil-panel-col{overflow:visible}.noUi-connect{background:var(${BAR_COLOR})} + .noUi-horizontal{height:var(${BAR_HEIGHT})} + .noUi-horizontal .noUi-handle{width:var(${HANDLE_SIZE});height:var(${HANDLE_SIZE});right:calc(var(${HANDLE_SIZE}) / -2);top:calc((-2px + var(${BAR_HEIGHT}) - var(${HANDLE_SIZE}))/2);background: var(${HANDLE_COLOR});border-radius:50%} .noUi-handle::after,.noUi-handle::before{content:none}`; static init() { super.init(".anvil-slider", "anvil-slider-container"); @@ -123,7 +125,8 @@ export class DesignerSlider extends DesignerComponent { if (this.slider.firstElementChild) { this.slider.removeChild(this.slider.firstElementChild); } - this.domNode.style.setProperty(BACKGROUND, this.getColor(props.color, true)); + this.domNode.style.setProperty(BAR_COLOR, this.getColor(props.color, true)); + this.domNode.style.setProperty(HANDLE_COLOR, this.getColor(props.handle_color, "#fff")); this.updateSpacing(props); this.updateVisible(props); this.updateRole(props); diff --git a/js/designer_components/README.md b/js/designer_components/README.md index 93a65652..e4a8b326 100644 --- a/js/designer_components/README.md +++ b/js/designer_components/README.md @@ -128,7 +128,7 @@ In each designer component, you'll see code like ```html "} event_bindings: {hide: _form_hide, show: _form_show} diff --git a/client_code/Pivot/form_template.yaml b/client_code/Pivot/form_template.yaml index 7de27d11..fb8fddad 100644 --- a/client_code/Pivot/form_template.yaml +++ b/client_code/Pivot/form_template.yaml @@ -14,7 +14,7 @@ container: role: null, html: '
\n\n\n"} diff --git a/docs/guides/components/slider.rst b/docs/guides/components/slider.rst index 86a8fbfd..c07eca08 100644 --- a/docs/guides/components/slider.rst +++ b/docs/guides/components/slider.rst @@ -116,6 +116,18 @@ Properties The color of the bars. Can be set to theme colors like ``'theme:Primary 500'`` or hex values ``'#2196F3'``. +:color: str + + The color of the bars. Can be set to theme colors like ``'theme:Primary 500'`` or hex values ``'#2196F3'``. + +:bar_height: str | int + + The height of the bar. Can be a css length or an integer, which will be set to the pixel height. Defaults to 18. + +:handle_size: str + + The size of the handle. Can be a css length or an integer, which will be the diameter of the handle. Defaults to 34. + :enabled: bool Disable interactivity diff --git a/js/designer_components/DesignerSlider.ts b/js/designer_components/DesignerSlider.ts index 35fc7044..8772e3d2 100644 --- a/js/designer_components/DesignerSlider.ts +++ b/js/designer_components/DesignerSlider.ts @@ -17,7 +17,6 @@ interface Formatter { const BAR_COLOR = "--slider-bar-color"; const BAR_HEIGHT = "--slider-height"; const HANDLE_SIZE = "--slider-handle-size"; -const HANDLE_COLOR = "--slider-handle-color"; export class DesignerSlider extends DesignerComponent { static defaults = { start: [20, 80], @@ -32,7 +31,7 @@ export class DesignerSlider extends DesignerComponent { static css = `.anvil-slider-container{padding:10px 0}.anvil-slider-container.has-pips{padding-bottom:40px} .anvil-container-overflow,.anvil-panel-col{overflow:visible}.noUi-connect{background:var(${BAR_COLOR})} .noUi-horizontal{height:var(${BAR_HEIGHT})} - .noUi-horizontal .noUi-handle{width:var(${HANDLE_SIZE});height:var(${HANDLE_SIZE});right:calc(var(${HANDLE_SIZE}) / -2);top:calc((-2px + var(${BAR_HEIGHT}) - var(${HANDLE_SIZE}))/2);background: var(${HANDLE_COLOR});border-radius:50%} + .noUi-horizontal .noUi-handle{width:var(${HANDLE_SIZE});height:var(${HANDLE_SIZE});right:calc(var(${HANDLE_SIZE}) / -2);top:calc((-2px + var(${BAR_HEIGHT}) - var(${HANDLE_SIZE}))/2);border-radius:50%} .noUi-handle::after,.noUi-handle::before{content:none}`; static init() { super.init(".anvil-slider", "anvil-slider-container"); @@ -126,7 +125,6 @@ export class DesignerSlider extends DesignerComponent { this.slider.removeChild(this.slider.firstElementChild); } this.domNode.style.setProperty(BAR_COLOR, this.getColor(props.color, true)); - this.domNode.style.setProperty(HANDLE_COLOR, this.getColor(props.handle_color, "#fff")); this.updateSpacing(props); this.updateVisible(props); this.updateRole(props); diff --git a/js/designer_components/README.md b/js/designer_components/README.md index e4a8b326..02386b9a 100644 --- a/js/designer_components/README.md +++ b/js/designer_components/README.md @@ -128,7 +128,7 @@ In each designer component, you'll see code like ```html