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

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

@@ -0,0 +1,91 @@
+import { Icon, ViewportBlockingRect, ScrollBoundary } from '#blokkli/components';
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    id: string;
+    title: string;
+    icon: BlokkliIcon;
+    minWidth?: number;
+    minHeight?: number;
+    size?: {
+        width: number;
+        height: number;
+    };
+    isLeft?: boolean;
+};
+declare function onPointerMove(e: PointerEvent): void;
+declare const isMinimized: import("vue").WritableComputedRef<boolean, boolean>;
+declare const storageKey: import("vue").ComputedRef<string>;
+declare const focusedSidebar: import("vue").WritableComputedRef<string, string>;
+type MouseMode = 'move' | 'resize-right' | 'resize-bottom' | 'resize-bottom-right' | '';
+declare const isResizing: import("vue").ComputedRef<boolean>;
+declare const userWidth: import("vue").Ref<number, number>;
+declare const userHeight: import("vue").Ref<number, number>;
+declare const style: import("vue").ComputedRef<{
+    transform: string;
+    zIndex: number;
+}>;
+declare const innerStyle: import("vue").ComputedRef<{
+    width: string;
+    height: string | number;
+}>;
+declare const onFocus: () => void;
+declare const onMouseDown: (e: MouseEvent, mode: MouseMode) => void;
+declare const el: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_16: {}, __VLS_30: {
+    width: number;
+    height: number;
+    isResizing: boolean;
+};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    icon?: (props: typeof __VLS_16) => any;
+} & {
+    default?: (props: typeof __VLS_30) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    Icon: typeof Icon;
+    ViewportBlockingRect: typeof ViewportBlockingRect;
+    ScrollBoundary: typeof ScrollBoundary;
+    onPointerMove: typeof onPointerMove;
+    isMinimized: typeof isMinimized;
+    storageKey: typeof storageKey;
+    focusedSidebar: typeof focusedSidebar;
+    isResizing: typeof isResizing;
+    userWidth: typeof userWidth;
+    userHeight: typeof userHeight;
+    style: typeof style;
+    innerStyle: typeof innerStyle;
+    onFocus: typeof onFocus;
+    onMouseDown: typeof onMouseDown;
+    el: typeof el;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: {
+        width: number;
+        height: number;
+    };
+    minWidth: number;
+    minHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: {
+        width: number;
+        height: number;
+    };
+    minWidth: number;
+    minHeight: number;
+}, {}, {}, {}, 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/blokkliPlugins/Sidebar/index.vue

@@ -29,9 +29,8 @@
 
   <Teleport
     v-if="
-      (activeSidebar === id || isRenderedDetached || renderAlways) &&
-      !isDisabled
-    "
+  (activeSidebar === id || isRenderedDetached || renderAlways) && !isDisabled
+"
     :to="isRenderedDetached ? 'body' : '#bk-sidebar-content-' + region"
   >
     <SidebarDetached
@@ -50,7 +49,7 @@
       <template #icon>
         <slot name="icon" />
       </template>
-      <template #default="{ width, height }">
+      <template #default="{ width, height, isResizing }">
         <div class="bk-sidebar-content-wrapper">
           <div ref="sidebarContent" class="bk-sidebar-content">
             <slot
@@ -60,6 +59,7 @@
               :width="width"
               :height="height"
               :toggle-sidebar="toggleSidebar"
+              :is-resizing="isResizing"
             />
           </div>
         </div>
@@ -91,6 +91,7 @@
             :width="undefined"
             :height="undefined"
             :toggle-sidebar="toggleSidebar"
+            :is-resizing="false"
           />
         </div>
       </div>
@@ -98,186 +99,141 @@
   </Teleport>
 </template>
 
-<script setup lang="ts">
-import { computed, watch, ref, useBlokkli } from '#imports'
-import type { BlokkliIcon } from '#blokkli-build/icons'
-import { Icon, ShortcutIndicator, ScrollBoundary } from '#blokkli/components'
-import SidebarDetached from './Detached/index.vue'
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
-import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
-
-const props = withDefaults(
-  defineProps<{
-    id: string
-    title: string
-    tourText?: string
-    editOnly?: boolean
-    icon: BlokkliIcon
-    weight?: string | number
-    renderAlways?: boolean
-    disabled?: boolean
-    region?: 'left' | 'right'
-    minWidth?: number
-    minHeight?: number
-    size?: { width: number; height: number }
-    meta?: boolean
-    shift?: boolean
-    keyCode?: string
-    beta?: boolean
-  }>(),
-  {
-    region: 'right',
-    tourText: undefined,
-    weight: 0,
-    minWidth: undefined,
-    minHeight: undefined,
-    size: undefined,
-    keyCode: undefined,
-  },
-)
-
-const emit = defineEmits<{
-  (e: 'updated'): void
-}>()
-
-const { storage, state, ui, $t } = useBlokkli()
-
-const tourElement = ref<HTMLElement | null>(null)
-
-const detachedKey = computed(() => 'sidebar:detached:' + props.id)
-const storageKey = computed(() => 'sidebar:active:' + props.region)
-const isDetached = storage.use(detachedKey, false)
+<script setup>
+import { computed, watch, ref, useBlokkli } from "#imports";
+import { Icon, ShortcutIndicator, ScrollBoundary } from "#blokkli/components";
+import SidebarDetached from "./Detached/index.vue";
+import defineCommands from "#blokkli/helpers/composables/defineCommands";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
+import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  tourText: { type: String, required: false, default: void 0 },
+  editOnly: { type: Boolean, required: false },
+  icon: { type: null, required: true },
+  weight: { type: [String, Number], required: false, default: 0 },
+  renderAlways: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  region: { type: String, required: false, default: "right" },
+  minWidth: { type: Number, required: false, default: void 0 },
+  minHeight: { type: Number, required: false, default: void 0 },
+  size: { type: Object, required: false, default: void 0 },
+  meta: { type: Boolean, required: false },
+  shift: { type: Boolean, required: false },
+  keyCode: { type: String, required: false, default: void 0 },
+  beta: { type: Boolean, required: false }
+});
+const emit = defineEmits(["updated"]);
+const { storage, state, ui, $t } = useBlokkli();
+const tourElement = ref(null);
+const detachedKey = computed(() => "sidebar:detached:" + props.id);
+const storageKey = computed(() => "sidebar:active:" + props.region);
+const isDetached = storage.use(detachedKey, false);
 const isDisabled = computed(
-  () => props.editOnly && state.editMode.value !== 'editing' && !props.disabled,
-)
-const activeSidebar = storage.use(storageKey, '')
-
+  () => props.editOnly && state.editMode.value !== "editing" && !props.disabled
+);
+const activeSidebar = storage.use(storageKey, "");
 const isRenderedDetached = computed(
-  () => isDetached.value && !ui.isMobile.value,
-)
-
+  () => isDetached.value && !ui.isMobile.value
+);
 watch(isDisabled, (v) => {
   if (v && activeSidebar.value === props.id) {
-    activeSidebar.value = ''
+    activeSidebar.value = "";
   }
-})
-
+});
 const onDetach = () => {
-  isDetached.value = true
-  activeSidebar.value = ''
-  emit('updated')
-}
-
+  isDetached.value = true;
+  activeSidebar.value = "";
+  emit("updated");
+};
 const onAttach = () => {
-  isDetached.value = false
-  emit('updated')
-}
-
+  isDetached.value = false;
+  emit("updated");
+};
 const toggleSidebar = () => {
   if (isDetached.value) {
-    isDetached.value = false
-    return
+    isDetached.value = false;
+    return;
   }
-  activeSidebar.value = activeSidebar.value === props.id ? '' : props.id
-  emit('updated')
-}
-
+  activeSidebar.value = activeSidebar.value === props.id ? "" : props.id;
+  emit("updated");
+};
 const showSidebar = () => {
   if (isDetached.value) {
-    return
+    return;
   }
-  activeSidebar.value = props.id
-}
-
+  activeSidebar.value = props.id;
+};
 watch(activeSidebar, (active) => {
   if (active) {
-    document.documentElement.classList.add('bk-has-sidebar-' + props.region)
+    document.documentElement.classList.add("bk-has-sidebar-" + props.region);
   } else {
-    document.documentElement.classList.remove('bk-has-sidebar-' + props.region)
+    document.documentElement.classList.remove("bk-has-sidebar-" + props.region);
   }
-})
-
-const sidebarContent = ref<HTMLDivElement | null>(null)
-const scrolledToEnd = ref(false)
-const isOverflowing = ref(false)
-
+});
+const sidebarContent = ref(null);
+const scrolledToEnd = ref(false);
+const isOverflowing = ref(false);
 useAnimationFrame(() => {
   if (sidebarContent.value) {
-    scrolledToEnd.value =
-      sidebarContent.value.scrollHeight -
-        (sidebarContent.value.scrollTop + sidebarContent.value.offsetHeight) <
-      3
-
-    isOverflowing.value =
-      sidebarContent.value.scrollHeight > sidebarContent.value.offsetHeight
+    scrolledToEnd.value = sidebarContent.value.scrollHeight - (sidebarContent.value.scrollTop + sidebarContent.value.offsetHeight) < 3;
+    isOverflowing.value = sidebarContent.value.scrollHeight > sidebarContent.value.offsetHeight;
   }
-})
-
+});
 const commandTitle = computed(() => {
   if (activeSidebar.value === props.id) {
-    return $t('sidebar.hide', 'Hide @title').replace('@title', props.title)
+    return $t("sidebar.hide", "Hide @title").replace("@title", props.title);
   }
-  return $t('sidebar.show', 'Show @title').replace('@title', props.title)
-})
-
+  return $t("sidebar.show", "Show @title").replace("@title", props.title);
+});
 const commandCallback = () => {
   if (activeSidebar.value === props.id) {
-    activeSidebar.value = ''
+    activeSidebar.value = "";
   } else {
-    activeSidebar.value = props.id
+    activeSidebar.value = props.id;
   }
-}
-
+};
 defineCommands(() => {
   if (isDisabled.value) {
-    return
+    return;
   }
   return {
-    id: 'plugin:sidebar:' + props.id,
+    id: "plugin:sidebar:" + props.id,
     label: commandTitle.value,
-    group: 'ui',
+    group: "ui",
     icon: props.icon,
     disabled: isRenderedDetached.value,
-    callback: commandCallback,
-  }
-})
-
-onBlokkliEvent('item:dropped', () => {
-  // On mobile we want to close the active sidebar.
-  // Some sidebar panes like the media library or clipboard allow drag and drop.
-  // During dragging the sidebar is hidden. If dragging ends, the sidebar would
-  // be visible again, which is annoying.
-  // This is why we hide any sidebar in this case.
+    callback: commandCallback
+  };
+});
+onBlokkliEvent("item:dropped", () => {
   if (ui.isMobile.value && activeSidebar.value) {
-    activeSidebar.value = ''
+    activeSidebar.value = "";
   }
-})
-
-onBlokkliEvent('sidebar:open', (id) => {
+});
+onBlokkliEvent("sidebar:open", (id) => {
   if (id === props.id) {
-    activeSidebar.value = props.id
+    activeSidebar.value = props.id;
   }
-})
-
-defineExpose({ showSidebar })
-
+});
+defineExpose({ showSidebar });
 defineTourItem(() => {
   if (!props.tourText) {
-    return
+    return;
   }
   return {
-    id: 'plugin:sidebar:' + props.id,
+    id: "plugin:sidebar:" + props.id,
     title: props.title,
     text: props.tourText,
-    element: () => tourElement.value,
-  }
-})
+    element: () => tourElement.value
+  };
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'PluginSidebar',
-}
+  name: "PluginSidebar"
+};
 </script>

package/dist/runtime/blokkliPlugins/Sidebar/index.vue.d.ts

@@ -0,0 +1,85 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id: string;
+    title: string;
+    tourText?: string;
+    editOnly?: boolean;
+    icon: BlokkliIcon;
+    weight?: string | number;
+    renderAlways?: boolean;
+    disabled?: boolean;
+    region?: "left" | "right";
+    minWidth?: number;
+    minHeight?: number;
+    size?: {
+        width: number;
+        height: number;
+    };
+    meta?: boolean;
+    shift?: boolean;
+    keyCode?: string;
+    beta?: boolean;
+}, {
+    showSidebar: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    updated: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    title: string;
+    tourText?: string;
+    editOnly?: boolean;
+    icon: BlokkliIcon;
+    weight?: string | number;
+    renderAlways?: boolean;
+    disabled?: boolean;
+    region?: "left" | "right";
+    minWidth?: number;
+    minHeight?: number;
+    size?: {
+        width: number;
+        height: number;
+    };
+    meta?: boolean;
+    shift?: boolean;
+    keyCode?: string;
+    beta?: boolean;
+}> & Readonly<{
+    onUpdated?: (() => any) | undefined;
+}>, {
+    size: {
+        width: number;
+        height: number;
+    };
+    keyCode: string;
+    weight: string | number;
+    tourText: string;
+    minWidth: number;
+    minHeight: number;
+    region: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    icon?: (((props: {}) => any) & ((props: {}) => any)) | undefined;
+    badge?: ((props: {}) => any) | undefined;
+    default?: (((props: {
+        key: string;
+        scrolledToEnd: boolean;
+        isDetached: true;
+        width: number;
+        height: number;
+        toggleSidebar: () => void;
+        isResizing: boolean;
+    }) => any) & ((props: {
+        key: string;
+        scrolledToEnd: boolean;
+        isDetached: false;
+        width: undefined;
+        height: undefined;
+        toggleSidebar: () => void;
+        isResizing: boolean;
+    }) => any)) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -4,7 +4,7 @@
       ref="el"
       class="bk-toolbar-button"
       :disabled="disabled"
-      :class="[{ 'is-active': active }, id ? 'bk-is-' + id : undefined]"
+      :class="[{ 'is-active': active }, id ? 'bk-is-' + id : void 0]"
       :style="{ order: weight || 0 }"
       @click.prevent.stop="onClick"
     >
@@ -27,78 +27,59 @@
   </Teleport>
 </template>
 
-<script setup lang="ts">
-import { ShortcutIndicator, Icon } from '#blokkli/components'
-import type { BlokkliIcon } from '#blokkli-build/icons'
-import { ref } from '#imports'
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
-
-const props = defineProps<{
-  id: string
-  title: string
-  region:
-    | 'after-title'
-    | 'before-title'
-    | 'before-sidebar'
-    | 'after-menu'
-    | 'before-sidebar-right'
-    | 'view-options'
-  editOnly?: boolean
-  disabled?: boolean
-  active?: boolean
-  meta?: boolean
-  shift?: boolean
-  keyCode?: string
-  icon?: BlokkliIcon
-  shortcutGroup?: string
-  tourText?: string
-
-  /**
-   * The weight, used for positioning the button.
-   */
-  weight?: number | string
-}>()
-
-const emit = defineEmits(['click'])
-
-const el = ref<HTMLButtonElement | null>(null)
-
+<script setup>
+import { ShortcutIndicator, Icon } from "#blokkli/components";
+import { ref } from "#imports";
+import defineCommands from "#blokkli/helpers/composables/defineCommands";
+import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  region: { type: String, required: true },
+  editOnly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false },
+  meta: { type: Boolean, required: false },
+  shift: { type: Boolean, required: false },
+  keyCode: { type: String, required: false },
+  icon: { type: null, required: false },
+  shortcutGroup: { type: String, required: false },
+  tourText: { type: String, required: false },
+  weight: { type: [Number, String], required: false }
+});
+const emit = defineEmits(["click"]);
+const el = ref(null);
 function onClick() {
   if (props.disabled) {
-    return
+    return;
   }
-
-  emit('click')
+  emit("click");
 }
-
 defineCommands(() => {
   return {
-    id: 'plugin:toolbar_button:' + props.id,
+    id: "plugin:toolbar_button:" + props.id,
     label: props.title,
-    group: 'ui',
+    group: "ui",
     icon: props.icon,
     disabled: props.disabled,
-    callback: () => emit('click'),
-  }
-})
-
+    callback: () => emit("click")
+  };
+});
 defineTourItem(() => {
   if (!props.tourText) {
-    return
+    return;
   }
-
   return {
-    id: 'plugin:toolbar-button:' + props.id,
+    id: "plugin:toolbar-button:" + props.id,
     title: props.title,
     text: props.tourText,
-    element: () => el.value,
-  }
-})
+    element: () => el.value
+  };
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'PluginToolbarButton',
-}
+  name: "PluginToolbarButton"
+};
 </script>

package/dist/runtime/blokkliPlugins/ToolbarButton/index.vue.d.ts

@@ -0,0 +1,48 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id: string;
+    title: string;
+    region: "after-title" | "before-title" | "before-sidebar" | "after-menu" | "before-sidebar-right" | "view-options";
+    editOnly?: boolean;
+    disabled?: boolean;
+    active?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+    keyCode?: string;
+    icon?: BlokkliIcon;
+    shortcutGroup?: string;
+    tourText?: string;
+    /**
+     * The weight, used for positioning the button.
+     */
+    weight?: number | string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    title: string;
+    region: "after-title" | "before-title" | "before-sidebar" | "after-menu" | "before-sidebar-right" | "view-options";
+    editOnly?: boolean;
+    disabled?: boolean;
+    active?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+    keyCode?: string;
+    icon?: BlokkliIcon;
+    shortcutGroup?: string;
+    tourText?: string;
+    /**
+     * The weight, used for positioning the button.
+     */
+    weight?: number | string;
+}> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: ((props: {}) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};