@aotearoan/neon 28.6.0 → 28.7.0

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 (44) 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/_card-list.scss +2 -6
  39. package/src/sass/components/_draggable-card.scss +75 -0
  40. package/src/sass/components/components.scss +1 -0
  41. package/src/sass/includes/_dependencies.scss +2 -1
  42. package/src/sass/theme.scss +4 -0
  43. package/src/sass/variables-dark.scss +8 -0
  44. package/src/sass/variables-light.scss +8 -0
@@ -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.0",
5
5
  "main": "./dist/neon.cjs.js",
6
6
  "module": "./dist/neon.es.js",
7
7
  "types": "./dist/src/neon.d.ts",
@@ -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
+ }
@@ -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
  }
@@ -1344,4 +1344,12 @@
1344
1344
  * Color of the header component subtitle
1345
1345
  */
1346
1346
  --neon-color-header-subtitle: var(--neon-color-text-secondary);
1347
+
1348
+
1349
+ /* draggable-card */
1350
+ /**
1351
+ * @component NeonCardList,NeonDraggableCard
1352
+ * Background color of the hover state of the draggable card
1353
+ */
1354
+ --neon-background-color-draggable-card-hover: var(--neon-color-brand-d5);
1347
1355
  }
@@ -1344,4 +1344,12 @@
1344
1344
  * Color of the header component subtitle
1345
1345
  */
1346
1346
  --neon-color-header-subtitle: var(--neon-color-text-secondary);
1347
+
1348
+
1349
+ /* draggable-card */
1350
+ /**
1351
+ * @component NeonCardList,NeonDraggableCard
1352
+ * Background color of the hover state of the draggable card
1353
+ */
1354
+ --neon-background-color-draggable-card-hover: var(--neon-color-brand-l5);
1347
1355
  }