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

package/es/tag/index.css

@@ -0,0 +1,372 @@
+.px-tag-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}
+span.px-tag {
+  font-size: var(--text-size);
+}
+.px-tag {
+  --tag-size: calc(var(--px-medium-size) - var(--px-bit) * 2 - 2px);
+  --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-color: var(--px-neutral-1);
+  --text-size: var(--px-medium-font-size);
+  height: var(--tag-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-tag__large {
+  --padding-x-size: var(--px-large-padding-x);
+  --tag-size: calc(var(--px-medium-size));
+  --text-size: var(--px-medium-font-size);
+}
+.px-tag__small {
+  --padding-x-size: var(--px-small-padding-x);
+  --tag-size: calc(var(--px-small-size) - var(--px-bit) * 2);
+  --text-size: var(--px-small-font-size);
+}
+.px-tag.px-tag__disabled {
+  cursor: not-allowed;
+}
+.px-tag.px-tag__disabled .px-tag-icon {
+  cursor: not-allowed;
+}
+.px-tag-icon-wrapper {
+  margin-left: var(--px-interval-1);
+  display: flex;
+  align-items: center;
+}
+.px-tag-icon-wrapper .px-tag-icon {
+  height: calc(var(--text-size) - 4px);
+  width: calc(var(--text-size) - 4px);
+  fill: var(--text-color);
+  cursor: pointer;
+}
+.px-tag.px-tag__primary:focus-visible {
+  outline-color: var(--px-primary-6);
+  outline-offset: var(--px-bit);
+}
+.px-tag.px-tag__primary .px-tag-icon:hover {
+  fill: var(--px-primary-2);
+}
+.px-tag.px-tag__primary .px-tag-icon:active {
+  fill: var(--px-primary-3);
+}
+.px-tag.px-tag__primary.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-primary-1);
+}
+.px-tag.px-tag__primary.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-primary-1);
+}
+.px-tag.px-tag__primary.px-tag__plain {
+  --text-color: var(--px-primary-6);
+}
+.px-tag.px-tag__primary.px-tag__plain .px-tag-icon:hover {
+  fill: var(--px-primary-5);
+}
+.px-tag.px-tag__primary.px-tag__plain .px-tag-icon:active {
+  fill: var(--px-primary-7);
+}
+.px-tag.px-tag__primary.px-tag__plain.px-tag__disabled {
+  --text-color: var(--px-primary-3);
+}
+.px-tag.px-tag__primary.px-tag__plain.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-primary-3);
+}
+.px-tag.px-tag__primary.px-tag__plain.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-primary-3);
+}
+.px-tag.px-tag__primary.px-tag__outline {
+  --text-color: var(--px-primary-6);
+}
+.px-tag.px-tag__primary.px-tag__outline .px-tag-icon:hover {
+  fill: var(--px-primary-5);
+}
+.px-tag.px-tag__primary.px-tag__outline .px-tag-icon:active {
+  fill: var(--px-primary-7);
+}
+.px-tag.px-tag__primary.px-tag__outline.px-tag__disabled {
+  --text-color: var(--px-primary-2);
+}
+.px-tag.px-tag__primary.px-tag__outline.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-primary-2);
+}
+.px-tag.px-tag__primary.px-tag__outline.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-primary-2);
+}
+.px-tag.px-tag__sakura:focus-visible {
+  outline-color: var(--px-sakura-6);
+  outline-offset: var(--px-bit);
+}
+.px-tag.px-tag__sakura .px-tag-icon:hover {
+  fill: var(--px-sakura-2);
+}
+.px-tag.px-tag__sakura .px-tag-icon:active {
+  fill: var(--px-sakura-3);
+}
+.px-tag.px-tag__sakura.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-sakura-1);
+}
+.px-tag.px-tag__sakura.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-sakura-1);
+}
+.px-tag.px-tag__sakura.px-tag__plain {
+  --text-color: var(--px-sakura-6);
+}
+.px-tag.px-tag__sakura.px-tag__plain .px-tag-icon:hover {
+  fill: var(--px-sakura-5);
+}
+.px-tag.px-tag__sakura.px-tag__plain .px-tag-icon:active {
+  fill: var(--px-sakura-7);
+}
+.px-tag.px-tag__sakura.px-tag__plain.px-tag__disabled {
+  --text-color: var(--px-sakura-3);
+}
+.px-tag.px-tag__sakura.px-tag__plain.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-sakura-3);
+}
+.px-tag.px-tag__sakura.px-tag__plain.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-sakura-3);
+}
+.px-tag.px-tag__sakura.px-tag__outline {
+  --text-color: var(--px-sakura-6);
+}
+.px-tag.px-tag__sakura.px-tag__outline .px-tag-icon:hover {
+  fill: var(--px-sakura-5);
+}
+.px-tag.px-tag__sakura.px-tag__outline .px-tag-icon:active {
+  fill: var(--px-sakura-7);
+}
+.px-tag.px-tag__sakura.px-tag__outline.px-tag__disabled {
+  --text-color: var(--px-sakura-2);
+}
+.px-tag.px-tag__sakura.px-tag__outline.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-sakura-2);
+}
+.px-tag.px-tag__sakura.px-tag__outline.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-sakura-2);
+}
+.px-tag.px-tag__success:focus-visible {
+  outline-color: var(--px-success-6);
+  outline-offset: var(--px-bit);
+}
+.px-tag.px-tag__success .px-tag-icon:hover {
+  fill: var(--px-success-2);
+}
+.px-tag.px-tag__success .px-tag-icon:active {
+  fill: var(--px-success-3);
+}
+.px-tag.px-tag__success.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-success-1);
+}
+.px-tag.px-tag__success.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-success-1);
+}
+.px-tag.px-tag__success.px-tag__plain {
+  --text-color: var(--px-success-6);
+}
+.px-tag.px-tag__success.px-tag__plain .px-tag-icon:hover {
+  fill: var(--px-success-5);
+}
+.px-tag.px-tag__success.px-tag__plain .px-tag-icon:active {
+  fill: var(--px-success-7);
+}
+.px-tag.px-tag__success.px-tag__plain.px-tag__disabled {
+  --text-color: var(--px-success-3);
+}
+.px-tag.px-tag__success.px-tag__plain.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-success-3);
+}
+.px-tag.px-tag__success.px-tag__plain.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-success-3);
+}
+.px-tag.px-tag__success.px-tag__outline {
+  --text-color: var(--px-success-6);
+}
+.px-tag.px-tag__success.px-tag__outline .px-tag-icon:hover {
+  fill: var(--px-success-5);
+}
+.px-tag.px-tag__success.px-tag__outline .px-tag-icon:active {
+  fill: var(--px-success-7);
+}
+.px-tag.px-tag__success.px-tag__outline.px-tag__disabled {
+  --text-color: var(--px-success-2);
+}
+.px-tag.px-tag__success.px-tag__outline.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-success-2);
+}
+.px-tag.px-tag__success.px-tag__outline.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-success-2);
+}
+.px-tag.px-tag__warning:focus-visible {
+  outline-color: var(--px-warning-6);
+  outline-offset: var(--px-bit);
+}
+.px-tag.px-tag__warning .px-tag-icon:hover {
+  fill: var(--px-warning-2);
+}
+.px-tag.px-tag__warning .px-tag-icon:active {
+  fill: var(--px-warning-3);
+}
+.px-tag.px-tag__warning.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-warning-1);
+}
+.px-tag.px-tag__warning.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-warning-1);
+}
+.px-tag.px-tag__warning.px-tag__plain {
+  --text-color: var(--px-warning-6);
+}
+.px-tag.px-tag__warning.px-tag__plain .px-tag-icon:hover {
+  fill: var(--px-warning-5);
+}
+.px-tag.px-tag__warning.px-tag__plain .px-tag-icon:active {
+  fill: var(--px-warning-7);
+}
+.px-tag.px-tag__warning.px-tag__plain.px-tag__disabled {
+  --text-color: var(--px-warning-3);
+}
+.px-tag.px-tag__warning.px-tag__plain.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-warning-3);
+}
+.px-tag.px-tag__warning.px-tag__plain.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-warning-3);
+}
+.px-tag.px-tag__warning.px-tag__outline {
+  --text-color: var(--px-warning-6);
+}
+.px-tag.px-tag__warning.px-tag__outline .px-tag-icon:hover {
+  fill: var(--px-warning-5);
+}
+.px-tag.px-tag__warning.px-tag__outline .px-tag-icon:active {
+  fill: var(--px-warning-7);
+}
+.px-tag.px-tag__warning.px-tag__outline.px-tag__disabled {
+  --text-color: var(--px-warning-2);
+}
+.px-tag.px-tag__warning.px-tag__outline.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-warning-2);
+}
+.px-tag.px-tag__warning.px-tag__outline.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-warning-2);
+}
+.px-tag.px-tag__danger:focus-visible {
+  outline-color: var(--px-danger-6);
+  outline-offset: var(--px-bit);
+}
+.px-tag.px-tag__danger .px-tag-icon:hover {
+  fill: var(--px-danger-2);
+}
+.px-tag.px-tag__danger .px-tag-icon:active {
+  fill: var(--px-danger-3);
+}
+.px-tag.px-tag__danger.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-danger-1);
+}
+.px-tag.px-tag__danger.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-danger-1);
+}
+.px-tag.px-tag__danger.px-tag__plain {
+  --text-color: var(--px-danger-6);
+}
+.px-tag.px-tag__danger.px-tag__plain .px-tag-icon:hover {
+  fill: var(--px-danger-5);
+}
+.px-tag.px-tag__danger.px-tag__plain .px-tag-icon:active {
+  fill: var(--px-danger-7);
+}
+.px-tag.px-tag__danger.px-tag__plain.px-tag__disabled {
+  --text-color: var(--px-danger-3);
+}
+.px-tag.px-tag__danger.px-tag__plain.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-danger-3);
+}
+.px-tag.px-tag__danger.px-tag__plain.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-danger-3);
+}
+.px-tag.px-tag__danger.px-tag__outline {
+  --text-color: var(--px-danger-6);
+}
+.px-tag.px-tag__danger.px-tag__outline .px-tag-icon:hover {
+  fill: var(--px-danger-5);
+}
+.px-tag.px-tag__danger.px-tag__outline .px-tag-icon:active {
+  fill: var(--px-danger-7);
+}
+.px-tag.px-tag__danger.px-tag__outline.px-tag__disabled {
+  --text-color: var(--px-danger-2);
+}
+.px-tag.px-tag__danger.px-tag__outline.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-danger-2);
+}
+.px-tag.px-tag__danger.px-tag__outline.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-danger-2);
+}
+.px-tag.px-tag__info:focus-visible {
+  outline-color: var(--px-neutral-10);
+  outline-offset: var(--px-bit);
+}
+.px-tag.px-tag__info .px-tag-icon:hover {
+  fill: var(--px-neutral-6);
+}
+.px-tag.px-tag__info .px-tag-icon:active {
+  fill: var(--px-neutral-7);
+}
+.px-tag.px-tag__info.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-neutral-1);
+}
+.px-tag.px-tag__info.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-neutral-1);
+}
+.px-tag.px-tag__info.px-tag__plain {
+  --text-color: var(--px-neutral-9);
+}
+.px-tag.px-tag__info.px-tag__plain .px-tag-icon:hover {
+  fill: var(--px-neutral-8);
+}
+.px-tag.px-tag__info.px-tag__plain .px-tag-icon:active {
+  fill: var(--px-neutral-7);
+}
+.px-tag.px-tag__info.px-tag__plain.px-tag__disabled {
+  --text-color: var(--px-neutral-7);
+}
+.px-tag.px-tag__info.px-tag__plain.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-tag.px-tag__info.px-tag__plain.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-neutral-7);
+}
+.px-tag.px-tag__info.px-tag__outline {
+  --text-color: var(--px-neutral-10);
+}
+.px-tag.px-tag__info.px-tag__outline .px-tag-icon:hover {
+  fill: var(--px-neutral-9);
+}
+.px-tag.px-tag__info.px-tag__outline .px-tag-icon:active {
+  fill: var(--px-neutral-8);
+}
+.px-tag.px-tag__info.px-tag__outline.px-tag__disabled {
+  --text-color: var(--px-neutral-7);
+}
+.px-tag.px-tag__info.px-tag__outline.px-tag__disabled .px-tag-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-tag.px-tag__info.px-tag__outline.px-tag__disabled .px-tag-icon:active {
+  fill: var(--px-neutral-7);
+}

package/es/tag/index.d.ts

@@ -0,0 +1,23 @@
+import type { TagProps } from './type';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{
+    onClose?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    shape: "default" | "round";
+    size: "medium" | "large" | "small";
+    disabled: boolean;
+    variant: "primary" | "plain" | "outline";
+    theme: "primary" | "sakura" | "success" | "warning" | "danger" | "info";
+}, {}, {}, {}, 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/tag/index.js

@@ -0,0 +1,193 @@
+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"
+};
+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 */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/tag/type.d.ts

@@ -0,0 +1,58 @@
+import type { NumberOrPercentage } from '../share/type';
+export type TagProps = {
+    /**
+     * @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;
+    /**
+     * @property {'primary' | 'plain' | 'outline'} [variant='primary']
+     * @version 0.0.2
+     */
+    variant?: 'primary' | 'plain' | 'outline';
+    /**
+     * @property {'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'} [theme='primary']
+     * @version 0.0.2
+     */
+    theme?: 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info';
+    /**
+     * @property {string} [color]
+     * @version 0.0.2
+     */
+    color?: string;
+    /**
+     * @property {boolean} [closable]
+     * @version 0.0.2
+     */
+    closable?: boolean;
+};
+export type TagEvents = {
+    /**
+     * @event close
+     * @version 0.0.2
+     * @param {MouseEvent} e
+     */
+    close: [e: MouseEvent];
+};
+export type TagSlots = {
+    /**
+     * @slot default
+     * @version 0.0.2
+     */
+    default: {};
+};

package/es/textarea/css.js

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

package/es/textarea/draw.d.ts

@@ -0,0 +1,2 @@
+import type { RgbaColor } from '../share/type';
+export declare const draw: (ctx: CanvasRenderingContext2D, width: number, height: number, borderColor: RgbaColor, backgroundColor: RgbaColor, pixelSize: number) => void;

package/es/textarea/draw.js

@@ -0,0 +1,13 @@
+import { r 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
+};