npm - @kvass/widgets - Versions diffs - 1.2.7 → 1.2.8 - Mend

@kvass/widgets 1.2.7 → 1.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/package.json +4 -1
package/.github/workflows/semantic-release.yml +0 -21
package/.prettierrc +0 -6
package/.releaserc +0 -3
package/index.html +0 -38
package/src/contact/README.md +0 -80
package/src/contact/api.js +0 -82
package/src/contact/components/Checkbox.ce.vue +0 -127
package/src/contact/components/Field.ce.vue +0 -156
package/src/contact/components/Fieldset.ce.vue +0 -63
package/src/contact/components/Form.ce.vue +0 -407
package/src/contact/main.js +0 -9
package/src/contact/utils.js +0 -14
package/src/flatfinder/README.md +0 -58
package/src/flatfinder/components/Flatfinder.ce.vue +0 -34
package/src/flatfinder/main.js +0 -4
package/src/font-selector/README.md +0 -60
package/src/font-selector/components/FontSelector.ce.vue +0 -246
package/src/font-selector/main.js +0 -4
package/src/font-selector/providers.js +0 -48
package/src/font-selector/selector.svg +0 -7
package/src/img-comparison-slider/README.md +0 -69
package/src/img-comparison-slider/components/ImgComparisonSlider.ce.vue +0 -139
package/src/img-comparison-slider/main.js +0 -7
package/src/map/README.md +0 -59
package/src/map/components/Map.ce.vue +0 -66
package/src/map/main.js +0 -4
package/src/project-portal/App.ce.vue +0 -308
package/src/project-portal/api.js +0 -48
package/src/project-portal/assets/logo.png +0 -0
package/src/project-portal/assets/map-pin-solid.svg +0 -1
package/src/project-portal/components/Card.ce.vue +0 -110
package/src/project-portal/components/Category.ce.vue +0 -87
package/src/project-portal/components/CategorySelector.ce.vue +0 -43
package/src/project-portal/components/ProjectTypeSelector.ce.vue +0 -70
package/src/project-portal/main.js +0 -16
package/src/project-portal/styles/_variables.scss +0 -19
package/src/project-portal/styles/components/_card.scss +0 -178
package/src/utils/index.js +0 -40
package/src/vimeo/README.md +0 -58
package/src/vimeo/components/Vimeo.ce.vue +0 -311
package/src/vimeo/main.js +0 -4
package/src/youtube/README.md +0 -58
package/src/youtube/components/Youtube.ce.vue +0 -322
package/src/youtube/main.js +0 -4
package/vite.config.js +0 -51

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kvass/widgets",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,6 +16,9 @@
     "vue": "^3.4.15",
     "webfontloader": "^1.6.28"
   },
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@types/webfontloader": "^1.6.38",
     "@vitejs/plugin-vue": "^5.0.3",

package/.github/workflows/semantic-release.yml DELETED Viewed

@@ -1,21 +0,0 @@
-name: CI
-on:
-  push:
-    branches:
-      - master
-jobs:
-  deploy:
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '20'
-      - name: Authenticate with private NPM package
-        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
-      - run: npm install
-      - name: Release
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: npx semantic-release

package/.prettierrc DELETED Viewed

@@ -1,6 +0,0 @@
-{
-	"singleQuote": true,
-	"tabWidth": 2,
-	"trailingComma": "all",
-	"semi": false
-}

package/.releaserc DELETED Viewed

@@ -1,3 +0,0 @@
-{
-  "ci": false
-}

package/index.html DELETED Viewed

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="nb">
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Kvass Web Components</title>
-</head>
-<body
-  style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">
-  <!-- <kvass-contact
-      account-url="https://local.kvass.test"
-      label-subtitle="Ønsker du å motta vårt nyhetsbrev?"
-      tags="Test side"
-      upsell
-      references="Residential:630f5c19ffd25600331dcd05"
-      default-assignees="630f5c19ffd25600331dcc06,627181d6009b8f0022b09ac8"
-    />
-    <script type="module" src="/src/contact/main.js"></script> -->
-  <!-- <kvass-img-comparison-slider
-    first-image="https://assets.lastdodo.com/image/ld_medium/plain/assets/catalog/assets/2013/12/2/2/8/7/pdf_287e8674-5b0f-11e3-90d5-a6d2687aed80.jpg,First image"
-    second-image="https://seeklogo.com/images/I/Ilguciema_Kvass-logo-227537F6D4-seeklogo.com.png,Second imanr bge"
-    options="keyboard:disabled,direction:vertical"></kvass-img-comparison-slider>
-    <script type="module" src="/src/img-comparison-slider/main.js"></script> -->
-  <!-- <kvass-map coordinates="10.745,59.9123" address="Klokkergårdveien 5, 1711 Sarpsborg" show-address /> -->
-  <!-- <kvass-flatfinder project-url="https://alvebergtunet.production.kvass.no" project-id="65a4f48ed1ba5cd61468f235"
-    path-prefix="/residential" />
-  <script type="module" src="/dist/flatfinder.js"></script> -->
-  <kvass-font-selector></kvass-font-selector>
-  <script type="module" src="/src/font-selector/main.js"></script>
-</body>
-</html>

package/src/contact/README.md DELETED Viewed

@@ -1,80 +0,0 @@
-# kvass-contact
-A simple, embeddable Web Component for sending leads to Kvass.
-`https://unpkg.com/@kvass/widgets@latest/dist/contact.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-contact />` element as shown here.
-```html
-<kvass-contact account-url="https://example.kvass.no" />
-```
-## Props
-The component has several props for easy configuration.
-| Name                   | Type    | Description                                                                              | Default                                 |
-| :--------------------- | :------ | :--------------------------------------------------------------------------------------- | :-------------------------------------- |
-| account-url `required` | String  | Account URL where data will be sent.                                                     |                                         |
-| references `required`  | String  | Comma-separated list of references in {type}:{id} format                                 |                                         |
-| default-assignees      | String  | Comma-separated list of userIds. Used as fallback assignees of the created task in Kvass |                                         |
-| projects               | String  | Comma-separated list of project ids. If not defined, a selection field will show         |                                         |
-| tags                   | String  | Comma-separated list of tags                                                             |                                         |
-| upsell                 | Boolean | If `true`, shows a checkbox for upsell                                                   | `false`                                 |
-| label-title            | String  | Title of the lead form                                                                   | `"Meld interesse"`                      |
-| label-subtitle         | String  | Optional subtitle shown under form title                                                 |                                         |
-| label-submit           | String  | Label for the submit button                                                              | `"Meld interesse"`                      |
-| privacy-url            | String  | Optional URL to privacy statement                                                        | `{accountUrl}/api/legal/privacy/tenant` |
-| label-success          | String  | Message displayed after submit                                                           | `"Takk for interessen!"`                |
-| success-theme          | String  | Success theme, enums: ['default', 'overlay']                                             | `"default"`                             |
-| submit-timeout         | Number  | Delay on submit reset                                                                    | `2000`                                  |
-## 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-contact-background       | The form's background color                                 | `#ffffff`     |
-| --kvass-contact-spacing          | Base spacing amount. Other amounts are calculated from this | `2rem`        |
-| --kvass-contact-padding          | Outer padding of the form element                           | `2rem`        |
-| --kvass-contact-max-width        | Max width of the form                                       | `720px`       |
-| --kvass-contact-border-radius    | Base border-radius                                          | `4px`         |
-| --kvass-contact-border-color     | Color of the borders of the form fields                     | `#eaeaea`     |
-| --kvass-contact-border-width     | Border-width for input fields                               | `1px`         |
-| --kvass-contact-color            | Base text color                                             | `#222222`     |
-| --kvass-contact-color-inverted   | Inverted text color. Used for the submit button             | `#ffffff`     |
-| --kvass-contact-primary          | Primary color. Used for submit button and form elements     | `#1d56d8`     |
-| --kvass-contact-error            | Error color. Used for error states                          | `#d81d1d`     |
-| --kvass-contact-grid-columns     | Amount of columns in the form                               | `1`           |
-| --kvass-contact-disabled         | Background color on disabled button                         | `#eaeaea`     |
-| --kvass-contact-input-background | Background color for input fields                           | `transparent` |
-| --kvass-contact-outline-width    | Width of focus outline                                      | `2px`         |
-| --kvass-contact-outline-offset   | Offset between the form control and its outline             | `0px`         |
-| --kvass-contact-checkbox-size    | Size of checkboxes                                          | `1em`         |

package/src/contact/api.js DELETED Viewed

@@ -1,82 +0,0 @@
-function createLead(url, data, projects, defaultAssignees) {
-  if (projects && projects instanceof Array && projects.length) {
-    return Promise.all(
-      projects.map((p) => {
-        let projectRef = { onModel: 'Project', ref: p }
-        return createLead(url, {
-          ...data,
-          project: p,
-          references: [projectRef, ...data.references],
-        })
-      }),
-    )
-  }
-  if (!projects?.length && defaultAssignees?.length) {
-    return createContact(
-      url,
-      { ...data.contact, assignees: defaultAssignees },
-      data.comment,
-    )
-  }
-  return fetch(`${url}/api/graphql`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      query: `
-				mutation ($data: LeadCreate!) {
-					LeadCreate(data: $data) {
-						id
-					}
-				}
-			`,
-      variables: { data },
-    }),
-  }).then((res) => res.json())
-}
-function createContact(url, data, comment) {
-  return fetch(`${url}/api/graphql`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      query: `
-				mutation ($data: ContactInput!, $comment: String) {
-					ContactCreate(data: $data, comment: $comment) {
-						id
-					}
-				}
-			`,
-      variables: { data, comment },
-    }),
-  }).then((res) => res.json())
-}
-function getProjects(url) {
-  return fetch(`${url}/api/graphql`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      query: `
-				query {
-					Projects {
-						id
-						name
-						isPublished
-					}
-				}
-			`,
-    }),
-  })
-    .then((res) => res.json())
-    .then((res) => res.data.Projects.filter((d) => d.isPublished))
-}
-export { createLead, createContact, getProjects }

package/src/contact/components/Checkbox.ce.vue DELETED Viewed

@@ -1,127 +0,0 @@
-<script>
-export default {
-  // disable attrs on root element
-  inheritAttrs: false,
-}
-</script>
-<script setup>
-const emit = defineEmits(['update:modelValue'])
-const props = defineProps({
-  modelValue: [Boolean, Array],
-  state: String,
-  label: String,
-})
-function onChange(ev) {
-  if (typeof props.modelValue === 'boolean')
-    return emit('update:modelValue', ev.target.checked)
-  return emit(
-    'update:modelValue',
-    ev.target.checked
-      ? [...props.modelValue, props.state]
-      : props.modelValue.filter((v) => v !== props.state),
-  )
-}
-</script>
-<template>
-  <label
-    class="kvass-contact-checkbox"
-    :class="[
-      { 'kvass-contact-checkbox--required': 'required' in $attrs },
-      $attrs.class,
-    ]"
-  >
-    <input
-      class="kvass-contact-checkbox__element"
-      type="checkbox"
-      v-bind="$attrs"
-      :value="modelValue"
-      :checked="$attrs.checked"
-      @change="onChange"
-    />
-    <span class="kvass-contact-checkbox__label" v-html="label"></span>
-  </label>
-</template>
-<style lang="scss">
-.kvass-contact-checkbox {
-  display: flex;
-  align-items: start;
-  gap: 0.75rem;
-  cursor: pointer;
-  &__element {
-    cursor: inherit;
-    margin: 0;
-    appearance: none;
-    background-color: var(--kvass-contact-input-background);
-    flex-shrink: 0;
-    font: inherit;
-    color: currentColor;
-    width: var(
-      --kvass-contact-checkbox-size,
-      var(--kvass-contact-default-checkbox-size)
-    );
-    aspect-ratio: 1;
-    border: var(
-        --kvass-contact-checkbox-border-width,
-        var(--kvass-contact-default-checkbox-border-width)
-      )
-      solid currentColor;
-    border-radius: var(
-      --kvass-contact-checkbox-border-radius,
-      var(--kvass-contact-default-checkbox-border-radius)
-    );
-    &:focus-visible {
-      outline: var(
-          --kvass-contact-outline-width,
-          var(--kvass-contact-default-outline-width)
-        )
-        solid var(--kvass-contact-color, var(--kvass-contact-default-color));
-      outline-offset: var(
-        --kvass-contact-outline-offset,
-        var(--kvass-contact-default-outline-offset)
-      );
-    }
-    &:checked {
-      position: relative;
-      background-color: var(
-        --kvass-contact-primary,
-        var(--kvass-contact-default-primary)
-      );
-      border-color: var(
-        --kvass-contact-primary,
-        var(--kvass-contact-default-primary)
-      );
-      &::before {
-        content: '✓';
-        font-size: 0.75em;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        translate: -50% -50%;
-        color: var(
-          --kvass-contact-color-inverted,
-          var(--kvass-contact-default-color-inverted)
-        );
-      }
-    }
-  }
-  &--required {
-    span:after {
-      content: '*';
-      color: var(--kvass-contact-error, var(--kvass-contact-default-error));
-      margin-left: 0.3rem;
-    }
-  }
-}
-</style>

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

@@ -1,156 +0,0 @@
-<script>
-export default {
-  // disable attrs on root element
-  inheritAttrs: false,
-}
-</script>
-<script setup>
-import { computed, ref } from 'vue';
-const emit = defineEmits(['update:modelValue'])
-const props = defineProps({
-  modelValue: [String, Array],
-  label: String,
-  type: String,
-})
-const component = computed(() => {
-  switch (props.type) {
-    case 'textarea':
-      return 'textarea'
-    case 'select':
-      return 'select'
-    default:
-      return 'input'
-  }
-})
-const focused = ref(false)
-const blurred = ref(false)
-function onInput(event) {
-  emit('update:modelValue', event.target.value)
-  focused.value = true
-}
-function onBlur() {
-  if (!focused.value) return
-  blurred.value = true
-}
-</script>
-<template>
-  <label
-    class="kvass-contact-field"
-    :class="[
-      {
-        'kvass-contact-field--required': 'required' in $attrs,
-        'kvass-contact-field--focused': blurred,
-      },
-      $attrs.class,
-    ]"
-    :for="$attrs.id"
-  >
-    <span class="kvass-contact-field__label" v-if="label">{{ label }}</span>
-    <component
-      :is="component"
-      class="kvass-contact-field__element"
-      v-bind="$attrs"
-      :value="modelValue"
-      @input="onInput"
-      @blur="onBlur"
-    >
-      <slot />
-    </component>
-  </label>
-</template>
-<style lang="scss">
-.kvass-contact-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-  &__label {
-    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
-    );
-    padding-left: var(
-      --kvass-contact-field-input-tranform,
-      calc(
-        var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2
-      )
-    );
-    border-radius: var(
-      --kvass-contact-border-radius,
-      var(--kvass-contact-default-border-radius)
-    );
-    border: var(
-        --kvass-contact-border-width,
-        var(--kvass-contact-default-border-width)
-      )
-      solid
-      var(
-        --kvass-contact-border-color,
-        var(--kvass-contact-default-border-color)
-      );
-    resize: vertical;
-    font: inherit;
-    color: inherit;
-    background-color: var(
-      --kvass-contact-input-background,
-      var(--kvass-contact-default-input-background)
-    );
-    &:focus-visible {
-      outline: var(
-          --kvass-contact-outline-width,
-          var(--kvass-contact-default-outline-width)
-        )
-        solid var(--kvass-contact-color, var(--kvass-contact-default-color));
-      outline-offset: var(
-        --kvass-contact-outline-offset,
-        var(--kvass-contact-default-outline-offset)
-      );
-    }
-  }
-  &--required {
-    .kvass-contact-field__label::after {
-      content: '*';
-      color: var(--kvass-contact-error, var(--kvass-contact-default-error));
-      margin-left: 0.3rem;
-    }
-    &.kvass-contact-field--focused {
-      .kvass-contact-field__element:invalid {
-        border-color: var(
-          --kvass-contact-error,
-          var(--kvass-contact-default-error)
-        );
-      }
-    }
-  }
-  &--full-width {
-    grid-column-end: span
-      var(
-        --kvass-contact-grid-columns,
-        var(--kvass-contact-default-grid-columns)
-      );
-  }
-}
-</style>

package/src/contact/components/Fieldset.ce.vue DELETED Viewed

@@ -1,63 +0,0 @@
-<script setup>
-defineProps({
-  label: String,
-})
-</script>
-<template>
-  <fieldset class="kvass-contact-fieldset">
-    <legend class="kvass-contact-fieldset__label" v-if="label">
-      {{ label }}
-    </legend>
-    <slot />
-  </fieldset>
-</template>
-<style lang="scss">
-.kvass-contact-fieldset {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: calc(
-    var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 4
-  );
-  margin: calc(
-      var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 1.5
-    )
-    0 0 0;
-  padding: calc(
-    var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2
-  );
-  border-radius: var(
-    --kvass-contact-border-radius,
-    var(--kvass-contact-default-border-radius)
-  );
-  border: var(
-      --kvass-contact-border-width,
-      var(--kvass-contact-default-border-width)
-    )
-    solid
-    var(--kvass-contact-border-color, var(--kvass-contact-default-border-color));
-  font: inherit;
-  &:focus-visible {
-    outline: var(
-        --kvass-contact-outline-width,
-        var(--kvass-contact-default-outline-width)
-      )
-      solid var(--kvass-contact-color, var(--kvass-contact-default-color));
-    outline-offset: var(
-      --kvass-contact-outline-offset,
-      var(--kvass-contact-default-outline-offset)
-    );
-  }
-  &__label {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    top: -1.4rem;
-    left: 0;
-  }
-}
-</style>