Merge pull request #283 from ZenUml/add-tailwindcss

Add tailwindcss

package.json

@@ -38,6 +38,7 @@
     "@babel/polyfill": "^7.10.1",
     "@babel/preset-env": "^7.13.5",
     "@babel/runtime-corejs2": "^7.12.13",
+    "@tailwindcss/postcss7-compat": "^2.1.2",
     "@types/jest": "^24.0.19",
     "@types/lodash": "^4.14.168",
     "@types/node": "latest",
@@ -51,16 +52,19 @@
     "@vue/cli-service": "^4.5.11",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^1.1.3",
+    "autoprefixer": "^9",
     "babel-eslint": "^10.1.0",
     "core-js": "^3.8.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.6.0",
     "gauge-ts": "0.1.0",
     "node-sass": "^5.0.0",
+    "postcss": "^7",
     "regenerator-runtime": "^0.13.7",
     "sass-loader": "^10.1.0",
     "svg-url-loader": "^6.0.0",
     "taiko": "^1.2.2",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "terser-webpack-plugin": "^3.0.6",
     "typescript": "~3.9.3",
     "webpack": "^4.43.0",
@@ -95,11 +99,6 @@
       }
     ]
   },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",

postcss.config.js

@@ -0,0 +1,10 @@
+// ./postcss.config.js
+const autoprefixer = require('autoprefixer');
+const tailwindcss = require('tailwindcss');
+
+module.exports = {
+  plugins: [
+    tailwindcss,
+    autoprefixer,
+  ],
+};

src/components/SeqDiagram.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="sequence-diagram" ref="diagram" :style="{'padding-left': paddingLeft + 'px'}">
-    <life-line-layer :context="rootContext.head()"/>
-    <message-layer :context="rootContext.block()"/>
+  <div class="container mx-auto flex items-stretch">
+    <div class="sequence-diagram" ref="diagram" :style="{'padding-left': paddingLeft + 'px'}">
+      <life-line-layer :context="rootContext.head()"/>
+      <message-layer :context="rootContext.block()"/>
+    </div>
+    <div class="footer self-end text-xs text-gray-300 font-thin subpixel-antialiased">ZenUML@{{Version}}</div>
   </div>
 </template>
 
@@ -18,7 +21,7 @@
       MessageLayer
     },
     computed: {
-      ...mapGetters(['rootContext', 'generation', 'participants', 'lifelineLayout']),
+      ...mapGetters(['Version', 'rootContext', 'generation', 'participants', 'lifelineLayout']),
       starter() {
         return this.participants?.Starter()?.name
       },

src/index.css

@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;

src/index.ts

@@ -2,15 +2,19 @@ import _ from 'lodash'
 import {GroupContext, ParticipantContext, Participants, RootContext} from './parser/index.js'
 
 import SeqDiagram from './components/SeqDiagram.vue'
-
+// @ts-ignore
+import './index.css'
 import './components/Cosmetic.scss'
 import './components/theme-blue-river.scss'
 import {CodeRange} from './parser/CodeRange'
 import {LifelineLayout} from "@/components/lifeline/LifelineLayout";
 
+// @ts-ignore
+const Version = VERSION || ''
+// @ts-ignore
+const BuildTime = BUILD_TIME || ''
+
 const Store = (debounce?: number) => {
-  // @ts-ignore
-  // @ts-ignore
   return {
     state: {
       firstInvocations: {},
@@ -25,6 +29,8 @@ const Store = (debounce?: number) => {
       }
     },
     getters: {
+      Version: () => Version,
+      BuildTime: () => BuildTime,
       GroupContext: () => GroupContext,
       ParticipantContext: () => ParticipantContext,
       // We are using getters to avoid hard coding module's name ($store.Store.state)
@@ -99,12 +105,6 @@ const Store = (debounce?: number) => {
     strict: false,
   }
 };
-/* eslint-disable */
-// @ts-ignore
-const Version = VERSION || ''
-/* eslint-disable */
-// @ts-ignore
-const BuildTime = BUILD_TIME || ''
 export {
   Version,
   BuildTime,

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}