@monimesl/dot-cli 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/templates/showcase/dot.ts

@@ -29,6 +29,8 @@ export default defineDot({
     'components/carousel',
     'components/lists',
     'components/tabs',
+    'components/pinned',
+    'components/capture',
     'components/forms',
     'components/money',
     'components/feedback',
@@ -65,13 +67,14 @@ export default defineDot({
         gold: { light: '#f5c542', dark: '#d4a72c' },
         // Dark text that reads on gold in both light and dark.
         ink: { light: '#1c1c1e', dark: '#1c1c1e' },
+        amber: { light: '#e8952a', dark: '#f0a63a' },
         ...swatchColors(),
       },
     },
     // The showcase's own icon, an SVG in statics/, used by name like Dot's icons.
     icons: { 'ticket-stub': 'statics/icons/ticket-stub.svg' },
     // A gradient between two of the theme's colours, for a View's background.
-    gradients: { goldenHour: { from: 'gold', to: 'warning', direction: 'diagonal' } },
+    gradients: { goldenHour: { from: 'gold', to: 'amber', direction: 'diagonal' } },
   },
   // logger() writes each page load, event, navigation and state change to the console.
   plugins: [logger()],

package/dist/templates/showcase/pages/basics/theme/view.dml

@@ -28,7 +28,7 @@
 
   <View gap="small">
     <Text variant="subtitle">font, headingFont, headingWeight and textSize</Text>
-    <Text variant="caption" tone="muted">font is one of the phone's own fonts, so nothing is downloaded: system (the default), rounded, serif or mono. headingFont and headingWeight give titles their own. textSize, small, regular or large, makes all text a tenth smaller or larger.</Text>
+    <Text variant="caption" tone="muted">font is one of the phone's own fonts, so nothing is downloaded: system (the default), rounded, serif or mono. headingFont and headingWeight give titles their own. textSize, small, regular or large, makes text a tenth smaller or larger, except what's typed into fields, amounts and codes.</Text>
   </View>
 
   <View gap="small">

package/dist/templates/showcase/pages/components/capture/controller.ts

@@ -0,0 +1,25 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Pictures of a View' } },
+  actions: {
+    async capture() {
+      this.setState({ capturing: true, note: '' });
+      try {
+        const picture = await this.captureView('ticket');
+        this.setState({ picture, note: `${Math.round(picture.size / 1024)} KB` });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      } finally {
+        this.setState({ capturing: false });
+      }
+    },
+    async share() {
+      const { picture } = this.state;
+      if (picture) {
+        await this.dash.system.share({ file: picture });
+      }
+    },
+  },
+});

package/dist/templates/showcase/pages/components/capture/state.ts

@@ -0,0 +1,7 @@
+import type { DotFile } from '@monimesl/dot-runtime';
+
+export default {
+  capturing: false,
+  picture: null as DotFile | null,
+  note: '',
+};

package/dist/templates/showcase/pages/components/capture/view.dml

@@ -0,0 +1,32 @@
+<View>
+  <Text variant="title">Pictures of a View</Text>
+  <Text>Give a View an id, and this.captureView makes a PNG of it, such as a ticket to share. It draws the whole View, even past the bottom of the screen.</Text>
+
+  <View id="ticket" variant="card" gap="medium">
+    <View direction="row" justify="between" align="center">
+      <Text variant="subtitle">Lumley Beach Sundown</Text>
+      <Icon name="ticket-stub" tone="gold" />
+    </View>
+    <Divider />
+    <DetailRow label="Name" value="Mariama Kamara" />
+    <DetailRow label="Where" value="Lumley Beach, Freetown" />
+    <DetailRow label="When" value="Friday, 6 pm" />
+    <DetailRow label="Paid" value="Le 300" />
+    <View align="center">
+      <QRCode value="SALONE-SOUNDS-4471" />
+    </View>
+  </View>
+
+  <Button loading="{{ capturing }}" onClick="capture">Make a picture</Button>
+  <If condition="{{ note }}">
+    <Text variant="caption" tone="muted">{{ note }}</Text>
+  </If>
+
+  <If condition="{{ picture }}">
+    <View gap="medium">
+      <Text variant="caption" tone="muted">captureView gives back a file, as a download does. Show it with an Image, or pass it to dash.system.share. A new picture of a View replaces the last one. A picture from another site shows only if that site allows CORS.</Text>
+      <Image src="{{ picture.url }}" alt="The ticket as a picture" />
+      <Button variant="secondary" onClick="share">Share the picture</Button>
+    </View>
+  </If>
+</View>

package/dist/templates/showcase/pages/components/forms/view.dml

@@ -90,7 +90,7 @@
     <Notice tone="danger" title="Not booked">{{ failure }}</Notice>
   </If>
 
-  <Text variant="caption" tone="muted">A Footer keeps its buttons at the bottom of the screen. Put it last in the page's View.</Text>
+  <Text variant="caption" tone="muted">A Footer keeps its buttons at the bottom of the screen, on a bar from side to side. Put it last in the page's View.</Text>
   <Footer>
     <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Buy tickets</Button>
   </Footer>

package/dist/templates/showcase/pages/components/layout/view.dml

@@ -111,6 +111,19 @@
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">Cards in a Scroll</Text>
+    <Text variant="caption" tone="muted">A Scroll leaves room above and below for a low shadow, so a card's shadow isn't cut. A high shadow needs more than that, so use low here. paddingStart and paddingEnd give the first and last card room at the sides.</Text>
+    <Scroll gap="medium" paddingStart="medium" paddingEnd="medium">
+      <For each="{{ releases }}" item="release" key="id">
+        <View variant="card" elevation="low" border="none" width="144" gap="none">
+          <Text weight="medium" maxLines="1">{{ release.title }}</Text>
+          <Text variant="caption" tone="muted">{{ release.year }}</Text>
+        </View>
+      </For>
+    </Scroll>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">Grid</Text>
     <Text variant="caption" tone="muted">A Grid keeps its columns the same width, 4 unless columns says. A GridItem shows an icon or a picture, with a label and an optional badge.</Text>

package/dist/templates/showcase/pages/components/pinned/controller.ts

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  // This page has its own tabs at the bottom, so it hides Dash's. Dash brings them back on leaving.
+  configs: { navigationBar: { title: 'Pinned bars' }, tabBar: { hidden: true } },
+  mutations: {
+    chooseTab: (_state, event: ValueEvent) => ({ tab: event.detail.value }),
+  },
+});

package/dist/templates/showcase/pages/components/pinned/state.ts

@@ -0,0 +1,25 @@
+export default {
+  tab: 'shows',
+  shows: [
+    { id: 'lumley', title: 'Lumley Beach Sundown', place: 'Lumley Beach, Freetown', day: 'Fri' },
+    { id: 'aberdeen', title: 'Aberdeen Live', place: 'Aberdeen, Freetown', day: 'Fri' },
+    { id: 'wilberforce', title: 'Hilltop Sessions', place: 'Wilberforce, Freetown', day: 'Sat' },
+    { id: 'bo', title: 'Bo Town Jam', place: 'Coronation Field, Bo', day: 'Sat' },
+    { id: 'kenema', title: 'Eastern Beats', place: 'Kenema', day: 'Sat' },
+    { id: 'makeni', title: 'Makeni Nights', place: 'Wusum Stadium, Makeni', day: 'Sun' },
+    { id: 'tokeh', title: 'Tokeh Sands', place: 'Tokeh Beach', day: 'Sun' },
+    { id: 'kono', title: 'Koidu Block Party', place: 'Koidu, Kono', day: 'Sun' },
+    { id: 'bonthe', title: 'Bonthe Island Drums', place: 'Bonthe, Sherbro Island', day: 'Sun' },
+    { id: 'monrovia', title: 'Mano River Night', place: 'Sinkor, Monrovia', day: 'Mon' },
+  ],
+  saved: [
+    { id: 'lumley', title: 'Lumley Beach Sundown', place: 'Lumley Beach, Freetown' },
+    { id: 'bo', title: 'Bo Town Jam', place: 'Coronation Field, Bo' },
+  ],
+  venues: [
+    { id: 'national', name: 'National Stadium', town: 'Freetown' },
+    { id: 'bintumani', name: 'Bintumani Hotel', town: 'Freetown' },
+    { id: 'coronation', name: 'Coronation Field', town: 'Bo' },
+    { id: 'wusum', name: 'Wusum Stadium', town: 'Makeni' },
+  ],
+};

package/dist/templates/showcase/pages/components/pinned/view.dml

@@ -0,0 +1,42 @@
+<View>
+  <Pinned edge="top" background="surface" border="subtle" paddingTop="medium" paddingBottom="medium">
+    <Text weight="bold">Salone gig guide</Text>
+  </Pinned>
+
+  <Text variant="title">Pinned bars</Text>
+  <Text>A Pinned keeps its children on an edge of the screen while the page scrolls. Scroll this page: the title above and the tabs below stay put. Put edge="top" first in the page's View, and edge="bottom" last. At the bottom, use a Pinned or a Footer, not both.</Text>
+  <Text variant="caption" tone="muted">The bar reaches past the page's padding to both sides of the screen, and its children line up with the page. background fills the bar, and border draws a line on the side facing the page.</Text>
+  <Text variant="caption" tone="muted">Tabs in a Pinned make the page's own navigation. variant="bar" shares the width equally, with each Tab's icon over its label and its badge on the icon. The page shows the content for the chosen tab, so the state of each tab stays. This page sets tabBar: { hidden: true } in its configs, so Dash's tabs don't show under its own.</Text>
+
+  <If condition="{{ tab === 'shows' }}">
+    <List>
+      <For each="{{ shows }}" item="show" key="id">
+        <ListItem icon="music" title="{{ show.title }}" subtitle="{{ show.place }}">
+          <Badge>{{ show.day }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </If>
+  <ElseIf condition="{{ tab === 'saved' }}">
+    <List>
+      <For each="{{ saved }}" item="show" key="id">
+        <ListItem icon="heart" title="{{ show.title }}" subtitle="{{ show.place }}" />
+      </For>
+    </List>
+  </ElseIf>
+  <Else>
+    <List>
+      <For each="{{ venues }}" item="venue" key="id">
+        <ListItem icon="home" title="{{ venue.name }}" subtitle="{{ venue.town }}" />
+      </For>
+    </List>
+  </Else>
+
+  <Pinned edge="bottom" background="surface" border="subtle" paddingBottom="medium">
+    <Tabs variant="bar" value="{{ tab }}" onChange="chooseTab">
+      <Tab value="shows" label="Shows" icon="music" />
+      <Tab value="saved" label="Saved" icon="heart" badge="{{ saved.length }}" />
+      <Tab value="venues" label="Venues" icon="location" />
+    </Tabs>
+  </Pinned>
+</View>

package/dist/templates/showcase/pages/components/tabs/view.dml

@@ -4,11 +4,11 @@
 
   <View gap="small">
     <Text variant="subtitle">Tabs and Chip</Text>
-    <Text variant="caption" tone="muted">Tabs sends onChange with the chosen tab's value in event.detail.value. A Tab's badge shows a count. A Chip is selected only when the page says so. An Input with type="search" and clearable makes a search box.</Text>
+    <Text variant="caption" tone="muted">Tabs sends onChange with the chosen tab's value in event.detail.value. A Tab's icon goes before its label, and its badge shows a count. A Chip is selected only when the page says so. An Input with type="search" and clearable makes a search box.</Text>
     <Tabs variant="underline" value="{{ tab }}" onChange="chooseTab">
       <Tab value="all" label="All" />
-      <Tab value="album" label="Albums" badge="{{ albums }}" />
-      <Tab value="song" label="Songs" badge="{{ songs }}" />
+      <Tab value="album" label="Albums" icon="playlist" badge="{{ albums }}" />
+      <Tab value="song" label="Songs" icon="music" badge="{{ songs }}" />
     </Tabs>
     <Input type="search" placeholder="Search by title" clearable value="{{ query }}" onChange="search" />
     <View direction="row" gap="small" wrap>
@@ -43,7 +43,7 @@
 
   <View gap="small">
     <Text variant="subtitle">variant="segmented"</Text>
-    <Text variant="caption" tone="muted">For a few short choices. Shows at home and in the Mano River region.</Text>
+    <Text variant="caption" tone="muted">For a few short choices. Shows at home and in the Mano River region. For a page's own navigation, variant="bar" is on the Pinned bars page.</Text>
     <Tabs variant="segmented" value="{{ where }}" onChange="chooseWhere">
       <Tab value="home" label="Sierra Leone" />
       <Tab value="abroad" label="Abroad" />

package/dist/templates/showcase/pages/index/state.ts

@@ -136,9 +136,21 @@ export default {
         {
           page: 'components/tabs',
           title: 'Tabs and chips',
-          covers: 'Tabs, Tab, Chip',
+          covers: 'Tabs, Tab, Tab icons, Chip',
           icon: 'search',
         },
+        {
+          page: 'components/pinned',
+          title: 'Pinned bars',
+          covers: 'Pinned, Tabs variant="bar"',
+          icon: 'location',
+        },
+        {
+          page: 'components/capture',
+          title: 'Pictures of a View',
+          covers: 'View id, captureView',
+          icon: 'image',
+        },
         {
           page: 'components/forms',
           title: 'Forms',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-cli",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "description": "The dotctl command: build mini apps and run them in the simulator",
   "type": "module",
   "repository": {
@@ -24,11 +24,11 @@
   "dependencies": {
     "typescript": "^5.9.3",
     "uqr": "^0.1.3",
-    "@monimesl/dot-compiler": "1.0.0-beta.8",
-    "@monimesl/dot-core": "1.0.0-beta.8",
-    "@monimesl/dot-dml-parser": "1.0.0-beta.8",
-    "@monimesl/dot-script-parser": "1.0.0-beta.8",
-    "@monimesl/dot-simulator": "1.0.0-beta.8"
+    "@monimesl/dot-compiler": "1.0.0-beta.9",
+    "@monimesl/dot-core": "1.0.0-beta.9",
+    "@monimesl/dot-dml-parser": "1.0.0-beta.9",
+    "@monimesl/dot-script-parser": "1.0.0-beta.9",
+    "@monimesl/dot-simulator": "1.0.0-beta.9"
   },
   "devDependencies": {
     "@types/node": "^22.20.4",