Skip to content

Commit

Permalink
Add documentation for date widget's numeric mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@wallslide
wallslide committed Oct 2, 2020
1 parent 0078c04 commit a49a941
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 34 deletions.
43 changes: 28 additions & 15 deletions docs/.vuepress/components/UpilBot.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
<div class="v-application v-application--is-ltr theme--light" data-app>
<v-expansion-panels v-model="panel">
<v-expansion-panel>
<v-expansion-panel-header>{{isOpen ? 'Close' : 'Show chat-mode example'}}</v-expansion-panel-header>
<v-expansion-panel-header>{{
isOpen ? "Close" : "Show chat-mode example"
}}</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row no-gutters align-content="center">
<v-col cols="auto">
Expand All @@ -27,13 +29,16 @@
color="light-grey"
class="upil-example-container"
:elevation="3"
v-if="isReady"
v-if="upil"
>
<ChatMode
removeBottomBar
:upil="upil"
:avatar="Logo"
:wrapperStyleOverride="{height: '240px', 'overflow-y': 'scroll'}"
:wrapperStyleOverride="{
height: '240px',
'overflow-y': 'scroll',
}"
:listeners="listeners"
:override="override"
:types="types"
Expand All @@ -43,10 +48,21 @@
:transformTextVariables="transformTextVariables"
>
<template
v-slot:external="{allNodes, currentNode, scenarioEnded, placeholderText, state}"
v-slot:external="{
allNodes,
currentNode,
scenarioEnded,
placeholderText,
state,
}"
>
<div class="pl-1" id="bottom-bar" v-if="currentNode && !scenarioEnded">
<div
class="pl-1"
id="bottom-bar"
v-if="currentNode && !scenarioEnded"
>
<component
:upil="upil"
v-bind:is="currentNode.componentType"
v-bind="currentNode.node"
:state="state"
Expand Down Expand Up @@ -84,11 +100,11 @@ const types = {
email: emailValidationRules,
};
const padTime = (timeNum) => `${timeNum}`.padStart(2, 0)
const padTime = (timeNum) => `${timeNum}`.padStart(2, 0);
const formatTimeInputValue = (timeInputValue) => {
return `${padTime(timeInputValue.hours)}:${padTime(timeInputValue.minutes)}`
}
return `${padTime(timeInputValue.hours)}:${padTime(timeInputValue.minutes)}`;
};
const commaChooser = (locale) => {
switch (locale) {
Expand All @@ -108,16 +124,16 @@ const transformReplyVariables = ({
}) => {
if (Array.isArray(value)) {
return value.join(commaChooser(locale));
} else if (label === 'time-input') {
return formatTimeInputValue(value, locale)
} else if (label === "time-input") {
return formatTimeInputValue(value, locale);
} else {
return value;
}
};
const transformTextVariables = ({ value, key, locale }) => {
if (key === 'meetingsStart' || key === 'meetingsEnd') {
return formatTimeInputValue(value, locale)
if (key === "meetingsStart" || key === "meetingsEnd") {
return formatTimeInputValue(value, locale);
} else if (Array.isArray(value)) {
return value.join(commaChooser(locale));
} else {
Expand All @@ -139,7 +155,6 @@ export default {
panel: null,
hasRun: false,
listeners,
isReady: false,
override,
types,
locale: "en",
Expand Down Expand Up @@ -192,11 +207,9 @@ export default {
}
},
start() {
this.isReady = false;
const scenario = this.getScenario();
this.upil = new UPILCore();
this.upil.startRaw(scenario);
this.$nextTick(() => (this.isReady = true));
},
getLabelOverride(type) {
switch (type) {
Expand Down
87 changes: 83 additions & 4 deletions docs/widgets/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ The Vue UPIL plugin comes with several built-in widgets. Some widgets are only a

## Date

The `date` widget allows users to select a date from a calendar. To use it in your script, use a `TEMPLATE date` entity.
The `date` widget allows users to select a date from a calendar. To use it in your script, use a `TEMPLATE date` entity. The user's input is saved as a Javascript Date object in the UPIL state.
<br/>
<br/>

Expand All @@ -13,7 +13,8 @@ The `date` widget allows users to select a date from a calendar. To use it in yo
DIALOG birthday
TEMPLATE date
{
formText: "Birthdate"
formText: "Birthdate",
calendarType: "calendar"
}
"What is your birthday?"
>>birthday
Expand All @@ -28,7 +29,8 @@ RUN birthday
DIALOG birthday
TEMPLATE date
{
formText: "Birthdate"
formText: "Birthdate",
calendarType: "calendar"
}
"What is your birthday?"
>>birthday
Expand All @@ -43,7 +45,84 @@ RUN birthday
DIALOG birthday
TEMPLATE date
{
formText: "Birthdate"
formText: "Birthdate",
calendarType: "calendar"
}
"What is your birthday?"
>>birthday
/TEMPLATE
/DIALOG
RUN birthday
```
</WizardMode>

### Numeric mode
It also has a `numeric` mode, which uses selects instead of a calendar for inputting the date. There are several text overrides that can be used in `numeric` mode:

<br/>

These labels will continue showing after selecting a value:
* yearSelectLabel: The label for the year-select
* monthSelectLabel: The label for the month-select
* daySelectLabel: The label for the day-select

<br/>
<br/>

Placeholders disappear after a user selects a value:
* yearSelectPlaceholder: The placeholder for the year-select
* monthSelectPlaceholder: The placeholder for the month-select
* daySelectPlaceholder: The placeholder for the day-select

<br/>
<br/>

* unitYear: The unit that is shown to the right of the year-options inside of the select menu
* unitMonth: The unit that is shown to the right of the month-options inside of the select menu
* unitDay: The unit that is shown to the right of the day-options inside of the select menu
* unitSeparator: A seperator to be displayed between the year, month, and day select menus

<br/>

<UpilBot>
```
DIALOG birthday
TEMPLATE date
{
formText: "Birthdate",
calendarType: "numeric"
}
"What is your birthday?"
>>birthday
/TEMPLATE
/DIALOG
RUN birthday
```
</UpilBot>

<FormMode hideScript>
```
DIALOG birthday
TEMPLATE date
{
formText: "Birthdate",
calendarType: "numeric"
}
"What is your birthday?"
>>birthday
/TEMPLATE
/DIALOG
RUN birthday
```
</FormMode>

<WizardMode hideScript>
```
DIALOG birthday
TEMPLATE date
{
formText: "Birthdate",
calendarType: "numeric"
}
"What is your birthday?"
>>birthday
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
"build": "vuepress build docs"
},
"dependencies": {
"@appsocially/userpil-core": "^1.1.7",
"@appsocially/vue-upil": "^2.3.3",
"@appsocially/userpil-core": "^1.1.10",
"@appsocially/vue-upil": "^2.4.2",
"core-js": "^3.6.5",
"vee-validate": "^3.3.7",
"vue": "^2.6.11",
"vue-server-renderer": "2.6.11",
"vuepress-plugin-medium-zoom": "^1.1.8",
"vuetify": "^2.3.8"
"vuetify": "^2.3.12"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.4.1",
Expand Down
24 changes: 12 additions & 12 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@
html-tags "^3.1.0"
svg-tags "^1.0.0"

"@appsocially/userpil-core@^1.1.7":
version "1.1.7"
resolved "https://registry.yarnpkg.com/@appsocially/userpil-core/-/userpil-core-1.1.7.tgz#af27f85bf35e5e3c8ac3123f664ccbf397c8729a"
integrity sha512-Suo6L68mzIuSww+mnElL8Bf7Ta2GocLrVIX9qtMWImlDqrtGpGMqRISRq/EI3nqkmMj/gmrfA/6wFA7CAZb/bQ==
"@appsocially/userpil-core@^1.1.10":
version "1.1.10"
resolved "https://registry.yarnpkg.com/@appsocially/userpil-core/-/userpil-core-1.1.10.tgz#3c7a8b3d25c70d5177586dae19f11532b3a53260"
integrity sha512-JzAYijhLoh2UA6BpaEEFyCl7muB7qJgjLLuXRMZergakNt1+jvC7AjsSzhxx+l+Poecqd1y/L2tpf9AGX1OhxA==
dependencies:
"@types/ajv" "^1.0.0"
"@types/redux" "^3.6.0"
Expand All @@ -37,10 +37,10 @@
redux "^4.0.1"
vue-loader "^15.7.1"

"@appsocially/vue-upil@^2.3.3":
version "2.3.3"
resolved "https://registry.yarnpkg.com/@appsocially/vue-upil/-/vue-upil-2.3.3.tgz#f2de1789b05a94eb316ba37bc44e3dd3c86b49fa"
integrity sha512-3Uex3onOgBy8AKlSbw2r9K5GaBTe7vtSYLT4cgYcxu6YG4awPk4+NOx2UDTQTGbdj9u61Su05CbdickL9vuevA==
"@appsocially/vue-upil@^2.4.2":
version "2.4.2"
resolved "https://registry.yarnpkg.com/@appsocially/vue-upil/-/vue-upil-2.4.2.tgz#c48146d2859e44a6d6e26f23400a043de8af9989"
integrity sha512-EUEb8o6CPzLgdaEqL8I/bLdsqR/Y5u0OzMhHwq/zr8SLpp94YSkDSP2C61EUFILfHunS2cyrrSuMcGK/VcDU7g==
dependencies:
core-js "^3.6.4"
date-fns "^2.15.0"
Expand Down Expand Up @@ -11814,10 +11814,10 @@ vuepress@^1.5.0:
opencollective-postinstall "^2.0.2"
update-notifier "^4.0.0"

vuetify@^2.3.8:
version "2.3.10"
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.3.10.tgz#c8cbc77ee1224b5a132f501a3762dee6d8c95a06"
integrity sha512-KzL/MhZ7ajubm9kwbdCoA/cRV50RX+a5Hcqiwt7Am1Fni2crDtl2no05UNwKroTfscrYYf07gq3WIFSurPsnCA==
vuetify@^2.3.12:
version "2.3.12"
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.3.12.tgz#799410de0878d8aae10cfae14e40549b9a88ca87"
integrity sha512-FSt1pzpf0/Lh0xuctAPB7RiLbUl7bzVc7ejbXLLhfmgm7zD7yabuhVYuyVda/SzokjZMGS3j1lNu2lLfdrz0oQ==

[email protected], watchpack@^1.7.4:
version "1.6.1"
Expand Down

1 comment on commit a49a941

@vercel
Copy link

@vercel vercel bot commented on a49a941 Oct 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.