frappe-ui 0.1.216 → 0.1.220

package/frappe/Billing/SignupBanner.vue

@@ -25,7 +25,7 @@
   </Button>
 </template>
 <script setup>
-import LightningIcon from '../Icons/LightningIcon.vue'
+import LightningIcon from '../../icons/LightningIcon.vue'
 
 const props = defineProps({
   isSidebarCollapsed: {

package/frappe/Billing/TrialBanner.vue

@@ -23,7 +23,7 @@
   </Button>
 </template>
 <script setup>
-import LightningIcon from '../Icons/LightningIcon.vue'
+import LightningIcon from '../../icons/LightningIcon.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import { Button } from '../../src/components/Button'
 import { createResource } from '../../src/resources'

package/frappe/Help/HelpModal.vue

@@ -55,10 +55,10 @@
 <script setup>
 import Dropdown from '../../src/components/Dropdown/Dropdown.vue'
 import Button from '../../src/components/Button/Button.vue'
-import StepsIcon from '../Icons/StepsIcon.vue'
-import MinimizeIcon from '../Icons/MinimizeIcon.vue'
-import MaximizeIcon from '../Icons/MaximizeIcon.vue'
-import HelpIcon from '../Icons/HelpIcon.vue'
+import StepsIcon from '../../icons/StepsIcon.vue'
+import MinimizeIcon from '../../icons/MinimizeIcon.vue'
+import MaximizeIcon from '../../icons/MaximizeIcon.vue'
+import HelpIcon from '../../icons/HelpIcon.vue'
 import OnboardingSteps from '../Onboarding/OnboardingSteps.vue'
 import HelpCenter from '../HelpCenter/HelpCenter.vue'
 import { useOnboarding } from '../Onboarding/onboarding'

package/frappe/Onboarding/GettingStartedBanner.vue

@@ -56,7 +56,7 @@
   </Button>
 </template>
 <script setup>
-import StepsIcon from '../Icons/StepsIcon.vue'
+import StepsIcon from '../../icons/StepsIcon.vue'
 import Button from '../../src/components/Button/Button.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import { useOnboarding } from './onboarding'

package/frappe/index.d.ts

@@ -0,0 +1,53 @@
+// Since the export is via JS file, we need to declare the module here
+declare module 'frappe-ui/frappe' {
+  import type { Component, ComputedRef, Ref } from 'vue'
+
+  // Onboarding
+  export interface OnboardingStep {
+    name: string
+    completed: boolean
+    [key: string]: any
+  }
+
+  export function useOnboarding(appName: string):
+    | {
+        steps: OnboardingStep[]
+        stepsCompleted: ComputedRef<number>
+        totalSteps: ComputedRef<number>
+        completedPercentage: ComputedRef<number>
+        isOnboardingStepsCompleted: Ref<boolean>
+        updateOnboardingStep: (
+          step: string,
+          value?: boolean,
+          skipped?: boolean,
+          callback?: ((step: string, skipped: boolean) => void) | null,
+        ) => void
+        skip: (
+          step: string,
+          callback?: ((step: string, skipped: boolean) => void) | null,
+        ) => void
+        skipAll: (callback?: ((value: boolean) => void) | null) => void
+        reset: (
+          step: string,
+          callback?: ((step: string, skipped: boolean) => void) | null,
+        ) => void
+        resetAll: (callback?: ((value: boolean) => void) | null) => void
+        setUp: (steps: OnboardingStep[]) => void
+        syncStatus: () => void
+      }
+    | undefined
+
+  // Help Modal
+  export const showHelpModal: Ref<boolean>
+  export const minimize: Ref<boolean>
+  export const HelpModal: Component
+
+  // Banners
+  export const GettingStartedBanner: Component
+  export const TrialBanner: Component
+  export const IntermediateStepModal: Component
+
+  //   Components
+  export const Link: Component
+  export type { LinkProps } from './Link/types'
+}

package/icons/index.ts

@@ -0,0 +1,10 @@
+export { default as CircleCheckIcon } from './CircleCheckIcon.vue'
+export { default as DownSolidIcon } from './DownSolidIcon.vue'
+export { default as GreenCheckIcon } from './GreenCheckIcon.vue'
+
+// Frappe Icons
+export { default as HelpIcon } from './HelpIcon.vue'
+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'

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.216",
+  "version": "0.1.220",
   "description": "A set of components and utilities for rapid UI development",
-  "main": "./src/index.ts",
   "type": "module",
+  "sideEffects": false,
   "scripts": {
     "test": "vitest --run",
     "type-check": "tsc --noEmit",
@@ -17,11 +17,35 @@
     "story:build": "histoire build && cp 404.html .histoire/dist",
     "story:preview": "histoire preview"
   },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./frappe": {
+      "import": "./frappe/index.js"
+    },
+    "./icons": {
+      "import": "./icons/index.ts"
+    },
+    "./tailwind": {
+      "import": "./src/tailwind/preset.js",
+      "default": "./src/tailwind/preset.js"
+    },
+    "./vite": {
+      "import": "./vite/index.js"
+    },
+    "./style.css": {
+      "import": "./src/style.css"
+    },
+    "./tsconfig.base.json": "./tsconfig.base.json"
+  },
   "files": [
     "frappe",
     "src",
     "scripts",
-    "vite"
+    "vite",
+    "icons"
   ],
   "repository": {
     "type": "git",

package/src/components/Combobox/Combobox.story.vue

@@ -178,6 +178,24 @@ const state = reactive({
       </div>
     </Variant>
 
+    <Variant title="Outline variant">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Simple Options</label>
+        <Combobox
+          variant="outline"
+          :options="simpleOptions"
+          v-model="simpleValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :show-cancel="state.showCancel"
+          @update:selectedOption="selectedOption = $event"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ simpleValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
     <Variant title="Object Options">
       <div class="p-4">
         <label class="block text-sm font-medium mb-2">Object Options</label>

package/src/components/Combobox/Combobox.vue

@@ -33,6 +33,7 @@ import type {
 } from './types'
 
 const props = withDefaults(defineProps<ComboboxProps>(), {
+  variant: 'subtle',
   options: () => [],
 })
 const emit = defineEmits([
@@ -279,6 +280,13 @@ const reset = () => {
   emit('update:selectedOption', null)
 }
 
+const variantClasses = computed(() => {
+  return {
+    subtle: 'bg-surface-gray-2 hover:bg-surface-gray-3 border-transparent',
+    outline: 'border-outline-gray-2',
+  }[props.variant]
+})
+
 defineExpose({
   reset,
 })
@@ -294,8 +302,11 @@ defineExpose({
       :open="isOpen"
     >
       <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 }"
+        class="flex h-7 w-full items-center justify-between gap-2 rounded px-2 py-1 transition-colors border focus-within:border-outline-gray-4 focus-within:ring-2 focus-within:ring-outline-gray-3"
+        :class="{
+          'opacity-50 pointer-events-none': disabled,
+          [variantClasses]: true,
+        }"
         @click="handleClick"
       >
         <div class="flex items-center gap-2 flex-1 overflow-hidden">

package/src/components/Combobox/types.ts

@@ -26,6 +26,7 @@ export type GroupedOption = { group: string; options: SimpleOption[] }
 export type ComboboxOption = SimpleOption | GroupedOption
 
 export interface ComboboxProps {
+  variant?: 'subtle' | 'outline'
   options: Array<ComboboxOption>
   modelValue?: string | null
   placeholder?: string
@@ -33,4 +34,4 @@ export interface ComboboxProps {
   openOnFocus?: boolean
   openOnClick?: boolean
   placement?: 'start' | 'center' | 'end'
-}
+}

package/src/components/DatePicker/index.ts

@@ -0,0 +1,6 @@
+export { default as DatePicker } from './DatePicker.vue'
+export { default as DateRangePicker } from './DateRangePicker.vue'
+export { default as DateTimePicker } from './DateTimePicker.vue'
+export * from './types'
+export { useDatePicker } from './useDatePicker'
+export * from './utils'

package/src/components/Dropdown/Dropdown.vue

@@ -53,7 +53,13 @@
                   :model-value="item.switchValue || false"
                 />
               </div>
-              <DropdownMenuItem v-else as-child @select="item.onClick">
+              <DropdownMenuItem
+                v-else
+                as-child
+                @select="item.onClick"
+                :disabled="item.disabled"
+                class="data-[disabled]:cursor-not-allowed"
+              >
                 <slot v-if="$slots.item" name="item" v-bind="{ item, close }" />
                 <component
                   v-else-if="item.component"
@@ -160,6 +166,8 @@
                               (event: PointerEvent) =>
                                 handleItemClick(subItem, event)
                             "
+                            :disabled="subItem.disabled"
+                            class="data-[disabled]:cursor-not-allowed"
                           >
                             <component
                               v-if="subItem.component"
@@ -310,10 +318,16 @@ const normalizeDropdownItem = (option: DropdownOption) => {
   }
 }
 
-const getIconColor = (item: DropdownItem) =>
-  item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-6'
-const getTextColor = (item: DropdownItem) =>
-  item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-7'
+const getIconColor = (item: DropdownItem) => {
+  if (item.disabled) return 'text-ink-gray-4'
+  return item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-6'
+}
+
+const getTextColor = (item: DropdownItem) => {
+  if (item.disabled) return 'text-ink-gray-4'
+  return item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-7'
+}
+
 const getBackgroundColor = (item: DropdownItem) =>
   item.theme === 'red'
     ? 'focus:bg-surface-red-3 data-[highlighted]:bg-surface-red-3 data-[state=open]:bg-surface-red-3'

package/src/components/Dropdown/types.ts

@@ -6,6 +6,7 @@ export type DropdownOption = {
   label: string
   icon?: string | Component | null
   switch?: boolean
+  disabled?: boolean
   switchValue?: boolean
   theme?: 'gray' | 'red'
   component?: any

package/src/components/ListView/ListGroupHeader.vue

@@ -26,7 +26,7 @@
 </template>
 <script setup>
 import { inject } from 'vue'
-import DownSolid from '../../icons/DownSolid.vue'
+import DownSolid from '../../../icons/DownSolidIcon.vue'
 
 const props = defineProps({
   group: {

package/src/components/ListView/ListGroupRows.vue

@@ -2,6 +2,11 @@
   <div class="mb-5 mt-2" v-if="!group.collapsed">
     <slot>
       <ListRow v-for="row in group.rows" :key="row[list.rowKey]" :row="row" />
+      <component
+        v-if="list.slots['group-empty'] && group.rows.length == 0"
+        :is="list.slots['group-empty']"
+        v-bind="{ group }"
+      />
     </slot>
   </div>
 </template>

package/src/components/Select/Select.story.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Select from './Select.vue'
+import LucideUser from '~icons/lucide/user'
 
 const value = ref('')
 const options = [
@@ -14,8 +15,20 @@ const options = [
 </script>
 <template>
   <Story :layout="{ width: 500, type: 'grid' }">
-    <div class="p-2">
-      <Select :options="options" v-model="value" />
-    </div>
+    <Variant title="Default">
+      <div class="p-2">
+        <Select :options="options" v-model="value" />
+      </div>
+    </Variant>
+
+    <Variant title="With prefix">
+      <div class="p-2">
+        <Select :options="options" v-model="value">
+          <template #prefix>
+            <LucideUser class="size-4 text-ink-gray-9" />
+          </template>
+        </Select>
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/Select/Select.vue

@@ -1,83 +1,25 @@
-<template>
-  <div class="relative flex items-center">
-    <div
-      :class="[
-        'absolute inset-y-0 left-0 flex items-center',
-        textColor,
-        prefixClasses,
-      ]"
-      v-if="$slots.prefix"
-    >
-      <slot name="prefix"> </slot>
-    </div>
-    <div
-      v-if="placeholder"
-      v-show="!modelValue"
-      class="pointer-events-none absolute text-ink-gray-4 truncate w-full"
-      :class="[fontSizeClasses, paddingClasses]"
-    >
-      {{ placeholder }}
-    </div>
-    <select
-      :class="selectClasses"
-      :disabled="disabled"
-      :id="id"
-      :value="modelValue"
-      @change="handleChange"
-      v-bind="attrs"
-    >
-      <option
-        v-for="option in selectOptions"
-        :key="option.value"
-        :value="option.value"
-        :disabled="option.disabled || false"
-        :selected="modelValue === option.value"
-      >
-        {{ option.label }}
-      </option>
-    </select>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { computed, useSlots, useAttrs } from 'vue'
+import { computed } from 'vue'
 import type { SelectProps } from './types'
+import LucideChevronDown from '~icons/lucide/chevron-down'
 
-defineOptions({
-  inheritAttrs: false,
-})
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from 'reka-ui'
+
+const model = defineModel<String>()
 
 const props = withDefaults(defineProps<SelectProps>(), {
   size: 'sm',
   variant: 'subtle',
-})
-
-const emit = defineEmits(['update:modelValue'])
-const slots = useSlots()
-const attrs = useAttrs()
-
-function handleChange(e: Event) {
-  emit('update:modelValue', (e.target as HTMLInputElement).value)
-}
-
-const selectOptions = computed(() => {
-  return (
-    props.options
-      ?.map((option) => {
-        if (typeof option === 'string') {
-          return {
-            label: option,
-            value: option,
-          }
-        }
-        return option
-      })
-      .filter(Boolean) || []
-  )
-})
-
-const textColor = computed(() => {
-  return props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
+  placeholder: 'Select option',
 })
 
 const fontSizeClasses = computed(() => {
@@ -91,29 +33,29 @@ const fontSizeClasses = computed(() => {
 
 const paddingClasses = computed(() => {
   return {
-    sm: 'pl-2 pr-5',
-    md: 'pl-2.5 pr-5.5',
-    lg: 'pl-3 pr-6',
-    xl: 'pl-3 pr-6',
+    sm: 'px-2',
+    md: 'px-2.5 ',
+    lg: 'px-3',
+    xl: 'px-3',
   }[props.size]
 })
 
-const selectClasses = computed(() => {
-  let sizeClasses = {
-    sm: 'rounded h-7',
-    md: 'rounded h-8',
-    lg: 'rounded-md h-10',
-    xl: 'rounded-md h-10',
-  }[props.size]
+let sizeClasses = {
+  sm: 'rounded min-h-7',
+  md: 'rounded min-h-8',
+  lg: 'rounded-md min-h-10',
+  xl: 'rounded-md min-h-10',
+}[props.size]
 
+const selectClasses = computed(() => {
   let variant = props.disabled ? 'disabled' : props.variant
   let variantClasses = {
     subtle:
-      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-gray-modals hover:bg-surface-gray-3',
     outline:
-      'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3',
     ghost:
-      'bg-transparent border-transparent hover:bg-surface-gray-3 focus:bg-surface-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'bg-transparent border-transparent hover:bg-surface-gray-3 focus:bg-surface-gray-3',
     disabled: [
       'border',
       props.variant !== 'ghost' ? 'bg-surface-gray-1' : '',
@@ -128,17 +70,88 @@ const selectClasses = computed(() => {
     fontSizeClasses.value,
     paddingClasses.value,
     variantClasses,
-    textColor.value,
-    'transition-colors w-full py-0 truncate',
+    'transition-colors w-full data-[state=open]:ring-2 ring-outline-gray-2 ',
   ]
 })
 
-let prefixClasses = computed(() => {
-  return {
-    sm: 'pl-2',
-    md: 'pl-2.5',
-    lg: 'pl-3',
-    xl: 'pl-3',
-  }[props.size]
+const selectOptions = computed(() => {
+  const str = typeof props.options?.[0] == 'string'
+  const tmp = props.options?.map((x) => ({ label: x, value: x }))
+  return (str ? tmp : props.options)?.filter(Boolean) || []
 })
 </script>
+
+<template>
+  <SelectRoot v-model="model">
+    <SelectTrigger
+      class="inline-flex items-center gap-2 outline-none text-base data-[placeholder]:text-ink-gray-4 data-[disabled]:text-ink-gray-4"
+      aria-label="Customise options"
+      :class="selectClasses"
+      :disabled="props.disabled"
+    >
+      <slot name="prefix" />
+      <SelectValue :placeholder="props.placeholder" />
+      <LucideChevronDown class="size-4 text-ink-gray-4 ml-auto" />
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        class="bg-surface-modal border rounded-lg shadow-lg will-change-[opacity,transform] z-[100] min-w-[--reka-select-trigger-width] max-h-[--reka-select-content-available-height] overflow-auto"
+        :side-offset="5"
+        position="popper"
+      >
+        <SelectViewport class="p-1 flex flex-col">
+          <SelectItem
+            v-for="(option, index) in selectOptions"
+            :disabled="option.disabled"
+            :key="index"
+            :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"
+          >
+            <SelectItemText>
+              {{ option.label }}
+            </SelectItemText>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<style>
+@keyframes slideDownFade {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes slideUpFade {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+[data-side='top'] {
+  animation: slideDownFade 280ms;
+}
+
+[data-side='bottom'] {
+  animation: slideUpFade 280ms;
+}
+
+[data-highlighted],
+[data-state='checked'] {
+  outline: none !important;
+}
+</style>

package/src/components/Sidebar/index.ts

@@ -1,2 +1,5 @@
 export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarItem } from './SidebarItem.vue'
+export { default as SidebarSection } from './SidebarSection.vue'
 export type { SidebarProps } from './types'

package/src/components/Toast/Toast.vue

@@ -56,7 +56,7 @@ import { ToastAction, ToastClose, ToastDescription, ToastRoot } from 'reka-ui'
 import LucideInfo from '~icons/lucide/info'
 import LucideAlertTriangle from '~icons/lucide/alert-triangle'
 import LucideX from '~icons/lucide/x'
-import CircleCheck from '../../icons/CircleCheck.vue'
+import CircleCheck from '../../../icons/CircleCheckIcon.vue'
 import type { ToastProps } from './types'
 
 const props = defineProps<ToastProps>()

package/src/data-fetching/index.ts

@@ -1,6 +1,8 @@
+export * from './useCall/types'
 export { useCall } from './useCall/useCall'
-export { useList } from './useList/useList'
 export { useDoc } from './useDoc/useDoc'
 export { useDoctype } from './useDoctype/useDoctype'
-export { useNewDoc } from './useNewDoc/useNewDoc'
 export { useFrappeFetch } from './useFrappeFetch'
+export * from './useList/types'
+export { useList } from './useList/useList'
+export { useNewDoc } from './useNewDoc/useNewDoc'

package/src/index.ts

@@ -9,9 +9,7 @@ export * from './components/Button'
 export { default as Card } from './components/Card.vue'
 export * from './components/Combobox'
 export * from './components/Checkbox'
-export { default as DatePicker } from './components/DatePicker/DatePicker.vue'
-export { default as DateTimePicker } from './components/DatePicker/DateTimePicker.vue'
-export { default as DateRangePicker } from './components/DatePicker/DateRangePicker.vue'
+export * from './components/DatePicker'
 export * from './components/Dialog'
 export { default as Dialogs } from './components/Dialogs.vue'
 export * from './components/Divider'
@@ -21,7 +19,6 @@ export { default as FeatherIcon } from './components/FeatherIcon.vue'
 export * from './components/FileUploader'
 export * from './components/FormControl'
 export { default as FormLabel } from './components/FormLabel.vue'
-export { default as GreenCheckIcon } from './components/GreenCheckIcon.vue'
 export { default as Input } from './components/Input.vue'
 export { default as ListItem } from './components/ListItem.vue'
 export { default as LoadingIndicator } from './components/LoadingIndicator.vue'
@@ -67,7 +64,9 @@ export * from './components/Calendar'
 export * from './components/CircularProgressBar'
 export * from './components/Tree'
 export { default as FrappeUIProvider } from './components/Provider/FrappeUIProvider.vue'
-export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
+export * from './components/Sidebar/index.ts'
+export { default as ConfirmDialog } from './components/ConfirmDialog.vue'
+
 
 // grid layout
 export { default as GridLayout } from './components/VueGridLayout/Layout.vue'
@@ -92,33 +91,20 @@ export { usePageMeta } from './utils/pageMeta'
 export { dayjsLocal, dayjs } from './utils/dayjs'
 export * from './utils/useFileUpload'
 export * from './utils/theme'
+export * from './components/TextEditor/extensions/image'
 
 // old data-fetching: resources
-export {
-  createResource,
-  createDocumentResource,
-  createListResource,
-  getCachedResource,
-  getCachedDocumentResource,
-  getCachedListResource,
-  resourcesPlugin,
-} from './resources/index.js'
+export * from './resources/index.ts'
+
 export { request } from './utils/request.js'
 export { frappeRequest } from './utils/frappeRequest.js'
 export { default as initSocket } from './utils/socketio.js'
 export { setConfig, getConfig } from './utils/config'
 
 // new data-fetching composables
-export {
-  useCall,
-  useList,
-  useDoc,
-  useNewDoc,
-  useDoctype,
-  useFrappeFetch,
-} from './data-fetching'
+export * from './data-fetching'
 
 // plugin
+export { confirmDialog } from './utils/confirmDialog.js'
 export { default as pageMetaPlugin } from './utils/pageMeta.js'
 export { default as FrappeUI } from './utils/plugin.js'
-export { confirmDialog } from './utils/confirmDialog.js'

package/src/resources/{index.js → index.ts}

@@ -1,7 +1,9 @@
-export { createResource, getCachedResource } from './resources'
 export {
   createDocumentResource,
   getCachedDocumentResource,
 } from './documentResource'
 export { createListResource, getCachedListResource } from './listResource'
+export * from './local'
 export { default as resourcesPlugin } from './plugin'
+export * from './realtime'
+export { createResource, getCachedResource } from './resources'

package/src/resources/{local.js → local.ts}

@@ -1,6 +1,6 @@
-import { get, set, del } from 'idb-keyval'
+import { del, get, set } from 'idb-keyval'
 
-export function saveLocal(key, data) {
+export function saveLocal<T = any>(key: string, data: T): Promise<void | null> {
   if (typeof indexedDB === 'undefined') {
     return Promise.resolve(null)
   }
@@ -8,7 +8,7 @@ export function saveLocal(key, data) {
   return set(key, JSON.stringify(data))
 }
 
-export function deleteLocal(key) {
+export function deleteLocal(key: string): Promise<void | null> {
   if (typeof indexedDB === 'undefined') {
     return Promise.resolve(null)
   }
@@ -16,7 +16,7 @@ export function deleteLocal(key) {
   return del(key)
 }
 
-export function getLocal(key) {
+export function getLocal<T = any>(key: string): Promise<T | null> {
   if (typeof indexedDB === 'undefined') {
     return Promise.resolve(null)
   }

package/src/resources/realtime.ts

@@ -0,0 +1,21 @@
+import { Socket } from 'socket.io-client'
+
+export function onDocUpdate(
+  socket: Socket,
+  doctype: string,
+  callback: (name: string) => void,
+): void {
+  subscribe(socket, doctype)
+  socket.on('list_update', (data) => {
+    if (data.doctype == doctype) {
+      callback(data.name)
+    }
+  })
+}
+
+let subscribed: Record<string, boolean> = {}
+function subscribe(socket: Socket, doctype: string): void {
+  if (subscribed[doctype]) return
+  socket.emit('doctype_subscribe', doctype)
+  subscribed[doctype] = true
+}

package/src/resources/realtime.js

@@ -1,15 +0,0 @@
-export function onDocUpdate(socket, doctype, callback) {
-  subscribe(socket, doctype)
-  socket.on('list_update', (data) => {
-    if (data.doctype == doctype) {
-      callback(data.name)
-    }
-  })
-}
-
-let subscribed = {}
-function subscribe(socket, doctype) {
-  if (subscribed[doctype]) return
-  socket.emit('doctype_subscribe', doctype)
-  subscribed[doctype] = true
-}