@type-dom/ui 0.6.0 → 0.6.1

package/dist/components/form/td-color-picker-panel/components/hue-slider.js

@@ -0,0 +1,122 @@
+import { getCurrentInstance, onMounted, watch, Div, addAttrClass } from '@type-dom/framework';
+import { computed, signal } from '@type-dom/signals';
+import { getClientXY } from '@type-dom/utils';
+import { useNamespace } from '../../../../hooks/use-namespace';
+import { draggable } from '../utils/draggable';
+export class TdColorHueSlider extends Div {
+    update;
+    constructor(params = {}) {
+        super(params);
+    }
+    setup() {
+        const props = this.props;
+        const ns = useNamespace('color-hue-slider');
+        const instance = getCurrentInstance();
+        // ref
+        const thumb = signal();
+        const bar = signal();
+        // data
+        const thumbLeft = signal(0);
+        const thumbTop = signal(0);
+        // computed
+        const hueValue = computed(() => {
+            return props.color?.get('hue');
+        });
+        // watch
+        watch(() => hueValue.get(), () => {
+            update();
+        });
+        // methods
+        function handleClick(event) {
+            if (!event || props.disabled)
+                return;
+            const target = event?.target;
+            if (target !== thumb.get()) {
+                handleDrag(event);
+            }
+        }
+        function handleDrag(event) {
+            if (!bar.get() || !thumb.get() || props.disabled)
+                return;
+            const el = instance.dom;
+            const rect = el.getBoundingClientRect();
+            const { clientX, clientY } = getClientXY(event);
+            let hue;
+            if (!props.vertical) {
+                let left = clientX - rect.left;
+                left = Math.min(left, rect.width - thumb.get().offsetWidth / 2);
+                left = Math.max(thumb.get().offsetWidth / 2, left);
+                hue = Math.round(((left - thumb.get().offsetWidth / 2) / (rect.width - thumb.get().offsetWidth)) * 360);
+            }
+            else {
+                let top = clientY - rect.top;
+                top = Math.min(top, rect.height - thumb.get().offsetHeight / 2);
+                top = Math.max(thumb.get().offsetHeight / 2, top);
+                hue = Math.round(((top - thumb.get().offsetHeight / 2) / (rect.height - thumb.get().offsetHeight)) * 360);
+            }
+            props.color?.set('hue', hue);
+        }
+        function getThumbLeft() {
+            // console.warn('getThumbLeft . ');
+            if (!thumb.get())
+                return 0;
+            const el = instance.dom;
+            if (props.vertical)
+                return 0;
+            const hue = props.color?.get('hue');
+            if (!el)
+                return 0;
+            return Math.round((hue * (el.offsetWidth - thumb.get().offsetWidth / 2)) / 360);
+        }
+        function getThumbTop() {
+            // console.warn('getThumbTop . ');
+            if (!thumb.get())
+                return 0;
+            const el = instance.dom;
+            if (!props.vertical)
+                return 0;
+            const hue = props.color?.get('hue');
+            if (!el)
+                return 0;
+            return Math.round((hue * (el.offsetHeight - thumb.get().offsetHeight / 2)) / 360);
+        }
+        function update() {
+            // console.warn('update . ');
+            thumbLeft.set(getThumbLeft());
+            // console.warn('getThumbTop() is ', getThumbTop())
+            thumbTop.set(getThumbTop());
+        }
+        // mounded
+        onMounted(() => {
+            // console.warn('onMounted . ');
+            if (!bar.get() || !thumb.get())
+                return;
+            const dragConfig = {
+                drag: (event) => {
+                    handleDrag(event);
+                },
+                end: (event) => {
+                    handleDrag(event);
+                },
+            };
+            draggable(bar.get(), dragConfig);
+            draggable(thumb.get(), dragConfig);
+            update();
+        });
+        this.update = update;
+        addAttrClass(this, [ns.b(), ns.is('vertical', props.vertical)]);
+        this.addChildren(new Div({
+            refDom: bar,
+            class: [ns.e('bar')],
+            onClick: handleClick,
+        }), new Div({
+            refDom: thumb,
+            class: [ns.e('thumb')],
+            styleObj: {
+                left: computed(() => `${thumbLeft.get()}px`),
+                top: computed(() => `${thumbTop.get()}px`),
+            },
+        }));
+    }
+}
+//# sourceMappingURL=hue-slider.js.map

package/dist/components/form/td-color-picker-panel/components/hue-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hue-slider.js","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/components/hue-slider.ts"],"names":[],"mappings":"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"}

package/dist/components/form/td-color-picker-panel/components/predefine.d.ts

@@ -0,0 +1,7 @@
+import { Fragment } from '@type-dom/framework';
+import { PredefineProps } from '../props/predefine';
+export declare class Predefine extends Fragment<PredefineProps> {
+    constructor(params?: PredefineProps);
+    setup(): void;
+}
+//# sourceMappingURL=predefine.d.ts.map

package/dist/components/form/td-color-picker-panel/components/predefine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"predefine.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/components/predefine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,QAAQ,EAAsB,MAAM,qBAAqB,CAAC;AAKhF,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,qBAAa,SAAU,SAAQ,QAAQ,CAAC,cAAc,CAAC;gBACzC,MAAM,GAAE,cAAmB;IAI9B,KAAK;CAgFf"}

package/dist/components/form/td-color-picker-panel/components/predefine.js

@@ -0,0 +1,80 @@
+import { inject, Div, Fragment, watch, Button } from '@type-dom/framework';
+import { signal, computed } from '@type-dom/signals';
+import { useNamespace } from '../../../../hooks/use-namespace';
+import Color from '../utils/color';
+import { colorPickerPanelContextKey } from '../td-color-picker-panel.const';
+export class Predefine extends Fragment {
+    constructor(params = {}) {
+        super(params);
+        // defaultProps(this, predefineProps);
+    }
+    setup() {
+        const props = this.props;
+        const ns = useNamespace('color-predefine');
+        const context = inject(colorPickerPanelContextKey);
+        const currentColor = context?.currentColor || signal('');
+        const rgbaColors = signal(parseColors(props.colors, props.color));
+        watch(() => currentColor.get(), (val) => {
+            const color = new Color();
+            color.fromString(val);
+            rgbaColors.get()?.forEach((item) => {
+                item.selected?.set(color.compare(item));
+            });
+        });
+        // effect(() => {
+        //   console.warn('Predefine . effect . ')
+        //   // rgbaColors.set(parseColors(props.colors, props.color) ?? [])
+        // })
+        function handleSelect(index) {
+            props.color?.fromString(props.colors[index]);
+        }
+        function parseColors(colors, color) {
+            // console.warn('parseColors . ')
+            return colors?.map((value) => {
+                const c = new Color();
+                c.enableAlpha.set(!!props.enableAlpha);
+                c.format.set('rgba');
+                c.fromString(value);
+                c.selected?.set(c.value.get() === color?.value.get());
+                return c;
+            });
+        }
+        this.addChild(new Div({
+            class: ns.b(),
+            slot: new Div({
+                class: ns.e('colors'),
+                slot: new Button({
+                    // EP: <button v-for="(item, index) in rgbaColors" :key="item.value"
+                    //   :disabled="disabled" :aria-label="`predefine color ${item.value}`"
+                    //   type="button" @click="handleSelect(index)">
+                    // `rgbaColors` is a signal - passing it as the `vFor` source keeps the
+                    // list reactive to color/selection changes. The `vFor` host is a
+                    // `<button>` so every swatch stays keyboard-accessible.
+                    vFor: {
+                        data: rgbaColors,
+                        key: 'value',
+                        toParams: (item, index) => ({
+                            class: computed(() => [
+                                ns.e('color-selector'),
+                                ns.is('alpha', item._alpha.get() < 100),
+                                { selected: item.selected?.get() },
+                            ]),
+                            onClick: () => handleSelect(index),
+                            attrObj: {
+                                'aria-label': `predefine color ${item.value?.get()}`,
+                                type: 'button',
+                                ...(props.disabled ? { disabled: true } : {}),
+                            },
+                            slot: new Div({
+                                styleObj: {
+                                    backgroundColor: item.value?.get(),
+                                },
+                            }),
+                        }),
+                    },
+                }),
+            }),
+        }));
+    }
+}
+//# sourceMappingURL=predefine.js.map

package/dist/components/form/td-color-picker-panel/components/predefine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"predefine.js","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/components/predefine.ts"],"names":[],"mappings":"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"}

package/dist/components/form/td-color-picker-panel/components/sv-panel.d.ts

@@ -0,0 +1,8 @@
+import { Div } from '@type-dom/framework';
+import { SvPanelProps } from '../props/sv-panel';
+export declare class SvPanel extends Div<SvPanelProps> {
+    update?: () => void;
+    constructor(params?: SvPanelProps);
+    setup(): void;
+}
+//# sourceMappingURL=sv-panel.d.ts.map

package/dist/components/form/td-color-picker-panel/components/sv-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-panel.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/components/sv-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,GAAG,EACJ,MAAM,qBAAqB,CAAC;AAK7B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,qBAAa,OAAQ,SAAQ,GAAG,CAAC,YAAY,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;gBAER,MAAM,GAAE,YAAiB;IAI5B,KAAK;CAiGf"}

package/dist/components/form/td-color-picker-panel/components/sv-panel.js

@@ -0,0 +1,94 @@
+import { getCurrentInstance, onMounted, watch, addAttrClass, addStyleObj, 
+// DivProps,
+Div, } from '@type-dom/framework';
+import { computed, signal } from '@type-dom/signals';
+import { getClientXY } from '@type-dom/utils';
+import { useNamespace } from '../../../../hooks/use-namespace/index';
+import { draggable } from '../utils/draggable';
+export class SvPanel extends Div {
+    update;
+    constructor(params = {}) {
+        super(params);
+        // defaultProps(this, svPanelProps);
+    }
+    setup() {
+        const props = this.props;
+        const ns = useNamespace('color-svpanel');
+        // instance
+        const instance = getCurrentInstance();
+        // data
+        const cursorTop = signal(0);
+        const cursorLeft = signal(0);
+        const background = signal('hsl(0, 100%, 50%)');
+        const colorValue = computed(() => {
+            const hue = props.color?.get('hue');
+            const value = props.color?.get('value');
+            return { hue, value };
+        });
+        // methods
+        function update() {
+            const saturation = props.color?.get('saturation');
+            const value = props.color?.get('value');
+            const el = instance.dom;
+            if (!el)
+                return;
+            const { clientWidth: width, clientHeight: height } = el;
+            cursorLeft.set((saturation * width) / 100);
+            cursorTop.set(((100 - value) * height) / 100);
+            background.set(`hsl(${props.color?.get('hue')}, 100%, 50%)`);
+        }
+        function handleDrag(event) {
+            if (props.disabled)
+                return;
+            const el = instance.dom;
+            const rect = el.getBoundingClientRect();
+            const { clientX, clientY } = getClientXY(event);
+            let left = clientX - rect.left;
+            let top = clientY - rect.top;
+            left = Math.max(0, left);
+            left = Math.min(left, rect.width);
+            top = Math.max(0, top);
+            top = Math.min(top, rect.height);
+            cursorLeft.set(left);
+            cursorTop.set(top);
+            props.color?.set({
+                saturation: (left / rect.width) * 100,
+                value: 100 - (top / rect.height) * 100,
+            });
+        }
+        // watch
+        watch(() => colorValue.get(), () => {
+            update();
+        });
+        // mounted
+        onMounted(() => {
+            draggable(instance.dom, {
+                drag: (event) => {
+                    handleDrag(event);
+                },
+                end: (event) => {
+                    handleDrag(event);
+                },
+            });
+            update();
+        });
+        this.update = update;
+        addAttrClass(this, ns.b());
+        addStyleObj(this, {
+            backgroundColor: background,
+        });
+        this.addChildren(new Div({
+            class: ns.e('white'),
+        }), new Div({
+            class: ns.e('black'),
+        }), new Div({
+            class: ns.e('cursor'),
+            styleObj: {
+                top: computed(() => cursorTop.get() + 'px'),
+                left: computed(() => cursorLeft.get() + 'px'),
+            },
+            slot: new Div(),
+        }));
+    }
+}
+//# sourceMappingURL=sv-panel.js.map

package/dist/components/form/td-color-picker-panel/components/sv-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-panel.js","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/components/sv-panel.ts"],"names":[],"mappings":"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"}

package/dist/components/form/td-color-picker-panel/composables/use-common-color.d.ts

@@ -0,0 +1,14 @@
+import Color from '../utils/color';
+import { UPDATE_MODEL_EVENT } from '../../../../constants';
+import { Signal } from '@type-dom/signals';
+type CommonColorProps = {
+    vModel?: Signal<string | null>;
+    showAlpha: boolean;
+    colorFormat?: string;
+};
+type CommonColorEmits = (event: typeof UPDATE_MODEL_EVENT, val: string) => void;
+export declare const useCommonColor: <P extends CommonColorProps, E extends CommonColorEmits>(props: P, emit: E) => {
+    color: Color;
+};
+export {};
+//# sourceMappingURL=use-common-color.d.ts.map

package/dist/components/form/td-color-picker-panel/composables/use-common-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-common-color.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/composables/use-common-color.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,KAAK,gBAAgB,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAGF,KAAK,gBAAgB,GAAG,CAAC,KAAK,EAAE,OAAO,kBAAkB,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;AAEhF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,gBAAgB,EAAE,CAAC,SAAS,gBAAgB,EACnF,OAAO,CAAC,EACR,MAAM,CAAC;;CA6BR,CAAC"}

package/dist/components/form/td-color-picker-panel/composables/use-common-color.js

@@ -0,0 +1,35 @@
+/**
+ * useCommonColor - 颜色选择器通用逻辑
+ *
+ * Vue 原版: packages/components/color-picker-panel/src/composables/use-common-color.ts
+ *
+ * 转换要点:
+ * - Vue: reactive(new Color()) → TypeDOM: new Color() (Color 内部已使用 signal)
+ * - Vue: color.prop = value → TypeDOM: color.prop.set(value)
+ * - Vue: color.prop → TypeDOM: color.prop.get()
+ */
+import { watch } from '@type-dom/framework';
+import Color from '../utils/color';
+import { UPDATE_MODEL_EVENT } from '../../../../constants';
+export const useCommonColor = (props, emit) => {
+    // Vue: const color = reactive(new Color({...})) as Color
+    // TypeDOM: Color 类内部已使用 signal 管理状态，无需 reactive 包装
+    const color = new Color({
+        enableAlpha: props.showAlpha,
+        format: props.colorFormat || '',
+        value: props.vModel?.get() || undefined,
+    });
+    watch(() => [props.colorFormat, props.showAlpha], () => {
+        // Vue: color.enableAlpha = props.showAlpha
+        color.enableAlpha.set(props.showAlpha);
+        // Vue: color.format = props.colorFormat || color.format
+        color.format.set(props.colorFormat || color.format.get());
+        color.doOnChange();
+        // Vue: emit(UPDATE_MODEL_EVENT, color.value)
+        emit(UPDATE_MODEL_EVENT, color.value.get());
+    });
+    return {
+        color,
+    };
+};
+//# sourceMappingURL=use-common-color.js.map

package/dist/components/form/td-color-picker-panel/composables/use-common-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-common-color.js","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/composables/use-common-color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAY3D,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAQ,EACR,IAAO,EACP,EAAE;IACF,yDAAyD;IACzD,mDAAmD;IACnD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC;QACtB,WAAW,EAAE,KAAK,CAAC,SAAS;QAC5B,MAAM,EAAE,KAAK,CAAC,WAAW,IAAI,EAAE;QAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,SAAS;KACxC,CAAC,CAAC;IAEH,KAAK,CACH,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,EAC1C,GAAG,EAAE;QACH,2CAA2C;QAC3C,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAEvC,wDAAwD;QACxD,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;QAE1D,KAAK,CAAC,UAAU,EAAE,CAAC;QAEnB,6CAA6C;QAC7C,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9C,CAAC,CACF,CAAC;IAEF,OAAO;QACL,KAAK;KACN,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/form/td-color-picker-panel/composables/use-predefine.d.ts

@@ -0,0 +1,15 @@
+import Color from '../utils/color';
+import type { Signal } from '@type-dom/signals';
+import type { PredefineProps } from '../props/predefine';
+export declare const usePredefine: (props: PredefineProps) => {
+    rgbaColors: Signal<Color[]>;
+    handleSelect: (index: number) => void;
+};
+export declare const usePredefineDOM: (props: PredefineProps) => {
+    rootKls: import("@type-dom/signals").Computed<string[]>;
+    colorsKls: import("@type-dom/signals").Computed<string>;
+    colorSelectorKls: (item: Color) => (string | {
+        selected: boolean;
+    })[];
+};
+//# sourceMappingURL=use-predefine.d.ts.map

package/dist/components/form/td-color-picker-panel/composables/use-predefine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-predefine.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/composables/use-predefine.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAEnC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,YAAY,GAAI,OAAO,cAAc;;0BAwBnB,MAAM;CAmBpC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,cAAc;;;6BAOnB,KAAK;;;CAatC,CAAC"}

package/dist/components/form/td-color-picker-panel/composables/use-predefine.js

@@ -0,0 +1,57 @@
+import { inject, watch } from '@type-dom/framework';
+import { computed, effect, signal } from '@type-dom/signals';
+import { useNamespace } from '../../../../hooks/use-namespace';
+import { colorPickerPanelContextKey } from '../td-color-picker-panel.const';
+import Color from '../utils/color';
+export const usePredefine = (props) => {
+    const context = inject(colorPickerPanelContextKey);
+    const currentColor = context?.currentColor || signal('');
+    const rgbaColors = signal(parseColors(props.colors || [], props.color));
+    watch(() => currentColor.get(), (val) => {
+        const color = new Color({
+            value: val,
+            enableAlpha: props.enableAlpha || false,
+        });
+        rgbaColors.get()?.forEach((item) => {
+            item.selected?.set(color.compare(item));
+        });
+    });
+    effect(() => {
+        rgbaColors.set(parseColors(props.colors || [], props.color));
+    });
+    function handleSelect(index) {
+        props.color?.fromString(props.colors?.[index] || '');
+    }
+    function parseColors(colors, color) {
+        return colors.map((value) => {
+            const c = new Color({
+                value,
+                enableAlpha: props.enableAlpha || false,
+            });
+            c.selected?.set(c.compare(color));
+            return c;
+        });
+    }
+    return {
+        rgbaColors,
+        handleSelect,
+    };
+};
+export const usePredefineDOM = (props) => {
+    const ns = useNamespace('color-predefine');
+    const rootKls = computed(() => [ns.b(), ns.is('disabled', props.disabled)]);
+    const colorsKls = computed(() => ns.e('colors'));
+    function colorSelectorKls(item) {
+        return [
+            ns.e('color-selector'),
+            ns.is('alpha', item.get('alpha') < 100),
+            { selected: item.selected?.get() },
+        ];
+    }
+    return {
+        rootKls,
+        colorsKls,
+        colorSelectorKls,
+    };
+};
+//# sourceMappingURL=use-predefine.js.map

package/dist/components/form/td-color-picker-panel/composables/use-predefine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-predefine.js","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/composables/use-predefine.ts"],"names":[],"mappings":"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"}

package/dist/components/form/td-color-picker-panel/composables/use-slider.d.ts

@@ -0,0 +1,36 @@
+import type { AlphaSliderProps } from '../props/alpha-slider';
+interface UseSliderOptions {
+    key: 'hue' | 'alpha';
+    minValue: number;
+    maxValue: number;
+}
+export declare const useSlider: (props: AlphaSliderProps, { key, minValue, maxValue }: UseSliderOptions) => {
+    thumb: import("@type-dom/signals").Signal<HTMLElement>;
+    bar: import("@type-dom/signals").Signal<HTMLElement>;
+    currentValue: import("@type-dom/signals").Computed<string | number | boolean | undefined>;
+    handleDrag: (event: MouseEvent | TouchEvent) => void;
+    handleClick: (event: MouseEvent | TouchEvent) => void;
+    handleKeydown: (event: KeyboardEvent) => void;
+};
+interface UseSliderDOMOptions extends Pick<ReturnType<typeof useSlider>, 'bar' | 'thumb' | 'currentValue' | 'handleDrag'> {
+    namespace: string;
+    maxValue: number;
+    getBackground?: () => string;
+}
+export declare const useSliderDOM: (props: AlphaSliderProps, { namespace, maxValue, bar, thumb, currentValue, handleDrag, getBackground }: UseSliderDOMOptions) => {
+    rootKls: import("@type-dom/signals").Computed<string[]>;
+    barKls: import("@type-dom/signals").Computed<string>;
+    barStyle: import("@type-dom/signals").Computed<{
+        background: string;
+    }>;
+    thumbKls: import("@type-dom/signals").Computed<string>;
+    thumbStyle: import("@type-dom/signals").Computed<{
+        left: string;
+        top: string;
+    }>;
+    thumbLeft: import("@type-dom/signals").Signal<number>;
+    thumbTop: import("@type-dom/signals").Signal<number>;
+    update: () => void;
+};
+export {};
+//# sourceMappingURL=use-slider.d.ts.map

package/dist/components/form/td-color-picker-panel/composables/use-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-slider.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/td-color-picker-panel/composables/use-slider.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D,UAAU,gBAAgB;IACxB,GAAG,EAAE,KAAK,GAAG,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,GACpB,OAAO,gBAAgB,EACvB,6BAA6B,gBAAgB;;;;wBAmBlB,UAAU,GAAG,UAAU;yBAVtB,UAAU,GAAG,UAAU;2BAwCrB,aAAa;CAoD5C,CAAC;AAEF,UAAU,mBAAoB,SAAQ,IAAI,CACxC,UAAU,CAAC,OAAO,SAAS,CAAC,EAC5B,KAAK,GAAG,OAAO,GAAG,cAAc,GAAG,YAAY,CAChD;IACC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,GACvB,OAAO,gBAAgB,EACvB,8EAA8E,mBAAmB;;;;;;;;;;;;;;CAoFlG,CAAC"}