Merge pull request #151 from ruchamahabal/styles

feat: Style panel improvements

Author: ruchamahabal

frappe-ui

@@ -59,6 +59,8 @@ declare module 'vue' {
     Input: typeof import('./src/components/Input.vue')['default']
     InputLabel: typeof import('./src/components/InputLabel.vue')['default']
     ItemActions: typeof import('./src/components/ItemActions.vue')['default']
+    ListBox: typeof import('./src/components/ListBox.vue')['default']
+    LucideX: typeof import('~icons/lucide/x')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     MarkdownEditor: typeof import('./src/components/AppLayout/MarkdownEditor.vue')['default']
     NewComponentDialog: typeof import('./src/components/NewComponentDialog.vue')['default']

frontend/components.d.ts

@@ -26,10 +26,11 @@
 		"autoprefixer": "^10.4.2",
 		"codemirror": "^6.0.1",
 		"feather-icons": "^4.28.0",
-		"frappe-ui": "0.1.245",
+		"frappe-ui": "0.1.261",
 		"json5": "^2.2.3",
 		"marked": "^15.0.6",
 		"pinia": "^2.2.1",
+		"reka-ui": "^2.7.0",
 		"thememirror": "^2.0.1",
 		"typescript": "^5.8.3",
 		"vite": "^5.4.11",

frontend/package.json

@@ -1,5 +1,5 @@
 <template>
-	<component :is="tag" :class="[fontSize, fontWeight, lineHeight, textColor, 'transition-colors']">
+	<component :is="tag" :class="[fontSize, 'transition-colors']">
 		{{ text }}
 	</component>
 </template>
@@ -9,10 +9,7 @@ import type { TextBlockProps } from "@/types/studio_components/TextBlock"
 
 withDefaults(defineProps<TextBlockProps>(), {
 	tag: "span",
-	fontSize: "text-base",
-	fontWeight: "font-normal",
-	lineHeight: "leading-normal",
-	textColor: "text-gray-900",
 	text: "Text Block",
+	fontSize: "text-base",
 })
 </script>

frontend/public/color-circle.png

@@ -1,127 +1,231 @@
 <!-- Extracted from Builder -->
 <template>
-	<div class="relative">
-		<Combobox
-			:modelValue="value"
-			@update:modelValue="
-				(val) => {
-					emit('update:modelValue', val)
-				}
-			"
-			v-slot="{ open }"
-			:nullable="nullable"
-			:multiple="multiple"
-		>
+	<ComboboxRoot
+		v-model="selectedValue"
+		v-model:open="isOpen"
+		open-on-click
+		open-on-focus
+		:reset-search-term-on-blur="false"
+	>
+		<div class="relative" ref="containerRef">
 			<div
-				class="dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:bg-zinc-700 form-input flex h-7 w-full items-center justify-between gap-2 rounded px-2 py-1 pr-5 text-sm transition-colors"
+				class="group form-input flex h-7 flex-1 items-center gap-2 rounded bg-surface-gray-2 p-0 text-sm text-ink-gray-8 transition-colors focus-within:bg-surface-white focus-within:ring-2 focus-within:ring-outline-gray-3"
 			>
+				<div v-if="$slots.prefix" class="flex items-center pl-2">
+					<slot name="prefix" />
+				</div>
 				<ComboboxInput
+					v-model="searchQuery"
 					autocomplete="off"
-					@change="query = $event.target.value"
-					@focus="() => open"
-					:displayValue="getDisplayValue"
-					:placeholder="!modelValue ? placeholder : null"
-					class="h-full w-full border-none bg-transparent p-0 text-base focus:border-none focus:ring-0"
+					@focus="emit('focus')"
+					@blur="handleBlur"
+					@keydown.enter="handleEnter"
+					:display-value="getDisplayValue"
+					:placeholder="placeholder"
+					class="h-full w-full flex-1 border-none bg-transparent px-0 text-base placeholder:text-ink-gray-4 focus:outline-none focus:ring-0"
+					:class="{
+						'pl-2': !$slots.prefix,
+						'pr-2': !hasValue,
+					}"
 				/>
+				<Button v-if="hasValue" variant="ghost" @click.stop="clearSelection" class="-ml-2">
+					<CrossIcon class="h-3 w-3" />
+				</Button>
 			</div>
-			<ComboboxOptions
-				class="absolute right-0 z-50 max-h-[15rem] w-full overflow-y-auto rounded-lg bg-white px-1.5 py-1.5 shadow-2xl"
-				v-show="filteredOptions.length"
+
+			<ComboboxContent
+				class="absolute z-10 mt-1 max-h-80 w-full overflow-hidden rounded-lg border bg-surface-white shadow-xl"
 			>
-				<ComboboxOption v-if="query" :value="query" class="flex items-center"></ComboboxOption>
-				<ComboboxOption
-					v-slot="{ active, selected }"
-					v-for="option in filteredOptions"
-					:key="option.value"
-					:value="option"
-					class="flex items-center"
-				>
-					<li
-						class="w-full select-none rounded px-2.5 py-1.5 text-xs"
-						:class="{
-							'bg-gray-100': active,
-							'bg-gray-300': selected,
-						}"
+				<div class="overflow-y-auto p-1">
+					<template v-for="(option, index) in displayOptions" :key="`${option.value}-${index}`">
+						<ComboboxSeparator
+							v-if="option.value.startsWith('_separator_line')"
+							class="bg-outline-gray-2 mx-2 my-1 h-px"
+						/>
+						<ComboboxLabel
+							v-else-if="option.value.startsWith('_separator')"
+							class="px-2 py-1 text-xs font-semibold text-ink-gray-5"
+						>
+							{{ option.label }}
+						</ComboboxLabel>
+						<ComboboxItem
+							v-else
+							:value="option.value"
+							:disabled="option.disabled"
+							class="group flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm text-ink-gray-9 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-1 data-[disabled]:opacity-50"
+						>
+							<component v-if="option.prefix" :is="option.prefix" class="h-4 w-4 flex-shrink-0" />
+							<span class="w-full flex-1 truncate">{{ option.label }}</span>
+							<component
+								v-if="option.suffix"
+								:is="option.suffix"
+								class="h-4 min-w-4 flex-shrink-0 opacity-60 group-hover:opacity-100"
+								@mousedown.stop.prevent
+								@click.stop.prevent
+							/>
+						</ComboboxItem>
+					</template>
+				</div>
+				<div v-if="actionButton" class="border-t border-outline-gray-2 bg-surface-gray-1">
+					<component v-if="actionButton.component" :is="actionButton.component" @change="refreshOptions" />
+					<Button
+						v-else
+						:icon-left="actionButton.icon"
+						variant="ghost"
+						class="w-full justify-start rounded-none text-sm"
+						@click="actionButton.handler"
 					>
-						{{ option.label }}
-					</li>
-				</ComboboxOption>
-			</ComboboxOptions>
-		</Combobox>
-		<div
-			class="dark:text-zinc-300 absolute right-[1px] top-[3px] cursor-pointer p-1 text-gray-700"
-			@click="clearValue"
-			v-show="modelValue"
-		>
-			<CrossIcon />
+						{{ actionButton.label }}
+					</Button>
+				</div>
+			</ComboboxContent>
 		</div>
-	</div>
+	</ComboboxRoot>
 </template>
 
 <script setup lang="ts">
-import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/vue"
-import { ComputedRef, computed, ref } from "vue"
+import { Button } from "frappe-ui"
 import CrossIcon from "@/components/Icons/Cross.vue"
+import {
+	ComboboxContent,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxLabel,
+	ComboboxRoot,
+	ComboboxSeparator,
+} from "reka-ui"
+import type { Component } from "vue"
+import { computed, ref, watch } from "vue"
 
-import type { SelectOption } from "@/types"
+interface Option {
+	label: string
+	value: string
+	prefix?: Component
+	suffix?: Component
+	disabled?: boolean
+}
 
-const emit = defineEmits(["update:modelValue"])
+interface ActionButton {
+	label: string
+	handler: () => void
+	icon: string
+	component?: Component
+}
 
-const props = withDefaults(
-	defineProps<{
-		options: SelectOption[]
-		modelValue: string | string[]
-		placeholder?: string
-		showInputAsOption?: boolean
-	}>(),
-	{
-		placeholder: "Search",
-	},
-)
+interface Props {
+	options?: Option[]
+	getOptions?: (query: string) => Promise<Option[]>
+	modelValue?: string | null
+	placeholder?: string
+	showInputAsOption?: boolean
+	actionButton?: ActionButton
+	allowArbitraryValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	options: () => [],
+	placeholder: "Search",
+	showInputAsOption: false,
+	allowArbitraryValue: true,
+})
+
+const emit = defineEmits<{
+	"update:modelValue": [value: string | null]
+	focus: []
+	blur: []
+}>()
 
-const query = ref("")
-
-const multiple = computed(() => Array.isArray(props.modelValue))
-const nullable = computed(() => !multiple.value)
-
-const value = computed(() => {
-	return (
-		props.options.find((option) => option.value === props.modelValue) || {
-			label: props.modelValue,
-			value: props.modelValue,
-		}
-	)
-}) as ComputedRef<SelectOption>
-
-const filteredOptions = computed(() => {
-	if (query.value === "") {
-		return props.options
-	} else {
-		const options = props.options.filter((option) => {
-			return (
-				option.label.toLowerCase().includes(query.value.toLowerCase()) ||
-				option.value.toLowerCase().includes(query.value.toLowerCase())
-			)
-		})
-		if (props.showInputAsOption) {
-			options.unshift({
-				label: query.value,
-				value: query.value,
-			})
-		}
-		return options
+const containerRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const searchQuery = ref("")
+const asyncOptions = ref<Option[]>([])
+const hasValue = computed(() => props.modelValue != null && props.modelValue !== "")
+const allOptions = computed(() => (props.getOptions ? asyncOptions.value : props.options))
+
+const displayOptions = computed(() => {
+	let options = allOptions.value
+	if (
+		props.showInputAsOption &&
+		searchQuery.value &&
+		!options.some((opt) => opt.value === searchQuery.value)
+	) {
+		options = [{ label: searchQuery.value, value: searchQuery.value }, ...options]
 	}
+	return options
 })
 
-const clearValue = () => emit("update:modelValue", null)
+const selectedValue = computed({
+	get: () => props.modelValue,
+	set: (value) => {
+		emit("update:modelValue", value ?? null)
+		isOpen.value = false
+	},
+})
+
+const getDisplayValue = (item: any): string => {
+	if (typeof item === "object") return item?.label || item?.value || ""
+	const found = allOptions.value.find((opt) => opt.value === item)
+	return found?.label || item || ""
+}
+
+const refreshOptions = async (query = "") => {
+	if (!props.getOptions) return
+	try {
+		asyncOptions.value = await props.getOptions(query)
+	} catch (error) {
+		console.error("Failed to load options:", error)
+	}
+}
+
+const clearSelection = () => emit("update:modelValue", null)
+
+const getInputValue = (event: Event) => (event.target as HTMLInputElement)?.value?.trim()
+
+const submitArbitraryValue = (inputValue: string) => {
+	if (!inputValue) return
+	const matchingOption = allOptions.value.find((opt) => opt.label.toLowerCase() === inputValue.toLowerCase())
+	emit("update:modelValue", matchingOption?.value ?? inputValue)
+	isOpen.value = false
+}
+
+const handleEnter = (event: KeyboardEvent) => {
+	if (!props.allowArbitraryValue) return
+	const highlightedItem = containerRef.value?.querySelector("[data-highlighted]")
+	const inputValue = getInputValue(event)
+	// If there's a highlighted item and user hasn't typed anything different, let the combobox handle it
+	if (highlightedItem && !inputValue) return
+	// If user typed something, check if it matches the highlighted item's value
+	if (highlightedItem && inputValue) {
+		const highlightedValue = highlightedItem.getAttribute("data-value")
+		const matchingOption = allOptions.value.find((opt) => opt.value === highlightedValue)
+		// If input matches highlighted item's label, let combobox handle it
+		if (matchingOption && matchingOption.label.toLowerCase() === inputValue.toLowerCase()) return
+	}
+	event.preventDefault()
+	event.stopPropagation()
+	submitArbitraryValue(inputValue)
+}
 
-const getDisplayValue = (option: SelectOption | SelectOption[]) => {
-	if (Array.isArray(option)) {
-		return option.map((o) => o.label).join(", ")
-	} else if (option) {
-		return option.label || option.value || ""
-	} else {
-		return ""
+const handleBlur = (event: FocusEvent) => {
+	const relatedTarget = event.relatedTarget as HTMLElement
+	if (relatedTarget && containerRef.value?.contains(relatedTarget)) {
+		emit("blur")
+		return
 	}
+	if (props.allowArbitraryValue) submitArbitraryValue(getInputValue(event))
+	emit("blur")
 }
+
+watch(searchQuery, (query) => props.getOptions && refreshOptions(query))
+watch(
+	() => props.modelValue,
+	(val) => (searchQuery.value = val ?? ""),
+	{ immediate: true },
+)
+if (props.getOptions) refreshOptions()
+
+defineExpose({
+	refreshOptions,
+	clearSelection,
+})
 </script>