massCode/src/renderer/components/devtools/text/SortTool.vue at 609d79ce261a1738158e9de3d67410b019370290 · massCodeIO/massCode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<template>
  <div class="slug-tool">
    <AppForm>
      <AppFormItem :label="i18n.t('devtools:form.inputString')">
        <AppInput
          v-model="inputValue"
          style="width: 100%"
          type="textarea"
        />
        <template #actions>
          <AppButton @click="onSort('sort')">
            {{ i18n.t('common:button.sort') }}
          </AppButton>
          <AppButton @click="onSort('revers')">
            {{ i18n.t('common:button.revers') }}
          </AppButton>
        </template>
      </AppFormItem>
      <AppFormItem :label="i18n.t('devtools:form.outputString')">
        <AppInput
          v-model="outputValue"
          style="width: 100%"
          type="textarea"
          readonly
        />
        <template #actions>
          <AppButton @click="onClear">
            {{ i18n.t('common:button.clear') }}
          </AppButton>
          <AppButton @click="useCopy(outputValue)">
            {{ i18n.t('common:button.copy') }}
          </AppButton>
        </template>
      </AppFormItem>
    </AppForm>
  </div>
</template>

<script setup lang="ts">
import { i18n } from '@/electron'
import { track } from '@/services/analytics'
import { ref } from 'vue'
import { useCopy } from '../composables'

const inputValue = ref('')
const outputValue = ref('')

function onClear () {
  inputValue.value = ''
  outputValue.value = ''
}

function onSort (type: string) {
  const lines = inputValue.value.split('\n')

  if (type === 'sort') {
    lines.sort()
  } else if (type === 'revers') {
    lines.reverse()
  }

  const nonEmptyLines = lines.filter(line => line.trim() !== '')

  outputValue.value = nonEmptyLines.join('\n')
}

track('devtools/sort')
</script>

<style lang="scss" scoped></style>