Skip to content

Commit

Permalink
Add two columns to table, default value and input value
Browse files Browse the repository at this point in the history
  • Loading branch information
@mahiyou
mahiyou committed Apr 27, 2024
1 parent 1170a1b commit 3030bc9
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 60 deletions.
2 changes: 2 additions & 0 deletions locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
"documents.options.table.header.name": "Name",
"documents.options.table.header.type": "Type",
"documents.options.table.header.required": "Required",
"documents.options.table.header.default-value": "Default Value",
"documents.options.table.header.value": "Value",
"documents.options.table.header.description": "Description",
"documents.options.table.content.string": "string",
"documents.options.table.content.number": "number",
Expand Down
2 changes: 2 additions & 0 deletions locales/fa.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
"documents.options.table.header.name": "گزینه",
"documents.options.table.header.type": "نوع",
"documents.options.table.header.required": "اجباری",
"documents.options.table.header.default-value": "مقدار پیش فرض",
"documents.options.table.header.value": "مقدار",
"documents.options.table.header.description": "توضیحات",
"documents.options.table.content.string": "رشته",
"documents.options.table.content.number": "عدد",
Expand Down
225 changes: 165 additions & 60 deletions pages/docs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,32 @@
<div class="docs-title">{{ $t("documents.title") }}</div>
<div class="docs-sub-title">{{ $t("documents.subtitle") }}</div>
<div class="docs-content">{{ $t("documents.content") }}</div>
<v-text-field variant="outlined" class="mt-5" dir="ltr" v-model="url"></v-text-field>
<v-btn elevation="0" color="primary" :href="getCaptureURL(url)" target="_blank">{{ $t("documents.btn") }}</v-btn>
<v-text-field variant="outlined" class="my-5" dir="ltr" v-model="url"></v-text-field>
<v-btn elevation="0" color="primary" :href="getCaptureURL(inputData.url)" target="_blank">{{
$t("documents.btn")
}}</v-btn>
<div class="docs-title2">{{ $t("documents.options.title") }}</div>
<v-data-table :headers="headers" :items="tableData" class="mb-5">
<template v-slot:item.required="{ value }">
<v-icon v-if="value" color="green" icon="mdi-checkbox-marked"></v-icon>
<v-icon v-if="!value" color="red" icon="mdi-close-thick"></v-icon>
</template>
<template v-slot:item.value="{ item }">
<v-text-field variant="outlined" v-model="inputData[item.name]"
v-if="['url', 'width', 'height', 'maxAge', 'timeout', 'viewportWidth', 'viewportHeight'].includes(item.name)"></v-text-field>
<v-checkbox class="my-2 checkbox" label="Yes" v-if="item.name === 'fullpage'"
v-model="inputData.fullpage"></v-checkbox>
<v-radio-group class="radiogroup" v-if="item.name === 'format'" v-model="inputData.format">
<v-row>
<v-col>
<v-radio label="jpeg" value="jpeg"></v-radio>
</v-col>
<v-col>
<v-radio label="png" value="png"></v-radio>
</v-col>
</v-row>
</v-radio-group>
</template>
</v-data-table>
</div>
</v-container>
Expand All @@ -26,7 +44,21 @@ interface IData {
name: string,
type: string,
required: boolean,
default: string,
description: string,
value: string,
}
interface IInput {
url: string,
width: number,
height: number,
maxAge: number,
format: string,
fullpage: boolean,
timeout: number,
viewportWidth: number,
viewportHeight: number
}
export default defineComponent({
Expand All @@ -39,78 +71,147 @@ export default defineComponent({
},
data() {
return {
url: 'https://www.google.com',
radios: 'jpeg',
headers: [
{ title: this.$t("documents.options.table.header.name"), key: 'name' },
{ title: this.$t("documents.options.table.header.type"), key: 'type' },
{ title: this.$t("documents.options.table.header.required"), key: 'required' },
{ title: this.$t("documents.options.table.header.description"), key: 'description' },
{ title: this.$t("documents.options.table.header.default-value"), key: 'default' },
{ title: this.$t("documents.options.table.header.description"), key: 'description', width: '30%' },
{ title: this.$t("documents.options.table.header.value"), key: 'value', width: '20%' },
],
tableData: [{
name: 'url',
type: this.$t("documents.options.table.content.string"),
required: true,
description: this.$t("documents.options.table.content.description.url"),
},
{
name: 'width',
type: this.$t("documents.options.table.content.number"),
required: false,
description: this.$t("documents.options.table.content.description.width"),
},
{
name: 'height',
type: this.$t("documents.options.table.content.number"),
required: false,
description: this.$t("documents.options.table.content.description.height"),
},
{
name: 'maxAge',
type: this.$t("documents.options.table.content.number"),
required: false,
description: this.$t("documents.options.table.content.description.maxAge"),
},
{
name: 'format',
type: this.$t("documents.options.table.content.string"),
required: false,
description: this.$t("documents.options.table.content.description.format")
},
{
name: 'fullpage',
type: 'true | false',
required: false,
description: this.$t("documents.options.table.content.description.fullpage"),
},
{
name: 'timeout',
type: this.$t("documents.options.table.content.number"),
required: false,
description: this.$t("documents.options.table.content.description.timeout"),
},
{
name: 'viewportWidth',
type: this.$t("documents.options.table.content.number"),
required: false,
description: this.$t("documents.options.table.content.description.viewportWidth")
},
{
name: 'viewportHeight',
type: this.$t("documents.options.table.content.number"),
required: false,
description: this.$t("documents.options.table.content.description.viewportHeight")
}
] as IData[]
inputData: {
url: 'https://www.google.com',
width: 1200,
height: 600,
maxAge: 86400,
format: 'jpeg',
fullpage: false,
timeout: 10000,
viewportWidth: 1200,
viewportHeight: 600
} as IInput
}
},
computed: {
tableData(): IData[] {
return [
{
name: 'url',
type: this.$t("documents.options.table.content.string"),
required: true,
default: '-',
description: this.$t("documents.options.table.content.description.url"),
value: this.url
},
{
name: 'width',
type: this.$t("documents.options.table.content.number"),
required: false,
default: '1200',
description: this.$t("documents.options.table.content.description.width"),
value: "1200"
},
{
name: 'height',
type: this.$t("documents.options.table.content.number"),
required: false,
default: '600',
description: this.$t("documents.options.table.content.description.height"),
value: "600"
},
{
name: 'maxAge',
type: this.$t("documents.options.table.content.number"),
required: false,
default: '86400',
description: this.$t("documents.options.table.content.description.maxAge"),
value: "86400"
},
{
name: 'format',
type: this.$t("documents.options.table.content.string"),
required: false,
default: "jpeg",
description: this.$t("documents.options.table.content.description.format"),
value: "jpeg"
},
{
name: 'fullpage',
type: 'true | false',
required: false,
default: 'false',
description: this.$t("documents.options.table.content.description.fullpage"),
value: 'false'
},
{
name: 'timeout',
type: this.$t("documents.options.table.content.number"),
required: false,
default: '10000',
description: this.$t("documents.options.table.content.description.timeout"),
value: '10000'
},
{
name: 'viewportWidth',
type: this.$t("documents.options.table.content.number"),
required: false,
default: '1200',
description: this.$t("documents.options.table.content.description.viewportWidth"),
value: '1200'
},
{
name: 'viewportHeight',
type: this.$t("documents.options.table.content.number"),
required: false,
default: '600',
description: this.$t("documents.options.table.content.description.viewportHeight"),
value: '600'
}
]
},
url(): string {
let params = {}
if (this.inputData.width != 1200) {
params = Object.assign(params, { width: this.inputData.width })
}
if (this.inputData.height != 600) {
params = Object.assign(params, { height: this.inputData.height })
}
if (this.inputData.maxAge != 86400 && this.inputData.maxAge > 9) {
params = Object.assign(params, { maxAge: this.inputData.maxAge })
}
if (this.inputData.format === "png") {
params = Object.assign(params, { format: this.inputData.format })
}
if (this.inputData.fullpage === true) {
params = Object.assign(params, { fullpage: this.inputData.fullpage })
}
if (this.inputData.timeout != 10000 && 2000 <= this.inputData.timeout && this.inputData.timeout <= 15000) {
params = Object.assign(params, { timeout: this.inputData.timeout })
}
if (this.inputData.viewportWidth != 1200 && 320 <= this.inputData.viewportWidth && this.inputData.viewportWidth <= 4096) {
params = Object.assign(params, { viewportWidth: this.inputData.viewportWidth })
}
if (this.inputData.viewportHeight != 600 && 320 <= this.inputData.viewportHeight && this.inputData.viewportHeight <= 4096) {
params = Object.assign(params, { viewportHeight: this.inputData.viewportHeight })
}
return getCaptureURL(this.inputData.url, params)
}
}
})
</script>
<style lang="scss">
.docs {
.v-input__control {
border: 1px solid rgb(var(--v-theme-primary));
border-radius: 5px;
background-color: white;
}
.radiogroup , .checkbox {
.v-input__control {
border: none;
}
}
.docs-title {
Expand Down Expand Up @@ -145,5 +246,9 @@ export default defineComponent({
.v-table .v-table__wrapper>table>tbody>tr:nth-child(2n-1)>td {
background: #ededed;
}
.v-input__details {
display: none;
}
}
</style>

0 comments on commit 3030bc9

Please sign in to comment.