@tplc/business 0.0.38 → 0.0.39

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.39](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.38...v0.0.39) (2024-10-23)
+
+
+### ✨ Features | 新功能
+
+* 优化 lcb-list 相关逻辑 ([c81aeb8](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c81aeb8e0f9b3b5931f6c227133e2b7a314fa089))
+* 优化 product-item 实现 ([40ad6c6](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/40ad6c6ee4beb15a66210771b2e32972484a0341))
+* 修改返回按钮尺寸 ([7c946aa](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/7c946aa3cd4c9d02b663044618eededa8542ba8b))
+
 ### [0.0.38](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.17...v0.0.38) (2024-10-22)
 
 

package/components/lcb-list/api.ts

@@ -62,6 +62,6 @@ interface BtnComponent {
 }
 
 export const getFilterDetail = (val: string) =>
-  uni.$lcb.http.post<LcbFilterResult>('/pageDecoration/list//detail', {
+  uni.$lcb.http.post<LcbFilterResult>('/pageDecoration/list/detail', {
     pageListType: val,
   })

package/components/lcb-list/components/FilterList/index.vue

@@ -7,7 +7,7 @@
     @query="queryList"
     use-page-scroll
   >
-    <lcb-product v-bind="{ ...productProps }" :items="normalizeDataList" />
+    <lcb-product v-bind="{ ...productProps }" :listType="listType" :items="normalizeDataList" />
   </z-paging>
 </template>
 
@@ -40,9 +40,11 @@ const normalizeDataList = computed(() => {
       title: item?.productName,
       tags,
       price: item?.price,
+      location: item?.cityAreaName,
+      priceSuffix: item?.behindUnit,
     }
   })
-  console.log('list', list)
+  // console.log('list', list)
 
   return list
 })
@@ -87,12 +89,12 @@ const queryList = async (page: number, limit: number) => {
   }
 }
 
-watch(
-  () => dataList.value,
-  () => {
-    console.log('dataList', dataList.value)
-  },
-)
+// watch(
+//   () => dataList.value,
+//   () => {
+//     console.log('dataList', dataList.value)
+//   },
+// )
 </script>
 <style lang="scss" scoped>
 .action-view {

package/components/lcb-list/components/FilterList/type.ts

@@ -2,8 +2,10 @@ import { LcbListInfo } from '../../api'
 import { LcbProductProps } from '../../../lcb-product/types'
 export interface PageListProps {
   emptyImage?: string
+  listType?: LcbProductProps['listType']
   productProps?: LcbProductProps
 }
 export interface LcbFilterListProps extends PageListProps, LcbListInfo {
   filter?: Record<string, any>
+  test?: any
 }

package/components/lcb-list/lcb-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <view v-if="info">
+  <view v-if="info" class="bg-gray-100">
     <wd-sticky @sticky="sticky = $event" :offset-top="0.0001">
       <view
         :class="{
@@ -67,13 +67,13 @@
       </view>
     </wd-sticky>
 
-    <FilterList v-bind="{ ...info.listInfo, ...pageListProps, filter }" />
+    <FilterList v-bind="{ ...info.listInfo, listType, filter }" test2="11" />
   </view>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, Ref, ref, watch } from 'vue'
-import { LcbListProps } from './types'
+import { LcbListProps, defaultLcbListProps } from './types'
 import { FilterComponent, getFilterDetail, LcbFilterResult } from './api'
 import FilterSelect from './components/FilterSelect/index.vue'
 import TreeSelect from './components/TreeSelect/index.vue'
@@ -83,6 +83,7 @@ import FilterList from './components/FilterList/index.vue'
 import FilterTabs from './components/FilterTabs/index.vue'
 import './index.scss'
 import { FORM_KEY } from '../../constants'
+
 defineOptions({
   name: 'LcbList',
   options: {
@@ -93,23 +94,14 @@ defineOptions({
 })
 const form = inject<Ref<Record<string, any>>>(FORM_KEY)
 const dropMenu = ref()
-const props = withDefaults(defineProps<LcbListProps>(), {
-  pageFilterType: 'hotelTravelFilter',
-  border: true,
-  styleMode: 'default',
-  pageListProps: () => ({
-    productProps: {
-      styleGroup: 1,
-    },
-  }),
-})
+const props = withDefaults(defineProps<LcbListProps>(), defaultLcbListProps as any)
 const info = ref<LcbFilterResult>()
 const filter = ref<Record<string, any>>({})
 const titleObj = ref<Record<string, any>>({})
 /** 是否悬停 */
 const sticky = ref(false)
 const showPlain = computed(() => {
-  console.log(props.styleMode, sticky.value, 'showPlain')
+  // console.log(props.styleMode, sticky.value, 'showPlain')
   return props.styleMode === 'plain' && !sticky.value
 })
 watch(

package/components/lcb-list/types.ts

@@ -1,10 +1,12 @@
 import { PageListProps } from './components/FilterList/type'
+import { LcbProductProps } from '../lcb-product/types'
 
 export interface LcbListProps {
   pageFilterType?: string
   pageListProps?: PageListProps
   border?: boolean
   styleMode?: 'default' | 'plain'
+  listType?: LcbProductProps['listType']
 }
 export interface Option {
   label: string
@@ -20,4 +22,18 @@ export interface FilterItemProps {
   mode?: 'multiple' | 'single'
   apiPath?: string
   options?: Option[]
+  test?: 1
+}
+
+export const defaultLcbListProps: LcbListProps = {
+  pageFilterType: 'hotelTravelFilter',
+  border: true,
+  styleMode: 'default',
+  listType: 'grid',
+  // @ts-ignore
+  pageListProps: () => ({
+    productProps: {
+      // listType: 'list',
+    },
+  }),
 }

package/components/lcb-nav/lcb-nav.vue

@@ -47,7 +47,13 @@
           </view>
         </view>
         <template v-else-if="back">
-          <wd-icon class-prefix="lcb" name="zuo_left" @click="toBack" :color="contentColor" />
+          <wd-icon
+            class-prefix="lcb"
+            name="zuo_left"
+            @click="toBack"
+            :color="contentColor"
+            size="44rpx"
+          />
         </template>
         <view class="ml-2" v-if="titleLocation === 'left'">
           <Search

package/components/lcb-product/lcb-product.vue

@@ -1,17 +1,34 @@
 <template>
   <lcb-block v-bind="$props">
-    <template v-if="styleGroup !== 2">
-      <view class="flex flex-col gap-2 p-2">
-        <view v-for="(item, index) in items" :key="`${item?.productId}:${index}`">
-          <!-- <view>{{  JSON.stringify(item) }}</view> -->
-          <lcb-product-item v-bind="item" />
+    <view class="flex flex-col gap-2 p-2" v-if="listType === 'list'">
+      <view v-for="(item, index) in items" :key="`${item?.productId}:${index}`">
+        <lcb-product-item v-bind="item" />
+      </view>
+    </view>
+
+    <view class="flex p-1 flex-wrap" v-if="listType === 'grid'">
+      <view v-for="(item, index) in items" :key="`${item?.productId}:${index}`" class="w-1/2">
+        <view class="p-1 overflow-hidden">
+          <view class="rounded overflow-hidden h-560rpx">
+            <lcb-product-item
+              v-bind="item"
+              layoutType="vertical"
+              class="!h-560rpx"
+              imageClass="!h-300rpx"
+            />
+          </view>
         </view>
       </view>
-    </template>
-    <scroll-view v-if="styleGroup == 2" scroll-x class="w-full whitespace-nowrap">
-      <view class="flex shrink-0">
-        <view v-for="(item, index) in items" :key="index">
-          <lcb-product-item :styleProps="styleProps" :idx="index" v-bind="item" />
+    </view>
+
+    <scroll-view v-if="listType == 'horizontal'" scroll-x>
+      <view class="p-2 flex gap-2 whitespace-nowrap overflow-auto flex-nowrap">
+        <view
+          v-for="(item, index) in items"
+          :key="`${item?.productId}:${index}`"
+          class="!w-66vw flex-shrink-0"
+        >
+          <lcb-product-item v-bind="item" imageClass="!w-1/2" />
         </view>
       </view>
     </scroll-view>
@@ -20,7 +37,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { LcbProductProps } from './types'
+import { LcbProductProps, defaultLcbProductProps } from './types'
 defineOptions({
   name: 'LcbProduct',
   options: {
@@ -29,21 +46,7 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
-const props = withDefaults(defineProps<LcbProductProps>(), {})
-const styleProps = computed(() => {
-  // console.log('props.items', JSON.stringify(props.items))
-  return {
-    styleGroup: props.styleGroup,
-    productStyle: props.productStyle,
-    productTitle: props.productTitle,
-    showTags: props.showTags,
-    showPrice: props.showPrice,
-    showScribePrice: props.showScribePrice,
-    showCart: props.showCart,
-    showLocation: props.showLocation,
-    showCollection: props.showCollection,
-  }
-})
+const props = withDefaults(defineProps<LcbProductProps>(), defaultLcbProductProps as any)
 </script>
 
 <style lang="scss" scoped></style>

package/components/lcb-product/types.ts

@@ -1,14 +1,10 @@
 export interface LcbProductProps {
   // Define the component's prop types here
-  styleGroup?: 1 | 2 | 3 | 4 // 1列表 2 左右滑动 3一行两个 4瀑布流
-  items?: Record<string, any>
-  marginHorizontal?: number
-  productStyle?: 'image' | 'flat' | 'card' | 'border' // 图片, 扁平, 卡片, 描边
-  productTitle?: 0 | 1 | 2 // 0默认 1 1行 2 2行
-  showTags?: boolean
-  showPrice?: boolean
-  showScribePrice?: boolean
-  showCart?: boolean
-  showLocation?: boolean
-  showCollection?: boolean
+  listType?: 'list' | 'horizontal' | 'grid' | 'waterfall' // 1列表 2 左右滑动 3一行两个 4瀑布流
+  items?: Record<string, any>[]
+}
+
+export const defaultLcbProductProps: LcbProductProps = {
+  listType: 'list',
+  items: [],
 }

package/components/lcb-product-item/lcb-product-item.vue

@@ -1,8 +1,15 @@
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
 import { transformValueUnit } from '../../utils/transform'
-import { LcbProductItemProps } from './types'
+import { LcbProductItemProps, defaultLcbProductItemProps } from './types'
 import { formatJson } from '../../utils/utils'
+import { createReusableTemplate } from '../../utils/createReuse'
+import { isArray } from '@tplc/wot/components/common/util'
+
+const [DefineMainContent, MainContent] = createReusableTemplate()
+const [DefineSectionWrapper, SectionWrapper] = createReusableTemplate()
+const [DefineSection, Section] = createReusableTemplate()
+const [DefineSectionGroup, SectionGroup] = createReusableTemplate()
 
 defineOptions({
   name: 'LcbProductItem',
@@ -13,49 +20,141 @@ defineOptions({
   },
 })
 
-const props = withDefaults(defineProps<LcbProductItemProps>(), {
-  layoutType: 1,
-  priceUnit: '¥',
-  originPriceUnit: '¥',
-  lowestPriceUnit: '¥',
-})
+const props = withDefaults(defineProps<LcbProductItemProps>(), defaultLcbProductItemProps)
 const attrs = useAttrs()
 
 // console.log('attrs', attrs)
 </script>
 
 <template>
-  <view v-if="layoutType === 1" class="flex gap-2 px-2 py-3 bg-white">
-    <view class="w-1/3 h-220rpx bg-coolgray/90 rounded-sm overflow-hidden">
+  <!-- 内容容器定义 -->
+  <DefineSectionWrapper v-slot="{ prop, $slots, class: className }">
+    <view
+      v-if="
+        (props?.[`${prop}Visible`] ?? true) &&
+        !!props?.[`${prop}`] &&
+        (isArray(props?.[`${prop}`]) ? props?.[`${prop}`]?.length > 0 : true)
+      "
+      :class="[className, props?.[`${prop}Class`]]"
+    >
+      <component v-if="!!$slots.default" :is="$slots.default" />
+      <view v-else>{{ props?.[`${prop}`] }}</view>
+    </view>
+  </DefineSectionWrapper>
+
+  <!-- 定义各个内容展示节点 -->
+  <DefineSection v-slot="{ prop, class: className }">
+    <!-- 图片 -->
+    <SectionWrapper v-if="prop === 'image'" prop="image" :class="className">
       <image :src="image" class="w-full h-full" mode="aspectFill" />
+    </SectionWrapper>
+
+    <!-- 标题 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'title'"
+      prop="title"
+      class="text-ellipsis line-clamp-2"
+    />
+
+    <!-- 位置 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'location'"
+      prop="location"
+      class="text-gray-500 text-22rpx flex gap-3rpx items-center"
+    >
+      <wd-icon name="location" size="32rpx"></wd-icon>
+      <view>{{ location }}</view>
+    </SectionWrapper>
+
+    <!-- 标签 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'tags'"
+      prop="tags"
+      class="flex gap-1 whitespace-nowrap overflow-auto"
+    >
+      <wd-tag
+        v-for="tag in tags"
+        :key="tag"
+        class="!text-20rpx"
+        :class="tagsClass"
+        plain
+        type="primary"
+      >
+        {{ tag }}
+      </wd-tag>
+    </SectionWrapper>
+
+    <!-- 价格单位 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'priceUnit'"
+      prop="priceUnit"
+      class="text-red-500 font-bold text-22rpx"
+    />
+
+    <!-- 价格 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'price'"
+      prop="price"
+      class="text-red-500 font-bold text-27rpx"
+    />
+
+    <!-- 价格后缀 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'priceSuffix'"
+      prop="priceSuffix"
+      class="text-22rpx"
+    />
+
+    <!-- 价格区域 -->
+  </DefineSection>
+
+  <!-- 内容组定义 -->
+  <DefineSectionGroup v-slot="{ group, class: className }">
+    <view :class="className">
+      <Section v-for="prop in group" :prop="prop" :key="prop" />
     </view>
-    <view class="flex flex-col flex-1 justify-between text-26rpx overflow-hidden">
-      <view class="flex flex-col gap-2 overflow-hidden">
-        <view>{{ title ?? attrs?.productName }}</view>
-        <view v-if="tags?.length > 0" class="flex gap-1 whitespace-nowrap overflow-auto">
-          <wd-tag v-for="tag in tags" :key="tag" class="!text-20rpx" plain type="primary">
-            {{ tag }}
-          </wd-tag>
-        </view>
-      </view>
+  </DefineSectionGroup>
+
+  <!-- 主内容的展示节点 -->
+  <DefineMainContent v-slot="{ class: className }">
+    <view
+      :class="className"
+      class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden"
+    >
+      <SectionGroup
+        class="flex flex-col gap-2 overflow-hidden"
+        :group="['title', 'location', 'tags']"
+      />
       <view class="flex gap-2">
-        <view class="flex gap-[3rpx] items-end">
-          <view class="text-red font-bold">{{ priceUnit }}</view>
-          <view class="text-red font-bold">{{ price }}</view>
-          <view v-if="!!attrs?.behindUnit" class="text-22rpx">{{ attrs?.behindUnit }}</view>
-        </view>
+        <SectionGroup
+          class="flex gap-[4rpx] items-end"
+          :group="['priceUnit', 'price', 'priceSuffix']"
+        />
       </view>
     </view>
+  </DefineMainContent>
+
+  <!-- 横向布局 -->
+  <view
+    v-if="layoutType === 'horizontal'"
+    :class="attrs?.class"
+    class="flex gap-3 px-2 py-3 bg-white"
+  >
+    <Section prop="image" class="w-1/3 h-220rpx bg-gray-100 rounded-sm overflow-hidden" />
+    <MainContent />
   </view>
 
-  <!-- <view v-if="layoutType === 2" class="flex flex-col gap-2 p-2 bg-white">
-    <view class="overflow-hidden">
-      <image :src="image" class="w-full" mode="widthFix" />
-    </view>
-    <view class="flex flex-col flex-1 text-26rpx">
-      <view>{{ title ?? attrs?.productName }}</view>
-    </view>
-  </view> -->
+  <!-- 竖向布局 -->
+  <view v-if="layoutType === 'vertical'" :class="attrs?.class" class="flex flex-col gap-2 bg-white">
+    <Section prop="image" class="overflow-hidden" />
+    <MainContent class="p-2" />
+  </view>
 </template>
 
 <style lang="scss" scoped></style>

package/components/lcb-product-item/types.ts

@@ -1,16 +1,58 @@
 export interface LcbProductItemProps {
   // Define the component's prop types here
-  layoutType?: 1 | 2 // 1 横向、2 纵向
+
+  layoutType?: 'vertical' | 'horizontal'
   image?: any
   title?: any
   subTitle?: any
   price?: any
   priceUnit?: any
+  priceSuffix?: any
   originPrice?: any
   originPriceUnit?: any
-  lowestPrice?: any
-  lowestPriceUnit?: any
   tags?: any
   location?: any
   distance?: any
+
+  imageVisible?: boolean
+  titleVisible?: boolean
+  subTitleVisible?: boolean
+  priceVisible?: boolean
+  priceUnitVisible?: boolean
+  priceSuffixVisible?: boolean
+  originPriceVisible?: boolean
+  originPriceUnitVisible?: boolean
+  tagsVisible?: boolean
+  locationVisible?: boolean
+  distanceVisible?: boolean
+
+  imageClass?: string
+  titleClass?: string
+  subTitleClass?: string
+  priceClass?: string
+  priceUnitClass?: string
+  priceSuffixClass?: string
+  originPriceClass?: string
+  originPriceUnitClass?: string
+  tagsClass?: string
+  tagsWrapperClass?: string
+  locationClass?: string
+  distanceClass?: string
+}
+
+export const defaultLcbProductItemProps: LcbProductItemProps = {
+  layoutType: 'horizontal',
+  priceUnit: '¥',
+  originPriceUnit: '¥',
+  imageVisible: true,
+  titleVisible: true,
+  subTitleVisible: true,
+  priceVisible: true,
+  priceUnitVisible: true,
+  priceSuffixVisible: true,
+  originPriceVisible: true,
+  originPriceUnitVisible: true,
+  tagsVisible: true,
+  locationVisible: true,
+  distanceVisible: true,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "keywords": [
     "业务组件"
   ],

package/types/components/lcb-list/components/FilterList/type.d.ts

@@ -2,8 +2,10 @@ import { LcbListInfo } from '../../api'
 import { LcbProductProps } from '../../../lcb-product/types'
 export interface PageListProps {
   emptyImage?: string
+  listType?: LcbProductProps['listType']
   productProps?: LcbProductProps
 }
 export interface LcbFilterListProps extends PageListProps, LcbListInfo {
   filter?: Record<string, any>
+  test?: any
 }

package/types/components/lcb-list/lcb-list.vue.d.ts

@@ -1,19 +1,7 @@
 import { LcbListProps } from './types'
 import './index.scss'
 declare const _default: import('vue').DefineComponent<
-  __VLS_WithDefaults<
-    __VLS_TypePropsToOption<LcbListProps>,
-    {
-      pageFilterType: string
-      border: boolean
-      styleMode: string
-      pageListProps: () => {
-        productProps: {
-          styleGroup: number
-        }
-      }
-    }
-  >,
+  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbListProps>, any>,
   {},
   unknown,
   {},
@@ -24,27 +12,14 @@ declare const _default: import('vue').DefineComponent<
   string,
   import('vue').PublicProps,
   Readonly<
-    import('vue').ExtractPropTypes<
-      __VLS_WithDefaults<
-        __VLS_TypePropsToOption<LcbListProps>,
-        {
-          pageFilterType: string
-          border: boolean
-          styleMode: string
-          pageListProps: () => {
-            productProps: {
-              styleGroup: number
-            }
-          }
-        }
-      >
-    >
+    import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LcbListProps>, any>>
   >,
   {
-    border: boolean
+    listType: 'horizontal' | 'list' | 'grid' | 'waterfall'
     pageFilterType: string
-    pageListProps: import('./components/FilterList/type').PageListProps
+    border: boolean
     styleMode: 'default' | 'plain'
+    pageListProps: import('./components/FilterList/type').PageListProps
   },
   {}
 >

package/types/components/lcb-list/types.d.ts

@@ -1,9 +1,11 @@
 import { PageListProps } from './components/FilterList/type'
+import { LcbProductProps } from '../lcb-product/types'
 export interface LcbListProps {
   pageFilterType?: string
   pageListProps?: PageListProps
   border?: boolean
   styleMode?: 'default' | 'plain'
+  listType?: LcbProductProps['listType']
 }
 export interface Option {
   label: string
@@ -18,4 +20,6 @@ export interface FilterItemProps {
   mode?: 'multiple' | 'single'
   apiPath?: string
   options?: Option[]
+  test?: 1
 }
+export declare const defaultLcbListProps: LcbListProps

package/types/components/lcb-product/lcb-product.vue.d.ts

@@ -1,6 +1,6 @@
 import { LcbProductProps } from './types'
 declare const _default: import('vue').DefineComponent<
-  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductProps>, {}>,
+  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductProps>, any>,
   {},
   unknown,
   {},
@@ -11,9 +11,14 @@ declare const _default: import('vue').DefineComponent<
   string,
   import('vue').PublicProps,
   Readonly<
-    import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductProps>, {}>>
+    import('vue').ExtractPropTypes<
+      __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductProps>, any>
+    >
   >,
-  {},
+  {
+    items: Record<string, any>[]
+    listType: 'list' | 'horizontal' | 'grid' | 'waterfall'
+  },
   {}
 >
 export default _default

package/types/components/lcb-product/types.d.ts

@@ -1,13 +1,5 @@
 export interface LcbProductProps {
-  styleGroup?: 1 | 2 | 3 | 4
-  items?: Record<string, any>
-  marginHorizontal?: number
-  productStyle?: 'image' | 'flat' | 'card' | 'border'
-  productTitle?: 0 | 1 | 2
-  showTags?: boolean
-  showPrice?: boolean
-  showScribePrice?: boolean
-  showCart?: boolean
-  showLocation?: boolean
-  showCollection?: boolean
+  listType?: 'list' | 'horizontal' | 'grid' | 'waterfall'
+  items?: Record<string, any>[]
 }
+export declare const defaultLcbProductProps: LcbProductProps

package/types/components/lcb-product-item/lcb-product-item.vue.d.ts

@@ -1,14 +1,6 @@
 import { LcbProductItemProps } from './types'
 declare const _default: import('vue').DefineComponent<
-  __VLS_WithDefaults<
-    __VLS_TypePropsToOption<LcbProductItemProps>,
-    {
-      layoutType: number
-      priceUnit: string
-      originPriceUnit: string
-      lowestPriceUnit: string
-    }
-  >,
+  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductItemProps>, LcbProductItemProps>,
   {},
   unknown,
   {},
@@ -20,22 +12,45 @@ declare const _default: import('vue').DefineComponent<
   import('vue').PublicProps,
   Readonly<
     import('vue').ExtractPropTypes<
-      __VLS_WithDefaults<
-        __VLS_TypePropsToOption<LcbProductItemProps>,
-        {
-          layoutType: number
-          priceUnit: string
-          originPriceUnit: string
-          lowestPriceUnit: string
-        }
-      >
+      __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductItemProps>, LcbProductItemProps>
     >
   >,
   {
-    layoutType: 1 | 2
+    title: any
+    image: any
+    location: any
+    layoutType: 'vertical' | 'horizontal'
+    imageClass: string
+    subTitle: any
+    price: any
     priceUnit: any
+    priceSuffix: any
+    originPrice: any
     originPriceUnit: any
-    lowestPriceUnit: any
+    tags: any
+    distance: any
+    imageVisible: boolean
+    titleVisible: boolean
+    subTitleVisible: boolean
+    priceVisible: boolean
+    priceUnitVisible: boolean
+    priceSuffixVisible: boolean
+    originPriceVisible: boolean
+    originPriceUnitVisible: boolean
+    tagsVisible: boolean
+    locationVisible: boolean
+    distanceVisible: boolean
+    titleClass: string
+    subTitleClass: string
+    priceClass: string
+    priceUnitClass: string
+    priceSuffixClass: string
+    originPriceClass: string
+    originPriceUnitClass: string
+    tagsClass: string
+    tagsWrapperClass: string
+    locationClass: string
+    distanceClass: string
   },
   {}
 >

package/types/components/lcb-product-item/types.d.ts

@@ -1,15 +1,38 @@
 export interface LcbProductItemProps {
-  layoutType?: 1 | 2
+  layoutType?: 'vertical' | 'horizontal'
   image?: any
   title?: any
   subTitle?: any
   price?: any
   priceUnit?: any
+  priceSuffix?: any
   originPrice?: any
   originPriceUnit?: any
-  lowestPrice?: any
-  lowestPriceUnit?: any
   tags?: any
   location?: any
   distance?: any
+  imageVisible?: boolean
+  titleVisible?: boolean
+  subTitleVisible?: boolean
+  priceVisible?: boolean
+  priceUnitVisible?: boolean
+  priceSuffixVisible?: boolean
+  originPriceVisible?: boolean
+  originPriceUnitVisible?: boolean
+  tagsVisible?: boolean
+  locationVisible?: boolean
+  distanceVisible?: boolean
+  imageClass?: string
+  titleClass?: string
+  subTitleClass?: string
+  priceClass?: string
+  priceUnitClass?: string
+  priceSuffixClass?: string
+  originPriceClass?: string
+  originPriceUnitClass?: string
+  tagsClass?: string
+  tagsWrapperClass?: string
+  locationClass?: string
+  distanceClass?: string
 }
+export declare const defaultLcbProductItemProps: LcbProductItemProps

package/types/utils/createReuse.d.ts

@@ -0,0 +1,59 @@
+import type { DefineComponent, Slot } from 'vue'
+type ObjectLiteralWithPotentialObjectLiterals = Record<string, Record<string, any> | undefined>
+type GenerateSlotsFromSlotMap<T extends ObjectLiteralWithPotentialObjectLiterals> = {
+  [K in keyof T]: Slot<T[K]>
+}
+export type DefineTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent & {
+  new (): {
+    $slots: {
+      default: (
+        _: Bindings & {
+          $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps>
+        },
+      ) => any
+    }
+  }
+}
+export type ReuseTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent<Bindings> & {
+  new (): {
+    $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps>
+  }
+}
+export type ReusableTemplatePair<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = [
+  DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+  ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+] & {
+  define: DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>
+  reuse: ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>
+}
+export interface CreateReusableTemplateOptions {
+  /**
+   * Inherit attrs from reuse component.
+   *
+   * @default true
+   */
+  inheritAttrs?: boolean
+}
+/**
+ * This function creates `define` and `reuse` components in pair,
+ * It also allow to pass a generic to bind with type.
+ *
+ * @see https://vueuse.org/createReusableTemplate
+ */
+export declare function createReusableTemplate<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals = Record<
+    'default',
+    undefined
+  >,
+>(options?: CreateReusableTemplateOptions): ReusableTemplatePair<Bindings, MapSlotNameToSlotProps>
+export {}

package/utils/createReuse.tsx

@@ -0,0 +1,121 @@
+import type { DefineComponent, Slot } from 'vue'
+import { defineComponent, shallowRef } from 'vue'
+
+type ObjectLiteralWithPotentialObjectLiterals = Record<string, Record<string, any> | undefined>
+
+type GenerateSlotsFromSlotMap<T extends ObjectLiteralWithPotentialObjectLiterals> = {
+  [K in keyof T]: Slot<T[K]>
+}
+
+export type DefineTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent & {
+  new (): {
+    $slots: {
+      default: (_: Bindings & { $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps> }) => any
+    }
+  }
+}
+
+export type ReuseTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent<Bindings> & {
+  new (): { $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps> }
+}
+
+export type ReusableTemplatePair<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = [
+  DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+  ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+] & {
+  define: DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>
+  reuse: ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>
+}
+
+export interface CreateReusableTemplateOptions {
+  /**
+   * Inherit attrs from reuse component.
+   *
+   * @default true
+   */
+  inheritAttrs?: boolean
+}
+
+/**
+ * This function creates `define` and `reuse` components in pair,
+ * It also allow to pass a generic to bind with type.
+ *
+ * @see https://vueuse.org/createReusableTemplate
+ */
+export function createReusableTemplate<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals = Record<
+    'default',
+    undefined
+  >,
+>(
+  options: CreateReusableTemplateOptions = {},
+): ReusableTemplatePair<Bindings, MapSlotNameToSlotProps> {
+  const { inheritAttrs = true } = options
+
+  const render = shallowRef<Slot | undefined>()
+
+  const define = defineComponent({
+    setup(_, { slots }) {
+      return () => {
+        render.value = slots.default
+      }
+    },
+  }) as unknown as DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>
+
+  const reuse = defineComponent({
+    inheritAttrs,
+    setup(_, { attrs, slots }) {
+      return () => {
+        if (!render.value && process.env.NODE_ENV !== 'production')
+          throw new Error('[VueUse] Failed to find the definition of reusable template')
+        const vnode = render.value?.({ ...keysToCamelKebabCase(attrs), $slots: slots })
+
+        return inheritAttrs && vnode?.length === 1 ? vnode[0] : vnode
+      }
+    },
+  }) as unknown as ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>
+
+  return makeDestructurable({ define, reuse }, [define, reuse]) as any
+}
+
+function keysToCamelKebabCase(obj: Record<string, any>) {
+  const newObj: typeof obj = {}
+  for (const key in obj) newObj[camelize(key)] = obj[key]
+  return newObj
+}
+/**
+ * @see What the hack? https://antfu.me/posts/destructuring-with-object-or-array
+ */
+function makeDestructurable<T extends Record<string, unknown>, A extends readonly any[]>(
+  obj: T,
+  arr: A,
+): T & A {
+  const clone = { ...obj }
+  Object.defineProperty(clone, Symbol.iterator, {
+    enumerable: false,
+    value() {
+      let index = 0
+      return {
+        next: () => ({
+          value: arr[index++],
+          done: index > arr.length,
+        }),
+      }
+    },
+  })
+  return clone as T & A
+}
+
+function camelize(str: string) {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+}