@dt-frames/ui 1.0.1 → 1.0.4

package/src/components/forms/src/types/form.type.ts

@@ -0,0 +1,269 @@
+import { Recordable } from "@dt-frames/core"
+import { VNode } from "vue"
+import { RuleObject } from 'ant-design-vue/lib/form/interface'
+import type { RowProps } from 'ant-design-vue/lib/grid/Row'
+
+export type Rule = RuleObject & {
+    trigger?: 'blur' | 'change' | ['change', 'blur'];
+};
+
+export type ButtonFlag = 'OK' | 'CANCEL'
+
+export type FormCallBackParams = {
+    schema: Omit<FormSchema, 'props'> 
+    values: Recordable
+    model: Recordable
+    name: string
+}
+
+// 组件的类型
+export type ComponentType = 
+    | 'Input'
+    | 'InputGroup'
+    | 'InputPassword'
+    | 'InputSearch'
+    | 'InputTextArea'
+    | 'InputNumber'
+    | 'InputCountDown'
+    | 'Select'
+    | 'TreeSelect'
+    | 'ApiTree'
+    | 'ApiTreeSelect'
+    | 'Radio'
+    | 'RadioButtonGroup'
+    | 'RadioGroup'
+    | 'Checkbox'
+    | 'CheckboxGroup'
+    | 'AutoComplete'
+    | 'Cascader'
+    | 'DatePicker'
+    | 'MonthPicker'
+    | 'RangePicker'
+    | 'WeekPicker'
+    | 'TimePicker'
+    | 'Switch'
+    | 'Upload'
+    | 'IconPicker'
+    | 'Render'
+    | 'Slider'
+    | 'Rate'
+    | 'Divider'
+    | 'Icon'
+
+// 对表单元素进行拓展
+export type ColEx = {
+    // 样式
+    style?: any
+    // 占用空间大小
+    span?: number | string
+    // 排序
+    order?: number | string
+    // 偏移量
+    offset?: number | string
+    // 中等屏幕
+    md?: number | string
+    // 小电脑屏幕
+    xl?: number | string
+    // 大屏幕
+    xxl?: number | string
+}
+
+export type ToolTipProps = {
+    color: string;
+    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
+}
+
+// 按钮属性
+export type ButtonProps = {
+    // 按钮名称
+    name?: string
+    // 按钮风格
+    color?: 'error' | 'warning' | 'success' | ''
+    // 按钮类型
+    type?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default' | undefined
+    // 按钮class
+    class?: string
+    // 是否禁用
+    disabled?: boolean
+    // 是否显示
+    show?: boolean
+    // 按钮前面图标
+    preIcon?: string
+    // 按钮后面图标
+    postIcon?: string
+    // 按钮权限
+    auth?: string
+    // 按钮标识
+    flag?: ButtonFlag
+    // 是否处于加载中
+    loading?: boolean
+    // 按钮点击事件
+    onClick?: (...args) => any
+}
+ 
+// 整个表单配置项
+export type FormProps = {
+    mode?: 'search' | 'dialog',
+    // 是否默认查询
+    autoFetch?: boolean
+    // 对齐方式
+    layout?: 'vertical' | 'inline' | 'horizontal'
+    // 绑定的model
+    model?: Recordable
+    // 定义标签的宽度
+    labelWidth?: number | string
+    // 对齐方式
+    labelAlign?: 'left' | 'right'
+    // 标签设置
+    labelCol?: Partial<ColEx>
+    // 包裹设置
+    wrapperCol?: Partial<ColEx>
+    // 行样式
+    rowProps?: RowProps
+    // col相关的配置
+    colProps?: Partial<ColEx>
+    // 表单数据配置
+    schemas?: FormSchema[]
+    // 尺寸
+    size?: 'default' | 'small' | 'large'
+    // 是否禁用
+    disabled?: boolean
+    // 回车键搜索
+    autoSubmitOnEnter?: boolean
+    // 是否一直显示所有条目
+    alwaysShowLines?: number
+    // 是否使用紧凑布局
+    compact?: boolean
+
+    // 提交 只有当mode为查询时候有
+    onSearch?: Function
+    onReset?: Function
+    // 最小显示的条目
+    minShowColumn?: number
+    // 是否显示折叠按钮
+    showAdvancedButton?: boolean
+    enterToSearch?: boolean
+
+    // form 按钮
+    buttons?: ButtonProps[]
+    // 加载状态
+    loading?: Recordable,
+    // css样式
+    style?: Recordable
+}
+
+// 表单当个元素配置项
+export type FormSchema = {
+    // 表单绑定的属性，亦作为name属性，用于后期自动化测试
+    name: string | string[]
+    // 值发生变化触发的函数名
+    changeEvent?: string
+    // 绑定v-model的值
+    valueField?: string
+    // 标签名
+    label?: string | VNode
+    // 标签描述 如 这是标签(subLable): ***
+    subLabel?: string
+    // 标签宽度
+    labelWidth?: string | number
+    // 标签对齐方式
+    labelAlign?: 'left' | 'right'
+
+    // 帮助信息
+    toolTip?:
+        | string
+        | (( parms: FormCallBackParams ) => string | string[])
+    // tooltip 配置信息
+    toolTipProps?: ToolTipProps
+    // 表单控件类型
+    component: ComponentType
+    // 表单控件参数
+    props?: 
+        | ((opt: {
+            schema?: FormSchema
+            // tableAction: TableActionType
+            formActions?: any
+            formActionType?: FormActionType
+            formModel?: Recordable
+        }) => Recordable)
+        | object
+    required?: boolean | ( ( parms: FormCallBackParams ) => boolean )
+    // // 输入框的后缀
+    suffix?: string | number | ( ( parms: FormCallBackParams ) => boolean )
+    // 验证规则
+    rules?: Rule[]
+    // 提示信息是否带上lable
+    rulesMessageJoinLabel?: boolean
+
+    // 默认值
+    defaultValue?: any;
+
+    // 占用多少格子
+    span?: number
+
+    // 是否显示
+    show?: boolean | ( ( parms: FormCallBackParams ) => boolean )
+
+    // 渲染item
+    render?: (parms: FormCallBackParams) => VNode | VNode[] | string
+
+    // 渲染col
+    renderCol?: (parms: FormCallBackParams) => VNode | VNode[] | string
+
+    // col相关的配置
+    colProps?: Partial<ColEx>
+
+    // 表单的前后缀、禁用启用, 日期格式
+    renderComponent?: 
+        | ((parms: FormCallBackParams) => Recordable)
+        | VNode
+        | VNode[]
+        | string
+
+    slot?: string
+    colSlot?: string
+
+    dynamicDisabled?: boolean | ((parms: FormCallBackParams) => boolean)
+    dynamicRules?: (parms: FormCallBackParams) => Rule[]
+
+    // lable后面是否有冒号
+    colon?: boolean
+    
+    // 标签宽度
+    labelCol?: Partial<ColEx>  
+    // 内容宽度
+    wrapperCol?: Partial<ColEx>
+
+    // 是否处于收缩状态 仅在 search 模式下使用
+    isAdvanced?: boolean
+}
+
+
+// 表单操作类型
+export type FormActionType = {
+    setProps: ( props: FormProps ) => Promise<void>
+    updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>,
+    resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>,
+    clearValidate: (name?: string | string[]) => Promise<void>
+    resetForms: (data: Partial<FormSchema> | Partial<FormSchema>[]) => void,
+    removeFormByName: (name: string | string[]) => void,
+    setFormValues: (values: Recordable) => Promise<void>,
+    appendFormItems: (
+        schema: FormSchema,
+        prefixField: string | undefined,
+        first?: boolean | undefined,
+    ) => void,
+    validate: (nameList?: (string | number)[]) => Promise<any>,
+    validateFields: (nameList?: (string | number)[]) => Promise<any>,
+    getFormValues: () => Recordable,
+
+}
+
+// 按钮收缩相关的操作
+export type AdvanceState = {
+    isAdvanced: boolean
+    hideAdvanceBtn: boolean
+    isLoad: boolean
+    actionSpan: number
+  }
+  

package/src/components/icons/index.less

@@ -0,0 +1,96 @@
+@primary-color: #269ac1;
+@icon-pick-hover-color: #269ac1;
+
+.svg-icon {
+    fill: currentColor;
+    vertical-align: middle;
+}
+
+.dt-icon{
+    display: inline-block;
+    text-align: center;
+    & > svg{
+        vertical-align: middle;
+    }
+}
+
+.dt-pick-icon {
+    display: flex;
+    flex-direction: row;
+    height: 600px;
+
+    &__menus{
+        height: 100%;
+        overflow-y: auto;
+        width: 140px;
+        border-right: 1px solid #e7e7e7;
+        border-top: 1px solid #e7e7e7;
+        background: #fff;
+        .menu{
+            border-bottom: 1px solid #e7e7e7;
+            padding: 8px;
+            text-align: center;
+            cursor: pointer;
+            transform: all 0.25s;
+            p{
+                font-size: 14px;
+                line-height: 24x;
+                span{
+                    opacity: 0.7;
+                    font-size: 12px;
+                    padding-left: 6px;
+                }
+            }
+            &.active, &:hover{
+                background: @primary-color;
+                color: #fff;
+            }
+        }
+    }
+
+    &__content{
+        height: 100%;
+        overflow-y: auto;
+        flex: 1;
+        background: #fff;
+
+        .ant-input-search{
+            width: 50%;
+            margin: 0 25% 40px 25%;
+        }
+
+        &_item{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            padding: 20px;
+            a {
+                margin: 6px;
+                line-height: 22px;
+                height: 30px;
+                width: 30px;
+                text-align: center;
+                cursor: pointer;
+                padding: 4px;
+                transform: all 0.2s;
+                border: 1px solid #fff;
+                &:hover{
+                    border: 1px solid @primary-color;
+                    border-radius: 4px;
+                    color: @primary-color;
+                }
+            }
+        }
+
+        i{
+            font-size: 22px;
+        }
+    }
+}
+
+.dt-pick-icon-item{
+    .ant-tooltip-inner, .ant-tooltip-arrow-content {
+        background: #fff !important;
+        color: @icon-pick-hover-color ;
+    }
+}

package/src/components/icons/index.ts

@@ -0,0 +1,7 @@
+import DtIcon from './src/svg-icon.vue'
+import DtPickIcon from './src/pick-icon.vue'
+
+export { 
+    DtIcon,
+    DtPickIcon
+}

package/src/components/icons/src/pick-icon.vue

@@ -0,0 +1,117 @@
+<template>
+    <div :class="clsPrefix">
+        <div :class="`${clsPrefix}__menus`">
+            <div 
+                v-for="(menu, index) in iconMenus" 
+                :key="menu.type"
+                class="menu"
+                @click="activeIndex = index"
+                :class="{'active': activeIndex === index}"
+            >
+                <p>{{ menu.type }}<span>({{ menu.total }})</span></p>
+            </div>
+        </div>
+
+        <div :class="`${clsPrefix}__content`">
+            <keep-alive>
+                <div :class="`${clsPrefix}__content_item`">
+                    <InputSearch
+                        v-model:value="filter"
+                        enter-button
+                        placeholder="请输入过滤条件"
+                        @search="onFilter"
+                    ></InputSearch>
+
+                    <template v-for="icon in currentIcons" :key="icon">
+                        <a @click="selectIcon(icon)">
+                            <Tooltip 
+                                placement="bottom"
+                                overlayClassName="dt-pick-icon-item">
+                                <template #title>
+                                    {{ icon }}
+                                </template>
+                                <i class="i" :class="icon"></i>
+                            </Tooltip>
+                        </a>
+                    </template>
+                </div>
+            </keep-alive>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref, computed, unref, watch } from 'vue'
+    import { Tooltip, InputSearch } from 'ant-design-vue'
+    import { Icons } from '../../../assets/data/icons'
+
+    const emits = defineEmits(['chooseIcon'])
+
+    type IconMenu = {
+        type: string,
+        total: number
+    }
+
+    const clsPrefix = 'dt-pick-icon'
+    const activeIndex = ref(1)
+    const filter = ref(null)
+    const currentIcons = ref([])
+
+
+    const iconMenus = computed(() => {
+        let total: number = 0
+        let menus: IconMenu[] = []
+
+        Icons.forEach( it => {
+            let cLen = it.children?.length || 0
+            total += cLen
+
+            menus.push({
+                type: it.type,
+                total: cLen
+            })
+        } )
+
+        menus.unshift({
+            type: '所有',
+            total
+        })
+
+        return menus
+    })
+
+    function getIcons(): string[] {
+        
+        if( unref(activeIndex) ) {
+            currentIcons.value = Icons[activeIndex.value - 1].children
+        } else {
+            currentIcons.value = Icons.reduce( (icons, it) => {
+                icons = icons.concat( it.children )
+                return icons
+            }, [] )
+        }
+
+        return unref(currentIcons)
+    }
+
+    watch(
+        () => activeIndex.value,
+        v => {
+            getIcons()
+        },
+        {
+            immediate: true
+        }
+    )
+
+    // 过滤
+    function onFilter(e) {
+        currentIcons.value = getIcons().filter( it => it.indexOf(unref(filter)) !== -1 )
+    }
+
+    function selectIcon(icon) {
+        emits('chooseIcon', icon)
+    }
+   
+
+</script>

package/src/components/icons/src/svg-icon.vue

@@ -0,0 +1,117 @@
+<template>
+	<svg 
+		v-if="isSvgIcon"
+		:class="clsName" 
+		aria-hidden="true" 
+		:style="{ 
+			fontSize: size + 'px',
+			width: size + 'px',
+			height: size + 'px'
+		}">
+		<use :xlink:href="iconName" :fill="color" />
+	</svg>
+	
+	<i 
+		v-else
+		class="dt-icon i"
+		:style="{
+			color,
+			fontSize: size + 'px'
+		}"
+		:class="[iconName, clsName]"
+	></i>
+</template>
+
+<script lang="ts">
+	import { isArray, isFunction, isObject, isString, Recordable } from '@dt-frames/core';
+	import {computed, defineComponent, unref} from 'vue';
+
+
+	export default defineComponent({
+		props: {
+			iconClass: {
+				type: String,
+				required: true,
+			},
+			className: {
+				type: [String, Array],
+				default: '',
+			},
+			color: {
+				type: String,
+				default: '#555',
+			},
+			size: {
+				type: Number,
+				default: 18,
+			},
+		},
+		
+		setup(props) {
+			// 判断是否为svg图标
+			const isSvgIcon = computed(() => props.iconClass.indexOf(':') === -1)
+
+			// 图标名称
+			const iconName = computed(() => {
+				return unref(isSvgIcon) ? `#icon-${props.iconClass}` : `${props.iconClass}`
+			})
+
+
+			// 定义新的class名称
+			const clsName = computed(() => {
+				if( unref(isSvgIcon)) {
+					return `svg-icon ${ getCls( props.className ) }`
+				} else {
+					return `${ getCls( props.className ) }`
+				}
+			})
+
+
+			function getCls(className: String | Array<any>): String {
+				if( isString( className ) ) {
+					return className
+				}
+
+				if( isArray( className ) ) {
+					const arrClsToStr = ( cls ) => {
+						let classNames = []
+
+						cls
+							.forEach( it => {
+								if( isString( it ) ) {
+									classNames.push( it )
+								} else if( isObject( it )){
+									classNames.push(...objClsToStr( it ))
+								} else if( isFunction( it ) ) {
+									classNames.push( it() )
+								}
+							} )
+
+						return classNames
+					}
+
+					const objClsToStr = ( objCls: Recordable ) => {
+						let clsArr = []
+						for( let key in objCls ) {
+							if( objCls[ key ] ) clsArr.push( key )
+						}
+
+						return clsArr
+					}
+
+					return arrClsToStr( className )
+						.filter( Boolean )
+						.join(' ')
+				}
+
+				return ''
+			}
+
+			return {
+				isSvgIcon,
+				iconName,
+				clsName,
+			}
+		},
+	})
+</script>

package/src/components/iframe/index.less

@@ -0,0 +1,3 @@
+.iframe-page{
+    height: 100%;
+}

package/src/components/iframe/index.ts

@@ -0,0 +1,5 @@
+import DtIframe from './src/index.vue' 
+
+export {
+    DtIframe
+}

package/src/components/iframe/src/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="iframe-page">
+        <Spin :spinning="loading" size="large">
+            <iframe
+                :src="src"
+                class="iframe-page__main"
+                ref="frameRef"
+                @load="afterLoaded()"
+            ></iframe>
+        </Spin>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    import { Spin } from 'ant-design-vue'
+
+    const props = defineProps({
+        showLoading: {
+            type: Boolean,
+            default: true
+        },
+        src: {
+            type: String
+        },
+        postMsg: null
+    })
+
+    const loading = ref<boolean>(false)
+    const frameRef = ref()
+
+    function afterLoaded() {
+        loading.value = false
+
+        let iframeWin = frameRef.value.contentWindow
+        iframeWin.postMessage(props.postMsg, props.src)
+    }
+</script>

package/src/components/index.ts

@@ -0,0 +1,46 @@
+import { App } from 'vue';
+import { DtBaseRouter } from './router'
+import { DtIcon, DtPickIcon } from './icons'
+import { DtModal, useModal, useModalOut } from './modal'
+import { DtForm, useForm, FormButtons } from './forms'
+import { DtTable, useTable } from './table'
+import { useSource } from './source'
+import { useCurd } from './curd'
+import { export2Excel } from './excel'
+import { DtIframe } from './iframe'
+
+const dtComponents = [
+    { name: 'dt-base-router', component: DtBaseRouter },
+    { name: 'dt-icon', component: DtIcon },
+    { name: 'dt-pick-icon', component: DtPickIcon },
+    { name: 'dt-modal', component: DtModal },
+    { name: 'dt-form', component: DtForm },
+];
+
+
+// 初始化所有组件
+export function initComponents() {
+    return {
+        install(app: App) {
+            dtComponents.forEach( comp => app.component(comp.name, comp));
+        }
+    }
+}
+
+export {
+    DtBaseRouter,
+    DtIcon,
+    DtPickIcon,
+    DtModal,
+    DtForm,
+    DtTable,
+    FormButtons,
+    DtIframe,
+    useForm,
+    useTable,
+    useSource,
+    useCurd,
+    useModal,
+    useModalOut,
+    export2Excel
+}