fluency-v8-components 1.3.9 → 1.4.0

package/dist/{index.es-BrS6IGfB.mjs → index.es-jnmHZtX5.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-DrG6GyAN.mjs";
+import { c as Da, _ as Va, g as il } from "./index-Br4jyWhU.mjs";
 var fn = {}, cn = {}, cr, vn;
 function Q() {
   if (vn) return cr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluency-v8-components",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "main": "dist/fluency-v8-components.umd.js",
   "module": "dist/fluency-v8-components.es.js",
   "types": "dist/index.d.ts",

package/src/components/common/DatePickerInput.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="col">
-    <vue-tailwind-datepicker :shortcuts="customShortcuts" v-model="dateValue" />
+    <VueTailwindDatepicker :shortcuts="customShortcuts" v-model="dateValue" />
   </div>
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from "vue";
+import { ref, watch } from "vue";
 import VueTailwindDatepicker from "vue-tailwind-datepicker";
 import moment from "moment";
 
@@ -14,40 +14,47 @@ const props = defineProps({
   to: Number,
 });
 const emits = defineEmits(["selectTime"]);
-const dateValue = ref([]);
+const dateValue = ref(defaultRange());
 
-watch(dateValue, (val) => {
-  emits("selectTime", [moment(val[0]).valueOf(), moment(val[1]).valueOf()]);
-});
 watch(
-  () => props.from,
-  (val) => {
-    if (val) {
-      dateValue.value[0] = formatTime(val);
+  () => [props.from, props.to],
+  ([from, to]) => {
+    const baseRange = Array.isArray(dateValue.value) ? dateValue.value : [];
+    const nextRange = baseRange.length === 2 ? [...baseRange] : defaultRange();
+    let updated = false;
+
+    if (isValidTimestamp(from)) {
+      nextRange[0] = formatTime(from);
+      updated = true;
+    }
+
+    if (isValidTimestamp(to)) {
+      nextRange[1] = formatTime(to);
+      updated = true;
+    }
+
+    if (updated) {
+      dateValue.value = nextRange;
     } else {
       resetDate();
     }
-  }
+  },
+  { immediate: true }
 );
+
 watch(
-  () => props.to,
+  dateValue,
   (val) => {
-    if (val) {
-      dateValue.value[1] = formatTime(val);
+    if (Array.isArray(val) && val.length === 2 && val[0] && val[1]) {
+      emits("selectTime", [
+        moment(val[0]).valueOf(),
+        moment(val[1]).valueOf(),
+      ]);
     }
-  }
+  },
+  { deep: true }
 );
 
-onMounted(() => {
-  if (props.from && props.to) {
-    const fromFormatted = formatTime(props.from);
-    const toFormatted = formatTime(props.to);
-    dateValue.value = [fromFormatted, toFormatted];
-  } else {
-    resetDate();
-  }
-});
-
 function customShortcuts() {
   const date = moment().valueOf();
   return [
@@ -97,13 +104,21 @@ function customShortcuts() {
 }
 
 function resetDate() {
-  dateValue.value = [
+  dateValue.value = defaultRange();
+}
+
+function formatTime(time) {
+  return moment(time).format("YYYY-MM-DD HH:mm:ss");
+}
+
+function defaultRange() {
+  return [
     formatTime(moment().subtract(1, "hours")),
     formatTime(moment()),
   ];
 }
 
-function formatTime(time) {
-  return moment(time).format("YYYY-MM-DD HH:mm:ss");
+function isValidTimestamp(value) {
+  return typeof value === "number" && !Number.isNaN(value);
 }
 </script>

package/src/components/form/GreyPassword.vue

@@ -2,7 +2,7 @@
   <input
     type="password"
     :class="[
-      'input-block',
+      'pl-3 input-block',
       error ? 'ring-red-600 ' : '',
       readonly ? 'disabled' : '',
     ]"