enrecipes/app/components/modals/Prompt.vue

80 lines
2 KiB
Vue
Raw Normal View History

2020-10-21 17:54:45 +00:00
<template>
2021-04-12 18:09:48 +00:00
<Page
@loaded="transparentPage"
backgroundColor="transparent"
2021-06-15 11:04:42 +00:00
:class="theme"
2021-04-12 18:09:48 +00:00
>
2021-04-01 10:55:35 +00:00
<GridLayout rows="auto, auto, auto" class="modal">
2021-06-15 11:04:42 +00:00
<RLabel class="title" :text="title | L" />
2021-04-01 10:55:35 +00:00
<StackLayout row="1" class="input">
2021-06-15 11:04:42 +00:00
<TextView
v-if="type == 'view'"
autocorrect="true"
autocapitalizationType="sentences"
class="modalInput"
@loaded="focusField"
v-model="text"
/>
2021-02-28 15:10:26 +00:00
<TextField
2021-06-15 11:04:42 +00:00
autocapitalizationType="sentences"
autocorrect="true"
v-else
2021-04-01 10:55:35 +00:00
class="modalInput"
2021-02-28 15:10:26 +00:00
@loaded="focusField"
2021-04-01 10:55:35 +00:00
v-model="text"
@returnPress="$modal.close(text)"
2021-02-28 15:10:26 +00:00
/>
</StackLayout>
2021-06-15 11:04:42 +00:00
<RGridLayout :rtl="RTL" row="2" columns="*, auto, auto" class="actions">
2021-04-01 10:55:35 +00:00
<Button
2021-02-28 15:10:26 +00:00
col="1"
2021-04-01 10:55:35 +00:00
class="text sm"
2021-02-28 15:10:26 +00:00
:text="'cBtn' | L"
2021-06-15 11:04:42 +00:00
@tap="$modal.close(0)"
2021-02-28 15:10:26 +00:00
/>
2021-04-01 10:55:35 +00:00
<Button
2021-02-28 15:10:26 +00:00
col="2"
2021-04-01 10:55:35 +00:00
class="text sm"
:text="action | L"
@tap="$modal.close(text)"
2021-02-28 15:10:26 +00:00
/>
2021-06-15 11:04:42 +00:00
</RGridLayout>
2021-04-01 10:55:35 +00:00
</GridLayout>
2021-02-28 15:10:26 +00:00
</Page>
2020-10-21 17:54:45 +00:00
</template>
<script>
2021-04-01 10:55:35 +00:00
import { Utils } from "@nativescript/core";
2021-02-28 15:10:26 +00:00
import { localize } from "@nativescript/localize";
import { mapState } from "vuex";
2020-10-21 17:54:45 +00:00
export default {
2021-06-15 11:04:42 +00:00
props: ["title", "type", "hint", "placeholder", "action"],
2020-10-21 17:54:45 +00:00
data() {
return {
2021-04-01 10:55:35 +00:00
text: null,
2021-02-28 15:10:26 +00:00
};
2020-10-21 17:54:45 +00:00
},
computed: {
2021-06-15 11:04:42 +00:00
...mapState(["icon", "theme", "RTL"]),
2020-10-22 18:36:50 +00:00
},
2020-11-02 11:36:53 +00:00
methods: {
2021-04-01 10:55:35 +00:00
focusField({ object }) {
2021-06-15 11:04:42 +00:00
this.setGravity(object);
2021-04-01 10:55:35 +00:00
let a = this.placeholder;
typeof a == "number"
? (object.keyboardType = "number")
2021-06-15 11:04:42 +00:00
: this.type
? ""
2021-04-01 10:55:35 +00:00
: (object.autocapitalizationType = "words");
object.hint = this.hint;
object.focus();
2021-04-21 10:32:03 +00:00
setTimeout(() => Utils.ad.showSoftInput(object.android), 100);
2020-11-02 11:36:53 +00:00
},
},
2021-04-01 10:55:35 +00:00
created() {
let a = this.placeholder;
if (a) this.text = typeof a == "number" ? a : localize(a);
2020-11-10 18:28:48 +00:00
},
2021-02-28 15:10:26 +00:00
};
2020-10-21 17:54:45 +00:00
</script>