@dt-frames/ui 1.0.11 → 1.0.15

package/src/components/forms/index.less

@@ -1,84 +0,0 @@
-@import '../modal/index.less';
-
-.text-secondary{
-    color: #666;
-}
-
-.suffix-item .suffix {
-    display: inline-flex;
-    padding-left: 6px;
-    margin-top: 1px;
-    line-height: 1;
-    align-items: center;
-}
-
-.form-btns{
-    button{
-        margin-left: 12px;
-    }
-
-    .advanced{
-        margin-left: 8px;
-        .text{
-            margin-right: 5px;
-        }
-        .basic-arrow{
-            margin-left: -8px;
-        }
-    }
-}
-
-.basic-arrow{
-    display: inline-block;
-    cursor: pointer;
-    transform: rotate(0deg);
-    transition: all 0.3s ease 0.1s;
-    transform-origin: center center;
-
-    
-    .dt-icon{
-        vertical-align: middle;
-        color: @primary-color !important;
-    }
-
-    &--active{
-        transform: rotate(180deg);
-    }
-}
-
-.form-btns{
-    .ant-form-item-control-input-content{
-        display: flex;
-        .ant-btn{
-            display: flex;
-            align-items: center;
-        }
-        .ant-btn .dt-icon{
-            font-size: 20px;
-            height: 100%;
-
-            svg{
-                display: block;
-                height: 100%;
-                text-align: center;
-            }
-
-            .preIcon{
-                padding-right: 2px;
-            }
-        }
-
-        .ant-btn-primary .dt-icon svg{
-            color: #fff;
-        }
-    }
-}
-
-.basic-form--compact{
-    .ant-form-item {
-        margin-bottom: 14px !important;
-    }
-}
-
-
-

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,44 +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 { ComponentType } from "./types/form.type"
-
-const components = {
-    Input,
-    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>