feat(Sku): add disable-soldout-sku prop (#7759)

* feat(Sku): 售罄sku支持点击

* feat(Sku): add disable-soldout-sku prop

Co-authored-by: zhanglin_0715 <zhanglin_0715@youzan.com>

packages/vant-cli/site/desktop/App.vue

@@ -39,7 +39,7 @@ export default {
 
     langConfigs() {
       const { locales = {} } = config.site;
-      return Object.keys(locales).map(key => ({
+      return Object.keys(locales).map((key) => ({
         lang: key,
         label: locales[key].langLabel || '',
       }));

packages/vant-cli/site/desktop/components/Header.vue

@@ -90,7 +90,7 @@ export default {
     },
 
     anotherLang() {
-      const items = this.langConfigs.filter(item => item.lang !== this.lang);
+      const items = this.langConfigs.filter((item) => item.lang !== this.lang);
       if (items.length) {
         return items[0];
       }

packages/vant-cli/src/common/css.ts

@@ -39,7 +39,7 @@ const IMPORT_STYLE_RE = /import\s+?(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
 
 // "import 'a.less';" => "import 'a.css';"
 export function replaceCssImportExt(code: string) {
-  return code.replace(IMPORT_STYLE_RE, str =>
+  return code.replace(IMPORT_STYLE_RE, (str) =>
     str.replace(`.${CSS_LANG}`, '.css')
   );
 }

packages/vant-cli/src/compiler/get-deps.ts

@@ -62,8 +62,8 @@ export function getDeps(filePath: string) {
   const code = readFileSync(filePath, 'utf-8');
   const imports = matchImports(code);
   const paths = imports
-    .map(item => getPathByImport(item, filePath))
-    .filter(item => !!item) as string[];
+    .map((item) => getPathByImport(item, filePath))
+    .filter((item) => !!item) as string[];
 
   depsMap[filePath] = paths;
 
@@ -76,7 +76,7 @@ export function getDeps(filePath: string) {
 export function replaceScriptImportExt(code: string, from: string, to: string) {
   const importLines = matchImports(code);
 
-  importLines.forEach(importLine => {
+  importLines.forEach((importLine) => {
     const result = importLine.replace(from, to);
     code = code.replace(importLine, result);
   });

packages/vant-markdown-vetur/src/parser.ts

@@ -27,7 +27,7 @@ function readLine(input: string) {
 function splitTableLine(line: string) {
   line = line.replace('\\|', 'JOIN');
 
-  const items = line.split('|').map(item => item.trim().replace('JOIN', '|'));
+  const items = line.split('|').map((item) => item.trim().replace('JOIN', '|'));
 
   // remove pipe character on both sides
   items.pop();

src/locale/lang/nb-NO.ts

@@ -1,78 +1,77 @@
 export default {
-    name: 'Navn',
-    tel: 'Telefon',
-    save: 'Lagre',
-    confirm: 'Bekreft',
-    cancel: 'Avbryt',
-    delete: 'Slett',
-    complete: 'Fullfør',
-    loading: 'Laster...',
-    telEmpty: 'Vennligst fyll inn telefonnummer',
-    nameEmpty: 'Vennligst fyll inn navn',
-    nameInvalid: 'Ugyldig navn',
-    confirmDelete: 'Er du sikker på at du vil slette?',
-    telInvalid: 'Ugyldig telefonnummer',
-    vanCalendar: {
-      end: 'Slutt',
-      start: 'Start',
-      title: 'Kalendar',
-      startEnd: 'Start/Slutt',
-      weekdays: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
-      monthTitle: (year: number, month: number) => `${year}/${month}`,
-      rangePrompt: (maxRange: number) => `Maks. ${maxRange} dager`,
-    },
-    vanContactCard: {
-      addText: 'Legg til kontakt info',
-    },
-    vanContactList: {
-      addText: 'Legg til ny kontakt',
-    },
-    vanPagination: {
-      prev: 'Forrige',
-      next: 'Neste',
-    },
-    vanPullRefresh: {
-      pulling: 'Dra for oppdatering...',
-      loosing: 'Mist for oppdatering...',
-    },
-    vanSubmitBar: {
-      label: 'Totalt：',
-    },
-    vanCoupon: {
-      unlimited: 'Uendelig',
-      discount: (discount: number) => `${discount * 10}% avslag`,
-      condition: (condition: number) => `Minst ${condition}`,
-    },
-    vanCouponCell: {
-      title: 'Kupong',
-      tips: 'Ingen kuponger',
-      count: (count: number) => `Du har ${count} kuponger`,
-    },
-    vanCouponList: {
-      empty: 'Ingen kuponger',
-      exchange: 'Bytte',
-      close: 'Lukk',
-      enable: 'Tilgjengelig',
-      disabled: 'Utilgjengelig',
-      placeholder: 'Kupong kode',
-    },
-    vanAddressEdit: {
-      area: 'Område',
-      postal: 'Postkode',
-      areaEmpty: 'Vennligst fyll inn område',
-      addressEmpty: 'Addresse kan ikke være tomt',
-      postalEmpty: 'Feil postkode',
-      defaultAddress: 'Sett som standard adresse',
-      telPlaceholder: 'Telefon',
-      namePlaceholder: 'Navn',
-      areaPlaceholder: 'Område',
-    },
-    vanAddressEditDetail: {
-      label: 'Adresse',
-      placeholder: 'Adresse',
-    },
-    vanAddressList: {
-      add: 'Legg til ny adresse',
-    },
-  };
-  
+  name: 'Navn',
+  tel: 'Telefon',
+  save: 'Lagre',
+  confirm: 'Bekreft',
+  cancel: 'Avbryt',
+  delete: 'Slett',
+  complete: 'Fullfør',
+  loading: 'Laster...',
+  telEmpty: 'Vennligst fyll inn telefonnummer',
+  nameEmpty: 'Vennligst fyll inn navn',
+  nameInvalid: 'Ugyldig navn',
+  confirmDelete: 'Er du sikker på at du vil slette?',
+  telInvalid: 'Ugyldig telefonnummer',
+  vanCalendar: {
+    end: 'Slutt',
+    start: 'Start',
+    title: 'Kalendar',
+    startEnd: 'Start/Slutt',
+    weekdays: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
+    monthTitle: (year: number, month: number) => `${year}/${month}`,
+    rangePrompt: (maxRange: number) => `Maks. ${maxRange} dager`,
+  },
+  vanContactCard: {
+    addText: 'Legg til kontakt info',
+  },
+  vanContactList: {
+    addText: 'Legg til ny kontakt',
+  },
+  vanPagination: {
+    prev: 'Forrige',
+    next: 'Neste',
+  },
+  vanPullRefresh: {
+    pulling: 'Dra for oppdatering...',
+    loosing: 'Mist for oppdatering...',
+  },
+  vanSubmitBar: {
+    label: 'Totalt：',
+  },
+  vanCoupon: {
+    unlimited: 'Uendelig',
+    discount: (discount: number) => `${discount * 10}% avslag`,
+    condition: (condition: number) => `Minst ${condition}`,
+  },
+  vanCouponCell: {
+    title: 'Kupong',
+    tips: 'Ingen kuponger',
+    count: (count: number) => `Du har ${count} kuponger`,
+  },
+  vanCouponList: {
+    empty: 'Ingen kuponger',
+    exchange: 'Bytte',
+    close: 'Lukk',
+    enable: 'Tilgjengelig',
+    disabled: 'Utilgjengelig',
+    placeholder: 'Kupong kode',
+  },
+  vanAddressEdit: {
+    area: 'Område',
+    postal: 'Postkode',
+    areaEmpty: 'Vennligst fyll inn område',
+    addressEmpty: 'Addresse kan ikke være tomt',
+    postalEmpty: 'Feil postkode',
+    defaultAddress: 'Sett som standard adresse',
+    telPlaceholder: 'Telefon',
+    namePlaceholder: 'Navn',
+    areaPlaceholder: 'Område',
+  },
+  vanAddressEditDetail: {
+    label: 'Adresse',
+    placeholder: 'Adresse',
+  },
+  vanAddressList: {
+    add: 'Legg til ny adresse',
+  },
+};

src/pagination/test/index.spec.js

@@ -1,16 +1,16 @@
 import { mount } from '../../../test';
-import Paginaion from '..'
+import Paginaion from '..';
 
 test('render prev-text & next-text slot', () => {
   const wrapper = mount(Paginaion, {
     propsData: {
       totalItems: 50,
-      showPageSize: 5
+      showPageSize: 5,
     },
     scopedSlots: {
       'prev-text': () => 'Custom PrevText',
       'next-text': () => 'Custom NextText',
-    }
+    },
   });
 
   expect(wrapper).toMatchSnapshot();
@@ -20,11 +20,11 @@ test('render page slot', () => {
   const wrapper = mount(Paginaion, {
     propsData: {
       totalItems: 50,
-      showPageSize: 5
+      showPageSize: 5,
     },
     scopedSlots: {
-      'page': ({ text }) => `${text}`,
-    }
+      page: ({ text }) => `${text}`,
+    },
   });
 
   expect(wrapper).toMatchSnapshot();

src/sku/README.md

@@ -134,6 +134,7 @@ export default {
 | stepper-title | Quantity title | _string_ | `Quantity` |
 | custom-stepper-config | Custom stepper related config | _object_ | `{}` |
 | message-config | Message related config | _object_ | `{}` |
+| disable-soldout-sku | Whether to disable soldout sku | _boolean_ | `true` |
 | get-container | Return the mount node for sku | _string \| () => Element_ | - |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
 | start-sale-num `v2.3.0` | Minimum quantity | _number_ | `1` |

src/sku/README.zh-CN.md

@@ -140,6 +140,7 @@ export default {
 | get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
 | initial-sku | 默认选中的 sku，具体参考高级用法 | _object_ | `{}` |
 | show-soldout-sku | 是否展示售罄的 sku，默认展示并置灰 | _boolean_ | `true` |
+| disable-soldout-sku | 是否禁用售罄的 sku | _boolean_ | `true` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
 | start-sale-num `v2.3.0` | 起售数量 | _number_ | `1` |
 | properties `v2.4.2` | 商品属性 | _array_ | - |

src/sku/Sku.js

@@ -73,6 +73,10 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    disableSoldoutSku: {
+      type: Boolean,
+      default: true,
+    },
     customStepperConfig: {
       type: Object,
       default: () => ({}),
@@ -655,6 +659,7 @@ export default createComponent({
       stepperTitle,
       selectedSkuComb,
       showHeaderImage,
+      disableSoldoutSku,
     } = this;
 
     const slotsProps = {
@@ -720,6 +725,7 @@ export default createComponent({
                   skuKeyStr={skuTreeItem.k_s}
                   selectedSku={selectedSku}
                   skuEventBus={skuEventBus}
+                  disableSoldoutSku={disableSoldoutSku}
                   largeImageMode={skuTreeItem.largeImageMode}
                 />
               ))}

src/sku/components/SkuRowItem.js

@@ -16,6 +16,7 @@ export default createComponent({
     skuEventBus: Object,
     selectedSku: Object,
     largeImageMode: Boolean,
+    disableSoldoutSku: Boolean,
     skuList: {
       type: Array,
       default: () => [],
@@ -32,6 +33,10 @@ export default createComponent({
     },
 
     choosable() {
+      if (!this.disableSoldoutSku) {
+        return true;
+      }
+
       return isSkuChoosable(this.skuList, this.selectedSku, {
         key: this.skuKeyStr,
         valueId: this.skuValue.id,

types/swipe.d.ts

@@ -6,7 +6,10 @@ export type SwipeToOptions = {
 
 export class Swipe extends VanComponent {
   prev(): void;
+
   next(): void;
+
   swipeTo(index: number, options?: SwipeToOptions): void;
+
   resize(): void;
 }