design-system-next 2.7.11 → 2.7.12

package/dist/design-system-next.js

@@ -5332,7 +5332,8 @@ const ze = sl, P2 = al, ol = ["su", "mo", "tu", "we", "th", "fr", "sa"], il = ["
 ], dl = {
   id: {
     type: String,
-    required: !0
+    required: !0,
+    default: "date-picker"
   },
   modelValue: {
     type: String,
@@ -6116,7 +6117,7 @@ const $l = (e, t) => {
     handleTabClick: sa,
     handleBackspace: aa
   };
-}, bl = ["id"], Dl = ["for"], Il = { class: "spr-flex spr-h-full spr-items-center spr-gap-1.5" }, Al = ["disabled", "readonly"], xl = ["disabled", "readonly"], wl = ["disabled", "readonly"], jl = { class: "spr-flex spr-items-center spr-justify-center" }, Tl = {
+}, bl = ["id"], Dl = ["for"], Il = { class: "spr-flex spr-h-full spr-items-center spr-gap-1.5" }, Al = ["id", "disabled", "readonly"], xl = ["id", "disabled", "readonly"], wl = ["id", "disabled", "readonly"], jl = { class: "spr-flex spr-items-center spr-justify-center" }, Tl = {
   class: /* @__PURE__ */ b([
     "spr-flex spr-justify-between spr-gap-2 spr-px-4 spr-py-3",
     "spr-border spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-border-mushroom-200"
@@ -6389,6 +6390,7 @@ const $l = (e, t) => {
             }, [
               I("div", Il, [
                 i2(I("input", {
+                  id: `${r.id}-month`,
                   ref_key: "monthInputRef",
                   ref: o,
                   "onUpdate:modelValue": se[0] || (se[0] = (F) => Ce(N) ? N.value = F : null),
@@ -6408,6 +6410,7 @@ const $l = (e, t) => {
                 ]),
                 se[16] || (se[16] = I("span", { class: "spr-text-color-strong spr-font-size-200 spr-text-color-weak" }, "/", -1)),
                 i2(I("input", {
+                  id: `${r.id}-date`,
                   ref_key: "dateInputRef",
                   ref: l,
                   "onUpdate:modelValue": se[4] || (se[4] = (F) => Ce(y) ? y.value = F : null),
@@ -6427,6 +6430,7 @@ const $l = (e, t) => {
                 ]),
                 se[17] || (se[17] = I("span", { class: "spr-text-color-strong spr-font-size-200 spr-text-color-weak" }, "/", -1)),
                 i2(I("input", {
+                  id: `${r.id}-year`,
                   ref_key: "yearInputRef",
                   ref: u,
                   "onUpdate:modelValue": se[8] || (se[8] = (F) => Ce(M) ? M.value = F : null),
@@ -7910,6 +7914,7 @@ const $l = (e, t) => {
       "popper-hide-triggers": [],
       container: `#${i(y)}`,
       "auto-hide": !1,
+      delay: 0,
       style: _e({
         width: r.width,
         position: "relative"
@@ -15632,7 +15637,7 @@ const t8 = (e) => ({
       a.value = u.target.value;
     }
   };
-}, j7 = ["for"], T7 = ["rows", "placeholder", "value", "minlength", "maxlength", "readonly", "disabled"], S7 = /* @__PURE__ */ ae({
+}, j7 = ["for"], T7 = ["id", "rows", "placeholder", "value", "minlength", "maxlength", "readonly", "disabled"], S7 = /* @__PURE__ */ ae({
   __name: "textarea",
   props: A7,
   emits: x7,
@@ -15646,9 +15651,9 @@ const t8 = (e) => ({
         for: o.id,
         class: b(i(a).labelClasses)
       }, V(o.label), 11, j7)) : w("", !0),
-      I("textarea", He({
-        class: i(a).textAreaClasses
-      }, o.$attrs, {
+      I("textarea", He(o.$attrs, {
+        id: r.id,
+        class: i(a).textAreaClasses,
         rows: o.rows,
         placeholder: o.placeholder,
         value: o.modelValue,
@@ -15730,6 +15735,10 @@ const t8 = (e) => ({
   placeholder: {
     type: String,
     default: ""
+  },
+  id: {
+    type: String,
+    default: "time-picker"
   }
 }, L7 = {
   "update:modelValue": (e) => e instanceof MouseEvent
@@ -15830,6 +15839,7 @@ const t8 = (e) => ({
           }
         }, [
           Y(Ye, {
+            id: r.id,
             modelValue: i(l),
             "onUpdate:modelValue": y[0] || (y[0] = (f) => Ce(l) ? l.value = f : null),
             type: "text",
@@ -15846,7 +15856,7 @@ const t8 = (e) => ({
               Y(i(K), { icon: "ph:clock" })
             ]),
             _: 1
-          }, 8, ["modelValue", "placeholder", "readonly", "disabled", "label", "error", "display-helper", "helper-text", "onInput"])
+          }, 8, ["id", "modelValue", "placeholder", "readonly", "disabled", "label", "error", "display-helper", "helper-text", "onInput"])
         ], 8, E7)
       ]),
       _: 1

package/package.json

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

package/src/components/date-picker/date-picker.ts

@@ -27,6 +27,7 @@ export const datePickerPropTypes = {
   id: {
     type: String,
     required: true,
+    default: 'date-picker',
   },
   modelValue: {
     type: String,

package/src/components/date-picker/date-picker.vue

@@ -25,6 +25,7 @@
         <div ref="datePickerRef" :class="datePickerClasses.datePickerBaseInputClasses" @click="datePopperState = true">
           <div class="spr-flex spr-h-full spr-items-center spr-gap-1.5">
             <input
+              :id="`${props.id}-month`"
               ref="monthInputRef"
               v-model="monthInput"
               :class="['spr-w-[38px] spr-min-w-[38px]', datePickerClasses.datePickerInputClasses]"
@@ -39,6 +40,7 @@
             />
             <span class="spr-text-color-strong spr-font-size-200 spr-text-color-weak">/</span>
             <input
+              :id="`${props.id}-date`"
               ref="dateInputRef"
               v-model="dateInput"
               :class="['spr-w-[24px] spr-min-w-[24px] spr-text-center', datePickerClasses.datePickerInputClasses]"
@@ -53,6 +55,7 @@
             />
             <span class="spr-text-color-strong spr-font-size-200 spr-text-color-weak">/</span>
             <input
+              :id="`${props.id}-year`"
               ref="yearInputRef"
               v-model="yearInput"
               :class="['spr-w-[42px] spr-min-w-[42px]', datePickerClasses.datePickerInputClasses]"

package/src/components/filter/filter.vue

@@ -8,6 +8,7 @@
     :popper-hide-triggers="[]"
     :container="`#${uniqueId}`"
     :auto-hide="false"
+    :delay="0"
     :style="{
       width: props.width,
       position: 'relative',

package/src/components/textarea/textarea.vue

@@ -2,8 +2,9 @@
   <div :class="textareaClasses.wrapperClasses">
     <label v-if="label" :for="id" :class="textareaClasses.labelClasses">{{ label }}</label>
     <textarea
-      :class="textareaClasses.textAreaClasses"
       v-bind="$attrs"
+      :id="props.id"
+      :class="textareaClasses.textAreaClasses"
       :rows="rows"
       :placeholder="placeholder"
       :value="modelValue"

package/src/components/time-picker/time-picker.ts

@@ -55,6 +55,10 @@ export const timePickerPropTypes = {
     type: String,
     default: '',
   },
+  id: {
+    type: String,
+    default: 'time-picker',
+  },
 };
 export const timePickerEmitTypes = {
   'update:modelValue': (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,

package/src/components/time-picker/time-picker.vue

@@ -19,6 +19,7 @@
       }"
     >
       <spr-input
+        :id="props.id"
         v-model="selectedValue"
         type="text"
         :placeholder="getPlaceHolder"