@dataloop-ai/components 0.17.37 → 0.17.39

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.17.37",
3
+ "version": "0.17.39",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -1,9 +1,9 @@
1
1
  <template>
2
- <div class="dl-ellipsis">
3
- <span
4
- ref="dlEllipsisRef"
5
- class="dl-ellipsis__left"
6
- >
2
+ <div
3
+ ref="dlEllipsisRef"
4
+ class="dl-ellipsis"
5
+ >
6
+ <span class="dl-ellipsis__left">
7
7
  {{ leftText }}
8
8
  </span>
9
9
  <span
@@ -19,7 +19,7 @@
19
19
  </template>
20
20
 
21
21
  <script lang="ts">
22
- import { defineComponent, ref, computed, toRef } from 'vue-demi'
22
+ import { defineComponent, ref, computed } from 'vue-demi'
23
23
  import DlTooltip from '../../essential/DlTooltip/DlTooltip.vue'
24
24
  import { useSizeObserver } from '../../../hooks/use-size-observer'
25
25
 
@@ -65,11 +65,12 @@ export default defineComponent({
65
65
  setup(props) {
66
66
  const { text, split } = props
67
67
 
68
- const splitPositionsRef = toRef(props, 'splitPosition')
69
- splitPositionsRef.value = Math.min(
70
- Math.max(splitPositionsRef.value, 1),
71
- 0
72
- )
68
+ const splitPositionsRef = computed(() => {
69
+ return Math.min(
70
+ Math.max(props.splitPosition, 1),
71
+ props.splitPosition
72
+ )
73
+ })
73
74
 
74
75
  const dlEllipsisRef = ref(null)
75
76
  const splitIndex = computed(() =>
@@ -775,7 +775,7 @@ export default defineComponent({
775
775
  color: var(--dl-color-disabled);
776
776
  cursor: not-allowed;
777
777
  }
778
- &:readonly {
778
+ &:read-only {
779
779
  border-color: var(--dl-color-separator);
780
780
  cursor: text;
781
781
  &:hover {
@@ -260,7 +260,7 @@
260
260
  <dl-item-section :no-wrap="true">
261
261
  <dl-ellipsis
262
262
  text="Very very very very long long long long text text text"
263
- :middle-ellipsis="true"
263
+ split
264
264
  />
265
265
  </dl-item-section>
266
266
  </dl-list-item>
@@ -121,6 +121,14 @@
121
121
  size="m"
122
122
  />
123
123
  </div>
124
+
125
+ <dl-input
126
+ title="Readonly"
127
+ style="width: 220px"
128
+ placeholder="Readonly state"
129
+ size="m"
130
+ readonly
131
+ />
124
132
  </div>
125
133
  </template>
126
134
  <script lang="ts">