frappe-ui 0.1.216 → 0.1.218

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/package.json

@@ -1,9 +1,9 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.216",
+  "version": "0.1.218",
   "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,6 +17,29 @@
     "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",

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/frappe/Icons/HelpIcon.vue

@@ -1,16 +0,0 @@
-<template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.25 8C14.25 11.4518 11.4518 14.25 8 14.25C4.54822 14.25 1.75 11.4518 1.75 8C1.75 4.54822 4.54822 1.75 8 1.75C11.4518 1.75 14.25 4.54822 14.25 8ZM15.25 8C15.25 12.0041 12.0041 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C12.0041 0.75 15.25 3.99594 15.25 8ZM7.37988 9.37695V9.44531H8.39062V9.37695C8.39062 9.10352 8.41992 8.88542 8.47852 8.72266C8.53711 8.55664 8.62826 8.41504 8.75195 8.29785C8.87891 8.18066 9.04329 8.06185 9.24512 7.94141C9.56087 7.74609 9.8099 7.51009 9.99219 7.2334C10.1745 6.95345 10.2656 6.61328 10.2656 6.21289C10.2656 5.82878 10.1745 5.49186 9.99219 5.20215C9.81315 4.91244 9.56087 4.6862 9.23535 4.52344C8.90983 4.36068 8.52734 4.2793 8.08789 4.2793C7.69401 4.2793 7.33268 4.35579 7.00391 4.50879C6.67513 4.65853 6.41146 4.88151 6.21289 5.17773C6.01432 5.4707 5.90853 5.82878 5.89551 6.25195H6.96973C6.986 6.0013 7.04948 5.79785 7.16016 5.6416C7.27083 5.4821 7.40755 5.36491 7.57031 5.29004C7.73633 5.21517 7.90885 5.17773 8.08789 5.17773C8.28971 5.17773 8.47363 5.22005 8.63965 5.30469C8.80892 5.38932 8.94075 5.50814 9.03516 5.66113C9.13281 5.81413 9.18164 5.99479 9.18164 6.20312C9.18164 6.47005 9.11003 6.69954 8.9668 6.8916C8.82357 7.0804 8.64453 7.23828 8.42969 7.36523C8.21159 7.50195 8.02279 7.64193 7.86328 7.78516C7.70703 7.92513 7.58659 8.11556 7.50195 8.35645C7.42057 8.59408 7.37988 8.93425 7.37988 9.37695ZM7.37988 11.5205C7.51986 11.654 7.69076 11.7207 7.89258 11.7207C8.09766 11.7207 8.26855 11.654 8.40527 11.5205C8.54525 11.3838 8.61523 11.2161 8.61523 11.0176C8.61523 10.8158 8.54525 10.6481 8.40527 10.5146C8.26855 10.3779 8.09766 10.3096 7.89258 10.3096C7.69076 10.3096 7.51986 10.3779 7.37988 10.5146C7.24316 10.6481 7.1748 10.8158 7.1748 11.0176C7.1748 11.2161 7.24316 11.3838 7.37988 11.5205Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>

package/frappe/Icons/LightningIcon.vue

@@ -1,16 +0,0 @@
-<template>
-  <svg
-    width="17"
-    height="16"
-    viewBox="0 0 17 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M6.2641 1C5.5758 1 4.97583 1.46845 4.80889 2.1362L3.57555 7.06953C3.33887 8.01625 4.05491 8.93333 5.03077 8.93333H7.50682L6.72168 14.4293C6.68838 14.6624 6.82229 14.8872 7.04319 14.9689C7.26408 15.0507 7.51204 14.9671 7.63849 14.7684L13.2161 6.00354C13.6398 5.33782 13.1616 4.46667 12.3725 4.46667H9.59038L10.3017 1.62127C10.3391 1.4719 10.3055 1.31365 10.2108 1.19229C10.116 1.07094 9.97063 1 9.81666 1H6.2641ZM5.77903 2.37873C5.83468 2.15615 6.03467 2 6.2641 2H9.17627L8.46492 4.8454C8.42758 4.99477 8.46114 5.15302 8.55589 5.27437C8.65064 5.39573 8.79602 5.46667 8.94999 5.46667H12.3725L8.0395 12.2757L8.5783 8.50404C8.5988 8.36056 8.55602 8.21523 8.46105 8.10573C8.36608 7.99623 8.22827 7.93333 8.08332 7.93333H5.03077C4.70548 7.93333 4.4668 7.62764 4.5457 7.31207L5.77903 2.37873Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>

package/frappe/Icons/MaximizeIcon.vue

@@ -1,19 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-maximize-2"
-  >
-    <polyline points="15 3 21 3 21 9" />
-    <polyline points="9 21 3 21 3 15" />
-    <line x1="21" y1="3" x2="14" y2="10" />
-    <line x1="3" y1="21" x2="10" y2="14" />
-  </svg>
-</template>

package/frappe/Icons/MinimizeIcon.vue

@@ -1,19 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-minimize-2"
-  >
-    <polyline points="4 14 10 14 10 20" />
-    <polyline points="20 10 14 10 14 4" />
-    <line x1="14" y1="10" x2="21" y2="3" />
-    <line x1="3" y1="21" x2="10" y2="14" />
-  </svg>
-</template>

package/frappe/Icons/StepsIcon.vue

@@ -1,16 +0,0 @@
-<template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8 6.5C9.10457 6.5 10 5.60457 10 4.5C10 3.39543 9.10457 2.5 8 2.5C6.89543 2.5 6 3.39543 6 4.5C6 5.60457 6.89543 6.5 8 6.5ZM8 7.5C9.65685 7.5 11 6.15685 11 4.5C11 2.84315 9.65685 1.5 8 1.5C6.34315 1.5 5 2.84315 5 4.5C5 6.15685 6.34315 7.5 8 7.5ZM12 13.5C13.1046 13.5 14 12.6046 14 11.5C14 10.3954 13.1046 9.5 12 9.5C10.8954 9.5 10 10.3954 10 11.5C10 12.6046 10.8954 13.5 12 13.5ZM12 14.5C13.6569 14.5 15 13.1569 15 11.5C15 9.84315 13.6569 8.5 12 8.5C10.3431 8.5 9 9.84315 9 11.5C9 13.1569 10.3431 14.5 12 14.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM7 11.5C7 13.1569 5.65685 14.5 4 14.5C2.34315 14.5 1 13.1569 1 11.5C1 9.84315 2.34315 8.5 4 8.5C5.65685 8.5 7 9.84315 7 11.5Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>

package/src/components/GreenCheckIcon.vue

@@ -1,16 +0,0 @@
-<template>
-  <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z"
-      fill="#59B179"
-    />
-    <path
-      d="M9.333 17.227l1.333 1.333 2.667 2.667 5.333-5.333 2.667-2.667 1.333-1.333"
-      stroke="#fff"
-      stroke-width="2"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
-</template>

package/src/icons/CircleCheck.vue

@@ -1,9 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
-    <path
-      fill="currentColor"
-      d="M8 .75a7.25 7.25 0 1 1 0 14.5A7.25 7.25 0 0 1 8 .75Zm0 1a6.25 6.25 0 1 0 0 12.5 6.25 6.25 0 0 0 0-12.5Zm2.59 3.527a.501.501 0 0 1 .758.623l-.057.085-3.848 4.666a.501.501 0 0 1-.78-.011L4.936 8.41l-.053-.086a.501.501 0 0 1 .775-.6l.07.074 1.34 1.733 3.45-4.183.072-.072Z"
-    />
-  </svg>
-</template>
-<script setup lang="ts"></script>

package/src/icons/DownSolid.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
-    <path
-      fill="currentColor"
-      d="M4.293 5.28h7.413a.5.5 0 0 1 .41.787l-3.707 5.295a.5.5 0 0 1-.82 0L3.884 6.067a.5.5 0 0 1 .41-.787Z"
-    />
-  </svg>
-</template>

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
-}