frappe-ui 0.1.127 → 0.1.129

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.127",
+  "version": "0.1.129",
   "description": "A set of components and utilities for rapid UI development",
-  "main": "./src/index.js",
+  "main": "./src/index.ts",
   "scripts": {
     "test": "vitest",
     "prettier": "yarn prettier -w ./src",

package/src/components/Combobox/Combobox.vue

@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import {
+  computed,
+  type Component,
+  ref,
+  watch,
+  h,
+  FunctionalComponent,
+} from 'vue'
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxViewport,
+} from 'reka-ui'
+import LucideCheck from '~icons/lucide/check'
+import LucideChevronDown from '~icons/lucide/chevron-down'
+
+type SimpleOption =
+  | string
+  | {
+      label: string
+      value: string
+      icon?: string | Component
+      disabled?: boolean
+    }
+type GroupedOption = { group: string; options: SimpleOption[] }
+type ComboboxOption = SimpleOption | GroupedOption
+
+interface ComboboxProps {
+  options: Array<ComboboxOption>
+  modelValue?: string | null
+  placeholder?: string
+  disabled?: boolean
+}
+
+const props = defineProps<ComboboxProps>()
+const emit = defineEmits(['update:modelValue', 'update:selectedOption'])
+
+const searchTerm = ref('')
+const internalModelValue = ref(props.modelValue)
+const isOpen = ref(false)
+const userHasTyped = ref(false)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalModelValue.value = newValue
+    searchTerm.value = getDisplayValue(newValue)
+  },
+)
+
+const onUpdateModelValue = (value: string | null) => {
+  internalModelValue.value = value
+  emit('update:modelValue', value)
+  searchTerm.value = getDisplayValue(value)
+  userHasTyped.value = false
+
+  const selectedOpt = value
+    ? allOptionsFlat.value.find((opt) => getValue(opt) === value) || null
+    : null
+  emit('update:selectedOption', selectedOpt)
+}
+
+const isGroup = (option: ComboboxOption): option is GroupedOption => {
+  return typeof option === 'object' && 'group' in option
+}
+
+const getLabel = (option: SimpleOption): string => {
+  return typeof option === 'string' ? option : option.label
+}
+
+const getValue = (option: SimpleOption): string => {
+  return typeof option === 'string' ? option : option.value
+}
+
+const isDisabled = (option: SimpleOption): boolean => {
+  return typeof option === 'object' && !!option.disabled
+}
+
+const getIcon = (option: SimpleOption): string | Component | undefined => {
+  return typeof option === 'object' ? option.icon : undefined
+}
+
+const allOptionsFlat = computed(() => {
+  const flatOptions: SimpleOption[] = []
+  props.options.forEach((optionOrGroup) => {
+    if (isGroup(optionOrGroup)) {
+      flatOptions.push(...optionOrGroup.options)
+    } else {
+      flatOptions.push(optionOrGroup)
+    }
+  })
+  return flatOptions
+})
+
+function getDisplayValue(selectedValue: string | null | undefined): string {
+  if (!selectedValue) return ''
+  const selectedOption = allOptionsFlat.value.find(
+    (opt) => getValue(opt) === selectedValue,
+  )
+  return selectedOption ? getLabel(selectedOption) : selectedValue || ''
+}
+
+const selectedOption = computed(() => {
+  if (!internalModelValue.value) return null
+  return allOptionsFlat.value.find(
+    (opt) => getValue(opt) === internalModelValue.value,
+  )
+})
+
+const selectedOptionIcon = computed(() => {
+  return selectedOption.value ? getIcon(selectedOption.value) : undefined
+})
+
+const RenderIcon: FunctionalComponent<{ icon?: string | Component }> = (
+  props,
+) => {
+  if (!props.icon) return null
+  const iconContent =
+    typeof props.icon === 'string'
+      ? h('span', props.icon)
+      : h(props.icon, { class: 'w-4 h-4' })
+
+  return h(
+    'span',
+    {
+      class: 'flex-shrink-0 w-4 h-4 inline-flex items-center justify-center',
+    },
+    [iconContent],
+  )
+}
+
+const filterFunction = (options: ComboboxOption[], search: string) => {
+  if (!search) return options
+
+  const lowerSearch = search.toLowerCase()
+  const filtered: ComboboxOption[] = []
+
+  options.forEach((optionOrGroup) => {
+    if (isGroup(optionOrGroup)) {
+      const filteredGroupOptions = optionOrGroup.options.filter((opt) => {
+        const label = getLabel(opt).toLowerCase()
+        const value = getValue(opt).toLowerCase()
+
+        return label.includes(lowerSearch) || value.includes(lowerSearch)
+      })
+      if (filteredGroupOptions.length > 0) {
+        filtered.push({ ...optionOrGroup, options: filteredGroupOptions })
+      }
+    } else {
+      const label = getLabel(optionOrGroup).toLowerCase()
+      const value = getValue(optionOrGroup).toLowerCase()
+      if (label.includes(lowerSearch) || value.includes(lowerSearch)) {
+        filtered.push(optionOrGroup)
+      }
+    }
+  })
+  return filtered
+}
+
+const filteredOptions = computed(() => {
+  if (isOpen.value && !userHasTyped.value && internalModelValue.value) {
+    return props.options
+  }
+  return filterFunction(props.options, searchTerm.value)
+})
+
+const handleInputChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  searchTerm.value = target.value
+  userHasTyped.value = true
+
+  if (searchTerm.value === '') {
+    internalModelValue.value = null
+    emit('update:modelValue', null)
+  }
+}
+
+const handleOpenChange = (open: boolean) => {
+  isOpen.value = open
+  if (!open) {
+    searchTerm.value = getDisplayValue(internalModelValue.value)
+    userHasTyped.value = false
+  } else {
+    userHasTyped.value = false
+  }
+}
+</script>
+
+<template>
+  <ComboboxRoot
+    :model-value="internalModelValue"
+    @update:modelValue="onUpdateModelValue"
+    @update:open="handleOpenChange"
+    class="relative"
+    :ignore-filter="true"
+  >
+    <ComboboxAnchor
+      class="flex h-7 w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 border border-transparent focus-within:border-outline-gray-4 focus-within:ring-2 focus-within:ring-outline-gray-3"
+      :class="{ 'opacity-50 pointer-events-none': disabled }"
+    >
+      <div class="flex items-center gap-2 flex-1 overflow-hidden">
+        <RenderIcon v-if="selectedOptionIcon" :icon="selectedOptionIcon" />
+        <ComboboxInput
+          :value="searchTerm"
+          @input="handleInputChange"
+          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 || ''"
+          :disabled="disabled"
+          autocomplete="off"
+        />
+      </div>
+      <ComboboxTrigger :disabled="disabled">
+        <LucideChevronDown class="h-4 w-4 text-ink-gray-5" />
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+    <ComboboxPortal>
+      <ComboboxContent
+        class="z-10 min-w-[--reka-combobox-trigger-width] mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+        position="popper"
+        @openAutoFocus.prevent
+        @closeAutoFocus.prevent
+        :align="'start'"
+      >
+        <ComboboxViewport
+          class="max-h-60 overflow-auto pb-1.5"
+          :class="{ 'px-1.5 pt-1.5': !isGroup(filteredOptions[0]) }"
+        >
+          <ComboboxEmpty
+            class="text-ink-gray-5 text-base text-center py-1.5 px-2.5"
+          >
+            No results found for "{{ searchTerm }}"
+          </ComboboxEmpty>
+
+          <template
+            v-for="(optionOrGroup, index) in filteredOptions"
+            :key="index"
+          >
+            <ComboboxGroup class="px-1.5" v-if="isGroup(optionOrGroup)">
+              <ComboboxLabel
+                class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-modal z-10"
+              >
+                {{ optionOrGroup.group }}
+              </ComboboxLabel>
+              <ComboboxItem
+                v-for="(option, idx) in optionOrGroup.options"
+                :key="`${index}-${idx}`"
+                :value="getValue(option)"
+                :disabled="isDisabled(option)"
+                class="text-base leading-none text-ink-gray-7 rounded flex items-center h-7 px-2.5 py-1.5 relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3"
+              >
+                <span class="flex items-center gap-2 pr-6 flex-1">
+                  <RenderIcon :icon="getIcon(option)" />
+                  {{ getLabel(option) }}
+                </span>
+                <ComboboxItemIndicator
+                  class="inline-flex ml-2 items-center justify-center"
+                >
+                  <LucideCheck class="size-4" />
+                </ComboboxItemIndicator>
+              </ComboboxItem>
+            </ComboboxGroup>
+
+            <ComboboxItem
+              v-else
+              :key="index"
+              :value="getValue(optionOrGroup)"
+              :disabled="isDisabled(optionOrGroup)"
+              class="text-base leading-none text-ink-gray-7 rounded flex items-center h-7 px-2.5 py-1.5 relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3"
+            >
+              <span class="flex items-center gap-2 pr-6 flex-1">
+                <RenderIcon
+                  v-if="getIcon(optionOrGroup)"
+                  :icon="getIcon(optionOrGroup)"
+                />
+                {{ getLabel(optionOrGroup) }}
+              </span>
+              <ComboboxItemIndicator
+                class="absolute right-0 w-6 inline-flex items-center justify-center"
+              >
+                <LucideCheck class="h-4 w-4" />
+              </ComboboxItemIndicator>
+            </ComboboxItem>
+          </template>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>

package/src/components/Combobox/index.ts

@@ -0,0 +1 @@
+export { default as Combobox } from './Combobox.vue'

package/src/components/TextEditor/EditLink.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="p-2 flex min-w-72 items-center gap-2 bg-surface-white shadow-xl rounded-lg"
+  >
+    <TextInput
+      ref="input"
+      type="text"
+      class="w-full"
+      placeholder="https://example.com"
+      v-model="_href"
+      @keydown.enter="submitLink"
+      @keydown.esc="$emit('close')"
+    />
+    <div class="shrink-0 flex items-center gap-2">
+      <Tooltip text="Submit" placement="top">
+        <Button label="Submit" @click="submitLink">
+          <template #icon><LucideCheck class="size-4" /></template>
+        </Button>
+      </Tooltip>
+      <Tooltip text="Remove link" placement="top">
+        <Button label="Remove link" @click="$emit('updateHref', '')">
+          <template #icon><LucideX class="size-4" /></template>
+        </Button>
+      </Tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef, defineEmits } from 'vue'
+import Button from '../Button/Button.vue'
+import TextInput from '../TextInput.vue'
+import Tooltip from '../Tooltip/Tooltip.vue'
+
+const props = defineProps<{
+  show: boolean
+  href: string
+  onClose: () => void
+  onUpdateHref: (href: string) => void
+}>()
+
+const emit = defineEmits<{
+  (e: 'updateHref', href: string): void
+  (e: 'close'): void
+}>()
+
+const _href = ref(props.href)
+const input = useTemplateRef('input')
+
+// Simple URL validation regex
+const isValidUrl = (url: string) => {
+  if (!url) return true
+  const regex =
+    /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/i
+  return regex.test(url)
+}
+
+const submitLink = () => {
+  if (isValidUrl(_href.value)) {
+    emit('updateHref', _href.value)
+  }
+}
+
+onMounted(() => {
+  if (props.show) {
+    setTimeout(() => {
+      if (input.value?.el) {
+        input.value.el.focus()
+        input.value.el.select()
+      }
+    }, 0)
+  }
+})
+</script>

package/src/components/TextEditor/EmojiList.vue

@@ -1,111 +1,50 @@
 <template>
-  <div>
-    <div
-      v-if="items.length"
-      class="min-w-40 rounded-lg border bg-surface-white p-1 text-base shadow-lg"
-    >
-      <button
-        v-for="(item, index) in items"
-        :key="index"
-        :class="[
-          index === selectedIndex ? 'bg-surface-gray-2' : '',
-          'flex w-full items-center whitespace-nowrap rounded-md px-2 py-2 text-sm text-ink-gray-9',
-        ]"
-        @click="selectItem(index)"
-        @mouseover="selectedIndex = index"
-      >
-        <span class="mr-2">{{ item.emoji }}</span>
-        <span>{{ item.name }}</span>
-      </button>
-    </div>
-  </div>
+  <SuggestionList
+    ref="suggestionList"
+    :items="items"
+    :command="selectItem"
+    item-class="py-2"
+  >
+    <template #default="{ item }">
+      <span class="mr-2">{{ item.emoji }}</span>
+      <span>{{ item.name }}</span>
+    </template>
+  </SuggestionList>
 </template>
 
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    command: {
-      type: Function,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedIndex: 0,
-    }
-  },
-  watch: {
-    items() {
-      this.selectedIndex = 0
-    },
-  },
-  methods: {
-    onKeyDown({ event }) {
-      if (event.key === 'ArrowUp') {
-        this.upHandler()
-        return true
-      }
-      if (event.key === 'ArrowDown') {
-        this.downHandler()
-        return true
-      }
-      if (event.key === 'Enter') {
-        this.enterHandler()
-        return true
-      }
-      return false
-    },
-    upHandler() {
-      this.selectedIndex =
-        (this.selectedIndex + this.items.length - 1) % this.items.length
-    },
-    downHandler() {
-      this.selectedIndex = (this.selectedIndex + 1) % this.items.length
-    },
-    enterHandler() {
-      this.selectItem(this.selectedIndex)
-    },
-    selectItem(index) {
-      const item = this.items[index]
-      if (item) {
-        this.command({ emoji: item.emoji })
-      }
-    },
-  },
-}
-</script>
+<script setup lang="ts">
+import { ref, type PropType } from 'vue'
+import SuggestionList, { type SuggestionItem } from './SuggestionList.vue'
 
-<style>
-.emoji-suggestions {
-  background: #fff;
-  border-radius: 0.5rem;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0px 10px 20px rgba(0, 0, 0, 0.1);
-  padding: 0.2rem;
+interface EmojiItem extends SuggestionItem {
+  name: string
+  emoji: string
 }
 
-.emoji-item {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
-  border-radius: 0.3rem;
-  cursor: pointer;
-}
+const props = defineProps({
+  items: {
+    type: Array as PropType<EmojiItem[]>,
+    required: true,
+  },
+  command: {
+    type: Function as PropType<(params: { emoji: string }) => void>,
+    required: true,
+  },
+})
 
-.emoji-item.is-selected {
-  background: #eee;
-}
+const suggestionList = ref<InstanceType<typeof SuggestionList> | null>(null)
 
-.emoji {
-  margin-right: 0.5rem;
+const selectItem = (item: SuggestionItem) => {
+  if (item) {
+    props.command({ emoji: item.emoji })
+  }
 }
 
-.name {
-  font-size: 0.9rem;
+const onKeyDown = ({ event }: { event: KeyboardEvent }) => {
+  return suggestionList.value?.onKeyDown({ event }) ?? false
 }
-</style>
+
+defineExpose({
+  onKeyDown,
+})
+</script>

package/src/components/TextEditor/ImageViewerModal.vue

@@ -11,6 +11,9 @@
         v-if="props.show"
         class="fixed top-0 left-0 w-full h-full bg-black sm:bg-black/90 z-[50] flex flex-col justify-center items-center overflow-hidden touch-none"
         ref="imageContainer"
+        @mousemove="handleActivity"
+        @touchstart="handleActivity"
+        @touchmove="handleActivity"
       >
         <!-- Dedicated Backdrop -->
         <div
@@ -46,7 +49,8 @@
         <!-- Caption -->
         <div
           v-if="currentImage.alt"
-          class="absolute bottom-4 p-2 text-center rounded-sm text-white text-sm bg-black/50 z-10"
+          class="absolute bottom-4 p-2 text-center rounded-sm text-white text-sm bg-black/65 z-10 transition-opacity duration-300 ease-in-out"
+          :class="{ 'opacity-0 pointer-events-none': !isControlsVisible }"
         >
           {{ currentImage.alt }}
         </div>
@@ -54,7 +58,8 @@
         <!-- Controls bar -->
         <div
           ref="controlsBar"
-          class="absolute top-4 flex items-center space-x-3 p-2 text-white z-20"
+          class="absolute top-4 flex items-center space-x-3 p-2 text-white z-20 transition-opacity duration-300 ease-in-out"
+          :class="{ 'opacity-0 pointer-events-none': !isControlsVisible }"
           @touchstart.stop
           @touchmove.stop
           @touchend.stop
@@ -62,7 +67,7 @@
           @wheel.stop
         >
           <!-- Navigation controls -->
-          <div class="bg-black bg-opacity-50 rounded flex items-center">
+          <div class="bg-black/65 rounded flex items-center">
             <Tooltip text="Previous image">
               <button
                 class="p-2 hover:bg-gray-900 rounded-l focus:outline-none"
@@ -117,7 +122,7 @@
           </div>
 
           <!-- Action controls -->
-          <div class="bg-black bg-opacity-50 rounded flex items-center">
+          <div class="bg-black/65 rounded flex items-center">
             <Tooltip text="Download image">
               <button
                 class="p-2 hover:bg-gray-900 rounded-l focus:outline-none"
@@ -141,7 +146,7 @@
           </div>
 
           <!-- Close button -->
-          <div class="bg-black bg-opacity-50 rounded flex items-center">
+          <div class="bg-black/65 rounded flex items-center">
             <Tooltip text="Close">
               <button
                 class="p-2 hover:bg-gray-900 rounded focus:outline-none"
@@ -204,6 +209,10 @@ const controlsBarHeight = ref(0)
 const isFullscreen = ref(false)
 const touchStartZoom = ref(100)
 
+const isControlsVisible = ref(true)
+const inactivityTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+const INACTIVITY_TIMEOUT = 3000 // 3 seconds
+
 const {
   zoomLevel,
   panPosition,
@@ -297,9 +306,33 @@ const {
 
 const isPanning = computed(() => isMousePanning.value || isTouchPanning.value)
 
+function showControlsAndResetTimer() {
+  isControlsVisible.value = true
+  if (inactivityTimer.value) {
+    clearTimeout(inactivityTimer.value)
+  }
+  inactivityTimer.value = setTimeout(() => {
+    if (!isPanning.value && !isPinching.value) {
+      isControlsVisible.value = false
+    } else {
+      showControlsAndResetTimer()
+    }
+  }, INACTIVITY_TIMEOUT)
+}
+
+function handleActivity() {
+  if (!isPinching.value || !isControlsVisible.value) {
+    showControlsAndResetTimer()
+  }
+}
+
 function close() {
   emit('update:show', false)
   resetZoom()
+  if (inactivityTimer.value) {
+    clearTimeout(inactivityTimer.value)
+    inactivityTimer.value = null
+  }
 }
 
 function downloadImage() {
@@ -342,6 +375,8 @@ function handleFullscreenChange() {
 function handleKeyDown(event: KeyboardEvent) {
   if (!props.show) return
 
+  handleActivity()
+
   switch (event.key) {
     case 'ArrowLeft':
       if (!isPanning.value) previousImage()
@@ -372,6 +407,25 @@ function handleKeyDown(event: KeyboardEvent) {
   }
 }
 
+watch(
+  () => props.show,
+  (newValue) => {
+    if (newValue) {
+      isControlsVisible.value = true
+      resetZoom()
+      showControlsAndResetTimer()
+    } else {
+      if (inactivityTimer.value) {
+        clearTimeout(inactivityTimer.value)
+        inactivityTimer.value = null
+      }
+      if (isFullscreen.value && document.exitFullscreen) {
+        document.exitFullscreen()
+      }
+    }
+  },
+)
+
 watch(controlsBar, (newVal) => {
   if (newVal) {
     const updateHeight = () => {
@@ -395,6 +449,10 @@ onUnmounted(() => {
   document.removeEventListener('fullscreenchange', handleFullscreenChange)
   document.removeEventListener('keydown', handleKeyDown)
 
+  if (inactivityTimer.value) {
+    clearTimeout(inactivityTimer.value)
+  }
+
   if (isFullscreen.value && document.exitFullscreen) {
     document.exitFullscreen()
   }