@dataloop-ai/components 0.16.41 → 0.16.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.41",
+  "version": "0.16.43",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/assets/globals.scss

@@ -174,6 +174,7 @@ body {
 
     --dl-date-picker-shadow: 0px 3px 6px #101e7326;
     --dl-date-picker-selected-strip: rgb(52, 82, 255, 0.2);
+    --dl-date-picker-selected-date: #8FA0FF;
 }
 
 /* Define styles for the root window with dark - mode preference */
@@ -222,6 +223,7 @@ body {
 
     --dl-date-picker-shadow: 0px 3px 6px #292e3580;
     --dl-date-picker-selected-strip: rgb(124, 140, 255, 0.2);
+    --dl-date-picker-selected-date: #535E96;
 }
 
 // scrollbar

package/src/components/basic/DlChip/DlChip.vue

@@ -4,6 +4,7 @@
         :id="uuid"
         :tabindex="tabIndex"
         class="dl-chip"
+        :class="chipClass"
         :style="cssChipVars"
     >
         <slot name="prefix" />
@@ -67,13 +68,7 @@ const transformOptions: string[] = [
     'capitalize',
     'uppercase',
     'lowercase',
-    'full-width',
-    'full-size-kana',
-    'inherit',
-    'initial',
-    'revert',
-    'revert-layer',
-    'unset'
+    'default'
 ]
 
 export default defineComponent({
@@ -96,7 +91,7 @@ export default defineComponent({
         tabIndex: { type: [String, Number], default: '' },
         transform: {
             type: String,
-            default: 'lowercase',
+            default: 'default',
             validator: (value: string): boolean =>
                 transformOptions.includes(value)
         },
@@ -141,6 +136,12 @@ export default defineComponent({
 
             return this.iconColor
         },
+        chipClass(): string {
+            if (this.transform === 'default') {
+                return 'first-letter-capitalized'
+            }
+            return null
+        },
         cssChipVars(): Record<string, string | number> {
             return {
                 '--dl-chip-max-width': this.fit
@@ -180,7 +181,9 @@ export default defineComponent({
                 '--dl-chip-left-icon-cursor': this.disabled
                     ? 'not-allowed'
                     : 'pointer',
-                '--dl-chip-text-transform': this.transform
+                '--dl-chip-text-transform': this.chipClass
+                    ? null
+                    : this.transform
             }
         }
     },
@@ -213,9 +216,12 @@ export default defineComponent({
     color: var(--dl-chip-text-color);
     background-color: var(--dl-chip-bg-color);
     border: var(--dl-chip-border);
-    &::first-letter,
-    & > *::first-letter {
-        text-transform: capitalize;
+
+    .first-letter-capitalized {
+        &::first-letter,
+        & > *::first-letter {
+            text-transform: capitalize;
+        }
     }
 
     &--content {

package/src/components/compound/DlDateTime/DlDatePicker/components/DlCalendar.vue

@@ -178,7 +178,7 @@ export default defineComponent({
 
             if (value.isDisabled) return style
 
-            const disabledOpacity = 0.6
+            const disabledOpacity = 1
             const isToday = value.isSame(
                 new CalendarDate().startOf('day'),
                 'day'
@@ -200,7 +200,7 @@ export default defineComponent({
                 }
             } else if (this.modelValue !== null) {
                 const selectedStyle = {
-                    backgroundColor: 'var(--dl-color-secondary)',
+                    backgroundColor: 'var(--dl-date-picker-selected-date)',
                     color: 'var(--dl-color-text-buttons)',
                     borderRadius: '11px'
                 }