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

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

@@ -6,11 +6,11 @@
     :title-on="$t('fieldAreasShow', 'Show block fields')"
     :title-off="$t('fieldAreasHide', 'Hide block fields')"
     :tour-text="
-      $t(
-        'fieldAreasTourText',
-        'Toggle between showing or hiding the areas where blocks can be placed.',
-      )
-    "
+  $t(
+    'fieldAreasTourText',
+    'Toggle between showing or hiding the areas where blocks can be placed.'
+  )
+"
     icon="area"
     key-code="I"
   >
@@ -20,24 +20,22 @@
   </PluginViewOption>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature } from '#imports'
-import Overlay from './Overlay/index.vue'
-import { PluginViewOption } from '#blokkli/plugins'
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import Overlay from "./Overlay/index.vue";
+import { PluginViewOption } from "#blokkli/plugins";
 defineBlokkliFeature({
-  id: 'field-areas',
-  label: 'Field Areas',
-  icon: 'area',
-  description: 'Provides a view option to render the field areas with labels.',
-  viewports: ['desktop'],
-})
-
-const { $t } = useBlokkli()
+  id: "field-areas",
+  label: "Field Areas",
+  icon: "area",
+  description: "Provides a view option to render the field areas with labels.",
+  viewports: ["desktop"]
+});
+const { $t } = useBlokkli();
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'FieldAreas',
-}
+  name: "FieldAreas"
+};
 </script>

package/dist/runtime/components/Edit/Features/FieldAreas/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/Features/Fragments/Dialog/Item/index.vue

@@ -9,7 +9,7 @@
       class="bk-library-list-item-inner"
       :class="backgroundClass"
     >
-      <ScaleToFit :width="previewWidth">
+      <ScaleToFit :width="previewWidth" :max-height="500">
         <BlokkliItem
           v-bind="item"
           parent-type="nested"
@@ -20,49 +20,42 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed, provide } from '#imports'
-import { getFragmentDefinition } from '#blokkli/definitions'
-import { ScaleToFit } from '#blokkli/components'
+<script setup>
+import { computed, provide, useBlokkli } from "#imports";
+import { ScaleToFit } from "#blokkli/components";
 import {
   INJECT_FIELD_LIST_BLOCKS,
   INJECT_IS_EDITING,
   INJECT_IS_IN_REUSABLE,
-  INJECT_PROVIDER_BLOCKS,
-} from '#blokkli/helpers/symbols'
-
-const props = defineProps<{
-  name: string
-  index: number
-  label?: string
-  description?: string
-}>()
-
+  INJECT_PROVIDER_BLOCKS
+} from "#blokkli/helpers/symbols";
+const props = defineProps({
+  name: { type: String, required: true },
+  index: { type: Number, required: true },
+  label: { type: String, required: false },
+  description: { type: String, required: false }
+});
+const { definitions } = useBlokkli();
 const item = computed(() => {
   return {
-    bundle: 'blokkli_fragment',
+    bundle: "blokkli_fragment",
     uuid: props.index.toString(),
     props: {
-      name: props.name,
-    },
-  }
-})
-
-const definition = computed(() => getFragmentDefinition(props.name))
-
-const previewWidth = computed(() => definition.value?.editor?.previewWidth)
+      name: props.name
+    }
+  };
+});
+const definition = computed(() => definitions.getFragmentDefinition(props.name));
+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(() => [])
-
-provide(INJECT_IS_IN_REUSABLE, true)
-provide(INJECT_IS_EDITING, false)
-provide(INJECT_FIELD_LIST_BLOCKS, blocks)
-provide(INJECT_PROVIDER_BLOCKS, blocks)
+  () => definition.value?.editor?.previewBackgroundClass || ""
+);
+const blocks = computed(() => []);
+provide(INJECT_IS_IN_REUSABLE, true);
+provide(INJECT_IS_EDITING, false);
+provide(INJECT_FIELD_LIST_BLOCKS, blocks);
+provide(INJECT_PROVIDER_BLOCKS, blocks);
 </script>

package/dist/runtime/components/Edit/Features/Fragments/Dialog/Item/index.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name: string;
+    index: number;
+    label?: string;
+    description?: 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;

package/dist/runtime/components/Edit/Features/Fragments/Dialog/index.vue

@@ -9,44 +9,50 @@
       <p class="bk-lead">
         {{
           $t(
-            'fragmentsPlaceDialogLead',
-            'Select a block fragment to add to the page.',
-          )
+  'fragmentsPlaceDialogLead',
+  'Select a block fragment to add to the page.'
+)
         }}
       </p>
       <div class="bk">
-        <label class="bk-form-label" for="library_search">
-          {{ $t('fragmentsPlaceDialogSearchLabel', 'Filter fragments') }}
-        </label>
-        <input
-          id="fragments_search"
-          v-model="searchText"
-          type="text"
-          class="bk-form-input"
-          :placeholder="
-            $t('fragmentsPlaceDialogSearchPlaceholder', 'Search fragments')
-          "
-          required
-        />
+        <div class="bk-form-group">
+          <div>
+            <label class="bk-form-label" for="library_search">
+              {{ $t('fragmentsPlaceDialogSearchLabel', 'Filter fragments') }}
+            </label>
+            <input
+              id="fragments_search"
+              v-model="searchText"
+              type="text"
+              class="bk-form-input"
+              :placeholder="
+  $t('fragmentsPlaceDialogSearchPlaceholder', 'Search fragments')
+"
+              required
+            />
+          </div>
+        </div>
+      </div>
+      <div class="bk-library-dialog-content">
+        <ul class="bk-library-dialog-list">
+          <li
+            v-for="(item, index) in fragments"
+            :key="item.name"
+            :class="{
+  'bk-is-selected': selectedItem === item.name
+}"
+            @click="selectedItem = item.name"
+          >
+            <FragmentItem
+              v-show="visible === null || visible.includes(item.name)"
+              :name="item.name"
+              :label="item.label"
+              :description="item.description"
+              :index="index"
+            />
+          </li>
+        </ul>
       </div>
-      <ul class="bk-library-dialog-list">
-        <li
-          v-for="(item, index) in fragments"
-          :key="item.name"
-          :class="{
-            'bk-is-selected': selectedItem === item.name,
-          }"
-          @click="selectedItem = item.name"
-        >
-          <FragmentItem
-            v-show="visible === null || visible.includes(item.name)"
-            :name="item.name"
-            :label="item.label"
-            :description="item.description"
-            :index="index"
-          />
-        </li>
-      </ul>
     </div>
     <template #footer>
       <button class="bk-button bk-is-primary" @click="onSubmit">
@@ -56,82 +62,59 @@
   </FormOverlay>
 </template>
 
-<script setup lang="ts">
-import { FormOverlay } from '#blokkli/components'
-import { fragmentDefinitions } from '#blokkli/definitions'
-import { falsy } from '#blokkli/helpers'
-import type { BlokkliFieldElement } from '#blokkli/types'
-import { ref, useBlokkli, computed, watch } from '#imports'
-import FragmentItem from './Item/index.vue'
-
-const props = defineProps<{
-  field: BlokkliFieldElement
-}>()
-
-const { $t } = useBlokkli()
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'submit', uuid: string): void
-}>()
-
-const searchText = ref('')
-const listEl = ref<HTMLDivElement | null>(null)
-const selectedItem = ref('')
-
-const allowedInField = computed(() => props.field.allowedFragments || [])
-
-const fragments = computed(() =>
-  fragmentDefinitions.filter((v) => allowedInField.value.includes(v.name)),
-)
-
+<script setup>
+import { FormOverlay } from "#blokkli/components";
+import { falsy } from "#blokkli/helpers";
+import { ref, useBlokkli, computed, watch } from "#imports";
+import FragmentItem from "./Item/index.vue";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const { $t, definitions } = useBlokkli();
+const emit = defineEmits(["close", "submit"]);
+const searchText = ref("");
+const listEl = ref(null);
+const selectedItem = ref("");
+const allowedInField = computed(() => props.field.allowedFragments || []);
+const fragments = computed(
+  () => definitions.fragmentDefinitions.value.filter(
+    (v) => allowedInField.value.includes(v.name)
+  )
+);
 const onSubmit = () => {
   if (selectedItem.value) {
-    emit('submit', selectedItem.value)
+    emit("submit", selectedItem.value);
   }
-}
+};
 const onClose = () => {
-  emit('close')
-}
-
-type SearchElement = {
-  uuid: string
-  text: string
-}
-
-const elements = ref<SearchElement[]>([])
-
+  emit("close");
+};
+const elements = ref([]);
 const buildElements = () => {
   if (!listEl.value) {
-    return
+    return;
   }
-  elements.value = [...listEl.value.querySelectorAll('.bk-library-list-item')]
-    .map((el) => {
-      if (el instanceof HTMLElement) {
-        const uuid = el.dataset.libraryItemUuid
-        if (uuid) {
-          return {
-            uuid,
-            text: el.textContent?.toLowerCase() || '',
-          }
-        }
+  elements.value = [...listEl.value.querySelectorAll(".bk-library-list-item")].map((el) => {
+    if (el instanceof HTMLElement) {
+      const uuid = el.dataset.libraryItemUuid;
+      if (uuid) {
+        return {
+          uuid,
+          text: el.textContent?.toLowerCase() || ""
+        };
       }
-    })
-    .filter(falsy)
-}
-
+    }
+  }).filter(falsy);
+};
 watch(searchText, () => {
   if (!elements.value.length) {
-    buildElements()
+    buildElements();
   }
-})
-
-const visible = computed<string[] | null>(() => {
+});
+const visible = computed(() => {
   if (!searchText.value || !elements.value.length) {
-    return null
+    return null;
   }
-
-  return elements.value
-    .filter((v) => v.text.includes(searchText.value.toLowerCase()))
-    .map((v) => v.uuid)
-})
+  return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.uuid);
+});
 </script>

package/dist/runtime/components/Edit/Features/Fragments/Dialog/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/Fragments/index.vue

@@ -1,16 +1,16 @@
 <template>
   <PluginAddAction
     v-if="
-      adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
-    "
+  adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
+"
     type="fragment"
     :title="$t('fragmentsAddFragmentAction', 'Add fragment')"
     :description="
-      $t(
-        'fragmentsAddFragmentDescription',
-        '<p>Drag the icon into the page to add a fragment block.</p><p>Fragments are reusable blocks that always render the same content.</p>',
-      )
-    "
+  $t(
+    'fragmentsAddFragmentDescription',
+    '<p>Drag the icon into the page to add a fragment block.</p><p>Fragments are reusable blocks that always render the same content.</p>'
+  )
+"
     :disabled="!isEnabled"
     item-bundle="blokkli_fragment"
     icon="fragment"
@@ -30,57 +30,47 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { ref, useBlokkli, defineBlokkliFeature, computed } from '#imports'
-import { PluginAddAction } from '#blokkli/plugins'
-import FragmentsDialog from './Dialog/index.vue'
-import type { ActionPlacedEvent } from '#blokkli/types'
-
+<script setup>
+import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import { PluginAddAction } from "#blokkli/plugins";
+import FragmentsDialog from "./Dialog/index.vue";
 const { adapter } = defineBlokkliFeature({
-  id: 'fragments',
-  icon: 'fragment',
-  label: 'Fragments',
-  description: 'Provides way to add content fragments defined by the frontend.',
-  requiredAdapterMethods: ['fragmentsAddBlock'],
-})
-
-const { state, $t, types, selection, dom } = useBlokkli()
-
-const isEnabled = computed<boolean>(() => {
+  id: "fragments",
+  icon: "fragment",
+  label: "Fragments",
+  description: "Provides way to add content fragments defined by the frontend.",
+  requiredAdapterMethods: ["fragmentsAddBlock"]
+});
+const { state, $t, types, selection, dom } = useBlokkli();
+const isEnabled = computed(() => {
   if (selection.blocks.value.length === 1) {
-    const block = selection.blocks.value[0]
-    const field = dom.findField(block.hostUuid, block.hostFieldName)
-    return !!field?.allowedFragments.length
+    const block = selection.blocks.value[0];
+    const field = dom.findField(block.hostUuid, block.hostFieldName);
+    return !!field?.allowedFragments.length;
   }
-
-  return true
-})
-
-const placedAction = ref<ActionPlacedEvent | null>(null)
-
-const onAddFragment = async (name: string) => {
+  return true;
+});
+const placedAction = ref(null);
+const onAddFragment = async (name) => {
   if (!placedAction.value || !adapter.fragmentsAddBlock) {
-    return
+    return;
   }
-
-  await state.mutateWithLoadingState(() =>
-    adapter.fragmentsAddBlock({
+  await state.mutateWithLoadingState(
+    () => adapter.fragmentsAddBlock({
       name,
-      host: placedAction.value!.host,
-      preceedingUuid: placedAction.value!.preceedingUuid,
-    }),
-  )
-
-  placedAction.value = null
-}
-
-const isSupportedOnEntity = computed(() =>
-  types.generallyAvailableBundles.find((v) => v.id === 'blokkli_fragment'),
-)
+      host: placedAction.value.host,
+      preceedingUuid: placedAction.value.preceedingUuid
+    })
+  );
+  placedAction.value = null;
+};
+const isSupportedOnEntity = computed(
+  () => types.generallyAvailableBundles.find((v) => v.id === "blokkli_fragment")
+);
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Fragments',
-}
+  name: "Fragments"
+};
 </script>

package/dist/runtime/components/Edit/Features/Fragments/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/Features/Grid/index.vue

@@ -6,8 +6,8 @@
     :title-on="$t('gridShow', 'Show grid')"
     :title-off="$t('gridHide', 'Hide grid')"
     :tour-text="
-      $t('gridTourText', 'Display a layout grid overlay on top of the page.')
-    "
+  $t('gridTourText', 'Display a layout grid overlay on top of the page.')
+"
     key-code="G"
     icon="grid"
   >
@@ -15,26 +15,23 @@
   </PluginViewOption>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature } from '#imports'
-import { PluginViewOption } from '#blokkli/plugins'
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginViewOption } from "#blokkli/plugins";
 const { adapter } = defineBlokkliFeature({
-  id: 'grid',
-  label: 'Grid',
-  icon: 'grid',
-  requiredAdapterMethods: ['getGridMarkup'],
-  description: 'Provides a view option to render a grid.',
-  viewports: ['desktop'],
-})
-
-const gridMarkup = await Promise.resolve(adapter.getGridMarkup())
-
-const { $t } = useBlokkli()
+  id: "grid",
+  label: "Grid",
+  icon: "grid",
+  requiredAdapterMethods: ["getGridMarkup"],
+  description: "Provides a view option to render a grid.",
+  viewports: ["desktop"]
+});
+const gridMarkup = await Promise.resolve(adapter.getGridMarkup());
+const { $t } = useBlokkli();
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Grid',
-}
+  name: "Grid"
+};
 </script>

package/dist/runtime/components/Edit/Features/Grid/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/Features/Help/Shortcuts/index.vue

@@ -25,47 +25,36 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, computed } from '#imports'
-import { ShortcutIndicator } from '#blokkli/components'
-import type { KeyboardShortcut } from '#blokkli/types'
-
-type ShortcutGroup = {
-  group: string
-  shortcuts: KeyboardShortcut[]
-}
-
-const { keyboard, $t } = useBlokkli()
-
-const getGroupLabel = (key: string) => {
-  if (key === 'general') {
-    return $t('shortcutGroupGeneral', 'General')
-  } else if (key === 'blocks') {
-    return $t('shortcutGroupBlocks', 'Blocks')
-  } else if (key === 'ui') {
-    return $t('shortcutGroupUi', 'UI')
+<script setup>
+import { useBlokkli, computed } from "#imports";
+import { ShortcutIndicator } from "#blokkli/components";
+const { keyboard, $t } = useBlokkli();
+const getGroupLabel = (key) => {
+  if (key === "general") {
+    return $t("shortcutGroupGeneral", "General");
+  } else if (key === "blocks") {
+    return $t("shortcutGroupBlocks", "Blocks");
+  } else if (key === "ui") {
+    return $t("shortcutGroupUi", "UI");
   }
-
-  return key
-}
-
+  return key;
+};
 const groups = computed(() => {
   return Object.values(
-    keyboard.shortcuts.value.reduce<Record<string, ShortcutGroup>>((acc, v) => {
-      const group = getGroupLabel(v.shortcut.group || 'general')
+    keyboard.shortcuts.value.reduce((acc, v) => {
+      const group = getGroupLabel(v.shortcut.group || "general");
       if (!acc[group]) {
         acc[group] = {
           group,
-          shortcuts: [],
-        }
+          shortcuts: []
+        };
       }
-
-      acc[group].shortcuts.push(v.shortcut)
-      return acc
-    }, {}),
+      acc[group].shortcuts.push(v.shortcut);
+      return acc;
+    }, {})
   ).map((group) => {
-    group.shortcuts.sort((a, b) => a.code.localeCompare(b.code))
-    return group
-  })
-})
+    group.shortcuts.sort((a, b) => a.code.localeCompare(b.code));
+    return group;
+  });
+});
 </script>

package/dist/runtime/components/Edit/Features/Help/Shortcuts/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;