pimelon-ui 0.1.198 → 0.1.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.198",
+  "version": "0.1.201",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",

package/src/components/Combobox/Combobox.vue

@@ -53,6 +53,12 @@ watch(
     searchTerm.value = getDisplayValue(newValue)
   },
 )
+watch(
+  () => getDisplayValue(props.modelValue),
+  (newDisplay) => {
+    if (!userHasTyped.value) searchTerm.value = newDisplay
+  },
+)
 
 const onUpdateModelValue = (value: string | null) => {
   const selectedOpt = value
@@ -311,7 +317,7 @@ defineExpose({
           position="popper"
           @openAutoFocus.prevent
           @closeAutoFocus.prevent
-          :align="'start'"
+          :align="props.placement || 'start'"
         >
           <ComboboxViewport
             class="max-h-60 overflow-auto pb-1.5"

package/src/components/Combobox/types.ts

@@ -32,4 +32,5 @@ export interface ComboboxProps {
   disabled?: boolean
   openOnFocus?: boolean
   openOnClick?: boolean
+  placement?: 'start' | 'center' | 'end'
 }

package/src/components/DatePicker/DatePicker.vue

@@ -202,6 +202,7 @@ import { ref, computed, watch, toRefs } from 'vue'
 import { Popover } from '../Popover'
 import { Button } from '../Button'
 import { TextInput } from '../TextInput'
+// @ts-ignore - Vue SFC without explicit types
 import FeatherIcon from '../FeatherIcon.vue'
 import { dayjs, dayjsLocal } from '../../utils/dayjs'
 import { months, monthStart, generateWeeks, getDateValue } from './utils'
@@ -235,7 +236,7 @@ const currentMonth = ref<number>(dayjs().month()) // 0-index
 const DATE_FORMAT = 'YYYY-MM-DD'
 
 const selected = ref<string>('')
-const initialValue = props.modelValue || props.value || ''
+const initialValue = ref(props.modelValue || props.value || '')
 
 function coerceToDayjs(val?: string | null): Dayjs | null {
   if (!val) return null
@@ -277,7 +278,7 @@ function syncFromValue(val?: string): void {
   selected.value = d.format(DATE_FORMAT)
 }
 
-syncFromValue(initialValue)
+syncFromValue(initialValue.value)
 
 function initFromValue(): void {
   syncFromValue(props.modelValue || props.value)
@@ -308,10 +309,6 @@ watch(displayLabel, (val) => {
   if (!isTyping.value) inputValue.value = val
 })
 
-function parseInput(val: string): Dayjs | null {
-  return coerceToDayjs(val)
-}
-
 function maybeClose(togglePopover?: () => void, condition = true) {
   if (condition && autoClose.value && togglePopover) togglePopover()
 }
@@ -321,6 +318,7 @@ function clearSelection() {
   selected.value = ''
   emit('update:modelValue', '')
   emit('change', '')
+  initialValue.value = ''
   inputValue.value = ''
 }
 
@@ -336,7 +334,7 @@ function commitInput(close = false, togglePopover?: () => void): void {
     }
     return
   }
-  const d = parseInput(raw)
+  const d = coerceToDayjs(raw)
   if (d) {
     selectDate(d)
     maybeClose(togglePopover, close)
@@ -370,8 +368,13 @@ function selectDate(date: string | Date | Dayjs): void {
   selected.value = d.format(DATE_FORMAT)
   currentYear.value = d.year()
   currentMonth.value = d.month()
-  emit('update:modelValue', selected.value)
-  if (selected.value !== prev) emit('change', selected.value)
+
+  if (selected.value !== initialValue.value) {
+    emit('update:modelValue', selected.value)
+    if (selected.value !== prev) emit('change', selected.value)
+    initialValue.value = selected.value
+  }
+
   // Reflect new value in input immediately if not typing
   if (!isTyping.value) {
     inputValue.value = props.format

package/src/components/DatePicker/DateTimePicker.vue

@@ -273,7 +273,7 @@ const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
 const selectedDate = ref<string>('') // YYYY-MM-DD
 const timeValue = ref<string>('') // HH:mm:ss
 
-const initialValue = props.modelValue || props.value || ''
+const initialValue = ref(props.modelValue || props.value || '')
 
 function coerceDateTime(val?: string | null): Dayjs | null {
   if (!val) return null
@@ -285,12 +285,12 @@ function coerceDateTime(val?: string | null): Dayjs | null {
     if (dStrict.isValid()) return dStrict
   }
 
-  const dLoose = dayjs(raw)
+  const dLoose = dayjsLocal(raw)
   if (dLoose.isValid()) return dLoose
 
   const normalized = getDateValue(raw)
   if (normalized) {
-    const dNorm = dayjs(normalized)
+    const dNorm = dayjsLocal(normalized)
     if (dNorm.isValid()) return dNorm
   }
   return null
@@ -322,7 +322,7 @@ function syncFromValue(val?: string): void {
   timeValue.value = d.format('HH:mm:ss')
 }
 
-syncFromValue(initialValue)
+syncFromValue(initialValue.value)
 
 function initFromValue(): void {
   syncFromValue(props.modelValue || props.value)
@@ -339,10 +339,9 @@ watch(
 const combinedValue = computed<string>(() => {
   if (!selectedDate.value) return ''
   const base = `${selectedDate.value} ${timeValue.value || '00:00:00'}`
-  const local = dayjsLocal(base)
+  const local = dayjs(base)
   if (!local.isValid()) return ''
-  const sys = dayjsSystem(local.format(DATE_TIME_FORMAT))
-  return sys.format(DATE_TIME_FORMAT)
+  return local.format(DATE_TIME_FORMAT)
 })
 
 const displayLabel = computed<string>(() => {
@@ -367,6 +366,7 @@ function clearSelection() {
   timeValue.value = ''
   emit('update:modelValue', '')
   emit('change', '')
+  initialValue.value = ''
   inputValue.value = ''
 }
 
@@ -512,10 +512,16 @@ function emitChange(close = false, togglePopover?: () => void) {
     clearSelection()
     return
   }
-  const out = combinedValue.value
 
-  emit('update:modelValue', out)
-  emit('change', out)
+  const localDateTime = combinedValue.value
+  const systemDateTime = dayjsSystem(localDateTime).format(DATE_TIME_FORMAT)
+
+  if (systemDateTime !== initialValue.value) {
+    emit('update:modelValue', systemDateTime)
+    emit('change', systemDateTime)
+    initialValue.value = systemDateTime
+  }
+
   if (!isTyping.value) inputValue.value = displayLabel.value
   maybeClose(togglePopover, close)
 }

package/src/components/Dialog/Dialog.vue

@@ -11,7 +11,7 @@
           :class="dialogPositionClasses"
         >
           <DialogContent
-            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl dialog-content"
+            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl dialog-content focus-visible:outline-none"
             :class="{
               'max-w-7xl': options.size === '7xl',
               'max-w-6xl': options.size === '6xl',

package/src/components/ListView/ListEmptyState.vue

@@ -3,7 +3,7 @@
     class="flex h-full w-full flex-col items-center justify-center text-base"
   >
     <slot>
-      <div class="text-xl font-medium">{{ list.options.emptyState.title }}</div>
+      <div class="text-xl font-medium text-ink-gray-8 mt-6">{{ list.options.emptyState.title }}</div>
       <div class="mt-1 text-base text-ink-gray-5">
         {{ list.options.emptyState.description }}
       </div>

package/src/components/Sidebar/SidebarItem.vue

@@ -2,7 +2,7 @@
   <Button
     :label="props.label"
     @click="handleClick"
-    class="!w-full"
+    class="!w-full focus-visible:ring-0 focus:outline-none"
     :class="
       props.isActive
         ? '!bg-surface-selected shadow-sm'

package/src/components/TextEditor/TextEditor.vue

@@ -230,6 +230,9 @@ onMounted(() => {
     onUpdate: ({ editor }) => {
       emit('change', editor.getHTML())
     },
+    onTransaction: ({ editor }) => {
+      emit('transaction', editor)
+    },
     onFocus: ({ editor, event }) => {
       emit('focus', event)
     },

package/src/components/TextEditor/extensions/iframe/IframeNodeView.vue

@@ -204,7 +204,9 @@ function setCursorBeforeIframe() {
           v-if="node.attrs.src"
           ref="iframeRef"
           class="rounded-lg border-0 block max-w-full h-auto"
-          :class="{ 'pointer-events-none': isEditable }"
+          :class="{
+            'pointer-events-none': isEditable && !props.node.attrs.interactive,
+          }"
           :src="node.attrs.src"
           :style="iframeStyles"
           :title="node.attrs.title || ''"
@@ -218,7 +220,7 @@ function setCursorBeforeIframe() {
 
         <!-- Transparent overlay for selection in edit mode -->
         <div
-          v-if="isEditable"
+          v-if="isEditable && !props.node.attrs.interactive"
           class="absolute inset-0 cursor-pointer z-10"
           @click.stop="selectIframe"
         ></div>

package/src/components/TextEditor/extensions/iframe/iframe-extension.ts

@@ -20,6 +20,7 @@ export interface SetIframeOptions {
   width?: number
   height?: number
   title?: string
+  interactive?: boolean
   align?: 'left' | 'center' | 'right'
 }
 
@@ -128,6 +129,13 @@ export const IframeExtension = Node.create<IframeOptions>({
           sandbox: attributes.sandbox,
         }),
       },
+      interactive: {
+        default: false,
+        parseHTML: (el) => el.getAttribute('data-interactive') === 'true',
+        renderHTML: (attrs) => ({
+          'data-interactive': attrs.interactive ? 'true' : 'false',
+        }),
+      },
     }
   },
 
@@ -196,7 +204,8 @@ export const IframeExtension = Node.create<IframeOptions>({
             height: options.height || optimalDimensions.height,
             title: options.title,
             align: options.align || 'center',
-            aspectRatio: optimalDimensions.height / optimalDimensions.width
+            aspectRatio: optimalDimensions.height / optimalDimensions.width,
+            interactive: options.interactive,
           }
 
           return commands.insertContent({

package/src/components/TextEditor/extensions/iframe/utils.ts

@@ -133,6 +133,7 @@ export function getOptimalDimensions(url: string, containerWidth?: number): { wi
 
 export function validateURL(url: string, options: IframeOptions): boolean {
   try {
+    if (url.startsWith('/')) return true
     const urlObj = new URL(url)
     const domain = urlObj.hostname.toLowerCase()
 

package/src/components/TextEditor/types.ts

@@ -31,4 +31,5 @@ export interface TextEditorEmits {
   change: [content: string]
   focus: [event: FocusEvent]
   blur: [event: FocusEvent]
+  transaction: [editor: object]
 }

package/src/resources/documentResource.js

@@ -40,6 +40,9 @@ export function createDocumentResource(options, vm) {
         fieldname: values,
       }
     },
+    validate(data) {
+      options.setValue?.validate?.call(vm, data)
+    },
     beforeSubmit(params) {
       out.previousDoc = JSON.stringify(out.doc)
       Object.assign(out.doc, params.fieldname || {})

package/vite/melonProxy.js

@@ -5,7 +5,7 @@ export function melonProxy({
   source = '^/(app|login|api|assets|files|private)',
 } = {}) {
   const commonSiteConfig = getCommonSiteConfig()
-  const env_web_server_port = process.env.FRAPPE_WEB_SERVER_PORT
+  const env_web_server_port = process.env.MELON_WEB_SERVER_PORT
   const webserver_port =
     env_web_server_port ||
     (commonSiteConfig ? commonSiteConfig.webserver_port : 8000)