@vcmap/ui 6.0.0-rc.9 → 6.0.0

package/plugins/@vcmap-show-case/table-example/src/DataTableExample.vue

@@ -1,203 +0,0 @@
-<template>
-  <v-sheet>
-    <v-sheet class="px-2 d-grid">
-      <v-switch
-        v-model="selectable"
-        label="Selectable"
-        density="compact"
-        class="mx-1"
-      />
-      <v-switch
-        :disabled="!selectable"
-        v-model="selectSingle"
-        label=" Single Select"
-        density="compact"
-        class="mx-1"
-      />
-      <v-switch
-        v-model="searchable"
-        label="Searchable"
-        density="compact"
-        class="mx-1"
-      />
-      <v-dialog v-model="dialog" width="400">
-        <template #activator="{ props }">
-          <vcs-form-button v-bind="props"> Add An item </vcs-form-button>
-        </template>
-        <v-card class="pa-2">
-          <v-form @submit.prevent="add">
-            <vcs-text-field
-              v-model="newItem.name"
-              label="Name"
-              :rules="required"
-            />
-            <vcs-text-field
-              v-model="newItem.type"
-              label="type"
-              :rules="required"
-            />
-            <vcs-text-field v-model="newItem.date" type="date" label="date" />
-            <vcs-checkbox label="disabled" v-model="newItem.disabled" />
-            <vcs-form-button type="submit" variant="filled">
-              Add
-            </vcs-form-button>
-          </v-form>
-        </v-card>
-      </v-dialog>
-    </v-sheet>
-
-    <vcs-data-table
-      :items="items"
-      :headers="headers"
-      :show-select="selectable"
-      :select-strategy="selectSingle ? 'single' : 'page'"
-      :items-per-page="2"
-      :show-searchbar="searchable"
-      v-model="selected"
-    >
-      <!-- eslint-disable-next-line -->
-      <template v-slot:item.actions="{ item }">
-        <VcsActionButtonList
-          v-if="item.actions"
-          :actions="item.actions"
-          :overflow-count="2"
-        />
-      </template>
-    </vcs-data-table>
-  </v-sheet>
-</template>
-
-<script>
-  import {
-    VcsDataTable,
-    VcsFormButton,
-    VcsTextField,
-    VcsCheckbox,
-    VcsActionButtonList,
-  } from '@vcmap/ui';
-  import { VSwitch, VSheet, VDialog, VCard, VForm } from 'vuetify/components';
-  import { ref } from 'vue';
-
-  const defaultHeaders = [
-    {
-      title: 'Name',
-      key: 'name',
-    },
-    {
-      title: 'Type',
-      key: 'type',
-    },
-    {
-      title: 'Datum',
-      key: 'date',
-      sort: (a, b) => new Date(b) - new Date(a),
-    },
-    { title: 'Actions', key: 'actions', sortable: false },
-  ];
-
-  const defaultItems = [
-    {
-      id: 0,
-      name: 'foo',
-      type: 'Foo',
-      date: '8/3/2023 9:24',
-      actions: [
-        {
-          name: 'console.log',
-          icon: 'mdi-printer',
-          callback() {
-            console.log('foo action');
-          },
-        },
-      ],
-    },
-    {
-      id: 1,
-      name: 'bar',
-      type: 'Bar',
-      date: '1/8/2022 19:54',
-    },
-    {
-      id: 2,
-      name: 'baz',
-      type: 'Baz',
-      date: '11/2/2012 14:03',
-    },
-    {
-      id: 3,
-      name: 'foo-bar',
-      type: 'Foo Bar',
-      date: '18/4/1992 21:53',
-    },
-  ];
-
-  export default {
-    name: 'DataTableExample',
-    components: {
-      VcsDataTable,
-      VcsFormButton,
-      VcsTextField,
-      VcsCheckbox,
-      VcsActionButtonList,
-      VSwitch,
-      VSheet,
-      VDialog,
-      VCard,
-      VForm,
-    },
-    setup() {
-      const selectable = ref(true);
-      const searchable = ref(true);
-      const selectSingle = ref(false);
-      const selected = ref([]);
-      const items = ref(defaultItems);
-      const headers = ref(defaultHeaders);
-      const newItem = ref({
-        name: 'foo',
-        type: 'foo',
-        date: new Date(),
-        disabled: false,
-      });
-      const dialog = ref(false);
-
-      return {
-        selectable,
-        searchable,
-        selectSingle,
-        selected,
-        items,
-        headers,
-        newItem,
-        dialog,
-        required: [
-          (v) => !!v || 'Input may not be null',
-          (v) => v.length > 0 || 'Input must have a length',
-        ],
-        add() {
-          const item = {
-            name: newItem.value.name,
-            type: newItem.value.type,
-            date: newItem.value.date,
-            disabled: newItem.value.disabled,
-            id: items.value.length,
-          };
-
-          items.value.push(item);
-          newItem.value = {
-            name: 'foo',
-            type: 'foo',
-            date: new Date(),
-          };
-          dialog.value = false;
-        },
-      };
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .d-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-</style>

package/plugins/@vcmap-show-case/textfields-example/README.md

@@ -1,3 +0,0 @@
-# Textfields Example
-
-This is a show-case plugin demonstrating the usage of textfields in a grid.

package/plugins/@vcmap-show-case/textfields-example/package.json

@@ -1,5 +0,0 @@
-{
-  "name": "@vcmap-show-case/textfields-example",
-  "version": "1.0.0",
-  "mapVersion": "^5.0.0"
-}

package/plugins/@vcmap-show-case/textfields-example/src/TextfieldsExample.vue

@@ -1,115 +0,0 @@
-<template>
-  <v-sheet style="height: 100%">
-    <v-container class="pa-2">
-      <v-row dense>
-        <v-col>
-          <label> test</label>
-        </v-col>
-        <v-col>
-          <v-text-field hide-details dense outlined />
-        </v-col>
-      </v-row>
-      <v-row dense>
-        <v-col>
-          <v-text-field dense hide-details outlined class="ma-0" />
-        </v-col>
-        <v-col>
-          <v-text-field dense hide-details class="ma-0" />
-        </v-col>
-        <v-col>
-          <v-text-field label="test" dense hide-details outlined class="ma-0" />
-        </v-col>
-        <v-col>
-          <v-text-field label="test" dense hide-details class="ma-0" />
-        </v-col>
-      </v-row>
-      <v-row dense>
-        <v-col>
-          <v-text-field hide-details outlined />
-        </v-col>
-        <v-col>
-          <v-text-field hide-details class="ma-0 pb-1 pt-1" />
-        </v-col>
-        <v-col>
-          <v-text-field label="test" hide-details outlined />
-        </v-col>
-        <v-col>
-          <v-text-field label="test" hide-details class="ma-0 pb-1 pt-1" />
-        </v-col>
-      </v-row>
-      <v-row dense>
-        <v-col>
-          <v-text-field
-            dense
-            hide-details
-            @mouseover="hover1 = true"
-            @mouseleave="hover1 = false"
-            :outlined="hover1"
-            class="ma-0"
-          />
-        </v-col>
-        <v-col>
-          <v-text-field
-            dense
-            hide-details
-            class="ma-0"
-            @mouseover="hover2 = true"
-            @mouseleave="hover2 = false"
-            :outlined="hover2"
-          />
-        </v-col>
-        <v-col>
-          <v-text-field
-            dense
-            hide-details
-            class="ma-0"
-            label="test"
-            @mouseover="hover3 = true"
-            @mouseleave="hover3 = false"
-            :outlined="hover3"
-          />
-        </v-col>
-        <v-col>
-          <v-text-field
-            dense
-            hide-details
-            class="ma-0"
-            label="test"
-            @mouseover="hover4 = true"
-            @mouseleave="hover4 = false"
-            :outlined="hover4"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-sheet>
-</template>
-<script>
-  import {
-    VSheet,
-    VContainer,
-    VRow,
-    VCol,
-    VTextField,
-  } from 'vuetify/components';
-
-  export default {
-    name: 'TextfieldsExample',
-    components: {
-      VSheet,
-      VContainer,
-      VRow,
-      VCol,
-      VTextField,
-    },
-    data() {
-      return {
-        hover1: false,
-        hover2: false,
-        hover3: false,
-        hover4: false,
-        email: 'test',
-      };
-    },
-  };
-</script>

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

@@ -1,64 +0,0 @@
-/* eslint-disable no-console */
-import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
-import packageJSON from '../package.json';
-import mySuperComponent from './TextfieldsExample.vue';
-
-/**
- *
- * @param {FormInputsExampleConfig} config
- * @returns {VcsPlugin}
- */
-export default async function textfieldsExample(config) {
-  return {
-    get name() {
-      return packageJSON.name;
-    },
-    get version() {
-      return packageJSON.version;
-    },
-    get mapVersion() {
-      return packageJSON.mapVersion;
-    },
-    initialize(app) {
-      console.log('initialize', app, config);
-    },
-    onVcsAppMounted(app) {
-      console.log('onVcsAppMounted', app, config);
-      // XXX supportedMaps: ['vcs.vcm.maps.Openlayers', 'vcs.vcm.maps.Cesium'],
-      const { action, destroy } = createToggleAction(
-        {
-          name: 'Textfields Example',
-          icon: '$vcsPen',
-        },
-        {
-          id: '228',
-          component: mySuperComponent,
-          slot: WindowSlot.DETACHED,
-          state: {
-            headerTitle: 'Textfields Example',
-            headerIcon: '$vcsPen',
-          },
-          position: {
-            width: 1200,
-          },
-        },
-        app.windowManager,
-        packageJSON.name,
-      );
-      this._destroyAction = destroy;
-      app.navbarManager.add(
-        {
-          action,
-        },
-        packageJSON.name,
-        ButtonLocation.TOOL,
-      );
-    },
-    destroy() {
-      if (this._destroyAction) {
-        this._destroyAction();
-        this._destroyAction = null;
-      }
-    },
-  };
-}