@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.50

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

@@ -1,156 +0,0 @@
-<template>
-  <FormOverlay
-    id="library"
-    :title="$t('libraryPlaceDialogTitle', 'Add block from library')"
-    icon="reusable"
-    @close="onClose"
-  >
-    <div class="bk-library-dialog">
-      <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"
-              >
-                <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 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") }}
-      </button>
-    </template>
-  </FormOverlay>
-</template>
-
-<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
-  );
-  return (fieldConfig?.allowedBundles || []).filter((v) => {
-    return types.getBlockBundleDefinition(v)?.allowReusable;
-  });
-});
-const onSubmit = () => {
-  if (selectedItem.value) {
-    emit("submit", selectedItem.value);
-  }
-};
-const onClose = () => {
-  emit("close");
-};
-const searchParams = computed(() => {
-  return {
-    bundles: selectedBundle.value !== "all" ? [selectedBundle.value] : allowedBundles.value,
-    page: page.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
-      };
-    }
-  }
-);
-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);
-    return {
-      bundle,
-      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

@@ -1,12 +0,0 @@
-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

@@ -1,85 +0,0 @@
-<template>
-  <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.'
-  )
-"
-    :width="1200"
-    icon="reusable"
-    :submit-label="$t('libraryDialogSubmit', 'Add to library')"
-    :can-submit="!!label.length"
-    @submit="$emit('confirm', label)"
-    @cancel="$emit('cancel')"
-  >
-    <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.'
-  )
-"
-      />
-      <label for="reusable_label" class="bk-form-label">{{
-        $t("libraryDialogDescriptionLabel", "Description")
-      }}</label>
-      <input
-        id="reusable_label"
-        v-model="label"
-        type="text"
-        class="bk-form-input"
-        :placeholder="
-  $t('libraryDialogTitleInputPlaceholder', 'e.g. Teaser Campaign 2024')
-"
-        required
-      />
-    </div>
-    <div class="bk-form-label">
-      {{ $t("libraryPreviewLabel", "Preview") }}
-    </div>
-    <div
-      class="bk-dialog-content-element"
-      :class="[backgroundClass, { 'bk-default-bg': !backgroundClass }]"
-      :style="backgroundClass ? {} : { backgroundColor }"
-    >
-      <div ref="previewEl" />
-    </div>
-  </DialogModal>
-</template>
-
-<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);
-    if (!item) {
-      return;
-    }
-    if (item.editTitle) {
-      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);
-  }
-});
-</script>

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

@@ -1,12 +0,0 @@
-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;

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

@@ -1,175 +0,0 @@
-<template>
-  <PluginItemAction
-    v-if="isReusable"
-    id="library_detach"
-    :title="$t('libraryDetach', 'Detach from library')"
-    icon="detach"
-    multiple
-    :weight="-70"
-    @click="onDetach"
-  />
-  <PluginItemAction
-    v-else-if="!isReusable"
-    id="library_make_reusable"
-    :title="$t('libraryAdd', 'Add to library')"
-    :disabled="!canMakeReusable || state.editMode.value !== 'editing'"
-    icon="reusable"
-    :weight="-70"
-    @click="showReusableDialog = true"
-  />
-
-  <PluginAddAction
-    v-if="
-  adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
-"
-    type="library"
-    :title="$t('libraryAddFromLibrary', 'Add from library')"
-    :description="
-  $t(
-    'libraryAddDescription',
-    'Add a reusable block from the block library.'
-  )
-"
-    icon="reusable"
-    color="lime"
-    item-bundle="from_library"
-    :disabled="!fromLibraryAllowedInList"
-    @placed="placedAction = $event"
-  />
-
-  <Teleport to="body">
-    <transition appear name="bk-slide-up" :duration="300">
-      <ReusableDialog
-        v-if="showReusableDialog && selectedItem"
-        :uuid="selectedItem.uuid"
-        :background-class="definition?.editor?.previewBackgroundClass"
-        @confirm="onMakeReusable"
-        @cancel="showReusableDialog = false"
-      />
-    </transition>
-  </Teleport>
-
-  <Teleport to="body">
-    <transition appear name="bk-slide-in" :duration="200">
-      <LibraryDialog
-        v-if="placedAction && adapter.getLibraryItems"
-        :field="placedAction.field"
-        @close="placedAction = null"
-        @submit="onAddLibraryItem"
-      />
-    </transition>
-  </Teleport>
-  <EditReusable
-    v-if="editingLibraryItem"
-    v-bind="editingLibraryItem"
-    @submit="onSubmitLibraryItem"
-    @close="cancelLibraryItemEdit"
-  />
-</template>
-
-<script setup>
-import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
-import { PluginItemAction, PluginAddAction } from "#blokkli/plugins";
-import ReusableDialog from "./ReusableDialog/index.vue";
-import LibraryDialog from "./LibraryDialog/index.vue";
-import EditReusable from "./EditReusable/index.vue";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { adapter } = defineBlokkliFeature({
-  id: "library",
-  icon: "reusable",
-  label: "Library",
-  description: "Implements support for a block library to manage reusable blocks.",
-  requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"]
-});
-const { selection, state, types, $t, eventBus, definitions } = useBlokkli();
-const showReusableDialog = ref(false);
-const selectedItem = computed(() => {
-  if (selection.blocks.value.length !== 1) {
-    return;
-  }
-  return selection.blocks.value[0];
-});
-const onDetach = async () => {
-  if (!adapter.detachReusableBlock || !selection.uuids.value.length) {
-    return;
-  }
-  await state.mutateWithLoadingState(
-    () => adapter.detachReusableBlock({
-      uuids: selection.uuids.value
-    })
-  );
-  eventBus.emit("select:end");
-};
-const placedAction = ref(null);
-const onAddLibraryItem = async (uuid) => {
-  if (!placedAction.value || !adapter.addLibraryItem) {
-    return;
-  }
-  await state.mutateWithLoadingState(
-    () => adapter.addLibraryItem({
-      libraryItemUuid: uuid,
-      host: placedAction.value.host,
-      afterUuid: placedAction.value.preceedingUuid
-    })
-  );
-  placedAction.value = null;
-};
-const definition = computed(
-  () => selectedItem?.value ? definitions.getBlockDefinition(
-    selectedItem.value.itemBundle,
-    selectedItem.value.hostFieldListType,
-    selectedItem.value.parentBlockBundle
-  ) : null
-);
-const itemBundle = computed(
-  () => selectedItem?.value ? types.getBlockBundleDefinition(selectedItem.value.itemBundle) : null
-);
-const isReusable = computed(
-  () => selection.blocks.value.length && selection.blocks.value.every((v) => v.itemBundle === "from_library")
-);
-async function onMakeReusable(label) {
-  showReusableDialog.value = false;
-  if (!selectedItem?.value?.uuid) {
-    return;
-  }
-  await state.mutateWithLoadingState(
-    () => adapter.makeBlockReusable({
-      label,
-      uuid: selectedItem.value.uuid
-    }),
-    $t("libraryError", "Failed to add block to library.")
-  );
-  eventBus.emit("select:end");
-}
-const isSupportedOnEntity = computed(
-  () => types.generallyAvailableBundles.find((v) => v.id === "from_library")
-);
-const fromLibraryAllowedInList = computed(() => {
-  if (!selection.uuids.value.length) {
-    return !!types.generallyAvailableBundles.find(
-      (v) => v.id === "from_library"
-    );
-  }
-  return types.allowedTypesInList.value.includes("from_library");
-});
-const canMakeReusable = computed(
-  () => !isReusable.value && itemBundle?.value?.allowReusable && fromLibraryAllowedInList.value
-);
-const editingLibraryItem = ref(null);
-onBlokkliEvent("library:edit-item", function(e) {
-  editingLibraryItem.value = e;
-});
-function cancelLibraryItemEdit() {
-  editingLibraryItem.value = null;
-}
-function onSubmitLibraryItem() {
-  eventBus.emit("reloadState");
-  cancelLibraryItemEdit();
-}
-</script>
-
-<script>
-export default {
-  name: "Library"
-};
-</script>

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

@@ -1,2 +0,0 @@
-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/Features/MediaLibrary/Library/Item.vue

@@ -1,40 +0,0 @@
-<template>
-  <div
-    :key="mediaId"
-    class="bk-media-library-items-item"
-    :class="{ 'bk-is-selected': isSelected }"
-    :data-sortli-id="'media_library_' + mediaId"
-    data-element-type="media_library"
-    :data-item-bundle="targetBundles[0]"
-    :data-media-id="mediaId"
-    :data-media-bundle="mediaBundle"
-  >
-    <div class="bk-media-library-items-item-box">
-      <label @click.stop>
-        <input v-model="selected" type="checkbox" :value="mediaId" />
-      </label>
-      <div class="bk-media-library-items-item-image">
-        <img :src="thumbnail" />
-      </div>
-    </div>
-    <div class="bk-media-library-items-item-text">
-      <h3>{{ label }}</h3>
-      <p>{{ context }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "#imports";
-const props = defineProps({
-  mediaId: { type: String, required: true },
-  label: { type: String, required: true },
-  context: { type: String, required: true },
-  targetBundles: { type: Array, required: true },
-  thumbnail: { type: String, required: false },
-  icon: { type: null, required: false },
-  mediaBundle: { type: String, required: false }
-});
-const selected = defineModel({ type: Array });
-const isSelected = computed(() => selected.value?.includes(props.mediaId));
-</script>

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

@@ -1,19 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-type __VLS_Props = {
-    mediaId: string;
-    label: string;
-    context: string;
-    targetBundles: string[];
-    thumbnail?: string;
-    icon?: BlokkliIcon;
-    mediaBundle?: string;
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue?: string[];
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string[] | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,173 +0,0 @@
-<template>
-  <div class="bk bk-media-library">
-    <div v-if="status === 'pending'" class="bk-loading">
-      <Icon name="loader" />
-    </div>
-    <div class="bk-media-library-filters">
-      <div class="bk-media-library-filters-listview">
-        <button @click="toggleListView">
-          <Icon :name="listViewIcon" />
-        </button>
-      </div>
-      <div v-for="filter in filters" :key="filter.key">
-        <label v-if="filter.filter.type === 'text'" class="bk-form-text">
-          <Icon name="search" />
-          <input
-            v-model.lazy="filterValues[filter.key]"
-            type="text"
-            :placeholder="filter.filter.placeholder"
-          />
-        </label>
-        <label
-          v-else-if="filter.filter.type === 'select'"
-          class="bk-form-select"
-        >
-          <div v-if="!filterValues[filter.key]">
-            {{ Object.values(filter.filter.options)[0] }}
-          </div>
-          <select v-model="filterValues[filter.key]">
-            <option
-              v-for="option in Object.entries(filter.filter.options)"
-              :key="option[0]"
-              :value="option[0]"
-            >
-              {{ option[1] }}
-            </option>
-          </select>
-        </label>
-        <label
-          v-else-if="filter.filter.type === 'checkbox'"
-          class="bk-checkbox-toggle"
-        >
-          <input v-model="filterValues[filter.key]" type="checkbox" />
-          <div />
-          <span>{{ filter.filter.label }}</span>
-        </label>
-      </div>
-    </div>
-    <div
-      ref="listEl"
-      class="bk-media-library-items bk-scrollbar-light"
-      :class="[{ 'bk-is-sortli': isSortli }, 'bk-is-' + listView]"
-    >
-      <Sortli v-if="isSortli" no-transition :get-drag-items="getDragItems">
-        <Item
-          v-for="item in items"
-          :key="item.mediaId"
-          v-bind="item"
-          v-model="selected"
-        />
-      </Sortli>
-
-      <div v-else>
-        <Item v-for="item in items" :key="item.mediaId" v-bind="item" />
-      </div>
-    </div>
-
-    <div v-if="selected.length" class="bk-media-library-cancel">
-      <button class="bk-button bk-is-primary" @click.prevent="selected = []">
-        {{ $t("cancelSelection", "Cancel selection") }}
-      </button>
-    </div>
-
-    <Pagination v-model="page" :total-pages />
-  </div>
-</template>
-
-<script setup>
-import {
-  ref,
-  computed,
-  useLazyAsyncData,
-  useBlokkli,
-  watch,
-  nextTick
-} from "#imports";
-import { Sortli, Icon, Pagination } from "#blokkli/components";
-import Item from "./Item.vue";
-import { buildDraggableItem, falsy } from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-defineProps({
-  isSortli: { type: Boolean, required: false },
-  modelValue: { type: String, required: false }
-});
-const { adapter, storage, $t } = useBlokkli();
-const selected = ref([]);
-const listEl = ref(null);
-const page = ref(0);
-const key = computed(() => Object.values(filterValues.value).join(","));
-function getDragItems(activeItem) {
-  if (!selected.value.length || !listEl.value) {
-    return null;
-  }
-  const activeId = activeItem?.itemType === "media_library" ? activeItem.mediaId : null;
-  const items2 = selected.value.map((id) => {
-    const el = listEl.value?.querySelector(
-      `[data-sortli-id="media_library_${id}"]`
-    );
-    if (!(el instanceof HTMLElement)) {
-      return null;
-    }
-    const item = buildDraggableItem(el);
-    if (item?.itemType === "media_library") {
-      return item;
-    }
-    return null;
-  }).filter(falsy);
-  if (!activeId) {
-    return items2;
-  }
-  const activeIsInSelection = items2.find((v) => v.mediaId === activeId);
-  if (activeIsInSelection) {
-    return items2;
-  }
-  return null;
-}
-const listView = storage.use(
-  "mediaLibraryListView",
-  "grid"
-);
-const listViewIcon = computed(() => {
-  if (listView.value === "grid") {
-    return "list-view-grid";
-  }
-  return "list-view-horizontal";
-});
-const toggleListView = () => {
-  listView.value = listView.value === "grid" ? "horizontal" : "grid";
-};
-const filterValues = ref({});
-watch(key, () => {
-  page.value = 0;
-});
-const { data, status } = await useLazyAsyncData(
-  () => {
-    return adapter.mediaLibraryGetResults({
-      filters: filterValues.value,
-      page: page.value
-    });
-  },
-  { watch: [key, page] }
-);
-watch(data, () => {
-  nextTick(() => {
-    if (listEl.value) {
-      listEl.value.scrollTop = 0;
-    }
-  });
-});
-const items = computed(() => data.value?.items || []);
-const filters = computed(() => {
-  return Object.entries(data.value?.filters || {}).map(([key2, filter]) => {
-    return { key: key2, filter };
-  });
-});
-const total = computed(() => data.value?.total || 0);
-const perPage = computed(() => data.value?.perPage || 0);
-const totalPages = computed(() => {
-  return Math.ceil(total.value / perPage.value);
-});
-onBlokkliEvent("item:dropped", function() {
-  selected.value = [];
-});
-</script>

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

@@ -1,6 +0,0 @@
-type __VLS_Props = {
-    isSortli?: boolean;
-    modelValue?: string;
-};
-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;