griffincss-ui 0.24.0-dev → 0.25.0-dev

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 };

package/src/griffinjs/fields/number.js

@@ -0,0 +1,327 @@
+/*
+ * GriffinJS — сумма с разрядами (Этап 43b).
+ *
+ *   <input class="gr-input" type="text" inputmode="decimal" name="amount"
+ *          min="0" max="1000000" data-gr-number="decimals: 2">
+ *
+ * На экране — текст с разделителями разрядов по локали документа
+ * («1 250 000,50» при lang="ru", «1,250,000.50» при lang="en"), число
+ * в точечной записи («1250000.50») — в скрытом спутнике с прежним именем:
+ * тот же приём, что у даты. type="number" разрядов не показывает,
+ * inputmode не форматирует, а маска знает только фиксированные слоты —
+ * поэтому это отдельное поле, а не режим маски.
+ *
+ * Разбор принимает любую запись: разделитель дроби — последний из «,»
+ * и «.», если это знак дроби локали или чужой знак не с тремя цифрами
+ * за ним («1.250.000» в ru — разряды, «1250.50» — дробь); знак разрядов
+ * локали дробью не бывает («1,250,000» и «1,25» в en), кроме записи,
+ * где разряды уже разделены пробелами («1 250 000,50»). Всё остальное,
+ * кроме цифр и минуса в начале, отбрасывается; минус принимается, только
+ * если min не задан или отрицателен. Лишние цифры дроби отбрасываются,
+ * не округляются: сумма — то, что набрано, а не то, что посчитано.
+ *
+ * Каретка — счётом принятых знаков слева от неё, как в маске: правки
+ * перехватываются в beforeinput, значение пишется целиком, Backspace
+ * и Delete перешагивают разделители разрядов. На композиции, автозаполнении
+ * и отмене виджет отступает и приводит значение к формату по input —
+ * единственный случай, когда каретка уходит в конец.
+ *
+ * Границы min/max с поля переезжают в спутник: там, где платформа умеет,
+ * сообщение о выходе за них берётся у неё, иначе — из параметра range.
+ * Красным (aria-invalid) — только по уходу фокуса, светлеет, как только
+ * значение вернулось в границы. Пустое поле — required платформы.
+ * Дробь дополняется нулями до decimals по уходу фокуса и при записи
+ * из API; спутник несёт число как есть. destroy() возвращает имя
+ * и число в поле и снимает всё своё.
+ *
+ * Валюта и единица — не здесь: .gr-input-addon рядом. База без скрипта —
+ * обычное текстовое поле: сервер получит то, что набрано, разбор на
+ * сервере обязателен в любом случае.
+ *
+ * Виджет пишет value и валидность контрола — расширение инварианта 7,
+ * объявленное в docs/griffinjs-architecture.html («Инварианты»).
+ */
+(function (G) {
+  'use strict';
+
+  var DEFAULTS = { decimals: 0, range: 'Значение вне допустимых границ' };
+
+  function lang() {
+    return (document.documentElement && document.documentElement.getAttribute('lang'))
+      || (typeof navigator !== 'undefined' && navigator.language) || 'en';
+  }
+
+  var known = {};
+
+  // Знаки локали: разряды и дробь — из Intl; цифры всегда латинские,
+  // иначе разбор не узнал бы собственный вывод. Считается раз на локаль.
+  function marks(locale) {
+    if (known[locale]) return known[locale];
+
+    var group = '';
+    var decimal = '.';
+    var nf;
+
+    try {
+      nf = new Intl.NumberFormat(locale, { numberingSystem: 'latn' });
+    } catch (e) {
+      nf = new Intl.NumberFormat('en');
+    }
+
+    var parts = nf.formatToParts(12345.6);
+
+    for (var i = 0; i < parts.length; i++) {
+      if (parts[i].type === 'group') group = parts[i].value;
+      if (parts[i].type === 'decimal') decimal = parts[i].value;
+    }
+
+    return (known[locale] = { group: group, decimal: decimal, nf: nf });
+  }
+
+  // Текст → {neg, int, frac, point, value}: value — число в точечной
+  // записи или пустая строка; point — знак дроби набран (дробь может быть
+  // ещё пустой). Ведущие нули снимаются.
+  function parse(text, locale, decimals, signed) {
+    var m = marks(locale);
+    var s = String(text || '');
+    var neg = signed && /^\s*[-\u2212]/.test(s);
+    var at = Math.max(s.lastIndexOf(','), s.lastIndexOf('.'));
+    var point = false;
+
+    if (at !== -1) {
+      var ch = s.charAt(at);
+      var after = s.slice(at + 1).replace(/\D/g, '').length;
+
+      // Знак разрядов локали — дробь, только если разряды в тексте уже
+      // разделены пробелами: «1 250 000,50» из русского буфера в en.
+      point = ch === m.decimal || (after !== 3 && (ch !== m.group || /\d[\s\u00a0\u202f]\d/.test(s)));
+    }
+
+    var head = point ? s.slice(0, at) : s;
+    var int = head.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
+    var frac = point ? s.slice(at + 1).replace(/\D/g, '').slice(0, decimals) : '';
+
+    if (!decimals) point = false;
+    if (!int && frac) int = '0';
+
+    return {
+      neg: neg, int: int, frac: frac, point: point,
+      value: int ? (neg ? '-' : '') + int + (frac ? '.' + frac : '') : ''
+    };
+  }
+
+  // Разбор → текст на экране: разряды — у Intl, дробь — как набрана
+  // (pad — дополнена нулями до decimals).
+  function format(p, locale, decimals, pad) {
+    var m = marks(locale);
+    var out = p.neg ? '-' : '';
+
+    if (p.int) out += m.nf.format(Number(p.int));
+
+    var frac = p.frac;
+
+    if (pad && p.int && decimals) while (frac.length < decimals) frac += '0';
+    if (frac || (p.point && !pad)) out += m.decimal + frac;
+
+    return out;
+  }
+
+  function fire(el, type) {
+    try {
+      el.dispatchEvent(new Event(type, { bubbles: true }));
+    } catch (e) { /* окружение без Event */ }
+  }
+
+  G.defineWidget('number', function (el, opts) {
+    var o = G.merge(DEFAULTS, opts);
+    var attrs = G.recorder();
+    var events = G.listeners();
+    var locale = lang();
+    var decimals = o.decimals > 0 ? o.decimals : 0;
+    var signed = !(parseFloat(el.getAttribute('min')) >= 0);
+    var significant = new RegExp('[\\d\\-\\u2212' + marks(locale).decimal.replace(/[.\\]/g, '\\$&') + ']');
+    var companion = null;
+    var last = null;      // последнее записанное значение на экране
+    var told = null;      // последнее число, о котором сказано событием
+    var focused = null;   // значение на момент фокуса — для change
+    var bad = false;      // вне границ
+
+    // Позиция каретки за k-м принятым знаком.
+    function caret(text, k) {
+      for (var i = 0; i < text.length && k > 0; i++) if (significant.test(text.charAt(i))) k--;
+
+      return i;
+    }
+
+    function size(text) {
+      var p = parse(text, locale, decimals, signed);
+
+      return (p.neg ? 1 : 0) + p.int.length + (p.point ? 1 : 0) + p.frac.length;
+    }
+
+    function check() {
+      var value = companion.value;
+      var message = '';
+
+      if (value) {
+        if (companion.validity) {
+          if (!companion.validity.valid) message = companion.validationMessage || o.range;
+        } else {
+          var min = parseFloat(el.getAttribute('min'));
+          var max = parseFloat(el.getAttribute('max'));
+          var n = parseFloat(value);
+
+          if (n < min || n > max) message = o.range;
+        }
+      }
+
+      bad = !!message;
+      if (typeof el.setCustomValidity === 'function') el.setCustomValidity(message);
+      if (!bad) attrs.set(el, 'aria-invalid', null);
+
+      // О первом значении — с разметки — не сообщается: его никто не менял.
+      if (value !== told) {
+        var first = told === null;
+
+        told = value;
+        if (!first) G.emit('griffin:change', el, { value: value });
+      }
+    }
+
+    // Запись: текст на экране, число в спутнике, каретка за k-м знаком
+    // (без k каретка не трогается — при записи вне фокуса ей всё равно).
+    function write(text, k, pad) {
+      var p = parse(text, locale, decimals, signed);
+      var next = format(p, locale, decimals, pad);
+
+      if (el.value !== next) el.value = next;
+      last = next;
+      companion.value = p.value;
+      check();
+
+      if (k !== undefined && typeof el.setSelectionRange === 'function') {
+        var at = caret(next, k);
+
+        el.setSelectionRange(at, at);
+      }
+    }
+
+    // Позиция знака, который снимает Backspace (последний перед кареткой)
+    // и Delete (первый от каретки); разделители между ними перешагиваются.
+    function before(at) {
+      while (at > 0 && !significant.test(el.value.charAt(at - 1))) at--;
+
+      return at > 0 ? at - 1 : 0;
+    }
+
+    function after(at) {
+      var text = el.value;
+
+      while (at < text.length && !significant.test(text.charAt(at))) at++;
+
+      return at < text.length ? at + 1 : at;
+    }
+
+    function onBeforeInput(event) {
+      var type = event.inputType || '';
+
+      if (event.isComposing || type.indexOf('Composition') !== -1) return;
+
+      var start = el.selectionStart;
+      var end = el.selectionEnd;
+
+      if (typeof start !== 'number' || typeof end !== 'number') return;
+
+      var insert = '';
+
+      if (type === 'insertText' || type === 'insertFromPaste' || type === 'insertFromDrop') {
+        insert = event.data || (event.dataTransfer ? event.dataTransfer.getData('text') : '') || '';
+      } else if (type === 'deleteContentBackward') {
+        if (start === end) start = before(start);
+      } else if (type === 'deleteContentForward' || type === 'deleteByCut') {
+        if (start === end) end = after(end);
+      } else {
+        return;
+      }
+
+      event.preventDefault();
+
+      var text = el.value;
+      var head = text.slice(0, start) + insert;
+      var was = el.value;
+
+      write(head + text.slice(end), size(head));
+
+      if (el.value !== was) fire(el, 'input');
+    }
+
+    function onInput(event) {
+      if (event.isComposing) return;
+      if (el.value !== last) write(el.value);
+    }
+
+    function onCompositionEnd() {
+      write(el.value);
+    }
+
+    function onFocus() {
+      focused = el.value;
+    }
+
+    function onBlur() {
+      write(el.value, undefined, true);
+
+      if (bad) attrs.set(el, 'aria-invalid', 'true');
+      if (focused !== null && el.value !== focused) fire(el, 'change');
+      focused = null;
+    }
+
+    // Спутник: число под прежним именем и границы — платформа проверяет их сама.
+    companion = document.createElement('input');
+    companion.setAttribute('type', 'number');
+    companion.setAttribute('hidden', '');
+    companion.setAttribute('step', el.getAttribute('step') || 'any');
+
+    for (var i = 0, copy = ['name', 'min', 'max']; i < copy.length; i++) {
+      var v = el.getAttribute(copy[i]);
+
+      if (v !== null) companion.setAttribute(copy[i], v);
+    }
+
+    el.parentNode.insertBefore(companion, el.nextSibling);
+    attrs.set(el, 'name', null);
+    if (!el.getAttribute('inputmode')) attrs.set(el, 'inputmode', 'decimal');
+
+    events.add(el, 'beforeinput', onBeforeInput);
+    events.add(el, 'input', onInput);
+    events.add(el, 'compositionend', onCompositionEnd);
+    events.add(el, 'focus', onFocus);
+    events.add(el, 'blur', onBlur);
+
+    write(el.value, undefined, true);
+
+    return {
+      el: el,
+      value: function () { return companion.value; },
+      set: function (value) {
+        var was = el.value;
+
+        write(String(value), undefined, true);
+        if (el.value !== was) fire(el, 'input');
+      },
+      destroy: function () {
+        events.removeAll();
+
+        var value = companion.value;
+
+        companion.remove();
+        attrs.restore();
+        el.value = value;
+
+        if (typeof el.setCustomValidity === 'function') el.setCustomValidity('');
+      }
+    };
+  });
+
+  G.number = { parse: parse, format: format, marks: marks };
+})(typeof window !== 'undefined' && window.GriffinJS ? window.GriffinJS : require('../core/griffinjs-core.js'));

package/src/griffinjs/widgets/combobox.js

@@ -39,6 +39,13 @@
  * удаление тега или Backspace в пустом поле снимает выбор. Значение всегда
  * в <select> — форма отправляет его как без скрипта; о смене он сообщает
  * событием change.
+ *
+ * Свободные теги (Этап 42f) — флаг free рядом с multiple: Enter на непустом
+ * поле без активной позиции создаёт <option selected> со значением, равным
+ * тексту (ключевые слова, адреса писем). Дубликата по значению нет —
+ * существующая позиция просто выбирается. На сервер значение уходит
+ * текстом, проверять его — там. Без multiple флаг смысла не имеет: текст
+ * поля и есть значение, — и пропускается с предупреждением.
  */
 (function (G) {
   'use strict';
@@ -54,6 +61,7 @@
     highlight: true,
     cache: true,
     multiple: false,  // выбранное — теги, значение — в <select multiple>
+    free: false,      // Enter без позиции — новый тег из текста (только с multiple)
     remove: 'Убрать {label}'
   };
 
@@ -137,6 +145,7 @@
     var choice = o.multiple ? el.querySelector('select[multiple]') : null;
 
     if (o.multiple && !choice) throw new Error('для multiple нужен <select multiple> внутри');
+    if (o.free && !choice) { G.warn('комбобокс: free без multiple смысла не имеет — флаг пропущен'); o.free = false; }
 
     var list = el.querySelector('[role="listbox"]');
     var created = false;
@@ -452,8 +461,12 @@
         activate(key === 'Home' ? 0 : items.length - 1, true);
         event.preventDefault();
       } else if (key === 'Enter') {
-        if (!opened || active < 0) return;
-        select(active);
+        var text = input.value.trim();
+
+        if (opened && active >= 0) select(active);
+        else if (o.free && text) { add(text, text); input.value = ''; close(); }
+        else return;
+
         event.preventDefault();
       } else if (key === 'Escape') {
         if (!opened) return;