@dative-gpi/foundation-shared-components 0.0.114 → 0.0.116

package/components/fields/FSTextArea.vue

@@ -14,7 +14,7 @@
       :class="classes"
       :rows="$props.rows"
       :hideDetails="true"
-      :noResize="!$props.resize"
+      :noResize="true"
       :autoGrow="$props.autoGrow"
       :readonly="!$props.editable"
       :clearable="$props.clearable && $props.editable && !!$props.modelValue"
@@ -37,13 +37,17 @@
       <template
         #clear
       >
-        <FSButton
-          v-if="$props.clearable && $props.editable && !!$props.modelValue"
-          icon="mdi-close"
-          variant="icon"
-          :color="ColorEnum.Dark"
-          @click="$emit('update:modelValue', null)"
-        />
+        <FSCol
+          align="center-center"
+        >
+          <FSButton
+            v-if="$props.clearable && $props.editable && !!$props.modelValue"
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:modelValue', null)"
+          />
+        </FSCol>
       </template>
     </v-textarea>
   </FSBaseField>
@@ -56,11 +60,13 @@ import { useColors, useBreakpoints, useRules } from "@dative-gpi/foundation-shar
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSBaseField from "./FSBaseField.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSTextArea",
   components: {
-    FSBaseField
+    FSBaseField,
+    FSCol
   },
   props: {
     label: {
@@ -83,11 +89,6 @@ export default defineComponent({
       required: false,
       default: 1
     },
-    resize: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     autoGrow: {
       type: Boolean,
       required: false,
@@ -136,17 +137,17 @@ export default defineComponent({
 
     const style = computed((): { [key: string] : string | null | undefined } => {
       let height: string | undefined = undefined;
-      let minHeight: string | undefined = undefined;
+      let fieldHeight: string | undefined = undefined;
       if (!props.autoGrow) {
-        const base = isMobileSized.value ? 30 : 34;
-        const row = isMobileSized.value ? 16 : 20;
-        minHeight = `${base}px`;
+        const base = isMobileSized.value ? 34 : 38;
+        const row = isMobileSized.value ? 14 : 16;
         if (props.rows > 1) {
           height = `${base + (props.rows - 1) * row}px`;
         }
         else {
           height = `${base}px`;
         }
+        fieldHeight = `${props.rows * row}px`;
       }
       if (!props.editable) {
         return {
@@ -154,8 +155,8 @@ export default defineComponent({
           "--fs-text-area-border-color"       : lights.base,
           "--fs-text-area-color"              : lights.dark,
           "--fs-text-area-active-border-color": lights.base,
-          "--fs-text-area-min-height"         : minHeight,
-          "--fs-text-area-height"             : height
+          "--fs-text-area-height"             : height,
+          "--fs-text-area-field-height"       : fieldHeight
         };
       }
       return {
@@ -164,8 +165,8 @@ export default defineComponent({
         "--fs-text-area-color"              : darks.base,
         "--fs-text-area-active-border-color": darks.dark,
         "--fs-text-area-error-border-color" : errors.base,
-        "--fs-text-area-min-height"         : minHeight,
-        "--fs-text-area-height"             : height
+        "--fs-text-area-height"             : height,
+        "--fs-text-area-field-height"       : fieldHeight
       };
     });
 
@@ -185,7 +186,7 @@ export default defineComponent({
       messages,
       blurred,
       classes,
-      style,
+      style
     };
   }
 });

package/components/lists/FSDataTableUI.vue

@@ -645,7 +645,8 @@ import { useRouter } from "vue-router";
 import { ColorEnum, FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { sizeToVar } from "../../utils";
+
+import { alphanumericSort, sizeToVar } from "../../utils";
 
 import FSDataIteratorItem from "./FSDataIteratorItem.vue";
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -944,19 +945,7 @@ export default defineComponent({
           }
           return {
             ...c,
-            sort: (a: any, b: any): number =>{
-              if (a === undefined && b === undefined) {
-                return 0;
-              }
-              if (a === undefined) {
-                return -1;
-              }
-              if (b === undefined) {
-                return 1;
-              }
-              return JSON.stringify(a)
-                .localeCompare(JSON.stringify(b), undefined, { numeric: true })
-            }
+            sort: alphanumericSort
           };
         })
     });
@@ -1001,9 +990,9 @@ export default defineComponent({
     });
 
     const groups = computed((): { [key: string]: any[] } => {
-      if (props.groupBy) {
+      if (props.groupBy && props.groupBy.key) {
         return innerItems.value.reduce((acc, item) => {
-          const key = item[props.groupBy.key];
+          const key = item[props.groupBy.key!];
           if (!acc[key]) {
             acc[key] = [];
           }

package/composables/useAutocomplete.ts

@@ -23,7 +23,7 @@ export const useAutocomplete = <TInfos>(
   const init = ref(true);
 
   const toggleSet = computed((): boolean => {
-    return allowToggleSet && entitiesLength.value <= breakpointToggleSet;
+    return allowToggleSet && entitiesLength.value > 0 && entitiesLength.value <= breakpointToggleSet;
   });
 
   const debouncedFetch = () => debounce(() => customFetch(search.value), debounceInterval);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.114",
+  "version": "0.0.116",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.114",
-    "@dative-gpi/foundation-shared-services": "0.0.114",
+    "@dative-gpi/foundation-shared-domain": "0.0.116",
+    "@dative-gpi/foundation-shared-services": "0.0.116",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "10b5d9cd947ab4de3f652d69bee6e2ec4f6a3d37"
+  "gitHead": "256a9873798401b1de30bb4c1ee289c037c30997"
 }

package/styles/components/fs_text_area.scss

@@ -18,19 +18,21 @@
             mask-image: none !important;
             -webkit-mask-image: none !important;
 
-            margin: 2px 2px 2px 0 !important;
+            min-height: var(--fs-text-area-field-height) !important;
+            max-height: var(--fs-text-area-field-height) !important;
             cursor: var(--fs-text-area-cursor) !important;
-            min-height: var(--fs-text-area-min-height);
-            height: var(--fs-text-area-height);
             color: var(--fs-text-area-color);
+            padding: 0;
+        }
+
+        height: var(--fs-text-area-height);
         
-            @include web {
-                padding: 12px 0 12px 16px !important;
-            }
-        
-            @include mobile {
-                padding: 7px 0 7px 16px !important;
-            }
+        @include web {
+            padding: 11px 16px !important;
+        }
+    
+        @include mobile {
+            padding: 10px 16px !important;
         }
     }
 }
@@ -56,19 +58,17 @@
             mask-image: none !important;
             -webkit-mask-image: none !important;
 
-            padding-inline: 0 !important;
-            margin: 2px 2px 2px 0 !important;
             cursor: var(--fs-text-area-cursor) !important;
-            height: var(--fs-text-area-height);
             color: var(--fs-text-area-color);
+            padding: 0;
+        }
         
-            @include web {
-                padding: 12px 0 12px 16px !important;
-            }
-        
-            @include mobile {
-                padding: 7px 0 7px 16px !important;
-            }
+        @include web {
+            padding: 11px 16px !important;
+        }
+    
+        @include mobile {
+            padding: 10px 16px !important;
         }
     }
 }

package/utils/sort.ts

@@ -1,9 +1,18 @@
 export const alphanumericSort = (a: any, b: any) => {
-    if (typeof(a) !== 'string') {
-        a = JSON.stringify(a);
-    }
-    if (typeof(b) !== 'string') {
-        b = JSON.stringify(b);
-    }
-    return a.localeCompare(b, undefined, { numeric: true });
+  if (a == null && b == null) {
+    return 0;
+  }
+  if (a == null) {
+    return -1;
+  }
+  if (b == null) {
+    return 1;
+  }
+  if (typeof(a) !== 'string') {
+    a = JSON.stringify(a);
+  }
+  if (typeof(b) !== 'string') {
+    b = JSON.stringify(b);
+  }
+  return a.localeCompare(b, undefined, { numeric: true });
 }