feat(switcher): add active component option

adfinis · Aug 3, 2021 · 39c2e36 · 39c2e36
1 parent 537e16e
commit 39c2e36
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/addon/mixins/switcher.js b/addon/mixins/switcher.js
@@ -6,12 +6,14 @@ export default Mixin.create({
   attributeBindings: [
     "ukSwitcher:uk-switcher",
     "connect",
+    "active",
     "animation",
     "animationDuration:duration",
     "swiping",
   ],
 
   contentId: "",
+  active: 0,
   animation: "",
   animationDuration: 200,
   swiping: false,

diff --git a/addon/templates/components/uk-switcher.hbs b/addon/templates/components/uk-switcher.hbs
@@ -1,6 +1,6 @@
 {{yield
   (hash
-    nav=(component "uk-switcher/nav" contentId=contentId animation=animation animationDuration=animationDuration swiping=swiping)
+    nav=(component "uk-switcher/nav" contentId=contentId active=active animation=animation animationDuration=animationDuration swiping=swiping)
     content=(component "uk-switcher/content" elementId=contentId)
   )
 }}
diff --git a/addon/templates/components/uk-switcher/nav.hbs b/addon/templates/components/uk-switcher/nav.hbs
@@ -3,6 +3,7 @@
     component=(component
       componentName
       contentId=contentId
+      active=@active
       animation=@animation
       animationDuration=@animationDuration
       swiping=@swiping

diff --git a/tests/dummy/app/controllers/docs/components/switcher.js b/tests/dummy/app/controllers/docs/components/switcher.js
@@ -1,8 +1,9 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend({
-  type: "tab",
-  animation: "uk-animation-fade",
-  animationDuration: 200,
-  swiping: false,
-});
+export default class SwitcherController extends Controller {
+  type = "tab";
+  active = 0;
+  animation = "uk-animation-fade";
+  animationDuration = 200;
+  swiping = false;
+}
diff --git a/tests/dummy/app/templates/docs/components/switcher.hbs b/tests/dummy/app/templates/docs/components/switcher.hbs
@@ -1,7 +1,7 @@
 <h2>Switcher</h2>
 
 <div class="uk-padding uk-box-shadow-medium uk-margin">
-  <UkSwitcher @animation={{animation}} @animationDuration={{animationDuration}} @swiping={{swiping}} as |switcher|>
+  <UkSwitcher @active={{active}} @animation={{animation}} @animationDuration={{animationDuration}} @swiping={{swiping}} as |switcher|>
     <switcher.nav @type={{type}} as |nav|>
       <nav.component as |tab|>
         <tab.item>Item 1</tab.item>
@@ -68,6 +68,19 @@
             </tr>
           </thead>
           <tbody>
+            <tr>
+              <td><code>active</code></td>
+              <td><code>Number</code></td>
+              <td><code>0</code></td>
+              <td>Active index on init. Providing a negative number indicates a position starting from the end of the set.</td>
+              <td>
+                <small class="uk-text-muted">
+                  Sadly we can't show this live since we"d need to
+                  reinitialize the component on every change. Currently we
+                  use <b>{{active}}</b>.
+                </small>
+              </td>
+            </tr>
             <tr>
               <td><code>animation</code></td>
               <td><code>String</code></td>