@cavulsqa/create 2.9.3 → 2.10.0

package/templates/m3e-app/src/modules/gallery/components/chat/ChatAttachSheet.vue

@@ -0,0 +1,106 @@
+<template>
+  <M3AttachSheet
+    v-model:open="open"
+    :options="options"
+    :label="t('gallery.chat.attachTitle')"
+    :title="t('gallery.chat.attachTitle')"
+    @select="choose"
+  >
+    <template #recent>
+      <ChatRecentPhotos
+        v-if="photos.length"
+        :photos="photos"
+        :label="t('gallery.chat.recent')"
+        :send-label="(alt) => t('gallery.chat.sendPhoto', { name: alt })"
+        @pick="pickRecent"
+      />
+    </template>
+  </M3AttachSheet>
+  <input ref="gallery" type="file" accept="image/*" multiple hidden @change="receive" />
+  <input ref="camera" type="file" accept="image/*" capture="environment" hidden @change="receive" />
+  <input ref="file" type="file" hidden @change="receive" />
+</template>
+
+<script setup lang="ts">
+import type { AttachOption, MessageImage, PhotoItem } from "@cavulsqa/m3e-vue";
+import { markRaw } from "vue";
+import BallotIcon from "~icons/material-symbols/ballot-outline-rounded";
+import CameraIcon from "~icons/material-symbols/photo-camera-outline-rounded";
+import ContactIcon from "~icons/material-symbols/person-outline-rounded";
+import EventIcon from "~icons/material-symbols/event-outline-rounded";
+import FileIcon from "~icons/material-symbols/description-outline-rounded";
+import GalleryIcon from "~icons/material-symbols/photo-library-outline-rounded";
+import LocationIcon from "~icons/material-symbols/location-on-outline-rounded";
+import ChatRecentPhotos from "@/modules/gallery/components/chat/ChatRecentPhotos.vue";
+import type { ComposeKind } from "@/modules/gallery/composables/composeKind";
+import { useLocalAttachments } from "@/modules/gallery/composables/useLocalAttachments";
+
+defineProps<{ photos: readonly PhotoItem[] }>();
+
+const open = defineModel<boolean>("open", { default: false });
+const emit = defineEmits<{
+  image: [image: MessageImage];
+  text: [text: string];
+  recent: [index: number];
+  failed: [name: string];
+  compose: [kind: ComposeKind];
+}>();
+
+const { t, locale } = useI18n();
+const { toImage, describe } = useLocalAttachments();
+const pickers = {
+  gallery: useTemplateRef<HTMLInputElement>("gallery"),
+  camera: useTemplateRef<HTMLInputElement>("camera"),
+  file: useTemplateRef<HTMLInputElement>("file"),
+};
+
+const OPTIONS = [
+  { id: "gallery", icon: GalleryIcon, tone: "primary", shape: "cookie9Sided" },
+  { id: "camera", icon: CameraIcon, tone: "tertiary", shape: "clover4Leaf" },
+  { id: "file", icon: FileIcon, tone: "secondary", shape: "gem" },
+  { id: "location", icon: LocationIcon, tone: "primary", shape: "softBurst" },
+  { id: "contact", icon: ContactIcon, tone: "secondary", shape: "puffy" },
+  { id: "poll", icon: BallotIcon, tone: "tertiary", shape: "pentagon" },
+  { id: "event", icon: EventIcon, tone: "primary", shape: "sunny" },
+] as const;
+
+const options = computed<AttachOption[]>(() =>
+  OPTIONS.map((option) => ({
+    ...option,
+    icon: markRaw(option.icon),
+    label: t(`gallery.chat.attachOptions.${option.id}`),
+  })),
+);
+
+function choose(id: string) {
+  if (id === "gallery" || id === "camera" || id === "file") {
+    const input = pickers[id].value;
+    if (input) {
+      input.value = "";
+      input.click();
+    }
+    return;
+  }
+  if (id === "location" || id === "contact" || id === "poll" || id === "event") emit("compose", id);
+}
+
+function pickRecent(index: number) {
+  open.value = false;
+  emit("recent", index);
+}
+
+async function receive(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const files = [...(input.files ?? [])];
+  input.value = "";
+  for (const file of files) {
+    if (file.type.startsWith("image/")) {
+      const image = await toImage(file);
+      if (image) emit("image", image);
+      else emit("failed", file.name);
+    } else {
+      emit("text", describe(file, locale.value));
+    }
+  }
+}
+</script>

package/templates/m3e-app/src/modules/gallery/components/chat/ChatContactPicker.vue

@@ -0,0 +1,85 @@
+<template>
+  <M3BottomSheet v-model:open="open" :title="t('gallery.chat.contact.title')" @closed="filter = ''">
+    <div class="px-4 pb-2">
+      <M3SearchBar
+        v-model="filter"
+        :placeholder="t('gallery.chat.contact.search')"
+        :clear-label="t('gallery.inputs.clear')"
+      />
+    </div>
+    <M3List variant="standard" :label="t('gallery.chat.contact.title')">
+      <M3ListItem
+        v-for="customer in matches"
+        :key="customer.id"
+        clickable
+        :headline="customer.name"
+        :supporting="customer.city"
+        @click="pick(customer)"
+      >
+        <template #leading>
+          <span
+            class="type-title-medium grid size-10 place-items-center rounded-full bg-secondary-container text-on-secondary-container"
+            aria-hidden="true"
+          >
+            {{ initial(customer.name) }}
+          </span>
+        </template>
+      </M3ListItem>
+    </M3List>
+    <p
+      v-if="!loading && matches.length === 0"
+      class="type-body-medium m-0 px-6 py-8 text-center text-on-surface-variant"
+      role="status"
+    >
+      {{ emptyText }}
+    </p>
+  </M3BottomSheet>
+</template>
+
+<script setup lang="ts">
+import type { MessageContact } from "@cavulsqa/m3e-vue";
+
+interface Customer {
+  id: number;
+  name: string;
+  city: string;
+}
+
+const props = defineProps<{
+  customers: readonly Customer[];
+  loading?: boolean;
+  failed?: boolean;
+}>();
+const open = defineModel<boolean>("open", { default: false });
+const emit = defineEmits<{ pick: [contact: MessageContact] }>();
+const { t, locale } = useI18n();
+
+const filter = ref("");
+const needle = computed(() => filter.value.trim().toLocaleLowerCase(locale.value));
+
+const matches = computed(() =>
+  needle.value
+    ? props.customers.filter((customer) =>
+        `${customer.name} ${customer.city}`.toLocaleLowerCase(locale.value).includes(needle.value),
+      )
+    : props.customers,
+);
+
+const emptyText = computed(() => {
+  if (props.failed) return t("gallery.chat.contact.failed");
+  return needle.value ? t("gallery.inputs.noMatches") : t("gallery.chat.contact.empty");
+});
+
+/** First and last word's first letter, so "Customer 2" and "Customer 8" do not share a monogram. */
+function initial(name: string) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const first = [...(words[0] ?? "")][0] ?? "";
+  const last = words.length > 1 ? ([...(words.at(-1) ?? "")][0] ?? "") : "";
+  return `${first}${last}`.toLocaleUpperCase(locale.value);
+}
+
+function pick(customer: Customer) {
+  emit("pick", { name: customer.name, detail: customer.city });
+  open.value = false;
+}
+</script>

package/templates/m3e-app/src/modules/gallery/components/chat/ChatInviteComposer.vue

@@ -0,0 +1,131 @@
+<template>
+  <M3BottomSheet v-model:open="open" :title="t('gallery.chat.invite.title')">
+    <div class="flex flex-col gap-3 px-4 pb-2">
+      <M3TextField
+        v-model="title"
+        :label="t('gallery.chat.invite.name')"
+        :maxlength="TITLE_MAX"
+        autocomplete="off"
+      />
+      <M3List variant="segmented">
+        <M3ListItem
+          clickable
+          :overline="t('gallery.chat.invite.date')"
+          :headline="dateLabel"
+          @click="dateOpen = true"
+        >
+          <template #leading><i-ms-calendar-today-outline-rounded /></template>
+        </M3ListItem>
+        <M3ListItem
+          clickable
+          :overline="t('gallery.chat.invite.time')"
+          :headline="timeLabel"
+          @click="timeOpen = true"
+        >
+          <template #leading><i-ms-schedule-outline-rounded /></template>
+        </M3ListItem>
+      </M3List>
+      <M3TextField
+        v-model="place"
+        :label="t('gallery.chat.invite.place')"
+        :maxlength="PLACE_MAX"
+        autocomplete="off"
+      />
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end">
+        <M3Button size="m" :disabled="!ready" @click="submit">
+          <template #icon><i-ms-send-rounded class="rtl:-scale-x-100" /></template>
+          {{ t("gallery.chat.send") }}
+        </M3Button>
+      </div>
+    </template>
+  </M3BottomSheet>
+
+  <M3DatePicker
+    v-model="date"
+    v-model:open="dateOpen"
+    :min="today"
+    :locale="locale"
+    :title="t('gallery.pickers.selectDate')"
+    :empty-headline="t('gallery.pickers.selectedDate')"
+    :confirm-label="t('gallery.pickers.ok')"
+    :dismiss-label="t('gallery.overlays.cancel')"
+    :input-label="t('gallery.pickers.typeDate')"
+    :calendar-label="t('gallery.pickers.useCalendar')"
+    :invalid-label="t('gallery.pickers.invalid')"
+  />
+  <M3TimePicker
+    v-model="time"
+    v-model:open="timeOpen"
+    :minute-step="15"
+    :locale="locale"
+    :title="t('gallery.pickers.selectTime')"
+    :confirm-label="t('gallery.pickers.ok')"
+    :dismiss-label="t('gallery.overlays.cancel')"
+    :dial-label="t('gallery.pickers.useDial')"
+    :input-label="t('gallery.pickers.useKeyboard')"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  addDays,
+  formatIso,
+  formatIsoTime,
+  todayIso,
+  type IsoDate,
+  type IsoTime,
+  type MessageInvite,
+} from "@cavulsqa/m3e-vue";
+
+const TITLE_MAX = 80;
+const PLACE_MAX = 80;
+const DEFAULT_TIME: IsoTime = "09:00";
+
+const open = defineModel<boolean>("open", { default: false });
+const emit = defineEmits<{ send: [invite: MessageInvite] }>();
+const { t, locale } = useI18n();
+
+const today = todayIso();
+const title = ref("");
+const place = ref("");
+const date = ref<IsoDate | null>(addDays(today, 1));
+const time = ref<IsoTime | null>(DEFAULT_TIME);
+const dateOpen = ref(false);
+const timeOpen = ref(false);
+
+const dateLabel = computed(() =>
+  date.value
+    ? formatIso(date.value, locale.value, { weekday: "long", day: "numeric", month: "long" })
+    : t("gallery.pickers.pick"),
+);
+const timeLabel = computed(() =>
+  time.value ? formatIsoTime(time.value, locale.value) : t("gallery.pickers.pickTime"),
+);
+
+const start = computed(() => {
+  if (!date.value || !time.value) return null;
+  const at = new Date(`${date.value}T${time.value}:00`);
+  return Number.isNaN(at.getTime()) ? null : at;
+});
+
+const ready = computed(() => Boolean(title.value.trim()) && start.value !== null);
+
+function submit() {
+  if (!ready.value || !start.value) return;
+  const where = place.value.trim();
+  emit("send", {
+    title: title.value.trim(),
+    start: start.value,
+    ...(where ? { place: where } : {}),
+    answers: { going: 0, maybe: 0, no: 0 },
+  });
+  title.value = "";
+  place.value = "";
+  date.value = addDays(todayIso(), 1);
+  time.value = DEFAULT_TIME;
+  open.value = false;
+}
+</script>

package/templates/m3e-app/src/modules/gallery/components/chat/ChatPollComposer.vue

@@ -0,0 +1,148 @@
+<template>
+  <M3BottomSheet v-model:open="open" :title="t('gallery.chat.poll.title')">
+    <div class="flex flex-col gap-3 px-4 pb-2">
+      <M3TextField
+        v-model="question"
+        :label="t('gallery.chat.poll.question')"
+        :maxlength="QUESTION_MAX"
+        autocomplete="off"
+      />
+      <TransitionGroup tag="div" name="poll-option" class="relative flex flex-col gap-3">
+        <div v-for="(option, index) in options" :key="option.key" class="flex items-center gap-1">
+          <div class="min-w-0 flex-1">
+            <M3TextField
+              v-model="option.label"
+              :label="t('gallery.chat.poll.option', { number: index + 1 })"
+              :error="repeated.has(index) ? t('gallery.chat.poll.repeated') : undefined"
+              autocomplete="off"
+            />
+          </div>
+          <M3IconButton
+            v-if="options.length > MIN_OPTIONS"
+            :label="t('gallery.chat.poll.remove', { number: index + 1 })"
+            @click="remove(index)"
+          >
+            <i-ms-close-rounded />
+          </M3IconButton>
+        </div>
+      </TransitionGroup>
+      <M3Button v-if="options.length < MAX_OPTIONS" variant="text" class="self-start" @click="add">
+        <template #icon><i-ms-add-rounded /></template>
+        {{ t("gallery.chat.poll.add") }}
+      </M3Button>
+      <div class="flex items-center gap-4 py-2">
+        <div class="flex min-w-0 flex-1 flex-col">
+          <span class="type-body-large text-on-surface">{{ t("gallery.chat.poll.multiple") }}</span>
+          <span class="type-body-medium text-on-surface-variant">
+            {{ t("gallery.chat.poll.multipleHint") }}
+          </span>
+        </div>
+        <M3Switch v-model="multiple" :label="t('gallery.chat.poll.multiple')" />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end">
+        <M3Button size="m" :disabled="!ready" @click="submit">
+          <template #icon><i-ms-send-rounded class="rtl:-scale-x-100" /></template>
+          {{ t("gallery.chat.send") }}
+        </M3Button>
+      </div>
+    </template>
+  </M3BottomSheet>
+</template>
+
+<script setup lang="ts">
+import type { MessagePoll } from "@cavulsqa/m3e-vue";
+
+const MIN_OPTIONS = 2;
+const MAX_OPTIONS = 6;
+const QUESTION_MAX = 140;
+
+const open = defineModel<boolean>("open", { default: false });
+const emit = defineEmits<{ send: [poll: MessagePoll] }>();
+const { t } = useI18n();
+
+let keys = 0;
+const blankOption = () => ({ key: (keys += 1), label: "" });
+
+const question = ref("");
+const options = ref([blankOption(), blankOption()]);
+const multiple = ref(false);
+
+const normalised = computed(() =>
+  options.value.map((option) => option.label.trim().toLocaleLowerCase()),
+);
+
+/** Indexes of answers that repeat an earlier one: two identical answers split one opinion in two. */
+const repeated = computed(() => {
+  const seen = new Set<string>();
+  const indexes = new Set<number>();
+  normalised.value.forEach((label, index) => {
+    if (!label) return;
+    if (seen.has(label)) indexes.add(index);
+    seen.add(label);
+  });
+  return indexes;
+});
+
+const filled = computed(() => options.value.filter((option) => option.label.trim()));
+const ready = computed(
+  () =>
+    Boolean(question.value.trim()) && filled.value.length >= MIN_OPTIONS && !repeated.value.size,
+);
+
+function add() {
+  if (options.value.length < MAX_OPTIONS) options.value.push(blankOption());
+}
+
+function remove(index: number) {
+  if (options.value.length > MIN_OPTIONS) options.value.splice(index, 1);
+}
+
+function submit() {
+  if (!ready.value) return;
+  emit("send", {
+    question: question.value.trim(),
+    multiple: multiple.value,
+    options: filled.value.map((option, index) => ({
+      id: `o${index + 1}`,
+      label: option.label.trim(),
+      votes: 0,
+    })),
+  });
+  question.value = "";
+  options.value = [blankOption(), blankOption()];
+  multiple.value = false;
+  open.value = false;
+}
+</script>
+
+<style scoped>
+.poll-option-enter-active,
+.poll-option-leave-active {
+  transition:
+    opacity var(--md-sys-motion-spring-fast-effects-duration)
+      var(--md-sys-motion-spring-fast-effects),
+    translate var(--md-sys-motion-spring-fast-spatial-duration)
+      var(--md-sys-motion-spring-fast-spatial);
+}
+
+.poll-option-enter-from,
+.poll-option-leave-to {
+  opacity: 0;
+  translate: 0 -8px;
+}
+
+.poll-option-leave-active {
+  position: absolute;
+  inset-inline: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .poll-option-enter-active,
+  .poll-option-leave-active {
+    transition: none;
+  }
+}
+</style>

package/templates/m3e-app/src/modules/gallery/components/chat/ChatRecentPhotos.vue

@@ -0,0 +1,62 @@
+<template>
+  <section :aria-label="label">
+    <h3 class="type-title-small m-0 px-1 pb-2 text-on-surface-variant">{{ label }}</h3>
+    <ul class="chat-recent m-0 flex list-none gap-2 overflow-x-auto p-0">
+      <li v-for="(photo, index) in photos" :key="photo.src" class="shrink-0">
+        <button
+          type="button"
+          class="chat-recent__photo m3-focus-ring rounded-lg"
+          :aria-label="sendLabel(photo.alt)"
+          @click="emit('pick', index)"
+        >
+          <img
+            :src="photo.src"
+            :alt="photo.alt"
+            class="size-full object-cover"
+            loading="lazy"
+            decoding="async"
+            draggable="false"
+          />
+        </button>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { PhotoItem } from "@cavulsqa/m3e-vue";
+
+defineProps<{
+  photos: readonly PhotoItem[];
+  label: string;
+  sendLabel: (alt: string) => string;
+}>();
+
+const emit = defineEmits<{ pick: [index: number] }>();
+</script>
+
+<style scoped>
+.chat-recent {
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+}
+
+.chat-recent__photo {
+  display: block;
+  width: 88px;
+  height: 88px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: var(--md-sys-color-surface-container-highest);
+  scroll-snap-align: start;
+  cursor: pointer;
+  transition: scale var(--md-sys-motion-spring-fast-spatial-duration)
+    var(--md-sys-motion-spring-fast-spatial);
+}
+
+.chat-recent__photo:active {
+  scale: 0.94;
+}
+</style>

package/templates/m3e-app/src/modules/gallery/components/inputs/InputsAccount.vue

@@ -0,0 +1,79 @@
+<template>
+  <GalleryBlock :title="t('gallery.inputs.account')" :note="t('gallery.inputs.accountNote')" stack>
+    <div class="flex flex-col gap-2">
+      <M3TextField
+        v-model="password"
+        variant="outlined"
+        :label="t('gallery.inputs.password')"
+        :type="revealed ? 'text' : 'password'"
+        autocomplete="new-password"
+        autocapitalize="off"
+        spellcheck="false"
+      >
+        <template #leading><i-ms-lock-outline-rounded /></template>
+        <template #trailing>
+          <M3IconButton
+            :label="t(revealed ? 'gallery.inputs.hidePassword' : 'gallery.inputs.showPassword')"
+            :aria-pressed="revealed"
+            @pointerdown.prevent
+            @click="revealed = !revealed"
+          >
+            <i-ms-visibility-off-outline-rounded v-if="revealed" />
+            <i-ms-visibility-outline-rounded v-else />
+          </M3IconButton>
+        </template>
+      </M3TextField>
+      <PasswordStrength
+        :score="score"
+        :label="score ? t(`gallery.inputs.strength.${STRENGTH[score]}`) : ''"
+        class="px-1"
+      />
+    </div>
+    <M3TextField
+      v-model="phone"
+      variant="outlined"
+      :label="t('gallery.inputs.phone')"
+      prefix="+213"
+      inputmode="tel"
+      autocomplete="tel-national"
+      :supporting="t('gallery.inputs.phoneHint')"
+      :error="phoneError"
+      @blur="touched = true"
+    >
+      <template #leading><i-ms-call-outline-rounded /></template>
+    </M3TextField>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import PasswordStrength from "@/modules/gallery/components/inputs/PasswordStrength.vue";
+import {
+  formatMobile,
+  isMobile,
+  mobileDigits,
+  passwordScore,
+} from "@/modules/gallery/composables/fieldFormats";
+
+const STRENGTH = [null, "weak", "fair", "good", "strong"] as const;
+
+const { t } = useI18n();
+const password = ref("");
+const revealed = ref(false);
+const digits = ref("");
+const touched = ref(false);
+
+const score = computed(() => (password.value ? passwordScore(password.value) : 0));
+const phone = computed({
+  get: () => formatMobile(digits.value),
+  set: (raw: string) => {
+    digits.value = mobileDigits(raw);
+  },
+});
+const phoneError = computed(() => {
+  const complete = digits.value.length === 9;
+  if (complete && !isMobile(digits.value)) return t("gallery.inputs.phoneInvalid");
+  if (touched.value && digits.value.length > 0 && !complete) return t("gallery.inputs.phoneShort");
+  return undefined;
+});
+</script>

package/templates/m3e-app/src/modules/gallery/components/inputs/InputsTags.vue

@@ -0,0 +1,53 @@
+<template>
+  <GalleryBlock :title="t('gallery.inputs.tags')" :note="t('gallery.inputs.tagsNote')" stack>
+    <M3ChipField
+      v-model="tags"
+      :label="t('gallery.inputs.tagsLabel')"
+      :placeholder="t('gallery.inputs.tagsPlaceholder')"
+      :supporting="t('gallery.inputs.tagsHint')"
+      :max="MAX"
+      :validate="valid"
+      :remove-label="(tag: string) => t('gallery.inputs.removeTag', { tag })"
+    />
+    <div
+      v-if="suggestions.length"
+      class="flex flex-wrap gap-2"
+      role="group"
+      :aria-label="t('gallery.inputs.suggested')"
+    >
+      <M3Chip
+        v-for="suggestion in suggestions"
+        :key="suggestion"
+        kind="suggestion"
+        :label="suggestion"
+        @click="add(suggestion)"
+      />
+    </div>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import { hasEntry } from "@cavulsqa/m3e-vue";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+
+const MAX = 6;
+
+const { t } = useI18n();
+const tags = ref<string[]>(["Wholesale", "Oran"]);
+const SUGGESTED = computed(() =>
+  ["nightDelivery", "pharmacy", "cashOnly", "keyAccount"].map((key) =>
+    t(`gallery.inputs.suggestedTags.${key}`),
+  ),
+);
+const suggestions = computed(() =>
+  tags.value.length >= MAX ? [] : SUGGESTED.value.filter((tag) => !hasEntry(tags.value, tag)),
+);
+
+function valid(value: string) {
+  return value.length >= 2 && value.length <= 24;
+}
+
+function add(tag: string) {
+  if (tags.value.length < MAX && !hasEntry(tags.value, tag)) tags.value = [...tags.value, tag];
+}
+</script>