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

package/es/popover/index.js

@@ -0,0 +1,240 @@
+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: "Popover"
+  },
+  __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: "light"
+    },
+    arrow: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean
+    },
+    zIndex: null,
+    root: {
+      default: "body"
+    },
+    widthEqual: {
+      type: Boolean,
+      default: false
+    },
+    contentStyle: null
+  },
+  emits: ["update:visible", "close", "open"],
+  setup(__props, {
+    expose: __expose,
+    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();
+      }
+    };
+    __expose({
+      triggerContent: contentRef,
+      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,
+        "widthEqual": props.widthEqual,
+        "target": checkCurrentTrigger((_a = currentTrigger.value) == null ? void 0 : _a.el) ? currentTrigger.value.el : null,
+        "onContentMouseenter": contentMouseenterHandler,
+        "onContentMouseleave": contentMouseleaveHandler,
+        "contentStyle": props.contentStyle,
+        "ref": (node) => contentRef.value = node
+      }, {
+        content: slots.content
+      })]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/popover/type.d.ts

@@ -0,0 +1,100 @@
+import type { CSSProperties } from 'vue';
+export type PopoverProps = {
+    /**
+     * @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='light']
+     * @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;
+    /**
+     * @property {boolean} [widthEqual=false]
+     * @version 0.0.2
+     */
+    widthEqual?: boolean;
+    /**
+     * @property {CSSProperties} [contentStyle]
+     * @version 0.0.2
+     */
+    contentStyle?: CSSProperties;
+};
+export type PopoverEvents = {
+    /**
+     * @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];
+};
+export type PopoverSlots = {
+    /**
+     * @slot default
+     * @version 0.0.0-beta
+     */
+    default: {};
+    /**
+     * @slot content
+     * @version 0.0.0-beta
+     */
+    content: {};
+};

package/es/popup-content/css.js

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

package/es/popup-content/draw.d.ts

@@ -0,0 +1,6 @@
+import type { RgbaColor } from '../share/type';
+import type { PopupContentProps } from './type';
+export declare function getBorderColor(variant: PopupContentProps['variant']): RgbaColor;
+export declare function getBackgroundColor(variant: PopupContentProps['variant']): RgbaColor;
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number, offsetX: number, offsetY: number, offsetTop: number, offsetLeft: number) => void;
+export declare const drawArrow: (ctx: CanvasRenderingContext2D, width: number, height: number, borderColor: RgbaColor, backgroundColor: RgbaColor, pixelSize: number, placement: "top" | "left" | "right" | "bottom", popupSide: "start" | "end" | "middle", arrowXOffset: number, arrowYOffset: number) => void;

package/es/popup-content/draw.js

@@ -0,0 +1,151 @@
+import { g as getGlobalThemeColor, r as rgbaColor2string } from "../share/util/color.js";
+import { d as drawCircle } from "../share/util/plot.js";
+function getBorderColor(variant) {
+  return variant === "light" ? getGlobalThemeColor("neutral", 10) : getGlobalThemeColor("neutral", 9);
+}
+function getBackgroundColor(variant) {
+  return variant === "light" ? getGlobalThemeColor("neutral", 1) : getGlobalThemeColor("neutral", 10);
+}
+const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, offsetX, offsetY, offsetTop, offsetLeft) => {
+  ctx.fillStyle = rgbaColor2string(borderColor);
+  for (let i = 0; i < 4; i++) {
+    if (borderRadius[i] > pixelSize) {
+      drawCircle(
+        ctx,
+        center[i][0] + offsetLeft,
+        center[i][1] + offsetTop,
+        borderRadius[i],
+        rad[i][0],
+        rad[i][1],
+        pixelSize
+      );
+    }
+  }
+  if (center[1][0] + pixelSize > center[0][0]) {
+    ctx.fillRect(
+      center[0][0] + offsetLeft,
+      offsetTop,
+      center[1][0] - center[0][0] + pixelSize,
+      pixelSize
+    );
+  }
+  if (center[2][1] + pixelSize > center[1][1]) {
+    ctx.fillRect(
+      width - offsetX - pixelSize + offsetLeft,
+      center[1][1] + offsetTop,
+      pixelSize,
+      center[2][1] - center[1][1] + pixelSize
+    );
+  }
+  if (center[3][0] < center[2][0] + pixelSize) {
+    ctx.fillRect(
+      center[3][0] + offsetLeft,
+      height - offsetY - pixelSize + offsetTop,
+      center[2][0] - center[3][0] + pixelSize,
+      pixelSize
+    );
+  }
+  if (center[3][1] + pixelSize > center[0][1]) {
+    ctx.fillRect(
+      offsetLeft,
+      center[0][1] + offsetTop,
+      pixelSize,
+      center[3][1] - center[0][1] + pixelSize
+    );
+  }
+};
+const drawArrow = (ctx, width, height, borderColor, backgroundColor, pixelSize, placement, popupSide, arrowXOffset, arrowYOffset) => {
+  switch (placement) {
+    case "right": {
+      const y = arrowYOffset - pixelSize / 2;
+      const vertex = [
+        0,
+        popupSide === "start" ? Math.floor(y) : popupSide === "end" ? Math.ceil(y) : Math.round(y)
+      ];
+      for (let i = 0; i < 4; i++) {
+        const factor = i > 1 ? i - 1 : i;
+        ctx.fillStyle = rgbaColor2string(borderColor);
+        const top = Math.max(0, vertex[1] - factor * pixelSize);
+        const bottom = Math.min(height, vertex[1] + factor * pixelSize);
+        const x = vertex[0] + i * pixelSize;
+        ctx.fillRect(x, top, pixelSize, pixelSize);
+        ctx.fillRect(x, bottom, pixelSize, pixelSize);
+        ctx.fillStyle = rgbaColor2string(backgroundColor);
+        if (bottom - top - pixelSize > 0) {
+          ctx.fillRect(x, top + pixelSize, pixelSize, bottom - top - pixelSize);
+        }
+      }
+      break;
+    }
+    case "left": {
+      const y = arrowYOffset - pixelSize / 2;
+      const vertex = [
+        Math.round(width - pixelSize),
+        popupSide === "start" ? Math.floor(y) : popupSide === "end" ? Math.ceil(y) : Math.round(y)
+      ];
+      for (let i = 0; i < 4; i++) {
+        const factor = i > 1 ? i - 1 : i;
+        ctx.fillStyle = rgbaColor2string(borderColor);
+        const top = Math.max(0, vertex[1] - factor * pixelSize);
+        const bottom = Math.min(height - pixelSize, vertex[1] + factor * pixelSize);
+        const x = vertex[0] - i * pixelSize;
+        ctx.fillRect(x, top, pixelSize, pixelSize);
+        ctx.fillRect(x, bottom, pixelSize, pixelSize);
+        ctx.fillStyle = rgbaColor2string(backgroundColor);
+        if (bottom - top - pixelSize > 0) {
+          ctx.fillRect(x, top + pixelSize, pixelSize, bottom - top - pixelSize);
+        }
+      }
+      break;
+    }
+    case "bottom": {
+      const x = arrowXOffset - pixelSize / 2;
+      const vertex = [
+        popupSide === "start" ? Math.floor(x) : popupSide === "end" ? Math.ceil(x) : Math.round(x),
+        0
+      ];
+      for (let i = 0; i < 4; i++) {
+        const factor = i > 1 ? i - 1 : i;
+        ctx.fillStyle = rgbaColor2string(borderColor);
+        const left = Math.max(0, vertex[0] - factor * pixelSize);
+        const right = Math.min(vertex[0] + factor * pixelSize, width - pixelSize);
+        const y = vertex[1] + i * pixelSize;
+        ctx.fillRect(left, y, pixelSize, pixelSize);
+        ctx.fillRect(right, y, pixelSize, pixelSize);
+        ctx.fillStyle = rgbaColor2string(backgroundColor);
+        if (right - left - pixelSize > 0) {
+          ctx.fillRect(left + pixelSize, y, right - left - pixelSize, pixelSize);
+        }
+      }
+      break;
+    }
+    case "top":
+    default: {
+      const x = arrowXOffset - pixelSize / 2;
+      const vertex = [
+        popupSide === "start" ? Math.floor(x) : popupSide === "end" ? Math.ceil(x) : Math.round(x),
+        Math.round(height - pixelSize)
+      ];
+      for (let i = 0; i < 4; i++) {
+        const factor = i > 1 ? i - 1 : i;
+        ctx.fillStyle = rgbaColor2string(borderColor);
+        const left = Math.max(0, vertex[0] - factor * pixelSize);
+        const right = Math.min(vertex[0] + factor * pixelSize, width - pixelSize);
+        const y = vertex[1] - i * pixelSize;
+        ctx.fillRect(left, y, pixelSize, pixelSize);
+        ctx.fillRect(right, y, pixelSize, pixelSize);
+        ctx.fillStyle = rgbaColor2string(backgroundColor);
+        if (right - left - pixelSize > 0) {
+          ctx.fillRect(left + pixelSize, y, right - left - pixelSize, pixelSize);
+        }
+      }
+      break;
+    }
+  }
+};
+export {
+  getBackgroundColor as a,
+  drawArrow as b,
+  drawBorder as d,
+  getBorderColor as g
+};

package/es/popup-content/index.css

@@ -0,0 +1,99 @@
+.px-popup-content {
+  padding: var(--px-interval-1) var(--px-interval-2);
+  display: inline-block;
+  --text-color: var(--px-neutral-10);
+  --min-size: var(--px-interval-9);
+  color: var(--text-color);
+  border-color: transparent;
+  border-width: var(--px-bit);
+  border-style: solid;
+  background-color: transparent;
+  box-sizing: border-box;
+  position: absolute;
+  white-space: pre-line;
+  min-height: var(--min-size);
+  min-width: var(--min-size);
+  transition: transform 0.25s, opacity 0.25s;
+}
+.px-popup-content-fade__top-enter-to,
+.px-popup-content-fade__top-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+.px-popup-content-fade__top-enter-from,
+.px-popup-content-fade__top-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+.px-popup-content-fade__bottom-enter-to,
+.px-popup-content-fade__bottom-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+.px-popup-content-fade__bottom-enter-from,
+.px-popup-content-fade__bottom-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+.px-popup-content-fade__left-enter-to,
+.px-popup-content-fade__left-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+.px-popup-content-fade__left-enter-from,
+.px-popup-content-fade__left-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+.px-popup-content-fade__right-enter-to,
+.px-popup-content-fade__right-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+.px-popup-content-fade__right-enter-from,
+.px-popup-content-fade__right-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+.px-popup-content__dark {
+  --text-color: var(--px-neutral-1);
+}
+.px-popup-content__top.px-popup-content__arrow {
+  min-height: calc(var(--px-bit) * 3 + var(--min-size));
+  padding-bottom: calc(var(--px-interval-1) + var(--px-bit) * 3);
+}
+.px-popup-content__top.px-popup-content__arrow .px-popup-content-arrow {
+  bottom: calc(-1 * var(--px-bit));
+}
+.px-popup-content__bottom.px-popup-content__arrow {
+  min-height: calc(var(--px-bit) * 12);
+  padding-top: calc(var(--px-interval-1) + var(--px-bit) * 3);
+}
+.px-popup-content__bottom.px-popup-content__arrow .px-popup-content-arrow {
+  top: calc(-1 * var(--px-bit));
+}
+.px-popup-content__left.px-popup-content__arrow {
+  min-width: calc(var(--px-bit) * 12);
+  padding-right: calc(var(--px-interval-2) + var(--px-bit) * 3);
+}
+.px-popup-content__left.px-popup-content__arrow .px-popup-content-arrow {
+  right: calc(-1 * var(--px-bit));
+}
+.px-popup-content__right.px-popup-content__arrow {
+  min-width: calc(var(--px-bit) * 12);
+  padding-left: calc(var(--px-interval-2) + var(--px-bit) * 3);
+}
+.px-popup-content__right.px-popup-content__arrow .px-popup-content-arrow {
+  left: calc(-1 * var(--px-bit));
+}
+.px-popup-content-arrow {
+  position: absolute;
+}
+.px-popup-content-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}

package/es/popup-content/index.d.ts

@@ -0,0 +1,30 @@
+import type { PopupContentProps } from './type';
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<PopupContentProps, {
+    updateRenderState: () => void;
+    content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    contentMouseenter: (e: MouseEvent) => any;
+    contentMouseleave: (e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<PopupContentProps> & Readonly<{
+    onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+    onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    variant: "dark" | "light";
+    placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    root: HTMLElement | string;
+    offset: number;
+    visible: boolean | null;
+    arrow: boolean;
+    widthEqual: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};