Browse Source

feat(gui-v2): url cell

pull/2716/head
Wing-Kam Wong 2 years ago committed by Pranav C
parent
commit
e6658f92ac
  1. 82
      packages/nc-gui-v2/components/cell/Url.vue

82
packages/nc-gui-v2/components/cell/Url.vue

@ -1,68 +1,54 @@
<script lang="ts">
<script setup lang="ts">
import { ref, computed } from '#imports'
import { ColumnInj } from '~/components'
import { isValidURL } from '~/utils/urlUtils'
const column = inject(ColumnInj)
const editEnabled = inject<boolean>('editEnabled')
/*
import { isValidURL } from '@/helpers'
import { inject } from "vue";
interface Props {
modelValue: string
}
const { modelValue: value } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
export default {
name: 'EditableUrlCell',
props: {
value: String,
column: Object,
const localState = computed({
get: () => value,
set: (val) => {
if (!(column && column.meta && column.meta.validate) || isValidURL(val)) {
emit('update:modelValue', val)
}
},
computed: {
localState: {
get() {
return this.value
},
set(val) {
if (!(this.column && this.column.meta && this.column.meta.validate) || isValidURL(val)) {
this.$emit('input', val)
}
},
},
parentListeners() {
const $listeners = {}
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus
}
})
if (this.$listeners.cancel) {
$listeners.cancel = this.$listeners.cancel
}
const isValid = computed(() => value && isValidURL(value))
return $listeners
},
},
mounted() {
this.$el.focus()
},
} */
const root = ref<HTMLInputElement>()
onMounted(() => {
root.value?.focus()
})
</script>
<template>
<input v-model="localState" v-on="parentListeners" />
<span v-if="editEnabled">
<input ref="root" v-model="localState" />
</span>
<span v-else>
<a class="caption py-2 text-primary underline hover:opacity-75" v-if="isValid" :href="value" target="_blank">{{ value }}</a>
<span v-else>{{ value }}</span>
</span>
</template>
<style scoped>
input,
textarea {
width: 100%;
height: 100%;
color: var(--v-textColor-base);
}
</style>
<style scoped></style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
* @author Wing-Kam Wong <wingkwong.code@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*

Loading…
Cancel
Save