This is an automated email from the ASF dual-hosted git repository. gregdove pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 18029d1e0f96cc7b5385537b945ebbc814c18fd2 Author: greg-dove <[email protected]> AuthorDate: Tue Mar 31 16:22:48 2026 +1300 numerous tweaks to get Checkbox working with data-disabled top level state. And fixes for focus-visible. Some tuning to support units processing consistency (but there remains some exceptions... e.g. Padding and Margin default to px) --- .../royale/org/apache/royale/style/CheckBox.as | 15 +++- .../royale/org/apache/royale/style/IStyleUIBase.as | 4 +- .../royale/org/apache/royale/style/StyleUIBase.as | 43 ++++++++-- .../royale/style/skins/AccordionSectionSkin.as | 2 +- .../org/apache/royale/style/skins/AccordionSkin.as | 2 +- .../org/apache/royale/style/skins/CheckBoxSkin.as | 95 +++++++++++----------- .../royale/style/stylebeads/CompositeStyle.as | 4 - .../royale/style/stylebeads/LeafStyleBase.as | 4 +- .../royale/style/stylebeads/StyleBeadBase.as | 27 +++++- .../royale/style/stylebeads/border/BorderWidth.as | 29 ++++--- .../royale/style/stylebeads/border/Outline.as | 18 +++- .../royale/style/stylebeads/spacing/Margin.as | 13 +-- .../royale/style/stylebeads/spacing/Padding.as | 33 +++----- .../style/stylebeads/states/FocusVisibleState.as | 9 ++ .../states/{PeerPseudo.as => GroupPseudo.as} | 43 ++++++---- .../royale/style/stylebeads/states/HasState.as | 6 +- .../royale/style/stylebeads/states/PeerPseudo.as | 7 +- 17 files changed, 218 insertions(+), 136 deletions(-) diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as index 4a44cc4740..b5c4a9048c 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as @@ -45,6 +45,9 @@ package org.apache.royale.style public function CheckBox() { super(); + //we want group level 'pseudo' styling + //we could use the following for a generic name, or override getWrapperStyle with something specific + //useWrapperStyle = true; } COMPILE::JS private var input:HTMLInputElement; @@ -245,7 +248,8 @@ package org.apache.royale.style COMPILE::JS { if(value != !!_disabled){ - element["disabled"] = input.disabled = value; + input.disabled = value; + toggleAttribute("data-disabled", value); } } _disabled = value; @@ -316,9 +320,12 @@ package org.apache.royale.style { _quiet = value; } - override public function getChildInputType():String - { - return HasState.CHECKBOX_INPUT; + + /** + * @copy org.apache.royale.style.StyleUIBase#getWrapperStyle() + */ + override public function getWrapperStyle():String{ + return 'checkbox'; } } } diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as index aeb98086bf..f049f83b55 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as @@ -46,8 +46,8 @@ package org.apache.royale.style function get size():String; function set size(value:String):void; /** - * support for component classes that wrap a native input element, useful in skins for creating Has states + * support for component classes that provide a wrapper element tagged with this style class (null if not applicable) */ - function getChildInputType():String; + function getWrapperStyle():String; } } \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as index 2d4cc7d4ea..aad441afcb 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as @@ -48,6 +48,14 @@ package org.apache.royale.style */ public class StyleUIBase extends UIBase implements IStyleUIBase { + + /** + * The default class name used for the top-level wrapper element when useWrapperStyle is true. + * This allows child elements to be styled based on the state of the parent (e.g., .style-group[data-disabled] .child). + */ + public static const GROUP_WRAPPER_STYLE:String = 'style-group'; + + /** * Constructor. * @langversion 3.0 @@ -61,6 +69,17 @@ package org.apache.royale.style classList = new CSSClassList(); utilityList = new CSSClassList(); } + + /** + * If true, the component will add a default "group" class to its top-level element. + * This is useful for complex components that need to style their internal elements + * based on the component's top level state. + * + * By default, it uses GROUP_WRAPPER_STYLE ('style-group'). + * Subclasses can override getWrapperStyle() to provide a more specific name. + */ + protected var useWrapperStyle:Boolean; + protected var classList:CSSClassList; protected var utilityList:CSSClassList; @@ -352,7 +371,8 @@ package org.apache.royale.style COMPILE::JS override protected function computeFinalClassNames():String { - return (utilityList.compute() + classList.compute() + super.computeFinalClassNames()).trim(); + var wrapperStyle:String = getWrapperStyle(); + return (wrapperStyle ? wrapperStyle + ' ' : '') + (utilityList.compute() + classList.compute() + super.computeFinalClassNames()).trim(); } public function setStyle(property:String, value:Object):void { @@ -451,13 +471,22 @@ package org.apache.royale.style } /** - * for components that wrap a native input element, this should return the type of the element. - * this can be useful in skinning. - * Null if not applicable - * @return + * Returns the class name to be used on the top-level element for this component instance + * to enable group-based styling for children. + * + * In a skin, this provides access to the wrapper style being used by the component. + * It helps with namespacing Style components and makes it easier to target child elements. + * + * If the subclass sets useWrapperStyle to true in its constructor, the generic + * GROUP_WRAPPER_STYLE ('style-group') will be used by default. + * + * Subclasses can override this method to return a specific class (e.g., 'checkbox') + * for better semantics and higher CSS specificity. + * + * @return the class name to be used on the top-level element, or null if none. */ - public function getChildInputType():String{ - return null; + public function getWrapperStyle():String{ + return useWrapperStyle ? GROUP_WRAPPER_STYLE : null; } /** diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSectionSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSectionSkin.as index 5230f33639..5c6db1bd66 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSectionSkin.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSectionSkin.as @@ -72,7 +72,7 @@ package org.apache.royale.style.skins var borderColor:ColorSwatch = colorSet.getSwatch(ThemeColorSet.NEUTRAL,300); var bgColor:ColorSwatch = colorSet.getSwatch(ThemeColorSet.NEUTRAL,50); var border:BorderWidth = new BorderWidth(); - border.bottom = 1; + border.bottom = .25; var lastBorder:BorderWidth = new BorderWidth(); lastBorder.bottom = 0; var padding:Padding = new Padding(); diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSkin.as index 759167dc39..1f1fdd2b95 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSkin.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSkin.as @@ -54,7 +54,7 @@ package org.apache.royale.style.skins _styles = [ new Overflow("hidden"), new BorderRadius("xl"), - new BorderWidth(1), + new BorderWidth(0.25), new BorderColor(borderColor) //TODO dark mode dark:border-slate-700 // overflow-hidden rounded-xl border border-slate-300 dark:border-slate-700 diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as index f5d04f16d3..5f67b1b051 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as @@ -65,7 +65,12 @@ package org.apache.royale.style.skins import org.apache.royale.style.stylebeads.effects.OpacityStyle; import org.apache.royale.style.stylebeads.flexgrid.GridTemplateColumns; import org.apache.royale.style.stylebeads.flexgrid.ColumnGap; + import org.apache.royale.style.stylebeads.spacing.Padding; + import org.apache.royale.style.stylebeads.spacing.Margin; + import org.apache.royale.style.stylebeads.states.attribute.AttributeState; + import org.apache.royale.style.stylebeads.states.GroupPseudo; + public class CheckBoxSkin extends StyleSkin implements ICheckBoxSkin { public function CheckBoxSkin() @@ -88,39 +93,24 @@ package org.apache.royale.style.skins var size:Number = 16 * getMultiplier(); var box:String = computeSize(size * 1.25, host.unit); - var gap:String = computeSize(size * 0.75, host.unit); + var gapValue:Number = size * 0.75; + var gap:String = computeSize(gapValue, host.unit); - var nativeInput:String = host.getChildInputType(); + // Style components often use a "group" pattern where the wrapper element + // (usually a label) holds the state (like data-disabled), and child elements + // (box, icon, text) respond to that state. + // + // By default, the wrapper has the 'style-group' class, but this can be specific via override (e.g. 'checkbox') + // host.getWrapperStyle() provides this class name to GroupPseudo. - //active cursor options, both currently working at time of testing: - //1. using NotState - - // :not(:has(input[type="checkbox"]:disabled):hover {cursor:pointer} - /*var disabledCondition:LeafDecorator = new HasState(nativeInput, [new DisabledState()]); - var activeCursor:LeafDecorator = new NotState(disabledCondition, [ - new HoverState([ - new Cursor("pointer") - ]) - ]); - _styles = [ - new Display("inline-grid"), - new GridTemplateColumns(box + " auto"), - new AlignItems("center"), - new ColumnGap(gap), - new UserSelect("none"), - new Cursor("auto"), - activeCursor - ];*/ - - //using has - - // :has(input[type="checkbox"]:disabled) { - // cursor: auto; - //} - var disabledState:LeafDecorator = new HasState(nativeInput, [ - new DisabledState([ - new Cursor("auto") - ]) + var disabledState:AttributeState = new AttributeState("data-disabled", [ + new Cursor("auto") ]); + var padding:Padding = new Padding(); + padding.unit = host.unit; + padding.right = gap; + _styles = [ new Display("inline-grid"), new GridTemplateColumns(box + " auto"), @@ -128,6 +118,7 @@ package org.apache.royale.style.skins new ColumnGap(gap), new UserSelect("none"), new Cursor("pointer"), + padding, disabledState ]; @@ -172,9 +163,11 @@ package org.apache.royale.style.skins var size:Number = 16 * getMultiplier(); var box:String = computeSize(size * 1.25, host.unit); var outline:Outline = new Outline(); - outline.width = 2; + outline.unit = host.unit; + outline.width = 0.5; + outline.style = "solid"; outline.color = primaryColor.getVariant(NaN,40).colorSpecifier; - outline.offset = 2; + outline.offset = 0.5; _boxStyles = [ new GridColumnStart("1"), @@ -182,7 +175,7 @@ package org.apache.royale.style.skins new HeightStyle(box), new WidthStyle(box), new BorderRadius(ThemeManager.instance.activeTheme.radiusSM), - new BorderWidth(2), + new BorderWidth(0.5), new BorderColor(enabledBorder), new Transition(), new PeerPseudo([ @@ -194,12 +187,17 @@ package org.apache.royale.style.skins new IndeterminateState([ new BorderColor(primaryColor), new BackgroundColor(primaryColor) - ]), - new DisabledState([ + ]) + ]), + // Apply disabled styles when the parent (wrapper) is disabled. + // host.getWrapperStyle() ensures this matches the component's top-level class. + // This is added at the end so it has higher priority in CSS than PeerPseudo styles. + new GroupPseudo([ + new AttributeState("data-disabled", [ new BorderColor(disabledBorder), new BackgroundColor(disabledFillColor) ]) - ]) + ], host.getWrapperStyle()) ]; } @@ -229,11 +227,11 @@ package org.apache.royale.style.skins new FontSize(fontSize), new FontWeight("600"), new TextColor(enabledColor), - new PeerPseudo([ - new DisabledState([ + new GroupPseudo([ + new AttributeState("data-disabled", [ new TextColor(disabledColor) ]) - ]) + ], host.getWrapperStyle()) ]; } @@ -262,8 +260,9 @@ package org.apache.royale.style.skins transform.rotate = "45deg"; var borderWidth:BorderWidth = new BorderWidth(); - borderWidth.bottom = 3; - borderWidth.right = 3; + borderWidth.bottom = 0.75; + borderWidth.right = 0.75; + var styles:Array = [ new GridColumnStart("1"), new GridRowStart("1"), @@ -281,11 +280,13 @@ package org.apache.royale.style.skins ]), new IndeterminateState([ new OpacityStyle(0) - ]), - new DisabledState([ + ]) + ]), + new GroupPseudo([ + new AttributeState("data-disabled", [ new BorderColor(disabledColor) ]) - ]) + ], host.getWrapperStyle()) ]; _checkIcon.setStyles(styles); // TODO dark mode styles @@ -326,11 +327,13 @@ package org.apache.royale.style.skins new PeerPseudo([ new IndeterminateState([ new OpacityStyle(100) - ]), - new DisabledState([ + ]) + ]), + new GroupPseudo([ + new AttributeState("data-disabled", [ new BackgroundColor(disabledColor) ]) - ]) + ], host.getWrapperStyle()) ]; _indeterminateIcon.setStyles(styles); } diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/CompositeStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/CompositeStyle.as index ee11d841fc..cbd8a5264c 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/CompositeStyle.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/CompositeStyle.as @@ -33,10 +33,6 @@ package org.apache.royale.style.stylebeads { super(); } - override public function get styleType():String - { - return ""; - } /** * Composite styles have no effect, so it should not insert itself into the hierarchy. */ diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/LeafStyleBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/LeafStyleBase.as index 818a186f0a..8f7fa8b173 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/LeafStyleBase.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/LeafStyleBase.as @@ -254,12 +254,12 @@ package org.apache.royale.style.stylebeads private var _unit:String = "rem"; [Inspectable(category="General", enumeration="px,em,rem", defaultValue="rem")] - public function get unit():String + override public function get unit():String { return _unit; } - public function set unit(value:String):void + override public function set unit(value:String):void { _unit = value; } diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as index 4fff129691..1bbe48762f 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as @@ -37,7 +37,7 @@ package org.apache.royale.style.stylebeads * Query styles beads can be nested in each other to generate nested grouping. * Leaf style beads cannot have children. */ - abstract public class StyleBeadBase extends Bead implements IStyleBead + public class StyleBeadBase extends Bead implements IStyleBead { public function StyleBeadBase() { @@ -47,7 +47,10 @@ package org.apache.royale.style.stylebeads * @royalesuppresspublicvarwarning */ public var styles:Array = []; - abstract public function get styleType():String; + public function get styleType():String + { + return null; + } /** * Decorator style beads should override this method to apply their decoration to child styles. */ @@ -71,6 +74,8 @@ package org.apache.royale.style.stylebeads for each(var style:IStyleBead in styles) { style.parentStyle = parentStyle; + if(style is ILeafStyleBead) + (style as ILeafStyleBead).unit = unit; if(style.isLeaf) { retVal.push(style); @@ -114,7 +119,23 @@ package org.apache.royale.style.stylebeads { return null; } - abstract public function decorateChildStyle(style:ILeafStyleBead, decorations:Array):void; + private var _unit:String = "rem"; + /** + * @copy org.apache.royale.style.stylebeads.ILeafStyleBead#unit + */ + public function get unit():String + { + return _unit; + } + + public function set unit(value:String):void + { + _unit = value; + } + public function decorateChildStyle(style:ILeafStyleBead, decorations:Array):void + { + + } public function get isLeaf():Boolean { return false; diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/border/BorderWidth.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/border/BorderWidth.as index 9014c8b7fd..7e17dcc06e 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/border/BorderWidth.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/border/BorderWidth.as @@ -227,18 +227,25 @@ package org.apache.royale.style.stylebeads.border import org.apache.royale.style.stylebeads.LeafStyleBase; -class Width extends LeafStyleBase -{ - public function Width(selectorBase:String = "border", ruleBase:String = "border-width", value:* = null) - { - super(selectorBase, ruleBase, value); - } - override public function set value(value:*):void + class Width extends LeafStyleBase { - _value = value; - calculatedRuleValue = isNum(value) ? value + "px" : acceptVar(value); - calculatedSelector = sanitizeSelector(value); - } + public function Width(selectorBase:String = "border", ruleBase:String = "border-width", value:* = null) + { + super(selectorBase, ruleBase, value); + } + override public function set value(value:*):void + { + _value = value; + if(isNum(value)) + { + calculatedRuleValue = computeSpacing(value); + } + else + { + calculatedRuleValue = acceptVar(value); + } + calculatedSelector = sanitizeSelector(value); + } override public function getSelector():String { if(!calculatedSelector) diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/border/Outline.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/border/Outline.as index f84f36e6c5..c1b797a0e0 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/border/Outline.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/border/Outline.as @@ -135,7 +135,14 @@ class Offset extends LeafStyleBase savedPrefix = selectorBase; _selectorBase = negative ? "-" + savedPrefix : savedPrefix; _value = value; - calculatedRuleValue = value; + if(isNum(value)) + { + calculatedRuleValue = computeSpacing(value); + } + else + { + calculatedRuleValue = acceptVar(value); + } calculatedSelector = sanitizeSelector(value); } } @@ -169,7 +176,14 @@ class Width extends LeafStyleBase override public function set value(value:*):void { _value = value; - calculatedRuleValue = value; + if(isNum(value)) + { + calculatedRuleValue = computeSpacing(value); + } + else + { + calculatedRuleValue = acceptVar(value); + } calculatedSelector = sanitizeSelector(value); } override public function getSelector():String diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/spacing/Margin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/spacing/Margin.as index 6598842427..3f2c852583 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/spacing/Margin.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/spacing/Margin.as @@ -29,8 +29,8 @@ package org.apache.royale.style.stylebeads.spacing { super(); styles = []; + unit = "px"; } - public var unit:String = "px"; private var marginStyle:Marg; private var topStyle:Top; @@ -54,7 +54,6 @@ package org.apache.royale.style.stylebeads.spacing if(!marginStyle) { marginStyle = new Marg(); - marginStyle.unit = unit; styles.push(marginStyle); } marginStyle.value = value; @@ -72,7 +71,6 @@ package org.apache.royale.style.stylebeads.spacing if(!topStyle) { topStyle = new Top(); - topStyle.unit = unit; styles.push(topStyle); } topStyle.value = value; @@ -90,7 +88,6 @@ package org.apache.royale.style.stylebeads.spacing if(!rightStyle) { rightStyle = new Right(); - rightStyle.unit = unit; styles.push(rightStyle); } rightStyle.value = value; @@ -108,7 +105,6 @@ package org.apache.royale.style.stylebeads.spacing if(!bottomStyle) { bottomStyle = new Bottom(); - bottomStyle.unit = unit; styles.push(bottomStyle); } bottomStyle.value = value; @@ -126,7 +122,6 @@ package org.apache.royale.style.stylebeads.spacing if(!leftStyle) { leftStyle = new Left(); - leftStyle.unit = unit; styles.push(leftStyle); } leftStyle.value = value; @@ -144,7 +139,6 @@ package org.apache.royale.style.stylebeads.spacing if(!blockStyle) { blockStyle = new Block(); - blockStyle.unit = unit; styles.push(blockStyle); } blockStyle.value = value; @@ -162,7 +156,6 @@ package org.apache.royale.style.stylebeads.spacing if(!blockStartStyle) { blockStartStyle = new BlockStart(); - blockStartStyle.unit = unit; styles.push(blockStartStyle); } blockStartStyle.value = value; @@ -180,7 +173,6 @@ package org.apache.royale.style.stylebeads.spacing if(!blockEndStyle) { blockEndStyle = new BlockEnd(); - blockEndStyle.unit = unit; styles.push(blockEndStyle); } blockEndStyle.value = value; @@ -198,7 +190,6 @@ package org.apache.royale.style.stylebeads.spacing if(!inlineStyle) { inlineStyle = new Inline(); - inlineStyle.unit = unit; styles.push(inlineStyle); } inlineStyle.value = value; @@ -216,7 +207,6 @@ package org.apache.royale.style.stylebeads.spacing if(!inlineStartStyle) { inlineStartStyle = new InlineStart(); - inlineStartStyle.unit = unit; styles.push(inlineStartStyle); } inlineStartStyle.value = value; @@ -234,7 +224,6 @@ package org.apache.royale.style.stylebeads.spacing if(!inlineEndStyle) { inlineEndStyle = new InlineEnd(); - inlineEndStyle.unit = unit; styles.push(inlineEndStyle); } inlineEndStyle.value = value; diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/spacing/Padding.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/spacing/Padding.as index 1155ad7dfe..bd2b82ace4 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/spacing/Padding.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/spacing/Padding.as @@ -29,10 +29,10 @@ package org.apache.royale.style.stylebeads.spacing { super(); styles = []; + unit = "px"; if(value != null) this.padding = value; } - public var unit:String = "px"; private var paddingStyle:Pad; private var topStyle:Top; private var rightStyle:Right; @@ -55,7 +55,6 @@ package org.apache.royale.style.stylebeads.spacing if(!paddingStyle) { paddingStyle = new Pad(); - paddingStyle.unit = unit; styles.push(paddingStyle); } paddingStyle.value = value; @@ -73,7 +72,6 @@ package org.apache.royale.style.stylebeads.spacing if(!topStyle) { topStyle = new Top(); - topStyle.unit = unit; styles.push(topStyle); } topStyle.value = value; @@ -91,7 +89,6 @@ package org.apache.royale.style.stylebeads.spacing if(!rightStyle) { rightStyle = new Right(); - rightStyle.unit = unit; styles.push(rightStyle); } rightStyle.value = value; @@ -109,7 +106,6 @@ package org.apache.royale.style.stylebeads.spacing if(!bottomStyle) { bottomStyle = new Bottom(); - bottomStyle.unit = unit; styles.push(bottomStyle); } bottomStyle.value = value; @@ -127,7 +123,6 @@ package org.apache.royale.style.stylebeads.spacing if(!leftStyle) { leftStyle = new Left(); - leftStyle.unit = unit; styles.push(leftStyle); } leftStyle.value = value; @@ -145,7 +140,6 @@ package org.apache.royale.style.stylebeads.spacing if(!blockStyle) { blockStyle = new Block(); - blockStyle.unit = unit; styles.push(blockStyle); } blockStyle.value = value; @@ -163,7 +157,6 @@ package org.apache.royale.style.stylebeads.spacing if(!blockStartStyle) { blockStartStyle = new BlockStart(); - blockStartStyle.unit = unit; styles.push(blockStartStyle); } blockStartStyle.value = value; @@ -181,7 +174,6 @@ package org.apache.royale.style.stylebeads.spacing if(!blockEndStyle) { blockEndStyle = new BlockEnd(); - blockEndStyle.unit = unit; styles.push(blockEndStyle); } blockEndStyle.value = value; @@ -199,7 +191,6 @@ package org.apache.royale.style.stylebeads.spacing if(!inlineStyle) { inlineStyle = new Inline(); - inlineStyle.unit = unit; styles.push(inlineStyle); } inlineStyle.value = value; @@ -217,7 +208,6 @@ package org.apache.royale.style.stylebeads.spacing if(!inlineStartStyle) { inlineStartStyle = new InlineStart(); - inlineStartStyle.unit = unit; styles.push(inlineStartStyle); } inlineStartStyle.value = value; @@ -235,7 +225,6 @@ package org.apache.royale.style.stylebeads.spacing if(!inlineEndStyle) { inlineEndStyle = new InlineEnd(); - inlineEndStyle.unit = unit; styles.push(inlineEndStyle); } inlineEndStyle.value = value; @@ -259,19 +248,23 @@ class Pad extends LeafStyleBase { return value.replace(" ", "-"); } - override public function set value(value:*):void + override public function set value(val:*):void { - var selectorValue:String = value; + _value = val; + var selectorValue:String = "" + val; var ruleValue:String = selectorValue; - assert(selectorValue.indexOf("--") != 0, "css variables for grid-template-columns not yet supported: " + value); - if(int(value) == value) + assert(selectorValue.indexOf("--") != 0, "css variables for grid-template-columns not yet supported: " + val); + if(isNum(val)) { - assert(value >= 0, "Invalid value for padding: " + value); - ruleValue = computeSpacing(value); + assert(val >= 0, "Invalid value for padding: " + val); + ruleValue = computeSpacing(val); + } + else + { + ruleValue = acceptVar(val); } - _value = value; calculatedRuleValue = ruleValue; - calculatedSelector = toSelector(value); + calculatedSelector = toSelector(selectorValue); } } class Block extends Pad diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FocusVisibleState.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FocusVisibleState.as index d31bff1775..21dabc7afb 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FocusVisibleState.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FocusVisibleState.as @@ -18,8 +18,17 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.style.stylebeads.states { + /** + * The FocusVisibleState class is a style decorator that applies styles when + * an element is in the :focus-visible state. + */ public class FocusVisibleState extends LeafDecorator { + /** + * Constructor. + * + * @param styles An array of style beads to apply when the element is focus-visible. + */ public function FocusVisibleState(styles:Array = null) { super(styles); diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as similarity index 56% copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as index 7f3eb4179b..902cac0927 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as @@ -18,17 +18,34 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.style.stylebeads.states { - import org.apache.royale.style.stylebeads.IStyleBead; + import org.apache.royale.style.StyleUIBase; import org.apache.royale.style.stylebeads.ILeafStyleBead; import org.apache.royale.style.util.StyleDecoration; - public class PeerPseudo extends LeafDecorator + /** + * The GroupPseudo class is a style decorator that allows child elements to be styled + * based on the state of a parent element. It corresponds to the "group-*" utility + * pattern in CSS frameworks like Tailwind CSS. + * + * The parent element must have a "group" class (defaults to 'style-group'). + * When this decorator is used, it generates CSS rules like: + * .style-group[data-disabled] .child-element { ... } + */ + public class GroupPseudo extends LeafDecorator { - public function PeerPseudo(styles:Array = null) + /** + * Constructor. + * + * @param styles An array of style beads to apply when the group condition is met. + * @param groupClass The CSS class name of the parent element to target. + * If null, it defaults to StyleUIBase.GROUP_WRAPPER_STYLE ('style-group'). + */ + public function GroupPseudo(styles:Array = null, groupClass:String = null) { super(styles); - selectorDecorator = "peer-"; - ruleDecorator = "peer"; + var base:String = groupClass || StyleUIBase.GROUP_WRAPPER_STYLE; + selectorDecorator = base + '-'; + ruleDecorator = base; decoratorType = COMBINER; } @@ -36,25 +53,19 @@ package org.apache.royale.style.stylebeads.states { style.selectorPrefix = selectorDecorator + style.selectorPrefix; - //TODO figure out more complex combinations. For now, just handle limited nesting. var decorationStr:String = "" var len:int = decorations.length; - for(var i:int = 0; i < len; i++) + for(var i:int = len - 1; i >= 0; i--) { - decorationStr += decorations[i].decoration; + if(decorations[i].type == COMBINER) + break; + decorationStr = decorations[i].decoration + decorationStr; } decorations.push(new StyleDecoration(decoratorType, ruleDecorator)); - style.rulePrefix = "." + ruleDecorator + decorationStr + " ~ " + style.rulePrefix; + style.rulePrefix = "." + ruleDecorator + decorationStr + " " + style.rulePrefix; if(parentStyle) parentStyle.decorateChildStyle(style, decorations); } } } -/** - .peer-checked\:border-blue-700 { - &:is(:where(.peer):checked ~ *) { - border-color: var(--color-blue-700); - } -} - */ \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/HasState.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/HasState.as index c36d706e87..79833c2eae 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/HasState.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/HasState.as @@ -61,9 +61,11 @@ package org.apache.royale.style.stylebeads.states //TODO figure out more complex combinations. For now, just handle limited nesting. var decorationStr:String = "" var len:int = decorations.length; - for(var i:int = 0; i < len; i++) + for(var i:int = len - 1; i >= 0; i--) { - decorationStr += decorations[i].decoration; + if(decorations[i].type == COMBINER) + break; + decorationStr = decorations[i].decoration + decorationStr; } var rule:String = ruleDecorator || ""; diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as index 7f3eb4179b..d4ee8c88a3 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as @@ -36,12 +36,13 @@ package org.apache.royale.style.stylebeads.states { style.selectorPrefix = selectorDecorator + style.selectorPrefix; - //TODO figure out more complex combinations. For now, just handle limited nesting. var decorationStr:String = "" var len:int = decorations.length; - for(var i:int = 0; i < len; i++) + for(var i:int = len - 1; i >= 0; i--) { - decorationStr += decorations[i].decoration; + if(decorations[i].type == COMBINER) + break; + decorationStr = decorations[i].decoration + decorationStr; } decorations.push(new StyleDecoration(decoratorType, ruleDecorator));
