ctg-vue-components

v1.0.0

Published

11 days ago

A Vue 3 + TypeScript component library, built on frappe-ui and Tailwind CSS.

0High
0Medium
0Low

ct.galega

Ctg Vue Components

A Vue 3 + TypeScript component library, built on frappe-ui and Tailwind CSS.

Components

| Component | Description | |-----------|-------------| | CtgBadge | Badge with type variants (square, banner, rectangle) and color themes | | CtgCard | Closable card container with header, body, and footer sections | | CtgValueBadge | Value badge with threshold-based color coding and level images | | CtgDiffCompare | Unified diff component for text, JSON, and code comparison |

Install

npm install ctg-vue-components
# or
yarn add ctg-vue-components

Peer dependencies: vue ^3.5 frappe-ui ^0.1 feather-icons ^4 lucide-vue-next ^0.575

Usage

Global registration

import { createApp } from 'vue'
import { CtgVueComponents } from 'ctg-vue-components'
import 'ctg-vue-components/style.css'

const app = createApp(App)
app.use(CtgVueComponents)

Component imports

import { CtgBadge, CtgCard, CtgValueBadge, CtgDiffCompare } from 'ctg-vue-components'

Theme switching

import { setThemeMode } from 'ctg-vue-components'

setThemeMode('dark')  // or 'light'
// Applies data-theme="dark" on <html>, components adapt automatically

CtgDiffCompare

Compare text, JSON, or code with side-by-side or inline layout.

<template>
  <!-- Text comparison -->
  <CtgDiffCompare
    mode="text"
    layout="side-by-side"
    :old-value="oldText"
    :new-value="newText"
  />

  <!-- JSON comparison (with invalid JSON error handling) -->
  <CtgDiffCompare
    mode="json"
    layout="inline"
    :old-value='{"name":"John"}'
    :new-value='{"name":"Jane"}'
  />

  <!-- Code comparison -->
  <CtgDiffCompare
    mode="code"
    :old-value="oldCode"
    :new-value="newCode"
    layout="side-by-side"
  />
</template>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | old-value | string | '' | Original value (left panel) | | new-value | string | '' | New value (right panel) | | mode | 'text' \| 'json' \| 'code' | 'text' | Diff comparison mode | | layout | 'side-by-side' \| 'inline' | 'side-by-side' | View layout |

CtgBadge

<CtgBadge variant="square" size="md" :value="42" unit="items" />

CtgCard

<CtgCard title="My Card" closable @close="onClose">
  <template #header>Card Header</template>
  <p>Card body content</p>
  <template #footer>Card Footer</template>
</CtgCard>

CtgValueBadge

<CtgValueBadge
  :value="50"
  :positive-threshold="10"
  :neutral-threshold="0"
  :danger-threshold="-10"
  variant="subtle"
  unit="items"
/>

Theming

Supports three themes via data-theme attribute on <html>:

| Theme | Default | |-------|---------| | matrix (green-on-black) | ✅ Default | | ctg (blue corporate) | | | fallout (amber-on-green) | |

<html data-theme="fallout">

Components also respond to data-theme="dark" for dark mode variants.

Development

# Install dependencies
yarn install

# Start dev server
yarn dev

# Build for production
yarn build

# Run tests
yarn test

# Watch tests
yarn test:watch

Build

yarn build

Outputs ESM (./dist/ctg-vue-components.es.js) and UMD (./dist/ctg-vue-components.umd.js) bundles with CSS.

License

MIT