@aotearoan/neon 28.6.0 → 28.7.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 (47) hide show
  1. package/dist/components/layout/card-list/NeonCardList.cjs.js +1 -1
  2. package/dist/components/layout/card-list/NeonCardList.cjs.js.map +1 -1
  3. package/dist/components/layout/card-list/NeonCardList.es.js +70 -48
  4. package/dist/components/layout/card-list/NeonCardList.es.js.map +1 -1
  5. package/dist/components/layout/card-list/NeonCardList.vue.cjs.js +1 -1
  6. package/dist/components/layout/card-list/NeonCardList.vue.cjs.js.map +1 -1
  7. package/dist/components/layout/card-list/NeonCardList.vue.es.js +86 -69
  8. package/dist/components/layout/card-list/NeonCardList.vue.es.js.map +1 -1
  9. package/dist/components/layout/card-list/draggable-card/NeonDraggableCard.vue.cjs.js +2 -0
  10. package/dist/components/layout/card-list/draggable-card/NeonDraggableCard.vue.cjs.js.map +1 -0
  11. package/dist/components/layout/card-list/draggable-card/NeonDraggableCard.vue.cjs2.js +2 -0
  12. package/dist/components/layout/card-list/draggable-card/NeonDraggableCard.vue.cjs2.js.map +1 -0
  13. package/dist/components/layout/card-list/draggable-card/NeonDraggableCard.vue.es.js +78 -0
  14. package/dist/components/layout/card-list/draggable-card/NeonDraggableCard.vue.es.js.map +1 -0
  15. package/dist/components/layout/card-list/draggable-card/NeonDraggableCard.vue.es2.js +5 -0
  16. package/dist/components/layout/card-list/draggable-card/NeonDraggableCard.vue.es2.js.map +1 -0
  17. package/dist/icons/drag-handle.svg.cjs.js +7 -0
  18. package/dist/icons/drag-handle.svg.cjs.js.map +1 -0
  19. package/dist/icons/drag-handle.svg.es.js +10 -0
  20. package/dist/icons/drag-handle.svg.es.js.map +1 -0
  21. package/dist/neon.cjs.js +1 -1
  22. package/dist/neon.es.js +43 -41
  23. package/dist/neon.es.js.map +1 -1
  24. package/dist/src/components/layout/card-list/NeonCardList.d.ts +122 -3
  25. package/dist/src/components/layout/card-list/draggable-card/NeonDraggableCard.vue.d.ts +59 -0
  26. package/dist/src/components/layout/list-layout/NeonListLayout.d.ts +95 -3
  27. package/dist/src/neon.d.ts +1 -0
  28. package/dist/src/utils/common/array/NeonArrayUtils.d.ts +7 -0
  29. package/dist/utils/common/array/NeonArrayUtils.cjs.js +2 -0
  30. package/dist/utils/common/array/NeonArrayUtils.cjs.js.map +1 -0
  31. package/dist/utils/common/array/NeonArrayUtils.es.js +8 -0
  32. package/dist/utils/common/array/NeonArrayUtils.es.js.map +1 -0
  33. package/dist/utils/common/icons/RegisterIcons.cjs.js +1 -1
  34. package/dist/utils/common/icons/RegisterIcons.cjs.js.map +1 -1
  35. package/dist/utils/common/icons/RegisterIcons.es.js +30 -29
  36. package/dist/utils/common/icons/RegisterIcons.es.js.map +1 -1
  37. package/package.json +1 -1
  38. package/src/sass/components/_button.scss +1 -1
  39. package/src/sass/components/_card-list.scss +2 -6
  40. package/src/sass/components/_draggable-card.scss +75 -0
  41. package/src/sass/components/_label.scss +2 -2
  42. package/src/sass/components/_slider.scss +1 -1
  43. package/src/sass/components/components.scss +1 -0
  44. package/src/sass/includes/_dependencies.scss +2 -1
  45. package/src/sass/theme.scss +4 -0
  46. package/src/sass/variables-dark.scss +18 -14
  47. package/src/sass/variables-light.scss +18 -14
@@ -1,10 +1,10 @@
1
1
  import { NeonIconRegistry as o } from "./NeonIconRegistry.es.js";
2
2
  import r from "../../../icons/align-center.svg.es.js";
3
3
  import m from "../../../icons/align-left.svg.es.js";
4
- import i from "../../../icons/align-right.svg.es.js";
5
- import d from "../../../icons/at.svg.es.js";
6
- import t from "../../../icons/calendar.svg.es.js";
7
- import n from "../../../icons/check.svg.es.js";
4
+ import d from "../../../icons/align-right.svg.es.js";
5
+ import i from "../../../icons/at.svg.es.js";
6
+ import n from "../../../icons/calendar.svg.es.js";
7
+ import t from "../../../icons/check.svg.es.js";
8
8
  import a from "../../../icons/check-circle.svg.es.js";
9
9
  import c from "../../../icons/chevron-down.svg.es.js";
10
10
  import e from "../../../icons/chevron-left.svg.es.js";
@@ -17,19 +17,20 @@ import h from "../../../icons/dash.svg.es.js";
17
17
  import g from "../../../icons/desktop.svg.es.js";
18
18
  import u from "../../../icons/dot.svg.es.js";
19
19
  import k from "../../../icons/download.svg.es.js";
20
- import v from "../../../icons/ellipsis.svg.es.js";
21
- import y from "../../../icons/exclamation-circle.svg.es.js";
22
- import w from "../../../icons/feather.svg.es.js";
23
- import b from "../../../icons/first-page.svg.es.js";
24
- import x from "../../../icons/github.svg.es.js";
25
- import C from "../../../icons/hammer.svg.es.js";
26
- import L from "../../../icons/heart.svg.es.js";
27
- import R from "../../../icons/heart-outline.svg.es.js";
28
- import O from "../../../icons/html-logo.svg.es.js";
29
- import P from "../../../icons/images.svg.es.js";
30
- import D from "../../../icons/info-circle.svg.es.js";
31
- import E from "../../../icons/last-page.svg.es.js";
32
- import F from "../../../icons/light-mode-sunny.svg.es.js";
20
+ import v from "../../../icons/drag-handle.svg.es.js";
21
+ import y from "../../../icons/ellipsis.svg.es.js";
22
+ import w from "../../../icons/exclamation-circle.svg.es.js";
23
+ import b from "../../../icons/feather.svg.es.js";
24
+ import x from "../../../icons/first-page.svg.es.js";
25
+ import C from "../../../icons/github.svg.es.js";
26
+ import L from "../../../icons/hammer.svg.es.js";
27
+ import R from "../../../icons/heart.svg.es.js";
28
+ import O from "../../../icons/heart-outline.svg.es.js";
29
+ import P from "../../../icons/html-logo.svg.es.js";
30
+ import D from "../../../icons/images.svg.es.js";
31
+ import E from "../../../icons/info-circle.svg.es.js";
32
+ import F from "../../../icons/last-page.svg.es.js";
33
+ import H from "../../../icons/light-mode-sunny.svg.es.js";
33
34
  import M from "../../../icons/link-external.svg.es.js";
34
35
  import N from "../../../icons/loading.svg.es.js";
35
36
  import S from "../../../icons/lock.svg.es.js";
@@ -41,25 +42,25 @@ import z from "../../../icons/neon-logo.svg.es.js";
41
42
  import A from "../../../icons/neon-wordmark.svg.es.js";
42
43
  import B from "../../../icons/palette.svg.es.js";
43
44
  import G from "../../../icons/plus.svg.es.js";
44
- import H from "../../../icons/send.svg.es.js";
45
- import J from "../../../icons/search.svg.es.js";
46
- import K from "../../../icons/sun.svg.es.js";
47
- import Q from "../../../icons/switch.svg.es.js";
48
- import T from "../../../icons/times.svg.es.js";
49
- import V from "../../../icons/times-circle.svg.es.js";
50
- import X from "../../../icons/user.svg.es.js";
51
- import Y from "../../../icons/visibility-off.svg.es.js";
52
- import Z from "../../../icons/visibility-on.svg.es.js";
53
- class _o {
45
+ import J from "../../../icons/send.svg.es.js";
46
+ import K from "../../../icons/search.svg.es.js";
47
+ import Q from "../../../icons/sun.svg.es.js";
48
+ import T from "../../../icons/switch.svg.es.js";
49
+ import V from "../../../icons/times.svg.es.js";
50
+ import X from "../../../icons/times-circle.svg.es.js";
51
+ import Y from "../../../icons/user.svg.es.js";
52
+ import Z from "../../../icons/visibility-off.svg.es.js";
53
+ import _ from "../../../icons/visibility-on.svg.es.js";
54
+ class or {
54
55
  /**
55
56
  * Register all Neon default icons in the NeonIconRegistry. Call this in an app's <em>main.ts</em> to use Neon's
56
57
  * provided icons.
57
58
  */
58
59
  static register() {
59
- o.addIcon("align-center", r), o.addIcon("align-left", m), o.addIcon("align-right", i), o.addIcon("at", d), o.addIcon("calendar", t), o.addIcon("check", n), o.addIcon("check-circle", a), o.addIcon("chevron-down", c), o.addIcon("chevron-left", e), o.addIcon("chevron-right", f), o.addIcon("chevron-up", p), o.addIcon("color-filter", l), o.addIcon("contrast", I), o.addIcon("copy", s), o.addIcon("dash", h), o.addIcon("desktop", g), o.addIcon("dot", u), o.addIcon("download", k), o.addIcon("ellipsis", v), o.addIcon("exclamation-circle", y), o.addIcon("feather", w), o.addIcon("first-page", b), o.addIcon("github", x), o.addIcon("hammer", C), o.addIcon("heart", L), o.addIcon("heart-outline", R), o.addIcon("html-logo", O), o.addIcon("images", P), o.addIcon("info-circle", D), o.addIcon("last-page", E), o.addIcon("light-mode-sunny", F), o.addIcon("link-external", M), o.addIcon("loading", N), o.addIcon("lock", S), o.addIcon("mail", U), o.addIcon("menu", W), o.addIcon("minus", j), o.addIcon("moon", q), o.addIcon("neon-logo", z), o.addIcon("neon-wordmark", A), o.addIcon("palette", B), o.addIcon("plus", G), o.addIcon("send", H), o.addIcon("search", J), o.addIcon("sun", K), o.addIcon("switch", Q), o.addIcon("times", T), o.addIcon("times-circle", V), o.addIcon("user", X), o.addIcon("visibility-off", Y), o.addIcon("visibility-on", Z);
60
+ o.addIcon("align-center", r), o.addIcon("align-left", m), o.addIcon("align-right", d), o.addIcon("at", i), o.addIcon("calendar", n), o.addIcon("check", t), o.addIcon("check-circle", a), o.addIcon("chevron-down", c), o.addIcon("chevron-left", e), o.addIcon("chevron-right", f), o.addIcon("chevron-up", p), o.addIcon("color-filter", l), o.addIcon("contrast", I), o.addIcon("copy", s), o.addIcon("dash", h), o.addIcon("desktop", g), o.addIcon("dot", u), o.addIcon("download", k), o.addIcon("drag-handle", v), o.addIcon("ellipsis", y), o.addIcon("exclamation-circle", w), o.addIcon("feather", b), o.addIcon("first-page", x), o.addIcon("github", C), o.addIcon("hammer", L), o.addIcon("heart", R), o.addIcon("heart-outline", O), o.addIcon("html-logo", P), o.addIcon("images", D), o.addIcon("info-circle", E), o.addIcon("last-page", F), o.addIcon("light-mode-sunny", H), o.addIcon("link-external", M), o.addIcon("loading", N), o.addIcon("lock", S), o.addIcon("mail", U), o.addIcon("menu", W), o.addIcon("minus", j), o.addIcon("moon", q), o.addIcon("neon-logo", z), o.addIcon("neon-wordmark", A), o.addIcon("palette", B), o.addIcon("plus", G), o.addIcon("send", J), o.addIcon("search", K), o.addIcon("sun", Q), o.addIcon("switch", T), o.addIcon("times", V), o.addIcon("times-circle", X), o.addIcon("user", Y), o.addIcon("visibility-off", Z), o.addIcon("visibility-on", _);
60
61
  }
61
62
  }
62
63
  export {
63
- _o as RegisterIcons
64
+ or as RegisterIcons
64
65
  };
65
66
  //# sourceMappingURL=RegisterIcons.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"RegisterIcons.es.js","sources":["../../../../src/utils/common/icons/RegisterIcons.ts"],"sourcesContent":["import { NeonIconRegistry } from './NeonIconRegistry';\nimport alignCenter from '@/icons/align-center.svg';\nimport alignLeft from '@/icons/align-left.svg';\nimport alignRight from '@/icons/align-right.svg';\nimport at from '@/icons/at.svg';\nimport calendar from '@/icons/calendar.svg';\nimport check from '@/icons/check.svg';\nimport checkCircle from '@/icons/check-circle.svg';\nimport chevronDown from '@/icons/chevron-down.svg';\nimport chevronLeft from '@/icons/chevron-left.svg';\nimport chevronRight from '@/icons/chevron-right.svg';\nimport chevronUp from '@/icons/chevron-up.svg';\nimport colorFilter from '@/icons/color-filter.svg';\nimport contrast from '@/icons/contrast.svg';\nimport copy from '@/icons/copy.svg';\nimport dash from '@/icons/dash.svg';\nimport desktop from '@/icons/desktop.svg';\nimport dot from '@/icons/dot.svg';\nimport download from '@/icons/download.svg';\nimport ellipsis from '@/icons/ellipsis.svg';\nimport exclamationCircle from '@/icons/exclamation-circle.svg';\nimport feather from '@/icons/feather.svg';\nimport firstPage from '@/icons/first-page.svg';\nimport github from '@/icons/github.svg';\nimport hammer from '@/icons/hammer.svg';\nimport heart from '@/icons/heart.svg';\nimport heartOutline from '@/icons/heart-outline.svg';\nimport htmlLogo from '@/icons/html-logo.svg';\nimport images from '@/icons/images.svg';\nimport infoCircle from '@/icons/info-circle.svg';\nimport lastPage from '@/icons/last-page.svg';\nimport lightModeSunny from '@/icons/light-mode-sunny.svg';\nimport linkExternal from '@/icons/link-external.svg';\nimport loading from '@/icons/loading.svg';\nimport lock from '@/icons/lock.svg';\nimport mail from '@/icons/mail.svg';\nimport menu from '@/icons/menu.svg';\nimport minus from '@/icons/minus.svg';\nimport moon from '@/icons/moon.svg';\nimport neonLogo from '@/icons/neon-logo.svg';\nimport neonWordmark from '@/icons/neon-wordmark.svg';\nimport palette from '@/icons/palette.svg';\nimport plus from '@/icons/plus.svg';\nimport send from '@/icons/send.svg';\nimport search from '@/icons/search.svg';\nimport sun from '@/icons/sun.svg';\nimport switchIcon from '@/icons/switch.svg';\nimport times from '@/icons/times.svg';\nimport timesCircle from '@/icons/times-circle.svg';\nimport user from '@/icons/user.svg';\nimport visibilityOff from '@/icons/visibility-off.svg';\nimport visibilityOn from '@/icons/visibility-on.svg';\n\n/**\n * A helper for initialising the provided set of Neon icons with the\n * <a href=\"/utils/NeonIconRegistry\">NeonIconRegistry</a>.\n */\nexport class RegisterIcons {\n /**\n * Register all Neon default icons in the NeonIconRegistry. Call this in an app's <em>main.ts</em> to use Neon's\n * provided icons.\n */\n public static register() {\n NeonIconRegistry.addIcon('align-center', alignCenter);\n NeonIconRegistry.addIcon('align-left', alignLeft);\n NeonIconRegistry.addIcon('align-right', alignRight);\n NeonIconRegistry.addIcon('at', at);\n NeonIconRegistry.addIcon('calendar', calendar);\n NeonIconRegistry.addIcon('check', check);\n NeonIconRegistry.addIcon('check-circle', checkCircle);\n NeonIconRegistry.addIcon('chevron-down', chevronDown);\n NeonIconRegistry.addIcon('chevron-left', chevronLeft);\n NeonIconRegistry.addIcon('chevron-right', chevronRight);\n NeonIconRegistry.addIcon('chevron-up', chevronUp);\n NeonIconRegistry.addIcon('color-filter', colorFilter);\n NeonIconRegistry.addIcon('contrast', contrast);\n NeonIconRegistry.addIcon('copy', copy);\n NeonIconRegistry.addIcon('dash', dash);\n NeonIconRegistry.addIcon('desktop', desktop);\n NeonIconRegistry.addIcon('dot', dot);\n NeonIconRegistry.addIcon('download', download);\n NeonIconRegistry.addIcon('ellipsis', ellipsis);\n NeonIconRegistry.addIcon('exclamation-circle', exclamationCircle);\n NeonIconRegistry.addIcon('feather', feather);\n NeonIconRegistry.addIcon('first-page', firstPage);\n NeonIconRegistry.addIcon('github', github);\n NeonIconRegistry.addIcon('hammer', hammer);\n NeonIconRegistry.addIcon('heart', heart);\n NeonIconRegistry.addIcon('heart-outline', heartOutline);\n NeonIconRegistry.addIcon('html-logo', htmlLogo);\n NeonIconRegistry.addIcon('images', images);\n NeonIconRegistry.addIcon('info-circle', infoCircle);\n NeonIconRegistry.addIcon('last-page', lastPage);\n NeonIconRegistry.addIcon('light-mode-sunny', lightModeSunny);\n NeonIconRegistry.addIcon('link-external', linkExternal);\n NeonIconRegistry.addIcon('loading', loading);\n NeonIconRegistry.addIcon('lock', lock);\n NeonIconRegistry.addIcon('mail', mail);\n NeonIconRegistry.addIcon('menu', menu);\n NeonIconRegistry.addIcon('minus', minus);\n NeonIconRegistry.addIcon('moon', moon);\n NeonIconRegistry.addIcon('neon-logo', neonLogo);\n NeonIconRegistry.addIcon('neon-wordmark', neonWordmark);\n NeonIconRegistry.addIcon('palette', palette);\n NeonIconRegistry.addIcon('plus', plus);\n NeonIconRegistry.addIcon('send', send);\n NeonIconRegistry.addIcon('search', search);\n NeonIconRegistry.addIcon('sun', sun);\n NeonIconRegistry.addIcon('switch', switchIcon);\n NeonIconRegistry.addIcon('times', times);\n NeonIconRegistry.addIcon('times-circle', timesCircle);\n NeonIconRegistry.addIcon('user', user);\n NeonIconRegistry.addIcon('visibility-off', visibilityOff);\n NeonIconRegistry.addIcon('visibility-on', visibilityOn);\n }\n}\n"],"names":["RegisterIcons","NeonIconRegistry","alignCenter","alignLeft","alignRight","at","calendar","check","checkCircle","chevronDown","chevronLeft","chevronRight","chevronUp","colorFilter","contrast","copy","dash","desktop","dot","download","ellipsis","exclamationCircle","feather","firstPage","github","hammer","heart","heartOutline","htmlLogo","images","infoCircle","lastPage","lightModeSunny","linkExternal","loading","lock","mail","menu","minus","moon","neonLogo","neonWordmark","palette","plus","send","search","sun","switchIcon","times","timesCircle","user","visibilityOff","visibilityOn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDO,MAAMA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzB,OAAc,WAAW;AACvB,IAAAC,EAAiB,QAAQ,gBAAgBC,CAAW,GACpDD,EAAiB,QAAQ,cAAcE,CAAS,GAChDF,EAAiB,QAAQ,eAAeG,CAAU,GAClDH,EAAiB,QAAQ,MAAMI,CAAE,GACjCJ,EAAiB,QAAQ,YAAYK,CAAQ,GAC7CL,EAAiB,QAAQ,SAASM,CAAK,GACvCN,EAAiB,QAAQ,gBAAgBO,CAAW,GACpDP,EAAiB,QAAQ,gBAAgBQ,CAAW,GACpDR,EAAiB,QAAQ,gBAAgBS,CAAW,GACpDT,EAAiB,QAAQ,iBAAiBU,CAAY,GACtDV,EAAiB,QAAQ,cAAcW,CAAS,GAChDX,EAAiB,QAAQ,gBAAgBY,CAAW,GACpDZ,EAAiB,QAAQ,YAAYa,CAAQ,GAC7Cb,EAAiB,QAAQ,QAAQc,CAAI,GACrCd,EAAiB,QAAQ,QAAQe,CAAI,GACrCf,EAAiB,QAAQ,WAAWgB,CAAO,GAC3ChB,EAAiB,QAAQ,OAAOiB,CAAG,GACnCjB,EAAiB,QAAQ,YAAYkB,CAAQ,GAC7ClB,EAAiB,QAAQ,YAAYmB,CAAQ,GAC7CnB,EAAiB,QAAQ,sBAAsBoB,CAAiB,GAChEpB,EAAiB,QAAQ,WAAWqB,CAAO,GAC3CrB,EAAiB,QAAQ,cAAcsB,CAAS,GAChDtB,EAAiB,QAAQ,UAAUuB,CAAM,GACzCvB,EAAiB,QAAQ,UAAUwB,CAAM,GACzCxB,EAAiB,QAAQ,SAASyB,CAAK,GACvCzB,EAAiB,QAAQ,iBAAiB0B,CAAY,GACtD1B,EAAiB,QAAQ,aAAa2B,CAAQ,GAC9C3B,EAAiB,QAAQ,UAAU4B,CAAM,GACzC5B,EAAiB,QAAQ,eAAe6B,CAAU,GAClD7B,EAAiB,QAAQ,aAAa8B,CAAQ,GAC9C9B,EAAiB,QAAQ,oBAAoB+B,CAAc,GAC3D/B,EAAiB,QAAQ,iBAAiBgC,CAAY,GACtDhC,EAAiB,QAAQ,WAAWiC,CAAO,GAC3CjC,EAAiB,QAAQ,QAAQkC,CAAI,GACrClC,EAAiB,QAAQ,QAAQmC,CAAI,GACrCnC,EAAiB,QAAQ,QAAQoC,CAAI,GACrCpC,EAAiB,QAAQ,SAASqC,CAAK,GACvCrC,EAAiB,QAAQ,QAAQsC,CAAI,GACrCtC,EAAiB,QAAQ,aAAauC,CAAQ,GAC9CvC,EAAiB,QAAQ,iBAAiBwC,CAAY,GACtDxC,EAAiB,QAAQ,WAAWyC,CAAO,GAC3CzC,EAAiB,QAAQ,QAAQ0C,CAAI,GACrC1C,EAAiB,QAAQ,QAAQ2C,CAAI,GACrC3C,EAAiB,QAAQ,UAAU4C,CAAM,GACzC5C,EAAiB,QAAQ,OAAO6C,CAAG,GACnC7C,EAAiB,QAAQ,UAAU8C,CAAU,GAC7C9C,EAAiB,QAAQ,SAAS+C,CAAK,GACvC/C,EAAiB,QAAQ,gBAAgBgD,CAAW,GACpDhD,EAAiB,QAAQ,QAAQiD,CAAI,GACrCjD,EAAiB,QAAQ,kBAAkBkD,CAAa,GACxDlD,EAAiB,QAAQ,iBAAiBmD,CAAY;AAAA,EACxD;AACF;"}
1
+ {"version":3,"file":"RegisterIcons.es.js","sources":["../../../../src/utils/common/icons/RegisterIcons.ts"],"sourcesContent":["import { NeonIconRegistry } from './NeonIconRegistry';\nimport alignCenter from '@/icons/align-center.svg';\nimport alignLeft from '@/icons/align-left.svg';\nimport alignRight from '@/icons/align-right.svg';\nimport at from '@/icons/at.svg';\nimport calendar from '@/icons/calendar.svg';\nimport check from '@/icons/check.svg';\nimport checkCircle from '@/icons/check-circle.svg';\nimport chevronDown from '@/icons/chevron-down.svg';\nimport chevronLeft from '@/icons/chevron-left.svg';\nimport chevronRight from '@/icons/chevron-right.svg';\nimport chevronUp from '@/icons/chevron-up.svg';\nimport colorFilter from '@/icons/color-filter.svg';\nimport contrast from '@/icons/contrast.svg';\nimport copy from '@/icons/copy.svg';\nimport dash from '@/icons/dash.svg';\nimport desktop from '@/icons/desktop.svg';\nimport dot from '@/icons/dot.svg';\nimport download from '@/icons/download.svg';\nimport dragHandle from '@/icons/drag-handle.svg';\nimport ellipsis from '@/icons/ellipsis.svg';\nimport exclamationCircle from '@/icons/exclamation-circle.svg';\nimport feather from '@/icons/feather.svg';\nimport firstPage from '@/icons/first-page.svg';\nimport github from '@/icons/github.svg';\nimport hammer from '@/icons/hammer.svg';\nimport heart from '@/icons/heart.svg';\nimport heartOutline from '@/icons/heart-outline.svg';\nimport htmlLogo from '@/icons/html-logo.svg';\nimport images from '@/icons/images.svg';\nimport infoCircle from '@/icons/info-circle.svg';\nimport lastPage from '@/icons/last-page.svg';\nimport lightModeSunny from '@/icons/light-mode-sunny.svg';\nimport linkExternal from '@/icons/link-external.svg';\nimport loading from '@/icons/loading.svg';\nimport lock from '@/icons/lock.svg';\nimport mail from '@/icons/mail.svg';\nimport menu from '@/icons/menu.svg';\nimport minus from '@/icons/minus.svg';\nimport moon from '@/icons/moon.svg';\nimport neonLogo from '@/icons/neon-logo.svg';\nimport neonWordmark from '@/icons/neon-wordmark.svg';\nimport palette from '@/icons/palette.svg';\nimport plus from '@/icons/plus.svg';\nimport send from '@/icons/send.svg';\nimport search from '@/icons/search.svg';\nimport sun from '@/icons/sun.svg';\nimport switchIcon from '@/icons/switch.svg';\nimport times from '@/icons/times.svg';\nimport timesCircle from '@/icons/times-circle.svg';\nimport user from '@/icons/user.svg';\nimport visibilityOff from '@/icons/visibility-off.svg';\nimport visibilityOn from '@/icons/visibility-on.svg';\n\n/**\n * A helper for initialising the provided set of Neon icons with the\n * <a href=\"/utils/NeonIconRegistry\">NeonIconRegistry</a>.\n */\nexport class RegisterIcons {\n /**\n * Register all Neon default icons in the NeonIconRegistry. Call this in an app's <em>main.ts</em> to use Neon's\n * provided icons.\n */\n public static register() {\n NeonIconRegistry.addIcon('align-center', alignCenter);\n NeonIconRegistry.addIcon('align-left', alignLeft);\n NeonIconRegistry.addIcon('align-right', alignRight);\n NeonIconRegistry.addIcon('at', at);\n NeonIconRegistry.addIcon('calendar', calendar);\n NeonIconRegistry.addIcon('check', check);\n NeonIconRegistry.addIcon('check-circle', checkCircle);\n NeonIconRegistry.addIcon('chevron-down', chevronDown);\n NeonIconRegistry.addIcon('chevron-left', chevronLeft);\n NeonIconRegistry.addIcon('chevron-right', chevronRight);\n NeonIconRegistry.addIcon('chevron-up', chevronUp);\n NeonIconRegistry.addIcon('color-filter', colorFilter);\n NeonIconRegistry.addIcon('contrast', contrast);\n NeonIconRegistry.addIcon('copy', copy);\n NeonIconRegistry.addIcon('dash', dash);\n NeonIconRegistry.addIcon('desktop', desktop);\n NeonIconRegistry.addIcon('dot', dot);\n NeonIconRegistry.addIcon('download', download);\n NeonIconRegistry.addIcon('drag-handle', dragHandle);\n NeonIconRegistry.addIcon('ellipsis', ellipsis);\n NeonIconRegistry.addIcon('exclamation-circle', exclamationCircle);\n NeonIconRegistry.addIcon('feather', feather);\n NeonIconRegistry.addIcon('first-page', firstPage);\n NeonIconRegistry.addIcon('github', github);\n NeonIconRegistry.addIcon('hammer', hammer);\n NeonIconRegistry.addIcon('heart', heart);\n NeonIconRegistry.addIcon('heart-outline', heartOutline);\n NeonIconRegistry.addIcon('html-logo', htmlLogo);\n NeonIconRegistry.addIcon('images', images);\n NeonIconRegistry.addIcon('info-circle', infoCircle);\n NeonIconRegistry.addIcon('last-page', lastPage);\n NeonIconRegistry.addIcon('light-mode-sunny', lightModeSunny);\n NeonIconRegistry.addIcon('link-external', linkExternal);\n NeonIconRegistry.addIcon('loading', loading);\n NeonIconRegistry.addIcon('lock', lock);\n NeonIconRegistry.addIcon('mail', mail);\n NeonIconRegistry.addIcon('menu', menu);\n NeonIconRegistry.addIcon('minus', minus);\n NeonIconRegistry.addIcon('moon', moon);\n NeonIconRegistry.addIcon('neon-logo', neonLogo);\n NeonIconRegistry.addIcon('neon-wordmark', neonWordmark);\n NeonIconRegistry.addIcon('palette', palette);\n NeonIconRegistry.addIcon('plus', plus);\n NeonIconRegistry.addIcon('send', send);\n NeonIconRegistry.addIcon('search', search);\n NeonIconRegistry.addIcon('sun', sun);\n NeonIconRegistry.addIcon('switch', switchIcon);\n NeonIconRegistry.addIcon('times', times);\n NeonIconRegistry.addIcon('times-circle', timesCircle);\n NeonIconRegistry.addIcon('user', user);\n NeonIconRegistry.addIcon('visibility-off', visibilityOff);\n NeonIconRegistry.addIcon('visibility-on', visibilityOn);\n }\n}\n"],"names":["RegisterIcons","NeonIconRegistry","alignCenter","alignLeft","alignRight","at","calendar","check","checkCircle","chevronDown","chevronLeft","chevronRight","chevronUp","colorFilter","contrast","copy","dash","desktop","dot","download","dragHandle","ellipsis","exclamationCircle","feather","firstPage","github","hammer","heart","heartOutline","htmlLogo","images","infoCircle","lastPage","lightModeSunny","linkExternal","loading","lock","mail","menu","minus","moon","neonLogo","neonWordmark","palette","plus","send","search","sun","switchIcon","times","timesCircle","user","visibilityOff","visibilityOn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DO,MAAMA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzB,OAAc,WAAW;AACvB,IAAAC,EAAiB,QAAQ,gBAAgBC,CAAW,GACpDD,EAAiB,QAAQ,cAAcE,CAAS,GAChDF,EAAiB,QAAQ,eAAeG,CAAU,GAClDH,EAAiB,QAAQ,MAAMI,CAAE,GACjCJ,EAAiB,QAAQ,YAAYK,CAAQ,GAC7CL,EAAiB,QAAQ,SAASM,CAAK,GACvCN,EAAiB,QAAQ,gBAAgBO,CAAW,GACpDP,EAAiB,QAAQ,gBAAgBQ,CAAW,GACpDR,EAAiB,QAAQ,gBAAgBS,CAAW,GACpDT,EAAiB,QAAQ,iBAAiBU,CAAY,GACtDV,EAAiB,QAAQ,cAAcW,CAAS,GAChDX,EAAiB,QAAQ,gBAAgBY,CAAW,GACpDZ,EAAiB,QAAQ,YAAYa,CAAQ,GAC7Cb,EAAiB,QAAQ,QAAQc,CAAI,GACrCd,EAAiB,QAAQ,QAAQe,CAAI,GACrCf,EAAiB,QAAQ,WAAWgB,CAAO,GAC3ChB,EAAiB,QAAQ,OAAOiB,CAAG,GACnCjB,EAAiB,QAAQ,YAAYkB,CAAQ,GAC7ClB,EAAiB,QAAQ,eAAemB,CAAU,GAClDnB,EAAiB,QAAQ,YAAYoB,CAAQ,GAC7CpB,EAAiB,QAAQ,sBAAsBqB,CAAiB,GAChErB,EAAiB,QAAQ,WAAWsB,CAAO,GAC3CtB,EAAiB,QAAQ,cAAcuB,CAAS,GAChDvB,EAAiB,QAAQ,UAAUwB,CAAM,GACzCxB,EAAiB,QAAQ,UAAUyB,CAAM,GACzCzB,EAAiB,QAAQ,SAAS0B,CAAK,GACvC1B,EAAiB,QAAQ,iBAAiB2B,CAAY,GACtD3B,EAAiB,QAAQ,aAAa4B,CAAQ,GAC9C5B,EAAiB,QAAQ,UAAU6B,CAAM,GACzC7B,EAAiB,QAAQ,eAAe8B,CAAU,GAClD9B,EAAiB,QAAQ,aAAa+B,CAAQ,GAC9C/B,EAAiB,QAAQ,oBAAoBgC,CAAc,GAC3DhC,EAAiB,QAAQ,iBAAiBiC,CAAY,GACtDjC,EAAiB,QAAQ,WAAWkC,CAAO,GAC3ClC,EAAiB,QAAQ,QAAQmC,CAAI,GACrCnC,EAAiB,QAAQ,QAAQoC,CAAI,GACrCpC,EAAiB,QAAQ,QAAQqC,CAAI,GACrCrC,EAAiB,QAAQ,SAASsC,CAAK,GACvCtC,EAAiB,QAAQ,QAAQuC,CAAI,GACrCvC,EAAiB,QAAQ,aAAawC,CAAQ,GAC9CxC,EAAiB,QAAQ,iBAAiByC,CAAY,GACtDzC,EAAiB,QAAQ,WAAW0C,CAAO,GAC3C1C,EAAiB,QAAQ,QAAQ2C,CAAI,GACrC3C,EAAiB,QAAQ,QAAQ4C,CAAI,GACrC5C,EAAiB,QAAQ,UAAU6C,CAAM,GACzC7C,EAAiB,QAAQ,OAAO8C,CAAG,GACnC9C,EAAiB,QAAQ,UAAU+C,CAAU,GAC7C/C,EAAiB,QAAQ,SAASgD,CAAK,GACvChD,EAAiB,QAAQ,gBAAgBiD,CAAW,GACpDjD,EAAiB,QAAQ,QAAQkD,CAAI,GACrClD,EAAiB,QAAQ,kBAAkBmD,CAAa,GACxDnD,EAAiB,QAAQ,iBAAiBoD,CAAY;AAAA,EACxD;AACF;"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aotearoan/neon",
3
3
  "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
4
- "version": "28.6.0",
4
+ "version": "28.7.1",
5
5
  "main": "./dist/neon.cjs.js",
6
6
  "module": "./dist/neon.es.js",
7
7
  "types": "./dist/src/neon.d.ts",
@@ -5,7 +5,7 @@
5
5
 
6
6
  @mixin gradient-button($from-color, $to-color) {
7
7
  --neon-gradient-button-c1: var(--neon-color-#{$from-color});
8
- --neon-gradient-button-c2: var(--neon-background-color-#{$to-color});
8
+ --neon-gradient-button-c2: var(--neon-color-#{$to-color});
9
9
 
10
10
  background: linear-gradient(
11
11
  var(--neon-background-gradient-angle),
@@ -83,12 +83,8 @@
83
83
  min-width: 100%;
84
84
  @each $color in palettes.$neon-functional-colors {
85
85
  &--#{$color} {
86
- .neon-card-list__card:not(.neon-card-list__card--disabled) {
87
- &:hover,
88
- &:hover,
89
- &:hover {
90
- background-color: rgba(var(--neon-rgb-#{$color}), 0.03125);
91
- }
86
+ &:hover {
87
+ background-color: rgba(var(--neon-rgb-#{$color}), 0.03125);
92
88
  }
93
89
  }
94
90
  }
@@ -0,0 +1,75 @@
1
+ @use '../includes/palettes';
2
+ @use '../includes/svg';
3
+
4
+ @mixin draggable-card {
5
+ .neon-draggable-card {
6
+ flex-direction: row;
7
+ position: relative;
8
+ border-bottom: var(--neon-border);
9
+
10
+ & > .neon-card-list__card:not(:focus-visible) {
11
+ border-bottom: none;
12
+ }
13
+
14
+ &[draggable='true'] {
15
+ cursor: grab;
16
+ transition: var(--neon-animation-speed-fast) all ease;
17
+
18
+ @each $color in palettes.$neon-functional-colors {
19
+ &.neon-draggable-card--#{$color} {
20
+ &:hover {
21
+ background-color: rgba(var(--neon-rgb-#{$color}), 0.03125);
22
+ }
23
+ }
24
+ }
25
+
26
+ &:hover {
27
+ .neon-draggable-card__handle-icon {
28
+ @include svg.color-with-svg(var(--neon-color-high-contrast));
29
+ }
30
+ }
31
+
32
+ &.neon-draggable-card--drag-in-progress {
33
+ /* add transparent overlay when dragging over all items. This prevents onDragLeave firing on child elements */
34
+ &:after {
35
+ content: '';
36
+ position: absolute;
37
+ top: 0;
38
+ left: 0;
39
+ width: 100%;
40
+ height: 100%;
41
+ background-color: transparent;
42
+ }
43
+
44
+ &.neon-draggable-card--active {
45
+ &:after {
46
+ background-color: var(--neon-background-color-draggable-card-hover);
47
+ }
48
+ }
49
+ }
50
+ }
51
+
52
+ &__handle-icon {
53
+ align-self: center;
54
+ margin-left: var(--neon-space-6);
55
+ margin-right: var(--neon-space-4);
56
+ width: 16rem;
57
+ height: 16rem;
58
+ }
59
+
60
+ .neon-drag-handle-transition {
61
+ &-enter-active,
62
+ &-leave-active {
63
+ transition: all ease-in-out var(--neon-animation-speed-fast) var(--neon-animation-speed-fast) allow-discrete;
64
+ }
65
+
66
+ &-enter-from,
67
+ &-leave-to {
68
+ opacity: 0;
69
+ width: 0;
70
+ margin-left: 0;
71
+ margin-right: 0;
72
+ }
73
+ }
74
+ }
75
+ }
@@ -22,11 +22,11 @@
22
22
  @each $color in palettes.$neon-functional-colors {
23
23
  &--#{$color} {
24
24
  @include svg.color-with-svg(var(--neon-color-#{$color}));
25
- background: rgba(var(--neon-rgb-#{$color}), 0.15);
25
+ background: var(--neon-background-color-#{$color});
26
26
 
27
27
  @each $alternateColor in palettes.$neon-functional-colors {
28
28
  &.neon-label--alternate-color-#{$alternateColor} {
29
- background: linear-gradient(90deg, rgba(var(--neon-rgb-#{$color}), 0.15), rgba(var(--neon-rgb-#{$alternateColor}), 0.15));
29
+ background: linear-gradient(90deg, var(--neon-background-color-#{$color}), var(--neon-background-color-#{$alternateColor}));
30
30
 
31
31
  .neon-label__label {
32
32
  @include gradient.neon-gradient-text($color, $alternateColor);
@@ -153,7 +153,7 @@ $neon-width-slider-tooltip: 201rem;
153
153
  outline: none;
154
154
 
155
155
  &:focus {
156
- $neon-box-shadow-slider-thumb-focus: 0 0 0 4rem rgba(var(--neon-background-rgb-low-contrast), 0.3);
156
+ $neon-box-shadow-slider-thumb-focus: 0 0 0 4rem rgba(var(--neon-rgb-low-contrast), 0.3);
157
157
 
158
158
  &::-webkit-slider-thumb {
159
159
  box-shadow: $neon-box-shadow-slider-thumb-focus;
@@ -69,3 +69,4 @@
69
69
  @forward './list-layout';
70
70
  @forward './loading-state-card';
71
71
  @forward './basic-layout';
72
+ @forward './draggable-card';
@@ -127,7 +127,7 @@
127
127
  NeonField: [],
128
128
  NeonStack: [],
129
129
  NeonInline: [],
130
- NeonCardList: [NeonSelectableCard, NeonSwitch, NeonIcon, NeonButton, NeonExpansionIndicator, NeonIcon, NeonLink, NeonCard, NeonCardHeader, NeonCardBody, NeonInline, NeonStack, NeonPagination, NeonLoadingStateCard, NeonSkeletonLoader],
130
+ NeonCardList: [NeonSelectableCard, NeonSwitch, NeonIcon, NeonButton, NeonExpansionIndicator, NeonIcon, NeonLink, NeonCard, NeonCardHeader, NeonCardBody, NeonInline, NeonStack, NeonPagination, NeonLoadingStateCard, NeonSkeletonLoader, NeonDraggableCard],
131
131
  NeonImageCarousel: [NeonButton, NeonLink],
132
132
  NeonSwiper: [],
133
133
  NeonMobileMenu: [NeonIcon, NeonLink],
@@ -144,6 +144,7 @@
144
144
  NeonListLayout: [NeonBreadcrumbs, NeonButton, NeonCard, NeonCardBody, NeonCardHeader, NeonCardList, NeonEmptyState, NeonExpansionIndicator, NeonHeader, NeonIcon, NeonInline, NeonLink, NeonNote, NeonPagination, NeonSelectableCard, NeonSwiper, NeonSwitch],
145
145
  NeonLoadingStateCard: [NeonInline, NeonStack, NeonSkeletonLoader],
146
146
  NeonBasicLayout: [NeonHeader, NeonBreadcrumbs, NeonButton, NeonExpansionIndicator, NeonIcon, NeonInline, NeonLink, NeonNote, NeonSwiper, NeonStack],
147
+ NeonDraggableCard: [NeonInline, NeonIcon],
147
148
  );
148
149
 
149
150
  $neon-flattened-components: [];
@@ -324,4 +324,8 @@ $neon-components: null !default;
324
324
  @if index($neon-flattened-components, NeonBasicLayout) {
325
325
  @include components.basic-layout;
326
326
  }
327
+
328
+ @if index($neon-flattened-components, NeonDraggableCard) {
329
+ @include components.draggable-card;
330
+ }
327
331
  }
@@ -136,50 +136,46 @@
136
136
  --neon-color-error: var(--neon-color-error-l1);
137
137
 
138
138
 
139
- /**
140
- * background low contrast color RGB values
141
- */
142
- --neon-background-rgb-low-contrast: var(--neon-rgb-low-contrast-d1);
143
139
  /**
144
140
  * background low contrast color variable
145
141
  */
146
- --neon-background-color-low-contrast: var(--neon-color-low-contrast-d1);
142
+ --neon-background-color-low-contrast: var(--neon-color-low-contrast-d5);
147
143
  /**
148
144
  * background neutral color variable
149
145
  */
150
- --neon-background-color-neutral: var(--neon-color-neutral-d1);
146
+ --neon-background-color-neutral: var(--neon-color-neutral-d5);
151
147
  /**
152
148
  * background high contrast color variable
153
149
  */
154
- --neon-background-color-high-contrast: var(--neon-color-high-contrast-d1);
150
+ --neon-background-color-high-contrast: var(--neon-color-high-contrast-d5);
155
151
  /**
156
152
  * background brand color variable
157
153
  */
158
- --neon-background-color-brand: var(--neon-color-brand-d1);
154
+ --neon-background-color-brand: var(--neon-color-brand-d5);
159
155
  /**
160
156
  * background accent color variable
161
157
  */
162
- --neon-background-color-accent: var(--neon-color-accent-d1);
158
+ --neon-background-color-accent: var(--neon-color-accent-d5);
163
159
  /**
164
160
  * background primary color variable
165
161
  */
166
- --neon-background-color-primary: var(--neon-color-primary-d1);
162
+ --neon-background-color-primary: var(--neon-color-primary-d5);
167
163
  /**
168
164
  * background info color variable
169
165
  */
170
- --neon-background-color-info: var(--neon-color-info-d1);
166
+ --neon-background-color-info: var(--neon-color-info-d5);
171
167
  /**
172
168
  * background success color variable
173
169
  */
174
- --neon-background-color-success: var(--neon-color-success-d1);
170
+ --neon-background-color-success: var(--neon-color-success-d5);
175
171
  /**
176
172
  * background warning color variable
177
173
  */
178
- --neon-background-color-warn: var(--neon-color-warn-d1);
174
+ --neon-background-color-warn: var(--neon-color-warn-d5);
179
175
  /**
180
176
  * background error color variable
181
177
  */
182
- --neon-background-color-error: var(--neon-color-error-d1);
178
+ --neon-background-color-error: var(--neon-color-error-d5);
183
179
 
184
180
 
185
181
  /**
@@ -1344,4 +1340,12 @@
1344
1340
  * Color of the header component subtitle
1345
1341
  */
1346
1342
  --neon-color-header-subtitle: var(--neon-color-text-secondary);
1343
+
1344
+
1345
+ /* draggable-card */
1346
+ /**
1347
+ * @component NeonCardList,NeonDraggableCard
1348
+ * Background color of the hover state of the draggable card
1349
+ */
1350
+ --neon-background-color-draggable-card-hover: var(--neon-color-brand-d5);
1347
1351
  }
@@ -136,50 +136,46 @@
136
136
  --neon-color-error: var(--neon-color-error-d1);
137
137
 
138
138
 
139
- /**
140
- * background low contrast color RGB values
141
- */
142
- --neon-background-rgb-low-contrast: var(--neon-rgb-low-contrast-l1);
143
139
  /**
144
140
  * background low contrast color variable
145
141
  */
146
- --neon-background-color-low-contrast: var(--neon-color-low-contrast-l1);
142
+ --neon-background-color-low-contrast: var(--neon-color-low-contrast-l5);
147
143
  /**
148
144
  * background neutral color variable
149
145
  */
150
- --neon-background-color-neutral: var(--neon-color-neutral-l1);
146
+ --neon-background-color-neutral: var(--neon-color-neutral-l5);
151
147
  /**
152
148
  * background high contrast color variable
153
149
  */
154
- --neon-background-color-high-contrast: var(--neon-color-high-contrast-l1);
150
+ --neon-background-color-high-contrast: var(--neon-color-high-contrast-l5);
155
151
  /**
156
152
  * background brand color variable
157
153
  */
158
- --neon-background-color-brand: var(--neon-color-brand-l1);
154
+ --neon-background-color-brand: var(--neon-color-brand-l5);
159
155
  /**
160
156
  * background accent color variable
161
157
  */
162
- --neon-background-color-accent: var(--neon-color-accent-l1);
158
+ --neon-background-color-accent: var(--neon-color-accent-l5);
163
159
  /**
164
160
  * background primary color variable
165
161
  */
166
- --neon-background-color-primary: var(--neon-color-primary-l1);
162
+ --neon-background-color-primary: var(--neon-color-primary-l5);
167
163
  /**
168
164
  * background info color variable
169
165
  */
170
- --neon-background-color-info: var(--neon-color-info-l1);
166
+ --neon-background-color-info: var(--neon-color-info-l5);
171
167
  /**
172
168
  * background success color variable
173
169
  */
174
- --neon-background-color-success: var(--neon-color-success-l1);
170
+ --neon-background-color-success: var(--neon-color-success-l5);
175
171
  /**
176
172
  * background warning color variable
177
173
  */
178
- --neon-background-color-warn: var(--neon-color-warn-l1);
174
+ --neon-background-color-warn: var(--neon-color-warn-l5);
179
175
  /**
180
176
  * background error color variable
181
177
  */
182
- --neon-background-color-error: var(--neon-color-error-l1);
178
+ --neon-background-color-error: var(--neon-color-error-l5);
183
179
 
184
180
 
185
181
  /**
@@ -1344,4 +1340,12 @@
1344
1340
  * Color of the header component subtitle
1345
1341
  */
1346
1342
  --neon-color-header-subtitle: var(--neon-color-text-secondary);
1343
+
1344
+
1345
+ /* draggable-card */
1346
+ /**
1347
+ * @component NeonCardList,NeonDraggableCard
1348
+ * Background color of the hover state of the draggable card
1349
+ */
1350
+ --neon-background-color-draggable-card-hover: var(--neon-color-brand-l5);
1347
1351
  }