Skip to content

Commit

Permalink
fix: #834
Browse files Browse the repository at this point in the history
  • Loading branch information
@saadeghi
saadeghi committed Oct 29, 2022
1 parent b96415b commit aa6e812
Show file tree
Hide file tree
Showing 7 changed files with 360 additions and 6 deletions.
96 changes: 96 additions & 0 deletions src/components/styled/file-input.css
View file
@@ -0,0 +1,96 @@
.file-input {
@apply border border-base-content border-opacity-0 bg-base-100 rounded-btn text-base;
&::file-selector-button {
@apply font-semibold uppercase no-underline border-neutral bg-neutral text-neutral-content;
border-width: var(--border-btn, 1px);
animation: button-pop var(--animation-btn, 0.25s) ease-out;
text-transform: var(--btn-text-case, uppercase);
}
&-bordered {
@apply border-opacity-20;
}
&:focus {
outline: 2px solid hsla(var(--bc) / 0.2);
outline-offset: 2px;
}
&-ghost {
@apply bg-opacity-5;
&:focus {
@apply bg-opacity-100 text-base-content;
box-shadow: none;
}
&::file-selector-button {
@apply border border-transparent bg-transparent text-current;
}
}
&-primary {
@apply border-primary;
&:focus {
outline: 2px solid hsl(var(--p));
}
&::file-selector-button {
@apply border-primary bg-primary text-primary-content;
}
}
&-secondary {
@apply border-secondary;
&:focus {
outline: 2px solid hsl(var(--s));
}
&::file-selector-button {
@apply border-secondary bg-secondary text-secondary-content;
}
}
&-accent {
@apply border-accent;
&:focus {
outline: 2px solid hsl(var(--a));
}
&::file-selector-button {
@apply border-accent bg-accent text-accent-content;
}
}
&-info {
@apply border-info;
&:focus {
outline: 2px solid hsl(var(--in));
}
&::file-selector-button {
@apply border-info bg-info text-info-content;
}
}
&-success {
@apply border-success;
&:focus {
outline: 2px solid hsl(var(--su));
}
&::file-selector-button {
@apply border-success bg-success text-success-content;
}
}
&-warning {
@apply border-warning;
&:focus {
outline: 2px solid hsl(var(--wa));
}
&::file-selector-button {
@apply border-warning bg-warning text-warning-content;
}
}
&-error {
@apply border-error;
&:focus {
outline: 2px solid hsl(var(--er));
}
&::file-selector-button {
@apply border-error bg-error text-error-content;
}
}
&-disabled,
&[disabled] {
@apply cursor-not-allowed border-base-200 bg-base-200 text-opacity-20 placeholder-base-content placeholder-opacity-20;
&::file-selector-button {
@apply border-opacity-0 bg-neutral bg-opacity-20 text-base-content text-opacity-20;
}
}
}
7 changes: 7 additions & 0 deletions src/components/unstyled/file-input.css
View file
@@ -0,0 +1,7 @@
.file-input {
@apply flex-shrink transition duration-200 ease-in-out h-12 pr-4 text-sm leading-loose;
&::file-selector-button {
@apply inline-flex flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center border-transparent text-center transition duration-200 ease-in-out h-[2.875rem] px-4 text-sm min-h-[2.875rem] mr-4;
line-height: 1em;
}
}
13 changes: 10 additions & 3 deletions src/docs/src/lib/data.js
View file
Expand Up @@ -455,9 +455,9 @@ export let pages = [
badge: "",
},
{
name: "Text input",
tags: "text input",
href: "/components/input",
name: "File input",
tags: "file upload",
href: "/components/file-input",
icon: "",
badge: "",
},
Expand Down Expand Up @@ -489,6 +489,13 @@ export let pages = [
icon: "",
badge: "",
},
{
name: "Text input",
tags: "text input",
href: "/components/input",
icon: "",
badge: "",
},
{
name: "Textarea",
tags: "textarea",
Expand Down
214 changes: 214 additions & 0 deletions src/docs/src/routes/components/file-input.svelte.md
View file
@@ -0,0 +1,214 @@
---
title: File Input
desc: File Input is a an input field for uploading files.
published: true
---

<script>
import Component from "@components/Component.svelte"
import ClassTable from "@components/ClassTable.svelte"
import { prefix } from '$lib/stores';
import { replace } from '$lib/actions';
</script>

<ClassTable
data="{[
{ type:'component', class: 'form-control', desc: 'Container element' },
{ type:'component', class: 'label', desc: 'For helper text' },
{ type:'component', class: 'file-input', desc: 'For <input> element' },
{ type:'modifier', class: 'file-input-bordered', desc: 'Adds border to input' },
{ type:'modifier', class: 'file-input-ghost', desc: 'Adds ghost style to input' },
{ type:'modifier', class: 'file-input-primary', desc: 'Adds `primary` color to input' },
{ type:'modifier', class: 'file-input-secondary', desc: 'Adds `secondary` color to input' },
{ type:'modifier', class: 'file-input-accent', desc: 'Adds `accent` color to input' },
{ type:'modifier', class: 'file-input-info', desc: 'Adds `info` color to input' },
{ type:'modifier', class: 'file-input-success', desc: 'Adds `success` color to input' },
{ type:'modifier', class: 'file-input-warning', desc: 'Adds `warning` color to input' },
{ type:'modifier', class: 'file-input-error', desc: 'Adds `error` color to input' },
{ type:'responsive', class: 'file-input-lg', desc: 'Large size for input' },
{ type:'responsive', class: 'file-input-md', desc: 'Medium (default) size for input' },
{ type:'responsive', class: 'file-input-sm', desc: 'Small size for input' },
{ type:'responsive', class: 'file-input-xs', desc: 'Extra small size for input' },
]}"
/>

<Component title="File input">
<input type="file" class="file-input w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input w-full max-w-xs" />`
}</pre>
</Component>

<Component title="File input with border">
<input type="file" class="file-input file-input-bordered w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input $$file-input-bordered w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input $$file-input-bordered w-full max-w-xs" />`
}</pre>
</Component>

<Component title="Ghost (no background)">
<input type="file" class="file-input file-input-ghost w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input $$file-input-ghost w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input $$file-input-ghost w-full max-w-xs" />`
}</pre>
</Component>

<Component title="With form-control and labels">
<div class="form-control w-full max-w-xs">
<label class="label">
<span class="label-text">Pick a file</span>
<span class="label-text-alt">Alt label</span>
</label>
<input type="file" class="file-input file-input-bordered w-full max-w-xs" />
<label class="label">
<span class="label-text-alt">Alt label</span>
<span class="label-text-alt">Alt label</span>
</label>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$form-control w-full max-w-xs">
<label class="$$label">
<span class="$$label-text">Pick a file</span>
<span class="$$label-text-alt">Alt label</span>
</label>
<input type="file" class="$$file-input $$file-input-bordered w-full max-w-xs" />
<label class="$$label">
<span class="$$label-text-alt">Alt label</span>
<span class="$$label-text-alt">Alt label</span>
</label>
</div>`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<div className="$$form-control w-full max-w-xs">
<label className="$$label">
<span className="$$label-text">Pick a file</span>
<span className="$$label-text-alt">Alt label</span>
</label>
<input type="file" className="$$file-input $$file-input-bordered w-full max-w-xs" />
<label className="$$label">
<span className="$$label-text-alt">Alt label</span>
<span className="$$label-text-alt">Alt label</span>
</label>
</div>`
}</pre>
</Component>

<Component title="Primary color">
<input type="file" class="file-input file-input-bordered file-input-primary w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input $$file-input-bordered $$file-input-primary w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input $$file-input-bordered $$file-input-primary w-full max-w-xs" />`
}</pre>
</Component>

<Component title="Secondary color">
<input type="file" class="file-input file-input-bordered file-input-secondary w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input $$file-input-bordered $$file-input-secondary w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input $$file-input-bordered $$file-input-secondary w-full max-w-xs" />`
}</pre>
</Component>

<Component title="Accent color">
<input type="file" class="file-input file-input-bordered file-input-accent w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input $$file-input-bordered $$file-input-accent w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input $$file-input-bordered $$file-input-accent w-full max-w-xs" />`
}</pre>
</Component>

<Component title="Info color">
<input type="file" class="file-input file-input-bordered file-input-info w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input $$file-input-bordered $$file-input-info w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input $$file-input-bordered $$file-input-info w-full max-w-xs" />`
}</pre>
</Component>

<Component title="Success color">
<input type="file" class="file-input file-input-bordered file-input-success w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input $$file-input-bordered $$file-input-success w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input $$file-input-bordered $$file-input-success w-full max-w-xs" />`
}</pre>
</Component>

<Component title="Warning color">
<input type="file" class="file-input file-input-bordered file-input-warning w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input $$file-input-bordered $$file-input-warning w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input $$file-input-bordered $$file-input-warning w-full max-w-xs" />`
}</pre>
</Component>

<Component title="Error color">
<input type="file" class="file-input file-input-bordered file-input-error w-full max-w-xs" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" class="$$file-input $$file-input-bordered $$file-input-error w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" className="$$file-input $$file-input-bordered $$file-input-error w-full max-w-xs" />`
}</pre>
</Component>

<Component title="Sizes">
<div class="flex flex-col gap-4 w-full items-center">
<input type="file" class="file-input file-input-bordered file-input-xs w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-sm w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-md w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-lg w-full max-w-xs" />
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`
<!-- xs -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-xs w-full max-w-xs" />
<!-- sm -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-sm w-full max-w-xs" />
<!-- md -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-md w-full max-w-xs" />
<!-- lg -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-lg w-full max-w-xs" />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`
<!-- xs -->
<input type="file" className="$$file-input $$file-input-bordered $$file-input-xs w-full max-w-xs" />
<!-- sm -->
<input type="file" className="$$file-input $$file-input-bordered $$file-input-sm w-full max-w-xs" />
<!-- md -->
<input type="file" className="$$file-input $$file-input-bordered $$file-input-md w-full max-w-xs" />
<!-- lg -->
<input type="file" className="$$file-input $$file-input-bordered $$file-input-lg w-full max-w-xs" />`
}</pre>
</Component>

<Component title="Disabled">
<input type="file" placeholder="You can't touch this" class="file-input file-input-bordered w-full max-w-xs" disabled />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="file" placeholder="You can't touch this" class="$$file-input $$file-input-bordered w-full max-w-xs" disabled />`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<input type="file" placeholder="You can't touch this" className="$$file-input $$file-input-bordered w-full max-w-xs" disabled />`
}</pre>
</Component>
Binary file added src/docs/static/images/components/file-input.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions src/utilities/unstyled/file-input.css
View file
@@ -0,0 +1,30 @@
.file-input {
&-xs {
@apply pr-2 text-xs leading-relaxed h-6;
&::file-selector-button {
@apply mr-2 h-[1.375rem] min-h-[1.375rem];
font-size: 0.75rem;
}
}
&-sm {
@apply pr-3 text-sm leading-8 h-8;
&::file-selector-button {
@apply mr-3 h-[1.875rem] min-h-[1.875rem];
font-size: 0.875rem;
}
}
&-md {
@apply pr-4 text-sm leading-loose h-12;
&::file-selector-button {
@apply mr-4 h-[2.875rem] min-h-[2.875rem];
font-size: 0.875rem;
}
}
&-lg {
@apply pr-6 text-lg leading-loose h-16;
&::file-selector-button {
@apply mr-6 h-[3.875rem] min-h-[3.875rem];
font-size: 1.125rem;
}
}
}
6 changes: 3 additions & 3 deletions src/utilities/unstyled/input.css
View file
@@ -1,4 +1,7 @@
.input {
&-xs {
@apply h-6 px-2 text-xs leading-relaxed;
}
&-md {
@apply h-12 px-4 text-sm leading-loose;
}
Expand All @@ -8,7 +11,4 @@
&-sm {
@apply h-8 px-3 text-sm leading-8;
}
&-xs {
@apply h-6 px-2 text-xs leading-relaxed;
}
}

0 comments on commit aa6e812

Please sign in to comment.