Skip to content

Commit

Permalink
feat: color palette selector
Browse files Browse the repository at this point in the history
  • Loading branch information
nextchamp-saqib committed Jan 27, 2024
1 parent c8c798c commit 2892747
Show file tree
Hide file tree
Showing 8 changed files with 121 additions and 227 deletions.
15 changes: 9 additions & 6 deletions frontend/src/components/Controls/Autocomplete.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,18 @@
:class="{ 'bg-gray-200': isComboboxOpen }"
@click="() => togglePopover()"
>
<div class="flex items-center overflow-hidden">
<div class="flex flex-1 items-center overflow-hidden">
<slot name="prefix" />
<span class="truncate text-base leading-5" v-if="selectedValue">
<span
v-if="selectedValue"
class="flex-1 truncate text-left text-base leading-5"
>
{{ displayValue(selectedValue) }}
</span>
<span class="text-base leading-5 text-gray-600" v-else>
<span v-else class="text-base leading-5 text-gray-600">
{{ placeholder || '' }}
</span>
<slot name="suffix" />
</div>
<FeatherIcon
name="chevron-down"
Expand Down Expand Up @@ -171,10 +175,9 @@ import {
ComboboxOption,
ComboboxOptions,
} from '@headlessui/vue'
import Popover from '../Popover.vue'
import { CheckSquare, Square } from 'lucide-vue-next'
import { nextTick } from 'vue'
import { CheckSquare } from 'lucide-vue-next'
import { Square } from 'lucide-vue-next'
import Popover from '../Popover.vue'
export default {
name: 'Autocomplete',
Expand Down
202 changes: 0 additions & 202 deletions frontend/src/components/Controls/Color.vue

This file was deleted.

104 changes: 104 additions & 0 deletions frontend/src/components/Controls/ColorPalette.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<template>
<div>
<label class="mb-1.5 block text-xs text-gray-600">Color Palette</label>
<Autocomplete
v-model="selectedPalette"
:options="colorPaletteOptions"
placeholder="Color palette"
>
</Autocomplete>
<div class="mt-1.5 flex flex-wrap gap-1 px-1">
<template
v-for="(color, index) in getPaletteColors(selectedPalette.value)"
:key="index"
>
<ColorPicker
:modelValue="color"
@update:modelValue="handleColorChange($event, index)"
>
<template #target="{ togglePopover }">
<div
class="h-5 w-5 cursor-pointer rounded-sm"
:style="{ backgroundColor: color }"
@click="togglePopover"
@click.meta="removeColor(index)"
></div>
</template>
</ColorPicker>
</template>
<ColorPicker
:modelValue="newColor"
@update:modelValue="handleColorChange($event, newColorIndex)"
>
<template #target="{ togglePopover }">
<div
class="flex h-5 w-5 cursor-pointer items-center justify-center rounded-sm border border-dashed border-gray-500 text-gray-500 hover:border-gray-700 hover:text-gray-700"
@click="
() => {
togglePopover()
newColor = '#000000'
newColorIndex = getPaletteColors(selectedPalette.value).length
}
"
>
<Plus class="h-3 w-3" />
</div>
</template>
</ColorPicker>
</div>
</div>
</template>
; ;;
<script setup>
import { getColors } from '@/utils/colors'
import { debounce } from 'frappe-ui'
import { Plus } from 'lucide-vue-next'
import { ref } from 'vue'
import ColorPicker from './ColorPicker.vue'
const colors = defineModel()
const paletteColors = {
default: getColors(),
}
const colorPaletteOptions = [
{ label: 'Default', value: 'default' },
{ label: 'Custom', value: 'custom' },
]
const selectedPalette = ref()
if (colors.value?.length === 0) {
selectedPalette.value = colorPaletteOptions[0]
} else if (isDefaultPalette(colors.value)) {
selectedPalette.value = colorPaletteOptions[0]
} else {
selectedPalette.value = colorPaletteOptions[1]
}
function getPaletteColors(palette) {
if (palette === 'custom') {
return colors.value?.length ? colors.value : getPaletteColors('default')
}
return paletteColors[palette]?.slice(0, 10) ?? []
}
function isDefaultPalette(colors) {
if (!colors) return true
return colors.every((color, index) => color === paletteColors.default[index])
}
function handleColorChange(color, index) {
if (selectedPalette.value.value !== 'custom') {
const currentColors = [...getPaletteColors(selectedPalette.value.value)]
selectedPalette.value = colorPaletteOptions[1]
colors.value = currentColors.length ? currentColors : getPaletteColors('default')
}
colors.value[index] = color
}
const newColor = ref('#000000')
const newColorIndex = ref(0)
function removeColor(index) {
if (selectedPalette.value.value !== 'custom') return
colors.value.splice(index, 1)
}
</script>
5 changes: 2 additions & 3 deletions frontend/src/widgets/AxisChart/AxisChartOptions.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script setup>
import Autocomplete from '@/components/Controls/Autocomplete.vue'
import Color from '@/components/Controls/Color.vue'
import ColorPalette from '@/components/Controls/ColorPalette.vue'
import DraggableList from '@/components/DraggableList.vue'
import DraggableListItemMenu from '@/components/DraggableListItemMenu.vue'
import { FIELDTYPES } from '@/utils'
Expand Down Expand Up @@ -154,5 +153,5 @@ function updateXAxis(columnOptions) {
/>
</div>
<Color label="Colors" v-model="options.colors" :max="options.yAxis?.length || 1" multiple />
<ColorPalette v-model="options.colors" />
</template>
2 changes: 1 addition & 1 deletion frontend/src/widgets/Bar/BarOptions.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup>
import Autocomplete from '@/components/Controls/Autocomplete.vue'
import Color from '@/components/Controls/Color.vue'
import ColorPalette from '@/components/Controls/ColorPalette.vue'
import DraggableList from '@/components/DraggableList.vue'
import DraggableListItemMenu from '@/components/DraggableListItemMenu.vue'
import { FIELDTYPES } from '@/utils'
Expand Down
9 changes: 2 additions & 7 deletions frontend/src/widgets/Funnel/FunnelOptions.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup>
import Color from '@/components/Controls/Color.vue'
import { FIELDTYPES } from '@/utils'
import { computed } from 'vue'
import ColorPalette from '@/components/Controls/ColorPalette.vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
Expand Down Expand Up @@ -52,11 +52,6 @@ const valueOptions = computed(() => {
<Autocomplete v-model="options.yAxis" :returnValue="true" :options="valueOptions" />
</div>
<Color
label="Colors"
v-model="options.colors"
:max="parseInt(options.maxSlices) + 1"
multiple
/>
<ColorPalette v-model="options.colors" />
</div>
</template>
Loading

0 comments on commit 2892747

Please sign in to comment.