more tailwindcss v4 fixes

Author: mythz

package.json

@@ -25,6 +25,7 @@
     "copy-diffusion": "shx cp  dist/servicestack-vue.m* ../../netcore/BlazorDiffusionVue/BlazorDiffusion/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../../netcore/BlazorDiffusionVue/BlazorDiffusion/wwwroot/lib/typings/@servicestack/vue/",
     "copy-creatorkit": "shx cp dist/servicestack-vue.m* ../../netcore/CreatorKit/CreatorKit/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../../netcore/CreatorKit/CreatorKit/wwwroot/lib/typings/@servicestack/vue/",
     "copy-aiserver": "shx cp dist/servicestack-vue.m* ../ai-server/AiServer/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../ai-server/AiServer/wwwroot/lib/typings/@servicestack/vue/",
+    "copy-blazor-vue": "shx mkdir -p ../../NetCoreTemplates/blazor-vue/MyApp/wwwroot/js/ && shx cp dist/servicestack-vue.m* ../../NetCoreTemplates/blazor-vue/MyApp/wwwroot/js/ && shx cp dist/servicestack-vue.m* ../../NetCoreTemplates/blazor-vue/MyApp/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../../NetCoreTemplates/blazor-vue/MyApp/wwwroot/lib/typings/@servicestack/vue/",
     "preview": "vite preview",
     "build-only": "vite build -l error",
     "type-check": "vue-tsc --noEmit",

src/components/CloseButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="absolute top-0 right-0 pt-4 pr-4">
-    <button type="button" @click="$emit('close')"
-            :class="[buttonClass,'rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black']">
+    <button type="button" @click="$emit('close')" :title="title"
+            :class="[buttonClass,'cursor-pointer rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black']">
       <span class="sr-only">Close</span>
       <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            aria-hidden="true">
@@ -14,8 +14,10 @@
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
   buttonClass?: string
+  title?: string
 }>(), {
-  buttonClass: 'bg-white dark:bg-black'
+  buttonClass: 'bg-white dark:bg-black',
+  title:'Close',
 })
 const emit = defineEmits<{
   (e:'close'): void

src/components/LookupInput.vue

@@ -142,7 +142,7 @@ onMounted(async () => {
         : mapGet(model, refInfo.selfId)
 
     const isRefType = isComplexType(refIdValue)
-    console.log('refIdValue', refIdValue, isComplexType(refIdValue), model, refInfo)
+    // console.log('refIdValue', refIdValue, isComplexType(refIdValue), model, refInfo)
     if (isRefType) {
         refIdValue = mapGet(model, refInfo.refId)
     }

src/components/ModalDialog.vue

@@ -10,7 +10,7 @@
                 <div>
                     <slot v-if="slots.closebutton" name="createform"></slot>
                     <div v-else class="hidden sm:block absolute top-0 right-0 pt-4 pr-4 z-10">
-                        <button type="button" @click="close":class="closeButtonClass">
+                        <button type="button" @click="close":class="closeButtonClass" title="Close">
                             <span class="sr-only">Close</span>
                             <!-- Heroicon name: outline/x -->
                             <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<{
     id: 'ModalDialog',
     modalClass: css.modal.modalClass,
     sizeClass: css.modal.sizeClass,
-    closeButtonClass: "bg-white dark:bg-black rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black",
+    closeButtonClass: "bg-white dark:bg-black cursor-pointer rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black",
 })
 
 const emit = defineEmits<{

src/components/SelectInput.vue

@@ -1,7 +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 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none',
+  <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]"
       :value="modelValue"
       @input="$emit('update:modelValue', value($event.target))"

src/components/css.ts

@@ -16,7 +16,7 @@ export const a = {
     indigo: 'text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200',
 }
 export const input = {
-    base:    'block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none',
+    base:    'block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 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',
     invalid: 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500',
     valid:   'shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600',
 }