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') const editEnabled = inject<boolean>('editEnabled')
/* interface Props {
import { isValidURL } from '@/helpers' modelValue: string
import { inject } from "vue"; }
const { modelValue: value } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
export default { const localState = computed({
name: 'EditableUrlCell', get: () => value,
props: { set: (val) => {
value: String, if (!(column && column.meta && column.meta.validate) || isValidURL(val)) {
column: Object, 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) { const isValid = computed(() => value && isValidURL(value))
$listeners.cancel = this.$listeners.cancel
}
return $listeners const root = ref<HTMLInputElement>()
}, onMounted(() => {
}, root.value?.focus()
mounted() { })
this.$el.focus()
},
} */
</script> </script>
<template> <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> </template>
<style scoped> <style scoped></style>
input,
textarea {
width: 100%;
height: 100%;
color: var(--v-textColor-base);
}
</style>
<!-- <!--
/** /**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd * @copyright Copyright (c) 2021, Xgene Cloud Ltd
* *
* @author Naveen MR <oof1lab@gmail.com> * @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@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 * @license GNU AGPL version 3 or any later version
* *

Loading…
Cancel
Save