halox-hover-tooltip-ts 0.0.1-beta.1

package/dist/components/index.vue.d.ts

@@ -0,0 +1,4 @@
+import { Directive } from 'vue';
+export declare const vTooltip: Directive;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/halox-hover-tooltip-ts.css

@@ -0,0 +1 @@
+.hover-tooltip[data-v-e3a96650]{position:fixed;z-index:9999;pointer-events:none;background:#000000d9;color:#fff;padding:6px 12px;border-radius:4px;font-size:14px;white-space:pre-line;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hover-tooltip--sm[data-v-e3a96650]{font-size:12px;padding:3px 8px}.hover-tooltip--lg[data-v-e3a96650]{font-size:16px;padding:10px 20px}

package/dist/halox-hover-tooltip-ts.es.js

@@ -0,0 +1,54 @@
+import { reactive as l, defineComponent as c, computed as m, createElementBlock as u, createCommentVNode as v, openBlock as f, normalizeStyle as p, normalizeClass as d, createElementVNode as h } from "vue";
+const _ = ["innerHTML"], t = l({
+  show: !1,
+  text: "",
+  size: "md",
+  x: 0,
+  y: 0,
+  customClass: ""
+}), C = {
+  mounted(e, o) {
+    e._show = (s) => {
+      t.text = typeof o.value == "string" ? o.value : o.value.text, t.size = o.value?.size || "md", typeof o.value == "object" && o.value.class ? t.customClass = o.value.class : o.arg ? t.customClass = o.arg : t.customClass = "", t.show = !0, t.x = s.clientX, t.y = s.clientY;
+    }, e._move = (s) => {
+      t.x = s.clientX, t.y = s.clientY;
+    }, e._hide = () => {
+      t.show = !1;
+    }, e.addEventListener("mouseenter", e._show), e.addEventListener("mousemove", e._move), e.addEventListener("mouseleave", e._hide);
+  },
+  unmounted(e) {
+    e.removeEventListener("mouseenter", e._show), e.removeEventListener("mousemove", e._move), e.removeEventListener("mouseleave", e._hide);
+  }
+}, x = /* @__PURE__ */ c({
+  __name: "index",
+  setup(e) {
+    const o = m(() => {
+      let n = t.x + 15, a = t.y + 15;
+      return n + 200 > window.innerWidth && (n = t.x - 200 - 15), a + 40 > window.innerHeight && (a = t.y - 40 - 15), n = Math.max(0, n), a = Math.max(0, a), {
+        left: `${n}px`,
+        top: `${a}px`,
+        "pointer-events": "none",
+        "user-select": "none"
+      };
+    });
+    return (s, r) => t.show ? (f(), u("div", {
+      key: 0,
+      class: d([t.customClass || "hover-tooltip", t.customClass ? "" : `hover-tooltip--${t.size}`]),
+      style: p(o.value)
+    }, [
+      h("div", {
+        innerHTML: t.text
+      }, null, 8, _)
+    ], 6)) : v("", !0);
+  }
+});
+const y = (e, o) => {
+  const s = e.__vccOpts || e;
+  for (const [r, i] of o)
+    s[r] = i;
+  return s;
+}, E = /* @__PURE__ */ y(x, [["__scopeId", "data-v-e3a96650"]]);
+export {
+  E as default,
+  C as vTooltip
+};

package/dist/halox-hover-tooltip-ts.umd.js

@@ -0,0 +1 @@
+(function(i,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(i=typeof globalThis<"u"?globalThis:i||self,o(i["halox-hover-tooltip-ts"]={},i.Vue))})(this,(function(i,o){"use strict";const u=["innerHTML"],e=o.reactive({show:!1,text:"",size:"md",x:0,y:0,customClass:""}),f={mounted(t,s){t._show=n=>{e.text=typeof s.value=="string"?s.value:s.value.text,e.size=s.value?.size||"md",typeof s.value=="object"&&s.value.class?e.customClass=s.value.class:s.arg?e.customClass=s.arg:e.customClass="",e.show=!0,e.x=n.clientX,e.y=n.clientY},t._move=n=>{e.x=n.clientX,e.y=n.clientY},t._hide=()=>{e.show=!1},t.addEventListener("mouseenter",t._show),t.addEventListener("mousemove",t._move),t.addEventListener("mouseleave",t._hide)},unmounted(t){t.removeEventListener("mouseenter",t._show),t.removeEventListener("mousemove",t._move),t.removeEventListener("mouseleave",t._hide)}},m=o.defineComponent({__name:"index",setup(t){const s=o.computed(()=>{let l=e.x+15,r=e.y+15;return l+200>window.innerWidth&&(l=e.x-200-15),r+40>window.innerHeight&&(r=e.y-40-15),l=Math.max(0,l),r=Math.max(0,r),{left:`${l}px`,top:`${r}px`,"pointer-events":"none","user-select":"none"}});return(n,a)=>e.show?(o.openBlock(),o.createElementBlock("div",{key:0,class:o.normalizeClass([e.customClass||"hover-tooltip",e.customClass?"":`hover-tooltip--${e.size}`]),style:o.normalizeStyle(s.value)},[o.createElementVNode("div",{innerHTML:e.text},null,8,u)],6)):o.createCommentVNode("",!0)}}),p=void 0,d=((t,s)=>{const n=t.__vccOpts||t;for(const[a,c]of s)n[a]=c;return n})(m,[["__scopeId","data-v-e3a96650"]]);i.default=d,i.vTooltip=f,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { default as hoverTooltip, vTooltip } from './components/index.vue';
+export default hoverTooltip;
+export { vTooltip };

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from '../index'
+export {}
+import HaloxHoverTooltipTs from '../index'
+export default HaloxHoverTooltipTs
+export * from '../index'
+export {}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "halox-hover-tooltip-ts",
+  "version": "0.0.1-beta.1",
+  "main": "dist/halox-hover-tooltip-ts.umd.js",
+  "module": "dist/halox-hover-tooltip-ts.es.js",
+  "types": "dist/types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shenyunv2021/halox-hover-tooltip-ts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shenyunv2021/halox-hover-tooltip-ts-issues/issues"
+  },
+  "homepage": "https://github.com/shenyunv2021/halox-hover-tooltip-ts-issues#readme",
+  "contributors": [
+    "simcheolun <shenyunv2021@gamil.com>"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:watch": "if exist dist rd /s /q dist && vite build --watch",
+    "lint": "eslint . --ext .ts,.vue",
+    "test": "echo \"No test yet\""
+  },
+  "keywords": [
+    "vue3",
+    "typescript",
+    "tooltip",
+    "halox",
+    "JAYUWARE"
+  ],
+  "author": "HaloX Dev Team",
+  "description": "",
+  "dependencies": {
+    "vue": "^3.5.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.2",
+    "rollup": "^4.53.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass-embedded": "^1.93.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-tsc": "^3.1.5"
+  }
+}

package/readme.md

@@ -0,0 +1,66 @@
+# Vue3 Typescript HOVER-TOOLTIP UI Guide
+
+## 설치
+
+```sh
+npm install halox-hover-tooltip-ts
+```
+---
+![view](https://raw.githubusercontent.com/shenyunv2021/halox-hover-tooltip-ts-issues/main/view.png)
+---
+
+## Description
+
+Vue3+Typescript에서 지원하는 호버툴팁 라이브러리입니다.
+
+항상 최신 버전을 유지해주세요.
+
+필요한 개선 요청은 깃헙 이슈로 남겨주세요.
+
+## Features
+
+- 커스텀 툴팁 내용
+- 커스텀 양식
+- 위치 자동 조절
+---
+
+## Changelog
+
+- node v24.12.0
+- vue 3.5.25
+
+
+## Usage Example
+
+```js
+<script lang="ts" setup>
+import Tooltip, { vTooltip } from 'halox-hover-tooltip';
+</script>
+```
+
+```css
+/* 사용자의 다른 스타일들을 여기에 작성 */
+:global(.custom) {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+  background: rgba(255, 0, 0, 0.85);
+  color: #fff;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  white-space: pre-line;
+  backdrop-filter: blur(4px);
+}
+```
+---
+
+## Main Components
+
+``` vue
+  <div v-tooltip="{ text: '토끼가 세상에 태어난 날입니다.', class: 'custom' }">
+    오늘은?
+  </div>
+ ```
+---
+

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+      "target": "ESNext",
+      "module": "ESNext",
+      "moduleResolution": "Node",
+      "declaration": true,
+      "declarationDir": "dist/types",
+      "emitDeclarationOnly": false,
+      "strict": true,
+      "jsx": "preserve",
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "resolveJsonModule": true,
+      "lib": ["ESNext", "DOM"]
+    },
+    "include": ["src"],
+    "exclude": ["node_modules", "dist", "example"]
+  }
+  

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import dts from 'vite-plugin-dts';
+import postcss from 'rollup-plugin-postcss';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({ insertTypesEntry: true }),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'halox-hover-tooltip-ts',
+      fileName: (format) => `halox-hover-tooltip-ts.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: { vue: 'Vue' },
+      },
+      plugins: [
+        postcss({
+          extract: true, // CSS를 별도 파일로 추출
+        }),
+      ],
+    },
+    css: {
+      preprocessorOptions: { scss: {} },
+    },
+  },
+});