kalfa 3.0.0.dev0__py3-none-any.whl

kalfa/board/static/components/error.js

@@ -0,0 +1,17 @@
+export function messageOf(error) {
+  if (!error) return "";
+  if (typeof error === "string") return error;
+  return error.message || String(error);
+}
+
+export const ErrorBox = {
+  name: "KError",
+  props: { error: { default: null } },
+  setup(props) {
+    const message = () => messageOf(props.error);
+    return { message };
+  },
+  template: '<div v-if="message()" class="error-box" role="alert">{{ message() }}</div>',
+};
+
+export default ErrorBox;

kalfa/board/static/components/loading.js

@@ -0,0 +1,7 @@
+export const Loading = {
+  name: "KLoading",
+  props: { label: { type: String, default: "loading" } },
+  template: '<div class="loading">{{ label }}</div>',
+};
+
+export default Loading;

kalfa/board/static/components/progress.js

@@ -0,0 +1,25 @@
+import { fraction, isNumber, share } from "../format.js";
+
+
+export const Progress = {
+  name: "KProgress",
+  props: {
+    value: { type: Number, default: 0 },
+    total: { type: Number, default: null },
+    label: { type: String, default: "" },
+    part: { type: Number, default: null },
+  },
+  setup(props) {
+    const part = () => (isNumber(props.part) ? Math.max(0, Math.min(1, props.part)) : share(props.value, props.total));
+    const width = () => (part() === null ? "0%" : (100 * part()).toFixed(1) + "%");
+    const caption = () => props.label || fraction(props.value, props.total);
+    return { part, width, caption };
+  },
+  template: `
+    <span class="progress" :class="{ unknown: part() === null }">
+      <span class="progress-track"><span class="progress-fill" :style="{ width: width() }"></span></span>
+      <span class="progress-text">{{ caption() }}</span>
+    </span>`,
+};
+
+export default Progress;

kalfa/board/static/components/settings.js

@@ -0,0 +1,418 @@
+import { computed, reactive, ref, watch }
+  from "https://cdn.jsdelivr.net/npm/vue@3.4.38/dist/vue.esm-browser.prod.js";
+
+import { PALETTES, numberOf, themeColors } from "../plot.js";
+import { store } from "../store.js";
+
+
+const PREFIX = "kalfa.chart.";
+const shared = new Map();
+
+export const PALETTE_NAMES = Object.keys(PALETTES);
+export const PLACES = ["top", "bottom", "right", "inside"];
+
+const CHOICES = {
+  xscale: ["", "linear", "log"],
+  yscale: ["", "linear", "log"],
+  dash: ["", "solid", "dash", "dot"],
+  mode: ["auto", "lines", "markers", "lines+markers"],
+  legend: ["auto", "on", "off"],
+  place: PLACES,
+  palette: PALETTE_NAMES,
+};
+
+export function blankSettings() {
+  return {
+    xscale: "",
+    yscale: "",
+    xmin: "",
+    xmax: "",
+    ymin: "",
+    ymax: "",
+    xtitle: "",
+    ytitle: "",
+    grid: true,
+    width: "",
+    dash: "",
+    mode: "auto",
+    size: "",
+    opacity: "",
+    smoothing: 0,
+    bins: "",
+    title: "",
+    legend: "auto",
+    place: "top",
+    palette: "theme",
+    boxWidth: "",
+    boxHeight: "",
+    imageWidth: "",
+    imageHeight: "",
+    imageScale: "",
+    layout: "",
+  };
+}
+
+function cleaned(found) {
+  const settings = blankSettings();
+  if (!found || typeof found !== "object" || Array.isArray(found)) return settings;
+  for (const key of Object.keys(settings)) {
+    const value = found[key];
+    if (typeof settings[key] === "boolean") {
+      if (typeof value === "boolean") settings[key] = value;
+    } else if (typeof value === "string" || (typeof value === "number" && Number.isFinite(value))) {
+      settings[key] = value;
+    }
+  }
+  for (const [key, allowed] of Object.entries(CHOICES)) {
+    if (!allowed.includes(settings[key])) settings[key] = blankSettings()[key];
+  }
+  settings.smoothing = Math.min(0.99, Math.max(0, numberOf(settings.smoothing) || 0));
+  return settings;
+}
+
+export function changedSettings(settings) {
+  const blank = blankSettings();
+  const found = {};
+  for (const key of Object.keys(blank)) {
+    if (settings && settings[key] !== undefined && settings[key] !== blank[key]) found[key] = settings[key];
+  }
+  return found;
+}
+
+export function isTuned(settings) {
+  return Object.keys(changedSettings(settings)).length > 0;
+}
+
+export function loadSettings(key) {
+  try {
+    const text = window.localStorage.getItem(PREFIX + key);
+    return cleaned(text ? JSON.parse(text) : null);
+  } catch (error) {
+    return blankSettings();
+  }
+}
+
+export function saveSettings(key, settings) {
+  const changed = changedSettings(settings);
+  try {
+    if (Object.keys(changed).length) window.localStorage.setItem(PREFIX + key, JSON.stringify(changed));
+    else window.localStorage.removeItem(PREFIX + key);
+  } catch (error) {
+    return;
+  }
+}
+
+export function chartSettings(key) {
+  if (!shared.has(key)) shared.set(key, reactive(loadSettings(key)));
+  return shared.get(key);
+}
+
+export function forgetSettings(key) {
+  Object.assign(chartSettings(key), blankSettings());
+  try {
+    window.localStorage.removeItem(PREFIX + key);
+  } catch (error) {
+    return;
+  }
+}
+
+export function parseLayout(text) {
+  const trimmed = String(text || "").trim();
+  if (!trimmed) return { layout: null, error: "" };
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) return { layout: parsed, error: "" };
+    return { layout: null, error: "the layout must be a JSON object, like {\"margin\": {\"l\": 80}}" };
+  } catch (error) {
+    return { layout: null, error: "not valid JSON yet: " + error.message };
+  }
+}
+
+export function drawOptions(settings) {
+  const found = {};
+  if (settings.xscale) found.logx = settings.xscale === "log";
+  if (settings.yscale) found.logy = settings.yscale === "log";
+  for (const key of ["xmin", "xmax", "ymin", "ymax", "width", "size", "opacity"]) {
+    const value = numberOf(settings[key]);
+    if (value !== null) found[key] = value;
+  }
+  const smoothing = numberOf(settings.smoothing);
+  if (smoothing) found.smoothing = smoothing;
+  if (settings.xtitle) found.xlabel = settings.xtitle;
+  if (settings.ytitle) found.ylabel = settings.ytitle;
+  if (settings.grid === false) found.grid = false;
+  if (settings.dash) found.dash = settings.dash;
+  if (settings.mode && settings.mode !== "auto") found.mode = settings.mode;
+  if (settings.title) found.title = settings.title;
+  if (settings.legend === "on" || settings.legend === "off") found.legend = settings.legend === "on";
+  if (settings.place && settings.place !== "top") found.legendPlace = settings.place;
+  if (settings.palette && settings.palette !== "theme") found.palette = settings.palette;
+  const layout = parseLayout(settings.layout).layout;
+  if (layout) found.layout = layout;
+  return found;
+}
+
+export function payloadOf(key, settings, options) {
+  const found = drawOptions(settings);
+  const base = options || {};
+  const bins = numberOf(settings.bins);
+  return {
+    key,
+    logx: found.logx !== undefined ? found.logx : Boolean(base.logx),
+    logy: found.logy !== undefined ? found.logy : Boolean(base.logy),
+    xmin: numberOf(settings.xmin),
+    xmax: numberOf(settings.xmax),
+    ymin: numberOf(settings.ymin),
+    ymax: numberOf(settings.ymax),
+    bins: bins !== null && bins >= 1 ? Math.round(bins) : null,
+    smoothing: numberOf(settings.smoothing) || 0,
+    settings: changedSettings(settings),
+  };
+}
+
+function featuresOf(kind, horizontal, binsBox) {
+  const grid = kind !== "heatmap" && kind !== "parallel";
+  return {
+    x: grid && !(kind === "bars" && !horizontal),
+    y: grid && !(kind === "bars" && horizontal),
+    grid,
+    line: kind === "lines",
+    marker: kind === "lines" || kind === "scatter",
+    bins: kind === "histogram" || Boolean(binsBox),
+  };
+}
+
+function defaultsOf(kind) {
+  return {
+    width: 2,
+    size: kind === "scatter" ? 8 : 6,
+    opacity: kind === "scatter" ? 0.85 : kind === "histogram" ? 0.9 : 1,
+  };
+}
+
+export const ChartSettings = {
+  name: "KChartSettings",
+  props: {
+    settings: { type: Object, required: true },
+    kind: { type: String, default: "lines" },
+    auto: { type: Object, default: () => ({}) },
+    size: { type: Object, default: () => ({}) },
+    binsBox: { type: Boolean, default: false },
+  },
+  emits: ["reset", "download"],
+  setup(props, { emit }) {
+    const draft = ref(props.settings.layout || "");
+    const advanced = ref(Boolean(props.settings.layout));
+    const palettes = PALETTE_NAMES;
+    const places = PLACES;
+    const has = computed(() => featuresOf(props.kind, props.auto.horizontal !== false, props.binsBox));
+    const defaults = computed(() => defaultsOf(props.kind));
+    const swatches = computed(() => (store.paint >= 0 ? themeColors(props.settings.palette).series : []));
+    const layoutError = computed(() => parseLayout(draft.value).error);
+
+    watch(() => props.settings.layout, (value) => {
+      if (value !== draft.value) draft.value = value || "";
+    });
+
+    const scaleText = (log) => "auto (" + (log ? "log" : "linear") + ")";
+    const shown = (name) => (props.settings[name] === "" ? defaults.value[name] : props.settings[name]);
+    const readout = (name) => (props.settings[name] === "" ? "auto" : String(props.settings[name]));
+    const put = (name, event) => {
+      props.settings[name] = Number(event.target.value);
+    };
+    const clear = (name) => {
+      props.settings[name] = "";
+    };
+    const fit = (value) => (value ? "fit, " + value : "fit");
+    const typed = (event) => {
+      draft.value = event.target.value;
+      if (!parseLayout(draft.value).error) props.settings.layout = draft.value.trim() ? draft.value : "";
+    };
+    const opened = (event) => {
+      advanced.value = event.target.open;
+    };
+    const resetAll = () => {
+      draft.value = "";
+      emit("reset");
+    };
+    const download = (format) => emit("download", format);
+    return {
+      draft, advanced, palettes, places, has, swatches, layoutError, scaleText, shown, readout, put, clear, fit,
+      typed, opened, resetAll, download,
+    };
+  },
+  template: `
+    <aside class="chart-panel" aria-label="chart settings">
+      <section class="chart-group">
+        <div class="chart-group-title">axes</div>
+        <div v-if="has.x" class="chart-row">
+          <span class="chart-label">x</span>
+          <select v-model="settings.xscale" aria-label="x scale">
+            <option value="">{{ scaleText(auto.logx) }}</option>
+            <option value="linear">linear</option>
+            <option value="log">log</option>
+          </select>
+          <input type="number" step="any" placeholder="min" aria-label="x minimum" v-model.lazy="settings.xmin">
+          <input type="number" step="any" placeholder="max" aria-label="x maximum" v-model.lazy="settings.xmax">
+        </div>
+        <div v-if="has.y" class="chart-row">
+          <span class="chart-label">y</span>
+          <select v-model="settings.yscale" aria-label="y scale">
+            <option value="">{{ scaleText(auto.logy) }}</option>
+            <option value="linear">linear</option>
+            <option value="log">log</option>
+          </select>
+          <input type="number" step="any" placeholder="min" aria-label="y minimum" v-model.lazy="settings.ymin">
+          <input type="number" step="any" placeholder="max" aria-label="y maximum" v-model.lazy="settings.ymax">
+        </div>
+        <div v-if="has.x || has.y" class="chart-hint">an empty range end follows the data</div>
+        <div class="chart-row">
+          <span class="chart-label">titles</span>
+          <input type="text" spellcheck="false" aria-label="x axis title" :placeholder="auto.xlabel || 'x axis'"
+            v-model.lazy="settings.xtitle">
+          <input type="text" spellcheck="false" aria-label="y axis title" :placeholder="auto.ylabel || 'y axis'"
+            v-model.lazy="settings.ytitle">
+        </div>
+        <label v-if="has.grid" class="chart-check"><input type="checkbox" v-model="settings.grid"> grid</label>
+      </section>
+
+      <section class="chart-group">
+        <div class="chart-group-title">{{ has.line ? 'lines and markers' : 'marks' }}</div>
+        <div v-if="has.line" class="chart-row">
+          <span class="chart-label">line width</span>
+          <input type="range" min="0.5" max="8" step="0.5" aria-label="line width" :value="shown('width')"
+            @input="put('width', $event)">
+          <button type="button" class="chart-auto" :disabled="settings.width === ''" title="back to auto"
+            @click="clear('width')">{{ readout('width') }}</button>
+        </div>
+        <div v-if="has.line" class="chart-row">
+          <span class="chart-label">line style</span>
+          <select v-model="settings.dash" aria-label="line style">
+            <option value="">auto</option>
+            <option value="solid">solid</option>
+            <option value="dash">dashed</option>
+            <option value="dot">dotted</option>
+          </select>
+        </div>
+        <div v-if="has.line" class="chart-row">
+          <span class="chart-label">draw</span>
+          <select v-model="settings.mode" aria-label="lines or markers">
+            <option value="auto">auto</option>
+            <option value="lines">lines</option>
+            <option value="markers">markers</option>
+            <option value="lines+markers">lines and markers</option>
+          </select>
+        </div>
+        <div v-if="has.marker" class="chart-row">
+          <span class="chart-label">marker size</span>
+          <input type="range" min="1" max="20" step="1" aria-label="marker size" :value="shown('size')"
+            @input="put('size', $event)">
+          <button type="button" class="chart-auto" :disabled="settings.size === ''" title="back to auto"
+            @click="clear('size')">{{ readout('size') }}</button>
+        </div>
+        <div class="chart-row">
+          <span class="chart-label">opacity</span>
+          <input type="range" min="0.05" max="1" step="0.05" aria-label="opacity" :value="shown('opacity')"
+            @input="put('opacity', $event)">
+          <button type="button" class="chart-auto" :disabled="settings.opacity === ''" title="back to auto"
+            @click="clear('opacity')">{{ readout('opacity') }}</button>
+        </div>
+        <div v-if="has.line" class="chart-row">
+          <span class="chart-label">smoothing</span>
+          <input type="range" min="0" max="0.99" step="0.01" aria-label="smoothing" v-model.number="settings.smoothing">
+          <button type="button" class="chart-auto" :disabled="!settings.smoothing" title="turn smoothing off"
+            @click="settings.smoothing = 0">{{ settings.smoothing ? settings.smoothing : 'off' }}</button>
+        </div>
+        <div v-if="has.line && settings.smoothing" class="chart-hint">exponential moving average; the raw line stays faint</div>
+        <div v-if="has.bins" class="chart-row">
+          <span class="chart-label">bins</span>
+          <input type="number" min="1" max="1000" step="1" placeholder="auto" aria-label="bins"
+            v-model.lazy="settings.bins">
+        </div>
+        <div v-if="has.bins" class="chart-hint">the server counts the rows again into this many bins</div>
+      </section>
+
+      <section class="chart-group">
+        <div class="chart-group-title">look</div>
+        <div class="chart-row">
+          <span class="chart-label">title</span>
+          <input type="text" spellcheck="false" aria-label="title on the chart" placeholder="none"
+            v-model.lazy="settings.title">
+        </div>
+        <div class="chart-row">
+          <span class="chart-label">legend</span>
+          <select v-model="settings.legend" aria-label="legend">
+            <option value="auto">auto</option>
+            <option value="on">on</option>
+            <option value="off">off</option>
+          </select>
+          <select v-model="settings.place" aria-label="legend place" :disabled="settings.legend === 'off'">
+            <option v-for="place in places" :key="place" :value="place">{{ place }}</option>
+          </select>
+        </div>
+        <div class="chart-row">
+          <span class="chart-label">palette</span>
+          <select v-model="settings.palette" aria-label="palette">
+            <option v-for="name in palettes" :key="name" :value="name">{{ name }}</option>
+          </select>
+        </div>
+        <div class="chart-swatches">
+          <span v-for="(color, index) in swatches" :key="index" class="chart-swatch" :style="{ background: color }"></span>
+        </div>
+      </section>
+
+      <section class="chart-group">
+        <div class="chart-group-title">this view</div>
+        <div class="chart-row">
+          <span class="chart-label">width</span>
+          <input type="number" min="200" step="10" aria-label="view width" :placeholder="fit(size.width)"
+            v-model.lazy="settings.boxWidth">
+          <span class="chart-unit">px</span>
+        </div>
+        <div class="chart-row">
+          <span class="chart-label">height</span>
+          <input type="number" min="200" step="10" aria-label="view height" :placeholder="fit(size.height)"
+            v-model.lazy="settings.boxHeight">
+          <span class="chart-unit">px</span>
+        </div>
+      </section>
+
+      <section class="chart-group">
+        <div class="chart-group-title">download</div>
+        <div class="chart-row">
+          <span class="chart-label">size</span>
+          <input type="number" min="100" step="10" aria-label="image width" :placeholder="String(size.width || 900)"
+            v-model.lazy="settings.imageWidth">
+          <span class="chart-unit">by</span>
+          <input type="number" min="100" step="10" aria-label="image height" :placeholder="String(size.height || 600)"
+            v-model.lazy="settings.imageHeight">
+        </div>
+        <div class="chart-row">
+          <span class="chart-label">scale</span>
+          <input type="number" min="0.25" max="8" step="0.25" aria-label="image scale" placeholder="2 for png, 1 for svg"
+            v-model.lazy="settings.imageScale">
+        </div>
+        <div class="chart-row chart-actions">
+          <span class="chart-label"></span>
+          <button type="button" class="tool" @click="download('png')">png</button>
+          <button type="button" class="tool" @click="download('svg')">svg</button>
+        </div>
+      </section>
+
+      <details class="chart-group" :open="advanced" @toggle="opened">
+        <summary class="chart-group-title">advanced</summary>
+        <div class="chart-hint">Plotly layout as JSON, merged over the layout of this chart</div>
+        <textarea rows="6" spellcheck="false" aria-label="Plotly layout JSON" :value="draft" @input="typed"
+          placeholder='{"yaxis": {"tickformat": ".1e"}, "margin": {"l": 80}}'></textarea>
+        <div v-if="layoutError" class="chart-error">{{ layoutError }}</div>
+      </details>
+
+      <div class="chart-row chart-actions">
+        <button type="button" class="tool chart-reset" @click="resetAll">reset</button>
+        <span class="chart-hint">saved in this browser for this chart</span>
+      </div>
+      <div class="chart-hint">Drag a box to zoom, double click to zoom out, click a legend entry to hide its series.</div>
+    </aside>`,
+};
+
+export default ChartSettings;

kalfa/board/static/components/spark.js

@@ -0,0 +1,43 @@
+import { computed } from "https://cdn.jsdelivr.net/npm/vue@3.4.38/dist/vue.esm-browser.prod.js";
+
+
+export function sparkPoints(values, width, height, count) {
+  const tail = (Array.isArray(values) ? values : []).slice(-count);
+  const finite = tail.map((value, index) => [index, value])
+    .filter((pair) => typeof pair[1] === "number" && Number.isFinite(pair[1]));
+  if (finite.length < 2) return "";
+  const numbers = finite.map((pair) => pair[1]);
+  const low = Math.min(...numbers);
+  const high = Math.max(...numbers);
+  const span = high - low || 1;
+  const last = Math.max(tail.length - 1, 1);
+  return finite.map((pair) => {
+    const x = 1 + (pair[0] / last) * (width - 2);
+    const y = height - 1 - ((pair[1] - low) / span) * (height - 2);
+    return x.toFixed(1) + "," + y.toFixed(1);
+  }).join(" ");
+}
+
+export const Spark = {
+  name: "KSpark",
+  props: {
+    values: { type: Array, default: () => [] },
+    width: { type: Number, default: 80 },
+    height: { type: Number, default: 20 },
+    count: { type: Number, default: 40 },
+    title: { type: String, default: "" },
+  },
+  setup(props) {
+    const points = computed(() => sparkPoints(props.values, props.width, props.height, props.count));
+    const box = computed(() => "0 0 " + props.width + " " + props.height);
+    return { points, box };
+  },
+  template: `
+    <svg class="spark" :width="width" :height="height" :viewBox="box" preserveAspectRatio="none" role="img">
+      <title v-if="title">{{ title }}</title>
+      <polyline v-if="points" :points="points" fill="none" stroke="currentColor" stroke-width="1.5"
+        stroke-linejoin="round" stroke-linecap="round"></polyline>
+    </svg>`,
+};
+
+export default Spark;

kalfa/board/static/components/table.js

@@ -0,0 +1,156 @@
+import { computed, ref } from "https://cdn.jsdelivr.net/npm/vue@3.4.38/dist/vue.esm-browser.prod.js";
+
+import { EMPTY, number, text } from "../format.js";
+import { Badge } from "./badge.js";
+import { Progress } from "./progress.js";
+import { Spark } from "./spark.js";
+
+
+export function missing(value) {
+  return value === null || value === undefined || value === "" || (typeof value === "number" && Number.isNaN(value));
+}
+
+export function compareValues(first, second) {
+  if (typeof first === "number" && typeof second === "number") return first - second;
+  return String(first).localeCompare(String(second), undefined, { numeric: true, sensitivity: "base" });
+}
+
+export function valueOf(row, column) {
+  if (column.value) return column.value(row);
+  return row ? row[column.key] : undefined;
+}
+
+export function textOf(row, column) {
+  if (column.text) return column.text(row);
+  const value = valueOf(row, column);
+  if (missing(value)) return EMPTY;
+  return typeof value === "number" ? number(value) : text(value);
+}
+
+export function sortRows(rows, column, descending) {
+  if (!column) return rows;
+  const sign = descending ? -1 : 1;
+  return [...rows].sort((first, second) => {
+    const left = valueOf(first, column);
+    const right = valueOf(second, column);
+    const leftMissing = missing(left);
+    const rightMissing = missing(right);
+    if (leftMissing || rightMissing) return leftMissing === rightMissing ? 0 : leftMissing ? 1 : -1;
+    return compareValues(left, right) * sign;
+  });
+}
+
+export const Table = {
+  name: "KTable",
+  components: { KBadge: Badge, KProgress: Progress, KSpark: Spark },
+  props: {
+    columns: { type: Array, default: () => [] },
+    rows: { type: Array, default: () => [] },
+    rowKey: { type: String, default: "path" },
+    selectable: { type: Boolean, default: false },
+    canSelect: { type: Function, default: null },
+    selected: { type: Array, default: () => [] },
+    filterable: { type: Boolean, default: true },
+    placeholder: { type: String, default: "filter" },
+    sortKey: { type: String, default: "" },
+    sortDesc: { type: Boolean, default: false },
+    empty: { type: String, default: "nothing to show" },
+    rowClass: { type: Function, default: null },
+  },
+  emits: ["update:selected", "select"],
+  setup(props, { emit }) {
+    const needle = ref("");
+    const key = ref(props.sortKey);
+    const descending = ref(props.sortDesc);
+    const keyOf = (row) => String(row ? row[props.rowKey] : "");
+    const matches = (row, wanted) => props.columns.some((column) => String(textOf(row, column)).toLowerCase()
+      .includes(wanted));
+    const shown = computed(() => {
+      const wanted = needle.value.trim().toLowerCase();
+      const rows = (props.rows || []).filter((row) => !wanted || matches(row, wanted));
+      return sortRows(rows, props.columns.find((column) => column.key === key.value), descending.value);
+    });
+    const sortBy = (column) => {
+      if (column.sortable === false) return;
+      if (key.value === column.key) descending.value = !descending.value;
+      else {
+        key.value = column.key;
+        descending.value = Boolean(column.descending);
+      }
+    };
+    const arrow = (column) => (key.value === column.key ? (descending.value ? "▼" : "▲") : "");
+    const selectableRow = (row) => (props.canSelect ? Boolean(props.canSelect(row)) : true);
+    const isSelected = (row) => props.selected.includes(keyOf(row));
+    const publish = (keys) => {
+      const unique = [...new Set(keys)];
+      emit("update:selected", unique);
+      emit("select", unique);
+    };
+    const toggle = (row) => {
+      const id = keyOf(row);
+      publish(isSelected(row) ? props.selected.filter((item) => item !== id) : [...props.selected, id]);
+    };
+    const pickable = computed(() => shown.value.filter(selectableRow));
+    const allSelected = computed(() => pickable.value.length > 0 && pickable.value.every(isSelected));
+    const toggleAll = () => {
+      const ids = pickable.value.map(keyOf);
+      if (allSelected.value) publish(props.selected.filter((item) => !ids.includes(item)));
+      else publish([...props.selected, ...ids]);
+    };
+    const href = (row, column) => (column.href ? column.href(row) : "");
+    const cellClass = (column) => [column.numeric ? "num" : "", column.className || ""].join(" ").trim();
+    const classOf = (row) => [props.rowClass ? props.rowClass(row) : "", isSelected(row) ? "selected" : ""]
+      .join(" ").trim();
+    const progressOf = (row, column) => column.progress(row) || { value: 0, total: null };
+    const titleOf = (row, column) => (column.title ? column.title(row) : "");
+    const count = computed(() => shown.value.length);
+    return {
+      needle, shown, sortBy, arrow, selectableRow, isSelected, toggle, allSelected, toggleAll, href, cellClass,
+      classOf, progressOf, titleOf, count, keyOf, valueOf, textOf,
+    };
+  },
+  template: `
+    <div class="table-box">
+      <div class="table-tools" v-if="filterable">
+        <input class="filter" type="search" v-model="needle" :placeholder="placeholder">
+        <span class="muted small">{{ count }} of {{ rows.length }}</span>
+        <slot name="tools"></slot>
+      </div>
+      <div class="table-wrap">
+        <table class="data">
+          <thead>
+            <tr>
+              <th v-if="selectable" class="check">
+                <input type="checkbox" :checked="allSelected" @change="toggleAll" title="select every shown row">
+              </th>
+              <th v-for="column in columns" :key="column.key" :class="[cellClass(column), column.sortable === false ? '' : 'sortable']"
+                @click="sortBy(column)" :title="column.hint || ''">
+                {{ column.label || column.key }} <span class="arrow">{{ arrow(column) }}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in shown" :key="keyOf(row)" :class="classOf(row)">
+              <td v-if="selectable" class="check">
+                <input v-if="selectableRow(row)" type="checkbox" :checked="isSelected(row)" @change="toggle(row)">
+              </td>
+              <td v-for="column in columns" :key="column.key" :class="cellClass(column)" :title="titleOf(row, column)">
+                <k-badge v-if="column.badge" :status="valueOf(row, column)"></k-badge>
+                <k-progress v-else-if="column.progress" :value="progressOf(row, column).value"
+                  :total="progressOf(row, column).total" :label="progressOf(row, column).label || ''"
+                  :part="progressOf(row, column).part"></k-progress>
+                <k-spark v-else-if="column.spark" :values="column.spark(row)"></k-spark>
+                <a v-else-if="href(row, column)" class="link" :href="href(row, column)">{{ textOf(row, column) }}</a>
+                <span v-else>{{ textOf(row, column) }}</span>
+              </td>
+            </tr>
+            <tr v-if="!shown.length">
+              <td class="empty" :colspan="columns.length + (selectable ? 1 : 0)">{{ empty }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>`,
+};
+
+export default Table;