uikit 3.14.2-dev.dedde7cc1 → 3.14.2-dev.e1b806e52

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 (52) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/build/util.js +8 -2
  3. package/dist/css/uikit-core-rtl.css +1 -1
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +1 -1
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +7 -4
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +7 -4
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +1 -1
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +1 -1
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +1 -1
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +1 -1
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +1 -1
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +6 -10
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +31 -21
  38. package/dist/js/uikit-core.min.js +1 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +31 -21
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +11 -11
  44. package/src/js/core/drop.js +12 -4
  45. package/src/js/core/toggle.js +4 -0
  46. package/src/js/mixin/position.js +6 -20
  47. package/src/js/util/viewport.js +5 -3
  48. package/src/less/theme/navbar.less +7 -5
  49. package/src/scss/mixins-theme.scss +7 -5
  50. package/tests/drop.html +19 -1
  51. package/tests/dropdown.html +6 -0
  52. package/tests/navbar.html +21 -59
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "uikit",
3
3
  "title": "UIkit",
4
4
  "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
5
- "version": "3.14.2-dev.dedde7cc1",
5
+ "version": "3.14.2-dev.e1b806e52",
6
6
  "main": "dist/js/uikit.js",
7
7
  "style": "dist/css/uikit.css",
8
8
  "sideEffects": [
@@ -34,32 +34,32 @@
34
34
  },
35
35
  "homepage": "https://getuikit.com",
36
36
  "devDependencies": {
37
- "@babel/core": "^7.17.8",
38
- "@babel/preset-env": "^7.16.4",
37
+ "@babel/core": "^7.17.10",
38
+ "@babel/preset-env": "^7.17.10",
39
39
  "@rollup/plugin-alias": "^3.1.9",
40
40
  "@rollup/plugin-babel": "^5.3.1",
41
41
  "@rollup/plugin-replace": "^4.0.0",
42
- "archiver": "^5.3.0",
42
+ "archiver": "^5.3.1",
43
43
  "camelcase": "^6.3.0",
44
44
  "clean-css": "^5.3.0",
45
45
  "dateformat": "^5.0.3",
46
- "esbuild": "^0.14.32",
47
- "eslint": "^8.12.0",
46
+ "esbuild": "^0.14.38",
47
+ "eslint": "^8.15.0",
48
48
  "eslint-config-prettier": "^8.5.0",
49
- "fs-extra": "^10.0.1",
50
- "glob": "^7.2.0",
51
- "inquirer": "^8.2.2",
49
+ "fs-extra": "^10.1.0",
50
+ "glob": "^8.0.1",
51
+ "inquirer": "^8.2.4",
52
52
  "less": "^4.1.2",
53
53
  "minimist": "^1.2.6",
54
54
  "number-precision": "^1.5.2",
55
55
  "p-limit": "^4.0.0",
56
56
  "prettier": "^2.6.2",
57
- "rollup": "^2.70.1",
57
+ "rollup": "^2.72.1",
58
58
  "rollup-plugin-esbuild": "^4.9.1",
59
59
  "rollup-plugin-html": "^0.2.1",
60
60
  "rollup-plugin-modify": "^3.0.0",
61
61
  "rtlcss": "^3.5.0",
62
- "semver": "^7.3.2",
62
+ "semver": "^7.3.7",
63
63
  "svgo": "^2.8.0",
64
64
  "watch-run": "^1.2.5"
65
65
  }
@@ -379,7 +379,9 @@ export default {
379
379
  toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
380
380
 
381
381
  const boundary = query(this.boundary, this.$el);
382
- const scrollParentOffset = offset(scrollParents(this.$el)[0]);
382
+ const scrollParentOffset = offset(
383
+ scrollParents(boundary && this.boundaryAlign ? boundary : this.$el)[0]
384
+ );
383
385
  const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
384
386
 
385
387
  css(this.$el, 'maxWidth', '');
@@ -389,9 +391,15 @@ export default {
389
391
 
390
392
  if (this.pos[1] === 'justify') {
391
393
  const prop = this.axis === 'y' ? 'width' : 'height';
392
- const targetOffset = offset(this.target);
393
- const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
394
- css(this.$el, prop, alignTo[prop]);
394
+ css(
395
+ this.$el,
396
+ prop,
397
+ Math.min(
398
+ (boundary ? boundaryOffset : offset(this.target))[prop],
399
+ scrollParentOffset[prop] -
400
+ 2 * toPx(getCssVar('position-viewport-offset', this.$el))
401
+ )
402
+ );
395
403
  } else if (this.$el.offsetWidth > maxWidth) {
396
404
  addClass(this.$el, `${this.clsDrop}-stack`);
397
405
  }
@@ -156,6 +156,10 @@ export default {
156
156
  {
157
157
  name: 'click',
158
158
 
159
+ filter() {
160
+ return ['click', 'hover'].some((mode) => includes(this.mode, mode));
161
+ },
162
+
159
163
  handler(e) {
160
164
  let link;
161
165
  if (
@@ -1,14 +1,4 @@
1
- import {
2
- $,
3
- flipPosition,
4
- getCssVar,
5
- offset as getOffset,
6
- includes,
7
- isNumeric,
8
- isRtl,
9
- positionAt,
10
- toPx,
11
- } from 'uikit-util';
1
+ import { flipPosition, getCssVar, includes, isRtl, positionAt, toPx } from 'uikit-util';
12
2
 
13
3
  export default {
14
4
  props: {
@@ -32,15 +22,11 @@ export default {
32
22
  positionAt(element, target, boundary) {
33
23
  const [dir, align] = this.pos;
34
24
 
35
- let { offset } = this;
36
- if (!isNumeric(offset)) {
37
- const node = $(offset);
38
- offset = node
39
- ? getOffset(node)[this.axis === 'x' ? 'left' : 'top'] -
40
- getOffset(target)[this.axis === 'x' ? 'right' : 'bottom']
41
- : 0;
42
- }
43
- offset = toPx(offset) + toPx(getCssVar('position-offset', element));
25
+ let offset = toPx(
26
+ this.offset === false ? getCssVar('position-offset', element) : this.offset,
27
+ this.axis === 'x' ? 'width' : 'height',
28
+ element
29
+ );
44
30
  offset = [includes(['left', 'top'], dir) ? -offset : +offset, 0];
45
31
 
46
32
  const attach = {
@@ -158,11 +158,13 @@ export function offsetViewport(scrollElement) {
158
158
  ['width', 'x', 'left', 'right'],
159
159
  ['height', 'y', 'top', 'bottom'],
160
160
  ]) {
161
- if (!isWindow(getViewport(viewportElement))) {
161
+ if (!isWindow(viewportElement)) {
162
162
  rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
163
+ } else {
164
+ // iOS 12 returns <body> as scrollingElement
165
+ viewportElement = scrollingElement(viewportElement);
163
166
  }
164
- rect[prop] = rect[dir] =
165
- viewportElement[(isWindow(viewportElement) ? 'inner' : 'client') + ucfirst(prop)];
167
+ rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
166
168
  rect[end] = rect[prop] + rect[start];
167
169
  }
168
170
  return rect;
@@ -133,11 +133,13 @@
133
133
  * Navbar
134
134
  */
135
135
 
136
- .uk-navbar-container > .uk-container .uk-navbar-left {
137
- margin-left: -@navbar-nav-item-padding-horizontal;
138
- margin-right: -@navbar-nav-item-padding-horizontal;
139
- }
140
- .uk-navbar-container > .uk-container .uk-navbar-right { margin-right: -@navbar-nav-item-padding-horizontal; }
136
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-nav:first-child,
137
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-item:first-child,
138
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-toggle:first-child { margin-left: -@navbar-nav-item-padding-horizontal; }
139
+
140
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-nav:last-child,
141
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-item:last-child,
142
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-toggle:last-child { margin-right: -@navbar-nav-item-padding-horizontal; }
141
143
 
142
144
  /*
143
145
  * Grid Divider
@@ -1765,11 +1765,13 @@
1765
1765
  * Navbar
1766
1766
  */
1767
1767
 
1768
- .uk-navbar-container > .uk-container .uk-navbar-left {
1769
- margin-left: (-$navbar-nav-item-padding-horizontal);
1770
- margin-right: (-$navbar-nav-item-padding-horizontal);
1771
- }
1772
- .uk-navbar-container > .uk-container .uk-navbar-right { margin-right: (-$navbar-nav-item-padding-horizontal); }
1768
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-nav:first-child,
1769
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-item:first-child,
1770
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-toggle:first-child { margin-left: (-$navbar-nav-item-padding-horizontal); }
1771
+
1772
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-nav:last-child,
1773
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-item:last-child,
1774
+ .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-toggle:last-child { margin-right: (-$navbar-nav-item-padding-horizontal); }
1773
1775
 
1774
1776
  /*
1775
1777
  * Grid Divider
package/tests/drop.html CHANGED
@@ -260,7 +260,7 @@
260
260
  <div class="uk-child-width-1-2@m" uk-grid>
261
261
  <div>
262
262
 
263
- <div class="boundary uk-height-medium uk-margin uk-flex uk-flex-between uk-flex-wrap">
263
+ <div class="boundary uk-height-medium uk-margin uk-flex uk-flex-around uk-flex-wrap">
264
264
  <div>
265
265
 
266
266
  <button class="uk-button uk-button-default" type="button">Bottom Right</button>
@@ -279,6 +279,12 @@
279
279
  <div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
280
280
 
281
281
  </div>
282
+ <div>
283
+
284
+ <button class="uk-button uk-button-default" type="button">Bottom Justify</button>
285
+ <div class="uk-width-medium" uk-dropdown="pos: bottom-justify; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
286
+
287
+ </div>
282
288
  </div>
283
289
 
284
290
  </div>
@@ -303,6 +309,12 @@
303
309
  <div class="uk-width-medium" uk-dropdown="pos: right-top; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
304
310
 
305
311
  </div>
312
+ <div>
313
+
314
+ <button class="uk-button uk-button-default" type="button">Right Justify</button>
315
+ <div class="uk-width-medium" uk-dropdown="pos: right-justify; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
316
+
317
+ </div>
306
318
  </div>
307
319
 
308
320
  </div>
@@ -473,6 +485,12 @@
473
485
  <td>200</td>
474
486
  <td>The animation duration.</td>
475
487
  </tr>
488
+ <tr>
489
+ <td><code>container</code></td>
490
+ <td>Boolean</td>
491
+ <td>false</td>
492
+ <td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
493
+ </tr>
476
494
  </tbody>
477
495
  </table>
478
496
  </div>
@@ -431,6 +431,12 @@
431
431
  <td>200</td>
432
432
  <td>The animation duration.</td>
433
433
  </tr>
434
+ <tr>
435
+ <td><code>container</code></td>
436
+ <td>Boolean</td>
437
+ <td>false</td>
438
+ <td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
439
+ </tr>
434
440
  </tbody>
435
441
  </table>
436
442
  </div>
package/tests/navbar.html CHANGED
@@ -1400,33 +1400,25 @@
1400
1400
 
1401
1401
  <nav class="uk-navbar uk-navbar-container uk-margin">
1402
1402
  <div class="uk-navbar-left">
1403
- <div>
1404
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1405
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1406
- </div>
1403
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1404
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1407
1405
  </div>
1408
1406
  <div class="uk-navbar-right">
1409
- <div>
1410
- <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
1411
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1412
- </div>
1407
+ <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
1408
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1413
1409
  </div>
1414
1410
  </nav>
1415
1411
 
1416
1412
  <nav class="uk-navbar uk-navbar-container uk-margin">
1417
1413
  <div class="uk-navbar-left">
1418
- <div>
1419
- <a class="uk-navbar-toggle" href="#">Menu</a>
1420
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1421
- </div>
1414
+ <a class="uk-navbar-toggle" href="#">Menu</a>
1415
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1422
1416
  </div>
1423
1417
  <div class="uk-navbar-right">
1424
- <div>
1425
- <a class="uk-navbar-toggle" href="#">
1426
- <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
1427
- </a>
1428
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1429
- </div>
1418
+ <a class="uk-navbar-toggle" href="#">
1419
+ <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
1420
+ </a>
1421
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1430
1422
  </div>
1431
1423
  </nav>
1432
1424
 
@@ -1767,8 +1759,6 @@
1767
1759
  <div class="uk-navbar">
1768
1760
  <div class="uk-navbar-left">
1769
1761
 
1770
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1771
-
1772
1762
  <ul class="uk-navbar-nav">
1773
1763
  <li class="uk-active"><a href="#">Active</a></li>
1774
1764
  <li><a href="#">Parent</a></li>
@@ -1818,6 +1808,8 @@
1818
1808
  </ul>
1819
1809
  </div>
1820
1810
 
1811
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1812
+
1821
1813
  </div>
1822
1814
  </div>
1823
1815
  </div>
@@ -1843,19 +1835,7 @@
1843
1835
  </div>
1844
1836
  <div class="uk-navbar-right">
1845
1837
 
1846
- <div class="uk-navbar-item">
1847
- <ul class="uk-grid-small" uk-grid>
1848
- <li>
1849
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1850
- </li>
1851
- <li>
1852
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1853
- </li>
1854
- <li>
1855
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1856
- </li>
1857
- </ul>
1858
- </div>
1838
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1859
1839
 
1860
1840
  </div>
1861
1841
  </div>
@@ -1906,19 +1886,7 @@
1906
1886
  <li><a href="#">Item</a></li>
1907
1887
  </ul>
1908
1888
 
1909
- <div class="uk-navbar-item">
1910
- <ul class="uk-grid-small" uk-grid>
1911
- <li>
1912
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1913
- </li>
1914
- <li>
1915
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1916
- </li>
1917
- <li>
1918
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1919
- </li>
1920
- </ul>
1921
- </div>
1889
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1922
1890
 
1923
1891
  </div>
1924
1892
  </div>
@@ -1945,19 +1913,7 @@
1945
1913
  </div>
1946
1914
  <div class="uk-navbar-right">
1947
1915
 
1948
- <div class="uk-navbar-item">
1949
- <ul class="uk-grid-small" uk-grid>
1950
- <li>
1951
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1952
- </li>
1953
- <li>
1954
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1955
- </li>
1956
- <li>
1957
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1958
- </li>
1959
- </ul>
1960
- </div>
1916
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1961
1917
 
1962
1918
  </div>
1963
1919
  </div>
@@ -2039,6 +1995,12 @@
2039
1995
  <td>200</td>
2040
1996
  <td>The dropbar transition duration.</td>
2041
1997
  </tr>
1998
+ <tr>
1999
+ <td><code>container</code></td>
2000
+ <td>Boolean</td>
2001
+ <td>false</td>
2002
+ <td>Define a target container via a selector to specify where the drops should be appended in the DOM.</td>
2003
+ </tr>
2042
2004
  </tbody>
2043
2005
  </table>
2044
2006
  </div>