feat(popover): new component

chizukicn · Nov 20, 2023 · 31fcfda · 31fcfda
1 parent 4d938fd
commit 31fcfda
Show file tree

Hide file tree

Showing 11 changed files with 570 additions and 36 deletions.
diff --git a/docs/.vitepress/components/demo-block/src/index.vue b/docs/.vitepress/components/demo-block/src/index.vue
@@ -1,59 +1,33 @@
 <script lang='ts' setup name="demo-block">
 import { computed } from "vue";
-import { isClient, useClipboard, useToggle } from "@vueuse/core";
-import { usePlayground } from "./playground";
+import { useClipboard, useToggle } from "@vueuse/core";
 import { demoProps } from "./index";
 
 const props = defineProps(demoProps);
 
 const decodedHighlightedCode = computed(() =>
   decodeURIComponent(props.highlightedCode)
 );
-const { copy, copied } = useClipboard({ source: decodeURIComponent(props.code) });
+const { copy } = useClipboard({ source: decodeURIComponent(props.code) });
 const [value, toggle] = useToggle();
-
-const editOnPlayground = () => {
-  if (props.code) {
-    const { link } = usePlayground(props.code);
-    if (!isClient) {
-      return;
-    };
-    window.open(link);
-  }
-};
 </script>
 
 <template>
   <ClientOnly>
     <div v-bind="$attrs" class="mt-6">
-      <div class="p-8 c-#282f38  b-1 border-light-700 b-solid rounded-sm dark:bg-dark-700 dark:border-#4C4D4F flex [&:o-button-base]:!c-context vp-raw bg">
+      <div class="p-8 c-#282f38  b-1 border-light-700 b-solid rounded-sm dark:bg-dark-700 dark:border-#4C4D4F flex vp-raw bg">
         <slot />
       </div>
       <div class="relative">
         <div class="flex justify-end pt-3 gap-2">
-          <a class="relative outline-none flex justify-center items-center w-7 h-7 p-0 rounded-full border border-light-900 dark:border-dark-900 bg-white dark:bg-#38383A cursor-pointer hover:bg-#E5E6EB dark:hover:bg-dark:300" group @click="editOnPlayground">
-            <div class="o-demo_action_icon i-carbon:chemistry" />
-            <div class="o-demo_tooltip" group-hover:opacity-100>
-              Edit in Playground
-            </div>
-          </a>
-          <a class="relative outline-none flex justify-center items-center w-7 h-7 p-0 rounded-full border border-light-900 dark:border-dark-900 bg-white dark:bg-#38383A cursor-pointer hover:bg-#E5E6EB dark:hover:bg-dark:300" group :href="github" target="_blank">
+          <a :href="github" class="relative outline-none flex justify-center items-center w-7 h-7 p-0 rounded-full border border-light-900 dark:border-dark-900 bg-white dark:bg-#38383A cursor-pointer hover:bg-#E5E6EB dark:hover:bg-dark:300" group target="_blank">
             <div class="o-demo_action_icon i-carbon-logo-github" />
-            <div class="o-demo_tooltip" group-hover:opacity-100>
-              Edit on GitHub
-            </div>
           </a>
-          <a class="relative outline-none flex justify-center items-center w-7 h-7 p-0 rounded-full border border-light-900 dark:border-dark-900 bg-white dark:bg-#38383A cursor-pointer hover:bg-#E5E6EB dark:hover:bg-dark:300" group @click="copy()">
-            <div class="o-demo_action_icon i-carbon:copy" />
-            <div class="o-demo_tooltip" group-hover:opacity-100>
-              {{ copied ? 'Copied' : 'Copy code' }}
-            </div>
+          <a href="javascript:void(0)" class="relative outline-none flex justify-center items-center w-7 h-7 p-0 rounded-full border border-light-900 dark:border-dark-900 bg-white dark:bg-#38383A cursor-pointer hover:bg-#E5E6EB dark:hover:bg-dark:300" group @click="copy()">
+            <div title="Copy" class="o-demo_action_icon i-carbon:copy" />
           </a>
-          <a class="relative outline-none flex justify-center items-center w-7 h-7 p-0 rounded-full border border-light-900 dark:border-dark-900 bg-white dark:bg-#38383A cursor-pointer hover:bg-#E5E6EB dark:hover:bg-dark:300" group @click="toggle()">
-            <div class="o-demo_action_icon i-carbon:fit-to-width" />
-            <div class="o-demo_tooltip" group-hover:opacity-100>
-              {{ value ? 'Hidden code' : 'Show code' }}
-            </div>
+          <a href="javascript:void(0)" class="relative outline-none flex justify-center items-center w-7 h-7 p-0 rounded-full border border-light-900 dark:border-dark-900 bg-white dark:bg-#38383A cursor-pointer hover:bg-#E5E6EB dark:hover:bg-dark:300" group @click="toggle()">
+            <div title="Show Code" class="o-demo_action_icon i-carbon:fit-to-width" />
           </a>
         </div>
         <div v-show="value" :class="`language-${lang} extra-class`" v-html="decodedHighlightedCode" />

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -20,6 +20,10 @@ const componentSidebar = (): DefaultTheme.SidebarItem[] => {
     {
       text: "Selection (选择器)",
       link: "selection"
+    },
+    {
+      text: "Popover (浮动)",
+      link: "popover"
     }
   ];
 };

diff --git a/docs/component/popover.md b/docs/component/popover.md
@@ -0,0 +1,7 @@
+## Basic
+<demo src="../examples/popover/basic.vue"/>
+
+## Placement
+<demo src="../examples/popover/placement.vue"/>
+
+
diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     HiAffix: typeof import('hoci')['HiAffix']
     HiItem: typeof import('hoci')['HiItem']
+    HiPopover: typeof import('hoci')['HiPopover']
     HiSelection: typeof import('hoci')['HiSelection']
   }
 }
diff --git a/docs/examples/popover/basic.vue b/docs/examples/popover/basic.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="w-full flex space-x-3">
+    <hi-popover trigger-event="click">
+      <button class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1">
+        Click
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover trigger-event="dblclick">
+      <button class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1">
+        Double Click
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover trigger-event="mousedown">
+      <button class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1">
+        Mouse Down
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover trigger-event="hover">
+      <button class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1">
+        Hover
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover trigger-event="contextmenu">
+      <button class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1">
+        ContextMenu
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover trigger-event="touch" class="">
+      <button class="button focus:b-blue-1 b-1 b-solid b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1">
+        Touch
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover trigger-event="focus" class="">
+      <button class="button focus:b-blue-1 b-1 b-solid b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1">
+        Focus
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+  </div>
+</template>
diff --git a/docs/examples/popover/placement.vue b/docs/examples/popover/placement.vue
@@ -0,0 +1,139 @@
+<script lang="tsx" setup>
+</script>
+
+<template>
+  <div class="w-full" :style="{ position: 'relative', height: '280px' }">
+    <hi-popover :style="{ position: 'absolute', top: '0', left: '70px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="top-left">
+      <button>
+        Top-Left
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '0', left: '180px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="top">
+      <button>
+        TOP
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '0', left: '290px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="top-right">
+      <button>
+        Top-Right
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '240px', left: '70px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="bottom-left">
+      <button>
+        Bottom-Left
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '240px', left: '180px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="bottom">
+      <button>
+        BOTTOM
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '240px', left: '290px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="bottom-right">
+      <button>
+        Bottom-Right
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '60px', left: '10px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="left-top">
+      <button>
+        Left-Top
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '120px', left: '10px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="left">
+      <button>
+        LEFT
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '180px', left: '10px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="left-bottom">
+      <button>
+        Left-Bottom
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '60px', left: '350px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="right-top">
+      <button>
+        Right-Top
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '120px', left: '350px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="right">
+      <button>
+        RIGHT
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+    <hi-popover :style="{ position: 'absolute', top: '180px', left: '350px' }" class="button b-1 b-gray-1 bg-gray-1 b-solid rounded-md px-2 py-1" placement="right-bottom">
+      <button>
+        Right-Bottom
+      </button>
+      <template #popup>
+        <div class="bg-white rounded shadow-md px-2 py-3">
+          <p>Here is the text content</p>
+          <p>Here is the text content</p>
+        </div>
+      </template>
+    </hi-popover>
+  </div>
+</template>
diff --git a/docs/package.json b/docs/package.json
@@ -15,7 +15,6 @@
     "scss": "^0.2.4",
     "unocss": "^0.56.5",
     "unplugin-vue-components": "^0.25.2",
-    "vitepress": "^1.0.0-rc.22",
-    "vitepress-theme-demoblock": "^3.0.3"
+    "vitepress": "^1.0.0-rc.22"
   }
 }
diff --git a/packages/components/components.ts b/packages/components/components.ts
@@ -6,3 +6,4 @@ export * from "../core/src/switch/component";
 export * from "../core/src/config-provider/component";
 export * from "../core/src/tabs/component";
 export * from "../core/src/tab-pane/component";
+export * from "../core/src/popover/component";
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -4,4 +4,5 @@ export * from "./item";
 export * from "./switch";
 export * from "./icon";
 export * from "./config-provider";
+export * from "./popover";
 export * from "@hoci/shared";
diff --git a/packages/core/src/popover/component.ts b/packages/core/src/popover/component.ts
@@ -0,0 +1,46 @@
+import { Teleport, defineComponent, h, renderSlot } from "vue";
+import { popoverEmits, popoverProps, usePopover } from "@hoci/core";
+
+export const HiPopover = defineComponent({
+  name: "HiPopover",
+  props: {
+    ...popoverProps,
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  emits: popoverEmits,
+  setup(props, context) {
+    const { triggerRef, popupClass, events, popupRef, popupStyle } = usePopover(props, context);
+    return () => {
+      let content = h(
+        "div",
+        {
+          class: popupClass.value,
+          style: popupStyle.value,
+          ref: popupRef
+        },
+        renderSlot(context.slots, "popup")
+      );
+
+      if (props.teleport) {
+        content = h(
+          Teleport,
+          {
+            to: props.teleport === true ? "body" : props.teleport
+          },
+          content
+        );
+      }
+
+      return h(props.as, {
+        ref: triggerRef,
+        ...events
+      }, [
+        renderSlot(context.slots, "default"),
+        content
+      ]);
+    };
+  }
+});