@fkui/vue-labs 6.36.1 → 6.38.0

package/dist/esm/index.esm.js

@@ -2616,7 +2616,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",
@@ -2662,7 +2662,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }, [createVNode(unref(FIcon), {
         class: "button__icon",
         name: toggleIcon.value
-      }, null, 8, ["name"])], 8, _hoisted_2$a)])) : (openBlock(), createElementBlock("td", _hoisted_3$8, null, 512));
+      }, null, 8, ["name"])], 8, _hoisted_2$a)])) : (openBlock(), createElementBlock("td", _hoisted_3$7, null, 512));
     };
   }
 });
@@ -3080,7 +3080,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__ */ defineComponent({
   __name: "ITableHeaderSelectable",
   props: {
@@ -3095,9 +3095,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     emit: __emit
   }) {
     const emit = __emit;
+    const $t = useTranslate();
     const indeterminate = computed(() => __props.state === "indeterminate");
     const checked = computed(() => __props.state === "indeterminate" ? false : __props.state);
     const expose = {};
+    const ariaLabel = 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 = useTemplateRef("input");
       expose.tabstopEl = inputRef;
@@ -3110,7 +3114,7 @@ const _sfc_main$d = /* @__PURE__ */ 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)) : createCommentVNode("", true)]);
@@ -3122,7 +3126,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",
@@ -3159,7 +3163,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         "aria-label": ariaLabel.value,
         tabindex: "-1",
         onChange
-      }, null, 40, _hoisted_2$8)])) : (openBlock(), createElementBlock("td", _hoisted_3$7, [createElementVNode("input", {
+      }, null, 40, _hoisted_2$8)])) : (openBlock(), createElementBlock("td", _hoisted_3$6, [createElementVNode("input", {
         checked: Boolean(__props.column.checked(__props.row)),
         type: "checkbox",
         "aria-label": ariaLabel.value
@@ -3660,7 +3664,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",
@@ -3690,7 +3694,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         target: "_blank",
         href: __props.column.href,
         tabindex: "-1"
-      }, toDisplayString(__props.column.text(__props.row)), 9, _hoisted_2$6)])) : (openBlock(), createElementBlock("td", _hoisted_3$6, null, 512));
+      }, toDisplayString(__props.column.text(__props.row)), 9, _hoisted_2$6)])) : (openBlock(), createElementBlock("td", _hoisted_3$5, null, 512));
     };
   }
 });
@@ -3701,7 +3705,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",
@@ -3743,7 +3747,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         key: 0,
         library: __props.column.iconLibrary,
         name: __props.column.icon
-      }, null, 8, ["library", "name"])) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_2$5, toDisplayString(__props.column.text(__props.row)), 1)], 512)])) : (openBlock(), createElementBlock("td", _hoisted_3$5, null, 512));
+      }, null, 8, ["library", "name"])) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_2$5, toDisplayString(__props.column.text(__props.row)), 1)], 512)])) : (openBlock(), createElementBlock("td", _hoisted_3$4, null, 512));
     };
   }
 });
@@ -3789,13 +3793,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"
@@ -3857,7 +3857,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     __expose(expose);
     return (_ctx, _cache) => {
       var _buttonRef$value;
-      return renderButton.value ? (openBlock(), createElementBlock("td", _hoisted_1$5, [createElementVNode("button", {
+      return renderButton.value ? (openBlock(), createElementBlock("td", {
+        key: 0,
+        class: normalizeClass(["table-ng__cell table-ng__cell--button", {
+          "table-ng__cell--menu-open": isOpen.value
+        }])
+      }, [createElementVNode("button", {
         ref: "button",
         class: "icon-button",
         type: "button",
@@ -3866,14 +3871,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         onClick: onOpen
       }, [createVNode(unref(FIcon), {
         name: "bars"
-      }), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_2$4, toDisplayString(__props.column.text(__props.row)), 1)], 512), _cache[1] || (_cache[1] = createTextVNode()), createVNode(unref(FContextMenu), {
+      }), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_1$5, toDisplayString(__props.column.text(__props.row)), 1)], 512), _cache[1] || (_cache[1] = createTextVNode()), createVNode(unref(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"])])) : (openBlock(), createElementBlock("td", _hoisted_3$4));
+      }, null, 8, ["is-open", "items", "anchor"])], 2)) : (openBlock(), createElementBlock("td", _hoisted_2$4));
     };
   }
 });
@@ -3903,7 +3908,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"
@@ -4056,10 +4061,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         tabindex: "-1",
         onKeydown: onCellKeyDown,
         onClick: withModifiers(onCellClick, ["stop"])
-      }, [withDirectives(createElementVNode("div", _hoisted_1$4, [createElementVNode("span", _hoisted_2$3, toDisplayString(viewValue.value), 1), _cache[3] || (_cache[3] = createTextVNode()), createVNode(unref(FIcon), {
-        name: "arrow-down",
-        class: "table-ng__editable__icon"
-      })], 512), [[vShow, !editing.value]]), _cache[5] || (_cache[5] = createTextVNode()), withDirectives(createElementVNode("div", {
+      }, [withDirectives(createElementVNode("div", _hoisted_1$4, [createElementVNode("span", _hoisted_2$3, toDisplayString(viewValue.value), 1)], 512), [[vShow, !editing.value]]), _cache[3] || (_cache[3] = createTextVNode()), withDirectives(createElementVNode("div", {
         ref: "edit",
         role: "combobox",
         tabindex: "-1",
@@ -4075,10 +4077,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         }, ["prevent"])),
         onKeydown: withModifiers(onEditKeyDown, ["stop"]),
         onFocusout: _cache[2] || (_cache[2] = (e) => onEditBlur(e))
-      }, [createElementVNode("span", _hoisted_4$3, toDisplayString(viewValue.value), 1), _cache[4] || (_cache[4] = createTextVNode()), createVNode(unref(FIcon), {
-        name: "arrow-down",
-        class: "table-ng__editable__icon--active"
-      })], 40, _hoisted_3$3), [[vShow, editing.value]]), _cache[6] || (_cache[6] = createTextVNode()), withDirectives(createVNode(unref(IComboboxDropdown), {
+      }, [createElementVNode("span", _hoisted_4$3, toDisplayString(viewValue.value), 1)], 40, _hoisted_3$3), [[vShow, editing.value]]), _cache[4] || (_cache[4] = createTextVNode()), withDirectives(createVNode(unref(IComboboxDropdown), {
         id: unref(dropdownId),
         "is-open": dropdownIsOpen.value,
         options: __props.column.options,
@@ -4087,7 +4086,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         "input-node": editRef.value,
         onSelect: selectDropdownOption,
         onClose: onDropdownClose
-      }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node"]), [[vShow, editing.value]])], 32)) : (openBlock(), createElementBlock("td", _hoisted_5$3, toDisplayString(__props.column.selected(__props.row)), 1));
+      }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node"]), [[vShow, editing.value]])], 32)) : (openBlock(), createElementBlock("td", _hoisted_5$2, toDisplayString(__props.column.selected(__props.row)), 1));
     };
   }
 });
@@ -4143,9 +4142,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__ */ defineComponent({
   __name: "ITableText",
   props: {
@@ -4235,7 +4231,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     const tdElement = useTemplateRef("td");
     const inputElement = useTemplateRef("input");
-    const penElement = useTemplateRef("pen");
     const {
       stopEdit: stopEdit2
     } = useStartStopEdit();
@@ -4297,20 +4292,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     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,
@@ -4485,14 +4480,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }, {
         onValidity,
         onPendingValidity
-      }), 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), {
+      }), null, 16, _hoisted_4$2), [[vModelText, viewValue.value]])], 2), _cache[3] || (_cache[3] = createTextVNode()), createVNode(unref(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)) : (openBlock(), createElementBlock("td", {
         key: 1,
@@ -5129,6 +5121,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     striped: {
       type: Boolean
     },
+    disableDividers: {
+      type: Boolean
+    },
     selectable: {
       default: () => void 0
     }
@@ -5176,7 +5171,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     });
     const columns = computed(() => normalizeTableColumns(__props.columns));
     const tableClasses = 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 = useSlots();
     const hasExpandableSlot = computed(() => {