griffincss-ui 0.24.0-dev → 0.26.1

package/scss/griffinjs/_track.scss

@@ -10,6 +10,7 @@
 // Движение — здесь. JS пишет только aria-*, data-gr-state и --gr-progress.
 
 @use 'griffincss-core/scss/breakpoints' as bp;
+@use 'griffincss-core/scss/container-mixins' as cq;
 
 .gr-track {
   display: flex;
@@ -45,12 +46,50 @@
   }
 }
 
+// Доля слайда описана один раз: без суффикса — база, с суффиксом
+// брейкпоинта — от ширины окна, с буквой c — от ширины ближайшего предка
+// с .gr-cq (Этап 47d): виджет в слоте меряется слотом. Виджету дорожки
+// всё равно, откуда пришла доля — perView он считает по геометрии.
+@mixin gr-track-per-view($suffix) {
+  @each $n in (1, 2, 3, 4) {
+    .gr-track-#{$n}#{$suffix} > * {
+      flex-basis: calc((100% - var(--gr-gap) * #{$n - 1}) / #{$n});
+    }
+  }
+}
+
 @each $bp-name, $bp-value in bp.$gr-breakpoints {
   @media (width >= $bp-value) {
-    @each $n in (1, 2, 3, 4) {
-      .gr-track-#{$n}-#{$bp-name} > * {
-        flex-basis: calc((100% - var(--gr-gap) * #{$n - 1}) / #{$n});
-      }
+    @include gr-track-per-view('-#{$bp-name}');
+  }
+}
+
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @include cq.gr-container-media($bp-name) {
+    @include gr-track-per-view('-c#{$bp-name}');
+  }
+}
+
+// Лента столбиком в узком гнезде (Этап 47d, фидбек темы griffin, п. 8):
+// подборка товаров в боковой колонке — список, в содержимом — лента.
+// Порог — ширина ближайшего предка с .gr-cq, суффикс называет его
+// (как у .gr-table-stack-c*): .gr-track-stack-csm — столбик, пока гнездо
+// уже 640px. Оконных порогов нет: в узком окне лента остаётся лентой,
+// свайп и есть её мобильный режим. Слайды отпускаются по главной оси —
+// flex-basis: auto бьёт долю .gr-track-N > * тем, что стоит позже: между
+// 640 и 768 px гнезда .gr-track-2-csm и .gr-track-stack-cmd совпадают,
+// и столбик обязан стоять в файле после долей.
+// Слайдеру не подходит: его кнопки и точки останутся на месте.
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @include cq.gr-container-below($bp-name) {
+    .gr-track-stack-c#{$bp-name} {
+      flex-direction: column;
+      overflow-x: visible;
+      scroll-snap-type: none;
+    }
+
+    .gr-track-stack-c#{$bp-name} > * {
+      flex-basis: auto;
     }
   }
 }

package/scss/griffinjs/fields/_datetime.scss

@@ -166,6 +166,13 @@
   outline-offset: -2px;
 }
 
+// Пара «с — по»: дни между концами — той же заливкой, что у наведения,
+// концы — как выбранный день; между ними и по бокам сетки остаётся
+// тот же зазор, что и у всех клеток.
+.gr-datetime-day[data-gr-in-range] {
+  background-color: hsl(var(--gr-hsl-accent), 12%);
+}
+
 .gr-datetime-day[aria-selected="true"] {
   background-color: var(--gr-color-accent);
   color: var(--gr-color-on-accent);

package/scss/griffinjs/fields/_number.scss

@@ -0,0 +1,10 @@
+// GriffinJS — сумма с разрядами (Этап 43b)
+// Своих стилей у поля нет: на экране обычный .gr-input с текстом. Скрытый
+// спутник с числом встаёт сразу за полем (у суммы — всегда, у даты —
+// на указателе мыши), и в .gr-input-group с аддоном после поля он был бы
+// последним ребёнком: до Этапа 45 поле теряло бы скругление края, и его
+// возвращало правило `:has(+ [hidden]:last-child)` здесь. Теперь края
+// группы считаются по видимым полям в самом компоненте (_form.scss,
+// `:nth-last-child(1 of S)`), и спутник, как любой скрытый узел, края
+// не трогает. Файл остаётся в списке сборки пустым: место для стилей поля,
+// если они понадобятся, — здесь, а не в чужом модуле.

package/scss/griffinjs/fields/fields.scss

@@ -14,13 +14,14 @@
 
 
 @use 'sass:meta';
-@layer griffincss.reset, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style;
+@layer griffincss.reset, griffincss.tokens, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style, griffincss.hidden;
 
 // Весь вывод — в griffincss.ui, как у компонентов.
 @layer griffincss.ui {
   @include meta.load-css('counter');
   @include meta.load-css('phone');
   @include meta.load-css('datetime');
+  @include meta.load-css('number');
   @include meta.load-css('file');
   @include meta.load-css('rating');
   @include meta.load-css('otp');

package/scss/griffinjs/griffinjs.scss

@@ -18,7 +18,7 @@
 
 
 @use 'sass:meta';
-@layer griffincss.reset, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style;
+@layer griffincss.reset, griffincss.tokens, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style, griffincss.hidden;
 
 // Весь вывод слоя — в griffincss.ui, как у компонентов.
 @layer griffincss.ui {

package/src/griffincss-ui.js

@@ -1,5 +1,5 @@
 /*!
- * Griffincss UI — Runtime v0.24.0-dev
+ * Griffincss UI — Runtime v0.26.1
  * Опциональный рантайм пакета компонентов. Делает ровно то, чего платформа
  * не даёт вовсе; всё, что умеют <details>, <dialog> и Popover API, остаётся
  * за ними. Без этого файла компоненты работают — просто без перечисленного.
@@ -50,7 +50,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.24.0-dev';
+  var VERSION = '0.26.1';
 
   var OVERLAY_ATTR = 'data-gr-overlay-close';
 

package/src/griffinjs/core/griffinjs-core.js

@@ -1,5 +1,5 @@
 /*!
- * GriffinJS — Core v0.24.0-dev
+ * GriffinJS — Core v0.26.1
  * Опциональный слой виджетов с состоянием поверх Griffincss: слайдер,
  * галерея, лайтбокс, параллакс, мегаменю. Подключается одной строкой
  * и одним файлом; страница без него — законное и рабочее состояние.
@@ -10,8 +10,8 @@
  * поднимает всё, destroy() снимает всё до последнего атрибута.
  *
  * В griffinjs-core.js склеивается только то, без чего не обходится ни один
- * виджет: options, registry, scanner. Остальное из core/ — anchor, media,
- * motion, gesture, track — общие части ВНЕ ядра (Этап 22): ими пользуется
+ * виджет: options, registry, scanner. Остальное из core/ — loader, anchor,
+ * media, motion, gesture, track — общие части ВНЕ ядра (Этап 22): ими пользуется
  * меньшинство, и каждая уезжает своим файлом griffinjs-<часть>.js. Что
  * модуль из этого берёт, он объявляет сам — вторым аргументом defineWidget
  * или needs(); start() сверяет объявленное со сборкой.
@@ -20,6 +20,13 @@
  * window.GriffinJS, а не window.Griffincss — там слияние рантаймов
  * CSS-части, и порядок тегов не значим; слою с состоянием чужой
  * глобал ни к чему.
+ *
+ * Участник жизненного цикла (use) кроме start/destroy может объявить
+ * init(root): ядро зовёт его после подъёма виджетов в корне — и на старте,
+ * и на каждой порции сканера. Так догрузка бандла полей (core/loader.js,
+ * Этап 48c) видит data-gr-<поле> без виджета, не будучи частью ядра.
+ * GriffinJS.config — общий объект настроек: ядру он не нужен, но это
+ * его поверхность, и модуль читает из неё (config.fields у загрузчика).
  */
 (function (factory) {
   'use strict';
@@ -38,7 +45,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.24.0-dev';
+  var VERSION = '0.26.1';
 
   // Реестры. Модуль зовёт defineEngine/defineWidget; ядро — единственное
   // место, которое знает, как их применить.
@@ -61,6 +68,9 @@
 
   var started = false;
 
+  // Настройки — одна поверхность на слой; ядро само ничего отсюда не читает.
+  var config = {};
+
   // Объявление и чтение зависимостей: needs('slider', ['track', 'motion'])
   // записывает, needs('slider') возвращает.
   function needs(name, list) {
@@ -273,6 +283,10 @@
       for (var j = 0; j < nodes.length; j++) mount(nodes[j], name);
     }
 
+    for (var k = 0; k < lifecycle.length; k++) {
+      if (typeof lifecycle[k].init === 'function') lifecycle[k].init(root);
+    }
+
     return api;
   }
 
@@ -332,22 +346,54 @@
 
   // Автостарт: только в браузере и только если его не отключили атрибутом
   // data-auto="false" на теге <script>.
+  //
+  // Момент старта — когда поставка зарегистрирована целиком. Ядро — первый
+  // IIFE бандла, и старт при выполнении собственного файла обгоняет
+  // defineWidget модулей дальше в том же файле; под defer так и было:
+  // readyState уже «interactive», старт шёл сразу, init(document) не
+  // находил ни одного виджета, поздних никто не поднимал (фидбек темы
+  // griffin по 0.26.0, п. 1). Три момента:
+  //   * разбор идёт (loading) — DOMContentLoaded, как прежде;
+  //   * свой тег отложен (defer) — тоже DOMContentLoaded: отложенные теги
+  //     выполняются после разбора и ДО события, значит к нему выполнятся
+  //     и griffinjs-fields.js с griffinjs-countries.js следующими тегами —
+  //     та же схема, что синхронные теги в подвале. Не readystatechange:
+  //     «interactive» наступает ДО отложенных тегов;
+  //   * иначе (документ готов, тег вставлен скриптом) — микрозадачей:
+  //     после текущего файла целиком, до любого следующего тега. Набору
+  //     «ядро + нужное», вставленному скриптом, нужен data-auto="false"
+  //     и GriffinJS.start() после последнего тега.
+  // Тег с defer, вставленный скриптом после DOMContentLoaded, отложенным
+  // не является, и события он не дождётся; страховка от вечного
+  // ожидания — readystatechange: при «interactive» следующее — «complete».
   function autoStart() {
-    try {
-      var script = document.currentScript;
-      if (script && script.getAttribute('data-auto') === 'false') return;
-    } catch (e) { /* currentScript недоступен */ }
+    var script = null;
+
+    try { script = document.currentScript; } catch (e) { /* currentScript недоступен */ }
+
+    if (script && script.getAttribute('data-auto') === 'false') return;
+
+    var deferred = !!script && script.hasAttribute('defer') && !script.hasAttribute('async');
+
+    if (document.readyState === 'loading' || (deferred && document.readyState !== 'complete')) {
+      var ready = function () {
+        document.removeEventListener('DOMContentLoaded', ready);
+        document.removeEventListener('readystatechange', ready);
+        start();
+      };
+
+      document.addEventListener('DOMContentLoaded', ready);
+      if (deferred) document.addEventListener('readystatechange', ready);
 
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', function () { start(); });
       return;
     }
 
-    start();
+    Promise.resolve().then(start);
   }
 
   var api = {
     version: VERSION,
+    config: config,
     engines: engines,
     widgets: widgets,
     defineEngine: defineEngine,

package/src/griffinjs/core/loader.js

@@ -0,0 +1,124 @@
+/*
+ * GriffinJS — догрузка бандла полей по потребности (Этап 48c).
+ *
+ *   <script defer src="griffinjs.js"
+ *           data-fields="griffinjs-fields.js"
+ *           data-countries="griffinjs-countries.js"></script>
+ *
+ *   GriffinJS.config.fields = { src: 'griffinjs-fields.js', countries: 'griffinjs-countries.js' };
+ *
+ * Витрине поля нужны на трёх страницах из трёхсот, а тег бандла стоит
+ * в шаблоне шапки для всех. Вместо тега — путь: встретив data-gr-<поле>
+ * без зарегистрированного виджета, слой вставляет <script> сам — один раз
+ * на документ, с nonce со своего тега (под строгим CSP без него файл
+ * отброшен молча), таблица стран вторым тегом в том же порядке, — и после
+ * загрузки ВСЕХ файлов поднимает поля по документу и шлёт
+ * griffinjs:fields-loaded. Ошибка загрузки — предупреждение, поля остаются
+ * базой без скрипта, второй попытки нет. Без config — предупреждение раз
+ * на имя поля: раньше такое поле молчало.
+ *
+ * Единственное, что здесь известно поимённо, — не виджет, а файл поставки:
+ * девять имён второго бандла, те же, что в списке FIELDS сборки
+ * (scripts/build-griffinjs.mjs; тест сверяет). Ядро о них не знает:
+ * модуль подписывается на init(root) и лежит вне ядра, в SHARED, —
+ * за него не платит набор из двух файлов ради одной подсказки.
+ *
+ * Пути и nonce читаются у своего тега в момент выполнения — позже
+ * document.currentScript уже null. Атрибуты, а не только свойство, —
+ * ради тега с defer: инлайновый скрипт перед ним глобала ещё не видит.
+ */
+(function (G) {
+  'use strict';
+
+  var FIELDS = ['mask', 'phone', 'datetime', 'number', 'file', 'rating', 'otp', 'counter', 'validate'];
+
+  var config = G.config;
+  var nonce = '';
+  var loading = null;   // null — не запрашивали; pending | done | failed
+  var warned = {};      // поле → без config уже сказано
+
+  try {
+    var script = document.currentScript;
+
+    if (script) {
+      nonce = script.nonce || '';
+
+      var src = script.getAttribute('data-fields');
+
+      if (src) config.fields = { src: src, countries: script.getAttribute('data-countries') || '' };
+    }
+  } catch (e) { /* currentScript недоступен */ }
+
+  // Поля в корне, чьих виджетов нет: с config — запрос бандла, без него —
+  // предупреждение. Узлы не трогаются: база без скрипта — рабочее состояние.
+  function check(root) {
+    for (var i = 0; i < FIELDS.length; i++) {
+      var name = FIELDS[i];
+      var selector = '[data-gr-' + name + ']';
+
+      if (G.widgets[name] || warned[name]) continue;
+      if (!(root.matches && root.matches(selector)) && !(root.querySelector && root.querySelector(selector))) continue;
+
+      if (config.fields && config.fields.src) return request();
+
+      warned[name] = true;
+      G.warn('поле «' + name + '» не собрано: подключите griffinjs-fields.js или задайте GriffinJS.config.fields');
+    }
+  }
+
+  // Поля поднимаются после ВСЕХ файлов: телефон читает таблицу стран
+  // при монтировании, и она обязана лечь раньше. Что успело
+  // зарегистрироваться при ошибке, всё равно поднимается.
+  function request() {
+    if (loading) return;
+
+    loading = 'pending';
+
+    var files = [config.fields.src];
+    var ok = true;
+    var left;
+
+    if (config.fields.countries) files.push(config.fields.countries);
+
+    left = files.length;
+
+    function settle(event) {
+      if (event.type === 'error') {
+        ok = false;
+        G.warn('бандл полей не загружен: ' + event.target.src + ' — поля остались базой без скрипта');
+      }
+
+      if (--left) return;
+
+      loading = ok ? 'done' : 'failed';
+      G.init(document);
+
+      if (ok) G.emit('griffinjs:fields-loaded', document, { files: files });
+    }
+
+    for (var i = 0; i < files.length; i++) insert(files[i], settle);
+  }
+
+  // async = false: вставленный скриптом тег по умолчанию async, а порядок
+  // «поля, затем страны» нужен. nonce — свойством: атрибут после разбора
+  // браузер прячет.
+  function insert(src, settle) {
+    var tag = document.createElement('script');
+
+    tag.src = src;
+    tag.async = false;
+    if (nonce) tag.nonce = nonce;
+
+    tag.addEventListener('load', settle);
+    tag.addEventListener('error', settle);
+
+    (document.head || document.documentElement).appendChild(tag);
+  }
+
+  G.loader = {
+    _fields: function () { return FIELDS.slice(); },
+    _nonce: function (value) { if (value !== undefined) nonce = value; return nonce; }
+  };
+
+  G.use({ init: check });
+})(typeof window !== 'undefined' && window.GriffinJS ? window.GriffinJS : require('./griffinjs-core.js'));

package/src/griffinjs/fields/datetime.js

@@ -46,6 +46,22 @@
  * invalid, range — сообщения проверки; label, prev, next, year, time —
  * подписи панели.
  *
+ * Диапазон «с — по» (Этап 43a) — пара нативных полей, связанная атрибутом:
+ *   <input type="date" name="from" data-gr-datetime="to: #until">
+ *   <input type="date" name="until" id="until" data-gr-datetime>
+ * Одного контрола с двумя концами нет намеренно: база без скрипта — два
+ * нативных поля, и панель одного поля пишет одно поле. Связка строится
+ * на готовом: значение «с» становится min у «по», значение «по» — max
+ * у «с», через собственный API соседа (limit), — и проверка границ,
+ * сообщения и aria-disabled в панели работают без новой логики; на тач-
+ * устройстве системный календарь сам скроет недоступное. Авторская
+ * граница остаётся, если она уже; очистка и destroy() возвращают её.
+ * Порядок дат виджет не толкает: «по» раньше «с» — ошибка ввода, и её
+ * показывает проверка границ, а не молчаливая правка второго поля.
+ * Сверх границ — только панель: пустое поле открывается на месяце
+ * соседа, оба конца — aria-selected, дни между ними — data-gr-in-range
+ * (красит CSS панели), и range: {from, to} в detail griffin:change обоих.
+ *
  * Виджет пишет value контрола — расширение инварианта 7, объявленное
  * в docs/griffinjs-architecture.html («Инварианты»).
  */
@@ -209,6 +225,11 @@
     return node;
   }
 
+  function attr(node, name, value) {
+    if (value) node.setAttribute(name, value);
+    else node.removeAttribute(name);
+  }
+
   G.defineWidget('datetime', { needs: ['mask', 'anchor'] }, function (el, opts) {
     var o = G.merge(DEFAULTS, opts);
     var native = el.getAttribute('type');
@@ -241,11 +262,52 @@
     var view = null;       // первое число показанного месяца
     var active = null;     // активный день панели, 'YYYY-MM-DD'
     var last = null;       // последнее ISO, о котором сказано событием
+    var peer = null;       // второе поле пары «с — по»
+    var role = '';         // 'from' | 'to' — кто это поле в паре
+    var own = { min: el.getAttribute('min'), max: el.getAttribute('max') };   // авторские границы
 
     function iso() {
       return companion ? companion.value : el.value;
     }
 
+    // --- Пара «с — по» ------------------------------------------------------------
+
+    function range() {
+      var mine = iso();
+      var theirs = peer.value();
+
+      return role === 'from' ? { from: mine, to: theirs } : { from: theirs, to: mine };
+    }
+
+    // Граница на поле и спутнике; проверка и панель узнают о ней тем же
+    // путём, что о всякой другой.
+    function apply(name, value) {
+      attr(el, name, value);
+
+      if (companion) { attr(companion, name, value); check(); }
+      if (opened && body) render(view);
+    }
+
+    // Граница от соседа: авторская остаётся, если она уже; пустое
+    // значение возвращает авторскую.
+    function limit(name, value) {
+      var mine = own[name];
+
+      apply(name, !value ? mine : mine && (name === 'min' ? mine > value : mine < value) ? mine : value);
+    }
+
+    function push() {
+      if (peer) peer.limit(role === 'from' ? 'min' : 'max', iso());
+    }
+
+    function unpair() {
+      var name = role === 'from' ? 'max' : 'min';
+
+      peer = null;
+      role = '';
+      apply(name, own[name]);
+    }
+
     // --- Проверка ---------------------------------------------------------------
 
     function check() {
@@ -275,7 +337,8 @@
 
       if (value !== last) {
         last = value;
-        G.emit('griffin:change', el, { value: value });
+        G.emit('griffin:change', el, peer ? { value: value, range: range() } : { value: value });
+        push();
       }
     }
 
@@ -365,6 +428,11 @@
       if (companion) open();
     }
 
+    // Нативное поле: значение пишет платформа, и сосед по паре узнаёт о нём здесь.
+    function onNativeInput() {
+      if (!companion) push();
+    }
+
     function onInput() {
       check();
 
@@ -522,7 +590,10 @@
       var m = base.getMonth();
       var offset = (new Date(y, m, 1).getDay() - fd + 7) % 7;
       var start = new Date(y, m, 1 - offset);
-      var selected = dateOf(iso());
+      // Концы отрезка: у одиночного поля оба — его значение.
+      var ends = peer ? range() : { from: iso(), to: iso() };
+      var lo = dateOf(ends.from);
+      var hi = dateOf(ends.to);
       var today = isoDate(new Date());
       var min = dateOf(el.getAttribute('min'));
       var max = dateOf(el.getAttribute('max'));
@@ -543,8 +614,9 @@
           var cell = element('div', 'gr-datetime-day', { role: 'gridcell', id: panel.id + '-' + key, 'data-gr-date': key });
 
           cell.textContent = String(date.getDate());
-          cell.setAttribute('aria-selected', key === selected ? 'true' : 'false');
+          cell.setAttribute('aria-selected', key === lo || key === hi ? 'true' : 'false');
 
+          if (lo && hi && lo < key && key < hi) cell.setAttribute('data-gr-in-range', '');
           if (key === today) cell.setAttribute('aria-current', 'date');
           if ((min && key < min) || (max && key > max)) cell.setAttribute('aria-disabled', 'true');
           if (key === active) { cell.setAttribute('data-gr-state', 'active'); descendant = cell.id; }
@@ -566,7 +638,8 @@
       opened = true;
       active = null;
 
-      var d = dateOf(iso());
+      // Пустое поле пары открывается на месяце соседа.
+      var d = dateOf(iso()) || (peer ? dateOf(peer.value()) : '');
 
       if (body) render(d ? fromIso(d) : new Date());
       if (clock) clock.value = timeOf(iso());
@@ -682,21 +755,33 @@
 
     events.add(el, 'pointerdown', onPointerDown);
     events.add(el, 'click', onClick);
+    events.add(el, 'input', onNativeInput);
 
-    return {
+    var api = {
       el: el,
       open: open,
       close: close,
       value: iso,
       set: function (value) {
         if (companion) write(value);
-        else el.value = value;
+        else { el.value = value; push(); }
       },
+      // Пара: limit — граница от соседа (единственный путь, которым виджет
+      // пишет min/max чужого поля), pair — «other — моё „с“», unpair — развод.
+      limit: limit,
+      pair: function (other) {
+        peer = other;
+        role = 'to';
+        push();
+      },
+      unpair: unpair,
       get panel() { return panel; },
       destroy: function () {
         restore();
         events.removeAll();
 
+        if (peer) { var other = peer; unpair(); other.unpair(); }
+
         if (panel) {
           if (G.anchor) G.anchor.clear(panel);
           panel.remove();
@@ -704,6 +789,18 @@
         }
       }
     };
+
+    // Сосед по паре: уже поднятый — как есть, иначе поднимается здесь;
+    // сканер на нём потом найдёт живой экземпляр.
+    if (o.to && mode !== 'time') {
+      var target = document.querySelector(o.to);
+      var other = target && G.mount(target, 'datetime');
+
+      if (other) { peer = other; role = 'from'; other.pair(api); push(); }
+      else G.warn('datetime: поле «по» не найдено — ' + o.to);
+    }
+
+    return api;
   });
 
   G.datetime = { layout: layout, parse: parse, format: format };