react-antd-admin-panel/dist/Switch-COFRAt2B.cjs

Modern TypeScript-first React admin panel builder with Ant Design 6

"use strict";
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
const jsxRuntime = require("react/jsx-runtime");
const antd = require("antd");
const React = require("react");
const BaseBuilder = require("./BaseBuilder-ByZeEu3_.cjs");
let fieldIdCounter = 0;
class FormFieldBuilder extends BaseBuilder.BaseBuilder {
  constructor() {
    super();
    __publicField(this, "_value");
    __publicField(this, "_onChange");
    __publicField(this, "_fieldId");
    this._fieldId = `raap-field-${++fieldIdCounter}`;
  }
  /**
   * Set the field label
   */
  label(text) {
    this._config.label = text;
    return this;
  }
  /**
   * Set the field placeholder
   */
  placeholder(text) {
    this._config.placeholder = text;
    return this;
  }
  /**
   * Mark field as required
   */
  required(value = true) {
    this._config.required = value;
    return this;
  }
  /**
   * Set the field tooltip
   */
  tooltip(text) {
    this._config.tooltip = text;
    return this;
  }
  /**
   * Set validation rules
   */
  rules(rules) {
    this._config.rules = rules;
    return this;
  }
  /**
   * Add a single validation rule
   */
  rule(rule) {
    if (!this._config.rules) {
      this._config.rules = [];
    }
    this._config.rules.push(rule);
    return this;
  }
  /**
   * Set default value
   */
  defaultValue(value) {
    this._config.defaultValue = value;
    this._value = value;
    return this;
  }
  /**
   * Set the field value
   */
  value(val) {
    this._value = val;
    return this;
  }
  /**
   * Get the current field value
   */
  getValue() {
    return this._value;
  }
  /**
   * Set onChange handler
   */
  onChange(handler) {
    this._onChange = handler;
    return this;
  }
  /**
   * Handle value change
   */
  handleChange(value) {
    this._value = value;
    if (this._onChange) {
      this._onChange(value);
    }
  }
  /**
   * Get the field ID for accessibility
   */
  getFieldId() {
    return this._fieldId;
  }
  /**
   * Wrap field with label (with proper accessibility association)
   */
  wrapWithLabel(field) {
    if (!this._config.label) {
      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "16px" }, children: field }, this._key);
    }
    const required = this._config.required;
    const descriptionId = this._config.tooltip ? `${this._fieldId}-description` : void 0;
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
      /* @__PURE__ */ jsxRuntime.jsxs(
        "label",
        {
          htmlFor: this._fieldId,
          style: {
            display: "block",
            marginBottom: "4px",
            fontSize: "14px",
            cursor: "pointer"
          },
          children: [
            required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#ff4d4f", marginRight: "4px" }, "aria-hidden": "true", children: "*" }),
            this._config.label,
            required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
              position: "absolute",
              width: "1px",
              height: "1px",
              padding: "0",
              margin: "-1px",
              overflow: "hidden",
              clip: "rect(0, 0, 0, 0)",
              whiteSpace: "nowrap",
              border: "0"
            }, children: " (required)" })
          ]
        }
      ),
      this._config.tooltip && /* @__PURE__ */ jsxRuntime.jsx(
        "div",
        {
          id: descriptionId,
          style: { fontSize: "12px", color: "#666", marginBottom: "4px" },
          children: this._config.tooltip
        }
      ),
      React.isValidElement(field) ? React.cloneElement(field, {
        id: this._fieldId,
        "aria-required": required || void 0,
        "aria-describedby": descriptionId
      }) : field
    ] }, this._key);
  }
}
class Input extends FormFieldBuilder {
  /**
   * Set input type
   */
  type(value) {
    this._config.type = value;
    return this;
  }
  /**
   * Set maximum length
   */
  maxLength(value) {
    this._config.maxLength = value;
    return this;
  }
  /**
   * Set minimum length
   */
  minLength(value) {
    this._config.minLength = value;
    return this;
  }
  /**
   * Set prefix icon or element
   */
  prefix(element) {
    this._config.prefix = element;
    return this;
  }
  /**
   * Set suffix icon or element
   */
  suffix(element) {
    this._config.suffix = element;
    return this;
  }
  /**
   * Enable clear button
   */
  allowClear(value = true) {
    this._config.allowClear = value;
    return this;
  }
  /**
   * Set addon before input
   */
  addonBefore(element) {
    this._config.addonBefore = element;
    return this;
  }
  /**
   * Set addon after input
   */
  addonAfter(element) {
    this._config.addonAfter = element;
    return this;
  }
  /**
   * Render the input component
   */
  render() {
    if (this._config.hidden) {
      return null;
    }
    const props = {
      placeholder: this._config.placeholder,
      disabled: this._config.disabled,
      maxLength: this._config.maxLength,
      prefix: this._config.prefix,
      suffix: this._config.suffix,
      allowClear: this._config.allowClear,
      addonBefore: this._config.addonBefore,
      addonAfter: this._config.addonAfter,
      onChange: (e) => this.handleChange(e.target.value)
    };
    const input = this._config.type === "password" ? /* @__PURE__ */ jsxRuntime.jsx(antd.Input.Password, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(antd.Input, { type: this._config.type || "text", ...props });
    return this.wrapWithLabel(input);
  }
}
class Select extends FormFieldBuilder {
  /**
   * Set select options
   */
  options(opts) {
    this._config.options = opts;
    return this;
  }
  /**
   * Add a single option
   */
  option(label, value, disabled) {
    if (!this._config.options) {
      this._config.options = [];
    }
    this._config.options.push({ label, value, disabled });
    return this;
  }
  /**
   * Enable multiple selection
   */
  multiple(value = true) {
    this._config.mode = value ? "multiple" : void 0;
    return this;
  }
  /**
   * Enable tags mode (user can create new options)
   */
  tags(value = true) {
    this._config.mode = value ? "tags" : void 0;
    return this;
  }
  /**
   * Enable search functionality
   */
  showSearch(value = true) {
    this._config.showSearch = value;
    return this;
  }
  /**
   * Enable clear button
   */
  allowClear(value = true) {
    this._config.allowClear = value;
    return this;
  }
  /**
   * Set loading state
   */
  loading(value = true) {
    this._config.loading = value;
    return this;
  }
  /**
   * Set maximum number of tags to display
   */
  maxTagCount(count) {
    this._config.maxTagCount = count;
    return this;
  }
  /**
   * Set custom filter function
   */
  filterOption(fn) {
    this._config.filterOption = fn;
    return this;
  }
  /**
   * Render the select component
   */
  render() {
    var _a;
    if (this._config.hidden) {
      return null;
    }
    const props = {
      placeholder: this._config.placeholder,
      disabled: this._config.disabled,
      mode: this._config.mode,
      showSearch: this._config.showSearch,
      allowClear: this._config.allowClear,
      loading: this._config.loading,
      maxTagCount: this._config.maxTagCount,
      filterOption: this._config.filterOption,
      onChange: (value) => this.handleChange(value),
      options: (_a = this._config.options) == null ? void 0 : _a.map((opt) => ({
        label: opt.label,
        value: opt.value,
        disabled: opt.disabled
      }))
    };
    return this.wrapWithLabel(/* @__PURE__ */ jsxRuntime.jsx(antd.Select, { ...props }));
  }
}
class Checkbox extends FormFieldBuilder {
  /**
   * Set checkbox text/label
   */
  text(value) {
    this._config.text = value;
    return this;
  }
  /**
   * Set indeterminate state
   */
  indeterminate(value = true) {
    this._config.indeterminate = value;
    return this;
  }
  /**
   * Render the checkbox component
   */
  render() {
    if (this._config.hidden) {
      return null;
    }
    console.log("Rendering Checkbox with value:", this._value);
    const CheckboxWrapper = () => {
      const [checked, setChecked] = React.useState(this._value || false);
      console.log("CheckboxWrapper rendering, checked:", checked);
      const handleChange = (e) => {
        console.log("Checkbox clicked:", e.target.checked);
        setChecked(e.target.checked);
        this.handleChange(e.target.checked);
      };
      return /* @__PURE__ */ jsxRuntime.jsx(
        antd.Checkbox,
        {
          disabled: this._config.disabled,
          indeterminate: this._config.indeterminate,
          checked,
          onChange: handleChange,
          children: this._config.text
        }
      );
    };
    return this.wrapWithLabel(/* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper, {}));
  }
}
class CheckboxGroup extends FormFieldBuilder {
  /**
   * Set checkbox options
   */
  options(opts) {
    this._config.options = opts;
    return this;
  }
  /**
   * Add a single checkbox option
   */
  option(label, value, disabled) {
    if (!this._config.options) {
      this._config.options = [];
    }
    this._config.options.push({ label, value, disabled });
    return this;
  }
  /**
   * Set layout direction
   */
  direction(dir) {
    this._config.direction = dir;
    return this;
  }
  /**
   * Render the checkbox group component
   */
  render() {
    var _a;
    if (this._config.hidden) {
      return null;
    }
    const options = (_a = this._config.options) == null ? void 0 : _a.map((opt) => ({
      label: opt.label,
      value: opt.value,
      disabled: opt.disabled
    }));
    return /* @__PURE__ */ jsxRuntime.jsx(
      antd.Checkbox.Group,
      {
        disabled: this._config.disabled,
        options,
        value: this._value,
        onChange: (values) => this.handleChange(values),
        style: this._config.direction === "vertical" ? { display: "flex", flexDirection: "column" } : void 0
      },
      this._key
    );
  }
}
class DatePicker extends FormFieldBuilder {
  /**
   * Set date format
   */
  format(fmt) {
    this._config.format = fmt;
    return this;
  }
  /**
   * Enable time selection
   */
  showTime(value = true) {
    this._config.showTime = value;
    return this;
  }
  /**
   * Show today button
   */
  showToday(value = true) {
    this._config.showToday = value;
    return this;
  }
  /**
   * Set picker type (date, week, month, quarter, year)
   */
  picker(type) {
    this._config.picker = type;
    return this;
  }
  /**
   * Set function to disable specific dates
   */
  disabledDate(fn) {
    this._config.disabledDate = fn;
    return this;
  }
  /**
   * Enable clear button
   */
  allowClear(value = true) {
    this._config.allowClear = value;
    return this;
  }
  /**
   * Render the date picker component
   */
  render() {
    if (this._config.hidden) {
      return null;
    }
    const props = {
      placeholder: this._config.placeholder,
      disabled: this._config.disabled,
      format: this._config.format,
      showTime: this._config.showTime,
      showToday: this._config.showToday,
      picker: this._config.picker,
      disabledDate: this._config.disabledDate,
      allowClear: this._config.allowClear,
      onChange: (date) => this.handleChange(date)
    };
    return this.wrapWithLabel(/* @__PURE__ */ jsxRuntime.jsx(antd.DatePicker, { ...props }));
  }
}
class RangePicker extends FormFieldBuilder {
  /**
   * Set date format
   */
  format(fmt) {
    this._config.format = fmt;
    return this;
  }
  /**
   * Enable time selection
   */
  showTime(value = true) {
    this._config.showTime = value;
    return this;
  }
  /**
   * Set picker type (date, week, month, quarter, year)
   */
  picker(type) {
    this._config.picker = type;
    return this;
  }
  /**
   * Set function to disable specific dates
   */
  disabledDate(fn) {
    this._config.disabledDate = fn;
    return this;
  }
  /**
   * Enable clear button
   */
  allowClear(value = true) {
    this._config.allowClear = value;
    return this;
  }
  /**
   * Render the range picker component
   */
  render() {
    if (this._config.hidden) {
      return null;
    }
    const props = {
      placeholder: this._config.placeholder ? [this._config.placeholder, this._config.placeholder] : void 0,
      disabled: this._config.disabled,
      format: this._config.format,
      showTime: this._config.showTime,
      picker: this._config.picker,
      disabledDate: this._config.disabledDate,
      allowClear: this._config.allowClear,
      value: this._value,
      onChange: (dates) => this.handleChange(dates)
    };
    return /* @__PURE__ */ jsxRuntime.jsx(antd.DatePicker.RangePicker, { ...props }, this._key);
  }
}
const { TextArea: AntTextArea } = antd.Input;
class TextArea extends FormFieldBuilder {
  /**
   * Set number of rows
   */
  rows(value) {
    this._config.rows = value;
    return this;
  }
  /**
   * Set maximum length
   */
  maxLength(value) {
    this._config.maxLength = value;
    return this;
  }
  /**
   * Set minimum length
   */
  minLength(value) {
    this._config.minLength = value;
    return this;
  }
  /**
   * Enable auto-size (height adjusts to content)
   */
  autoSize(value = true) {
    this._config.autoSize = value;
    return this;
  }
  /**
   * Show character count
   */
  showCount(value = true) {
    this._config.showCount = value;
    return this;
  }
  /**
   * Enable clear button
   */
  allowClear(value = true) {
    this._config.allowClear = value;
    return this;
  }
  /**
   * Render the textarea component
   */
  render() {
    if (this._config.hidden) {
      return null;
    }
    const props = {
      placeholder: this._config.placeholder,
      disabled: this._config.disabled,
      rows: this._config.rows,
      maxLength: this._config.maxLength,
      autoSize: this._config.autoSize,
      showCount: this._config.showCount,
      allowClear: this._config.allowClear,
      onChange: (e) => this.handleChange(e.target.value)
    };
    return this.wrapWithLabel(/* @__PURE__ */ jsxRuntime.jsx(AntTextArea, { ...props }));
  }
}
class RadioGroup extends FormFieldBuilder {
  /**
   * Set radio options
   */
  options(opts) {
    this._config.options = opts;
    return this;
  }
  /**
   * Add a single radio option
   */
  option(label, value, disabled) {
    if (!this._config.options) {
      this._config.options = [];
    }
    this._config.options.push({ label, value, disabled });
    return this;
  }
  /**
   * Set layout direction
   */
  direction(dir) {
    this._config.direction = dir;
    return this;
  }
  /**
   * Set button style (only applies when optionType is 'button')
   */
  buttonStyle(style) {
    this._config.buttonStyle = style;
    return this;
  }
  /**
   * Set option type (default radio or button style)
   */
  optionType(type) {
    this._config.optionType = type;
    return this;
  }
  /**
   * Set size (only applies when optionType is 'button')
   */
  size(value) {
    this._config.size = value;
    return this;
  }
  /**
   * Render the radio group component
   */
  render() {
    var _a;
    if (this._config.hidden) {
      return null;
    }
    const props = {
      disabled: this._config.disabled,
      buttonStyle: this._config.buttonStyle,
      optionType: this._config.optionType,
      size: this._config.size,
      value: this._value,
      onChange: (e) => this.handleChange(e.target.value)
    };
    const style = this._config.direction === "vertical" ? { display: "flex", flexDirection: "column" } : void 0;
    return /* @__PURE__ */ jsxRuntime.jsx(antd.Radio.Group, { ...props, style, children: (_a = this._config.options) == null ? void 0 : _a.map((opt, idx) => {
      const RadioComponent = this._config.optionType === "button" ? antd.Radio.Button : antd.Radio;
      return /* @__PURE__ */ jsxRuntime.jsx(
        RadioComponent,
        {
          value: opt.value,
          disabled: opt.disabled,
          children: opt.label
        },
        idx
      );
    }) }, this._key);
  }
}
class Switch extends FormFieldBuilder {
  /**
   * Set content to display when checked
   */
  checkedChildren(content) {
    this._config.checkedChildren = content;
    return this;
  }
  /**
   * Set content to display when unchecked
   */
  unCheckedChildren(content) {
    this._config.unCheckedChildren = content;
    return this;
  }
  /**
   * Set switch size
   */
  size(value) {
    this._config.size = value;
    return this;
  }
  /**
   * Set loading state
   */
  loading(value = true) {
    this._config.loading = value;
    return this;
  }
  /**
   * Render the switch component
   */
  render() {
    if (this._config.hidden) {
      return null;
    }
    const SwitchWrapper = () => {
      const [checked, setChecked] = React.useState(this._value || false);
      const handleChange = (value) => {
        setChecked(value);
        this.handleChange(value);
      };
      return /* @__PURE__ */ jsxRuntime.jsx(
        antd.Switch,
        {
          disabled: this._config.disabled,
          checkedChildren: this._config.checkedChildren,
          unCheckedChildren: this._config.unCheckedChildren,
          size: this._config.size,
          loading: this._config.loading,
          checked,
          onChange: handleChange
        }
      );
    };
    return this.wrapWithLabel(/* @__PURE__ */ jsxRuntime.jsx(SwitchWrapper, {}));
  }
}
exports.Checkbox = Checkbox;
exports.CheckboxGroup = CheckboxGroup;
exports.DatePicker = DatePicker;
exports.FormFieldBuilder = FormFieldBuilder;
exports.Input = Input;
exports.RadioGroup = RadioGroup;
exports.RangePicker = RangePicker;
exports.Select = Select;
exports.Switch = Switch;
exports.TextArea = TextArea;
//# sourceMappingURL=Switch-COFRAt2B.cjs.map