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

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

@@ -0,0 +1,20 @@
+import type { CSSProperties, VNode } from 'vue';
+export type PopupContentProps = {
+    content?: string;
+    visible?: boolean | null;
+    defaultVisible?: boolean | null;
+    placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+    offset?: number;
+    variant?: 'dark' | 'light';
+    arrow?: boolean;
+    zIndex?: number;
+    target?: HTMLElement | VNode | null;
+    root?: HTMLElement | string;
+    borderRadius?: number;
+    widthEqual?: boolean;
+    contentStyle?: CSSProperties;
+};
+export type PopupContentEvents = {
+    contentMouseenter: [e: MouseEvent];
+    contentMouseleave: [e: MouseEvent];
+};

package/es/popup-trigger/css.js

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

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

@@ -0,0 +1,22 @@
+import { type VNode } from 'vue';
+import type { PopupTriggerProps } from './type';
+declare const _default: import("vue").DefineComponent<PopupTriggerProps, {
+    firstVNode: import("vue").ShallowRef<VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | null, VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e: MouseEvent) => any;
+    open: (node: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<PopupTriggerProps> & Readonly<{
+    onClose?: ((e: MouseEvent) => any) | undefined;
+    onOpen?: ((node: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, e: MouseEvent) => any) | undefined;
+}>, {
+    trigger: "hover" | "click";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/popup-trigger/index.js

@@ -0,0 +1,97 @@
+import './css.js'
+import { defineComponent, shallowRef, useSlots, createVNode, Fragment, cloneVNode, mergeProps } from "vue";
+import { f as flattenVNodes, i as isTextVNode } from "../share/util/render.js";
+import { u as useClickOutsideListener } from "../share/hook/use-click-outside-listener.js";
+import { i as inBrowser } from "../share/util/env.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PopupTrigger"
+  },
+  __name: "index",
+  props: {
+    trigger: {
+      default: "hover"
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  emits: ["close", "open"],
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    const props = __props;
+    const emits = __emit;
+    const currentTrigger = shallowRef(null);
+    async function openHandler(node, e) {
+      if (inBrowser()) {
+        if (node.el instanceof HTMLElement) {
+          currentTrigger.value = node;
+        } else {
+          currentTrigger.value = null;
+        }
+      }
+      if (props.disabled) {
+        return;
+      }
+      emits("open", node, e);
+    }
+    async function closeHandler(e) {
+      if (props.disabled) {
+        return;
+      }
+      emits("close", e);
+    }
+    const slots = useSlots();
+    const clickOutsideHandler = (event) => {
+      if (props.trigger === "click") {
+        closeHandler(event);
+      }
+    };
+    useClickOutsideListener(currentTrigger, clickOutsideHandler);
+    const firstVNodeRef = shallowRef(null);
+    __expose({
+      firstVNode: firstVNodeRef
+    });
+    return () => {
+      var _a;
+      const children = flattenVNodes(((_a = slots.default) == null ? void 0 : _a.call(slots)) || []);
+      return createVNode(Fragment, null, [children.map((child, index) => {
+        if (isTextVNode(child)) {
+          const node = props.trigger === "click" ? createVNode("span", {
+            "onClick": (e) => openHandler(node, e)
+          }, [child]) : createVNode("span", {
+            "onMouseenter": (e) => openHandler(node, e),
+            "onMouseleave": (e) => closeHandler(e)
+          }, [child]);
+          if (index === 0) {
+            firstVNodeRef.value = node;
+            if (!currentTrigger.value) {
+              currentTrigger.value = node;
+            }
+          }
+          return node;
+        } else {
+          const clone = cloneVNode(child, mergeProps(child.props || {}, props.trigger === "click" ? {
+            onClick: (e) => openHandler(clone, e)
+          } : {
+            onMouseenter: (e) => openHandler(clone, e),
+            onMouseleave: (e) => closeHandler(e)
+          }));
+          clone.ref = child.ref;
+          if (index === 0) {
+            firstVNodeRef.value = clone;
+            if (!currentTrigger.value) {
+              currentTrigger.value = clone;
+            }
+          }
+          return clone;
+        }
+      })]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/popup-trigger/type.d.ts

@@ -0,0 +1,9 @@
+import type { VNode } from 'vue';
+export type PopupTriggerProps = {
+    trigger?: 'hover' | 'click';
+    disabled?: boolean;
+};
+export type PopupTriggerEmits = {
+    close: [e: MouseEvent];
+    open: [node: VNode, e: MouseEvent];
+};

package/es/row/css.js

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

package/es/select/css.js

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

package/es/select/draw.d.ts

@@ -0,0 +1,2 @@
+import type { RgbaColor } from '../share/type';
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number, inner: boolean, first: boolean, last: boolean) => void;

package/es/select/draw.js

@@ -0,0 +1,52 @@
+import { d as drawCircle } from "../share/util/plot.js";
+import { r as rgbaColor2string } from "../share/util/color.js";
+const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, inner, first, last) => {
+  ctx.fillStyle = rgbaColor2string(borderColor);
+  for (let i = 0; i < 4; i++) {
+    if (borderRadius[i] <= pixelSize) {
+      continue;
+    }
+    if (i === 1 || i === 2 ? inner && last || !inner : true) {
+      drawCircle(
+        ctx,
+        center[i][0],
+        center[i][1],
+        borderRadius[i],
+        rad[i][0],
+        rad[i][1],
+        pixelSize
+      );
+    }
+  }
+  if (center[1][0] + pixelSize > center[0][0]) {
+    ctx.fillRect(center[0][0], 0, center[1][0] - center[0][0] + pixelSize, pixelSize);
+  }
+  if (center[2][1] + pixelSize > center[1][1] && (inner && last || !inner)) {
+    ctx.fillRect(
+      width - pixelSize,
+      center[1][1],
+      pixelSize,
+      center[2][1] - center[1][1] + pixelSize
+    );
+  }
+  if (center[3][0] < center[2][0] + pixelSize) {
+    ctx.fillRect(
+      center[3][0],
+      height - pixelSize,
+      center[2][0] - center[3][0] + pixelSize,
+      pixelSize
+    );
+  }
+  if (center[3][1] + pixelSize > center[0][1] && !(inner && !first)) {
+    ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
+  }
+  if (inner && !first) {
+    ctx.fillRect(pixelSize / 2, 0, pixelSize / 2, height);
+  }
+  if (inner && !last) {
+    ctx.fillRect(width - 2 * pixelSize - 1, 0, pixelSize, height);
+  }
+};
+export {
+  drawBorder as d
+};

package/es/select/index.css

@@ -0,0 +1,152 @@
+div.px-select {
+  font-size: var(--text-size);
+}
+.px-select {
+  --select-size: var(--px-medium-size);
+  --px-medium-padding-x: var(--px-interval-2);
+  --px-large-padding-x: var(--px-interval-3);
+  --px-small-padding-x: var(--px-interval-2);
+  --padding-x-size: var(--px-medium-padding-x);
+  --text-size: var(--px-medium-font-size);
+  z-index: 0;
+  position: relative;
+  background-color: transparent;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  border-style: solid;
+  color: var(--px-neutral-10);
+  display: flex;
+  padding: 0 var(--padding-x-size);
+  box-sizing: border-box;
+  min-height: var(--select-size);
+  cursor: text;
+}
+.px-select__inner {
+  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
+}
+.px-select__inner:last-child {
+  padding-right: var(--padding-x-size);
+}
+.px-select-inner {
+  height: calc(var(--select-size) - var(--px-bit) * 2);
+  border: 0;
+  background-color: transparent;
+  box-sizing: border-box;
+  flex: 1;
+  font-size: var(--text-size);
+  line-height: var(--px-line-height);
+  font-family: var(--px-font);
+  padding: 0;
+}
+.px-select-inner:focus-visible {
+  outline-color: var(--px-neutral-10);
+  outline-offset: var(--px-bit);
+}
+.px-select-label,
+.px-select-content,
+.px-select-placeholder {
+  border: 0;
+  background-color: transparent;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+.px-select-label {
+  height: calc(var(--select-size) - var(--px-bit) * 2);
+  font-size: var(--text-size);
+  line-height: var(--px-line-height);
+  font-family: var(--px-font);
+}
+.px-select-label__disabled {
+  color: var(--px-neutral-10);
+}
+.px-select-content {
+  min-height: calc(var(--select-size) - var(--px-bit) * 2);
+  flex-wrap: wrap;
+}
+.px-select-content .px-tag {
+  margin-right: var(--px-interval-2);
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+.px-select-placeholder {
+  color: var(--px-neutral-8);
+}
+.px-select__large {
+  --padding-x-size: var(--px-large-padding-x);
+  --text-size: var(--px-large-font-size);
+  --select-size: var(--px-large-size);
+}
+.px-select__small {
+  --padding-x-size: var(--px-small-padding-x);
+  --input-size: var(--px-small-size);
+  --text-size: var(--px-small-font-size);
+}
+.px-select__small .px-select-content .px-tag {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.px-select__disabled {
+  cursor: not-allowed;
+}
+.px-select__disabled .px-select-inner:disabled {
+  cursor: not-allowed;
+  color: var(--px-neutral-8);
+}
+.px-select-prefix-wrapper,
+.px-select-suffix-wrapper,
+.px-select-loading-wrapper,
+.px-select-close-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.px-select-prefix-wrapper {
+  margin-right: var(--px-interval-2);
+}
+.px-select-suffix-wrapper,
+.px-select-loading-wrapper,
+.px-select-close-wrapper {
+  margin-left: var(--px-interval-2);
+}
+.px-select-close-wrapper .px-select-icon-placeholder {
+  width: var(--text-size);
+  height: var(--text-size);
+}
+.px-select-close-wrapper .px-select-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  cursor: pointer;
+  fill: var(--px-neutral-8);
+  transition: 0.25s;
+}
+.px-select-close-wrapper .px-select-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-select-close-wrapper .px-select-icon:active {
+  fill: var(--px-neutral-9);
+}
+.px-select-loading-wrapper .px-select-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  fill: var(--px-primary-6);
+}
+.px-select-prefix-wrapper,
+.px-select-suffix-wrapper {
+  color: var(--px-neutral-10);
+}
+.px-select-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}
+.px-select-empty {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}

package/es/select/index.d.ts

@@ -0,0 +1,44 @@
+import type { SelectGroupOption, SelectOption, SelectProps } from './type';
+declare const _default: import("vue").DefineComponent<SelectProps, {
+    focus: () => void;
+    blur: () => Promise<void>;
+    clear: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (value: string, e: Event) => any;
+    select: (value: any, option: string | SelectOption, e: MouseEvent) => any;
+    change: (value: any) => any;
+    clear: (value: any) => any;
+    blur: () => any;
+    focus: () => any;
+    "update:modelValue": (value: any) => any;
+    tagClose: (value: any, e: MouseEvent) => any;
+    "update:inputValue": (value: string) => any;
+    inputChange: (value: string, e?: Event | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
+    onInput?: ((value: string, e: Event) => any) | undefined;
+    onSelect?: ((value: any, option: string | SelectOption, e: MouseEvent) => any) | undefined;
+    onChange?: ((value: any) => any) | undefined;
+    onClear?: ((value: any) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    onTagClose?: ((value: any, e: MouseEvent) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    onInputChange?: ((value: string, e?: Event | undefined) => any) | undefined;
+}>, {
+    shape: "default" | "round";
+    size: "medium" | "large" | "small";
+    disabled: boolean;
+    loading: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    status: "success" | "warning" | "error" | "normal";
+    options: (string | SelectOption | SelectGroupOption)[];
+    multiple: boolean;
+    collapseTags: boolean;
+    collapseTagsPopover: boolean;
+    tagTheme: "primary" | "sakura" | "success" | "warning" | "danger" | "info";
+    tagVariant: "primary" | "plain" | "outline";
+    filterable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;