@1337exp/taoui 1.8.0 → 1.9.0

package/README.md

@@ -29,7 +29,7 @@ change a handful of CSS variables and the whole kit follows.
 - **TaoFlex** — flexbox wrapper: justify / align / direction / wrap / gap
 - **TaoSpace** — even gap between children
 - **TaoGrid** / **TaoGridItem** — tiles: `min` is a catalog (auto-fill), `cols` is bento. Item `col` / `row` span; below ~560px span resets. Not masonry
-- **TaoDivider** — `line` (hairline), `text` (line with a label), `gap` (empty space, size: small / medium / large)
+- **TaoDivider** — `solid` (plain border) / `dashed` / `colored` (accent) / `gap`. Optional `text` sits in the middle of any of them; `fade` softens the line ends; `size` is for `gap` (small / medium / large)
 - **TaoSplit** — two panes and a gutter. `row` / `column` like Flex. `v-model` is the start size in `%` or `px`; `resizable="false"` locks the gutter. Not Divider.
 - **TaoFieldset** — grouped frame: `legend` sits on the top border, `align` is start / center / end
 - **TaoAnimatedBorder** — rainbow border wrapper (decorative, not tied to the theme)

package/README.ru.md

@@ -29,7 +29,7 @@
 - **TaoFlex** — обёртка над flexbox с пропами justify/align/direction/wrap/gap
 - **TaoSpace** — авто-расстановка дочерних элементов с равномерным gap
 - **TaoGrid** / **TaoGridItem** — плитки: `min` — каталог (auto-fill), `cols` — bento. У item `col` / `row`; уже ~560px span сбрасывается. Не masonry
-- **TaoDivider** — разделитель: line (тонкая линия), text (линия с текстом), gap (пустой отступ, size: small/medium/large)
+- **TaoDivider** — `solid` (обычный border) / `dashed` / `colored` (акцент) / `gap`. Подпись — опциональный `text` на любом варианте; `fade` — плавные края линии; `size` только у `gap` (small / medium / large)
 - **TaoSplit** — две панели и полоса. `row` / `column` как у Flex. `v-model` — размер start в `%` или `px`; `resizable="false"` фиксирует полосу. Не Divider.
 - **TaoFieldset** — рамка-группа: `legend` сидит на верхней границе, `align` — start / center / end
 - **TaoAnimatedBorder** — контейнер с анимированной радужной рамкой (декоративный, не завязан на тему)

package/dist/index.cjs

@@ -2463,40 +2463,57 @@
     }
   });
   const TaoTag = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-f353f529"]]);
-  const _hoisted_1$y = {
+  const _hoisted_1$y = ["role", "aria-hidden"];
+  const _hoisted_2$v = {
     key: 1,
-    class: "tao-divider-text"
+    class: "tao-divider__text"
   };
-  const _hoisted_2$v = { class: "tao-divider-text__value" };
   const _hoisted_3$o = {
     key: 2,
-    class: "tao-divider-line"
+    class: "tao-divider__line tao-divider__line--end"
   };
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoDivider" },
     __name: "TaoDivider",
     props: {
-      variant: { default: "line" },
-      size: { default: "medium" }
+      variant: { default: "solid" },
+      size: { default: "medium" },
+      text: { default: "" },
+      fade: { type: Boolean, default: false }
     },
     setup(__props) {
       const props = __props;
+      const slots = vue.useSlots();
       const gapSize = vue.computed(() => props.size === "big" ? "large" : props.size);
+      const hasLabel = vue.computed(() => Boolean(props.text) || Boolean(slots.default));
       return (_ctx, _cache) => {
-        return __props.variant === "gap" ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: vue.normalizeClass(["tao-divider-gap", `tao-divider-gap--${gapSize.value}`])
-        }, null, 2)) : __props.variant === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
-          _cache[0] || (_cache[0] = vue.createElementVNode("span", { class: "tao-divider-text__line tao-divider-text__line--left" }, null, -1)),
-          vue.createElementVNode("span", _hoisted_2$v, [
-            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
-          _cache[1] || (_cache[1] = vue.createElementVNode("span", { class: "tao-divider-text__line tao-divider-text__line--right" }, null, -1))
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$o));
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["tao-divider", [
+            `tao-divider--${__props.variant}`,
+            {
+              "tao-divider--labeled": hasLabel.value,
+              "tao-divider--fade": __props.fade && __props.variant !== "gap",
+              [`tao-divider--gap-${gapSize.value}`]: __props.variant === "gap"
+            }
+          ]]),
+          role: __props.variant === "gap" && !hasLabel.value ? void 0 : "separator",
+          "aria-hidden": __props.variant === "gap" && !hasLabel.value ? true : void 0
+        }, [
+          __props.variant !== "gap" ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            class: vue.normalizeClass(["tao-divider__line", { "tao-divider__line--start": hasLabel.value }])
+          }, null, 2)) : vue.createCommentVNode("", true),
+          hasLabel.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$v, [
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              vue.createTextVNode(vue.toDisplayString(__props.text), 1)
+            ], true)
+          ])) : vue.createCommentVNode("", true),
+          __props.variant !== "gap" && hasLabel.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$o)) : vue.createCommentVNode("", true)
+        ], 10, _hoisted_1$y);
       };
     }
   });
-  const TaoDivider = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-8187a15d"]]);
+  const TaoDivider = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-c1d072e5"]]);
   const _hoisted_1$x = {
     key: 0,
     class: "tao-fieldset__legend"