@opendesign-plus/components 0.0.1-rc.3 → 0.0.1-rc.30

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

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,37 @@
+<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>