@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.1

package/dist/runtime/components/Edit/DragInteractions/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/DraggableList.vue

@@ -3,12 +3,11 @@
     v-if="proxyMode || globalProxyMode"
     class="bk bk-field-list-proxy"
     :class="[
-      {
-        'bk-is-visible': proxyVisible,
-      },
-      'bk-is-' +
-        (dropAlignment || (nestingLevel === 0 ? 'vertical' : 'horizontal')),
-    ]"
+  {
+    'bk-is-visible': proxyVisible
+  },
+  'bk-is-' + (dropAlignment || (nestingLevel === 0 ? 'vertical' : 'horizontal'))
+]"
   >
     <div
       ref="root"
@@ -17,7 +16,7 @@
     >
       <BlokkliItem
         v-for="(item, i) in list"
-        :key="item.uuid + fieldListType"
+        :key="item.uuid + fieldListType + definitions.renderKey.value"
         :uuid="item.uuid"
         :bundle="item.bundle"
         :is-new="item.isNew"
@@ -79,7 +78,7 @@
   </Component>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   useBlokkli,
@@ -88,145 +87,103 @@ import {
   onBeforeUnmount,
   useAttrs,
   provide,
-  watch,
-} from '#imports'
-import type { FieldListItem, EntityContext, FieldConfig } from '#blokkli/types'
-import type { BlokkliFragmentName } from '#blokkli-build/definitions'
-import BlokkliItem from './../BlokkliItem.vue'
-import { isVisibleByOptions } from '#blokkli/helpers/runtimeHelpers'
+  watch
+} from "#imports";
+import BlokkliItem from "./../BlokkliItem.vue";
+import { isVisibleByOptions } from "#blokkli/helpers/runtimeHelpers";
 import {
   INJECT_FIELD_PROXY_MODE,
-  INJECT_IS_EDITING,
-} from '#blokkli/helpers/symbols'
-import type { FieldListItemTyped } from '#blokkli-build/generated-types'
-
-const { dom, types, runtimeConfig, selection } = useBlokkli()
-
-const root = ref<HTMLElement | null>(null)
-
-const props = withDefaults(
-  defineProps<{
-    name: string
-    fieldKey: string
-    list: FieldListItem[]
-    entity: EntityContext
-    language?: string
-    tag?: string
-    isNested: boolean
-    fieldListType: string
-    allowedFragments?: BlokkliFragmentName[]
-    dropAlignment?: 'vertical' | 'horizontal'
-    proxyMode?: boolean
-    globalProxyMode?: boolean
-    nestingLevel: number
-    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean
-  }>(),
-  {
-    tag: 'div',
-    allowedFragments: undefined,
-    dropAlignment: undefined,
-    language: undefined,
-    shouldRenderItem: undefined,
-  },
-)
-
-const attrs = useAttrs()
-
-provide(INJECT_FIELD_PROXY_MODE, props.proxyMode)
-provide(INJECT_IS_EDITING, true)
-
+  INJECT_IS_EDITING
+} from "#blokkli/helpers/symbols";
+const { dom, types, runtimeConfig, selection, definitions } = useBlokkli();
+const root = ref(null);
+const props = defineProps({
+  name: { type: String, required: true },
+  fieldKey: { type: String, required: true },
+  list: { type: Array, required: true },
+  entity: { type: Object, required: true },
+  language: { type: String, required: false, default: void 0 },
+  tag: { type: String, required: false, default: "div" },
+  isNested: { type: Boolean, required: true },
+  fieldListType: { type: String, required: true },
+  allowedFragments: { type: Array, required: false, default: void 0 },
+  dropAlignment: { type: String, required: false, default: void 0 },
+  proxyMode: { type: Boolean, required: false },
+  globalProxyMode: { type: Boolean, required: false },
+  nestingLevel: { type: Number, required: true },
+  shouldRenderItem: { type: Function, required: false, default: void 0 }
+});
+const attrs = useAttrs();
+provide(INJECT_FIELD_PROXY_MODE, props.proxyMode);
+provide(INJECT_IS_EDITING, true);
 const proxyVisible = computed(
-  () =>
-    props.proxyMode &&
-    (selection.uuids.value.length ||
-      selection.isDragging.value ||
-      selection.isMultiSelecting.value),
-)
-
-const fieldConfig = computed<FieldConfig>(() => {
+  () => props.proxyMode && (selection.uuids.value.length || selection.isDragging.value || selection.isMultiSelecting.value)
+);
+const fieldConfig = computed(() => {
   const match = types.getFieldConfig(
     props.entity.type,
     props.entity.bundle,
-    props.name,
-  )
-
+    props.name
+  );
   if (!match) {
     throw new Error(
-      `Missing field configuration for field "${props.name}" on entity type "${props.entity.type}" with bundle "${props.entity.bundle}". Make sure the "name" prop passed to <BlokkliField> is correct.`,
-    )
+      `Missing field configuration for field "${props.name}" on entity type "${props.entity.type}" with bundle "${props.entity.bundle}". Make sure the "name" prop passed to <BlokkliField> is correct.`
+    );
   }
-
-  return match
-})
-
-/**
- * The allowed item bundles in this list.
- */
-const allowedBundles = computed<string>(() => {
-  const bundles = fieldConfig.value.allowedBundles
+  return match;
+});
+const allowedBundles = computed(() => {
+  const bundles = fieldConfig.value.allowedBundles;
   if (!bundles.length) {
     console.error(
-      `Field with name "${props.name}" on entity "${props.entity.type}" with bundle "${props.entity.bundle}" does not define any allowed bundles.`,
-    )
+      `Field with name "${props.name}" on entity "${props.entity.type}" with bundle "${props.entity.bundle}" does not define any allowed bundles.`
+    );
   }
-
-  return bundles.join(',')
-})
-
+  return bundles.join(",");
+});
 const fieldAttributes = computed(() => {
   return {
-    'data-field-name': props.name,
-    'data-field-label': fieldConfig.value.label,
-    'data-field-is-nested': props.isNested,
-    'data-bk-nesting-level': props.nestingLevel,
-    'data-host-entity-type': props.entity.type,
-    'data-host-entity-uuid': props.entity.uuid,
-    'data-host-entity-bundle': props.entity.bundle,
-    'data-field-key': props.fieldKey,
-    'data-field-drop-alignment': props.dropAlignment,
-    'data-allowed-fragments': props.allowedFragments
-      ? props.allowedFragments.join(',')
-      : undefined,
-    'data-field-allowed-bundles': allowedBundles.value,
-    'data-field-list-type': props.fieldListType,
-    'data-field-cardinality': fieldConfig.value.cardinality,
-  }
-})
-
-// @TODO: This should be handled differently to prevent constant updates in the
-// component when the options change.
-// Ideally this is handled as an overlay on top of the blocks, similar to how
-// selection or multi-select works.
-function isMuted(item?: FieldListItem) {
+    "data-field-name": props.name,
+    "data-field-label": fieldConfig.value.label,
+    "data-field-is-nested": props.isNested,
+    "data-bk-nesting-level": props.nestingLevel,
+    "data-host-entity-type": props.entity.type,
+    "data-host-entity-uuid": props.entity.uuid,
+    "data-host-entity-bundle": props.entity.bundle,
+    "data-field-key": props.fieldKey,
+    "data-field-drop-alignment": props.dropAlignment,
+    "data-allowed-fragments": props.allowedFragments ? props.allowedFragments.join(",") : void 0,
+    "data-field-allowed-bundles": allowedBundles.value,
+    "data-field-list-type": props.fieldListType,
+    "data-field-cardinality": fieldConfig.value.cardinality
+  };
+});
+function isMuted(item) {
   if (!item) {
-    return true
+    return true;
   }
-
-  const isVisible = isVisibleByOptions(item, props.language)
-  const isVisibleCustom = props.shouldRenderItem
-    ? props.shouldRenderItem(item)
-    : true
-
-  return !(isVisible && isVisibleCustom)
+  const isVisible = isVisibleByOptions(item, props.language);
+  const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
+  return !(isVisible && isVisibleCustom);
 }
-
-watch(root, function (newRoot) {
+watch(root, function(newRoot) {
   if (newRoot) {
-    dom.updateFieldElement(props.entity, props.name, newRoot)
+    dom.updateFieldElement(props.entity, props.name, newRoot);
   }
-})
-
+});
 onMounted(() => {
   if (root.value) {
-    dom.registerField(props.entity, props.name, root.value)
+    dom.registerField(props.entity, props.name, root.value);
   }
-})
-
+});
 onBeforeUnmount(() => {
-  dom.unregisterField(props.entity, props.name)
-})
-
+  dom.unregisterField(props.entity, props.name);
+});
 defineOptions({
-  inheritAttrs: false,
-})
+  inheritAttrs: false
+});
+if (import.meta.hot) {
+  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
+  });
+}
 </script>

package/dist/runtime/components/Edit/DraggableList.vue.d.ts

@@ -0,0 +1,27 @@
+import type { FieldListItem, EntityContext } from '#blokkli/types';
+import type { BlokkliFragmentName } from '#blokkli-build/definitions';
+import type { FieldListItemTyped } from '#blokkli-build/generated-types';
+type __VLS_Props = {
+    name: string;
+    fieldKey: string;
+    list: FieldListItem[];
+    entity: EntityContext;
+    language?: string;
+    tag?: string;
+    isNested: boolean;
+    fieldListType: string;
+    allowedFragments?: BlokkliFragmentName[];
+    dropAlignment?: 'vertical' | 'horizontal';
+    proxyMode?: boolean;
+    globalProxyMode?: boolean;
+    nestingLevel: number;
+    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    allowedFragments: BlokkliFragmentName[];
+    tag: string;
+    language: string;
+    dropAlignment: "vertical" | "horizontal";
+    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/EditIndicator.vue

@@ -22,61 +22,49 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import textProvider from '#blokkli/helpers/textProvider'
-import { ref, computed } from '#imports'
-import '#blokkli-build/theme'
-import '#blokkli-build/styles'
-import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
-
-const props = defineProps<{
-  uuid: string
-  editLabel?: string
-}>()
-
-const $t = textProvider()
-
+<script setup>
+import textProvider from "#blokkli/helpers/textProvider";
+import { ref, computed } from "#imports";
+import "#blokkli-build/styles.css";
+import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  editLabel: { type: String, required: false }
+});
+const $t = textProvider();
 const label = computed(
-  () => props.editLabel || $t('editIndicatorLabel', 'Edit blocks'),
-)
-
-defineEmits(['edit'])
-
-const isHovering = ref(false)
-
-const style = ref<Record<string, string>>({})
-const button = ref<HTMLButtonElement | null>(null)
-const isVisible = ref(false)
-
-const overlayStyle = ref<Record<string, string> | null>(null)
-
-function calculateIdealYPosition(elementHeight: number, bounds: DOMRect) {
+  () => props.editLabel || $t("editIndicatorLabel", "Edit blocks")
+);
+defineEmits(["edit"]);
+const isHovering = ref(false);
+const style = ref({});
+const button = ref(null);
+const isVisible = ref(false);
+const overlayStyle = ref(null);
+function calculateIdealYPosition(elementHeight, bounds) {
   const idealTop = Math.min(
     Math.max(bounds.top, bounds.bottom - elementHeight - 20),
-    20,
-  )
-
-  return Math.max(idealTop, bounds.y + 20)
+    20
+  );
+  return Math.max(idealTop, bounds.y + 20);
 }
-
 useAnimationFrame(() => {
-  const el = document.querySelector(`[data-provider-uuid="${props.uuid}"]`)
-  isVisible.value = window.innerWidth > 1024
+  const el = document.querySelector(`[data-provider-uuid="${props.uuid}"]`);
+  isVisible.value = window.innerWidth > 1024;
   if (isVisible.value && el && el instanceof HTMLElement && button.value) {
-    const rect = el.getBoundingClientRect()
-    const buttonHeight = button.value.getBoundingClientRect().height
-    const y = calculateIdealYPosition(buttonHeight, rect)
-    style.value.transform = `translateY(${y}px)`
-
+    const rect = el.getBoundingClientRect();
+    const buttonHeight = button.value.getBoundingClientRect().height;
+    const y = calculateIdealYPosition(buttonHeight, rect);
+    style.value.transform = `translateY(${y}px)`;
     if (isHovering.value) {
       overlayStyle.value = {
-        width: rect.width + 'px',
-        height: rect.height + 'px',
-        transform: `translate(${rect.x}px, ${rect.y}px)`,
-      }
+        width: rect.width + "px",
+        height: rect.height + "px",
+        transform: `translate(${rect.x}px, ${rect.y}px)`
+      };
     } else {
-      overlayStyle.value = null
+      overlayStyle.value = null;
     }
   }
-})
+});
 </script>

package/dist/runtime/components/Edit/EditIndicator.vue.d.ts

@@ -0,0 +1,11 @@
+import '#blokkli-build/styles.css';
+type __VLS_Props = {
+    uuid: string;
+    editLabel?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEdit?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;