@digitalwalletcorp/vue-core 0.1.2 → 0.2.0

package/README.md

@@ -66,13 +66,14 @@ export default defineNuxtConfig({
 
 ##### 📐 Stylesheet
 
-The components need the bundled stylesheet.
+Import the stylesheets to ensure default alignment and icon styles.
 
 * **Vue:** Import in your entry file.
 
 ```ts
 // main.ts
 import '@digitalwalletcorp/vue-core/style.css';
+import '@digitalwalletcorp/vue-svg-icons/style.css'; // Required for components using icons from vue-svg-icons
 ```
 
 * **Nuxt:** Add to your config array.
@@ -80,14 +81,22 @@ import '@digitalwalletcorp/vue-core/style.css';
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  css: ['@digitalwalletcorp/vue-core/style.css']
+  css: [
+    '@digitalwalletcorp/vue-core/style.css',
+    '@digitalwalletcorp/vue-svg-icons/style.css' // Required for components using icons from vue-svg-icons
+  ]
 });
 ```
 
+> **💡 Icon Styles**
+>
+> Components such as `AccordionFieldset` rely on [@digitalwalletcorp/vue-svg-icons](https://www.npmjs.com/package/@digitalwalletcorp/vue-svg-icons). Importing its stylesheet ensures icons align properly with text.
+
 #### 🧰 Components
 
 | Component | Description |
 | --------- | ----------- |
+| [`AccordionFieldset`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/accordion-fieldset.md) | A fieldset whose contents can be collapsed and expanded from the legend. |
 | [`LabelIcon`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/label-icon.md) | Displays an icon and a text label side by side. |
 | [`LabelButton`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/label-button.md) | Renders a button containing an icon and a text label. |
 

package/lib/accordion-fieldset.cjs

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

package/lib/accordion-fieldset.d.ts

@@ -0,0 +1,27 @@
+interface Props {
+    /** 凡例の文字。HTMLを含める場合は#legendスロットを使う */
+    legend?: string;
+    /** trueの場合、fieldsetを無効にする */
+    disabled?: boolean;
+    /** trueの場合、開いた状態で表示する デフォルト false */
+    initialExpand?: boolean;
+    /** 変化したときに、中身の高さを測り直して開閉できるかを判定し直す値 */
+    observer?: unknown;
+}
+interface Slots {
+    /** 凡例の文字の前に表示するアイコン */
+    icon?(): unknown;
+    /** 凡例。legendより優先する */
+    legend?(): 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/accordion-fieldset.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./accordion-fieldset.vue_vue_type_style_index_0_lang-Dk5Id0dl.js";
+export {
+  f as default
+};

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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,79 @@
+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-B3xZ0gFq.js

@@ -0,0 +1,12 @@
+import { _ as o } from "./accordion-fieldset.vue_vue_type_style_index_0_lang-Dk5Id0dl.js";
+import { _ as e } from "./label-button.vue_vue_type_script_setup_true_lang-CoHrTUSs.js";
+import { _ as t } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
+const a = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AccordionFieldset: o,
+  LabelButton: e,
+  LabelIcon: t
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  a as c
+};

package/lib/components-CrmajA9z.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./accordion-fieldset.vue_vue_type_style_index_0_lang-Cod0KnrE.cjs"),_=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"),n=Object.freeze(Object.defineProperty({__proto__:null,AccordionFieldset:e._sfc_main,LabelButton:_._sfc_main,LabelIcon:t._sfc_main},Symbol.toStringTag,{value:"Module"}));exports.components=n;

package/lib/components.d.ts

@@ -1,2 +1,3 @@
+export { default as AccordionFieldset } from './accordion-fieldset';
 export { default as LabelButton } from './label-button';
 export { default as LabelIcon } from './label-icon';

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=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");exports.LabelButton=e._sfc_main;exports.LabelIcon=t._sfc_main;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./accordion-fieldset.vue_vue_type_style_index_0_lang-Cod0KnrE.cjs"),_=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");exports.AccordionFieldset=e._sfc_main;exports.LabelButton=_._sfc_main;exports.LabelIcon=t._sfc_main;

package/lib/index.js

@@ -1,6 +1,8 @@
-import { _ as e } from "./label-button.vue_vue_type_script_setup_true_lang-CoHrTUSs.js";
-import { _ as t } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
+import { _ as r } from "./accordion-fieldset.vue_vue_type_style_index_0_lang-Dk5Id0dl.js";
+import { _ as a } from "./label-button.vue_vue_type_script_setup_true_lang-CoHrTUSs.js";
+import { _ as c } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
 export {
-  e as LabelButton,
-  t as LabelIcon
+  r as AccordionFieldset,
+  a as LabelButton,
+  c as LabelIcon
 };

package/lib/nuxt.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@nuxt/kit"),r=require("./components-CIzBo8qB.cjs");var t=typeof document<"u"?document.currentScript:null;const u=e.defineNuxtModule({meta:{name:"@digitalwalletcorp/vue-core",configKey:"vueCore"},setup(){const n=e.createResolver(typeof document>"u"?require("url").pathToFileURL(__filename).href:t&&t.tagName.toUpperCase()==="SCRIPT"&&t.src||new URL("nuxt.cjs",document.baseURI).href);for(const o of Object.keys(r.components))e.addComponent({name:o,export:o,filePath:n.resolve("./index")})}});exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@nuxt/kit"),r=require("./components-CrmajA9z.cjs");var t=typeof document<"u"?document.currentScript:null;const u=e.defineNuxtModule({meta:{name:"@digitalwalletcorp/vue-core",configKey:"vueCore"},setup(){const n=e.createResolver(typeof document>"u"?require("url").pathToFileURL(__filename).href:t&&t.tagName.toUpperCase()==="SCRIPT"&&t.src||new URL("nuxt.cjs",document.baseURI).href);for(const o of Object.keys(r.components))e.addComponent({name:o,export:o,filePath:n.resolve("./index")})}});exports.default=u;

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-D-qeo7yx.js";
+import { c as a } from "./components-B3xZ0gFq.js";
 const c = t({
   meta: {
     name: "@digitalwalletcorp/vue-core",

package/lib/register.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components-CIzBo8qB.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-CrmajA9z.cjs");function r(e){for(const[o,n]of Object.entries(t.components))e.component(o,n)}exports.registerComponents=r;

package/lib/register.js

@@ -1,4 +1,4 @@
-import { c as t } from "./components-D-qeo7yx.js";
+import { c as t } from "./components-B3xZ0gFq.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-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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalwalletcorp/vue-core",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "description": "Basic UI components for Vue 3",
   "main": "lib/index.cjs",
@@ -85,5 +85,8 @@
     "vitest": "3.2.4",
     "vue": "^3.5.29",
     "vue-tsc": "3.1.5"
+  },
+  "dependencies": {
+    "@digitalwalletcorp/vue-svg-icons": "^1.13.0"
   }
 }

package/src/accordion-fieldset.vue

@@ -0,0 +1,155 @@
+<!--
+中身を開閉できるfieldset
+-->
+<template>
+  <fieldset
+    class="dwui-accordion-fieldset"
+    :disabled="props.disabled"
+  >
+    <legend>
+      <button
+        type="button"
+        class="dwui-accordion-toggle"
+        :aria-expanded="pageContext.expanded"
+        @click="onClickToggle"
+      >
+        <SvgTriangleButton :direction="pageContext.expanded ? 'up' : 'down'" />
+        <LabelIcon v-if="props.legend != null || slots.legend != null || slots.icon != null">
+          <!-- 渡されたスロットだけを中継する。空のラベルを渡すとアイコンの後ろに間隔が空くため -->
+          <template
+            v-if="slots.icon != null"
+            #icon
+          >
+            <slot name="icon" />
+          </template>
+          <template
+            v-if="props.legend != null || slots.legend != null"
+            #default
+          >
+            <slot name="legend">{{ props.legend }}</slot>
+          </template>
+        </LabelIcon>
+      </button>
+    </legend>
+    <div
+      ref="refContents"
+      :class="[ 'dwui-accordion-contents', pageContext.expandable ? pageContext.expanded ? 'dwui-expanded' : 'dwui-shrunk' : '' ]"
+    >
+      <slot />
+    </div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from 'vue';
+import { SvgTriangleButton } from '@digitalwalletcorp/vue-svg-icons';
+import LabelIcon from '@/label-icon.vue';
+
+/** 縮めたときの中身の高さ(px)。中身がこれより低い場合は開閉しない */
+const SHRUNK_HEIGHT = 70;
+
+interface Props {
+  /** 凡例の文字。HTMLを含める場合は#legendスロットを使う */
+  legend?: string;
+  /** trueの場合、fieldsetを無効にする */
+  disabled?: boolean;
+  /** trueの場合、開いた状態で表示する デフォルト false */
+  initialExpand?: boolean;
+  /** 変化したときに、中身の高さを測り直して開閉できるかを判定し直す値 */
+  observer?: unknown;
+}
+const props = defineProps<Props>();
+
+interface Slots {
+  /** 凡例の文字の前に表示するアイコン */
+  icon?(): unknown;
+  /** 凡例。legendより優先する */
+  legend?(): unknown;
+  default?(): unknown;
+}
+const slots = defineSlots<Slots>();
+
+const refContents = ref<HTMLElement>();
+const pageContext = reactive({
+  expandable: true,
+  expanded: true
+});
+
+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>
+
+<style>
+:where(.dwui-accordion-fieldset) {
+  position: relative;
+}
+
+/* 詳細度0のため、利用側がbutton要素に装飾を当てている場合はそちらが優先される。打ち消しは利用側のCSSで行う */
+: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: 0.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 0.3s linear;
+}
+
+:where(.dwui-accordion-contents.dwui-shrunk) {
+  height: auto;
+  max-height: 70px;
+  opacity: 0.75;
+  transition: all 0.3s linear;
+}
+</style>

package/src/components.ts

@@ -1,3 +1,4 @@
 // 公開するコンポーネントをここに列挙する。index/register/nuxtはここから読む
+export { default as AccordionFieldset } from '@/accordion-fieldset.vue';
 export { default as LabelButton } from '@/label-button.vue';
 export { default as LabelIcon } from '@/label-icon.vue';

package/lib/components-CIzBo8qB.cjs

@@ -1 +0,0 @@
-"use strict";const e=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"),_=Object.freeze(Object.defineProperty({__proto__:null,LabelButton:e._sfc_main,LabelIcon:t._sfc_main},Symbol.toStringTag,{value:"Module"}));exports.components=_;

package/lib/components-D-qeo7yx.js

@@ -1,10 +0,0 @@
-import { _ as o } from "./label-button.vue_vue_type_script_setup_true_lang-CoHrTUSs.js";
-import { _ as e } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
-const r = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  LabelButton: o,
-  LabelIcon: e
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  r as c
-};