lemon-pub-coreui-v1 v1.2.0

Vue 3 Components

A collection of customizable Vue 3 components with TypeScript support.

Components

1. CButton Component

A customizable button component with various styles and icon support.

2. CSelectBox Component

A customizable select box component with v-model support.

Installation

npm install lemon-pub-coreui-v1

Usage with TypeScript

Global Registration

import { createApp } from 'vue'
import { CButton, CSelectBox } from 'lemon-pub-coreui-v1'
import 'lemon-pub-coreui-v1/style.css'

const app = createApp(App)
app.use(CButton)
app.use(CSelectBox)

Local Registration

import { CButton, CSelectBox } from 'lemon-pub-coreui-v1'
import 'lemon-pub-coreui-v1/style.css'

export default {
  components: {
    CButton,
    CSelectBox
  }
}

CButton Usage

<template>
  <CButton
    btn-type="primary"
    :icon="'user-line'"
    :icon-size="20"
    @click="handleClick"
  >
    Click me
  </CButton>
</template>

<script setup lang="ts">
import { CButton } from 'lemon-pub-coreui-v1'

const handleClick = (event: MouseEvent) => {
  console.log('Button clicked:', event)
}
</script>

CSelectBox Usage

<template>
  <CSelectBox
    v-model="selectedValue"
    :options="[
      { label: 'Option 1', value: '1' },
      { label: 'Option 2', value: '2' }
    ]"
    placeholder="Select an option"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectedValue = ref('')
</script>

Props

CButton Props

interface ButtonProps {
  // Required
  btnType: 'primary' | 'secondary' | 'tertiary' | 'line' | 'link'
  
  // Optional
  icon?: string                    // Remixicon class name
  iconPosition?: 'left' | 'right'  // Default: 'left'
  iconSize?: number               // Default: 16
  ariaLabel?: string              // Accessibility label
  btnSize?: 'small' | 'medium' | 'large'  // Default: 'medium'
  isLink?: boolean                // Default: false
  linkHref?: string               // URL for link buttons
  elementType?: 'a' | 'button' | 'div'  // Default: 'button'
}

CSelectBox Props

Events

CButton Events

interface ButtonEvents {
  (e: 'click', event: MouseEvent): void
}

CSelectBox Events

Button Types

• primary: Primary action button
• secondary: Secondary action button
• tertiary: Tertiary action button
• line: Outlined button
• link: Link-style button

Button Sizes

• small: Small button
• medium: Medium button (default)
• large: Large button

Examples

Primary Button

<CButton btn-type="primary">Primary Button</CButton>

Secondary Button with Icon

<CButton 
  btn-type="secondary"
  icon="arrow-right-line"
  icon-position="right"
>
  Next
</CButton>

Link Button

<CButton 
  btn-type="link"
  is-link
  link-href="https://example.com"
>
  Go to Link
</CButton>

Development

# Install dependencies
npm install

# Build the component
npm run build

# Run type check
npm run type-check

License

MIT License