blob: 79c4576950cb58d9d5a34d65fec8c750c4fbebf5 [file] [log] [blame]
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.
<template>
<div>
<div class="setting-item" v-if="viewType === 'item'">
<h3 class="title">{{ title }}</h3>
<slot></slot>
</div>
<div class="setting-image-item" v-if="viewType === 'radio-group'">
<a-row :span="24" style="display: flex;">
<a-col v-for="(item) in items" :key="item.name" :style="colWidth">
<a-tooltip :title="$t(`label.theme.${item.name}`)" placement="top">
<div :class="['img-checkbox', item.disabled ? 'disabled' : '']" v-if="item.type==='image-checkbox'">
<light v-if="item.icon==='light'" :style="{ height: '56px', width: '56px' }" />
<dark v-if="item.icon==='dark'" :style="{ height: '56px', width: '56px' }"/>
<div :class="['check-item', item.name === checked ? 'check-item-checked' : '']">
<a-radio v-model:value="item.name" :disabled="item.disabled"></a-radio>
<check-outlined :class="['check-icon', item.name]" />
</div>
</div>
<div class="color-checkbox" v-else>
<div
:class="['check-color', item.color === checked ? 'check-color-checked' : '']"
:style="{ backgroundColor: item.color }">
<a-radio v-model:value="item.color"></a-radio>
<check-outlined class="check-icon" />
</div>
</div>
</a-tooltip>
</a-col>
</a-row>
</div>
</div>
</template>
<script>
import light from '@/assets/icons/light.svg?inline'
import dark from '@/assets/icons/dark.svg?inline'
export default {
name: 'SettingItem',
components: {
light,
dark
},
props: {
viewType: {
type: String,
required: true
},
title: {
type: String,
default: ''
},
items: {
type: Array,
default: () => []
},
checked: {
type: String,
default: ''
}
},
computed: {
colWidth () {
if (this.items.length === 2) {
return { width: '70px' }
}
return { width: `${(100 / this.items.length)}%` }
}
}
}
</script>
<style lang="less" scoped>
.setting-item{
margin-bottom: 24px;
padding: 0 24px;
.title {
line-height: 22px;
margin-bottom: 12px;
}
}
.img-checkbox {
margin-right: 16px;
position: relative;
border-radius: 4px;
cursor: pointer;
width: 55px;
height: 50px;
.check-item {
position: absolute;
top: 0;
width: 100%;
padding-top: 18px;
padding-left: 15px;
height: 100%;
font-size: 14px;
font-weight: bold;
.ant-radio-wrapper {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
}
.check-icon {
display: none;
}
&-checked {
.check-icon {
display: block;
}
}
}
&.disabled {
cursor: not-allowed;
opacity: 0.9;
.ant-radio-wrapper {
cursor: not-allowed;
}
}
}
.color-checkbox {
position: relative;
cursor: pointer;
.check-color {
width: 20px;
height: 20px;
position: absolute;
.ant-radio-wrapper {
opacity: 0;
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 20px;
height: 20px;
}
.check-icon {
display: none;
position: absolute;
top: 3px;
left: 3px;
}
&-checked {
.check-icon {
display: block;
}
}
}
}
</style>