@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibPopup/LibPopup.vue.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLAttributes } from "vue";
+import { type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js.js";
+import type { IPopupReference, PopupPositioner } from "../../types/index.js.js";
+type RealProps = LinkableByIdProps & PopupProps;
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    modelValue?: boolean;
+}, {
+    recompute: (force?: boolean) => void;
+    setReference: (el: IPopupReference | null) => void;
+    setBackground: (el: IPopupReference | null) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    modelValue?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    canClose: boolean;
+    useDialogForBackdrop: false;
+    useBackdrop: boolean;
+    preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | PopupPositioner;
+    preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | PopupPositioner;
+    avoidRepositioning: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    button?: (props: {
+        extractEl: (_: any) => any;
+    }) => any;
+} & {
+    popup?: (props: {
+        position: any;
+        extractEl: (_: any) => any;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -3,6 +3,7 @@
 	<div v-if="!hide"
 		:id="id ?? fallbackId"
 		:class="twMerge(`
+			progress-bar
 			w-[200px]
 			whitespace-nowrap
 			overflow-x-scroll
@@ -34,20 +35,20 @@
 			before:transition-all
 			before:z-1
 			before:duration-500
-		`,psuedoHide && `
+		`, psuedoHide && `
 			after:opacity-0
 			before:opacity-0
-		`, ($attrs as any).class)"
+		`, $attrs.class)"
 		:data-value="progress"
 		:title="label"
 		role="progressbar"
 		:aria-valuenow="clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)"
 		:aria-valuemin="clamp[0] ?? 0"
 		:aria-valuemax="clamp[1] ?? 100"
-		v-bind="{...$attrs, class:undefined}"
+		v-bind="{ ...$attrs, class: void 0 }"
 		:style="`--progress: ${clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
 	>
-		<div class="label-wrapper relative flex-1">
+		<div class="procgress-bar--label-wrapper relative flex-1">
 			<span class="before:content-vertical-holder"/>
 			<Transition>
 				<slot>
@@ -71,6 +72,7 @@
 					<label
 						v-if="!psuedoHide"
 						class="
+							progress-bar--label
 							contrast-label
 							pointer-events-none
 							absolute
@@ -91,102 +93,80 @@
 	</div>
 </Transition>
 </template>
-<script setup  lang="ts">
-import { type HTMLAttributes,type PropType, ref, watch } from "vue"
-
-import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults,getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
-// TODO move to utils
-const clampVal = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max)
 
+<script setup>
+import { ref, watch } from "vue";
+import { twMerge } from "../../utils/twMerge.js";
+import { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
+const clampVal = (n, min, max) => Math.min(Math.max(n, min), max);
 defineOptions({
-	name: "lib-progress-bar",
-	inheritAttrs: false,
-})
-const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
-const props = withDefaults(defineProps<Props>(), {
-	autohideOnComplete: -1,
-	keepSpaceWhenHidden: false,
-	clamp: () => [0, 100],
-	...baseInteractivePropsDefaults
-})
-const hide = ref<boolean>(false)
-const psuedoHide = ref<boolean>(false)
-let timeout: number
-let type: number
+  name: "lib-progress-bar",
+  inheritAttrs: false
+});
+const fallbackId = getFallbackId();
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  id: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false },
+  label: { type: String, required: false },
+  progress: { type: Number, required: true },
+  autohideOnComplete: { type: Number, required: false },
+  keepSpaceWhenHidden: { type: Boolean, required: false },
+  clamp: { type: Array, required: false }
+}, {
+  autohideOnComplete: -1,
+  keepSpaceWhenHidden: false,
+  clamp: () => [0, 100],
+  ...baseInteractivePropsDefaults
+}));
+const hide = ref(false);
+const psuedoHide = ref(false);
+let timeout;
+let type;
 if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
-	if (props.keepSpaceWhenHidden) {
-		hide.value = false
-		psuedoHide.value = true
-	} else {
-		hide.value = true
-		psuedoHide.value = false
-	}
+  if (props.keepSpaceWhenHidden) {
+    hide.value = false;
+    psuedoHide.value = true;
+  } else {
+    hide.value = true;
+    psuedoHide.value = false;
+  }
 }
-
 watch([
-	() => props.progress,
-	() => props.keepSpaceWhenHidden,
-	() => props.autohideOnComplete,
+  () => props.progress,
+  () => props.keepSpaceWhenHidden,
+  () => props.autohideOnComplete
 ], () => {
-	if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
-		if (props.keepSpaceWhenHidden) {
-			if (type === 1) return
-			clearTimeout(timeout)
-			type = 1
-			timeout = setTimeout(() => {
-				type = 0
-				hide.value = false
-				psuedoHide.value = true
-			}, props.autohideOnComplete) as any
-		} else {
-			if (type === 2) return
-			clearTimeout(timeout)
-			type = 2
-			timeout = setTimeout(() => {
-				type = 0
-				hide.value = true
-				psuedoHide.value = false
-			}, props.autohideOnComplete) as any
-		}
-	} else {
-		clearTimeout(timeout)
-		hide.value = false
-		psuedoHide.value = false
-	}
-}, { immediate: false })
-
+  if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
+    if (props.keepSpaceWhenHidden) {
+      if (type === 1) return;
+      clearTimeout(timeout);
+      type = 1;
+      timeout = setTimeout(() => {
+        type = 0;
+        hide.value = false;
+        psuedoHide.value = true;
+      }, props.autohideOnComplete);
+    } else {
+      if (type === 2) return;
+      clearTimeout(timeout);
+      type = 2;
+      timeout = setTimeout(() => {
+        type = 0;
+        hide.value = true;
+        psuedoHide.value = false;
+      }, props.autohideOnComplete);
+    }
+  } else {
+    clearTimeout(timeout);
+    hide.value = false;
+    psuedoHide.value = false;
+  }
+}, { immediate: false });
 </script>
-<script lang="ts">
-
-type RealProps =
-& LinkableByIdProps
-& BaseInteractiveProps
-& LabelProps
-& {
-	progress: number
-	/** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
-	autohideOnComplete?: number
-	/**
-		* Do not actually hide the element, just leave an unstyled div,
-		* so the whole layout doesn't change on completion when autohideOnComplete is set.
-		*/
-	keepSpaceWhenHidden?: boolean
-	/**
-		* By default the progress bar is visually clamped to 0-100, even if the value might be something else.
-		* You can change what it's clamped to here, to for example,
-		* show at least a small sliver of the progress bar when it's still 0.
-		*/
-	clamp?: [start:number, end:number]
-}
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
-	RealProps
-{ }
+<script>
 
 </script>

package/dist/runtime/components/LibProgressBar/LibProgressBar.vue.d.ts

@@ -0,0 +1,41 @@
+import { type HTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+    progress: number;
+    /** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
+    autohideOnComplete?: number;
+    /**
+        * Do not actually hide the element, just leave an unstyled div,
+        * so the whole layout doesn't change on completion when autohideOnComplete is set.
+        */
+    keepSpaceWhenHidden?: boolean;
+    /**
+        * By default the progress bar is visually clamped to 0-100, even if the value might be something else.
+        * You can change what it's clamped to here, to for example,
+        * show at least a small sliver of the progress bar when it's still 0.
+        */
+    clamp?: [start: number, end: number];
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+    autohideOnComplete: number;
+    keepSpaceWhenHidden: boolean;
+    clamp: [start: number, end: number];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};