@opendesign-plus-test/components 0.0.1-rc.42 → 0.0.1-rc.45

package/src/draft/Footer.vue

@@ -176,7 +176,7 @@ $color: #fff;
     .atom-logo {
       height: 32px;
       margin-top: 12px;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin-top: 16px;
         height: 30px;
       }
@@ -186,7 +186,7 @@ $color: #fff;
   .footer-content {
     @include tip1;
     background: url('@/assets/category/footer/footer-bg.png') no-repeat bottom center;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       background: url('@/assets/category/footer/footer-bg-mo.png') no-repeat bottom center;
     }
     .quick-nav {
@@ -194,7 +194,7 @@ $color: #fff;
       display: flex;
       justify-content: space-between;
       max-width: 1140px;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         display: none;
       }
       .category {
@@ -229,7 +229,7 @@ $color: #fff;
       @include tip2;
       //TODO: 颜色变量
       border-bottom: 1px solid rgba(229, 229, 229, 0.12);
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         flex-direction: column;
         padding-bottom: 16px;
         .friendship-link-box {
@@ -239,7 +239,7 @@ $color: #fff;
       .friendship-link-title {
         color: var(--o-color-white);
         margin-right: 38px;
-        @include respond-to('<=pad') {
+        @include respond('<=pad') {
           margin-right: 24px;
           min-width: 48px;
         }
@@ -248,7 +248,7 @@ $color: #fff;
         white-space: nowrap;
         &:not(:last-of-type) {
           margin-right: 24px;
-          @include respond-to('<=pad') {
+          @include respond('<=pad') {
             margin-right: 12px;
           }
         }
@@ -264,7 +264,7 @@ $color: #fff;
       justify-content: space-between;
       padding: 8px 0 32px;
       position: relative;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin: 0 auto;
         padding: 12px 0 24px;
         flex-direction: column;
@@ -284,7 +284,8 @@ $color: #fff;
     .show-mo {
       display: none;
     }
-    @include respond-to('<=pad_v') {
+
+    @include respond('<=pad_v') {
       text-align: center;
       margin: 16px 0;
       .show-pc {
@@ -306,11 +307,11 @@ $color: #fff;
     display: flex;
     gap: var(--o-gap-2);
 
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       flex-direction: column;
       gap: 6px;
     }
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       margin-top: 4px;
       gap: 4px;
     }
@@ -338,7 +339,8 @@ $color: #fff;
     span {
       color: rgba(255, 255, 255, 0.6);
     }
-    @include respond-to('<=pad_v') {
+
+    @include respond('<=pad_v') {
       margin-top: 4px;
     }
   }
@@ -353,7 +355,8 @@ $color: #fff;
     .footer-option-item {
       align-items: center;
     }
-    @include respond-to('<=pad_v') {
+
+    @include respond('<=pad_v') {
       order: -1;
     }
   }
@@ -400,7 +403,8 @@ $color: #fff;
             transform: translateX(-50%);
             display: block;
           }
-          @include respond-to('<=pad_v') {
+
+          @include respond('<=pad_v') {
             display: block;
             position: initial;
             background: none;
@@ -419,17 +423,18 @@ $color: #fff;
             display: block;
           }
         }
-        @include respond-to('pad_h') {
+        @include respond('pad_h') {
           height: 18px;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           height: auto;
           > img {
             display: none;
           }
         }
       }
-      @include respond-to('<=pad_v') {
+
+      @include respond('<=pad_v') {
         justify-content: space-between;
       }
     }
@@ -446,11 +451,11 @@ $color: #fff;
         padding: 0 14px;
         background-color: #2b2b2f;
         border-radius: var(--o-radius-xs);
-        @include respond-to('pad_h') {
+        @include respond('pad_h') {
           height: 26px;
           padding: 0 8px;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           height: 26px;
           padding: 0 8px;
         }
@@ -458,10 +463,11 @@ $color: #fff;
           object-fit: cover;
         }
       }
-      @include respond-to('pad_h') {
+
+      @include respond('pad_h') {
         margin-left: 32px;
       }
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         justify-content: center;
         display: flex;
         text-align: center;
@@ -474,7 +480,8 @@ $color: #fff;
           padding: 0 9px;
           height: 20px;
         }
-        @include respond-to('<=pad') {
+
+        @include respond('<=pad') {
           display: flex;
           flex-wrap: wrap;
           text-align: center;
@@ -497,7 +504,7 @@ $color: #fff;
   .footer {
     .footer-content {
       .inner {
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           margin: 0 auto;
           max-width: fit-content;
           padding: 14px 0 24px;

package/src/draft/HorizontalAnchor.vue

@@ -54,7 +54,7 @@ useIntersectionObserver(target, ([entry]) => {
   background-color: var(--o-color-control2-light);
   @include text1;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     top: 48px;
     height: 54px;
   }
@@ -67,7 +67,7 @@ useIntersectionObserver(target, ([entry]) => {
     margin: 0 auto;
     height: 68px;
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       height: 54px;
     }
 
@@ -119,10 +119,10 @@ useIntersectionObserver(target, ([entry]) => {
   height: 48px;
   backdrop-filter: blur(10px);
   z-index: 10;
-  background-color: rgba($color: var(--o-mixedgray-1), $alpha: 0.25);
+  background-color: rgba($color: var(--o-grey-1), $alpha: 0.25);
   @include text1;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     display: none;
   }
 

package/src/draft/ItemSwiper.vue

@@ -68,7 +68,7 @@ defineProps({
 .swiper-list {
   display: flex;
   animation: marque 100s linear infinite;
-  @include respond-to('>phone') {
+  @include respond('>phone') {
     @include hover {
       animation-play-state: paused;
     }
@@ -124,7 +124,7 @@ defineProps({
   }
 }
 
-@include respond-to('phone') {
+@include respond('phone') {
   .swiper-card {
     width: 160px;
     margin-right: 12px;

package/src/draft/Logo.vue

@@ -110,15 +110,15 @@ const col = computed(() => {
   &+.partner-swiper {
     margin-top: 24px;
 
-    @include respond-to('laptop') {
+    @include respond('laptop') {
       margin-top: 20px;
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       margin-top: 16px;
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       margin-top: 12px;
     }
   }

package/src/draft/LogoCard.vue

@@ -64,11 +64,11 @@ const columns = computed(() => {
         height: 100%;
     }
 
-    @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
         height: 72px;
     }
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         height: 68px;
     }
 }

package/src/draft/MultiCard.vue

@@ -81,7 +81,7 @@ const coverRatio = computed(() => {
         margin-right: 0;
     }
 
-    @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
         :deep(.o-card-cover-img) {
             height: 120px;
         }

package/src/draft/MultiIconCard.vue

@@ -64,7 +64,7 @@ const gridTemplateColumns = computed(() => {
 }
 .o-card {
   --card-content-color: var(--o-color-info3);
-  @include respond-to("phone") {
+  @include respond("phone") {
     --card-header-text-size: 16px;
     --card-header-text-height: 24px;
     --card-content-text-size: 14px;

package/src/draft/OInfoCard.vue

@@ -78,7 +78,7 @@ watch(
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: relative;
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     background-size: auto var(--bg-height);
     height: auto;
     &.has-bg-img {
@@ -92,7 +92,7 @@ watch(
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       padding-bottom: var(--padding-bottom);
     }
   }
@@ -137,7 +137,7 @@ watch(
     }
   }
 
-  @include respond-to('>pad_v') {
+  @include respond('>pad_v') {
     :deep(.o-link-main) {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -163,7 +163,7 @@ watch(
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     border-top: 1px solid #edeff2;
     margin: 8px -12 px 0 -12px;
     padding: 0 12px;

package/src/draft/Section.vue

@@ -122,11 +122,11 @@ const props = withDefaults(defineProps<SectionPropsT>(), {
     color: var(--o-color-info2);
     @include text1;
 
-    @include respond-to('pad-laptop') {
+    @include respond('pad-laptop') {
       margin-top: 8px;
     }
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: 12px;
       text-align: center;
     }
@@ -151,11 +151,11 @@ const props = withDefaults(defineProps<SectionPropsT>(), {
 
     margin-top: 32px;
 
-    @include respond-to('<=laptop') {
+    @include respond('<=laptop') {
       margin-top: 16px;
     }
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: 12px;
     }
   }

package/src/draft/SingleTabCard.vue

@@ -76,7 +76,7 @@ defineProps({
 }
 
 .single-card {
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
         :deep(.o-figure-img) {
             height: 184px;
         }

package/src/draft/SliderCard.vue

@@ -67,13 +67,14 @@ const props = defineProps({
       border-radius: 6px;
     }
   }
-  @include respond-to('pc_s') {
+
+  @include respond('pc_s') {
     height: 300px;
   }
-  @include respond-to('<=laptop') {
+  @include respond('<=laptop') {
     height: 280px;
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     --slide-width: calc(100vw - 64px);
     width: calc(var(--slide-gap) + var(--slide-width));
     height: 184px;

package/src/i18n/en.ts

@@ -4,6 +4,16 @@ export default {
   'search.placeholder': 'Please enter the content',
   'search.expandedPlaceholder': 'Please enter the content',
   'search.history': 'History',
+  'search.imagePlaceholder': 'Search by text or upload image of any error',
+  'search.extendedPlaceholder': 'Press Enter to start, or refine your search with more info',
+  'search.imageUploadTooltip': 'JPG, PNG, JPEG supported (max 10 MB)',
+  'search.imageUploadFailed': 'Upload failed. Check connection and try again.',
+  'search.imageSizeExceeded': 'Image size exceeds the limit',
+  'search.imageInvalidType': 'Please upload an image file',
+  'search.onestep': 'Quick Navigation',
+  'search.suggest': 'Suggestions',
+  'search.noData': 'No data',
+  'search.suggestListLabel': 'Did you mean: ',
   'meeting.audioToText': 'Speech to Text',
   'meeting.item1': 'Convener: ',
   'meeting.item2': 'SIG: ',

package/src/i18n/zh.ts

@@ -4,6 +4,16 @@ export default {
   'search.placeholder': '搜索',
   'search.expandedPlaceholder': '请输入搜索内容',
   'search.history': '历史搜索',
+  'search.imagePlaceholder': '输入文字搜索，支持粘贴或上传报错截图',
+  'search.extendedPlaceholder': '按下回车立即搜索，或补充更多信息进行搜索',
+  'search.imageUploadTooltip': '报错截图搜索，支持jpg、png、jpeg等，最大10M',
+  'search.imageUploadFailed': '图片上传失败，请检查网络后重试',
+  'search.imageSizeExceeded': '图片大小超出限制',
+  'search.imageInvalidType': '请上传图片文件',
+  'search.onestep': '导航搜索直达',
+  'search.suggest': '搜索建议',
+  'search.noData': '暂无数据',
+  'search.suggestListLabel': '您是不是在寻找：',
   'meeting.audioToText': '语音转文字',
   'meeting.item1': '发起人：',
   'meeting.item2': 'SIG组：',

package/src/index.ts

@@ -33,6 +33,7 @@ export * from './components/element-plus';
 export * from './components/events';
 export * from './components/header';
 export * from './components/meeting';
+export * from './components/search';
 
 // 默认导出（用于Vue插件安装）
 export default {

package/vite.config.ts

@@ -67,6 +67,7 @@ export default defineConfig(({ mode }) => {
       alias: {
         vue: 'vue/dist/vue.esm-bundler.js',
         '@': path.resolve(__dirname, 'src'),
+        '@opendesign-plus/styles': path.resolve(__dirname, '../styles/src'),
       },
     },
     css: {
@@ -74,11 +75,11 @@ export default defineConfig(({ mode }) => {
         scss: {
           charset: false,
           additionalData: `
-          @use "@opendesign-plus/styles/mixin/screen.scss" as *;
+          @use '@opensig/opendesign/es/_styles/mixin.scss' as *;
           @use "@opendesign-plus/styles/mixin/font.scss" as *;
           @use "@opendesign-plus/styles/mixin/common.scss" as *;
           @use "@opendesign-plus/styles/mixin/gap.scss" as *;
-          @use "@opendesign-plus/styles/element-plus.css" as *;
+          @use "@opendesign-plus/styles/element-plus.scss" as *;
         `,
         },
       },
@@ -94,7 +95,7 @@ export default defineConfig(({ mode }) => {
         },
       }) as any,
       dts({
-        include: ['./src/components/**/*', './src/index.ts'],
+        include: ['./src/components/**/*', './src/index.ts', './src/*.d.ts'],
         exclude: ['./src/components/common/**/*']
       }),
       Icons({