base_ui/components/other/SwitchWithIcon.vue

<template>
  <div class="switcher-container">
    <button-component
      @click="updateMode"
      :class="{ active: viewMode == firstKey }"
      classes="btn d-inline-flex px-2 "
      buttonText=""
      :title="text1"
      v-tooltip="text1"
    >
      <slot v-if="hasDefaultSlot" name="firstIcon"></slot>

      <div v-else>
        <!-- <span class="tavasi tavasi-table-view"></span> -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.2 19.2">
          <g id="Layer_2" data-name="Layer 2">
            <g id="Layer_1-2" data-name="Layer 1">
              <path
                class="cls-1"
                d="M5.6,0H3.2A3.2,3.2,0,0,0,0,3.2V5.6A3.2,3.2,0,0,0,3.2,8.8H5.6A3.2,3.2,0,0,0,8.8,5.6V3.2A3.2,3.2,0,0,0,5.6,0ZM7.2,5.6A1.6,1.6,0,0,1,5.6,7.2H3.2A1.6,1.6,0,0,1,1.6,5.6V3.2A1.6,1.6,0,0,1,3.2,1.6H5.6A1.6,1.6,0,0,1,7.2,3.2Z"
              ></path>
              <path
                class="cls-1"
                d="M16,0H13.6a3.2,3.2,0,0,0-3.2,3.2V5.6a3.2,3.2,0,0,0,3.2,3.2H16a3.2,3.2,0,0,0,3.2-3.2V3.2A3.2,3.2,0,0,0,16,0Zm1.6,5.6A1.6,1.6,0,0,1,16,7.2H13.6A1.6,1.6,0,0,1,12,5.6V3.2a1.6,1.6,0,0,1,1.6-1.6H16a1.6,1.6,0,0,1,1.6,1.6Z"
              ></path>
              <path
                class="cls-1"
                d="M5.6,10.4H3.2A3.2,3.2,0,0,0,0,13.6V16a3.2,3.2,0,0,0,3.2,3.2H5.6A3.2,3.2,0,0,0,8.8,16V13.6A3.2,3.2,0,0,0,5.6,10.4ZM7.2,16a1.6,1.6,0,0,1-1.6,1.6H3.2A1.6,1.6,0,0,1,1.6,16V13.6A1.6,1.6,0,0,1,3.2,12H5.6a1.6,1.6,0,0,1,1.6,1.6Z"
              ></path>
              <path
                class="cls-1"
                d="M16,10.4H13.6a3.2,3.2,0,0,0-3.2,3.2V16a3.2,3.2,0,0,0,3.2,3.2H16A3.2,3.2,0,0,0,19.2,16V13.6A3.2,3.2,0,0,0,16,10.4ZM17.6,16A1.6,1.6,0,0,1,16,17.6H13.6A1.6,1.6,0,0,1,12,16V13.6A1.6,1.6,0,0,1,13.6,12H16a1.6,1.6,0,0,1,1.6,1.6Z"
              ></path>
            </g>
          </g>
        </svg>
      </div>
    </button-component>
    <button-component
      @click="updateMode"
      :class="{ active: viewMode == secondKey }"
      classes="btn d-inline-flex px-2 "
      buttonText=""
      :title="text2"
      v-tooltip="text2"
    >
      <slot v-if="hasDefaultSlot" name="secondIcon"></slot>

      <svg v-else class="icon icon-menu">
        <use xlink:href="#icon-menu"></use>
      </svg>
      <!-- <span class="tavasi tavasi-list-view"></span> -->
    </button-component>
  </div>
</template>

<script>
/**
 * @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 {
  // mixins: [formBuilderMixin],
  // props: ["texts1", "texts2"],
  props: {
    texts1: {
      type: String, // نوع را به عنوان String مشخص کنید
      default: "Normal", // مقدار پیش‌فرض
    },
    texts2: {
      type: String, // نوع را به عنوان String مشخص کنید
      default: "Statistics", // مقدار پیش‌فرض
    },
    value: {
      type: String, // نوع را مشخص کنید (اگر می‌دانید ممکن است null باشد، از null | undefined استفاده کنید)
      default: "", // مقدار پیش‌فرض
    },
    firstKey: {
      type: String, // نوع را به عنوان String مشخص کنید
      default: "table", // مقدار پیش‌فرض
    },
    secondKey: {
      type: String, // نوع را به عنوان String مشخص کنید
      default: "list", // مقدار پیش‌فرض
    },
  },
  data() {
    return {
      viewMode: null,
      text1: "Chart",
      text2: "ChartList",
    };
  },
  computed: {
    hasDefaultSlot() {
      return !!this.$slots.default;
    },
  },
  mounted() {
    this.viewMode = this.value ?? this.firstKey;
    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.viewMode =
        this.viewMode == this.firstKey ? this.secondKey : this.firstKey;
      this.$emit("change-mode", this.viewMode);
    },
  },
};
</script>

<style scoped lang="scss">
.switcher-container {
  background-color: rgb(209, 213, 219);
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  // width: 6em;

  .btn {
    border-radius: 0.5rem;
    border: 0;
    // line-height: 1;
    padding: 0.7em 0.5em;
    transition: all 0.2s;

    svg,
    .tavasi {
      width: 2.1em;
      height: 1em;
      // margin-right: 2px;
      // font-size: 1.6rem;
      color: #fff;
      fill: #fff;
      transition: all 0.2s;
    }
    &.active {
      background-color: var(--primary-color);
      transition: all 0.2s;

      .tavasi {
        color: #fff;
        transition: all 0.2s;

        &::before {
          color: #fff;
          transition: all 0.2s;
        }
      }
    }
  }
}
</style>