@dt-frames/ui 1.0.12 → 1.0.16

package/src/components/forms/index.ts

@@ -1,11 +0,0 @@
-import DtForm from './src/index.vue'
-import { useForm } from './src/hooks/useForm'
-import FormButtons from './src/components/formButton.vue'
-
-export * from './src/types/form.type'
-
-export {
-    FormButtons,
-    DtForm,
-    useForm
-}

package/src/components/forms/src/componentMap.ts

@@ -1,46 +0,0 @@
-// 根据组件类型 定义一个组件map 方便使用
-import { Component } from "vue"
-import { Input, Select, Radio, Checkbox, AutoComplete, Cascader, DatePicker, InputNumber, Switch, TimePicker, TreeSelect, Slider, Rate, Divider } from 'ant-design-vue'
-import RadioButtonGroup from './components/radioButton.vue'
-import FormIcon from './components/formIcon.vue'
-import formInputUseDialog from './components/formInputUseDialog.vue'
-import { ComponentType } from "./types/form.type"
-
-const components = {
-    Input,
-    InputWithDialog: formInputUseDialog,
-    InputTextArea: Input.TextArea,
-    InputSearch: Input.Search,
-    InputGroup: Input.Group,
-    InputPassword: Input.Password,
-    Select,
-    TreeSelect,
-    Radio,
-    RadioGroup: Radio.Group,
-    RadioButtonGroup,
-    Checkbox,
-    CheckboxGroup: Checkbox.Group,
-    AutoComplete,
-    Cascader,
-    DatePicker,
-    MonthPicker: DatePicker.MonthPicker,
-    WeekPicker: DatePicker.WeekPicker,
-    RangePicker: DatePicker.RangePicker,
-    InputNumber,
-    Switch,
-    TimePicker,
-    Slider,
-    Rate,
-    Divider,
-    Icon: FormIcon
-}
-
-const componentMap = new Map<ComponentType, Component>()
-
-for( let item in components ) {
-    componentMap.set( item as ComponentType, components[item] )
-}
-
-export {
-    componentMap
-}

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,51 +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,
-        wrapClassName: 'dt-icon-dialog',
-    })
-
-    const props = defineProps({
-        value: String,
-        placeholder: String
-    })
-
-    let [state, setState] = useFormValue(props)
-
-    function chooseIcon(icon) {
-        setState(icon)
-
-        closeModal(icon)
-    }
-
-</script>

package/src/components/forms/src/components/formInputUseDialog.vue

@@ -1,43 +0,0 @@
-<template>
-    <div class="input-with-dialog">
-        <div @click="onClickInput">
-            <Input v-bind="bindProps"></Input>
-        </div>
-        <i class="i mdi:close-circle" @click="clearProps"></i>
-    </div>
-</template>
-
-<script lang="ts" setup>
-    import { computed, useAttrs } from 'vue'
-    import { Input } from 'ant-design-vue'
-    import { omit } from 'lodash-es'
-    import { error, isFunction } from '@dt-frames/core'
-
-    const attrs = useAttrs()
-
-    const bindProps = computed(() => {
-        return {
-            ...omit(attrs, [
-                'formValues'
-            ]),
-            disabled: true
-        }
-    })
-
-    function onClickInput() {
-        const { model, schema = { } } = attrs.formValues as any
-
-        if( !schema.openDialog || !isFunction(schema.openDialog) ) {
-            error('openDialog必须是函数')
-            return 
-        }
-
-        schema.openDialog( model )
-    }
-
-    function clearProps() {
-        const { model, schema = { } } = attrs.formValues as any
-        [...schema.linkProps, schema.name].forEach( it => model[it] = null )
-    }
-    
-</script>