lightview 1.8.1-b → 2.0.0

package/components/data-input/range.js

@@ -0,0 +1,204 @@
+/**
+ * Lightview Components - Range
+ * A range slider component using DaisyUI 5 styling
+ * @see https://daisyui.com/components/range/
+ * 
+ * Uses DaisyUI's fieldset pattern for labeled ranges:
+ * <fieldset class="fieldset">
+ *     <legend class="fieldset-legend">Label</legend>
+ *     <input type="range" class="range" />
+ *     <p class="label">Helper</p>
+ * </fieldset>
+ */
+
+import '../daisyui.js';
+
+/**
+ * Range Component
+ * @param {Object} props - Range properties
+ * @param {number|Signal} props.value - Current value (controlled)
+ * @param {number} props.defaultValue - Default value (uncontrolled)
+ * @param {number} props.min - Minimum value (default: 0)
+ * @param {number} props.max - Maximum value (default: 100)
+ * @param {number} props.step - Step increment (default: 1)
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
+ * @param {string} props.color - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+ * @param {boolean} props.disabled - Disable range
+ * @param {string} props.label - Label text
+ * @param {string} props.helper - Helper text
+ * @param {boolean} props.showValue - Show current value display
+ * @param {Function} props.formatValue - Format function for displayed value
+ * @param {Function} props.onChange - Change handler
+ * @param {boolean} props.useShadow - Render in Shadow DOM
+ */
+const Range = (props = {}) => {
+    const { tags, signal } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) {
+        console.error('Lightview not found');
+        return null;
+    }
+
+    const { div, input, fieldset, legend, p, span, shadowDOM } = tags;
+
+    const {
+        value,
+        defaultValue = 0,
+        min = 0,
+        max = 100,
+        step = 1,
+        size = 'md',
+        color,
+        disabled = false,
+        label: labelText,
+        helper,
+        showValue = false,
+        formatValue = (v) => v,
+        onChange,
+        name,
+        id,
+        class: className = '',
+        useShadow,
+        ...rest
+    } = props;
+
+    const rangeId = id || `range-${Math.random().toString(36).slice(2, 9)}`;
+
+    // Internal state
+    const internalValue = signal ? signal(defaultValue) : { value: defaultValue };
+
+    const isControlled = value !== undefined;
+
+    const getValue = () => {
+        if (isControlled) {
+            return typeof value === 'function' ? value() :
+                (value && typeof value.value !== 'undefined') ? value.value : value;
+        }
+        return internalValue.value;
+    };
+
+    const handleInput = (e) => {
+        const newValue = Number(e.target.value);
+
+        if (!isControlled) {
+            internalValue.value = newValue;
+        }
+
+        if (isControlled && value && typeof value.value !== 'undefined') {
+            value.value = newValue;
+        }
+
+        if (onChange) onChange(newValue, e);
+    };
+
+    // Build DaisyUI range classes
+    const getRangeClass = () => {
+        const classes = ['range', 'w-full'];
+
+        if (size && size !== 'md') {
+            classes.push(`range-${size}`);
+        }
+
+        if (color) {
+            classes.push(`range-${color}`);
+        }
+
+        return classes.join(' ');
+    };
+
+    const rangeInput = input({
+        type: 'range',
+        class: getRangeClass(),
+        value: isControlled
+            ? (typeof value === 'function' ? value : () => getValue())
+            : () => internalValue.value,
+        min,
+        max,
+        step,
+        disabled: typeof disabled === 'function' ? disabled : disabled,
+        name,
+        id: rangeId,
+        oninput: handleInput,
+        ...rest
+    });
+
+    // If no label and no showValue, return just the range
+    if (!labelText && !showValue && !helper) {
+        // Check if we should use shadow DOM
+        let usesShadow = false;
+        if (LVX.shouldUseShadow) {
+            usesShadow = LVX.shouldUseShadow(useShadow);
+        } else {
+            usesShadow = useShadow === true;
+        }
+
+        if (usesShadow) {
+            const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+            const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+            return div({ class: 'content', style: 'display: inline-block' },
+                shadowDOM({ mode: 'open', adoptedStyleSheets },
+                    div({ 'data-theme': themeValue }, rangeInput)
+                )
+            );
+        }
+
+        return rangeInput;
+    }
+
+    // Build the component using DaisyUI fieldset pattern
+    const fieldsetContent = [];
+
+    // Legend/Label with optional value display
+    if (labelText || showValue) {
+        fieldsetContent.push(
+            div({ class: 'flex justify-between items-center mb-1' },
+                labelText ? legend({ class: 'fieldset-legend' }, labelText) : span(),
+                showValue ? span({ class: 'text-sm font-mono opacity-70' },
+                    () => formatValue(getValue())
+                ) : null
+            )
+        );
+    }
+
+    // Range input
+    fieldsetContent.push(rangeInput);
+
+    // Helper text
+    if (helper) {
+        fieldsetContent.push(p({ class: 'label' }, helper));
+    }
+
+    // Wrapper
+    const wrapperEl = fieldset({
+        class: `fieldset ${className}`.trim()
+    }, ...fieldsetContent);
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return span({ style: 'margin-right: 0.5rem' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue, style: 'display: inline-block' }, wrapperEl)
+            )
+        );
+    }
+
+    return wrapperEl;
+};
+
+// Auto-register
+window.Lightview.tags.Range = Range;
+
+export default Range;

package/components/data-input/rating.js

@@ -0,0 +1,219 @@
+/**
+ * Lightview Components - Rating
+ * A rating component using DaisyUI 5 styling
+ * @see https://daisyui.com/components/rating/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Rating Component
+ * @param {Object} props - Rating properties
+ * @param {number|Signal} props.value - Current rating value (controlled)
+ * @param {number} props.defaultValue - Default rating value (uncontrolled)
+ * @param {number} props.max - Maximum stars (default: 5)
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {boolean} props.half - Allow half stars
+ * @param {string} props.color - Color for stars (default: 'orange-400')
+ * @param {string} props.mask - 'star' | 'star-2' | 'heart' | 'circle' | 'square' | 'diamond' (default: 'star-2')
+ * @param {boolean} props.hidden - Include hidden 0-star option for clearing
+ * @param {boolean} props.disabled - Disable rating
+ * @param {boolean} props.readOnly - Make read-only (just display)
+ * @param {string} props.label - Label text
+ * @param {string} props.helper - Helper text
+ * @param {Function} props.onChange - Change handler
+ * @param {boolean} props.useShadow - Render in Shadow DOM
+ */
+const Rating = (props = {}) => {
+    const { tags, signal } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) {
+        console.error('Lightview not found');
+        return null;
+    }
+
+    const { div, input, fieldset, legend, p, span, shadowDOM } = tags;
+
+    const {
+        value,
+        defaultValue = 0,
+        max = 5,
+        size,
+        half = false,
+        color = 'orange-400',
+        mask = 'star-2',
+        hidden = false,
+        disabled = false,
+        readOnly = false,
+        label: labelText,
+        helper,
+        name = `rating-${Math.random().toString(36).slice(2, 9)}`,
+        onChange,
+        class: className = '',
+        useShadow,
+        ...rest
+    } = props;
+
+    // Internal state
+    const internalValue = signal ? signal(defaultValue) : { value: defaultValue };
+
+    const isControlled = value !== undefined;
+
+    const getValue = () => {
+        if (isControlled) {
+            return typeof value === 'function' ? value() :
+                (value && typeof value.value !== 'undefined') ? value.value : value;
+        }
+        return internalValue.value;
+    };
+
+    const handleChange = (rating) => {
+        if (readOnly || disabled) return;
+
+        if (!isControlled) {
+            internalValue.value = rating;
+        }
+
+        if (isControlled && value && typeof value.value !== 'undefined') {
+            value.value = rating;
+        }
+
+        if (onChange) onChange(rating);
+    };
+
+    // Build rating classes
+    const getRatingClass = () => {
+        const classes = ['rating'];
+        if (size) classes.push(`rating-${size}`);
+        if (half) classes.push('rating-half');
+        return classes.join(' ');
+    };
+
+    const bgClass = `bg-${color}`;
+
+    // Build rating inputs
+    const buildInputs = () => {
+        const inputs = [];
+        const currentValue = getValue();
+
+        if (hidden) {
+            inputs.push(input({
+                type: 'radio',
+                name,
+                class: 'rating-hidden',
+                checked: () => getValue() === 0,
+                disabled,
+                onchange: () => handleChange(0)
+            }));
+        }
+
+        for (let i = 1; i <= max; i++) {
+            if (half) {
+                // Half stars
+                inputs.push(input({
+                    type: 'radio',
+                    name,
+                    class: `mask mask-${mask} mask-half-1 ${bgClass}`,
+                    'aria-label': `${i - 0.5} stars`,
+                    checked: () => getValue() === i - 0.5,
+                    disabled,
+                    onchange: () => handleChange(i - 0.5)
+                }));
+                inputs.push(input({
+                    type: 'radio',
+                    name,
+                    class: `mask mask-${mask} mask-half-2 ${bgClass}`,
+                    'aria-label': `${i} stars`,
+                    checked: () => getValue() === i,
+                    disabled,
+                    onchange: () => handleChange(i)
+                }));
+            } else {
+                inputs.push(input({
+                    type: 'radio',
+                    name,
+                    class: `mask mask-${mask} ${bgClass}`,
+                    'aria-label': `${i} stars`,
+                    checked: () => getValue() === i,
+                    disabled,
+                    onchange: () => handleChange(i)
+                }));
+            }
+        }
+
+        return inputs;
+    };
+
+    const ratingEl = div({
+        class: getRatingClass(),
+        ...rest
+    }, ...buildInputs());
+
+    // If no label and no helper, return just the rating
+    if (!labelText && !helper) {
+        let usesShadow = false;
+        if (LVX.shouldUseShadow) {
+            usesShadow = LVX.shouldUseShadow(useShadow);
+        } else {
+            usesShadow = useShadow === true;
+        }
+
+        if (usesShadow) {
+            const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+            const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+            return div({ class: 'content', style: 'display: inline-block' },
+                shadowDOM({ mode: 'open', adoptedStyleSheets },
+                    div({ 'data-theme': themeValue }, ratingEl)
+                )
+            );
+        }
+
+        return ratingEl;
+    }
+
+    // Build with fieldset pattern
+    const fieldsetContent = [];
+
+    if (labelText) {
+        fieldsetContent.push(legend({ class: 'fieldset-legend' }, labelText));
+    }
+
+    fieldsetContent.push(ratingEl);
+
+    if (helper) {
+        fieldsetContent.push(p({ class: 'label' }, helper));
+    }
+
+    const wrapperEl = fieldset({
+        class: `fieldset ${className}`.trim()
+    }, ...fieldsetContent);
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return span({ style: 'margin-right: 0.5rem' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue, style: 'display: inline-block' }, wrapperEl)
+            )
+        );
+    }
+
+    return wrapperEl;
+};
+
+// Auto-register
+window.Lightview.tags.Rating = Rating;
+
+export default Rating;

package/components/data-input/select.js

@@ -0,0 +1,287 @@
+/**
+ * Lightview Components - Select
+ * A select dropdown component using DaisyUI 5 styling with validation support
+ * @see https://daisyui.com/components/select/
+ * 
+ * Uses DaisyUI's fieldset pattern:
+ * <fieldset class="fieldset">
+ *     <legend class="fieldset-legend">Label</legend>
+ *     <select class="select" />
+ *     <p class="label">Helper text</p>
+ * </fieldset>
+ */
+
+import '../daisyui.js';
+
+/**
+ * Select Component
+ * @param {Object} props - Select properties
+ * @param {Array} props.options - Array of options: string[] or {value, label, disabled}[]
+ * @param {*|Signal} props.value - Selected value (controlled)
+ * @param {*} props.defaultValue - Default value (uncontrolled)
+ * @param {string} props.placeholder - Placeholder text (shows as disabled first option)
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
+ * @param {string} props.color - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+ * @param {boolean} props.ghost - Ghost style (no background)
+ * @param {boolean} props.disabled - Disable select
+ * @param {boolean} props.required - Required field
+ * @param {string} props.label - Label text (rendered as fieldset legend)
+ * @param {string} props.helper - Helper text (rendered below select)
+ * @param {string|Function} props.error - Error message (string or validation function)
+ * @param {Function} props.validate - Validation function (value) => errorMessage | null
+ * @param {Function} props.onChange - Change handler
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Select = (props = {}) => {
+    const { tags, signal } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) {
+        console.error('Lightview not found');
+        return null;
+    }
+
+    const { div, select, option, fieldset, legend, p, span, shadowDOM } = tags;
+
+    const {
+        options = [],
+        value,
+        defaultValue = '',
+        placeholder,
+        size = 'md',
+        color,
+        ghost = false,
+        disabled = false,
+        required = false,
+        label: labelText,
+        helper,
+        error,
+        validate,
+        onChange,
+        name,
+        id,
+        class: className = '',
+        useShadow,
+        ...rest
+    } = props;
+
+    // Generate unique ID if not provided
+    const selectId = id || `select-${Math.random().toString(36).slice(2, 9)}`;
+    const selectName = name || selectId;
+
+    // Internal state
+    const internalValue = signal ? signal(defaultValue) : { value: defaultValue };
+    const internalError = signal ? signal(null) : { value: null };
+    const touched = signal ? signal(false) : { value: false };
+
+    const isControlled = value !== undefined;
+
+    // Normalize options - first parse from JSON string if needed (from HTML attribute)
+    let parsedOptions = options;
+    if (typeof parsedOptions === 'string') {
+        try {
+            parsedOptions = JSON.parse(parsedOptions);
+        } catch (e) {
+            console.error('Select: Failed to parse options JSON:', e);
+            parsedOptions = [];
+        }
+    }
+
+    const normalizedOptions = (Array.isArray(parsedOptions) ? parsedOptions : []).map(opt =>
+        typeof opt === 'string' ? { value: opt, label: opt } : opt
+    );
+
+    const getValue = () => {
+        if (isControlled) {
+            return typeof value === 'function' ? value() :
+                (value && typeof value.value !== 'undefined') ? value.value : value;
+        }
+        return internalValue.value;
+    };
+
+    const getError = () => {
+        // External error takes priority
+        if (error) {
+            const err = typeof error === 'function' ? error() : error;
+            if (err) return err;
+        }
+        // Then internal validation error
+        return internalError.value;
+    };
+
+    const runValidation = (val) => {
+        if (!validate) return null;
+        const result = validate(val);
+        internalError.value = result;
+        return result;
+    };
+
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+
+        if (!isControlled) {
+            internalValue.value = newValue;
+        }
+
+        if (isControlled && value && typeof value.value !== 'undefined') {
+            value.value = newValue;
+        }
+
+        // Validate on change
+        touched.value = true;
+        runValidation(newValue);
+
+        if (onChange) onChange(newValue, e);
+    };
+
+    // Build DaisyUI select classes
+    const getSelectClass = () => {
+        const classes = ['select', 'w-full'];
+
+        // Ghost style
+        if (ghost) {
+            classes.push('select-ghost');
+        }
+
+        // Size
+        if (size && size !== 'md') {
+            classes.push(`select-${size}`);
+        }
+
+        // Color
+        if (color) {
+            classes.push(`select-${color}`);
+        }
+
+        // Error state
+        const currentError = getError();
+        if (currentError) {
+            classes.push('select-error');
+        }
+
+        return classes.join(' ');
+    };
+
+    // Build options elements
+    const buildOptions = () => {
+        const optionEls = [];
+
+        // Placeholder option
+        if (placeholder) {
+            optionEls.push(
+                option({
+                    disabled: true,
+                    selected: () => !getValue(),
+                    value: ''
+                }, placeholder)
+            );
+        }
+
+        // Regular options
+        normalizedOptions.forEach(opt => {
+            optionEls.push(
+                option({
+                    value: opt.value,
+                    selected: () => getValue() === opt.value,
+                    disabled: opt.disabled
+                }, opt.label || opt.value)
+            );
+        });
+
+        return optionEls;
+    };
+
+    // Build select attributes
+    const selectAttrs = {
+        class: validate || error ? () => getSelectClass() : getSelectClass(),
+        disabled: typeof disabled === 'function' ? disabled : disabled,
+        required,
+        name: selectName,
+        id: selectId,
+        onchange: handleChange,
+        'aria-invalid': () => !!getError(),
+        ...rest
+    };
+
+    const selectEl = select(selectAttrs, ...buildOptions());
+
+    // Build the component using DaisyUI fieldset pattern
+    const fieldsetContent = [];
+
+    // Legend/Label (DaisyUI fieldset-legend)
+    if (labelText) {
+        fieldsetContent.push(
+            legend({ class: 'fieldset-legend' },
+                labelText,
+                required ? span({ class: 'text-error' }, ' *') : null
+            )
+        );
+    }
+
+    // Select element
+    fieldsetContent.push(selectEl);
+
+    // Helper or error text
+    if (helper || validate || error) {
+        fieldsetContent.push(
+            () => {
+                const currentError = getError();
+                if (currentError) {
+                    return p({
+                        class: 'label text-error',
+                        role: 'alert'
+                    }, currentError);
+                }
+                if (helper) {
+                    return p({
+                        class: 'label'
+                    }, helper);
+                }
+                return null;
+            }
+        );
+    }
+
+    // Wrapper with DaisyUI fieldset class
+    const wrapperEl = fieldset({
+        class: `fieldset ${className}`.trim()
+    }, ...fieldsetContent);
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        // Get current theme from document
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return div({ class: 'content', style: 'display: inline-block' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    wrapperEl
+                )
+            )
+        );
+    }
+
+    return wrapperEl;
+};
+
+// Auto-register
+window.Lightview.tags.Select = Select;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const SelectElement = window.LightviewX.createCustomElement(Select);
+    if (!customElements.get('lv-select')) {
+        customElements.define('lv-select', SelectElement);
+    }
+}
+
+export default Select;