@dataloop-ai/components 0.16.4 → 0.16.6

package/.eslintrc.js

@@ -95,7 +95,7 @@ module.exports = {
                 hoist: 'all'
             }
         ],
-        '@typescript-eslint/no-unused-expressions': 'error',
+        '@typescript-eslint/no-unused-expressions': 'off',
         '@typescript-eslint/no-unused-vars': 'off',
         '@typescript-eslint/no-use-before-define': 'off',
         '@typescript-eslint/no-var-requires': 'off',
@@ -120,7 +120,7 @@ module.exports = {
         'no-trailing-spaces': 'warn',
         'no-undef-init': 'warn',
         'no-unsafe-finally': 'off',
-        'no-unused-expressions': 'error',
+        'no-unused-expressions': 'off',
         'no-unused-labels': 'error',
         'no-use-before-define': 'off',
         'no-var': 'warn',

package/CONTRIBUTING.md

@@ -0,0 +1,53 @@
+# Contributing Guidelines
+Thank you for your interest in contributing to our project! We welcome contributions from everyone. Please take a moment to review these guidelines before submitting a pull request or issue.
+
+## Code of Conduct
+Our project has a [Code of Conduct](./CODE_OF_CONDUCT.md) that we expect all contributors to follow. Please read it before making any contribution.
+
+## Issues
+If you find any issues or bugs, please search the existing issues to see if the issue has already been reported. If it hasn't, please create a new issue with a clear and concise title and description. Be sure to include any relevant information, such as error messages or steps to reproduce the issue.
+
+The repository provides base templates for create a bug/feature request type of issues. please fill the relevant information there.
+
+If the issue is related to a specific component then please have in the title of the issue the name of the component and then a short description of the issue. Example: ``` DlButton > 'description of issue' ```
+
+## Pull Requests
+We welcome contributions in the form of pull requests. Before submitting a pull request, please make sure that your code:
+
+- Is well-tested
+- Conforms to our coding style guidelines (see below)
+- Includes any necessary documentation
+
+### Naming Convention
+Each pull request should reflect the issue it is trying to close or have a short descriptive title.
+
+If the pull request is working on a specific component please start the pull request title with the components name. Example: ``` DlButton > 'description of issue' ```
+
+If a component / module or type that is being developed or introduced will not be exported it should not have the ```Dl``` prefix. 
+If it is being exported it is required for it to have the ```Dl``` prefix. 
+
+### Coding Style Guidelines
+Please follow these coding style guidelines when submitting a pull request:
+- Use consistent indentation
+- Use descriptive variable names
+- Use comments to explain non-obvious code behavior
+- Follow the provided linter configuration
+    - Please note that any build that does not pass the linter will fail. as part of our CI/CD
+- When developing a component it should be assigned to the correct scope and have its own aligned code structure
+    - if the component has inner components they should be in the components directory under ```/components```
+    - every component should export index.ts and types.ts
+
+
+Steps to submit a pull request:
+1. Fork the repository
+2. Clone the forked repository to your local machine
+3. Create a new branch for your changes
+4. Make your changes and commit them
+5. Push the changes to your forked repository
+6. Submit a pull request to the original repository
+7. Please make sure that your pull request clearly explains the problem you are trying to solve, the solution you have implemented, and any potential side effects of your changes.
+
+## License
+By contributing to our project, you agree that your contributions will be licensed under the [project's license](./LICENSE.md).
+
+Thank you for your contributions!

package/SECURITY.md

@@ -0,0 +1,15 @@
+# Security Policy
+
+## Supported Versions
+
+We release patches for security vulnerabilities. Every new version of our project contains the latest security fixes and we will always push versions with the latest security fixes.
+
+## Reporting a Vulnerability
+
+If you discover a security vulnerability within our project, please open an issue with the `security` tag. All security vulnerabilities will be promptly addressed.
+
+## Security Fixes and Resolutions
+
+We take the security of our project seriously and strive to ensure that every version released includes the latest security fixes and resolutions. We regularly monitor and update our dependencies to ensure that they are up-to-date and secure.
+
+If you have any questions or concerns about the security of our project, please do not hesitate to contact us.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.4",
+  "version": "0.16.6",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -17,7 +17,8 @@
     "lint:fix": "eslint ./src --ext .ts,.vue --fix",
     "format": "prettier --write ./src",
     "lint-staged": "lint-staged",
-    "test": "vitest run --coverage",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {

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

@@ -100,7 +100,8 @@ export default defineComponent({
             validator: (value: string): boolean =>
                 transformOptions.includes(value)
         },
-        overflow: { type: Boolean, default: false }
+        overflow: { type: Boolean, default: false },
+        fit: { type: Boolean, default: false }
     },
     emits: ['remove'],
     setup() {
@@ -142,7 +143,9 @@ export default defineComponent({
         },
         cssChipVars(): Record<string, string | number> {
             return {
-                '--dl-chip-max-width': setMaxWidth(this.maxWidth),
+                '--dl-chip-max-width': this.fit
+                    ? 'fit-content'
+                    : setMaxWidth(this.maxWidth),
                 '--dl-chip-remove-icon-width': setRemoveIconWidth({
                     hasLabel: this.hasLabel,
                     removable: this.removable,

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -14,7 +14,8 @@
                 class="dialog-wrapper"
                 :style="{
                     width: Number(width) ? `${width}px` : width,
-                    height: Number(height) ? `${height}px` : height
+                    height: Number(height) ? `${height}px` : height,
+                    transform: `translate(${draggableOptions.draggableX}px, ${draggableOptions.draggableY}px)`
                 }"
                 :class="{
                     'dialog-wrapper--fullscreen': fullscreen,
@@ -23,6 +24,15 @@
                     'dialog-wrapper--left': position === 'left'
                 }"
             >
+                <dl-icon
+                    v-if="draggable"
+                    :style="{ cursor: draggableOptions.draggableCursor }"
+                    class="dialog-wrapper--draggable-icon"
+                    color="dl-color-medium"
+                    icon="icon-dl-drag"
+                    size="15px"
+                    @mousedown="startDragElement"
+                />
                 <div
                     v-if="hasHeader"
                     class="header"
@@ -52,9 +62,12 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
+import DlIcon from '../../essential/DlIcon/DlIcon.vue'
+import { throttle } from 'lodash'
 
 export default defineComponent({
     name: 'DlDialogBox',
+    components: { DlIcon },
     model: {
         prop: 'modelValue',
         event: 'update:modelValue'
@@ -70,13 +83,24 @@ export default defineComponent({
             default: 'center'
         },
         modelValue: Boolean,
-        volatile: { type: Boolean, default: false }
+        volatile: { type: Boolean, default: false },
+        draggable: {
+            type: Boolean,
+            default: false
+        }
     },
     emits: ['update:modelValue', 'hide', 'show'],
     data() {
         return {
             uuid: `dl-dialog-box-${v4()}`,
-            show: this.modelValue
+            show: this.modelValue,
+            draggableOptions: {
+                draggableX: 0,
+                draggableY: 0,
+                originalX: 0,
+                originalY: 0,
+                draggableCursor: 'pointer'
+            }
         }
     },
     computed: {
@@ -112,6 +136,33 @@ export default defineComponent({
         }
     },
     methods: {
+        startDragElement(e: {
+            preventDefault: () => void
+            y: number
+            x: number
+        }) {
+            e.preventDefault()
+            if (
+                !this.draggableOptions.originalY &&
+                !this.draggableOptions.originalX
+            ) {
+                this.draggableOptions.originalY = e.y
+                this.draggableOptions.originalX = e.x
+            }
+            this.draggableOptions.draggableCursor = 'grabbing'
+            document.onmousemove = throttle((e) => {
+                this.draggableOptions.draggableX =
+                    e.x - this.draggableOptions.originalX
+                this.draggableOptions.draggableY =
+                    e.y - this.draggableOptions.originalY
+            }, 5)
+            document.onmouseup = this.stopDragElement
+        },
+        stopDragElement() {
+            document.onmousemove = null
+            document.onmouseup = null
+            this.draggableOptions.draggableCursor = 'pointer'
+        },
         closeModal() {
             if ((this.$el as HTMLElement)?.blur) {
                 (this.$el as HTMLElement).blur()
@@ -183,15 +234,26 @@ export default defineComponent({
         height: 100vh !important;
         border-radius: 0px;
     }
+
     &--fullheight {
         margin: 0;
         height: 100vh !important;
         border-radius: 0px;
     }
+
+    &--draggable-icon {
+        position: absolute;
+        top: -1px;
+        left: 3px;
+        cursor: pointer;
+        transform: rotate(90deg);
+    }
+
     &--right {
         position: absolute !important;
         right: 0;
     }
+
     &--left {
         position: absolute !important;
         left: 0;

package/src/demo/DlChipDemo.vue

@@ -165,6 +165,16 @@
                 overflow
             />
         </div>
+        <h4>Chips with Fit</h4>
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip
+                label="Long Chip Label With Alot Of Text"
+                fit
+            />
+        </div>
     </div>
 </template>
 

package/src/demo/DlDialogBoxDemo.vue

@@ -1,11 +1,16 @@
 <template>
     <div>
-        <button @click="openModal">
+        <dl-switch
+            v-model="draggable"
+            left-label="Draggable"
+        />
+        <dl-button @click="openModal">
             Open modal
-        </button>
+        </dl-button>
         <dl-dialog-box
             ref="modalOne"
             v-model="isOpenedFirstModal"
+            :draggable="draggable"
         >
             <template #header>
                 <dl-dialog-box-header
@@ -112,12 +117,13 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import { DlDialogBox, DlButton } from '../components'
+import { DlButton, DlDialogBox, DlSwitch } from '../components'
 import { DlDialogBoxHeader, DlDialogBoxFooter } from '../components'
 
 export default defineComponent({
     name: 'DlDialogBoxDemo',
     components: {
+        DlSwitch,
         DlButton,
         DlDialogBox,
         DlDialogBoxHeader,
@@ -126,7 +132,7 @@ export default defineComponent({
     setup() {
         const modalOne = ref<any>(null)
         const modalTwo = ref<any>(null)
-
+        const draggable = ref(true)
         const isOpenedFirstModal = ref(false)
 
         const openModal = () => {
@@ -168,7 +174,8 @@ export default defineComponent({
             closeSecondModal,
             modalOne,
             modalTwo,
-            isOpenedFirstModal
+            isOpenedFirstModal,
+            draggable
         }
     }
 })