Merge branch 'Sprint/2020-14' into 'master'

Sprint/2020 14

See merge request coscine/vue/component-library!2

.browserslistrc

+> 1%
+last 2 versions
+not ie <= 8

.gitignore

+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+.rpt2_cache
\ No newline at end of file

.gitlab-ci.yml

+stages:
+  - test
+  - publish
+  - release
+  - pre_release
+
+before_script:
+    - npm install
+
+test:
+  stage: test
+  script:
+    - npm run build
+    - npm test
+  except:
+    refs:
+      - tags
+    variables:
+      - $GITLAB_USER_ID == $GIT_BOT_USER_ID
+
+publish:
+  stage: publish
+  script:
+    - npm run build
+    - npx semantic-release
+  only:
+    - master
+  except:
+    variables:
+      - $GITLAB_USER_ID == $GIT_BOT_USER_ID
+
+release:
+  stage: release
+  script:
+    - npm run build
+  artifacts:
+    paths:
+      - dist
+  only:
+    - tags
+
+pre_release:
+  stage: pre_release
+  script:
+    - npm run build
+  artifacts:
+    paths:
+      - dist
+  when: manual
+  except:
+    - tags
+    - master

.releaserc

+{
+  "plugins": [
+    ["@semantic-release/commit-analyzer", {
+      "preset": "eslint"
+    }],
+    ["@semantic-release/release-notes-generator", {
+      "preset": "eslint",
+    }],
+    ["@semantic-release/gitlab", {
+      "preset": "eslint",
+      "gitlabUrl": "https://git.rwth-aachen.de"
+    }],
+    ["@semantic-release/npm", {
+      "preset": "eslint",
+      "tarballDir": "dist",
+      "npmPublish": true
+    }],
+    ["@semantic-release/git", {
+      "preset": "eslint",
+      "assets": ["package.json"],
+      "message": "Chore: ${nextRelease.version}\n\n${nextRelease.notes}"
+    }]
+  ]
+}
\ No newline at end of file

LICENSE

+MIT License
+
+Copyright (c) 2020 RWTH Aachen University
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

bili.config.ts

+import { Config } from 'bili';
+
+const config: Config = {
+    banner: true,
+    plugins: {
+        vue: {
+            css: true,
+        },
+        typescript2: {
+            // Override the config in `tsconfig.json`
+            tsconfigOverride: {
+                include: ['src'],
+            },
+        },
+    },
+
+     // Let's take this opportunity to move the CLI flags here as well
+    input: 'src/index.ts',
+    output: {
+        format: ['cjs', 'esm'],
+        extractCSS: true,
+    },
+};
+
+export default config;

package.json

+{
+  "name": "@coscine/component-library",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "directories": {
+    "doc": "docs"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "tag": "latest"
+  },
+  "scripts": {
+    "dev": "vue serve CreateProject.vue",
+    "build": "bili",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "files": [
+    "dist/*"
+  ],
+  "dependencies": {
+    "@types/jquery": "^3.5.1",
+    "bootstrap-vue": "^2.16.0",
+    "jquery": "^3.5.1",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.21.0",
+    "vue-loading-overlay": "^3.3.3",
+    "vue-material-design-icons": "^4.8.0",
+    "vue-runtime-helpers": "^1.1.2"
+  },
+  "devDependencies": {
+    "@hutson/semantic-delivery-gitlab": "^9.1.0",
+    "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/gitlab": "^6.0.4",
+    "@semantic-release/npm": "^7.0.5",
+    "@semantic-release/release-notes-generator": "^9.0.1",
+    "@types/chai": "^4.2.12",
+    "@types/mocha": "^8.0.2",
+    "@vue/cli-plugin-babel": "^4.5.3",
+    "@vue/cli-plugin-typescript": "^4.5.3",
+    "@vue/cli-plugin-unit-mocha": "^4.5.3",
+    "@vue/cli-service": "^4.5.3",
+    "@vue/test-utils": "1.0.3",
+    "bili": "^5.0.5",
+    "chai": "^4.2.0",
+    "rollup": "^2.25.0",
+    "rollup-plugin-typescript2": "^0.27.2",
+    "rollup-plugin-vue": "^5.1.9",
+    "semantic-release": "^17.1.1",
+    "typescript": "^3.9.7",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.rwth-aachen.de/coscine/vue/component-library.git"
+  },
+  "license": "MIT"
+}

postcss.config.js

+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>ts-template</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but ts-template doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <script>
+      var coscine = coscine || {};
+      coscine.authorization = coscine.authorization || {};
+      coscine.authorization.bearer = "";
+    </script>
+    <CreateProject></CreateProject>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/components/Container/Card.vue

+<template>
+  <b-card class="coscine_card" @click.prevent="openCard()">
+    <b-row>
+      <div class="col icon_bar">
+        <button
+          v-if="editLink !== ''"
+          class="edit_button float-right"
+          @click.stop.prevent="editCard()"
+          style="float:right;"
+        >
+          <EditIcon title="" />
+        </button>
+      </div>
+    </b-row>
+    <b-row>
+      <div class="col">
+        <img class="card_icon" :src="imagePath" alt />
+      </div>
+    </b-row>
+    <b-row>
+      <div class="col">
+        <h6 v-b-tooltip.hover.bottom="displayName">{{ displayName }}</h6>
+      </div>
+    </b-row>
+  </b-card>
+</template>
+
+<script>
+import EditIcon from 'vue-material-design-icons/Pencil.vue';
+
+export default {
+  components: {
+    EditIcon,
+  },
+  props: {
+    displayName: {
+      default: 'Name',
+      type: String,
+    },
+    imagePath: {
+      default: null,
+      type: String,
+    },
+    editLink: {
+      default: '',
+      type: String,
+    },
+    cardLink: {
+      default: null,
+      type: String,
+    },
+  },
+  methods: {
+    openCard() {
+      window.location.href = this.cardLink;
+    },
+    editCard() {
+      window.location.href = this.editLink;
+    },
+  },
+};
+</script>
+<style>
+.coscine_card h6 {
+  margin: 0.3em;
+  color: #00549f;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: pre-wrap;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+div.card-body {
+  padding: 0 0 0 0;
+}
+div.card-body {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+div.container-fluid {
+  padding: 0;
+}
+.coscine_card .card_icon {
+  width: 3em;
+}
+.card.coscine_card {
+  cursor: pointer;
+  min-width: 9em;
+  min-height: 9em;
+  max-width: 9em;
+  max-height: 9em;
+  width: 9em;
+  height: 9em;
+  margin: 0.5em;
+  text-align: center;
+}
+.coscine_card .icon_bar {
+  height: 2em;
+  visibility: hidden;
+}
+.coscine_card:hover .icon_bar {
+  visibility: visible;
+}
+.coscine_card:hover {
+  background-color: #cccccc;
+}
+.coscine_card .icon_bar .edit_button {
+  padding: 0.1em;
+  width: auto;
+  height: auto;
+  font-size: 0em;
+  background-color: white;
+  color: #00549f;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  border-color: #00549f;
+  border-image: none;
+}
+.coscine_card .icon_bar .edit_button:hover {
+  color: white;
+  background-color: #00549f;
+}
+</style>

src/components/FormGroup/FormGroup.vue

+<template>
+  <b-form-group
+    :class="mandatory === true ? 'mandatory' : ''"
+    :label-for="labelFor"
+    :label-cols-sm="labelColsSm"
+    :label-align-sm="labelAlignSm"
+    :label="label"
+  >
+    <slot></slot>
+  </b-form-group>
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    mandatory: {
+      default: false,
+      type: Boolean,
+    },
+    labelFor: {
+      default: null,
+      type: String,
+    },
+    label: {
+      default: null,
+      type: String,
+    },
+    labelColsSm: {
+      default: '3',
+      type: String,
+    },
+    labelAlignSm: {
+      default: 'right',
+      type: String,
+    },
+  },
+};
+</script>
+<style>
+.form-group.mandatory .col-form-label:after {
+  content: ' *';
+  color: #a70619;
+}
+</style>

src/components/Headline/Headline.vue

+<template>
+  <h4 style="text-align: left;">{{ headline }}:</h4>
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    headline: {
+      default: null,
+      type: String,
+    },
+  },
+};
+</script>
+<style scopped>
+h4 {
+  color: #000;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+}
+</style>

src/components/Loader/LoadingSpinner.vue

+<template>
+  <Loading
+    id="LoadingSpinner"
+    :active.sync="isWaitingForResponse"
+    :can-cancel="false"
+    :height="128"
+    :width="128"
+    :z-index="1500"
+    :color="color"
+    :is-full-page="true"
+  >
+  <template v-if="textBefore !== ''" v-slot:before>
+    <h4>{{ textBefore }}</h4>
+  </template>
+  <template v-if="textAfter !== ''" v-slot:after>
+    <h4>{{ textAfter }}</h4>
+  </template>
+  </Loading>
+</template>
+
+<script lang="ts">
+import Loading from 'vue-loading-overlay';
+import 'vue-loading-overlay/dist/vue-loading.css';
+
+
+export default {
+  name: 'LoadingSpinner',
+  components: {
+    Loading,
+  },
+  props: {
+    color: {
+      default: '#00549f',
+      type: String,
+    },
+    isWaitingForResponse: {
+      default: false,
+      type: Boolean,
+    },
+    textBefore: {
+      default: '',
+      type: String,
+    },    
+    textAfter: {
+      default: '',
+      type: String,
+    },
+  },
+};
+</script>
+
+<style>
+.vld-icon{
+  width: 100%;
+}
+.vld-icon svg{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.vld-icon h4{
+  text-align: center;
+  max-width: 500px;
+}
+</style>

src/coscine.d.ts

+declare var coscine: {
+    language: {
+        locale: string,
+    },
+    i18n: {
+        'component-library': {},
+    },
+};
+
+declare var _spPageContextInfo: any;
+
+declare class Organization {
+    url: string;
+    displayName: string;
+}

src/index.ts

+export { default as CoscineLoadingSpinner } from './components/Loader/LoadingSpinner.vue';
+export { default as CoscineFormGroup } from './components/FormGroup/FormGroup.vue';
+export { default as CoscineCard } from './components/Container/Card.vue';
+export { default as CoscineHeadline } from './components/Headline/Headline.vue';

src/shims-tsx.d.ts

+import Vue, { VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

src/shims-vue.d.ts

+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}
+
+declare module '@coscine/api-connection';
+declare module 'vue-loading-overlay';

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "mocha",
+      "chai"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}