@cavulsqa/create 2.9.2 → 2.10.0

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

@@ -0,0 +1,73 @@
+<template>
+  <GalleryBlock
+    :title="t('gallery.inputs.verification')"
+    :note="t('gallery.inputs.verificationNote', { code: DEMO_CODE })"
+    stack
+  >
+    <M3CodeField
+      ref="field"
+      v-model="code"
+      :label="t('gallery.inputs.codeLabel')"
+      :error="error"
+      :supporting="verified ? t('gallery.inputs.codeVerified') : t('gallery.inputs.codeSent')"
+      :success="verified"
+      @complete="check"
+    />
+    <div class="flex flex-wrap items-center gap-2">
+      <M3Button v-if="verified" variant="tonal" size="s" @click="reset">
+        {{ t("gallery.inputs.codeAgain") }}
+      </M3Button>
+      <M3Button v-else variant="text" size="s" :disabled="wait > 0" @click="resend">
+        <template #icon><i-ms-sms-outline-rounded /></template>
+        {{ wait > 0 ? t("gallery.inputs.resendIn", { s: wait }) : t("gallery.inputs.resend") }}
+      </M3Button>
+    </div>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import type { M3CodeField } from "@cavulsqa/m3e-vue";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+
+const DEMO_CODE = "246810";
+const RESEND_AFTER = 30;
+
+const { t } = useI18n();
+const snackbar = useSnackbar();
+const field = useTemplateRef<InstanceType<typeof M3CodeField>>("field");
+const code = ref("");
+const error = ref<string>();
+const verified = ref(false);
+const wait = ref(RESEND_AFTER);
+
+const { pause, resume } = useIntervalFn(() => {
+  wait.value = Math.max(0, wait.value - 1);
+  if (wait.value === 0) pause();
+}, 1000);
+
+watch(code, (value) => {
+  if (value.length < DEMO_CODE.length) error.value = undefined;
+});
+
+function check(value: string) {
+  if (value === DEMO_CODE) {
+    verified.value = true;
+    pause();
+    return;
+  }
+  error.value = t("gallery.inputs.codeWrong");
+}
+
+function resend() {
+  code.value = "";
+  wait.value = RESEND_AFTER;
+  resume();
+  void snackbar.show(t("gallery.inputs.codeResent"));
+  field.value?.focus();
+}
+
+function reset() {
+  verified.value = false;
+  resend();
+}
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <div class="flex items-center gap-3" :class="TONE[score]">
+    <div class="flex flex-1 gap-1" aria-hidden="true">
+      <span
+        v-for="step in 4"
+        :key="step"
+        class="password-strength__step h-1.5 flex-1 rounded-full"
+        :class="{ 'password-strength__step--on': step <= score }"
+      />
+    </div>
+    <span class="type-label-medium min-w-14 text-end" role="status">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ score: 0 | 1 | 2 | 3 | 4; label: string }>();
+
+const TONE = [
+  "text-on-surface-variant",
+  "text-error",
+  "text-tertiary",
+  "text-primary",
+  "text-primary",
+] as const;
+</script>
+
+<style scoped>
+.password-strength__step {
+  background: var(--md-sys-color-surface-container-highest);
+  transition: background-color var(--md-sys-motion-spring-default-effects-duration)
+    var(--md-sys-motion-spring-default-effects);
+}
+
+.password-strength__step--on {
+  background: currentColor;
+}
+</style>

package/templates/m3e-app/src/modules/gallery/components/sections/GalleryButtons.vue

@@ -0,0 +1,128 @@
+<template>
+  <GalleryBlock :title="t('gallery.buttons.variants')" :note="t('gallery.buttons.variantsNote')">
+    <M3Button v-for="variant in VARIANTS" :key="variant" :variant="variant">{{ variant }}</M3Button>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.buttons.sizes')" :note="t('gallery.buttons.sizesNote')" stack>
+    <div v-for="size in SIZES" :key="size" class="flex flex-wrap items-center gap-3">
+      <M3Button :size="size">
+        <template #icon><i-ms-add-rounded /></template>
+        {{ size.toUpperCase() }}
+      </M3Button>
+      <M3Button :size="size" shape="square" variant="tonal">{{ size.toUpperCase() }}</M3Button>
+    </div>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.buttons.toggle')" :note="t('gallery.buttons.toggleNote')">
+    <M3Button v-model:selected="saved" toggle size="m">
+      <template #icon="{ selected }">
+        <i-ms-bookmark-rounded v-if="selected" />
+        <i-ms-bookmark-outline-rounded v-else />
+      </template>
+      {{ t("gallery.buttons.save") }}
+    </M3Button>
+    <M3Button v-model:selected="starred" toggle variant="outlined" size="m" shape="square">
+      {{ t("gallery.buttons.star") }}
+    </M3Button>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.buttons.icon')" :note="t('gallery.buttons.iconNote')">
+    <M3IconButton
+      :label="t('gallery.buttons.favorite')"
+      variant="standard"
+      toggle
+      :selected="liked"
+      @update:selected="liked = $event"
+    >
+      <template #default="{ selected }">
+        <i-ms-favorite-rounded v-if="selected" />
+        <i-ms-favorite-outline-rounded v-else />
+      </template>
+    </M3IconButton>
+    <M3IconButton :label="t('gallery.buttons.share')" variant="filled" width="wide"
+      ><i-ms-share-outline-rounded
+    /></M3IconButton>
+    <M3IconButton :label="t('gallery.buttons.edit')" variant="tonal" size="m" shape="square"
+      ><i-ms-edit-outline-rounded
+    /></M3IconButton>
+    <M3IconButton :label="t('gallery.buttons.more')" variant="outlined" width="narrow"
+      ><i-ms-more-vert-rounded
+    /></M3IconButton>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.buttons.group')" :note="t('gallery.buttons.groupNote')">
+    <M3ButtonGroup size="m" :label="t('gallery.buttons.group')">
+      <M3IconButton :label="t('gallery.buttons.bold')" variant="tonal"
+        ><i-ms-format-bold-rounded
+      /></M3IconButton>
+      <M3IconButton :label="t('gallery.buttons.italic')" variant="tonal"
+        ><i-ms-format-italic-rounded
+      /></M3IconButton>
+      <M3IconButton :label="t('gallery.buttons.underline')" variant="tonal"
+        ><i-ms-format-underlined-rounded
+      /></M3IconButton>
+    </M3ButtonGroup>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.buttons.connected')" :note="t('gallery.buttons.connectedNote')">
+    <M3ButtonGroup variant="connected" size="s" :label="t('gallery.buttons.connected')">
+      <M3Button
+        v-for="period in PERIODS"
+        :key="period"
+        variant="tonal"
+        toggle
+        :selected="range === period"
+        @update:selected="range = period"
+      >
+        {{ t(`gallery.buttons.periods.${period}`) }}
+      </M3Button>
+    </M3ButtonGroup>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.buttons.split')" :note="t('gallery.buttons.splitNote')">
+    <M3SplitButton
+      v-model:open="splitOpen"
+      size="m"
+      :menu-label="t('gallery.buttons.moreOptions')"
+      @click="sent"
+    >
+      <template #icon><i-ms-share-outline-rounded /></template>
+      {{ t("gallery.buttons.send") }}
+      <template #menu>
+        <span ref="splitAnchor" class="absolute inset-0 pointer-events-none" />
+      </template>
+    </M3SplitButton>
+    <M3Menu
+      v-model:open="splitOpen"
+      :anchor="splitAnchor"
+      align="end"
+      :label="t('gallery.buttons.moreOptions')"
+    >
+      <M3MenuItem :label="t('gallery.buttons.schedule')" @select="sent" />
+      <M3MenuItem :label="t('gallery.buttons.saveDraft')" @select="sent" />
+    </M3Menu>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import type { ButtonSize } from "@cavulsqa/m3e-vue";
+
+const { t } = useI18n();
+const snackbar = useSnackbar();
+
+const VARIANTS = ["filled", "tonal", "outlined", "elevated", "text"] as const;
+const SIZES: readonly ButtonSize[] = ["xs", "s", "m", "l", "xl"];
+const PERIODS = ["day", "week", "month"] as const;
+
+const saved = ref(false);
+const starred = ref(true);
+const liked = ref(false);
+const range = ref<(typeof PERIODS)[number]>("week");
+const splitOpen = ref(false);
+const splitAnchor = useTemplateRef<HTMLElement>("splitAnchor");
+
+function sent() {
+  void snackbar.show(t("gallery.buttons.sent"));
+}
+</script>

package/templates/m3e-app/src/modules/gallery/components/sections/GalleryCarousels.vue

@@ -0,0 +1,236 @@
+<template>
+  <GalleryBlock
+    :title="t('gallery.carousels.multiBrowse')"
+    :note="t('gallery.carousels.multiBrowseNote')"
+    stack
+  >
+    <M3Carousel
+      class="-mx-4 w-[calc(100%+2rem)]"
+      :items="PLACES"
+      :item-key="placeKey"
+      :label="t('gallery.carousels.multiBrowse')"
+      :slide-label="slideLabel"
+    >
+      <template #default="{ item, scrollTo }">
+        <GalleryCarouselTile
+          :title="t(`gallery.carousels.places.${item.id}`)"
+          :icon="item.icon"
+          :shape="item.shape"
+          :from="item.from"
+          :to="item.to"
+          @select="scrollTo"
+        />
+      </template>
+    </M3Carousel>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.carousels.hero')" :note="t('gallery.carousels.heroNote')" stack>
+    <M3Carousel
+      v-model:item="featured"
+      class="-mx-4 w-[calc(100%+2rem)]"
+      variant="hero"
+      :items="PLACES.slice(0, 6)"
+      :item-key="placeKey"
+      :label="t('gallery.carousels.hero')"
+      :slide-label="slideLabel"
+    >
+      <template #default="{ item, scrollTo }">
+        <GalleryCarouselTile
+          :title="t(`gallery.carousels.places.${item.id}`)"
+          :icon="item.icon"
+          :shape="item.shape"
+          :from="item.from"
+          :to="item.to"
+          @select="scrollTo"
+        />
+      </template>
+    </M3Carousel>
+    <span class="type-body-medium text-on-surface-variant">{{
+      t("gallery.carousels.featured", {
+        place: t(`gallery.carousels.places.${PLACES[featured]!.id}`),
+      })
+    }}</span>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.carousels.uncontained')"
+    :note="t('gallery.carousels.uncontainedNote')"
+    stack
+  >
+    <M3Carousel
+      class="-mx-4 w-[calc(100%+2rem)]"
+      variant="uncontained"
+      :items="PLACES"
+      :item-key="placeKey"
+      :item-width="160"
+      :height="180"
+      :label="t('gallery.carousels.uncontained')"
+      :slide-label="slideLabel"
+    >
+      <template #default="{ item }">
+        <GalleryCarouselTile
+          :title="t(`gallery.carousels.places.${item.id}`)"
+          :icon="item.icon"
+          :shape="item.shape"
+          :from="item.from"
+          :to="item.to"
+        />
+      </template>
+    </M3Carousel>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.carousels.photos')"
+    :note="t('gallery.carousels.photosNote')"
+    stack
+  >
+    <div class="grid grid-cols-3 gap-1 overflow-hidden rounded-lg">
+      <button
+        v-for="(photo, position) in photos"
+        :key="position"
+        type="button"
+        class="aspect-square w-full overflow-hidden border-0 p-0"
+        :aria-label="photo.alt"
+        @click="openPhoto(position)"
+      >
+        <M3Image :src="photo.src" alt="" ratio="1 / 1" class="size-full" />
+      </button>
+    </div>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.carousels.lazy')" :note="t('gallery.carousels.lazyNote')" stack>
+    <div class="grid grid-cols-2 gap-3">
+      <M3Image
+        v-if="photos[0]"
+        :src="photos[0].src"
+        :alt="photos[0].alt"
+        :width="photos[0].width"
+        :height="photos[0].height"
+        placeholder="var(--md-sys-color-secondary-container)"
+        class="rounded-lg"
+      />
+      <M3Image
+        src="/missing-photo.jpg"
+        :alt="t('gallery.carousels.missing')"
+        ratio="4 / 3"
+        class="rounded-lg"
+      />
+    </div>
+  </GalleryBlock>
+
+  <M3PhotoBrowser
+    v-model:open="browserOpen"
+    v-model:index="photoIndex"
+    :photos="photos"
+    :label="t('gallery.carousels.photos')"
+    :close-label="t('shell.dismiss')"
+    :counter-text="counterText"
+  />
+</template>
+
+<script setup lang="ts">
+import type { MaterialShapeName } from "@cavulsqa/m3e";
+import { markRaw, type Component } from "vue";
+import BeachIcon from "~icons/material-symbols/beach-access-outline-rounded";
+import CafeIcon from "~icons/material-symbols/local-cafe-outline-rounded";
+import CityIcon from "~icons/material-symbols/location-city-rounded";
+import ForestIcon from "~icons/material-symbols/forest-outline-rounded";
+import HikingIcon from "~icons/material-symbols/hiking-rounded";
+import LandscapeIcon from "~icons/material-symbols/landscape-outline-rounded";
+import ParkIcon from "~icons/material-symbols/park-outline-rounded";
+import SailingIcon from "~icons/material-symbols/sailing-outline-rounded";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import GalleryCarouselTile from "@/modules/gallery/components/GalleryCarouselTile.vue";
+import { usePhotoScenes } from "@/modules/gallery/composables/usePhotoScenes";
+
+interface Place {
+  id: string;
+  icon: Component;
+  shape: MaterialShapeName;
+  from: string;
+  to: string;
+}
+
+const { t } = useI18n();
+const featured = ref(0);
+const browserOpen = ref(false);
+const photoIndex = ref(0);
+const { photos } = usePhotoScenes((kind) => t(`gallery.carousels.scenes.${kind}`));
+useDarkStatusBar(() => browserOpen.value);
+
+function openPhoto(position: number) {
+  photoIndex.value = position;
+  browserOpen.value = true;
+}
+
+function counterText(position: number, count: number) {
+  return t("gallery.carousels.counter", { position, count });
+}
+
+const PLACES: readonly Place[] = [
+  {
+    id: "mountains",
+    icon: markRaw(LandscapeIcon),
+    shape: "cookie9Sided",
+    from: "primary-container",
+    to: "tertiary-container",
+  },
+  {
+    id: "forest",
+    icon: markRaw(ForestIcon),
+    shape: "clover4Leaf",
+    from: "secondary-container",
+    to: "primary-container",
+  },
+  {
+    id: "coast",
+    icon: markRaw(BeachIcon),
+    shape: "sunny",
+    from: "tertiary-container",
+    to: "secondary-container",
+  },
+  {
+    id: "city",
+    icon: markRaw(CityIcon),
+    shape: "pentagon",
+    from: "primary-container",
+    to: "secondary-container",
+  },
+  {
+    id: "harbour",
+    icon: markRaw(SailingIcon),
+    shape: "flower",
+    from: "tertiary-container",
+    to: "primary-container",
+  },
+  {
+    id: "trail",
+    icon: markRaw(HikingIcon),
+    shape: "softBurst",
+    from: "secondary-container",
+    to: "tertiary-container",
+  },
+  {
+    id: "park",
+    icon: markRaw(ParkIcon),
+    shape: "gem",
+    from: "primary-container",
+    to: "tertiary-container",
+  },
+  {
+    id: "cafe",
+    icon: markRaw(CafeIcon),
+    shape: "cookie4Sided",
+    from: "tertiary-container",
+    to: "secondary-container",
+  },
+];
+
+function placeKey(place: Place) {
+  return place.id;
+}
+
+function slideLabel(index: number, count: number) {
+  return t("gallery.carousels.slide", { n: index + 1, count });
+}
+</script>

package/templates/m3e-app/src/modules/gallery/components/sections/GalleryCharts.vue

@@ -0,0 +1,84 @@
+<template>
+  <GalleryBlock :title="t('gallery.charts.line')" :note="t('gallery.charts.lineNote')" stack>
+    <M3LineChart
+      :labels="months"
+      :series="sales"
+      :label="t('gallery.charts.line')"
+      :format="compact"
+      area
+    />
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.charts.bar')" :note="t('gallery.charts.barNote')" stack>
+    <div>
+      <M3Chip
+        kind="filter"
+        :label="t('gallery.charts.stacked')"
+        :selected="stacked"
+        @update:selected="stacked = $event"
+      />
+    </div>
+    <M3BarChart
+      :labels="REPS"
+      :series="reps"
+      :label="t('gallery.charts.bar')"
+      :format="compact"
+      :stacked="stacked"
+    />
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.charts.donut')" :note="t('gallery.charts.donutNote')" stack>
+    <M3DonutChart
+      :segments="channels"
+      :label="t('gallery.charts.donut')"
+      :total-label="t('gallery.charts.total')"
+      :format="compact"
+    />
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import type { ChartSeries } from "@cavulsqa/m3e-vue";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+
+const REPS = ["Karim", "Samir", "Nabil", "Yacine", "Walid"];
+
+const { t, locale } = useI18n();
+const stacked = ref(false);
+
+const months = computed(() =>
+  Array.from({ length: 12 }, (_, month) =>
+    new Date(2026, month, 1).toLocaleDateString(locale.value, { month: "short" }),
+  ),
+);
+
+const compact = (value: number) =>
+  new Intl.NumberFormat(locale.value, { notation: "compact", maximumFractionDigits: 1 }).format(
+    value,
+  );
+
+const sales = computed<ChartSeries[]>(() => [
+  {
+    label: t("gallery.charts.thisYear"),
+    values: [420, 460, 510, 480, 560, 640, 700, 690, 760, 820, null, null].map((v) =>
+      v === null ? null : v * 1000,
+    ),
+  },
+  {
+    label: t("gallery.charts.lastYear"),
+    values: [380, 400, 430, 470, 450, 520, 580, 610, 600, 650, 700, 780].map((v) => v * 1000),
+  },
+]);
+
+const reps = computed<ChartSeries[]>(() => [
+  { label: t("gallery.charts.august"), values: [180, 140, 210, 95, 160].map((v) => v * 1000) },
+  { label: t("gallery.charts.september"), values: [210, 120, 240, 130, 175].map((v) => v * 1000) },
+]);
+
+const channels = computed(() => [
+  { label: t("gallery.charts.channels.shops"), value: 1_240_000 },
+  { label: t("gallery.charts.channels.wholesale"), value: 860_000 },
+  { label: t("gallery.charts.channels.online"), value: 310_000 },
+  { label: t("gallery.charts.channels.export"), value: 120_000 },
+]);
+</script>

package/templates/m3e-app/src/modules/gallery/components/sections/GalleryFabs.vue

@@ -0,0 +1,70 @@
+<template>
+  <GalleryBlock :title="t('gallery.fabs.sizes')" :note="t('gallery.fabs.sizesNote')">
+    <M3Fab v-for="size in SIZES" :key="size" :size="size" :label="t('gallery.fabs.compose')">
+      <i-ms-edit-outline-rounded />
+    </M3Fab>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.fabs.colors')" :note="t('gallery.fabs.colorsNote')">
+    <M3Fab v-for="color in COLORS" :key="color" :color="color" size="small" :label="color">
+      <i-ms-add-rounded />
+    </M3Fab>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.fabs.extended')" :note="t('gallery.fabs.extendedNote')">
+    <M3Fab
+      :extended="extended"
+      :label="t('gallery.fabs.compose')"
+      size="medium"
+      @click="extended = !extended"
+    >
+      <i-ms-edit-outline-rounded />
+    </M3Fab>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.fabs.menu')" :note="t('gallery.fabs.menuNote')">
+    <div class="flex w-full justify-end pt-64">
+      <M3FabMenu
+        v-model:open="menuOpen"
+        :label="t('gallery.fabs.create')"
+        :close-label="t('shell.dismiss')"
+      >
+        <template #icon><i-ms-add-rounded /></template>
+        <M3FabMenuItem :index="2" :label="t('gallery.fabs.order')" @click="done">
+          <i-ms-receipt-long-outline-rounded />
+        </M3FabMenuItem>
+        <M3FabMenuItem :index="1" :label="t('gallery.fabs.customer')" @click="done">
+          <i-ms-person-outline-rounded />
+        </M3FabMenuItem>
+        <M3FabMenuItem :index="0" :label="t('gallery.fabs.note')" @click="done">
+          <i-ms-draft-outline-rounded />
+        </M3FabMenuItem>
+      </M3FabMenu>
+    </div>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import type { FabColor, FabSize } from "@cavulsqa/m3e-vue";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+
+const { t } = useI18n();
+const snackbar = useSnackbar();
+
+const SIZES: readonly FabSize[] = ["small", "default", "medium", "large"];
+const COLORS: readonly FabColor[] = [
+  "primary-container",
+  "secondary-container",
+  "tertiary-container",
+  "primary",
+  "secondary",
+  "tertiary",
+];
+
+const extended = ref(true);
+const menuOpen = ref(false);
+
+function done() {
+  void snackbar.show(t("gallery.fabs.picked"));
+}
+</script>