pxd 0.0.64 → 0.1.2

package/dist/components/loading-bar/index.vue

@@ -1,187 +1,194 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { UPDATE_LOADING_BAR_EVENT_NAME } from "../../composables/use-loading-bar";
-import { cachedOff, cachedOn } from "../../utils/event";
-import { caf, raf } from "../../utils/event";
-import { clampValue, isTruthyProp } from "../../utils/format";
-import { isServer } from "../../utils/is";
+import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { UPDATE_LOADING_BAR_EVENT_NAME } from "../../composables/use-loading-bar.js";
+import { cachedOff, cachedOn } from "../../utils/event.js";
+import { caf, raf } from "../../utils/event.js";
+import { clampValue, isTruthyProp } from "../../utils/format.js";
+import { isServer } from "../../utils/is.js";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
-  name: "PLoadingBar",
-  inheritAttrs: false
+	name: "PLoadingBar",
+	inheritAttrs: false
 });
 const props = defineProps({
-  to: { type: [String, Object], required: false },
-  group: { type: String, required: false, default: "default" },
-  minimum: { type: Number, required: false, default: 0.08 },
-  trickle: { type: Boolean, required: false, default: true },
-  hideDelay: { type: Number, required: false, default: 500 },
-  trickleThreshold: { type: Number, required: false, default: 300 }
+	to: {
+		type: [String, Object],
+		required: false
+	},
+	group: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	minimum: {
+		type: Number,
+		required: false,
+		default: .08
+	},
+	trickle: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	hideDelay: {
+		type: Number,
+		required: false,
+		default: 500
+	},
+	trickleThreshold: {
+		type: Number,
+		required: false,
+		default: 300
+	}
 });
-const loadingBarVariant = tv({
-  slots: {
-    wrapper: "pxd-loading-bar top-0 left-0 right-0 pointer-events-none z-10 max-w-full overflow-hidden",
-    inner: "pxd-loading-bar--inner h-0.5 data-[hidden=true]:h-0 origin-left data-[transition=false]:transition-none! motion-safe:transition-appearance"
-  },
-  variants: {
-    status: {
-      running: {
-        inner: "bg-gray-500"
-      },
-      finish: {
-        inner: "bg-primary"
-      },
-      error: {
-        inner: "bg-red-900"
-      }
-    },
-    absolute: {
-      true: {
-        wrapper: "absolute"
-      },
-      false: {
-        wrapper: "fixed"
-      }
-    }
-  },
-  defaultVariants: {
-    status: "finish",
-    absolute: false
-  }
+const status = shallowRef("finish");
+const hiddenBar = shallowRef(false);
+const progressValue = shallowRef(0);
+const enableTransition = shallowRef(false);
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-loading-bar top-0 left-0 right-0 pointer-events-none z-10 max-w-full overflow-hidden",
+	variants: { locally: {
+		true: "absolute",
+		false: "fixed"
+	} }
+}, { selection: () => ({ locally: isTruthyProp(props.to) }) });
+const { classes: innerClasses } = useTailwindVariant({
+	base: "pxd-loading-bar--inner h-0.5 data-[hidden=true]:h-0 origin-left data-[transition=false]:transition-none! motion-safe:transition-appearance motion-safe:will-change-transform",
+	variants: { status: {
+		running: "bg-gray-500",
+		finish: "bg-primary",
+		error: "bg-red-900"
+	} }
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({ status: status.value })
 });
 let prevTimestamp = 0;
 let prevAnimationKey = 0;
 let hiddenBarTimeout;
 let enableTransitionTimeout;
 const ENABLE_TRANSITION_DELAY = 0;
-const status = shallowRef("finish");
-const hiddenBar = shallowRef(false);
-const progressValue = shallowRef(0);
-const enableTransition = shallowRef(false);
-const computedClasses = computed(() => {
-  return loadingBarVariant({
-    status: status.value,
-    absolute: isTruthyProp(props.to)
-  });
-});
 function getIncreaseDelta(n) {
-  if (n >= 0 && n < 0.2) {
-    return 0.1;
-  } else if (n >= 0.2 && n < 0.5) {
-    return 0.04;
-  } else if (n >= 0.5 && n < 0.8) {
-    return 0.02;
-  } else if (n >= 0.8 && n < 0.98) {
-    return 5e-3;
-  } else {
-    return 0;
-  }
+	if (n >= 0 && n < .2) {
+		return .1;
+	} else if (n >= .2 && n < .5) {
+		return .04;
+	} else if (n >= .5 && n < .8) {
+		return .02;
+	} else if (n >= .8 && n < .98) {
+		return .005;
+	} else {
+		return 0;
+	}
 }
 function increaseProgress(n) {
-  if (progressValue.value >= 1) {
-    caf(prevAnimationKey);
-    return;
-  }
-  const now = performance.now();
-  const delta = now - prevTimestamp;
-  const threshold = props.trickleThreshold || 200;
-  if (delta < threshold && props.trickle) {
-    prevAnimationKey = raf(increaseProgress);
-    return;
-  }
-  prevTimestamp = now;
-  const amount = n || getIncreaseDelta(progressValue.value);
-  progressValue.value = clampValue(progressValue.value + amount, 0, 0.994);
-  if (amount === 0 || !props.trickle) {
-    return;
-  }
-  prevAnimationKey = raf(increaseProgress);
+	if (progressValue.value >= 1) {
+		caf(prevAnimationKey);
+		return;
+	}
+	const now = performance.now();
+	const delta = now - prevTimestamp;
+	const threshold = props.trickleThreshold || 200;
+	if (delta < threshold && props.trickle) {
+		prevAnimationKey = raf(increaseProgress);
+		return;
+	}
+	prevTimestamp = now;
+	const amount = n || getIncreaseDelta(progressValue.value);
+	progressValue.value = clampValue(progressValue.value + amount, 0, .994);
+	if (amount === 0 || !props.trickle) {
+		return;
+	}
+	prevAnimationKey = raf(increaseProgress);
 }
 async function hideAndResetProgress() {
-  hiddenBarTimeout = setTimeout(() => {
-    hiddenBar.value = true;
-  }, props.hideDelay);
+	hiddenBarTimeout = setTimeout(() => {
+		hiddenBar.value = true;
+	}, props.hideDelay);
 }
 function handleStartProgress() {
-  if (status.value === "running") {
-    return;
-  }
-  enableTransition.value = false;
-  hiddenBar.value = false;
-  status.value = "running";
-  progressValue.value = props.minimum;
-  clearTimeout(hiddenBarTimeout);
-  clearTimeout(enableTransitionTimeout);
-  enableTransitionTimeout = setTimeout(() => {
-    enableTransition.value = true;
-  }, ENABLE_TRANSITION_DELAY);
-  if (!props.trickle) {
-    return;
-  }
-  prevTimestamp = 0;
-  raf(() => increaseProgress());
+	if (status.value === "running") {
+		return;
+	}
+	enableTransition.value = false;
+	hiddenBar.value = false;
+	status.value = "running";
+	progressValue.value = props.minimum;
+	clearTimeout(hiddenBarTimeout);
+	clearTimeout(enableTransitionTimeout);
+	enableTransitionTimeout = setTimeout(() => {
+		enableTransition.value = true;
+	}, ENABLE_TRANSITION_DELAY);
+	if (!props.trickle) {
+		return;
+	}
+	prevTimestamp = 0;
+	raf(() => increaseProgress());
 }
 async function handleErrorProgress() {
-  if (status.value !== "running") {
-    return;
-  }
-  caf(prevAnimationKey);
-  status.value = "error";
-  hiddenBar.value = false;
-  progressValue.value = 1;
-  hideAndResetProgress();
+	if (status.value !== "running") {
+		return;
+	}
+	caf(prevAnimationKey);
+	status.value = "error";
+	hiddenBar.value = false;
+	progressValue.value = 1;
+	hideAndResetProgress();
 }
 function handleFinishProgress() {
-  if (status.value !== "running") {
-    return;
-  }
-  caf(prevAnimationKey);
-  status.value = "finish";
-  hiddenBar.value = false;
-  progressValue.value = 1;
-  hideAndResetProgress();
+	if (status.value !== "running") {
+		return;
+	}
+	caf(prevAnimationKey);
+	status.value = "finish";
+	hiddenBar.value = false;
+	progressValue.value = 1;
+	hideAndResetProgress();
 }
 function handleIncreaseProgress(value) {
-  increaseProgress(value);
+	increaseProgress(value);
 }
 function onUpdateLoadingBar({ detail }) {
-  if (detail.group !== props.group) {
-    return;
-  }
-  switch (detail.type) {
-    case "start":
-      handleStartProgress();
-      break;
-    case "error":
-      handleErrorProgress();
-      break;
-    case "finish":
-      handleFinishProgress();
-      break;
-    case "increase":
-      handleIncreaseProgress(detail.value);
-      break;
-  }
+	if (detail.group !== props.group) {
+		return;
+	}
+	switch (detail.type) {
+		case "start":
+			handleStartProgress();
+			break;
+		case "error":
+			handleErrorProgress();
+			break;
+		case "finish":
+			handleFinishProgress();
+			break;
+		case "increase":
+			handleIncreaseProgress(detail.value);
+			break;
+	}
 }
 onMounted(() => {
-  if (isServer()) {
-    return;
-  }
-  cachedOn(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
+	if (isServer()) {
+		return;
+	}
+	cachedOn(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
 });
 onBeforeUnmount(() => {
-  cachedOff(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
+	caf(prevAnimationKey);
+	clearTimeout(hiddenBarTimeout);
+	clearTimeout(enableTransitionTimeout);
+	cachedOff(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
 });
 </script>
 
 <template>
   <PTeleport :to="to">
-    <div aria-hidden="true" :class="computedClasses.wrapper()" v-bind="$attrs">
+    <div data-loading-bar aria-hidden="true" :class="classes" v-bind="attrs">
       <div
         :data-hidden="hiddenBar"
         :data-transition="enableTransition"
-        :class="computedClasses.inner()"
+        :class="innerClasses"
         :style="{ transform: `scaleX(${progressValue})` }"
       />
     </div>

package/dist/components/loading-dots/index.d.vue.ts

@@ -1,15 +1,3 @@
-declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_1) => any;
-} & {
-    suffix?: (props: typeof __VLS_3) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/loading-dots/index.vue

@@ -1,34 +1,32 @@
 <script setup>
 defineOptions({
-  name: "PLoadingDots",
-  inheritAttrs: false
+	name: "PLoadingDots",
+	inheritAttrs: false
 });
 </script>
 
 <template>
-  <span class="pxd-loading-dots inline-flex items-center" v-bind="$attrs">
-    <div v-if="$slots.prefix" class="pxd-loading-dots--text mr-3">
-      <slot name="prefix" />
-    </div>
-
+  <span
+    data-loading-dots
+    aria-hidden="true"
+    aria-label="Loading"
+    class="pxd-loading-dots inline-flex items-center text-foreground-secondary"
+    v-bind="$attrs"
+  >
     <span
-      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 default-animation-timing-function! motion-safe:animate-[fade-loading_1.4s_infinite] motion-reduce:opacity-20"
+      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-current opacity-20 default-animation-timing-function! motion-reduce:animate-none!"
     />
     <span
-      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 default-animation-timing-function! motion-safe:animate-[fade-loading_1.4s_infinite] motion-reduce:opacity-50"
+      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-current opacity-50 default-animation-timing-function! motion-reduce:animate-none!"
       style="animation-delay: 0.2s"
     />
     <span
-      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 default-animation-timing-function! motion-safe:animate-[fade-loading_1.4s_infinite] motion-reduce:opacity-80"
+      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-current opacity-80 default-animation-timing-function! motion-reduce:animate-none!"
       style="animation-delay: 0.4s"
     />
-
-    <div v-if="$slots.suffix" class="pxd-loading-dots--text ml-3">
-      <slot name="suffix" />
-    </div>
   </span>
 </template>
 
 <style>
-@keyframes fade-loading{0%,to{opacity:.2}20%{opacity:.8}}
+.pxd-loading--dot{animation:pxd-animation-fade-loading 1.4s infinite}@keyframes pxd-animation-fade-loading{0%,to{opacity:.2}20%{opacity:.9}}
 </style>

package/dist/components/marching-ants/index.d.vue.ts

@@ -0,0 +1,25 @@
+import type { MarchingAntsProps } from './types';
+declare function select(): void;
+declare function deselect(): void;
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MarchingAntsProps, {
+    select: typeof select;
+    deselect: typeof deselect;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarchingAntsProps> & Readonly<{}>, {
+    color: string;
+    as: import("../../types/shared/props.js").ComponentAs;
+    gap: string | number;
+    lineSize: string | number;
+    dashSize: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};