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

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

@@ -20,130 +20,102 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { useBlokkli, computed, onBeforeUnmount } from '#imports'
-import List from './../../List/index.vue'
-import { ItemIcon } from '#blokkli/components'
-import type { DraggableExistingStructureBlock } from '#blokkli/types'
-import { falsy } from '#blokkli/helpers'
-
-const props = withDefaults(
-  defineProps<{
-    uuid: string
-    bundle: string
-    level?: number
-    visibleFieldKeys: Record<string, boolean>
-    isVisible: boolean
-    isSelectedFromParent?: boolean
-  }>(),
-  {
-    level: 0,
-  },
-)
-
-function getRootEl(): HTMLElement {
-  const rootEl = document.querySelector('#bk-structure')
-
+<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.')
+    throw new TypeError("Failed to locate root structure element.");
   }
-
-  return rootEl
+  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: MouseEvent) {
-  getRootEl().removeEventListener('pointermove', onMouseMove)
-  getRootEl().removeEventListener('pointerup', onMouseUp)
+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
+    isDragging = false;
+    return;
   }
   if (e.ctrlKey || e.metaKey) {
-    eventBus.emit('select:toggle', props.uuid)
+    eventBus.emit("select:toggle", props.uuid);
   } else {
-    eventBus.emit('select', props.uuid)
-    eventBus.emit('scrollIntoView', {
+    eventBus.emit("select", props.uuid);
+    eventBus.emit("scrollIntoView", {
       uuid: props.uuid,
       immediate: true,
-      center: true,
-    })
+      center: true
+    });
   }
 }
-
-function buildDraggableItems(): DraggableExistingStructureBlock[] {
-  return selection.blocks.value
-    .map<DraggableExistingStructureBlock | null>((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
-        },
+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)
+    };
+  }).filter(falsy);
 }
-
-function onMouseMove(e: MouseEvent) {
+function onMouseMove(e) {
   if (!canMove.value) {
-    return
+    return;
   }
-  const diff = Math.abs(startX - e.clientX) + Math.abs(startY - e.clientY)
-
+  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
-
-    // The user has started dragging a block that is not yet selected.
+    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("select", props.uuid);
     }
-
-    eventBus.emit('dragging:start', {
+    eventBus.emit("dragging:start", {
       items: buildDraggableItems(),
       coords: {
         x: e.clientX,
-        y: e.clientY,
+        y: e.clientY
       },
-      mode: 'mouse',
-    })
+      mode: "mouse"
+    });
   }
 }
-
-function onMouseDown(e: MouseEvent) {
-  startX = e.clientX
-  startY = e.clientY
-
-  getRootEl().addEventListener('pointermove', onMouseMove)
-  getRootEl().addEventListener('pointerup', onMouseUp)
+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)
-})
-
+  getRootEl().removeEventListener("pointermove", onMouseMove);
+  getRootEl().removeEventListener("pointerup", onMouseUp);
+});
 defineOptions({
-  name: 'StructureListItem',
-})
+  name: "StructureListItem"
+});
 </script>

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

@@ -0,0 +1,12 @@
+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

@@ -22,34 +22,25 @@
   </ul>
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli } from '#imports'
-import Field from './Field/index.vue'
-
-const props = withDefaults(
-  defineProps<{
-    entityUuid: string
-    entityType: string
-    entityBundle: string
-    visibleFieldKeys: Record<string, boolean>
-    level?: number
-    isSelectedFromParent?: boolean
-  }>(),
-  {
-    level: 0,
-  },
-)
-
-const { types } = useBlokkli()
-
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import Field from "./Field/index.vue";
+const props = defineProps({
+  entityUuid: { type: String, required: true },
+  entityType: { type: String, required: true },
+  entityBundle: { type: String, required: true },
+  visibleFieldKeys: { type: Object, required: true },
+  level: { type: Number, required: false, default: 0 },
+  isSelectedFromParent: { type: Boolean, required: false }
+});
+const { types } = useBlokkli();
 const fields = computed(() => {
   return types.fieldConfig.forEntityTypeAndBundle(
     props.entityType,
-    props.entityBundle,
-  )
-})
-
+    props.entityBundle
+  );
+});
 defineOptions({
-  name: 'StructureList',
-})
+  name: "StructureList"
+});
 </script>

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

@@ -0,0 +1,12 @@
+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

@@ -3,11 +3,11 @@
     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.',
-      )
-    "
+  $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"
   >
@@ -27,7 +27,7 @@
   </PluginSidebar>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   useBlokkli,
@@ -35,50 +35,41 @@ import {
   provide,
   onBeforeUnmount,
   onMounted,
-  reactive,
-} from '#imports'
-import { PluginSidebar } from '#blokkli/plugins'
-import { ScrollBoundary } from '#blokkli/components'
-import List from './List/index.vue'
-
+  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<Record<string, boolean>>({})
-
-const observer = new IntersectionObserver(function (entries) {
+  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
+      const key = entry.target.dataset.structureFieldKey;
       if (key) {
-        visibleFieldKeys[key] = entry.isIntersecting
+        visibleFieldKeys[key] = entry.isIntersecting;
       }
     }
   }
-})
-
-provide('bk_structure_observer', observer)
-
+});
+provide("bk_structure_observer", observer);
 onMounted(() => {
-  isLoaded.value = true
-})
-
+  isLoaded.value = true;
+});
 onBeforeUnmount(() => {
-  observer.disconnect()
-})
+  observer.disconnect();
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Structure',
-}
+  name: "Structure"
+};
 </script>

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

@@ -18,64 +18,43 @@
   </tr>
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli } from '#imports'
-import { Icon } from '#blokkli/components'
-import { theme as configTheme } from '#blokkli-build/config'
-import type {
-  RGB,
-  ThemeColorGroup,
-  ThemeColorShade,
-  ThemeContextColorGroup,
-  ThemeContextColorShade,
-} from '#blokkli/types/theme'
-
-const props = defineProps<{
-  group: ThemeColorGroup | ThemeContextColorGroup
-  shade: ThemeColorShade | ThemeContextColorShade
-}>()
-
-const { theme } = useBlokkli()
-
-function rgbToHex(rgb: RGB): string {
-  // Helper function to convert a single RGB component to a two-digit hexadecimal string
-  const toHex = (component: number): string => {
-    const hexValue = component.toString(16)
-    return hexValue.length == 1 ? '0' + hexValue : hexValue
-  }
-
-  // Destructuring the RGB components from the input array
-  const [r, g, b] = rgb
-
-  // Converting each component to hex and concatenating them
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+<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: string): RGB | null {
-  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
+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 as any)[props.group][props.shade]),
-)
-
+const initValue = computed(
+  () => rgbToHex(configTheme[props.group][props.shade])
+);
 const inputValue = computed({
   get() {
-    return rgbToHex((theme as any)[props.group].value[props.shade])
+    return rgbToHex(theme[props.group].value[props.shade]);
   },
-
-  set(hex: string) {
-    const rgb = hexToRgb(hex)
+  set(hex) {
+    const rgb = hexToRgb(hex);
     if (rgb) {
-      theme.setColor(props.group, props.shade, rgb)
+      theme.setColor(props.group, props.shade, rgb);
     }
-  },
-})
+  }
+});
 </script>

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

@@ -0,0 +1,7 @@
+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

@@ -4,11 +4,9 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { useBlokkli, computed } from '#imports'
-
-const { theme } = useBlokkli()
-
+<script setup>
+import { useBlokkli, computed } from "#imports";
+const { theme } = useBlokkli();
 const code = computed(() => {
   const obj = {
     accent: theme.accent.value,
@@ -16,9 +14,8 @@ const code = computed(() => {
     teal: theme.teal.value,
     yellow: theme.yellow.value,
     red: theme.red.value,
-    lime: theme.lime.value,
-  }
-
-  return JSON.stringify(obj, null, 2)
-})
+    lime: theme.lime.value
+  };
+  return JSON.stringify(obj, null, 2);
+});
 </script>

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

@@ -3,11 +3,11 @@
     id="theme"
     :title="$t('theme', 'Theme')"
     :tour-text="
-      $t(
-        'themeTourText',
-        'Change the colors of the theme and generate a theme file.',
-      )
-    "
+  $t(
+    'themeTourText',
+    'Change the colors of the theme and generate a theme file.'
+  )
+"
     icon="palette"
     weight="-100"
   >
@@ -54,69 +54,55 @@
   </PluginSidebar>
 </template>
 
-<script lang="ts" 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 type {
-  ThemeColorGroup,
-  ThemeColorShade,
-  ThemeContextColorGroup,
-  ThemeContextColorShade,
-} from '#blokkli/types/theme'
-
-import { themes } from '#blokkli-build/config'
-
+<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')
-
+  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
+    return selectedThemeId.value;
   },
-  set(id: any) {
-    selectedThemeId.value = id
-    theme.applyTheme(id)
-  },
-})
-
-const themeOptions = computed(() => ['custom', ...Object.keys(themes)])
-
-const groups: ThemeColorGroup[] = ['accent', 'mono']
-const shades: ThemeColorShade[] = [
-  '50',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-  '950',
-]
-
-const contextGroups: ThemeContextColorGroup[] = [
-  'teal',
-  'yellow',
-  'red',
-  'lime',
-]
-const contextShades: ThemeContextColorShade[] = ['light', 'normal', 'dark']
+  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 lang="ts">
+<script>
 export default {
-  name: 'Theme',
-}
+  name: "Theme"
+};
 </script>

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