@kernel4632/kima 0.8.6 → 0.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/navigation/carousel.ce.vue_vue_type_style_index_0_scoped_f2081ae5_lang.css +1 -0
  2. package/dist/kima-elements.js +38 -37
  3. package/dist/style.css +1 -1
  4. package/dist/styles/carousel.css +1 -1
  5. package/dist/vue/components/navigation/carousel.ce.js +66 -64
  6. package/package.json +1 -1
  7. package/dist/components/navigation/carousel.ce.vue_vue_type_style_index_0_scoped_03e729d7_lang.css +0 -1
package/dist/components/navigation/carousel.ce.vue_vue_type_style_index_0_scoped_f2081ae5_lang.css ADDED
@@ -0,0 +1 @@
1
+ @keyframes kima-ripple-glow-f2081ae5{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-carousel[data-v-f2081ae5]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);width:100%;min-width:0;padding:var(--kima-space-4);border:0;display:block}.kima-carousel[data-v-f2081ae5]:focus-visible{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:var(--kima-focus-ring-offset)}.kima-carousel__viewport[data-v-f2081ae5]{padding:var(--kima-space-6);box-sizing:border-box;background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);overflow-wrap:anywhere;min-height:180px;position:relative;overflow:hidden}.kima-carousel__controls[data-v-f2081ae5]{justify-content:space-between;align-items:center;gap:var(--kima-space-3);margin-top:var(--kima-space-4);flex-wrap:wrap;display:flex}.kima-carousel__viewport[data-v-f2081ae5]{display:grid}.kima-carousel__slide[data-v-f2081ae5]{grid-area:1/1;min-width:0}.kima-carousel-forward-enter-active[data-v-f2081ae5],.kima-carousel-forward-leave-active[data-v-f2081ae5],.kima-carousel-backward-enter-active[data-v-f2081ae5],.kima-carousel-backward-leave-active[data-v-f2081ae5]{transition:transform var(--kima-duration-slower) var(--kima-curve-emphasized), opacity var(--kima-duration-medium) var(--kima-curve-standard)}.kima-carousel-forward-enter-from[data-v-f2081ae5]{opacity:0;transform:translate(24px)}.kima-carousel-forward-leave-to[data-v-f2081ae5],.kima-carousel-backward-enter-from[data-v-f2081ae5]{opacity:0;transform:translate(-24px)}.kima-carousel-backward-leave-to[data-v-f2081ae5]{opacity:0;transform:translate(24px)}:is(.kima-carousel[data-v-f2081ae5]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__previous svg,.kima-carousel[data-v-f2081ae5]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__next svg){transform:scaleX(-1)}
package/dist/kima-elements.js CHANGED
@@ -120445,11 +120445,7 @@ var vRe = /*#__PURE__*/ dl(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
120445
120445
  "aria-current": n === e.items.length - 1 ? "page" : void 0
120446
120446
  }, k(t.label), 9, HBe))]))), 128))]), F(r.$slots, "default", {}, void 0, !0)], 16, BBe));
120447
120447
  }
120448
- }), [["styles", [zBe]], ["__scopeId", "data-v-2a2cd6e2"]]), WBe = "@keyframes kima-ripple-glow-03e729d7{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-carousel[data-v-03e729d7]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);width:100%;min-width:0;padding:var(--kima-space-4);border:0;display:block}.kima-carousel[data-v-03e729d7]:focus-visible{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:var(--kima-focus-ring-offset)}.kima-carousel__viewport[data-v-03e729d7]{padding:var(--kima-space-6);box-sizing:border-box;background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);overflow-wrap:anywhere;min-height:180px;position:relative}.kima-carousel__controls[data-v-03e729d7]{justify-content:space-between;align-items:center;gap:var(--kima-space-3);margin-top:var(--kima-space-4);flex-wrap:wrap;display:flex}.kima-carousel__viewport[data-v-03e729d7]{display:grid}.kima-carousel__slide[data-v-03e729d7]{grid-area:1/1;min-width:0}:is(.kima-carousel[data-v-03e729d7]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__previous svg,.kima-carousel[data-v-03e729d7]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__next svg){transform:scaleX(-1)}.kima-carousel__slide.kima-fade-leave-active[data-v-03e729d7]{inset-block-start:var(--kima-space-6);inset-inline:var(--kima-space-6);position:absolute}", GBe = ["aria-label"], KBe = [
120449
- "aria-label",
120450
- "aria-hidden",
120451
- "inert"
120452
- ], qBe = { key: 0 }, JBe = { key: 1 }, YBe = { key: 0 }, XBe = { class: "kima-carousel__controls" }, ZBe = {
120448
+ }), [["styles", [zBe]], ["__scopeId", "data-v-2a2cd6e2"]]), WBe = "@keyframes kima-ripple-glow-f2081ae5{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-carousel[data-v-f2081ae5]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);width:100%;min-width:0;padding:var(--kima-space-4);border:0;display:block}.kima-carousel[data-v-f2081ae5]:focus-visible{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:var(--kima-focus-ring-offset)}.kima-carousel__viewport[data-v-f2081ae5]{padding:var(--kima-space-6);box-sizing:border-box;background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);overflow-wrap:anywhere;min-height:180px;position:relative;overflow:hidden}.kima-carousel__controls[data-v-f2081ae5]{justify-content:space-between;align-items:center;gap:var(--kima-space-3);margin-top:var(--kima-space-4);flex-wrap:wrap;display:flex}.kima-carousel__viewport[data-v-f2081ae5]{display:grid}.kima-carousel__slide[data-v-f2081ae5]{grid-area:1/1;min-width:0}.kima-carousel-forward-enter-active[data-v-f2081ae5],.kima-carousel-forward-leave-active[data-v-f2081ae5],.kima-carousel-backward-enter-active[data-v-f2081ae5],.kima-carousel-backward-leave-active[data-v-f2081ae5]{transition:transform var(--kima-duration-slower) var(--kima-curve-emphasized), opacity var(--kima-duration-medium) var(--kima-curve-standard)}.kima-carousel-forward-enter-from[data-v-f2081ae5]{opacity:0;transform:translate(24px)}.kima-carousel-forward-leave-to[data-v-f2081ae5],.kima-carousel-backward-enter-from[data-v-f2081ae5]{opacity:0;transform:translate(-24px)}.kima-carousel-backward-leave-to[data-v-f2081ae5]{opacity:0;transform:translate(24px)}:is(.kima-carousel[data-v-f2081ae5]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__previous svg,.kima-carousel[data-v-f2081ae5]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__next svg){transform:scaleX(-1)}", GBe = ["aria-label"], KBe = ["aria-label"], qBe = { key: 0 }, JBe = { key: 1 }, YBe = { key: 0 }, XBe = { class: "kima-carousel__controls" }, ZBe = {
120453
120449
  "aria-live": "polite",
120454
120450
  "aria-atomic": "true"
120455
120451
  }, QBe = /*#__PURE__*/ dl(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
@@ -120472,22 +120468,28 @@ var vRe = /*#__PURE__*/ dl(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
120472
120468
  },
120473
120469
  emits: ["update:modelValue", "change"],
120474
120470
  setup(e, { emit: t }) {
120475
- let n = e, r = t, { root: i, forwardedAttrs: a } = H7(), [o, s] = U7(n, "modelValue", r), c = `kima-carousel-${Nr()}`, l = /* @__PURE__ */ A(null), u = U(() => Math.max(0, Math.min(n.items.length - 1, Math.trunc(Number(o.value) || 0))));
120476
- ll(l, () => u.value, { opacity: !1 });
120477
- let d = U(() => n.disabled || n.items.length < 2 || !n.loop && u.value === 0), f = U(() => n.disabled || n.items.length < 2 || !n.loop && u.value === n.items.length - 1);
120478
- function p(e) {
120471
+ let n = e, r = t, { root: i, forwardedAttrs: a } = H7(), [o, s] = U7(n, "modelValue", r), c = `kima-carousel-${Nr()}`, l = /* @__PURE__ */ A(null), u = /* @__PURE__ */ A("forward"), d = U(() => Math.max(0, Math.min(n.items.length - 1, Math.trunc(Number(o.value) || 0)))), f = U(() => n.items[d.value]), p = U(() => `kima-carousel-${u.value}`), m = null;
120472
+ N(d, (e, t) => {
120473
+ let n = e - t;
120474
+ m ? u.value = m : Math.abs(n) === 1 && (u.value = n > 0 ? "forward" : "backward"), m = null;
120475
+ }, { flush: "sync" }), ll(l, () => d.value, { opacity: !1 });
120476
+ let h = U(() => n.disabled || n.items.length < 2 || !n.loop && d.value === 0), g = U(() => n.disabled || n.items.length < 2 || !n.loop && d.value === n.items.length - 1);
120477
+ function _(e) {
120479
120478
  return e && typeof e == "object" ? e.content ?? e.label ?? "" : e;
120480
120479
  }
120481
- function m(e) {
120482
- e < 0 && d.value || e > 0 && f.value || s((u.value + e + n.items.length) % n.items.length);
120480
+ function v(e, t = e >= d.value ? "forward" : "backward") {
120481
+ e !== d.value && (m = t, s(e));
120483
120482
  }
120484
- function h(e) {
120483
+ function y(e) {
120484
+ e < 0 && h.value || e > 0 && g.value || v((d.value + e + n.items.length) % n.items.length, e > 0 ? "forward" : "backward");
120485
+ }
120486
+ function b(e) {
120485
120487
  if (n.disabled || !n.items.length || e.altKey || e.ctrlKey || e.metaKey || e.isComposing || e.target.closest("input,textarea,select,a,[contenteditable=\"true\"]")) return;
120486
120488
  let t = getComputedStyle(i.value).direction === "rtl";
120487
- if (e.key === "ArrowRight") m(t ? -1 : 1);
120488
- else if (e.key === "ArrowLeft") m(t ? 1 : -1);
120489
- else if (e.key === "Home") s(0);
120490
- else if (e.key === "End") s(n.items.length - 1);
120489
+ if (e.key === "ArrowRight") y(t ? -1 : 1);
120490
+ else if (e.key === "ArrowLeft") y(t ? 1 : -1);
120491
+ else if (e.key === "Home") v(0, "backward");
120492
+ else if (e.key === "End") v(n.items.length - 1, "forward");
120491
120493
  else return;
120492
120494
  e.preventDefault();
120493
120495
  }
@@ -120500,30 +120502,29 @@ var vRe = /*#__PURE__*/ dl(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
120500
120502
  "aria-roledescription": "轮播",
120501
120503
  "aria-label": e.label,
120502
120504
  tabindex: "0",
120503
- onKeydown: h
120505
+ onKeydown: b
120504
120506
  }), [
120505
120507
  z("div", {
120506
120508
  id: c,
120507
120509
  ref_key: "viewport",
120508
120510
  ref: l,
120509
120511
  class: "kima-carousel__viewport"
120510
- }, [(I(!0), L(ro, null, Pi(e.items, (n, r) => (I(), R(ds, {
120511
- key: n.value ?? r,
120512
- name: "kima-fade"
120513
- }, {
120514
- default: M(() => [Xn(z("div", {
120512
+ }, [B(ds, H({ name: p.value }, {
120513
+ ...j(nl),
120514
+ onBeforeLeave: j(rl)
120515
+ }), {
120516
+ default: M(() => [e.items.length ? (I(), L("div", {
120517
+ key: d.value,
120515
120518
  class: "kima-carousel__slide",
120516
120519
  role: "group",
120517
120520
  "aria-roledescription": "幻灯片",
120518
- "aria-label": `第 ${r + 1} 张，共 ${e.items.length} 张`,
120519
- "aria-hidden": u.value !== r,
120520
- inert: u.value !== r
120521
- }, [F(t.$slots, `slide-${r}`, {
120522
- item: n,
120523
- index: r
120524
- }, () => [n.title ? (I(), L("h3", qBe, k(n.title), 1)) : V("", !0), p(n) ? (I(), L("p", JBe, k(p(n)), 1)) : V("", !0)], !0)], 8, KBe), [[ks, u.value === r]])]),
120525
- _: 2
120526
- }, 1024))), 128)), e.items.length ? V("", !0) : (I(), L("p", YBe, "暂无内容"))], 512),
120521
+ "aria-label": `第 ${d.value + 1} 张，共 ${e.items.length} 张`
120522
+ }, [F(t.$slots, `slide-${d.value}`, {
120523
+ item: f.value,
120524
+ index: d.value
120525
+ }, () => [f.value?.title ? (I(), L("h3", qBe, k(f.value.title), 1)) : V("", !0), _(f.value) ? (I(), L("p", JBe, k(_(f.value)), 1)) : V("", !0)], !0)], 8, KBe)) : V("", !0)]),
120526
+ _: 3
120527
+ }, 16, ["name"]), e.items.length ? V("", !0) : (I(), L("p", YBe, "暂无内容"))], 512),
120527
120528
  z("div", XBe, [
120528
120529
  B(cT, {
120529
120530
  text: "上一张",
@@ -120533,14 +120534,14 @@ var vRe = /*#__PURE__*/ dl(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
120533
120534
  class: "kima-carousel__previous",
120534
120535
  icon: j(dw),
120535
120536
  variant: "tonal",
120536
- disabled: d.value,
120537
+ disabled: h.value,
120537
120538
  "aria-controls": c,
120538
120539
  label: "上一张",
120539
- onClick: n[0] ||= (e) => m(-1)
120540
+ onClick: n[0] ||= (e) => y(-1)
120540
120541
  }, null, 8, ["icon", "disabled"])]),
120541
120542
  _: 1
120542
120543
  }),
120543
- z("output", ZBe, k(e.items.length ? u.value + 1 : 0) + " / " + k(e.items.length), 1),
120544
+ z("output", ZBe, k(e.items.length ? d.value + 1 : 0) + " / " + k(e.items.length), 1),
120544
120545
  B(cT, {
120545
120546
  text: "下一张",
120546
120547
  position: "left"
@@ -120549,10 +120550,10 @@ var vRe = /*#__PURE__*/ dl(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
120549
120550
  class: "kima-carousel__next",
120550
120551
  icon: j(fw),
120551
120552
  variant: "tonal",
120552
- disabled: f.value,
120553
+ disabled: g.value,
120553
120554
  "aria-controls": c,
120554
120555
  label: "下一张",
120555
- onClick: n[1] ||= (e) => m(1)
120556
+ onClick: n[1] ||= (e) => y(1)
120556
120557
  }, null, 8, ["icon", "disabled"])]),
120557
120558
  _: 1
120558
120559
  })
@@ -120560,7 +120561,7 @@ var vRe = /*#__PURE__*/ dl(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
120560
120561
  F(t.$slots, "default", {}, void 0, !0)
120561
120562
  ], 16, GBe));
120562
120563
  }
120563
- }), [["styles", [WBe]], ["__scopeId", "data-v-03e729d7"]]), $Be = "@keyframes kima-ripple-glow-ddf8529a{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-collapsible[data-v-ddf8529a]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);width:100%;min-width:0;padding:var(--kima-space-4);border:0;display:block}.kima-collapsible__content[data-v-ddf8529a]{padding:var(--kima-space-4);line-height:1.7}", eVe = ["aria-hidden", "inert"], tVe = { class: "kima-collapsible__content" }, nVe = /*#__PURE__*/ dl(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
120564
+ }), [["styles", [WBe]], ["__scopeId", "data-v-f2081ae5"]]), $Be = "@keyframes kima-ripple-glow-ddf8529a{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-collapsible[data-v-ddf8529a]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);width:100%;min-width:0;padding:var(--kima-space-4);border:0;display:block}.kima-collapsible__content[data-v-ddf8529a]{padding:var(--kima-space-4);line-height:1.7}", eVe = ["aria-hidden", "inert"], tVe = { class: "kima-collapsible__content" }, nVe = /*#__PURE__*/ dl(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
120564
120565
  __name: "collapsible.ce",
120565
120566
  props: {
120566
120567
  open: Boolean,
package/dist/style.css CHANGED
@@ -214,7 +214,7 @@
214
214
  /*$vite$:1*/
215
215
  @keyframes kima-ripple-glow-2a2cd6e2{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-breadcrumb[data-v-2a2cd6e2]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);width:100%;min-width:0;display:block}.kima-breadcrumb ol[data-v-2a2cd6e2]{align-items:center;gap:var(--kima-space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.kima-breadcrumb li[data-v-2a2cd6e2]{align-items:center;gap:var(--kima-space-2);overflow-wrap:anywhere;min-width:0;display:flex}.kima-breadcrumb__separator[data-v-2a2cd6e2]{color:var(--kima-color-on-surface-variant);padding-inline:var(--kima-space-2)}
216
216
  /*$vite$:1*/
217
- @keyframes kima-ripple-glow-03e729d7{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-carousel[data-v-03e729d7]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);width:100%;min-width:0;padding:var(--kima-space-4);border:0;display:block}.kima-carousel[data-v-03e729d7]:focus-visible{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:var(--kima-focus-ring-offset)}.kima-carousel__viewport[data-v-03e729d7]{padding:var(--kima-space-6);box-sizing:border-box;background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);overflow-wrap:anywhere;min-height:180px;position:relative}.kima-carousel__controls[data-v-03e729d7]{justify-content:space-between;align-items:center;gap:var(--kima-space-3);margin-top:var(--kima-space-4);flex-wrap:wrap;display:flex}.kima-carousel__viewport[data-v-03e729d7]{display:grid}.kima-carousel__slide[data-v-03e729d7]{grid-area:1/1;min-width:0}:is(.kima-carousel[data-v-03e729d7]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__previous svg,.kima-carousel[data-v-03e729d7]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__next svg){transform:scaleX(-1)}.kima-carousel__slide.kima-fade-leave-active[data-v-03e729d7]{inset-block-start:var(--kima-space-6);inset-inline:var(--kima-space-6);position:absolute}
217
+ @keyframes kima-ripple-glow-f2081ae5{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-carousel[data-v-f2081ae5]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);width:100%;min-width:0;padding:var(--kima-space-4);border:0;display:block}.kima-carousel[data-v-f2081ae5]:focus-visible{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:var(--kima-focus-ring-offset)}.kima-carousel__viewport[data-v-f2081ae5]{padding:var(--kima-space-6);box-sizing:border-box;background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);overflow-wrap:anywhere;min-height:180px;position:relative;overflow:hidden}.kima-carousel__controls[data-v-f2081ae5]{justify-content:space-between;align-items:center;gap:var(--kima-space-3);margin-top:var(--kima-space-4);flex-wrap:wrap;display:flex}.kima-carousel__viewport[data-v-f2081ae5]{display:grid}.kima-carousel__slide[data-v-f2081ae5]{grid-area:1/1;min-width:0}.kima-carousel-forward-enter-active[data-v-f2081ae5],.kima-carousel-forward-leave-active[data-v-f2081ae5],.kima-carousel-backward-enter-active[data-v-f2081ae5],.kima-carousel-backward-leave-active[data-v-f2081ae5]{transition:transform var(--kima-duration-slower) var(--kima-curve-emphasized), opacity var(--kima-duration-medium) var(--kima-curve-standard)}.kima-carousel-forward-enter-from[data-v-f2081ae5]{opacity:0;transform:translate(24px)}.kima-carousel-forward-leave-to[data-v-f2081ae5],.kima-carousel-backward-enter-from[data-v-f2081ae5]{opacity:0;transform:translate(-24px)}.kima-carousel-backward-leave-to[data-v-f2081ae5]{opacity:0;transform:translate(24px)}:is(.kima-carousel[data-v-f2081ae5]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__previous svg,.kima-carousel[data-v-f2081ae5]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__next svg){transform:scaleX(-1)}
218
218
  /*$vite$:1*/
219
219
  @keyframes kima-ripple-glow-ddf8529a{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-collapsible[data-v-ddf8529a]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);width:100%;min-width:0;padding:var(--kima-space-4);border:0;display:block}.kima-collapsible__content[data-v-ddf8529a]{padding:var(--kima-space-4);line-height:1.7}
220
220
  /*$vite$:1*/
package/dist/styles/carousel.css CHANGED
@@ -2,4 +2,4 @@
2
2
  @import "../components/core/icon.ce.vue_vue_type_style_index_0_scoped_5c94f2ca_lang.css";
3
3
  @import "../components/core/icon-button.ce.vue_vue_type_style_index_0_scoped_a18b4478_lang.css";
4
4
  @import "../components/core/tooltip.ce.vue_vue_type_style_index_0_scoped_2c931a6a_lang.css";
5
- @import "../components/navigation/carousel.ce.vue_vue_type_style_index_0_scoped_03e729d7_lang.css";
5
+ @import "../components/navigation/carousel.ce.vue_vue_type_style_index_0_scoped_f2081ae5_lang.css";
package/dist/vue/components/navigation/carousel.ce.js CHANGED
@@ -1,20 +1,17 @@
1
1
  import e from "../../_virtual/_plugin-vue_export-helper.js";
2
- import { useNavigationModel as t, useNavigationRoot as n } from "../../utils/navigation.js";
3
- import r from "../core/icon-button.ce.js";
4
- import i from "../core/tooltip.ce.js";
5
- import { useContentMotion as a } from "../../utils/content-motion.js";
2
+ import { freezeLeaveLayout as t, presenceTransition as n } from "../../utils/motion.js";
3
+ import { useNavigationModel as r, useNavigationRoot as i } from "../../utils/navigation.js";
4
+ import a from "../core/icon-button.ce.js";
5
+ import o from "../core/tooltip.ce.js";
6
+ import { useContentMotion as s } from "../../utils/content-motion.js";
6
7
  /* empty css */
7
- import { Fragment as o, Transition as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, mergeProps as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useId as x, vShow as S, withCtx as C, withDirectives as w } from "vue";
8
- import { ArrowLeft01Icon as T, ArrowRight01Icon as E } from "@hugeicons/core-free-icons";
8
+ import { Transition as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, mergeProps as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, unref as y, useId as b, watch as x, withCtx as S } from "vue";
9
+ import { ArrowLeft01Icon as C, ArrowRight01Icon as w } from "@hugeicons/core-free-icons";
9
10
  // src/components/navigation/carousel.ce.vue
10
- var D = ["aria-label"], O = [
11
- "aria-label",
12
- "aria-hidden",
13
- "inert"
14
- ], k = { key: 0 }, A = { key: 1 }, j = { key: 0 }, M = { class: "kima-carousel__controls" }, N = {
11
+ var T = ["aria-label"], E = ["aria-label"], D = { key: 0 }, O = { key: 1 }, k = { key: 0 }, A = { class: "kima-carousel__controls" }, j = {
15
12
  "aria-live": "polite",
16
13
  "aria-atomic": "true"
17
- }, P = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
14
+ }, M = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
18
15
  __name: "carousel.ce",
19
16
  props: {
20
17
  modelValue: {
@@ -33,94 +30,99 @@ var D = ["aria-label"], O = [
33
30
  }
34
31
  },
35
32
  emits: ["update:modelValue", "change"],
36
- setup(e, { emit: P }) {
37
- let F = e, I = P, { root: L, forwardedAttrs: R } = n(), [z, B] = t(F, "modelValue", I), V = `kima-carousel-${x()}`, H = g(null), U = c(() => Math.max(0, Math.min(F.items.length - 1, Math.trunc(Number(z.value) || 0))));
38
- a(H, () => U.value, { opacity: !1 });
39
- let W = c(() => F.disabled || F.items.length < 2 || !F.loop && U.value === 0), G = c(() => F.disabled || F.items.length < 2 || !F.loop && U.value === F.items.length - 1);
40
- function K(e) {
33
+ setup(e, { emit: M }) {
34
+ let N = e, P = M, { root: F, forwardedAttrs: I } = i(), [L, R] = r(N, "modelValue", P), z = `kima-carousel-${b()}`, B = g(null), V = g("forward"), H = l(() => Math.max(0, Math.min(N.items.length - 1, Math.trunc(Number(L.value) || 0)))), U = l(() => N.items[H.value]), W = l(() => `kima-carousel-${V.value}`), G = null;
35
+ x(H, (e, t) => {
36
+ let n = e - t;
37
+ G ? V.value = G : Math.abs(n) === 1 && (V.value = n > 0 ? "forward" : "backward"), G = null;
38
+ }, { flush: "sync" }), s(B, () => H.value, { opacity: !1 });
39
+ let K = l(() => N.disabled || N.items.length < 2 || !N.loop && H.value === 0), q = l(() => N.disabled || N.items.length < 2 || !N.loop && H.value === N.items.length - 1);
40
+ function J(e) {
41
41
  return e && typeof e == "object" ? e.content ?? e.label ?? "" : e;
42
42
  }
43
- function q(e) {
44
- e < 0 && W.value || e > 0 && G.value || B((U.value + e + F.items.length) % F.items.length);
43
+ function Y(e, t = e >= H.value ? "forward" : "backward") {
44
+ e !== H.value && (G = t, R(e));
45
45
  }
46
- function J(e) {
47
- if (F.disabled || !F.items.length || e.altKey || e.ctrlKey || e.metaKey || e.isComposing || e.target.closest("input,textarea,select,a,[contenteditable=\"true\"]")) return;
48
- let t = getComputedStyle(L.value).direction === "rtl";
49
- if (e.key === "ArrowRight") q(t ? -1 : 1);
50
- else if (e.key === "ArrowLeft") q(t ? 1 : -1);
51
- else if (e.key === "Home") B(0);
52
- else if (e.key === "End") B(F.items.length - 1);
46
+ function X(e) {
47
+ e < 0 && K.value || e > 0 && q.value || Y((H.value + e + N.items.length) % N.items.length, e > 0 ? "forward" : "backward");
48
+ }
49
+ function Z(e) {
50
+ if (N.disabled || !N.items.length || e.altKey || e.ctrlKey || e.metaKey || e.isComposing || e.target.closest("input,textarea,select,a,[contenteditable=\"true\"]")) return;
51
+ let t = getComputedStyle(F.value).direction === "rtl";
52
+ if (e.key === "ArrowRight") X(t ? -1 : 1);
53
+ else if (e.key === "ArrowLeft") X(t ? 1 : -1);
54
+ else if (e.key === "Home") Y(0, "backward");
55
+ else if (e.key === "End") Y(N.items.length - 1, "forward");
53
56
  else return;
54
57
  e.preventDefault();
55
58
  }
56
- return (t, n) => (h(), d("section", m({
59
+ return (r, i) => (h(), d("section", m({
57
60
  ref_key: "root",
58
- ref: L
59
- }, b(R), {
61
+ ref: F
62
+ }, y(I), {
60
63
  class: "kima-carousel",
61
64
  role: "region",
62
65
  "aria-roledescription": "轮播",
63
66
  "aria-label": e.label,
64
67
  tabindex: "0",
65
- onKeydown: J
68
+ onKeydown: Z
66
69
  }), [
67
70
  f("div", {
68
- id: V,
71
+ id: z,
69
72
  ref_key: "viewport",
70
- ref: H,
73
+ ref: B,
71
74
  class: "kima-carousel__viewport"
72
- }, [(h(!0), d(o, null, _(e.items, (n, r) => (h(), l(s, {
73
- key: n.value ?? r,
74
- name: "kima-fade"
75
- }, {
76
- default: C(() => [w(f("div", {
75
+ }, [p(c, m({ name: W.value }, {
76
+ ...y(n),
77
+ onBeforeLeave: y(t)
78
+ }), {
79
+ default: S(() => [e.items.length ? (h(), d("div", {
80
+ key: H.value,
77
81
  class: "kima-carousel__slide",
78
82
  role: "group",
79
83
  "aria-roledescription": "幻灯片",
80
- "aria-label": `第 ${r + 1} 张，共 ${e.items.length} 张`,
81
- "aria-hidden": U.value !== r,
82
- inert: U.value !== r
83
- }, [v(t.$slots, `slide-${r}`, {
84
- item: n,
85
- index: r
86
- }, () => [n.title ? (h(), d("h3", k, y(n.title), 1)) : u("", !0), K(n) ? (h(), d("p", A, y(K(n)), 1)) : u("", !0)], !0)], 8, O), [[S, U.value === r]])]),
87
- _: 2
88
- }, 1024))), 128)), e.items.length ? u("", !0) : (h(), d("p", j, "暂无内容"))], 512),
89
- f("div", M, [
90
- p(i, {
84
+ "aria-label": `第 ${H.value + 1} 张，共 ${e.items.length} 张`
85
+ }, [_(r.$slots, `slide-${H.value}`, {
86
+ item: U.value,
87
+ index: H.value
88
+ }, () => [U.value?.title ? (h(), d("h3", D, v(U.value.title), 1)) : u("", !0), J(U.value) ? (h(), d("p", O, v(J(U.value)), 1)) : u("", !0)], !0)], 8, E)) : u("", !0)]),
89
+ _: 3
90
+ }, 16, ["name"]), e.items.length ? u("", !0) : (h(), d("p", k, "暂无内容"))], 512),
91
+ f("div", A, [
92
+ p(o, {
91
93
  text: "上一张",
92
94
  position: "right"
93
95
  }, {
94
- default: C(() => [p(r, {
96
+ default: S(() => [p(a, {
95
97
  class: "kima-carousel__previous",
96
- icon: b(T),
98
+ icon: y(C),
97
99
  variant: "tonal",
98
- disabled: W.value,
99
- "aria-controls": V,
100
+ disabled: K.value,
101
+ "aria-controls": z,
100
102
  label: "上一张",
101
- onClick: n[0] ||= (e) => q(-1)
103
+ onClick: i[0] ||= (e) => X(-1)
102
104
  }, null, 8, ["icon", "disabled"])]),
103
105
  _: 1
104
106
  }),
105
- f("output", N, y(e.items.length ? U.value + 1 : 0) + " / " + y(e.items.length), 1),
106
- p(i, {
107
+ f("output", j, v(e.items.length ? H.value + 1 : 0) + " / " + v(e.items.length), 1),
108
+ p(o, {
107
109
  text: "下一张",
108
110
  position: "left"
109
111
  }, {
110
- default: C(() => [p(r, {
112
+ default: S(() => [p(a, {
111
113
  class: "kima-carousel__next",
112
- icon: b(E),
114
+ icon: y(w),
113
115
  variant: "tonal",
114
- disabled: G.value,
115
- "aria-controls": V,
116
+ disabled: q.value,
117
+ "aria-controls": z,
116
118
  label: "下一张",
117
- onClick: n[1] ||= (e) => q(1)
119
+ onClick: i[1] ||= (e) => X(1)
118
120
  }, null, 8, ["icon", "disabled"])]),
119
121
  _: 1
120
122
  })
121
123
  ]),
122
- v(t.$slots, "default", {}, void 0, !0)
123
- ], 16, D));
124
+ _(r.$slots, "default", {}, void 0, !0)
125
+ ], 16, T));
124
126
  }
125
- }), [["__scopeId", "data-v-03e729d7"]]);
126
- export { P as default };
127
+ }), [["__scopeId", "data-v-f2081ae5"]]);
128
+ export { M as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kernel4632/kima",
3
- "version": "0.8.6",
3
+ "version": "0.8.8",
4
4
  "description": "KIMA (Kinetic, Interaction, Motion, Alive) - a Material 3 style Web UI design system and component library.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/dist/components/navigation/carousel.ce.vue_vue_type_style_index_0_scoped_03e729d7_lang.css DELETED
@@ -1 +0,0 @@
1
- @keyframes kima-ripple-glow-03e729d7{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-carousel[data-v-03e729d7]{box-sizing:border-box;min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-weight:var(--kima-font-weight-semi-bold);font-size:var(--kima-font-size-body-large);background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);width:100%;min-width:0;padding:var(--kima-space-4);border:0;display:block}.kima-carousel[data-v-03e729d7]:focus-visible{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:var(--kima-focus-ring-offset)}.kima-carousel__viewport[data-v-03e729d7]{padding:var(--kima-space-6);box-sizing:border-box;background:var(--kima-color-layer-1);border-radius:var(--kima-radius-m);overflow-wrap:anywhere;min-height:180px;position:relative}.kima-carousel__controls[data-v-03e729d7]{justify-content:space-between;align-items:center;gap:var(--kima-space-3);margin-top:var(--kima-space-4);flex-wrap:wrap;display:flex}.kima-carousel__viewport[data-v-03e729d7]{display:grid}.kima-carousel__slide[data-v-03e729d7]{grid-area:1/1;min-width:0}:is(.kima-carousel[data-v-03e729d7]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__previous svg,.kima-carousel[data-v-03e729d7]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .kima-carousel__next svg){transform:scaleX(-1)}.kima-carousel__slide.kima-fade-leave-active[data-v-03e729d7]{inset-block-start:var(--kima-space-6);inset-inline:var(--kima-space-6);position:absolute}