@soave/ui 0.3.1 → 0.4.0

package/dist/composables/useFileInput.mjs

@@ -1,137 +0,0 @@
-import { computed, ref, readonly } from "vue";
-const FILE_ERRORS = {
-  MAX_SIZE_EXCEEDED: (max) => `\u30D5\u30A1\u30A4\u30EB\u30B5\u30A4\u30BA\u304C${formatFileSize(max)}\u3092\u8D85\u3048\u3066\u3044\u307E\u3059`,
-  MAX_FILES_EXCEEDED: (max) => `\u6700\u5927${max}\u30D5\u30A1\u30A4\u30EB\u307E\u3067\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3067\u304D\u307E\u3059`,
-  INVALID_TYPE: "\u8A31\u53EF\u3055\u308C\u3066\u3044\u306A\u3044\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u3067\u3059"
-};
-const formatFileSize = (bytes) => {
-  if (bytes < 1024) return `${bytes}B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
-};
-const createPreviewUrl = (file) => {
-  if (file.type.startsWith("image/")) {
-    return URL.createObjectURL(file);
-  }
-  return null;
-};
-export const useFileInput = (props, input_ref) => {
-  const is_dragging = ref(false);
-  const files = ref([]);
-  const error = ref(null);
-  const state = computed(() => ({
-    disabled: props.value.disabled ?? false,
-    is_dragging: is_dragging.value,
-    has_error: !!error.value,
-    has_files: files.value.length > 0
-  }));
-  const aria_attributes = computed(() => ({
-    "aria-disabled": state.value.disabled || void 0,
-    "aria-invalid": state.value.has_error || void 0
-  }));
-  const validateFile = (file) => {
-    const { accept, max_size } = props.value;
-    if (max_size && file.size > max_size) {
-      return FILE_ERRORS.MAX_SIZE_EXCEEDED(max_size);
-    }
-    if (accept) {
-      const accepted_types = accept.split(",").map((t) => t.trim());
-      const is_valid = accepted_types.some((type) => {
-        if (type.startsWith(".")) {
-          return file.name.toLowerCase().endsWith(type.toLowerCase());
-        }
-        if (type.endsWith("/*")) {
-          return file.type.startsWith(type.replace("/*", "/"));
-        }
-        return file.type === type;
-      });
-      if (!is_valid) {
-        return FILE_ERRORS.INVALID_TYPE;
-      }
-    }
-    return null;
-  };
-  const handleFiles = (file_list) => {
-    if (!file_list || state.value.disabled) return;
-    error.value = null;
-    const { multiple, max_files } = props.value;
-    const new_files = [];
-    const files_to_process = Array.from(file_list);
-    for (const file of files_to_process) {
-      const validation_error = validateFile(file);
-      if (validation_error) {
-        error.value = validation_error;
-        return;
-      }
-      new_files.push({
-        file,
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        preview_url: createPreviewUrl(file)
-      });
-    }
-    if (multiple) {
-      const total = files.value.length + new_files.length;
-      if (max_files && total > max_files) {
-        error.value = FILE_ERRORS.MAX_FILES_EXCEEDED(max_files);
-        return;
-      }
-      files.value.push(...new_files);
-    } else {
-      files.value.forEach((f) => {
-        if (f.preview_url) URL.revokeObjectURL(f.preview_url);
-      });
-      files.value = new_files.slice(0, 1);
-    }
-  };
-  const handleDragEnter = (event) => {
-    event.preventDefault();
-    if (!state.value.disabled) {
-      is_dragging.value = true;
-    }
-  };
-  const handleDragLeave = (event) => {
-    event.preventDefault();
-    is_dragging.value = false;
-  };
-  const handleDrop = (event) => {
-    event.preventDefault();
-    is_dragging.value = false;
-    if (!state.value.disabled) {
-      handleFiles(event.dataTransfer?.files ?? null);
-    }
-  };
-  const removeFile = (index) => {
-    const removed = files.value.splice(index, 1)[0];
-    if (removed?.preview_url) {
-      URL.revokeObjectURL(removed.preview_url);
-    }
-  };
-  const clearFiles = () => {
-    files.value.forEach((f) => {
-      if (f.preview_url) URL.revokeObjectURL(f.preview_url);
-    });
-    files.value = [];
-    error.value = null;
-  };
-  const openFilePicker = () => {
-    if (!state.value.disabled && input_ref.value) {
-      input_ref.value.click();
-    }
-  };
-  return {
-    state: readonly(state),
-    is_dragging,
-    files,
-    error,
-    aria_attributes: readonly(aria_attributes),
-    handleFiles,
-    handleDragEnter,
-    handleDragLeave,
-    handleDrop,
-    removeFile,
-    clearFiles,
-    openFilePicker
-  };
-};

package/dist/composables/useForm.mjs

@@ -1,159 +0,0 @@
-import { reactive, computed, readonly } from "vue";
-import { ZodError } from "zod";
-import { FORM_ERRORS } from "../constants/errors.mjs";
-export const useForm = (schema) => {
-  const form_state = reactive({
-    values: {},
-    errors: {},
-    touched: {},
-    is_submitting: false,
-    is_dirty: false
-  });
-  const is_valid = computed(() => {
-    const result = schema.safeParse(form_state.values);
-    return result.success;
-  });
-  const validateField = (field) => {
-    form_state.touched[field] = true;
-    form_state.is_dirty = true;
-    try {
-      const zod_object = schema;
-      const field_schema = zod_object.shape[field];
-      if (!field_schema) {
-        throw new Error(FORM_ERRORS.FIELD_NOT_FOUND);
-      }
-      field_schema.parse(form_state.values[field]);
-      form_state.errors[field] = void 0;
-    } catch (error) {
-      if (error instanceof ZodError) {
-        form_state.errors[field] = error.errors[0].message;
-      } else if (error instanceof Error) {
-        form_state.errors[field] = error.message;
-      }
-    }
-  };
-  const validateAll = () => {
-    try {
-      schema.parse(form_state.values);
-      form_state.errors = {};
-      return true;
-    } catch (error) {
-      if (error instanceof ZodError) {
-        form_state.errors = {};
-        error.errors.forEach((err) => {
-          const field = err.path[0];
-          form_state.errors[field] = err.message;
-          form_state.touched[field] = true;
-        });
-      }
-      return false;
-    }
-  };
-  const reset = () => {
-    form_state.values = {};
-    form_state.errors = {};
-    form_state.touched = {};
-    form_state.is_dirty = false;
-  };
-  const setValues = (values) => {
-    Object.assign(form_state.values, values);
-    form_state.is_dirty = true;
-  };
-  const setFieldValue = (field, value) => {
-    form_state.values[field] = value;
-    form_state.is_dirty = true;
-  };
-  const submit = async (on_submit) => {
-    if (!validateAll()) {
-      return;
-    }
-    form_state.is_submitting = true;
-    try {
-      const validated_data = schema.parse(form_state.values);
-      await on_submit(validated_data);
-    } catch (error) {
-      if (error instanceof ZodError) {
-        error.errors.forEach((err) => {
-          const field = err.path[0];
-          form_state.errors[field] = err.message;
-        });
-      }
-      throw error;
-    } finally {
-      form_state.is_submitting = false;
-    }
-  };
-  const getFieldArray = (field) => {
-    const getArray = () => {
-      const value = form_state.values[field];
-      if (!Array.isArray(value)) {
-        form_state.values[field] = [];
-        return [];
-      }
-      return value;
-    };
-    const helpers = {
-      get fields() {
-        return getArray();
-      },
-      append: (value) => {
-        const array = getArray();
-        array.push(value);
-        form_state.is_dirty = true;
-      },
-      prepend: (value) => {
-        const array = getArray();
-        array.unshift(value);
-        form_state.is_dirty = true;
-      },
-      insert: (index, value) => {
-        const array = getArray();
-        array.splice(index, 0, value);
-        form_state.is_dirty = true;
-      },
-      remove: (index) => {
-        const array = getArray();
-        array.splice(index, 1);
-        form_state.is_dirty = true;
-      },
-      move: (from_index, to_index) => {
-        const array = getArray();
-        const item = array.splice(from_index, 1)[0];
-        array.splice(to_index, 0, item);
-        form_state.is_dirty = true;
-      },
-      swap: (index_a, index_b) => {
-        const array = getArray();
-        const temp = array[index_a];
-        array[index_a] = array[index_b];
-        array[index_b] = temp;
-        form_state.is_dirty = true;
-      },
-      replace: (index, value) => {
-        const array = getArray();
-        array[index] = value;
-        form_state.is_dirty = true;
-      },
-      clear: () => {
-        form_state.values[field] = [];
-        form_state.is_dirty = true;
-      }
-    };
-    return helpers;
-  };
-  return {
-    values: form_state.values,
-    errors: readonly(form_state.errors),
-    touched: readonly(form_state.touched),
-    is_valid,
-    is_submitting: computed(() => form_state.is_submitting),
-    is_dirty: computed(() => form_state.is_dirty),
-    validateField,
-    validateAll,
-    reset,
-    setValues,
-    setFieldValue,
-    submit,
-    getFieldArray
-  };
-};

package/dist/composables/useInput.mjs

@@ -1,31 +0,0 @@
-import { computed, ref, readonly } from "vue";
-import { useUI } from "./useUIConfig.mjs";
-export const useInput = (props) => {
-  const ui_config = useUI("input");
-  const is_focused = ref(false);
-  const state = computed(() => ({
-    type: props.value.type ?? "text",
-    size: props.value.size ?? ui_config.default_size,
-    disabled: props.value.disabled ?? false,
-    readonly: props.value.readonly ?? false,
-    has_error: !!props.value.error
-  }));
-  const aria_attributes = computed(() => ({
-    "aria-invalid": state.value.has_error || void 0,
-    "aria-describedby": props.value.error_id,
-    "aria-readonly": state.value.readonly || void 0
-  }));
-  const handleFocus = () => {
-    is_focused.value = true;
-  };
-  const handleBlur = () => {
-    is_focused.value = false;
-  };
-  return {
-    state: readonly(state),
-    is_focused,
-    aria_attributes: readonly(aria_attributes),
-    handleFocus,
-    handleBlur
-  };
-};

package/dist/composables/usePopover.mjs

@@ -1,113 +0,0 @@
-import { ref, computed, onMounted, onUnmounted } from "vue";
-let popover_counter = 0;
-export function usePopover(props) {
-  const is_open = ref(false);
-  const trigger_ref = ref(null);
-  const content_ref = ref(null);
-  const popover_id = `popover-${++popover_counter}`;
-  const open = () => {
-    is_open.value = true;
-  };
-  const close = () => {
-    is_open.value = false;
-  };
-  const toggle = () => {
-    is_open.value = !is_open.value;
-  };
-  const handleTriggerClick = () => {
-    toggle();
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Escape" && is_open.value) {
-      close();
-      trigger_ref.value?.focus();
-    }
-  };
-  const handleClickOutside = (event) => {
-    if (!is_open.value) return;
-    const target = event.target;
-    const trigger = trigger_ref.value;
-    const content = content_ref.value;
-    if (trigger && trigger.contains(target)) return;
-    if (content && content.contains(target)) return;
-    close();
-  };
-  const position_styles = computed(() => {
-    if (!trigger_ref.value || !is_open.value) {
-      return {};
-    }
-    const side = props.value.side ?? "bottom";
-    const align = props.value.align ?? "center";
-    const offset = 8;
-    const styles = {
-      position: "absolute",
-      zIndex: "50"
-    };
-    switch (side) {
-      case "top":
-        styles.bottom = "100%";
-        styles.marginBottom = `${offset}px`;
-        break;
-      case "bottom":
-        styles.top = "100%";
-        styles.marginTop = `${offset}px`;
-        break;
-      case "left":
-        styles.right = "100%";
-        styles.marginRight = `${offset}px`;
-        break;
-      case "right":
-        styles.left = "100%";
-        styles.marginLeft = `${offset}px`;
-        break;
-    }
-    if (side === "top" || side === "bottom") {
-      switch (align) {
-        case "start":
-          styles.left = "0";
-          break;
-        case "center":
-          styles.left = "50%";
-          styles.transform = "translateX(-50%)";
-          break;
-        case "end":
-          styles.right = "0";
-          break;
-      }
-    } else {
-      switch (align) {
-        case "start":
-          styles.top = "0";
-          break;
-        case "center":
-          styles.top = "50%";
-          styles.transform = "translateY(-50%)";
-          break;
-        case "end":
-          styles.bottom = "0";
-          break;
-      }
-    }
-    return styles;
-  });
-  onMounted(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleKeyDown);
-  });
-  onUnmounted(() => {
-    document.removeEventListener("mousedown", handleClickOutside);
-    document.removeEventListener("keydown", handleKeyDown);
-  });
-  return {
-    is_open,
-    trigger_ref,
-    content_ref,
-    popover_id,
-    position_styles,
-    open,
-    close,
-    toggle,
-    handleTriggerClick,
-    handleKeyDown
-  };
-}

package/dist/composables/useRadio.mjs

@@ -1,23 +0,0 @@
-import { computed, inject, readonly } from "vue";
-import { RADIO_GROUP_KEY } from "../types/radio.mjs";
-import { COMPONENT_ERRORS } from "../constants/errors.mjs";
-export const useRadioItem = (props) => {
-  const context = inject(RADIO_GROUP_KEY, null);
-  if (!context) {
-    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
-  }
-  const state = computed(() => ({
-    size: props.value.size ?? "md",
-    disabled: props.value.disabled ?? context.disabled.value,
-    checked: context.model_value.value === props.value.value
-  }));
-  const aria_attributes = computed(() => ({
-    role: "radio",
-    "aria-checked": state.value.checked,
-    "aria-disabled": state.value.disabled || void 0
-  }));
-  return {
-    state: readonly(state),
-    aria_attributes: readonly(aria_attributes)
-  };
-};

package/dist/composables/useSelect.mjs

@@ -1,42 +0,0 @@
-import { computed, inject, readonly } from "vue";
-import { SELECT_KEY } from "../types/select.mjs";
-import { COMPONENT_ERRORS } from "../constants/errors.mjs";
-export const useSelectTrigger = () => {
-  const context = inject(SELECT_KEY, null);
-  if (!context) {
-    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
-  }
-  const state = computed(() => ({
-    size: context.size.value,
-    disabled: context.disabled.value,
-    is_open: context.is_open.value
-  }));
-  return {
-    state: readonly(state)
-  };
-};
-export const useSelectContent = () => {
-  const context = inject(SELECT_KEY, null);
-  if (!context) {
-    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
-  }
-  const state = computed(() => ({
-    is_open: context.is_open.value
-  }));
-  return {
-    state: readonly(state)
-  };
-};
-export const useSelectItem = (props) => {
-  const context = inject(SELECT_KEY, null);
-  if (!context) {
-    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
-  }
-  const state = computed(() => ({
-    selected: context.model_value.value === props.value.value,
-    disabled: props.value.disabled ?? false
-  }));
-  return {
-    state: readonly(state)
-  };
-};

package/dist/composables/useSwitch.mjs

@@ -1,17 +0,0 @@
-import { computed, readonly } from "vue";
-export const useSwitch = (props, checked) => {
-  const state = computed(() => ({
-    size: props.value.size ?? "md",
-    disabled: props.value.disabled ?? false,
-    checked: checked.value
-  }));
-  const aria_attributes = computed(() => ({
-    role: "switch",
-    "aria-checked": state.value.checked,
-    "aria-disabled": state.value.disabled || void 0
-  }));
-  return {
-    state: readonly(state),
-    aria_attributes: readonly(aria_attributes)
-  };
-};

package/dist/composables/useTextarea.mjs

@@ -1,29 +0,0 @@
-import { computed, ref, readonly } from "vue";
-export const useTextarea = (props) => {
-  const is_focused = ref(false);
-  const state = computed(() => ({
-    size: props.value.size ?? "md",
-    disabled: props.value.disabled ?? false,
-    readonly: props.value.readonly ?? false,
-    has_error: !!props.value.error,
-    resize: props.value.resize ?? "vertical"
-  }));
-  const aria_attributes = computed(() => ({
-    "aria-invalid": state.value.has_error || void 0,
-    "aria-describedby": props.value.error_id,
-    "aria-readonly": state.value.readonly || void 0
-  }));
-  const handleFocus = () => {
-    is_focused.value = true;
-  };
-  const handleBlur = () => {
-    is_focused.value = false;
-  };
-  return {
-    state: readonly(state),
-    is_focused,
-    aria_attributes: readonly(aria_attributes),
-    handleFocus,
-    handleBlur
-  };
-};

package/dist/composables/useTheme.mjs

@@ -1,89 +0,0 @@
-import { ref, computed, watch, onMounted, onUnmounted } from "vue";
-const DEFAULT_OPTIONS = {
-  default_mode: "system",
-  storage_key: "soave-ui-theme",
-  attribute: "data-theme"
-};
-export function useTheme(options = {}) {
-  const merged_options = { ...DEFAULT_OPTIONS, ...options };
-  const mode = ref(merged_options.default_mode);
-  let media_query = null;
-  const getSystemTheme = () => {
-    if (typeof window === "undefined") return "light";
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  };
-  const resolved_mode = computed(() => {
-    if (mode.value === "system") {
-      return getSystemTheme();
-    }
-    return mode.value;
-  });
-  const applyTheme = (theme) => {
-    if (typeof document === "undefined") return;
-    const root = document.documentElement;
-    root.setAttribute(merged_options.attribute, theme);
-    if (theme === "dark") {
-      root.classList.add("dark");
-    } else {
-      root.classList.remove("dark");
-    }
-  };
-  const setMode = (new_mode) => {
-    mode.value = new_mode;
-    if (typeof localStorage !== "undefined") {
-      localStorage.setItem(merged_options.storage_key, new_mode);
-    }
-    applyTheme(resolved_mode.value);
-  };
-  const toggleMode = () => {
-    const next_mode = resolved_mode.value === "light" ? "dark" : "light";
-    setMode(next_mode);
-  };
-  const handleSystemThemeChange = (event) => {
-    if (mode.value === "system") {
-      applyTheme(event.matches ? "dark" : "light");
-    }
-  };
-  onMounted(() => {
-    if (typeof localStorage !== "undefined") {
-      const stored = localStorage.getItem(merged_options.storage_key);
-      if (stored && ["light", "dark", "system"].includes(stored)) {
-        mode.value = stored;
-      }
-    }
-    if (typeof window !== "undefined") {
-      media_query = window.matchMedia("(prefers-color-scheme: dark)");
-      media_query.addEventListener("change", handleSystemThemeChange);
-    }
-    applyTheme(resolved_mode.value);
-  });
-  onUnmounted(() => {
-    if (media_query) {
-      media_query.removeEventListener("change", handleSystemThemeChange);
-    }
-  });
-  watch(mode, () => {
-    applyTheme(resolved_mode.value);
-  });
-  return {
-    mode,
-    resolved_mode,
-    setMode,
-    toggleMode
-  };
-}
-export function generateThemeCSS(light, dark) {
-  const formatColor = (key, value) => {
-    const css_key = key.replace(/_/g, "-");
-    return `  --${css_key}: ${value};`;
-  };
-  const lightCSS = Object.entries(light).map(([key, value]) => formatColor(key, value)).join("\n");
-  const darkCSS = Object.entries(dark).map(([key, value]) => formatColor(key, value)).join("\n");
-  return `:root {
-${lightCSS}
-}
-
-.dark {
-${darkCSS}
-}`;
-}