Skip to content

Commit

Permalink
feat(InputFile): config redesign and implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 7, 2023
1 parent 80b45fb commit 82e4ea0
Show file tree
Hide file tree
Showing 7 changed files with 268 additions and 109 deletions.
141 changes: 114 additions & 27 deletions src/plugins/components/input-file/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,109 +15,196 @@ export default plugin.withOptions(
const config = theme(`shurikenUi.${key}`) satisfies InputFileConfig

addComponents({
//Wrapper
[`.${prefix}input-file`]: {
[`@apply relative block ${prefix}focus`]: {},

//Variant:drop
[`&.${prefix}input-file-drop`]: {
[`@apply relative h-${config.drop.size} border-dashed border-2 border-${config.drop.border} dark:border-${config.drop.borderDark} hover:border-${config.drop.borderHover} dark:hover:border-${config.drop.borderHoverDark} bg-${config.drop.bg} dark:bg-${config.drop.bgDark} flex justify-center items-center transition-colors duration-${config.drop.duration}`]:
[`@apply relative h-${config.drop.height} flex justify-center items-center`]:
{},
//Background
[`@apply bg-${config.drop.background.light} dark:bg-${config.drop.background.dark}`]:
{},
//Border
[`@apply border-2 border-dashed border-${config.drop.border.base.light} dark:border-${config.drop.border.base.light}`]:
{},
//Border:hover
[`@apply hover:border-${config.drop.border.hover.light} dark:hover:border-${config.drop.border.hover.dark}`]:
{},
//Transition
[`@apply transition-${config.drop.transition.property} duration-${config.drop.transition.duration}`]:
{},
//Drop:inner
[`.${prefix}drop-area-inner`]: {
[`@apply absolute z-10`]: {},
},
//Drop:zone
[`.${prefix}drop-zone`]: {
[`@apply flex flex-col items-center font-${config.drop.zone.font} text-${config.drop.zone.text}`]:
[`@apply flex flex-col items-center font-${config.drop.zone.font.family} text-${config.drop.zone.font.size}`]:
{},
},
//Zone:icon
[`.${prefix}drop-zone-icon`]: {
[`@apply w-${config.drop.zoneIcon.size} h-${config.drop.zoneIcon.size} mb-2 transition-colors duration-${config.drop.zoneIcon.duration}`]:
//Base
[`@apply w-${config.drop.zone.icon.size} h-${config.drop.zone.icon.size} mb-2`]:
{},
//Color
[`@apply text-${config.drop.zone.font.color.base.light} dark:text-${config.drop.zone.font.color.base.dark}`]:
{},
//Transition
[`@apply transition-${config.drop.zone.icon.transition.property} duration-${config.drop.zone.icon.transition.duration}`]:
{},
},
//Zone:text
[`.${prefix}drop-zone-text`]: {
[`@apply block font-${config.drop.zoneText.font} font-${config.drop.zoneText.fontWeight} text-${config.drop.zoneText.text}`]:
//Base
[`@apply block font-${config.drop.zone.font.family} font-${config.drop.zone.font.weight}`]:
{},
//Color
[`@apply text-${config.drop.zone.font.color.base.light} dark:text-${config.drop.zone.font.color.base.dark}`]:
{},
},
//Zone:separator
[`.${prefix}drop-zone-separator`]: {
[`@apply block font-${config.drop.zoneSeparator.font} font-${config.drop.zoneSeparator.fontWeight} text-${config.drop.zoneSeparator.text} leading-none py-1`]:
//Base
[`@apply block font-${config.drop.zone.separator.font.family} font-${config.drop.zone.separator.font.weight} leading-none py-1`]:
{},
//Color
[`@apply text-${config.drop.zone.font.color.base.light} dark:text-${config.drop.zone.font.color.base.dark}`]:
{},
},
//Zone:input
[`.${prefix}drop-zone-input`]: {
[`@apply absolute top-0 left-0 h-${config.drop.zoneInput.size} w-${config.drop.zoneInput.size} opacity-0 file:cursor-pointer z-20`]:
[`@apply absolute top-0 left-0 h-${config.drop.zone.input.size} w-${config.drop.zone.input.size} opacity-0 file:cursor-pointer z-20`]:
{},
},
//Zone:hover
[`&:hover`]: {
[`.${prefix}drop-zone-icon`]: {
[`@apply text-${config.drop.hover.text}`]: {},
[`@apply text-${config.drop.zone.font.color.hover.light} dark:text-${config.drop.zone.font.color.hover.dark}`]:
{},
},
},
},
//Variant:button
[`&.${prefix}input-file-button`]: {
[`@apply w-64 max-w-full flex flex-col items-center px-4 py-8 bg-${config.button.bg} dark:bg-${config.button.bgDark} text-${config.button.text} tracking-wide border-2 dark:border-${config.button.borderDark} cursor-pointer hover:border-${config.button.borderHover} dark:hover:border-${config.button.borderHoverDark} hover:text-${config.button.textHover} transition-colors duration-${config.button.duration}`]:
//Base
[`@apply w-64 max-w-full flex flex-col items-center px-4 py-8 tracking-wide cursor-pointer`]:
{},

//Font
[`@apply text-${config.button.font.color.base.light} dark:text-${config.button.font.color.base.dark}`]:
{},
//Font:hover
[`@apply hover:text-${config.button.font.color.hover.light} dark:hover:text-${config.button.font.color.hover.dark}`]:
{},
//Background
[`@apply bg-${config.button.background.light} dark:bg-${config.button.background.dark}`]:
{},
//Border
[`@apply border-2 border-${config.button.border.base.light} dark:border-${config.button.border.base.dark}`]:
{},
//Border:hover
[`@apply hover:border-${config.button.border.hover.light} dark:hover:border-${config.button.border.hover.dark}`]:
{},
//Transition
[`@apply transition-${config.button.transition.property} duration-${config.button.transition.duration}`]:
{},
//Button:icon
[`.${prefix}upload-button-icon`]: {
[`@apply w-${config.button.icon.size} h-${config.button.icon.size}`]:
{},
},
//Button:label
[`.${prefix}upload-button-label`]: {
[`@apply block font-${config.button.label.font} mt-2 text-${config.button.label.text} leading-normal`]:
//Base
[`@apply block mt-2 leading-normal`]: {},
//Font
[`@apply font-${config.button.label.font.family} text-${config.button.label.font.size}`]:
{},
},
},
//Variant:combo
[`&.${prefix}input-file-combo`]: {
[`@apply block font-${config.combo.font} border border-${config.combo.border} dark:border-${config.combo.borderDark} p-${config.combo.space} bg-${config.combo.bg} dark:bg-${config.combo.bgDark}`]:
//Base
[`@apply block font-${config.combo.font.family} p-${config.combo.padding}`]:
{},

//Background
[`@apply bg-${config.combo.background.light} dark:bg-${config.combo.background.dark}`]:
{},
//Border
[`@apply border border-${config.combo.border.light} dark:border-${config.combo.border.dark}`]:
{},
//Combo:label
[`.${prefix}combo-label-text`]: {
[`@apply font-${config.combo.label.font} sr-only text-${config.combo.label.text}`]:
[`@apply font-${config.combo.label.font.family} sr-only text-${config.combo.label.font.size}`]:
{},
},
//Combo:input
[`.${prefix}combo-input`]: {
[`@apply outline-none block w-${config.combo.input.size} text-${config.combo.input.textSize} text-${config.combo.input.text} dark:text-${config.combo.input.textDark} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:text-${config.combo.input.textFileSize} file:transition-colors file:bg-${config.combo.input.bgFile} file:text-${config.combo.input.textFile} hover:file:bg-${config.combo.input.bgFileHover}`]:
[`@apply outline-none block w-${config.combo.input.width} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:transition-colors file:duration-300`]:
{},
//Font
[`@apply text-${config.combo.input.font.size} text-${config.combo.input.font.color.light} dark:text-${config.combo.input.font.color.dark}`]:
{},
//File
[`@apply file:text-${config.combo.input.file.font.size}`]: {},
//File colot
[`@apply file:text-${config.combo.input.file.font.color.light} dark:file:text-${config.combo.input.file.font.color.dark}`]:
{},
//Background
[`@apply file:bg-${config.combo.input.file.background.base.light} dark:file:bg-${config.combo.input.file.background.base.dark}`]:
{},
//Background:hover
[`@apply file:hover:bg-${config.combo.input.file.background.hover.light} dark:file:hover:bg-${config.combo.input.file.background.hover.dark}`]:
{},
},
},
//Rounded:sm
[`&.${prefix}input-file-rounded`]: {
[`&.${prefix}input-file-drop, &.${prefix}input-file-button`]: {
[`@apply rounded-${config.rounded.default}`]: {},
[`@apply ${config.rounded.sm}`]: {},
},
[`&.${prefix}input-file-combo`]: {
[`@apply rounded-${config.rounded.default}`]: {},
[`@apply ${config.rounded.sm}`]: {},
},
[`&.${prefix}input-file-combo .${prefix}combo-input`]: {
[`@apply file:rounded-${config.rounded.default}`]: {},
[`@apply file:${config.rounded.sm}`]: {},
},
},
//Rounded:md
[`&.${prefix}input-file-smooth`]: {
[`&.${prefix}input-file-drop, &.${prefix}input-file-button`]: {
[`@apply rounded-${config.rounded.smooth}`]: {},
[`@apply ${config.rounded.md}`]: {},
},
[`&.${prefix}input-file-combo`]: {
[`@apply rounded-${config.rounded.smooth}`]: {},
[`@apply ${config.rounded.md}`]: {},
},
[`&.${prefix}input-file-combo .${prefix}combo-input`]: {
[`@apply file:rounded-${config.rounded.smooth}`]: {},
[`@apply file:${config.rounded.md}`]: {},
},
},
//Rounded:lg
[`&.${prefix}input-file-curved`]: {
[`&.${prefix}input-file-drop, &.${prefix}input-file-button`]: {
[`@apply rounded-${config.rounded.curved}`]: {},
[`@apply ${config.rounded.lg}`]: {},
},
[`&.${prefix}input-file-combo`]: {
[`@apply rounded-${config.rounded.curved}`]: {},
[`@apply ${config.rounded.lg}`]: {},
},
[`&.${prefix}input-file-combo .${prefix}combo-input`]: {
[`@apply file:rounded-${config.rounded.curved}`]: {},
[`@apply file:${config.rounded.lg}`]: {},
},
},
//Rounded:full
[`&.${prefix}input-file-full`]: {
[`&.${prefix}input-file-drop, &.${prefix}input-file-button`]: {
[`@apply rounded-${config.rounded.full}`]: {},
[`@apply ${config.rounded.full}`]: {},
},
[`&.${prefix}input-file-combo`]: {
[`@apply rounded-${config.rounded.full}`]: {},
[`@apply ${config.rounded.full}`]: {},
},
[`&.${prefix}input-file-combo .${prefix}combo-input`]: {
[`@apply file:rounded-${config.rounded.full}`]: {},
[`@apply file:${config.rounded.full}`]: {},
},
},
},
Expand Down
8 changes: 4 additions & 4 deletions src/plugins/components/input-file/input-file.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import * as variants from './input-file.variants'
* Primary UI component for user interaction
*/
export const InputFile = ({
shape = 'rounded',
rounded = 'sm',
type = 'combo',
classes,
...attrs
Expand All @@ -19,7 +19,7 @@ export const InputFile = ({
<label
class=${[
'nui-input-file',
shape && variants.shape[shape],
rounded && variants.rounded[rounded],
type === 'combo' && 'nui-input-file-combo',
classes?.wrapper,
]
Expand All @@ -36,7 +36,7 @@ export const InputFile = ({
<div
class=${[
'nui-input-file',
shape && variants.shape[shape],
rounded && variants.rounded[rounded],
type === 'dropzone' && 'nui-input-file-drop',
classes?.wrapper,
]
Expand Down Expand Up @@ -76,7 +76,7 @@ export const InputFile = ({
<label
class=${[
'nui-input-file',
shape && variants.shape[shape],
rounded && variants.rounded[rounded],
type === 'button' && 'nui-input-file-button',
classes?.wrapper,
]
Expand Down
Loading

0 comments on commit 82e4ea0

Please sign in to comment.