228 lines
6.6 KiB
Vue
228 lines
6.6 KiB
Vue
<template>
|
|
<div class="switcher-container">
|
|
<button-component
|
|
@click="updateMode(firstKey)"
|
|
:class="{ active: viewMode == firstKey }"
|
|
classes="btn d-inline-flex px-2 "
|
|
buttonText=""
|
|
:title="text1"
|
|
v-tooltip="text1"
|
|
>
|
|
<template v-if="hasFirstSlot">
|
|
<slot name="firstIcon"></slot>
|
|
</template>
|
|
|
|
<template 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>
|
|
</template>
|
|
</button-component>
|
|
<button-component
|
|
@click="updateMode(secondKey)"
|
|
:class="{ active: viewMode == secondKey }"
|
|
classes="btn d-inline-flex px-2 "
|
|
buttonText=""
|
|
:title="text2"
|
|
v-tooltip="text2"
|
|
>
|
|
<template v-if="hasSecondSlot">
|
|
<slot name="secondIcon"></slot>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
|
|
<!-- <span class="tavasi tavasi-list-view"></span> -->
|
|
</template>
|
|
</button-component>
|
|
<button-component
|
|
v-if="listState == 2"
|
|
@click="updateMode(thirdKey)"
|
|
:class="{ active: viewMode == thirdKey }"
|
|
classes="btn d-inline-flex px-2 "
|
|
buttonText=""
|
|
:title="text2"
|
|
v-tooltip="text2"
|
|
>
|
|
<template v-if="hasThirdSlot">
|
|
<slot name="thirdIcon"></slot>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<svg
|
|
fill="#000000"
|
|
version="1.1"
|
|
id="Capa_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="800px"
|
|
height="800px"
|
|
viewBox="0 0 35 35"
|
|
xml:space="preserve"
|
|
>
|
|
<g>
|
|
<g>
|
|
<path d="M0,0v35h35V0H0z M33,33H2V2h31V33z" />
|
|
<rect x="4.5" y="4.5" width="11.5" height="26" />
|
|
<rect x="19" y="4.5" width="11.5" height="26" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</template>
|
|
</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: {
|
|
texts2: {
|
|
default: "Statistics",
|
|
},
|
|
texts1: {
|
|
default: "Normal",
|
|
},
|
|
value: {
|
|
default: null,
|
|
},
|
|
firstKey: {
|
|
default: "table",
|
|
},
|
|
secondKey: {
|
|
default: "list",
|
|
},
|
|
thirdKey: {
|
|
default: "three-column-card",
|
|
},
|
|
listState: {
|
|
default: "1",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
viewMode: null,
|
|
text1: "Chart",
|
|
text2: "ChartList",
|
|
};
|
|
},
|
|
computed: {
|
|
hasFirstSlot() {
|
|
return !!this.$slots.firstIcon;
|
|
},
|
|
hasSecondSlot() {
|
|
return !!this.$slots.secondIcon;
|
|
},
|
|
hasThirdSlot() {
|
|
return !!this.$slots.thirdIcon;
|
|
},
|
|
},
|
|
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(mode) {
|
|
this.viewMode = mode;
|
|
this.$emit("change-mode", this.viewMode);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.switch-with-icon {
|
|
.switcher-container {
|
|
height: 2.6em;
|
|
width: 10em;
|
|
}
|
|
}
|
|
.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;
|
|
&:not(:last-child):nth-child(2) {
|
|
margin-right: 0.3em;
|
|
margin-left: 0.3em;
|
|
}
|
|
|
|
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>
|