@bcrs-shared-components/effective-date-time 1.1.22 → 1.1.23

package/EffectiveDateTime.stories.ts

@@ -1,11 +1,11 @@
+import type { Meta } from '@storybook/vue'
 import { EffectiveDateTime } from './index'
 import Vuetify from 'vuetify'
 
-export default {
-  title: 'component/EffectiveDateTime',
-  component: EffectiveDateTime,
-  argTypes: {}
+const meta: Meta<typeof EffectiveDateTime> = {
+  title: 'component/EffectiveDateTime'
 }
+export default meta
 
 const Template = (args, { argTypes }) => ({
   vuetify: new Vuetify({ iconfont: 'mdi' }),
@@ -15,7 +15,7 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Default = Template.bind({})
-Default.args = {
+Default['args'] = {
   parseInitial: true,
   currentJsDate: new Date(),
   effectiveDateTime: {

package/EffectiveDateTime.vue

@@ -1,11 +1,27 @@
 <template>
-  <v-card flat id="effective-date-time-box">
-    <v-radio-group column class="pt-0 mt-0" v-model="effectiveDateType">
-      <v-radio label="Immediate (date and time of filing)" :value=EffectiveDateTypes.IMMEDIATE />
-      <v-radio label="A date and time in the future" :value=EffectiveDateTypes.FUTURE_EFFECTIVE />
+  <v-card
+    id="effective-date-time-box"
+    flat
+  >
+    <v-radio-group
+      v-model="effectiveDateType"
+      column
+      class="pt-0 mt-0"
+    >
+      <v-radio
+        label="Immediate (date and time of filing)"
+        :value="EffectiveDateTypes.IMMEDIATE"
+      />
+      <v-radio
+        label="A date and time in the future"
+        :value="EffectiveDateTypes.FUTURE_EFFECTIVE"
+      />
     </v-radio-group>
 
-    <v-form ref="form" class="date-time-selectors">
+    <v-form
+      ref="form"
+      class="date-time-selectors"
+    >
       <DatePicker
         ref="datePickerRef"
         title="Date"
@@ -19,51 +35,83 @@
       />
 
       <v-row>
-        <v-col cols="12" sm="6" md="3">
+        <v-col
+          cols="12"
+          sm="6"
+          md="3"
+        >
           <v-combobox
             id="hour-selector"
             ref="hourSelector"
+            v-model="selectHour"
             filled
             class="mr-1"
-            v-model="selectHour"
             label="Hour"
             :items="hours"
             :disabled="!isFutureEffective"
-            :rules="hourRules" />
+            :rules="hourRules"
+          />
         </v-col>
-        <span class="time-colon" :class="{ 'disabled': !isFutureEffective }">:</span>
-        <v-col cols="12" sm="6" md="3">
+        <span
+          class="time-colon"
+          :class="{ 'disabled': !isFutureEffective }"
+        >:</span>
+        <v-col
+          cols="12"
+          sm="6"
+          md="3"
+        >
           <v-combobox
             id="minute-selector"
             ref="minuteSelector"
+            v-model="selectMinute"
             filled
             class="ml-1"
-            v-model="selectMinute"
             label="Minute"
             :items="minutes"
             :disabled="!isFutureEffective"
-            :rules="minuteRules" />
+            :rules="minuteRules"
+          />
         </v-col>
-        <v-col cols="12" sm="6" md="3">
+        <v-col
+          cols="12"
+          sm="6"
+          md="3"
+        >
           <v-select
             id="period-selector"
-            filled
             v-model="selectPeriod"
+            filled
             :items="timePeriod"
-            :disabled="!isFutureEffective" />
+            :disabled="!isFutureEffective"
+          />
         </v-col>
-        <v-col cols="12" sm="6" md="3" class="label-col">
-          <span class="time-zone-label" :class="{ 'disabled': !isFutureEffective }">Pacific time</span>
+        <v-col
+          cols="12"
+          sm="6"
+          md="3"
+          class="label-col"
+        >
+          <span
+            class="time-zone-label"
+            :class="{ 'disabled': !isFutureEffective }"
+          >Pacific time</span>
         </v-col>
       </v-row>
 
       <!-- display validation alert only after date and time have been entered -->
       <v-row v-if="isFutureEffective && dateText && (selectHour.length > 0) && (selectMinute.length > 0)">
         <v-col class="validation-alert">
-          <p class="validation-alert-msg" v-if="isUnderTime">
+          <p
+            v-if="isUnderTime"
+            class="validation-alert-msg"
+          >
             The time must be at least {{ dateToPacificTime(minDate) }} for the selected date
           </p>
-          <p class="validation-alert-msg" v-if="isOverTime">
+          <p
+            v-if="isOverTime"
+            class="validation-alert-msg"
+          >
             The time must be at most {{ dateToPacificTime(maxDate) }} for the selected date
           </p>
         </v-col>
@@ -131,8 +179,8 @@ export default class EffectiveDateTime extends Mixins(DateMixin) {
 
   // V-model values
   private effectiveDateType: EffectiveDateTypes = null
-  private datePicker: string = ''
-  private dateText: string = ''
+  private datePicker = ''
+  private dateText = ''
   private selectHour: string[] = []
   private selectMinute: string[] = []
   private selectPeriod = PeriodTypes.AM

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@bcrs-shared-components/effective-date-time",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@bcrs-shared-components/date-picker": "^1.2.22",
-    "@bcrs-shared-components/enums": "^1.0.41",
-    "@bcrs-shared-components/interfaces": "^1.0.65",
+    "@bcrs-shared-components/date-picker": "^1.2.23",
+    "@bcrs-shared-components/enums": "^1.0.42",
+    "@bcrs-shared-components/interfaces": "^1.0.66",
+    "@bcrs-shared-components/mixins": "^1.1.16",
+    "vue": "^2.7.14"
+  },
+  "devDependencies": {
     "vue-property-decorator": "^9.1.2"
   },
-  "gitHead": "83c6bb9ef06117fe581381b5e8e86a4fddbbe9e7"
+  "gitHead": "bdee3d1bef1c16310b2bb77a353d9bd5dbf53b9a"
 }