Vue3 Component Library

A Vue3 component library with reusable UI components like Button, Card and more.

Features

1. page-wrapper
2. c-searchComponent
3. c-table
4. c-card
5. c-steps
6. c-confim-model
7. c-upload-file
8. c-svg

Installation

npm install huiyi-component-library

Usage

Global Registration

import { createApp } from 'vue';
import Vue3ComponentLibrary from 'huiyi-component-library';
import 'huiyi-component-library/dist/style.css';

const app = createApp(App);

// Register all components globally
app.use(Vue3ComponentLibrary);

// Now you can use the components anywhere
// <Button type="primary">Click me</Button>
// <Card header="Card Title">Card content</Card>

Individual Component Import

import { Button, Card } from 'huiyi-component-library';
import 'huiyi-component-library/dist/style.css';

export default {
  components: {
    Button,
    Card
  }
}

Components

Button

<template>
  <div>
    <Button type="default">Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="danger">Danger</Button>
    
    <Button size="small">Small</Button>
    <Button size="medium">Medium</Button>
    <Button size="large">Large</Button>
    
    <Button :loading="true">Loading</Button>
    <Button :disabled="true">Disabled</Button>
  </div>
</template>

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | String | 'default' | Button type: 'default', 'primary', 'success', 'warning', 'danger' | | size | String | 'medium' | Button size: 'small', 'medium', 'large' | | disabled | Boolean | false | Whether the button is disabled | | loading | Boolean | false | Whether the button is in loading state | | icon | Object | null | Icon component to show in button |

Button Events

| Event | Description | |-------|-------------| | click | Triggered when button is clicked |

Card

<template>
  <div>
    <Card header="Card Title">
      Card content goes here
    </Card>
    
    <Card :border="false" shadow="always">
      <h3>Always shadow card without border</h3>
      <p>Card content</p>
    </Card>
  </div>
</template>

Card Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | header | String | null | Title of the card | | width | String | '100%' | Width of the card | | height | String | 'auto' | Height of the card | | bodyStyle | Object | {} | Style of the card body | | shadow | String | 'hover' | Shadow mode: 'always', 'hover', 'never' | | border | Boolean | true | Whether to show border |

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Publish to npm
npm run publish:npm

License

MIT