0351d front end linting (#377)
* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
GitHub
@@ -1,57 +1,133 @@
|
||||
<template>
|
||||
<table :id="'table-' + tableHash" ref="table"
|
||||
class="notion-table n-table whitespace-no-wrap bg-white dark:bg-notion-dark-light relative">
|
||||
<thead :id="'table-header-' + tableHash" ref="header" class="n-table-head top-0"
|
||||
:class="{ 'absolute': data.length !== 0 }" style="will-change: transform; transform: translate3d(0px, 0px, 0px)">
|
||||
<table
|
||||
:id="'table-' + tableHash"
|
||||
ref="table"
|
||||
class="notion-table n-table whitespace-no-wrap bg-white dark:bg-notion-dark-light relative"
|
||||
>
|
||||
<thead
|
||||
:id="'table-header-' + tableHash"
|
||||
ref="header"
|
||||
class="n-table-head top-0"
|
||||
:class="{ absolute: data.length !== 0 }"
|
||||
style="will-change: transform; transform: translate3d(0px, 0px, 0px)"
|
||||
>
|
||||
<tr class="n-table-row overflow-x-hidden">
|
||||
<resizable-th v-for="col, index in columns" :id="'table-head-cell-' + col.id" :key="col.id" scope="col"
|
||||
:allow-resize="allowResize" :width="(col.cell_width ? col.cell_width + 'px' : 'auto')"
|
||||
class="n-table-cell p-0 relative" @resize-width="resizeCol(col, $event)">
|
||||
<resizable-th
|
||||
v-for="(col) in columns"
|
||||
:id="'table-head-cell-' + col.id"
|
||||
:key="col.id"
|
||||
scope="col"
|
||||
:allow-resize="allowResize"
|
||||
:width="col.cell_width ? col.cell_width + 'px' : 'auto'"
|
||||
class="n-table-cell p-0 relative"
|
||||
@resize-width="resizeCol(col, $event)"
|
||||
>
|
||||
<p
|
||||
class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs">
|
||||
class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
|
||||
>
|
||||
{{ col.name }}
|
||||
</p>
|
||||
</resizable-th>
|
||||
<th class="n-table-cell p-0 relative" style="width: 100px">
|
||||
<th
|
||||
class="n-table-cell p-0 relative"
|
||||
style="width: 100px"
|
||||
>
|
||||
<p
|
||||
class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs">
|
||||
class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
|
||||
>
|
||||
Actions
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="data.length > 0" class="n-table-body bg-white dark:bg-notion-dark-light">
|
||||
<tr v-if="objectHas($slots,'actions')" :id="'table-actions-' + tableHash" ref="actions-row"
|
||||
class="action-row absolute w-full" style="will-change: transform; transform: translate3d(0px, 32px, 0px)">
|
||||
<td :colspan="columns.length" class="p-1">
|
||||
<tbody
|
||||
v-if="data.length > 0"
|
||||
class="n-table-body bg-white dark:bg-notion-dark-light"
|
||||
>
|
||||
<tr
|
||||
v-if="objectHas($slots, 'actions')"
|
||||
:id="'table-actions-' + tableHash"
|
||||
ref="actions-row"
|
||||
class="action-row absolute w-full"
|
||||
style="will-change: transform; transform: translate3d(0px, 32px, 0px)"
|
||||
>
|
||||
<td
|
||||
:colspan="columns.length"
|
||||
class="p-1"
|
||||
>
|
||||
<slot name="actions" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="row, index in data" :key="row.id" class="n-table-row" :class="{ 'first': index === 0 }">
|
||||
<td v-for="col, colIndex in columns" :key="col.id" :style="{ width: col.cell_width + 'px' }"
|
||||
class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden" :class="[{ 'border-b': index !== data.length - 1, 'border-r': colIndex !== columns.length - 1 || hasActions },
|
||||
colClasses(col)]">
|
||||
<component :is="fieldComponents[col.type]" class="border-gray-100 dark:border-gray-900" :property="col"
|
||||
:value="row[col.id]" />
|
||||
<tr
|
||||
v-for="(row, index) in data"
|
||||
:key="row.id"
|
||||
class="n-table-row"
|
||||
:class="{ first: index === 0 }"
|
||||
>
|
||||
<td
|
||||
v-for="(col, colIndex) in columns"
|
||||
:key="col.id"
|
||||
:style="{ width: col.cell_width + 'px' }"
|
||||
class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden"
|
||||
:class="[
|
||||
{
|
||||
'border-b': index !== data.length - 1,
|
||||
'border-r': colIndex !== columns.length - 1 || hasActions,
|
||||
},
|
||||
colClasses(col),
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="fieldComponents[col.type]"
|
||||
class="border-gray-100 dark:border-gray-900"
|
||||
:property="col"
|
||||
:value="row[col.id]"
|
||||
/>
|
||||
</td>
|
||||
<td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
|
||||
style="width: 100px">
|
||||
<record-operations :form="form" :structure="columns" :submission="row"
|
||||
<td
|
||||
v-if="hasActions"
|
||||
class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
|
||||
style="width: 100px"
|
||||
>
|
||||
<record-operations
|
||||
:form="form"
|
||||
:structure="columns"
|
||||
:submission="row"
|
||||
@deleted="(submission) => $emit('deleted', submission)"
|
||||
@updated="(submission) => $emit('updated', submission)" />
|
||||
@updated="(submission) => $emit('updated', submission)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="loading" class="n-table-row border-t bg-gray-50 dark:bg-gray-900">
|
||||
<td :colspan="columns.length" class="p-8 w-full">
|
||||
<tr
|
||||
v-if="loading"
|
||||
class="n-table-row border-t bg-gray-50 dark:bg-gray-900"
|
||||
>
|
||||
<td
|
||||
:colspan="columns.length"
|
||||
class="p-8 w-full"
|
||||
>
|
||||
<Loader class="w-4 h-4 mx-auto" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody v-else key="body-content" class="n-table-body">
|
||||
<tbody
|
||||
v-else
|
||||
key="body-content"
|
||||
class="n-table-body"
|
||||
>
|
||||
<tr class="n-table-row loader w-full">
|
||||
<td :colspan="columns.length" class="n-table-cell w-full p-8">
|
||||
<Loader v-if="loading" class="w-4 h-4 mx-auto" />
|
||||
<p v-else class="text-gray-500 text-center">
|
||||
<td
|
||||
:colspan="columns.length"
|
||||
class="n-table-cell w-full p-8"
|
||||
>
|
||||
<Loader
|
||||
v-if="loading"
|
||||
class="w-4 h-4 mx-auto"
|
||||
/>
|
||||
<p
|
||||
v-else
|
||||
class="text-gray-500 text-center"
|
||||
>
|
||||
No data found.
|
||||
</p>
|
||||
</td>
|
||||
@@ -61,41 +137,43 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OpenText from './components/OpenText.vue'
|
||||
import OpenUrl from './components/OpenUrl.vue'
|
||||
import OpenSelect from './components/OpenSelect.vue'
|
||||
import OpenDate from './components/OpenDate.vue'
|
||||
import OpenFile from './components/OpenFile.vue'
|
||||
import OpenCheckbox from './components/OpenCheckbox.vue'
|
||||
import ResizableTh from './components/ResizableTh.vue'
|
||||
import RecordOperations from '../components/RecordOperations.vue'
|
||||
import clonedeep from 'clone-deep'
|
||||
import { hash } from "~/lib/utils.js";
|
||||
import { default as _has } from 'lodash/has'
|
||||
import OpenText from "./components/OpenText.vue"
|
||||
import OpenUrl from "./components/OpenUrl.vue"
|
||||
import OpenSelect from "./components/OpenSelect.vue"
|
||||
import OpenDate from "./components/OpenDate.vue"
|
||||
import OpenFile from "./components/OpenFile.vue"
|
||||
import OpenCheckbox from "./components/OpenCheckbox.vue"
|
||||
import ResizableTh from "./components/ResizableTh.vue"
|
||||
import RecordOperations from "../components/RecordOperations.vue"
|
||||
import clonedeep from "clone-deep"
|
||||
import { hash } from "~/lib/utils.js"
|
||||
import { default as _has } from "lodash/has"
|
||||
|
||||
export default {
|
||||
components: { ResizableTh, RecordOperations },
|
||||
emits: ["updated", "deleted", "resize", "update-columns"],
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
allowResize: {
|
||||
required: false,
|
||||
default: true,
|
||||
type: Boolean
|
||||
type: Boolean,
|
||||
},
|
||||
scrollParent: {
|
||||
type: [Boolean]
|
||||
},
|
||||
scrollParent: {},
|
||||
},
|
||||
emits: ["updated", "deleted", "resize", "update-columns"],
|
||||
|
||||
setup() {
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
@@ -126,68 +204,68 @@ export default {
|
||||
url: shallowRef(OpenUrl),
|
||||
email: shallowRef(OpenText),
|
||||
phone_number: shallowRef(OpenText),
|
||||
signature: shallowRef(OpenFile)
|
||||
}
|
||||
signature: shallowRef(OpenFile),
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'columns': {
|
||||
columns: {
|
||||
handler() {
|
||||
this.internalColumns = clonedeep(this.columns)
|
||||
this.onStructureChange()
|
||||
},
|
||||
deep: true
|
||||
deep: true,
|
||||
},
|
||||
data() {
|
||||
this.$nextTick(() => {
|
||||
this.handleScroll()
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.internalColumns = clonedeep(this.columns)
|
||||
const parent = this.scrollParent ?? document.getElementById('table-page')
|
||||
const parent = this.scrollParent ?? document.getElementById("table-page")
|
||||
this.tableHash = hash(JSON.stringify(this.form.properties))
|
||||
if (parent) {
|
||||
parent.addEventListener('scroll', this.handleScroll, { passive: false })
|
||||
parent.addEventListener("scroll", this.handleScroll, { passive: false })
|
||||
}
|
||||
window.addEventListener('resize', this.handleScroll)
|
||||
window.addEventListener("resize", this.handleScroll)
|
||||
this.onStructureChange()
|
||||
this.handleScroll()
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
const parent = this.scrollParent ?? document.getElementById('table-page')
|
||||
const parent = this.scrollParent ?? document.getElementById("table-page")
|
||||
if (parent) {
|
||||
parent.removeEventListener('scroll', this.handleScroll)
|
||||
parent.removeEventListener("scroll", this.handleScroll)
|
||||
}
|
||||
window.removeEventListener('resize', this.handleScroll)
|
||||
window.removeEventListener("resize", this.handleScroll)
|
||||
},
|
||||
|
||||
methods: {
|
||||
colClasses(col) {
|
||||
let colAlign, colColor, colFontWeight, colWrap
|
||||
let colColor, colFontWeight, colWrap
|
||||
|
||||
// Column align
|
||||
colAlign = `text-${col.alignment ? col.alignment : 'left'}`
|
||||
const colAlign = `text-${col.alignment ? col.alignment : "left"}`
|
||||
|
||||
// Column color
|
||||
colColor = null
|
||||
if (!_has(col, 'color') || col.color === 'default') {
|
||||
colColor = 'text-gray-700 dark:text-gray-300'
|
||||
if (!_has(col, "color") || col.color === "default") {
|
||||
colColor = "text-gray-700 dark:text-gray-300"
|
||||
}
|
||||
colColor = `text-${col.color}`
|
||||
|
||||
// Column font weight
|
||||
if (_has(col, 'bold') && col.bold) {
|
||||
colFontWeight = 'font-semibold'
|
||||
if (_has(col, "bold") && col.bold) {
|
||||
colFontWeight = "font-semibold"
|
||||
}
|
||||
|
||||
// Column wrapping
|
||||
if (!_has(col, 'wrap_text') || !col.wrap_text) {
|
||||
colWrap = 'truncate'
|
||||
if (!_has(col, "wrap_text") || !col.wrap_text) {
|
||||
colWrap = "truncate"
|
||||
}
|
||||
|
||||
return [colAlign, colColor, colWrap, colFontWeight]
|
||||
@@ -195,11 +273,19 @@ export default {
|
||||
onStructureChange() {
|
||||
if (this.internalColumns) {
|
||||
this.$nextTick(() => {
|
||||
this.internalColumns.forEach(col => {
|
||||
if (!_has(col, 'cell_width')) {
|
||||
if (this.allowResize && this.internalColumns.length && document.getElementById('table-head-cell-' + col.id)) {
|
||||
this.internalColumns.forEach((col) => {
|
||||
if (!_has(col, "cell_width")) {
|
||||
if (
|
||||
this.allowResize &&
|
||||
this.internalColumns.length &&
|
||||
document.getElementById("table-head-cell-" + col.id)
|
||||
) {
|
||||
// Within editor
|
||||
this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
|
||||
this.resizeCol(
|
||||
col,
|
||||
document.getElementById("table-head-cell-" + col.id)
|
||||
.offsetWidth,
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -208,60 +294,65 @@ export default {
|
||||
},
|
||||
resizeCol(col, width) {
|
||||
if (!this.form) return
|
||||
const index = this.internalColumns.findIndex(c => c.id === col.id)
|
||||
const index = this.internalColumns.findIndex((c) => c.id === col.id)
|
||||
this.internalColumns[index].cell_width = width
|
||||
this.setColumns(this.internalColumns)
|
||||
this.$nextTick(() => {
|
||||
this.$emit('resize')
|
||||
this.$emit("resize")
|
||||
})
|
||||
},
|
||||
handleScroll() {
|
||||
|
||||
if (this.rafId) {
|
||||
cancelAnimationFrame(this.rafId);
|
||||
cancelAnimationFrame(this.rafId)
|
||||
}
|
||||
|
||||
this.rafId = requestAnimationFrame(() => {
|
||||
const table = this.$refs.table;
|
||||
const tableHeader = document.getElementById('table-header-' + this.tableHash);
|
||||
const tableActionsRow = document.getElementById('table-actions-' + this.tableHash);
|
||||
const table = this.$refs.table
|
||||
const tableHeader = document.getElementById(
|
||||
"table-header-" + this.tableHash,
|
||||
)
|
||||
const tableActionsRow = document.getElementById(
|
||||
"table-actions-" + this.tableHash,
|
||||
)
|
||||
|
||||
if (!table || !tableHeader) return;
|
||||
if (!table || !tableHeader) return
|
||||
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const tableRect = table.getBoundingClientRect();
|
||||
const scrollTop =
|
||||
window.pageYOffset || document.documentElement.scrollTop
|
||||
const tableRect = table.getBoundingClientRect()
|
||||
|
||||
// The starting point of the table relative to the viewport
|
||||
const tableStart = tableRect.top + scrollTop;
|
||||
const tableStart = tableRect.top + scrollTop
|
||||
// The end point of the table relative to the viewport
|
||||
const tableEnd = tableStart + tableRect.height;
|
||||
const tableEnd = tableStart + tableRect.height
|
||||
|
||||
let headerY = scrollTop - tableStart;
|
||||
let actionsY = scrollTop + window.innerHeight - tableEnd;
|
||||
let headerY = scrollTop - tableStart
|
||||
let actionsY = scrollTop + window.innerHeight - tableEnd
|
||||
|
||||
if (headerY < 0) headerY = 0;
|
||||
if (headerY < 0) headerY = 0
|
||||
if (scrollTop + window.innerHeight > tableEnd) {
|
||||
actionsY = tableRect.height - (scrollTop + window.innerHeight - tableEnd);
|
||||
actionsY =
|
||||
tableRect.height - (scrollTop + window.innerHeight - tableEnd)
|
||||
} else {
|
||||
actionsY = tableRect.height;
|
||||
actionsY = tableRect.height
|
||||
}
|
||||
|
||||
if (tableHeader) {
|
||||
tableHeader.style.transform = `translate3d(0px, ${headerY}px, 0px)`;
|
||||
tableHeader.style.transform = `translate3d(0px, ${headerY}px, 0px)`
|
||||
}
|
||||
|
||||
if (tableActionsRow) {
|
||||
tableActionsRow.style.transform = `translate3d(0px, ${actionsY}px, 0px)`;
|
||||
tableActionsRow.style.transform = `translate3d(0px, ${actionsY}px, 0px)`
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
setColumns(val) {
|
||||
this.$emit('update-columns', val)
|
||||
this.$emit("update-columns", val)
|
||||
},
|
||||
objectHas(object, key) {
|
||||
return _has(object, key)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,11 +1,33 @@
|
||||
<template>
|
||||
<svg v-if="value===true" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-auto" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
||||
<svg
|
||||
v-if="value === true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 mx-auto"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
<svg v-else-if="value===false" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-auto" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
||||
<svg
|
||||
v-else-if="value === false"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 mx-auto"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -14,19 +36,17 @@ export default {
|
||||
components: {},
|
||||
props: {
|
||||
value: {
|
||||
required: true
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
},
|
||||
computed: {},
|
||||
mounted() {},
|
||||
|
||||
methods: {},
|
||||
}
|
||||
|
||||
@@ -1,22 +1,44 @@
|
||||
<template>
|
||||
<p class="text-xs">
|
||||
<span v-for="file in parsedFiles" :key="file.file_url"
|
||||
class="whitespace-nowrap rounded-md transition-colors hover:decoration-none"
|
||||
:class="{'open-file text-gray-700 dark:text-gray-300 truncate':!file.is_image, 'open-file-img':file.is_image}"
|
||||
<span
|
||||
v-for="file in parsedFiles"
|
||||
:key="file.file_url"
|
||||
class="whitespace-nowrap rounded-md transition-colors hover:decoration-none"
|
||||
:class="{
|
||||
'open-file text-gray-700 dark:text-gray-300 truncate': !file.is_image,
|
||||
'open-file-img': file.is_image,
|
||||
}"
|
||||
>
|
||||
<a class="text-gray-700 dark:text-gray-300" :href="file.file_url" target="_blank"
|
||||
rel="nofollow"
|
||||
<a
|
||||
class="text-gray-700 dark:text-gray-300"
|
||||
:href="file.file_url"
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
>
|
||||
<div v-if="file.is_image" class="w-8 h-8">
|
||||
<img class="object-cover h-full w-full rounded" :src="file.file_url" @error="failedImages.push(file.file_url)"/>
|
||||
</div>
|
||||
<span v-else
|
||||
class="py-1 px-2"
|
||||
>
|
||||
<a :href="file.file_url" target="_blank" download>{{ file.displayed_file_name }}</a>
|
||||
<div
|
||||
v-if="file.is_image"
|
||||
class="w-8 h-8"
|
||||
>
|
||||
<img
|
||||
class="object-cover h-full w-full rounded"
|
||||
:src="file.file_url"
|
||||
@error="failedImages.push(file.file_url)"
|
||||
>
|
||||
</div>
|
||||
<span
|
||||
v-else
|
||||
class="py-1 px-2"
|
||||
>
|
||||
<a
|
||||
:href="file.file_url"
|
||||
target="_blank"
|
||||
download
|
||||
>{{
|
||||
file.displayed_file_name
|
||||
}}</a>
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@@ -26,32 +48,36 @@ export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
required: false
|
||||
}
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
failedImages: []
|
||||
failedImages: [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
parsedFiles() {
|
||||
return this.value ? this.value.map((file) => {
|
||||
return {
|
||||
file_name: file.file_name,
|
||||
file_url: file.file_url,
|
||||
displayed_file_name: this.displayedFileName(file.file_name),
|
||||
is_image: !this.failedImages.includes(file.file_url) && this.isImage(file.file_name)
|
||||
}
|
||||
}): []
|
||||
}
|
||||
return this.value
|
||||
? this.value.map((file) => {
|
||||
return {
|
||||
file_name: file.file_name,
|
||||
file_url: file.file_url,
|
||||
displayed_file_name: this.displayedFileName(file.file_name),
|
||||
is_image:
|
||||
!this.failedImages.includes(file.file_url) &&
|
||||
this.isImage(file.file_name),
|
||||
}
|
||||
})
|
||||
: []
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
isImage(fileName) {
|
||||
return ['png', 'gif', 'jpg', 'jpeg', 'tif'].some((suffix) => {
|
||||
return ["png", "gif", "jpg", "jpeg", "tif"].some((suffix) => {
|
||||
return fileName && fileName.endsWith(suffix)
|
||||
})
|
||||
},
|
||||
@@ -60,11 +86,11 @@ export default {
|
||||
const filename = fileName.substr(0, fileName.lastIndexOf("."))
|
||||
|
||||
if (filename.length > 10) {
|
||||
return filename.substr(0, 10) + '[...].' + extension
|
||||
return filename.substr(0, 10) + "[...]." + extension
|
||||
}
|
||||
return filename + '.' + extension
|
||||
}
|
||||
}
|
||||
return filename + "." + extension
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,32 +1,44 @@
|
||||
<template>
|
||||
<span v-if="value" class="-mb-2">
|
||||
<span
|
||||
v-if="value"
|
||||
class="-mb-2"
|
||||
>
|
||||
<template v-if="valueIsObject">
|
||||
<open-tag v-for="(val,index) in value" :key="index+val" :opt="val" />
|
||||
<open-tag
|
||||
v-for="(val, index) in value"
|
||||
:key="index + val"
|
||||
:opt="val"
|
||||
/>
|
||||
</template>
|
||||
<open-tag v-else :opt="value" />
|
||||
<open-tag
|
||||
v-else
|
||||
:opt="value"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OpenTag from './OpenTag.vue'
|
||||
import OpenTag from "./OpenTag.vue"
|
||||
|
||||
export default {
|
||||
components: { OpenTag },
|
||||
props: {
|
||||
value: {}
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
valueIsObject () {
|
||||
if (typeof this.value === 'object' && this.value !== null) {
|
||||
valueIsObject() {
|
||||
if (typeof this.value === "object" && this.value !== null) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<span :id="opt"
|
||||
class="py-1 px-2 mb-1 open-tag default mr-2 text-gray-700 dark:text-gray-300 text-xs whitespace-nowrap rounded-md transition-colors"
|
||||
<span
|
||||
:id="opt"
|
||||
class="py-1 px-2 mb-1 open-tag default mr-2 text-gray-700 dark:text-gray-300 text-xs whitespace-nowrap rounded-md transition-colors"
|
||||
>
|
||||
{{ opt }}
|
||||
</span>
|
||||
@@ -12,20 +13,18 @@ export default {
|
||||
props: {
|
||||
opt: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
computed: {},
|
||||
mounted() {},
|
||||
|
||||
methods: {}
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -35,7 +34,8 @@ export default {
|
||||
&.gray {
|
||||
background-color: #e3e2e0;
|
||||
}
|
||||
&.light-gray,&.default {
|
||||
&.light-gray,
|
||||
&.default {
|
||||
background-color: #e3e2e080;
|
||||
}
|
||||
&.brown {
|
||||
@@ -69,7 +69,8 @@ export default {
|
||||
&.gray {
|
||||
background-color: #5a5a5a;
|
||||
}
|
||||
&.light-gray,&.default {
|
||||
&.light-gray,
|
||||
&.default {
|
||||
background-color: #ffffff21;
|
||||
}
|
||||
&.brown {
|
||||
@@ -98,4 +99,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -9,8 +9,9 @@ export default {
|
||||
components: {},
|
||||
props: {
|
||||
value: {
|
||||
required: true
|
||||
}
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<a class="text-gray-700 dark:text-gray-300 hover:underline" :href="value" target="_blank" rel="nofollow">{{ value }}</a>
|
||||
<a
|
||||
class="text-gray-700 dark:text-gray-300 hover:underline"
|
||||
:href="value"
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
>{{ value }}</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -7,19 +12,17 @@ export default {
|
||||
components: {},
|
||||
props: {
|
||||
value: {
|
||||
required: true
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
},
|
||||
computed: {},
|
||||
mounted() {},
|
||||
|
||||
methods: {},
|
||||
}
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
<template>
|
||||
<th ref="th" :style="{width: width}">
|
||||
<slot/>
|
||||
<div v-if="allowResize" class="absolute right-0 top-0 w-0 z-10">
|
||||
<div class="resize-handler bg-transparent cursor-move hover:bg-blue-500 opacity-80 transition-colors"
|
||||
@mousedown="mouseDownHandler"
|
||||
<th
|
||||
ref="th"
|
||||
:style="{ width: width }"
|
||||
>
|
||||
<slot />
|
||||
<div
|
||||
v-if="allowResize"
|
||||
class="absolute right-0 top-0 w-0 z-10"
|
||||
>
|
||||
<div
|
||||
class="resize-handler bg-transparent cursor-move hover:bg-blue-500 opacity-80 transition-colors"
|
||||
@mousedown="mouseDownHandler"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
@@ -14,19 +21,22 @@ export default {
|
||||
components: {},
|
||||
props: {
|
||||
allowResize: {
|
||||
required: true
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
width: {
|
||||
required: true
|
||||
}
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['resize-width'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
w: 0,
|
||||
lastEmit: Date.now(),
|
||||
throttlePeriod: 50 // milliseconds
|
||||
throttlePeriod: 50, // milliseconds
|
||||
}
|
||||
},
|
||||
|
||||
@@ -41,22 +51,22 @@ export default {
|
||||
this.w = parseInt(styles.width, 10)
|
||||
|
||||
// Attach the listeners to `document`
|
||||
document.addEventListener('mousemove', this.mouseMoveHandler)
|
||||
document.addEventListener('mouseup', this.mouseUpHandler)
|
||||
document.addEventListener("mousemove", this.mouseMoveHandler)
|
||||
document.addEventListener("mouseup", this.mouseUpHandler)
|
||||
},
|
||||
mouseMoveHandler(e) {
|
||||
const now = Date.now()
|
||||
if (now - this.lastEmit > this.throttlePeriod) {
|
||||
const dx = e.clientX - this.x
|
||||
this.$emit('resize-width', this.w + dx)
|
||||
this.$emit("resize-width", this.w + dx)
|
||||
this.lastEmit = now
|
||||
}
|
||||
},
|
||||
mouseUpHandler() {
|
||||
// Remove the handlers of `mousemove` and `mouseup`
|
||||
document.removeEventListener('mousemove', this.mouseMoveHandler)
|
||||
document.removeEventListener('mouseup', this.mouseUpHandler)
|
||||
}
|
||||
}
|
||||
document.removeEventListener("mousemove", this.mouseMoveHandler)
|
||||
document.removeEventListener("mouseup", this.mouseUpHandler)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user