@cavulsqa/create 2.9.3 → 2.10.1

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

@@ -0,0 +1,368 @@
+<template>
+  <GalleryBlock :title="t('gallery.overlays.sheet')" :note="t('gallery.overlays.sheetNote')">
+    <M3Button variant="tonal" @click="sheetOpen = true">{{
+      t("gallery.overlays.openSheet")
+    }}</M3Button>
+    <M3Button variant="outlined" @click="openActions">{{
+      t("gallery.overlays.openActions")
+    }}</M3Button>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.overlays.standard')" :note="t('gallery.overlays.standardNote')">
+    <M3Button variant="tonal" @click="toggleStandard">{{
+      standardDetent === "hidden"
+        ? t("gallery.overlays.showStandard")
+        : t("gallery.overlays.hideStandard")
+    }}</M3Button>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.overlays.side')" :note="t('gallery.overlays.sideNote')">
+    <M3Button variant="tonal" @click="sideOpen = true">{{
+      t("gallery.overlays.openSide")
+    }}</M3Button>
+    <M3Button variant="outlined" @click="railOpen = true">
+      <template #icon><i-ms-menu-rounded /></template>
+      {{ t("gallery.overlays.openRail") }}
+    </M3Button>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.overlays.tooltips')" :note="t('gallery.overlays.tooltipsNote')">
+    <M3Tooltip :text="t('gallery.buttons.share')">
+      <M3IconButton :label="t('gallery.buttons.share')" variant="tonal"
+        ><i-ms-share-outline-rounded
+      /></M3IconButton>
+    </M3Tooltip>
+    <M3Tooltip rich :title="t('gallery.overlays.richTitle')" :text="t('gallery.overlays.richText')">
+      <M3Button variant="text">
+        <template #icon><i-ms-info-outline-rounded /></template>
+        {{ t("gallery.overlays.whatsThis") }}
+      </M3Button>
+      <template #actions="{ close }">
+        <M3Button variant="text" size="xs" @click="close">{{
+          t("gallery.overlays.gotIt")
+        }}</M3Button>
+      </template>
+    </M3Tooltip>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.overlays.fullscreen')"
+    :note="t('gallery.overlays.fullscreenNote')"
+  >
+    <M3Button variant="tonal" @click="formOpen = true">{{
+      t("gallery.overlays.newCustomer")
+    }}</M3Button>
+  </GalleryBlock>
+
+  <GalleryCustomerForm
+    v-model:open="formOpen"
+    @saved="(name) => snackbar.show(t('gallery.overlays.customerSaved', { name }))"
+  />
+
+  <GalleryBlock :title="t('gallery.overlays.dialog')" :note="t('gallery.overlays.dialogNote')">
+    <M3Button variant="tonal" @click="confirm">{{ t("gallery.overlays.openDialog") }}</M3Button>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.overlays.menu')" :note="t('gallery.overlays.menuNote')">
+    <div ref="menuAnchor" class="inline-flex">
+      <M3Button variant="outlined" @click="menuOpen = !menuOpen">
+        {{ t("gallery.overlays.sortBy", { order: t(`gallery.overlays.orders.${sort}`) }) }}
+        <template #trailing><i-ms-sort-rounded /></template>
+      </M3Button>
+    </div>
+    <M3Menu v-model:open="menuOpen" :anchor="menuAnchor" :label="t('gallery.overlays.menu')">
+      <M3MenuGroup :label="t('gallery.overlays.sort')">
+        <M3MenuItem
+          v-for="order in ORDERS"
+          :key="order"
+          checkable
+          :selected="sort === order"
+          :label="t(`gallery.overlays.orders.${order}`)"
+          @select="sort = order"
+        />
+      </M3MenuGroup>
+      <M3MenuGroup>
+        <M3MenuItem
+          :label="t('gallery.overlays.groupBy')"
+          :supporting="t(`gallery.overlays.groups.${groupBy}`)"
+        >
+          <template #icon><i-ms-category-outline-rounded /></template>
+          <template #submenu>
+            <M3MenuItem
+              v-for="group in GROUPS"
+              :key="group"
+              checkable
+              :selected="groupBy === group"
+              :label="t(`gallery.overlays.groups.${group}`)"
+              @select="groupBy = group"
+            />
+          </template>
+        </M3MenuItem>
+        <M3MenuItem
+          :label="t('gallery.overlays.reset')"
+          tone="destructive"
+          @select="sort = 'recent'"
+        >
+          <template #icon><i-ms-restart-alt-rounded /></template>
+        </M3MenuItem>
+      </M3MenuGroup>
+    </M3Menu>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.overlays.popover')" :note="t('gallery.overlays.popoverNote')">
+    <div ref="popoverAnchor" class="inline-flex">
+      <M3Button variant="tonal" :aria-expanded="popoverOpen" @click="popoverOpen = !popoverOpen">
+        {{ t("gallery.overlays.cases", { n: cases }) }}
+        <template #trailing><i-ms-expand-more-rounded /></template>
+      </M3Button>
+    </div>
+    <M3Popover
+      v-model:open="popoverOpen"
+      :anchor="popoverAnchor"
+      :label="t('gallery.overlays.quantity')"
+    >
+      <template #default="{ close }">
+        <div class="flex flex-col gap-3 p-4">
+          <span class="type-title-small text-on-surface">{{ t("gallery.overlays.quantity") }}</span>
+          <M3Stepper
+            v-model="cases"
+            :label="t('gallery.overlays.quantity')"
+            :min="1"
+            :max="48"
+            :decrement-label="t('gallery.selection.decrease')"
+            :increment-label="t('gallery.selection.increase')"
+          />
+          <span class="type-body-small text-on-surface-variant">{{
+            t("gallery.overlays.quantityNote")
+          }}</span>
+          <M3Button variant="text" class="self-end" @click="close">{{
+            t("gallery.overlays.done")
+          }}</M3Button>
+        </div>
+      </template>
+    </M3Popover>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.overlays.notification')"
+    :note="t('gallery.overlays.notificationNote')"
+  >
+    <M3Button variant="tonal" @click="notifyOrder">{{
+      t("gallery.overlays.notifyOrder")
+    }}</M3Button>
+    <M3Button variant="outlined" @click="notifySync">{{
+      t("gallery.overlays.notifySync")
+    }}</M3Button>
+    <M3Button variant="text" @click="notifyBurst">{{ t("gallery.overlays.notifyBurst") }}</M3Button>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.overlays.snackbar')" :note="t('gallery.overlays.snackbarNote')">
+    <M3Button variant="tonal" @click="archive">{{ t("gallery.overlays.archive") }}</M3Button>
+  </GalleryBlock>
+
+  <M3SideSheet
+    v-model:open="sideOpen"
+    :title="t('gallery.overlays.filters')"
+    :close-label="t('shell.dismiss')"
+  >
+    <div class="flex flex-col gap-4 px-6 pb-6">
+      <span class="type-title-small text-on-surface-variant">{{ t("gallery.overlays.sort") }}</span>
+      <div class="flex flex-wrap gap-2">
+        <M3Chip
+          v-for="order in ORDERS"
+          :key="order"
+          kind="filter"
+          :label="t(`gallery.overlays.orders.${order}`)"
+          :selected="sort === order"
+          @update:selected="sort = order"
+        />
+      </div>
+    </div>
+    <template #footer>
+      <M3Button class="w-full" @click="sideOpen = false">{{ t("gallery.overlays.done") }}</M3Button>
+    </template>
+  </M3SideSheet>
+
+  <M3ModalNavigationRail
+    v-model:open="railOpen"
+    v-model:selected="destination"
+    :label="t('gallery.overlays.openRail')"
+  >
+    <M3NavigationItem
+      v-for="item in DESTINATIONS"
+      :key="item"
+      :value="item"
+      :label="t(`gallery.navigation.${item}`)"
+    >
+      <template #icon="{ selected }">
+        <i-ms-star-rounded v-if="selected" />
+        <i-ms-star-outline-rounded v-else />
+      </template>
+    </M3NavigationItem>
+  </M3ModalNavigationRail>
+
+  <M3StandardBottomSheet
+    v-model:detent="standardDetent"
+    :label="t('gallery.overlays.nearby')"
+    :title="t('gallery.overlays.nearby')"
+    :peek-height="112"
+    :expand-label="t('gallery.overlays.expandSheet')"
+    :collapse-label="t('gallery.overlays.collapseSheet')"
+    hideable
+  >
+    <M3List variant="segmented" inset>
+      <M3ListItem
+        v-for="stop in 24"
+        :key="stop"
+        clickable
+        :headline="t('gallery.overlays.stop', { n: stop })"
+        :supporting="t('gallery.overlays.stopNote', { minutes: stop * 3 })"
+      >
+        <template #leading><i-ms-location-on-outline-rounded /></template>
+      </M3ListItem>
+    </M3List>
+  </M3StandardBottomSheet>
+
+  <M3BottomSheet v-model:open="sheetOpen" :title="t('gallery.overlays.sheetTitle')">
+    <p class="type-body-medium m-0 px-6 pb-4 text-on-surface-variant">
+      {{ t("gallery.overlays.sheetText") }}
+    </p>
+    <M3List variant="segmented" inset>
+      <M3ListItem
+        v-for="line in 12"
+        :key="line"
+        :headline="t('gallery.overlays.row', { n: line })"
+      />
+    </M3List>
+    <template #footer>
+      <M3Button class="w-full" size="m" @click="sheetOpen = false">{{
+        t("gallery.overlays.done")
+      }}</M3Button>
+    </template>
+  </M3BottomSheet>
+</template>
+
+<script setup lang="ts">
+import type { SheetDetent } from "@cavulsqa/m3e-vue";
+import { markRaw } from "vue";
+import CloudDoneIcon from "~icons/material-symbols/cloud-done-outline-rounded";
+import ContentCopyIcon from "~icons/material-symbols/content-copy-outline-rounded";
+import ShoppingIcon from "~icons/material-symbols/shopping-bag-outline-rounded";
+import DeleteIcon from "~icons/material-symbols/delete-outline-rounded";
+import EditIcon from "~icons/material-symbols/edit-outline-rounded";
+import ShareIcon from "~icons/material-symbols/share-outline-rounded";
+import StarIcon from "~icons/material-symbols/star-outline-rounded";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import GalleryCustomerForm from "@/modules/gallery/components/GalleryCustomerForm.vue";
+
+const { t } = useI18n();
+const snackbar = useSnackbar();
+const dialog = useDialog();
+const actionSheet = useActionSheet();
+const notification = useNotification();
+
+const ORDERS = ["recent", "name", "amount"] as const;
+const DESTINATIONS = ["inbox", "starred", "saved"] as const;
+const GROUPS = ["none", "customer", "status"] as const;
+const sideOpen = ref(false);
+const railOpen = ref(false);
+const destination = ref<string>("inbox");
+const sheetOpen = ref(false);
+const formOpen = ref(false);
+const standardDetent = ref<SheetDetent>("hidden");
+const menuOpen = ref(false);
+const sort = ref<(typeof ORDERS)[number]>("recent");
+const groupBy = ref<(typeof GROUPS)[number]>("none");
+const menuAnchor = useTemplateRef<HTMLElement>("menuAnchor");
+const popoverOpen = ref(false);
+const cases = ref(6);
+const popoverAnchor = useTemplateRef<HTMLElement>("popoverAnchor");
+
+function toggleStandard() {
+  standardDetent.value = standardDetent.value === "hidden" ? "peek" : "hidden";
+}
+
+async function notifyOrder() {
+  const result = await notification.show({
+    source: t("gallery.overlays.ordersSource"),
+    meta: t("gallery.overlays.now"),
+    title: t("gallery.overlays.orderTitle"),
+    text: t("gallery.overlays.orderText"),
+    icon: markRaw(ShoppingIcon),
+  });
+  if (result === "opened") void snackbar.show(t("gallery.overlays.orderOpened"));
+}
+
+function notifySync() {
+  void notification.show({
+    source: t("gallery.overlays.syncSource"),
+    meta: t("gallery.overlays.now"),
+    title: t("gallery.overlays.syncTitle"),
+    icon: markRaw(CloudDoneIcon),
+    duration: 3000,
+  });
+}
+
+function notifyBurst() {
+  const visits = ["Supérette El Feth", "Alimentation Bachir", "Market Ennour"];
+  visits.forEach((shop, index) => {
+    setTimeout(() => {
+      void notification.show({
+        source: t("gallery.overlays.ordersSource"),
+        meta: t("gallery.overlays.now"),
+        title: t("gallery.overlays.burstTitle", { shop }),
+        text: t("gallery.overlays.burstText"),
+        icon: markRaw(ShoppingIcon),
+        duration: 8000,
+      });
+    }, index * 600);
+  });
+}
+
+async function openActions() {
+  const choice = await actionSheet.open({
+    title: t("gallery.overlays.actionsTitle"),
+    supporting: t("gallery.overlays.actionsText"),
+    quickActions: [
+      { id: "share", label: t("gallery.buttons.share"), icon: markRaw(ShareIcon) },
+      { id: "copy", label: t("gallery.overlays.copy"), icon: markRaw(ContentCopyIcon) },
+      { id: "star", label: t("gallery.buttons.star"), icon: markRaw(StarIcon) },
+    ],
+    groups: [
+      { items: [{ id: "edit", label: t("gallery.buttons.edit"), icon: markRaw(EditIcon) }] },
+      {
+        items: [
+          {
+            id: "delete",
+            label: t("gallery.overlays.delete"),
+            supporting: t("gallery.overlays.deleteNote"),
+            icon: markRaw(DeleteIcon),
+            tone: "destructive",
+          },
+        ],
+      },
+    ],
+  });
+  if (choice) void snackbar.show(t("gallery.overlays.chose", { choice }));
+}
+
+async function confirm() {
+  const confirmed = await dialog.confirm({
+    headline: t("gallery.overlays.dialogTitle"),
+    text: t("gallery.overlays.dialogText"),
+    confirmLabel: t("gallery.overlays.delete"),
+    dismissLabel: t("gallery.overlays.cancel"),
+    icon: markRaw(DeleteIcon),
+    destructive: true,
+  });
+  void snackbar.show(confirmed ? t("gallery.overlays.deleted") : t("gallery.overlays.kept"));
+}
+
+async function archive() {
+  const result = await snackbar.show({
+    message: t("gallery.overlays.archived"),
+    action: t("gallery.overlays.undo"),
+  });
+  if (result === "action") void snackbar.show(t("gallery.overlays.restored"));
+}
+</script>

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

@@ -0,0 +1,175 @@
+<template>
+  <GalleryBlock :title="t('gallery.pickers.modal')" :note="t('gallery.pickers.modalNote')">
+    <M3Button variant="tonal" @click="dateOpen = true">
+      <template #icon><i-ms-calendar-today-outline-rounded /></template>
+      {{ date ? formatted(date) : t("gallery.pickers.pick") }}
+    </M3Button>
+    <M3DatePicker v-model="date" v-model:open="dateOpen" v-bind="dateLabels" :locale="locale" />
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.pickers.sheet')" :note="t('gallery.pickers.sheetNote')">
+    <M3Button variant="tonal" @click="sheetOpen = true">
+      <template #icon><i-ms-event-upcoming-outline-rounded /></template>
+      {{ sheetDate ? formatted(sheetDate) : t("gallery.pickers.pick") }}
+    </M3Button>
+    <M3DatePicker
+      v-model="sheetDate"
+      v-model:open="sheetOpen"
+      presentation="sheet"
+      v-bind="dateLabels"
+      :locale="locale"
+    />
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.pickers.time')" :note="t('gallery.pickers.timeNote')">
+    <M3Button variant="tonal" @click="timeOpen = true">
+      <template #icon><i-ms-schedule-outline-rounded /></template>
+      {{ time ? formatIsoTime(time, locale) : t("gallery.pickers.pickTime") }}
+    </M3Button>
+    <M3TimePicker v-model="time" v-model:open="timeOpen" v-bind="timeLabels" :locale="locale" />
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.pickers.timeSheet')" :note="t('gallery.pickers.timeSheetNote')">
+    <M3Button variant="tonal" @click="timeSheetOpen = true">
+      <template #icon><i-ms-alarm-outline-rounded /></template>
+      {{ sheetTime ? formatIsoTime(sheetTime, locale) : t("gallery.pickers.pickTime") }}
+    </M3Button>
+    <M3TimePicker
+      v-model="sheetTime"
+      v-model:open="timeSheetOpen"
+      presentation="sheet"
+      :minute-step="15"
+      v-bind="timeLabels"
+      :locale="locale"
+    />
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.pickers.docked')" :note="t('gallery.pickers.dockedNote')" stack>
+    <div class="overflow-hidden rounded-lg bg-surface-container-high">
+      <M3Calendar v-model:value="inline" :min="today" :locale="locale" :is-disabled="isSunday" />
+    </div>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.pickers.range')" :note="t('gallery.pickers.rangeNote')" stack>
+    <div class="overflow-hidden rounded-lg bg-surface-container-high">
+      <M3Calendar v-model:start="start" v-model:end="end" mode="range" :locale="locale" />
+    </div>
+    <p class="type-body-medium m-0 text-on-surface-variant">
+      {{ start ? formatted(start) : "—" }} → {{ end ? formatted(end) : "—" }}
+    </p>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.pickers.dateWheel')"
+    :note="t('gallery.pickers.dateWheelNote')"
+    stack
+  >
+    <div class="rounded-lg bg-surface-container-low py-2">
+      <M3DateWheel
+        v-model="wheelDate"
+        :locale="locale"
+        :label="t('gallery.pickers.dateWheel')"
+        :labels="{
+          day: t('gallery.pickers.day'),
+          month: t('gallery.pickers.month'),
+          year: t('gallery.pickers.year'),
+        }"
+        :rows="5"
+      />
+    </div>
+    <p class="type-body-medium m-0 text-on-surface-variant">
+      {{ wheelDate ? formatted(wheelDate) : "—" }}
+    </p>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.pickers.wheel')" :note="t('gallery.pickers.wheelNote')" stack>
+    <div class="rounded-lg bg-surface-container-low py-2">
+      <M3WheelPicker v-model="quantity" :columns="quantityColumns" :rows="5" />
+    </div>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import {
+  addDays,
+  formatIso,
+  formatIsoTime,
+  todayIso,
+  weekday,
+  type IsoDate,
+  type IsoTime,
+  type WheelColumn,
+  type WheelValue,
+} from "@cavulsqa/m3e-vue";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+
+const { t, locale } = useI18n();
+const today = todayIso();
+const date = ref<IsoDate | null>(null);
+const dateOpen = ref(false);
+const sheetDate = ref<IsoDate | null>(null);
+const sheetOpen = ref(false);
+const time = ref<IsoTime | null>(null);
+const timeOpen = ref(false);
+const sheetTime = ref<IsoTime | null>(null);
+const timeSheetOpen = ref(false);
+const isSunday = (value: IsoDate) => weekday(value) === 0;
+const inline = ref<IsoDate | null>(isSunday(today) ? addDays(today, 1) : today);
+const start = ref<IsoDate | null>(null);
+const end = ref<IsoDate | null>(null);
+const wheelDate = ref<IsoDate | null>(null);
+const quantity = ref<Record<string, WheelValue>>({ count: 12, unit: "box" });
+
+const dateLabels = computed(() => ({
+  title: t("gallery.pickers.selectDate"),
+  emptyHeadline: t("gallery.pickers.selectedDate"),
+  confirmLabel: t("gallery.pickers.ok"),
+  dismissLabel: t("gallery.overlays.cancel"),
+  inputLabel: t("gallery.pickers.typeDate"),
+  calendarLabel: t("gallery.pickers.useCalendar"),
+  wheelLabel: t("gallery.pickers.useWheel"),
+  invalidLabel: t("gallery.pickers.invalid"),
+}));
+
+const timeLabels = computed(() => ({
+  title: t("gallery.pickers.selectTime"),
+  confirmLabel: t("gallery.pickers.ok"),
+  dismissLabel: t("gallery.overlays.cancel"),
+  dialLabel: t("gallery.pickers.useDial"),
+  inputLabel: t("gallery.pickers.useKeyboard"),
+  wheelLabel: t("gallery.pickers.useWheel"),
+  hourLabel: t("gallery.pickers.hour"),
+  minuteLabel: t("gallery.pickers.minute"),
+  periodLabel: t("gallery.pickers.period"),
+}));
+
+const quantityColumns = computed<WheelColumn[]>(() => [
+  {
+    key: "count",
+    label: t("gallery.pickers.quantity"),
+    align: "end",
+    options: Array.from({ length: 100 }, (_, index) => ({
+      value: index + 1,
+      label: String(index + 1),
+    })),
+  },
+  {
+    key: "unit",
+    label: t("gallery.pickers.unit"),
+    align: "start",
+    flex: 1.4,
+    options: (["box", "pack", "pallet"] as const).map((unit) => ({
+      value: unit,
+      label: t(`gallery.pickers.units.${unit}`),
+    })),
+  },
+]);
+
+const formatted = (value: IsoDate) =>
+  formatIso(value, locale.value, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+</script>

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

@@ -0,0 +1,118 @@
+<template>
+  <GalleryBlock :title="t('gallery.progress.drive')" :note="t('gallery.progress.driveNote')">
+    <M3Slider
+      v-model="percent"
+      class="w-full"
+      :label="t('gallery.progress.drive')"
+      :format="(v) => `${v}%`"
+    />
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.progress.skeleton')"
+    :note="t('gallery.progress.skeletonNote')"
+    stack
+  >
+    <div class="flex flex-wrap items-center gap-2">
+      <M3Chip
+        v-for="option in EFFECTS"
+        :key="option"
+        kind="filter"
+        :label="t(`gallery.progress.${option}`)"
+        :selected="effect === option"
+        @update:selected="effect = option"
+      />
+      <M3Button class="ms-auto" variant="tonal" size="s" :disabled="loading" @click="reload">{{
+        t("gallery.progress.reload")
+      }}</M3Button>
+    </div>
+    <M3Skeleton
+      v-if="loading"
+      class="flex flex-col gap-4 [--m3-skeleton-surface:var(--md-sys-color-surface-container-low)]"
+      :effect="effect"
+      :label="t('gallery.progress.loadingCustomers')"
+    >
+      <div v-for="row in 3" :key="row" class="flex items-center gap-4">
+        <M3SkeletonBlock shape="circle" :width="40" />
+        <div class="flex flex-1 flex-col">
+          <M3SkeletonText :lines="1" typescale="body-large" width="45%" />
+          <M3SkeletonText :lines="1" typescale="body-medium" width="30%" />
+        </div>
+      </div>
+    </M3Skeleton>
+    <div v-else class="flex flex-col gap-4">
+      <div v-for="row in 3" :key="row" class="flex items-center gap-4">
+        <M3Shape
+          shape="cookie9Sided"
+          class="size-10 bg-primary-container text-on-primary-container"
+        >
+          <span class="type-title-medium grid size-full place-items-center">{{ row }}</span>
+        </M3Shape>
+        <div class="flex flex-col">
+          <span class="type-body-large text-on-surface">{{
+            t("gallery.progress.customer", { n: row })
+          }}</span>
+          <span class="type-body-medium text-on-surface-variant">{{
+            t("gallery.progress.customerNote", { count: row * 2 })
+          }}</span>
+        </div>
+      </div>
+    </div>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.progress.loading')" :note="t('gallery.progress.loadingNote')">
+    <M3LoadingIndicator :label="t('gallery.loading')" />
+    <M3LoadingIndicator contained :label="t('gallery.loading')" />
+    <M3LoadingIndicator :progress="value" :label="t('gallery.progress.determinate')" />
+    <M3LoadingIndicator contained :size="72" :label="t('gallery.loading')" />
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.progress.linear')"
+    :note="t('gallery.progress.linearNote')"
+    stack
+  >
+    <M3LinearProgress :value="value" :label="t('gallery.progress.determinate')" />
+    <M3LinearProgress :label="t('gallery.progress.indeterminate')" />
+    <M3LinearProgress :value="value" :wavy="false" :label="t('gallery.progress.flat')" />
+    <M3LinearProgress :value="value" :thickness="8" :label="t('gallery.progress.thick')" />
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.progress.circular')" :note="t('gallery.progress.circularNote')">
+    <M3CircularProgress :value="value" :label="t('gallery.progress.determinate')">{{
+      percent
+    }}</M3CircularProgress>
+    <M3CircularProgress :label="t('gallery.progress.indeterminate')" />
+    <M3CircularProgress :value="value" :wavy="false" :label="t('gallery.progress.flat')" />
+    <M3CircularProgress
+      :value="value"
+      gauge
+      :size="120"
+      :thickness="8"
+      :label="t('gallery.progress.gauge')"
+    >
+      <span class="type-title-large-emphasized pt-8">{{ percent }}%</span>
+    </M3CircularProgress>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+
+const { t } = useI18n();
+const percent = ref(62);
+const EFFECTS = ["wave", "pulse"] as const;
+const effect = ref<(typeof EFFECTS)[number]>("wave");
+const loading = ref(true);
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+function reload() {
+  loading.value = true;
+  clearTimeout(timer);
+  timer = setTimeout(() => (loading.value = false), 2400);
+}
+
+onMounted(reload);
+onBeforeUnmount(() => clearTimeout(timer));
+const value = computed(() => percent.value / 100);
+</script>