@brumaombra/ui-vintage 0.1.0

package/dist/SliderFormComponent.vue_vue_type_script_setup_true_lang-KPzC_Lmr.js

@@ -0,0 +1,59 @@
+import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode } from "vue";
+import { _ as _sfc_main$1 } from "./Card.vue_vue_type_script_setup_true_lang-6ol3rxy1.js";
+import { _ as _sfc_main$2 } from "./Slider.vue_vue_type_script_setup_true_lang-D-cAN-4Q.js";
+const _hoisted_1 = { class: "flex items-center justify-between gap-3" };
+const _hoisted_2 = { class: "space-y-2" };
+const _hoisted_3 = { class: "text-sm font-medium" };
+const _hoisted_4 = {
+  key: 0,
+  class: "text-xs text-muted-foreground"
+};
+const _hoisted_5 = { class: "rounded border border-border bg-background px-2 py-1 text-xs font-medium" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SliderFormComponent",
+  props: {
+    id: { default: void 0 },
+    label: {},
+    description: { default: "" },
+    modelValue: {},
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    valueText: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const sliderValue = computed(() => [props.modelValue]);
+    const resolvedValueText = computed(() => props.valueText || String(props.modelValue));
+    const handleUpdateModelValue = (value) => {
+      emits("update:modelValue", (value == null ? void 0 : value[0]) ?? props.min);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), { class: "space-y-3 px-4 py-4" }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, toDisplayString(props.label), 1),
+              props.description ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+            ]),
+            createElementVNode("span", _hoisted_5, toDisplayString(resolvedValueText.value), 1)
+          ]),
+          createVNode(unref(_sfc_main$2), {
+            id: props.id,
+            "model-value": sliderValue.value,
+            min: props.min,
+            max: props.max,
+            step: props.step,
+            "onUpdate:modelValue": handleUpdateModelValue
+          }, null, 8, ["id", "model-value", "min", "max", "step"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/Switch.vue_vue_type_script_setup_true_lang-BWKCycMm.js

@@ -0,0 +1,226 @@
+import { defineComponent, toRefs, computed, openBlock, createBlock, unref, mergeProps, withKeys, withModifiers, withCtx, renderSlot, createCommentVNode, createVNode, normalizeClass, normalizeProps, guardReactiveProps } from "vue";
+import { c as createContext, u as useForwardPropsEmits } from "./useForwardPropsEmits-DmumnZO5.js";
+import { u as useFormControl } from "./useFormControl-7ytzz-r7.js";
+import { u as useForwardExpose } from "./useForwardExpose-CNVHwdF2.js";
+import { P as Primitive } from "./Primitive-D3IcFg81.js";
+import { V as VisuallyHiddenInput_default } from "./VisuallyHiddenInput-DLAsRwUw.js";
+import { u as useVModel } from "./index-C1_fxYhb.js";
+import { c as cn } from "./utils-Bz4m9VPB.js";
+import { r as reactiveOmit } from "./index-Dfi5ESP2.js";
+const [injectSwitchRootContext, provideSwitchRootContext] = createContext("SwitchRoot");
+var SwitchRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "SwitchRoot",
+  props: {
+    defaultValue: {
+      type: null,
+      required: false
+    },
+    modelValue: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    id: {
+      type: String,
+      required: false
+    },
+    value: {
+      type: String,
+      required: false,
+      default: "on"
+    },
+    trueValue: {
+      type: null,
+      required: false,
+      default: () => true
+    },
+    falseValue: {
+      type: null,
+      required: false,
+      default: () => false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "button"
+    },
+    name: {
+      type: String,
+      required: false
+    },
+    required: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { disabled } = toRefs(props);
+    const modelValue = useVModel(props, "modelValue", emit, {
+      defaultValue: props.defaultValue ?? props.falseValue,
+      passive: props.modelValue === void 0
+    });
+    const checked = computed(() => modelValue.value === props.trueValue);
+    function toggleCheck() {
+      if (disabled.value) return;
+      modelValue.value = checked.value ? props.falseValue : props.trueValue;
+    }
+    const { forwardRef, currentElement } = useForwardExpose();
+    const isFormControl = useFormControl(currentElement);
+    const ariaLabel = computed(() => {
+      var _a;
+      return props.id && currentElement.value ? (_a = document.querySelector(`[for="${props.id}"]`)) == null ? void 0 : _a.innerText : void 0;
+    });
+    provideSwitchRootContext({
+      checked,
+      toggleCheck,
+      disabled
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps(_ctx.$attrs, {
+        id: _ctx.id,
+        ref: unref(forwardRef),
+        role: "switch",
+        type: _ctx.as === "button" ? "button" : void 0,
+        value: _ctx.value,
+        "aria-label": _ctx.$attrs["aria-label"] || ariaLabel.value,
+        "aria-checked": checked.value,
+        "aria-required": _ctx.required,
+        "data-state": checked.value ? "checked" : "unchecked",
+        "data-disabled": unref(disabled) ? "" : void 0,
+        "as-child": _ctx.asChild,
+        as: _ctx.as,
+        disabled: unref(disabled),
+        onClick: toggleCheck,
+        onKeydown: withKeys(withModifiers(toggleCheck, ["prevent"]), ["enter"])
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+          modelValue: unref(modelValue),
+          checked: checked.value
+        }), unref(isFormControl) && _ctx.name ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
+          key: 0,
+          type: "checkbox",
+          name: _ctx.name,
+          disabled: unref(disabled),
+          required: _ctx.required,
+          value: _ctx.value,
+          checked: checked.value
+        }, null, 8, [
+          "name",
+          "disabled",
+          "required",
+          "value",
+          "checked"
+        ])) : createCommentVNode("v-if", true)]),
+        _: 3
+      }, 16, [
+        "id",
+        "type",
+        "value",
+        "aria-label",
+        "aria-checked",
+        "aria-required",
+        "data-state",
+        "data-disabled",
+        "as-child",
+        "as",
+        "disabled",
+        "onKeydown"
+      ]);
+    };
+  }
+});
+var SwitchRoot_default = SwitchRoot_vue_vue_type_script_setup_true_lang_default;
+var SwitchThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "SwitchThumb",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "span"
+    }
+  },
+  setup(__props) {
+    const rootContext = injectSwitchRootContext();
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        "data-state": unref(rootContext).checked.value ? "checked" : "unchecked",
+        "data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+        "as-child": _ctx.asChild,
+        as: _ctx.as
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, [
+        "data-state",
+        "data-disabled",
+        "as-child",
+        "as"
+      ]);
+    };
+  }
+});
+var SwitchThumb_default = SwitchThumb_vue_vue_type_script_setup_true_lang_default;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Switch",
+  props: {
+    defaultValue: {},
+    modelValue: {},
+    disabled: { type: Boolean },
+    id: {},
+    value: {},
+    trueValue: {},
+    falseValue: {},
+    asChild: { type: Boolean },
+    as: {},
+    name: {},
+    required: { type: Boolean },
+    class: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = reactiveOmit(props, "class");
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(SwitchRoot_default), mergeProps({ "data-slot": "switch" }, unref(forwarded), {
+        class: unref(cn)(
+          "peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-200 outline-none focus-visible:border-(--border-hover-light) focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-60 data-[state=checked]:border-(--button-primary-light) data-[state=checked]:bg-(--bg-selected-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:focus-visible:border-(--border-hover-dark) dark:data-[state=checked]:border-(--button-primary-dark) dark:data-[state=checked]:bg-(--bg-selected-dark)",
+          props.class
+        )
+      }), {
+        default: withCtx((slotProps) => [
+          createVNode(unref(SwitchThumb_default), {
+            "data-slot": "switch-thumb",
+            class: normalizeClass(unref(cn)("pointer-events-none absolute left-[4px] top-1/2 block h-4 w-4 -translate-y-1/2 rounded-[0.2rem] bg-(--text-secondary-light) ring-0 transition-all duration-200 data-[state=checked]:translate-x-6 data-[state=checked]:bg-(--button-primary-light) dark:bg-(--text-secondary-dark) dark:data-[state=checked]:bg-(--button-primary-dark)"))
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "thumb", normalizeProps(guardReactiveProps(slotProps)))
+            ]),
+            _: 2
+          }, 1032, ["class"])
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/SwitchFormComponent.vue_vue_type_script_setup_true_lang-XOBEs3pa.js

@@ -0,0 +1,39 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createElementVNode, toDisplayString, createVNode } from "vue";
+import { _ as _sfc_main$1 } from "./Card.vue_vue_type_script_setup_true_lang-6ol3rxy1.js";
+import { _ as _sfc_main$2 } from "./Switch.vue_vue_type_script_setup_true_lang-BWKCycMm.js";
+const _hoisted_1 = { class: "space-y-2" };
+const _hoisted_2 = { class: "text-sm font-medium" };
+const _hoisted_3 = { class: "text-xs text-muted-foreground" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SwitchFormComponent",
+  props: {
+    id: {},
+    label: {},
+    description: {},
+    modelValue: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), { class: "flex flex-row items-center justify-between gap-4 px-4 py-3" }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, toDisplayString(props.label), 1),
+            createElementVNode("div", _hoisted_3, toDisplayString(props.description), 1)
+          ]),
+          createVNode(unref(_sfc_main$2), {
+            id: props.id,
+            "model-value": props.modelValue,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("update:modelValue", $event))
+          }, null, 8, ["id", "model-value"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};