ariadne_view_components 0.0.69 → 0.0.71

Sign up to get free protection for your applications and to get access to all the features.
Files changed (96) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/README.md +20 -1
  4. data/app/assets/javascripts/ariadne_view_components.js +14 -14
  5. data/app/assets/javascripts/ariadne_view_components.js.br +0 -0
  6. data/app/assets/javascripts/ariadne_view_components.js.gz +0 -0
  7. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  8. data/app/assets/stylesheets/ariadne_view_components.css +1 -1
  9. data/app/assets/stylesheets/ariadne_view_components.css.br +0 -0
  10. data/app/assets/stylesheets/ariadne_view_components.css.gz +0 -0
  11. data/app/components/ariadne/base_component.rb +11 -1
  12. data/app/components/ariadne/behaviors/captionable.rb +55 -0
  13. data/app/components/ariadne/behaviors/tooltipable.rb +15 -15
  14. data/app/components/ariadne/form/base_component.rb +1 -1
  15. data/app/components/ariadne/form/checkbox/component.html.erb +6 -0
  16. data/app/components/ariadne/form/checkbox/component.rb +34 -0
  17. data/app/components/ariadne/form/group/component.html.erb +2 -2
  18. data/app/components/ariadne/form/group/component.rb +29 -2
  19. data/app/components/ariadne/form/hidden_field/component.html.erb +6 -1
  20. data/app/components/ariadne/form/hidden_field/component.rb +10 -3
  21. data/app/components/ariadne/form/radio/component.html.erb +6 -0
  22. data/app/components/ariadne/form/radio/component.rb +26 -0
  23. data/app/components/ariadne/form/radio_button/component.html.erb +6 -0
  24. data/app/components/ariadne/form/radio_button/component.rb +60 -0
  25. data/app/components/ariadne/form/radio_button_group/component.html.erb +24 -0
  26. data/app/components/ariadne/form/radio_button_group/component.rb +59 -0
  27. data/app/components/ariadne/form/text_field/component.html.erb +1 -0
  28. data/app/components/ariadne/layout/grid/component.html.erb +7 -0
  29. data/app/components/ariadne/layout/grid/component.rb +36 -0
  30. data/app/components/ariadne/layout/nav_bar/component.html.erb +12 -101
  31. data/app/components/ariadne/layout/nav_bar/component.rb +38 -9
  32. data/app/components/ariadne/layout/two_panel/component.html.erb +14 -0
  33. data/app/components/ariadne/layout/two_panel/component.rb +38 -0
  34. data/app/components/ariadne/layout/wide/component.html.erb +9 -0
  35. data/app/components/ariadne/layout/wide/component.rb +24 -0
  36. data/app/components/ariadne/turbo/frame/component.html.erb +3 -0
  37. data/app/components/ariadne/turbo/frame/component.rb +16 -0
  38. data/app/components/ariadne/turbo/stream_action/component.html.erb +4 -0
  39. data/app/components/ariadne/turbo/stream_action/component.rb +25 -0
  40. data/app/components/ariadne/ui/badge/component.html.erb +1 -0
  41. data/app/components/ariadne/ui/badge/component.rb +76 -0
  42. data/app/components/ariadne/ui/blankslate/component.html.erb +9 -0
  43. data/app/components/ariadne/ui/blankslate/component.rb +37 -0
  44. data/app/components/ariadne/ui/button/component.rb +2 -1
  45. data/app/components/ariadne/ui/color_dot/component.html.erb +7 -0
  46. data/app/components/ariadne/ui/color_dot/component.rb +39 -0
  47. data/app/components/ariadne/ui/combobox/component.html.erb +9 -15
  48. data/app/components/ariadne/ui/combobox/component.rb +38 -26
  49. data/app/components/ariadne/ui/combobox/{menu_item → item}/component.html.erb +1 -1
  50. data/app/components/ariadne/ui/combobox/item/component.rb +61 -0
  51. data/app/components/ariadne/ui/combobox/option/component.html.erb +1 -1
  52. data/app/components/ariadne/ui/combobox/option/component.rb +11 -12
  53. data/app/components/ariadne/ui/data_table/component.html.erb +1 -0
  54. data/app/components/ariadne/ui/data_table/component.rb +11 -0
  55. data/app/components/ariadne/ui/dialog/component.html.erb +32 -0
  56. data/app/components/ariadne/ui/dialog/component.rb +37 -0
  57. data/app/components/ariadne/ui/dialog/component.ts +27 -0
  58. data/app/components/ariadne/ui/heroicon/component.rb +7 -2
  59. data/app/components/ariadne/ui/list/component.html.erb +6 -0
  60. data/app/components/ariadne/ui/list/component.rb +12 -0
  61. data/app/components/ariadne/ui/list/item/component.html.erb +16 -0
  62. data/app/components/ariadne/ui/list/item/component.rb +17 -0
  63. data/app/components/ariadne/ui/table/cell/component.html.erb +3 -0
  64. data/app/components/ariadne/ui/table/cell/component.rb +38 -0
  65. data/app/components/ariadne/ui/table/component.html.erb +13 -0
  66. data/app/components/ariadne/ui/table/component.rb +45 -0
  67. data/app/components/ariadne/ui/table/footer/component.html.erb +0 -0
  68. data/app/components/ariadne/ui/table/footer/component.rb +14 -0
  69. data/app/components/ariadne/ui/table/header/component.html.erb +3 -0
  70. data/app/components/ariadne/ui/table/header/component.rb +40 -0
  71. data/app/components/ariadne/ui/table/row/component.html.erb +5 -0
  72. data/app/components/ariadne/ui/table/row/component.rb +28 -0
  73. data/app/components/ariadne/ui/typography/component.html.erb +1 -3
  74. data/app/components/ariadne/ui/typography/component.rb +62 -2
  75. data/app/frontend/ariadne/index.ts +0 -1
  76. data/app/frontend/controllers/autosubmittable_controller.ts +25 -0
  77. data/lib/ariadne/forms/base.html.erb +4 -5
  78. data/lib/ariadne/forms/dsl/badge.rb +35 -0
  79. data/lib/ariadne/forms/dsl/button_input.rb +4 -3
  80. data/lib/ariadne/forms/dsl/form_object.rb +8 -0
  81. data/lib/ariadne/forms/dsl/form_reference_input.rb +59 -0
  82. data/lib/ariadne/forms/dsl/hidden_input.rb +32 -0
  83. data/lib/ariadne/forms/dsl/input.rb +4 -2
  84. data/lib/ariadne/forms/dsl/input_group.rb +3 -3
  85. data/lib/ariadne/forms/dsl/radio_button_group_input.rb +50 -0
  86. data/lib/ariadne/forms/dsl/radio_button_input.rb +48 -0
  87. data/lib/ariadne/forms/dsl/text_field_input.rb +4 -1
  88. data/lib/ariadne/view_components/version.rb +1 -1
  89. metadata +54 -10
  90. data/app/components/ariadne/form/caption/component.html.erb +0 -10
  91. data/app/components/ariadne/form/caption/component.rb +0 -32
  92. data/app/components/ariadne/form/spacing_wrapper/component.html.erb +0 -3
  93. data/app/components/ariadne/form/spacing_wrapper/component.rb +0 -10
  94. data/app/components/ariadne/ui/combobox/menu_item/component.rb +0 -53
  95. data/app/frontend/controllers/tooltip.ts +0 -75
  96. data/app/frontend/stylesheets/typography.css +0 -117
@@ -1,53 +0,0 @@
1
- # typed: false
2
- # frozen_string_literal: true
3
-
4
- module Ariadne
5
- module UI
6
- module Combobox
7
- module MenuItem
8
- class Component < BaseComponent
9
- option :label
10
- option :as, default: proc { :link } # :button
11
-
12
- accepts_html_attributes do |html_attrs|
13
- html_attrs[:class] = style(as:)
14
- html_attrs["data-input-filter-target"] = "searchString"
15
- if as == :link && !html_attrs[:target]
16
- html_attrs[:target] = "_top"
17
- end
18
- end
19
-
20
- style do
21
- base do
22
- [
23
- "flex",
24
- "gap-0.5",
25
- "items-center",
26
- "ps-2",
27
- "pe-1",
28
- "text-ui-base",
29
- "rounded",
30
- "!ring-0",
31
- "hover:bg-zinc-100",
32
- "hover:dark:bg-zinc-800",
33
- "focus-within:bg-zinc-100",
34
- "focus-within:dark:bg-zinc-800",
35
- ]
36
- end
37
- variants do
38
- as do
39
- button do
40
- "appearance-none inline-flex w-full"
41
- end
42
- end
43
- end
44
- end
45
-
46
- def link?
47
- as == :link
48
- end
49
- end
50
- end
51
- end
52
- end
53
- end
@@ -1,75 +0,0 @@
1
- import {controllerFactory} from '@utils/createController'
2
- import {computePosition, arrow, offset, flip, shift} from '@floating-ui/dom'
3
-
4
- import '~/stylesheets/tippy.js/themes/tomato.css'
5
-
6
- export default class TooltipController extends controllerFactory<HTMLElement>()({
7
- targets: {
8
- activator: HTMLElement,
9
- wrapper: HTMLDivElement,
10
- tooltip: HTMLDivElement,
11
- arrow: HTMLDivElement,
12
- },
13
- }) {
14
- async update() {
15
- computePosition(this.activatorTarget, this.tooltipTarget, {
16
- placement: 'top',
17
- middleware: [offset(10), flip(), shift({padding: 5}), arrow({element: this.arrowTarget})],
18
- // eslint-disable-next-line github/no-then
19
- }).then(({x, y, placement, middlewareData}) => {
20
- Object.assign(this.tooltipTarget.style, {
21
- left: `${x}px`,
22
- top: `${y}px`,
23
- })
24
-
25
- // Reset any previously set styles on the arrow
26
- Object.assign(this.arrowTarget.style, {
27
- left: '',
28
- top: '',
29
- right: '',
30
- bottom: '',
31
- })
32
-
33
- const {x: arrowX, y: arrowY} = middlewareData.arrow || {}
34
- const primaryPlacement = placement.split('-')[0]
35
-
36
- switch (primaryPlacement) {
37
- case 'top':
38
- Object.assign(this.arrowTarget.style, {
39
- left: arrowX ? `${arrowX}px` : '',
40
- bottom: '-4px', // Aligns arrow to the bottom edge of the tooltip
41
- })
42
- break
43
- case 'bottom':
44
- Object.assign(this.arrowTarget.style, {
45
- left: arrowX ? `${arrowX}px` : '',
46
- top: '-4px', // Aligns arrow to the top edge of the tooltip
47
- })
48
- break
49
- case 'left':
50
- Object.assign(this.arrowTarget.style, {
51
- top: arrowY ? `${arrowY}px` : '',
52
- right: '-4px', // Aligns arrow to the right edge of the tooltip
53
- })
54
- break
55
- case 'right':
56
- Object.assign(this.arrowTarget.style, {
57
- top: arrowY ? `${arrowY}px` : '',
58
- left: '-4px', // Aligns arrow to the left edge of the tooltip
59
- })
60
- break
61
- }
62
- })
63
- }
64
-
65
- showTooltip(_event: Event) {
66
- this.wrapperTarget.classList.add('block')
67
- this.wrapperTarget.classList.remove('hidden')
68
- this.update()
69
- }
70
-
71
- hideTooltip(_event: Event) {
72
- this.wrapperTarget.classList.add('hidden')
73
- this.wrapperTarget.classList.remove('block')
74
- }
75
- }
@@ -1,117 +0,0 @@
1
- .typography p,
2
- .typography ol,
3
- .typography ul {
4
- max-width: 600px;
5
- }
6
-
7
- .typography a {
8
- @apply ariadne-font-medium ariadne-underline;
9
- }
10
-
11
- .typography strong {
12
- @apply ariadne-font-bold;
13
- }
14
-
15
- .typography ol {
16
- @apply ariadne-pl-6 ariadne-relative ariadne-list-none;
17
-
18
- counter-reset: list-number;
19
- }
20
-
21
- .typography ol > li::before {
22
- @apply ariadne-absolute ariadne-left-0 ariadne-overflow-hidden ariadne-w-5 ariadne-text-right;
23
-
24
- counter-increment: list-number;
25
- content: counter(list-number) '.';
26
- }
27
-
28
- .typography ul {
29
- @apply ariadne-pl-6 ariadne-relative ariadne-list-none;
30
- }
31
-
32
- .typography ul > li::before {
33
- @apply ariadne-absolute ariadne-left-0 ariadne-overflow-hidden ariadne-w-5 ariadne-text-center;
34
-
35
- content: '\25AA';
36
- }
37
-
38
- .typography dt {
39
- @apply ariadne-font-semibold;
40
- }
41
-
42
- .typography hr {
43
- @apply ariadne-border-t;
44
- }
45
-
46
- .typography blockquote {
47
- @apply ariadne-font-medium ariadne-italic ariadne-border-l-4 ariadne-pl-2;
48
- }
49
-
50
- .typography blockquote p:first-of-type::before {
51
- content: open-quote;
52
- }
53
-
54
- .typography blockquote p:last-of-type::after {
55
- content: close-quote;
56
- }
57
-
58
- .typography kbd {
59
- @apply ariadne-font-medium ariadne-text-inherit;
60
-
61
- font-family: inherit;
62
- }
63
-
64
- .typography code {
65
- @apply ariadne-font-mono ariadne-font-semibold;
66
- }
67
-
68
- .typography pre {
69
- @apply ariadne-px-3 ariadne-py-2 ariadne-rounded-lg ariadne-bg-zinc-300 dark:ariadne-bg-zinc-700 ariadne-bg-opacity-10 dark:ariadne-bg-opacity-10 ariadne-font-mono ariadne-overflow-x-auto;
70
- }
71
-
72
- .typography pre code {
73
- @apply ariadne-text-inherit;
74
-
75
- font: inherit;
76
- }
77
-
78
- .typography :not(pre) > code {
79
- @apply ariadne-p-1 ariadne-bg-zinc-300 dark:ariadne-bg-zinc-700 ariadne-bg-opacity-10 dark:ariadne-bg-opacity-10 ariadne-rounded-lg;
80
- }
81
-
82
- .typography pre code::before,
83
- .typography pre code::after {
84
- @apply ariadne-content-none;
85
- }
86
-
87
- .typography table {
88
- @apply ariadne-w-full ariadne-table-auto ariadne-text-left;
89
- }
90
-
91
- .typography thead {
92
- @apply ariadne-border-b ariadne-border-b-slate-50/10;
93
- }
94
-
95
- .typography thead th {
96
- @apply ariadne-font-semibold ariadne-align-bottom ariadne-py-1;
97
- }
98
-
99
- .typography tbody tr {
100
- @apply ariadne-border-b ariadne-border-b-slate-50/10;
101
- }
102
-
103
- .typography tbody tr:last-child {
104
- @apply ariadne-border-b-0;
105
- }
106
-
107
- .typography tbody td {
108
- @apply ariadne-align-baseline ariadne-py-1;
109
- }
110
-
111
- .typography tfoot {
112
- @apply ariadne-border-t;
113
- }
114
-
115
- .typography tfoot td {
116
- @apply ariadne-align-top;
117
- }