orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/search/SearchFilters.README.md

@@ -1,109 +0,0 @@
-# SearchFilters · React
-
-## English
-
-Interactive filters from the first confirmed `products_search` selector set.
-
-## Contract and dependencies
-
-The component reads `searchFacets` and `searchFilters` from the isolated React
-browse store. Its parent owns `products_search`: every committed change updates
-`searchFilters` first and calls `onChange` with a separate copy of the complete
-selection. The component does not issue requests.
-
-`facets` and `selection` can supply the same values directly for a server-loaded
-page. When `selection` is supplied, the parent replaces it after `onChange`;
-this controlled path keeps the filter controls identical in server HTML and
-hydration. Omitting these props keeps the browse store as the source.
-
-Category, seller, manufacturer and `variant_:id` groups use the IDs supplied by
-the facets. Names use the selected locale. Valid variant colors are visible as
-swatches. Counts appear only when Application Load enables
-`visual_settings.show_filter_counters`. Single-seller mode removes the seller
-group and seller-rating choice. `hideCategories` removes the category group;
-`fixedFilters` removes every condition already fixed by the page scope.
-
-The selected currency's `measures.min_price` and `max_price` define the price
-range. Apply sends `price_from`, `price_to` and `price_currency` only when the
-customer narrows that range. Selecting the complete range removes those three
-fields. Changing currency also removes only those price fields and reports the
-new selection, leaving every other filter intact.
-
-Minimum discount is converted to `price_discount_from`, the highest price
-multiplier: 20 percent becomes `0.8`; an empty or zero value removes the
-condition. The additional checkboxes set `avg_raiting_from = 4.5`,
-`owner_rating_from = 4.5` and `c_aprooved_feedbacks_from = 1` when their
-corresponding choices are available.
-All names retain the API's physical spelling.
-
-`disabled` disables every editable control. When the confirmed selector set has
-no usable group, price range, discount or additional choice, the component
-shows the shared compact search empty state.
-
-Source is maintained in `components/orionplace/search/SearchFilters.tsx`; the
-physical interfaces are in
-`interfaces/orionplace/products/IProductSearchFacets.ts`.
-
-### Props
-
-| Prop                                                    | Meaning                                                                                  |
-| ------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
-| `disabled?: boolean`                                    | Disables the component controls and prevents new actions.                                |
-| `hideCategories?: boolean`                              | Hides the category filter because the page already fixes the category.                   |
-| `fixedFilters?: readonly string[]`                      | Conditions fixed by the page scope and therefore hidden from editable filters.           |
-| `facets?: IProductSearchFacets`                         | Filter choices returned by the confirmed product search.                                 |
-| `selection?: ProductFacetSelection`                     | Current controlled selection.                                                            |
-| `onChange?: (selection: ProductFacetSelection) => void` | Passes a copy of the selected filters after storing them in `searchFilters`. The application performs a search with these values. |
-
-## Русский
-
-Компонент показывает интерактивные фильтры из первого подтверждённого набора
-вариантов `products_search`.
-
-Компонент читает `searchFacets` и `searchFilters` из отдельного React browse
-store. Запросом `products_search` управляет родитель: каждое подтверждённое
-изменение сначала обновляет `searchFilters`, затем вызывает `onChange` с
-отдельной копией всего набора условий. Сам компонент запросы не выполняет.
-
-`facets` и `selection` могут передать те же значения напрямую для страницы,
-загруженной на сервере. Если передан `selection`, родитель заменяет его после
-`onChange`; управляемый режим сохраняет одинаковые элементы фильтров в серверном
-HTML и после гидратации. Без этих свойств источником остаётся browse store.
-
-Группы категорий, продавцов, производителей и `variant_:id` используют ID из
-полученных вариантов. Названия соответствуют выбранному языку. Допустимый цвет
-варианта показан образцом. Счётчики видны, только когда в Application Load
-включено `visual_settings.show_filter_counters`. Режим одного продавца скрывает
-группу продавцов и фильтр их рейтинга. `hideCategories` скрывает категории, а
-`fixedFilters` — каждое условие, которое уже зафиксировано страницей.
-
-Диапазон цены задают `measures.min_price` и `max_price` выбранной валюты. После
-сужения диапазона передаются `price_from`, `price_to` и `price_currency`. Полный
-диапазон удаляет эти три поля. Смена валюты также удаляет только поля цены,
-сообщает родителю новый набор и сохраняет остальные фильтры.
-
-Минимальная скидка преобразуется в `price_discount_from` — наибольший
-множитель цены: 20 процентов дают значение `0.8`, пустое или нулевое значение
-удаляет условие. Дополнительные флажки задают `avg_raiting_from = 4.5`,
-`owner_rating_from = 4.5` и `c_aprooved_feedbacks_from = 1`, когда
-соответствующие варианты доступны.
-Физическое написание полей API сохранено.
-
-`disabled` блокирует все редактируемые элементы. Если в подтверждённом наборе
-нет доступных групп, диапазона цены, скидки или дополнительных условий,
-используется общий компактный вид пустого поиска.
-
-Исходный файл: `components/orionplace/search/SearchFilters.tsx`; физические
-интерфейсы находятся в
-`interfaces/orionplace/products/IProductSearchFacets.ts`.
-
-### Свойства
-
-| Свойство                                                | Назначение                                                                                       |
-| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `disabled?: boolean`                                    | Блокирует элементы компонента и новые действия.                                                  |
-| `hideCategories?: boolean`                              | Скрывает фильтр категорий, когда категория уже задана страницей.                                 |
-| `fixedFilters?: readonly string[]`                      | Условия, заданные страницей и скрытые из редактируемых фильтров.                                 |
-| `facets?: IProductSearchFacets`                         | Варианты фильтров из подтверждённого поиска товаров.                                             |
-| `selection?: ProductFacetSelection`                     | Текущий управляемый выбор.                                                                       |
-| `onChange?: (selection: ProductFacetSelection) => void` | Передаёт копию выбранных фильтров после записи в `searchFilters`. Приложение выполняет поиск с этими значениями. |

package/templates/components/orionplace/search/SearchFilters.module.css

@@ -1,274 +0,0 @@
-.root {
-  display: grid;
-  gap: 1.5rem;
-  color: var(--orionplace-text);
-  font: inherit;
-}
-
-.root > :first-child,
-.root > form:first-child > .group {
-  border-top-width: 0;
-}
-
-.group {
-  min-width: 0;
-  margin: 0;
-  padding: 1.25rem 0 0;
-  border: 0;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.group legend {
-  float: left;
-  width: 100%;
-  margin-bottom: 0.75rem;
-  padding: 0;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-/* Price and More filters keep more room under the title, as in Nuxt. */
-.spaced legend {
-  margin-bottom: 1rem;
-}
-
-.priceInputs {
-  display: grid;
-  clear: both;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.5rem;
-}
-
-.priceInputs label,
-.discount {
-  display: grid;
-  min-width: 0;
-  gap: 0.5rem;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.priceInputs input,
-.discount input {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  min-height: 2.75rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-transform: none;
-  letter-spacing: normal;
-  outline: none;
-}
-
-.priceInputs input:focus-visible,
-.discount input:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-.slider {
-  position: relative;
-  height: 1.25rem;
-  margin: 1.25rem 0;
-}
-
-.slider::before {
-  position: absolute;
-  inset: 0.6rem 0 auto;
-  height: 1px;
-  background: var(--orionplace-border);
-  content: '';
-}
-
-.slider input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 1.25rem;
-  margin: 0;
-  appearance: none;
-  background: transparent;
-  outline: none;
-  pointer-events: none;
-}
-
-.slider input::-webkit-slider-thumb {
-  width: 1rem;
-  height: 1rem;
-  appearance: none;
-  border: 2px solid var(--orionplace-accent);
-  border-radius: 50%;
-  background: var(--orionplace-surface);
-  cursor: pointer;
-  pointer-events: auto;
-}
-
-.slider input::-moz-range-thumb {
-  width: 0.75rem;
-  height: 0.75rem;
-  border: 2px solid var(--orionplace-accent);
-  border-radius: 50%;
-  background: var(--orionplace-surface);
-  cursor: pointer;
-  pointer-events: auto;
-}
-
-.button {
-  display: inline-flex;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1rem;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: transparent;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
-}
-
-.button:focus-visible {
-  background: var(--orionplace-hover);
-  outline: none;
-}
-
-@media (hover: hover) {
-  .button:hover {
-    background: var(--orionplace-hover);
-    outline: none;
-  }
-}
-
-.options {
-  display: grid;
-  clear: both;
-  max-height: 15rem;
-  overflow-y: auto;
-}
-
-.options label {
-  display: flex;
-  min-height: 3rem;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.375rem 0.25rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  cursor: pointer;
-}
-
-.special {
-  display: flex;
-  min-height: 2.25rem;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0 0.25rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  cursor: pointer;
-}
-
-.options label:focus-within {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .options label:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.options input,
-.special input {
-  box-sizing: border-box;
-  width: 1rem;
-  height: 1rem;
-  margin: 0;
-  flex: 0 0 auto;
-  appearance: none;
-  border: 1px solid var(--orionplace-muted);
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  cursor: pointer;
-  outline: none;
-}
-
-.options input:checked,
-.special input:checked {
-  border-color: var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  box-shadow: inset 0 0 0 3px var(--orionplace-surface);
-}
-
-.options input:focus-visible,
-.special input:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .options input:hover,
-  .special input:hover {
-    border-color: var(--orionplace-text);
-  }
-}
-
-.group:disabled input {
-  cursor: default;
-  opacity: 0.4;
-}
-
-.swatch {
-  width: 1.25rem;
-  height: 1.25rem;
-  flex: 0 0 auto;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 50%;
-}
-
-.optionTitle {
-  min-width: 0;
-  flex: 1;
-}
-
-.count {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.additional {
-  display: grid;
-  clear: both;
-  gap: 1rem;
-}
-
-.group[data-filter-additional] legend {
-  margin-bottom: 1rem;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .options input,
-  .special input {
-    transition: none;
-  }
-}