@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

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

@@ -1,53 +1,53 @@
 <template>
-  <Teleport v-if="showDialog" to="body">
-    <BlokkliTransition name="slide-up">
-      <DialogModal
-        :title="$t('systemRequirementsDialogTitle', 'System Requirements')"
-        :width="700"
-        :submit-label="$t('systemRequirementsDialogButton', 'Continue anyway')"
-        :lead="
+  <BlokkliTransition name="slide-up">
+    <DialogModal
+      v-if="showDialog"
+      id="system-requirements"
+      :title="$t('systemRequirementsDialogTitle', 'System Requirements')"
+      :width="700"
+      :submit-label="$t('systemRequirementsDialogButton', 'Continue anyway')"
+      :lead="
   $t(
     'systemRequirementsDialogLead',
     'bl\xF6kkli has detected that your browser does not meet one or more system requirements. For the best experience, please use a browser that supports all the listed requirements.'
   )
 "
-        icon="sad"
-        @submit="dismiss"
-        @cancel="dismiss"
-      >
-        <ul class="bk-system-requirements">
-          <li
-            v-for="requirement in requirements"
-            :key="requirement.id"
-            :class="{
+      icon="sad"
+      @submit="dismiss"
+      @cancel="dismiss"
+    >
+      <ul class="bk-system-requirements">
+        <li
+          v-for="requirement in requirements"
+          :key="requirement.id"
+          :class="{
   'bk-is-success': requirement.supported === true,
   'bk-is-error': requirement.supported === false,
   'bk-is-warning': requirement.supported === null
 }"
-          >
-            <div>
-              <h3>
-                <span>{{ requirement.title }}</span>
-                <div class="bk-system-requirements-icon">
-                  <Icon :name="requirement.supported ? 'check' : 'close'" />
-                </div>
-              </h3>
-              <p>{{ requirement.description }}</p>
-            </div>
-          </li>
-        </ul>
+        >
+          <div>
+            <h3>
+              <span>{{ requirement.title }}</span>
+              <div class="bk-system-requirements-icon">
+                <Icon :name="requirement.supported ? 'check' : 'close'" />
+              </div>
+            </h3>
+            <p>{{ requirement.description }}</p>
+          </div>
+        </li>
+      </ul>
 
-        <p>
-          {{
-            $t(
+      <p>
+        {{
+          $t(
   "systemRequirementsDialogText",
   "bl\xF6kkli has been tested and optimized for the latest versions of Chrome, Firefox, Edge, and Safari. Features like WebGL are well supported, but they may sometimes be disabled for performance or security reasons."
 )
-          }}
-        </p>
-      </DialogModal>
-    </BlokkliTransition>
-  </Teleport>
+        }}
+      </p>
+    </DialogModal>
+  </BlokkliTransition>
 </template>
 
 <script setup>

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

@@ -1,65 +1,61 @@
 <template>
-  <Teleport to="body">
+  <div
+    v-show="activeSidebarLeft && sidebarVisible"
+    id="bk-sidebar-content-left"
+    class="bk-sidebar bk-is-left"
+    :class="{ 'bk-is-hidden': !sidebarVisible }"
+  />
+
+  <div
+    v-show="activeSidebarRight"
+    id="bk-sidebar-content-right"
+    class="bk-sidebar bk-is-right"
+    :class="{ 'bk-is-hidden': !sidebarVisible }"
+  />
+
+  <AppMenu />
+
+  <div class="bk bk-toolbar" @touchstart.stop.passive @touchmove.stop.passive>
+    <div class="bk bk-toolbar-menu">
+      <button class="bk-toolbar-menu-button" @click.prevent.stop="openMenu">
+        <Icon name="menu" />
+      </button>
+    </div>
+    <div class="bk-toolbar-container">
+      <div
+        id="bk-sidebar-tabs-left"
+        class="bk-sidebar-container-tabs bk-is-left"
+      />
+    </div>
+    <div id="bk-toolbar-after-menu" class="bk-toolbar-container" />
+    <div id="bk-toolbar-before-title" class="bk-toolbar-container" />
+    <div id="bk-toolbar-title" class="bk-toolbar-container" />
+    <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
+    <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
     <div
-      v-show="activeSidebarLeft && sidebarVisible"
-      id="bk-sidebar-content-left"
-      class="bk-sidebar bk-is-left"
-      :class="{ 'bk-is-hidden': !sidebarVisible }"
+      id="bk-toolbar-before-sidebar"
+      class="bk-sidebar-container-tabs bk-toolbar-container"
     />
+  </div>
+
+  <div class="bk bk-sidebar-tabs">
+    <div id="bk-toolbar-before-sidebar-right" />
     <div
-      v-show="activeSidebarRight"
-      id="bk-sidebar-content-right"
-      class="bk-sidebar bk-is-right"
-      :class="{ 'bk-is-hidden': !sidebarVisible }"
+      id="bk-sidebar-tabs-right"
+      class="bk-sidebar-container-tabs bk-is-right"
     />
-
-    <BlokkliTransition name="toolbar">
-      <div v-show="showToolbar" class="bk bk-top">
-        <div
-          class="bk-toolbar bk-control"
-          @touchstart.stop.passive
-          @touchmove.stop.passive
-        >
-          <div id="bk-toolbar-menu" class="bk-toolbar-area bk-is-menu" />
-          <div class="bk-toolbar-container bk-is-sidebar">
-            <div
-              id="bk-sidebar-tabs-left"
-              class="bk-sidebar-container-tabs bk-is-left"
-            />
-          </div>
-          <div id="bk-toolbar-after-menu" class="bk-toolbar-container" />
-          <div id="bk-toolbar-before-title" class="bk-toolbar-container" />
-          <div id="bk-toolbar-title" class="bk-toolbar-container" />
-          <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
-          <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
-          <div
-            id="bk-toolbar-before-sidebar"
-            class="bk-sidebar-container-tabs bk-toolbar-container"
-          />
-        </div>
-        <div
-          class="bk bk-sidebar-tabs"
-          :class="{ 'bk-has-sidebar-open': activeSidebarRight }"
-        >
-          <div id="bk-toolbar-before-sidebar-right" />
-          <div
-            id="bk-sidebar-tabs-right"
-            class="bk-sidebar-container-tabs bk-is-right"
-          />
-        </div>
-      </div>
-    </BlokkliTransition>
-  </Teleport>
+  </div>
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { Icon } from "#blokkli/components";
 import { onMounted, useBlokkli, onBeforeUnmount, computed } from "#imports";
-import { BlokkliTransition } from "#blokkli/components";
+import AppMenu from "./../AppMenu/index.vue";
 const { ui, selection, storage } = useBlokkli();
-const showToolbar = computed(
-  () => !ui.isMobile.value || !selection.isDragging.value && !selection.isMultiSelecting.value
-);
+function openMenu() {
+  ui.openDialog({ id: "menu", alignment: "left" });
+}
 const sidebarVisible = computed(() => {
   if (ui.isMobile.value) {
     return !selection.isDragging.value;

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

@@ -12,7 +12,8 @@ import {
   computed,
   onMounted,
   onBeforeUnmount,
-  watch
+  watch,
+  useTemplateRef
 } from "#imports";
 const props = defineProps({
   id: { type: String, required: true }
@@ -30,7 +31,13 @@ const rect = computed(() => {
     height: height.value
   };
 });
-const el = ref(null);
+const el = useTemplateRef("el");
+function getRootElement() {
+  return el.value;
+}
+defineExpose({
+  getRootElement
+});
 useAnimationFrame(() => {
   if (!el.value) {
     return;

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

@@ -1,11 +1,14 @@
 type __VLS_Props = {
     id: string;
 };
+declare function getRootElement(): HTMLElement | null;
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => 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 __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    getRootElement: typeof getRootElement;
+}, {}, {}, {}, 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 & {

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

@@ -1,11 +1,13 @@
 import AddListItem from './AddListItem/index.vue.js';
-import AddListItemIcon from './AddListItemIcon/index.vue.js';
+import ItemIconBox from './ItemIconBox/index.vue.js';
 import ArtboardTooltip from './ArtboardTooltip/index.vue.js';
+import Banner from './Banner/index.vue.js';
 import BlokkliTransition from './Transition/index.vue.js';
-import TransitionHeight from './Transition/Height.vue.js';
 import ConfigForm from './PluginConfigForm/index.vue.js';
 import DialogModal from './Dialog/index.vue.js';
 import DiffViewerState from './DiffViewer/State.vue.js';
+import ErrorBoundary from './BlokkliErrorBoundary.vue.js';
+import FormCheckboxes from './Form/Checkboxes/index.vue.js';
 import FormDatepicker from './Form/Datepicker/index.vue.js';
 import FormGroup from './Form/Group/index.vue.js';
 import FormItem from './Form/Item/index.vue.js';
@@ -25,10 +27,10 @@ import Pagination from './Pagination/index.vue.js';
 import RelativeTime from './RelativeTime/index.vue.js';
 import Resizable from './Resizable/index.vue.js';
 import ScaleToFit from './ScaleToFit/index.vue.js';
+import ScheduleDate from './ScheduleDate/index.vue.js';
 import ScrollBoundary from './ScrollBoundary/index.vue.js';
 import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
 import Sortli from './Sortli/index.vue.js';
-import Banner from './Banner/index.vue.js';
-import ScheduleDate from './ScheduleDate/index.vue.js';
+import TransitionHeight from './Transition/Height.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
-export { AddListItem, AddListItemIcon, ArtboardTooltip, BlokkliTransition, ConfigForm, DialogModal, DiffViewerState, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScrollBoundary, ShortcutIndicator, Sortli, ViewportBlockingRect, Banner, ScheduleDate, TransitionHeight, };
+export { AddListItem, ItemIconBox, ArtboardTooltip, Banner, BlokkliTransition, ConfigForm, DialogModal, DiffViewerState, ErrorBoundary, FormCheckboxes, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScheduleDate, ScrollBoundary, ShortcutIndicator, Sortli, TransitionHeight, ViewportBlockingRect, };

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

@@ -1,11 +1,13 @@
 import AddListItem from "./AddListItem/index.vue";
-import AddListItemIcon from "./AddListItemIcon/index.vue";
+import ItemIconBox from "./ItemIconBox/index.vue";
 import ArtboardTooltip from "./ArtboardTooltip/index.vue";
+import Banner from "./Banner/index.vue";
 import BlokkliTransition from "./Transition/index.vue";
-import TransitionHeight from "./Transition/Height.vue";
 import ConfigForm from "./PluginConfigForm/index.vue";
 import DialogModal from "./Dialog/index.vue";
 import DiffViewerState from "./DiffViewer/State.vue";
+import ErrorBoundary from "./BlokkliErrorBoundary.vue";
+import FormCheckboxes from "./Form/Checkboxes/index.vue";
 import FormDatepicker from "./Form/Datepicker/index.vue";
 import FormGroup from "./Form/Group/index.vue";
 import FormItem from "./Form/Item/index.vue";
@@ -25,20 +27,23 @@ import Pagination from "./Pagination/index.vue";
 import RelativeTime from "./RelativeTime/index.vue";
 import Resizable from "./Resizable/index.vue";
 import ScaleToFit from "./ScaleToFit/index.vue";
+import ScheduleDate from "./ScheduleDate/index.vue";
 import ScrollBoundary from "./ScrollBoundary/index.vue";
 import ShortcutIndicator from "./ShortcutIndicator/index.vue";
 import Sortli from "./Sortli/index.vue";
-import Banner from "./Banner/index.vue";
-import ScheduleDate from "./ScheduleDate/index.vue";
+import TransitionHeight from "./Transition/Height.vue";
 import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
 export {
   AddListItem,
-  AddListItemIcon,
+  ItemIconBox,
   ArtboardTooltip,
+  Banner,
   BlokkliTransition,
   ConfigForm,
   DialogModal,
   DiffViewerState,
+  ErrorBoundary,
+  FormCheckboxes,
   FormDatepicker,
   FormGroup,
   FormItem,
@@ -58,11 +63,10 @@ export {
   RelativeTime,
   Resizable,
   ScaleToFit,
+  ScheduleDate,
   ScrollBoundary,
   ShortcutIndicator,
   Sortli,
-  ViewportBlockingRect,
-  Banner,
-  ScheduleDate,
-  TransitionHeight
+  TransitionHeight,
+  ViewportBlockingRect
 };