();
10 |
11 | [Parameter]
12 | [ValidateSet("top", "right", "bottom", "left")]
13 | public string Position
14 | {
15 | set
16 | {
17 | _values.Add("orient", value);
18 | }
19 | }
20 |
21 |
22 | [Parameter]
23 | public int TickSize
24 | {
25 | set
26 | {
27 | _values.Add("tickSize", value);
28 | }
29 | }
30 |
31 | [Parameter]
32 | public int TickPadding
33 | {
34 | set
35 | {
36 | _values.Add("tickPadding", value);
37 | }
38 | }
39 |
40 | [Parameter]
41 | public int TickRotation
42 | {
43 | set
44 | {
45 | _values.Add("tickRotation", value);
46 | }
47 | }
48 |
49 | [Parameter]
50 | public string Legend
51 | {
52 | set
53 | {
54 | _values.Add("legend", value);
55 | }
56 | }
57 |
58 | [Parameter]
59 | [ValidateSet("center", "start", "end")]
60 | public string LegendPosition
61 | {
62 | set
63 | {
64 | _values.Add("legendPosition", value);
65 | }
66 | }
67 |
68 | [Parameter]
69 | public int LegendOffset
70 | {
71 | set
72 | {
73 | _values.Add("legendOffset", value);
74 | }
75 | }
76 |
77 | protected override void EndProcessing() {
78 | WriteObject(_values);
79 | }
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/Components/code-editor.jsx:
--------------------------------------------------------------------------------
1 | import { KeyCode } from 'monaco-editor';
2 | import React from 'react';
3 | import MonacoEditor, { MonacoDiffEditor } from 'react-monaco-editor';
4 | import ReactResizeDetector from 'react-resize-detector';
5 | import { withComponentFeatures } from 'universal-dashboard'
6 | import { saveAs } from 'file-saver';
7 |
8 | var editor;
9 |
10 | const UDMonacoEditor = props => {
11 | const onChange = (newValue) => {
12 | props.setState({ code: newValue })
13 | }
14 |
15 | const editorDidMount = (editor, monaco) => {
16 | editor = editor;
17 | if (props.canSave) {
18 | editor.onKeyDown = (e) => {
19 | console.log(e);
20 | if (e.ctrlKey && e.keyCode === KeyCode.KEY_S) {
21 | e.preventDefault();
22 | saveAs(new Blob([props.code], { type: 'text/plain' }), `${props.id}.${props.extension}`);
23 | }
24 | }
25 | }
26 | }
27 |
28 | const onResize = () => {
29 | if (editor) {
30 | editor.layout();
31 | }
32 | }
33 |
34 | var control = props.original ?
35 |
36 | :
47 |
48 | ;
58 |
59 | if (props.autosize) {
60 | return (
61 |
62 | <>
63 | {control}
64 |
65 |
66 | )
67 | }
68 |
69 | return (
70 | <>
71 | {control}
72 |
73 | );
74 | }
75 |
76 | export default withComponentFeatures(UDMonacoEditor)
--------------------------------------------------------------------------------
/src/Scripts/paper.ps1:
--------------------------------------------------------------------------------
1 | function New-UDPaper {
2 | <#
3 | .SYNOPSIS
4 | Creates a paper.
5 |
6 | .DESCRIPTION
7 | Creates a paper. Paper is used to highlight content within a page.
8 |
9 | .PARAMETER Id
10 | The ID of the component. It defaults to a random GUID.
11 |
12 | .PARAMETER Children
13 | The content of this paper element.
14 |
15 | .PARAMETER Width
16 | The width of this paper.
17 |
18 | .PARAMETER Height
19 | The height of this paper.
20 |
21 | .PARAMETER Square
22 | Whether this paper is square.
23 |
24 | .PARAMETER Style
25 | The CSS style to apply to this paper.
26 |
27 | .PARAMETER Elevation
28 | The elevation of this paper.
29 |
30 | .EXAMPLE
31 | Creates paper with a heading, custom style and an elevation of 4.
32 |
33 | New-UDPaper -Children {
34 | New-UDHeading -Text "hi" -Id 'hi'
35 | } -Style @{
36 | backgroundColor = '#90caf9'
37 | } -Id 'paperElevation' -Elevation 4
38 |
39 | .NOTES
40 | General notes
41 | #>
42 | param(
43 | [Parameter()][string]$Id = ([Guid]::NewGuid()).ToString(),
44 | [Parameter()][Alias("Content")][ScriptBlock]$Children,
45 | [Parameter()][string]$Width = '500',
46 | [Parameter()][string]$Height = '500',
47 | [Parameter()][Switch]$Square,
48 | [Parameter()][Hashtable]$Style,
49 | [Parameter()][int]$Elevation,
50 | [Parameter()]
51 | [string]$ClassName
52 | )
53 |
54 | End {
55 | $c = New-UDErrorBoundary -Content $Children
56 |
57 | @{
58 | type = 'mu-paper'
59 | isPlugin = $true
60 | assetId = $MUAssetId
61 |
62 | id = $Id
63 | width = $Width
64 | children = $c
65 | height = $Height
66 | square = $Square.IsPresent
67 | style = $Style
68 | elevation = $Elevation
69 | className = $ClassName
70 | }
71 | }
72 | }
--------------------------------------------------------------------------------
/examples/input-dynamic-pages.ps1:
--------------------------------------------------------------------------------
1 | $Page = New-UDPage -Url "/script/:id" -Endpoint {
2 | param($id)
3 |
4 | $PS1File = Invoke-WebRequest -Uri https://raw.githubusercontent.com/PoshCode/poshcode.github.io/data/scripts/$id.ps1
5 |
6 | New-UDCard -Title "Script $Id" -Text $PS1File.Content -Language powershell -Links @(
7 | New-UDLink -Text "Visit on GitHub" -Url "https://github.com/PoshCode/poshcode.github.io/blob/data/scripts/$Id.ps1"
8 | )
9 | }
10 |
11 | $entry = New-UDPage -Url "/entry/:id" -Endpoint {
12 | param($id)
13 |
14 | $PS1File = Invoke-WebRequest -Uri https://raw.githubusercontent.com/PoshCode/poshcode.github.io/data/scripts/$id.md
15 |
16 | New-UDCard -Title "Script $Id" -Text $PS1File.Content -Language powershell -Links @(
17 | New-UDLink -Text "Visit on GitHub" -Url "https://github.com/PoshCode/poshcode.github.io/blob/data/scripts/$Id.md"
18 | New-UDLink -Text "View Raw Script" -Url "/script/$Id"
19 | )
20 | }
21 |
22 | $HomePage = New-UDPage -Name "Home" -Content {
23 | New-UDCard -Title "About PoshCode.org Archive" -Text "This dashboard allows you to enter a PoshCode.org document ID and view the contents of it. Enter a value between 1000 and 4198." -Links @(
24 | New-UDLink -Text "Visit on GitHub" -Url "https://github.com/PoshCode/poshcode.github.io/"
25 |
26 | )
27 | New-UDInput -Title "PoshCode.org Archive" -Endpoint {
28 | param($Id, [bool]$JustShowScript)
29 |
30 | if ($Id -lt 1000 -or $Id -gt 4198) {
31 | New-UDInputAction -Toast "$Id is not a valid PoshCode.org Archive Id!"
32 | } else {
33 | if ($JustShowScript) {
34 | New-UDInputAction -RedirectUrl "/script/$Id"
35 | }
36 | else {
37 | New-UDInputAction -RedirectUrl "/entry/$Id"
38 | }
39 | }
40 | }
41 | }
42 |
43 | $Dashboard = New-UDDashboard -Title "PoshCode.org Archive" -Pages @(
44 | $HomePage,
45 | $entry
46 | $Page
47 | )
48 |
49 | Start-UDDashboard -Dashboard $Dashboard -Port "10000"
50 | Start-Process http://localhost:10000
51 |
--------------------------------------------------------------------------------
/src/app/basics/lazy-element.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {getApiPath, getDashboardId } from './../config.jsx'
3 | import renderComponent from './../services/render-service.jsx';
4 |
5 | export default class LazyElement extends React.Component {
6 | constructor() {
7 | super();
8 |
9 | this.state = {
10 | loading: true,
11 | error: ""
12 | }
13 | }
14 | componentWillMount() {
15 |
16 | if (this.props.component.type === 'error')
17 | {
18 | return;
19 | }
20 |
21 | const dashboardId = getDashboardId();
22 |
23 | var script = document.createElement('script');
24 | script.onload = function() {
25 | this.setState({loading:false});
26 | }.bind(this)
27 | script.src = getApiPath() + `/api/internal/javascript/${this.props.component.assetId}?dashboardId=${dashboardId}`;
28 | document.head.appendChild(script);
29 | }
30 |
31 | componentDidCatch(e) {
32 | this.setState({
33 | error: e
34 | })
35 | }
36 |
37 | render() {
38 | if (this.state.loading) {
39 | return ;
40 | }
41 |
42 | if (this.props.component.type === 'error')
43 | {
44 | return {this.props.component.message}
45 | }
46 |
47 | if (this.state.error !== "") {
48 | return renderComponent({
49 | type: 'error',
50 | errorRecords: [
51 | {
52 | message: `There was an error rendering component of type ${this.props.component.type}. ${this.state.error}`
53 | }
54 | ]
55 | });
56 | }
57 |
58 | var element = renderComponent(this.props.component, this.props.history, true);
59 |
60 | if (element == null) {
61 | return renderComponent({
62 | type: 'error',
63 | message: `Component not registered: ${this.props.component.type}`
64 | });
65 | }
66 |
67 | return element;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/Components/table/components/baseTableHead.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { TableCell, TableHead, TableRow, TableSortLabel } from "@mui/material";
3 | import { setCellPadding } from "../v2/utilities";
4 |
5 | export default function BaseTableHead({ headerGroups, columns, expandable }) {
6 |
7 |
8 | function setTableSortLabel(column) {
9 | return column.id !== "selection" && column.getSortByToggleProps ? (
10 |
14 | ) : null;
15 | }
16 |
17 | return (
18 |
19 | {headerGroups.map((headerGroup) => (
20 |
21 |
22 | {expandable && }
23 | {headerGroup.headers.filter((column, index) => !column.hidden).map((column, index) => (
24 |
34 | {column.render("Header")}
35 | {setTableSortLabel(column)}
36 |
37 | ))}
38 |
39 | column.showFilter) && "none",
42 | }}
43 | >
44 | {expandable && }
45 | {headerGroup.headers.filter((column, index) => !column.hidden).map((column, index) => (
46 |
47 | {column.showFilter ? column.render("Filter") : null}
48 |
49 | ))}
50 |
51 |
52 | ))}
53 |
54 | );
55 | }
--------------------------------------------------------------------------------
/src/Scripts/timeline.ps1:
--------------------------------------------------------------------------------
1 | function New-UDTimeline {
2 | param(
3 | [Parameter()]
4 | [string]$Id = ([Guid]::NewGuid()).ToString(),
5 | [Parameter()]
6 | [Alias("Content")]
7 | [scriptblock]$Children,
8 | [Parameter()]
9 | [ValidateSet("right", 'left', 'alternate')]
10 | [string]$Position = "right"
11 | )
12 |
13 | @{
14 | isPlugin = $true
15 | assetId = $MUAssetId
16 | type = "mu-timeline"
17 | id = $id
18 |
19 | children = & $Children
20 | position = $Position.ToLower()
21 | }
22 | }
23 |
24 | function New-UDTimelineItem {
25 | param(
26 | [Parameter()]
27 | [ScriptBlock]$Content = {},
28 | [Parameter()]
29 | [ScriptBlock]$OppositeContent = {},
30 | [Parameter()]
31 | [Hashtable]$Icon,
32 | [Parameter()]
33 | [ValidateSet("error", 'grey', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning')]
34 | [string]$Color = 'grey',
35 | [Parameter()]
36 | [ValidateSet('filled', 'outlined')]
37 | [string]$Variant = 'filled'
38 | )
39 |
40 | @{
41 | content = & $Content
42 | oppositeContent = & $OppositeContent
43 | icon = $icon
44 | color = $Color.ToLower()
45 | variant = $Variant.ToLower()
46 | }
47 | }
48 |
49 | <#
50 |
51 | New-UDTimeline -Children {
52 | New-UDTimelineItem -Content {
53 | 'Breakfast'
54 | } -OppositeContent {
55 | '7:45 AM'
56 | }
57 | New-UDTimelineItem -Content {
58 | 'Welcome Message'
59 | } -OppositeContent {
60 | '9:00 AM'
61 | }
62 | New-UDTimelineItem -Content {
63 | 'State of the Shell'
64 | } -OppositeContent {
65 | '9:30 AM'
66 | }
67 | New-UDTimelineItem -Content {
68 | 'General Session'
69 | } -OppositeContent {
70 | '11:00 AM'
71 | }
72 | }
73 |
74 | #>
--------------------------------------------------------------------------------
/src/Components/menu.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withComponentFeatures } from 'universal-dashboard';
3 | import Button from '@mui/material/Button';
4 | import Menu from '@mui/material/Menu';
5 | import MenuItem from '@mui/material/MenuItem';
6 | import Typography from '@mui/material/Typography';
7 | import UDIcon from './icon';
8 |
9 | function UDMenu(props) {
10 | const [anchorEl, setAnchorEl] = React.useState(null);
11 |
12 | const onChange = (value) => {
13 | setAnchorEl(null);
14 | props.setState({ value });
15 |
16 | if (props.onChange) {
17 | props.onChange(value)
18 | }
19 | }
20 |
21 | const handleClick = (event) => {
22 | setAnchorEl(event.currentTarget);
23 | };
24 |
25 | const handleClose = () => {
26 | setAnchorEl(null);
27 | };
28 |
29 | let children = props.children;
30 | if (!children) { children = [] }
31 | if (!Array.isArray(children)) { children = [children] }
32 |
33 | let icon;
34 | if (props.icon) {
35 | icon =
36 | }
37 |
38 | return (
39 |
40 |
44 |
53 |
54 | );
55 | }
56 |
57 | function UDMenuItem(props) {
58 | let icon;
59 | if (props.icon) {
60 | icon =
61 | }
62 |
63 | return (
64 |
68 | )
69 | }
70 |
71 | export default withComponentFeatures(UDMenu);
72 |
73 |
--------------------------------------------------------------------------------
/src/Scripts/datetime.ps1:
--------------------------------------------------------------------------------
1 | function New-UDDateTime {
2 | <#
3 | .SYNOPSIS
4 | This date and time component is used for formatting dates and times using the user's browser settings.
5 |
6 | .DESCRIPTION
7 | This date and time component is used for formatting dates and times using the user's browser settings. Since Universal Dashboard PowerShell scripts run within the server, the date and time settings of the user's system are not taken into account. This component formats date and time within the client's browser to take into account their locale and time zone.
8 |
9 | .PARAMETER Id
10 | The ID of this component.
11 |
12 | .PARAMETER InputObject
13 | The date and time object to format.
14 |
15 | .PARAMETER Format
16 | The format of the date and time. This component uses Day.JS. You can learn more about formatting options on their documentation: https://day.js.org/docs/en/display/format
17 |
18 | .PARAMETER LocalizedFormat
19 | The localized format for the date and time. Use this format if you would like to take the user's browser locale and time zone settings into account.
20 |
21 | .EXAMPLE
22 | Formats a date and time using the format 'DD/MM/YYYY'
23 |
24 | New-UDDateTime -InputObject (Get-Date) -Format 'DD/MM/YYYY'
25 | #>
26 | [CmdletBinding(DefaultParameterSetName = "LocalizedFormat")]
27 | param(
28 | [Parameter()]
29 | [string]$Id = [Guid]::NewGuid(),
30 | [Parameter(Mandatory, Position = 0)]
31 | [string]$InputObject,
32 | [Parameter(ParameterSetName = "Format")]
33 | [string]$Format = "DD/MM/YYYY",
34 | [Parameter(ParameterSetName = "LocalizedFormat")]
35 | [ValidateSet("LT", "LTS", "L", "LL", "LLL", "LLLL", "l", "ll", "lll", "llll")]
36 | [string]$LocalizedFormat = "LLL"
37 | )
38 |
39 | $f = $Format
40 | if ($PSCmdlet.ParameterSetName -eq 'LocalizedFormat')
41 | {
42 | $f = $LocalizedFormat
43 | }
44 |
45 | @{
46 | type = 'mu-datetime'
47 | id = $Id
48 | isPlugin = $true
49 | assetId = $MUAssetId
50 |
51 | inputObject = $InputObject
52 | format = $f
53 | }
54 | }
--------------------------------------------------------------------------------
/src/Components/framework/ud-modal.jsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react';
2 |
3 | import Dialog from '@mui/material/Dialog';
4 | import DialogTitle from '@mui/material/DialogTitle';
5 | import DialogContent from '@mui/material/DialogContent';
6 | import DialogActions from '@mui/material/DialogActions';
7 |
8 | export default function Modal(props) {
9 |
10 | const [openToken, setOpenToken] = useState();
11 | const [closeToken, setCloseToken] = useState();
12 | const [open, setOpen] = useState(false);
13 | const [modalOptions, setModalOptions] = useState({});
14 |
15 | useEffect(() => {
16 | setOpenToken(UniversalDashboard.subscribe('modal.open', (x, props) => {
17 | setModalOptions(props);
18 | setOpen(true);
19 | }));
20 |
21 | setCloseToken(UniversalDashboard.subscribe('modal.close', () => {
22 | setOpen(false);
23 | setModalOptions({});
24 | }));
25 |
26 | return () => {
27 | UniversalDashboard.unsubscribe(openToken);
28 | UniversalDashboard.unsubscribe(closeToken);
29 | }
30 | }, [true]);
31 |
32 | var header = null;
33 | if (modalOptions.header != null) {
34 | header = setOpen(false)}>
35 | {UniversalDashboard.renderComponent(modalOptions.header)}
36 |
37 | }
38 |
39 | var content = null;
40 | if (modalOptions.content != null) {
41 | content =
42 | {UniversalDashboard.renderComponent(modalOptions.content)}
43 |
44 | }
45 |
46 | var footer = null;
47 | if (modalOptions.footer != null) {
48 | footer = {UniversalDashboard.renderComponent(modalOptions.footer)}
49 | }
50 |
51 | return (
52 |
57 | )
58 | }
--------------------------------------------------------------------------------
/examples/tree-view/filesystem.ps1:
--------------------------------------------------------------------------------
1 | $Dashboard = New-UdDashboard -Title "Tree View" -Content {
2 | New-UDRow -Columns {
3 | New-UDColumn -Size 3 -Content {
4 | $Root = New-UDTreeNode -Name 'FileSystem' -Id 'FileSystem'
5 | New-UDTreeView -ActiveBackgroundColor '#DFE8E4' -Node $Root -OnNodeClicked {
6 | param($Body)
7 |
8 | $Depth = [int]$Obj.NodeId
9 |
10 | if ($Obj.NodeId -eq 'FileSystem') {
11 | Get-PSDrive -PSProvider FileSystem | ForEach-Object {
12 | New-UDTreeNode -Name $_.Root -Id $_.Root -Icon hdd_o
13 | }
14 | } else {
15 |
16 | Get-ChildItem -Path $Obj.NodeId | ForEach-Object {
17 | if ($Obj.NodeId -eq $_.FullName) {
18 | return;
19 | }
20 |
21 | if ($_.PSIsContainer) {
22 | New-UDTreeNode -Name $_.Name -Id $_.FullName -Icon folder
23 | } else {
24 | New-UDTreeNode -Name $_.Name -Id $_.FullName -Icon file_text
25 | }
26 |
27 | } | ConvertTo-JsonEx
28 |
29 | Set-UDElement -Id "properties" -Content {
30 | New-UDGrid -Title $Obj.NodeId -Headers @("Name", "Value") -Properties @("Name", "Value") -Endpoint {
31 | $Obj = $ArgumentList[0]
32 | (Get-ItemProperty -Path $Obj.NodeId).PSObject.Properties | ForEach-Object {
33 | [PSCustomObject]@{
34 | Name = $_.Name
35 | Value = if ( $_.Value -eq $null) { "" } else { $_.Value.ToString() }
36 | }
37 | } | Out-UDGridData
38 | } -ArgumentList $Obj
39 | }
40 | }
41 | }
42 | }
43 | New-UDColumn -Size 9 -Content {
44 | New-UDElement -Tag "div" -Id "properties" -Content {}
45 | }
46 | }
47 |
48 |
49 | }
50 |
51 | $Server = Start-UDDashboard -Port 10001 -Dashboard $dashboard
--------------------------------------------------------------------------------
/docs/working-on-a-component.md:
--------------------------------------------------------------------------------
1 | # Working on a Component
2 |
3 | This document is intended to help you add a feature or fix a bug in a component.
4 |
5 | ## Step 1: Build Universal Dashboard
6 |
7 | Run the build script in VS Code using the 'Build Debug' task or by running the build script manually.
8 |
9 | ```
10 | .\src\build.ps1 -Configuration Debug -NoHelp
11 | ```
12 |
13 | You won't have to do this every time you want to edit a component.
14 |
15 | ## Step 2: Start the Materialize Webpack Dev Server
16 |
17 | You can start the Materialize Webpack Dev Server by running the 'Start Materialize Webpack Dev Server' task in VS Code or by running npm directly.
18 |
19 | ```
20 | cd .\src\UniversalDashboard.Materialize
21 | npm run dev
22 | ```
23 |
24 | ## Step 3: Modify the component
25 |
26 | The component code is in the `Components` folder and the PowerShell script is in the `Scripts` folder for the components.
27 |
28 | ```
29 | cd .\src\UniversalDashboard.Materialize\Components
30 | cd .\src\UniversalDashboard.Materialize\Scripts
31 | ```
32 |
33 | ## Step 4: Validate the Component
34 |
35 | You should write a test case that reproduces the bug or uses the new feature in the `.\src\UniversalDashboard.Materialize\Tests` folder. Once you have the test stubbed out, you can then run the test.
36 |
37 | An example test stub would look like this.
38 |
39 | ```
40 | Context "Floating" {
41 | Set-TestDashboard {
42 | New-UDButton -Text "Click Me" -Id "button" -Floating
43 | }
44 |
45 | It "is floating" {
46 |
47 | }
48 | }
49 | ```
50 |
51 | When you run the test, the browser will open and the button will quickly be shown. If you wish to leave the browser open so that you can work on your test or component, use `Wait-Debugger` to pause the test.
52 |
53 | ```
54 | Context "Floating" {
55 | Set-TestDashboard {
56 | New-UDButton -Text "Click Me" -Id "button" -Floating
57 | }
58 |
59 | It "is floating" {
60 | Wait-Debugger
61 | }
62 | }
63 | ```
64 |
65 | You can now edit the JSX file for the component and the webpack dev server will automatically recompile the component.
66 |
67 | If you edit the PowerShell script, you will have to restart your test script.
68 |
--------------------------------------------------------------------------------
/src/Scripts/progress.ps1:
--------------------------------------------------------------------------------
1 | function New-UDProgress {
2 | <#
3 | .SYNOPSIS
4 | Creates a progress dialog.
5 |
6 | .DESCRIPTION
7 | Creates a progress dialog. Progress dialogs can show both determinate and indeterminate progress. They can also be circular or linear.
8 |
9 | .PARAMETER Id
10 | The ID of the component. It defaults to a random GUID.
11 |
12 | .PARAMETER PercentComplete
13 | The percent complete for the progress.
14 |
15 | .PARAMETER BackgroundColor
16 | The background color.
17 |
18 | .PARAMETER ProgressColor
19 | The progress bar color.
20 |
21 | .PARAMETER Circular
22 | Whether the progress is circular.
23 |
24 | .PARAMETER Size
25 | The size of the progress.
26 |
27 | .EXAMPLE
28 | Creates a progress bar at 75%.
29 |
30 | New-UDProgress -PercentComplete 75
31 | #>
32 | [CmdletBinding(DefaultParameterSetName = "indeterminate")]
33 | param(
34 | [Parameter()]
35 | [string]$Id = [Guid]::NewGuid().ToString(),
36 | [Parameter(ParameterSetName = "determinate")]
37 | [ValidateRange(0, 100)]
38 | $PercentComplete,
39 | [Parameter(ParameterSetName = "indeterminate")]
40 | [Parameter(ParameterSetName = "determinate")]
41 | [UniversalDashboard.Models.DashboardColor]$BackgroundColor,
42 | [Parameter()]
43 | [Alias("Color")]
44 | [UniversalDashboard.Models.DashboardColor]$ProgressColor,
45 | [Parameter(ParameterSetName = 'circular')]
46 | [Switch]$Circular,
47 | [Parameter(ParameterSetName = 'circular')]
48 | [ValidateSet('small', 'medium', 'large')]
49 | [string]$Size
50 | )
51 |
52 | End {
53 | @{
54 | id = $Id
55 | assetId = $MUAssetId
56 | isPlugin = $true
57 | type = "mu-progress"
58 |
59 | variant = $PSCmdlet.ParameterSetName
60 | percentComplete = $PercentComplete
61 | backgroundColor = $BackgroundColor.HtmlColor
62 | progressColor = $ProgressColor.HtmlColor
63 | circular = $Circular.IsPresent
64 | color = $Color
65 | size = $Size
66 | }
67 | }
68 |
69 |
70 | }
--------------------------------------------------------------------------------
/src/Scripts/drawer.ps1:
--------------------------------------------------------------------------------
1 | function New-UDDrawer {
2 | <#
3 | .SYNOPSIS
4 | Creates a new drawer.
5 |
6 | .DESCRIPTION
7 | Creates a new drawer. A drawer is a navigational component that is typically used for navigating between pages. It can be used with New-UDAppBar to provide a custom nav bar.
8 |
9 | .PARAMETER Id
10 | The ID of the component. It defaults to a random GUID.
11 |
12 | .PARAMETER Children
13 | Navgiation controls to show within the drawer. Use New-UDList and New-UDListItem to generate links within the drawer.
14 |
15 | .PARAMETER Variant
16 | The type of drawer. Valid values include "persistent", "permanent", "temporary"
17 |
18 | .PARAMETER Anchor
19 | Where to anchor the drawer. Valid values incldue "left", "right", "top", "bottom"
20 |
21 | .EXAMPLE
22 | Creates a custom navbar using New-UDDrawer
23 |
24 | $Drawer = New-UDDrawer -Id 'drawer' -Children {
25 | New-UDList -Content {
26 | New-UDListItem -Id 'lstHome' -Label 'Home' -OnClick {
27 | Set-TestData 'Home'
28 | } -Content {
29 | New-UDListItem -Id 'lstNested' -Label 'Nested' -OnClick {
30 | Set-TestData 'Nested'
31 | }
32 | }
33 | }
34 | }
35 |
36 | New-UDElement -Tag 'main' -Content {
37 | New-UDAppBar -Children { New-UDTypography -Text 'Hello' -Paragraph } -Position relative -Drawer $Drawer
38 | }
39 | #>
40 | param(
41 | [Parameter()]
42 | [string]$Id = [Guid]::NewGuid(),
43 | [Parameter()]
44 | [Alias("Content")]
45 | [ScriptBlock]$Children,
46 | [ValidateSet("persistent", "permanent", "temporary")]
47 | [string]$Variant = "temporary",
48 | [ValidateSet("left", "right", "top", "bottom")]
49 | [string]$Anchor = "left",
50 | [Parameter()]
51 | [string]$ClassName
52 | )
53 |
54 | try {
55 | $c = & $Children
56 | }
57 | catch {
58 | $c = New-UDError -Message $_
59 | }
60 |
61 | @{
62 | type = 'mu-drawer'
63 | id = $Id
64 | isPlugin = $true
65 | assetId = $MUAssetId
66 | children = $c
67 | variant = $Variant.ToLower()
68 | anchor = $Anchor.ToLower()
69 | className = $ClassName
70 | }
71 | }
--------------------------------------------------------------------------------