glib-web 4.40.0 → 4.41.0

package/actions/dialogs/alert.js

@@ -1,5 +1,7 @@
 // import Launch from "../../utils/launch";
 
+import Action from "../../action";
+
 export default class {
   execute(properties, component) {
     const spec = Object.assign({}, properties, {
@@ -13,5 +15,7 @@ export default class {
       ]
     });
     Utils.launch.dialog.open(spec, component);
+
+    Action.execute(properties.onOpen, component);
   }
 }

package/actions/dialogs/open.js

@@ -1,3 +1,4 @@
+import Action from "../../action";
 import { dialogs } from "../../store";
 
 export default class {
@@ -13,5 +14,7 @@ export default class {
     }
 
     Utils.launch.dialog.open(prop, component);
+
+    Action.execute(spec.onOpen, component);
   }
 }

package/actions/dialogs/show.js

@@ -1,3 +1,4 @@
+import Action from "../../action";
 import { dialogs } from "../../store";
 
 export default class {
@@ -12,5 +13,6 @@ export default class {
       return;
     }
     Utils.launch.dialog.open(prop, component);
+    Action.execute(spec.onShow, component);
   }
 }

package/components/composable/date.js

@@ -1,10 +1,10 @@
 import moment from "moment-timezone";
+import { isString } from "../../utils/type";
 
-export function sanitize(val, type, timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone) {
-
+export function sanitize(val, type, timeZone) {
   if (!val) return;
-
-  val = moment(val).tz(timeZone).toISOString(true);
+  const hasTimeZone = isString(timeZone) && timeZone !== "";
+  val = hasTimeZone ? moment.tz(val, timeZone).toISOString(true) : moment(val).toISOString(true);
 
   switch (type) {
     case "date":
@@ -31,4 +31,4 @@ export function localeString(val, type, format) {
       return new Date(val).toLocaleDateString(undefined, fmt);
   }
 
-}
+}

package/components/fields/_patternText.vue

@@ -1,20 +1,28 @@
 <template>
-  <div :style="$styles()" :class="$classes()" v-if="loadIf">
+  <div :style="$styles()" :class="$classes()" class="pattern-picker-field" v-if="loadIf">
     <button-date v-if="spec.template" :type="type" :spec="spec" @datePicked="handleDatePicked"></button-date>
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
-    <v-text-field v-else ref="field" :color="gcolor" v-model="fieldModel" :name="fieldName" :label="spec.label"
-      :hint="spec.hint" :type="type" :readonly="spec.readOnly" :disabled="inputDisabled" :min="sanitizeValue(spec.min)"
-      :max="sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()" :style="$styles()"
-      :density="$classes().includes('compact') ? 'compact' : 'default'" :clearable="spec.clearable" @change="onChange"
-      :variant="variant" validate-on="blur" persistent-placeholder />
+
+    <template v-else>
+      <v-text-field ref="field" :color="gcolor" :label="spec.label" :hint="spec.hint" :readonly="spec.readOnly"
+        :disabled="inputDisabled" :style="$styles()" :density="$classes().includes('compact') ? 'compact' : 'default'"
+        :clearable="spec.clearable" @change="onChange" :variant="variant" validate-on="blur" persistent-placeholder
+        :placeholder="spec.placeholder" @click="openPicker" :value="format" />
+      <input ref="nativePicker" v-model="fieldModel" class="native-picker" :type="type" :name="fieldName"
+        :min="sanitizeValue(spec.min)" :max="sanitizeValue(spec.max)" :value="sanitizeValue(fieldModel)"
+        @change="handleNativeChange" />
+      <v-input :model-value="fieldModel" :rules="$validation()"></v-input>
+    </template>
   </div>
 </template>
 
 <script>
+import { useDate } from "vuetify";
 import { sanitize } from "../composable/date";
 import { useGlibInput } from "../composable/form";
 import inputVariant from '../mixins/inputVariant';
 import buttonDate from "./_buttonDate.vue";
+import { isPresent, isString, isFunction } from "../../utils/type";
 
 export default {
   mixins: [inputVariant],
@@ -25,20 +33,73 @@ export default {
     pattern: { type: String, required: true }
   },
   setup(props) {
+    const adapter = useDate();
     useGlibInput({ props });
+
+    return { adapter };
+  },
+  computed: {
+    isDateType() {
+      return this.type === 'date';
+    },
+    isDateTimeType() {
+      return this.type === 'datetime-local';
+    },
+    format() {
+      if (!isPresent(this.fieldModel)) return;
+      if (!isPresent(this.spec.format)) {
+        switch (this.type) {
+          case 'date':
+            return this.adapter.format(this.fieldModel, 'fullDate');
+
+          case 'datetime-local':
+            return this.adapter.format(this.fieldModel, 'keyboardDateTime24h');
+
+          default:
+            return this.adapter.format(this.fieldModel, 'keyboardDateTime24h');
+        }
+      }
+
+      return this.adapter.format(this.fieldModel, this.spec.format);
+    }
   },
   methods: {
     _linkFieldModels(valueChanged) {
       if (valueChanged) this.fieldModel = this.sanitizeValue(this.spec.value);
     },
-    sanitizeValue(val) {
-      if (val) {
-        return sanitize(val, this.type, this.spec.time_zone);
+    sanitizeValue(val, timeZone = this.spec.time_zone) {
+      if (isPresent(val)) {
+        return sanitize(val, this.type, timeZone);
+      }
+    },
+    openPicker() {
+      if (this.inputDisabled || this.spec.readOnly) return;
+
+      const picker = this.$refs.nativePicker;
+      if (!picker) return;
+
+      if (isPresent(this.fieldModel)) {
+        picker.value = this.sanitizeValue(this.fieldModel);
+      } else if (isPresent(this.spec.value)) {
+        picker.value = this.sanitizeValue(this.spec.value);
+      }
+
+      if (isFunction(picker.showPicker)) {
+        picker.showPicker();
+      } else {
+        picker.click();
       }
     },
     onChange() {
       this.$executeOnChange();
     },
+    handleNativeChange(event) {
+      const value = event?.target?.value;
+      if (!isString(value)) return;
+
+      this.fieldModel = this.sanitizeValue(value, '');
+      this.$executeOnChange();
+    },
     handleDatePicked(value) {
       this.fieldModel = value;
       this.$executeOnChange();
@@ -62,4 +123,17 @@ export default {
     padding-bottom: unset;
   }
 }
+
+.pattern-picker-field {
+  position: relative;
+}
+
+.native-picker {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.40.0",
+  "version": "4.41.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/plugins/vuetify.js

@@ -11,6 +11,17 @@ const opts = {
     // blueprint: md3,
     components,
     // directives,
+    date: {
+        formats: {
+            glibDate: (d) => {
+                const yyyy = d.getFullYear();
+                const mm = String(d.getMonth() + 1).padStart(2, "0");
+                const dd = String(d.getDate()).padStart(2, "0");
+
+                return `${yyyy} ${mm} ${dd}`;
+            }
+        }
+    },
     icons: {
         defaultSet: 'md',
         aliases,
@@ -24,4 +35,4 @@ const opts = {
     }
 };
 
-export default new createVuetify(opts);
+export default new createVuetify(opts);