Canis Components

this UI library is for Canis, a Brazilian ERP system, but you can use it in your project too! The only requirement is that your project should be developed in Vue 3.

How to install

execute command: npm i canis-components

Components list

Here are the components that we have for now:

• Affix
• Button
• Card
• Empty
• Header
• Icon
• Input checkbox
• Input number
• Input Text
• Modal
• Navegation bar
• Navegation bar item
• Tabs
• Text

How to install

Affix

[DOCUMENTATION WIP]

Button

vue component:

<cns-button />

props:

 {
    text?: string;
    loading?: boolean;
    type?: 'fill' | 'default' | 'text' | 'icon'
    size?: 'xx-big' | 'x-big' | 'big' | 'default' | 'small'
    color?: 'primary' | 'primary-dark' | 'secondary' | 'error' | 'default',
    isDegradColor?: boolean,
    icon?: TypeIcon | '';
    dark?: boolean;
    rounded?: boolean;
    justifyContent?: 'start' | 'center' | 'end';
    full?: boolean;
    info?: string;
    readonly?: boolean,
    joinLeft?: boolean,
    joinRight?: boolean,
    joinUp?: boolean,
    joinDown?: boolean,
}

Card

[DOCUMENTATION WIP]

Empty

[DOCUMENTATION WIP]

Header

[DOCUMENTATION WIP]

Icon

[DOCUMENTATION WIP]

Input checkbox

[DOCUMENTATION WIP]

Input number

vue component:

<cns-input-number v-model="age" title="Age" resume />

props:

{
    title?: string,
    modelValue: number
    readonly?: boolean,
    leftIcon?: string,
    onKeyEnter?: Function,
    required?: boolean,
    arrKey?: number
    onChange?: Function
    info?: string,
    maxWidth?: string,
    tabindex?: number,
    btnClear?: boolean,
    resume?: boolean,
    joinLeft?: boolean,
    joinRight?: boolean,
    minValue?: number,
    maxValue?: number
}

Input Text

vue component:

<cns-input-text v-model="document" title="title" />

props:

{
    mask?: string | string[] | null,
    title?: string,
    modelValue: string
    readonly?: boolean,
    leftIcon?: string,
    onKeyEnter?: Function,
    required?: boolean,
    arrKey?: number
    onChange?: Function,
    info?: string,
    isSecret?: boolean,
    maxWidth?: string,
    tabindex?: number,
    btnClear?: boolean,
    joinLeft?: boolean,
    joinRight?: boolean,
}

Modal

vue component:

<cns-modal v-model="isOpen" title="title" />

props:

 {
    modelValue: boolean
    title: string
    width?: string,
    hideBtnClose?: boolean
}

Navegation bar

[DOCUMENTATION WIP]

Navegation bar item

[DOCUMENTATION WIP]

Tabs

[DOCUMENTATION WIP]

Text

[DOCUMENTATION WIP]