@cavulsqa/create 2.9.3 → 2.10.0

package/templates/m3e-app/src/modules/gallery/composables/usePhotoScenes.ts

@@ -0,0 +1,82 @@
+import type { PhotoItem } from "@cavulsqa/m3e-vue";
+
+type SceneKind = "mountains" | "coast" | "dunes" | "city" | "forest" | "harbour";
+
+interface Scene {
+  kind: SceneKind;
+  width: number;
+  height: number;
+}
+
+const SCENES: readonly Scene[] = [
+  { kind: "mountains", width: 1600, height: 1200 },
+  { kind: "coast", width: 1200, height: 1600 },
+  { kind: "dunes", width: 2400, height: 1000 },
+  { kind: "city", width: 1600, height: 1200 },
+  { kind: "forest", width: 1200, height: 1600 },
+  { kind: "harbour", width: 1600, height: 1200 },
+];
+
+function token(name: string): string {
+  return getComputedStyle(document.documentElement)
+    .getPropertyValue(`--md-sys-color-${name}`)
+    .trim();
+}
+
+function ridge(width: number, height: number, base: number, peaks: number, seed: number): string {
+  const points = [`0,${height}`];
+  for (let i = 0; i <= peaks; i++) {
+    const x = (i / peaks) * width;
+    const wave = Math.sin(i * 1.7 + seed) * 0.5 + Math.sin(i * 0.6 + seed * 2) * 0.5;
+    points.push(`${x.toFixed(0)},${(height * base - wave * height * 0.12).toFixed(0)}`);
+  }
+  points.push(`${width},${height}`);
+  return points.join(" ");
+}
+
+function scene({ kind, width, height }: Scene): string {
+  const sky = token("primary-container");
+  const glow = token("tertiary-container");
+  const sun = token("tertiary");
+  const far = token("secondary");
+  const near = token("primary");
+  const deep = token("on-primary-container");
+  const seed = kind.length;
+  const shapes: Record<SceneKind, string> = {
+    mountains: `<polygon points="${ridge(width, height, 0.55, 7, seed)}" fill="${far}" opacity=".7"/><polygon points="${ridge(width, height, 0.72, 5, seed + 2)}" fill="${near}"/>`,
+    coast: `<rect y="${height * 0.6}" width="${width}" height="${height * 0.4}" fill="${far}"/><polygon points="${ridge(width, height, 0.78, 3, seed)}" fill="${near}"/>`,
+    dunes: `<polygon points="${ridge(width, height, 0.62, 4, seed)}" fill="${glow}"/><polygon points="${ridge(width, height, 0.78, 3, seed + 1)}" fill="${sun}" opacity=".8"/>`,
+    city: Array.from({ length: 14 }, (_, i) => {
+      const w = width / 14;
+      const h = height * (0.25 + ((i * 37) % 9) / 22);
+      return `<rect x="${i * w + 4}" y="${height - h}" width="${w - 8}" height="${h}" fill="${i % 2 ? near : far}"/>`;
+    }).join(""),
+    forest: Array.from({ length: 9 }, (_, i) => {
+      const x = (i + 0.5) * (width / 9);
+      const top = height * (0.45 + ((i * 13) % 5) / 20);
+      return `<polygon points="${x},${top} ${x - 90},${height} ${x + 90},${height}" fill="${i % 2 ? near : far}"/>`;
+    }).join(""),
+    harbour: `<rect y="${height * 0.65}" width="${width}" height="${height * 0.35}" fill="${far}"/><polygon points="${width * 0.42},${height * 0.62} ${width * 0.58},${height * 0.62} ${width * 0.55},${height * 0.68} ${width * 0.45},${height * 0.68}" fill="${deep}"/><polygon points="${width * 0.5},${height * 0.3} ${width * 0.5},${height * 0.6} ${width * 0.6},${height * 0.6}" fill="${glow}"/>`,
+  };
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><defs><linearGradient id="s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${sky}"/><stop offset="1" stop-color="${glow}"/></linearGradient></defs><rect width="${width}" height="${height}" fill="url(#s)"/><circle cx="${width * 0.72}" cy="${height * 0.28}" r="${Math.min(width, height) * 0.09}" fill="${sun}"/>${shapes[kind]}</svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+
+/**
+ * Demo photos drawn from the live theme, so the gallery needs no network and no bundled images:
+ * vector scenes at photo sizes - landscape, portrait and panorama - that stay sharp when zoomed.
+ */
+export function usePhotoScenes(label: (kind: SceneKind) => string) {
+  const photos = shallowRef<PhotoItem[]>([]);
+  const build = () => {
+    photos.value = SCENES.map((item) => ({
+      src: scene(item),
+      alt: label(item.kind),
+      caption: label(item.kind),
+      width: item.width,
+      height: item.height,
+    }));
+  };
+  onMounted(build);
+  return { photos, rebuild: build };
+}

package/templates/m3e-app/src/modules/gallery/composables/useTreeDemo.ts

@@ -0,0 +1,67 @@
+import type { TreeNode } from "@cavulsqa/m3e-vue";
+
+/** A catalogue and a permission set to show the treeview with, labelled in the current language. */
+export function useTreeDemo() {
+  const { t } = useI18n();
+  const label = (key: string) => t(`gallery.tree.nodes.${key}`);
+
+  const categories = computed<TreeNode[]>(() => [
+    {
+      id: "drinks",
+      label: label("drinks"),
+      supporting: t("gallery.tree.products", { count: 42 }),
+      children: [
+        { id: "water", label: label("water") },
+        {
+          id: "juice",
+          label: label("juice"),
+          children: [
+            { id: "orange", label: label("orange") },
+            { id: "apple", label: label("apple") },
+          ],
+        },
+        { id: "soda", label: label("soda") },
+      ],
+    },
+    { id: "dairy", label: label("dairy"), supporting: t("gallery.tree.loadsLater"), lazy: true },
+    {
+      id: "grocery",
+      label: label("grocery"),
+      children: [
+        { id: "pasta", label: label("pasta") },
+        { id: "oil", label: label("oil") },
+      ],
+    },
+  ]);
+
+  const permissions = computed<TreeNode[]>(() => [
+    {
+      id: "sales",
+      label: label("sales"),
+      children: [
+        { id: "sales.read", label: label("read") },
+        { id: "sales.create", label: label("create") },
+        { id: "sales.cancel", label: label("cancel") },
+      ],
+    },
+    {
+      id: "stock",
+      label: label("stock"),
+      children: [
+        { id: "stock.read", label: label("read") },
+        { id: "stock.adjust", label: label("adjust") },
+      ],
+    },
+  ]);
+
+  async function loadChildren(): Promise<TreeNode[]> {
+    await new Promise((resolve) => setTimeout(resolve, 900));
+    return [
+      { id: "milk", label: label("milk") },
+      { id: "yoghurt", label: label("yoghurt") },
+      { id: "cheese", label: label("cheese") },
+    ];
+  }
+
+  return { categories, permissions, loadChildren };
+}

package/templates/m3e-app/src/modules/gallery/composables/wilayas.ts

@@ -0,0 +1,67 @@
+/** Algeria's 58 wilayas in code order - a realistic list for the autocomplete demo. */
+export const WILAYAS = [
+  "Adrar",
+  "Chlef",
+  "Laghouat",
+  "Oum El Bouaghi",
+  "Batna",
+  "Béjaïa",
+  "Biskra",
+  "Béchar",
+  "Blida",
+  "Bouira",
+  "Tamanrasset",
+  "Tébessa",
+  "Tlemcen",
+  "Tiaret",
+  "Tizi Ouzou",
+  "Alger",
+  "Djelfa",
+  "Jijel",
+  "Sétif",
+  "Saïda",
+  "Skikda",
+  "Sidi Bel Abbès",
+  "Annaba",
+  "Guelma",
+  "Constantine",
+  "Médéa",
+  "Mostaganem",
+  "M'Sila",
+  "Mascara",
+  "Ouargla",
+  "Oran",
+  "El Bayadh",
+  "Illizi",
+  "Bordj Bou Arréridj",
+  "Boumerdès",
+  "El Tarf",
+  "Tindouf",
+  "Tissemsilt",
+  "El Oued",
+  "Khenchela",
+  "Souk Ahras",
+  "Tipaza",
+  "Mila",
+  "Aïn Defla",
+  "Naâma",
+  "Aïn Témouchent",
+  "Ghardaïa",
+  "Relizane",
+  "Timimoun",
+  "Bordj Badji Mokhtar",
+  "Ouled Djellal",
+  "Béni Abbès",
+  "In Salah",
+  "In Guezzam",
+  "Touggourt",
+  "Djanet",
+  "El M'Ghair",
+  "El Meniaa",
+] as const;
+
+export const WILAYA_OPTIONS = WILAYAS.map((label, index) => ({
+  value: index + 1,
+  label,
+  supporting: String(index + 1).padStart(2, "0"),
+}));

package/templates/m3e-app/src/modules/gallery/router/routes/gallery.routes.ts

@@ -0,0 +1,52 @@
+import type { Router } from "framework7/types";
+import { lazyRoute } from "@/shared/utils/lazyRoute";
+
+const galleryRoutes: Router.RouteParameters[] = [
+  {
+    name: "gallery",
+    path: "/gallery/",
+    async: lazyRoute(() => import("@/modules/gallery/views/GalleryView.vue")),
+  },
+  {
+    name: "gallery-tabs",
+    path: "/gallery/tabs/",
+    async: lazyRoute(() => import("@/modules/gallery/views/GalleryTabsView.vue")),
+  },
+  {
+    name: "gallery-contacts",
+    path: "/gallery/contacts/",
+    async: lazyRoute(() => import("@/modules/gallery/views/GalleryContactsView.vue")),
+  },
+  {
+    name: "gallery-chat",
+    path: "/gallery/chat/",
+    async: lazyRoute(() => import("@/modules/gallery/views/GalleryChatView.vue")),
+  },
+  {
+    name: "gallery-onboarding",
+    path: "/gallery/onboarding/",
+    async: lazyRoute(() => import("@/modules/gallery/views/GalleryOnboardingView.vue")),
+  },
+  {
+    name: "gallery-login",
+    path: "/gallery/login/",
+    async: lazyRoute(() => import("@/modules/gallery/views/GalleryLoginView.vue")),
+  },
+  {
+    name: "gallery-agenda",
+    path: "/gallery/agenda/",
+    async: lazyRoute(() => import("@/modules/gallery/views/GalleryAgendaView.vue")),
+  },
+  {
+    name: "gallery-featured",
+    path: "/gallery/featured/:id/",
+    async: lazyRoute(() => import("@/modules/gallery/views/GalleryFeaturedView.vue")),
+  },
+  {
+    name: "gallery-section",
+    path: "/gallery/:section/",
+    async: lazyRoute(() => import("@/modules/gallery/views/GallerySectionView.vue")),
+  },
+];
+
+export default galleryRoutes;

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

@@ -0,0 +1,117 @@
+<template>
+  <AppPage :title="t('gallery.agenda.title')" :subtitle="month" back variant="small">
+    <template #actions>
+      <M3IconButton
+        :label="t('gallery.agenda.today')"
+        :disabled="day === today"
+        @click="day = today"
+      >
+        <i-ms-today-outline-rounded />
+      </M3IconButton>
+    </template>
+    <template #bottom>
+      <div>
+        <M3ButtonGroup
+          variant="connected"
+          size="s"
+          class="agenda-switcher px-4 pb-2"
+          :label="t('gallery.agenda.view')"
+        >
+          <M3Button
+            v-for="option in AGENDA_VIEWS"
+            :key="option"
+            variant="tonal"
+            toggle
+            :selected="view === option"
+            @update:selected="view = option"
+          >
+            {{ t(`gallery.agenda.views.${option}`) }}
+          </M3Button>
+        </M3ButtonGroup>
+        <M3WeekStrip
+          v-if="view !== 'month'"
+          v-model="day"
+          class="pb-2"
+          :label="t('gallery.agenda.days')"
+          :locale="locale"
+          :marks="weekMarks"
+          :mark-label="visitsLabel"
+        />
+      </div>
+    </template>
+
+    <Transition name="agenda-through" mode="out-in" @enter="rewind">
+      <AgendaDay
+        v-if="view === 'day'"
+        key="day"
+        :day="day"
+        :today="today"
+        :heading="heading"
+        :visits="visits"
+        @step="day = addDays(day, $event)"
+      />
+      <AgendaMonth
+        v-else-if="view === 'month'"
+        key="month"
+        v-model="day"
+        :heading="heading"
+        :visits="visits"
+        :marks="monthMarks"
+        :mark-label="visitsLabel"
+        @month="shownMonth = $event"
+      />
+      <AgendaVisitList v-else key="week" :heading="heading" :visits="visits" />
+    </Transition>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import { addDays } from "@cavulsqa/m3e-vue";
+import AgendaDay from "@/modules/gallery/components/agenda/AgendaDay.vue";
+import AgendaMonth from "@/modules/gallery/components/agenda/AgendaMonth.vue";
+import AgendaVisitList from "@/modules/gallery/components/agenda/AgendaVisitList.vue";
+import { AGENDA_VIEWS, useAgenda } from "@/modules/gallery/composables/useAgenda";
+
+const { t, locale } = useI18n();
+const { today, day, view, visits, weekMarks, monthMarks, shownMonth, month, heading, visitsLabel } =
+  useAgenda();
+
+function rewind(element: Element) {
+  element.closest(".page-content")?.scrollTo({ top: 0 });
+}
+</script>
+
+<style scoped>
+.agenda-switcher {
+  display: flex;
+}
+
+.agenda-switcher > :deep(*) {
+  flex: 1 1 0;
+}
+
+.agenda-through-leave-active {
+  transition: opacity 90ms var(--md-sys-motion-easing-emphasized-accelerate);
+}
+
+.agenda-through-enter-active {
+  transition:
+    opacity 210ms var(--md-sys-motion-easing-emphasized-decelerate),
+    transform 210ms var(--md-sys-motion-easing-emphasized-decelerate);
+}
+
+.agenda-through-leave-to,
+.agenda-through-enter-from {
+  opacity: 0;
+}
+
+.agenda-through-enter-from {
+  transform: scale(0.96);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agenda-through-enter-from {
+    transform: none;
+  }
+}
+</style>

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

@@ -0,0 +1,292 @@
+<template>
+  <AppPage
+    :title="t('gallery.chat.title')"
+    :subtitle="t('gallery.chat.subtitle')"
+    back
+    variant="small"
+    class="gallery-chat"
+  >
+    <M3Messages
+      :messages="messages"
+      :label="t('gallery.chat.title')"
+      :locale="locale"
+      :typing="typing"
+      :you-label="t('gallery.chat.you')"
+      :retry-label="t('gallery.chat.retry')"
+      :latest-label="t('gallery.chat.latest')"
+      :status-labels="statusLabels"
+      :typing-label="typingLabel"
+      :unread-label="unreadLabel"
+      authors
+      :reactions="REACTIONS"
+      :actions="actions"
+      :react-label="t('gallery.chat.react')"
+      :menu-label="t('gallery.chat.messageActions')"
+      :reactions-label="reactionsLabel"
+      :reactions-title="t('gallery.chat.reactionsTitle')"
+      :all-reactions-label="t('gallery.chat.allReactions')"
+      :remove-reaction-label="t('gallery.chat.removeReaction')"
+      :others-label="othersLabel"
+      :card-labels="cardLabels"
+      @react="react"
+      @action="onAction"
+      @press="openMessage"
+      @retry="retry"
+      @vote="vote"
+      @rsvp="rsvp"
+    >
+      <template #before>
+        <M3InfiniteScroll
+          edge="start"
+          :load="loadOlder"
+          :loading-label="t('gallery.chat.loadingOlder')"
+          :error-text="t('gallery.chat.loadFailed')"
+          :retry-label="t('gallery.chat.retry')"
+          :end-text="t('gallery.chat.start')"
+        />
+      </template>
+    </M3Messages>
+
+    <template #fixed>
+      <M3MessageBar
+        v-model="draft"
+        :label="t('gallery.chat.compose')"
+        :send-label="t('gallery.chat.send')"
+        @send="send"
+      >
+        <template #leading>
+          <M3IconButton
+            :label="t('gallery.chat.attach')"
+            :aria-expanded="attachOpen"
+            @click="attachOpen = !attachOpen"
+          >
+            <i-ms-add-rounded class="chat-plus" :class="{ 'chat-plus--open': attachOpen }" />
+          </M3IconButton>
+        </template>
+        <template #trailing>
+          <M3IconButton :label="t('gallery.chat.thumbsUp')" @click="draft += '👍'">
+            <i-ms-add-reaction-outline-rounded />
+          </M3IconButton>
+        </template>
+      </M3MessageBar>
+
+      <ChatAttachSheet
+        v-model:open="attachOpen"
+        :photos="photos"
+        @image="sendImage"
+        @text="send"
+        @recent="sendPhoto"
+        @failed="onFailed"
+        @compose="compose"
+      />
+      <ChatPollComposer v-model:open="pollOpen" @send="sendPoll" />
+      <ChatInviteComposer v-model:open="inviteOpen" @send="sendInvite" />
+      <ChatContactPicker
+        v-model:open="contactOpen"
+        :customers="customers"
+        :loading="customersLoading"
+        :failed="customersFailed"
+        @pick="sendContact"
+      />
+
+      <M3PhotoBrowser
+        v-model:open="browserOpen"
+        v-model:index="photoIndex"
+        :photos="shared"
+        :label="t('gallery.chat.photos')"
+        :close-label="t('shell.dismiss')"
+      />
+    </template>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type {
+  ChatMessage,
+  MessageAction,
+  MessageCardLabels,
+  MessageReaction,
+  MessageStatus,
+  PhotoItem,
+} from "@cavulsqa/m3e-vue";
+import type { Router } from "framework7/types";
+import { markRaw } from "vue";
+import CopyIcon from "~icons/material-symbols/content-copy-outline-rounded";
+import DeleteIcon from "~icons/material-symbols/delete-outline-rounded";
+import ChatAttachSheet from "@/modules/gallery/components/chat/ChatAttachSheet.vue";
+import ChatContactPicker from "@/modules/gallery/components/chat/ChatContactPicker.vue";
+import ChatInviteComposer from "@/modules/gallery/components/chat/ChatInviteComposer.vue";
+import ChatPollComposer from "@/modules/gallery/components/chat/ChatPollComposer.vue";
+import type { ComposeKind } from "@/modules/gallery/composables/composeKind";
+import { mapsLink } from "@/modules/gallery/composables/currentPosition";
+import { openExternal } from "@/modules/gallery/composables/openExternal";
+import { useChatCustomers } from "@/modules/gallery/composables/useChatCustomers";
+import { useChatDemo } from "@/modules/gallery/composables/useChatDemo";
+import { useLocationShare } from "@/modules/gallery/composables/useLocationShare";
+import { usePhotoScenes } from "@/modules/gallery/composables/usePhotoScenes";
+
+const props = defineProps<{ f7router: Router.Router }>();
+const { t, locale } = useI18n();
+const snackbar = useSnackbar();
+const { photos } = usePhotoScenes((kind) => t(`gallery.carousels.scenes.${kind}`));
+const REACTIONS = ["👍", "❤️", "😂", "😮", "😢", "🙏", "🔥"] as const;
+
+const {
+  messages,
+  typing,
+  draft,
+  send,
+  sendPhoto,
+  sendImage,
+  sendLocation,
+  sendContact,
+  sendPoll,
+  sendInvite,
+  vote,
+  rsvp,
+  react,
+  retry,
+  remove,
+  loadOlder,
+} = useChatDemo((index) => {
+  const photo = photos.value[index % Math.max(1, photos.value.length)];
+  if (!photo?.width || !photo.height) return null;
+  return { src: photo.src, width: photo.width, height: photo.height, alt: photo.alt };
+});
+
+const browserOpen = ref(false);
+const attachOpen = ref(false);
+const pollOpen = ref(false);
+const inviteOpen = ref(false);
+const contactOpen = ref(false);
+
+const {
+  customers,
+  loading: customersLoading,
+  failed: customersFailed,
+} = useChatCustomers(contactOpen);
+const { share: shareLocation } = useLocationShare(sendLocation);
+
+const cardLabels = computed<MessageCardLabels>(() => ({
+  openLocation: t("gallery.chat.cards.openLocation"),
+  openContact: t("gallery.chat.cards.openContact"),
+  pollSingle: t("gallery.chat.cards.pollSingle"),
+  pollMultiple: t("gallery.chat.cards.pollMultiple"),
+  votes: (count: number) => t("gallery.chat.cards.votes", { count }, count),
+  going: t("gallery.chat.cards.going"),
+  maybe: t("gallery.chat.cards.maybe"),
+  no: t("gallery.chat.cards.no"),
+}));
+
+const actions = computed<MessageAction[]>(() => [
+  {
+    id: "copy",
+    label: t("gallery.chat.copy"),
+    icon: markRaw(CopyIcon),
+    when: (message) => Boolean(message.text),
+  },
+  {
+    id: "delete",
+    label: t("gallery.chat.delete"),
+    icon: markRaw(DeleteIcon),
+    tone: "destructive",
+  },
+]);
+const photoIndex = ref(0);
+
+const statusLabels = computed<Record<MessageStatus, string>>(() => ({
+  sending: t("gallery.chat.status.sending"),
+  sent: t("gallery.chat.status.sent"),
+  delivered: t("gallery.chat.status.delivered"),
+  read: t("gallery.chat.status.read"),
+  failed: t("gallery.chat.status.failed"),
+}));
+
+const shared = computed<PhotoItem[]>(() =>
+  messages.value.flatMap((message) =>
+    message.image
+      ? [{ ...message.image, alt: message.image.alt ?? "", caption: message.text }]
+      : [],
+  ),
+);
+
+function typingLabel(author: string | undefined) {
+  return t("gallery.chat.typing", { name: author ?? "" });
+}
+
+function unreadLabel(count: number) {
+  return t("gallery.chat.unread", { count }, count);
+}
+
+function compose(kind: ComposeKind) {
+  if (kind === "location") void shareLocation();
+  else if (kind === "contact") contactOpen.value = true;
+  else if (kind === "poll") pollOpen.value = true;
+  else inviteOpen.value = true;
+}
+
+function openMessage(message: ChatMessage) {
+  if (message.location) openExternal(mapsLink(message.location.lat, message.location.lng));
+  else if (message.contact)
+    props.f7router.navigate(`/demo/search/?q=${encodeURIComponent(message.contact.name)}`);
+  else if (message.image) openPhoto(message);
+}
+
+function openPhoto(message: ChatMessage) {
+  const index = shared.value.findIndex((photo) => photo.src === message.image?.src);
+  photoIndex.value = Math.max(0, index);
+  browserOpen.value = true;
+}
+
+function reactionsLabel(reactions: readonly MessageReaction[]) {
+  return reactions
+    .map((reaction) =>
+      t(
+        "gallery.chat.reactionCount",
+        { emoji: reaction.emoji, count: reaction.count ?? 1 },
+        reaction.count ?? 1,
+      ),
+    )
+    .join(", ");
+}
+
+function othersLabel(count: number) {
+  return t("gallery.chat.othersReacted", { count }, count);
+}
+
+function onFailed(name: string) {
+  void snackbar.show({ message: t("gallery.chat.attachFailed", { name }) });
+}
+
+async function onAction(message: ChatMessage, id: string) {
+  if (id === "delete") {
+    remove(message);
+    return;
+  }
+  if (id !== "copy" || !message.text) return;
+  try {
+    await navigator.clipboard.writeText(message.text);
+    void snackbar.show({ message: t("gallery.chat.copied") });
+  } catch {
+    void snackbar.show({ message: t("gallery.chat.copyFailed") });
+  }
+}
+</script>
+
+<style scoped>
+.chat-plus {
+  transition: rotate var(--md-sys-motion-spring-fast-spatial-duration)
+    var(--md-sys-motion-spring-fast-spatial);
+}
+
+.chat-plus--open {
+  rotate: 45deg;
+}
+
+:global(.gallery-chat .page-content) {
+  --m3-messages-min-height: calc(100% - 64px - env(safe-area-inset-top));
+
+  padding-bottom: 0;
+  scroll-padding-bottom: var(--m3-message-bar-height, 0px);
+}
+</style>