frappe-ui 0.1.244 → 0.1.245

package/icons/Icon.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+const props = defineProps<{ name: string }>()
+
+onMounted(() => {
+  if (!document.getElementById('lucide-sprite')) {
+    console.warn(
+      'Lucide sprite not found! Make sure to use the spritePlugin.'
+    )
+  }
+})
+</script>
+
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <use :href="`#${props.name}`" />
+  </svg>
+</template>

package/icons/IconPicker.story.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import IconPicker from './IconPicker.vue'
+
+const basicValue = ref(null)
+const preselectedValue = ref('star')
+const disabledValue = ref('')
+
+const state = reactive({
+  disabled: false,
+  placeholder: 'Select an icon...',
+  openOnClick: true,
+  openOnFocus: true,
+  placement: 'start',
+})
+</script>
+
+<template>
+  <Story title="IconPicker" :layout="{ type: 'grid', width: 400 }">
+    <Variant title="Basic Usage">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Basic Icon Picker</label>
+        <IconPicker
+          v-model="basicValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :open-on-click="state.openOnClick"
+          :open-on-focus="state.openOnFocus"
+          :placement="state.placement"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ basicValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Subtle Variant (Default)">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Subtle Variant</label>
+        <IconPicker
+          variant="subtle"
+          v-model="basicValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ basicValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Outline Variant">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Outline Variant</label>
+        <IconPicker
+          variant="outline"
+          v-model="basicValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ basicValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Ghost Variant">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Ghost Variant</label>
+        <IconPicker
+          variant="ghost"
+          v-model="basicValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ basicValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Pre-selected Icon">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Pre-selected Icon</label>
+        <IconPicker
+          v-model="preselectedValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ preselectedValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled State">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Disabled Icon Picker</label>
+        <IconPicker
+          v-model="disabledValue"
+          placeholder="This is disabled"
+          :disabled="true"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Icon picker is disabled
+        </div>
+      </div>
+    </Variant>
+
+    <template #controls>
+      <HstText v-model="state.placeholder" title="Placeholder" />
+      <HstCheckbox v-model="state.disabled" title="Disabled" />
+      <HstCheckbox v-model="state.openOnClick" title="Open on Click" />
+      <HstCheckbox v-model="state.openOnFocus" title="Open on Focus" />
+      <HstSelect
+        v-model="state.placement"
+        title="Placement"
+        :options="[
+          { value: 'start', label: 'Start' },
+          { value: 'center', label: 'Center' },
+          { value: 'end', label: 'End' }
+        ]"
+      />
+    </template>
+  </Story>
+</template>

package/icons/IconPicker.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
+} from 'reka-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import Icon from './Icon.vue'
+
+export interface IconPickerProps {
+  variant?: 'subtle' | 'outline' | 'ghost'
+  modelValue?: string | null
+  placeholder?: string
+  disabled?: boolean
+  openOnFocus?: boolean
+  openOnClick?: boolean
+  placement?: 'start' | 'center' | 'end'
+  maxIcons?: number
+}
+
+const props = withDefaults(defineProps<IconPickerProps>(), {
+  variant: 'subtle',
+  openOnClick: true,
+  openOnFocus: true,
+  maxIcons: 100,
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input'])
+
+const searchTerm = ref(getLabel(props.modelValue || ''))
+const internalModelValue = ref(props.modelValue)
+const isOpen = ref(false)
+const iconNames = ref<string[]>([])
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalModelValue.value = newValue
+    searchTerm.value = newValue ? getLabel(newValue) : ''
+  },
+)
+
+onMounted(() => {
+  const spriteContainer = document.getElementById('lucide-sprite')
+  if (!spriteContainer) {
+    console.warn('Lucide sprite not found! Make sure to use the spritePlugin.')
+    return
+  }
+
+  const symbols = spriteContainer.getElementsByTagName('symbol')
+  const names: string[] = []
+  for (let i = 0; i < symbols.length; i++) {
+    const symbol = symbols[i]
+    names.push(symbol.id)
+  }
+  iconNames.value = names
+})
+
+function getLabel(name: string) {
+  return name.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+const filteredIcons = computed(() => {
+  if (!searchTerm.value) return iconNames.value
+  const lowerSearch = searchTerm.value.toLowerCase()
+  return iconNames.value.filter((name) =>
+    name.replace(/-/g, ' ').toLowerCase().includes(lowerSearch),
+  )
+})
+
+const onUpdateModelValue = (value: string | null) => {
+  internalModelValue.value = value
+  emit('update:modelValue', value)
+  searchTerm.value = value ? getLabel(value) : ''
+  isOpen.value = false
+}
+
+const handleInputChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  searchTerm.value = target.value
+
+  if (searchTerm.value === '') {
+    internalModelValue.value = null
+    emit('update:modelValue', null)
+  }
+  emit('input', searchTerm.value)
+}
+
+const handleOpenChange = (open: boolean) => {
+  isOpen.value = open
+  if (!open) {
+    searchTerm.value = internalModelValue.value
+      ? getLabel(internalModelValue.value)
+      : ''
+  }
+}
+
+const handleClick = (event: MouseEvent) => {
+  if (props.openOnClick) {
+    isOpen.value = true
+  }
+}
+
+const handleFocus = (event: FocusEvent) => {
+  if (props.openOnFocus) {
+    isOpen.value = true
+  }
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const handleIconClick = (iconName: string) => {
+  onUpdateModelValue(iconName)
+}
+
+const reset = () => {
+  searchTerm.value = ''
+  internalModelValue.value = null
+  emit('update:modelValue', null)
+}
+
+const variantClasses = computed(() => {
+  const borderCss =
+    'border focus-within:border-outline-gray-4 focus-within:ring-2 focus-within:ring-outline-gray-3'
+
+  return {
+    subtle: `${borderCss} bg-surface-gray-2 hover:bg-surface-gray-3 border-transparent`,
+    outline: `${borderCss} border-outline-gray-2`,
+    ghost: '',
+  }[props.variant]
+})
+
+defineExpose({
+  reset,
+})
+</script>
+
+<template>
+  <div class="relative">
+    <ComboboxRoot
+      :model-value="internalModelValue"
+      @update:modelValue="onUpdateModelValue"
+      @update:open="handleOpenChange"
+      :ignore-filter="true"
+      :open="isOpen"
+    >
+      <ComboboxAnchor
+        class="flex h-7 w-full items-center justify-between gap-2 rounded px-2 py-1 transition-colors"
+        :class="{
+          'opacity-50 pointer-events-none': disabled,
+          [variantClasses]: true,
+        }"
+        @click="handleClick"
+      >
+        <div class="flex items-center gap-2 flex-1 overflow-hidden">
+          <Icon
+            :name="internalModelValue || 'circle-dashed'"
+            class="w-4 h-4 flex-shrink-0"
+          />
+          <ComboboxInput
+            :value="searchTerm"
+            @input="handleInputChange"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            class="bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full"
+            :placeholder="placeholder || 'Select an icon...'"
+            :disabled="disabled"
+            autocomplete="off"
+          />
+        </div>
+        <ComboboxTrigger :disabled="disabled">
+          <Icon name="chevron-down" class="h-4 w-4 text-ink-gray-5" />
+        </ComboboxTrigger>
+      </ComboboxAnchor>
+      <ComboboxPortal>
+        <ComboboxContent
+          class="z-10 w-60 mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          position="popper"
+          @openAutoFocus.prevent
+          @closeAutoFocus.prevent
+          :align="props.placement || 'start'"
+        >
+          <ComboboxViewport class="max-h-60 overflow-auto p-2">
+            <ComboboxEmpty
+              v-if="filteredIcons.length === 0"
+              class="text-ink-gray-5 text-base text-center py-1.5 px-2.5"
+            >
+              <template v-if="searchTerm">
+                No icons found for "{{ searchTerm }}"
+              </template>
+              <template v-else> No icons available. </template>
+            </ComboboxEmpty>
+            <div v-if="filteredIcons.length > 0" class="flex flex-wrap">
+              <button
+                v-for="iconName in filteredIcons.slice(0, props.maxIcons)"
+                :key="iconName"
+                @click="handleIconClick(iconName)"
+                type="button"
+                class="w-8 h-8 flex items-center justify-center rounded hover:bg-surface-gray-3 transition-colors"
+                :class="{
+                  'bg-surface-gray-3': internalModelValue === iconName,
+                }"
+                :title="getLabel(iconName)"
+              >
+                <Icon :name="iconName" class="w-4 h-4" />
+              </button>
+            </div>
+          </ComboboxViewport>
+        </ComboboxContent>
+      </ComboboxPortal>
+    </ComboboxRoot>
+  </div>
+</template>

package/icons/index.ts

@@ -8,3 +8,8 @@ export { default as LightningIcon } from './LightningIcon.vue'
 export { default as MaximizeIcon } from './MaximizeIcon.vue'
 export { default as MinimizeIcon } from './MinimizeIcon.vue'
 export { default as StepsIcon } from './StepsIcon.vue'
+
+// Lucide Icons
+export { default as Icon } from './Icon.vue'
+export { default as IconPicker } from './IconPicker.vue'
+export { default as spritePlugin } from './spritePlugin'

package/icons/spritePlugin.ts

@@ -0,0 +1,13 @@
+// @ts-ignore
+import sprite from 'lucide-static/sprite.svg?raw'
+import type { App } from 'vue'
+
+export default {
+  install(app: App) {
+    const div = document.createElement('div')
+    div.id = 'lucide-sprite'
+    div.style.display = 'none'
+    div.innerHTML = sprite
+    document.body.prepend(div)
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.244",
+  "version": "0.1.245",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/Popover/Popover.vue

@@ -4,6 +4,7 @@
       <div
         ref="anchorRef"
         :class="['flex', $attrs.class]"
+        :style="($attrs.style as StyleValue)"
         @mouseover="onMouseover"
         @mouseleave="onMouseleave"
       >
@@ -62,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onUnmounted } from 'vue'
+import { computed, ref, onUnmounted, type StyleValue } from 'vue'
 import {
   PopoverAnchor,
   PopoverContent,

package/src/components/Select/Select.vue

@@ -2,10 +2,12 @@
 import { computed } from 'vue'
 import type { SelectProps } from './types'
 import LucideChevronDown from '~icons/lucide/chevron-down'
+import LucideCheck from '~icons/lucide/check'
 
 import {
   SelectContent,
   SelectItem,
+  SelectItemIndicator,
   SelectItemText,
   SelectPortal,
   SelectRoot,
@@ -90,7 +92,7 @@ const selectOptions = computed(() => {
       :disabled="disabled"
     >
       <slot name="prefix" />
-      <SelectValue :placeholder="placeholder" class='truncate' />
+      <SelectValue :placeholder="placeholder" class="truncate" />
       <slot name="suffix">
         <LucideChevronDown class="size-4 text-ink-gray-4 ml-auto shrink-0" />
       </slot>
@@ -107,15 +109,12 @@ const selectOptions = computed(() => {
             :key="option.value"
             :value="option.value"
             :class="[sizeClasses, paddingClasses, fontSizeClasses]"
-						class="
-              text-base text-ink-gray-9 flex items-center relative
-              data-[highlighted]:bg-surface-gray-2 border-0 [data-state=checked]:bg-surface-gray-2
-              data-[disabled]:text-ink-gray-4 select-none
-            "
+            class="text-base text-ink-gray-9 flex items-center data-[highlighted]:bg-surface-gray-2 border-0 data-[state=checked]:bg-surface-gray-2 data-[disabled]:text-ink-gray-4 select-none"
           >
             <SelectItemText>
               <slot name="option" v-bind="{ option }">{{ option.label }}</slot>
             </SelectItemText>
+            <SelectItemIndicator :as="LucideCheck" class="size-4 ml-auto" />
           </SelectItem>
           <slot name="footer" />
         </SelectViewport>
@@ -135,7 +134,7 @@ const selectOptions = computed(() => {
 @keyframes fadeInScale {
   from {
     opacity: 0;
-    transform: scale(0.90);
+    transform: scale(0.9);
   }
   to {
     opacity: 1;