orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/manufacturers/ManufacturerIndex.vue

@@ -0,0 +1,495 @@
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import {
+    manufacturerAlphabet,
+    manufacturerIndexLabels,
+  } from '@/utils/orionplace/manufacturerIndex';
+  import { safePublicUrl } from '@/utils/orionplace/presentation';
+  import OrionplaceImage from '@/components/orionplace/shared/OrionplaceImage.vue';
+  import '@/components/orionplace/shared/features.css';
+  import type {
+    IManufacturerIndexState,
+    TManufacturerAlphabet,
+  } from '@/interfaces/orionplace/catalog/ICatalogDirectory';
+  import OrionplaceEmptyState from '@/components/orionplace/shared/OrionplaceEmptyState.vue';
+
+  const props         = withDefaults(
+    defineProps<{
+      state: IManufacturerIndexState;
+      disabled?: boolean;
+      headingLevel?: 1 | 2 | 3;
+    }>(),
+    { disabled: false, headingLevel: 3 },
+  );
+  const emit          = defineEmits<{
+    load: [];
+    retry: [];
+    selectAlphabet: [alphabet: TManufacturerAlphabet];
+    selectLetter: [letter: string];
+    selectManufacturer: [manufacturerId: number];
+  }>();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const mode           = ref<TManufacturerAlphabet>('en');
+  const copy           = computed(() => manufacturerIndexLabels(selectionStore.localeCode));
+  const alphabet       = computed(() => manufacturerAlphabet(mode.value));
+  const modes          = [
+    { value: 'en', label: 'A–Z' },
+    { value: 'ru', label: 'А–Я' },
+    { value: 'num', label: '0–9' },
+  ] as const;
+  const collator      = computed(() => new Intl.Collator(selectionStore.localeCode));
+  const groups        = computed(() =>
+    props.state.groups
+      .map((group) => ({
+        ...group,
+        manufactures: [...group.manufactures].sort((a, b) =>
+          collator.value.compare(a.name, b.name),
+        ),
+      }))
+      .sort((a, b) => collator.value.compare(a.letter, b.letter)),
+  );
+  const visibleGroups = computed(() =>
+    groups.value.filter((group) => alphabet.value.includes(group.letter)),
+  );
+  const logos         = computed(() => {
+    const unique = new Map(
+      groups.value
+        .flatMap((group) => group.manufactures)
+        .map((item) => [item.id, item]),
+    );
+    return [...unique.values()]
+      .filter(
+        (item) => safePublicUrl(item.small_image) || safePublicUrl(item.image),
+      )
+      .sort((a, b) => collator.value.compare(a.name, b.name));
+  });
+  const total         = computed(() =>
+    props.state.groups.reduce(
+      (count, group) => count + group.c_manufactures,
+      0,
+    ),
+  );
+
+  function selectAlphabet(value: TManufacturerAlphabet) {
+    mode.value = value;
+    emit('selectAlphabet', value);
+  }
+</script>
+
+<template>
+  <section
+    class="manufacturer-index"
+    :aria-busy="state.pending"
+    data-feature-part="ManufacturerIndex"
+  >
+    <header class="manufacturer-index-title">
+      <component :is="`h${headingLevel}`">
+        {{ copy.title }}
+      </component>
+      <span
+        v-if="state.loaded"
+        :aria-label="`${copy.total}: ${total}`"
+      >
+        {{ total }}
+      </span>
+    </header>
+    <p
+      v-if="state.pending"
+      class="manufacturer-state op-feature-loading"
+      role="status"
+    >
+      <span class="sr-only">{{ copy.loading }}</span>
+    </p>
+    <div
+      v-else-if="state.error"
+      class="manufacturer-state"
+      role="alert"
+    >
+      <p class="op-notice op-notice-error">{{ state.error }}</p>
+      <button
+        type="button"
+        :disabled="disabled"
+        @click="emit('retry')"
+      >
+        {{ copy.retry }}
+      </button>
+    </div>
+    <div
+      v-else-if="!state.loaded"
+      class="manufacturer-state"
+    >
+      <button
+        type="button"
+        :disabled="disabled"
+        @click="emit('load')"
+      >
+        {{ copy.load }}
+      </button>
+    </div>
+    <OrionplaceEmptyState
+      v-else-if="!groups.length"
+      role="status"
+      kind="search"
+      :message="copy.empty"
+    />
+    <template v-else>
+      <div
+        v-if="logos.length"
+        class="manufacturer-logos"
+        :aria-label="copy.logos"
+      >
+        <button
+          v-for="item in logos"
+          :key="item.id"
+          type="button"
+          :title="item.name"
+          :aria-label="item.name"
+          @click="emit('selectManufacturer', item.id)"
+        >
+          <OrionplaceImage
+            :src="safePublicUrl(item.small_image) || item.image"
+            :alt="item.name"
+          />
+        </button>
+      </div>
+      <nav
+        class="manufacturer-alphabet"
+        :aria-label="copy.alphabet"
+      >
+        <div class="manufacturer-modes">
+          <button
+            v-for="item in modes"
+            :key="item.value"
+            type="button"
+            :aria-pressed="mode === item.value"
+            @click="selectAlphabet(item.value)"
+          >
+            {{ item.label }}
+          </button>
+        </div>
+        <div class="manufacturer-letters">
+          <button
+            v-for="letter in alphabet"
+            :key="letter"
+            type="button"
+            @click="emit('selectLetter', letter)"
+          >
+            {{ letter }}
+          </button>
+        </div>
+      </nav>
+      <OrionplaceEmptyState
+        v-if="!visibleGroups.length"
+        role="status"
+        kind="search"
+        size="compact"
+        :message="copy.emptyAlphabet"
+      />
+      <section
+        v-for="group in visibleGroups"
+        :key="group.letter"
+        class="manufacturer-group"
+      >
+        <header>
+          <component :is="`h${headingLevel + 1}`">
+            {{ group.letter }}
+          </component>
+          <span>{{ group.c_manufactures }}</span>
+          <button
+            type="button"
+            :aria-label="`${copy.allOn} ${group.letter}`"
+            @click="emit('selectLetter', group.letter)"
+          >
+            {{ copy.all }}
+            <span aria-hidden="true">→</span>
+          </button>
+        </header>
+        <ul>
+          <li
+            v-for="item in group.manufactures"
+            :key="item.id"
+          >
+            <button
+              type="button"
+              @click="emit('selectManufacturer', item.id)"
+            >
+              {{ item.name }}
+            </button>
+          </li>
+        </ul>
+      </section>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+  .manufacturer-index {
+    display: grid;
+    gap: 32px;
+    min-width: 0;
+    color: var(--orionplace-text);
+    container-type: inline-size;
+  }
+
+  .manufacturer-index-title,
+  .manufacturer-group header {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+  }
+
+  .manufacturer-index h1,
+  .manufacturer-index h2,
+  .manufacturer-index h3,
+  .manufacturer-index h4 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .manufacturer-index h1 {
+    font-size: 24px;
+  }
+
+  /* The index's own width, as the other page titles. */
+  @container (min-width: 592px) {
+    .manufacturer-index h1 {
+      font-size: 30px;
+    }
+  }
+
+  .manufacturer-index header > span {
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--orionplace-muted);
+  }
+
+  .manufacturer-index button {
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: 0;
+    padding: 8px 12px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: 400;
+  }
+
+  .manufacturer-index button:focus-visible {
+    background: var(--orionplace-hover);
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    .manufacturer-index button:hover {
+      background: var(--orionplace-hover);
+      outline: none;
+    }
+  }
+
+  .manufacturer-index button:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .manufacturer-state {
+    display: grid;
+    min-height: 100px;
+    place-content: center;
+    justify-items: center;
+    gap: 16px;
+    margin: 0;
+    color: var(--orionplace-muted);
+    text-align: center;
+  }
+
+  .manufacturer-state p {
+    margin: 0;
+  }
+
+  .manufacturer-state button {
+    min-height: 44px;
+    padding: 0 24px;
+    border-color: var(--orionplace-text);
+    color: var(--orionplace-text);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .manufacturer-logos {
+    display: grid;
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    gap: 8px;
+    max-height: 240px;
+    overflow: auto;
+  }
+
+  .manufacturer-logos button {
+    display: grid;
+    place-items: center;
+    min-width: 0;
+    aspect-ratio: 1 / 1;
+    height: auto;
+    padding: 16px;
+    border-color: var(--orionplace-border);
+    background: var(--orionplace-surface);
+  }
+
+  .manufacturer-logos button:focus-visible {
+    border-color: var(--orionplace-text);
+    background: var(--orionplace-surface);
+  }
+
+  @media (hover: hover) {
+    .manufacturer-logos button:hover {
+      border-color: var(--orionplace-text);
+      background: var(--orionplace-surface);
+    }
+  }
+
+  .manufacturer-logos :deep(img),
+  .manufacturer-logos :deep([data-image-placeholder]) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .manufacturer-alphabet {
+    display: grid;
+    gap: 12px;
+  }
+
+  .manufacturer-modes,
+  .manufacturer-letters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .manufacturer-modes button {
+    min-height: 36px;
+    padding: 0 12px;
+    border-color: var(--orionplace-border);
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .manufacturer-modes button[aria-pressed='true'] {
+    border-color: var(--orionplace-accent);
+    background: var(--orionplace-accent);
+    color: var(--orionplace-surface);
+  }
+
+  .manufacturer-letters button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border-color: var(--orionplace-border);
+    font-size: 13px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  .manufacturer-letters button:focus-visible {
+    border-color: var(--orionplace-text);
+    background: var(--orionplace-surface);
+  }
+
+  @media (hover: hover) {
+    .manufacturer-letters button:hover {
+      border-color: var(--orionplace-text);
+      background: var(--orionplace-surface);
+    }
+  }
+
+  .manufacturer-group {
+    display: grid;
+    gap: 12px;
+    padding-top: 20px;
+    border-top: 1px solid var(--orionplace-border);
+  }
+
+  .manufacturer-group header > button {
+    margin-left: auto;
+    padding: 0 0 2px;
+    border: 0;
+    border-bottom: 1px solid currentColor;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .manufacturer-group header > button:focus-visible {
+    background: transparent;
+    color: var(--orionplace-muted);
+  }
+
+  @media (hover: hover) {
+    .manufacturer-group header > button:hover {
+      background: transparent;
+      color: var(--orionplace-muted);
+    }
+  }
+
+  .manufacturer-group ul {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 0 12px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .manufacturer-group li,
+  .manufacturer-group li button {
+    min-width: 0;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    overflow-wrap: anywhere;
+    font-size: 14px;
+  }
+
+  .manufacturer-group li button {
+    padding: 8px 0;
+  }
+
+  .manufacturer-group li button:focus-visible {
+    background: transparent;
+    color: var(--orionplace-muted);
+  }
+
+  @media (hover: hover) {
+    .manufacturer-group li button:hover {
+      background: transparent;
+      color: var(--orionplace-muted);
+    }
+  }
+
+  @container (max-width: 900px) {
+    .manufacturer-logos {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+
+  @container (max-width: 620px) {
+    .manufacturer-logos {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .manufacturer-group ul {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+</style>

package/templates/app/components/orionplace/manufacturers/StorefrontManufacturers.README.md

@@ -0,0 +1,30 @@
+# StorefrontManufacturers · Nuxt
+
+Alphabetical index, letter-based lists and manufacturer details.
+
+The supplied storefront uses this component at `/manufacturers`.
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/manufacturers) ·
+[Russian guide](https://orionmarket.place/ru/sandbox/components/nuxt/manufacturers)
+
+## Contract and dependencies
+
+Opening loads `ManufacturerIndex` groups through `manufactures_manufactures_list_get`. Choosing a letter calls `manufactures_manufactures_get` with `name_starts`, loading a page of entries at a time. Search changes the name prefix and returns to page one.
+
+Choosing a manufacturer calls the same method with `filters.id`, displaying its name, image and localized `brand_pitch`. Product links open search with `product_manufacture = [id]`. Back returns to the alphabetical index.
+
+A letter, a manufacturer and Back open their own address (`?prefix=D`, `?manufacturer=5`, the index), and a name search replaces the letter's address, so the browser's Back steps back through the views. The page passes `prefix` and `manufacturerId` from the address and recreates the component when either changes.
+
+The guide describes its inputs and events. Source is maintained in
+`app/components/orionplace/manufacturers/StorefrontManufacturers.vue`; the primary interface is `app/interfaces/orionplace/catalog/ICatalogDirectory.ts`.
+
+The configured Nuxt starter initializes Application Load and its named API client.
+Component-source ZIPs contain imported children, types,
+composables, labels and styles. The included `orionplace/COMPONENT-DOWNLOAD.md`
+describes dependencies, theme and consumer configuration. Standalone file
+copying requires the same dependencies. Links to storefront routes use the
+pages supplied by the full starter.
+
+## Endpoint coverage
+
+- `manufactures_manufactures_get`
+- `manufactures_manufactures_list_get`