@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.60

package/dist/runtime/editor/features/media-library/index.vue

@@ -70,7 +70,7 @@ defineDropAreas((dragItems) => {
       type: field.type,
       fieldName: field.fieldName
     };
-    const label = $t("mediaLibraryReplaceMedia", "Replace @field").replace(
+    const label = $t("replaceField", "Replace @field").replace(
       "@field",
       config.label
     );
@@ -150,273 +150,227 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-media-library {
   height: 100%;
   width: 100%;
   overflow: auto;
   container-type: inline-size;
 }
-
-  .bk.bk-media-library .bk-pagination {
+.bk.bk-media-library .bk-pagination {
   position: sticky;
   bottom: 0px;
   z-index: 50;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  background-color: white;
 }
-
-  .bk.bk-media-library .bk-media-library-items {
+.bk.bk-media-library .bk-media-library-items {
   width: 100%;
   min-width: 0px;
 }
-
-  .bk.bk-media-library .bk-media-library-items > div {
+:is(.bk.bk-media-library .bk-media-library-items)  > div {
   width: 100%;
   min-width: 0px;
 }
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+.bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   padding-top: 10px;
 }
-
-  @container (min-width: 500px) {
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+@container (min-width: 500px) {
+  .bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-      }
-
-  @container (min-width: 600px) {
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+}
+@container (min-width: 600px) {
+  .bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-      }
-
-  @container (min-width: 800px) {
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+}
+@container (min-width: 800px) {
+  .bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
-      }
-
-  @container (min-width: 1000px) {
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+}
+@container (min-width: 1000px) {
+  .bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
-      }
-
-  @container (min-width: 1200px) {
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+}
+@container (min-width: 1200px) {
+  .bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
-      }
-
-  @container (min-width: 1400px) {
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+}
+@container (min-width: 1400px) {
+  .bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
-      }
-
-  @container (min-width: 1600px) {
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+}
+@container (min-width: 1600px) {
+  .bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
     grid-template-columns: repeat(9, minmax(0, 1fr));
   }
-      }
-
-  @container (min-width: 1800px) {
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+}
+@container (min-width: 1800px) {
+  .bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
     grid-template-columns: repeat(10, minmax(0, 1fr));
   }
-      }
-
-  @container (min-width: 2000px) {
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-grid > div {
+}
+@container (min-width: 2000px) {
+  .bk-is-grid:is(.bk.bk-media-library .bk-media-library-items) > div {
     grid-template-columns: repeat(11, minmax(0, 1fr));
   }
-      }
-
-  .bk.bk-media-library .bk-media-library-items.bk-is-horizontal > div {
+}
+.bk-is-horizontal:is(.bk.bk-media-library .bk-media-library-items) > div {
   display: grid;
 }
-
-  .bk.bk-media-library .bk-media-library-filters-listview {
+.bk.bk-media-library .bk-media-library-filters-listview {
   display: flex;
   aspect-ratio: 1 / 1;
   width: 54px;
   align-items: center;
   justify-content: center;
-    flex: 0 0 54px !important;
+  flex: 0 0 54px !important;
 }
-
-  .bk.bk-media-library .bk-media-library-filters-listview button {
+:is(.bk.bk-media-library .bk-media-library-filters-listview) button {
   display: flex;
   height: 100%;
   width: 100%;
   align-items: center;
   justify-content: center;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+  color: rgb(var(--bk-theme-mono-500) / 1);
 }
-
-  .bk.bk-media-library .bk-media-library-filters-listview button:hover {
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
+@media (hover: hover) {
+  :is(:is(.bk.bk-media-library .bk-media-library-filters-listview) button):hover {
+    color: rgb(var(--bk-theme-mono-900) / 1);
+  }
 }
-
-  .bk.bk-media-library .bk-media-library-filters-listview .bk-icon {
+:is(.bk.bk-media-library .bk-media-library-filters-listview) .bk-icon {
   height: 25px;
   width: 25px;
 }
-
-  .bk.bk-media-library .bk-media-library-filters-listview .bk-icon svg {
-  fill: currentColor;
+:is(:is(.bk.bk-media-library .bk-media-library-filters-listview) .bk-icon) svg {
+  fill: currentcolor;
 }
-
-  .bk.bk-media-library .bk-loading {
+.bk.bk-media-library .bk-loading {
   position: absolute;
   inset: 0px;
   z-index: 40;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgb(255 255 255 / 0.8);
+  background-color: color-mix(in oklab, white 80%, transparent);
 }
-
-  .bk.bk-media-library .bk-loading svg {
+:is(.bk.bk-media-library .bk-loading) svg {
   height: 50px;
   width: 50px;
   fill: rgb(var(--bk-theme-mono-400) / 1);
 }
-
-  .bk.bk-media-library .bk-media-library-cancel {
+.bk.bk-media-library .bk-media-library-cancel {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  background-color: white;
   padding: 10px;
 }
-
-  .bk.bk-media-library .bk-media-library-cancel button {
+:is(.bk.bk-media-library .bk-media-library-cancel) button {
   width: 100%;
 }
-
 .bk .bk-media-library-items-item {
   position: relative;
   cursor: grab;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  -webkit-user-select: none;
   user-select: none;
-  font-size: 14px;
-  line-height: 20px;
 }
-
-.bk .bk-media-library-items-item.bk-is-disabled {
+.bk-is-disabled:is(.bk .bk-media-library-items-item) {
   pointer-events: none;
-  opacity: 0.25;
+  opacity: 25%;
 }
-
-.bk .bk-media-library-items-item:hover label {
-  opacity: 1 !important;
+:is(.bk .bk-media-library-items-item):hover label {
+  opacity: 100% !important;
 }
-
-.bk .bk-media-library-items-item.bk-is-selected .bk-media-library-items-item-image:before {
-          content: '';
-          pointer-events: none;
-          position: absolute;
-          top: 0px;
-          left: 0px;
-          z-index: 50;
-          width: 100%;
-          height: 100%;
-          background-color: rgb(var(--bk-theme-accent-700) / 0.35);
-          border-width: 3px;
-          --bk-tw-border-opacity: 1;
-          border-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1));
-          border-radius: inherit;
-        }
-
-.bk .bk-media-library-items-item.bk-is-selected label {
-  opacity: 1 !important;
+:is(.bk-is-selected:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-image):before {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 50;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(var(--bk-theme-accent-700) / 1);
 }
-
-.bk .bk-media-library-items-item:hover .bk-media-library-items-item-image {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk-is-selected:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-image):before {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-accent-700) / 1) 35%, transparent);
+  }
 }
-
-.bk .bk-media-library-items-item:hover label {
-  opacity: 1;
+:is(.bk-is-selected:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-image):before {
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-accent-700) / 1);
+  border-radius: inherit;
 }
-
-.bk .bk-media-library-items-item h3 {
+.bk-is-selected:is(.bk .bk-media-library-items-item) label {
+  opacity: 100% !important;
+}
+:is(.bk .bk-media-library-items-item):hover .bk-media-library-items-item-image {
+  border-color: rgb(var(--bk-theme-mono-400) / 1);
+}
+:is(.bk .bk-media-library-items-item):hover label {
+  opacity: 100%;
+}
+:is(.bk .bk-media-library-items-item) h3 {
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
   overflow-wrap: break-word;
-  font-weight: 600;
 }
-
-.bk .bk-media-library-items-item p {
+:is(.bk .bk-media-library-items-item) p {
   overflow-wrap: break-word;
 }
-
-.bk .bk-media-library-items-item .bk-media-library-items-item-box {
+:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-box {
   position: relative;
 }
-
-.bk .bk-media-library-items-item .bk-media-library-items-item-box > label {
+:is(:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-box)  > label {
   position: absolute;
   top: 0px;
   right: 0px;
   z-index: 50;
   cursor: pointer;
   padding: 10px;
-  opacity: 0;
+  opacity: 0%;
 }
-
-.bk .bk-media-library-items-item .bk-media-library-items-item-box > label:hover input {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-accent-100) / var(--bk-tw-bg-opacity, 1));
+:is(:is(:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-box) > label):hover input {
+  background-color: rgb(var(--bk-theme-accent-100) / 1);
 }
-
-.bk .bk-media-library-items-item .bk-media-library-items-item-box > label input {
+:is(:is(:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-box) > label) input {
   cursor: pointer;
 }
-
-.bk .bk-media-library-items-item .bk-media-library-items-item-box > label input:checked {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1));
+:is(:is(:is(:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-box) > label) input):checked {
+  background-color: rgb(var(--bk-theme-accent-700) / 1);
 }
-
-.bk .bk-media-library-items-item .bk-media-library-items-item-box > label input {
+:is(:is(:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-box) > label) input {
   border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
   border-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  border-color: rgb(var(--bk-theme-mono-400) / 1);
+  background-color: white;
 }
-
-.bk .bk-media-library-items-item .bk-media-library-items-item-image {
+:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-image {
   position: relative;
   display: block;
   aspect-ratio: 1 / 1;
   width: 100%;
   overflow: hidden;
   border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
   border-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
 }
-
-.bk .bk-media-library-items-item .bk-media-library-items-item-image img {
+:is(:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-image) img {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -424,59 +378,49 @@ export default {
   width: 100%;
   object-fit: cover;
 }
-
-.bk .bk-media-library-items-item .bk-media-library-items-item-text {
+:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-text {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
 }
-
-.bk .bk-media-library-items-item.bk-is-grid {
+.bk-is-grid:is(.bk .bk-media-library-items-item) {
   padding: 10px;
 }
-
-.bk .bk-media-library-items-item.bk-is-grid:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+@media (hover: hover) {
+  .bk-is-grid:is(.bk .bk-media-library-items-item):hover {
+    background-color: rgb(var(--bk-theme-mono-100) / 1);
+  }
 }
-
-.bk .bk-media-library-items-item.bk-is-grid h3 {
+.bk-is-grid:is(.bk .bk-media-library-items-item) h3 {
   margin-top: 5px;
 }
-
-.bk .bk-media-library-items-item.bk-is-horizontal {
+.bk-is-horizontal:is(.bk .bk-media-library-items-item) {
   display: flex;
   width: 100%;
   min-width: 0px;
   gap: 15px;
   padding: 15px;
 }
-
-.bk .bk-media-library-items-item.bk-is-horizontal:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+@media (hover: hover) {
+  .bk-is-horizontal:is(.bk .bk-media-library-items-item):hover {
+    background-color: rgb(var(--bk-theme-mono-100) / 1);
+  }
 }
-
-.bk .bk-media-library-items-item.bk-is-horizontal .bk-media-library-items-item-image {
+.bk-is-horizontal:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-image {
   width: 90px;
 }
-
 @container (min-width: 400px) {
-
-.bk .bk-media-library-items-item.bk-is-horizontal .bk-media-library-items-item-image {
+  .bk-is-horizontal:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-image {
     width: 120px;
   }
-        }
-
-.bk .bk-media-library-items-item.bk-is-horizontal .bk-media-library-items-item-text {
-  flex: 1 1 0%;
 }
-
+.bk-is-horizontal:is(.bk .bk-media-library-items-item) .bk-media-library-items-item-text {
+  flex: 1;
+}
 .bk-vars.bk-dragging-overlay .bk-media-library-items-item {
   overflow: hidden;
-  border-radius: 8px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+  border-radius: 4px;
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
 }
 </style>

package/dist/runtime/editor/features/multi-select/index.vue

@@ -1,9 +1,5 @@
 <template>
-  <ErrorBoundary
-    v-model="isLocked"
-    :label="$t('feature_multi-select_label', 'Multiselect')"
-    @error="onError"
-  >
+  <ErrorBoundary v-model="isLocked" label="Multiselect" @error="onError">
     <Renderer
       v-if="shouldRender"
       :key="animation.renderKey.value"
@@ -33,7 +29,7 @@ defineBlokkliFeature({
   description: "Implements support for selecting multiple blocks using a select rectangle.",
   viewports: ["desktop"]
 });
-const { keyboard, eventBus, selection, animation, $t } = useBlokkli();
+const { keyboard, eventBus, selection, animation } = useBlokkli();
 const isLocked = ref(false);
 const enabled = computed(
   () => !selection.activeFieldLabel.value && !isLocked.value

package/dist/runtime/editor/features/notifications/Item/index.d.vue.ts

@@ -0,0 +1,4 @@
+import type { BlokkliNotification } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<BlokkliNotification, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlokkliNotification> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/notifications/Item/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <li class="_bk_border-b _bk_border-b-mono-300">
+    <component
+      :is="href ? 'a' : 'div'"
+      :href="href || void 0"
+      :target="href ? '_blank' : void 0"
+      :rel="href ? 'noopener' : void 0"
+      class="bk-notification-item _bk_px-10 _bk_py-15 _bk_hover:border-mono-300 _bk_flex _bk_gap-8 _bk_group"
+      :class="{
+  '_bk_hover:bg-mono-100': href
+}"
+    >
+      <div
+        class="_bk_shrink-0 _bk_size-25 _bk_rounded-full _bk_flex _bk_items-center _bk_justify-center"
+        :class="{
+  '_bk_bg-mono-200 _bk_text-mono-500': read,
+  '_bk_text-yellow-dark! _bk_bg-yellow-normal': !read
+}"
+      >
+        <Icon :name="icon" class="_bk_size-15" />
+      </div>
+
+      <div class="_bk_min-w-0 _bk_flex-1">
+        <div class="_bk_text-sm _bk_text-mono-900 _bk_font-semibold _bk_leading-tight">
+          {{ title }}
+        </div>
+        <div class="_bk_text-xs _bk_text-mono-600 _bk_flex _bk_items-center _bk_gap-5 _bk_min-w-0 _bk_mt-3">
+          <div class="_bk_shrink-0 _bk_font-semibold">
+            <RelativeTime :timestamp="created" />
+          </div>
+          <template v-if="host">
+            <span class="_bk_truncate">{{ host.label }}</span>
+          </template>
+        </div>
+        <div v-if="message" class="_bk_text-sm _bk_mt-10">
+          {{ message }}
+        </div>
+      </div>
+    </component>
+  </li>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { Icon, RelativeTime } from "#blokkli/editor/components";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  read: { type: Boolean, required: true },
+  created: { type: String, required: true },
+  type: { type: null, required: true },
+  title: { type: String, required: true },
+  message: { type: String, required: false },
+  user: { type: [Object, null], required: false },
+  relatedEntityUuid: { type: String, required: false },
+  host: { type: [Object, null], required: true }
+});
+const ICONS = {
+  "comment:mention": "bk_mdi_alternate_email",
+  "comment:resolved": "bk_mdi_check_circle",
+  "comment:reply": "bk_mdi_chat",
+  "comment:thread": "bk_mdi_chat",
+  "edit-state:approved": "bk_mdi_verified",
+  generic: "bk_mdi_notifications"
+};
+const icon = computed(() => ICONS[props.type]);
+function extraQuery() {
+  if (!props.relatedEntityUuid) {
+    return {};
+  }
+  switch (props.type) {
+    case "comment:mention":
+    case "comment:reply":
+    case "comment:resolved":
+    case "comment:thread":
+      return { blokkliComment: props.relatedEntityUuid };
+  }
+  return {};
+}
+const href = computed(() => {
+  if (!props.host) {
+    return null;
+  }
+  const url = new URL(props.host.url, window.location.origin);
+  url.searchParams.set("blokkliEditing", props.host.uuid);
+  for (const [key, value] of Object.entries(extraQuery())) {
+    url.searchParams.set(key, value);
+  }
+  return url.origin === window.location.origin ? url.pathname + url.search + url.hash : url.toString();
+});
+</script>
+
+<script>
+export default {
+  name: "NotificationItem"
+};
+</script>

package/dist/runtime/editor/features/notifications/Item/index.vue.d.ts

@@ -0,0 +1,4 @@
+import type { BlokkliNotification } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<BlokkliNotification, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlokkliNotification> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/notifications/List/index.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    unreadCount: number | null;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:unreadCount": (value: number | null) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    unreadCount: number | null;
+}> & Readonly<{
+    "onUpdate:unreadCount"?: ((value: number | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;