@blokkli/editor 1.0.0

package/dist/runtime/blokkliPlugins/ItemAction/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <Teleport to="#bk-blokkli-item-actions">
+    <button
+      ref="el"
+      :disabled="isDisabled"
+      :class="{ 'bk-is-active': active, 'bk-is-last': weight === 'last' }"
+      :style="weight !== 'last' ? { order: weight || 0 } : undefined"
+      @click.prevent.stop="onClick"
+    >
+      <slot name="icon">
+        <Icon v-if="icon" :name="icon" />
+      </slot>
+      <div class="bk-tooltip">
+        <span>{{ title }}</span>
+        <ShortcutIndicator
+          v-if="keyCode"
+          :meta="meta"
+          :label="title"
+          :key-code="keyCode"
+          group="blocks"
+          @pressed="onClick"
+        />
+      </div>
+    </button>
+  </Teleport>
+  <Teleport to="#bk-blokkli-item-actions-after">
+    <slot :items="selection.blocks.value" :uuids="uuids" />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, useBlokkli } from '#imports'
+
+import type { BlokkliIcon } from '#blokkli/icons'
+import { Icon, ShortcutIndicator } from '#blokkli/components'
+import type { DraggableExistingBlock } from '#blokkli/types'
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
+
+const { selection } = useBlokkli()
+
+const el = ref<HTMLElement | null>(null)
+
+const uuids = computed(() => selection.uuids.value)
+
+const props = defineProps<{
+  id: string
+  /**
+   * The title of the action.
+   */
+  title: string
+
+  /**
+   * Whether the action is disabled.
+   */
+  disabled?: boolean
+
+  /**
+   * Whether the button should be displayed in an active state (e.g. when it's a dropdown).
+   */
+  active?: boolean
+
+  /**
+   * The key code to use for the shortcut.
+   */
+  keyCode?: string
+
+  /**
+   * Wheter the shortcut needs the meta modifier key.
+   */
+  meta?: boolean
+
+  /**
+   * Whether the action supports multiple items.
+   */
+  multiple?: boolean
+
+  /**
+   * The weight, used for positioning the button.
+   */
+  weight?: number | string | 'last'
+
+  icon?: BlokkliIcon
+
+  tourText?: string
+}>()
+
+const isDisabled = computed(
+  () =>
+    props.disabled || (!props.multiple && selection.blocks.value.length > 1),
+)
+
+const emit = defineEmits<{
+  (e: 'click', items: DraggableExistingBlock[]): void
+}>()
+
+const onClick = () => {
+  if (isDisabled.value || !uuids.value.length) {
+    return
+  }
+
+  emit('click', selection.blocks.value)
+}
+
+defineCommands(() => ({
+  id: 'plugin:item_action:' + props.id,
+  group: 'selection',
+  label: props.title,
+  icon: props.icon,
+  disabled: props.disabled || !selection.blocks.value.length,
+  callback: onClick,
+}))
+
+defineTourItem(() => {
+  if (!props.tourText) {
+    return
+  }
+
+  return {
+    id: 'plugin:item_action:' + props.id,
+    title: props.title,
+    text: props.tourText,
+    element: () => el.value,
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PluginItemAction',
+}
+</script>

package/dist/runtime/blokkliPlugins/ItemDropdown/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <Teleport v-if="enabled" to="#bk-blokkli-item-actions-dropdown">
+    <div>
+      <h3>{{ title }}</h3>
+      <slot />
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli, onMounted, onBeforeUnmount } from '#imports'
+const props = defineProps<{
+  id: string
+  title: string
+  enabled: boolean
+}>()
+
+const { eventBus } = useBlokkli()
+
+const isRendering = computed(() => props.enabled)
+
+onMounted(() => {
+  eventBus.emit('plugin:mount', {
+    type: 'ItemDropdown',
+    id: props.id,
+    isRendering,
+  })
+})
+
+onBeforeUnmount(() => {
+  eventBus.emit('plugin:unmount', {
+    type: 'ItemDropdown',
+    id: props.id,
+  })
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PluginItemDropdown',
+}
+</script>

package/dist/runtime/blokkliPlugins/MenuButton/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <Teleport :to="to">
+    <button
+      :id="'bk-menu-list-button-' + id"
+      class="bk-menu-list-button"
+      :disabled="disabled"
+      :class="type ? 'bk-is-' + type : ''"
+      :style="{ order: weight || 0 }"
+      @click.prevent.stop="onClick"
+    >
+      <div class="bk-menu-list-icon">
+        <slot>
+          <Icon v-if="icon" :name="icon" />
+        </slot>
+      </div>
+      <strong>{{ title }}</strong>
+      <span>{{ description }}</span>
+    </button>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli } from '#imports'
+import type { BlokkliIcon } from '#blokkli/icons'
+import { Icon } from '#blokkli/components'
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+
+const props = defineProps<{
+  id: string
+  title: string
+  description: string
+  disabled?: boolean
+  icon?: BlokkliIcon
+  type?: 'success' | 'danger'
+  weight?: number
+  secondary?: boolean
+}>()
+
+const emit = defineEmits(['click'])
+
+const { ui } = useBlokkli()
+
+const to = computed(
+  () => `#bk-menu-${props.secondary ? 'secondary' : 'primary'}`,
+)
+
+function onClick() {
+  ui.menu.close()
+  emit('click')
+}
+
+const commandCallback = () => {
+  if (!props.disabled) {
+    emit('click')
+  }
+}
+
+defineCommands(() => {
+  return {
+    id: 'plugin:menu_button:' + props.id,
+    group: 'action',
+    label: props.title,
+    icon: props.icon,
+    disabled: props.disabled,
+    callback: commandCallback,
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PluginMenuButton',
+}
+</script>

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue

@@ -0,0 +1,334 @@
+<template>
+  <ViewportBlockingRect
+    :id="storageKey"
+    ref="el"
+    class="bk-sidebar-detached"
+    :class="{ 'bk-is-focused': focusedSidebar === id }"
+    :style="style"
+    tabindex="10"
+    @pointermove="onPointerMove"
+    @focus.capture="onFocus"
+  >
+    <div class="bk">
+      <div
+        class="bk-sidebar-title"
+        @mousedown.stop="onMouseDown($event, 'move')"
+      >
+        <slot name="icon">
+          <Icon v-if="icon" :name="icon" />
+        </slot>
+        <span>{{ title }}</span>
+        <button
+          @click.prevent.stop.capture="isMinimized = !isMinimized"
+          @mousedown.capture.stop
+        >
+          <Icon :name="isMinimized ? 'window-maximize' : 'window-minimize'" />
+        </button>
+        <button
+          @click.prevent.stop.capture="$emit('close')"
+          @mousedown.capture.stop
+        >
+          <Icon name="close" />
+        </button>
+      </div>
+    </div>
+    <div class="bk-sidebar-detached-inner" :style="innerStyle">
+      <slot :width="userWidth" :height="userHeight" />
+      <template v-if="!size && !isMinimized">
+        <div
+          class="bk-sidebar-detached-handle bk-is-bottom"
+          @mousedown.stop.prevent="onMouseDown($event, 'resize-bottom')"
+        />
+        <div
+          class="bk-sidebar-detached-handle bk-is-right"
+          @mousedown.stop.prevent="onMouseDown($event, 'resize-right')"
+        />
+        <div
+          class="bk-sidebar-detached-handle bk-is-bottom-right"
+          @mousedown.stop.prevent="onMouseDown($event, 'resize-bottom-right')"
+        />
+      </template>
+    </div>
+  </ViewportBlockingRect>
+</template>
+
+<script lang="ts" setup>
+import {
+  useBlokkli,
+  ref,
+  onBeforeUnmount,
+  computed,
+  watch,
+  useState,
+} from '#imports'
+import { Icon, ViewportBlockingRect } from '#blokkli/components'
+import type { BlokkliIcon } from '#blokkli/icons'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    title: string
+    icon: BlokkliIcon
+    minWidth?: number
+    minHeight?: number
+    size?: { width: number; height: number }
+    isLeft?: boolean
+  }>(),
+  {
+    minWidth: 300,
+    minHeight: 300,
+    size: undefined,
+  },
+)
+
+defineEmits(['close'])
+
+const { storage, ui, keyboard, selection } = useBlokkli()
+
+function onPointerMove(e: PointerEvent) {
+  if (keyboard.isPressingSpace.value || selection.isDragging.value) {
+    return
+  }
+
+  e.stopPropagation()
+}
+
+const BASE_Z = 190000
+
+const isMinimized = storage.use(
+  computed(() => 'sidebar:detached:minimized:' + props.id),
+  false,
+)
+const storageKey = computed(() => 'sidebar:detached:size:' + props.id)
+const focusedSidebar = storage.use('sidebar:focused', '')
+const zStorageKey = computed(() => 'sidebar:detached:zIndex:' + props.id)
+const globalZ = useState('blokkli:zIndex', () => BASE_Z)
+const z = storage.use(zStorageKey.value, BASE_Z)
+
+if (z.value > globalZ.value) {
+  globalZ.value = z.value
+}
+
+const offsetX = computed(() => {
+  if (
+    x.value + width.value >
+    ui.visibleViewport.value.x + ui.visibleViewport.value.width
+  ) {
+    return (
+      x.value +
+      width.value -
+      (ui.visibleViewport.value.x + ui.visibleViewport.value.width) +
+      15
+    )
+  } else if (x.value < ui.visibleViewport.value.x) {
+    return x.value - ui.visibleViewport.value.x - 15
+  }
+  return 0
+})
+
+const storedData = storage.use(storageKey, {
+  x: props.isLeft ? 0 : window.innerWidth - 360,
+  y: 50,
+  width: 360,
+  height: 520,
+  viewportWidth: 0,
+  viewportHeight: 0,
+})
+
+type MouseMode =
+  | 'move'
+  | 'resize-right'
+  | 'resize-bottom'
+  | 'resize-bottom-right'
+  | ''
+
+const isDragging = ref(false)
+const isResizing = ref(false)
+
+const mouseMode = ref<MouseMode>('')
+
+const x = ref(0)
+const y = ref(0)
+const userWidth = ref(storedData.value.width)
+const userHeight = ref(storedData.value.height)
+
+const width = computed(() => {
+  return props.size?.width || userWidth.value
+})
+
+const height = computed(() => {
+  return props.size?.height || userHeight.value
+})
+
+const headerHeight = computed(() => 40)
+
+const startMouseX = ref(0)
+const startMouseY = ref(0)
+
+const rootCursor = computed(() => {
+  switch (mouseMode.value) {
+    case 'resize-bottom-right':
+      return 'se-resize'
+    case 'resize-bottom':
+      return 'ns-resize'
+    case 'resize-right':
+      return 'ew-resize'
+    case 'move':
+      return 'move'
+  }
+
+  return ''
+})
+
+watch(rootCursor, (cursor) => {
+  document.documentElement.style.cursor = cursor
+})
+
+watch(mouseMode, (mode) => {
+  if (mode) {
+    document.documentElement.classList.add('bk-is-sidebar-interacting')
+  } else {
+    document.documentElement.classList.remove('bk-is-sidebar-interacting')
+  }
+})
+
+const updateStored = () => {
+  storedData.value = {
+    x: x.value,
+    y: y.value,
+    width: width.value,
+    height: height.value,
+    viewportWidth: window.innerWidth,
+    viewportHeight: window.innerHeight,
+  }
+}
+
+watch(
+  () => props.size,
+  () => {
+    updateStored()
+  },
+)
+
+const style = computed(() => {
+  return {
+    transform: `translate(${x.value - offsetX.value}px, ${y.value}px)`,
+    zIndex: z.value,
+  }
+})
+
+const innerStyle = computed(() => {
+  return {
+    width: (props.size?.width || width.value) + 'px',
+    height: isMinimized.value ? 0 : (props.size?.height || height.value) + 'px',
+  }
+})
+
+const onFocus = () => {
+  focusedSidebar.value = props.id
+  globalZ.value++
+  z.value = globalZ.value
+}
+
+const onMouseDown = (e: MouseEvent, mode: MouseMode) => {
+  mouseMode.value = mode
+  startMouseX.value = e.clientX
+  startMouseY.value = e.clientY
+
+  window.addEventListener('pointermove', onMouseMove, { capture: true })
+  window.addEventListener('pointerup', onMouseUp, { capture: true })
+}
+
+const setCoordinates = (newX: number, newY: number) => {
+  x.value = Math.min(
+    Math.max(newX, ui.visibleViewport.value.x),
+    ui.visibleViewport.value.width + ui.visibleViewport.value.x - width.value,
+  )
+  y.value = Math.min(
+    Math.max(newY, ui.visibleViewport.value.y),
+    ui.visibleViewport.value.y +
+      ui.visibleViewport.value.height -
+      headerHeight.value,
+  )
+}
+
+const setSizes = (newWidth?: number, newHeight?: number) => {
+  if (newWidth !== undefined) {
+    userWidth.value = Math.min(
+      Math.max(newWidth, props.minWidth),
+      window.innerWidth - 300,
+    )
+  }
+  if (newHeight !== undefined) {
+    userHeight.value = Math.min(
+      Math.max(newHeight, props.minHeight),
+      window.innerHeight - 50,
+    )
+  }
+}
+
+const onMouseMove = (e: MouseEvent) => {
+  if (mouseMode.value === 'move') {
+    setCoordinates(
+      storedData.value.x + e.clientX - startMouseX.value,
+      storedData.value.y + e.clientY - startMouseY.value,
+    )
+  } else if (mouseMode.value === 'resize-right') {
+    setSizes(storedData.value.width + e.clientX - startMouseX.value)
+  } else if (mouseMode.value === 'resize-bottom') {
+    setSizes(undefined, storedData.value.height + e.clientY - startMouseY.value)
+  } else if (mouseMode.value === 'resize-bottom-right') {
+    setSizes(
+      storedData.value.width + e.clientX - startMouseX.value,
+      storedData.value.height + e.clientY - startMouseY.value,
+    )
+  }
+}
+
+const onMouseUp = () => {
+  isDragging.value = false
+  isResizing.value = false
+  mouseMode.value = ''
+  window.removeEventListener('pointermove', onMouseMove, { capture: true })
+  window.removeEventListener('pointerup', onMouseUp, { capture: true })
+
+  updateStored()
+}
+
+const el = ref<HTMLDivElement | null>(null)
+
+const recalculatePositions = () => {
+  const storedViewportWidth =
+    storedData.value.viewportWidth || window.innerWidth
+  const storedViewportHeight =
+    storedData.value.viewportHeight || window.innerHeight
+  const diffWidth = window.innerWidth - storedViewportWidth + width.value
+  const diffHeight = window.innerHeight - storedViewportHeight
+
+  if (x.value > window.innerWidth / 2) {
+    setCoordinates(x.value + diffWidth, y.value + diffHeight)
+  } else {
+    setCoordinates(storedData.value.x, storedData.value.y)
+  }
+
+  storedData.value.viewportWidth = window.innerWidth
+  storedData.value.viewportHeight = window.innerHeight
+}
+
+recalculatePositions()
+
+watch(offsetX, () => {
+  updateStored()
+})
+
+onBlokkliEvent('ui:resized', () => {
+  recalculatePositions()
+  updateStored()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('pointermove', onMouseMove, { capture: true })
+  window.removeEventListener('pointerup', onMouseUp, { capture: true })
+})
+</script>