@dt-frames/ui 1.0.2 → 1.0.5

package/src/components/forms/index.less

@@ -0,0 +1,84 @@
+@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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,44 @@
+// 根据组件类型 定义一个组件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

@@ -0,0 +1,150 @@
+<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

@@ -0,0 +1,50 @@
+<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>