@fkui/vue-labs 6.37.0 → 6.38.0

package/dist/cjs/index.cjs.js

@@ -2618,7 +2618,7 @@ const _hoisted_1$e = {
   class: "table-ng__cell table-ng__cell--expand"
 };
 const _hoisted_2$a = ["aria-label", "aria-expanded"];
-const _hoisted_3$8 = {
+const _hoisted_3$7 = {
   key: 1,
   ref: "expandable",
   tabindex: "-1",
@@ -2664,7 +2664,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createVNode(vue.unref(vue$1.FIcon), {
         class: "button__icon",
         name: toggleIcon.value
-      }, null, 8, ["name"])], 8, _hoisted_2$a)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$8, null, 512));
+      }, null, 8, ["name"])], 8, _hoisted_2$a)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$7, null, 512));
     };
   }
 });
@@ -3082,7 +3082,7 @@ const _hoisted_1$b = {
   scope: "col",
   class: "table-ng__column table-ng__column--selectable"
 };
-const _hoisted_2$9 = ["checked", "indeterminate"];
+const _hoisted_2$9 = ["checked", "indeterminate", "aria-label"];
 const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableHeaderSelectable",
   props: {
@@ -3097,9 +3097,13 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     emit: __emit
   }) {
     const emit = __emit;
+    const $t = vue$1.useTranslate();
     const indeterminate = vue.computed(() => __props.state === "indeterminate");
     const checked = vue.computed(() => __props.state === "indeterminate" ? false : __props.state);
     const expose = {};
+    const ariaLabel = vue.computed(() => {
+      return !checked.value || indeterminate.value ? $t("fkui.ftable.select-all.aria-label", "Välj alla rader") : $t("fkui.ftable.unselect-all.aria-label", "Avmarkera alla rader");
+    });
     if (__props.selectable === "multi") {
       const inputRef = vue.useTemplateRef("input");
       expose.tabstopEl = inputRef;
@@ -3112,7 +3116,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
         checked: checked.value,
         indeterminate: indeterminate.value,
         type: "checkbox",
-        "aria-label": "select all",
+        "aria-label": ariaLabel.value,
         tabindex: "-1",
         onChange: _cache[0] || (_cache[0] = ($event) => emit("toggle"))
       }, null, 40, _hoisted_2$9)) : vue.createCommentVNode("", true)]);
@@ -3124,7 +3128,7 @@ const _hoisted_1$a = {
   class: "table-ng__cell table-ng__cell--checkbox"
 };
 const _hoisted_2$8 = ["checked", "aria-label"];
-const _hoisted_3$7 = {
+const _hoisted_3$6 = {
   key: 1,
   ref: "target",
   tabindex: "-1",
@@ -3161,7 +3165,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         "aria-label": ariaLabel.value,
         tabindex: "-1",
         onChange
-      }, null, 40, _hoisted_2$8)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$7, [vue.createElementVNode("input", {
+      }, null, 40, _hoisted_2$8)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$6, [vue.createElementVNode("input", {
         checked: Boolean(__props.column.checked(__props.row)),
         type: "checkbox",
         "aria-label": ariaLabel.value
@@ -3662,7 +3666,7 @@ const _hoisted_1$7 = {
   class: "table-ng__cell table-ng__cell--anchor"
 };
 const _hoisted_2$6 = ["href"];
-const _hoisted_3$6 = {
+const _hoisted_3$5 = {
   key: 1,
   ref: "target",
   tabindex: "-1",
@@ -3692,7 +3696,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
         target: "_blank",
         href: __props.column.href,
         tabindex: "-1"
-      }, vue.toDisplayString(__props.column.text(__props.row)), 9, _hoisted_2$6)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$6, null, 512));
+      }, vue.toDisplayString(__props.column.text(__props.row)), 9, _hoisted_2$6)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$5, null, 512));
     };
   }
 });
@@ -3703,7 +3707,7 @@ const _hoisted_1$6 = {
 const _hoisted_2$5 = {
   class: "sr-only"
 };
-const _hoisted_3$5 = {
+const _hoisted_3$4 = {
   key: 1,
   ref: "td",
   tabindex: "-1",
@@ -3745,7 +3749,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         key: 0,
         library: __props.column.iconLibrary,
         name: __props.column.icon
-      }, null, 8, ["library", "name"])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_2$5, vue.toDisplayString(__props.column.text(__props.row)), 1)], 512)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$5, null, 512));
+      }, null, 8, ["library", "name"])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_2$5, vue.toDisplayString(__props.column.text(__props.row)), 1)], 512)])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$4, null, 512));
     };
   }
 });
@@ -3791,13 +3795,9 @@ function requireEs_iterator_find() {
 }
 requireEs_iterator_find();
 const _hoisted_1$5 = {
-  key: 0,
-  class: "table-ng__cell table-ng__cell--button"
-};
-const _hoisted_2$4 = {
   class: "sr-only"
 };
-const _hoisted_3$4 = {
+const _hoisted_2$4 = {
   key: 1,
   tabindex: "-1",
   class: "table-ng__cell"
@@ -3859,7 +3859,12 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __expose(expose);
     return (_ctx, _cache) => {
       var _buttonRef$value;
-      return renderButton.value ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_1$5, [vue.createElementVNode("button", {
+      return renderButton.value ? (vue.openBlock(), vue.createElementBlock("td", {
+        key: 0,
+        class: vue.normalizeClass(["table-ng__cell table-ng__cell--button", {
+          "table-ng__cell--menu-open": isOpen.value
+        }])
+      }, [vue.createElementVNode("button", {
         ref: "button",
         class: "icon-button",
         type: "button",
@@ -3868,14 +3873,14 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         onClick: onOpen
       }, [vue.createVNode(vue.unref(vue$1.FIcon), {
         name: "bars"
-      }), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_2$4, vue.toDisplayString(__props.column.text(__props.row)), 1)], 512), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FContextMenu), {
+      }), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$5, vue.toDisplayString(__props.column.text(__props.row)), 1)], 512), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FContextMenu), {
         "is-open": isOpen.value,
         items: menuitems.value,
         anchor: (_buttonRef$value = buttonRef.value) !== null && _buttonRef$value !== void 0 ? _buttonRef$value : void 0,
         onClose,
         onSelect,
         onFocusout
-      }, null, 8, ["is-open", "items", "anchor"])])) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_3$4));
+      }, null, 8, ["is-open", "items", "anchor"])], 2)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_2$4));
     };
   }
 });
@@ -3905,7 +3910,7 @@ const _hoisted_3$3 = ["aria-expanded", "aria-controls", "aria-activedescendant",
 const _hoisted_4$3 = {
   class: "table-ng__editable__text"
 };
-const _hoisted_5$3 = {
+const _hoisted_5$2 = {
   key: 1,
   tabindex: "-1",
   class: "table-ng__cell table-ng__cell--static"
@@ -4058,10 +4063,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         tabindex: "-1",
         onKeydown: onCellKeyDown,
         onClick: vue.withModifiers(onCellClick, ["stop"])
-      }, [vue.withDirectives(vue.createElementVNode("div", _hoisted_1$4, [vue.createElementVNode("span", _hoisted_2$3, vue.toDisplayString(viewValue.value), 1), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FIcon), {
-        name: "arrow-down",
-        class: "table-ng__editable__icon"
-      })], 512), [[vue.vShow, !editing.value]]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("div", {
+      }, [vue.withDirectives(vue.createElementVNode("div", _hoisted_1$4, [vue.createElementVNode("span", _hoisted_2$3, vue.toDisplayString(viewValue.value), 1)], 512), [[vue.vShow, !editing.value]]), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("div", {
         ref: "edit",
         role: "combobox",
         tabindex: "-1",
@@ -4077,10 +4079,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         }, ["prevent"])),
         onKeydown: vue.withModifiers(onEditKeyDown, ["stop"]),
         onFocusout: _cache[2] || (_cache[2] = (e) => onEditBlur(e))
-      }, [vue.createElementVNode("span", _hoisted_4$3, vue.toDisplayString(viewValue.value), 1), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FIcon), {
-        name: "arrow-down",
-        class: "table-ng__editable__icon--active"
-      })], 40, _hoisted_3$3), [[vue.vShow, editing.value]]), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.withDirectives(vue.createVNode(vue.unref(vue$1.IComboboxDropdown), {
+      }, [vue.createElementVNode("span", _hoisted_4$3, vue.toDisplayString(viewValue.value), 1)], 40, _hoisted_3$3), [[vue.vShow, editing.value]]), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.withDirectives(vue.createVNode(vue.unref(vue$1.IComboboxDropdown), {
         id: vue.unref(dropdownId),
         "is-open": dropdownIsOpen.value,
         options: __props.column.options,
@@ -4089,7 +4088,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         "input-node": editRef.value,
         onSelect: selectDropdownOption,
         onClose: onDropdownClose
-      }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node"]), [[vue.vShow, editing.value]])], 32)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_5$3, vue.toDisplayString(__props.column.selected(__props.row)), 1));
+      }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node"]), [[vue.vShow, editing.value]])], 32)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_5$2, vue.toDisplayString(__props.column.selected(__props.row)), 1));
     };
   }
 });
@@ -4145,9 +4144,6 @@ const _hoisted_3$2 = {
   class: "sr-only"
 };
 const _hoisted_4$2 = ["id", "aria-label"];
-const _hoisted_5$2 = {
-  ref: "pen"
-};
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "ITableText",
   props: {
@@ -4237,7 +4233,6 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     });
     const tdElement = vue.useTemplateRef("td");
     const inputElement = vue.useTemplateRef("input");
-    const penElement = vue.useTemplateRef("pen");
     const {
       stopEdit: stopEdit2
     } = useStartStopEdit();
@@ -4299,20 +4294,20 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     });
     vue.watchEffect(() => {
       if (hasError.value) {
-        var _tdElement$value, _penElement$value;
+        var _tdElement$value, _inputElement$value;
         emit("onError", {
           anchor: (_tdElement$value = tdElement.value) !== null && _tdElement$value !== void 0 ? _tdElement$value : void 0,
-          arrowAnchor: (_penElement$value = penElement.value) !== null && _penElement$value !== void 0 ? _penElement$value : void 0,
+          arrowAnchor: (_inputElement$value = inputElement.value) !== null && _inputElement$value !== void 0 ? _inputElement$value : void 0,
           message: validity.value.validationMessage,
           hasFocus: focused.value,
           hasHover: isHovered.value,
           inEdit: inEdit.value
         });
       } else {
-        var _tdElement$value2, _penElement$value2;
+        var _tdElement$value2, _inputElement$value2;
         emit("closeError", {
           anchor: (_tdElement$value2 = tdElement.value) !== null && _tdElement$value2 !== void 0 ? _tdElement$value2 : void 0,
-          arrowAnchor: (_penElement$value2 = penElement.value) !== null && _penElement$value2 !== void 0 ? _penElement$value2 : void 0,
+          arrowAnchor: (_inputElement$value2 = inputElement.value) !== null && _inputElement$value2 !== void 0 ? _inputElement$value2 : void 0,
           message: validity.value.validationMessage,
           hasFocus: focused.value,
           hasHover: isHovered.value,
@@ -4487,14 +4482,11 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       }, {
         onValidity,
         onPendingValidity
-      }), 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), {
+      }), null, 16, _hoisted_4$2), [[vue.vModelText, viewValue.value]])], 2), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.IPopupError), {
         anchor: tdElement.value,
         "is-open": openPopupError.value,
         "error-message": validity.value.validationMessage,
-        "arrow-anchor": penElement.value,
+        "arrow-anchor": inputElement.value,
         layout: "f-table"
       }, null, 8, ["anchor", "is-open", "error-message", "arrow-anchor"])], 42, _hoisted_1$3)) : (vue.openBlock(), vue.createElementBlock("td", {
         key: 1,
@@ -5131,6 +5123,9 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     striped: {
       type: Boolean
     },
+    disableDividers: {
+      type: Boolean
+    },
     selectable: {
       default: () => void 0
     }
@@ -5178,7 +5173,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     });
     const columns = vue.computed(() => normalizeTableColumns(__props.columns));
     const tableClasses = vue.computed(() => {
-      return __props.striped ? "table-ng table-ng--striped" : "table-ng";
+      return ["table-ng", {
+        "table-ng--striped": __props.striped,
+        "table-ng--divided": !__props.disableDividers
+      }];
     });
     const slots = vue.useSlots();
     const hasExpandableSlot = vue.computed(() => {