ui/src/components/view/SettingItem.vue

// 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>