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

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>