@indielayer/ui/lib/components/slider/Slider.vue2.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as E, ref as d, watch as p, computed as F, openBlock as f, createBlock as c, normalizeStyle as v, unref as r, normalizeClass as a, withCtx as P, createElementVNode as o, renderSlot as b, mergeProps as R, toHandlers as H, createCommentVNode as L } from "vue";
import { useCommon as T } from "../../composables/useCommon.js";
import { useColors as X } from "../../composables/useColors.js";
import { useInteractive as y } from "../../composables/useInteractive.js";
import { useInputtable as i } from "../../composables/useInputtable.js";
import { useTheme as j } from "../../composables/useTheme.js";
import x from "../label/Label.vue.js";
import A from "../inputFooter/InputFooter.vue.js";
const D = { class: "flex items-center relative w-full gap-2 min-h-[1.25rem]" }, G = { class: "relative flex items-center flex-1" }, J = ["id", "disabled", "name", "max", "min", "step", "readonly", "value"], K = {
  ...X.props("primary"),
  ...y.props(),
  ...i.props(),
  min: {
    type: [Number, String],
    default: 0
  },
  max: {
    type: [Number, String],
    default: 100
  },
  step: {
    type: [Number, String],
    default: 1
  }
}, M = {
  name: "XSlider",
  validators: {
    ...T.validators()
  }
}, le = /* @__PURE__ */ E({
  ...M,
  props: K,
  emits: i.emits(),
  setup(h, { expose: N, emit: g }) {
    const s = h, n = g, m = d(null), l = d(Number(s.modelValue ?? 0)), { focus: u, blur: S } = y(m);
    p(() => s.modelValue, (e) => {
      l.value = Number(e ?? 0);
    }), p(l, (e) => {
      n("update:modelValue", e);
    });
    const w = F(() => (l.value - Number(s.min)) / (Number(s.max) - Number(s.min)) * 100), {
      errorInternal: C,
      hideFooterInternal: _,
      isInsideForm: k,
      inputListeners: I,
      reset: V,
      validate: $,
      setError: q
    } = i(s, { focus: u, emit: n }), { styles: z, classes: t, className: B } = j("Slider", {}, s);
    return N({ focus: u, blur: S, reset: V, validate: $, setError: q }), (e, O) => (f(), c(x, {
      style: v(r(z)),
      disabled: e.disabled,
      required: e.required,
      "is-inside-form": r(k),
      label: e.label,
      class: a([
        r(B),
        r(t).wrapper
      ]),
      tooltip: e.tooltip
    }, {
      default: P(() => [
        o("div", D, [
          b(e.$slots, "prefix", { value: l.value }, void 0, !0),
          o("div", G, [
            o("input", R({
              id: e.id,
              ref_key: "elRef",
              ref: m,
              type: "range",
              class: [r(t).input, "absolute z-10 appearance-none bg-transparent focus:outline-none focus-visible:outline-none"],
              disabled: e.disabled,
              name: e.name,
              max: e.max,
              min: e.min,
              step: e.step,
              readonly: e.readonly,
              value: l.value
            }, H(r(I), !0)), null, 16, J),
            o("div", {
              class: a(["absolute w-full", r(t).track])
            }, [
              o("div", {
                class: a(r(t).progress),
                style: v({ width: w.value + "%" })
              }, null, 6)
            ], 2)
          ]),
          b(e.$slots, "suffix", { value: l.value }, void 0, !0)
        ]),
        r(_) ? L("", !0) : (f(), c(A, {
          key: 0,
          error: r(C),
          helper: e.helper
        }, null, 8, ["error", "helper"]))
      ]),
      _: 3
    }, 8, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
  }
});
export {
  le as default
};