@zeedhi/vuetify 1.124.0 → 1.126.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -40471,7 +40471,7 @@ let ZdInput = class ZdInput extends ZdComponentRender$1 {
40471
40471
  this.$emit('update:value', this.instance.value);
40472
40472
  this.$emit('input', this.instance.value);
40473
40473
  this.instance.input(undefined, this.$el);
40474
- if (this.inputRef) {
40474
+ if (this.inputRef && this.inputRef instanceof Vue) {
40475
40475
  this.$nextTick(() => {
40476
40476
  this.hasErrors = !!(this.inputRef.errorBucket.length > 0);
40477
40477
  });
@@ -43252,6 +43252,9 @@ let ZdDate = class ZdDate extends __vue_component__$1m {
43252
43252
  getLabel(name) {
43253
43253
  return DateHelper.getLabel(name);
43254
43254
  }
43255
+ getPickerWidth() {
43256
+ return this.$isMobile() ? '290px' : this.instance.pickerWidth || '248px';
43257
+ }
43255
43258
  };
43256
43259
  __decorate([
43257
43260
  PropWatch({
@@ -43321,9 +43324,13 @@ __decorate([
43321
43324
  __metadata("design:type", String)
43322
43325
  ], ZdDate.prototype, "pickerType", void 0);
43323
43326
  __decorate([
43324
- PropWatch({ type: [Number, String], default: 248 }),
43327
+ PropWatch({ type: [Number, String] }),
43325
43328
  __metadata("design:type", Object)
43326
43329
  ], ZdDate.prototype, "width", void 0);
43330
+ __decorate([
43331
+ PropWatch({ type: [Number, String], default: 248 }),
43332
+ __metadata("design:type", Object)
43333
+ ], ZdDate.prototype, "pickerWidth", void 0);
43327
43334
  __decorate([
43328
43335
  PropWatch({ type: String, default: undefined }),
43329
43336
  __metadata("design:type", Object)
@@ -43389,7 +43396,7 @@ var __vue_render__$1i = function () {
43389
43396
  id: _vm.instance.name,
43390
43397
  "offset-overflow": "",
43391
43398
  "offset-y": "",
43392
- "min-width": _vm.instance.width,
43399
+ "min-width": _vm.getPickerWidth(),
43393
43400
  transition: "scale-transition",
43394
43401
  disabled: _vm.instance.disabled || _vm.instance.readonly,
43395
43402
  "close-on-content-click": false,
@@ -43435,7 +43442,7 @@ var __vue_render__$1i = function () {
43435
43442
  {
43436
43443
  tag: "component",
43437
43444
  attrs: {
43438
- width: "290px",
43445
+ width: _vm.getPickerWidth(),
43439
43446
  persistent: "",
43440
43447
  "content-class": "zd-mx-0",
43441
43448
  parent: _vm.instance,
@@ -43484,7 +43491,7 @@ var __vue_render__$1i = function () {
43484
43491
  showDatePicker: _vm.instance.showDatePicker,
43485
43492
  showWeek: _vm.instance.showWeek,
43486
43493
  type: _vm.instance.pickerType,
43487
- width: _vm.$isMobile() ? "290px" : _vm.instance.width,
43494
+ width: _vm.getPickerWidth(),
43488
43495
  max: _vm.instance.formatISODateValue(_vm.instance.max),
43489
43496
  min: _vm.instance.formatISODateValue(_vm.instance.min),
43490
43497
  },
@@ -43608,7 +43615,7 @@ __vue_render__$1i._withStripped = true;
43608
43615
  /* style */
43609
43616
  const __vue_inject_styles__$1i = function (inject) {
43610
43617
  if (!inject) return
43611
- inject("data-v-4b5cc77a_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-helper-values-option {\n cursor: pointer;\n}\n.date-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
43618
+ inject("data-v-3d3f4a04_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-helper-values-option {\n cursor: pointer;\n}\n.date-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
43612
43619
 
43613
43620
  };
43614
43621
  /* scoped */
@@ -43777,6 +43784,9 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$1m {
43777
43784
  getLabel(name) {
43778
43785
  return DateHelper.getLabel(name);
43779
43786
  }
43787
+ getPickerWidth() {
43788
+ return this.$isMobile() ? '290px' : this.instance.pickerWidth || '248px';
43789
+ }
43780
43790
  };
43781
43791
  __decorate([
43782
43792
  PropWatch({
@@ -43850,9 +43860,13 @@ __decorate([
43850
43860
  __metadata("design:type", String)
43851
43861
  ], ZdDateRange.prototype, "splitter", void 0);
43852
43862
  __decorate([
43853
- PropWatch({ type: [Number, String], default: 248 }),
43863
+ PropWatch({ type: [Number, String] }),
43854
43864
  __metadata("design:type", Object)
43855
43865
  ], ZdDateRange.prototype, "width", void 0);
43866
+ __decorate([
43867
+ PropWatch({ type: [Number, String], default: 248 }),
43868
+ __metadata("design:type", Object)
43869
+ ], ZdDateRange.prototype, "pickerWidth", void 0);
43856
43870
  __decorate([
43857
43871
  PropWatch({ type: String, default: undefined }),
43858
43872
  __metadata("design:type", Object)
@@ -43922,7 +43936,7 @@ var __vue_render__$1h = function () {
43922
43936
  id: _vm.instance.name,
43923
43937
  "offset-overflow": "",
43924
43938
  "offset-y": "",
43925
- "min-width": _vm.instance.width,
43939
+ "min-width": _vm.getPickerWidth(),
43926
43940
  transition: "scale-transition",
43927
43941
  disabled: _vm.instance.disabled || _vm.instance.readonly,
43928
43942
  "close-on-content-click": false,
@@ -43968,7 +43982,7 @@ var __vue_render__$1h = function () {
43968
43982
  {
43969
43983
  tag: "component",
43970
43984
  attrs: {
43971
- width: "290px",
43985
+ width: _vm.getPickerWidth(),
43972
43986
  persistent: "",
43973
43987
  "content-class": "zd-mx-0",
43974
43988
  },
@@ -44026,7 +44040,7 @@ var __vue_render__$1h = function () {
44026
44040
  showDatePicker: _vm.instance.showDatePicker,
44027
44041
  showWeek: _vm.instance.showWeek,
44028
44042
  type: _vm.instance.pickerType,
44029
- width: _vm.$isMobile() ? "290px" : _vm.instance.width,
44043
+ width: _vm.getPickerWidth(),
44030
44044
  max: _vm.instance.formatISODateRangeValue(
44031
44045
  _vm.instance.max
44032
44046
  )[0],
@@ -44155,7 +44169,7 @@ __vue_render__$1h._withStripped = true;
44155
44169
  /* style */
44156
44170
  const __vue_inject_styles__$1h = function (inject) {
44157
44171
  if (!inject) return
44158
- inject("data-v-68640a11_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-range-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-range-helper-values-option {\n cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
44172
+ inject("data-v-ddd05c04_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-range-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-range-helper-values-option {\n cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
44159
44173
 
44160
44174
  };
44161
44175
  /* scoped */
@@ -56083,7 +56097,7 @@ __vue_render__$u._withStripped = true;
56083
56097
  /* style */
56084
56098
  const __vue_inject_styles__$u = function (inject) {
56085
56099
  if (!inject) return
56086
- inject("data-v-061ff922_0", { source: ".zd-modal-title {\n padding-bottom: 0px;\n}\n.zd-modal-container {\n padding: 0;\n cursor: default;\n}\n.zd-modal-flex {\n width: 100%;\n}\n.zd-modal-draggable {\n position: relative;\n}\n.zd-modal-draggable-handle {\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n cursor: grabbing;\n cursor: -moz-grabbing;\n cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card {\n position: relative;\n max-height: 90vh;\n display: flex;\n justify-content: center;\n overflow: auto;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n padding: var(--zd-default-padding);\n padding-bottom: 0px;\n font-size: var(--zd-font-title-size);\n font-weight: var(--zd-font-title-weight);\n color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n padding: var(--zd-default-padding);\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text > .zd-modal-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 0;\n}", map: undefined, media: undefined });
56100
+ inject("data-v-2d5a659a_0", { source: ".zd-modal-title {\n padding-bottom: 0px;\n}\n.zd-modal-container {\n padding: 0;\n cursor: default;\n}\n.zd-modal-flex {\n width: 100%;\n}\n.zd-modal-draggable {\n position: relative;\n}\n.zd-modal-draggable-handle {\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n cursor: grabbing;\n cursor: -moz-grabbing;\n cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card {\n position: relative;\n max-height: 90vh;\n display: flex;\n justify-content: center;\n overflow: auto;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n padding: var(--zd-default-padding);\n padding-bottom: 0px;\n font-size: var(--zd-font-title-size);\n font-weight: var(--zd-font-title-weight);\n color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n padding: var(--zd-default-padding);\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text > .zd-modal-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 0;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text > .zd-modal-container > * {\n flex-grow: 0;\n}", map: undefined, media: undefined });
56087
56101
 
56088
56102
  };
56089
56103
  /* scoped */
@@ -57117,7 +57131,7 @@ let ZdSearch = class ZdSearch extends __vue_component__$1m {
57117
57131
  * Children to be rendered inside the searchable columns dropdown
57118
57132
  */
57119
57133
  get dropdownChildren() {
57120
- var _a;
57134
+ var _a, _b;
57121
57135
  if (!this.instance || this.instance.hideSearchField)
57122
57136
  return [];
57123
57137
  const children = [{
@@ -57129,7 +57143,7 @@ let ZdSearch = class ZdSearch extends __vue_component__$1m {
57129
57143
  events: { click: this.selectSearchField },
57130
57144
  fieldName: '__ALL',
57131
57145
  }];
57132
- (_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.columns.forEach((column) => {
57146
+ (_b = (_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.forEach((column) => {
57133
57147
  var _a;
57134
57148
  if (!((_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.isColumnSearchable(column)))
57135
57149
  return;
@@ -57164,11 +57178,10 @@ let ZdSearch = class ZdSearch extends __vue_component__$1m {
57164
57178
  });
57165
57179
  }
57166
57180
  getHintText() {
57181
+ var _a, _b;
57167
57182
  if (this.instance.hideSearchField)
57168
57183
  return '';
57169
- return this.instance.iterableComponent.searchIn
57170
- ? this.instance.iterableComponent.getColumn(this.instance.iterableComponent.searchIn).label
57171
- : this.$t('ALL_FIELDS');
57184
+ return ((_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.searchIn) ? (_b = this.instance.iterableComponent) === null || _b === void 0 ? void 0 : _b.getColumn(this.instance.iterableComponent.searchIn).label : this.$t('ALL_FIELDS');
57172
57185
  }
57173
57186
  getSearchValue() {
57174
57187
  var _a;
@@ -61499,6 +61512,9 @@ let ZdTime = class ZdTime extends __vue_component__$1m {
61499
61512
  }
61500
61513
  return '';
61501
61514
  }
61515
+ getPickerWidth() {
61516
+ return this.$isMobile() ? '290px' : this.instance.pickerWidth || '248px';
61517
+ }
61502
61518
  };
61503
61519
  __decorate([
61504
61520
  PropWatch({ type: [Array, String], default: undefined }),
@@ -61564,6 +61580,10 @@ __decorate([
61564
61580
  PropWatch({ type: String }),
61565
61581
  __metadata("design:type", String)
61566
61582
  ], ZdTime.prototype, "displayFormat", void 0);
61583
+ __decorate([
61584
+ PropWatch({ type: [Number, String], default: 248 }),
61585
+ __metadata("design:type", Object)
61586
+ ], ZdTime.prototype, "pickerWidth", void 0);
61567
61587
  ZdTime = __decorate([
61568
61588
  Component$1
61569
61589
  ], ZdTime);
@@ -61597,7 +61617,7 @@ var __vue_render__$6 = function () {
61597
61617
  "offset-overflow": "",
61598
61618
  "offset-y": "",
61599
61619
  "input-activator": "",
61600
- "min-width": "290px",
61620
+ "min-width": _vm.getPickerWidth(),
61601
61621
  transition: "scale-transition",
61602
61622
  dark: _vm.instance.dark,
61603
61623
  light: _vm.instance.light,
@@ -61641,7 +61661,7 @@ var __vue_render__$6 = function () {
61641
61661
  {
61642
61662
  tag: "component",
61643
61663
  attrs: {
61644
- width: "290px",
61664
+ width: _vm.getPickerWidth(),
61645
61665
  persistent: "",
61646
61666
  "content-class": "zd-mx-0",
61647
61667
  },
@@ -61667,6 +61687,7 @@ var __vue_render__$6 = function () {
61667
61687
  },
61668
61688
  ],
61669
61689
  ref: "picker",
61690
+ staticClass: "zd-time-picker",
61670
61691
  attrs: {
61671
61692
  "allowed-hours": _vm.instance.allowedHours,
61672
61693
  "allowed-minutes": _vm.instance.allowedMinutes,
@@ -61701,7 +61722,7 @@ var __vue_render__$6 = function () {
61701
61722
  fullWidth: _vm.instance.fullWidth,
61702
61723
  useSeconds: _vm.instance.useSeconds,
61703
61724
  scrollable: _vm.instance.scrollable,
61704
- width: _vm.$isMobile() ? "290px" : _vm.instance.width,
61725
+ width: _vm.getPickerWidth(),
61705
61726
  },
61706
61727
  false
61707
61728
  ),
@@ -61783,7 +61804,7 @@ __vue_render__$6._withStripped = true;
61783
61804
  /* style */
61784
61805
  const __vue_inject_styles__$6 = function (inject) {
61785
61806
  if (!inject) return
61786
- inject("data-v-e8f3b86c_0", { source: ".zd-time input[type=time] {\n -webkit-appearance: none;\n}\n.zd-time input[type=time]::-webkit-inner-spin-button, .zd-time input[type=time]::-webkit-calendar-picker-indicator {\n display: none;\n -webkit-appearance: none;\n}", map: undefined, media: undefined });
61807
+ inject("data-v-5bf5bbda_0", { source: ".zd-time input[type=time] {\n -webkit-appearance: none;\n}\n.zd-time input[type=time]::-webkit-inner-spin-button, .zd-time input[type=time]::-webkit-calendar-picker-indicator {\n display: none;\n -webkit-appearance: none;\n}\n.zd-time-picker .v-time-picker-title__time .v-picker__title__btn, .zd-time-picker .v-time-picker-title__time span {\n height: 30cqw;\n font-size: 30cqw;\n}\n.zd-time-picker .v-picker__title {\n container-type: inline-size;\n}\n.zd-time-picker .v-picker__body {\n aspect-ratio: 1/1;\n}\n.zd-time-picker .v-picker__body .v-time-picker-clock__item, .zd-time-picker .v-picker__body .v-time-picker-clock__item:after, .zd-time-picker .v-picker__body .v-time-picker-clock__item:before {\n height: 32px;\n width: 32px;\n}\n.zd-time-picker .v-picker__body .v-time-picker-clock__item {\n font-size: 14px;\n}", map: undefined, media: undefined });
61787
61808
 
61788
61809
  };
61789
61810
  /* scoped */
@@ -40470,7 +40470,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
40470
40470
  this.$emit('update:value', this.instance.value);
40471
40471
  this.$emit('input', this.instance.value);
40472
40472
  this.instance.input(undefined, this.$el);
40473
- if (this.inputRef) {
40473
+ if (this.inputRef && this.inputRef instanceof Vue__default["default"]) {
40474
40474
  this.$nextTick(() => {
40475
40475
  this.hasErrors = !!(this.inputRef.errorBucket.length > 0);
40476
40476
  });
@@ -43251,6 +43251,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43251
43251
  getLabel(name) {
43252
43252
  return core.DateHelper.getLabel(name);
43253
43253
  }
43254
+ getPickerWidth() {
43255
+ return this.$isMobile() ? '290px' : this.instance.pickerWidth || '248px';
43256
+ }
43254
43257
  };
43255
43258
  __decorate([
43256
43259
  PropWatch({
@@ -43320,9 +43323,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43320
43323
  __metadata("design:type", String)
43321
43324
  ], ZdDate.prototype, "pickerType", void 0);
43322
43325
  __decorate([
43323
- PropWatch({ type: [Number, String], default: 248 }),
43326
+ PropWatch({ type: [Number, String] }),
43324
43327
  __metadata("design:type", Object)
43325
43328
  ], ZdDate.prototype, "width", void 0);
43329
+ __decorate([
43330
+ PropWatch({ type: [Number, String], default: 248 }),
43331
+ __metadata("design:type", Object)
43332
+ ], ZdDate.prototype, "pickerWidth", void 0);
43326
43333
  __decorate([
43327
43334
  PropWatch({ type: String, default: undefined }),
43328
43335
  __metadata("design:type", Object)
@@ -43388,7 +43395,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43388
43395
  id: _vm.instance.name,
43389
43396
  "offset-overflow": "",
43390
43397
  "offset-y": "",
43391
- "min-width": _vm.instance.width,
43398
+ "min-width": _vm.getPickerWidth(),
43392
43399
  transition: "scale-transition",
43393
43400
  disabled: _vm.instance.disabled || _vm.instance.readonly,
43394
43401
  "close-on-content-click": false,
@@ -43434,7 +43441,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43434
43441
  {
43435
43442
  tag: "component",
43436
43443
  attrs: {
43437
- width: "290px",
43444
+ width: _vm.getPickerWidth(),
43438
43445
  persistent: "",
43439
43446
  "content-class": "zd-mx-0",
43440
43447
  parent: _vm.instance,
@@ -43483,7 +43490,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43483
43490
  showDatePicker: _vm.instance.showDatePicker,
43484
43491
  showWeek: _vm.instance.showWeek,
43485
43492
  type: _vm.instance.pickerType,
43486
- width: _vm.$isMobile() ? "290px" : _vm.instance.width,
43493
+ width: _vm.getPickerWidth(),
43487
43494
  max: _vm.instance.formatISODateValue(_vm.instance.max),
43488
43495
  min: _vm.instance.formatISODateValue(_vm.instance.min),
43489
43496
  },
@@ -43607,7 +43614,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43607
43614
  /* style */
43608
43615
  const __vue_inject_styles__$1i = function (inject) {
43609
43616
  if (!inject) return
43610
- inject("data-v-4b5cc77a_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-helper-values-option {\n cursor: pointer;\n}\n.date-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
43617
+ inject("data-v-3d3f4a04_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-helper-values-option {\n cursor: pointer;\n}\n.date-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
43611
43618
 
43612
43619
  };
43613
43620
  /* scoped */
@@ -43776,6 +43783,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43776
43783
  getLabel(name) {
43777
43784
  return core.DateHelper.getLabel(name);
43778
43785
  }
43786
+ getPickerWidth() {
43787
+ return this.$isMobile() ? '290px' : this.instance.pickerWidth || '248px';
43788
+ }
43779
43789
  };
43780
43790
  __decorate([
43781
43791
  PropWatch({
@@ -43849,9 +43859,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43849
43859
  __metadata("design:type", String)
43850
43860
  ], ZdDateRange.prototype, "splitter", void 0);
43851
43861
  __decorate([
43852
- PropWatch({ type: [Number, String], default: 248 }),
43862
+ PropWatch({ type: [Number, String] }),
43853
43863
  __metadata("design:type", Object)
43854
43864
  ], ZdDateRange.prototype, "width", void 0);
43865
+ __decorate([
43866
+ PropWatch({ type: [Number, String], default: 248 }),
43867
+ __metadata("design:type", Object)
43868
+ ], ZdDateRange.prototype, "pickerWidth", void 0);
43855
43869
  __decorate([
43856
43870
  PropWatch({ type: String, default: undefined }),
43857
43871
  __metadata("design:type", Object)
@@ -43921,7 +43935,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43921
43935
  id: _vm.instance.name,
43922
43936
  "offset-overflow": "",
43923
43937
  "offset-y": "",
43924
- "min-width": _vm.instance.width,
43938
+ "min-width": _vm.getPickerWidth(),
43925
43939
  transition: "scale-transition",
43926
43940
  disabled: _vm.instance.disabled || _vm.instance.readonly,
43927
43941
  "close-on-content-click": false,
@@ -43967,7 +43981,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
43967
43981
  {
43968
43982
  tag: "component",
43969
43983
  attrs: {
43970
- width: "290px",
43984
+ width: _vm.getPickerWidth(),
43971
43985
  persistent: "",
43972
43986
  "content-class": "zd-mx-0",
43973
43987
  },
@@ -44025,7 +44039,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
44025
44039
  showDatePicker: _vm.instance.showDatePicker,
44026
44040
  showWeek: _vm.instance.showWeek,
44027
44041
  type: _vm.instance.pickerType,
44028
- width: _vm.$isMobile() ? "290px" : _vm.instance.width,
44042
+ width: _vm.getPickerWidth(),
44029
44043
  max: _vm.instance.formatISODateRangeValue(
44030
44044
  _vm.instance.max
44031
44045
  )[0],
@@ -44154,7 +44168,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
44154
44168
  /* style */
44155
44169
  const __vue_inject_styles__$1h = function (inject) {
44156
44170
  if (!inject) return
44157
- inject("data-v-68640a11_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-range-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-range-helper-values-option {\n cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
44171
+ inject("data-v-ddd05c04_0", { source: "div.v-picker--date .v-picker__body {\n background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n height: var(--icon-size);\n width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n margin-bottom: 12px;\n padding: 0 var(--spacing-4);\n height: 200px;\n margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n width: 24px;\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n padding: 4px 0 7px 0;\n height: 24px;\n width: 56px;\n min-width: 56px;\n border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n background: var(--zd-primary-base) !important;\n color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n cursor: default;\n}\n.date-range-helper-values-button {\n height: 24px !important;\n margin-left: 5px;\n margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n margin-top: 20px;\n}\n.date-range-helper-values-option {\n cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
44158
44172
 
44159
44173
  };
44160
44174
  /* scoped */
@@ -56082,7 +56096,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
56082
56096
  /* style */
56083
56097
  const __vue_inject_styles__$u = function (inject) {
56084
56098
  if (!inject) return
56085
- inject("data-v-061ff922_0", { source: ".zd-modal-title {\n padding-bottom: 0px;\n}\n.zd-modal-container {\n padding: 0;\n cursor: default;\n}\n.zd-modal-flex {\n width: 100%;\n}\n.zd-modal-draggable {\n position: relative;\n}\n.zd-modal-draggable-handle {\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n cursor: grabbing;\n cursor: -moz-grabbing;\n cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card {\n position: relative;\n max-height: 90vh;\n display: flex;\n justify-content: center;\n overflow: auto;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n padding: var(--zd-default-padding);\n padding-bottom: 0px;\n font-size: var(--zd-font-title-size);\n font-weight: var(--zd-font-title-weight);\n color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n padding: var(--zd-default-padding);\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text > .zd-modal-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 0;\n}", map: undefined, media: undefined });
56099
+ inject("data-v-2d5a659a_0", { source: ".zd-modal-title {\n padding-bottom: 0px;\n}\n.zd-modal-container {\n padding: 0;\n cursor: default;\n}\n.zd-modal-flex {\n width: 100%;\n}\n.zd-modal-draggable {\n position: relative;\n}\n.zd-modal-draggable-handle {\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n cursor: grabbing;\n cursor: -moz-grabbing;\n cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card {\n position: relative;\n max-height: 90vh;\n display: flex;\n justify-content: center;\n overflow: auto;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n padding: var(--zd-default-padding);\n padding-bottom: 0px;\n font-size: var(--zd-font-title-size);\n font-weight: var(--zd-font-title-weight);\n color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n padding: var(--zd-default-padding);\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text > .zd-modal-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 0;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text > .zd-modal-container > * {\n flex-grow: 0;\n}", map: undefined, media: undefined });
56086
56100
 
56087
56101
  };
56088
56102
  /* scoped */
@@ -57116,7 +57130,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
57116
57130
  * Children to be rendered inside the searchable columns dropdown
57117
57131
  */
57118
57132
  get dropdownChildren() {
57119
- var _a;
57133
+ var _a, _b;
57120
57134
  if (!this.instance || this.instance.hideSearchField)
57121
57135
  return [];
57122
57136
  const children = [{
@@ -57128,7 +57142,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
57128
57142
  events: { click: this.selectSearchField },
57129
57143
  fieldName: '__ALL',
57130
57144
  }];
57131
- (_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.columns.forEach((column) => {
57145
+ (_b = (_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.forEach((column) => {
57132
57146
  var _a;
57133
57147
  if (!((_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.isColumnSearchable(column)))
57134
57148
  return;
@@ -57163,11 +57177,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
57163
57177
  });
57164
57178
  }
57165
57179
  getHintText() {
57180
+ var _a, _b;
57166
57181
  if (this.instance.hideSearchField)
57167
57182
  return '';
57168
- return this.instance.iterableComponent.searchIn
57169
- ? this.instance.iterableComponent.getColumn(this.instance.iterableComponent.searchIn).label
57170
- : this.$t('ALL_FIELDS');
57183
+ return ((_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.searchIn) ? (_b = this.instance.iterableComponent) === null || _b === void 0 ? void 0 : _b.getColumn(this.instance.iterableComponent.searchIn).label : this.$t('ALL_FIELDS');
57171
57184
  }
57172
57185
  getSearchValue() {
57173
57186
  var _a;
@@ -61498,6 +61511,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
61498
61511
  }
61499
61512
  return '';
61500
61513
  }
61514
+ getPickerWidth() {
61515
+ return this.$isMobile() ? '290px' : this.instance.pickerWidth || '248px';
61516
+ }
61501
61517
  };
61502
61518
  __decorate([
61503
61519
  PropWatch({ type: [Array, String], default: undefined }),
@@ -61563,6 +61579,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
61563
61579
  PropWatch({ type: String }),
61564
61580
  __metadata("design:type", String)
61565
61581
  ], ZdTime.prototype, "displayFormat", void 0);
61582
+ __decorate([
61583
+ PropWatch({ type: [Number, String], default: 248 }),
61584
+ __metadata("design:type", Object)
61585
+ ], ZdTime.prototype, "pickerWidth", void 0);
61566
61586
  ZdTime = __decorate([
61567
61587
  vuePropertyDecorator.Component
61568
61588
  ], ZdTime);
@@ -61596,7 +61616,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
61596
61616
  "offset-overflow": "",
61597
61617
  "offset-y": "",
61598
61618
  "input-activator": "",
61599
- "min-width": "290px",
61619
+ "min-width": _vm.getPickerWidth(),
61600
61620
  transition: "scale-transition",
61601
61621
  dark: _vm.instance.dark,
61602
61622
  light: _vm.instance.light,
@@ -61640,7 +61660,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
61640
61660
  {
61641
61661
  tag: "component",
61642
61662
  attrs: {
61643
- width: "290px",
61663
+ width: _vm.getPickerWidth(),
61644
61664
  persistent: "",
61645
61665
  "content-class": "zd-mx-0",
61646
61666
  },
@@ -61666,6 +61686,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
61666
61686
  },
61667
61687
  ],
61668
61688
  ref: "picker",
61689
+ staticClass: "zd-time-picker",
61669
61690
  attrs: {
61670
61691
  "allowed-hours": _vm.instance.allowedHours,
61671
61692
  "allowed-minutes": _vm.instance.allowedMinutes,
@@ -61700,7 +61721,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
61700
61721
  fullWidth: _vm.instance.fullWidth,
61701
61722
  useSeconds: _vm.instance.useSeconds,
61702
61723
  scrollable: _vm.instance.scrollable,
61703
- width: _vm.$isMobile() ? "290px" : _vm.instance.width,
61724
+ width: _vm.getPickerWidth(),
61704
61725
  },
61705
61726
  false
61706
61727
  ),
@@ -61782,7 +61803,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
61782
61803
  /* style */
61783
61804
  const __vue_inject_styles__$6 = function (inject) {
61784
61805
  if (!inject) return
61785
- inject("data-v-e8f3b86c_0", { source: ".zd-time input[type=time] {\n -webkit-appearance: none;\n}\n.zd-time input[type=time]::-webkit-inner-spin-button, .zd-time input[type=time]::-webkit-calendar-picker-indicator {\n display: none;\n -webkit-appearance: none;\n}", map: undefined, media: undefined });
61806
+ inject("data-v-5bf5bbda_0", { source: ".zd-time input[type=time] {\n -webkit-appearance: none;\n}\n.zd-time input[type=time]::-webkit-inner-spin-button, .zd-time input[type=time]::-webkit-calendar-picker-indicator {\n display: none;\n -webkit-appearance: none;\n}\n.zd-time-picker .v-time-picker-title__time .v-picker__title__btn, .zd-time-picker .v-time-picker-title__time span {\n height: 30cqw;\n font-size: 30cqw;\n}\n.zd-time-picker .v-picker__title {\n container-type: inline-size;\n}\n.zd-time-picker .v-picker__body {\n aspect-ratio: 1/1;\n}\n.zd-time-picker .v-picker__body .v-time-picker-clock__item, .zd-time-picker .v-picker__body .v-time-picker-clock__item:after, .zd-time-picker .v-picker__body .v-time-picker-clock__item:before {\n height: 32px;\n width: 32px;\n}\n.zd-time-picker .v-picker__body .v-time-picker-clock__item {\n font-size: 14px;\n}", map: undefined, media: undefined });
61786
61807
 
61787
61808
  };
61788
61809
  /* scoped */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/vuetify",
3
- "version": "1.124.0",
3
+ "version": "1.126.0",
4
4
  "description": "Zeedhi Components based on Vuetify",
5
5
  "author": "Zeedhi <zeedhi@teknisa.com>",
6
6
  "license": "ISC",
@@ -51,5 +51,5 @@
51
51
  "@types/prismjs": "1.26.*",
52
52
  "@types/sortablejs": "1.15.*"
53
53
  },
54
- "gitHead": "cf4754490b8bf206566c28fb04c333dcda9e729d"
54
+ "gitHead": "195333965a4efd36a67efa3b714aa95d32fe4625"
55
55
  }
@@ -22,6 +22,7 @@ export default class ZdDate extends ZdTextInput {
22
22
  showDatePicker: boolean | string;
23
23
  pickerType: string;
24
24
  width: number | string;
25
+ pickerWidth: number | string;
25
26
  mask: string | undefined;
26
27
  inputFormat: string | undefined;
27
28
  helperOptions: string[] | string;
@@ -45,4 +46,5 @@ export default class ZdDate extends ZdTextInput {
45
46
  private keyAllowed;
46
47
  helperValuesOptionClick({ component }: IEventParam<Text>): void;
47
48
  getLabel(name: string): string;
49
+ getPickerWidth(): string | number;
48
50
  }
@@ -20,6 +20,7 @@ export default class ZdDateRange extends ZdTextInput {
20
20
  showDatePicker: boolean | string;
21
21
  splitter: string;
22
22
  width: number | string;
23
+ pickerWidth: number | string;
23
24
  mask: string | undefined;
24
25
  inputFormat: string | undefined;
25
26
  helperOptions: string[] | string;
@@ -43,4 +44,5 @@ export default class ZdDateRange extends ZdTextInput {
43
44
  private keyAllowed;
44
45
  helperValuesOptionClick({ component }: IEventParam<Text>): void;
45
46
  getLabel(name: string): string;
47
+ getPickerWidth(): string | number;
46
48
  }
@@ -20,6 +20,7 @@ export default class ZdTime extends ZdTextInput {
20
20
  valueFormat: string;
21
21
  inputFormat: string | undefined;
22
22
  displayFormat: string;
23
+ pickerWidth: string | number;
23
24
  instance: Time;
24
25
  instanceType: typeof Time;
25
26
  onChangeTimePicker(): void;
@@ -36,4 +37,5 @@ export default class ZdTime extends ZdTextInput {
36
37
  pickerDestroyed(): void;
37
38
  private toMask;
38
39
  get getTimeMask(): "" | (string | RegExp)[];
40
+ getPickerWidth(): string | number;
39
41
  }
@@ -1,6 +0,0 @@
1
- import { IComponentRender } from '@zeedhi/common';
2
- import Vue from 'vue';
3
- export default class ZdGridFooter extends Vue {
4
- footerSlot: IComponentRender[];
5
- instance: any;
6
- }
@@ -1,8 +0,0 @@
1
- import { IComponentRender } from '@zeedhi/common';
2
- import Vue from 'vue';
3
- export default class ZdGridNoData extends Vue {
4
- errorSlot: IComponentRender[];
5
- noDataSlot: IComponentRender[];
6
- noResultSlot: IComponentRender[];
7
- instance: any;
8
- }
@@ -1,6 +0,0 @@
1
- import { IComponentRender } from '@zeedhi/common';
2
- import Vue from 'vue';
3
- export default class ZdGridTop extends Vue {
4
- toolbarSlot: IComponentRender[];
5
- instance: any;
6
- }
@@ -1,23 +0,0 @@
1
- import { IterableColumnsButton } from '@zeedhi/common';
2
- import ZdButton from '../zd-button/ZdButton.vue';
3
- /**
4
- * Iterable Columns Button component
5
- */
6
- export default class ZdIterableColumnsButton extends ZdButton {
7
- iterableComponentName: string;
8
- iconName: string;
9
- icon: boolean | string;
10
- instance: IterableColumnsButton;
11
- instanceType: typeof IterableColumnsButton;
12
- getEvents(on: any): {
13
- [x: string]: string | import("@zeedhi/core").IEvent<import("@zeedhi/common").IButtonEvent> | undefined;
14
- blur?: string | import("@zeedhi/core").IEvent<import("@zeedhi/common").IButtonEvent> | undefined;
15
- click?: string | import("@zeedhi/core").IEvent<import("@zeedhi/common").IButtonEvent> | undefined;
16
- focus?: string | import("@zeedhi/core").IEvent<import("@zeedhi/common").IButtonEvent> | undefined;
17
- onCreated?: string | import("@zeedhi/core").IEvent<import("@zeedhi/common").IButtonEvent> | undefined;
18
- onBeforeMount?: string | import("@zeedhi/core").IEvent<import("@zeedhi/common").IButtonEvent> | undefined;
19
- onMounted?: string | import("@zeedhi/core").IEvent<import("@zeedhi/common").IButtonEvent> | undefined;
20
- onBeforeDestroy?: string | import("@zeedhi/core").IEvent<import("@zeedhi/common").IButtonEvent> | undefined;
21
- onDestroyed?: string | import("@zeedhi/core").IEvent<import("@zeedhi/common").IButtonEvent> | undefined;
22
- };
23
- }
@@ -1,9 +0,0 @@
1
- import { IterablePageInfo } from '@zeedhi/common';
2
- import ZdIterablePageComponent from './ZdIterablePageComponent';
3
- /**
4
- * Iterable page info component
5
- */
6
- export default class ZdIterablePageInfo extends ZdIterablePageComponent {
7
- instance: IterablePageInfo;
8
- instanceType: typeof IterablePageInfo;
9
- }
@@ -1,20 +0,0 @@
1
- import { IDictionary } from '@zeedhi/core';
2
- import { IterablePageSize } from '@zeedhi/common';
3
- import ZdSelect from '../zd-select/ZdSelect.vue';
4
- /**
5
- * Iterable page size component
6
- */
7
- export default class ZdIterablePageSize extends ZdSelect {
8
- iterableComponentName: string;
9
- clearable: boolean | string;
10
- dataText: string | string[];
11
- dataValue: string;
12
- dense: boolean | string;
13
- autocomplete: boolean | string;
14
- showHelper: boolean | string;
15
- showLabel: boolean | string;
16
- validations: IDictionary<IDictionary<string | number>>;
17
- instance: IterablePageSize;
18
- instanceType: typeof IterablePageSize;
19
- mounted(): void;
20
- }
@@ -1,35 +0,0 @@
1
- import { IterablePagination } from '@zeedhi/common';
2
- import ZdIterablePageComponent from './ZdIterablePageComponent';
3
- /**
4
- * Iterable pagination component
5
- */
6
- export default class ZdIterablePagination extends ZdIterablePageComponent {
7
- circle: boolean;
8
- maxButtons?: number;
9
- nextIcon: string;
10
- prevIcon: string;
11
- instance: IterablePagination;
12
- instanceType: typeof IterablePagination;
13
- private lastLength?;
14
- private element;
15
- private paginationComponent;
16
- mounted(): void;
17
- private initRefs;
18
- /**
19
- * Vuetify doesn't wait for nextTick to calculate maxButtons when resizing,
20
- * so we have to refresh it
21
- */
22
- private refreshMaxButtons;
23
- private updateIterableEvent;
24
- /**
25
- * Fix maxButtons when pagination is not visible initially
26
- */
27
- private initMaxButtons;
28
- private lengthChange;
29
- growPagination(): void;
30
- /**
31
- * Approach to "width: auto + 17px", because vuetify pagination requires parent element
32
- * to have 17px of extra width relative to children to calculate the number of buttons displayed
33
- */
34
- updateWidth(): void;
35
- }
@@ -1,16 +0,0 @@
1
- import { Search } from '@zeedhi/common';
2
- import ZdTextInput from '../zd-text-input/ZdTextInput.vue';
3
- /**
4
- * Search component
5
- */
6
- export default class ZdSearch extends ZdTextInput {
7
- iterableComponentName: string;
8
- showLabel: string;
9
- showHelper: string;
10
- appendIcon: string;
11
- placeholder: string;
12
- cssClass: string;
13
- instance: Search;
14
- instanceType: typeof Search;
15
- getSearchValue(): string;
16
- }
@@ -1,2 +0,0 @@
1
- declare const _default: (name: string) => string;
2
- export default _default;