@cavulsqa/create 2.9.3 → 2.10.1

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

@@ -0,0 +1,103 @@
+<template>
+  <M3PullToRefresh :refresh="refresh" :label="t('gallery.scale.refreshing')" />
+
+  <GalleryBlock
+    :title="t('gallery.scale.virtual')"
+    :note="t('gallery.scale.virtualNote', { count: rows.length })"
+  >
+    <M3Chip :label="t('gallery.scale.rendered', { count: rendered }, rendered)">
+      <template #icon><i-ms-speed-rounded /></template>
+    </M3Chip>
+    <M3Chip :label="t('gallery.scale.refreshed', { count: refreshes })">
+      <template #icon><i-ms-refresh-rounded /></template>
+    </M3Chip>
+  </GalleryBlock>
+
+  <div class="h-3" />
+  <M3VirtualList
+    ref="list"
+    :items="rows"
+    :item-size="74"
+    :item-key="(row) => row.id"
+    inset
+    :label="t('gallery.scale.virtual')"
+  >
+    <template #default="{ item }">
+      <M3ListItem
+        as="div"
+        clickable
+        :headline="item.title"
+        :supporting="item.subtitle"
+        :trailing-text="item.amount"
+      >
+        <template #leading>
+          <M3Shape :shape="item.shape" class="size-10" :class="TONE_CLASSES[item.tone]">
+            <span class="type-label-large">{{ item.initials }}</span>
+          </M3Shape>
+        </template>
+      </M3ListItem>
+    </template>
+  </M3VirtualList>
+</template>
+
+<script setup lang="ts">
+import type { MaterialShapeName } from "@cavulsqa/m3e";
+import type { ComponentPublicInstance } from "vue";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import { TONE_CLASSES, type Tone } from "@/shared/utils/tone";
+
+const { t } = useI18n();
+const snackbar = useSnackbar();
+
+const SHAPES: readonly MaterialShapeName[] = [
+  "cookie9Sided",
+  "clover4Leaf",
+  "pentagon",
+  "sunny",
+  "gem",
+];
+const TONES: readonly Tone[] = ["primary", "secondary", "tertiary"];
+const CITIES = ["Alger", "Oran", "Constantine", "Annaba", "Blida", "Sétif", "Tlemcen", "Béjaïa"];
+const COUNT = 5000;
+const formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
+
+const refreshes = ref(0);
+const rows = shallowRef(build(0));
+
+function build(seed: number) {
+  return Array.from({ length: COUNT }, (_, index) => {
+    const n = (index * 7919 + seed * 104729) % 100000;
+    const city = CITIES[n % CITIES.length]!;
+    return {
+      id: index,
+      title: `${t("gallery.scale.customer")} ${String(index + 1).padStart(4, "0")}`,
+      subtitle: `${city} · ${t("gallery.scale.orders", { count: (n % 40) + 1 }, (n % 40) + 1)}`,
+      amount: formatter.format((n % 9000) + 100),
+      initials: city.slice(0, 2).toUpperCase(),
+      shape: SHAPES[index % SHAPES.length]!,
+      tone: TONES[index % TONES.length]!,
+    };
+  });
+}
+
+/** How many rows are actually in the DOM - the number that proves virtualisation works. */
+const list = useTemplateRef<ComponentPublicInstance>("list");
+const rendered = ref(0);
+let observer: MutationObserver | null = null;
+onMounted(() => {
+  const element = list.value?.$el as HTMLElement | undefined;
+  if (!element) return;
+  const count = () => (rendered.value = element.childElementCount);
+  count();
+  observer = new MutationObserver(count);
+  observer.observe(element, { childList: true });
+});
+onBeforeUnmount(() => observer?.disconnect());
+
+async function refresh() {
+  await new Promise((resolve) => setTimeout(resolve, 1400));
+  refreshes.value += 1;
+  rows.value = build(refreshes.value);
+  void snackbar.show(t("gallery.scale.updated"));
+}
+</script>

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

@@ -0,0 +1,219 @@
+<template>
+  <GalleryBlock
+    :title="t('gallery.selection.switches')"
+    :note="t('gallery.selection.switchesNote')"
+  >
+    <M3Switch v-model="wifi" :label="t('gallery.selection.wifi')" />
+    <M3Switch v-model="bluetooth" icons :label="t('gallery.selection.bluetooth')" />
+    <M3Switch v-model="airplane" both-icons :label="t('gallery.selection.airplane')" />
+    <M3Switch :model-value="true" disabled :label="t('gallery.selection.locked')" />
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.selection.stepper')"
+    :note="t('gallery.selection.stepperNote')"
+    stack
+  >
+    <div class="flex items-center justify-between gap-4">
+      <span class="type-body-large text-on-surface">{{ t("gallery.selection.guests") }}</span>
+      <M3Stepper
+        v-model="guests"
+        :label="t('gallery.selection.guests')"
+        :min="1"
+        :max="12"
+        :decrement-label="t('gallery.selection.decrease')"
+        :increment-label="t('gallery.selection.increase')"
+      />
+    </div>
+    <div class="flex items-center justify-between gap-4">
+      <span class="type-body-large text-on-surface">{{ t("gallery.selection.weight") }}</span>
+      <M3Stepper
+        v-model="weight"
+        variant="tonal"
+        editable
+        :label="t('gallery.selection.weight')"
+        :min="0"
+        :max="50"
+        :step="0.5"
+        :format="(value) => t('gallery.selection.kilos', { value: value.toFixed(1) })"
+        :decrement-label="t('gallery.selection.decrease')"
+        :increment-label="t('gallery.selection.increase')"
+      />
+    </div>
+    <div class="flex items-center justify-between gap-4">
+      <span class="type-body-large text-on-surface">{{ t("gallery.selection.units") }}</span>
+      <M3Stepper
+        v-model="units"
+        size="m"
+        editable
+        :label="t('gallery.selection.units')"
+        :min="0"
+        :max="1000"
+        :decrement-label="t('gallery.selection.decrease')"
+        :increment-label="t('gallery.selection.increase')"
+      />
+    </div>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.selection.smart')"
+    :note="t('gallery.selection.smartNote')"
+    stack
+  >
+    <M3List variant="segmented" class="-mx-1">
+      <M3SmartSelect
+        v-model="deliveryDays"
+        multiple
+        :label="t('gallery.selection.deliveryDays')"
+        :options="dayOptions"
+        :placeholder="t('gallery.selection.none')"
+        :done-label="t('gallery.selection.done')"
+      >
+        <template #leading><i-ms-calendar-month-outline-rounded /></template>
+      </M3SmartSelect>
+      <M3SmartSelect
+        v-model="zone"
+        :label="t('gallery.inputs.wilaya')"
+        :options="WILAYA_OPTIONS"
+        :placeholder="t('gallery.selection.none')"
+        :search-placeholder="t('gallery.selection.searchWilaya')"
+        :no-results-text="t('gallery.inputs.noMatches')"
+      >
+        <template #leading><i-ms-location-on-outline-rounded /></template>
+      </M3SmartSelect>
+    </M3List>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.selection.checks')" :note="t('gallery.selection.checksNote')">
+    <M3Checkbox v-model="terms" :label="t('gallery.selection.terms')" />
+    <M3Checkbox :model-value="false" indeterminate :label="t('gallery.selection.partial')" />
+    <M3Checkbox v-model="invalid" error :label="t('gallery.selection.required')" />
+    <span class="mx-2 h-8 w-px bg-outline-variant" />
+    <M3Radio
+      v-for="size in SIZES"
+      :key="size"
+      v-model="cup"
+      :value="size"
+      :label="t(`gallery.selection.cups.${size}`)"
+    />
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.selection.sliders')"
+    :note="t('gallery.selection.slidersNote')"
+    stack
+  >
+    <M3Slider v-model="volume" :label="t('gallery.selection.volume')" />
+    <M3Slider
+      v-model="steps"
+      :label="t('gallery.selection.steps')"
+      :min="0"
+      :max="10"
+      :step="1"
+      ticks
+      size="s"
+    />
+    <M3Slider v-model="brightness" :label="t('gallery.selection.brightness')" size="m">
+      <template #icon><i-ms-light-mode-outline-rounded /></template>
+    </M3Slider>
+    <M3Slider v-model="brightness" :label="t('gallery.selection.brightness')" size="l" />
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.selection.range')"
+    :note="t('gallery.selection.rangeNote')"
+    stack
+  >
+    <M3RangeSlider
+      v-model:start="priceFrom"
+      v-model:end="priceTo"
+      :min="0"
+      :max="20000"
+      :step="500"
+      :min-distance="1000"
+      :start-label="t('gallery.selection.priceFrom')"
+      :end-label="t('gallery.selection.priceTo')"
+      :format="(v) => money.format(v)"
+    />
+    <p class="type-body-medium m-0 text-on-surface-variant">
+      {{ money.format(priceFrom) }} – {{ money.format(priceTo) }}
+    </p>
+    <M3RangeSlider
+      v-model:start="hourFrom"
+      v-model:end="hourTo"
+      :min="6"
+      :max="22"
+      :step="1"
+      ticks
+      size="s"
+      :start-label="t('gallery.selection.opensAt')"
+      :end-label="t('gallery.selection.closesAt')"
+      :format="(v) => `${v}:00`"
+    />
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.selection.chips')" :note="t('gallery.selection.chipsNote')">
+    <M3Chip
+      v-for="filter in FILTERS"
+      :key="filter"
+      kind="filter"
+      :label="t(`gallery.selection.filters.${filter}`)"
+      :selected="filters.has(filter)"
+      @update:selected="toggleFilter(filter)"
+    />
+    <M3Chip kind="assist" :label="t('gallery.selection.addEvent')" elevated>
+      <template #icon><i-ms-add-rounded /></template>
+    </M3Chip>
+    <M3Chip
+      v-for="tag in tags"
+      :key="tag"
+      kind="input"
+      removable
+      :label="tag"
+      :remove-label="t('gallery.selection.remove')"
+      @remove="tags = tags.filter((entry) => entry !== tag)"
+    />
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import { WILAYA_OPTIONS } from "@/modules/gallery/composables/wilayas";
+
+const { t } = useI18n();
+const SIZES = ["small", "medium", "large"] as const;
+const FILTERS = ["open", "nearby", "rated"] as const;
+
+const wifi = ref(true);
+const bluetooth = ref(false);
+const airplane = ref(false);
+const terms = ref(true);
+const invalid = ref(false);
+const cup = ref<(typeof SIZES)[number]>("medium");
+const volume = ref(40);
+const steps = ref(4);
+const guests = ref(2);
+const DAYS = ["sat", "sun", "mon", "tue", "wed", "thu", "fri"] as const;
+const deliveryDays = ref<string[]>(["sun", "tue", "thu"]);
+const zone = ref<number | null>(16);
+const dayOptions = computed(() =>
+  DAYS.map((day) => ({ value: day, label: t(`gallery.selection.days.${day}`) })),
+);
+const weight = ref(2.5);
+const units = ref(120);
+const brightness = ref(70);
+const priceFrom = ref(2000);
+const priceTo = ref(12000);
+const hourFrom = ref(8);
+const hourTo = ref(18);
+const money = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
+const filters = ref(new Set<(typeof FILTERS)[number]>(["open"]));
+const tags = ref(["Alger", "Oran", "Constantine"]);
+
+function toggleFilter(filter: (typeof FILTERS)[number]) {
+  const next = new Set(filters.value);
+  if (next.has(filter)) next.delete(filter);
+  else next.add(filter);
+  filters.value = next;
+}
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <GalleryBlock :title="t('gallery.shapes.morph')" :note="t('gallery.shapes.morphNote')">
+    <div class="grid w-full place-items-center py-2">
+      <M3ShapeMorph :shape="selected" :rotate="turns * 30" class="size-40 text-primary">
+        <span class="type-label-large text-on-primary">{{ selected }}</span>
+      </M3ShapeMorph>
+    </div>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.shapes.library')" :note="t('gallery.shapes.libraryNote')">
+    <div class="grid w-full grid-cols-[repeat(auto-fill,minmax(4.5rem,1fr))] gap-3">
+      <button
+        v-for="shape in MATERIAL_SHAPES"
+        :key="shape"
+        type="button"
+        class="m3-focus-ring flex flex-col items-center gap-1.5 rounded-md p-1"
+        :aria-pressed="shape === selected"
+        @click="pick(shape)"
+      >
+        <M3Shape
+          :shape="shape"
+          class="size-14 transition-colors duration-200"
+          :class="shape === selected ? 'bg-primary' : 'bg-secondary-container'"
+        />
+        <span class="type-label-small w-full truncate text-center text-on-surface-variant">{{
+          shape
+        }}</span>
+      </button>
+    </div>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import { MATERIAL_SHAPES, type MaterialShapeName } from "@cavulsqa/m3e";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+
+const { t } = useI18n();
+const selected = ref<MaterialShapeName>("cookie9Sided");
+const turns = ref(0);
+const haptics = useHaptics();
+
+function pick(shape: MaterialShapeName) {
+  if (shape === selected.value) return;
+  selected.value = shape;
+  turns.value += 1;
+  haptics.tick();
+}
+</script>

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

@@ -0,0 +1,213 @@
+<template>
+  <GalleryBlock :title="t('gallery.surfaces.cards')" :note="t('gallery.surfaces.cardsNote')" stack>
+    <div class="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-3">
+      <M3Card
+        v-for="variant in CARDS"
+        :key="variant"
+        :variant="variant"
+        clickable
+        @click="tapped(variant)"
+      >
+        <div class="flex flex-col gap-3 p-4">
+          <M3Shape
+            shape="cookie4Sided"
+            class="size-10 bg-tertiary-container text-on-tertiary-container"
+          >
+            <i-ms-star-outline-rounded class="size-5" />
+          </M3Shape>
+          <span class="type-title-medium">{{ variant }}</span>
+          <span class="type-body-medium text-on-surface-variant">{{
+            t("gallery.surfaces.cardText")
+          }}</span>
+        </div>
+      </M3Card>
+    </div>
+  </GalleryBlock>
+
+  <SurfacesContainerTransform />
+
+  <SectionHeader :title="t('gallery.surfaces.segmented')" />
+  <M3List variant="segmented" inset>
+    <M3ListItem
+      v-for="item in ITEMS"
+      :key="item"
+      clickable
+      :headline="t(`gallery.surfaces.items.${item}.title`)"
+      :supporting="t(`gallery.surfaces.items.${item}.text`)"
+      :selected="selected === item"
+      @click="selected = item"
+    >
+      <template #leading><i-ms-inventory-2-outline-rounded /></template>
+      <template #trailing><M3Badge v-if="item === 'inbox'" :count="12" /></template>
+    </M3ListItem>
+  </M3List>
+
+  <SectionHeader :title="t('gallery.surfaces.accordion')" />
+  <p class="type-body-small m-0 px-8 pb-3 text-on-surface-variant">
+    {{ t("gallery.surfaces.accordionNote") }}
+  </p>
+  <M3List variant="segmented" inset accordion>
+    <M3ListItem
+      v-for="question in QUESTIONS"
+      :key="question"
+      :headline="t(`gallery.surfaces.faq.${question}.q`)"
+    >
+      <template #leading><i-ms-help-outline-rounded class="rtl:-scale-x-100" /></template>
+      <template #details>{{ t(`gallery.surfaces.faq.${question}.a`) }}</template>
+    </M3ListItem>
+  </M3List>
+
+  <SectionHeader :title="t('gallery.surfaces.sortable')" />
+  <p class="type-body-small m-0 px-8 pb-3 text-on-surface-variant">
+    {{ t("gallery.surfaces.sortableNote") }}
+  </p>
+  <M3List
+    variant="segmented"
+    inset
+    sortable
+    :reorder-label="t('gallery.surfaces.reorder')"
+    :moved-text="movedText"
+    @sort="(from, to) => (route = moveItem(route, from, to))"
+  >
+    <M3ListItem
+      v-for="(stop, index) in route"
+      :key="stop"
+      :headline="t(`gallery.surfaces.stops.${stop}`)"
+      :supporting="t('gallery.surfaces.stopOrder', { n: index + 1 })"
+    >
+      <template #leading><i-ms-local-shipping-outline-rounded /></template>
+    </M3ListItem>
+  </M3List>
+
+  <SectionHeader :title="t('gallery.surfaces.standard')" />
+  <M3List variant="standard">
+    <M3ListItem :headline="t('gallery.surfaces.wifi')" :supporting="t('gallery.surfaces.wifiText')">
+      <template #action><M3Switch v-model="wifi" :label="t('gallery.surfaces.wifi')" /></template>
+    </M3ListItem>
+    <M3Divider inset="start" />
+    <M3ListItem :headline="t('gallery.surfaces.storage')" trailing-text="12.4 GB" />
+  </M3List>
+
+  <SectionHeader :title="t('gallery.tree.title')" />
+  <p class="type-body-small m-0 px-8 pb-3 text-on-surface-variant">{{ t("gallery.tree.note") }}</p>
+  <div class="mx-4">
+    <M3Tree
+      v-model:selected="category"
+      v-model:expanded="categoriesOpen"
+      :items="categories"
+      :load="loadChildren"
+      :label="t('gallery.tree.categories')"
+      :loading-label="t('gallery.loading')"
+    >
+      <template #icon="{ node, expanded }">
+        <i-ms-folder-open-outline-rounded v-if="expanded" />
+        <i-ms-folder-outline-rounded v-else-if="node.children || node.lazy" />
+        <i-ms-inventory-2-outline-rounded v-else />
+      </template>
+    </M3Tree>
+  </div>
+  <SectionHeader :title="t('gallery.tree.permissions')" />
+  <div class="mx-4">
+    <M3Tree
+      v-model:checked="granted"
+      v-model:expanded="permissionsOpen"
+      mode="check"
+      :items="permissions"
+      :label="t('gallery.tree.permissions')"
+    />
+  </div>
+
+  <SectionHeader :title="t('gallery.surfaces.timeline')" />
+  <div class="px-6 pb-2">
+    <M3Timeline :label="t('gallery.surfaces.tracking')">
+      <M3TimelineItem
+        v-for="step in STEPS"
+        :key="step.id"
+        :title="t(`gallery.surfaces.steps.${step.id}.title`)"
+        :supporting="t(`gallery.surfaces.steps.${step.id}.text`)"
+        :time="step.time"
+        :state="step.state"
+        :state-label="t(`gallery.surfaces.states.${step.state}`)"
+      >
+        <template v-if="step.state === 'current'" #icon
+          ><i-ms-local-shipping-outline-rounded
+        /></template>
+      </M3TimelineItem>
+    </M3Timeline>
+  </div>
+
+  <SectionHeader :title="t('gallery.surfaces.infinite')" />
+  <p class="type-body-small m-0 px-8 pb-3 text-on-surface-variant">
+    {{ t("gallery.surfaces.infiniteNote") }}
+  </p>
+  <M3List variant="segmented" inset>
+    <M3ListItem
+      v-for="order in endless"
+      :key="order"
+      :headline="t('gallery.tabs.order', { n: order })"
+      :supporting="t('gallery.surfaces.page', { n: Math.ceil((order - 5000) / 15) })"
+    >
+      <template #leading><i-ms-receipt-long-outline-rounded /></template>
+    </M3ListItem>
+  </M3List>
+  <M3InfiniteScroll
+    :load="loadMore"
+    :loading-label="t('gallery.surfaces.loadingMore')"
+    :error-text="t('gallery.surfaces.loadFailed')"
+    :retry-label="t('gallery.surfaces.retry')"
+    :end-text="t('gallery.surfaces.allLoaded')"
+  />
+</template>
+
+<script setup lang="ts">
+import { moveItem } from "@cavulsqa/m3e-vue";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import SurfacesContainerTransform from "@/modules/gallery/components/surfaces/SurfacesContainerTransform.vue";
+import { useTreeDemo } from "@/modules/gallery/composables/useTreeDemo";
+
+const { t } = useI18n();
+const snackbar = useSnackbar();
+const CARDS = ["elevated", "filled", "outlined"] as const;
+const ITEMS = ["inbox", "drafts", "archive"] as const;
+const QUESTIONS = ["offline", "sync", "storage", "export"] as const;
+const { categories, permissions, loadChildren } = useTreeDemo();
+const category = ref<string | null>("orange");
+const categoriesOpen = ref(["drinks", "juice"]);
+const granted = ref(["sales.read", "sales.create", "stock.read"]);
+const permissionsOpen = ref(["sales"]);
+const STEPS = [
+  { id: "placed", time: "08:12", state: "done" },
+  { id: "confirmed", time: "08:40", state: "done" },
+  { id: "picked", time: "10:05", state: "done" },
+  { id: "transit", time: "11:20", state: "current" },
+  { id: "delivered", time: "", state: "upcoming" },
+] as const;
+const PAGE = 15;
+const PAGES = 5;
+const endless = ref<number[]>([]);
+let failedOnce = false;
+
+async function loadMore(): Promise<boolean> {
+  await new Promise((resolve) => setTimeout(resolve, 900));
+  const page = endless.value.length / PAGE;
+  if (page === 2 && !failedOnce) {
+    failedOnce = true;
+    throw new Error("simulated network failure");
+  }
+  const start = 5001 + endless.value.length;
+  endless.value = [...endless.value, ...Array.from({ length: PAGE }, (_, i) => start + i)];
+  return page + 1 < PAGES;
+}
+const route = ref(["warehouse", "market", "pharmacy", "school", "bakery"]);
+
+function movedText(label: string, position: number, count: number) {
+  return t("gallery.surfaces.moved", { label, position, count });
+}
+
+const selected = ref<(typeof ITEMS)[number]>("inbox");
+const wifi = ref(true);
+
+function tapped(variant: string) {
+  void snackbar.show(t("gallery.surfaces.tapped", { variant }));
+}
+</script>