@g1cloud/open-bluesea-nuxt-module

Nuxt module for @g1cloud/open-bluesea-core - Vue UI component library.

• Release Notes

Features

• Auto-import of 25+ UI components (BSButton, BSTextInput, BSCheckbox, BSSelect, etc.)
• Auto-import of composables (useBlueseaConfig, showNotification, useSavePoint, etc.)
• Vue directives (v-tooltip, v-focus-on-load, v-click-outside)
• Notification system
• Context menu support
• SavePoint (change tracking) support

Quick Setup

Install the module to your Nuxt application:

pnpm add @g1cloud/open-bluesea-nuxt-module

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@g1cloud/open-bluesea-nuxt-module'],
  openBluesea: {
    // Optional configuration
    dateFormat: 'YYYY-MM-DD HH:mm',
  },
})

Usage

Components are auto-imported and can be used directly in your templates:

<template>
  <div>
    <BSButton @click="handleClick">
      Click me
    </BSButton>

    <BSTextInput v-model="text" placeholder="Enter text..." />

    <BSCheckbox v-model="checked">
      Check me
    </BSCheckbox>

    <span v-tooltip="'Tooltip text'">Hover me</span>

    <!-- Required for notifications -->
    <BSNotificationContainer />
  </div>
</template>

<script setup>
const text = ref('')
const checked = ref(false)

const handleClick = () => {
  showNotification('Button clicked!', 'info')
}
</script>

Available Components

Basic Components

• BSButton - Button
• BSPageNavigation - Pagination
• BSLoadingIcon - Loading indicator
• BSPopup - Popup/Modal
• BSTooltip - Tooltip
• BSCalendar - Calendar picker
• BSCalendarRange - Date range calendar

Input Components

• BSTextInput - Text input
• BSNumberInput - Number input
• BSTextArea - Text area
• BSCheckbox / BSCheckboxGroup - Checkbox
• BSRadioButton / BSRadioButtonGroup - Radio button
• BSSelect / BSMultiSelect - Dropdown select
• BSDateInput / BSDateInputPopup - Date input
• BSDateRange / BSDateRangeInputPopup - Date range input

Layout Components

• BSCardLayout - Card layout

Container Components

• BSNotificationContainer - Notification container
• BSContextMenuContainer - Context menu container
• BSContextMenu - Context menu

Available Composables

• useBlueseaConfig() - Access configuration
• showNotification() / showAlarm() / closeAlarm() - Notification system
• showTooltip() / hideTooltip() - Tooltip control
• showLoading() / hideLoading() / withLoading() - Loading state
• useContextMenu() / createContextMenuPlugin() - Context menu
• provideSavePoint() / useSavePoint() - Change tracking
• provideFieldContext() / useFieldContext() - Field context
• debounce() - Debounce utility
• waitUntil() / waitDuring() / tryUntil() - Async utilities

Configuration Options

interface ModuleOptions {
  dateFormat?: string           // Default: 'YYYY-MM-DD HH:mm'
  dateFormatDay?: string        // Default: 'YYYY-MM-DD'
  dateFormatMinute?: string     // Default: 'YYYY-MM-DD HH:mm'
  dateFormatSecond?: string     // Default: 'YYYY-MM-DD HH:mm:ss'
  minDateValue?: string
  maxDateValue?: string
  timeZone?: string
  componentConfig?: {
    popup?: {
      container?: string | HTMLElement
      hideOnScroll?: boolean
    }
    calendar?: {
      startYear?: string
      endYear?: string
    }
  }
}

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Run ESLint
pnpm lint

# Run tests
pnpm test

# Type check
pnpm test:types

Publishing

# Full release (lint, test, build, changelog, publish, push tags)
pnpm release

# Or step by step:
# 1. Build the module
pnpm prepack

# 2. Generate changelog and bump version
npx changelogen --release

# 3. Publish to npm
npm publish

# 4. Push tags to git
git push --follow-tags