fix: Translate multi select validation message

packages/admin/dist/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=d358746c1b875c6ab490a4bdbfa9567e",
+    "/app.js": "/app.js?id=54499263a6ee4c5b80387a15ced80b36",
     "/echo.js": "/echo.js?id=77a99c0e4c69337c7910facf3da252aa",
     "/app.css": "/app.css?id=38b267c7495cb40fef9bd41cb8bb5be6"
 }

packages/forms/dist/module.esm.js

@@ -27863,6 +27863,7 @@ var select_default = (Alpine) => {
     hasDynamicSearchResults,
     loadingMessage,
     maxItems,
+    maxItemsMessage,
     noSearchResultsMessage,
     options: options2,
     optionsLimit,
@@ -27884,6 +27885,7 @@ var select_default = (Alpine) => {
           itemSelectText: "",
           loadingText: loadingMessage,
           maxItemCount: maxItems ?? -1,
+          maxItemText: (maxItemCount) => window.pluralize(maxItemsMessage, maxItemCount, {count: maxItemCount}),
           noChoicesText: searchPrompt,
           noResultsText: noSearchResultsMessage,
           placeholderValue: placeholder,
@@ -35243,6 +35245,63 @@ function src_default(Alpine) {
 var module_default = src_default;
 
 // packages/forms/resources/js/index.js
+window.pluralize = function(text3, number, variables) {
+  function extract(segments2, number2) {
+    for (const part of segments2) {
+      const line = extractFromString(part, number2);
+      if (line !== null) {
+        return line;
+      }
+    }
+  }
+  function extractFromString(part, number2) {
+    const matches2 = part.match(/^[\{\[]([^\[\]\{\}]*)[\}\]](.*)/s);
+    if (matches2 === null || matches2.length !== 3) {
+      return null;
+    }
+    const condition = matches2[1];
+    const value2 = matches2[2];
+    if (condition.includes(",")) {
+      const [from, to] = condition.split(",", 2);
+      if (to === "*" && number2 >= from) {
+        return value2;
+      } else if (from === "*" && number2 <= to) {
+        return value2;
+      } else if (number2 >= from && number2 <= to) {
+        return value2;
+      }
+    }
+    return condition == number2 ? value2 : null;
+  }
+  function ucfirst(string) {
+    return string.toString().charAt(0).toUpperCase() + string.toString().slice(1);
+  }
+  function replace(line, replace2) {
+    if (replace2.length === 0) {
+      return line;
+    }
+    const shouldReplace = {};
+    for (let [key, value2] of Object.entries(replace2)) {
+      shouldReplace[":" + ucfirst(key ?? "")] = ucfirst(value2 ?? "");
+      shouldReplace[":" + key.toUpperCase()] = value2.toString().toUpperCase();
+      shouldReplace[":" + key] = value2;
+    }
+    Object.entries(shouldReplace).forEach(([key, value2]) => {
+      line = line.replaceAll(key, value2);
+    });
+    return line;
+  }
+  function stripConditions(segments2) {
+    return segments2.map((part) => part.replace(/^[\{\[]([^\[\]\{\}]*)[\}\]]/, ""));
+  }
+  let segments = text3.split("|");
+  const value = extract(segments, number);
+  if (value !== null && value !== void 0) {
+    return replace(value.trim(), variables);
+  }
+  segments = stripConditions(segments);
+  return replace(segments.length > 1 && number > 1 ? segments[1] : segments[0], variables);
+};
 var js_default = (Alpine) => {
   Alpine.plugin(color_picker_default2);
   Alpine.plugin(date_time_picker_default);

packages/forms/resources/js/components/select.js

@@ -17,6 +17,7 @@ export default (Alpine) => {
             hasDynamicSearchResults,
             loadingMessage,
             maxItems,
+            maxItemsMessage,
             noSearchResultsMessage,
             options,
             optionsLimit,
@@ -43,6 +44,11 @@ export default (Alpine) => {
                         itemSelectText: '',
                         loadingText: loadingMessage,
                         maxItemCount: maxItems ?? -1,
+                        maxItemText: (maxItemCount) => window.pluralize(
+                            maxItemsMessage,
+                            maxItemCount,
+                            { count: maxItemCount },
+                        ),
                         noChoicesText: searchPrompt,
                         noResultsText: noSearchResultsMessage,
                         placeholderValue: placeholder,

packages/forms/resources/js/index.js

@@ -11,6 +11,85 @@ import TextareaFormComponentAlpinePlugin from './components/textarea'
 import SortableAlpinePlugin from './sortable'
 import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
 
+// https://github.com/laravel/framework/blob/5299c22321c0f1ea8ff770b84a6c6469c4d6edec/src/Illuminate/Translation/MessageSelector.php#L15
+window.pluralize = function (text, number, variables) {
+    function extract(segments, number) {
+        for (const part of segments) {
+            const line = extractFromString(part, number)
+
+            if (line !== null) {
+                return line
+            }
+        }
+    }
+
+    function extractFromString(part, number) {
+        const matches = part.match(/^[\{\[]([^\[\]\{\}]*)[\}\]](.*)/s)
+
+        if (matches === null || matches.length !== 3) {
+            return null
+        }
+
+        const condition = matches[1]
+
+        const value = matches[2]
+
+        if (condition.includes(',')) {
+            const [from, to] = condition.split(',', 2)
+
+            if (to === '*' && number >= from) {
+                return value
+            } else if (from === '*' && number <= to) {
+                return value
+            } else if (number >= from && number <= to) {
+                return value
+            }
+        }
+
+        return condition == number ? value : null
+    }
+
+    function ucfirst(string) {
+        return string.toString().charAt(0).toUpperCase() + string.toString().slice(1)
+    }
+
+    function replace(line, replace) {
+        if (replace.length === 0) {
+            return line
+        }
+
+        const shouldReplace = {}
+
+        for (let [key, value] of Object.entries(replace)) {
+            shouldReplace[':' + ucfirst(key ?? '')] = ucfirst(value ?? '')
+            shouldReplace[':' + key.toUpperCase()] = value.toString().toUpperCase()
+            shouldReplace[':' + key] = value
+        }
+
+        Object.entries(shouldReplace).forEach(([key, value]) => {
+            line = line.replaceAll(key, value)
+        })
+
+        return line
+    }
+
+    function stripConditions(segments) {
+        return segments.map(part => part.replace(/^[\{\[]([^\[\]\{\}]*)[\}\]]/, ''))
+    }
+
+    let segments = text.split('|')
+
+    const value = extract(segments, number)
+
+    if (value !== null && value !== undefined) {
+        return replace(value.trim(), variables)
+    }
+
+    segments = stripConditions(segments)
+
+    return replace(segments.length > 1 && number > 1 ? segments[1] : segments[0], variables)
+}
+
 export default (Alpine) => {
     Alpine.plugin(ColorPickerFormComponentAlpinePlugin)
     Alpine.plugin(DateTimePickerFormComponentAlpinePlugin)

packages/forms/resources/lang/en/components.php

@@ -212,6 +212,8 @@
 
         'loading_message' => 'Loading...',
 
+        'max_items_message' => 'Only :count can be selected.',
+
         'no_search_results_message' => 'No options match your search.',
 
         'placeholder' => 'Select an option',

packages/forms/resources/views/components/select.blade.php

@@ -86,6 +86,7 @@
                         hasDynamicSearchResults: @js($hasDynamicSearchResults()),
                         loadingMessage: @js($getLoadingMessage()),
                         maxItems: @js($getMaxItems()),
+                        maxItemsMessage: @js($getMaxItemsMessage()),
                         noSearchResultsMessage: @js($getNoSearchResultsMessage()),
                         options: @js($getOptionsForJs()),
                         optionsLimit: @js($getOptionsLimit()),

packages/forms/src/Components/Select.php

@@ -55,6 +55,8 @@ class Select extends Field
 
     protected string | Closure | null $loadingMessage = null;
 
+    protected string | Closure | null $maxItemsMessage = null;
+
     protected string | Htmlable | Closure | null $noSearchResultsMessage = null;
 
     protected string | Closure | null $searchingMessage = null;
@@ -110,6 +112,7 @@ protected function setUp(): void
         });
 
         $this->loadingMessage(__('forms::components.select.loading_message'));
+        $this->maxItemsMessage(__('forms::components.select.max_items_message'));
         $this->noSearchResultsMessage(__('forms::components.select.no_search_results_message'));
         $this->searchingMessage(__('forms::components.select.searching_message'));
         $this->searchPrompt(__('forms::components.select.search_prompt'));
@@ -298,6 +301,13 @@ public function loadingMessage(string | Closure | null $message): static
         return $this;
     }
 
+    public function maxItemsMessage(string | Closure | null $message): static
+    {
+        $this->maxItemsMessage = $message;
+
+        return $this;
+    }
+
     public function noSearchResultsMessage(string | Htmlable | Closure | null $message): static
     {
         $this->noSearchResultsMessage = $message;
@@ -361,6 +371,11 @@ public function getLoadingMessage(): string
         return $this->evaluate($this->loadingMessage);
     }
 
+    public function getMaxItemsMessage(): string
+    {
+        return $this->evaluate($this->maxItemsMessage);
+    }
+
     public function getSearchingMessage(): string
     {
         return $this->evaluate($this->searchingMessage);

packages/tables/resources/views/components/selection-indicator.blade.php

@@ -14,7 +14,7 @@
         class="inline-block w-4 h-4 mr-3 animate-spin text-primary-500"
     />
 
-    <span @class(['dark:text-white' => config('tables.dark_mode')]) x-text="pluralize(@js(__('tables::table.selection_indicator.selected_count')), selectedRecords.length, { count: selectedRecords.length })"></span>
+    <span @class(['dark:text-white' => config('tables.dark_mode')]) x-text="window.pluralize(@js(__('tables::table.selection_indicator.selected_count')), selectedRecords.length, { count: selectedRecords.length })"></span>
 
     <span x-show="{{ $allRecordsCount }} !== selectedRecords.length">
         <button x-on:click="selectAllRecords" class="text-sm font-medium text-primary-600">

packages/tables/resources/views/index.blade.php

@@ -63,6 +63,7 @@
 
 <div
     x-data="{
+
         hasHeader: true,
 
         isLoading: false,
@@ -155,84 +156,6 @@
             return keys.every(key => this.isRecordSelected(key))
         },
 
-        // https://github.com/laravel/framework/blob/5299c22321c0f1ea8ff770b84a6c6469c4d6edec/src/Illuminate/Translation/MessageSelector.php#L15
-        pluralize: function (text, number, variables) {
-            function extract(segments, number) {
-                for (const part of segments) {
-                    const line = extractFromString(part, number)
-
-                    if (line !== null) {
-                        return line
-                    }
-                }
-            }
-
-            function extractFromString(part, number) {
-                const matches = part.match(/^[\{\[]([^\[\]\{\}]*)[\}\]](.*)/s)
-
-                if (matches === null || matches.length !== 3) {
-                    return null
-                }
-
-                const condition = matches[1]
-
-                const value = matches[2]
-
-                if (condition.includes(',')) {
-                    const [from, to] = condition.split(',', 2)
-
-                    if (to === '*' && number >= from) {
-                        return value
-                    } else if (from === '*' && number <= to) {
-                        return value
-                    } else if (number >= from && number <= to) {
-                        return value
-                    }
-                }
-
-                return condition == number ? value : null
-            }
-
-            function ucfirst(string) {
-                return string.toString().charAt(0).toUpperCase() + string.toString().slice(1)
-            }
-
-            function replace(line, replace) {
-                if (replace.length === 0) {
-                    return line
-                }
-
-                const shouldReplace = {}
-
-                for (let [key, value] of Object.entries(replace)) {
-                    shouldReplace[':' + ucfirst(key ?? '')] = ucfirst(value ?? '')
-                    shouldReplace[':' + key.toUpperCase()] = value.toString().toUpperCase()
-                    shouldReplace[':' + key] = value
-                }
-
-                Object.entries(shouldReplace).forEach(([key, value]) => {
-                    line = line.replaceAll(key, value)
-                })
-
-                return line
-            }
-
-            function stripConditions(segments) {
-                return segments.map(part => part.replace(/^[\{\[]([^\[\]\{\}]*)[\}\]]/, ''))
-            }
-
-            let segments = text.split('|')
-
-            const value = extract(segments, number)
-
-            if (value !== null && value !== undefined) {
-                return replace(value.trim(), variables)
-            }
-
-            segments = stripConditions(segments)
-
-            return replace(segments.length > 1 && number > 1 ? segments[1] : segments[0], variables)
-        }
     }"
     class="filament-tables-component"
 >