@progress/kendo-vue-layout 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/dist/es/tilelayout/TileLayout.d.ts

@@ -1,108 +0,0 @@
-declare type DefaultData<V> = object | ((this: V) => {});
-declare type DefaultMethods<V> = {
-    [key: string]: (this: V, ...args: any[]) => any;
-};
-import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
-import { TileLayoutGap, TileLayoutItem, TilePosition, TileLayoutRepositionEvent, TileStrictPosition, TileLayoutAutoFlow } from './interfaces/main';
-/**
- * Represents the properties of [TileLayout](% slug overview_tilelayout %) component.
- */
-export interface TileLayoutProps {
-    /**
-     * Sets the `id` property of the root element.
-     */
-    id?: string;
-    /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
-     */
-    dir?: string;
-    /**
-     * Specifies the gaps between the tiles ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     *
-     * * The possible keys are:
-     * * `rows`
-     * * `columns`
-     */
-    gap?: TileLayoutGap;
-    /**
-     * Specifies the default number of columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     */
-    columns?: number;
-    /**
-     * Specifies the default width of the columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     */
-    columnWidth?: number | string;
-    /**
-     * Specifies the default height of the rows ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     */
-    rowHeight?: number | string;
-    /**
-     * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
-     */
-    dataItemKey?: string;
-    /**
-     * The collection of items that will be rendered in the TileLayout
-     * ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
-     */
-    items?: TileLayoutItem[];
-    /**
-     * The list of tiles' positions which are used when the TileLayout is in controlled mode
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-controlling-the-position)).
-     */
-    positions?: TilePosition[];
-    /**
-     * Fires when the user repositions the tile by either dragging or resizing
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-controlling-the-position)).
-     */
-    onReposition?: (event: TileLayoutRepositionEvent) => void;
-    /**
-     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
-     * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
-     * Defaults to `column`
-     * ([see example]({% slug autoflows_tilelayout %})).
-     */
-    autoFlow?: TileLayoutAutoFlow | String;
-    /**
-     * Use this callback to prevent or allow dragging of the tiles based on specific dom event.
-     * Setting `:ignoreDrag="$event => !$event.target.closest('.k-card-title')"` will make only the headers draggable.
-     * Setting `:ignoreDrag="$event => $event.target.nodeName == 'INPUT'"` will ignore dragging input elements.
-     */
-    ignoreDrag?: (event: any) => boolean;
-}
-/**
- * @hidden
- */
-export interface TileLayoutState {
-    positions: TileStrictPosition[];
-}
-/**
- * @hidden
- */
-interface TileLayoutData {
-}
-/**
- * @hidden
- */
-export interface TileLayoutMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface TileLayoutComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface TileLayoutAll extends TileLayoutMethods, TileLayoutState, TileLayoutData, TileLayoutComputed, Vue2type {
-}
-/**
- * @hidden
- */
-declare const TileLayoutVue2: ComponentOptions<Vue2type, DefaultData<TileLayoutData>, DefaultMethods<TileLayoutAll>, TileLayoutComputed, RecordPropsDefinition<TileLayoutProps>>;
-/**
- * @hidden
- */
-declare const TileLayout: DefineComponent<TileLayoutProps, any, TileLayoutData, TileLayoutComputed, TileLayoutMethods, {}, {}, {}, string, TileLayoutProps, TileLayoutProps, {}>;
-export { TileLayout, TileLayoutVue2 };

package/dist/es/tilelayout/TileLayout.js

@@ -1,292 +0,0 @@
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-import { getListeners, getTemplate, getter, templateRendering, validatePackage, shouldShowValidationUI, WatermarkOverlay, guid } from '@progress/kendo-vue-common';
-import { packageMetadata } from '../package-metadata';
-import { Tile } from './Tile';
-/**
- * @hidden
- */
-var AUTO_FLOW_CLASSES = {
-  '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'
-};
-/**
- * @hidden
- */
-var TileLayoutVue2 = {
-  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 validator(value) {
-        return ['column', 'row', 'column dense', 'row dense', 'unset'].includes(value);
-      }
-    },
-    ignoreDrag: Function
-  },
-  created: function created() {
-    validatePackage(packageMetadata);
-    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
-  },
-  data: function data() {
-    return {
-      currentPositions: [],
-      showLicenseWatermark: false
-    };
-  },
-  computed: {
-    compPositions: function compPositions() {
-      if (this.positions) {
-        return this.positions.map(function (p, i) {
-          return Object.assign({
-            order: i,
-            rowSpan: 1,
-            colSpan: 1
-          }, p);
-        });
-      }
-      if (this.items && this.currentPositions.length) {
-        return this.currentPositions.map(function (p, i) {
-          return Object.assign({
-            order: i,
-            rowSpan: 1,
-            colSpan: 1
-          }, p);
-        });
-      }
-      return (this.$props.items || []).map(function (p, i) {
-        return Object.assign({
-          order: i,
-          rowSpan: 1,
-          colSpan: 1
-        }, p.defaultPosition);
-      });
-    },
-    wrapperClass: function wrapperClass() {
-      var _a;
-      var autoFlow = this.$props.autoFlow;
-      return _a = {
-        'k-tilelayout': true,
-        'k-pos-relative': true
-      }, _a[AUTO_FLOW_CLASSES[autoFlow]] = true, _a;
-    }
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  render: function render(createElement) {
-    var h = gh || createElement;
-    var _a = this.$props,
-      _b = _a.columns,
-      columns = _b === void 0 ? 3 : _b,
-      _c = _a.columnWidth,
-      columnWidth = _c === void 0 ? '1fr' : _c,
-      gap = _a.gap,
-      _d = _a.rowHeight,
-      rowHeight = _d === void 0 ? '1fr' : _d,
-      _e = _a.items,
-      items = _e === void 0 ? [] : _e;
-    var gapValue = gap ? "".concat(typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + "".concat(typeof gap.columns === 'number' ? gap.columns + 'px' : gap.columns) : 16;
-    var tileLayoutStyles = {
-      gridTemplateColumns: "repeat(".concat(columns, ", minmax(0px, ").concat(typeof columnWidth === 'number' ? columnWidth + 'px' : columnWidth, "))"),
-      gridAutoRows: "minmax(0px, ".concat(typeof rowHeight === 'number' ? rowHeight + 'px' : rowHeight, ")"),
-      gap: gapValue,
-      padding: gapValue
-    };
-    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
-    return h("div", {
-      dir: this.$props.dir,
-      attrs: this.v3 ? undefined : {
-        dir: this.$props.dir,
-        id: this.$props.id,
-        role: 'list'
-      },
-      "class": this.wrapperClass,
-      style: tileLayoutStyles,
-      id: this.$props.id,
-      role: 'list'
-    }, [items.map(function (tile, index) {
-      var _this = this;
-      var tileTitleId = tile && tile.id || guid();
-      var item = templateRendering.call(this, tile.item, getListeners.call(this));
-      var itemContent = getTemplate.call(this, {
-        h: h,
-        template: item,
-        defaultRendering: null,
-        additionalProps: {
-          tile: tile,
-          index: index
-        }
-      });
-      var header = templateRendering.call(this, tile.header, getListeners.call(this));
-      var headerContent = getTemplate.call(this, {
-        h: h,
-        template: header,
-        defaultRendering: null,
-        additionalProps: {
-          tile: tile,
-          index: index,
-          id: tileTitleId,
-          headerText: tile.headerText
-        }
-      });
-      var body = templateRendering.call(this, tile.body, getListeners.call(this));
-      var bodyContent = getTemplate.call(this, {
-        h: h,
-        template: body,
-        defaultRendering: null,
-        additionalProps: {
-          tile: tile,
-          index: index,
-          bodyText: tile.bodyText
-        }
-      });
-      return (
-        // @ts-ignore function children
-        h(Tile, {
-          key: this.$props.dataItemKey ? getter(this.$props.dataItemKey)(tile) : index,
-          onUpdate: this.updateHandle,
-          on: this.v3 ? undefined : {
-            "update": this.updateHandle
-          },
-          defaultPosition: this.compPositions[index],
-          attrs: this.v3 ? undefined : {
-            defaultPosition: this.compPositions[index],
-            index: index,
-            resizable: tile.resizable,
-            reorderable: tile.reorderable,
-            tile: tile,
-            hintClass: tile.hintClass,
-            hintStyle: tile.hintStyle,
-            ignoreDrag: this.$props.ignoreDrag,
-            "aria-describedby": tileTitleId,
-            "tab-index": tile.tabIndex
-          },
-          index: index,
-          resizable: tile.resizable,
-          reorderable: tile.reorderable,
-          style: tile.style,
-          "class": tile.class,
-          tile: tile,
-          hintClass: tile.hintClass,
-          hintStyle: tile.hintStyle,
-          ignoreDrag: this.$props.ignoreDrag,
-          "aria-describedby": tileTitleId,
-          "tab-index": tile.tabIndex
-        }, this.v3 ? function () {
-          return [tile.item ? itemContent : [h("div", {
-            "class": "k-tilelayout-item-header k-card-header"
-          }, [tile.header ? headerContent : h("h5", {
-            "class": 'k-card-title',
-            id: tileTitleId,
-            attrs: _this.v3 ? undefined : {
-              id: tileTitleId
-            }
-          }, [tile.headerText])]), h("div", {
-            "class": 'k-tilelayout-item-body k-card-body'
-          }, [tile.body ? bodyContent : tile.bodyText])]];
-        } : [tile.item ? itemContent : [h("div", {
-          "class": "k-tilelayout-item-header k-card-header"
-        }, [tile.header ? headerContent : h("h5", {
-          "class": 'k-card-title',
-          id: tileTitleId,
-          attrs: _this.v3 ? undefined : {
-            id: tileTitleId
-          }
-        }, [tile.headerText])]), h("div", {
-          "class": 'k-tilelayout-item-body k-card-body'
-        }, [tile.body ? bodyContent : tile.bodyText])]])
-      );
-    }, this), watermark]);
-  },
-  methods: {
-    focus: function focus() {
-      if (this.$el) {
-        this.$el.focus();
-      }
-    },
-    updateHandle: function updateHandle(index, dOrder, dCol, dRowSpan, dColSpan, isResized) {
-      if (dRowSpan === void 0) {
-        dRowSpan = 0;
-      }
-      if (dColSpan === void 0) {
-        dColSpan = 0;
-      }
-      if (dOrder === 0 && dCol === 0 && !dColSpan && !dRowSpan) {
-        return;
-      }
-      var shouldUpdate = false;
-      var positions = this.compPositions.map(function (p) {
-        return Object.assign({}, p);
-      });
-      // reordering:
-      var current = positions[index];
-      var other = positions.find(function (item) {
-        return item.order === current.order + dOrder;
-      });
-      if (other && other !== current) {
-        current.order += dOrder;
-        other.order += -dOrder;
-        shouldUpdate = true;
-      }
-      var proposedCol = current.col + dCol;
-      if (dCol !== 0 && proposedCol >= 1 && proposedCol + current.colSpan <= (this.$props.columns || 3) + 1) {
-        current.col = proposedCol;
-        shouldUpdate = true;
-      }
-      // resizing:
-      var proposedColSpan = current.colSpan + dColSpan;
-      if (dColSpan && proposedColSpan >= 1 && proposedColSpan + current.col <= (this.$props.columns || 3) + 1) {
-        current.colSpan = proposedColSpan;
-        shouldUpdate = true;
-      }
-      var proposedRowSpan = current.rowSpan + dRowSpan;
-      if (dRowSpan && proposedRowSpan >= 1) {
-        current.rowSpan = proposedRowSpan;
-        shouldUpdate = true;
-      }
-      if (shouldUpdate) {
-        this.currentPositions = positions;
-        if (isResized) {
-          this.$emit('tileresize', {
-            value: positions,
-            index: index,
-            rowSpan: dRowSpan,
-            colSpan: dColSpan
-          });
-        }
-        this.$emit('reposition', {
-          value: positions,
-          index: index,
-          row: dOrder,
-          col: dCol
-        });
-      }
-    }
-  }
-};
-/**
- * @hidden
- */
-var TileLayout = TileLayoutVue2;
-export { TileLayout, TileLayoutVue2 };

package/dist/es/tilelayout/interfaces/main.d.ts

@@ -1,198 +0,0 @@
-/**
- * The interface for describing items that can be passed to the `items` property of the TileLayout component.
- */
-export interface TileLayoutItem {
-    /**
-     * The position which is used when the TileLayout is in uncontrolled mode
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-position-and-dimensions)).
-     */
-    defaultPosition?: TilePosition;
-    /**
-     * Sets additional styles to the TileLayoutItem.
-     */
-    style?: object;
-    /**
-     * Sets additional classes to the TileLayoutItem.
-     */
-    class?: string;
-    /**
-     * The tile object.
-     */
-    tile?: object;
-    /**
-     * Sets additional CSS styles to the TileLayoutItem hint element.
-     */
-    hintStyle?: object;
-    /**
-     * Sets additional classes to the TileLayoutItem hint element.
-     */
-    hintClass?: string;
-    /**
-     * Sets the title in the TileLayoutItem's header content
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
-     */
-    header?: any;
-    /**
-     * Sets the title in the TileLayoutItem's header text
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
-     */
-    headerText?: string;
-    /**
-     * Sets the content in TileLayoutItem's body content
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
-     */
-    body?: any;
-    /**
-     * Sets the content in TileLayoutItem's body text
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
-     */
-    bodyText?: string;
-    /**
-     * Overrides the default rendering of the TileLayoutItem
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-custom-rendering)).
-     */
-    item?: any;
-    /**
-     * Specifies the id of each Tile if needed to be user-defined. By default the id is automatically generated.
-     */
-    id?: any;
-    /**
-     * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-resizing)).
-     * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
-     */
-    resizable?: TileResizeMode | string | boolean;
-    /**
-     * Specifies if the user is allowed to reorder the TileLayoutItem by dragging and dropping it
-     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-reordering)).
-     * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled.
-     */
-    reorderable?: boolean;
-    /**
-     * Specifies if the tabIndex of each TileLayout tile if the scenario requires it. Defaults to `0`.
-     */
-    tabIndex?: number;
-}
-/**
- * Specifies the position of each tile.
- */
-export interface TilePosition {
-    /**
-     * Defines the order index of the TileLayoutItem.
-     * If not set, items will receive a sequential order.
-     */
-    order?: number;
-    /**
-     * (Required) Defines on which column-line the TileLayoutItem will start.
-     * It is required in order reordering and resizing functionalities to work as expected as they rely on it.
-     */
-    col: number;
-    /**
-     * Specifies how many columns will the TileLayoutItem spans.
-     * Defaults to `1`.
-     */
-    colSpan?: number;
-    /**
-     * Defines on which row-line the TileLayoutItem will start.
-     */
-    row?: number;
-    /**
-     * Specifies how many rows will the TileLayoutItem spans.
-     * Defaults to `1`.
-     */
-    rowSpan?: number;
-}
-/**
- * Specifies the strict position of each tile.
- * Used in the [TileLayoutRepositionEvent]({% slug api_layout_tilelayoutrepositionevent %}).
- */
-export interface TileStrictPosition extends TilePosition {
-    /**
-     * Defines the order index of the TileLayoutItem.
-     * If not set, items will receive a sequential order.
-     */
-    order: number;
-    /**
-     * Specifies how many rows will the TileLayoutItem spans.
-     * Defaults to `1`.
-     */
-    rowSpan: number;
-    /**
-     * Specifies how many columns will the TileLayoutItem spans.
-     * Defaults to `1`.
-     */
-    colSpan: number;
-}
-/**
- * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
- * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-resizing)).
- * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
- */
-export declare type TileResizeMode = 'horizontal' | 'vertical' | boolean;
-/**
- * Specifies the gaps between the tiles.
- */
-export interface TileLayoutGap {
-    /**
-     * The rows gap between tiles.
-     * Defaults to `16px`.
-     */
-    rows?: number | string;
-    /**
-     * The columns gap between tiles.
-     * Defaults to `16px`.
-     */
-    columns?: number | string;
-}
-/**
- * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
- * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
- * Defaults to `column`.
- */
-export declare type TileLayoutAutoFlow = 'column' | 'row' | 'column dense' | 'row dense' | 'unset';
-/**
- * The arguments for the `onReposition` TileLayout event.
- */
-export interface TileLayoutRepositionEvent {
-    /**
-     * The new positions of the TileLayout tiles.
-     */
-    value: Array<TileStrictPosition>;
-    /**
-     * The index of the currently moved tile.
-     */
-    index: number;
-    /**
-     * Returns 0 if the row is not changed, 1 if the item is dragged to the next row
-     * and -1 if the item is drag to the previous row.
-     */
-    row: number;
-    /**
-     * Returns 0 if the column is not changed, 1 if the item is dragged to the next column
-     * and -1 if the item is drag to the previous column.
-     */
-    col: number;
-}
-/**
- * The arguments for the `onTileresize` TileLayout event.
- */
-export interface TileLayoutTileResizeEvent {
-    /**
-     * The new resized positions of the TileLayout tiles.
-     */
-    value: Array<TileStrictPosition>;
-    /**
-     * The index of the currently resized tile.
-     */
-    index: number;
-    /**
-     * Returns 0 if the rowSpan is not changed, 1 if the rowSpan is increased
-     * and -1 if the rowSpan is decreased.
-     */
-    rowSpan: number;
-    /**
-     * Returns 0 if the columnSpan is not changed, 1 if the columnSpan is increased
-     * and -1 if the columnSpan is decreased.
-     */
-    colSpan: number;
-}

package/dist/es/tilelayout/interfaces/main.js

@@ -1 +0,0 @@
-export {};