@dataloop-ai/components 0.18.10 → 0.18.11

package/package.json

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

package/src/components/basic/DlAccordion/DlAccordion.vue

@@ -25,7 +25,11 @@
         <div
             ref="dlAccordionContent"
             class="accordion-content"
-            :class="{ closed: !isOpen, 'right-side': rightSide }"
+            :class="{
+                closed: !isOpen,
+                'right-side': rightSide,
+                'accordion-content__border': separator
+            }"
         >
             <slot v-if="isOpen && !isEmpty" />
             <dl-empty-state
@@ -75,7 +79,8 @@ export default defineComponent({
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
             default: null
-        }
+        },
+        separator: { type: Boolean, default: false }
     },
     emits: ['update:model-value', 'hide', 'show'],
     data() {
@@ -116,9 +121,11 @@ export default defineComponent({
     line-height: 16px;
     padding: 0 16px 15px 38px;
     color: var(--dl-color-darker);
-    border-bottom: 1px solid var(--dl-color-separator);
     max-height: fit-content;
     overflow: hidden;
+    &__border {
+        border-bottom: 1px solid var(--dl-color-separator);
+    }
     &.right-side {
         padding: 0 38px 16px 16px;
     }

package/src/components/basic/DlButton/DlButton.vue

@@ -77,7 +77,7 @@ import { colorNames } from '../../../utils/css-color-names'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
 import { ButtonColors } from './types'
-import { transformOptions } from '../../shared/types'
+import { DlTransformOptions } from '../../shared/types'
 import { stringStyleToRecord } from '../../../utils'
 import { textTransform } from '../../../utils/string'
 import { isString } from 'lodash'
@@ -153,7 +153,7 @@ export default defineComponent({
             type: String,
             default: 'default',
             validator: (value: string): boolean =>
-                transformOptions.includes(value)
+                DlTransformOptions.includes(value)
         },
         /**
          * Doesn't allow the button's text to be wrapped along multiple rows

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

@@ -63,7 +63,7 @@ import {
     setRemoveIconWidth
 } from './utils'
 import { v4 } from 'uuid'
-import { transformOptions } from '../../shared/types'
+import { DlTransformOptions } from '../../shared/types'
 
 export default defineComponent({
     name: 'DlChip',
@@ -87,7 +87,7 @@ export default defineComponent({
             type: String,
             default: 'default',
             validator: (value: string): boolean =>
-                transformOptions.includes(value)
+                DlTransformOptions.includes(value)
         },
         overflow: { type: Boolean, default: false },
         fit: { type: Boolean, default: false }

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -188,7 +188,7 @@ import {
     Ref
 } from 'vue-demi'
 import { v4 } from 'uuid'
-import { transformOptions } from '../../shared/types'
+import { DlTransformOptions } from '../../shared/types'
 
 export default defineComponent({
     name: 'DlDropdownButton',
@@ -242,7 +242,7 @@ export default defineComponent({
             type: String,
             default: 'default',
             validator: (value: string): boolean =>
-                transformOptions.includes(value)
+                DlTransformOptions.includes(value)
         },
         outlined: Boolean,
         padding: { type: String, default: '5px' },

package/src/components/essential/DlTypography/DlTypography.vue

@@ -12,7 +12,7 @@
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
 import { getColor } from '../../../utils'
-import { transformOptions } from '../../shared/types'
+import { DlTransformOptions } from '../../shared/types'
 
 type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
 
@@ -35,7 +35,7 @@ export default defineComponent({
             type: String,
             default: 'default',
             validator: (value: string): boolean =>
-                transformOptions.includes(value)
+                DlTransformOptions.includes(value)
         },
         bold: Boolean,
         color: {

package/src/components/shared/types.ts

@@ -1,4 +1,4 @@
-export const transformOptions: string[] = [
+export const DlTransformOptions: string[] = [
     'none',
     'capitalize',
     'uppercase',

package/src/demos/DlAccordionDemo.vue

@@ -89,6 +89,38 @@
                 </template>
             </dl-accordion>
         </div>
+        <div style="width: 100%">
+            <dl-accordion default-opened>
+                <template #header>
+                    Custom header content
+                    <dl-switch
+                        v-model="switchModel"
+                        :value="2"
+                    />
+                </template>
+
+                <dl-accordion default-opened>
+                    <template #header>
+                        Custom header content
+                        <dl-switch
+                            v-model="switchModel"
+                            :value="2"
+                        />
+                    </template>
+                    <template #default>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore
+                        magna aliqua. Ut enim ad minim veniam, quis nostrud
+                        exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in
+                        reprehenderit in voluptate velit esse cillum dolore eu
+                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+                        non proident, sunt in culpa qui officia deserunt mollit
+                        anim id est laborum.
+                    </template>
+                </dl-accordion>
+            </dl-accordion>
+        </div>
     </div>
 </template>