@routa/ui-vue 0.1.0

package/dist/select/types.d.ts

@@ -0,0 +1,92 @@
+import { ExtractPropTypes, PropType, InjectionKey, Ref } from 'vue';
+export declare const selectProps: {
+    readonly modelValue: {
+        readonly type: PropType<any | any[]>;
+        readonly default: null;
+    };
+    readonly multiple: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly filterable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "请选择";
+    };
+    readonly size: {
+        readonly type: PropType<"sm" | "md" | "lg">;
+    };
+    readonly noDataText: {
+        readonly type: StringConstructor;
+        readonly default: "无数据";
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly remote: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly loadingText: {
+        readonly type: StringConstructor;
+        readonly default: "加载中...";
+    };
+};
+export type SelectProps = ExtractPropTypes<typeof selectProps>;
+export declare const selectEmits: {
+    'update:modelValue': (_val: any | any[]) => boolean;
+    change: (_val: any | any[]) => boolean;
+    clear: () => boolean;
+    'visible-change': (_visible: boolean) => boolean;
+    'remove-tag': (_val: any) => boolean;
+    search: (_query: string) => boolean;
+};
+export type SelectEmits = typeof selectEmits;
+export declare const optionProps: {
+    readonly value: {
+        readonly type: PropType<any>;
+        readonly required: true;
+    };
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+export type OptionProps = ExtractPropTypes<typeof optionProps>;
+export interface SelectContext {
+    props: SelectProps;
+    value: Ref<any | any[]>;
+    select: (val: any) => void;
+    hoveredValue: any;
+    filterText: Ref<string>;
+    focusedIndex: Ref<number>;
+    activeOptionId: import('vue').ComputedRef<string | undefined>;
+    listboxId: string;
+    getOptionId: (val: any) => string;
+    registerOption: (option: {
+        value: any;
+        label: string;
+        disabled: boolean;
+        visible: boolean;
+    }) => void;
+    unregisterOption: (val: any) => void;
+    updateOptionVisibility: (val: any, visible: boolean) => void;
+    updateOptionDisabled: (val: any, disabled: boolean) => void;
+}
+export declare const SelectKey: InjectionKey<SelectContext>;

package/dist/slider/Slider.vue.d.ts

@@ -0,0 +1,123 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: import('vue').PropType<number | number[]>;
+        readonly default: 0;
+    };
+    readonly min: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly max: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    readonly step: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly range: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly vertical: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly showTooltip: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly formatTooltip: {
+        readonly type: import('vue').PropType<(val: number) => string | number>;
+        readonly default: (val: number) => number;
+    };
+    readonly marks: {
+        readonly type: import('vue').PropType<Record<number, string | {
+            style?: any;
+            label: string;
+        }>>;
+        readonly default: () => {};
+    };
+    readonly height: {
+        readonly type: StringConstructor;
+        readonly default: "200px";
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (_val: number | number[]) => void;
+    input: (_val: number | number[]) => void;
+    "update:modelValue": (_val: number | number[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: import('vue').PropType<number | number[]>;
+        readonly default: 0;
+    };
+    readonly min: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly max: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    readonly step: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly range: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly vertical: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly showTooltip: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly formatTooltip: {
+        readonly type: import('vue').PropType<(val: number) => string | number>;
+        readonly default: (val: number) => number;
+    };
+    readonly marks: {
+        readonly type: import('vue').PropType<Record<number, string | {
+            style?: any;
+            label: string;
+        }>>;
+        readonly default: () => {};
+    };
+    readonly height: {
+        readonly type: StringConstructor;
+        readonly default: "200px";
+    };
+}>> & Readonly<{
+    onChange?: ((_val: number | number[]) => any) | undefined;
+    onInput?: ((_val: number | number[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((_val: number | number[]) => any) | undefined;
+}>, {
+    readonly disabled: boolean;
+    readonly range: boolean;
+    readonly vertical: boolean;
+    readonly modelValue: number | number[];
+    readonly height: string;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly showTooltip: boolean;
+    readonly formatTooltip: (val: number) => string | number;
+    readonly marks: Record<number, string | {
+        style?: any;
+        label: string;
+    }>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    runwayRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/slider/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vue';
+import { default as Slider } from './Slider.vue';
+export declare const LSlider: typeof Slider & Plugin;
+export * from './types';
+export default LSlider;

package/dist/slider/index.js

@@ -0,0 +1,2 @@
+require('../style/slider.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../chunks/manager-C0AUxQ1I.js");const w=require("../chunks/index-DWAWrVaT.js"),q=require("../chunks/use-id-BycaM3-h.js"),j=require("../chunks/use-signals-Bz1smiXh.js"),O=require("../chunks/use-form-item-CloIcyon.js");function R(s={}){const u=s.min??0,l=s.max??100,c=s.step??1,k=s.range??!1,B=()=>typeof s.value=="function"?s.value():s.value??(k?[u,l]:u),V=B(),d=w.signal(Array.isArray(V)?[...V]:V),p=w.signal(typeof s.disabled=="function"?s.disabled():s.disabled??!1),S=w.signal(!1),v=w.signal(null);typeof s.disabled=="function"&&w.effect(()=>{p.value=s.disabled()});const f=t=>{let n=Math.max(u,Math.min(l,t));if(c>0){const i=(n-u)%c;n=i>=c/2?n-i+c:n-i}return parseFloat(n.toFixed(10))},M=t=>Array.isArray(t)?t.map(f).sort((n,i)=>n-i):f(t),y=(t,n)=>Array.isArray(t)&&Array.isArray(n)?t.length===n.length&&t.every((i,h)=>Object.is(i,n[h])):Object.is(t,n),A=t=>{const n=M(t);y(n,d.value)||(d.value=n)};typeof s.value=="function"&&w.effect(()=>{const t=M(B()),n=w.untracked(()=>d.value);y(t,n)||(d.value=t)});const E=(t,n=!1)=>{var b,a;if(p.value)return;const i=M(t);!y(i,d.value)&&(d.value=i,(b=s.onInput)==null||b.call(s,i),n&&((a=s.onChange)==null||a.call(s,i)))},g=t=>(t-u)/(l-u)*100,_=w.computed(()=>{const t=d.value;return Array.isArray(t)?t.map(g):[g(t)]});return{state:{get value(){return d.value},set value(t){A(t)},get percents(){return _.value},get disabled(){return p.value},set disabled(t){p.value=t},get isDragging(){return S.value},get activeThumbIndex(){return v.value}},actions:{updateValue:E,getValueFromPosition:(t,n)=>{let i;return s.vertical?i=(n.bottom-t.y)/n.height:i=(t.x-n.left)/n.width,u+i*(l-u)},setDragging:(t,n=null)=>{S.value=t,v.value=n},handleKeyDown:(t,n=0)=>{if(p.value)return;const i=h=>{const b=d.value;if(Array.isArray(b)){const a=[...b];a[n]+=h,E(a,!0)}else E(b+h,!0)};switch(t.key){case"ArrowUp":case"ArrowRight":t.preventDefault(),i(c);break;case"ArrowDown":case"ArrowLeft":t.preventDefault(),i(-c);break;case"PageUp":t.preventDefault(),i(c*10||(l-u)/10);break;case"PageDown":t.preventDefault(),i(-(c*10||(l-u)/10));break;case"Home":t.preventDefault(),E(k?n===0?[u,d.value[1]]:[d.value[0],u]:u,!0);break;case"End":t.preventDefault(),E(k?n===0?[l,d.value[1]]:[d.value[0],l]:l,!0);break}}},props:{min:u,max:l,step:c,disabled:p.value}}}const N={modelValue:{type:[Number,Array],default:0},min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:{type:Function,default:s=>s},marks:{type:Object,default:()=>({})},height:{type:String,default:"200px"}},P={"update:modelValue":s=>!0,change:s=>!0,input:s=>!0},x=["id","aria-valuemin","aria-valuemax","aria-valuenow","aria-disabled","aria-label","onMousedown","onTouchstart","onKeydown"],U={key:0,class:"l-slider__tooltip"},X=["id","aria-valuemin","aria-valuemax","aria-valuenow","aria-disabled"],Y={key:0,class:"l-slider__tooltip"},H={key:2,class:"l-slider__marks"},G=e.defineComponent({name:"Slider",__name:"Slider",props:N,emits:P,setup(s,{emit:u}){const l=s,c=u,{formItem:k,disabled:B,inputId:V}=O.useFormItem(l),d=q.useId("slider"),p=(V==null?void 0:V.value)||d,S=e.ref(null),v=R({value:l.modelValue,min:l.min,max:l.max,step:l.step,disabled:B.value,range:l.range,vertical:l.vertical,onInput:a=>{c("update:modelValue",a),c("input",a)},onChange:a=>{c("change",a)}}),{value:f,percents:M,disabled:y,isDragging:A,activeThumbIndex:E}=j.useController(v,{value:()=>l.modelValue,disabled:()=>B.value}),g=(a,r=null)=>{if(y.value||!S.value)return;const o=S.value.getBoundingClientRect(),m="touches"in a?a.touches[0]:a,D=m.clientX,$=m.clientY,C=v.actions.getValueFromPosition({x:D,y:$},o);if(r===null&&l.range){const T=f.value,I=Math.abs(C-T[0]),K=Math.abs(C-T[1]);r=I<K?0:1}else r===null&&(r=0);if(v.actions.setDragging(!0,r),l.range){const T=[...f.value];T[r]=C,v.actions.updateValue(T)}else v.actions.updateValue(C)},_=a=>{A.value&&g(a,E.value)},L=()=>{A.value&&(v.actions.setDragging(!1,null),c("change",f.value),k==null||k.validate("change").catch(()=>{}))};e.onMounted(()=>{window.addEventListener("mousemove",_),window.addEventListener("mouseup",L),window.addEventListener("touchmove",_,{passive:!1}),window.addEventListener("touchend",L)}),e.onUnmounted(()=>{window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",L),window.removeEventListener("touchmove",_),window.removeEventListener("touchend",L)});const F=e.computed(()=>["l-slider",{"is-disabled":y.value,"is-dragging":A.value,"l-slider--vertical":l.vertical}]),t=e.computed(()=>({"--l-slider-height":l.vertical?l.height:void 0})),n=e.computed(()=>{const a=M.value;if(l.range){const r=Math.min(a[0],a[1]),o=Math.abs(a[1]-a[0]);return l.vertical?{bottom:`${r}%`,height:`${o}%`}:{left:`${r}%`,width:`${o}%`}}return l.vertical?{height:`${a[0]}%`}:{width:`${a[0]}%`}}),i=a=>{const r=M.value[a];return l.vertical?{bottom:`${r}%`}:{left:`${r}%`}},h=e.computed(()=>Object.entries(l.marks).map(([a,r])=>{const o=parseFloat(a);return{position:o,label:typeof r=="string"?r:r.label,style:typeof r=="string"?{}:r.style,isEndpoint:o===l.min||o===l.max}})),b=a=>{const r=(a-l.min)/(l.max-l.min)*100;return l.vertical?{bottom:`${r}%`}:{left:`${r}%`}};return(a,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(F.value),style:e.normalizeStyle(t.value),onMousedown:r[3]||(r[3]=o=>g(o,null)),onTouchstart:r[4]||(r[4]=o=>g(o,null))},[e.createElementVNode("div",{ref_key:"runwayRef",ref:S,class:"l-slider__runway"},[e.createElementVNode("div",{class:"l-slider__bar",style:e.normalizeStyle(n.value)},null,4),a.range?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},e.renderList(2,(o,m)=>e.createElementVNode("div",{key:m,id:m===0?e.unref(p):void 0,class:"l-slider__thumb",style:e.normalizeStyle(i(m)),tabindex:"0",role:"slider","aria-valuemin":a.min,"aria-valuemax":a.max,"aria-valuenow":e.unref(f)[m],"aria-disabled":e.unref(y)?"true":"false","aria-label":m===0?"Start":"End",onMousedown:e.withModifiers(D=>g(D,m),["stop"]),onTouchstart:e.withModifiers(D=>g(D,m),["stop"]),onKeydown:D=>e.unref(v).actions.handleKeyDown(D,m)},[a.showTooltip?(e.openBlock(),e.createElementBlock("div",U,e.toDisplayString(a.formatTooltip(e.unref(f)[m])),1)):e.createCommentVNode("",!0)],44,x)),64)):(e.openBlock(),e.createElementBlock("div",{key:1,id:e.unref(p),class:"l-slider__thumb",style:e.normalizeStyle(i(0)),tabindex:"0",role:"slider","aria-valuemin":a.min,"aria-valuemax":a.max,"aria-valuenow":e.unref(f),"aria-disabled":e.unref(y)?"true":"false",onMousedown:r[0]||(r[0]=e.withModifiers(o=>g(o,0),["stop"])),onTouchstart:r[1]||(r[1]=e.withModifiers(o=>g(o,0),["stop"])),onKeydown:r[2]||(r[2]=o=>e.unref(v).actions.handleKeyDown(o,0))},[a.showTooltip?(e.openBlock(),e.createElementBlock("div",Y,e.toDisplayString(a.formatTooltip(e.unref(f))),1)):e.createCommentVNode("",!0)],44,X)),h.value.length>0?(e.openBlock(),e.createElementBlock("div",H,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,o=>(e.openBlock(),e.createElementBlock("div",{key:o.position,class:e.normalizeClass(["l-slider__mark-stop",{"is-endpoint":o.isEndpoint}]),style:e.normalizeStyle(b(o.position))},[e.createElementVNode("div",{class:"l-slider__mark-text",style:e.normalizeStyle(o.style)},e.toDisplayString(o.label),5)],6))),128))])):e.createCommentVNode("",!0)],512)],38))}}),z=G;z.install=s=>{s.component("LSlider",z)};exports.LSlider=z;exports.default=z;exports.sliderEmits=P;exports.sliderProps=N;

package/dist/slider/index.mjs

@@ -0,0 +1,326 @@
+import '../style/slider.css';
+import { defineComponent as J, ref as Q, onMounted as W, onUnmounted as Z, computed as B, openBlock as w, createElementBlock as V, normalizeStyle as L, normalizeClass as x, createElementVNode as I, Fragment as O, renderList as U, unref as p, withModifiers as K, toDisplayString as z, createCommentVNode as R } from "vue";
+import "../chunks/manager-BUdQK4AD.mjs";
+import { s as N, e as X, u as ee, c as ae } from "../chunks/index-B0yEC3RG.mjs";
+import { u as te } from "../chunks/use-id-D3casveg.mjs";
+import { u as le } from "../chunks/use-signals-CE1T2jXK.mjs";
+import { u as ne } from "../chunks/use-form-item-CqDbWCiU.mjs";
+function re(r = {}) {
+  const i = r.min ?? 0, t = r.max ?? 100, d = r.step ?? 1, k = r.range ?? !1, S = () => typeof r.value == "function" ? r.value() : r.value ?? (k ? [i, t] : i), D = S(), u = N(Array.isArray(D) ? [...D] : D), g = N(typeof r.disabled == "function" ? r.disabled() : r.disabled ?? !1), M = N(!1), m = N(null);
+  typeof r.disabled == "function" && X(() => {
+    g.value = r.disabled();
+  });
+  const v = (e) => {
+    let l = Math.max(i, Math.min(t, e));
+    if (d > 0) {
+      const o = (l - i) % d;
+      l = o >= d / 2 ? l - o + d : l - o;
+    }
+    return parseFloat(l.toFixed(10));
+  }, E = (e) => Array.isArray(e) ? e.map(v).sort((l, o) => l - o) : v(e), y = (e, l) => Array.isArray(e) && Array.isArray(l) ? e.length === l.length && e.every((o, h) => Object.is(o, l[h])) : Object.is(e, l), C = (e) => {
+    const l = E(e);
+    y(l, u.value) || (u.value = l);
+  };
+  typeof r.value == "function" && X(() => {
+    const e = E(S()), l = ee(() => u.value);
+    y(e, l) || (u.value = e);
+  });
+  const _ = (e, l = !1) => {
+    var b, a;
+    if (g.value) return;
+    const o = E(e);
+    !y(o, u.value) && (u.value = o, (b = r.onInput) == null || b.call(r, o), l && ((a = r.onChange) == null || a.call(r, o)));
+  }, f = (e) => (e - i) / (t - i) * 100, T = ae(() => {
+    const e = u.value;
+    return Array.isArray(e) ? e.map(f) : [f(e)];
+  });
+  return {
+    state: {
+      get value() {
+        return u.value;
+      },
+      set value(e) {
+        C(e);
+      },
+      get percents() {
+        return T.value;
+      },
+      get disabled() {
+        return g.value;
+      },
+      set disabled(e) {
+        g.value = e;
+      },
+      get isDragging() {
+        return M.value;
+      },
+      get activeThumbIndex() {
+        return m.value;
+      }
+    },
+    actions: {
+      updateValue: _,
+      getValueFromPosition: (e, l) => {
+        let o;
+        return r.vertical ? o = (l.bottom - e.y) / l.height : o = (e.x - l.left) / l.width, i + o * (t - i);
+      },
+      setDragging: (e, l = null) => {
+        M.value = e, m.value = l;
+      },
+      handleKeyDown: (e, l = 0) => {
+        if (g.value) return;
+        const o = (h) => {
+          const b = u.value;
+          if (Array.isArray(b)) {
+            const a = [...b];
+            a[l] += h, _(a, !0);
+          } else
+            _(b + h, !0);
+        };
+        switch (e.key) {
+          case "ArrowUp":
+          case "ArrowRight":
+            e.preventDefault(), o(d);
+            break;
+          case "ArrowDown":
+          case "ArrowLeft":
+            e.preventDefault(), o(-d);
+            break;
+          case "PageUp":
+            e.preventDefault(), o(d * 10 || (t - i) / 10);
+            break;
+          case "PageDown":
+            e.preventDefault(), o(-(d * 10 || (t - i) / 10));
+            break;
+          case "Home":
+            e.preventDefault(), _(k ? l === 0 ? [i, u.value[1]] : [u.value[0], i] : i, !0);
+            break;
+          case "End":
+            e.preventDefault(), _(k ? l === 0 ? [t, u.value[1]] : [u.value[0], t] : t, !0);
+            break;
+        }
+      }
+    },
+    props: {
+      min: i,
+      max: t,
+      step: d,
+      disabled: g.value
+    }
+  };
+}
+const se = {
+  modelValue: {
+    type: [Number, Array],
+    default: 0
+  },
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: 100
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  range: {
+    type: Boolean,
+    default: !1
+  },
+  vertical: {
+    type: Boolean,
+    default: !1
+  },
+  showTooltip: {
+    type: Boolean,
+    default: !0
+  },
+  formatTooltip: {
+    type: Function,
+    default: (r) => r
+  },
+  marks: {
+    type: Object,
+    default: () => ({})
+  },
+  height: {
+    type: String,
+    default: "200px"
+  }
+}, oe = {
+  "update:modelValue": (r) => !0,
+  change: (r) => !0,
+  input: (r) => !0
+}, ie = ["id", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-disabled", "aria-label", "onMousedown", "onTouchstart", "onKeydown"], ue = {
+  key: 0,
+  class: "l-slider__tooltip"
+}, de = ["id", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-disabled"], ce = {
+  key: 0,
+  class: "l-slider__tooltip"
+}, me = {
+  key: 2,
+  class: "l-slider__marks"
+}, ve = /* @__PURE__ */ J({
+  name: "Slider",
+  __name: "Slider",
+  props: se,
+  emits: oe,
+  setup(r, { emit: i }) {
+    const t = r, d = i, { formItem: k, disabled: S, inputId: D } = ne(t), u = te("slider"), g = (D == null ? void 0 : D.value) || u, M = Q(null), m = re({
+      value: t.modelValue,
+      min: t.min,
+      max: t.max,
+      step: t.step,
+      disabled: S.value,
+      range: t.range,
+      vertical: t.vertical,
+      onInput: (a) => {
+        d("update:modelValue", a), d("input", a);
+      },
+      onChange: (a) => {
+        d("change", a);
+      }
+    }), {
+      value: v,
+      percents: E,
+      disabled: y,
+      isDragging: C,
+      activeThumbIndex: _
+    } = le(m, {
+      value: () => t.modelValue,
+      disabled: () => S.value
+    }), f = (a, n = null) => {
+      if (y.value || !M.value) return;
+      const s = M.value.getBoundingClientRect(), c = "touches" in a ? a.touches[0] : a, A = c.clientX, H = c.clientY, P = m.actions.getValueFromPosition({ x: A, y: H }, s);
+      if (n === null && t.range) {
+        const F = v.value, q = Math.abs(P - F[0]), G = Math.abs(P - F[1]);
+        n = q < G ? 0 : 1;
+      } else n === null && (n = 0);
+      if (m.actions.setDragging(!0, n), t.range) {
+        const F = [...v.value];
+        F[n] = P, m.actions.updateValue(F);
+      } else
+        m.actions.updateValue(P);
+    }, T = (a) => {
+      C.value && f(a, _.value);
+    }, $ = () => {
+      C.value && (m.actions.setDragging(!1, null), d("change", v.value), k == null || k.validate("change").catch(() => {
+      }));
+    };
+    W(() => {
+      window.addEventListener("mousemove", T), window.addEventListener("mouseup", $), window.addEventListener("touchmove", T, { passive: !1 }), window.addEventListener("touchend", $);
+    }), Z(() => {
+      window.removeEventListener("mousemove", T), window.removeEventListener("mouseup", $), window.removeEventListener("touchmove", T), window.removeEventListener("touchend", $);
+    });
+    const j = B(() => [
+      "l-slider",
+      {
+        "is-disabled": y.value,
+        "is-dragging": C.value,
+        "l-slider--vertical": t.vertical
+      }
+    ]), e = B(() => ({
+      "--l-slider-height": t.vertical ? t.height : void 0
+    })), l = B(() => {
+      const a = E.value;
+      if (t.range) {
+        const n = Math.min(a[0], a[1]), s = Math.abs(a[1] - a[0]);
+        return t.vertical ? { bottom: `${n}%`, height: `${s}%` } : { left: `${n}%`, width: `${s}%` };
+      }
+      return t.vertical ? { height: `${a[0]}%` } : { width: `${a[0]}%` };
+    }), o = (a) => {
+      const n = E.value[a];
+      return t.vertical ? { bottom: `${n}%` } : { left: `${n}%` };
+    }, h = B(() => Object.entries(t.marks).map(([a, n]) => {
+      const s = parseFloat(a);
+      return {
+        position: s,
+        label: typeof n == "string" ? n : n.label,
+        style: typeof n == "string" ? {} : n.style,
+        isEndpoint: s === t.min || s === t.max
+      };
+    })), b = (a) => {
+      const n = (a - t.min) / (t.max - t.min) * 100;
+      return t.vertical ? { bottom: `${n}%` } : { left: `${n}%` };
+    };
+    return (a, n) => (w(), V("div", {
+      class: x(j.value),
+      style: L(e.value),
+      onMousedown: n[3] || (n[3] = (s) => f(s, null)),
+      onTouchstart: n[4] || (n[4] = (s) => f(s, null))
+    }, [
+      I("div", {
+        ref_key: "runwayRef",
+        ref: M,
+        class: "l-slider__runway"
+      }, [
+        I("div", {
+          class: "l-slider__bar",
+          style: L(l.value)
+        }, null, 4),
+        a.range ? (w(), V(O, { key: 0 }, U(2, (s, c) => I("div", {
+          key: c,
+          id: c === 0 ? p(g) : void 0,
+          class: "l-slider__thumb",
+          style: L(o(c)),
+          tabindex: "0",
+          role: "slider",
+          "aria-valuemin": a.min,
+          "aria-valuemax": a.max,
+          "aria-valuenow": p(v)[c],
+          "aria-disabled": p(y) ? "true" : "false",
+          "aria-label": c === 0 ? "Start" : "End",
+          onMousedown: K((A) => f(A, c), ["stop"]),
+          onTouchstart: K((A) => f(A, c), ["stop"]),
+          onKeydown: (A) => p(m).actions.handleKeyDown(A, c)
+        }, [
+          a.showTooltip ? (w(), V("div", ue, z(a.formatTooltip(p(v)[c])), 1)) : R("", !0)
+        ], 44, ie)), 64)) : (w(), V("div", {
+          key: 1,
+          id: p(g),
+          class: "l-slider__thumb",
+          style: L(o(0)),
+          tabindex: "0",
+          role: "slider",
+          "aria-valuemin": a.min,
+          "aria-valuemax": a.max,
+          "aria-valuenow": p(v),
+          "aria-disabled": p(y) ? "true" : "false",
+          onMousedown: n[0] || (n[0] = K((s) => f(s, 0), ["stop"])),
+          onTouchstart: n[1] || (n[1] = K((s) => f(s, 0), ["stop"])),
+          onKeydown: n[2] || (n[2] = (s) => p(m).actions.handleKeyDown(s, 0))
+        }, [
+          a.showTooltip ? (w(), V("div", ce, z(a.formatTooltip(p(v))), 1)) : R("", !0)
+        ], 44, de)),
+        h.value.length > 0 ? (w(), V("div", me, [
+          (w(!0), V(O, null, U(h.value, (s) => (w(), V("div", {
+            key: s.position,
+            class: x(["l-slider__mark-stop", { "is-endpoint": s.isEndpoint }]),
+            style: L(b(s.position))
+          }, [
+            I("div", {
+              class: "l-slider__mark-text",
+              style: L(s.style)
+            }, z(s.label), 5)
+          ], 6))), 128))
+        ])) : R("", !0)
+      ], 512)
+    ], 38));
+  }
+}), Y = ve;
+Y.install = (r) => {
+  r.component("LSlider", Y);
+};
+export {
+  Y as LSlider,
+  Y as default,
+  oe as sliderEmits,
+  se as sliderProps
+};

package/dist/slider/types.d.ts

@@ -0,0 +1,57 @@
+import { ExtractPropTypes, PropType } from 'vue';
+export declare const sliderProps: {
+    readonly modelValue: {
+        readonly type: PropType<number | number[]>;
+        readonly default: 0;
+    };
+    readonly min: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly max: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    readonly step: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly range: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly vertical: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly showTooltip: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly formatTooltip: {
+        readonly type: PropType<(val: number) => string | number>;
+        readonly default: (val: number) => number;
+    };
+    readonly marks: {
+        readonly type: PropType<Record<number, string | {
+            style?: any;
+            label: string;
+        }>>;
+        readonly default: () => {};
+    };
+    readonly height: {
+        readonly type: StringConstructor;
+        readonly default: "200px";
+    };
+};
+export type SliderProps = ExtractPropTypes<typeof sliderProps>;
+export declare const sliderEmits: {
+    'update:modelValue': (_val: number | number[]) => boolean;
+    change: (_val: number | number[]) => boolean;
+    input: (_val: number | number[]) => boolean;
+};
+export type SliderEmits = typeof sliderEmits;