lightning_ui_kit 0.1.4 → 0.2.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.
- checksums.yaml +4 -4
- data/app/assets/builds/lightning_ui_kit.css +1048 -2821
- data/app/assets/builds/lightning_ui_kit.js +1 -1
- data/app/assets/builds/lightning_ui_kit.js.map +3 -3
- data/app/assets/stylesheets/lightning_ui_kit/application.css +1 -1
- data/app/assets/vendor/lightning_ui_kit.css +1063 -1319
- data/app/assets/vendor/lightning_ui_kit.js +1 -1
- data/app/components/lightning_ui_kit/alert_component.html.erb +1 -1
- data/app/components/lightning_ui_kit/alert_component.rb +1 -1
- data/app/components/lightning_ui_kit/avatar_component.html.erb +5 -5
- data/app/components/lightning_ui_kit/avatar_component.rb +3 -3
- data/app/components/lightning_ui_kit/badge_component.html.erb +1 -1
- data/app/components/lightning_ui_kit/badge_component.rb +19 -19
- data/app/components/lightning_ui_kit/banner_component.html.erb +6 -6
- data/app/components/lightning_ui_kit/banner_component.rb +3 -3
- data/app/components/lightning_ui_kit/button_component.rb +29 -28
- data/app/components/lightning_ui_kit/checkbox_component.html.erb +29 -8
- data/app/components/lightning_ui_kit/description_list/item_component.html.erb +3 -3
- data/app/components/lightning_ui_kit/description_list_component.html.erb +1 -1
- data/app/components/lightning_ui_kit/dropdown_component.html.erb +5 -5
- data/app/components/lightning_ui_kit/dropdown_component.rb +3 -3
- data/app/components/lightning_ui_kit/dropzone_component.html.erb +22 -22
- data/app/components/lightning_ui_kit/dropzone_component.rb +1 -1
- data/app/components/lightning_ui_kit/file_input_component.html.erb +6 -6
- data/app/components/lightning_ui_kit/file_input_component.rb +1 -1
- data/app/components/lightning_ui_kit/input_component.html.erb +13 -13
- data/app/components/lightning_ui_kit/input_component.rb +1 -1
- data/app/components/lightning_ui_kit/link_component.html.erb +1 -1
- data/app/components/lightning_ui_kit/modal_component.html.erb +7 -7
- data/app/components/lightning_ui_kit/pagination_component.html.erb +2 -2
- data/app/components/lightning_ui_kit/pagination_component.rb +5 -4
- data/app/components/lightning_ui_kit/select_component.html.erb +14 -9
- data/app/components/lightning_ui_kit/skeleton_component.html.erb +4 -4
- data/app/components/lightning_ui_kit/spinner_component.html.erb +1 -1
- data/app/components/lightning_ui_kit/switch_component.html.erb +21 -6
- data/app/components/lightning_ui_kit/table_component.html.erb +10 -10
- data/app/components/lightning_ui_kit/text_component.rb +1 -1
- data/app/components/lightning_ui_kit/textarea_component.html.erb +10 -8
- data/app/javascript/lightning_ui_kit/controllers/accordion_controller.js +11 -11
- data/app/javascript/lightning_ui_kit/controllers/banner_controller.js +3 -3
- data/app/javascript/lightning_ui_kit/controllers/dropdown_controller.js +2 -1
- data/lib/lightning_ui_kit/version.rb +1 -1
- metadata +2 -2
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
<%= tag.div(class: classes, data:) do %>
|
|
2
2
|
<template data-lui-dropzone-target="template">
|
|
3
|
-
<div class="w-full grid gap-1 my-4" id="#NEW_FILE" data-lui-dropzone-target="file">
|
|
4
|
-
<div class="flex items-center justify-between gap-2">
|
|
5
|
-
<div class="flex items-center gap-2">
|
|
6
|
-
<%= heroicon("document", variant: :outline, options: {class: "w-10 h-10 text-indigo-500"}) %>
|
|
7
|
-
<div class="grid gap-1">
|
|
8
|
-
<h4 class="text-gray-900 text-sm font-normal leading-snug" data-lui-dropzone-target="filename"></h4>
|
|
9
|
-
<h5 class="text-gray-400 text-xs font-normal leading-[18px]" data-lui-dropzone-target="status"></h5>
|
|
3
|
+
<div class="lui:w-full lui:grid lui:gap-1 lui:my-4" id="#NEW_FILE" data-lui-dropzone-target="file">
|
|
4
|
+
<div class="lui:flex lui:items-center lui:justify-between lui:gap-2">
|
|
5
|
+
<div class="lui:flex lui:items-center lui:gap-2">
|
|
6
|
+
<%= heroicon("document", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-indigo-500"}) %>
|
|
7
|
+
<div class="lui:grid lui:gap-1">
|
|
8
|
+
<h4 class="lui:text-gray-900 lui:text-sm lui:font-normal lui:leading-snug" data-lui-dropzone-target="filename"></h4>
|
|
9
|
+
<h5 class="lui:text-gray-400 lui:text-xs lui:font-normal lui:leading-[18px]" data-lui-dropzone-target="status"></h5>
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
12
|
<%= heroicon(
|
|
13
13
|
"x-circle",
|
|
14
14
|
variant: :outline,
|
|
15
15
|
options: {
|
|
16
|
-
class: "w-6 h-6 text-zinc-300 hover:text-indigo-500 hover:cursor-pointer",
|
|
16
|
+
class: "lui:w-6 lui:h-6 lui:text-zinc-300 lui:hover:text-indigo-500 lui:hover:cursor-pointer",
|
|
17
17
|
data_action: "click->lui-dropzone#removeFile"
|
|
18
18
|
}) %>
|
|
19
19
|
</div>
|
|
20
|
-
<div class="relative flex items-center gap-2.5 py-1.5">
|
|
21
|
-
<div class="relative w-full h-2.5 overflow-hidden rounded-3xl bg-gray-100">
|
|
22
|
-
<div data-lui-dropzone-target="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%" class="flex h-full items-center justify-center bg-indigo-600 text-white rounded-3xl"></div>
|
|
20
|
+
<div class="lui:relative lui:flex lui:items-center lui:gap-2.5 lui:py-1.5">
|
|
21
|
+
<div class="lui:relative lui:w-full lui:h-2.5 lui:overflow-hidden lui:rounded-3xl lui:bg-gray-100">
|
|
22
|
+
<div data-lui-dropzone-target="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%" class="lui:flex lui:h-full lui:items-center lui:justify-center lui:bg-indigo-600 lui:text-white lui:rounded-3xl"></div>
|
|
23
23
|
</div>
|
|
24
|
-
<span data-lui-dropzone-target="percentage-progress" class="ml-2 bg-white rounded-full text-gray-800 text-xs font-medium flex justify-center items-center">0%</span>
|
|
24
|
+
<span data-lui-dropzone-target="percentage-progress" class="lui:ml-2 lui:bg-white lui:rounded-full lui:text-gray-800 lui:text-xs lui:font-medium lui:flex lui:justify-center lui:items-center">0%</span>
|
|
25
25
|
</div>
|
|
26
26
|
</div>
|
|
27
27
|
</template>
|
|
@@ -29,31 +29,31 @@
|
|
|
29
29
|
<% if @label %>
|
|
30
30
|
<%= tag.label(
|
|
31
31
|
@label,
|
|
32
|
-
class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
|
|
32
|
+
class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
33
33
|
data: label_data
|
|
34
34
|
) %>
|
|
35
35
|
<% end %>
|
|
36
36
|
<% if @description %>
|
|
37
37
|
<%= tag.p(
|
|
38
38
|
@description,
|
|
39
|
-
class: "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6",
|
|
39
|
+
class: "lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
40
40
|
data: description_data
|
|
41
41
|
) %>
|
|
42
42
|
<% end %>
|
|
43
43
|
|
|
44
|
-
<div class="py-9 bg-zinc-50 rounded-2xl border border-gray-300 border-dotted hover:cursor-pointer hover:bg-zinc-100" data-action="click->lui-dropzone#selectFiles">
|
|
45
|
-
<div class="mb-3 flex items-center justify-center">
|
|
46
|
-
<%= heroicon("cloud-arrow-up", variant: :outline, options: {class: "w-10 h-10 text-indigo-500"}) %>
|
|
44
|
+
<div class="lui:py-9 lui:bg-zinc-50 lui:rounded-2xl lui:border lui:border-gray-300 lui:border-dotted lui:hover:cursor-pointer lui:hover:bg-zinc-100" data-action="click->lui-dropzone#selectFiles">
|
|
45
|
+
<div class="lui:mb-3 lui:flex lui:items-center lui:justify-center">
|
|
46
|
+
<%= heroicon("cloud-arrow-up", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-indigo-500"}) %>
|
|
47
47
|
</div>
|
|
48
|
-
<p class="text-center text-gray-900 text-base font-medium leading-snug"><%= t("dropzone.default_message") %></p>
|
|
48
|
+
<p class="lui:text-center lui:text-gray-900 lui:text-base lui:font-medium lui:leading-snug"><%= t("dropzone.default_message") %></p>
|
|
49
49
|
<% if @placeholder %>
|
|
50
|
-
<p class="text-center text-gray-400 text-base sm:text-sm/6 font-normal leading-4 mt-1.5"><%= @placeholder %></p>
|
|
50
|
+
<p class="lui:text-center lui:text-gray-400 lui:text-base lui:sm:text-sm/6 lui:font-normal lui:leading-4 lui:mt-1.5"><%= @placeholder %></p>
|
|
51
51
|
<% end %>
|
|
52
52
|
<% if @form %>
|
|
53
53
|
<%= @form.file_field(
|
|
54
54
|
@name,
|
|
55
55
|
multiple: @multiple,
|
|
56
|
-
class: "hidden",
|
|
56
|
+
class: "lui:hidden",
|
|
57
57
|
direct_upload: true,
|
|
58
58
|
data: input_data,
|
|
59
59
|
accept: @accept
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
@name,
|
|
64
64
|
value: @value,
|
|
65
65
|
multiple: @multiple,
|
|
66
|
-
class: "hidden",
|
|
66
|
+
class: "lui:hidden",
|
|
67
67
|
direct_upload: true,
|
|
68
68
|
data: input_data,
|
|
69
69
|
accept: @accept
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
<% if has_errors? %>
|
|
75
75
|
<%= tag.p(
|
|
76
76
|
error_messages,
|
|
77
|
-
class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
|
|
77
|
+
class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
78
78
|
data: error_data
|
|
79
79
|
) %>
|
|
80
80
|
<% end %>
|
|
@@ -18,7 +18,7 @@ class LightningUiKit::DropzoneComponent < LightningUiKit::BaseComponent
|
|
|
18
18
|
end
|
|
19
19
|
|
|
20
20
|
def classes
|
|
21
|
-
merge_classes(["space-y-4 [&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3
|
|
21
|
+
merge_classes(["lui:space-y-4 lui:[&>[data-slot=label]+[data-slot=control]]:mt-3 lui:[&>[data-slot=label]+[data-slot=description]]:mt-1 lui:[&>[data-slot=description]+[data-slot=control]]:mt-3 lui:[&>[data-slot=control]+[data-slot=description]]:mt-3 lui:[&>[data-slot=control]+[data-slot=error]]:mt-3 lui:*:data-[slot=label]:font-medium", @options[:class]].compact.join(" "))
|
|
22
22
|
end
|
|
23
23
|
|
|
24
24
|
def data
|
|
@@ -3,23 +3,23 @@
|
|
|
3
3
|
<%= label_tag(
|
|
4
4
|
@name,
|
|
5
5
|
@label.is_a?(String) ? @label : nil,
|
|
6
|
-
class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
|
|
6
|
+
class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
7
7
|
data: label_data
|
|
8
8
|
) %>
|
|
9
9
|
<% end %>
|
|
10
10
|
<% if @description %>
|
|
11
11
|
<%= tag.p(
|
|
12
12
|
@description,
|
|
13
|
-
class: "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6",
|
|
13
|
+
class: "lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
14
14
|
data: description_data
|
|
15
15
|
) %>
|
|
16
16
|
<% end %>
|
|
17
|
-
<span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
|
|
17
|
+
<span data-slot="control" class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[calc(var(--radius-lg)-1px)] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
|
|
18
18
|
<% if @form %>
|
|
19
19
|
<%= @form.file_field(
|
|
20
20
|
@name,
|
|
21
21
|
data: input_data,
|
|
22
|
-
class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)]
|
|
22
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:lui:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:data-disabled:hover:none lui:data-disabled:cursor-not-allowed lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:border-zinc-950/20",
|
|
23
23
|
disabled: @disabled,
|
|
24
24
|
autofocus: @autofocus,
|
|
25
25
|
multiple: @multiple,
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
@name,
|
|
32
32
|
value: @value,
|
|
33
33
|
data: input_data,
|
|
34
|
-
class: "relative block w-full appearance-none rounded-lg text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 data-disabled:hover:none data-disabled:cursor-not-allowed data-disabled:border-zinc-950/20 data-disabled:file:cursor-not-allowed data-disabled:file:cursor-not-allowed file:cursor-pointer cursor-pointer file:border-0 file:px-[calc(--spacing(3.5)-1px)] file:py-[calc(--spacing(2.5)-1px)] file:sm:px-[calc(--spacing(3)-1px)] file:sm:py-[calc(--spacing(1.5)-1px)] file:mr-4 file:bg-zinc-100",
|
|
34
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:hover:none lui:data-disabled:cursor-not-allowed lui:data-disabled:border-zinc-950/20 lui:data-disabled:file:cursor-not-allowed lui:data-disabled:file:cursor-not-allowed lui:file:cursor-pointer lui:cursor-pointer lui:file:border-0 lui:file:px-[calc(--spacing(3.5)-1px)] lui:file:py-[calc(--spacing(2.5)-1px)] lui:file:sm:px-[calc(--spacing(3)-1px)] lui:file:sm:py-[calc(--spacing(1.5)-1px)] lui:file:mr-4 lui:file:bg-zinc-100",
|
|
35
35
|
disabled: @disabled,
|
|
36
36
|
autofocus: @autofocus,
|
|
37
37
|
multiple: @multiple,
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
<% if has_errors? %>
|
|
44
44
|
<%= tag.p(
|
|
45
45
|
error_messages,
|
|
46
|
-
class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
|
|
46
|
+
class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
47
47
|
data: error_data
|
|
48
48
|
) %>
|
|
49
49
|
<% end %>
|
|
@@ -18,7 +18,7 @@ class LightningUiKit::FileInputComponent < LightningUiKit::BaseComponent
|
|
|
18
18
|
end
|
|
19
19
|
|
|
20
20
|
def classes
|
|
21
|
-
merge_classes(["[&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3
|
|
21
|
+
merge_classes(["lui:[&>[data-slot=label]+[data-slot=control]]:mt-3 lui:[&>[data-slot=label]+[data-slot=description]]:mt-1 lui:[&>[data-slot=description]+[data-slot=control]]:mt-3 lui:[&>[data-slot=control]+[data-slot=description]]:mt-3 lui:[&>[data-slot=control]+[data-slot=error]]:mt-3 lui:*:data-[slot=label]:font-medium", @options[:class]].compact.join(" "))
|
|
22
22
|
end
|
|
23
23
|
|
|
24
24
|
def data
|
|
@@ -5,25 +5,25 @@
|
|
|
5
5
|
<% if @label %>
|
|
6
6
|
<%= tag.label(
|
|
7
7
|
@label,
|
|
8
|
-
class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
|
|
8
|
+
class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
9
9
|
data: label_data
|
|
10
10
|
) %>
|
|
11
11
|
<% end %>
|
|
12
12
|
<% if @description %>
|
|
13
13
|
<%= tag.p(
|
|
14
14
|
@description,
|
|
15
|
-
class: "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6",
|
|
15
|
+
class: "lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
16
16
|
data: description_data
|
|
17
17
|
) %>
|
|
18
18
|
<% end %>
|
|
19
19
|
<% if @form %>
|
|
20
|
-
<span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
|
|
20
|
+
<span data-slot="control" class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[calc(var(--radius-lg)-1px)] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
|
|
21
21
|
<% case @type %>
|
|
22
22
|
<% when :text %>
|
|
23
23
|
<%= @form.text_field(
|
|
24
24
|
@name,
|
|
25
25
|
data: input_data,
|
|
26
|
-
class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
|
|
26
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500/60 lui:data-disabled:border-zinc-950/20",
|
|
27
27
|
disabled: @disabled,
|
|
28
28
|
autofocus: @autofocus,
|
|
29
29
|
placeholder: @placeholder
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<%= @form.email_field(
|
|
33
33
|
@name,
|
|
34
34
|
data: input_data,
|
|
35
|
-
class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
|
|
35
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500/60 lui:data-disabled:border-zinc-950/20",
|
|
36
36
|
disabled: @disabled,
|
|
37
37
|
autofocus: @autofocus,
|
|
38
38
|
placeholder: @placeholder
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
<%= @form.password_field(
|
|
42
42
|
@name,
|
|
43
43
|
data: input_data,
|
|
44
|
-
class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
|
|
44
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500/60 lui:data-disabled:border-zinc-950/20",
|
|
45
45
|
disabled: @disabled,
|
|
46
46
|
autofocus: @autofocus,
|
|
47
47
|
placeholder: @placeholder
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<%= @form.number_field(
|
|
51
51
|
@name,
|
|
52
52
|
data: input_data,
|
|
53
|
-
class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
|
|
53
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500/60 lui:data-disabled:border-zinc-950/20",
|
|
54
54
|
disabled: @disabled,
|
|
55
55
|
autofocus: @autofocus,
|
|
56
56
|
placeholder: @placeholder,
|
|
@@ -61,14 +61,14 @@
|
|
|
61
61
|
<% end %>
|
|
62
62
|
</span>
|
|
63
63
|
<% else %>
|
|
64
|
-
<span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
|
|
64
|
+
<span data-slot="control" class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[calc(var(--radius-lg)-1px)] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
|
|
65
65
|
<% case @type %>
|
|
66
66
|
<% when :text %>
|
|
67
67
|
<%= text_field_tag(
|
|
68
68
|
@name,
|
|
69
69
|
@value,
|
|
70
70
|
data: input_data,
|
|
71
|
-
class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
|
|
71
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500/60 lui:data-disabled:border-zinc-950/20",
|
|
72
72
|
disabled: @disabled,
|
|
73
73
|
autofocus: @autofocus,
|
|
74
74
|
placeholder: @placeholder
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
@name,
|
|
79
79
|
@value,
|
|
80
80
|
data: input_data,
|
|
81
|
-
class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
|
|
81
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500/60 lui:data-disabled:border-zinc-950/20",
|
|
82
82
|
disabled: @disabled,
|
|
83
83
|
autofocus: @autofocus,
|
|
84
84
|
placeholder: @placeholder
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
@name,
|
|
89
89
|
@value,
|
|
90
90
|
data: input_data,
|
|
91
|
-
class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
|
|
91
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500/60 lui:data-disabled:border-zinc-950/20",
|
|
92
92
|
disabled: @disabled,
|
|
93
93
|
autofocus: @autofocus,
|
|
94
94
|
placeholder: @placeholder
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
@name,
|
|
99
99
|
@value,
|
|
100
100
|
data: input_data,
|
|
101
|
-
class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
|
|
101
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500/60 lui:data-disabled:border-zinc-950/20",
|
|
102
102
|
disabled: @disabled,
|
|
103
103
|
autofocus: @autofocus,
|
|
104
104
|
placeholder: @placeholder,
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
<% if has_errors? %>
|
|
110
110
|
<%= tag.p(
|
|
111
111
|
error_messages,
|
|
112
|
-
class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
|
|
112
|
+
class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
113
113
|
data: error_data
|
|
114
114
|
) %>
|
|
115
115
|
<% end %>
|
|
@@ -18,7 +18,7 @@ class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
|
|
|
18
18
|
end
|
|
19
19
|
|
|
20
20
|
def classes
|
|
21
|
-
merge_classes(["[&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3
|
|
21
|
+
merge_classes(["lui:[&>[data-slot=label]+[data-slot=control]]:mt-3 lui:[&>[data-slot=label]+[data-slot=description]]:mt-1 lui:[&>[data-slot=description]+[data-slot=control]]:mt-3 lui:[&>[data-slot=control]+[data-slot=description]]:mt-3 lui:[&>[data-slot=control]+[data-slot=error]]:mt-3 lui:*:data-[slot=label]:font-medium", @options[:class]].compact.join(" "))
|
|
22
22
|
end
|
|
23
23
|
|
|
24
24
|
def data
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
<%= tag.dialog(id: @id, open: @open, data:) do %>
|
|
2
|
-
<div class="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16" aria-hidden="true" data-
|
|
3
|
-
<div class="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0">
|
|
4
|
-
<div class="grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4">
|
|
5
|
-
<div class="sm:max-w-3xl row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-(--gutter) ring-1 shadow-lg ring-zinc-950/10 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl forced-colors:outline transition duration-100 will-change-transform data-closed:translate-y-12 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:data-closed:translate-y-0 sm:data-closed:data-enter:scale-95"
|
|
2
|
+
<div class="lui:fixed lui:inset-0 lui:flex lui:w-screen lui:justify-center lui:overflow-y-auto lui:bg-zinc-950/25 lui:px-2 lui:py-2 lui:transition lui:duration-100 lui:focus:outline-0 lui:data-closed:opacity-0 lui:data-enter:ease-out lui:data-leave:ease-in lui:sm:px-6 lui:sm:py-8 lg:lui:px-8 lg:lui:py-16" aria-hidden="true" data-open=""></div>
|
|
3
|
+
<div class="lui:fixed lui:inset-0 lui:w-screen lui:overflow-y-auto lui:pt-6 lui:sm:pt-0">
|
|
4
|
+
<div class="lui:grid lui:min-h-full lui:grid-rows-[1fr_auto] lui:justify-items-center lui:sm:grid-rows-[1fr_auto_3fr] lui:sm:p-4">
|
|
5
|
+
<div class="lui:sm:max-w-3xl lui:row-start-2 lui:w-full lui:min-w-0 lui:rounded-t-3xl lui:bg-white lui:p-(--gutter) lui:ring-1 lui:shadow-lg lui:ring-zinc-950/10 [--gutter:--spacing(8)] lui:sm:mb-auto lui:sm:rounded-2xl lui:forced-colors:outline lui:transition lui:duration-100 lui:will-change-transform lui:data-closed:translate-y-12 lui:data-closed:opacity-0 lui:data-enter:ease-out lui:data-leave:ease-in lui:sm:data-closed:translate-y-0 lui:sm:data-closed:data-enter:scale-95" data-open="">
|
|
6
6
|
<% if @title %>
|
|
7
|
-
<h2 class="text-lg/6 font-semibold text-balance text-zinc-950 sm:text-base/6"
|
|
7
|
+
<h2 class="lui:text-lg/6 lui:font-semibold lui:text-balance lui:text-zinc-950 lui:sm:text-base/6" data-open="">
|
|
8
8
|
<%= @title %>
|
|
9
9
|
</h2>
|
|
10
10
|
<% end %>
|
|
11
11
|
<% if @description %>
|
|
12
|
-
<p data-slot="text"
|
|
12
|
+
<p data-slot="text" data-open="" class="lui:mt-2 lui:text-pretty lui:text-base/6 lui:text-zinc-500 lui:sm:text-sm/6">
|
|
13
13
|
<%= @description %>
|
|
14
14
|
</p>
|
|
15
15
|
<% end %>
|
|
16
16
|
<%= body %>
|
|
17
17
|
<% if actions.any? %>
|
|
18
|
-
<div class="mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto">
|
|
18
|
+
<div class="lui:mt-8 lui:flex lui:flex-col-reverse lui:items-center lui:justify-end lui:gap-3 *:lui:w-full lui:sm:flex-row lui:sm:*:w-auto">
|
|
19
19
|
<% actions.each do |action| %>
|
|
20
20
|
<%= action %>
|
|
21
21
|
<% end %>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<%= tag.div(class: "items-center gap-x-2 sm:flex") do %>
|
|
1
|
+
<%= tag.div(class: "lui:items-center lui:gap-x-2 lui:sm:flex") do %>
|
|
2
2
|
<% if @with_arrows %>
|
|
3
3
|
<%= link_to(url(@current_page - 1), class: link_classes, data: data(disabled: @current_page == 1)) do %>
|
|
4
4
|
<%= heroicon("chevron-left", options: { class: "w-5 h-5" }) %>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
<% pages_with_gaps.each do |page| %>
|
|
9
9
|
<% if page == :gap %>
|
|
10
|
-
<span aria-hidden="true" class="w-[2.25rem] text-center text-sm/6 font-semibold text-zinc-950 select-none">…</span>
|
|
10
|
+
<span aria-hidden="true" class="lui:w-[2.25rem] lui:text-center lui:text-sm/6 lui:font-semibold lui:text-zinc-950 lui:select-none">…</span>
|
|
11
11
|
<% else %>
|
|
12
12
|
<%= link_to(page, url(page), class: link_classes, data: data(active: @current_page == page)) %>
|
|
13
13
|
<% end %>
|
|
@@ -18,10 +18,11 @@ class LightningUiKit::PaginationComponent < LightningUiKit::BaseComponent
|
|
|
18
18
|
end
|
|
19
19
|
|
|
20
20
|
def link_classes
|
|
21
|
-
"min-w-[2.25rem] flex items-center justify-center rounded-lg border text-base/6 font-semibold px-[calc(--spacing(3.5)-1px)]\
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
"lui:min-w-[2.25rem] lui:flex lui:items-center lui:justify-center lui:rounded-lg lui:border lui:text-base/6 lui:font-semibold lui:px-[calc(--spacing(3.5)-1px)] \
|
|
22
|
+
lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:sm:text-sm/6 \
|
|
23
|
+
lui:focus:outline-hidden lui:focus:outline lui:focus:outline-2 lui:focus:outline-offset-2 lui:focus:outline-blue-500 \
|
|
24
|
+
lui:data-[disabled]:opacity-50 lui:data-[disabled]:pointer-events-none lui:border-transparent lui:text-zinc-950 \
|
|
25
|
+
lui:data-[active]:bg-zinc-950/5 lui:hover:bg-zinc-950/5"
|
|
25
26
|
end
|
|
26
27
|
|
|
27
28
|
def pages_with_gaps
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
<%= tag.div data:, class:"[&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3
|
|
1
|
+
<%= tag.div data:, class: "lui:[&>[data-slot=label]+[data-slot=control]]:mt-3 lui:[&>[data-slot=label]+[data-slot=description]]:mt-1 lui:[&>[data-slot=description]+[data-slot=control]]:mt-3 lui:[&>[data-slot=control]+[data-slot=description]]:mt-3 lui:[&>[data-slot=control]+[data-slot=error]]:mt-3 lui:*:data-[slot=label]:font-medium" do %>
|
|
2
2
|
<% if @label %>
|
|
3
|
-
<label data-slot="label" class="text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6">
|
|
3
|
+
<label data-slot="label" class="lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6">
|
|
4
4
|
<%= @label %>
|
|
5
5
|
</label>
|
|
6
6
|
<% end %>
|
|
7
7
|
<% if @description %>
|
|
8
|
-
<p data-slot="description" class="text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6">
|
|
8
|
+
<p data-slot="description" class="lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6">
|
|
9
9
|
<%= @description %>
|
|
10
10
|
</p>
|
|
11
11
|
<% end %>
|
|
12
12
|
<span data-slot="control"
|
|
13
|
-
class="group relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset focus:after:ring-2 focus:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none">
|
|
13
|
+
class="lui:group lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[calc(var(--radius-lg)-1px)] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:focus:after:ring-2 lui:focus:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none">
|
|
14
14
|
<% if @form %>
|
|
15
15
|
<%= @form.select(
|
|
16
16
|
@name,
|
|
17
17
|
@options_for_select,
|
|
18
|
-
{multiple: @multiple},
|
|
19
|
-
class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20 data-disabled:opacity-100",
|
|
18
|
+
{ multiple: @multiple },
|
|
19
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:py-[calc(--spacing(2.5)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:pr-[calc(--spacing(10)-1px)] lui:pl-[calc(--spacing(3.5)-1px)] lui:sm:pr-[calc(--spacing(9)-1px)] lui:sm:pl-[calc(--spacing(3)-1px)] lui:[&_optgroup]:font-semibold lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:border-zinc-950/20 lui:data-disabled:opacity-100",
|
|
20
20
|
data: select_data
|
|
21
21
|
) %>
|
|
22
22
|
<% else %>
|
|
@@ -24,16 +24,21 @@
|
|
|
24
24
|
@name,
|
|
25
25
|
@options_for_select,
|
|
26
26
|
multiple: @multiple,
|
|
27
|
-
class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20 data-disabled:opacity-100",
|
|
27
|
+
class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:py-[calc(--spacing(2.5)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:pr-[calc(--spacing(10)-1px)] lui:pl-[calc(--spacing(3.5)-1px)] lui:sm:pr-[calc(--spacing(9)-1px)] lui:sm:pl-[calc(--spacing(3)-1px)] lui:[&_optgroup]:font-semibold lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:border-zinc-950/20 lui:data-disabled:opacity-100",
|
|
28
28
|
data: select_data
|
|
29
29
|
) %>
|
|
30
30
|
<% end %>
|
|
31
|
-
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
|
|
31
|
+
<span class="lui:pointer-events-none lui:absolute lui:inset-y-0 lui:right-0 lui:flex lui:items-center lui:pr-2">
|
|
32
|
+
<svg class="lui:size-5 lui:stroke-zinc-500 lui:group-has-data-disabled:stroke-zinc-600 lui:sm:size-4 lui:forced-colors:stroke-[CanvasText]" viewBox="0 0 16 16" aria-hidden="true" fill="none">
|
|
33
|
+
<path d="M5.75 10.75L8 13L10.25 10.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
34
|
+
<path d="M10.25 5.25L8 3L5.75 5.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
35
|
+
</svg>
|
|
36
|
+
</span>
|
|
32
37
|
</span>
|
|
33
38
|
<% if has_errors? %>
|
|
34
39
|
<%= tag.p(
|
|
35
40
|
error_messages,
|
|
36
|
-
class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
|
|
41
|
+
class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
37
42
|
data: error_data
|
|
38
43
|
) %>
|
|
39
44
|
<% end %>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
<div role="status" class="animate-pulse">
|
|
1
|
+
<div role="status" class="lui:animate-pulse">
|
|
2
2
|
<% if @with_title %>
|
|
3
|
-
<h3 class="h-3 bg-gray-300 rounded-full w-48 mb-4"></h3>
|
|
3
|
+
<h3 class="lui:h-3 lui:bg-gray-300 lui:rounded-full lui:w-48 lui:mb-4"></h3>
|
|
4
4
|
<% end %>
|
|
5
|
-
<div class="space-y-2.5">
|
|
5
|
+
<div class="lui:space-y-2.5">
|
|
6
6
|
<% @lines.times do %>
|
|
7
|
-
<p class="h-2 bg-gray-300 rounded-full"></p>
|
|
7
|
+
<p class="lui:h-2 lui:bg-gray-300 lui:rounded-full"></p>
|
|
8
8
|
<% end %>
|
|
9
9
|
</div>
|
|
10
10
|
</div>
|
|
@@ -1,27 +1,42 @@
|
|
|
1
1
|
<div
|
|
2
2
|
data-slot="field"
|
|
3
|
-
class="
|
|
3
|
+
class="
|
|
4
|
+
lui:grid lui:grid-cols-[1fr_auto] lui:items-center lui:gap-x-8 lui:gap-y-1 lui:sm:grid-cols-[1fr_auto]
|
|
5
|
+
lui:*:data-[slot=control]:col-start-2 lui:*:data-[slot=control]:self-center lui:*:data-[slot=label]:col-start-1
|
|
6
|
+
lui:*:data-[slot=label]:row-start-1 lui:*:data-[slot=label]:justify-self-start lui:*:data-[slot=description]:col-start-1
|
|
7
|
+
lui:*:data-[slot=description]:row-start-2 lui:has-data-[slot=description]:**:data-[slot=label]:font-medium
|
|
8
|
+
lui:*:data-[slot=error]:col-start-1 lui:*:data-[slot=error]:row-start-3"
|
|
4
9
|
data-controller="lui-switch"
|
|
5
10
|
>
|
|
6
11
|
<% if @label %>
|
|
7
|
-
<label data-slot="label" class="text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6">
|
|
12
|
+
<label data-slot="label" class="lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6">
|
|
8
13
|
<%= @label %>
|
|
9
14
|
</label>
|
|
10
15
|
<% end %>
|
|
11
16
|
<% if @description %>
|
|
12
|
-
<p data-slot="description" class="text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6">
|
|
17
|
+
<p data-slot="description" class="lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6">
|
|
13
18
|
<%= @description %>
|
|
14
19
|
</p>
|
|
15
20
|
<% end %>
|
|
16
21
|
<% if has_errors? %>
|
|
17
22
|
<%= tag.p(
|
|
18
23
|
error_messages,
|
|
19
|
-
class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
|
|
24
|
+
class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
|
|
20
25
|
data: error_data
|
|
21
26
|
) %>
|
|
22
27
|
<% end %>
|
|
23
28
|
<%= tag.button(
|
|
24
|
-
class: "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full
|
|
29
|
+
class: "lui:group lui:relative lui:isolate lui:inline-flex lui:h-6 lui:w-10 lui:cursor-default lui:rounded-full
|
|
30
|
+
lui:p-[3px] lui:sm:h-5 lui:sm:w-8 lui:transition lui:duration-0 lui:ease-in-out
|
|
31
|
+
lui:forced-colors:outline lui:forced-colors:[--switch-bg:Highlight] ] lui:bg-zinc-200 lui:ring-1 lui:ring-black/5 lui:ring-inset
|
|
32
|
+
lui:data-checked:bg-(--switch-bg) lui:data-checked:ring-(--switch-bg-ring) lui:focus:outline-hidden lui:data-focus:outline-2
|
|
33
|
+
lui:data-focus:outline-offset-2 lui:data-focus:outline-blue-500 lui:hover:ring-black/15 lui:hover:data-checked:ring-(--switch-bg-ring)
|
|
34
|
+
lui:data-disabled:bg-zinc-200 lui:data-disabled:opacity-50 lui:data-disabled:data-checked:bg-zinc-200 lui:data-disabled:data-checked:ring-black/5
|
|
35
|
+
lui:[--switch-bg-ring:var(--lui-color-zinc-950)]/90
|
|
36
|
+
lui:[--switch-bg:var(--lui-color-zinc-900)]
|
|
37
|
+
lui:[--switch-ring:var(--lui-color-zinc-950)]/90
|
|
38
|
+
lui:[--switch-shadow:var(--lui-color-black)]/10
|
|
39
|
+
lui:[--switch:white]",
|
|
25
40
|
aria: { checked: @enabled },
|
|
26
41
|
role: "switch",
|
|
27
42
|
type: "button",
|
|
@@ -30,7 +45,7 @@
|
|
|
30
45
|
) do %>
|
|
31
46
|
<span
|
|
32
47
|
aria-hidden="true"
|
|
33
|
-
class="pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5 translate-x-0 transition duration-200 ease-in-out border border-transparent bg-white ring-1 shadow-sm ring-black/5 group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring) group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3 group-data-checked:group-data-disabled:bg-white group-data-checked:group-data-disabled:shadow-sm group-data-checked:group-data-disabled:ring-black/5">
|
|
48
|
+
class="lui:pointer-events-none lui:relative lui:inline-block lui:size-[1.125rem] lui:rounded-full lui:sm:size-3.5 lui:translate-x-0 lui:transition lui:duration-200 lui:ease-in-out lui:border lui:border-transparent lui:bg-white lui:ring-1 lui:shadow-sm lui:ring-black/5 lui:group-data-checked:bg-(--switch) lui:group-data-checked:shadow-(--switch-shadow) lui:group-data-checked:ring-(--switch-ring) lui:group-data-checked:translate-x-4 lui:sm:group-data-checked:translate-x-3 lui:group-data-checked:group-data-disabled:bg-white lui:group-data-checked:group-data-disabled:shadow-sm lui:group-data-checked:group-data-disabled:ring-black/5">
|
|
34
49
|
</span>
|
|
35
50
|
<% if @form %>
|
|
36
51
|
<%= @form.hidden_field(@name, value: @enabled, data: { lui_switch_target: "field" }) %>
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
<div class="border-zinc-950/5 border rounded-lg">
|
|
2
|
-
<table class="min-w-full text-left text-sm/6 text-zinc-950 border-collapse border-inherit">
|
|
3
|
-
<thead class="text-zinc-500">
|
|
1
|
+
<div class="lui:border-zinc-950/5 lui:border lui:rounded-lg">
|
|
2
|
+
<table class="lui:min-w-full lui:text-left lui:text-sm/6 lui:text-zinc-950 lui:border-collapse lui:border-inherit">
|
|
3
|
+
<thead class="lui:text-zinc-500">
|
|
4
4
|
<tr class="">
|
|
5
5
|
<% columns.each do |column| %>
|
|
6
|
-
<th class="border-b border-b-zinc-950/10 px-4 py-2 font-medium"><%= column.title %></th>
|
|
6
|
+
<th class="lui:border-b lui:border-b-zinc-950/10 lui:px-4 lui:py-2 lui:font-medium"><%= column.title %></th>
|
|
7
7
|
<% end %>
|
|
8
8
|
<% if actions.present? %>
|
|
9
|
-
<th class="border-b border-b-zinc-950/10 px-4 py-2 font-medium"><%= @actions_title %></th>
|
|
9
|
+
<th class="lui:border-b lui:border-b-zinc-950/10 lui:px-4 lui:py-2 lui:font-medium"><%= @actions_title %></th>
|
|
10
10
|
<% end %>
|
|
11
11
|
</tr>
|
|
12
12
|
</thead>
|
|
13
13
|
<tbody>
|
|
14
14
|
<% if @data.empty? %>
|
|
15
15
|
<tr>
|
|
16
|
-
<td class="p-4 text-center" colspan="<%= columns.size + (actions.present? ? 1 : 0) %>">
|
|
17
|
-
<p class="font-medium"><%= @empty_message %></p>
|
|
16
|
+
<td class="lui:p-4 lui:text-center" colspan="<%= columns.size + (actions.present? ? 1 : 0) %>">
|
|
17
|
+
<p class="lui:font-medium"><%= @empty_message %></p>
|
|
18
18
|
</td>
|
|
19
19
|
</tr>
|
|
20
20
|
<% else %>
|
|
21
21
|
<% @data.each do |row| %>
|
|
22
|
-
<tr class="group">
|
|
22
|
+
<tr class="lui:group">
|
|
23
23
|
<% columns.each do |column| %>
|
|
24
|
-
<td class="p-4 border-b border-zinc-950/5 group-last:border-b-0">
|
|
24
|
+
<td class="lui:p-4 lui:border-b lui:border-zinc-950/5 lui:group-last:border-b-0">
|
|
25
25
|
<%= column.call(row) %>
|
|
26
26
|
</td>
|
|
27
27
|
<% end %>
|
|
28
28
|
<% if actions.present? %>
|
|
29
|
-
<td class="p-4 flex gap-3 border-b border-zinc-950/5 group-last:border-b-0">
|
|
29
|
+
<td class="lui:p-4 lui:flex lui:gap-3 lui:border-b lui:border-zinc-950/5 lui:group-last:border-b-0">
|
|
30
30
|
<% actions.each do |action| %>
|
|
31
31
|
<%= action.call(row) %>
|
|
32
32
|
<% end %>
|
|
@@ -7,6 +7,6 @@ class LightningUiKit::TextComponent < LightningUiKit::BaseComponent
|
|
|
7
7
|
end
|
|
8
8
|
|
|
9
9
|
def classes
|
|
10
|
-
merge_classes(["text-zinc-600 text-#{@size}", @options[:class]].compact.join(" "))
|
|
10
|
+
merge_classes(["lui:text-zinc-600 lui:text-#{@size}", @options[:class]].compact.join(" "))
|
|
11
11
|
end
|
|
12
12
|
end
|