@tplc/business 0.0.39 → 0.0.41

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.41](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.40...v0.0.41) (2024-10-25)
+
+
+### ✨ Features | 新功能
+
+* sticky 兼容小程序 ([c179ae0](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c179ae0d276d51e91fe6d7cc3cadb57bf238c969))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* filter颜色 ([ca3cd9c](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ca3cd9ca596306580e06305eabad4e5e7ad44d1f))
+* nav 兼容statusbar ([322e6d4](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/322e6d46d7bd8c32e45e2236064d8ed16ac0793c))
+
+### [0.0.40](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.39...v0.0.40) (2024-10-24)
+
+
+### ✨ Features | 新功能
+
+* 增加 list 组件可配置性 ([8f3bc26](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/8f3bc267f965cd74e66ab714f0713440a9d64451))
+* 消除 product-item reuse 代码 ([32eee08](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/32eee089a360c4d8c32207eaee083f5f1646e7c5))
+
 ### [0.0.39](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.38...v0.0.39) (2024-10-23)
 
 

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

@@ -7,15 +7,20 @@
     @query="queryList"
     use-page-scroll
   >
-    <lcb-product v-bind="{ ...productProps }" :listType="listType" :items="normalizeDataList" />
+    <lcb-product
+      v-bind="{ ...productProps, ...attrs }"
+      :listType="listType"
+      :items="normalizeDataList"
+    />
   </z-paging>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, useAttrs } from 'vue'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging'
 import { LcbFilterListProps } from './type'
 import { formatJson } from '../../../../utils/utils'
+const attrs = useAttrs()
 
 defineOptions({
   name: 'FilterList',

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

@@ -5,6 +5,7 @@
         :class="{
           'lcb-filter__border-top': showPlain ? false : border,
           'lcb-filter__plain': showPlain,
+          '!bg-white': !showPlain,
         }"
         class="w-100vw"
       >
@@ -67,12 +68,12 @@
       </view>
     </wd-sticky>
 
-    <FilterList v-bind="{ ...info.listInfo, listType, filter }" test2="11" />
+    <FilterList v-bind="{ ...info.listInfo, listType, filter, ...attrs }" test2="11" />
   </view>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, Ref, ref, watch } from 'vue'
+import { computed, inject, Ref, ref, watch, useAttrs } from 'vue'
 import { LcbListProps, defaultLcbListProps } from './types'
 import { FilterComponent, getFilterDetail, LcbFilterResult } from './api'
 import FilterSelect from './components/FilterSelect/index.vue'
@@ -83,6 +84,7 @@ import FilterList from './components/FilterList/index.vue'
 import FilterTabs from './components/FilterTabs/index.vue'
 import './index.scss'
 import { FORM_KEY } from '../../constants'
+const attrs = useAttrs()
 
 defineOptions({
   name: 'LcbList',

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

@@ -9,20 +9,20 @@
       paddingTop,
     }"
   >
+    <view
+      class="navbar-header-background"
+      :style="{
+        backgroundColor: navbarBgColor,
+        opacity: navbarBgOpacity,
+        backgroundImage: backgroundType === 'img' ? `url(${backgroundImage})` : '',
+      }"
+    />
     <view
       class="navbar-header"
       :style="{
         color: contentColor,
       }"
     >
-      <view
-        class="navbar-header-background"
-        :style="{
-          backgroundColor: navbarBgColor,
-          opacity: navbarBgOpacity,
-          backgroundImage: backgroundType === 'img' ? `url(${backgroundImage})` : '',
-        }"
-      />
       <!-- 左边布局 -->
       <view class="navbar-left z-1">
         <!-- 返回按钮 -->

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

@@ -1,20 +1,44 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { LcbProductProps } from './types'
+const attrs = useAttrs()
+defineOptions({
+  name: 'LcbProduct',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbProductProps>(), {
+  listType: 'list',
+  items: [],
+  imageWidthPercent: (1 / 3) * 100,
+  imageHeightPercent: (300 / 560) * 100,
+  itemHeight: 560,
+} as any)
+</script>
+
 <template>
   <lcb-block v-bind="$props">
     <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" />
+        <lcb-product-item
+          v-bind="{ ...item, ...attrs }"
+          :imageStyle="{ width: `${imageWidthPercent}%` }"
+        />
       </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">
+          <view class="rounded overflow-hidden" :style="{ height: `${itemHeight}rpx` }">
             <lcb-product-item
-              v-bind="item"
+              v-bind="{ ...item, ...attrs }"
               layoutType="vertical"
-              class="!h-560rpx"
-              imageClass="!h-300rpx"
+              className="!h-full"
+              :imageStyle="{ height: `${imageHeightPercent}%` }"
             />
           </view>
         </view>
@@ -35,18 +59,4 @@
   </lcb-block>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { LcbProductProps, defaultLcbProductProps } from './types'
-defineOptions({
-  name: 'LcbProduct',
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: 'shared',
-  },
-})
-const props = withDefaults(defineProps<LcbProductProps>(), defaultLcbProductProps as any)
-</script>
-
 <style lang="scss" scoped></style>

package/components/lcb-product/types.ts

@@ -1,10 +1,8 @@
 export interface LcbProductProps {
   // Define the component's prop types here
   listType?: 'list' | 'horizontal' | 'grid' | 'waterfall' // 1列表 2 左右滑动 3一行两个 4瀑布流
+  imageWidthPercent?: number
+  imageHeightPercent?: number
+  itemHeight?: number // 列表项高度
   items?: Record<string, any>[]
 }
-
-export const defaultLcbProductProps: LcbProductProps = {
-  listType: 'list',
-  items: [],
-}

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

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { inject, computed, useAttrs } from 'vue'
+import { isArray } from '@tplc/wot/components/common/util'
+
+// const attrs = useAttrs()
+
+const itemProps = inject('lcb-product-item-props')
+
+const props = withDefaults(
+  defineProps<{
+    prop: string
+    className?: string
+  }>(),
+  {},
+)
+
+const visible = computed(() => {
+  return itemProps?.[`${props?.prop}Visible`] ?? true
+})
+const className = computed(() => {
+  return `${itemProps?.[`${props?.prop}Class`] ?? ''} ${props?.className}`
+})
+const style = computed(() => {
+  return itemProps?.[`${props?.prop}Style`] ?? ''
+})
+const value = computed(() => {
+  return itemProps?.[props?.prop]
+})
+</script>
+
+<template>
+  <template v-if="visible && !!value && (isArray(value) ? value?.length > 0 : true)">
+    <!-- 图片 -->
+    <view v-if="prop === 'image'" :value="value" :class="className" :style="style">
+      <image :src="value" class="w-full h-full" mode="aspectFill" />
+    </view>
+
+    <!-- 标题 -->
+    <view
+      v-if="prop === 'title'"
+      :class="className"
+      :style="style"
+      :value="value"
+      class="text-ellipsis line-clamp-2"
+    >
+      <view>{{ value }}</view>
+    </view>
+
+    <!-- 位置 -->
+    <view
+      :class="className"
+      :style="style"
+      v-if="prop === 'location'"
+      :value="value"
+      class="text-gray-500 text-22rpx flex gap-3rpx items-center"
+    >
+      <wd-icon name="location" size="32rpx"></wd-icon>
+      <view>{{ value }}</view>
+    </view>
+
+    <!-- 标签 -->
+    <view
+      :class="className"
+      :style="style"
+      v-if="prop === 'tags'"
+      :value="value"
+      class="flex gap-1 whitespace-nowrap overflow-auto"
+    >
+      <wd-tag
+        v-for="tag in value"
+        :key="tag"
+        class="!text-20rpx"
+        :class="className"
+        :style="style"
+        plain
+        type="primary"
+      >
+        {{ tag }}
+      </wd-tag>
+    </view>
+
+    <!-- 价格单位 -->
+    <view
+      :class="className"
+      :style="style"
+      v-if="prop === 'priceUnit'"
+      :value="value"
+      class="text-red-500 font-bold text-22rpx"
+    >
+      <view>{{ value }}</view>
+    </view>
+
+    <!-- 价格 -->
+    <view
+      :class="className"
+      :style="style"
+      v-if="prop === 'price'"
+      :value="value"
+      class="text-red-500 font-bold text-27rpx"
+    >
+      <view>{{ value }}</view>
+    </view>
+
+    <!-- 价格后缀 -->
+    <view
+      :class="className"
+      :style="style"
+      v-if="prop === 'priceSuffix'"
+      :value="value"
+      class="text-22rpx"
+    >
+      <view>{{ value }}</view>
+    </view>
+  </template>
+</template>

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

@@ -1,15 +1,7 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
-import { transformValueUnit } from '../../utils/transform'
-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()
+import { computed, provide, useAttrs } from 'vue'
+import { LcbProductItemProps } from './types'
+import ItemValue from './components/ItemValue.vue'
 
 defineOptions({
   name: 'LcbProductItem',
@@ -20,140 +12,72 @@ defineOptions({
   },
 })
 
-const props = withDefaults(defineProps<LcbProductItemProps>(), defaultLcbProductItemProps)
+const props = withDefaults(defineProps<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,
+})
 const attrs = useAttrs()
 
+provide('lcb-product-item-props', props)
+
 // console.log('attrs', attrs)
 </script>
 
 <template>
-  <!-- 内容容器定义 -->
-  <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>
+  <!-- 横向布局 -->
+  <view v-if="layoutType === 'horizontal'" :class="className" class="flex gap-3 px-2 py-3 bg-white">
+    <ItemValue prop="image" className="w-1/3 h-220rpx bg-gray-100 rounded-sm overflow-hidden" />
+    <view class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden">
+      <view class="flex flex-col gap-2 overflow-hidden">
+        <ItemValue v-for="prop in ['title', 'location', 'tags']" :prop="prop" :key="prop" />
+      </view>
 
-  <!-- 内容组定义 -->
-  <DefineSectionGroup v-slot="{ group, class: className }">
-    <view :class="className">
-      <Section v-for="prop in group" :prop="prop" :key="prop" />
+      <view class="flex gap-2">
+        <view class="flex gap-[4rpx] items-end">
+          <ItemValue
+            v-for="prop in ['priceUnit', 'price', 'priceSuffix']"
+            :prop="prop"
+            :key="prop"
+          />
+        </view>
+      </view>
     </view>
-  </DefineSectionGroup>
+  </view>
 
-  <!-- 主内容的展示节点 -->
-  <DefineMainContent v-slot="{ class: className }">
+  <!-- 竖向布局 -->
+  <view v-if="layoutType === 'vertical'" :class="className" class="flex flex-col gap-2 bg-white">
+    <ItemValue prop="image" className="overflow-hidden" />
     <view
-      :class="className"
+      :class="'p-2'"
       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 flex-col gap-2 overflow-hidden">
+        <!-- <ItemValue prop="title"></ItemValue> -->
+        <ItemValue v-for="prop in ['title', 'location', 'tags']" :prop="prop" :key="prop" />
+      </view>
+
       <view class="flex gap-2">
-        <SectionGroup
-          class="flex gap-[4rpx] items-end"
-          :group="['priceUnit', 'price', 'priceSuffix']"
-        />
+        <view class="flex gap-[4rpx] items-end">
+          <ItemValue
+            v-for="prop in ['priceUnit', 'price', 'priceSuffix']"
+            :prop="prop"
+            :key="prop"
+          />
+        </view>
       </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 === 'vertical'" :class="attrs?.class" class="flex flex-col gap-2 bg-white">
-    <Section prop="image" class="overflow-hidden" />
-    <MainContent class="p-2" />
   </view>
 </template>
 

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

@@ -1,6 +1,8 @@
+import { CSSProperties } from 'vue'
+
 export interface LcbProductItemProps {
   // Define the component's prop types here
-
+  className?: string
   layoutType?: 'vertical' | 'horizontal'
   image?: any
   title?: any
@@ -38,21 +40,17 @@ export interface LcbProductItemProps {
   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,
+  imageStyle?: CSSProperties
+  titleStyle?: CSSProperties
+  subTitleStyle?: CSSProperties
+  priceStyle?: CSSProperties
+  priceUnitStyle?: CSSProperties
+  priceSuffixStyle?: CSSProperties
+  originPriceStyle?: CSSProperties
+  originPriceUnitStyle?: CSSProperties
+  tagsStyle?: CSSProperties
+  tagsWrapperStyle?: CSSProperties
+  locationStyle?: CSSProperties
+  distanceStyle?: CSSProperties
 }

package/package.json

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

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

@@ -18,6 +18,9 @@ declare const _default: import('vue').DefineComponent<
   {
     items: Record<string, any>[]
     listType: 'list' | 'horizontal' | 'grid' | 'waterfall'
+    imageWidthPercent: number
+    imageHeightPercent: number
+    itemHeight: number
   },
   {}
 >

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

@@ -1,5 +1,7 @@
 export interface LcbProductProps {
   listType?: 'list' | 'horizontal' | 'grid' | 'waterfall'
+  imageWidthPercent?: number
+  imageHeightPercent?: number
+  itemHeight?: number
   items?: Record<string, any>[]
 }
-export declare const defaultLcbProductProps: LcbProductProps

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

@@ -0,0 +1,55 @@
+declare const _default: import('vue').DefineComponent<
+  __VLS_WithDefaults<
+    __VLS_TypePropsToOption<{
+      prop: string
+      className?: string
+    }>,
+    {}
+  >,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').PublicProps,
+  Readonly<
+    import('vue').ExtractPropTypes<
+      __VLS_WithDefaults<
+        __VLS_TypePropsToOption<{
+          prop: string
+          className?: string
+        }>,
+        {}
+      >
+    >
+  >,
+  {},
+  {}
+>
+export default _default
+type __VLS_WithDefaults<P, D> = {
+  [K in keyof Pick<P, keyof P>]: K extends keyof D
+    ? __VLS_Prettify<
+        P[K] & {
+          default: D[K]
+        }
+      >
+    : P[K]
+}
+type __VLS_Prettify<T> = {
+  [K in keyof T]: T[K]
+} & {}
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T
+type __VLS_TypePropsToOption<T> = {
+  [K in keyof T]-?: {} extends Pick<T, K>
+    ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>
+      }
+    : {
+        type: import('vue').PropType<T[K]>
+        required: true
+      }
+}

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

@@ -1,6 +1,24 @@
 import { LcbProductItemProps } from './types'
 declare const _default: import('vue').DefineComponent<
-  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductItemProps>, LcbProductItemProps>,
+  __VLS_WithDefaults<
+    __VLS_TypePropsToOption<LcbProductItemProps>,
+    {
+      layoutType: string
+      priceUnit: string
+      originPriceUnit: string
+      imageVisible: boolean
+      titleVisible: boolean
+      subTitleVisible: boolean
+      priceVisible: boolean
+      priceUnitVisible: boolean
+      priceSuffixVisible: boolean
+      originPriceVisible: boolean
+      originPriceUnitVisible: boolean
+      tagsVisible: boolean
+      locationVisible: boolean
+      distanceVisible: boolean
+    }
+  >,
   {},
   unknown,
   {},
@@ -12,23 +30,31 @@ declare const _default: import('vue').DefineComponent<
   import('vue').PublicProps,
   Readonly<
     import('vue').ExtractPropTypes<
-      __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductItemProps>, LcbProductItemProps>
+      __VLS_WithDefaults<
+        __VLS_TypePropsToOption<LcbProductItemProps>,
+        {
+          layoutType: string
+          priceUnit: string
+          originPriceUnit: string
+          imageVisible: boolean
+          titleVisible: boolean
+          subTitleVisible: boolean
+          priceVisible: boolean
+          priceUnitVisible: boolean
+          priceSuffixVisible: boolean
+          originPriceVisible: boolean
+          originPriceUnitVisible: boolean
+          tagsVisible: boolean
+          locationVisible: boolean
+          distanceVisible: boolean
+        }
+      >
     >
   >,
   {
-    title: any
-    image: any
-    location: any
     layoutType: 'vertical' | 'horizontal'
-    imageClass: string
-    subTitle: any
-    price: any
     priceUnit: any
-    priceSuffix: any
-    originPrice: any
     originPriceUnit: any
-    tags: any
-    distance: any
     imageVisible: boolean
     titleVisible: boolean
     subTitleVisible: boolean
@@ -40,17 +66,6 @@ declare const _default: import('vue').DefineComponent<
     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,4 +1,6 @@
+import { CSSProperties } from 'vue'
 export interface LcbProductItemProps {
+  className?: string
   layoutType?: 'vertical' | 'horizontal'
   image?: any
   title?: any
@@ -34,5 +36,16 @@ export interface LcbProductItemProps {
   tagsWrapperClass?: string
   locationClass?: string
   distanceClass?: string
+  imageStyle?: CSSProperties
+  titleStyle?: CSSProperties
+  subTitleStyle?: CSSProperties
+  priceStyle?: CSSProperties
+  priceUnitStyle?: CSSProperties
+  priceSuffixStyle?: CSSProperties
+  originPriceStyle?: CSSProperties
+  originPriceUnitStyle?: CSSProperties
+  tagsStyle?: CSSProperties
+  tagsWrapperStyle?: CSSProperties
+  locationStyle?: CSSProperties
+  distanceStyle?: CSSProperties
 }
-export declare const defaultLcbProductItemProps: LcbProductItemProps

package/types/utils/createReuse.d.ts

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

@@ -1,121 +0,0 @@
-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() : ''))
-}