@digitalwalletcorp/vue-core 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalwalletcorp/vue-core",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "description": "Basic UI components for Vue 3",
   "main": "lib/index.cjs",
@@ -37,22 +37,15 @@
     "./global": {
       "types": "./lib/global.d.ts"
     },
-    "./style.css": "./lib/style.css",
-    "./*": {
-      "import": {
-        "types": "./lib/*.d.ts",
-        "default": "./lib/*.js"
-      },
-      "require": {
-        "types": "./lib/*.d.cts",
-        "default": "./lib/*.cjs"
-      }
-    }
+    "./style.css": "./lib/style.css"
   },
   "scripts": {
     "build": "vite build",
+    "yarn:dedupe": "npx yarn-deduplicate --strategy highest yarn.lock",
     "install:dev": "rm -rf lib dest && find node_modules -mindepth 1 -delete && yarn install",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "tsc": "vue-tsc --noEmit -p tsconfig.json",
+    "lint": "eslint . && stylelint \"src/**/*.vue\" \"src/**/*.css\"",
+    "lint:fix": "eslint --fix . && stylelint --fix \"**/*.vue\" \"**/*.css\"",
     "version:patch": "npm version patch",
     "version:minor": "npm version minor",
     "version:major": "npm version major",
@@ -68,7 +61,7 @@
     "components",
     "ui"
   ],
-  "author": "satoshi kotaki",
+  "author": "Digital Wallet Corporation",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -83,24 +76,58 @@
     "src/**/*"
   ],
   "peerDependencies": {
-    "@digitalwalletcorp/vue-svg-icons": "^1.13.0",
+    "@digitalwalletcorp/vue-svg-icons": "^1.15.3",
+    "@nuxt/kit": "^3.17.5",
     "vue": "^3.5.29"
   },
+  "peerDependenciesMeta": {
+    "@nuxt/kit": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@digitalwalletcorp/vue-svg-icons": "^1.13.0",
+    "@digitalwalletcorp/vue-svg-icons": "^1.15.3",
     "@nuxt/kit": "^3.17.5",
+    "@stylistic/eslint-plugin": "5.10.0",
+    "@stylistic/stylelint-plugin": "5.3.1",
     "@types/node": "24.13.6",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vitest/coverage-v8": "3.2.4",
+    "@vue/compiler-core": "3.5.43",
     "@vue/test-utils": "2.4.6",
+    "eslint": "10.11.0",
+    "eslint-plugin-vue": "10.11.1",
+    "globals": "17.13.0",
     "happy-dom": "20.14.5",
     "nuxt": "^3.17.5",
+    "postcss-html": "2.0.0",
+    "stylelint": "17.16.0",
+    "stylelint-config-recommended-vue": "2.0.0",
+    "stylelint-config-standard": "40.0.0",
     "typescript": "6.0.3",
+    "typescript-eslint": "8.71.0",
     "vite": "^7.0.0",
     "vite-plugin-dts": "5.1.0",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "3.2.4",
     "vue": "^3.5.29",
+    "vue-eslint-parser": "10.4.1",
     "vue-tsc": "3.1.5"
+  },
+  "resolutions": {
+    "eslint": "10.11.0",
+    "eslint-plugin-vue": "10.11.1",
+    "typescript-eslint": "8.71.0",
+    "@stylistic/eslint-plugin": "5.10.0",
+    "globals": "17.13.0",
+    "vue-eslint-parser": "10.4.1",
+    "stylelint": "17.16.0",
+    "@stylistic/stylelint-plugin": "5.3.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-config-recommended-vue": "2.0.0",
+    "stylelint-config-recommended": "18.0.0",
+    "stylelint-config-html": "2.0.0",
+    "postcss-html": "2.0.0",
+    "postcss": "8.5.28"
   }
 }

package/src/accordion-fieldset.vue

@@ -6,14 +6,14 @@
     class="dwui-accordion-fieldset"
     :disabled="props.disabled"
   >
-    <legend>
+    <legend class="dwui-accordion-legend">
       <button
         type="button"
         class="dwui-accordion-toggle"
-        :aria-expanded="pageContext.expanded"
+        :aria-expanded="expanded"
         @click="onClickToggle"
       >
-        <SvgTriangleButton :direction="pageContext.expanded ? 'up' : 'down'" />
+        <SvgTriangleButton :direction="expanded ? 'up' : 'down'" />
         <LabelIcon v-if="props.legend != null || slots.legend != null || slots.icon != null">
           <!-- 渡されたスロットだけを中継する。空のラベルを渡すとアイコンの後ろに間隔が空くため -->
           <template
@@ -33,7 +33,7 @@
     </legend>
     <div
       ref="refContents"
-      :class="[ 'dwui-accordion-contents', shrinkable ? pageContext.expanded ? 'dwui-expanded' : 'dwui-shrunk' : '' ]"
+      :class="[ 'dwui-accordion-contents', shrinkable ? expanded ? 'dwui-expanded' : 'dwui-shrunk' : '' ]"
     >
       <slot />
     </div>
@@ -41,22 +41,22 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { SvgTriangleButton } from '@digitalwalletcorp/vue-svg-icons';
 import LabelIcon from '@/label-icon.vue';
 import { useShrinkable } from '@/internal/use-shrinkable';
 
-interface Props {
+export interface Props {
   /** 凡例の文字。HTMLを含める場合は#legendスロットを使う */
   legend?: string;
   /** trueの場合、fieldsetを無効にする */
   disabled?: boolean;
-  /** trueの場合、開いた状態で表示する デフォルト false */
+  /** trueの場合、開いた状態で表示する デフォルト false。v-model:expanded で束縛しないときの初期値 */
   initialExpand?: boolean;
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   /** 凡例の文字の前に表示するアイコン */
   icon?(): unknown;
   /** 凡例。legendより優先する */
@@ -66,18 +66,23 @@ interface Slots {
 const slots = defineSlots<Slots>();
 
 const refContents = ref<HTMLElement>();
-const pageContext = reactive({
-  expanded: true
+// 真偽値の prop は未指定だと false に変換されるため、未指定を undefined のまま受けるよう既定値を明示する
+/** 親が v-model:expanded で束縛したときの開閉状態。束縛しなければ undefined */
+const model = defineModel<boolean | undefined>('expanded', { default: undefined });
+/** 束縛しないときの開閉状態 */
+const localExpanded = ref(!!props.initialExpand);
+const expanded = computed({
+  get: (): boolean => model.value ?? localExpanded.value,
+  set: (value: boolean): void => {
+    localExpanded.value = value;
+    model.value = value;
+  }
 });
 const shrinkable = useShrinkable(refContents);
 
 const onClickToggle = () => {
-  pageContext.expanded = !pageContext.expanded;
+  expanded.value = !expanded.value;
 };
-
-onMounted(() => {
-  pageContext.expanded = !!props.initialExpand;
-});
 </script>
 
 <style>
@@ -85,12 +90,12 @@ onMounted(() => {
   position: relative;
 }
 
-/* 詳細度0のため、利用側がbutton要素に装飾を当てている場合はそちらが優先される。打ち消しは利用側のCSSで行う */
+/* 開閉ボタンは押しボタンではなく凡例と一体の操作として見せるため、既定では枠・背景を持たない */
 :where(.dwui-accordion-toggle) {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  margin-left: 4px;
+  gap: 0.33em;
+  margin-left: 0.33em;
   padding: 0;
   border: none;
   background: none;
@@ -103,10 +108,15 @@ onMounted(() => {
   cursor: not-allowed;
 }
 
+:where(.dwui-accordion-toggle:focus-visible) {
+  outline: var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-outline-offset-focus-ring, 2px);
+}
+
 :where(.dwui-accordion-contents) {
   position: relative;
   width: fit-content;
-  padding: 2px;
+  padding: 0.17em;
   overflow: hidden;
   opacity: 1;
 }

package/src/accordion-section.vue

@@ -7,7 +7,7 @@
       ref="refContents"
       class="dwui-accordion-section-contents"
       :class="[
-        shrinkable ? pageContext.expanded ? 'dwui-expanded' : 'dwui-shrunk' : '',
+        shrinkable ? expanded ? 'dwui-expanded' : 'dwui-shrunk' : '',
         { 'dwui-no-gradient': props.noGradient }
       ]"
     >
@@ -21,7 +21,7 @@
         type="button"
         class="dwui-accordion-section-toggle"
         :disabled="props.disabled"
-        :aria-expanded="pageContext.expanded"
+        :aria-expanded="expanded"
         @click.stop="onClickToggle"
       >
         <LabelIcon v-if="toggleIcon() != null || toggleLabel != null">
@@ -43,7 +43,7 @@
         </LabelIcon>
         <SvgTriangleButton
           v-else
-          :direction="pageContext.expanded ? 'up' : 'down'"
+          :direction="expanded ? 'up' : 'down'"
         />
       </button>
     </div>
@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, ref } from 'vue';
 import type { Component, Slot } from 'vue';
 import { SvgTriangleButton } from '@digitalwalletcorp/vue-svg-icons';
 import LabelIcon from '@/label-icon.vue';
@@ -60,40 +60,49 @@ import type { LabelPreset } from '@/types/label-preset';
 
 // 開閉ボタンのアイコンとラベルは別々に決める。どちらも、スロット/ラベルの指定 > プリセット の順で使う
 // 何も指定が無い場合だけ、既定の三角を表示する
-interface Props {
+export interface Props {
   /** trueの場合、開閉ボタンを無効にする */
   disabled?: boolean;
-  /** trueの場合、開いた状態で表示する デフォルト false */
+  /** trueの場合、開いた状態で表示する デフォルト false。v-model:expanded で束縛しないときの初期値 */
   initialExpand?: boolean;
   /** trueの場合、縮めたときに中身の下側をぼかさない */
   noGradient?: boolean;
   /** 縮めているときの開閉ボタン(開く)のラベル */
-  openLabel?: string;
+  expandLabel?: string;
   /** 開いているときの開閉ボタン(閉じる)のラベル */
-  closeLabel?: string;
+  collapseLabel?: string;
   /** 縮めているときの開閉ボタン(開く)のアイコンとラベル */
-  openPreset?: LabelPreset;
+  expandPreset?: LabelPreset;
   /** 開いているときの開閉ボタン(閉じる)のアイコンとラベル */
-  closePreset?: LabelPreset;
+  collapsePreset?: LabelPreset;
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   /** 縮めているときの開閉ボタン(開く)のアイコン */
-  'open-icon'?(): unknown;
+  'expand-icon'?(): unknown;
   /** 開いているときの開閉ボタン(閉じる)のアイコン */
-  'close-icon'?(): unknown;
+  'collapse-icon'?(): unknown;
   default?(): unknown;
 }
 const slots = defineSlots<Slots>();
 
 const refContents = ref<HTMLElement>();
-const pageContext = reactive({
-  expanded: true
+// 真偽値の prop は未指定だと false に変換されるため、未指定を undefined のまま受けるよう既定値を明示する
+/** 親が v-model:expanded で束縛したときの開閉状態。束縛しなければ undefined */
+const model = defineModel<boolean | undefined>('expanded', { default: undefined });
+/** 束縛しないときの開閉状態 */
+const localExpanded = ref(!!props.initialExpand);
+const expanded = computed({
+  get: (): boolean => model.value ?? localExpanded.value,
+  set: (value: boolean): void => {
+    localExpanded.value = value;
+    model.value = value;
+  }
 });
 const shrinkable = useShrinkable(refContents);
 
-const togglePreset = computed((): LabelPreset | undefined => pageContext.expanded ? props.closePreset : props.openPreset);
+const togglePreset = computed((): LabelPreset | undefined => expanded.value ? props.collapsePreset : props.expandPreset);
 
 /**
  * 開閉ボタンに表示するアイコン。スロットは関数のままコンポーネントとして描画する
@@ -102,7 +111,7 @@ const togglePreset = computed((): LabelPreset | undefined => pageContext.expande
  * @returns {Slot | Component | undefined}
  */
 const toggleIcon = (): Slot | Component | undefined => {
-  const slot = pageContext.expanded ? slots['close-icon'] : slots['open-icon'];
+  const slot = expanded.value ? slots['collapse-icon'] : slots['expand-icon'];
   return (slot as Slot | undefined) ?? togglePreset.value?.icon;
 };
 
@@ -112,12 +121,12 @@ const toggleIcon = (): Slot | Component | undefined => {
  * @returns {Record<string, unknown> | undefined}
  */
 const toggleIconProps = (): Record<string, unknown> | undefined => {
-  const slot = pageContext.expanded ? slots['close-icon'] : slots['open-icon'];
+  const slot = expanded.value ? slots['collapse-icon'] : slots['expand-icon'];
   return slot == null ? togglePreset.value?.iconProps : undefined;
 };
 
 const toggleLabel = computed((): string | undefined => {
-  const label = pageContext.expanded ? props.closeLabel : props.openLabel;
+  const label = expanded.value ? props.collapseLabel : props.expandLabel;
   if (label != null) {
     return label;
   }
@@ -126,12 +135,8 @@ const toggleLabel = computed((): string | undefined => {
 });
 
 const onClickToggle = () => {
-  pageContext.expanded = !pageContext.expanded;
+  expanded.value = !expanded.value;
 };
-
-onMounted(() => {
-  pageContext.expanded = !!props.initialExpand;
-});
 </script>
 
 <style>
@@ -172,9 +177,14 @@ onMounted(() => {
   width: 100%;
 }
 
+/* 開閉ボタンは押しボタンではなくアイコンとラベルの操作として見せるため、既定では枠・背景を持たない */
 :where(.dwui-accordion-section-toggle) {
   display: inline-flex;
   align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
   cursor: pointer;
 }
 
@@ -183,12 +193,17 @@ onMounted(() => {
   cursor: not-allowed;
 }
 
+:where(.dwui-accordion-section-toggle:focus-visible) {
+  outline: var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-outline-offset-focus-ring, 2px);
+}
+
 :where(.dwui-accordion-section-toggle[aria-expanded='true']) {
-  margin-top: 8px;
+  margin-top: 0.67em;
 }
 
 /* 縮めたときはボタンを中身のぼかしに少し重ね、中身とボタンの間を詰める */
 :where(.dwui-accordion-section-toggle[aria-expanded='false']) {
-  margin-top: -10px;
+  margin-top: -0.83em;
 }
 </style>

package/src/components.ts

@@ -1,10 +1,20 @@
 // 公開するコンポーネントをここに列挙する。index/register/nuxtはここから読む
 export { default as AccordionFieldset } from '@/accordion-fieldset.vue';
 export { default as AccordionSection } from '@/accordion-section.vue';
+export { default as CopyButton } from '@/copy-button.vue';
+export { default as DarkModeSelector } from '@/dark-mode-selector.vue';
+export { default as DataTable } from '@/data-table.vue';
+export { default as HelpButton } from '@/help-button.vue';
+export { default as HelpPopper } from '@/help-popper.vue';
 export { default as HourglassLoading } from '@/hourglass-loading.vue';
+export { default as IntersectionLazyComponent } from '@/intersection-lazy-component.vue';
 export { default as LabelButton } from '@/label-button.vue';
 export { default as LabelIcon } from '@/label-icon.vue';
+export { default as ModalDialog } from '@/modal-dialog.vue';
+export { default as OverlayBox } from '@/overlay-box.vue';
 export { default as PageSection } from '@/page-section.vue';
 export { default as PageTitle } from '@/page-title.vue';
+export { default as ScreenLoading } from '@/screen-loading.vue';
 export { default as TabContent } from '@/tab-content.vue';
 export { default as TabGroup } from '@/tab-group.vue';
+export { default as WarningPopper } from '@/warning-popper.vue';

package/src/copy-button.vue

@@ -0,0 +1,89 @@
+<!--
+値をクリップボードにコピーするボタン
+-->
+<template>
+  <button
+    type="button"
+    class="dwui-copy-button"
+    :aria-label="slots.default ? undefined : props.label"
+    @click="onClickCopy"
+  >
+    <slot>
+      <SvgMemo />
+    </slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { SvgMemo } from '@digitalwalletcorp/vue-svg-icons';
+
+export interface Props {
+  /** コピーする値。関数を渡すとクリック時に呼び出して値を得る */
+  value: string | number | (() => string | number);
+  /** ボタンの読み上げ名。スロットで文字を渡したときは使わない */
+  label?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Copy'
+});
+
+export interface Emits {
+  /** コピーに成功したときに、コピーした文字列を発行する */
+  (e: 'emit:copy', value: string): void;
+  /** コピーに失敗したときに、原因のエラーを発行する */
+  (e: 'emit:error', error: unknown): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  /** ボタンの中身。未指定ならメモのアイコン */
+  default?(): unknown;
+}
+const slots = defineSlots<Slots>();
+
+const onClickCopy = async () => {
+  const value = String(typeof props.value === 'function' ? props.value() : props.value);
+  try {
+    await navigator.clipboard.writeText(value);
+  } catch (error) {
+    emit('emit:error', error);
+    return;
+  }
+  emit('emit:copy', value);
+};
+</script>
+
+<style>
+:where(.dwui-copy-button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.17em;
+  border: none;
+  border-radius: 4px;
+  background-color: transparent;
+  background-image: none;
+  color: inherit;
+  font: inherit;
+  line-height: 0;
+  cursor: pointer;
+}
+
+:where(.dwui-copy-button:not(:disabled):hover) {
+  background: var(--dwui-background-copy-button-hover, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12)));
+}
+
+:where(.dwui-copy-button:not(:disabled):active) {
+  transform: translate(1px, 1px);
+}
+
+:where(.dwui-copy-button:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:where(.dwui-copy-button:focus-visible) {
+  outline: var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-outline-offset-focus-ring, 2px);
+}
+</style>