@kengic/vue 0.30.1-beta.96 → 0.31.1

package/component/KgModal/KgModal.tsx

@@ -1,207 +0,0 @@
-import { Modal } from 'ant-design-vue';
-import { computed, defineComponent, ExtractPropTypes, PropType, ref, unref } from 'vue';
-import { useKg } from '../../config';
-import { modalProps } from '../../util/ant-design-vue';
-import { renderSlot, renderSlotList } from '../../util/tsx.helper';
-import { useDragToMove, useDragToResize } from './KgModal.service';
-import KgModalHeaderButtons from './KgModalHeaderButtons';
-import './KgModal.css';
-
-export const getProps = () => ({
-    ...modalProps(),
-
-    /**
-     * 高度是否撑满屏幕.
-     *
-     * @default true
-     */
-    kgFullHeight: { type: Boolean as PropType<boolean>, default: true },
-
-    /**
-     * 是否默认全屏.
-     *
-     * @default false
-     */
-    kgIsDefaultFullscreen: { type: Boolean as PropType<boolean>, default: false },
-
-    /**
-     * 是否可以拖拽改变位置.
-     *
-     * @default true
-     */
-    kgIsDragToMove: { type: Boolean as PropType<boolean>, default: true },
-
-    /**
-     * 是否可以拖拽改变大小.
-     *
-     * @default true
-     */
-    kgIsDragToResize: { type: Boolean as PropType<boolean>, default: true },
-
-    /**
-     * 是否显示全屏按钮.
-     *
-     * @default true
-     */
-    kgIsShowFullscreenButton: { type: Boolean as PropType<boolean>, default: true },
-
-    /**
-     * 最大高度.
-     */
-    kgMaxHeight: { type: Number as PropType<number>, default: undefined },
-
-    /**
-     * 最大宽度.
-     */
-    kgMaxWidth: { type: Number as PropType<number>, default: undefined },
-
-    /**
-     * 最小高度.
-     */
-    kgMinHeight: { type: Number as PropType<number>, default: undefined },
-
-    /**
-     * 最小宽度.
-     */
-    kgMinWidth: { type: Number as PropType<number>, default: undefined },
-
-    /**
-     * 是否显示取消按钮.
-     *
-     * @default true
-     */
-    kgShowCancelButton: { type: Boolean as PropType<boolean>, default: true },
-
-    /**
-     * 是否显示确定按钮.
-     *
-     * @default true
-     */
-    kgShowOkButton: { type: Boolean as PropType<boolean>, default: true },
-});
-
-export type KgModalProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
-
-// 弹窗
-export default defineComponent({
-    inheritAttrs: false,
-    name: 'KgModal',
-    props: getProps(),
-    setup(props, { slots, attrs }) {
-        const kg = useKg();
-
-        //region DATA
-        //----------------------------------------------------------------------------------------------------
-        /**
-         * 页面上专门添加了一个特殊的元素, 通过它可以获取其他元素对象.
-         */
-        const domRef = ref<HTMLDivElement | null>(null);
-
-        const props$$ = computed(() => {
-            const _props = { ...unref(attrs), ...props };
-
-            _props.closable = true;
-            _props.wrapClassName = _props.wrapClassName ? `${_props.wrapClassName} kg-modal` : 'kg-modal';
-            _props.centered = _props.centered !== undefined ? _props.centered : true;
-            _props.destroyOnClose = _props.destroyOnClose !== undefined ? _props.destroyOnClose : true;
-            _props.keyboard = _props.keyboard !== undefined ? _props.keyboard : false;
-            _props.maskClosable = _props.maskClosable !== undefined ? _props.maskClosable : false;
-            _props.okButtonProps = _props.okButtonProps !== undefined ? _props.okButtonProps : {};
-            _props.cancelButtonProps = _props.cancelButtonProps !== undefined ? _props.cancelButtonProps : {};
-
-            // 通过设置样式, 隐藏确定按钮
-            if (!props.kgShowOkButton) {
-                // @ts-ignore
-                _props.okButtonProps.class = 'kg-invisible';
-            }
-
-            // 通过设置样式, 隐藏取消按钮
-            if (!props.kgShowCancelButton) {
-                // @ts-ignore
-                _props.cancelButtonProps.class = 'kg-invisible';
-            }
-
-            if (props.kgFullHeight) {
-                _props.wrapClassName += ' kg-modal--full-height';
-            }
-
-            return _props;
-        });
-        const visible$$ = computed(() => !!props$$.value.visible);
-        const isDragToMove$$ = computed(() => props$$.value.kgIsDragToMove);
-        //endregion
-
-        useDragToMove({ domRef: domRef, getKgIsDragToMove: isDragToMove$$, getVisible: visible$$ });
-        const { onMouseDown } = useDragToResize({ domRef: domRef, getProps: props$$ });
-
-        return () => (
-            <Modal {...props$$.value}>
-                {{
-                    ...renderSlotList({ slotRecord: slots, excludeSlotList: ['default', 'closeIcon'] }),
-                    default: () => (
-                        <>
-                            {renderSlot({ slotRecord: slots, name: 'default' })}
-
-                            <div ref={domRef} />
-
-                            {kg.option?.KgModal?.dragToResize?.isOn === true && props.kgIsDragToResize && (
-                                <>
-                                    <div
-                                        class="resize-handle resize-handle-top-left"
-                                        onMousedown={(event) => onMouseDown?.({ event: event, handleType: 'top-left' })}
-                                    />
-
-                                    <div
-                                        class="resize-handle resize-handle-top"
-                                        onMousedown={(event) => onMouseDown?.({ event: event, handleType: 'top' })}
-                                    />
-
-                                    <div
-                                        class="resize-handle resize-handle-top-right"
-                                        onMousedown={(event) => onMouseDown?.({ event: event, handleType: 'top-right' })}
-                                    />
-
-                                    <div
-                                        class="resize-handle resize-handle-right"
-                                        onMousedown={(event) => onMouseDown?.({ event: event, handleType: 'right' })}
-                                    />
-
-                                    <div
-                                        class="resize-handle resize-handle-bottom-right"
-                                        onMousedown={(event) => onMouseDown?.({ event: event, handleType: 'bottom-right' })}
-                                    />
-
-                                    <div
-                                        class="resize-handle resize-handle-bottom"
-                                        onMousedown={(event) => onMouseDown?.({ event: event, handleType: 'bottom' })}
-                                    />
-
-                                    <div
-                                        class="resize-handle resize-handle-bottom-left"
-                                        onMousedown={(event) => onMouseDown?.({ event: event, handleType: 'bottom-left' })}
-                                    />
-
-                                    <div
-                                        class="resize-handle resize-handle-left"
-                                        onMousedown={(event) => onMouseDown?.({ event: event, handleType: 'left' })}
-                                    />
-                                </>
-                            )}
-                        </>
-                    ),
-                    closeIcon: () => (
-                        <KgModalHeaderButtons
-                            kgIsDefaultFullscreen={props.kgIsDefaultFullscreen}
-                            kgIsShowFullscreenButton={props.kgIsShowFullscreenButton}
-                            kgIsShowCloseButton={props.closable}
-                        >
-                            {{
-                                kgModalHeaderButtonsExtra: () => renderSlot({ slotRecord: slots, name: 'kgModalHeaderButtonsExtra' }),
-                            }}
-                        </KgModalHeaderButtons>
-                    ),
-                }}
-            </Modal>
-        );
-    },
-});

package/component/KgModal/KgModalHeaderButtons.tsx

@@ -1,130 +0,0 @@
-import { Icon } from '@iconify/vue';
-import { Button } from 'ant-design-vue';
-import { get } from 'lodash-es';
-import { defineComponent, nextTick, onBeforeMount, PropType, ref, watch } from 'vue';
-import { renderSlot } from '../../util/tsx.helper';
-
-export const getProps = () => ({
-    /**
-     * 是否默认全屏.
-     *
-     * @default false
-     */
-    kgIsDefaultFullscreen: { type: Boolean as PropType<boolean>, default: false },
-
-    /**
-     * 是否显示关闭按钮.
-     *
-     * @default true
-     */
-    kgIsShowCloseButton: { type: Boolean as PropType<boolean>, default: true },
-
-    /**
-     * 是否显示全屏按钮.
-     *
-     * @default true
-     */
-    kgIsShowFullscreenButton: { type: Boolean as PropType<boolean>, default: true },
-});
-
-// 弹窗:顶部右侧按钮
-export default defineComponent({
-    name: 'KgModalHeaderButtons',
-    inheritAttrs: false,
-    props: getProps(),
-    setup(props, { slots, emit, attrs }) {
-        //region DATA
-        //----------------------------------------------------------------------------------------------------
-        /**
-         * 当前是否全屏.
-         */
-        const isFullscreen = ref<boolean>(false);
-        const fullscreenButtonRef = ref<typeof Button | null>(null);
-        //endregion
-
-        //region WATCH
-        //----------------------------------------------------------------------------------------------------
-        watch(
-            () => props.kgIsDefaultFullscreen,
-            (value) => {
-                if ((value && !isFullscreen.value) || (!value && isFullscreen.value)) {
-                    toggleFullscreen();
-                }
-            },
-            { immediate: true },
-        );
-        //endregion
-
-        //region FUNCTION
-        //----------------------------------------------------------------------------------------------------
-        /**
-         * 进入/退出全屏.
-         */
-        function toggleFullscreen(event?: MouseEvent) {
-            event?.preventDefault();
-            event?.stopPropagation();
-
-            isFullscreen.value = !isFullscreen.value;
-
-            const modalWrapElement = get(fullscreenButtonRef.value, '$el.parentElement.parentElement.parentElement.parentElement.parentElement');
-            if (modalWrapElement) {
-                modalWrapElement.classList.toggle('kg-modal--fullscreen');
-            }
-        }
-
-        /**
-         * 渲染全屏按钮.
-         */
-        function renderFullscreenButton() {
-            if (!props.kgIsShowFullscreenButton) {
-                return null;
-            }
-
-            return (
-                <Button
-                    ref={fullscreenButtonRef}
-                    class={'kg-modal--header--buttons--fullscreen'}
-                    onClick={toggleFullscreen}
-                >
-                    {isFullscreen.value ? <Icon icon="ant-design:fullscreen-exit-outlined" /> : <Icon icon="ant-design:fullscreen-outlined" />}
-                </Button>
-            );
-        }
-
-        /**
-         * 渲染关闭按钮.
-         */
-        function renderCloseButton() {
-            if (!props.kgIsShowCloseButton) {
-                return null;
-            }
-
-            return (
-                <span>
-                    <Icon icon="ant-design:close-outlined" />
-                </span>
-            );
-        }
-        //endregion
-
-        //region LIFECYCLE
-        //----------------------------------------------------------------------------------------------------
-        onBeforeMount(() => {
-            nextTick().then(() => {
-                // 默认全屏
-                if (props.kgIsDefaultFullscreen) {
-                    toggleFullscreen();
-                }
-            });
-        });
-        //endregion
-
-        return () => (
-            <>
-                {renderSlot({ slotRecord: slots, name: 'kgModalHeaderButtonsExtra' })}
-                {renderFullscreenButton()}
-                {renderCloseButton()}
-            </>
-        );
-    },
-});

package/component/KgModal02/KgModal02.css

@@ -1,11 +0,0 @@
-.kg-modal02 {
-}
-
-.kg-modal02 .el-dialog__footer {
-    padding: 0px;
-}
-
-.kg-modal02 .el-dialog__footer .kg-modal02--footer {
-    padding: 4px;
-    border-top: 1px solid #f0f0f0;
-}

package/component/KgModal02/KgModal02.model.ts

@@ -1 +0,0 @@
-export const sfsd = {};

package/component/KgModal02/KgModal02.tsx

@@ -1,93 +0,0 @@
-import { ButtonPropsPublic, dialogProps, DialogPropsPublic, ElButton, ElDialog } from 'element-plus';
-import { computed, defineComponent, ExtractPropTypes, PropType, ref, unref } from 'vue';
-import { useKg } from '../../config';
-import { renderSlot, renderSlotList } from '../../util/tsx.helper';
-import './KgModal02.css';
-
-export const getProps = () => ({
-    ...dialogProps,
-    kgCancelButtonProps: {
-        default: () => ({}),
-        type: Object as PropType<ButtonPropsPublic>,
-    },
-    kgOkButtonProps: {
-        default: () => ({}),
-        type: Object as PropType<ButtonPropsPublic>,
-    },
-    onCancel: Function as PropType<() => void>,
-    onOk: Function as PropType<() => void>,
-    'onUpdate:modelValue': Function as PropType<(value: boolean) => void>,
-});
-
-export type KgModal02Props = Partial<ExtractPropTypes<ReturnType<typeof getProps>> & DialogPropsPublic>;
-
-/**
- * 弹窗.
- */
-export const KgModal02 = defineComponent({
-    inheritAttrs: false,
-    name: 'KgModal02',
-    props: getProps(),
-    setup(props, { slots, attrs }) {
-        const kg = useKg();
-
-        //region DATA
-        //----------------------------------------------------------------------------------------------------
-        /**
-         * 页面上专门添加了一个特殊的元素, 通过它可以获取其他元素对象.
-         */
-        const domRef = ref<HTMLDivElement | null>(null);
-
-        const props$$ = computed<KgModal02Props>(() => {
-            const _props: Writable<KgModal02Props> = { ...unref(attrs), ...props };
-
-            _props.modalClass = _props.modalClass ? `${_props.modalClass} kg-modal02` : 'kg-modal02';
-            _props.showClose = true;
-            _props.alignCenter = true;
-            _props.draggable = true;
-            _props.closeOnClickModal = false;
-            _props.closeOnPressEscape = false;
-            _props.transition = '';
-
-            return _props;
-        });
-        //endregion
-
-        return () => (
-            <ElDialog {...props$$.value}>
-                {{
-                    ...renderSlotList({ slotRecord: slots, excludeSlotList: ['default'] }),
-                    default: () => (
-                        <>
-                            {renderSlot({ slotRecord: slots, name: 'default' })}
-
-                            <div ref={domRef} />
-                        </>
-                    ),
-                    footer: () => (
-                        <div class="kg-modal02--footer">
-                            <ElButton
-                                {...props.kgCancelButtonProps}
-                                onClick={() => {
-                                    props.onCancel?.();
-                                }}
-                            >
-                                {kg.t('kg.cancel', {}, '取消')}
-                            </ElButton>
-
-                            <ElButton
-                                {...props.kgOkButtonProps}
-                                type={'primary'}
-                                onClick={() => {
-                                    props.onOk?.();
-                                }}
-                            >
-                                {kg.t('kg.ok', {}, '确定')}
-                            </ElButton>
-                        </div>
-                    ),
-                }}
-            </ElDialog>
-        );
-    },
-});

package/component/KgProgressA/KgProgressA.less

@@ -1,35 +0,0 @@
-.kg-progress-a.ant-progress {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    overflow: hidden;
-}
-
-.kg-progress-a.ant-progress .ant-progress-outer {
-    flex: 1;
-    margin: 0;
-    padding: 0;
-    min-width: 20px;
-}
-
-.kg-progress-a.ant-progress .ant-progress-text {
-    width: auto;
-}
-
-.kg-progress-a.ant-progress .ant-progress-text .text {
-    display: inline-block;
-    font-size: 14px !important;
-}
-
-.kg-progress-a.ant-progress .ant-progress-text .text .value {
-    color: #262626;
-}
-
-.kg-progress-a.ant-progress .ant-progress-text .text .separator {
-    color: #8c8c8c;
-    margin: 0 1px;
-}
-
-.kg-progress-a.ant-progress .ant-progress-text .text .total {
-    color: #8c8c8c;
-}

package/component/KgProgressA/KgProgressA.tsx

@@ -1,90 +0,0 @@
-import { Progress } from 'ant-design-vue';
-import { computed, defineComponent, ExtractPropTypes, PropType } from 'vue';
-import './KgProgressA.less';
-
-export const getProps = () => ({
-    /**
-     * 左侧数值(分子).
-     * @default null
-     */
-    kgLeft: {
-        type: Number as PropType<number | null | undefined>,
-        default: null,
-    },
-    /**
-     * 右侧数值(分母).
-     * @default null
-     */
-    kgRight: {
-        type: Number as PropType<number | null | undefined>,
-        default: null,
-    },
-    /**
-     * 右侧文本的宽度.
-     * @default 'auto'
-     */
-    kgTextWidth: {
-        type: String as PropType<'auto' | string>,
-        default: 'auto',
-    },
-});
-
-export type IKgProgressAProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
-
-// 进度条
-export default defineComponent({
-    name: 'KgProgressA',
-    props: getProps(),
-    setup(props, { slots }) {
-        // 百分比
-        const percent = computed<number>(() => {
-            if (!props.kgLeft || !props.kgRight || typeof props.kgLeft !== 'number' || typeof props.kgRight !== 'number' || props.kgLeft < 0 || props.kgRight < 0) {
-                return 0;
-            }
-
-            return Math.floor((props.kgLeft / props.kgRight) * 100);
-        });
-
-        // 状态
-        const nzStatus = computed<'normal' | 'active' | 'success' | 'exception'>((args) => {
-            if (!props.kgLeft || !props.kgRight || typeof props.kgLeft !== 'number' || typeof props.kgRight !== 'number' || props.kgLeft < 0 || props.kgRight < 0) {
-                return 'exception';
-            }
-
-            if (props.kgLeft > props.kgRight) {
-                return 'exception';
-            } else if (props.kgLeft === props.kgRight) {
-                return 'success';
-            } else if (props.kgLeft < props.kgRight) {
-                return 'normal';
-            }
-
-            return 'normal';
-        });
-
-        // 文本样式
-        const getStyle = computed(() => ({ width: props.kgTextWidth }));
-
-        return () => (
-            <Progress
-                percent={percent.value}
-                size={'small'}
-                status={nzStatus.value}
-                class="kg-progress-a"
-            >
-                {{
-                    format: () => (
-                        <span
-                            class="text"
-                            style={getStyle.value}
-                        >
-                            <span class="value">{props.kgLeft || 0}</span>
-                            <span class="separator">/</span>
-                            <span class="total">{props.kgRight || 0}</span>
-                        </span>
-                    ),
-                }}
-            </Progress>
-        );
-    },
-});

package/component/KgResizable/KgResizable.less

@@ -1,114 +0,0 @@
-.kg-resizable {
-    position: relative;
-}
-
-.kg-resizable > *:not(.kg-resizable-handle) {
-    width: 100%;
-    height: 100%;
-}
-
-.kg-resizable > .kg-resizable-handle:hover .kg-resizable-handle-line {
-    background-color: #aaaaaa;
-}
-
-.kg-resizable.kg-resizable--top > .kg-resizable-handle {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: -6px;
-    bottom: auto !important;
-    width: 100% !important;
-    height: 12px;
-    cursor: ns-resize;
-    touch-action: none;
-    user-select: auto;
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-}
-
-.kg-resizable.kg-resizable--top .kg-resizable-handle-line {
-    width: 120px !important;
-    height: 2px;
-    margin-top: 2px;
-    background-color: #ccc;
-}
-
-.kg-resizable.kg-resizable--bottom > .kg-resizable-handle {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -6px;
-    top: auto !important;
-    width: 100% !important;
-    height: 12px;
-    cursor: ns-resize;
-    touch-action: none;
-    user-select: auto;
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-}
-
-.kg-resizable.kg-resizable--bottom .kg-resizable-handle-line {
-    width: 120px !important;
-    height: 2px;
-    margin-top: 8px;
-    background-color: #ccc;
-}
-
-.kg-resizable.kg-resizable--left > .kg-resizable-handle {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -6px;
-    right: auto !important;
-    height: 100% !important;
-    width: 12px;
-    cursor: ew-resize;
-    touch-action: none;
-    user-select: auto;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.kg-resizable.kg-resizable--left .kg-resizable-handle-line {
-    height: 120px !important;
-    width: 2px;
-    margin-right: 8px;
-    background-color: #ccc;
-}
-
-.kg-resizable.kg-resizable--right > .kg-resizable-handle {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: -6px;
-    left: auto !important;
-    height: 100% !important;
-    width: 12px;
-    cursor: ew-resize;
-    touch-action: none;
-    user-select: auto;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.kg-resizable.kg-resizable--right .kg-resizable-handle-line {
-    height: 120px !important;
-    width: 2px;
-    margin-left: 8px;
-    background-color: #ccc;
-}
-
-.kg-resizable.kg-resizable--disabled > .kg-resizable-handle {
-    display: none;
-}
-
-.kg-resizable.kg-resizable--resize-handle-hide > .kg-resizable-handle > .kg-resizable-handle-line {
-    display: none !important;
-}