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

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

@@ -84,59 +84,53 @@ function dismiss() {
 }
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk ul.bk-system-requirements {
-    margin-bottom: 15px;
-    display: grid;
-    gap: 10px
+  margin-bottom: 15px;
+  display: grid;
+  gap: 10px;
 }
-    .bk ul.bk-system-requirements li {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    border-radius: 4px;
-    border-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    padding: 10px
+:is(.bk ul.bk-system-requirements) li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding: 10px;
 }
-    .bk ul.bk-system-requirements li h3 {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    font-size: 18px;
-    line-height: 28px;
-    font-weight: 700
+:is(:is(.bk ul.bk-system-requirements) li) h3 {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: var(--text-lg, 18px);
+  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
 }
-    .bk ul.bk-system-requirements li.bk-is-success .bk-system-requirements-icon {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-text-opacity, 1))
+.bk-is-success:is(:is(.bk ul.bk-system-requirements) li) .bk-system-requirements-icon {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
+  color: rgb(var(--bk-theme-lime-light) / 1);
 }
-    .bk ul.bk-system-requirements li.bk-is-error {
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-light) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-text-opacity, 1))
+.bk-is-error:is(:is(.bk ul.bk-system-requirements) li) {
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+  background-color: rgb(var(--bk-theme-red-light) / 1);
+  color: rgb(var(--bk-theme-red-dark) / 1);
 }
-    .bk ul.bk-system-requirements li.bk-is-error .bk-system-requirements-icon {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-red-light) / var(--bk-tw-text-opacity, 1))
+.bk-is-error:is(:is(.bk ul.bk-system-requirements) li) .bk-system-requirements-icon {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  color: rgb(var(--bk-theme-red-light) / 1);
 }
-  .bk .bk-system-requirements-icon {
-    position: relative;
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-    border-radius: 9999px;
-    padding: 2px
+.bk .bk-system-requirements-icon {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: calc(infinity * 1px);
+  padding: 2px;
 }
-  .bk .bk-system-requirements-icon svg {
-    fill: currentColor
+:is(.bk .bk-system-requirements-icon) svg {
+  fill: currentcolor;
 }
 </style>

package/dist/runtime/editor/components/Tabs/index.d.vue.ts

@@ -5,6 +5,7 @@ export type TabItem<Id extends string = string> = {
 declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         tabs: TabItem<T>[];
+        mono?: boolean;
     } & {
         modelValue: T;
     }) & {

package/dist/runtime/editor/components/Tabs/index.vue

@@ -9,10 +9,11 @@
         role="tab"
         :aria-selected="modelValue === tab.id"
         :class="{
-  '_bk_!bg-white _bk_!text-mono-900': modelValue === tab.id,
+  '_bk_!bg-mono-100 _bk_!text-mono-900': modelValue === tab.id && mono,
+  '_bk_!bg-white _bk_!text-mono-900': modelValue === tab.id && !mono,
   '_bk_hover:!bg-mono-700': modelValue !== tab.id
 }"
-        class="_bk_text-lg _bk_font-bold _bk_px-30 _bk_py-10 _bk_rounded-t-md _bk_text-white"
+        class="_bk_text-lg _bk_font-bold _bk_px-30 _bk_py-10 _bk_text-white _bk_rounded-t"
         @click.prevent="modelValue = tab.id"
       >
         {{ tab.label }}
@@ -26,7 +27,8 @@
 
 <script setup>
 defineProps({
-  tabs: { type: Array, required: true }
+  tabs: { type: Array, required: true },
+  mono: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: null, ...{ required: true } });
 </script>

package/dist/runtime/editor/components/Tabs/index.vue.d.ts

@@ -5,6 +5,7 @@ export type TabItem<Id extends string = string> = {
 declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         tabs: TabItem<T>[];
+        mono?: boolean;
     } & {
         modelValue: T;
     }) & {

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/Button/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/Button/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <button
+    ref="buttonEl"
+    class="_bk_flex _bk_gap-8 _bk_whitespace-nowrap _bk_w-full _bk_px-10 _bk_text-mono-800 _bk_items-center _bk_hover:bg-mono-100 _bk_min-h-50 _bk_group/tooltip _bk_relative _bk_border-b _bk_border-b-mono-200 _bk_last:border-b-0 _bk_group/toggle"
+    :class="{ 'bk-is-inactive': !isActive }"
+    @click.prevent.stop="toggle"
+  >
+    <Icon v-if="icon" :name="icon" class="_bk_size-20" />
+    <div class="_bk_font-medium _bk_text-base">
+      {{ label }}
+    </div>
+    <div class="_bk_ml-auto">
+      <FormToggle :model-value="isActive" />
+    </div>
+    <Tooltip :label="description" placement="center-before">
+      <template v-if="keyCode" #shortcut>
+        <ShortcutIndicator meta :key-code :label group="ui" @pressed="toggle" />
+      </template>
+    </Tooltip>
+  </button>
+</template>
+
+<script setup>
+import { useBlokkli, useTemplateRef, watch } from "#imports";
+import {
+  Icon,
+  ShortcutIndicator,
+  Tooltip,
+  FormToggle
+} from "#blokkli/editor/components";
+import { defineCommands, defineTourItem } from "#blokkli/editor/composables";
+const props = defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: true },
+  icon: { type: null, required: true },
+  keyCode: { type: String, required: false },
+  tourText: { type: String, required: false },
+  weight: { type: Number, required: false }
+});
+const { storage, eventBus, $t } = useBlokkli();
+const buttonEl = useTemplateRef("buttonEl");
+const isActive = storage.use("view_option_" + props.id, false, true);
+function toggle() {
+  isActive.value = !isActive.value;
+}
+watch(isActive, () => {
+  eventBus.emit("view-option:toggle", { id: props.id });
+});
+defineCommands(() => ({
+  id: "plugin:view_option:" + props.id,
+  label: (isActive.value ? $t("viewOptionDisable", 'Disable "@option"') : $t("viewOptionEnable", 'Enable "@option"')).replace("@option", props.label),
+  icon: props.icon,
+  group: "ui",
+  callback: toggle
+}));
+defineTourItem(() => {
+  if (!props.tourText) {
+    return;
+  }
+  return {
+    id: "plugin:view_option:" + props.id,
+    title: props.label,
+    text: props.tourText,
+    element: () => buttonEl.value
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "ToolbarViewOptionsButton"
+};
+</script>

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/Button/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ViewOption } from '#blokkli/editor/providers/plugin';
+type __VLS_Props = {
+    options: ViewOption[];
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <ViewOptionButton
+      v-for="option in options"
+      :key="option.id"
+      v-bind="option"
+    />
+  </div>
+</template>
+
+<script setup>
+import ViewOptionButton from "./Button/index.vue";
+defineProps({
+  options: { type: Array, required: true }
+});
+</script>

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ViewOption } from '#blokkli/editor/providers/plugin';
+type __VLS_Props = {
+    options: ViewOption[];
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Toolbar/ViewOptions/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/Toolbar/ViewOptions/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    id="bk-toolbar-view-options"
+    class="_bk_relative _bk_group _bk_border-l _bk_border-l-mono-600"
+  >
+    <button
+      ref="toggleElement"
+      class="bk-toolbar-button bk-has-dropdown-bottom _bk_group/tooltip"
+      :class="{
+  'bk-is-active': isVisible
+}"
+      @click.prevent="isVisible = !isVisible"
+    >
+      <Icon name="bk_mdi_eye_tracking" />
+      <Tooltip
+        :label="$t('viewOptions', 'View options')"
+        placement="below-right"
+      />
+    </button>
+    <BlokkliTransition name="context-menu">
+      <ToolbarDropdown
+        v-if="isVisible"
+        :toggle-element
+        :title="$t('viewOptions', 'View options')"
+        class="_bk_origin-top-right"
+        @close="isVisible = false"
+      >
+        <ViewOptionsList :options />
+      </ToolbarDropdown>
+    </BlokkliTransition>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli, useTemplateRef } from "#imports";
+import ViewOptionsList from "./List/index.vue";
+import {
+  Icon,
+  ToolbarDropdown,
+  Tooltip,
+  BlokkliTransition
+} from "#blokkli/editor/components";
+const { plugins, $t } = useBlokkli();
+const isVisible = ref(false);
+const toggleElement = useTemplateRef("toggleElement");
+const options = computed(
+  () => [...plugins.get("viewOption")].sort(
+    (a, b) => (a.weight ?? 0) - (b.weight ?? 0)
+  )
+);
+</script>
+
+<script>
+export default {
+  name: "ToolbarViewOptions"
+};
+</script>

package/dist/runtime/editor/components/Toolbar/ViewOptions/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;