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

package/component/KgForm.Item/KgForm.Item.Switch.tsx

@@ -0,0 +1,49 @@
+import { Switch } from 'ant-design-vue';
+import { defineComponent } from 'vue';
+import { IKgVarConfigControlControlProperties, KG_FORM_CONTEXT } from '../../model';
+import { emit, IKgForm$EventListenerParameter$onChange } from '../KgForm/KgForm.event';
+import { useKgVar } from '../KgVar';
+import { getProps } from './KgForm.Item.model';
+import { useKgFormItem } from './KgForm.Item.service';
+
+// 表单控件:开关
+export default defineComponent({
+    name: 'KgFormItemSwitch',
+    props: getProps(),
+    emits: ['update:value', 'kgSubmit'],
+    setup(props, { attrs, emit: _emit }) {
+        const kgVar = useKgVar();
+
+        const { controlProperties$$ } = useKgFormItem<IKgVarConfigControlControlProperties['SWITCH']>();
+
+        function onUpdateValue(value: boolean | string | number) {
+            _emit('update:value', value);
+
+            emit<IKgForm$EventListenerParameter$onChange>({
+                id: kgVar.fid,
+                event: 'onChange',
+                parameter: {
+                    context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                    isCopying: kgVar.isCopying.value,
+                    isCreating: kgVar.isCreating.value,
+                    isDeleting: kgVar.isDeleting.value,
+                    isUpdating: kgVar.isUpdating.value,
+                    value: value,
+                    varName: props.kgVarName ?? '',
+                    variableName: props.kgVarName ?? '',
+                },
+            });
+        }
+
+        return () => (
+            <Switch
+                checked={props.value as any}
+                onUpdate:checked={onUpdateValue}
+                id={attrs.id as any}
+                checkedValue={controlProperties$$.value?.dataType === 'BOOLEAN' ? true : 1}
+                unCheckedValue={controlProperties$$.value?.dataType === 'BOOLEAN' ? false : 0}
+                disabled={props.kgDisabled}
+            />
+        );
+    },
+});

package/component/KgForm.Item/KgForm.Item.TextArea.tsx

@@ -0,0 +1,99 @@
+import { Textarea } from 'ant-design-vue';
+import { isNil } from 'lodash-es';
+import { computed, defineComponent } from 'vue';
+import { IKgVarConfigControlControlProperties, KG_FORM_CONTEXT } from '../../model';
+import { emit, IKgForm$EventListenerParameter$onBlur, IKgForm$EventListenerParameter$onChange } from '../KgForm/KgForm.event';
+import { useKgVar } from '../KgVar';
+import { getProps } from './KgForm.Item.model';
+import { useKgFormItem } from './KgForm.Item.service';
+
+// 表单控件:多行文本
+export default defineComponent({
+    name: 'KgFormItemTextArea',
+    props: getProps(),
+    emits: ['update:value', 'kgSubmit'],
+    setup(props, { attrs, emit: _emit }) {
+        const kgVar = useKgVar();
+
+        const { controlProperties$$ } = useKgFormItem<IKgVarConfigControlControlProperties['TEXT_AREA']>();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const getValue = computed<string>(() => {
+            if (!isNil(props.value)) {
+                return String(props.value);
+            }
+
+            return '';
+        });
+
+        const getRows = computed<number>(() => {
+            let _rows = 5;
+
+            const propsRows = Number.parseInt(String(controlProperties$$.value?.rows));
+            if (!Number.isNaN(propsRows) && propsRows > 0) {
+                _rows = propsRows;
+            }
+
+            return _rows;
+        });
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function onUpdateValue(value: string) {
+            // 1. 去除首尾空格,
+            // 2. 如果值是空字符串, 则将值设为 null,
+            const _value = String(value).trim() || null;
+
+            _emit('update:value', _value);
+            emit<IKgForm$EventListenerParameter$onChange>({
+                id: kgVar.fid,
+                event: 'onChange',
+                parameter: {
+                    context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                    isCopying: kgVar.isCopying.value,
+                    isCreating: kgVar.isCreating.value,
+                    isDeleting: kgVar.isDeleting.value,
+                    isUpdating: kgVar.isUpdating.value,
+                    value: _value,
+                    varName: props.kgVarName ?? '',
+                    variableName: props.kgVarName ?? '',
+                },
+            });
+        }
+
+        function onSubmit() {
+            // 由于文本框通常需要使用 ENTER 键换行, 因此对于文本框, ENTER 不会触发表单提交,
+        }
+
+        function onBlur() {
+            emit<IKgForm$EventListenerParameter$onBlur>({
+                id: kgVar.fid,
+                event: 'onBlur',
+                parameter: {
+                    context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                    value: props.value,
+                    values: [props.value],
+                    varName: props.kgVarName ?? '',
+                },
+            });
+        }
+        //endregion
+
+        return () => (
+            <Textarea
+                value={getValue.value}
+                onUpdate:value={onUpdateValue}
+                id={attrs.id as any}
+                placeholder={props.kgPlaceholder}
+                disabled={props.kgDisabled}
+                rows={getRows.value}
+                allowClear={true}
+                onPressEnter={onSubmit}
+                onBlur={onBlur}
+                class={'kg-form-item--textarea'}
+            />
+        );
+    },
+});

package/component/KgForm.Item/KgForm.Item.less

@@ -0,0 +1,476 @@
+.ant-form .kg-form-item .ant-form-item .ant-form-item-label > label {
+    width: 100%;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-label > label > div {
+    display: flex;
+    flex-direction: column;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-label > label > div > div:first-child {
+    display: flex;
+    align-items: center;
+}
+
+/* 标签文本 */
+.ant-form .kg-form-item .ant-form-item .ant-form-item-label > label > div > div:first-child > label.title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* 提示文本图标 */
+.ant-form .kg-form-item .ant-form-item .ant-form-item-label > label > div > div:first-child > .iconify {
+    margin-left: 6px;
+    color: rgba(0, 0, 0, 0.5);
+    min-width: 14px;
+}
+
+/* 标签文本底部提示文本 */
+.ant-form .kg-form-item .ant-form-item .ant-form-item-label > label > div > div.tip {
+    margin: 2px 0 4px;
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 95%;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content {
+    display: flex;
+    align-items: stretch;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content > .ant-input-affix-wrapper {
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content > .ant-input-affix-wrapper > .ant-input-suffix {
+    display: none;
+    margin-left: 4px !important;
+    margin-right: -4px !important;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content > .ant-input-affix-wrapper.ant-input-affix-wrapper-input-with-clear-btn > .ant-input-suffix {
+    display: flex;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content > .ant-input-affix-wrapper.ant-input-affix-wrapper-input-with-clear-btn.ant-input-affix-wrapper-disabled > .ant-input-suffix {
+    display: none;
+}
+
+/* region 高级查询序符号下拉列表 */
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select {
+    flex: 0;
+    min-width: 60px;
+    margin-right: 1px;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select.kg-form-item--dynamic-operator-select--code .ant-select-selection-item > .desc {
+    display: none;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select.kg-form-item--dynamic-operator-select--desc {
+    min-width: 92px;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select.kg-form-item--dynamic-operator-select--desc .ant-select-selection-item > .code {
+    display: none;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select.kg-form-item--dynamic-operator-select--both {
+    min-width: 122px;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select.kg-form-item--dynamic-operator-select--both .ant-select-selection-item > .code {
+    width: 30px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select .ant-select-selector {
+    padding: 0 8px;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select .ant-select-selector .ant-select-selection-item,
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select .ant-select-selector .ant-select-selection-placeholder {
+    padding-right: 11px;
+}
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--dynamic-operator-select .ant-select-arrow {
+    right: 8px;
+}
+
+.kg-form-item--dynamic-operator-select--dropdown {
+    min-width: 200px !important;
+}
+
+.kg-form-item--dynamic-operator-select--dropdown .ant-select-item-option-content > .code {
+    width: 30px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+/* endregion */
+
+.ant-form .kg-form-item .ant-form-item-has-error .ant-input-affix-wrapper.ant-input-affix-wrapper-disabled {
+    border-color: #ed6f6f !important;
+}
+
+.ant-form .kg-form-item .ant-form-item-has-error .kg-form-item--checkbox-group {
+    border-color: #ed6f6f;
+}
+
+.kg-form-item--no-label-container > .ant-form-item-label {
+    display: none;
+}
+
+/* region 隐藏 */
+
+.ant-form .kg-form-item.kg-form-item--invisible {
+    display: none;
+}
+
+/* endregion */
+
+/* region 查找 */
+
+.ant-form .kg-form-item.kg-form-item-lookup .ant-form-item-control-input-content > .ant-select:not(.kg-form-item--dynamic-operator-select) .ant-select-selector {
+    border-radius: 3px 0 0 3px;
+}
+
+.ant-form .kg-form-item.kg-form-item-lookup .ant-form-item-control-input-content > .ant-select:not(.kg-form-item--dynamic-operator-select):hover .ant-select-selector,
+.ant-form .kg-form-item.kg-form-item-lookup .ant-form-item-control-input-content > .ant-select:not(.kg-form-item--dynamic-operator-select):focus .ant-select-selector {
+    z-index: 1;
+}
+
+.ant-form .kg-form-item.kg-form-item-lookup .ant-form-item-control-input-content > .ant-input {
+    border-radius: 3px 0 0 3px;
+}
+
+.ant-form .kg-form-item.kg-form-item-lookup .ant-form-item-control-input-content > .ant-input:hover,
+.ant-form .kg-form-item.kg-form-item-lookup .ant-form-item-control-input-content > .ant-input:focus {
+    z-index: 1;
+}
+
+.ant-form .kg-form-item.kg-form-item-lookup .ant-form-item-control-input-content > .ant-input-affix-wrapper {
+    border-radius: 3px 0 0 3px;
+}
+
+/* endregion */
+
+/* region 垂直布局 */
+
+.ant-form.ant-form-vertical .kg-form-item .ant-form-item {
+    margin-bottom: 12px !important;
+}
+
+.ant-form.ant-form-vertical .kg-form-item .ant-form-item .ant-form-item-label > label > div {
+    max-width: calc(100% - 10px);
+}
+
+/* endregion */
+
+/* region 水平布局 */
+
+.ant-form.ant-form-horizontal .kg-form-item .ant-form-item {
+    margin-bottom: 6px !important;
+}
+
+.ant-form.ant-form-horizontal .kg-form-item .ant-form-item .ant-form-item-label > label {
+    justify-content: flex-end;
+}
+
+.ant-form.ant-form-horizontal .kg-form-item .ant-form-item .ant-form-item-label > label::after {
+    margin: 0 4px 0 4px;
+}
+
+.ant-form.ant-form-horizontal .kg-form-item .ant-form-item .ant-form-item-label > label > div {
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.ant-form.ant-form-horizontal .kg-form-item .ant-form-item .ant-form-item-label > label > div > div:first-child {
+    justify-content: flex-end;
+}
+
+.ant-form.ant-form-horizontal .kg-form-item .ant-form-item .ant-form-item-label > label > div > div.tip {
+    display: none !important;
+}
+
+/* region 固定宽度 */
+
+.ant-form.ant-form-horizontal .kg-form-item.kg-form-item--col-fixed .ant-form-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+/* endregion */
+
+/* endregion */
+
+/* region 表单控件--文本 */
+.kg-form-item--input .ant-input {
+    color: rgba(0, 0, 0, 0.65) !important;
+}
+
+/* endregion */
+
+/* region 表单控件--数字 */
+.kg-form-item--input-number {
+    width: 100% !important;
+    color: rgba(0, 0, 0, 0.65) !important;
+}
+
+.kg-form-item--input-number .ant-input-number-input {
+    padding: 0px 8px !important;
+}
+
+/* endregion */
+
+/* region 表单控件--密码 */
+.kg-form-item--input-password .ant-input-suffix .ant-input-password-icon {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+/* endregion */
+
+/* region 表单控件--多行文本 */
+.kg-form-item--textarea.ant-input {
+    padding: 4px 8px;
+    border-radius: 3px;
+    color: rgba(0, 0, 0, 0.65) !important;
+    resize: none;
+}
+
+/* endregion */
+
+/* region 表单控件--链接 */
+.kg-form-item--link {
+    margin-bottom: 18px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    height: auto !important;
+    padding: 6px 10px !important;
+}
+
+.kg-form-item--link > span:nth-child(1) {
+    flex: 1;
+    min-width: 0;
+    display: block;
+    word-break: break-all;
+    text-wrap: initial;
+    text-align: left;
+}
+
+.kg-form-item--link > span:nth-child(2) {
+    margin-left: 12px;
+}
+
+/* endregion */
+
+/* region 表单控件--下拉列表*/
+
+.kg-form-item--select {
+    width: 100%;
+}
+
+.kg-form-item--select .ant-select-selector {
+    padding: 0 8px !important;
+}
+
+.kg-form-item--select .ant-select-arrow,
+.kg-form-item--select .ant-select-clear {
+    right: 8px !important;
+    z-index: 1 !important;
+}
+
+/* region 多选*/
+
+.kg-form-item--select.ant-select-multiple .ant-select-selector {
+    padding: 1px 3px !important;
+}
+
+/* endregion */
+
+.ant-form .kg-form-item .ant-form-item .ant-form-item-control-input-content .kg-form-item--select {
+    flex: 1;
+    min-width: 0;
+}
+
+.kg-table--body-cell .kg-form-item--select {
+    text-align: left;
+}
+
+.kg-table.kg-table--submitting tr.ant-table-row-selected > td.submitting .kg-table--body-cell.kg-table--body-cell--submitting .kg-form-item-lookup .ant-form-item-control-input-content > .kg-form-item--select {
+    width: auto;
+    flex: 1;
+    min-width: 0;
+}
+
+/* region 下拉列表弹窗 */
+.kg-form-item--select--dropdown {
+    &.kg-form-item--select-multi--dropdown {
+        .ant-select-item-option-content {
+            border-top-right-radius: 0px !important;
+            border-bottom-right-radius: 0px !important;
+        }
+    }
+
+    .ant-select-item-empty {
+        height: 32px !important;
+        line-height: 32px !important;
+        padding: 5px 8px !important;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        & > .ant-empty {
+            margin: 0 !important;
+            text-align: left !important;
+
+            .ant-empty-description {
+                margin: 0 !important;
+            }
+
+            .ant-empty-image {
+                display: none !important;
+            }
+        }
+    }
+}
+
+/* endregion */
+/* endregion */
+
+// 多选框组
+.kg-form-item--checkbox-group {
+    border: 1px solid #d9d9d9;
+    padding: 4px 6px 0px 6px;
+    border-radius: 3px;
+    width: 100%;
+
+    .ant-divider {
+        margin: 3px 0 6px 0;
+    }
+
+    > .ant-checkbox-wrapper {
+        align-items: center;
+
+        > .ant-checkbox {
+            top: 0px !important;
+        }
+    }
+
+    > .ant-checkbox-group {
+        width: 100%;
+
+        > div {
+            .ant-checkbox-wrapper {
+                width: 100%;
+                align-items: center;
+
+                > .ant-checkbox {
+                    top: 0px !important;
+                }
+            }
+        }
+    }
+}
+
+// 单选框组
+.kg-form-item--radio-group {
+    width: 100%;
+
+    > .ant-radio-group {
+        width: 100%;
+
+        > .ant-row {
+            margin-left: 0px !important;
+            margin-right: 0px !important;
+
+            .ant-col {
+                padding: 0px !important;
+
+                > .ant-radio-wrapper {
+                    width: 100%;
+                    padding: 5px 6px;
+                    border-radius: 3px;
+                    align-items: center;
+
+                    &:hover {
+                        background: #f0f0f0;
+                    }
+
+                    > .ant-radio {
+                        top: 0px !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 表单控件附件:查找弹窗:按钮
+.kg-form-item--addon--lookup.ant-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    left: -1px;
+    margin-right: -1px;
+    min-width: 32px;
+    border-radius: 0 3px 3px 0;
+    padding: 0 !important;
+}
+
+.ant-form-item-has-error {
+    .kg-form-item--addon--lookup {
+        &.ant-btn {
+            border-color: #ed6f6f !important;
+        }
+    }
+}
+
+// 表单控件附件:查找弹窗:弹窗
+.kg-form-item--addon--lookup--modal {
+    .ant-modal {
+        .ant-modal-content {
+            .ant-modal-body {
+                padding: 0;
+            }
+        }
+    }
+}
+
+// 提示文本的提示框
+.ant-tooltip.kg-form-item--tip--tooltip {
+    max-width: 600px;
+
+    .ant-tooltip-arrow {
+        .ant-tooltip-arrow-content {
+            background-color: rgba(0, 0, 0, 0.7);
+            width: 8px;
+            height: 8px;
+            border-radius: 0px 0px 4px 0px;
+        }
+    }
+
+    .ant-tooltip-inner {
+        padding: 4px 8px;
+        min-height: initial;
+        user-select: none !important;
+    }
+
+    &.ant-tooltip-placement-top,
+    &.ant-tooltip-placement-topLeft,
+    &.ant-tooltip-placement-topRight {
+    }
+}
+
+.kg-table--body-cell .ant-form-item-control-input {
+    align-items: center !important;
+}