@dataloop-ai/components 0.17.102 → 0.17.104

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/compound/DlInput/DlInput.vue +32 -1
  3. package/src/components/compound/DlSelect/DlSelect.vue +33 -3
  4. package/src/components/compound/DlSelect/utils.ts +4 -1
  5. package/src/utils/input-sizes.ts +5 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.17.102",
3
+ "version": "0.17.104",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlInput/DlInput.vue CHANGED
@@ -450,7 +450,10 @@ export default defineComponent({
450
450
  ]
451
451
  },
452
452
  isSmall(): boolean {
453
- return this.size === InputSizes.s
453
+ return (
454
+ this.size === (InputSizes.s as TInputSizes) ||
455
+ this.size === (InputSizes.small as TInputSizes)
456
+ )
454
457
  },
455
458
  hasPrepend(): boolean {
456
459
  return !!this.$slots.prepend && !this.isSmall
@@ -664,6 +667,9 @@ export default defineComponent({
664
667
  &--s {
665
668
  margin: 4px auto auto;
666
669
  }
670
+ &--small {
671
+ margin: 4px auto auto;
672
+ }
667
673
  }
668
674
 
669
675
  &__title {
@@ -696,6 +702,9 @@ export default defineComponent({
696
702
  &--s {
697
703
  padding: 0px 10px;
698
704
  }
705
+ &--small {
706
+ padding: 0px 10px;
707
+ }
699
708
  }
700
709
 
701
710
  &__input-wrapper {
@@ -735,6 +744,10 @@ export default defineComponent({
735
744
  padding-top: 7px;
736
745
  padding-bottom: 7px;
737
746
  }
747
+ &--medium {
748
+ padding-top: 7px;
749
+ padding-bottom: 7px;
750
+ }
738
751
 
739
752
  &--s {
740
753
  padding-top: 3px;
@@ -742,6 +755,12 @@ export default defineComponent({
742
755
  padding-left: 5px;
743
756
  padding-right: 5px;
744
757
  }
758
+ &--small {
759
+ padding-top: 3px;
760
+ padding-bottom: 3px;
761
+ padding-left: 5px;
762
+ padding-right: 5px;
763
+ }
745
764
 
746
765
  &--error {
747
766
  border-color: var(--dl-color-negative);
@@ -795,14 +814,26 @@ export default defineComponent({
795
814
  height: 34px;
796
815
  }
797
816
 
817
+ &--large {
818
+ height: 34px;
819
+ }
820
+
798
821
  &--m {
799
822
  height: 28px;
800
823
  }
801
824
 
825
+ &--medium {
826
+ height: 28px;
827
+ }
828
+
802
829
  &--s {
803
830
  height: 20px;
804
831
  }
805
832
 
833
+ &--small {
834
+ height: 20px;
835
+ }
836
+
806
837
  &--pos-left {
807
838
  top: 0;
808
839
  left: 0;
package/src/components/compound/DlSelect/DlSelect.vue CHANGED
@@ -636,7 +636,10 @@ export default defineComponent({
636
636
  return classes
637
637
  },
638
638
  isSmall(): boolean {
639
- return this.size === InputSizes.s
639
+ return (
640
+ this.size === (InputSizes.s as TInputSizes) ||
641
+ this.size === (InputSizes.small as TInputSizes)
642
+ )
640
643
  },
641
644
  hasPrepend(): boolean {
642
645
  if (isVue2) {
@@ -690,7 +693,7 @@ export default defineComponent({
690
693
  return
691
694
  }
692
695
 
693
- if (this.emitValue) {
696
+ if (this.emitValue && this.selectedIndex !== -1) {
694
697
  this.selectedIndex = this.options.findIndex(
695
698
  (
696
699
  option:
@@ -870,6 +873,10 @@ export default defineComponent({
870
873
  display: flex;
871
874
  align-items: center;
872
875
  }
876
+ &--small {
877
+ display: flex;
878
+ align-items: center;
879
+ }
873
880
  &--placeholder {
874
881
  color: var(--placeholder-color);
875
882
  }
@@ -880,7 +887,7 @@ export default defineComponent({
880
887
  align-items: center;
881
888
  color: var(--dl-color-lighter);
882
889
 
883
- &--s {
890
+ &--small {
884
891
  margin-right: 5px;
885
892
  margin-bottom: 0px;
886
893
  }
@@ -965,6 +972,10 @@ export default defineComponent({
965
972
  padding-top: 7px;
966
973
  padding-bottom: 7px;
967
974
  }
975
+ &--medium {
976
+ padding-top: 7px;
977
+ padding-bottom: 7px;
978
+ }
968
979
 
969
980
  &--s {
970
981
  padding-top: 3px;
@@ -973,6 +984,13 @@ export default defineComponent({
973
984
  padding-right: 5px;
974
985
  width: calc(100% - 10px);
975
986
  }
987
+ &--small {
988
+ padding-top: 3px;
989
+ padding-bottom: 3px;
990
+ padding-left: 5px;
991
+ padding-right: 5px;
992
+ width: calc(100% - 10px);
993
+ }
976
994
 
977
995
  &--has-selection {
978
996
  color: var(--dl-color-medium);
@@ -1067,14 +1085,26 @@ export default defineComponent({
1067
1085
  height: 34px;
1068
1086
  }
1069
1087
 
1088
+ &--large {
1089
+ height: 34px;
1090
+ }
1091
+
1070
1092
  &--m {
1071
1093
  height: 28px;
1072
1094
  }
1073
1095
 
1096
+ &--medium {
1097
+ height: 28px;
1098
+ }
1099
+
1074
1100
  &--s {
1075
1101
  height: 20px;
1076
1102
  }
1077
1103
 
1104
+ &--small {
1105
+ height: 20px;
1106
+ }
1107
+
1078
1108
  &--pos-left {
1079
1109
  top: 0;
1080
1110
  left: 0;
package/src/components/compound/DlSelect/utils.ts CHANGED
@@ -13,7 +13,10 @@ export const getLabel = (option: any) => {
13
13
  const ICON_SIZES = {
14
14
  s: '12px',
15
15
  m: '14px',
16
- l: '16px'
16
+ l: '16px',
17
+ small: '12px',
18
+ medium: '14px',
19
+ large: '16px'
17
20
  }
18
21
 
19
22
  export const getLabelOfSelectedOption = (
package/src/utils/input-sizes.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  export const InputSizes = {
2
2
  l: 'l',
3
3
  m: 'm',
4
- s: 's'
4
+ s: 's',
5
+ large: 'large',
6
+ medium: 'medium',
7
+ small: 'small'
5
8
  } as const
6
9
 
7
- export type TInputSizes = typeof InputSizes[keyof typeof InputSizes]
10
+ export type TInputSizes = (typeof InputSizes)[keyof typeof InputSizes]