حقل إدخال Input

مكوّن حقل الإدخال، يدعم إدخال النصوص وكلمات المرور وعدّ الأحرف وغيرها.

الاستخدام الأساسي

القيمة الحالية:

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <!-- حقل إدخال أساسي -->
  <LhInput v-model="value" placeholder="أدخل المحتوى" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <!-- حقل إدخال أساسي -->
  <LhInput v-model="value" placeholder="أدخل المحتوى" />
</template>

أنواع مختلفة

vue

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
const password = ref('')
const clearable = ref('مُعبَّأ')
</script>

<template>
  <LhInput v-model="text" placeholder="إدخال نصّي" />
  <LhInput v-model="password" type="password" placeholder="إدخال كلمة المرور" show-password />
  <LhInput v-model="clearable" placeholder="إدخال قابل للمسح" clearable />
</template>

vue

<script>
export default {
  data() {
    return {
      text: '',
      password: '',
      clearable: 'مُعبَّأ',
    }
  },
}
</script>

<template>
  <LhInput v-model="text" placeholder="إدخال نصّي" />
  <LhInput v-model="password" type="password" placeholder="إدخال كلمة المرور" show-password />
  <LhInput v-model="clearable" placeholder="إدخال قابل للمسح" clearable />
</template>

حالة التعطيل

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" disabled placeholder="حقل إدخال معطَّل" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" disabled placeholder="حقل إدخال معطَّل" />
</template>

عدّ الأحرف

0/10

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="10 أحرف على الأكثر" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="10 أحرف على الأكثر" />
</template>

الفتحات

vue

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>وحدة</template>
  </LhInput>
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>وحدة</template>
  </LhInput>
</template>

سمة مخصَّصة

vue

<script setup lang="ts">
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <!-- تخصيص متغيّرات السمة عبر theme-vars -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="حقل إدخال بالخزف الأزرق" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

export default {
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <!-- تخصيص متغيّرات السمة عبر theme-vars -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="حقل إدخال بالخزف الأزرق" />
  </LhConfigProvider>
</template>

التخطيط السريع عبر sx

تُضبَط المسافات بسرعة عبر خاصية sx دون كتابة CSS إضافي.

vue

<script setup lang="ts">
</script>

<template>
  <!-- هامش علوي 2 -->
  <LhInput placeholder="هامش علوي 2" :sx="{ mt: 2 }" />
  <!-- هامش أفقي 1 وهامش سفلي 3 -->
  <LhInput placeholder="هامش أفقي 1 وهامش سفلي 3" :sx="{ mx: 1, mb: 3 }" />
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- هامش علوي 2 -->
  <LhInput placeholder="هامش علوي 2" :sx="{ mt: 2 }" />
  <!-- هامش أفقي 1 وهامش سفلي 3 -->
  <LhInput placeholder="هامش أفقي 1 وهامش سفلي 3" :sx="{ mx: 1, mb: 3 }" />
</template>

يعتمد sx شبكة أساسها 8px: mt: 2 → marginTop: 16px. للاطلاع على الخصائص كاملة راجع التخطيط السريع عبر sx.

التدويل

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhInput, LhButton } from '@lh-ui/vue3'
import ar from '@lh-ui/share/locales/lang/ar'
import enUS from '@lh-ui/share/locales/lang/en-US'

const locale = ref('ar')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <!-- حقن حزمة اللغة عبر ConfigProvider -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">تبديل اللغة</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput, LhButton } from '@lh-ui/vue3'
import ar from '@lh-ui/share/locales/lang/ar'
import enUS from '@lh-ui/share/locales/lang/en-US'

export default {
  components: { LhConfigProvider, LhInput, LhButton },
  data() {
    return { locale: 'ar' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <!-- حقن حزمة اللغة عبر ConfigProvider -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="toggleLocale">تبديل اللغة</LhButton>
  </LhConfigProvider>
</template>

الحجم والقراءة فقط

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="حقل إدخال للقراءة فقط" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="حقل إدخال للقراءة فقط" />
</template>

أيقونتان البادئة واللاحقة

تُضبَط أيقتا البادئة واللاحقة عبر prefix-icon / suffix-icon، وتأخذان اسم أيقونة من LhIcon المدمجة (مثل search وdate).

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="أيقونة بادئة" />
  <LhInput v-model="value" suffix-icon="date" placeholder="أيقونة لاحقة" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="أيقونة بادئة" />
  <LhInput v-model="value" suffix-icon="date" placeholder="أيقونة لاحقة" />
</template>

الخصائص الأصلية والارتفاع التلقائي

تُمرَّر الخصائص الأصلية مثل autocomplete وnative-type وautofocus وminlength إلى حقل الإدخال الداخلي؛ ويُستخدم autosize لجعل textarea يُعدِّل ارتفاعه تلقائيًا وفق المحتوى.

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="تركيز تلقائي" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="ارتفاع تلقائي" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="تركيز تلقائي" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="ارتفاع تلقائي" />
</template>

Input API

Props

اسم الخاصية	الوصف	النوع	الافتراضي
modelValue	القيمة المربوطة	`string`	—
type	نوع حقل الإدخال	`"number" \| "text" \| "textarea" \| "password" \| "email" \| "url" \| "tel" \| "date" \| "time"`	`'text'`
size	—	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	حالة التعطيل	`boolean`	`false`
readonly	حالة القراءة فقط	`boolean`	`false`
placeholder	النص النائب	`string`	—
maxlength	أقصى طول للإدخال	`number`	—
minlength	—	`number`	—
showWordLimit	هل يُعرض عدّ الأحرف	`boolean`	`false`
clearable	هل يمكن المسح	`boolean`	`false`
prefixIcon	اسم أيقونة البادئة (أيقونات LhIcon المدمجة)	`LhIconName`	—
suffixIcon	اسم أيقونة اللاحقة (أيقونات LhIcon المدمجة)	`LhIconName`	—
autofocus	—	`boolean`	`false`
autocomplete	—	`string`	—
nativeType	—	`string`	—
autosize	—	`boolean \| { minRows?: number; maxRows?: number; }`	`false`
resize	—	`"none" \| "both" \| "horizontal" \| "vertical"`	`'vertical'`
name	—	`string`	—
rows	—	`number`	—
tabindex	—	`string \| number`	—
form	—	`string`	—
inputStyle	—	`{ [x: string]: string; }`	—
label	—	`string`	—
themeVars	متغيّرات السمة على مستوى المكوّن، تتجاوز إعداد ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	نمط الخلفية على مستوى المكوّن، يتجاوز إعداد ConfigProvider	`string`	—
sx	خصائص التخطيط السريع sx	`LhSxProps`	—

Events

اسم الحدث	الوصف	وسائط الاستدعاء
update:modelValue	حدث تحديث القيمة	`(value: string)`
input	حدث الإدخال	`(value: string)`
change	حدث تغيّر القيمة	`(value: string)`
focus	حدث الحصول على التركيز	`(event: FocusEvent)`
blur	حدث فقدان التركيز	`(event: FocusEvent)`
clear	حدث المسح	—
keydown	حدث keydown الأصلي	`(event: KeyboardEvent)`

Slots

اسم الفتحة	الوصف
prefix	محتوى رأس حقل الإدخال
suffix	محتوى ذيل حقل الإدخال

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن للخارج (مستخرجة تلقائيًا من packages/components/input/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لتوسيع تعريفه الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhInputType

export type LhInputType = typeof LH_INPUT_TYPE_CONST[keyof typeof LH_INPUT_TYPE_CONST]

LhInputSize

/**
 * حجم Input
 */
export type LhInputSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhInputState

export type LhInputState = typeof LH_INPUT_STATE_CONST[keyof typeof LH_INPUT_STATE_CONST]

LhInputProps

/**
 * واجهة Input Props
 */
export interface LhInputProps {
  modelValue?: string
  type?: LhInputType
  size?: LhInputSize
  disabled?: boolean
  readonly?: boolean
  placeholder?: string
  maxlength?: number
  minlength?: number
  showWordLimit?: boolean
  clearable?: boolean
  /** اسم أيقونة البادئة (أيقونات LhIcon المدمجة، مثل `search`) */
  prefixIcon?: LhIconName
  /** اسم أيقونة اللاحقة (أيقونات LhIcon المدمجة، مثل `date`) */
  suffixIcon?: LhIconName
  autofocus?: boolean
  autocomplete?: string
  nativeType?: string
  autosize?: boolean | { minRows?: number; maxRows?: number }
  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
  name?: string
  rows?: number
  tabindex?: number | string
  form?: string
  inputStyle?: Record<string, string>
  label?: string
  /** متغيّرات السمة على مستوى المكوّن، تتجاوز إعداد ConfigProvider */
  themeVars?: Record<string, string>
  /** نمط الخلفية على مستوى المكوّن، يتجاوز إعداد ConfigProvider */
  bgPattern?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhIconName _{(مأخوذ من @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

حقل إدخال Input ​

الاستخدام الأساسي ​

أنواع مختلفة ​

حالة التعطيل ​

عدّ الأحرف ​

الفتحات ​

سمة مخصَّصة ​

التخطيط السريع عبر sx ​

التدويل ​

الحجم والقراءة فقط ​

أيقونتان البادئة واللاحقة ​

الخصائص الأصلية والارتفاع التلقائي ​

Input API ​

Props ​

Events ​

Slots ​

تعريفات الأنواع ​