@cavulsqa/create 2.9.2 → 2.10.0

package/templates/m3e-app/src/modules/gallery/views/GalleryContactsView.vue

@@ -0,0 +1,77 @@
+<template>
+  <AppPage :title="t('gallery.contacts.title')" back variant="small">
+    <div class="pe-6">
+      <M3ListGroup v-for="group in groups" :key="group.key" :title="group.key">
+        <M3ListItem
+          v-for="customer in group.customers"
+          :key="customer.name"
+          clickable
+          :headline="customer.name"
+          :supporting="customer.city"
+        >
+          <template #leading>
+            <span
+              class="type-title-medium grid size-10 place-items-center rounded-full bg-secondary-container text-on-secondary-container"
+              >{{ customer.name.charAt(0) }}</span
+            >
+          </template>
+        </M3ListItem>
+      </M3ListGroup>
+    </div>
+
+    <template #fixed>
+      <M3ListIndex :keys="keys" :label="t('gallery.contacts.jump')" />
+    </template>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import { groupKey } from "@cavulsqa/m3e-vue";
+import { WILAYAS } from "@/modules/gallery/composables/wilayas";
+
+const NAMES = [
+  "Amine",
+  "Bachir",
+  "Chérif",
+  "Djamel",
+  "Elias",
+  "Farid",
+  "Ghani",
+  "Hakim",
+  "Idir",
+  "Jamel",
+  "Karim",
+  "Lotfi",
+  "Mourad",
+  "Nabil",
+  "Omar",
+  "Rachid",
+  "Samir",
+  "Tarek",
+  "Walid",
+  "Yacine",
+  "Zinedine",
+];
+const TRADES = ["Alimentation", "Supérette"];
+
+const { t } = useI18n();
+
+const customers = NAMES.flatMap((name, index) =>
+  TRADES.map((trade, offset) => ({
+    name: `${name} ${trade}`,
+    city: WILAYAS[(index * 7 + offset * 13) % WILAYAS.length]!,
+  })),
+).sort((a, b) => a.name.localeCompare(b.name, "fr"));
+
+const groups = [
+  ...customers
+    .reduce((byKey, customer) => {
+      const key = groupKey(customer.name);
+      byKey.set(key, [...(byKey.get(key) ?? []), customer]);
+      return byKey;
+    }, new Map<string, typeof customers>())
+    .entries(),
+].map(([key, members]) => ({ key, customers: members }));
+
+const keys = groups.map((group) => group.key);
+</script>

package/templates/m3e-app/src/modules/gallery/views/GalleryFeaturedView.vue

@@ -0,0 +1,60 @@
+<template>
+  <AppPage
+    :title="story ? t(`gallery.featured.${story.id}.title`) : t('errors.notFoundTitle')"
+    variant="small"
+    back
+  >
+    <template v-if="story">
+      <section
+        class="mx-4 flex flex-col gap-4 rounded-xl p-6"
+        :class="TONE_CLASSES[story.tone]"
+        :aria-label="t(`gallery.featured.${story.id}.title`)"
+      >
+        <M3Shape :shape="story.shape" class="size-20 bg-surface/60">
+          <component :is="story.icon" class="size-10" />
+        </M3Shape>
+        <h2 class="type-headline-small m-0">{{ t(`gallery.featured.${story.id}.title`) }}</h2>
+        <p class="type-body-large m-0 opacity-80">{{ t(`gallery.featured.${story.id}.text`) }}</p>
+      </section>
+
+      <p class="type-body-large m-0 px-6 pt-6 text-on-surface">
+        {{ t(`gallery.featured.${story.id}.body`) }}
+      </p>
+
+      <SectionHeader :title="t('gallery.featured.glance')" />
+      <M3List variant="segmented" inset :label="t('gallery.featured.glance')">
+        <M3ListItem
+          v-for="fact in story.facts"
+          :key="fact.id"
+          :headline="t(`gallery.featured.${story.id}.facts.${fact.id}`)"
+          :trailing-text="number.format(fact.value)"
+        >
+          <template #leading><component :is="fact.icon" /></template>
+        </M3ListItem>
+      </M3List>
+
+      <p class="type-body-small m-0 px-8 pt-4 text-on-surface-variant">
+        {{ t("gallery.featured.note") }}
+      </p>
+    </template>
+
+    <EmptyState
+      v-else
+      shape="ghostish"
+      :headline="t('errors.notFoundTitle')"
+      :text="t('errors.notFound')"
+    />
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import { findStory } from "@/modules/gallery/composables/featuredStories";
+import { TONE_CLASSES } from "@/shared/utils/tone";
+
+const props = defineProps<{ f7route: Router.Route; f7router: Router.Router }>();
+const { t, locale } = useI18n();
+
+const story = computed(() => findStory(String(props.f7route.params.id ?? "")));
+const number = computed(() => new Intl.NumberFormat(locale.value));
+</script>

package/templates/m3e-app/src/modules/gallery/views/GalleryLoginView.vue

@@ -0,0 +1,135 @@
+<template>
+  <AppPage :title="t('gallery.login.title')" back variant="small">
+    <form
+      class="mx-auto flex w-full max-w-md flex-col gap-5 px-6 pt-6"
+      novalidate
+      @submit.prevent="signIn"
+    >
+      <div class="flex flex-col items-center gap-4 pb-2 text-center">
+        <M3Shape
+          shape="cookie12Sided"
+          class="size-24 bg-primary-container text-on-primary-container"
+        >
+          <i-ms-storefront-outline-rounded class="size-10" />
+        </M3Shape>
+        <h2 class="type-headline-small-emphasized m-0 text-on-surface">
+          {{ t("gallery.login.heading") }}
+        </h2>
+        <p class="type-body-medium m-0 text-on-surface-variant">
+          {{ t("gallery.login.subtitle") }}
+        </p>
+      </div>
+
+      <M3TextField
+        v-model="account.email"
+        :label="t('gallery.login.email')"
+        :error="emailError"
+        :supporting="restored ? t('gallery.login.restored') : undefined"
+        type="email"
+        inputmode="email"
+        autocomplete="username"
+        autocapitalize="off"
+        spellcheck="false"
+        enterkeyhint="next"
+        :disabled="busy"
+        @blur="touched.email = true"
+      >
+        <template #leading><i-ms-mail-outline-rounded /></template>
+      </M3TextField>
+
+      <M3TextField
+        v-model="password"
+        :label="t('gallery.login.password')"
+        :error="passwordError"
+        :type="reveal ? 'text' : 'password'"
+        autocomplete="current-password"
+        enterkeyhint="go"
+        :disabled="busy"
+        @blur="touched.password = true"
+      >
+        <template #leading><i-ms-lock-outline-rounded /></template>
+        <template #trailing>
+          <M3IconButton
+            toggle
+            :selected="reveal"
+            :label="reveal ? t('gallery.login.hide') : t('gallery.login.show')"
+            @update:selected="reveal = $event"
+          >
+            <i-ms-visibility-off-outline-rounded v-if="reveal" />
+            <i-ms-visibility-outline-rounded v-else />
+          </M3IconButton>
+        </template>
+      </M3TextField>
+
+      <div class="flex justify-end">
+        <M3Button variant="text" type="button" @click="forgot">{{
+          t("gallery.login.forgot")
+        }}</M3Button>
+      </div>
+
+      <M3Button type="submit" size="m" :disabled="busy">
+        <template v-if="busy" #leading
+          ><M3LoadingIndicator :size="24" :label="t('gallery.login.signingIn')"
+        /></template>
+        {{ busy ? t("gallery.login.signingIn") : t("gallery.login.signIn") }}
+      </M3Button>
+
+      <p class="type-body-small m-0 text-center text-on-surface-variant">
+        {{ t("gallery.login.hint") }}
+      </p>
+    </form>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import { useFormDraft } from "@cavulsqa/m3e-vue";
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const props = defineProps<{ f7router: Router.Router }>();
+const { t } = useI18n();
+const snackbar = useSnackbar();
+
+const account = reactive({ email: "" });
+const password = ref("");
+const reveal = ref(false);
+const busy = ref(false);
+const rejected = ref(false);
+const touched = reactive({ email: false, password: false });
+const { restored, clear } = useFormDraft("gallery.login", account);
+
+const emailError = computed(() =>
+  touched.email && !EMAIL.test(account.email.trim()) ? t("gallery.login.emailInvalid") : undefined,
+);
+const passwordError = computed(() => {
+  if (rejected.value) return t("gallery.login.rejected");
+  return touched.password && !password.value ? t("gallery.login.passwordMissing") : undefined;
+});
+
+watch(password, () => (rejected.value = false));
+
+async function signIn() {
+  touched.email = true;
+  touched.password = true;
+  if (emailError.value || !password.value || busy.value) return;
+  busy.value = true;
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 900));
+    if (password.value !== "demo") {
+      rejected.value = true;
+      return;
+    }
+    await clear();
+    password.value = "";
+    void snackbar.show(t("gallery.login.welcome", { email: account.email.trim() }));
+    props.f7router.back();
+  } finally {
+    busy.value = false;
+  }
+}
+
+function forgot() {
+  void snackbar.show(t("gallery.login.forgotSent"));
+}
+</script>

package/templates/m3e-app/src/modules/gallery/views/GalleryOnboardingView.vue

@@ -0,0 +1,116 @@
+<template>
+  <AppPage :title="t('gallery.onboarding.title')" back variant="small" class="gallery-onboarding">
+    <M3Pager
+      v-model:page="page"
+      :label="t('gallery.onboarding.title')"
+      class="gallery-onboarding__pager"
+    >
+      <M3PagerPage
+        v-for="slide in SLIDES"
+        :key="slide.id"
+        :label="t(`gallery.onboarding.pages.${slide.id}.title`)"
+      >
+        <div class="flex h-full flex-col items-center justify-center gap-6 px-8 text-center">
+          <M3Shape :shape="slide.shape" class="size-48" :class="slide.tone">
+            <component :is="slide.icon" class="size-20" />
+          </M3Shape>
+          <h2 class="type-headline-medium-emphasized m-0 text-on-surface">
+            {{ t(`gallery.onboarding.pages.${slide.id}.title`) }}
+          </h2>
+          <p class="type-body-large m-0 max-w-80 text-on-surface-variant">
+            {{ t(`gallery.onboarding.pages.${slide.id}.text`) }}
+          </p>
+        </div>
+      </M3PagerPage>
+
+      <template #footer="{ page: current, count, progress, go, next }">
+        <div class="flex items-center justify-between gap-2 px-4 pb-6 pt-2">
+          <M3Button
+            variant="text"
+            :class="{ invisible: current === count - 1 }"
+            @click="go(count - 1)"
+          >
+            {{ t("gallery.onboarding.skip") }}
+          </M3Button>
+          <M3PageIndicator
+            :count="count"
+            :progress="progress"
+            :label="t('gallery.onboarding.title')"
+            :page-label="pageLabel"
+            @select="go"
+          />
+          <M3Button v-if="current < count - 1" @click="next">
+            {{ t("gallery.onboarding.next") }}
+          </M3Button>
+          <M3Button v-else @click="finish">{{ t("gallery.onboarding.start") }}</M3Button>
+        </div>
+      </template>
+    </M3Pager>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type { MaterialShapeName } from "@cavulsqa/m3e";
+import type { Router } from "framework7/types";
+import { markRaw, type Component } from "vue";
+import OfflineIcon from "~icons/material-symbols/cloud-off-outline-rounded";
+import RouteIcon from "~icons/material-symbols/route-outline-rounded";
+import ReceiptIcon from "~icons/material-symbols/receipt-long-outline-rounded";
+
+interface Slide {
+  id: string;
+  shape: MaterialShapeName;
+  tone: string;
+  icon: Component;
+}
+
+const SLIDES: readonly Slide[] = [
+  {
+    id: "route",
+    shape: "cookie9Sided",
+    tone: "bg-primary-container text-on-primary-container",
+    icon: markRaw(RouteIcon),
+  },
+  {
+    id: "orders",
+    shape: "sunny",
+    tone: "bg-tertiary-container text-on-tertiary-container",
+    icon: markRaw(ReceiptIcon),
+  },
+  {
+    id: "offline",
+    shape: "clover4Leaf",
+    tone: "bg-secondary-container text-on-secondary-container",
+    icon: markRaw(OfflineIcon),
+  },
+];
+
+const props = defineProps<{ f7router: Router.Router }>();
+const { t } = useI18n();
+const page = ref(0);
+
+function pageLabel(n: number) {
+  return t("gallery.onboarding.page", { n });
+}
+
+function finish() {
+  props.f7router.back();
+}
+</script>
+
+<style scoped>
+:global(.gallery-onboarding .page-content) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.gallery-onboarding__pager {
+  flex: 1;
+  min-height: 0;
+}
+
+.gallery-onboarding__pager :deep(.m3-pager__track) {
+  flex: 1;
+}
+</style>

package/templates/m3e-app/src/modules/gallery/views/GallerySectionView.vue

@@ -0,0 +1,27 @@
+<template>
+  <AppPage :title="entry ? t(entry.titleKey) : t('errors.notFoundTitle')" variant="medium" back>
+    <Suspense v-if="entry">
+      <component :is="entry.component" />
+      <template #fallback>
+        <div class="grid place-items-center py-16">
+          <M3LoadingIndicator :label="t('gallery.loading')" />
+        </div>
+      </template>
+    </Suspense>
+    <EmptyState
+      v-else
+      shape="ghostish"
+      :headline="t('errors.notFoundTitle')"
+      :text="t('errors.notFound')"
+    />
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import { findSection } from "@/modules/gallery/composables/useGallerySections";
+
+const props = defineProps<{ f7route: Router.Route }>();
+const { t } = useI18n();
+const entry = computed(() => findSection(String(props.f7route.params.section ?? "")));
+</script>

package/templates/m3e-app/src/modules/gallery/views/GalleryTabsView.vue

@@ -0,0 +1,135 @@
+<template>
+  <AppPage :title="t('gallery.tabs.title')" back variant="small">
+    <template #bottom>
+      <M3Tabs v-model="tab" :pager="pager" :label="t('gallery.tabs.title')">
+        <M3Tab v-for="item in TABS" :key="item" :value="item" :label="t(`gallery.tabs.${item}`)" />
+      </M3Tabs>
+    </template>
+
+    <M3TabPanels v-model="tab" :pager="pager" class="gallery-tabs__panels">
+      <M3TabPanel value="orders" :label="t('gallery.tabs.orders')">
+        <p class="type-body-medium m-0 px-6 py-3 text-on-surface-variant">
+          {{ t("gallery.tabs.ordersNote") }}
+        </p>
+        <M3List variant="segmented" inset>
+          <M3ListItem
+            v-for="row in 18"
+            :key="row"
+            :headline="t('gallery.tabs.order', { n: 1000 + row })"
+            :supporting="t('gallery.tabs.orderLines', { count: (row % 5) + 1 }, (row % 5) + 1)"
+          >
+            <template #leading><i-ms-receipt-long-outline-rounded /></template>
+            <template #swipe-end>
+              <M3SwipeAction :label="t('gallery.tabs.archive')" tone="secondary">
+                <i-ms-archive-outline-rounded />
+              </M3SwipeAction>
+            </template>
+          </M3ListItem>
+        </M3List>
+      </M3TabPanel>
+
+      <M3TabPanel value="invoices" :label="t('gallery.tabs.invoices')">
+        <M3List variant="segmented" inset class="py-3">
+          <M3ListItem
+            v-for="row in 24"
+            :key="row"
+            :headline="t('gallery.tabs.invoice', { n: 2000 + row })"
+            :trailing-text="t('gallery.tabs.amount', { value: (row * 3150).toLocaleString() })"
+          >
+            <template #leading><i-ms-request-quote-outline-rounded /></template>
+          </M3ListItem>
+        </M3List>
+      </M3TabPanel>
+
+      <M3TabPanel value="payments" :label="t('gallery.tabs.payments')">
+        <p class="type-body-medium m-0 px-6 py-3 text-on-surface-variant">
+          {{ t("gallery.tabs.paymentsNote") }}
+        </p>
+        <M3Carousel
+          :items="METHODS"
+          :item-key="methodKey"
+          :label="t('gallery.tabs.payments')"
+          :height="160"
+        >
+          <template #default="{ item }">
+            <div
+              class="type-title-medium-emphasized grid size-full place-items-center bg-secondary-container text-on-secondary-container"
+            >
+              {{ t(`gallery.tabs.methods.${item}`) }}
+            </div>
+          </template>
+        </M3Carousel>
+      </M3TabPanel>
+
+      <M3TabPanel value="returns" :label="t('gallery.tabs.returns')">
+        <EmptyState
+          shape="ghostish"
+          :headline="t('gallery.tabs.noReturns')"
+          :text="t('gallery.tabs.noReturnsText')"
+        />
+      </M3TabPanel>
+    </M3TabPanels>
+
+    <template #fab>
+      <M3FabMorph
+        v-model:open="actionsOpen"
+        variant="toolbar"
+        :label="t('gallery.tabs.quickActions')"
+      >
+        <template #icon><i-ms-bolt-outline-rounded /></template>
+        <template #default="{ close }">
+          <M3IconButton
+            v-for="action in ACTIONS"
+            :key="action.id"
+            :label="t(`gallery.tabs.actions.${action.id}`)"
+            @click="run(action.id, close)"
+          >
+            <component :is="action.icon" />
+          </M3IconButton>
+        </template>
+      </M3FabMorph>
+    </template>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import { createTabPager } from "@cavulsqa/m3e-vue";
+import { markRaw } from "vue";
+import AddIcon from "~icons/material-symbols/add-shopping-cart-rounded";
+import CallIcon from "~icons/material-symbols/call-outline-rounded";
+import CloseIcon from "~icons/material-symbols/close-rounded";
+import MapIcon from "~icons/material-symbols/map-outline-rounded";
+import ScanIcon from "~icons/material-symbols/barcode-scanner-rounded";
+
+const TABS = ["orders", "invoices", "payments", "returns"] as const;
+const METHODS = ["cash", "cheque", "transfer", "credit"] as const;
+
+const { t } = useI18n();
+const tab = ref<string>("orders");
+const pager = createTabPager();
+const snackbar = useSnackbar();
+const actionsOpen = ref(false);
+
+const ACTIONS = [
+  { id: "order", icon: markRaw(AddIcon) },
+  { id: "scan", icon: markRaw(ScanIcon) },
+  { id: "call", icon: markRaw(CallIcon) },
+  { id: "map", icon: markRaw(MapIcon) },
+  { id: "close", icon: markRaw(CloseIcon) },
+] as const;
+
+function run(id: (typeof ACTIONS)[number]["id"], close: () => void) {
+  close();
+  if (id !== "close") void snackbar.show(t(`gallery.tabs.actions.${id}`));
+}
+
+function methodKey(method: (typeof METHODS)[number]) {
+  return method;
+}
+</script>
+
+<style scoped>
+.gallery-tabs__panels {
+  height: calc(100dvh - env(safe-area-inset-top) - 112px);
+}
+</style>

package/templates/m3e-app/src/modules/gallery/views/GalleryView.vue

@@ -0,0 +1,50 @@
+<template>
+  <AppPage :title="t('gallery.title')" name="gallery">
+    <p class="type-body-large m-0 px-6 pb-2 text-on-surface-variant">{{ t("gallery.intro") }}</p>
+    <M3List variant="segmented" inset :label="t('gallery.title')">
+      <M3ListItem
+        v-for="entry in entries"
+        :key="entry.id"
+        clickable
+        :headline="t(entry.titleKey)"
+        :supporting="t(entry.subtitleKey)"
+        @click="f7router.navigate(entry.path ?? `/gallery/${entry.id}/`)"
+      >
+        <template #leading>
+          <M3Shape :shape="entry.shape" class="size-10" :class="TONE_CLASSES[entry.tone]">
+            <component :is="entry.icon" class="size-5" />
+          </M3Shape>
+        </template>
+        <template #trailing><i-ms-chevron-right-rounded class="rtl:-scale-x-100" /></template>
+      </M3ListItem>
+    </M3List>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import {
+  AGENDA_SECTION,
+  CHAT_SECTION,
+  CONTACTS_SECTION,
+  LOGIN_SECTION,
+  ONBOARDING_SECTION,
+  TABS_SECTION,
+  sections,
+} from "@/modules/gallery/composables/useGallerySections";
+import { TONE_CLASSES } from "@/shared/utils/tone";
+
+defineProps<{ f7router: Router.Router }>();
+const { t } = useI18n();
+const entries = [
+  ...sections.slice(0, 5),
+  TABS_SECTION,
+  ...sections.slice(5, 9),
+  CONTACTS_SECTION,
+  CHAT_SECTION,
+  ONBOARDING_SECTION,
+  LOGIN_SECTION,
+  AGENDA_SECTION,
+  ...sections.slice(9),
+];
+</script>

package/templates/m3e-app/src/modules/home/components/HomeHero.vue

@@ -0,0 +1,57 @@
+<template>
+  <section
+    class="mx-4 mt-2 grid grid-cols-[1fr_auto] items-center gap-4 rounded-xl bg-primary-container p-6 text-on-primary-container"
+  >
+    <div class="flex min-w-0 flex-col gap-2">
+      <span class="type-label-large text-on-primary-container/80">{{ t("home.overline") }}</span>
+      <h2 class="type-headline-medium-emphasized font-rounded m-0">{{ t("home.headline") }}</h2>
+      <p class="type-body-medium m-0 text-on-primary-container/80">
+        {{ t("home.intro", { app: appName }) }}
+      </p>
+    </div>
+    <button
+      type="button"
+      class="m3-focus-ring grid size-28 place-items-center rounded-full text-primary"
+      :aria-label="t('home.morph')"
+      @click="next"
+    >
+      <M3ShapeMorph :shape="shapes[index]!" :rotate="index * 45" class="size-28">
+        <i-ms-auto-awesome-outline-rounded class="size-10 text-on-primary" />
+      </M3ShapeMorph>
+    </button>
+    <M3ButtonGroup
+      class="col-span-2 mt-2 flex-wrap max-[600px]:[&>.m3-button]:grow"
+      size="m"
+      :label="t('home.actions')"
+    >
+      <M3Button @click="emit('explore')">{{ t("home.explore") }}</M3Button>
+      <M3Button variant="tonal" @click="emit('personalise')">{{ t("home.personalise") }}</M3Button>
+    </M3ButtonGroup>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { MaterialShapeName } from "@cavulsqa/m3e";
+
+/**
+ * The first thing the app shows: what it is in one line, a shape that morphs when touched - the
+ * Expressive idea in one gesture - and the two places worth going next.
+ */
+const emit = defineEmits<{ explore: []; personalise: [] }>();
+const { t } = useI18n();
+const appName = __APP_NAME__;
+
+const shapes: readonly MaterialShapeName[] = [
+  "cookie9Sided",
+  "clover4Leaf",
+  "sunny",
+  "pentagon",
+  "softBurst",
+  "flower",
+];
+const index = ref(0);
+
+function next() {
+  index.value = (index.value + 1) % shapes.length;
+}
+</script>