@digitalwalletcorp/vue-core 1.0.1 → 1.2.0

package/src/accordion-section.vue

@@ -0,0 +1,194 @@
+<!--
+中身を開閉できる領域。中身の下に開閉ボタンを置く
+-->
+<template>
+  <div class="dwui-accordion-section">
+    <div
+      ref="refContents"
+      class="dwui-accordion-section-contents"
+      :class="[
+        shrinkable ? pageContext.expanded ? 'dwui-expanded' : 'dwui-shrunk' : '',
+        { 'dwui-no-gradient': props.noGradient }
+      ]"
+    >
+      <slot />
+    </div>
+    <div
+      v-if="shrinkable"
+      class="dwui-accordion-section-control"
+    >
+      <button
+        type="button"
+        class="dwui-accordion-section-toggle"
+        :disabled="props.disabled"
+        :aria-expanded="pageContext.expanded"
+        @click.stop="onClickToggle"
+      >
+        <LabelIcon v-if="toggleIcon() != null || toggleLabel != null">
+          <template
+            v-if="toggleIcon() != null"
+            #icon
+          >
+            <component
+              :is="toggleIcon()"
+              v-bind="toggleIconProps()"
+            />
+          </template>
+          <template
+            v-if="toggleLabel != null"
+            #default
+          >
+            {{ toggleLabel }}
+          </template>
+        </LabelIcon>
+        <SvgTriangleButton
+          v-else
+          :direction="pageContext.expanded ? 'up' : 'down'"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue';
+import type { Component, Slot } from 'vue';
+import { SvgTriangleButton } from '@digitalwalletcorp/vue-svg-icons';
+import LabelIcon from '@/label-icon.vue';
+import { useShrinkable } from '@/internal/use-shrinkable';
+import type { LabelPreset } from '@/types/label-preset';
+
+// 開閉ボタンのアイコンとラベルは別々に決める。どちらも、スロット/ラベルの指定 > プリセット の順で使う
+// 何も指定が無い場合だけ、既定の三角を表示する
+interface Props {
+  /** trueの場合、開閉ボタンを無効にする */
+  disabled?: boolean;
+  /** trueの場合、開いた状態で表示する デフォルト false */
+  initialExpand?: boolean;
+  /** trueの場合、縮めたときに中身の下側をぼかさない */
+  noGradient?: boolean;
+  /** 縮めているときの開閉ボタン(開く)のラベル */
+  openLabel?: string;
+  /** 開いているときの開閉ボタン(閉じる)のラベル */
+  closeLabel?: string;
+  /** 縮めているときの開閉ボタン(開く)のアイコンとラベル */
+  openPreset?: LabelPreset;
+  /** 開いているときの開閉ボタン(閉じる)のアイコンとラベル */
+  closePreset?: LabelPreset;
+}
+const props = defineProps<Props>();
+
+interface Slots {
+  /** 縮めているときの開閉ボタン(開く)のアイコン */
+  'open-icon'?(): unknown;
+  /** 開いているときの開閉ボタン(閉じる)のアイコン */
+  'close-icon'?(): unknown;
+  default?(): unknown;
+}
+const slots = defineSlots<Slots>();
+
+const refContents = ref<HTMLElement>();
+const pageContext = reactive({
+  expanded: true
+});
+const shrinkable = useShrinkable(refContents);
+
+const togglePreset = computed((): LabelPreset | undefined => pageContext.expanded ? props.closePreset : props.openPreset);
+
+/**
+ * 開閉ボタンに表示するアイコン。スロットは関数のままコンポーネントとして描画する
+ * スロットはリアクティブではないため、computedでキャッシュせず描画のたびに取り出す
+ *
+ * @returns {Slot | Component | undefined}
+ */
+const toggleIcon = (): Slot | Component | undefined => {
+  const slot = pageContext.expanded ? slots['close-icon'] : slots['open-icon'];
+  return (slot as Slot | undefined) ?? togglePreset.value?.icon;
+};
+
+/**
+ * プリセットのアイコンに渡すProps。スロットで渡したアイコンには渡さない
+ *
+ * @returns {Record<string, unknown> | undefined}
+ */
+const toggleIconProps = (): Record<string, unknown> | undefined => {
+  const slot = pageContext.expanded ? slots['close-icon'] : slots['open-icon'];
+  return slot == null ? togglePreset.value?.iconProps : undefined;
+};
+
+const toggleLabel = computed((): string | undefined => {
+  const label = pageContext.expanded ? props.closeLabel : props.openLabel;
+  if (label != null) {
+    return label;
+  }
+  const presetLabel = togglePreset.value?.label;
+  return typeof presetLabel === 'function' ? presetLabel() : presetLabel;
+});
+
+const onClickToggle = () => {
+  pageContext.expanded = !pageContext.expanded;
+};
+
+onMounted(() => {
+  pageContext.expanded = !!props.initialExpand;
+});
+</script>
+
+<style>
+: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 0.3s linear;
+}
+
+:where(.dwui-accordion-section-contents.dwui-shrunk) {
+  height: auto;
+  max-height: 70px;
+  transition: all 0.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)より後に描き、縮めたときに重ねたボタンがぼかしの下に隠れないようにする */
+  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: 0.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;
+}
+</style>

package/src/components.ts

@@ -1,7 +1,10 @@
 // 公開するコンポーネントをここに列挙する。index/register/nuxtはここから読む
 export { default as AccordionFieldset } from '@/accordion-fieldset.vue';
+export { default as AccordionSection } from '@/accordion-section.vue';
 export { default as HourglassLoading } from '@/hourglass-loading.vue';
 export { default as LabelButton } from '@/label-button.vue';
 export { default as LabelIcon } from '@/label-icon.vue';
+export { default as PageSection } from '@/page-section.vue';
+export { default as PageTitle } from '@/page-title.vue';
 export { default as TabContent } from '@/tab-content.vue';
 export { default as TabGroup } from '@/tab-group.vue';

package/src/internal/use-shrinkable.ts

@@ -0,0 +1,37 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import type { Ref } from 'vue';
+
+/** 縮めたときの中身の高さ(px)。中身がこれより低い場合は開閉しない */
+export const SHRUNK_HEIGHT = 70;
+
+/**
+ * 中身が縮めたときの高さ以上あり、開閉できるかを返す
+ * 中身の大きさが変わるたびに測り直すため、隠れたタブの中にあって後から表示された場合や、中身が増減した場合も再判定される
+ * 縮めている間も中身の本来の高さで判定する
+ *
+ * @param {Ref<HTMLElement | undefined>} contents 開閉する中身の要素
+ * @returns {Ref<boolean>}
+ */
+export function useShrinkable(contents: Ref<HTMLElement | undefined>): Ref<boolean> {
+  // 測るまではSSRの出力と揃えるため、開閉できるものとして扱う
+  const shrinkable = ref(true);
+  let resizeObserver: ResizeObserver | undefined;
+
+  onMounted(() => {
+    const element = contents.value;
+    if (element == null) {
+      return;
+    }
+    // 監視を始めた時点でも1回呼ばれる
+    resizeObserver = new ResizeObserver(() => {
+      shrinkable.value = SHRUNK_HEIGHT <= element.scrollHeight;
+    });
+    resizeObserver.observe(element);
+  });
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+  });
+
+  return shrinkable;
+}

package/src/label-icon.vue

@@ -4,7 +4,7 @@
 <template>
   <span
     class="dwui-label-icon"
-    :style="props.gap == null ? undefined : { '--dwui-label-icon-gap': props.gap }"
+    :style="props.gap == null ? undefined : { '--dwui-gap-label-icon': props.gap }"
   >
     <slot name="icon">
       <component
@@ -70,6 +70,6 @@ const slots = defineSlots<Slots>();
 
 /* アイコンとラベルの間隔。gapはflex専用のためmarginで空ける */
 :where(.dwui-label-icon > .dwui-label:not(:first-child)) {
-  margin-left: var(--dwui-label-icon-gap, 0.25em);
+  margin-left: var(--dwui-gap-label-icon, 0.25em);
 }
 </style>

package/src/page-section.vue

@@ -0,0 +1,103 @@
+<!--
+見出し付きの区画
+-->
+<template>
+  <section class="dwui-page-section">
+    <div
+      v-if="props.title != null"
+      class="dwui-page-section-title"
+      :class="props.titleClass"
+      :style="props.titleStyle"
+    >
+      <LabelIcon>
+        <template #icon>
+          <slot name="icon">
+            <component
+              :is="presetIcon.component"
+              v-bind="presetIcon.props"
+            />
+          </slot>
+        </template>
+        {{ props.title }}
+      </LabelIcon>
+    </div>
+    <div class="dwui-page-section-content">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ClassValue, Component, StyleValue } from 'vue';
+import { SvgCircle, SvgDiamond, SvgPushpin, SvgRoundPushpin, SvgSquare } from '@digitalwalletcorp/vue-svg-icons';
+import LabelIcon from '@/label-icon.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;
+}
+const props = withDefaults(defineProps<Props>(), {
+  icon: 'diamond'
+});
+
+interface Slots {
+  /** 見出しの文字の前に表示するアイコン。iconより優先する */
+  icon?(): unknown;
+  default?(): unknown;
+}
+defineSlots<Slots>();
+
+/**
+ * プリセットのアイコン。shapeがtrueのものは、大きさと色を受け取る
+ * 見出しの既定のアイコンの色は、アイコン側の既定値が変わっても変わらないようにここで持つ
+ */
+const PRESET_ICONS: Record<PageSectionIcon, { component: Component; shape: boolean; color?: string }> = {
+  'diamond': { component: SvgDiamond, shape: true, color: '#1a44b6' },
+  'circle': { component: SvgCircle, shape: true, color: '#e78b2f' },
+  'square': { component: SvgSquare, shape: true, color: '#d13a2b' },
+  'pushpin': { component: SvgPushpin, shape: false },
+  'round-pushpin': { component: SvgRoundPushpin, shape: false }
+};
+
+const presetIcon = computed((): { component: Component; props: Record<string, unknown> } => {
+  const preset = PRESET_ICONS[props.icon];
+  return {
+    component: preset.component,
+    props: preset.shape ? { variant: props.iconVariant, color: props.iconColor ?? preset.color } : {}
+  };
+});
+</script>
+
+<style>
+: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;
+}
+</style>

package/src/page-title.vue

@@ -0,0 +1,56 @@
+<!--
+画面のタイトルバー。右側にスロットで渡されたものを space-between で配置する。
+-->
+<template>
+  <section class="dwui-page-title">
+    <LabelIcon class="dwui-page-title-label">
+      <!-- 渡されたスロットだけを中継する。空のスロットを渡すとアイコンの位置に間隔が空くため -->
+      <template
+        v-if="slots.icon != null"
+        #icon
+      >
+        <slot name="icon" />
+      </template>
+      {{ props.title }}
+    </LabelIcon>
+    <span
+      v-if="slots.default != null"
+      class="dwui-page-title-actions"
+    >
+      <slot />
+    </span>
+  </section>
+</template>
+
+<script setup lang="ts">
+import LabelIcon from '@/label-icon.vue';
+
+interface Props {
+  /** タイトルの文字 */
+  title: string;
+}
+const props = defineProps<Props>();
+
+interface Slots {
+  /** タイトルの文字の前に表示するアイコン */
+  icon?(): unknown;
+  /** タイトルバーの右側に表示する内容 */
+  default?(): unknown;
+}
+const slots = defineSlots<Slots>();
+</script>
+
+<style>
+: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);
+}
+</style>

package/src/tab-content.vue

@@ -106,7 +106,7 @@ const setLoading = (value: boolean) => {
   padding: 4px 8px;
   overflow: hidden;
   /* 全幅を横断すると速度が出てカクつくため、既定は固定の移動量とease-outとフェードでスライドインする */
-  animation: dwui-tab-slide-in var(--dwui-tab-slide-duration, 0.35s) var(--dwui-tab-slide-easing, cubic-bezier(0.22, 1, 0.36, 1));
+  animation: dwui-tab-slide-in var(--dwui-duration-tab-slide, 0.35s) var(--dwui-easing-tab-slide, cubic-bezier(0.22, 1, 0.36, 1));
 }
 
 :where(.dwui-tab-loading) {
@@ -116,14 +116,14 @@ const setLoading = (value: boolean) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--dwui-loading-overlay, rgba(0, 0, 0, 0.25));
+  background: var(--dwui-overlay-color-loading, rgba(0, 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, 0.4));
-  border-top-color: var(--dwui-loading-spinner-color, #ffffff);
+  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, 0.4));
+  border-top-color: var(--dwui-border-color-loading-spinner, #ffffff);
   border-radius: 50%;
   animation: dwui-tab-loading-spin 0.8s linear infinite;
 }
@@ -137,7 +137,7 @@ const setLoading = (value: boolean) => {
 @keyframes dwui-tab-slide-in {
   0% {
     opacity: 0;
-    transform: translateX(var(--dwui-tab-slide-distance, -128px));
+    transform: translateX(var(--dwui-distance-tab-slide, -128px));
   }
   100% {
     opacity: 1;

package/src/tab-group.vue

@@ -190,56 +190,56 @@ const onChangeTab = (labelId: string) => {
   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));
+  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-tab-header-text, azure);
+  color: var(--dwui-color-text-tab-header, azure);
   text-overflow: ellipsis;
   cursor: pointer;
   transition: all 0.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);
+  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-tab-header-disabled-bg, gray);
+  background: var(--dwui-background-tab-header-disabled, 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);
+  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-tab-header-warn-selected-bg, linear-gradient(#fafa06, rgb(232, 238, 206), #fafa06));
+  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-tab-header-error-bg, red);
-  color: var(--dwui-tab-header-error-text, azure);
+  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-tab-header-error-selected-bg, linear-gradient(#ff0000, rgb(240, 136, 136), #ff0000));
+  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-tab-header-hover-overlay, rgba(255, 255, 255, 0.35));
+  box-shadow: inset 0 0 0 999px var(--dwui-overlay-color-tab-header-hover, rgba(255, 255, 255, 0.35));
 }
 
 :where(.dwui-tab-items) {
   height: 100%;
-  border: 1px solid var(--dwui-tab-border, #565656);
+  border: 1px solid var(--dwui-border-color-tab, #565656);
   /* 中身を切り替えたときのスライドを枠内に収める */
   overflow: hidden;
 }

package/lib/accordion-fieldset.vue_vue_type_style_index_0_lang-Cod0KnrE.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),i=require("@digitalwalletcorp/vue-svg-icons"),c=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs"),u=["disabled"],p=["aria-expanded"],f=70,g=e.defineComponent({__name:"accordion-fieldset",props:{legend:{},disabled:{type:Boolean},initialExpand:{type:Boolean},observer:{}},setup(s){const t=s,d=e.useSlots(),l=e.ref(),n=e.reactive({expandable:!0,expanded:!0}),r=()=>{n.expanded=!n.expanded,n.expandable=a()},a=()=>{if(l.value){const o=l.value.getBoundingClientRect();return f<=o.height}return!1};return e.onMounted(()=>{n.expanded=!!t.initialExpand,t.observer&&(n.expandable=a())}),e.watch(()=>t.observer,o=>{o&&(n.expandable=a())},{deep:!0,flush:"post"}),(o,x)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"dwui-accordion-fieldset",disabled:t.disabled},[e.createElementVNode("legend",null,[e.createElementVNode("button",{type:"button",class:"dwui-accordion-toggle","aria-expanded":n.expanded,onClick:r},[e.createVNode(e.unref(i.SvgTriangleButton),{direction:n.expanded?"up":"down"},null,8,["direction"]),t.legend!=null||d.legend!=null||d.icon!=null?(e.openBlock(),e.createBlock(c._sfc_main,{key:0},e.createSlots({_:2},[d.icon!=null?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"icon")]),key:"0"}:void 0,t.legend!=null||d.legend!=null?{name:"default",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"legend",{},()=>[e.createTextVNode(e.toDisplayString(t.legend),1)])]),key:"1"}:void 0]),1024)):e.createCommentVNode("",!0)],8,p)]),e.createElementVNode("div",{ref_key:"refContents",ref:l,class:e.normalizeClass(["dwui-accordion-contents",n.expandable?n.expanded?"dwui-expanded":"dwui-shrunk":""])},[e.renderSlot(o.$slots,"default")],2)],8,u))}});exports._sfc_main=g;

package/lib/accordion-fieldset.vue_vue_type_style_index_0_lang-Dk5Id0dl.js

@@ -1,79 +0,0 @@
-import { defineComponent as u, useSlots as f, ref as x, reactive as g, onMounted as m, watch as b, openBlock as s, createElementBlock as _, createElementVNode as a, createVNode as k, unref as h, createBlock as v, createSlots as C, withCtx as r, renderSlot as i, createTextVNode as w, toDisplayString as y, createCommentVNode as B, normalizeClass as E } from "vue";
-import { SvgTriangleButton as S } from "@digitalwalletcorp/vue-svg-icons";
-import { _ as N } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
-const T = ["disabled"], V = ["aria-expanded"], $ = 70, G = /* @__PURE__ */ u({
-  __name: "accordion-fieldset",
-  props: {
-    legend: {},
-    disabled: { type: Boolean },
-    initialExpand: { type: Boolean },
-    observer: {}
-  },
-  setup(c) {
-    const n = c, o = f(), d = x(), e = g({
-      expandable: !0,
-      expanded: !0
-    }), p = () => {
-      e.expanded = !e.expanded, e.expandable = l();
-    }, l = () => {
-      if (d.value) {
-        const t = d.value.getBoundingClientRect();
-        return $ <= t.height;
-      }
-      return !1;
-    };
-    return m(() => {
-      e.expanded = !!n.initialExpand, n.observer && (e.expandable = l());
-    }), b(() => n.observer, (t) => {
-      t && (e.expandable = l());
-    }, {
-      deep: !0,
-      // 高さの計測はDOM反映後に行う
-      flush: "post"
-    }), (t, H) => (s(), _("fieldset", {
-      class: "dwui-accordion-fieldset",
-      disabled: n.disabled
-    }, [
-      a("legend", null, [
-        a("button", {
-          type: "button",
-          class: "dwui-accordion-toggle",
-          "aria-expanded": e.expanded,
-          onClick: p
-        }, [
-          k(h(S), {
-            direction: e.expanded ? "up" : "down"
-          }, null, 8, ["direction"]),
-          n.legend != null || o.legend != null || o.icon != null ? (s(), v(N, { key: 0 }, C({ _: 2 }, [
-            o.icon != null ? {
-              name: "icon",
-              fn: r(() => [
-                i(t.$slots, "icon")
-              ]),
-              key: "0"
-            } : void 0,
-            n.legend != null || o.legend != null ? {
-              name: "default",
-              fn: r(() => [
-                i(t.$slots, "legend", {}, () => [
-                  w(y(n.legend), 1)
-                ])
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1024)) : B("", !0)
-        ], 8, V)
-      ]),
-      a("div", {
-        ref_key: "refContents",
-        ref: d,
-        class: E(["dwui-accordion-contents", e.expandable ? e.expanded ? "dwui-expanded" : "dwui-shrunk" : ""])
-      }, [
-        i(t.$slots, "default")
-      ], 2)
-    ], 8, T));
-  }
-});
-export {
-  G as _
-};

package/lib/components-CvmuAs2C.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./accordion-fieldset.vue_vue_type_style_index_0_lang-Cod0KnrE.cjs"),_=require("./hourglass-loading.vue_vue_type_style_index_0_lang-C72UVA9W.cjs"),n=require("./label-button.vue_vue_type_script_setup_true_lang-DqhdCgmJ.cjs"),t=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs"),o=require("./tab-content.vue_vue_type_style_index_0_lang-BeCi7Xkp.cjs"),s=require("./tab-group.vue_vue_type_style_index_0_lang-CwVGYZAo.cjs"),u=Object.freeze(Object.defineProperty({__proto__:null,AccordionFieldset:e._sfc_main,HourglassLoading:_._sfc_main,LabelButton:n._sfc_main,LabelIcon:t._sfc_main,TabContent:o._sfc_main,TabGroup:s._sfc_main},Symbol.toStringTag,{value:"Module"}));exports.components=u;

package/lib/components-p1BluzXb.js

@@ -1,18 +0,0 @@
-import { _ as o } from "./accordion-fieldset.vue_vue_type_style_index_0_lang-Dk5Id0dl.js";
-import { _ } from "./hourglass-loading.vue_vue_type_style_index_0_lang-DkUGIxQ2.js";
-import { _ as a } from "./label-button.vue_vue_type_script_setup_true_lang-CoHrTUSs.js";
-import { _ as r } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
-import { _ as m } from "./tab-content.vue_vue_type_style_index_0_lang-CcQLHmIF.js";
-import { _ as t } from "./tab-group.vue_vue_type_style_index_0_lang-CjnBkvvZ.js";
-const p = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  AccordionFieldset: o,
-  HourglassLoading: _,
-  LabelButton: a,
-  LabelIcon: r,
-  TabContent: m,
-  TabGroup: t
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  p as c
-};