feat: impl flex-shrink in js and fix layout

Author: std-microblock

dependencies/breeze-ui.lua

@@ -5,7 +5,7 @@ package("breeze-glfw")
 
 package("breeze-ui")
     add_urls("https://github.com/std-microblock/breeze-ui.git")
-    add_versions("2025.12.08+1", "4c552d6efa34bfdc3a29c40936c39f122210f0dd")
+    add_versions("2025.12.08+4", "b6f3d435609392c8f62022e6f4f05c93a7be1969")
     add_deps("breeze-glfw", "nanovg", "glad", "nanosvg")
     add_configs("shared", {description = "Build shared library.", default = false, type = "boolean", readonly = true})
 

src/shell/script/binding_qjs.h

@@ -104,6 +104,7 @@ template<> struct js_bind<mb_shell::js::breeze_ui::js_flex_layout_widget> {
                 .property<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_padding_top, &mb_shell::js::breeze_ui::js_flex_layout_widget::set_padding_top>("padding_top")
                 .property<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_padding_bottom, &mb_shell::js::breeze_ui::js_flex_layout_widget::set_padding_bottom>("padding_bottom")
                 .property<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_flex_grow, &mb_shell::js::breeze_ui::js_flex_layout_widget::set_flex_grow>("flex_grow")
+                .property<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_flex_shrink, &mb_shell::js::breeze_ui::js_flex_layout_widget::set_flex_shrink>("flex_shrink")
                 .property<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_max_height, &mb_shell::js::breeze_ui::js_flex_layout_widget::set_max_height>("max_height")
                 .property<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_enable_scrolling, &mb_shell::js::breeze_ui::js_flex_layout_widget::set_enable_scrolling>("enable_scrolling")
                 .property<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_enable_child_clipping, &mb_shell::js::breeze_ui::js_flex_layout_widget::set_enable_child_clipping>("enable_child_clipping")
@@ -138,6 +139,8 @@ template<> struct js_bind<mb_shell::js::breeze_ui::js_flex_layout_widget> {
                 .fun<&mb_shell::js::breeze_ui::js_flex_layout_widget::set_padding_bottom>("set_padding_bottom")
                 .fun<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_flex_grow>("get_flex_grow")
                 .fun<&mb_shell::js::breeze_ui::js_flex_layout_widget::set_flex_grow>("set_flex_grow")
+                .fun<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_flex_shrink>("get_flex_shrink")
+                .fun<&mb_shell::js::breeze_ui::js_flex_layout_widget::set_flex_shrink>("set_flex_shrink")
                 .fun<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_max_height>("get_max_height")
                 .fun<&mb_shell::js::breeze_ui::js_flex_layout_widget::set_max_height>("set_max_height")
                 .fun<&mb_shell::js::breeze_ui::js_flex_layout_widget::get_enable_scrolling>("get_enable_scrolling")

src/shell/script/binding_types.d.ts

@@ -79,6 +79,8 @@ export class js_flex_layout_widget extends js_widget {
     set padding_bottom(value: number);
 	get flex_grow(): number;
     set flex_grow(value: number);
+	get flex_shrink(): number;
+    set flex_shrink(value: number);
 	get max_height(): number;
     set max_height(value: number);
 	get enable_scrolling(): boolean;

src/shell/script/binding_types_breeze_ui.cc

@@ -473,6 +473,8 @@ IMPL_SIMPLE_PROP(breeze_ui::js_flex_layout_widget, widget_js_base,
                  crop_overflow, bool)
 IMPL_SIMPLE_PROP(breeze_ui::js_flex_layout_widget, widget_js_base, flex_grow,
                  float)
+IMPL_SIMPLE_PROP(breeze_ui::js_flex_layout_widget, widget_js_base, flex_shrink,
+                 float)
 
 std::string breeze_ui::js_flex_layout_widget::get_justify_content() const {
     auto widget = std::dynamic_pointer_cast<ui::flex_widget>($widget);

src/shell/script/binding_types_breeze_ui.h

@@ -84,6 +84,7 @@ struct breeze_ui {
         DEFINE_PROP(float, padding_top)
         DEFINE_PROP(float, padding_bottom)
         DEFINE_PROP(float, flex_grow)
+        DEFINE_PROP(float, flex_shrink)
         DEFINE_PROP(float, max_height)
         DEFINE_PROP(bool, enable_scrolling)
         DEFINE_PROP(bool, enable_child_clipping)

src/shell/script/script.js

@@ -71,12 +71,12 @@ const PluginStore = memo(() => {
                                     installed ? (have_update ? '#FFA500' : '#2979FF') : (shell.breeze.is_light_theme() ? '#C0C0C0aa' : '#505050aa')
                                 } />
                                 <flex gap={10} padding={10} borderRadius={8}
-                                    flexGrow={1} horizontal >
+                                    flexGrow={1} horizontal>
                                     <flex gap={10} alignItems="stretch" flexGrow={1}>
                                         <Text fontSize={18}>{plugin.name}</Text>
                                         <Text>{plugin.description}</Text>
                                     </flex>
-                                    <flex gap={10} alignItems="center">
+                                    <flex gap={10} alignItems="center" flexShrink={0}>
                                         <Button onClick={() => installPlugin(plugin)}>
                                             <Text>{installingPlugins.has(plugin.name) ? t("安装中...") : (installed ? (have_update ? `更新 (${local_version} -> ${plugin.version})` : '已安装') : '安装')}</Text>
                                         </Button>

src/shell/script/ts/src/config_page/PluginStore.tsx

@@ -34,6 +34,7 @@ declare module 'react' {
         autoSize?: boolean;
         gap?: number;
         flexGrow?: number;
+        flexShrink?: number;
         maxHeight?: number;
         enableScrolling?: boolean;
         enableChildClipping?: boolean;

src/shell/script/ts/src/jsx.d.ts

@@ -138,6 +138,7 @@ const componentMap = {
             alignItems: getSetFactory('align_items'),
             gap: getSetFactory('gap'),
             flexGrow: getSetFactory('flex_grow'),
+            flexShrink: getSetFactory('flex_shrink'),
             maxHeight: getSetFactory('max_height'),
             enableScrolling: getSetFactory('enable_scrolling'),
             enableChildClipping: getSetFactory('enable_child_clipping'),