@indielayer/ui 0.0.0-dev-20240125104319

package/lib/components/slider/Slider.vue.d.ts

@@ -0,0 +1,165 @@
+import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const sliderProps: {
+    min: NumberConstructor;
+    max: NumberConstructor;
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gradient: BooleanConstructor;
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>;
+type InternalClasses = 'wrapper' | 'drag';
+export interface SliderTheme extends ThemeComponent<SliderProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    min: NumberConstructor;
+    max: NumberConstructor;
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gradient: BooleanConstructor;
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    reset: () => void;
+    validate: (val?: any) => boolean;
+    setError: (val: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    min: NumberConstructor;
+    max: NumberConstructor;
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gradient: BooleanConstructor;
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    color: string;
+    size: import("../../composables/useCommon").Size;
+    loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    readonly: boolean;
+    required: boolean;
+    validateOnInput: boolean;
+    hideFooter: boolean;
+    rules: unknown[];
+    gradient: boolean;
+    step: number;
+}, {}>, {
+    prefix?(_: {
+        value: number;
+    }): any;
+    suffix?(_: {
+        value: number;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/slider/Slider.vue.js

@@ -0,0 +1,148 @@
+import { defineComponent as j, ref as u, watch as D, computed as G, openBlock as k, createBlock as H, normalizeClass as g, unref as l, normalizeStyle as N, withCtx as J, createElementVNode as c, renderSlot as C, createVNode as O, createElementBlock as Q, toDisplayString as U, createCommentVNode as Y } from "vue";
+import { useEventListener as f } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useCommon as V } from "../../composables/useCommon.js";
+import { useColors as Z } from "../../composables/useColors.js";
+import { useInteractive as P } from "../../composables/useInteractive.js";
+import { useInputtable as b } from "../../composables/useInputtable.js";
+import { useTheme as ee } from "../../composables/useTheme.js";
+import te from "../label/Label.vue.js";
+import re from "../progress/Progress.vue.js";
+const oe = { class: "flex items-center relative w-full" }, ae = { class: "-mx-2" }, se = ["textContent"], le = {
+  ...V.props(),
+  ...Z.props("primary"),
+  ...P.props(),
+  ...b.props(),
+  min: Number,
+  max: Number,
+  step: {
+    type: Number,
+    default: 1
+  },
+  gradient: Boolean
+}, ne = {
+  name: "XSlider",
+  validators: {
+    ...V.validators()
+  }
+}, be = /* @__PURE__ */ j({
+  ...ne,
+  props: le,
+  emits: b.emits(!1),
+  setup(R, { expose: X, emit: L }) {
+    const d = R, x = L, v = u(null), o = u(null), n = u(null), t = u(Number(d.modelValue ?? 0)), { focus: p, blur: S } = P(v);
+    D(() => d.modelValue, (e) => {
+      t.value = Number(e ?? 0);
+    }), D(t, (e) => {
+      x("update:modelValue", e);
+    });
+    const a = u(), w = G(() => !!a.value);
+    function W(e) {
+      if (e.stopPropagation(), !o.value || !n.value)
+        return;
+      p();
+      const r = n.value.offsetWidth;
+      let s = Math.floor(e.offsetX * 100 / r);
+      s < 0 && (s = 0), s > 100 && (s = 100), t.value = s, setTimeout(() => {
+        var m;
+        a.value = {
+          x: e.x,
+          y: e.y,
+          maxWidth: r,
+          offsetX: (m = o.value) == null ? void 0 : m.offsetLeft
+        };
+      }), e.preventDefault(), e.stopPropagation();
+    }
+    function $(e) {
+      !o.value || !n.value || (p(), a.value = {
+        x: e.x,
+        y: e.y,
+        maxWidth: n.value.offsetWidth,
+        offsetX: o.value.offsetLeft
+      }, e.preventDefault(), e.stopPropagation());
+    }
+    function B(e) {
+      if (!a.value || !o.value)
+        return;
+      const { x: r, maxWidth: s, offsetX: m } = a.value, _ = e.x - r;
+      if (_ === 0)
+        return;
+      const K = m + _;
+      let i = Math.floor(K * 100 / s);
+      i < 0 && (i = 0), i > 100 && (i = 100), t.value = i, e.preventDefault(), e.stopPropagation();
+    }
+    function E(e) {
+      a.value && (a.value = void 0, e.preventDefault(), e.stopPropagation());
+    }
+    typeof window < "u" && (f(n, "pointerdown", W, !1), f(o, "pointerdown", $, !1), f(window, "pointermove", B, !0), f(window, "pointerup", E, !0)), f(v, "keydown", I);
+    function I(e) {
+      if (e.code === "ArrowLeft") {
+        const r = t.value - 1;
+        r >= 0 && (t.value = r), e.preventDefault();
+      } else if (e.code === "ArrowRight") {
+        const r = t.value + 1;
+        r <= 100 && (t.value = r), e.preventDefault();
+      }
+    }
+    const {
+      errorInternal: y,
+      reset: q,
+      validate: M,
+      setError: z,
+      isInsideForm: A
+    } = b(d, { focus: p, emit: x, withListeners: !1 }), { styles: T, classes: h, className: F } = ee("Slider", {}, d);
+    return X({ focus: p, blur: S, reset: q, validate: M, setError: z }), (e, r) => (k(), H(te, {
+      ref_key: "elRef",
+      ref: v,
+      tabindex: "0",
+      class: g(["group", [
+        l(F),
+        l(h).wrapper
+      ]]),
+      style: N(l(T)),
+      disabled: e.disabled,
+      required: e.required,
+      "is-inside-form": l(A),
+      label: e.label
+    }, {
+      default: J(() => [
+        c("div", oe, [
+          C(e.$slots, "prefix", { value: t.value }),
+          c("div", {
+            ref_key: "progressRef",
+            ref: n,
+            class: g([[w.value ? "cursor-grabbing" : "cursor-grab"], "relative w-full py-2 mx-2"])
+          }, [
+            c("div", ae, [
+              O(re, {
+                percentage: t.value,
+                animate: !1,
+                thick: "",
+                class: "w-full",
+                gradient: e.gradient
+              }, null, 8, ["percentage", "gradient"])
+            ]),
+            c("div", {
+              ref_key: "dragRef",
+              ref: o,
+              class: g(["absolute group-focus:border-[color:var(--x-slider-border)]", [
+                l(h).drag,
+                w.value ? "cursor-grabbing" : "cursor-grab"
+              ]]),
+              style: N(`left: ${t.value}%;`)
+            }, null, 6)
+          ], 2),
+          C(e.$slots, "suffix", { value: t.value })
+        ]),
+        l(y) ? (k(), Q("p", {
+          key: 0,
+          class: "text-sm text-red-500 mt-1",
+          textContent: U(l(y))
+        }, null, 8, se)) : Y("", !0)
+      ]),
+      _: 3
+    }, 8, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
+  }
+});
+export {
+  be as default
+};

package/lib/components/slider/Slider.vue2.js

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

package/lib/components/slider/__tests__/Slider.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/slider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as XSlider } from './Slider.vue';
+export type { SliderProps, SliderTheme } from './Slider.vue';

package/lib/components/slider/theme/Slider.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { SliderTheme } from '../Slider.vue';
+declare const theme: SliderTheme;
+export default theme;

package/lib/components/slider/theme/Slider.base.theme.js

@@ -0,0 +1,16 @@
+const o = {
+  classes: {
+    wrapper: "",
+    drag: "w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm"
+  },
+  styles: ({ props: t, colors: e, css: r }) => {
+    const a = e.getPalette("primary"), s = e.getPalette(t.color);
+    return r.variables({
+      bg: s[500],
+      border: a[500]
+    });
+  }
+}, l = o;
+export {
+  l as default
+};

package/lib/components/slider/theme/Slider.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { SliderTheme } from '../Slider.vue';
+declare const theme: SliderTheme;
+export default theme;

package/lib/components/slider/theme/Slider.carbon.theme.js

@@ -0,0 +1,16 @@
+const s = {
+  classes: {
+    wrapper: "",
+    drag: "w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900"
+  },
+  styles: ({ props: t, colors: e, css: r }) => {
+    const a = e.getPalette("primary"), l = e.getPalette(t.color);
+    return r.variables({
+      bg: l[500],
+      border: a[500]
+    });
+  }
+}, o = s;
+export {
+  o as default
+};

package/lib/components/spacer/Spacer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/lib/components/spacer/Spacer.js

@@ -0,0 +1,12 @@
+import { defineComponent as e, createVNode as r } from "vue";
+const t = /* @__PURE__ */ e({
+  name: "XSpacer",
+  setup() {
+    return () => r("div", {
+      class: "flex-grow"
+    }, null);
+  }
+});
+export {
+  t as default
+};

package/lib/components/spacer/__tests__/Spacer.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/spacer/index.d.ts

@@ -0,0 +1 @@
+export { default as XSpacer } from './Spacer';

package/lib/components/spinner/Spinner.vue.d.ts

@@ -0,0 +1,38 @@
+import type { ExtractPublicPropTypes } from 'vue';
+declare const spinnerProps: {
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type SpinnerProps = ExtractPublicPropTypes<typeof spinnerProps>;
+declare const _default: import("vue").DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>>, {
+    icon: string;
+    size: import("../../composables/useCommon").Size;
+}, {}>;
+export default _default;

package/lib/components/spinner/Spinner.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent as r, openBlock as e, createBlock as n } from "vue";
+import { useCommon as t } from "../../composables/useCommon.js";
+import a from "../icon/Icon.vue.js";
+const i = {
+  ...t.props(),
+  icon: {
+    type: String,
+    default: '<g stroke-width="0"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.65s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g>'
+  }
+}, p = {
+  name: "XSpinner",
+  validators: {
+    ...t.validators()
+  }
+}, u = /* @__PURE__ */ r({
+  ...p,
+  props: i,
+  setup(s) {
+    return (o, m) => (e(), n(a, {
+      icon: o.icon,
+      size: o.size
+    }, null, 8, ["icon", "size"]));
+  }
+});
+export {
+  u as default
+};

package/lib/components/spinner/Spinner.vue2.js

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

package/lib/components/spinner/__tests__/Spinner.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as XSpinner } from './Spinner.vue';
+export type { SpinnerProps } from './Spinner.vue';

package/lib/components/stepper/Stepper.vue.d.ts

@@ -0,0 +1,137 @@
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const validators: {
+    variant: readonly ["line"];
+    size: string[];
+};
+declare const stepperProps: {
+    modelValue: (StringConstructor | NumberConstructor)[];
+    steps: {
+        type: PropType<StepperStep[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<"line">;
+        default: string;
+    };
+    grow: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconPristine: StringConstructor;
+    iconComplete: StringConstructor;
+    iconIncomplete: StringConstructor;
+    iconCurrent: StringConstructor;
+    iconError: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type StepperStepStatus = 'pristine' | 'complete' | 'incomplete' | 'error';
+export type StepperStep = {
+    status: StepperStepStatus;
+    label: string;
+    description: string;
+    disabled?: boolean;
+};
+export type StepperVariant = typeof validators.variant[number];
+export type StepperProps = ExtractPublicPropTypes<typeof stepperProps>;
+type InternalClasses = 'wrapper' | 'list' | 'scroller' | 'content' | 'step' | 'label' | 'icon';
+export interface StepperTheme extends ThemeComponent<StepperProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    steps: {
+        type: PropType<StepperStep[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<"line">;
+        default: string;
+    };
+    grow: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconPristine: StringConstructor;
+    iconComplete: StringConstructor;
+    iconIncomplete: StringConstructor;
+    iconCurrent: StringConstructor;
+    iconError: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    steps: {
+        type: PropType<StepperStep[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<"line">;
+        default: string;
+    };
+    grow: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconPristine: StringConstructor;
+    iconComplete: StringConstructor;
+    iconIncomplete: StringConstructor;
+    iconCurrent: StringConstructor;
+    iconError: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: string;
+    size: import("../../composables/useCommon").Size;
+    variant: "line";
+    steps: StepperStep[];
+    grow: boolean;
+    fullWidth: boolean;
+    interactive: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};