@monimesl/dot-cli 0.1.0-alpha.16 → 0.1.0-alpha.18

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.
Files changed (108) hide show
  1. package/dist/cli.js +16 -9
  2. package/dist/cli.js.map +1 -1
  3. package/dist/templates/showcase/dot.ts +32 -17
  4. package/dist/templates/showcase/pages/basics/bars/controller.ts +36 -0
  5. package/dist/templates/showcase/pages/basics/bars/state.ts +6 -0
  6. package/dist/templates/showcase/pages/basics/bars/view.dml +28 -0
  7. package/dist/templates/showcase/pages/{text → basics/bindings}/controller.ts +4 -0
  8. package/dist/templates/showcase/pages/basics/bindings/state.ts +14 -0
  9. package/dist/templates/showcase/pages/basics/bindings/view.dml +41 -0
  10. package/dist/templates/showcase/pages/basics/control-flow/controller.ts +17 -0
  11. package/dist/templates/showcase/pages/basics/control-flow/state.ts +16 -0
  12. package/dist/templates/showcase/pages/basics/control-flow/view.dml +55 -0
  13. package/dist/templates/showcase/pages/basics/events/controller.ts +42 -0
  14. package/dist/templates/showcase/pages/basics/events/state.ts +11 -0
  15. package/dist/templates/showcase/pages/basics/events/view.dml +51 -0
  16. package/dist/templates/showcase/pages/basics/hooks/controller.ts +36 -0
  17. package/dist/templates/showcase/pages/basics/hooks/state.ts +10 -0
  18. package/dist/templates/showcase/pages/basics/hooks/view.dml +32 -0
  19. package/dist/templates/showcase/pages/basics/navigation/controller.ts +33 -0
  20. package/dist/templates/showcase/pages/basics/navigation/state.ts +9 -0
  21. package/dist/templates/showcase/pages/basics/navigation/view.dml +37 -0
  22. package/dist/templates/showcase/pages/basics/state/view.dml +46 -0
  23. package/dist/templates/showcase/pages/{carousel → components/carousel}/view.dml +7 -5
  24. package/dist/templates/showcase/pages/{feedback → components/feedback}/view.dml +18 -9
  25. package/dist/templates/showcase/pages/{forms → components/forms}/controller.ts +4 -1
  26. package/dist/templates/showcase/pages/{forms → components/forms}/state.ts +3 -0
  27. package/dist/templates/showcase/pages/components/forms/view.dml +90 -0
  28. package/dist/templates/showcase/pages/components/icons/controller.ts +14 -0
  29. package/dist/templates/showcase/pages/components/icons/state.ts +75 -0
  30. package/dist/templates/showcase/pages/components/icons/view.dml +36 -0
  31. package/dist/templates/showcase/pages/components/images/view.dml +70 -0
  32. package/dist/templates/showcase/pages/components/layout/view.dml +143 -0
  33. package/dist/templates/showcase/pages/components/lists/controller.ts +17 -0
  34. package/dist/templates/showcase/pages/{lists → components/lists}/state.ts +43 -30
  35. package/dist/templates/showcase/pages/components/lists/view.dml +70 -0
  36. package/dist/templates/showcase/pages/{payments → components/money}/view.dml +17 -8
  37. package/dist/templates/showcase/pages/components/reading/state.ts +23 -0
  38. package/dist/templates/showcase/pages/components/reading/view.dml +42 -0
  39. package/dist/templates/showcase/pages/{lists → components/sheets}/controller.ts +8 -10
  40. package/dist/templates/showcase/pages/components/sheets/state.ts +26 -0
  41. package/dist/templates/showcase/pages/components/sheets/view.dml +38 -0
  42. package/dist/templates/showcase/pages/components/styles/controller.ts +5 -0
  43. package/dist/templates/showcase/pages/components/styles/view.dml +101 -0
  44. package/dist/templates/showcase/pages/{filters → components/tabs}/controller.ts +1 -0
  45. package/dist/templates/showcase/pages/{filters → components/tabs}/state.ts +1 -0
  46. package/dist/templates/showcase/pages/components/tabs/view.dml +56 -0
  47. package/dist/templates/showcase/pages/components/text/controller.ts +9 -0
  48. package/dist/templates/showcase/pages/components/text/state.ts +3 -0
  49. package/dist/templates/showcase/pages/components/text/view.dml +95 -0
  50. package/dist/templates/showcase/pages/{cache → dash/cache}/controller.ts +4 -0
  51. package/dist/templates/showcase/pages/dash/cache/view.dml +48 -0
  52. package/dist/templates/showcase/pages/dash/calls/controller.ts +48 -0
  53. package/dist/templates/showcase/pages/dash/calls/state.ts +6 -0
  54. package/dist/templates/showcase/pages/dash/calls/view.dml +51 -0
  55. package/dist/templates/showcase/pages/dash/files/view.dml +79 -0
  56. package/dist/templates/showcase/pages/dash/media/controller.ts +32 -0
  57. package/dist/templates/showcase/pages/{device → dash/media}/state.ts +0 -4
  58. package/dist/templates/showcase/pages/dash/media/view.dml +34 -0
  59. package/dist/templates/showcase/pages/dash/network/view.dml +80 -0
  60. package/dist/templates/showcase/pages/dash/secrets/view.dml +26 -0
  61. package/dist/templates/showcase/pages/dash/system/controller.ts +61 -0
  62. package/dist/templates/showcase/pages/dash/system/state.ts +9 -0
  63. package/dist/templates/showcase/pages/dash/system/view.dml +59 -0
  64. package/dist/templates/showcase/pages/dash/ui/controller.ts +69 -0
  65. package/dist/templates/showcase/pages/dash/ui/state.ts +8 -0
  66. package/dist/templates/showcase/pages/dash/ui/view.dml +31 -0
  67. package/dist/templates/showcase/pages/index/state.ts +135 -64
  68. package/dist/templates/showcase/pages/index/view.dml +6 -3
  69. package/package.json +6 -6
  70. package/dist/templates/showcase/pages/cache/view.dml +0 -36
  71. package/dist/templates/showcase/pages/device/controller.ts +0 -105
  72. package/dist/templates/showcase/pages/device/view.dml +0 -69
  73. package/dist/templates/showcase/pages/files/view.dml +0 -64
  74. package/dist/templates/showcase/pages/filters/view.dml +0 -44
  75. package/dist/templates/showcase/pages/forms/view.dml +0 -49
  76. package/dist/templates/showcase/pages/images/view.dml +0 -53
  77. package/dist/templates/showcase/pages/layout/view.dml +0 -103
  78. package/dist/templates/showcase/pages/lists/view.dml +0 -59
  79. package/dist/templates/showcase/pages/navigation/controller.ts +0 -65
  80. package/dist/templates/showcase/pages/navigation/state.ts +0 -17
  81. package/dist/templates/showcase/pages/navigation/view.dml +0 -34
  82. package/dist/templates/showcase/pages/network/view.dml +0 -67
  83. package/dist/templates/showcase/pages/secrets/view.dml +0 -24
  84. package/dist/templates/showcase/pages/state/view.dml +0 -33
  85. package/dist/templates/showcase/pages/styles/view.dml +0 -61
  86. package/dist/templates/showcase/pages/text/state.ts +0 -8
  87. package/dist/templates/showcase/pages/text/view.dml +0 -58
  88. /package/dist/templates/showcase/pages/{state → basics/state}/controller.ts +0 -0
  89. /package/dist/templates/showcase/pages/{state → basics/state}/state.ts +0 -0
  90. /package/dist/templates/showcase/pages/{carousel → components/carousel}/controller.ts +0 -0
  91. /package/dist/templates/showcase/pages/{carousel → components/carousel}/state.ts +0 -0
  92. /package/dist/templates/showcase/pages/{feedback → components/feedback}/controller.ts +0 -0
  93. /package/dist/templates/showcase/pages/{feedback → components/feedback}/state.ts +0 -0
  94. /package/dist/templates/showcase/pages/{images → components/images}/controller.ts +0 -0
  95. /package/dist/templates/showcase/pages/{images → components/images}/state.ts +0 -0
  96. /package/dist/templates/showcase/pages/{layout → components/layout}/controller.ts +0 -0
  97. /package/dist/templates/showcase/pages/{layout → components/layout}/state.ts +0 -0
  98. /package/dist/templates/showcase/pages/{payments → components/money}/controller.ts +0 -0
  99. /package/dist/templates/showcase/pages/{payments → components/money}/state.ts +0 -0
  100. /package/dist/templates/showcase/pages/{styles → components/reading}/controller.ts +0 -0
  101. /package/dist/templates/showcase/pages/{styles → components/styles}/state.ts +0 -0
  102. /package/dist/templates/showcase/pages/{cache → dash/cache}/state.ts +0 -0
  103. /package/dist/templates/showcase/pages/{files → dash/files}/controller.ts +0 -0
  104. /package/dist/templates/showcase/pages/{files → dash/files}/state.ts +0 -0
  105. /package/dist/templates/showcase/pages/{network → dash/network}/controller.ts +0 -0
  106. /package/dist/templates/showcase/pages/{network → dash/network}/state.ts +0 -0
  107. /package/dist/templates/showcase/pages/{secrets → dash/secrets}/controller.ts +0 -0
  108. /package/dist/templates/showcase/pages/{secrets → dash/secrets}/state.ts +0 -0
@@ -1,49 +0,0 @@
1
- <View>
2
- <Text variant="title">Forms</Text>
3
- <Text>Buy tickets for a show. The page checks the form when you send it. Some fields turn off based on your choices.</Text>
4
-
5
- <View variant="card">
6
- <Select label="Show" placeholder="Choose a show" hint="Every show has the same prices" value="{{ show }}" error="{{ errors.show }}" disabled="{{ sending }}" onChange="setShow">
7
- <Option value="freetown" label="Salone Sounds Live · Freetown" />
8
- <Option value="bo" label="Palm-wine evening · Bo" />
9
- <Option value="kenema" label="Gospel night · Kenema" />
10
- </Select>
11
- <Input label="Name" placeholder="Mariama Kamara" value="{{ name }}" maxLength="40" onChange="setName" />
12
- <Input label="Email" type="email" placeholder="mariama@example.com" hint="{{ eTickets ? 'For the e-tickets' : 'Turn on e-tickets below to use it' }}" value="{{ email }}" disabled="{{ !eTickets }}" onChange="setEmail" />
13
- <Input label="Phone" type="phone" prefix="+232" placeholder="76 123456" value="{{ phone }}" error="{{ errors.phone }}" onChange="setPhone" />
14
- <Input label="Tickets" type="number" placeholder="2" suffix="at most 10" value="{{ tickets }}" error="{{ errors.tickets }}" onChange="setTickets" />
15
- <TextArea label="Shout-out" placeholder="A message for the band, read out on the night" rows="3" maxLength="140" hint="{{ ticket === 'regular' ? 'Shout-outs come with VIP and table tickets' : shoutOut.length + ' of 140' }}" value="{{ shoutOut }}" error="{{ errors.shoutOut }}" disabled="{{ ticket === 'regular' }}" onChange="setShoutOut" />
16
- </View>
17
-
18
- <View variant="card">
19
- <RadioGroup label="Ticket" value="{{ ticket }}" onChange="setTicket">
20
- <Radio value="regular" label="Regular · Le 150" />
21
- <Radio value="vip" label="VIP, near the stage · Le 400" />
22
- <Radio value="table" label="Table for four · Le 1,200" />
23
- </RadioGroup>
24
- <Divider />
25
- <Switch label="Email me the e-tickets" checked="{{ eTickets }}" onChange="setETickets" />
26
- <Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />
27
- </View>
28
-
29
- <Text variant="caption" tone="muted">Your order</Text>
30
- <View variant="card" gap="none">
31
- <DetailRow label="Show" value="{{ showName }}" />
32
- <DetailRow label="Ticket" value="{{ ticketName }}" />
33
- <DetailRow label="How many" value="{{ tickets || '0' }}" />
34
- <Divider />
35
- <DetailRow label="Total" value="{{ total }}" weight="bold" paddingTop="medium" />
36
- <DetailRow label="Paid" value="{{ sent ? 'Yes' : 'Not yet' }}" tone="{{ sent ? 'success' : 'warning' }}" />
37
- </View>
38
-
39
- <If condition="{{ sent }}">
40
- <Notice tone="success" title="Booked">{{ sent }}</Notice>
41
- </If>
42
- <If condition="{{ failure }}">
43
- <Notice tone="danger" title="Not booked">{{ failure }}</Notice>
44
- </If>
45
-
46
- <Footer>
47
- <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Buy tickets</Button>
48
- </Footer>
49
- </View>
@@ -1,53 +0,0 @@
1
- <View>
2
- <Text variant="title">Images</Text>
3
- <Text>Pictures in the statics/ folder come with the dot, and the build checks each one. Pictures from the web load from their address.</Text>
4
-
5
- <View variant="card" direction="row" align="end" gap="large">
6
- <Image src="statics/logo.png" alt="Small logo" width="24" height="24" />
7
- <Image src="statics/logo.png" alt="Medium logo" width="48" height="48" />
8
- <Image src="statics/logo.png" alt="Large logo" width="96" height="96" />
9
- </View>
10
-
11
- <Text variant="caption" tone="muted">From the web: the cover of Drizilik's album AUDACITY. With aspect="1:1" and no width, it fills the card.</Text>
12
- <View variant="card" gap="small">
13
- <If condition="{{ cover }}">
14
- <Image src="{{ cover }}" alt="The cover of AUDACITY, by Drizilik" aspect="1:1" />
15
- <Text weight="medium">AUDACITY</Text>
16
- <Text variant="caption" tone="muted">Drizilik raps mostly in Krio, in a style called Kriofusion. He won Best Male Artist at the 2026 SLeDU awards.</Text>
17
- </If>
18
- <ElseIf condition="{{ coverNote }}">
19
- <Text variant="caption" tone="muted">{{ coverNote }}</Text>
20
- </ElseIf>
21
- <Else>
22
- <Skeleton shape="box" height="280" />
23
- </Else>
24
- </View>
25
-
26
- <Text variant="caption" tone="muted">Shapes, and how a picture fills its space</Text>
27
- <View variant="card" direction="row" align="center" gap="large">
28
- <Image src="statics/logo.png" alt="Rounded" width="56" height="56" />
29
- <Image src="statics/logo.png" alt="Square" width="56" height="56" shape="square" />
30
- <Image src="statics/logo.png" alt="Circle" width="56" height="56" shape="circle" />
31
- <Image src="statics/logo.png" alt="Contained" width="96" height="56" fit="contain" />
32
- </View>
33
-
34
- <Text variant="caption" tone="muted">Sizes can come from state</Text>
35
- <View variant="card" gap="small">
36
- <Image src="statics/logo.png" alt="Logo" width="{{ size }}" height="{{ size }}" onLoad="logoLoaded" />
37
- <Text>{{ size }} × {{ size }} on screen, {{ loaded }} in the file</Text>
38
- <View direction="row" gap="small">
39
- <Button variant="secondary" onClick="shrink" disabled="{{ size <= 16 }}">Smaller</Button>
40
- <Button variant="secondary" onClick="grow" disabled="{{ size >= 128 }}">Bigger</Button>
41
- </View>
42
- </View>
43
-
44
- <Text variant="caption" tone="muted">A broken image shows why it failed</Text>
45
- <View variant="card">
46
- <If condition="{{ failure }}">
47
- <Text>{{ failure }}</Text>
48
- </If>
49
- <Else>
50
- <Image src="{{ missing }}" alt="" width="48" height="48" onError="missingFailed" />
51
- </Else>
52
- </View>
53
- </View>
@@ -1,103 +0,0 @@
1
- <View>
2
- <Text variant="title">Layout</Text>
3
- <Text>A View puts its items in a column or a row. Change the one below.</Text>
4
-
5
- <View variant="card" direction="{{ direction }}" justify="{{ justify }}" align="{{ align }}" gap="{{ gap }}" wrap="{{ wrap }}">
6
- <Button variant="secondary">Palm-wine</Button>
7
- <Button variant="secondary">Gumbe</Button>
8
- <Text variant="title">Afropop</Text>
9
- <Button variant="secondary">Bubu</Button>
10
- <Text variant="caption" tone="muted">Milo jazz</Text>
11
- </View>
12
-
13
- <View gap="small">
14
- <View direction="row" align="center">
15
- <Text>direction="{{ direction }}"</Text>
16
- <View grow />
17
- <Button variant="secondary" onClick="nextDirection">Change</Button>
18
- </View>
19
- <View direction="row" align="center">
20
- <Text>justify="{{ justify }}"</Text>
21
- <View grow />
22
- <Button variant="secondary" onClick="nextJustify">Change</Button>
23
- </View>
24
- <View direction="row" align="center">
25
- <Text>align="{{ align }}"</Text>
26
- <View grow />
27
- <Button variant="secondary" onClick="nextAlign">Change</Button>
28
- </View>
29
- <View direction="row" align="center">
30
- <Text>gap="{{ gap }}"</Text>
31
- <View grow />
32
- <Button variant="secondary" onClick="nextGap">Change</Button>
33
- </View>
34
- <View direction="row" align="center">
35
- <Text>wrap="{{ wrap }}"</Text>
36
- <View grow />
37
- <Button variant="secondary" onClick="toggleWrap">Change</Button>
38
- </View>
39
- </View>
40
-
41
- <Text variant="caption" tone="muted">grow fills the space left over: the song grows, the year does not. Tap the song: a View can be tapped.</Text>
42
- <View direction="row" gap="small">
43
- <View variant="card" grow onTap="playSong">
44
- <Text>{{ playing ? 'Playing Exodus, by Drizilik' : 'Exodus, by Drizilik' }}</Text>
45
- </View>
46
- <View variant="card">
47
- <Text>2021</Text>
48
- </View>
49
- </View>
50
-
51
- <Text variant="caption" tone="muted">A Scroll moves a row sideways. It stops at the start of each release. The buttons scroll it too.</Text>
52
- <Scroll gap="medium" snap="start" index="{{ first }}" onChange="showFirst">
53
- <For each="{{ releases }}" item="release" key="id">
54
- <View gap="small">
55
- <If condition="{{ release.cover }}">
56
- <Image src="{{ release.cover }}" alt="{{ release.title }}" width="128" height="128" />
57
- </If>
58
- <Else>
59
- <Skeleton shape="box" height="128" />
60
- </Else>
61
- <Text weight="medium" maxLines="2">{{ release.title }}</Text>
62
- <Text variant="caption" tone="muted">{{ release.year }}</Text>
63
- </View>
64
- </For>
65
- </Scroll>
66
- <Text tone="muted">First on the shelf: {{ releases[first].title }}</Text>
67
- <View direction="row" gap="small">
68
- <Button variant="secondary" onClick="shelfStart" disabled="{{ first === 0 }}">To the start</Button>
69
- <Button variant="secondary" onClick="shelfEnd" disabled="{{ first === releases.length - 1 }}">To the end</Button>
70
- </View>
71
-
72
- <Text variant="caption" tone="muted">padding, on every side or on one side</Text>
73
- <View direction="row" gap="small">
74
- <View variant="card" padding="small">
75
- <Text>small</Text>
76
- </View>
77
- <View variant="card" padding="large">
78
- <Text>large</Text>
79
- </View>
80
- <View variant="card" padding="small" paddingStart="large">
81
- <Text>start</Text>
82
- </View>
83
- </View>
84
- <Text variant="caption" tone="muted">Text, List, Notice and Grid take padding too</Text>
85
- <Notice title="Heads up" paddingTop="large" paddingBottom="large">This notice has large padding above and below.</Notice>
86
-
87
- <Text variant="caption" tone="muted">A Grid keeps its columns the same width</Text>
88
- <View variant="card" gap="medium">
89
- <Grid columns="4">
90
- <GridItem icon="microphone" label="Artists" data-name="Artists" onTap="openSection" />
91
- <GridItem icon="music" label="Albums" data-name="Albums" onTap="openSection" />
92
- <GridItem icon="playlist" label="Playlists" data-name="Playlists" onTap="openSection" />
93
- <GridItem icon="star" label="Charts" badge="New" data-name="Charts" onTap="openSection" />
94
- <GridItem icon="calendar" label="Shows" data-name="Shows" onTap="openSection" />
95
- <GridItem icon="ticket" label="Tickets" data-name="Tickets" onTap="openSection" />
96
- <GridItem icon="headphones" label="Library" data-name="Library" onTap="openSection" />
97
- <GridItem image="statics/logo.png" label="Salone" data-name="Salone" onTap="openSection" />
98
- </Grid>
99
- <If condition="{{ section }}">
100
- <Text tone="muted">You tapped {{ section }}</Text>
101
- </If>
102
- </View>
103
- </View>
@@ -1,59 +0,0 @@
1
- <View>
2
- <Text variant="title">Lists and icons</Text>
3
- <Text>A List shows rows in a card. Small lists are compact, and medium lists have more room. A row can show an icon or a picture, a value at its end, and an arrow when you can tap it.</Text>
4
-
5
- <View gap="small">
6
- <Text variant="caption" tone="muted">Artists in a small list. Tap one: its data- attributes tell the page which one.</Text>
7
- <List>
8
- <For each="{{ artists }}" item="artist" key="id">
9
- <ListItem icon="{{ artist.icon }}" title="{{ artist.name }}" subtitle="{{ artist.song }}" value="{{ artist.genre }}" data-id="{{ artist.id }}" onTap="choose" />
10
- </For>
11
- </List>
12
- <If condition="{{ chosen }}">
13
- <Text>You chose {{ chosen }}</Text>
14
- </If>
15
- </View>
16
-
17
- <View gap="small">
18
- <Text variant="caption" tone="muted">Famous records in a medium list, each with a badge. Tap one to see its actions.</Text>
19
- <List size="md">
20
- <For each="{{ releases }}" item="release" key="id">
21
- <ListItem title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}" data-id="{{ release.id }}" onTap="openRelease">
22
- <Badge tone="{{ release.tone }}">{{ release.note }}</Badge>
23
- </ListItem>
24
- </For>
25
- </List>
26
- </View>
27
-
28
- <View gap="small">
29
- <Text variant="caption" tone="muted">Icons by name, in any tone, including music icons</Text>
30
- <View variant="card" direction="row" wrap gap="large">
31
- <For each="{{ icons }}" item="icon" key="*this">
32
- <Icon name="{{ icon }}" />
33
- </For>
34
- </View>
35
- <View variant="card" direction="row" wrap gap="large" align="center">
36
- <Icon name="info" tone="info" size="small" />
37
- <Icon name="success" tone="success" />
38
- <Icon name="warning" tone="warning" size="large" />
39
- <Icon name="error" tone="danger" size="large" />
40
- <Icon name="star" tone="muted" />
41
- </View>
42
- </View>
43
-
44
- <View gap="small">
45
- <Text variant="caption" tone="muted">A divider</Text>
46
- <View variant="card">
47
- <Text>Side A</Text>
48
- <Divider />
49
- <Text>Side B</Text>
50
- </View>
51
- </View>
52
-
53
- <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.year }}" showCloseIcon onClose="closeSheet">
54
- <Button variant="secondary" onClick="copyTitle">Copy the title</Button>
55
- <Button variant="secondary" onClick="shareRelease">Share it</Button>
56
- <Button onClick="closeSheet">Cancel</Button>
57
- </Sheet>
58
- <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
59
- </View>
@@ -1,65 +0,0 @@
1
- import type { HookRun } from './state';
2
- import state from './state';
3
-
4
- export default definePage({
5
- initialState: state,
6
- // What Dash's navigation bar shows until the page changes it.
7
- configs: { navigationBar: { title: 'Navigation' } },
8
- hooks: {
9
- // Options come from the page that opened this one, as strings.
10
- onLoad(options) {
11
- const depth = Number(options.depth ?? '1') + 1;
12
- const from = options.trail ?? 'Home';
13
- this.setState({ depth, from, trail: `${from} › ${depth}` });
14
- this.setNavigationBar({ title: `Page ${depth}` });
15
- this.setState((current) => ({ hooks: ran(current.hooks, 'onLoad') }));
16
- },
17
- onShow() {
18
- this.setState((current) => ({ hooks: ran(current.hooks, 'onShow') }));
19
- },
20
- onHide() {
21
- this.setState((current) => ({ hooks: ran(current.hooks, 'onHide') }));
22
- },
23
- },
24
- actions: {
25
- openAnother(state) {
26
- this.navigation.push('navigation', { depth: String(state.depth), trail: state.trail });
27
- },
28
- replaceThis(state) {
29
- this.navigation.replace('navigation', { depth: String(state.depth - 1), trail: state.from });
30
- },
31
- back() {
32
- this.navigation.back();
33
- },
34
- backTwo() {
35
- this.navigation.back(2);
36
- },
37
- home() {
38
- this.navigation.reset('index');
39
- },
40
- toggleColors(state) {
41
- const colored = !state.colored;
42
- // Undefined puts Dash's own colors back.
43
- this.setNavigationBar({
44
- // The green of Sierra Leone's flag.
45
- backgroundColor: colored ? '#1EB53A' : undefined,
46
- textColor: colored ? '#FFFFFF' : undefined,
47
- });
48
- this.setState({ colored });
49
- },
50
- toggleNavigationBar(state) {
51
- const navigationBarHidden = !state.navigationBarHidden;
52
- this.setNavigationBar({ hidden: navigationBarHidden });
53
- this.setState({ navigationBarHidden });
54
- },
55
- toggleTabBar(state) {
56
- const tabBarHidden = !state.tabBarHidden;
57
- this.setTabBar({ hidden: tabBarHidden });
58
- this.setState({ tabBarHidden });
59
- },
60
- },
61
- });
62
-
63
- function ran(hooks: readonly HookRun[], hook: string): HookRun[] {
64
- return [...hooks, { id: hooks.length + 1, hook }];
65
- }
@@ -1,17 +0,0 @@
1
- export interface HookRun {
2
- id: number;
3
- hook: string;
4
- }
5
-
6
- export default {
7
- depth: 1,
8
- maxDepth: 16,
9
- // The trail of the page that opened this one.
10
- from: '',
11
- trail: '',
12
- hooks: [] as HookRun[],
13
- // What this page set in Dash's bars.
14
- colored: false,
15
- navigationBarHidden: false,
16
- tabBarHidden: false,
17
- };
@@ -1,34 +0,0 @@
1
- <View>
2
- <Text variant="caption" tone="muted">{{ trail }}</Text>
3
- <Text variant="title">Navigation and hooks</Text>
4
- <Text>Each new page opens on top. Back returns to the page below. A dot can have {{ maxDepth }} pages open at once.</Text>
5
-
6
- <View variant="card" gap="small">
7
- <Text>This is page {{ depth }} of {{ maxDepth }}</Text>
8
- <View direction="row" wrap gap="small">
9
- <Button onClick="openAnother" disabled="{{ depth >= maxDepth }}">Open another</Button>
10
- <Button variant="secondary" onClick="replaceThis">Replace this one</Button>
11
- <Button variant="secondary" onClick="back">Back</Button>
12
- <Button variant="secondary" onClick="backTwo" disabled="{{ depth < 3 }}">Back two</Button>
13
- <Button variant="secondary" onClick="home">Start over</Button>
14
- </View>
15
- </View>
16
-
17
- <Text variant="caption" tone="muted">Each page sets Dash's bars. This page's title is its number.</Text>
18
- <View variant="card" gap="small">
19
- <View direction="row" wrap gap="small">
20
- <Button variant="secondary" onClick="toggleColors">{{ colored ? 'Plain bar' : 'Green bar' }}</Button>
21
- <Button variant="secondary" onClick="toggleNavigationBar">{{ navigationBarHidden ? 'Show the navigation bar' : 'Hide the navigation bar' }}</Button>
22
- <Button variant="secondary" onClick="toggleTabBar">{{ tabBarHidden ? 'Show the tab bar' : 'Hide the tab bar' }}</Button>
23
- </View>
24
- <Text variant="caption" tone="muted">Going back shows that page's bars again. Leaving the dot brings back Dash's bars.</Text>
25
- </View>
26
-
27
- <Text variant="caption" tone="muted">The hooks this page ran, in order</Text>
28
- <View variant="card" gap="small">
29
- <For each="{{ hooks }}" item="run" key="id">
30
- <Text>{{ run.id }}. {{ run.hook }}</Text>
31
- </For>
32
- <Text variant="caption" tone="muted">Open another page and come back. This page runs onHide, then onShow.</Text>
33
- </View>
34
- </View>
@@ -1,67 +0,0 @@
1
- <View>
2
- <Text variant="title">Network</Text>
3
- <Text>Dash sends the dot's requests, only to hosts listed in dot.json. This page searches Apple's music catalog.</Text>
4
-
5
- <View variant="card" gap="small">
6
- <Input label="Artist" placeholder="Drizilik" value="{{ artist }}" maxLength="40" onChange="setArtist" onSubmit="search" />
7
- <View direction="row" wrap gap="small">
8
- <Button onClick="search" loading="{{ searching }}" disabled="{{ !artist }}">Search</Button>
9
- <Button variant="secondary" onClick="searchAsText" disabled="{{ !artist }}">Read as text</Button>
10
- </View>
11
- <If condition="{{ raw }}">
12
- <Text variant="caption" tone="muted">The answer as text starts with: {{ raw }}</Text>
13
- </If>
14
- </View>
15
-
16
- <Text variant="caption" tone="muted">The same answer read as JSON, with artwork. Near the end, the list loads 10 more, up to 50. {{ releases.length }} so far.</Text>
17
- <If condition="{{ releases.length > 0 }}">
18
- <List onEndReached="loadMore">
19
- <For each="{{ releases }}" item="release" key="id">
20
- <ListItem image="{{ release.artwork }}" title="{{ release.title }}" subtitle="{{ release.album }} · {{ release.year }}" />
21
- </For>
22
- </List>
23
- </If>
24
- <Else>
25
- <View variant="card">
26
- <EmptyState icon="search" title="No songs yet" text="Search for an artist, such as Drizilik, Kao Denero or Emmerson." />
27
- </View>
28
- </Else>
29
-
30
- <Text variant="caption" tone="muted">JSON sent to httpbin, which sends it back</Text>
31
- <View variant="card" gap="small">
32
- <Button variant="secondary" onClick="sendJson">Send the first song as JSON</Button>
33
- <If condition="{{ echo }}">
34
- <Text>httpbin got {{ echo }}</Text>
35
- </If>
36
- </View>
37
-
38
- <Text variant="caption" tone="muted">Files: download the first song's artwork, upload it, and save it</Text>
39
- <View variant="card" gap="small">
40
- <View direction="row" wrap gap="small">
41
- <Button variant="secondary" onClick="download" disabled="{{ releases.length === 0 }}">Download</Button>
42
- <Button variant="secondary" onClick="upload" disabled="{{ !picture.id }}">Upload</Button>
43
- <Button variant="secondary" onClick="sharePicture" disabled="{{ !picture.id }}">Share</Button>
44
- <Button variant="secondary" onClick="keep" disabled="{{ !picture.id || kept }}">Keep</Button>
45
- </View>
46
- <If condition="{{ picture.url }}">
47
- <View direction="row" align="center" gap="medium">
48
- <Image src="{{ picture.url }}" alt="Artwork" width="64" height="64" />
49
- <Text variant="caption" tone="muted">{{ picture.size }} bytes, in a temporary file until the dot closes</Text>
50
- </View>
51
- </If>
52
- <If condition="{{ uploaded }}">
53
- <Text>httpbin got the file field "{{ uploaded }}"</Text>
54
- </If>
55
- <If condition="{{ kept }}">
56
- <Text>Saved in the dot's files. See the Files page.</Text>
57
- </If>
58
- </View>
59
-
60
- <Text variant="caption" tone="muted">A host that dot.json does not list</Text>
61
- <View variant="card" gap="small">
62
- <Button variant="secondary" onClick="tryUnlistedHost">Reach example.com</Button>
63
- <If condition="{{ note }}">
64
- <Text variant="caption" tone="muted">{{ note }}</Text>
65
- </If>
66
- </View>
67
- </View>
@@ -1,24 +0,0 @@
1
- <View>
2
- <Text variant="title">Secrets</Text>
3
- <Text>Secrets hold sign-in tokens from the dot's own server. Dash keeps them encrypted on the phone. A dot can keep up to 8.</Text>
4
-
5
- <Text variant="caption" tone="muted">A sign-in that stays</Text>
6
- <View variant="card" gap="small">
7
- <If condition="{{ token }}">
8
- <Text>Signed in as {{ signedInAs }}</Text>
9
- <Text variant="caption" tone="muted">Session token {{ token }}</Text>
10
- <View direction="row" gap="small">
11
- <Button variant="secondary" onClick="signOut">Sign out</Button>
12
- <Button variant="secondary" onClick="forgetAll">Forget every secret</Button>
13
- </View>
14
- </If>
15
- <Else>
16
- <Input label="Name" placeholder="Mariama" value="{{ name }}" maxLength="40" onChange="setName" onSubmit="signIn" />
17
- <Button onClick="signIn" disabled="{{ !name }}">Sign in</Button>
18
- <Text variant="caption" tone="muted">Sign in, then close and reopen the dot. You stay signed in.</Text>
19
- </Else>
20
- </View>
21
-
22
- <Text variant="caption" tone="muted">Your name is saved in the cache. Only the token is a secret.</Text>
23
- <Text variant="caption" tone="muted">Never put your API keys in the dot's code: it is open to read.</Text>
24
- </View>
@@ -1,33 +0,0 @@
1
- <View>
2
- <Text variant="title">State, mutations and actions</Text>
3
- <Text>The page keeps its data in state. A mutation changes state when something happens. An action can run several steps or wait for Dash. Here, the crowd wants one more song.</Text>
4
-
5
- <View variant="card" gap="small">
6
- <Text variant="title">{{ count }} of {{ limit }} {{ title }}</Text>
7
- <If condition="{{ count >= limit }}">
8
- <Text>Encore! The band comes back on</Text>
9
- </If>
10
- <ElseIf condition="{{ count > 0 }}">
11
- <Text>{{ limit - count }} more and the band comes back</Text>
12
- </ElseIf>
13
- <Else>
14
- <Text>Tap Cheer to start</Text>
15
- </Else>
16
- <View direction="row" wrap gap="small">
17
- <Button onClick="increment" disabled="{{ count >= limit }}">Cheer</Button>
18
- <Button variant="secondary" onClick="fillUp" disabled="{{ count >= limit }}">Whole crowd</Button>
19
- <Button variant="secondary" onClick="undo" disabled="{{ count === 0 }}">Undo</Button>
20
- <Button variant="secondary" onClick="reset" disabled="{{ count === 0 }}">Reset</Button>
21
- </View>
22
- </View>
23
-
24
- <Text variant="caption" tone="muted">Each cheer, newest first</Text>
25
- <View variant="card" gap="small">
26
- <For each="{{ taps }}" index="position" item="tap" key="id">
27
- <Text>{{ position + 1 }}. Cheer #{{ tap.id }}</Text>
28
- </For>
29
- <If condition="{{ taps.length === 0 }}">
30
- <Text variant="caption" tone="muted">No cheers yet</Text>
31
- </If>
32
- </View>
33
- </View>
@@ -1,61 +0,0 @@
1
- <View>
2
- <Text variant="title">Styles</Text>
3
- <Text>Colours, outlines, corners and sizes come from the theme, so a dot looks right in light and dark.</Text>
4
-
5
- <Text variant="caption" tone="muted">background="primary", with text tone="onPrimary"</Text>
6
- <View background="primary" radius="large" padding="large" gap="small">
7
- <Text variant="caption" tone="onPrimary">Your balance</Text>
8
- <Text variant="display" tone="onPrimary" numeric>{{ balance }}</Text>
9
- </View>
10
-
11
- <Text variant="caption" tone="muted">A tone as a background is a soft tint</Text>
12
- <View direction="row" gap="small" wrap>
13
- <View background="success" radius="medium" padding="small">
14
- <Text tone="success" weight="medium">Paid</Text>
15
- </View>
16
- <View background="warning" radius="medium" padding="small">
17
- <Text tone="warning" weight="medium">Due Friday</Text>
18
- </View>
19
- <View background="danger" radius="medium" padding="small">
20
- <Text tone="danger" weight="medium">Failed</Text>
21
- </View>
22
- </View>
23
-
24
- <Text variant="caption" tone="muted">The dot's own colours, named in dot.ts</Text>
25
- <View direction="row" gap="small" align="center">
26
- <View background="gold" radius="full" paddingTop="small" paddingBottom="small" paddingStart="medium" paddingEnd="medium">
27
- <Text weight="medium" tone="ink">Gold member</Text>
28
- </View>
29
- <Text tone="gold" weight="bold">Since 2024</Text>
30
- </View>
31
-
32
- <Text variant="caption" tone="muted">Outlines, corners and sizes in points</Text>
33
- <View direction="row" gap="medium" align="end">
34
- <View width="56" height="56" background="muted" radius="small" />
35
- <View width="56" height="56" background="muted" radius="medium" />
36
- <View width="56" height="56" background="muted" radius="full" />
37
- <View width="56" height="56" border="strong" radius="medium" />
38
- </View>
39
-
40
- <Text variant="caption" tone="muted">Prices with even digits, and the old one crossed out</Text>
41
- <View variant="card" direction="row" align="center" gap="small">
42
- <Text variant="subtitle">Freetown Jazz Night</Text>
43
- <View grow />
44
- <Text tone="muted" decoration="strikethrough" numeric>SLE 150</Text>
45
- <Text weight="bold" numeric>SLE 120</Text>
46
- </View>
47
-
48
- <Text variant="caption" tone="muted">A Stack lays its children on top of each other</Text>
49
- <Stack radius="large" aspect="16:9">
50
- <View background="gold" />
51
- <View justify="end" padding="large">
52
- <Text variant="subtitle" tone="ink">Bo market day</Text>
53
- <Text tone="ink">Every Saturday, from 7 am</Text>
54
- </View>
55
- <View align="end" padding="medium">
56
- <View background="primary" radius="full" paddingStart="small" paddingEnd="small">
57
- <Text variant="caption" tone="onPrimary" weight="bold">New</Text>
58
- </View>
59
- </View>
60
- </Stack>
61
- </View>
@@ -1,8 +0,0 @@
1
- export default {
2
- name: 'Mariama',
3
- stageName: null as string | null,
4
- // Le, in the leone since 2022, when it dropped three zeros.
5
- price: 150,
6
- tickets: 4,
7
- genres: ['kriofusion', 'palm-wine', 'gumbe'],
8
- };