@progress/kendo-vue-layout/tilelayout/TileLayout.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as P, createVNode as p, h as g } from "vue";
import { validatePackage as T, shouldShowValidationUI as x, WatermarkOverlay as v, guid as L, templateRendering as f, getListeners as y, getTemplate as w, getter as W } from "@progress/kendo-vue-common";
import { packageMetadata as b } from "../package-metadata.mjs";
import { Tile as C } from "./Tile.mjs";
const I = {
  column: "k-grid-flow-col",
  row: "k-grid-flow-row",
  "column dense": "k-grid-flow-col-dense",
  "row dense": "k-grid-flow-row-dense",
  unset: "k-grid-flow-unset"
}, K = /* @__PURE__ */ P({
  name: "KendoTileLayout",
  props: {
    id: String,
    dir: String,
    gap: Object,
    columns: Number,
    columnWidth: [Number, String],
    rowHeight: [Number, String],
    dataItemKey: String,
    items: Array,
    positions: Array,
    autoFlow: {
      type: String,
      default: "column",
      validator: function(e) {
        return ["column", "row", "column dense", "row dense", "unset"].includes(e);
      }
    },
    ignoreDrag: Function
  },
  created() {
    T(b), this.showLicenseWatermark = x(b);
  },
  data() {
    return {
      currentPositions: [],
      showLicenseWatermark: !1
    };
  },
  computed: {
    compPositions() {
      return this.positions ? this.positions.map((e, o) => Object.assign({
        order: o,
        rowSpan: 1,
        colSpan: 1
      }, e)) : this.items && this.currentPositions.length ? this.currentPositions.map((e, o) => Object.assign({
        order: o,
        rowSpan: 1,
        colSpan: 1
      }, e)) : (this.$props.items || []).map((e, o) => Object.assign({
        order: o,
        rowSpan: 1,
        colSpan: 1
      }, e.defaultPosition));
    },
    wrapperClass() {
      const {
        autoFlow: e
      } = this.$props;
      return {
        "k-tilelayout": !0,
        "k-pos-relative": !0,
        [I[e]]: !0
      };
    }
  },
  render() {
    const {
      columns: e = 3,
      columnWidth: o = "1fr",
      gap: s,
      rowHeight: i = "1fr",
      items: c = []
    } = this.$props, m = s ? `${typeof s.rows == "number" ? s.rows + "px" : s.rows} ${typeof s.columns == "number" ? s.columns + "px" : s.columns}` : 16, n = {
      gridTemplateColumns: `repeat(${e}, minmax(0px, ${typeof o == "number" ? o + "px" : o}))`,
      gridAutoRows: `minmax(0px, ${typeof i == "number" ? i + "px" : i})`,
      gap: m,
      padding: m
    }, a = this.showLicenseWatermark ? p(v, null, null) : null;
    return p("div", {
      dir: this.$props.dir,
      class: this.wrapperClass,
      style: n,
      id: this.$props.id,
      role: "list"
    }, [c.map(function(t, r) {
      const l = t && t.id || L(), d = f.call(this, t.item, y.call(this)), h = w.call(this, {
        h: g,
        template: d,
        defaultRendering: null,
        additionalProps: {
          tile: t,
          index: r
        }
      }), u = f.call(this, t.header, y.call(this)), S = w.call(this, {
        h: g,
        template: u,
        defaultRendering: null,
        additionalProps: {
          tile: t,
          index: r,
          id: l,
          headerText: t.headerText
        }
      }), k = f.call(this, t.body, y.call(this)), $ = w.call(this, {
        h: g,
        template: k,
        defaultRendering: null,
        additionalProps: {
          tile: t,
          index: r,
          bodyText: t.bodyText
        }
      });
      return p(C, {
        key: this.$props.dataItemKey ? W(this.$props.dataItemKey)(t) : r,
        onUpdate: this.updateHandle,
        defaultPosition: this.compPositions[r],
        index: r,
        resizable: t.resizable,
        reorderable: t.reorderable,
        style: t.style,
        class: t.class,
        tile: t,
        hintClass: t.hintClass,
        hintStyle: t.hintStyle,
        ignoreDrag: this.$props.ignoreDrag,
        "aria-describedby": l,
        "tab-index": t.tabIndex
      }, {
        default: () => [t.item ? h : [p("div", {
          class: "k-tilelayout-item-header k-card-header"
        }, [t.header ? S : p("h5", {
          class: "k-card-title",
          id: l
        }, [t.headerText])]), p("div", {
          class: "k-tilelayout-item-body k-card-body"
        }, [t.body ? $ : t.bodyText])]]
      });
    }, this), a]);
  },
  methods: {
    focus() {
      this.$el && this.$el.focus();
    },
    updateHandle(e, o, s, i = 0, c = 0, m) {
      if (o === 0 && s === 0 && !c && !i)
        return;
      let n = !1;
      const a = this.compPositions.map((u) => Object.assign({}, u)), t = a[e], r = a.find((u) => u.order === t.order + o);
      r && r !== t && (t.order += o, r.order += -o, n = !0);
      const l = t.col + s;
      s !== 0 && l >= 1 && l + t.colSpan <= (this.$props.columns || 3) + 1 && (t.col = l, n = !0);
      const d = t.colSpan + c;
      c && d >= 1 && d + t.col <= (this.$props.columns || 3) + 1 && (t.colSpan = d, n = !0);
      const h = t.rowSpan + i;
      i && h >= 1 && (t.rowSpan = h, n = !0), n && (this.currentPositions = a, m && this.$emit("tileresize", {
        value: a,
        index: e,
        rowSpan: i,
        colSpan: c
      }), this.$emit("reposition", {
        value: a,
        index: e,
        row: o,
        col: s
      }));
    }
  }
});
export {
  K as TileLayout
};