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

npm install @digitalwalletcorp/vue-core @digitalwalletcorp/vue-svg-icons
# or
yarn add @digitalwalletcorp/vue-core @digitalwalletcorp/vue-svg-icons

⚠️ Requirements

• Vue 3.5.29+: Props are typed with Vue's ClassValue, which is exported since Vue 3.5.29.
• @digitalwalletcorp/vue-svg-icons 1.15.3+: Used for the icons in components.

📖 Usage

There are three ways to use the components.

| | When to use | Bundled components | | --- | ----------- | ------------------ | | Import individually | When you want to minimize bundle size or prefer explicit imports | Only the components you import | | Register all components globally (Vue) | When you want to use components without importing them in each file | All components | | Register components globally (Nuxt) | When you want to use components globally in a Nuxt project | Only the components you use |

1. Import components individually

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

// 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)

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@digitalwalletcorp/vue-core/nuxt']
});

📐 Stylesheet

Import the stylesheets to ensure default alignment and icon styles.

• Vue: Import in your entry file.

// 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.

// nuxt.config.ts
export default defineNuxtConfig({
  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. Importing its stylesheet ensures icons align properly with text.

⚙️ Adapting to your application

🎨 Dark Mode & Theme Support

Components automatically adapt to your application's color-scheme (supporting both light and dark modes natively).

• Follow OS Setting: Add :root { color-scheme: light dark; } to your global CSS.
• Custom Theme Switching: Change the CSS color-scheme property on :root or a parent container (e.g., color-scheme: dark). The components will switch automatically.
• No Theme Switching: If you don't specify color-scheme, the components will be displayed in light mode.

🛠️ Customizing Styles (--dwui-* Variables)

Default styles use CSS variables (--dwui-*) and zero-specificity selectors (:where()), making them easy to override. The variables of each component are listed in its document.

We recommend creating a dwui-variables.css file to map your application's design tokens to the library's --dwui-* variables, and importing it after the library stylesheet. If you use both vue-forms and vue-core, you can use a single dwui-variables.css file for both libraries, as they share common variables like those for focus rings.

/* dwui-variables.css */
:root {
  --dwui-background-tab-header: var(--app-tab-header-background);
  --dwui-color-text-tab-header: var(--app-tab-header-text);
  --dwui-background-tab-header-selected: var(--app-tab-header-selected-background);
  --dwui-color-text-tab-header-selected: var(--app-tab-header-selected-text);
}

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@digitalwalletcorp/vue-core/style.css',
    '@digitalwalletcorp/vue-svg-icons/style.css',
    '@/assets/css/default.css', // your global CSS
    '@/assets/css/dwui-variables.css'
  ]
});

🧰 Components

| Component | Description | | --------- | ----------- | | AccordionFieldset | A fieldset whose contents can be collapsed and expanded from the legend. | | AccordionSection | An area whose contents can be collapsed and expanded with a toggle button below them. | | HourglassLoading | Shows an hourglass in place of a value while it is loading. | | LabelIcon | Displays an icon and a text label side by side. | | LabelButton | Renders a button containing an icon and a text label. | | PageSection | A section of a page with a heading. | | PageTitle | The title bar of a page, with the contents of the default slot on its right side. | | TabGroup / TabContent | Switches between contents with tab headers. |

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.