@kvass/widgets 1.0.18 → 1.1.1

package/src/contact/components/Field.ce.vue

@@ -6,7 +6,7 @@ export default {
 </script>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref } from 'vue';
 
 const emit = defineEmits(['update:modelValue'])
 const props = defineProps({
@@ -76,9 +76,11 @@ function onBlur() {
     margin-left: var(--kvass-contact-label-transform, 0);
     font-weight: var(--kvass-contact-label-weight, initial);
   }
+
   input {
     -webkit-appearance: none;
   }
+  
   &__element {
     padding: calc(
       var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2
@@ -106,6 +108,7 @@ function onBlur() {
       );
     resize: vertical;
     font: inherit;
+    color: inherit;
     background-color: var(
       --kvass-contact-input-background,
       var(--kvass-contact-default-input-background)
@@ -126,7 +129,7 @@ function onBlur() {
   }
 
   &--required {
-    .kvass-contact-field__label:after {
+    .kvass-contact-field__label::after {
       content: '*';
       color: var(--kvass-contact-error, var(--kvass-contact-default-error));
       margin-left: 0.3rem;

package/src/contact/components/Form.ce.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { onMounted, reactive, ref, computed, useAttrs } from 'vue'
+import { computed, onMounted, reactive, ref, useAttrs } from 'vue'
 import { createLead, getProjects } from '../api'
 import { Capitalize } from '../utils'
 
+import Checkbox from './Checkbox.ce.vue'
 import Field from './Field.ce.vue'
 import Fieldset from './Fieldset.ce.vue'
-import Checkbox from './Checkbox.ce.vue'
 
 const Labels = {
   nb: {
@@ -248,6 +248,10 @@ onMounted(() => {
 
   --kvass-contact-default-background: #ffffff;
   --kvass-contact-default-spacing: 2rem;
+  --kvass-contact-default-padding: var(
+    --kvass-contact-spacing,
+    var(--kvass-contact-default-spacing)
+  );
   --kvass-contact-default-border-radius: 4px;
   --kvass-contact-default-border-color: #eaeaea;
   --kvass-contact-default-border-width: 1px;
@@ -275,7 +279,7 @@ onMounted(() => {
     --kvass-contact-background,
     var(--kvass-contact-default-background)
   );
-  padding: var(--kvass-contact-spacing, var(--kvass-contact-default-spacing));
+  padding: var(--kvass-contact-padding, var(--kvass-contact-default-padding));
   border-radius: var(
     --kvass-contact-border-radius,
     var(--kvass-contact-default-border-radius)

package/src/img-comparison-slider/README.md

@@ -0,0 +1,69 @@
+# kvass-img-comparison-slider
+
+A simple, embeddable Web Component to compare images.
+
+`https://unpkg.com/@kvass/widgets@latest/dist/img-comparison-slider.js`
+
+## Develop
+
+To run in development mode, first install the neccessary packages.
+
+```
+npm install
+```
+
+Then, run in development mode.
+
+```
+npm run dev
+```
+
+Open `localhost:3000` in the browser of your choice, and you will see the form widget.
+
+## Build
+
+To build the widget for production, run `build` instead of `dev`.
+
+```
+npm run build
+```
+
+To use the widget, use the `<kvass-img-comparison-slider />` element as shown here.
+
+```html
+<kvass-img-comparison-slider
+  first-image="https://example.com/first-image,First image"
+  second-image="https://example.com/second-image,Second image"
+  options="direction:vertical,keyboard:disabled"
+></kvass-img-comparison-slider>
+```
+
+## Props
+
+The component has several props for easy configuration.
+
+| Name        | Type    | Description                                               | Enums                   |
+| :---------- | :------ | :-------------------------------------------------------- | :---------------------- |
+| **options** | String  | key:value pairs separated by comma                        | The following options:  |
+| value       | Number  | Position of the divider in percents.                      | `0...100`               |
+| hover       | Boolean | Automatically slide on mouse over.                        | `false`, `true`         |
+| direction   | String  | Set slider direction.                                     | `horiontal`, `vertical` |
+| nonce       |         | Define nonce which gets passed to inline style.           |                         |
+| keyboard    | String  | Enable/disable slider position control with the keyboard. | `enabled`, `disabled`   |
+| handle      | Boolean | Enable/disable dragging by handle only.                   | `false`, `true`         |
+|             |         |                                                           |                         |
+| first-image | String  | Image url and text, separated by a comma                  |                         |
+| second-mage | String  | Image url and text, separated by a comma                  |                         |
+| handle-svg  | String  | The svg on the slider handle                              |                         |
+
+## Styling
+
+The widget's styles are based on CSS custom properties, and can be overwritten.
+These are the available CSS variables.
+
+| Name                      | Description                                                                              | Default |
+| :------------------------ | :--------------------------------------------------------------------------------------- | :------ |
+| `--divider-width`         | Width of the vertical line separating both images                                        | `1px`   |
+| `--divider-color`         | Color of the vertical line separating the two images                                     | `#fff`  |
+| `--divider-shadow`        | Shadow cast by the vertical line separating the two images                               | `none`  |
+| `--handle-position-start` | Handle position on the divider axis. In case the handle must be displaced off the center | `50%`   |

package/src/img-comparison-slider/components/ImgComparisonSlider.ce.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { ImgComparisonSlider } from '@img-comparison-slider/vue';
+import { computed } from 'vue';
+
+const defaultOptions = {
+  value: 50,
+  hover: false,
+  direction: 'horizontal',
+  keyboard: 'enabled',
+  handle: false,
+}
+
+function createImageObject(imageString) {
+  if (!imageString) return {}
+
+  const split = imageString.split(',')
+  return {
+    url: split[0],
+    description: split[1]
+  }
+}
+
+const props = defineProps({
+  firstImage: {
+    type: String,
+    default: 'https://assets.kvass.no/641c0b087c49867b0b1065ec,Første bilde'
+  },
+  secondImage: {
+    type: String,
+    default: 'https://assets.kvass.no/641c0a8c7c49867b0b106570,Andre bilde'
+  },
+
+  options: {
+    type: String,
+    default: '',
+  },
+
+  handleSvg: {
+    type: String,
+    default:
+      '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="-8 -3 16 6"><path stroke="#fff" d="M -3 -2 L -5 0 L -3 2 M -3 -2 L -3 2 M 3 -2 L 5 0 L 3 2 M 3 -2 L 3 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path></svg>',
+  },
+})
+
+// images
+const firstImage = createImageObject(props.firstImage)
+const firstImageCaption = computed(() => firstImage.description)
+
+const secondImage = createImageObject(props.secondImage)
+const secondImageCaption = computed(() => secondImage.description)
+
+// options
+const options = computed(() => {
+  const entries = props.options.split(',').map(entry => entry.split(':'))
+  return Object.fromEntries(entries)
+})
+</script>
+
+<template>
+  <ImgComparisonSlider
+    :style="`--first-image-caption: ${firstImageCaption}; --second-image-caption: ${secondImageCaption}`" tabindex="0"
+    class="img-comparison-slider" v-bind="{
+      ...defaultOptions,
+      ...options,
+    }">
+    <img slot="first" class="img-comparison-slider__image" :src="firstImage.url" />
+    <img slot="second" class="img-comparison-slider__image" :src="secondImage.url" />
+
+    <div slot="handle" class="handle">
+      <p class="handle__caption handle__caption--left">
+        {{ firstImage.description }}
+      </p>
+      <div class="handle__svg" v-html="handleSvg"></div>
+      <p class="handle__caption handle__caption--right">
+        {{ secondImage.description }}
+      </p>
+    </div>
+  </ImgComparisonSlider>
+</template>
+
+<style lang="scss">
+.img-comparison-slider {
+  width: 100%;
+  height: 100%;
+
+  --divider-width: 4px;
+  --divider-color: black;
+
+  // aspect-ratio: var(--kvass-img-comparison-slider-aspect-ratio, $aspect-ratio);
+  //   aspect-ratio: var(
+  //     --kvass-img-comparison-slider-aspect-ratio,
+  //     $aspect-ratio
+  //   );
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .handle {
+    display: flex;
+    flex-direction: row;
+
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 1rem;
+    min-width: 800px;
+
+    font-size: 1rem;
+
+    @media (max-width: 600px) {
+      font-size: 0.75rem;
+    }
+
+    &__caption {
+      color: white;
+      word-wrap: wrap;
+      width: 100%;
+
+      &--left {
+        text-align: right;
+      }
+    }
+
+    &__svg {
+      padding: 0.3em;
+      background-color: black;
+      border-radius: 100%;
+
+      svg {
+        width: 2.5em;
+        height: 2.5em;
+      }
+    }
+  }
+}
+</style>

package/src/img-comparison-slider/main.js

@@ -0,0 +1,7 @@
+import { defineCustomElement } from 'vue'
+import ImgComparisonSlider from './components/ImgComparisonSlider.ce.vue'
+
+customElements.define(
+  'kvass-img-comparison-slider',
+  defineCustomElement(ImgComparisonSlider),
+)

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

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

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

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