fds-vue-core 3.0.1 → 4.0.0

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

@@ -659,7 +659,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     closeable: { type: Boolean, default: false },
     collapsable: { type: Boolean, default: false },
     expanded: { type: Boolean, default: false },
-    heading: { default: "" },
+    heading: { default: void 0 },
     locale: { default: "sv" },
     icon: {},
     dataTestid: { default: void 0 }
@@ -883,7 +883,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsBlockExpander",
   props: {
     disabled: { type: Boolean, default: false },
-    heading: { default: "" },
+    heading: { default: void 0 },
     open: { type: Boolean, default: false },
     preIcon: { default: void 0 },
     stickerColor: { default: void 0 },
@@ -1113,7 +1113,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "FdsBlockLink",
   props: {
-    heading: {},
+    heading: { default: void 0 },
     arrow: { type: Boolean, default: false },
     download: {},
     href: {},
@@ -4246,7 +4246,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$f = ["aria-disabled"];
 const _hoisted_2$d = { key: 2 };
-const elBase$1 = "box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
+const elBase$1 = "fds-button-primary box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const variantClasses$1 = "bg-red-600 border border-red-700 text-white hover:bg-red-700 active:bg-red-800 active:border-red-800";
 const iconFillClass$1 = "fill-white";
 const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
@@ -4281,7 +4281,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     const externalClass = vue.computed(() => attrs.class);
     const sizeClasses = {
       sm: "text-sm h-7 px-3",
-      md: "text-base h-12 px-4 min-w-[120px]",
+      md: "text-base h-12 px-4",
       lg: "text-lg h-[68px] px-6"
     };
     const blockElClasses = vue.computed(() => props.block && "w-full justify-center");
@@ -4352,7 +4352,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$e = ["aria-disabled"];
 const _hoisted_2$c = { key: 2 };
-const elBase = "box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
+const elBase = "fds-button-secondary box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const variantClasses = "bg-white border-2 border-blue-500 text-blue-600 hover:bg-blue_t-100 hover:border-blue-500 hover:text-blue-600 active:bg-blue_t-200 active:border-blue-500 active:text-blue-600";
 const iconFillClass = "fill-blue-500";
 const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
@@ -4387,7 +4387,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     const externalClass = vue.computed(() => attrs.class);
     const sizeClasses = {
       sm: "text-sm h-7 px-3",
-      md: "text-base h-12 px-4 min-w-[120px]",
+      md: "text-base h-12 px-4",
       lg: "text-lg h-[68px] px-6"
     };
     const blockElClasses = vue.computed(() => props.block && "w-full justify-center");
@@ -8651,6 +8651,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ariaLabel: { default: void 0 },
     pattern: { default: void 0 },
     searchIcon: { type: Boolean },
+    inputClass: { default: void 0 },
     onClearInput: {},
     maskOptions: { default: void 0 },
     modelModifiers: { default: () => ({}) },
@@ -8737,7 +8738,8 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       inputPaddingRight.value,
       "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
       props.disabled ? "text-gray-600 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white",
-      isInvalid.value && "outline-2 outline-red-600"
+      isInvalid.value && "outline-2 outline-red-600",
+      props.inputClass
     ]);
     const inputStyle = vue.computed(() => {
       if (maxlength.value) {
@@ -10106,6 +10108,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     id: {},
     name: {},
     dataTestid: { default: void 0 },
+    inputClass: { default: void 0 },
     onInput: {},
     onChange: {},
     onFocus: {},
@@ -10160,10 +10163,11 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
       "[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500",
       props.disabled && "hover:bg-transparent active:bg-transparent"
     ]);
-    const checkboxClasses = vue.computed(() => [
+    const inputClasses = vue.computed(() => [
       "rounded-md transition-colors duration-200 accent-blue-500 m-[3px]",
       "peer z-2 bg-white min-w-[18px] min-h-[18px] focus-visible:outline-none",
-      props.disabled && "cursor-not-allowed"
+      props.disabled && "cursor-not-allowed",
+      props.inputClass
     ]);
     const internalChecked = vue.computed({
       get: () => {
@@ -10241,7 +10245,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
             disabled: props.disabled,
             required: props.required,
             type: "checkbox",
-            class: [checkboxClasses.value]
+            class: inputClasses.value
           }, inputAttrs.value), null, 16, _hoisted_2$6), [
             [vue.vModelCheckbox, internalChecked.value]
           ]),
@@ -10279,6 +10283,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     style: {},
     tabindex: {},
     autofocus: { type: Boolean },
+    inputClass: { default: void 0 },
     onInput: {},
     onChange: {},
     onFocus: {},
@@ -10360,7 +10365,8 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ]);
     const inputClasses = vue.computed(() => [
       "peer z-2 bg-white min-w-[20px] min-h-[20px] focus-visible:outline-none rounded-full accent-blue-500",
-      props.disabled && "cursor-not-allowed"
+      props.disabled && "cursor-not-allowed",
+      props.inputClass
     ]);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -11077,6 +11083,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     options: { default: void 0 },
     modelValue: {},
     dataTestid: { default: void 0 },
+    inputClass: { default: void 0 },
     value: { default: void 0 }
   }, {
     "modelValue": { default: void 0, required: false },
@@ -11122,12 +11129,13 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       () => props.valid === false && !props.optional && props.invalidMessage && !disabled.value
     );
     const isInvalid = vue.computed(() => props.valid === false && !props.optional && !disabled.value);
-    const selectClasses = vue.computed(() => [
+    const inputClasses = 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",
       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"
+      isInvalid.value && !disabled.value && "outline-2 -outline-offset-2 outline-red-600 text-red-600",
+      props.inputClass
     ]);
     const internalValue = vue.computed({
       get: () => modelValue.value !== void 0 ? modelValue.value : props.value ?? "",
@@ -11155,7 +11163,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_3$2, [
           vue.withDirectives(vue.createElementVNode("select", vue.mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => internalValue.value = $event),
-            class: selectClasses.value
+            class: inputClasses.value
           }, selectAttrs.value, {
             onChange: handleChange,
             onInput: _cache[1] || (_cache[1] = (e) => emit("input", e))
@@ -11213,6 +11221,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     modelValue: {},
     modelModifiers: { default: () => ({}) },
     dataTestid: { default: void 0 },
+    inputClass: { default: void 0 },
     value: { default: void 0 }
   }, {
     "modelValue": { default: void 0, required: false },
@@ -11260,7 +11269,8 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       "block w-full rounded-md border border-gray-500 px-3 py-2",
       "focus:outline-2 focus:outline-blue-500 focus:border-transparent",
       disabled.value ? "text-gray-600 outline-dashed outline-2 -outline-offset-2 outline-gray-400 cursor-not-allowed border-transparent bg-gray-50" : "bg-white",
-      isInvalid.value && "outline-2 -outline-offset-2 outline-red-600"
+      isInvalid.value && "outline-2 -outline-offset-2 outline-red-600",
+      props.inputClass
     ]);
     const validationIconClasses = vue.computed(() => ["absolute right-3 top-3 flex items-center gap-2 pointer-events-none"]);
     const internalValue = vue.computed({