oga-ui 0.1.38

package/README.md

@@ -0,0 +1,251 @@
+# Guide
+
+----
+
+`OGA UI` is a frontend UI component library built on `Vue 3` and `Element Plus`.
+
+## Dependencies
+```js
+"vue": "^3.5.25"
+"element-plus": "^2.13.2"
+"@wangeditor/editor": "^5.1.23"
+"@wangeditor/editor-for-vue": "^5.1.12"
+```
+
+## Install
+
+```bash
+npm i oga-ui
+npm i @wangeditor/editor
+npm i @wangeditor/editor-for-vue@next
+```
+
+## How to use
+
+in `main.ts`
+
+```js
+import "oga-ui/index.css"
+import ogaUI from 'oga-ui'
+
+app.use(ogaUI)
+```
+
+## What's new
+```html
+Input
+InputNumber
+Mention
+DatePicker
+TimePicker
+Cascader
+Select
+SelectV2
+TreeSelect
+Tag
+Table
+Page
+PageSection
+PageLayout
+RichTextEditor
+IconFont
+Avatar
+Paging (custom paging)
+ImageUpload(Multiple upload)
+```
+
+## Update
+### Table
+```html
+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
+```
+
+## IconFont
+#### How to use
+```html
+name: icon name
+<oga-icon name="package"></oga-icon>
+```
+#### ICON List
+```js
+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"
+]
+```

package/avatar/index.css

@@ -0,0 +1,2 @@
+:root{--inner-color:#3779eb4d;--inner-shadow:0 0 10px 0 var(--inner-color) inset}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.m-1{margin:.183024rem!important}.mt-1{margin-top:.183024rem!important}.mr-1{margin-right:.183024rem!important}.mb-1{margin-bottom:.183024rem!important}.ml-1{margin-left:.183024rem!important}.m-2{margin:.366047rem!important}.mt-2{margin-top:.366047rem!important}.mr-2{margin-right:.366047rem!important}.mb-2{margin-bottom:.366047rem!important}.ml-2{margin-left:.366047rem!important}.m-3{margin:.732094rem!important}.mt-3{margin-top:.732094rem!important}.mr-3{margin-right:.732094rem!important}.mb-3{margin-bottom:.732094rem!important}.ml-3{margin-left:.732094rem!important}.m-4{margin:1.09814rem!important}.mt-4{margin-top:1.09814rem!important}.mr-4{margin-right:1.09814rem!important}.mb-4{margin-bottom:1.09814rem!important}.ml-4{margin-left:1.09814rem!important}.m-5{margin:1.46419rem!important}.mt-5{margin-top:1.46419rem!important}.mr-5{margin-right:1.46419rem!important}.mb-5{margin-bottom:1.46419rem!important}.ml-5{margin-left:1.46419rem!important}.m-6{margin:1.83024rem!important}.mt-6{margin-top:1.83024rem!important}.mr-6{margin-right:1.83024rem!important}.mb-6{margin-bottom:1.83024rem!important}.ml-6{margin-left:1.83024rem!important}.m-7{margin:2.19628rem!important}.mt-7{margin-top:2.19628rem!important}.mr-7{margin-right:2.19628rem!important}.mb-7{margin-bottom:2.19628rem!important}.ml-7{margin-left:2.19628rem!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.p-1{padding:.183024rem!important}.pt-1{padding-top:.183024rem!important}.pr-1{padding-right:.183024rem!important}.pb-1{padding-bottom:.183024rem!important}.pl-1{padding-left:.183024rem!important}.p-2{padding:.366047rem!important}.pt-2{padding-top:.366047rem!important}.pr-2{padding-right:.366047rem!important}.pb-2{padding-bottom:.366047rem!important}.pl-2{padding-left:.366047rem!important}.p-3{padding:.732094rem!important}.pt-3{padding-top:.732094rem!important}.pr-3{padding-right:.732094rem!important}.pb-3{padding-bottom:.732094rem!important}.pl-3{padding-left:.732094rem!important}.p-4{padding:1.09814rem!important}.pt-4{padding-top:1.09814rem!important}.pr-4{padding-right:1.09814rem!important}.pb-4{padding-bottom:1.09814rem!important}.pl-4{padding-left:1.09814rem!important}.p-5{padding:1.46419rem!important}.pt-5{padding-top:1.46419rem!important}.pr-5{padding-right:1.46419rem!important}.pb-5{padding-bottom:1.46419rem!important}.pl-5{padding-left:1.46419rem!important}.p-6{padding:1.83024rem!important}.pt-6{padding-top:1.83024rem!important}.pr-6{padding-right:1.83024rem!important}.pb-6{padding-bottom:1.83024rem!important}.pl-6{padding-left:1.83024rem!important}.p-7{padding:2.19628rem!important}.pt-7{padding-top:2.19628rem!important}.pr-7{padding-right:2.19628rem!important}.pb-7{padding-bottom:2.19628rem!important}.pl-7{padding-left:2.19628rem!important}.oga-material{clear:both;padding:.375rem 0;position:relative}.oga-material:has(.is-focus,.is-focused) .oga-material-label{color:#409eff}.oga-material.no-tips .el-form-item__error,.oga-material.no-tips+.el-form-item__error{opacity:0}.oga-material .el-input.is-disabled .el-input__inner{background:0 0}.oga-material .el-input.is-round .el-input__wrapper,.oga-material .el-range-editor.is-round,.oga-material .is-round .el-select__wrapper,.oga-material .is-round .el-input__wrapper,.oga-material .el-input-number.is-round .el-input__wrapper{border-radius:var(--el-border-radius-round)}.oga-material .el-input-number.is-round .el-input-number__decrease{border-top-left-radius:var(--el-border-radius-round);border-bottom-left-radius:var(--el-border-radius-round)}.oga-material .el-input-number.is-round .el-input-number__increase{border-top-right-radius:var(--el-border-radius-round);border-bottom-right-radius:var(--el-border-radius-round)}.oga-material .el-input-tag.is-round{border-radius:var(--el-border-radius-round)}.oga-material .el-input-group__prepend,.oga-material .el-input-group__append{padding:0 15px!important}.oga-material .el-date-editor .el-input__wrapper,.oga-material .el-select,.oga-material .el-cascader{width:100%}.oga-material.borderless .el-input-number .el-input__inner{text-align:center}.oga-material.borderless .el-input__inner{border-top:0;border-left:0;border-right:0;border-radius:0;padding-left:0;padding-right:0}.oga-material.borderless [class*=el-]{background-color:#0000;border-top:0;border-left:0;border-right:0;border-radius:0}.oga-material.borderless .el-date-editor--date.el-input--prefix .el-input__inner{padding-left:1.875rem}.oga-material-label{color:#c0c4cc;z-index:2;background-color:#fff;border-radius:5px;padding-left:2px;padding-right:2px;font-size:.75rem;line-height:.75rem;transition:all .2s;position:absolute;top:0;left:1rem;opacity:1!important}.oga-material-label:not(.active){opacity:0}.oga-material+.el-form-item__error{padding-top:0}.oga-form .el-form-item.is-error .oga-material-label{color:#f56c6c}.oga-form.gutter-less .el-form-item:not(:last-child){margin-bottom:.625rem}.oga-form.gutter-less .el-form-item:last-child,.oga-form.borderless .el-form-item{margin-bottom:0}.oga-form .el-form-item__content{line-height:normal;display:block}.oga-form .oga-material+.el-form-item__error{margin-top:-.25rem}.text-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.btn-block{width:100%;display:block}.oga-table{flex-direction:column;height:100%;display:flex}.oga-table-image{border:1px solid red;display:flex}.oga-table-content{border:1px solid var(--el-table-border);flex:1;position:relative;overflow:auto}.oga-table .el-pagination{justify-content:flex-end;padding-top:1rem;display:flex;margin:0 -11px!important}.oga-table .el-card,.oga-table .el-table{height:100%}.oga-table .el-table__layers .cell{line-height:1.3}.oga-table-batch-operation{z-index:5;text-indent:.5rem;background-color:#ffffffb3;align-items:center;width:calc(100% - 55px);height:46px;transition:all .3s;display:flex;position:absolute;top:1px;left:55px}.oga-table-batch-operation .el-dropdown{height:100%}.oga-table-batch-operation .el-dropdown .el-dropdown-link div{cursor:pointer;background-color:#fff;align-items:center;height:100%;padding:5px 10px 5px 5px;display:flex}.oga-table-batch-operation .el-dropdown .el-dropdown-link b{color:#409eff}.oga-table .el-checkbox__input{line-height:0}.oga-table .el-table-column--selection{position:relative}.oga-table .el-table-column--selection .cell{width:100%;height:100%;position:absolute;top:0;left:0;padding:0!important}.oga-table .el-table-column--selection .cell .el-checkbox{cursor:pointer;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.oga-table .fox-svg-img{width:50px}.oga-table .fox-svg-icon{width:50px;height:50px}.oga-table .cell{white-space:nowrap;font-weight:400}.oga-table th.el-table__cell.is-sortable>.cell{justify-content:space-between;align-items:center;display:flex}.oga-table .el-image{width:100%;margin:0;padding:0;display:block;position:relative;overflow:hidden}.oga-table .el-image:before{content:"";padding-top:100%;display:block}.oga-table .el-image .el-image__inner{object-fit:cover;object-position:center;width:100%;height:100%;position:absolute;top:0;left:0}.oga-header{z-index:2;color:#46a0fc;margin-left:calc(var(--asideWidth) * 1px);box-shadow:none;background-color:#030b2c;align-items:center;transition:all .3s;display:flex;position:relative}.oga-header .el-breadcrumb__inner,.oga-header .el-breadcrumb__item:last-child .el-breadcrumb__inner,.oga-header .el-breadcrumb__item:last-child .el-breadcrumb__inner a,.oga-header .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,.oga-header .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{color:#fffc}.oga-header .el-breadcrumb__separator{color:#fff9}.oga-header-left{flex:1;align-items:center;height:3.75rem;padding:.5rem 1.875rem;display:flex}.oga-header-left .oga-header-icon{cursor:pointer;align-items:center;font-size:16px;display:flex}.oga-header-left .oga-header-icon .el-icon{margin-right:10px}.oga-header-right{align-items:center;height:3.75rem;margin-left:auto;padding:.5rem 1.875rem;display:flex}@media (max-width:768px){.oga-header{margin-left:0}}.oga-header .global-header-info{align-items:center;display:flex}.oga-header .user-avatar{color:#909399;cursor:pointer;align-items:center;margin-left:6px;display:flex}.oga-header .user-avatar .el-avatar{margin-right:5px}.oga-header .user-avatar{text-transform:uppercase}.oga-header .ship-calculator{width:32px;height:32px;padding:7px!important}.oga-header .ship-calculator i{color:#7f7f7f;font-size:18px}.oga-header .el-breadcrumb__inner a,.oga-header .el-breadcrumb__inner.is-link{font-weight:400}.oga-layout{flex-direction:column;height:100%;margin-left:0;transition:all .3s;display:flex;position:relative;overflow:hidden}.oga-layout-footer{text-align:center;color:#909399;text-indent:200px;flex-shrink:0;padding-top:6px;font-size:10px}.oga-layout-mask{content:"";z-index:4;background-color:#000c;width:calc(100% - 200px);height:100%;position:absolute;top:0;left:200px}.oga-layout-mask:not(.active){display:none}@media (min-width:768px){.oga-layout-mask{display:none}}.oga-layout-fold{cursor:pointer;z-index:11;justify-content:center;align-items:center;width:60px;height:60px;font-size:24px;display:flex;position:absolute;top:0;right:-60px}.oga-layout-fold img{width:24px;height:24px}@media (min-width:768px){.oga-layout-fold{display:none}}.oga-layout-aside{z-index:1;height:100vh;width:calc(var(--asideWidth) * 1px);background-color:#fafafa;border-right:1px dotted #dee1e5;flex-direction:column;transition:all .3s;display:flex;position:absolute;top:0;left:0}.oga-layout-aside-logo{height:3.75rem;width:calc(var(--asideWidth) * 1px);background-color:#030b2c;align-items:center;padding:.5rem 1rem;display:flex}.oga-layout-aside-logo img{max-width:7.5rem;max-height:2.5rem}.oga-layout-aside-menu{background:0 0;border:0;padding-top:1rem}.oga-layout-aside-menu .oga-icon{margin-right:3px;font-size:20px}.oga-layout-aside-menu .el-menu{background:0 0}.oga-layout-aside-menu .el-menu-item.is-active{font-weight:700}.oga-layout-aside-menu .el-sub-menu .el-sub-menu__title{position:relative}.oga-layout-aside-menu .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow{display:none}.oga-layout-aside-menu .el-sub-menu .el-menu-item{background:url(data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%229%22%20width%3D%221.5%22%20height%3D%2228%22%20fill%3D%22%23CECECE%22%2F%3E%3C%2Fsvg%3E) 20px 0 repeat-y;height:1.875rem;line-height:1.875rem;position:relative;padding-left:3rem!important}.oga-layout-aside-menu .el-sub-menu .el-menu-item.is-active{background:url("data:image/svg+xml,%3Csvg%20width%3D'21'%20height%3D'28'%20viewBox%3D'0%200%2021%2028'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%2014.25H19.75V15.75H19V14.25ZM10.077%2013.362L10.7452%2013.0215V13.0215L10.077%2013.362ZM11.388%2014.673L11.7285%2014.0048H11.7285L11.388%2014.673ZM10.5%200V10.2H9V0H10.5ZM14.55%2014.25H19V15.75H14.55V14.25ZM10.5%2010.2C10.5%2011.0525%2010.5006%2011.6467%2010.5384%2012.1093C10.5755%2012.5632%2010.6446%2012.824%2010.7452%2013.0215L9.40873%2013.7025C9.18239%2013.2582%209.08803%2012.7781%209.04336%2012.2315C8.99942%2011.6936%209%2011.0277%209%2010.2H10.5ZM14.55%2015.75C13.7223%2015.75%2013.0564%2015.7506%2012.5185%2015.7066C11.9719%2015.662%2011.4918%2015.5676%2011.0475%2015.3413L11.7285%2014.0048C11.926%2014.1054%2012.1868%2014.1745%2012.6407%2014.2116C13.1033%2014.2494%2013.6975%2014.25%2014.55%2014.25V15.75ZM10.7452%2013.0215C10.9609%2013.4448%2011.3052%2013.7891%2011.7285%2014.0048L11.0475%2015.3413C10.3419%2014.9817%209.76825%2014.4081%209.40873%2013.7025L10.7452%2013.0215Z'%20fill%3D'%23CECECE'/%3E%3Cpath%20d%3D'M17%2012L20%2015L17%2018'%20stroke%3D'%23CECECE'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E%0A") 20px 0 no-repeat}.oga-layout-aside-menu .el-sub-menu .el-menu-item.is-active~.el-menu-item,.oga-layout-aside-menu .el-sub-menu:not(.is-active) .el-menu-item{background:0 0!important}.oga-layout-aside-menu .el-sub-menu__title,.oga-layout-aside-menu .el-menu-item{height:1.5rem;line-height:1.5rem}.oga-layout-aside-content{flex:1;position:relative;overflow-y:auto}.oga-layout-aside-footer{cursor:pointer;flex-shrink:0;align-items:center;padding:.5rem 1.25rem;font-size:.8125rem;display:flex}.oga-layout-aside-footer .oga-icon{vertical-align:center;margin-right:.25rem;font-size:1.25rem}@media (max-width:768px){.oga-layout-aside{left:calc(var(--asideWidth) * -1px)}.oga-layout-aside .global-aside-mask{display:block}.oga-layout-aside.active{left:0}}.oga-avatar .el-upload{border:1px dashed var(--el-border-color);border-radius:calc(var(--radius) * 1px);cursor:pointer;width:calc(var(--size) * 1px);height:calc(var(--size) * 1px);transition:var(--el-transition-duration-fast);position:relative;overflow:hidden}.oga-avatar .el-upload:hover{border-color:var(--el-color-primary)}.oga-avatar .el-upload:hover img{opacity:.06}.oga-avatar .el-upload:hover .el-icon{opacity:1}.oga-avatar .el-upload:hover .el-icon.oga-avatar-icon{color:var(--el-color-primary)}.oga-avatar-img{object-fit:contain;object-position:center;width:100%;height:100%;transition:all .3s;position:absolute}.oga-avatar .el-icon{transition:all .3s}.oga-avatar .el-icon:not(.is-empty){opacity:0}.oga-avatar .el-icon.oga-avatar-icon{color:#8c939d;text-align:center;font-size:2rem;transition:all .3s}
+/*$vite$:1*/