kpc

English | 简体中文

Features

• Support multiple frameworks: Intact / Vue / React / Angular.
• Complete custom theme system.
• 360° locate popup layer.
• Declarative form validation.
• Excellent documents and design
• 90% coverage unit tests.

Browsers Support

Vue

Installation

npm install kpc-vue --save

Usage

<template>
    <Button>Hello</Button>
</template>
<script>
import {Button} from 'kpc-vue';

export default {
    components: {
        Button
    }
}
</script>

React

Installation

npm install kpc-react --save

Usage

import React from 'react';
import {Button} from 'kpc-react';

class App extends React.Component {
    render() {
        return <Button>Hello</Button>
    }
}

Intact

Installation

npm install kpc --save

Usage

import {Button} from 'kpc';

<Button>Hello</Button>

Angular

Read more

Installation

npm install kpc-angular -S

Configure webpack.config.js

You need use @angular-builders/custom-webapck to configure webpack, if your project initialized by Angular CLI.

const path = require('path');

module.exports = function(config) {
  config.module.rules.find(rule => {
    if (rule.test.toString() === '/\\.css$/') {
      rule.exclude.push(path.resolve(__dirname, 'node_modules/kpc-angular'));
      return true;
    }
  });

  return config;
};

Usage

src/app/app.module.ts

import { KpcBrowserModule, KpcModule } from 'kpc-angular';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    KpcBrowserModule,
    AppRoutingModule,
    KpcModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

import { Component, ViewEncapsulation } from '@angular/core';
import { MessageComponent } from 'kpc-angular';

@Component({
  selector: 'app-root',
  template: `
    <k-button type="primary" (click)="onClick()">Hello World</k-button>
  `,
  style: `
    .k-button {
      margin: 10px;
    }
  `,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  onClick() {
    MessageComponent.success('Welcome to kpc world!');
  }
}

Immediate Feedback

Welcome to join us by QQ. Group Number: 529739732

Links

• KPC Document
• Intact MVVM Framework
• Vdt Template Engine
• Intact-Vue Compatibility Layer
• Intact-React Compatibility Layer
• Intact-Angular Compatibility Layer

Develop

Require node@10 and npm@6.9 or above.

git clone https://github.com/ksc-fe/kpc.git
cd kpc
npm install
npm run dev:doc

# test 
npm run test
# update snapshots 
npm run snapshot
# deploy documents
npm run deploy:doc
# release new version 
npm run release

License

MIT