@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/spin/index.css

@@ -0,0 +1,66 @@
+.px-spin {
+  position: relative;
+  display: inline-block;
+  min-height: var(--px-medium-base-size);
+  min-width: var(--px-medium-base-size);
+}
+.px-spin__small {
+  min-height: var(--px-small-base-size);
+  min-width: var(--px-small-base-size);
+}
+.px-spin__large {
+  min-height: var(--px-large-base-size);
+  min-width: var(--px-large-base-size);
+}
+.px-spin-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.px-spin-content,
+.px-spin-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.px-spin-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--px-primary-6);
+  font-size: var(--px-large-font-size);
+}
+.px-spin-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: var(--px-interval-2);
+  font-size: var(--px-medium-base-size);
+}
+.px-spin-icon-wrapper__last {
+  margin-bottom: 0;
+}
+.px-spin-icon-wrapper .px-spin-icon {
+  height: var(--px-medium-base-size);
+  width: var(--px-medium-base-size);
+  fill: var(--px-primary-6);
+}
+.px-spin-icon-wrapper__small {
+  font-size: var(--px-small-base-size);
+}
+.px-spin-icon-wrapper__small .px-spin-icon {
+  height: var(--px-small-base-size);
+  width: var(--px-small-base-size);
+}
+.px-spin-icon-wrapper__large {
+  font-size: var(--px-large-base-size);
+}
+.px-spin-icon-wrapper__large .px-spin-icon {
+  height: var(--px-large-base-size);
+  width: var(--px-large-base-size);
+}

package/es/spin/index.d.ts

@@ -0,0 +1,24 @@
+import type { SpinProps } from './type';
+declare var __VLS_1: {}, __VLS_7: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_7) => any;
+} & {
+    description?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<SpinProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpinProps> & Readonly<{}>, {
+    size: "medium" | "large" | "small" | number;
+    loading: boolean;
+    zIndex: number;
+    maskStep: number;
+    maskLineWidth: number;
+    maskGrid: 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;
+    };
+};

package/es/spin/index.js

@@ -0,0 +1,104 @@
+import './css.js'
+import { defineComponent, useSlots, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createCommentVNode, createBlock, createElementVNode, createVNode } from "vue";
+import { C as COVER_Z_INDEX } from "../share/const/index.js";
+import { _ as _sfc_main$1 } from "../mask/index.js";
+import { S as SpinnerThirdSolid } from "../auto-complete/index.js";
+import { k, p } from "../aside/index.js";
+const _hoisted_1 = { class: "px-spin-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Spin"
+  },
+  __name: "index",
+  props: {
+    loading: { type: Boolean, default: void 0 },
+    size: { default: "medium" },
+    maskColor: null,
+    maskStep: { default: 1 },
+    maskLineWidth: { default: 2 },
+    maskGrid: { type: Boolean, default: true },
+    zIndex: { default: COVER_Z_INDEX }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const sizeValue = computed(() => {
+      return k(props.size) ? `${props.size}px` : void 0;
+    });
+    const loadingComputed = computed(() => {
+      return slots.default ? !!props.loading : props.loading !== false;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["pixelium px-spin", {
+            [`px-spin__${props.size}`]: unref(p)(props.size)
+          }]),
+          style: normalizeStyle({
+            minWidth: sizeValue.value,
+            minHeight: sizeValue.value
+          })
+        },
+        [
+          renderSlot(_ctx.$slots, "default"),
+          loadingComputed.value ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: "px-spin-cover",
+              style: normalizeStyle({
+                zIndex: props.zIndex
+              })
+            },
+            [
+              unref(slots).default ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                "z-index": 0,
+                color: props.maskColor,
+                step: props.maskStep,
+                "line-width": props.maskLineWidth,
+                grid: props.maskGrid
+              }, null, 8, ["color", "step", "line-width", "grid"])) : createCommentVNode("v-if", true),
+              createElementVNode("div", _hoisted_1, [
+                createElementVNode(
+                  "div",
+                  {
+                    class: normalizeClass(["px-spin-icon-wrapper", {
+                      "px-spin-icon-wrapper__last": !unref(slots).description,
+                      [`px-spin-icon-wrapper__${props.size}`]: unref(p)(props.size)
+                    }]),
+                    style: normalizeStyle({
+                      fontSize: sizeValue.value
+                    })
+                  },
+                  [
+                    renderSlot(_ctx.$slots, "icon", {}, () => [
+                      createVNode(unref(SpinnerThirdSolid), {
+                        class: "px-spin-icon px-animation__loading",
+                        style: normalizeStyle({
+                          width: sizeValue.value,
+                          height: sizeValue.value
+                        })
+                      }, null, 8, ["style"])
+                    ])
+                  ],
+                  6
+                  /* CLASS, STYLE */
+                ),
+                renderSlot(_ctx.$slots, "description")
+              ])
+            ],
+            4
+            /* STYLE */
+          )) : createCommentVNode("v-if", true)
+        ],
+        6
+        /* CLASS, STYLE */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/spin/type.d.ts

@@ -0,0 +1,54 @@
+export type SpinProps = {
+    /**
+     * @property {boolean} [loading]
+     * @version 0.0.2
+     */
+    loading?: boolean;
+    /**
+     * @property {'medium' | 'large' | 'small' | number} [size='medium']
+     * @version 0.0.2
+     */
+    size?: 'medium' | 'large' | 'small' | number;
+    /**
+     * @property {string} [maskColor]
+     * @version 0.0.2
+     */
+    maskColor?: string;
+    /**
+     * @property {number} [maskStep=1]
+     * @version 0.0.2
+     */
+    maskStep?: number;
+    /**
+     * @property {number} [maskLineWidth=2]
+     * @version 0.0.2
+     */
+    maskLineWidth?: number;
+    /**
+     * @property {boolean} [maskGrid=true]
+     * @version 0.0.2
+     */
+    maskGrid?: boolean;
+    /**
+     * @property {number} [zIndex=20]
+     * @version 0.0.2
+     */
+    zIndex?: number;
+};
+export type SpinSlots = {
+    /**
+     * @slot default
+     * @version 0.0.2
+     */
+    default: {};
+    /**
+     * @slot icon
+     * @version 0.0.2
+     */
+    icon: {};
+    /**
+     * @slot description
+     * @version 0.0.2
+     */
+    description: {};
+};

package/es/tag/css.js

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

package/es/tag/draw.d.ts

@@ -0,0 +1,6 @@
+import type { RgbaColor } from '../share/type';
+import type { TagProps } from './type';
+export declare function getBackgroundColor(disabled: boolean, type: TagProps['variant'], theme: TagProps['theme'], palette: RgbaColor[] | null): RgbaColor;
+export declare function getBorderColor(disabled: boolean, type: TagProps['variant'], theme: TagProps['theme'], palette: RgbaColor[] | null): RgbaColor;
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number) => void;
+export declare const getTextColorWithPalette: (palette: RgbaColor[] | null, type: TagProps["variant"], disabled: boolean) => string | undefined;

package/es/tag/draw.js

@@ -0,0 +1,135 @@
+import { T as TRANSPARENT_RGBA_COLOR_OBJECT } from "../share/const/index.js";
+import { r as rgbaColor2string, g as getGlobalThemeColor } from "../share/util/color.js";
+import { d as drawCircle } from "../share/util/plot.js";
+function getBackgroundColor(disabled, type, theme = "primary", palette) {
+  if (palette) {
+    switch (type) {
+      case "outline":
+        return TRANSPARENT_RGBA_COLOR_OBJECT;
+      case "plain":
+        if (disabled) return palette[0];
+        return palette[0];
+      default:
+        if (disabled) return palette[1];
+        return palette[5];
+    }
+  } else if (theme !== "info") {
+    switch (type) {
+      case "outline":
+        return TRANSPARENT_RGBA_COLOR_OBJECT;
+      case "plain":
+        if (disabled) return getGlobalThemeColor(theme, 1);
+        return getGlobalThemeColor(theme, 1);
+      default:
+        if (disabled) return getGlobalThemeColor(theme, 2);
+        return getGlobalThemeColor(theme, 6);
+    }
+  } else {
+    switch (type) {
+      case "outline":
+        return TRANSPARENT_RGBA_COLOR_OBJECT;
+      case "plain":
+        if (disabled) return getGlobalThemeColor("neutral", 1);
+        return getGlobalThemeColor("neutral", 1);
+      default:
+        if (disabled) return getGlobalThemeColor("neutral", 7);
+        return getGlobalThemeColor("neutral", 8);
+    }
+  }
+}
+function getBorderColor(disabled, type, theme = "primary", palette) {
+  if (palette) {
+    switch (type) {
+      case "plain":
+        if (disabled) return palette[1];
+        return palette[1];
+      case "outline":
+        if (disabled) return palette[0];
+        return palette[5];
+      default:
+        if (disabled) return palette[0];
+        return palette[4];
+    }
+  } else if (theme !== "info") {
+    switch (type) {
+      case "plain":
+        if (disabled) return getGlobalThemeColor(theme, 2);
+        return getGlobalThemeColor(theme, 2);
+      case "outline":
+        if (disabled) return getGlobalThemeColor(theme, 1);
+        return getGlobalThemeColor(theme, 6);
+      default:
+        if (disabled) return getGlobalThemeColor(theme, 1);
+        return getGlobalThemeColor(theme, 5);
+    }
+  } else {
+    switch (type) {
+      case "plain":
+        if (disabled) return getGlobalThemeColor("neutral", 5);
+        return getGlobalThemeColor("neutral", 7);
+      case "outline":
+        if (disabled) return getGlobalThemeColor("neutral", 7);
+        return getGlobalThemeColor("neutral", 9);
+    }
+    return disabled ? getGlobalThemeColor("neutral", 5) : getGlobalThemeColor("neutral", 7);
+  }
+}
+const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize) => {
+  ctx.fillStyle = rgbaColor2string(borderColor);
+  for (let i = 0; i < 4; i++) {
+    if (borderRadius[i] > pixelSize) {
+      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]) {
+    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]) {
+    ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
+  }
+};
+const getTextColorWithPalette = (palette, type, disabled) => {
+  if (!palette || type === "primary") return void 0;
+  if (disabled) {
+    if (type === "plain") return rgbaColor2string(palette[2]);
+    return rgbaColor2string(palette[1]);
+  }
+  switch (type) {
+    case "outline":
+      return rgbaColor2string(palette[5]);
+    case "plain":
+      return rgbaColor2string(palette[5]);
+    default:
+      return void 0;
+  }
+};
+export {
+  getBorderColor as a,
+  getBackgroundColor as b,
+  drawBorder as d,
+  getTextColorWithPalette as g
+};