fds-vue-core 2.1.39 → 2.1.41

package/dist/fds-vue-core.cjs.js

@@ -393,13 +393,13 @@ const icons = {
       <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.5002C12.3316 2.49979 12.6474 2.64223 12.8665 2.89111L17.7834 8.48008C18.1066 8.86527 18.0632 9.43804 17.6857 9.77013C17.3081 10.1022 16.7345 10.0722 16.3937 9.70242L12.0942 4.81507C12.0704 4.78793 12.0361 4.77237 12 4.77237C11.9639 4.77237 11.9296 4.78793 11.9058 4.81507L7.6063 9.70242C7.26552 10.0722 6.6919 10.1022 6.31433 9.77013C5.93676 9.43804 5.89336 8.86527 6.21658 8.48008L11.132 2.89311C11.3515 2.64363 11.6677 2.50052 12 2.5002Z" />
     </svg>`,
   ascending: () => `
-    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.24947C12.3316 2.24906 12.6474 2.39149 12.8665 2.64038L17.7834 8.22935C18.1066 8.61454 18.0632 9.18731 17.6857 9.5194C17.3081 9.85148 16.7345 9.82142 16.3937 9.45168L12.0942 4.56434C12.0704 4.5372 12.0361 4.52164 12 4.52164C11.9639 4.52164 11.9296 4.5372 11.9058 4.56434L7.6063 9.45168C7.26552 9.82142 6.6919 9.85148 6.31433 9.5194C5.93676 9.18731 5.89336 8.61454 6.21658 8.22935L11.132 2.64238C11.3515 2.3929 11.6677 2.24978 12 2.24947Z" />
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24">
+      <path fill-rule="evenodd" d="M12 15.75c-.332 0-.647-.142-.867-.39L6.217 9.77a.926.926 0 0 1 1.39-1.222l4.299 4.888a.125.125 0 0 0 .188 0l4.3-4.888a.926.926 0 0 1 1.39 1.223l-4.916 5.587c-.22.25-.536.392-.868.393Z" clip-rule="evenodd"/>
     </svg>
     `,
   descending: () => `
-    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.7505C11.6684 21.7509 11.3526 21.6085 11.1335 21.3596L6.21658 15.7707C5.89336 15.3855 5.93676 14.8127 6.31433 14.4806C6.6919 14.1485 7.26552 14.1786 7.6063 14.5483L11.9058 19.4357C11.9296 19.4628 11.9639 19.4784 12 19.4784C12.0361 19.4784 12.0704 19.4628 12.0942 19.4357L16.3937 14.5483C16.7345 14.1786 17.3081 14.1485 17.6857 14.4806C18.0632 14.8127 18.1066 15.3855 17.7834 15.7707L12.868 21.3576C12.6485 21.6071 12.3323 21.7502 12 21.7505Z" />
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24">
+      <path fill-rule="evenodd" d="M12 8.25c.332 0 .647.141.867.39l4.916 5.59a.926.926 0 0 1-1.39 1.222l-4.299-4.888a.125.125 0 0 0-.188 0l-4.3 4.888a.926.926 0 0 1-1.39-1.223l4.916-5.587c.22-.25.536-.392.868-.393Z" clip-rule="evenodd"/>
     </svg>
     `,
   switchUser: () => `
@@ -633,9 +633,11 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$o = ["id"];
-const _hoisted_2$j = { class: "flex items-center gap-2" };
-const _hoisted_3$b = { class: "relative" };
-const _hoisted_4$a = {
+const _hoisted_2$j = { class: "flex items-start gap-2" };
+const _hoisted_3$b = { class: "h-7 flex items-center" };
+const _hoisted_4$a = { class: "leading-7" };
+const _hoisted_5$9 = { class: "relative h-7" };
+const _hoisted_6$6 = {
   key: 1,
   class: "fds-block-alert-slot mb-0-last-child"
 };
@@ -694,27 +696,29 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", null, [
             __props.label ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: vue.normalizeClass(["font-bold w-full justify-between items-center h-[24px] flex gap-2", { "mb-4": (isExpanded.value || !__props.collapsable) && vue.unref(hasSlot) }])
+              class: vue.normalizeClass(["font-bold w-full justify-between items-start flex gap-2", { "mb-4": (isExpanded.value || !__props.collapsable) && vue.unref(hasSlot) }])
             }, [
               vue.createElementVNode("div", _hoisted_2$j, [
-                vue.createVNode(_sfc_main$w, {
-                  name: "alert",
-                  size: 24,
-                  class: "fill-yellow-700"
-                }),
-                vue.createElementVNode("span", null, vue.toDisplayString(__props.label), 1)
+                vue.createElementVNode("div", _hoisted_3$b, [
+                  vue.createVNode(_sfc_main$w, {
+                    name: "alert",
+                    size: 24,
+                    class: "fill-yellow-700"
+                  })
+                ]),
+                vue.createElementVNode("span", _hoisted_4$a, vue.toDisplayString(__props.label), 1)
               ]),
-              vue.createElementVNode("div", _hoisted_3$b, [
+              vue.createElementVNode("div", _hoisted_5$9, [
                 __props.closeable ? (vue.openBlock(), vue.createBlock(_sfc_main$v, vue.mergeProps({
                   key: 0,
                   icon: "cross",
-                  size: 24,
+                  size: 28,
                   onClick: handleClose
                 }, { "aria-label": closeLabel.value }, { class: ["fill-gray-900! hover:bg-gray-100 active:bg-gray-200"] }), null, 16)) : vue.createCommentVNode("", true),
                 __props.collapsable ? (vue.openBlock(), vue.createBlock(_sfc_main$v, vue.mergeProps({
                   key: 1,
                   icon: "arrowDown",
-                  size: 24,
+                  size: 28,
                   onClick: handleToggle
                 }, { "aria-label": isExpanded.value ? collapseLabel.value : expandLabel.value }, {
                   class: [
@@ -725,7 +729,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
                 }), null, 16, ["class"])) : vue.createCommentVNode("", true)
               ])
             ], 2)) : vue.createCommentVNode("", true),
-            isExpanded.value || !__props.collapsable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$a, [
+            isExpanded.value || !__props.collapsable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$6, [
               vue.renderSlot(_ctx.$slots, "default")
             ])) : vue.createCommentVNode("", true)
           ])
@@ -7845,8 +7849,8 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       };
     });
     const clearButtonLabel = vue.computed(() => props.locale === "sv" ? "Rensa input" : "Clear input");
-    const passwordButtonShowLabel = vue.computed(() => props.locale === "sv" ? "Visa lösenord" : "Show password");
-    const passwordButtonHideLabel = vue.computed(() => props.locale === "sv" ? "Dölj lösenord" : "Hide password");
+    const passwordButtonShowLabel = vue.computed(() => props.locale === "sv" ? "Visa" : "Show");
+    const passwordButtonHideLabel = vue.computed(() => props.locale === "sv" ? "Dölj" : "Hide");
     const showInvalidMessage = vue.computed(() => props.valid === false && !props.optional && props.invalidMessage);
     const isInvalid = vue.computed(() => props.valid === false && !props.optional && !disabled.value);
     const isValid = vue.computed(() => props.valid === true);
@@ -10116,7 +10120,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
-    const { id, placeholder, attrs } = useAttrsWithDefaults(props);
+    const { id, placeholder, attrs, disabled } = useAttrsWithDefaults(props);
     const autoId = `fds-select-${Math.random().toString(36).slice(2, 9)}`;
     const selectId = vue.computed(() => id.value && id.value.trim() !== "" ? id.value : autoId);
     const labelAttrs = vue.computed(() => {
@@ -10139,7 +10143,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       return {
         ...filtered,
         id: selectId.value,
-        disabled: props.disabled,
+        disabled: disabled.value,
         "aria-invalid": props.valid === false ? "true" : void 0
       };
     });
@@ -10147,15 +10151,15 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     const hasDefaultSlot = vue.computed(() => !!slots.default);
     const externalClass = vue.computed(() => attrs.class);
     const showInvalidMessage = vue.computed(
-      () => props.valid === false && !props.optional && props.invalidMessage && !props.disabled
+      () => props.valid === false && !props.optional && props.invalidMessage && !disabled.value
     );
-    const isInvalid = vue.computed(() => props.valid === false && !props.optional && !props.disabled);
+    const isInvalid = vue.computed(() => props.valid === false && !props.optional && !disabled.value);
     const selectClasses = vue.computed(() => [
       "block w-full rounded-md border border-gray-500 px-3 py-2 pr-10 h-12",
       "focus:outline-2 focus:outline-blue-500 focus:border-transparent",
       "appearance-none",
-      props.disabled ? "outline-dashed text-gray-600 outline-2 -outline-offset-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white cursor-pointer",
-      isInvalid.value && !props.disabled && "outline-2 -outline-offset-2 outline-red-600 text-red-600"
+      disabled.value ? "outline-dashed text-gray-600 outline-2 -outline-offset-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white cursor-pointer",
+      isInvalid.value && !disabled.value && "outline-2 -outline-offset-2 outline-red-600 text-red-600"
     ]);
     const internalValue = vue.computed({
       get: () => modelValue.value !== void 0 ? modelValue.value : props.value ?? "",
@@ -10204,9 +10208,9 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
               name: "arrowDown",
               size: 24,
               class: vue.normalizeClass({
-                "fill-gray-500": props.disabled,
-                "fill-red-500": isInvalid.value && !props.disabled,
-                "fill-blue-500": !props.disabled && !isInvalid.value
+                "fill-gray-500": vue.unref(disabled),
+                "fill-red-500": isInvalid.value && !vue.unref(disabled),
+                "fill-blue-500": !vue.unref(disabled) && !isInvalid.value
               })
             }, null, 8, ["class"])
           ])