@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItem.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="bk-analyze-results-item">
+    <div class="bk-analyze-results-item-tags">
+      <Status :status :title="key" />
+      <div class="bk-pill bk-is-mono">{{ categoryLabel }}</div>
+      <div class="bk-analyze-results-item-help">
+        <a v-if="link" :href="link" target="_blank" :title="link">
+          <span>{{ $t("analyzeMoreLink", "More") }}</span>
+          <Icon name="help" />
+        </a>
+      </div>
+    </div>
+    <h3>{{ title }}</h3>
+    <p v-if="descriptionMapped || link">
+      {{ descriptionMapped }}
+    </p>
+
+    <ResultsItemNodes :nodes :result-id="id" />
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+import Status from "./Status.vue";
+import ResultsItemNodes from "./ResultsItemNodes.vue";
+import { useAnalyzeHelper } from "../helper";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  category: { type: String, required: true },
+  description: { type: String, required: true },
+  link: { type: String, required: false },
+  status: { type: String, required: true },
+  nodes: { type: [Object, Array], required: true },
+  impact: { type: String, required: false },
+  scoreTargets: { type: Boolean, required: false },
+  plugin: { type: String, required: true }
+});
+const { getCategoryLabel } = useAnalyzeHelper();
+const { $t } = useBlokkli();
+const categoryLabel = computed(() => {
+  return getCategoryLabel(props.category);
+});
+const descriptionMapped = computed(() => {
+  if (!props.description) {
+    return "";
+  }
+  const punctuation = /[.!?]$/;
+  if (punctuation.test(props.description.trim())) {
+    return props.description;
+  }
+  return props.description + ".";
+});
+const key = computed(() => `${props.plugin}:${props.id}`);
+</script>

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItem.vue.d.ts

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

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodes.vue

@@ -0,0 +1,87 @@
+<template>
+  <details
+    v-if="mappedNodes.length"
+    class="bk-analyze-results-item-nodes"
+    :open="isSingle || isOpen"
+    @toggle="shouldRender = true"
+  >
+    <summary v-show="!isSingle">
+      <span>{{ $t("multipleItemsLabel", "Items") }}</span>
+      <Icon name="caret" />
+    </summary>
+
+    <div v-if="shouldRender" class="bk-analyze-results-item-nodes-list">
+      <ul v-for="(group, i) in grouped" :key="i">
+        <li>
+          <p
+            v-if="group.description && group.description !== 'NONE'"
+            :class="{
+  'bk-is-single': isSingle
+}"
+            v-html="group.description"
+          />
+          <ul>
+            <li v-for="(node, j) in group.nodes" :key="i + '_' + j">
+              <ResultsItemNodesTarget
+                v-for="(target, k) in node.targets"
+                :key="i + '_' + j + '_' + k"
+                :target="target"
+                :result-id
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </details>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli } from "#imports";
+import ResultsItemNodesTarget from "./ResultsItemNodesTarget.vue";
+import { Icon } from "#blokkli/components";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const props = defineProps({
+  resultId: { type: String, required: true },
+  nodes: { type: [Object, Array], required: true }
+});
+const shouldRender = ref(false);
+const isOpen = ref(false);
+const { $t } = useBlokkli();
+const mappedNodes = computed(() => {
+  const nodes = Array.isArray(props.nodes) ? props.nodes : [props.nodes];
+  return nodes.map((node) => {
+    return {
+      ...node,
+      targets: Array.isArray(node.targets) ? node.targets : [node.targets]
+    };
+  });
+});
+const isSingle = computed(
+  () => mappedNodes.value.length === 1 && mappedNodes.value[0]?.targets.length === 1
+);
+const grouped = computed(() => {
+  const map = mappedNodes.value.reduce(
+    (acc, node) => {
+      const description = node.description ?? "NONE";
+      if (!acc[description]) {
+        acc[description] = [];
+      }
+      acc[description].push(node);
+      return acc;
+    },
+    {}
+  );
+  return Object.entries(map).map(([description, nodes]) => {
+    return {
+      description: description === "none" ? "" : description,
+      nodes
+    };
+  });
+});
+onBlokkliEvent("analyze:click-node", (e) => {
+  if (e.id === props.resultId) {
+    isOpen.value = true;
+  }
+});
+</script>

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodes.vue.d.ts

@@ -0,0 +1,7 @@
+import type { AnalyzeNode } from '../analyzers/types.js';
+type __VLS_Props = {
+    resultId: string;
+    nodes: AnalyzeNode | AnalyzeNode[];
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodesTarget.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    class="bk-analyze-results-item-nodes-target"
+    :class="{
+  'bk-is-focused': isFocused
+}"
+  >
+    <div>
+      <button ref="elButton" @click.prevent="onClick">
+        <Icon name="eye" />
+        <span>{{ getLabel() }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/components";
+import { ref, useBlokkli, useTemplateRef } from "#imports";
+import { renderCycle } from "#blokkli/helpers/renderCycle";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const props = defineProps({
+  resultId: { type: String, required: true },
+  target: { type: null, required: true }
+});
+const { eventBus, dom, blocks, element } = useBlokkli();
+const elButton = useTemplateRef("elButton");
+const isFocused = ref(false);
+let focusTimeout = null;
+function getElement() {
+  if (props.target) {
+    if (typeof props.target === "string") {
+      return element.query(
+        document.documentElement,
+        props.target,
+        "Find analyze result item node target."
+      );
+    } else if (props.target instanceof HTMLElement) {
+      return props.target;
+    } else if (typeof props.target === "object" && "uuid" in props.target) {
+      const item = blocks.getBlock(props.target.uuid);
+      if (item) {
+        return dom.getDragElement(item) ?? null;
+      }
+    }
+  }
+  return null;
+}
+function getLabel() {
+  if (props.target) {
+    if (typeof props.target === "string") {
+      return props.target;
+    } else if (props.target instanceof HTMLElement) {
+      return (props.target.textContent ?? "").slice(0, 50);
+    } else if (typeof props.target === "object" && "uuid" in props.target) {
+      return props.target.uuid;
+    }
+  }
+}
+function findClosestUuid(element2) {
+  const closestBlock = element2.closest("[data-uuid]");
+  if (closestBlock instanceof HTMLElement) {
+    const uuid = closestBlock.dataset.uuid;
+    if (uuid) {
+      return uuid;
+    }
+  }
+}
+async function onClick() {
+  const element2 = getElement();
+  if (!element2) {
+    return;
+  }
+  const closestUuid = findClosestUuid(element2);
+  if (closestUuid) {
+    eventBus.emit("select", closestUuid);
+  } else {
+    eventBus.emit("select:unselect");
+  }
+  await renderCycle();
+  eventBus.emit("scrollIntoView", {
+    element: element2
+  });
+}
+onBlokkliEvent("analyze:click-node", (e) => {
+  isFocused.value = false;
+  if (focusTimeout) {
+    window.clearTimeout(focusTimeout);
+  }
+  if (e.id === props.resultId) {
+    const el = getElement();
+    if (el === e.target && elButton.value) {
+      elButton.value.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+      isFocused.value = true;
+      focusTimeout = window.setTimeout(() => {
+        isFocused.value = false;
+      }, 1e3);
+      return;
+    }
+  }
+});
+</script>

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodesTarget.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    resultId: string;
+    target: string | HTMLElement | {
+        uuid: string;
+    };
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Results/Status.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="bk-pill bk-analyze-status"
+    :class="status === 'inapplicable' ? 'bk-is-mono' : 'bk-is-' + status"
+  >
+    {{ label }}
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { useAnalyzeHelper } from "../helper";
+const props = defineProps({
+  status: { type: String, required: false, default: "inapplicable" }
+});
+const { getStatusLabel } = useAnalyzeHelper();
+const label = computed(() => getStatusLabel(props.status ?? "inapplicable"));
+</script>

package/dist/runtime/components/Edit/Features/Analyze/Results/Status.vue.d.ts

@@ -0,0 +1,8 @@
+import type { AnalyzeStatus } from '../analyzers/types.js';
+type __VLS_Props = {
+    status?: AnalyzeStatus;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    status: AnalyzeStatus;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Summary/Chart.vue

@@ -0,0 +1,92 @@
+<template>
+  <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`">
+    <circle
+      v-if="data.length === 1"
+      :cx="radius"
+      :cy="radius"
+      :r="radius"
+      :fill="data[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="percentage !== void 0"
+      x="50%"
+      y="50%"
+      dominant-baseline="middle"
+      text-anchor="middle"
+      fill="currentColor"
+    >
+      {{ percentage }}%
+    </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 },
+  percentage: { type: Number, required: false, default: void 0 }
+});
+const size = computed(() => props.radius * 2);
+const segments = computed(() => {
+  const total = props.data.reduce((sum, item) => sum + item.value, 0);
+  if (total === 0) return [];
+  let currentAngle = -90;
+  return props.data.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 + 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/components/Edit/Features/Analyze/Summary/Chart.vue.d.ts

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

package/dist/runtime/components/Edit/Features/Analyze/Summary/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="bk-analyze-summary">
+    <div class="bk-analyze-summary-chart">
+      <Chart :data="summary" :percentage />
+      <ul>
+        <li v-for="item in summary" :key="item.status">
+          <div :style="{ backgroundColor: item.color }" />
+          <div>
+            <span>{{ item.label }}</span>
+            <span>{{ item.value }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { rgbaToString } from "#blokkli/helpers";
+import { computed, useBlokkli } from "#imports";
+import { useAnalyzeHelper } from "../helper";
+import Chart from "./Chart.vue";
+const props = defineProps({
+  results: { type: Array, required: true }
+});
+const { theme } = useBlokkli();
+const { getStatusLabel } = useAnalyzeHelper();
+const SORT = {
+  violation: 4,
+  incomplete: 3,
+  pass: 2,
+  inapplicable: 1
+};
+function getColor(status) {
+  if (status === "pass") {
+    return rgbaToString(theme.lime.value.normal);
+  } else if (status === "incomplete") {
+    return rgbaToString(theme.yellow.value.normal);
+  } else if (status === "violation") {
+    return rgbaToString(theme.red.value.normal);
+  }
+  return rgbaToString(theme.mono.value[200]);
+}
+const summary = computed(() => {
+  const byStatus = props.results.reduce(
+    (acc, result) => {
+      acc[result.status] ||= 0;
+      const nodes = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
+      const total = nodes.reduce((acc2, node) => {
+        const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
+        return acc2 + targets.length;
+      }, 0);
+      acc[result.status] += total;
+      return acc;
+    },
+    {}
+  );
+  return Object.entries(byStatus).map(([key, value]) => {
+    const status = key;
+    return {
+      status,
+      label: getStatusLabel(status),
+      value,
+      color: getColor(status)
+    };
+  }).filter((v) => v.status !== "inapplicable").sort((a, b) => {
+    return SORT[b.status] - SORT[a.status];
+  });
+});
+const percentage = computed(() => {
+  const total = summary.value.reduce((acc, item) => {
+    return acc + item.value;
+  }, 0);
+  const pass = summary.value.find((v) => v.status === "pass")?.value ?? 0;
+  return Math.round(pass / total * 100);
+});
+</script>

package/dist/runtime/components/Edit/Features/Analyze/Summary/index.vue.d.ts

@@ -0,0 +1,6 @@
+import type { AnalyzeResultMapped } from '../analyzers/types.js';
+type __VLS_Props = {
+    results: AnalyzeResultMapped[];
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/Edit/Features/Analyze/analyzers/axe.d.ts

@@ -0,0 +1,12 @@
+import { type RunOptions } from 'axe-core';
+declare const _default: (options?: {
+    /**
+     * Selectors to exclude.
+     */
+    exclude?: string[];
+    /**
+     * Run options passed to axe-core.
+     */
+    runOptions?: RunOptions;
+} | undefined) => import("./types.js").Analyzer;
+export default _default;

package/dist/runtime/components/Edit/Features/Analyze/analyzers/axe.js

@@ -0,0 +1,75 @@
+import { defineAnalyzer } from "./defineAnalyzer.js";
+import axe from "axe-core";
+import { falsy } from "#blokkli/helpers";
+import de from "axe-core/locales/de.json";
+import fr from "axe-core/locales/fr.json";
+import it from "axe-core/locales/it.json";
+function mapAxeNode(node) {
+  return {
+    description: node.failureSummary,
+    impact: node.impact ?? void 0,
+    targets: node.target.map((v) => {
+      if (Array.isArray(v)) {
+        return null;
+      }
+      return v;
+    }).filter(falsy)
+  };
+}
+function mapAxeResult(result, status) {
+  return {
+    id: result.id,
+    title: result.description,
+    category: "accessibility",
+    description: result.help,
+    link: result.helpUrl,
+    status,
+    impact: result.impact ?? void 0,
+    nodes: result.nodes.map(mapAxeNode)
+  };
+}
+function mapAxeResults(results, status) {
+  return results.map((v) => mapAxeResult(v, status));
+}
+function getLocale(langcode) {
+  if (langcode === "de") {
+    return de;
+  } else if (langcode === "fr") {
+    return fr;
+  } else if (langcode === "it") {
+    return it;
+  }
+  return null;
+}
+export default defineAnalyzer((options) => {
+  const userExclude = options?.exclude ?? [];
+  const elementContext = {
+    exclude: [
+      "#nuxt-devtools-container",
+      ".bk",
+      ".bk-sidebar",
+      "#bk-animation-canvas-webgl",
+      ...userExclude
+    ]
+  };
+  return {
+    id: "axe",
+    requireRawPage: true,
+    init: function(context) {
+      const locale = getLocale(context.interfaceLangcode) ?? {};
+      axe.configure({
+        locale
+      });
+    },
+    run: function() {
+      return axe.run(elementContext, options?.runOptions ?? {}).then((result) => {
+        return [
+          ...mapAxeResults(result.incomplete, "incomplete"),
+          ...mapAxeResults(result.inapplicable, "inapplicable"),
+          ...mapAxeResults(result.passes, "pass"),
+          ...mapAxeResults(result.violations, "violation")
+        ];
+      });
+    }
+  };
+});

package/dist/runtime/components/Edit/Features/Analyze/analyzers/defineAnalyzer.d.ts

@@ -0,0 +1,4 @@
+import type { Analyzer } from './types.js';
+type AnalyzerInit<O extends object> = (options?: O) => Analyzer;
+export declare function defineAnalyzer<O extends object, HasOptions = object extends O ? true : false>(init: AnalyzerInit<O>): HasOptions extends true ? (options?: O) => Analyzer : (options: O) => Analyzer;
+export {};

package/dist/runtime/components/Edit/Features/Analyze/analyzers/defineAnalyzer.js

@@ -0,0 +1,5 @@
+export function defineAnalyzer(init) {
+  return function(options) {
+    return init(options);
+  };
+}

package/dist/runtime/components/Edit/Features/Analyze/analyzers/helpers/Context.d.ts

@@ -0,0 +1,32 @@
+import type { FieldListItemTyped } from '#blokkli-build/generated-types';
+import type { StateProvider } from '#blokkli/helpers/stateProvider';
+import type { TextProvider } from '#blokkli/helpers/textProvider';
+import type { MutatedField } from '#blokkli/types';
+import type { AnalyzeCategory, AnalyzeNode, AnalyzeResult, AnalyzeStatus } from '../types.js';
+import { type TextElement } from './collectTextElements.js';
+export declare class AnalyzerContext {
+    readonly langcode: string;
+    readonly interfaceLangcode: string;
+    readonly providerRootElement: HTMLElement;
+    private state;
+    readonly $t: TextProvider;
+    readonly mutatedFields: Readonly<MutatedField[]>;
+    /**
+     * The collected text elements.
+     */
+    private textElements;
+    constructor(langcode: string, interfaceLangcode: string, providerRootElement: HTMLElement, state: StateProvider, $t: TextProvider);
+    /**
+     * Get the field list item for a block UUID.
+     */
+    getFieldListItem(uuid: string): FieldListItemTyped | undefined;
+    /**
+     * Returns an array of all text elements inside the provider root element.
+     *
+     * A 'text element' is defined as the lowest block element that contains text.
+     * For example, a structure like `<p><span>Foobar</span> <strong>Test</strong></p>`
+     * would return as a single text element containing "Foobar Test".
+     */
+    getTextElements(): Readonly<TextElement[]>;
+    defineResult(id: string, title: string, category: AnalyzeCategory, description: string, status: AnalyzeStatus, nodes?: AnalyzeNode | AnalyzeNode[]): AnalyzeResult;
+}

package/dist/runtime/components/Edit/Features/Analyze/analyzers/helpers/Context.js

@@ -0,0 +1,45 @@
+import { collectTextElements } from "./collectTextElements.js";
+export class AnalyzerContext {
+  constructor(langcode, interfaceLangcode, providerRootElement, state, $t) {
+    this.langcode = langcode;
+    this.interfaceLangcode = interfaceLangcode;
+    this.providerRootElement = providerRootElement;
+    this.state = state;
+    this.$t = $t;
+    this.mutatedFields = JSON.parse(JSON.stringify(state.mutatedFields.value));
+  }
+  mutatedFields;
+  /**
+   * The collected text elements.
+   */
+  textElements = null;
+  /**
+   * Get the field list item for a block UUID.
+   */
+  getFieldListItem(uuid) {
+    return this.state.getFieldListItem(uuid);
+  }
+  /**
+   * Returns an array of all text elements inside the provider root element.
+   *
+   * A 'text element' is defined as the lowest block element that contains text.
+   * For example, a structure like `<p><span>Foobar</span> <strong>Test</strong></p>`
+   * would return as a single text element containing "Foobar Test".
+   */
+  getTextElements() {
+    if (!this.textElements) {
+      this.textElements = collectTextElements(this.providerRootElement);
+    }
+    return this.textElements;
+  }
+  defineResult(id, title, category, description, status, nodes = []) {
+    return {
+      id,
+      title,
+      category,
+      description,
+      status,
+      nodes
+    };
+  }
+}