Skip to content

Commit

Permalink
Update inline components with locale features
Browse files Browse the repository at this point in the history
  • Loading branch information
@wallslide
wallslide committed Aug 27, 2020
1 parent 6057122 commit 9914ed8
Show file tree
Hide file tree
Showing 6 changed files with 221 additions and 48 deletions.
62 changes: 45 additions & 17 deletions docs/.vuepress/components/FormMode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,22 @@
<v-expansion-panel>
<v-expansion-panel-header>{{isOpen ? 'Close' : 'Show form-mode example'}}</v-expansion-panel-header>
<v-expansion-panel-content>
<v-btn text icon color="primary" class="mb-1" @click="start">
<v-icon>mdi-refresh</v-icon>
</v-btn>
<v-row no-gutters align-content="center">
<v-col cols="auto">
<v-btn text icon color="primary" class="mb-1" @click="start">
<v-icon>mdi-refresh</v-icon>
</v-btn>
</v-col>
<v-col cols="auto" v-if="withLocale">
<v-select
class="ma-0 pa-0 ml-2 mb-1"
hide-details
:items="locales"
v-model="locale"
label="Locale"
/>
</v-col>
</v-row>
<v-sheet
color="light-grey"
class="upil-example-container"
Expand All @@ -20,6 +33,8 @@
:isMissingValue.sync="isMissingValue"
:initializingUpil.sync="initializingUpil"
:types="types"
:locale="locale"
:i18n="i18n"
/>
</v-sheet>
</v-expansion-panel-content>
Expand All @@ -35,28 +50,32 @@ import { FormMode } from "@appsocially/vue-upil";
import { email } from "vee-validate/dist/rules";
const emailValidationRules = [
value => (value && value.length > 0 ? true : "Required"),
value => (email.validate(value) ? true : "Invalid email address")
(value) => (value && value.length > 0 ? true : "Required"),
(value) => (email.validate(value) ? true : "Invalid email address"),
];
const types = {
email: emailValidationRules
email: emailValidationRules,
};
export default {
name: "FormMode",
components: {
RawFormMode: FormMode //Rename to prevent recursion in vuepress
RawFormMode: FormMode, //Rename to prevent recursion in vuepress
},
props: {
simple: {
type: Boolean,
default: false
default: false,
},
hideScript: {
type: Boolean,
default: false
}
default: false,
},
withLocale: {
type: Boolean,
default: false,
},
},
data() {
return {
Expand All @@ -66,24 +85,33 @@ export default {
panel: null,
hasRun: false,
isReady: false,
types
types,
locale: "en",
locales: ["en", "ja"],
i18n: {
ja: {
missingValue: "未記入",
},
},
};
},
computed: {
isOpen() {
return this.panel === 0;
}
},
},
watch: {
isOpen(isOpen) {
if (isOpen) {
this.start();
}
}
},
},
methods: {
getScenario() {
const preTag = this.$slots.default[0].children.find(c => c.tag === "pre");
const preTag = this.$slots.default[0].children.find(
(c) => c.tag === "pre"
);
const text = preTag.children[0].children[0].text;
if (this.simple) {
return `DIALOG mainDialog ${text} /DIALOG RUN a mainDialog /RUN`;
Expand All @@ -97,11 +125,11 @@ export default {
this.upil = new UPILCore();
this.upil.startRaw(scenario, {
mode: "form",
resetOnInputUpdate: true
resetOnInputUpdate: true,
});
this.$nextTick(() => (this.isReady = true));
}
}
},
},
};
</script>

Expand Down
56 changes: 39 additions & 17 deletions docs/.vuepress/components/UpilBot.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,22 @@
<v-expansion-panel>
<v-expansion-panel-header>{{isOpen ? 'Close' : 'Show chat-mode example'}}</v-expansion-panel-header>
<v-expansion-panel-content>
<v-btn text icon color="primary" class="mb-1" @click="start">
<v-icon>mdi-refresh</v-icon>
</v-btn>
<v-row no-gutters align-content="center">
<v-col cols="auto">
<v-btn text icon color="primary" class="mb-1" @click="start">
<v-icon>mdi-refresh</v-icon>
</v-btn>
</v-col>
<v-col cols="auto" v-if="withLocale">
<v-select
class="ma-0 pa-0 ml-2 mb-1"
hide-details
:items="locales"
v-model="locale"
label="Locale"
/>
</v-col>
</v-row>
<v-sheet
color="light-grey"
class="upil-example-container"
Expand All @@ -24,13 +37,14 @@
:listeners="listeners"
:override="override"
:types="types"
:locale="locale"
>
<template v-slot:external="{allNodes, currentNode, scenarioEnded}">
<template v-slot:external="{allNodes, currentNode, scenarioEnded, placeholderText}">
<div id="bottom-bar" v-if="currentNode && !scenarioEnded">
<component
v-bind:is="currentNode.componentType"
v-bind="currentNode.node"
placeholderOverride="Type your answer here"
:placeholderOverride="placeholderText"
:labelOverride="getLabelOverride(currentNode.node.type)"
:rules="calculateRules(currentNode)"
/>
Expand All @@ -54,20 +68,20 @@ import { override } from "./overrides";
import { email } from "vee-validate/dist/rules";
const emailValidationRules = [
value => (value && value.length > 0 ? true : "Required"),
value => (email.validate(value) ? true : "Invalid email address")
(value) => (value && value.length > 0 ? true : "Required"),
(value) => (email.validate(value) ? true : "Invalid email address"),
];
const types = {
email: emailValidationRules
email: emailValidationRules,
};
const { ChatMode } = ChatBot;
export default {
name: "UpilBot",
components: {
ChatMode
ChatMode,
},
data() {
return {
Expand All @@ -78,30 +92,38 @@ export default {
listeners,
isReady: false,
override,
types
types,
locale: "en",
locales: ["en", "ja"],
};
},
computed: {
isOpen() {
return this.panel === 0;
}
},
},
watch: {
isOpen(isOpen) {
if (isOpen) {
this.start();
}
}
},
},
props: {
simple: {
type: Boolean,
default: false
}
default: false,
},
withLocale: {
type: Boolean,
default: false,
},
},
methods: {
getScenario() {
const preTag = this.$slots.default[0].children.find(c => c.tag === "pre");
const preTag = this.$slots.default[0].children.find(
(c) => c.tag === "pre"
);
const text = preTag.children[0].children[0].text;
if (this.simple) {
return `DIALOG mainDialog ${text} /DIALOG RUN a mainDialog /RUN`;
Expand Down Expand Up @@ -137,8 +159,8 @@ export default {
} else {
return [];
}
}
}
},
},
};
</script>

Expand Down
32 changes: 29 additions & 3 deletions docs/.vuepress/components/WizardMode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,22 @@
<v-expansion-panel>
<v-expansion-panel-header>{{isOpen ? 'Close' : 'Show wizard-mode example'}}</v-expansion-panel-header>
<v-expansion-panel-content>
<v-btn text icon color="primary" class="mb-1" @click="start">
<v-icon>mdi-refresh</v-icon>
</v-btn>
<v-row no-gutters align-content="center">
<v-col cols="auto">
<v-btn text icon color="primary" class="mb-1" @click="start">
<v-icon>mdi-refresh</v-icon>
</v-btn>
</v-col>
<v-col cols="auto" v-if="withLocale">
<v-select
class="ma-0 pa-0 ml-2 mb-1"
hide-details
:items="locales"
v-model="locale"
label="Locale"
/>
</v-col>
</v-row>
<v-sheet
color="light-grey"
class="upil-example-container"
Expand All @@ -20,6 +33,8 @@
:isMissingValue.sync="isMissingValue"
:initializingUpil.sync="initializingUpil"
:types="types"
:locale="locale"
:i18n="i18n"
/>
</v-sheet>
</v-expansion-panel-content>
Expand Down Expand Up @@ -57,6 +72,10 @@ export default {
type: Boolean,
default: false,
},
withLocale: {
type: Boolean,
default: false,
},
},
data() {
return {
Expand All @@ -67,6 +86,13 @@ export default {
hasRun: false,
isReady: false,
types,
locale: "en",
locales: ["en", "ja"],
i18n: {
ja: {
missingValue: "未記入",
},
},
};
},
computed: {
Expand Down
Loading

0 comments on commit 9914ed8

Please sign in to comment.