@blokkli/editor 1.0.0

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="bk-preview">
+    <div v-if="isLoading" class="bk-preview-loading">
+      <Icon name="spinner" />
+    </div>
+    <div v-if="detached" class="bk-preview-controls">
+      <slot />
+    </div>
+    <div class="bk-preview-iframe">
+      <iframe ref="iframe" :src="src" @load="isLoading = false" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+  useRoute,
+  watch,
+} from '#imports'
+import { Icon } from '#blokkli/components'
+import { frameEventBus } from './../../../../../helpers/frameEventBus'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+defineProps<{
+  detached?: boolean
+}>()
+
+const route = useRoute()
+
+const { selection, broadcast } = useBlokkli()
+
+watch(selection.uuids, (selectedUuids) => {
+  frameEventBus.emit('selectItems', selectedUuids)
+})
+
+const isLoading = ref(true)
+const iframe = ref<HTMLIFrameElement | null>(null)
+
+const src = computed(() =>
+  route.fullPath.replace('blokkliEditing', 'blokkliPreview'),
+)
+
+onBlokkliEvent('updateMutatedFields', (e) =>
+  frameEventBus.emit('mutatedFields', e.fields),
+)
+onBlokkliEvent('select', (uuids) => {
+  const uuid = Array.isArray(uuids) ? uuids[0] : uuids
+  frameEventBus.emit('focus', uuid)
+})
+onBlokkliEvent('option:update', (e) => frameEventBus.emit('updateOption', e))
+
+/**
+ * Emit the event to the iframe.
+ */
+const onFrameEventBusEvent = (name: any, data: any) =>
+  iframe.value?.contentWindow?.postMessage({
+    name: 'blokkli__' + name,
+    data: JSON.parse(JSON.stringify(data)),
+  })
+
+const onPreviewFocused = () => {
+  if (iframe.value) {
+    iframe.value.focus()
+  }
+}
+
+onMounted(() => {
+  frameEventBus.on('*', onFrameEventBusEvent)
+  broadcast.on('previewFocused', onPreviewFocused)
+})
+
+onBeforeUnmount(() => {
+  frameEventBus.off('*', onFrameEventBusEvent)
+  broadcast.off('previewFocused', onPreviewFocused)
+})
+</script>

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

@@ -0,0 +1,217 @@
+<template>
+  <PluginSidebar
+    id="mobile-preview"
+    v-slot="{ width, height, isDetached }"
+    :title="$t('responsivePreviewTitle', 'Responsive Preview')"
+    :tour-text="tourText"
+    :min-width="375"
+    :min-height="375"
+    :size="size"
+    icon="preview"
+    region="left"
+  >
+    <PreviewFrame :detached="isDetached">
+      <button
+        :disabled="!selectedViewport.canRotate"
+        class="bk-is-rotate"
+        @click="isRotated = !isRotated"
+      >
+        <Icon name="rotate-phone" />
+      </button>
+      <div class="bk-dropdown">
+        <button
+          :class="{ 'bk-is-open': dropdownOpen }"
+          @click="dropdownOpen = !dropdownOpen"
+        >
+          <div class="bk-preview-viewport-option">
+            <Icon :name="selectedViewport.icon" />
+            <div>
+              <strong>{{ selectedViewport.label }}</strong>
+              <div>
+                {{
+                  selectedViewport.subtitle ||
+                  buildViewportSubtitle(width, height)
+                }}
+              </div>
+            </div>
+          </div>
+          <Icon name="caret" />
+        </button>
+        <div v-show="dropdownOpen" class="bk-dropdown-content">
+          <label v-for="option in viewportOptions" :key="option.id">
+            <input
+              v-model="selectedViewportId"
+              type="radio"
+              name="responsive-preview-viewport"
+              :value="option.id"
+            />
+            <div class="bk-preview-viewport-option">
+              <Icon :name="option.icon" />
+              <div>
+                <strong>{{ option.label }}</strong>
+                <div>
+                  {{ option.subtitle || buildViewportSubtitle(width, height) }}
+                </div>
+              </div>
+            </div>
+          </label>
+        </div>
+      </div>
+    </PreviewFrame>
+  </PluginSidebar>
+</template>
+
+<script lang="ts" 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/icons'
+
+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 } = 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>(() => {
+  const selected = viewportOptions.value.find(
+    (v) => v.id === selectedViewportId.value,
+  )
+  if (!selected) {
+    return viewportOptions.value[0]
+  }
+  return selected
+})
+
+const size = computed(() => {
+  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,
+    }
+  }
+  return undefined
+})
+
+const buildViewportSubtitle = (
+  w?: number,
+  h?: number,
+  canRotate?: boolean,
+): string | undefined => {
+  if (w && h) {
+    return [
+      isRotated.value && canRotate ? h : w,
+      isRotated.value && canRotate ? w : h,
+    ].join(' x ')
+  }
+}
+
+const viewportOptions = computed<ViewportOption[]>(() => {
+  return [
+    {
+      label: $t('responsivePreviewCustomViewport', 'Custom'),
+      id: 'custom',
+      icon: 'resize',
+    },
+    {
+      label: 'iPhone SE',
+      id: 'iphone-se',
+      width: 375,
+      height: 667,
+      icon: 'cellphone',
+      canRotate: true,
+    },
+    {
+      label: 'iPhone 15',
+      id: 'iphone-15',
+      width: 393,
+      height: 852,
+      icon: 'cellphone',
+      canRotate: true,
+    },
+    {
+      label: 'iPhone 15 Pro Max',
+      id: 'iphone-15-pro-max',
+      width: 430,
+      height: 932,
+      icon: 'cellphone',
+      canRotate: true,
+    },
+    {
+      label: 'iPad Mini',
+      id: 'ipad-mini',
+      width: 768,
+      height: 1024,
+      icon: 'tablet',
+      canRotate: true,
+    },
+    {
+      label: '13" Laptop',
+      id: '13-laptop',
+      width: 1280,
+      height: 800,
+      icon: 'laptop',
+    },
+    {
+      label: '24" Monitor',
+      id: '24-monitor',
+      width: 1920,
+      height: 1200,
+      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.`,
+  ),
+)
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ResponsivePreview',
+}
+</script>

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

@@ -0,0 +1,68 @@
+<template>
+  <PluginMenuButton
+    id="revert"
+    :title="$t('revertMenuTitle', 'Discard...')"
+    :description="
+      $t('revertMenuDescription', 'Restore currently published state')
+    "
+    icon="revert"
+    type="danger"
+    :disabled="!mutations.length || !canEdit"
+    :weight="10"
+    @click="showConfirm = true"
+  />
+
+  <Teleport to="body">
+    <transition appear name="bk-slide-up">
+      <DialogModal
+        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.',
+          )
+        "
+        :submit-label="$t('revertDialogSubmit', 'Discard changes')"
+        is-danger
+        @submit="onSubmit"
+        @cancel="showConfirm = false"
+      />
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" 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)
+
+async function onSubmit() {
+  await mutateWithLoadingState(
+    () => adapter.revertAllChanges(),
+    $t('revertError', 'Changes could not be discarded.'),
+    $t('revertSuccess', 'All changes have been discarded.'),
+  )
+  showConfirm.value = false
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Revert',
+}
+</script>

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

@@ -0,0 +1,165 @@
+<template>
+  <div v-show="visible">
+    <div v-if="visible && isLoading" class="bk-search-loading">
+      <Icon name="spinner" />
+    </div>
+    <div :class="{ 'bk-search-is-loading': isLoading }">
+      <Sortli no-transition>
+        <button
+          v-for="(item, i) in items"
+          :key="tab + item.id"
+          ref="listItems"
+          data-element-type="search_content"
+          class="bk bk-search-item bk-is-content"
+          :class="{ 'bk-is-active': i === index }"
+          :data-sortli-id="'search_' + tab + i"
+          :data-search-item="JSON.stringify(item)"
+          @mouseenter="index = i"
+        >
+          <div
+            class="bk-search-item-icon"
+            :class="{ 'bk-is-image': item.imageUrl }"
+          >
+            <img v-if="item.imageUrl" :src="item.imageUrl" />
+            <ItemIcon v-else :bundle="item.targetBundles[0]" />
+          </div>
+          <div class="bk-search-item-content">
+            <div
+              class="bk-search-item-title bk-highlight"
+              v-html="item.title"
+            />
+            <div class="bk-search-item-subtitle">
+              <div
+                v-if="item.context"
+                class="bk-search-item-context"
+                v-html="item.context"
+              />
+              <div
+                class="bk-search-item-text bk-highlight"
+                v-html="item.text"
+              />
+            </div>
+          </div>
+        </button>
+      </Sortli>
+    </div>
+    <div
+      v-if="!isLoading && !items.length && search"
+      class="bk-search-no-results"
+    >
+      <Icon name="sad" />
+      <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
+
+const doSearch = () => {
+  isLoading.value = false
+  const searchTerm = props.search
+  clearTimeout(timeout)
+  if (!searchTerm) {
+    items.value = []
+    return
+  }
+  if (!props.visible) {
+    return
+  }
+  if (searchTerm === itemsSearchTerm.value) {
+    return
+  }
+  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) => {
+        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()
+}
+
+const clickItem = () => {
+  // @TODO: Start dragging.
+  const element = listItems.value[index.value]
+  if (!element) {
+    return
+  }
+  const item = buildDraggableItem(element)
+  if (!item) {
+    return
+  }
+  const rect = element.getBoundingClientRect()
+
+  eventBus.emit('dragging:start', {
+    items: [item],
+    coords: {
+      x: rect.x,
+      y: rect.y,
+    },
+    mode: 'mouse',
+  })
+  emit('close')
+}
+
+const scrollItemIntoView = () => {
+  const item = listItems.value[index.value]
+  if (item) {
+    item.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }
+}
+
+watch(items, () => {
+  index.value = 0
+  scrollItemIntoView()
+})
+
+watch(() => props.search, doSearch)
+watch(() => props.tab, doSearch)
+watch(() => props.visible, doSearch)
+
+onMounted(() => {
+  doSearch()
+})
+</script>