Add ability to fliter input classes on each input component or globally on Sole.config.filterInputClass

Author: mythz

src/components/CheckboxInput.vue

@@ -7,7 +7,7 @@
           type="checkbox"
           :checked="modelValue"
           @input="$emit('update:modelValue', (($event as InputEvent).target as HTMLInputElement).checked)"
-          :class="['focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800',inputClass]"
+          :class="cls"
           v-bind="omit($attrs, ['class'])">
     </div>
     <div class="ml-3 text-sm">
@@ -29,6 +29,7 @@ import type { ApiState } from "../types"
 import type { CheckboxInputProps, CheckboxInputEmits } from '@/components/types'
 import { errorResponse, humanize, omit, toPascalCase } from "@servicestack/client"
 import { computed, inject } from "vue"
+import { filterClass } from "./css";
 
 const props = defineProps<CheckboxInputProps>()
 
@@ -38,4 +39,6 @@ const useLabel = computed(() => props.label ?? humanize(toPascalCase(props.id)))
 
 let ctx: ApiState|undefined = inject('ApiState', undefined)
 const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
+
+const cls = computed(() => filterClass(['focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800',props.inputClass], 'CheckboxInput', props.filterClass))
 </script>

src/components/FileInput.vue

@@ -63,6 +63,7 @@ import { computed, inject, onUnmounted, ref } from 'vue'
 import { errorResponse, humanize, lastLeftPart, lastRightPart, toPascalCase } from '@servicestack/client'
 import { useConfig } from '@/use/config'
 import { filePathUri, getMimeType, formatBytes, fileImageUri, flush } from '@/use/files'
+import { filterClass } from './css'
 
 const props = defineProps<FileInputProps>()
 
@@ -92,10 +93,10 @@ const usePlaceholder = computed(() => props.placeholder ?? useLabel.value)
 let ctx: ApiState|undefined = inject('ApiState', undefined)
 const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
 
-const cls = computed(() => ['block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800', errorField.value
+const cls = computed(() => filterClass(['block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800', errorField.value
     ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500'
     : 'text-slate-500 dark:text-slate-400'
-    , props.inputClass])
+    , props.inputClass], 'FileInput', props.filterClass))
 
 const onChange = (e:Event) => {
     let f = e.target as HTMLInputElement

src/components/MarkdownInput.vue

@@ -71,7 +71,7 @@
 <script setup lang="ts">
 import type { MarkdownInputProps, MarkdownInputEmits } from '@/components/types'
 import { computed, inject, nextTick, onMounted, ref, getCurrentInstance } from 'vue'
-import { input } from "./css"
+import { filterClass, input } from "./css"
 import { errorResponse, humanize, toPascalCase } from "@servicestack/client"
 import type { ApiState, MarkdownInputOptions, ResponseStatus } from '@/types'
 import { asOptions } from '@/use/utils'
@@ -96,9 +96,9 @@ const showOptions  = computed<{[k:string]:boolean}>(() => props.hide ? asOptions
 function show(target:MarkdownInputOptions) { return showOptions.value[target] }
 
 
-const cls = computed(() => ['shadow-sm font-mono' + input.base.replace('rounded-md',''), errorField.value 
+const cls = computed(() => filterClass(['shadow-sm font-mono' + input.base.replace('rounded-md',''), errorField.value 
   ? 'text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300'
-  : 'text-gray-900 ' + input.valid, props.inputClass])
+  : 'text-gray-900 ' + input.valid, props.inputClass], 'MarkdownInput', props.filterClass))
 const btnCls = "w-5 h-5 cursor-pointer select-none text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400"
   
 const txt = ref()

src/components/SelectInput.vue

@@ -1,8 +1,7 @@
 <template>
 <div :class="[$attrs.class]">
   <label v-if="useLabel" :for="id" :class="`block text-sm font-medium text-gray-700 dark:text-gray-300 ${labelClass??''}`">{{ useLabel }}</label>
-  <select :id="id" :name="id" :class="['mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none sm:text-sm rounded-md dark:text-white dark:bg-gray-900 dark:border-gray-600 disabled:bg-slate-50 dark:disabled:bg-slate-900 disabled:text-slate-500 disabled:border-slate-200 dark:disabled:border-slate-700 disabled:shadow-none',
-      !errorField ? 'shadow-sm border-gray-300 text-gray-900 focus:ring-indigo-500 focus:border-indigo-500' : 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500',inputClass]"
+  <select :id="id" :name="id" :class="cls"
       :value="modelValue"
       @input="$emit('update:modelValue', value($event.target))"
       :aria-invalid="errorField != null"
@@ -25,6 +24,7 @@ import type { ApiState } from "@/types"
 import type { SelectInputProps } from '@/components/types'
 import { computed, inject } from "vue"
 import { errorResponse, humanize, omit, toPascalCase } from "@servicestack/client"
+import { filterClass } from "./css";
 
 const value = (e:EventTarget|null) => (e as HTMLSelectElement).value //workaround IDE type-check error
 
@@ -40,4 +40,7 @@ const kvpValues = computed(() => props.entries || (props.values
     : props.options 
         ? Object.keys(props.options).map(key => ({ key, value:props.options[key] }))
         : []))
+
+const cls = computed(() => filterClass(['mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none sm:text-sm rounded-md dark:text-white dark:bg-gray-900 dark:border-gray-600 disabled:bg-slate-50 dark:disabled:bg-slate-900 disabled:text-slate-500 disabled:border-slate-200 dark:disabled:border-slate-700 disabled:shadow-none',
+      !errorField ? 'shadow-sm border-gray-300 text-gray-900 focus:ring-indigo-500 focus:border-indigo-500' : 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500',props.inputClass], 'SelectInput', props.filterClass))
 </script>

src/components/TagInput.vue

@@ -44,7 +44,7 @@
 
         <div v-if="errorField" class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
             <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
             </svg>
         </div>
     </div>
@@ -65,6 +65,7 @@ import type { ApiState } from "@/types"
 import type { TagInputProps, TagInputEmits } from '@/components/types'
 import { $1, errorResponse, humanize, map, omit, toPascalCase, trimEnd } from "@servicestack/client"
 import { computed, inject, ref } from "vue"
+import { filterClass } from "./css";
 
 const props = withDefaults(defineProps<TagInputProps>(), {
     modelValue: () => [],
@@ -104,10 +105,10 @@ const useLabel = computed(() => props.label ?? humanize(toPascalCase(props.id)))
 let ctx: ApiState|undefined = inject('ApiState', undefined)
 const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
 
-const cls = computed(() => ['w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none', errorField.value
+const cls = computed(() => filterClass(['w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none', errorField.value
     ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus-within:outline-none focus-within:ring-red-500 focus-within:border-red-500'
     : 'shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500'
-    , props.inputClass])
+    , props.inputClass], 'TagInput', props.filterClass))
 
 const removeTag = (tag:string) => updateValue(modelArray.value.filter(x => x != tag))
 

src/components/TextInput.vue

@@ -39,7 +39,7 @@ import type { ApiState } from "@/types"
 import type { TextInputProps, TextInputExpose } from '@/components/types'
 import { errorResponse, humanize, omit, toPascalCase } from "@servicestack/client"
 import { computed, inject, ref } from "vue"
-import { input } from './css'
+import { input, filterClass } from './css'
 import { textInputValue } from '@/use/utils'
 
 const value = (e:EventTarget|null) => (e as HTMLInputElement).value //workaround IDE type-check error
@@ -68,5 +68,5 @@ function fixShadow(cls:string) {
 let ctx: ApiState|undefined = inject('ApiState', undefined)
 const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
 
-const cls = computed(() => [input.base, errorField.value ? input.invalid : fixShadow(input.valid), props.inputClass])
+const cls = computed(() => filterClass([input.base, errorField.value ? input.invalid : fixShadow(input.valid), props.inputClass], 'TextInput', props.filterClass))
 </script>

src/components/TextareaInput.vue

@@ -28,7 +28,7 @@ import type { ApiState } from "@/types"
 import type { TextareaInputProps } from '@/components/types'
 import { errorResponse, humanize, omit, toPascalCase } from "@servicestack/client"
 import { computed, inject } from "vue"
-import { input } from "./css"
+import { input, filterClass } from "./css"
 
 const value = (e:EventTarget|null) => (e as HTMLInputElement).value //workaround IDE type-check error
 
@@ -40,7 +40,7 @@ const usePlaceholder = computed(() => props.placeholder ?? useLabel.value)
 let ctx: ApiState|undefined = inject('ApiState', undefined)
 const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
 
-const cls = computed(() => ['shadow-sm ' + input.base, errorField.value 
+const cls = computed(() => filterClass(['shadow-sm ' + input.base, errorField.value 
   ? 'text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300'
-  : 'text-gray-900 ' + input.valid, props.inputClass])
+  : 'text-gray-900 ' + input.valid, props.inputClass], 'TextareaInput', props.filterClass))
 </script>

src/components/css.ts

@@ -1,4 +1,5 @@
 import type { TableStyleOptions, FormStyle, TableStyle } from '@/types'
+import { Sole } from '@/use/config'
 
 function hasTableStyle(style:TableStyleOptions, target:TableStyle) {
     return Array.isArray(style)
@@ -100,3 +101,11 @@ export const grid = {
 export const dummy = {
     colspans: "col-span-3 sm:col-span-3"
 }
+
+export function filterClass(cls:(string|undefined)[], type:string, fn?:((cls:string) => string)) {
+  const joinCls = cls.filter(x => x).join(' ')
+  fn ??= (Sole.config.filterInputClass == null ? undefined : cls => Sole.config.filterInputClass!(cls, type))
+  return fn
+    ? fn(joinCls) 
+    : joinCls
+}

src/components/types.ts

@@ -14,6 +14,7 @@ export interface TextInputProps {
   id: string      
   type?: string
   inputClass?: string
+  filterClass?:(cls:string) => string
   label?: string
   labelClass?: string
   help?: string
@@ -28,6 +29,7 @@ export interface TextareaInputProps {
   status?: ResponseStatus|null
   id: string
   inputClass?: string
+  filterClass?:(cls:string) => string
   label?: string
   labelClass?: string
   help?: string
@@ -40,6 +42,7 @@ export interface SelectInputProps {
   id: string
   modelValue?: string
   inputClass?: string
+  filterClass?:(cls:string) => string
   label?: string
   labelClass?: string
   options?: any
@@ -74,6 +77,7 @@ export interface CheckboxInputProps {
   status?: ResponseStatus
   id: string
   inputClass?: string
+  filterClass?:(cls:string) => string
   label?: string
   labelClass?: string
   help?: string
@@ -85,6 +89,7 @@ export interface FileInputProps {
   status?: ResponseStatus|null
   id: string
   inputClass?: string
+  filterClass?:(cls:string) => string
   label?: string
   labelClass?: string
   help?: string
@@ -190,6 +195,7 @@ export interface TagInputProps {
   id: string
   type?: string
   inputClass?: string
+  filterClass?:(cls:string) => string
   label?: string
   labelClass?: string
   help?: string
@@ -570,6 +576,7 @@ export interface MarkdownInputProps {
   status?: ResponseStatus|null
   id: string
   inputClass?: string
+  filterClass?:(cls:string) => string
   label?: string
   labelClass?: string
   help?: string

src/types.ts

@@ -109,6 +109,7 @@ export interface UiConfig {
     apiResolver?:(name:string) => MetadataOperationType|null
     typeResolver?:(name:string,namespace?:string|null) => MetadataType|null
     inputValue?:(type:string,value:any) => string|null
+    filterInputClass?:(cls:string, type:string) => string,
     autoQueryGridDefaults?: AutoQueryGridDefaults
     storage?:Storage
     tableIcon?:ImageInfo