sakana-element 2.2.0 → 2.3.0

package/dist/es/theme/Tooltip.css

@@ -0,0 +1,235 @@
+/* Tooltip Variables */
+.px-tooltip[data-v-d982dfd2] {
+  --px-tooltip-bg-color: var(--px-bg-color);
+  --px-tooltip-font-size: var(--px-font-size-base);
+  --px-tooltip-border-color: var(--px-border-color-dark);
+  --px-tooltip-padding: 10px 14px;
+  --px-tooltip-shadow-color: var(--px-shadow-color);
+  display: inline-block;
+}
+/* Base Tooltip Styles - Pixel Game Style */
+/* No smooth transitions for pixel feel */
+.px-tooltip .fade-enter-active[data-v-d982dfd2],
+  .px-tooltip .fade-leave-active[data-v-d982dfd2] {
+    transition: none;
+}
+.px-tooltip .fade-enter-from[data-v-d982dfd2],
+  .px-tooltip .fade-leave-to[data-v-d982dfd2] {
+    opacity: 0;
+}
+/* Popper container - Pixel style box */
+.px-tooltip .px-tooltip__popper[data-v-d982dfd2] {
+    background: transparent;
+    padding: var(--px-tooltip-padding);
+    color: var(--px-text-color-primary);
+    line-height: 1.5;
+    font-size: var(--px-tooltip-font-size);
+    font-family: var(--px-font-family);
+    word-break: break-all;
+    box-sizing: border-box;
+    z-index: 1000;
+    position: relative;
+
+    /* Remove traditional border */
+    border: none;
+
+    /* Pixel shadow via drop-shadow (respects clip-path shape) */
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-tooltip-shadow-color)
+    );
+}
+/* Border layer — filled with border color, clipped to pixel shape */
+.px-tooltip .px-tooltip__popper[data-v-d982dfd2]::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: var(--px-tooltip-border-color);
+      clip-path: polygon(
+        0 4px,
+        2px 4px,
+        2px 2px,
+        4px 2px,
+        4px 0,
+        calc(100% - 4px) 0,
+        calc(100% - 4px) 2px,
+        calc(100% - 2px) 2px,
+        calc(100% - 2px) 4px,
+        100% 4px,
+        100% calc(100% - 4px),
+        calc(100% - 2px) calc(100% - 4px),
+        calc(100% - 2px) calc(100% - 2px),
+        calc(100% - 4px) calc(100% - 2px),
+        calc(100% - 4px) 100%,
+        4px 100%,
+        4px calc(100% - 2px),
+        2px calc(100% - 2px),
+        2px calc(100% - 4px),
+        0 calc(100% - 4px)
+      );
+      z-index: -1;
+}
+/* Fill layer — inset by border width, filled with bg color, beveled */
+.px-tooltip .px-tooltip__popper[data-v-d982dfd2]::after {
+      content: "";
+      position: absolute;
+      inset: 2px;
+      background: var(--px-tooltip-bg-color);
+      clip-path: polygon(
+        0 4px,
+        2px 4px,
+        2px 2px,
+        4px 2px,
+        4px 0,
+        calc(100% - 4px) 0,
+        calc(100% - 4px) 2px,
+        calc(100% - 2px) 2px,
+        calc(100% - 2px) 4px,
+        100% 4px,
+        100% calc(100% - 4px),
+        calc(100% - 2px) calc(100% - 4px),
+        calc(100% - 2px) calc(100% - 2px),
+        calc(100% - 4px) calc(100% - 2px),
+        calc(100% - 4px) 100%,
+        4px 100%,
+        4px calc(100% - 2px),
+        2px calc(100% - 2px),
+        2px calc(100% - 4px),
+        0 calc(100% - 4px)
+      );
+      box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.08);
+      z-index: -1;
+}
+/* Pixel arrow — base */
+.px-tooltip .px-tooltip__popper .px-tooltip__arrow[data-v-d982dfd2] {
+      position: absolute;
+      background: var(--px-tooltip-border-color);
+      z-index: 1;
+}
+/* Top placement → arrow points down at bottom edge */
+.px-tooltip .px-tooltip__popper[data-popper-placement^='top'] .px-tooltip__arrow[data-v-d982dfd2] {
+      bottom: -6px;
+      width: 10px;
+      height: 6px;
+      clip-path: polygon(
+        0 0, 10px 0,
+        10px 2px, 8px 2px,
+        8px 4px, 6px 4px,
+        6px 6px, 4px 6px,
+        4px 4px, 2px 4px,
+        2px 2px, 0 2px
+      );
+}
+/* Bottom placement → arrow points up at top edge */
+.px-tooltip .px-tooltip__popper[data-popper-placement^='bottom'] .px-tooltip__arrow[data-v-d982dfd2] {
+      top: -6px;
+      width: 10px;
+      height: 6px;
+      clip-path: polygon(
+        4px 0, 6px 0,
+        6px 2px, 8px 2px,
+        8px 4px, 10px 4px,
+        10px 6px, 0 6px,
+        0 4px, 2px 4px,
+        2px 2px, 4px 2px
+      );
+}
+/* Left placement → arrow points right at right edge */
+.px-tooltip .px-tooltip__popper[data-popper-placement^='left'] .px-tooltip__arrow[data-v-d982dfd2] {
+      right: -6px;
+      width: 6px;
+      height: 10px;
+      clip-path: polygon(
+        0 0, 2px 0,
+        2px 2px, 4px 2px,
+        4px 4px, 6px 4px,
+        6px 6px, 4px 6px,
+        4px 8px, 2px 8px,
+        2px 10px, 0 10px
+      );
+}
+/* Right placement → arrow points left at left edge */
+.px-tooltip .px-tooltip__popper[data-popper-placement^='right'] .px-tooltip__arrow[data-v-d982dfd2] {
+      left: -6px;
+      width: 6px;
+      height: 10px;
+      clip-path: polygon(
+        6px 0, 6px 10px,
+        4px 10px, 4px 8px,
+        2px 8px, 2px 6px,
+        0 6px, 0 4px,
+        2px 4px, 2px 2px,
+        4px 2px, 4px 0
+      );
+}
+/* Dark tooltip variant */
+.px-tooltip--dark .px-tooltip__popper[data-v-d982dfd2] {
+    --px-tooltip-bg-color: var(--px-text-color-primary);
+    --px-tooltip-border-color: var(--px-text-color-primary);
+    --px-tooltip-shadow-color: rgba(0, 0, 0, 0.4);
+    color: var(--px-bg-color);
+}
+.px-tooltip--dark .px-tooltip__popper[data-v-d982dfd2]::after {
+      box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.15), inset -2px -2px 0 rgba(0, 0, 0, 0.2);
+}
+/* Light tooltip variant */
+.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+    --px-tooltip-bg-color: var(--px-bg-color);
+    --px-tooltip-border-color: var(--px-border-color);
+    color: var(--px-text-color-primary);
+}
+/* Type variants — themed colors */
+.px-tooltip--primary .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-primary);
+      --px-tooltip-border-color: var(--px-color-primary-dark);
+      --px-tooltip-shadow-color: var(--px-color-primary-dark);
+      color: #fff;
+}
+.px-tooltip--primary.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-primary-light-9);
+      --px-tooltip-border-color: var(--px-color-primary);
+      color: var(--px-color-primary);
+}
+.px-tooltip--success .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-success);
+      --px-tooltip-border-color: var(--px-color-success-dark);
+      --px-tooltip-shadow-color: var(--px-color-success-dark);
+      color: #fff;
+}
+.px-tooltip--success.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-success-light-9);
+      --px-tooltip-border-color: var(--px-color-success);
+      color: var(--px-color-success);
+}
+.px-tooltip--info .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-info);
+      --px-tooltip-border-color: var(--px-color-info-dark);
+      --px-tooltip-shadow-color: var(--px-color-info-dark);
+      color: #fff;
+}
+.px-tooltip--info.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-info-light-9);
+      --px-tooltip-border-color: var(--px-color-info);
+      color: var(--px-color-info);
+}
+.px-tooltip--warning .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-warning);
+      --px-tooltip-border-color: var(--px-color-warning-dark);
+      --px-tooltip-shadow-color: var(--px-color-warning-dark);
+      color: #fff;
+}
+.px-tooltip--warning.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-warning-light-9);
+      --px-tooltip-border-color: var(--px-color-warning);
+      color: var(--px-color-warning);
+}
+.px-tooltip--danger .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-danger);
+      --px-tooltip-border-color: var(--px-color-danger-dark);
+      --px-tooltip-shadow-color: var(--px-color-danger-dark);
+      color: #fff;
+}
+.px-tooltip--danger.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-danger-light-9);
+      --px-tooltip-border-color: var(--px-color-danger);
+      color: var(--px-color-danger);
+}

package/dist/es/utils-BS5vsvlM.js

@@ -0,0 +1,101 @@
+import { h as e, d as o, y as r } from "./vendor-DXmGx29U.js";
+import { defineComponent as n } from "vue";
+function t(e2, o2) {
+  const r2 = parseInt(e2.replace("#", ""), 16);
+  return `#${(Math.max(0, (r2 >> 16) - Math.round(2.55 * o2)) << 16 | Math.max(0, (r2 >> 8 & 255) - Math.round(2.55 * o2)) << 8 | Math.max(0, (255 & r2) - Math.round(2.55 * o2))).toString(16).padStart(6, "0")}`;
+}
+function c(e2, o2) {
+  const r2 = parseInt(e2.replace("#", ""), 16);
+  return `#${(Math.min(255, (r2 >> 16) + Math.round(2.55 * o2)) << 16 | Math.min(255, (r2 >> 8 & 255) + Math.round(2.55 * o2)) << 8 | Math.min(255, (255 & r2) + Math.round(2.55 * o2))).toString(16).padStart(6, "0")}`;
+}
+function s(e2) {
+  const o2 = parseInt(e2.replace("#", ""), 16);
+  return (0.299 * (o2 >> 16) + 0.587 * (o2 >> 8 & 255) + 0.114 * (255 & o2)) / 255 > 0.6 ? "#1e1e2e" : "#ffffff";
+}
+function a(e2) {
+  return { color: e2, dark: t(e2, 15), light: c(e2, 35), contrast: s(e2), transparent: "transparent" };
+}
+function i(e2, o2, r2) {
+  const n2 = {};
+  for (const [t2, c2] of Object.entries(r2)) n2[`--${o2}-${t2}`] = e2[c2];
+  return n2;
+}
+const l = { outline: { "text-color": "color", "bg-color": "transparent", "border-color": "color", "shadow-color": "transparent" }, dash: { "text-color": "color", "bg-color": "light", "border-color": "color", "shadow-color": "transparent" }, default: { "text-color": "contrast", "bg-color": "color", "border-color": "dark", "shadow-color": "dark" } };
+function f(e2, o2) {
+}
+const u = { spinner: "loader", loading: "loader", "eye-slash": "eye-closed", "eye-off": "eye-closed", xmark: "close", x: "close", times: "close", "circle-xmark": "close-box", "x-circle": "close-box", "times-circle": "close-box", error: "close-box", "circle-info": "info-box", "info-circle": "info-box", info: "info-box", "check-circle": "check", "circle-check": "check", success: "check", "circle-exclamation": "warning-box", "exclamation-circle": "warning-box", warning: "warning-box", "angle-down": "chevron-down", "caret-down": "chevron-down", "angle-up": "chevron-up", "caret-up": "chevron-up", "angle-left": "chevron-left", "caret-left": "chevron-left", "angle-right": "chevron-right", "caret-right": "chevron-right", "question-circle": "info-box", "circle-question": "info-box", help: "info-box", question: "info-box", gear: "sliders", cog: "sliders", settings: "sliders", star: "bookmark", "star-solid": "bookmark" };
+function d(e2) {
+  return e2 in u ? u[e2] : e2;
+}
+const h = /* @__PURE__ */ new Set(["svg", "path", "rect", "circle", "ellipse", "line", "polyline", "polygon", "g", "defs", "clipPath", "mask", "title", "desc", "linearGradient", "radialGradient", "stop", "symbol", "use"]), p = /^on/i, m = /^\s*javascript\s*:/i;
+function g(e2) {
+  if (!e2 || "string" != typeof e2) return "";
+  if ("undefined" == typeof DOMParser) return "";
+  const o2 = new DOMParser().parseFromString(e2, "image/svg+xml");
+  return o2.querySelector("parsererror") ? "" : (b(o2.documentElement), o2.documentElement.outerHTML);
+}
+function b(e2) {
+  const o2 = Array.from(e2.children);
+  for (const e3 of o2) {
+    const o3 = e3.tagName.toLowerCase();
+    if (h.has(o3)) {
+      for (const o4 of Array.from(e3.attributes)) (p.test(o4.name) || "href" === o4.name && m.test(o4.value) || "xlink:href" === o4.name && m.test(o4.value)) && e3.removeAttribute(o4.name);
+      b(e3);
+    } else e3.remove();
+  }
+}
+const x = /* @__PURE__ */ new Map();
+function v(e2) {
+  for (const [o2, r2] of Object.entries(e2)) x.set(o2, g(r2));
+}
+function w(e2) {
+  return x.get(e2);
+}
+const k = (e2) => (e2.install = (o2) => {
+  const r2 = e2.name;
+  o2.component(r2, e2);
+}, e2), y = (e2, o2) => (e2.install = (r2) => {
+  r2.config.globalProperties[o2] = e2;
+}, e2);
+function M(e2, o2) {
+  for (; e2.length >= o2; ) e2[0].props.onDestroy();
+}
+function N(e2) {
+  let o2 = false, r2 = 0;
+  const n2 = (o3) => {
+    var _a;
+    "Escape" === o3.code && ((_a = e2()) == null ? void 0 : _a.handler.close());
+  };
+  return { register() {
+    r2++, o2 || (document.addEventListener("keydown", n2), o2 = true);
+  }, unregister() {
+    r2--, r2 <= 0 && (document.removeEventListener("keydown", n2), o2 = false, r2 = 0);
+  } };
+}
+function S(r2, n2 = "px") {
+  return r2 ? e(r2) || ((e2) => !!o(e2) && !Number.isNaN(Number(e2)))(r2) ? `${r2}${n2}` : o(r2) ? r2 : void 0 : "";
+}
+const O = /* @__PURE__ */ new Map([["info", "info-box"], ["success", "check"], ["warning", "warning-box"], ["danger", "close-box"], ["error", "close-box"]]), $ = n({ props: { vNode: { type: [String, Object, Function], required: true } }, setup: (e2) => () => r(e2.vNode) ? e2.vNode() : e2.vNode }), j = (e2, o2) => {
+  const r2 = e2.__vccOpts || e2;
+  for (const [e3, n2] of o2) r2[e3] = n2;
+  return r2;
+};
+export {
+  $ as R,
+  l as S,
+  j as _,
+  d as a,
+  v as b,
+  a as c,
+  f as d,
+  S as e,
+  M as f,
+  w as g,
+  N as h,
+  y as i,
+  c as l,
+  i as r,
+  g as s,
+  O as t,
+  k as w
+};