github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui-v2): add `EditModeInj` and replace string key injection

pull/2972/head
braks 2 years ago
parent
e3575f5046
commit
109938673e
15 changed files with 145 additions and 572 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      packages/nc-gui-v2/components.d.ts
  2. 166
      packages/nc-gui-v2/components/cell/Attachment.vue
  3. 34
      packages/nc-gui-v2/components/cell/Currency.vue
  4. 9
      packages/nc-gui-v2/components/cell/Email.vue
  5. 13
      packages/nc-gui-v2/components/cell/Float.vue
  6. 15
      packages/nc-gui-v2/components/cell/Integer.vue
  7. 13
      packages/nc-gui-v2/components/cell/JsonEditableCell.vue
  8. 54
      packages/nc-gui-v2/components/cell/MultiSelect.vue
  9. 35
      packages/nc-gui-v2/components/cell/SingleSelect.vue
  10. 53
      packages/nc-gui-v2/components/cell/Text.vue
  11. 31
      packages/nc-gui-v2/components/cell/TextArea.vue
  12. 18
      packages/nc-gui-v2/components/cell/Url.vue
  13. 191
      packages/nc-gui-v2/components/smartsheet/Cell.vue
  14. 78
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  15. 1
      packages/nc-gui-v2/context/index.ts

6
packages/nc-gui-v2/components.d.ts vendored
Unescape View File

@ -8,7 +8,6 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
AAlert: typeof import('ant-design-vue/es')['Alert']
AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
AButton: typeof import('ant-design-vue/es')['Button']
ACard: typeof import('ant-design-vue/es')['Card']
@ -20,7 +19,6 @@ declare module '@vue/runtime-core' {
ADivider: typeof import('ant-design-vue/es')['Divider']
ADrawer: typeof import('ant-design-vue/es')['Drawer']
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
AForm: typeof import('ant-design-vue/es')['Form']
AFormItem: typeof import('ant-design-vue/es')['FormItem']
AInput: typeof import('ant-design-vue/es')['Input']
@ -46,20 +44,16 @@ declare module '@vue/runtime-core' {
ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
ASpace: typeof import('ant-design-vue/es')['Space']
ASpin: typeof import('ant-design-vue/es')['Spin']
ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
ASwitch: typeof import('ant-design-vue/es')['Switch']
ATable: typeof import('ant-design-vue/es')['Table']
ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
ATableColumnGroup: typeof import('ant-design-vue/es')['TableColumnGroup']
ATabPane: typeof import('ant-design-vue/es')['TabPane']
ATabs: typeof import('ant-design-vue/es')['Tabs']
ATag: typeof import('ant-design-vue/es')['Tag']
ATextarea: typeof import('ant-design-vue/es')['Textarea']
ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
RouterLink: typeof import('vue-router')['RouterLink']

166
packages/nc-gui-v2/components/cell/Attachment.vue
Unescape View File

@ -1,8 +1,8 @@
<script setup lang="ts">
import { useToast } from 'vue-toastification'
import { inject, ref, useProject, watchEffect } from '#imports'
import { inject, reactive, ref, useProject, watchEffect } from '#imports'
import { useNuxtApp } from '#app'
import { ColumnInj, MetaInj } from '~/context'
import { ColumnInj, EditModeInj, MetaInj } from '~/context'
import { NOCO } from '~/lib'
import { isImage } from '~/utils'
import MaterialPlusIcon from '~icons/mdi/plus'
@ -20,7 +20,7 @@ const isPublicForm = inject<boolean>('isPublicForm', false)
const isForm = inject<boolean>('isForm', false)
const meta = inject(MetaInj)
const column = inject(ColumnInj)
const editEnabled = inject<boolean>('editEnabled', false)
const editEnabled = inject(EditModeInj, ref(false))
const localFilesState = reactive([])
const attachments = ref([])
@ -28,7 +28,9 @@ const uploading = ref(false)
const fileInput = ref<HTMLInputElement>()
const { $api } = useNuxtApp()
const { project } = useProject()
const toast = useToast()
watchEffect(() => {
@ -97,15 +99,12 @@ const onFileSelection = async (e: unknown) => {
}
uploading.value = false
emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
// this.$emit('input', JSON.stringify(this.localState))
// this.$emit('update')
}
</script>
<template>
<div class="main h-100">
<div class="d-flex align-center img-container">
<div class="h-full w-full">
<div class="flex items-center img-container">
<div class="d-flex no-overflow">
<div
v-for="(item, i) in isPublicForm ? localFilesState : attachments"
@ -156,13 +155,11 @@ const onFileSelection = async (e: unknown) => {
<MaterialPlusIcon />
</div>
<v-spacer />
<MaterialArrowExpandIcon @click.stop="dialog = true" />
<!-- <v-icon class="expand-icon mr-1" x-small color="primary" @click.stop="dialog = true"> mdi-arrow-expand </v-icon> -->
</div>
<input ref="fileInput" type="file" multiple class="d-none" @change="onFileSelection" />
<input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelection" />
</div>
</template>
@ -188,151 +185,4 @@ const onFileSelection = async (e: unknown) => {
.expand-icon:hover {
background-color: var(--v-primary-lighten4);
}
/*.img-container {
margin: 0 -2px;
}
.no-overflow {
overflow: hidden;
}
.add {
transition: 0.2s background-color;
!*background-color: #666666ee;*!
border-radius: 4px;
height: 33px;
margin: 5px 2px;
}
.add:hover {
!*background-color: #66666699;*!
}
.thumbnail {
height: 99px;
width: 99px;
margin: 2px;
border-radius: 4px;
}
.thumbnail img {
!*max-height: 33px;*!
max-width: 99px;
}
.main {
min-height: 20px;
position: relative;
height: auto;
}
.expand-icon {
margin-left: 8px;
border-radius: 2px;
!*opacity: 0;*!
transition: 0.3s background-color;
}
.expand-icon:hover {
!*opacity: 1;*!
background-color: var(--v-primary-lighten4);
}
.modal-thumbnail img {
height: 50px;
max-width: 100%;
border-radius: 4px;
}
.modal-thumbnail {
position: relative;
margin: 10px 10px;
}
.remove-icon {
position: absolute;
top: 5px;
right: 5px;
}
.modal-thumbnail-card {
.download-icon {
position: absolute;
bottom: 5px;
right: 5px;
opacity: 0;
transition: 0.4s opacity;
}
&:hover .download-icon {
opacity: 1;
}
}
.image-overlay-container {
max-height: 100vh;
overflow-y: auto;
position: relative;
}
.image-overlay-container .close-icon {
position: fixed;
top: 15px;
right: 15px;
}
.overlay-thumbnail {
transition: 0.4s transform, 0.4s opacity;
opacity: 0.5;
}
.overlay-thumbnail.active {
transform: scale(1.4);
opacity: 1;
}
.overlay-thumbnail:hover {
opacity: 1;
}
.modal-title {
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
overflow: hidden;
}
.modal-thumbnail-card {
transition: 0.4s transform;
}
.modal-thumbnail-card:hover {
transform: scale(1.05);
}
.drop-overlay {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 5px;
background: #aaaaaa44;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.expand-icon {
opacity: 0;
transition: 0.4s opacity;
}
.main:hover .expand-icon {
opacity: 1;
}*/
</style>

34
packages/nc-gui-v2/components/cell/Currency.vue
Unescape View File

@ -1,24 +1,22 @@
<script setup lang="ts">
import { computed, inject } from '#imports'
import { ColumnInj } from '~/context'
import { computed, inject, ref, useVModel } from '#imports'
import { ColumnInj, EditModeInj } from '~/context'
const { modelValue: value } = defineProps<Props>()
interface Props {
modelValue: number
}
const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const column = inject(ColumnInj)
const editEnabled = inject<boolean>('editEnabled')
const editEnabled = inject(EditModeInj, ref(false))
interface Props {
modelValue: number
}
const root = ref<HTMLInputElement>()
const localState = computed({
get: () => value,
set: (val) => emit('update:modelValue', val),
})
const vModel = useVModel(props, 'modelValue', emit)
const currencyMeta = computed(() => {
return {
@ -29,22 +27,20 @@ const currencyMeta = computed(() => {
})
const currency = computed(() => {
try {
return isNaN(value)
? value
return isNaN(vModel.value)
? vModel.value
: new Intl.NumberFormat(currencyMeta?.value?.currency_locale || 'en-US', {
style: 'currency',
currency: currencyMeta?.value?.currency_code || 'USD',
}).format(value)
}).format(vModel.value)
} catch (e) {
return value
return vModel.value
}
})
</script>
<template>
<input v-if="editEnabled" ref="root" v-model="localState" />
<span v-else-if="value">{{ currency }}</span>
<input v-if="editEnabled" ref="root" v-model="vModel" />
<span v-else-if="vModel">{{ currency }}</span>
<span v-else />
</template>
<style scoped></style>

9
packages/nc-gui-v2/components/cell/Email.vue
Unescape View File

@ -1,6 +1,7 @@
<script lang="ts" setup>
import { computed } from '#imports'
import { computed, inject, useVModel } from '#imports'
import { isEmail } from '~/utils'
import { EditModeInj } from '~/context'
interface Props {
modelValue: string
@ -14,13 +15,13 @@ const props = defineProps<Props>()
const emits = defineEmits<Emits>()
const root = ref<HTMLInputElement>()
const editEnabled = inject<boolean>('editEnabled')
const editEnabled = inject(EditModeInj, ref(false))
const vModel = useVModel(props, 'modelValue', emits)
const validEmail = computed(() => isEmail(vModel.value))
const focus = (el: HTMLInputElement) => el.focus()
</script>
<template>

13
packages/nc-gui-v2/components/cell/Float.vue
Unescape View File

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { computed, inject, onMounted, ref } from '#imports'
import { inject, ref, useVModel } from '#imports'
import { EditModeInj } from '~/context'
interface Props {
modelValue: number
@ -13,21 +14,17 @@ const props = defineProps<Props>()
const emits = defineEmits<Emits>()
const editEnabled = inject<boolean>('editEnabled')
const root = ref<HTMLInputElement>()
const editEnabled = inject(EditModeInj, ref(false))
const vModel = useVModel(props, 'modelValue', emits)
onMounted(() => {
root.value?.focus()
})
const focus = (el: HTMLInputElement) => el.focus()
</script>
<template>
<input
v-if="editEnabled"
ref="root"
:ref="focus"
v-model="vModel"
class="outline-none pa-0 border-none w-full h-full prose-sm"
type="number"

15
packages/nc-gui-v2/components/cell/Integer.vue
Unescape View File

@ -1,4 +1,7 @@
<script setup lang="ts">
import { inject, ref, useVModel } from '#imports'
import { EditModeInj } from '~/context'
interface Props {
modelValue: number
}
@ -11,15 +14,11 @@ const props = defineProps<Props>()
const emits = defineEmits<Emits>()
const editEnabled = inject<boolean>('editEnabled')
const root = ref<HTMLInputElement>()
const editEnabled = inject(EditModeInj, ref(false))
const vModel = useVModel(props, 'modelValue', emits)
const vModel = useVModel(props, 'modelValue', emit)
onMounted(() => {
root.value?.focus()
})
const focus = (el: HTMLInputElement) => el.focus()
function onKeyDown(evt: KeyboardEvent) {
return evt.key === '.' && evt.preventDefault()
@ -29,7 +28,7 @@ function onKeyDown(evt: KeyboardEvent) {
<template>
<input
v-if="editEnabled"
ref="root"
:ref="focus"
v-model="vModel"
class="outline-none pa-0 border-none w-full h-full prose-sm"
type="number"

13
packages/nc-gui-v2/components/cell/JsonEditableCell.vue
Unescape View File

@ -1,6 +1,7 @@
<script lang="ts" setup>
import MonacoJsonObjectEditor from '@/components/monaco/Editor.vue'
import { inject } from '#imports'
import { computed, inject } from '#imports'
import { EditModeInj } from '~/context'
interface Props {
modelValue: string | Record<string, any>
@ -11,7 +12,7 @@ const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue', 'cancel'])
const editEnabled = inject('editEnabled')
const editEnabled = inject(EditModeInj)
let expand = $ref(false)
@ -19,7 +20,7 @@ let isValid = $ref(true)
let error = $ref()
const localState = computed({
const vModel = computed({
get: () => (typeof props.modelValue === 'string' ? JSON.parse(props.modelValue) : props.modelValue),
set: (val) => {
if (props.isForm) {
@ -30,7 +31,7 @@ const localState = computed({
function save() {
expand = false
emits('update:modelValue', JSON.stringify(props.modelValue))
emits('update:modelValue', JSON.stringify(vModel.value))
}
function validate(n: boolean, e: any) {
@ -69,14 +70,14 @@ export default {
</div>
<MonacoJsonObjectEditor
v-if="expand"
v-model="localState"
v-model="vModel"
class="text-left caption"
style="width: 300px; min-height: min(600px, 80vh); min-width: 100%"
@validate="validate"
/>
<MonacoJsonObjectEditor
v-else
v-model="localState"
v-model="vModel"
class="text-left caption"
style="width: 300px; min-height: 200px; min-width: 100%"
@validate="validate"

54
packages/nc-gui-v2/components/cell/MultiSelect.vue
Unescape View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { computed, inject } from '#imports'
import { ColumnInj } from '~/context'
import { ColumnInj, EditModeInj } from '~/context'
interface Props {
modelValue: string
@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
const column = inject(ColumnInj)
const isForm = inject<boolean>('isForm', false)
const editEnabled = inject<boolean>('editEnabled', false)
const editEnabled = inject(EditModeInj, ref(false))
const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
@ -24,56 +24,6 @@ const localState = computed({
emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(','))
},
})
/* import colors from '@/components/project/spreadsheet/helpers/colors'
export default {
name: 'SetListCheckboxCell',
props: {
value: String,
column: Object,
values: Array,
},
data() {},
computed: {
colors() {
return this.$store.state.settings.darkTheme ? colors.dark : colors.light
},
localState: {
get() {
return (this.value && this.value.split(',')) || []
},
set(val) {
this.$emit('input', val.join(','))
this.$emit('update')
},
},
setValues() {
if (this.column && this.column.dtxp) {
return this.column.dtxp.split(',').map((v) => v.replace(/^'|'$/g, ''))
}
return this.values || []
},
parentListeners() {
const $listeners = {}
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus
}
return $listeners
},
},
mounted() {
this.$el.focus()
const event = document.createEvent('MouseEvents')
event.initMouseEvent('mousedown', true, true, window)
this.$el.dispatchEvent(event)
},
} */
</script>
<template>

35
packages/nc-gui-v2/components/cell/SingleSelect.vue
Unescape View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { computed, inject } from '#imports'
import { ColumnInj } from '~/context'
import { ColumnInj, EditModeInj } from '~/context'
interface Props {
modelValue: string
@ -12,45 +12,18 @@ const emit = defineEmits(['update:modelValue'])
const column = inject(ColumnInj)
const isForm = inject<boolean>('isForm', false)
const editEnabled = inject<boolean>('editEnabled', false)
const editEnabled = inject(EditModeInj, ref(false))
const localState = computed({
const vModel = computed({
get: () => modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, ''),
set: (val) => emit('update:modelValue', val),
})
const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
/* import colors from '@/mixins/colors'
export default {
name: 'EnumListEditableCell',
mixins: [colors],
props: {
value: String,
column: Object,
isForm: Boolean,
},
computed: {
parentListeners() {
const $listeners = {}
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus
}
return $listeners
},
},
} */
</script>
<template>
<v-select v-model="localState" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
<v-select v-model="vModel" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
<!-- v-on="parentListeners"
<template #selection="{ item }">
<div

53
packages/nc-gui-v2/components/cell/Text.vue
Unescape View File

@ -1,28 +1,57 @@
<script setup lang="ts">
import { inject, onMounted, ref } from '#imports'
import { inject, ref, useVModel } from '#imports'
import { EditModeInj } from '~/context'
interface Props {
modelValue: any
modelValue: string
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const emit = defineEmits(['update:modelValue'])
const editEnabled = inject<boolean>('editEnabled', false)
const editEnabled = inject(EditModeInj, ref(false))
const root = ref<HTMLInputElement>()
const vModel = useVModel(props, 'modelValue', emit)
const vModel = useVModel(props, 'modelValue', emits)
const onSetRef = (el: HTMLInputElement) => {
el.focus()
}
const focus = (el: HTMLInputElement) => el.focus()
</script>
<template>
<input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" />
<input v-if="editEnabled" :ref="focus" v-model="vModel" />
<span v-else>{{ vModel }}</span>
</template>
<style scoped></style>
<style scoped>
input,
textarea {
width: 100%;
height: 100%;
color: var(--v-textColor-base);
outline: none;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

31
packages/nc-gui-v2/components/cell/TextArea.vue
Unescape View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, inject, onMounted, ref } from '#imports'
import { inject, ref, useVModel } from '#imports'
import { EditModeInj } from '~/context'
interface Props {
modelValue?: string
@ -7,32 +8,26 @@ interface Props {
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const emit = defineEmits(['update:modelValue'])
const editEnabled = inject<boolean>('editEnabled', false)
const editEnabled = inject(EditModeInj, ref(false))
const vModel = useVModel(props, 'modelValue', emits)
const vModel = useVModel(props, 'modelValue', emit)
const onSetRef = (el: HTMLInputElement) => {
el.focus()
}
const focus = (el: HTMLTextAreaElement) => el.focus()
</script>
<template>
<textarea
v-if="editEnabled"
:ref="onSetRef"
v-model="vModel"
rows="4"
class="h-full w-full min-h-[60px] outline-none"
@keydown.alt.enter.stop
@keydown.shift.enter.stop
/>
<textarea v-if="editEnabled" :ref="focus" v-model="vModel" rows="4" @keydown.alt.enter.stop @keydown.shift.enter.stop />
<span v-else>{{ vModel }}</span>
</template>
<style scoped>
textarea:focus {
@apply ring-transparent;
input,
textarea {
width: 100%;
min-height: 60px;
height: 100%;
color: var(--v-textColor-base);
}
</style>

18
packages/nc-gui-v2/components/cell/Url.vue
Unescape View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, ref } from '#imports'
import { ColumnInj } from '~/context'
import { isValidURL } from '~/utils/urlUtils'
import { computed, inject, onMounted, ref } from '#imports'
import { ColumnInj, EditModeInj } from '~/context'
import { isValidURL } from '~/utils'
interface Props {
modelValue: string
@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
const column = inject(ColumnInj)
const editEnabled = inject<boolean>('editEnabled')
const editEnabled = inject(EditModeInj, ref(false))
const vModel = computed({
get: () => value,
@ -26,21 +26,15 @@ const vModel = computed({
const isValid = computed(() => value && isValidURL(value))
const root = ref<HTMLInputElement>()
onMounted(() => {
root.value?.focus()
})
const focus = (el: HTMLInputElement) => el.focus()
</script>
<template>
<input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none" />
<input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" />
<nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
<span v-else>{{ value }}</span>
</template>
<style scoped></style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd

191
packages/nc-gui-v2/components/smartsheet/Cell.vue
Unescape View File

@ -1,30 +1,25 @@
<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import { provide } from 'vue'
import { computed, useColumn } from '#imports'
import { useColumn, useVModel } from '#imports'
import { ColumnInj } from '~/context'
interface Props {
column: ColumnType
modelValue: any
editEnabled: boolean
}
const { column, modelValue: value, editEnabled } = defineProps<Props>()
interface Emits {
(event: 'update:modelValue', value: any): void
}
const emit = defineEmits(['update:modelValue'])
const { column, ...rest } = defineProps<Props>()
provide(ColumnInj, column)
const emit = defineEmits<Emits>()
provide(
'editEnabled',
computed(() => editEnabled),
)
provide(ColumnInj, column)
const localState = computed({
get: () => value,
set: (val) => emit('update:modelValue', val),
})
const vModel = useVModel(rest, 'modelValue', emit)
const {
isURL,
@ -53,155 +48,27 @@ const {
<template>
<div class="nc-cell" @keydown.stop.left @keydown.stop.right @keydown.stop.up @keydown.stop.down>
<!--
todo :
JSONCell
-->
<!-- <RatingCell -->
<!-- v-if="isRating" -->
<!-- /> -->
<!-- v-model="localState"
:active="active"
:is-form="isForm"
:column="column"
:is-public-grid="isPublic && !isForm"
:is-public-form="isPublic && isForm"
:is-locked="isLocked"
v-on="$listeners"
/> -->
<!-- <DurationCell -->
<!-- v-else-if="isDuration" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :active="active" -->
<!-- :is-form="isForm" -->
<!-- :column="column" -->
<!-- :is-locked="isLocked" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<!-- <DatePickerCell -->
<!-- v-else-if="isDate" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<!-- <TimePickerCell -->
<!-- v-else-if="isTime" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- v-on="parentListeners" -->
<!-- @save="$emit('save')" -->
<!-- />&ndash;&gt; -->
<!-- <DateTimePickerCell -->
<!-- v-else-if="isDateTime" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- ignore-focus -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<!-- <EnumCell -->
<!-- v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :column="column" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<!-- <EnumListCell -->
<!-- v-else-if="isEnum" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState"&ndash;&gt; -->
<!-- &lt;!&ndash; :is-form="isForm"&ndash;&gt; -->
<!-- &lt;!&ndash; :column="column"&ndash;&gt; -->
<!-- &lt;!&ndash; v-on="parentListeners"&ndash;&gt; -->
<!-- &lt;!&ndash; />&ndash;&gt; -->
<!-- <JsonEditableCell -->
<!-- v-else-if="isJSON" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :is-form="isForm" -->
<!-- v-on="parentListeners" -->
<!-- @input="$emit('save')" -->
<!-- />&ndash;&gt; -->
<!-- <SetListEditableCell -->
<!-- v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :column="column" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<!-- <SetListCell -->
<!-- v-else-if="isSet" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :column="column" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<!-- <UrlCell v-else-if="isURL" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" v-on="parentListeners" &ndash;&gt; -->
<!-- &lt;!&ndash; />&ndash;&gt; -->
<CellTextArea v-if="isTextArea" v-model="localState" />
<!-- v-model="localState"
:is-form="isForm"
v-on="parentListeners"
/> -->
<CellCheckbox v-else-if="isBoolean" v-model="localState" />
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :column="column" -->
<!-- :is-form="isForm" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<CellAttachment v-else-if="isAttachment" v-model="localState" />
<CellSingleSelect v-else-if="isSingleSelect" v-model="localState" />
<CellMultiSelect v-else-if="isMultiSelect" v-model="localState" />
<CellDatePicker v-else-if="isDate" v-model="localState" />
<CellYearPicker v-else-if="isYear" v-model="localState" />
<CellDateTimePicker v-else-if="isDateTime" v-model="localState" />
<CellTimePicker v-else-if="isTime" v-model="localState" />
<CellRating v-else-if="isRating" v-model="localState" />
<!-- v-model="localState"
:active="active"
:db-alias="dbAlias"
:meta="meta"
:is-form="isForm"
:column="column"
:is-public-grid="isPublic && !isForm"
:is-public-form="isPublic && isForm"
:view-id="viewId"
:is-locked="isLocked"
v-on="$listeners"
/> -->
<CellDuration v-else-if="isDuration" v-model="localState" />
<CellEmail v-else-if="isEmail" v-model="localState" />
<CellUrl v-else-if="isURL" v-model="localState" />
<CellPhoneNumber v-else-if="isPhoneNumber" v-model="localState" />
<!-- v-on="parentListeners"
/>
-->
<CellCurrency v-else-if="isCurrency" v-model="localState" />
<CellDecimal v-else-if="isDecimal" v-model="localState" />
<CellInteger v-else-if="isInt" v-model="localState" />
<CellFloat v-else-if="isFloat" v-model="localState" />
<CellText v-else-if="isString" v-model="localState" />
<!-- v-on="parentListeners"
/>
-->
<CellPercent v-else-if="isPercent" v-model="localState" />
<CellText v-else v-model="localState" />
<!-- v-on="$listeners" <span v-if="hint" class="nc-hint">{{ hint }}</span> -->
<!-- <div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" /> -->
<CellTextArea v-if="isTextArea" v-model="vModel" />
<CellCheckbox v-else-if="isBoolean" v-model="vModel" />
<CellAttachment v-else-if="isAttachment" v-model="vModel" />
<CellSingleSelect v-else-if="isSingleSelect" v-model="vModel" />
<CellMultiSelect v-else-if="isMultiSelect" v-model="vModel" />
<CellDatePicker v-else-if="isDate" v-model="vModel" />
<CellYearPicker v-else-if="isYear" v-model="vModel" />
<CellDateTimePicker v-else-if="isDateTime" v-model="vModel" />
<CellTimePicker v-else-if="isTime" v-model="vModel" />
<CellRating v-else-if="isRating" v-model="vModel" />
<CellDuration v-else-if="isDuration" v-model="vModel" />
<CellEmail v-else-if="isEmail" v-model="vModel" />
<CellUrl v-else-if="isURL" v-model="vModel" />
<CellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" />
<CellCurrency v-else-if="isCurrency" v-model="vModel" />
<CellDecimal v-else-if="isDecimal" v-model="vModel" />
<CellInteger v-else-if="isInt" v-model="vModel" />
<CellFloat v-else-if="isFloat" v-model="vModel" />
<CellText v-else-if="isString" v-model="vModel" />
<CellPercent v-else-if="isPercent" v-model="vModel" />
<CellText v-else v-model="vModel" />
</div>
</template>

78
packages/nc-gui-v2/components/smartsheet/Grid.vue
Unescape View File

@ -12,6 +12,7 @@ import {
import {
ActiveViewInj,
ChangePageInj,
EditModeInj,
FieldsInj,
IsFormInj,
IsGridInj,
@ -44,6 +45,7 @@ provide(IsFormInj, false)
provide(IsGridInj, true)
provide(PaginationDataInj, paginationData)
provide(ChangePageInj, changePage)
provide(EditModeInj, editEnabled)
const reloadViewDataHook = inject(ReloadViewDataHookInj)
reloadViewDataHook?.on(() => {
@ -142,68 +144,6 @@ if (meta) useProvideColumnCreateStore(meta)
@click="selectCell(rowIndex, colIndex)"
@dblclick="editEnabled = true"
>
<!-- @contextmenu=" -->
<!-- showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj) -->
<!-- " -->
<!-- > -->
<!-- <virtual-cell -->
<!-- v-if="isVirtualCol(columnObj)" -->
<!-- :password="password" -->
<!-- :is-public="isPublicView" -->
<!-- :metas="metas" -->
<!-- :is-locked="isLocked" -->
<!-- :column="columnObj" -->
<!-- :row="rowObj" -->
<!-- :nodes="nodes" -->
<!-- :meta="meta" -->
<!-- :api="api" -->
<!-- :active="selected.col === col && selected.row === row" -->
<!-- :sql-ui="sqlUi" -->
<!-- :is-new="rowMeta.new" -->
<!-- v-on="$listeners" -->
<!-- @updateCol=" -->
<!-- (...args) => -->
<!-- updateCol( -->
<!-- ...args, -->
<!-- columnObj.bt -->
<!-- && meta.columns.find( -->
<!-- (c) => c.column_name === columnObj.bt.column_name, -->
<!-- ), -->
<!-- col, -->
<!-- row, -->
<!-- ) -->
<!-- " -->
<!-- @saveRow="onCellValueChange(col, row, columnObj, true)" -->
<!-- /> -->
<!-- <editable-cell -->
<!-- v-else-if=" -->
<!-- ((isPkAvail || rowMeta.new) -->
<!-- && !isView -->
<!-- && !isLocked -->
<!-- && !isPublicView -->
<!-- && editEnabled.col === col -->
<!-- && editEnabled.row === row) -->
<!-- || enableEditable(columnObj) -->
<!-- " -->
<!-- v-model="rowObj[columnObj.title]" -->
<!-- :column="columnObj" -->
<!-- :meta="meta" -->
<!-- :active="selected.col === col && selected.row === row" -->
<!-- :sql-ui="sqlUi" -->
<!-- :db-alias="nodes.dbAlias" -->
<!-- :is-locked="isLocked" -->
<!-- :is-public="isPublicView" -->
<!-- :view-id="viewId" -->
<!-- @save="editEnabled = {}; onCellValueChange(col, row, columnObj, true);" -->
<!-- @cancel="editEnabled = {}" -->
<!-- @update="onCellValueChange(col, row, columnObj, false)" -->
<!-- @blur="onCellValueChange(col, row, columnObj, true)" -->
<!-- @input="unsaved = true" -->
<!-- @navigateToNext="navigateToNext" -->
<!-- @navigateToPrev="navigateToPrev" -->
<!-- /> -->
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
<SmartsheetCell
@ -213,20 +153,6 @@ if (meta) useProvideColumnCreateStore(meta)
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
@update:model-value="updateRowProperty(row, columnObj.title)"
/>
<!-- <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->
<!-- :selected="selected.col === col && selected.row === row" -->
<!-- :is-locked="isLocked" -->
<!-- :column="columnObj" -->
<!-- :meta="meta" -->
<!-- :db-alias="nodes.dbAlias" -->
<!-- :value="rowObj[columnObj.title]" -->
<!-- :sql-ui="sqlUi" -->
<!-- @enableedit=" -->
<!-- makeSelected(col, row); -->
<!-- makeEditable(col, row, columnObj.ai, rowMeta); -->
<!-- " -->
<!-- /> -->
</td>
</tr>
</tbody>

1
packages/nc-gui-v2/context/index.ts
Unescape View File

@ -21,3 +21,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')

Write Preview
Loading…
Cancel
Save