fds-vue-core 7.1.6 → 7.1.8

package/components.d.ts

@@ -31,7 +31,7 @@ import type { FdsCheckboxProps } from './src/components/Form/FdsCheckbox/types'
 import type { FdsInputProps } from './src/components/Form/FdsInput/types'
 import type { FdsRadioProps } from './src/components/Form/FdsRadio/types'
 import type { FdsSelectProps } from './src/components/Form/FdsSelect/types'
-import type { FdsTextareaProps } from './src/components/Form/FdsTextarea/types'
+import type { FdsTextareaEmits, FdsTextareaProps } from './src/components/Form/FdsTextarea/types'
 import type { FdsTableProps } from './src/components/Table/FdsTable/types'
 import type { FdsTableHeadProps } from './src/components/Table/FdsTableHead/types'
 import type { FdsTabsProps } from './src/components/Tabs/FdsTabs/types'
@@ -61,7 +61,7 @@ declare module 'vue' {
     FdsRadio: DefineComponent<FdsRadioProps>
     FdsInput: DefineComponent<FdsInputProps>
     FdsCheckbox: DefineComponent<FdsCheckboxProps>
-    FdsTextarea: DefineComponent<FdsTextareaProps>
+    FdsTextarea: DefineComponent<FdsTextareaProps, {}, {}, {}, {}, {}, {}, FdsTextareaEmits>
     FdsSelect: DefineComponent<FdsSelectProps>
     FdsTable: DefineComponent<FdsTableProps>
     FdsTableHead: DefineComponent<FdsTableHeadProps>

package/dist/components/Form/FdsTextarea/FdsTextarea.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Disabled: Story;
+export declare const WithMaxLength: Story;

package/dist/components/Form/FdsTextarea/FdsTextarea.vue.d.ts

@@ -4,19 +4,21 @@ type __VLS_PublicProps = {
     modelValue?: string;
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-} & {
     input: (ev: Event) => any;
     blur: (ev: FocusEvent) => any;
     change: (ev: Event) => any;
+    valid: (value: boolean | null) => any;
     "update:value": (value: string) => any;
+    "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onInput?: ((ev: Event) => any) | undefined;
     onBlur?: ((ev: FocusEvent) => any) | undefined;
     onChange?: ((ev: Event) => any) | undefined;
+    onValid?: ((value: boolean | null) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    maxlength: number;
     value: string;
     dataTestid: string;
     label: string;

package/dist/components/Form/FdsTextarea/types.d.ts

@@ -11,5 +11,15 @@ export interface FdsTextareaProps extends Omit</* @vue-ignore */ TextareaHTMLAtt
     };
     dataTestid?: string;
     inputClass?: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    /** Character limit for counter/validation. Does not set native maxlength on the textarea. */
+    maxlength?: number;
     value?: string;
 }
+export interface FdsTextareaEmits {
+    input: [ev: Event];
+    change: [ev: Event];
+    'update:value': [value: string];
+    blur: [ev: FocusEvent];
+    /** Emitted when maxlength is set: true/false for within/over limit, null when maxlength is unset. */
+    valid: [value: boolean | null];
+}

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

@@ -83,6 +83,7 @@ const en = {
   "FdsSearchSelectPro.loadingMore": "Loading more...",
   "FdsSearchSelectPro.showMore": "Show more",
   "FdsSearchSelectPro.unspecified": "Unspecified",
+  "FdsTextarea.characters": "characters",
   "FdsTreeView.childrenCountPrefix": "(+",
   "FdsTreeView.closePopover": "Close",
   "FdsTreeView.collapseNode": "Collapse {title}",
@@ -144,6 +145,7 @@ const sv = {
   "FdsSearchSelectPro.loadingMore": "Hämtar fler...",
   "FdsSearchSelectPro.showMore": "Visa fler",
   "FdsSearchSelectPro.unspecified": "Ospecificerat",
+  "FdsTextarea.characters": "tecken",
   "FdsTreeView.childrenCountPrefix": "(+",
   "FdsTreeView.closePopover": "Stäng",
   "FdsTreeView.collapseNode": "Fäll ihop {title}",
@@ -187,15 +189,26 @@ const useFdsI18n = () => {
     if (!values) return message2;
     return Object.entries(values).reduce((acc, [name, value]) => acc.split(`{${name}}`).join(String(value)), message2);
   };
+  const silentTranslateOptions = { missingWarn: false, fallbackWarn: false };
+  const translateFromDictionary = (key, values) => {
+    const value = dictionary.value[key];
+    if (typeof value !== "string") return void 0;
+    return interpolate(value, values);
+  };
   const t = (key, values) => {
     const translateFn = i18n?.global?.t ?? i18n?.t;
     if (typeof translateFn === "function") {
-      const translated = translateFn(key, values);
-      if (typeof translated === "string") return translated;
+      let translated;
+      if (values != null && Object.keys(values).length > 0) {
+        translated = translateFn(key, values, silentTranslateOptions);
+      } else {
+        translated = translateFn(key, "", silentTranslateOptions);
+      }
+      if (typeof translated === "string" && translated !== key && translated !== "") {
+        return translated;
+      }
     }
-    const value = dictionary.value[key];
-    if (typeof value !== "string") return "";
-    return interpolate(value, values);
+    return translateFromDictionary(key, values) ?? key;
   };
   return {
     i18n,
@@ -8889,7 +8902,7 @@ const _hoisted_2$f = { class: "relative" };
 const _hoisted_3$c = ["type", "required", "value", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "pattern", "searchIcon"];
 const _hoisted_4$b = {
   key: 0,
-  class: "text-red-600 font-bold mt-1"
+  class: "text-red-700 font-bold mt-1"
 };
 const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -9226,7 +9239,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                 isInvalid.value ? (vue.openBlock(), vue.createBlock(_sfc_main$J, {
                   key: 1,
                   name: "alert",
-                  class: "fill-red-600"
+                  class: "fill-red-700"
                 })) : vue.createCommentVNode("", true),
                 isValid2.value ? (vue.openBlock(), vue.createBlock(_sfc_main$J, {
                   key: 2,
@@ -16073,7 +16086,7 @@ const _hoisted_5$2 = ["value", "disabled"];
 const _hoisted_6 = { class: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" };
 const _hoisted_7 = {
   key: 2,
-  class: "text-red-600 font-bold mt-1"
+  class: "text-red-700 font-bold mt-1"
 };
 const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -16140,7 +16153,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       "focus:outline-2 focus:outline-blue-500 focus:border-transparent",
       "appearance-none",
       disabled.value ? "outline-dashed text-gray-800 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-700",
       props.inputClass
     ]);
     const internalValue = vue.computed({
@@ -16211,7 +16224,7 @@ const _hoisted_3$1 = { class: "relative" };
 const _hoisted_4$1 = ["value"];
 const _hoisted_5$1 = {
   key: 2,
-  class: "text-red-600 font-bold mt-1"
+  class: "text-red-700 text-right font-bold mt-1"
 };
 const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -16228,13 +16241,15 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     modelModifiers: { default: () => ({}) },
     dataTestid: { default: void 0 },
     inputClass: { default: void 0 },
+    maxlength: { default: void 0 },
     value: { default: void 0 }
   }, {
     "modelValue": { default: void 0, required: false },
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ vue.mergeModels(["input", "change", "update:value", "blur"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ vue.mergeModels(["input", "change", "update:value", "blur", "valid"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
+    const { t } = useFdsI18n();
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
@@ -16252,7 +16267,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       return eventHandlers;
     });
     const textareaAttrs = vue.computed(() => {
-      const { class: _, id: _id, rows: _rows, ...rest } = attrs;
+      const { class: _, id: _id, rows: _rows, maxlength: _maxlength, ...rest } = attrs;
       const filtered = {};
       for (const key in rest) {
         if (!key.startsWith("on") || typeof rest[key] !== "function") {
@@ -16263,33 +16278,61 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         ...filtered,
         id: textareaId.value,
         rows: rows.value ?? 4,
-        "aria-invalid": props.valid === false ? true : void 0,
+        "aria-invalid": props.valid === false || isOverMaxLength.value ? true : void 0,
         "data-testid": props.dataTestid ?? void 0
       };
     });
     const isLazy = vue.computed(() => props.modelModifiers?.lazy === true);
+    const internalValue = vue.computed({
+      get: () => modelValue.value !== void 0 ? modelValue.value : props.value ?? "",
+      set: (newValue) => {
+        if (modelValue.value !== void 0) {
+          modelValue.value = newValue;
+        }
+        emit("update:value", newValue);
+      }
+    });
+    const liveValue = vue.ref("");
+    vue.watch(
+      () => internalValue.value,
+      (value) => {
+        if (value !== liveValue.value) {
+          liveValue.value = value;
+        }
+      },
+      { immediate: true }
+    );
     const showInvalidMessage = vue.computed(() => props.valid === false && !props.optional && props.invalidMessage);
     const isInvalid = vue.computed(() => props.valid === false && !props.optional && !disabled.value);
     const isValid2 = vue.computed(() => props.valid === true);
+    const characterCount = vue.computed(() => liveValue.value.length);
+    const showCharacterCount = vue.computed(() => props.maxlength != null);
+    const isOverMaxLength = vue.computed(() => props.maxlength != null && characterCount.value > props.maxlength);
+    const maxLengthValid = vue.computed(() => {
+      if (props.maxlength == null) {
+        return null;
+      }
+      return characterCount.value <= props.maxlength;
+    });
+    vue.watch(
+      maxLengthValid,
+      (value) => {
+        emit("valid", value);
+      },
+      { immediate: true }
+    );
     const inputClasses = vue.computed(() => [
       "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-800 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",
+      isOverMaxLength.value && !disabled.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({
-      get: () => modelValue.value !== void 0 ? modelValue.value : props.value ?? "",
-      set: (newValue) => {
-        if (modelValue.value !== void 0) {
-          modelValue.value = newValue;
-        }
-        emit("update:value", newValue);
-      }
-    });
     function handleInputChange(ev) {
       const target = ev.target;
+      liveValue.value = target.value;
       if (isLazy.value && ev.type === "input") {
         return;
       }
@@ -16313,7 +16356,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         __props.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, vue.toDisplayString(__props.meta), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_3$1, [
           vue.createElementVNode("textarea", vue.mergeProps({
-            value: internalValue.value,
+            value: liveValue.value,
             class: inputClasses.value
           }, textareaAttrs.value, {
             onInput: handleInputChange,
@@ -16334,7 +16377,10 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             })) : vue.createCommentVNode("", true)
           ], 2)
         ]),
-        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, vue.toDisplayString(__props.invalidMessage), 1)) : vue.createCommentVNode("", true)
+        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, vue.toDisplayString(__props.invalidMessage), 1)) : showCharacterCount.value ? (vue.openBlock(), vue.createElementBlock("p", {
+          key: 3,
+          class: vue.normalizeClass(["mt-1 text-right font-bold", isOverMaxLength.value ? "text-red-700" : "text-gray-900"])
+        }, vue.toDisplayString(characterCount.value) + " / " + vue.toDisplayString(__props.maxlength) + " " + vue.toDisplayString(vue.unref(t)("FdsTextarea.characters")), 3)) : vue.createCommentVNode("", true)
       ], 2);
     };
   }