Skip to content

Instantly share code, notes, and snippets.

@blockpc

blockpc/color.blade.php

Last active May 10, 2024 17:09
Show Gist options
  • Save blockpc/38629bee0c0de63c2f30be8354ee8a8a to your computer and use it in GitHub Desktop.
Save blockpc/38629bee0c0de63c2f30be8354ee8a8a to your computer and use it in GitHub Desktop.
Download ZIP
Component color-picker for laravel TALL
Raw
color.blade.php
// - si el componente lleva el parametro 'hexadecimal' los colores seran formateados como valores hexadecimales '#c62828'
// - si el componente no lleva el parametro 'hexadecimal' los colores seran formateados como valores string siguiendo el formato tailwind 'bg-red-800'
@props(['hexadecimal' => false])
<div>
<div class="bg-white mx-auto my-auto">
<div x-data="app()" x-init="[initColor()]">
<div>
<div class="flex flex-row relative">
<x-inputs.input name="color-picker" id="color-picker" class="" placeholder="{{__('common.select-color')}}" x-model="color_selected" {{ $attributes->wire('model') }} />
<div x-on:click="isOpen = !isOpen" class="cursor-pointer my-auto h-10 w-10 flex absolute inset-y-0 right-0 rounded rounded-r-md z-50" :class="`${currentColor}`" >
<svg xmlns="http://www.w3.org/2000/svg" :class="`${iconColor}`" class="h-6 w-6 mx-auto my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
</div>
<div x-show="isOpen" x-on:click.away="isOpen = false" x-transition:enter="transition ease-out duration-100 transform"
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95" class="border border-gray-300 origin-top-right absolute right-0 top-full mt-2 rounded-md shadow-lg">
<div class="rounded-md bg-white shadow-xs p-2 z-50">
<div class="flex">
<template x-for="color in colors">
<div class="">
<template x-for="variant in variants">
<div x-on:click="selectColor(color,variant)" class="cursor-pointer w-6 h-6 rounded-full mx-1 my-1" :class="`bg-${color}-${variant}`"></div>
</template>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden space-x-2">
<div class="bg-red-100 w-1 h-1"></div>
<div class="bg-red-200 w-1 h-1"></div>
<div class="bg-red-300 w-1 h-1"></div>
<div class="bg-red-400 w-1 h-1"></div>
<div class="bg-red-500 w-1 h-1"></div>
<div class="bg-red-600 w-1 h-1"></div>
<div class="bg-red-700 w-1 h-1"></div>
<div class="bg-red-800 w-1 h-1"></div>
<div class="bg-red-900 w-1 h-1"></div>
<div class="bg-gray-100 w-1 h-1"></div>
<div class="bg-gray-200 w-1 h-1"></div>
<div class="bg-gray-300 w-1 h-1"></div>
<div class="bg-gray-400 w-1 h-1"></div>
<div class="bg-gray-500 w-1 h-1"></div>
<div class="bg-gray-600 w-1 h-1"></div>
<div class="bg-gray-700 w-1 h-1"></div>
<div class="bg-gray-800 w-1 h-1"></div>
<div class="bg-gray-900 w-1 h-1"></div>
<div class="bg-yellow-100 w-1 h-1"></div>
<div class="bg-yellow-200 w-1 h-1"></div>
<div class="bg-yellow-300 w-1 h-1"></div>
<div class="bg-yellow-400 w-1 h-1"></div>
<div class="bg-yellow-500 w-1 h-1"></div>
<div class="bg-yellow-600 w-1 h-1"></div>
<div class="bg-yellow-700 w-1 h-1"></div>
<div class="bg-yellow-800 w-1 h-1"></div>
<div class="bg-yellow-900 w-1 h-1"></div>
<div class="bg-green-100 w-1 h-1"></div>
<div class="bg-green-200 w-1 h-1"></div>
<div class="bg-green-300 w-1 h-1"></div>
<div class="bg-green-400 w-1 h-1"></div>
<div class="bg-green-500 w-1 h-1"></div>
<div class="bg-green-600 w-1 h-1"></div>
<div class="bg-green-700 w-1 h-1"></div>
<div class="bg-green-800 w-1 h-1"></div>
<div class="bg-green-900 w-1 h-1"></div>
<div class="bg-blue-100 w-1 h-1"></div>
<div class="bg-blue-200 w-1 h-1"></div>
<div class="bg-blue-300 w-1 h-1"></div>
<div class="bg-blue-400 w-1 h-1"></div>
<div class="bg-blue-500 w-1 h-1"></div>
<div class="bg-blue-600 w-1 h-1"></div>
<div class="bg-blue-700 w-1 h-1"></div>
<div class="bg-blue-800 w-1 h-1"></div>
<div class="bg-blue-900 w-1 h-1"></div>
<div class="bg-indigo-100 w-1 h-1"></div>
<div class="bg-indigo-200 w-1 h-1"></div>
<div class="bg-indigo-300 w-1 h-1"></div>
<div class="bg-indigo-400 w-1 h-1"></div>
<div class="bg-indigo-500 w-1 h-1"></div>
<div class="bg-indigo-600 w-1 h-1"></div>
<div class="bg-indigo-700 w-1 h-1"></div>
<div class="bg-indigo-800 w-1 h-1"></div>
<div class="bg-indigo-900 w-1 h-1"></div>
<div class="bg-purple-100 w-1 h-1"></div>
<div class="bg-purple-200 w-1 h-1"></div>
<div class="bg-purple-300 w-1 h-1"></div>
<div class="bg-purple-400 w-1 h-1"></div>
<div class="bg-purple-500 w-1 h-1"></div>
<div class="bg-purple-600 w-1 h-1"></div>
<div class="bg-purple-700 w-1 h-1"></div>
<div class="bg-purple-800 w-1 h-1"></div>
<div class="bg-purple-900 w-1 h-1"></div>
<div class="bg-pink-100 w-1 h-1"></div>
<div class="bg-pink-200 w-1 h-1"></div>
<div class="bg-pink-300 w-1 h-1"></div>
<div class="bg-pink-400 w-1 h-1"></div>
<div class="bg-pink-500 w-1 h-1"></div>
<div class="bg-pink-600 w-1 h-1"></div>
<div class="bg-pink-700 w-1 h-1"></div>
<div class="bg-pink-800 w-1 h-1"></div>
<div class="bg-pink-900 w-1 h-1"></div>
</div>
<script>
function app() {
return {
colors: ['gray', 'red', 'yellow', 'green', 'blue', 'indigo', 'purple', 'pink'],
variants: [100, 200, 300, 400, 500, 600, 700, 800, 900],
currentColor: '',
iconColor: '',
isOpen: false,
color_selected: @entangle($attributes->wire('model')->value()),
hex: @js($hexadecimal),
colores: {
red100:'#ffcdd2',
red200:'#ef9a9a',
red300:'#e57373',
red400:'#ef5350',
red500:'#f44336',
red600:'#e53935',
red700:'#d32f2f',
red800:'#c62828',
red900:'#b71c1c',
grey100:'#f5f5f5',
grey200:'#eeeeee',
grey300:'#e0e0e0',
grey400:'#bdbdbd',
grey500:'#9e9e9e',
grey600:'#757575',
grey700:'#616161',
grey800:'#424242',
grey900:'#212121',
yellow100:'#fff9c4',
yellow200:'#fff59d',
yellow300:'#fff176',
yellow400:'#ffee58',
yellow500:'#ffeb3b',
yellow600:'#fdd835',
yellow700:'#fbc02d',
yellow800:'#f9a825',
yellow900:'#f57f17',
green100:'#c8e6c9',
green200:'#a5d6a7',
green300:'#81c784',
green400:'#66bb6a',
green500:'#4caf50',
green600:'#43a047',
green700:'#388e3c',
green800:'#2e7d32',
green900:'#1b5e20',
blue100:'#bbdefb',
blue200:'#90caf9',
blue300:'#64b5f6',
blue400:'#42a5f5',
blue500:'#2196f3',
blue600:'#1e88e5',
blue700:'#1976d2',
blue800:'#1565c0',
blue900:'#0d47a1',
indigo100:'#c5cae9',
indigo200:'#9fa8da',
indigo300:'#7986cb',
indigo400:'#5c6bc0',
indigo500:'#3f51b5',
indigo600:'#3949ab',
indigo700:'#303f9f',
indigo800:'#283593',
indigo900:'#1a237e',
purple100:'#e1bee7',
purple200:'#ce93d8',
purple300:'#ba68c8',
purple400:'#ab47bc',
purple500:'#9c27b0',
purple600:'#8e24aa',
purple700:'#7b1fa2',
purple800:'#6a1b9a',
purple900:'#4a148c',
pink100:'#f8bbd0',
pink200:'#f48fb1',
pink300:'#f06292',
pink400:'#ec407a',
pink500:'#e91e63',
pink600:'#d81b60',
pink700:'#c2185b',
pink800:'#ad1457',
pink900:'#880e4f'
},
initColor () {
let color = 'red';
let variant = '800';
if ( this.color_selected ) {
let selected = this.getKeyByValue(this.color_selected);
variant = selected.substr(selected.length - 3);
color = selected.substring(0, selected.length -3);
}
this.selectColor(color, variant);
},
setIconWhite () {
this.iconColor = 'text-white'
},
setIconBlack () {
this.iconColor = 'text-black'
},
selectColor (color, variant) {
color_selected = color + variant
this.currentColor = 'bg-' + color + '-' + variant
this.color_selected = this.hex ? this.colores[color_selected] : this.currentColor;
if (variant < 500) {
this.setIconBlack()
}
else {
this.setIconWhite()
}
this.isOpen = false;
},
getKeyByValue (value) {
for (var prop in this.colores) {
if (this.colores.hasOwnProperty(prop)) {
if (this.colores[prop] === value)
return prop;
}
}
}
}
}
</script>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment