fluency-v8-components 1.3.8 → 1.4.0

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

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-mewQ1Z9n.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.8",
+  "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/assets/main.css

@@ -4,11 +4,23 @@
 }
 
 @utility editor-style {
+  font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+  padding: 10px 5px 10px 5px;
+  :focus {
+    outline: none;
+  }
+}
+
+@utility editor-style-light {
+  scrollbar-color: #94a3b8 #64748b;
+  background: #475569;
+  color: #f8fafc;
+}
+
+@utility editor-style-dark {
   scrollbar-color: #e0e7ff #303030;
   background: #303030;
   color: #FFFFFF;
-  font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
-  padding: 10px 5px 10px 5px;
 }
 
 @utility report-container {

package/src/components/common/AutoCompleteSearchBar.vue

@@ -8,7 +8,7 @@
             placeholder="Search"
             @input="onChange"
             @keyup.enter="emits('search', newVal)"
-            class="w-full dark:dark-bg py-2 px-2"
+            class="w-full bg-white outline-1 dark:dark-bg py-2 px-2"
           />
           <transition
             enter-active-class="transition duration-100 ease-out"

package/src/components/common/CodeEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <PrismEditor
-    class="editor-style"
+    :class="['editor-style', props.theme === 'dark' ? 'editor-style-dark' : 'editor-style-light']"
     v-bind="$attrs"
     :style="`fontSize: ${props.fontSize}`"
     :readonly="props.readonly"
@@ -18,6 +18,10 @@ import "@/assets/prism-theme.css"; // import syntax highlighting styles
 
 // props and emits
 const props = defineProps({
+  theme: {
+    type: String,
+    default: "dark",
+  },
   fontSize: {
     type: String,
     default: "12px",

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/common/EditorHeading.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-neutral-600 text-white pl-3 py-1 sm:flex sm:items-center sm:justify-between content-center"
+    class="bg-gray-400 pl-3 py-1 sm:flex sm:items-center sm:justify-between content-center dark:bg-neutral-600 dark:text-white"
   >
     <slot name="title" />
     <div class="mt-3 flex sm:mt-0">

package/src/components/form/GreyInputAutocomplete.vue

@@ -15,7 +15,7 @@
       :displayValue="(option) => option"
     />
     <ComboboxOptions
-      class="input-block absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
+      class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
     >
       <ComboboxOption
         v-if="queryOption && !filteredOptions.some((option) => option.value === queryOption)"

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' : '',
     ]"

package/src/components/form/GreySelectInput.vue

@@ -4,7 +4,7 @@
       <input
         type="text"
         :class="[
-          'input-block',
+          'pl-3 input-block',
           error ? 'ring-red-600 ' : '',
           readonly ? 'disabled' : '',
         ]"
@@ -24,7 +24,7 @@
         leave-to-class="opacity-0"
       >
         <ComboboxOptions
-          class="input-block absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base sm:text-sm"
+          class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base sm:text-sm"
         >
           <ComboboxOption
             as="template"

package/src/components/form/GreySelectInputMultiple.vue

@@ -24,7 +24,7 @@
           </div>
           <div
             v-if="!readonly"
-            class="relative z-10 flex flex-auto flex-row-reverse"
+            class="relative z-9 flex flex-auto flex-row-reverse"
           >
             <XMarkIcon
               class="icon cursor-pointer hover:opacity-75"
@@ -64,7 +64,7 @@
       @after-leave="query = ''"
     >
       <ComboboxOptions
-        class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
+        class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
       >
         <div
           v-if="filteredOptions.length === 0 && query !== ''"