@digitalwalletcorp/vue-core 1.0.1 → 1.2.0

package/lib/nuxt.d.cts

@@ -0,0 +1,10 @@
+/**
+ * コンポーネントをNuxtのコンポーネント自動importへ登録するモジュール。
+ * グローバル登録(registerComponents)と違い、テンプレートで使ったコンポーネントだけがバンドルされ、
+ * 型は Nuxt が .nuxt/components.d.ts へ生成するため、利用側に型定義は要らない。
+ *
+ * 名前の一覧を得るためだけに ./components をimportしている。
+ * このモジュールはビルド時にNuxtが読み込むもので、アプリの実行時バンドルには入らない
+ */
+declare const _default: import('@nuxt/schema').NuxtModule<import('@nuxt/schema').ModuleOptions, import('@nuxt/schema').ModuleOptions, false>;
+export default _default;

package/lib/nuxt.js

@@ -1,5 +1,5 @@
 import { defineNuxtModule as t, createResolver as r, addComponent as n } from "@nuxt/kit";
-import { c as a } from "./components-p1BluzXb.js";
+import { c as a } from "./components-DBK8NUBh.js";
 const c = t({
   meta: {
     name: "@digitalwalletcorp/vue-core",

package/lib/page-section.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./page-section.vue_vue_type_style_index_0_lang-DEAkTLxd.cjs");exports.default=e._sfc_main;

package/lib/page-section.d.cts

@@ -0,0 +1,34 @@
+import { ClassValue, StyleValue } from 'vue';
+/** 見出しのアイコンとして選べるもの */
+type PageSectionIcon = 'diamond' | 'circle' | 'square' | 'pushpin' | 'round-pushpin';
+interface Props {
+    /** 見出しの文字。未指定なら見出しを表示しない */
+    title?: string;
+    /** 見出しのアイコン。これ以外のアイコンは#iconスロットで渡す デフォルト 'diamond' */
+    icon?: PageSectionIcon;
+    /** diamond・circle・squareの大きさ。未指定ならアイコンの既定値(large) */
+    iconVariant?: 'large' | 'medium' | 'small';
+    /** diamond・circle・squareの色。未指定ならdiamondは#1a44b6、circleは#e78b2f、squareは#d13a2b */
+    iconColor?: string;
+    /** 見出しに付けるclass */
+    titleClass?: ClassValue;
+    /** 見出しに付けるstyle */
+    titleStyle?: StyleValue;
+}
+interface Slots {
+    /** 見出しの文字の前に表示するアイコン。iconより優先する */
+    icon?(): unknown;
+    default?(): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    icon: PageSectionIcon;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/page-section.d.ts

@@ -0,0 +1,34 @@
+import { ClassValue, StyleValue } from 'vue';
+/** 見出しのアイコンとして選べるもの */
+type PageSectionIcon = 'diamond' | 'circle' | 'square' | 'pushpin' | 'round-pushpin';
+interface Props {
+    /** 見出しの文字。未指定なら見出しを表示しない */
+    title?: string;
+    /** 見出しのアイコン。これ以外のアイコンは#iconスロットで渡す デフォルト 'diamond' */
+    icon?: PageSectionIcon;
+    /** diamond・circle・squareの大きさ。未指定ならアイコンの既定値(large) */
+    iconVariant?: 'large' | 'medium' | 'small';
+    /** diamond・circle・squareの色。未指定ならdiamondは#1a44b6、circleは#e78b2f、squareは#d13a2b */
+    iconColor?: string;
+    /** 見出しに付けるclass */
+    titleClass?: ClassValue;
+    /** 見出しに付けるstyle */
+    titleStyle?: StyleValue;
+}
+interface Slots {
+    /** 見出しの文字の前に表示するアイコン。iconより優先する */
+    icon?(): unknown;
+    default?(): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    icon: PageSectionIcon;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/page-section.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./page-section.vue_vue_type_style_index_0_lang-DpVQe_rV.js";
+export {
+  f as default
+};

package/lib/page-section.vue_vue_type_style_index_0_lang-DEAkTLxd.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),n=require("@digitalwalletcorp/vue-svg-icons"),r=require("./label-icon.vue_vue_type_style_index_0_lang-D9Cimu20.cjs"),a={class:"dwui-page-section"},i={class:"dwui-page-section-content"},p=e.defineComponent({__name:"page-section",props:{title:{},icon:{default:"diamond"},iconVariant:{},iconColor:{},titleClass:{type:[Boolean,null,String,Object,Array]},titleStyle:{type:[Boolean,null,String,Object,Array]}},setup(l){const o=l,s={diamond:{component:n.SvgDiamond,shape:!0,color:"#1a44b6"},circle:{component:n.SvgCircle,shape:!0,color:"#e78b2f"},square:{component:n.SvgSquare,shape:!0,color:"#d13a2b"},pushpin:{component:n.SvgPushpin,shape:!1},"round-pushpin":{component:n.SvgRoundPushpin,shape:!1}},c=e.computed(()=>{const t=s[o.icon];return{component:t.component,props:t.shape?{variant:o.iconVariant,color:o.iconColor??t.color}:{}}});return(t,u)=>(e.openBlock(),e.createElementBlock("section",a,[o.title!=null?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["dwui-page-section-title",o.titleClass]),style:e.normalizeStyle(o.titleStyle)},[e.createVNode(r._sfc_main,null,{icon:e.withCtx(()=>[e.renderSlot(t.$slots,"icon",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(c.value.component),e.normalizeProps(e.guardReactiveProps(c.value.props)),null,16))])]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(o.title),1)]),_:3})],6)):e.createCommentVNode("",!0),e.createElementVNode("div",i,[e.renderSlot(t.$slots,"default")])]))}});exports._sfc_main=p;

package/lib/page-section.vue_vue_type_style_index_0_lang-DpVQe_rV.js

@@ -0,0 +1,54 @@
+import { defineComponent as i, computed as p, openBlock as t, createElementBlock as r, normalizeStyle as m, normalizeClass as u, createVNode as d, withCtx as a, createTextVNode as S, toDisplayString as h, renderSlot as l, createBlock as _, resolveDynamicComponent as g, normalizeProps as f, guardReactiveProps as v, createCommentVNode as y, createElementVNode as C } from "vue";
+import { SvgRoundPushpin as V, SvgPushpin as b, SvgSquare as B, SvgCircle as N, SvgDiamond as P } from "@digitalwalletcorp/vue-svg-icons";
+import { _ as k } from "./label-icon.vue_vue_type_style_index_0_lang-me52HE2V.js";
+const w = { class: "dwui-page-section" }, E = { class: "dwui-page-section-content" }, $ = /* @__PURE__ */ i({
+  __name: "page-section",
+  props: {
+    title: {},
+    icon: { default: "diamond" },
+    iconVariant: {},
+    iconColor: {},
+    titleClass: { type: [Boolean, null, String, Object, Array] },
+    titleStyle: { type: [Boolean, null, String, Object, Array] }
+  },
+  setup(s) {
+    const e = s, c = {
+      diamond: { component: P, shape: !0, color: "#1a44b6" },
+      circle: { component: N, shape: !0, color: "#e78b2f" },
+      square: { component: B, shape: !0, color: "#d13a2b" },
+      pushpin: { component: b, shape: !1 },
+      "round-pushpin": { component: V, shape: !1 }
+    }, n = p(() => {
+      const o = c[e.icon];
+      return {
+        component: o.component,
+        props: o.shape ? { variant: e.iconVariant, color: e.iconColor ?? o.color } : {}
+      };
+    });
+    return (o, z) => (t(), r("section", w, [
+      e.title != null ? (t(), r("div", {
+        key: 0,
+        class: u(["dwui-page-section-title", e.titleClass]),
+        style: m(e.titleStyle)
+      }, [
+        d(k, null, {
+          icon: a(() => [
+            l(o.$slots, "icon", {}, () => [
+              (t(), _(g(n.value.component), f(v(n.value.props)), null, 16))
+            ])
+          ]),
+          default: a(() => [
+            S(" " + h(e.title), 1)
+          ]),
+          _: 3
+        })
+      ], 6)) : y("", !0),
+      C("div", E, [
+        l(o.$slots, "default")
+      ])
+    ]));
+  }
+});
+export {
+  $ as _
+};

package/lib/page-title.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./page-title.vue_vue_type_style_index_0_lang-BqIsIks5.cjs");exports.default=e._sfc_main;

package/lib/page-title.d.cts

@@ -0,0 +1,20 @@
+interface Props {
+    /** タイトルの文字 */
+    title: string;
+}
+interface Slots {
+    /** タイトルの文字の前に表示するアイコン */
+    icon?(): unknown;
+    /** タイトルバーの右側に表示する内容 */
+    default?(): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/page-title.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    /** タイトルの文字 */
+    title: string;
+}
+interface Slots {
+    /** タイトルの文字の前に表示するアイコン */
+    icon?(): unknown;
+    /** タイトルバーの右側に表示する内容 */
+    default?(): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/page-title.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./page-title.vue_vue_type_style_index_0_lang-ChZot85K.js";
+export {
+  f as default
+};

package/lib/page-title.vue_vue_type_style_index_0_lang-BqIsIks5.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),l=require("./label-icon.vue_vue_type_style_index_0_lang-D9Cimu20.cjs"),c={class:"dwui-page-title"},i={key:0,class:"dwui-page-title-actions"},a=e.defineComponent({__name:"page-title",props:{title:{}},setup(n){const s=n,t=e.useSlots();return(o,r)=>(e.openBlock(),e.createElementBlock("section",c,[e.createVNode(l._sfc_main,{class:"dwui-page-title-label"},e.createSlots({default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(s.title),1)]),_:2},[t.icon!=null?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"icon")]),key:"0"}:void 0]),1024),t.default!=null?(e.openBlock(),e.createElementBlock("span",i,[e.renderSlot(o.$slots,"default")])):e.createCommentVNode("",!0)]))}});exports._sfc_main=a;

package/lib/page-title.vue_vue_type_style_index_0_lang-ChZot85K.js

@@ -0,0 +1,36 @@
+import { defineComponent as c, useSlots as r, openBlock as o, createElementBlock as s, createVNode as p, createSlots as d, withCtx as l, createTextVNode as u, toDisplayString as _, renderSlot as n, createCommentVNode as m } from "vue";
+import { _ as f } from "./label-icon.vue_vue_type_style_index_0_lang-me52HE2V.js";
+const g = { class: "dwui-page-title" }, h = {
+  key: 0,
+  class: "dwui-page-title-actions"
+}, y = /* @__PURE__ */ c({
+  __name: "page-title",
+  props: {
+    title: {}
+  },
+  setup(a) {
+    const i = a, e = r();
+    return (t, k) => (o(), s("section", g, [
+      p(f, { class: "dwui-page-title-label" }, d({
+        default: l(() => [
+          u(" " + _(i.title), 1)
+        ]),
+        _: 2
+      }, [
+        e.icon != null ? {
+          name: "icon",
+          fn: l(() => [
+            n(t.$slots, "icon")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1024),
+      e.default != null ? (o(), s("span", h, [
+        n(t.$slots, "default")
+      ])) : m("", !0)
+    ]));
+  }
+});
+export {
+  y as _
+};

package/lib/register.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components-CvmuAs2C.cjs");function r(e){for(const[o,n]of Object.entries(t.components))e.component(o,n)}exports.registerComponents=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components-CNOeuZPu.cjs");function r(e){for(const[o,n]of Object.entries(t.components))e.component(o,n)}exports.registerComponents=r;

package/lib/register.d.cts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import * as components from './components.cjs';
+type VueCoreComponents = typeof components;
+declare module 'vue' {
+    interface GlobalComponents extends VueCoreComponents {
+    }
+}
+export declare function registerComponents(app: App): void;
+export {};

package/lib/register.js

@@ -1,4 +1,4 @@
-import { c as t } from "./components-p1BluzXb.js";
+import { c as t } from "./components-DBK8NUBh.js";
 function m(o) {
   for (const [n, e] of Object.entries(t))
     o.component(n, e);

package/lib/style.css

@@ -1 +1 @@
-:where(.dwui-label-icon){display:inline-block}:where(.dwui-label-icon>.dwui-label){display:inline-block}:where(.dwui-label-icon>.dwui-label:not(:first-child)){margin-left:var(--dwui-label-icon-gap, .25em)}:where(.dwui-accordion-fieldset){position:relative}:where(.dwui-accordion-toggle){display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-contents){position:relative;width:fit-content;padding:2px;overflow:hidden;opacity:1}:where(.dwui-accordion-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-contents.dwui-shrunk){height:auto;max-height:70px;opacity:.75;transition:all .3s linear}:where(.dwui-hourglass-loading){animation:dwui-hourglass-loading-spin 1.2s linear infinite}@keyframes dwui-hourglass-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-tab-content[aria-checked=false]){display:none}:where(.dwui-tab-content[aria-checked=true]){display:block;position:relative;padding:4px 8px;overflow:hidden;animation:dwui-tab-slide-in var(--dwui-tab-slide-duration, .35s) var(--dwui-tab-slide-easing, cubic-bezier(.22, 1, .36, 1))}:where(.dwui-tab-loading){position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--dwui-loading-overlay, rgba(0, 0, 0, .25))}:where(.dwui-tab-loading-spinner){width:var(--dwui-loading-spinner-size, 40px);height:var(--dwui-loading-spinner-size, 40px);border:4px solid var(--dwui-loading-spinner-track, rgba(255, 255, 255, .4));border-top-color:var(--dwui-loading-spinner-color, #ffffff);border-radius:50%;animation:dwui-tab-loading-spin .8s linear infinite}@keyframes dwui-tab-loading-spin{to{transform:rotate(360deg)}}@keyframes dwui-tab-slide-in{0%{opacity:0;transform:translate(var(--dwui-tab-slide-distance, -128px))}to{opacity:1;transform:translate(0)}}:where(.dwui-tab-group){margin-bottom:8px}:where(.dwui-tab-headers){display:flex;flex-direction:row;flex-wrap:wrap;margin-top:5px;padding-bottom:4px}:where(.dwui-tab-radio){display:none}:where(.dwui-tab-item){display:block;min-width:100px;padding:0 4px;border:1px solid var(--dwui-tab-border, #565656);border-bottom:1px solid var(--dwui-tab-header-accent, #5ab4bd);background:var(--dwui-tab-header-bg, linear-gradient(#1313c7, navy));line-height:2em;text-align:center;white-space:nowrap;color:var(--dwui-tab-header-text, azure);text-overflow:ellipsis;cursor:pointer;transition:all .2s ease}:where(.dwui-tab-radio:checked+.dwui-tab-item){background:var(--dwui-tab-header-selected-bg, linear-gradient(#1313c7, rgb(149, 149, 234), #1313c7));color:var(--dwui-tab-header-selected-text, azure);cursor:default}:where(.dwui-tab-radio:disabled+.dwui-tab-item){background:var(--dwui-tab-header-disabled-bg, gray);cursor:not-allowed}:where(.dwui-tab-item.dwui-tab-warn){background:var(--dwui-tab-header-warn-bg, #efef13);color:var(--dwui-tab-header-warn-text, midnightblue)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-warn){background:var(--dwui-tab-header-warn-selected-bg, linear-gradient(#fafa06, rgb(232, 238, 206), #fafa06))}:where(.dwui-tab-item.dwui-tab-error){background:var(--dwui-tab-header-error-bg, red);color:var(--dwui-tab-header-error-text, azure)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-error){background:var(--dwui-tab-header-error-selected-bg, linear-gradient(#ff0000, rgb(240, 136, 136), #ff0000))}:where(.dwui-tab-radio:not(:checked)+.dwui-tab-item:hover){box-shadow:inset 0 0 0 999px var(--dwui-tab-header-hover-overlay, rgba(255, 255, 255, .35))}:where(.dwui-tab-items){height:100%;border:1px solid var(--dwui-tab-border, #565656);overflow:hidden}
+:where(.dwui-label-icon){display:inline-block}:where(.dwui-label-icon>.dwui-label){display:inline-block}:where(.dwui-label-icon>.dwui-label:not(:first-child)){margin-left:var(--dwui-gap-label-icon, .25em)}:where(.dwui-accordion-fieldset){position:relative}:where(.dwui-accordion-toggle){display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-contents){position:relative;width:fit-content;padding:2px;overflow:hidden;opacity:1}:where(.dwui-accordion-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-contents.dwui-shrunk){height:auto;max-height:70px;opacity:.75;transition:all .3s linear}:where(.dwui-accordion-section){position:relative}:where(.dwui-accordion-section-contents){position:relative;width:fit-content;overflow:hidden}:where(.dwui-accordion-section-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk){height:auto;max-height:70px;transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk:not(.dwui-no-gradient)):after{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,transparent 0%,transparent 60%,var(--dwui-color-accordion-section-fade, Canvas) 100%);pointer-events:none}:where(.dwui-accordion-section-control){position:relative;display:flex;justify-content:center;width:100%}:where(.dwui-accordion-section-toggle){display:inline-flex;align-items:center;cursor:pointer}:where(.dwui-accordion-section-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-section-toggle[aria-expanded=true]){margin-top:8px}:where(.dwui-accordion-section-toggle[aria-expanded=false]){margin-top:-10px}:where(.dwui-hourglass-loading){animation:dwui-hourglass-loading-spin 1.2s linear infinite}@keyframes dwui-hourglass-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-page-section){display:block;margin:4px 0 8px;padding-top:2px;font-size:var(--dwui-font-size-page-section, 12px);font-weight:500}:where(.dwui-page-section-title){display:flex;align-items:center;font-size:var(--dwui-font-size-page-section-title, 14px)}:where(.dwui-page-section-content){margin:8px 0 8px 16px}:where(.dwui-page-title){display:flex;align-items:center;justify-content:space-between;width:var(--dwui-width-page-title, auto);padding:4px;border-radius:4px;background:var(--dwui-background-page-title, linear-gradient(#323232 0%, rgb(32, 32, 31) 25%, rgb(32, 32, 31) 75%, #323232 100%));color:var(--dwui-color-text-page-title, rgb(220, 220, 220));font-size:var(--dwui-font-size-page-title, 14px);font-weight:var(--dwui-font-weight-page-title, normal)}:where(.dwui-tab-content[aria-checked=false]){display:none}:where(.dwui-tab-content[aria-checked=true]){display:block;position:relative;padding:4px 8px;overflow:hidden;animation:dwui-tab-slide-in var(--dwui-duration-tab-slide, .35s) var(--dwui-easing-tab-slide, cubic-bezier(.22, 1, .36, 1))}:where(.dwui-tab-loading){position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--dwui-overlay-color-loading, rgba(0, 0, 0, .25))}:where(.dwui-tab-loading-spinner){width:var(--dwui-size-loading-spinner, 40px);height:var(--dwui-size-loading-spinner, 40px);border:4px solid var(--dwui-border-color-loading-spinner-track, rgba(255, 255, 255, .4));border-top-color:var(--dwui-border-color-loading-spinner, #ffffff);border-radius:50%;animation:dwui-tab-loading-spin .8s linear infinite}@keyframes dwui-tab-loading-spin{to{transform:rotate(360deg)}}@keyframes dwui-tab-slide-in{0%{opacity:0;transform:translate(var(--dwui-distance-tab-slide, -128px))}to{opacity:1;transform:translate(0)}}:where(.dwui-tab-group){margin-bottom:8px}:where(.dwui-tab-headers){display:flex;flex-direction:row;flex-wrap:wrap;margin-top:5px;padding-bottom:4px}:where(.dwui-tab-radio){display:none}:where(.dwui-tab-item){display:block;min-width:100px;padding:0 4px;border:1px solid var(--dwui-border-color-tab, #565656);border-bottom:1px solid var(--dwui-border-color-tab-header-accent, #5ab4bd);background:var(--dwui-background-tab-header, linear-gradient(#1313c7, navy));line-height:2em;text-align:center;white-space:nowrap;color:var(--dwui-color-text-tab-header, azure);text-overflow:ellipsis;cursor:pointer;transition:all .2s ease}:where(.dwui-tab-radio:checked+.dwui-tab-item){background:var(--dwui-background-tab-header-selected, linear-gradient(#1313c7, rgb(149, 149, 234), #1313c7));color:var(--dwui-color-text-tab-header-selected, azure);cursor:default}:where(.dwui-tab-radio:disabled+.dwui-tab-item){background:var(--dwui-background-tab-header-disabled, gray);cursor:not-allowed}:where(.dwui-tab-item.dwui-tab-warn){background:var(--dwui-background-tab-header-warn, #efef13);color:var(--dwui-color-text-tab-header-warn, midnightblue)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-warn){background:var(--dwui-background-tab-header-warn-selected, linear-gradient(#fafa06, rgb(232, 238, 206), #fafa06))}:where(.dwui-tab-item.dwui-tab-error){background:var(--dwui-background-tab-header-error, red);color:var(--dwui-color-text-tab-header-error, azure)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-error){background:var(--dwui-background-tab-header-error-selected, linear-gradient(#ff0000, rgb(240, 136, 136), #ff0000))}:where(.dwui-tab-radio:not(:checked)+.dwui-tab-item:hover){box-shadow:inset 0 0 0 999px var(--dwui-overlay-color-tab-header-hover, rgba(255, 255, 255, .35))}:where(.dwui-tab-items){height:100%;border:1px solid var(--dwui-border-color-tab, #565656);overflow:hidden}

package/lib/tab-content.d.cts

@@ -0,0 +1,39 @@
+import { ClassValue, StyleValue } from 'vue';
+import { TabContentStatus } from './internal/tab-group-context.cjs';
+interface Props {
+    /** タブを識別するID。TabGroupのselectedTabLabelIdに渡す値 */
+    labelId: string;
+    /** タブの見出しの文字 */
+    description: string;
+    /** trueの場合、タブを選べなくし、中身も描画しない */
+    disabled?: boolean;
+    /** タブの見出しの状態。見出しの色が変わる */
+    status?: TabContentStatus;
+    /** タブの見出しに付けるclass */
+    headerClass?: ClassValue;
+    /** タブの見出しに付けるstyle */
+    headerStyle?: StyleValue;
+}
+interface Slots {
+    /** タブの見出しの文字の前に表示するアイコン */
+    icon?(): unknown;
+    /**
+     * タブの中身
+     * activated: タブが選ばれて表示されている間はtrue。中身のコンポーネントにpropsで渡し、選ばれたときの処理の契機にする
+     * setLoading: trueを渡すと読み込み中の表示にする。表示はTabGroupの#loadingスロット、未指定なら既定の表示
+     */
+    default?(props: {
+        activated: boolean;
+        setLoading: (loading: boolean) => void;
+    }): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/tab-group.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tab-group.vue_vue_type_style_index_0_lang-CwVGYZAo.cjs");exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tab-group.vue_vue_type_style_index_0_lang-CMaufRJV.cjs");exports.default=e._sfc_main;

package/lib/tab-group.d.cts

@@ -0,0 +1,44 @@
+import { ClassValue, StyleValue, VNode } from 'vue';
+interface Props {
+    /** ラジオボタンのname。未指定なら自動で採番する */
+    tabGroupName?: string;
+    /** selectedTabLabelIdが未指定のとき、trueならdisabledでない最初のタブを選ぶ。falseなら先頭のタブ(disabledなら中身は空になる) */
+    selectFirstEnabled?: boolean;
+    /** タブの見出しを並べる部分に付けるclass */
+    headerClass?: ClassValue;
+    /** タブの見出しを並べる部分に付けるstyle */
+    headerStyle?: StyleValue;
+    /** タブの見出しを移動する先(Teleportのto) */
+    teleport?: string;
+}
+type __VLS_Props = Props;
+interface Slots {
+    default?(): VNode[];
+    /** 読み込み中のTabContentに重ねて表示する内容。未指定なら既定の読み込み中表示 */
+    loading?(): VNode[];
+}
+type __VLS_Slots = Slots;
+type __VLS_ModelProps = {
+    /**
+     * 選択するタブのlabelId。未指定なら先頭のタブ
+     * 親がいつ代入しても選び直せるよう、v-model:selected-tab-label-idで同期する前提とする
+     */
+    'selectedTabLabelId'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:selectedTabLabelId": (value: string | undefined) => any;
+} & {
+    "emit:changeSelectedTab": (labelId: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onEmit:changeSelectedTab"?: ((labelId: string) => any) | undefined;
+    "onUpdate:selectedTabLabelId"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/tab-group.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./tab-group.vue_vue_type_style_index_0_lang-CjnBkvvZ.js";
+import { _ as f } from "./tab-group.vue_vue_type_style_index_0_lang-C84mDEOC.js";
 export {
   f as default
 };

package/lib/{tab-group.vue_vue_type_style_index_0_lang-CjnBkvvZ.js → tab-group.vue_vue_type_style_index_0_lang-C84mDEOC.js}

@@ -1,5 +1,5 @@
 import { defineComponent as L, useModel as B, useSlots as N, useId as x, computed as y, ref as A, provide as E, onMounted as M, openBlock as s, createElementBlock as i, createBlock as _, Teleport as F, createElementVNode as o, normalizeStyle as v, normalizeClass as g, Fragment as S, renderList as G, unref as c, createVNode as V, createSlots as j, withCtx as I, createTextVNode as z, toDisplayString as D, resolveDynamicComponent as O, renderSlot as H, mergeModels as C } from "vue";
-import { _ as K } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
+import { _ as K } from "./label-icon.vue_vue_type_style_index_0_lang-me52HE2V.js";
 import { t as P, _ as q } from "./tab-content.vue_vue_type_style_index_0_lang-CcQLHmIF.js";
 const J = { class: "dwui-tab-group" }, Q = ["id", "name", "disabled", "checked", "onChange"], R = ["for", "data-test-tab-content-control"], U = { class: "dwui-tab-items" }, Z = /* @__PURE__ */ L({
   __name: "tab-group",

package/lib/{tab-group.vue_vue_type_style_index_0_lang-CwVGYZAo.cjs → tab-group.vue_vue_type_style_index_0_lang-CMaufRJV.cjs}

@@ -1 +1 @@
-"use strict";const e=require("vue"),v=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs"),m=require("./tab-content.vue_vue_type_style_index_0_lang-BeCi7Xkp.cjs"),g={class:"dwui-tab-group"},S=["id","name","disabled","checked","onChange"],C=["for","data-test-tab-content-control"],I={class:"dwui-tab-items"},k=e.defineComponent({__name:"tab-group",props:e.mergeModels({tabGroupName:{},selectFirstEnabled:{type:Boolean},headerClass:{type:[Boolean,null,String,Object,Array]},headerStyle:{type:[Boolean,null,String,Object,Array]},teleport:{}},{selectedTabLabelId:{},selectedTabLabelIdModifiers:{}}),emits:e.mergeModels(["emit:changeSelectedTab"],["update:selectedTabLabelId"]),setup(r,{emit:h}){const n=r,_=h,o=e.useModel(r,"selectedTabLabelId"),c=e.useSlots(),s=n.tabGroupName??e.useId(),y=a=>{if(a.type!==m._sfc_main)return;const l=a.props??{},t=l.disabled;return{labelId:String(l["label-id"]??l.labelId),description:l.description,disabled:t===""||!!t,status:l.status,headerClass:l["header-class"]??l.headerClass,headerStyle:l["header-style"]??l.headerStyle,icon:a.children?.icon}},d=e.computed(()=>{const a=[];for(const l of c.default?.()??[]){const t=Array.isArray(l.children)?l.children:[l];for(const b of t){const p=y(b);p&&a.push(p)}}return a}),i=e.computed(()=>o.value!=null?o.value:(n.selectFirstEnabled?d.value.find(l=>!l.disabled):d.value[0])?.labelId),u=e.ref(!1);e.provide(m.tabGroupContextKey,{activeLabelId:i,mounted:u,loadingSlot:()=>c.loading}),e.onMounted(()=>{u.value=!0});const f=a=>{o.value=a,_("emit:changeSelectedTab",a)};return(a,l)=>(e.openBlock(),e.createElementBlock("div",g,[(e.openBlock(),e.createBlock(e.Teleport,{to:n.teleport??"body",disabled:n.teleport==null},[e.createElementVNode("div",{class:e.normalizeClass(["dwui-tab-headers",n.headerClass]),style:e.normalizeStyle(n.headerStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,t=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t.labelId},[e.createElementVNode("input",{id:`${e.unref(s)}-${t.labelId}`,type:"radio",class:"dwui-tab-radio",name:e.unref(s),disabled:t.disabled,checked:t.labelId===i.value,onChange:b=>f(t.labelId)},null,40,S),e.createElementVNode("label",{for:`${e.unref(s)}-${t.labelId}`,class:e.normalizeClass(["dwui-tab-item",[t.status!=null?`dwui-tab-${t.status}`:void 0,t.headerClass]]),style:e.normalizeStyle(t.headerStyle),"data-test-tab-content-control":t.labelId},[e.createVNode(v._sfc_main,null,e.createSlots({default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(t.description),1)]),_:2},[t.icon!=null?{name:"icon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon)))]),key:"0"}:void 0]),1024)],14,C)],64))),128))],6)],8,["to","disabled"])),e.createElementVNode("div",I,[e.renderSlot(a.$slots,"default")])]))}});exports._sfc_main=k;
+"use strict";const e=require("vue"),v=require("./label-icon.vue_vue_type_style_index_0_lang-D9Cimu20.cjs"),m=require("./tab-content.vue_vue_type_style_index_0_lang-BeCi7Xkp.cjs"),g={class:"dwui-tab-group"},S=["id","name","disabled","checked","onChange"],C=["for","data-test-tab-content-control"],I={class:"dwui-tab-items"},k=e.defineComponent({__name:"tab-group",props:e.mergeModels({tabGroupName:{},selectFirstEnabled:{type:Boolean},headerClass:{type:[Boolean,null,String,Object,Array]},headerStyle:{type:[Boolean,null,String,Object,Array]},teleport:{}},{selectedTabLabelId:{},selectedTabLabelIdModifiers:{}}),emits:e.mergeModels(["emit:changeSelectedTab"],["update:selectedTabLabelId"]),setup(r,{emit:h}){const n=r,_=h,o=e.useModel(r,"selectedTabLabelId"),c=e.useSlots(),s=n.tabGroupName??e.useId(),y=a=>{if(a.type!==m._sfc_main)return;const l=a.props??{},t=l.disabled;return{labelId:String(l["label-id"]??l.labelId),description:l.description,disabled:t===""||!!t,status:l.status,headerClass:l["header-class"]??l.headerClass,headerStyle:l["header-style"]??l.headerStyle,icon:a.children?.icon}},d=e.computed(()=>{const a=[];for(const l of c.default?.()??[]){const t=Array.isArray(l.children)?l.children:[l];for(const b of t){const p=y(b);p&&a.push(p)}}return a}),i=e.computed(()=>o.value!=null?o.value:(n.selectFirstEnabled?d.value.find(l=>!l.disabled):d.value[0])?.labelId),u=e.ref(!1);e.provide(m.tabGroupContextKey,{activeLabelId:i,mounted:u,loadingSlot:()=>c.loading}),e.onMounted(()=>{u.value=!0});const f=a=>{o.value=a,_("emit:changeSelectedTab",a)};return(a,l)=>(e.openBlock(),e.createElementBlock("div",g,[(e.openBlock(),e.createBlock(e.Teleport,{to:n.teleport??"body",disabled:n.teleport==null},[e.createElementVNode("div",{class:e.normalizeClass(["dwui-tab-headers",n.headerClass]),style:e.normalizeStyle(n.headerStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,t=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t.labelId},[e.createElementVNode("input",{id:`${e.unref(s)}-${t.labelId}`,type:"radio",class:"dwui-tab-radio",name:e.unref(s),disabled:t.disabled,checked:t.labelId===i.value,onChange:b=>f(t.labelId)},null,40,S),e.createElementVNode("label",{for:`${e.unref(s)}-${t.labelId}`,class:e.normalizeClass(["dwui-tab-item",[t.status!=null?`dwui-tab-${t.status}`:void 0,t.headerClass]]),style:e.normalizeStyle(t.headerStyle),"data-test-tab-content-control":t.labelId},[e.createVNode(v._sfc_main,null,e.createSlots({default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(t.description),1)]),_:2},[t.icon!=null?{name:"icon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon)))]),key:"0"}:void 0]),1024)],14,C)],64))),128))],6)],8,["to","disabled"])),e.createElementVNode("div",I,[e.renderSlot(a.$slots,"default")])]))}});exports._sfc_main=k;

package/lib/types/label-preset.d.cts

@@ -0,0 +1,12 @@
+import { Component } from 'vue';
+/**
+ * アイコンとラベルの組み合わせ
+ */
+export interface LabelPreset {
+    /** アイコンのコンポーネント */
+    icon: Component;
+    /** アイコンに渡すProps */
+    iconProps?: Record<string, unknown>;
+    /** ラベル。言語切替に追従させる場合は、描画のたびに呼ばれる関数で渡す */
+    label: string | (() => string);
+}

package/lib/use-shrinkable-CS2bmsJJ.js

@@ -0,0 +1,17 @@
+import { ref as t, onMounted as s, onBeforeUnmount as u } from "vue";
+const l = 70;
+function c(o) {
+  const r = t(!0);
+  let e;
+  return s(() => {
+    const n = o.value;
+    n != null && (e = new ResizeObserver(() => {
+      r.value = l <= n.scrollHeight;
+    }), e.observe(n));
+  }), u(() => {
+    e?.disconnect();
+  }), r;
+}
+export {
+  c as u
+};

package/lib/use-shrinkable-Cu9JQZll.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("vue"),u=70;function o(t){const s=r.ref(!0);let e;return r.onMounted(()=>{const n=t.value;n!=null&&(e=new ResizeObserver(()=>{s.value=u<=n.scrollHeight}),e.observe(n))}),r.onBeforeUnmount(()=>{e?.disconnect()}),s}exports.useShrinkable=o;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalwalletcorp/vue-core",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "type": "module",
   "description": "Basic UI components for Vue 3",
   "main": "lib/index.cjs",
@@ -11,27 +11,42 @@
   ],
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
-      "import": "./lib/index.js",
-      "require": "./lib/index.cjs"
+      "import": {
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
+      },
+      "require": {
+        "types": "./lib/index.d.cts",
+        "default": "./lib/index.cjs"
+      }
     },
     "./nuxt": {
       "types": "./lib/nuxt.d.ts",
       "import": "./lib/nuxt.js"
     },
     "./register": {
-      "types": "./lib/register.d.ts",
-      "import": "./lib/register.js",
-      "require": "./lib/register.cjs"
+      "import": {
+        "types": "./lib/register.d.ts",
+        "default": "./lib/register.js"
+      },
+      "require": {
+        "types": "./lib/register.d.cts",
+        "default": "./lib/register.cjs"
+      }
     },
     "./global": {
       "types": "./lib/global.d.ts"
     },
     "./style.css": "./lib/style.css",
     "./*": {
-      "types": "./lib/*.d.ts",
-      "import": "./lib/*.js",
-      "require": "./lib/*.cjs"
+      "import": {
+        "types": "./lib/*.d.ts",
+        "default": "./lib/*.js"
+      },
+      "require": {
+        "types": "./lib/*.d.cts",
+        "default": "./lib/*.cjs"
+      }
     }
   },
   "scripts": {

package/src/accordion-fieldset.vue

@@ -33,7 +33,7 @@
     </legend>
     <div
       ref="refContents"
-      :class="[ 'dwui-accordion-contents', pageContext.expandable ? pageContext.expanded ? 'dwui-expanded' : 'dwui-shrunk' : '' ]"
+      :class="[ 'dwui-accordion-contents', shrinkable ? pageContext.expanded ? 'dwui-expanded' : 'dwui-shrunk' : '' ]"
     >
       <slot />
     </div>
@@ -41,12 +41,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { SvgTriangleButton } from '@digitalwalletcorp/vue-svg-icons';
 import LabelIcon from '@/label-icon.vue';
-
-/** 縮めたときの中身の高さ(px)。中身がこれより低い場合は開閉しない */
-const SHRUNK_HEIGHT = 70;
+import { useShrinkable } from '@/internal/use-shrinkable';
 
 interface Props {
   /** 凡例の文字。HTMLを含める場合は#legendスロットを使う */
@@ -55,8 +53,6 @@ interface Props {
   disabled?: boolean;
   /** trueの場合、開いた状態で表示する デフォルト false */
   initialExpand?: boolean;
-  /** 変化したときに、中身の高さを測り直して開閉できるかを判定し直す値 */
-  observer?: unknown;
 }
 const props = defineProps<Props>();
 
@@ -71,43 +67,16 @@ const slots = defineSlots<Slots>();
 
 const refContents = ref<HTMLElement>();
 const pageContext = reactive({
-  expandable: true,
   expanded: true
 });
+const shrinkable = useShrinkable(refContents);
 
 const onClickToggle = () => {
   pageContext.expanded = !pageContext.expanded;
-  pageContext.expandable = checkExpandable();
-};
-
-/**
- * 中身が縮めたときの高さ以上あり、開閉できるかを返す
- *
- * @returns {boolean}
- */
-const checkExpandable = (): boolean => {
-  if (refContents.value) {
-    const rect = refContents.value.getBoundingClientRect();
-    return SHRUNK_HEIGHT <= rect.height;
-  }
-  return false;
 };
 
 onMounted(() => {
   pageContext.expanded = !!props.initialExpand;
-  if (props.observer) {
-    pageContext.expandable = checkExpandable();
-  }
-});
-
-watch(() => props.observer, (newValue: unknown) => {
-  if (newValue) {
-    pageContext.expandable = checkExpandable();
-  }
-}, {
-  deep: true,
-  // 高さの計測はDOM反映後に行う
-  flush: 'post'
 });
 </script>