split project with app & doric module

doric-Qt/example/doric/resources/Flex.qml

@@ -0,0 +1,312 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.15
+import pub.doric.widget 1.0
+
+Rectangle {
+    id: flex
+
+    property int minHeight: 0
+    property int minWidth: 0
+
+    property int flexShrink: 0
+    property int flexGrow: 0
+
+    property int marginTop: 0
+    property int marginLeft: 0
+    property int marginRight: 0
+    property int marginBottom: 0
+
+    property int paddingTop: 0
+    property int paddingLeft: 0
+    property int paddingRight: 0
+    property int paddingBottom: 0
+
+    property string alignContent: "auto"
+    property string alignItems: "auto"
+    property string alignSelf: "auto"
+
+    property string justifyContent: "flexStart"
+
+    property string display: "flex"
+
+    property string flexWrap: "noWrap"
+
+    property string flexDirection: "row"
+
+    FlexLayoutService {
+        id: flexLayoutService
+    }
+
+    function isFlex(child) {
+        if (typeof child.flexShrink === 'undefined') {
+            return false;
+        } else if (typeof child.flexGrow === 'undefined') {
+            return false;
+        } else if (typeof child.minHeight === 'undefined') {
+            return false;
+        } else if (typeof child.minWidth === 'undefined') {
+            return false;
+        } else if (typeof child.marginTop === 'undefined') {
+            return false;
+        } else if (typeof child.marginLeft === 'undefined') {
+            return false;
+        } else if (typeof child.marginRight === 'undefined') {
+            return false;
+        } else if (typeof child.marginBottom === 'undefined') {
+            return false;
+        } else if (typeof child.paddingTop === 'undefined') {
+            return false;
+        } else if (typeof child.paddingLeft === 'undefined') {
+            return false;
+        } else if (typeof child.paddingRight === 'undefined') {
+            return false;
+        } else if (typeof child.paddingBottom === 'undefined') {
+            return false;
+        } else if (typeof child.alignContent === 'undefined') {
+            return false;
+        } else if (typeof child.alignItems === 'undefined') {
+            return false;
+        } else if (typeof child.alignSelf === 'undefined') {
+            return false;
+        } else if (typeof child.justifyContent === 'undefined') {
+            return false;
+        } else if (typeof child.display === 'undefined') {
+            return false;
+        } else if (typeof child.flexWrap === 'undefined') {
+            return false;
+        } else if (typeof child.flexDirection === 'undefined') {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    function setAlignContent(child, node) {
+        var align = child.alignContent;
+        if (align === "auto") {
+            node.setAlignContentAuto();
+        } else if (align === "flexStart") {
+            node.setAlignContentFlexStart();
+        } else if (align === "center") {
+            node.setAlignContentCenter();
+        } else if (align === "flexEnd") {
+            node.setAlignContentFlexEnd();
+        } else if (align === "stretch") {
+            node.setAlignContentStretch();
+        } else if (align === "baseline") {
+            node.setAlignContentBaseline();
+        } else if (align === "spaceBetween") {
+            node.setAlignContentSpaceBetween();
+        } else if (align === "spaceAround") {
+            node.setAlignContentSpaceAround();
+        } else {
+            throw "setAlignContent invalid param";
+        }
+    }
+
+    function setAlignItems(child, node) {
+        var align = child.alignItems;
+        if (align === "auto") {
+            node.setAlignItemsAuto();
+        } else if (align === "flexStart") {
+            node.setAlignItemsFlexStart();
+        } else if (align === "center") {
+            node.setAlignItemsCenter();
+        } else if (align === "flexEnd") {
+            node.setAlignItemsFlexEnd();
+        } else if (align === "stretch") {
+            node.setAlignItemsStretch();
+        } else if (align === "baseline") {
+            node.setAlignItemsBaseline();
+        } else if (align === "spaceBetween") {
+            node.setAlignItemsSpaceBetween();
+        } else if (align === "spaceAround") {
+            node.setAlignItemsSpaceAround();
+        } else {
+            throw "setAlignItems invalid param";
+        }
+    }
+
+    function setAlignSelf(child, node) {
+        var align = child.alignSelf;
+        if (align === "auto") {
+            node.setAlignSelfAuto();
+        } else if (align === "flexStart") {
+            node.setAlignSelfFlexStart();
+        } else if (align === "center") {
+            node.setAlignSelfCenter();
+        } else if (align === "flexEnd") {
+            node.setAlignSelfFlexEnd();
+        } else if (align === "stretch") {
+            node.setAlignSelfStretch();
+        } else if (align === "baseline") {
+            node.setAlignSelfBaseline();
+        } else if (align === "spaceBetween") {
+            node.setAlignSelfSpaceBetween();
+        } else if (align === "spaceAround") {
+            node.setAlignSelfSpaceAround();
+        } else {
+            throw "setAlignSelf invalid param";
+        }
+    }
+
+    function setDisplay(child, node) {
+        var display = child.display;
+        if (display === "flex") {
+            node.setDisplayFlex();
+        } else if (display === "none") {
+            node.setDisplayNone();
+        } else {
+            throw "setDisplay invalid param";
+        }
+    }
+
+    function setJustifyContent(child, node) {
+        var justify = child.justifyContent;
+        if (justify === "center") {
+            node.setJustifyCenter();
+        } else if (justify === "flexEnd") {
+            node.setJustifyFlexEnd();
+        } else if (justify === "flexStart") {
+            node.setJustifyFlexStart();
+        } else if (justify === "spaceAround") {
+            node.setJustifySpaceAround();
+        } else if (justify === "spaceEvenly") {
+            node.setJustifySpaceEvenly();
+        } else if (justify === "spaceBetween") {
+            node.setJustifySpaceBetween();
+        } else {
+            throw "setJustifyContent invalid param";
+        }
+    }
+
+    function setFlexWrap(child, node) {
+        var wrap = child.flexWrap;
+        if (wrap === "wrap") {
+            node.setWrap();
+        } else if (wrap === "noWrap") {
+            node.setNoWrap();
+        } else if (wrap === "wrapReverse") {
+            node.setWrapReverse();
+        } else {
+            throw "setFlexWrap invalid param";
+        }
+    }
+
+    function setFlexDirection(child, node) {
+        var direction = child.flexDirection;
+        if (direction === "row") {
+            node.setFlexDirectionRow();
+        } else if (direction === "column") {
+            node.setFlexDirectionColumn();
+        } else if (direction === "rowReverse") {
+            node.setFlexDirectionRowReverse();
+        } else if (direction === "columnReverse") {
+            node.setFlexDirectionColumnReverse();
+        } else {
+            throw "setFlexDirection invalid param";
+        }
+    }
+
+    function setOtherNodeProps(child, node) {
+        node.minHeight = child.minHeight;
+        node.minWidth = child.minWidth;
+        node.flexShrink = child.flexShrink;
+        node.flexGrow = child.flexGrow;
+
+        node.marginTop = child.marginTop;
+        node.marginLeft = child.marginLeft;
+        node.marginRight = child.marginRight;
+        node.marginBottom = child.marginBottom;
+
+        node.paddingTop = child.paddingTop;
+        node.paddingLeft = child.paddingLeft;
+        node.paddingRight = child.paddingRight;
+        node.paddingBottom = child.paddingBottom;
+
+        node.height = child.height;
+        node.width = child.width;
+    }
+
+    function setDefaultNodeProps(child, node) {
+        node.minHeight = 9999;
+        node.minWidth = 0;
+        node.flexShrink = 0;
+        node.flexGrow = 0;
+
+        node.marginTop = 0;
+        node.marginLeft = 0;
+        node.marginRight = 0;
+        node.marginBottom = 0;
+
+        node.paddingTop = 0;
+        node.paddingLeft = 0;
+        node.paddingRight = 0;
+        node.paddingBottom = 0;
+
+        node.height = child.height;
+        node.width = child.width;
+
+        node.setDisplayFlex();
+
+        node.setAlignSelfAuto();
+        node.setAlignItemsAuto();
+        node.setAlignContentAuto();
+
+        node.setJustifySpaceBetween();
+        node.setNoWrap();
+
+        node.setFlexDirectionRow();
+    }
+
+    function processNode(child, node) {
+        setOtherNodeProps(child, node, true);
+        setJustifyContent(child, node);
+        setFlexDirection(child, node);
+        setAlignContent(child, node);
+        setAlignItems(child, node);
+        setAlignSelf(child, node);
+        setFlexWrap(child, node);
+        setDisplay(child, node);
+    }
+
+    function updatePositions() {
+        if (flex.height !== 0 && flex.width !== 0) {
+            var rootNode = flexLayoutService.createNode();
+            processNode(flex, rootNode);
+            var nodes = []
+            var node = {}
+            var child = {}
+            var i = 0;
+            for (i = 0; i !== flex.children.length; i++) {
+                node = flexLayoutService.createNode();
+                child = flex.children[i];
+                if (isFlex(child)) {
+                    processNode(child, node);
+                } else {
+                    setDefaultNodeProps(child, node);
+                }
+                nodes.push(node);
+            }
+            rootNode.appendChildren(nodes);
+            rootNode.calculateLayoutLtr(flex.width, flex.height);
+            /* console.log(JSON.stringify({root: rootNode})); */
+            for (i = 0; i !== flex.children.length; i++) {
+                node = nodes[i];
+                flex.children[i].x = node.getLayoutLeft();
+                flex.children[i].y = node.getLayoutTop();
+                flex.children[i].width = node.getLayoutWidth();
+                flex.children[i].height = node.getLayoutHeight();
+                /* console.log(JSON.stringify(node)); */
+            }
+            flexLayoutService.collectGarbage(rootNode);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    onChildrenChanged: updatePositions();
+    onWidthChanged: updatePositions();
+    onHeightChanged: updatePositions();
+}

doric-Qt/example/doric/resources/alert.qml

@@ -0,0 +1,55 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+ApplicationWindow {
+    id: window
+
+    flags: flags | Qt.WindowStaysOnTopHint | Qt.Tool | Qt.FramelessWindowHint
+    visible: true
+    modality: Qt.ApplicationModal
+
+    property var pointer
+    property var plugin
+    property var callbackId
+
+    property var title
+    property var msg
+    property var okLabel
+
+    onTitleChanged: {
+        dialog.title = title
+    }
+
+    onMsgChanged: {
+        content.text = msg
+    }
+
+    onOkLabelChanged: {
+        dialog.standardButton(Dialog.Ok).text = qsTrId(okLabel)
+    }
+
+    Dialog {
+        id: dialog
+        standardButtons: Dialog.Ok
+        modal: true
+        contentItem: Text {
+            id: content
+        }
+
+        onAccepted: {
+            dialogBridge.onAccepted(pointer, plugin, callbackId)
+        }
+
+        onWidthChanged: {
+            window.width = implicitWidth
+        }
+
+        onHeightChanged: {
+            window.height = implicitHeight
+        }
+    }
+
+    Component.onCompleted: {
+        dialog.open()
+    }
+}

doric-Qt/example/doric/resources/confirm.qml

@@ -0,0 +1,64 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+ApplicationWindow {
+    id: window
+
+    flags: flags | Qt.WindowStaysOnTopHint | Qt.Tool | Qt.FramelessWindowHint
+    visible: true
+    modality: Qt.ApplicationModal
+
+    property var pointer
+    property var plugin
+    property var callbackId
+
+    property var title
+    property var msg
+    property var okLabel
+    property var cancelLabel
+
+    onTitleChanged: {
+        dialog.title = title
+    }
+
+    onMsgChanged: {
+        content.text = msg
+    }
+
+    onOkLabelChanged: {
+        dialog.standardButton(Dialog.Ok).text = qsTrId(okLabel)
+    }
+
+    onCancelLabelChanged: {
+        dialog.standardButton(Dialog.Cancel).text = qsTrId(cancelLabel)
+    }
+
+    Dialog {
+        id: dialog
+        standardButtons: Dialog.Ok | Dialog.Cancel
+        modal: true
+        contentItem: Text {
+            id: content
+        }
+
+        onAccepted: {
+            dialogBridge.onAccepted(pointer, plugin, callbackId)
+        }
+
+        onRejected: {
+            dialogBridge.onRejected(pointer, plugin, callbackId)
+        }
+
+        onWidthChanged: {
+            window.width = implicitWidth
+        }
+
+        onHeightChanged: {
+            window.height = implicitHeight
+        }
+    }
+
+    Component.onCompleted: {
+        dialog.open()
+    }
+}

doric-Qt/example/doric/resources/gravity.mjs

@@ -0,0 +1,32 @@
+// gravity.mjs
+export function enumerate() {
+    const SPECIFIED = 1;
+    const START = 1 << 1;
+    const END = 1 << 2;
+    const SHIFT_X = 0;
+    const SHIFT_Y = 4;
+    const LEFT = (START | SPECIFIED) << SHIFT_X;
+    const RIGHT = (END | SPECIFIED) << SHIFT_X;
+    const TOP = (START | SPECIFIED) << SHIFT_Y;
+    const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
+    const CENTER_X = SPECIFIED << SHIFT_X;
+    const CENTER_Y = SPECIFIED << SHIFT_Y;
+    const CENTER = CENTER_X | CENTER_Y;
+
+    var gravity = {
+        SPECIFIED,
+        START,
+        END,
+        SHIFT_X,
+        SHIFT_Y,
+        LEFT,
+        RIGHT,
+        TOP,
+        BOTTOM,
+        CENTER_X,
+        CENTER_Y,
+        CENTER
+    }
+
+    return gravity
+}

doric-Qt/example/doric/resources/hlayout.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.12
+
+import "util.mjs" as Util
+
+Rectangle {
+    property var wrapper
+
+    clip: true
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "HLayout"
+
+    onWidthChanged: {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+    }
+
+    onHeightChanged: {
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+    }
+
+    color: 'transparent'
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        border.color = borderColor
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+
+    property var shadowColor
+    property var shadowRadius
+    property var shadowOffsetX
+    property var shadowOffsetY
+    property var shadowOpacity
+
+    onShadowOpacityChanged: {
+        if (shadowOpacity > 0) {
+            layer.enabled = true
+        } else {
+            layer.enabled = false
+        }
+    }
+
+    layer.enabled: false
+    layer.effect: DropShadow {
+        horizontalOffset: shadowOffsetX
+        verticalOffset: shadowOffsetY
+        radius: shadowRadius
+        samples: 16
+        color: shadowColor
+        transparentBorder: true
+    }
+}

doric-Qt/example/doric/resources/image.qml

@@ -0,0 +1,103 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+
+import "util.mjs" as Util
+import QtGraphicalEffects 1.12
+
+AnimatedImage {
+    property var wrapper
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "Image"
+
+    Rectangle {
+        id: bg
+        color: "transparent"
+    }
+
+    onSourceChanged: {
+        console.log(tag, uuid + " onSourceChanged: " + this.source)
+    }
+
+    onStatusChanged: {
+        if (this.status === Image.Null) {
+            console.log(tag, uuid + " onStatusChanged: Image.Null")
+            imageBridge.onNull(wrapper);
+        } else if (this.status === Image.Ready) {
+            console.log(tag, uuid + " onStatusChanged: Image.Ready")
+
+            if (this.width !== 0 && this.height !== 0 && this.status === Image.Ready) {
+                imageBridge.onReady(wrapper);
+            }
+        } else if (this.status === Image.Loading) {
+            console.log(tag, uuid + " onStatusChanged: Image.Loading")
+            imageBridge.onLoading(wrapper);
+        } else if (this.status === Image.Error) {
+            console.log(tag, uuid + " onStatusChanged: Image.Error")
+            imageBridge.onError(wrapper);
+        }
+    }
+
+    onProgressChanged: {
+        console.log(tag, uuid + " onProgressChanged: " + this.progress)
+    }
+
+    onWidthChanged: {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+        bg.width = this.width
+
+        if (this.width !== 0 && this.height !== 0 && this.status === Image.Ready) {
+            imageBridge.onReady(wrapper);
+        }
+    }
+
+    onHeightChanged: {
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+        bg.height = this.height
+
+        if (this.width !== 0 && this.height !== 0 && this.status === Image.Ready) {
+            imageBridge.onReady(wrapper);
+        }
+    }
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        bg.color = backgroundColor
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        bg.border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        bg.border.color = borderColor
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+
+    property var isBlur: false
+    onIsBlurChanged: {
+        console.log(tag, uuid + " onIsBlurChanged: " + this.isBlur)
+        if (isBlur) {
+            this.layer.enabled = true
+        } else {
+            this.layer.enabled = false
+        }
+    }
+
+    layer.enabled: false
+    layer.effect: FastBlur {
+        radius: 50
+        transparentBorder: true
+    }
+}

doric-Qt/example/doric/resources/panel.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+
+Rectangle {
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
+}

doric-Qt/example/doric/resources/prompt.qml

@@ -0,0 +1,72 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.15
+
+ApplicationWindow {
+    id: window
+
+    flags: flags | Qt.WindowStaysOnTopHint | Qt.Tool | Qt.FramelessWindowHint
+    visible: true
+    modality: Qt.ApplicationModal
+
+    property var pointer
+    property var plugin
+    property var callbackId
+
+    property var title
+    property var msg
+    property var okLabel
+    property var cancelLabel
+
+    onTitleChanged: {
+        dialog.title = title
+    }
+
+    onMsgChanged: {
+        content.text = msg
+    }
+
+    onOkLabelChanged: {
+        dialog.standardButton(Dialog.Ok).text = qsTrId(okLabel)
+    }
+
+    onCancelLabelChanged: {
+        dialog.standardButton(Dialog.Cancel).text = qsTrId(cancelLabel)
+    }
+
+    Dialog {
+        id: dialog
+        standardButtons: Dialog.Ok | Dialog.Cancel
+        modal: true
+        contentItem: ColumnLayout {
+            Text {
+                id: content
+            }
+
+            TextArea {
+                id: input
+                Layout.fillWidth: true
+            }
+        }
+
+        onAccepted: {
+            dialogBridge.onAcceptedWithInput(pointer, plugin, callbackId, input.text)
+        }
+
+        onRejected: {
+            dialogBridge.onRejectedWithInput(pointer, plugin, callbackId, input.text)
+        }
+
+        onWidthChanged: {
+            window.width = implicitWidth
+        }
+
+        onHeightChanged: {
+            window.height = implicitHeight
+        }
+    }
+
+    Component.onCompleted: {
+        dialog.open()
+    }
+}

doric-Qt/example/doric/resources/scroller.qml

@@ -0,0 +1,73 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
+
+import "util.mjs" as Util
+
+ScrollView {
+    property var wrapper
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "Scroller"
+
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+
+    clip: true
+
+    background: Rectangle {
+        id: bg
+        color: 'transparent'
+    }
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        bg.color = backgroundColor
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        bg.border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        bg.border.color = borderColor
+    }
+
+    onWidthChanged: {
+        bg.implicitWidth = width
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+    }
+
+    onHeightChanged: {
+        bg.implicitHeight = height
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+    }
+
+    onImplicitWidthChanged: {
+        console.log(tag, uuid + " onImplicitWidthChanged: " + this.implicitWidth)
+    }
+
+    onImplicitHeightChanged: {
+        console.log(tag, uuid + " onImplicitHeightChanged: " + this.implicitHeight)
+    }
+
+    onContentWidthChanged: {
+        console.log(tag, uuid + " onContentWidthChanged: " + this.contentWidth)
+    }
+
+    onContentHeightChanged: {
+        console.log(tag, uuid + " onContentHeightChanged: " + this.contentHeight)
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+}

doric-Qt/example/doric/resources/stack.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.12
+
+import "util.mjs" as Util
+
+Rectangle {
+    property var wrapper
+
+    clip: true
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "Stack"
+
+    onWidthChanged: {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+    }
+
+    onHeightChanged: {
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+    }
+
+    color: 'transparent'
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        border.color = borderColor
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+
+    property var shadowColor
+    property var shadowRadius
+    property var shadowOffsetX
+    property var shadowOffsetY
+    property var shadowOpacity
+
+    onShadowOpacityChanged: {
+        if (shadowOpacity > 0) {
+            layer.enabled = true
+        } else {
+            layer.enabled = false
+        }
+    }
+
+    layer.enabled: false
+    layer.effect: DropShadow {
+        horizontalOffset: shadowOffsetX
+        verticalOffset: shadowOffsetY
+        radius: shadowRadius
+        samples: 16
+        color: shadowColor
+        transparentBorder: true
+    }
+}

doric-Qt/example/doric/resources/text.qml

@@ -0,0 +1,88 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+
+import "util.mjs" as Util
+import "gravity.mjs" as Gravity
+
+TextArea {
+    property var wrapper
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "Text"
+
+    readOnly: true
+
+    leftPadding: 0
+    topPadding: 0
+    rightPadding: 0
+    bottomPadding: 0
+
+    property int textAlignment: 0
+
+    background: Rectangle {
+        id: bg
+        color: 'transparent'
+    }
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        bg.color = backgroundColor
+    }
+
+    horizontalAlignment: TextInput.AlignHCenter
+    verticalAlignment: TextInput.AlignVCenter
+
+    onTextAlignmentChanged: {
+        let gravity = Gravity.enumerate()
+        let result = this.textAlignment | gravity.CENTER_Y
+        console.log(tag, uuid + " onTextAlignmentChanged: " + this.textAlignment)
+        switch(result) {
+            case gravity.CENTER:
+                this.horizontalAlignment = TextInput.AlignHCenter
+                this.verticalAlignment = TextInput.AlignVCenter
+                break
+        }
+    }
+
+    onWidthChanged: {
+        bg.implicitWidth = width
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+
+        let tempText = this.text
+        this.text = ""
+        this.text = tempText
+    }
+
+    onHeightChanged: {
+        bg.implicitHeight = height
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+
+        let tempText = this.text
+        this.text = ""
+        this.text = tempText
+    }
+
+    onTextChanged: {
+        console.log(tag, uuid + " onTextChanged: " + this.text)
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        bg.border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        bg.border.color = borderColor
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+}

doric-Qt/example/doric/resources/toast.qml

@@ -0,0 +1,33 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
+
+ApplicationWindow {
+    id: window
+
+    flags: flags | Qt.WindowStaysOnTopHint  | Qt.Tool | Qt.FramelessWindowHint | Qt.WindowTransparentForInput
+
+    color: "#bb000000"
+    visible: true
+
+    ColumnLayout {
+        Text {
+            text: "toast"
+            font.pixelSize: 20
+            color: 'white'
+            Layout.leftMargin: 5
+            Layout.rightMargin: 5
+            Layout.topMargin: 15
+            Layout.bottomMargin: 15
+        }
+
+        onWidthChanged: {
+            window.width = implicitWidth
+        }
+
+        onHeightChanged: {
+            window.height = implicitHeight
+        }
+    }
+}
+

doric-Qt/example/doric/resources/util.mjs

@@ -0,0 +1,8 @@
+// util.mjs
+export function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = Math.random() * 16 | 0,
+            v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+}

doric-Qt/example/doric/resources/view.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+
+Rectangle {
+    width: childrenRect.width
+    height: childrenRect.height
+}

doric-Qt/example/doric/resources/vlayout.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.12
+
+import "util.mjs" as Util
+
+Rectangle {
+    property var wrapper
+
+    clip: true
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "VLayout"
+
+    onWidthChanged: {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+    }
+
+    onHeightChanged: {
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+    }
+
+    color: 'transparent'
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        border.color = borderColor
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+
+    property var shadowColor
+    property var shadowRadius
+    property var shadowOffsetX
+    property var shadowOffsetY
+    property var shadowOpacity
+
+    onShadowOpacityChanged: {
+        if (shadowOpacity > 0) {
+            layer.enabled = true
+        } else {
+            layer.enabled = false
+        }
+    }
+
+    layer.enabled: false
+    layer.effect: DropShadow {
+        horizontalOffset: shadowOffsetX
+        verticalOffset: shadowOffsetY
+        radius: shadowRadius
+        samples: 16
+        color: shadowColor
+        transparentBorder: true
+    }
+}