@fkui/vue 5.45.1 → 5.46.1

package/dist/cjs/index.cjs.js

@@ -5532,6 +5532,9 @@ const _sfc_main$12 = vue.defineComponent({
     };
   },
   computed: {
+    ariaLabel() {
+      return `${this.value.monthName} ${this.value.year}`;
+    },
     totalCols() {
       return this.hideWeekNumbers ? 7 : 8;
     },
@@ -5573,50 +5576,43 @@ const _sfc_main$12 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$O = {
+const _hoisted_1$O = ["aria-label"];
+const _hoisted_2$A = {
   key: 0,
   class: "calendar-month__col--week"
 };
-const _hoisted_2$A = {
-  role: "presentation"
-};
 const _hoisted_3$s = {
-  role: "presentation"
-};
-const _hoisted_4$n = {
   key: 0,
   scope: "col",
   "aria-hidden": "true",
   class: "calendar-month__header-cell"
 };
-const _hoisted_5$i = ["title"];
-const _hoisted_6$e = {
-  role: "presentation"
-};
-const _hoisted_7$d = {
+const _hoisted_4$n = ["title"];
+const _hoisted_5$i = {
   key: 0,
   class: "calendar-month__cell calendar-month__cell--week-number",
   "aria-hidden": "true"
 };
-const _hoisted_8$8 = ["colspan"];
-const _hoisted_9$5 = ["colspan"];
-const _hoisted_10$3 = {
+const _hoisted_6$e = ["colspan"];
+const _hoisted_7$d = ["colspan"];
+const _hoisted_8$8 = {
   key: 0,
   "aria-hidden": "true"
 };
-const _hoisted_11$2 = ["colspan"];
-const _hoisted_12$2 = {
+const _hoisted_9$5 = ["colspan"];
+const _hoisted_10$3 = {
   key: 1,
   "aria-hidden": "true"
 };
-const _hoisted_13$1 = ["colspan"];
+const _hoisted_11$2 = ["colspan"];
 function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("table", {
     class: "calendar-month__table",
-    role: "application",
+    role: "grid",
+    "aria-label": _ctx.ariaLabel,
     onFocusin: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusin && _ctx.onFocusin(...args)),
     onFocusout: _cache[1] || (_cache[1] = (...args) => _ctx.onFocusout && _ctx.onFocusout(...args))
-  }, [vue.createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_1$O)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _cache[3] || (_cache[3] = vue.createElementVNode("col", {
+  }, [vue.createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_2$A)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _cache[3] || (_cache[3] = vue.createElementVNode("col", {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[4] || (_cache[4] = vue.createTextVNode()), _cache[5] || (_cache[5] = vue.createElementVNode("col", {
     class: "calendar-month__col--day"
@@ -5630,26 +5626,23 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[14] || (_cache[14] = vue.createTextVNode()), _cache[15] || (_cache[15] = vue.createElementVNode("col", {
     class: "calendar-month__col--day"
-  }, null, -1))]), _cache[22] || (_cache[22] = vue.createTextVNode()), vue.createElementVNode("thead", _hoisted_2$A, [vue.createElementVNode("tr", _hoisted_3$s, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$n)) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekdays, (weekday) => {
+  }, null, -1))]), _cache[22] || (_cache[22] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3$s)) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekdays, (weekday) => {
     return vue.openBlock(), vue.createElementBlock("th", {
       key: weekday.name,
       scope: "col",
-      role: "presentation",
       class: "calendar-month__header-cell"
     }, [vue.createElementVNode("abbr", {
-      "aria-hidden": "true",
       title: weekday.name
-    }, vue.toDisplayString(_ctx.showShortWeekdays ? weekday.shortName : weekday.name), 9, _hoisted_5$i)]);
-  }), 128))])]), _cache[23] || (_cache[23] = vue.createTextVNode()), vue.createElementVNode("tbody", _hoisted_6$e, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weeks, (week) => {
+    }, vue.toDisplayString(_ctx.showShortWeekdays ? weekday.shortName : weekday.name), 9, _hoisted_4$n)]);
+  }), 128))])]), _cache[23] || (_cache[23] = vue.createTextVNode()), vue.createElementVNode("tbody", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weeks, (week) => {
     return vue.openBlock(), vue.createElementBlock("tr", {
-      key: week.week,
-      role: "presentation"
-    }, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_7$d, vue.toDisplayString(week.week), 1)) : vue.createCommentVNode("", true), _cache[17] || (_cache[17] = vue.createTextVNode()), _ctx.getDayStartOffset(week.days) ? (vue.openBlock(), vue.createElementBlock("td", {
+      key: week.week
+    }, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_5$i, vue.toDisplayString(week.week), 1)) : vue.createCommentVNode("", true), _cache[17] || (_cache[17] = vue.createTextVNode()), _ctx.getDayStartOffset(week.days) ? (vue.openBlock(), vue.createElementBlock("td", {
       key: 1,
       class: "calendar-month__cell",
       colspan: _ctx.getDayStartOffset(week.days),
       "aria-hidden": "true"
-    }, null, 8, _hoisted_8$8)) : vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day) => {
+    }, null, 8, _hoisted_6$e)) : vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day) => {
       return vue.openBlock(), vue.createElementBlock("td", {
         key: day.toString(),
         class: "calendar-month__cell",
@@ -5663,16 +5656,16 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
       class: "calendar-month__cell",
       colspan: _ctx.getDayEndOffset(week.days),
       "aria-hidden": "true"
-    }, null, 8, _hoisted_9$5)) : vue.createCommentVNode("", true)]);
-  }), 128)), _cache[20] || (_cache[20] = vue.createTextVNode()), _ctx.weeks.length < 5 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_10$3, [vue.createElementVNode("td", {
+    }, null, 8, _hoisted_7$d)) : vue.createCommentVNode("", true)]);
+  }), 128)), _cache[20] || (_cache[20] = vue.createTextVNode()), _ctx.weeks.length < 5 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_8$8, [vue.createElementVNode("td", {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_11$2)])) : vue.createCommentVNode("", true), _cache[21] || (_cache[21] = vue.createTextVNode()), _ctx.weeks.length < 6 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_12$2, [vue.createElementVNode("td", {
+  }, null, 8, _hoisted_9$5)])) : vue.createCommentVNode("", true), _cache[21] || (_cache[21] = vue.createTextVNode()), _ctx.weeks.length < 6 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_10$3, [vue.createElementVNode("td", {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_13$1)])) : vue.createCommentVNode("", true)])], 32);
+  }, null, 8, _hoisted_11$2)])) : vue.createCommentVNode("", true)])], 40, _hoisted_1$O);
 }
 const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$Q]]);
 const DayStep = {
@@ -5745,6 +5738,11 @@ const _sfc_main$11 = vue.defineComponent({
       this.$emit("click", date2);
     },
     async onKeydownDay(date2, event) {
+      if (event.code === "Enter" || event.code === "Space") {
+        event.preventDefault();
+        this.$emit("click", date2);
+        return;
+      }
       if (!isDayStepKey(event)) {
         return;
       }
@@ -5792,13 +5790,13 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: vue.withCtx(({
       date: date2
-    }) => [vue.createElementVNode("button", {
+    }) => [vue.createElementVNode("div", {
       ref: date2.toString(),
+      role: "gridcell",
       class: "calendar-month__button",
       "data-test": "select-day-button",
       "data-date": date2.toString(),
       tabindex: _ctx.getTabindex(date2),
-      type: "button",
       onClick: vue.withModifiers(($event) => _ctx.onClickDay(date2), ["stop", "prevent"]),
       onKeydown: ($event) => _ctx.onKeydownDay(date2, $event)
     }, [vue.renderSlot(_ctx.$slots, "default", {
@@ -6006,9 +6004,7 @@ function useSlotUtils() {
     }
   };
 }
-const _hoisted_1$K = {
-  class: "card card--default"
-};
+const _hoisted_1$K = ["id"];
 const _hoisted_2$y = {
   key: 0,
   class: "card__header"
@@ -6022,16 +6018,91 @@ const _hoisted_4$m = {
 };
 const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
   __name: "FCard",
+  props: {
+    /**
+     * Element to focus on when card is invalid. Set when using validation.
+     */
+    focusRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    /**
+     * Optional id (generated by default).
+     */
+    id: {
+      type: String,
+      required: false,
+      default: () => logic.ElementIdService.generateElementId()
+    }
+  },
   setup(__props) {
     const {
       hasSlot: hasSlot2
     } = useSlotUtils();
+    const validationMessage = vue.ref("");
+    const hasError = vue.ref(false);
+    const isMounted = vue.ref(false);
     const hasHeaderSlot = vue.computed(() => hasSlot2("header"));
     const hasFooterSlot = vue.computed(() => hasSlot2("footer"));
+    const cardClass = vue.computed(() => `card card--${hasError.value ? "error" : "default"}`);
+    const props = __props;
+    vue.onMounted(() => isMounted.value = true);
+    async function onValidity({
+      detail
+    }) {
+      if (!isMounted.value) {
+        return;
+      }
+      if (!props.focusRef) {
+        throw new Error("Element to focus on when card is invalid (`focusRef`) is required when using card validation.");
+      }
+      const focusElementId = props.focusRef.id;
+      if (!focusElementId) {
+        throw new Error("An id must be set on the card's focus element.");
+      }
+      hasError.value = !detail.isValid;
+      validationMessage.value = detail.validationMessage;
+      dispatchComponentValidityEvent(props.focusRef, {
+        ...detail,
+        errorMessage: validationMessage.value,
+        focusElementId
+      });
+    }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [hasHeaderSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$y, [vue.renderSlot(_ctx.$slots, "header", vue.normalizeProps(vue.guardReactiveProps({
+      return vue.openBlock(), vue.createElementBlock("div", {
+        id: __props.id,
+        class: vue.normalizeClass(cardClass.value),
+        onValidity
+      }, [hasHeaderSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$y, [vue.renderSlot(_ctx.$slots, "header", vue.normalizeProps(vue.guardReactiveProps({
         headingSlotClass: "card__header-label"
-      })))])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$r, [vue.renderSlot(_ctx.$slots, "default")]), _cache[1] || (_cache[1] = vue.createTextVNode()), hasFooterSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [vue.renderSlot(_ctx.$slots, "footer")])) : vue.createCommentVNode("", true)]);
+      })))])) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message", vue.normalizeProps(vue.guardReactiveProps({
+        hasError: hasError.value,
+        validationMessage: validationMessage.value
+      })), () => [hasError.value ? (vue.openBlock(), vue.createBlock(vue.unref(IFlex), {
+        key: 0,
+        gap: "1x",
+        class: "card__error-message"
+      }, {
+        default: vue.withCtx(() => [vue.createVNode(vue.unref(IFlexItem), {
+          shrink: "",
+          align: "center"
+        }, {
+          default: vue.withCtx(() => [vue.createVNode(vue.unref(FIcon), {
+            name: "error"
+          })]),
+          _: 1
+        }), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createVNode(vue.unref(IFlexItem), {
+          grow: ""
+        }, {
+          default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(validationMessage.value), 1)]),
+          _: 1
+        })]),
+        _: 1
+      })) : vue.createCommentVNode("", true)]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$r, [vue.renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = vue.createTextVNode()), hasFooterSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps({
+        hasError: hasError.value,
+        validationMessage: validationMessage.value
+      })))])) : vue.createCommentVNode("", true)], 42, _hoisted_1$K);
     };
   }
 });
@@ -17054,6 +17125,20 @@ const _sfc_main = vue.defineComponent({
         });
       }
       logic.DomUtils.focus(headerElement);
+    },
+    beforeNextWrapper() {
+      return this.beforeNext({
+        key: this.step.key,
+        stepNumber: this.stepNumber,
+        totalSteps: this.totalSteps
+      });
+    },
+    beforeValidationWrapper() {
+      return this.beforeValidation({
+        key: this.step.key,
+        stepNumber: this.stepNumber,
+        totalSteps: this.totalSteps
+      });
     }
   }
 });
@@ -17169,8 +17254,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: vue.withCtx(() => [vue.createVNode(_component_f_validation_form, {
       id: _ctx.formId,
-      "before-submit": _ctx.beforeNext,
-      "before-validation": _ctx.beforeValidation,
+      "before-submit": _ctx.beforeNextWrapper,
+      "before-validation": _ctx.beforeValidationWrapper,
       "use-error-list": _ctx.useErrorList,
       class: "wizard-step-body",
       onSubmit: _ctx.onSubmit
@@ -17181,7 +17266,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "data-disabled": _ctx.ignoreClick ? "true" : "false",
         type: "submit",
         class: "button button--primary button-group__item button--large"
-      }, [vue.renderSlot(_ctx.$slots, "next-button-text", {}, () => [_ctx.isFinalStep ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+      }, [vue.renderSlot(_ctx.$slots, "next-button-text", vue.normalizeProps(vue.guardReactiveProps({
+        stepNumber: _ctx.stepNumber,
+        totalSteps: _ctx.totalSteps
+      })), () => [_ctx.isFinalStep ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
         key: 0
       }, [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.wizard-step.button.next.text-final", "Gå vidare och granska")), 1)], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
         key: 1
@@ -17190,7 +17278,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         class: "button button--secondary button-group__item button--large",
         onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onCancel && _ctx.onCancel(...args))
-      }, [vue.renderSlot(_ctx.$slots, "cancel-button-text", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.wizard-step.button.cancel.text", "Avbryt")), 1)])])])]),
+      }, [vue.renderSlot(_ctx.$slots, "cancel-button-text", vue.normalizeProps(vue.guardReactiveProps({
+        stepNumber: _ctx.stepNumber,
+        totalSteps: _ctx.totalSteps
+      })), () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.wizard-step.button.cancel.text", "Avbryt")), 1)])])])]),
       _: 3
     }, 8, ["id", "before-submit", "before-validation", "use-error-list", "onSubmit"])]),
     _: 3