<template> <div class="form-group" :key="$attrs.name"> <div class="d-flex switch-main"> <div class="custom-control custom-switch"> <input type="checkbox" @change="updateMode" :id="$attrs.name" :name="$attrs.name" v-model="textValue" :true-value="true" :false-value="false" class="custom-control-input" /> <label class="custom-control-label" :for="$attrs.name">{{ $t(text1) }}</label> </div> <label class="mb-0 mr-2 text-2" :for="$attrs.name">{{ $t(text2) }}</label> </div> </div> </template> <script> import formBuilderMixin from "~/extensions/formBuilderExtension.js"; /** * @vue-prop {string} [texts2 = Statistics] - متنی که برای نمایش به عنوان "ChartList" استفاده میشود. * @vue-prop {string} [texts1 = Normal] - متنی که برای نمایش به عنوان "Chart" استفاده میشود. * * @vue-data {boolean} [textValue = true] - حالت انتخاب شده ی سوئیچ در حالت true فعال و در حالت false غیر فعال می باشد * @vue-data {String} [text1 = ""] - متن اول که در برچسب اول نمایش داده میشود. * @vue-data {String} [text2 = ""] - متن دوم که در برچسب دوم نمایش داده میشود. */ export default { extends: formBuilderMixin, // props: ["texts1", "texts2"], props: { texts2: { default: "Statistics", }, texts1: { default: "Normal", }, value: { default: true, }, }, data() { return { textValue: true, text1: "Chart", text2: "ChartList", }; }, mounted() { this.textValue = this.value; this.updateText(); }, methods: { /** * متنهای پراپها را به متغیرهای اختصاص میدهد. * اگر texts1 تعریف شده باشد، مقادیر text1 و text2 را به ترتیب با texts1 و texts2 جایگزین میکند. */ updateText() { if (this.texts1 !== undefined) { this.text1 = this.texts1; this.text2 = this.texts2; } }, /** * رویداد تغییر وضعیت چکباکس را مدیریت میکند. * مقدار جدید textValue را از طریق رویداد "change-mode" به والد کامپوننت ارسال میکند. */ updateMode() { this.$emit("change-mode", this.textValue); }, }, }; </script> <style scoped lang="scss"> .custom-control-label { white-space: nowrap; &::before { border-color: var(--primary-color) !important ; // background-color: var(--primary-color)!important; } } .entity-text-switch { .switch-main { justify-content: end; margin-left: 3em; } .custom-control-input { width: 5em; z-index: 99; } } .custom-control { .custom-control-input { &:checked ~ .custom-control-label::before { background-color: var(--primary-color); } } } .task-admin-switch { &.form-group { margin-bottom: 0 !important; margin-top: 1em; margin-right: 1em; } .custom-control-label { &::before { border-color: #fff; background-color: rgb(135, 255, 249); } &::after { background-color: #fff; } } } .compare-switch { .custom-control-label { &::before { border-color: #fff; background-color: rgb(135, 255, 249); } &::after { background-color: #fff; } } } .text-2 { white-space: nowrap; } /* .form-control { height: auto !important; } */ /* .checkbox-4 { width: 100px; appearance: none; height: 40px; border-radius: 100px; cursor: pointer; background: #ffffff; position: relative; background: #e0e5ec; box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2), inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2); transition: all 0.5s; } .checkbox-4::after { content: ""; width: 30px; height: 30px; position: absolute; left: 8px; top: 5px; border-radius: 100%; background-color: #ffffff; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1); transition: all 0.5s; } .checkbox-4:checked::after { left: 65px; } .checkbox-4-pink:checked { background: #fb2175; } .checkbox-4-danger:checked { background: var(--danger); } .checkbox-4-success:checked { background: var(--success); } .checkbox-4-info:checked { background: var(--info); } .checkbox-4-dark:checked { background: #1a1a1a; } .checkbox-4-magic:checked { background: var(--magic); } */ </style>