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

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

@@ -6,78 +6,76 @@
     @close="onClose"
   >
     <div class="bk-library-dialog">
-      <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.',
-          )
-        }}
-      </p>
-      <div class="bk">
-        <div class="bk-form-group">
-          <div>
-            <label class="bk-form-label" for="library_search">
-              {{ $t('libraryPlaceSearchLabel', 'Filter library items') }}
-            </label>
-            <input
-              id="library_search"
-              v-model.lazy="searchText"
-              type="text"
-              class="bk-form-input"
-              :placeholder="
-                $t('libraryPlaceSearchInputPlaceholder', 'Search library items')
-              "
-              required
-            />
-          </div>
-          <div>
-            <label class="bk-form-label" for="library_bundle">
-              {{ $t('libraryPlaceBundleSelectLabel', 'Bundle') }}
-            </label>
-            <select
-              id="library_bundle"
-              v-model="selectedBundle"
-              class="bk-form-input"
-            >
-              <option
-                v-for="v in bundleOptions"
-                :key="v.bundle"
-                :value="v.bundle"
+      <div>
+        <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.'
+)
+          }}
+        </p>
+        <div class="bk">
+          <div class="bk-form-group">
+            <div>
+              <label class="bk-form-label" for="library_search">
+                {{ $t('libraryPlaceSearchLabel', 'Filter library items') }}
+              </label>
+              <input
+                id="library_search"
+                v-model.lazy="searchText"
+                type="text"
+                class="bk-form-input"
+                :placeholder="
+  $t(
+    'libraryPlaceSearchInputPlaceholder',
+    'Search library items'
+  )
+"
+                required
+              />
+            </div>
+            <div>
+              <label class="bk-form-label" for="library_bundle">
+                {{ $t('libraryPlaceBundleSelectLabel', 'Bundle') }}
+              </label>
+              <select
+                id="library_bundle"
+                v-model="selectedBundle"
+                class="bk-form-input"
               >
-                {{ v.label }}
-              </option>
-            </select>
+                <option
+                  v-for="v in bundleOptions"
+                  :key="v.bundle"
+                  :value="v.bundle"
+                >
+                  {{ v.label }}
+                </option>
+              </select>
+            </div>
           </div>
         </div>
+        <div class="bk-library-dialog-content">
+          <Loading v-if="status === 'pending'" />
+          <ul ref="listEl" class="bk-library-dialog-list">
+            <li
+              v-for="item in items"
+              :key="item.uuid"
+              :class="{
+  'bk-is-selected': selectedItem === item.uuid
+}"
+              @click="selectedItem = item.uuid"
+            >
+              <LibraryListItem v-bind="item" />
+            </li>
+          </ul>
+        </div>
       </div>
-      <div class="bk-library-dialog-content">
-        <Loading v-if="status === 'pending'" />
-        <ul ref="listEl" class="bk-library-dialog-list">
-          <li
-            v-for="item in items"
-            :key="item.uuid"
-            :class="{
-              'bk-is-selected': selectedItem === item.uuid,
-            }"
-            @click="selectedItem = item.uuid"
-          >
-            <LibraryListItem v-bind="item" />
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="bk">
-      <div class="bk-pagination">
-        <button :disabled="page === 0" @click="page--">
-          <Icon name="arrow-left" />
-        </button>
-        <div>{{ page + 1 }} / {{ totalPages }}</div>
-        <button :disabled="page >= totalPages - 1" @click="page++">
-          <Icon name="arrow-right" />
-        </button>
+      <div class="bk bk-library-pagination">
+        <Pagination v-model="page" :total-pages />
       </div>
     </div>
+
     <template #footer>
       <button class="bk-button bk-is-primary" @click="onSubmit">
         {{ $t('libraryPlaceDialogSubmit', 'Add reusable block') }}
@@ -86,98 +84,73 @@
   </FormOverlay>
 </template>
 
-<script setup lang="ts">
-import type {
-  BlokkliAdapterGetLibraryItemsData,
-  BlokkliAdapterGetLibraryItemsResult,
-} from '#blokkli/adapter'
-import { FormOverlay, Icon } 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;

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

@@ -2,11 +2,11 @@
   <DialogModal
     :title="$t('libraryDialogTitle', 'Add to library')"
     :lead="
-      $t(
-        'libraryDialogLead',
-        'When you add an item to the library, you can use it on multiple pages at the same time. Changes to this item are then immediately published on all pages.',
-      )
-    "
+  $t(
+    'libraryDialogLead',
+    'When you add an item to the library, you can use it on multiple pages at the same time. Changes to this item are then immediately published on all pages.'
+  )
+"
     :width="1200"
     icon="reusable"
     :submit-label="$t('libraryDialogSubmit', 'Add to library')"
@@ -17,11 +17,11 @@
     <div class="bk-reusable-dialog-form">
       <InfoBox
         :text="
-          $t(
-            'libraryDialogReusableInfo',
-            'The library item will be available for placement on other pages once this page has been published.',
-          )
-        "
+  $t(
+    'libraryDialogReusableInfo',
+    'The library item will be available for placement on other pages once this page has been published.'
+  )
+"
       />
       <label for="reusable_label" class="bk-form-label">{{
         $t('libraryDialogDescriptionLabel', 'Description')
@@ -32,8 +32,8 @@
         type="text"
         class="bk-form-input"
         :placeholder="
-          $t('libraryDialogTitleInputPlaceholder', 'e.g. Teaser Campaign 2024')
-        "
+  $t('libraryDialogTitleInputPlaceholder', 'e.g. Teaser Campaign 2024')
+"
         required
       />
     </div>
@@ -50,46 +50,36 @@
   </DialogModal>
 </template>
 
-<script lang="ts" setup>
-import { ref, useBlokkli, onMounted } from '#imports'
-import { DialogModal, InfoBox } from '#blokkli/components'
-import { realBackgroundColor } from '#blokkli/helpers'
-
-defineEmits<{
-  (e: 'confirm', label: string): void
-  (e: 'cancel'): void
-}>()
-
-const { dom, $t } = useBlokkli()
-
-const props = defineProps<{
-  uuid: string
-  backgroundClass?: string
-}>()
-
-const label = ref('')
-const width = ref(450)
-const previewEl = ref<HTMLDivElement | null>(null)
-const backgroundColor = ref('')
-
+<script setup>
+import { ref, useBlokkli, onMounted } from "#imports";
+import { DialogModal, InfoBox } from "#blokkli/components";
+import { realBackgroundColor } from "#blokkli/helpers";
+defineEmits(["confirm", "cancel"]);
+const { dom, $t } = useBlokkli();
+const props = defineProps({
+  uuid: { type: String, required: true },
+  backgroundClass: { type: String, required: false }
+});
+const label = ref("");
+const width = ref(450);
+const previewEl = ref(null);
+const backgroundColor = ref("");
 onMounted(() => {
   if (previewEl.value) {
-    const item = dom.findBlock(props.uuid)
+    const item = dom.findBlock(props.uuid);
     if (!item) {
-      return
+      return;
     }
-
     if (item.editTitle) {
-      label.value = item.editTitle.substring(0, 40)
+      label.value = item.editTitle.substring(0, 40);
     }
-
-    const element = item.element()
-    const markup = dom.getDropElementMarkup(item)
-    width.value = element.getBoundingClientRect().width + 40
-    const clone = document.createElement('div')
-    clone.innerHTML = markup
-    previewEl.value.appendChild(clone)
-    backgroundColor.value = realBackgroundColor(element)
+    const element = item.element();
+    const markup = dom.getDropElementMarkup(item);
+    width.value = element.getBoundingClientRect().width + 40;
+    const clone = document.createElement("div");
+    clone.innerHTML = markup;
+    previewEl.value.appendChild(clone);
+    backgroundColor.value = realBackgroundColor(element);
   }
-})
+});
 </script>

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

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    uuid: string;
+    backgroundClass?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    confirm: (label: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((label: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;