@threlte/flex 0.0.2 → 0.0.3

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/Box/Box.svelte +9 -3
  2. package/dist/parsers/tailwindParser.js +35 -1
  3. package/package.json +2 -2
package/dist/Box/Box.svelte CHANGED
@@ -19,6 +19,12 @@ onDestroy(() => {
19
19
  });
20
20
  let computedWidth = 1;
21
21
  let computedHeight = 1;
22
+ /**
23
+ * Untrack contentGroup
24
+ */
25
+ const getContentGroup = () => {
26
+ return contentGroup;
27
+ };
22
28
  // after the parent has been reflowed, we can use the calculated layout to set the properties of the box
23
29
  onEvent('reflow:after', () => {
24
30
  computedWidth =
@@ -29,9 +35,9 @@ onEvent('reflow:after', () => {
29
35
  typeof $$restProps.height === 'number'
30
36
  ? $$restProps.height
31
37
  : node.getComputedHeight() / $scaleFactor;
32
- contentGroup.position[$mainAxis] = computedWidth / 2;
33
- contentGroup.position[$crossAxis] = -computedHeight / 2;
34
- contentGroup.position[$depthAxis] = 0;
38
+ getContentGroup().position[$mainAxis] = computedWidth / 2;
39
+ getContentGroup().position[$crossAxis] = -computedHeight / 2;
40
+ getContentGroup().position[$depthAxis] = 0;
35
41
  });
36
42
  </script>
37
43
 
package/dist/parsers/tailwindParser.js CHANGED
@@ -127,19 +127,25 @@ export const tailwindParser = createClassParser((string) => {
127
127
  switch (className) {
128
128
  case 'flex-row':
129
129
  styles.flexDirection = 'Row';
130
+ break;
130
131
  case 'flex-row-reverse':
131
132
  styles.flexDirection = 'RowReverse';
133
+ break;
132
134
  case 'flex-col':
133
135
  styles.flexDirection = 'Column';
136
+ break;
134
137
  case 'flex-col-reverse':
135
138
  styles.flexDirection = 'ColumnReverse';
136
- // flex-wrap
139
+ break;
137
140
  case 'flex-wrap':
138
141
  styles.flexWrap = 'Wrap';
142
+ break;
139
143
  case 'flex-wrap-reverse':
140
144
  styles.flexWrap = 'WrapReverse';
145
+ break;
141
146
  case 'flex-nowrap':
142
147
  styles.flexWrap = 'NoWrap';
148
+ break;
143
149
  default:
144
150
  // flex shorthand
145
151
  const [, value] = className.split('-');
@@ -151,16 +157,22 @@ export const tailwindParser = createClassParser((string) => {
151
157
  switch (className) {
152
158
  case 'justify-start':
153
159
  styles.justifyContent = 'FlexStart';
160
+ break;
154
161
  case 'justify-end':
155
162
  styles.justifyContent = 'FlexEnd';
163
+ break;
156
164
  case 'justify-center':
157
165
  styles.justifyContent = 'Center';
166
+ break;
158
167
  case 'justify-between':
159
168
  styles.justifyContent = 'SpaceBetween';
169
+ break;
160
170
  case 'justify-around':
161
171
  styles.justifyContent = 'SpaceAround';
172
+ break;
162
173
  case 'justify-evenly':
163
174
  styles.justifyContent = 'SpaceEvenly';
175
+ break;
164
176
  }
165
177
  }
166
178
  // align-items
@@ -168,14 +180,19 @@ export const tailwindParser = createClassParser((string) => {
168
180
  switch (className) {
169
181
  case 'items-start':
170
182
  styles.alignItems = 'FlexStart';
183
+ break;
171
184
  case 'items-end':
172
185
  styles.alignItems = 'FlexEnd';
186
+ break;
173
187
  case 'items-center':
174
188
  styles.alignItems = 'Center';
189
+ break;
175
190
  case 'items-baseline':
176
191
  styles.alignItems = 'Baseline';
192
+ break;
177
193
  case 'items-stretch':
178
194
  styles.alignItems = 'Stretch';
195
+ break;
179
196
  }
180
197
  }
181
198
  // align-content
@@ -183,20 +200,28 @@ export const tailwindParser = createClassParser((string) => {
183
200
  switch (className) {
184
201
  case 'content-normal':
185
202
  styles.alignContent = 'Auto';
203
+ break;
186
204
  case 'content-start':
187
205
  styles.alignContent = 'FlexStart';
206
+ break;
188
207
  case 'content-end':
189
208
  styles.alignContent = 'FlexEnd';
209
+ break;
190
210
  case 'content-center':
191
211
  styles.alignContent = 'Center';
212
+ break;
192
213
  case 'content-between':
193
214
  styles.alignContent = 'SpaceBetween';
215
+ break;
194
216
  case 'content-around':
195
217
  styles.alignContent = 'SpaceAround';
218
+ break;
196
219
  case 'content-stretch':
197
220
  styles.alignContent = 'Stretch';
221
+ break;
198
222
  case 'content-baseline':
199
223
  styles.alignContent = 'Baseline';
224
+ break;
200
225
  }
201
226
  }
202
227
  // align-self
@@ -204,16 +229,22 @@ export const tailwindParser = createClassParser((string) => {
204
229
  switch (className) {
205
230
  case 'self-auto':
206
231
  styles.alignSelf = 'Auto';
232
+ break;
207
233
  case 'self-start':
208
234
  styles.alignSelf = 'FlexStart';
235
+ break;
209
236
  case 'self-end':
210
237
  styles.alignSelf = 'FlexEnd';
238
+ break;
211
239
  case 'self-center':
212
240
  styles.alignSelf = 'Center';
241
+ break;
213
242
  case 'self-stretch':
214
243
  styles.alignSelf = 'Stretch';
244
+ break;
215
245
  case 'self-baseline':
216
246
  styles.alignSelf = 'Baseline';
247
+ break;
217
248
  }
218
249
  }
219
250
  // Gaps
@@ -251,10 +282,13 @@ export const tailwindParser = createClassParser((string) => {
251
282
  switch (className) {
252
283
  case 'aspect-square':
253
284
  styles.aspectRatio = 1;
285
+ break;
254
286
  case 'aspect-landscape':
255
287
  styles.aspectRatio = 16 / 9;
288
+ break;
256
289
  case 'aspect-portrait':
257
290
  styles.aspectRatio = 9 / 16;
291
+ break;
258
292
  default:
259
293
  const [, value] = className.split('-');
260
294
  const [width, height] = value.split('/');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threlte/flex",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
5
5
  "license": "MIT",
6
6
  "devDependencies": {
@@ -28,7 +28,7 @@
28
28
  "typescript": "^5.0.0",
29
29
  "vite": "^4.3.6",
30
30
  "@threlte/core": "6.0.8",
31
- "@threlte/extras": "5.6.4"
31
+ "@threlte/extras": "5.7.0"
32
32
  },
33
33
  "dependencies": {
34
34
  "mitt": "^3.0.1",