@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibDebug/LibDebug.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="lib-debug
+<div class="debug--wrapper
 		text-fg
 		dark:text-bg
 		flex
@@ -11,81 +11,63 @@
 		overflow-auto
 	"
 >
-	<div class="flex justify-between">
-		<span class="font-bold">{{ title }}</span>
-		<LibButton class="w-min-content" @click="copy()">
+	<div class="debug--header flex justify-between">
+		<span class="debug--title font-bold">{{ title }}</span>
+		<LibButton class="debug--copy-button w-min-content" @click="copy()">
 			<icon><i-fa6-regular-copy/></icon>
 		</LibButton>
 	</div>
 	<pre v-if="value"
-		:class="`
+		:class="
+  `
+			debug--value
 			[tab-size:${tab}]
 		`
-		"
+"
 	>{{ getStringValue(value) }}</pre>
-	<pre v-if="value === undefined"><slot/></pre>
+	<pre v-if="value === void 0"><slot/></pre>
 </div>
 </template>
 
-
-<script setup lang="ts">
-import { type PropType, useSlots } from "vue"
-
-import Icon from "../Icon/Icon.vue"
-import LibButton from "../LibButton/LibButton.vue"
-
-const $slots = useSlots()
-
-const props = withDefaults(defineProps<{
-	/** The value to debug, can be anything. */
-	// eslint-disable-next-line vue/no-restricted-props
-	value?: any
-	/** Sets the tab size in css. Defaults to 3. */
-	tab?: number
-	title?: string
-}>(), {
-	tab: 3,
-	title: "Debug",
-	value: undefined,
-})
-
-const getStringValue = (value: any): string => value === undefined
-	? "undefined"
-	: typeof value === "string"
-		? value
-		: JSON.stringify(value, null, "\t")
-
-const findText = (children: any[]): string => {
-	let res = ""
-	for (const child of children) {
-		if (child.children) {
-			if (typeof child.children === "string") res += child.children as string
-			else res += findText(child.children)
-		} else {
-			res += "\n"
-		}
-	}
-	return res
-}
-const copy = (): void => {
-	if (navigator.clipboard) {
-		const text = props.value ? getStringValue(props.value) : findText([...$slots.default!()![0].children as any[]])
-		navigator.clipboard.writeText(text).catch(() => { })
-	}
-}
+<script setup>
+import { useSlots } from "vue";
+import Icon from "../Icon/Icon.vue";
+import LibButton from "../LibButton/LibButton.vue";
+const $slots = useSlots();
+const props = defineProps({
+  value: { type: null, required: false, default: void 0 },
+  tab: { type: Number, required: false, default: 3 },
+  title: { type: String, required: false, default: "Debug" }
+});
+const getStringValue = (value) => value === void 0 ? "undefined" : typeof value === "string" ? value : JSON.stringify(value, null, "	");
+const findText = (children) => {
+  let res = "";
+  for (const child of children) {
+    if (child.children) {
+      if (typeof child.children === "string") res += child.children;
+      else res += findText(child.children);
+    } else {
+      res += "\n";
+    }
+  }
+  return res;
+};
+const copy = () => {
+  if (navigator.clipboard) {
+    const text = props.value ? getStringValue(props.value) : $slots.default?.()?.[0]?.children ? findText([...$slots.default()[0].children]) : void 0;
+    if (text === void 0) {
+      console.warn("Cannot copy text, can't generate string value from `getStringValue` or `the default slot`.");
+      return;
+    }
+    navigator.clipboard.writeText(text).catch(() => {
+    });
+  }
+};
 </script>
 
-<script lang="ts">
-
-/**
- * Simple debug component for displaying objects and strings with whitespace.
- *
- * In the case of objects, it JSON.stringifies them with a tab character. The tab width can be controlled with the `tab` prop, which will set the `tab-size` css property on the element.
- *
- * The value can be undefined, it will just display undefined.
- */
+<script>
 export default {
-	name: "lib-debug",
-	// https://v3.vuejs.org/guide/typescript-support.html#annotating-props
-}
+  name: "lib-debug"
+  // https://v3.vuejs.org/guide/typescript-support.html#annotating-props
+};
 </script>

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

@@ -0,0 +1,32 @@
+/**
+ * Simple debug component for displaying objects and strings with whitespace.
+ *
+ * In the case of objects, it JSON.stringifies them with a tab character. The tab width can be controlled with the `tab` prop, which will set the `tab-size` css property on the element.
+ *
+ * The value can be undefined, it will just display undefined.
+ */
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The value to debug, can be anything. */
+    value?: any;
+    /** Sets the tab size in css. Defaults to 3. */
+    tab?: number;
+    title?: string;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The value to debug, can be anything. */
+    value?: any;
+    /** Sets the tab size in css. Defaults to 3. */
+    tab?: number;
+    title?: string;
+}> & Readonly<{}>, {
+    value: any;
+    title: string;
+    tab: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibDevOnly/LibDevOnly.vue

@@ -1,10 +1,10 @@
 <template>
 <DevOnly>
-	<slot v-if="doShow && $attrs?.['as-child'] !== undefined"/>
+	<slot v-if="doShow && $attrs?.['as-child'] !== void 0"/>
 	<div v-else-if="doShow"
-
-
-		:class="twMerge(`
+		:class="twMerge(
+  `
+			dev-only
 			border
 			border-dashed
 			border-red-500
@@ -12,42 +12,27 @@
 			py-1
 			never-packaged
 		`,
-			($attrs.class as string)
-		)"
-		v-bind="{...$attrs, class: undefined}"
+  $attrs.class
+)"
+		v-bind="{ ...$attrs, class: void 0 }"
 	>
 		<slot/>
 	</div>
 </DevOnly>
 </template>
-<script lang="ts" setup>
-import { computed, inject, ref, useAttrs } from "vue"
-
-import { showDevOnlyInjectionKey } from "../../composables/useShowDevOnlyKey.js"
-import { twMerge } from "../../utils/twMerge.js"
-const $attrs = useAttrs()
-
-const props = withDefaults(defineProps<{
-	show?: boolean
-}>(), {
-	show: false
-})
-
-const injectedShow = inject(showDevOnlyInjectionKey, ref(false))
-const doShow = computed(() => props.show || injectedShow.value)
 
+<script setup>
+import { computed, inject, ref, useAttrs } from "vue";
+import { showDevOnlyInjectionKey } from "../../composables/useShowDevOnlyKey.js";
+import { twMerge } from "../../utils/twMerge.js";
+const $attrs = useAttrs();
+const props = defineProps({
+  show: { type: Boolean, required: false, default: false }
+});
+const injectedShow = inject(showDevOnlyInjectionKey, ref(false));
+const doShow = computed(() => props.show || injectedShow.value);
 </script>
-<script lang="ts">
-interface Props {
-	show?: boolean
-	asChild?: boolean
-}
 
-// Not sure why nuxt's types aren't correctly getting detected
-// This should be enough to bypass the type lint error.
-declare module "vue" {
-	export interface GlobalComponents {
-		DevOnly: any
-	}
-}
+<script>
+
 </script>

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

@@ -0,0 +1,22 @@
+declare module "vue" {
+    interface GlobalComponents {
+        DevOnly: any;
+    }
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    show?: boolean;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    show?: boolean;
+}> & Readonly<{}>, {
+    show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};