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

package/dist/runtime/components/Edit/Features/Library/EditReusable/index.vue

@@ -5,13 +5,13 @@
       <header v-show="isLoaded" class="bk bk-library-edit-overlay-header">
         <h2>
           <span>{{
-            $t('libraryItemEditOverlayTitle', 'Edit reusable block')
+            $t("libraryItemEditOverlayTitle", "Edit reusable block")
           }}</span>
           <span v-if="label">&nbsp;{{ label }}</span>
         </h2>
         <button @click.prevent="closeOverlay">
           <Icon name="arrow-left" />
-          <span>{{ $t('libraryItemEditOverlayBack', 'Back to page') }}</span>
+          <span>{{ $t("libraryItemEditOverlayBack", "Back to page") }}</span>
         </button>
       </header>
     </Transition>
@@ -36,171 +36,133 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import onBroadcastEvent from '#blokkli/helpers/composables/onBroadcastEvent'
-import { ref, useBlokkli } from '#imports'
-import { Icon } from '#blokkli/components'
-import Loading from './../../../Loading/index.vue'
-
-const props = defineProps<{
-  url: string
-  uuid: string
-  label?: string
-}>()
-
-const DURATION = 530
-const emit = defineEmits(['submit', 'close'])
-
-function getOriginatingElement(): HTMLElement | null {
+<script setup>
+import onBroadcastEvent from "#blokkli/helpers/composables/onBroadcastEvent";
+import { ref, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+import Loading from "./../../../Loading/index.vue";
+const props = defineProps({
+  url: { type: String, required: true },
+  uuid: { type: String, required: true },
+  label: { type: String, required: false }
+});
+const DURATION = 530;
+const emit = defineEmits(["submit", "close"]);
+function getOriginatingElement() {
   const el = document.querySelector(
-    `[data-bk-library-item-uuid="${props.uuid}"]`,
-  )
+    `[data-bk-library-item-uuid="${props.uuid}"]`
+  );
   if (el instanceof HTMLElement) {
-    return el
+    return el;
   }
-
-  return null
+  return null;
 }
-
-// called one frame after the element is inserted.
-// use this to start the entering animation.
-function onEnter(el: Element, done: () => void) {
+function onEnter(el, done) {
   if (el instanceof HTMLElement) {
-    const originating = getOriginatingElement()
+    const originating = getOriginatingElement();
     if (!originating) {
-      done()
-      isLoading.value = false
-      return
+      done();
+      isLoading.value = false;
+      return;
     }
-
-    const originatingRect = originating.getBoundingClientRect()
-    const overlayRect = el.getBoundingClientRect()
-
-    const offsetX =
-      originatingRect.x - overlayRect.x + originatingRect.width / 2
-    const offsetY =
-      originatingRect.y - overlayRect.y + originatingRect.height / 2
-
-    el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`
-
+    const originatingRect = originating.getBoundingClientRect();
+    const overlayRect = el.getBoundingClientRect();
+    const offsetX = originatingRect.x - overlayRect.x + originatingRect.width / 2;
+    const offsetY = originatingRect.y - overlayRect.y + originatingRect.height / 2;
+    el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`;
     setTimeout(() => {
-      el.style.transitionDuration = DURATION + 'ms'
-      el.style.transitionTimingFunction = 'cubic-bezier(0.56, 0.04, 0.25, 1)'
-      el.style.transitionProperty = 'transform'
-      el.style.transformOrigin = '0px 0px'
-      el.style.transform = 'translate(0px, 0px)'
-    }, 10)
-
+      el.style.transitionDuration = DURATION + "ms";
+      el.style.transitionTimingFunction = "cubic-bezier(0.56, 0.04, 0.25, 1)";
+      el.style.transitionProperty = "transform";
+      el.style.transformOrigin = "0px 0px";
+      el.style.transform = "translate(0px, 0px)";
+    }, 10);
     setTimeout(() => {
-      done()
-      isLoading.value = false
-    }, DURATION)
+      done();
+      isLoading.value = false;
+    }, DURATION);
   }
 }
-
-// called when the enter transition has finished.
-function onAfter(el: Element) {
+function onAfter(el) {
   if (el instanceof HTMLElement) {
-    el.style.transform = ''
-    el.style.transitionDuration = ''
-    el.style.opacity = ''
-    el.style.transitionProperty = ''
-    el.style.transitionTimingFunction = ''
-    el.style.transformOrigin = ''
+    el.style.transform = "";
+    el.style.transitionDuration = "";
+    el.style.opacity = "";
+    el.style.transitionProperty = "";
+    el.style.transitionTimingFunction = "";
+    el.style.transformOrigin = "";
   }
 }
-
-// called when the leave transition starts.
-// use this to start the leaving animation.
-function onLeave(el: Element, done: () => void) {
+function onLeave(el, done) {
   if (el instanceof HTMLElement) {
-    const originating = getOriginatingElement()
+    const originating = getOriginatingElement();
     if (!originating) {
-      done()
-      return
+      done();
+      return;
     }
-
-    const originatingRect = originating.getBoundingClientRect()
-    const overlayRect = el.getBoundingClientRect()
-
-    const offsetX =
-      originatingRect.x - overlayRect.x + originatingRect.width / 2
-    const offsetY =
-      originatingRect.y - overlayRect.y + originatingRect.height / 2
-
-    el.style.transform = 'translate(0px, 0px)'
-
+    const originatingRect = originating.getBoundingClientRect();
+    const overlayRect = el.getBoundingClientRect();
+    const offsetX = originatingRect.x - overlayRect.x + originatingRect.width / 2;
+    const offsetY = originatingRect.y - overlayRect.y + originatingRect.height / 2;
+    el.style.transform = "translate(0px, 0px)";
     setTimeout(() => {
-      el.style.transitionDuration = DURATION + 'ms'
-      el.style.transitionTimingFunction = 'cubic-bezier(0.56, 0.04, 0.25, 1)'
-      el.style.transitionProperty = 'transform'
-      el.style.transformOrigin = '0px 0px'
-      el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`
-    }, 10)
-
+      el.style.transitionDuration = DURATION + "ms";
+      el.style.transitionTimingFunction = "cubic-bezier(0.56, 0.04, 0.25, 1)";
+      el.style.transitionProperty = "transform";
+      el.style.transformOrigin = "0px 0px";
+      el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`;
+    }, 10);
     setTimeout(() => {
-      done()
-    }, DURATION)
+      done();
+    }, DURATION);
   }
 }
-
-function onAfterLeave(el: Element) {
-  onAfter(el)
+function onAfterLeave(el) {
+  onAfter(el);
   if (hasPublished.value) {
-    emit('submit')
+    emit("submit");
   } else {
-    emit('close')
+    emit("close");
   }
 }
-
-const { $t } = useBlokkli()
-
-const iframe = ref<HTMLIFrameElement | null>(null)
-const isLoaded = ref(false)
-const isLoading = ref(true)
-const hasPublished = ref(false)
-let timeout: any = null
-
-function onLibraryItemPublished({ uuid }: { uuid: string }) {
+const { $t } = useBlokkli();
+const iframe = ref(null);
+const isLoaded = ref(false);
+const isLoading = ref(true);
+const hasPublished = ref(false);
+let timeout = null;
+function onLibraryItemPublished({ uuid }) {
   if (props.uuid === uuid) {
-    hasPublished.value = true
-    isLoaded.value = false
+    hasPublished.value = true;
+    isLoaded.value = false;
   }
 }
-
 function onLoad() {
-  clearTimeout(timeout)
-
+  clearTimeout(timeout);
   timeout = window.setTimeout(() => {
-    isLoaded.value = true
-  }, 3000)
+    isLoaded.value = true;
+  }, 3e3);
   if (!iframe.value) {
-    return
+    return;
   }
-
-  iframe.value.focus()
-
-  iframe.value.contentWindow?.focus()
+  iframe.value.focus();
+  iframe.value.contentWindow?.focus();
 }
-
 function closeOverlay() {
-  hasPublished.value = false
-  isLoaded.value = false
+  hasPublished.value = false;
+  isLoaded.value = false;
 }
-
-function onLibraryItemClose({ uuid }: { uuid: string }) {
+function onLibraryItemClose({ uuid }) {
   if (props.uuid === uuid) {
-    closeOverlay()
+    closeOverlay();
   }
 }
-
-function onEditorLoaded({ uuid }: { uuid: string }) {
+function onEditorLoaded({ uuid }) {
   if (props.uuid === uuid) {
-    isLoaded.value = true
+    isLoaded.value = true;
   }
 }
-
-onBroadcastEvent('published', onLibraryItemPublished)
-onBroadcastEvent('closeEditor', onLibraryItemClose)
-onBroadcastEvent('editorLoaded', onEditorLoaded)
+onBroadcastEvent("published", onLibraryItemPublished);
+onBroadcastEvent("closeEditor", onLibraryItemClose);
+onBroadcastEvent("editorLoaded", onEditorLoaded);
 </script>

package/dist/runtime/components/Edit/Features/Library/EditReusable/index.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    url: string;
+    uuid: string;
+    label?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/Item/index.vue

@@ -31,50 +31,41 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed, provide, useBlokkli } from '#imports'
-
-import { getDefaultDefinition } from '#blokkli-build/definitions'
-import type { FieldListItem } from '#blokkli/types'
-import { ItemIcon, ScaleToFit } from '#blokkli/components'
+<script setup>
+import { computed, provide, useBlokkli } from "#imports";
+import { ItemIcon, ScaleToFit } from "#blokkli/components";
 import {
   INJECT_FIELD_LIST_BLOCKS,
   INJECT_FIELD_LIST_TYPE,
   INJECT_IS_EDITING,
   INJECT_IS_IN_REUSABLE,
-  INJECT_PROVIDER_BLOCKS,
-} from '#blokkli/helpers/symbols'
-
-const props = defineProps<{
-  uuid: string
-  label?: string
-  bundle: string
-  item: FieldListItem
-}>()
-
-const { types } = useBlokkli()
-
+  INJECT_PROVIDER_BLOCKS
+} from "#blokkli/helpers/symbols";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  label: { type: String, required: false },
+  bundle: { type: String, required: true },
+  item: { type: Object, required: true }
+});
+const { types, definitions } = useBlokkli();
 const bundleLabel = computed(
-  () => types.getBlockBundleDefinition(props.bundle)?.label || props.bundle,
-)
-
-const definition = computed(() => getDefaultDefinition(props.bundle))
-
-const previewWidth = computed(() => definition.value?.editor?.previewWidth)
+  () => types.getBlockBundleDefinition(props.bundle)?.label || props.bundle
+);
+const definition = computed(
+  () => definitions.getDefaultDefinition(props.bundle)
+);
+const previewWidth = computed(() => definition.value?.editor?.previewWidth);
 const renderPreview = computed(
-  () => definition.value?.editor?.noPreview !== true,
-)
-
+  () => definition.value?.editor?.noPreview !== true
+);
 const backgroundClass = computed(
-  () => definition.value?.editor?.previewBackgroundClass || '',
-)
-
-const blocks = computed(() => [])
-const fieldListType = computed(() => 'default')
-
-provide(INJECT_IS_IN_REUSABLE, true)
-provide(INJECT_IS_EDITING, false)
-provide(INJECT_FIELD_LIST_BLOCKS, blocks)
-provide(INJECT_PROVIDER_BLOCKS, blocks)
-provide(INJECT_FIELD_LIST_TYPE, fieldListType)
+  () => definition.value?.editor?.previewBackgroundClass || ""
+);
+const blocks = computed(() => []);
+const fieldListType = computed(() => "default");
+provide(INJECT_IS_IN_REUSABLE, true);
+provide(INJECT_IS_EDITING, false);
+provide(INJECT_FIELD_LIST_BLOCKS, blocks);
+provide(INJECT_PROVIDER_BLOCKS, blocks);
+provide(INJECT_FIELD_LIST_TYPE, fieldListType);
 </script>

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/Item/index.vue.d.ts

@@ -0,0 +1,9 @@
+import type { FieldListItem } from '#blokkli/types';
+type __VLS_Props = {
+    uuid: string;
+    label?: string;
+    bundle: string;
+    item: FieldListItem;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/index.vue

@@ -10,16 +10,16 @@
         <p class="bk-lead">
           {{
             $t(
-              'libraryPlaceDialogLead',
-              'Select a reusable block from the library to add it to your layout. You can detach the block later.',
-            )
+  "libraryPlaceDialogLead",
+  "Select a reusable block from the library to add it to your layout. You can detach the block later."
+)
           }}
         </p>
         <div class="bk">
           <div class="bk-form-group">
             <div>
               <label class="bk-form-label" for="library_search">
-                {{ $t('libraryPlaceSearchLabel', 'Filter library items') }}
+                {{ $t("libraryPlaceSearchLabel", "Filter library items") }}
               </label>
               <input
                 id="library_search"
@@ -27,17 +27,17 @@
                 type="text"
                 class="bk-form-input"
                 :placeholder="
-                  $t(
-                    'libraryPlaceSearchInputPlaceholder',
-                    'Search library items',
-                  )
-                "
+  $t(
+    'libraryPlaceSearchInputPlaceholder',
+    'Search library items'
+  )
+"
                 required
               />
             </div>
             <div>
               <label class="bk-form-label" for="library_bundle">
-                {{ $t('libraryPlaceBundleSelectLabel', 'Bundle') }}
+                {{ $t("libraryPlaceBundleSelectLabel", "Bundle") }}
               </label>
               <select
                 id="library_bundle"
@@ -62,8 +62,8 @@
               v-for="item in items"
               :key="item.uuid"
               :class="{
-                'bk-is-selected': selectedItem === item.uuid,
-              }"
+  'bk-is-selected': selectedItem === item.uuid
+}"
               @click="selectedItem = item.uuid"
             >
               <LibraryListItem v-bind="item" />
@@ -78,104 +78,79 @@
 
     <template #footer>
       <button class="bk-button bk-is-primary" @click="onSubmit">
-        {{ $t('libraryPlaceDialogSubmit', 'Add reusable block') }}
+        {{ $t("libraryPlaceDialogSubmit", "Add reusable block") }}
       </button>
     </template>
   </FormOverlay>
 </template>
 
-<script setup lang="ts">
-import type {
-  BlokkliAdapterGetLibraryItemsData,
-  BlokkliAdapterGetLibraryItemsResult,
-} from '#blokkli/adapter'
-import { FormOverlay, Pagination } from '#blokkli/components'
-import Loading from './../../../Loading/index.vue'
-import type { BlokkliFieldElement, FieldConfig } from '#blokkli/types'
-import { ref, useBlokkli, useAsyncData, computed, watch } from '#imports'
-import LibraryListItem from './Item/index.vue'
-
-const props = defineProps<{
-  field: BlokkliFieldElement
-}>()
-
-const { $t, adapter, types } = useBlokkli()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'submit', uuid: string): void
-}>()
-
-const searchText = ref('')
-const selectedBundle = ref('all')
-const listEl = ref<HTMLDivElement | null>(null)
-const selectedItem = ref('')
-const page = ref(0)
-
-const allowedBundles = computed<string[]>(() => {
-  const fieldConfig: FieldConfig | undefined = types.getFieldConfig(
+<script setup>
+import { FormOverlay, Pagination } from "#blokkli/components";
+import Loading from "./../../../Loading/index.vue";
+import { ref, useBlokkli, useAsyncData, computed, watch } from "#imports";
+import LibraryListItem from "./Item/index.vue";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const { $t, adapter, types } = useBlokkli();
+const emit = defineEmits(["close", "submit"]);
+const searchText = ref("");
+const selectedBundle = ref("all");
+const listEl = ref(null);
+const selectedItem = ref("");
+const page = ref(0);
+const allowedBundles = computed(() => {
+  const fieldConfig = types.getFieldConfig(
     props.field.hostEntityType,
     props.field.hostEntityBundle,
-    props.field.name,
-  )
+    props.field.name
+  );
   return (fieldConfig?.allowedBundles || []).filter((v) => {
-    return types.getBlockBundleDefinition(v)?.allowReusable
-  })
-})
-
+    return types.getBlockBundleDefinition(v)?.allowReusable;
+  });
+});
 const onSubmit = () => {
   if (selectedItem.value) {
-    emit('submit', selectedItem.value)
+    emit("submit", selectedItem.value);
   }
-}
+};
 const onClose = () => {
-  emit('close')
-}
-
-const searchParams = computed<BlokkliAdapterGetLibraryItemsData>(() => {
+  emit("close");
+};
+const searchParams = computed(() => {
   return {
-    bundles:
-      selectedBundle.value !== 'all'
-        ? [selectedBundle.value]
-        : allowedBundles.value,
+    bundles: selectedBundle.value !== "all" ? [selectedBundle.value] : allowedBundles.value,
     page: page.value,
-    text: searchText.value,
+    text: searchText.value
+  };
+});
+watch(searchText, function() {
+  page.value = 0;
+});
+const { data, status } = await useAsyncData(
+  () => adapter.getLibraryItems(searchParams.value),
+  {
+    watch: [searchParams],
+    default: () => {
+      return {
+        items: [],
+        total: 0,
+        perPage: 50
+      };
+    }
   }
-})
-
-watch(searchText, function () {
-  page.value = 0
-})
-
-const { data, status } =
-  await useAsyncData<BlokkliAdapterGetLibraryItemsResult>(
-    () => adapter.getLibraryItems!(searchParams.value),
-    {
-      watch: [searchParams],
-      default: () => {
-        return {
-          items: [],
-          total: 0,
-          perPage: 50,
-        }
-      },
-    },
-  )
-
-const perPage = computed(() => data.value.perPage)
-const totalPages = computed(() => Math.ceil(data.value.total / perPage.value))
-
-const items = computed(() => data.value.items)
-
+);
+const perPage = computed(() => data.value.perPage);
+const totalPages = computed(() => Math.ceil(data.value.total / perPage.value));
+const items = computed(() => data.value.items);
 const bundleOptions = computed(() => {
   const bundles = allowedBundles.value.map((bundle) => {
-    const definition = types.getBlockBundleDefinition(bundle)
+    const definition = types.getBlockBundleDefinition(bundle);
     return {
       bundle,
-      label: definition?.label || bundle,
-    }
-  })
-
-  return [{ bundle: 'all', label: $t('all', 'All') }, ...bundles]
-})
+      label: definition?.label || bundle
+    };
+  });
+  return [{ bundle: "all", label: $t("all", "All") }, ...bundles];
+});
 </script>

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/index.vue.d.ts

@@ -0,0 +1,12 @@
+import type { BlokkliFieldElement } from '#blokkli/types';
+type __VLS_Props = {
+    field: BlokkliFieldElement;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    submit: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSubmit?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;