@vcmap/ui 5.0.0-rc.8 → 5.0.0-rc.9

package/src/components/notification/VcsBadge.vue

@@ -0,0 +1,27 @@
+<template>
+  <span class="badge rounded-circle h-3 w-3" :class="[color]" />
+</template>
+
+<style lang="scss" scoped>
+  .v-application .badge {
+    border: 1px solid var(--v-basic-base) !important;
+  }
+</style>
+
+
+<script>
+
+  /**
+   * @description UI component representing a circular indicator.
+   * @vue-prop {string} color - any of the theme colors.
+   */
+  export default {
+    name: 'VcsBadge',
+    props: {
+      color: {
+        type: String,
+        default: 'warning',
+      },
+    },
+  };
+</script>

package/src/components/notification/VcsTooltip.vue

@@ -0,0 +1,154 @@
+<template>
+  <v-tooltip
+    :disabled="!tooltip"
+    :content-class="`tooltip ${arrowClass}`"
+    :bottom="tooltipPosition === 'bottom'"
+    :top="tooltipPosition === 'top'"
+    :left="tooltipPosition === 'left'"
+    :right="tooltipPosition === 'right'"
+    :open-delay="$attrs.openDelay || 200"
+    v-bind="{...$props, ...$attrs}"
+  >
+    <template #activator="{ on, attrs }">
+      <slot name="activator" :on="on" :attrs="attrs" />
+    </template>
+    <span>{{ tooltip }}</span>
+  </v-tooltip>
+</template>
+<style lang="scss" scoped>
+//.v-tooltip__content.tooltip {
+//  border: 1px solid black;
+//  border-radius: 0;
+//  background-color: #222222;
+//
+//&.arrow-top {
+//   transform: translateY(-6px);
+//
+//&::after, &::before {
+//             bottom: 100%;
+//             left: 50%;
+//             border: solid transparent;
+//             content: "";
+//             height: 0;
+//             width: 0;
+//             position: absolute;
+//             pointer-events: none;
+//           }
+//
+//&::before {
+//   border-color: rgba(194, 225, 245, 0);
+//   border-bottom-color: black;
+//   border-width: 5px;
+//   margin-left: -5px;
+// }
+//}
+//
+//&.arrow-bottom {
+//   transform: translateY(6px);
+//
+//&::after, &::before {
+//             top: 100%;
+//             left: 50%;
+//             border: solid transparent;
+//             content: "";
+//             height: 0;
+//             width: 0;
+//             position: absolute;
+//             pointer-events: none;
+//           }
+//
+//&::before {
+//   border-color: rgba(194, 225, 245, 0);
+//   border-top-color: black;
+//   border-width: 5px;
+//   margin-left: -5px;
+// }
+//}
+//
+//&.arrow-right {
+//&::after, &::before {
+//             top: 50%;
+//             right: -11px;
+//             transform: translateY(-50%);
+//             border: solid transparent;
+//             content: "";
+//             height: 0;
+//             width: 0;
+//             position: absolute;
+//             pointer-events: none;
+//           }
+//
+//&::before {
+//   border-color: rgba(255, 0, 0, 0);
+//   border-left-color: black;
+//   border-width: 5px;
+//   margin-left: -5px;
+// }
+//}
+//
+//&.arrow-left {
+//
+//&::after, &::before {
+//             top: 50%;
+//             left: -11px;
+//             transform: translateY(-50%);
+//             border: solid transparent;
+//             content: "";
+//             height: 0;
+//             width: 0;
+//             position: absolute;
+//             pointer-events: none;
+//           }
+//
+//&::before {
+//   border-color: rgba(194, 225, 245, 0);
+//   border-right-color: black;
+//   border-width: 5px;
+// }
+//}
+//}
+</style>
+<script>
+
+/**
+ * @enum {string} TooltipPositions
+ * @property {string} bottom
+ * @property {string} left
+ * @property {string} top
+ * @property {string} right
+ * @readonly
+ * @module VcsTooltip
+ */
+  const TooltipPositions = {
+    bottom: 'arrow-top',
+    top: 'arrow-bottom',
+    left: 'arrow-right',
+    right: 'arrow-left',
+  };
+
+  /**
+   * @description tooltip extending {@link https://vuetifyjs.com/en/api/v-tooltip/|vuetify v-tooltip}.
+   * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
+   * @vue-prop {string}                                 [tooltipPosition='bottom'] - Position of the tooltip (allowed values: 'bottom'|'left'|'top'|'right').
+   * @vue-computed {string}                             arrowClass - direction of tooltip arrow
+   */
+  export default {
+    name: 'VcsTooltip',
+    props: {
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'bottom',
+        validator(value) { return Object.keys(TooltipPositions).includes(value); },
+      },
+    },
+    computed: {
+      arrowClass() {
+        return TooltipPositions[this.tooltipPosition];
+      },
+    },
+  };
+</script>

package/src/components/notification/validation.js

@@ -0,0 +1,19 @@
+/**
+ * validates rules and returns error messages
+ * @param {Array} rules - validation functions or string messages
+ * @param {*} value
+ * @returns {string[]}
+ */
+export default function validate(rules, value) {
+  if (Array.isArray(rules)) {
+    return rules
+      .map((rule) => {
+        if (typeof rule === 'function') {
+          return rule(value);
+        }
+        return rule;
+      })
+      .filter(val => val !== true);
+  }
+  return [];
+}

package/src/contentTree/LayerTree.vue

@@ -12,7 +12,7 @@
 
 <script>
   import { inject } from '@vue/composition-api';
-  import { VcsTreeview } from '@vcsuite/ui-components';
+  import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
   /**
    * @description

package/src/contentTree/contentTreeCollection.js

@@ -8,7 +8,7 @@ import SubContentTreeItem, { subTreeSymbol } from './subContentTreeItem.js';
 import LayerTree from './LayerTree.vue';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import { createToggleAction } from '../actions/actionHelper.js';
-import { ButtonLocation } from '../manager/buttonManager.js';
+import { ButtonLocation } from '../manager/navbarManager.js';
 
 /**
  * @type {symbol}
@@ -127,7 +127,11 @@ class ContentTreeCollection extends IndexedCollection {
       vcsAppSymbol,
     );
 
-    this._app.navbarManager.add({ id, action, location: ButtonLocation.CONTENT }, vcsAppSymbol);
+    this._app.navbarManager.add(
+      { id, action },
+      vcsAppSymbol,
+      ButtonLocation.CONTENT,
+    );
     this._subTreeViewItems.value.set(id, subTreeViewItem);
     return () => {
       app.windowManager.remove(id);

package/src/icons/+all.js

@@ -0,0 +1,359 @@
+import TwoDAreaIcon from './2DAreaIcon.vue';
+import TwoDDistanceIcon from './2DDistanceIcon.vue';
+import ThreeDAreaIcon from './3DAreaIcon.vue';
+import ThreeDDistanceIcon from './3DDistanceIcon.vue';
+import ThreeDHeightIcon from './3DHeightIcon.vue';
+import AngleIcon from './AngleIcon.vue';
+import AssociationsIcon from './AssociationsIcon.vue';
+import AxisIcon from './AxisIcon.vue';
+import BoundingBoxIcon from './BoundingBoxIcon.vue';
+import CheckboxCheckedIcon from './CheckboxCheckedIcon.vue';
+import CheckboxIcon from './CheckboxIcon.vue';
+import CheckboxIndeterminateIcon from './CheckboxIndeterminateIcon.vue';
+import CircleIcon from './CircleIcon.vue';
+import ColorSwatchIcon from './ColorSwatchIcon.vue';
+import CommentIcon from './CommentIcon.vue';
+import CompassIcon from './CompassIcon.vue';
+import ComponentsIcon from './ComponentsIcon.vue';
+import ConeIcon from './ConeIcon.vue';
+import DimensionsHouseIcon from './DimensionsHouseIcon.vue';
+import ElevationProfileIcon from './ElevationProfileIcon.vue';
+import ExportAreaIcon from './ExportAreaIcon.vue';
+import ExportFlightIcon from './ExportFlightIcon.vue';
+import ExportIcon from './ExportIcon.vue';
+import ExternalLinkIcon from './ExternalLinkIcon.vue';
+import EyeIcon from './EyeIcon.vue';
+import FastForwardIcon from './FastForwardIcon.vue';
+import FilterIcon from './FilterIcon.vue';
+import GlobeNatureIcon from './GlobeNatureIcon.vue';
+import HealthCareIndustriesIcon from './HealthCareIndustriesIcon.vue';
+import HelpIcon from './HelpIcon.vue';
+import HomePointIcon from './HomePointIcon.vue';
+import HospitalsIcon from './HospitalsIcon.vue';
+import HouseIcon from './HouseIcon.vue';
+import ImportIcon from './ImportIcon.vue';
+import InfoIcon from './InfoIcon.vue';
+import KebabIcon from './KebabIcon.vue';
+import LabelIcon from './LabelIcon.vue';
+import LayersIcon from './LayersIcon.vue';
+import LegendIcon from './LegendIcon.vue';
+import LineIcon from './LineIcon.vue';
+import LinkIcon from './LinkIcon.vue';
+import ProgressIcon from './ProgressIcon.vue';
+import MapIcon from './MapIcon.vue';
+import MenuIcon from './MenuIcon.vue';
+import MinusIcon from './MinusIcon.vue';
+import ObjectAttributeIcon from './ObjectAttributeIcon.vue';
+import ObjectSelectIcon from './ObjectSelectIcon.vue';
+import ObliqueViewIcon from './ObliqueViewIcon.vue';
+import PdfIcon from './PdfIcon.vue';
+import PedestrianIcon from './PedestrianIcon.vue';
+import PenIcon from './PenIcon.vue';
+import PlayCircleIcon from './PlayCircleIcon.vue';
+import PlusIcon from './PlusIcon.vue';
+import PoiIcon from './PoiIcon.vue';
+import PointSelectIcon from './PointSelectIcon.vue';
+import PresentationModeIcon from './PresentationModeIcon.vue';
+import RectangleIcon from './RectangleIcon.vue';
+import ReturnIcon from './ReturnIcon.vue';
+import RewindIcon from './RewindIcon.vue';
+import SearchIcon from './SearchIcon.vue';
+import ShadowIcon from './ShadowIcon.vue';
+import ShapesIcon from './ShapesIcon.vue';
+import ShareIcon from './ShareIcon.vue';
+import SimpleCircleFilledIcon from './SimpleCircleFilledIcon.vue';
+import SimpleCircleHalfFilledIcon from './SimpleCircleHalfFilledIcon.vue';
+import SimpleCircleOutlinedIcon from './SimpleCircleOutlinedIcon.vue';
+import SkipNextIcon from './SkipNextIcon.vue';
+import SkipPreviousIcon from './SkipPreviousIcon.vue';
+import SplitViewIcon from './SplitViewIcon.vue';
+import TextStyleIcon from './TextStyleIcon.vue';
+import ThreeDimensionsIcon from './ThreeDimensionsIcon.vue';
+import ToolsIcon from './ToolsIcon.vue';
+import TouchIcon from './TouchIcon.vue';
+import TrashCanIcon from './TrashCanIcon.vue';
+import TriangleIcon from './TriangleIcon.vue';
+import TwoDimensionsIcon from './TwoDimensionsIcon.vue';
+import UploadIcon from './UploadIcon.vue';
+import VideoRecorderIcon from './VideoRecorderIcon.vue';
+import WalkingIcon from './WalkingIcon.vue';
+import WallIcon from './WallIcon.vue';
+
+// * // IconMap.boundingBox
+// * <v-icon size="16" v-text="'$vcsBoundingBox'" />
+// * // Material Design Icons
+// * <v-icon size="16" v-text="'mdi-fast-forward'" />
+// *
+// * Enum for Icon values.
+// * Final values must be camel-cased and prefixed with '$vcs'.
+// * Additional icons can be found at https://materialdesignicons.com/
+// * They must be kebab-cased and prefixed with 'mdi-'
+
+/**
+ * @module Icon
+ */
+/**
+ * @typedef Icon
+ * @type {Object}
+ * @property {Object.<string, Object>} Map
+ */
+
+/**
+ * @readonly
+ * @enum {Icon}
+ */
+const IconMap = {
+  '2d': {
+    component: TwoDimensionsIcon,
+  },
+  '2dArea': {
+    component: TwoDAreaIcon,
+  },
+  '2dDistance': {
+    component: TwoDDistanceIcon,
+  },
+  '3d': {
+    component: ThreeDimensionsIcon,
+  },
+  '3dArea': {
+    component: ThreeDAreaIcon,
+  },
+  '3dDistance': {
+    component: ThreeDDistanceIcon,
+  },
+  '3dHeight': {
+    component: ThreeDHeightIcon,
+  },
+  angle: {
+    component: AngleIcon,
+  },
+  associations: {
+    component: AssociationsIcon,
+  },
+  axis: {
+    component: AxisIcon,
+  },
+  boundingBox: {
+    component: BoundingBoxIcon,
+  },
+  checkbox: {
+    component: CheckboxIcon,
+  },
+  checkboxChecked: {
+    component: CheckboxCheckedIcon,
+  },
+  checkboxIndeterminate: {
+    component: CheckboxIndeterminateIcon,
+  },
+  circle: {
+    component: CircleIcon,
+  },
+  colorSwatch: {
+    component: ColorSwatchIcon,
+  },
+  comment: {
+    component: CommentIcon,
+  },
+  components: {
+    component: ComponentsIcon,
+  },
+  compass: {
+    component: CompassIcon,
+  },
+  cone: {
+    component: ConeIcon,
+  },
+  dimensionsHouse: {
+    component: DimensionsHouseIcon,
+  },
+  elevationProfile: {
+    component: ElevationProfileIcon,
+  },
+  export: {
+    component: ExportIcon,
+  },
+  exportArea: {
+    component: ExportAreaIcon,
+  },
+  exportFlight: {
+    component: ExportFlightIcon,
+  },
+  externalLink: {
+    component: ExternalLinkIcon,
+  },
+  eye: {
+    component: EyeIcon,
+  },
+  fastForward: {
+    component: FastForwardIcon,
+  },
+  filter: {
+    component: FilterIcon,
+  },
+  globeNature: {
+    component: GlobeNatureIcon,
+  },
+  healthCareIndustries: {
+    component: HealthCareIndustriesIcon,
+  },
+  help: {
+    component: HelpIcon,
+  },
+  homePoint: {
+    component: HomePointIcon,
+  },
+  house: {
+    component: HouseIcon,
+  },
+  hospitals: {
+    component: HospitalsIcon,
+  },
+  import: {
+    component: ImportIcon,
+  },
+  info: {
+    component: InfoIcon,
+  },
+  kebab: {
+    component: KebabIcon,
+  },
+  label: {
+    component: LabelIcon,
+  },
+  layers: {
+    component: LayersIcon,
+  },
+  legend: {
+    component: LegendIcon,
+  },
+  line: {
+    component: LineIcon,
+  },
+  link: {
+    component: LinkIcon,
+  },
+  progress: {
+    component: ProgressIcon,
+  },
+  map: {
+    component: MapIcon,
+  },
+  menu: {
+    component: MenuIcon,
+  },
+  minus: {
+    component: MinusIcon,
+  },
+  objectAttribute: {
+    component: ObjectAttributeIcon,
+  },
+  objectSelect: {
+    component: ObjectSelectIcon,
+  },
+  obliqueView: {
+    component: ObliqueViewIcon,
+  },
+  pdf: {
+    component: PdfIcon,
+  },
+  pedestrian: {
+    component: PedestrianIcon,
+  },
+  pen: {
+    component: PenIcon,
+  },
+  playCircle: {
+    component: PlayCircleIcon,
+  },
+  plus: {
+    component: PlusIcon,
+  },
+  poi: {
+    component: PoiIcon,
+  },
+  pointSelect: {
+    component: PointSelectIcon,
+  },
+  presentationMode: {
+    component: PresentationModeIcon,
+  },
+  rectangle: {
+    component: RectangleIcon,
+  },
+  return: {
+    component: ReturnIcon,
+  },
+  rewind: {
+    component: RewindIcon,
+  },
+  search: {
+    component: SearchIcon,
+  },
+  shadow: {
+    component: ShadowIcon,
+  },
+  shapes: {
+    component: ShapesIcon,
+  },
+  share: {
+    component: ShareIcon,
+  },
+  simpleCircleFilled: {
+    component: SimpleCircleFilledIcon,
+  },
+  simpleCircleHalfFilled: {
+    component: SimpleCircleHalfFilledIcon,
+  },
+  simpleCircleOutlined: {
+    component: SimpleCircleOutlinedIcon,
+  },
+  skipNext: {
+    component: SkipNextIcon,
+  },
+  skipPrevious: {
+    component: SkipPreviousIcon,
+  },
+  splitView: {
+    component: SplitViewIcon,
+  },
+  textStyle: {
+    component: TextStyleIcon,
+  },
+  tools: {
+    component: ToolsIcon,
+  },
+  touch: {
+    component: TouchIcon,
+  },
+  trashCan: {
+    component: TrashCanIcon,
+  },
+  triangle: {
+    component: TriangleIcon,
+  },
+  upload: {
+    component: UploadIcon,
+  },
+  videoRecorder: {
+    component: VideoRecorderIcon,
+  },
+  wall: {
+    component: WallIcon,
+  },
+  walking: {
+    component: WalkingIcon,
+  },
+};
+
+const nameCapitalized = (name) => { return name.charAt(0).toUpperCase() + name.slice(1); };
+
+const prefixed = (iconMap) => {
+  return Object
+    .entries(iconMap)
+    .reduce((previousValue, [key, value]) => ({ ...previousValue, [`vcs${nameCapitalized(key)}`]: value }), {});
+};
+
+const Icons = prefixed(IconMap);
+export const IconIds = Object.keys(IconMap);
+export const IconNames = Object.keys(Icons).map((name) => { return `$${name}`; });
+export default Icons;

package/src/icons/2DAreaIcon.vue

@@ -0,0 +1,21 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_24_2D_area" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <rect id="size" width="24" height="24" fill="none" />
+    <path id="Path_681" data-name="Path 681" d="M-10.08-3.448h1.088A2.381,2.381,0,0,1-8.948-3.9,1.4,1.4,0,0,1-8.8-4.316a.866.866,0,0,1,.276-.3.734.734,0,0,1,.42-.116.833.833,0,0,1,.6.228.843.843,0,0,1,.236.636.892.892,0,0,1-.116.456,1.555,1.555,0,0,1-.288.36,2.607,2.607,0,0,1-.38.292q-.208.132-.392.26-.36.248-.684.488a3.324,3.324,0,0,0-.564.524,2.256,2.256,0,0,0-.38.644,2.335,2.335,0,0,0-.14.848H-6.1V-.976H-8.744a2.535,2.535,0,0,1,.48-.5q.272-.216.56-.4t.572-.38a3.06,3.06,0,0,0,.508-.428,1.912,1.912,0,0,0,.36-.54,1.774,1.774,0,0,0,.136-.728A1.692,1.692,0,0,0-6.284-4.7a1.634,1.634,0,0,0-.42-.552,1.886,1.886,0,0,0-.612-.344,2.23,2.23,0,0,0-.732-.12,2.182,2.182,0,0,0-.892.172,1.74,1.74,0,0,0-.644.48,2.076,2.076,0,0,0-.384.72A2.687,2.687,0,0,0-10.08-3.448Zm5.96,2.392v-3.6h.9a2.028,2.028,0,0,1,.78.132,1.224,1.224,0,0,1,.508.38,1.556,1.556,0,0,1,.276.6,3.33,3.33,0,0,1,.084.78,2.34,2.34,0,0,1-.12.8,1.467,1.467,0,0,1-.32.532,1.162,1.162,0,0,1-.456.292A1.613,1.613,0,0,1-3-1.056ZM-5.376-5.712V0h2.464a2.734,2.734,0,0,0,1.14-.22,2.268,2.268,0,0,0,.808-.6A2.535,2.535,0,0,0-.48-1.736,3.957,3.957,0,0,0-.32-2.888a3.56,3.56,0,0,0-.2-1.24,2.438,2.438,0,0,0-.544-.88,2.231,2.231,0,0,0-.824-.528,2.941,2.941,0,0,0-1.028-.176Z" transform="translate(24 24)" fill="currentColor" />
+    <g id="Group_1752" data-name="Group 1752" transform="translate(-1319.907 -496.728)">
+      <g id="Path_673" data-name="Path 673" transform="translate(1321.907 497.728)">
+        <path id="Path_675" data-name="Path 675" d="M1323.231,513.759a1.333,1.333,0,0,1-1.323-1.271v-6.134a1.31,1.31,0,0,1,1.382-1.3h5.273v-6.032a1.351,1.351,0,0,1,1.4-1.3h10.5a1.334,1.334,0,0,1,1.368,1.27V512.46a1.344,1.344,0,0,1-1.4,1.3h-17.2Zm.026-1.5h0Zm.183-5.7v5.7H1340.3v-13.03h-10.2v6.032a1.339,1.339,0,0,1-1.4,1.3Zm17.017,5.7h0Zm-11.741-7.2h0Zm1.225-5.83h0Zm10.534,0h0Z" transform="translate(-1321.907 -497.728)" fill="currentColor" />
+      </g>
+      <g id="M2" transform="translate(1332.344 504.879)" style="isolation: isolate;">
+        <g id="Group_1752-2" data-name="Group 1752" transform="translate(0 0.215)" style="isolation: isolate;">
+          <path id="Path_676" data-name="Path 676" d="M1333.238,505.094l1,2.946h.012l.948-2.946h1.326v4.284h-.881v-3.036h-.013l-1.05,3.036h-.726l-1.049-3.006h-.013v3.006h-.882v-4.284Z" transform="translate(-1331.912 -505.094)" fill="currentColor" />
+        </g>
+        <g id="Group_1753" data-name="Group 1753" transform="translate(5.102)" style="isolation: isolate;">
+          <path id="Path_677" data-name="Path 677" d="M1337.119,505.479a.9.9,0,0,1,.168-.315.75.75,0,0,1,.281-.21.963.963,0,0,1,.391-.075.951.951,0,0,1,.32.053.827.827,0,0,1,.268.15.706.706,0,0,1,.183.241.736.736,0,0,1,.069.323.767.767,0,0,1-.06.318.834.834,0,0,1-.157.236,1.371,1.371,0,0,1-.223.188l-.25.166a2.967,2.967,0,0,0-.245.176,1.129,1.129,0,0,0-.21.221h1.159v.427h-1.8a1.018,1.018,0,0,1,.061-.371.977.977,0,0,1,.166-.281,1.514,1.514,0,0,1,.247-.23c.094-.07.195-.142.3-.214.054-.037.111-.075.172-.113a1.124,1.124,0,0,0,.166-.128.721.721,0,0,0,.126-.157.391.391,0,0,0,.051-.2.368.368,0,0,0-.1-.279.364.364,0,0,0-.263-.1.332.332,0,0,0-.185.05.393.393,0,0,0-.12.133.675.675,0,0,0-.066.183,1.105,1.105,0,0,0-.018.2h-.477A1.177,1.177,0,0,1,1337.119,505.479Z" transform="translate(-1337.014 -504.879)" fill="currentColor" />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>

package/src/icons/2DDistanceIcon.vue

@@ -0,0 +1,18 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_24_2D_distance" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <rect id="size" width="24" height="24" fill="none" />
+    <path id="Path_682" data-name="Path 682" d="M-10.08-3.448h1.088A2.381,2.381,0,0,1-8.948-3.9,1.4,1.4,0,0,1-8.8-4.316a.866.866,0,0,1,.276-.3.734.734,0,0,1,.42-.116.833.833,0,0,1,.6.228.843.843,0,0,1,.236.636.892.892,0,0,1-.116.456,1.555,1.555,0,0,1-.288.36,2.607,2.607,0,0,1-.38.292q-.208.132-.392.26-.36.248-.684.488a3.324,3.324,0,0,0-.564.524,2.256,2.256,0,0,0-.38.644,2.335,2.335,0,0,0-.14.848H-6.1V-.976H-8.744a2.535,2.535,0,0,1,.48-.5q.272-.216.56-.4t.572-.38a3.06,3.06,0,0,0,.508-.428,1.912,1.912,0,0,0,.36-.54,1.774,1.774,0,0,0,.136-.728A1.692,1.692,0,0,0-6.284-4.7a1.634,1.634,0,0,0-.42-.552,1.886,1.886,0,0,0-.612-.344,2.23,2.23,0,0,0-.732-.12,2.182,2.182,0,0,0-.892.172,1.74,1.74,0,0,0-.644.48,2.076,2.076,0,0,0-.384.72A2.687,2.687,0,0,0-10.08-3.448Zm5.96,2.392v-3.6h.9a2.028,2.028,0,0,1,.78.132,1.224,1.224,0,0,1,.508.38,1.556,1.556,0,0,1,.276.6,3.33,3.33,0,0,1,.084.78,2.34,2.34,0,0,1-.12.8,1.467,1.467,0,0,1-.32.532,1.162,1.162,0,0,1-.456.292A1.613,1.613,0,0,1-3-1.056ZM-5.376-5.712V0h2.464a2.734,2.734,0,0,0,1.14-.22,2.268,2.268,0,0,0,.808-.6A2.535,2.535,0,0,0-.48-1.736,3.957,3.957,0,0,0-.32-2.888a3.56,3.56,0,0,0-.2-1.24,2.438,2.438,0,0,0-.544-.88,2.231,2.231,0,0,0-.824-.528,2.941,2.941,0,0,0-1.028-.176Z" transform="translate(24 24)" fill="currentColor" />
+    <path
+      id="Union_52"
+      data-name="Union 52"
+      d="M10956.373,13156.8h-11.986a1.387,1.387,0,0,1-1.387-1.39v-3.467a1.386,1.386,0,0,1,1.387-1.387h19.1a1.387,1.387,0,0,1,1.388,1.387v3.467a1.387,1.387,0,0,1-1.388,1.39Zm-11.986-4.51v2.773a.349.349,0,0,0,.347.347h18.411a.346.346,0,0,0,.347-.347v-2.773a.346.346,0,0,0-.347-.347h-2.255a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.693a.35.35,0,0,0-.351.347v.693a.52.52,0,0,1-1.04,0v-.693a.346.346,0,0,0-.347-.347h-.71a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.693a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.7a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.7a.343.343,0,0,0-.343.347v.693a.522.522,0,0,1-1.044,0v-.693a.347.347,0,0,0-.347-.347h-2.255A.349.349,0,0,0,10944.387,13152.286Zm.7,1.387a.694.694,0,1,1,.693.693A.693.693,0,0,1,10945.083,13153.673Zm17.382-5.376v-.35a.347.347,0,0,0-.347-.347h-16.342a.347.347,0,0,0-.347.347v.35a.522.522,0,0,1-.891.366l-1.388-1.387a.525.525,0,0,1,0-.736l1.388-1.387a.52.52,0,0,1,.891.367v.347a.347.347,0,0,0,.347.347h16.342a.347.347,0,0,0,.347-.347v-.347a.52.52,0,0,1,.888-.367l1.388,1.387a.519.519,0,0,1,0,.736l-1.388,1.387a.52.52,0,0,1-.888-.366Z"
+      transform="translate(-10942 -13142.48)"
+      fill="currentColor"
+      stroke="rgba(0,0,0,0)"
+      stroke-miterlimit="10"
+      stroke-width="1"
+    />
+  </svg>
+</template>

package/src/icons/3DAreaIcon.vue

@@ -0,0 +1,21 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_24_3D_area" xmlns="http://www.w3.org/2000/svg" width="24" height="24.104" viewBox="0 0 24 24.104">
+    <rect id="size" width="24" height="24" fill="none" />
+    <path id="Path_679" data-name="Path 679" d="M-8.552-3.336v.8q.208,0,.436.012a1.323,1.323,0,0,1,.42.088.711.711,0,0,1,.316.244.814.814,0,0,1,.124.488.82.82,0,0,1-.264.644.937.937,0,0,1-.648.236A.965.965,0,0,1-8.6-.912a.875.875,0,0,1-.3-.236A1.052,1.052,0,0,1-9.08-1.5a1.616,1.616,0,0,1-.072-.428h-1.08a2.244,2.244,0,0,0,.14.864,1.755,1.755,0,0,0,.42.636,1.8,1.8,0,0,0,.66.4A2.586,2.586,0,0,0-8.152.1a2.563,2.563,0,0,0,.784-.12A2.032,2.032,0,0,0-6.7-.368a1.712,1.712,0,0,0,.46-.576,1.73,1.73,0,0,0,.172-.784,1.314,1.314,0,0,0-.264-.824A1.219,1.219,0,0,0-7.064-3v-.016a.983.983,0,0,0,.588-.424,1.325,1.325,0,0,0,.2-.72,1.293,1.293,0,0,0-.168-.664,1.624,1.624,0,0,0-.436-.488,1.913,1.913,0,0,0-.6-.3,2.345,2.345,0,0,0-.672-.1,2.1,2.1,0,0,0-.784.14,1.736,1.736,0,0,0-.6.4,1.8,1.8,0,0,0-.392.612,2.38,2.38,0,0,0-.156.788h1.08A1.1,1.1,0,0,1-8.8-4.492a.774.774,0,0,1,.652-.284.859.859,0,0,1,.552.192.666.666,0,0,1,.24.552.594.594,0,0,1-.116.384.745.745,0,0,1-.3.22,1.234,1.234,0,0,1-.388.092A2.4,2.4,0,0,1-8.552-3.336Zm4.432,2.28v-3.6h.9a2.028,2.028,0,0,1,.78.132,1.224,1.224,0,0,1,.508.38,1.556,1.556,0,0,1,.276.6,3.33,3.33,0,0,1,.084.78,2.34,2.34,0,0,1-.12.8,1.467,1.467,0,0,1-.32.532,1.162,1.162,0,0,1-.456.292A1.613,1.613,0,0,1-3-1.056ZM-5.376-5.712V0h2.464a2.734,2.734,0,0,0,1.14-.22,2.268,2.268,0,0,0,.808-.6A2.535,2.535,0,0,0-.48-1.736,3.957,3.957,0,0,0-.32-2.888a3.56,3.56,0,0,0-.2-1.24,2.438,2.438,0,0,0-.544-.88,2.231,2.231,0,0,0-.824-.528,2.941,2.941,0,0,0-1.028-.176Z" transform="translate(24 24)" fill="currentColor" />
+    <g id="Group_1754" data-name="Group 1754" transform="translate(-1319.907 -496.728)">
+      <g id="Path_673" data-name="Path 673" transform="translate(1321.907 497.728)">
+        <path id="Path_675" data-name="Path 675" d="M1323.231,513.759a1.333,1.333,0,0,1-1.323-1.271v-6.134a1.31,1.31,0,0,1,1.382-1.3h5.273v-6.032a1.351,1.351,0,0,1,1.4-1.3h10.5a1.334,1.334,0,0,1,1.368,1.27V512.46a1.344,1.344,0,0,1-1.4,1.3h-17.2Zm.026-1.5h0Zm.183-5.7v5.7H1340.3v-13.03h-10.2v6.032a1.339,1.339,0,0,1-1.4,1.3Zm17.017,5.7h0Zm-11.741-7.2h0Zm1.225-5.83h0Zm10.534,0h0Z" transform="translate(-1321.907 -497.728)" fill="currentColor" />
+      </g>
+      <g id="M2" transform="translate(1332.344 504.879)" style="isolation: isolate;">
+        <g id="Group_1752" data-name="Group 1752" transform="translate(0 0.215)" style="isolation: isolate;">
+          <path id="Path_676" data-name="Path 676" d="M1333.238,505.094l1,2.946h.012l.948-2.946h1.326v4.284h-.881v-3.036h-.013l-1.05,3.036h-.726l-1.049-3.006h-.013v3.006h-.882v-4.284Z" transform="translate(-1331.912 -505.094)" fill="currentColor" />
+        </g>
+        <g id="Group_1753" data-name="Group 1753" transform="translate(5.102)" style="isolation: isolate;">
+          <path id="Path_677" data-name="Path 677" d="M1337.119,505.479a.9.9,0,0,1,.168-.315.75.75,0,0,1,.281-.21.963.963,0,0,1,.391-.075.951.951,0,0,1,.32.053.827.827,0,0,1,.268.15.706.706,0,0,1,.183.241.736.736,0,0,1,.069.323.767.767,0,0,1-.06.318.834.834,0,0,1-.157.236,1.371,1.371,0,0,1-.223.188l-.25.166a2.967,2.967,0,0,0-.245.176,1.129,1.129,0,0,0-.21.221h1.159v.427h-1.8a1.018,1.018,0,0,1,.061-.371.977.977,0,0,1,.166-.281,1.514,1.514,0,0,1,.247-.23c.094-.07.195-.142.3-.214.054-.037.111-.075.172-.113a1.124,1.124,0,0,0,.166-.128.721.721,0,0,0,.126-.157.391.391,0,0,0,.051-.2.368.368,0,0,0-.1-.279.364.364,0,0,0-.263-.1.332.332,0,0,0-.185.05.393.393,0,0,0-.12.133.675.675,0,0,0-.066.183,1.105,1.105,0,0,0-.018.2h-.477A1.177,1.177,0,0,1,1337.119,505.479Z" transform="translate(-1337.014 -504.879)" fill="currentColor" />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>