guise-ui 1.5.3

A component library for gpui, Zed's GPU-accelerated UI framework: a themed palette, sizing tokens, 130+ composable components, a reactive state layer, and an in-app Safari-style inspector.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

//! `Row` and `Column` — Flutter's primary flex containers.

use gpui::prelude::*;
use gpui::{div, px, AnyElement, App, IntoElement, Window};

use super::{apply_cross, apply_main, CrossAxisAlignment, MainAxisAlignment, MainAxisSize};
use crate::devtools::Probed;

/// A horizontal flex container. Flutter's `Row`.
#[derive(IntoElement)]
pub struct Row {
  children: Vec<AnyElement>,
  main: MainAxisAlignment,
  cross: CrossAxisAlignment,
  size: MainAxisSize,
  gap: f32,
}

impl Row {
  pub fn new() -> Self {
    Row {
      children: Vec::new(),
      main: MainAxisAlignment::Start,
      cross: CrossAxisAlignment::Center,
      size: MainAxisSize::Max,
      gap: 0.0,
    }
  }

  pub fn main_axis_alignment(mut self, main: MainAxisAlignment) -> Self {
    self.main = main;
    self
  }

  pub fn cross_axis_alignment(mut self, cross: CrossAxisAlignment) -> Self {
    self.cross = cross;
    self
  }

  pub fn main_axis_size(mut self, size: MainAxisSize) -> Self {
    self.size = size;
    self
  }

  /// Convenience spacing between children (Flutter uses `SizedBox`).
  pub fn gap(mut self, gap: f32) -> Self {
    self.gap = gap;
    self
  }
}

impl Default for Row {
  fn default() -> Self {
    Row::new()
  }
}

impl ParentElement for Row {
  fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
    self.children.extend(elements);
  }
}

impl RenderOnce for Row {
  fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
    let mut base = div().flex().flex_row();
    if self.gap > 0.0 {
      base = base.gap(px(self.gap));
    }
    if self.size == MainAxisSize::Max {
      base = base.w_full();
    }
    let base = apply_cross(apply_main(base, self.main), self.cross);
    base.children(self.children).probe("Row")
  }
}

/// A vertical flex container. Flutter's `Column`.
#[derive(IntoElement)]
pub struct Column {
  children: Vec<AnyElement>,
  main: MainAxisAlignment,
  cross: CrossAxisAlignment,
  size: MainAxisSize,
  gap: f32,
}

impl Column {
  pub fn new() -> Self {
    Column {
      children: Vec::new(),
      main: MainAxisAlignment::Start,
      cross: CrossAxisAlignment::Center,
      // Min by default (shrink to content) — more predictable than
      // Flutter's Max inside a scrolling page.
      size: MainAxisSize::Min,
      gap: 0.0,
    }
  }

  pub fn main_axis_alignment(mut self, main: MainAxisAlignment) -> Self {
    self.main = main;
    self
  }

  pub fn cross_axis_alignment(mut self, cross: CrossAxisAlignment) -> Self {
    self.cross = cross;
    self
  }

  pub fn main_axis_size(mut self, size: MainAxisSize) -> Self {
    self.size = size;
    self
  }

  pub fn gap(mut self, gap: f32) -> Self {
    self.gap = gap;
    self
  }
}

impl Default for Column {
  fn default() -> Self {
    Column::new()
  }
}

impl ParentElement for Column {
  fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
    self.children.extend(elements);
  }
}

impl RenderOnce for Column {
  fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
    let mut base = div().flex().flex_col();
    if self.gap > 0.0 {
      base = base.gap(px(self.gap));
    }
    if self.size == MainAxisSize::Max {
      base = base.h_full();
    }
    let base = apply_cross(apply_main(base, self.main), self.cross);
    base.children(self.children).probe("Column")
  }
}