@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.3

package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue

@@ -20,13 +20,18 @@
       <template #default>
         <v-container class="py-0 px-1">
           <v-row no-gutters>
-            <v-col class="w-max-half">
-              <VcsLabel html-for="selectInput">
+            <v-col>
+              <VcsLabel
+                :disabled="disabled"
+                html-for="selectInput"
+                tooltip="labelTooltip"
+              >
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
-            <v-col class="w-max-half">
+            <v-col>
               <VcsSelect
+                :disabled="disabled"
                 id="selectInput"
                 loading="primary"
                 :items="selectOptions"
@@ -37,12 +42,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="conditionalInput">
+              <VcsLabel :disabled="disabled" html-for="conditionalInput">
                 ConditionalInput
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="conditionalInput"
                 clearable
                 :rules="[
@@ -54,13 +60,21 @@
             </v-col>
           </v-row>
           <v-row no-gutters>
-            <v-col class="w-max-half">
-              <VcsLabel html-for="arrayInput"> Array Input </VcsLabel>
+            <v-col>
+              <VcsCheckbox :disabled="disabled" label="Checkbox"></VcsCheckbox>
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel :disabled="disabled" html-for="arrayInput">
+                Array Input
+              </VcsLabel>
             </v-col>
           </v-row>
           <v-row no-gutters>
             <v-col>
               <VcsChipArrayInput
+                :disabled="disabled"
                 id="arrayInput"
                 type="number"
                 v-model="array"
@@ -71,6 +85,7 @@
           <v-row no-gutters>
             <v-col>
               <VcsChipArrayInput
+                :disabled="disabled"
                 id="arrayInput"
                 v-model="state.arrayInputString"
                 column
@@ -80,6 +95,7 @@
           <v-row no-gutters>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 v-model="state.initialTextInput"
                 :rules="[isValidText]"
                 :loading="
@@ -98,7 +114,7 @@
           <v-row no-gutters>
             <v-col>
               <VcsTextArea
-                :dense="dense"
+                :disabled="disabled"
                 :rules="[(v) => !!v || 'text area must not be empty']"
                 placeholder="This is a text area"
                 tooltip="This is a tooltip"
@@ -108,10 +124,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="emailInput" required> Email </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="emailInput" required>
+                Email
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="emailInput"
                 type="email"
                 :rules="[isValidEmail]"
@@ -122,10 +141,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="prependedInput"> String With Icon </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="prependedInput">
+                String With Icon
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="prependedInput"
                 prepend-icon="mdi-map-marker"
                 v-model="state.prependedInput"
@@ -135,10 +157,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="fileInput"> File input </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="fileInput">
+                File input
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsFileInput
+                :disabled="disabled"
                 id="fileInput"
                 multiple
                 tooltip="Click to select a file."
@@ -148,10 +173,12 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="dateInput"> Date </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="dateInput">
+                Date
+              </VcsLabel>
             </v-col>
             <v-col>
-              <VcsDatePicker id="dateInput" v-model="state.dateInput" />
+              <VcsDatePicker :disabled="disabled" id="dateInput" />
             </v-col>
           </v-row>
         </v-container>
@@ -165,10 +192,13 @@
         <v-container class="py-0 px-1">
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="numberInput"> NumberInput </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="numberInput">
+                NumberInput
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="numberInput"
                 type="number"
                 step="1"
@@ -180,12 +210,14 @@
           </v-row>
           <v-row no-gutters class="align-center">
             <v-col>
-              <VcsLabel html-for="sliderInput"> Slider </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="sliderInput">
+                Slider
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsSlider
+                :disabled="disabled"
                 id="sliderInput"
-                :dense="dense"
                 type="number"
                 step="1"
                 v-model.number="state.numberInput"
@@ -194,53 +226,53 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="formattedNumber">
+              <VcsLabel :disabled="disabled" html-for="formattedNumber">
                 VcsFormattedNumber
               </VcsLabel>
             </v-col>
             <v-col class="d-flex justify-end">
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
           </v-row>
           <v-row no-gutters class="gc-2">
             <v-col>
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 prefix="X"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
             <v-col>
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 prefix="Y"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
             <v-col>
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 prefix="Z"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
           </v-row>
-          <VcsCoordinate v-model="array" />
+          <VcsCoordinate :disabled="disabled" v-model="array" />
         </v-container>
       </template>
     </VcsFormSection>
@@ -254,6 +286,7 @@
         <v-row no-gutters>
           <v-col>
             <VcsRadio
+              :disabled="disabled"
               :items="[
                 ...selectOptions,
                 {
@@ -270,12 +303,13 @@
         </v-row>
         <v-row no-gutters>
           <v-col>
-            <VcsLabel> Radio with img label </VcsLabel>
+            <VcsLabel :disabled="disabled"> Radio with img label </VcsLabel>
           </v-col>
         </v-row>
         <v-row no-gutters>
           <v-col>
             <VcsRadio
+              :disabled="disabled"
               v-model="state.selected"
               :items="[
                 { value: 'AAAAAAAA', src: 'mdi-circle-outline' },
@@ -283,7 +317,6 @@
                 { value: 'C', src: 'mdi-triangle-outline' },
                 { value: 'D', src: 'mdi-square-outline' },
               ]"
-              :dense="dense"
               :rules="[(v) => v !== 'D' || 'Square is not allowed']"
               tooltip="This is a radio grid"
               inline
@@ -313,6 +346,7 @@
         <v-row no-gutters>
           <v-col>
             <VcsCheckbox
+              :disabled="disabled"
               id="checkboxInput"
               label="CheckboxInput"
               tooltip="This is a checkbox for terms of usage"
@@ -324,6 +358,7 @@
           </v-col>
           <v-col>
             <VcsFormButton
+              :disabled="disabled"
               :is-active="state.checkboxInput"
               @click="state.checkboxInput = !state.checkboxInput"
               tooltip="toggle button"
@@ -349,29 +384,35 @@
         <v-container class="py-0 px-1">
           <v-row>
             <v-col cols="1">
-              <VcsLabel html-for="textInput" class="text-caption"> 1 </VcsLabel>
+              <VcsLabel
+                :disabled="disabled"
+                html-for="textInput"
+                class="text-caption"
+              >
+                1
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsSelect
+                :disabled="disabled"
                 :items="[
                   { value: 'one', i18n: 'form-inputs-example.numbers.one' },
                   { value: 'two', i18n: 'form-inputs-example.numbers.two' },
                   { value: 'three', i18n: 'form-inputs-example.numbers.three' },
                 ]"
                 :item-text="(item) => item.i18n"
-                :dense="dense"
                 placeholder="Numbers"
               />
             </v-col>
             <v-col>
               <VcsSelect
+                :disabled="disabled"
                 :items="[
                   { value: 'Anna', fullName: 'Annabella' },
                   { value: 'Bella', fullName: 'Belladonna' },
                   { value: 'Claudi', fullName: 'Claudine' },
                 ]"
                 :item-text="(item) => item.fullName"
-                :dense="dense"
                 multiple
                 v-model="state.selectedMultiple"
                 :rules="[
@@ -404,16 +445,15 @@
       <template #default>
         <v-container class="py-0 px-1">
           <v-row no-gutters>
-            <v-col class="w-max-half">
+            <v-col>
               <VcsLabel html-for="selectInput2" disabled>
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
-            <v-col class="w-max-half">
+            <v-col>
               <VcsSelect
                 id="selectInput2"
                 :items="selectOptions"
-                :dense="dense"
                 :rules="[(v) => v !== 'D' || 'D is not allowed']"
                 v-model="state.selected"
                 :disabled="true"
@@ -499,7 +539,7 @@
         type: Array,
         required: true,
       },
-      dense: {
+      disabled: {
         type: Boolean,
         required: true,
       },

package/plugins/@vcmap-show-case/form-inputs-example/src/exampleActions.js

@@ -1,21 +1,17 @@
 import { reactive, ref } from 'vue';
 
 export default function createExampleActions() {
-  const dense = ref(false);
+  const disabled = ref(false);
   const showSection = ref(true);
 
   const actions = [
     reactive({
-      name: 'denseSelection',
-      title: 'change row height',
-      icon: dense.value
-        ? 'mdi-arrow-split-horizontal'
-        : 'mdi-arrow-collapse-vertical',
+      name: 'disabledSelection',
+      title: 'Changed Disabled',
+      icon: disabled.value ? 'mdi-airplane' : 'mdi-airplane-off',
       callback() {
-        dense.value = !dense.value;
-        this.icon = dense.value
-          ? 'mdi-arrow-split-horizontal'
-          : 'mdi-arrow-collapse-vertical';
+        disabled.value = !disabled.value;
+        this.icon = disabled.value ? 'mdi-airplane' : 'mdi-airplane-off';
       },
     }),
     {
@@ -32,5 +28,5 @@ export default function createExampleActions() {
     },
   ];
 
-  return { actions, dense, showSection };
+  return { actions, disabled, showSection };
 }

package/plugins/@vcmap-show-case/form-inputs-example/src/index.js

@@ -178,7 +178,7 @@ export default function formInputsExample(config) {
     getSerializedState,
     setSerializedState,
     onVcsAppMounted(app) {
-      const { actions, dense } = createExampleActions();
+      const { actions, disabled } = createExampleActions();
 
       const { action, destroy } = createToggleAction(
         {
@@ -199,7 +199,7 @@ export default function formInputsExample(config) {
           },
           props: reactive({
             actions,
-            dense,
+            disabled,
           }),
         },
         app.windowManager,

package/plugins/@vcmap-show-case/list-example/src/ListExample.vue

@@ -87,9 +87,10 @@
                 <v-switch label="disabled" v-model="newItem.disabled" />
                 <v-switch label="random icon" v-model="newItem.icon" />
                 <v-switch label="hasUpdate" v-model="newItem.hasUpdate" />
+                <v-switch label="rename action" v-model="newItem.renamable" />
                 <v-switch
-                  label="rename action"
-                  v-model="newItem.renameAction"
+                  label="toggle rename action"
+                  v-model="newItem.toggleRename"
                 />
                 <v-switch label="console.log action" v-model="newItem.action" />
                 <v-switch
@@ -162,7 +163,6 @@
     VcsTextField,
     Icons,
     VcsFormSection,
-    createListItemRenameAction,
   } from '@vcmap/ui';
   import {
     VSwitch,
@@ -247,7 +247,8 @@
         disabled: false,
         visible: true,
         icon: false,
-        renameAction: false,
+        renamable: false,
+        toggleRename: false,
         action: false,
         clicked: false,
         selected: false,
@@ -281,6 +282,7 @@
             disabled: newItem.value.disabled,
             visible: newItem.value.visible,
             hasUpdate: newItem.value.hasUpdate,
+            renamable: newItem.value.renamable,
           });
 
           if (newItem.value.icon) {
@@ -289,9 +291,13 @@
 
           item.actions = [];
 
-          if (newItem.value.renameAction) {
-            item.rename = false;
-            item.actions.push(createListItemRenameAction(item));
+          if (newItem.value.toggleRename) {
+            item.actions.push({
+              name: 'toggle rename',
+              callback() {
+                item.renamable = !item.renamable;
+              },
+            });
           }
 
           if (newItem.value.action) {
@@ -320,6 +326,13 @@
               }
             };
           }
+
+          if (newItem.value.renamable) {
+            item.titleChanged = (newTitle) => {
+              item.title = newTitle;
+            };
+          }
+
           items.value.push(item);
           newItem.value = {
             name: 'foo',
@@ -327,7 +340,7 @@
             disabled: false,
             visible: true,
             icon: false,
-            renameAction: false,
+            renamable: false,
             action: false,
             clicked: false,
             selected: false,

package/plugins/@vcmap-show-case/style-input-example/src/StyleExample.vue

@@ -1,27 +1,30 @@
 <template>
   <v-sheet>
-    <VcsFormSection heading="Style menus">
+    <VcsFormSection
+      heading="Style menus"
+      :header-actions="[resetExample, logStyle]"
+    >
       <VcsVectorStyleComponent
-        v-model="styleOptions"
+        v-model="styleOptions.style"
         :value-default="defaultStyleOptions"
       />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Fill Selector">
-      <VcsFillSelector v-model="styleOptions.fill" />
+      <VcsFillSelector v-model="styleOptions.style.fill" />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Stroke Selector">
-      <VcsStrokeSelector v-model="styleOptions.stroke" />
+      <VcsStrokeSelector v-model="styleOptions.style.stroke" />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Image Selector">
       <VcsImageSelector
-        v-model="styleOptions.image"
+        v-model="styleOptions.style.image"
         :value-default="defaultStyleOptions.image"
         :extended-shape-settings="true"
       />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Text Selector">
       <VcsTextSelector
-        v-model="styleOptions.text"
+        v-model="styleOptions.style.text"
         :value-default="defaultStyleOptions.text"
       />
     </VcsFormSection>
@@ -30,7 +33,7 @@
 
 <script>
   import { VSheet } from 'vuetify/components';
-  import { onMounted, ref, watchEffect } from 'vue';
+  import { reactive, toRaw } from 'vue';
   import {
     VcsFormSection,
     VcsFillSelector,
@@ -40,8 +43,8 @@
     VcsVectorStyleComponent,
     VectorStyleMenus,
   } from '@vcmap/ui';
-  import { parseColor } from '@vcmap/core';
-  import { Fill, Icon, RegularShape, Stroke, Style, Text } from 'ol/style.js';
+  import { getStyleOptions } from '@vcmap/core';
+  import { Fill, RegularShape, Stroke, Style, Text } from 'ol/style.js';
 
   export default {
     name: 'StyleExample',
@@ -97,93 +100,29 @@
         },
       };
 
-      const styleOptions = ref({
-        fill: undefined,
-        stroke: undefined,
-        image: undefined,
-        text: undefined,
-      });
-
-      const fill = exampleStyle.getFill();
-      const stroke = exampleStyle.getStroke();
-      const image = exampleStyle.getImage();
-      const text = exampleStyle.getText();
-
-      // TODO: Replace with new getStyleOptions from @vcmap/core as soon as available
-      if (fill) {
-        styleOptions.value.fill = {
-          color: parseColor(fill.getColor()),
-        };
-      }
-      if (stroke) {
-        styleOptions.value.stroke = {
-          color: parseColor(stroke.getColor()),
-          width: exampleStyle.getStroke().getWidth(),
-        };
-      }
-      if (image) {
-        if (image instanceof RegularShape) {
-          styleOptions.value.image = {
-            points: image.getPoints(),
-            radius: image.getRadius(),
-            radius2: image.getRadius2(),
-            angle: image.getAngle(),
-            fill: {
-              color: parseColor(image.getFill().getColor()),
-            },
-            stroke: {
-              color: parseColor(image.getStroke().getColor()),
-              width: image.getStroke().getWidth(),
-            },
-          };
-        } else if (image instanceof Icon) {
-          styleOptions.value.image = {
-            src: image.getSrc(),
-            scale: image.getScale(),
-            opacity: image.getOpacity(),
-          };
-        }
-      }
-      if (text) {
-        styleOptions.value.text = {
-          font: text.getFont(),
-          fill: {
-            color: parseColor(text.getFill()?.getColor()),
-          },
-          stroke: {
-            color: parseColor(text.getStroke()?.getColor()),
-            width: text.getStroke().getWidth(),
-          },
-          textBaseline: text.getTextBaseline(),
-          offsetY: text.getOffsetY(),
-          offsetX: text.getOffsetX(),
-          text: text.getText(),
-        };
-      }
-
-      onMounted(() => {
-        watchEffect(() => {
-          const newFill = styleOptions.value.fill;
-          const newStroke = styleOptions.value.stroke;
-          const newImage = styleOptions.value.image;
-          // const newText = styleOptions.value.text;
-          // TODO: Replace with new getStyleFromOptions from @vcmap/core as soon as available
-          exampleStyle.setFill(newFill ? new Fill(newFill) : null);
-          exampleStyle.setStroke(newStroke ? new Stroke(newStroke) : null);
-          if (newImage?.points) {
-            // exampleStyle.setImage(new RegularShape(newImage));
-          } else if (newImage?.src) {
-            exampleStyle.setImage(new Icon(newImage));
-          } else {
-            exampleStyle.setImage(null);
-          }
-        });
+      // use reactive wrapper object to ensure updates
+      const styleOptions = reactive({
+        style: getStyleOptions(exampleStyle),
       });
 
       return {
         styleOptions,
         defaultStyleOptions,
         VectorStyleMenus,
+        resetExample: {
+          name: 'resetExample',
+          icon: 'mdi-sync',
+          callback() {
+            styleOptions.style = getStyleOptions(exampleStyle);
+          },
+        },
+        logStyle: {
+          name: 'logStyle',
+          icon: 'mdi-console',
+          callback() {
+            console.log(toRaw(styleOptions.style));
+          },
+        },
       };
     },
   };

package/public/assets/@mdi/font/README.md

@@ -0,0 +1,25 @@
+> *Note:* Please use the main [MaterialDesign](https://github.com/Templarian/MaterialDesign/issues) repo to report issues. This repo is for distribution of the Webfont files only.
+
+# Webfont - Material Design Icons
+
+Webfont distribution for the [Material Design Icons](https://materialdesignicons.com).
+
+```
+npm install @mdi/font
+```
+
+> Package built with [@mdi/font-build](https://github.com/Templarian/MaterialDesign-Font-Build).
+
+## Related Packages
+
+[NPM @MDI Organization](https://npmjs.com/org/mdi)
+
+- JavaScript/Typescript: [MaterialDesign-JS](https://github.com/Templarian/MaterialDesign-JS)
+- SVG: [MaterialDesign-SVG](https://github.com/Templarian/MaterialDesign-SVG)
+- Font-Build [MaterialDesign-Font-Build](https://github.com/Templarian/MaterialDesign-Font-Build)
+- Desktop Font: [MaterialDesign-Font](https://github.com/Templarian/MaterialDesign-Font)
+
+## Learn More
+
+- [MaterialDesignIcons.com](https://materialdesignicons.com)
+- https://github.com/Templarian/MaterialDesign