- inizio di modifiche all'editor di Pagine Web

src/components/MenuPageItem/MenuPageItem.ts

@@ -0,0 +1,50 @@
+import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
+import { IMyPage } from 'app/src/model';
+
+type PageWithKey = IMyPage & { __key?: string };
+
+export default defineComponent({
+  name: 'MenuPageItem',
+  props: {
+    item: { type: Object as () => PageWithKey, required: true },
+    selected: { type: Boolean, default: false },
+    active: { type: Boolean, default: false }, // v-model:active
+    variant: { type: String as () => 'menu' | 'off', default: 'menu' },
+    showGrip: { type: Boolean, default: true },
+    draggableHandleClass: { type: String, default: 'drag-handle' },
+    depth: { type: Number, default: 0 },
+  },
+  emits: ['select', 'edit', 'delete', 'open', 'update:active', 'update:item'],
+  setup(props, { emit }) {
+    function displayPath(path?: string) {
+      if (!path) return '-';
+      return path.startsWith('/') ? path : '/' + path;
+    }
+    function emitSelect() {
+      emit('select', props.item.__key);
+    }
+    function emitEdit() {
+      emit('edit', props.item.__key);
+    }
+    function emitDelete() {
+      emit('delete', props.item.__key);
+    }
+    function emitOpen() {
+      emit('open', props.item.__key);
+    }
+
+    const indentSpacerStyle = computed(() => {
+      const px = Math.min(props.depth, 6) * 16; // max 6 livelli x 16px
+      return { width: `${px}px`, minWidth: `${px}px` };
+    });
+
+    return {
+      displayPath,
+      emitSelect,
+      emitEdit,
+      emitDelete,
+      emitOpen,
+      indentSpacerStyle,
+    };
+  },
+});