base_ui/components/global/SwitchComponent.vue

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