@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

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/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>

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

@@ -1,498 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue';
-import { OFigure, OIcon, OInput, OPopover } from '@opensig/opendesign';
-import { useImageSearch } from '../composables/useImageSearch';
-import { useI18n } from '@/i18n';
-import type { OSearchUploadImageFn } from '../types';
-
-import IconSearch from '~icons/components/icon-header-search.svg';
-import IconClose from '~icons/components/icon-close.svg';
-import IconImageUpload from '~icons/components/icon-image-upload.svg';
-import IconImageClose from '~icons/components/icon-delete-hover.svg';
-import IconImageZoomin from '~icons/components/icon-image-zoomin.svg';
-
-export interface SearchImageInputPropsT {
-  modelValue?: string;
-  imageUrl?: string;
-  placeholder?: string;
-  imagePlaceholder?: string;
-  size?: 'small' | 'medium' | 'large';
-  enableImageSearch?: boolean;
-  uploadImage?: OSearchUploadImageFn;
-  maxImageSize?: number;
-  imageUploadTooltip?: string;
-  /** Show preview block below input when true and image staged */
-  expanded?: boolean;
-  /** Whether to render the clear icon when there is content */
-  clearable?: boolean;
-  /** Show the right suffix area (upload + clear). When false, suffix is empty. */
-  showSuffix?: boolean;
-  /** When true, render thumbnail inline inside prefix area (compact mode) */
-  inlineThumbnail?: boolean;
-  preview?: boolean;
-  disabled?: boolean;
-  allowedImageTypes?: string[];
-}
-
-const props = withDefaults(defineProps<SearchImageInputPropsT>(), {
-  modelValue: '',
-  imageUrl: '',
-  size: 'medium',
-  enableImageSearch: false,
-  maxImageSize: 10 * 1024 * 1024,
-  expanded: true,
-  clearable: true,
-  showSuffix: true,
-  inlineThumbnail: false,
-  preview: true,
-  disabled: false,
-  allowedImageTypes: () => ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
-});
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', val: string): void;
-  (e: 'update:imageUrl', url: string): void;
-  (e: 'focus', ev: FocusEvent): void;
-  (e: 'blur', ev: FocusEvent): void;
-  (e: 'enter'): void;
-  (e: 'clear'): void;
-  (e: 'image-clear'): void;
-  (e: 'image-upload-start', file: File): void;
-  (e: 'image-upload-success', url: string, file: File): void;
-  (e: 'image-upload-error', error: unknown, file: File): void;
-  (e: 'image-validate-error', reason: 'size' | 'type', file: File): void;
-  (e: 'preview-change', visible: boolean): void;
-}>();
-
-const { t } = useI18n();
-
-const uploadImageRef = computed(() => props.uploadImage);
-const maxImageSizeRef = computed(() => props.maxImageSize);
-const allowedImageTypesRef = computed(() => props.allowedImageTypes);
-const acceptAttr = computed(() => (props.allowedImageTypes ?? []).join(','));
-
-const image = useImageSearch({
-  uploadImage: uploadImageRef,
-  maxImageSize: maxImageSizeRef,
-  allowedImageTypes: allowedImageTypesRef,
-  onUploadStart: (file) => emit('image-upload-start', file),
-  onUploadSuccess: (url, file) => {
-    emit('update:imageUrl', url);
-    emit('image-upload-success', url, file);
-  },
-  onUploadError: (error, file) => emit('image-upload-error', error, file),
-  onValidationError: (reason, file) => emit('image-validate-error', reason, file),
-});
-
-const fileInputRef = ref<HTMLInputElement>();
-const inputRef = ref<InstanceType<typeof OInput>>();
-const uploadBtnRef = ref<HTMLElement | null>(null);
-
-const innerValue = computed({
-  get: () => props.modelValue,
-  set: (val: string) => emit('update:modelValue', val),
-});
-
-watch(
-  () => props.imageUrl,
-  (val) => {
-    image.setExternalUrl(val);
-  },
-  { immediate: true }
-);
-
-const showThumbnail = computed(() => !!image.previewUrl.value);
-
-const placeholder = computed(() => {
-  if (showThumbnail.value) {
-    return props.imagePlaceholder ?? t('search.extendedPlaceholder');
-  }
-  return props.placeholder ?? t('search.placeholder');
-});
-
-const handleClear = () => {
-  innerValue.value = '';
-  if (showThumbnail.value) {
-    handleImageClear();
-  }
-  emit('clear');
-};
-
-const handleImageClear = () => {
-  image.reset();
-  emit('update:imageUrl', '');
-  emit('image-clear');
-};
-
-const handleUploadClick = () => {
-  image.pickFile(fileInputRef.value);
-  nextTick(() => inputRef.value?.focus?.());
-};
-
-const handleFileSelect = (event: Event) => {
-  image.onFileChange(event);
-  nextTick(() => inputRef.value?.focus?.());
-};
-
-const handlePaste = (event: ClipboardEvent) => {
-  if (!props.enableImageSearch) return;
-  image.onPaste(event);
-};
-
-const handleDragOver = (event: DragEvent) => {
-  if (!props.enableImageSearch) return;
-  image.onDragOver(event);
-};
-
-const handleDrop = (event: DragEvent) => {
-  if (!props.enableImageSearch) return;
-  image.onDrop(event);
-};
-
-const onPreviewChange = (visible: boolean) => {
-  emit('preview-change', visible);
-};
-
-const hasValue = computed(() => !!innerValue.value || showThumbnail.value);
-
-const awaitUpload = () => image.awaitUpload();
-
-defineExpose({
-  focus: () => inputRef.value?.focus?.(),
-  blur: () => inputRef.value?.blur?.(),
-  awaitUpload,
-  getUploadedUrl: () => image.uploadedUrl.value,
-  getIsUploading: () => image.isUploading.value,
-  resetImage: () => {
-    image.reset();
-    emit('update:imageUrl', '');
-  },
-});
-</script>
-
-<template>
-  <div
-    class="o-search-image-input"
-    :class="{ 'has-image': showThumbnail, 'is-expanded': expanded && showThumbnail }"
-    @dragover="handleDragOver"
-    @drop="handleDrop"
-  >
-    <div class="o-search-image-input-row">
-      <OInput
-        ref="inputRef"
-        v-model="innerValue"
-        :placeholder="placeholder"
-        :size="size"
-        :disabled="disabled"
-        class="o-search-image-input-input"
-        @pressEnter="emit('enter')"
-        @focus="(e: FocusEvent) => emit('focus', e)"
-        @blur="(e: FocusEvent) => emit('blur', e)"
-        @paste="handlePaste"
-      >
-        <template #prefix>
-          <slot name="prefix">
-            <OIcon class="o-search-image-input-icon">
-              <IconSearch />
-            </OIcon>
-          </slot>
-          <div v-if="inlineThumbnail && showThumbnail" class="o-search-image-input-thumb">
-            <OFigure :src="image.previewUrl.value" alt="" class="o-search-image-input-thumb-figure" />
-            <div class="o-search-image-input-thumb-zoom" @mousedown.prevent>
-              <OIcon class="o-search-image-input-thumb-zoom-icon"><IconImageZoomin /></OIcon>
-            </div>
-            <OIcon class="o-search-image-input-thumb-remove" @mousedown.prevent @click.stop="handleImageClear">
-              <IconImageClose />
-            </OIcon>
-          </div>
-        </template>
-
-        <template v-if="showSuffix" #suffix>
-          <slot name="suffix" :has-value="hasValue">
-            <span v-if="enableImageSearch" ref="uploadBtnRef" class="o-search-image-input-upload-btn">
-              <OIcon class="o-search-image-input-icon upload" @click.stop="handleUploadClick">
-                <IconImageUpload />
-              </OIcon>
-            </span>
-            <OPopover
-              v-if="enableImageSearch && uploadBtnRef"
-              trigger="hover"
-              position="bottom"
-              :target="uploadBtnRef"
-              body-class="o-search-image-input-tooltip"
-            >
-              {{ imageUploadTooltip ?? t('search.imageUploadTooltip') }}
-            </OPopover>
-            <OIcon
-              v-if="clearable && hasValue"
-              class="o-search-image-input-icon close"
-              @mousedown.prevent
-              @click.stop="handleClear"
-            >
-              <IconClose />
-            </OIcon>
-          </slot>
-        </template>
-      </OInput>
-    </div>
-
-    <div v-if="expanded && showThumbnail" class="o-search-image-input-preview">
-      <slot name="preview" :preview-url="image.previewUrl.value" :remove="handleImageClear">
-        <div class="o-search-image-input-preview-wrapper">
-          <OFigure
-            :src="image.previewUrl.value"
-            :preview="preview"
-            alt=""
-            class="o-search-image-input-preview-figure"
-            @preview="onPreviewChange"
-          />
-          <div class="o-search-image-input-preview-zoom">
-            <OIcon class="o-search-image-input-preview-zoom-icon"><IconImageZoomin /></OIcon>
-          </div>
-          <OIcon class="o-search-image-input-preview-remove" @click.stop="handleImageClear">
-            <IconImageClose />
-          </OIcon>
-        </div>
-      </slot>
-    </div>
-
-    <input
-      v-if="enableImageSearch"
-      ref="fileInputRef"
-      type="file"
-      :accept="acceptAttr"
-      class="o-search-image-input-file"
-      @change="handleFileSelect"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.o-search-image-input {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid transparent;
-  border-radius: var(--o-radius-xs);
-  background-color: var(--o-color-fill2);
-  transition: border-color var(--o-duration-m1);
-
-  &.is-expanded {
-    border-color: var(--o-color-primary1);
-
-    :deep(.o-input.el-input .el-input__wrapper),
-    :deep(.o_box-main) {
-      border: none !important;
-      border-radius: var(--o-radius-xs) var(--o-radius-xs) 0 0;
-      box-shadow: none !important;
-    }
-  }
-}
-
-.o-search-image-input-row {
-  display: flex;
-  align-items: center;
-}
-
-.o-search-image-input-input {
-  width: 100%;
-}
-
-.o-search-image-input-icon {
-  cursor: pointer;
-  color: var(--o-color-info1);
-  font-size: 16px;
-
-  &.close {
-    font-size: 16px;
-    @include x-svg-hover;
-  }
-
-  &.upload {
-    fill: var(--o-color-info1);
-  }
-}
-
-.o-search-image-input-upload-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  margin-right: 8px;
-  cursor: pointer;
-  flex-shrink: 0;
-
-  @include hover {
-    background-color: var(--o-color-control2-light);
-
-    .o-search-image-input-icon.upload {
-      color: var(--o-color-primary2);
-    }
-  }
-}
-
-.o-search-image-input-file {
-  display: none;
-}
-
-.o-search-image-input-thumb {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 8px;
-  position: relative;
-  overflow: visible;
-  flex-shrink: 0;
-
-  @include hover {
-    .o-search-image-input-thumb-remove,
-    .o-search-image-input-thumb-zoom {
-      opacity: 1;
-    }
-  }
-}
-
-.o-search-image-input-thumb-figure {
-  height: 40px;
-  width: 40px;
-  border-radius: 4px;
-  overflow: hidden;
-
-  :deep(img) {
-    height: 40px;
-    width: 40px;
-    object-fit: cover;
-    object-position: center;
-    border-radius: 4px;
-  }
-
-  @include respond-to('pad_v-pc_s') {
-    height: 32px;
-    width: 32px;
-  }
-
-  @include respond-to('<=pad_v') {
-    height: 24px;
-    width: 24px;
-  }
-}
-
-.o-search-image-input-thumb-zoom {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  pointer-events: auto;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity var(--o-duration-m1);
-
-  .o-search-image-input-thumb-zoom-icon {
-    color: #fff;
-    font-size: 16px;
-  }
-}
-
-.o-search-image-input-thumb-remove {
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  width: 16px;
-  height: 16px;
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  opacity: 0;
-  z-index: 1;
-  transition: opacity var(--o-duration-m1);
-
-  :deep(svg) {
-    width: 16px;
-    height: 16px;
-    fill: rgb(var(--o-mixedgray-9));
-  }
-}
-
-.o-search-image-input-preview {
-  padding: 0 12px 8px;
-
-  .o-search-image-input-preview-wrapper {
-    position: relative;
-    display: inline-flex;
-    overflow: visible;
-    margin-top: 8px;
-
-    @include hover {
-      .o-search-image-input-preview-remove,
-      .o-search-image-input-preview-zoom {
-        opacity: 1;
-      }
-    }
-  }
-
-  .o-search-image-input-preview-zoom {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity var(--o-duration-m1);
-
-    .o-search-image-input-preview-zoom-icon {
-      color: #fff;
-      font-size: 24px;
-    }
-  }
-
-  .o-search-image-input-preview-figure {
-    height: 72px;
-    width: 72px;
-    border-radius: 4px;
-    overflow: hidden;
-
-    :deep(img) {
-      height: 72px;
-      width: 72px;
-      object-fit: cover;
-      object-position: center;
-      border-radius: 4px;
-    }
-  }
-
-  .o-search-image-input-preview-remove {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    width: 16px;
-    height: 16px;
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    opacity: 0;
-    z-index: 1;
-    transition: opacity var(--o-duration-m1);
-
-    :deep(svg) {
-      width: 16px;
-      height: 16px;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.o-search-image-input-tooltip {
-  padding: var(--o-gap-3) var(--o-gap-4);
-  max-width: 240px;
-  @include tip2;
-}
-</style>