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

package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue

@@ -1,145 +0,0 @@
-<template>
-  <div ref="el" class="bk-structure-field" :data-structure-field-key="key">
-    <button
-      v-if="totalFieldsOfType > 1"
-      class="bk-structure-field-label"
-      @click.prevent.stop.capture="onClickFieldLabel"
-    >
-      {{ config?.label || name }}
-    </button>
-    <div class="bk-structure-field-items">
-      <div
-        v-for="(item, index) in list"
-        :key="item.uuid"
-        class="bk-structure-field-item"
-      >
-        <div
-          v-if="
-  index === 0 && showTargets && !selection.isBlockSelected(item.uuid)
-"
-          :style="targetStyle"
-          class="bk-structure-field-target bk-is-before"
-          @pointerup.stop.capture="onMouseUp()"
-        />
-        <Item
-          :uuid="item.uuid"
-          :bundle="item.bundle"
-          :level="level"
-          :visible-field-keys="visibleFieldKeys"
-          :is-selected-from-parent="isSelectedFromParent"
-          :is-visible="isVisible"
-        />
-        <div
-          v-if="
-  showTargets && (!selection.isDraggingExisting.value || !selection.isBlockSelected(item.uuid)) && (!list[index + 1] || !selection.isDraggingExisting.value || !selection.isBlockSelected(list[index + 1].uuid))
-"
-          :style="targetStyle"
-          class="bk-structure-field-target bk-is-after"
-          @pointerup.stop.capture="onMouseUp(item.uuid)"
-        />
-      </div>
-      <div
-        v-if="!list.length && showTargets"
-        class="bk-structure-field-target bk-is-after"
-        :style="targetStyle"
-        @pointerup.stop.capture="onMouseUp()"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {
-  ref,
-  useBlokkli,
-  computed,
-  inject,
-  onMounted,
-  onBeforeUnmount,
-  nextTick
-} from "#imports";
-import Item from "./../Item/index.vue";
-const props = defineProps({
-  name: { type: String, required: true },
-  entityUuid: { type: String, required: true },
-  entityType: { type: String, required: true },
-  entityBundle: { type: String, required: true },
-  allowedBundles: { type: Array, required: true },
-  cardinality: { type: Number, required: true },
-  level: { type: Number, required: false, default: 0 },
-  visibleFieldKeys: { type: Object, required: true },
-  isSelectedFromParent: { type: Boolean, required: false }
-});
-const targetStyle = computed(() => {
-  return {
-    zIndex: 50 + props.level
-  };
-});
-const { types, state, selection, dom, eventBus } = useBlokkli();
-const mutatedField = computed(
-  () => state.getMutatedField(props.entityUuid, props.name)
-);
-const list = computed(() => mutatedField.value?.list || []);
-const key = computed(() => props.entityUuid + ":" + props.name);
-function onMouseUp(preceedingUuid) {
-  const field = dom.findField(props.entityUuid, props.name);
-  if (!field) {
-    return;
-  }
-  eventBus.emit("dragging:drop", {
-    field,
-    preceedingUuid,
-    items: selection.dragItems.value,
-    host: {
-      type: field.hostEntityType,
-      uuid: field.hostEntityUuid,
-      fieldName: field.name
-    }
-  });
-  const uuid = selection.uuids.value[0];
-  if (uuid) {
-    nextTick(() => {
-      eventBus.emit("scrollIntoView", { uuid, center: true });
-    });
-  }
-}
-function onClickFieldLabel() {
-  eventBus.emit(
-    "select",
-    list.value.map((v) => v.uuid)
-  );
-}
-const el = ref(null);
-const observer = inject("bk_structure_observer");
-const isVisible = computed(() => !!props.visibleFieldKeys[key.value]);
-const bundlesAllowed = computed(
-  () => selection.dragItemsBundles.value.every(
-    (bundle) => props.allowedBundles.includes(bundle)
-  )
-);
-const showTargets = computed(
-  () => selection.isDragging.value && isVisible.value && !props.isSelectedFromParent && (props.cardinality === -1 || list.value.length < props.cardinality) && bundlesAllowed.value
-);
-const config = computed(
-  () => types.getFieldConfig(props.entityType, props.entityBundle, props.name)
-);
-const totalFieldsOfType = computed(
-  () => types.fieldConfig.forEntityTypeAndBundle(
-    props.entityType,
-    props.entityBundle
-  ).length
-);
-onMounted(() => {
-  if (el.value && observer) {
-    observer.observe(el.value);
-  }
-});
-onBeforeUnmount(() => {
-  if (el.value && observer) {
-    observer.unobserve(el.value);
-  }
-});
-defineOptions({
-  name: "StructureListField"
-});
-</script>

package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue.d.ts

@@ -1,15 +0,0 @@
-type __VLS_Props = {
-    name: string;
-    entityUuid: string;
-    entityType: string;
-    entityBundle: string;
-    allowedBundles: string[];
-    cardinality: number;
-    level?: number;
-    visibleFieldKeys: Record<string, boolean>;
-    isSelectedFromParent?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    level: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Structure/List/Item/index.vue

@@ -1,121 +0,0 @@
-<template>
-  <div
-    class="bk-structure-item"
-    :class="{ 'bk-is-selected': isSelected }"
-    :bk-structure-uuid="uuid"
-    @pointerdown.stop.prevent="onMouseDown"
-  >
-    <button class="bk-structure-item-label">
-      <ItemIcon :bundle="bundle" :class="{ 'bk-is-selected': isSelected }" />
-      {{ type?.label || bundle }}
-    </button>
-    <List
-      :entity-uuid="uuid"
-      :entity-type="runtimeConfig.itemEntityType"
-      :entity-bundle="bundle"
-      :level="level + 1"
-      :visible-field-keys="visibleFieldKeys"
-      :is-selected-from-parent="isSelectedFromParent || isSelected"
-    />
-  </div>
-</template>
-
-<script setup>
-import { useBlokkli, computed, onBeforeUnmount } from "#imports";
-import List from "./../../List/index.vue";
-import { ItemIcon } from "#blokkli/components";
-import { falsy } from "#blokkli/helpers";
-const props = defineProps({
-  uuid: { type: String, required: true },
-  bundle: { type: String, required: true },
-  level: { type: Number, required: false, default: 0 },
-  visibleFieldKeys: { type: Object, required: true },
-  isVisible: { type: Boolean, required: true },
-  isSelectedFromParent: { type: Boolean, required: false }
-});
-function getRootEl() {
-  const rootEl = document.querySelector("#bk-structure");
-  if (!(rootEl instanceof HTMLElement)) {
-    throw new TypeError("Failed to locate root structure element.");
-  }
-  return rootEl;
-}
-const { runtimeConfig, types, selection, eventBus, state } = useBlokkli();
-const canMove = computed(() => state.editMode.value === "editing");
-const isSelected = computed(() => selection.uuids.value.includes(props.uuid));
-const type = computed(() => types.getBlockBundleDefinition(props.bundle));
-let isDragging = false;
-let startX = 0;
-let startY = 0;
-function onMouseUp(e) {
-  getRootEl().removeEventListener("pointermove", onMouseMove);
-  getRootEl().removeEventListener("pointerup", onMouseUp);
-  if (isDragging) {
-    isDragging = false;
-    return;
-  }
-  if (e.ctrlKey || e.metaKey) {
-    eventBus.emit("select:toggle", props.uuid);
-  } else {
-    eventBus.emit("select", props.uuid);
-    eventBus.emit("scrollIntoView", {
-      uuid: props.uuid,
-      immediate: true,
-      center: true
-    });
-  }
-}
-function buildDraggableItems() {
-  return selection.blocks.value.map((block) => {
-    const el = document.querySelector(`[bk-structure-uuid="${block.uuid}"]`);
-    if (!(el instanceof HTMLElement)) {
-      return null;
-    }
-    return {
-      itemType: "existing_structure",
-      uuid: block.uuid,
-      itemBundle: block.itemBundle,
-      element: function() {
-        return el;
-      }
-    };
-  }).filter(falsy);
-}
-function onMouseMove(e) {
-  if (!canMove.value) {
-    return;
-  }
-  const diff = Math.abs(startX - e.clientX) + Math.abs(startY - e.clientY);
-  if (diff > 10) {
-    getRootEl().removeEventListener("pointermove", onMouseMove);
-    getRootEl().removeEventListener("pointerup", onMouseUp);
-    isDragging = true;
-    startX = 0;
-    startY = 0;
-    if (!selection.uuids.value.includes(props.uuid)) {
-      eventBus.emit("select", props.uuid);
-    }
-    eventBus.emit("dragging:start", {
-      items: buildDraggableItems(),
-      coords: {
-        x: e.clientX,
-        y: e.clientY
-      },
-      mode: "mouse"
-    });
-  }
-}
-function onMouseDown(e) {
-  startX = e.clientX;
-  startY = e.clientY;
-  getRootEl().addEventListener("pointermove", onMouseMove);
-  getRootEl().addEventListener("pointerup", onMouseUp);
-}
-onBeforeUnmount(() => {
-  getRootEl().removeEventListener("pointermove", onMouseMove);
-  getRootEl().removeEventListener("pointerup", onMouseUp);
-});
-defineOptions({
-  name: "StructureListItem"
-});
-</script>

package/dist/runtime/components/Edit/Features/Structure/List/Item/index.vue.d.ts

@@ -1,12 +0,0 @@
-type __VLS_Props = {
-    uuid: string;
-    bundle: string;
-    level?: number;
-    visibleFieldKeys: Record<string, boolean>;
-    isVisible: boolean;
-    isSelectedFromParent?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    level: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,12 +0,0 @@
-type __VLS_Props = {
-    entityUuid: string;
-    entityType: string;
-    entityBundle: string;
-    visibleFieldKeys: Record<string, boolean>;
-    level?: number;
-    isSelectedFromParent?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    level: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,75 +0,0 @@
-<template>
-  <PluginSidebar
-    id="structure"
-    :title="$t('structureToolbarLabel', 'Structure')"
-    :tour-text="
-  $t(
-    'structureTourText',
-    'Shows a structured list of all blocks on the current page. Click on any block to quickly jump to it.'
-  )
-"
-    icon="tree"
-    weight="-90"
-  >
-    <ScrollBoundary
-      v-if="isLoaded"
-      id="bk-structure"
-      class="bk bk-structure bk-control"
-      dragging
-    >
-      <List
-        :entity-bundle="context.entityBundle"
-        :entity-type="context.entityType"
-        :entity-uuid="context.entityUuid"
-        :visible-field-keys="visibleFieldKeys"
-      />
-    </ScrollBoundary>
-  </PluginSidebar>
-</template>
-
-<script setup>
-import {
-  ref,
-  useBlokkli,
-  defineBlokkliFeature,
-  provide,
-  onBeforeUnmount,
-  onMounted,
-  reactive
-} from "#imports";
-import { PluginSidebar } from "#blokkli/plugins";
-import { ScrollBoundary } from "#blokkli/components";
-import List from "./List/index.vue";
-defineBlokkliFeature({
-  id: "structure",
-  icon: "tree",
-  label: "Structure",
-  description: "Provides a sidebar button to render a structured list of all blocks on the current page."
-});
-const { $t, context } = useBlokkli();
-const isLoaded = ref(false);
-const visibleFieldKeys = reactive({});
-const observer = new IntersectionObserver(function(entries) {
-  for (const entry of entries) {
-    if (entry.target instanceof HTMLElement) {
-      const key = entry.target.dataset.structureFieldKey;
-      if (key) {
-        visibleFieldKeys[key] = entry.isIntersecting;
-      }
-    }
-  }
-});
-provide("bk_structure_observer", observer);
-onMounted(() => {
-  isLoaded.value = true;
-});
-onBeforeUnmount(() => {
-  observer.disconnect();
-});
-</script>
-
-<script>
-export default {
-  name: "Structure"
-};
-</script>

package/dist/runtime/components/Edit/Features/Structure/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/Theme/Color/index.vue

@@ -1,60 +0,0 @@
-<template>
-  <tr>
-    <td class="bk-theme-editor-color-shade">{{ shade }}</td>
-    <td class="bk-theme-editor-color-hex">
-      <input v-model="inputValue" type="text" maxlength="7" />
-    </td>
-    <td class="bk-theme-editor-color-buttons">
-      <button
-        v-if="inputValue !== initValue"
-        @click.stop="inputValue = initValue"
-      >
-        <Icon name="revert" />
-      </button>
-    </td>
-    <td class="bk-theme-editor-color-color">
-      <input v-model.lazy="inputValue" type="color" :name="group + shade" />
-    </td>
-  </tr>
-</template>
-
-<script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
-import { theme as configTheme } from "#blokkli-build/config";
-const props = defineProps({
-  group: { type: String, required: true },
-  shade: { type: String, required: true }
-});
-const { theme } = useBlokkli();
-function rgbToHex(rgb) {
-  const toHex = (component) => {
-    const hexValue = component.toString(16);
-    return hexValue.length == 1 ? "0" + hexValue : hexValue;
-  };
-  const [r, g, b] = rgb;
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function hexToRgb(v) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(v);
-  return result ? [
-    Number.parseInt(result[1], 16),
-    Number.parseInt(result[2], 16),
-    Number.parseInt(result[3], 16)
-  ] : null;
-}
-const initValue = computed(
-  () => rgbToHex(configTheme[props.group][props.shade])
-);
-const inputValue = computed({
-  get() {
-    return rgbToHex(theme[props.group].value[props.shade]);
-  },
-  set(hex) {
-    const rgb = hexToRgb(hex);
-    if (rgb) {
-      theme.setColor(props.group, props.shade, rgb);
-    }
-  }
-});
-</script>

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

@@ -1,7 +0,0 @@
-import type { ThemeColorGroup, ThemeColorShade, ThemeContextColorGroup, ThemeContextColorShade } from '#blokkli/types/theme';
-type __VLS_Props = {
-    group: ThemeColorGroup | ThemeContextColorGroup;
-    shade: ThemeColorShade | ThemeContextColorShade;
-};
-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/Theme/GeneratedCode/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/Theme/index.vue

@@ -1,108 +0,0 @@
-<template>
-  <PluginSidebar
-    id="theme"
-    :title="$t('theme', 'Theme')"
-    :tour-text="
-  $t(
-    'themeTourText',
-    'Change the colors of the theme and generate a theme file.'
-  )
-"
-    icon="palette"
-    weight="-100"
-  >
-    <div class="bk bk-theme-editor bk-control" @wheel.capture.stop.passive>
-      <div class="bk-theme-editor-select">
-        <select v-model="selectedTheme">
-          <option v-for="option in themeOptions" :key="option" :value="option">
-            {{ option }}
-          </option>
-        </select>
-      </div>
-      <div :key="selectedThemeId" class="bk-theme-editor-groups">
-        <div v-for="group in groups" :key="group" class="bk-theme-editor-group">
-          <h2>{{ group }}</h2>
-          <table class="bk-theme-editor-table">
-            <Color
-              v-for="shade in shades"
-              :key="group + shade"
-              :group="group"
-              :shade="shade"
-            />
-          </table>
-        </div>
-
-        <div
-          v-for="group in contextGroups"
-          :key="group"
-          class="bk-theme-editor-group"
-        >
-          <h2>{{ group }}</h2>
-          <table class="bk-theme-editor-table">
-            <Color
-              v-for="shade in contextShades"
-              :key="group + shade"
-              :group="group"
-              :shade="shade"
-            />
-          </table>
-        </div>
-      </div>
-
-      <GeneratedCode />
-    </div>
-  </PluginSidebar>
-</template>
-
-<script setup>
-import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
-import { PluginSidebar } from "#blokkli/plugins";
-import Color from "./Color/index.vue";
-import GeneratedCode from "./GeneratedCode/index.vue";
-import { themes } from "#blokkli-build/config";
-defineBlokkliFeature({
-  id: "theme",
-  icon: "palette",
-  label: "Theme",
-  description: "Implements a theme editor."
-});
-const { $t, theme } = useBlokkli();
-const selectedThemeId = ref("custom");
-const selectedTheme = computed({
-  get() {
-    return selectedThemeId.value;
-  },
-  set(id) {
-    selectedThemeId.value = id;
-    theme.applyTheme(id);
-  }
-});
-const themeOptions = computed(() => ["custom", ...Object.keys(themes)]);
-const groups = ["accent", "mono"];
-const shades = [
-  "50",
-  "100",
-  "200",
-  "300",
-  "400",
-  "500",
-  "600",
-  "700",
-  "800",
-  "900",
-  "950"
-];
-const contextGroups = [
-  "teal",
-  "yellow",
-  "red",
-  "lime"
-];
-const contextShades = ["light", "normal", "dark"];
-</script>
-
-<script>
-export default {
-  name: "Theme"
-};
-</script>

package/dist/runtime/components/Edit/Features/Theme/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/TouchActionBar/Bar/index.vue.d.ts

@@ -1,12 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    label: string;
-    danger?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{
-    label: string;
-    danger?: boolean;
-}> & Readonly<{
-    onClick?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,39 +0,0 @@
-<template>
-  <Teleport to="body">
-    <Transition name="bk-touch-bar">
-      <Bar
-        v-if="
-  selection.isMultiSelecting.value && selection.interactionMode.value === 'touch'
-"
-        :label="$t('touchBarFinishSelecting', 'Finish selecting')"
-        @click="eventBus.emit('select:end', [...selection.uuids.value])"
-      />
-      <Bar
-        v-else-if="
-  selection.isDragging.value && selection.draggingMode.value === 'touch'
-"
-        :label="$t('touchBarCancelDragging', 'Cancel dragging')"
-        danger
-        @click="eventBus.emit('dragging:end')"
-      />
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
-import Bar from "./Bar/index.vue";
-const { eventBus, selection, $t } = useBlokkli();
-defineBlokkliFeature({
-  id: "touch-action-bar",
-  label: "Touch Action Bar",
-  description: "Renders a button on touch devices to cancel touch actions.",
-  icon: "button-pointer"
-});
-</script>
-
-<script>
-export default {
-  name: "TouchActionBarBar"
-};
-</script>

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