├── .formatter.exs
├── .gitignore
├── .zed
└── tasks.json
├── LICENSE
├── README.md
├── assets
└── tailwind.css
├── example
├── .formatter.exs
├── .gitignore
├── README.md
├── assets
│ ├── css
│ │ └── app.css
│ ├── js
│ │ └── app.js
│ ├── tailwind.config.js
│ └── vendor
│ │ └── topbar.js
├── config
│ ├── config.exs
│ ├── dev.exs
│ ├── prod.exs
│ ├── runtime.exs
│ └── test.exs
├── lib
│ ├── example.ex
│ ├── example
│ │ ├── application.ex
│ │ ├── model
│ │ │ └── article.ex
│ │ └── repo.ex
│ ├── example_web.ex
│ └── example_web
│ │ ├── components
│ │ ├── layouts.ex
│ │ └── layouts
│ │ │ ├── app.html.heex
│ │ │ └── root.html.heex
│ │ ├── endpoint.ex
│ │ ├── live
│ │ └── articles.ex
│ │ ├── router.ex
│ │ └── telemetry.ex
├── mix.exs
├── mix.lock
└── priv
│ └── repo
│ ├── migrations
│ ├── .formatter.exs
│ └── 20230717191810_add_tables.exs
│ └── seeds.exs
├── guides
└── cheatsheets
│ ├── data_table_component_cheatsheet.cheatmd
│ └── ecto_source_cheatsheet.cheatmd
├── lib
├── data_table.ex
└── data_table
│ ├── application.ex
│ ├── dev_server.ex
│ ├── ecto.ex
│ ├── ecto
│ └── query.ex
│ ├── list.ex
│ ├── list
│ └── config.ex
│ ├── live_component.ex
│ ├── live_component
│ ├── filters.ex
│ └── logic.ex
│ ├── nav_state.ex
│ ├── source.ex
│ ├── source
│ ├── query.ex
│ └── result.ex
│ ├── theme
│ ├── basic.ex
│ ├── tailwind.ex
│ ├── tailwind
│ │ ├── components.ex
│ │ ├── dropdown.ex
│ │ ├── heroicons.ex
│ │ └── link.ex
│ └── util.ex
│ └── util
│ └── data_deps.ex
├── mix.exs
├── mix.lock
├── screenshot.png
└── test
├── data_table
└── live_component
│ └── logic_test.exs
├── data_table_test.exs
├── support
├── test_endpoint.ex
├── test_live.ex
└── test_router.ex
└── test_helper.exs
/.formatter.exs:
--------------------------------------------------------------------------------
1 | # Used by "mix format"
2 | [
3 | inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"]
4 | ]
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # The directory Mix will write compiled artifacts to.
2 | /_build/
3 |
4 | # If you run "mix test --cover", coverage assets end up here.
5 | /cover/
6 |
7 | # The directory Mix downloads your dependencies sources to.
8 | /deps/
9 |
10 | # Where third-party dependencies like ExDoc output generated docs.
11 | /doc/
12 |
13 | # Ignore .fetch files in case you like to edit your project deps locally.
14 | /.fetch
15 |
16 | # If the VM crashes, it generates a dump, let's ignore it too.
17 | erl_crash.dump
18 |
19 | # Also ignore archive artifacts (built via "mix archive.build").
20 | *.ez
21 |
22 | # Ignore package tarball (built via "mix hex.build").
23 | data_table-*.tar
24 |
25 | # Temporary files, for example, from tests.
26 | /tmp/
27 |
--------------------------------------------------------------------------------
/.zed/tasks.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "label": "Build Docs",
4 | "command": "mix docs",
5 | "use_new_terminal": false,
6 | "allow_concurrent_runs": false,
7 | "reveal": "always",
8 | "hide": "on_success",
9 | "shell": "system"
10 | }
11 | ]
12 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # DataTable
2 |
3 | [Docs](https://hexdocs.pm/data_table/DataTable.html)
4 |
5 | A flexible DataTable component for LiveView.
6 |
7 | 
8 | [Source code for the screenshot above. You get all of this in ~50loc.](https://github.com/hansihe/data_table/blob/main/example/lib/example_web/live/articles.ex)
9 |
10 | Some of the features the component has:
11 | * Filtering
12 | * Sorting
13 | * Expandable rows
14 | * Pagination
15 | * Row selection with customizable bulk actions
16 | * Data is fetched from `DataTable.Source` behaviour, usable with custom data sources
17 | * First class Ecto `Source`
18 | * Support for persisting sort/filter state to query string
19 | * Tailwind theme included, but fully customizable
20 |
21 | ```elixir
22 | def render(assigns) do
23 | ~H"""
24 |
27 |
28 | <:col :let={row} name="Id" fields={[:id]} sort_field={:id}>
29 | <%= row.id %>
30 |
31 |
32 | <:col :let={row} name="Name" fields={[:first_name, :last_name]}>
33 | <%= row.first_name <> " " <> row.last_name %>
34 |
35 |
36 |
37 | """
38 | end
39 |
40 | def mount(_params, _session, socket) do
41 | query = DataTable.Ecto.Query.from(
42 | user in MyApp.User,
43 | fields: %{
44 | id: user.id,
45 | first_name: user.first_name,
46 | last_name: user.last_name
47 | },
48 | key: :id
49 | )
50 |
51 | socket = assign(socket, :source_query, query)
52 |
53 | [...]
54 | end
55 | ```
56 |
57 | ## Installation
58 | First you need to add `data_table` to your `mix.exs`:
59 |
60 | ```elixir
61 | defp deps do
62 | [
63 | {:data_table, "~> 1.0"}
64 | ]
65 | end
66 | ```
67 |
68 | If you want to use the default `Tailwind` theme, you need to set up `tailwind` to include styles
69 | from the `data_table` dependency.
70 |
71 | Add this to the `content` list in your `assets/tailwind.js`:
72 | ```js
73 | "../deps/data_table/**/*.*ex"
74 | ```
75 |
--------------------------------------------------------------------------------
/assets/tailwind.css:
--------------------------------------------------------------------------------
1 | .custom-checkbox-check-bg {
2 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
3 | }
4 |
5 | .custom-checkbox-dash-bg {
6 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='9.0708666' height='1.9653543' x='3.4645667' y='7.017323' ry='0.98267716'/%3E%3C/svg%3E");
7 | }
--------------------------------------------------------------------------------
/example/.formatter.exs:
--------------------------------------------------------------------------------
1 | [
2 | import_deps: [:ecto, :ecto_sql, :phoenix],
3 | subdirectories: ["priv/*/migrations"],
4 | plugins: [Phoenix.LiveView.HTMLFormatter],
5 | inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
6 | ]
7 |
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | # The directory Mix will write compiled artifacts to.
2 | /_build/
3 |
4 | # If you run "mix test --cover", coverage assets end up here.
5 | /cover/
6 |
7 | # The directory Mix downloads your dependencies sources to.
8 | /deps/
9 |
10 | # Where 3rd-party dependencies like ExDoc output generated docs.
11 | /doc/
12 |
13 | # Ignore .fetch files in case you like to edit your project deps locally.
14 | /.fetch
15 |
16 | # If the VM crashes, it generates a dump, let's ignore it too.
17 | erl_crash.dump
18 |
19 | # Also ignore archive artifacts (built via "mix archive.build").
20 | *.ez
21 |
22 | # Temporary files, for example, from tests.
23 | /tmp/
24 |
25 | # Ignore package tarball (built via "mix hex.build").
26 | example-*.tar
27 |
28 | # Ignore assets that are produced by build tools.
29 | /priv/static/assets/
30 |
31 | # Ignore digested assets cache.
32 | /priv/static/cache_manifest.json
33 |
34 | # In case you use Node.js/npm, you want to ignore these.
35 | npm-debug.log
36 | /assets/node_modules/
37 |
38 |
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | # Example
2 |
3 | To start your Phoenix server:
4 |
5 | * Run `mix setup` to install and setup dependencies
6 | * Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
7 |
8 | Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
9 |
10 | Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html).
11 |
12 | ## Learn more
13 |
14 | * Official website: https://www.phoenixframework.org/
15 | * Guides: https://hexdocs.pm/phoenix/overview.html
16 | * Docs: https://hexdocs.pm/phoenix
17 | * Forum: https://elixirforum.com/c/phoenix-forum
18 | * Source: https://github.com/phoenixframework/phoenix
19 |
--------------------------------------------------------------------------------
/example/assets/css/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 | @import "../../deps/petal_components/assets/default.css";
3 | @import "../../../assets/tailwind.css";
4 | @import "tailwindcss/components";
5 | @import "tailwindcss/utilities";
6 |
7 | /* This file is for your main application CSS */
8 |
--------------------------------------------------------------------------------
/example/assets/js/app.js:
--------------------------------------------------------------------------------
1 | // If you want to use Phoenix channels, run `mix help phx.gen.channel`
2 | // to get started and then uncomment the line below.
3 | // import "./user_socket.js"
4 |
5 | // You can include dependencies in two ways.
6 | //
7 | // The simplest option is to put them in assets/vendor and
8 | // import them using relative paths:
9 | //
10 | // import "../vendor/some-package.js"
11 | //
12 | // Alternatively, you can `npm install some-package --prefix assets` and import
13 | // them using a path starting with the package name:
14 | //
15 | // import "some-package"
16 | //
17 |
18 | // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
19 | import "phoenix_html"
20 | // Establish Phoenix Socket and LiveView configuration.
21 | import {Socket} from "phoenix"
22 | import {LiveSocket} from "phoenix_live_view"
23 | import topbar from "../vendor/topbar"
24 |
25 | let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
26 | let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
27 |
28 | // Show progress bar on live navigation and form submits
29 | topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
30 | window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
31 | window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
32 |
33 | // connect if there are any LiveViews on the page
34 | liveSocket.connect()
35 |
36 | // expose liveSocket on window for web console debug logs and latency simulation:
37 | // >> liveSocket.enableDebug()
38 | // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
39 | // >> liveSocket.disableLatencySim()
40 | window.liveSocket = liveSocket
41 |
42 |
--------------------------------------------------------------------------------
/example/assets/tailwind.config.js:
--------------------------------------------------------------------------------
1 | // See the Tailwind configuration guide for advanced usage
2 | // https://tailwindcss.com/docs/configuration
3 |
4 | const plugin = require("tailwindcss/plugin")
5 | const colors = require("tailwindcss/colors")
6 | const fs = require("fs")
7 | const path = require("path")
8 |
9 | module.exports = {
10 | content: [
11 | "./js/**/*.js",
12 | "../lib/*_web.ex",
13 | "../lib/*_web/**/*.*ex",
14 | "../../lib/**/*.*ex",
15 | "../deps/petal_components/**/*.*ex"
16 | ],
17 | theme: {
18 | extend: {
19 | colors: {
20 | brand: "#FD4F00",
21 |
22 | primary: colors.blue,
23 | secondary: colors.pink,
24 | success: colors.green,
25 | danger: colors.red,
26 | warning: colors.yellow,
27 | info: colors.sky,
28 |
29 | // Options: slate, gray, zinc, neutral, stone
30 | gray: colors.gray,
31 | }
32 | },
33 | },
34 | plugins: [
35 | require("@tailwindcss/forms"),
36 | // Allows prefixing tailwind classes with LiveView classes to add rules
37 | // only when LiveView classes are applied, for example:
38 | //
39 | //
40 | //
41 | plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
42 | plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
43 | plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
44 | plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
45 | ]
46 | }
47 |
--------------------------------------------------------------------------------
/example/assets/vendor/topbar.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @license MIT
3 | * topbar 2.0.0, 2023-02-04
4 | * https://buunguyen.github.io/topbar
5 | * Copyright (c) 2021 Buu Nguyen
6 | */
7 | (function (window, document) {
8 | "use strict";
9 |
10 | // https://gist.github.com/paulirish/1579671
11 | (function () {
12 | var lastTime = 0;
13 | var vendors = ["ms", "moz", "webkit", "o"];
14 | for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
15 | window.requestAnimationFrame =
16 | window[vendors[x] + "RequestAnimationFrame"];
17 | window.cancelAnimationFrame =
18 | window[vendors[x] + "CancelAnimationFrame"] ||
19 | window[vendors[x] + "CancelRequestAnimationFrame"];
20 | }
21 | if (!window.requestAnimationFrame)
22 | window.requestAnimationFrame = function (callback, element) {
23 | var currTime = new Date().getTime();
24 | var timeToCall = Math.max(0, 16 - (currTime - lastTime));
25 | var id = window.setTimeout(function () {
26 | callback(currTime + timeToCall);
27 | }, timeToCall);
28 | lastTime = currTime + timeToCall;
29 | return id;
30 | };
31 | if (!window.cancelAnimationFrame)
32 | window.cancelAnimationFrame = function (id) {
33 | clearTimeout(id);
34 | };
35 | })();
36 |
37 | var canvas,
38 | currentProgress,
39 | showing,
40 | progressTimerId = null,
41 | fadeTimerId = null,
42 | delayTimerId = null,
43 | addEvent = function (elem, type, handler) {
44 | if (elem.addEventListener) elem.addEventListener(type, handler, false);
45 | else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
46 | else elem["on" + type] = handler;
47 | },
48 | options = {
49 | autoRun: true,
50 | barThickness: 3,
51 | barColors: {
52 | 0: "rgba(26, 188, 156, .9)",
53 | ".25": "rgba(52, 152, 219, .9)",
54 | ".50": "rgba(241, 196, 15, .9)",
55 | ".75": "rgba(230, 126, 34, .9)",
56 | "1.0": "rgba(211, 84, 0, .9)",
57 | },
58 | shadowBlur: 10,
59 | shadowColor: "rgba(0, 0, 0, .6)",
60 | className: null,
61 | },
62 | repaint = function () {
63 | canvas.width = window.innerWidth;
64 | canvas.height = options.barThickness * 5; // need space for shadow
65 |
66 | var ctx = canvas.getContext("2d");
67 | ctx.shadowBlur = options.shadowBlur;
68 | ctx.shadowColor = options.shadowColor;
69 |
70 | var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
71 | for (var stop in options.barColors)
72 | lineGradient.addColorStop(stop, options.barColors[stop]);
73 | ctx.lineWidth = options.barThickness;
74 | ctx.beginPath();
75 | ctx.moveTo(0, options.barThickness / 2);
76 | ctx.lineTo(
77 | Math.ceil(currentProgress * canvas.width),
78 | options.barThickness / 2
79 | );
80 | ctx.strokeStyle = lineGradient;
81 | ctx.stroke();
82 | },
83 | createCanvas = function () {
84 | canvas = document.createElement("canvas");
85 | var style = canvas.style;
86 | style.position = "fixed";
87 | style.top = style.left = style.right = style.margin = style.padding = 0;
88 | style.zIndex = 100001;
89 | style.display = "none";
90 | if (options.className) canvas.classList.add(options.className);
91 | document.body.appendChild(canvas);
92 | addEvent(window, "resize", repaint);
93 | },
94 | topbar = {
95 | config: function (opts) {
96 | for (var key in opts)
97 | if (options.hasOwnProperty(key)) options[key] = opts[key];
98 | },
99 | show: function (delay) {
100 | if (showing) return;
101 | if (delay) {
102 | if (delayTimerId) return;
103 | delayTimerId = setTimeout(() => topbar.show(), delay);
104 | } else {
105 | showing = true;
106 | if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
107 | if (!canvas) createCanvas();
108 | canvas.style.opacity = 1;
109 | canvas.style.display = "block";
110 | topbar.progress(0);
111 | if (options.autoRun) {
112 | (function loop() {
113 | progressTimerId = window.requestAnimationFrame(loop);
114 | topbar.progress(
115 | "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
116 | );
117 | })();
118 | }
119 | }
120 | },
121 | progress: function (to) {
122 | if (typeof to === "undefined") return currentProgress;
123 | if (typeof to === "string") {
124 | to =
125 | (to.indexOf("+") >= 0 || to.indexOf("-") >= 0
126 | ? currentProgress
127 | : 0) + parseFloat(to);
128 | }
129 | currentProgress = to > 1 ? 1 : to;
130 | repaint();
131 | return currentProgress;
132 | },
133 | hide: function () {
134 | clearTimeout(delayTimerId);
135 | delayTimerId = null;
136 | if (!showing) return;
137 | showing = false;
138 | if (progressTimerId != null) {
139 | window.cancelAnimationFrame(progressTimerId);
140 | progressTimerId = null;
141 | }
142 | (function loop() {
143 | if (topbar.progress("+.1") >= 1) {
144 | canvas.style.opacity -= 0.05;
145 | if (canvas.style.opacity <= 0.05) {
146 | canvas.style.display = "none";
147 | fadeTimerId = null;
148 | return;
149 | }
150 | }
151 | fadeTimerId = window.requestAnimationFrame(loop);
152 | })();
153 | },
154 | };
155 |
156 | if (typeof module === "object" && typeof module.exports === "object") {
157 | module.exports = topbar;
158 | } else if (typeof define === "function" && define.amd) {
159 | define(function () {
160 | return topbar;
161 | });
162 | } else {
163 | this.topbar = topbar;
164 | }
165 | }.call(this, window, document));
166 |
--------------------------------------------------------------------------------
/example/config/config.exs:
--------------------------------------------------------------------------------
1 | # This file is responsible for configuring your application
2 | # and its dependencies with the aid of the Config module.
3 | #
4 | # This configuration file is loaded before any dependency and
5 | # is restricted to this project.
6 |
7 | # General application configuration
8 | import Config
9 |
10 | config :example,
11 | ecto_repos: [Example.Repo]
12 |
13 | # Configures the endpoint
14 | config :example, ExampleWeb.Endpoint,
15 | url: [host: "localhost"],
16 | render_errors: [
17 | formats: [html: ExampleWeb.ErrorHTML, json: ExampleWeb.ErrorJSON],
18 | layout: false
19 | ],
20 | pubsub_server: Example.PubSub,
21 | live_view: [signing_salt: "5hEhVJN0"]
22 |
23 | # Configure esbuild (the version is required)
24 | config :esbuild,
25 | version: "0.17.11",
26 | default: [
27 | args:
28 | ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
29 | cd: Path.expand("../assets", __DIR__),
30 | env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
31 | ]
32 |
33 | # Configure tailwind (the version is required)
34 | config :tailwind,
35 | version: "3.2.7",
36 | default: [
37 | args: ~w(
38 | --config=tailwind.config.js
39 | --input=css/app.css
40 | --output=../priv/static/assets/app.css
41 | ),
42 | cd: Path.expand("../assets", __DIR__)
43 | ]
44 |
45 | # Configures Elixir's Logger
46 | config :logger, :console,
47 | format: "$time $metadata[$level] $message\n",
48 | metadata: [:request_id]
49 |
50 | # Use Jason for JSON parsing in Phoenix
51 | config :phoenix, :json_library, Jason
52 |
53 | # Import environment specific config. This must remain at the bottom
54 | # of this file so it overrides the configuration defined above.
55 | import_config "#{config_env()}.exs"
56 |
--------------------------------------------------------------------------------
/example/config/dev.exs:
--------------------------------------------------------------------------------
1 | import Config
2 |
3 | # Configure your database
4 | config :example, Example.Repo,
5 | username: "postgres",
6 | password: "postgres",
7 | hostname: "localhost",
8 | database: "example_dev",
9 | stacktrace: true,
10 | show_sensitive_data_on_connection_error: true,
11 | pool_size: 10
12 |
13 | # For development, we disable any cache and enable
14 | # debugging and code reloading.
15 | #
16 | # The watchers configuration can be used to run external
17 | # watchers to your application. For example, we can use it
18 | # to bundle .js and .css sources.
19 | config :example, ExampleWeb.Endpoint,
20 | # Binding to loopback ipv4 address prevents access from other machines.
21 | # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
22 | http: [ip: {127, 0, 0, 1}, port: 4000],
23 | check_origin: false,
24 | code_reloader: true,
25 | debug_errors: true,
26 | secret_key_base: "0XKUWaOTmFr9Xj+PwIfnsztz3lVxKOd0uJcxpyZBVcRfPX7YKcbkqqplZYDjpldW",
27 | watchers: [
28 | esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
29 | tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
30 | ],
31 | reloadable_apps: [:example, :data_table]
32 |
33 | # ## SSL Support
34 | #
35 | # In order to use HTTPS in development, a self-signed
36 | # certificate can be generated by running the following
37 | # Mix task:
38 | #
39 | # mix phx.gen.cert
40 | #
41 | # Run `mix help phx.gen.cert` for more information.
42 | #
43 | # The `http:` config above can be replaced with:
44 | #
45 | # https: [
46 | # port: 4001,
47 | # cipher_suite: :strong,
48 | # keyfile: "priv/cert/selfsigned_key.pem",
49 | # certfile: "priv/cert/selfsigned.pem"
50 | # ],
51 | #
52 | # If desired, both `http:` and `https:` keys can be
53 | # configured to run both http and https servers on
54 | # different ports.
55 |
56 | # Watch static and templates for browser reloading.
57 | config :example, ExampleWeb.Endpoint,
58 | live_reload: [
59 | patterns: [
60 | ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
61 | ~r"lib/example_web/(controllers|live|components)/.*(ex|heex)$",
62 | ~r"../lib/data_table/(tailwind_theme|components|filters).ex"
63 | ]
64 | ]
65 |
66 | # Enable dev routes for dashboard and mailbox
67 | config :example, dev_routes: true
68 |
69 | # Do not include metadata nor timestamps in development logs
70 | config :logger, :console, format: "[$level] $message\n"
71 |
72 | # Set a higher stacktrace during development. Avoid configuring such
73 | # in production as building large stacktraces may be expensive.
74 | config :phoenix, :stacktrace_depth, 20
75 |
76 | # Initialize plugs at runtime for faster development compilation
77 | config :phoenix, :plug_init_mode, :runtime
78 |
--------------------------------------------------------------------------------
/example/config/prod.exs:
--------------------------------------------------------------------------------
1 | import Config
2 |
3 | # Note we also include the path to a cache manifest
4 | # containing the digested version of static files. This
5 | # manifest is generated by the `mix assets.deploy` task,
6 | # which you should run after static files are built and
7 | # before starting your production server.
8 | config :example, ExampleWeb.Endpoint, cache_static_manifest: "priv/static/cache_manifest.json"
9 |
10 | # Do not print debug messages in production
11 | config :logger, level: :info
12 |
13 | # Runtime production configuration, including reading
14 | # of environment variables, is done on config/runtime.exs.
15 |
--------------------------------------------------------------------------------
/example/config/runtime.exs:
--------------------------------------------------------------------------------
1 | import Config
2 |
3 | # config/runtime.exs is executed for all environments, including
4 | # during releases. It is executed after compilation and before the
5 | # system starts, so it is typically used to load production configuration
6 | # and secrets from environment variables or elsewhere. Do not define
7 | # any compile-time configuration in here, as it won't be applied.
8 | # The block below contains prod specific runtime configuration.
9 |
10 | # ## Using releases
11 | #
12 | # If you use `mix release`, you need to explicitly enable the server
13 | # by passing the PHX_SERVER=true when you start it:
14 | #
15 | # PHX_SERVER=true bin/example start
16 | #
17 | # Alternatively, you can use `mix phx.gen.release` to generate a `bin/server`
18 | # script that automatically sets the env var above.
19 | if System.get_env("PHX_SERVER") do
20 | config :example, ExampleWeb.Endpoint, server: true
21 | end
22 |
23 | if config_env() == :prod do
24 | database_url =
25 | System.get_env("DATABASE_URL") ||
26 | raise """
27 | environment variable DATABASE_URL is missing.
28 | For example: ecto://USER:PASS@HOST/DATABASE
29 | """
30 |
31 | maybe_ipv6 = if System.get_env("ECTO_IPV6") in ~w(true 1), do: [:inet6], else: []
32 |
33 | config :example, Example.Repo,
34 | # ssl: true,
35 | url: database_url,
36 | pool_size: String.to_integer(System.get_env("POOL_SIZE") || "10"),
37 | socket_options: maybe_ipv6
38 |
39 | # The secret key base is used to sign/encrypt cookies and other secrets.
40 | # A default value is used in config/dev.exs and config/test.exs but you
41 | # want to use a different value for prod and you most likely don't want
42 | # to check this value into version control, so we use an environment
43 | # variable instead.
44 | secret_key_base =
45 | System.get_env("SECRET_KEY_BASE") ||
46 | raise """
47 | environment variable SECRET_KEY_BASE is missing.
48 | You can generate one by calling: mix phx.gen.secret
49 | """
50 |
51 | host = System.get_env("PHX_HOST") || "example.com"
52 | port = String.to_integer(System.get_env("PORT") || "4000")
53 |
54 | config :example, ExampleWeb.Endpoint,
55 | url: [host: host, port: 443, scheme: "https"],
56 | http: [
57 | # Enable IPv6 and bind on all interfaces.
58 | # Set it to {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.
59 | # See the documentation on https://hexdocs.pm/plug_cowboy/Plug.Cowboy.html
60 | # for details about using IPv6 vs IPv4 and loopback vs public addresses.
61 | ip: {0, 0, 0, 0, 0, 0, 0, 0},
62 | port: port
63 | ],
64 | secret_key_base: secret_key_base
65 |
66 | # ## SSL Support
67 | #
68 | # To get SSL working, you will need to add the `https` key
69 | # to your endpoint configuration:
70 | #
71 | # config :example, ExampleWeb.Endpoint,
72 | # https: [
73 | # ...,
74 | # port: 443,
75 | # cipher_suite: :strong,
76 | # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
77 | # certfile: System.get_env("SOME_APP_SSL_CERT_PATH")
78 | # ]
79 | #
80 | # The `cipher_suite` is set to `:strong` to support only the
81 | # latest and more secure SSL ciphers. This means old browsers
82 | # and clients may not be supported. You can set it to
83 | # `:compatible` for wider support.
84 | #
85 | # `:keyfile` and `:certfile` expect an absolute path to the key
86 | # and cert in disk or a relative path inside priv, for example
87 | # "priv/ssl/server.key". For all supported SSL configuration
88 | # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
89 | #
90 | # We also recommend setting `force_ssl` in your endpoint, ensuring
91 | # no data is ever sent via http, always redirecting to https:
92 | #
93 | # config :example, ExampleWeb.Endpoint,
94 | # force_ssl: [hsts: true]
95 | #
96 | # Check `Plug.SSL` for all available options in `force_ssl`.
97 | end
98 |
--------------------------------------------------------------------------------
/example/config/test.exs:
--------------------------------------------------------------------------------
1 | import Config
2 |
3 | # Configure your database
4 | #
5 | # The MIX_TEST_PARTITION environment variable can be used
6 | # to provide built-in test partitioning in CI environment.
7 | # Run `mix help test` for more information.
8 | config :example, Example.Repo,
9 | username: "postgres",
10 | password: "postgres",
11 | hostname: "localhost",
12 | database: "example_test#{System.get_env("MIX_TEST_PARTITION")}",
13 | pool: Ecto.Adapters.SQL.Sandbox,
14 | pool_size: 10
15 |
16 | # We don't run a server during test. If one is required,
17 | # you can enable the server option below.
18 | config :example, ExampleWeb.Endpoint,
19 | http: [ip: {127, 0, 0, 1}, port: 4002],
20 | secret_key_base: "tgE3lrRgBp1S8A2UI5UuallUF+wdkZMRlDzgNOs1pZBxdN6X7ItVbpICIzljwfDn",
21 | server: false
22 |
23 | # Print only warnings and errors during test
24 | config :logger, level: :warning
25 |
26 | # Initialize plugs at runtime for faster test compilation
27 | config :phoenix, :plug_init_mode, :runtime
28 |
--------------------------------------------------------------------------------
/example/lib/example.ex:
--------------------------------------------------------------------------------
1 | defmodule Example do
2 | @moduledoc """
3 | Example keeps the contexts that define your domain
4 | and business logic.
5 |
6 | Contexts are also responsible for managing your data, regardless
7 | if it comes from the database, an external API or others.
8 | """
9 | end
10 |
--------------------------------------------------------------------------------
/example/lib/example/application.ex:
--------------------------------------------------------------------------------
1 | defmodule Example.Application do
2 | # See https://hexdocs.pm/elixir/Application.html
3 | # for more information on OTP Applications
4 | @moduledoc false
5 |
6 | use Application
7 |
8 | @impl true
9 | def start(_type, _args) do
10 | children = [
11 | # Start the Telemetry supervisor
12 | ExampleWeb.Telemetry,
13 | # Start the Ecto repository
14 | Example.Repo,
15 | # Start the PubSub system
16 | {Phoenix.PubSub, name: Example.PubSub},
17 | # Start the Endpoint (http/https)
18 | ExampleWeb.Endpoint
19 | # Start a worker by calling: Example.Worker.start_link(arg)
20 | # {Example.Worker, arg}
21 | ]
22 |
23 | # See https://hexdocs.pm/elixir/Supervisor.html
24 | # for other strategies and supported options
25 | opts = [strategy: :one_for_one, name: Example.Supervisor]
26 | Supervisor.start_link(children, opts)
27 | end
28 |
29 | # Tell Phoenix to update the endpoint configuration
30 | # whenever the application is updated.
31 | @impl true
32 | def config_change(changed, _new, removed) do
33 | ExampleWeb.Endpoint.config_change(changed, removed)
34 | :ok
35 | end
36 | end
37 |
--------------------------------------------------------------------------------
/example/lib/example/model/article.ex:
--------------------------------------------------------------------------------
1 | defmodule Example.Model.Article do
2 | use Ecto.Schema
3 |
4 | schema "articles" do
5 | field :title, :string
6 | field :body, :string
7 | end
8 | end
9 |
--------------------------------------------------------------------------------
/example/lib/example/repo.ex:
--------------------------------------------------------------------------------
1 | defmodule Example.Repo do
2 | use Ecto.Repo,
3 | otp_app: :example,
4 | adapter: Ecto.Adapters.Postgres
5 | end
6 |
--------------------------------------------------------------------------------
/example/lib/example_web.ex:
--------------------------------------------------------------------------------
1 | defmodule ExampleWeb do
2 | @moduledoc """
3 | The entrypoint for defining your web interface, such
4 | as controllers, components, channels, and so on.
5 |
6 | This can be used in your application as:
7 |
8 | use ExampleWeb, :controller
9 | use ExampleWeb, :html
10 |
11 | The definitions below will be executed for every controller,
12 | component, etc, so keep them short and clean, focused
13 | on imports, uses and aliases.
14 |
15 | Do NOT define functions inside the quoted expressions
16 | below. Instead, define additional modules and import
17 | those modules here.
18 | """
19 |
20 | def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
21 |
22 | def router do
23 | quote do
24 | use Phoenix.Router, helpers: false
25 |
26 | # Import common connection and controller functions to use in pipelines
27 | import Plug.Conn
28 | import Phoenix.Controller
29 | import Phoenix.LiveView.Router
30 | end
31 | end
32 |
33 | def channel do
34 | quote do
35 | use Phoenix.Channel
36 | end
37 | end
38 |
39 | def controller do
40 | quote do
41 | use Phoenix.Controller,
42 | formats: [:html, :json],
43 | layouts: [html: ExampleWeb.Layouts]
44 |
45 | import Plug.Conn
46 |
47 | unquote(verified_routes())
48 | end
49 | end
50 |
51 | def live_view do
52 | quote do
53 | use Phoenix.LiveView,
54 | layout: {ExampleWeb.Layouts, :app}
55 |
56 | unquote(html_helpers())
57 | end
58 | end
59 |
60 | def live_component do
61 | quote do
62 | use Phoenix.LiveComponent
63 |
64 | unquote(html_helpers())
65 | end
66 | end
67 |
68 | def html do
69 | quote do
70 | use Phoenix.Component
71 |
72 | # Import convenience functions from controllers
73 | import Phoenix.Controller,
74 | only: [get_csrf_token: 0, view_module: 1, view_template: 1]
75 |
76 | # Include general helpers for rendering HTML
77 | unquote(html_helpers())
78 | end
79 | end
80 |
81 | defp html_helpers do
82 | quote do
83 | # HTML escaping functionality
84 | import Phoenix.HTML
85 | # Core UI components and translation
86 | #import ExampleWeb.CoreComponents
87 |
88 | # Shortcut for generating JS commands
89 | alias Phoenix.LiveView.JS
90 |
91 | # Routes generation with the ~p sigil
92 | unquote(verified_routes())
93 | end
94 | end
95 |
96 | def verified_routes do
97 | quote do
98 | use Phoenix.VerifiedRoutes,
99 | endpoint: ExampleWeb.Endpoint,
100 | router: ExampleWeb.Router,
101 | statics: ExampleWeb.static_paths()
102 | end
103 | end
104 |
105 | @doc """
106 | When used, dispatch to the appropriate controller/view/etc.
107 | """
108 | defmacro __using__(which) when is_atom(which) do
109 | apply(__MODULE__, which, [])
110 | end
111 | end
112 |
--------------------------------------------------------------------------------
/example/lib/example_web/components/layouts.ex:
--------------------------------------------------------------------------------
1 | defmodule ExampleWeb.Layouts do
2 | use ExampleWeb, :html
3 |
4 | embed_templates "layouts/*"
5 | end
6 |
--------------------------------------------------------------------------------
/example/lib/example_web/components/layouts/app.html.heex:
--------------------------------------------------------------------------------
1 |
2 |
![]({~p"/images/logo.svg"})
6 |
7 |