enrecipes/app/components/sub/OptionsList.vue
2021-06-15 16:34:42 +05:30

83 lines
No EOL
2.3 KiB
Vue

<template>
<ListView colSpan="2" rowSpan="2" class="options" for="item in items">
<v-template if="$index == 0">
<Label class="pageTitle" :text="title | L" />
</v-template>
<v-template if="item.type == 'switch'">
<RGridLayout
:rtl="RTL"
columns="auto, *, auto"
class="option"
@touch="touch($event, item.data, item.action)"
>
<Label class="ico rtl" :text="icon[item.icon]" />
<StackLayout col="1" class="info">
<RLabel :text="item.title | L" class="tw" />
<RLabel
v-if="item.subTitle"
:text="item.subTitle | L"
class="sub tw"
/>
</StackLayout>
<Switch
@loaded="swLoad"
isUserInteractionEnabled="false"
:color="item.checked ? '#ff5200' : '#adb5bd'"
col="2"
:checked="item.checked"
/>
</RGridLayout>
</v-template>
<v-template if="item.type == 'list'">
<RGridLayout
:rtl="RTL"
columns="auto, *"
class="option"
@touch="touch($event, item.data, item.action)"
>
<Label class="ico" :class="{ rtl: item.rtl }" :text="icon[item.icon]" />
<StackLayout col="1" class="info">
<RLabel :text="item.title | L" class="tw" />
<RLabel
:hidden="!item.subTitle"
:text="item.subTitle"
class="sub tw"
/>
</StackLayout>
</RGridLayout>
</v-template>
<v-template if="item.type == 'info'">
<Label
class="group-info sub tw"
:class="{ r: RTL }"
:text="item.title | L"
/>
</v-template>
<v-template>
<StackLayout class="listSpace"> </StackLayout>
</v-template>
</ListView>
</template>
<script>
import { mapState } from "vuex";
import * as utils from "~/shared/utils";
export default {
props: ["title", "items", "action"],
computed: {
...mapState(["icon", "RTL"]),
},
methods: {
swLoad({ object }) {
object.android.setRotation(
this.RTL && utils.sysRTL() ? 0 : this.RTL || utils.sysRTL() ? 180 : 0
);
},
touch({ object, action }, data, localAction) {
object.className = action.match(/down|move/) ? "option fade" : "option";
if (action == "up") localAction ? localAction(data) : this.action(data);
},
},
};
</script>