design-system-next 2.17.6 → 2.17.7

package/src/components/banner/use-banner.ts

@@ -1,6 +1,6 @@
-import { computed, type Ref } from "vue";
-import type { BannerPropTypes } from "./banner";
-import classNames from "classnames";
+import { computed, type Ref } from 'vue';
+import type { BannerPropTypes } from './banner';
+import classNames from 'classnames';
 
 interface BannerClasses {
   base: string;
@@ -11,7 +11,7 @@ interface BannerClasses {
 }
 
 export const useBanner = (props: BannerPropTypes, showModel: Ref<boolean>) => {
-  const closeBanner = () => showModel.value = false;
+  const closeBanner = () => (showModel.value = false);
 
   const bannerClasses = computed<BannerClasses>(() => {
     const base = classNames(
@@ -22,45 +22,34 @@ export const useBanner = (props: BannerPropTypes, showModel: Ref<boolean>) => {
         'spr-background-color-information-weak': props.type === 'info',
         'spr-background-color-pending-weak': props.type === 'pending',
         'spr-background-color-caution-weak': props.type === 'caution',
-      }
+      },
     );
 
-    const content = classNames(
-      'spr-flex-auto'
-    );
+    const content = classNames('spr-flex-auto');
 
-    const icon = classNames(
-      'spr-mt-[2px]',
-      {
-        'spr-text-color-brand-base': props.type === 'success',
-        'spr-text-color-danger-base': props.type === 'error',
-        'spr-text-color-information-base': props.type === 'info',
-        'spr-text-color-pending-base': props.type === 'pending',
-        'spr-text-color-caution-base': props.type === 'caution',
-      }
-    );
+    const icon = classNames({
+      'spr-text-color-brand-base': props.type === 'success',
+      'spr-text-color-danger-base': props.type === 'error',
+      'spr-text-color-information-base': props.type === 'info',
+      'spr-text-color-pending-base': props.type === 'pending',
+      'spr-text-color-caution-base': props.type === 'caution',
+    });
 
-    const message = classNames(
-      'spr-body-sm-regular', 
-      {
-        'spr-text-color-brand-base': props.type === 'success',
-        'spr-text-color-danger-pressed': props.type === 'error',
-        'spr-text-color-information-pressed': props.type === 'info',
-        'spr-text-color-pending-pressed': props.type === 'pending',
-        'spr-text-color-caution-pressed': props.type === 'caution',
-      }
-    );
+    const message = classNames('spr-block spr-m-0 spr-body-sm-regular', {
+      'spr-text-color-brand-base': props.type === 'success',
+      'spr-text-color-danger-pressed': props.type === 'error',
+      'spr-text-color-information-pressed': props.type === 'info',
+      'spr-text-color-pending-pressed': props.type === 'pending',
+      'spr-text-color-caution-pressed': props.type === 'caution',
+    });
 
-    const close = classNames(
-      'spr-flex-none spr-cursor-pointer spr-mt-[2px]',
-      {
-        'spr-text-color-brand-base': props.type === 'success',
-        'spr-text-color-danger-base': props.type === 'error',
-        'spr-text-color-information-base': props.type === 'info',
-        'spr-text-color-pending-base': props.type === 'pending',
-        'spr-text-color-caution-base': props.type === 'caution',
-      }
-    );
+    const close = classNames('spr-flex-none spr-cursor-pointer spr-mt-[2px]', {
+      'spr-text-color-brand-base': props.type === 'success',
+      'spr-text-color-danger-base': props.type === 'error',
+      'spr-text-color-information-base': props.type === 'info',
+      'spr-text-color-pending-base': props.type === 'pending',
+      'spr-text-color-caution-base': props.type === 'caution',
+    });
 
     return {
       base,
@@ -68,7 +57,7 @@ export const useBanner = (props: BannerPropTypes, showModel: Ref<boolean>) => {
       icon,
       message,
       close,
-    }
+    };
   });
 
   const bannerIcon = computed(() => {

package/src/components/select/select-multiple/select-multiple.ts

@@ -123,6 +123,10 @@ export const multiSelectPropTypes = {
     type: String,
     default: '',
   },
+  displaySelectedCountOnly: {
+    type: Boolean,
+    default: false,
+  },
   displayHelper: {
     type: Boolean,
     default: false,

package/src/components/select/select-multiple/select-multiple.vue

@@ -33,14 +33,27 @@
               <div ref="chippedInputTextRef" :class="multiSelectClasses.chippedInputTextClasses">
                 <div class="spr-h-auto spr-w-full">
                   <template v-if="multiSelectedListItems.length > 0">
-                    <template v-for="item in multiSelectedListItems" :key="item.value">
-                      <spr-chips
-                        class="spr-m-1 spr-inline-block"
-                        :label="String(item.text)"
-                        closable
-                        visible
-                        @close="handleChippedRemoveItem(String(item.value))"
-                      />
+                    <template v-if="!props.displaySelectedCountOnly">
+                      <template v-for="item in multiSelectedListItems" :key="item.value">
+                        <spr-chips
+                          class="spr-m-1 spr-inline-block"
+                          :label="String(item.text)"
+                          closable
+                          visible
+                          @close="handleChippedRemoveItem(String(item.value))"
+                        />
+                      </template>
+                    </template>
+                    <template v-else>
+                      <span
+                        class="spr-text-color-supporting spr-px-3"
+                        :aria-label="`${multiSelectedListItems.length} selected options`"
+                      >
+                        {{ multiSelectedListItems.length }} item{{
+                          multiSelectedListItems.length === 1 ? '' : 's'
+                        }}
+                        selected
+                      </span>
                     </template>
                   </template>
                   <template v-else>

package/src/components/select/select-multiple/use-select-multiple.ts

@@ -297,7 +297,12 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
       });
     }
 
-    if (multiSelectedListItems.value.length > 3) {
+    // Determine input text based on whether count-only mode is enabled
+    if (props.displaySelectedCountOnly && multiSelectedListItems.value.length) {
+      inputText.value = `${multiSelectedListItems.value.length} item${
+        multiSelectedListItems.value.length === 1 ? '' : 's'
+      } selected`;
+    } else if (multiSelectedListItems.value.length > 3) {
       inputText.value = `${multiSelectedListItems.value.length} items selected`;
     } else {
       inputText.value = multiSelectedListItems.value.map((item) => item.text).join(', ');
@@ -408,5 +413,6 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     handleMultiSelectedItem,
     handleChippedRemoveItem,
     handleClear,
+    normalizedValue,
   };
 };