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

package/dist/runtime/components/Edit/Features/Validations/Overlay/Item.vue

@@ -4,47 +4,33 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { useBlokkli, ref, computed } from '#imports'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import type { Rectangle } from '#blokkli/types'
-
-const { dom } = useBlokkli()
-
-const props = defineProps<{
-  uuid: string
-  messages: string[]
-}>()
-
-const rect = ref<Rectangle | null>(null)
-
+<script setup>
+import { useBlokkli, ref, computed } from "#imports";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const { dom } = useBlokkli();
+const props = defineProps({
+  uuid: { type: String, required: true },
+  messages: { type: Array, required: true }
+});
+const rect = ref(null);
 const style = computed(() => {
   if (!rect.value) {
-    return
+    return;
   }
-
   return {
     transform: `translate(${rect.value.x}px, ${rect.value.y}px)`,
-    width: rect.value.width + 'px',
-    height: rect.value.height + 'px',
-  }
-})
-
-onBlokkliEvent('canvas:draw', () => {
-  const newRect = dom.getBlockRect(props.uuid)
+    width: rect.value.width + "px",
+    height: rect.value.height + "px"
+  };
+});
+onBlokkliEvent("canvas:draw", () => {
+  const newRect = dom.getBlockRect(props.uuid);
   if (!newRect) {
-    return
+    return;
   }
-
-  if (
-    newRect.width === rect.value?.width &&
-    newRect.height === rect.value.height &&
-    newRect.x === rect.value.x &&
-    newRect.y === rect.value.y
-  ) {
-    return
+  if (newRect.width === rect.value?.width && newRect.height === rect.value.height && newRect.x === rect.value.x && newRect.y === rect.value.y) {
+    return;
   }
-
-  rect.value = newRect
-})
+  rect.value = newRect;
+});
 </script>

package/dist/runtime/components/Edit/Features/Validations/Overlay/Item.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    uuid: string;
+    messages: string[];
+};
+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/Validations/Overlay/index.vue

@@ -6,46 +6,37 @@
   </Teleport>
 </template>
 
-<script setup lang="ts">
-import { falsy } from '#blokkli/helpers'
-import type { Validation } from '#blokkli/types'
-import { useBlokkli, computed } from '#imports'
-import OverlayItem from './Item.vue'
-
-const props = defineProps<{
-  validations: Validation[]
-}>()
-
-const { runtimeConfig } = useBlokkli()
-
-const items = computed(() =>
-  Object.entries(
-    props.validations
-      .map((v) => {
-        if (v.entityType === runtimeConfig.itemEntityType && v.entityUuid) {
-          return {
-            uuid: v.entityUuid,
-            message: v.message,
-          }
-        }
-
-        return null
-      })
-      .filter(falsy)
-      .reduce<Record<string, string[]>>((acc, v) => {
-        if (!acc[v.uuid]) {
-          acc[v.uuid] = []
-        }
-
-        acc[v.uuid].push(v.message)
-
-        return acc
-      }, {}),
+<script setup>
+import { falsy } from "#blokkli/helpers";
+import { useBlokkli, computed } from "#imports";
+import OverlayItem from "./Item.vue";
+const props = defineProps({
+  validations: { type: Array, required: true }
+});
+const { runtimeConfig } = useBlokkli();
+const items = computed(
+  () => Object.entries(
+    props.validations.map((v) => {
+      if (v.entityType === runtimeConfig.itemEntityType && v.entityUuid) {
+        return {
+          uuid: v.entityUuid,
+          message: v.message
+        };
+      }
+      return null;
+    }).filter(falsy).reduce((acc, v) => {
+      if (!acc[v.uuid]) {
+        acc[v.uuid] = [v.message];
+      } else {
+        acc[v.uuid].push(v.message);
+      }
+      return acc;
+    }, {})
   ).map((v) => {
     return {
       uuid: v[0],
-      messages: v[1],
-    }
-  }),
-)
+      messages: v[1]
+    };
+  })
+);
 </script>

package/dist/runtime/components/Edit/Features/Validations/Overlay/index.vue.d.ts

@@ -0,0 +1,6 @@
+import type { Validation } from '#blokkli/types';
+type __VLS_Props = {
+    validations: Validation[];
+};
+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/Validations/SidebarItem/index.vue

@@ -8,43 +8,35 @@
   </button>
 </template>
 
-<script setup lang="ts">
-import { useBlokkli, computed } from '#imports'
-import { ItemIcon } from '#blokkli/components'
-
-const props = defineProps<{
-  message: string
-  propertyPath?: string
-  code?: string
-  entityType?: string
-  entityUuid?: string
-}>()
-
-const { runtimeConfig, eventBus, dom, types } = useBlokkli()
-
+<script setup>
+import { useBlokkli, computed } from "#imports";
+import { ItemIcon } from "#blokkli/components";
+const props = defineProps({
+  message: { type: String, required: true },
+  propertyPath: { type: String, required: false },
+  code: { type: String, required: false },
+  entityType: { type: String, required: false },
+  entityUuid: { type: String, required: false }
+});
+const { runtimeConfig, eventBus, dom, types } = useBlokkli();
 const isBlock = computed(
-  () => props.entityType === runtimeConfig.itemEntityType,
-)
-
+  () => props.entityType === runtimeConfig.itemEntityType
+);
 const block = computed(() => {
   if (isBlock.value && props.entityUuid) {
-    return dom.findBlock(props.entityUuid)
+    return dom.findBlock(props.entityUuid);
   }
-
-  return null
-})
-
+  return null;
+});
 const itemBundle = computed(() => {
   if (block.value?.itemBundle) {
-    return types.getBlockBundleDefinition(block.value.itemBundle)
+    return types.getBlockBundleDefinition(block.value.itemBundle);
   }
-
-  return null
-})
-
+  return null;
+});
 function onClick() {
   if (isBlock.value && props.entityUuid) {
-    eventBus.emit('scrollIntoView', { uuid: props.entityUuid, center: true })
+    eventBus.emit("scrollIntoView", { uuid: props.entityUuid, center: true });
   }
 }
 </script>

package/dist/runtime/components/Edit/Features/Validations/SidebarItem/index.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    message: string;
+    propertyPath?: string;
+    code?: string;
+    entityType?: string;
+    entityUuid?: string;
+};
+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/Validations/index.vue

@@ -4,11 +4,11 @@
     ref="plugin"
     :title="$t('validationsToolbarLabel', 'Validations')"
     :tour-text="
-      $t(
-        'validationsTourText',
-        'See validation errors for content or structure on the current page.',
-      )
-    "
+  $t(
+    'validationsTourText',
+    'See validation errors for content or structure on the current page.'
+  )
+"
     icon="check"
     weight="-10"
   >
@@ -22,7 +22,7 @@
         <figure>
           <Icon name="check" />
         </figure>
-        <h3>{{ $t('validationsNoneFound', 'No validation errors found.') }}</h3>
+        <h3>{{ $t("validationsNoneFound", "No validation errors found.") }}</h3>
       </div>
     </div>
 
@@ -34,37 +34,31 @@
   <ValidationOverlay v-if="validations.length" :validations="validations" />
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature, computed, ref } from '#imports'
-import { PluginSidebar } from '#blokkli/plugins'
-import { Icon } from '#blokkli/components'
-import ValidationOverlay from './Overlay/index.vue'
-import SidebarItem from './SidebarItem/index.vue'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature, computed, ref } from "#imports";
+import { PluginSidebar } from "#blokkli/plugins";
+import { Icon } from "#blokkli/components";
+import ValidationOverlay from "./Overlay/index.vue";
+import SidebarItem from "./SidebarItem/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 defineBlokkliFeature({
-  id: 'validations',
-  icon: 'check',
-  label: 'Validations',
-  description: 'Provides a sidebar pane to render validations.',
-})
-
-const plugin = ref<InstanceType<typeof PluginSidebar> | null>(null)
-
-const { state, $t } = useBlokkli()
-
-const validations = computed(() => state.violations.value)
-
-onBlokkliEvent('publish:failed', function () {
-  // When publishing failed and we have validations, show the sidebar.
+  id: "validations",
+  icon: "check",
+  label: "Validations",
+  description: "Provides a sidebar pane to render validations."
+});
+const plugin = ref(null);
+const { state, $t } = useBlokkli();
+const validations = computed(() => state.violations.value);
+onBlokkliEvent("publish:failed", function() {
   if (plugin.value && validations.value.length) {
-    plugin.value.showSidebar()
+    plugin.value.showSidebar();
   }
-})
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Validations',
-}
+  name: "Validations"
+};
 </script>

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

@@ -1,71 +1,52 @@
 <template>
   <Component
-    :is="feature.component"
+    :is="featureComponents[feature]"
     v-for="feature in availableFeatures"
-    :key="feature.id"
+    :key="feature"
   />
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, onMounted, nextTick, computed } from '#imports'
-import { featureComponents } from '#blokkli-build/features'
-
-const emit = defineEmits(['loaded'])
-
-const { adapter, features, ui, debug } = useBlokkli()
-
-const logger = debug.createLogger('Features')
-
-const renderedFeatures = computed(() =>
-  features.features.value.map((v) => v.id),
-)
-
-// Let the edit adapter determine which features should be disabled at runtime.
-const disabledFeatures = adapter.getDisabledFeatures
-  ? await adapter.getDisabledFeatures()
-  : await Promise.resolve([])
-
+<script setup>
+import {
+  featureComponents
+} from "#blokkli-build/features";
+import { useBlokkli, onMounted, nextTick, computed } from "#imports";
+const emit = defineEmits(["loaded"]);
+const { adapter, features, ui, debug } = useBlokkli();
+const logger = debug.createLogger("Features");
+const renderedFeatures = computed(
+  () => features.mountedFeatures.value.map((v) => v.id)
+);
+const disabledFeatures = adapter.getDisabledFeatures ? await adapter.getDisabledFeatures() : await Promise.resolve([]);
 const availableFeatures = computed(() => {
-  return featureComponents.filter((v) => {
-    // Feature is disabled at runtime.
+  return features.features.value.filter((v) => {
     if (disabledFeatures.includes(v.id)) {
-      return false
+      return false;
     }
-
-    // Feature requires adapter methods that aren't implemented.
-    if (
-      v.requiredAdapterMethods.length &&
-      !v.requiredAdapterMethods.every((method) => adapter[method])
-    ) {
-      return false
+    if (v.requiredAdapterMethods?.length && !v.requiredAdapterMethods.every((method) => adapter[method])) {
+      return false;
     }
-
-    // Feature has dependencies on other features that are not yet rendered.
-    if (
-      v.dependencies.length &&
-      !v.dependencies.every((id) => renderedFeatures.value.includes(id))
-    ) {
-      return false
+    if (v.dependencies?.length && !v.dependencies.every((id) => renderedFeatures.value.includes(id))) {
+      return false;
     }
-
     if (v.beta && !features.enabledBetaFeatures.value.includes(v.id)) {
-      return false
+      return false;
     }
-
-    return !v.viewports.length || v.viewports.includes(ui.appViewport.value)
-  })
-})
-
+    return !v.viewports?.length || v.viewports.includes(ui.appViewport.value);
+  }).map((v) => {
+    return v.id;
+  });
+});
 onMounted(() => {
   nextTick(() => {
-    emit('loaded')
-    logger.log('Features loaded', renderedFeatures.value)
-  })
-})
+    emit("loaded");
+    logger.log("Features loaded", renderedFeatures.value);
+  });
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Features',
-}
+  name: "Features"
+};
 </script>

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

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loaded: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onLoaded?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Form/Group/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="bk-form-group"
+    :class="{
+  'bk-is-horizontal': horizontal
+}"
+  >
+    <h3 v-if="title" class="bk-form-group-title">
+      <span>{{ title }}</span>
+      <slot name="addon" />
+    </h3>
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: false },
+  horizontal: { type: Boolean, required: false }
+});
+</script>

package/dist/runtime/components/Edit/Form/Group/index.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    title?: string;
+    horizontal?: boolean;
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    addon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+}>;
+declare const __VLS_self: 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>;
+declare const __VLS_component: 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>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Edit/Form/Item/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="bk-form-item">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/Edit/Form/Item/index.vue.d.ts

@@ -0,0 +1,14 @@
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Edit/Form/Textarea/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <label class="bk-form-label">
+      {{ label }}
+    </label>
+    <textarea
+      v-model="value"
+      class="bk-form-input"
+      :placeholder="placeholder"
+      :required
+      :disabled
+      rows="5"
+    />
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const value = defineModel({ type: String });
+</script>

package/dist/runtime/components/Edit/Form/Textarea/index.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    label: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Form/Toggle/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <label class="bk-checkbox-toggle">
+    <input v-model="value" type="checkbox" class="peer" :disabled />
+    <div class="bk-checkbox-toggle-toggle" />
+    <div class="bk-checkbox-toggle-label">
+      <div>{{ label }}</div>
+      <div v-if="description">
+        {{ description }}
+      </div>
+    </div>
+  </label>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const value = defineModel({ type: Boolean });
+</script>

package/dist/runtime/components/Edit/Form/Toggle/index.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/FormOverlay/Header/index.vue

@@ -11,29 +11,18 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ItemIcon, Icon } from '#blokkli/components'
-import type { BlokkliIcon } from '#blokkli-build/icons'
-
-withDefaults(
-  defineProps<{
-    bundle?: string
-    icon?: BlokkliIcon
-    title: string
-  }>(),
-  {
-    icon: 'form',
-    bundle: '',
-  },
-)
-
-defineEmits<{
-  (e: 'close'): void
-}>()
+<script setup>
+import { ItemIcon, Icon } from "#blokkli/components";
+defineProps({
+  bundle: { type: String, required: false, default: "" },
+  icon: { type: null, required: false, default: "form" },
+  title: { type: String, required: true }
+});
+defineEmits(["close"]);
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'FormOverlayHeader',
-}
+  name: "FormOverlayHeader"
+};
 </script>

package/dist/runtime/components/Edit/FormOverlay/Header/index.vue.d.ts

@@ -0,0 +1,18 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: import("vue").DefineComponent<{
+    bundle?: string;
+    icon?: BlokkliIcon;
+    title: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    bundle?: string;
+    icon?: BlokkliIcon;
+    title: string;
+}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    bundle: string;
+    icon: BlokkliIcon;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;