@dt-frames/ui 1.0.0 → 1.0.1

package/src/components/forms/src/components/formButton.vue

@@ -1,150 +0,0 @@
-<template>
-    <Col v-bind="colOpt" v-if="show">
-        <FormItem class="form-btns" :style="{
-            'margin-bottom': mode === 'search' ? '24px' : '0px' 
-        }">
-            <template v-for="button in buttonList">
-                <Button 
-                    v-if="button.show === undefined ? true : button.show"
-                    :type="button.type"
-                    :class="button.class"
-                    :disabled="button.disabled"
-                    :permission="button.auth"
-                    :loading="button.loading"
-                    @click="handleBtnClick(button)"
-                >
-                    <template #icon>
-                        <span v-if="button.preIcon" v-icon="button.preIcon" className="preIcon"></span>
-                    </template>
-
-                    {{ button.name }}
-                    <span v-if="button.postIcon" v-icon="button.postIcon" className="preIcon"></span>
-                </Button>
-            </template>
-            
-            <Button
-                type="link"
-                class="advanced"
-                v-if="showAdvanceRef"
-                @click="toggleAdvanced">
-                <span class="text">{{ advancedRef ? '收起' : '展开' }}</span>
-                <span :class="getAdvanceClass">
-                    <DtIcon :icon-class="'ic:baseline-arrow-drop-down'" :size="22"></DtIcon>
-                </span>
-            </Button>
-            
-        </FormItem>
-    </Col>
-</template>
-
-<script lang="ts">
-    import { computed, defineComponent, PropType, ref, watch, nextTick } from 'vue'
-    import { ButtonProps } from '../types/form.type'
-    import { Col, FormItem, Button } from 'ant-design-vue'
-    import { authMounted } from '../../../../directives'
-    import { DtIcon } from '../../../icons'
-    import { isFunction, Recordable } from '@dt-frames/core'
-
-
-    export default defineComponent({
-        name: 'form-buttons',
-        props: {
-            mode: {
-                type: String as PropType<'search' | 'dialog' | null>,
-                default: 'search'
-            },
-            show: {
-                type: Boolean,
-                default: true
-            },
-            showAdvancedButton: {
-                type: Boolean,
-                default: true
-            },
-            minShowColumn: {
-                type: Number,
-                default: 2
-            },
-            buttonList: {
-                type: [Array] as PropType<ButtonProps[]>,
-                default: []
-            },
-            isAdvanced: {
-                type: Boolean,
-                default: true
-            }
-        },
-        components: {
-            Col,
-            FormItem,
-            Button,
-            DtIcon
-        },
-        directives: {
-            'permission': authMounted
-        },
-        setup(props, { emit }) {
-            const advancedRef = ref<Boolean>(props.isAdvanced)
-
-            // 是否显示折叠按钮
-            const showAdvanceRef = computed(() => {
-                return props.mode === 'search' ? props.showAdvancedButton : false
-            })
-
-            // 计算options属性
-            const colOpt = computed(() => {
-                let style: Recordable = {
-                    textAlign: 'right'
-                }
-
-                if( props.mode === 'dialog' ) {
-                    Object.assign(style, {
-                        display: 'inline-block',
-                    })
-                }
-
-                return { style }
-            })
-
-            // 计算更多图标的css样式
-            const getAdvanceClass = computed(() => {
-                return [
-                    'basic-arrow',
-                    { 'basic-arrow--active': !advancedRef.value }
-                ]
-            })
-
-            const toggleAdvanced = () => {
-                advancedRef.value = !advancedRef.value
-
-                emit('handle-method', advancedRef.value)
-            }
-
-            watch(() => props.isAdvanced, (v) => {
-                if( v ) {
-                    nextTick(() => toggleAdvanced())
-                }
-            }, {
-                immediate: true
-            })
-
-            // 处理按钮点击事件
-            function handleBtnClick(button: ButtonProps) {
-                if( button.onClick && isFunction(button.onClick) ) {
-                    button.onClick()
-                }else {
-                    emit('handle-method', button)
-                }
-            }
-
-            return {
-                colOpt,
-                advancedRef,
-                showAdvanceRef,
-                getAdvanceClass,
-                toggleAdvanced,
-                handleBtnClick
-            }
-        }
-    })
-</script>

package/src/components/forms/src/components/formIcon.vue

@@ -1,50 +0,0 @@
-<template>
-    <div>
-        <InputGroup compact>
-            <Input ref="iconRef" v-model:value="state" :placeholder="props.placeholder" style="width: calc(100% - 32px)" />
-            <Button @click="openModal()" :style="{
-                padding: '0',
-                textAlign: 'center'
-            }">
-                <template #icon>
-                    <span class="i" :class="state || 'ic:baseline-dialpad'"></span>
-                </template>
-            </Button>
-        </InputGroup>
-
-        <DtModal @register="register">
-            <DtPickIcon @chooseIcon="chooseIcon($event)"/>
-        </DtModal>
-    </div>
-    
-</template>
-
-<script lang="ts" setup>
-    import { ref } from 'vue'
-    import { InputGroup, Input, Button } from 'ant-design-vue'
-    import { DtPickIcon } from '../../../icons'
-    import { DtModal, useModal } from '../../../modal'
-    import { useFormValue } from '../hooks/useFormValue'
-
-    const iconRef = ref(null)
-    const [register, { openModal, closeModal }] = useModal({
-        title: '选择字体图标',
-        width: '70%',
-        showSave: false,
-        centered: true
-    })
-
-    const props = defineProps({
-        value: String,
-        placeholder: String
-    })
-
-    let [state, setState] = useFormValue(props)
-
-    function chooseIcon(icon) {
-        setState(icon)
-
-        closeModal()
-    }
-
-</script>

package/src/components/forms/src/components/formItem.vue

@@ -1,407 +0,0 @@
-<script lang="tsx">
-    import { defineComponent, PropType, Ref, toRefs, unref, computed } from "vue"
-    import { Col, Tooltip, Divider, Form, FormItem } from 'ant-design-vue'
-    import { upperFirst, cloneDeep } from 'lodash-es'
-    import { isFunction, isBoolean, isNull, Recordable, useSlots, useAppStore, isString, isArray } from "@dt-frames/core"
-    import type { ValidationRule } from 'ant-design-vue/lib/form/Form'
-
-    import { useLabelWidth } from "../hooks/useLabelWidth"
-    import { componentMap } from '../componentMap'
-    import { createPlaceholder, setComponentRuleType } from '../hooks/helper'
-    import { FormSchema, FormProps, FormCallBackParams, FormActionType } from '../types/form.type'
-    import { FormItemProps } from "../prop"
-
-
-    export default defineComponent({
-        name: 'FormItem',
-        inheritAttrs: false,
-        props: FormItemProps,
-        setup( props, { emit, slots } ) {
-            // 获取指定的slot
-            const { getSlot } = useSlots()
-            // 获取全局配置
-            const { appConf } = useAppStore()
-
-            const { schema, formProps } = toRefs(props) as {
-                schema: Ref<FormSchema>
-                formProps: Ref<FormProps>
-            }
-
-            // 计算每个条目的props
-            const getValues = computed(() => {
-                const { defaultValues, formModel, schema } = props;
-
-                return {
-                    name: schema.name,
-                    model: formModel,
-                    values: {
-                        ...defaultValues,
-                        ...formModel
-                    },
-                    schema: schema
-                } as FormCallBackParams
-            })
-
-            // 是否显示当前条目
-            const getShow = computed(() => {
-                const { show = true, isAdvanced = true } = props.schema
-
-                // 是否处于收缩状态
-                if( !isAdvanced ) {
-                    return false
-                }
-
-                if( isFunction(show) ) {
-                    return show(unref(getValues))
-                }
-
-                return show
-            })
-
-            // 设置表单绑定的特殊属性，如前后缀、禁用启用、日期格式等
-            const getComponentProps = computed(() => {
-                const { schema, formModel, formActionType } = props
-                let { props: cProps = {} } = schema
-
-                if (isFunction(cProps)) {
-                    cProps = cProps( { schema, formModel, formActionType } ) ?? {}
-                }
-
-                if (schema.component === 'Divider') {
-                    cProps = Object.assign({ type: 'horizontal' }, cProps, {
-                        orientation: 'left',
-                        plain: true,
-                    });
-                }
-
-                return cProps as Recordable
-            })
-
-
-            /**
-             * 动态渲染单个条目
-             * 支持的类型参照 ../types/form.type.ts 中 ComponentType
-             */
-            function renderItem() {
-                const { component, props: cProps, slot, render, name, colon = appConf.ui.form.colon, suffix } = props.schema
-
-                // 计算label的属性
-                const { labelCol, wrapperCol } = unref( useLabelWidth( schema, formProps ) )
-
-                if( component === 'Divider' ) {
-                    return (
-                        <Col span={24}>
-                            <Divider {...unref(cProps)}>{ renderLabel() }</Divider>
-                        </Col>
-                    )
-                } else {
-                    const getContent = () => {
-                        let value = unref(getValues)
-
-                        let _con = slot 
-                            ? getSlot(slots, slot, value)
-                            : render
-                            ? render(value)
-                            : renderFormItem()
-
-                        return (component === 'InputGroup' || component === 'Icon')
-                            ? (
-                                <FormItem rules = { handleRules() } class="M0">{ _con }</FormItem>
-                            )
-                            : _con
-                    }
-                    
-                    const getSuffix = () => {
-                        return isFunction( suffix ) ? suffix(unref(getValues)) : suffix 
-                    }
-
-                    return (
-                        <Form.Item
-                            name = { name }
-                            colon = { colon }
-                            class = {{ 'suffix-item': !!suffix }}
-                            label = { renderLabel() }
-                            rules = { handleRules() }
-                            labelCol = { labelCol }
-                            wrapperCol = { wrapperCol }
-                        >
-                            <div style="display:flex">
-                                <div style="flex:1;">{ getContent() }</div>
-                                {!!suffix && <span class="suffix">{getSuffix()}</span>}
-                            </div>
-                        </Form.Item>
-                    )
-                }
-            }
-
-
-            /**
-             * 渲染Label标签元素
-            */
-            function renderLabel() {
-                const { label, toolTip, subLabel, toolTipProps } = props.schema
-
-                const renderLabel 
-                    = subLabel 
-                    ? ( <span> {label} <span class="text-secondary">({subLabel})</span></span> )
-                    : ( label )
-
-                // 判断是否需要显示tooltips
-                const _toolTip = isFunction(toolTip) ? toolTip( unref(getValues) ) : toolTip
-
-                return _toolTip 
-                    ? (
-                        <span>
-                            { renderLabel }
-                            <Tooltip v-bind={ toolTipProps }>{ _toolTip }</Tooltip>
-                        </span>
-                    )
-                    : renderLabel
-            }
-
-            /**
-             * 渲染表单元素
-            */
-            function renderFormItem() {
-                const { schema, formModel, formActionType } = props
-                const { component, name, changeEvent = 'change', valueField, renderComponent, props: sProps  } = props.schema
-
-                const isCheck = component && ['Switch', 'Checkbox'].includes(component)
-
-                /**
-                 * 监听表单事件，默认是change
-                 */
-                const eventKey = `on${upperFirst(changeEvent)}`
-                // 绑定事件
-                const _sProps = isFunction( sProps ) 
-                    ? sProps({ schema, formModel, formActionType }) 
-                    : sProps
-
-                // 绑定onChange事件
-                const on: { 
-                    [key: string]: ( ...args: Array<any> ) => void 
-                } = {
-                    [ eventKey ]: ( ...args: Array<any> ) => {
-                        const [e] = args
-
-                        const target = e ? e.target : null
-                        const value = target ? (isCheck ? target.checked : target.value) : e
-
-                        if( isString( name ) ) {
-                            props.setFormModel(name, value)
-                        } else if( isArray( name ) ) {
-                            name.forEach( key => {
-                                props.setFormModel(key, value)
-                            } )
-                        }
-
-                        if( _sProps && _sProps[eventKey] ) _sProps[eventKey](...args, props)
-                    }
-                }
-                
-                // 监听其它事件
-                for(let it in _sProps) {
-                    if( it.startsWith('on') && it !== eventKey ) {
-                        on[it] = ( ...args: Array<any> ) => {
-                            _sProps[it]( ...args, props )
-                        }
-                    }
-                }
-
-                /**
-                 * 设置表单绑定的属性
-                 */
-                const { size } = props.formProps as FormProps
-
-                // 设置表单禁用启用
-                const getDisable = computed(() => {
-                    const { disabled: gDisabled } = props.formProps as FormProps
-                    const { dynamicDisabled } = props.schema
-                    const { disabled: itemDisabled = false } = unref( getComponentProps )
-
-                    let disabled = !!gDisabled || itemDisabled
-
-                    if (isBoolean(dynamicDisabled)) disabled = dynamicDisabled
-                    if (isFunction(dynamicDisabled)) disabled = dynamicDisabled(unref(getValues))
-
-                    return disabled
-                })
-                
-                const { enterToSearch = appConf.ui.form.enterToSearch, onSearch, mode } = props.formProps as FormProps
-
-                const itemProps: Recordable = {
-                    allowClear: appConf.ui.form.allowClear,
-                    getPopupContainer: (trigger: Element) => trigger.parentNode,
-                    size: size || appConf.ui.form.size,
-                    ...unref(getComponentProps),
-                    disabled: unref(getDisable),
-                    onPressEnter: (mode === 'search' &&  enterToSearch) ? onSearch : () => { }
-                }
-
-                // 设置表单占位符,注意：RangePicker是一个数组
-                if( !itemProps.disabled && component !== 'RangePicker' ) {
-                    itemProps.placeholder = unref(getComponentProps)?.placeholder || createPlaceholder( component )
-                }
-
-                // 处理默认值
-                if( ['DatePicker', 'MonthPicker', 'RangePicker'].includes(component) ) { 
-                    itemProps.defaultValue = props.formModel[ name as string ]
-                }
-
-                itemProps.codeName = name
-                itemProps.formValues = unref(getValues)
-
-                /**
-                 * 定义表单绑定的值v-bind:value
-                */
-                const bindValue: Recordable = {
-                    [valueField || (isCheck ? 'checked' : 'value')]: props.formModel[ name as string ]
-                }
-                
-                /**
-                 * 所有属性汇总，包括方法、属性及值的绑定
-                */
-                const compAttr: Recordable = {
-                    ...itemProps,
-                    ...bindValue,
-                    ...on
-                }
-
-                // 设置返回的DOM元素
-                const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>
-
-                if( !renderComponent ) {
-                    return <Comp {...compAttr} />
-                }
-
-                // 定义一个组件插槽，用于处理后缀、前缀等问题,返回的是{ default: () => {} )这种数据格式
-                const compSlot = isFunction( renderComponent ) 
-                    ? { ...renderComponent( unref( getValues ) ) }
-                    : {
-                        default: () => renderComponent
-                    }
-
-                return <Comp {...compAttr}>{compSlot}</Comp>
-            }
-
-            /**
-             * 处理验证规则
-             */ 
-            function handleRules(): ValidationRule[] {
-                const { rules: defaultRules = [], component, label, dynamicRules, required } = props.schema
-
-                // 1、如果为动态规则，则直接返回rules
-                if( isFunction( dynamicRules ) ) {
-                    return dynamicRules( unref(getValues) ) as ValidationRule[]
-                }
-
-
-                // 2、如果没有静态规则，并且require为true
-                // 默认提示信息
-                const defaultMsg = createPlaceholder(component) + label
-
-                let rules = cloneDeep(defaultRules) as ValidationRule[]
-                // 是否必填
-                const getRequired = isFunction(required) ? required(unref(getValues)) : required
-
-                // 非空校验
-                function validator(rule: any, value: any) {
-                    const msg = rule.message || defaultMsg
-
-                    if( 
-                        // 空值
-                        (value === undefined || isNull(value)) ||
-                        // 数组
-                        (Array.isArray(value) && value.length === 0) ||
-                        // 空字符串
-                        (typeof value === 'string' && value.trim() === '') ||
-                        // 树组件未选择
-                        (
-                            typeof value === 'object' && 
-                            Reflect.has(value, 'checked') &&
-                            Reflect.has(value, 'halfChecked') &&
-                            Array.isArray(value.checked) &&
-                            Array.isArray(value.halfChecked) &&
-                            value.checked.length === 0 &&
-                            value.halfChecked.length === 0
-                        )
-                    ) {
-                        return Promise.reject(msg)
-                    }
-
-                    return Promise.resolve()
-                }
-
-                if( (!rules || !rules.length) && getRequired ) {
-                    rules = [{ required: getRequired, validator }]
-                }
-
-                // 3、如果有自定义的规则，则使用自定义的规则
-                const requiredIndex = rules.findIndex( rule => Reflect.has(rule, 'required') && !Reflect.has(rule, 'validator') )
-
-                if( requiredIndex !== -1 ) {
-                    const rule = rules[requiredIndex]
-
-                    if( !unref(getShow) ) {
-                        rule.required = false
-                    }
-
-                    if (!Reflect.has(rule, 'type')) {
-                        rule.type = component === 'InputNumber' ? 'number' : 'string';
-                    }
-
-                    rule.message = rule.message || defaultMsg
-
-                    if (component.includes('Input') || component.includes('Textarea')) {
-                        rule.whitespace = true
-                    }
-                    const valueFormat = unref(getComponentProps)?.valueFormat;
-
-                    setComponentRuleType(rule, component, valueFormat)
-                }
-                
-                const maxIndex = rules.findIndex((val) => val.max)
-
-                if (maxIndex !== -1 && !rules[maxIndex].validator) {
-                    rules[maxIndex].message = rules[maxIndex].message || `最大值为${ rules[maxIndex].max }`
-                }
-
-                return rules
-            }
-     
-
-            /**
-             *  返回整个Col元素
-             *      1、如果有slot  则渲染slot元素
-             *      2、如果有renderCol自定义dom元素，则使用renderCol
-             *      3、否则通过属性去动态设置渲染条目
-             */
-            return () => {
-                const { colSlot, renderCol, colProps } = props.schema
-                const { colProps: gColProps, mode } = props.formProps as FormProps
-
-                let _colProps = colProps 
-                    ? colProps
-                    : gColProps
-                    ? gColProps
-                    : (mode === 'search' ? appConf.ui.form.searchColspan : appConf.ui.form.dialogColspan)
-
-                const values = unref(getValues)
-
-                const getContent = () => {
-                    return colSlot
-                        ? getSlot(slots, colSlot, values)
-                        : renderCol
-                        ? renderCol( values )
-                        : renderItem()
-                }
-
-                return unref(getShow) && (
-                    <Col { ..._colProps }>
-                        { getContent() }
-                    </Col>
-                )
-            }
-        }
-    })
-</script>

package/src/components/forms/src/components/radioButton.vue

@@ -1,58 +0,0 @@
-
-
-<template>
-    <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
-        <template v-for="item in getOptions" :key="`${item.value}`">
-            <RadioButton :value="item.value" :disabled="item.disabled">
-                {{ item.label }}
-            </RadioButton>
-        </template>
-    </RadioGroup>
-</template>
-
-<script lang="ts">
-    import { computed, defineComponent, PropType } from "vue"
-    import { RadioGroup, RadioButton } from 'ant-design-vue'
-    import { isString } from "@dt-frames/core"
-    import { useFormValue } from "../hooks/useFormValue";
-
-    type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean }
-    type RadioItem = string | OptionsItem
-
-    export default defineComponent({
-        name: 'radio-button',
-        props: {
-            value: {
-                type: [String, Number, Boolean] as PropType<string | number | boolean>,
-            },
-            options: {
-                type: Array as PropType<RadioItem[]>,
-                default: () => [],
-            },
-        },
-        components: {
-            RadioGroup, 
-            RadioButton
-        },
-        setup(props, { attrs }) {
-            const [state] = useFormValue(props)
-
-            const getOptions = computed((): OptionsItem[] => {
-                const { options } = props;
-                if (!options || options?.length === 0) return [];
-
-                const isStringArr = options.some((item) => isString(item));
-                if (!isStringArr) return options as OptionsItem[];
-
-                return options.map((item) => ({ label: item, value: item })) as OptionsItem[];
-            });
-
-
-            return {
-                attrs,
-                getOptions,
-                state
-            }
-        }
-    })
-</script>

package/src/components/forms/src/const/form.const.ts

@@ -1,7 +0,0 @@
-export const SEARCH_BTN_NAME = '查询'
-export const RESET_BTN_NAME = '重置'
-
-export const SEARCH_BTNS = [
-    { name: SEARCH_BTN_NAME, preIcon: 'mdi:magnify', type: 'primary' },
-    { name: RESET_BTN_NAME, preIcon: 'mdi:refresh', type: 'default' }
-]