This is an automated email from the ASF dual-hosted git repository.
harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 29246cbe68 Add accordion, other changes
29246cbe68 is described below
commit 29246cbe68c55d7e71d2ab6158c36686f4b4677d
Author: Harbs <[email protected]>
AuthorDate: Sun Mar 29 15:28:19 2026 +0300
Add accordion, other changes
---
.../projects/Style/src/main/resources/defaults.css | 13 +-
.../Style/src/main/resources/style-manifest.xml | 8 ++
.../royale/org/apache/royale/style/Accordion.as | 102 ++++++++++++++
.../typography/TextSize.as => AccordionContent.as} | 53 ++++---
.../org/apache/royale/style/AccordionSection.as | 154 +++++++++++++++++++++
.../royale/org/apache/royale/style/CheckBox.as | 4 +-
.../royale/org/apache/royale/style/IStyleUIBase.as | 5 +
.../royale/org/apache/royale/style/StyleUIBase.as | 10 ++
.../states/CheckedState.as => elements/Details.as} | 15 +-
.../states/CheckedState.as => elements/Summary.as} | 15 +-
.../royale/style/skins/AccordionContentSkin.as | 64 +++++++++
.../royale/style/skins/AccordionSectionSkin.as | 141 +++++++++++++++++++
.../org/apache/royale/style/skins/AccordionSkin.as | 65 +++++++++
.../IAccordionSectionSkin.as} | 15 +-
.../LastState.as => skins/IAccordionSkin.as} | 13 +-
.../royale/style/stylebeads/states/CheckedState.as | 3 +-
.../style/stylebeads/states/DisabledState.as | 3 +-
.../royale/style/stylebeads/states/EvenState.as | 4 +-
.../royale/style/stylebeads/states/FirstState.as | 4 +-
.../style/stylebeads/states/FocusVisibleState.as | 3 +-
.../royale/style/stylebeads/states/HasState.as | 3 +-
.../royale/style/stylebeads/states/HoverState.as | 3 +-
.../style/stylebeads/states/IndeterminateState.as | 3 +-
.../royale/style/stylebeads/states/LastState.as | 4 +-
.../style/stylebeads/states/LeafDecorator.as | 4 +-
.../royale/style/stylebeads/states/NotState.as | 3 +-
.../royale/style/stylebeads/states/OddState.as | 4 +-
.../royale/style/stylebeads/states/PeerPseudo.as | 3 +-
.../attribute/{DataState.as => AttributeState.as} | 32 ++---
.../style/stylebeads/states/attribute/DataState.as | 25 ++--
.../royale/style/stylebeads/typography/FontSize.as | 2 +-
.../royale/style/stylebeads/typography/TextSize.as | 26 ++--
32 files changed, 685 insertions(+), 121 deletions(-)
diff --git a/frameworks/projects/Style/src/main/resources/defaults.css
b/frameworks/projects/Style/src/main/resources/defaults.css
index 69f04620a9..297f33e72e 100644
--- a/frameworks/projects/Style/src/main/resources/defaults.css
+++ b/frameworks/projects/Style/src/main/resources/defaults.css
@@ -30,7 +30,18 @@
box-sizing: border-box;
border: 0 solid;
}
-
+Accordion
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.AccordionSkin");
+}
+AccordionSection
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.AccordionSectionSkin");
+}
+AccordionContent
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.AccordionContentSkin");
+}
View
{
IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/style-manifest.xml
index 212b37a7b5..297add2c05 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -20,6 +20,9 @@
<componentPackage>
+ <component id="Accordion" class="org.apache.royale.style.Accordion"/>
+ <component id="AccordionSection"
class="org.apache.royale.style.AccordionSection"/>
+ <component id="AccordionContent"
class="org.apache.royale.style.AccordionContent"/>
<component id="Application" class="org.apache.royale.style.Application"/>
<component id="View" class="org.apache.royale.style.View"/>
<component id="Container" class="org.apache.royale.style.Container"/>
@@ -262,6 +265,7 @@
<component id="Code" class="org.apache.royale.style.elements.Code"/>
<component id="Col" class="org.apache.royale.style.elements.Col"/>
<component id="Colgroup" class="org.apache.royale.style.elements.Colgroup"/>
+ <component id="Details" class="org.apache.royale.style.elements.Details"/>
<component id="Div" class="org.apache.royale.style.elements.Div"/>
<component id="Em" class="org.apache.royale.style.elements.Em"/>
<component id="Footer" class="org.apache.royale.style.elements.Footer"/>
@@ -292,6 +296,7 @@
<component id="Small" class="org.apache.royale.style.elements.Small"/>
<component id="Span" class="org.apache.royale.style.elements.Span"/>
<component id="Strong" class="org.apache.royale.style.elements.Strong"/>
+ <component id="Summary" class="org.apache.royale.style.elements.Summary"/>
<component id="Table" class="org.apache.royale.style.elements.Table"/>
<component id="Tbody" class="org.apache.royale.style.elements.Tbody"/>
<component id="Td" class="org.apache.royale.style.elements.Td"/>
@@ -306,5 +311,8 @@
<component id="CheckBoxSkin"
class="org.apache.royale.style.skins.CheckBoxSkin"/>
<component id="DividerSkin"
class="org.apache.royale.style.skins.DividerSkin"/>
+ <component id="AccordionSkin"
class="org.apache.royale.style.skins.AccordionSkin"/>
+ <component id="AccordionSectionSkin"
class="org.apache.royale.style.skins.AccordionSectionSkin"/>
+ <component id="AccordionContentSkin"
class="org.apache.royale.style.skins.AccordionContentSkin"/>
</componentPackage>
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Accordion.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Accordion.as
new file mode 100644
index 0000000000..7ced8c0018
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Accordion.as
@@ -0,0 +1,102 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.Event;
+
+ public class Accordion extends Group
+ {
+ public function Accordion()
+ {
+ super();
+ }
+
+ private var _allowMultiple:Boolean;
+ /**
+ * Whether or not multiple items can be open at once.
+ */
+ public function get allowMultiple():Boolean
+ {
+ return _allowMultiple;
+ }
+ public function set allowMultiple(value:Boolean):void
+ {
+ _allowMultiple = value;
+ }
+
+ /**
+ * @royaleemitcoercion org.apache.royale.style.AccordionSection
+ */
+ override public function addElement(c:IChild,
dispatchEvent:Boolean = true):void
+ {
+ super.addElement(c,dispatchEvent);
+ attachListeners(c);
+ }
+ /**
+ * @royaleemitcoercion org.apache.royale.style.AccordionSection
+ */
+ override public function addElementAt(c:IChild, index:int,
dispatchEvent:Boolean = true):void
+ {
+ super.addElementAt(c,index,dispatchEvent);
+ attachListeners(c);
+ }
+ /**
+ * @royaleemitcoercion org.apache.royale.style.AccordionSection
+ */
+ private function attachListeners(c:IChild):void
+ {
+ if(c is AccordionSection){
+ (c as
IEventDispatcher).addEventListener("openChanged",sectionChangeHandler);
+ }
+ }
+ override public function removeElement(c:IChild,
dispatchEvent:Boolean = true):void
+ {
+ super.removeElement(c,dispatchEvent);
+ if(c is AccordionSection){
+ (c as
IEventDispatcher).removeEventListener("openChanged",sectionChangeHandler);
+ }
+ }
+
+ private function sectionChangeHandler(ev:Event):void{
+ var section:AccordionSection = ev.target as
AccordionSection;
+ if(allowMultiple || !section.open)
+ return;
+
+ for(var i:int=0;i<numElements;i++){
+ var child:AccordionSection = getElementAt(i) as
AccordionSection;
+ if(child != section){
+ child.open = false;
+ }
+ }
+ }
+
+ }
+}
+/**
+ <div class="overflow-hidden rounded-xl border border-slate-300
dark:border-slate-700">
+ <details class="group border-b border-slate-300 bg-slate-50
px-4 last:border-b-0 dark:border-slate-700 dark:bg-slate-800"
name="my-accordion-join-1" open>
+ <summary class="flex cursor-pointer list-none items-center
justify-between py-3 text-sm font-semibold">How do I create an account?<div
class="h-4 w-4 text-slate-500 transition-transform duration-200
group-open:rotate-90"><svg viewBox="0 0 20 20" fill="none"
stroke="currentColor" stroke-width="2"><path d="M7 5l5 5-5 5"
stroke-linecap="round" stroke-linejoin="round"/></svg></div></summary>
+ <div class="pb-3 text-sm text-slate-600
dark:text-slate-300">Click the "Sign Up" button in the top right corner and
follow the registration process.</div>
+ </details>
+ </div>
+
+ */
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextSize.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/AccordionContent.as
similarity index 61%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextSize.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/AccordionContent.as
index dcbfc1dcae..d2f13b0f59 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextSize.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/AccordionContent.as
@@ -16,23 +16,40 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.typography
+package org.apache.royale.style
{
- import org.apache.royale.style.stylebeads.StyleBeadBase;
- import org.apache.royale.style.stylebeads.CompositeStyle;
-
- public class TextSize extends CompositeStyle
- {
- public function TextSize()
- {
- super();
- }
-
- /**
- * TODO: Figure this out
- * Maybe wrap LineHeight and FontSize.
- * https://tailwindcss.com/docs/font-size
- */
-
- }
+
+ public class AccordionContent extends StyleUIBase
+ {
+ public function AccordionContent()
+ {
+ super();
+ }
+
+
+ COMPILE::JS
+ private var _textNode:Text;
+
+ private var _text:String;
+
+ public function get text():String
+ {
+ return _text;
+ }
+
+ public function set text(value:String):void
+ {
+ _text = value;
+ COMPILE::JS
+ {
+ if(!_textNode){
+ _textNode = document.createTextNode(_text) as Text;
+ _element.appendChild(_textNode);
+ }
+ _textNode.nodeValue = value;
+
+ }
+ }
+
+ }
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/AccordionSection.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/AccordionSection.as
new file mode 100644
index 0000000000..f6c9480dd3
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/AccordionSection.as
@@ -0,0 +1,154 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core.IChild;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.style.elements.Summary;
+ import org.apache.royale.style.skins.IAccordionSectionSkin;
+ import org.apache.royale.debugging.assert;
+ import org.apache.royale.style.skins.AccordionSectionSkin;
+
+ [Event(name="openChanged", type="org.apache.royale.events.Event")]
+
+ public class AccordionSection extends Group
+ {
+ public function AccordionSection()
+ {
+ super();
+ }
+
+ private var _headerText:String;
+
+ public function get headerText():String
+ {
+ return headerElem.text;
+ }
+
+ public function set headerText(value:String):void
+ {
+ headerElem.text = value;
+ }
+ private var _disabled:Boolean = false;
+
+ public function get disabled():Boolean
+ {
+ return _disabled;
+ }
+
+ public function set disabled(value:Boolean):void
+ {
+ if(value != _disabled){
+ _disabled = value;
+
+ toggleAttribute("data-disabled", value);
+ }
+ }
+ private var _open:Boolean = false;
+
+ public function get open():Boolean
+ {
+ return _open;
+ }
+
+ public function set open(value:Boolean):void
+ {
+ if(value != _open){
+ _open = value;
+ toggleAttribute("open", value);
+ if(headerIcon){
+ headerIcon.toggleAttribute("data-open",
value);
+ }
+ dispatchEvent(new Event("openChanged"));
+ }
+ }
+ private function toggleSection(ev:MouseEvent):void{
+ if(!disabled){
+ ev.stopPropagation();
+ ev.preventDefault();
+ open = !open;
+ }
+ }
+ /**
+ * modify the following methods to ignore the header element
+ */
+ override public function get numElements():int{
+ return super.numElements -1;
+ }
+ override public function addElementAt(c:IChild, index:int,
dispatchEvent:Boolean = true):void{
+ super.addElementAt(c,index+1,dispatchEvent);
+ }
+ override public function getElementAt(index:int):IChild{
+ return super.getElementAt(index+1);
+ }
+ override public function getElementIndex(c:IChild):int{
+ return super.getElementIndex(c) + 1;
+ }
+
+ protected var headerElem:Summary;
+
+ protected var headerIcon:IStyleUIBase;
+ /**
+ * @royaleignorecoercion
org.apache.royale.style.skins.IAccordionSectionSkin
+ */
+ override protected function applySkin():void
+ {
+ super.applySkin();
+ assert(skin, "AccordionSection requires a skin that
implements IAccordionSectionSkin");
+ headerElem.setStyles((skin as
IAccordionSectionSkin).headerStyles);
+ var icon:IStyleUIBase = (skin as
IAccordionSectionSkin).getIcon();
+ if(icon){
+ headerIcon = icon;
+ headerElem.addElement(headerIcon);
+ if(open)
+ headerIcon.toggleAttribute("data-open",
true);
+ }
+ }
+
+ override protected function getTag():String
+ {
+ return "details";
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement{
+ super.createElement();
+ headerElem = new Summary();
+ headerElem.text = '';
+ headerElem.addEventListener("click",toggleSection);
+ addElement(headerElem);
+
+ return element;
+ }
+
+ }
+}
+/**
+ <details class="group border-b border-slate-300 bg-slate-50
px-4 last:border-b-0 dark:border-slate-700 dark:bg-slate-800"
name="my-accordion-join-1" open>
+ <summary class="flex cursor-pointer list-none items-center
justify-between py-3 text-sm font-semibold">How do I create an account?<div
class="h-4 w-4 text-slate-500 transition-transform duration-200
group-open:rotate-90"><svg viewBox="0 0 20 20" fill="none"
stroke="currentColor" stroke-width="2"><path d="M7 5l5 5-5 5"
stroke-linecap="round" stroke-linejoin="round"/></svg></div></summary>
+ <div class="pb-3 text-sm text-slate-600
dark:text-slate-300">Click the "Sign Up" button in the top right corner and
follow the registration process.</div>
+ </details>
+
+ */
\ No newline at end of file
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 ff5656ab35..4a44cc4740 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
@@ -168,8 +168,8 @@ package org.apache.royale.style
COMPILE::JS
{
if(value != !!_invalid){
- input.setAttribute("aria-invalid",
value);
- setAttribute("data-invalid", value);
+ value ?
input.setAttribute("aria-invalid","") : input.removeAttribute("aria-invalid");
+ toggleAttribute("data-invalid", value);
}
}
_invalid = value;
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 ffcb2f1b67..aeb98086bf 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
@@ -34,6 +34,11 @@ package org.apache.royale.style
function toggleClass(classNameVal:String,add:Boolean):void;
function addStyleBead(bead:IStyleBead):void;
function setStyles(styles:Array, overrideExisting:Boolean =
false):void;
+ function setStyle(property:String, value:Object):void;
+ function toggleAttribute(name:String, value:Boolean):void;
+ function setAttribute(name:String, value:*):void;
+ function getAttribute(name:String):*;
+ function removeAttribute(name:String):void;
function get theme():String;
function get skin():IStyleSkin;
function get unit():String;
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 4f0f2f27b5..2d4cc7d4ea 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
@@ -361,6 +361,16 @@ package org.apache.royale.style
element.style[property] = value;
}
}
+ public function toggleAttribute(name:String, value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ if(value)
+ element.setAttribute(name, "");
+ else
+ element.removeAttribute(name);
+ }
+ }
public function setAttribute(name:String, value:*):void
{
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Details.as
similarity index 79%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Details.as
index 8b48662964..4120a5e707 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Details.as
@@ -16,16 +16,19 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.states
+package org.apache.royale.style.elements
{
- public class CheckedState extends LeafDecorator
+ import org.apache.royale.style.support.TextNodeContainerBase;
+
+ public class Details extends TextNodeContainerBase
{
- public function CheckedState(styles:Array = null)
+ public function Details()
{
super();
- selectorDecorator = "checked:";
- ruleDecorator = ":checked";
- this.styles = styles;
+ }
+ override protected function getTag():String
+ {
+ return "details";
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Summary.as
similarity index 79%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Summary.as
index 8b48662964..4eb6ae4b40 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Summary.as
@@ -16,16 +16,19 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.states
+package org.apache.royale.style.elements
{
- public class CheckedState extends LeafDecorator
+ import org.apache.royale.style.support.TextNodeContainerBase;
+
+ public class Summary extends TextNodeContainerBase
{
- public function CheckedState(styles:Array = null)
+ public function Summary()
{
super();
- selectorDecorator = "checked:";
- ruleDecorator = ":checked";
- this.styles = styles;
+ }
+ override protected function getTag():String
+ {
+ return "summary";
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionContentSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionContentSkin.as
new file mode 100644
index 0000000000..34a9cec155
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionContentSkin.as
@@ -0,0 +1,64 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.AccordionContent;
+ import org.apache.royale.style.colors.ThemeColorSet;
+ import org.apache.royale.style.colors.ColorSwatch;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.stylebeads.spacing.Padding;
+ import org.apache.royale.style.stylebeads.typography.TextSize;
+ import org.apache.royale.style.stylebeads.typography.TextColor;
+
+ public class AccordionContentSkin extends StyleSkin
+ {
+ public function AccordionContentSkin()
+ {
+ super();
+ }
+ /**
+ * @royaleignorecoercion
org.apache.royale.style.AccordionContent
+ */
+ private function get host():AccordionContent
+ {
+ return _strand as AccordionContent;
+ }
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ // Manually set. Don't create the default ones.
+ if(_styles)
+ return;
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+ var textColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.NEUTRAL,600);
+ var padding:Padding = new Padding();
+ padding.bottom = 3;
+ _styles = [
+ padding,
+ new TextSize("sm"),
+ new TextColor(textColor)
+ //TODO dark mode dark:border-slate-300
+ // pb-3 text-sm text-slate-600
dark:text-slate-300
+ ];
+ host.setStyles(_styles);
+ }
+ }
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..58b5da575f
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSectionSkin.as
@@ -0,0 +1,141 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.AccordionSection;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.style.IStyleUIBase;
+ import org.apache.royale.style.Icon;
+ import org.apache.royale.style.stylebeads.sizing.HeightStyle;
+ import org.apache.royale.style.stylebeads.sizing.WidthStyle;
+ import org.apache.royale.style.colors.ThemeColorSet;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.colors.ColorSwatch;
+ import org.apache.royale.style.stylebeads.typography.TextColor;
+ import org.apache.royale.style.stylebeads.anim.Transition;
+ import org.apache.royale.style.stylebeads.anim.TransitionDuration;
+ import org.apache.royale.style.stylebeads.states.attribute.DataState;
+ import org.apache.royale.style.stylebeads.transform.Rotate;
+ import org.apache.royale.style.stylebeads.border.Border;
+ import org.apache.royale.style.stylebeads.border.BorderWidth;
+ import org.apache.royale.style.stylebeads.border.BorderColor;
+ import org.apache.royale.style.stylebeads.background.BackgroundColor;
+ import org.apache.royale.style.stylebeads.states.LastState;
+ import org.apache.royale.style.stylebeads.layout.Display;
+ import org.apache.royale.style.stylebeads.interact.Cursor;
+ import org.apache.royale.style.stylebeads.typography.ListStyleType;
+ import org.apache.royale.style.stylebeads.flexgrid.AlignItems;
+ import org.apache.royale.style.stylebeads.flexgrid.JustifyContent;
+ import org.apache.royale.style.stylebeads.spacing.Padding;
+ import org.apache.royale.style.stylebeads.typography.TextSize;
+ import org.apache.royale.style.stylebeads.typography.FontWeight;
+
+ public class AccordionSectionSkin extends StyleSkin implements
IAccordionSectionSkin
+ {
+ public function AccordionSectionSkin()
+ {
+ super();
+ }
+ /**
+ * @royaleignorecoercion
org.apache.royale.style.AccordionSection
+ */
+ private function get host():AccordionSection
+ {
+ return _strand as AccordionSection;
+ }
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ // Manually set. Don't create the default ones.
+ if(_styles)
+ return;
+
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+ var borderColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.NEUTRAL,300);
+ var bgColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.NEUTRAL,50);
+ var border:BorderWidth = new BorderWidth();
+ border.bottom = 1;
+ var lastBorder:BorderWidth = new BorderWidth();
+ lastBorder.bottom = 0;
+ _styles = [
+ border,
+ new BorderColor(borderColor),
+ new BackgroundColor(bgColor),
+ new TextColor(borderColor),
+ new LastState([
+ lastBorder
+ ])
+ //TODO dark mode dark:border-slate-700
dark:bg-slate-800
+ // group border-b border-slate-300 bg-slate-50
px-4 last:border-b-0 dark:border-slate-700 dark:bg-slate-800
+ ];
+ host.setStyles(_styles);
+ }
+
+ private var _headerStyles:Array;
+
+ public function get headerStyles():Array
+ {
+ if(!_headerStyles)
+ {
+ var padding:Padding = new Padding();
+ padding.block = 3;
+ _headerStyles = [
+ new Display("flex"),
+ new Cursor("pointer"),
+ new ListStyleType("none"),
+ new AlignItems("center"),
+ new JustifyContent("space-between"),
+ padding,
+ new TextSize("sm"),
+ new FontWeight("semibold")
+ ];
+ // flex cursor-pointer list-none items-center
justify-between py-3 text-sm font-semibold
+ }
+ return _headerStyles;
+ }
+
+ public function set headerStyles(value:Array):void
+ {
+ _headerStyles = value;
+ }
+ public function getIcon():IStyleUIBase
+ {
+ var markup:XML = <svg viewBox="0 0 20 20" fill="none"
stroke="currentColor" stroke-width="2"><path d="M7 5l5 5-5 5"
stroke-linecap="round" stroke-linejoin="round"/></svg>
+ var iconName:String = "accordion-arrow-icon";
+ Icon.registerIcon(iconName, markup);
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+ var textColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.NEUTRAL,500);
+ var icon:Icon = new Icon(iconName);
+ icon.styleBeads = [
+ new HeightStyle(4),
+ new WidthStyle(4),
+ new TextColor(textColor),
+ new Transition("transform"),
+ new TransitionDuration(200),
+ new DataState("open"[
+ new Rotate(90)
+ ])
+
+ // h-4 w-4 text-slate-500 transition-transform
duration-200 group-open:rotate-90
+ ];
+ return icon;
+ }
+ }
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..759167dc39
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/AccordionSkin.as
@@ -0,0 +1,65 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.Accordion;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.style.stylebeads.layout.Overflow;
+ import org.apache.royale.style.stylebeads.border.BorderRadius;
+ import org.apache.royale.style.stylebeads.border.Border;
+ import org.apache.royale.style.stylebeads.border.BorderColor;
+ import org.apache.royale.style.colors.ColorSwatch;
+ import org.apache.royale.style.colors.ThemeColorSet;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.stylebeads.border.BorderWidth;
+
+ public class AccordionSkin extends StyleSkin implements IAccordionSkin
+ {
+ public function AccordionSkin()
+ {
+ super();
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.style.Accordion
+ */
+ private function get host():Accordion
+ {
+ return _strand as Accordion;
+ }
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ // Manually set. Don't create the default ones.
+ if(_styles)
+ return;
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+ var borderColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.NEUTRAL,300);
+ _styles = [
+ new Overflow("hidden"),
+ new BorderRadius("xl"),
+ new BorderWidth(1),
+ new BorderColor(borderColor)
+ //TODO dark mode dark:border-slate-700
+// overflow-hidden rounded-xl border border-slate-300 dark:border-slate-700
+ ];
+ host.setStyles(_styles);
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IAccordionSectionSkin.as
similarity index 79%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IAccordionSectionSkin.as
index 705630b423..21a8ddb19a 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IAccordionSectionSkin.as
@@ -16,15 +16,14 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.states
+package org.apache.royale.style.skins
{
- public class LastState extends LeafDecorator
+ import org.apache.royale.style.IStyleSkin;
+ import org.apache.royale.style.IStyleUIBase;
+
+ public interface IAccordionSectionSkin extends IStyleSkin
{
- public function LastState()
- {
- super();
- selectorDecorator = "last:";
- ruleDecorator = ":last-child";
- }
+ function getIcon():IStyleUIBase;
+ function get headerStyles():Array;
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IAccordionSkin.as
similarity index 82%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IAccordionSkin.as
index 705630b423..71c6f4a9c9 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IAccordionSkin.as
@@ -16,15 +16,12 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.states
+package org.apache.royale.style.skins
{
- public class LastState extends LeafDecorator
+ import org.apache.royale.style.IStyleSkin;
+ import org.apache.royale.style.IStyleUIBase;
+
+ public interface IAccordionSkin extends IStyleSkin
{
- public function LastState()
- {
- super();
- selectorDecorator = "last:";
- ruleDecorator = ":last-child";
- }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
index 8b48662964..4e4d2a7fcc 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/CheckedState.as
@@ -22,10 +22,9 @@ package org.apache.royale.style.stylebeads.states
{
public function CheckedState(styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "checked:";
ruleDecorator = ":checked";
- this.styles = styles;
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/DisabledState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/DisabledState.as
index 8761aa5e6e..4b796ac726 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/DisabledState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/DisabledState.as
@@ -22,10 +22,9 @@ package org.apache.royale.style.stylebeads.states
{
public function DisabledState(styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "disabled:";
ruleDecorator = ":disabled";
- this.styles = styles;
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/EvenState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/EvenState.as
index 3226675da8..7c8d9595aa 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/EvenState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/EvenState.as
@@ -20,9 +20,9 @@ package org.apache.royale.style.stylebeads.states
{
public class EvenState extends LeafDecorator
{
- public function EvenState()
+ public function EvenState(styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "even:";
ruleDecorator = ":nth-child(2n)";
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FirstState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FirstState.as
index 5cf160ed54..36a92bada1 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FirstState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/FirstState.as
@@ -20,9 +20,9 @@ package org.apache.royale.style.stylebeads.states
{
public class FirstState extends LeafDecorator
{
- public function FirstState()
+ public function FirstState(styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "first:";
ruleDecorator = ":first-child";
}
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 3c20783213..d31bff1775 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
@@ -22,10 +22,9 @@ package org.apache.royale.style.stylebeads.states
{
public function FocusVisibleState(styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "focus-visible:";
ruleDecorator = ":focus-visible";
- this.styles = styles;
}
}
}
\ 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 9db7f59700..c36d706e87 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
@@ -33,7 +33,7 @@ package org.apache.royale.style.stylebeads.states
*/
public function HasState(selector:* = null, styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "has-";
if (selector is LeafDecorator)
{
@@ -43,7 +43,6 @@ package org.apache.royale.style.stylebeads.states
{
ruleDecorator = selector as String;
}
- this.styles = styles;
decoratorType = COMBINER;
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/HoverState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/HoverState.as
index 74cdf953ea..c854dc2868 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/HoverState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/HoverState.as
@@ -22,10 +22,9 @@ package org.apache.royale.style.stylebeads.states
{
public function HoverState(styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "hover:";
ruleDecorator = ":hover";
- this.styles = styles;
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/IndeterminateState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/IndeterminateState.as
index 49d914bbf1..53d5da0c85 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/IndeterminateState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/IndeterminateState.as
@@ -22,10 +22,9 @@ package org.apache.royale.style.stylebeads.states
{
public function IndeterminateState(styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "indeterminate:";
ruleDecorator = ":indeterminate";
- this.styles = styles;
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
index 705630b423..4c335de773 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LastState.as
@@ -20,9 +20,9 @@ package org.apache.royale.style.stylebeads.states
{
public class LastState extends LeafDecorator
{
- public function LastState()
+ public function LastState(styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "last:";
ruleDecorator = ":last-child";
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LeafDecorator.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LeafDecorator.as
index 37bca49b3d..b2cea709f5 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LeafDecorator.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/LeafDecorator.as
@@ -31,9 +31,11 @@ package org.apache.royale.style.stylebeads.states
protected static const COMBINER:String = "combiner";
protected static const QUERY:String = "query";
- public function LeafDecorator()
+ public function LeafDecorator(styles:Array = null)
{
super();
+ if(styles)
+ this.styles = styles;
}
protected var decoratorType:String = STATE;
protected var selectorDecorator:String;
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/NotState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/NotState.as
index 2df530c36c..42f20d7850 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/NotState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/NotState.as
@@ -29,7 +29,7 @@ package org.apache.royale.style.stylebeads.states
*/
public function NotState(selector:* = null, styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "not-";
if (selector is LeafDecorator)
{
@@ -39,7 +39,6 @@ package org.apache.royale.style.stylebeads.states
{
ruleDecorator = selector as String;
}
- this.styles = styles;
decoratorType = COMBINER;
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/OddState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/OddState.as
index a95c0c07dc..3aa342a2cf 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/OddState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/OddState.as
@@ -20,9 +20,9 @@ package org.apache.royale.style.stylebeads.states
{
public class OddState extends LeafDecorator
{
- public function OddState()
+ public function OddState(styles:Array = null)
{
- super();
+ super(styles);
selectorDecorator = "odd:";
ruleDecorator = ":nth-child(odd)";
}
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 bee03edbb5..7f3eb4179b 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
@@ -26,8 +26,7 @@ package org.apache.royale.style.stylebeads.states
{
public function PeerPseudo(styles:Array = null)
{
- super();
- this.styles = styles;
+ super(styles);
selectorDecorator = "peer-";
ruleDecorator = "peer";
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/DataState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/AttributeState.as
similarity index 73%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/DataState.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/AttributeState.as
index f2b3bf38b9..b9fea0de3d 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/DataState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/AttributeState.as
@@ -1,4 +1,3 @@
-
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -22,36 +21,27 @@ package org.apache.royale.style.stylebeads.states.attribute
import org.apache.royale.style.stylebeads.states.LeafDecorator;
- public class DataState extends LeafDecorator
+ public class AttributeState extends LeafDecorator
{
- public function DataState()
+ public function AttributeState(attribute:String = null,
styles:Array = null)
{
- super();
+ super(styles);
+ if(attribute)
+ this.attribute = attribute;
+
}
- private var _data:String;
+ private var _attribute:String;
- public function get data():String
+ public function get attribute():String
{
- return _data;
+ return _attribute;
}
- public function set data(value:String):void
+ public function set attribute(value:String):void
{
- _data = value;
+ _attribute = value;
selectorDecorator = value + ":";
ruleDecorator = "[" + value + "]";
}
- private var _dataType:String;
-
- public function get dataType():String
- {
- return _dataType;
- }
-
- public function set dataType(value:String):void
- {
- _dataType = value;
- data = "data-" + value;
- }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/DataState.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/DataState.as
index f2b3bf38b9..d93a733875 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/DataState.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/attribute/DataState.as
@@ -22,24 +22,15 @@ package org.apache.royale.style.stylebeads.states.attribute
import org.apache.royale.style.stylebeads.states.LeafDecorator;
- public class DataState extends LeafDecorator
+ public class DataState extends AttributeState
{
- public function DataState()
+ public function DataState(type:String = null, styles:Array =
null)
{
- super();
- }
- private var _data:String;
-
- public function get data():String
- {
- return _data;
- }
-
- public function set data(value:String):void
- {
- _data = value;
- selectorDecorator = value + ":";
- ruleDecorator = "[" + value + "]";
+ super(null, styles);
+ if(type)
+ {
+ dataType = type;
+ }
}
private var _dataType:String;
@@ -51,7 +42,7 @@ package org.apache.royale.style.stylebeads.states.attribute
public function set dataType(value:String):void
{
_dataType = value;
- data = "data-" + value;
+ attribute = "data-" + value;
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontSize.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontSize.as
index 0889ac4e5f..f7d75a1396 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontSize.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/FontSize.as
@@ -29,7 +29,7 @@ package org.apache.royale.style.stylebeads.typography
{
super("font-size", "font-size", value);
}
- [Inspectable(category="General", enumeration="one,two,three",
defaultValue="one")]
+ [Inspectable(category="General",
enumeration="xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl",
defaultValue="base")]
override public function set value(value:*):void
{
calculatedSelector = _value = value;
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextSize.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextSize.as
index dcbfc1dcae..ccafab0d2c 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextSize.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/typography/TextSize.as
@@ -23,16 +23,26 @@ package org.apache.royale.style.stylebeads.typography
public class TextSize extends CompositeStyle
{
- public function TextSize()
+ public function TextSize(value:* = null)
{
super();
+ fontSize = new FontSize();
+ lineHeight = new LineHeight();
+ styles = [fontSize, lineHeight];
+ if(value != null)
+ this.value = value;
}
-
- /**
- * TODO: Figure this out
- * Maybe wrap LineHeight and FontSize.
- * https://tailwindcss.com/docs/font-size
- */
-
+ private var fontSize:FontSize;
+ private var lineHeight:LineHeight;
+ public function get value():*
+ {
+ return _value;
+ }
+ [Inspectable(category="General",
enumeration="xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl",
defaultValue="base")]
+ public function set value(value:*):void
+ {
+ _value = fontSize.value = lineHeight.value = value;
+ }
+ private var _value:*;
}
}
\ No newline at end of file
