frappe-ui 0.1.45 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -50,6 +50,7 @@
     "@vueuse/core": "^10.4.1",
     "feather-icons": "^4.28.0",
     "idb-keyval": "^6.2.0",
+    "radix-vue": "^1.5.3",
     "showdown": "^2.1.0",
     "socket.io-client": "^4.5.1",
     "tippy.js": "^6.3.7"

package/src/components/ListView/ListRowItem.vue

@@ -25,7 +25,7 @@
 </template>
 <script setup>
 import { computed, inject } from 'vue'
-import Tooltip from '../Tooltip.vue'
+import { Tooltip } from '../../index'
 import { alignmentMap } from './utils'
 
 const props = defineProps({

package/src/components/TextEditor/FontColor.vue

@@ -54,7 +54,7 @@
 </template>
 <script>
 import Popover from '../Popover.vue'
-import Tooltip from '../Tooltip.vue'
+import { Tooltip } from '../../index'
 
 export default {
   name: 'FontColor',

package/src/components/Tooltip/Tooltip.story.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Tooltip from './Tooltip.vue'
+import Button from '../Button.vue'
+
+const placement = ref('top')
+</script>
+<template>
+  <Story :layout="{ type: 'grid', width: '300px' }">
+    <Variant title="with text prop">
+      <Tooltip
+        text="This action cannot be undone"
+        :hover-delay="1"
+        :placement="placement"
+      >
+        <Button theme="red">Delete</Button>
+      </Tooltip>
+    </Variant>
+    <Variant title="with slot">
+      <Tooltip arrow-class="fill-white" :placement="placement">
+        <template #body>
+          <div
+            class="min-w-[6rem] rounded bg-white px-2 py-1 text-xs text-gray-900 shadow-xl"
+          >
+            test
+          </div>
+        </template>
+        <Button theme="red">Delete</Button>
+      </Tooltip>
+    </Variant>
+
+    <template #controls>
+      <HstSelect
+        v-model="placement"
+        :options="['top', 'right', 'bottom', 'left']"
+        title="Placement"
+      />
+    </template>
+  </Story>
+</template>

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import {
+  TooltipProvider,
+  TooltipRoot,
+  TooltipPortal,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipArrow,
+  type TooltipContentProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    text?: string
+    hoverDelay?: number
+    placement?: TooltipContentProps['side']
+    arrowClass?: HTMLAttributes['class']
+  }>(),
+  {
+    text: '',
+    placement: 'top',
+    hoverDelay: 0.5,
+    arrowClass: 'fill-gray-900',
+  }
+)
+
+const delayDuration = computed(() => props.hoverDelay * 1000)
+</script>
+
+<template>
+  <TooltipProvider :delayDuration="delayDuration">
+    <TooltipRoot>
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent
+          v-if="props.text || $slots.body"
+          :side="props.placement"
+          :side-offset="4"
+        >
+          <slot name="body">
+            <div
+              class="rounded bg-gray-900 px-2 py-1 text-xs text-white shadow-xl"
+            >
+              <div>{{ props.text }}</div>
+            </div>
+          </slot>
+          <TooltipArrow :class="props.arrowClass" :width="8" :height="4" />
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>

package/src/index.js

@@ -52,7 +52,7 @@ export { default as ListSelectBanner } from './components/ListView/ListSelectBan
 export { default as ListFooter } from './components/ListView/ListFooter.vue'
 export { default as Toast } from './components/Toast.vue'
 export { toast, Toasts } from './components/toast.js'
-export { default as Tooltip } from './components/Tooltip.vue'
+export { default as Tooltip } from './components/Tooltip/Tooltip.vue'
 export { default as CommandPalette } from './components/CommandPalette/CommandPalette.vue'
 export { default as CommandPaletteItem } from './components/CommandPalette/CommandPaletteItem.vue'
 export { default as ListFilter } from './components/ListFilter/ListFilter.vue'
@@ -65,7 +65,7 @@ export { default as visibilityDirective } from './directives/visibility.js'
 export { default as call, createCall } from './utils/call.js'
 export { default as debounce } from './utils/debounce.ts'
 export { default as fileToBase64 } from './utils/file-to-base64.js'
-export { default as FileUploadHandler } from './utils/fileUploadHandler'
+export { default as FileUploadHandler } from './utils/fileUploadHandler.ts'
 export { usePageMeta } from './utils/pageMeta.js'
 
 // data-fetching, resources
@@ -77,7 +77,7 @@ export {
   getCachedDocumentResource,
   getCachedListResource,
   resourcesPlugin,
-} from './resources'
+} from './resources/index.js'
 export { request } from './utils/request.js'
 export { frappeRequest } from './utils/frappeRequest.js'
 export { default as initSocket } from './utils/socketio.js'

package/src/components/Tooltip.story.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import Tooltip from './Tooltip.vue'
-import Button from './Button.vue'
-</script>
-<template>
-  <Story :layout="{ type: 'grid' }">
-    <Tooltip text="This action cannot be undone">
-      <Button theme="red">Delete data</Button>
-    </Tooltip>
-  </Story>
-</template>

package/src/components/Tooltip.vue

@@ -1,38 +0,0 @@
-<template>
-  <Popover trigger="hover" :hoverDelay="hoverDelay" :placement="placement">
-    <template #target>
-      <slot />
-    </template>
-    <template #body>
-      <slot name="body">
-        <div
-          v-if="text"
-          class="rounded bg-gray-900 px-2 py-1 text-xs text-white shadow-xl"
-        >
-          <div class="py-px">
-            {{ text }}
-          </div>
-        </div>
-      </slot>
-    </template>
-  </Popover>
-</template>
-<script>
-import Popover from './Popover.vue'
-export default {
-  name: 'Tooltip',
-  components: { Popover },
-  props: {
-    hoverDelay: {
-      default: 0.5,
-    },
-    placement: {
-      default: 'top',
-    },
-    text: {
-      type: String,
-      default: null,
-    },
-  },
-}
-</script>