v4.17.3: simplified-date

Author: fergusean

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.17.2",
+    "version": "4.17.3",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "exports": {

src/config.ts

@@ -2,14 +2,14 @@ interface IOptions {
     unhandledErrorSupportText: string;
     errorHandler: (err: Error) => void;
     defaultDateFormat: string;
-    defaultDateTimeFormat: string;
+    defaultTimeFormat: string;
 }
 
 export const VfOptions: IOptions = {
     unhandledErrorSupportText: 'please contact support',
     errorHandler: err => console.error('Unhandled error:', err),
     defaultDateFormat: 'M/d/yy',
-    defaultDateTimeFormat: 'M/d/yy H:mm'
+    defaultTimeFormat: 'H:mm'
 };
 
 export function configureVf(options: Partial<IOptions>) {

src/directives/datetime.ts

@@ -1,4 +1,5 @@
 import { format } from 'date-fns';
+import { compact } from 'lodash';
 import type { DirectiveBinding, ObjectDirective } from 'vue';
 
 import { VfOptions } from '../config';
@@ -28,20 +29,36 @@ function getDateTimeValue(el: HTMLElement, binding: DirectiveBinding<string>) {
     }
 
     let formatSpec = el.attributes.getNamedItem('format')?.value;
+    const isDateOnly = el.attributes.getNamedItem('date-only') !== null;
 
     if (!formatSpec && el.attributes.getNamedItem('relative-date') !== null) {
         const now = new Date();
-        if (now.getFullYear() == theDate.getFullYear() && now.getMonth() == theDate.getMonth() && now.getDate() == theDate.getDate()) {
-            prefix = 'at';
+        if (now.getFullYear() === theDate.getFullYear() && now.getMonth() === theDate.getMonth() && now.getDate() === theDate.getDate()) {
+            prefix = 'at'; // ???
             formatSpec = 'HH:mm';
         }
     }
 
+    if (!formatSpec && el.attributes.getNamedItem('simplified-date') !== null) {
+        let dateSpec: string | null = null;
+        const now = new Date();
+        if (now.getFullYear() === theDate.getFullYear()) {
+            if (now.getMonth() !== theDate.getMonth() || now.getDate() !== theDate.getDate()) {
+                dateSpec = 'M/d';
+            }
+        } else {
+            dateSpec = 'M/d/YY';
+        }
+
+        const timeSpec = isDateOnly ? null : VfOptions.defaultTimeFormat;
+        formatSpec = compact([dateSpec, timeSpec]).join(' ');
+    }
+
     if (!formatSpec) {
-        if (el.attributes.getNamedItem('date-only') !== null) {
+        if (isDateOnly) {
             formatSpec = VfOptions.defaultDateFormat;
         } else {
-            formatSpec = VfOptions.defaultDateTimeFormat;
+            formatSpec = `${VfOptions.defaultDateFormat} ${VfOptions.defaultTimeFormat}`;
         }
     }