fix build errors

mythz · mythz · commit 4971f99e9022 · 2025-11-08T16:59:05.000+08:00
diff --git a/src/gallery/pages/AutoForm.tsx b/src/gallery/pages/AutoForm.tsx
@@ -28,10 +28,10 @@ function AutoFormContent() {
   </div>
 )}`}
       >
-        <AutoForm 
-          className="mx-auto max-w-3xl" 
-          type="QueryBookings" 
-          onSuccess={onSuccess} 
+        <AutoForm
+          panelClass="mx-auto max-w-3xl"
+          type="QueryBookings"
+          onSuccess={onSuccess}
         />
         {results && (
           <div>
@@ -85,11 +85,11 @@ function AutoFormContent() {
   type="QueryBookings" 
 />`}
       >
-        <AutoForm 
-          className="mx-auto max-w-3xl" 
+        <AutoForm
+          panelClass="mx-auto max-w-3xl"
           value={request}
           onChange={setRequest}
-          type="QueryBookings" 
+          type="QueryBookings"
         />
       </CodeExample>
 
@@ -98,10 +98,10 @@ function AutoFormContent() {
         description="AutoCreateForm can be used to create an automated form based on a AutoQuery CRUD Create Request DTO definition which can be rendered in a traditional inline Form with card formStyle option:"
         code={`<AutoCreateForm type="CreateBooking" formStyle="card" />`}
       >
-        <AutoCreateForm 
-          className="mx-auto max-w-3xl" 
-          type="CreateBooking" 
-          formStyle="card" 
+        <AutoCreateForm
+          panelClass="mx-auto max-w-3xl"
+          type="CreateBooking"
+          formStyle="card"
         />
       </CodeExample>
 
@@ -122,12 +122,12 @@ function AutoFormContent() {
   subHeading="Manage reservations for MyApp hotels." 
 />`}
       >
-        <AutoEditForm 
-          className="mx-auto max-w-3xl"
-          value={booking} 
-          type="UpdateBooking" 
-          deleteType="DeleteBooking" 
-          heading="Change an existing Room Booking" 
+        <AutoEditForm
+          panelClass="mx-auto max-w-3xl"
+          value={booking}
+          type="UpdateBooking"
+          deleteType="DeleteBooking"
+          heading="Change an existing Room Booking"
           subHeading="Manage reservations for MyApp hotels."
           formStyle="card"
         />
@@ -158,11 +158,11 @@ function AutoFormContent() {
   </div>
 </AutoEditForm>`}
       >
-        <AutoEditForm 
-          className="mx-auto max-w-3xl mb-4"
-          value={booking} 
-          formStyle="card" 
-          type="UpdateBooking" 
+        <AutoEditForm
+          panelClass="mx-auto max-w-3xl mb-4"
+          value={booking}
+          formStyle="card"
+          type="UpdateBooking"
           deleteType="DeleteBooking"
         >
           <div slot="heading">
diff --git a/src/gallery/pages/Autocomplete.tsx b/src/gallery/pages/Autocomplete.tsx
@@ -96,7 +96,7 @@ export default function AutocompletePage() {
           >
             {({ displayName, profileUrl }: any) => (
               <div className="flex items-center">
-                <Icon className="h-6 w-6 flex-shrink-0 rounded-full" src={profileUrl} loading="lazy" />
+                <Icon className="h-6 w-6 flex-shrink-0 rounded-full" src={profileUrl} />
                 <span className="ml-3 truncate">{displayName}</span>
               </div>
             )}
@@ -149,7 +149,7 @@ export default function AutocompletePage() {
           >
             {({ displayName, profileUrl }: any) => (
               <div className="flex items-center">
-                <Icon className="h-6 w-6 flex-shrink-0 rounded-full" src={profileUrl} loading="lazy" />
+                <Icon className="h-6 w-6 flex-shrink-0 rounded-full" src={profileUrl} />
                 <span className="ml-3 truncate">{displayName}</span>
               </div>
             )}
diff --git a/src/gallery/pages/CustomInputs.tsx b/src/gallery/pages/CustomInputs.tsx
@@ -17,16 +17,16 @@ function PhoneInput({ id, value, onChange, label, placeholder, help, className,
     return val
   }
 
-  const handleChange = (newValue: string) => {
-    const formatted = formatPhone(newValue)
+  const handleChange = (newValue: string | number) => {
+    const formatted = formatPhone(String(newValue))
     onChange?.(formatted)
   }
 
   return (
     <TextInput
       id={id}
       value={value}
-      onChange={handleChange}
+      onChange={handleChange as any}
       label={label}
       placeholder={placeholder || "(123) 456-7890"}
       help={help}
@@ -307,7 +307,7 @@ const volumeInput: InputInfo = {
                 label: 'Phone Number',
                 help: 'Auto-formats as you type'
               } as InputInfo}
-              value={dynamicModel}
+              value={dynamicModel as any}
               onChange={setDynamicModel}
               api={null}
             />
@@ -318,7 +318,7 @@ const volumeInput: InputInfo = {
                 label: 'Theme Color',
                 help: 'Pick your brand color'
               } as InputInfo}
-              value={dynamicModel}
+              value={dynamicModel as any}
               onChange={setDynamicModel}
               api={null}
             />
@@ -331,7 +331,7 @@ const volumeInput: InputInfo = {
                 max: '100',
                 step: 5
               } as InputInfo}
-              value={dynamicModel}
+              value={dynamicModel as any}
               onChange={setDynamicModel}
               api={null}
             />
diff --git a/src/gallery/pages/DataGrid.tsx b/src/gallery/pages/DataGrid.tsx
@@ -70,15 +70,13 @@ const tracks = [
   }}
 />`}
       >
-        <DataGrid 
-          items={forecasts} 
-          className="max-w-screen-md" 
+        <DataGrid
+          items={forecasts}
+          className="max-w-screen-md"
           tableStyle={['stripedRows','uppercaseHeadings']}
           headerTitles={{ temperatureC:'TEMP. (C)', temperatureF:'TEMP. (F)' }}
-          headerSlots={{
-            'date-header': () => <span className="text-indigo-600">Date</span>
-          }}
-          columnSlots={{
+          slots={{
+            'date-header': () => <span className="text-indigo-600">Date</span>,
             date: ({ date }: any) => new Intl.DateTimeFormat().format(new Date(date)),
             temperatureC: ({ temperatureC }: any) => <>{temperatureC}&deg;</>,
             temperatureF: ({ temperatureF }: any) => <>{temperatureF}&deg;</>,
@@ -110,19 +108,17 @@ const tracks = [
   }}
 />`}
       >
-        <DataGrid 
+        <DataGrid
           items={bookings}
           visibleFrom={{ name:'xl', bookingStartDate:'sm', bookingEndDate:'xl' }}
           onHeaderSelected={headerSelected}
           onRowSelected={rowSelected}
           isSelected={(row: any) => selected === row.id}
-          columnSlots={{
+          slots={{
             id: ({ id }: any) => <span className="text-gray-900">{id}</span>,
             name: ({ name }: any) => name,
             cost: ({ cost }: any) => <span dangerouslySetInnerHTML={{ __html: currency(cost) }} />,
-            createdBy: ({ createdBy }: any) => <span dangerouslySetInnerHTML={{ __html: createdBy }} />
-          }}
-          headerSlots={{
+            createdBy: ({ createdBy }: any) => <span dangerouslySetInnerHTML={{ __html: createdBy }} />,
             'roomNumber-header': () => <><span className="hidden lg:inline">Room </span>No</>,
             'bookingStartDate-header': () => <>Start<span className="hidden lg:inline"> Date</span></>,
             'bookingEndDate-header': () => <>End<span className="hidden lg:inline"> Date</span></>,
diff --git a/src/gallery/pages/FileInput.tsx b/src/gallery/pages/FileInput.tsx
@@ -54,12 +54,12 @@ function FileInputContent() {
   onChange={setFiles}
 />`}
       >
-        <FileInput 
-          id="profileUrls" 
-          label="Multiple File Uploads" 
-          multiple 
+        <FileInput
+          id="profileUrls"
+          label="Multiple File Uploads"
+          multiple
           files={files}
-          onChange={setFiles}
+          onChange={setFiles as any}
           className="max-w-lg"
         />
       </CodeExample>
@@ -131,11 +131,11 @@ const submit = async (e: React.FormEvent) => {
   formStyle="card" 
 />`}
       >
-        <AutoEditForm 
-          type="UpdateContact" 
-          value={contact} 
-          formStyle="card" 
-          className="max-w-3xl"
+        <AutoEditForm
+          type="UpdateContact"
+          value={contact}
+          formStyle="card"
+          panelClass="max-w-3xl"
         />
       </CodeExample>
     </GalleryLayout>
diff --git a/src/gallery/pages/FormInputs.tsx b/src/gallery/pages/FormInputs.tsx
@@ -80,12 +80,12 @@ function BookingsForm({ id }: { id: number }) {
             <ErrorSummary except={visibleFields} className="mb-4" />
             <div className="grid grid-cols-6 gap-6">
               <div className="col-span-6 sm:col-span-3">
-                <TextInput 
-                  id="name" 
+                <TextInput
+                  id="name"
                   value={request.name}
                   onChange={(value) => updateField('name', value)}
-                  required 
-                  placeholder="Name for this booking" 
+                  placeholder="Name for this booking"
+                  {...{ required: true } as any}
                 />
               </div>
               <div className="col-span-6 sm:col-span-3">
@@ -97,32 +97,30 @@ function BookingsForm({ id }: { id: number }) {
                 />
               </div>
               <div className="col-span-6 sm:col-span-3">
-                <TextInput 
-                  type="number" 
-                  id="roomNumber" 
+                <TextInput
+                  type="number"
+                  id="roomNumber"
                   value={request.roomNumber}
                   onChange={(value) => updateField('roomNumber', value)}
-                  min={0}
-                  required 
+                  {...{ min: 0, required: true } as any}
                 />
               </div>
               <div className="col-span-6 sm:col-span-3">
-                <TextInput 
-                  type="number" 
-                  id="cost" 
+                <TextInput
+                  type="number"
+                  id="cost"
                   value={request.cost}
                   onChange={(value) => updateField('cost', value)}
-                  min={0}
-                  required 
+                  {...{ min: 0, required: true } as any}
                 />
               </div>
               <div className="col-span-6 sm:col-span-3">
-                <TextInput 
-                  type="date" 
-                  id="bookingStartDate" 
+                <TextInput
+                  type="date"
+                  id="bookingStartDate"
                   value={request.bookingStartDate}
                   onChange={(value) => updateField('bookingStartDate', value)}
-                  required 
+                  {...{ required: true } as any}
                 />
               </div>
               <div className="col-span-6 sm:col-span-3">
@@ -153,7 +151,7 @@ function BookingsForm({ id }: { id: number }) {
               )}
             </div>
             <div>
-              <PrimaryButton onClick={submit}>Update Booking</PrimaryButton>
+              <PrimaryButton onClick={submit as any}>Update Booking</PrimaryButton>
             </div>
           </div>
         </div>
diff --git a/src/gallery/pages/Formats.tsx b/src/gallery/pages/Formats.tsx
@@ -48,7 +48,7 @@ export default function FormatsPage() {
         title="Icon with custom class"
         code={`<PreviewFormat value="/pages/vue/1.jpg" format={Formats.icon} className="w-40 h-40 rounded-full" />`}
       >
-        <PreviewFormat value="https://blazor-gallery.servicestack.net/profiles/1.jpg" format={Formats.icon} className="w-40 h-40 rounded-full" />
+        <PreviewFormat value="https://blazor-gallery.servicestack.net/profiles/1.jpg" format={Formats.icon} {...{ className: "w-40 h-40 rounded-full" } as any} />
       </CodeExample>
 
       <CodeExample
@@ -67,18 +67,17 @@ export default function FormatsPage() {
 
       <CodeExample
         title="Attachment (Document) with classes"
-        code={`<PreviewFormat 
-  value="/content/hosting.md" 
-  format={Formats.attachment} 
-  className="text-xl text-indigo-700 font-semibold" 
-  iconClass="w-8 h-8" 
+        code={`<PreviewFormat
+  value="/content/hosting.md"
+  format={Formats.attachment}
+  className="text-xl text-indigo-700 font-semibold"
+  iconClass="w-8 h-8"
 />`}
       >
-        <PreviewFormat 
-          value="/content/hosting.md" 
-          format={Formats.attachment} 
-          className="text-xl text-indigo-700 font-semibold" 
-          iconClass="w-8 h-8" 
+        <PreviewFormat
+          value="/content/hosting.md"
+          format={Formats.attachment}
+          {...{ className: "text-xl text-indigo-700 font-semibold", iconClass: "w-8 h-8" } as any}
         />
       </CodeExample>
 
@@ -93,7 +92,7 @@ export default function FormatsPage() {
         title="Link with class"
         code={`<PreviewFormat value="https://servicestack.net/react" format={Formats.link} className="text-xl text-blue-600" />`}
       >
-        <PreviewFormat value="https://servicestack.net/react" format={Formats.link} className="text-xl text-blue-600" />
+        <PreviewFormat value="https://servicestack.net/react" format={Formats.link} {...{ className: "text-xl text-blue-600" } as any} />
       </CodeExample>
 
       <CodeExample
diff --git a/src/gallery/pages/TagInput.tsx b/src/gallery/pages/TagInput.tsx
@@ -35,19 +35,22 @@ function TagInputForm() {
             <ErrorSummary except={visibleFields} />
             <div className="grid grid-cols-12 gap-6">
               <div className="col-span-6">
-                <TextInput 
+                <TextInput
+                  id="firstName"
                   value={request.firstName}
                   onChange={(value) => updateField('firstName', value)}
                 />
               </div>
               <div className="col-span-6">
-                <TextInput 
+                <TextInput
+                  id="lastName"
                   value={request.lastName}
                   onChange={(value) => updateField('lastName', value)}
                 />
               </div>
               <div className="col-span-12">
-                <TagInput 
+                <TagInput
+                  id="skills"
                   value={request.skills}
                   onChange={(value) => updateField('skills', value)}
                   label="Technology Skills"
@@ -90,11 +93,11 @@ function TagInputContent() {
   formStyle="card" 
 />`}
       >
-        <AutoEditForm 
-          type="UpdateContact" 
-          value={contact} 
-          formStyle="card" 
-          className="max-w-3xl"
+        <AutoEditForm
+          type="UpdateContact"
+          value={contact}
+          formStyle="card"
+          panelClass="max-w-3xl"
         />
       </CodeExample>
 
