sozsoft/sozsoft-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

<input/> -> <Input/>

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2026-08-20 15:01:10 +03:00
parent 870c98690c
commit 7186cb0ab0
55 changed files with 429 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
api/src/Sozsoft.Platform.DbMigrator/Migrations/ListFormSeeder_Administration.cs
View file

@ -5980,7 +5980,7 @@ public class ListFormSeeder_Administration : IDataSeedContributor, ITransientDep
new() { FieldName = "RequestDate", FieldDbType = DbType.Date, Value = "@NOW", CustomValueType = FieldCustomValueTypeEnum.CustomKey },
new() { FieldName = "Importance", FieldDbType = DbType.String, Value = "Low", CustomValueType = FieldCustomValueTypeEnum.Value },
new() { FieldName = "Urgency", FieldDbType = DbType.String, Value = "Low", CustomValueType = FieldCustomValueTypeEnum.Value },
new() { FieldName = "Status", FieldDbType = DbType.String, Value = "backlog", CustomValueType = FieldCustomValueTypeEnum.Value },
new() { FieldName = "Status", FieldDbType = DbType.String, Value = "Backlog", CustomValueType = FieldCustomValueTypeEnum.Value },
})
});
@ -6082,12 +6082,12 @@ public class ListFormSeeder_Administration : IDataSeedContributor, ITransientDep
DisplayExpr = "name",
ValueExpr = "key",
LookupQuery = JsonSerializer.Serialize(new LookupDataDto[] {
new () { Key="backlog", Name="App.StaticLookup.Backlog" },
new () { Key="ready_to_start", Name="App.StaticLookup.ReadyToStart" },
new () { Key="in_progress", Name="App.StaticLookup.InProgress" },
new () { Key="code_review", Name="App.StaticLookup.CodeReview" },
new () { Key="testing", Name="App.StaticLookup.Testing" },
new () { Key="staging", Name="App.StaticLookup.Staging" }
new () { Key="Backlog", Name="App.StaticLookup.Backlog" },
new () { Key="Ready to Start", Name="App.StaticLookup.ReadyToStart" },
new () { Key="In Progress", Name="App.StaticLookup.InProgress" },
new () { Key="Code Review", Name="App.StaticLookup.CodeReview" },
new () { Key="Testing", Name="App.StaticLookup.Testing" },
new () { Key="Staging", Name="App.StaticLookup.Staging" }
}),
}),
ColSpan = 1,

4
configs/seeds/host/custom/DynamicEntityComponent.json
View file

@ -1,10 +1,10 @@
{
"GeneratedAt": "2026-08-19T13:14:10.1944181Z",
"GeneratedAt": "2026-08-20T11:16:38.2313189Z",
"CustomComponents": [
{
"Name": "DynamicEntityComponent",
"RoutePath": "/admin/dynamic-entity",
"Code": "import React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\n\ninterface DynamicEntityComponentProps {\n title: string;\n}\n\nconst api = axios.create({\n baseURL: \"https://api.sozsoft.com\",\n});\n\nconst DynamicEntityComponent: React.FC<DynamicEntityComponentProps> = ({ title }) => {\n const [data, setData] = useState<Array<{ id: string; name: string }>>([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n useEffect(() => {\n const fetchData = async () => {\n setLoading(true);\n setError(null);\n\n try {\n const res = await api.get(`/api/app/crudendpoint/${title}`);\n const raw = Array.isArray(res.data) ? res.data : res.data?.items ?? [];\n\n const filtered = raw.map((item: any) => ({\n id: item.Id ?? item.id,\n name: item.Name ?? item.name,\n }));\n\n setData(filtered);\n } catch (err: any) {\n setError(err.message || \"Failed to fetch data\");\n } finally {\n setLoading(false);\n }\n };\n\n if (title) fetchData();\n }, [title]);\n\n if (loading) return <div>Loading...</div>;\n if (error) return <div className=\"text-red-600 dark:text-red-400\">Error: {error}</div>;\n if (!data.length) return <div>No records found</div>;\n\n const headers = [\"id\", \"name\", \"actions\"];\n\n return (\n <div className=\"overflow-auto\">\n <table className=\"min-w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-sm rounded-lg\">\n <thead className=\"bg-slate-100 dark:bg-slate-800\">\n <tr>\n {headers.map((key) => (\n <th\n key={key}\n className=\"text-left px-4 py-2 border-b border-slate-200 dark:border-slate-700 text-sm font-medium text-slate-700 dark:text-slate-200\"\n >\n {key === \"actions\" ? \"Actions\" : key}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {data.map((item, rowIndex) => (\n <tr key={item.id ?? rowIndex} className=\"hover:bg-slate-50 dark:hover:bg-slate-800\">\n <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n {item.id}\n </td>\n <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n {item.name}\n </td>\n <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800\">\n <Button\n type=\"button\"\n color=\"blue-500\"\n onClick={() => alert(item.name)}\n shape=\"round\"\n size=\"xs\"\n variant=\"solid\"\n id=\"c_mrix4c1a_qrybhk\"\n >\n Show Name\n </Button>\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n};\n\nexport default DynamicEntityComponent;",
"Code": "import React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\n\ninterface DynamicEntityComponentProps {\n title: string;\n}\n\nconst api = axios.create({\n baseURL: \"https://localhost:44344/\",\n});\n\nconst DynamicEntityComponent: React.FC<DynamicEntityComponentProps> = ({ title }) => {\n const [data, setData] = useState<Array<{ id: string; name: string }>>([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n useEffect(() => {\n const fetchData = async () => {\n setLoading(true);\n setError(null);\n\n try {\n const res = await api.get(`/api/app/crudendpoint/${title}`);\n const raw = Array.isArray(res.data) ? res.data : res.data?.items ?? [];\n\n const filtered = raw.map((item: any) => ({\n id: item.Id ?? item.id,\n name: item.Name ?? item.name,\n }));\n\n setData(filtered);\n } catch (err: any) {\n setError(err.message || \"Failed to fetch data\");\n } finally {\n setLoading(false);\n }\n };\n\n if (title) fetchData();\n }, [title]);\n\n if (loading) return <div>Loading...</div>;\n if (error) return <div className=\"text-red-600 dark:text-red-400\">Error: {error}</div>;\n if (!data.length) return <div>No records found</div>;\n\n const headers = [\"id\", \"name\", \"actions\"];\n\n return (\n <div className=\"overflow-auto\">\n <table className=\"min-w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-sm rounded-lg\">\n <thead className=\"bg-slate-100 dark:bg-slate-800\">\n <tr>\n {headers.map((key) => (\n <th\n key={key}\n className=\"text-left px-4 py-2 border-b border-slate-200 dark:border-slate-700 text-sm font-medium text-slate-700 dark:text-slate-200\"\n >\n {key === \"actions\" ? \"Actions\" : key}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {data.map((item, rowIndex) => (\n <tr key={item.id ?? rowIndex} className=\"hover:bg-slate-50 dark:hover:bg-slate-800\">\n <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n {item.id}\n </td>\n <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n {item.name}\n </td>\n <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800\">\n <Button\n type=\"button\"\n color=\"blue-500\"\n onClick={() => alert(item.name)}\n shape=\"round\"\n size=\"xs\"\n variant=\"solid\"\n id=\"c_mrix4c1a_qrybhk\"\n >\n Show Name\n </Button>\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n};\n\nexport default DynamicEntityComponent;",
"Props": null,
"Description": null,
"IsActive": true,

2
configs/seeds/host/custom/NewComponent.json
View file

@ -1,5 +1,5 @@
{
"GeneratedAt": "2026-08-20T07:44:44.3775836Z",
"GeneratedAt": "2026-08-20T11:23:45.7859641Z",
"CustomComponents": [
{
"Name": "NewComponent",

7
ui/src/components/codeLayout/StyleModal.tsx
View file

@ -2,6 +2,7 @@ import { useMemo, useState } from 'react'
import { FaPlus, FaSearch, FaTimes } from 'react-icons/fa'
import { Button } from '@/components/ui'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Input from '@/components/ui/Input'
interface StyleModalProps {
isOpen: boolean
@ -400,7 +401,8 @@ const StyleModal = ({
<div className="grid gap-3 border-b border-slate-200 p-4 md:grid-cols-[1fr_190px] dark:border-slate-700">
<label className="relative">
<FaSearch className="absolute left-3 top-3 text-slate-400" />
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white py-2 pl-9 pr-3 text-sm dark:border-slate-700 dark:bg-slate-950 dark:text-white"
placeholder={translate('::App.StyleModal.SearchClasses')}
value={search}
@ -423,7 +425,8 @@ const StyleModal = ({
)}
{mode === 'class' && (
<div className="flex gap-2 border-b border-slate-200 p-4 dark:border-slate-700">
<input
<Input
unstyle
className="min-w-0 flex-1 rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-xs dark:border-slate-700 dark:bg-slate-950 dark:text-white"
placeholder={translate('::App.StyleModal.CustomClassPlaceholder')}
value={customClass}

4
ui/src/components/importManager/FileUploadArea.tsx
View file

@ -2,6 +2,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import React, { useCallback, useState } from 'react'
import { FaUpload, FaFile, FaTimes, FaRegCircle } from 'react-icons/fa'
import { Button } from '@/components/ui'
import Input from '@/components/ui/Input'
interface FileUploadAreaProps {
onFileUpload: (file: File) => void
@ -109,7 +110,8 @@ export const FileUploadArea: React.FC<FileUploadAreaProps> = ({
onDragOver={handleDrag}
onDrop={handleDrop}
>
<input
<Input
unstyle
type="file"
id="fileInput"
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"

7
ui/src/components/importManager/ImportPreview.tsx
View file

@ -5,6 +5,7 @@ import { GridDto } from '@/proxy/form/models'
import { ImportService } from '@/services/import.service'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Button } from '@/components/ui'
import Input from '@/components/ui/Input'
interface ImportPreviewProps {
session: ListFormImportDto
@ -195,7 +196,8 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
<thead className="bg-gray-50 dark:bg-gray-800 sticky top-0 z-10">
<tr>
<th className="px-4 py-2 text-left font-medium text-gray-700 dark:text-gray-200 whitespace-nowrap w-12">
<input
<Input
unstyle
type="checkbox"
checked={selectAll}
onChange={handleSelectAll}
@ -221,7 +223,8 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
}`}
>
<td className="px-4 py-2">
<input
<Input
unstyle
type="checkbox"
checked={selectedRows.includes(rowIndex)}
onChange={() => handleRowSelect(rowIndex)}

22
ui/src/components/orders/PaymentForm.tsx
View file

@ -10,6 +10,7 @@ import { OrderService } from '@/services/order.service'
import { CustomTenantDto } from '@/proxy/config/models'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Button } from '@/components/ui'
import Input from '@/components/ui/Input'
interface BasketData {
items: BasketItem[]
@ -165,7 +166,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
License Start Time
</label>
<input
<Input
unstyle
type="date"
required
value={licenseStartTime}
@ -211,7 +213,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
: 'border-gray-200 bg-white hover:border-blue-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950/40 dark:hover:border-blue-500 dark:hover:bg-gray-800/70'
}`}
>
<input
<Input
unstyle
type="radio"
name="paymentMethodId"
value={method.name}
@ -268,7 +271,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
: 'border-gray-200 bg-white hover:border-blue-200 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950/40 dark:hover:border-blue-500 dark:hover:bg-gray-800/70'
}`}
>
<input
<Input
unstyle
type="radio"
name="installment"
value={option.installment}
@ -309,7 +313,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
<h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-3">
{translate('::App.PaymentCard.CardTitle')}
</h3>
<input
<Input
unstyle
type="text"
required
value={paymentData.cardName}
@ -317,7 +322,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
placeholder={translate('::App.PaymentCard.CardName')}
/>
<input
<Input
unstyle
type="text"
required
value={paymentData.cardNumber}
@ -327,7 +333,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
maxLength={19}
/>
<div className="grid grid-cols-2 gap-3">
<input
<Input
unstyle
type="text"
required
value={paymentData.expiryDate}
@ -336,7 +343,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
placeholder="MM/YY"
maxLength={5}
/>
<input
<Input
unstyle
type="text"
required
value={paymentData.cvv}

4
ui/src/components/orders/ProductCatalog.tsx
View file

@ -7,6 +7,7 @@ import { OrderService } from '@/services/order.service'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Loading } from '../shared'
import { Button } from '@/components/ui'
import Input from '@/components/ui/Input'
interface ProductCatalogProps {
searchQuery: string
@ -135,7 +136,8 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
</div>
<div className="relative">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<input
<Input
unstyle
type="text"
placeholder={translate('::App.ProductsSearch.SearchPlaceholder')}
value={searchQuery}

31
ui/src/components/orders/TenantForm.tsx
View file

@ -32,6 +32,7 @@ import {
} from '@/services/location.service'
import { useStoreActions, useStoreState } from '@/store/store'
import type { TenantFormDraft } from '@/store/client.model'
import Input from '@/components/ui/Input'
interface LocationOption<T> {
label: string
@ -616,7 +617,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
<div className="relative flex flex-col sm:flex-row sm:items-stretch gap-3">
<div className="relative w-full">
<FaBuilding className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="text"
required
autoFocus
@ -773,7 +775,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</label>
<div className="relative">
<FaBuilding className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="text"
required
autoFocus
@ -791,7 +794,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</label>
<div className="relative">
<FaUser className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="text"
required
placeholder="Enter founder's name"
@ -901,7 +905,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</label>
<div className="relative">
<FaMapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="text"
required
placeholder="34782"
@ -937,7 +942,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</label>
<div className="relative">
<FaPhone className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="tel"
required
inputMode="numeric"
@ -982,7 +988,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</label>
<div className="relative">
<FaEnvelope className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="email"
required
placeholder="sample@email.com"
@ -1028,7 +1035,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</label>
<div className="relative">
<FaSitemap className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="text"
required
placeholder={translate('::App.Listform.ListformField.Website')}
@ -1071,7 +1079,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</label>
<div className="relative">
<FaUserPlus className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="text"
placeholder={translate('::App.StaticLookup.Reference')}
value={formData.reference || ''}
@ -1089,7 +1098,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</label>
<div className="relative">
<FaBuilding className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="text"
required
placeholder="Sarıgazi"
@ -1105,7 +1115,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</label>
<div className="relative">
<FaDollarSign className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
<Input
unstyle
type="text"
required
placeholder="1234567890"

13
ui/src/components/scriptBuilder/ScriptBuilderDialog.tsx
View file

@ -20,6 +20,7 @@ import {
FaTrash,
} from 'react-icons/fa'
import { apiEntryName, attachScriptIntelliSense, insertAtCursor } from './scriptIntelliSense'
import Input from '@/components/ui/Input'
import {
scriptRuleConditions,
type ScriptDialect,
@ -265,7 +266,8 @@ function ScriptBuilderDialog({
const options = optionSource ? dialect.getOptions(optionSource) : []
if (!options.length) {
return (
<input
<Input
unstyle
className={controlClass}
placeholder={placeholder}
value={selectedValue}
@ -368,7 +370,8 @@ function ScriptBuilderDialog({
</select>
)}
{(param.type === 'text' || param.type === 'number') && (
<input
<Input
unstyle
className={controlClass}
type={param.type === 'number' ? 'number' : 'text'}
value={currentValue}
@ -477,7 +480,8 @@ function ScriptBuilderDialog({
<span className="mb-1 block text-xs text-gray-500">
{translate('::App.Listform.ListformField.Value')}
</span>
<input
<Input
unstyle
className={controlClass}
value={condition.value}
placeholder="Aktif / 1000"
@ -646,7 +650,8 @@ function ScriptBuilderDialog({
<section className={`flex min-h-0 w-80 shrink-0 flex-col ${cardClass} p-3`}>
<div className="mb-2 flex items-center gap-2">
<FaSearch className="text-gray-400" size={11} />
<input
<Input
unstyle
className="w-full min-w-0 bg-transparent text-xs text-gray-700 outline-none dark:text-gray-100"
placeholder={translate('::App.ScriptBuilder.SearchHelp')}
value={helpSearch}

3
ui/src/components/template/MessengerWidget.tsx
View file

@ -711,7 +711,8 @@ const MessengerWidgetContent = ({ className }: { className?: string }) => {
</div>
)}
<div className="flex min-h-[52px] items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 focus-within:border-emerald-500 focus-within:ring-1 focus-within:ring-emerald-500 dark:border-gray-600 dark:bg-gray-800">
<input
<Input
unstyle
ref={fileInputRef}
type="file"
multiple

4
ui/src/components/template/Search.tsx
View file

@ -13,6 +13,7 @@ import { Badge, Checkbox, Pagination, Tooltip } from '../ui'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { getSearch, getSystems } from '@/services/global-search.service'
import { FcSearch } from 'react-icons/fc'
import Input from '@/components/ui/Input'
type SearchData = {
title: string
@ -189,7 +190,8 @@ const _Search = ({ className }: { className?: string }) => {
<div className="px-4 flex items-center border-b border-gray-200 dark:border-gray-600">
<div className="flex items-center flex-1">
<FaSearch className="text-xl" />
<input
<Input
unstyle
ref={inputRef}
className="ring-0 outline-none block w-full p-4 text-base bg-transparent text-gray-900 dark:text-gray-100"
placeholder={translate('::App.Platform.Search2')}

4
ui/src/components/ui/Input/Input.tsx
View file

@ -27,7 +27,7 @@ export interface InputProps
form?: any
}
const Input = forwardRef<ElementType | HTMLInputElement, InputProps>((props, ref) => {
const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const {
asElement: Component = 'input',
className,
@ -156,7 +156,7 @@ const Input = forwardRef<ElementType | HTMLInputElement, InputProps>((props, ref
}
const inputProps = {
className: !unstyle ? inputClass : '',
className: !unstyle ? inputClass : className,
disabled,
type,
ref,

9
ui/src/components/visualDesigner/VisualCanvas.tsx
View file

@ -10,6 +10,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import { formatLocaleValue } from '@/utils/localeFormat'
import { FaArrowDown, FaArrowUp, FaClone, FaGripVertical, FaTrash } from 'react-icons/fa'
import { beginDesignerDragSoon, endDesignerDrag, useDesignerDrag } from './designerDrag'
import Input from '@/components/ui/Input'
import {
buildDesignerFilterParams,
buildSqlDefaultRecord,
@ -1352,7 +1353,13 @@ const renderElement = (
)
}
if (node.type === 'checkbox') {
return <input {...(props as React.InputHTMLAttributes<HTMLInputElement>)} type="checkbox" />
return (
<Input
unstyle
{...(props as Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>)}
type="checkbox"
/>
)
}
if (node.kind === 'html') {
// An empty element paints nothing, so on the canvas it would look like the

7
ui/src/views/admin/files/components/FileItem.tsx
View file

@ -27,6 +27,7 @@ import { toast, Notification } from '@/components/ui'
import type { FileItem as FileItemType, FileActionMenuItem } from '@/types/fileManagement'
import { FILE_URL } from '@/constants/app.constant'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Input from '@/components/ui/Input'
export interface FileItemProps {
item: FileItemType
@ -391,7 +392,8 @@ const FileItem = forwardRef<HTMLDivElement, FileItemProps>((props, ref) => {
<div className="col-span-5 flex items-center min-w-0 gap-2">
{/* Checkbox */}
{!item.isReadOnly ? (
<input
<Input
unstyle
type="checkbox"
checked={selected}
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
@ -490,7 +492,8 @@ const FileItem = forwardRef<HTMLDivElement, FileItemProps>((props, ref) => {
{/* Checkbox */}
{!item.isReadOnly && (
<div className="absolute top-3 left-3 z-10">
<input
<Input
unstyle
type="checkbox"
checked={selected}
className="w-4 h-4 text-blue-600 bg-white border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 shadow-sm"

4
ui/src/views/admin/files/components/FileUploadModal.tsx
View file

@ -9,6 +9,7 @@ import {
import { Dialog, Button, Progress } from '@/components/ui'
import { FaCloudUploadAlt, FaTimes } from 'react-icons/fa'
import classNames from 'classnames'
import Input from '@/components/ui/Input'
export interface FileUploadModalProps {
isOpen: boolean
@ -252,7 +253,8 @@ const FileUploadModal = forwardRef<HTMLDivElement, FileUploadModalProps>((props,
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<input
<Input
unstyle
ref={fileInputRef}
multiple
type="file"

4
ui/src/views/admin/hr/OrgChart.tsx
View file

@ -36,6 +36,7 @@ import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
import { Avatar, Button } from '@/components/ui'
import { useStoreState } from '@/store'
import UserProfileCard from '@/views/intranet/SocialWall/UserProfileCard'
import Input from '@/components/ui/Input'
type ViewMode = 'department' | 'jobPosition'
@ -921,7 +922,8 @@ const OrgChart = () => {
<div className="flex items-center bg-slate-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
<label className="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs sm:text-sm text-slate-600 dark:text-gray-300 select-none cursor-pointer">
<input
<Input
unstyle
type="checkbox"
checked={showUsers}
className="h-4 w-4 rounded border-slate-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"

3
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
View file

@ -96,7 +96,8 @@ function TablePickerModal({
{step === 'table' && (
<>
<div className="px-4 py-2 border-b border-gray-100 dark:border-gray-800">
<input
<Input
unstyle
autoFocus
value={tableSearch}
placeholder={translate('::App.Platform.Search')}

19
ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
View file

@ -43,6 +43,7 @@ import {
type LeafValueType,
} from './editor-options/jsonUtils'
import { editorOptionsPresets } from './editor-options/presets'
import Input from '@/components/ui/Input'
import {
isSpecRelevant,
optionGroups,
@ -394,7 +395,8 @@ function EditorOptionsBuilderDialog({
<>
{/* ── Araç çubuğu ──────────────────────────────────────── */}
<div className="flex flex-wrap items-center gap-2">
<input
<Input
unstyle
className={`${controlClass} !w-64`}
value={search}
placeholder={translate('::App.ListFormEditorOptions.SearchSetting')}
@ -404,7 +406,8 @@ function EditorOptionsBuilderDialog({
className="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs text-gray-600 dark:border-gray-700 dark:text-gray-300"
title={translate('::App.ListFormEditorOptions.ShowAllHint')}
>
<input
<Input
unstyle
type="checkbox"
checked={showAll}
onChange={(event) => setShowAll(event.target.checked)}
@ -415,7 +418,8 @@ function EditorOptionsBuilderDialog({
className="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs text-gray-600 dark:border-gray-700 dark:text-gray-300"
title={translate('::App.ListFormEditorOptions.OnlySetHint')}
>
<input
<Input
unstyle
type="checkbox"
checked={onlySet}
onChange={(event) => setOnlySet(event.target.checked)}
@ -560,7 +564,8 @@ function EditorOptionsBuilderDialog({
</option>
))}
</select>
<input
<Input
unstyle
className={`${controlClass} col-span-5`}
value={leafToText(current)}
onChange={(event) =>
@ -584,7 +589,8 @@ function EditorOptionsBuilderDialog({
})}
<div className="grid grid-cols-12 items-center gap-2 border-t border-dashed border-gray-200 pt-2 dark:border-gray-700">
<input
<Input
unstyle
className={`${controlClass} col-span-4`}
value={newPath}
placeholder="path.to.option"
@ -601,7 +607,8 @@ function EditorOptionsBuilderDialog({
</option>
))}
</select>
<input
<Input
unstyle
className={`${controlClass} col-span-5`}
value={newValue}
placeholder={

15
ui/src/views/admin/listForm/edit/json-row-operations/editor-options/OptionField.tsx
View file

@ -3,6 +3,7 @@ import { FaExclamationTriangle, FaUndo } from 'react-icons/fa'
import { coerceNumber, coerceSize, leafToText } from './jsonUtils'
import type { OptionSpec } from './optionSpecs'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Input from '@/components/ui/Input'
export const controlClass =
'w-full min-w-0 h-9 px-2 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-gray-100 focus:outline-none focus:border-indigo-400 disabled:opacity-60'
@ -173,7 +174,8 @@ const StringListControl = ({
const { translate } = useLocalization()
return (
<input
<Input
unstyle
className={controlClass}
value={Array.isArray(value) ? value.join(', ') : leafToText(value)}
placeholder={spec.placeholder ? translate('::' + spec.placeholder) : undefined}
@ -200,7 +202,7 @@ const OptionField = ({ spec, value, onChange }: OptionFieldProps) => {
const renderControl = () => {
if (locked) {
return <input disabled readOnly className={controlClass} value={leafToText(value)} />
return <Input unstyle disabled readOnly className={controlClass} value={leafToText(value)} />
}
switch (spec.type) {
@ -214,7 +216,8 @@ const OptionField = ({ spec, value, onChange }: OptionFieldProps) => {
return <StringListControl spec={spec} value={value} onChange={onChange} />
case 'number':
return (
<input
<Input
unstyle
className={controlClass}
type="number"
value={typeof value === 'number' ? value : leafToText(value)}
@ -224,7 +227,8 @@ const OptionField = ({ spec, value, onChange }: OptionFieldProps) => {
)
case 'size':
return (
<input
<Input
unstyle
className={controlClass}
value={leafToText(value)}
placeholder={placeholder}
@ -233,7 +237,8 @@ const OptionField = ({ spec, value, onChange }: OptionFieldProps) => {
)
default:
return (
<input
<Input
unstyle
className={controlClass}
value={leafToText(value)}
placeholder={placeholder}

3
ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
View file

@ -203,7 +203,8 @@ const WizardFileManager = () => {
{translate('::App.ListForm.WizardImportButton')}
</span>
</Button>
<input
<Input
unstyle
ref={importInputRef}
type="file"
accept=".zip,application/zip"

4
ui/src/views/admin/listForm/wizard/WizardImportDialog.tsx
View file

@ -22,6 +22,7 @@ import {
} from '@/services/wizard.service'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useStoreState } from '@/store/store'
import Input from '@/components/ui/Input'
import {
WizardImportAnalysisDto,
WizardImportEntryDto,
@ -376,7 +377,8 @@ const WizardImportDialog = ({ file, onClose, onImported }: WizardImportDialogPro
</span>
{renderStatusBadge(entry)}
{!isConflict && (
<input
<Input
unstyle
type="checkbox"
className="shrink-0"
checked={!!decision?.apply}

3
ui/src/views/admin/listForm/wizard/WizardStepDataSettings.tsx
View file

@ -758,7 +758,8 @@ const WizardStepDataSettings = ({
key={col.columnName}
className="flex items-center gap-2 px-2 py-1.5 rounded mx-0.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 group"
>
<input
<Input
unstyle
type="checkbox"
checked={selectedColumns.has(col.columnName)}
onChange={() => onToggleColumn(col.columnName)}

34
ui/src/views/admin/listForm/wizard/WizardStepFields.tsx
View file

@ -35,6 +35,7 @@ import { UiLookupDataSourceTypeEnum } from '@/proxy/form/models'
import EditorOptionsBuilderDialog from '../edit/json-row-operations/EditorOptionsBuilderDialog'
import EditorScriptBuilderDialog from '../edit/json-row-operations/EditorScriptBuilderDialog'
import { buildLookupQuery } from '../lookupQuery'
import Input from '@/components/ui/Input'
// ─── Types ────────────────────────────────────────────────────────────────────
export interface WizardGroupItem {
@ -283,7 +284,8 @@ function SortableItem({
<span className="text-[10px] text-gray-400 font-medium">
{translate('::App.WizardStep3.LanguageKey')}
</span>
<input
<Input
unstyle
value={item.captionName}
disabled
onChange={(e) => onCaptionNameChange(e.target.value)}
@ -294,7 +296,8 @@ function SortableItem({
<span className="text-[10px] text-gray-400 font-medium">
{translate('::App.WizardStep3.TurkishCaption')}
</span>
<input
<Input
unstyle
value={item.turkishCaption}
onChange={(e) => onTurkishCaptionChange(e.target.value)}
className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
@ -304,7 +307,8 @@ function SortableItem({
<span className="text-[10px] text-gray-400 font-medium">
{translate('::App.WizardStep3.EnglishCaption')}
</span>
<input
<Input
unstyle
value={item.englishCaption}
onChange={(e) => onEnglishCaptionChange(e.target.value)}
className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
@ -354,7 +358,8 @@ function SortableItem({
<span className="text-[10px] text-gray-400 font-medium">
{translate('::App.WizardStep3.LookupValueExpression')}
</span>
<input
<Input
unstyle
value={item.valueExpr}
onChange={(e) => onValueExprChange(e.target.value)}
className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
@ -365,7 +370,8 @@ function SortableItem({
<span className="text-[10px] text-gray-400 font-medium">
{translate('::App.WizardStep3.LookupDisplayExpression')}
</span>
<input
<Input
unstyle
value={item.displayExpr}
onChange={(e) => onDisplayExprChange(e.target.value)}
className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
@ -441,7 +447,8 @@ function SortableItem({
{pickerStep === 'table' && (
<>
<div className="px-4 py-2 border-b border-gray-100 dark:border-gray-800">
<input
<Input
unstyle
autoFocus
value={tableSearch}
onChange={(e) => setTableSearch(e.target.value)}
@ -580,7 +587,8 @@ function SortableItem({
{translate('::App.ListFormFieldEdit.DetailsEditorOptions')}
</span>
<div className="flex items-center gap-1">
<input
<Input
unstyle
value={item.editorOptions}
onChange={(e) => onEditorOptionsChange(e.target.value)}
placeholder='{"readOnly": false}'
@ -604,7 +612,8 @@ function SortableItem({
{translate('::App.WizardStep3.EditorScript')}
</span>
<div className="flex items-center gap-1">
<input
<Input
unstyle
value={item.editorScript}
onChange={(e) => onEditorScriptChange(e.target.value)}
placeholder="(e) => { /* e.component */ }"
@ -658,7 +667,8 @@ function SortableItem({
className="flex items-center gap-1 cursor-pointer ml-auto"
title={translate('::App.WizardStep3.IncludeInEditingForm')}
>
<input
<Input
unstyle
type="checkbox"
checked={item.includeInEditingForm}
onChange={(e) => onIncludeInEditingFormChange(e.target.checked)}
@ -669,7 +679,8 @@ function SortableItem({
</span>
</label>
<label className="flex items-center gap-1 cursor-pointer ml-auto" title="Required">
<input
<Input
unstyle
type="checkbox"
checked={item.isRequired}
onChange={(e) => onRequiredChange(e.target.checked)}
@ -728,7 +739,8 @@ function GroupCard({
>
{/* Group Header */}
<div className="flex flex-wrap items-center gap-2 px-3 pt-3 pb-2">
<input
<Input
unstyle
type="text"
value={group.caption}
onChange={(e) => onCaptionChange(e.target.value)}

6
ui/src/views/admin/listForm/workflow/WorkflowCriteria.tsx
View file

@ -523,7 +523,8 @@ function SelectField({
onChange={(option: any) => onChange(option?.value ?? '')}
/>
{required && (
<input
<Input
unstyle
required
tabIndex={-1}
className="pointer-events-none h-0 w-0 opacity-0"
@ -565,7 +566,8 @@ function MultiSelectField({
}
/>
{required && (
<input
<Input
unstyle
required
tabIndex={-1}
className="pointer-events-none h-0 w-0 opacity-0"

4
ui/src/views/admin/videoroom/ChatPanel.tsx
View file

@ -8,6 +8,7 @@ import { useRef, useEffect, type FormEvent } from 'react'
import { FaTimes, FaUsers, FaUser, FaBullhorn, FaPaperPlane } from 'react-icons/fa'
import { Button } from '@/components/ui'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Input from '@/components/ui/Input'
interface ChatPanelProps {
user: { id: string; name: string; role: string }
@ -193,7 +194,8 @@ const ChatPanel = ({
{/* Mesaj Gönderme */}
<form onSubmit={onSendMessage} className="p-4 border-t border-gray-200">
<div className="flex space-x-2">
<input
<Input
unstyle
type="text"
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}

4
ui/src/views/admin/videoroom/DocumentsPanel.tsx
View file

@ -3,6 +3,7 @@ import { useRef, useState, type ChangeEvent, type DragEvent, type ReactNode } fr
import { FaTimes, FaFile, FaEye, FaDownload, FaTrash } from 'react-icons/fa'
import { Button } from '@/components/ui'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Input from '@/components/ui/Input'
interface DocumentsPanelProps {
user: { role: string; name: string }
@ -95,7 +96,8 @@ const DocumentsPanel = ({
>
{translate('::App.VideoRoom.SelectFile')}
</Button>
<input
<Input
unstyle
ref={fileInputRef}
type="file"
multiple

30
ui/src/views/admin/videoroom/RoomList.tsx
View file

@ -524,7 +524,8 @@ const RoomList = () => {
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{translate('::App.Listform.ListformField.RoomName')} *
</label>
<input
<Input
unstyle
type="text"
required
autoFocus={showCreateModal}
@ -553,7 +554,8 @@ const RoomList = () => {
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{translate('::App.Listform.ListformField.Subject')}
</label>
<input
<Input
unstyle
type="text"
value={videoroom.subject}
onChange={(e) => setVideoroom({ ...videoroom, subject: e.target.value })}
@ -566,7 +568,8 @@ const RoomList = () => {
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{translate('::App.Listform.ListformField.StartDateTime')} *
</label>
<input
<Input
unstyle
type="datetime-local"
required
value={
@ -591,7 +594,8 @@ const RoomList = () => {
{translate('::App.Listform.ListformField.Duration')} (
{translate('::App.Listform.ListformField.Minutes')})
</label>
<input
<Input
unstyle
type="number"
min="15"
max="480"
@ -610,7 +614,8 @@ const RoomList = () => {
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{translate('::App.Listform.ListformField.MaxParticipants')}
</label>
<input
<Input
unstyle
type="number"
min="1"
max="100"
@ -638,7 +643,8 @@ const RoomList = () => {
{translate('::App.VideoRoom.ParticipantPermissions')}
</h4>{' '}
<label className="flex items-center space-x-3">
<input
<Input
unstyle
type="checkbox"
checked={videoroom.settingsDto?.allowHandRaise}
onChange={(e) =>
@ -657,7 +663,8 @@ const RoomList = () => {
</span>
</label>
<label className="flex items-center space-x-3">
<input
<Input
unstyle
type="checkbox"
checked={videoroom.settingsDto?.allowStudentChat}
onChange={(e) =>
@ -676,7 +683,8 @@ const RoomList = () => {
</span>
</label>
<label className="flex items-center space-x-3">
<input
<Input
unstyle
type="checkbox"
checked={videoroom.settingsDto?.allowPrivateMessages}
onChange={(e) =>
@ -695,7 +703,8 @@ const RoomList = () => {
</span>
</label>
<label className="flex items-center space-x-3">
<input
<Input
unstyle
type="checkbox"
checked={videoroom.settingsDto?.allowStudentScreenShare}
onChange={(e) =>
@ -801,7 +810,8 @@ const RoomList = () => {
</div>
<label className="flex items-center space-x-3">
<input
<Input
unstyle
type="checkbox"
checked={videoroom.settingsDto?.autoMuteNewParticipants}
onChange={(e) =>

4
ui/src/views/ai/Assistant.tsx
View file

@ -11,6 +11,7 @@ import ConversationList from './components/ConversationList'
import MessageBubble from './components/MessageBubble'
import { useAiBots } from './hooks/useAiBots'
import { useConversations } from './hooks/useConversations'
import Input from '@/components/ui/Input'
const Assistant = () => {
const { translate } = useLocalization()
@ -228,7 +229,8 @@ const Assistant = () => {
<form className="w-full mx-auto px-4" onSubmit={handleSubmit}>
<div className="flex w-full items-center gap-2 rounded-2xl bg-[#2a2a2a] px-3 py-2 text-white shadow-md">
<input
<Input
unstyle
ref={inputRef}
autoFocus
value={input}

4
ui/src/views/developerKit/ComponentManager.tsx
View file

@ -24,6 +24,7 @@ import ComponentEditor from './ComponentEditor'
import { parseComponentDependencies } from '@/contexts/componentRuntime'
import { usePermission } from '@/utils/hooks/usePermission'
import { COMPONENT_PERMISSION } from '@/constants/permission.constant'
import Input from '@/components/ui/Input'
const ComponentManager: React.FC = () => {
const {
@ -131,7 +132,8 @@ const ComponentManager: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-3">
<div className="flex-1 relative">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
<input
<Input
unstyle
type="text"
placeholder={translate('::App.DeveloperKitComponent.SearchPlaceholder')}
value={searchTerm}

4
ui/src/views/developerKit/CrudEndpointDialog.tsx
View file

@ -25,6 +25,7 @@ import type { CrudEndpoint } from '@/proxy/developerKit/models'
import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { usePermission } from '@/utils/hooks/usePermission'
import Input from '@/components/ui/Input'
// ─── Paylasilan yardimcilar ───────────────────────────────────────────────────
// Endpoint'leri ureten/gosteren tum ekranlar (SqlQueryManager, SqlObjectExplorer,
@ -683,7 +684,8 @@ const CrudEndpointDialog = ({
>
{param.name}
</span>
<input
<Input
unstyle
type="text"
value={param.value}
aria-label={param.name}

16
ui/src/views/developerKit/DynamicServiceEditor.tsx
View file

@ -24,6 +24,7 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
import Button from '@/components/ui/Button'
import { Notification, toast } from '@/components/ui'
import { useConfig } from '@/components/ui/ConfigProvider'
import Input from '@/components/ui/Input'
const DEFAULT_TEMPLATE = `using System;
using System.Collections.Generic;
@ -435,7 +436,8 @@ const DynamicServiceEditor: React.FC = () => {
<label className={LABEL_CLASS} htmlFor="dse-service-name">
{translate('::App.DynamicServicesEditor.ServiceName')}
</label>
<input
<Input
unstyle
id="dse-service-name"
type="text"
value={serviceName}
@ -461,7 +463,8 @@ const DynamicServiceEditor: React.FC = () => {
<label className={LABEL_CLASS} htmlFor="dse-display-name">
{translate('::App.Platform.DisplayName')}
</label>
<input
<Input
unstyle
id="dse-display-name"
type="text"
value={displayName}
@ -478,7 +481,8 @@ const DynamicServiceEditor: React.FC = () => {
<label className={LABEL_CLASS} htmlFor="dse-description">
{translate('::App.Listform.ListformField.Description')}
</label>
<input
<Input
unstyle
id="dse-description"
type="text"
value={description}
@ -495,7 +499,8 @@ const DynamicServiceEditor: React.FC = () => {
<label className={LABEL_CLASS} htmlFor="dse-primary-entity">
{translate('::App.DynamicServicesEditor.PrimaryEntityType')}
</label>
<input
<Input
unstyle
id="dse-primary-entity"
type="text"
value={primaryEntityType}
@ -509,7 +514,8 @@ const DynamicServiceEditor: React.FC = () => {
{/* Aktif */}
<div className="flex items-center gap-2">
<input
<Input
unstyle
id="dse-is-active"
type="checkbox"
checked={isActive}

4
ui/src/views/developerKit/DynamicServiceManager.tsx
View file

@ -17,6 +17,7 @@ import { dynamicServiceService, type DynamicServiceDto } from '@/services/dynami
import PageTitle from '@/components/shared/PageTitle'
import { ROUTES_ENUM } from '@/routes/route.constant'
import Button from '@/components/ui/Button'
import Input from '@/components/ui/Input'
const DynamicServiceManager: React.FC = () => {
const { translate } = useLocalization()
@ -128,7 +129,8 @@ const DynamicServiceManager: React.FC = () => {
<div className="flex flex-col lg:flex-row lg:items-center gap-3">
<div className="flex-1 relative">
<FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<input
<Input
unstyle
type="text"
placeholder={translate('::App.DeveloperKitDynamicServices.SearchPlaceholder')}
value={searchTerm}

7
ui/src/views/developerKit/SqlObjectExplorer.tsx
View file

@ -28,6 +28,7 @@ import {
type CrudObjectType,
} from './CrudEndpointDialog'
import { developerKitService } from '@/services/developerKit.service'
import Input from '@/components/ui/Input'
type FolderKey = 'tables' | 'views' | 'procedures' | 'functions'
@ -508,7 +509,8 @@ const SqlObjectExplorer = ({
}}
>
{node.type === 'object' && (
<input
<Input
unstyle
type="checkbox"
className="h-4 w-4"
checked={isChecked}
@ -654,7 +656,8 @@ const SqlObjectExplorer = ({
{/* Search + refresh */}
<div className="p-2 border-b flex gap-2 flex-shrink-0">
<input
<Input
unstyle
type="text"
placeholder={translate('::App.Platform.Search')}
value={filterText}

10
ui/src/views/developerKit/SqlQueryManager.tsx
View file

@ -33,6 +33,7 @@ import CrudEndpointDialog, {
type CrudObjectType,
} from './CrudEndpointDialog'
import { usePermission } from '@/utils/hooks/usePermission'
import Input from '@/components/ui/Input'
const SqlResultsGrid = lazy(() => import('./SqlResultsGrid'))
const SqlTableDesignerDialog = lazy(() => import('./SqlTableDesignerDialog'))
@ -1010,7 +1011,8 @@ GO`,
{translate('::App.Platform.TargetDataSources')}
</div>
<label className="flex items-center gap-2 text-sm cursor-pointer mb-2">
<input
<Input
unstyle
type="checkbox"
checked={allTargetsSelected}
onChange={(e) => handleToggleSelectAllTargets(e.target.checked)}
@ -1020,7 +1022,8 @@ GO`,
<div className="max-h-44 overflow-auto border-t pt-2">
{availableTargetDataSourceCodes.map((code) => (
<label key={code} className="flex items-center gap-2 text-sm cursor-pointer">
<input
<Input
unstyle
type="checkbox"
checked={copyTargetDataSources.includes(code)}
onChange={(e) =>
@ -1400,7 +1403,8 @@ GO`,
<strong>{state.selectedDataSource}</strong>
</p>
<label className="flex items-center gap-2 text-sm cursor-pointer shrink-0">
<input
<Input
unstyle
type="checkbox"
checked={overwriteIfExists}
onChange={(e) => setOverwriteIfExists(e.target.checked)}

4
ui/src/views/developerKit/SqlResultsGrid.tsx
View file

@ -15,6 +15,7 @@ import { FaTimesCircle } from 'react-icons/fa'
import DateTimepicker from '@/components/ui/DatePicker/DateTimepicker'
import dayjs from 'dayjs'
import { sqlObjectManagerService } from '@/services/sql-query-manager.service'
import Input from '@/components/ui/Input'
type ResultColumn = { name: string; dataType?: string; isNullable?: boolean }
@ -467,7 +468,8 @@ const SqlResultsGrid = ({
/>
)
) : (
<input
<Input
unstyle
type={isNumberColumn(column) ? 'number' : 'text'}
value={typeof value === 'boolean' ? String(value) : value || ''}
required={required}

28
ui/src/views/developerKit/SqlTableDesignerDialog.tsx
View file

@ -40,6 +40,7 @@ import { MenuAddDialog } from '../shared/MenuAddDialog'
import { useStoreActions, useStoreState } from '@/store'
import { usePermission } from '@/utils/hooks/usePermission'
import { developerKitService } from '@/services/developerKit.service'
import Input from '@/components/ui/Input'
import {
CRUD_ENDPOINT_PERMISSION,
CRUD_OPERATION_TYPES,
@ -2372,7 +2373,8 @@ const SqlTableDesignerDialog = ({
className={`grid grid-cols-12 gap-2 bg-white dark:bg-gray-800 rounded items-center ${rowBg}`}
>
<div className="col-span-4">
<input
<Input
unstyle
type="text"
className={`w-full px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white ${
isDuplicate ? 'border-red-400' : ''
@ -2407,7 +2409,8 @@ const SqlTableDesignerDialog = ({
</select>
</div>
<div className="col-span-1">
<input
<Input
unstyle
type="number"
className="w-full px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-center"
placeholder="-"
@ -2423,7 +2426,8 @@ const SqlTableDesignerDialog = ({
/>
</div>
<div className="col-span-2">
<input
<Input
unstyle
type="text"
className="w-full px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder={translate('::Abp.Mailing.Default')}
@ -2553,7 +2557,8 @@ const SqlTableDesignerDialog = ({
<label className="block text-sm font-medium mb-1">
{translate('::App.SqlQueryManager.EntityName')} <span className="text-red-500">*</span>
</label>
<input
<Input
unstyle
type="text"
disabled={isEditMode} // Entity name (and thus table name) cannot be changed in edit mode
className="w-full px-3 py-2 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
@ -2568,7 +2573,8 @@ const SqlTableDesignerDialog = ({
<label className="block text-sm font-medium mb-1">
{translate('::App.Listform.ListformField.TableName')}
</label>
<input
<Input
unstyle
type="text"
readOnly
className="w-full px-3 py-2 text-sm border rounded bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 cursor-not-allowed"
@ -2880,7 +2886,8 @@ const SqlTableDesignerDialog = ({
{/* Options */}
<div className="flex items-center gap-6">
<label className="flex items-center gap-2 cursor-pointer">
<input
<Input
unstyle
type="checkbox"
checked={fkForm.isRequired}
onChange={(e) => setFkForm((f) => ({ ...f, isRequired: e.target.checked }))}
@ -3127,7 +3134,8 @@ const SqlTableDesignerDialog = ({
<label className="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
{translate('::App.SqlQueryManager.IndexConstraintName')}
</label>
<input
<Input
unstyle
type="text"
value={indexForm.indexName}
onChange={(e) => setIndexForm((f) => ({ ...f, indexName: e.target.value }))}
@ -3141,7 +3149,8 @@ const SqlTableDesignerDialog = ({
{/* Clustered */}
<div className="flex items-center gap-3">
<label className="flex items-center gap-2 cursor-pointer">
<input
<Input
unstyle
type="checkbox"
checked={indexForm.isClustered}
onChange={(e) =>
@ -3181,7 +3190,8 @@ const SqlTableDesignerDialog = ({
className="grid grid-cols-12 gap-2 px-3 py-1.5 items-center"
>
<div className="col-span-1">
<input
<Input
unstyle
type="checkbox"
checked={!!existing}
onChange={(e) => {

22
ui/src/views/developerKit/SqlViewDesignerDialog.tsx
View file

@ -26,6 +26,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
import DiagramPane, { type PendingLink } from './sqlViewDesigner/DiagramPane'
import CriteriaGrid from './sqlViewDesigner/CriteriaGrid'
import Input from '@/components/ui/Input'
import {
BOX_DEFAULT_ROWS,
createEmptySettings,
@ -600,7 +601,8 @@ const SqlViewDesignerDialog = ({
<span className="text-[11px] font-semibold text-gray-500">
{translate('::App.SqlViewDesigner.Schema')}
</span>
<input
<Input
unstyle
className={`${inputCls} w-[90px]`}
value={settings.schemaName}
onChange={(e) => setSettings((s) => ({ ...s, schemaName: e.target.value }))}
@ -608,7 +610,8 @@ const SqlViewDesignerDialog = ({
<span className="text-[11px] font-semibold text-gray-500">
{translate('::App.SqlViewDesigner.ViewName')} *
</span>
<input
<Input
unstyle
className={`${inputCls} w-[190px]`}
placeholder="Vw_OrderSummary"
value={settings.viewName}
@ -616,7 +619,8 @@ const SqlViewDesignerDialog = ({
onChange={(e) => setSettings((s) => ({ ...s, viewName: e.target.value }))}
/>
<label className="flex items-center gap-1 text-[11px]">
<input
<Input
unstyle
type="checkbox"
checked={settings.distinct}
onChange={(e) => setSettings((s) => ({ ...s, distinct: e.target.checked }))}
@ -636,7 +640,8 @@ const SqlViewDesignerDialog = ({
&#931; {translate('::App.SqlViewDesigner.GroupByColumn')}
</button>
<label className="flex items-center gap-1 text-[11px]">
<input
<Input
unstyle
type="checkbox"
checked={settings.topEnabled}
onChange={(e) => setSettings((s) => ({ ...s, topEnabled: e.target.checked }))}
@ -645,7 +650,8 @@ const SqlViewDesignerDialog = ({
</label>
{settings.topEnabled && (
<>
<input
<Input
unstyle
type="number"
min={1}
className={`${inputCls} w-[70px]`}
@ -654,7 +660,8 @@ const SqlViewDesignerDialog = ({
/>
{!isPostgreSql && (
<label className="flex items-center gap-1 text-[11px]">
<input
<Input
unstyle
type="checkbox"
checked={settings.topPercent}
onChange={(e) => setSettings((s) => ({ ...s, topPercent: e.target.checked }))}
@ -723,7 +730,8 @@ const SqlViewDesignerDialog = ({
<>
<div className="relative p-1">
<FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-[10px] text-gray-400" />
<input
<Input
unstyle
className="w-full rounded border py-1 pl-6 pr-1 text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder={translate('::App.SqlViewDesigner.SearchObjects')}
value={catalogSearch}

94
ui/src/views/developerKit/VisualComponentDesigner.tsx
View file

@ -118,6 +118,7 @@ import {
} from '@/components/visualDesigner/types'
import { IconPickerField } from '@/views/shared/MenuAddDialog'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Input from '@/components/ui/Input'
type WorkspaceTab = 'design' | 'data' | 'code' | 'javascript'
type InspectorTab = 'properties' | 'data' | 'tree'
@ -1095,7 +1096,8 @@ const ObjectListEditor = ({
<span className="mb-0.5 block text-[9px] font-medium uppercase tracking-wide text-slate-400">
{translate('::' + field.label)}
</span>
<input
<Input
unstyle
className={inputClass}
placeholder={
field.placeholder?.startsWith('App.')
@ -1149,7 +1151,8 @@ const PropertyEditor = ({
<span className="text-xs text-slate-600 dark:text-slate-300">
{value ? 'Enabled' : 'Disabled'}
</span>
<input
<Input
unstyle
checked={Boolean(value)}
className="h-4 w-4 accent-sky-600"
type="checkbox"
@ -1223,7 +1226,8 @@ const PropertyEditor = ({
onChange={(event) => onChange(event.target.value)}
/>
) : (
<input
<Input
unstyle
className={`${inputClass} font-mono`}
placeholder={translate('::App.DeveloperKitComponentDesigner.ClassPlaceholder')}
type="text"
@ -1261,7 +1265,8 @@ const PropertyEditor = ({
)
}
return (
<input
<Input
unstyle
className={inputClass}
placeholder={type === 'string' ? 'Metin veya ::LanguageKey' : undefined}
type={type === 'number' ? 'number' : name.toLowerCase().includes('color') ? 'color' : 'text'}
@ -3223,7 +3228,8 @@ const VisualComponentDesigner = () => {
<div className="flex flex-wrap items-center gap-2">
<div className="relative min-w-0 flex-1">
<FaSearch className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400" />
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white py-2 pl-7 pr-2.5 text-xs dark:border-slate-700 dark:bg-slate-900"
placeholder={translate('::App.DeveloperKitComponentDesigner.SearchEndpoint')}
type="search"
@ -3250,7 +3256,8 @@ const VisualComponentDesigner = () => {
))}
</div>
<label className="flex cursor-pointer items-center gap-1.5 text-[10px] font-semibold text-slate-500">
<input
<Input
unstyle
checked={endpointAttachedOnly}
className="h-3 w-3 accent-sky-600"
type="checkbox"
@ -3394,7 +3401,8 @@ const VisualComponentDesigner = () => {
{staticSelectOptions.map((option, index) => (
<div key={index} className="space-y-1">
<div className="grid grid-cols-[1fr_1fr_auto] gap-1">
<input
<Input
unstyle
aria-label={translate('::App.DeveloperKitComponentDesigner.OptionLabelAria', {
index: index + 1,
})}
@ -3409,7 +3417,8 @@ const VisualComponentDesigner = () => {
)
}
/>
<input
<Input
unstyle
aria-label={translate('::App.DeveloperKitComponentDesigner.OptionValueAria', {
index: index + 1,
})}
@ -3452,7 +3461,8 @@ const VisualComponentDesigner = () => {
/>
)}
{selectedNode?.type === 'Tabs' && (
<input
<Input
unstyle
className="w-full min-w-0 rounded border border-slate-300 bg-white px-2 py-1.5 text-[10px] dark:border-slate-700 dark:bg-slate-900"
placeholder={translate(
'::App.DeveloperKitComponentDesigner.TabContentPlaceholder',
@ -3730,7 +3740,8 @@ const VisualComponentDesigner = () => {
{/* The header text is independent of the lookup: a column can be
renamed without being resolved, and resolved without being
renamed. Left empty it keeps the field name. */}
<input
<Input
unstyle
className="mt-1.5 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-[10px] dark:border-slate-700 dark:bg-slate-900"
placeholder={translate(
'::App.DeveloperKitComponentDesigner.ColumnCaptionPlaceholder',
@ -3740,7 +3751,8 @@ const VisualComponentDesigner = () => {
onChange={(event) => writeColumnCaption(column, event.target.value)}
/>
<label className="mt-1.5 flex cursor-pointer items-center gap-2">
<input
<Input
unstyle
checked={Boolean(lookup)}
className="h-3 w-3 accent-sky-600"
type="checkbox"
@ -3860,7 +3872,8 @@ const VisualComponentDesigner = () => {
key={field.path}
className="flex cursor-pointer items-center gap-2 rounded bg-slate-50 px-2 py-1.5 dark:bg-slate-950"
>
<input
<Input
unstyle
checked={selectedGridColumns.includes(field.path)}
className="h-3 w-3 accent-sky-600"
type="checkbox"
@ -4045,7 +4058,8 @@ const VisualComponentDesigner = () => {
))}
</select>
) : (
<input
<Input
unstyle
className="min-w-0 flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] dark:border-slate-700 dark:bg-slate-900"
list={listId}
placeholder={translate('::App.DeveloperKitComponentDesigner.FilterColumn')}
@ -4102,7 +4116,8 @@ const VisualComponentDesigner = () => {
))}
</select>
{filter.source !== 'record' && (
<input
<Input
unstyle
className="min-w-0 flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] dark:border-slate-700 dark:bg-slate-900"
placeholder={translate(
filter.source === 'static'
@ -4138,7 +4153,8 @@ const VisualComponentDesigner = () => {
</option>
))}
</select>
<input
<Input
unstyle
className="min-w-0 flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] dark:border-slate-700 dark:bg-slate-900"
list={`${listId}-${filter.id}-master`}
placeholder={translate(
@ -4164,7 +4180,8 @@ const VisualComponentDesigner = () => {
</p>
)}
{!valueless && filter.source !== 'static' && (
<input
<Input
unstyle
className="w-full rounded border border-dashed border-slate-300 bg-white px-2 py-1 text-[10px] dark:border-slate-700 dark:bg-slate-900"
placeholder={translate(
'::App.DeveloperKitComponentDesigner.FilterPreviewValue',
@ -4176,7 +4193,8 @@ const VisualComponentDesigner = () => {
/>
)}
<label className="flex cursor-pointer items-center gap-1.5 text-[10px] text-slate-500">
<input
<Input
unstyle
checked={Boolean(filter.required)}
className="h-3 w-3 accent-sky-600"
type="checkbox"
@ -4286,7 +4304,8 @@ const VisualComponentDesigner = () => {
<span className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-slate-400">
Key field
</span>
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] dark:border-slate-700 dark:bg-slate-900"
placeholder="id"
value={String(selectedNode.props.keyFieldName ?? '')}
@ -4328,7 +4347,8 @@ const VisualComponentDesigner = () => {
</option>
))}
</select>
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] dark:border-slate-700 dark:bg-slate-900"
placeholder={translate('::App.DeveloperKitComponentDesigner.KeyParamPlaceholder', {
field: getSqlDataSourceKeyField(selectedNode),
@ -4346,7 +4366,8 @@ const VisualComponentDesigner = () => {
<p className="mb-2 text-[10px] leading-4 text-slate-500">
{translate('::App.DeveloperKitComponentDesigner.PreviewKeyValueHint')}
</p>
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] dark:border-slate-700 dark:bg-slate-900"
placeholder={translate(
'::App.DeveloperKitComponentDesigner.PreviewKeyValuePlaceholder',
@ -4364,7 +4385,8 @@ const VisualComponentDesigner = () => {
] as const
).map(([property, label, defaultChecked]) => (
<label key={property} className="flex cursor-pointer items-center gap-2 text-[10px]">
<input
<Input
unstyle
checked={
defaultChecked
? selectedNode.props[property] !== false
@ -4498,7 +4520,8 @@ const VisualComponentDesigner = () => {
<p className="mb-2 text-[10px] leading-4 text-slate-500">
{translate('::App.DeveloperKitComponentDesigner.RecordFieldHint')}
</p>
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] dark:border-slate-700 dark:bg-slate-900"
list={columnListId}
placeholder={translate('::App.DeveloperKitComponentDesigner.DoNotBindToRecord')}
@ -4542,7 +4565,8 @@ const VisualComponentDesigner = () => {
<option value="false">{translate('::App.Platform.No')}</option>
</select>
) : (
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900"
disabled={!column}
placeholder={translate('::App.DeveloperKitComponentDesigner.NoDefaultValue')}
@ -4740,7 +4764,8 @@ const VisualComponentDesigner = () => {
<div className="flex items-center gap-2">
{isTabularDataComponent(selectedNode?.type) && gridColumnFields.length > 0 && (
<label className="flex cursor-pointer items-center gap-1 text-[9px] font-semibold text-sky-600">
<input
<Input
unstyle
checked={allGridColumnsSelected}
className="h-3 w-3 accent-sky-600"
type="checkbox"
@ -4783,7 +4808,8 @@ const VisualComponentDesigner = () => {
>
{isTabularDataComponent(selectedNode?.type) &&
!['array', 'object'].includes(field.type) ? (
<input
<Input
unstyle
checked={selectedGridColumns.includes(field.path)}
className="mt-0.5 h-3 w-3 accent-sky-600"
type="checkbox"
@ -5141,7 +5167,8 @@ const VisualComponentDesigner = () => {
</div>
<label className="relative block">
<FaSearch className="absolute left-2.5 top-2.5 text-xs text-slate-400" />
<input
<Input
unstyle
className="w-full rounded-md border border-slate-200 bg-slate-50 py-2 pl-8 pr-2 text-xs outline-none focus:border-sky-400 dark:border-slate-700 dark:bg-slate-950"
placeholder={translate('::App.DeveloperKitComponentDesigner.SearchComponent')}
value={search}
@ -5662,7 +5689,8 @@ const VisualComponentDesigner = () => {
refs.{selectedNode.ref}
</button>
</span>
<input
<Input
unstyle
className="mt-1 w-full rounded border border-slate-300 bg-white px-2 py-1 font-mono text-[11px] text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
spellCheck={false}
value={refDraft}
@ -5854,7 +5882,8 @@ const VisualComponentDesigner = () => {
</button>
</div>
<div className="shrink-0 border-b border-slate-200 px-4 py-3 dark:border-slate-800">
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200"
placeholder={translate('::App.DeveloperKitComponentDesigner.SearchExample')}
value={scriptApiSearch}
@ -5981,7 +6010,8 @@ const VisualComponentDesigner = () => {
<span className="mb-1.5 block text-[10px] font-semibold uppercase text-slate-500">
Ad
</span>
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-xs text-slate-800 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
value={catalogSourceEditor.draft.name}
onChange={(event) => updateCatalogSourceDraft({ name: event.target.value })}
@ -6012,7 +6042,8 @@ const VisualComponentDesigner = () => {
<span className="mb-1.5 block text-[10px] font-semibold uppercase text-slate-500">
Endpoint URL
</span>
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-xs text-slate-800 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
placeholder="/api/app/customers"
value={catalogSourceEditor.draft.url}
@ -6026,7 +6057,8 @@ const VisualComponentDesigner = () => {
({translate('::App.PublicCommon.Optional')})
</span>
</span>
<input
<Input
unstyle
className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-xs text-slate-800 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
placeholder="result.items"
value={catalogSourceEditor.draft.responsePath}

22
ui/src/views/developerKit/sqlViewDesigner/CriteriaGrid.tsx
View file

@ -8,6 +8,7 @@
import { useState } from 'react'
import { FaCode, FaGripVertical, FaMagic, FaPlus, FaTrash } from 'react-icons/fa'
import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
import Input from '@/components/ui/Input'
import {
GROUP_MODES,
GROUP_MODE_LABEL,
@ -191,7 +192,8 @@ export function CriteriaGrid({
<td className="border border-gray-200 px-0.5 dark:border-gray-700">
{isExpression ? (
<input
<Input
unstyle
className={`${cellCls} font-mono text-[11px] text-indigo-700 dark:text-indigo-300`}
placeholder={labels.expressionPlaceholder}
value={row.expression ?? ''}
@ -215,7 +217,8 @@ export function CriteriaGrid({
</td>
<td className="border border-gray-200 px-0.5 dark:border-gray-700">
<input
<Input
unstyle
className={cellCls}
placeholder={row.columnName}
value={row.alias}
@ -244,7 +247,8 @@ export function CriteriaGrid({
</td>
<td className="border border-gray-200 text-center dark:border-gray-700">
<input
<Input
unstyle
type="checkbox"
className="h-3.5 w-3.5"
checked={row.output}
@ -297,7 +301,8 @@ export function CriteriaGrid({
</td>
<td className="border border-gray-200 px-0.5 dark:border-gray-700">
<input
<Input
unstyle
type="number"
min={0}
className={cellCls}
@ -315,7 +320,8 @@ export function CriteriaGrid({
className="relative border border-gray-200 px-0.5 dark:border-gray-700"
>
<div className="flex items-center gap-0.5">
<input
<Input
unstyle
className={cellCls}
placeholder={i === 0 ? "> 100 · = 'A' · IS NULL" : ''}
value={row.filters[i] ?? ''}
@ -425,14 +431,16 @@ function FilterBuilder({
</select>
{needsValue && (
<>
<input
<Input
unstyle
className="mb-1 w-full rounded border px-1 py-1 text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder={labels.builderValue}
value={value}
onChange={(e) => setValue(e.target.value)}
/>
{operator === 'BETWEEN' && (
<input
<Input
unstyle
className="mb-1 w-full rounded border px-1 py-1 text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder={labels.builderValue}
value={value2}

7
ui/src/views/developerKit/sqlViewDesigner/DiagramPane.tsx
View file

@ -24,6 +24,7 @@ import {
FaTimes,
} from 'react-icons/fa'
import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
import Input from '@/components/ui/Input'
import {
BOX_FOOTER_HEIGHT,
BOX_HEADER_HEIGHT,
@ -573,7 +574,8 @@ function TableBox({
{src.applyKind ? `${src.applyKind} APPLY` : 'SUB'}
</span>
)}
<input
<Input
unstyle
className="ml-auto w-[46px] shrink-0 rounded border border-gray-300 bg-white px-1 py-0 text-[10px] text-gray-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
value={src.alias}
disabled={lockAliases}
@ -650,7 +652,8 @@ function TableBox({
if (linkable) onCompleteLink({ sourceId: src.id, columnName: col.columnName })
}}
>
<input
<Input
unstyle
type="checkbox"
className="h-3 w-3 shrink-0"
checked={selected}

4
ui/src/views/form/editors/ImageUploadEditorComponent.tsx
View file

@ -9,6 +9,7 @@ import {
showImageHoverPreview,
} from './imageHoverPreview'
import { normalizeImageSize } from '../../list/shared/imageValue'
import Input from '@/components/ui/Input'
const ImageUploadEditorComponent = ({
value,
@ -153,7 +154,8 @@ const ImageUploadEditorComponent = ({
{!readOnly && (
<>
<input
<Input
unstyle
ref={inputRef}
type="file"
accept={resolvedOptions.accept ?? 'image/*'}

4
ui/src/views/forum/forum/SearchModal.tsx
View file

@ -5,6 +5,7 @@ import { useForumSearch } from '@/utils/hooks/useForumSearch'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Button from '@/components/ui/Button'
import { formatForumDate, sanitizeForumHtml } from './utils'
import Input from '@/components/ui/Input'
interface SearchModalProps {
isOpen: boolean
@ -118,7 +119,8 @@ export function SearchModal({
>
<div className="flex items-center border-b border-gray-200 p-4 dark:border-gray-700">
<FaSearch className="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
<input
<Input
unstyle
autoFocus
type="text"
value={searchQuery}

7
ui/src/views/intranet/SocialWall/CreatePost.tsx
View file

@ -9,6 +9,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import { useStoreState } from '@/store/store'
import { Avatar, Button } from '@/components/ui'
import { AVATAR_URL } from '@/constants/app.constant'
import Input from '@/components/ui/Input'
const MAX_POLL_OPTIONS = 6
const MIN_POLL_OPTIONS = 2
@ -270,7 +271,8 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
{translate('::App.Platform.Cancel')}
</Button>
</div>
<input
<Input
unstyle
type="text"
value={pollQuestion}
onChange={(e) => setPollQuestion(e.target.value)}
@ -283,7 +285,8 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
{pollOptions.map((option, index) => (
// Seçenekler stabil bir kimliğe sahip değil; sıra indeksi anahtar olarak kullanılıyor
<div key={index} className="flex gap-2">
<input
<Input
unstyle
type="text"
value={option}
onChange={(e) => updatePollOption(index, e.target.value)}

7
ui/src/views/intranet/SocialWall/MediaManager.tsx
View file

@ -5,6 +5,7 @@ import { FaTimes, FaLink, FaUpload } from 'react-icons/fa'
import classNames from 'classnames'
import { SocialMediaDto } from '@/proxy/intranet/models'
import Button from '@/components/ui/Button'
import Input from '@/components/ui/Input'
interface MediaManagerProps {
media: SocialMediaDto[]
@ -155,7 +156,8 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
{translate('::App.SocialWallMediaManager.ImageOrVideoFormats')}
</p>
</div>
<input
<Input
unstyle
type="file"
accept={acceptedFiles}
multiple
@ -193,7 +195,8 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
</div>
</div>
<div className="flex gap-2">
<input
<Input
unstyle
type="url"
value={urlInput}
onChange={(e) => setUrlInput(e.target.value)}

4
ui/src/views/intranet/SocialWall/PostItem.tsx
View file

@ -19,6 +19,7 @@ import { SocialPostDto } from '@/proxy/intranet/models'
import { useStoreState } from '@/store/store'
import { AVATAR_URL } from '@/constants/app.constant'
import { Avatar, Button } from '@/components/ui'
import Input from '@/components/ui/Input'
// Aktif dil `useLocale` tarafından global olarak ayarlanır; burada sabitlenmez.
dayjs.extend(relativeTime)
@ -379,7 +380,8 @@ const PostItem: React.FC<PostItemProps> = ({ post, onLike, onComment, onDelete,
{/* Comment Form */}
<form onSubmit={handleSubmitComment} className="mb-4">
<div className="flex gap-2">
<input
<Input
unstyle
type="text"
value={commentText}
onChange={(e) => setCommentText(e.target.value)}

10
ui/src/views/intranet/widgets/SurveyModal.tsx
View file

@ -3,6 +3,7 @@ import { Button, Dialog, Rate } from '@/components/ui'
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
import { SurveyAnswerDto, SurveyDto, SurveyQuestionDto } from '@/proxy/intranet/models'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Input from '@/components/ui/Input'
interface SurveyModalProps {
survey: SurveyDto
@ -123,7 +124,8 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
}`}
>
<input
<Input
unstyle
type="radio"
name={`question-${question.id}`}
value={option.text}
@ -157,7 +159,8 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
}`}
>
<input
<Input
unstyle
type="radio"
name={`question-${question.id}`}
value={value}
@ -183,7 +186,8 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
{questionNumber}. {question.questionText} {question.isRequired && '*'}
</label>
<input
<Input
unstyle
type="text"
value={answers[question.id] || ''}
onChange={(e) => handleAnswerChange(question.id, e.target.value)}

4
ui/src/views/list/Chart.tsx
View file

@ -29,6 +29,7 @@ import { useListFormCustomDataSource } from './useListFormCustomDataSource'
import { useListFormColumns } from './useListFormColumns'
import { GridColumnData } from './GridColumnData'
import Toolbar, { Item } from 'devextreme-react/toolbar'
import Input from '@/components/ui/Input'
interface ChartProps extends CommonProps, Meta {
id: string
@ -383,7 +384,8 @@ const Chart = (props: ChartProps) => {
render={() => (
<div className="relative flex items-center">
<FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm" />
<input
<Input
unstyle
type="text"
placeholder={translate('::App.Platform.Search2')}
value={searchText}

4
ui/src/views/list/GridExtraFilterToolbar.tsx
View file

@ -1,6 +1,7 @@
import React, { useState } from 'react'
import { GridExtraFilterState } from './Utils'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Input from '@/components/ui/Input'
export function GridExtraFilterToolbar({
filters,
@ -59,7 +60,8 @@ export function GridExtraFilterToolbar({
))}
</select>
) : (
<input
<Input
unstyle
type="text"
className="border rounded px-1 py-1"
value={inputValues[fs.fieldName] ?? current?.value ?? ''}

25
ui/src/views/list/TodoBoard.tsx
View file

@ -37,6 +37,7 @@ import { useListFormColumns } from './useListFormColumns'
import type { GridColumnData } from './GridColumnData'
import { flattenGridColumns } from './shared/columns'
import { useStoreState } from '@/store/store'
import Input from '@/components/ui/Input'
dayjs.extend(relativeTime)
@ -873,7 +874,8 @@ const TodoBoardContent = ({
{options.titleExpr && (
<div>
<label className={labelClass}>{translate('::App.Listform.ListformField.Title')}</label>
<input
<Input
unstyle
className={`${inputClass} text-lg font-semibold`}
disabled={!canUpdate}
value={String(draft[options.titleExpr] ?? '')}
@ -976,7 +978,8 @@ const TodoBoardContent = ({
{selectedTenantId && (
<div>
<label className={labelClass}>Tenant</label>
<input
<Input
unstyle
readOnly
className={`${inputClass} cursor-default`}
value={selectedTenantName ?? ''}
@ -987,7 +990,8 @@ const TodoBoardContent = ({
<label className={labelClass}>
{translate('::Abp.Mailing.Smtp.UserName')}
</label>
<input
<Input
unstyle
readOnly
className={`${inputClass} cursor-default`}
value={String(draft[userNameField] ?? '')}
@ -1018,7 +1022,8 @@ const TodoBoardContent = ({
{options.dueDateExpr && (
<div>
<label className={labelClass}>{translate('::App.ListFormTodoBoard.DueDate')}</label>
<input
<Input
unstyle
type="datetime-local"
className={inputClass}
disabled={!canUpdate}
@ -1069,7 +1074,8 @@ const TodoBoardContent = ({
)}
{options.completedExpr && (
<label className="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 text-sm font-medium dark:border-gray-700 dark:bg-gray-800">
<input
<Input
unstyle
type="checkbox"
className="h-4 w-4 accent-emerald-500"
disabled={!canUpdate}
@ -1189,7 +1195,8 @@ const TodoBoardContent = ({
renameStatus(status)
}}
>
<input
<Input
unstyle
autoFocus
className="min-w-0 flex-1 rounded-md border border-blue-400 bg-white px-2 py-1 text-sm font-semibold outline-none ring-2 ring-blue-500/20 dark:bg-gray-800"
value={statusName}
@ -1306,7 +1313,8 @@ const TodoBoardContent = ({
{isAdding && (
<div className="mt-3 rounded border border-blue-300 bg-white p-2 dark:border-blue-700 dark:bg-gray-800">
<div className="flex gap-1">
<input
<Input
unstyle
autoFocus
value={newTodoTitle}
className="min-w-0 flex-1 rounded border border-gray-300 bg-transparent px-2 py-1 text-sm outline-none focus:border-blue-500 dark:border-gray-600"
@ -1576,7 +1584,8 @@ const TodoBoardContent = ({
<label className="mb-2 block text-sm font-semibold" htmlFor="new-kanban-name">
{translate('::App.ListFormTodoBoard.NewColumnName')}
</label>
<input
<Input
unstyle
autoFocus
id="new-kanban-name"
className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800"

4
ui/src/views/list/editors/ImageUploadEditorComponent.tsx
View file

@ -9,6 +9,7 @@ import {
showImageHoverPreview,
} from '../../form/editors/imageHoverPreview'
import { normalizeImageSize, parseJsonObject } from '../shared/imageValue'
import Input from '@/components/ui/Input'
type ImageUploadOptions = {
accept?: string
@ -192,7 +193,8 @@ const ImageUploadEditorComponent = (cellElement: any): ReactElement => {
</div>
))}
<input
<Input
unstyle
ref={inputRef}
type="file"
accept={options.accept ?? 'image/*'}

7
ui/src/views/public/Blog.tsx
View file

@ -9,6 +9,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import { Button } from '@/components/ui'
import { translateLabel } from './designer'
import { PublicPageLoader } from './shared'
import Input from '@/components/ui/Input'
const PAGE_SIZE = 10
const PAGINATION_WINDOW = 2
@ -132,7 +133,8 @@ const Blog: React.FC = () => {
<div className="flex flex-col md:flex-row">
<form className="flex-1" onSubmit={handleSearch}>
<div className="relative">
<input
<Input
unstyle
type="search"
value={searchQuery}
placeholder={translateLabel(translate, 'App.PublicBlog.SearchPlaceholder')}
@ -274,7 +276,8 @@ const Blog: React.FC = () => {
{translate('::App.BlogSubscribe.SubscribeDesc')}
</p>
<div className="mx-auto flex max-w-md gap-4">
<input
<Input
unstyle
type="email"
placeholder={translate('::App.Listform.ListformField.Email')}
aria-label={translate('::App.Listform.ListformField.Email')}

19
ui/src/views/public/Demo.tsx
View file

@ -15,6 +15,7 @@ import { createDemoAsync } from '@/services/demo.service'
import { DemoDto } from '@/proxy/demo/models'
import { Button, Notification, toast } from '@/components/ui'
import { translateLabel } from './designer'
import Input from '@/components/ui/Input'
interface DemoModalProps {
isOpen: boolean
@ -241,7 +242,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
error={errors.organizationName}
icon={<FaBuilding className="h-5 w-5" />}
>
<input
<Input
unstyle
ref={firstFieldRef}
type="text"
name="organizationName"
@ -257,7 +259,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
error={errors.name}
icon={<FaUser className="h-5 w-5" />}
>
<input
<Input
unstyle
type="text"
name="name"
value={formData.name}
@ -273,7 +276,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
error={errors.email}
icon={<FaEnvelope className="h-5 w-5" />}
>
<input
<Input
unstyle
type="email"
name="email"
value={formData.email}
@ -288,7 +292,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
error={errors.phoneNumber}
icon={<FaPhone className="h-5 w-5" />}
>
<input
<Input
unstyle
type="tel"
name="phoneNumber"
value={formData.phoneNumber}
@ -320,7 +325,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
error={errors.numberOfBranches}
icon={<FaBuilding className="h-5 w-5" />}
>
<input
<Input
unstyle
type="number"
min={0}
name="numberOfBranches"
@ -336,7 +342,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
error={errors.numberOfUsers}
icon={<FaUsers className="h-5 w-5" />}
>
<input
<Input
unstyle
type="number"
min={0}
name="numberOfUsers"

3
ui/src/views/public/designer/DesignerDrawer.tsx
View file

@ -128,7 +128,8 @@ const FieldEditor: React.FC<{
case 'boolean':
return (
<label className="flex cursor-pointer items-center gap-2 text-sm text-slate-600 dark:text-gray-300">
<input
<Input
unstyle
type="checkbox"
checked={field.value === true || field.value === 'true'}
className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500 dark:border-gray-600"

30
ui/src/views/shared/MenuAddDialog.tsx
View file

@ -8,6 +8,7 @@ import { FaChevronDown, FaEdit, FaPlus } from 'react-icons/fa'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useConfig } from '@/components/ui/ConfigProvider'
import { useForm } from '@/components/ui/Form/context'
import Input from '@/components/ui/Input'
const menuService = new MenuService()
@ -98,7 +99,8 @@ export function IconPickerField({ value, onChange, invalid }: IconPickerFieldPro
{open && (
<div className="absolute z-50 mt-1 left-0 w-full min-w-[220px] max-w-[min(360px,calc(100vw-2rem))] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-xl">
<div className="p-2 border-b border-gray-100 dark:border-gray-700 flex items-center gap-2">
<input
<Input
unstyle
autoFocus
value={search}
onChange={(e) => setSearch(e.target.value)}
@ -336,7 +338,8 @@ export function MenuAddDialog({
<span className="text-red-500">*</span>
</label>
{/* Ad, kodu ve dil anahtarını türetir; düzenlemede kod sabit olduğu için kilitlidir. */}
<input
<Input
unstyle
autoFocus={!isEditMode}
disabled={isEditMode}
value={form.name}
@ -361,7 +364,8 @@ export function MenuAddDialog({
<label className={labelCls}>
{translate('::App.Platform.Code')} <span className="text-red-500">*</span>
</label>
<input
<Input
unstyle
value={form.code}
disabled
placeholder="App.Wizard.MyMenu"
@ -388,7 +392,8 @@ export function MenuAddDialog({
{translate('::App.Platform.DisplayNameEnglish')}{' '}
<span className="text-red-500">*</span>
</label>
<input
<Input
unstyle
value={form.menuTextEn}
onChange={(e) => setForm((p) => ({ ...p, menuTextEn: e.target.value }))}
placeholder="My Menu"
@ -400,7 +405,8 @@ export function MenuAddDialog({
{translate('::App.Platform.DisplayNameTurkish')}{' '}
<span className="text-red-500">*</span>
</label>
<input
<Input
unstyle
value={form.menuTextTr}
onChange={(e) => setForm((p) => ({ ...p, menuTextTr: e.target.value }))}
placeholder={translate('::App.Menu.NamePlaceholder')}
@ -427,12 +433,13 @@ export function MenuAddDialog({
))}
</select>
) : (
<input disabled value={form.parentCode} className={disabledCls} />
<Input unstyle disabled value={form.parentCode} className={disabledCls} />
)}
</div>
<div className="flex flex-col">
<label className={labelCls}>{translate('::App.Listform.ListformField.Order')}</label>
<input
<Input
unstyle
type="number"
value={form.order}
onChange={(e) => setForm((p) => ({ ...p, order: Number(e.target.value) }))}
@ -453,7 +460,8 @@ export function MenuAddDialog({
</span>
)}
</label>
<input
<Input
unstyle
value={form.shortName}
onChange={(e) => setForm((p) => ({ ...p, shortName: e.target.value }))}
placeholder="Sas, Finance, Hr…"
@ -469,7 +477,8 @@ export function MenuAddDialog({
<div className="grid grid-cols-2 gap-4">
<div className="flex flex-col">
<label className={labelCls}>{translate('::App.Platform.OpenUrl')}</label>
<input
<Input
unstyle
value={form.url}
onChange={(e) => setForm((p) => ({ ...p, url: e.target.value }))}
placeholder="/admin/list/App.Wizard.MyMenu"
@ -479,7 +488,8 @@ export function MenuAddDialog({
<div className="flex flex-col">
<label className={labelCls}>{translate('::App.Platform.Status')}</label>
<label className="flex h-9 cursor-pointer items-center gap-2">
<input
<Input
unstyle
type="checkbox"
checked={!form.isDisabled}
onChange={(e) => setForm((p) => ({ ...p, isDisabled: !e.target.checked }))}