@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 { WatermarkOverlay as T, guid as x, templateRendering as f, getListeners as y, getTemplate as w, getter as L, validatePackage as v, shouldShowValidationUI as W, getLicenseMessage as C } from "@progress/kendo-vue-common";
import { packageMetadata as b } from "../package-metadata.mjs";
import { Tile as I } from "./Tile.mjs";
const j = {
  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(t) {
        return ["column", "row", "column dense", "row dense", "unset"].includes(t);
      }
    },
    ignoreDrag: Function
  },
  created() {
    v(b), this.showLicenseWatermark = W(b), this.licenseMessage = C(b);
  },
  data() {
    return {
      currentPositions: [],
      showLicenseWatermark: !1,
      licenseMessage: void 0
    };
  },
  computed: {
    compPositions() {
      return this.positions ? this.positions.map((t, s) => Object.assign({
        order: s,
        rowSpan: 1,
        colSpan: 1
      }, t)) : this.items && this.currentPositions.length ? this.currentPositions.map((t, s) => Object.assign({
        order: s,
        rowSpan: 1,
        colSpan: 1
      }, t)) : (this.$props.items || []).map((t, s) => Object.assign({
        order: s,
        rowSpan: 1,
        colSpan: 1
      }, t.defaultPosition));
    },
    wrapperClass() {
      const {
        autoFlow: t
      } = this.$props;
      return {
        "k-tilelayout": !0,
        "k-pos-relative": !0,
        [j[t]]: !0
      };
    }
  },
  render() {
    const {
      columns: t = 3,
      columnWidth: s = "1fr",
      gap: o,
      rowHeight: i = "1fr",
      items: c = []
    } = this.$props, m = o ? `${typeof o.rows == "number" ? o.rows + "px" : o.rows} ${typeof o.columns == "number" ? o.columns + "px" : o.columns}` : 16, n = {
      gridTemplateColumns: `repeat(${t}, minmax(0px, ${typeof s == "number" ? s + "px" : s}))`,
      gridAutoRows: `minmax(0px, ${typeof i == "number" ? i + "px" : i})`,
      gap: m,
      padding: m
    }, a = this.showLicenseWatermark ? p(T, {
      message: this.licenseMessage
    }, null) : null;
    return p("div", {
      dir: this.$props.dir,
      class: this.wrapperClass,
      style: n,
      id: this.$props.id,
      role: "list"
    }, [c.map(function(e, r) {
      const l = e && e.id || x(), d = f.call(this, e.item, y.call(this)), h = w.call(this, {
        h: g,
        template: d,
        defaultRendering: null,
        additionalProps: {
          tile: e,
          index: r
        }
      }), u = f.call(this, e.header, y.call(this)), S = w.call(this, {
        h: g,
        template: u,
        defaultRendering: null,
        additionalProps: {
          tile: e,
          index: r,
          id: l,
          headerText: e.headerText
        }
      }), k = f.call(this, e.body, y.call(this)), $ = w.call(this, {
        h: g,
        template: k,
        defaultRendering: null,
        additionalProps: {
          tile: e,
          index: r,
          bodyText: e.bodyText
        }
      });
      return p(I, {
        key: this.$props.dataItemKey ? L(this.$props.dataItemKey)(e) : r,
        onUpdate: this.updateHandle,
        defaultPosition: this.compPositions[r],
        index: r,
        resizable: e.resizable,
        reorderable: e.reorderable,
        style: e.style,
        class: e.class,
        tile: e,
        hintClass: e.hintClass,
        hintStyle: e.hintStyle,
        ignoreDrag: this.$props.ignoreDrag,
        "aria-describedby": l,
        "tab-index": e.tabIndex
      }, {
        default: () => [e.item ? h : [p("div", {
          class: "k-tilelayout-item-header k-card-header"
        }, [e.header ? S : p("h5", {
          class: "k-card-title",
          id: l
        }, [e.headerText])]), p("div", {
          class: "k-tilelayout-item-body k-card-body"
        }, [e.body ? $ : e.bodyText])]]
      });
    }, this), a]);
  },
  methods: {
    focus() {
      this.$el && this.$el.focus();
    },
    updateHandle(t, s, o, i = 0, c = 0, m) {
      if (s === 0 && o === 0 && !c && !i)
        return;
      let n = !1;
      const a = this.compPositions.map((u) => Object.assign({}, u)), e = a[t], r = a.find((u) => u.order === e.order + s);
      r && r !== e && (e.order += s, r.order += -s, n = !0);
      const l = e.col + o;
      o !== 0 && l >= 1 && l + e.colSpan <= (this.$props.columns || 3) + 1 && (e.col = l, n = !0);
      const d = e.colSpan + c;
      c && d >= 1 && d + e.col <= (this.$props.columns || 3) + 1 && (e.colSpan = d, n = !0);
      const h = e.rowSpan + i;
      i && h >= 1 && (e.rowSpan = h, n = !0), n && (this.currentPositions = a, m && this.$emit("tileresize", {
        value: a,
        index: t,
        rowSpan: i,
        colSpan: c
      }), this.$emit("reposition", {
        value: a,
        index: t,
        row: s,
        col: o
      }));
    }
  }
});
export {
  K as TileLayout
};