@opendesign-plus-test/components 0.0.1-rc.82 → 0.0.1-rc.83

package/src/components/search/composables/useImageSearch.ts

@@ -1,157 +0,0 @@
-import { ref, onBeforeUnmount, type Ref } from 'vue';
-import type { OSearchUploadImageFn } from '../types';
-
-export interface UseImageSearchOptions {
-  uploadImage?: Ref<OSearchUploadImageFn | undefined>;
-  maxImageSize: Ref<number>;
-  allowedImageTypes?: Ref<string[]>;
-  onUploadStart?: (file: File) => void;
-  onUploadSuccess?: (url: string, file: File) => void;
-  onUploadError?: (error: unknown, file: File) => void;
-  onValidationError?: (reason: 'size' | 'type', file: File) => void;
-}
-
-export function useImageSearch(options: UseImageSearchOptions) {
-  const previewUrl = ref('');
-  const file = ref<File | null>(null);
-  const uploadedUrl = ref('');
-  const isUploading = ref(false);
-  let uploadPromise: Promise<void> | null = null;
-
-  const validate = (f: File) => {
-    const allowed = options.allowedImageTypes?.value;
-    const typeOk = allowed && allowed.length > 0 ? allowed.includes(f.type) : f.type?.startsWith('image/');
-    if (!f.type || !typeOk) {
-      options.onValidationError?.('type', f);
-      return false;
-    }
-    if (options.maxImageSize.value > 0 && f.size > options.maxImageSize.value) {
-      options.onValidationError?.('size', f);
-      return false;
-    }
-    return true;
-  };
-
-  const reset = () => {
-    if (previewUrl.value) {
-      try {
-        URL.revokeObjectURL(previewUrl.value);
-      } catch {
-        // ignore
-      }
-    }
-    previewUrl.value = '';
-    file.value = null;
-    uploadedUrl.value = '';
-    isUploading.value = false;
-    uploadPromise = null;
-  };
-
-  const setExternalUrl = (url: string) => {
-    if (!url) {
-      if (!file.value) reset();
-      return;
-    }
-    if (uploadedUrl.value === url) return;
-    if (previewUrl.value && previewUrl.value.startsWith('blob:')) {
-      try {
-        URL.revokeObjectURL(previewUrl.value);
-      } catch {
-        // ignore
-      }
-    }
-    uploadedUrl.value = url;
-    previewUrl.value = url;
-    file.value = null;
-  };
-
-  const handleImageFile = (f: File) => {
-    if (!validate(f)) return;
-
-    reset();
-    file.value = f;
-    previewUrl.value = URL.createObjectURL(f);
-    options.onUploadStart?.(f);
-
-    const fn = options.uploadImage?.value;
-    if (!fn) {
-      return;
-    }
-
-    isUploading.value = true;
-    uploadPromise = Promise.resolve()
-      .then(() => fn(f))
-      .then((url) => {
-        if (url && file.value === f) {
-          uploadedUrl.value = url;
-          options.onUploadSuccess?.(url, f);
-        }
-      })
-      .catch((err) => {
-        options.onUploadError?.(err, f);
-      })
-      .finally(() => {
-        isUploading.value = false;
-      });
-  };
-
-  const onPaste = (event: ClipboardEvent) => {
-    const items = event.clipboardData?.items;
-    if (!items) return;
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (item.type.startsWith('image/')) {
-        const f = item.getAsFile();
-        if (f) handleImageFile(f);
-        break;
-      }
-    }
-  };
-
-  const onDragOver = (event: DragEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  const onDrop = (event: DragEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    const f = event.dataTransfer?.files?.[0];
-    if (f && f.type.startsWith('image/')) {
-      handleImageFile(f);
-    }
-  };
-
-  const onFileChange = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-    const f = target.files?.[0];
-    if (f) handleImageFile(f);
-    if (target) target.value = '';
-  };
-
-  const pickFile = (input: HTMLInputElement | undefined) => {
-    if (!input) return;
-    input.value = '';
-    input.click();
-  };
-
-  const awaitUpload = () => uploadPromise ?? Promise.resolve();
-
-  onBeforeUnmount(reset);
-
-  return {
-    previewUrl,
-    file,
-    uploadedUrl,
-    isUploading,
-    onPaste,
-    onDrop,
-    onDragOver,
-    onFileChange,
-    pickFile,
-    handleImageFile,
-    reset,
-    setExternalUrl,
-    awaitUpload,
-  };
-}

package/src/components/search/composables/useKeywordHighlight.ts

@@ -1,30 +0,0 @@
-import type { OSearchHighlightPart } from '../types';
-
-const ESCAPE_RE = /[.*+?^${}()|[\]\\]/g;
-
-export function highlightKeywordParts(text: string, keyword: string): OSearchHighlightPart[] {
-  const k = (keyword || '').trim();
-  if (!k) return [{ text, match: false }];
-
-  const escaped = k.replace(ESCAPE_RE, '\\$&');
-  const re = new RegExp(escaped, 'gi');
-  const parts: OSearchHighlightPart[] = [];
-  let lastIndex = 0;
-  let m: RegExpExecArray | null;
-
-  while ((m = re.exec(text)) !== null) {
-    if (m.index === re.lastIndex) {
-      re.lastIndex++;
-      continue;
-    }
-    if (m.index > lastIndex) {
-      parts.push({ text: text.slice(lastIndex, m.index), match: false });
-    }
-    parts.push({ text: m[0], match: true });
-    lastIndex = m.index + m[0].length;
-  }
-  if (lastIndex < text.length) {
-    parts.push({ text: text.slice(lastIndex), match: false });
-  }
-  return parts;
-}

package/src/components/search/composables/useSearchHistory.ts

@@ -1,75 +0,0 @@
-import { ref, watch, onMounted, type Ref } from 'vue';
-
-export interface UseSearchHistoryOptions {
-  initial: Ref<string[]>;
-  storageKey: Ref<string>;
-  storeHistory: Ref<boolean>;
-  maxHistoryCount: Ref<number>;
-  onChange?: (items: string[]) => void;
-}
-
-export function useSearchHistory(options: UseSearchHistoryOptions) {
-  const { initial, storageKey, storeHistory, maxHistoryCount, onChange } = options;
-  const items = ref<string[]>([...initial.value]);
-
-  const persist = () => {
-    if (!storeHistory.value || typeof localStorage === 'undefined') return;
-    try {
-      if (items.value.length) {
-        localStorage.setItem(storageKey.value, JSON.stringify(items.value));
-      } else {
-        localStorage.removeItem(storageKey.value);
-      }
-    } catch {
-      // ignore
-    }
-  };
-
-  const setItems = (next: string[]) => {
-    items.value = next;
-    persist();
-    onChange?.(items.value);
-  };
-
-  const loadFromStorage = () => {
-    if (!storeHistory.value || typeof localStorage === 'undefined') return;
-    try {
-      const raw = localStorage.getItem(storageKey.value);
-      if (!raw) return;
-      const parsed = JSON.parse(raw);
-      if (Array.isArray(parsed) && parsed.length) {
-        const merged = Array.from(new Set<string>([...parsed, ...items.value]));
-        items.value = merged.slice(0, maxHistoryCount.value);
-        onChange?.(items.value);
-      }
-    } catch {
-      // ignore
-    }
-  };
-
-  const push = (val: string) => {
-    const v = val?.trim();
-    if (!v) return;
-    const next = [v, ...items.value.filter((i) => i !== v)];
-    if (next.length > maxHistoryCount.value) next.length = maxHistoryCount.value;
-    setItems(next);
-  };
-
-  const remove = (val: string) => {
-    setItems(items.value.filter((i) => i !== val));
-  };
-
-  const clearAll = () => {
-    setItems([]);
-  };
-
-  watch(initial, (val) => {
-    if (val !== items.value) {
-      items.value = [...val];
-    }
-  });
-
-  onMounted(loadFromStorage);
-
-  return { items, push, remove, clearAll };
-}

package/src/components/search/index.ts

@@ -1,23 +0,0 @@
-import _OSearchInput from './OSearchInput.vue';
-import type { App } from 'vue';
-
-const OSearchInput = Object.assign(_OSearchInput, {
-  install(app: App) {
-    app.component('OSearchInput', _OSearchInput);
-  },
-});
-
-export { OSearchInput };
-
-export type {
-  OSearchRecommendItem,
-  OSearchPayload,
-  OSearchImageUploadErrorPayload,
-  OSearchUploadImageFn,
-  OSearchItemClickType,
-  OSearchHighlightPart,
-} from './types';
-
-// Public prop type aliases (re-exported from .vue SFCs).
-// Vue SFC type shims don't always re-export named types, so consumers should rely on
-// ComponentProps<typeof Component> if they need props typing.

package/src/components/search/internal/HighlightText.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { highlightKeywordParts } from '../composables/useKeywordHighlight';
-
-const props = withDefaults(
-  defineProps<{
-    text: string;
-    keyword: string;
-    enabled?: boolean;
-  }>(),
-  {
-    enabled: true,
-  }
-);
-
-const parts = computed(() => {
-  if (!props.enabled || !props.keyword) {
-    return [{ text: props.text, match: false }];
-  }
-  return highlightKeywordParts(props.text, props.keyword);
-});
-</script>
-
-<template>
-  <span class="o-search-highlight-text">
-    <span v-for="(p, idx) in parts" :key="idx" :class="{ 'is-match': p.match }">{{ p.text }}</span>
-  </span>
-</template>
-
-<style lang="scss" scoped>
-.o-search-highlight-text {
-  .is-match {
-    color: var(--o-color-primary1);
-    font-weight: 600;
-  }
-}
-</style>