@inc2734/unitone-css 0.68.4 → 0.69.1

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 (12) hide show
  1. package/dist/app.css +1 -1
  2. package/dist/app.js +1 -1
  3. package/dist/library.js +1 -1
  4. package/package.json +1 -1
  5. package/src/foundation/_foundation.scss +3 -13
  6. package/src/layout-primitives/cluster/_cluster.scss +39 -55
  7. package/src/layout-primitives/frame/_frame.scss +0 -5
  8. package/src/layout-primitives/responsive-grid/_responsive-grid.scss +47 -47
  9. package/src/layout-primitives/stack/_stack.scss +33 -45
  10. package/src/layout-primitives/vertical-writing/_vertical-writing.scss +1 -1
  11. package/src/layout-primitives/with-sidebar/_with-sidebar.scss +230 -0
  12. package/src/library.js +35 -26
package/src/library.js CHANGED
@@ -41,17 +41,22 @@ export const setDividerLinewrap = (target) => {
41
41
  return;
42
42
  }
43
43
  let prevChild;
44
+ const baseRect = firstChild.getBoundingClientRect();
44
45
 
45
- [].slice.call(target.children).forEach((child) => {
46
- if (child.classList.contains('unitone-empty')) {
47
- child.remove();
48
- return;
49
- }
46
+ target.setAttribute(
47
+ 'data-unitone-layout',
48
+ target
49
+ .getAttribute('data-unitone-layout')
50
+ .split(' ')
51
+ .filter((value) => !['divider:initialized', '-stack'].includes(value))
52
+ .join(' '),
53
+ );
50
54
 
55
+ [].slice.call(target.children).forEach((child) => {
51
56
  const currentLayout = child.getAttribute('data-unitone-layout') || '';
52
57
  const newLayout = currentLayout
53
58
  .split(' ')
54
- .filter((value) => !['-bol', '-linewrap', ' '].includes(value))
59
+ .filter((value) => !['-bol', '-linewrap'].includes(value))
55
60
  .join(' ');
56
61
 
57
62
  if (newLayout !== currentLayout) {
@@ -59,34 +64,20 @@ export const setDividerLinewrap = (target) => {
59
64
  }
60
65
  });
61
66
 
62
- [].slice.call(target.children).forEach((child) => {
63
- const baseRect = firstChild.getBoundingClientRect();
67
+ [].slice.call(target.children).forEach((child, index) => {
64
68
  const prevRect = prevChild?.getBoundingClientRect();
65
69
  const childRect = child.getBoundingClientRect();
66
70
 
67
71
  const currentLayout = child.getAttribute('data-unitone-layout') || '';
68
72
  const newLayout = currentLayout.split(' ');
69
73
 
70
- if (
71
- firstChild === child ||
72
- (prevRect?.top < childRect.top && prevRect?.left >= childRect.left)
73
- ) {
74
+ if (0 === index || (prevRect?.top < childRect.top && prevRect?.left >= childRect.left)) {
74
75
  if (!newLayout.includes('-bol')) {
75
76
  newLayout.push('-bol');
76
77
  }
77
78
  }
78
79
 
79
- if (prevRect?.top < childRect.top) {
80
- const hardWrap = document.createElement('div');
81
- hardWrap.classList.add('unitone-empty');
82
- child.before(hardWrap);
83
-
84
- if (prevRect?.top < hardWrap.getBoundingClientRect().top) {
85
- hardWrap.remove();
86
- }
87
- }
88
-
89
- if (baseRect.top < childRect.top) {
80
+ if (0 < index && baseRect.top < childRect.top) {
90
81
  if (!newLayout.includes('-linewrap')) {
91
82
  newLayout.push('-linewrap');
92
83
  }
@@ -98,6 +89,21 @@ export const setDividerLinewrap = (target) => {
98
89
 
99
90
  prevChild = child;
100
91
  });
92
+
93
+ const isStack = [].slice
94
+ .call(target.children)
95
+ .every((child) => child.getBoundingClientRect().left === baseRect.left);
96
+ if (isStack) {
97
+ target.setAttribute(
98
+ 'data-unitone-layout',
99
+ `${target.getAttribute('data-unitone-layout')} -stack`,
100
+ );
101
+ }
102
+
103
+ target.setAttribute(
104
+ 'data-unitone-layout',
105
+ `${target.getAttribute('data-unitone-layout')} divider:initialized`,
106
+ );
101
107
  };
102
108
 
103
109
  export const dividersResizeObserver = (target, args = {}) => {
@@ -127,7 +133,10 @@ export const dividersResizeObserver = (target, args = {}) => {
127
133
  requestAnimationFrame(() => {
128
134
  for (const entry of entries) {
129
135
  if ('attributes' === entry.type && 'data-unitone-layout' === entry.attributeName) {
130
- const ignoreUnitoneLayouts = [...(args?.ignore?.layout ?? []), ...['-bol', '-linewrap']];
136
+ const ignoreUnitoneLayouts = [
137
+ ...(args?.ignore?.layout ?? []),
138
+ ...['divider:initialized', '-bol', '-linewrap', '-stack'],
139
+ ];
131
140
 
132
141
  const current = (entry.target.getAttribute(entry.attributeName) ?? '')
133
142
  .split(' ')
@@ -143,7 +152,7 @@ export const dividersResizeObserver = (target, args = {}) => {
143
152
  setDividerLinewrap(target);
144
153
  }
145
154
  } else if ('attributes' === entry.type && 'class' === entry.attributeName) {
146
- const ignoreClassNames = [...(args?.ignore?.className ?? ['unitone-empty'])];
155
+ const ignoreClassNames = [...(args?.ignore?.className ?? [])];
147
156
 
148
157
  const current = (entry.target.getAttribute(entry.attributeName) ?? '')
149
158
  .split(' ')
@@ -322,7 +331,7 @@ export const verticalsResizeObserver = (target) => {
322
331
 
323
332
  target.setAttribute(
324
333
  'data-unitone-layout',
325
- `${target.getAttribute('data-unitone-layout')} -initialized`,
334
+ `${target.getAttribute('data-unitone-layout')} vertical-writing:initialized`,
326
335
  );
327
336
 
328
337
  const observer = new ResizeObserver(