lightview 1.8.2 → 2.0.1

package/components/data-input/input.js

@@ -0,0 +1,264 @@
+/**
+ * Lightview Components - Input
+ * A text input component using DaisyUI 5 styling with validation support
+ * @see https://daisyui.com/components/input/
+ * 
+ * Uses DaisyUI's fieldset pattern:
+ * <fieldset class="fieldset">
+ *     <legend class="fieldset-legend">Label</legend>
+ *     <input class="input" />
+ *     <p class="label">Helper text</p>
+ * </fieldset>
+ */
+
+import '../daisyui.js';
+
+/**
+ * Input Component
+ * @param {Object} props - Input properties
+ * @param {string} props.type - Input type (default: 'text')
+ * @param {string|Signal} props.value - Input value
+ * @param {string} props.defaultValue - Default value (uncontrolled)
+ * @param {string} props.placeholder - Placeholder text
+ * @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 input
+ * @param {boolean} props.required - Required field
+ * @param {string} props.label - Label text (rendered as fieldset legend)
+ * @param {string} props.helper - Helper text (rendered below input)
+ * @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 {Function} props.onBlur - Blur handler
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Input = (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 {
+        type = 'text',
+        value,
+        defaultValue = '',
+        placeholder,
+        size = 'md',
+        color,
+        ghost = false,
+        disabled = false,
+        required = false,
+        label: labelText,
+        helper,
+        error,
+        validate,
+        onChange,
+        onBlur,
+        onInput,
+        name,
+        id,
+        class: className = '',
+        useShadow,
+        ...rest
+    } = props;
+
+    // Generate unique ID if not provided
+    const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;
+    const inputName = name || inputId;
+
+    // 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;
+
+    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 handleInput = (e) => {
+        const newValue = e.target.value;
+
+        if (!isControlled) {
+            internalValue.value = newValue;
+        }
+
+        if (isControlled && value && typeof value.value !== 'undefined') {
+            value.value = newValue;
+        }
+
+        // Validate on input if already touched
+        if (touched.value && validate) {
+            runValidation(newValue);
+        }
+
+        if (onInput) onInput(e);
+        if (onChange) onChange(newValue, e);
+    };
+
+    const handleBlur = (e) => {
+        touched.value = true;
+        runValidation(e.target.value);
+        if (onBlur) onBlur(e);
+    };
+
+    // Build DaisyUI input classes
+    const getInputClass = () => {
+        const classes = ['input', 'w-full'];
+
+        // Ghost style
+        if (ghost) {
+            classes.push('input-ghost');
+        }
+
+        // Size
+        if (size && size !== 'md') {
+            classes.push(`input-${size}`);
+        }
+
+        // Color
+        if (color) {
+            classes.push(`input-${color}`);
+        }
+
+        // Error state
+        const currentError = getError();
+        if (currentError) {
+            classes.push('input-error');
+        }
+
+        return classes.join(' ');
+    };
+
+    // Build input attributes
+    const inputAttrs = {
+        type,
+        class: validate || error ? () => getInputClass() : getInputClass(),
+        value: isControlled
+            ? (typeof value === 'function' ? value : () => getValue())
+            : () => internalValue.value,
+        disabled: typeof disabled === 'function' ? disabled : disabled,
+        required,
+        name: inputName,
+        id: inputId,
+        oninput: handleInput,
+        onblur: handleBlur,
+        'aria-invalid': () => !!getError(),
+        ...rest
+    };
+
+    // Only add placeholder if defined
+    if (placeholder !== undefined) {
+        inputAttrs.placeholder = placeholder;
+    }
+
+    const inputEl = input(inputAttrs);
+
+    // 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
+            )
+        );
+    }
+
+    // Input element
+    fieldsetContent.push(inputEl);
+
+    // Helper or error text (DaisyUI label class for helper text below)
+    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.Input = Input;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const InputElement = window.LightviewX.createCustomElement(Input);
+    if (!customElements.get('lv-input')) {
+        customElements.define('lv-input', InputElement);
+    }
+}
+
+export default Input;

package/components/data-input/radio.js

@@ -0,0 +1,338 @@
+/**
+ * Lightview Components - Radio & RadioGroup
+ * Radio button components using DaisyUI 5 styling with validation support
+ * @see https://daisyui.com/components/radio/
+ * 
+ * Uses DaisyUI's form-control pattern:
+ * <div class="form-control">
+ *     <label class="label cursor-pointer">
+ *         <span class="label-text">Option</span>
+ *         <input type="radio" class="radio" />
+ *     </label>
+ * </div>
+ */
+
+import '../daisyui.js';
+
+/**
+ * Radio Component (Single radio button)
+ * @param {Object} props - Radio properties
+ * @param {string} props.name - Radio group name
+ * @param {*} props.value - Radio value
+ * @param {boolean|function} props.checked - Checked state
+ * @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 radio
+ * @param {string} props.label - Label text
+ * @param {Function} props.onChange - Change handler
+ */
+const Radio = (props = {}) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) {
+        console.error('Lightview not found');
+        return null;
+    }
+
+    const { div, input, label, span, shadowDOM } = tags;
+
+    const {
+        name,
+        value,
+        checked = false,
+        size = 'md',
+        color,
+        disabled = false,
+        label: labelText,
+        onChange,
+        id,
+        class: className = '',
+        useShadow,
+        ...rest
+    } = props;
+
+    const radioId = id || `radio-${Math.random().toString(36).slice(2, 9)}`;
+
+    // Build DaisyUI radio classes
+    const getRadioClass = () => {
+        const classes = ['radio'];
+
+        if (size && size !== 'md') {
+            classes.push(`radio-${size}`);
+        }
+
+        if (color) {
+            classes.push(`radio-${color}`);
+        }
+
+        return classes.join(' ');
+    };
+
+    const radioInput = input({
+        type: 'radio',
+        class: getRadioClass(),
+        name,
+        value,
+        checked: typeof checked === 'function' ? checked : checked,
+        disabled,
+        id: radioId,
+        onchange: onChange ? (e) => onChange(e.target.value, e) : undefined,
+        ...rest
+    });
+
+    // If no label, return just the radio
+    if (!labelText) {
+        return radioInput;
+    }
+
+    const formControl = div({
+        class: `form-control ${className}`.trim()
+    },
+        label({ class: 'label cursor-pointer', style: 'justify-content: flex-start; gap: 0;' },
+            radioInput,
+            span({ class: 'label-text', style: 'margin-left: 0.5rem;' }, labelText)
+        )
+    );
+
+    // 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 }, formControl)
+            )
+        );
+    }
+
+    return formControl;
+};
+
+/**
+ * RadioGroup Component
+ * @param {Object} props - RadioGroup properties
+ * @param {Array} props.options - Array of options: string[] or {value, label, description, disabled}[]
+ * @param {*|Signal} props.value - Selected value (controlled)
+ * @param {*} props.defaultValue - Default value (uncontrolled)
+ * @param {string} props.name - Group name for form submission
+ * @param {string} props.label - Group label
+ * @param {string} props.helper - Helper text
+ * @param {string|Function} props.error - Error message
+ * @param {Function} props.validate - Validation function (value) => errorMessage | null
+ * @param {string} props.color - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
+ * @param {boolean} props.horizontal - Horizontal layout
+ * @param {boolean} props.disabled - Disable all options
+ * @param {boolean} props.required - Mark as required
+ * @param {Function} props.onChange - Value change handler
+ * @param {boolean} props.useShadow - Render in Shadow DOM
+ */
+const RadioGroup = (props = {}) => {
+    const { tags, signal } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) {
+        console.error('Lightview not found');
+        return null;
+    }
+
+    const { div, fieldset, legend, input, label, span, p, shadowDOM } = tags;
+
+    const {
+        options = [],
+        value,
+        defaultValue,
+        name = `radio-group-${Math.random().toString(36).slice(2, 9)}`,
+        label: groupLabel,
+        helper,
+        error,
+        validate,
+        color,
+        size = 'md',
+        horizontal = false,
+        disabled = false,
+        required = false,
+        onChange,
+        class: className = '',
+        useShadow,
+        ...rest
+    } = props;
+
+    // Normalize options
+    const normalizedOptions = options.map(opt =>
+        typeof opt === 'string' ? { value: opt, label: opt } : opt
+    );
+
+    // Internal state
+    const internalValue = signal
+        ? signal(defaultValue !== undefined ? defaultValue : null)
+        : { value: defaultValue !== undefined ? defaultValue : null };
+    const internalError = signal ? signal(null) : { value: null };
+
+    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 getError = () => {
+        if (error) {
+            const err = typeof error === 'function' ? error() : error;
+            if (err) return err;
+        }
+        return internalError.value;
+    };
+
+    const runValidation = (val) => {
+        if (validate) {
+            const result = validate(val);
+            internalError.value = result;
+            return result;
+        }
+        if (required && !val) {
+            internalError.value = 'Please select an option';
+            return 'Please select an option';
+        }
+        internalError.value = null;
+        return null;
+    };
+
+    const handleChange = (optValue) => {
+        if (!isControlled) {
+            internalValue.value = optValue;
+        }
+
+        if (isControlled && value && typeof value.value !== 'undefined') {
+            value.value = optValue;
+        }
+
+        runValidation(optValue);
+
+        if (onChange) onChange(optValue);
+    };
+
+    // Build radio class
+    const getRadioClass = () => {
+        const classes = ['radio'];
+        if (size && size !== 'md') classes.push(`radio-${size}`);
+        if (color) classes.push(`radio-${color}`);
+        return classes.join(' ');
+    };
+
+    // Build options
+    const radioOptions = normalizedOptions.map(opt => {
+        const optDisabled = disabled || opt.disabled;
+        const isChecked = () => getValue() === opt.value;
+
+        return label({ class: 'label cursor-pointer', style: 'justify-content: flex-start; gap: 0;' },
+            input({
+                type: 'radio',
+                class: getRadioClass(),
+                name,
+                value: opt.value,
+                checked: isChecked,
+                disabled: optDisabled,
+                onchange: () => handleChange(opt.value)
+            }),
+            div({ style: 'display: flex; flex-direction: column; margin-left: 0.5rem;' },
+                span({ class: 'label-text' }, opt.label),
+                opt.description ? span({ class: 'label-text-alt', style: 'opacity: 0.7;' }, opt.description) : null
+            )
+        );
+    });
+
+    // Build the component
+    const fieldsetContent = [];
+
+    if (groupLabel) {
+        fieldsetContent.push(
+            legend({ class: 'fieldset-legend' },
+                groupLabel,
+                required ? span({ class: 'text-error' }, ' *') : null
+            )
+        );
+    }
+
+    fieldsetContent.push(
+        div({
+            style: horizontal ? 'display: flex; flex-wrap: wrap; gap: 1rem;' : 'display: flex; flex-direction: column; gap: 0.5rem;',
+            role: 'radiogroup',
+            'aria-label': groupLabel
+        }, ...radioOptions)
+    );
+
+    // Helper or error text
+    if (helper || validate || error || required) {
+        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;
+            }
+        );
+    }
+
+    const wrapperEl = fieldset({
+        class: `fieldset ${className}`.trim(),
+        ...rest
+    }, ...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.Radio = Radio;
+window.Lightview.tags.RadioGroup = RadioGroup;
+
+// Register as Custom Elements
+if (window.LightviewX?.createCustomElement) {
+    const RadioElement = window.LightviewX.createCustomElement(Radio);
+    if (!customElements.get('lv-radio')) {
+        customElements.define('lv-radio', RadioElement);
+    }
+    const RadioGroupElement = window.LightviewX.createCustomElement(RadioGroup);
+    if (!customElements.get('lv-radio-group')) {
+        customElements.define('lv-radio-group', RadioGroupElement);
+    }
+}
+
+export default Radio;
+export { Radio, RadioGroup };