@dataloop-ai/components 0.18.145 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.145",
+  "version": "0.19.0",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -32,10 +32,12 @@
     "moment": "^2.29.4",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
+    "sortablejs": "^1.15.0",
     "uuid": "^8.3.2",
     "v-wave": "^1.5.0",
     "vanilla-jsoneditor": "^0.10.2",
     "vue-demi": "^0.14.5",
+    "vue-sortable": "^0.1.3",
     "vue2-teleport": "^1.0.1"
   },
   "devDependencies": {
@@ -51,6 +53,7 @@
     "@types/jsdom": "^16.2.14",
     "@types/node": "^18.7.18",
     "@types/resize-observer-browser": "^0.1.7",
+    "@types/sortablejs": "^1.15.2",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",

package/src/assets/constants.scss

@@ -1,13 +1,13 @@
 :root {
     // Constants
-    --dl-color-alert-success:  #38D079;
-    --dl-color-alert-success-background: #E1FFF0;
-    --dl-color-alert-warn: #FFDA3A;
-    --dl-color-alert-warn-background: #FFF7D6;
-    --dl-color-alert-error: #FF3434;
-    --dl-color-alert-error-background: #FFEAEA ;
-    --dl-color-alert-info: #4E81B3;
-    --dl-color-alert-info-background: #F3F9FF;
+    --dl-color-alert-success: #38d079;
+    --dl-color-alert-success-background: #e1fff0;
+    --dl-color-alert-warn: #ffda3a;
+    --dl-color-alert-warn-background: #fff7d6;
+    --dl-color-alert-error: #ff3434;
+    --dl-color-alert-error-background: #ffeaea;
+    --dl-color-alert-info: #4e81b3;
+    --dl-color-alert-info-background: #f3f9ff;
     --dl-color-alert-text: #171723;
 
     // Z-Index
@@ -24,24 +24,23 @@
     --dl-z-index-menu: 6000;
     --dl-z-index-tooltip: 9000;
 
-
     // chart colors
-    --dl-color-chart-1: #4DB1D3;
-    --dl-color-chart-2: #FF2F7A;
-    --dl-color-chart-3: #D4E3FF;
-    --dl-color-chart-4: #BECB5D;
-    --dl-color-chart-5: #839E30;
-    --dl-color-chart-6: #6B5935;
-    --dl-color-chart-7: #752B86;
-    --dl-color-chart-8: #BB96A3;
-    --dl-color-chart-9: #870F49;
-    --dl-color-chart-10: #CC566C;
-    --dl-color-chart-11: #F0A18C;
-    --dl-color-chart-12: #EDAB55;
-    --dl-color-chart-13: #FF5934;
-    --dl-color-chart-14: #9CD2E3;
-    --dl-color-chart-15: #928F80;
+    --dl-color-chart-1: #4db1d3;
+    --dl-color-chart-2: #ff2f7a;
+    --dl-color-chart-3: #d4e3ff;
+    --dl-color-chart-4: #becb5d;
+    --dl-color-chart-5: #839e30;
+    --dl-color-chart-6: #6b5935;
+    --dl-color-chart-7: #752b86;
+    --dl-color-chart-8: #bb96a3;
+    --dl-color-chart-9: #870f49;
+    --dl-color-chart-10: #cc566c;
+    --dl-color-chart-11: #f0a18c;
+    --dl-color-chart-12: #edab55;
+    --dl-color-chart-13: #ff5934;
+    --dl-color-chart-14: #9cd2e3;
+    --dl-color-chart-15: #928f80;
     --dl-color-chart-16: #575567;
     --dl-color-chart-17: #979797;
-    --dl-color-chart-18: #D9D9D9;
-}
+    --dl-color-chart-18: #d9d9d9;
+}

package/src/assets/globals.scss

@@ -1,12 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 @import 'constants';
 
-
 body {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
 
-    &>* {
+    & > * {
         font-weight: 400;
         font-family: 'Roboto', sans-serif;
     }
@@ -19,6 +18,10 @@ body {
     transform: rotate(180deg);
 }
 
+.display-none {
+    display: none !important;
+}
+
 .text {
     &-center {
         text-align: center;
@@ -34,18 +37,19 @@ body {
 }
 
 .dl-text-transform {
-    &--uppercase{
+    &--uppercase {
         text-transform: uppercase;
     }
-    &--lowercase{
+    &--lowercase {
         text-transform: lowercase;
     }
-    &--capitalize{
+    &--capitalize {
         text-transform: capitalize;
     }
-    &--none{
+    &--none {
         text-transform: none;
     }
+
     &--default {
         &,
         & > * {
@@ -150,11 +154,11 @@ body {
 .full-width {
     width: 100%;
 }
+
 .full-height {
     height: 100%;
 }
 
-
 :root {
     // common
     --dl-color-white: #fff;
@@ -177,33 +181,33 @@ body {
     --dl-menu-shadow: 0px 3px 6px rgba(16, 30, 115, 0.15);
 
     // colors
-    --dl-color-tooltip-text: #FEFEFE;
+    --dl-color-tooltip-text: #fefefe;
     --dl-color-tooltip-background: #171723d9;
     --dl-color-text-darker-buttons: #171723;
-    --dl-color-secondary: #3452FF;
-    --dl-color-secondary-opaque: #3452FF10;
-    --dl-color-text-buttons: #FFFFFF;
+    --dl-color-secondary: #3452ff;
+    --dl-color-secondary-opaque: #3452ff10;
+    --dl-color-text-buttons: #ffffff;
     --dl-color-darker: #171723;
     --dl-color-medium: #767676;
     --dl-color-lighter: #999999;
-    --dl-color-hover: #7B8CFF;
-    --dl-color-disabled: #B3B3B3;
+    --dl-color-hover: #7b8cff;
+    --dl-color-disabled: #b3b3b3;
     --dl-color-fill: #00000005;
     --dl-color-fill-hover: #00000010;
-    --dl-color-separator: #E4E4E4;
-    --dl-color-scrollbar: #E4E4E4;
-    --dl-color-body-background: #EEF1FF;
-    --dl-color-panel-background: #FFFFFF;
-    --dl-color-side-panel: #18195C;
-    --dl-color-shadow: #FFFFFF;
+    --dl-color-separator: #e4e4e4;
+    --dl-color-scrollbar: #e4e4e4;
+    --dl-color-body-background: #eef1ff;
+    --dl-color-panel-background: #ffffff;
+    --dl-color-side-panel: #18195c;
+    --dl-color-shadow: #ffffff;
     --dl-color-icon-default: #171723;
-    --dl-color-fill-secondary: #FBF8F8;
-    --dl-color-fill-third: #FBFBFB;
-    --dl-color-link: #20ABFA;
-    --dl-color-cell-background: #FFFAE2;
-    --dl-color-disabled-slider: #E4E4E4;
-    --q-color-positive: #38D079;
-    --q-color-warning: #E1B75B;
+    --dl-color-fill-secondary: #fbf8f8;
+    --dl-color-fill-third: #fbfbfb;
+    --dl-color-link: #20abfa;
+    --dl-color-cell-background: #fffae2;
+    --dl-color-disabled-slider: #e4e4e4;
+    --q-color-positive: #38d079;
+    --q-color-warning: #e1b75b;
 
     // alert colors
     --dl-color-negative: var(--dl-color-alert-error);
@@ -215,13 +219,11 @@ body {
     --dl-color-info: var(--dl-color-alert-info);
     --dl-color-info-background: var(--dl-color-alert-info-background);
 
-
-    --dl-color-chart-brush: #EEF1FF;
+    --dl-color-chart-brush: #eef1ff;
 
     --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;
-
+    --dl-date-picker-selected-date: #8fa0ff;
 
     // DlJsonEditor based on atom one themes
     --dl-json-editor-key-color: #a626a4;
@@ -234,52 +236,51 @@ body {
 
 /* Define styles for the root window with dark - mode preference */
 [data-theme='dark-mode'] {
-
     // shadows
     --dl-menu-shadow: 0px 3px 6px rgba(41, 46, 53, 0.5);
 
     // colors
-    --dl-color-bg: #30363D;
+    --dl-color-bg: #30363d;
     --dl-color-tooltip-text: #161616;
     --dl-color-tooltip-background: #ffffffd9;
     --dl-color-text-darker-buttons: #171723;
-    --dl-color-secondary: #7C8CFF;
-    --dl-color-secondary-opaque: #7C8CFF10;
-    --dl-color-text-buttons: #FFFFFF;
+    --dl-color-secondary: #7c8cff;
+    --dl-color-secondary-opaque: #7c8cff10;
+    --dl-color-text-buttons: #ffffff;
     --dl-color-darker: #ffffffcc;
     --dl-color-medium: #ffffff99;
     --dl-color-lighter: #ffffff66;
-    --dl-color-hover: #AEB9FF;
+    --dl-color-hover: #aeb9ff;
     --dl-color-disabled: #ffffff40;
     --dl-color-fill: #ffffff05;
-    --dl-color-fill-secondary: #F8F8F81A;
+    --dl-color-fill-secondary: #f8f8f81a;
     --dl-color-fill-hover: #ffffff10;
     --dl-color-separator: #ffffff26;
-    --dl-color-body-background: #24282D;
-    --dl-color-panel-background: #30363D;
-    --dl-color-side-panel: #2A343E;
-    --dl-color-shadow: #30363D;
+    --dl-color-body-background: #24282d;
+    --dl-color-panel-background: #30363d;
+    --dl-color-side-panel: #2a343e;
+    --dl-color-shadow: #30363d;
     --dl-color-icon-default: #ffffffbf;
-    --dl-color-fill-secondary: #FFFFFF1A;
-    --dl-color-fill-third: #9E9E9E1A;
-    --dl-color-link: #53B2E8;
-    --dl-color-cell-background: #FFFAE2;
-    --dl-color-disabled-slider: #64686D;
-    --q-color-positive: #A1E5B6;
-    --q-color-warning: #F8D29A;
+    --dl-color-fill-secondary: #ffffff1a;
+    --dl-color-fill-third: #9e9e9e1a;
+    --dl-color-link: #53b2e8;
+    --dl-color-cell-background: #fffae2;
+    --dl-color-disabled-slider: #64686d;
+    --q-color-positive: #a1e5b6;
+    --q-color-warning: #f8d29a;
 
     // alert colors
     --dl-color-negative-background: #734145;
-    --dl-color-warning-background: #7B7241;
-    --dl-color-positive-background: #3A644E;
-    --dl-color-info-background: #4B5A6B;
-    --dl-color-info: #92CDF2;
+    --dl-color-warning-background: #7b7241;
+    --dl-color-positive-background: #3a644e;
+    --dl-color-info-background: #4b5a6b;
+    --dl-color-info: #92cdf2;
 
     --dl-color-chart-brush: #475077;
 
     --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;
+    --dl-date-picker-selected-date: #535e96;
 
     --dl-json-editor-key-color: #c678dd;
     --dl-json-editor-background-color: #282c34;
@@ -297,7 +298,7 @@ html {
     scrollbar-color: var(--dl-color-scrollbar);
 
     // IE
-    scrollbar-face-color: #E4E4E4;
+    scrollbar-face-color: #e4e4e4;
     scrollbar-face-color: var(--dl-color-scrollbar);
 }
 
@@ -339,9 +340,10 @@ html {
 [disabled] {
     opacity: 0.6 !important;
 }
-[disabled], [disabled] * {
+[disabled],
+[disabled] * {
     outline: 0 !important;
     cursor: not-allowed !important;
 }
 
-@import 'grid';
+@import 'grid';

package/src/assets/grid.css

@@ -6,4 +6,4 @@ grid {
 }
 .grid-cols-3 {
     grid-template-columns: 1fr 1fr 1fr;
-}
+}

package/src/assets/grid.scss

@@ -1,9 +1,9 @@
 .grid {
-  display: grid;
+    display: grid;
 }
 .grid-cols-2 {
-  grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
 }
 .grid-cols-3 {
-  grid-template-columns: 1fr 1fr 1fr;
-}
+    grid-template-columns: 1fr 1fr 1fr;
+}

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

@@ -22,7 +22,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
@@ -80,7 +84,8 @@ export default defineComponent({
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
             default: () => accordionEmptyStateProps
-        }
+        },
+        separator: { type: Boolean, default: false }
     },
     emits: ['update:model-value', 'hide', 'show'],
     data() {
@@ -121,9 +126,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/DlEmptyState/types.ts

@@ -14,7 +14,7 @@ export type DlEmptyStateProps = {
     iconSize?: string
     iconColor?: string
     responsive?: boolean
-    align: 'center' | 'left'
+    align?: 'center' | 'left'
 }
 
 export type DlEmptyStateSlots = ['cta', 'links']

package/src/components/basic/DlGrid/DlGrid.vue

@@ -22,7 +22,8 @@ import {
     watch
 } from 'vue-demi'
 import { getGridTemplate, swapElementsInMatrix } from './utils'
-import { isCustomEvent, getElementAbove } from '../utils'
+import { isCustomEvent } from '../utils'
+import { getElementAbove } from '../../../utils'
 import { DlGridMode } from './types'
 
 export default defineComponent({