surface-ui / surface_bootstrap Goto Github PK

View Code? Open in Web Editor NEW

17.0 7.0 9.0 1.07 MB

License: MIT License

Elixir 87.37% SCSS 0.98% CSS 8.10% JavaScript 3.55%

surface_bootstrap's Introduction

SurfaceBootstrap

A set of simple Surface components based on Bootstrap.

Hex.pm: Here

Components

All Form Inputs
ButtonGroup
Button
Card
Container
DropDown (requires Bootstrap Native JS)
Icon
Modal (requires Bootstrap Native JS)
NavBar
Table
Table.Column
Tabs

Example

<Table id="foo" data={{ person <- @persons }}>
  <Column width="2" label="Id" sort_by="id">
    {{ person.id }}
  </Column>
  <Column width="10" label="Name" sort_by="name">
    {{ person.name }}
  </Column>
</Table>

Usage

Add surface_bootstrap to the list of dependencies in mix.exs:

def deps do
  [
    ...
    {:surface_bootstrap, "~> 0.1.0"}
  ]
end

The components self-register hooks and compile to folder _hooks/. This location is configureable through for example: config :surface, :compiler, hooks_output_dir: "assets/js/surface".

Javascript component hooks

The hooks are for the "(requires Bootstrap Native JS)" marked components above. If you do not want to use Modal or DropDown, simply skip this section.

Start by adding "bootstrap.native": "^3.0.14-f", to dependencies in package.json in assets/
Then do the following somewhere in your app.js

//Import hooks from Surface compiler
import hooks from "./_hooks"

Configure your LiveSocket as such:

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: hooks,
  dom: {
    onBeforeElUpdated(from, to) {
      if (from.isEqualNode(to)) {
        return false
      }

      if (from.dataset.bsnclass != undefined && from.dataset.bsnclass != "") {
        const classes = from.dataset.bsnclass.split(" ");
        classes.forEach(element => {
          if (!to.classList.contains(element)) {
            to.classList.add(element);
          }
        });

      }
      if (from.dataset.bsnstyle == "") {
        to.setAttribute("style", from.getAttribute("style"));
      }
      return to;
    }
  }
})

If you have hooks from before, remember to merge the hooks object from Surface with your own hooks before assigning to socket. Also add your own morphdom changes as needed, but remember to return to; so the changes are saved.

To use Bootstraps's CSS styles, choose one of the following methods:

1. Using CDN or downloading files

Add the following line to your layout_view.ex:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

Or download the .css file and manually add it to your priv/static/css folder. In this case, add the following line to your layout_view.ex:

<link rel="stylesheet" href={{ Routes.static_path(@conn, "/css/bootstrap.min.css") }} />

You can download the css from here: https://getbootstrap.com/docs/5.0/getting-started/download/

2. NPM or Yarn

Add bootstrap to the list of dependencies in assets/package.json:

"dependencies": {
  ...
  "bootstrap": "5.0.0-beta3"
}

License

SurfaceBootstrap source code is licensed under the MIT License.

surface_bootstrap's People

Contributors

Stargazers

Watchers

Forkers

dustinfarris mbuhot joerichsen davydog187 dolphorama escobera forest dclausen schnittchen

surface_bootstrap's Issues

Toast as a flash message

Firstly, thanks for a great library. This does reduce the entry barrier for anyone who wants to implement Surface Components inside Phoenix LiveView.
Do you have any plans to implement bootstrap toast message as the flash message component?
I tried, multiple ways to implement toast inside LiveView - but - could not resolve the problem. In a regular Phoenix View, I could make it work. However, inside a LiveView, I could not implement the auto disappearing toast message synchronize with lv:clear-flash event?
I ventured to ask because I saw that you are using bootstrap native - and - handling the javascript in hooks. Just wanted to know if there is a solution.

Bump Ecto version?

I just started a new project with mix phx.new and tried to add surface_bootstrap. When I run mix deps.get, it fails because ecto version 3.5.5 is required by surface_bootstrap, but ecto version 3.6.1 was installed by the phx.new generator. Is there anything holding surface_bootstrap back from this version bump?

Also, I should note that this isn't really an "issue" that blocks use of the library. If you start fresh by removing the deps directory and mix.lock, mix deps.get succeeds with no issue.

Mostly, I'm just curious if there are any compatibility issues or blockers. No rush here. Feel free to close without a proper answer too. I maybe should have asked on Slack instead.

Modal broken with 4.* bootstrap.native JS, works fine with 3.*

New BSN javascript breaks modals.
I will implement a rudimentary logic in native js as a temporary stopgap with the following features:

show
hide
close other open modals when showing new modal
global listeners for escape button
click outside modal to close

Button seems broken in 0.2.3

Hi there @olivermt, I'm getting

02:21:27.286 [error] #PID<0.1031.0> running Surface.Catalogue.Server.Endpoint (connection #PID<0.944.0>, stream id 4) terminated
Server: localhost:4001 (http)
Request: GET /examples/SurfaceBootstrap.Catalogue.Button.Example04?__window_id__=CE86ED905FF107321E45360D07B287C0
** (exit) an exception was raised:
    ** (FunctionClauseError) no function clause matching in Keyword.get/3
        (elixir 1.11.3) lib/keyword.ex:218: Keyword.get(%{__changed__: %{__context__: true, __surface__: true, aria_disabled: true, aria_hidden: true, aria_label: true, breakpoint: true, class: true, default: true, flash: true, id: true, inner_block: true}, __context__: %{}, __surface__: %{provided_templates: [:default], slots: %{default: %{size: 1}}}, aria_disabled: nil, aria_hidden: nil, aria_label: nil, breakpoint: nil, class: [], default: [%{}], flash: %{}, id: nil, inner_block: #Function<1.36278796/2 in SurfaceBootstrap.Catalogue.Button.Example04.render/1>, socket: #Phoenix.LiveView.Socket<assigns: #Phoenix.LiveView.Socket.AssignsNotInSocket<>, changed: %{__context__: true, __surface__: true, aria_disabled: true, aria_hidden: true, aria_label: true, breakpoint: true, class: true, ...}, endpoint: Surface.Catalogue.Server.Endpoint, id: "example", parent_pid: #PID<0.1031.0>, root_pid: nil, router: Surface.Catalogue.Server.Router, transport_pid: nil, view: SurfaceBootstrap.Catalogue.Button.Example04, ...>}, :disabled, nil)
        (surface_bootstrap 0.2.3) lib/surface_bootstrap/container.ex:8: anonymous fn/3 in SurfaceBootstrap.Container.set_aria_base_attrs/1
        (elixir 1.11.3) lib/enum.ex:2193: Enum."-reduce/3-lists^foldl/2-0-"/3
        (surface_bootstrap 0.2.3) lib/surface_bootstrap/container.ex:24: anonymous fn/2 in SurfaceBootstrap.Container.render/1
        (phoenix_live_view 0.15.7) lib/phoenix_live_view/diff.ex:356: Phoenix.LiveView.Diff.traverse/6
        (phoenix_live_view 0.15.7) lib/phoenix_live_view/diff.ex:430: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/6
        (elixir 1.11.3) lib/enum.ex:2193: Enum."-reduce/3-lists^foldl/2-0-"/3
        (phoenix_live_view 0.15.7) lib/phoenix_live_view/diff.ex:356: Phoenix.LiveView.Diff.traverse/6

when trying to access the button examples in the catalogue as well as in my app. It seems to have been introduced in 44360f7 and is probably related to trying to access assignswhich is a map using Keyword.get, but I don't think I can propose a fix here since I'm still new to this codebase.