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

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

@@ -1,7 +1,7 @@
 <template>
   <PluginSidebar
     id="mobile-preview"
-    v-slot="{ width, height, isDetached }"
+    v-slot="{ width, height, isDetached, isResizing }"
     :title="$t('responsivePreviewTitle', 'Responsive Preview')"
     :tour-text="tourText"
     :disabled="!state.canEdit.value"
@@ -11,7 +11,7 @@
     icon="preview"
     region="left"
   >
-    <PreviewFrame :detached="isDetached">
+    <PreviewFrame :detached="isDetached" :is-resizing="isResizing">
       <button
         :disabled="!selectedViewport.canRotate"
         class="bk-is-rotate"
@@ -30,8 +30,7 @@
               <strong>{{ selectedViewport.label }}</strong>
               <div>
                 {{
-                  selectedViewport.subtitle ||
-                  buildViewportSubtitle(width, height)
+                  selectedViewport.subtitle || buildViewportSubtitle(width, height)
                 }}
               </div>
             </div>
@@ -62,157 +61,132 @@
   </PluginSidebar>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   computed,
   useBlokkli,
   defineBlokkliFeature,
-  watch,
-} from '#imports'
-import { PluginSidebar } from '#blokkli/plugins'
-import PreviewFrame from './Frame/index.vue'
-import { Icon } from '#blokkli/components'
-import type { BlokkliIcon } from '#blokkli-build/icons'
-
+  watch
+} from "#imports";
+import { PluginSidebar } from "#blokkli/plugins";
+import PreviewFrame from "./Frame/index.vue";
+import { Icon } from "#blokkli/components";
 defineBlokkliFeature({
-  id: 'responsive-preview',
-  icon: 'cellphone',
-  label: 'Responsive Preview',
-  viewports: ['desktop'],
-  description:
-    'Provides a responsive preview of the current edit state in an iframe.',
-})
-
-const { $t, storage, state } = useBlokkli()
-
-const selectedViewportId = storage.use('mobile-preview:viewport', 'iphone-se')
-const isRotated = storage.use('mobile-preview:rotated', false)
-const dropdownOpen = ref(false)
-
-watch(selectedViewportId, () => (dropdownOpen.value = false))
-
-type ViewportOption = {
-  label: string
-  subtitle?: string
-  id: string
-  width?: number
-  height?: number
-  icon: BlokkliIcon
-  canRotate?: boolean
-}
-
-const selectedViewport = computed<ViewportOption>(() => {
+  id: "responsive-preview",
+  icon: "cellphone",
+  label: "Responsive Preview",
+  viewports: ["desktop"],
+  description: "Provides a responsive preview of the current edit state in an iframe."
+});
+const { $t, storage, state } = useBlokkli();
+const selectedViewportId = storage.use("mobile-preview:viewport", "iphone-se");
+const isRotated = storage.use("mobile-preview:rotated", false);
+const dropdownOpen = ref(false);
+watch(selectedViewportId, () => dropdownOpen.value = false);
+const selectedViewport = computed(() => {
   const selected = viewportOptions.value.find(
-    (v) => v.id === selectedViewportId.value,
-  )
+    (v) => v.id === selectedViewportId.value
+  );
   if (!selected) {
-    return viewportOptions.value[0]
+    return viewportOptions.value[0];
   }
-  return selected
-})
-
+  return selected;
+});
 const size = computed(() => {
-  const w = selectedViewport.value?.width
-  const h = selectedViewport.value?.height
-  const rotate = isRotated.value && selectedViewport.value.canRotate
+  const w = selectedViewport.value?.width;
+  const h = selectedViewport.value?.height;
+  const rotate = isRotated.value && selectedViewport.value.canRotate;
   if (w && h) {
     return {
       width: rotate ? h : w,
-      height: (rotate ? w : h) + 50,
-    }
+      height: (rotate ? w : h) + 50
+    };
   }
-  return undefined
-})
-
-const buildViewportSubtitle = (
-  w?: number,
-  h?: number,
-  canRotate?: boolean,
-): string | undefined => {
+  return void 0;
+});
+const buildViewportSubtitle = (w, h, canRotate) => {
   if (w && h) {
     return [
-      isRotated.value && canRotate ? h : w,
-      isRotated.value && canRotate ? w : h,
-    ].join(' x ')
+      Math.round(isRotated.value && canRotate ? h : w),
+      Math.round(isRotated.value && canRotate ? w : h)
+    ].join(" x ");
   }
-}
-
-const viewportOptions = computed<ViewportOption[]>(() => {
+};
+const viewportOptions = computed(() => {
   return [
     {
-      label: $t('responsivePreviewCustomViewport', 'Custom'),
-      id: 'custom',
-      icon: 'resize',
+      label: $t("responsivePreviewCustomViewport", "Custom"),
+      id: "custom",
+      icon: "resize"
     },
     {
-      label: 'iPhone SE',
-      id: 'iphone-se',
+      label: "iPhone SE",
+      id: "iphone-se",
       width: 375,
       height: 667,
-      icon: 'cellphone',
-      canRotate: true,
+      icon: "cellphone",
+      canRotate: true
     },
     {
-      label: 'iPhone 15',
-      id: 'iphone-15',
+      label: "iPhone 15",
+      id: "iphone-15",
       width: 393,
       height: 852,
-      icon: 'cellphone',
-      canRotate: true,
+      icon: "cellphone",
+      canRotate: true
     },
     {
-      label: 'iPhone 15 Pro Max',
-      id: 'iphone-15-pro-max',
+      label: "iPhone 15 Pro Max",
+      id: "iphone-15-pro-max",
       width: 430,
       height: 932,
-      icon: 'cellphone',
-      canRotate: true,
+      icon: "cellphone",
+      canRotate: true
     },
     {
-      label: 'iPad Mini',
-      id: 'ipad-mini',
+      label: "iPad Mini",
+      id: "ipad-mini",
       width: 768,
       height: 1024,
-      icon: 'tablet',
-      canRotate: true,
+      icon: "tablet",
+      canRotate: true
     },
     {
       label: '13" Laptop',
-      id: '13-laptop',
+      id: "13-laptop",
       width: 1280,
       height: 800,
-      icon: 'laptop',
+      icon: "laptop"
     },
     {
       label: '24" Monitor',
-      id: '24-monitor',
+      id: "24-monitor",
       width: 1920,
       height: 1200,
-      icon: 'monitor',
-    },
+      icon: "monitor"
+    }
   ].map((option) => {
     return {
       ...option,
       subtitle: buildViewportSubtitle(
         option.width,
         option.height,
-        option.canRotate,
-      ),
-    } as ViewportOption
-  })
-})
-
-const tourText = computed(() =>
-  $t(
-    'responsivePreviewTourText',
-    `See how your changes look like on smaller screens, such as smartphones. Click on the "detach" button to be able to select additional viewport sizes.`,
-  ),
-)
+        option.canRotate
+      )
+    };
+  });
+});
+const tourText = computed(
+  () => $t(
+    "responsivePreviewTourText",
+    `See how your changes look like on smaller screens, such as smartphones. Click on the "detach" button to be able to select additional viewport sizes.`
+  )
+);
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'ResponsivePreview',
-}
+  name: "ResponsivePreview"
+};
 </script>

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

@@ -3,8 +3,8 @@
     id="revert"
     :title="$t('revertMenuTitle', 'Discard...')"
     :description="
-      $t('revertMenuDescription', 'Restore currently published state')
-    "
+  $t('revertMenuDescription', 'Restore currently published state')
+"
     icon="revert"
     type="danger"
     :disabled="!mutations.length || !canEdit"
@@ -18,11 +18,11 @@
         v-if="showConfirm"
         :title="$t('revertDialogTitle', 'Irrevocably discard changes')"
         :lead="
-          $t(
-            'revertDialogLead',
-            'This will delete all changes and restore the currently published state. This action cannot be undone.',
-          )
-        "
+  $t(
+    'revertDialogLead',
+    'This will delete all changes and restore the currently published state. This action cannot be undone.'
+  )
+"
         :submit-label="$t('revertDialogSubmit', 'Discard changes')"
         is-danger
         @submit="onSubmit"
@@ -32,37 +32,32 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, ref, defineBlokkliFeature } from '#imports'
-import { PluginMenuButton } from '#blokkli/plugins'
-import { DialogModal } from '#blokkli/components'
-
+<script setup>
+import { useBlokkli, ref, defineBlokkliFeature } from "#imports";
+import { PluginMenuButton } from "#blokkli/plugins";
+import { DialogModal } from "#blokkli/components";
 const { adapter } = defineBlokkliFeature({
-  id: 'revert',
-  icon: 'revert',
-  label: 'Revert',
-  requiredAdapterMethods: ['revertAllChanges'],
-  description:
-    'Provides a menu button to revert all changes done on the current entity.',
-})
-
-const { state, $t } = useBlokkli()
-const { mutations, canEdit, mutateWithLoadingState } = state
-
-const showConfirm = ref(false)
-
+  id: "revert",
+  icon: "revert",
+  label: "Revert",
+  requiredAdapterMethods: ["revertAllChanges"],
+  description: "Provides a menu button to revert all changes done on the current entity."
+});
+const { state, $t } = useBlokkli();
+const { mutations, canEdit, mutateWithLoadingState } = state;
+const showConfirm = ref(false);
 async function onSubmit() {
   await mutateWithLoadingState(
     () => adapter.revertAllChanges(),
-    $t('revertError', 'Changes could not be discarded.'),
-    $t('revertSuccess', 'All changes have been discarded.'),
-  )
-  showConfirm.value = false
+    $t("revertError", "Changes could not be discarded."),
+    $t("revertSuccess", "All changes have been discarded.")
+  );
+  showConfirm.value = false;
 }
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Revert',
-}
+  name: "Revert"
+};
 </script>

package/dist/runtime/components/Edit/Features/Revert/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/Search/Overlay/Results/Content/index.vue

@@ -48,118 +48,97 @@
       class="bk-search-no-results"
     >
       <Icon name="sad" />
-      <span>{{ $t('searchBoxNoResultsFound', 'No results found') }}</span>
+      <span>{{ $t("searchBoxNoResultsFound", "No results found") }}</span>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { watch, ref, useBlokkli, onMounted } from '#imports'
-import { ItemIcon, Icon, Sortli } from '#blokkli/components'
-import { buildDraggableItem, modulo } from '#blokkli/helpers'
-import type { SearchContentItem } from '#blokkli/types'
-
-const listItems = ref<HTMLLIElement[]>([])
-
-const props = defineProps<{
-  visible: boolean
-  search: string
-  tab: string
-}>()
-
-const itemsSearchTerm = ref('')
-const isLoading = ref(true)
-
-const emit = defineEmits(['close'])
-
-const { adapter, $t, eventBus } = useBlokkli()
-
-const items = ref<SearchContentItem[]>([])
-let timeout: any = null
-
+<script setup>
+import { watch, ref, useBlokkli, onMounted } from "#imports";
+import { ItemIcon, Icon, Sortli } from "#blokkli/components";
+import { buildDraggableItem, modulo } from "#blokkli/helpers";
+const listItems = ref([]);
+const props = defineProps({
+  visible: { type: Boolean, required: true },
+  search: { type: String, required: true },
+  tab: { type: String, required: true }
+});
+const itemsSearchTerm = ref("");
+const isLoading = ref(true);
+const emit = defineEmits(["close"]);
+const { adapter, $t, eventBus } = useBlokkli();
+const items = ref([]);
+let timeout = null;
 const doSearch = () => {
-  isLoading.value = false
-  const searchTerm = props.search
-  clearTimeout(timeout)
+  isLoading.value = false;
+  const searchTerm = props.search;
+  clearTimeout(timeout);
   if (!searchTerm) {
-    items.value = []
-    return
+    items.value = [];
+    return;
   }
   if (!props.visible) {
-    return
+    return;
   }
   if (searchTerm === itemsSearchTerm.value) {
-    return
+    return;
   }
-  isLoading.value = true
+  isLoading.value = true;
   timeout = setTimeout(() => {
-    // This component can only ever be rendered if this adapter method exists,
-    // so we can safely assume it's there.
-    adapter.getContentSearchResults!(props.tab, props.search).then(
-      (newItems: SearchContentItem[]) => {
-        items.value = newItems
-        itemsSearchTerm.value = searchTerm
-        isLoading.value = false
-      },
-    )
-  }, 200)
-}
-
-const index = ref(0)
-
-const prev = () => setIndex(index.value - 1)
-const next = () => setIndex(index.value + 1)
-const goToFirst = () => setIndex(0)
-const select = () => clickItem()
-const isActive = () => props.visible
-
-defineExpose({ prev, next, select, isActive, goToFirst })
-
-const setIndex = (newIndex: number) => {
-  index.value = modulo(newIndex, items.value.length)
-  scrollItemIntoView()
-}
-
+    adapter.getContentSearchResults(props.tab, props.search).then(
+      (newItems) => {
+        items.value = newItems;
+        itemsSearchTerm.value = searchTerm;
+        isLoading.value = false;
+      }
+    );
+  }, 200);
+};
+const index = ref(0);
+const prev = () => setIndex(index.value - 1);
+const next = () => setIndex(index.value + 1);
+const goToFirst = () => setIndex(0);
+const select = () => clickItem();
+const isActive = () => props.visible;
+defineExpose({ prev, next, select, isActive, goToFirst });
+const setIndex = (newIndex) => {
+  index.value = modulo(newIndex, items.value.length);
+  scrollItemIntoView();
+};
 const clickItem = () => {
-  // @TODO: Start dragging.
-  const element = listItems.value[index.value]
+  const element = listItems.value[index.value];
   if (!element) {
-    return
+    return;
   }
-  const item = buildDraggableItem(element)
+  const item = buildDraggableItem(element);
   if (!item) {
-    return
+    return;
   }
-  const rect = element.getBoundingClientRect()
-
-  eventBus.emit('dragging:start', {
+  const rect = element.getBoundingClientRect();
+  eventBus.emit("dragging:start", {
     items: [item],
     coords: {
       x: rect.x,
-      y: rect.y,
+      y: rect.y
     },
-    mode: 'mouse',
-  })
-  emit('close')
-}
-
+    mode: "mouse"
+  });
+  emit("close");
+};
 const scrollItemIntoView = () => {
-  const item = listItems.value[index.value]
+  const item = listItems.value[index.value];
   if (item) {
-    item.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    item.scrollIntoView({ block: "nearest", inline: "nearest" });
   }
-}
-
+};
 watch(items, () => {
-  index.value = 0
-  scrollItemIntoView()
-})
-
-watch(() => props.search, doSearch)
-watch(() => props.tab, doSearch)
-watch(() => props.visible, doSearch)
-
+  index.value = 0;
+  scrollItemIntoView();
+});
+watch(() => props.search, doSearch);
+watch(() => props.tab, doSearch);
+watch(() => props.visible, doSearch);
 onMounted(() => {
-  doSearch()
-})
+  doSearch();
+});
 </script>

package/dist/runtime/components/Edit/Features/Search/Overlay/Results/Content/index.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    visible: boolean;
+    search: string;
+    tab: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    prev: () => void;
+    next: () => void;
+    select: () => void;
+    isActive: () => boolean;
+    goToFirst: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;