highlight drag container

packages/former/src/Playground.vue

@@ -90,12 +90,12 @@ import Button from './sample/Button.vue';
 import Checkbox from './sample/Checkbox.vue';
 import Select from './sample/Select.vue';
 
-const mode = useStorage<Mode>('former:mode', 'edit');
+const mode = useStorage<Mode>('former:mode', 'build');
 
 const options = [
+  { label: 'build', value: 'build' },
   { label: 'edit', value: 'edit' },
   { label: 'read', value: 'read' },
-  { label: 'build', value: 'build' },
 ];
 
 const isValid = ref(true);
@@ -263,7 +263,6 @@ const components: { [k: string]: FormFieldType } = {
           required: true,
         },
       },
-      showIfProp,
       {
         type: 'text',
         name: 'label',
@@ -280,6 +279,7 @@ const components: { [k: string]: FormFieldType } = {
           placeholder: 'Enter a placeholder',
         },
       },
+      showIfProp,
       {
         type: 'checkbox',
         name: 'required',
@@ -323,7 +323,6 @@ const components: { [k: string]: FormFieldType } = {
           placeholder: 'Enter the name of the data field',
         },
       },
-      showIfProp,
       {
         type: 'text',
         name: 'label',
@@ -332,6 +331,7 @@ const components: { [k: string]: FormFieldType } = {
           placeholder: 'Enter a label',
         },
       },
+      showIfProp,
     ],
   },
   select: {
@@ -346,7 +346,6 @@ const components: { [k: string]: FormFieldType } = {
           placeholder: 'Enter the name of the data field',
         },
       },
-      showIfProp,
       {
         type: 'text',
         name: 'label',
@@ -355,6 +354,7 @@ const components: { [k: string]: FormFieldType } = {
           placeholder: 'Enter a label',
         },
       },
+      showIfProp,
       {
         type: 'repeater',
         name: 'options',
@@ -396,7 +396,6 @@ const components: { [k: string]: FormFieldType } = {
           placeholder: 'Enter the name of the data field',
         },
       },
-      showIfProp,
       {
         type: 'text',
         name: 'label',
@@ -405,6 +404,7 @@ const components: { [k: string]: FormFieldType } = {
           placeholder: 'Enter a label',
         },
       },
+      showIfProp,
     ],
   },
 };

packages/former/src/components/FormDragContainer.vue

@@ -1,14 +1,21 @@
 <template>
-  <div class="relative flex flex-col gap-3" :class="{ 'former-drag-container min-h-24 w-full': mode === 'build' }" :data-parent-node="node?._id" :data-category="category">
+  <div
+    class="relative flex flex-col gap-3 before:content-[attr(data-drag-hint)] before:hidden before:m-auto before:text-center"
+    :class="{ 'former-drag-container min-h-24 w-full border-2 border-dashed rounded-md border-zinc-200 empty:before:block empty:bg-zinc-100': mode === 'build' }"
+    :data-parent-node="node?._id"
+    :data-category="category"
+    :data-drag-hint="texts.dragHint"
+  >
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
+import { inject } from '~/compositions/injectProvide';
 import type { InternalSchemaNode } from '~/types';
 
 defineProps<{ node?: InternalSchemaNode; category?: string }>();
 
 const mode = inject('mode');
+const texts = inject('texts');
 </script>

packages/former/src/components/Former.vue

@@ -8,7 +8,7 @@
 import { isEqual } from 'lodash';
 import { computed, ref, toRef, watch } from 'vue';
 import { provide } from '~/compositions/injectProvide';
-import type { FormData, FormFieldType, InternalSchemaNode, Mode, SchemaNode, ShowIfPredicate, Validator } from '~/types';
+import type { FormData, FormFieldType, InternalSchemaNode, Mode, SchemaNode, ShowIfPredicate, Texts, Validator } from '~/types';
 import { generateFormId, toInternalSchema, toSchema } from '~/utils';
 import FormContent from './FormContent.vue';
 
@@ -17,7 +17,8 @@ const props = withDefaults(defineProps<{
   showIf?: ShowIfPredicate;
   validator?: Validator;
   mode?: Mode;
-}>(), { mode: 'edit' });
+  texts?: Partial<Texts>;
+}>(), { mode: 'edit', texts: () => ({}) });
 
 const emit = defineEmits<{
   (e: 'valid', valid: boolean): void;
@@ -77,4 +78,7 @@ watch(
 
 const selectedNode = ref<InternalSchemaNode | undefined>(undefined);
 provide('selectedNode', selectedNode);
+
+const texts = toRef(props, 'texts');
+provide('texts', computed<Texts>(() => ({ dragHint: 'Here you can drag elements', ...texts.value })));
 </script>

packages/former/src/compositions/injectProvide.ts

@@ -1,5 +1,5 @@
 import { getCurrentInstance, type InjectionKey, type Ref, inject as vueInject, provide as vueProvide } from 'vue';
-import type { FormData, FormFieldType, InternalSchemaNode, Mode, ShowIfPredicate, Validator } from '~/types';
+import type { FormData, FormFieldType, InternalSchemaNode, Mode, ShowIfPredicate, Texts, Validator } from '~/types';
 
 export type InjectKeys = {
   mode: Ref<Mode>;
@@ -11,6 +11,7 @@ export type InjectKeys = {
   validityMap: Ref<Record<string, boolean | undefined>>;
   showIf?: ShowIfPredicate;
   validator: Validator;
+  texts: Ref<Texts>;
 };
 
 export function inject<T extends keyof InjectKeys>(key: T): InjectKeys[T];

packages/former/src/types.ts

@@ -34,3 +34,7 @@ export type FormFieldType = {
   propsSchema: SchemaNode[];
   component: FormFieldComponent | Raw<FormFieldComponent>;
 };
+
+export type Texts = {
+  dragHint: string;
+};