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

package/dist/runtime/components/BlokkliField.vue

@@ -6,12 +6,17 @@
     :list="filteredList"
     :name="name"
     :entity="entity"
-    :field-key="fieldKey!"
+    :field-key="fieldKey"
     :allowed-fragments="allowedFragments"
     :nesting-level="nestingLevel"
     :drop-alignment="dropAlignment"
     :field-list-type="fieldListType"
-    :class="[attrs.class, listClass, { [nonEmptyClass]: filteredList.length }]"
+    :class="[
+  attrs.class,
+  listClass,
+  editClass,
+  { [nonEmptyClass]: filteredList.length }
+]"
     :is-nested="isNested"
     :language="providerEntity?.language"
     :proxy-mode="proxyMode"
@@ -22,55 +27,38 @@
   <component
     :is="tag"
     v-else-if="
-      !editOnly &&
-      (filteredList.length || isEditing || isPreview) &&
-      !proxyMode &&
-      !isGlobalProxyMode
-    "
+  !editOnly && (filteredList.length || isEditing || isPreview) && !proxyMode && !isGlobalProxyMode
+"
     :class="[
-      attrs.class,
-      {
-        [nonEmptyClass]: filteredList.length,
-      },
-      listClass,
-    ]"
+  attrs.class,
+  {
+    [nonEmptyClass]: filteredList.length
+  },
+  listClass
+]"
   >
     <BlokkliItem
       v-for="(item, i) in filteredList"
       :key="item.uuid + fieldListType"
       v-bind="item"
       :parent-type="isNested ? entity?.bundle : ''"
-      :data-uuid="isPreview ? item.uuid : undefined"
+      :data-uuid="isPreview ? item.uuid : void 0"
       :index="i"
     />
   </component>
   <slot v-if="!isGlobalProxyMode" name="after" :items="filteredList" />
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   useAttrs,
   inject,
   provide,
-  ref,
-  type ComputedRef,
-} from '#imports'
-import type { BlokkliFragmentName } from '#blokkli-build/definitions'
-import { isVisibleByOptions } from '#blokkli/helpers/runtimeHelpers'
-import BlokkliItem from './BlokkliItem.vue'
-
-import type {
-  FieldListItem,
-  MutatedField,
-  EntityContext,
-  ItemEditContext,
-  BlokkliProviderEntityContext,
-} from '#blokkli/types'
-import type {
-  ValidFieldListTypes,
-  FieldListItemTyped,
-} from '#blokkli-build/generated-types'
+  ref
+} from "#imports";
+import { isVisibleByOptions } from "#blokkli/helpers/runtimeHelpers";
+import BlokkliItem from "./BlokkliItem.vue";
 import {
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
@@ -87,151 +75,105 @@ import {
   INJECT_PROVIDER_CONTEXT,
   INJECT_FIELD_PROXY_MODE,
   INJECT_GLOBAL_PROXY_MODE,
-  INJECT_FIELD_USES_PROXY,
-} from '../helpers/symbols'
-import type DraggableListComponent from './Edit/DraggableList.vue'
-
-const DraggableList = inject<typeof DraggableListComponent | null>(
+  INJECT_FIELD_USES_PROXY
+} from "../helpers/symbols";
+if (import.meta.hot) {
+  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
+  });
+}
+const DraggableList = inject(
   INJECT_EDIT_FIELD_LIST_COMPONENT,
-  null,
-)
-
-const attrs = useAttrs()
-
+  null
+);
+const attrs = useAttrs();
 defineOptions({
-  inheritAttrs: false,
-})
-
-const isEditing = inject(INJECT_IS_EDITING, false)
-const isGlobalProxyMode = inject<ComputedRef<boolean> | null>(
+  inheritAttrs: false
+});
+defineSlots();
+const isEditing = inject(INJECT_IS_EDITING, false);
+const isGlobalProxyMode = inject(
   INJECT_GLOBAL_PROXY_MODE,
-  null,
-)
-const isInReusable = inject(INJECT_IS_IN_REUSABLE, false)
-const isPreview = inject<ComputedRef<boolean> | null>(INJECT_IS_PREVIEW, null)
-const isNested = inject(INJECT_IS_NESTED, false)
-const nestingLevel = inject<number>(INJECT_NESTING_LEVEL, 0)
-const mutatedFields = inject<Record<string, MutatedField> | null>(
+  null
+);
+const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
+const isPreview = inject(INJECT_IS_PREVIEW, null);
+const isNested = inject(INJECT_IS_NESTED, false);
+const nestingLevel = inject(INJECT_NESTING_LEVEL, 0);
+const mutatedFields = inject(
   INJECT_MUTATED_FIELDS_MAP,
-  null,
-)
-const editContext = inject<ItemEditContext | null>(INJECT_EDIT_CONTEXT, null)
-const entity = inject<EntityContext>(INJECT_ENTITY_CONTEXT)
-
+  null
+);
+const editContext = inject(INJECT_EDIT_CONTEXT, null);
+const entity = inject(INJECT_ENTITY_CONTEXT);
 if (!entity) {
-  throw new Error('Missing entity context.')
+  throw new Error("Missing entity context.");
 }
-
-const providerEntity = inject<ComputedRef<BlokkliProviderEntityContext>>(
-  INJECT_PROVIDER_CONTEXT,
-)!
-
+const providerEntity = inject(
+  INJECT_PROVIDER_CONTEXT
+);
 if (!providerEntity) {
   throw new Error(
-    'Missing blökkli injection: ' + INJECT_PROVIDER_CONTEXT.toString(),
-  )
+    "Missing bl\xF6kkli injection: " + INJECT_PROVIDER_CONTEXT.toString()
+  );
 }
-
-const props = withDefaults(
-  defineProps<{
-    name: string
-    list?: FieldListItem[] | FieldListItem
-    tag?: string
-    fieldListType?: ValidFieldListTypes
-    editOnly?: boolean
-    listClass?: string
-    nonEmptyClass?: string
-    allowedFragments?: BlokkliFragmentName[]
-    dropAlignment?: 'vertical' | 'horizontal'
-    /**
-     * Renders proxy blocks during editing.
-     */
-    proxyMode?: boolean
-
-    /**
-     * Determine whether an item should be rendered.
-     */
-    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean
-  }>(),
-  {
-    list: () => [],
-    tag: 'div',
-    fieldListType: 'default',
-    listClass: '',
-    nonEmptyClass: '',
-    allowedFragments: () => [],
-    dropAlignment: undefined,
-    shouldRenderItem: undefined,
-  },
-)
-
-// @TODO: How to canEdit?
-const canEdit = ref(true)
-
-const fieldKey = computed<string | undefined>(() => {
+const props = defineProps({
+  name: { type: String, required: true },
+  list: { type: [Array, Object, null], required: false, default: () => [] },
+  tag: { type: String, required: false, default: "div" },
+  fieldListType: { type: null, required: false, default: "default" },
+  editOnly: { type: Boolean, required: false },
+  listClass: { type: String, required: false, default: "" },
+  editClass: { type: String, required: false, default: "" },
+  nonEmptyClass: { type: String, required: false, default: "" },
+  allowedFragments: { type: Array, required: false, default: () => [] },
+  dropAlignment: { type: String, required: false, default: void 0 },
+  proxyMode: { type: Boolean, required: false },
+  shouldRenderItem: { type: Function, required: false, default: void 0 }
+});
+const canEdit = ref(true);
+const fieldKey = computed(() => {
   if (canEdit.value) {
-    return entity.uuid + ':' + props.name
+    return entity.uuid + ":" + props.name;
   }
-  return undefined
-})
-
-const fieldListType = computed(() => props.fieldListType)
-
-function filterVisible(item?: FieldListItemTyped | FieldListItem): boolean {
+  return void 0;
+});
+const fieldListType = computed(() => props.fieldListType);
+function filterVisible(item) {
   if (!item) {
-    return false
+    return false;
   }
-
-  // The block is always rendered during editing.
   if (isEditing) {
-    return true
+    return true;
   }
-
-  const isVisible = isVisibleByOptions(item, providerEntity.value.language)
-  const isVisibleCustom = props.shouldRenderItem
-    ? props.shouldRenderItem(item)
-    : true
-  return isVisible && isVisibleCustom
+  const isVisible = isVisibleByOptions(item, providerEntity.value.language);
+  const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
+  return isVisible && isVisibleCustom;
 }
-
-const filteredList = computed<FieldListItemTyped[]>(() => {
-  if (
-    mutatedFields &&
-    !isInReusable &&
-    editContext &&
-    fieldKey.value &&
-    (isPreview?.value || isEditing)
-  ) {
-    return ((mutatedFields[fieldKey.value] || {}).list || [])
-      .map((v) => {
-        const mutatedOptions = editContext.mutatedOptions[v.uuid] || {}
-        return {
-          ...v,
-          options: {
-            ...v.options,
-            ...mutatedOptions,
-          },
-        } as FieldListItemTyped
-      })
-      .filter(filterVisible)
+const filteredList = computed(() => {
+  if (mutatedFields && !isInReusable && editContext && fieldKey.value && (isPreview?.value || isEditing)) {
+    return ((mutatedFields[fieldKey.value] || {}).list || []).map((v) => {
+      return {
+        ...v,
+        options: {
+          ...v.options
+          // ...mutatedOptions,
+        }
+      };
+    });
   }
-
-  const list = Array.isArray(props.list) ? props.list : [props.list]
-  return list.filter(filterVisible) as FieldListItemTyped[]
-})
-
-provide(INJECT_IS_NESTED, true)
-provide(INJECT_NESTING_LEVEL, nestingLevel + 1)
-provide(INJECT_FIELD_LIST_TYPE, fieldListType)
-provide(INJECT_FIELD_LIST_BLOCKS, filteredList)
-
+  const list = Array.isArray(props.list) ? props.list : [props.list];
+  return list.filter(filterVisible);
+});
+provide(INJECT_IS_NESTED, true);
+provide(INJECT_NESTING_LEVEL, nestingLevel + 1);
+provide(INJECT_FIELD_LIST_TYPE, fieldListType);
+provide(INJECT_FIELD_LIST_BLOCKS, filteredList);
 if (props.proxyMode) {
-  provide(INJECT_IS_EDITING, false)
-  provide(INJECT_FIELD_PROXY_MODE, false)
-  provide(INJECT_FIELD_USES_PROXY, true)
+  provide(INJECT_IS_EDITING, false);
+  provide(INJECT_FIELD_PROXY_MODE, false);
+  provide(INJECT_FIELD_USES_PROXY, true);
 }
-
 if (!isNested) {
-  provide(INJECT_PROVIDER_BLOCKS, filteredList)
+  provide(INJECT_PROVIDER_BLOCKS, filteredList);
 }
 </script>

package/dist/runtime/components/BlokkliField.vue.d.ts

@@ -0,0 +1,49 @@
+import type { BlokkliFragmentName } from '#blokkli-build/definitions';
+import type { FieldListItem } from '#blokkli/types';
+import type { ValidFieldListTypes, FieldListItemTyped } from '#blokkli-build/generated-types';
+type __VLS_Slots = {
+    default(props: {
+        items: FieldListItemTyped[];
+    }): any;
+    after(props: {
+        items: FieldListItemTyped[];
+    }): any;
+};
+type __VLS_Props = {
+    name: string;
+    list?: Array<FieldListItem | null | undefined> | FieldListItem | null;
+    tag?: string;
+    fieldListType?: ValidFieldListTypes;
+    editOnly?: boolean;
+    listClass?: string;
+    editClass?: string;
+    nonEmptyClass?: string;
+    allowedFragments?: BlokkliFragmentName[];
+    dropAlignment?: 'vertical' | 'horizontal';
+    /**
+     * Renders proxy blocks during editing.
+     */
+    proxyMode?: boolean;
+    /**
+     * Determine whether an item should be rendered.
+     */
+    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    list: Array<FieldListItem | null | undefined> | FieldListItem | null;
+    fieldListType: ValidFieldListTypes;
+    allowedFragments: BlokkliFragmentName[];
+    tag: string;
+    dropAlignment: "vertical" | "horizontal";
+    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
+    listClass: string;
+    editClass: string;
+    nonEmptyClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/BlokkliItem.vue

@@ -12,97 +12,74 @@
     :is="component"
     v-else-if="component"
     v-bind="props"
-    :data-bk-in-proxy="fieldUsesProxy || undefined"
+    :data-bk-in-proxy="fieldUsesProxy || void 0"
   />
   <div v-else-if="isEditing">Block not implemented</div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   provide,
   useRuntimeConfig,
   inject,
-  defineAsyncComponent,
-  type ComputedRef,
-} from '#imports'
-import type { InjectedBlokkliItem } from '#blokkli/types'
-import { getBlokkliItemComponent } from '#blokkli-build/imports'
+  defineAsyncComponent
+} from "#imports";
+import { getComponent } from "#blokkli/helpers/imports";
 import {
   INJECT_BLOCK_ITEM,
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
   INJECT_FIELD_PROXY_MODE,
   INJECT_FIELD_USES_PROXY,
+  INJECT_GLOBAL_PROXY_MODE
+} from "../helpers/symbols";
+const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType;
+const componentProps = defineProps({
+  uuid: { type: String, required: true },
+  bundle: { type: String, required: true },
+  isNew: { type: Boolean, required: false },
+  options: { type: null, required: false, default: () => ({}) },
+  props: { type: null, required: false, default: () => ({}) },
+  index: { type: Number, required: false, default: 0 },
+  parentType: { type: String, required: false, default: "" },
+  isEditing: { type: Boolean, required: false, default: false }
+});
+const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false);
+const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false);
+const isGlobalProxyMode = inject(
   INJECT_GLOBAL_PROXY_MODE,
-} from '../helpers/symbols'
-import type {
-  BlockBundleWithNested,
-  ValidFieldListTypes,
-} from '#blokkli-build/generated-types'
-
-const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType
-
-const componentProps = withDefaults(
-  defineProps<{
-    uuid: string
-    bundle: string
-    isNew?: boolean
-    options?: any
-    props?: any
-    index?: number
-    parentType?: string
-    isEditing?: boolean
-  }>(),
-  {
-    index: 0,
-    isEditing: false,
-    parentType: '',
-    options: () => ({}),
-    props: () => ({}),
-  },
-)
-
-const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false)
-const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false)
-const isGlobalProxyMode = inject<ComputedRef<boolean> | null>(
-  INJECT_GLOBAL_PROXY_MODE,
-  null,
-)
-
-const fieldListType = inject<ComputedRef<ValidFieldListTypes> | undefined>(
+  null
+);
+const fieldListType = inject(
   INJECT_FIELD_LIST_TYPE,
-  undefined,
-)
-
-const component =
-  isProxyMode || isGlobalProxyMode?.value
-    ? defineAsyncComponent(() => import('./Edit/BlockProxy/index.vue'))
-    : getBlokkliItemComponent(
-        componentProps.bundle,
-        fieldListType?.value || 'default',
-        componentProps.parentType,
-      )
-
-const index = computed(() => componentProps.index)
+  void 0
+);
+const component = isProxyMode || isGlobalProxyMode?.value ? defineAsyncComponent(() => import("./Edit/BlockProxy/index.vue")) : getComponent(
+  "block",
+  componentProps.bundle,
+  fieldListType?.value || "default",
+  componentProps.parentType
+);
+const index = computed(() => componentProps.index);
 const item = computed(() => ({
   index,
-  uuid: componentProps.uuid || '',
+  uuid: componentProps.uuid || "",
   options: componentProps.options || {},
   isEditing: componentProps.isEditing,
-  parentType: componentProps.parentType as BlockBundleWithNested,
-}))
-
-provide<InjectedBlokkliItem>(INJECT_BLOCK_ITEM, item)
+  parentType: componentProps.parentType,
+  fragmentName: componentProps.bundle === "blokkli_fragment" ? componentProps.props?.name : void 0
+}));
+provide(INJECT_BLOCK_ITEM, item);
 provide(INJECT_ENTITY_CONTEXT, {
   uuid: componentProps.uuid,
   type: itemEntityType,
-  bundle: componentProps.bundle,
-})
+  bundle: componentProps.bundle
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'BlokkliItem',
-}
+  name: "BlokkliItem"
+};
 </script>

package/dist/runtime/components/BlokkliItem.vue.d.ts

@@ -0,0 +1,26 @@
+declare const _default: import("vue").DefineComponent<{
+    uuid: string;
+    bundle: string;
+    isNew?: boolean;
+    options?: any;
+    props?: any;
+    index?: number;
+    parentType?: string;
+    isEditing?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    uuid: string;
+    bundle: string;
+    isNew?: boolean;
+    options?: any;
+    props?: any;
+    index?: number;
+    parentType?: string;
+    isEditing?: boolean;
+}> & Readonly<{}>, {
+    index: number;
+    options: any;
+    parentType: string;
+    isEditing: boolean;
+    props: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;