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: .61rem;
  color: grey;
}

.nc-cell {
  position: relative;
}

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