@witchcraft/ui 0.1.0 → 0.1.1

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

@@ -1,81 +0,0 @@
-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/LibRecorder/LibRecorder.stories.d.ts

@@ -1,19 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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: ""
-  }
-};

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

@@ -1,26 +0,0 @@
-import type { StoryObj } from "@storybook/vue3";
-import * as components from "../index.js.js";
-declare const meta: {
-    component: any;
-    title: string;
-    args: {
-        modelValue: string;
-        placeholder: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof components.LibSimpleInput>;
-/** Input */
-export declare const Primary: Story;
-/** Has more reasonable min-width inside a flexbox. */
-export declare const InsideAFlexbox: Story;
-export declare const Disabled: any;
-export declare const Readonly: any;
-export declare const Invalid: any;
-/**
- * Intended for being wrapped.
- * Should not have any border or focus outline styles.
- */
-export declare const Borderless: any;
-export declare const Numerical: any;
-export declare const NumericalInsideAFlexbox: any;

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

@@ -1,78 +0,0 @@
-import * as components from "../index.js";
-const meta = {
-  component: components.LibSimpleInput,
-  title: "Components/Input",
-  args: {
-    modelValue: "Value",
-    placeholder: "Placeholder"
-  }
-};
-export default meta;
-export const Primary = {
-  args: {
-    modelValue: "some value"
-  },
-  render: (args) => ({
-    components,
-    // eslint-disable-next-line no-console
-    setup: () => ({ args, test: () => console.log("Enter") }),
-    template: `
-				<lib-simple-input
-				@keydown="test"
-				class="m-2" v-bind="args" v-model="args.modelValue" ></lib-simple-input>
-				<lib-simple-input class="m-2" v-bind="{...args, modelValue:''}" ></lib-simple-input>
-				`
-  })
-};
-export const InsideAFlexbox = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-				Inside a flexbox:
-				<div class="flex flex-wrap">
-					<lib-simple-input v-bind="args" v-model="args.modelValue"></lib-simple-input>
-					<div class="border-1 border-danger-500 flex-1 whitespace-nowrap">Flex Grow: 1</div>
-				</div>
-		`
-  }),
-  args: {
-    stretch: true
-  }
-};
-export const Disabled = {
-  ...Primary,
-  args: {
-    disabled: true
-  }
-};
-export const Readonly = {
-  ...Primary,
-  args: {
-    readonly: true
-  }
-};
-export const Invalid = {
-  ...Primary,
-  args: {
-    valid: false
-  }
-};
-export const Borderless = {
-  ...Primary,
-  args: {
-    border: false
-  }
-};
-export const Numerical = {
-  ...Primary,
-  args: {
-    type: "number"
-  }
-};
-export const NumericalInsideAFlexbox = {
-  ...InsideAFlexbox,
-  args: {
-    type: "number"
-  }
-};

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

@@ -1,27 +0,0 @@
-import type { StoryObj } from "@storybook/vue3";
-import LibSuggestions from "./LibSuggestions.vue.js";
-declare const meta: {
-    component: any;
-    title: string;
-    args: {
-        id: string;
-        modelValue: string;
-        label: string;
-        border: boolean;
-        suggestions: string[];
-    };
-};
-export default meta;
-type Story = StoryObj<typeof LibSuggestions>;
-/**
- * The suggestions component is just the dropdown part.
- *
- * Here it is decoupled from the input.
- *
- * More examples can be found in the input component.
- */
-export declare const Primary: Story;
-export declare const RestrictToSuggestions: Story;
-export declare const AlwaysShowAllSuggestions: any;
-export declare const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions: any;
-export declare const CustomSuggestionsObject: any;

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

@@ -1,112 +0,0 @@
-import { computed, onMounted, ref } from "vue";
-import LibSuggestions from "./LibSuggestions.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibSuggestions,
-  title: "Components/Suggestions",
-  args: {
-    id: "some-id",
-    modelValue: "",
-    label: "Some Label",
-    border: true,
-    suggestions: ["A", "AB", "ABC", "B", "BC", "C", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components: { ...components, LibSuggestions },
-    setup: () => {
-      const inputValue = ref(args.modelValue);
-      const modelValue = ref(args.modelValue);
-      const drawer = ref(null);
-      const keydownHandler = (e) => {
-        drawer.value?.inputKeydownHandler(e);
-      };
-      const suggestions = computed(() => drawer.value?.suggestions);
-      const blurHandler = (e) => {
-        drawer.value?.inputBlurHandler(e);
-      };
-      onMounted(() => {
-        drawer.value?.suggestions.open();
-      });
-      return {
-        args,
-        inputValue,
-        modelValue,
-        isOpen: ref(false),
-        suggestions,
-        drawer,
-        keydownHandler,
-        blurHandler
-      };
-    },
-    template: `
-			<div class="flex flex-col gap-3">
-			Temporary Value: {{inputValue}}
-			<br/>
-			Model Value (Final Value): <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
-
-			
-<br/>
-			Selected: {{suggestions?.filtered[suggestions.active]}}
-			<label>Some Label</label>
-				<lib-simple-input
-					:class="isOpen ? 'open' : ''"
-					v-model="inputValue"
-					@focus="suggestions.open()"
-					@blur="blurHandler"
-					@keydown="keydownHandler"
-				></lib-simple-input>
-				<lib-suggestions
-					ref="drawer"
-					v-bind="{...args}"
-					@update:isOpen="isOpen = $event"
-					v-model="modelValue"
-					v-model:inputValue="inputValue"
-				>
-					<template #item={item}>
-						{{item}}
-					</template>
-				</lib-suggestions>
-			</div>
-		`
-  })
-};
-export const RestrictToSuggestions = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    restrictToSuggestions: true
-  }
-};
-export const AlwaysShowAllSuggestions = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    restrictToSuggestions: true,
-    suggestionsFilter: (_input, items) => items
-  }
-};
-export const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    restrictToSuggestions: false,
-    suggestionsFilter: (_input, items) => items
-  }
-};
-export const CustomSuggestionsObject = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    restrictToSuggestions: true,
-    suggestions: [
-      { label: "A", other: "some data A" },
-      { label: "AB", other: "some data AB" },
-      { label: "ABC", other: "some data ABC" },
-      { label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" }
-    ],
-    suggestionLabel: (item) => item.label
-  }
-};

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

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import LibTable from "./LibTable.vue.js";
-declare const meta: Meta<typeof LibTable>;
-export default meta;
-type Story = StoryObj<typeof LibTable>;
-export declare const Primary: Story;
-export declare const NoCellBorders: Story;
-export declare const NoBorders: Story;
-export declare const NoCellBordersNoBorders: Story;
-export declare const SquareBorders: Story;
-export declare const NoHeader: Story;
-export declare const NoHeaderNoBorders: Story;
-export declare const NoHeaderNoCellBorders: Story;
-export declare const FitWidthFalse: Story;
-export declare const ThreeColSomeColsNotResizable: Story;
-export declare const FourColSomeColsNotResizable: Story;

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

@@ -1,156 +0,0 @@
-import LibTable from "./LibTable.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibTable,
-  title: "Components/Table"
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-				<div class="overflow-x-scroll scrollbar-hidden">
-					<lib-table
-						v-bind="args"
-					>
-					</lib-table>
-				</div>
-		`
-  }),
-  args: {
-    cols: ["prop1", "prop2", "prop3"],
-    values: [
-      { prop1: "Item1 Prop 1", prop2: "Item1 Prop 2", prop3: "Item1 Prop 3" },
-      { prop1: "Item2 Prop 1", prop2: "Item2 Prop 2", prop3: "Item2 Prop 3" },
-      { prop1: "Item3 Prop 1", prop2: "Item3 Prop 2", prop3: "Item3 Prop 3" }
-    ],
-    colConfig: { prop1: { name: "Header 1" }, prop2: { name: "Header 2" } },
-    itemKey: "prop1"
-  }
-};
-export const NoCellBorders = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    cellBorder: false
-  }
-};
-export const NoBorders = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    border: false
-  }
-};
-export const NoCellBordersNoBorders = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    cellBorder: false,
-    border: false
-  }
-};
-export const SquareBorders = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    rounded: false
-  }
-};
-export const NoHeader = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    header: false
-  }
-};
-export const NoHeaderNoBorders = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    header: false,
-    border: false
-  }
-};
-export const NoHeaderNoCellBorders = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    header: false,
-    cellBorder: false
-  }
-};
-export const FitWidthFalse = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    resizable: {
-      fitWidth: false
-    }
-  }
-};
-export const ThreeColSomeColsNotResizable = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-			<lib-table
-				v-bind="args"
-			>
-			</lib-table>
-			<br>
-			<lib-table
-			v-bind="{...args, colConfig:args.colConfig2}"
-			>
-			</lib-table>
-			<br>
-			<lib-table
-				v-bind="{...args, colConfig:args.colConfig3}"
-			>
-			</lib-table>
-		`
-  }),
-  args: {
-    cols: ["prop1", "prop2", "prop3"],
-    itemKey: "prop1",
-    values: [
-      { prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3" }
-    ],
-    colConfig: { prop1: { name: "No Resize", resizable: false } },
-    colConfig2: { prop2: { name: "No Resize", resizable: false } },
-    colConfig3: { prop3: { name: "No Resize", resizable: false } }
-  }
-};
-export const FourColSomeColsNotResizable = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-				<lib-table
-					v-bind="args"
-				>
-				</lib-table>
-				<br>
-				<lib-table
-				v-bind="{...args, colConfig:args.colConfig2}"
-				>
-			</lib-table>
-			<br>
-				<lib-table
-					v-bind="{...args, colConfig:args.colConfig3}"
-				>
-				</lib-table>
-		`
-  }),
-  args: {
-    cols: ["prop1", "prop2", "prop3", "prop4"],
-    values: [
-      { prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3", prop4: "Prop 4" }
-    ],
-    itemKey: "prop1",
-    colConfig: { prop1: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
-    colConfig2: { prop2: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
-    colConfig3: { prop1: { name: "No Resize", resizable: false }, prop4: { name: "No Resize", resizable: false } }
-  }
-};

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

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-declare const meta: Meta<{}>;
-export default meta;
-type Story = StoryObj<{}>;
-export declare const Primary: Story;

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

@@ -1,19 +0,0 @@
-const meta = {
-  title: "Other/Reset",
-  args: {}
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    setup: () => ({ args }),
-    template: `
-			<h1>h1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h1>
-			<h2>h2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h2>
-			<h3>h3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h3>
-			<h4>h4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h4>
-			<h5>h5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h5>
-			<h6>h6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h6>
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</p>
-		`
-  })
-};

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

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-declare const meta: Meta<{}>;
-export default meta;
-type Story = StoryObj<{}>;
-export declare const Scrollbars: Story;
-export declare const TextareaResizer: Story;

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

@@ -1,44 +0,0 @@
-const meta = {
-  title: "Other/Scrolling",
-  args: {}
-};
-export default meta;
-export const Scrollbars = {
-  render: (args) => ({
-    setup: () => ({ args }),
-    template: `
-		<div 
-			class="
-				relative
-				flex
-				flex-col
-				max-h-[300px]
-				max-w-[300px]
-				border-2
-				border-neutral-500
-			"
-			
-		>
-			<div 
-				class="overflow-auto"
-			>
-				<div class="h-[1000px] w-[1000px]"/>
-			</div>
-		</div>
-		`
-  })
-};
-export const TextareaResizer = {
-  render: (args) => ({
-    setup: () => ({ args }),
-    template: `
-			<textarea class="
-				border-2
-				border-neutral-500
-				min-w-[200px]
-				min-h-[200px]
-				[resize:both]
-			" />
-		`
-  })
-};

package/dist/runtime/composables/useScrollNearContainerEdges.stories.d.ts

@@ -1,7 +0,0 @@
-import type { StoryObj } from "@storybook/vue3";
-declare const meta: {
-    title: string;
-};
-export default meta;
-type Story = StoryObj;
-export declare const Primary: Story;