@soft-stech/bootsman-ui-shadcn 2.0.24 → 2.0.25

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.
Files changed (3) hide show
  1. package/dist/lib/useResizeColumns.js +101 -88
  2. package/package.json +1 -1
  3. package/src/lib/useResizeColumns.ts +19 -1
package/dist/lib/useResizeColumns.js CHANGED
@@ -1,54 +1,55 @@
1
1
  import { ref as c, computed as S } from "vue";
2
2
  import "vee-validate";
3
- import { useEventListener as F } from "@vueuse/core";
4
- const R = 90, $ = 56, k = 10, C = "table";
3
+ import { useEventListener as $ } from "@vueuse/core";
4
+ const p = 90, k = 56, A = 10, C = "table";
5
5
  function Q() {
6
- const y = c(!1), w = c(""), l = c(void 0), n = c(void 0), W = c(null), s = c(null), A = c(0), f = c(0), m = c(void 0), O = c(!1), T = c(!1), z = (e) => {
6
+ const y = c(!1), R = c(""), l = c(void 0), n = c(void 0), W = c(null), i = c(null), O = c(0), f = c(0), m = c(void 0), _ = c(!1), T = c(!1), z = (e) => {
7
7
  if (!W.value?.headRef || !e) return;
8
8
  [...W.value.headRef.querySelectorAll("th")].forEach((u) => {
9
- const a = r(u), v = e[a];
10
- u.style.width = v && v !== 0 ? e[a] + "px" : "";
9
+ const a = r(u), h = e[a];
10
+ u.style.width = h && h !== 0 ? e[a] + "px" : "";
11
11
  });
12
- }, _ = () => {
13
- const e = s.value?.tableRef, t = W.value?.headRef;
12
+ }, D = () => {
13
+ const e = i.value?.tableRef, t = W.value?.headRef;
14
14
  if (!t || !e) return;
15
15
  const u = [...t.querySelectorAll("th")];
16
16
  n.value?.[C] === 0 && (n.value = {}, e.style.width = "");
17
17
  const a = M();
18
18
  e.style.width = "min-content";
19
- const v = u.reduce((h, i) => {
20
- const d = r(i), b = Math.floor(i.offsetWidth), p = d === "actions" ? k : i.offsetWidth < R ? R : i.offsetWidth;
19
+ const h = u.reduce((v, s) => {
20
+ s.style.width = "";
21
+ const o = r(s), b = Math.floor(s.offsetWidth), w = o === "actions" ? A : s.offsetWidth < p ? p : s.offsetWidth;
21
22
  return {
22
- ...h,
23
- [d]: {
24
- cell: i,
23
+ ...v,
24
+ [o]: {
25
+ cell: s,
25
26
  initialWidth: b,
26
27
  baseWidth: b,
27
- minWidth: p
28
+ minWidth: w
28
29
  }
29
30
  };
30
31
  }, {});
31
- return e.style.width = "", Object.values(v).forEach((h) => {
32
- h.baseWidth = Math.floor(h.cell.offsetWidth);
33
- }), z(n.value), e.style.width = (n.value?.[C] || a) + "px", Object.values(v).forEach((h) => {
34
- h.initialWidth = Math.floor(h.cell.offsetWidth);
35
- }), v;
36
- }, D = (e, t) => {
37
- t && (y.value = !0, w.value = e, m.value = F(document, "mousemove", B));
38
- }, H = (e) => {
32
+ return e.style.width = "", Object.values(h).forEach((v) => {
33
+ v.baseWidth = Math.floor(v.cell.offsetWidth);
34
+ }), z(n.value), e.style.width = (n.value?.[C] || a) + "px", Object.values(h).forEach((v) => {
35
+ v.initialWidth = Math.floor(v.cell.offsetWidth);
36
+ }), h;
37
+ }, H = (e, t) => {
38
+ t && (y.value = !0, R.value = e, m.value = $(document, "mousemove", X));
39
+ }, q = (e) => {
39
40
  const t = e.target;
40
- T.value = t.className?.includes?.("resize-handler") || !1, y.value && (q(), V());
41
- }, q = () => {
42
- y.value = !1, w.value = "", m.value && (m.value(), m.value = void 0);
41
+ T.value = t.className?.includes?.("resize-handler") || !1, y.value && (V(), N());
43
42
  }, V = () => {
44
- if (!l.value || !s.value?.tableRef) return;
43
+ y.value = !1, R.value = "", m.value && (m.value(), m.value = void 0);
44
+ }, N = () => {
45
+ if (!l.value || !i.value?.tableRef) return;
45
46
  const e = {};
46
47
  for (const t in l.value) {
47
48
  const u = l.value[t], a = u.cell.hasAttribute("can-resize") ? Math.floor(u.cell.offsetWidth) <= u.minWidth ? u.minWidth : u.cell.offsetWidth : u.initialWidth;
48
49
  u.cell.style.width = a + "px", e[t] = a;
49
50
  }
50
- e[C] = s.value.tableRef.offsetWidth, n.value = e;
51
- }, N = (e) => e === "actions" ? $ : 0, o = S(() => {
51
+ e[C] = i.value.tableRef.offsetWidth, n.value = e;
52
+ }, j = (e) => e === "actions" ? k : 0, d = S(() => {
52
53
  if (!l.value || !W.value?.headRef) return;
53
54
  const e = [...W.value.headRef.querySelectorAll("th")];
54
55
  if (e.length === 0) return;
@@ -60,117 +61,129 @@ function Q() {
60
61
  if (e.length < 2) return;
61
62
  const t = e[e.length - 2];
62
63
  return l.value[r(t)];
63
- }), r = (e) => e.id.split("_")[0], j = (e, t) => {
64
- if (!e || !s.value?.tableRef || !o.value) {
65
- w.value = "";
64
+ }), r = (e) => e.id.split("_")[0], B = (e, t) => {
65
+ if (!e || !i.value?.tableRef || !d.value) {
66
+ R.value = "";
66
67
  return;
67
68
  }
68
- const u = t.movementX, a = u < 0 ? "left" : "right", v = Math.floor(parseInt(e.style.width)) + u, h = Math.floor(parseInt(s.value.tableRef.style.width)) + u, i = Math.floor(parseInt(o.value.cell.style.width)) - u;
69
+ const u = t.movementX, a = u < 0 ? "left" : "right", h = Math.floor(parseInt(e.style.width)) + u, v = Math.floor(parseInt(i.value.tableRef.style.width)) + u, s = Math.floor(parseInt(d.value.cell.style.width)) - u;
69
70
  if (a === "left") {
70
- const d = l.value && l.value[r(e)] ? l.value[r(e)].minWidth : R;
71
- if (v >= d)
72
- e.style.width = v + "px", h >= f.value ? s.value.tableRef.style.width = h + "px" : (s.value.tableRef.style.width = f.value + "px", o.value.cell.style.width = i + "px");
71
+ const o = l.value && l.value[r(e)] ? l.value[r(e)].minWidth : p;
72
+ if (h >= o)
73
+ e.style.width = h + "px", v >= f.value ? i.value.tableRef.style.width = v + "px" : (i.value.tableRef.style.width = f.value + "px", d.value.cell.style.width = s + "px");
73
74
  else
74
75
  return;
75
76
  } else {
76
- const d = r(o.value.cell), b = l.value && l.value[d] ? l.value[d].minWidth + N(d) : R;
77
- i >= b && s.value.tableRef.offsetWidth <= f.value ? o.value.cell.style.width = i + "px" : s.value.tableRef.style.width = h + "px", e.style.width = v + "px";
77
+ const o = r(d.value.cell), b = l.value && l.value[o] ? l.value[o].minWidth + j(o) : p;
78
+ s >= b && i.value.tableRef.offsetWidth <= f.value ? d.value.cell.style.width = s + "px" : i.value.tableRef.style.width = v + "px", e.style.width = h + "px";
78
79
  }
79
- }, B = (e) => {
80
+ }, X = (e) => {
80
81
  if (e.preventDefault(), !l.value) return;
81
- const t = l.value[w.value]?.cell;
82
- j(t, e);
82
+ const t = l.value[R.value]?.cell;
83
+ B(t, e);
83
84
  }, L = () => {
84
- !l.value || !s.value?.tableRef || (s.value.tableRef.style.width = "", n.value = {}, E());
85
- }, X = (e) => {
86
- if (!l.value || !n.value || !o.value || !s.value?.tableRef)
85
+ !l.value || !i.value?.tableRef || (i.value.tableRef.style.width = "", n.value = {}, E());
86
+ }, P = (e) => {
87
+ if (!l.value || !n.value || !d.value || !i.value?.tableRef)
87
88
  return;
88
- const t = { ...n.value }, a = l.value[e].baseWidth, v = n.value[e], h = a - v;
89
- let i = n.value[C] + h, d = r(o.value.cell);
90
- if (i < f.value) {
91
- const b = f.value - i;
92
- let p;
93
- if (e === d) {
89
+ const t = { ...n.value }, a = l.value[e].baseWidth, h = n.value[e], v = a - h;
90
+ let s = n.value[C] + v, o = r(d.value.cell);
91
+ if (s < f.value) {
92
+ const b = f.value - s;
93
+ let w;
94
+ if (e === o) {
94
95
  if (!x.value) {
95
96
  L();
96
97
  return;
97
98
  }
98
- d = r(x.value.cell), p = n.value[d] + b, x.value.cell.style.width = p + "px";
99
+ o = r(x.value.cell), w = n.value[o] + b, x.value.cell.style.width = w + "px";
99
100
  } else
100
- p = n.value[r(o.value.cell)] + b, o.value.cell.style.width = p + "px";
101
- i = f.value, t[d] = p;
101
+ w = n.value[r(d.value.cell)] + b, d.value.cell.style.width = w + "px";
102
+ s = f.value, t[o] = w;
102
103
  }
103
- l.value[e].cell.style.width = a + "px", s.value.tableRef.style.width = i + "px", t[e] = a, t[C] = i, n.value = t;
104
- }, g = () => s.value?.scrollAreaElementRef?.tableWrapperRef?.$el.offsetWidth - 3 || 0, M = () => s.value?.tableRef?.offsetWidth || 0, E = () => {
105
- if (l.value = _(), !l.value) return;
104
+ l.value[e].cell.style.width = a + "px", i.value.tableRef.style.width = s + "px", t[e] = a, t[C] = s, n.value = t;
105
+ }, g = () => i.value?.scrollAreaElementRef?.tableWrapperRef?.$el.offsetWidth - 3 || 0, M = () => i.value?.tableRef?.offsetWidth || 0, E = () => {
106
+ if (l.value = D(), !l.value) return;
106
107
  const e = {};
107
108
  for (const t in l.value)
108
109
  l.value[t].cell.style.width || (l.value[t].cell.style.width = l.value[t].initialWidth + "px"), l.value[t].cell.style.minWidth = l.value[t].minWidth + "px", e[t] = l.value[t].cell.offsetWidth;
109
- if (s.value?.tableRef) {
110
+ if (i.value?.tableRef) {
110
111
  const t = M(), u = g();
111
- f.value = u, s.value.tableRef.setAttribute("initialResize", "set"), n.value?.[C] && !s.value.tableRef.style.width ? s.value.tableRef.style.width = n.value[C] + "px" : t < f.value ? I() : (A.value = t, s.value.tableRef.style.width = t + "px", e[C] = t);
112
+ f.value = u, i.value.tableRef.setAttribute("initialResize", "set"), n.value?.[C] && !i.value.tableRef.style.width ? i.value.tableRef.style.width = n.value[C] + "px" : t < f.value ? I() : (O.value = t, i.value.tableRef.style.width = t + "px", e[C] = t);
112
113
  }
113
114
  n.value = e;
114
- }, P = () => {
115
+ }, U = () => {
115
116
  if (!W.value?.headRef || !l.value) return;
116
117
  const e = [...W.value.headRef.querySelectorAll("th")], t = {};
117
- e.forEach((a, v, h) => {
118
- const i = r(a);
119
- if (l.value && (l.value[i].cell = a), v < h.length - 1) {
120
- const d = n.value?.[i];
121
- if (d)
122
- a.style.width = d + "px", t[i] = d;
118
+ e.forEach((a, h, v) => {
119
+ const s = r(a);
120
+ if (l.value)
121
+ if (l.value[s])
122
+ l.value[s].cell = a;
123
+ else {
124
+ const o = s === "actions" ? A : a.offsetWidth < p ? p : a.offsetWidth;
125
+ l.value[s] = {
126
+ cell: a,
127
+ baseWidth: a.offsetWidth,
128
+ minWidth: o,
129
+ initialWidth: a.offsetWidth
130
+ };
131
+ }
132
+ if (h < v.length - 1) {
133
+ const o = n.value?.[s];
134
+ if (o)
135
+ a.style.width = o + "px", t[s] = o;
123
136
  else {
124
137
  a.style.width = "";
125
- const b = l.value?.[i]?.baseWidth || a.offsetWidth, p = l.value?.[i]?.minWidth || R;
126
- a.style.width = b + "px", a.style.minWidth = p + "px", t[i] = b;
138
+ const b = l.value?.[s]?.baseWidth || a.offsetWidth, w = l.value?.[s]?.minWidth || p;
139
+ a.style.width = b + "px", a.style.minWidth = w + "px", t[s] = b;
127
140
  }
128
141
  } else {
129
- const d = l.value?.[i]?.baseWidth || a.offsetWidth;
130
- t[i] = d;
142
+ const o = l.value?.[s]?.baseWidth || a.offsetWidth;
143
+ t[s] = o;
131
144
  }
132
145
  });
133
146
  const u = Object.values(t).reduce(
134
- (a, v) => a += v,
147
+ (a, h) => a += h,
135
148
  0
136
149
  );
137
- if (s.value?.tableRef) {
150
+ if (i.value?.tableRef) {
138
151
  f.value = g();
139
152
  const a = Math.max(u, f.value);
140
- s.value.tableRef.style.width = a + "px", t[C] = a;
153
+ i.value.tableRef.style.width = a + "px", t[C] = a;
141
154
  }
142
- if (o.value) {
143
- o.value.cell.style.width = "";
144
- const a = Math.floor(o.value.cell.offsetWidth);
145
- t[r(o.value.cell)] = a, o.value.cell.style.width = a + "px";
155
+ if (d.value) {
156
+ d.value.cell.style.width = "";
157
+ const a = Math.floor(d.value.cell.offsetWidth);
158
+ t[r(d.value.cell)] = a, d.value.cell.style.width = a + "px";
146
159
  }
147
160
  n.value = t;
148
- }, U = () => {
161
+ }, F = () => {
149
162
  const e = M();
150
163
  f.value = g(), e < f.value && I();
151
164
  }, I = () => {
152
- if (!o.value || !n.value || !s.value?.tableRef) return;
153
- const e = r(o.value.cell);
154
- n.value[C] = f.value, s.value.tableRef.style.width = f.value + "px", o.value.cell.style.width = "";
155
- const t = Math.floor(o.value.cell.offsetWidth);
156
- n.value[e] = t, o.value.cell.style.width = t + "px";
165
+ if (!d.value || !n.value || !i.value?.tableRef) return;
166
+ const e = r(d.value.cell);
167
+ n.value[C] = f.value, i.value.tableRef.style.width = f.value + "px", d.value.cell.style.width = "";
168
+ const t = Math.floor(d.value.cell.offsetWidth);
169
+ n.value[e] = t, d.value.cell.style.width = t + "px";
157
170
  };
158
171
  return {
159
172
  cells: l,
160
- tableElement: s,
173
+ tableElement: i,
161
174
  tableHeaderElement: W,
162
175
  calculatedColumnSizing: n,
163
176
  isResizing: y,
164
- resizingCellId: w,
165
- handleResizeControlMouseDown: D,
166
- handleResizeControlMouseUp: H,
167
- resetCell: X,
177
+ resizingCellId: R,
178
+ handleResizeControlMouseDown: H,
179
+ handleResizeControlMouseUp: q,
180
+ resetCell: P,
168
181
  resetCells: L,
169
182
  setInitialColumnWidths: E,
170
183
  setProvidedCellWidths: z,
171
- setColumnWidthsOnColumnVisibilityChange: P,
172
- setColumnWidthsOnWindowResize: U,
173
- isMouseDownOnHandler: O,
184
+ setColumnWidthsOnColumnVisibilityChange: U,
185
+ setColumnWidthsOnWindowResize: F,
186
+ isMouseDownOnHandler: _,
174
187
  isMouseUpOnHandler: T
175
188
  };
176
189
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soft-stech/bootsman-ui-shadcn",
3
- "version": "2.0.24",
3
+ "version": "2.0.25",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist",
package/src/lib/useResizeColumns.ts CHANGED
@@ -61,6 +61,8 @@ export function useResizeColumns() {
61
61
  tableRef.style.width = 'min-content'
62
62
 
63
63
  const headerCellsWidths: CELL = headerCells.reduce((acc, cell) => {
64
+ cell.style.width = ''
65
+
64
66
  const cellId = getCellId(cell)
65
67
  const offsetWidth = Math.floor(cell.offsetWidth)
66
68
  const minWidth =
@@ -350,7 +352,23 @@ export function useResizeColumns() {
350
352
  const cellId = getCellId(cell)
351
353
 
352
354
  if (cells.value) {
353
- cells.value[cellId].cell = cell
355
+ if (cells.value[cellId]) {
356
+ cells.value[cellId].cell = cell
357
+ } else {
358
+ const minWidth =
359
+ cellId === 'actions'
360
+ ? ACTIONS_CELL_MIN_WIDTH
361
+ : cell.offsetWidth < MIN_CELL_WIDTH
362
+ ? MIN_CELL_WIDTH
363
+ : cell.offsetWidth
364
+
365
+ cells.value[cellId] = {
366
+ cell: cell,
367
+ baseWidth: cell.offsetWidth,
368
+ minWidth: minWidth,
369
+ initialWidth: cell.offsetWidth
370
+ }
371
+ }
354
372
  }
355
373
 
356
374
  if (index < array.length - 1) {