@pixelium/web-vue 0.0.1-beta → 0.0.2-fix

package/es/tooltip/index.js

@@ -0,0 +1,228 @@
+import './css.js'
+import { defineComponent, computed, ref, shallowRef, watch, onMounted, nextTick, useSlots, createVNode, Fragment } from "vue";
+import { N } from "../aside/index.js";
+import { _ as _sfc_main$2 } from "../popup-content/index.js";
+import { _ as _sfc_main$1 } from "../popup-trigger/index.js";
+import { i as inBrowser } from "../share/util/env.js";
+const BORDER_RADIUS = 16;
+const HOVER_CLOSE_DELAY = 300;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Tooltip"
+  },
+  __name: "index",
+  props: {
+    content: null,
+    visible: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultVisible: {
+      type: Boolean,
+      default: void 0
+    },
+    placement: {
+      default: "top"
+    },
+    trigger: {
+      default: "hover"
+    },
+    offset: {
+      default: 8
+    },
+    variant: {
+      default: "dark"
+    },
+    arrow: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean
+    },
+    zIndex: null,
+    root: {
+      default: "body"
+    }
+  },
+  emits: ["update:visible", "close", "open"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const props = __props;
+    const controlledMode = computed(() => {
+      return props.visible !== void 0;
+    });
+    const preDisplay = controlledMode.value ? props.visible : props.defaultVisible;
+    const display = ref(N(preDisplay) ? false : preDisplay);
+    const contentRef = shallowRef();
+    const triggerRef = shallowRef();
+    const emits = __emit;
+    const currentTrigger = shallowRef(null);
+    let closeDelayPromiseReject;
+    async function openHandler(node, e) {
+      if (closeDelayPromiseReject) {
+        closeDelayPromiseReject();
+        closeDelayPromiseReject = void 0;
+      }
+      await openHandlerImpl(node);
+      emits("open", e);
+    }
+    async function openHandlerImpl(node, controlled = false) {
+      if (inBrowser()) {
+        resizeObserver == null ? void 0 : resizeObserver.disconnect();
+        if (node.el instanceof HTMLElement) {
+          currentTrigger.value = node;
+        } else {
+          currentTrigger.value = null;
+        }
+        if (currentTrigger.value && currentTrigger.value.el instanceof HTMLElement) {
+          resizeObserver == null ? void 0 : resizeObserver.observe(currentTrigger.value.el);
+        }
+      }
+      if (controlledMode.value && !controlled) {
+        emits("update:visible", true);
+        await nextTick(() => {
+        });
+        display.value = !!props.visible;
+      } else {
+        display.value = true;
+      }
+    }
+    async function closeHandler(e) {
+      if (props.trigger === "click") {
+        const clickContent = contentRef.value && contentRef.value.content && contentRef.value.content.contains(e.target);
+        if (clickContent || !display.value) {
+          return;
+        }
+      } else {
+        if (closeDelayPromiseReject) {
+          closeDelayPromiseReject();
+          closeDelayPromiseReject = void 0;
+        }
+        const {
+          resolve,
+          reject,
+          promise
+        } = Promise.withResolvers();
+        closeDelayPromiseReject = reject;
+        setTimeout(() => {
+          resolve();
+        }, HOVER_CLOSE_DELAY);
+        try {
+          await promise;
+        } catch {
+          return;
+        }
+      }
+      if (controlledMode.value) {
+        emits("update:visible", false);
+        await nextTick(() => {
+        });
+        display.value = !!props.visible;
+      } else {
+        display.value = false;
+      }
+      emits("close", e);
+    }
+    const contentMouseenterHandler = () => {
+      if (props.trigger === "click") {
+        return;
+      }
+      if (closeDelayPromiseReject) {
+        closeDelayPromiseReject();
+        closeDelayPromiseReject = void 0;
+      }
+    };
+    const contentMouseleaveHandler = (e) => {
+      if (props.trigger === "click") {
+        return;
+      }
+      closeHandler(e);
+    };
+    const preprocessCurrentTrigger = () => {
+      if (!inBrowser()) {
+        return;
+      }
+      if (!currentTrigger.value && triggerRef.value && triggerRef.value.firstVNode) {
+        resizeObserver == null ? void 0 : resizeObserver.disconnect();
+        currentTrigger.value = triggerRef.value.firstVNode;
+        if (currentTrigger.value.el instanceof HTMLElement) {
+          resizeObserver == null ? void 0 : resizeObserver.observe(currentTrigger.value.el);
+        }
+      }
+    };
+    const processVisible = (value) => {
+      if (value) {
+        preprocessCurrentTrigger();
+        if (currentTrigger.value) {
+          openHandlerImpl(currentTrigger.value, true);
+        }
+      } else {
+        display.value = false;
+      }
+    };
+    watch(() => props.visible, () => {
+      processVisible(!!props.visible);
+    });
+    const resizeObserver = inBrowser() ? new ResizeObserver(() => {
+      updateRenderState();
+    }) : null;
+    onMounted(() => {
+      nextTick(() => {
+        if (display.value) {
+          updateRenderState();
+        }
+      });
+    });
+    const updateRenderState = () => {
+      var _a;
+      preprocessCurrentTrigger();
+      if (inBrowser()) {
+        (_a = contentRef.value) == null ? void 0 : _a.updateRenderState();
+      }
+    };
+    const slots = useSlots();
+    const checkCurrentTrigger = (_) => {
+      var _a;
+      if (!inBrowser()) {
+        return false;
+      }
+      return ((_a = currentTrigger.value) == null ? void 0 : _a.el) instanceof HTMLElement;
+    };
+    return () => {
+      var _a;
+      return createVNode(Fragment, null, [createVNode(_sfc_main$1, {
+        "trigger": props.trigger,
+        "disabled": props.disabled,
+        "onClose": closeHandler,
+        "onOpen": openHandler,
+        "ref": (node) => triggerRef.value = node
+      }, {
+        default: () => {
+          var _a2;
+          return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
+        }
+      }), createVNode(_sfc_main$2, {
+        "visible": display.value,
+        "content": props.content,
+        "zIndex": props.zIndex,
+        "variant": props.variant,
+        "placement": props.placement,
+        "arrow": props.arrow,
+        "offset": props.offset,
+        "borderRadius": BORDER_RADIUS,
+        "root": props.root,
+        "target": checkCurrentTrigger((_a = currentTrigger.value) == null ? void 0 : _a.el) ? currentTrigger.value.el : null,
+        "onContentMouseenter": contentMouseenterHandler,
+        "onContentMouseleave": contentMouseleaveHandler,
+        "ref": (node) => contentRef.value = node
+      }, {
+        content: slots.content
+      })]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/tooltip/type.d.ts

@@ -0,0 +1,77 @@
+export type TooltipProps = {
+    /**
+     * @property {string} [content]
+     * @version 0.0.2
+     */
+    content?: string;
+    /**
+     * @property {boolean | null} [visible]
+     * @version 0.0.2
+     */
+    visible?: boolean | null;
+    /**
+     * @property {boolean | null} [defaultVisible]
+     * @version 0.0.2
+     */
+    defaultVisible?: boolean | null;
+    /**
+     * @property {'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'} [placement='top']
+     * @version 0.0.2
+     */
+    placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+    /**
+     * @property {'hover' | 'click'} [trigger='hover']
+     * @version 0.0.2
+     */
+    trigger?: 'hover' | 'click';
+    /**
+     * @property {number} [offset=8]
+     * @version 0.0.2
+     */
+    offset?: number;
+    /**
+     * @property {'dark' | 'light'} [variant='dark']
+     * @version 0.0.2
+     */
+    variant?: 'dark' | 'light';
+    /**
+     * @property {boolean} [arrow=true]
+     * @version 0.0.2
+     */
+    arrow?: boolean;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.2
+     */
+    disabled?: boolean;
+    /**
+     * @property {number} [disabled]
+     * @version 0.0.2
+     */
+    zIndex?: number;
+    /**
+     * @property { HTMLElement | string} [root='body']
+     * @version 0.0.2
+     */
+    root?: HTMLElement | string;
+};
+export type TooltipEvents = {
+    /**
+     * @event update:visible
+     * @param {boolean} value
+     * @version 0.0.2
+     */
+    'update:visible': [value: boolean];
+    /**
+     * @event close
+     * @param {MouseEvent} e
+     * @version 0.0.2
+     */
+    close: [e: MouseEvent];
+    /**
+     * @event open
+     * @param {MouseEvent} e
+     * @version 0.0.2
+     */
+    open: [e: MouseEvent];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pixelium/web-vue",
-	"version": "0.0.1-beta",
+	"version": "0.0.2-fix",
 	"type": "module",
 	"main": "./dist/pixelium-vue.js",
 	"exports": {
@@ -14,6 +14,11 @@
 			"require": "./dist/pixelium-vue-icon-hn.cjs",
 			"types": "./dist/icon-hn.d.ts"
 		},
+		"./icon-pa": {
+			"import": "./dist/pixelium-vue-icon-pa.js",
+			"require": "./dist/pixelium-vue-icon-pa.cjs",
+			"types": "./dist/icon-pa.d.ts"
+		},
 		"./es": {
 			"import": "./es/index.js",
 			"types": "./es/index.d.ts"
@@ -22,6 +27,10 @@
 			"import": "./es/icons/icon-hn.js",
 			"types": "./es/icons/icon-hn.d.ts"
 		},
+		"./icon-pa/es": {
+			"import": "./es/icons/icon-pa.js",
+			"types": "./es/icons/icon-pa.d.ts"
+		},
 		"./*": {
 			"import": "./*"
 		}
@@ -33,13 +42,15 @@
 		"lint": "oxlint lib",
 		"lint:fix": "oxlint ./ --fix && prettier ./ --write",
 		"preview": "vite preview",
-		"release": "npm run build && npm publish --access public"
+		"release": "npm run build && npm publish --access public",
+		"release:dry-run": "npm run build && npm publish --dry-run"
 	},
 	"peerDependencies": {
 		"vue": "^3.5.17"
 	},
 	"devDependencies": {
 		"@hackernoon/pixel-icon-library": "^1.0.6",
+		"@types/node": "^24.5.2",
 		"@vitejs/plugin-vue": "^6.0.0",
 		"@vitejs/plugin-vue-jsx": "^5.1.1",
 		"dts-bundle-generator": "^9.5.1",
@@ -47,6 +58,7 @@
 		"execa": "^9.6.0",
 		"less": "^4.4.0",
 		"oxlint": "^1.12.0",
+		"pixelarticons": "^1.8.1",
 		"prettier": "^3.6.2",
 		"rimraf": "^6.0.1",
 		"svgo": "^4.0.0",
@@ -56,8 +68,10 @@
 		"vue-tsc": "3.0.6"
 	},
 	"dependencies": {
+		"@floating-ui/dom": "^1.7.4",
+		"mitt": "^3.0.1",
 		"nanoid": "^5.1.5",
-		"parsnip-kit": "^0.0.4"
+		"parsnip-kit": "^0.0.5"
 	},
 	"repository": {
 		"type": "git",

package/es/icons/{css.js → css-hn.js}

@@ -1,2 +1,2 @@
-import './icon-hn.css'
 import '../index.css'
+import './icon-hn.css'