@1337exp/taoui 1.11.6 → 1.13.0

package/README.md

@@ -40,12 +40,12 @@ change a handful of CSS variables and the whole kit follows.
 - **TaoSwitch** — boolean toggle (`role="switch"`)
 - **TaoRadio** / **TaoRadioGroup** — classic radios: longer labels, can stack vertically
 - **TaoSegmented** / **TaoSegmentedOption** — compact exclusive choice among 2–5 short options. Not tabs
-- **TaoSelect** — dropdown with keyboard, same chrome as Input. Clear via “Clear” in the list or Delete
-- **TaoCombobox** — Select with a field: type to filter, `allow-create` writes a custom value into `v-model`, `create` lets the parent append the list
+- **TaoSelect** — dropdown with keyboard, same chrome as Input. `size` (`small` / `medium` / `large`, same scale as Button). Clear via “Clear” in the list or Delete; `clearable="false"` turns clearing off, `#clear` replaces the row content
+- **TaoCombobox** — Select with a field: type to filter, `allow-create` writes a custom value into `v-model`, `create` lets the parent append the list. Takes the same `size`, `clearable` and `#clear` as `TaoSelect`
 - **TaoDate** — a single day: `YYYY-MM-DD`, no time, no timezone. Calendar popup like Select
 - **TaoDateRange** — a period: `v-model` is `{ start, end }` or `null`. First click is start, second is end (they swap if end is earlier). An incomplete pick is not written to the model
 - **TaoFormField** — shared label / hint / error for form controls
-- **TaoInputNumber** — number with min/max/step and ± on the right. Empty value is `null`
+- **TaoInputNumber** — number with min/max/step and ± on the right. Empty value is `null`. `@commit` fires once when an edit is finished (blur, Enter, ±, arrow), unlike `v-model`, which updates on every keystroke
 - **TaoQuantity** — cart quantity: `− | field | +`, integers, stock; minus at the minimum can remove the row
 - **TaoTextarea** — autosizing multiline. `maxlength` caps input, `count` shows “entered / max”
 - **TaoPinCode** — N cells. By default a click clears the cell and everything to the right (`clear-on="focus"`); `clear-on="input"` replaces the digit only when typing. The last cell blurs and emits `complete`
@@ -269,6 +269,16 @@ confirm.defaults({ ok: 'Yes', cancel: 'No' })
 
 `TaoSelect` opens from the keyboard (arrows, Enter, Esc); the list flips at the viewport edge. Delete or “Clear” at the bottom of the list resets the value to `null`.
 
+When `null` is not a valid value (a grid step, a sort order), pass `:clearable="false"`: the clear row and the Delete / Backspace shortcut disappear. The clear row label is `clear-text`; for an icon or any markup use the `#clear` slot. `size` is `small` / `medium` (default) / `large` and also scales the open list.
+
+```vue
+<TaoSelect v-model="step" :options="steps" size="small" :clearable="false" />
+
+<TaoSelect v-model="city" :options="cities">
+  <template #clear><TaoIcon name="close" /> Reset</template>
+</TaoSelect>
+```
+
 `TaoCombobox` is the same menu with a field. Typing filters options. `allow-create` writes the typed string into `v-model` when there is no exact match. The list does not mutate itself: listen to `create` and append an option from the parent.
 
 `TaoFormField` also wraps `TaoTextarea`, `TaoCheckbox`, `TaoSwitch`, `TaoRadioGroup`, and `TaoSegmented` — id, hint, and error are forwarded for you.
@@ -481,6 +491,7 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 - `--tao-radius-control`, `--tao-radius-panel` — radii (small controls vs large panels)
 - `--tao-shadow-panel`, `--tao-shadow-overlay` — shadows
 - `--tao-font-size-*` — type scale in `primitives.css`: `xs`–`xl` controls, `2xl`–`4xl` titles / prose
+- `--tao-control-height-small` / `-medium` / `-large` — one height scale (26 / 36 / 44px) for every control with `size`: Button, Segmented, Select, Combobox. `--tao-field-height` (= medium) is the height of fields without `size`: Input, InputNumber, Date, DateRange, Quantity
 
 The full list lives in `src/styles/semantic.css` — the only file worth opening
 to see the whole theming API.

package/README.ru.md

@@ -40,12 +40,12 @@
 - **TaoSwitch** — переключатель для булевых настроек (`role="switch"`)
 - **TaoRadio** / **TaoRadioGroup** — классические радиокнопки: длинные подписи, можно столбиком
 - **TaoSegmented** / **TaoSegmentedOption** — компактный выбор из 2–5 коротких вариантов. Не вкладки
-- **TaoSelect** — выпадающий список с клавиатурой, тот же визуал, что у Input. Сброс — «Очистить» в списке или Delete
-- **TaoCombobox** — Select с полем: фильтр по вводу, `allow-create` пишет своё в `v-model`, `create` — чтобы родитель дополнил список
+- **TaoSelect** — выпадающий список с клавиатурой, тот же визуал, что у Input. `size` (`small` / `medium` / `large`, та же шкала, что у Button). Сброс — «Очистить» в списке или Delete; `clearable="false"` отключает сброс, слот `#clear` заменяет содержимое строки
+- **TaoCombobox** — Select с полем: фильтр по вводу, `allow-create` пишет своё в `v-model`, `create` — чтобы родитель дополнил список. Те же `size`, `clearable` и `#clear`, что у `TaoSelect`
 - **TaoDate** — один день: `YYYY-MM-DD`, без часов и пояса. Календарь как у Select
 - **TaoDateRange** — период: `v-model` — `{ start, end }` или `null`. Первый клик — начало, второй — конец (если конец раньше — меняются местами). Неполный выбор в модель не пишется
 - **TaoFormField** — общие label / hint / error для полей формы
-- **TaoInputNumber** — число с min/max/step и кнопками ± справа. Пустое значение — `null`
+- **TaoInputNumber** — число с min/max/step и кнопками ± справа. Пустое значение — `null`. `@commit` срабатывает один раз, когда правка закончена (blur, Enter, ±, стрелка), в отличие от `v-model`, который обновляется на каждую клавишу
 - **TaoQuantity** — количество в корзине: `− | поле | +`, целые штуки, сток, минус на минимуме может убрать строку
 - **TaoTextarea** — многострочное поле с авто-высотой. `maxlength` ограничивает ввод, `count` показывает «введено / максимум»
 - **TaoPinCode** — пин-код из N полей. По умолчанию клик стирает ячейку и все справа (`clear-on="focus"`); `clear-on="input"` заменяет цифру только при вводе. Последняя ячейка снимает фокус и эмитит `complete`
@@ -270,6 +270,16 @@ confirm.defaults({ ok: 'Yes', cancel: 'No' })
 
 `TaoSelect` открывается с клавиатуры (стрелки, Enter, Esc), список переворачивается у края экрана. Delete или «Очистить» внизу списка сбрасывает значение в `null`.
 
+Если `null` не допустим (шаг сетки, порядок сортировки), передайте `:clearable="false"`: строка сброса и Delete / Backspace пропадут. Подпись строки сброса — `clear-text`, для иконки или своей разметки есть слот `#clear`. `size` — `small` / `medium` (по умолчанию) / `large`, масштабирует и раскрытый список.
+
+```vue
+<TaoSelect v-model="step" :options="steps" size="small" :clearable="false" />
+
+<TaoSelect v-model="city" :options="cities">
+  <template #clear><TaoIcon name="close" /> Сбросить</template>
+</TaoSelect>
+```
+
 `TaoCombobox` — то же меню, но с полем. Печатаете — варианты режутся. `allow-create` пишет введённое в `v-model`, если точного совпадения нет. Список сам не меняется: слушайте `create` и добавьте option снаружи.
 
 `TaoFormField` также оборачивает `TaoTextarea`, `TaoCheckbox`, `TaoSwitch`, `TaoRadioGroup` и `TaoSegmented` — id, hint и error прокидываются сами.
@@ -484,6 +494,7 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 - `--tao-radius-control`, `--tao-radius-panel` — скругления (мелкие контролы vs крупные панели)
 - `--tao-shadow-panel`, `--tao-shadow-overlay` — тени
 - `--tao-font-size-*` — шкала кегля в `primitives.css`: `xs`–`xl` контролы, `2xl`–`4xl` заголовки / проза
+- `--tao-control-height-small` / `-medium` / `-large` — единая шкала высот (26 / 36 / 44px) для всех контролов с `size`: Button, Segmented, Select, Combobox. `--tao-field-height` (= medium) — высота полей без `size`: Input, InputNumber, Date, DateRange, Quantity
 
 Полный список — в `src/styles/semantic.css`, он же единственный файл,
 который стоит открыть, чтобы понять весь доступный API темизации.

package/dist/index.cjs

@@ -67,7 +67,7 @@
     }
     return target;
   };
-  const TaoButton = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-1e1847ba"]]);
+  const TaoButton = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-8966c285"]]);
   const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoBlock" },
     __name: "TaoBlock",
@@ -193,7 +193,7 @@
       };
     }
   });
-  const TaoInput = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-8e122e7e"]]);
+  const TaoInput = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-e0d2a454"]]);
   const _hoisted_1$N = {
     key: 0,
     class: "tao-input-group__addon tao-input-group__addon--before"
@@ -263,7 +263,7 @@
       incrementLabel: { default: "Увеличить" },
       decrementLabel: { default: "Уменьшить" }
     },
-    emits: ["update:modelValue", "blur", "focus"],
+    emits: ["update:modelValue", "commit", "blur", "focus"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -331,9 +331,8 @@
       function commit(value) {
         const next = value === null ? null : clamp(value);
         emit("update:modelValue", next);
-        if (!focused.value) {
-          draft.value = toDraft(next);
-        }
+        draft.value = toDraft(next);
+        emit("commit", next);
       }
       function bump(direction) {
         if (props.disabled) {
@@ -364,6 +363,11 @@
         emit("blur", event);
       }
       function onKeydown(event) {
+        if (event.key === "Enter") {
+          const parsed = parseDraft(draft.value);
+          commit(parsed === "incomplete" ? null : parsed);
+          return;
+        }
         if (event.key === "ArrowUp") {
           event.preventDefault();
           bump(1);
@@ -434,7 +438,7 @@
       };
     }
   });
-  const TaoInputNumber = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-f2141b0c"]]);
+  const TaoInputNumber = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-4614f4ff"]]);
   const _hoisted_1$L = ["aria-label", "disabled"];
   const _hoisted_2$E = { "aria-hidden": "true" };
   const _hoisted_3$x = ["id", "value", "disabled", "aria-invalid", "aria-describedby", "aria-valuenow", "aria-valuemin", "aria-valuemax"];
@@ -620,7 +624,7 @@
       };
     }
   });
-  const TaoQuantity = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-821124cf"]]);
+  const TaoQuantity = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-17b4aada"]]);
   const _hoisted_1$K = {
     key: 0,
     class: "tao-card__cover"
@@ -3941,7 +3945,9 @@
       placeholder: { default: "Выберите" },
       disabled: { type: Boolean, default: false },
       error: { type: Boolean, default: false },
-      clearText: { default: "Очистить" }
+      clearText: { default: "Очистить" },
+      clearable: { type: Boolean, default: true },
+      size: { default: "medium" }
     },
     emits: ["update:modelValue", "change"],
     setup(__props, { emit: __emit }) {
@@ -4045,7 +4051,7 @@
         if (props.disabled) {
           return;
         }
-        if ((event.key === "Backspace" || event.key === "Delete") && selected.value) {
+        if ((event.key === "Backspace" || event.key === "Delete") && selected.value && props.clearable) {
           event.preventDefault();
           clear();
           return;
@@ -4086,7 +4092,7 @@
           return;
         }
         if (event.key === "Backspace" || event.key === "Delete") {
-          if (selected.value) {
+          if (selected.value && props.clearable) {
             event.preventDefault();
             clear();
           }
@@ -4132,7 +4138,7 @@
       return (_ctx, _cache) => {
         var _a;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["tao-select", { "tao-select--open": open.value, "tao-select--invalid": invalid.value }])
+          class: vue.normalizeClass(["tao-select", [`tao-select--${__props.size}`, { "tao-select--open": open.value, "tao-select--invalid": invalid.value }]])
         }, [
           vue.createElementVNode("button", {
             id: controlId.value,
@@ -4163,7 +4169,7 @@
               key: 0,
               ref_key: "panelRef",
               ref: panelRef,
-              class: "tao-select__panel",
+              class: vue.normalizeClass(["tao-select__panel", `tao-select__panel--${__props.size}`]),
               style: vue.normalizeStyle(listStyle.value)
             }, [
               vue.createElementVNode("ul", {
@@ -4196,7 +4202,7 @@
                   }, vue.toDisplayString(option.label), 43, _hoisted_4$h);
                 }), 128))
               ], 40, _hoisted_3$i),
-              selected.value ? (vue.openBlock(), vue.createElementBlock("button", {
+              __props.clearable && selected.value ? (vue.openBlock(), vue.createElementBlock("button", {
                 key: 0,
                 type: "button",
                 class: "tao-select__clear",
@@ -4208,13 +4214,13 @@
                   vue.createTextVNode(vue.toDisplayString(__props.clearText), 1)
                 ], true)
               ], 32)) : vue.createCommentVNode("", true)
-            ], 4)) : vue.createCommentVNode("", true)
+            ], 6)) : vue.createCommentVNode("", true)
           ]))
         ], 2);
       };
     }
   });
-  const TaoSelect = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-854360a4"]]);
+  const TaoSelect = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-e067dbde"]]);
   const _hoisted_1$n = ["id", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby", "disabled", "placeholder", "value"];
   const _hoisted_2$l = {
     key: 0,
@@ -4232,6 +4238,8 @@
       error: { type: Boolean, default: false },
       emptyText: { default: "Ничего не найдено" },
       clearText: { default: "Очистить" },
+      clearable: { type: Boolean, default: true },
+      size: { default: "medium" },
       allowCreate: { type: Boolean, default: false }
     },
     emits: ["update:modelValue", "change", "create"],
@@ -4605,11 +4613,14 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["tao-combobox", {
-            "tao-combobox--open": open.value,
-            "tao-combobox--invalid": invalid.value,
-            "tao-combobox--disabled": __props.disabled
-          }])
+          class: vue.normalizeClass(["tao-combobox", [
+            `tao-combobox--${__props.size}`,
+            {
+              "tao-combobox--open": open.value,
+              "tao-combobox--invalid": invalid.value,
+              "tao-combobox--disabled": __props.disabled
+            }
+          ]])
         }, [
           vue.createElementVNode("div", {
             ref_key: "fieldRef",
@@ -4655,7 +4666,7 @@
               key: 0,
               ref_key: "panelRef",
               ref: panelRef,
-              class: "tao-combobox__panel",
+              class: vue.normalizeClass(["tao-combobox__panel", `tao-combobox__panel--${__props.size}`]),
               style: vue.normalizeStyle(listStyle.value)
             }, [
               vue.createElementVNode("ul", {
@@ -4698,7 +4709,7 @@
                   ], 42, _hoisted_3$h);
                 }), 128))
               ], 512),
-              selected.value ? (vue.openBlock(), vue.createElementBlock("button", {
+              __props.clearable && selected.value ? (vue.openBlock(), vue.createElementBlock("button", {
                 key: 0,
                 type: "button",
                 class: "tao-combobox__clear",
@@ -4709,13 +4720,13 @@
                   vue.createTextVNode(vue.toDisplayString(__props.clearText), 1)
                 ], true)
               ], 32)) : vue.createCommentVNode("", true)
-            ], 4)) : vue.createCommentVNode("", true)
+            ], 6)) : vue.createCommentVNode("", true)
           ]))
         ], 2);
       };
     }
   });
-  const TaoCombobox = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-c1f14f5a"]]);
+  const TaoCombobox = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-1254c942"]]);
   const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
   function formatTaoDateIso(parts) {
     return `${String(parts.y).padStart(4, "0")}-${String(parts.m).padStart(2, "0")}-${String(parts.d).padStart(2, "0")}`;
@@ -5264,7 +5275,7 @@
       };
     }
   });
-  const TaoDate = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-a996d893"]]);
+  const TaoDate = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-64d8f6aa"]]);
   const _hoisted_1$l = ["id", "aria-expanded", "aria-invalid", "aria-describedby", "disabled"];
   const _hoisted_2$j = { class: "tao-date-range__value" };
   const _hoisted_3$f = {
@@ -5730,7 +5741,7 @@
       };
     }
   });
-  const TaoDateRange = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-45e07f55"]]);
+  const TaoDateRange = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-70505320"]]);
   const _hoisted_1$k = ["for"];
   const _hoisted_2$i = ["id", "checked", "disabled", "aria-checked", "aria-invalid", "aria-describedby"];
   const _hoisted_3$e = {
@@ -6175,7 +6186,7 @@
       };
     }
   });
-  const TaoSegmentedOption = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-f55dc6a0"]]);
+  const TaoSegmentedOption = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-a47bc5c9"]]);
   const _hoisted_1$f = ["role", "aria-live"];
   const _hoisted_2$d = { class: "tao-alert__body" };
   const _hoisted_3$b = {