@ac-design/design-system 2.4.0 → 2.4.2

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/lib/compat.css +8 -8
  2. package/dist/lib/components/AcDropdownItem.vue_vue_type_script_setup_true_lang.js +27 -30
  3. package/dist/lib/components/AcModal.vue.d.ts +1 -1
  4. package/dist/lib/components/AcModal.vue_vue_type_script_setup_true_lang.js +4 -4
  5. package/dist/lib/components/AcSidePanel.vue_vue_type_script_setup_true_lang.js +2 -2
  6. package/dist/lib/theme.css +11 -2
  7. package/package.json +1 -1
package/dist/lib/compat.css CHANGED
@@ -770,15 +770,21 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
770
770
  .ac-scrollbar:where([data-ac-ds], [data-ac-ds] *) {
771
771
  overflow: auto !important;
772
772
  scrollbar-width: thin !important;
773
- scrollbar-color: rgb(176 176 176 / 0.55) transparent !important;
773
+ scrollbar-color: transparent transparent !important;
774
+ &:hover:where([data-ac-ds], [data-ac-ds] *), &:focus-within:where([data-ac-ds], [data-ac-ds] *) {
775
+ scrollbar-color: rgb(176 176 176 / 0.55) transparent !important;
776
+ }
774
777
  &:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar {
775
778
  width: 4px !important;
776
779
  height: 4px !important;
777
780
  }
778
781
  &:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-thumb {
779
- background-color: #b0b0b0 !important;
782
+ background-color: transparent !important;
780
783
  border-radius: 9999px !important;
781
784
  }
785
+ &:hover:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-thumb, &:focus-within:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-thumb {
786
+ background-color: #b0b0b0 !important;
787
+ }
782
788
  &:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-track {
783
789
  background: transparent !important;
784
790
  }
@@ -2204,12 +2210,6 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
2204
2210
  background-color: color-mix(in oklab, var(--color-black) 50%, transparent) !important;
2205
2211
  }
2206
2212
  }
2207
- .bg-black\/80:where([data-ac-ds], [data-ac-ds] *) {
2208
- background-color: color-mix(in srgb, hsl(0 0% 0%) 80%, transparent) !important;
2209
- @supports (color: color-mix(in lab, red, red)) {
2210
- background-color: color-mix(in oklab, var(--color-black) 80%, transparent) !important;
2211
- }
2212
- }
2213
2213
  .bg-body:where([data-ac-ds], [data-ac-ds] *) {
2214
2214
  background-color: var(--color-body) !important;
2215
2215
  }
package/dist/lib/components/AcDropdownItem.vue_vue_type_script_setup_true_lang.js CHANGED
@@ -1,4 +1,4 @@
1
- import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveComponent as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
1
+ import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, mergeProps as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveComponent as f, resolveDynamicComponent as p, toDisplayString as m, withCtx as h } from "vue";
2
2
  //#region src/lib/components/AcDropdownItem.vue?vue&type=script&setup=true&lang.ts
3
3
  var g = { class: "min-w-0 flex-1" }, _ = {
4
4
  key: 0,
@@ -24,58 +24,55 @@ var g = { class: "min-w-0 flex-1" }, _ = {
24
24
  },
25
25
  emits: ["click"],
26
26
  setup(o, { emit: v }) {
27
- let y = o, b = v, x = s("ac-dropdown", null), S = y.to ? d("RouterLink") : null, C = e(() => x?.variant?.value === "panel"), w = e(() => y.danger ? "text-danger-strong focus:bg-danger/10" : C.value ? "text-heading focus:bg-primary/10" : "text-heading focus:bg-surface-sunken"), T = e(() => y.disabled ? "button" : y.to && S ? S : y.href ? "a" : "button");
28
- function E(e) {
27
+ let y = o, b = v, x = s("ac-dropdown", null), S = y.to ? f("RouterLink") : null, C = e(() => x?.variant?.value === "panel"), w = e(() => y.danger ? "text-danger-strong focus:bg-danger/10" : C.value ? "text-heading focus:bg-primary/10" : "text-heading focus:bg-surface-sunken"), T = e(() => y.disabled ? "button" : y.to && S ? S : y.href ? "a" : "button"), E = e(() => T.value === "button" ? {
28
+ type: "button",
29
+ disabled: y.disabled || void 0
30
+ } : T.value === "a" ? {
31
+ href: y.href,
32
+ target: y.target
33
+ } : { to: y.to });
34
+ function D(e) {
29
35
  if (y.disabled) {
30
36
  e.preventDefault();
31
37
  return;
32
38
  }
33
39
  b("click", e), x?.close();
34
40
  }
35
- function D(e) {
41
+ function O(e) {
36
42
  if (y.disabled || e.pointerType === "touch") return;
37
43
  let t = e.currentTarget;
38
44
  document.activeElement !== t && t.focus({ preventScroll: !0 });
39
45
  }
40
- function O(e) {
46
+ function k(e) {
41
47
  e.pointerType !== "touch" && document.activeElement === e.currentTarget && x?.focusMenu();
42
48
  }
43
- return (e, s) => (l(), t(f(T.value), {
49
+ return (e, s) => (u(), t(p(T.value), c({
44
50
  role: "menuitem",
45
- tabindex: "-1",
46
- type: T.value === "button" ? "button" : void 0,
47
- href: T.value === "a" ? o.href : void 0,
48
- target: T.value === "a" ? o.target : void 0,
49
- to: T.value === m(S) ? o.to : void 0,
50
- disabled: T.value === "button" && o.disabled || void 0,
51
+ tabindex: "-1"
52
+ }, E.value, {
51
53
  "aria-disabled": o.disabled || void 0,
52
54
  "data-ac-label": o.label || void 0,
53
- class: c(["flex w-full shrink-0 cursor-pointer gap-2 text-left text-base no-underline outline-none select-none transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", [C.value ? "items-center rounded-10 px-5 py-2.5" : "items-start px-4 py-2", w.value]]),
55
+ class: ["flex w-full shrink-0 cursor-pointer gap-2 text-left text-base no-underline outline-none select-none transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", [C.value ? "items-center rounded-10 px-5 py-2.5" : "items-start px-4 py-2", w.value]],
54
56
  "data-ac-ds": "",
55
57
  "data-testid": "ac-dropdown-item",
56
- onClick: E,
57
- onPointermove: D,
58
- onPointerleave: O
59
- }, {
58
+ onClick: D,
59
+ onPointermove: O,
60
+ onPointerleave: k
61
+ }), {
60
62
  default: h(() => [
61
- o.icon || e.$slots.icon ? (l(), r("span", {
63
+ o.icon || e.$slots.icon ? (u(), r("span", {
62
64
  key: 0,
63
- class: c(["inline-flex shrink-0", C.value ? ["[&_svg]:size-5", o.danger ? "text-current" : "text-muted"] : "mt-0.5 [&_svg]:size-4"]),
65
+ class: l(["inline-flex shrink-0", C.value ? ["[&_svg]:size-5", o.danger ? "text-current" : "text-muted"] : "mt-0.5 [&_svg]:size-4"]),
64
66
  "aria-hidden": "true"
65
- }, [u(e.$slots, "icon", {}, () => [(l(), t(f(o.icon)))])], 2)) : n("", !0),
66
- i("span", g, [i("span", { class: c(["block truncate", C.value && "font-medium"]) }, [a(p(o.label), 1), u(e.$slots, "default")], 2), o.description ? (l(), r("span", _, p(o.description), 1)) : n("", !0)]),
67
- o.shortcut ? (l(), r("kbd", {
67
+ }, [d(e.$slots, "icon", {}, () => [(u(), t(p(o.icon)))])], 2)) : n("", !0),
68
+ i("span", g, [i("span", { class: l(["block truncate", C.value && "font-medium"]) }, [a(m(o.label), 1), d(e.$slots, "default")], 2), o.description ? (u(), r("span", _, m(o.description), 1)) : n("", !0)]),
69
+ o.shortcut ? (u(), r("kbd", {
68
70
  key: 1,
69
- class: c(["shrink-0 font-sans text-xs text-muted tabular-nums", !C.value && "mt-0.5"])
70
- }, p(o.shortcut), 3)) : n("", !0)
71
+ class: l(["shrink-0 font-sans text-xs text-muted tabular-nums", !C.value && "mt-0.5"])
72
+ }, m(o.shortcut), 3)) : n("", !0)
71
73
  ]),
72
74
  _: 3
73
- }, 40, [
74
- "type",
75
- "href",
76
- "target",
77
- "to",
78
- "disabled",
75
+ }, 16, [
79
76
  "aria-disabled",
80
77
  "data-ac-label",
81
78
  "class"
package/dist/lib/components/AcModal.vue.d.ts CHANGED
@@ -5,7 +5,7 @@ export interface Props {
5
5
  description?: string;
6
6
  /** Width: `xsmall` 384px, `small` 448px, `normal` 576px, `medium` 800px, `large` 1000px, `xlarge` 1152px, `full` viewport minus 64px. */
7
7
  size?: "xsmall" | "small" | "normal" | "medium" | "large" | "xlarge" | "full";
8
- /** `framed` has a header and footer bar and a close button; `plain` is one padded card (title, body, buttons) on a lighter backdrop, as cloud-ui's confirm dialogs. */
8
+ /** `framed` has a header and footer bar and a close button; `plain` is one padded card (title, body, buttons), as cloud-ui's confirm dialogs. */
9
9
  variant?: "framed" | "plain";
10
10
  /** Shows the close button and allows Escape to close. Turn off while a required action runs. */
11
11
  closable?: boolean;
package/dist/lib/components/AcModal.vue_vue_type_script_setup_true_lang.js CHANGED
@@ -84,8 +84,8 @@ var w = [
84
84
  let e = window.innerWidth - document.documentElement.clientWidth;
85
85
  t.style.overflow = "hidden";
86
86
  let n = getComputedStyle(document.documentElement).scrollbarGutter.includes("stable");
87
- e > 0 && !n && (t.style.paddingRight = `${e}px`);
88
- } else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
87
+ e > 0 && !n && (t.style.paddingRight = `${e}px`), n && t.getBoundingClientRect().height >= window.innerHeight && (document.documentElement.style.backgroundColor = `color-mix(in srgb, ${getComputedStyle(t).backgroundColor} 50%, black)`);
88
+ } else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "", document.documentElement.style.backgroundColor = "");
89
89
  }
90
90
  return b(V, async (e, t) => {
91
91
  if (e) {
@@ -103,7 +103,7 @@ var w = [
103
103
  }, {
104
104
  default: x(() => [V.value ? (p(), a("div", {
105
105
  key: 0,
106
- class: d(["fixed inset-0 z-[80] overflow-y-auto", c.variant === "plain" ? "bg-black/50" : "bg-black/80"]),
106
+ class: "fixed inset-0 z-[80] overflow-y-auto bg-black/50",
107
107
  "data-ac-ds": "",
108
108
  "data-testid": "ac-modal",
109
109
  onKeydown: Z,
@@ -160,7 +160,7 @@ var w = [
160
160
  class: d(["ac-scrollbar min-h-0 flex-1 p-6", c.bodyClass])
161
161
  }, [h(l.$slots, "default")], 2),
162
162
  !c.hideFooter && (l.$slots.footer || l.$slots["footer-left"]) ? (p(), a("footer", I, [o("div", L, [h(l.$slots, "footer-left")]), o("div", R, [h(l.$slots, "footer")])])) : i("", !0)
163
- ], 64))], 10, w)], 32)], 34)) : i("", !0)]),
163
+ ], 64))], 10, w)], 32)], 32)) : i("", !0)]),
164
164
  _: 3
165
165
  })]));
166
166
  }
package/dist/lib/components/AcSidePanel.vue_vue_type_script_setup_true_lang.js CHANGED
@@ -61,8 +61,8 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
61
61
  let e = window.innerWidth - document.documentElement.clientWidth;
62
62
  t.style.overflow = "hidden";
63
63
  let n = getComputedStyle(document.documentElement).scrollbarGutter.includes("stable");
64
- e > 0 && !n && (t.style.paddingRight = `${e}px`);
65
- } else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
64
+ e > 0 && !n && (t.style.paddingRight = `${e}px`), n && t.getBoundingClientRect().height >= window.innerHeight && (document.documentElement.style.backgroundColor = `color-mix(in srgb, ${getComputedStyle(t).backgroundColor} 50%, black)`);
65
+ } else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "", document.documentElement.style.backgroundColor = "");
66
66
  }
67
67
  return y(F, async (e, t) => {
68
68
  if (e) {
package/dist/lib/theme.css CHANGED
@@ -615,15 +615,24 @@
615
615
  padding-inline: calc(var(--spacing) * 4);
616
616
  }
617
617
 
618
+ /* Thin scrollbar, hidden until the pointer is over the area or focus is inside it (cloud-ui's `custom-scrollbar`). */
618
619
  @utility ac-scrollbar {
619
620
  overflow: auto;
620
621
  scrollbar-width: thin;
621
- scrollbar-color: rgb(176 176 176 / 0.55) transparent;
622
+ scrollbar-color: transparent transparent;
623
+ &:hover, &:focus-within { scrollbar-color: rgb(176 176 176 / 0.55) transparent; }
622
624
  &::-webkit-scrollbar { width: 4px; height: 4px; }
623
- &::-webkit-scrollbar-thumb { background-color: #b0b0b0; border-radius: 9999px; }
625
+ &::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 9999px; }
626
+ &:hover::-webkit-scrollbar-thumb, &:focus-within::-webkit-scrollbar-thumb { background-color: #b0b0b0; }
624
627
  &::-webkit-scrollbar-track { background: transparent; }
625
628
  }
626
629
 
630
+ /* With `ac-scrollbar`: keeps the thumb visible all the time (cloud-ui's `custom-scrollbar-true`). */
631
+ @utility ac-scrollbar-visible {
632
+ &.ac-scrollbar { scrollbar-color: rgb(176 176 176 / 0.55) transparent; }
633
+ &.ac-scrollbar::-webkit-scrollbar-thumb { background-color: #b0b0b0; }
634
+ }
635
+
627
636
  /* Keyframes for AcSkeleton's shimmer and AcProgress's indeterminate bar; kept here so the library ships no extra CSS file. */
628
637
  @keyframes ac-skeleton-shimmer {
629
638
  from { background-position: 150% 0; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ac-design/design-system",
3
- "version": "2.4.0",
3
+ "version": "2.4.2",
4
4
  "description": "AppsCode design system: Tailwind CSS v4 theme and Vue 3 components.",
5
5
  "repository": {
6
6
  "type": "git",