@dataloop-ai/components 0.16.42 → 0.16.44

package/package.json

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

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,10 +216,6 @@ 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;
-    }
 
     &--content {
         cursor: default;
@@ -231,6 +230,14 @@ export default defineComponent({
         overflow: hidden;
     }
 }
+
+.dl-chip.first-letter-capitalized {
+    &::first-letter,
+    & > *::first-letter {
+        text-transform: capitalize;
+    }
+}
+
 .dl-chip-remove-icon-container {
     cursor: var(--dl-chip-left-icon-cursor);
     position: absolute;

package/src/demo/DlChipDemo.vue

@@ -66,7 +66,7 @@
             <DlChip
                 removable
                 icon="icon-dl-search"
-                label="Chip filled"
+                label="chip filled"
                 @remove="log('test')"
             />
             <DlChip
@@ -78,19 +78,19 @@
                 removable
                 icon="icon-dl-search"
                 outlined
-                label="Chip outlined"
+                label="chip outlined"
                 @remove="log('test')"
             />
             <DlChip
                 removable
                 icon="icon-dl-search"
                 disabled
-                label="Chip disabled"
+                label="chip disabled"
                 @remove="log('test')"
             />
             <DlChip
                 removable
-                label="Ellipsed Chip with a multiple words"
+                label="ellipsed Chip with a multiple words"
                 icon="icon-dl-search"
                 @remove="log('test')"
             />
@@ -130,7 +130,17 @@
             <DlChip
                 ref="removableChip"
                 removable
-                label="Ellipsed Chip with a multiple words"
+                label="ellipsed Chip with a multiple words"
+            />
+        </div>
+        <h4>Chips with no text transform</h4>
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip
+                label="ellipsed Chip with a multiple words"
+                transform="none"
             />
         </div>
         <div class="col">