[DBX-6933] Feat: Support custom metadata element

dbml-playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbml/playground",
-  "version": "8.4.0-alpha.1",
+  "version": "8.3.1-custom-metadata.2",
   "description": "Interactive playground for debugging and visualizing the DBML parser pipeline",
   "author": "Holistics <dev@holistics.io>",
   "license": "Apache-2.0",
@@ -25,8 +25,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@dbml/core": "^8.4.0-alpha.1",
-    "@dbml/parse": "^8.4.0-alpha.1",
+    "@dbml/core": "^8.3.1-custom-metadata.2",
+    "@dbml/parse": "^8.3.1-custom-metadata.2",
     "@phosphor-icons/vue": "^2.2.0",
     "floating-vue": "^5.2.2",
     "lodash-es": "^4.17.21",

dbml-playground/src/components/panes/output/tabs/DatabaseTab.vue

@@ -59,61 +59,69 @@
               <div
                 v-for="(col, ci) in table.fields"
                 :key="ci"
-                class="flex items-center gap-1.5 py-1 border-b border-gray-50 hover:bg-blue-50"
-                :style="{ paddingLeft: '40px', paddingRight: '12px' }"
               >
-                <VTooltip
-                  placement="right"
-                  :distance="6"
-                >
-                  <PhListBullets class="w-3 h-3 text-gray-500 flex-shrink-0" />
-                  <template #popper>
-                    <span class="text-xs">Column</span>
-                  </template>
-                </VTooltip>
-                <span class="text-gray-700">{{ col.name }}</span>
-                <PhKey
-                  v-if="col.pk"
-                  class="w-3 h-3 text-blue-400 flex-shrink-0"
-                />
-                <span
-                  v-if="col.not_null"
-                  class="text-[10px] px-1 bg-gray-100 text-gray-500 rounded font-medium leading-[14px]"
-                >NN</span>
-                <span
-                  v-if="col.unique"
-                  class="text-[10px] px-1 bg-purple-100 text-purple-600 rounded font-medium leading-[14px]"
-                >U</span>
-                <span
-                  v-if="col.increment"
-                  class="text-[10px] px-1 bg-gray-100 text-gray-500 rounded font-medium leading-[14px]"
-                >AI</span>
-                <VDropdown
-                  v-if="colRefs(table, col).length"
-                  placement="bottom-start"
-                  :distance="4"
-                  :arrow-padding="0"
-                  no-auto-focus
-                  @click.stop
+                <div
+                  class="flex items-center gap-1.5 py-1 border-b border-gray-50 hover:bg-blue-50"
+                  :style="{ paddingLeft: '40px', paddingRight: '12px' }"
                 >
-                  <PhLink class="w-3 h-3 text-blue-400 flex-shrink-0 cursor-pointer hover:text-blue-600" />
-                  <template #popper>
-                    <div
-                      class="py-1 min-w-[180px] max-w-[320px]"
-                      style="font-family: 'SF Mono', Monaco, Consolas, monospace;"
-                    >
+                  <VTooltip
+                    placement="right"
+                    :distance="6"
+                  >
+                    <PhListBullets class="w-3 h-3 text-gray-500 flex-shrink-0" />
+                    <template #popper>
+                      <span class="text-xs">Column</span>
+                    </template>
+                  </VTooltip>
+                  <span class="text-gray-700">{{ col.name }}</span>
+                  <PhKey
+                    v-if="col.pk"
+                    class="w-3 h-3 text-blue-400 flex-shrink-0"
+                  />
+                  <span
+                    v-if="col.not_null"
+                    class="text-[10px] px-1 bg-gray-100 text-gray-500 rounded font-medium leading-[14px]"
+                  >NN</span>
+                  <span
+                    v-if="col.unique"
+                    class="text-[10px] px-1 bg-purple-100 text-purple-600 rounded font-medium leading-[14px]"
+                  >U</span>
+                  <span
+                    v-if="col.increment"
+                    class="text-[10px] px-1 bg-gray-100 text-gray-500 rounded font-medium leading-[14px]"
+                  >AI</span>
+                  <VDropdown
+                    v-if="colRefs(table, col).length"
+                    placement="bottom-start"
+                    :distance="4"
+                    :arrow-padding="0"
+                    no-auto-focus
+                    @click.stop
+                  >
+                    <PhLink class="w-3 h-3 text-blue-400 flex-shrink-0 cursor-pointer hover:text-blue-600" />
+                    <template #popper>
                       <div
-                        v-for="(entry, ri) in colRefs(table, col)"
-                        :key="ri"
-                        class="flex items-center gap-2 px-3 py-1 text-xs"
+                        class="py-1 min-w-[180px] max-w-[320px]"
+                        style="font-family: 'SF Mono', Monaco, Consolas, monospace;"
                       >
-                        <span class="text-blue-500 font-mono font-bold flex-shrink-0">{{ entry.arrow }}</span>
-                        <span class="text-blue-600">{{ entry.otherLabel }}</span>
+                        <div
+                          v-for="(entry, ri) in colRefs(table, col)"
+                          :key="ri"
+                          class="flex items-center gap-2 px-3 py-1 text-xs"
+                        >
+                          <span class="text-blue-500 font-mono font-bold flex-shrink-0">{{ entry.arrow }}</span>
+                          <span class="text-blue-600">{{ entry.otherLabel }}</span>
+                        </div>
                       </div>
-                    </div>
-                  </template>
-                </VDropdown>
-                <span class="text-green-700 ml-auto">{{ col.type.type_name }}</span>
+                    </template>
+                  </VDropdown>
+                  <span class="text-green-700 ml-auto">{{ col.type.type_name }}</span>
+                </div>
+                <!-- Column metadata -->
+                <DbMetadata
+                  :metadata="col.metadata"
+                  :indent="56"
+                />
               </div>
               <!-- Indexes -->
               <template v-if="table.indexes.length">
@@ -202,6 +210,11 @@
                   </div>
                 </div>
               </template>
+              <!-- Table metadata -->
+              <DbMetadata
+                :metadata="table.metadata"
+                :indent="40"
+              />
             </div>
           </div>
         </DbSection>
@@ -298,20 +311,27 @@
           <div
             v-for="(tg, tgi) in database.tableGroups"
             :key="tgi"
-            class="flex items-center gap-2 py-1 border-b border-gray-50 hover:bg-blue-50"
-            :style="{ paddingLeft: '20px', paddingRight: '12px' }"
           >
-            <VTooltip
-              placement="right"
-              :distance="6"
+            <div
+              class="flex items-center gap-2 py-1 border-b border-gray-50 hover:bg-blue-50"
+              :style="{ paddingLeft: '20px', paddingRight: '12px' }"
             >
-              <PhFolder class="w-3.5 h-3.5 text-yellow-600 flex-shrink-0" />
-              <template #popper>
-                <span class="text-xs">TableGroup</span>
-              </template>
-            </VTooltip>
-            <span class="text-yellow-700">{{ tg.name }}</span>
-            <span class="text-gray-400 text-xs ml-auto">{{ tg.tables.length }} tables</span>
+              <VTooltip
+                placement="right"
+                :distance="6"
+              >
+                <PhFolder class="w-3.5 h-3.5 text-yellow-600 flex-shrink-0" />
+                <template #popper>
+                  <span class="text-xs">TableGroup</span>
+                </template>
+              </VTooltip>
+              <span class="text-yellow-700">{{ tg.name }}</span>
+              <span class="text-gray-400 text-xs ml-auto">{{ tg.tables.length }} tables</span>
+            </div>
+            <DbMetadata
+              :metadata="tg.metadata"
+              :indent="36"
+            />
           </div>
         </DbSection>
 
@@ -408,19 +428,26 @@
           <div
             v-for="(note, ni) in database.notes"
             :key="ni"
-            class="flex items-center gap-2 py-1 border-b border-gray-50 hover:bg-blue-50"
-            :style="{ paddingLeft: '20px', paddingRight: '12px' }"
           >
-            <VTooltip
-              placement="right"
-              :distance="6"
+            <div
+              class="flex items-center gap-2 py-1 border-b border-gray-50 hover:bg-blue-50"
+              :style="{ paddingLeft: '20px', paddingRight: '12px' }"
             >
-              <PhNote class="w-3.5 h-3.5 text-yellow-500 flex-shrink-0" />
-              <template #popper>
-                <span class="text-xs">Sticky Note</span>
-              </template>
-            </VTooltip>
-            <span class="text-blue-500">{{ note.name }}</span>
+              <VTooltip
+                placement="right"
+                :distance="6"
+              >
+                <PhNote class="w-3.5 h-3.5 text-yellow-500 flex-shrink-0" />
+                <template #popper>
+                  <span class="text-xs">Sticky Note</span>
+                </template>
+              </VTooltip>
+              <span class="text-blue-500">{{ note.name }}</span>
+            </div>
+            <DbMetadata
+              :metadata="note.metadata"
+              :indent="36"
+            />
           </div>
         </DbSection>
 
@@ -561,6 +588,7 @@ type IndexEntry = Database['tables'][number]['indexes'][number];
 
 import DbSection from './common/DbSection.vue';
 import DbBadge from './common/DbBadge.vue';
+import DbMetadata from './common/DbMetadata.vue';
 
 const {
   database,

dbml-playground/src/components/panes/output/tabs/common/DbMetadata.vue

@@ -0,0 +1,56 @@
+<template>
+  <div v-if="entries.length">
+    <div
+      class="flex items-center gap-1.5 py-[3px] border-b border-gray-50 cursor-pointer select-none hover:bg-yellow-50"
+      :style="{ paddingLeft: `${indent}px`, paddingRight: '12px' }"
+      @click="open = !open"
+    >
+      <PhCaretRight
+        class="w-3 h-3 text-gray-400 transition-transform duration-100 flex-shrink-0"
+        :class="open ? 'rotate-90' : ''"
+      />
+      <VTooltip
+        placement="right"
+        :distance="6"
+      >
+        <PhCode class="w-3 h-3 text-yellow-500 flex-shrink-0" />
+        <template #popper>
+          <span class="text-xs">Metadata</span>
+        </template>
+      </VTooltip>
+      <span class="text-gray-700 font-medium">metadata</span>
+      <span class="text-gray-400 text-xs ml-auto">{{ entries.length }} {{ entries.length === 1 ? 'key' : 'keys' }}</span>
+    </div>
+    <!-- One row per key-value pair -->
+    <template v-if="open">
+      <div
+        v-for="(entry, i) in entries"
+        :key="i"
+        class="flex items-center gap-2 py-[3px] border-b border-gray-50 hover:bg-yellow-50"
+        :style="{ paddingLeft: `${indent + 16}px`, paddingRight: '12px' }"
+      >
+        <span class="text-yellow-700 font-medium">{{ entry.key }}</span>
+        <span class="text-gray-700 truncate">{{ entry.value }}</span>
+        <span class="text-green-700 ml-auto">{{ entry.valueType }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { PhCode, PhCaretRight } from '@phosphor-icons/vue';
+
+const { metadata = {}, indent = 40 } = defineProps<{
+  metadata?: { [key: string]: unknown };
+  indent?: number;
+}>();
+
+const open = ref(false);
+
+const entries = computed(() => Object.entries(metadata ?? {}).map(([key, value]) => ({
+  key,
+  value: typeof value === 'string' ? value : JSON.stringify(value),
+  valueType: typeof value,
+})));
+</script>

dbml-playground/src/services/sample-content.ts

@@ -22,6 +22,15 @@ Enum post_status {
   draft
   published
   archived
+}
+
+Metadata Table public.users {
+  owner: 'data-team'
+  pii: true
+}
+
+Metadata Column public.users.email {
+  masking: partial
 }`;
 
 export interface SampleCategory {

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.4.0-alpha.1",
+  "version": "8.3.1-custom-metadata.2",
   "npmClient": "yarn",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

packages/dbml-cli/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@dbml/cli",
-  "version": "8.4.0-alpha.1",
+  "version": "8.3.1-custom-metadata.2",
   "description": "",
   "main": "lib/index.js",
   "license": "Apache-2.0",
@@ -32,9 +32,9 @@
   ],
   "dependencies": {
     "@babel/cli": "^7.21.0",
-    "@dbml/connector": "^8.4.0-alpha.1",
-    "@dbml/core": "^8.4.0-alpha.1",
-    "@dbml/parse": "^8.4.0-alpha.1",
+    "@dbml/connector": "^8.3.1-custom-metadata.1",
+    "@dbml/core": "^8.3.1-custom-metadata.2",
+    "@dbml/parse": "^8.3.1-custom-metadata.2",
     "bluebird": "^3.5.5",
     "chalk": "^2.4.2",
     "commander": "^2.20.0",

packages/dbml-connector/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@dbml/connector",
-  "version": "8.4.0-alpha.1",
+  "version": "8.3.1-custom-metadata.1",
   "description": "This package was created to fetch the schema JSON from many kind of databases.",
   "author": "huy.phung.sw@gmail.com",
   "license": "MIT",