Packages
moon
2.73.1
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/components/file_input.ex
defmodule Moon.Components.FileInput.ListOfFiles do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.ProgressLinear
prop(conf, :any)
prop(cancel_upload, :event)
def render(assigns) do
~F"""
<div>
{#for entry <- @conf.entries}
<div class="flex gap-2 bg-gohan p-2 rounded align-middle">
<div class="overflow-hidden" style="max-width: 50px"><.live_img_preview entry={entry} width="100" /></div>
<div class="w-full">{entry.client_name} ({get_size(entry.client_size)} KB)</div>
<div style="width: 300px"><ProgressLinear value={entry.progress} /></div>
<div><div :on-click={@cancel_upload} :values={ref: entry.ref} aria-label="cancel"><Moon.Icons.ControlsClose /></div></div>
</div>
<div>
{#for err <- upload_errors(@conf, entry)}
<p class="alert alert-danger">{inspect(err)}</p>
{/for}
</div>
{/for}
</div>
"""
end
def get_size(bytes) do
trunc(bytes / 1024)
end
end
defmodule Moon.Components.FileInput do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Assets.Icons.IconUpload
alias Moon.Components.Button
alias __MODULE__.ListOfFiles
prop(label, :string)
prop(placeholder, :string, default: "Choose file...")
prop(conf, :any)
prop(error, :boolean, default: false)
prop(cancel_upload, :event)
slot(default)
def render(assigns) do
~F"""
<div class="relative">
<.live_file_input upload={@conf} class="opacity-0 absolute top-0 right-0 h-full w-full z-30" />
<span :if={@label} class="block mb-2">{@label}</span>
{#if slot_assigned?(:default)}
<#slot {@default} />
{/if}
{#if !slot_assigned?(:default)}
<Button class="z-20" full_width>
{@placeholder}
<:right_icon_slot><IconUpload /></:right_icon_slot>
</Button>
<ListOfFiles {=@conf} {=@cancel_upload} />
{/if}
</div>
"""
end
end