slint/internal/compiler/widgets/common/common.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.0 OR LicenseRef-Slint-commercial

import { StyleMetrics, ScrollView } from "std-widgets-impl.slint";

export component LineEditInner inherits Rectangle {
    callback accepted(string /* text */);
    callback edited(string /* text */);

    in-out property <string> placeholder-text;
    in-out property <length> font-size <=> i-text-input.font-size;
    in-out property <string> text <=> i-text-input.text;
    in-out property <brush> placeholder-color <=> i-placeholder.color;
    in-out property <bool> enabled <=> i-text-input.enabled;
    in-out property <bool> has-focus: i-text-input.has-focus;
    in-out property <InputType> input-type <=> i-text-input.input-type;
    in-out property <TextHorizontalAlignment> horizontal-alignment <=> i-text-input.horizontal-alignment;
    in-out property <bool> read-only <=> i-text-input.read-only;

    min-height: i-text-input.preferred-height;
    min-width: max(50px, i-placeholder.min-width);
    clip: true;
    forward-focus: i-text-input;

    i-placeholder := Text {
        width: 100%;
        height: 100%;
        vertical-alignment: center;
        text: (root.text == "" && i-text-input.preedit-text == "") ? root.placeholder-text : "";
        font-size:  i-text-input.font-size;
        font-italic: i-text-input.font-italic;
        font-weight: i-text-input.font-weight;
        font-family: i-text-input.font-family;
    }

    i-text-input := TextInput {
        property <length> computed-x;

        x: min(0px, max(parent.width - self.width, self.computed-x));
        width: max(parent.width, self.preferred-width);
        height: 100%;
        color: self.enabled ? StyleMetrics.textedit-text-color : StyleMetrics.textedit-text-color-disabled;
        vertical-alignment: center;
        single-line: true;

        cursor-position-changed(cpos) => {
            if (cpos.x + self.computed-x < StyleMetrics.layout-padding) {
                self.computed-x = - cpos.x + StyleMetrics.layout-padding;
            } else if (cpos.x + self.computed-x > parent.width - StyleMetrics.layout-padding) {
                self.computed-x = parent.width - cpos.x - StyleMetrics.layout-padding;
            }
        }

        accepted => { root.accepted(self.text); }

        edited => { root.edited(self.text); }
    }

    public function select-all() {
        i-text-input.select-all();
    }

    public function cut() {
        i-text-input.cut();
    }

    public function copy() {
        i-text-input.copy();
    }

    public function paste() {
        i-text-input.paste();
    }
}

export component TextEdit inherits ScrollView {
    callback edited(string /* text */);

    in property <TextWrap> wrap <=> i-text-input.wrap;
    in property horizontal-alignment <=> i-text-input.horizontal-alignment;
    in property read-only <=> i-text-input.read-only;
    in property <length> font-size <=> i-text-input.font-size;
    in-out property <string> text <=> i-text-input.text;

    forward-focus: i-text-input;
    has-focus: i-text-input.has-focus;
    enabled <=> i-text-input.enabled;
    horizontal-stretch: 1;
    vertical-stretch: 1;
    viewport-width: root.wrap == TextWrap.word-wrap ? root.visible-width : max(root.visible-width, i-text-input.preferred-width);
    viewport-height: max(self.visible-height, i-text-input.preferred-height);

    Rectangle {
        background: root.enabled ? StyleMetrics.textedit-background : StyleMetrics.textedit-background-disabled;
    }

    i-text-input := TextInput {
        enabled: true;
        color: self.enabled ? StyleMetrics.textedit-text-color : StyleMetrics.textedit-text-color-disabled;
        single-line: false;
        wrap: word-wrap;

        edited => {
            root.edited(self.text);
        }

        cursor-position-changed(cpos) => {
            if (cpos.x + root.viewport-x < StyleMetrics.layout-padding) {
                root.viewport-x = min(0px, max(parent.visible-width - self.width,  - cpos.x + StyleMetrics.layout-padding ));
            } else if (cpos.x + root.viewport-x > parent.visible-width - StyleMetrics.layout-padding) {
                root.viewport-x = min(0px, max(parent.visible-width - self.width,  parent.visible-width - cpos.x - StyleMetrics.layout-padding ));
            }
            if (cpos.y + root.viewport-y < StyleMetrics.layout-padding) {
                root.viewport-y = min(0px, max(parent.visible-height - self.height,  - cpos.y + StyleMetrics.layout-padding ));
            } else if (cpos.y + root.viewport-y > parent.visible-height - StyleMetrics.layout-padding - 20px) {
                // FIXME: font-height hardcoded to 20px
                root.viewport-y = min(0px, max(parent.visible-height - self.height,  parent.visible-height - cpos.y - StyleMetrics.layout-padding - 20px));
            }
        }
    }

    public function select-all() {
        i-text-input.select-all();
    }

    public function cut() {
        i-text-input.cut();
    }

    public function copy() {
        i-text-input.copy();
    }

    public function paste() {
        i-text-input.paste();
    }
}
export component AboutSlint {
    preferred-height: 100%;
    preferred-width: 100%;
    min-height: i-layout.min-height;
    min-width: i-layout.min-width;

    i-layout := VerticalLayout {
        padding: 12px;
        spacing: 8px;
        alignment: start;

        i-text := Text {
            text: "Made with";
            font-size: 24px;
            font-weight: 700;
            horizontal-alignment: center;
        }

        Image {
            source: StyleMetrics.dark-color-scheme ? @image-url("slint-logo-dark.svg") : @image-url("slint-logo-light.svg");
            preferred-width: 256px;
            min-height: 48px;
        }

        Text {
            text: "Version 1.1.0\nhttps://slint.dev/";
            font-size: 10px;
            horizontal-alignment: center;
        }
    }
}