From a49a9415d5823f3f6a9adedb78b02a4633531cfc Mon Sep 17 00:00:00 2001
From: Jeremy <jeremy@wallslide.com>
Date: Fri, 2 Oct 2020 14:31:47 +0900
Subject: [PATCH] Add documentation for date widget's numeric mode

---
 docs/.vuepress/components/UpilBot.vue | 43 ++++++++-----
 docs/widgets/README.md                | 87 +++++++++++++++++++++++++--
 package.json                          |  6 +-
 yarn.lock                             | 24 ++++----
 4 files changed, 126 insertions(+), 34 deletions(-)

diff --git a/docs/.vuepress/components/UpilBot.vue b/docs/.vuepress/components/UpilBot.vue
index ece0a89..f145163 100644
--- a/docs/.vuepress/components/UpilBot.vue
+++ b/docs/.vuepress/components/UpilBot.vue
@@ -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">
@@ -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"
@@ -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"
@@ -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) {
@@ -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 {
@@ -139,7 +155,6 @@ export default {
       panel: null,
       hasRun: false,
       listeners,
-      isReady: false,
       override,
       types,
       locale: "en",
@@ -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) {
diff --git a/docs/widgets/README.md b/docs/widgets/README.md
index 1ccfdc5..3e3d8f8 100644
--- a/docs/widgets/README.md
+++ b/docs/widgets/README.md
@@ -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/>
 
@@ -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
@@ -28,7 +29,8 @@ RUN birthday
 DIALOG birthday
   TEMPLATE date
     {
-      formText: "Birthdate"
+      formText: "Birthdate",
+      calendarType: "calendar"
     }
     "What is your birthday?"
     >>birthday
@@ -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
diff --git a/package.json b/package.json
index 02cfb3f..fe95275 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/yarn.lock b/yarn.lock
index 00a5fa6..157db51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"
@@ -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"
@@ -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==
 
 watchpack@1.6.1, watchpack@^1.7.4:
   version "1.6.1"