design-system-next 2.7.19 → 2.7.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.7.19",
+  "version": "2.7.21",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

package/src/components/calendar-cell/calendar-cell.ts

@@ -41,6 +41,10 @@ export const calendarCellPropTypes = {
     type: String,
     default: '',
   },
+  icon: {
+    type: String,
+    default: '',
+  },
 };
 
 export type CalendarCellPropTypes = ExtractPropTypes<typeof calendarCellPropTypes>;

package/src/components/calendar-cell/calendar-cell.vue

@@ -1,9 +1,10 @@
 <template>
   <div :class="getCalendarCellClassess.getMainClasses" @click="handleClick">
+    <slot name="prefix">
+      <Icon v-if="hasIconStatus" :icon="getCellIcon" />
+    </slot>
     <slot>
       <spr-status v-if="isError" :state="props.state" size="sm" />
-      <Icon v-if="hasIconStatus" :icon="getCellIcon" />
-
       <div v-if="hasContent" class="spr-break-words">
         <div v-if="props.title" :class="getCalendarCellClassess.titleClasses">
           {{ props.title }}

package/src/components/calendar-cell/use-calendar-cell.ts

@@ -53,11 +53,11 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
   const isError = computed(() => props.status === 'error');
 
   const getShiftLabel = computed((): string => {
-    return shiftLabels[props.type] || props.subDescription;
+    return props.subDescription || shiftLabels[props.type];
   });
 
   const getCellIcon = computed((): string => {
-    return iconMap[props.type] || '';
+    return props.icon || iconMap[props.type];
   });
 
   const getCellClasses = computed((): string => {

package/src/components/textarea/textarea.ts

@@ -7,10 +7,6 @@ export const textAreaPropTypes = {
     type: String,
     default: '',
   },
-  modelValue: {
-    type: String,
-    default: '',
-  },
   label: {
     type: String,
     default: '',
@@ -57,6 +53,10 @@ export const textAreaPropTypes = {
     type: String,
     default: '',
   },
+  hasCounter: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const textAreaEmitTypes = {

package/src/components/textarea/textarea.vue

@@ -7,18 +7,26 @@
       :class="textareaClasses.textAreaClasses"
       :rows="rows"
       :placeholder="placeholder"
-      :value="modelValue"
       :minlength="props.minLength"
       :maxlength="props.maxLength"
       :readonly="readonly"
       :disabled="props.disabled"
       @input="onInput"
     ></textarea>
-    <div v-if="props.displayHelper" :class="textareaClasses.helperClasses">
-      <slot name="helperMessage">
-        <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
-        <span>{{ props.helperText }}</span>
-      </slot>
+
+    <div :class="textareaClasses.slotWrapperClasses">
+      <div v-if="props.displayHelper" :class="textareaClasses.helperClasses">
+        <slot name="helperMessage">
+          <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+          <span>{{ props.helperText }}</span>
+        </slot>
+      </div>
+
+      <div v-if="props.hasCounter && props.maxLength" :class="textareaClasses.helperClasses">
+        <slot name="counter">
+          <span>{{ `${$attrs.modelValue.length}/${props.maxLength}` }}</span>
+        </slot>
+      </div>
     </div>
   </div>
 </template>

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

@@ -39,7 +39,12 @@ export const useTextArea = (props: TextAreaPropTypes, emit: SetupContext<TextAre
       'spr-text-color-supporting': !error.value,
     });
 
-    return { wrapperClasses, labelClasses, textAreaClasses, helperClasses };
+    const slotWrapperClasses = classNames('spr-flex spr-items-center', {
+      'spr-justify-between': props.displayHelper && props.hasCounter,
+      'spr-justify-end': !props.displayHelper && props.hasCounter,
+    });
+
+    return { wrapperClasses, labelClasses, textAreaClasses, helperClasses, slotWrapperClasses };
   });
 
   const onInput = (event: Event) => {

package/src/vite-env.d.ts

@@ -1,6 +0,0 @@
-interface ImportMeta { readonly glob: ImportMetaGlob }
-
-interface ImportMetaGlob {
-  (pattern: string, options?: { eager?: boolean }): Record<string, () => Promise<unknown>>
-  (pattern: string, options?: { eager: true }): Record<string, unknown>
-}