@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/runtime/components/Edit/Features/Analyze/Renderer.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="bk bk-analyze">
+    <div class="bk-analyze-button">
+      <button
+        class="bk-button bk-is-primary"
+        :disabled="!isStale"
+        @click="onClick"
+      >
+        {{ $t("analyzeButtonLabel", "Analyze Page") }}
+      </button>
+
+      <p v-if="lastRun" class="bk-analyze-last-run">
+        <RelativeTime v-slot="{ formatted }" :timestamp="lastRun">
+          {{
+            $t("analyzeLastRun", "Last run: @time").replace("@time", formatted)
+          }}
+        </RelativeTime>
+      </p>
+      <p v-if="isStale && hasRunOnce" class="bk-message-info">
+        {{
+          $t(
+  "analyzeStaleMessage",
+  "The contents of the page have changed since last analyzing the page. Please run the analyzers again to get updated results."
+)
+        }}
+      </p>
+    </div>
+
+    <div v-if="resultsFiltered.length" class="bk-analyze-wrapper">
+      <div class="bk-analyze-form">
+        <FormSelect
+          id="category"
+          v-model="selectedCategory"
+          :label="$t('analyzeCategory', 'Category')"
+          :options="categoryOptions"
+        />
+      </div>
+      <AnalyzeSummary :results="resultsFiltered" />
+      <Results :results="resultsFiltered" />
+    </div>
+  </div>
+  <Overlay
+    v-if="
+  resultsFiltered.length && gl && animation.webglEnabled.value && !isStale
+"
+    :results="resultsFiltered"
+    :gl="gl"
+  />
+</template>
+
+<script setup>
+import { computed, useBlokkli, useState, ref } from "#imports";
+import Results from "./Results/Results.vue";
+import AnalyzeSummary from "./Summary/index.vue";
+import Overlay from "./Overlay/index.vue";
+import { useAnalyzeHelper } from "./helper";
+import { FormSelect, RelativeTime } from "#blokkli/components";
+import { AnalyzerContext } from "./analyzers/helpers/Context";
+import { normalizeToArray } from "./analyzers/helpers/normalizeArray";
+import { falsy } from "#blokkli/helpers";
+import { renderCycle } from "#blokkli/helpers/renderCycle";
+const props = defineProps({
+  langcode: { type: String, required: true },
+  analyzers: { type: Array, required: true }
+});
+const ALL = "ALL";
+const { $t, ui, state, animation } = useBlokkli();
+const { getCategoryLabel } = useAnalyzeHelper();
+const gl = animation.gl();
+const currentPlugin = ref("readability");
+const hasRunOnce = useState(() => false);
+const results = useState("blokkli:analyze", () => []);
+const isLoading = useState(() => false);
+const lastRun = useState(() => 0);
+const lastRunKey = useState(() => "");
+const selectedCategory = useState(() => ALL);
+const hasInitialized = useState(() => false);
+const providerRootElement = ui.providerElement();
+const resultsFiltered = computed(() => {
+  if (selectedCategory.value === ALL) {
+    return results.value;
+  }
+  return results.value.filter((v) => v.category === selectedCategory.value);
+});
+const isStale = computed(() => lastRunKey.value !== state.refreshKey.value);
+function getContext() {
+  return new AnalyzerContext(
+    props.langcode,
+    ui.interfaceLanguage.value,
+    providerRootElement,
+    state,
+    $t
+  );
+}
+async function onClick() {
+  if (isLoading.value) {
+    return;
+  }
+  const requiresRawPage = props.analyzers.some(
+    (analyzer) => analyzer.requireRawPage
+  );
+  if (requiresRawPage) {
+    ui.isAnalyzing.value = true;
+  }
+  isLoading.value = true;
+  await renderCycle();
+  const context = getContext();
+  if (!hasInitialized.value) {
+    await Promise.all(
+      props.analyzers.map(async (analyzer) => {
+        if (analyzer.init) {
+          await analyzer.init(context);
+        }
+      })
+    );
+  }
+  hasInitialized.value = true;
+  const newResults = [];
+  for (let i = 0; i < props.analyzers.length; i++) {
+    const analyzer = props.analyzers[i];
+    currentPlugin.value = analyzer.id;
+    const result = await normalizeToArray(analyzer.run(context));
+    const mapped = result.filter(falsy).map((v) => {
+      return {
+        ...v,
+        plugin: analyzer.id
+      };
+    });
+    newResults.push(...mapped);
+  }
+  results.value = newResults;
+  isLoading.value = false;
+  hasRunOnce.value = true;
+  lastRun.value = Date.now() / 1e3;
+  lastRunKey.value = state.refreshKey.value;
+  if (requiresRawPage) {
+    ui.isAnalyzing.value = false;
+  }
+}
+const categoryOptions = computed(() => {
+  const set = results.value.reduce((acc, v) => {
+    acc.add(v.category);
+    return acc;
+  }, /* @__PURE__ */ new Set());
+  const categories = [...set.values()].map((value) => {
+    return {
+      value,
+      label: getCategoryLabel(value)
+    };
+  });
+  return [
+    {
+      value: ALL,
+      label: $t("all", "All")
+    },
+    ...categories
+  ];
+});
+</script>

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

@@ -0,0 +1,7 @@
+import type { Analyzer } from './analyzers/types.js';
+type __VLS_Props = {
+    langcode: string;
+    analyzers: Analyzer[];
+};
+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/Results.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <details
+      v-for="group in grouped"
+      :key="group.group"
+      :open="group.open"
+      class="bk-analyze-results"
+    >
+      <summary v-show="!group.open">
+        <div>
+          <span>{{ group.label }}</span>
+          <div>
+            <span class="bk-pill">{{ group.results.length }}</span>
+          </div>
+        </div>
+        <Icon name="caret" />
+      </summary>
+      <ul
+        :class="{
+  'bk-is-always-open': group.open
+}"
+      >
+        <li>
+          <ResultsItem
+            v-for="result in group.results"
+            v-bind="result"
+            :key="group.group + result.id"
+          />
+        </li>
+      </ul>
+    </details>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import ResultsItem from "./ResultsItem.vue";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  results: { type: Array, required: true }
+});
+const { $t } = useBlokkli();
+const groupOrder = {
+  problems: 1,
+  success: 2,
+  inapplicable: 3
+};
+const statusOrder = {
+  violation: 1,
+  incomplete: 2,
+  pass: 3,
+  inapplicable: 4
+};
+function getGroup(status) {
+  if (status === "violation" || status === "incomplete") {
+    return "problems";
+  } else if (status === "pass") {
+    return "success";
+  }
+  return "inapplicable";
+}
+function getGroupLabel(group) {
+  if (group === "problems") {
+    return "Problems";
+  } else if (group === "success") {
+    return $t("analyzeStatusPass", "Pass");
+  }
+  return $t("analyzeStatusInapplicable", "Inapplicable");
+}
+const grouped = computed(() => {
+  const map = props.results.reduce(
+    (acc, result) => {
+      const group = getGroup(result.status);
+      if (!acc[group]) {
+        acc[group] = [];
+      }
+      acc[group].push(result);
+      return acc;
+    },
+    {}
+  );
+  return Object.entries(map).map(([key, results]) => {
+    const group = key;
+    return {
+      group,
+      label: getGroupLabel(group),
+      open: group === "problems",
+      results: results.sort((a, b) => {
+        const statusDiff = statusOrder[a.status] - statusOrder[b.status];
+        if (statusDiff !== 0) {
+          return statusDiff;
+        }
+        return a.title.localeCompare(b.title);
+      })
+    };
+  }).sort((a, b) => {
+    return groupOrder[a.group] - groupOrder[b.group];
+  });
+});
+</script>

package/dist/runtime/components/Edit/Features/Analyze/Results/Results.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/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,101 @@
+<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 } = useBlokkli();
+const elButton = useTemplateRef("elButton");
+const isFocused = ref(false);
+let focusTimeout = null;
+function getElement() {
+  if (props.target) {
+    if (typeof props.target === "string") {
+      return document.querySelector(props.target);
+    } else if (props.target instanceof HTMLElement) {
+      return props.target;
+    } else if (typeof props.target === "object" && "uuid" in props.target) {
+      const block = dom.findBlock(props.target.uuid);
+      if (block) {
+        return block.element();
+      }
+    }
+  }
+  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(element) {
+  const closestBlock = element.closest("[data-uuid]");
+  if (closestBlock instanceof HTMLElement) {
+    const uuid = closestBlock.dataset.uuid;
+    if (uuid) {
+      return uuid;
+    }
+  }
+}
+async function onClick() {
+  const element = getElement();
+  if (!element) {
+    return;
+  }
+  const closestUuid = findClosestUuid(element);
+  if (closestUuid) {
+    eventBus.emit("select", closestUuid);
+  } else {
+    eventBus.emit("select:unselect");
+  }
+  await renderCycle();
+  eventBus.emit("scrollIntoView", {
+    element
+  });
+}
+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;