@brumaombra/ui-vintage 0.1.0

package/dist/field.js

@@ -0,0 +1,294 @@
+import { c as cva } from "./index-FpH8cK6B.js";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot, computed, Fragment, createTextVNode, toDisplayString, renderList, createCommentVNode, createBlock, withCtx, createVNode } from "vue";
+import { c as cn } from "./utils-Bz4m9VPB.js";
+import { _ as _sfc_main$a } from "./Label.vue_vue_type_script_setup_true_lang-B_fwvfJ-.js";
+import { _ as _sfc_main$b } from "./Separator.vue_vue_type_script_setup_true_lang-COrZ60NR.js";
+const _hoisted_1$3 = ["data-orientation"];
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "Field",
+  props: {
+    class: {},
+    orientation: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        role: "group",
+        "data-slot": "field",
+        "data-orientation": _ctx.orientation,
+        class: normalizeClass(unref(cn)(
+          unref(fieldVariants)({ orientation: _ctx.orientation }),
+          props.class
+        ))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 10, _hoisted_1$3);
+    };
+  }
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "FieldContent",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "field-content",
+        class: normalizeClass(unref(cn)(
+          "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+          props.class
+        ))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "FieldDescription",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("p", {
+        "data-slot": "field-description",
+        class: normalizeClass(unref(cn)(
+          "text-xs leading-6 font-normal text-(--text-secondary-light) sm:text-sm dark:text-(--text-secondary-dark) group-has-[[data-orientation=horizontal]]/field:text-balance",
+          "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+          "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+          props.class
+        ))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$2 = {
+  key: 2,
+  class: "ml-4 flex list-disc flex-col gap-1"
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "FieldError",
+  props: {
+    class: {},
+    errors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const content = computed(() => {
+      if (!props.errors || props.errors.length === 0)
+        return null;
+      const uniqueErrors = [
+        ...new Map(
+          props.errors.filter(Boolean).map((error) => {
+            const message = typeof error === "string" ? error : error == null ? void 0 : error.message;
+            return [message, error];
+          })
+        ).values()
+      ];
+      if (uniqueErrors.length === 1 && uniqueErrors[0]) {
+        return typeof uniqueErrors[0] === "string" ? uniqueErrors[0] : uniqueErrors[0].message;
+      }
+      return uniqueErrors.map((error) => typeof error === "string" ? error : error == null ? void 0 : error.message);
+    });
+    return (_ctx, _cache) => {
+      return _ctx.$slots.default || content.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        role: "alert",
+        "data-slot": "field-error",
+        class: normalizeClass(unref(cn)("text-destructive text-sm font-normal", props.class))
+      }, [
+        _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : typeof content.value === "string" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createTextVNode(toDisplayString(content.value), 1)
+        ], 64)) : Array.isArray(content.value) ? (openBlock(), createElementBlock("ul", _hoisted_1$2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(content.value, (error, index) => {
+            return openBlock(), createElementBlock("li", { key: index }, toDisplayString(error), 1);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "FieldGroup",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "field-group",
+        class: normalizeClass(unref(cn)(
+          "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+          props.class
+        ))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "FieldLabel",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$a), {
+        "data-slot": "field-label",
+        class: normalizeClass(unref(cn)(
+          "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+          "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+          "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+          props.class
+        ))
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+const _hoisted_1$1 = ["data-variant"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "FieldLegend",
+  props: {
+    class: {},
+    variant: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("legend", {
+        "data-slot": "field-legend",
+        "data-variant": _ctx.variant,
+        class: normalizeClass(unref(cn)(
+          "mb-3 font-medium",
+          "data-[variant=legend]:text-base",
+          "data-[variant=label]:text-sm",
+          props.class
+        ))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 10, _hoisted_1$1);
+    };
+  }
+});
+const _hoisted_1 = ["data-content"];
+const _hoisted_2 = {
+  key: 0,
+  class: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+  "data-slot": "field-separator-content"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "FieldSeparator",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "field-separator",
+        "data-content": !!_ctx.$slots.default,
+        class: normalizeClass(unref(cn)(
+          "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+          props.class
+        ))
+      }, [
+        createVNode(unref(_sfc_main$b), { class: "absolute inset-0 top-1/2" }),
+        _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default")
+        ])) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "FieldSet",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("fieldset", {
+        "data-slot": "field-set",
+        class: normalizeClass(unref(cn)(
+          "flex flex-col gap-6",
+          "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+          props.class
+        ))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FieldTitle",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "field-label",
+        class: normalizeClass(unref(cn)(
+          "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+          props.class
+        ))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+export {
+  _sfc_main$9 as Field,
+  _sfc_main$8 as FieldContent,
+  _sfc_main$7 as FieldDescription,
+  _sfc_main$6 as FieldError,
+  _sfc_main$5 as FieldGroup,
+  _sfc_main$4 as FieldLabel,
+  _sfc_main$3 as FieldLegend,
+  _sfc_main$2 as FieldSeparator,
+  _sfc_main$1 as FieldSet,
+  _sfc_main as FieldTitle,
+  fieldVariants
+};

package/dist/index-C1_fxYhb.js

@@ -0,0 +1,251 @@
+import { c as computedWithControl, p as pxValue, t as toArray, w as watchImmediate, i as isClient, m as makeDestructurable, a as injectLocal, b as isDef, d as camelize, e as tryOnScopeDispose, f as isObject } from "./index-Dfi5ESP2.js";
+import { getCurrentInstance, onUpdated, onMounted, shallowRef, watchEffect, toValue, computed, ref, watch, nextTick, defineComponent, hasInjectionContext, unref } from "vue";
+// @__NO_SIDE_EFFECTS__
+function createReusableTemplate(options = {}) {
+  const { inheritAttrs = true } = options;
+  const render = shallowRef();
+  const define = defineComponent({ setup(_, { slots }) {
+    return () => {
+      render.value = slots.default;
+    };
+  } });
+  const reuse = defineComponent({
+    inheritAttrs,
+    props: options.props,
+    setup(props, { attrs, slots }) {
+      return () => {
+        var _render$value;
+        if (!render.value && true) throw new Error("[VueUse] Failed to find the definition of reusable template");
+        const vnode = (_render$value = render.value) === null || _render$value === void 0 ? void 0 : _render$value.call(render, {
+          ...options.props == null ? keysToCamelKebabCase(attrs) : props,
+          $slots: slots
+        });
+        return inheritAttrs && (vnode === null || vnode === void 0 ? void 0 : vnode.length) === 1 ? vnode[0] : vnode;
+      };
+    }
+  });
+  return makeDestructurable({
+    define,
+    reuse
+  }, [define, reuse]);
+}
+function keysToCamelKebabCase(obj) {
+  const newObj = {};
+  for (const key in obj) newObj[camelize(key)] = obj[key];
+  return newObj;
+}
+const defaultWindow = isClient ? window : void 0;
+const defaultDocument = isClient ? window.document : void 0;
+function unrefElement(elRef) {
+  var _$el;
+  const plain = toValue(elRef);
+  return (_$el = plain === null || plain === void 0 ? void 0 : plain.$el) !== null && _$el !== void 0 ? _$el : plain;
+}
+function useEventListener(...args) {
+  const register = (el, event, listener, options) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
+  };
+  const firstParamTargets = computed(() => {
+    const test = toArray(toValue(args[0])).filter((e) => e != null);
+    return test.every((e) => typeof e !== "string") ? test : void 0;
+  });
+  return watchImmediate(() => {
+    var _firstParamTargets$va, _firstParamTargets$va2;
+    return [
+      (_firstParamTargets$va = (_firstParamTargets$va2 = firstParamTargets.value) === null || _firstParamTargets$va2 === void 0 ? void 0 : _firstParamTargets$va2.map((e) => unrefElement(e))) !== null && _firstParamTargets$va !== void 0 ? _firstParamTargets$va : [defaultWindow].filter((e) => e != null),
+      toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
+      toArray(unref(firstParamTargets.value ? args[2] : args[1])),
+      toValue(firstParamTargets.value ? args[3] : args[2])
+    ];
+  }, ([raw_targets, raw_events, raw_listeners, raw_options], _, onCleanup) => {
+    if (!(raw_targets === null || raw_targets === void 0 ? void 0 : raw_targets.length) || !(raw_events === null || raw_events === void 0 ? void 0 : raw_events.length) || !(raw_listeners === null || raw_listeners === void 0 ? void 0 : raw_listeners.length)) return;
+    const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
+    const cleanups = raw_targets.flatMap((el) => raw_events.flatMap((event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))));
+    onCleanup(() => {
+      cleanups.forEach((fn) => fn());
+    });
+  }, { flush: "post" });
+}
+// @__NO_SIDE_EFFECTS__
+function useMounted() {
+  const isMounted = shallowRef(false);
+  const instance = getCurrentInstance();
+  if (instance) onMounted(() => {
+    isMounted.value = true;
+  }, instance);
+  return isMounted;
+}
+// @__NO_SIDE_EFFECTS__
+function useSupported(callback) {
+  const isMounted = /* @__PURE__ */ useMounted();
+  return computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
+function createKeyPredicate(keyFilter) {
+  if (typeof keyFilter === "function") return keyFilter;
+  else if (typeof keyFilter === "string") return (event) => event.key === keyFilter;
+  else if (Array.isArray(keyFilter)) return (event) => keyFilter.includes(event.key);
+  return () => true;
+}
+function onKeyStroke(...args) {
+  let key;
+  let handler;
+  let options = {};
+  if (args.length === 3) {
+    key = args[0];
+    handler = args[1];
+    options = args[2];
+  } else if (args.length === 2) if (typeof args[1] === "object") {
+    key = true;
+    handler = args[0];
+    options = args[1];
+  } else {
+    key = args[0];
+    handler = args[1];
+  }
+  else {
+    key = true;
+    handler = args[0];
+  }
+  const { target = defaultWindow, eventName = "keydown", passive = false, dedupe = false } = options;
+  const predicate = createKeyPredicate(key);
+  const listener = (e) => {
+    if (e.repeat && toValue(dedupe)) return;
+    if (predicate(e)) handler(e);
+  };
+  return useEventListener(target, eventName, listener, passive);
+}
+const ssrWidthSymbol = Symbol("vueuse-ssr-width");
+// @__NO_SIDE_EFFECTS__
+function useSSRWidth() {
+  const ssrWidth = hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
+  return typeof ssrWidth === "number" ? ssrWidth : void 0;
+}
+function useMediaQuery(query, options = {}) {
+  const { window: window$1 = defaultWindow, ssrWidth = /* @__PURE__ */ useSSRWidth() } = options;
+  const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "matchMedia" in window$1 && typeof window$1.matchMedia === "function");
+  const ssrSupport = shallowRef(typeof ssrWidth === "number");
+  const mediaQuery = shallowRef();
+  const matches = shallowRef(false);
+  const handler = (event) => {
+    matches.value = event.matches;
+  };
+  watchEffect(() => {
+    if (ssrSupport.value) {
+      ssrSupport.value = !isSupported.value;
+      matches.value = toValue(query).split(",").some((queryString) => {
+        const not = queryString.includes("not all");
+        const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        let res = Boolean(minWidth || maxWidth);
+        if (minWidth && res) res = ssrWidth >= pxValue(minWidth[1]);
+        if (maxWidth && res) res = ssrWidth <= pxValue(maxWidth[1]);
+        return not ? !res : res;
+      });
+      return;
+    }
+    if (!isSupported.value) return;
+    mediaQuery.value = window$1.matchMedia(toValue(query));
+    matches.value = mediaQuery.value.matches;
+  });
+  useEventListener(mediaQuery, "change", handler, { passive: true });
+  return computed(() => matches.value);
+}
+function cloneFnJSON(source) {
+  return JSON.parse(JSON.stringify(source));
+}
+function useCurrentElement(rootComponent) {
+  const vm = getCurrentInstance();
+  const currentElement = computedWithControl(() => null, () => rootComponent ? unrefElement(rootComponent) : vm.proxy.$el);
+  onUpdated(currentElement.trigger);
+  onMounted(currentElement.trigger);
+  return currentElement;
+}
+function useResizeObserver(target, callback, options = {}) {
+  const { window: window$1 = defaultWindow, ...observerOptions } = options;
+  let observer;
+  const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "ResizeObserver" in window$1);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(computed(() => {
+    const _targets = toValue(target);
+    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+  }), (els) => {
+    cleanup();
+    if (isSupported.value && window$1) {
+      observer = new ResizeObserver(callback);
+      for (const _el of els) if (_el) observer.observe(_el, observerOptions);
+    }
+  }, {
+    immediate: true,
+    flush: "post"
+  });
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function useVModel(props, key, emit, options = {}) {
+  var _vm$$emit, _vm$proxy;
+  const { clone = false, passive = false, eventName, deep = false, defaultValue, shouldEmit } = options;
+  const vm = getCurrentInstance();
+  const _emit = emit || (vm === null || vm === void 0 ? void 0 : vm.emit) || (vm === null || vm === void 0 || (_vm$$emit = vm.$emit) === null || _vm$$emit === void 0 ? void 0 : _vm$$emit.bind(vm)) || (vm === null || vm === void 0 || (_vm$proxy = vm.proxy) === null || _vm$proxy === void 0 || (_vm$proxy = _vm$proxy.$emit) === null || _vm$proxy === void 0 ? void 0 : _vm$proxy.bind(vm === null || vm === void 0 ? void 0 : vm.proxy));
+  let event = eventName;
+  if (!key) key = "modelValue";
+  event = event || `update:${key.toString()}`;
+  const cloneFn = (val) => !clone ? val : typeof clone === "function" ? clone(val) : cloneFnJSON(val);
+  const getValue$1 = () => isDef(props[key]) ? cloneFn(props[key]) : defaultValue;
+  const triggerEmit = (value) => {
+    if (shouldEmit) {
+      if (shouldEmit(value)) _emit(event, value);
+    } else _emit(event, value);
+  };
+  if (passive) {
+    const proxy = ref(getValue$1());
+    let isUpdating = false;
+    watch(() => props[key], (v) => {
+      if (!isUpdating) {
+        isUpdating = true;
+        proxy.value = cloneFn(v);
+        nextTick(() => isUpdating = false);
+      }
+    });
+    watch(proxy, (v) => {
+      if (!isUpdating && (v !== props[key] || deep)) triggerEmit(v);
+    }, { deep });
+    return proxy;
+  } else return computed({
+    get() {
+      return getValue$1();
+    },
+    set(value) {
+      triggerEmit(value);
+    }
+  });
+}
+export {
+  unrefElement as a,
+  useEventListener as b,
+  useMounted as c,
+  defaultWindow as d,
+  useCurrentElement as e,
+  useMediaQuery as f,
+  defaultDocument as g,
+  useResizeObserver as h,
+  createReusableTemplate as i,
+  onKeyStroke as o,
+  useVModel as u
+};