### Basic HusTourStep Example

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTourStep.md

Demonstrates the basic usage of HusTourStep by configuring its step model and opening the tour. The example shows how to set step targets, titles, descriptions, and colors using the `stepModel` property. It also includes a radio button to control the `closable` property of the tour.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusButton {
        text: qsTr('漫游步骤')
        type: HusButton.Type_Primary
        onClicked: {
            tourStep.resetStep();
            tourStep.open();
        }

        HusTourStep {
            id: tourStep
            closable: closableRadio.currentCheckedValue
            stepModel: [
                {
                    target: tourStepButton1,
                    title: qsTr('步骤1'),
                    titleColor: '#3fcc9b',
                    description: qsTr('这是步骤1\n========'),
                },
                {
                    target: tourStepButton2,
                    title: qsTr('步骤2'),
                    description: qsTr('这是步骤2\n!!!!!!!!!!'),
                    descriptionColor: '#3116ff'
                },
                {
                    target: tourStep3Button,
                    cardColor: '#ffa2eb',
                    title: qsTr('步骤3'),
                    titleColor: 'red',
                    description: qsTr('这是步骤3\n##############')
                }
            ]
        }
    }

    Row {
        spacing: 10

        HusButton {
            id: tourStepButton1
            text: qsTr('漫游步骤1')
            type: HusButton.Type_Outlined
        }

        HusButton {
            id: tourStepButton2
            text: qsTr('漫游步骤2')
            type: HusButton.Type_Outlined
        }

        HusButton {
            id: tourStep3Button
            text: qsTr('漫游步骤3   ####')
            type: HusButton.Type_Outlined
        }
    }

    HusRadioBlock {
        id: closableRadio
        initCheckedIndex: 0
        model: [
            { label: 'Closable', value: true},
            { label: 'Non-closable', value: false }
        ]
    }
}
```

--------------------------------

### Basic Usage Example

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusColorPicker.md

Demonstrates the simplest way to use the HusColorPicker component.

```APIDOC
## Code Demonstration - Example 1 - Basic Usage

### Description
The simplest usage.

### Request Example
```qml
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusColorPicker {
        defaultValue: '#1677ff'
    }
}
```
```

--------------------------------

### Example 1 - Basic Usage

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTimeline.md

Demonstrates the basic usage of HusTimeline by initializing it with a list of content items.

```APIDOC
## Example 1 - Basic Usage

Initialize the timeline with `initModel`.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusTimeline {
        width: parent.width
        initModel: [
            {
                content: 'Create a services site',
            },
            {
                content: 'Solve initial network problems',
            },
            {
                content: 'Technical testing',
            },
            {
                content: 'Network problems being solved',
            }
        ]
    }
}
```
```

--------------------------------

### Install PyHuskarUI from local build

Source: https://github.com/mengps/pyhuskarui/blob/master/README.md

Install PyHuskarUI after building it from source. Use the -e flag for an editable install if needed.

```auto
uv pip install [-e] ./pyhuskarui
```

--------------------------------

### Example 2 - Node Styling and Icons

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTimeline.md

Shows how to customize node colors, use icons, and set icon sizes using the model's properties.

```APIDOC
## Example 2 - Node Styling and Icons

Customize node colors, use icons, and set icon sizes via model properties.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusTimeline {
        width: parent.width
        initModel: [
            {
                colorNode: HusTheme.Primary.colorSuccess,
                content: 'Create a services site',
            },
            {
                colorNode: HusTheme.Primary.colorError,
                content: 'Solve initial network problems 1\nSolve initial network problems 2\nSolve initial network problems 3',
            },
            {
                colorNode: HusTheme.Primary.colorWarning,
                content: 'Technical testing 1\nTechnical testing 2\nTechnical testing 3',
            },
            {
                content: 'Network problems being solved',
            },
            {
                colorNode: '#00CCFF',
                icon: HusIcon.SmileOutlined,
                iconSize: 20,
                content: 'Custom icon testing',
            }
        ]
    }
}
```
```

--------------------------------

### Install PyHuskarUI using pip

Source: https://github.com/mengps/pyhuskarui/blob/master/README.md

Install the PyHuskarUI package using the uv pip command. This is the recommended method for adding the library to your project.

```auto
uv pip install pyhuskarui
```

--------------------------------

### Basic Usage of HusMultiCheckBox

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusMultiCheckBox.md

Demonstrates the basic setup of HusMultiCheckBox using the 'options' property for data source and 'filterOption' for custom filtering logic. The 'Component.onCompleted' block populates the options dynamically.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusRadioBlock {
        id: sizeHintRadio
        initCheckedIndex: 1
        model: [
            { label: 'Small', value: 'small' },
            { label: 'Normal', value: 'normal' },
            { label: 'Large', value: 'large' },
        ]
    }

    HusMultiCheckBox {
        width: 200
        sizeHint: sizeHintRadio.currentCheckedValue
        filterOption: (input, option) => option.label.toUpperCase().indexOf(input.toUpperCase()) !== -1
        Component.onCompleted: {
            const list = [];
            for (let i = 10; i < 36; i++) {
                list.push({
                              label: i.toString(36) + i,
                              value: i.toString(36) + i,
                          });
            }
            options = list;
        }
    }
}
```

--------------------------------

### Basic HusColorPicker Usage

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusColorPicker.md

Demonstrates the most basic implementation of the HusColorPicker component. No specific setup is required beyond importing the necessary modules.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusColorPicker {
        defaultValue: '#1677ff'
    }
}
```

--------------------------------

### Demonstrate HusRectangle with Customizable Properties

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/General/HusRectangle.md

This example showcases the usage of HusRectangle, demonstrating how to control its border width, style, individual corner radii, and gradient fill. It utilizes various HuskarUI components like HusRadioBlock and HusSlider for interactive adjustments.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 15

    HusRadioBlock {
        id: styleRadio
        initCheckedIndex: 0
        model: [
            { label: qsTr('实线'), value: Qt.SolidLine },
            { label: qsTr('虚线'), value: Qt.DashLine },
            { label: qsTr('虚点线'), value: Qt.DashDotLine },
            { label: qsTr('虚点点线'), value: Qt.DashDotDotLine }
        ]
    }

    HusSlider {
        id: bordrWidthSlider
        width: 150
        height: 30
        min: 0
        max: 20
        stepSize: 1

        HusCopyableText {
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.right
            anchors.leftMargin: 10
            text: qsTr('边框线宽: ') + parent.currentValue.toFixed(0);
        }
    }

    HusSlider {
        id: topLeftSlider
        width: 150
        height: 30
        min: 0
        max: 100
        stepSize: 1

        HusCopyableText {
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.right
            anchors.leftMargin: 10
            text: qsTr('左上圆角: ') + parent.currentValue.toFixed(0);
        }
    }

    HusSlider {
        id: topRightSlider
        width: 150
        height: 30
        min: 0
        max: 100
        stepSize: 1

        HusCopyableText {
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.right
            anchors.leftMargin: 10
            text: qsTr('右上圆角: ') + parent.currentValue.toFixed(0);
        }
    }

    HusSlider {
        id: bottomLeftSlider
        width: 150
        height: 30
        min: 0
        max: 100
        stepSize: 1

        HusCopyableText {
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.right
            anchors.leftMargin: 10
            text: qsTr('左下圆角: ') + parent.currentValue.toFixed(0);
        }
    }

    HusSlider {
        id: bottomRightSlider
        width: 150
        height: 30
        min: 0
        max: 100
        stepSize: 1

        HusCopyableText {
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.right
            anchors.leftMargin: 10
            text: qsTr('右下圆角: ') + parent.currentValue.toFixed(0);
        }
    }

    HusRectangle {
        width: 200
        height: 200
        border.width: bordrWidthSlider.currentValue
        border.color: HusTheme.Primary.colorTextBase
        border.style: styleRadio.currentCheckedValue
        topLeftRadius: topLeftSlider.currentValue
        topRightRadius: topRightSlider.currentValue
        bottomLeftRadius: bottomLeftSlider.currentValue
        bottomRightRadius: bottomRightSlider.currentValue
        gradient: Gradient {
            GradientStop { position: 0.0; color: 'red' }
            GradientStop { position: 0.33; color: 'yellow' }
            GradientStop { position: 1.0; color: 'green' }
        }
    }
}
```

--------------------------------

### Customizing Trigger Text Example

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusColorPicker.md

Illustrates how to customize the trigger text using `showText`, `textFormatter`, and `textDelegate` properties.

```APIDOC
## Code Demonstration - Example 3 - Custom Text

### Description
Set whether to display trigger text using the `showText` property.
Set the trigger text formatter using the `textFormatter` property, which is a function of the form: `function(color: color): string { }`.
Set the trigger text delegate using the `textDelegate` property.

### Request Example
```qml
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusColorPicker {
        defaultValue: '#1677ff'
        showText: true
    }

    HusColorPicker {
        defaultValue: '#1677ff'
        showText: true
        textFormatter: color => `Custom Text (${String(color).toUpperCase()})`
    }

    HusColorPicker {
        id: customTextPicker
        defaultValue: '#1677ff'
        showText: true
        textDelegate: HusIconText {
            iconSource: customTextPicker.open ? HusIcon.UpOutlined : HusIcon.DownOutlined
            verticalAlignment: HusIconText.AlignVCenter
        }
    }
}
```
```

--------------------------------

### Run PyHuskarUI Gallery

Source: https://github.com/mengps/pyhuskarui/blob/master/README.md

Execute the gallery application to view PyHuskarUI components and features. This requires the project to be built and installed.

```auto
uv run ./gallery/main.py
```

--------------------------------

### Customizing Popup Title Example

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusColorPicker.md

Demonstrates how to set a custom title for the popup panel using the `title` property.

```APIDOC
## Code Demonstration - Example 4 - Custom Title

### Description
Set whether to display the title of the popup panel using the `title` property.

### Request Example
```qml
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusColorPicker {
        defaultValue: '#1677ff'
        showText: true
        title: 'color picker'
    }
}
```
```

--------------------------------

### Disabling Transparency Example

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusColorPicker.md

Shows how to disable the transparency control using the `alphaEnabled` property.

```APIDOC
## Code Demonstration - Example 2 - Disable Transparency

### Description
Set whether to enable transparency using the `alphaEnabled` property.

### Request Example
```qml
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusCheckBox {
        id: alphaCheckBox
        checked: true
        text: qsTr('Enabled Alpha')
    }

    HusColorPicker {
        defaultValue: '#1677ff'
        alphaEnabled: alphaCheckBox.checked
    }
}
```
```

--------------------------------

### QML Previewer Quick Reference

Source: https://github.com/mengps/pyhuskarui/blob/master/agent/skills/qmlpreviewer/SKILL.md

Provides quick reference commands for the two main QML preview workflows: default clipboard capture and direct qmlscene launch.

```powershell
# Default clipboard capture flow
& "<SKILL_DIR>\capture_qmlscene_to_clipboard.ps1" -QmlScenePath "<qmlscene.exe>" -QmlFilePath "<absolute QML file path>"
```

```powershell
# Direct qmlscene fallback
& "<qmlscene.exe>" "<absolute QML file path>" --maximized
```

--------------------------------

### Search Components by Keyword

Source: https://github.com/mengps/pyhuskarui/blob/master/agent/skills/huskarui/SKILL.md

Use this command to search for components using keywords that appear in their titles or documentation. This is useful for finding related components.

```bash
python <SKILL_DIR>/query_metainfo.py <SKILL_DIR>/guide.metainfo.json button
```

```bash
python <SKILL_DIR>/query_metainfo.py <SKILL_DIR>/guide.metainfo.json navigation
```

```bash
python <SKILL_DIR>/query_metainfo.py <SKILL_DIR>/guide.metainfo.json table
```

--------------------------------

### Run QML Preview with Direct qmlscene Launch

Source: https://github.com/mengps/pyhuskarui/blob/master/agent/skills/qmlpreviewer/SKILL.md

Use this PowerShell command to launch a QML file directly using qmlscene. This is a fallback option when clipboard capture is not suitable. The `--maximized` flag ensures the QML scene fills the screen.

```powershell
& "<qmlscene.exe>" "<auto-detected absolute QML file path>" --maximized
```

--------------------------------

### Run QML Preview with Clipboard Capture

Source: https://github.com/mengps/pyhuskarui/blob/master/agent/skills/qmlpreviewer/SKILL.md

Use this PowerShell command to capture a QML scene to the clipboard. Ensure that the QML file path and qmlscene path are absolute. This is the default and preferred preview flow.

```powershell
& "<SKILL_DIR>\capture_qmlscene_to_clipboard.ps1" -QmlScenePath "<qmlscene.exe>" -QmlFilePath "<auto-detected absolute QML file path>"
```

--------------------------------

### Initialize HuskarUI in Python

Source: https://github.com/mengps/pyhuskarui/blob/master/pyhuskarui/README.md

Integrate HuskarUI into your QtQuick application by initializing the HusApp engine in your main Python file. Ensure your Qt version is 6.8.3 or higher.

```python
from pyhuskarui.husapp import HusApp

if __name__ == "__main__":
    ...
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    HusApp.initialize(engine)
    ...
```

--------------------------------

### Basic HusSegmented Usage

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusSegmented.md

Demonstrates the fundamental use of HusSegmented by setting options as simple strings or objects with labels and values. It also shows how to dynamically set the size hint based on another control's selection.

```QML
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusRadioBlock {
        id: sizeHintRadio
        initCheckedIndex: 1
        model: [
            { label: 'Small', value: 'small' },
            { label: 'Normal', value: 'normal' },
            { label: 'Large', value: 'large' },
        ]
    }

    HusSegmented {
        sizeHint: sizeHintRadio.currentCheckedValue
        options: ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']
    }

    HusSegmented {
        sizeHint: sizeHintRadio.currentCheckedValue
        options: [
            { label: 'List', value: 'List', iconSource: HusIcon.BarsOutlined },
            { label: 'Kanban', value: 'Kanban', iconSource: HusIcon.AppstoreOutlined }
        ]
    }
}
```

--------------------------------

### Basic HusTimeline Usage

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTimeline.md

Demonstrates the basic usage of HusTimeline by initializing it with a list of content items using the `initModel` property. If `time` is not provided for a model item, the time portion will not be displayed.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusTimeline {
        width: parent.width
        initModel: [
            {
                content: 'Create a services site',
            },
            {
                content: 'Solve initial network problems',
            },
            {
                content: 'Technical testing',
            },
            {
                content: 'Network problems being solved',
            }
        ]
    }
}
```

--------------------------------

### Build PyHuskarUI

Source: https://github.com/mengps/pyhuskarui/blob/master/README.md

Build the PyHuskarUI project after cloning. This involves synchronizing dependencies, initializing the project, and building the package.

```auto
uv sync
uv run init
uv build pyhuskarui
```

--------------------------------

### List All HuskarUI Components

Source: https://github.com/mengps/pyhuskarui/blob/master/agent/skills/huskarui/SKILL.md

Use this command to list all available HuskarUI component titles. This is useful for discovery and understanding the scope of available components.

```powershell
python <SKILL_DIR>/query_metainfo.py <SKILL_DIR>/guide.metainfo.json list
```

--------------------------------

### Default Line Progress Bars

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/Feedback/HusProgress.md

Demonstrates default line progress bars with different percentages and statuses. Use `status` to indicate success, exception, or active states. `showInfo: false` hides the progress text.

```QML
import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusProgress { width: parent.width; percent: 30 }
    HusProgress { width: parent.width; percent: 50; status: HusProgress.Status_Active }
    HusProgress { width: parent.width; percent: 70; status: HusProgress.Status_Exception }
    HusProgress { width: parent.width; percent: 100; status: HusProgress.Status_Success }
    HusProgress { width: parent.width; percent: 50; showInfo: false }
}
```

--------------------------------

### Exact Component Lookup

Source: https://github.com/mengps/pyhuskarui/blob/master/agent/skills/huskarui/SKILL.md

Use this command to find a specific component by its exact title. Ensure the component title is correctly spelled.

```bash
python <SKILL_DIR>/query_metainfo.py <SKILL_DIR>/guide.metainfo.json HusAvatar --exact
```

--------------------------------

### Import and Populate HusTableView in QML

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTableView.md

Imports necessary QML modules and demonstrates importing data from C++ using a button click to populate a HusTableView. The table columns are configured with titles, data indices, and delegates.

```qml
import QtQuick
import HuskarUI.Basic
import Gallery

Column {
    spacing: 10
    width: parent.width

    HusButton {
        text: qsTr('Import 10 pieces data from C++')
        type: HusButton.Type_Primary
        onClicked: {
            const list = DataGenerator.genTableData(10);
            for (const object of list) {
                cppTableView.appendRow(object);
            }
        }
    }

    HusTableView {
        id: cppTableView
        width: parent.width
        height: 400
        columns: [
            {
                title: 'Name',
                dataIndex: 'name',
                delegate: textDelegate,
                width: 200
            },
            {
                title: 'Age',
                dataIndex: 'age',
                delegate: textDelegate,
                width: 100
            },
            {
                title: 'Address',
                dataIndex: 'address',
                delegate: textDelegate,
                width: 300
            },
            {
                title: 'Tags',
                dataIndex: 'tags',
                delegate: tagsDelegate,
                width: 200
            },
            {
                title: 'Action',
                dataIndex: 'action',
                delegate: actionDelegate,
                width: 300
            }
        ]

        Component.onCompleted: {
            initModel = DataGenerator.genTableData(10);
        }
    }
}
```

--------------------------------

### HusColorPicker with Custom Text Display

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusColorPicker.md

Illustrates how to display text on the color picker trigger using `showText`. The text format can be customized with `textFormatter`, and the entire text display can be replaced using `textDelegate`.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusColorPicker {
        defaultValue: '#1677ff'
        showText: true
    }

    HusColorPicker {
        defaultValue: '#1677ff'
        showText: true
        textFormatter: color => `Custom Text (${String(color).toUpperCase()})`
    }

    HusColorPicker {
        id: customTextPicker
        defaultValue: '#1677ff'
        showText: true
        textDelegate: HusIconText {
            iconSource: customTextPicker.open ? HusIcon.UpOutlined : HusIcon.DownOutlined
            verticalAlignment: HusIconText.AlignVCenter
        }
    }
}
```

--------------------------------

### HusInputNumber with Keyboard Control

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusInputNumber.md

Illustrates how to enable or disable keyboard control for HusInputNumber using the `useKeyboard` property. The `HusCheckBox` facilitates toggling this feature.

```qml
import QtQuick
import HuskarUI.Basic

Row {
    width: parent.width
    spacing: 10

    HusInputNumber {
        width: 140
        min: 0
        max: 10
        useKeyboard: keyboardCheckBox.checked
    }

    HusCheckBox {
        id: keyboardCheckBox
        anchors.verticalCenter: parent.verticalCenter
        text: 'Toggle keyboard'
        checked: true
    }
}
```

--------------------------------

### Initialize PyHuskarUI in QtQuick Application

Source: https://github.com/mengps/pyhuskarui/blob/master/README.md

Integrate PyHuskarUI into a QtQuick application by initializing HusApp with the Qml engine. Ensure your Qt version is 6.8 or higher.

```python
...
from pyhuskarui.husapp import HusApp

if __name__ == "__main__":
    ...
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    HusApp.initialize(engine)
    ...
```

--------------------------------

### Customizing Dropdown Text and Search in HusMultiCheckBox

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusMultiCheckBox.md

Shows how to customize the dropdown display text using 'textRole', disable search functionality with 'searchEnabled: false', and set placeholder text using 'placeholderText'.

```qml
import QtQuick
import HuskarUI.Basic

Row {
    width: parent.width
    spacing: 10

    HusMultiCheckBox {
        width: 200
        itemWidth: width
        textRole: 'desc'
        searchEnabled: false
        placeholderText: 'select one country'
        options: [
            {
                label: 'China',
                value: 'china',
```

--------------------------------

### HusInputNumber with Mouse Wheel Control

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusInputNumber.md

Demonstrates how to enable or disable mouse wheel control for HusInputNumber using the `useWheel` property. The `HusCheckBox` allows toggling this functionality.

```qml
import QtQuick
import HuskarUI.Basic

Row {
    width: parent.width
    spacing: 10

    HusInputNumber {
        width: 140
        min: 0
        max: 10
        useWheel: wheelCheckBox.checked
    }

    HusCheckBox {
        id: wheelCheckBox
        anchors.verticalCenter: parent.verticalCenter
        text: 'Toggle mouse wheel'
        checked: false
    }
}
```

--------------------------------

### Enabled/Disabled Items in HusSegmented

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusSegmented.md

Illustrates how to control the enabled state of individual items within a HusSegmented control using the `enabled` property within the options array. It also shows how to disable the entire control.

```QML
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusSegmented {
        enabled: false
        options: ['Map', 'Transit', 'Satellite']
    }

    HusSegmented {
        options: [
            'Daily',
            { label: 'Weekly', value: 'Weekly', enabled: false },
            'Monthly',
            { label: 'Quarterly', value: 'Quarterly', enabled: false },
            'Yearly',
        ]
    }
}
```

--------------------------------

### Custom Information Text Formatting

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/Feedback/HusProgress.md

Customizes the displayed information text using the `formatter` property. This allows for dynamic text generation based on the progress percentage or custom messages.

```QML
import QtQuick
import HuskarUI.Basic

Row {
    width: parent.width
    spacing: 10

    HusProgress {
        width: 120
        height: width
        type: HusProgress.Type_Circle
        percent: 75
        formatter: () => `%{percent} Days`
    }

    HusProgress {
        width: 120
        height: width
        type: HusProgress.Type_Circle
        percent: 100
        status: HusProgress.Status_Success
        formatter: () => 'Done'
    }
}
```

--------------------------------

### Provide Data Access Interface in C++

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTableView.md

Exposes a C++ method 'getMyDataList' that returns a QVariantList, making data accessible from QML.

```c++
Q_INVOKABLE QVariantList getMyDataList() {
    MyData myData;
    QVariantList list;
    list.append(data.toVariant());
    return list;
}
```

--------------------------------

### HusTimeline with Custom Node Colors and Icons

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTimeline.md

Shows how to customize the appearance of timeline nodes using the `colorNode` property in the model data. It also demonstrates setting custom icons and their sizes using `icon` and `iconSize` properties. The `content` property supports multi-line text.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10

    HusTimeline {
        width: parent.width
        initModel: [
            {
                colorNode: HusTheme.Primary.colorSuccess,
                content: 'Create a services site',
            },
            {
                colorNode: HusTheme.Primary.colorError,
                content: 'Solve initial network problems 1\nSolve initial network problems 2\nSolve initial network problems 3',
            },
            {
                colorNode: HusTheme.Primary.colorWarning,
                content: 'Technical testing 1\nTechnical testing 2\nTechnical testing 3',
            },
            {
                content: 'Network problems being solved',
            },
            {
                colorNode: '#00CCFF',
                icon: HusIcon.SmileOutlined,
                iconSize: 20,
                content: 'Custom icon testing',
            }
        ]
    }
}
```

--------------------------------

### Clone PyHuskarUI Repository

Source: https://github.com/mengps/pyhuskarui/blob/master/README.md

Clone the PyHuskarUI repository including submodules. Ensure the --recursive flag is used to fetch all necessary components.

```auto
git clone --recursive https://github.com/mengps/PyHuskarUI.git
```

--------------------------------

### Use HusWindow in Main.qml

Source: https://github.com/mengps/pyhuskarui/blob/master/README.md

Incorporate the HusWindow component into your QML file to utilize PyHuskarUI's theming and components. Import the Basic module first.

```qml
 import HuskarUI.Basic

HusWindow {
  ...
}
```

--------------------------------

### HusTabView API

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTabView.md

This section details the properties, delegates, and functions available for direct use with the HusTabView component.

```APIDOC
## HusTabView

### Description
A component for switching content via tabbed interfaces.

### Delegates
- **addButtonDelegate**: Component - Delegate for the add button.
- **highlightDelegate**: Component - Delegate for the highlight (current tab background).
- **tabDelegate**: Component - Delegate for the tab. Accessible properties: `index` (int), `model` (var).
- **contentDelegate**: Component - Delegate for the content. Accessible properties: `index` (int), `model` (var).

### Properties
- **animationEnabled** (bool) - Default: `HusTheme.animationEnabled` - Whether to enable animation.
- **initModel** (array) - Default: `true` - Initial model for the tab pages.
- **count** (int) - Default: `true` - The number of current tab pages.
- **currentIndex** (int) - Default: `true` - The index of the current tab page. Changing this value switches the page.
- **tabType** (enum) - Default: `HusTabView.Type_Default` - The type of the tab (from HusTabView).
- **tabSize** (enum) - Default: `HusTabView.Size_Auto` - The size of the tab (from HusTabView).
- **tabPosition** (enum) - Default: `HusTabView.Position_Top` - The position of the tab (from HusTabView).
- **tabAlign** (enum) - Default: `HusTabView.Align_Left` - The alignment of the tab text (from HusTabView).
- **tabAddable** (bool) - Default: `false` - Whether tabs are addable.
- **tabCentered** (bool) - Default: `false` - Whether tabs are centered.
- **tabCardMovable** (bool) - Default: `true` - Whether tab cards are movable (effective when `tabType` is `Type_Card*`).
- **defaultTabWidth** (int) - Default: `80` - Default tab width.
- **defaultTabHeight** (int) - Default: `-` - Default tab height.
- **defaultTabSpacing** (int) - Default: `2` - Default tab spacing.
- **defaultTabIconSpacing** (int) - Default: `2` - Default tab icon and text spacing.
- **defaultTabLeftPadding** (int) - Default: `8` - Default tab left padding.
- **defaultTabRightPadding** (int) - Default: `8` - Default tab right padding.
- **defaultHighlightWidth** (int) - Default: `30丨20` - Default highlight bar width radius (effective when `tabType` is `Type_Default`).
- **colorTabCardBg** (color) - Default: `-` - Background color for card tabs.
- **colorTabCardBgActive** (color) - Default: `-` - Active background color for card tabs.
- **colorTabCardBorder** (color) - Default: `-` - Border color for card tabs.
- **colorTabCardBorderActive** (color) - Default: `-` - Active border color for card tabs.
- **radiusTabBg** ([HusRadius](../General/HusRadius.md)) - Default: `-` - Background radius for tabs (effective when `tabType` is `Type_Card*`).
- **addTabCallback** (function()) - Default: `-` - Callback function invoked when the add button is clicked.
- **closeTabCallback** (function(index, data)) - Default: `-` - Callback function invoked when a tab is closed, providing the tab's index and data.

### Model Properties
- **key** (string) - Optional - The key for this tab page.
- **title** (string) - Optional - The title for this tab.
- **iconSource** (int | string) - Optional - The icon source for this tab.
- **iconSize** (int) - Optional - The icon size for this tab.
- **iconSpacing** (bool) - Optional - Spacing between the icon and text for this tab.
- **tabWidth** (int) - Optional - The width for this tab.
- **tabHeight** (int) - Optional - The height for this tab.
- **editable** (bool) - Optional - Whether this tab is editable.
- **contentDelegate** (var) - Optional - Content delegate for this menu item, overrides the global `contentDelegate`.

### Functions
- **setCurrentIndex(index: int)** - Sets the current index to `index`.
- **flick(index: int)** - Equivalent to calling `Flickable.flick()`.
- **positionViewAtBeginning(index: int)** - Equivalent to calling `ListView.positionViewAtBeginning()`.
- **positionViewAtIndex(index: int, mode: int)** - Equivalent to calling `ListView.positionViewAtIndex()`.
- **positionViewAtEnd(index: int)** - Equivalent to calling `ListView.positionViewAtEnd()`.
- **Object get(index: int)** - Retrieves the model data at `index`.
- **set(index: int, object: Object)** - Sets the model data at `index` to `object`.
- **setProperty(index: int, propertyName: string, value: any)** - Sets the property `propertyName` of the model data at `index` to `value`.
- **move(from: int, to: int, count: int = 1)** - Moves `count` model data items from `from` position to `to` position.
- **insert(index: int, object: Object)** - Inserts the tab `object` at `index`.
- **append(object: Object)** - Appends the tab `object` to the end.
- **remove(index: int, count: int = 1)** - Removes `count` model data items starting from `index`.
- **clear()** - Clears all tabs and content.
```

--------------------------------

### Block Filling HusSegmented

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusSegmented.md

Demonstrates how to make the HusSegmented control fill its parent element's width by setting the `block` property to `true`. This is useful for full-width selection components.

```QML
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusSegmented {
        block: true
        options: [123, 456, 'longtext-longtext-longtext-longtext']
    }
}
```

--------------------------------

### HusColorPicker with Alpha Transparency Enabled/Disabled

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusColorPicker.md

Shows how to control the alpha (transparency) channel of the color picker using the `alphaEnabled` property. This is typically controlled by a checkbox.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusCheckBox {
        id: alphaCheckBox
        checked: true
        text: qsTr('Enabled Alpha')
    }

    HusColorPicker {
        defaultValue: '#1677ff'
        alphaEnabled: alphaCheckBox.checked
    }
}
```

--------------------------------

### Initialize HusTableView Model in QML

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTableView.md

Initializes the 'initModel' property of a HusTableView component with data obtained from a C++ interface upon component completion.

```qml
HusTableView {
    Component.onCompleted: {
        initModel = getMyDataList();
    }
}
```

--------------------------------

### Dashboard Progress Bars

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/Feedback/HusProgress.md

Implements dashboard-style progress bars. Customize the gap angle using the `gapDegree` property for a unique look.

```QML
import QtQuick
import HuskarUI.Basic

Row {
    width: parent.width
    spacing: 10

    HusProgress {
        width: 120
        height: width
        type: HusProgress.Type_Dashboard
        percent: 75
    }

    HusProgress {
        width: 120
        height: width
        type: HusProgress.Type_Dashboard
        percent: 75
        gapDegree: 30
    }
}
```

--------------------------------

### Dynamic Progress Update

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/Feedback/HusProgress.md

Features animated progress bars that update dynamically. The `newPercent` property controls the progress, and buttons increment or decrement it. Status updates automatically based on completion.

```QML
import QtQuick
import HuskarUI.Basic

Column {
    width: parent.width
    spacing: 10
    property real newPercent: 0

    HusProgress {
        width: parent.width
        type: HusProgress.Type_Line
        percent: newPercent
        status: percent >= 100 ? HusProgress.Status_Success : HusProgress.Status_Normal
    }

    Row {
        HusProgress {
            width: 120
            height: width
            type: HusProgress.Type_Circle
            percent: newPercent
            gapDegree: 30
            status: percent >= 100 ? HusProgress.Status_Success : HusProgress.Status_Normal
        }

        HusProgress {
            width: 120
            height: width
            type: HusProgress.Type_Dashboard
            percent: newPercent
            status: percent >= 100 ? HusProgress.Status_Success : HusProgress.Status_Normal
        }
    }

    Row {
        HusIconButton {
            padding: 10
            radiusBg.all: 0
            radiusBg.topLeft: 5
            radiusBg.bottomLeft: 5
            iconSource: HusIcon.MinusOutlined
            onClicked: {
                if (newPercent - 10 >= 0)
                    newPercent -= 10;
            }
        }
        HusIconButton {
            padding: 10
            radiusBg.all: 0
            radiusBg.topRight: 5
            radiusBg.bottomRight: 5
            iconSource: HusIcon.PlusOutlined
            onClicked: {
                if (newPercent + 10 <= 100)
                    newPercent += 10;
            }
        }
    }
}
```

--------------------------------

### Define Data Structure in C++

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTableView.md

Defines a C++ struct 'MyData' and a method to convert it to a QVariantMap for QML compatibility.

```c++
struct MyData {
    QString name;
    int age;
    QVariantMap toVariant() {
        QVariantMap var;
        var["name"] = name;
        var["age"] = age;
        return var;
    }
};
```

--------------------------------

### HusTimeline Component Overview

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusTimeline.md

Overview of the HusTimeline component, including its inheritance, supported delegates, properties, and model attributes.

```APIDOC
## HusTimeline Component

Vertical display of timeline information.

* **Module**: HuskarUI.Basic
* **Inherits from**: Control

### Supported Delegates:

- **nodeDelegate**: Component - Node (circle) delegate. Accessible properties: `index: int`, `model: var`.
- **lineDelegate**: Component - Line item delegate. Accessible properties: `index: int`, `model: var`.
- **timeDelegate**: Component - Time item delegate. Accessible properties: `index: int`, `model: var`, `onLeft: bool`.
- **contentDelegate**: Component - Content item delegate. Accessible properties: `index: int`, `model: var`, `onLeft: bool`.

### Supported Properties:

| Property Name | Type | Default Value | Description |
|---|---|---|---|
| animationEnabled | bool | HusTheme.animationEnabled | Whether to enable animation |
| initModel | array | [] | Initial model array |
| mode | enum | HusTimeline.Mode_Left | Timeline node display mode (from HusTimeline) |
| reverse | bool | false | Text color |
| defaultNodeSize | int | 11 | Default circle size |
| defaultLineWidth | int | 1 | Default line width |
| defaultTimeFormat | string | 'yyyy-MM-dd' | Default time format |
| defaultContentFormat | enum | Text.AutoText | Default content text format (from Text) |
| colorNode | color | - | Node color |
| colorNodeBg | color | - | Node background color |
| colorLine | color | - | Line color |
| timeFont | font | - | Time font |
| colorTimeText | color | - | Time text color |
| contentFont | font | - | Content font |
| colorContentText | color | - | Content text color |

### Model Supported Properties:

| Property Name | Type | Optional/Required | Description |
|---|---|---|---|
| colorNode | string | Optional | Node color for this timeline node |
| iconSource | int | string | Optional | Icon source for this timeline node |
| iconSize | string | Optional | Icon size for this timeline node |
| loading | bool | Optional | Whether this timeline node is loading |
| time | date | Optional | Time for this timeline node |
| timeFormat | string | Optional | Display format for this timeline node |
| content | string | Optional | Content for this timeline node |
| contentFormat | enum | Optional | Text format for this timeline node content (from Text) |

### Supported Functions:

- `get(index: int): Object` - Get model data at `index`.
- `set(index: int, object: Object)` - Set model data at `index` to `object`.
- `setProperty(index: int, propertyName: string, value: any)` - Set property `propertyName` of model data at `index` to `value`.
- `move(from: int, to: int, count: int = 1)` - Move `count` model data from `from` to `to`.
- `insert(index: int, object: Object)` - Insert timeline node `object` at `index`.
- `append(object: Object)` - Append timeline node `object` at the end.
- `remove(index: int, count: int = 1)` - Remove `count` model data from `index`.
- `clear()` - Clear all model data.
```

--------------------------------

### Use HusWindow in QML

Source: https://github.com/mengps/pyhuskarui/blob/master/pyhuskarui/README.md

Incorporate the HusWindow component into your main QML file to leverage PyHuskarUI's theming and components. Ensure the HuskarUI.Basic module is imported.

```qml
import HuskarUI.Basic

HusWindow {
  ...
}
```

--------------------------------

### HusColorPicker with Custom Popup Title

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataEntry/HusColorPicker.md

Demonstrates how to set a custom title for the color picker's popup panel using the `title` property. This title appears when the color picker is activated.

```qml
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusColorPicker {
        defaultValue: '#1677ff'
        showText: true
        title: 'color picker'
    }
}
```

--------------------------------

### Circle Progress Bars

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/Feedback/HusProgress.md

Shows circular progress bars with different completion statuses. These are suitable for visual progress indicators where a circular shape is desired.

```QML
import QtQuick
import HuskarUI.Basic

Row {
    width: parent.width
    spacing: 10

    HusProgress { width: 120; height: width; type: HusProgress.Type_Circle; percent: 75 }
    HusProgress { width: 120; height: width; type: HusProgress.Type_Circle; percent: 75; status: HusProgress.Status_Exception }
    HusProgress { width: 120; height: width; type: HusProgress.Type_Circle; percent: 100; status: HusProgress.Status_Success }
}
```

--------------------------------

### Vertical Orientation HusSegmented

Source: https://github.com/mengps/pyhuskarui/blob/master/docs/DataDisplay/HusSegmented.md

Shows how to configure the HusSegmented control to display options vertically using the `orientation` property set to `Qt.Vertical`. It also customizes the `iconDelegate` for richer item display.

```QML
import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusSegmented {
        id: customSegmented
        width: 100
        colorBorder: '#77BEF0'
        orientation: Qt.Vertical
        options: [
            {
                label: 'Boost ',
                toolTip: 'Boost',
                iconSource: HusIcon.RocketOutlined,
            },
            {
                label: 'Stream',
                toolTip: 'Stream',
                iconSource: HusIcon.ThunderboltOutlined,
            },
            {
                label: 'Cloud ',
                toolTip: 'Cloud',
                iconSource: HusIcon.CloudOutlined,
            }
        ]
        iconDelegate: HusIconText {
            font: customSegmented.iconFont
            colorIcon: '#77BEF0'
            iconSource: model.iconSource
        }
    }
}
```