native modals

app/javascript/template_builder/font_modal.vue

@@ -1,13 +1,17 @@
 <template>
   <div
-    class="modal modal-open items-start !animate-none overflow-y-auto"
+    :class="{ 'modal modal-open items-start !animate-none overflow-y-auto': !inline }"
   >
     <div
+      v-if="!inline"
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
-      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
+      <div
+        v-if="!inline"
+        class="flex justify-between items-center border-b pb-2 mb-2 font-medium"
+      >
         <span class="modal-title">
           {{ t('font') }} - {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field) }}
         </span>
@@ -19,7 +23,7 @@
       </div>
       <div class="mt-4">
         <div>
-          <div class="flex items-center space-x-1.5">
+          <div class="flex flex-wrap items-center gap-1.5">
             <span>
               <div class="dropdown modal-field-font-dropdown">
                 <label
@@ -168,7 +172,7 @@
             :class="textClasses"
           >
             <span
-              contenteditable="true"
+              :contenteditable="!inline"
               class="outline-none whitespace-nowrap truncate"
             >
               {{ field.default_value || field.name || buildDefaultName(field) }}
@@ -215,6 +219,11 @@ export default {
     buildDefaultName: {
       type: Function,
       required: true
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ['close', 'save'],