@witchcraft/ui 0.1.0 → 0.1.1

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

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

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

@@ -1,36 +0,0 @@
-import { ref } from "vue";
-import LibDarkModeSwitcher from "./LibDarkModeSwitcher.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibDarkModeSwitcher,
-  title: "Components/DarkModeSwitcher",
-  args: {}
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      const darkMode = ref(false);
-      return {
-        args,
-        darkMode
-      };
-    },
-    template: `
-			Value: {{darkMode}}
-			<LibDarkModeSwitcher 
-				@update:darkMode="darkMode = $event"
-				v-bind="{...args}"
-			></LibDarkModeSwitcher>
-			
-		`
-  })
-};
-export const WithoutLabel = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    showLabel: false
-  }
-};

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

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import * as components from "../index.js.js";
-declare const singleMeta: Meta<typeof components.LibDatePicker>;
-export default singleMeta;
-type Story = StoryObj<typeof components.LibDatePicker>;
-export declare const Primary: Story;
-export declare const DateRange: Story;
-export declare const IconTriggerFirst: Story;
-export declare const BottomSlot: Story;
-export declare const DateWithTime: Story;
-export declare const WithDifferentFallbackDate: Story;

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

@@ -1,98 +0,0 @@
-import { CalendarDate, fromDate, getLocalTimeZone, toTimeZone } from "@internationalized/date";
-import { computed, ref } from "vue";
-import { createNoonUtcDate } from "../../helpers/createNoonUtcDate.js";
-import * as components from "../index.js";
-function html(strings, ...values) {
-  return String.raw(strings, ...values);
-}
-const singleMeta = {
-  component: components.LibDatePicker,
-  title: "Components/DatePicker",
-  args: {
-    // @ts-expect-error custom prop just for story
-    slot: "",
-    timeZone: getLocalTimeZone()
-  }
-};
-export default singleMeta;
-function toUTC(m, timeZone) {
-  return toTimeZone(fromDate(m, timeZone), "UTC").toAbsoluteString();
-}
-export const Primary = {
-  render: (args) => ({
-    components: {
-      ...components
-    },
-    setup: () => {
-      const modelValue = ref(args.modelValue);
-      const timeZone = ref(args.timeZone);
-      const debugUtcDate = computed(() => {
-        const m = modelValue.value;
-        const z = timeZone.value;
-        return m instanceof Date ? toUTC(m, z) : typeof m === "object" ? `Start: ${m.start ? toUTC(m.start, z) : "undefined"}, End: ${m.end ? toUTC(m.end, z) : "undefined"}` : "undefined";
-      });
-      return { args, getLocalTimeZone, modelValue, timeZone, debugUtcDate };
-    },
-    template: `
-			<div>Date: {{modelValue ?? "undefined"}}</div>
-			<div>Date UTC: {{debugUtcDate}}</div>
-			<div>Detected timezone (via @internationalized/date): {{getLocalTimeZone()}}</div>
-			<LibTimeZonePicker
-				v-model="timeZone"
-				label="Override Time Zone"
-				wrapper-class="[&_.suggestions]:max-h-[200px] [&_.suggestions]:overflow-y-auto"
-			/> 
-			<div>
-				This component has no border, added here to see it's size.
-			</div>
-			<div class="border border-neutral-500">
-				<LibDatePicker v-bind="args" v-model="modelValue" :time-zone="timeZone">
-					${args.slot}
-				</LibDatePicker>
-			</div>
-		`
-  })
-};
-export const DateRange = {
-  ...Primary,
-  args: {
-    modelValue: { start: void 0, end: void 0 }
-  }
-};
-export const IconTriggerFirst = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    class: "[&_.trigger]:order-first"
-  }
-};
-export const BottomSlot = {
-  ...Primary,
-  args: {
-    // @ts-expect-error see above
-    slot: html`
-			<template #default="slotProps">
-				<LibButton>Custom content can be added here.</LibButton>
-				<p class="break-all">
-					Content has access to the internal temporary/suggested date value and can change it (e.g. set it to today).
-				</p>	
-				<p>Temp value:</p>
-				{{ slotProps.tempValue }} 
-			</template>
-		`
-  }
-};
-export const DateWithTime = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    showTime: true
-  }
-};
-export const WithDifferentFallbackDate = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    fallbackDate: createNoonUtcDate(new CalendarDate(2e3, 1, 1)).toDate()
-  }
-};

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

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

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

@@ -1,46 +0,0 @@
-import { crop } from "@alanscodelog/utils/crop.js";
-import LibDebug from "./LibDebug.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibDebug,
-  title: "Components/Debug",
-  args: {
-    value: { any: ["any", { value: "any" }] }
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-			<lib-debug v-bind="args" />
-		`
-  })
-};
-export const WithCustomTab = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    value: { any: ["any", { value: "any" }] },
-    tab: 2
-  }
-};
-export const NoValue = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    value: void 0
-  }
-};
-export const StringWithWhitespace = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    value: crop`
-	 		Manually
-	 			Indented
-	 				String
-	 	`
-  }
-};

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

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import LibFileInput from "./LibFileInput.vue.js";
-declare const meta: Meta<typeof LibFileInput>;
-export default meta;
-type Story = StoryObj<typeof LibFileInput>;
-export declare const SingleFile: Story;
-export declare const MultipleFile: Story;
-export declare const AnyFormat: Story;
-export declare const Compact: Story;
-export declare const ErrorHandling: Story;

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

@@ -1,63 +0,0 @@
-import { ref } from "vue";
-import LibFileInput from "./LibFileInput.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibFileInput,
-  title: "Components/FileInput",
-  args: {}
-};
-export default meta;
-export const SingleFile = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      function errorHandler(e) {
-        console.log(e);
-      }
-      return { args, errorHandler };
-    },
-    template: `
-			<lib-file-input v-bind="{...args}" @errors="errorHandler"></lib-file-input>
-		`
-  })
-};
-export const MultipleFile = {
-  ...SingleFile,
-  args: {
-    ...SingleFile.args,
-    multiple: true
-  }
-};
-export const AnyFormat = {
-  ...SingleFile,
-  args: {
-    ...SingleFile.args,
-    multiple: true,
-    formats: []
-  }
-};
-export const Compact = {
-  ...SingleFile,
-  args: {
-    ...SingleFile.args,
-    compact: true
-  }
-};
-export const ErrorHandling = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      const errors = ref([]);
-      const errorHandler = (e) => errors.value = e;
-      return {
-        args,
-        errors,
-        errorHandler
-      };
-    },
-    template: `
-			<lib-debug :title="'Errors'">{{errors}}</lib-debug>
-			<lib-file-input v-bind="{...args}"  @errors="errorHandler"></lib-file-input>
-		`
-  })
-};

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

@@ -1,33 +0,0 @@
-import type { StoryObj } from "@storybook/vue3";
-import LibInputDeprecated from "./LibInputDeprecated.vue.js";
-declare const meta: {
-    component: any;
-    title: string;
-    args: any;
-};
-export default meta;
-type Story = StoryObj<typeof LibInputDeprecated>;
-export declare const Primary: Story;
-export declare const Disabled: Story;
-export declare const Readonly: Story;
-export declare const Invalid: Story;
-export declare const AttrsPassword: Story;
-export declare const AttrsDate: Story;
-export declare const AttrsNumber: Story;
-export declare const Borderless: any;
-export declare const WithAutosuggest: any;
-export declare const WithAutosuggestNoLabel: any;
-export declare const WithInstantAutosuggest: any;
-export declare const AutosuggestRestricted: any;
-export declare const AutosuggestRestrictedWithClearOnClick: any;
-export declare const AutosuggestSelectLikeShowAllUnrestricted: any;
-export declare const AutosuggestObjectOptions: any;
-export declare const Slots: Story;
-/** Press enter to add a value. */
-export declare const WithMultipleValues: Story;
-export declare const WithMultipleValuesWithSuggestions: any;
-export declare const WithMultipleValuesWithSuggestionsNoSelected: any;
-export declare const WithMultipleValuesDisabled: any;
-export declare const WithMultipleValuesReadonly: any;
-export declare const InputSlotReplacement: Story;
-export declare const NextToButton: Story;

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

@@ -1,384 +0,0 @@
-import { ref, watchEffect } from "vue";
-import LibInputDeprecated from "./LibInputDeprecated.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: LibInputDeprecated,
-  title: "Components/Combobox",
-  args: {
-    border: true,
-    label: "Some Label",
-    ...{
-      _template: void 0
-    }
-  }
-};
-export default meta;
-const allComponents = {
-  ...components,
-  LibInputDeprecated,
-  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 ?? ""),
-  inputValue: ref(args.inputValue ?? "")
-});
-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: args._template ?? `
-			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
-
-			<lib-simple-input-deprecated
-				v-bind="args"
-				v-model:values="values"
-				v-model:inputValue="inputValue"
-				v-model="modelValue"
-				@submit="modelValue = $event"
-			>
-			</lib-simple-input-deprecated>
-		`
-  })
-};
-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 WithAutosuggestNoLabel = {
-  ...Base,
-  args: {
-    label: void 0,
-    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 AutosuggestRestrictedWithClearOnClick = {
-  ...WithAutosuggest,
-  args: {
-    ...WithAutosuggest.args,
-    restrictToSuggestions: true,
-    _template: `
-				Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
-
-				Temp Value: <span class="inline-block" data-testid="temp-value">{{inputValue}}</span>
-
-				<lib-simple-input-deprecated
-					v-bind="args"
-					v-model:values="values"
-					v-model:inputValue="inputValue"
-					v-model="modelValue"
-					@submit="modelValue = $event"
-					@click="inputValue = ''"
-				>
-				</lib-simple-input-deprecated>
-			`
-  },
-  play: null
-};
-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-simple-input-deprecated
-				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-simple-input-deprecated>
-		`
-  })
-};
-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-simple-input-deprecated
-				v-bind="args"
-				v-model="modelValue"
-				v-model:values="values"
-			>
-				<template #left>
-					<lib-button class="px-0" :border="false" :disabled="args.disabled || args.readonly">
-						<icon><icon-fa-solid-tags/></icon>
-					</lib-button>
-				</template>
-			</lib-simple-input-deprecated>
-		`
-  }),
-  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 WithMultipleValuesWithSuggestionsNoSelected = {
-  ...MultipleValuesBase,
-  args: {
-    ...MultipleValuesBase.args,
-    suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
-    showSelectedValues: false
-  },
-  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-simple-input-deprecated
-				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-simple-input-deprecated>
-		`
-  }),
-  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-simple-input-deprecated
-				v-bind="args"
-				v-model:values="values"
-				v-model="modelValue"
-				:label="undefined"
-			>
-			</lib-simple-input-deprecated>
-			<lib-button>Button</lib-button>
-		</div>
-		`
-  })
-};