From d535e7305dd4dc890ac055a5167f8817c25fae9e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 5 Jul 2022 19:39:07 +0800
Subject: [PATCH] feat: add percent options

---
 .../components/editColumn/PercentOptions.vue  | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 packages/nc-gui/components/project/spreadsheet/components/editColumn/PercentOptions.vue

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/PercentOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/PercentOptions.vue
new file mode 100644
index 0000000000..5eb8e9b5e2
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/PercentOptions.vue
@@ -0,0 +1,68 @@
+<template>
+  <v-row class="percent-wrapper">
+    <!-- TODO: i18n -->
+    <v-autocomplete
+      v-model="colMeta.percentOption"
+      hide-details
+      class="caption ui-type nc-ui-dt-dropdown"
+      label="Precision"
+      dense
+      outlined
+      item-value="id"
+      item-text="title"
+      :items="percentOptionsList"
+    >
+      <template #selection="{ item }">
+        <div>
+          <span class="caption grey--text text--darken-4">
+            {{ item.title }}
+          </span>
+        </div>
+      </template>
+      <template #item="{ item }">
+        <div class="caption">
+          {{ item.title }}
+        </div>
+      </template>
+    </v-autocomplete>
+  </v-row>
+</template>
+
+<script>
+import { percentOptions } from '~/helpers/percentHelper'
+
+export default {
+  name: 'PercentOptions',
+  props: ['column', 'meta', 'value'],
+  data: () => ({
+    percentOptionsList: percentOptions.map(o => ({
+      ...o,
+      title: o.title
+    })),
+    colMeta: {
+      percentOption: 0
+    }
+  }),
+  watch: {
+    value() {
+      this.colMeta = this.value || {}
+    },
+    colMeta(v) {
+      this.$emit('input', v)
+    }
+  },
+  created() {
+    this.colMeta = this.value ? { ...this.value } : { ...this.colMeta }
+  }
+}
+</script>
+
+<style scoped>
+.percent-wrapper {
+  margin: 0;
+}
+
+.percent-wrapper .caption:first-child {
+  margin: -10px 0px 10px 5px;
+}
+</style>