Zeen Component Library

# ZeenSwitchChose

Компонент switch chose input для форм

# Примеры:

  • Switch Chose c boolean, c темами circleWithMainColor или bgWithMainColor принимает главный цвет. Тема - circleWithMainColor: false

  • Тема - bgWithMainColor и передача объекта: { "firstKey": "Все расписание", "secondKey": "Мое расписание" } - значение:

  • Disabled не отмеченный: false

  • Disabled не отмеченный: true

  • С кастомными цветами и disabled

# props

Название Тип Обязательный По умолчанию Описание
value any + - то, значение, которое хотим сохранять в data родителя
modelValue any + - сюда передается значение из v-model
isDisabled boolean - - если true, то компонент становится disabled
theme string - circleWithMainColor доступны 2 темы для вложенного компонента ZeenSwitch: circleWithMainColor - фон круга основным цветом, а фон подложки дополнительным. bgWithMainColor - наоборот
trueValue any - true используется для хранения значения другого типа (не boolean) по состоянию true
falseValue any - false используется для хранения значения другого типа (не boolean) по состоянию false

# Source Code - исходный код компонента

<template>
  <div class="zeen-switch-chose">
    <div class="zeen-switch-chose__background">
      <label class="zeen-switch-chose__label">
        <span
          class="zeen-switch-chose__text"
          :class="{
            'zeen-switch-chose__text_active': modelValue === false || modelValue === falseValue,
          }"
        >
          <slot name="text-left" />
        </span>
        <ZeenSwitch
          class="zeen-switch-chose__zeen-switch"
          v-model="model"
          :trueValue="trueValue"
          :falseValue="falseValue"
          :disabled="isDisabled"
          v-bind="$attrs"
        />
        <span
          class="zeen-switch-chose__text"
          :class="{
            'zeen-switch-chose__text_active': modelValue === true || modelValue === trueValue,
          }"
        >
          <slot name="text-right" />
        </span>
      </label>
    </div>
  </div>
</template>

<script>
import ZeenSwitch from '../inputs/ZeenSwitch/ZeenSwitch'

export default {
  name: 'ZeenSwitchChose',
  components: {ZeenSwitch},
  inheritAttrs: false,
  model: {
    prop: 'modelValue',
    event: 'change',
  },
  props: {
    value: {
      required: true,
    },
    modelValue: {
      required: true,
    },
    isDisabled: {
      type: Boolean,
      required: false,
    },
    trueValue: {
      required: false,
      default: true,
    },
    falseValue: {
      required: false,
      default: false,
    },
  },
  computed: {
    model: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('change', val)
      },
    },
  },
}
</script>

<style>
:root {
  /* Размеры */
}
</style>

<style lang="scss" scoped>
@import '/src/styles/mixins.scss';

.zeen-switch-chose {
  &__background {
    border-radius: var(--switch-chose-radius);
    padding: var(--switch-chose-padding-vertical) var(--switch-chose-padding-horizontal);
    background: var(--zeen-switch-chose-background);
  }

  &__label {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex: 1 1 auto;
    line-height: 1;
    @include tablets {
      justify-content: center;
    }
  }

  &__text {
    color: var(--zeen-switch-chose-text-color);
    transition: color 0.25s ease;

    &_active {
      color: var(--zeen-switch-chose-color-active);
    }
  }

  &__zeen-switch {
    @include tablets {
      margin: 0 var(--switch-chose-margin-horizontal);
    }
  }
}
</style>

← ZeenTab →