@fkui/vue-labs 6.36.0 → 6.36.1

package/dist/esm/index.esm.js

@@ -1,4 +1,4 @@
-import { nextTick, toValue, defineComponent, useTemplateRef, computed, openBlock, createElementBlock, createElementVNode, createVNode, unref, renderSlot, withModifiers, normalizeClass, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, ref, inject, withDirectives, vShow, useId, onMounted, watchEffect, vModelText, toRef, watch, onUpdated, useModel, useSlots, provide, Fragment, renderList, mergeProps, resolveDynamicComponent, mergeModels, resolveDirective, normalizeProps, guardReactiveProps } from "vue";
+import { nextTick, toValue, defineComponent, useTemplateRef, computed, openBlock, createElementBlock, createElementVNode, createVNode, unref, renderSlot, withModifiers, normalizeClass, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, ref, inject, withDirectives, vShow, onMounted, watchEffect, mergeProps, vModelText, toRef, watch, onUpdated, useModel, useSlots, provide, Fragment, renderList, resolveDynamicComponent, mergeModels, resolveDirective, normalizeProps, guardReactiveProps } from "vue";
 import { assertRef, formatPostalCode, parsePlusgiro, parseNumber, formatNumber, parseOrganisationsnummer, parseDate, parseClearingNumber, parseBankgiro, parseBankAccountNumber, parsePersonnummer, formatPersonnummer, ElementIdService, assertSet, ValidationService, alertScreenReader, debounce, isEmpty, stripWhitespace, isSet, TranslationService } from "@fkui/logic";
 import { FIcon, IFlex, IFlexItem, useTranslate, getItemIdentifier, FContextMenu, IComboboxDropdown, IPopupError, dispatchComponentValidityEvent, findItemIdentifier, useSlotUtils, setItemIdentifiers, FSortFilterDatasetInjected, EventBus, FFileSelector, FFileItem, TranslationMixin, FTextField, useTextFieldSetup } from "@fkui/vue";
 import { useElementHover, useFocusWithin, useEventListener } from "@vueuse/core";
@@ -2706,13 +2706,12 @@ const inputFieldConfig = {
       personnummerFormat: {},
       personnummerLuhn: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "23"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "23"
+      };
+    }
   },
   "text:bankAccountNumber": {
     formatter(value) {
@@ -2724,13 +2723,12 @@ const inputFieldConfig = {
     validationConfig: {
       bankAccountNumber: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "40"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "40"
+      };
+    }
   },
   "text:bankgiro": {
     formatter(value) {
@@ -2745,13 +2743,12 @@ const inputFieldConfig = {
       },
       bankgiro: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "40"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "40"
+      };
+    }
   },
   "text:clearingNumber": {
     formatter(value) {
@@ -2763,13 +2760,12 @@ const inputFieldConfig = {
     validationConfig: {
       clearingNumber: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "16"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "16"
+      };
+    }
   },
   "text:currency": {
     formatter(value) {
@@ -2782,13 +2778,12 @@ const inputFieldConfig = {
       currency: {},
       integer: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "20"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "20"
+      };
+    }
   },
   "text:date": {
     formatter(value) {
@@ -2800,10 +2795,11 @@ const inputFieldConfig = {
     validationConfig: {
       date: {}
     },
-    attributes: () => [{
-      name: "type",
-      value: "text"
-    }]
+    attributes: () => {
+      return {
+        type: "text"
+      };
+    }
   },
   "text:email": {
     formatter(value) {
@@ -2818,13 +2814,12 @@ const inputFieldConfig = {
         length: 80
       }
     },
-    attributes: () => [{
-      name: "type",
-      value: "email"
-    }, {
-      name: "maxlength",
-      value: "80"
-    }]
+    attributes: () => {
+      return {
+        type: "email",
+        maxlength: "80"
+      };
+    }
   },
   "text:number": {
     formatter(value) {
@@ -2838,13 +2833,12 @@ const inputFieldConfig = {
     validationConfig: {
       number: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "20"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "20"
+      };
+    }
   },
   "text:organisationsnummer": {
     formatter(value) {
@@ -2859,13 +2853,12 @@ const inputFieldConfig = {
       },
       organisationsnummer: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "20"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "20"
+      };
+    }
   },
   "text:percent": {
     formatter(value) {
@@ -2885,14 +2878,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": {
@@ -2908,13 +2899,12 @@ const inputFieldConfig = {
       },
       phoneNumber: {}
     },
-    attributes: () => [{
-      name: "maxlength",
-      value: "80"
-    }, {
-      name: "type",
-      value: "tel"
-    }]
+    attributes: () => {
+      return {
+        maxlength: "80",
+        type: "tel"
+      };
+    }
   },
   "text:plusgiro": {
     formatter(value) {
@@ -2929,13 +2919,12 @@ const inputFieldConfig = {
       },
       plusgiro: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "16"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "16"
+      };
+    }
   },
   "text:postalCode": {
     formatter(value) {
@@ -2950,13 +2939,12 @@ const inputFieldConfig = {
       },
       postalCode: {}
     },
-    attributes: () => [{
-      name: "inputmode",
-      value: "numeric"
-    }, {
-      name: "maxlength",
-      value: "15"
-    }]
+    attributes: () => {
+      return {
+        inputmode: "numeric",
+        maxlength: "15"
+      };
+    }
   },
   text: {
     formatter(value) {
@@ -2966,7 +2954,9 @@ const inputFieldConfig = {
       return value;
     },
     validationConfig: {},
-    attributes: () => []
+    attributes: () => {
+      return {};
+    }
   }
 };
 const _hoisted_1$c = ["aria-sort"];
@@ -3852,6 +3842,14 @@ const _sfc_main$7 = /* @__PURE__ */ 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);
@@ -3873,7 +3871,8 @@ const _sfc_main$7 = /* @__PURE__ */ 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"])])) : (openBlock(), createElementBlock("td", _hoisted_3$4));
     };
   }
@@ -4092,16 +4091,45 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function addInputValidators(inputElement, type, decimals) {
-  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) {
+  ValidationService.addValidatorsToElement(inputElement, inputFieldConfig[type].validationConfig, true);
 }
 function isAlphanumeric(e) {
   return e.key.length === 1 && !e.ctrlKey && !e.metaKey;
@@ -4134,8 +4162,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const viewValue = ref("");
     const inEdit = ref(false);
-    const cellId = useId();
-    const inputId = useId();
+    const cellId = ElementIdService.generateElementId();
+    const inputId = ElementIdService.generateElementId();
     const validity = ref({
       isValid: true,
       validationMessage: "",
@@ -4189,6 +4217,22 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
       return value.length > 0 ? value : void 0;
     });
+    const columnAttributes = computed(() => {
+      if (__props.column.attributes && typeof __props.column.attributes === "function") {
+        return __props.column.attributes(__props.row);
+      } else {
+        return __props.column.attributes;
+      }
+    });
+    const configAttributes = computed(() => {
+      let decimals = void 0;
+      if (isColumnTypeNumber(__props.column)) {
+        decimals = __props.column.decimals;
+      }
+      return inputFieldConfig[__props.column.type].attributes({
+        decimals
+      });
+    });
     const tdElement = useTemplateRef("td");
     const inputElement = useTemplateRef("input");
     const penElement = useTemplateRef("pen");
@@ -4306,9 +4350,9 @@ const _sfc_main$4 = /* @__PURE__ */ 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) {
       assertRef(validity);
@@ -4426,18 +4470,22 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         onKeydown
       }, [createElementVNode("div", {
         class: normalizeClass(divClasses.value)
-      }, [createElementVNode("span", _hoisted_2$2, toDisplayString(fromColumnValue()), 1), _cache[1] || (_cache[1] = createTextVNode()), viewModeErrorMessage.value ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(viewModeErrorMessage.value), 1)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), withDirectives(createElementVNode("input", {
+      }, [createElementVNode("span", _hoisted_2$2, toDisplayString(fromColumnValue()), 1), _cache[1] || (_cache[1] = createTextVNode()), viewModeErrorMessage.value ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(viewModeErrorMessage.value), 1)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), withDirectives(createElementVNode("input", mergeProps({
         id: unref(inputId),
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => viewValue.value = $event),
-        class: 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), [[vModelText, viewValue.value]]), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("div", _hoisted_5$2, [createVNode(unref(FIcon), {
+      }), null, 16, _hoisted_4$2), [[vModelText, viewValue.value]]), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("div", _hoisted_5$2, [createVNode(unref(FIcon), {
         name: "pen",
         class: "table-ng__editable__icon"
       })], 512)], 2), _cache[4] || (_cache[4] = createTextVNode()), createVNode(unref(IPopupError), {
@@ -4455,39 +4503,6 @@ const _sfc_main$4 = /* @__PURE__ */ 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 {
@@ -4577,6 +4592,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 : () => {
@@ -4658,6 +4674,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),