@kvass/widgets 1.2.7 → 1.2.9

package/src/font-selector/components/FontSelector.ce.vue

@@ -1,246 +0,0 @@
-<script setup>
-import { computed, onMounted, ref, watch } from 'vue'
-import { useCurrentElement } from '@vueuse/core'
-import { providers } from '../providers.js'
-import WebFontLoader from 'webfontloader'
-
-const props = defineProps({
-  provider: {
-    type: String,
-    default: 'google',
-  },
-  type: {
-    type: String,
-    default: 'text',
-    validator: (value) => ['text', 'heading'].includes(value),
-  },
-  defaultFont: String,
-})
-
-const selectedProvider = computed(() =>
-  providers.find((p) => p.value === props.provider),
-)
-
-const selectedFont = ref(
-  selectedProvider.value?.fonts.find((f) => f.value === props.defaultFont) ||
-    selectedProvider.value?.fonts[0],
-)
-
-const element = useCurrentElement()
-
-watch(selectedFont, (newFont) => {
-  if (!newFont) return
-
-  // emit custom event
-  element.value.dispatchEvent(
-    new CustomEvent('webcomponent:update', {
-      detail: {
-        font: newFont,
-        provider: selectedProvider.value,
-      },
-      bubbles: true,
-      composed: true,
-    }),
-  )
-})
-
-const styles = computed(
-  () =>
-    selectedFont.value &&
-    `--kvass-font-selector-font-family: '${selectedFont.value.value}'`,
-)
-
-onMounted(() => {
-  if (!selectedProvider.value) throw new Error('Invalid provider')
-
-  // Initialize WebFontLoader
-  const config = Object.fromEntries(
-    Object.entries(providers).map(([_, provider]) => [
-      provider.value,
-      { families: provider.fonts.map((font) => `${font.value}:400,700`) },
-    ]),
-  )
-
-  WebFontLoader.load(config)
-})
-</script>
-
-<template>
-  <div class="kvass-font-selector" :style="styles">
-    <select v-model="selectedFont" class="kvass-font-selector__input">
-      <optgroup
-        v-for="provider in providers"
-        :key="provider.value"
-        :label="provider.label"
-      >
-        <option v-for="font in provider.fonts" :key="font.value" :value="font">
-          {{ font.label }}
-        </option>
-      </optgroup>
-    </select>
-    <div
-      :class="[
-        `kvass-font-selector__preview kvass-font-selector__preview--${props.type}`,
-      ]"
-    >
-      <small class="kvass-font-selector__preview-label">Forhåndsvisning</small>
-      <template v-if="props.type === 'heading'">
-        <h1>Hovedtittel</h1>
-        <h2>Sekundærtittel</h2>
-        <h3>Tertiærtittel</h3>
-      </template>
-      <template v-if="props.type === 'text'">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
-          imperdiet, nulla et dictum interdum.
-        </p>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import url('@kvass/ui/style.css');
-
-.kvass-font-selector {
-  // Default variables
-  --__kvass-font-selector-background-color: white;
-  --__kvass-font-selector-padding-y: 1rem;
-  --__kvass-font-selector-padding-x: 1rem;
-  --__kvass-font-selector-border-width: 1px;
-  --__kvass-font-selector-border-style: solid;
-  --__kvass-font-selector-border-color: #eaeaea;
-  --__kvass-font-selector-border-radius: 6px;
-  --__kvass-font-selector-max-width: 500px;
-
-  border-radius: var(
-    --kvass-font-selector-border-radius,
-    var(--__kvass-font-selector-border-radius)
-  );
-  background-color: var(
-    --kvass-font-selector-background-color,
-    var(--__kvass-font-selector-background-color)
-  );
-  max-width: var(
-    --kvass-font-selector-max-width,
-    var(--__kvass-font-selector-max-width)
-  );
-  position: relative;
-
-  &::after {
-    content: url('../selector.svg');
-    position: absolute;
-    right: var(
-      --kvass-font-selector-padding-x,
-      var(--__kvass-font-selector-padding-x)
-    );
-    top: var(
-      --kvass-font-selector-padding-y,
-      var(--__kvass-font-selector-padding-y)
-    );
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  &__input {
-    appearance: none;
-    font: inherit;
-    width: 100%;
-    padding: var(
-        --kvass-font-selector-padding-y,
-        var(--__kvass-font-selector-padding-y)
-      )
-      var(
-        --kvass-font-selector-padding-x,
-        var(--__kvass-font-selector-padding-x)
-      );
-    border: var(
-        --kvass-font-selector-border-width,
-        var(--__kvass-font-selector-border-width)
-      )
-      var(
-        --kvass-font-selector-border-style,
-        var(--__kvass-font-selector-border-style)
-      )
-      var(
-        --kvass-font-selector-border-color,
-        var(--__kvass-font-selector-border-color)
-      );
-    border-top-left-radius: var(
-      --kvass-font-selector-border-radius,
-      var(--__kvass-font-selector-border-radius)
-    );
-    border-top-right-radius: var(
-      --kvass-font-selector-border-radius,
-      var(--__kvass-font-selector-border-radius)
-    );
-    border-bottom: none;
-  }
-
-  &__preview {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: var(
-        --kvass-font-selector-padding-y,
-        var(--__kvass-font-selector-padding-y)
-      )
-      var(
-        --kvass-font-selector-padding-x,
-        var(--__kvass-font-selector-padding-x)
-      );
-    border: var(
-        --kvass-font-selector-border-width,
-        var(--__kvass-font-selector-border-width)
-      )
-      var(
-        --kvass-font-selector-border-style,
-        var(--__kvass-font-selector-border-style)
-      )
-      var(
-        --kvass-font-selector-border-color,
-        var(--__kvass-font-selector-border-color)
-      );
-    border-bottom-right-radius: var(
-      --kvass-font-selector-border-radius,
-      var(--__kvass-font-selector-border-radius)
-    );
-    border-bottom-left-radius: var(
-      --kvass-font-selector-border-radius,
-      var(--__kvass-font-selector-border-radius)
-    );
-
-    p,
-    h1,
-    h2,
-    h3 {
-      margin: 0;
-      font-family: var(--kvass-font-selector-font-family);
-      text-wrap: balance;
-    }
-
-    p {
-      line-height: 1.5;
-    }
-
-    h1,
-    h2,
-    h3 {
-      line-height: 1;
-    }
-
-    &--heading {
-      font-weight: 700;
-    }
-
-    &--text {
-      font-weight: 400;
-    }
-
-    &-label {
-      opacity: 0.5;
-      letter-spacing: 0.25px;
-    }
-  }
-}
-</style>

package/src/font-selector/main.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from 'vue'
-import FontSelector from './components/FontSelector.ce.vue'
-
-customElements.define('kvass-font-selector', defineCustomElement(FontSelector))

package/src/font-selector/providers.js

@@ -1,48 +0,0 @@
-export const providers = [
-	{
-		value: 'google',
-		label: 'Google Fonts',
-		fonts: [
-			{
-				value: 'Roboto',
-				label: 'Roboto',
-			},
-			{
-				value: 'Open Sans',
-				label: 'Open Sans',
-			},
-			{
-				value: 'Lato',
-				label: 'Lato',
-			},
-			{
-				value: 'Montserrat',
-				label: 'Montserrat',
-			},
-			{
-				value: 'Roboto Condensed',
-				label: 'Roboto Condensed',
-			},
-			{
-				value: 'Oswald',
-				label: 'Oswald',
-			},
-			{
-				value: 'Poppins',
-				label: 'Poppins',
-			},
-			{
-				value: 'Raleway',
-				label: 'Raleway',
-			},
-			{
-				value: 'Slabo 27px',
-				label: 'Slabo 27px',
-			},
-			{
-				value: 'Merriweather',
-				label: 'Merriweather',
-			},
-		],
-	}
-]

package/src/font-selector/selector.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-selector" width="18"
-	height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
-	stroke-linecap="round" stroke-linejoin="round">
-	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-	<path d="M8 9l4 -4l4 4" />
-	<path d="M16 15l-4 4l-4 -4" />
-</svg>

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

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

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

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

package/src/map/README.md

@@ -1,59 +0,0 @@
-# kvass-map
-
-A simple, embeddable Web Component for maps.
-
-`https://unpkg.com/@kvass/widgets@latest/dist/map.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-map />` element as shown here.
-
-```html
-<kvass-map coordinates="10.745,59.9123" />
-```
-
-## Props
-
-The component has several props for easy configuration.
-
-| Name                   | Type    | Description                                                                             | Default |
-| :--------------------- | :------ | :-------------------------------------------------------------------------------------- | :------ |
-| coordinates `required` | String  | The coordinates for the main marker.                                                    |         |
-| markers                | String  | A list of markers formatted in `lon,lat`. Each marker is separated with `;`             |         |
-| address                | String  | The address as a formatted string. This will be visible if `show-address` prop is true. |         |
-| show-address           | Boolean | Show a panel with the formatted address string.                                         |         |
-
-## Styling
-
-The widget's styles are based on CSS custom properties, and can be overwritten.
-These are the available CSS variables.
-
-| Name                           | Description                               | Default                   |
-| :----------------------------- | :---------------------------------------- | :------------------------ |
-| --kvass-map-background         | The map's background color                | `rgb(0 0 0 / 0.2)`        |
-| --kvass-map-address-padding-x  | The inline padding of the address panel   | `0.5rem`                  |
-| --kvass-map-address-padding-y  | The block padding of the address panel    | `1rem`                    |
-| --kvass-map-address-background | The background color of the address panel | `rgb(0 0 0 / 0.2)`        |
-| --kvass-map-address-color      | The text color of the address panel       | `rgb(255 255 255 / 0.75)` |

package/src/map/components/Map.ce.vue

@@ -1,66 +0,0 @@
-<script setup>
-import { Map as MapComponent } from '@kvass/map'
-import { LazyLoad } from '@kvass/ui'
-import { computed, reactive } from 'vue'
-
-const props = defineProps({
-  theme: {
-    type: String,
-    required: true,
-  },
-  mapboxApiToken: {
-    type: String,
-    required: true,
-  },
-  /**
-   * The coordinates in the format of 'latitude,longitude'
-   */
-  coordinates: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * Coordinates for additional map markers in the format of 'latitude,longitude;latitude,longitude'
-   */
-  markers: {
-    type: String,
-  },
-
-  /**
-   * The map zoom level. Lower is more zoomed out
-   */
-  zoom: {
-    type: String,
-    default: '8',
-    validator(value) {
-      return typeof parseInt(value) === 'number'
-    },
-  },
-})
-
-const coordinatesComp = computed(() => props.coordinates.split(','))
-const markersComp = computed(() =>
-  props.markers?.split(';').map((m) => m.split(',')),
-)
-
-const mapOptions = reactive({
-  style: props.theme,
-  accessToken: props.mapboxApiToken,
-})
-</script>
-
-<template>
-  <LazyLoad>
-    <MapComponent
-      :coordinates="coordinatesComp"
-      :zoom="parseInt(props.zoom)"
-      :markers="markersComp"
-      :map-options="mapOptions"
-    />
-  </LazyLoad>
-</template>
-
-<style>
-@import url('@kvass/map/style.css');
-</style>

package/src/map/main.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from 'vue';
-import Map from './components/Map.ce.vue'
-
-customElements.define('kvass-map', defineCustomElement(Map));