@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/tag/index.js

@@ -1,193 +1,124 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, ref, shallowRef, onMounted, nextTick, computed, watch, normalizeClass, renderSlot, createCommentVNode, createVNode, unref } from "vue";
-import { a as canvasPreprocess, c as calcPixelSize, g as getBorderRadius, b as calcBorderCornerCenter, f as floodFill } from "../share/util/plot.js";
-import { p as parseColor, a as generatePalette } from "../share/util/color.js";
-import { g as getTextColorWithPalette, a as getBorderColor, d as drawBorder, b as getBackgroundColor } 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 { B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
-const Times = /* @__PURE__ */ defineComponent({
-  props: {
-    size: {},
-    color: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "svg",
-        {
-          class: "px-icon-hn",
-          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24"
-        },
-        [..._cache[0] || (_cache[0] = [
-          createElementVNode(
-            "path",
-            { d: "M14 13h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1H9v1H8v1H7v1H6v1H5v1H4v1H3v-1H2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-2H9v-1H8V9H7V8H6V7H5V6H4V5H3V4H2V3h1V2h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h2V9h1V8h1V7h1V6h1V5h1V4h1V3h1V2h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
-const _hoisted_1 = {
-  key: 0,
-  class: "px-tag-icon-wrapper"
+import { r as times_default } from "../vendor.js";
+import { t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { i as canvasPreprocess, l as getBorderRadius, n as calcPixelSize, s as floodFill, t as calcBorderCornerCenter } from "../share/util/plot.js";
+import { i as parseColor, t as generatePalette } from "../share/util/color.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { t as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { t as useTransitionEnd } from "../share/hook/use-transition-end.js";
+import { i as getTextColorWithPalette, n as getBackgroundColor, r as getBorderColor, t as drawBorder } from "./draw.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, shallowRef, unref, watch, withModifiers } from "vue";
+var _hoisted_1 = {
+	key: 0,
+	class: "px-tag-icon-wrapper"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Tag"
-  },
-  __name: "index",
-  props: {
-    borderRadius: null,
-    shape: { default: "default" },
-    size: { default: "medium" },
-    disabled: { type: Boolean, default: false },
-    variant: { default: "primary" },
-    theme: { default: "primary" },
-    color: null,
-    closable: { type: Boolean }
-  },
-  emits: ["close"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const closeHoverFlag = ref(false);
-    const closeActiveFlag = ref(false);
-    const toggleHover = (value) => {
-      closeHoverFlag.value = value;
-    };
-    const toggleActive = (value) => {
-      closeActiveFlag.value = value;
-    };
-    const darkMode = useDarkMode();
-    const canvasRef = shallowRef(null);
-    const tagRef = shallowRef(null);
-    onMounted(() => {
-      nextTick(() => {
-        drawPixel();
-      });
-    });
-    const palette = computed(() => {
-      if (!props.color) return null;
-      const color = parseColor(props.color);
-      const palette2 = generatePalette(color.r, color.g, color.b, color.a, darkMode.value);
-      return palette2;
-    });
-    const textColor = computed(() => {
-      return getTextColorWithPalette(palette.value, props.variant, props.disabled);
-    });
-    const closeHandler = (e) => {
-      if (!props.disabled) {
-        emits("close", e);
-      }
-    };
-    watch(
-      [
-        () => props.borderRadius,
-        () => props.shape,
-        () => props.disabled,
-        () => props.variant,
-        () => props.theme,
-        palette,
-        darkMode
-      ],
-      () => {
-        drawPixel();
-      }
-    );
-    const drawPixel = () => {
-      const preprocessData = canvasPreprocess(tagRef, canvasRef);
-      if (!preprocessData) {
-        return;
-      }
-      const { ctx, width, height, canvas } = preprocessData;
-      const pixelSize = calcPixelSize();
-      const borderRadius = getBorderRadius(
-        canvas,
-        pixelSize,
-        props.borderRadius,
-        props.shape,
-        "medium",
-        false,
-        false,
-        false
-      );
-      const borderColor = getBorderColor(props.disabled, props.variant, props.theme, palette.value);
-      const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
-      const rad = BORDER_CORNER_RAD_RANGE;
-      drawBorder(ctx, width, height, center, borderRadius, rad, borderColor, pixelSize);
-      const backgroundColor = getBackgroundColor(
-        props.disabled,
-        props.variant,
-        props.theme,
-        palette.value
-      );
-      floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
-    };
-    useResizeObserver(tagRef, drawPixel);
-    useWatchGlobalCssVal(drawPixel);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "span",
-        {
-          class: normalizeClass(["pixelium px-tag", {
-            "px-tag__large": props.size === "large",
-            "px-tag__small": props.size === "small",
-            "px-tag__outline": props.variant === "outline",
-            "px-tag__plain": props.variant === "plain",
-            "px-tag__disabled": props.disabled,
-            "px-tag__custom": palette.value,
-            [`px-tag__${props.theme || "primary"}`]: true
-          }]),
-          style: normalizeStyle({
-            color: textColor.value
-          }),
-          ref_key: "tagRef",
-          ref: tagRef
-        },
-        [
-          createElementVNode(
-            "canvas",
-            {
-              ref_key: "canvasRef",
-              ref: canvasRef,
-              class: "px-tag-canvas"
-            },
-            null,
-            512
-            /* NEED_PATCH */
-          ),
-          renderSlot(_ctx.$slots, "default"),
-          props.closable ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            createVNode(unref(Times), {
-              onMousedown: _cache[0] || (_cache[0] = ($event) => toggleActive(true)),
-              onMouseup: _cache[1] || (_cache[1] = ($event) => toggleActive(false)),
-              onMouseenter: _cache[2] || (_cache[2] = ($event) => toggleHover(true)),
-              onMouseleave: _cache[3] || (_cache[3] = ($event) => toggleHover(false)),
-              onClick: closeHandler,
-              class: "px-tag-icon",
-              style: normalizeStyle({
-                fill: textColor.value
-              })
-            }, null, 8, ["style"])
-          ])) : createCommentVNode("v-if", true)
-        ],
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
+var tag_default = /* @__PURE__ */ defineComponent({
+	name: "Tag",
+	__name: "index",
+	props: {
+		borderRadius: null,
+		shape: { default: "rect" },
+		size: { default: "medium" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		variant: { default: "primary" },
+		theme: { default: "primary" },
+		color: null,
+		closable: { type: Boolean }
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const closeHoverFlag = ref(false);
+		const closeActiveFlag = ref(false);
+		const toggleHover = (value) => {
+			closeHoverFlag.value = value;
+		};
+		const toggleActive = (value) => {
+			closeActiveFlag.value = value;
+		};
+		const darkMode = useDarkMode();
+		const canvasRef = shallowRef(null);
+		const tagRef = shallowRef(null);
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+			});
+		});
+		const palette = computed(() => {
+			if (!props.color) return null;
+			const color = parseColor(props.color);
+			if (!color) return null;
+			return generatePalette(color.r, color.g, color.b, color.a, darkMode.value);
+		});
+		const textColor = computed(() => {
+			return getTextColorWithPalette(palette.value, props.variant, props.disabled);
+		});
+		const closeHandler = (e) => {
+			if (!props.disabled) emits("close", e);
+		};
+		watch([
+			() => props.borderRadius,
+			() => props.shape,
+			() => props.disabled,
+			() => props.variant,
+			() => props.theme,
+			palette,
+			darkMode
+		], () => {
+			drawPixel();
+		});
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(tagRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height, canvas } = preprocessData;
+			const pixelSize = calcPixelSize();
+			const borderRadius = getBorderRadius(canvas, pixelSize, props.borderRadius, props.shape, "medium", false, false, false);
+			const borderColor = getBorderColor(props.disabled, props.variant, props.theme, palette.value);
+			const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+			const rad = BORDER_CORNER_RAD_RANGE;
+			if (borderColor) drawBorder(ctx, width, height, center, borderRadius, rad, borderColor, pixelSize);
+			const backgroundColor = getBackgroundColor(props.disabled, props.variant, props.theme, palette.value);
+			if (backgroundColor) floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
+		};
+		useResizeObserver(tagRef, drawPixel);
+		useWatchGlobalCssVal(drawPixel);
+		useTransitionEnd(tagRef, drawPixel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: normalizeClass(["pixelium px-tag", {
+					[`px-tag__${props.size}`]: props.size,
+					"px-tag__outline": props.variant === "outline",
+					"px-tag__plain": props.variant === "plain",
+					"px-tag__disabled": props.disabled,
+					"px-tag__custom": palette.value,
+					[`px-tag__${props.theme || "primary"}`]: true
+				}]),
+				style: normalizeStyle({ color: textColor.value }),
+				ref_key: "tagRef",
+				ref: tagRef
+			}, [
+				createElementVNode("canvas", {
+					ref_key: "canvasRef",
+					ref: canvasRef,
+					class: "px-tag-canvas"
+				}, null, 512),
+				renderSlot(_ctx.$slots, "default"),
+				props.closable ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(times_default), {
+					onMousedown: _cache[0] || (_cache[0] = withModifiers(($event) => toggleActive(true), ["prevent"])),
+					onMouseup: _cache[1] || (_cache[1] = ($event) => toggleActive(false)),
+					onMouseenter: _cache[2] || (_cache[2] = ($event) => toggleHover(true)),
+					onMouseleave: _cache[3] || (_cache[3] = ($event) => toggleHover(false)),
+					onClick: closeHandler,
+					class: "px-tag-icon",
+					style: normalizeStyle({ fill: textColor.value })
+				}, null, 8, ["style"])])) : createCommentVNode("v-if", true)
+			], 6);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { tag_default as t };

package/es/tag/type.d.ts

@@ -6,10 +6,10 @@ export type TagProps = {
      */
     borderRadius?: NumberOrPercentage | NumberOrPercentage[];
     /**
-     * @property {'default' | 'round'} [shape='default']
-     * @version 0.0.2
+     * @property {'rect' | 'round'} [shape='rect']
+     * @version 0.0.3
      */
-    shape?: 'default' | 'round';
+    shape?: 'rect' | 'round' | 'default';
     /**
      * @property {'medium' | 'large' | 'small'} [size='medium']
      * @version 0.0.2

package/es/text-outline/css.js

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

package/es/text-outline/index.css

@@ -0,0 +1,4 @@
+.px-text-outline {
+  -webkit-background-clip: text;
+  background-clip: text;
+}

package/es/text-outline/index.d.ts

@@ -0,0 +1,17 @@
+import type { TextOutlineProps } from './type';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TextOutlineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextOutlineProps> & Readonly<{}>, {
+    color: string;
+    outlineWidth: number | string;
+    autoPadding: 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/text-outline/index.js

@@ -0,0 +1,33 @@
+import './css.js'
+import { computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderSlot } from "vue";
+var text_outline_default = /* @__PURE__ */ defineComponent({
+	name: "TextOutline",
+	__name: "index",
+	props: {
+		color: { default: "var(--px-neutral-1)" },
+		outlineWidth: { default: 1 },
+		autoPadding: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const widthValue = computed(() => {
+			const val = props.outlineWidth;
+			return typeof val === "number" ? `${val}px` : val;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: "pixelium px-text-outline",
+				style: normalizeStyle({
+					"-webkit-text-stroke": `${widthValue.value} transparent`,
+					background: `text ${props.color}`,
+					paddingLeft: __props.autoPadding ? widthValue.value : void 0,
+					paddingRight: __props.autoPadding ? widthValue.value : void 0
+				})
+			}, [renderSlot(_ctx.$slots, "default")], 4);
+		};
+	}
+});
+export { text_outline_default as t };

package/es/text-outline/type.d.ts

@@ -0,0 +1,23 @@
+export type TextOutlineProps = {
+    /**
+     * @property {string} [color]
+     * @version 0.0.3
+     */
+    color?: string;
+    /**
+     * @property {number | string} [outlineWidth=1]
+     * @version 0.0.3
+     */
+    outlineWidth?: number | string;
+    /**
+     * @property {boolean} [autoPadding=true]
+     * @version 0.0.3
+     */
+    autoPadding?: boolean;
+};
+export type TextOutlineSlots = {
+    /**
+     * @version 0.0.3
+     */
+    default: {};
+};

package/es/textarea/draw.js

@@ -1,13 +1,11 @@
-import { r as rgbaColor2string } from "../share/util/color.js";
+import { a as rgbaColor2string } from "../share/util/color.js";
 const draw = (ctx, width, height, borderColor, backgroundColor, pixelSize) => {
-  ctx.fillStyle = rgbaColor2string(borderColor);
-  ctx.fillRect(pixelSize, 0, width - 2 * pixelSize, pixelSize);
-  ctx.fillRect(width - pixelSize, pixelSize, pixelSize, height - 2 * pixelSize);
-  ctx.fillRect(pixelSize, height - pixelSize, width - 2 * pixelSize, pixelSize);
-  ctx.fillRect(0, pixelSize, pixelSize, height - 2 * pixelSize);
-  ctx.fillStyle = rgbaColor2string(backgroundColor);
-  ctx.fillRect(pixelSize, pixelSize, width - 2 * pixelSize, height - 2 * pixelSize);
-};
-export {
-  draw as d
+	ctx.fillStyle = rgbaColor2string(borderColor);
+	ctx.fillRect(pixelSize, 0, width - 2 * pixelSize, pixelSize);
+	ctx.fillRect(width - pixelSize, pixelSize, pixelSize, height - 2 * pixelSize);
+	ctx.fillRect(pixelSize, height - pixelSize, width - 2 * pixelSize, pixelSize);
+	ctx.fillRect(0, pixelSize, pixelSize, height - 2 * pixelSize);
+	ctx.fillStyle = rgbaColor2string(backgroundColor);
+	ctx.fillRect(pixelSize, pixelSize, width - 2 * pixelSize, height - 2 * pixelSize);
 };
+export { draw as t };

package/es/textarea/index.css

@@ -1,12 +1,4 @@
-div.px-textarea {
-  font-size: var(--text-size);
-}
 .px-textarea {
-  --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);
   --textarea-size: var(--px-medium-size);
   z-index: 0;
   position: relative;
@@ -17,6 +9,40 @@ div.px-textarea {
   color: var(--px-neutral-10);
   display: flex;
   box-sizing: border-box;
+  transition: 0.25s;
+}
+.px-textarea.px-textarea__small {
+  font-size: 12px;
+}
+.px-textarea.px-textarea__small .px-textarea-inner {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 12px;
+}
+.px-textarea.px-textarea__small .px-textarea-addition-wrapper {
+  right: 8px;
+}
+.px-textarea.px-textarea__medium {
+  font-size: 14px;
+}
+.px-textarea.px-textarea__medium .px-textarea-inner {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 14px;
+}
+.px-textarea.px-textarea__medium .px-textarea-addition-wrapper {
+  right: 8px;
+}
+.px-textarea.px-textarea__large {
+  font-size: 15px;
+}
+.px-textarea.px-textarea__large .px-textarea-inner {
+  padding-right: 12px;
+  padding-left: 12px;
+  font-size: 15px;
+}
+.px-textarea.px-textarea__large .px-textarea-addition-wrapper {
+  right: 12px;
 }
 .px-textarea-inner {
   height: 100%;
@@ -25,10 +51,9 @@ div.px-textarea {
   box-sizing: border-box;
   width: 100%;
   font-size: var(--text-size);
-  line-height: var(--px-line-height);
+  line-height: 1.5;
   font-family: var(--px-font);
-  padding: 0 var(--padding-x-size);
-  min-height: calc(var(--textarea-size) - var(--px-bit) * 2);
+  min-height: 28px;
   resize: none;
 }
 .px-textarea-inner:focus-visible {
@@ -45,16 +70,6 @@ div.px-textarea {
 .px-textarea__resize .px-textarea-inner {
   resize: vertical;
 }
-.px-textarea__large {
-  --padding-x-size: var(--px-large-padding-x);
-  --text-size: var(--px-large-font-size);
-  --input-size: var(--px-large-size);
-}
-.px-textarea__small {
-  --padding-x-size: var(--px-small-padding-x);
-  --input-size: var(--px-small-size);
-  --text-size: var(--px-small-font-size);
-}
 .px-textarea__disabled {
   cursor: not-allowed;
 }
@@ -65,7 +80,6 @@ div.px-textarea {
 .px-textarea-addition-wrapper {
   position: absolute;
   bottom: 0;
-  right: var(--padding-x-size);
   display: flex;
   align-items: center;
 }
@@ -75,7 +89,7 @@ div.px-textarea {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  margin-left: var(--px-interval-2);
+  margin-left: 8px;
 }
 .px-textarea-close-wrapper .px-textarea-icon {
   width: var(--text-size);

package/es/textarea/index.d.ts

@@ -1,4 +1,4 @@
-import type { TextareaProps } from './type';
+import type { TextareaExpose, TextareaProps } from './type';
 import { type Nullish } from 'parsnip-kit';
 declare var __VLS_9: {
     value: string | Nullish;
@@ -8,31 +8,25 @@ declare var __VLS_9: {
 type __VLS_Slots = {} & {
     count?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<TextareaProps, {
-    focus: () => void;
-    blur: () => void;
-    clear: () => Promise<void>;
-    select: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    input: (value: string, e: Event) => any;
-    change: (value: string, e?: Event | undefined) => any;
+declare const __VLS_component: import("vue").DefineComponent<TextareaProps, TextareaExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: (value: string) => any;
+    change: (value: string, e?: Event | undefined) => any;
     blur: (e: FocusEvent) => any;
+    input: (value: string, e: Event) => any;
     focus: (e: FocusEvent) => any;
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{
-    onInput?: ((value: string, e: Event) => any) | undefined;
-    onChange?: ((value: string, e?: Event | undefined) => any) | undefined;
     onClear?: ((value: string) => any) | undefined;
+    onChange?: ((value: string, e?: Event | undefined) => any) | undefined;
     onBlur?: ((e: FocusEvent) => any) | undefined;
+    onInput?: ((value: string, e: Event) => any) | undefined;
     onFocus?: ((e: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    size: "medium" | "large" | "small";
     disabled: boolean;
-    loading: boolean;
-    resize: boolean;
     readonly: boolean;
+    resize: boolean;
+    loading: boolean;
     clearable: boolean;
     showCount: boolean;
     status: "success" | "warning" | "error" | "normal";