@revenexx/editor 0.1.0

package/dist/runtime/editor/components/DiffViewer/State.vue

@@ -0,0 +1,549 @@
+<template>
+  <div class="bk bk-diff-view">
+    <div class="bk-diff-mode-selector">
+      <FormRadioTabs
+        id="diff-viewer-state-display"
+        v-model="diffMode"
+        :options="diffModeOptions"
+        :label="$t('display', 'Display')"
+        :scheme
+      />
+    </div>
+    <div class="bk-diff-table" :data-diff-mode="diffMode">
+      <button
+        v-for="item in diffItems"
+        :key="item.uuid"
+        class="bk-diff-item"
+        :class="{
+  'bk-is-muted': showSelect && !selected?.includes(item.uuid)
+}"
+        @click.prevent="onClick(item.uuid)"
+      >
+        <div
+          class="bk-diff-item-header"
+          :disabled="item.status === 'removed' && !showSelect"
+          :class="{
+  'bk-is-selected': showSelect && selected?.includes(item.uuid)
+}"
+        >
+          <div class="bk-blokkli-item-label">
+            <div class="bk-blokkli-item-label-icon">
+              <ItemIcon :bundle="item.bundle" />
+            </div>
+            <span>{{ getLabel(item.bundle) }}</span>
+          </div>
+          <div class="bk-diff-status">
+            <div
+              v-if="item.status === 'added'"
+              class="bk-diff-status-label bk-is-added"
+            >
+              {{ $t("diffStatusAdded", "Added") }}
+            </div>
+            <div
+              v-else-if="item.status === 'removed'"
+              class="bk-diff-status-label bk-is-removed"
+            >
+              {{ $t("diffStatusDeleted", "Deleted") }}
+            </div>
+            <div
+              v-else-if="item.status === 'unchanged'"
+              class="bk-diff-status-label"
+            >
+              {{ $t("diffStatusUnchanged", "Unchanged") }}
+            </div>
+            <div v-else class="bk-diff-status-label">
+              {{ $t("diffStatusEdited", "Edited") }}
+            </div>
+          </div>
+        </div>
+        <div class="bk-diff-item-diffs">
+          <div
+            v-for="prop in item.props"
+            :key="prop.key"
+            class="bk-diff-prop-row"
+          >
+            <h3>{{ prop.key }}</h3>
+            <div class="bk-diff-monospace">
+              <DiffDisplay
+                :before="prop.before || ''"
+                :after="prop.after || ''"
+                :mode="diffMode"
+              />
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import {
+  ItemIcon,
+  FormRadioTabs,
+  DiffDisplay
+} from "#blokkli/editor/components";
+const props = defineProps({
+  stateBefore: { type: Object, required: true },
+  stateAfter: { type: Object, required: true },
+  showSelect: { type: Boolean, required: false },
+  includeUuids: { type: Array, required: false },
+  selected: { type: Array, required: false },
+  scheme: { type: String, required: false }
+});
+const { types, $t, eventBus, dom, definitions, storage } = useBlokkli();
+const diffMode = storage.use("diffMode", "inline");
+const diffModeOptions = computed(() => [
+  {
+    value: "inline",
+    label: $t("diffModeInline", "Inline")
+  },
+  {
+    value: "side_by_side",
+    label: $t("diffModeSideBySide", "Both")
+  },
+  {
+    value: "after",
+    label: $t("after", "After")
+  }
+]);
+const emit = defineEmits(["toggle"]);
+function getProps(bundle, props2) {
+  const definition = definitions.getDefaultDefinition(bundle);
+  if (definition?.editor?.mapDiffProps) {
+    return definition.editor.mapDiffProps(props2);
+  }
+  if (typeof props2 === "object") {
+    return Object.entries(props2).reduce(
+      (acc, [key, value]) => {
+        if (typeof value === "string" || typeof value === "number") {
+          acc[key] = value.toString();
+        } else if (typeof value === "object") {
+          try {
+            const json = JSON.stringify(value, null, 2);
+            acc[key] = `<pre>${json}</pre>`;
+          } catch {
+          }
+        }
+        return acc;
+      },
+      {}
+    );
+  }
+  return {};
+}
+function buildDiffItems(fields) {
+  const items = (fields || []).flatMap((v) => v.list);
+  return items;
+}
+const itemsBefore = computed(
+  () => buildDiffItems(props.stateBefore.mutatedState?.fields)
+);
+const itemsAfter = computed(
+  () => buildDiffItems(props.stateAfter.mutatedState?.fields)
+);
+function toString(v) {
+  if (typeof v === "string") {
+    return v;
+  } else if (typeof v === "number") {
+    return v.toString();
+  }
+  return "";
+}
+const diffItems = computed(() => {
+  const diffMap = /* @__PURE__ */ new Map();
+  itemsBefore.value.forEach((beforeItem) => {
+    if (props.includeUuids && !props.includeUuids.includes(beforeItem.uuid)) {
+      return;
+    }
+    const afterItem = itemsAfter.value.find(
+      (item) => item.uuid === beforeItem.uuid
+    );
+    const beforeProps = getProps(beforeItem.bundle, beforeItem.props);
+    if (!afterItem) {
+      diffMap.set(beforeItem.uuid, {
+        uuid: beforeItem.uuid,
+        bundle: beforeItem.bundle,
+        status: "removed",
+        props: Object.entries(beforeProps).map(([key, value]) => ({
+          key,
+          before: toString(value),
+          after: ""
+        }))
+      });
+    } else {
+      const afterProps = getProps(afterItem.bundle, afterItem.props);
+      const changedProps = [];
+      Object.entries(beforeProps).forEach(([key, beforeValue]) => {
+        const afterValue = afterProps[key];
+        if (beforeValue !== afterValue) {
+          changedProps.push({
+            key,
+            before: toString(beforeValue),
+            after: toString(afterValue)
+          });
+        }
+      });
+      Object.keys(afterProps).forEach((key) => {
+        if (!(key in beforeProps)) {
+          changedProps.push({
+            key,
+            before: "",
+            after: toString(afterProps[key])
+          });
+        }
+      });
+      if (changedProps.length > 0) {
+        diffMap.set(beforeItem.uuid, {
+          uuid: beforeItem.uuid,
+          bundle: beforeItem.bundle,
+          status: "changed",
+          props: changedProps
+        });
+      } else if (props.includeUuids) {
+        diffMap.set(beforeItem.uuid, {
+          uuid: beforeItem.uuid,
+          bundle: beforeItem.bundle,
+          status: "unchanged",
+          props: []
+        });
+      }
+    }
+  });
+  itemsAfter.value.forEach((afterItem) => {
+    if (!itemsBefore.value.some((item) => item.uuid === afterItem.uuid)) {
+      const afterProps = getProps(afterItem.bundle, afterItem.props);
+      diffMap.set(afterItem.uuid, {
+        uuid: afterItem.uuid,
+        bundle: afterItem.bundle,
+        status: "added",
+        props: Object.entries(afterProps).map(([key, value]) => ({
+          key,
+          before: "",
+          after: toString(value)
+        }))
+      });
+    }
+  });
+  return Array.from(diffMap.values()).sort((a, b) => {
+    const aY = dom.getBlockRect(a.uuid)?.y || 0;
+    const bY = dom.getBlockRect(b.uuid)?.y || 0;
+    return aY - bY;
+  });
+});
+function onClick(uuid) {
+  if (props.showSelect) {
+    emit("toggle", uuid);
+  } else {
+    scrollToBlock(uuid);
+  }
+}
+function getLabel(bundle) {
+  return types.getBlockBundleDefinition(bundle)?.label || bundle;
+}
+function scrollToBlock(uuid) {
+  eventBus.emit("scrollIntoView", { uuid, center: true });
+  eventBus.emit("select", uuid);
+}
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-diff-sidebar-pane {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.bk.bk-diff-view {
+  -webkit-user-select: text;
+  user-select: text;
+  container-type: inline-size;
+}
+.bk.bk-diff-view .bk-blokkli-item-label {
+  flex: 1;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+}
+:is(.bk.bk-diff-view .bk-blokkli-item-label) span {
+  --bk-tw-leading: 1;
+  line-height: 1;
+}
+[disabled]:is(.bk.bk-diff-view .bk-blokkli-item-label) {
+  pointer-events: none;
+}
+.bk .bk-diff-mode-selector {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding: 20px;
+}
+.bk .bk-diff-table {
+  width: 100%;
+}
+.bk .bk-diff-item {
+  width: 100%;
+  border-top-style: var(--bk-tw-border-style);
+  border-top-width: 1px;
+  border-top-color: rgb(var(--bk-theme-mono-300) / 1);
+  color: rgb(var(--bk-theme-mono-900) / 1);
+}
+@media (hover: hover) {
+  :is(.bk .bk-diff-item):hover {
+    background-color: rgb(var(--bk-theme-mono-100) / 1);
+  }
+}
+.bk-is-muted:is(.bk .bk-diff-item) .bk-diff-item-diffs,.bk-is-muted:is(.bk .bk-diff-item) .bk-diff-status {
+  opacity: 50%;
+}
+.bk-is-muted:is(.bk .bk-diff-item) .bk-blokkli-item-label span {
+  color: rgb(var(--bk-theme-mono-400) / 1);
+}
+.bk .bk-diff-item-header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 20px;
+}
+.bk-is-selected:is(.bk .bk-diff-item-header) .bk-blokkli-item-label-icon {
+  border-color: rgb(var(--bk-theme-orange-dark) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk-is-selected:is(.bk .bk-diff-item-header) .bk-blokkli-item-label-icon {
+    border-color: color-mix(in oklab, rgb(var(--bk-theme-orange-dark) / 1) 30%, transparent);
+  }
+}
+.bk-is-selected:is(.bk .bk-diff-item-header) .bk-blokkli-item-label-icon {
+  background-color: rgb(var(--bk-theme-orange-normal) / 1);
+  color: rgb(var(--bk-theme-orange-dark) / 1);
+}
+.bk .bk-diff-prop-row {
+  padding-inline: 20px;
+  margin-bottom: 20px;
+}
+:is(.bk .bk-diff-prop-row) h3 {
+  margin-bottom: 5px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+}
+.bk .bk-diff-monospace {
+  font-family: monospace;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+:is(.bk .bk-diff-markup-style) p,:is(.bk .bk-diff-markup-style) ul,:is(.bk .bk-diff-markup-style) ol,:is(.bk .bk-diff-markup-style) h1,:is(.bk .bk-diff-markup-style) h2,:is(.bk .bk-diff-markup-style) h3,:is(.bk .bk-diff-markup-style) h4,:is(.bk .bk-diff-markup-style) h5,:is(.bk .bk-diff-markup-style) h6 {
+  margin-block: 20px;
+}
+:is(:is(.bk .bk-diff-markup-style) p,:is(.bk .bk-diff-markup-style) ul,:is(.bk .bk-diff-markup-style) ol,:is(.bk .bk-diff-markup-style) h1,:is(.bk .bk-diff-markup-style) h2,:is(.bk .bk-diff-markup-style) h3,:is(.bk .bk-diff-markup-style) h4,:is(.bk .bk-diff-markup-style) h5,:is(.bk .bk-diff-markup-style) h6):first-child {
+  margin-top: 0px;
+}
+:is(:is(.bk .bk-diff-markup-style) p,:is(.bk .bk-diff-markup-style) ul,:is(.bk .bk-diff-markup-style) ol,:is(.bk .bk-diff-markup-style) h1,:is(.bk .bk-diff-markup-style) h2,:is(.bk .bk-diff-markup-style) h3,:is(.bk .bk-diff-markup-style) h4,:is(.bk .bk-diff-markup-style) h5,:is(.bk .bk-diff-markup-style) h6):last-child {
+  margin-bottom: 0px;
+}
+:is(.bk .bk-diff-markup-style) h1,:is(.bk .bk-diff-markup-style) h2,:is(.bk .bk-diff-markup-style) h3,:is(.bk .bk-diff-markup-style) h4,:is(.bk .bk-diff-markup-style) h5,:is(.bk .bk-diff-markup-style) h6 {
+  --bk-tw-leading: var(--leading-tight, 1.25);
+  line-height: var(--leading-tight, 1.25);
+}
+:is(.bk .bk-diff-markup-style) p,:is(.bk .bk-diff-markup-style) ul,:is(.bk .bk-diff-markup-style) ol {
+  --bk-tw-leading: var(--leading-normal, 1.5);
+  line-height: var(--leading-normal, 1.5);
+}
+:is(.bk .bk-diff-markup-style) h2 {
+  font-size: 1.7em;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(.bk .bk-diff-markup-style) h3 {
+  font-size: 1.5em;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(.bk .bk-diff-markup-style) h4 {
+  font-size: 1.3em;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(.bk .bk-diff-markup-style) ul {
+  margin-left: 18px;
+  list-style-type: disc;
+}
+:is(.bk .bk-diff-markup-style) ol {
+  margin-left: 30px;
+  list-style-type: decimal;
+}
+:is(.bk .bk-diff-markup-style) a {
+  color: rgb(var(--bk-theme-accent-700) / 1);
+  text-decoration-line: underline;
+}
+:is(.bk .bk-diff-markup-style) blockquote {
+  border-left-style: var(--bk-tw-border-style);
+  border-left-width: 6px;
+  border-left-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding-left: 20px;
+}
+:is(.bk .bk-diff-markup-style) pre {
+  width: 100%;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  white-space: break-spaces;
+  word-break: break-all;
+}
+.bk .bk-diff-value {
+  display: inline;
+  word-break: break-word;
+}
+:is(:is(.bk .bk-diff-value) .bk-is-clipped) del {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+:is(.bk .bk-diff-value) del {
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  text-decoration-line: line-through;
+}
+:is(:is(.bk .bk-diff-value) del):has(img) {
+  display: block;
+  max-width: 300px;
+  overflow: hidden;
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  border-style: var(--bk-tw-border-style);
+  border-width: 2px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+:is(:is(.bk .bk-diff-value) del):has(img) img {
+  opacity: 0.7;
+}
+:is(.bk .bk-diff-value) ins {
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-lime-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-value) ins {
+    border-color: color-mix(in oklab, rgb(var(--bk-theme-lime-normal) / 1) 30%, transparent);
+  }
+}
+:is(.bk .bk-diff-value) ins {
+  background-color: rgb(var(--bk-theme-lime-light) / 1);
+  color: rgb(var(--bk-theme-lime-dark) / 1);
+  text-decoration-line: none;
+}
+:is(:is(.bk .bk-diff-value) ins):has(img) {
+  border-style: var(--bk-tw-border-style);
+  border-width: 2px;
+  border-color: rgb(var(--bk-theme-lime-normal) / 1);
+  display: block;
+  max-width: 300px;
+  overflow: hidden;
+}
+:is(.bk .bk-diff-value) del:has(img) + ins:has(img) {
+  margin-top: 15px;
+}
+.bk .bk-diff-prop-side-by-side {
+  display: grid;
+  gap: 10px;
+}
+@container (min-width: 700px) {
+  .bk .bk-diff-prop-side-by-side {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-before,:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-after {
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding: 10px;
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-before {
+  background-color: rgb(var(--bk-theme-red-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-before {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-light) / 1) 20%, transparent);
+  }
+}
+:is(:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-before) .bk-diff-prop-label {
+  color: rgb(var(--bk-theme-red-normal) / 1);
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-after {
+  background-color: rgb(var(--bk-theme-lime-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-after {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-lime-light) / 1) 20%, transparent);
+  }
+}
+:is(:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-after) .bk-diff-prop-label {
+  color: rgb(var(--bk-theme-lime-normal) / 1);
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-label {
+  margin-bottom: 5px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  --bk-tw-tracking: var(--tracking-wider, 0.05em);
+  letter-spacing: var(--tracking-wider, 0.05em);
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  text-transform: uppercase;
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-content {
+  word-break: break-word;
+}
+:is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-lime-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+    border-color: color-mix(in oklab, rgb(var(--bk-theme-lime-normal) / 1) 30%, transparent);
+  }
+}
+:is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+  background-color: rgb(var(--bk-theme-lime-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-lime-light) / 1) 20%, transparent);
+  }
+}
+:is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+  padding: 10px;
+  word-break: break-word;
+}
+.bk .bk-diff-status-label {
+  display: inline-block;
+  --bk-tw-translate-y: -3px;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  border-radius: calc(infinity * 1px);
+  padding-inline: 7px;
+  padding-block: 2px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  --bk-tw-tracking: var(--tracking-wider, 0.05em);
+  letter-spacing: var(--tracking-wider, 0.05em);
+  text-transform: uppercase;
+  background-color: rgb(var(--bk-theme-mono-200) / 1);
+  color: rgb(var(--bk-theme-mono-500) / 1);
+}
+.bk-is-added:is(.bk .bk-diff-status-label) {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
+  color: white;
+}
+.bk-is-removed:is(.bk .bk-diff-status-label) {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  color: white;
+}
+</style>

package/dist/runtime/editor/components/DiffViewer/State.vue.d.ts

@@ -0,0 +1,17 @@
+import type { ThemeColorName } from './../../../../global/types/theme.js';
+import type { MappedState } from '#blokkli/editor/types/state';
+type __VLS_Props = {
+    stateBefore: MappedState;
+    stateAfter: MappedState;
+    showSelect?: boolean;
+    includeUuids?: string[];
+    selected?: string[];
+    scheme?: ThemeColorName;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+type DataItem = {
+    label: string;
+    value: number;
+    color: string;
+};
+type __VLS_Props = {
+    data: DataItem[];
+    radius?: number;
+    thickness?: number;
+    centerText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    radius: number;
+    thickness: number;
+    centerText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,97 @@
+<template>
+  <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`">
+    <circle
+      v-if="dataWithValues.length === 1"
+      :cx="radius"
+      :cy="radius"
+      :r="radius"
+      :fill="dataWithValues[0]?.color"
+    />
+    <g v-else :transform="`translate(${radius}, ${radius})`">
+      <path
+        v-for="(segment, index) in segments"
+        :key="index"
+        :d="segment.path"
+        :fill="segment.color"
+        stroke-width="2"
+        stroke="white"
+      />
+    </g>
+    <circle :cx="radius" :cy="radius" :r="radius - thickness" fill="white" />
+    <text
+      v-if="centerText"
+      x="50%"
+      y="50%"
+      dominant-baseline="middle"
+      text-anchor="middle"
+      fill="currentColor"
+      class="_bk_font-bold"
+    >
+      {{ centerText }}
+    </text>
+  </svg>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  data: { type: Array, required: true },
+  radius: { type: Number, required: false, default: 34 },
+  thickness: { type: Number, required: false, default: 10 },
+  centerText: { type: String, required: false, default: void 0 }
+});
+const size = computed(() => props.radius * 2);
+const dataWithValues = computed(
+  () => props.data.filter((item) => item.value > 0)
+);
+const segments = computed(() => {
+  const total = props.data.reduce((sum, item) => sum + item.value, 0);
+  if (total === 0) return [];
+  let currentAngle = -90;
+  return props.data.filter((item) => item.value > 0).map((item) => {
+    const percentage = item.value / total;
+    const angle = percentage * 360;
+    const startAngle = currentAngle;
+    const endAngle = currentAngle + angle;
+    const path = createPieSegment(
+      0,
+      0,
+      // center x, y
+      props.radius,
+      startAngle,
+      endAngle
+    );
+    currentAngle = endAngle;
+    return {
+      path,
+      color: item.color,
+      label: item.label,
+      value: item.value,
+      percentage
+    };
+  });
+});
+function createPieSegment(cx, cy, radius, startAngle, endAngle) {
+  const start = startAngle * Math.PI / 180;
+  const end = endAngle * Math.PI / 180;
+  const x1 = cx + radius * Math.cos(start);
+  const y1 = cy + radius * Math.sin(start);
+  const x2 = cx + radius * Math.cos(end);
+  const y2 = cy + radius * Math.sin(end);
+  const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+  if (endAngle - startAngle >= 360) {
+    return `
+        M ${cx} ${cy}
+        L ${cx + radius} ${cy}
+        A ${radius} ${radius} 0 1 1 ${cx + radius} ${cy + 1e-3}
+        Z
+      `;
+  }
+  return `
+      M ${cx} ${cy}
+      L ${x1} ${y1}
+      A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}
+      Z
+    `;
+}
+</script>

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

@@ -0,0 +1,18 @@
+type DataItem = {
+    label: string;
+    value: number;
+    color: string;
+};
+type __VLS_Props = {
+    data: DataItem[];
+    radius?: number;
+    thickness?: number;
+    centerText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    radius: number;
+    thickness: number;
+    centerText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;