@cavulsqa/create 2.9.2 → 2.10.0

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

@@ -0,0 +1,219 @@
+<template>
+  <InputsAccount />
+  <InputsVerification />
+  <InputsTags />
+
+  <GalleryBlock
+    :title="t('gallery.inputs.searchView')"
+    :note="t('gallery.inputs.searchViewNote')"
+    stack
+  >
+    <M3SearchView
+      v-model="customerQuery"
+      :placeholder="t('gallery.inputs.searchCustomers')"
+      :back-label="t('shell.back')"
+      :clear-label="t('gallery.inputs.clear')"
+    >
+      <template #trailing>
+        <M3IconButton :label="t('gallery.inputs.voice')"><i-ms-mic-outline-rounded /></M3IconButton>
+      </template>
+      <template #default="{ query: term }">
+        <M3List variant="standard" :label="t('gallery.inputs.searchCustomers')">
+          <template v-if="term">
+            <M3ListItem
+              v-for="customer in matches(term)"
+              :key="customer"
+              clickable
+              :headline="customer"
+              @click="customerQuery = customer"
+            >
+              <template #leading><i-ms-person-outline-rounded /></template>
+            </M3ListItem>
+            <M3ListItem
+              v-if="matches(term).length === 0"
+              :headline="t('gallery.inputs.noMatches')"
+            />
+          </template>
+          <template v-else>
+            <M3ListItem
+              v-for="recent in RECENT"
+              :key="recent"
+              clickable
+              :headline="recent"
+              @click="customerQuery = recent"
+            >
+              <template #leading><i-ms-history-rounded /></template>
+            </M3ListItem>
+          </template>
+        </M3List>
+      </template>
+    </M3SearchView>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.inputs.search')" :note="t('gallery.inputs.searchNote')" stack>
+    <M3SearchBar
+      v-model="query"
+      :placeholder="t('gallery.inputs.searchPlaceholder')"
+      :clear-label="t('gallery.inputs.clear')"
+    >
+      <template #trailing>
+        <M3IconButton :label="t('gallery.inputs.voice')"><i-ms-mic-outline-rounded /></M3IconButton>
+      </template>
+    </M3SearchBar>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.inputs.dropdown')"
+    :note="t('gallery.inputs.dropdownNote')"
+    stack
+  >
+    <M3ExposedDropdown
+      v-model="status"
+      :label="t('gallery.inputs.status')"
+      :options="statusOptions"
+    />
+    <M3ExposedDropdown
+      v-model="wilaya"
+      editable
+      variant="outlined"
+      :label="t('gallery.inputs.wilaya')"
+      :supporting="t('gallery.inputs.wilayaHint')"
+      :options="WILAYA_OPTIONS"
+      :no-results-text="t('gallery.inputs.noMatches')"
+      :results-text="resultsText"
+    >
+      <template #leading><i-ms-location-on-outline-rounded /></template>
+    </M3ExposedDropdown>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.inputs.filled')" :note="t('gallery.inputs.filledNote')" stack>
+    <M3TextField
+      v-model="name"
+      :label="t('gallery.inputs.name')"
+      :supporting="t('gallery.inputs.nameHint')"
+      autocomplete="name"
+    >
+      <template #leading><i-ms-person-outline-rounded /></template>
+    </M3TextField>
+    <M3TextField
+      v-model="amount"
+      :label="t('gallery.inputs.amount')"
+      inputmode="decimal"
+      suffix="DA"
+      :error="amountError"
+    />
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.inputs.outlined')"
+    :note="t('gallery.inputs.outlinedNote')"
+    stack
+  >
+    <M3TextField
+      v-model="email"
+      variant="outlined"
+      :label="t('gallery.inputs.email')"
+      type="email"
+      autocomplete="email"
+    />
+    <M3TextField
+      v-model="note"
+      variant="outlined"
+      multiline
+      :rows="3"
+      :maxlength="140"
+      :label="t('gallery.inputs.note')"
+    />
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.inputs.richText')"
+    :note="t('gallery.inputs.richTextNote')"
+    stack
+  >
+    <M3TextEditor
+      v-model="report"
+      :label="t('gallery.inputs.report')"
+      :placeholder="t('gallery.inputs.reportPlaceholder')"
+      :labels="editorLabels"
+      :link-label="t('gallery.inputs.linkAddress')"
+      :apply-label="t('gallery.inputs.apply')"
+      :remove-link-label="t('gallery.inputs.removeLink')"
+      :invalid-link-text="t('gallery.inputs.invalidLink')"
+    />
+    <p class="type-body-small m-0 text-on-surface-variant">
+      {{ t("gallery.inputs.stored", { n: report.length }) }}
+    </p>
+  </GalleryBlock>
+
+  <GalleryProofOfDelivery />
+</template>
+
+<script setup lang="ts">
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import GalleryProofOfDelivery from "@/modules/gallery/components/GalleryProofOfDelivery.vue";
+import InputsAccount from "@/modules/gallery/components/inputs/InputsAccount.vue";
+import InputsTags from "@/modules/gallery/components/inputs/InputsTags.vue";
+import InputsVerification from "@/modules/gallery/components/inputs/InputsVerification.vue";
+import { WILAYA_OPTIONS } from "@/modules/gallery/composables/wilayas";
+
+const { t } = useI18n();
+const report = ref(
+  "<p>Visited <b>Supérette El Feth</b>: the shelf was restocked.</p><ul><li>Orange 1L - 12 cases</li><li>Apple 1L - 6 cases</li></ul>",
+);
+const editorLabels = computed(() => ({
+  bold: t("gallery.inputs.commands.bold"),
+  italic: t("gallery.inputs.commands.italic"),
+  underline: t("gallery.inputs.commands.underline"),
+  strikeThrough: t("gallery.inputs.commands.strikeThrough"),
+  insertUnorderedList: t("gallery.inputs.commands.bulleted"),
+  insertOrderedList: t("gallery.inputs.commands.numbered"),
+  link: t("gallery.inputs.commands.link"),
+  removeFormat: t("gallery.inputs.commands.clear"),
+}));
+const query = ref("");
+const customerQuery = ref("");
+const CUSTOMERS = [
+  "Alger Distribution",
+  "Annaba Market",
+  "Béjaïa Foods",
+  "Blida Wholesale",
+  "Constantine Retail",
+  "Oran Hypermarché",
+  "Sétif Grocers",
+  "Tlemcen Pharma",
+];
+const RECENT = ["Oran", "Constantine Retail", "Blida"];
+const matches = (term: string) => {
+  const needle = term.trim().toLocaleLowerCase();
+  return CUSTOMERS.filter((customer) => customer.toLocaleLowerCase().includes(needle));
+};
+const STATUSES = ["draft", "confirmed", "delivered", "cancelled"] as const;
+const status = ref<(typeof STATUSES)[number] | null>("confirmed");
+const wilaya = ref<number | null>(31);
+const statusOptions = computed(() =>
+  STATUSES.map((value) => ({
+    value,
+    label: t(`gallery.inputs.statuses.${value}`),
+    disabled: value === "cancelled",
+  })),
+);
+const resultsText = (count: number) => t("gallery.inputs.results", { count }, count);
+const name = ref("");
+const amount = ref("12,5x");
+const email = ref("");
+const note = ref("");
+
+const amountError = computed(() =>
+  /^\d+([.,]\d{1,2})?$/.test(amount.value) || amount.value === ""
+    ? undefined
+    : t("gallery.inputs.amountInvalid"),
+);
+</script>
+
+<style scoped>
+/* The outlined field's floating label cuts its notch from the surface it sits on. */
+section {
+  --m3-text-field-notch: var(--md-sys-color-surface-container-low);
+}
+</style>

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

@@ -0,0 +1,141 @@
+<template>
+  <GalleryBlock
+    :title="t('gallery.navigation.primaryTabs')"
+    :note="t('gallery.navigation.primaryTabsNote')"
+    stack
+  >
+    <M3Tabs v-model="primary" :label="t('gallery.navigation.primaryTabs')">
+      <M3Tab value="flights" :label="t('gallery.navigation.flights')">
+        <template #icon><i-ms-local-shipping-outline-rounded /></template>
+      </M3Tab>
+      <M3Tab value="trips" :label="t('gallery.navigation.trips')">
+        <template #icon><i-ms-bookmark-outline-rounded /></template>
+      </M3Tab>
+      <M3Tab value="explore" :label="t('gallery.navigation.explore')">
+        <template #icon><i-ms-search-rounded /></template>
+      </M3Tab>
+    </M3Tabs>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.navigation.secondaryTabs')"
+    :note="t('gallery.navigation.secondaryTabsNote')"
+    stack
+  >
+    <M3Tabs
+      v-model="secondary"
+      variant="secondary"
+      scrollable
+      :label="t('gallery.navigation.secondaryTabs')"
+    >
+      <M3Tab
+        v-for="tab in SCROLLING"
+        :key="tab"
+        :value="tab"
+        :label="t(`gallery.navigation.months.${tab}`)"
+      />
+    </M3Tabs>
+  </GalleryBlock>
+
+  <GalleryBlock :title="t('gallery.navigation.bar')" :note="t('gallery.navigation.barNote')" stack>
+    <div class="overflow-hidden rounded-md">
+      <M3NavigationBar
+        v-model="bar"
+        layout="vertical"
+        class="pb-0!"
+        :label="t('gallery.navigation.bar')"
+      >
+        <M3NavigationItem value="inbox" :label="t('gallery.navigation.inbox')" :badge="3">
+          <template #icon="{ selected }"
+            ><i-ms-home-rounded v-if="selected" /><i-ms-home-outline-rounded v-else
+          /></template>
+        </M3NavigationItem>
+        <M3NavigationItem value="starred" :label="t('gallery.navigation.starred')">
+          <template #icon="{ selected }"
+            ><i-ms-star-rounded v-if="selected" /><i-ms-star-outline-rounded v-else
+          /></template>
+        </M3NavigationItem>
+        <M3NavigationItem value="saved" :label="t('gallery.navigation.saved')" badge>
+          <template #icon="{ selected }"
+            ><i-ms-bookmark-rounded v-if="selected" /><i-ms-bookmark-outline-rounded v-else
+          /></template>
+        </M3NavigationItem>
+      </M3NavigationBar>
+    </div>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.navigation.toolbar')"
+    :note="t('gallery.navigation.toolbarNote')"
+    stack
+  >
+    <div class="flex justify-center">
+      <M3FloatingToolbar
+        position="static"
+        :variant="vibrant ? 'vibrant' : 'standard'"
+        :label="t('gallery.navigation.toolbar')"
+      >
+        <M3IconButton :label="t('gallery.buttons.bold')"><i-ms-format-bold-rounded /></M3IconButton>
+        <M3IconButton :label="t('gallery.buttons.italic')"
+          ><i-ms-format-italic-rounded
+        /></M3IconButton>
+        <M3IconButton :label="t('gallery.buttons.underline')"
+          ><i-ms-format-underlined-rounded
+        /></M3IconButton>
+        <M3IconButton
+          v-model:selected="vibrant"
+          toggle
+          variant="filled"
+          :label="t('gallery.navigation.vibrant')"
+        >
+          <i-ms-palette-outline-rounded />
+        </M3IconButton>
+        <template #fab>
+          <M3Fab :label="t('gallery.fabs.compose')" color="tertiary-container"
+            ><i-ms-add-rounded
+          /></M3Fab>
+        </template>
+      </M3FloatingToolbar>
+    </div>
+  </GalleryBlock>
+
+  <GalleryBlock
+    :title="t('gallery.navigation.breadcrumbs')"
+    :note="t('gallery.navigation.breadcrumbsNote')"
+    stack
+  >
+    <M3Breadcrumbs
+      :items="trail"
+      :label="t('gallery.navigation.breadcrumbs')"
+      :more-label="t('gallery.navigation.moreLevels')"
+      @select="(_, index) => (depth = index + 1)"
+    />
+    <div class="flex flex-wrap gap-2">
+      <M3Button variant="tonal" size="s" :disabled="depth >= CATALOGUE.length" @click="depth += 1">
+        {{ t("gallery.navigation.deeper") }}
+      </M3Button>
+      <M3Button variant="text" size="s" :disabled="depth <= 1" @click="depth = 1">
+        {{ t("gallery.navigation.top") }}
+      </M3Button>
+    </div>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+
+const { t } = useI18n();
+const CATALOGUE = ["catalogue", "beverages", "juices", "brand", "orange", "pack"] as const;
+const depth = ref<number>(CATALOGUE.length);
+const trail = computed(() =>
+  CATALOGUE.slice(0, depth.value).map((level) => ({
+    label: t(`gallery.navigation.levels.${level}`),
+  })),
+);
+const SCROLLING = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug"] as const;
+
+const primary = ref("flights");
+const secondary = ref<string>("mar");
+const bar = ref("inbox");
+const vibrant = ref(false);
+</script>