@fkui/vue-labs 6.36.0 → 6.37.0

package/dist/cjs/index.cjs.js

@@ -2708,13 +2708,12 @@ const inputFieldConfig = {
       personnummerFormat: {},
       personnummerLuhn: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "23"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "23"
+      };
+    }
   },
   "text:bankAccountNumber": {
     formatter(value) {
@@ -2726,13 +2725,12 @@ const inputFieldConfig = {
     validationConfig: {
       bankAccountNumber: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "40"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "40"
+      };
+    }
   },
   "text:bankgiro": {
     formatter(value) {
@@ -2747,13 +2745,12 @@ const inputFieldConfig = {
       },
       bankgiro: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "40"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "40"
+      };
+    }
   },
   "text:clearingNumber": {
     formatter(value) {
@@ -2765,13 +2762,12 @@ const inputFieldConfig = {
     validationConfig: {
       clearingNumber: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "16"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "16"
+      };
+    }
   },
   "text:currency": {
     formatter(value) {
@@ -2784,13 +2780,12 @@ const inputFieldConfig = {
       currency: {},
       integer: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "20"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "20"
+      };
+    }
   },
   "text:date": {
     formatter(value) {
@@ -2802,10 +2797,11 @@ const inputFieldConfig = {
     validationConfig: {
       date: {}
     },
-    attributes: () => [{
-      name: "type",
-      value: "text"
-    }]
+    attributes: () => {
+      return {
+        type: "text"
+      };
+    }
   },
   "text:email": {
     formatter(value) {
@@ -2820,13 +2816,12 @@ const inputFieldConfig = {
         length: 80
       }
     },
-    attributes: () => [{
-      name: "type",
-      value: "email"
-    }, {
-      name: "maxlength",
-      value: "80"
-    }]
+    attributes: () => {
+      return {
+        type: "email",
+        maxlength: "80"
+      };
+    }
   },
   "text:number": {
     formatter(value) {
@@ -2840,13 +2835,12 @@ const inputFieldConfig = {
     validationConfig: {
       number: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "20"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "20"
+      };
+    }
   },
   "text:organisationsnummer": {
     formatter(value) {
@@ -2861,13 +2855,12 @@ const inputFieldConfig = {
       },
       organisationsnummer: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "20"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "20"
+      };
+    }
   },
   "text:percent": {
     formatter(value) {
@@ -2887,14 +2880,12 @@ const inputFieldConfig = {
         maxValue: 999
       }
     },
-    attributes: (decimals) => {
-      return [{
-        name: "inputmode",
-        value: decimals ? "decimal" : "numeric"
-      }, {
-        name: "maxlength",
-        value: "10"
-      }];
+    attributes: (options) => {
+      const decimals = options?.decimals;
+      return {
+        inputmode: decimals ? "decimal" : "numeric",
+        maxlength: "10"
+      };
     }
   },
   "text:phoneNumber": {
@@ -2910,13 +2901,12 @@ const inputFieldConfig = {
       },
       phoneNumber: {}
     },
-    attributes: () => [{
-      name: "maxlength",
-      value: "80"
-    }, {
-      name: "type",
-      value: "tel"
-    }]
+    attributes: () => {
+      return {
+        maxlength: "80",
+        type: "tel"
+      };
+    }
   },
   "text:plusgiro": {
     formatter(value) {
@@ -2931,13 +2921,12 @@ const inputFieldConfig = {
       },
       plusgiro: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "16"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "16"
+      };
+    }
   },
   "text:postalCode": {
     formatter(value) {
@@ -2952,13 +2941,12 @@ const inputFieldConfig = {
       },
       postalCode: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "15"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "15"
+      };
+    }
   },
   text: {
     formatter(value) {
@@ -2968,7 +2956,9 @@ const inputFieldConfig = {
       return value;
     },
     validationConfig: {},
-    attributes: () => []
+    attributes: () => {
+      return {};
+    }
   }
 };
 const _hoisted_1$c = ["aria-sort"];
@@ -3854,6 +3844,14 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     function onClose() {
       isOpen.value = false;
     }
+    function onFocusout(event) {
+      const validTarget = event.relatedTarget && event.relatedTarget instanceof HTMLElement;
+      const inPopup = validTarget && Boolean(event.relatedTarget.closest(".popup"));
+      if (inPopup) {
+        return;
+      }
+      isOpen.value = false;
+    }
     function onSelect(key) {
       const action = actions.value.find((it) => it.key === key);
       action?.onClick(__props.row);
@@ -3875,7 +3873,8 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         items: menuitems.value,
         anchor: (_buttonRef$value = buttonRef.value) !== null && _buttonRef$value !== void 0 ? _buttonRef$value : void 0,
         onClose,
-        onSelect
+        onSelect,
+        onFocusout
       }, null, 8, ["is-open", "items", "anchor"])])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$4));
     };
   }
@@ -4094,16 +4093,45 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-function addInputValidators(inputElement, type, decimals) {
-  logic.ValidationService.addValidatorsToElement(inputElement, inputFieldConfig[type].validationConfig, true);
-  const options = void 0;
-  const attributes = inputFieldConfig[type].attributes(options);
-  for (const {
-    name,
-    value
-  } of attributes) {
-    inputElement.setAttribute(name, value);
+function defaultTnumValue(type) {
+  const tnumTypes = ["text:bankAccountNumber", "text:bankgiro", "text:clearingNumber", "text:currency", "text:number", "text:organisationsnummer", "text:percent", "text:personnummer", "text:phoneNumber", "text:plusgiro", "text:postalCode"];
+  return tnumTypes.includes(type);
+}
+function getLabelFn(fn) {
+  if (fn) {
+    return fn;
   }
+  return () => "";
+}
+function getUpdateFn(fn, key) {
+  if (fn) {
+    return fn;
+  }
+  if (key) {
+    return (row, value) => {
+      row[key] = value;
+    };
+  }
+  return () => void 0;
+}
+function getValueFn(fn, key, coerce, defaultValue) {
+  if (fn) {
+    return fn;
+  }
+  if (key) {
+    return (row) => {
+      var _row$key;
+      return coerce((_row$key = row[key]) !== null && _row$key !== void 0 ? _row$key : defaultValue);
+    };
+  }
+  return () => defaultValue;
+}
+function isColumnTypeNumber(column) {
+  const type = column.type;
+  return numberTypes.includes(type);
+}
+function addInputValidators(inputElement, type) {
+  logic.ValidationService.addValidatorsToElement(inputElement, inputFieldConfig[type].validationConfig, true);
 }
 function isAlphanumeric(e) {
   return e.key.length === 1 && !e.ctrlKey && !e.metaKey;
@@ -4136,8 +4164,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const viewValue = vue.ref("");
     const inEdit = vue.ref(false);
-    const cellId = vue.useId();
-    const inputId = vue.useId();
+    const cellId = logic.ElementIdService.generateElementId();
+    const inputId = logic.ElementIdService.generateElementId();
     const validity = vue.ref({
       isValid: true,
       validationMessage: "",
@@ -4191,6 +4219,22 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       }
       return value.length > 0 ? value : void 0;
     });
+    const columnAttributes = vue.computed(() => {
+      if (__props.column.attributes && typeof __props.column.attributes === "function") {
+        return __props.column.attributes(__props.row);
+      } else {
+        return __props.column.attributes;
+      }
+    });
+    const configAttributes = vue.computed(() => {
+      let decimals = void 0;
+      if (isColumnTypeNumber(__props.column)) {
+        decimals = __props.column.decimals;
+      }
+      return inputFieldConfig[__props.column.type].attributes({
+        decimals
+      });
+    });
     const tdElement = vue.useTemplateRef("td");
     const inputElement = vue.useTemplateRef("input");
     const penElement = vue.useTemplateRef("pen");
@@ -4308,9 +4352,9 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       const value = __props.column.value(__props.row);
       if (validity.value.isValid) {
         var _props$column$format;
-        return (_props$column$format = __props.column.formatter(value)) !== null && _props$column$format !== void 0 ? _props$column$format : value;
+        return (_props$column$format = __props.column.formatter(value)) !== null && _props$column$format !== void 0 ? _props$column$format : value.toString();
       }
-      return value;
+      return value.toString();
     }
     function toColumnValue(value) {
       logic.assertRef(validity);
@@ -4428,18 +4472,22 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         onKeydown
       }, [vue.createElementVNode("div", {
         class: vue.normalizeClass(divClasses.value)
-      }, [vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(fromColumnValue()), 1), _cache[1] || (_cache[1] = vue.createTextVNode()), viewModeErrorMessage.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(viewModeErrorMessage.value), 1)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("input", {
+      }, [vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(fromColumnValue()), 1), _cache[1] || (_cache[1] = vue.createTextVNode()), viewModeErrorMessage.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(viewModeErrorMessage.value), 1)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
         id: vue.unref(inputId),
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => viewValue.value = $event),
-        class: vue.normalizeClass(inputClasses.value),
+        class: inputClasses.value,
         type: "text",
         maxlength: "40",
         tabindex: "-1",
-        "aria-label": ariaLabel.value,
+        "aria-label": ariaLabel.value
+      }, {
+        ...configAttributes.value,
+        ...columnAttributes.value
+      }, {
         onValidity,
         onPendingValidity
-      }, null, 42, _hoisted_4$2), [[vue.vModelText, viewValue.value]]), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_5$2, [vue.createVNode(vue.unref(vue$1.FIcon), {
+      }), null, 16, _hoisted_4$2), [[vue.vModelText, viewValue.value]]), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_5$2, [vue.createVNode(vue.unref(vue$1.FIcon), {
         name: "pen",
         class: "table-ng__editable__icon"
       })], 512)], 2), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.IPopupError), {
@@ -4457,39 +4505,6 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-function defaultTnumValue(type) {
-  const tnumTypes = ["text:bankAccountNumber", "text:bankgiro", "text:clearingNumber", "text:currency", "text:number", "text:organisationsnummer", "text:percent", "text:personnummer", "text:phoneNumber", "text:plusgiro", "text:postalCode"];
-  return tnumTypes.includes(type);
-}
-function getLabelFn(fn) {
-  if (fn) {
-    return fn;
-  }
-  return () => "";
-}
-function getUpdateFn(fn, key) {
-  if (fn) {
-    return fn;
-  }
-  if (key) {
-    return (row, value) => {
-      row[key] = value;
-    };
-  }
-  return () => void 0;
-}
-function getValueFn(fn, key, coerce, defaultValue) {
-  if (fn) {
-    return fn;
-  }
-  if (key) {
-    return (row) => {
-      var _row$key;
-      return coerce((_row$key = row[key]) !== null && _row$key !== void 0 ? _row$key : defaultValue);
-    };
-  }
-  return () => defaultValue;
-}
 function normalizeAnchorColumn(column) {
   var _column$key;
   return {
@@ -4579,6 +4594,7 @@ function normalizeNumberColumn(column) {
     decimals,
     tnum: (_column$tnum = column.tnum) !== null && _column$tnum !== void 0 ? _column$tnum : defaultTnumValue(type),
     align: (_column$align = column.align) !== null && _column$align !== void 0 ? _column$align : "right",
+    attributes: column.attributes,
     value: getValueFn(column.value, column.key, String, ""),
     update: getUpdateFn(column.update, column.key),
     editable: typeof column.editable === "function" ? column.editable : () => {
@@ -4660,6 +4676,7 @@ function normalizeTextColumn(column) {
     type,
     tnum: (_column$tnum = column.tnum) !== null && _column$tnum !== void 0 ? _column$tnum : defaultTnumValue(type),
     align: (_column$align = column.align) !== null && _column$align !== void 0 ? _column$align : "left",
+    attributes: column.attributes,
     label: getLabelFn(column.label),
     value: getValueFn(column.value, column.key, String, ""),
     update: getUpdateFn(column.update, column.key),