add experimental components

pages/.vitepress/components/ToolsSlider.vue

@@ -0,0 +1,61 @@
+
+<script lang="ts">
+
+export default {
+  props: {
+  },
+  data() {
+    return {
+      model: [],
+    }
+  },
+  computed: {
+  },
+}
+</script>
+
+<template>
+  <v-sheet
+    class="mx-auto"
+    elevation="0"
+    max-width="920"
+  >
+    <v-slide-group
+      v-model="model"
+      class="pa-4"
+      selected-class="bg-primary"
+      multiple
+      show-arrows
+    >
+      <v-slide-group-item
+        v-for="n in 15"
+        :key="n"
+        v-slot="{ isSelected, toggle, selectedClass }"
+      >
+        <v-card
+          color="grey-lighten-1"
+          :class="['ma-4', selectedClass]"
+          height="200"
+          width="100"
+          @click="toggle"
+        >
+          <div class="d-flex fill-height align-center justify-center">
+            <v-scale-transition>
+              <v-icon
+                v-if="isSelected"
+                color="white"
+                size="48"
+                icon="mdi-close-circle-outline"
+              ></v-icon>
+            </v-scale-transition>
+          </div>
+        </v-card>
+      </v-slide-group-item>
+    </v-slide-group>
+  </v-sheet>
+</template>
+
+<style scoped>
+
+
+</style>

pages/.vitepress/components/WindowSlider.vue

@@ -0,0 +1,89 @@
+
+<script lang="ts">
+
+export default {
+  props: {
+  },
+  data() {
+    return {
+    length: 3,
+      model: 1,
+    }
+  },
+  computed: {
+  },
+  methods: {
+    next () {
+      this.model = this.model + 1 > this.length
+        ? 1
+        : this.model + 1
+    },
+    prev () {
+      this.model = this.model - 1 <= 0
+        ? this.length
+        : this.model - 1
+    },
+},
+}
+</script>
+
+<template>
+  <v-card
+    theme="dark"
+    flat
+    rounded="0"
+  >
+    <v-window v-model="model">
+      <v-window-item
+        v-for="n in length"
+        :key="`card-${n}`"
+        :value="n"
+      >
+        <v-card
+          height="200"
+          class="d-flex justify-center align-center"
+        >
+          <span class="text-h2">
+            Card {{ n }}
+          </span>
+        </v-card>
+      </v-window-item>
+    </v-window>
+
+    <v-card-actions class="justify-space-between">
+      <v-btn
+        variant="plain"
+        icon="mdi-chevron-left"
+        @click="prev"
+      ></v-btn>
+      <v-item-group
+        v-model="model"
+        class="text-center"
+        mandatory
+      >
+        <v-item
+          v-for="n in length"
+          :key="`btn-${n}`"
+          v-slot="{ isSelected, toggle }"
+          :value="n"
+        >
+          <v-btn
+            :variant="isSelected ? 'outlined' : 'text'"
+            icon="mdi-record"
+            @click="toggle"
+          ></v-btn>
+        </v-item>
+      </v-item-group>
+      <v-btn
+        variant="plain"
+        icon="mdi-chevron-right"
+        @click="next"
+      ></v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<style scoped>
+
+
+</style>

pages/.vitepress/theme/index.ts

@@ -4,6 +4,9 @@ import DefaultTheme from 'vitepress/theme';
 // import GreyBlock from '../components/GreyBlock.vue';
 import ProductSlider from '../components/ProductSlider.vue';
 import RoleSlider from '../components/RoleSlider.vue';
+import ToolsSlider from '../components/ToolsSlider.vue';
+import WindowSlider from '../components/WindowSlider.vue';
+
 // import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 import { VPButton } from 'vitepress/theme';
 // import { VPImage } from 'vitepress/theme';
@@ -31,6 +34,8 @@ export default {
     context.app.component('VPButton', VPButton);
     context.app.component('ProductSlider', ProductSlider);
     context.app.component('RoleSlider', RoleSlider);
+    context.app.component('ToolsSlider', ToolsSlider);
+    context.app.component('WindowSlider', WindowSlider);
     // context.app.component('VPImage', VPImage);
   }
 }