@witchcraft/ui 0.1.1 → 0.1.3

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibProgressBar from "./LibProgressBar.vue.js";
+declare const meta: Meta<typeof LibProgressBar>;
+export default meta;
+type Story = StoryObj<typeof LibProgressBar>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const ReallyLongLabel: Story;
+export declare const Static: Story;
+export declare const AutoHiding: Story;

package/dist/runtime/components/LibProgressBar/LibProgressBar.stories.js

@@ -0,0 +1,81 @@
+import { onUnmounted, ref } from "vue";
+import LibProgressBar from "./LibProgressBar.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibProgressBar,
+  title: "Components/ProgressBar",
+  args: {
+    label: "Label",
+    // @ts-expect-error .
+    _timeout: 1e3,
+    _add: 10,
+    _start: 50
+  }
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      const progress = ref(args._start);
+      if (args.progress) {
+        progress.value = args.progress;
+      } else {
+        const interval = setInterval(() => {
+          if (progress.value >= 100) {
+            progress.value = 0;
+          } else {
+            progress.value += args._add;
+          }
+        }, args._timeout);
+        onUnmounted(() => {
+          clearInterval(interval);
+        });
+      }
+      return {
+        args: { ...args },
+        progress
+      };
+    },
+    template: `
+			<lib-progress-bar class="flex-1" v-bind="args" :progress="progress"></lib-progress-bar>
+			<br/>
+			Stretched in flexbox:
+			<div class="flex w-full">
+				<lib-progress-bar class="flex-1" v-bind="args" :progress="progress"></lib-progress-bar>
+			</div>
+		`
+  })
+};
+export const Secondary = {
+  ...Primary,
+  args: {
+    ...Primary.args
+  }
+};
+export const ReallyLongLabel = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    label: "Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect"
+  }
+};
+export const Static = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    progress: 50
+  }
+};
+export const AutoHiding = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    autohideOnComplete: 500,
+    clamp: [10, 100],
+    _start: 0,
+    // keepSpaceWhenHidden: true,
+    _timeout: 1e3,
+    _add: 10
+  }
+};

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

@@ -35,17 +35,17 @@
 			before:transition-all
 			before:z-1
 			before:duration-500
-		`, psuedoHide && `
+		`,psuedoHide && `
 			after:opacity-0
 			before:opacity-0
-		`, $attrs.class)"
+		`, ($attrs as any).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: void 0 }"
+		v-bind="{...$attrs, class:undefined}"
 		:style="`--progress: ${clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
 	>
 		<div class="procgress-bar--label-wrapper relative flex-1">
@@ -93,80 +93,101 @@
 	</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();
-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;
+	name: "lib-progress-bar",
+	inheritAttrs: false,
+})
+const fallbackId = getFallbackId()
+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
 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);
-    } 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 });
+	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 })
+
 </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]
+}
 
-<script>
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	RealProps
+{ }
 
 </script>

package/dist/runtime/components/LibRecorder/LibRecorder.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import * as components from "../index.js.js";
+/**
+ * This is a special input component designed to record any type of event.
+ *
+ * It requires additional setup to actually work since what and how anything is recorded is up to the needs of the application.
+ *
+ * This basic implementation just lists the keys. Enter accepts the recording, escape cancels back to the initial value.
+ */
+declare const meta: Meta<typeof components.LibRecorder>;
+export default meta;
+type Story = StoryObj<typeof components.LibRecorder>;
+export declare const Primary: Story;
+/** Should not be tabbable or recordable. */
+export declare const Disabled: Story;
+/** *Should* be tabbable but not recordable. */
+export declare const Readonly: Story;
+/** Height should not shrink. */
+export declare const EmptyInitialValue: Story;

package/dist/runtime/components/LibRecorder/LibRecorder.stories.js

@@ -0,0 +1,63 @@
+import { ref, watchEffect } from "vue";
+import { createRecorderHandler, createRecorderWatchEffect } from "../../helpers/storybook.js";
+import * as components from "../index.js";
+const meta = {
+  component: components.LibRecorder,
+  title: "Components/Recorder",
+  args: {
+    label: "Some Label",
+    recordingTitle: "Recording. Press enter or click away to accept. Press escape to cancel.",
+    modelValue: "K E Y S"
+  }
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      const recording = ref(false);
+      const recordingValue = ref("");
+      const modelValue = ref(args.modelValue);
+      const recorderEl = ref(null);
+      const recorder = createRecorderHandler(recordingValue, recording, modelValue, recorderEl);
+      watchEffect(createRecorderWatchEffect(recordingValue, recording, modelValue));
+      return {
+        args,
+        modelValue,
+        recorder,
+        recording,
+        recordingValue,
+        recorderEl
+      };
+    },
+    template: `
+			<lib-recorder
+				v-bind="args"
+				v-extract-root-el="_ => recorderEl = _"
+				:recordingValue="recordingValue"
+				:recorder="recorder"
+				v-model:recording="recording"
+				v-model="modelValue"
+				@recorder:click="recording = !recording"
+			/>
+		`
+  })
+};
+export const Disabled = {
+  ...Primary,
+  args: {
+    disabled: true
+  }
+};
+export const Readonly = {
+  ...Primary,
+  args: {
+    readonly: true
+  }
+};
+export const EmptyInitialValue = {
+  ...Primary,
+  args: {
+    modelValue: ""
+  }
+};