@cloudron/pankow 3.1.8

package/.gitlab-ci.yml

@@ -0,0 +1,30 @@
+# jobs (defined using a top level key) belong to a stage. the jobs of a stage are run in parallel.
+# stages are run in sequence.
+# artifacts are attached to the jobs on success (downloadable from UI)
+# cache is preserved between pipelines (and not meant for jobs)
+
+default:
+  image: cloudron/base:5.0.0@sha256:04fd70dbd8ad6149c19de39e35718e024417c3e01dc9c6637eaf4a41ec4e596c
+
+variables:
+  DEMO_SERVER: pankow.nebulon.de
+
+build-gallery:
+  stage: build
+  script:
+    - npm install && npm run build
+  artifacts:
+    paths:
+      - gallery/dist/
+    expire_in: 2 hours
+
+deploy-gallery:
+  stage: deploy
+  script:
+    - npm install -g cloudron-surfer && surfer put --server ${DEMO_SERVER} --token ${PANKOW_DEMO_SURFER_TOKEN} --delete gallery/dist/* /
+  only:
+    - main
+
+stages:
+  - build
+  - deploy

package/.jshintrc

@@ -0,0 +1,8 @@
+{
+	"node": true,
+	"browser": true,
+	"unused": true,
+	"esversion": 11,
+	"globalstrict": false,
+	"predef": [ "angular", "$", "describe", "it", "before", "after" ]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Cloudron UG
+
+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.

package/README.md

@@ -0,0 +1,20 @@
+## Pankow
+
+Pankow is the UI component library for scaffolding Cloudron apps. It is based on [Vue.js](https://vuejs.org/) using [Vite](https://vitejs.dev/) as the bundler.
+The main use-case is to provide common Cloudron related UI compents like a login screen and common layout with header, body and footers.
+
+### Getting started
+
+Open a terminal in the Cloudron app main folder. Run the following command to init a subfolder where the UI project will be contained.
+For consistency the project name here is `frontend`, so make sure to specify that as the first question asked in the init wizard.
+All other options can be accpeted as defaults.
+
+```sh
+npm init vue@latest
+cd frontend
+npm install
+npm run dev
+```
+
+This will install and build the initial project with the default Vue.js Hello World page.
+

package/components/BottomBar.vue

@@ -0,0 +1,22 @@
+<script setup>
+</script>
+
+<template>
+  <div class="pankow-bottom-bar">
+    <slot>
+      © 2024  &nbsp;  <a href="https://cloudron.io" rel="noopener noreferrer" target="_blank">Cloudron</a> &nbsp; &nbsp; &nbsp;  <a href="https://forum.cloudron.io" rel="noopener noreferrer" target="_blank">Forum <i class="fa fa-comments"></i></a>
+    </slot>
+  </div>
+</template>
+
+<style>
+
+.pankow-bottom-bar {
+  width: 100%;
+  background-color: var(--pankow-color-background);
+  text-align: center;
+  box-shadow: 0 2px 5px rgba(0,0,0,.1);
+  padding: 5px 10px;
+}
+
+</style>

package/components/Breadcrumb.vue

@@ -0,0 +1,64 @@
+<script setup>
+
+import Icon from './Icon.vue';
+
+const emit = defineEmits([ 'click' ]);
+const props = defineProps({
+  items: {
+    type: Array
+  },
+  home: {
+    type: Object,
+    default: {
+      label: 'Home',
+      icon: 'fa-solid fa-house',
+      route: null,
+      action(item, event) {}
+    }
+  }
+});
+
+function onClick() {
+  emit('click');
+}
+
+</script>
+
+<template>
+  <div class="pankow-breadcrumb">
+    <a class="pankow-breadcrumb-item" :href="home.route" @click="home.action ? home.action(home, $event) : null" @keydown.enter="home.action ? home.action(home, $event) : null" tabindex="0">
+      <Icon :class="home.icon"/> {{ home.label }}
+    </a>
+    <span v-for="item in items">
+      <Icon icon="fa-solid fa-chevron-right" class="pankow-breadcrumb-separator"/>
+      <a class="pankow-breadcrumb-item" :href="item.route" @click="item.action ? item.action(home, $event) : null" @keydown.enter="item.action ? item.action(home, $event) : null" tabindex="0">
+        <Icon v-if="item.icon" :class="item.icon"/> {{ item.label }}
+      </a>
+    </span>
+  </div>
+</template>
+
+<style>
+
+.pankow-breadcrumb {
+  display: block;
+  overflow: auto;
+  white-space: nowrap;
+}
+
+.pankow-breadcrumb-separator {
+  margin: 0 8px;
+}
+
+.pankow-breadcrumb-item {
+  display: inline-block;
+  margin: 4px;
+  user-select: none;
+}
+
+.pankow-breadcrumb-item:hover {
+  color: var(--pankow-color-primary);
+  cursor: pointer;
+}
+
+</style>

package/components/Button.vue

@@ -0,0 +1,243 @@
+<script setup>
+
+import { useTemplateRef } from 'vue';
+import Menu from './Menu.vue';
+import Icon from './Icon.vue';
+import Spinner from './Spinner.vue';
+
+const emit = defineEmits([ 'click' ]);
+const props = defineProps({
+  icon: String,
+  href: String,
+  target: String,
+  iconRight: String,
+  menu: Array,
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  showDropdown: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const elem = useTemplateRef('elem');
+const menuItem = useTemplateRef('menuItem');
+
+function onClick(event) {
+  if (props.disabled) return;
+
+  if (props.menu) {
+    if (menuItem.value.isOpen) menuItem.value.close();
+    else menuItem.value.open(event, elem.value);
+  } else {
+    emit('click', event, elem.value);
+  }
+}
+
+</script>
+
+<template>
+  <component ref="elem" :is="href ? 'a' : 'div'" class="pankow-button" role="button" type="button" :class="{ 'pankow-button-disabled': disabled }" @click="onClick" @keydown.enter="onClick" :href="disabled ? null : href" :target="target" tabindex="0">
+    <Menu ref="menuItem" :model="menu" v-if="menu"></Menu>
+    <Spinner v-show="loading" style="stroke: white;" :class="{ 'pankow-button-icon-with-text': $slots['default'] }"/>
+    <Icon v-show="!loading && icon" :icon="icon" :class="{ 'pankow-button-icon-with-text': $slots['default'] }" />
+    <slot></slot>
+    <Icon v-show="menu && showDropdown" icon="fa-solid fa-chevron-down"  class="pankow-button-icon-right-with-text" />
+  </component>
+</template>
+
+<style>
+
+.pankow-button {
+  font-weight: 400;
+  font-size: 14px;
+  color: white;
+  user-select: none;
+  white-space: nowrap;
+  text-align: center;
+  border: none;
+  padding: var(--pankow-input-vertial-padding) max(12px, var(--pankow-input-horizontal-padding));
+  border-radius: var(--pankow-border-radius);
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background 250ms, border-color 250ms;
+  min-width: 100px;
+}
+
+.pankow-button[tool] {
+  min-width: auto;
+}
+
+.pankow-button-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pankow-button-icon-with-text {
+  margin-right: 7px;
+}
+
+.pankow-button-icon-right-with-text {
+  padding-left: 7px;
+}
+
+.pankow-button[small] {
+  font-size: 12px;
+  padding: 3px 6px;
+}
+
+.pankow-button[large] {
+  font-size: 24px;
+  padding: 8px 16px;
+}
+
+.pankow-button[outline] {
+  background: transparent;
+}
+
+.pankow-button:hover,
+.pankow-button:active,
+.pankow-button:focus,
+.pankow-button[primary]:hover,
+.pankow-button[primary]:active,
+.pankow-button[primary]:focus,
+.pankow-button[danger]:hover,
+.pankow-button[danger]:active,
+.pankow-button[danger]:focus,
+.pankow-button[success]:hover,
+.pankow-button[success]:active,
+.pankow-button[success]:focus,
+.pankow-button[secondary]:hover,
+.pankow-button[secondary]:active,
+.pankow-button[secondary]:focus {
+  text-decoration: none;
+}
+
+/* primary  */
+.pankow-button {
+  background: var(--pankow-color-primary);
+}
+
+.pankow-button[outline] {
+  border-color: var(--pankow-color-primary);
+  color: var(--pankow-color-primary);
+}
+
+.pankow-button[plain] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--pankow-color-primary);
+}
+
+.pankow-button:hover,
+.pankow-button[outline]:hover,
+.pankow-button[plain]:hover {
+  background: var(--pankow-color-primary-hover);
+  color: white;
+}
+
+.pankow-button:active:not(.pankow-button-disabled),
+.pankow-button[outline]:active:not(.pankow-button-disabled) {
+  background: var(--pankow-color-primary-active);
+  border-color: var(--pankow-color-primary-active);
+}
+
+/* danger */
+.pankow-button[danger] {
+  background: var(--pankow-color-danger);
+}
+
+.pankow-button[danger][outline] {
+  background: transparent;
+  border-color: var(--pankow-color-danger);
+  color: var(--pankow-color-danger);
+}
+
+.pankow-button[danger][plain] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--pankow-color-danger);
+}
+
+.pankow-button[danger]:hover,
+.pankow-button[danger][outline]:hover,
+.pankow-button[danger][plain]:hover {
+  background: var(--pankow-color-danger-hover);
+  color: white;
+}
+
+.pankow-button[danger]:active:not(.pankow-button-disabled),
+.pankow-button[danger][outline]:active:not(.pankow-button-disabled) {
+  background: var(--pankow-color-danger-active);
+  border-color: var(--pankow-color-danger-active);
+}
+
+/* success */
+.pankow-button[success] {
+  background: var(--pankow-color-success);
+}
+
+.pankow-button[success][outline] {
+  background: transparent;
+  border-color: var(--pankow-color-success);
+  color: var(--pankow-color-success);
+}
+
+.pankow-button[success][plain] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--pankow-color-success);
+}
+
+.pankow-button[success]:hover,
+.pankow-button[success][plain]:hover,
+.pankow-button[success][outline]:hover {
+  background: var(--pankow-color-success-hover);
+  color: white;
+}
+
+.pankow-button[success]:active:not(.pankow-button-disabled),
+.pankow-button[success][outline]:active:not(.pankow-button-disabled) {
+  background: var(--pankow-color-success-active);
+  border-color: var(--pankow-color-success-active);
+}
+
+/* secondary */
+.pankow-button[secondary] {
+  background: var(--pankow-color-secondary);
+}
+
+.pankow-button[secondary][outline] {
+  background: transparent;
+  border-color: var(--pankow-color-secondary);
+  color: var(--pankow-color-secondary);
+}
+
+.pankow-button[secondary][plain] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--pankow-color-secondary);
+}
+
+.pankow-button[secondary]:hover,
+.pankow-button[secondary][plain]:hover,
+.pankow-button[secondary][outline]:hover {
+  background: var(--pankow-color-secondary-hover);
+  color: white;
+}
+
+.pankow-button[secondary]:active:not(.pankow-button-disabled),
+.pankow-button[secondary][outline]:active:not(.pankow-button-disabled) {
+  background: var(--pankow-color-secondary-active);
+  border-color: var(--pankow-color-secondary-active);
+}
+
+</style>

package/components/ButtonGroup.vue

@@ -0,0 +1,37 @@
+<script setup>
+</script>
+
+<template>
+  <div class="pankow-button-group">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+
+.pankow-button-group {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.pankow-button-group > .pankow-button {
+  border-radius: 0;
+  margin-left: 0;
+  margin-right: 0;
+  border-left-width: 0.5px;
+  border-right-width: 0.5px;
+}
+
+.pankow-button-group > .pankow-button:first-child {
+  border-top-left-radius: var(--pankow-border-radius);
+  border-bottom-left-radius: var(--pankow-border-radius);
+  border-left-width: 1px;
+}
+
+.pankow-button-group > .pankow-button:last-child {
+  border-top-right-radius: var(--pankow-border-radius);
+  border-bottom-right-radius: var(--pankow-border-radius);
+  border-right-width: 1px;
+}
+
+</style>

package/components/Checkbox.vue

@@ -0,0 +1,112 @@
+<script setup>
+
+import { uuidv4 } from '../utils.js';
+
+const props = defineProps({
+  label: String,
+  id: String,
+  disabled: null
+});
+
+const model = defineModel({ type: Boolean });
+
+const internalId = uuidv4();
+
+</script>
+
+<template>
+  <span class="pankow-checkbox">
+    <input :id="id || internalId" class="pankow-checkbox-input" type="checkbox" v-model="model" :disabled="disabled"/>
+    <slot>
+      <label :for="id || internalId" class="pankow-checkbox-input-label">{{ label }}</label>
+    </slot>
+  </span>
+</template>
+
+<style>
+
+.pankow-checkbox {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin: 4px 0;
+}
+
+.pankow-checkbox-input-label {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  margin: 0;
+  margin-left: 6px;
+}
+
+.pankow-checkbox-input {
+  appearance: none;
+  height: 19px;
+  width: 19px;
+  outline: none;
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid #ced4da;
+  background: var(--state-background, white);
+  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
+  border-radius: 3px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-checkbox-input {
+    color: var(--pankow-color-light-dark);
+    background: var(--pankow-color-dark);
+    border: 1px solid var(--pankow-color-dark);
+  }
+}
+
+.pankow-checkbox-input:after {
+  content: "";
+  display: block;
+  position: absolute;
+  opacity: var(--state-opacity, 0);
+  width: 5px;
+  height: 8px;
+  border: 2px solid white;
+  border-top: 0;
+  border-left: 0;
+  left: 6px;
+  top: 3px;
+  transform: rotate(43deg);
+}
+
+.pankow-checkbox-input:checked {
+  --state-background: var(--pankow-color-primary);
+  --state-opacity: 1;
+  border: 1px solid transparent;
+}
+
+.pankow-checkbox-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pankow-checkbox-input:disabled + label {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pankow-checkbox-input:hover {
+  border: 1px solid var(--pankow-color-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-checkbox-input:hover {
+    border: 1px solid var(--pankow-color-light-dark);
+  }
+}
+
+.pankow-checkbox-input:focus {
+  border: 1px solid var(--pankow-color-primary);
+}
+
+</style>