feat(menu): Able to create nested menu

Fixes #92 and Fixes #114
A-l-y-l-e · May 8, 2020 · d4613f9 · d4613f9
1 parent 90f6f9c
commit d4613f9
Show file tree

Hide file tree

Showing 23 changed files with 482 additions and 103 deletions.
diff --git a/src/api/docs/components/menu.html b/src/api/docs/components/menu.html
@@ -4,6 +4,10 @@ <h1 id="menu">Menu</h1>
 <demo-view path="docs/components/menu-demo/menu-demo-01">
   <aui-menu-demo-01></aui-menu-demo-01>
 </demo-view>
+<h2 id="nested-menu">Nested Menu</h2>
+<demo-view path="docs/components/menu-demo/nested-menu">
+  <aui-nested-menu></aui-nested-menu>
+</demo-view>
 <h2 id="menu-playground">Menu Playground</h2>
 <demo-view path="docs/components/menu-demo/menu-playground">
   <aui-menu-playground></aui-menu-playground>

diff --git a/src/api/docs/customization/color.html b/src/api/docs/customization/color.html
@@ -5,24 +5,24 @@ <h1 id="color">Color</h1>
 <h2 id="supported-values">Supported values</h2>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._77pu926f{background:rgb(255,255,0);opacity:1;}._77pu926f *{color:#202020 !important;}</style><span class="_77pu926f"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
-<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._3cwc9ubv{background:rgb(0,0,0);opacity:1;}._3cwc9ubv *{color:white !important;}</style><span class="_3cwc9ubv"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
-<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._dbq40ikt{background:rgb(255,255,255);opacity:1;}._dbq40ikt *{color:#202020 !important;}</style><span class="_dbq40ikt"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
-<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._ilzjinr2{background:rgba(0,0,0,0.87);opacity:0.87;}._ilzjinr2 *{color:white !important;}</style><span class="_ilzjinr2"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._6ly1z3qw{background:rgb(255,255,0);opacity:1;}._6ly1z3qw *{color:#202020 !important;}</style><span class="_6ly1z3qw"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
+<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._ah70pubg{background:rgb(0,0,0);opacity:1;}._ah70pubg *{color:white !important;}</style><span class="_ah70pubg"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
+<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._dk9l5q6z{background:rgb(255,255,255);opacity:1;}._dk9l5q6z *{color:#202020 !important;}</style><span class="_dk9l5q6z"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
+<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._2pxk4o7o{background:rgba(0,0,0,0.87);opacity:0.87;}._2pxk4o7o *{color:white !important;}</style><span class="_2pxk4o7o"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
 </code></pre>
 <p>Note that a 6-digit hexadecimal is different from a 3-digit hexadecimal.</p>
-<pre class="ttb"><code prsm class="ttm"><style>._jiwtbuuv{background:rgb(255,255,255);opacity:1;}._jiwtbuuv *{color:#202020 !important;}</style><span class="_jiwtbuuv"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._h5b6wv8z{background:rgb(0,15,255);opacity:1;}._h5b6wv8z *{color:white !important;}</style><span class="_h5b6wv8z"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
+<pre class="ttb"><code prsm class="ttm"><style>._b2b9fith{background:rgb(255,255,255);opacity:1;}._b2b9fith *{color:#202020 !important;}</style><span class="_b2b9fith"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._96pnlfz9{background:rgb(0,15,255);opacity:1;}._96pnlfz9 *{color:white !important;}</style><span class="_96pnlfz9"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
 </code></pre>
 <h2 id="how-to-use-color">How to use <code class="ttm ttx">color</code></h2>
 <p><code class="ttm ttx">color</code> and the previously mentioned methods returns an immutable <code class="ttm ttx">Color</code>.</p>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._auc9czxe{background:rgb(255,255,0);opacity:1;}._auc9czxe *{color:#202020 !important;}</style><span class="_auc9czxe"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._44hhgobc{background:rgb(255,255,0);opacity:1;}._44hhgobc *{color:#202020 !important;}</style><span class="_44hhgobc"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 </code></pre>
 <p>Using methods:</p>
-<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._hilh7c48{background:rgb(255,255,0);opacity:1;}._hilh7c48 *{color:#202020 !important;}</style><span class="_hilh7c48"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._5fqntc7a{background:rgb(255,255,0);opacity:1;}._5fqntc7a *{color:#202020 !important;}</style><span class="_5fqntc7a"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 Yellow<span class="tt18 ttae">.</span><span class="tt18 tta3">darken</span><span class="tt18 ttae">(</span><span class="tt18 ttap">2</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">alpha</span><span class="tt18 ttae">(</span><span class="tt18 ttap">.94</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgba(145,156,0,0.94)</span>
 </code></pre>
-<pre class="ttb"><code prsm class="ttm"><style>._6ofkyssl{background:rgb(255,255,255);opacity:1;}._6ofkyssl *{color:#202020 !important;}</style><span class="_6ofkyssl"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
-<style>._cjtijaip{background:rgb(255,255,255);opacity:1;}._cjtijaip *{color:#202020 !important;}</style><span class="_cjtijaip"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
+<pre class="ttb"><code prsm class="ttm"><style>._eb70xvmj{background:rgb(255,255,255);opacity:1;}._eb70xvmj *{color:#202020 !important;}</style><span class="_eb70xvmj"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
+<style>._9wip4vgz{background:rgb(255,255,255);opacity:1;}._9wip4vgz *{color:#202020 !important;}</style><span class="_9wip4vgz"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
 </code></pre>
diff --git a/src/api/docs/customization/theming.html b/src/api/docs/customization/theming.html
@@ -25,12 +25,12 @@ <h2 id="overwriting-the-variables-of-a-theme">Overwriting the variables of a the
 <span class="tt18 tt1j">export</span> <span class="tt18 tt1j">class</span> <span class="tt18 ttc8">CustomMinimaLight</span> <span class="tt18 tt1j">implements</span> <span class="tt18 ttc8">PartialThemeVariables</span> <span class="tt18 ttae">&#123;</span>
   name <span class="tt18 ttb0">=</span> <span class="tt18 tt3z">'minima-light'</span><span class="tt18 ttae">;</span>
   primary <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
-    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._82m36uib{background:rgb(33,150,243);opacity:1;}._82m36uib *{color:white !important;}</style><span class="_82m36uib"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x2196f3</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
-    contrast<span class="tt18 ttb0">:</span> <style>._hiqgkkay{background:rgb(255,255,255);opacity:1;}._hiqgkkay *{color:#202020 !important;}</style><span class="_hiqgkkay"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
+    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._5xp2uct0{background:rgb(33,150,243);opacity:1;}._5xp2uct0 *{color:white !important;}</style><span class="_5xp2uct0"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x2196f3</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
+    contrast<span class="tt18 ttb0">:</span> <style>._vmlvrev{background:rgb(255,255,255);opacity:1;}._vmlvrev *{color:#202020 !important;}</style><span class="_vmlvrev"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
   <span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
   accent <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
-    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._6egstnyg{background:rgb(233,30,99);opacity:1;}._6egstnyg *{color:white !important;}</style><span class="_6egstnyg"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xe91e63</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
-    contrast<span class="tt18 ttb0">:</span> <style>._3w9fwb6p{background:rgb(255,255,255);opacity:1;}._3w9fwb6p *{color:#202020 !important;}</style><span class="_3w9fwb6p"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
+    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._qgewklt{background:rgb(233,30,99);opacity:1;}._qgewklt *{color:white !important;}</style><span class="_qgewklt"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xe91e63</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
+    contrast<span class="tt18 ttb0">:</span> <style>._6376zqy{background:rgb(255,255,255);opacity:1;}._6376zqy *{color:#202020 !important;}</style><span class="_6376zqy"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
   <span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
 <span class="tt18 ttae">&#125;</span>
 
@@ -41,12 +41,12 @@ <h2 id="overwriting-the-variables-of-a-theme">Overwriting the variables of a the
 <span class="tt18 tt1j">export</span> <span class="tt18 tt1j">class</span> <span class="tt18 ttc8">CustomMinimaDark</span> <span class="tt18 tt1j">implements</span> <span class="tt18 ttc8">PartialThemeVariables</span> <span class="tt18 ttae">&#123;</span>
   name <span class="tt18 ttb0">=</span> <span class="tt18 tt3z">'minima-dark'</span><span class="tt18 ttae">;</span>
   primary <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
-    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._ashr5m4o{background:rgb(156,39,176);opacity:1;}._ashr5m4o *{color:white !important;}</style><span class="_ashr5m4o"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x9c27b0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
-    contrast<span class="tt18 ttb0">:</span> <style>._g0ixoom4{background:rgb(255,255,255);opacity:1;}._g0ixoom4 *{color:#202020 !important;}</style><span class="_g0ixoom4"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
+    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._acybzfrj{background:rgb(156,39,176);opacity:1;}._acybzfrj *{color:white !important;}</style><span class="_acybzfrj"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x9c27b0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
+    contrast<span class="tt18 ttb0">:</span> <style>._3z5yowgu{background:rgb(255,255,255);opacity:1;}._3z5yowgu *{color:#202020 !important;}</style><span class="_3z5yowgu"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
   <span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
   accent <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
-    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._ilb6nm8g{background:rgb(105,240,174);opacity:1;}._ilb6nm8g *{color:#202020 !important;}</style><span class="_ilb6nm8g"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x69f0ae</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
-    contrast<span class="tt18 ttb0">:</span> <style>._6z0itcp4{background:rgb(32,32,32);opacity:1;}._6z0itcp4 *{color:white !important;}</style><span class="_6z0itcp4"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x202020</span><span class="tt18 ttae">)</span></span>
+    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._he44hyuk{background:rgb(105,240,174);opacity:1;}._he44hyuk *{color:#202020 !important;}</style><span class="_he44hyuk"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x69f0ae</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
+    contrast<span class="tt18 ttb0">:</span> <style>._dpy1z9wx{background:rgb(32,32,32);opacity:1;}._dpy1z9wx *{color:white !important;}</style><span class="_dpy1z9wx"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x202020</span><span class="tt18 ttae">)</span></span>
   <span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
 <span class="tt18 ttae">&#125;</span>