Skip to content

Commit

Permalink
Trials and errors
Browse files Browse the repository at this point in the history
  • Loading branch information
nirname committed Aug 2, 2023
1 parent 981eca5 commit 69fe83f
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 0 deletions.
30 changes: 30 additions & 0 deletions packages/mermaid/src/docs/.vitepress/components/Selector.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<template>
<div>
<span>{{ title }}</span>
<button class="rounded-full" :key="option.value" @click="handleButtonClick(option.value)" v-for="option in options">
{{ option.label }}
<span v-if="option.value === value">[v]</span>
</button>
</div>
</template>

<script>
export default {
props: {
title: String,
defaultValue: String,
options: Array
},
data() {
return {
value: this.defaultValue
};
},
methods: {
handleButtonClick(newValue) {
this.value = newValue;
this.$emit('change', this.value);
},
},
};
</script>
77 changes: 77 additions & 0 deletions packages/mermaid/src/docs/community/development.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,80 @@
<script>
export default {
data() {
return {
selectedPlatform: "local",
};
},
methods: {
handlePlatformChange(newValue) {
console.log('Value changed:', this.selectedPlatform);
this.selectedPlatform = newValue;
},
},
};
</script>

<style>
.button-container {
display: inline;
}

.platform-button {
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 20px;
margin-right: 8px;

border-color: var(--vp-button-brand-border);
color: var(--vp-button-brand-text);
background-color: var(--vp-button-brand-bg);
}

.platform-button:hover {
}

.selected-button {
}
</style>

<!--
<Selector
title="Select your platform"
defaultValue="local"
:options="[
{ value: 'local', label: 'Local' },
{ value: 'docker', label: 'Docker' },
{ value: 'mac', label: 'Mac' }
]"
v-on:change="handlePlatformChange"
/>
-->

<div class="button-container">
Select your platform
<button class="platform-button" :class="{'selected-button': true}" @click="handlePlatformChange('local')">
Local
</button>
<button class="selected-button" @click="handlePlatformChange('docker')">
Docker
</button>
</div>

<br/>
<br/>
<div v-if="selectedPlatform === 'mac'">
MAC
</div>

<div v-if="selectedPlatform === 'local'">
LOCAL
</div>

<div v-if="selectedPlatform === 'docker'">
DOCKER
</div>


# Contributing to Mermaid

## Contents
Expand Down

0 comments on commit 69fe83f

Please sign in to comment.