Update TabView API and allow inser/remove of tabs

Change-Id: I6b10f539b036811243676f34c0fabe403c263923
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>

14 files changed, 185 insertions, 66 deletions

diff --git a/examples/gallery/content/Controls.qml b/examples/gallery/content/Controls.qml
index c3a37d17..49315d3c 100644
--- a/examples/gallery/content/Controls.qml
+++ b/examples/gallery/content/Controls.qml
@@ -51,7 +51,7 @@ Item {
     anchors.fill: parent
     enabled: enabledCheck.checked
 
-    property string tabPosition: tabPositionGroup.current === r2 ? "South" : "North"
+    property string tabPosition: tabPositionGroup.current === r2 ? "Bottom" : "Top"
 
     Row {
         id: contentRow
@@ -176,7 +176,7 @@ Item {
 
             TextArea {
                 id: area
-                frame: frameCheckbox.checked
+                frameVisible: frameCheckbox.checked
                 text: loremIpsum + loremIpsum
                 KeyNavigation.tab: button1
                 width: contentRow.width - firstColumn.width - contentRow.spacing
diff --git a/examples/gallery/content/Panel.qml b/examples/gallery/content/Panel.qml
index f6081d0b..60905fd7 100644
--- a/examples/gallery/content/Panel.qml
+++ b/examples/gallery/content/Panel.qml
@@ -52,7 +52,7 @@ Rectangle {
     height: 340
     color:"#c3c3c3"
     ScrollView {
-        frame:false
+        frameVisible: false
         anchors.fill: parent
 
         Item {
diff --git a/examples/gallery/main.qml b/examples/gallery/main.qml
index 63047003..6f581f0d 100644
--- a/examples/gallery/main.qml
+++ b/examples/gallery/main.qml
@@ -253,15 +253,17 @@ ApplicationWindow {
     TabView {
         id:frame
         enabled: enabledCheck.checked
-        position: controlPage.tabPosition
+        tabPosition: controlPage.item ? controlPage.item.tabPosition : "Top"
         anchors.top: toolbar.bottom
         anchors.bottom: parent.bottom
         anchors.right: parent.right
         anchors.left: parent.left
         anchors.margins: styleitem.style == "mac" ? 12 : 0
+
         Tab {
+            id: controlPage
             title: "Control"
-            Controls { id: controlPage }
+            Controls { }
         }
         Tab {
             title: "Itemviews"
@@ -269,7 +271,7 @@ ApplicationWindow {
         }
         Tab {
             title: "Styles"
-            Styles { anchors.fill: parent}
+            Styles { anchors.fill: parent }
         }
         Tab {
             title: "Sidebar"
diff --git a/src/controls/ScrollView.qml b/src/controls/ScrollView.qml
index a8f2621a..9c69bc18 100644
--- a/src/controls/ScrollView.qml
+++ b/src/controls/ScrollView.qml
@@ -91,7 +91,7 @@ FocusScope {
 
         The default value is \c false
     */
-    property bool frame: false
+    property bool frameVisible: false
 
     /*!
         This property controls if there should be a highlight
@@ -252,8 +252,8 @@ FocusScope {
         ScrollViewHelper {
             id: scroller
             anchors.fill: parent
-            property int frameWidth: frame ? styleitem.pixelMetric("defaultframewidth") : 0
-            property bool outerFrame: !frame || !styleitem.styleHint("frameOnlyAroundContents")
+            property int frameWidth: frameVisible ? styleitem.pixelMetric("defaultframewidth") : 0
+            property bool outerFrame: !frameVisible || !styleitem.styleHint("frameOnlyAroundContents")
             property int scrollBarSpacing: outerFrame ? 0 : styleitem.pixelMetric("scrollbarspacing")
             property int verticalScrollbarOffset: verticalScrollBar.visible && !verticalScrollBar.isTransient ?
                                                       verticalScrollBar.width + scrollBarSpacing : 0
@@ -264,7 +264,7 @@ FocusScope {
                 id: styleitem
                 elementType: "frame"
                 sunken: true
-                visible: frame
+                visible: frameVisible
                 anchors.fill: parent
                 anchors.rightMargin: scroller.outerFrame ? 0 : scroller.verticalScrollbarOffset
                 anchors.bottomMargin: scroller.outerFrame ? 0 : scroller.horizontalScrollbarOffset
diff --git a/src/controls/Tab.qml b/src/controls/Tab.qml
index fbec51df..91fa7ba9 100644
--- a/src/controls/Tab.qml
+++ b/src/controls/Tab.qml
@@ -45,14 +45,24 @@ import QtQuick 2.0
     \inqmlmodule QtQuick.Controls 1.0
     \ingroup viewaddons
     \brief Tab represents the content of a tab in a TabView.
+
+    A Tab item inherits from Loader and provides a similar
+    api.
 */
 
-Item {
-    id:tab
+Loader {
+    id: tab
     anchors.fill: parent
 
     /*! This property holds the title of the tab. */
     property string title
-
     Accessible.role: Accessible.PageTab
+    active: false
+    visible: false
+
+    /*! \internal */
+    onVisibleChanged: if (visible) active = true
+
+    /*! \internal */
+    default property alias component: tab.sourceComponent
 }
diff --git a/src/controls/TabView.qml b/src/controls/TabView.qml
index fcf34744..d8e84889 100644
--- a/src/controls/TabView.qml
+++ b/src/controls/TabView.qml
@@ -56,48 +56,96 @@ FocusScope {
     width: 100
     height: 100
 
-    property int current: 0
+    /*! The current tab index */
+    property int currentIndex: 0
+
+    /*! The current tab count */
     property int count: 0
-    property bool frame: true
+
+    /*! The visibility of the tab frame around contents */
+    property bool frameVisible: true
+
+    /*! The visibility of the tab bar */
     property bool tabsVisible: true
-    property string position: "North"
-    default property alias tabs : stack.children
-    property Component style: Qt.createComponent(Settings.THEME_PATH + "/TabViewStyle.qml", root)
-    property var __styleItem: loader.item
 
-    onCurrentChanged: __setOpacities()
-    Component.onCompleted: __setOpacities()
+    /*!
+        \qmlproperty string TabView::tabPosition
 
-    function __setOpacities() {
-        var tabCount = 0;
-        for (var i = 0; i < stack.children.length; ++i) {
-            stack.children[i].visible = (i == current ? true : false)
-            // count real tabs - ignore for instance Repeater
-            if (stack.children[i].Accessible.role == Accessible.PageTab)
-                ++tabCount;
-        }
-        root.count = tabCount;
-    }
+        \list
+        \li "Top" (default)
+        \li "Bottom"
+        \endlist
+    */
+    property string tabPosition: "Top"
 
-    Component {
-        id: tabcomp
-        Tab {}
+    /*! \internal */
+    default property alias data: stack.data
+
+    /*! Adds a new tab page with title with and optional Component.
+        \return the newly added tab
+    */
+    function addTab(title, component) {
+        var tab = tabcomp.createObject(this);
+        tab.sourceComponent = component
+        __tabs.push(tab)
+        tab.parent = stack
+        tab.title = title
+        __setOpacities()
+        return tab
     }
 
-    function addTab(component, title) {
+    /*! Inserts a new tab with title at index, with an optional Component.
+        \return the newly added tab
+    */
+    function insertTab(index, title, component) {
         var tab = tabcomp.createObject(this);
-        component.createObject(tab)
+        tab.sourceComponent = component
         tab.parent = stack
         tab.title = title
+        __tabs.splice(index, 0, tab);
         __setOpacities()
         return tab
     }
 
-    function removeTab(id) {
-        var tab = tabs[id]
+    /*! Removes and destroys a tab at the given index */
+    function removeTab(index) {
+        var tab = __tabs[index]
+        __tabs.splice(index, 1);
         tab.destroy()
-        if (current > 0)
-            current-=1
+        if (currentIndex > 0)
+            currentIndex--
+        __setOpacities()
+    }
+
+    /*! Returns the \l Tab item at index */
+    function tabAt(index) {
+        return __tabs[index]
+    }
+
+    /*! \internal */
+    property var __tabs: new Array()
+
+    /*! \internal */
+    property Component style: Qt.createComponent(Settings.THEME_PATH + "/TabViewStyle.qml", root)
+
+    /*! \internal */
+    property var __styleItem: loader.item
+
+    /*! \internal */
+    onCurrentIndexChanged: __setOpacities()
+
+    /*! \internal */
+    function __setOpacities() {
+        for (var i = 0; i < __tabs.length; ++i) {
+            var child = __tabs[i];
+            child.visible = (i == currentIndex ? true : false)
+        }
+        count = __tabs.length
+    }
+
+    Component {
+        id: tabcomp
+        Tab {}
     }
 
     TabBar {
@@ -121,28 +169,39 @@ FocusScope {
         z: tabbarItem.z - 1
 
         anchors.fill: parent
-        anchors.topMargin: tabbarItem && tabsVisible && position == "North" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
-        anchors.bottomMargin: tabbarItem && tabsVisible && position == "South" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
-        sourceComponent: frame && loader.item ? loader.item.frame : null
+        anchors.topMargin: tabbarItem && tabsVisible && tabPosition == "Top" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
+        anchors.bottomMargin: tabbarItem && tabsVisible && tabPosition == "Bottom" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
+        sourceComponent: frameVisible && loader.item ? loader.item.frame : null
         property var control: root
 
         Item {
             id: stack
+
             anchors.fill: parent
-            anchors.margins: (frame ? frameWidth : 0)
+            anchors.margins: (frameVisible ? frameWidth : 0)
             anchors.topMargin: anchors.margins + (style =="mac" ? 6 : 0)
             anchors.bottomMargin: anchors.margins + (style =="mac" ? 6 : 0)
+
             property int frameWidth
             property string style
             property int baseOverlap
+
+            /*! \internal */
+            Component.onCompleted: {
+                for (var i = 0 ; i < stack.children.length ; ++i) {
+                    if (stack.children[i].Accessible.role === Accessible.PageTab)
+                        __tabs.push(stack.children[i])
+                }
+                __setOpacities()
+            }
         }
         onLoaded: { item.z = -1 }
     }
 
     states: [
         State {
-            name: "South"
-            when: position == "South" && tabbarItem != undefined
+            name: "Bottom"
+            when: tabPosition == "Bottom" && tabbarItem != undefined
             PropertyChanges {
                 target: tabbarItem
                 anchors.topMargin: tabbarItem.height
diff --git a/src/controls/TableView.qml b/src/controls/TableView.qml
index d61c9945..b246e6a3 100644
--- a/src/controls/TableView.qml
+++ b/src/controls/TableView.qml
@@ -167,7 +167,7 @@ ScrollView {
 
     /*! This property sets if the frame should be visible.
         The default value is \c true. */
-    frame: true
+    frameVisible: true
 
     /*! Index of the currently selected sort column
         The default value is \c 0. */
diff --git a/src/controls/TextArea.qml b/src/controls/TextArea.qml
index ad317e41..94212022 100644
--- a/src/controls/TextArea.qml
+++ b/src/controls/TextArea.qml
@@ -587,7 +587,7 @@ ScrollView {
     height: 120
 
     flickableItem.contentWidth: edit.paintedWidth + (2 * documentMargins)
-    frame: true
+    frameVisible: true
 
     Accessible.role: Accessible.EditableText
 
diff --git a/src/private/TabBar.qml b/src/private/TabBar.qml
index ad5bdc92..7663270c 100644
--- a/src/private/TabBar.qml
+++ b/src/private/TabBar.qml
@@ -52,7 +52,7 @@ FocusScope {
     width: tabrow.width
 
     Keys.onRightPressed: {
-        if (tabView && tabView.current < tabView.count - 1)
+        if (tabView && tabView.currentIndex < tabView.count - 1)
             tabView.current = tabView.current + 1
     }
     Keys.onLeftPressed: {
@@ -68,7 +68,7 @@ FocusScope {
     property var styleItem: tabView.__styleItem ? tabView.__styleItem : null
 
     property string tabBarAlignment: styleItem ? styleItem.tabBarAlignment : "left"
-    property string position: tabView ? tabView.position : "North"
+    property string position: tabView ? tabView.tabPosition : "Top"
 
     property int tabOverlap: styleItem ? styleItem.tabOverlap : 0
     property int tabBaseOverlap: styleItem ? styleItem.tabBaseOverlap : 0
@@ -111,17 +111,18 @@ FocusScope {
         Repeater {
             id: repeater
             focus: true
-            model: tabView ? tabView.count : null
+            model: tabView.count
+
             delegate: Item {
                 id: tabitem
                 focus: true
 
                 property int tabindex: index
                 property bool selectedHelper: selected
-                property bool selected : tabView.current == index
+                property bool selected : tabView.currentIndex == index
                 property bool hover: mousearea.containsMouse
                 property bool first: index === 0
-                property string title: tabView.tabs[index].title
+                property string title: tabView.__tabs[index].title
 
                 z: selected ? 1 : -index
                 implicitWidth: Math.min(tabloader.implicitWidth, tabbar.width/repeater.count) + 1
@@ -136,8 +137,8 @@ FocusScope {
                     property Item control: tabView
                     property Item tab: tabitem
                     property int index: tabindex
-                    property bool nextSelected: tabView.current === index + 1
-                    property bool previousSelected: tabView.current === index - 1
+                    property bool nextSelected: tabView.currentIndex === index + 1
+                    property bool previousSelected: tabView.currentIndex === index - 1
                     property string title: tab.title
                 }
 
@@ -145,11 +146,11 @@ FocusScope {
                     id: mousearea
                     anchors.fill: parent
                     hoverEnabled: true
-                    onPressed: tabView.current = index
+                    onPressed: tabView.currentIndex = index
                     onPressAndHold: tabitem.parent = null
                 }
                 Accessible.role: Accessible.PageTab
-                Accessible.name: tabView.tabs[index].title
+                Accessible.name: tabView.__tabs[index].title
             }
         }
     }
diff --git a/src/private/qstyleitem.cpp b/src/private/qstyleitem.cpp
index 58077e73..7b7a997d 100644
--- a/src/private/qstyleitem.cpp
+++ b/src/private/qstyleitem.cpp
@@ -287,7 +287,7 @@ void QStyleItem::initStyleOption()
             QString position = hints()[1];
             QString selectedPosition = hints()[2];
 
-            opt->shape = (shape == "South") ? QTabBar::RoundedSouth : QTabBar::RoundedNorth;
+            opt->shape = (shape == "Bottom") ? QTabBar::RoundedSouth : QTabBar::RoundedNorth;
 
             if (position == QLatin1String("beginning"))
                 opt->position = QStyleOptionTab::Beginning;
diff --git a/src/styles/Desktop/TabViewStyle.qml b/src/styles/Desktop/TabViewStyle.qml
index 00bd46a4..20ef36d1 100644
--- a/src/styles/Desktop/TabViewStyle.qml
+++ b/src/styles/Desktop/TabViewStyle.qml
@@ -58,9 +58,9 @@ Style {
         anchors.topMargin: 1//stack.baseOverlap
         z: style == "oxygen" ? 1 : 0
         elementType: "tabframe"
-        hints: position
-        value: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).x : 0
-        minimum: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).width : 0
+        hints: control.tabPosition
+        value: tabbarItem && tabsVisible && tabbarItem.tab(currentIndex) ? tabbarItem.tab(currentIndex).x : 0
+        minimum: tabbarItem && tabsVisible && tabbarItem.tab(currentIndex) ? tabbarItem.tab(currentIndex).width : 0
         maximum: tabbarItem && tabsVisible ? tabbarItem.width : width
         Component.onCompleted: {
             stack.frameWidth = styleitem.pixelMetric("defaultframewidth");
@@ -85,7 +85,7 @@ Style {
             anchors.fill: parent
             anchors.leftMargin: (selected && style == "mac") ? -1 : 0
 
-            hints: [control.position, tabpos, selectedpos]
+            hints: [control.tabsPosition, tabpos, selectedpos]
 
             selected: tab.selected
             text:  title
diff --git a/src/styles/ToolBarStyle.qml b/src/styles/ToolBarStyle.qml
index 82710c4b..ec1612c5 100644
--- a/src/styles/ToolBarStyle.qml
+++ b/src/styles/ToolBarStyle.qml
@@ -48,7 +48,7 @@ import QtQuick.Controls 1.0
 Item {
 
     property int __overlap : 1
-    property string position: "North"
+    property string position: "Top"
     property string tabBarAlignment: "Center"
     property int tabOverlap: 1
     property int tabBaseOverlap: 1
diff --git a/tests/auto/controls/data/tst_scrollview.qml b/tests/auto/controls/data/tst_scrollview.qml
index 95c6cccf..1d8651ed 100644
--- a/tests/auto/controls/data/tst_scrollview.qml
+++ b/tests/auto/controls/data/tst_scrollview.qml
@@ -92,7 +92,7 @@ TestCase {
         verify(scrollView.viewport, "Viewport not defined")
         verify(!scrollView.contentItem, "contentItem should be null")
         verify(!scrollView.flickableItem, "flickableItem should be null")
-        verify(!scrollView.frame, "Frame should be false")
+        verify(!scrollView.frameVisible, "Frame should be false")
 
         scrollView.contentItem = textArea
         verify(scrollView.viewport, "Viewport should be defined")
@@ -101,8 +101,8 @@ TestCase {
         verify(scrollView.flickableItem.contentHeight === textArea.height, "Content height not set")
 
         var prevViewportWidth  = scrollView.viewport.width
-        scrollView.frame = true
-        verify(scrollView.frame, "Frame should be true")
+        scrollView.frameVisible = true
+        verify(scrollView.frameVisible, "Frame should be true")
         verify(scrollView.viewport.width < prevViewportWidth, "Viewport should be smaller with frame")
     }
 }
diff --git a/tests/auto/controls/data/tst_tabview.qml b/tests/auto/controls/data/tst_tabview.qml
index 19661a3f..43afa372 100644
--- a/tests/auto/controls/data/tst_tabview.qml
+++ b/tests/auto/controls/data/tst_tabview.qml
@@ -56,5 +56,52 @@ TestCase {
         var tabView = Qt.createQmlObject('import QtQuick 2.0; import QtQuick.Controls 1.0; TabView { Repeater { model: 3; Tab { } } }', testCase, '');
         compare(tabView.count, 3)
     }
+
+    Component {
+        id: newTab
+        Item {}
+    }
+
+    function test_addRemoveTab() {
+        var tabView = Qt.createQmlObject('import QtQuick 2.0; import QtQuick.Controls 1.0; TabView { }', testCase, '');
+        compare(tabView.count, 0)
+        tabView.addTab("title 1", newTab)
+        compare(tabView.count, 1)
+        tabView.addTab("title 2", newTab)
+        compare(tabView.count, 2)
+        compare(tabView.tabAt(0).title, "title 1")
+        compare(tabView.tabAt(1).title, "title 2")
+
+        tabView.insertTab(1, "title 3")
+        compare(tabView.count, 3)
+        compare(tabView.tabAt(0).title, "title 1")
+        compare(tabView.tabAt(1).title, "title 3")
+        compare(tabView.tabAt(2).title, "title 2")
+
+        tabView.insertTab(0, "title 4")
+        compare(tabView.count, 4)
+        compare(tabView.tabAt(0).title, "title 4")
+        compare(tabView.tabAt(1).title, "title 1")
+        compare(tabView.tabAt(2).title, "title 3")
+        compare(tabView.tabAt(3).title, "title 2")
+
+        tabView.removeTab(0)
+        compare(tabView.count, 3)
+        compare(tabView.tabAt(0).title, "title 1")
+        compare(tabView.tabAt(1).title, "title 3")
+        compare(tabView.tabAt(2).title, "title 2")
+
+        tabView.removeTab(1)
+        compare(tabView.count, 2)
+        compare(tabView.tabAt(0).title, "title 1")
+        compare(tabView.tabAt(1).title, "title 2")
+
+        tabView.removeTab(1)
+        compare(tabView.count, 1)
+        compare(tabView.tabAt(0).title, "title 1")
+
+        tabView.removeTab(0)
+        compare(tabView.count, 0)
+    }
 }