@dataloop-ai/components 0.17.36 → 0.17.37

package/package.json

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

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

@@ -12,7 +12,7 @@
             :disabled="disabled"
             :style="[computedStyles]"
             style="pointer-events: auto"
-            class="dl-button"
+            :class="buttonClass"
             @click="onClick"
             @mousedown="onMouseDown"
         >
@@ -74,6 +74,7 @@ import { v4 } from 'uuid'
 import { ButtonColors } from './types'
 import { transformOptions } from '../../shared/types'
 import { stringStyleToRecord } from '../../../utils'
+import { textTransform } from '../../../utils/string'
 import { isString } from 'lodash'
 
 export default defineComponent({
@@ -84,27 +85,66 @@ export default defineComponent({
     },
 
     props: {
+        /**
+         * The user will not be able to press on the button
+         */
         disabled: Boolean,
+        /**
+         * The color of the button
+         */
         color: {
             type: String! as PropType<keyof typeof colorNames>,
             default: ''
         },
+        /**
+         * The button's padding is lowered and the white space shrinks
+         */
         dense: { type: Boolean, default: false },
+        /**
+         * The text content of the button
+         */
         label: { type: String, default: '' },
+        /**
+         * The color of the button's text
+         */
         textColor: { type: String!, default: '' },
         colorsObject: {
             type: Object as PropType<ButtonColors>,
             default: null
         },
+        /**
+         * The color of the icon inside the button
+         */
         iconColor: { type: String!, default: '' },
+        /** Padding inside the button */
         padding: { type: String, default: '' },
+        /**
+         * The size of the button, it can be s,m,l or xl
+         */
         margin: { type: String, default: '0 auto' },
         size: { type: String! as PropType<ButtonSizes>, default: 'm' },
+        /**
+         * The assigned color will fill the entirety of the button
+         */
         filled: { type: Boolean, default: true },
+        /** Makes the button rounded */
         round: { type: Boolean, default: false },
+        /**
+         * The width of the button will take that of its container
+         */
         shaded: { type: Boolean, default: false },
         fluid: Boolean,
+        /**
+         * The button will not have an outline
+         */
         flat: Boolean,
+        /**
+         * All the characters inside the button will be uppercase
+         */
+        uppercase: Boolean,
+        /**
+         * The button will be transparent with a colored outline
+         */
         transform: {
             type: String,
             default: 'default',
@@ -112,10 +152,23 @@ export default defineComponent({
                 transformOptions.includes(value)
         },
         outlined: Boolean,
+        /**
+         * Doesn't allow the button's text to be wrapped along multiple rows
+         */
         noWrap: Boolean,
+        /**
+         * The name of the icon to go inside the button
+         */
         icon: { type: String, default: '' },
         overflow: { type: Boolean, default: false, required: false },
+        /**
+         * The tooltip displayed when hovering over the button
+         */
         tooltip: { type: String, default: null, required: false },
+        /**
+         * The button will mentain the styles it has when it's pressed if this prop is active
+         */
+        active: { type: Boolean, default: false, required: false },
         styles: { type: [Object, String], default: null }
     },
     emits: ['click', 'mousedown'],
@@ -157,6 +210,12 @@ export default defineComponent({
                 this.label !== ''
             )
         },
+        buttonLabel(): string {
+            return textTransform(this.label)
+        },
+        buttonClass() {
+            return this.active ? 'dl-button active-class' : 'dl-button'
+        },
         hasIcon(): boolean {
             return typeof this.icon === 'string' && this.icon !== ''
         },
@@ -394,4 +453,14 @@ export default defineComponent({
     display: inline-block;
     width: var(--dl-button-container-width);
 }
+
+.active-class {
+    color: var(--dl-button-text-color-hover);
+    background-color: var(--dl-button-bg-hover);
+    border-color: var(--dl-button-border-hover);
+    & .dl-button-label {
+        transition: all ease-in 0.15s;
+        color: var(--dl-button-color-hover);
+    }
+}
 </style>

package/src/demos/DlButtonDemo.vue

@@ -194,6 +194,33 @@
                 Disabled
             </DlButton>
         </div>
+        <div
+            style="
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+            "
+        >
+            <h3>Button keeping its active state with menu</h3>
+            <dl-button
+                :active="activeButtonState"
+                @click="activeButtonState = !activeButtonState"
+            >
+                {{ activeButtonState ? 'Close' : 'Open' }}
+                <dl-menu
+                    :offset="[0, 5]"
+                    anchor="bottom middle"
+                    self="top middle"
+                    :model-value="!activeButtonState"
+                >
+                    <div
+                        style="width: 100px; height: 100px; text-align: center"
+                    >
+                        Menu
+                    </div>
+                </dl-menu>
+            </dl-button>
+        </div>
         <div>
             <h3>With badge</h3>
 
@@ -261,10 +288,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue-demi'
-import { DlButton, DlBadge, DlIcon } from '../components'
+import { defineComponent, reactive, ref } from 'vue-demi'
+import { DlButton, DlBadge, DlIcon, DlMenu } from '../components'
 import { ButtonSizes } from '../components/basic/DlButton/utils'
-import DlMenu from '../components/essential/DlMenu/DlMenu.vue'
 import DlList from '../components/essential/DlList/DlList.vue'
 import DlListItem from '../components/basic/DlListItem/DlListItem.vue'
 
@@ -280,9 +306,10 @@ export default defineComponent({
     },
     setup() {
         const buttons = reactive<ButtonSizes[]>(['s', 'm', 'l', 'xl'])
+        const activeButtonState = ref(false)
 
         const log = (e: Event) => console.log(e)
-        return { buttons, log }
+        return { buttons, log, activeButtonState }
     }
 })
 </script>