@geckou/ui-vue 0.13.0 → 0.14.0

package/README.md

@@ -301,6 +301,16 @@ const articles = ref<any[]>([])
 
 定義例はデモの `demo/styles/base.scss` を参照。
 
+## 0.14.0 の変更
+
+- `DropdownUi` が Escape で閉じ、トリガーへフォーカスを戻す。処理したときは
+  `preventDefault()` するので、`ModalBox` の中に置いてもダイアログまで閉じない
+- `DropdownUi` / `SlideDownUi` のトリガーに `aria-controls` が付き、
+  `DropdownUi` には `aria-haspopup="true"` も付く
+- `DropdownUi` / `SlideDownUi` の中身の高さを `ResizeObserver` で測るようにした。
+  `onUpdated` だけでは、スロットの中の子コンポーネントが自前の状態で伸縮したときに
+  高さがずれていた
+
 ## 0.13.0 の変更
 
 - `BasicButton` はローディング中に `disabled` にしない（押した瞬間にフォーカスが

package/dist/components/DropdownUi.vue.d.ts

@@ -12,6 +12,7 @@ declare function __VLS_template(): {
     };
     refs: {
         root: HTMLDivElement;
+        trigger: HTMLButtonElement;
         contents: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
@@ -27,6 +28,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     contentsWidth: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     root: HTMLDivElement;
+    trigger: HTMLButtonElement;
     contents: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/DropdownUi.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent as h, ref as o, onMounted as k, onUpdated as $, openBlock as a, createElementBlock as u, normalizeClass as l, createElementVNode as f, normalizeStyle as v, withModifiers as p, renderSlot as m, createBlock as w, createCommentVNode as b } from "vue";
-import C from "./Icon/KeyboardArrowDownIcon.vue.js";
-import { useClickOutside as D } from "../scripts/use-click-outside.js";
-const B = ["disabled", "aria-expanded"], z = ["inert"], E = /* @__PURE__ */ h({
+import { defineComponent as D, ref as s, onMounted as C, onBeforeUnmount as z, openBlock as c, createElementBlock as m, normalizeClass as a, withKeys as B, createElementVNode as y, normalizeStyle as b, withModifiers as A, renderSlot as g, createBlock as H, createCommentVNode as h } from "vue";
+import S from "./Icon/KeyboardArrowDownIcon.vue.js";
+import { useClickOutside as I } from "../scripts/use-click-outside.js";
+import { nextUniqueId as O } from "../scripts/unique-id.js";
+const V = ["disabled", "aria-expanded", "aria-haspopup", "aria-controls"], R = ["inert"], N = /* @__PURE__ */ D({
   __name: "DropdownUi",
   props: {
     isHiddenArrow: { type: Boolean, default: !1 },
@@ -9,57 +10,72 @@ const B = ["disabled", "aria-expanded"], z = ["inert"], E = /* @__PURE__ */ h({
     isDisabled: { type: Boolean, default: !1 },
     contentsWidth: { default: "auto" }
   },
-  setup(n, { expose: y }) {
-    const t = o(!1), i = o(null), r = o(null), c = o(0), g = () => t.value = !t.value, s = () => t.value = !1, d = () => {
-      const e = r.value;
-      e && (c.value = e.clientHeight);
+  setup(n, { expose: $ }) {
+    const t = s(!1), d = s(null), i = s(null), u = s(null), f = s(0), v = O("dropdown") + "_panel", k = () => t.value = !t.value, l = () => t.value = !1, w = (e) => {
+      var r;
+      t.value && (e.preventDefault(), l(), (r = u.value) == null || r.focus());
+    }, p = () => {
+      const e = i.value;
+      e && (f.value = e.clientHeight);
     };
-    return D(i, () => s()), k(() => d()), $(() => d()), y({ isContentsOpened: t, close: s }), (e, A) => (a(), u("div", {
+    I(d, () => l());
+    let o = null;
+    return C(() => {
+      p();
+      const e = i.value;
+      !e || typeof ResizeObserver > "u" || (o = new ResizeObserver(p), o.observe(e));
+    }), z(() => o == null ? void 0 : o.disconnect()), $({ isContentsOpened: t, close: l }), (e, r) => (c(), m("div", {
       ref_key: "root",
-      ref: i,
-      class: l(e.$style.drop_down_box)
+      ref: d,
+      class: a(e.$style.drop_down_box),
+      onKeydown: B(w, ["escape"])
     }, [
-      f("button", {
-        class: l(e.$style.button),
+      y("button", {
+        ref_key: "trigger",
+        ref: u,
+        class: a(e.$style.button),
         disabled: n.isDisabled,
         "aria-expanded": t.value,
+        "aria-haspopup": e.$slots.contents ? "true" : void 0,
+        "aria-controls": e.$slots.contents ? v : void 0,
         type: "button",
-        style: v({
+        style: b({
           "--trigger-color": n.isDisabled || !e.$slots.contents ? "var(--text-color)" : "var(--link-color)",
           cursor: n.isDisabled || !e.$slots.contents ? "auto" : "pointer"
         }),
-        onClick: p(g, ["prevent"])
+        onClick: A(k, ["prevent"])
       }, [
-        m(e.$slots, "trigger"),
-        n.isHiddenArrow || !e.$slots.contents || n.isDisabled ? b("", !0) : (a(), w(C, {
+        g(e.$slots, "trigger"),
+        n.isHiddenArrow || !e.$slots.contents || n.isDisabled ? h("", !0) : (c(), H(S, {
           key: 0,
-          class: l([e.$style.icon, { [e.$style.open]: t.value }])
+          class: a([e.$style.icon, { [e.$style.open]: t.value }])
         }, null, 8, ["class"]))
-      ], 14, B),
-      e.$slots.contents ? (a(), u("div", {
+      ], 14, V),
+      e.$slots.contents ? (c(), m("div", {
         key: 0,
-        class: l(e.$style.contents),
+        id: v,
+        class: a(e.$style.contents),
         inert: !t.value || void 0,
-        style: v({
+        style: b({
           boxShadow: t.value ? "var(--box-shadow)" : "none",
-          blockSize: t.value ? `${c.value}px` : 0,
+          blockSize: t.value ? `${f.value}px` : 0,
           inlineSize: n.contentsWidth,
           right: n.contentAlignment === "right" ? "calc(var(--bv) * -0.5)" : "auto",
           left: n.contentAlignment === "left" ? "calc(var(--bv) * -0.5)" : "auto",
           zIndex: "2"
         })
       }, [
-        f("div", {
+        y("div", {
           ref_key: "contents",
-          ref: r,
-          onClick: s
+          ref: i,
+          onClick: l
         }, [
-          m(e.$slots, "contents")
+          g(e.$slots, "contents")
         ], 512)
-      ], 14, z)) : b("", !0)
-    ], 2));
+      ], 14, R)) : h("", !0)
+    ], 34));
   }
 });
 export {
-  E as default
+  N as default
 };

package/dist/components/SlideDownUi.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent as h, ref as s, onMounted as k, onUpdated as C, watch as $, openBlock as p, createElementBlock as b, normalizeClass as o, normalizeStyle as f, createElementVNode as l, withModifiers as B, renderSlot as y, createBlock as D, createCommentVNode as O } from "vue";
-import w from "./Icon/KeyboardArrowDownIcon.vue.js";
-import { useClickOutside as H } from "../scripts/use-click-outside.js";
-const S = ["disabled", "aria-expanded"], z = ["inert"], U = /* @__PURE__ */ h({
+import { defineComponent as k, ref as l, onMounted as C, onBeforeUnmount as $, watch as B, openBlock as v, createElementBlock as O, normalizeClass as t, normalizeStyle as y, createElementVNode as i, withModifiers as w, renderSlot as m, createBlock as D, createCommentVNode as H } from "vue";
+import z from "./Icon/KeyboardArrowDownIcon.vue.js";
+import { useClickOutside as I } from "../scripts/use-click-outside.js";
+import { nextUniqueId as S } from "../scripts/unique-id.js";
+const U = ["disabled", "aria-expanded"], V = ["inert"], R = /* @__PURE__ */ k({
   __name: "SlideDownUi",
   props: {
     isOpened: { type: [Boolean, null], default: null },
@@ -10,57 +11,65 @@ const S = ["disabled", "aria-expanded"], z = ["inert"], U = /* @__PURE__ */ h({
     isDisableClickOutside: { type: Boolean },
     duration: { default: 0.3 }
   },
-  setup(i, { expose: v }) {
-    const n = i, t = s(n.isOpened || !1), a = s(null), r = s(null), d = s(0), m = () => t.value = !t.value, c = () => t.value = !1, g = () => {
-      n.isDisableClickOutside || c();
-    }, u = () => {
+  setup(a, { expose: g }) {
+    const s = a, n = l(s.isOpened || !1), d = l(null), r = l(null), c = l(0), u = S("slide_down") + "_panel", b = () => n.value = !n.value, p = () => n.value = !1, h = () => {
+      s.isDisableClickOutside || p();
+    }, f = () => {
       const e = r.value;
-      e && (d.value = e.clientHeight);
+      e && (c.value = e.clientHeight);
     };
-    return H(a, () => g()), k(() => u()), C(() => u()), $(
-      () => n.isOpened,
+    I(d, () => h());
+    let o = null;
+    return C(() => {
+      f();
+      const e = r.value;
+      !e || typeof ResizeObserver > "u" || (o = new ResizeObserver(f), o.observe(e));
+    }), $(() => o == null ? void 0 : o.disconnect()), B(
+      () => s.isOpened,
       (e) => {
-        typeof e == "boolean" && (t.value = e);
+        typeof e == "boolean" && (n.value = e);
       }
-    ), v({ isOpenedContents: t, close: c }), (e, A) => (p(), b("div", {
+    ), g({ isOpenedContents: n, close: p }), (e, _) => (v(), O("div", {
       ref_key: "root",
-      ref: a,
-      class: o({ [e.$style.opened]: t.value }),
-      style: f({ "--accordion-toggle-duration": `${n.duration}s` })
+      ref: d,
+      class: t({ [e.$style.opened]: n.value }),
+      style: y({ "--accordion-toggle-duration": `${s.duration}s` })
     }, [
-      l("button", {
-        class: o(e.$style.trigger),
-        disabled: i.isDisabled,
-        "aria-expanded": t.value,
+      i("button", {
+        class: t(e.$style.trigger),
+        disabled: a.isDisabled,
+        "aria-expanded": n.value,
+        "aria-controls": u,
         type: "button",
-        onClick: B(m, ["prevent"])
+        onClick: w(b, ["prevent"])
       }, [
-        l("div", {
-          class: o(e.$style.trigger_content)
+        i("div", {
+          class: t(e.$style.trigger_content)
         }, [
-          y(e.$slots, "trigger")
+          m(e.$slots, "trigger")
         ], 2),
-        i.isHiddenArrow ? O("", !0) : (p(), D(w, {
+        a.isHiddenArrow ? H("", !0) : (v(), D(z, {
           key: 0,
-          class: o(e.$style.icon)
+          class: t(e.$style.icon)
         }, null, 8, ["class"]))
-      ], 10, S),
-      l("div", {
-        style: f({ height: t.value ? `${d.value}px` : 0 }),
-        class: o(e.$style.contents),
-        inert: !t.value || void 0
+      ], 10, U),
+      i("div", {
+        id: u,
+        style: y({ height: n.value ? `${c.value}px` : 0 }),
+        class: t(e.$style.contents),
+        inert: !n.value || void 0
       }, [
-        l("div", {
+        i("div", {
           ref_key: "contents",
           ref: r,
-          class: o(e.$style.container)
+          class: t(e.$style.container)
         }, [
-          y(e.$slots, "default")
+          m(e.$slots, "default")
         ], 2)
-      ], 14, z)
+      ], 14, V)
     ], 6));
   }
 });
 export {
-  U as default
+  R as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckou/ui-vue",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A set of reusable Vue UI components (forms & article lists) by Geckou",
   "main": "dist/index.js",
   "module": "dist/index.js",