vue-wswg-editor 0.0.1

package/src/components/BlockEditorFieldNode/BlockEditorFieldNode.vue

@@ -0,0 +1,378 @@
+<template>
+   <!-- Field -->
+   <div class="editor-field-node" :class="{ 'border-red-500': validationErrorMessage }">
+      <div class="mb-1 flex items-center gap-1.5">
+         <!-- Label -->
+         <label class="mr-auto text-sm font-medium first-letter:uppercase">
+            {{ fieldConfig.label || fieldName }}
+            <span v-if="fieldConfig.required" class="prop-required ml-1 text-red-600">*</span>
+         </label>
+         <!-- Clearable -->
+         <div
+            v-if="canClearFieldValue"
+            class="cursor-pointer rounded-full bg-zinc-100 px-2 py-0.5 text-xs text-zinc-600 hover:bg-zinc-200 hover:text-zinc-600"
+            @click="clearFieldValue"
+         >
+            <span>Clear</span>
+         </div>
+         <!-- Description -->
+         <div v-if="fieldConfig.description" :title="fieldConfig.description" class="cursor-default">
+            <InformationCircleIcon class="size-4 text-zinc-500" />
+         </div>
+      </div>
+
+      <!-- Custom field component-->
+      <template v-if="fieldConfig.component">
+         <component :is="fieldConfig.component" v-model="fieldValue" :editable="editable" v-bind="fieldConfig" />
+      </template>
+
+      <!-- Generic input (text, number, email, url) -->
+      <template v-else-if="['text', 'number', 'email', 'url'].includes(fieldConfig.type)">
+         <input v-model="textFieldValue" class="form-control mb-1" :disabled="!editable" v-bind="fieldConfig" />
+      </template>
+
+      <!-- Text area -->
+      <template v-else-if="fieldConfig.type === 'textarea'">
+         <textarea v-model="textFieldValue" class="form-control" :disabled="!editable" v-bind="fieldConfig"></textarea>
+      </template>
+
+      <!-- Select -->
+      <template v-else-if="fieldConfig.type === 'select'">
+         <select
+            v-model="textFieldValue"
+            class="form-control"
+            :placeholder="fieldConfig.placeholder"
+            :disabled="!editable"
+         >
+            <option v-for="option in fieldConfig.options" :key="option.value" :value="option.value">
+               {{ option.label }}
+            </option>
+         </select>
+      </template>
+
+      <!-- Color picker -->
+      <div v-else-if="fieldConfig.type === 'color'" class="flex gap-2">
+         <input v-model="fieldValue" type="color" class="form-control size-10 shrink-0" :disabled="!editable" />
+         <input v-model="fieldValue" type="text" class="form-control" :disabled="!editable" />
+      </div>
+
+      <!-- Range input -->
+      <div v-else-if="fieldConfig.type === 'range'" class="flex items-center gap-2">
+         <span class="rounded-full bg-zinc-100 px-2 py-1 text-sm font-bold text-zinc-600">{{ fieldValue }}</span>
+         <input
+            v-model="fieldValue"
+            type="range"
+            class="form-control"
+            :min="fieldConfig.min || 0"
+            :max="fieldConfig.max || 100"
+            :step="fieldConfig.step || 1"
+            :disabled="!editable"
+         />
+      </div>
+
+      <!-- Checkbox -->
+      <div v-else-if="fieldConfig.type === 'checkbox'" class="form-control flex flex-col gap-2">
+         <label
+            v-for="option in fieldConfig.options"
+            :key="`${fieldName}_${option.value}`"
+            class="flex cursor-pointer items-center gap-2 rounded-md border p-2"
+         >
+            <input
+               :id="`${fieldName}_${option.value}`"
+               v-model="checkboxValues"
+               :value="option.value"
+               type="checkbox"
+               class="form-control"
+               :disabled="!editable"
+            />
+            <span class="text-sm">{{ option.label }}</span>
+         </label>
+      </div>
+
+      <!-- Radio -->
+      <div v-else-if="fieldConfig.type === 'radio'" class="form-control flex flex-col gap-2">
+         <label
+            v-for="option in fieldConfig.options"
+            :key="`${fieldName}_${option.value}`"
+            class="flex cursor-pointer items-center gap-2 rounded-md border p-2"
+         >
+            <input
+               :id="`${fieldName}_${option.value}`"
+               v-model="fieldValue"
+               :value="option.value"
+               type="radio"
+               class="form-control"
+               :disabled="!editable"
+            />
+            <span class="text-sm">{{ option.label }}</span>
+         </label>
+      </div>
+
+      <!-- Boolean toggle -->
+      <template v-else-if="fieldConfig.type === 'boolean'">
+         <label
+            tabindex="0"
+            class="group inline-flex h-7 w-14 cursor-pointer items-center gap-2 rounded-full p-1 transition-all duration-200"
+            :class="!!fieldValue ? 'bg-emerald-700 hover:bg-emerald-800' : 'bg-zinc-200 hover:bg-zinc-300'"
+         >
+            <input
+               :id="fieldName"
+               v-model="fieldValue"
+               tabindex="-1"
+               type="checkbox"
+               class="ml-0 size-5 cursor-pointer rounded-full !border-none !bg-white !outline-none !ring-0 !ring-offset-0 transition-all duration-200 checked:ml-7"
+               :disabled="!editable"
+            />
+            <span class="hidden text-sm">{{ fieldConfig.label }}</span>
+         </label>
+      </template>
+
+      <!-- Repeater Input -->
+      <div v-else-if="fieldConfig.type === 'repeater'">
+         <BlockRepeaterNode
+            v-model="fieldValue"
+            :fieldConfig="fieldConfig"
+            :fieldName="fieldName"
+            :editable="editable"
+         />
+      </div>
+
+      <!-- Margin -->
+      <div v-else-if="fieldConfig.type === 'margin'">
+         <BlockMarginNode v-model="fieldValue" :fieldConfig="fieldConfig" :fieldName="fieldName" :editable="editable" />
+      </div>
+
+      <!-- Default fallback -->
+      <template v-else>
+         <input v-model="textFieldValue" type="text" class="form-control" :disabled="!editable" />
+      </template>
+
+      <!-- Validation error message -->
+      <div v-if="validationErrorMessage" class="rounded-sm bg-red-50 p-2 px-3 text-xs text-red-600">
+         {{ validationErrorMessage }}
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import type { EditorFieldConfig } from "../../util/fieldConfig";
+import BlockRepeaterNode from "../BlockRepeaterFieldNode/BlockRepeaterNode.vue";
+import BlockMarginNode from "../BlockMarginFieldNode/BlockMarginNode.vue";
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
+import * as yup from "yup";
+
+const fieldValue = defineModel<any>();
+
+const props = defineProps<{
+   fieldConfig: EditorFieldConfig;
+   fieldName: string;
+   editable: boolean;
+}>();
+
+const validationErrorMessage = ref<string | null>(null);
+
+// Computed property for checkbox values (array of selected values)
+const checkboxValues = computed({
+   get: () => {
+      // Ensure fieldValue is always an array for checkboxes
+      if (!Array.isArray(fieldValue.value)) {
+         // If it's a single value, convert to array
+         if (fieldValue.value !== null && fieldValue.value !== undefined) {
+            return [fieldValue.value];
+         }
+         // If it's null/undefined, return empty array
+         return [];
+      }
+      return fieldValue.value;
+   },
+   set: (newValues: any[]) => {
+      // Update fieldValue with the array of selected values
+      fieldValue.value = newValues.length > 0 ? newValues : [];
+   },
+});
+
+// Computed property to handle object/array conversion for text inputs
+const textFieldValue = computed({
+   get: () => {
+      if (typeof fieldValue.value === "string") {
+         return fieldValue.value;
+      }
+      if (typeof fieldValue.value === "number" || typeof fieldValue.value === "boolean") {
+         return String(fieldValue.value);
+      }
+      if (fieldValue.value === null || fieldValue.value === undefined) {
+         return "";
+      }
+      // For objects/arrays, convert to JSON string for editing
+      if (typeof fieldValue.value === "object") {
+         return JSON.stringify(fieldValue.value, null, 2);
+      }
+      return String(fieldValue.value);
+   },
+   set: (newValue: string) => {
+      // Try to parse as JSON if it looks like JSON, otherwise keep as string
+      if (
+         newValue &&
+         ((typeof newValue === "string" && (newValue.trim().startsWith("{") || newValue.trim().startsWith("["))) ||
+            (typeof newValue === "object" && Object.keys(newValue).length > 0))
+      ) {
+         try {
+            fieldValue.value = JSON.parse(newValue);
+         } catch {
+            fieldValue.value = newValue;
+         }
+      } else {
+         fieldValue.value = newValue;
+      }
+   },
+});
+
+const canClearFieldValue = computed(() => {
+   if (!props.fieldConfig.clearable) return false;
+   if (props.fieldConfig.type === "checkbox" || props.fieldConfig.type === "radio") {
+      return checkboxValues.value.length > 0;
+   }
+   return fieldValue.value !== undefined;
+});
+/**
+ * Validation
+ * Rules are defined in the fields.ts file
+ * -----------------------------------------
+ * Supported validation rules:
+ * maxLength // For text fields
+ * minLength // For text fields
+ * max // For number fields
+ * min // For number fields
+ * minItems // For repeater fields
+ * maxItems // For repeater fields
+ * required // For all fields
+ */
+
+async function validateField(): Promise<void> {
+   if (!props.fieldConfig.validator) return;
+   try {
+      const result = await props.fieldConfig.validator(fieldValue.value);
+      // True = valid, false = invalid, string = error message
+      if (result === true) {
+         validationErrorMessage.value = null;
+      } else {
+         // result is either false or a string error message
+         // TODO: i18n
+         validationErrorMessage.value = result === false ? "Field is invalid" : result;
+      }
+   } catch (error) {
+      const validationErrorsList = error as yup.ValidationError;
+      validationErrorMessage.value = validationErrorsList.errors[0] || "Field is invalid";
+   }
+}
+
+function clearFieldValue(): void {
+   fieldValue.value = null;
+   validationErrorMessage.value = null;
+   //    validateField();
+}
+
+// Watch the field value and validate it
+watch(
+   fieldValue,
+   async () => {
+      if (!props.editable) return;
+      await validateField();
+   },
+   {
+      immediate: true,
+   }
+);
+</script>
+
+<style scoped lang="scss">
+.editor-field-node {
+   :deep(.form-control) {
+      // Text based inputs
+      &:is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
+         width: 100%;
+         padding: 8px;
+         font-size: 14px;
+         color: #333;
+         outline: none;
+         background-color: #fff;
+         border: 1px solid #e0e0e0;
+         border-radius: 5px;
+         box-shadow: none;
+         transition: border-color 0.2s;
+      }
+
+      // checkbox input
+      label {
+         input[type="checkbox"],
+         input[type="radio"] {
+            width: 16px;
+            height: 16px;
+            padding: 8px;
+            font-size: 14px;
+            appearance: none;
+            cursor: pointer;
+            border: 1px solid #e0e0e0;
+            border-radius: 5px;
+
+            &:checked {
+               @apply bg-blue-700 border-blue-700;
+            }
+         }
+
+         &:has(input[type="checkbox"]:checked, input[type="radio"]:checked) {
+            @apply bg-blue-50;
+         }
+
+         &:hover {
+            input[type="checkbox"]:not(:checked),
+            input[type="radio"]:not(:checked) {
+               @apply border-blue-600;
+            }
+         }
+
+         &:has(input[type="checkbox"]:disabled, input[type="radio"]:disabled) {
+            cursor: not-allowed;
+            opacity: 0.75;
+
+            input {
+               cursor: not-allowed;
+            }
+         }
+      }
+
+      // Select input chevron icon
+      &:is(select) {
+         padding-right: 32px;
+         appearance: none;
+         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); // down chevron
+         background-repeat: no-repeat;
+         background-position: right 8px center;
+         background-size: 20px;
+      }
+
+      // Color picker input
+      &:is(input[type="color"]) {
+         width: auto;
+         aspect-ratio: 1/1;
+         padding: 3px;
+         cursor: pointer;
+         background-color: #fff;
+         border: none;
+         border: 1px solid #e0e0e0;
+         border-radius: 5px;
+      }
+
+      &:hover {
+         border-color: #555;
+      }
+
+      &:disabled {
+         cursor: not-allowed;
+         background-color: #fff;
+         opacity: 0.75;
+      }
+   }
+}
+</style>

package/src/components/BlockEditorFields/BlockEditorFields.vue

@@ -0,0 +1,91 @@
+<template>
+   <div class="section-editor-fields">
+      <!-- Field group tabs-->
+      <div v-if="editorFieldGroups.length" class="field-group-tabs flex gap-2 border-b px-5 pt-3">
+         <button
+            v-for="fieldGroupName in editorFieldGroups"
+            :key="`fg_${fieldGroupName}`"
+            class="field-group-tab rounded-t-md border border-zinc-200 bg-zinc-100 px-4 py-2 text-sm first-letter:uppercase"
+            :class="{ 'bg-zinc-00 border-b-transparent !bg-white': activeFieldGroup === fieldGroupName }"
+            @click="activeFieldGroup = fieldGroupName"
+         >
+            {{ fieldGroupName }}
+         </button>
+      </div>
+
+      <!-- Fields -->
+      <div v-if="blockData && Object.keys(editorFields).length > 0" class="flex flex-col gap-3 p-5">
+         <div v-for="(fieldConfig, fieldName) in editorFields" :key="fieldName" class="prop-field">
+            <BlockEditorFieldNode
+               v-model="blockData[fieldName]"
+               :fieldConfig="fieldConfig"
+               :fieldName="fieldName"
+               :editable="editable"
+            />
+         </div>
+      </div>
+
+      <!-- No fields -->
+      <div v-else class="p-5">
+         <div class="rounded-lg bg-zinc-100 px-4 py-3 text-sm font-bold text-zinc-500">
+            <p>
+               {{ isLayoutBlock ? "No settings available for this layout." : "No options available for this block." }}
+            </p>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onBeforeMount, watch } from "vue";
+import BlockEditorFieldNode from "../BlockEditorFieldNode/BlockEditorFieldNode.vue";
+import type { EditorFieldConfig } from "../../util/fieldConfig";
+
+const blockData = defineModel<any>();
+const activeFieldGroup = ref<string>("");
+const { fields, editable } = defineProps<{
+   fields?: Record<string, EditorFieldConfig>;
+   editable: boolean;
+   isLayoutBlock?: boolean;
+}>();
+
+const editorFields = computed(() => {
+   // If no groups, return all fields
+   if (!editorFieldGroups.value.length) return fields || {};
+   // If an active field group is set, return only the fields in that group
+   if (fields && Object.keys(fields).length > 0) {
+      return Object.fromEntries(Object.entries(fields).filter(([_, field]) => field?.group === activeFieldGroup.value));
+   }
+   // If no active field group is set, return all fields
+   return fields || {};
+});
+
+// Return unique string[] of unique field groups
+const editorFieldGroups = computed(() => {
+   // If there are no fields, return an empty array
+   if (!fields || Object.keys(fields).length === 0) return [];
+
+   // If the fields do not have any groups, return empty array
+   if (!Object.keys(fields).some((field) => fields[field]?.group)) return [];
+
+   return Object.keys(fields).reduce((acc, field) => {
+      const fieldGroup = fields[field]?.group;
+      if (fieldGroup && !acc.includes(fieldGroup)) {
+         acc.push(fieldGroup);
+      }
+      return acc;
+   }, [] as string[]);
+});
+
+watch(editorFieldGroups, () => {
+   if (editorFieldGroups.value.length > 0) {
+      activeFieldGroup.value = editorFieldGroups.value[0];
+   }
+});
+
+onBeforeMount(() => {
+   if (editorFieldGroups.value.length > 0) {
+      activeFieldGroup.value = editorFieldGroups.value[0];
+   }
+});
+</script>

package/src/components/BlockMarginFieldNode/BlockMarginNode.vue

@@ -0,0 +1,132 @@
+<template>
+   <div class="margin-field flex gap-2" :class="linkedMargin ? '' : 'items-start'">
+      <div v-if="linkedMargin" class="field-wrapper relative flex-1" title="Top & Bottom Margin">
+         <span class="pointer-events-none absolute left-0 top-0 inline-flex h-full items-center border-r px-3 text-xs">
+            <ArrowsUpDownIcon class="size-3" />
+         </span>
+         <select
+            v-model="linkedMarginValue"
+            class="form-control"
+            style="padding-left: 3rem"
+            :placeholder="fieldConfig.placeholder"
+            :disabled="!editable"
+            @change="handleLinkedMarginChange"
+         >
+            <option v-for="option in fieldConfig.options" :key="option.value" :value="option.value">
+               {{ option.label }}
+            </option>
+         </select>
+      </div>
+      <template v-else-if="fieldValue">
+         <div class="flex flex-1 gap-2">
+            <div class="field-wrapper relative flex-1" title="Top Margin">
+               <span
+                  class="pointer-events-none absolute left-0 top-0 inline-flex h-full items-center justify-center border-r px-3 text-xs"
+                  ><ArrowUpIcon class="size-3"
+               /></span>
+               <select
+                  v-model="fieldValue.top"
+                  class="form-control"
+                  style="padding-left: 3rem"
+                  :placeholder="fieldConfig.placeholder"
+                  :disabled="!editable"
+               >
+                  <option v-for="option in fieldConfig.options" :key="option.value" :value="option.value">
+                     {{ option.label }}
+                  </option>
+               </select>
+            </div>
+            <div class="field-wrapper relative flex-1" title="Bottom Margin">
+               <span
+                  class="pointer-events-none absolute left-0 top-0 inline-flex h-full items-center justify-center border-r px-3 text-xs"
+               >
+                  <ArrowDownIcon class="size-3" />
+               </span>
+               <select
+                  v-model="fieldValue.bottom"
+                  class="form-control"
+                  style="padding-left: 3rem"
+                  :placeholder="fieldConfig.placeholder"
+                  :disabled="!editable"
+               >
+                  <option v-for="option in fieldConfig.options" :key="option.value" :value="option.value">
+                     {{ option.label }}
+                  </option>
+               </select>
+            </div>
+         </div>
+      </template>
+      <button
+         v-if="editable"
+         title="Link Margin (Top & Bottom)"
+         class="inline-flex size-10 shrink-0 items-center justify-center rounded-md border p-2 text-center"
+         :class="
+            linkedMargin
+               ? 'bg-blue-50 border-blue-200 hover:bg-blue-100'
+               : 'bg-zinc-50 border-zinc-200 hover:border-zinc-300 hover:bg-zinc-100'
+         "
+         @click="toggleLinkedMargin"
+      >
+         <LinkIcon v-if="linkedMargin" class="size-4" />
+         <LinkSlashIcon v-else class="size-4" />
+      </button>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref, onMounted } from "vue";
+import type { EditorFieldConfig } from "../../util/fieldConfig";
+import { LinkIcon, LinkSlashIcon, ArrowUpIcon, ArrowDownIcon, ArrowsUpDownIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps<{
+   fieldConfig: EditorFieldConfig;
+   editable: boolean;
+}>();
+
+const linkedMargin = ref(false);
+const linkedMarginValue = ref<string>(props.fieldConfig.default);
+
+const fieldValue = defineModel<{ top: string; bottom: string } | undefined>();
+
+const toggleLinkedMargin = () => {
+   linkedMargin.value = !linkedMargin.value;
+   if (linkedMargin.value) {
+      linkedMarginValue.value = fieldValue.value?.top || fieldValue.value?.bottom || props.fieldConfig.default || "";
+      fieldValue.value = { top: linkedMarginValue.value || "", bottom: linkedMarginValue.value || "" };
+   } else {
+      fieldValue.value = {
+         top: linkedMarginValue.value || props.fieldConfig.default || "",
+         bottom: linkedMarginValue.value || props.fieldConfig.default || "",
+      };
+   }
+};
+
+const handleLinkedMarginChange = () => {
+   if (!linkedMarginValue.value) return;
+   fieldValue.value = { top: linkedMarginValue.value, bottom: linkedMarginValue.value };
+};
+
+onMounted(() => {
+   // If top and bottom margin are the same, set linked margin to true
+   if (fieldValue.value?.top === fieldValue.value?.bottom) {
+      linkedMargin.value = true;
+      linkedMarginValue.value = fieldValue.value?.top || props.fieldConfig.default || "";
+   }
+
+   // If top and bottom margin are not set, set them to the default value
+   if (!fieldValue.value || !fieldValue.value.top || !fieldValue.value.bottom) {
+      fieldValue.value = { top: props.fieldConfig.default || "", bottom: props.fieldConfig.default || "" };
+   }
+});
+</script>
+
+<style scoped lang="scss">
+select.form-control {
+   padding-right: 32px;
+   appearance: none;
+   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); // down chevron
+   background-repeat: no-repeat;
+   background-position: right 8px center;
+   background-size: 20px;
+}
+</style>