oga-ui

Guide

OGA UI is a frontend UI component library built on Vue 3 and Element Plus.

Dependencies

"vue": "^3.5.25"
"element-plus": "^2.13.2"
"vue-clipboard3": "^2.0.0"
"@wangeditor/editor": "^5.1.23"
"@wangeditor/editor-for-vue": "^5.1.12"

Install

npm i oga-ui
npm i @wangeditor/editor
npm i vue-clipboard3
npm i @wangeditor/editor-for-vue@next

How to use

in main.ts

import "oga-ui/index.css"
import ogaUI from 'oga-ui'

app.use(ogaUI)

PageStateManager

If you use usePageState, configure the host app's router and i18n once in main.ts.

The library does not include business i18n messages such as errorCode, action, delete, update, and create. Those messages should stay in your actual application.

import "oga-ui/index.css";
import ogaUI, { configurePageState } from "oga-ui";
import router from "@/router";
import i18n from "@/plugins/i18n/base";

configurePageState({
  router,
  i18n,
});

app.use(router);
app.use(i18n);
app.use(ogaUI);

Then use it in pages or components:

import { ActionType, usePageState } from "oga-ui";

const { state, pageState, pageQueryState, pageResult, paginationState } =
  usePageState<AccountResult>();

const data = await pageState.resolveResponse(fetchAccountPage(), ActionType.Paging);

configurePageState makes these methods use your application dependencies:

pageState.redirect("/");
pageState.getQueryValue("tab");
pageState.getRouteParamValue("id");
pageState.getPrimaryId();
pageState.confirmDelete(async () => {
  // delete data
});

What's new

Input
InputNumber
Mention
DatePicker
TimePicker
Cascader
Select
SelectV2
TreeSelect
Tag
Table
Page
PageSection
PageLayout
RichTextEditor
IconFont
Avatar
Paging (custom paging)
ImageUpload(Multiple upload)
ElIcon

Update

Table

Column Type

export enum ColumnType {
    Switch = "switch",
    Button = "button",
    Date = "date",
    Datetime = "datetime",
    Image = "image",
    Album = "album",
    Number = "number",
}

ImageState {
    title: string;
    url: string;
}

Filed value: List<ImageState>

<el-image
    :src="url"
    :preview-src-list="srcList"
/>

ColumnType.Number
{
    prop: 'chest',
    width: 100,
    type: ColumnType.Number,
    config: {
        format: "###.###"
    },
    label: i18n.global.t('organize.employee.tableHeader.chest')
},
eg: 123,456,769
    
config: {
    format: "KMBT"
},
eg: 532 / 1.2K / 12.5K / 12.2M / 2.5B / 885.3T

config: {
    format: "fixed",
    digit: 3
},
eg: 531.972
    
className: 'stop',
Stop row click event

ColumnType.Image
ColumnType.Album
config: {
    radius: 25,
    fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
},

ColumnType.Date 
ColumnType.Datetime 
    format: 'yyyy年MM月dd日'
    format: "yyyy年MM月dd日 hh时mm分ss秒"

ColumnType.Mask
    format: '1/3',  eg: 0813***1059
    format: "default", 0*******9
    format: "email", j*********e@gmail.com
    
ColumnType.Dictionary
    interface DictState {
        label: string;
        value: string | number | boolean;
    }
    config: {
        data: DictState[]
    }
    
ColumnType.Button
    ButtonGroupState[]
    ButtonGroupState {
        icon: string;
        circle: boolean;
        name: string;
        size: string;
        disabled: boolean;
        round: boolean;
        plain: boolean;
        type: string;
        label: string;
        className: string;
        onClick: Function | null;
        popover?: PopoverState;
    }
    PopoverState {
        title: string;
        placement: string;
        content: string;
    }
    
ColumnType.State
    row.value
    0   <el-icon name="close"></el-icon>
    1   <el-icon name="check"></el-icon>
ColumnType.Copy
    It will copy data to the clipboard.

El Icon

How to use

Simplified the usage of Element Plus Icons

<el-icon name="apple" size="40"></el-icon>

IconFont

How to use

name: icon name
<oga-icon name="package" size="40"></oga-icon>

ICON List

const icons = [
    "avatar",
    "group",
    "customer",
    "user",
    "video",
    "cs",
    "brightness",
    "contrast",
    "face",
    "link",
    "flash",
    "key",
    "voice",
    "safe",
    "code",
    "info",
    "task",
    "graphics",
    "add-list",
    "save",
    "label",
    "pin",
    "cancel",
    "list",
    "wallet",
    "bill-empty",
    "bill-new",
    "bill-complete",
    "sign-in",
    "car",
    "truck",
    "pack",
    "shop",
    "logout",
    "personal",
    "print",
    "edit",
    "laptop",
    "copy",
    "lock",
    "vs",
    "bag",
    "gift",
    "en",
    "theme",
    "wand",
    "diamond",
    "cn",
    "help",
    "tiers",
    "navigate",
    "correct",
    "android",
    "incorrect",
    "table",
    "about",
    "plus",
    "equal",
    "minus",
    "switch",
    "refresh",
    "disable",
    "setting",
    "scan",
    "home",
    "delete",
    "frame",
    "more",
    "app",
    "full-screen",
    "shield",
    "currency-flow",
    "loan",
    "calculator",
    "finance",
    "dollar",
    "cny",
    "cancel-bill",
    "bank-card",
    "praise",
    "tread",
    "smile",
    "grow",
    "message",
    "sad",
    "share",
    "collect",
    "wang",
    "favorite",
    "calendar",
    "tree",
    "polyline",
    "cloud",
    "upload",
    "download",
    "pie",
    "columnar",
    "package",
    "package-collection",
    "package-move",
    "location",
    "earth",
    "sorting",
    "service",
    "cart",
    "customs",
    "msg",
    "news",
    "email",
    "notice",
    "eye",
    "eye-close",
    "search"
]

Attachment upload

oga-attachment-upload：拖拽批量附件上传、改名、密码标记、删除排序与完整模式。组件 API 与 Demo。Demo 路由 /section/attachment-upload，支持 oga-mall-service 真实上传和模拟测试。

Video upload

oga-video-upload：单视频上传、进度、播放预览和移除。组件 API 与 Demo。Demo /section/video-upload 使用 oga-page，接入 Mall 真实上传接口。

Upload field headings

oga-avatar, oga-video-upload, and oga-attachment-upload reuse oga-section for their frame, border radius, and hover shadow. All three accept #heading (left title) and #header (right action). The existing label prop remains the default heading. Avatar still supports an explicit radius override.

Paired image previews

oga-image-upload, oga-avatar and attachment cover images support :thumbnail="true" (default: false). Previews use name.og.webp, while v-model and upload results retain name.webp. Existing .og URLs are not duplicated, and query strings, fragments, blob/data URLs are preserved. Enable paired image generation separately on the upload endpoint, e.g. action="/api/upload/file?thumbnail=true". Only enable the preview option for images that have an original companion.

Project border and label colors

Override these inherited CSS variables globally or on a container/component:

:root {
  --oga-border-color: #dcdfe6;
  --oga-label-color: #909399;
}
/* A local override affects only this section and its children. */
.settings-panel { --oga-border-color: #c6d8ef; }

--oga-border-color controls section frames (including avatars, attachment and video uploads), image upload borders, editor borders and YouTube inputs. --oga-label-color controls section legends and floating input labels. Omitting a variable preserves the component's existing default color.