v-uixy 1.9.0 → 1.9.2

package/templates/components/PieChart/PieChart.types.ts

@@ -1,10 +1,16 @@
 export type UixyPieChartData = {
   label: string;
   value: number;
-  color: string;
+  color?: string;
 };
 
 export interface UixyPieChartProps {
   data: UixyPieChartData[];
+  resolution?: number;
   thickness?: number;
+  total?: string;
+  legend?: boolean;
+  animate?: boolean;
+  interactive?: boolean;
+  format?: (value: number) => string;
 }

package/templates/components/Sheet/Sheet.component.vue

@@ -11,7 +11,7 @@
             :style="{ zIndex }"
             data-uixy-overlay
             @click.self="handleClick"
-            class="fixed left-0 top-0 size-full bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
+            class="fixed left-0 top-0 size-full bg-white/5 [html[data-uixy-gpu=on]_&]:backdrop-blur-[2px] dark:bg-gray-900/5"
           />
           <motion.div
             initial="initial"
@@ -37,7 +37,7 @@
 <script setup lang="ts">
   import { AnimatePresence, motion } from "motion-v";
   import { useScale } from "../Scale";
-  import { useOverlayLayer } from "~/composables";
+  import { useOverlayLayer, useGpuAcceleration } from "~/composables";
   import type { UixySheetProps } from "./Sheet.types";
   import { sheetStyles } from "./Sheet.styles";
 
@@ -72,6 +72,8 @@
 
   const { zIndex, acquire, release } = useOverlayLayer();
 
+  useGpuAcceleration();
+
   const open = defineModel<boolean>();
 
   const handleClick = () => {

package/templates/components/index.ts

@@ -2,11 +2,17 @@ export * from "./Accordion";
 export * from "./Alert";
 export * from "./Avatar";
 export * from "./Badge";
+export * from "./Breadcrumb";
 export * from "./Button";
 export * from "./Calendar";
 export * from "./Card";
+export * from "./Chart";
 export * from "./Checkbox";
+export * from "./ColorPicker";
 export * from "./Command";
+export * from "./DatePicker";
+export * from "./DateRangePicker";
+export * from "./FileUpload";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./Input";
@@ -18,12 +24,14 @@ export * from "./PieChart";
 export * from "./Popover";
 export * from "./Radio";
 export * from "./Scale";
+export * from "./SegmentedControl";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Sheet";
 export * from "./Skeleton";
 export * from "./Slider";
 export * from "./Switch";
+export * from "./Table";
 export * from "./TableOfContents";
 export * from "./Tabs";
 export * from "./Textarea";
@@ -32,4 +40,3 @@ export * from "./TimePicker";
 export * from "./Toast";
 export * from "./Toggle";
 export * from "./Tooltip";
-export * from "./ColorPicker";

package/templates/components.json

@@ -130,12 +130,12 @@
       "name": "Modal",
       "related-components": [],
       "packages": ["motion-v"],
-      "composables": ["useOverlayLayer"]
+      "composables": ["useOverlayLayer", "useGpuAcceleration"]
     },
     {
       "name": "PieChart",
       "related-components": [],
-      "packages": ["motion-v"],
+      "packages": [],
       "composables": []
     },
     {
@@ -178,7 +178,7 @@
       "name": "Sheet",
       "related-components": ["Scale"],
       "packages": ["motion-v"],
-      "composables": ["useOverlayLayer"]
+      "composables": ["useOverlayLayer", "useGpuAcceleration"]
     },
     {
       "name": "Skeleton",
@@ -213,7 +213,7 @@
     {
       "name": "Tabs",
       "related-components": [],
-      "packages": ["motion-v"],
+      "packages": ["motion-v", "uuid"],
       "composables": []
     },
     {

package/templates/composables/useGpuAcceleration.ts

@@ -0,0 +1,79 @@
+import { onMounted } from "vue";
+
+const GPU_ATTRIBUTE = "data-uixy-gpu";
+const IDLE_TIMEOUT_MS = 2000;
+const FALLBACK_DELAY_MS = 200;
+
+const SOFTWARE_RENDERER_PATTERN =
+  /swiftshader|llvmpipe|softpipe|software|basic render/i;
+
+let cachedResult: boolean | null = null;
+let isDetectionScheduled = false;
+
+const createWebGlContext = (): WebGLRenderingContext | null => {
+  const canvas = document.createElement("canvas");
+  const options = { failIfMajorPerformanceCaveat: true };
+
+  return (canvas.getContext("webgl2", options) ??
+    canvas.getContext("webgl", options)) as WebGLRenderingContext | null;
+};
+
+const getRendererName = (gl: WebGLRenderingContext): string => {
+  const info = gl.getExtension("WEBGL_debug_renderer_info");
+
+  return info ? String(gl.getParameter(info.UNMASKED_RENDERER_WEBGL)) : "";
+};
+
+const checkGpuAcceleration = (): boolean => {
+  try {
+    const gl = createWebGlContext();
+
+    if (!gl) return false;
+
+    const isHardwareRenderer = !SOFTWARE_RENDERER_PATTERN.test(
+      getRendererName(gl),
+    );
+
+    gl.getExtension("WEBGL_lose_context")?.loseContext();
+
+    return isHardwareRenderer;
+  } catch {
+    return false;
+  }
+};
+
+export const detectGpuAcceleration = (): boolean => {
+  if (typeof document === "undefined") return false;
+
+  cachedResult ??= checkGpuAcceleration();
+
+  return cachedResult;
+};
+
+const applyGpuAttribute = () => {
+  const value = detectGpuAcceleration() ? "on" : "off";
+
+  document.documentElement.setAttribute(GPU_ATTRIBUTE, value);
+};
+
+const runWhenIdle = (callback: () => void) => {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(callback, { timeout: IDLE_TIMEOUT_MS });
+    return;
+  }
+
+  setTimeout(callback, FALLBACK_DELAY_MS);
+};
+
+export function useGpuAcceleration() {
+  onMounted(() => {
+    if (
+      isDetectionScheduled ||
+      document.documentElement.hasAttribute(GPU_ATTRIBUTE)
+    )
+      return;
+
+    isDetectionScheduled = true;
+    runWhenIdle(applyGpuAttribute);
+  });
+}

package/templates/composables/useOverlayLayer.ts

@@ -47,6 +47,7 @@ export function useOverlayLayer(): UseOverlayLayerReturn {
 const MANAGED_ATTR = "data-uixy-inert-managed";
 const OVERLAY_ATTR = "data-uixy-overlay";
 export const MODAL_ATTR = "data-uixy-modal";
+export const MODAL_ID_ATTR = "data-uixy-modal-id";
 
 const modalStack = ref<number[]>([]);
 
@@ -60,7 +61,11 @@ export const getTopModalEl = (): HTMLElement | null => {
   if (typeof document === "undefined") return null;
   const els = Array.from(
     document.querySelectorAll<HTMLElement>(`[${MODAL_ATTR}]`),
-  );
+  ).filter((el) => {
+    const raw = el.getAttribute(MODAL_ID_ATTR);
+    if (raw === null) return true;
+    return modalStack.value.includes(Number(raw));
+  });
   if (els.length === 0) return null;
   return els.reduce((a, b) => (zOf(b) >= zOf(a) ? b : a));
 };
@@ -92,6 +97,7 @@ function reconcileInert() {
 }
 
 export interface UseModalLayerReturn {
+  id: number;
   zIndex: ComputedRef<number>;
   isTopModal: ComputedRef<boolean>;
   open: () => void;
@@ -115,10 +121,11 @@ export function useModalLayer(): UseModalLayerReturn {
   const close = () => {
     layer.release();
     modalStack.value = modalStack.value.filter((x) => x !== layer.id);
+    reconcileInert();
     nextTick(reconcileInert);
   };
 
   onScopeDispose(close);
 
-  return { zIndex: layer.zIndex, isTopModal, open, close };
+  return { id: layer.id, zIndex: layer.zIndex, isTopModal, open, close };
 }