@witchcraft/ui 0.0.1 → 0.1.1

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

@@ -1,339 +0,0 @@
-import { ref, watchEffect } from "vue";
-import LibInput from "./LibInput.vue";
-import IconFaChevronLeft from "~icons/fa6-solid/chevron-left";
-import IconFaChevronRight from "~icons/fa6-solid/chevron-right";
-import IconFaSolidKeyboard from "~icons/fa6-solid/keyboard";
-import IconFaSolidTags from "~icons/fa6-solid/tags";
-import { vExtractRootEl } from "../../directives/vExtractRootEl.js";
-import { createRecorderHandler, createRecorderWatchEffect } from "../../helpers/storybook.js";
-import Icon from "../Icon/Icon.vue";
-import * as components from "../index.js";
-import {
-  playBasicVModel,
-  playMultipleValues
-} from "../shared/storyHelpers/playInput.js";
-import {
-  playBasicClickSelect,
-  playBasicKeyboardSelect,
-  playBasicSelect
-} from "../shared/storyHelpers/playSuggestions.js";
-const meta = {
-  component: LibInput,
-  title: "Components/Input",
-  args: {
-    border: true,
-    label: "Some Label"
-  }
-};
-export default meta;
-const allComponents = {
-  ...components,
-  LibInput,
-  Icon,
-  IconFaChevronRight,
-  IconFaChevronLeft,
-  IconFaSolidKeyboard,
-  IconFaSolidTags
-};
-const playAutosuggestSelectLike = async (context) => {
-  await playBasicSelect(context);
-  await playBasicKeyboardSelect(context);
-  await playBasicClickSelect(context);
-};
-const setupModelValue = (args) => ({
-  modelValue: ref(args.modelValue ?? "")
-});
-const setupModelValues = (args) => ({
-  values: ref(args.values ?? void 0)
-});
-const Base = {
-  render: (args) => ({
-    components: allComponents,
-    setup: () => ({
-      ...setupModelValue(args),
-      ...setupModelValues(args),
-      args: {
-        ...args,
-        updateOnlyOnSubmit: args.suggestions !== void 0
-      }
-    }),
-    template: `
-			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
-
-			<lib-input
-				v-bind="args"
-				v-model:values="values"
-				v-model="modelValue"
-				@submit="modelValue = $event"
-			>
-			</lib-input>
-		`
-  })
-};
-export const Primary = {
-  ...Base,
-  play: playBasicVModel
-};
-export const Disabled = {
-  ...Base,
-  args: {
-    disabled: true
-  }
-};
-export const Readonly = {
-  ...Base,
-  args: {
-    readonly: true
-  }
-};
-export const Invalid = {
-  ...Base,
-  args: {
-    valid: false
-  }
-};
-export const AttrsPassword = {
-  ...Base,
-  args: {
-    type: "password"
-  }
-};
-export const AttrsDate = {
-  ...Base,
-  args: {
-    type: "date"
-  }
-};
-export const AttrsNumber = {
-  ...Base,
-  args: {
-    type: "number"
-  }
-};
-export const Borderless = {
-  ...Base,
-  args: {
-    border: false,
-    suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-  }
-};
-export const WithAutosuggest = {
-  ...Base,
-  args: {
-    suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-  },
-  play: playAutosuggestSelectLike
-};
-export const WithInstantAutosuggest = {
-  ...Base,
-  args: {
-    suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-  }
-};
-export const AutosuggestRestricted = {
-  ...WithAutosuggest,
-  args: {
-    ...WithAutosuggest.args,
-    restrictToSuggestions: true
-  },
-  play: playAutosuggestSelectLike
-};
-export const AutosuggestSelectLikeShowAllUnrestricted = {
-  ...WithAutosuggest,
-  args: {
-    ...WithAutosuggest.args,
-    restrictToSuggestions: false,
-    suggestionsFilter: (_input, items) => items
-  },
-  play: playAutosuggestSelectLike
-};
-export const AutosuggestObjectOptions = {
-  ...WithAutosuggest,
-  args: {
-    ...WithAutosuggest.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
-  },
-  play: playAutosuggestSelectLike
-};
-export const Slots = {
-  render: (args) => ({
-    components: allComponents,
-    setup: () => ({
-      ...setupModelValue(args),
-      ...setupModelValues(args),
-      args: {
-        ...args,
-        updateOnlyOnSubmit: args.suggestions !== void 0
-      }
-    }),
-    template: `
-			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
-
-
-			<lib-input
-				v-bind="args"
-				v-model="modelValue"
-				v-model:values="values"
-			>
-				<template #label>
-					Custom Label Slot
-				</template>
-				<template #left>
-					<lib-button  class="px-0" :border="false" :label="'none'">
-						<icon><icon-fa-chevron-left/></icon>
-					</lib-button>
-				</template>
-				<template #right>
-					<lib-button  class="px-0" :border="false"  :label="'none'">
-						<icon><icon-fa-chevron-right/></icon>
-					</lib-button>
-				</template>
-			</lib-input>
-		`
-  })
-};
-const MultipleValuesBase = {
-  render: (args) => ({
-    components: allComponents,
-    setup: () => ({
-      ...setupModelValue(args),
-      ...setupModelValues(args),
-      args
-    }),
-    template: `
-			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
-
-			<br/>
-			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>
-
-			<lib-input
-				v-bind="args"
-				v-model="modelValue"
-				v-model:values="values"
-			>
-				<template #left>
-					<lib-button class="px-0" :border="false">
-						<icon><icon-fa-solid-tags/></icon>
-					</lib-button>
-				</template>
-			</lib-input>
-		`
-  }),
-  args: {
-    values: ["A", "B", "C"]
-  }
-};
-export const WithMultipleValues = {
-  ...MultipleValuesBase,
-  play: playMultipleValues
-};
-export const WithMultipleValuesWithSuggestions = {
-  ...MultipleValuesBase,
-  args: {
-    ...MultipleValuesBase.args,
-    suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-  },
-  play: playAutosuggestSelectLike
-};
-export const WithMultipleValuesDisabled = {
-  ...MultipleValuesBase,
-  args: {
-    ...MultipleValuesBase.args,
-    disabled: true
-  }
-};
-export const WithMultipleValuesReadonly = {
-  ...MultipleValuesBase,
-  args: {
-    ...MultipleValuesBase.args,
-    readonly: true
-  }
-};
-export const InputSlotReplacement = {
-  render: (args) => ({
-    components: allComponents,
-    directives: { vExtractRootEl },
-    setup: () => {
-      const recording = ref(false);
-      const recordingValue = ref("");
-      const modelValue = ref("K E Y S");
-      const values = ref(args.values ?? []);
-      const recorderEl = ref(null);
-      const recorder = createRecorderHandler(recordingValue, recording, modelValue, recorderEl);
-      watchEffect(createRecorderWatchEffect(recordingValue, recording, modelValue, values));
-      return {
-        recorder,
-        recording,
-        recordingValue,
-        recorderEl,
-        modelValue,
-        values,
-        args
-      };
-    },
-    template: `
-			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
-
-			<br/>
-			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>
-
-			<br/>
-			Recording: <span class="inline-block" data-testid="recording">{{recording}}</span>
-
-			<lib-input
-				v-bind="args"
-				v-model="modelValue"
-				v-model:values="values"
-			>
-				<template #input >
-					<lib-recorder
-						class="p-0"
-						v-extract-root-el="_ => recorderEl = _"
-						:border="false"
-						:recordingValue="recordingValue"
-						:recorder="recorder"
-						v-model:recording="recording"
-						v-model="modelValue"
-						@recorder:click="recording = !recording"
-						@recorder:blur="recordingValue = modelValue; recording = false"
-					/>
-				</template>
-				<template #left>
-					<icon><icon-fa-solid-keyboard/></icon>
-				</template>
-			</lib-input>
-		`
-  }),
-  args: {
-    values: ["A", "B", "C"]
-  }
-};
-export const NextToButton = {
-  render: (args) => ({
-    components: allComponents,
-    setup: () => ({
-      ...setupModelValue(args),
-      ...setupModelValues(args),
-      args
-    }),
-    template: `
-		<div class="flex gap-2 items-center">
-			<lib-input
-				v-bind="args"
-				v-model:values="values"
-				v-model="modelValue"
-:label="undefined"
-			>
-			</lib-input>
-			<lib-button>Button</lib-button>
-		</div>
-		`
-  })
-};

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

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

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

@@ -1,25 +0,0 @@
-import Label from "./LibLabel.vue";
-import * as components from "../index.js";
-const meta = {
-  component: Label,
-  title: "Components/Label",
-  args: {
-    slot: "label"
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-				<lib-label v-bind="args">{{args.slot}}</lib-label>
-				<br/>
-				In flex col with input:
-				<div class="flex flex-col">
-					<lib-label v-bind="args">{{args.slot}}</lib-label>
-					<lib-simple-input modelValue="some input"></lib-simple-input>
-				</div>
-		`
-  })
-};

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

@@ -1,23 +0,0 @@
-import type { StoryObj } from "@storybook/vue3";
-import LibMultiValues from "./LibMultiValues.vue.js";
-declare const meta: {
-    component: any;
-    title: string;
-    args: {
-        values: string[];
-        border: boolean;
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof LibMultiValues>;
-/**
- * The multi-value component is just the values part beneath the input.
- *
- * This is a simple example of how it can be combined with the simple-input component to create an input with multiple values.
- *
- * Note that setting the `disabled` or `readonly` props won't prevent the component from accepting an updated `values` prop. Disabling adding must be done separately from whatever is controlling the component (e.g. the input in this case).
- */
-export declare const Primary: Story;
-export declare const Disabled: any;
-export declare const Readonly: any;

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

@@ -1,60 +0,0 @@
-import { ref } from "vue";
-import LibMultiValues from "./LibMultiValues.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibMultiValues,
-  title: "Components/MultiValues",
-  args: {
-    values: ["A", "B", "C"],
-    border: true
-  },
-  tags: ["!test"]
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components: { ...components, LibMultiValues },
-    setup: () => {
-      const inputValue = ref("B");
-      const multiValueEl = ref(null);
-      const onKeydownEnter = (e) => {
-        if (e.key === "Enter") args.values.push(inputValue.value);
-      };
-      return {
-        args,
-        inputValue,
-        multiValueEl,
-        onKeydownEnter
-      };
-    },
-    template: `
-			<p>Simple Input connected to multi-value.</p>
-			<p> Press enter to add value:</p>
-			<lib-simple-input
-				v-model="inputValue"
-				@keydown="onKeydownEnter"
-			>
-			</lib-simple-input>
-			<p>Multi-value component: </p>
-			<div class="flex justify-start">
-				<lib-multi-values
-					ref="multiValueEl"
-					v-bind="args"
-					v-model:values="args.values"
-				/>
-			</div>
-		`
-  })
-};
-export const Disabled = {
-  ...Primary,
-  args: {
-    disabled: true
-  }
-};
-export const Readonly = {
-  ...Primary,
-  args: {
-    readonly: true
-  }
-};

package/dist/runtime/components/LibNotifications/LibNotification.stories.d.ts

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import LibNotification from "./LibNotification.vue.js";
-declare const meta: Meta<typeof LibNotification>;
-export default meta;
-type Story = StoryObj<typeof LibNotification>;
-export declare const Primary: Story;
-export declare const WithoutTitle: Story;
-export declare const WithCode: Story;
-export declare const RequiresAction: Story;
-/** Should not have cancel cross in top corner. */
-export declare const Uncancellable: Story;
-export declare const CustomOptions: Story;
-export declare const CustomDefaultOption: Story;
-export declare const CustomDangerousOption: Story;
-export declare const CustomDefaultAndDangerousOption: Story;

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

@@ -1,126 +0,0 @@
-import LibNotification from "./LibNotification.vue";
-import { NotificationHandler } from "../../helpers/NotificationHandler.js";
-import * as components from "../index.js";
-const handler = new NotificationHandler();
-const meta = {
-  component: LibNotification,
-  title: "Components/Notification",
-  args: {}
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components: { ...components, LibNotification },
-    setup() {
-      return { args };
-    },
-    backgrounds: { disable: true },
-    template: `
-			<lib-notification v-bind="args"/>
-		`
-  }),
-  args: {
-    // @ts-expect-error calling protected method
-    notification: {
-      ...handler._createEntry({
-        title: `Notification`,
-        message: `This is a notification. Pick an option:`
-      }),
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      resolve: () => {
-      }
-    }
-  }
-};
-export const WithoutTitle = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error calling protected method
-    notification: handler._createEntry({
-      ...Primary.args.notification,
-      title: void 0
-    })
-  }
-};
-export const WithCode = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error calling protected method
-    notification: handler._createEntry({
-      ...Primary.args.notification,
-      code: "0001"
-    })
-  }
-};
-export const RequiresAction = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error calling protected method
-    notification: handler._createEntry({
-      ...Primary.args.notification,
-      requiresAction: true
-    })
-  }
-};
-export const Uncancellable = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error calling protected method
-    notification: handler._createEntry({
-      ...Primary.args.notification,
-      options: ["Ok"],
-      cancellable: false
-    })
-  }
-};
-export const CustomOptions = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error calling protected method
-    notification: handler._createEntry({
-      ...Primary.args.notification,
-      options: ["Ok", "Default Answer", "Cancel"]
-    })
-  }
-};
-export const CustomDefaultOption = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error calling protected method
-    notification: handler._createEntry({
-      ...CustomOptions.args.notification,
-      default: "Default Answer"
-    })
-  }
-};
-export const CustomDangerousOption = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error calling protected method
-    notification: handler._createEntry({
-      ...CustomOptions.args.notification,
-      options: ["Ok", "Dangerous Option", "Cancel"],
-      dangerous: ["Dangerous Option"]
-    })
-  }
-};
-export const CustomDefaultAndDangerousOption = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error calling protected method
-    notification: handler._createEntry({
-      ...CustomOptions.args.notification,
-      options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
-      default: "Default Answer",
-      dangerous: ["Dangerous Option"]
-    })
-  }
-};

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

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