@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

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

@@ -1,102 +0,0 @@
-<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"
-            v-model="activeId"
-          />
-        </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 activeId = defineModel({ type: String, ...{ default: "" } });
-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

@@ -1,13 +0,0 @@
-import type { AnalyzeResultMapped } from '../analyzers/types.js';
-type __VLS_Props = {
-    results: AnalyzeResultMapped[];
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,56 +0,0 @@
-<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 v-model="activeId" :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 },
-  impact: { type: String, required: false },
-  plugin: { type: String, required: true },
-  nodes: { type: Array, required: true }
-});
-const activeId = defineModel({ type: String, ...{ default: "" } });
-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

@@ -1,21 +0,0 @@
-import type { AnalyzeCategory, AnalyzeImpact, AnalyzeNodeMapped, AnalyzeStatus } from '../analyzers/types.js';
-type __VLS_Props = {
-    id: string;
-    title: string;
-    category: AnalyzeCategory;
-    description: string;
-    link?: string;
-    status: AnalyzeStatus;
-    impact?: AnalyzeImpact;
-    plugin: string;
-    nodes: AnalyzeNodeMapped[];
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,80 +0,0 @@
-<template>
-  <details
-    v-if="nodes.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"
-                v-model="activeId"
-                :target
-                :result-id
-              />
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-  </details>
-</template>
-
-<script setup>
-import { computed, ref, useBlokkli, watch } from "#imports";
-import ResultsItemNodesTarget from "./ResultsItemNodesTarget.vue";
-import { Icon } from "#blokkli/components";
-const props = defineProps({
-  resultId: { type: String, required: true },
-  nodes: { type: Array, required: true }
-});
-const activeId = defineModel({ type: String, ...{ default: "" } });
-const shouldRender = ref(false);
-const isOpen = ref(false);
-const { $t } = useBlokkli();
-const isSingle = computed(
-  () => props.nodes.length === 1 && props.nodes[0]?.targets.length === 1
-);
-const grouped = computed(() => {
-  const map = props.nodes.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
-    };
-  });
-});
-watch(activeId, (id) => {
-  const resultId = id.split("_____")[0];
-  if (resultId === props.resultId) {
-    isOpen.value = true;
-  }
-});
-</script>

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

@@ -1,14 +0,0 @@
-import type { AnalyzeNodeMapped } from '../analyzers/types.js';
-type __VLS_Props = {
-    resultId: string;
-    nodes: AnalyzeNodeMapped[];
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,123 +0,0 @@
-<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 { computed, useBlokkli, useTemplateRef, watch } from "#imports";
-import { renderCycle } from "#blokkli/helpers/renderCycle";
-const props = defineProps({
-  resultId: { type: String, required: true },
-  target: { type: Object, required: true }
-});
-const { eventBus, dom, blocks, element } = useBlokkli();
-const activeId = defineModel({ type: String, ...{ default: "" } });
-const activeIndex = computed(() => {
-  const index = activeId.value.split("_____")[1];
-  if (index === void 0) {
-    return -1;
-  }
-  const indexNumber = Number.parseInt(index);
-  if (Number.isNaN(indexNumber)) {
-    return -1;
-  }
-  return indexNumber;
-});
-const elButton = useTemplateRef("elButton");
-const isFocused = computed(() => activeIndex.value === props.target.globalIndex);
-function getElement() {
-  if (props.target.target) {
-    if (typeof props.target.target === "string") {
-      return element.query(
-        document.documentElement,
-        props.target.target,
-        "Find analyze result item node target."
-      );
-    } else if (props.target.target instanceof HTMLElement) {
-      return props.target.target;
-    } else if (typeof props.target.target === "object" && "uuid" in props.target.target) {
-      const item = blocks.getBlock(props.target.target.uuid);
-      if (item) {
-        return dom.getDragElement(item) ?? null;
-      }
-    }
-  }
-  return null;
-}
-function getElementLabel(tagName) {
-  return `<${tagName.toLowerCase()}>`;
-}
-function getLabel() {
-  if (props.target.target) {
-    if (typeof props.target.target === "string") {
-      return props.target.target;
-    } else if (props.target.target instanceof HTMLElement) {
-      if (props.target.target instanceof HTMLImageElement) {
-        if (props.target.target.alt) {
-          return props.target.target.alt.slice(0, 50);
-        }
-      }
-      const textContent = (props.target.target.textContent ?? "").slice(0, 50);
-      if (textContent) {
-        return textContent;
-      }
-      return getElementLabel(props.target.target.tagName);
-    } else if (typeof props.target.target === "object" && "uuid" in props.target.target) {
-      return props.target.target.uuid;
-    }
-  }
-}
-function findClosestUuid(element2) {
-  const closestBlock = element2.closest("[data-bk-uuid]");
-  if (closestBlock instanceof HTMLElement) {
-    const uuid = closestBlock.dataset.bkUuid;
-    if (uuid) {
-      return uuid;
-    }
-  }
-}
-async function onClick() {
-  if (activeIndex.value === props.target.globalIndex) {
-    activeId.value = "";
-    return;
-  }
-  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
-  });
-  activeId.value = props.resultId + "_____" + props.target.globalIndex;
-}
-watch(isFocused, (isFocused2) => {
-  if (!isFocused2) {
-    return;
-  }
-  if (elButton.value) {
-    elButton.value.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest"
-    });
-  }
-});
-</script>

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

@@ -1,14 +0,0 @@
-import type { AnalyzeNodeTargetMapped } from '#blokkli/analyzer/types';
-type __VLS_Props = {
-    resultId: string;
-    target: AnalyzeNodeTargetMapped;
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,8 +0,0 @@
-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.d.ts

@@ -1,17 +0,0 @@
-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

@@ -1,77 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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",
-    label: "Axe (Accessibility Check)",
-    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/helpers/Context.d.ts

@@ -1,33 +0,0 @@
-import type { FieldListItemTyped } from '#blokkli-build/generated-types';
-import type { StateProvider } from '#blokkli/helpers/providers/state';
-import type { TextProvider } from '#blokkli/helpers/providers/texts';
-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 signal?: AbortSignal | undefined;
-    readonly mutatedFields: Readonly<MutatedField[]>;
-    /**
-     * The collected text elements.
-     */
-    private textElements;
-    constructor(langcode: string, interfaceLangcode: string, providerRootElement: HTMLElement, state: StateProvider, $t: TextProvider, signal?: AbortSignal | undefined);
-    /**
-     * 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;
-}