mirror of https://github.com/nocodb/nocodb
github-actions[bot]
3 months ago
committed by
GitHub
334 changed files with 8869 additions and 2650 deletions
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 554 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 949 B After Width: | Height: | Size: 928 B |
|
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 320 B |
|
After Width: | Height: | Size: 774 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 828 B |
|
After Width: | Height: | Size: 716 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
@ -0,0 +1,129 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const { loadSetupApps, emailConfigured, storageConfigured, listModalDlg } = useAccountSetupStoreOrThrow() |
||||||
|
|
||||||
|
// const { appInfo } = useGlobal() |
||||||
|
|
||||||
|
const openedCategory = ref<string | null>(null) |
||||||
|
|
||||||
|
const configs = computed(() => [ |
||||||
|
{ |
||||||
|
title: t('labels.configLabel', { label: t('labels.email') }), |
||||||
|
key: 'email', |
||||||
|
description: |
||||||
|
'Configure your preferred email service to manage how your application sends alerts, notifications and other essential emails.', |
||||||
|
docsLink: 'https://docs.nocodb.com/account-settings/oss-specific-details#configure-email', |
||||||
|
buttonClick: () => { |
||||||
|
navigateTo(`/account/setup/email${emailConfigured.value ? `/${emailConfigured.value.title}` : ''}`) |
||||||
|
}, |
||||||
|
itemClick: () => { |
||||||
|
navigateTo(`/account/setup/email`) |
||||||
|
}, |
||||||
|
configured: emailConfigured.value, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('labels.configLabel', { label: t('labels.storage') }), |
||||||
|
key: 'storage', |
||||||
|
description: 'Set up and manage your preferred storage solution for securely handling and storing your application’s data.', |
||||||
|
docsLink: 'https://docs.nocodb.com/account-settings/oss-specific-details#configure-storage', |
||||||
|
buttonClick: () => { |
||||||
|
navigateTo(`/account/setup/storage${storageConfigured.value ? `/${storageConfigured.value.title}` : ''}`) |
||||||
|
}, |
||||||
|
itemClick: () => { |
||||||
|
navigateTo(`/account/setup/storage`) |
||||||
|
}, |
||||||
|
configured: storageConfigured.value, |
||||||
|
}, |
||||||
|
// { |
||||||
|
// title: t('labels.switchToProd'), |
||||||
|
// key: 'switchToProd', |
||||||
|
// description: 'Switch to production-ready app database from existing application database.', |
||||||
|
// docsLink: 'https://docs.nocodb.com', |
||||||
|
// buttonClick: () => { |
||||||
|
// // TODO: Implement the logic to switch to production |
||||||
|
// }, |
||||||
|
// isPending: !(appInfo.value as any)?.prodReady, |
||||||
|
// }, |
||||||
|
]) |
||||||
|
|
||||||
|
onMounted(async () => { |
||||||
|
await loadSetupApps() |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex flex-col" data-test-id="nc-setup-main"> |
||||||
|
<NcPageHeader> |
||||||
|
<template #icon> |
||||||
|
<div class="flex justify-center items-center h-5 w-5"> |
||||||
|
<GeneralIcon icon="ncSliders" class="flex-none text-[20px]" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template #title> |
||||||
|
<span data-rec="true"> |
||||||
|
{{ $t('labels.setup') }} |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</NcPageHeader> |
||||||
|
|
||||||
|
<div |
||||||
|
class="nc-content-max-w flex-1 max-h-[calc(100vh_-_100px)] overflow-y-auto nc-scrollbar-thin flex flex-col items-center gap-6 p-6" |
||||||
|
> |
||||||
|
<div class="flex flex-col gap-6 w-150"> |
||||||
|
<div |
||||||
|
v-for="config of configs" |
||||||
|
class="flex flex-col border-1 rounded-2xl border-gray-200 p-6 gap-2 hover:(shadow bg-gray-10)" |
||||||
|
:class="{ |
||||||
|
'cursor-pointer': config.itemClick, |
||||||
|
}" |
||||||
|
:data-testid="`nc-setup-${config.key}`" |
||||||
|
@click="config.itemClick" |
||||||
|
> |
||||||
|
<div class="flex gap-3 items-center" data-rec="true"> |
||||||
|
<NcTooltip v-if="!config.configured || config.isPending"> |
||||||
|
<template #title> |
||||||
|
<span> |
||||||
|
{{ $t('activity.pending') }} |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
<GeneralIcon icon="ncAlertCircle" class="text-orange-500 -mt-1 w-6 h-6 nc-pending" /> |
||||||
|
</NcTooltip> |
||||||
|
<GeneralIcon v-else icon="circleCheckSolid" class="text-success w-6 h-6 bg-white-500 nc-configured" /> |
||||||
|
|
||||||
|
<span class="font-bold text-base"> {{ config.title }}</span> |
||||||
|
</div> |
||||||
|
<div class="text-gray-600 text-sm">{{ config.description }}</div> |
||||||
|
|
||||||
|
<div class="flex justify-between mt-4"> |
||||||
|
<NcButton |
||||||
|
size="small" |
||||||
|
type="text" |
||||||
|
:href="config.docsLink" |
||||||
|
target="_blank" |
||||||
|
class="!flex items-center !no-underline" |
||||||
|
rel="noopener noreferer" |
||||||
|
@click.stop |
||||||
|
> |
||||||
|
<div class="flex gap-2 items-center"> |
||||||
|
Go to docs |
||||||
|
<GeneralIcon icon="ncExternalLink" /> |
||||||
|
</div> |
||||||
|
</NcButton> |
||||||
|
<NcButton v-if="config.configured" size="small" type="text" @click.stop="config.buttonClick"> |
||||||
|
<div class="flex gap-2 items-center"> |
||||||
|
<GeneralIcon icon="ncEdit3" /> |
||||||
|
{{ $t('general.edit') }} |
||||||
|
</div> |
||||||
|
</NcButton> |
||||||
|
<NcButton v-else size="small" @click.stop="config.buttonClick">{{ $t('general.configure') }}</NcButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<LazyAccountSetupListModal v-if="openedCategory" v-model="listModalDlg" :category="openedCategory" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"></style> |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
defineProps<{ |
||||||
|
app: { |
||||||
|
title: string |
||||||
|
logo: string |
||||||
|
} |
||||||
|
}>() |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<img v-if="app.title !== 'SMTP'" class="object-contain" :alt="app.title" :src="app.logo" /> |
||||||
|
<GeneralIcon v-else class="text-gray-500" icon="mail" /> |
||||||
|
</template> |
||||||
@ -0,0 +1,175 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import dayjs from 'dayjs' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
id: string |
||||||
|
modelValue?: boolean |
||||||
|
}>() |
||||||
|
const emit = defineEmits(['saved', 'close', 'update:modelValue']) |
||||||
|
|
||||||
|
const vOpen = useVModel(props, 'modelValue', emit) |
||||||
|
|
||||||
|
const { |
||||||
|
readPluginDetails, |
||||||
|
activePluginFormData: pluginFormData, |
||||||
|
activePlugin: plugin, |
||||||
|
isLoading, |
||||||
|
loadingAction, |
||||||
|
testSettings, |
||||||
|
saveSettings, |
||||||
|
} = useAccountSetupStoreOrThrow() |
||||||
|
|
||||||
|
await readPluginDetails(props.id) |
||||||
|
|
||||||
|
const pluginTypeMap = { |
||||||
|
Input: FormBuilderInputType.Input, |
||||||
|
Select: FormBuilderInputType.Select, |
||||||
|
Checkbox: FormBuilderInputType.Switch, |
||||||
|
LongText: FormBuilderInputType.Input, |
||||||
|
Password: FormBuilderInputType.Password, |
||||||
|
} |
||||||
|
|
||||||
|
const { formState, validate, validateInfos } = useProvideFormBuilderHelper({ |
||||||
|
formSchema: [ |
||||||
|
...plugin.value.formDetails.items.flatMap((item, i) => [ |
||||||
|
{ |
||||||
|
type: pluginTypeMap[item.type] || FormBuilderInputType.Input, |
||||||
|
label: item.label, |
||||||
|
placeholder: item.placeholder, |
||||||
|
model: item.key, |
||||||
|
required: item.required, |
||||||
|
helpText: item.help_text, |
||||||
|
width: '48', |
||||||
|
border: false, |
||||||
|
showHintAsTooltip: true, |
||||||
|
}, |
||||||
|
...(i % 2 |
||||||
|
? [] |
||||||
|
: [ |
||||||
|
{ |
||||||
|
type: FormBuilderInputType.Space, |
||||||
|
width: '4', |
||||||
|
}, |
||||||
|
]), |
||||||
|
]), |
||||||
|
], |
||||||
|
initialState: pluginFormData, |
||||||
|
}) |
||||||
|
|
||||||
|
const doAction = async (action: Action) => { |
||||||
|
try { |
||||||
|
switch (action) { |
||||||
|
case Action.Save: |
||||||
|
await validate() |
||||||
|
pluginFormData.value = formState.value |
||||||
|
await saveSettings() |
||||||
|
vOpen.value = false |
||||||
|
break |
||||||
|
case Action.Test: |
||||||
|
await validate() |
||||||
|
pluginFormData.value = formState.value |
||||||
|
await testSettings() |
||||||
|
break |
||||||
|
} |
||||||
|
} catch (e: any) { |
||||||
|
console.log(e) |
||||||
|
} finally { |
||||||
|
loadingAction.value = null |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const isValid = computed(() => { |
||||||
|
return Object.values(validateInfos || {}).every((info) => info.validateStatus !== 'error') |
||||||
|
}) |
||||||
|
|
||||||
|
const docLinks = computed(() => { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
title: 'Application Setup', |
||||||
|
url: `https://docs.nocodb.com/account-settings/oss-specific-details#configure-${plugin.value?.category?.toLowerCase()}`, |
||||||
|
}, |
||||||
|
...(plugin.value?.formDetails?.docs || []), |
||||||
|
] |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex flex-col h-full h-[calc(100vh_-_40px)]" data-testid="nc-setup-config"> |
||||||
|
<NcPageHeader> |
||||||
|
<template #title> |
||||||
|
<div class="flex gap-3 items-center"> |
||||||
|
<AccountSetupAppIcon :app="plugin" class="h-8 w-8" /> |
||||||
|
|
||||||
|
<span data-rec="true"> |
||||||
|
{{ plugin.title }} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</NcPageHeader> |
||||||
|
<div class="h-full flex h-[calc(100%_-_48px)]"> |
||||||
|
<div class="nc-config-left-panel nc-scrollbar-thin relative h-full flex flex-col"> |
||||||
|
<div class="w-full flex items-center gap-3 border-gray-200 py-6 px-6"> |
||||||
|
<span class="font-semibold text-base">{{ $t('labels.configuration') }}</span> |
||||||
|
<div class="flex-grow" /> |
||||||
|
|
||||||
|
<div class="flex gap-2"> |
||||||
|
<NcButton |
||||||
|
v-for="(action, i) in plugin.formDetails.actions" |
||||||
|
:key="i" |
||||||
|
:loading="loadingAction === action.key" |
||||||
|
:type="action.key === Action.Save ? 'primary' : 'default'" |
||||||
|
size="small" |
||||||
|
:disabled="!!loadingAction || !isValid" |
||||||
|
:data-testid="`nc-setup-config-action-${action.key?.toLowerCase()}`" |
||||||
|
@click="doAction(action.key)" |
||||||
|
> |
||||||
|
{{ action.label }} |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="h-[calc(100%_-_48px)] flex py-4 flex-col p-6 overflow-auto"> |
||||||
|
<div v-if="isLoading || !plugin" class="flex flex-row w-full justify-center items-center h-52"> |
||||||
|
<a-spin size="large" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div v-else class="flex"> |
||||||
|
<NcFormBuilder class="w-229 px-2 mx-auto" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="nc-config-right-panel"> |
||||||
|
<div class="flex-grow flex flex-col gap-3"> |
||||||
|
<div class="text-gray-500 text-capitalize">{{ $t('labels.documentation') }}</div> |
||||||
|
<a |
||||||
|
v-for="doc of docLinks" |
||||||
|
:key="doc.title" |
||||||
|
:href="doc.url" |
||||||
|
target="_blank" |
||||||
|
rel="noopener noreferrer" |
||||||
|
class="!no-underline !text-current flex gap-2 items-center" |
||||||
|
> |
||||||
|
<GeneralIcon icon="bookOpen" class="text-gray-500" /> |
||||||
|
{{ doc.title }} |
||||||
|
</a> |
||||||
|
|
||||||
|
<NcDivider /> |
||||||
|
|
||||||
|
<div class="text-gray-500 text-capitalize">{{ $t('labels.modifiedOn') }}</div> |
||||||
|
<div class=""> |
||||||
|
{{ dayjs(plugin.created_at).format('DD MMM YYYY HH:mm') }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.nc-config-left-panel { |
||||||
|
@apply w-full flex-1 flex justify-stretch; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-config-right-panel { |
||||||
|
@apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,149 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
const props = defineProps<{ |
||||||
|
category: string |
||||||
|
}>() |
||||||
|
|
||||||
|
const { categorizeApps, resetPlugin: _resetPlugin, showPluginUninstallModal, activePlugin } = useAccountSetupStoreOrThrow() |
||||||
|
|
||||||
|
const apps = computed(() => categorizeApps.value?.[props.category?.toLowerCase()] || []) |
||||||
|
const configuredApp = computed(() => apps.value.find((app: any) => app.active)) |
||||||
|
|
||||||
|
const showResetActiveAppMsg = ref(false) |
||||||
|
const switchingTo = ref(null) |
||||||
|
|
||||||
|
const showResetPluginModal = async (app: any, resetActiveAppMsg = false) => { |
||||||
|
showResetActiveAppMsg.value = resetActiveAppMsg |
||||||
|
showPluginUninstallModal.value = true |
||||||
|
activePlugin.value = app |
||||||
|
} |
||||||
|
|
||||||
|
const selectApp = (app: any) => { |
||||||
|
const activeApp = app !== configuredApp.value && configuredApp.value |
||||||
|
if (activeApp) { |
||||||
|
switchingTo.value = app |
||||||
|
return showResetPluginModal(activeApp, true) |
||||||
|
} |
||||||
|
|
||||||
|
navigateTo(`/account/setup/${props.category}/${app.title}`) |
||||||
|
} |
||||||
|
|
||||||
|
const resetPlugin = async () => { |
||||||
|
await _resetPlugin(activePlugin.value) |
||||||
|
if (showResetActiveAppMsg.value) { |
||||||
|
await selectApp(switchingTo.value) |
||||||
|
switchingTo.value = null |
||||||
|
showResetActiveAppMsg.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const closeResetModal = () => { |
||||||
|
activePlugin.value = null |
||||||
|
switchingTo.value = null |
||||||
|
showResetActiveAppMsg.value = false |
||||||
|
showPluginUninstallModal.value = false |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex flex-col" data-testid="nc-setup-list"> |
||||||
|
<NcPageHeader> |
||||||
|
<template #title> |
||||||
|
<span data-rec="true"> |
||||||
|
{{ category }} |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</NcPageHeader> |
||||||
|
<div class="h-[calc(100%_-_58px)] flex"> |
||||||
|
<div class="w-full"> |
||||||
|
<div class="w-950px px-4 mt-3 mx-auto text-lg font-weight-bold">{{ category }} Services</div> |
||||||
|
<div class="container"> |
||||||
|
<div |
||||||
|
v-for="app in apps" |
||||||
|
:key="app.title" |
||||||
|
class="item group" |
||||||
|
:data-testid="`nc-setup-list-item-${app.title}`" |
||||||
|
@click="selectApp(app)" |
||||||
|
> |
||||||
|
<AccountSetupAppIcon :app="app" class="icon" /> |
||||||
|
<span class="title">{{ app.title }}</span> |
||||||
|
<div class="flex-grow" /> |
||||||
|
|
||||||
|
<GeneralIcon |
||||||
|
v-if="app.active" |
||||||
|
icon="delete" |
||||||
|
class="text-error min-w-6 h-6 bg-white-500 !hidden !group-hover:!inline cursor-pointer" |
||||||
|
/> |
||||||
|
<GeneralIcon |
||||||
|
v-if="app === configuredApp" |
||||||
|
icon="circleCheckSolid" |
||||||
|
class="text-success min-w-5 h-5 bg-white-500 nc-configured" |
||||||
|
/> |
||||||
|
|
||||||
|
<NcDropdown :trigger="['click']" overlay-class-name="!rounded-md" @click.stop> |
||||||
|
<GeneralIcon |
||||||
|
v-if="app.active" |
||||||
|
icon="threeDotVertical" |
||||||
|
class="min-w-5 h-5 bg-white-500 text-gray-500 hover:text-current nc-setup-plugin-menu" |
||||||
|
/> |
||||||
|
|
||||||
|
<template #overlay> |
||||||
|
<NcMenu class="min-w-20"> |
||||||
|
<NcMenuItem data-testid="nc-config-reset" @click.stop="showResetPluginModal(app)"> |
||||||
|
<span> {{ $t('general.reset') }} </span> |
||||||
|
</NcMenuItem> |
||||||
|
</NcMenu> |
||||||
|
</template> |
||||||
|
</NcDropdown> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<a-modal |
||||||
|
v-model:visible="showPluginUninstallModal" |
||||||
|
:closable="false" |
||||||
|
width="448px" |
||||||
|
centered |
||||||
|
:footer="null" |
||||||
|
wrap-class-name="nc-modal-plugin-reset-conform" |
||||||
|
> |
||||||
|
<div class="flex flex-col h-full"> |
||||||
|
<div v-if="showResetActiveAppMsg" class="text-base font-weight-bold"> |
||||||
|
Switch to {{ switchingTo && switchingTo.title }} |
||||||
|
</div> |
||||||
|
<div v-else class="text-base font-weight-bold">Reset {{ activePlugin && activePlugin.title }} Configuration</div> |
||||||
|
<div class="flex flex-row mt-2 w-full"> |
||||||
|
<template v-if="showResetActiveAppMsg"> |
||||||
|
Switching to {{ switchingTo && switchingTo.title }} will reset your {{ activePlugin && activePlugin.title }} |
||||||
|
settings. Continue? |
||||||
|
</template> |
||||||
|
<template v-else>Resetting will erase your current configuration.</template> |
||||||
|
</div> |
||||||
|
<div class="flex mt-6 justify-end space-x-2"> |
||||||
|
<NcButton size="small" type="secondary" @click="closeResetModal"> {{ $t('general.cancel') }}</NcButton> |
||||||
|
<NcButton size="small" type="danger" data-testid="nc-reset-confirm-btn" @click="resetPlugin"> |
||||||
|
{{ showResetActiveAppMsg ? `${$t('general.reset')} & ${$t('general.switch')}` : $t('general.reset') }} |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-modal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.container { |
||||||
|
@apply p-4 w-950px gap-5 mx-auto my-2 grid grid-cols-3; |
||||||
|
|
||||||
|
.item { |
||||||
|
@apply text-base w-296px max-w-296px flex gap-3 border-1 border-gray-200 py-4 px-5 rounded-xl items-center cursor-pointer hover:(shadow bg-gray-50); |
||||||
|
|
||||||
|
.icon { |
||||||
|
@apply !w-8 !h-8 object-contain; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
@apply font-weight-bold; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,182 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { TableType } from 'nocodb-sdk' |
||||||
|
import type { ComponentPublicInstance } from '@vue/runtime-core' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
modelValue?: boolean |
||||||
|
tableMeta: TableType |
||||||
|
sourceId: string |
||||||
|
} |
||||||
|
|
||||||
|
const { tableMeta, ...props } = defineProps<Props>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'updated']) |
||||||
|
|
||||||
|
const { $e, $api } = useNuxtApp() |
||||||
|
|
||||||
|
const { setMeta } = useMetas() |
||||||
|
|
||||||
|
const dialogShow = useVModel(props, 'modelValue', emit) |
||||||
|
|
||||||
|
const { loadProjectTables } = useTablesStore() |
||||||
|
|
||||||
|
const baseStore = useBase() |
||||||
|
|
||||||
|
const { loadTables } = baseStore |
||||||
|
|
||||||
|
const { addUndo, defineProjectScope } = useUndoRedo() |
||||||
|
|
||||||
|
const inputEl = ref<HTMLTextAreaElement>() |
||||||
|
|
||||||
|
const loading = ref(false) |
||||||
|
|
||||||
|
const useForm = Form.useForm |
||||||
|
|
||||||
|
const formState = reactive({ |
||||||
|
description: '', |
||||||
|
}) |
||||||
|
|
||||||
|
const validators = computed(() => { |
||||||
|
return { |
||||||
|
description: [ |
||||||
|
{ |
||||||
|
validator: (_: any, _value: any) => { |
||||||
|
return new Promise<void>((resolve, _reject) => { |
||||||
|
resolve() |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const { validateInfos } = useForm(formState, validators) |
||||||
|
|
||||||
|
watchEffect( |
||||||
|
() => { |
||||||
|
if (tableMeta?.description) formState.description = `${tableMeta.description}` |
||||||
|
|
||||||
|
nextTick(() => { |
||||||
|
const input = inputEl.value?.$el as HTMLInputElement |
||||||
|
|
||||||
|
if (input) { |
||||||
|
input.setSelectionRange(0, formState.description.length) |
||||||
|
input.focus() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
{ flush: 'post' }, |
||||||
|
) |
||||||
|
|
||||||
|
const updateDescription = async (undo = false) => { |
||||||
|
if (!tableMeta) return |
||||||
|
|
||||||
|
if (formState.description) { |
||||||
|
formState.description = formState.description.trim() |
||||||
|
} |
||||||
|
|
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
await $api.dbTable.update(tableMeta.id as string, { |
||||||
|
base_id: tableMeta.base_id, |
||||||
|
description: formState.description, |
||||||
|
}) |
||||||
|
|
||||||
|
dialogShow.value = false |
||||||
|
|
||||||
|
await loadProjectTables(tableMeta.base_id!, true) |
||||||
|
|
||||||
|
if (!undo) { |
||||||
|
addUndo({ |
||||||
|
redo: { |
||||||
|
fn: (t: string) => { |
||||||
|
formState.description = t |
||||||
|
updateDescription(true, true) |
||||||
|
}, |
||||||
|
args: [formState.description], |
||||||
|
}, |
||||||
|
undo: { |
||||||
|
fn: (t: string) => { |
||||||
|
formState.description = t |
||||||
|
updateDescription(true, true) |
||||||
|
}, |
||||||
|
args: [tableMeta.description], |
||||||
|
}, |
||||||
|
scope: defineProjectScope({ model: tableMeta }), |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
await loadTables() |
||||||
|
|
||||||
|
// update metas |
||||||
|
const newMeta = await $api.dbTable.read(tableMeta.id as string) |
||||||
|
await setMeta(newMeta) |
||||||
|
|
||||||
|
$e('a:table:description:update') |
||||||
|
|
||||||
|
dialogShow.value = false |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
|
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<NcModal v-model:visible="dialogShow" size="small" :show-separator="false"> |
||||||
|
<template #header> |
||||||
|
<div class="flex flex-row items-center gap-x-2"> |
||||||
|
<GeneralIcon icon="table" class="w-6 h-6 text-gray-700" /> |
||||||
|
<span class="text-gray-900 font-bold"> |
||||||
|
{{ tableMeta?.title ?? tableMeta?.table_name }} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<div class="mt-1"> |
||||||
|
<a-form layout="vertical" :model="formState" name="create-new-table-form"> |
||||||
|
<a-form-item :label="$t('labels.description')" v-bind="validateInfos.description"> |
||||||
|
<a-textarea |
||||||
|
ref="inputEl" |
||||||
|
v-model:value="formState.description" |
||||||
|
class="nc-input-sm !py-2 nc-text-area nc-input-shadow" |
||||||
|
hide-details |
||||||
|
size="small" |
||||||
|
:placeholder="$t('msg.info.enterTableDescription')" |
||||||
|
@keydown.enter.exact="() => updateDescription()" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
<div class="flex flex-row justify-end gap-x-2 mt-5"> |
||||||
|
<NcButton type="secondary" size="small" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton> |
||||||
|
|
||||||
|
<NcButton |
||||||
|
key="submit" |
||||||
|
type="primary" |
||||||
|
size="small" |
||||||
|
:disabled=" |
||||||
|
validateInfos?.description?.validateStatus === 'error' || formState.description?.trim() === tableMeta?.description |
||||||
|
" |
||||||
|
:loading="loading" |
||||||
|
@click="() => updateDescription()" |
||||||
|
> |
||||||
|
{{ $t('general.save') }} |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</NcModal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.nc-text-area { |
||||||
|
@apply !py-2 min-h-[120px] max-h-[200px]; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-label > label) { |
||||||
|
@apply !text-md font-base !leading-[20px] text-gray-800 flex; |
||||||
|
|
||||||
|
&.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before { |
||||||
|
@apply content-[''] m-0; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,170 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { ViewType } from 'nocodb-sdk' |
||||||
|
import type { ComponentPublicInstance } from '@vue/runtime-core' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
modelValue?: boolean |
||||||
|
view: ViewType |
||||||
|
sourceId?: string |
||||||
|
} |
||||||
|
|
||||||
|
const { view, ...props } = defineProps<Props>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'updated']) |
||||||
|
|
||||||
|
const { $e, $api } = useNuxtApp() |
||||||
|
|
||||||
|
const dialogShow = useVModel(props, 'modelValue', emit) |
||||||
|
|
||||||
|
const { loadViews } = useViewsStore() |
||||||
|
|
||||||
|
const { addUndo, defineProjectScope } = useUndoRedo() |
||||||
|
|
||||||
|
const inputEl = ref<ComponentPublicInstance>() |
||||||
|
|
||||||
|
const loading = ref(false) |
||||||
|
|
||||||
|
const useForm = Form.useForm |
||||||
|
|
||||||
|
const formState = reactive({ |
||||||
|
description: '', |
||||||
|
}) |
||||||
|
|
||||||
|
const validators = computed(() => { |
||||||
|
return { |
||||||
|
description: [ |
||||||
|
{ |
||||||
|
validator: (_: any, _value: any) => { |
||||||
|
return new Promise<void>((resolve, _reject) => { |
||||||
|
resolve() |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const { validateInfos } = useForm(formState, validators) |
||||||
|
|
||||||
|
watchEffect( |
||||||
|
() => { |
||||||
|
if (view?.description) formState.description = `${view.description}` |
||||||
|
|
||||||
|
nextTick(() => { |
||||||
|
const input = inputEl.value?.$el as HTMLInputElement |
||||||
|
|
||||||
|
if (input) { |
||||||
|
input.setSelectionRange(0, formState.description.length) |
||||||
|
input.focus() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
{ flush: 'post' }, |
||||||
|
) |
||||||
|
|
||||||
|
const updateDescription = async (undo = false) => { |
||||||
|
if (!view) return |
||||||
|
|
||||||
|
if (formState.description) { |
||||||
|
formState.description = formState.description.trim() |
||||||
|
} |
||||||
|
|
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
await $api.dbView.update(view.id as string, { |
||||||
|
description: formState.description, |
||||||
|
}) |
||||||
|
|
||||||
|
dialogShow.value = false |
||||||
|
|
||||||
|
if (!undo) { |
||||||
|
addUndo({ |
||||||
|
redo: { |
||||||
|
fn: (t: string) => { |
||||||
|
formState.description = t |
||||||
|
updateDescription(true, true) |
||||||
|
}, |
||||||
|
args: [formState.description], |
||||||
|
}, |
||||||
|
undo: { |
||||||
|
fn: (t: string) => { |
||||||
|
formState.description = t |
||||||
|
updateDescription(true, true) |
||||||
|
}, |
||||||
|
args: [view.description], |
||||||
|
}, |
||||||
|
scope: defineProjectScope({ view }), |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
await loadViews({ tableId: view.fk_model_id, ignoreLoading: true, force: true }) |
||||||
|
|
||||||
|
$e('a:view:description:update') |
||||||
|
|
||||||
|
dialogShow.value = false |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
|
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<NcModal v-model:visible="dialogShow" size="small" :show-separator="false"> |
||||||
|
<template #header> |
||||||
|
<div class="flex flex-row items-center gap-x-2"> |
||||||
|
<GeneralViewIcon :meta="view" class="mt-0.5 !text-2xl" /> |
||||||
|
|
||||||
|
<span class="text-gray-900 font-semibold"> |
||||||
|
{{ view?.title }} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<div class="mt-1"> |
||||||
|
<a-form layout="vertical" :model="formState" name="create-new-table-form"> |
||||||
|
<a-form-item :label="$t('labels.description')" v-bind="validateInfos.description"> |
||||||
|
<a-textarea |
||||||
|
ref="inputEl" |
||||||
|
v-model:value="formState.description" |
||||||
|
class="nc-input-sm !py-2 nc-text-area !text-gray-800 nc-input-shadow" |
||||||
|
hide-details |
||||||
|
size="small" |
||||||
|
:placeholder="$t('msg.info.enterTableDescription')" |
||||||
|
@keydown.enter.exact="() => updateDescription()" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
<div class="flex flex-row justify-end gap-x-2 mt-5"> |
||||||
|
<NcButton type="secondary" size="small" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton> |
||||||
|
|
||||||
|
<NcButton |
||||||
|
key="submit" |
||||||
|
type="primary" |
||||||
|
size="small" |
||||||
|
:disabled=" |
||||||
|
validateInfos?.description?.validateStatus === 'error' || formState.description?.trim() === view?.description |
||||||
|
" |
||||||
|
:loading="loading" |
||||||
|
@click="() => updateDescription()" |
||||||
|
> |
||||||
|
{{ $t('general.save') }} |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</NcModal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.nc-text-area { |
||||||
|
@apply !py-2 min-h-[120px] max-h-[200px]; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-label > label) { |
||||||
|
@apply !leading-[20px] font-base !text-md text-gray-800 flex; |
||||||
|
|
||||||
|
&.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before { |
||||||
|
@apply content-[''] m-0; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
const props = withDefaults( |
||||||
|
defineProps<{ |
||||||
|
type: keyof typeof allIntegrationsMapByValue |
||||||
|
size: 'sx' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' |
||||||
|
}>(), |
||||||
|
{ |
||||||
|
size: 'sm', |
||||||
|
}, |
||||||
|
) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<component |
||||||
|
:is="allIntegrationsMapByValue[props.type]?.icon" |
||||||
|
v-if="allIntegrationsMapByValue[props.type]?.icon" |
||||||
|
class="stroke-transparent flex-none" |
||||||
|
:class="{ |
||||||
|
'w-3.5 h-3.5': size === 'sx', |
||||||
|
'w-4 h-4': size === 'sm', |
||||||
|
'w-5 h-5': size === 'md', |
||||||
|
'w-6 h-6': size === 'lg', |
||||||
|
'w-7 h-7': size === 'xl', |
||||||
|
'w-8 h-8': size === 'xxl', |
||||||
|
}" |
||||||
|
/> |
||||||
|
</template> |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
const initState = ref({ |
||||||
|
someDefaultProp: 'value', |
||||||
|
}) |
||||||
|
|
||||||
|
const { formState, isLoading, submit } = useProvideFormBuilderHelper({ |
||||||
|
formSchema: [ |
||||||
|
{ |
||||||
|
type: FormBuilderInputType.Input, |
||||||
|
label: 'Sample Input', |
||||||
|
width: 100, |
||||||
|
model: 'title', |
||||||
|
placeholder: 'Some placeholder', |
||||||
|
category: 'General', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: FormBuilderInputType.Input, |
||||||
|
label: 'Input To Nested Path', |
||||||
|
width: 50, |
||||||
|
model: 'config.sample', |
||||||
|
placeholder: 'This is added to config.sample', |
||||||
|
category: 'Sample Category', |
||||||
|
helpText: 'This is a sample help text', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: FormBuilderInputType.Space, |
||||||
|
width: 50, |
||||||
|
category: 'Sample Category', |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: FormBuilderInputType.Input, |
||||||
|
label: 'Multiple Elements in Category', |
||||||
|
width: 50, |
||||||
|
model: 'config.sample2', |
||||||
|
placeholder: 'This is added to config.sample2', |
||||||
|
category: 'Sample Category', |
||||||
|
required: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: FormBuilderInputType.Select, |
||||||
|
label: 'Sample Select', |
||||||
|
width: 100, |
||||||
|
model: 'config.select', |
||||||
|
category: 'Settings', |
||||||
|
options: [ |
||||||
|
{ label: 'Option 1', value: 'option1' }, |
||||||
|
{ label: 'Option 2', value: 'option2' }, |
||||||
|
{ label: 'Option 3', value: 'option3' }, |
||||||
|
], |
||||||
|
defaultValue: 'option2', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: FormBuilderInputType.Switch, |
||||||
|
label: 'Sample Switch', |
||||||
|
width: 100, |
||||||
|
model: 'config.switch', |
||||||
|
category: 'Misc', |
||||||
|
helpText: 'This is a sample switch', |
||||||
|
required: false, |
||||||
|
border: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
onSubmit: async () => { |
||||||
|
console.log('submit', formState) |
||||||
|
}, |
||||||
|
initialState: initState, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="h-full"> |
||||||
|
<NcFormBuilder /> |
||||||
|
<div class="mt-10"></div> |
||||||
|
<NcButton :loading="isLoading" type="primary" @click="submit">Submit</NcButton> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -0,0 +1,265 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
const { form, formState, formElementsCategorized, isLoading, validateInfos } = useFormBuilderHelperOrThrow() |
||||||
|
|
||||||
|
const deepReference = (path: string): any => { |
||||||
|
return path.split('.').reduce((acc, key) => acc[key], formState.value) |
||||||
|
} |
||||||
|
|
||||||
|
const setFormState = (path: string, value: any) => { |
||||||
|
// update nested prop in formState |
||||||
|
const keys = path.split('.') |
||||||
|
const lastKey = keys.pop() |
||||||
|
|
||||||
|
if (!lastKey) return |
||||||
|
|
||||||
|
const target = keys.reduce((acc, key) => { |
||||||
|
if (!acc[key]) { |
||||||
|
acc[key] = {} |
||||||
|
} |
||||||
|
return acc[key] |
||||||
|
}, formState.value) |
||||||
|
target[lastKey] = value |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="nc-form-builder nc-scrollbar-thin relative"> |
||||||
|
<a-form ref="form" :model="formState" hide-required-mark layout="vertical" class="flex flex-col gap-4"> |
||||||
|
<template v-for="category in Object.keys(formElementsCategorized)" :key="category"> |
||||||
|
<div class="nc-form-section"> |
||||||
|
<div v-if="category !== FORM_BUILDER_NON_CATEGORIZED" class="nc-form-section-title">{{ category }}</div> |
||||||
|
<div class="nc-form-section-body"> |
||||||
|
<div class="flex flex-wrap"> |
||||||
|
<template v-for="field in formElementsCategorized[category]" :key="field.model"> |
||||||
|
<div |
||||||
|
v-if="field.type === FormBuilderInputType.Space" |
||||||
|
:style="`width:${+field.width || 100}%`" |
||||||
|
class="w-full" |
||||||
|
></div> |
||||||
|
<a-form-item |
||||||
|
v-else |
||||||
|
v-bind="validateInfos[field.model]" |
||||||
|
class="nc-form-item" |
||||||
|
:style="`width:${+field.width || 100}%`" |
||||||
|
:required="false" |
||||||
|
:data-testid="`nc-form-input-${field.model}`" |
||||||
|
> |
||||||
|
<template v-if="![FormBuilderInputType.Switch].includes(field.type)" #label> |
||||||
|
<div class="flex items-center gap-1"> |
||||||
|
<span>{{ field.label }}</span> |
||||||
|
<span v-if="field.required" class="text-red-500">*</span> |
||||||
|
<NcTooltip v-if="field.helpText && field.showHintAsTooltip"> |
||||||
|
<template #title> |
||||||
|
<div class="text-xs"> |
||||||
|
{{ field.helpText }} |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<GeneralIcon icon="info" class="text-gray-500 h-4" /> |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template v-if="field.type === FormBuilderInputType.Input"> |
||||||
|
<a-input |
||||||
|
autocomplete="off" |
||||||
|
class="!w-full" |
||||||
|
:value="deepReference(field.model)" |
||||||
|
@update:value="setFormState(field.model, $event)" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
<template v-else-if="field.type === FormBuilderInputType.Password"> |
||||||
|
<a-input-password |
||||||
|
readonly |
||||||
|
onfocus="this.removeAttribute('readonly');" |
||||||
|
onblur="this.setAttribute('readonly', true);" |
||||||
|
autocomplete="off" |
||||||
|
:value="deepReference(field.model)" |
||||||
|
@update:value="setFormState(field.model, $event)" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
<template v-else-if="field.type === FormBuilderInputType.Select"> |
||||||
|
<NcSelect |
||||||
|
:value="deepReference(field.model)" |
||||||
|
:options="field.options" |
||||||
|
@update:value="setFormState(field.model, $event)" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
<template v-else-if="field.type === FormBuilderInputType.Switch"> |
||||||
|
<div class="flex flex-col p-2" :class="field.border ? 'border-1 rounded-lg shadow' : ''"> |
||||||
|
<div class="flex items-center"> |
||||||
|
<NcSwitch :checked="!!deepReference(field.model)" @update:checked="setFormState(field.model, $event)" /> |
||||||
|
<span class="ml-[6px] font-bold">{{ field.label }}</span> |
||||||
|
<NcTooltip v-if="field.helpText"> |
||||||
|
<template #title> |
||||||
|
<div class="text-xs"> |
||||||
|
{{ field.helpText }} |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<GeneralIcon icon="info" class="text-gray-500 h-4 ml-1" /> |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
<div v-if="field.helpText && !field.showHintAsTooltip" class="w-full mt-1 pl-[35px]"> |
||||||
|
<div class="text-xs text-gray-500">{{ field.helpText }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<div |
||||||
|
v-if="field.helpText && field.type !== FormBuilderInputType.Switch && !field.showHintAsTooltip" |
||||||
|
class="w-full mt-1" |
||||||
|
> |
||||||
|
<div class="text-xs text-gray-500">{{ field.helpText }}</div> |
||||||
|
</div> |
||||||
|
</a-form-item> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</a-form> |
||||||
|
<general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15"> |
||||||
|
<div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000"> |
||||||
|
<a-spin size="large" /> |
||||||
|
</div> |
||||||
|
</general-overlay> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.nc-form-item { |
||||||
|
margin-bottom: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-collapse-header) { |
||||||
|
@apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) { |
||||||
|
@apply !right-0; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-collapse-content-box) { |
||||||
|
@apply !px-0 !pb-0 !pt-3; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-explain-error) { |
||||||
|
@apply !text-xs; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-divider) { |
||||||
|
@apply m-0; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-with-help .ant-form-item-explain) { |
||||||
|
@apply !min-h-0; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-select .ant-select-selector .ant-select-selection-item) { |
||||||
|
@apply font-weight-400; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-form-builder { |
||||||
|
:deep(.ant-input-affix-wrapper), |
||||||
|
:deep(.ant-input), |
||||||
|
:deep(.ant-select) { |
||||||
|
@apply !appearance-none border-solid rounded-md; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-input-password) { |
||||||
|
input { |
||||||
|
@apply !border-none my-0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nc-form-section { |
||||||
|
@apply flex flex-col gap-3; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-form-section-title { |
||||||
|
@apply text-sm font-bold text-gray-800; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-form-section-body { |
||||||
|
@apply flex flex-col gap-3; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-label > label.ant-form-item-required:after) { |
||||||
|
@apply content-['*'] inline-block text-inherit text-red-500 ml-1; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item) { |
||||||
|
&.ant-form-item-has-error { |
||||||
|
&:not(:has(.ant-input-password)) .ant-input { |
||||||
|
&:not(:hover):not(:focus):not(:disabled) { |
||||||
|
@apply shadow-default; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover:not(:focus):not(:disabled) { |
||||||
|
@apply shadow-hover; |
||||||
|
} |
||||||
|
|
||||||
|
&:focus { |
||||||
|
@apply shadow-error ring-0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.ant-input-number, |
||||||
|
.ant-input-affix-wrapper.ant-input-password { |
||||||
|
&:not(:hover):not(:focus-within):not(:disabled) { |
||||||
|
@apply shadow-default; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover:not(:focus-within):not(:disabled) { |
||||||
|
@apply shadow-hover; |
||||||
|
} |
||||||
|
|
||||||
|
&:focus-within { |
||||||
|
@apply shadow-error ring-0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:not(.ant-form-item-has-error) { |
||||||
|
&:not(:has(.ant-input-password)) .ant-input { |
||||||
|
&:not(:hover):not(:focus):not(:disabled) { |
||||||
|
@apply shadow-default border-gray-200; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover:not(:focus):not(:disabled) { |
||||||
|
@apply border-gray-200 shadow-hover; |
||||||
|
} |
||||||
|
|
||||||
|
&:focus { |
||||||
|
@apply shadow-selected ring-0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.ant-input-number, |
||||||
|
.ant-input-affix-wrapper.ant-input-password { |
||||||
|
&:not(:hover):not(:focus-within):not(:disabled) { |
||||||
|
@apply shadow-default border-gray-200; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover:not(:focus-within):not(:disabled) { |
||||||
|
@apply border-gray-200 shadow-hover; |
||||||
|
} |
||||||
|
|
||||||
|
&:focus-within { |
||||||
|
@apply shadow-selected ring-0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-row:not(.ant-form-item)) { |
||||||
|
@apply !-mx-1.5; |
||||||
|
& > .ant-col { |
||||||
|
@apply !px-1.5; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item) { |
||||||
|
@apply !mb-6; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<style lang="scss"></style> |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue