@dataloop-ai/components 0.19.14 → 0.19.16

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.19.14",
3
+ "version": "0.19.16",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -5,6 +5,7 @@
5
5
  'dl-date-input-focused': focused && !disabled,
6
6
  'dl-date-input-disabled': disabled
7
7
  }"
8
+ :style="cssVars"
8
9
  >
9
10
  <dl-icon
10
11
  icon="icon-dl-date"
@@ -42,12 +43,23 @@ export default defineComponent({
42
43
  inputStyle: {
43
44
  type: Object as PropType<Record<string, any>>,
44
45
  default: () => ({})
46
+ },
47
+ width: {
48
+ type: String,
49
+ default: 'fit-content'
45
50
  }
46
51
  },
47
52
  data() {
48
53
  return {
49
54
  focused: false
50
55
  }
56
+ },
57
+ computed: {
58
+ cssVars(): Record<string, string> {
59
+ return {
60
+ '--dl-date-input-width': this.width
61
+ }
62
+ }
51
63
  }
52
64
  })
53
65
  </script>
@@ -59,7 +71,7 @@ export default defineComponent({
59
71
  border-radius: 2px;
60
72
  padding: 5px 10px;
61
73
  display: flex;
62
- justify-content: center;
74
+ width: var(--dl-date-input-width);
63
75
  align-items: center;
64
76
  height: 28px;
65
77
  box-sizing: border-box;
@@ -7,6 +7,7 @@
7
7
  :text="dateInputText"
8
8
  :input-style="dateInputStyle"
9
9
  :disabled="disabled"
10
+ :width="width"
10
11
  >
11
12
  <dl-menu
12
13
  ref="dateTimeRangeMenu"
@@ -131,6 +132,10 @@ export default defineComponent({
131
132
  placeholder: {
132
133
  type: String,
133
134
  default: 'Set Due Date'
135
+ },
136
+ width: {
137
+ type: String,
138
+ default: 'fit-content'
134
139
  }
135
140
  },
136
141
  emits: ['update:model-value', 'set-type', 'change'],
@@ -74,9 +74,25 @@
74
74
  {{ date }}
75
75
  </div>
76
76
  <div class="dl-dtr--input">
77
+ <div style="width: 500px">
78
+ <dl-date-time-range
79
+ v-model="date"
80
+ :type="type"
81
+ :available-range="range ? availableRange : null"
82
+ :mode="mode"
83
+ :show-time="showTime"
84
+ :auto-close="autoClose"
85
+ @set-type="handleSetType"
86
+ @change="handleModelValueUpdate"
87
+ />
88
+ </div>
89
+ </div>
90
+ <div style="width: 500px">
91
+ With 100% width
77
92
  <dl-date-time-range
78
93
  v-model="date"
79
94
  :type="type"
95
+ width="100%"
80
96
  :available-range="range ? availableRange : null"
81
97
  :mode="mode"
82
98
  :show-time="showTime"
package/src/utils.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { abbreviateNumber } from './utils/formatNumber'
2
+
3
+ export { abbreviateNumber }