@kvass/widgets 1.2.7 → 1.2.9

package/src/project-portal/App.ce.vue

@@ -1,308 +0,0 @@
-<template>
-  <!-- <Loader :value="promise">  -->
-  <div class="project-selector" :class="`project-selector--theme-${theme}`">
-    <div
-      v-if="!disableNav || !navItems.length"
-      class="project-selector__navigation"
-    >
-      <CategorySelector
-        class="project-selector__navigation-category"
-        v-if="navItems.length"
-        :items="navItems"
-        :value="category"
-        @input="
-          ($ev) => {
-            category = $ev
-            filterItems()
-          }
-        "
-      />
-
-      <ProjectTypeSelector
-        v-if="projectTypes.length > 1"
-        class="project-selector__navigation-project-type"
-        :items="projectTypes"
-        :value="projectType"
-        @input="
-          ($ev) => {
-            projectType = $ev.target.value
-            filterItems()
-          }
-        "
-      />
-    </div>
-
-    <transition-group
-      v-if="items && items.length"
-      tag="div"
-      name="list"
-      appear
-      class="project-selector__card"
-    >
-      <Card
-        v-for="(item, index) in items"
-        :disable-label="disableNav"
-        :key="index"
-        :item="item"
-        theme="border"
-      />
-    </transition-group>
-
-    <div class="project-selector__no-result" v-else>Ingen resultater</div>
-  </div>
-  <!-- </Loader>  -->
-</template>
-
-<script>
-export default {
-  created() {
-    this.fetch()
-  },
-}
-</script>
-
-<script setup>
-import { ref, computed } from 'vue'
-
-import Card from './components/Card.ce.vue'
-import CategorySelector from './components/CategorySelector.ce.vue'
-import ProjectTypeSelector from './components/ProjectTypeSelector.ce.vue'
-// import { LoaderComponent as Loader } from 'vue-elder-loader'
-
-import { getProjects } from './api'
-
-function getSortValue(type, value) {
-  switch (type) {
-    case 'status':
-      switch (value[type]) {
-        case 'sale':
-          return 2
-        case 'upcoming':
-          return 1
-        default:
-          return 0
-      }
-    case 'name':
-      return value[type]
-  }
-}
-
-const props = defineProps({
-  source: {
-    type: String,
-    default: 'https://feature.kvass.no',
-  },
-  startCategory: {
-    type: String,
-    default: 'all',
-    enums: ['all', 'sale', 'upcoming', 'development', 'sold'],
-  },
-  enabledCategories: {
-    type: String,
-    default: 'all,sale,upcoming,development,sold',
-  },
-  theme: {
-    type: String,
-    enum: ['default', 'tiles'],
-    default: 'default',
-  },
-  sortOn: {
-    type: String,
-    enum: ['status', 'name'],
-    default: 'status',
-  },
-  // triggerLabel: {
-  //   type: String,
-  //   default: 'Velg type',
-  // },
-  disableNav: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const category = ref('')
-const projectType = ref('none')
-const items = ref([])
-var allItems = []
-const promise = ref(null)
-
-const navItems = computed(() => {
-  return [
-    ...props.enabledCategories.split(',').filter((i) => {
-      if (i === 'all') return true
-      return allItems.find((k) => k.status.includes(i))
-    }),
-  ]
-})
-
-const projectTypes = computed(() => {
-  let types = ['none'].concat(
-    allItems.map((i) => {
-      if (i.customFields && i.customFields['project-type'])
-        return i.customFields['project-type']
-    }),
-  )
-
-  return [...new Set(types || [])].filter(Boolean)
-})
-
-function filterItems() {
-  items.value = allItems
-    .filter((i) => {
-      if (category.value === 'all') return true
-      return i.status.includes(category.value)
-    })
-    .filter((i) => {
-      if (!projectTypes.length || projectType.value === 'none') return true
-      if (!i.customFields || !i.customFields['project-type']) return
-      return i.customFields['project-type'].includes(projectType.value)
-    })
-}
-
-function getFromSource() {
-  if (props.source) return getProjects(props.source)
-  return Promise.resolve()
-}
-
-function getStatus(item) {
-  if (item.status) return item.status
-  let total = item.stats.total
-  if (item.isPublished && total && !item.stats.sale) return 'sold'
-  if (item.isPublished && total) return 'sale'
-  if (item.isPublished && !total) return 'upcoming'
-  if (!item.isPublished) return 'development'
-  return 'development'
-}
-
-function fetch() {
-  promise.value = getFromSource()
-    .then(async (data) => {
-      let items = []
-      //read from global customItems
-      if (typeof customItems !== 'undefined') {
-        items =
-          typeof customItems === 'function' ? await customItems() : customItems
-      }
-      //remove kvass projects that is defined in customItems
-      let kvassProjects = data
-        ? data.Projects.filter((item) => {
-            if (items.find((i) => (i.id ? i.id.includes(item.id) : undefined)))
-              return
-            return item
-          })
-        : []
-
-      allItems = [...kvassProjects, ...items]
-
-      return (allItems = allItems
-        .map((item) => {
-          item.status = getStatus(item)
-          return {
-            intro: item.customFields ? item.customFields['project-intro'] : '',
-            ...item,
-            sortVale: getSortValue(props.sortOn, item),
-            url: item.url,
-          }
-        })
-        .sort((a, b) => {
-          switch (props.sortOn) {
-            case 'status':
-              if (a.sortVale < b.sortVale) return 1
-              if (a.sortVale > b.sortVale) return -1
-          }
-        })
-        .filter((i) => props.enabledCategories.split(',').includes(i.status)))
-    })
-    .then(() => {
-      category.value = props.startCategory
-      items.value = allItems
-    })
-}
-</script>
-
-<style lang="scss">
-@import './styles/_variables';
-.project-selector {
-  $gap: 1.5rem;
-  &__navigation {
-    display: flex;
-    justify-content: var(--kvass-project-selector-nav-position, center);
-    padding: 0 2rem;
-    padding-bottom: 3rem;
-    gap: $gap;
-    @media (max-width: $kvass-project-selector-resposive) {
-      flex-direction: column-reverse;
-      justify-content: center;
-      gap: $gap - 1rem;
-    }
-    &-category {
-      display: flex;
-      justify-content: center;
-      gap: $gap;
-      @media (max-width: $kvass-project-selector-resposive) {
-        flex-direction: column;
-        gap: $gap - 1rem;
-        align-items: center;
-      }
-    }
-  }
-  &__card {
-    position: relative;
-    display: grid;
-    grid-template-columns: repeat(
-      var(--kvass-project-selector-grid-columns, 4),
-      1fr
-    );
-    gap: var(--kvass-project-selector-grid-gap, 2rem);
-    @media (max-width: $kvass-project-selector-resposive) {
-      grid-template-columns: 1fr;
-      padding-top: 2rem;
-    }
-  }
-  &__no-result {
-    font-size: 1.2em;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 200px;
-    margin: 2rem 0;
-    background-color: GetVariable('light-grey');
-    @media (max-width: $kvass-project-selector-resposive) {
-      min-height: 100px;
-    }
-  }
-  .list {
-    &-leave-active {
-      position: absolute;
-    }
-    &-move,
-    &-enter-active,
-    &-leave-active {
-      transition: all 500ms ease;
-    }
-    &-enter {
-      transform: scale(0.95);
-    }
-    &-enter,
-    &-leave-to {
-      opacity: 0;
-    }
-  }
-}
-// tiles theme
-.project-selector--theme-tiles {
-  .project-selector__card {
-    grid-template-columns: repeat(
-      var(--kvass-project-selector-grid-columns, 2),
-      1fr
-    );
-    gap: var(--kvass-project-selector-grid-gap, 0rem);
-    @media (max-width: $kvass-project-selector-resposive) {
-      grid-template-columns: 1fr;
-      padding-top: 2rem;
-    }
-  }
-}
-</style>

package/src/project-portal/api.js

@@ -1,48 +0,0 @@
-function getProjects(url) {
-  return fetch(`${url}/api/graphql`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      query: `
-			query {
-				Projects {
-					id
-					name
-					url
-					isPublished
-					media {
-						cover {
-							url
-							type
-						}
-						gallery {
-							url
-							type
-						}
-					}
-					address {
-						street
-						city
-						county
-						postcode
-						location {
-							coordinates
-						}
-					}
-					stats {
-						total
-						sale
-					}
-					customFields(keys: ["project-intro", "project-type"])
-				}
-			}
-			`,
-    }),
-  })
-    .then((res) => res.json())
-    .then((res) => res.data)
-}
-
-export { getProjects }

package/src/project-portal/assets/map-pin-solid.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-pin" class="svg-inline--fa fa-map-pin fa-w-9" 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>

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

@@ -1,110 +0,0 @@
-<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

@@ -1,87 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-<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

@@ -1,70 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-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

@@ -1,19 +0,0 @@
-$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));
-}