From 1e3289ceaf443f60a1a8f9f3cf28e57494943523 Mon Sep 17 00:00:00 2001 From: Esti Braverman Date: Thu, 16 Apr 2026 11:10:20 +0300 Subject: [PATCH 1/3] Added Textarea --- .../Style/src/main/resources/defaults.css | 4 + .../src/main/resources/style-manifest.xml | 2 + .../org/apache/royale/style/Textarea.as | 298 ++++++++++++++++++ .../apache/royale/style/skins/TextareaSkin.as | 144 +++++++++ .../style/stylebeads/states/InvalidState.as | 30 ++ 5 files changed, 478 insertions(+) create mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/Textarea.as create mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TextareaSkin.as create mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/InvalidState.as diff --git a/frameworks/projects/Style/src/main/resources/defaults.css b/frameworks/projects/Style/src/main/resources/defaults.css index 6a03fbfc85..8994960ff1 100644 --- a/frameworks/projects/Style/src/main/resources/defaults.css +++ b/frameworks/projects/Style/src/main/resources/defaults.css @@ -55,6 +55,10 @@ CheckBox { IStyleSkin: ClassReference("org.apache.royale.style.skins.CheckBoxSkin"); } +Textarea +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.TextareaSkin"); +} Dropdown { IStyleSkin: ClassReference("org.apache.royale.style.skins.DropdownSkin"); diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml b/frameworks/projects/Style/src/main/resources/style-manifest.xml index afc610ae5f..6e2c1cc0bc 100644 --- a/frameworks/projects/Style/src/main/resources/style-manifest.xml +++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml @@ -28,6 +28,7 @@ + @@ -279,6 +280,7 @@ + diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Textarea.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Textarea.as new file mode 100644 index 0000000000..e66e50cf14 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Textarea.as @@ -0,0 +1,298 @@ +// ////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +// ////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.style +{ + COMPILE::JS + { + import org.apache.royale.core.WrappedHTMLElement; + } + import org.apache.royale.style.elements.Textarea; + + public class Textarea extends org.apache.royale.style.elements.Textarea + { + public function Textarea() + { + super(); + } + + private var _placeholder:String; + COMPILE::JS + public function set placeholder(value:String):void + { + _placeholder = value; + { + if (element) + element["placeholder"] = value; + } + } + + private var _readonly:Boolean; + + public function get readonly():Boolean + { + return _readonly; + } + + COMPILE::JS + public function set readonly(value:Boolean):void + { + { + if (value != !!_readonly) + { + element["readOnly"] = value; + } + } + _readonly = value; + } + COMPILE::JS + public function get required():Boolean + { + return element["required"]; + } + + COMPILE::JS + public function set required(value:Boolean):void + { + element["required"] = value; + } + COMPILE::JS + public function get invalid():Boolean + { + return !element["validity"]["valid"]; + } + + COMPILE::JS + public function set invalid(value:Boolean):void + { + element["invalid"] = value; + element["setCustomValidity"](value ? "invalid" : ""); + } + + public function get minlength():String + { + COMPILE::JS + { + return element["minLength"].toString(); + } + COMPILE::SWF + { + return ""; + } + } + public function set minlength(value:String):void + { + COMPILE::JS + { + element["minLength"] = parseInt(value); + } + COMPILE::SWF + { + return; + } + } + + public function get maxlength():String + { + COMPILE::JS + { + return element["maxLength"].toString(); + } + COMPILE::SWF + { + return ""; + } + } + public function set maxlength(value:String):void + { + COMPILE::JS + { + element["maxLength"] = parseInt(value); + } + COMPILE::SWF + { + return; + + } + } + + COMPILE::JS + + public function get spellcheck():String + { + COMPILE::JS + { + return element["spellcheck"].toString(); + } + COMPILE::SWF + { + return ""; + } + } + public function set spellcheck(value:String):void + { + COMPILE::JS + { + element["spellcheck"] = (value == "true"); + } + COMPILE::SWF + { + return; + } + } + + public function get wrap():String + { + COMPILE::JS + { + return element["wrap"].toString(); + } + COMPILE::SWF + { + return ""; + } + } + public function set wrap(value:String):void + { + COMPILE::JS + { + element["wrap"] = value; + } + COMPILE::SWF + { + return; + } + } + + public function get form():String + { + COMPILE::JS + { + return element["form"].toString(); + } + COMPILE::SWF + { + return ""; + } + } + public function set form(value:String):void + { + COMPILE::JS + { + element["form"] = value; + } + COMPILE::SWF + { + return; + } + } + + public function get dirname():String + { + COMPILE::JS + { + return element["dirName"].toString(); + } + COMPILE::SWF + { + return ""; + } + } + public function set dirname(value:String):void + { + COMPILE::JS + { + element["dirName"] = value; + } + COMPILE::SWF + { + return; + } + } + + public function get autocorrect():String + { + COMPILE::JS + { + return element["autocorrect"].toString(); + } + COMPILE::SWF + { + return ""; + } + } + public function set autocorrect(value:String):void + { + COMPILE::JS + { + element["autocorrect"] = value; + } + COMPILE::SWF + { + return; + } + } + + public function get autocomplete():String + { + COMPILE::JS + { + return element["autocomplete"].toString(); + } + COMPILE::SWF + { + return ""; + } + } + public function set autocomplete(value:String):void + { + COMPILE::JS + { + element["autocomplete"] = value; + } + COMPILE::SWF + { + return; + } + } + + public function get autocapitalize():String + { + COMPILE::JS + { + return element["autocapitalize"].toString(); + } + COMPILE::SWF + { + return ""; + } + } + public function set autocapitalize(value:String):void + { + COMPILE::JS + { + element["autocapitalize"] = value; + } + COMPILE::SWF + { + return; + } + } + + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TextareaSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TextareaSkin.as new file mode 100644 index 0000000000..e7308faeec --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TextareaSkin.as @@ -0,0 +1,144 @@ +// ////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +// ////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.style.skins +{ + import org.apache.royale.core.IStrand; + import org.apache.royale.style.StyleSkin; + import org.apache.royale.style.Textarea; + import org.apache.royale.style.colors.ColorSwatch; + import org.apache.royale.style.colors.ThemeColorSet; + import org.apache.royale.style.stylebeads.anim.Transition; + import org.apache.royale.style.stylebeads.background.BackgroundColor; + import org.apache.royale.style.stylebeads.border.BorderColor; + import org.apache.royale.style.stylebeads.border.BorderRadius; + import org.apache.royale.style.stylebeads.border.BorderWidth; + import org.apache.royale.style.stylebeads.border.Outline; + import org.apache.royale.style.stylebeads.layout.Display; + import org.apache.royale.style.stylebeads.sizing.HeightStyle; + import org.apache.royale.style.stylebeads.sizing.MaxWidth; + import org.apache.royale.style.stylebeads.sizing.WidthStyle; + import org.apache.royale.style.stylebeads.spacing.Margin; + import org.apache.royale.style.stylebeads.spacing.Padding; + import org.apache.royale.style.stylebeads.states.FocusState; + import org.apache.royale.style.stylebeads.states.FocusVisibleState; + import org.apache.royale.style.stylebeads.states.attribute.AriaState; + import org.apache.royale.style.stylebeads.typography.FontSize; + import org.apache.royale.style.stylebeads.typography.TextColor; + import org.apache.royale.style.util.ThemeManager; + import org.apache.royale.style.stylebeads.states.RequiredState; + import org.apache.royale.style.stylebeads.states.pseudo.PlaceholderState; + import org.apache.royale.style.IIcon; + import org.apache.royale.style.Icon; + import org.apache.royale.style.stylebeads.flexgrid.AlignItems; + import org.apache.royale.style.stylebeads.flexgrid.JustifyContent; + import org.apache.royale.style.stylebeads.svg.Stroke; + import org.apache.royale.style.elements.Th; + import org.apache.royale.style.const.Theme; + import org.apache.royale.style.stylebeads.states.InvalidState; + + public class TextareaSkin extends StyleSkin + { + public function TextareaSkin() + { + super(); + } + + private function get host():Textarea + { + return _strand as Textarea; + } + + override public function set strand(value:IStrand):void + { + super.strand = value; + if (_styles) + return; + var colorSet:ThemeColorSet = ThemeManager.instance.activeTheme.themeColorSet; + var baseColor:ColorSwatch = (host.theme && host.theme != "default") ? colorSet.getSwatch(host.theme, 600) : colorSet.getSwatch(ThemeColorSet.NEUTRAL, 400); + var focusBorder:ColorSwatch = baseColor; + var focusRing:ColorSwatch = baseColor; + var fontSize:String = computeSize(getFontSizePx(), host.unit); + var focusOutline:Outline = new Outline(); + focusOutline.style = "solid"; + focusOutline.width = "2px"; + focusOutline.color = focusRing.colorSpecifier; + focusOutline.offset = "4px"; + var invalidOutline:Outline = new Outline(); + invalidOutline.style = "solid"; + invalidOutline.width = "2px"; + invalidOutline.color = colorSet.getSwatch(ThemeColorSet.ERROR, 500).colorSpecifier; + invalidOutline.offset = "4px"; + var invalidState:InvalidState = new InvalidState([ + new BorderColor(colorSet.getSwatch(ThemeColorSet.ERROR, 500)), + new BorderWidth("1px"), + invalidOutline + ]); + var focusState:FocusState = new FocusState([ + new BorderColor(focusBorder), + new BorderWidth("1px"), + focusOutline + ]); + var margins:Margin = new Margin(); + margins.top = computeSize(12, host.unit); + margins.left = "auto"; + margins.right = "auto"; + var paddings:Padding = new Padding(); + paddings.left = computeSize(12, host.unit); + paddings.right = computeSize(12, host.unit); + paddings.top = computeSize(8, host.unit); + paddings.bottom = computeSize(8, host.unit); + _styles = [ + new BackgroundColor("transparent"), + new BorderWidth("1px"), + new BorderColor(baseColor), + new BorderRadius(ThemeManager.instance.activeTheme.radiusMD), + new MaxWidth(ThemeManager.instance.activeTheme.container2XL), + new TextColor(colorSet.getSwatch(ThemeColorSet.NEUTRAL, 700)), + new FontSize(fontSize), + new WidthStyle("100"), + new HeightStyle(computeSize(96, host.unit)), + margins, + paddings, + new Transition("colors"), + focusState, + invalidState + ]; + host.setStyles(_styles); + } + + private function getFontSizePx():Number + { + switch (host.size) + { + case "xs": + return 13; + case "sm": + return 14; + case "md": + return 16; + case "lg": + return 20; + case "xl": + return 24; + default: + return 16; + } + } + } +} \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/InvalidState.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/InvalidState.as new file mode 100644 index 0000000000..cf402a3fff --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/InvalidState.as @@ -0,0 +1,30 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.style.stylebeads.states +{ + public class InvalidState extends LeafDecorator + { + public function InvalidState(styles:Array = null) + { + super(styles); + selectorDecorator = "invalid:"; + ruleDecorator = ":invalid"; + } + } +} \ No newline at end of file From b8c68b939acac65b00da91c462fd78010276910c Mon Sep 17 00:00:00 2001 From: Esti Braverman Date: Mon, 20 Apr 2026 11:52:00 +0300 Subject: [PATCH 2/3] Revert "Added Textarea" This reverts commit 1e3289ceaf443f60a1a8f9f3cf28e57494943523. --- .../Style/src/main/resources/defaults.css | 4 - .../src/main/resources/style-manifest.xml | 2 - .../org/apache/royale/style/Textarea.as | 298 ------------------ .../apache/royale/style/skins/TextareaSkin.as | 144 --------- .../style/stylebeads/states/InvalidState.as | 30 -- 5 files changed, 478 deletions(-) delete mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/Textarea.as delete mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TextareaSkin.as delete mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/InvalidState.as diff --git a/frameworks/projects/Style/src/main/resources/defaults.css b/frameworks/projects/Style/src/main/resources/defaults.css index 8994960ff1..6a03fbfc85 100644 --- a/frameworks/projects/Style/src/main/resources/defaults.css +++ b/frameworks/projects/Style/src/main/resources/defaults.css @@ -55,10 +55,6 @@ CheckBox { IStyleSkin: ClassReference("org.apache.royale.style.skins.CheckBoxSkin"); } -Textarea -{ - IStyleSkin: ClassReference("org.apache.royale.style.skins.TextareaSkin"); -} Dropdown { IStyleSkin: ClassReference("org.apache.royale.style.skins.DropdownSkin"); diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml b/frameworks/projects/Style/src/main/resources/style-manifest.xml index 6e2c1cc0bc..afc610ae5f 100644 --- a/frameworks/projects/Style/src/main/resources/style-manifest.xml +++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml @@ -28,7 +28,6 @@ - @@ -280,7 +279,6 @@ - diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Textarea.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Textarea.as deleted file mode 100644 index e66e50cf14..0000000000 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Textarea.as +++ /dev/null @@ -1,298 +0,0 @@ -// ////////////////////////////////////////////////////////////////////////////// -// -// Licensed to the Apache Software Foundation (ASF) under one or more -// contributor license agreements. See the NOTICE file distributed with -// this work for additional information regarding copyright ownership. -// The ASF licenses this file to You under the Apache License, Version 2.0 -// (the "License"); you may not use this file except in compliance with -// the License. You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -// -// ////////////////////////////////////////////////////////////////////////////// -package org.apache.royale.style -{ - COMPILE::JS - { - import org.apache.royale.core.WrappedHTMLElement; - } - import org.apache.royale.style.elements.Textarea; - - public class Textarea extends org.apache.royale.style.elements.Textarea - { - public function Textarea() - { - super(); - } - - private var _placeholder:String; - COMPILE::JS - public function set placeholder(value:String):void - { - _placeholder = value; - { - if (element) - element["placeholder"] = value; - } - } - - private var _readonly:Boolean; - - public function get readonly():Boolean - { - return _readonly; - } - - COMPILE::JS - public function set readonly(value:Boolean):void - { - { - if (value != !!_readonly) - { - element["readOnly"] = value; - } - } - _readonly = value; - } - COMPILE::JS - public function get required():Boolean - { - return element["required"]; - } - - COMPILE::JS - public function set required(value:Boolean):void - { - element["required"] = value; - } - COMPILE::JS - public function get invalid():Boolean - { - return !element["validity"]["valid"]; - } - - COMPILE::JS - public function set invalid(value:Boolean):void - { - element["invalid"] = value; - element["setCustomValidity"](value ? "invalid" : ""); - } - - public function get minlength():String - { - COMPILE::JS - { - return element["minLength"].toString(); - } - COMPILE::SWF - { - return ""; - } - } - public function set minlength(value:String):void - { - COMPILE::JS - { - element["minLength"] = parseInt(value); - } - COMPILE::SWF - { - return; - } - } - - public function get maxlength():String - { - COMPILE::JS - { - return element["maxLength"].toString(); - } - COMPILE::SWF - { - return ""; - } - } - public function set maxlength(value:String):void - { - COMPILE::JS - { - element["maxLength"] = parseInt(value); - } - COMPILE::SWF - { - return; - - } - } - - COMPILE::JS - - public function get spellcheck():String - { - COMPILE::JS - { - return element["spellcheck"].toString(); - } - COMPILE::SWF - { - return ""; - } - } - public function set spellcheck(value:String):void - { - COMPILE::JS - { - element["spellcheck"] = (value == "true"); - } - COMPILE::SWF - { - return; - } - } - - public function get wrap():String - { - COMPILE::JS - { - return element["wrap"].toString(); - } - COMPILE::SWF - { - return ""; - } - } - public function set wrap(value:String):void - { - COMPILE::JS - { - element["wrap"] = value; - } - COMPILE::SWF - { - return; - } - } - - public function get form():String - { - COMPILE::JS - { - return element["form"].toString(); - } - COMPILE::SWF - { - return ""; - } - } - public function set form(value:String):void - { - COMPILE::JS - { - element["form"] = value; - } - COMPILE::SWF - { - return; - } - } - - public function get dirname():String - { - COMPILE::JS - { - return element["dirName"].toString(); - } - COMPILE::SWF - { - return ""; - } - } - public function set dirname(value:String):void - { - COMPILE::JS - { - element["dirName"] = value; - } - COMPILE::SWF - { - return; - } - } - - public function get autocorrect():String - { - COMPILE::JS - { - return element["autocorrect"].toString(); - } - COMPILE::SWF - { - return ""; - } - } - public function set autocorrect(value:String):void - { - COMPILE::JS - { - element["autocorrect"] = value; - } - COMPILE::SWF - { - return; - } - } - - public function get autocomplete():String - { - COMPILE::JS - { - return element["autocomplete"].toString(); - } - COMPILE::SWF - { - return ""; - } - } - public function set autocomplete(value:String):void - { - COMPILE::JS - { - element["autocomplete"] = value; - } - COMPILE::SWF - { - return; - } - } - - public function get autocapitalize():String - { - COMPILE::JS - { - return element["autocapitalize"].toString(); - } - COMPILE::SWF - { - return ""; - } - } - public function set autocapitalize(value:String):void - { - COMPILE::JS - { - element["autocapitalize"] = value; - } - COMPILE::SWF - { - return; - } - } - - } -} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TextareaSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TextareaSkin.as deleted file mode 100644 index e7308faeec..0000000000 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TextareaSkin.as +++ /dev/null @@ -1,144 +0,0 @@ -// ////////////////////////////////////////////////////////////////////////////// -// -// Licensed to the Apache Software Foundation (ASF) under one or more -// contributor license agreements. See the NOTICE file distributed with -// this work for additional information regarding copyright ownership. -// The ASF licenses this file to You under the Apache License, Version 2.0 -// (the "License"); you may not use this file except in compliance with -// the License. You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -// -// ////////////////////////////////////////////////////////////////////////////// -package org.apache.royale.style.skins -{ - import org.apache.royale.core.IStrand; - import org.apache.royale.style.StyleSkin; - import org.apache.royale.style.Textarea; - import org.apache.royale.style.colors.ColorSwatch; - import org.apache.royale.style.colors.ThemeColorSet; - import org.apache.royale.style.stylebeads.anim.Transition; - import org.apache.royale.style.stylebeads.background.BackgroundColor; - import org.apache.royale.style.stylebeads.border.BorderColor; - import org.apache.royale.style.stylebeads.border.BorderRadius; - import org.apache.royale.style.stylebeads.border.BorderWidth; - import org.apache.royale.style.stylebeads.border.Outline; - import org.apache.royale.style.stylebeads.layout.Display; - import org.apache.royale.style.stylebeads.sizing.HeightStyle; - import org.apache.royale.style.stylebeads.sizing.MaxWidth; - import org.apache.royale.style.stylebeads.sizing.WidthStyle; - import org.apache.royale.style.stylebeads.spacing.Margin; - import org.apache.royale.style.stylebeads.spacing.Padding; - import org.apache.royale.style.stylebeads.states.FocusState; - import org.apache.royale.style.stylebeads.states.FocusVisibleState; - import org.apache.royale.style.stylebeads.states.attribute.AriaState; - import org.apache.royale.style.stylebeads.typography.FontSize; - import org.apache.royale.style.stylebeads.typography.TextColor; - import org.apache.royale.style.util.ThemeManager; - import org.apache.royale.style.stylebeads.states.RequiredState; - import org.apache.royale.style.stylebeads.states.pseudo.PlaceholderState; - import org.apache.royale.style.IIcon; - import org.apache.royale.style.Icon; - import org.apache.royale.style.stylebeads.flexgrid.AlignItems; - import org.apache.royale.style.stylebeads.flexgrid.JustifyContent; - import org.apache.royale.style.stylebeads.svg.Stroke; - import org.apache.royale.style.elements.Th; - import org.apache.royale.style.const.Theme; - import org.apache.royale.style.stylebeads.states.InvalidState; - - public class TextareaSkin extends StyleSkin - { - public function TextareaSkin() - { - super(); - } - - private function get host():Textarea - { - return _strand as Textarea; - } - - override public function set strand(value:IStrand):void - { - super.strand = value; - if (_styles) - return; - var colorSet:ThemeColorSet = ThemeManager.instance.activeTheme.themeColorSet; - var baseColor:ColorSwatch = (host.theme && host.theme != "default") ? colorSet.getSwatch(host.theme, 600) : colorSet.getSwatch(ThemeColorSet.NEUTRAL, 400); - var focusBorder:ColorSwatch = baseColor; - var focusRing:ColorSwatch = baseColor; - var fontSize:String = computeSize(getFontSizePx(), host.unit); - var focusOutline:Outline = new Outline(); - focusOutline.style = "solid"; - focusOutline.width = "2px"; - focusOutline.color = focusRing.colorSpecifier; - focusOutline.offset = "4px"; - var invalidOutline:Outline = new Outline(); - invalidOutline.style = "solid"; - invalidOutline.width = "2px"; - invalidOutline.color = colorSet.getSwatch(ThemeColorSet.ERROR, 500).colorSpecifier; - invalidOutline.offset = "4px"; - var invalidState:InvalidState = new InvalidState([ - new BorderColor(colorSet.getSwatch(ThemeColorSet.ERROR, 500)), - new BorderWidth("1px"), - invalidOutline - ]); - var focusState:FocusState = new FocusState([ - new BorderColor(focusBorder), - new BorderWidth("1px"), - focusOutline - ]); - var margins:Margin = new Margin(); - margins.top = computeSize(12, host.unit); - margins.left = "auto"; - margins.right = "auto"; - var paddings:Padding = new Padding(); - paddings.left = computeSize(12, host.unit); - paddings.right = computeSize(12, host.unit); - paddings.top = computeSize(8, host.unit); - paddings.bottom = computeSize(8, host.unit); - _styles = [ - new BackgroundColor("transparent"), - new BorderWidth("1px"), - new BorderColor(baseColor), - new BorderRadius(ThemeManager.instance.activeTheme.radiusMD), - new MaxWidth(ThemeManager.instance.activeTheme.container2XL), - new TextColor(colorSet.getSwatch(ThemeColorSet.NEUTRAL, 700)), - new FontSize(fontSize), - new WidthStyle("100"), - new HeightStyle(computeSize(96, host.unit)), - margins, - paddings, - new Transition("colors"), - focusState, - invalidState - ]; - host.setStyles(_styles); - } - - private function getFontSizePx():Number - { - switch (host.size) - { - case "xs": - return 13; - case "sm": - return 14; - case "md": - return 16; - case "lg": - return 20; - case "xl": - return 24; - default: - return 16; - } - } - } -} \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/InvalidState.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/InvalidState.as deleted file mode 100644 index cf402a3fff..0000000000 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/InvalidState.as +++ /dev/null @@ -1,30 +0,0 @@ -//////////////////////////////////////////////////////////////////////////////// -// -// Licensed to the Apache Software Foundation (ASF) under one or more -// contributor license agreements. See the NOTICE file distributed with -// this work for additional information regarding copyright ownership. -// The ASF licenses this file to You under the Apache License, Version 2.0 -// (the "License"); you may not use this file except in compliance with -// the License. You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -// -//////////////////////////////////////////////////////////////////////////////// -package org.apache.royale.style.stylebeads.states -{ - public class InvalidState extends LeafDecorator - { - public function InvalidState(styles:Array = null) - { - super(styles); - selectorDecorator = "invalid:"; - ruleDecorator = ":invalid"; - } - } -} \ No newline at end of file From 9245d59e81b8eeb9f3362c07831854b7d61c9a99 Mon Sep 17 00:00:00 2001 From: Esti Braverman Date: Thu, 23 Apr 2026 12:36:20 +0300 Subject: [PATCH 3/3] Added Fieldset --- .../Style/src/main/resources/defaults.css | 4 + .../src/main/resources/style-manifest.xml | 2 + .../org/apache/royale/style/Fieldset.as | 78 +++++++++++ .../apache/royale/style/elements/Legend.as | 35 +++++ .../apache/royale/style/skins/FieldsetSkin.as | 130 ++++++++++++++++++ 5 files changed, 249 insertions(+) create mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/Fieldset.as create mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Legend.as create mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/FieldsetSkin.as diff --git a/frameworks/projects/Style/src/main/resources/defaults.css b/frameworks/projects/Style/src/main/resources/defaults.css index d244396ccb..a3c69699ce 100644 --- a/frameworks/projects/Style/src/main/resources/defaults.css +++ b/frameworks/projects/Style/src/main/resources/defaults.css @@ -59,6 +59,10 @@ CheckBox { IStyleSkin: ClassReference("org.apache.royale.style.skins.CheckBoxSkin"); } +Fieldset +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.FieldsetSkin"); +} Dropdown { IStyleSkin: ClassReference("org.apache.royale.style.skins.DropdownSkin"); diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml b/frameworks/projects/Style/src/main/resources/style-manifest.xml index 1ce74e9a98..93c7c182d3 100644 --- a/frameworks/projects/Style/src/main/resources/style-manifest.xml +++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml @@ -29,6 +29,7 @@ + @@ -299,6 +300,7 @@ + diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Fieldset.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Fieldset.as new file mode 100644 index 0000000000..0f193dc522 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Fieldset.as @@ -0,0 +1,78 @@ +// ////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +// ////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.style +{ + COMPILE::JS + { + import org.apache.royale.core.WrappedHTMLElement; + } + import org.apache.royale.debugging.assert; + import org.apache.royale.style.elements.Legend; + import org.apache.royale.style.skins.FieldsetSkin; + + public class Fieldset extends Group + { + + public function Fieldset() + { + super(); + } + + private var legend:Legend; + + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + var elem:WrappedHTMLElement = super.createElement(); + legend = new Legend(); + if(_text) + legend.text = _text; + addElement(legend); + return elem; + } + + override protected function applySkin():void + { + var fieldsetSkin:FieldsetSkin = skin as FieldsetSkin; + assert(fieldsetSkin, "Fieldset requires a skin that implements FieldsetSkin"); + if (legend) { + var styles:Array = fieldsetSkin.legendStyles || []; + legend.setStyles(styles); + } + } + + private var _text:String; + COMPILE::JS + public function get text():String + { + return _text; + } + public function set text(value:String):void + { + _text = value; + if(legend) + legend.text = value; + } + + override protected function getTag():String + { + return "fieldset"; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Legend.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Legend.as new file mode 100644 index 0000000000..17daf125cc --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Legend.as @@ -0,0 +1,35 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.style.elements +{ + import org.apache.royale.style.support.TextNodeContainerBase; + + public class Legend extends TextNodeContainerBase + { + public function Legend() + { + super(); + } + + override protected function getTag():String + { + return "legend"; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/FieldsetSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/FieldsetSkin.as new file mode 100644 index 0000000000..82d3ce4272 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/FieldsetSkin.as @@ -0,0 +1,130 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.style.skins +{ + import org.apache.royale.style.StyleSkin; + import org.apache.royale.style.Fieldset; + import org.apache.royale.core.IStrand; + import org.apache.royale.style.colors.ColorSwatch; + import org.apache.royale.style.colors.ThemeColorSet; + import org.apache.royale.style.const.Theme; + import org.apache.royale.style.util.ThemeManager; + import org.apache.royale.style.stylebeads.layout.Display; + import org.apache.royale.style.stylebeads.flexgrid.Gap; + import org.apache.royale.style.stylebeads.flexgrid.AlignItems; + import org.apache.royale.style.stylebeads.flexgrid.JustifyContent; + import org.apache.royale.style.stylebeads.background.BackgroundColor; + import org.apache.royale.style.stylebeads.border.Border; + import org.apache.royale.style.stylebeads.border.BorderRadius; + import org.apache.royale.style.stylebeads.sizing.WidthStyle; + import org.apache.royale.style.stylebeads.spacing.Padding; + import org.apache.royale.style.stylebeads.spacing.Margin; + import org.apache.royale.style.stylebeads.typography.TextSize; + import org.apache.royale.style.stylebeads.typography.FontWeight; + import org.apache.royale.style.stylebeads.typography.TextColor; + import org.apache.royale.style.stylebeads.states.attribute.DataState; + import org.apache.royale.style.stylebeads.sizing.HeightStyle; + + public class FieldsetSkin extends StyleSkin + { + public function FieldsetSkin() + { + super(); + } + + private function get host():Fieldset + { + return _strand as Fieldset; + } + + override public function set strand(value:IStrand):void + { + super.strand = value; + applyStyles(); + } + + private function applyStyles():void + { + if(!_styles) + { + var colorSet:ThemeColorSet = ThemeManager.instance.activeTheme.themeColorSet; + var lightBorderColor:ColorSwatch = colorSet.getSwatch(ThemeColorSet.BASE, 200); + var lightBgColor:ColorSwatch = colorSet.getSwatch(ThemeColorSet.BASE, 50); + var darkBorderColor:ColorSwatch = colorSet.getSwatch(ThemeColorSet.BASE, 700); + var darkBgColor:ColorSwatch = colorSet.getSwatch(ThemeColorSet.BASE, 800); + var lightBorder:Border = new Border(); + lightBorder.color = lightBorderColor.colorSpecifier; + lightBorder.width = "1px"; + var darkBorder:Border = new Border(); + darkBorder.color = darkBorderColor.colorSpecifier; + darkBorder.width = "1px"; + var padding:Padding = new Padding(); + padding.padding = 4; + padding.block = 1; + + _styles = [ + new Display("grid"), + new WidthStyle(80), + new HeightStyle(40), + new Gap(1.5), + new BorderRadius("md"), + lightBorder, + new BackgroundColor(lightBgColor.colorSpecifier), + padding + ]; + host.setStyles(_styles); + } + } + private var _legendStyles:Array; + + public function get legendStyles():Array + { + if(!_legendStyles) + createLegendStyles(); + return _legendStyles; + } + + private function createLegendStyles():void + { + var colorSet:ThemeColorSet = ThemeManager.instance.activeTheme.themeColorSet; + var isDark:Boolean = ThemeManager.instance.current == Theme.DARK; + var textColor:ColorSwatch = colorSet.getSwatch(ThemeColorSet.BASE, isDark ? 100 : 900); + var margin:Margin = new Margin(); + margin.bottom = -1; + var padding:Padding = new Padding(); + padding.block = 2; + _legendStyles = [ + new Display("flex"), + new AlignItems("center"), + new JustifyContent("space-between"), + new Gap(2), + padding, + margin, + new TextSize("sm"), + new FontWeight("semibold"), + new TextColor(textColor.colorSpecifier) + ]; + } + + public function set legendStyles(value:Array):void + { + _legendStyles = value; + } + } +}