@digitalwalletcorp/vue-core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 digitalwalletcorp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# Vue Core
+
+Basic UI components for Vue 3.
+
+#### ✨ Features
+
+* **Tree-shaking**: Only import what you use. Importing a single component won't bundle the rest of the library.
+* **Fully typed**: Type definitions are included, allowing your editor to auto-complete props and default values automatically.
+* **Easy overrides**: Default styles use zero specificity (`:where()`), so your own CSS always wins.
+
+#### 📦 Installation
+
+```bash
+npm install @digitalwalletcorp/vue-core
+# or
+yarn add @digitalwalletcorp/vue-core
+```
+
+> ##### ⚠️ Requirements
+>
+> * **Vue 3.5.29+**: Props are typed with Vue's `ClassValue`, which is exported since Vue 3.5.29.
+
+#### 📖 Usage
+
+There are three ways to use the components.
+
+|     | When to use | Bundled components |
+| --- | ----------- | ------------------ |
+| [Import individually](#1-import-components-individually)                          | When you want to minimize bundle size or prefer explicit imports      | Only the components you import |
+| [Register all components globally (Vue)](#2-register-all-components-globally-vue) | When you want to use components without importing them in each file  | All components              |
+| [Register components globally (Nuxt)](#3-register-components-globally-nuxt)       | When you want to use components globally in a Nuxt project            | Only the components you use |
+
+##### 1. Import components individually
+
+```vue
+<script setup lang="ts">
+import { LabelButton } from '@digitalwalletcorp/vue-core';
+</script>
+
+<template>
+  <LabelButton class="btn" :preset="labelPresets.search" />
+</template>
+```
+
+##### 2. Register all components globally (Vue)
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import { registerComponents } from '@digitalwalletcorp/vue-core/register';
+import App from './App.vue';
+
+const app = createApp(App);
+registerComponents(app);
+app.mount('#app');
+```
+
+##### 3. Register components globally (Nuxt)
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@digitalwalletcorp/vue-core/nuxt']
+});
+```
+
+##### 📐 Stylesheet
+
+The components need the bundled stylesheet.
+
+* **Vue:** Import in your entry file.
+
+```ts
+// main.ts
+import '@digitalwalletcorp/vue-core/style.css';
+```
+
+* **Nuxt:** Add to your config array.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: ['@digitalwalletcorp/vue-core/style.css']
+});
+```
+
+#### 🧰 Components
+
+| Component | Description |
+| --------- | ----------- |
+| [`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. |
+
+#### 📜 License
+
+This project is licensed under the MIT License. See the [LICENSE](https://opensource.org/licenses/MIT) file for details.

package/lib/components-1J1mbyrx.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./label-button.vue_vue_type_script_setup_true_lang-BNMpM0Tg.cjs"),t=require("./label-icon.vue_vue_type_style_index_0_lang-Df1Vmx77.cjs"),_=Object.freeze(Object.defineProperty({__proto__:null,LabelButton:e._sfc_main,LabelIcon:t._sfc_main},Symbol.toStringTag,{value:"Module"}));exports.components=_;

package/lib/components-eEXuNeht.js

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

package/lib/components.d.ts

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

package/lib/global.d.ts

@@ -0,0 +1,7 @@
+type VueCoreComponents = typeof import('../components');
+
+declare module 'vue' {
+  interface GlobalComponents extends VueCoreComponents {}
+}
+
+export {};

package/lib/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./label-button.vue_vue_type_script_setup_true_lang-BNMpM0Tg.cjs"),t=require("./label-icon.vue_vue_type_style_index_0_lang-Df1Vmx77.cjs");exports.LabelButton=e._sfc_main;exports.LabelIcon=t._sfc_main;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export type { LabelPreset } from './types/label-preset';

package/lib/index.js

@@ -0,0 +1,6 @@
+import { _ as e } from "./label-button.vue_vue_type_script_setup_true_lang-DsN7-lkK.js";
+import { _ as t } from "./label-icon.vue_vue_type_style_index_0_lang-CD5U0MIO.js";
+export {
+  e as LabelButton,
+  t as LabelIcon
+};

package/lib/label-button.cjs

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

package/lib/label-button.d.ts

@@ -0,0 +1,30 @@
+import { ClassValue, StyleValue } from 'vue';
+import { LabelPreset } from './types/label-preset';
+interface Props {
+    /** アイコンとラベルの組み合わせ */
+    preset?: LabelPreset;
+    /** アイコンとラベルの間隔。未指定ならLabelIconの既定値(0.25em) */
+    gap?: string;
+    /** presetのアイコンに付けるclass。スロットで渡したアイコンには、スロット側で直接指定する */
+    iconClass?: ClassValue;
+    /** presetのアイコンに付けるstyle。スロットで渡したアイコンには、スロット側で直接指定する */
+    iconStyle?: StyleValue;
+    /** ラベルに付けるclass */
+    labelClass?: ClassValue;
+    /** ラベルに付けるstyle */
+    labelStyle?: StyleValue;
+}
+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/label-button.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./label-button.vue_vue_type_script_setup_true_lang-DsN7-lkK.js";
+export {
+  f as default
+};

package/lib/label-button.vue_vue_type_script_setup_true_lang-BNMpM0Tg.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),a=require("./label-icon.vue_vue_type_style_index_0_lang-Df1Vmx77.cjs"),o=e.defineComponent({__name:"label-button",props:{preset:{},gap:{},iconClass:{type:[Boolean,null,String,Object,Array]},iconStyle:{type:[Boolean,null,String,Object,Array]},labelClass:{type:[Boolean,null,String,Object,Array]},labelStyle:{type:[Boolean,null,String,Object,Array]}},setup(s){const l=s,t=e.useSlots();return(n,c)=>(e.openBlock(),e.createElementBlock("button",null,[e.createVNode(a._sfc_main,{preset:l.preset,gap:l.gap,"icon-class":l.iconClass,"icon-style":l.iconStyle,"label-class":l.labelClass,"label-style":l.labelStyle},e.createSlots({_:2},[t.icon!=null?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"icon")]),key:"0"}:void 0,t.default!=null?{name:"default",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),key:"1"}:void 0]),1032,["preset","gap","icon-class","icon-style","label-class","label-style"])]))}});exports._sfc_main=o;

package/lib/label-button.vue_vue_type_script_setup_true_lang-DsN7-lkK.js

@@ -0,0 +1,44 @@
+import { defineComponent as s, useSlots as r, openBlock as c, createElementBlock as i, createVNode as p, createSlots as y, withCtx as n, renderSlot as o } from "vue";
+import { _ as u } from "./label-icon.vue_vue_type_style_index_0_lang-CD5U0MIO.js";
+const f = /* @__PURE__ */ s({
+  __name: "label-button",
+  props: {
+    preset: {},
+    gap: {},
+    iconClass: { type: [Boolean, null, String, Object, Array] },
+    iconStyle: { type: [Boolean, null, String, Object, Array] },
+    labelClass: { type: [Boolean, null, String, Object, Array] },
+    labelStyle: { type: [Boolean, null, String, Object, Array] }
+  },
+  setup(a) {
+    const e = a, l = r();
+    return (t, b) => (c(), i("button", null, [
+      p(u, {
+        preset: e.preset,
+        gap: e.gap,
+        "icon-class": e.iconClass,
+        "icon-style": e.iconStyle,
+        "label-class": e.labelClass,
+        "label-style": e.labelStyle
+      }, y({ _: 2 }, [
+        l.icon != null ? {
+          name: "icon",
+          fn: n(() => [
+            o(t.$slots, "icon")
+          ]),
+          key: "0"
+        } : void 0,
+        l.default != null ? {
+          name: "default",
+          fn: n(() => [
+            o(t.$slots, "default")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["preset", "gap", "icon-class", "icon-style", "label-class", "label-style"])
+    ]));
+  }
+});
+export {
+  f as _
+};

package/lib/label-icon.cjs

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

package/lib/label-icon.d.ts

@@ -0,0 +1,30 @@
+import { ClassValue, StyleValue } from 'vue';
+import { LabelPreset } from './types/label-preset';
+interface Props {
+    /** アイコンとラベルの組み合わせ */
+    preset?: LabelPreset;
+    /** アイコンとラベルの間隔。未指定なら既定値(0.25em) */
+    gap?: string;
+    /** presetのアイコンに付けるclass。スロットで渡したアイコンには、スロット側で直接指定する */
+    iconClass?: ClassValue;
+    /** presetのアイコンに付けるstyle。スロットで渡したアイコンには、スロット側で直接指定する */
+    iconStyle?: StyleValue;
+    /** ラベルに付けるclass */
+    labelClass?: ClassValue;
+    /** ラベルに付けるstyle */
+    labelStyle?: StyleValue;
+}
+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/label-icon.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./label-icon.vue_vue_type_style_index_0_lang-CD5U0MIO.js";
+export {
+  f as default
+};

package/lib/label-icon.vue_vue_type_style_index_0_lang-CD5U0MIO.js

@@ -0,0 +1,38 @@
+import { defineComponent as c, useSlots as i, openBlock as l, createElementBlock as s, normalizeStyle as n, renderSlot as o, createBlock as y, resolveDynamicComponent as u, mergeProps as b, createCommentVNode as a, normalizeClass as m, createTextVNode as S, toDisplayString as g } from "vue";
+const f = /* @__PURE__ */ c({
+  __name: "label-icon",
+  props: {
+    preset: {},
+    gap: {},
+    iconClass: { type: [Boolean, null, String, Object, Array] },
+    iconStyle: { type: [Boolean, null, String, Object, Array] },
+    labelClass: { type: [Boolean, null, String, Object, Array] },
+    labelStyle: { type: [Boolean, null, String, Object, Array] }
+  },
+  setup(r) {
+    const e = r, p = i();
+    return (t, d) => (l(), s("span", {
+      class: "dwui-label-icon",
+      style: n(e.gap == null ? void 0 : { gap: e.gap })
+    }, [
+      o(t.$slots, "icon", {}, () => [
+        e.preset != null ? (l(), y(u(e.preset.icon), b({ key: 0 }, e.preset.iconProps, {
+          class: e.iconClass,
+          style: e.iconStyle
+        }), null, 16, ["class", "style"])) : a("", !0)
+      ]),
+      p.default != null || e.preset != null ? (l(), s("span", {
+        key: 0,
+        class: m(e.labelClass),
+        style: n(e.labelStyle)
+      }, [
+        o(t.$slots, "default", {}, () => [
+          S(g(typeof e.preset?.label == "function" ? e.preset.label() : e.preset?.label), 1)
+        ])
+      ], 6)) : a("", !0)
+    ], 4));
+  }
+});
+export {
+  f as _
+};

package/lib/label-icon.vue_vue_type_style_index_0_lang-Df1Vmx77.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),s=e.defineComponent({__name:"label-icon",props:{preset:{},gap:{},iconClass:{type:[Boolean,null,String,Object,Array]},iconStyle:{type:[Boolean,null,String,Object,Array]},labelClass:{type:[Boolean,null,String,Object,Array]},labelStyle:{type:[Boolean,null,String,Object,Array]}},setup(n){const l=n,o=e.useSlots();return(t,a)=>(e.openBlock(),e.createElementBlock("span",{class:"dwui-label-icon",style:e.normalizeStyle(l.gap==null?void 0:{gap:l.gap})},[e.renderSlot(t.$slots,"icon",{},()=>[l.preset!=null?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.preset.icon),e.mergeProps({key:0},l.preset.iconProps,{class:l.iconClass,style:l.iconStyle}),null,16,["class","style"])):e.createCommentVNode("",!0)]),o.default!=null||l.preset!=null?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(l.labelClass),style:e.normalizeStyle(l.labelStyle)},[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(typeof l.preset?.label=="function"?l.preset.label():l.preset?.label),1)])],6)):e.createCommentVNode("",!0)],4))}});exports._sfc_main=s;

package/lib/nuxt.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@nuxt/kit"),r=require("./components-1J1mbyrx.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.d.ts

@@ -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

@@ -0,0 +1,16 @@
+import { defineNuxtModule as t, createResolver as r, addComponent as n } from "@nuxt/kit";
+import { c as a } from "./components-eEXuNeht.js";
+const c = t({
+  meta: {
+    name: "@digitalwalletcorp/vue-core",
+    configKey: "vueCore"
+  },
+  setup() {
+    const o = r(import.meta.url);
+    for (const e of Object.keys(a))
+      n({ name: e, export: e, filePath: o.resolve("./index") });
+  }
+});
+export {
+  c as default
+};

package/lib/register.cjs

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

package/lib/register.d.ts

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

package/lib/register.js

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

package/lib/style.css

@@ -0,0 +1 @@
+:where(.dwui-label-icon){display:inline-flex;align-items:center;gap:.25em}

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

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

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@digitalwalletcorp/vue-core",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Basic UI components for Vue 3",
+  "main": "lib/index.cjs",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./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"
+    },
+    "./global": {
+      "types": "./lib/global.d.ts"
+    },
+    "./style.css": "./lib/style.css",
+    "./*": {
+      "types": "./lib/*.d.ts",
+      "import": "./lib/*.js",
+      "require": "./lib/*.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "install:dev": "rm -rf lib dest && find node_modules -mindepth 1 -delete && yarn install",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "prepack": "rm -rf lib && npm run build",
+    "pack": "rm -rf dest && mkdir -p dest && npm pack --pack-destination=dest",
+    "publish:npm": "bash ../bin/publish.sh",
+    "test:unit": "vitest run --coverage"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "components",
+    "ui"
+  ],
+  "author": "satoshi kotaki",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digitalwalletcorp/vue-core.git"
+  },
+  "homepage": "https://github.com/digitalwalletcorp/vue-core",
+  "bugs": {
+    "url": "https://github.com/digitalwalletcorp/vue-core/issues"
+  },
+  "files": [
+    "lib/**/*",
+    "src/**/*"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.29"
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^3.17.5",
+    "@types/node": "24.13.6",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitest/coverage-v8": "3.2.4",
+    "@vue/test-utils": "2.4.6",
+    "happy-dom": "20.14.5",
+    "nuxt": "^3.17.5",
+    "typescript": "6.0.3",
+    "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-tsc": "3.1.5"
+  }
+}

package/src/components.ts

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

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from '@/components';
+export type { LabelPreset } from '@/types/label-preset';

package/src/label-button.vue

@@ -0,0 +1,57 @@
+<!--
+アイコンとラベルを持つボタン
+-->
+<template>
+  <button>
+    <LabelIcon
+      :preset="props.preset"
+      :gap="props.gap"
+      :icon-class="props.iconClass"
+      :icon-style="props.iconStyle"
+      :label-class="props.labelClass"
+      :label-style="props.labelStyle"
+    >
+      <!-- 渡されたスロットだけを中継する。空のスロットを渡すとpresetの内容が表示されなくなるため -->
+      <template
+        v-if="slots.icon != null"
+        #icon
+      >
+        <slot name="icon" />
+      </template>
+      <template
+        v-if="slots.default != null"
+        #default
+      >
+        <slot />
+      </template>
+    </LabelIcon>
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { ClassValue, StyleValue } from 'vue';
+import LabelIcon from '@/label-icon.vue';
+import type { LabelPreset } from '@/types/label-preset';
+
+interface Props {
+  /** アイコンとラベルの組み合わせ */
+  preset?: LabelPreset;
+  /** アイコンとラベルの間隔。未指定ならLabelIconの既定値(0.25em) */
+  gap?: string;
+  /** presetのアイコンに付けるclass。スロットで渡したアイコンには、スロット側で直接指定する */
+  iconClass?: ClassValue;
+  /** presetのアイコンに付けるstyle。スロットで渡したアイコンには、スロット側で直接指定する */
+  iconStyle?: StyleValue;
+  /** ラベルに付けるclass */
+  labelClass?: ClassValue;
+  /** ラベルに付けるstyle */
+  labelStyle?: StyleValue;
+}
+const props = defineProps<Props>();
+
+interface Slots {
+  icon?(): unknown;
+  default?(): unknown;
+}
+const slots = defineSlots<Slots>();
+</script>

package/src/label-icon.vue

@@ -0,0 +1,62 @@
+<!--
+アイコンとラベルを横に並べる
+-->
+<template>
+  <span
+    class="dwui-label-icon"
+    :style="props.gap == null ? undefined : { gap: props.gap }"
+  >
+    <slot name="icon">
+      <component
+        :is="props.preset.icon"
+        v-if="props.preset != null"
+        v-bind="props.preset.iconProps"
+        :class="props.iconClass"
+        :style="props.iconStyle"
+      />
+    </slot>
+    <!-- スロットに複数の要素が入っても、flexの子要素に分かれて間にgapが入らないよう1つにまとめる -->
+    <span
+      v-if="slots.default != null || props.preset != null"
+      :class="props.labelClass"
+      :style="props.labelStyle"
+    >
+      <slot>{{ typeof props.preset?.label === 'function' ? props.preset.label() : props.preset?.label }}</slot>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { ClassValue, StyleValue } from 'vue';
+import type { LabelPreset } from '@/types/label-preset';
+
+interface Props {
+  /** アイコンとラベルの組み合わせ */
+  preset?: LabelPreset;
+  /** アイコンとラベルの間隔。未指定なら既定値(0.25em) */
+  gap?: string;
+  /** presetのアイコンに付けるclass。スロットで渡したアイコンには、スロット側で直接指定する */
+  iconClass?: ClassValue;
+  /** presetのアイコンに付けるstyle。スロットで渡したアイコンには、スロット側で直接指定する */
+  iconStyle?: StyleValue;
+  /** ラベルに付けるclass */
+  labelClass?: ClassValue;
+  /** ラベルに付けるstyle */
+  labelStyle?: StyleValue;
+}
+const props = defineProps<Props>();
+
+interface Slots {
+  icon?(): unknown;
+  default?(): unknown;
+}
+const slots = defineSlots<Slots>();
+</script>
+
+<style>
+:where(.dwui-label-icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+}
+</style>

package/src/nuxt.ts

@@ -0,0 +1,23 @@
+import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit';
+import * as components from '@/components';
+
+/**
+ * コンポーネントをNuxtのコンポーネント自動importへ登録するモジュール。
+ * グローバル登録(registerComponents)と違い、テンプレートで使ったコンポーネントだけがバンドルされ、
+ * 型は Nuxt が .nuxt/components.d.ts へ生成するため、利用側に型定義は要らない。
+ *
+ * 名前の一覧を得るためだけに ./components をimportしている。
+ * このモジュールはビルド時にNuxtが読み込むもので、アプリの実行時バンドルには入らない
+ */
+export default defineNuxtModule({
+  meta: {
+    name: '@digitalwalletcorp/vue-core',
+    configKey: 'vueCore'
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    for (const name of Object.keys(components)) {
+      addComponent({ name, export: name, filePath: resolver.resolve('./index') });
+    }
+  }
+});

package/src/register.ts

@@ -0,0 +1,14 @@
+import type { App, Component } from 'vue';
+import * as components from '@/components';
+
+type VueCoreComponents = typeof components;
+
+declare module 'vue' {
+  interface GlobalComponents extends VueCoreComponents {}
+}
+
+export function registerComponents(app: App) {
+  for (const [name, component] of Object.entries<Component>(components)) {
+    app.component(name, component);
+  }
+}

package/src/types/global.d.ts

@@ -0,0 +1,7 @@
+type VueCoreComponents = typeof import('../components');
+
+declare module 'vue' {
+  interface GlobalComponents extends VueCoreComponents {}
+}
+
+export {};

package/src/types/label-preset.ts

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