wip

Author: brc-dd

docs/components/control.md

@@ -299,7 +299,7 @@ A helper component that creates `<SInputText>` component with a magnifying glass
 ```ts
 interface Props {
   placeholder?: string
-  unitAfter?: any
+  unitAfter?: Component | string
   textColor?: TextColor | ((value: string | null) => TextColor)
   align?: Align
   disabled?: boolean

eslint.config.js

@@ -12,6 +12,7 @@ export default defineConfig([
     rules: {
       'antfu/consistent-list-newline': 'off',
       'vue/no-template-shadow': 'off',
+      'vue/no-unused-properties': 'warn',
       'no-console': 'warn',
       'no-new-wrappers': 'off', // unicorn/new-for-builtins already handles this
       'unused-imports/no-unused-imports': 'warn',

lib/components/SControlInputSearch.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import IconMagnifyingGlass from '~icons/ph/magnifying-glass-bold'
-import { computed } from 'vue'
+import { type Component, computed } from 'vue'
 import { useControlSize } from '../composables/Control'
 import { useTrans } from '../composables/Lang'
 import { type Validatable } from '../composables/Validation'
 import SInputText, { type Align, type TextColor } from './SInputText.vue'
 
 const props = defineProps<{
   placeholder?: string
-  unitAfter?: any
+  unitAfter?: Component | string
   textColor?: TextColor | ((value: string | null) => TextColor)
   align?: Align
   disabled?: boolean
@@ -52,7 +52,12 @@ const _value = computed(() => {
       type="search"
       :placeholder="placeholder ?? t.placeholder"
       :unit-before="IconMagnifyingGlass"
+      :unit-after
+      :text-color
+      :align
+      :disabled
       :model-value="_value"
+      :display-value
       :validation
       hide-error
       @update:model-value="$emit('update:model-value', $event)"

lib/components/SInputAddon.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<{
   clickable?: boolean
   dropdown?: DropdownSection[]
   dropdownCaret?: boolean
-  dropdowpPosition?: 'top' | 'bottom'
+  dropdownPosition?: 'top' | 'bottom'
   disabled?: boolean
 }>(), {
   clickable: true,
@@ -41,7 +41,10 @@ const selectedOptionLabel = computed(() => {
 })
 
 const { isOpen, open } = useFlyout(container)
-const { position, update: updatePosition } = useManualDropdownPosition(container)
+const { position, update: updatePosition } = useManualDropdownPosition(
+  container,
+  () => props.dropdownPosition
+)
 
 function onFocus() {
   if (!props.disabled) {

lib/components/SInputCheckbox.vue

@@ -70,6 +70,7 @@ function onClick() {
     :check-text
     :check-color
     :validation
+    :hide-error
   >
     <div class="container">
       <div

lib/components/SInputCheckboxes.vue

@@ -79,6 +79,8 @@ function onChange(value: Value): void {
     :check-icon
     :check-text
     :check-color
+    :validation
+    :hide-error
   >
     <div class="container">
       <div class="row">

lib/components/SInputNumber.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { type Component, computed } from 'vue'
 import { type Props as BaseProps } from './SInputBase.vue'
 import SInputText from './SInputText.vue'
 
 export interface Props extends BaseProps {
   placeholder?: string
-  unitBefore?: any
-  unitAfter?: any
+  unitBefore?: Component | string
+  unitAfter?: Component | string
   textColor?: TextColor | ((value: number | null) => TextColor)
   separator?: boolean
   align?: Align

lib/components/SInputRadio.vue

@@ -45,6 +45,7 @@ function onClick() {
     class="SInputRadio"
     :class="classes"
     :size
+    :name
     :label
     :note
     :info

lib/components/SInputRadios.vue

@@ -88,6 +88,7 @@ function onChange(value: ValueType) {
     class="SInputRadios"
     :class="[size ?? 'small']"
     :size
+    :name
     :label
     :note
     :info

lib/components/SInputSegments.vue

@@ -58,6 +58,7 @@ function onSelect(value: T) {
     class="SInputSegments"
     :class="[size ?? 'small', { block }]"
     :size
+    :name
     :label
     :note
     :info
@@ -74,7 +75,6 @@ function onSelect(value: T) {
         :key="i"
         :size="size ?? 'small'"
         :label="option.label"
-        :value="option.value"
         :mode="option.mode ?? 'default'"
         :active="_value === option.value"
         :disabled="disabled ? true : (option.disabled ?? false)"