Browse Source

refactor: move all icons to iconMap (WIP)

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5343/head
Pranav C 2 years ago
parent
commit
b29189f0c3
  1. 4
      packages/nc-gui/components/account/ResetPassword.vue
  2. 2
      packages/nc-gui/components/account/UsersModal.vue
  3. 15
      packages/nc-gui/components/cell/GeoData.vue
  4. 3
      packages/nc-gui/components/cell/MultiSelect.vue
  5. 3
      packages/nc-gui/components/cell/SingleSelect.vue
  6. 2
      packages/nc-gui/components/cell/attachment/Image.vue
  7. 2
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  8. 2
      packages/nc-gui/components/dashboard/settings/Metadata.vue
  9. 2
      packages/nc-gui/components/dashboard/settings/Modal.vue
  10. 6
      packages/nc-gui/components/dlg/QuickImport.vue
  11. 2
      packages/nc-gui/components/general/PreviewAs.vue
  12. 3
      packages/nc-gui/components/smartsheet/Gallery.vue
  13. 2
      packages/nc-gui/components/smartsheet/Kanban.vue
  14. 4
      packages/nc-gui/components/smartsheet/Pagination.vue
  15. 5
      packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
  16. 3
      packages/nc-gui/components/smartsheet/column/SelectOptions.vue
  17. 15
      packages/nc-gui/components/smartsheet/expanded-form/Header.vue
  18. 5
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  19. 12
      packages/nc-gui/components/smartsheet/header/Menu.vue
  20. 6
      packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
  21. 4
      packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteCache.vue
  22. 4
      packages/nc-gui/components/smartsheet/sidebar/toolbar/ExportCache.vue
  23. 8
      packages/nc-gui/components/smartsheet/toolbar/Export.vue
  24. 4
      packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
  25. 5
      packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
  26. 3
      packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
  27. 4
      packages/nc-gui/components/smartsheet/toolbar/QrScannerButton.vue
  28. 2
      packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
  29. 3
      packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
  30. 8
      packages/nc-gui/components/tabs/auth/UserManagement.vue
  31. 2
      packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
  32. 26
      packages/nc-gui/components/template/Editor.vue
  33. 7
      packages/nc-gui/components/virtual-cell/components/ItemChip.vue
  34. 5
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  35. 7
      packages/nc-gui/components/webhook/Editor.vue
  36. 4
      packages/nc-gui/layouts/base.vue
  37. 3
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue
  38. 4
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  39. 9
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
  40. 4
      packages/nc-gui/pages/forgot-password.vue
  41. 3
      packages/nc-gui/pages/index/index/[projectId].vue
  42. 2
      packages/nc-gui/pages/index/index/create-external.vue
  43. 3
      packages/nc-gui/pages/index/index/create.vue
  44. 10
      packages/nc-gui/pages/index/index/index.vue
  45. 6
      packages/nc-gui/pages/index/index/user.vue
  46. 3
      packages/nc-gui/pages/projects/index.vue
  47. 9
      packages/nc-gui/pages/projects/index/index.vue
  48. 7
      packages/nc-gui/pages/projects/index/list.vue
  49. 15
      packages/nc-gui/pages/signin.vue
  50. 57
      packages/nc-gui/utils/iconUtils.ts

4
packages/nc-gui/components/account/ResetPassword.vue

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n } from '#imports' import { iconMap, message, navigateTo, reactive, ref, useApi, useGlobal, useI18n } from '#imports'
const { api, error } = useApi({ useGlobalInstance: true }) const { api, error } = useApi({ useGlobalInstance: true })
@ -121,7 +121,7 @@ const resetError = () => {
<div class="text-center"> <div class="text-center">
<button data-testid="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit"> <button data-testid="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit">
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<MdiKeyChange /> <component :is="iconMap.passwordChange" />
{{ $t('activity.changePwd') }} {{ $t('activity.changePwd') }}
</span> </span>
</button> </button>

2
packages/nc-gui/components/account/UsersModal.vue

@ -166,7 +166,7 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
<div v-else class="flex flex-col pb-4"> <div v-else class="flex flex-col pb-4">
<div class="flex flex-row items-center pl-2 pb-1 h-[1rem]"> <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
<MdiAccountOutline /> <component :is="iconMap.account" />
<div class="text-xs ml-0.5 mt-0.5">{{ $t('activity.inviteUser') }}</div> <div class="text-xs ml-0.5 mt-0.5">{{ $t('activity.inviteUser') }}</div>
</div> </div>

15
packages/nc-gui/components/cell/GeoData.vue

@ -89,7 +89,10 @@ const openInOSM = () => {
class="group cursor-pointer flex gap-1 items-center mx-auto max-w-64 justify-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)" class="group cursor-pointer flex gap-1 items-center mx-auto max-w-64 justify-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
> >
<div class="flex items-center gap-2" data-testid="nc-geo-data-set-location-button"> <div class="flex items-center gap-2" data-testid="nc-geo-data-set-location-button">
<MdiMapMarker class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]" /> <component
:is="iconMap.mapMarker"
class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
/>
<div class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs"> <div class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs">
{{ latLongStr }} {{ latLongStr }}
</div> </div>
@ -141,14 +144,18 @@ const openInOSM = () => {
:class="{ 'animate-infinite animate-spin text-gray-500': isLoading }" :class="{ 'animate-infinite animate-spin text-gray-500': isLoading }"
/> />
<a-button class="ml-2" @click="onClickSetCurrentLocation" <a-button class="ml-2" @click="onClickSetCurrentLocation"
><MdiGpsFixed class="mr-2" />{{ $t('labels.currentLocation') }}</a-button ><component :is="iconMap.currentLocation" class="mr-2" />{{ $t('labels.currentLocation') }}</a-button
> >
</div> </div>
</a-form-item> </a-form-item>
<a-form-item v-if="vModel"> <a-form-item v-if="vModel">
<div class="mr-2 flex flex-row items-end gap-1 text-left"> <div class="mr-2 flex flex-row items-end gap-1 text-left">
<a-button @click="openInOSM"><MdiOpenInNew class="mr-2" />{{ $t('activity.map.openInOpenStreetMap') }}</a-button> <a-button @click="openInOSM"
<a-button @click="openInGoogleMaps"><MdiOpenInNew class="mr-2" />{{ $t('activity.map.openInGoogleMaps') }}</a-button> ><component :is="iconMap.openInNew" class="mr-2" />{{ $t('activity.map.openInOpenStreetMap') }}</a-button
>
<a-button @click="openInGoogleMaps"
><component :is="iconMap.openInNew" class="mr-2" />{{ $t('activity.map.openInGoogleMaps') }}</a-button
>
</div> </div>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>

3
packages/nc-gui/components/cell/MultiSelect.vue

@ -14,6 +14,7 @@ import {
enumColor, enumColor,
extractSdkResponseErrorMsg, extractSdkResponseErrorMsg,
h, h,
iconMap,
inject, inject,
isDrawerOrModalExist, isDrawerOrModalExist,
onMounted, onMounted,
@ -367,7 +368,7 @@ useEventListener(document, 'click', handleClose, true)
:value="searchVal" :value="searchVal"
> >
<div class="flex gap-2 text-gray-500 items-center h-full"> <div class="flex gap-2 text-gray-500 items-center h-full">
<MdiPlusThick class="min-w-4" /> <component :is="iconMap.plusThick" class="min-w-4" />
<div class="text-xs whitespace-normal"> <div class="text-xs whitespace-normal">
Create new option named <strong>{{ searchVal }}</strong> Create new option named <strong>{{ searchVal }}</strong>
</div> </div>

3
packages/nc-gui/components/cell/SingleSelect.vue

@ -15,6 +15,7 @@ import {
computed, computed,
enumColor, enumColor,
extractSdkResponseErrorMsg, extractSdkResponseErrorMsg,
iconMap,
inject, inject,
isDrawerOrModalExist, isDrawerOrModalExist,
ref, ref,
@ -295,7 +296,7 @@ useEventListener(document, 'click', handleClose, true)
:value="searchVal" :value="searchVal"
> >
<div class="flex gap-2 text-gray-500 items-center h-full"> <div class="flex gap-2 text-gray-500 items-center h-full">
<MdiPlusThick class="min-w-4" /> <component :is="iconMap.plusThick" class="min-w-4" />
<div class="text-xs whitespace-normal"> <div class="text-xs whitespace-normal">
Create new option named <strong>{{ searchVal }}</strong> Create new option named <strong>{{ searchVal }}</strong>
</div> </div>

2
packages/nc-gui/components/cell/attachment/Image.vue

@ -21,5 +21,5 @@ const onError = () => index.value++
quality="75" quality="75"
@error="onError" @error="onError"
/> />
<MdiFileImageBox v-else /> <component :is="iconMap.imagePlaceholder" v-else />
</template> </template>

2
packages/nc-gui/components/dashboard/settings/DataSources.vue

@ -308,7 +308,7 @@ watch(
<template #item="{ element: base, index }"> <template #item="{ element: base, index }">
<div v-if="index !== 0" class="ds-table-row border-gray-200"> <div v-if="index !== 0" class="ds-table-row border-gray-200">
<div class="ds-table-col ds-table-name"> <div class="ds-table-col ds-table-name">
<MdiDragVertical v-if="sources.length > 2" small class="ds-table-handle" /> <component :is="iconMap.dragVertical" v-if="sources.length > 2" small class="ds-table-handle" />
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<GeneralBaseLogo :base-type="base.type" /> <GeneralBaseLogo :base-type="base.type" />
{{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span> {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>

2
packages/nc-gui/components/dashboard/settings/Metadata.vue

@ -135,7 +135,7 @@ const columns = [
<div v-if="isDifferent"> <div v-if="isDifferent">
<a-button v-e="['a:proj-meta:meta-data:sync']" class="nc-btn-metasync-sync-now" type="primary" @click="syncMetaDiff"> <a-button v-e="['a:proj-meta:meta-data:sync']" class="nc-btn-metasync-sync-now" type="primary" @click="syncMetaDiff">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<MdiDatabaseSync /> <component :is="iconMap.databaseSync" />
{{ $t('activity.metaSync') }} {{ $t('activity.metaSync') }}
</div> </div>
</a-button> </a-button>

2
packages/nc-gui/components/dashboard/settings/Modal.vue

@ -227,7 +227,7 @@ watch(
@click="vDataState = DataSourcesSubTab.New" @click="vDataState = DataSourcesSubTab.New"
> >
<div v-if="vDataState === ''" class="flex items-center gap-2 text-primary font-light"> <div v-if="vDataState === ''" class="flex items-center gap-2 text-primary font-light">
<MdiDatabasePlusOutline class="text-lg group-hover:text-accent" /> <component :is="iconMap.plusCircle" class="text-lg group-hover:text-accent" />
New New
</div> </div>
</a-button> </a-button>

6
packages/nc-gui/components/dlg/QuickImport.vue

@ -380,7 +380,7 @@ const beforeUpload = (file: UploadFile) => {
<template #tab> <template #tab>
<!-- Upload --> <!-- Upload -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<MdiFileUploadOutline /> <component :is="iconMap.fileUpload" />
{{ $t('general.upload') }} {{ $t('general.upload') }}
</div> </div>
</template> </template>
@ -399,7 +399,7 @@ const beforeUpload = (file: UploadFile) => {
@change="handleChange" @change="handleChange"
@reject="rejectDrop" @reject="rejectDrop"
> >
<MdiFilePlusOutline size="large" /> <component :is="iconMap.plusCircle" size="large" />
<!-- Click or drag file to this area to upload --> <!-- Click or drag file to this area to upload -->
<p class="ant-upload-text">{{ $t('msg.info.import.clickOrDrag') }}</p> <p class="ant-upload-text">{{ $t('msg.info.import.clickOrDrag') }}</p>
@ -427,7 +427,7 @@ const beforeUpload = (file: UploadFile) => {
<a-tab-pane v-else key="urlTab" :closable="false"> <a-tab-pane v-else key="urlTab" :closable="false">
<template #tab> <template #tab>
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<MdiLinkVariant /> <component :is="iconMap.link" />
URL URL
</span> </span>
</template> </template>

2
packages/nc-gui/components/general/PreviewAs.vue

@ -64,7 +64,7 @@ watch(previewAs, (newRole) => {
class="floating-reset-btn nc-floating-preview-btn p-4" class="floating-reset-btn nc-floating-preview-btn p-4"
:style="{ top: position.y, left: position.x }" :style="{ top: position.y, left: position.x }"
> >
<MdiDrag class="cursor-move text-white" @mousedown="mouseDown" /> <component :is="iconMap.drag" class="cursor-move text-white" @mousedown="mouseDown" />
<div class="divider" /> <div class="divider" />

3
packages/nc-gui/components/smartsheet/Gallery.vue

@ -17,6 +17,7 @@ import {
computed, computed,
createEventHook, createEventHook,
extractPkFromRow, extractPkFromRow,
iconMap,
inject, inject,
isImage, isImage,
isLTAR, isLTAR,
@ -262,7 +263,7 @@ watch(view, async (nextView) => {
</template> </template>
</a-carousel> </a-carousel>
<MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" /> <component :is="iconMap.imagePlaceholder" v-else class="w-full h-48 my-4 text-cool-gray-200" />
</template> </template>
<div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`"> <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">

2
packages/nc-gui/components/smartsheet/Kanban.vue

@ -471,7 +471,7 @@ watch(view, async (nextView) => {
</template> </template>
</a-carousel> </a-carousel>
<MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" /> <component :is="iconMap.imagePlaceholder" v-else class="w-full h-48 my-4 text-cool-gray-200" />
</template> </template>
<div <div
v-for="col in fieldsWithoutCover" v-for="col in fieldsWithoutCover"

4
packages/nc-gui/components/smartsheet/Pagination.vue

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ChangePageInj, PaginationDataInj, computed, inject } from '#imports' import { ChangePageInj, PaginationDataInj, computed, iconMap, inject } from '#imports'
const paginatedData = inject(PaginationDataInj)! const paginatedData = inject(PaginationDataInj)!
@ -39,7 +39,7 @@ const page = computed({
<span class="text-xs" style="white-space: nowrap"> Change page:</span> <span class="text-xs" style="white-space: nowrap"> Change page:</span>
<a-input :value="page" size="small" class="ml-1 !text-xs" type="number" @keydown.enter="changePage(page)"> <a-input :value="page" size="small" class="ml-1 !text-xs" type="number" @keydown.enter="changePage(page)">
<template #suffix> <template #suffix>
<MdiKeyboardReturn class="mt-1" @click="changePage(page)" /> <component :is="iconMap.returnKey" class="mt-1" @click="changePage(page)" />
</template> </template>
</a-input> </a-input>
</div> </div>

5
packages/nc-gui/components/smartsheet/column/FormulaOptions.vue

@ -12,6 +12,7 @@ import {
formulas, formulas,
getUIDTIcon, getUIDTIcon,
getWordUntilCaret, getWordUntilCaret,
iconMap,
insertAtCursor, insertAtCursor,
onMounted, onMounted,
useColumnCreateStoreOrThrow, useColumnCreateStoreOrThrow,
@ -742,9 +743,9 @@ onMounted(() => {
</template> </template>
<template #avatar> <template #avatar>
<mdi-function v-if="item.type === 'function'" class="text-lg" /> <component :is="iconMap.function" v-if="item.type === 'function'" class="text-lg" />
<mdi-calculator v-if="item.type === 'op'" class="text-lg" /> <component :is="iconMap.calculator" v-if="item.type === 'op'" class="text-lg" />
<component :is="item.icon" v-if="item.type === 'column'" class="text-lg" /> <component :is="item.icon" v-if="item.type === 'column'" class="text-lg" />
</template> </template>

3
packages/nc-gui/components/smartsheet/column/SelectOptions.vue

@ -172,7 +172,8 @@ watch(inputs, () => {
:data-testid="`select-column-option-${index}`" :data-testid="`select-column-option-${index}`"
:class="{ removed: element.status === 'remove' }" :class="{ removed: element.status === 'remove' }"
> >
<MdiDragVertical <component
:is="iconMap.dragVertical"
v-if="!isKanban" v-if="!isKanban"
small small
class="nc-child-draggable-icon handle" class="nc-child-draggable-icon handle"

15
packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@ -120,7 +120,8 @@ const onConfirmDeleteRowClick = async () => {
<template #title> <template #title>
<div class="text-center w-full">{{ $t('activity.toggleCommentsDraw') }}</div> <div class="text-center w-full">{{ $t('activity.toggleCommentsDraw') }}</div>
</template> </template>
<MdiCommentTextOutline <component
:is="iconMap.comment"
v-if="isUIAllowed('rowComments') && !isNew" v-if="isUIAllowed('rowComments') && !isNew"
v-e="['c:row-expand:comment-toggle']" v-e="['c:row-expand:comment-toggle']"
class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4" class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
@ -129,30 +130,30 @@ const onConfirmDeleteRowClick = async () => {
</a-tooltip> </a-tooltip>
<a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save"> <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
<template #icon><MdiMenuDown /></template> <template #icon><component :is="iconMap.arrowDown" /></template>
<template #overlay> <template #overlay>
<a-menu class="nc-expand-form-save-dropdown-menu"> <a-menu class="nc-expand-form-save-dropdown-menu">
<a-menu-item key="0" class="!py-2 flex gap-2" @click="saveRowAndStay = 0"> <a-menu-item key="0" class="!py-2 flex gap-2" @click="saveRowAndStay = 0">
<div class="flex items-center"> <div class="flex items-center">
<MdiContentSave class="mr-1" /> <component :is="iconMap.contentSaveExit" class="mr-1" />
{{ $t('activity.saveAndExit') }} {{ $t('activity.saveAndExit') }}
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item key="1" class="!py-2 flex gap-2 items-center" @click="saveRowAndStay = 1"> <a-menu-item key="1" class="!py-2 flex gap-2 items-center" @click="saveRowAndStay = 1">
<div class="flex items-center"> <div class="flex items-center">
<MdiContentSaveEdit class="mr-1" /> <component :is="iconMap.contentSaveStay" class="mr-1" />
{{ $t('activity.saveAndStay') }} {{ $t('activity.saveAndStay') }}
</div> </div>
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
<div v-if="saveRowAndStay === 0" class="flex items-center"> <div v-if="saveRowAndStay === 0" class="flex items-center">
<MdiContentSave class="mr-1" /> <component :is="iconMap.contentSaveExit" class="mr-1" />
{{ $t('activity.saveAndExit') }} {{ $t('activity.saveAndExit') }}
</div> </div>
<div v-if="saveRowAndStay === 1" class="flex items-center"> <div v-if="saveRowAndStay === 1" class="flex items-center">
<MdiContentSaveEdit class="mr-1" /> <component :is="iconMap.contentSaveStay" class="mr-1" />
{{ $t('activity.saveAndStay') }} {{ $t('activity.saveAndStay') }}
</div> </div>
</a-dropdown-button> </a-dropdown-button>
@ -163,7 +164,7 @@ const onConfirmDeleteRowClick = async () => {
<a-menu> <a-menu>
<a-menu-item v-if="!isNew" @click="loadRow"> <a-menu-item v-if="!isNew" @click="loadRow">
<div v-e="['c:row-expand:reload']" class="py-2 flex gap-2 items-center"> <div v-e="['c:row-expand:reload']" class="py-2 flex gap-2 items-center">
<mdi-reload class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4" /> <component :is="iconMap.reload" class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4" />
{{ $t('general.reload') }} {{ $t('general.reload') }}
</div> </div>
</a-menu-item> </a-menu-item>

5
packages/nc-gui/components/smartsheet/expanded-form/index.vue

@ -11,6 +11,7 @@ import {
ReloadRowDataHookInj, ReloadRowDataHookInj,
computedInject, computedInject,
createEventHook, createEventHook,
iconMap,
inject, inject,
message, message,
provide, provide,
@ -301,7 +302,7 @@ export default {
<GeneralShortcutLabel class="justify-center" :keys="['Alt', '←']" /> <GeneralShortcutLabel class="justify-center" :keys="['Alt', '←']" />
</template> </template>
<MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" /> <component :is="iconMap.chevronLeft" class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
</a-tooltip> </a-tooltip>
<a-tooltip v-if="!props.lastRow" placement="bottom"> <a-tooltip v-if="!props.lastRow" placement="bottom">
@ -309,7 +310,7 @@ export default {
{{ $t('labels.nextRow') }} {{ $t('labels.nextRow') }}
<GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" /> <GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" />
</template> </template>
<MdiChevronRight class="cursor-pointer nc-next-arrow" @click="onNext" /> <component :is="iconMap.chevronRight" class="cursor-pointer nc-next-arrow" @click="onNext" />
</a-tooltip> </a-tooltip>
</template> </template>
<div class="w-[500px] mx-auto"> <div class="w-[500px] mx-auto">

12
packages/nc-gui/components/smartsheet/header/Menu.vue

@ -232,14 +232,14 @@ const hideField = async () => {
<a-divider class="!my-0" /> <a-divider class="!my-0" />
<a-menu-item @click="sortByColumn('asc')"> <a-menu-item @click="sortByColumn('asc')">
<div v-e="['a:field:sort', { dir: 'asc' }]" class="nc-column-insert-after nc-header-menu-item"> <div v-e="['a:field:sort', { dir: 'asc' }]" class="nc-column-insert-after nc-header-menu-item">
<MdiSortAscending class="text-primary" /> <component :is="iconMap.sortAsc" class="text-primary" />
<!-- Sort Ascending --> <!-- Sort Ascending -->
{{ $t('general.sortAsc') }} {{ $t('general.sortAsc') }}
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item @click="sortByColumn('desc')"> <a-menu-item @click="sortByColumn('desc')">
<div v-e="['a:field:sort', { dir: 'desc' }]" class="nc-column-insert-before nc-header-menu-item"> <div v-e="['a:field:sort', { dir: 'desc' }]" class="nc-column-insert-before nc-header-menu-item">
<MdiSortDescending class="text-primary" /> <component :is="iconMap.sortDesc" class="text-primary" />
<!-- Sort Descending --> <!-- Sort Descending -->
{{ $t('general.sortDesc') }} {{ $t('general.sortDesc') }}
</div> </div>
@ -261,21 +261,21 @@ const hideField = async () => {
@click="duplicateColumn" @click="duplicateColumn"
> >
<div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item"> <div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item">
<MdiFileReplaceOutline class="text-primary" /> <component :is="iconMap.duplicate" class="text-primary" />
<!-- Duplicate --> <!-- Duplicate -->
{{ t('general.duplicate') }} {{ t('general.duplicate') }}
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item @click="addColumn()"> <a-menu-item @click="addColumn()">
<div v-e="['a:field:insert:after']" class="nc-column-insert-after nc-header-menu-item"> <div v-e="['a:field:insert:after']" class="nc-column-insert-after nc-header-menu-item">
<MdiTableColumnPlusAfter class="text-primary" /> <component :is="iconMap.colInsertAfter" class="text-primary" />
<!-- Insert After --> <!-- Insert After -->
{{ t('general.insertAfter') }} {{ t('general.insertAfter') }}
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item v-if="!column?.pv" @click="addColumn(true)"> <a-menu-item v-if="!column?.pv" @click="addColumn(true)">
<div v-e="['a:field:insert:before']" class="nc-column-insert-before nc-header-menu-item"> <div v-e="['a:field:insert:before']" class="nc-column-insert-before nc-header-menu-item">
<MdiTableColumnPlusBefore class="text-primary" /> <component :is="iconMap.colInsertBefore" class="text-primary" />
<!-- Insert Before --> <!-- Insert Before -->
{{ t('general.insertBefore') }} {{ t('general.insertBefore') }}
</div> </div>
@ -284,7 +284,7 @@ const hideField = async () => {
<a-menu-item v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv" @click="setAsDisplayValue"> <a-menu-item v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv" @click="setAsDisplayValue">
<div class="nc-column-set-primary nc-header-menu-item"> <div class="nc-column-set-primary nc-header-menu-item">
<MdiStar class="text-primary" /> <component :is="iconMap.star" class="text-primary" />
<!-- todo : tooltip --> <!-- todo : tooltip -->
<!-- Set as Display value --> <!-- Set as Display value -->

6
packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue

@ -222,7 +222,11 @@ function onStopEdit() {
{{ $t('activity.deleteView') }} {{ $t('activity.deleteView') }}
</template> </template>
<MdiTrashCan class="!hidden !group-hover:block text-red-500 nc-view-delete-icon" @click.stop="onDelete" /> <component
:is="iconMap.delete"
class="!hidden !group-hover:block text-red-500 nc-view-delete-icon"
@click.stop="onDelete"
/>
</a-tooltip> </a-tooltip>
</template> </template>
</div> </div>

4
packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteCache.vue

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { message, useApi, useI18n } from '#imports' import { iconMap, message, useApi, useI18n } from '#imports'
const { t } = useI18n() const { t } = useI18n()
@ -22,6 +22,6 @@ async function deleteCache() {
<span> Delete Cache </span> <span> Delete Cache </span>
</template> </template>
<mdi-delete class="cursor-pointer" @click="deleteCache" /> <component :is="iconMap.delete" class="cursor-pointer" @click="deleteCache" />
</a-tooltip> </a-tooltip>
</template> </template>

4
packages/nc-gui/components/smartsheet/sidebar/toolbar/ExportCache.vue

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { message, useApi, useI18n } from '#imports' import { iconMap, message, useApi, useI18n } from '#imports'
const { t } = useI18n() const { t } = useI18n()
@ -36,6 +36,6 @@ async function exportCache() {
<span> Export Cache </span> <span> Export Cache </span>
</template> </template>
<mdi-export class="cursor-pointer" @click="exportCache" /> <component :is="iconMap.export" class="cursor-pointer" @click="exportCache" />
</a-tooltip> </a-tooltip>
</template> </template>

8
packages/nc-gui/components/smartsheet/toolbar/Export.vue

@ -1,10 +1,14 @@
<script lang="ts" setup>
import { iconMap } from '#imports'
</script>
<template> <template>
<a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu"> <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
<a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn"> <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<MdiDownload class="group-hover:text-accent text-gray-500" /> <component :is="iconMap.download" class="group-hover:text-accent text-gray-500" />
<span class="text-capitalize !text-sm font-weight-normal">{{ $t('general.download') }}</span> <span class="text-capitalize !text-sm font-weight-normal">{{ $t('general.download') }}</span>
<MdiMenuDown class="text-grey" /> <component :is="iconMap.arrowDown" class="text-grey" />
</div> </div>
</a-button> </a-button>

4
packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@ -219,7 +219,7 @@ useMenuCloseOnEsc(open)
<div class="flex-1" /> <div class="flex-1" />
<MdiDrag class="cursor-move" /> <component :is="iconMap.drag" class="cursor-move" />
</div> </div>
</template> </template>
<template v-if="activeView?.type === ViewTypes.GRID" #header> <template v-if="activeView?.type === ViewTypes.GRID" #header>
@ -235,7 +235,7 @@ useMenuCloseOnEsc(open)
<span class="text-sm">Display Value</span> <span class="text-sm">Display Value</span>
</template> </template>
<MdiTableKey class="text-xs" /> <component :is="iconMap.tableKey" class="text-xs" />
</a-tooltip> </a-tooltip>
<div class="flex items-center px-[8px]"> <div class="flex items-center px-[8px]">

5
packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue

@ -3,6 +3,7 @@ import {
IsKanbanInj, IsKanbanInj,
IsLockedInj, IsLockedInj,
IsPublicInj, IsPublicInj,
iconMap,
inject, inject,
provide, provide,
ref, ref,
@ -44,11 +45,11 @@ provide(IsKanbanInj, ref(true))
:disabled="isLocked" :disabled="isLocked"
> >
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<MdiPlusCircleOutline /> <component :is="iconMap.plusCircle" />
<span class="text-capitalize !text-sm font-weight-normal"> <span class="text-capitalize !text-sm font-weight-normal">
{{ $t('activity.kanban.addOrEditStack') }} {{ $t('activity.kanban.addOrEditStack') }}
</span> </span>
<MdiMenuDown class="text-grey" /> <component :is="iconMap.arrowDown" class="text-grey" />
</div> </div>
</a-button> </a-button>
</div> </div>

3
packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue

@ -9,6 +9,7 @@ import {
MetaInj, MetaInj,
ReloadViewDataHookInj, ReloadViewDataHookInj,
computed, computed,
iconMap,
inject, inject,
ref, ref,
useViewColumns, useViewColumns,
@ -84,7 +85,7 @@ const handleChange = () => {
{{ $t('activity.map.mappedBy') }} {{ $t('activity.map.mappedBy') }}
<span class="font-bold">{{ geoDataFieldColumn?.title }}</span> <span class="font-bold">{{ geoDataFieldColumn?.title }}</span>
</span> </span>
<MdiMenuDown class="text-grey" /> <component :is="iconMap.arrowDown" class="text-grey" />
</div> </div>
</a-button> </a-button>
</div> </div>

4
packages/nc-gui/components/smartsheet/toolbar/QrScannerButton.vue

@ -4,7 +4,7 @@ import { ref } from 'vue'
import { StreamBarcodeReader } from 'vue-barcode-reader' import { StreamBarcodeReader } from 'vue-barcode-reader'
import type { ColumnType } from 'nocodb-sdk' import type { ColumnType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk' import { UITypes } from 'nocodb-sdk'
import { NOCO, storeToRefs } from '#imports' import { NOCO, iconMap, storeToRefs } from '#imports'
const meta = inject(MetaInj, ref()) const meta = inject(MetaInj, ref())
@ -125,7 +125,7 @@ const onDecode = async (codeValue: string) => {
<div> <div>
<a-button class="nc-btn-find-row-by-scan nc-toolbar-btn" @click="showCodeScannerOverlay = true"> <a-button class="nc-btn-find-row-by-scan nc-toolbar-btn" @click="showCodeScannerOverlay = true">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<MdiQrcodeScan /> <component :is="iconMap.qrCode" />
<span v-if="!isMobileMode" class="!text-xs font-weight-normal"> {{ $t('activity.findRowByCodeScan') }}</span> <span v-if="!isMobileMode" class="!text-xs font-weight-normal"> {{ $t('activity.findRowByCodeScan') }}</span>
</div> </div>
</a-button> </a-button>

2
packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@ -288,7 +288,7 @@ const copyIframeCode = async () => {
class="flex gap-1 items-center pb-1 text-gray-500 cursor-pointer font-weight-medium mb-2 mt-4 pl-1" class="flex gap-1 items-center pb-1 text-gray-500 cursor-pointer font-weight-medium mb-2 mt-4 pl-1"
@click="copyIframeCode" @click="copyIframeCode"
> >
<MdiCodeTags class="text-gray-500" /> <component :is="iconMap.embed" class="text-gray-500" />
Embed this view in your site Embed this view in your site
</div> </div>

3
packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue

@ -9,6 +9,7 @@ import {
MetaInj, MetaInj,
ReloadViewDataHookInj, ReloadViewDataHookInj,
computed, computed,
iconMap,
inject, inject,
ref, ref,
useKanbanViewStoreOrThrow, useKanbanViewStoreOrThrow,
@ -94,7 +95,7 @@ const handleChange = () => {
{{ $t('activity.kanban.stackedBy') }} {{ $t('activity.kanban.stackedBy') }}
<span class="font-bold">{{ groupingField }}</span> <span class="font-bold">{{ groupingField }}</span>
</span> </span>
<MdiMenuDown class="text-grey" /> <component :is="iconMap.arrowDown" class="text-grey" />
</div> </div>
</a-button> </a-button>
</div> </div>

8
packages/nc-gui/components/tabs/auth/UserManagement.vue

@ -245,7 +245,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
@click="onInvite" @click="onInvite"
> >
<div class="flex flex-row justify-center items-center caption capitalize space-x-1"> <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
<MdiAccountPlusOutline class="mr-1" /> <component :is="iconMap.accountPlus" class="mr-1" />
<div>{{ $t('activity.inviteTeam') }}</div> <div>{{ $t('activity.inviteTeam') }}</div>
</div> </div>
</a-button> </a-button>
@ -255,12 +255,12 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
<div class="px-5"> <div class="px-5">
<div class="flex flex-row border-b-1 pb-2 px-2"> <div class="flex flex-row border-b-1 pb-2 px-2">
<div class="flex flex-row w-4/6 space-x-1 items-center pl-1"> <div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
<EvaEmailOutline class="flex text-gray-500 -mt-0.5" /> <component :is="iconMap.email" class="flex text-gray-500 -mt-0.5" />
<div class="text-gray-600 text-xs space-x-1">{{ $t('labels.email') }}</div> <div class="text-gray-600 text-xs space-x-1">{{ $t('labels.email') }}</div>
</div> </div>
<div class="flex flex-row justify-center w-1/6 space-x-1 items-center pl-1"> <div class="flex flex-row justify-center w-1/6 space-x-1 items-center pl-1">
<MdiDramaMasks class="flex text-gray-500 -mt-0.5" /> <component :is="iconMap.role" class="flex text-gray-500 -mt-0.5" />
<div class="text-gray-600 text-xs">{{ $t('objects.role') }}</div> <div class="text-gray-600 text-xs">{{ $t('objects.role') }}</div>
</div> </div>
@ -350,7 +350,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
<a-menu-item> <a-menu-item>
<!-- Resend invite Email --> <!-- Resend invite Email -->
<div class="flex flex-row items-center py-3" @click="resendInvite(user)"> <div class="flex flex-row items-center py-3" @click="resendInvite(user)">
<MdiEmailArrowRightOutline class="flex h-[1rem] text-gray-500" /> <component :is="iconMap.sendEmail" class="flex h-[1rem] text-gray-500" />
<div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div> <div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div>
</div> </div>
</a-menu-item> </a-menu-item>

2
packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@ -192,7 +192,7 @@ watch(
<template v-if="usersData.invitationToken"> <template v-if="usersData.invitationToken">
<div class="flex flex-col mt-1 border-b-1 pb-5"> <div class="flex flex-col mt-1 border-b-1 pb-5">
<div class="flex flex-row items-center pl-1.5 pb-1 h-[1.1rem]"> <div class="flex flex-row items-center pl-1.5 pb-1 h-[1.1rem]">
<MdiAccountOutline /> <component :is="iconMap.account" />
<div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div> <div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
</div> </div>

26
packages/nc-gui/components/template/Editor.vue

@ -636,7 +636,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
<a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx"> <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
<template #header> <template #header>
<span class="font-weight-bold text-lg flex items-center gap-2"> <span class="font-weight-bold text-lg flex items-center gap-2">
<mdi-table class="text-primary" /> <component :is="iconMap.table" class="text-primary" />
{{ table.table_name }} {{ table.table_name }}
</span> </span>
</template> </template>
@ -647,7 +647,12 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
<!-- TODO: i18n --> <!-- TODO: i18n -->
<span>Delete Table</span> <span>Delete Table</span>
</template> </template>
<mdi-delete-outline v-if="data.tables.length > 1" class="text-lg mr-8" @click.stop="deleteTable(tableIdx)" /> <component
:is="iconMap.delete"
v-if="data.tables.length > 1"
class="text-lg mr-8"
@click.stop="deleteTable(tableIdx)"
/>
</a-tooltip> </a-tooltip>
</template> </template>
@ -727,7 +732,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
/> />
</a-form-item> </a-form-item>
<span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)"> <span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)">
<mdi-table class="text-primary" /> <component :is="iconMap.table" class="text-primary" />
{{ table.table_name }} {{ table.table_name }}
</span> </span>
</template> </template>
@ -738,7 +743,12 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
<!-- TODO: i18n --> <!-- TODO: i18n -->
<span>Delete Table</span> <span>Delete Table</span>
</template> </template>
<mdi-delete-outline v-if="data.tables.length > 1" class="text-lg mr-8" @click.stop="deleteTable(tableIdx)" /> <component
:is="iconMap.delete"
v-if="data.tables.length > 1"
class="text-lg mr-8"
@click.stop="deleteTable(tableIdx)"
/>
</a-tooltip> </a-tooltip>
</template> </template>
<a-table <a-table
@ -833,7 +843,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
<a-button type="text" @click="deleteTableColumn(tableIdx, record.key)"> <a-button type="text" @click="deleteTableColumn(tableIdx, record.key)">
<div class="flex items-center"> <div class="flex items-center">
<mdi-delete-outline class="text-lg" /> <component :is="iconMap.delete" class="text-lg" />
</div> </div>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -850,7 +860,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
<a-button class="group" @click="addNewColumnRow(tableIdx, 'Number')"> <a-button class="group" @click="addNewColumnRow(tableIdx, 'Number')">
<div class="flex items-center"> <div class="flex items-center">
<mdi-numeric class="group-hover:!text-accent flex text-lg" /> <component :is="iconMap.number" class="group-hover:!text-accent flex text-lg" />
</div> </div>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -863,7 +873,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
<a-button class="group" @click="addNewColumnRow(tableIdx, 'SingleLineText')"> <a-button class="group" @click="addNewColumnRow(tableIdx, 'SingleLineText')">
<div class="flex items-center"> <div class="flex items-center">
<mdi-alpha-a class="group-hover:!text-accent text-lg" /> <component :is="iconMap.text" class="group-hover:!text-accent text-lg" />
</div> </div>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -876,7 +886,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
<a-button class="group" @click="addNewColumnRow(tableIdx, 'LongText')"> <a-button class="group" @click="addNewColumnRow(tableIdx, 'LongText')">
<div class="flex items-center"> <div class="flex items-center">
<mdi-text class="group-hover:!text-accent text-lg" /> <component :is="iconMap.longText" class="group-hover:!text-accent text-lg" />
</div> </div>
</a-button> </a-button>
</a-tooltip> </a-tooltip>

7
packages/nc-gui/components/virtual-cell/components/ItemChip.vue

@ -4,6 +4,7 @@ import {
IsFormInj, IsFormInj,
IsLockedInj, IsLockedInj,
ReadonlyInj, ReadonlyInj,
iconMap,
inject, inject,
ref, ref,
useExpandedFormDetached, useExpandedFormDetached,
@ -62,7 +63,11 @@ export default {
<span class="name">{{ value }}</span> <span class="name">{{ value }}</span>
<div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center"> <div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
<MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" /> <component
:is="iconMap.closeThick"
class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500"
@click.stop="emit('unlink')"
/>
</div> </div>
</div> </div>
</template> </template>

5
packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@ -130,7 +130,7 @@ const onClick = (row: Row) => {
@click="emit('attachRecord')" @click="emit('attachRecord')"
> >
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<MdiLinkVariant class="text-xs" type="primary" /> <component :is="iconMap.link" class="text-xs" type="primary" />
Link to ' Link to '
<GeneralTableIcon :meta="relatedTableMeta" class="-mx-1 w-5" /> <GeneralTableIcon :meta="relatedTableMeta" class="-mx-1 w-5" />
{{ relatedTableMeta.title }}' {{ relatedTableMeta.title }}'
@ -153,7 +153,8 @@ const onClick = (row: Row) => {
</div> </div>
<div v-if="!readonly" class="flex gap-2"> <div v-if="!readonly" class="flex gap-2">
<MdiLinkVariantRemove <component
:is="iconMap.linkRemove"
class="text-xs text-grey hover:(!text-red-500) cursor-pointer" class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
data-testid="nc-child-list-icon-unlink" data-testid="nc-child-list-icon-unlink"
@click.stop="unlinkRow(row)" @click.stop="unlinkRow(row)"

7
packages/nc-gui/components/webhook/Editor.vue

@ -7,6 +7,7 @@ import {
computed, computed,
extractSdkResponseErrorMsg, extractSdkResponseErrorMsg,
fieldRequiredValidator, fieldRequiredValidator,
iconMap,
inject, inject,
message, message,
onMounted, onMounted,
@ -451,7 +452,7 @@ onMounted(async () => {
<a-button class="nc-btn-webhook-save" type="primary" size="large" @click.prevent="saveHooks"> <a-button class="nc-btn-webhook-save" type="primary" size="large" @click.prevent="saveHooks">
<div class="flex items-center"> <div class="flex items-center">
<MdiContentSave class="mr-2" /> <component :is="iconMap.save" class="mr-2" />
<!-- Save --> <!-- Save -->
{{ $t('general.save') }} {{ $t('general.save') }}
</div> </div>
@ -520,9 +521,9 @@ onMounted(async () => {
> >
<a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type"> <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
<div class="flex items-center"> <div class="flex items-center">
<MdiLink v-if="notificationOption.type === 'URL'" class="mr-2" /> <component :is="iconMap.link" v-if="notificationOption.type === 'URL'" class="mr-2" />
<MdiEmail v-if="notificationOption.type === 'Email'" class="mr-2" /> <component :is="iconMap.email" v-if="notificationOption.type === 'Email'" class="mr-2" />
<MdiSlack v-if="notificationOption.type === 'Slack'" class="mr-2" /> <MdiSlack v-if="notificationOption.type === 'Slack'" class="mr-2" />

4
packages/nc-gui/layouts/base.vue

@ -89,7 +89,7 @@ hooks.hook('page:finish', () => {
<a-menu class="!py-0 leading-8 !rounded"> <a-menu class="!py-0 leading-8 !rounded">
<a-menu-item key="0" data-testid="nc-menu-accounts__user-settings" class="!rounded-t"> <a-menu-item key="0" data-testid="nc-menu-accounts__user-settings" class="!rounded-t">
<nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/account/users"> <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/account/users">
<MdiAccountCircleOutline class="mt-1 group-hover:text-accent" />&nbsp; <component :is="iconMap.accountCircle" class="mt-1 group-hover:text-accent" />&nbsp;
<div class="prose group-hover:text-primary"> <div class="prose group-hover:text-primary">
<div>Account</div> <div>Account</div>
<div class="text-xs text-gray-500">{{ email }}</div> <div class="text-xs text-gray-500">{{ email }}</div>
@ -115,7 +115,7 @@ hooks.hook('page:finish', () => {
<a-menu-item key="1" class="!rounded-b group"> <a-menu-item key="1" class="!rounded-b group">
<div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout"> <div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
<MdiLogout class="group-hover:text-accent" />&nbsp; <component :is="iconMap.signout" class="group-hover:text-accent" />&nbsp;
<span class="prose group-hover:text-primary"> <span class="prose group-hover:text-primary">
{{ $t('general.signOut') }} {{ $t('general.signOut') }}

3
packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@ -316,8 +316,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
</template> </template>
</a-tooltip> </a-tooltip>
<div v-else class="text-md font-semibold truncate capitalize">{{ project.title }}</div> <div v-else class="text-md font-semibold truncate capitalize">{{ project.title }}</div>
<component :is="iconMap.arrowDown" class="min-w-[17px] group-hover:text-accent text-md" />
<MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" />
</template> </template>
<template v-else> <template v-else>

4
packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@ -3,7 +3,7 @@ import type { ColumnType } from 'nocodb-sdk'
import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk' import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import { ref } from 'vue' import { ref } from 'vue'
import { StreamBarcodeReader } from 'vue-barcode-reader' import { StreamBarcodeReader } from 'vue-barcode-reader'
import { useSharedFormStoreOrThrow } from '#imports' import { iconMap, useSharedFormStoreOrThrow } from '#imports'
const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } = const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
useSharedFormStoreOrThrow() useSharedFormStoreOrThrow()
@ -175,7 +175,7 @@ const onDecode = async (scannedCodeValue: string) => {
@click="showCodeScannerForFieldTitle(field.title)" @click="showCodeScannerForFieldTitle(field.title)"
> >
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<mdi-qrcode-scan class="h-5 w-5" /> <component :is="iconMap.qrCodeScan" class="h-5 w-5" />
</div> </div>
</a-button> </a-button>
</div> </div>

9
packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@ -445,7 +445,11 @@ onMounted(() => {
data-testid="nc-survey-form__icon-prev" data-testid="nc-survey-form__icon-prev"
@click="goPrevious()" @click="goPrevious()"
> >
<MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" /> <component
:is="iconMap.chevronLeft"
:class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'"
class="text-2xl md:text-md"
/>
</button> </button>
</a-tooltip> </a-tooltip>
@ -464,7 +468,8 @@ onMounted(() => {
data-testid="nc-survey-form__icon-next" data-testid="nc-survey-form__icon-next"
@click="goNext()" @click="goNext()"
> >
<MdiChevronRight <component
:is="iconMap.chevronRight"
:class="[isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent']" :class="[isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent']"
class="text-2xl md:text-md" class="text-2xl md:text-md"
/> />

4
packages/nc-gui/pages/forgot-password.vue

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { RuleObject } from 'ant-design-vue/es/form' import type { RuleObject } from 'ant-design-vue/es/form'
import { definePageMeta, reactive, ref, useApi, useI18n, validateEmail } from '#imports' import { definePageMeta, iconMap, reactive, ref, useApi, useI18n, validateEmail } from '#imports'
definePageMeta({ definePageMeta({
requiresAuth: false, requiresAuth: false,
@ -92,7 +92,7 @@ function resetError() {
<div class="self-center flex flex-col gap-4 items-center justify-center w-full"> <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
<button class="scaling-btn bg-opacity-100" type="submit"> <button class="scaling-btn bg-opacity-100" type="submit">
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<MdiLogin /> <component :is="iconMap.signin" />
{{ $t('activity.sendEmail') }} {{ $t('activity.sendEmail') }}
</span> </span>
</button> </button>

3
packages/nc-gui/pages/index/index/[projectId].vue

@ -5,6 +5,7 @@ import type { VNodeRef } from '@vue/runtime-core'
import type { RuleObject } from 'ant-design-vue/es/form' import type { RuleObject } from 'ant-design-vue/es/form'
import { import {
extractSdkResponseErrorMsg, extractSdkResponseErrorMsg,
iconMap,
message, message,
navigateTo, navigateTo,
projectTitleValidator, projectTitleValidator,
@ -65,7 +66,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer" class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
@click="navigateTo('/')" @click="navigateTo('/')"
> >
<MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" /> <component :is="iconMap.chevronLeft" class="text-black group-hover:(text-accent scale-110)" />
</div> </div>
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.editProject') }}</h1> <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.editProject') }}</h1>

2
packages/nc-gui/pages/index/index/create-external.vue

@ -371,7 +371,7 @@ onMounted(async () => {
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer" class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
@click="navigateTo('/')" @click="navigateTo('/')"
> >
<MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" /> <component :is="iconMap.chevronLeft" class="text-black group-hover:(text-accent scale-110)" />
</div> </div>
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.createProject') }}</h1> <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.createProject') }}</h1>

3
packages/nc-gui/pages/index/index/create.vue

@ -6,6 +6,7 @@ import type { ProjectType } from 'nocodb-sdk'
import { import {
extractSdkResponseErrorMsg, extractSdkResponseErrorMsg,
generateUniqueName, generateUniqueName,
iconMap,
message, message,
navigateTo, navigateTo,
nextTick, nextTick,
@ -77,7 +78,7 @@ onMounted(async () => {
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer" class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
@click="navigateTo('/')" @click="navigateTo('/')"
> >
<MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" /> <component :is="iconMap.chevronLeft" class="text-black group-hover:(text-accent scale-110)" />
</div> </div>
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.createProject') }}</h1> <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.createProject') }}</h1>

10
packages/nc-gui/pages/index/index/index.vue

@ -165,7 +165,8 @@ const copyProjectMeta = async () => {
class="transition-all duration-200 h-full flex-0 flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1" class="transition-all duration-200 h-full flex-0 flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
:class="isLoading ? 'animate-spin ring ring-gray-200' : ''" :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
> >
<MdiRefresh <component
:is="iconMap.reload"
v-e="['a:project:refresh']" v-e="['a:project:refresh']"
class="text-xl text-gray-500 group-hover:text-accent cursor-pointer" class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
:class="isLoading ? '!text-primary' : ''" :class="isLoading ? '!text-primary' : ''"
@ -260,7 +261,12 @@ const copyProjectMeta = async () => {
<a-table-column key="id" :title="$t('labels.actions')" data-index="id"> <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
<template #default="{ text, record }"> <template #default="{ text, record }">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<MdiEditOutline v-e="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" /> <component
:is="iconMap.edit"
v-e="['c:project:edit:rename']"
class="nc-action-btn"
@click.stop="navigateTo(`/${text}`)"
/>
<component <component
:is="iconMap.delete" :is="iconMap.delete"

6
packages/nc-gui/pages/index/index/user.vue

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { RuleObject } from 'ant-design-vue/es/form' import type { RuleObject } from 'ant-design-vue/es/form'
import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useRouter } from '#imports' import { iconMap, message, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useRouter } from '#imports'
const router = useRouter() const router = useRouter()
@ -78,7 +78,7 @@ const resetError = () => {
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer" class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
@click="() => router.back()" @click="() => router.back()"
> >
<MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" /> <component :is="iconMap.chevronLeft" class="text-black group-hover:(text-accent scale-110)" />
</div> </div>
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.changePwd') }}</h1> <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.changePwd') }}</h1>
@ -137,7 +137,7 @@ const resetError = () => {
<div class="text-center"> <div class="text-center">
<button data-testid="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit"> <button data-testid="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit">
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<MdiKeyChange /> <component :is="iconMap.passwordChange" />
{{ $t('activity.changePwd') }} {{ $t('activity.changePwd') }}
</span> </span>
</button> </button>

3
packages/nc-gui/pages/projects/index.vue

@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n'
import { extractSdkResponseErrorMsg, iconMap, navigateTo, useNuxtApp, useRoute } from '#imports' import { extractSdkResponseErrorMsg, iconMap, navigateTo, useNuxtApp, useRoute } from '#imports'
import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded' import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
import MaterialSymbolsGridView from '~icons/material-symbols/grid-view' import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
import MdiDatabaseOutline from '~icons/mdi/database-outline'
import MdiFolderOutline from '~icons/mdi/folder-outline' import MdiFolderOutline from '~icons/mdi/folder-outline'
const { t } = useI18n() const { t } = useI18n()
@ -85,7 +84,7 @@ const deleteProject = (project: ProjectType) => {
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2" class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/project/create-external')" @click="navigateTo('/project/create-external')"
> >
<MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" /> <component :is="iconMap.database" class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
<div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" /> <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
</div> </div>
</v-list> </v-list>

9
packages/nc-gui/pages/projects/index/index.vue

@ -1,9 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ProjectType } from 'nocodb-sdk' import type { ProjectType } from 'nocodb-sdk'
import { iconMap, navigateTo, useColors, useNuxtApp } from '#imports' import { iconMap, navigateTo, useColors, useNuxtApp } from '#imports'
import MdiMenuDown from '~icons/mdi/menu-down'
import MdiDatabaseOutline from '~icons/mdi/database-outline'
import MdiEditOutline from '~icons/mdi/edit-outline'
interface Props { interface Props {
projects?: ProjectType[] projects?: ProjectType[]
@ -58,7 +55,7 @@ const formatTitle = (title?: string) =>
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2" class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/project/create-external')" @click="navigateTo('/project/create-external')"
> >
<MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" /> <component :is="iconMap.dtabase" class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
<div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" /> <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
</div> </div>
</v-list> </v-list>
@ -69,7 +66,7 @@ const formatTitle = (title?: string) =>
<div class="thumbnail" :style="{ '--thumbnail-color': getColorByIndex(i) }" @click="openProject(project)"> <div class="thumbnail" :style="{ '--thumbnail-color': getColorByIndex(i) }" @click="openProject(project)">
{{ formatTitle(project.title) }} {{ formatTitle(project.title) }}
<a-dropdown overlay-class-name="nc-dropdown-project-operations" @click.stop> <a-dropdown overlay-class-name="nc-dropdown-project-operations" @click.stop>
<MdiMenuDown class="menu-icon" /> <component :is="iconMap.arrowDown" class="menu-icon" />
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item @click.stop="emit('delete-project', project)"> <a-menu-item @click.stop="emit('delete-project', project)">
@ -80,7 +77,7 @@ const formatTitle = (title?: string) =>
</a-menu-item> </a-menu-item>
<a-menu-item @click.stop="navigateTo(`/project/${project.id}`)"> <a-menu-item @click.stop="navigateTo(`/project/${project.id}`)">
<div class="grid grid-cols-6 cursor-pointer flex items-center p-2"> <div class="grid grid-cols-6 cursor-pointer flex items-center p-2">
<MdiEditOutline class="col-span-2 mr-1 mt-[1px] text-primary text-lg" /> <component :is="iconMap.edit" class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
<div class="col-span-4 text-sm xl:text-md">{{ $t('general.edit') }}</div> <div class="col-span-4 text-sm xl:text-md">{{ $t('general.edit') }}</div>
</div> </div>
</a-menu-item> </a-menu-item>

7
packages/nc-gui/pages/projects/index/list.vue

@ -1,7 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ProjectType } from 'nocodb-sdk' import type { ProjectType } from 'nocodb-sdk'
import { iconMap, navigateTo } from '#imports' import { iconMap, navigateTo } from '#imports'
import MdiEditOutline from '~icons/mdi/edit-outline'
interface Props { interface Props {
projects?: ProjectType[] projects?: ProjectType[]
@ -42,7 +41,11 @@ const openProject = async (project: ProjectType) => {
class="text-gray-500 hover:text-red-500 mr-2" class="text-gray-500 hover:text-red-500 mr-2"
@click.stop="emit('delete-project', project)" @click.stop="emit('delete-project', project)"
/> />
<MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop="navigateTo(`/project/${project.id}`)" /> <component
:is="iconMap.edit"
class="text-gray-500 hover:text-primary mr-2"
@click.stop="navigateTo(`/project/${project.id}`)"
/>
</div> </div>
</div> </div>
<div class="col-span-3 w-full h-[1px] bg-gray-500/30" /> <div class="col-span-3 w-full h-[1px] bg-gray-500/30" />

15
packages/nc-gui/pages/signin.vue

@ -1,6 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import type { RuleObject } from 'ant-design-vue/es/form' import type { RuleObject } from 'ant-design-vue/es/form'
import { definePageMeta, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useSidebar, validateEmail } from '#imports' import {
definePageMeta,
iconMap,
navigateTo,
reactive,
ref,
useApi,
useGlobal,
useI18n,
useSidebar,
validateEmail,
} from '#imports'
definePageMeta({ definePageMeta({
requiresAuth: false, requiresAuth: false,
@ -114,7 +125,7 @@ function resetError() {
<div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center"> <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
<button data-testid="nc-form-signin__submit" class="scaling-btn bg-opacity-100" type="submit"> <button data-testid="nc-form-signin__submit" class="scaling-btn bg-opacity-100" type="submit">
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<MdiLogin /> <component :is="iconMap.signin" />
{{ $t('general.signIn') }} {{ $t('general.signIn') }}
</span> </span>
</button> </button>

57
packages/nc-gui/utils/iconUtils.ts

@ -53,7 +53,6 @@ import CalendarIcon from '~icons/ph/calendar-blank-light'
import SingleSelectIcon from '~icons/ph/caret-circle-down-light' import SingleSelectIcon from '~icons/ph/caret-circle-down-light'
import DatetimeIcon from '~icons/ph/calendar-light' import DatetimeIcon from '~icons/ph/calendar-light'
import GeoDataIcon from '~icons/ph/map-pin-light' import GeoDataIcon from '~icons/ph/map-pin-light'
import RatingIcon from '~icons/ph/star-light'
import GenericIcon from '~icons/ph/square-light' import GenericIcon from '~icons/ph/square-light'
import NumericIcon from '~icons/ph/number-square-one-light' import NumericIcon from '~icons/ph/number-square-one-light'
import EmailIcon from '~icons/ph/envelope-light' import EmailIcon from '~icons/ph/envelope-light'
@ -63,6 +62,7 @@ import DecimalIcon from '~icons/mdi/decimal'
import DurationIcon from '~icons/ph/clock-clockwise-light' import DurationIcon from '~icons/ph/clock-clockwise-light'
import PhFunctiontone from '~icons/ph/function-light' import PhFunctiontone from '~icons/ph/function-light'
import PhQrCodeThin from '~icons/ph/qr-code-light' import PhQrCodeThin from '~icons/ph/qr-code-light'
import MdiQrcodeScan from '~icons/mdi/qrcode-scan'
import PhBarcodeThin from '~icons/ph/barcode-light' import PhBarcodeThin from '~icons/ph/barcode-light'
import PhCalculatorThin from '~icons/ph/calculator-light' import PhCalculatorThin from '~icons/ph/calculator-light'
import PhEyeSlashThin from '~icons/ph/eye-slash-light' import PhEyeSlashThin from '~icons/ph/eye-slash-light'
@ -116,10 +116,50 @@ import PhCloudLightningThin from '~icons/ph/cloud-lightning-light'
import PhListBulletsThin from '~icons/ph/list-bullets-light' import PhListBulletsThin from '~icons/ph/list-bullets-light'
import PhBracketsAngleThin from '~icons/ph/brackets-angle-light' import PhBracketsAngleThin from '~icons/ph/brackets-angle-light'
import MdiExitToApp from '~icons/mdi/exit-to-app' import MdiExitToApp from '~icons/mdi/exit-to-app'
import MdiKeyChange from '~icons/mdi/key-change'
import MdiMapMarker from '~icons/mdi/map-marker'
import MdiGpsFixed from '~icons/mdi/gps-fixed'
import MdiPlusThick from '~icons/mdi/plus-thick'
import MdiDragVertical from '~icons/mdi/drag-vertical'
import MdiFileUploadOutline from '~icons/mdi/file-upload-outline'
import MdiDrag from '~icons/mdi/drag'
import MdiCommentTextOutline from '~icons/mdi/comment-text-outline'
import MdiContentSave from '~icons/mdi/content-save'
import MdiContentSaveEdit from '~icons/mdi/content-save-edit'
import PhSortDescendingThin from '~icons/ph/sort-descending-light'
import PhStar from '~icons/ph/star-light'
import MdiTableColumnPlusAfter from '~icons/mdi/table-column-plus-after'
import MdiTableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
import PhExportLight from '~icons/ph/export-light'
import MdiTableKey from '~icons/mdi/table-key'
import MdiDramaMasks from '~icons/mdi/drama-masks'
import MdiEmailArrowRightOutline from '~icons/mdi/email-arrow-right-outline'
import MdiCloseThick from '~icons/mdi/close-thick'
import MdiLinkVariantRemove from '~icons/mdi/link-variant-remove'
import MdiChevronLeft from '~icons/mdi/chevron-left'
import MdiChevronRight from '~icons/mdi/chevron-right'
import MdiFileImageBox from '~icons/mdi/file-image-box'
export const iconMap = { export const iconMap = {
chevronLeft: MdiChevronLeft,
chevronRight: MdiChevronRight,
imagePlaceholder: MdiFileImageBox,
linkRemove: MdiLinkVariantRemove,
closeThick: MdiCloseThick,
role: MdiDramaMasks,
tableKey: MdiTableKey,
export: PhExportLight,
colInsertAfter: MdiTableColumnPlusAfter,
colInsertBefore: MdiTableColumnPlusBefore,
star: PhStar,
sortAsc: PhSortAscendingThin,
sortDesc: PhSortDescendingThin,
contentSaveExit: MdiContentSave,
contentSaveStay: MdiContentSaveEdit,
exit: MdiExitToApp, exit: MdiExitToApp,
snippet: PhBracketsAngleThin, snippet: PhBracketsAngleThin,
embed: PhBracketsAngleThin,
list: PhListBulletsThin, list: PhListBulletsThin,
cloud: PhCloudLightningThin, cloud: PhCloudLightningThin,
apiAndSupport: PhChatTextThin, apiAndSupport: PhChatTextThin,
@ -152,6 +192,7 @@ export const iconMap = {
plus: PhPlusThin, plus: PhPlusThin,
search: PhSearchThin, search: PhSearchThin,
copy: PhCopySimpleThin, copy: PhCopySimpleThin,
duplicate: PhCopySimpleThin,
clipboard: PhClipboardThin, clipboard: PhClipboardThin,
settings: PhGearThin, settings: PhGearThin,
image: PhImageThin, image: PhImageThin,
@ -179,10 +220,11 @@ export const iconMap = {
multiSelect: PhListBulletsThin, multiSelect: PhListBulletsThin,
datetime: DatetimeIcon, datetime: DatetimeIcon,
geoData: GeoDataIcon, geoData: GeoDataIcon,
rating: RatingIcon, rating: PhStar,
generic: GenericIcon, generic: GenericIcon,
numeric: NumericIcon, numeric: NumericIcon,
email: EmailIcon, email: EmailIcon,
sendEmail: MdiEmailArrowRightOutline,
currency: CurrencyIcon, currency: CurrencyIcon,
percent: PercentIcon, percent: PercentIcon,
decimal: DecimalIcon, decimal: DecimalIcon,
@ -190,9 +232,11 @@ export const iconMap = {
duration: DurationIcon, duration: DurationIcon,
phone: FilePhoneIcon, phone: FilePhoneIcon,
formula: PhFunctiontone, formula: PhFunctiontone,
function: PhFunctiontone,
key: KeyIcon, key: KeyIcon,
json: PhBracketsCurlyThin, json: PhBracketsCurlyThin,
qrCode: PhQrCodeThin, qrCode: PhQrCodeThin,
qrCodeScan: MdiQrcodeScan,
barCode: PhBarcodeThin, barCode: PhBarcodeThin,
calculator: PhCalculatorThin, calculator: PhCalculatorThin,
rollup: PhLifebuoyThin, rollup: PhLifebuoyThin,
@ -223,6 +267,15 @@ export const iconMap = {
mm: MMIcon, mm: MMIcon,
hm: HMIcon, hm: HMIcon,
bt: BTIcon, bt: BTIcon,
passwordChange: MdiKeyChange,
mapMarker: MdiMapMarker,
currentLocation: MdiGpsFixed,
plusThick: MdiPlusThick,
dragVertical: MdiDragVertical,
databaseSync: MdiDatabaseSync,
fileUpload: MdiFileUploadOutline,
drag: MdiDrag,
comment: MdiCommentTextOutline,
} as const } as const
export const getMdiIcon = (type: string): any => { export const getMdiIcon = (type: string): any => {

Loading…
Cancel
Save