feat(editor): 数据源选择器编辑按钮添加tooltip

This commit is contained in:
roymondchen 2024-07-25 19:23:34 +08:00
parent ea556d69f6
commit 3fa21fd3eb
4 changed files with 35 additions and 32 deletions

View File

@ -57,13 +57,11 @@
@change="onChangeHandler"
></TMagicCascader>
<TMagicButton
v-if="selectDataSourceId && hasDataSourceSidePanel"
class="m-fields-select-action-button"
:size="size"
@click="editHandler(selectDataSourceId)"
><MIcon :icon="!notEditable ? Edit : View"></MIcon
></TMagicButton>
<TMagicTooltip v-if="selectDataSourceId && hasDataSourceSidePanel" :content="notEditable ? '查看' : '编辑'">
<TMagicButton class="m-fields-select-action-button" :size="size" @click="editHandler(selectDataSourceId)"
><MIcon :icon="!notEditable ? Edit : View"></MIcon
></TMagicButton>
</TMagicTooltip>
</div>
</template>
@ -71,7 +69,13 @@
import { computed, inject, ref, watch } from 'vue';
import { Edit, View } from '@element-plus/icons-vue';
import { getConfig as getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect } from '@tmagic/design';
import {
getConfig as getDesignConfig,
TMagicButton,
TMagicCascader,
TMagicSelect,
TMagicTooltip,
} from '@tmagic/design';
import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
import { DataSourceFieldType } from '@tmagic/schema';
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';

View File

@ -26,14 +26,15 @@
@change="onChangeHandler"
></component>
<TMagicButton
v-if="config.fieldConfig"
style="margin-left: 5px"
:type="showDataSourceFieldSelect ? 'primary' : 'default'"
:size="size"
@click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
><MIcon :icon="Coin"></MIcon
></TMagicButton>
<TMagicTooltip v-if="config.fieldConfig" :disabled="showDataSourceFieldSelect" content="选择数据源">
<TMagicButton
style="margin-left: 5px"
:type="showDataSourceFieldSelect ? 'primary' : 'default'"
:size="size"
@click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
><MIcon :icon="Coin"></MIcon
></TMagicButton>
</TMagicTooltip>
</div>
</template>
@ -41,7 +42,7 @@
import { computed, inject, ref, resolveComponent, watch } from 'vue';
import { Coin } from '@element-plus/icons-vue';
import { TMagicButton, tMagicMessage } from '@tmagic/design';
import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
import type { FieldProps, FormState } from '@tmagic/form';
import { DataSchema } from '@tmagic/schema';
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';

View File

@ -9,14 +9,14 @@
@change="onChangeHandler"
></MContainer>
<TMagicButton
<TMagicTooltip
v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
class="m-fields-select-action-button"
:size="size"
@click="editCodeHandler"
:content="notEditable ? '查看' : '编辑'"
>
<MIcon :icon="!notEditable ? Edit : View"></MIcon>
</TMagicButton>
<TMagicButton class="m-fields-select-action-button" :size="size" @click="editCodeHandler">
<MIcon :icon="!notEditable ? Edit : View"></MIcon>
</TMagicButton>
</TMagicTooltip>
</div>
<CodeParams
@ -35,7 +35,7 @@
import { computed, inject, ref } from 'vue';
import { Edit, View } from '@element-plus/icons-vue';
import { TMagicButton } from '@tmagic/design';
import { TMagicButton, TMagicTooltip } from '@tmagic/design';
import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
import type { Id } from '@tmagic/schema';

View File

@ -11,13 +11,11 @@
@change="changeHandler"
></MSelect>
<TMagicButton
v-if="model[name] && hasDataSourceSidePanel"
class="m-fields-select-action-button"
:size="size"
@click="editHandler"
><MIcon :icon="!notEditable ? Edit : View"></MIcon
></TMagicButton>
<TMagicTooltip v-if="model[name] && hasDataSourceSidePanel" :content="notEditable ? '查看' : '编辑'">
<TMagicButton class="m-fields-select-action-button" :size="size" @click="editHandler"
><MIcon :icon="!notEditable ? Edit : View"></MIcon
></TMagicButton>
</TMagicTooltip>
</div>
</template>
@ -25,7 +23,7 @@
import { computed, inject } from 'vue';
import { Edit, View } from '@element-plus/icons-vue';
import { TMagicButton } from '@tmagic/design';
import { TMagicButton, TMagicTooltip } from '@tmagic/design';
import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
import MIcon from '@editor/components/Icon.vue';