fds-vue-core 2.1.44 → 2.1.45

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

@@ -7760,7 +7760,7 @@ try {
 }
 const _hoisted_1$c = ["for"];
 const _hoisted_2$a = { class: "relative" };
-const _hoisted_3$7 = ["type", "required", "value", "aria-invalid"];
+const _hoisted_3$7 = ["type", "required", "value", "disabled", "tabindex", "aria-invalid"];
 const _hoisted_4$6 = {
   key: 0,
   class: "text-red-600 font-bold mt-1"
@@ -7775,16 +7775,38 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     meta: { default: void 0 },
     valid: { type: [Boolean, null], default: void 0 },
     optional: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
     invalidMessage: {},
     labelLeft: { type: Boolean, default: false },
     clearButton: { type: Boolean, default: false },
     locale: { default: "sv" },
     mask: { default: void 0 },
     modelValue: {},
+    value: { default: void 0 },
+    type: {},
+    placeholder: {},
+    maxlength: {},
+    minlength: {},
+    size: {},
+    autocomplete: {},
+    autofocus: { type: Boolean },
+    readonly: { type: Boolean },
     onClearInput: {},
     maskOptions: { default: void 0 },
     modelModifiers: { default: () => ({}) },
-    value: { default: void 0 }
+    class: {},
+    style: {},
+    tabindex: {},
+    id: {},
+    name: {},
+    onInput: {},
+    onChange: {},
+    onFocus: {},
+    onBlur: {},
+    onClick: {},
+    onKeydown: {},
+    onKeyup: {}
   }, {
     "modelValue": { default: void 0, required: false },
     "modelModifiers": {}
@@ -7794,7 +7816,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
-    const { id, type, disabled, maxlength, attrs } = useAttrsWithDefaults(props);
+    const { id, type, maxlength, attrs } = useAttrsWithDefaults(props);
     const inputType = vue.computed(() => type.value ?? props.type ?? "text");
     const autoId = `fds-input-${Math.random().toString(36).slice(2, 9)}`;
     const inputId = vue.computed(() => id.value ?? autoId);
@@ -7808,7 +7830,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       return eventHandlers;
     });
     const inputAttrs = vue.computed(() => {
-      const { class: _, type: _type, id: _id, ...rest } = attrs;
+      const { class: _, type: _type, id: _id, disabled: _disabled, tabindex: _tabindex, ...rest } = attrs;
       const filtered = {};
       for (const key in rest) {
         if (!key.startsWith("on") || typeof rest[key] !== "function") {
@@ -7824,7 +7846,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     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 isInvalid = vue.computed(() => props.valid === false && !props.optional && !props.disabled);
     const isValid = vue.computed(() => props.valid === true);
     const showPasswordToggle = vue.computed(
       () => inputType.value === "password" && internalValue.value !== void 0 && internalValue.value !== null && String(internalValue.value).length > 0
@@ -7834,7 +7856,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       "block rounded-md border border-gray-500 px-3 py-[calc(0.75rem-1px)]",
       maxlength.value ? "" : "w-full",
       "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
-      disabled.value ? "text-gray-600 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white",
+      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"
     ]);
     const inputStyle = vue.computed(() => {
@@ -7966,6 +7988,8 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                 type: inputType.value === "password" ? showPassword.value ? "text" : "password" : inputType.value,
                 required: props.required,
                 value: internalValue.value,
+                disabled: props.disabled,
+                tabindex: props.disabled ? -1 : void 0,
                 "aria-invalid": props.valid === false ? "true" : void 0,
                 class: inputClasses.value,
                 style: inputStyle.value
@@ -9134,11 +9158,24 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   props: /* @__PURE__ */ vue.mergeModels({
     label: { default: void 0 },
     indeterminate: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
     modelValue: { type: [Boolean, Array] },
     checked: { type: Boolean, default: false },
     value: { default: void 0 },
+    class: {},
+    style: {},
+    tabindex: {},
+    autofocus: { type: Boolean },
+    id: {},
+    name: {},
     onInput: {},
-    onChange: {}
+    onChange: {},
+    onFocus: {},
+    onBlur: {},
+    onClick: {},
+    onKeydown: {},
+    onKeyup: {}
   }, {
     "modelValue": { type: [Boolean, Array], ...{
       default: void 0,
@@ -9151,7 +9188,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
-    const { id, attrs, disabled, required } = useAttrsWithDefaults(props);
+    const { id, attrs } = useAttrsWithDefaults(props);
     const autoId = `fds-checkbox-${Math.random().toString(36).slice(2, 9)}`;
     const inputId = vue.computed(() => id.value ?? autoId);
     const labelAttrs = vue.computed(() => {
@@ -9183,12 +9220,12 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
       "flex p-0.5 items-start rounded-md",
       "hover:bg-blue_t-100 active:bg-blue_t-200",
       "[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500",
-      disabled.value && "hover:bg-transparent active:bg-transparent"
+      props.disabled && "hover:bg-transparent active:bg-transparent"
     ]);
     const checkboxClasses = 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",
-      disabled.value && "cursor-not-allowed"
+      props.disabled && "cursor-not-allowed"
     ]);
     const internalChecked = vue.computed({
       get: () => {
@@ -9258,13 +9295,13 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
       }, [
         vue.createElementVNode("label", vue.mergeProps({
           for: inputId.value,
-          class: [innerWrapperClasses.value, { "cursor-not-allowed": vue.unref(disabled) }]
+          class: [innerWrapperClasses.value, { "cursor-not-allowed": props.disabled }]
         }, labelAttrs.value), [
           vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
             value: props.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => internalChecked.value = $event),
-            disabled: vue.unref(disabled),
-            required: vue.unref(required),
+            disabled: props.disabled,
+            required: __props.required,
             type: "checkbox",
             class: [checkboxClasses.value]
           }, inputAttrs.value), null, 16, _hoisted_2$7), [
@@ -9272,7 +9309,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
           ]),
           vue.unref(hasLabelSlot) || props.label ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
-            class: vue.normalizeClass(["relative inline-block leading-6 pl-1 select-none", { "cursor-not-allowed": vue.unref(disabled) }])
+            class: vue.normalizeClass(["relative inline-block leading-6 pl-1 select-none", { "cursor-not-allowed": props.disabled }])
           }, [
             vue.unref(hasLabelSlot) ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : props.label ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createTextVNode(vue.toDisplayString(props.label), 1)
@@ -9284,7 +9321,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$8 = ["for"];
-const _hoisted_2$6 = ["name", "value", "checked", "disabled", "required"];
+const _hoisted_2$6 = ["value", "checked", "disabled", "required"];
 const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -9293,10 +9330,23 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   props: /* @__PURE__ */ vue.mergeModels({
     label: { default: void 0 },
     modelValue: {},
+    disabled: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
     checked: { type: Boolean, default: false },
     value: { default: void 0 },
+    name: { default: void 0 },
+    id: { default: void 0 },
+    class: {},
+    style: {},
+    tabindex: {},
+    autofocus: { type: Boolean },
     onInput: {},
-    onChange: {}
+    onChange: {},
+    onFocus: {},
+    onBlur: {},
+    onClick: {},
+    onKeydown: {},
+    onKeyup: {}
   }, {
     "modelValue": { default: void 0, required: false },
     "modelModifiers": {}
@@ -9306,9 +9356,9 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
-    const { id, name, attrs, disabled, required } = useAttrsWithDefaults(props);
+    const attrs = vue.useAttrs();
     const autoId = `fds-radio-${Math.random().toString(36).slice(2, 9)}`;
-    const inputId = vue.computed(() => id.value ?? autoId);
+    const inputId = vue.computed(() => props.id ?? attrs.id ?? autoId);
     const labelAttrs = vue.computed(() => {
       const eventHandlers = {};
       for (const key in attrs) {
@@ -9319,7 +9369,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
       return eventHandlers;
     });
     const inputAttrs = vue.computed(() => {
-      const { id: _, ...rest } = attrs;
+      const { id: _id, name: _name, disabled: _disabled, ...rest } = attrs;
       const filtered = {};
       for (const key in rest) {
         if (!key.startsWith("on") || typeof rest[key] !== "function") {
@@ -9328,7 +9378,8 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
       }
       return {
         ...filtered,
-        id: inputId.value
+        id: inputId.value,
+        name: props.name ?? attrs.name
       };
     });
     const hasLabelSlot = useHasSlot();
@@ -9365,11 +9416,11 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
       "flex p-0.5 items-start rounded-l-xl rounded-r-md",
       "hover:bg-blue_t-100 active:bg-blue_t-200",
       "[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500",
-      disabled.value && "hover:bg-transparent active:bg-transparent"
+      props.disabled && "hover:bg-transparent active:bg-transparent"
     ]);
     const inputClasses = vue.computed(() => [
       "peer z-2 bg-white min-w-[20px] min-h-[20px] focus-visible:outline-none rounded-full accent-blue-500",
-      disabled.value && "cursor-not-allowed"
+      props.disabled && "cursor-not-allowed"
     ]);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -9377,21 +9428,20 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
       }, [
         vue.createElementVNode("label", vue.mergeProps({
           for: inputId.value,
-          class: [innerWrapperClasses.value, { "cursor-not-allowed": vue.unref(disabled) }]
+          class: [innerWrapperClasses.value, { "cursor-not-allowed": props.disabled }]
         }, labelAttrs.value), [
           vue.createElementVNode("input", vue.mergeProps(inputAttrs.value, {
-            name: vue.unref(name),
             value: props.value,
             checked: isChecked.value,
             onChange: handleChange,
-            disabled: vue.unref(disabled),
-            required: vue.unref(required),
+            disabled: props.disabled,
+            required: props.required,
             type: "radio",
             class: [inputClasses.value, "m-[2px]"]
           }), null, 16, _hoisted_2$6),
           vue.unref(hasLabelSlot) || props.label ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
-            class: vue.normalizeClass(["relative inline-block leading-6 pl-1 select-none", { "cursor-not-allowed": vue.unref(disabled) }])
+            class: vue.normalizeClass(["relative inline-block leading-6 pl-1 select-none", { "cursor-not-allowed": props.disabled }])
           }, [
             vue.unref(hasLabelSlot) ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : props.label ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createTextVNode(vue.toDisplayString(props.label), 1)