@kvass/widgets 1.0.17 → 1.1.0

package/src/project-portal/components/Card.ce.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="project-selector-card" :class="'project-selector-card--' + theme">
+    <component
+      :is="item.url && !['development'].includes(status) ? 'a' : 'div'"
+      class="project-selector-card__header"
+      :href="item.url"
+    >
+      <div v-if="!disableLabel" class="project-selector-card__header-category">
+        <Category :value="status" component="div" active />
+      </div>
+      <div
+        class="project-selector-card__header-cover"
+        :style="{ backgroundImage: `url(${cover})` }"
+      ></div>
+    </component>
+    <div class="project-selector-card__content">
+      <h2 class="project-selector-card__content-name">
+        {{ item.name }}
+      </h2>
+
+      <span
+        v-if="item.address && item.address.city"
+        class="project-selector-card__content-location"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="map-pin"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 288 512"
+        >
+          <path
+            fill="currentColor"
+            d="M112 316.94v156.69l22.02 33.02c4.75 7.12 15.22 7.12 19.97 0L176 473.63V316.94c-10.39 1.92-21.06 3.06-32 3.06s-21.61-1.14-32-3.06zM144 0C64.47 0 0 64.47 0 144s64.47 144 144 144 144-64.47 144-144S223.53 0 144 0zm0 76c-37.5 0-68 30.5-68 68 0 6.62-5.38 12-12 12s-12-5.38-12-12c0-50.73 41.28-92 92-92 6.62 0 12 5.38 12 12s-5.38 12-12 12z"
+          ></path>
+        </svg>
+
+        <span class="project-selector-card__content-city">
+          {{ item.address ? item.address.city : '' }}
+        </span>
+      </span>
+      <div
+        class="project-selector-card__content-intro"
+        v-html="item.intro"
+      ></div>
+      <a
+        v-if="item.url && !['development'].includes(status)"
+        class="project-selector-card__content-url"
+        :href="item.url"
+      >
+        Se prosjektet</a
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Category from './Category.ce.vue'
+import { ref } from 'vue'
+import { computed } from '@vue/reactivity'
+
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => ({}),
+  },
+  theme: {
+    type: String,
+    default: 'default',
+    enums: ['default', 'primary', 'flat'],
+  },
+  disableLabel: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const cover = computed(() => {
+  return (
+    getImage(
+      props.item.media && props.item.media.cover
+        ? props.item.media.cover
+        : null,
+    ) ||
+    getImage(
+      props.item.media && props.item.media.gallery
+        ? props.item.media.gallery
+        : null,
+    )
+  )
+})
+
+const status = computed(() => props.item.status)
+
+function getImage(value) {
+  if (!value || !value.length) return
+  let result = value.find((i) => {
+    if (i.type) return i.type.startsWith('image')
+    return i
+  })
+  if (!result) return
+  return result.url
+}
+</script>
+
+<style lang="scss">
+@import '../styles/components/card';
+</style>

package/src/project-portal/components/Category.ce.vue

@@ -0,0 +1,87 @@
+<template>
+  <component
+    class="category"
+    :class="[`category--${status}`, { 'category--active': active }]"
+    :is="component"
+  >
+    <span>{{ label }}</span>
+  </component>
+</template>
+
+<script setup>
+import { computed } from '@vue/reactivity'
+const themeMap = {
+  sale: 'sale',
+  upcoming: 'upcoming',
+  development: 'development',
+  sold: 'sold',
+}
+
+const categoryMap = {
+  sale: 'Til salgs',
+  upcoming: 'Kommer for salg',
+  development: 'Under utvikling',
+  all: 'Alle',
+  sold: 'Utsolgt',
+}
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: 'development',
+  },
+  component: {
+    type: String,
+    default: 'div',
+  },
+  active: {
+    type: Boolean,
+  },
+})
+
+const status = computed(() => {
+  if (themeMap[props.value]) return themeMap[props.value]
+  return 'default'
+})
+
+const label = computed(() => categoryMap[props.value])
+</script>
+
+<style lang="scss">
+.category {
+  @import '../styles/_variables';
+  padding: 1rem 1.5rem;
+  border: none;
+  border-radius: GetVariable('border-radius');
+  font-size: 0.9em;
+  background-color: GetVariable('light-grey');
+
+  &:focus-visible {
+    outline: 2px solid GetVariable('primary');
+    outline-offset: 2px;
+  }
+
+  &--primary.category--active {
+    background-color: GetVariable('primary');
+  }
+  &--sale.category--active {
+    background-color: GetVariable('sale');
+  }
+  &--sold.category--active {
+    background-color: GetVariable('sold');
+  }
+  &--development.category--active {
+    background-color: GetVariable('development');
+  }
+  &--upcoming.category--active {
+    background-color: GetVariable('upcoming');
+  }
+  &--default.category--active {
+    background-color: GetVariable('default');
+  }
+
+  &--active {
+    color: white;
+  }
+}
+</style>

package/src/project-portal/components/CategorySelector.ce.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="project-selector-category">
+    <CategoryTrigger
+      v-for="(item, index) in items"
+      :key="index"
+      class="project-selector-category__selector"
+      :value="item"
+      :active="value == item"
+      component="button"
+      @click.native="$emit('input', item)"
+    />
+  </div>
+</template>
+
+<script setup>
+import CategoryTrigger from './Category.ce.vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  value: {
+    type: String,
+  },
+})
+</script>
+
+<style lang="scss">
+.project-selector-category {
+  @import '../styles/_variables';
+
+  &__selector {
+    @media (max-width: $kvass-project-selector-resposive) {
+      width: 100%;
+    }
+    &:hover {
+      box-shadow: inset 0 0 0 2em rgba(74, 74, 74, 0.2);
+    }
+    cursor: pointer;
+  }
+}
+</style>

package/src/project-portal/components/ProjectTypeSelector.ce.vue

@@ -0,0 +1,70 @@
+<template>
+  <select class="project-type-selector__trigger">
+    <option
+      v-for="(item, index) in items"
+      :key="index"
+      :value="item"
+      @change="$emit('input', item)"
+      class="project-type-selector__dropdown-item"
+    >
+      {{ Capitalize(item === 'none' ? 'Velg type' : item) }}
+    </option>
+  </select>
+</template>
+
+<script setup>
+function Capitalize(value) {
+  return value.charAt(0).toUpperCase() + value.substring(1)
+}
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  value: {
+    type: String,
+  },
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_variables';
+.project-type-selector {
+  .elder-dropdown__content {
+    z-index: 11;
+  }
+  &__trigger {
+    // remove select arrow
+    appearance: none;
+
+    /* for IE 10 */
+    &:-ms-expand {
+      display: none;
+    }
+
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: GetVariable('border-radius');
+    font-size: 0.9em;
+    background-color: GetVariable('primary');
+    color: white;
+
+    @media (max-width: $kvass-project-selector-resposive) {
+      width: 100%;
+    }
+  }
+  &__dropdown-item {
+    &--selected {
+      background-color: rgba(143, 143, 143, 0.4);
+    }
+    text-align: center !important;
+    padding: 0.5rem 1.5rem;
+    font-size: 0.9em;
+
+    &:hover {
+      background-color: rgba(36, 36, 36, 0.4);
+    }
+  }
+}
+</style>

package/src/project-portal/main.js

@@ -0,0 +1,16 @@
+import { defineCustomElement } from 'vue'
+import App from './App.ce.vue'
+import Card from './components/Card.ce.vue'
+import Category from './components/Category.ce.vue'
+import CategorySelector from './components/CategorySelector.ce.vue'
+import ProjectTypeSelector from './components/ProjectTypeSelector.ce.vue'
+
+App.styles = [
+  ...App.styles,
+  ...Card.styles,
+  ...Category.styles,
+  ...CategorySelector.styles,
+  ...ProjectTypeSelector.styles,
+]
+
+customElements.define('kvass-project-portal', defineCustomElement(App))

package/src/project-portal/styles/_variables.scss

@@ -0,0 +1,19 @@
+$kvass-project-selector-resposive: 767px;
+
+$variables: (
+	'primary': #0523a8,
+	'secondary': #3d495b,
+	'background-color': #efeded,
+	'dark': #272727,
+	'sale': #2da71d,
+	'sold': #cc3434,
+	'upcoming': #e9b03d,
+	'development': #3d495b,
+	'border-radius': 3px,
+	'card-spacing': 2.5rem,
+	'light-grey': #efefef,
+);
+
+@function GetVariable($key) {
+	@return var(--kvass-project-selector-#{$key}, map-get($variables, $key));
+}

package/src/project-portal/styles/components/_card.scss

@@ -0,0 +1,178 @@
+@import '../_variables';
+
+.project-selector-card {
+  position: relative;
+  font-family: var(--kvass-project-selector-secondary-font, inherit);
+  display: flex;
+  flex-direction: column;
+  border-radius: GetVariable('border-radius');
+  background-color: white;
+  text-decoration: none;
+  color: inherit;
+  overflow: hidden;
+
+  $space: GetVariable('card-spacing');
+
+  &__header {
+    min-height: var(--kvass-project-selector-header-min-height, 250px);
+    background-color: GetVariable('dark');
+
+    @media (max-width: $kvass-project-selector-resposive) {
+      min-height: var(
+        --kvass-project-selector-header-min-height-resposive,
+        150px
+      );
+    }
+
+    &-category {
+      position: absolute;
+      background-color: GetVariable('secondary');
+      z-index: 11;
+      color: white;
+      left: var(--kvass-project-selector-card-status-gap, 0.5rem);
+      top: var(--kvass-project-selector-card-status-gap, 0.5rem);
+      border-radius: GetVariable('border-radius');
+      .category {
+        font-size: var(--kvass-project-selector-card-status-font-size, 0.8em);
+        padding: var(--kvass-project-selector-card-status-padding-x, 0.5rem)
+          var(--kvass-project-selector-card-status-padding-x, 1rem);
+      }
+    }
+
+    &-cover {
+      width: 100%;
+      background-repeat: no-repeat;
+      height: 100%;
+      background-size: cover;
+      background-position: center;
+      transition: transform 0.62s cubic-bezier(0.05, 0.2, 0.1, 1);
+
+      &:hover {
+        transform: scale(1.11);
+        -webkit-transform: scale(1.11);
+      }
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+    line-height: 1;
+    margin: 0;
+  }
+
+  &__content {
+    background-color: GetVariable('background-color');
+    border-top: none;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: calc(#{$space} - 0.5rem);
+
+    height: 100%;
+
+    &-name {
+      color: GetVariable('dark');
+      margin: 0 !important;
+    }
+
+    &-url {
+      color: GetVariable('primary');
+      font-size: 1.1em;
+      margin-top: auto;
+      text-decoration: underline;
+      text-decoration-color: GetVariable('primary');
+      text-underline-offset: 0.3em;
+      text-decoration-thickness: 1px;
+
+      &:hover {
+        color: GetVariable('secondary');
+      }
+    }
+
+    &-city {
+      font-size: 1.2rem;
+    }
+
+    &-location {
+      display: flex;
+      align-items: center;
+      align-content: center;
+      gap: 1rem;
+      color: GetVariable('secondary');
+
+      svg {
+        opacity: 0.5;
+        height: 0.9rem;
+        path {
+          color: currentColor;
+        }
+      }
+    }
+
+    @media (max-width: $kvass-project-selector-resposive) {
+      gap: 0.5rem;
+      padding: calc(#{$space} - 0.5rem) calc(#{$space} - 1rem);
+    }
+  }
+}
+
+// tiles theme
+.project-selector--theme-tiles {
+  .project-selector-card {
+    border-radius: var(--kvass-project-selector-border-radius, 0px);
+
+    &:hover {
+      .project-selector-card__content {
+        background: rgba(0, 0, 0, 0.2) !important;
+      }
+    }
+
+    &__header {
+      min-height: var(--kvass-project-selector-header-min-height, 400px);
+
+      @media (max-width: $kvass-project-selector-resposive) {
+        min-height: var(
+          --kvass-project-selector-header-min-height-resposive,
+          250px
+        );
+      }
+    }
+
+    &__content {
+      font-size: 1.5rem;
+      height: unset !important;
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+      pointer-events: none;
+      background: rgba(0, 0, 0, 0.4) !important;
+      transition: background 200ms ease;
+
+      display: grid !important;
+      place-content: center;
+
+      & > * {
+        color: white !important;
+        text-align: center;
+      }
+
+      &-url {
+        text-decoration-color: currentColor;
+        font-size: 0.8em;
+      }
+
+      &-location {
+        justify-content: center;
+        margin-bottom: 1rem;
+
+        svg {
+          display: none;
+        }
+      }
+      &-intro {
+        font-size: 0.8em;
+      }
+    }
+  }
+}

package/vite.config.js

@@ -1,6 +1,6 @@
+import vue from '@vitejs/plugin-vue'
 import { fileURLToPath } from 'url'
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,14 +11,16 @@ export default defineConfig({
         manualChunks: false,
         entryFileNames: `[name].js`,
         chunkFileNames: `[name].js`,
-        assetFileNames: `[name].[ext]`
+        assetFileNames: `[name].[ext]`,
       },
       input: {
-        contact: fileURLToPath(new URL('./src/contact/main.js', import.meta.url))
-      }
-    }
+        contact: fileURLToPath(new URL('./src/contact/main.js', import.meta.url)),
+        'img-comparison-slider': fileURLToPath(new URL('./src/img-comparison-slider/main.js', import.meta.url)),
+        'project-portal': fileURLToPath(new URL('./src/project-portal/main.js', import.meta.url)),
+      },
+    },
   },
   server: {
-    port: 3001
-  }
+    port: 3001,
+  },
 })