@eturnity/eturnity_reusable_components 9.25.16-panel-placement.0 → 9.25.16-panel-placement.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.25.16-panel-placement.0",
+  "version": "9.25.16-panel-placement.1",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/length_2d_vertical.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="14" viewBox="0 0 10 14" fill="none">
+  <g transform="translate(10,0) rotate(90)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.199219 9.85718V0.142822H1.75351L1.75352 9.85718H0.199219ZM5.38021 8.20572L2.14209 4.99999L5.38021 1.79425V4.19855L8.61833 4.19855V1.79425L11.8564 4.99999L8.61832 8.20572L8.61833 5.80142L5.38021 5.80142V8.20572ZM12.2449 0.142822V9.85718H13.7992V0.142822H12.2449Z" fill="white"/>
+  </g>
+</svg>

package/src/assets/svgIcons/obstacle_flat_top.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 4H12V8L2 10V4Z" fill="white" />
+</svg>

package/src/assets/svgIcons/obstacle_sloped_top.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 10L6 4H13L10 10H3Z" fill="white" />
+</svg>

package/src/assets/svgIcons/outline_tool.svg

@@ -1,11 +1,11 @@
 <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.80078" y="4.06415" width="8" height="1.6" transform="rotate(90 2.80078 4.06415)" fill="white"/>
-<rect x="7.00195" y="3.8642" width="4" height="1.6" transform="rotate(-180 7.00195 3.8642)" fill="white"/>
-<path d="M8.5 3.07846L6.00098 0.935599L6.00098 5.22131L8.5 3.07846Z" fill="white"/>
-<rect x="11.002" y="13.8643" width="8" height="1.6" transform="rotate(-180 11.002 13.8643)" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.06409C2.55228 4.06409 3 3.61637 3 3.06409C3 2.5118 2.55228 2.06409 2 2.06409C1.44772 2.06409 1 2.5118 1 3.06409C1 3.61637 1.44772 4.06409 2 4.06409ZM2 5.06409C3.10457 5.06409 4 4.16866 4 3.06409C4 1.95952 3.10457 1.06409 2 1.06409C0.895431 1.06409 0 1.95952 0 3.06409C0 4.16866 0.895431 5.06409 2 5.06409Z" fill="white"/>
-<rect x="12.7988" y="4.06433" width="8" height="1.6" transform="rotate(90 12.7988 4.06433)" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 4.06421C12.5542 4.06421 13.002 3.61649 13.002 3.06421C13.002 2.51192 12.5542 2.06421 12.002 2.06421C11.4497 2.06421 11.002 2.51192 11.002 3.06421C11.002 3.61649 11.4497 4.06421 12.002 4.06421ZM12.002 5.06421C13.1065 5.06421 14.002 4.16878 14.002 3.06421C14.002 1.95964 13.1065 1.06421 12.002 1.06421C10.8974 1.06421 10.002 1.95964 10.002 3.06421C10.002 4.16878 10.8974 5.06421 12.002 5.06421Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 14.0643C12.5542 14.0643 13.002 13.6166 13.002 13.0643C13.002 12.512 12.5542 12.0643 12.002 12.0643C11.4497 12.0643 11.002 12.512 11.002 13.0643C11.002 13.6166 11.4497 14.0643 12.002 14.0643ZM12.002 15.0643C13.1065 15.0643 14.002 14.1688 14.002 13.0643C14.002 11.9597 13.1065 11.0643 12.002 11.0643C10.8974 11.0643 10.002 11.9597 10.002 13.0643C10.002 14.1688 10.8974 15.0643 12.002 15.0643Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 14.0644C2.55228 14.0644 3 13.6167 3 13.0644C3 12.5121 2.55228 12.0644 2 12.0644C1.44772 12.0644 1 12.5121 1 13.0644C1 13.6167 1.44772 14.0644 2 14.0644ZM2 15.0644C3.10457 15.0644 4 14.169 4 13.0644C4 11.9598 3.10457 11.0644 2 11.0644C0.895431 11.0644 0 11.9598 0 13.0644C0 14.169 0.895431 15.0644 2 15.0644Z" fill="white"/>
-</svg>
+  <path transform="rotate(90 2.80078 4.06415)" fill="white" d="M2.8008 4.0642h8v1.6H2.8008Z" />
+  <path transform="rotate(-180 7.00195 3.8642)" fill="white" d="M7.002 3.8642h4v1.6H7.002Z" />
+  <path d="M8.5 3.07846L6.00098 0.935599L6.00098 5.22131L8.5 3.07846Z" fill="white" />
+  <path transform="rotate(-180 11.002 13.8643)" fill="white" d="M11.002 13.8643h8v1.6H11.002Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.06409C2.55228 4.06409 3 3.61637 3 3.06409C3 2.5118 2.55228 2.06409 2 2.06409C1.44772 2.06409 1 2.5118 1 3.06409C1 3.61637 1.44772 4.06409 2 4.06409ZM2 5.06409C3.10457 5.06409 4 4.16866 4 3.06409C4 1.95952 3.10457 1.06409 2 1.06409C0.895431 1.06409 0 1.95952 0 3.06409C0 4.16866 0.895431 5.06409 2 5.06409Z" fill="white" />
+  <path transform="rotate(90 12.7988 4.06433)" fill="white" d="M12.7988 4.0643h8v1.6H12.7988Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 4.06421C12.5542 4.06421 13.002 3.61649 13.002 3.06421C13.002 2.51192 12.5542 2.06421 12.002 2.06421C11.4497 2.06421 11.002 2.51192 11.002 3.06421C11.002 3.61649 11.4497 4.06421 12.002 4.06421ZM12.002 5.06421C13.1065 5.06421 14.002 4.16878 14.002 3.06421C14.002 1.95964 13.1065 1.06421 12.002 1.06421C10.8974 1.06421 10.002 1.95964 10.002 3.06421C10.002 4.16878 10.8974 5.06421 12.002 5.06421Z" fill="white" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 14.0643C12.5542 14.0643 13.002 13.6166 13.002 13.0643C13.002 12.512 12.5542 12.0643 12.002 12.0643C11.4497 12.0643 11.002 12.512 11.002 13.0643C11.002 13.6166 11.4497 14.0643 12.002 14.0643ZM12.002 15.0643C13.1065 15.0643 14.002 14.1688 14.002 13.0643C14.002 11.9597 13.1065 11.0643 12.002 11.0643C10.8974 11.0643 10.002 11.9597 10.002 13.0643C10.002 14.1688 10.8974 15.0643 12.002 15.0643Z" fill="white" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 14.0644C2.55228 14.0644 3 13.6167 3 13.0644C3 12.5121 2.55228 12.0644 2 12.0644C1.44772 12.0644 1 12.5121 1 13.0644C1 13.6167 1.44772 14.0644 2 14.0644ZM2 15.0644C3.10457 15.0644 4 14.169 4 13.0644C4 11.9598 3.10457 11.0644 2 11.0644C0.895431 11.0644 0 11.9598 0 13.0644C0 14.169 0.895431 15.0644 2 15.0644Z" fill="white" />
+</svg>

package/src/components/inputs/inputNumber/index.vue

@@ -484,6 +484,7 @@
     display: flex;
     gap: 10px;
     align-items: center;
+    padding: ${(props) => (props.isInteractive ? '0 4px' : '0')};
     cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
     border: ${(props) =>
       props.alignItems == 'vertical'

package/src/components/inputs/switchField/index.vue

@@ -31,6 +31,7 @@
           :border-color="borderColor"
           :color-mode="colorMode"
           :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
+          :disabled="!!item.disabled"
           :height="height"
           :inactive-border-color="inactiveBorderColor"
           :inactive-color="inactiveColor"
@@ -39,7 +40,7 @@
           :secondary-color="secondaryColor"
           :size="size"
           :width="item.width || 'auto'"
-          @click="selectItem(item.value)"
+          @click="selectItem(item)"
         >
           <OptionIconContainer v-if="item.icon">
             <RCIcon
@@ -145,6 +146,7 @@
     height: String,
     borderColor: String,
     inactiveBorderColor: String,
+    disabled: Boolean,
   }
   const SwitchOption = styled('div', optionAttrs)`
     color: ${(props) =>
@@ -167,17 +169,19 @@
       props.height
         ? props.height
         : props.size === 'medium'
-        ? '24px'
-        : props.size === 'small'
-        ? '16px'
-        : '24px'};
+          ? '24px'
+          : props.size === 'small'
+            ? '16px'
+            : '24px'};
     padding: 0 10px;
     margin-right: -1px;
     transition: all 0.1s ease-in-out;
     overflow: hidden;
     gap: 5px;
+    opacity: ${(props) => (props.disabled ? 0.4 : 1)};
+    pointer-events: ${(props) => (props.disabled ? 'none' : 'auto')};
     & :hover {
-      cursor: pointer;
+      cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
     }
     &:first-child {
       border-radius: 4px 0 0 4px;
@@ -287,19 +291,19 @@
         this.borderColor = this.secondaryColor
         this.inactiveBorderColor = theme.semanticColors.teal[600]
       } else {
-        this.primaryColor = theme.semanticColors.teal[50]
-        this.secondaryColor = theme.semanticColors.teal[800]
-        this.inactiveColor = theme.semanticColors.teal[50]
+        this.primaryColor = theme.semanticColors.teal[100]
+        this.secondaryColor = theme.semanticColors.purple[500]
+        this.inactiveColor = theme.semanticColors.purple[500]
         this.borderColor = this.secondaryColor
-        this.inactiveBorderColor = theme.semanticColors.teal[50]
+        this.inactiveBorderColor = theme.semanticColors.teal[200]
       }
     },
     methods: {
-      selectItem(value) {
-        if (this.disabled) {
+      selectItem(item) {
+        if (this.disabled || item.disabled) {
           return
         }
-        this.$emit('on-switch-change', value)
+        this.$emit('on-switch-change', item.value)
       },
     },
   }