nocodb/packages/nc-gui-v2/components/smartsheet/EditableCell.vue

<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import useColumn from '~/composables/useColumn'

const { column, value } = defineProps<{ column: ColumnType; value: any }>()
provide('column', column)
provide('value', value)

const {
  isSet,
  isEnum,
  isURL,
  isEmail,
  isJSON,
  isDate,
  isDateTime,
  isTime,
  isBoolean,
  isDuration,
  isRating,
  isCurrency,
  isAttachment,
  isTextArea,
} = useColumn(column)
</script>

<template>
  <div class="nc-cell" @keydown.stop.left @keydown.stop.right @keydown.stop.up @keydown.stop.down>
    <EditableAttachmentCell
      v-if="isAttachment"
      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"
    />

    <RatingCell
      v-else-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"
      v-model="localState"
      :active="active"
      :is-form="isForm"
      :column="column"
      :is-locked="isLocked"
      v-on="parentListeners"
    />

    <BooleanCell v-else-if="isBoolean" v-model="localState" :column="column" :is-form="isForm" v-on="parentListeners" />

    <IntegerCell v-else-if="isInt" v-model="localState" v-on="parentListeners" />

    <FloatCell v-else-if="isFloat" v-model="localState" v-on="parentListeners" />

    <DatePickerCell v-else-if="isDate" v-model="localState" v-on="parentListeners" />

    <TimePickerCell v-else-if="isTime" v-model="localState" v-on="parentListeners" @save="$emit('save')" />

    <DateTimePickerCell v-else-if="isDateTime" v-model="localState" ignore-focus v-on="parentListeners" />

    <EnumCell
      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))"
      v-model="localState"
      :column="column"
      v-on="parentListeners"
    />
    <EnumListCell v-else-if="isEnum" v-model="localState" :is-form="isForm" :column="column" v-on="parentListeners" />

    <JsonEditableCell v-else-if="isJSON" v-model="localState" :is-form="isForm" v-on="parentListeners" @input="$emit('save')" />

    <SetListEditableCell
      v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)"
      v-model="localState"
      :column="column"
      v-on="parentListeners"
    />
    <SetListCell v-else-if="isSet" v-model="localState" :column="column" v-on="parentListeners" />

    <EditableUrlCell v-else-if="isURL" v-model="localState" v-on="parentListeners" />

    <TextCell v-else-if="isString" v-model="localState" v-on="parentListeners" />

    <TextAreaCell v-else-if="isTextArea" v-model="localState" :is-form="isForm" v-on="parentListeners" />

    <TextCell 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" />
  </div>
</template>

<style scoped>
div {
  width: 100%;
  height: 100%;
  color: var(--v-textColor-base);
}

.nc-hint {
  font-size: 0.61rem;
  color: grey;
}

.nc-cell {
  position: relative;
}

.nc-locked-overlay {
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
</style>