@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.14

package/dist/runtime/components/Edit/ShortcutIndicator/index.vue

@@ -2,7 +2,12 @@
   <kbd :title="label" class="bk-shortcut">
     <template v-if="meta"> <kbd>CTRL</kbd> + </template>
     <template v-if="shift"> <kbd>SHIFT</kbd> + </template>
-    <kbd>{{ keyLabel }}</kbd>
+    <kbd
+      :class="{
+  'bk-is-single': keyLabel.length === 1
+}"
+      >{{ keyLabel }}</kbd
+    >
   </kbd>
 </template>
 
@@ -19,7 +24,7 @@ const props = defineProps({
   label: { type: String, required: true }
 });
 const emit = defineEmits(["pressed"]);
-const { state } = useBlokkli();
+const { state, ui } = useBlokkli();
 const key = computed(
   () => [props.meta, props.shift, props.keyCode.toLowerCase()].join("-")
 );
@@ -54,7 +59,7 @@ onBlokkliEvent("keyPressed", (e) => {
     return;
   }
   e.originalEvent.preventDefault();
-  if (state.isLoading.value) {
+  if (state.isLoading.value || ui.hasTransformOverlayOpen.value) {
     return;
   }
   emit("pressed");

package/dist/runtime/components/Edit/SystemRequirements/index.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport v-if="showDialog" to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <DialogModal
         :title="$t('systemRequirementsDialogTitle', 'System Requirements')"
         :width="700"
@@ -46,13 +46,13 @@
           }}
         </p>
       </DialogModal>
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import { useBlokkli, computed } from "#imports";
-import { DialogModal, Icon } from "#blokkli/components";
+import { DialogModal, Icon, BlokkliTransition } from "#blokkli/components";
 const { $t, storage, animation } = useBlokkli();
 const hasDismissed = storage.use("system_requirements_dismissed", false);
 const requirements = computed(() => {

package/dist/runtime/components/Edit/Toolbar/index.vue

@@ -13,7 +13,7 @@
       :class="{ 'bk-is-hidden': !sidebarVisible }"
     />
 
-    <Transition name="bk-toolbar">
+    <BlokkliTransition name="toolbar">
       <div v-show="showToolbar" class="bk bk-top">
         <div
           class="bk-toolbar bk-control"
@@ -48,13 +48,14 @@
           />
         </div>
       </div>
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import { onMounted, useBlokkli, onBeforeUnmount, computed } from "#imports";
+import { BlokkliTransition } from "#blokkli/components";
 const { ui, selection, storage } = useBlokkli();
 const showToolbar = computed(
   () => !ui.isMobile.value || !selection.isDragging.value && !selection.isMultiSelecting.value

package/dist/runtime/components/Edit/Transition/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <Transition :name :duration appear>
+    <slot />
+  </Transition>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+const props = defineProps({
+  name: { type: String, required: true },
+  enabled: { type: Boolean, required: false, default: true }
+});
+const { ui } = useBlokkli();
+const DURATION = {
+  "transform-overlay": 300,
+  fade: 200,
+  menu: 200,
+  toolbar: 200,
+  "context-menu": 200,
+  "drag-item": 200,
+  "slide-in": 300,
+  "slide-up": 300,
+  search: 300,
+  editable: 250,
+  "touch-bar": 200,
+  "command-palette": 100,
+  "caret-tooltip": 150
+};
+const name = computed(() => {
+  if (!ui.useAnimations.value || !props.enabled) {
+    return;
+  }
+  return "bk-" + props.name;
+});
+const duration = computed(() => {
+  if (!ui.useAnimations.value || !props.enabled) {
+    return;
+  }
+  return DURATION[props.name];
+});
+</script>

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

@@ -0,0 +1,19 @@
+type TransitionName = 'transform-overlay' | 'fade' | 'touch-bar' | 'drag-item' | 'editable' | 'menu' | 'loading' | 'toolbar' | 'slide-in' | 'slide-up' | 'search' | 'context-menu' | 'command-palette' | 'caret-tooltip';
+type __VLS_Props = {
+    name: TransitionName;
+    enabled?: boolean;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    enabled: boolean;
+}, {}, {}, {}, 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/index.d.ts

@@ -1,21 +1,29 @@
+import AddListItem from './AddListItem/index.vue.js';
+import ConfigForm from './PluginConfigForm/index.vue.js';
+import DialogModal from './Dialog/index.vue.js';
+import DiffViewerState from './DiffViewer/State.vue.js';
+import FormGroup from './Form/Group/index.vue.js';
+import FormItem from './Form/Item/index.vue.js';
+import FormOverlay from './FormOverlay/index.vue.js';
+import FormRadio from './Form/Radio/index.vue.js';
+import FormRadioTabs from './Form/RadioTabs/index.vue.js';
+import FormSelect from './Form/Select/index.vue.js';
+import FormText from './Form/Text/index.vue.js';
+import FormTextarea from './Form/Textarea/index.vue.js';
+import FormToggle from './Form/Toggle/index.vue.js';
+import Highlight from './Highlight/index.vue.js';
+import Icon from './Icon/index.vue.js';
+import InfoBox from './InfoBox/index.vue.js';
 import ItemIcon from './ItemIcon/index.vue.js';
-import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
+import Loading from './Loading/index.vue.js';
+import Pagination from './Pagination/index.vue.js';
 import RelativeTime from './RelativeTime/index.vue.js';
 import Resizable from './Resizable/index.vue.js';
-import Icon from './Icon/index.vue.js';
-import DialogModal from './Dialog/index.vue.js';
 import ScaleToFit from './ScaleToFit/index.vue.js';
+import ScrollBoundary from './ScrollBoundary/index.vue.js';
+import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
+import BlokkliTransition from './Transition/index.vue.js';
 import Sortli from './Sortli/index.vue.js';
-import FormOverlay from './FormOverlay/index.vue.js';
-import AddListItem from './AddListItem/index.vue.js';
-import Loading from './Loading/index.vue.js';
-import Highlight from './Highlight/index.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
-import ScrollBoundary from './ScrollBoundary/index.vue.js';
-import InfoBox from './InfoBox/index.vue.js';
-import Pagination from './Pagination/index.vue.js';
-import FormToggle from './Form/Toggle/index.vue.js';
-import FormTextarea from './Form/Textarea/index.vue.js';
-import FormItem from './Form/Item/index.vue.js';
-import FormGroup from './Form/Group/index.vue.js';
-export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, ScrollBoundary, InfoBox, Pagination, FormToggle, FormTextarea, FormItem, FormGroup, };
+import AddListItemIcon from './AddListItemIcon/index.vue.js';
+export { AddListItem, AddListItemIcon, ConfigForm, DialogModal, DiffViewerState, FormGroup, FormItem, FormOverlay, FormRadio, FormSelect, FormText, FormTextarea, FormToggle, FormRadioTabs, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScrollBoundary, ShortcutIndicator, Sortli, ViewportBlockingRect, BlokkliTransition, };

package/dist/runtime/components/Edit/index.js

@@ -1,42 +1,58 @@
+import AddListItem from "./AddListItem/index.vue";
+import ConfigForm from "./PluginConfigForm/index.vue";
+import DialogModal from "./Dialog/index.vue";
+import DiffViewerState from "./DiffViewer/State.vue";
+import FormGroup from "./Form/Group/index.vue";
+import FormItem from "./Form/Item/index.vue";
+import FormOverlay from "./FormOverlay/index.vue";
+import FormRadio from "./Form/Radio/index.vue";
+import FormRadioTabs from "./Form/RadioTabs/index.vue";
+import FormSelect from "./Form/Select/index.vue";
+import FormText from "./Form/Text/index.vue";
+import FormTextarea from "./Form/Textarea/index.vue";
+import FormToggle from "./Form/Toggle/index.vue";
+import Highlight from "./Highlight/index.vue";
+import Icon from "./Icon/index.vue";
+import InfoBox from "./InfoBox/index.vue";
 import ItemIcon from "./ItemIcon/index.vue";
-import ShortcutIndicator from "./ShortcutIndicator/index.vue";
+import Loading from "./Loading/index.vue";
+import Pagination from "./Pagination/index.vue";
 import RelativeTime from "./RelativeTime/index.vue";
 import Resizable from "./Resizable/index.vue";
-import Icon from "./Icon/index.vue";
-import DialogModal from "./Dialog/index.vue";
 import ScaleToFit from "./ScaleToFit/index.vue";
+import ScrollBoundary from "./ScrollBoundary/index.vue";
+import ShortcutIndicator from "./ShortcutIndicator/index.vue";
+import BlokkliTransition from "./Transition/index.vue";
 import Sortli from "./Sortli/index.vue";
-import FormOverlay from "./FormOverlay/index.vue";
-import AddListItem from "./AddListItem/index.vue";
-import Loading from "./Loading/index.vue";
-import Highlight from "./Highlight/index.vue";
 import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
-import ScrollBoundary from "./ScrollBoundary/index.vue";
-import InfoBox from "./InfoBox/index.vue";
-import Pagination from "./Pagination/index.vue";
-import FormToggle from "./Form/Toggle/index.vue";
-import FormTextarea from "./Form/Textarea/index.vue";
-import FormItem from "./Form/Item/index.vue";
-import FormGroup from "./Form/Group/index.vue";
+import AddListItemIcon from "./AddListItemIcon/index.vue";
 export {
+  AddListItem,
+  AddListItemIcon,
+  ConfigForm,
+  DialogModal,
+  DiffViewerState,
+  FormGroup,
+  FormItem,
+  FormOverlay,
+  FormRadio,
+  FormSelect,
+  FormText,
+  FormTextarea,
+  FormToggle,
+  FormRadioTabs,
+  Highlight,
+  Icon,
+  InfoBox,
   ItemIcon,
-  ShortcutIndicator,
+  Loading,
+  Pagination,
   RelativeTime,
-  Icon,
   Resizable,
-  DialogModal,
   ScaleToFit,
+  ScrollBoundary,
+  ShortcutIndicator,
   Sortli,
-  FormOverlay,
-  AddListItem,
-  Loading,
-  Highlight,
   ViewportBlockingRect,
-  ScrollBoundary,
-  InfoBox,
-  Pagination,
-  FormToggle,
-  FormTextarea,
-  FormItem,
-  FormGroup
+  BlokkliTransition
 };

package/dist/runtime/composables/defineBlokkli.js

@@ -13,6 +13,10 @@ import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
 import {
   OPTIONS
 } from "#blokkli-build/runtime-options";
+import {
+  BUNDLE_BLOKKLI_FRAGMENT,
+  BUNDLE_FROM_LIBRARY
+} from "#blokkli/constants";
 export function defineBlokkli(arg) {
   const [bundle, identifier] = arg.split("::", 2);
   const fieldListType = inject(
@@ -49,13 +53,13 @@ export function defineBlokkli(arg) {
   const parentType = computed(() => item?.value.parentType);
   const isEditing = !!item?.value.isEditing;
   const options = computed(() => {
-    if (bundle === "from_library") {
+    if (bundle === BUNDLE_FROM_LIBRARY) {
       return {
         ...item?.value.options || {},
         ...editContext?.mutatedOptions[uuid] || {}
       };
     }
-    const optionKey = bundle === "blokkli_fragment" ? "fragment:" + item?.value.fragmentName + "__default" : identifier;
+    const optionKey = bundle === BUNDLE_BLOKKLI_FRAGMENT ? "fragment:" + item?.value.fragmentName + "__default" : identifier;
     const runtimeOptionDefinitions = (editContext?.definitions.runtimeOptions.value || OPTIONS)[optionKey] || {};
     const result = Object.entries(runtimeOptionDefinitions).reduce((acc, [key, v]) => {
       const definition = v;
@@ -88,7 +92,7 @@ export function defineBlokkli(arg) {
     import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
     });
   }
-  if (editContext?.useBlockRegistration && editContext.dom && bundle !== "from_library" && bundle !== "blokkli_fragment") {
+  if (editContext?.useBlockRegistration && editContext.dom && bundle !== BUNDLE_FROM_LIBRARY && bundle !== BUNDLE_BLOKKLI_FRAGMENT) {
     const isProxyMode = inject(INJECT_FIELD_USES_PROXY, false);
     if (!isProxyMode) {
       editContext.useBlockRegistration(editContext.dom, uuid);

package/dist/runtime/composables/defineBlokkliFeature.d.ts

@@ -15,14 +15,11 @@ type SettingType<S> = S extends {
 type SettingsTypes<S> = {
     [P in keyof S]: SettingType<S[P]>;
 };
-type PickRequiredMethods<T, Methods extends AdapterMethods[]> = {
-    [K in Methods[number]]: NonNullable<BlokkliAdapter<T>[K]>;
-};
-type CombinedAdapter<T, Methods extends AdapterMethods[]> = PickRequiredMethods<T, Methods> & BlokkliAdapter<T>;
-type DefineBlokkliFeature<T, Methods extends AdapterMethods[], F extends FeatureDefinition<Methods, ValidFeatureKey>> = {
-    adapter: CombinedAdapter<T, Methods>;
+type RequireAdapterMethods<T extends BlokkliAdapter<any>, Methods extends readonly AdapterMethods[]> = Omit<T, Methods[number]> & Required<Pick<T, Methods[number] & keyof T>>;
+type DefineBlokkliFeature<F extends FeatureDefinition<any, any>> = {
+    adapter: F['requiredAdapterMethods'] extends readonly (keyof BlokkliAdapter<any>)[] ? RequireAdapterMethods<BlokkliAdapter<any>, F['requiredAdapterMethods']> : BlokkliAdapter<any>;
     settings: ComputedRef<SettingsTypes<F['settings']>>;
     logger: DebugLogger;
 };
-export declare function defineBlokkliFeature<T, Methods extends AdapterMethods[], F extends FeatureDefinition<Methods, ValidFeatureKey>>(feature: F): DefineBlokkliFeature<T, Methods, F>;
+export declare function defineBlokkliFeature<const F extends FeatureDefinition<AdapterMethods[], ValidFeatureKey>>(feature: F): DefineBlokkliFeature<F>;
 export {};

package/dist/runtime/composables/defineBlokkliProvider.d.ts

@@ -0,0 +1,11 @@
+import type { BlockDefinitionOptionsInput, DefineProviderContext, ProviderDefinitionInput } from '#blokkli/types';
+import type { GlobalOptionsKey } from '#blokkli-build/generated-types';
+type DefineBlokkliProviderProps = {
+    hostOptions?: any;
+} | {
+    blokkliProps: {
+        hostOptions?: any;
+    };
+};
+export declare function defineBlokkliProvider<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined>(props: DefineBlokkliProviderProps, _config: ProviderDefinitionInput<T, G>): DefineProviderContext<T, G>;
+export {};

package/dist/runtime/composables/defineBlokkliProvider.js

@@ -0,0 +1,46 @@
+import { computed, provide, useState } from "#imports";
+import { INJECT_PROVIDER_KEY } from "#blokkli/helpers/symbols";
+import {
+  OPTIONS
+} from "#blokkli-build/runtime-options";
+import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
+export function defineBlokkliProvider(props, _config) {
+  const key = _config;
+  provide(INJECT_PROVIDER_KEY, key);
+  const overrideOptions = useState(
+    "options:" + key,
+    () => {
+      return null;
+    }
+  );
+  const definitionKey = key.split("::")[1] ?? "";
+  const runtimeOptionDefinitions = OPTIONS[definitionKey];
+  const options = computed(() => {
+    if (!runtimeOptionDefinitions) {
+      return {};
+    }
+    const hostOptionsCurrent = ("blokkliProps" in props ? props.blokkliProps.hostOptions : props.hostOptions) ?? {};
+    return Object.entries(runtimeOptionDefinitions).reduce((acc, [key2, v]) => {
+      const definition = v;
+      if (overrideOptions.value) {
+        if (overrideOptions.value[key2] !== void 0 && overrideOptions.value[key2] !== null) {
+          acc[key2] = getRuntimeOptionValue(
+            definition,
+            overrideOptions.value[key2]
+          );
+          return acc;
+        }
+      }
+      if (hostOptionsCurrent && hostOptionsCurrent[key2] !== void 0 && hostOptionsCurrent[key2] !== null) {
+        acc[key2] = getRuntimeOptionValue(definition, hostOptionsCurrent[key2]);
+        return acc;
+      }
+      acc[key2] = definition[1];
+      return acc;
+    }, {});
+  });
+  return {
+    // Must be cast because type of options is inferred automatically.
+    options
+  };
+}

package/dist/runtime/composables/useBlokkliHelper.js

@@ -29,7 +29,7 @@ function walkBlocks(matches, callback, mutatedOptions, mutatedFieldsMap, list) {
     }
     const nestedFieldMapping = FIELD_MAPPING[mappedItem.bundle];
     if (!nestedFieldMapping) continue;
-    if (!mappedItem.props) continue;
+    if (!("props" in mappedItem) || !mappedItem.props) continue;
     const propNames = Object.keys(nestedFieldMapping);
     for (const propName of propNames) {
       const fieldName = nestedFieldMapping[propName];

package/dist/runtime/constants/index.d.ts

@@ -2,3 +2,6 @@ export declare const SETTINGS_GROUP: readonly ["appearance", "artboard", "behavi
 export declare const VIEWPORT: readonly ["mobile", "desktop"];
 export type SettingsGroup = (typeof SETTINGS_GROUP)[number];
 export type Viewport = (typeof VIEWPORT)[number];
+export declare const BUNDLE_FROM_LIBRARY = "from_library";
+export declare const BUNDLE_BLOKKLI_FRAGMENT = "blokkli_fragment";
+export declare const INTERNAL_BUNDLES: string[];

package/dist/runtime/constants/index.js

@@ -6,3 +6,6 @@ export const SETTINGS_GROUP = [
   "advanced"
 ];
 export const VIEWPORT = ["mobile", "desktop"];
+export const BUNDLE_FROM_LIBRARY = "from_library";
+export const BUNDLE_BLOKKLI_FRAGMENT = "blokkli_fragment";
+export const INTERNAL_BUNDLES = [BUNDLE_FROM_LIBRARY, BUNDLE_BLOKKLI_FRAGMENT];