@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/admin/inputs/autocomplete-array-input.vue.js

@@ -0,0 +1,229 @@
+import { defineComponent, ref, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, createElementVNode, Fragment, renderList, withModifiers, createVNode } from "vue";
+import { useInput } from "../../../form/use-input.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { areIdsEqual } from "../../../lib/are-ids-equal.js";
+import { Field, FieldLabel, FieldDescription, FieldError } from "../../ui/field.js";
+import _sfc_main$1 from "../common/validation-error.vue.js";
+import { humanizeSource } from "./label-text.js";
+import { useChoiceInput } from "./use-choice-input.js";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { class: "relative" };
+const _hoisted_3 = ["aria-invalid"];
+const _hoisted_4 = ["disabled", "aria-label", "onClick"];
+const _hoisted_5 = ["id", "aria-expanded", "aria-invalid", "value", "placeholder", "disabled"];
+const _hoisted_6 = {
+  key: 0,
+  role: "listbox",
+  "aria-multiselectable": "true",
+  class: "absolute z-10 mt-1 max-h-64 w-full overflow-auto rounded-md border border-input bg-background py-1 shadow-md"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "px-3 py-2 text-sm text-muted-foreground"
+};
+const _hoisted_8 = ["onMousedown"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "autocomplete-array-input",
+  props: {
+    placeholder: {},
+    filterToQuery: { type: Function, default: (searchText) => ({ q: searchText }) },
+    noOptionsText: {},
+    source: {},
+    choices: {},
+    optionText: {},
+    optionValue: { default: "id" },
+    disableValue: {},
+    translateChoice: { type: Boolean },
+    label: { type: [String, Boolean], default: void 0 },
+    helperText: {},
+    defaultValue: {},
+    validate: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const translate = useTranslate();
+    const emptyArray = [];
+    const {
+      source,
+      isFromReference,
+      allChoices,
+      fetchError,
+      getChoiceText,
+      getChoiceValue,
+      setFilters
+    } = useChoiceInput({
+      componentName: "AutocompleteArrayInput",
+      choices: props.choices,
+      source: props.source,
+      optionText: props.optionText,
+      optionValue: props.optionValue,
+      disableValue: props.disableValue,
+      translateChoice: props.translateChoice,
+      defaultOptionText: "name"
+    });
+    const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+      source,
+      defaultValue: props.defaultValue,
+      validate: props.validate,
+      format: (raw) => Array.isArray(raw) ? raw : raw == null ? emptyArray : [raw]
+    });
+    const open = ref(false);
+    const query = ref("");
+    const values = computed(
+      () => Array.isArray(value.value) ? value.value : emptyArray
+    );
+    const selectedChoices = computed(
+      () => allChoices.value.filter(
+        (choice) => values.value.some((v) => areIdsEqual(getChoiceValue(choice), v))
+      )
+    );
+    const unselectedChoices = computed(
+      () => allChoices.value.filter(
+        (choice) => !values.value.some((v) => areIdsEqual(getChoiceValue(choice), v))
+      )
+    );
+    const filteredChoices = computed(() => {
+      const q = query.value.trim().toLowerCase();
+      if (isFromReference || q === "") return unselectedChoices.value;
+      return unselectedChoices.value.filter(
+        (choice) => getChoiceText(choice).toLowerCase().includes(q)
+      );
+    });
+    const invalid = computed(() => touched.value && error.value != null);
+    const labelText = computed(
+      () => props.label === false ? null : props.label ?? humanizeSource(source)
+    );
+    const placeholderText = computed(
+      () => props.placeholder ?? translate("ra.action.search", { _: "Search..." })
+    );
+    const noMatchText = computed(
+      () => props.noOptionsText ?? translate("ra.navigation.no_results", { _: "No matching item found." })
+    );
+    const helper = computed(
+      () => props.helperText ?? fetchError.value?.message
+    );
+    function onFocus() {
+      open.value = true;
+    }
+    function onInput(event) {
+      const text = event.target.value;
+      query.value = text;
+      open.value = true;
+      if (isFromReference) setFilters(props.filterToQuery(text), true);
+    }
+    function onSelect(choice) {
+      setValue([...values.value, getChoiceValue(choice)]);
+      query.value = "";
+      if (isFromReference) setFilters(props.filterToQuery(""), true);
+      blur();
+    }
+    function onUnselect(choice) {
+      setValue(values.value.filter((v) => !areIdsEqual(getChoiceValue(choice), v)));
+      blur();
+    }
+    function onKeyDown(event) {
+      if ((event.key === "Backspace" || event.key === "Delete") && query.value === "" && values.value.length > 0) {
+        setValue(values.value.slice(0, -1));
+      } else if (event.key === "Escape") {
+        open.value = false;
+      }
+    }
+    function onBlur() {
+      window.setTimeout(() => {
+        open.value = false;
+        query.value = "";
+        blur();
+      }, 120);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Field), {
+        class: normalizeClass(props.class),
+        "data-invalid": invalid.value,
+        "data-slot": "autocomplete-array"
+      }, {
+        default: withCtx(() => [
+          labelText.value != null ? (openBlock(), createBlock(unref(FieldLabel), {
+            key: 0,
+            "html-for": unref(id)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(labelText.value), 1),
+              unref(isRequired) ? (openBlock(), createElementBlock("span", _hoisted_1, " *")) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["html-for"])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", {
+              class: "flex min-h-9 flex-wrap items-center gap-1 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm focus-within:ring-1 focus-within:ring-ring aria-invalid:border-destructive",
+              "aria-invalid": invalid.value || void 0
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(selectedChoices.value, (choice) => {
+                return openBlock(), createElementBlock("span", {
+                  key: String(unref(getChoiceValue)(choice)),
+                  class: "inline-flex items-center gap-1 rounded border border-input px-2 py-0.5 text-xs font-normal"
+                }, [
+                  createTextVNode(toDisplayString(unref(getChoiceText)(choice)) + " ", 1),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "cursor-pointer rounded-full outline-none focus:ring-2 focus:ring-ring",
+                    disabled: __props.disabled || __props.readonly,
+                    "aria-label": unref(translate)("ra.action.remove", { _: "Remove" }),
+                    onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+                    }, ["prevent", "stop"])),
+                    onClick: withModifiers(($event) => onUnselect(choice), ["prevent"])
+                  }, "×", 40, _hoisted_4)
+                ]);
+              }), 128)),
+              createElementVNode("input", {
+                id: unref(id),
+                type: "text",
+                role: "combobox",
+                "aria-expanded": open.value,
+                "aria-invalid": invalid.value || void 0,
+                value: query.value,
+                placeholder: placeholderText.value,
+                disabled: __props.disabled || __props.readonly,
+                autocomplete: "off",
+                class: "ml-1 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+                onFocus,
+                onInput,
+                onKeydown: onKeyDown,
+                onBlur
+              }, null, 40, _hoisted_5)
+            ], 8, _hoisted_3),
+            open.value ? (openBlock(), createElementBlock("ul", _hoisted_6, [
+              filteredChoices.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_7, toDisplayString(noMatchText.value), 1)) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(filteredChoices.value, (choice) => {
+                return openBlock(), createElementBlock("li", {
+                  key: String(unref(getChoiceValue)(choice)),
+                  role: "option",
+                  class: "cursor-pointer px-3 py-1.5 text-sm hover:bg-accent",
+                  onMousedown: withModifiers(($event) => onSelect(choice), ["prevent"])
+                }, toDisplayString(unref(getChoiceText)(choice)), 41, _hoisted_8);
+              }), 128))
+            ])) : createCommentVNode("", true)
+          ]),
+          helper.value ? (openBlock(), createBlock(unref(FieldDescription), { key: 1 }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(helper.value), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 2 }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, { error: unref(error) }, null, 8, ["error"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-invalid"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/autocomplete-array-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./autocomplete-array-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/autocomplete-input.vue.d.ts

@@ -0,0 +1,17 @@
+import type { FilterPayload } from "@chelone/core";
+import type { ChoiceInputBaseProps } from "./choice-input-props.js";
+/** Props for {@link AutocompleteInput}. */
+export interface AutocompleteInputProps extends ChoiceInputBaseProps {
+    /** Placeholder shown in the search input. */
+    placeholder?: string;
+    /** Maps the typed filter text into a reference-list filter payload. Default `{ q }`. */
+    filterToQuery?: (searchText: string) => FilterPayload;
+    /** Content shown when no choice matches the filter. */
+    noOptionsText?: string;
+}
+declare const _default: import("vue").DefineComponent<AutocompleteInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AutocompleteInputProps> & Readonly<{}>, {
+    label: string | false;
+    optionValue: string;
+    filterToQuery: (searchText: string) => FilterPayload;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/inputs/autocomplete-input.vue.js

@@ -0,0 +1,201 @@
+import { defineComponent, ref, computed, watch, openBlock, createBlock, unref, normalizeClass, withCtx, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, createElementVNode, Fragment, renderList, withModifiers, createVNode } from "vue";
+import { useInput } from "../../../form/use-input.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { areIdsEqual } from "../../../lib/are-ids-equal.js";
+import { Field, FieldLabel, FieldDescription, FieldError } from "../../ui/field.js";
+import _sfc_main$1 from "../common/validation-error.vue.js";
+import { humanizeSource } from "./label-text.js";
+import { useChoiceInput } from "./use-choice-input.js";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { class: "relative" };
+const _hoisted_3 = ["id", "aria-expanded", "aria-invalid", "value", "placeholder", "disabled"];
+const _hoisted_4 = {
+  key: 0,
+  role: "listbox",
+  class: "absolute z-10 mt-1 max-h-64 w-full overflow-auto rounded-md border border-input bg-background py-1 shadow-md"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "px-3 py-2 text-sm text-muted-foreground"
+};
+const _hoisted_6 = ["aria-selected", "onMousedown"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "autocomplete-input",
+  props: {
+    placeholder: {},
+    filterToQuery: { type: Function, default: (searchText) => ({ q: searchText }) },
+    noOptionsText: {},
+    source: {},
+    choices: {},
+    optionText: {},
+    optionValue: { default: "id" },
+    disableValue: {},
+    translateChoice: { type: Boolean },
+    label: { type: [String, Boolean], default: void 0 },
+    helperText: {},
+    defaultValue: {},
+    validate: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const translate = useTranslate();
+    const {
+      source,
+      isFromReference,
+      allChoices,
+      fetchError,
+      getChoiceText,
+      getChoiceValue,
+      setFilters
+    } = useChoiceInput({
+      componentName: "AutocompleteInput",
+      choices: props.choices,
+      source: props.source,
+      optionText: props.optionText,
+      optionValue: props.optionValue,
+      disableValue: props.disableValue,
+      translateChoice: props.translateChoice,
+      defaultOptionText: "name"
+    });
+    const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+      source,
+      defaultValue: props.defaultValue,
+      validate: props.validate
+    });
+    const open = ref(false);
+    const query = ref("");
+    const selectedChoice = computed(
+      () => allChoices.value.find(
+        (choice) => areIdsEqual(getChoiceValue(choice), value.value)
+      )
+    );
+    const selectedText = computed(
+      () => selectedChoice.value ? getChoiceText(selectedChoice.value) : ""
+    );
+    watch(
+      selectedText,
+      (text) => {
+        if (!open.value) query.value = text;
+      },
+      { immediate: true }
+    );
+    const invalid = computed(() => touched.value && error.value != null);
+    const labelText = computed(
+      () => props.label === false ? null : props.label ?? humanizeSource(source)
+    );
+    const placeholderText = computed(
+      () => props.placeholder ?? translate("ra.action.search", { _: "Search..." })
+    );
+    const noMatchText = computed(
+      () => props.noOptionsText ?? translate("ra.navigation.no_results", { _: "No matching item found." })
+    );
+    const helper = computed(
+      () => props.helperText ?? fetchError.value?.message
+    );
+    const filteredChoices = computed(() => {
+      const q = query.value.trim().toLowerCase();
+      if (isFromReference || q === "" || q === selectedText.value.toLowerCase()) {
+        return allChoices.value;
+      }
+      return allChoices.value.filter(
+        (choice) => getChoiceText(choice).toLowerCase().includes(q)
+      );
+    });
+    function onFocus() {
+      open.value = true;
+    }
+    function onInput(event) {
+      const text = event.target.value;
+      query.value = text;
+      open.value = true;
+      if (isFromReference) setFilters(props.filterToQuery(text));
+    }
+    function onSelect(choice) {
+      if (areIdsEqual(getChoiceValue(choice), value.value) && !isRequired) {
+        setValue("");
+        query.value = "";
+      } else {
+        setValue(getChoiceValue(choice));
+        query.value = getChoiceText(choice);
+      }
+      open.value = false;
+      if (isFromReference) setFilters(props.filterToQuery(""));
+      blur();
+    }
+    function onBlur() {
+      window.setTimeout(() => {
+        open.value = false;
+        query.value = selectedText.value;
+        blur();
+      }, 120);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Field), {
+        class: normalizeClass(props.class),
+        "data-invalid": invalid.value,
+        "data-slot": "autocomplete"
+      }, {
+        default: withCtx(() => [
+          labelText.value != null ? (openBlock(), createBlock(unref(FieldLabel), {
+            key: 0,
+            "html-for": unref(id)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(labelText.value), 1),
+              unref(isRequired) ? (openBlock(), createElementBlock("span", _hoisted_1, " *")) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["html-for"])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("input", {
+              id: unref(id),
+              type: "text",
+              role: "combobox",
+              "aria-expanded": open.value,
+              "aria-invalid": invalid.value || void 0,
+              value: query.value,
+              placeholder: placeholderText.value,
+              disabled: __props.disabled || __props.readonly,
+              autocomplete: "off",
+              class: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
+              onFocus,
+              onInput,
+              onBlur
+            }, null, 40, _hoisted_3),
+            open.value ? (openBlock(), createElementBlock("ul", _hoisted_4, [
+              filteredChoices.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_5, toDisplayString(noMatchText.value), 1)) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(filteredChoices.value, (choice) => {
+                return openBlock(), createElementBlock("li", {
+                  key: String(unref(getChoiceValue)(choice)),
+                  role: "option",
+                  "aria-selected": unref(areIdsEqual)(unref(value), unref(getChoiceValue)(choice)),
+                  class: "cursor-pointer px-3 py-1.5 text-sm hover:bg-accent aria-selected:bg-accent",
+                  onMousedown: withModifiers(($event) => onSelect(choice), ["prevent"])
+                }, toDisplayString(unref(getChoiceText)(choice)), 41, _hoisted_6);
+              }), 128))
+            ])) : createCommentVNode("", true)
+          ]),
+          helper.value ? (openBlock(), createBlock(unref(FieldDescription), { key: 1 }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(helper.value), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 2 }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, { error: unref(error) }, null, 8, ["error"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-invalid"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/autocomplete-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./autocomplete-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/boolean-input.vue.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `<BooleanInput>` — toggle switch for boolean values, the Vue analog of
+ * `@chelone/react`'s `inputs/boolean-input.tsx`. Binds through `useInput` and
+ * renders the shadcn `Switch`. Writes a plain boolean; marks the field blurred
+ * on change so validation surfaces on interaction.
+ */
+import type { Validator } from "@chelone/core";
+/** Props for {@link BooleanInput}. */
+export interface BooleanInputProps {
+    source: string;
+    label?: string | false;
+    defaultValue?: boolean;
+    validate?: Validator | readonly Validator[];
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<BooleanInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BooleanInputProps> & Readonly<{}>, {
+    label: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/inputs/boolean-input.vue.js

@@ -0,0 +1,72 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, createElementBlock, createCommentVNode } from "vue";
+import { useInput } from "../../../form/use-input.js";
+import { Field, FieldLabel, FieldError } from "../../ui/field.js";
+import _sfc_main$1 from "../../ui/switch.vue.js";
+import _sfc_main$2 from "../common/validation-error.vue.js";
+import { humanizeSource } from "./label-text.js";
+const _hoisted_1 = { class: "flex items-center gap-2" };
+const _hoisted_2 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "boolean-input",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    defaultValue: { type: Boolean },
+    validate: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+      source: props.source,
+      defaultValue: props.defaultValue ?? false,
+      validate: props.validate
+    });
+    const checked = computed(() => Boolean(value.value));
+    const invalid = computed(() => touched.value && error.value != null);
+    const labelText = computed(
+      () => props.label === false ? null : props.label ?? humanizeSource(props.source)
+    );
+    function onChange(next) {
+      setValue(next);
+      blur();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Field), {
+        class: normalizeClass(props.class),
+        "data-invalid": invalid.value
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_sfc_main$1, {
+              id: unref(id),
+              "model-value": checked.value,
+              "aria-invalid": invalid.value,
+              "onUpdate:modelValue": onChange
+            }, null, 8, ["id", "model-value", "aria-invalid"]),
+            labelText.value != null ? (openBlock(), createBlock(unref(FieldLabel), {
+              key: 0,
+              "html-for": unref(id)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(labelText.value), 1),
+                unref(isRequired) ? (openBlock(), createElementBlock("span", _hoisted_2, " *")) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["html-for"])) : createCommentVNode("", true)
+          ]),
+          invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 0 }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, { error: unref(error) }, null, 8, ["error"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-invalid"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/boolean-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./boolean-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/inputs/checkbox-group-input.vue.d.ts

@@ -0,0 +1,13 @@
+import type { ChoiceInputBaseProps } from "./choice-input-props.js";
+/** Props for {@link CheckboxGroupInput}. */
+export interface CheckboxGroupInputProps extends ChoiceInputBaseProps {
+    /** Lay the checkboxes out horizontally instead of stacked. */
+    row?: boolean;
+}
+declare const _default: import("vue").DefineComponent<CheckboxGroupInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckboxGroupInputProps> & Readonly<{}>, {
+    label: string | false;
+    row: boolean;
+    optionValue: string;
+    disableValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;