@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/input-group/type.d.ts

@@ -0,0 +1,30 @@
+import type { NumberOrPercentage } from '../share/type';
+export type InputGroupProps = {
+    /**
+     * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
+     * @version 0.0.2
+     */
+    borderRadius?: NumberOrPercentage | NumberOrPercentage[];
+    /**
+     * @property {'default' | 'round'} [shape='default']
+     * @version 0.0.2
+     */
+    shape?: 'default' | 'round';
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.2
+     */
+    size?: 'medium' | 'large' | 'small';
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.2
+     */
+    disabled?: boolean;
+};
+export type InputGroupSlots = {
+    /**
+     * @slot default
+     * @version 0.0.2
+     */
+    default: {};
+};

package/es/input-group-label/css.js

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

package/es/input-group-label/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/input-group-label/draw.js

@@ -0,0 +1,52 @@
+import { r as rgbaColor2string } from "../share/util/color.js";
+import { d as drawCircle } from "../share/util/plot.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) {
+      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
+    );
+  }
+  const flag = inner && !first;
+  if (!flag && center[3][1] + pixelSize > center[0][1]) {
+    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/input-group-label/index.css

@@ -0,0 +1,50 @@
+.px-input-group-label-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}
+div.px-input-group-label {
+  font-size: var(--text-size);
+}
+.px-input-group-label {
+  --input-group-label-size: var(--px-medium-size);
+  --px-medium-padding-x: var(--px-interval-3);
+  --px-large-padding-x: var(--px-interval-4);
+  --px-small-padding-x: var(--px-interval-2);
+  --padding-x-size: var(--px-medium-padding-x);
+  --text-color: var(--px-neutral-10);
+  --text-size: var(--px-medium-font-size);
+  height: var(--input-group-label-size);
+  padding-left: var(--padding-x-size);
+  padding-right: var(--padding-x-size);
+  background-color: transparent;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  color: var(--text-color);
+  transition: 0.25s;
+  z-index: 0;
+  font-size: var(--text-size);
+}
+.px-input-group-label__inner {
+  transition: none;
+  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
+}
+.px-input-group-label__inner:last-child {
+  padding-right: var(--padding-x-size);
+}
+.px-input-group-label__large {
+  --padding-x-size: var(--px-large-padding-x);
+  --input-group-label-size: var(--px-large-size);
+  --text-size: var(--px-large-font-size);
+}
+.px-input-group-label__small {
+  --padding-x-size: var(--px-small-padding-x);
+  --input-group-label-size: var(--px-small-size);
+  --text-size: var(--px-small-font-size);
+}

package/es/input-group-label/index.d.ts

@@ -0,0 +1,16 @@
+import type { InputGroupLabelProps } from './type';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<InputGroupLabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupLabelProps> & Readonly<{}>, {
+    shape: "default" | "round";
+    size: "medium" | "large" | "small";
+}, {}, {}, {}, 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;
+    };
+};

package/es/input-group-label/index.js

@@ -0,0 +1,129 @@
+import './css.js'
+import { defineComponent, getCurrentInstance, ref, inject, computed, shallowRef, onMounted, nextTick, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot } from "vue";
+import { a as canvasPreprocess, c as calcPixelSize, g as getBorderRadius, b as calcBorderCornerCenter, f as floodFill } from "../share/util/plot.js";
+import { g as getGlobalThemeColor, p as parseColor } from "../share/util/color.js";
+import { _ as _sfc_main$1 } from "../input-group/index.js";
+import { d as drawBorder } from "./draw.js";
+import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { u as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
+import { I as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { I as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
+import { B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "InputGroupLabel"
+  },
+  __name: "index",
+  props: {
+    backgroundColor: null,
+    borderRadius: null,
+    shape: { default: "default" },
+    size: { default: "medium" }
+  },
+  setup(__props) {
+    var _a;
+    const props = __props;
+    const instance = getCurrentInstance();
+    const innerInputGroup = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
+    const [_, first, last] = innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [ref(0), ref(false), ref(false)];
+    const inputGroupProps = inject(INPUT_GROUP_PROVIDE);
+    const borderRadiusComputed = computed(() => {
+      return innerInputGroup.value && inputGroupProps ? inputGroupProps.borderRadius : props.borderRadius;
+    });
+    const sizeComputed = computed(() => {
+      return innerInputGroup.value && inputGroupProps ? inputGroupProps.size : props.size;
+    });
+    const shapeComputed = computed(() => {
+      return innerInputGroup.value && inputGroupProps ? inputGroupProps.shape : props.shape;
+    });
+    const hoverFlag = ref(false);
+    const activeFlag = ref(false);
+    const darkMode = useDarkMode();
+    const canvasRef = shallowRef(null);
+    const labelRef = shallowRef(null);
+    onMounted(() => {
+      nextTick(() => {
+        drawPixel();
+      });
+    });
+    watch([borderRadiusComputed, shapeComputed, hoverFlag, activeFlag, darkMode], () => {
+      drawPixel();
+    });
+    watch([first, last], () => {
+      drawPixel();
+    });
+    const drawPixel = () => {
+      const preprocessData = canvasPreprocess(labelRef, canvasRef);
+      if (!preprocessData) {
+        return;
+      }
+      const { ctx, width, height, canvas } = preprocessData;
+      const pixelSize = calcPixelSize();
+      const borderRadius = getBorderRadius(
+        canvas,
+        pixelSize,
+        borderRadiusComputed.value,
+        shapeComputed.value,
+        sizeComputed.value || "medium",
+        innerInputGroup.value,
+        first.value,
+        last.value
+      );
+      const borderColor = getGlobalThemeColor("neutral", 10);
+      const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+      const rad = BORDER_CORNER_RAD_RANGE;
+      drawBorder(
+        ctx,
+        width,
+        height,
+        center,
+        borderRadius,
+        rad,
+        borderColor,
+        pixelSize,
+        innerInputGroup.value,
+        first.value,
+        last.value
+      );
+      const backgroundColor = props.backgroundColor ? parseColor(props.backgroundColor) : getGlobalThemeColor("neutral", 3);
+      floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
+    };
+    useResizeObserver(labelRef, drawPixel);
+    useWatchGlobalCssVal(drawPixel);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["pixelium px-input-group-label", {
+            "px-input-group-label__large": sizeComputed.value === "large",
+            "px-input-group-label__small": sizeComputed.value === "small",
+            "px-input-group-label__inner": innerInputGroup.value
+          }]),
+          ref_key: "labelRef",
+          ref: labelRef
+        },
+        [
+          createElementVNode(
+            "canvas",
+            {
+              ref_key: "canvasRef",
+              ref: canvasRef,
+              class: "px-input-group-label-canvas"
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          ),
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/input-group-label/type.d.ts

@@ -0,0 +1,30 @@
+import type { NumberOrPercentage } from '../share/type';
+export type InputGroupLabelProps = {
+    /**
+     * @property {string} [backgroundColor]
+     * @version 0.0.2
+     */
+    backgroundColor?: string;
+    /**
+     * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
+     * @version 0.0.2
+     */
+    borderRadius?: NumberOrPercentage | NumberOrPercentage[];
+    /**
+     * @property {'default' | 'round'} [shape='default']
+     * @version 0.0.2
+     */
+    shape?: 'default' | 'round';
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.2
+     */
+    size?: 'medium' | 'large' | 'small';
+};
+export type InputGroupLabelSlots = {
+    /**
+     * @slot default
+     * @version 0.0.2
+     */
+    default: {};
+};

package/es/input-number/css.js

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

package/es/input-number/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/input-number/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/input-number/index.css

@@ -0,0 +1,161 @@
+div.px-input-number {
+  font-size: var(--text-size);
+}
+.px-input-number {
+  --input-number-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;
+  height: var(--input-number-size);
+}
+.px-input-number__inner {
+  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
+}
+.px-input-number__inner:last-child {
+  padding-right: var(--padding-x-size);
+}
+.px-input-number-inner {
+  height: 100%;
+  border: 0;
+  background-color: transparent;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: var(--text-size);
+  line-height: var(--px-line-height);
+  font-family: var(--px-font);
+  padding: 0;
+}
+.px-input-number-inner:focus-visible {
+  outline-color: var(--px-neutral-10);
+  outline-offset: var(--px-bit);
+}
+.px-input-number-inner:disabled {
+  color: var(--px-neutral-10);
+}
+.px-input-number-inner::placeholder {
+  color: var(--px-neutral-8);
+  opacity: 1;
+}
+.px-input-number__large {
+  --padding-x-size: var(--px-large-padding-x);
+  --text-size: var(--px-large-font-size);
+  --input-number-size: var(--px-large-size);
+}
+.px-input-number__small {
+  --padding-x-size: var(--px-small-padding-x);
+  --input-number-size: var(--px-small-size);
+  --text-size: var(--px-small-font-size);
+}
+.px-input-number__disabled {
+  cursor: not-allowed;
+}
+.px-input-number__disabled .px-input-number-inner:disabled {
+  cursor: not-allowed;
+  color: var(--px-neutral-8);
+}
+.px-input-number-setting-prefix-wrapper,
+.px-input-number-setting-suffix-wrapper,
+.px-input-number-prefix-wrapper,
+.px-input-number-suffix-wrapper,
+.px-input-number-loading-wrapper,
+.px-input-number-close-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.px-input-number-setting-prefix-wrapper,
+.px-input-number-prefix-wrapper {
+  margin-right: var(--px-interval-2);
+}
+.px-input-number-setting-suffix-wrapper,
+.px-input-number-suffix-wrapper,
+.px-input-number-loading-wrapper,
+.px-input-number-close-wrapper {
+  margin-left: var(--px-interval-2);
+}
+.px-input-number-close-wrapper .px-input-number-icon-placeholder {
+  width: var(--text-size);
+  height: var(--text-size);
+}
+.px-input-number-close-wrapper .px-input-number-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  cursor: pointer;
+  fill: var(--px-neutral-8);
+  transition: 0.25s;
+}
+.px-input-number-close-wrapper .px-input-number-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-input-number-close-wrapper .px-input-number-icon:active {
+  fill: var(--px-neutral-9);
+}
+.px-input-number-loading-wrapper .px-input-number-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  fill: var(--px-primary-6);
+}
+.px-input-number-prefix-wrapper,
+.px-input-number-suffix-wrapper {
+  color: var(--px-neutral-10);
+}
+.px-input-number-setting-prefix-wrapper .px-input-number-icon,
+.px-input-number-setting-suffix-wrapper .px-input-number-icon {
+  cursor: pointer;
+  width: var(--text-size);
+  height: var(--text-size);
+  fill: var(--px-neutral-8);
+  transition: 0.25s;
+  margin-right: var(--px-interval-2);
+}
+.px-input-number-setting-prefix-wrapper .px-input-number-icon:hover,
+.px-input-number-setting-suffix-wrapper .px-input-number-icon:hover {
+  fill: var(--px-primary-6);
+}
+.px-input-number-setting-prefix-wrapper .px-input-number-icon:active,
+.px-input-number-setting-suffix-wrapper .px-input-number-icon:active {
+  fill: var(--px-neutral-9);
+}
+.px-input-number-setting-prefix-wrapper .px-input-number-icon:last-of-type,
+.px-input-number-setting-suffix-wrapper .px-input-number-icon:last-of-type {
+  margin-right: 0;
+}
+.px-input-number-setting-prefix-wrapper .px-input-number-icon.px-input-number-icon__disabled,
+.px-input-number-setting-suffix-wrapper .px-input-number-icon.px-input-number-icon__disabled {
+  cursor: not-allowed;
+  fill: var(--px-neutral-7);
+}
+.px-input-number-setting-prefix-wrapper__reverse,
+.px-input-number-setting-suffix-wrapper__reverse {
+  flex-direction: row-reverse;
+}
+.px-input-number-setting-prefix-wrapper__reverse .px-input-number-icon,
+.px-input-number-setting-suffix-wrapper__reverse .px-input-number-icon {
+  margin-right: 0;
+  margin-left: var(--px-interval-2);
+}
+.px-input-number-setting-prefix-wrapper__reverse .px-input-number-icon:last-of-type,
+.px-input-number-setting-suffix-wrapper__reverse .px-input-number-icon:last-of-type {
+  margin-right: 0;
+  margin-left: 0;
+}
+.px-input-number-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}

package/es/input-number/index.d.ts

@@ -0,0 +1,47 @@
+import type { InputNumberProps } from './type';
+declare var __VLS_1: {}, __VLS_52: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_1) => any;
+} & {
+    suffix?: (props: typeof __VLS_52) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<InputNumberProps, {
+    focus: () => void;
+    blur: () => void;
+    clear: () => Promise<void>;
+    select: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (value: number, e: Event) => any;
+    change: (value: number, e?: Event | undefined) => any;
+    clear: (value: number) => any;
+    blur: (e: FocusEvent) => any;
+    focus: (e: FocusEvent) => any;
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
+    onInput?: ((value: number, e: Event) => any) | undefined;
+    onChange?: ((value: number, e?: Event | undefined) => any) | undefined;
+    onClear?: ((value: number) => any) | undefined;
+    onBlur?: ((e: FocusEvent) => any) | undefined;
+    onFocus?: ((e: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    shape: "default" | "round";
+    size: "medium" | "large" | "small";
+    disabled: boolean;
+    loading: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    status: "success" | "warning" | "error" | "normal";
+    max: number;
+    min: number;
+    step: number;
+    strickStep: boolean;
+    buttonPlacement: "start" | "end" | "both" | "start-reverse" | "end-reverse" | "both-reverse";
+}, {}, {}, {}, 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;
+    };
+};