@zeedhi/vuetify 1.129.0 → 1.130.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -61946,7 +61946,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
61946
61946
  )
61947
61947
  }),
61948
61948
  _vm._v(" "),
61949
- _vm._t("default"),
61949
+ _vm.$slots.default
61950
+ ? _c(
61951
+ "span",
61952
+ _vm._g({}, Object.assign({}, on, _vm.$listeners)),
61953
+ [_vm._t("default")],
61954
+ 2
61955
+ )
61956
+ : _vm._e(),
61950
61957
  ]
61951
61958
  },
61952
61959
  },
@@ -61993,7 +62000,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
61993
62000
  /* style */
61994
62001
  const __vue_inject_styles__$5 = function (inject) {
61995
62002
  if (!inject) return
61996
- inject("data-v-6463657c_0", { source: ".v-tooltip__content {\n background-color: var(--v-grey-lighten1);\n border-radius: var(--border);\n padding: var(--spacing-1) var(--spacing-2);\n white-space: normal;\n word-wrap: break-word;\n}\n.v-tooltip__content.menuable__content__active {\n opacity: 0.9 !important;\n}", map: undefined, media: undefined });
62003
+ inject("data-v-0c3734c9_0", { source: ".v-tooltip__content {\n background-color: var(--v-grey-lighten1);\n border-radius: var(--border);\n padding: var(--spacing-1) var(--spacing-2);\n white-space: normal;\n word-wrap: break-word;\n}\n.v-tooltip__content.menuable__content__active {\n opacity: 0.9 !important;\n}", map: undefined, media: undefined });
61997
62004
 
61998
62005
  };
61999
62006
  /* scoped */
@@ -62184,12 +62191,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
62184
62191
  _vm.afterTitleSlot && !_vm.$slots.default
62185
62192
  ? _c(
62186
62193
  _vm.afterTitleSlot.component,
62187
- _vm._b(
62188
- { tag: "component", staticClass: "zd-display-inline-block" },
62189
- "component",
62190
- _vm.afterTitleSlot,
62191
- false
62192
- )
62194
+ _vm._b({ tag: "component" }, "component", _vm.afterTitleSlot, false)
62193
62195
  )
62194
62196
  : _vm._e(),
62195
62197
  _vm._v(" "),
@@ -62204,7 +62206,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
62204
62206
  /* style */
62205
62207
  const __vue_inject_styles__$3 = function (inject) {
62206
62208
  if (!inject) return
62207
- inject("data-v-a214c2b2_0", { source: "\n.zd-tree-after-title {\n position: absolute;\n}\n", map: undefined, media: undefined });
62209
+ inject("data-v-4c1931b9_0", { source: "\n.zd-tree-after-title {\n position: absolute;\n}\n", map: undefined, media: undefined });
62208
62210
 
62209
62211
  };
62210
62212
  /* scoped */
@@ -62244,7 +62246,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
62244
62246
  }
62245
62247
  mounted() {
62246
62248
  this.instance.setTree(this.$refs.tree);
62247
- this.setAfterTitleMargin();
62249
+ if (this.instance.afterTitleSlot)
62250
+ this.instance.afterTitleSlot.forEach((_comp, i) => this.setAfterTitleMargin(i));
62248
62251
  this.nodeChange(); // This needs to be after the tree is set
62249
62252
  this.$watch('$refs.tree.nodes', this.nodeChange, { deep: true }); // This needs to be after the tree is set
62250
62253
  }
@@ -62292,20 +62295,21 @@ If you're seeing "$attrs is readonly", it's caused by this`);
62292
62295
  }, 0);
62293
62296
  return maxOffset;
62294
62297
  }
62295
- getAfterTitleEls() {
62296
- return Array.from(this.$el.querySelectorAll('.zd-tree-after-title'));
62298
+ getAfterTitleEls(columnIndex) {
62299
+ const n = columnIndex + 1;
62300
+ return Array.from(this.$el.querySelectorAll(`:nth-child(${n} of .zd-tree-after-title)`));
62297
62301
  }
62298
- setAfterTitleMargin() {
62302
+ setAfterTitleMargin(columnIndex) {
62299
62303
  if (!this.$el)
62300
62304
  return;
62301
- const els = this.getAfterTitleEls();
62305
+ const els = this.getAfterTitleEls(columnIndex);
62302
62306
  const maxOffset = this.getMaxOffset(els);
62303
62307
  els.forEach((el) => { el.style.left = `${maxOffset}px`; });
62304
62308
  }
62305
- addObserver(node) {
62309
+ addObserver(node, columnIndex) {
62306
62310
  const ref = this.$refs[node.pathStr];
62307
- const el = ref.$el;
62308
- const observer = new ResizeObserver(this.setAfterTitleMargin);
62311
+ const el = ref[columnIndex].$el;
62312
+ const observer = new ResizeObserver(() => this.setAfterTitleMargin(columnIndex));
62309
62313
  if (el.parentElement) {
62310
62314
  observer.observe(el.parentElement);
62311
62315
  }
@@ -62349,7 +62353,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
62349
62353
  __metadata("design:type", Object)
62350
62354
  ], ZdTree.prototype, "allowDragDrop", void 0);
62351
62355
  __decorate([
62352
- vuePropertyDecorator.Prop({ type: [String, Object] }),
62356
+ vuePropertyDecorator.Prop({ type: [String, Object, Array] }),
62353
62357
  __metadata("design:type", Object)
62354
62358
  ], ZdTree.prototype, "afterTitleSlot", void 0);
62355
62359
  __decorate([
@@ -62634,25 +62638,35 @@ If you're seeing "$attrs is readonly", it's caused by this`);
62634
62638
  _vm._v(" "),
62635
62639
  _vm._t("titleSlot", null, { node: node }),
62636
62640
  _vm._v(" "),
62637
- _c(
62638
- "zd-tree-after-title",
62639
- {
62640
- ref: node.pathStr,
62641
- attrs: {
62642
- afterTitleSlot: _vm.instance.getSlotComponent(
62641
+ _vm.instance.afterTitleSlot
62642
+ ? _vm._l(
62643
+ _vm.instance.getSlotComponent(
62643
62644
  _vm.instance.afterTitleSlot,
62644
62645
  node
62645
- )[0],
62646
- },
62647
- on: {
62648
- "hook:mounted": function ($event) {
62649
- return _vm.addObserver(node)
62650
- },
62651
- },
62652
- },
62653
- [_vm._t("afterTitleSlot", null, { node: node })],
62654
- 2
62655
- ),
62646
+ ),
62647
+ function (comp, i) {
62648
+ return _c(
62649
+ "zd-tree-after-title",
62650
+ {
62651
+ ref: node.pathStr,
62652
+ refInFor: true,
62653
+ attrs: { afterTitleSlot: comp },
62654
+ on: {
62655
+ "hook:mounted": function ($event) {
62656
+ return _vm.addObserver(node, i)
62657
+ },
62658
+ },
62659
+ },
62660
+ [
62661
+ _vm._t("afterTitleSlot", null, {
62662
+ node: node,
62663
+ }),
62664
+ ],
62665
+ 2
62666
+ )
62667
+ }
62668
+ )
62669
+ : _vm._e(),
62656
62670
  ]
62657
62671
  },
62658
62672
  },
@@ -62748,7 +62762,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
62748
62762
  /* style */
62749
62763
  const __vue_inject_styles__$2 = function (inject) {
62750
62764
  if (!inject) return
62751
- inject("data-v-11ee7742_0", { source: ".zd-tree {\n color: var(--zd-font-color);\n font-size: var(--zd-font-body1-size);\n font-weight: normal;\n overflow: auto;\n}\n.zd-tree-toolbar {\n display: flex;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n color: var(--zd-font-color);\n}\n.zd-tree.theme--light .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n background: #eee;\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n color: #fff;\n}\n.zd-tree.theme--dark .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n background: #616161;\n}\n.zd-tree .sl-vue-tree-title {\n display: flex;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n height: 30px;\n line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n background-color: var(--current-row-color);\n color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item:hover {\n background: var(--current-row-hover-color) !important;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n margin: 0px 1px 0px 1px;\n padding-bottom: 1.4px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n width: 32px;\n}\n.zd-tree .sl-vue-tree-nodes-list .item-title.has-children {\n font-weight: 700;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align {\n padding-left: 26px;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.is-clickable {\n cursor: pointer;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.v-icon {\n padding-left: 4px;\n}\n.zd-tree .sl-vue-tree-node-item .zd-tree-checkbox {\n padding: 0px 3px 3px 0px;\n}", map: undefined, media: undefined });
62765
+ inject("data-v-6133f414_0", { source: ".zd-tree {\n color: var(--zd-font-color);\n font-size: var(--zd-font-body1-size);\n font-weight: normal;\n overflow: auto;\n}\n.zd-tree-toolbar {\n display: flex;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n color: var(--zd-font-color);\n}\n.zd-tree.theme--light .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n background: #eee;\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n color: #fff;\n}\n.zd-tree.theme--dark .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n background: #616161;\n}\n.zd-tree .sl-vue-tree-title {\n display: flex;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n height: 30px;\n line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n background-color: var(--current-row-color);\n color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item:hover {\n background: var(--current-row-hover-color) !important;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n margin: 0px 1px 0px 1px;\n padding-bottom: 1.4px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n width: 32px;\n}\n.zd-tree .sl-vue-tree-nodes-list .item-title.has-children {\n font-weight: 700;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align {\n padding-left: 26px;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.is-clickable {\n cursor: pointer;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.v-icon {\n padding-left: 4px;\n}\n.zd-tree .sl-vue-tree-node-item .zd-tree-checkbox {\n padding: 0px 3px 3px 0px;\n}", map: undefined, media: undefined });
62752
62766
 
62753
62767
  };
62754
62768
  /* scoped */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/vuetify",
3
- "version": "1.129.0",
3
+ "version": "1.130.0",
4
4
  "description": "Zeedhi Components based on Vuetify",
5
5
  "author": "Zeedhi <zeedhi@teknisa.com>",
6
6
  "license": "ISC",
@@ -51,5 +51,5 @@
51
51
  "@types/prismjs": "1.26.*",
52
52
  "@types/sortablejs": "1.15.*"
53
53
  },
54
- "gitHead": "91a3b81d262294cfe2a662c8a36622e5e9bbcf65"
54
+ "gitHead": "9d59892e4e089904615d85d68efaf4862f543266"
55
55
  }
@@ -13,7 +13,7 @@ export default class ZdTree extends ZdComponentRender {
13
13
  closedIconName: string;
14
14
  allowMultiSelect: string | boolean;
15
15
  allowDragDrop: string | boolean;
16
- afterTitleSlot: ITreeConditionComponent;
16
+ afterTitleSlot: ITreeConditionComponent | ITreeConditionComponent[];
17
17
  toolbarSlot: IComponentRender[];
18
18
  titleSlot: ITreeConditionComponent[];
19
19
  datasource: IDatasource;
@@ -44,9 +44,9 @@ export default class ZdTree extends ZdComponentRender {
44
44
  onNodeDblClick(node: any, event: Event): void;
45
45
  instanceNode(node: ISlTreeNode<IDictionary>): ITreeNodeModel<IDictionary<any>> | undefined;
46
46
  getMaxOffset(els: HTMLElement[]): number;
47
- getAfterTitleEls(): HTMLElement[];
48
- setAfterTitleMargin(): void;
49
- addObserver(node: ISlTreeNode<IDictionary>): void;
47
+ getAfterTitleEls(columnIndex: number): HTMLElement[];
48
+ setAfterTitleMargin(columnIndex: number): void;
49
+ addObserver(node: ISlTreeNode<IDictionary>, columnIndex: number): void;
50
50
  nodeCheck(node: ITreeNode<IDictionary>, event: MouseEvent): void;
51
51
  get cssColorVars(): {
52
52
  '--current-row-color': string;