@rbxts/uiblox 0.2.0-alpha.4 → 0.2.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/out/ui/packages/alert/components/Alert.luau +34 -27
- package/out/ui/packages/alert/components/Alert.styles.d.ts +1 -0
- package/out/ui/packages/alert/components/Alert.styles.luau +10 -2
- package/out/ui/packages/autocomplete/components/Autocomplete.luau +8 -0
- package/out/ui/packages/checkbox/components/checkboxLook.d.ts +1 -1
- package/out/ui/packages/chip/components/Chip.d.ts +1 -0
- package/out/ui/packages/chip/components/Chip.luau +37 -2
- package/out/ui/packages/chip/components/Chip.styles.d.ts +1 -0
- package/out/ui/packages/chip/components/Chip.styles.luau +29 -1
- package/out/ui/packages/circularProgress/components/CircularProgress.luau +13 -2
- package/out/ui/packages/formText/components/FormHelperText.d.ts +8 -0
- package/out/ui/packages/formText/components/FormHelperText.luau +44 -0
- package/out/ui/packages/formText/components/FormLabel.d.ts +9 -0
- package/out/ui/packages/formText/components/FormLabel.luau +46 -0
- package/out/ui/packages/formText/components/FormText.styles.d.ts +5 -0
- package/out/ui/packages/formText/components/FormText.styles.luau +33 -0
- package/out/ui/packages/formText/index.d.ts +4 -0
- package/out/ui/packages/formText/init.luau +6 -0
- package/out/ui/packages/imageList/components/ImageList.d.ts +14 -0
- package/out/ui/packages/imageList/components/ImageList.luau +84 -0
- package/out/ui/packages/imageList/components/ImageList.styles.d.ts +6 -0
- package/out/ui/packages/imageList/components/ImageList.styles.luau +54 -0
- package/out/ui/packages/imageList/components/imageListLayout.d.ts +3 -0
- package/out/ui/packages/imageList/components/imageListLayout.luau +24 -0
- package/out/ui/packages/imageList/index.d.ts +2 -0
- package/out/ui/packages/imageList/init.luau +5 -0
- package/out/ui/packages/index.d.ts +3 -0
- package/out/ui/packages/init.luau +9 -0
- package/out/ui/packages/layout/components/Box.d.ts +11 -0
- package/out/ui/packages/layout/components/Box.luau +49 -0
- package/out/ui/packages/layout/components/Box.styles.d.ts +7 -0
- package/out/ui/packages/layout/components/Box.styles.luau +34 -0
- package/out/ui/packages/layout/components/Stack.d.ts +12 -0
- package/out/ui/packages/layout/components/Stack.luau +49 -0
- package/out/ui/packages/layout/components/Stack.styles.d.ts +8 -0
- package/out/ui/packages/layout/components/Stack.styles.luau +72 -0
- package/out/ui/packages/layout/components/boxPad.d.ts +14 -0
- package/out/ui/packages/layout/components/boxPad.luau +59 -0
- package/out/ui/packages/layout/components/stackAlign.d.ts +8 -0
- package/out/ui/packages/layout/components/stackAlign.luau +29 -0
- package/out/ui/packages/layout/index.d.ts +7 -0
- package/out/ui/packages/layout/init.luau +2 -0
- package/out/ui/packages/menu/components/Menu.d.ts +3 -0
- package/out/ui/packages/menu/components/Menu.luau +48 -23
- package/out/ui/packages/menu/components/Menu.styles.luau +5 -1
- package/out/ui/packages/motion/index.d.ts +1 -1
- package/out/ui/packages/motion/init.luau +1 -0
- package/out/ui/packages/motion/unit.d.ts +5 -0
- package/out/ui/packages/motion/unit.luau +23 -0
- package/out/ui/packages/radioGroup/components/RadioGroup.d.ts +1 -0
- package/out/ui/packages/radioGroup/components/RadioGroup.luau +4 -2
- package/out/ui/packages/radioGroup/components/RadioGroup.styles.d.ts +1 -0
- package/out/ui/packages/radioGroup/components/RadioGroup.styles.luau +4 -1
- package/out/ui/packages/select/components/Select.d.ts +5 -0
- package/out/ui/packages/select/components/Select.luau +48 -24
- package/out/ui/packages/select/components/Select.styles.luau +1 -1
- package/out/ui/packages/skeleton/components/Skeleton.styles.luau +7 -3
- package/out/ui/packages/skeleton/components/skeletonTone.d.ts +20 -0
- package/out/ui/packages/skeleton/components/skeletonTone.luau +14 -0
- package/out/ui/packages/speedDial/components/SpeedDial.d.ts +17 -0
- package/out/ui/packages/speedDial/components/SpeedDial.luau +92 -0
- package/out/ui/packages/speedDial/components/SpeedDial.styles.d.ts +2 -0
- package/out/ui/packages/speedDial/components/SpeedDial.styles.luau +26 -0
- package/out/ui/packages/speedDial/index.d.ts +2 -0
- package/out/ui/packages/speedDial/init.luau +5 -0
- package/out/ui/packages/splitPane/components/splitLook.d.ts +1 -1
- package/out/ui/packages/stateMatrix.d.ts +1 -0
- package/out/ui/packages/stateMatrix.luau +239 -81
- package/out/ui/packages/switch/components/switchLook.d.ts +1 -1
- package/out/ui/packages/virtualList/components/EmptyListHint.d.ts +6 -0
- package/out/ui/packages/virtualList/components/EmptyListHint.luau +32 -0
- package/out/ui/packages/virtualList/components/EmptyListHint.styles.d.ts +5 -0
- package/out/ui/packages/virtualList/components/EmptyListHint.styles.luau +26 -0
- package/out/ui/packages/virtualList/index.d.ts +2 -0
- package/out/ui/packages/virtualList/init.luau +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
-- Compiled with roblox-ts v3.0.0
|
|
2
|
+
local function imageListCols(cols)
|
|
3
|
+
if cols == nil or cols < 1 then
|
|
4
|
+
return 3
|
|
5
|
+
end
|
|
6
|
+
return math.floor(cols)
|
|
7
|
+
end
|
|
8
|
+
local function imageListGap(gap)
|
|
9
|
+
if gap == nil or gap < 0 then
|
|
10
|
+
return 1
|
|
11
|
+
end
|
|
12
|
+
return gap
|
|
13
|
+
end
|
|
14
|
+
local function imageListItemSize(itemSize)
|
|
15
|
+
if itemSize == nil or itemSize < 1 then
|
|
16
|
+
return 96
|
|
17
|
+
end
|
|
18
|
+
return math.floor(itemSize)
|
|
19
|
+
end
|
|
20
|
+
return {
|
|
21
|
+
imageListCols = imageListCols,
|
|
22
|
+
imageListGap = imageListGap,
|
|
23
|
+
imageListItemSize = imageListItemSize,
|
|
24
|
+
}
|
|
@@ -3,8 +3,10 @@ export * from "./skeleton/index";
|
|
|
3
3
|
export * from "./divider/index";
|
|
4
4
|
export * from "./errorBoundary/index";
|
|
5
5
|
export * from "./icon/index";
|
|
6
|
+
export * from "./imageList/index";
|
|
6
7
|
export * from "./iconButton/index";
|
|
7
8
|
export * from "./input/index";
|
|
9
|
+
export * from "./formText/index";
|
|
8
10
|
export * from "./layout/index";
|
|
9
11
|
export * from "./preloader/index";
|
|
10
12
|
export * from "./progressBar/index";
|
|
@@ -48,6 +50,7 @@ export * from "./snackbar/index";
|
|
|
48
50
|
export * from "./table/index";
|
|
49
51
|
export * from "./autocomplete/index";
|
|
50
52
|
export * from "./fab/index";
|
|
53
|
+
export * from "./speedDial/index";
|
|
51
54
|
export * from "./appBar/index";
|
|
52
55
|
export * from "./bottomNavigation/index";
|
|
53
56
|
export * from "./alert/index";
|
|
@@ -16,12 +16,18 @@ end
|
|
|
16
16
|
for _k, _v in TS.import(script, script, "icon") or {} do
|
|
17
17
|
exports[_k] = _v
|
|
18
18
|
end
|
|
19
|
+
for _k, _v in TS.import(script, script, "imageList") or {} do
|
|
20
|
+
exports[_k] = _v
|
|
21
|
+
end
|
|
19
22
|
for _k, _v in TS.import(script, script, "iconButton") or {} do
|
|
20
23
|
exports[_k] = _v
|
|
21
24
|
end
|
|
22
25
|
for _k, _v in TS.import(script, script, "input") or {} do
|
|
23
26
|
exports[_k] = _v
|
|
24
27
|
end
|
|
28
|
+
for _k, _v in TS.import(script, script, "formText") or {} do
|
|
29
|
+
exports[_k] = _v
|
|
30
|
+
end
|
|
25
31
|
for _k, _v in TS.import(script, script, "layout") or {} do
|
|
26
32
|
exports[_k] = _v
|
|
27
33
|
end
|
|
@@ -151,6 +157,9 @@ end
|
|
|
151
157
|
for _k, _v in TS.import(script, script, "fab") or {} do
|
|
152
158
|
exports[_k] = _v
|
|
153
159
|
end
|
|
160
|
+
for _k, _v in TS.import(script, script, "speedDial") or {} do
|
|
161
|
+
exports[_k] = _v
|
|
162
|
+
end
|
|
154
163
|
for _k, _v in TS.import(script, script, "appBar") or {} do
|
|
155
164
|
exports[_k] = _v
|
|
156
165
|
end
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "@rbxts/react";
|
|
2
|
+
import { CustomizedProps } from "../../../../theme/index";
|
|
3
|
+
import { BoxPad } from "./boxPad";
|
|
4
|
+
import { BoxBg } from "./Box.styles";
|
|
5
|
+
export interface BoxProps {
|
|
6
|
+
padding?: BoxPad;
|
|
7
|
+
bgcolor?: BoxBg;
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
declare function Box(props: CustomizedProps<Frame, BoxProps>): JSX.Element;
|
|
11
|
+
export default Box;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
-- Compiled with roblox-ts v3.0.0
|
|
2
|
+
local TS = _G[script]
|
|
3
|
+
local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
|
|
4
|
+
local useBoxStyles = TS.import(script, script.Parent, "Box.styles").default
|
|
5
|
+
local function Box(props)
|
|
6
|
+
local _binding = props
|
|
7
|
+
local padding = _binding.padding
|
|
8
|
+
local bgcolor = _binding.bgcolor
|
|
9
|
+
local children = _binding.children
|
|
10
|
+
local className = _binding.className
|
|
11
|
+
local sx = _binding.sx
|
|
12
|
+
local id = _binding.id
|
|
13
|
+
local ref = _binding.ref
|
|
14
|
+
local styles = useBoxStyles({
|
|
15
|
+
padding = padding,
|
|
16
|
+
bgcolor = bgcolor,
|
|
17
|
+
})
|
|
18
|
+
local _attributes = {}
|
|
19
|
+
local _condition = id
|
|
20
|
+
if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
|
|
21
|
+
_condition = "Box"
|
|
22
|
+
end
|
|
23
|
+
_attributes.key = _condition
|
|
24
|
+
_attributes.ref = ref
|
|
25
|
+
for _k, _v in styles.root do
|
|
26
|
+
_attributes[_k] = _v
|
|
27
|
+
end
|
|
28
|
+
if className then
|
|
29
|
+
for _k, _v in className do
|
|
30
|
+
_attributes[_k] = _v
|
|
31
|
+
end
|
|
32
|
+
end
|
|
33
|
+
if sx then
|
|
34
|
+
for _k, _v in sx do
|
|
35
|
+
_attributes[_k] = _v
|
|
36
|
+
end
|
|
37
|
+
end
|
|
38
|
+
local _condition_1 = padding ~= nil
|
|
39
|
+
if _condition_1 then
|
|
40
|
+
local _attributes_1 = table.clone(styles.padding)
|
|
41
|
+
setmetatable(_attributes_1, nil)
|
|
42
|
+
_condition_1 = React.createElement("uipadding", _attributes_1)
|
|
43
|
+
end
|
|
44
|
+
return React.createElement("frame", _attributes, _condition_1, children)
|
|
45
|
+
end
|
|
46
|
+
local default = Box
|
|
47
|
+
return {
|
|
48
|
+
default = default,
|
|
49
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { BoxPad } from "./boxPad";
|
|
2
|
+
export type BoxBg = "transparent" | "paper" | "elevated" | "input";
|
|
3
|
+
declare const useBoxStyles: (props: {
|
|
4
|
+
padding?: BoxPad;
|
|
5
|
+
bgcolor?: BoxBg;
|
|
6
|
+
}) => import("../../../../theme/index").ClassNameMap<string>;
|
|
7
|
+
export default useBoxStyles;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
-- Compiled with roblox-ts v3.0.0
|
|
2
|
+
local TS = _G[script]
|
|
3
|
+
local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
|
|
4
|
+
local componentStyles = _theme.componentStyles
|
|
5
|
+
local createStyles = _theme.createStyles
|
|
6
|
+
local boxPadSides = TS.import(script, script.Parent, "boxPad").boxPadSides
|
|
7
|
+
local useBoxStyles = componentStyles("Box", function(theme, _param)
|
|
8
|
+
local padding = _param.padding
|
|
9
|
+
local bgcolor = _param.bgcolor
|
|
10
|
+
if bgcolor == nil then
|
|
11
|
+
bgcolor = "transparent"
|
|
12
|
+
end
|
|
13
|
+
local sides = boxPadSides(padding)
|
|
14
|
+
local fill = if bgcolor == "paper" then theme.palette.surface.paper elseif bgcolor == "elevated" then theme.palette.surface.elevated elseif bgcolor == "input" then theme.palette.surface.input else theme.palette.surface.paper
|
|
15
|
+
return createStyles({
|
|
16
|
+
root = {
|
|
17
|
+
AutomaticSize = Enum.AutomaticSize.XY,
|
|
18
|
+
Size = UDim2.fromScale(0, 0),
|
|
19
|
+
BackgroundColor3 = fill,
|
|
20
|
+
BackgroundTransparency = if bgcolor == "transparent" then 1 else 0,
|
|
21
|
+
BorderSizePixel = 0,
|
|
22
|
+
},
|
|
23
|
+
padding = {
|
|
24
|
+
PaddingTop = UDim.new(0, theme.spacing.calc(sides.top)),
|
|
25
|
+
PaddingRight = UDim.new(0, theme.spacing.calc(sides.right)),
|
|
26
|
+
PaddingBottom = UDim.new(0, theme.spacing.calc(sides.bottom)),
|
|
27
|
+
PaddingLeft = UDim.new(0, theme.spacing.calc(sides.left)),
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
end)
|
|
31
|
+
local default = useBoxStyles
|
|
32
|
+
return {
|
|
33
|
+
default = default,
|
|
34
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "@rbxts/react";
|
|
2
|
+
import { CustomizedProps } from "../../../../theme/index";
|
|
3
|
+
import { StackAlign, StackDirection, StackJustify } from "./stackAlign";
|
|
4
|
+
export interface StackProps {
|
|
5
|
+
direction?: StackDirection;
|
|
6
|
+
spacing?: number;
|
|
7
|
+
alignItems?: StackAlign;
|
|
8
|
+
justifyContent?: StackJustify;
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
declare function Stack(props: CustomizedProps<Frame, StackProps>): JSX.Element;
|
|
12
|
+
export default Stack;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
-- Compiled with roblox-ts v3.0.0
|
|
2
|
+
local TS = _G[script]
|
|
3
|
+
local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
|
|
4
|
+
local useStackStyles = TS.import(script, script.Parent, "Stack.styles").default
|
|
5
|
+
local function Stack(props)
|
|
6
|
+
local _binding = props
|
|
7
|
+
local direction = _binding.direction
|
|
8
|
+
local spacing = _binding.spacing
|
|
9
|
+
local alignItems = _binding.alignItems
|
|
10
|
+
local justifyContent = _binding.justifyContent
|
|
11
|
+
local children = _binding.children
|
|
12
|
+
local className = _binding.className
|
|
13
|
+
local sx = _binding.sx
|
|
14
|
+
local id = _binding.id
|
|
15
|
+
local ref = _binding.ref
|
|
16
|
+
local styles = useStackStyles({
|
|
17
|
+
direction = direction,
|
|
18
|
+
spacing = spacing,
|
|
19
|
+
alignItems = alignItems,
|
|
20
|
+
justifyContent = justifyContent,
|
|
21
|
+
})
|
|
22
|
+
local _attributes = {}
|
|
23
|
+
local _condition = id
|
|
24
|
+
if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
|
|
25
|
+
_condition = "Stack"
|
|
26
|
+
end
|
|
27
|
+
_attributes.key = _condition
|
|
28
|
+
_attributes.ref = ref
|
|
29
|
+
for _k, _v in styles.root do
|
|
30
|
+
_attributes[_k] = _v
|
|
31
|
+
end
|
|
32
|
+
if className then
|
|
33
|
+
for _k, _v in className do
|
|
34
|
+
_attributes[_k] = _v
|
|
35
|
+
end
|
|
36
|
+
end
|
|
37
|
+
if sx then
|
|
38
|
+
for _k, _v in sx do
|
|
39
|
+
_attributes[_k] = _v
|
|
40
|
+
end
|
|
41
|
+
end
|
|
42
|
+
local _attributes_1 = table.clone(styles.list)
|
|
43
|
+
setmetatable(_attributes_1, nil)
|
|
44
|
+
return React.createElement("frame", _attributes, React.createElement("uilistlayout", _attributes_1), children)
|
|
45
|
+
end
|
|
46
|
+
local default = Stack
|
|
47
|
+
return {
|
|
48
|
+
default = default,
|
|
49
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { StackAlign, StackDirection, StackJustify } from "./stackAlign";
|
|
2
|
+
declare const useStackStyles: (props: {
|
|
3
|
+
direction?: StackDirection;
|
|
4
|
+
spacing?: number;
|
|
5
|
+
alignItems?: StackAlign;
|
|
6
|
+
justifyContent?: StackJustify;
|
|
7
|
+
}) => import("../../../../theme/index").ClassNameMap<string>;
|
|
8
|
+
export default useStackStyles;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
-- Compiled with roblox-ts v3.0.0
|
|
2
|
+
local TS = _G[script]
|
|
3
|
+
local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
|
|
4
|
+
local componentStyles = _theme.componentStyles
|
|
5
|
+
local createStyles = _theme.createStyles
|
|
6
|
+
local _stackAlign = TS.import(script, script.Parent, "stackAlign")
|
|
7
|
+
local stackAlignKey = _stackAlign.stackAlignKey
|
|
8
|
+
local stackGap = _stackAlign.stackGap
|
|
9
|
+
local stackIsRow = _stackAlign.stackIsRow
|
|
10
|
+
local stackJustifyKey = _stackAlign.stackJustifyKey
|
|
11
|
+
local stackUsesFlex = _stackAlign.stackUsesFlex
|
|
12
|
+
local function horizontalAlign(key)
|
|
13
|
+
if key == "center" then
|
|
14
|
+
return Enum.HorizontalAlignment.Center
|
|
15
|
+
end
|
|
16
|
+
if key == "end" then
|
|
17
|
+
return Enum.HorizontalAlignment.Right
|
|
18
|
+
end
|
|
19
|
+
return Enum.HorizontalAlignment.Left
|
|
20
|
+
end
|
|
21
|
+
local function verticalAlign(key)
|
|
22
|
+
if key == "center" then
|
|
23
|
+
return Enum.VerticalAlignment.Center
|
|
24
|
+
end
|
|
25
|
+
if key == "end" then
|
|
26
|
+
return Enum.VerticalAlignment.Bottom
|
|
27
|
+
end
|
|
28
|
+
return Enum.VerticalAlignment.Top
|
|
29
|
+
end
|
|
30
|
+
local function mainFlex(justify)
|
|
31
|
+
if justify == "space-between" then
|
|
32
|
+
return Enum.UIFlexAlignment.SpaceBetween
|
|
33
|
+
end
|
|
34
|
+
if justify == "space-around" then
|
|
35
|
+
return Enum.UIFlexAlignment.SpaceAround
|
|
36
|
+
end
|
|
37
|
+
if justify == "space-evenly" then
|
|
38
|
+
return Enum.UIFlexAlignment.SpaceEvenly
|
|
39
|
+
end
|
|
40
|
+
return Enum.UIFlexAlignment.None
|
|
41
|
+
end
|
|
42
|
+
local useStackStyles = componentStyles("Stack", function(theme, _param)
|
|
43
|
+
local direction = _param.direction
|
|
44
|
+
local spacing = _param.spacing
|
|
45
|
+
local alignItems = _param.alignItems
|
|
46
|
+
local justifyContent = _param.justifyContent
|
|
47
|
+
local row = stackIsRow(direction)
|
|
48
|
+
local cross = stackAlignKey(alignItems)
|
|
49
|
+
local main = stackJustifyKey(justifyContent)
|
|
50
|
+
local flex = if stackUsesFlex(main) then mainFlex(main) else Enum.UIFlexAlignment.None
|
|
51
|
+
return createStyles({
|
|
52
|
+
root = {
|
|
53
|
+
AutomaticSize = Enum.AutomaticSize.XY,
|
|
54
|
+
Size = UDim2.fromScale(0, 0),
|
|
55
|
+
BackgroundTransparency = 1,
|
|
56
|
+
BorderSizePixel = 0,
|
|
57
|
+
},
|
|
58
|
+
list = {
|
|
59
|
+
FillDirection = if row then Enum.FillDirection.Horizontal else Enum.FillDirection.Vertical,
|
|
60
|
+
SortOrder = Enum.SortOrder.LayoutOrder,
|
|
61
|
+
Padding = UDim.new(0, theme.spacing.calc(stackGap(spacing))),
|
|
62
|
+
HorizontalAlignment = if row then horizontalAlign(main) else horizontalAlign(cross),
|
|
63
|
+
VerticalAlignment = if row then verticalAlign(cross) else verticalAlign(main),
|
|
64
|
+
HorizontalFlex = if row then flex else Enum.UIFlexAlignment.None,
|
|
65
|
+
VerticalFlex = if row then Enum.UIFlexAlignment.None else flex,
|
|
66
|
+
},
|
|
67
|
+
})
|
|
68
|
+
end)
|
|
69
|
+
local default = useStackStyles
|
|
70
|
+
return {
|
|
71
|
+
default = default,
|
|
72
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export type BoxPad = number | {
|
|
2
|
+
x?: number;
|
|
3
|
+
y?: number;
|
|
4
|
+
top?: number;
|
|
5
|
+
right?: number;
|
|
6
|
+
bottom?: number;
|
|
7
|
+
left?: number;
|
|
8
|
+
};
|
|
9
|
+
export declare function boxPadSides(padding?: BoxPad): {
|
|
10
|
+
top: number;
|
|
11
|
+
right: number;
|
|
12
|
+
bottom: number;
|
|
13
|
+
left: number;
|
|
14
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
-- Compiled with roblox-ts v3.0.0
|
|
2
|
+
local function boxPadSides(padding)
|
|
3
|
+
if padding == nil then
|
|
4
|
+
return {
|
|
5
|
+
top = 0,
|
|
6
|
+
right = 0,
|
|
7
|
+
bottom = 0,
|
|
8
|
+
left = 0,
|
|
9
|
+
}
|
|
10
|
+
end
|
|
11
|
+
local _padding = padding
|
|
12
|
+
if type(_padding) == "number" then
|
|
13
|
+
return {
|
|
14
|
+
top = padding,
|
|
15
|
+
right = padding,
|
|
16
|
+
bottom = padding,
|
|
17
|
+
left = padding,
|
|
18
|
+
}
|
|
19
|
+
end
|
|
20
|
+
local _condition = padding.x
|
|
21
|
+
if _condition == nil then
|
|
22
|
+
_condition = 0
|
|
23
|
+
end
|
|
24
|
+
local x = _condition
|
|
25
|
+
local _condition_1 = padding.y
|
|
26
|
+
if _condition_1 == nil then
|
|
27
|
+
_condition_1 = 0
|
|
28
|
+
end
|
|
29
|
+
local y = _condition_1
|
|
30
|
+
local _object = {}
|
|
31
|
+
local _left = "top"
|
|
32
|
+
local _condition_2 = padding.top
|
|
33
|
+
if _condition_2 == nil then
|
|
34
|
+
_condition_2 = y
|
|
35
|
+
end
|
|
36
|
+
_object[_left] = _condition_2
|
|
37
|
+
local _left_1 = "right"
|
|
38
|
+
local _condition_3 = padding.right
|
|
39
|
+
if _condition_3 == nil then
|
|
40
|
+
_condition_3 = x
|
|
41
|
+
end
|
|
42
|
+
_object[_left_1] = _condition_3
|
|
43
|
+
local _left_2 = "bottom"
|
|
44
|
+
local _condition_4 = padding.bottom
|
|
45
|
+
if _condition_4 == nil then
|
|
46
|
+
_condition_4 = y
|
|
47
|
+
end
|
|
48
|
+
_object[_left_2] = _condition_4
|
|
49
|
+
local _left_3 = "left"
|
|
50
|
+
local _condition_5 = padding.left
|
|
51
|
+
if _condition_5 == nil then
|
|
52
|
+
_condition_5 = x
|
|
53
|
+
end
|
|
54
|
+
_object[_left_3] = _condition_5
|
|
55
|
+
return _object
|
|
56
|
+
end
|
|
57
|
+
return {
|
|
58
|
+
boxPadSides = boxPadSides,
|
|
59
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type StackDirection = "row" | "column";
|
|
2
|
+
export type StackAlign = "start" | "center" | "end";
|
|
3
|
+
export type StackJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
|
|
4
|
+
export declare function stackIsRow(direction?: StackDirection): direction is "row";
|
|
5
|
+
export declare function stackGap(spacing?: number): number;
|
|
6
|
+
export declare function stackUsesFlex(justify?: StackJustify): justify is "space-between" | "space-around" | "space-evenly";
|
|
7
|
+
export declare function stackAlignKey(align?: StackAlign): StackAlign;
|
|
8
|
+
export declare function stackJustifyKey(justify?: StackJustify): StackJustify;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
-- Compiled with roblox-ts v3.0.0
|
|
2
|
+
local function stackIsRow(direction)
|
|
3
|
+
return direction == "row"
|
|
4
|
+
end
|
|
5
|
+
local function stackGap(spacing)
|
|
6
|
+
return if spacing == nil then 1 else spacing
|
|
7
|
+
end
|
|
8
|
+
local function stackUsesFlex(justify)
|
|
9
|
+
return justify == "space-between" or justify == "space-around" or justify == "space-evenly"
|
|
10
|
+
end
|
|
11
|
+
local function stackAlignKey(align)
|
|
12
|
+
if align == "center" or align == "end" then
|
|
13
|
+
return align
|
|
14
|
+
end
|
|
15
|
+
return "start"
|
|
16
|
+
end
|
|
17
|
+
local function stackJustifyKey(justify)
|
|
18
|
+
if justify == "center" or justify == "end" or justify == "space-between" or justify == "space-around" or justify == "space-evenly" then
|
|
19
|
+
return justify
|
|
20
|
+
end
|
|
21
|
+
return "start"
|
|
22
|
+
end
|
|
23
|
+
return {
|
|
24
|
+
stackIsRow = stackIsRow,
|
|
25
|
+
stackGap = stackGap,
|
|
26
|
+
stackUsesFlex = stackUsesFlex,
|
|
27
|
+
stackAlignKey = stackAlignKey,
|
|
28
|
+
stackJustifyKey = stackJustifyKey,
|
|
29
|
+
}
|
|
@@ -4,3 +4,10 @@ export * from "./components/Grid";
|
|
|
4
4
|
export { default as List } from "./components/List";
|
|
5
5
|
export { ListProps } from "./components/List";
|
|
6
6
|
export * from "./components/List";
|
|
7
|
+
export { default as Stack } from "./components/Stack";
|
|
8
|
+
export { StackProps } from "./components/Stack";
|
|
9
|
+
export { StackAlign, StackDirection, StackJustify } from "./components/stackAlign";
|
|
10
|
+
export { default as Box } from "./components/Box";
|
|
11
|
+
export { BoxProps } from "./components/Box";
|
|
12
|
+
export { BoxPad } from "./components/boxPad";
|
|
13
|
+
export { BoxBg } from "./components/Box.styles";
|
|
@@ -9,4 +9,6 @@ exports.List = TS.import(script, script, "components", "List").default
|
|
|
9
9
|
for _k, _v in TS.import(script, script, "components", "List") or {} do
|
|
10
10
|
exports[_k] = _v
|
|
11
11
|
end
|
|
12
|
+
exports.Stack = TS.import(script, script, "components", "Stack").default
|
|
13
|
+
exports.Box = TS.import(script, script, "components", "Box").default
|
|
12
14
|
return exports
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "@rbxts/react";
|
|
1
2
|
export interface MenuItem {
|
|
2
3
|
id: string;
|
|
3
4
|
text: string;
|
|
@@ -9,6 +10,8 @@ export interface MenuProps {
|
|
|
9
10
|
items: MenuItem[];
|
|
10
11
|
onSelect: (id: string) => void;
|
|
11
12
|
onClose: () => void;
|
|
13
|
+
emptyText?: string;
|
|
14
|
+
empty?: React.Element;
|
|
12
15
|
}
|
|
13
16
|
declare function Menu(props: MenuProps): JSX.Element | undefined;
|
|
14
17
|
export default Menu;
|
|
@@ -3,6 +3,7 @@ local TS = _G[script]
|
|
|
3
3
|
local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
|
|
4
4
|
local ListItem = TS.import(script, script.Parent.Parent.Parent, "listItem").ListItem
|
|
5
5
|
local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
|
|
6
|
+
local EmptyListHint = TS.import(script, script.Parent.Parent.Parent, "virtualList").EmptyListHint
|
|
6
7
|
local useMenuStyles = TS.import(script, script.Parent, "Menu.styles").default
|
|
7
8
|
local ROW = 28
|
|
8
9
|
local function Menu(props)
|
|
@@ -12,10 +13,14 @@ local function Menu(props)
|
|
|
12
13
|
local items = _binding.items
|
|
13
14
|
local onSelect = _binding.onSelect
|
|
14
15
|
local onClose = _binding.onClose
|
|
16
|
+
local emptyText = _binding.emptyText
|
|
17
|
+
local empty = _binding.empty
|
|
15
18
|
local styles = useMenuStyles()
|
|
16
19
|
if not open then
|
|
17
20
|
return nil
|
|
18
21
|
end
|
|
22
|
+
local vacant = #items == 0
|
|
23
|
+
local height = if vacant then ROW else #items * ROW
|
|
19
24
|
local _attributes = {
|
|
20
25
|
key = "Surface",
|
|
21
26
|
}
|
|
@@ -25,34 +30,54 @@ local function Menu(props)
|
|
|
25
30
|
local _attributes_1 = table.clone(styles.corner)
|
|
26
31
|
setmetatable(_attributes_1, nil)
|
|
27
32
|
local _exp = React.createElement("uicorner", _attributes_1)
|
|
28
|
-
local _attributes_2 = table.clone(styles.
|
|
33
|
+
local _attributes_2 = table.clone(styles.stroke)
|
|
29
34
|
setmetatable(_attributes_2, nil)
|
|
30
|
-
local _exp_1 = React.createElement("
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
local
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
local _exp_1 = React.createElement("uistroke", _attributes_2)
|
|
36
|
+
local _attributes_3 = table.clone(styles.list)
|
|
37
|
+
setmetatable(_attributes_3, nil)
|
|
38
|
+
local _exp_2 = React.createElement("uilistlayout", _attributes_3)
|
|
39
|
+
local _result
|
|
40
|
+
if vacant then
|
|
41
|
+
local _condition = empty
|
|
42
|
+
if _condition == nil then
|
|
43
|
+
local _attributes_4 = {}
|
|
44
|
+
local _condition_1 = emptyText
|
|
45
|
+
if _condition_1 == nil then
|
|
46
|
+
_condition_1 = "No options"
|
|
47
|
+
end
|
|
48
|
+
_attributes_4.text = _condition_1
|
|
49
|
+
_attributes_4.height = ROW
|
|
50
|
+
_condition = React.createElement(EmptyListHint, _attributes_4)
|
|
51
|
+
end
|
|
52
|
+
_result = _condition
|
|
53
|
+
else
|
|
54
|
+
-- ▼ ReadonlyArray.map ▼
|
|
55
|
+
local _newValue = table.create(#items)
|
|
56
|
+
local _callback = function(item)
|
|
57
|
+
return React.createElement(ListItem, {
|
|
58
|
+
key = item.id,
|
|
59
|
+
text = item.text,
|
|
60
|
+
disabled = item.disabled,
|
|
61
|
+
onActivated = function()
|
|
62
|
+
if item.disabled == true then
|
|
63
|
+
return nil
|
|
64
|
+
end
|
|
65
|
+
onSelect(item.id)
|
|
66
|
+
onClose()
|
|
67
|
+
end,
|
|
68
|
+
})
|
|
69
|
+
end
|
|
70
|
+
for _k, _v in items do
|
|
71
|
+
_newValue[_k] = _callback(_v, _k - 1, items)
|
|
72
|
+
end
|
|
73
|
+
-- ▲ ReadonlyArray.map ▲
|
|
74
|
+
_result = _newValue
|
|
46
75
|
end
|
|
47
|
-
for _k, _v in items do
|
|
48
|
-
_newValue[_k] = _callback(_v, _k - 1, items)
|
|
49
|
-
end
|
|
50
|
-
-- ▲ ReadonlyArray.map ▲
|
|
51
76
|
return React.createElement(Popup, {
|
|
52
77
|
anchor = anchor,
|
|
53
|
-
preferredHeight =
|
|
78
|
+
preferredHeight = height,
|
|
54
79
|
onDismiss = onClose,
|
|
55
|
-
}, React.createElement("frame", _attributes, _exp, _exp_1,
|
|
80
|
+
}, React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _result))
|
|
56
81
|
end
|
|
57
82
|
local default = Menu
|
|
58
83
|
return {
|
|
@@ -8,12 +8,16 @@ local useMenuStyles = componentStyles("Menu", function(theme)
|
|
|
8
8
|
surface = {
|
|
9
9
|
Size = UDim2.new(1, 0, 0, 0),
|
|
10
10
|
AutomaticSize = Enum.AutomaticSize.Y,
|
|
11
|
-
BackgroundColor3 = theme.palette.surface.
|
|
11
|
+
BackgroundColor3 = theme.palette.surface.elevated,
|
|
12
12
|
BorderSizePixel = 0,
|
|
13
13
|
},
|
|
14
14
|
corner = {
|
|
15
15
|
CornerRadius = UDim.new(0, theme.shape.borderRadius),
|
|
16
16
|
},
|
|
17
|
+
stroke = {
|
|
18
|
+
Color = theme.palette.border,
|
|
19
|
+
ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
|
|
20
|
+
},
|
|
17
21
|
list = {
|
|
18
22
|
FillDirection = Enum.FillDirection.Vertical,
|
|
19
23
|
SortOrder = Enum.SortOrder.LayoutOrder,
|
|
@@ -2,4 +2,4 @@ export { loopProperty } from "./loop";
|
|
|
2
2
|
export { motionDuration, assignGoal } from "./duration";
|
|
3
3
|
export { playProperty } from "./play";
|
|
4
4
|
export { resolveReduced } from "./resolveReduced";
|
|
5
|
-
export { clampUnit, stopOnce, progressUnit, progressSpin, arcKeys } from "./unit";
|
|
5
|
+
export { clampUnit, stopOnce, progressUnit, progressSpin, arcKeys, spinArcKeys } from "./unit";
|
|
@@ -6,3 +6,8 @@ export declare function arcKeys(value: number): {
|
|
|
6
6
|
time: number;
|
|
7
7
|
transparency: number;
|
|
8
8
|
}[];
|
|
9
|
+
/** Indeterminate ring: long clear trail, bright head — reads as a sweep. */
|
|
10
|
+
export declare function spinArcKeys(): {
|
|
11
|
+
time: number;
|
|
12
|
+
transparency: number;
|
|
13
|
+
}[];
|
|
@@ -71,10 +71,33 @@ local function arcKeys(value)
|
|
|
71
71
|
transparency = 1,
|
|
72
72
|
} }
|
|
73
73
|
end
|
|
74
|
+
--* Indeterminate ring: long clear trail, bright head — reads as a sweep.
|
|
75
|
+
local function spinArcKeys()
|
|
76
|
+
return { {
|
|
77
|
+
time = 0,
|
|
78
|
+
transparency = 1,
|
|
79
|
+
}, {
|
|
80
|
+
time = 0.45,
|
|
81
|
+
transparency = 1,
|
|
82
|
+
}, {
|
|
83
|
+
time = 0.7,
|
|
84
|
+
transparency = 0.55,
|
|
85
|
+
}, {
|
|
86
|
+
time = 0.88,
|
|
87
|
+
transparency = 0,
|
|
88
|
+
}, {
|
|
89
|
+
time = 0.96,
|
|
90
|
+
transparency = 0.35,
|
|
91
|
+
}, {
|
|
92
|
+
time = 1,
|
|
93
|
+
transparency = 1,
|
|
94
|
+
} }
|
|
95
|
+
end
|
|
74
96
|
return {
|
|
75
97
|
clampUnit = clampUnit,
|
|
76
98
|
stopOnce = stopOnce,
|
|
77
99
|
progressUnit = progressUnit,
|
|
78
100
|
progressSpin = progressSpin,
|
|
79
101
|
arcKeys = arcKeys,
|
|
102
|
+
spinArcKeys = spinArcKeys,
|
|
80
103
|
}
|
|
@@ -11,6 +11,7 @@ export interface RadioGroupProps<T> {
|
|
|
11
11
|
onChange: (value: T) => void;
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
size?: ControlSize;
|
|
14
|
+
row?: boolean;
|
|
14
15
|
}
|
|
15
16
|
declare function RadioGroup<T>(props: CustomizedProps<Frame, RadioGroupProps<T>>): JSX.Element;
|
|
16
17
|
export default RadioGroup;
|