@witchcraft/ui 0.0.1 → 0.1.1

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

@@ -1,109 +0,0 @@
-import { reactive, ref } from "vue";
-import LibNotifications from "./LibNotifications.vue";
-import { NotificationHandler } from "../../helpers/NotificationHandler.js";
-import * as components from "../index.js";
-const meta = {
-  component: LibNotifications,
-  title: "Components/Notifications",
-  args: {
-    // @ts-expect-error story only arg
-    withTitle: true
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup() {
-      const handler = reactive(new NotificationHandler());
-      let count = 0;
-      const withTitle = ref(args.withTitle);
-      const disableTimeout = ref(false);
-      const notifyRequiresAction = () => {
-        count++;
-        void handler.notify({
-          title: withTitle.value ? `Notification(${count})` : void 0,
-          message: `This is a notification that requires action. Pick an option:`,
-          requiresAction: true,
-          options: ["Ok", "Default Answer", "Cancel"],
-          default: "Default Answer"
-        });
-      };
-      const notifyWithDangerousOption = () => {
-        count++;
-        void handler.notify({
-          title: withTitle.value ? `Notification(${count})` : void 0,
-          message: `This is a notification that has a dangerous option. Pick an option:`,
-          options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
-          default: "Default Answer",
-          dangerous: ["Dangerous Option"]
-        });
-      };
-      const notifyNonCancellable = () => {
-        count++;
-        void handler.notify({
-          title: withTitle.value ? `Notification(${count})` : void 0,
-          message: `This is a non-cancellable notification. Pick an option:`,
-          options: ["Ok", "Default Answer"],
-          default: "Default Answer",
-          cancellable: false
-        });
-      };
-      const notifyNonCancellableRequiresAction = () => {
-        count++;
-        void handler.notify({
-          title: withTitle.value ? `Notification(${count})` : void 0,
-          message: `This is a non-cancellable notification. Pick an option:`,
-          requiresAction: true,
-          options: ["Ok", "Default Answer"],
-          default: "Default Answer",
-          cancellable: false
-        });
-      };
-      const notifyTimeoutable = () => {
-        count++;
-        void handler.notify({
-          title: withTitle.value ? `Notification(${count})` : void 0,
-          message: `This is a notification. No action required.`,
-          timeout: disableTimeout.value ? false : 2e3
-        });
-      };
-      return {
-        notifyRequiresAction,
-        notifyTimeoutable,
-        notifyNonCancellable,
-        notifyWithDangerousOption,
-        notifyNonCancellableRequiresAction,
-        handler,
-        withTitle,
-        disableTimeout,
-        args: {
-          outline: false,
-          ...args
-        }
-      };
-    },
-    backgrounds: { disable: true },
-    // <lib-debug>{{args.handler}}</lib-debug>
-    template: `
-	<test-wrapper :outline="args.outline">
-		<lib-button :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></lib-button>
-		<lib-button :label="'Notify RequiresAction'" @click="notifyRequiresAction()"></lib-button>
-		<lib-button :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></lib-button>
-		<lib-button :label="'Notify With Dangerous Option'" @click="notifyWithDangerousOption()"></lib-button>
-		<lib-button :label="'Notify Non-Cancellable'" @click="notifyNonCancellable()"></lib-button>
-		<input type="checkbox" v-model="withTitle"/> With Title
-		<input type="checkbox" v-model="disableTimeout"/> Disable Timeout
-			<lib-notifications :handler="handler" />
-		History:
-		<lib-debug>
-			<template v-for="entry in handler.history">
-				Message: {{entry.message}}
-				Resolution: {{entry.resolution}}
-				<br>
-			</template>
-		</lib-debug>
-	</test-wrapper>
-	`
-  })
-};

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

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

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

@@ -1,40 +0,0 @@
-import { ref } from "vue";
-import LibPagination from "./LibPagination.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibPagination,
-  title: "Components/Pagination",
-  args: {
-    total: 10
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup() {
-      const num = ref(1);
-      const changePage = ($event, i) => {
-        $event.preventDefault();
-        if (i >= 10) num.value = 10;
-        if (i <= 1) num.value = 1;
-        num.value = i;
-      };
-      return {
-        changePage,
-        args,
-        num
-      };
-    },
-    template: `
-			<lib-pagination v-bind="{...args, current: num, route:'#'}">
-				<template #link="linkProps">
-					<a v-bind="linkProps" @click="changePage($event, linkProps.i)">{{ linkProps.text ?? linkProps.i }}</a>
-				</template>
-			</lib-pagination>
-			<lib-input :label="'Change Page'" :modelValue="num.toString()" @update:modelValue="num = parseInt($event)" type="number" min="0" :max="args.total">
-
-			</lib-input>
-		`
-  })
-};

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

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

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

@@ -1,20 +0,0 @@
-import LibPalette from "./LibPalette.vue";
-import { theme } from "../../theme.js";
-import * as components from "../index.js";
-const meta = {
-  component: LibPalette,
-  title: "Components/Palette",
-  args: {
-    // theme,
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components: { ...components, LibPalette },
-    setup: () => ({ args: { ...args, theme } }),
-    template: `
-			<LibPalette v-bind="{...args}">{{args.value}}</LibPalette>
-		`
-  })
-};

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

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import LibPopup from "./LibPopup.vue.js";
-declare const meta: Meta<typeof LibPopup>;
-export default meta;
-type Story = StoryObj<typeof LibPopup>;
-export declare const Primary: Story;
-export declare const PopupNoShift: any;
-/** When the popup is too wide, it's positioned to the left and overflow scroll is set with an invisible scrollbar. */
-export declare const PopupTooBig: any;
-export declare const PopupCenterScreen: any;
-export declare const PopupRightBottomMost: any;
-export declare const PopupLeftTopMost: any;
-export declare const PopupCenterMost: any;
-export declare const LeftMenuShapeExample: any;

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

@@ -1,147 +0,0 @@
-import { computed, ref, watch } from "vue";
-import LibPopup from "./LibPopup.vue";
-import { vExtractRootEl } from "../../directives/vExtractRootEl.js";
-import * as components from "../index.js";
-const meta = {
-  component: LibPopup,
-  title: "Components/Popup",
-  args: {}
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    directives: { extractRootEl: vExtractRootEl },
-    setup: () => {
-      const value = ref(false);
-      const buttonPositions = ["TL", "TC", "TR", "BL", "BC", "BR"];
-      const buttonPos = ref("TL");
-      const autoRotatePos = ref(true);
-      const buttonStyle = computed(() => {
-        switch (buttonPos.value) {
-          case "TL":
-            return `align-self: flex-start; justify-self: flex-start;`;
-          case "TC":
-            return `align-self: flex-start; justify-self: center;`;
-          case "TR":
-            return `align-self: flex-start; justify-self: flex-end;`;
-          case "BL":
-            return `align-self: flex-end; justify-self: flex-start;`;
-          case "BC":
-            return `align-self: flex-end; justify-self: center;`;
-          case "BR":
-            return `align-self: flex-end; justify-self: flex-end;`;
-          default:
-            return "";
-        }
-      });
-      watch(value, () => {
-        if (!value.value && autoRotatePos.value) {
-          const buttonI = buttonPositions.indexOf(buttonPos.value);
-          if (buttonI < 5) {
-            buttonPos.value = buttonPositions[buttonI + 1];
-          } else {
-            buttonPos.value = buttonPositions[0];
-          }
-        }
-      });
-      return {
-        args,
-        buttonPos,
-        autoRotatePos,
-        buttonStyle,
-        value
-      };
-    },
-    template: `
-			<lib-input
-				:suggestions="['TL', 'TR', 'BL', 'BR']"
-				:restrict-to-suggestions="true"
-				:suggestions-filter="(_, items) => items"
-				:label="'Button Position'"
-				v-model="buttonPos"
-			>
-			</lib-input>
-			<div>
-				<label>Auto Rotate Position</label>
-				<input type="checkbox" v-model="autoRotatePos">
-			</div>
-			<div class="test bg-transparency-squares" style="display:grid;height:80vh;padding:50px;border:1px solid black;">
-
-			<lib-popup v-model="value" v-bind="{ ...args, width:undefined, }" >
-			{{value}}
-				<template #button="{extractEl}">
-					<lib-button :style="buttonStyle" @click="value = !value" v-extract-root-el="extractEl">Toggle Popup</lib-button>
-				</template>
-				<template #popup="{position, extractEl}">
-						<lib-debug
-							v-extract-root-el="extractEl"
-							:style="(args.width ? \`width: \${args.width};\` : '') + (args.height ? \`height: \${args.height};\` : '')"
-							class="bg-bg dark:bg-fg w-[500px]"
-						>
-							{{ position }}
-						</lib-debug>
-				</template>
-			</lib-popup>
-			</div>
-			`
-  })
-};
-export const PopupNoShift = {
-  ...Primary,
-  args: {
-    avoidRepositioning: true
-  }
-};
-export const PopupTooBig = {
-  ...Primary,
-  args: {
-    width: "110vw"
-  }
-};
-export const PopupCenterScreen = {
-  ...Primary,
-  args: {
-    width: "500px",
-    height: "500px",
-    preferredHorizontal: ["center-screen"],
-    preferredVertical: ["center-screen"]
-  }
-};
-export const PopupRightBottomMost = {
-  ...Primary,
-  args: {
-    width: "500px",
-    height: "500px",
-    preferredHorizontal: ["right-most"],
-    preferredVertical: ["bottom-most"]
-  }
-};
-export const PopupLeftTopMost = {
-  ...Primary,
-  args: {
-    width: "500px",
-    height: "500px",
-    preferredHorizontal: ["left-most"],
-    preferredVertical: ["top-most"]
-  }
-};
-export const PopupCenterMost = {
-  ...Primary,
-  args: {
-    width: "500px",
-    height: "500px",
-    preferredHorizontal: ["center-most"],
-    preferredVertical: ["center-most"]
-  }
-};
-export const LeftMenuShapeExample = {
-  ...Primary,
-  args: {
-    width: "300px",
-    height: "500px",
-    preferredHorizontal: ["left-most"],
-    preferredVertical: ["center-most"],
-    avoidRepositioning: true
-  }
-};

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

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

@@ -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/SimpleInput",
-  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;