Showcase form

opendata.swiss/ui/.gitignore

@@ -18,3 +18,6 @@ logs
 .DS_Store
 .fleet
 .idea
+
+# ignore images from uploads folder
+public/img/uploads/

opendata.swiss/ui/app/assets/main.css

@@ -31,3 +31,7 @@
 .v-select {
   background-color: white;
 }
+
+.form__group__input:has(> *:user-invalid), .form__group__select:has(> select:invalid) {
+  color: #b20000;
+}

opendata.swiss/ui/app/components/OdsButton.vue

@@ -1,15 +1,15 @@
 <template>
   <button
-  type="button"
-  :class="['btn', 'btn--base', classes]"
-  :aria-label="title"
-  :title="title"
+    :type="!submit ? 'button' : undefined"
+    :class="['btn', 'btn--base', classes]"
+    :aria-label="title"
+    :title="title"
   >
     <slot name="icon">
-      <SvgIcon v-if="icon" :icon="icon" :size="size" class="btn__icon" />
+      <SvgIcon v-if="icon" :icon="icon" :size="size" class="btn__icon"/>
     </slot>
     <span class="btn__text">
-      <a v-if="href" :href="href" >
+      <a v-if="href" :href="href">
         <slot>{{ title }}</slot>
       </a>
       <slot v-else>{{ title }}</slot>
@@ -30,6 +30,7 @@ const { title, iconOnly = false, ...props } = defineProps<{
   iconRight?: boolean
   icon?: string
   href?: string
+  submit?: boolean
 }>()
 
 const classes = computed(() => {

opendata.swiss/ui/app/components/OdsInput.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="form__group__input">
+    <label v-if="label" :for="id" :class="labelClasses">
+      {{ label }}<span v-if="required" class="form__group__required" />
+    </label>
+    <input
+      :id="id"
+      :type="type"
+      :class="classes"
+      :name="id"
+      :placeholder="placeholder"
+      :value="value"
+      :min="min"
+      :max="max"
+      :step="step"
+      :pattern="pattern"
+      :autocomplete="autocomplete"
+      :readonly="readonly"
+      :required="required"
+      :accept="accept"
+      @input.stop="onInput"
+    />
+    <div
+      v-if="message"
+      class="badge badge--sm"
+      :class="`badge--${messageType}`"
+    >
+      {{ message }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    validator: (prop) =>
+      [
+        'color',
+        'date',
+        'datetime-local',
+        'email',
+        'file',
+        'month',
+        'number',
+        'password',
+        'range',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'url',
+        'week',
+        'submit',
+      ].includes(prop as string),
+    default: () => 'text',
+  },
+  variant: {
+    type: String,
+    validator: (prop) => ['outline', 'negative'].includes(prop as string),
+    default: () => 'outline',
+  },
+  message: {
+    type: String,
+    default: () => undefined,
+  },
+  onInput: {
+    type: Function as PropType<(event: Event) => void>,
+    default: () => ({}),
+  },
+  messageType: {
+    type: String,
+    validator: (prop) =>
+      ['error', 'warning', 'success', 'info'].includes(prop as string),
+    default: () => 'error',
+  },
+  size: {
+    type: String,
+    validator: (prop) => ['sm', 'base', 'lg'].includes(prop as string),
+    default: () => undefined,
+  },
+  label: {
+    type: String,
+    default: () => undefined,
+  },
+  hideLabel: {
+    type: Boolean,
+    default: () => false,
+  },
+  placeholder: {
+    type: String,
+    default: () => undefined,
+  },
+  value: {
+    type: String,
+    default: () => undefined,
+  },
+  id: {
+    type: String,
+    default: () => undefined,
+  },
+  min: {
+    type: Number,
+    default: () => undefined,
+  },
+  max: {
+    type: Number,
+    default: () => undefined,
+  },
+  step: {
+    type: Number,
+    default: () => undefined,
+  },
+  pattern: {
+    type: String,
+    default: () => undefined,
+  },
+  autocomplete: {
+    type: String,
+    default: () => undefined,
+  },
+  readonly: {
+    type: Boolean,
+    default: () => false,
+  },
+  required: {
+    type: Boolean,
+    default: () => false,
+  },
+  accept: {
+    type: String,
+    default: () => undefined,
+  }
+})
+
+const classes = computed(() => {
+  let base = ''
+  if (props.variant) base += `input--${props.variant} `
+  if (props.size) base += `input--${props.size} `
+  if (props.message) base += `input--${props.messageType} `
+  if (props.type === 'submit') base += 'input--submit'
+  return base
+})
+
+const labelClasses = computed(() => {
+  let base = ''
+  if (props.variant === 'negative') base += `text--negative `
+  if (props.size) base += `text--${props.size} `
+  if (props.hideLabel) base += `sr-only `
+  if (props.required) base += `text--asterisk `
+  return base
+})
+</script>

opendata.swiss/ui/app/components/OdsNotificationBanner.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    :open="open || undefined"
+    :class="['notification-banner', 'notification', `notification--${type}`]"
+    :style="{
+      transitionDuration: `${closeDuration}`,
+    }"
+  >
+    <div
+      class="notification-banner__wrapper"
+      :style="{
+        transitionDelay: `${closeDuration}`,
+      }"
+    >
+      <p class="notification-banner__infos">
+        <slot />
+      </p>
+      <slot name="buttons" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { open = true, closeDuration = '0.3s' } = defineProps<{
+  type: 'info' | 'success' | 'warning' | 'error'
+  open?: boolean
+  closeDuration?: string
+}>()
+</script>
+
+<style scoped>
+.notification-banner {
+  display: block;
+  transition-property: padding, opacity;
+  transition-timing-function: ease-in-out, ease-in-out;
+}
+.notification-banner:not([open]) {
+  padding: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.notification-banner__wrapper {
+  transition-property: height;
+  transition-duration: 0s;
+}
+.notification-banner:not([open]) .notification-banner__wrapper {
+  height: 0;
+}
+</style>

opendata.swiss/ui/app/components/OdsTextarea.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="form__group__input">
+    <label v-if="label" :for="id" :class="labelClasses">
+      {{ label }}
+    </label>
+    <textarea
+      :id="id"
+      :class="classes"
+      :name="id"
+      :rows="rows"
+      :cols="cols"
+      :maxlength="maxlength"
+      :minlength="minlength"
+      :placeholder="placeholder"
+      :required="required"
+    />
+    <div
+      v-if="message"
+      class="badge badge--sm"
+      :class="`badge--${messageType}`"
+    >
+      {{ message }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  variant: {
+    type: String,
+    validator: (prop) => ['outline', 'negative'].includes(prop as string),
+    default: () => undefined,
+  },
+  size: {
+    type: String,
+    validator: (prop) => ['sm', 'base', 'lg'].includes(prop as string),
+    default: () => undefined,
+  },
+  id: {
+    type: String,
+    default: () => undefined,
+  },
+  name: {
+    type: String,
+    default: () => undefined,
+  },
+  label: {
+    type: String,
+    default: () => undefined,
+  },
+  placeholder: {
+    type: String,
+    default: () => undefined,
+  },
+  rows: {
+    type: Number,
+    default: () => 4,
+  },
+  cols: {
+    type: Number,
+    default: () => 50,
+  },
+  message: {
+    type: String,
+    default: () => undefined,
+  },
+  messageType: {
+    type: String,
+    validator: (prop) =>
+      ['error', 'warning', 'success', 'info'].includes(prop as string),
+    default: () => undefined,
+  },
+  required: {
+    type: Boolean,
+    default: () => false,
+  },
+  resizable: {
+    type: Boolean,
+    default: () => true,
+  },
+  maxlength: {
+    type: Number,
+    default: () => undefined,
+  },
+  minlength: {
+    type: Number,
+    default: () => undefined,
+  },
+})
+
+const classes = computed(() => {
+  let base = ''
+  if (props.variant) base += `input--${props.variant} `
+  if (props.size) base += `input--${props.size} `
+  if (props.messageType) base += `input--${props.messageType} `
+  if (!props.resizable) base += 'textarea--public'
+  return base
+})
+
+const labelClasses = computed(() => {
+  let base = ''
+  if (props.variant === 'negative') base += `text--negative `
+  if (props.size) base += `text--${props.size} `
+  if (props.required) base += `text--asterisk `
+  return base
+})
+</script>

opendata.swiss/ui/app/components/dataset/OdsMultiSelect.vue

@@ -44,9 +44,15 @@
        <template #option="option">
         <span>
           {{ option.title }}
-          <span style="float: right; color: #888;">({{ option.count }})</span>
+          <span v-if="option.count" style="float: right; color: #888;">({{ option.count }})</span>
         </span>
       </template>
+        <template
+          #selected-option="option"
+        >
+          {{ option.title }}
+          <input type="hidden" :name="name" :value="option.id">
+        </template>
       </VSelect>
       <div class="select__icon">
         <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
@@ -226,3 +232,9 @@ watch(
   }
 )
 </script>
+
+<style scoped>
+input.vs__selected {
+  cursor: default;
+}
+</style>

opendata.swiss/ui/app/constants/navigation-items.ts

@@ -11,7 +11,7 @@ export const APP_NAVIGATION_ITEMS: OdsNavTabItem[] = [
   },
   {
     label: 'message.header.navigation.showcases',
-    to: '/showcases'
+    to: '/showcases',
   },
   {
     label: 'message.header.navigation.blog',