@kengic/vue 0.30.1-beta.93 → 0.30.1-beta.95

package/component/KgModal/KgModal.tsx

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

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

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

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

package/component/KgModal02/KgModal02.tsx

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

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

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

@@ -0,0 +1,114 @@
+.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;
+}