Merge pull request #9 from mrleblanc101/main

Fix styles

Author: Muetze42

dist/css/field.css

@@ -1 +1,2 @@
+/* Nova Field CSS */
 

dist/js/field.js

@@ -21,6 +21,7 @@ class NovaExtension {
   webpackConfig(webpackConfig) {
     webpackConfig.externals = {
       vue: 'Vue',
+      'laravel-nova': 'LaravelNova',
     }
 
     webpackConfig.resolve.alias = {

nova-mix.js

@@ -2,7 +2,7 @@
     <DefaultField
         :field="currentField"
         :errors="errors"
-        :full-width-content="true"
+        :full-width-content="mode === 'modal'"
         :show-help-text="showHelpText"
     >
         <template #field>

resources/js/components/Form/KeyValueField.vue

@@ -3,7 +3,7 @@
         class="bg-gray-100 dark:bg-gray-800 rounded-t-lg flex border-b border-gray-300 dark:border-gray-700"
     >
         <div
-            class="bg-clip w-48 uppercase font-bold text-xs text-gray-500 tracking-wide px-3 py-3"
+            class="bg-clip w-48 uppercase font-bold text-xxs text-gray-500 tracking-wide px-3 py-2"
         >
             {{ valueLabel }}
         </div>

resources/js/components/ValuesHeader.vue

@@ -1,22 +1,22 @@
 <template>
     <div v-if="isNotObject" class="flex items-center key-value-item">
-        <div class="flex flex-grow border-b border-gray-300 dark:border-gray-700 key-value-fields"
-             :class="{ 'bg-gray-50': readOnlyKeys || !isEditable }"
+        <div class="flex flex-grow border-b border-gray-200 dark:border-gray-700 key-value-fields"
         >
                 <textarea
                     :dusk="`key-value-key-${index}`"
                     v-model="item.key"
                     @focus="handleKeyFieldFocus"
                     ref="keyField"
+                    rows="1"
                     type="text"
-                    class="font-mono text-sm resize-none block min-h-input w-full form-control form-input form-input-row py-4 text-90 dark:text-gray-400 bg-clip-border"
-                    :disabled="!isEditable || readOnlyKeys"
+                    class="font-mono text-xs block w-full px-3 py-3 text-90 dark:text-gray-400"
+                    :readonly="!isEditable || readOnlyKeys"
                     style="background-clip: border-box"
                     :class="{
-                    'bg-white dark:bg-gray-800': !isEditable || readOnlyKeys,
-                    'hover:bg-20 focus:bg-white dark:bg-gray-900 dark:focus:bg-gray-900':
-                      isEditable && !readOnlyKeys,
-                  }"
+                        'bg-white dark:bg-gray-800 focus:outline-none': !isEditable,
+                        'hover:bg-20 focus:bg-white dark:bg-gray-900 dark:focus:bg-gray-900 focus:outline-none focus:ring focus:ring-inset':
+                        isEditable,
+                    }"
                 />
         </div>