fluency-v8-components 1.4.9 → 1.5.1

package/dist/{index.es-le_XjTgU.mjs → index.es-Dtu7EDVY.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-RvcduEmd.mjs";
+import { c as Da, _ as Va, g as il } from "./index-CICR-543.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.4.9",
+  "version": "1.5.1",
   "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

@@ -13,7 +13,7 @@ const props = defineProps({
   from: Number,
   to: Number,
 });
-const emits = defineEmits(["selectTime"]);
+const emits = defineEmits(["selectTime", "error"]);
 const dateValue = ref(defaultRange());
 
 watch(
@@ -44,12 +44,24 @@ watch(
 
 watch(
   dateValue,
-  (val) => {
-    if (Array.isArray(val) && val.length === 2 && val[0] && val[1]) {
-      emits("selectTime", [
-        moment(val[0]).valueOf(),
-        moment(val[1]).valueOf(),
-      ]);
+  (newVal, oldVal) => {
+    if (Array.isArray(newVal) && newVal.length === 2 && newVal[0] && newVal[1]) {
+      if (newVal[0] > newVal[1]) {
+        // triggers component to break as component do not handle this case
+        emits('error', 'Time from is greater than time to')
+      } else if (Array.isArray(oldVal) && oldVal.length === 2 && oldVal[0] && oldVal[1]) {
+        if (oldVal[0] !== newVal[0] || oldVal[1] !== newVal[1]) {
+          emits("selectTime", [
+            moment(newVal[0]).valueOf(),
+            moment(newVal[1]).valueOf(),
+          ]);
+        }
+      } else {
+        emits("selectTime", [
+          moment(newVal[0]).valueOf(),
+          moment(newVal[1]).valueOf(),
+        ]);
+      }
     }
   },
   { deep: true }

package/src/components/dialogs/Wizard.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog :open="open" :title="title" size="large" @close="$emit('clickout')">
+  <Dialog :open="open" :title="title" :size="size" @close="$emit('clickout')">
     <template #header>
       <slot name="header" />
     </template>
@@ -52,6 +52,10 @@ const props = defineProps({
     type: [Boolean, Number],
     default: false,
   },
+  size: {
+    type: String,
+    default: "large",
+  },
 });
 const steps = ref(props.steps);
 const currentStep = ref(0);

package/src/components/form/GreyInputGrow.vue

@@ -3,21 +3,17 @@
     :class="['flex input-block relative', { 'std-red-ring ': error }]"
     v-bind="$attrs"
   >
-    <div
-      class="overflow-y-hidden whitespace-pre-wrap break-words min-h-6 invisible"
-    >
-      {{ $attrs.modelValue || props.value }}
-    </div>
     <textarea
+      ref="textarea"
       :class="[
-        'absolute right-0 top-0 bottom-0 left-0 resize-none border-0 py-2 px-3 text-sm bg-transparent p-0.5 focus:ring-0',
+        'py-2 px-3 w-full resize-none focus:outline-none border-0',
         readonly ? 'disabled' : '',
       ]"
       :value="$attrs.modelValue || props.value"
       v-bind="$attrs"
-      style="resize: none"
+      rows="1"
       :readonly="props.readonly"
-      @input="$emit('update:modelValue', $event.target.value)"
+      @input="autoExpand($event.target.value)"
     />
   </div>
   <div v-if="error" class="std-red-text text-sm">
@@ -25,6 +21,8 @@
   </div>
 </template>
 <script setup>
+import { ref } from "vue";
+
 const props = defineProps({
   error: {
     type: String,
@@ -38,5 +36,34 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  maxHeight: {
+    type: Number,
+    default: 200,
+  },
 });
+const emits = defineEmits(['update:modelValue']);
+
+// states
+const textarea = ref();
+
+// function defs
+function autoExpand(message) {
+  if (!textarea.value) return;
+
+  // 1. Reset height to initial state to correctly calculate scrollHeight
+  textarea.value.style.height = 'auto'; 
+  
+  // 2. Set height based on content
+  const scrollHeight = textarea.value.scrollHeight;
+  
+  if (scrollHeight <= props.maxHeight) {
+    textarea.value.style.height = `${scrollHeight}px`;
+    textarea.value.style.overflowY = 'hidden'; // Hide scrollbar if not maxed
+  } else {
+    // 3. Handle max height: set max height and enable scrollbar
+    textarea.value.style.height = `${props.maxHeight}px`;
+    textarea.value.style.overflowY = 'scroll';
+  }
+  emits("update:modelValue", message)
+};
 </script>