@witchcraft/ui 0.1.1 → 0.1.3

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

@@ -0,0 +1,384 @@
+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>
+		`
+  })
+};