visma-meglerfront / sweet-modal-vue Goto Github PK

Hi,

There are multiple licenses in the repository. Which one is the proper one?

Hey there,
I just downloaded your project, run npm install then build-src, and i got a webpack issue:

Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
at SourceMapGenerator_validateMapping [as _validateMapping] (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack-sources\node_modules\source-map\lib\source-map-generator.js:276:15)
at SourceMapGenerator_addMapping [as addMapping] (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack-sources\node_modules\source-map\lib\source-map-generator.js:110:12)
at C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack-sources\node_modules\source-map\lib\source-map-generator.js:72:17
at Array.forEach ()
at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack-sources\node_modules\source-map\lib\source-map-consumer.js:157:14)
at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack-sources\node_modules\source-map\lib\source-map-generator.js:48:24)
at SourceMapSource.node (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack-sources\lib\SourceMapSource.js:32:35)
at SourceMapSource.proto.sourceAndMap (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack-sources\lib\SourceAndMapMixin.js:30:18)
at getTaskForFile (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\SourceMapDevToolPlugin.js:33:30)
at chunk.files.forEach.file (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\SourceMapDevToolPlugin.js:91:21)
at Array.forEach ()
at C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\SourceMapDevToolPlugin.js:89:18
at Array.forEach ()
at Compilation. (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\SourceMapDevToolPlugin.js:88:12)
at Compilation.applyPlugins1 (C:\nodejs\projects\sweet-modal-vue-master\node_modules\tapable\lib\Tapable.js:75:14)
at self.applyPluginsAsync.err (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\Compilation.js:670:11)
at next (C:\nodejs\projects\sweet-modal-vue-master\node_modules\tapable\lib\Tapable.js:202:11)
at Compilation.compilation.plugin (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\ProgressPlugin.js:119:6)
at next (C:\nodejs\projects\sweet-modal-vue-master\node_modules\tapable\lib\Tapable.js:204:14)
at Compilation. (C:\nodejs\projects\sweet-modal-vue-master\node_modules\babel-minify-webpack-plugin\dist\index.js:119:11)
at Compilation.applyPluginsAsyncSeries (C:\nodejs\projects\sweet-modal-vue-master\node_modules\tapable\lib\Tapable.js:206:13)
at self.applyPluginsAsync.err (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\Compilation.js:666:10)
at next (C:\nodejs\projects\sweet-modal-vue-master\node_modules\tapable\lib\Tapable.js:202:11)
at Compilation.compilation.plugin.callback (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\ProgressPlugin.js:115:6)
at Compilation.applyPluginsAsyncSeries (C:\nodejs\projects\sweet-modal-vue-master\node_modules\tapable\lib\Tapable.js:206:13)
at sealPart2 (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\Compilation.js:662:9)
at next (C:\nodejs\projects\sweet-modal-vue-master\node_modules\tapable\lib\Tapable.js:202:11)
at Compilation.compilation.plugin (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\ProgressPlugin.js:111:6)
at Compilation.applyPluginsAsyncSeries (C:\nodejs\projects\sweet-modal-vue-master\node_modules\tapable\lib\Tapable.js:206:13)
at Compilation.seal (C:\nodejs\projects\sweet-modal-vue-master\node_modules\webpack\lib\Compilation.js:605:8)

Yeah, I'm working on windows :)
Didn't touch anything yet. I know this is a webpack issue, but any idea? Am I the only one to not successfully build your project? I didn't found anything on web so far and i'm quite bad at webpack things!

please publish bower

I'm using Vue2, after I install the package I get this error.

I'm a newbie in Vue.js so my explanation might be messy.

I've installed via npm install sweet-modal-vue --save-dev, and added import { SweetModal, SweetModalTab } from 'sweet-modal-vue' to my Main.js file. When I tried to compile I've got:

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

I'm using Gulp executing gulp vueify, it's my gulpfile.js:

var gulp = require('gulp');
var clean = require('gulp-clean');
var browserify = require('browserify');
var vueify = require('vueify');
var path = require('path');
var fs = require('fs');
var babelify = require('babelify');

gulp.task('clean-vue', function () {
    return gulp.src('./web/vue', {read: false})
        .pipe(clean());
});

gulp.task('vueify', ['clean-vue'], function() {
    fs.mkdirSync('./web/vue');
    browserify('./web/js/Main.js')
        .transform(vueify)
        .transform(babelify)
        .bundle()
        .pipe(fs.createWriteStream(path.join('./web/vue/Main.js')));
});

Module build failed: Error: Couldn't find preset "es2015" relative to directory.

When I important the component it shows me module bild failed, it cant find the .
babelrc in sweet-modal-vue

Relatively new to Vue.js, quick one.

I want to include this via CDN, eg. <script src='//cdn.jsdelivr.net/npm/[email protected]/dist/min/jquery.sweet-modal.min.js'></script>

However in my component if I use

Vue.use(SweetModal)

I get

Uncaught ReferenceError: SweetModal is not defined

This is not an issue with SweetModal I know, but a little help...... :) thanks.

It makes it easier to pull in the dist files and not just the modules. It's useful for people who use unpkg.com or similar tools that look for the browser files https://github.com/defunctzombie/package-browser-field-spec

Please check attached image.

Issue is when, there are more content, sweet-model get overlapped by footer & no scrollbar present to reach at bottom content.

Added following css for workaround.

.sweet-modal-overlay .sweet-content-content{
  margin-bottom: 2.5em !important;
}

is there any better way to handle this kind of use case.

Long modals -- modals with a lot of content -- don't scroll properly. The page behind scrolls, but the modal itself doesn't.

This is unusable with a big chunk of content due to this.

SyntaxError: Unexpected token < in SweetModal.vue

How to get modal current is open or close ?

Hello there, if i place an inside sweet modal (content), i can not check/uncheck it.

Hello again,

is it possible to close the modal when a button inside is closed? i don't want the use to click twice. Thank you very much.

Currently, this component doesn't work when using Vue with Typescript. It would be awesome if you could include typings.

For some reason this stopped working today.

App.js:

import { SweetModal, SweetModalTab } from 'sweet-modal-vue'

Vue.component('SweetModal', SweetModal);

const app = new Vue({
    el: '#app',
});

php file:

<sweet-modal ref="wodModal">

      <wod-new></wod-new>

</sweet-modal>

I'm using single file components and sweet-modal-vue ver 1.2 and Vue.js2 .
I have tried the demo example but get this error :

[Vue warn]: Unknown custom element: <SweetModal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Index> at src\components\home.vue
       <App> at src\App.vue
         <Root>

As you can see in the picture below the title's position isn't vertically centered.

Removing the margin rule solved the problem:

Is it possible to disable the automatic fullscreen when the screen size is for mobile ?

Excuse me, why can't the plug-in drag the scroll bar under the Firefox browser?
But the other browsers do not have this problem。

My English is not very good. It may not be very clear.

This plug-in runs smoothly in other browsers, but only in the Firefox browser, if the rolling bar appears in the content area of the box, it can not be dragged by the mouse, but can only be slid by roller. The people you want to see can help to solve this problem. Thank you again!

hi, is there a problem to use radio input in sweet-modal?

I write this:

<sweet-modal title="Test" ref="testRadio">
        <input type="radio" name="ccc" v-model="pick" value="a"> test
        <input type="radio" name="ccc" v-model="pick" value="b"> test2
</sweet-modal>

but I can not select any one, help! please!

This library gives me an error when using Nuxt/SSR.

[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token import
SyntaxError: Unexpected token import

When the blocking prop is enabled and the user clicks outside the dialog a "pulse" effect occurs to provide some feedback that the user cannot dismiss the modal that way.

I recently ran into a case in which I was using a select menu whose options extended below the bottom of the dialog. I am able to select all options without difficulty. However, when I select a menu option that is below the bottom of the modal the click event gets through to SweetModal and it responds by pulsing the modal inappropriately.

I suppose one solution is to modify the select to trap the event so it is never passed on to SweetModal, but it would be nice if there was an option to control this kind of feedback in any case, as not all people like it or need it.

Please add a prop or other means to control the pulse effect while the blocking prop is present. I believe it should be disabled by default.

plugin fails to render given the configuration shown in this stackoverflow post.

Full code available in this github repo.

Hello everyone!

I was facing a bug this other day that my scrollbars disappear for whatever reason. Today I was able to confirm that it is because of SweetModal.

The modal opens, it's all good, but my component looks like this:

<template>
<div>
  <h2 class="ui header">
    <i class="delete icon"></i>
    <div class="content">
      {{ $t('enterprises.tabs.settings.delete.title') }}
      <div class="sub header">
      {{ $t('enterprises.tabs.settings.delete.subHeader') }}
      </div>
    </div>
  </h2>
  <div class="ui negative message">
    <div class="header">
      {{ $t('enterprises.tabs.settings.delete.messageHeader') }}
    </div>
    <p> {{ $t('enterprises.tabs.settings.delete.message') }}</p>
  </div>
  <button @click="confirm" class="ui red button">
    {{ $t('enterprises.tabs.settings.delete.title') }}
  </button>
  <sweet-modal
    ref="confirmationModal"
    overlay-theme="dark"
    icon="warning">
    <template slot="title">
      {{ $t('enterprises.tabs.settings.delete.modalTitle') }} - {{ enterprise.name }}
    </template>
    <template slot="default">
      {{ $t('enterprises.tabs.settings.delete.deleteConfirmation') }}
    </template>
    <template slot="button">
      <div class="ui red button" @click="deleteProject">{{ $t('actions.yes') }}</div>
      <div class="ui basic button" @click="$refs.confirmationModal.close()">{{ $t('actions.no') }}</div>
    </template>
  </sweet-modal>
</div>
</template>
<script>
import {SweetModal} from 'sweet-modal-vue'

export default {
  name: 'DeleteEnterpriseForm',
  props: {
    enterprise: {
      type: Object,
      default: null
    }
  },
  methods: {
    confirm: function () {
      this.$refs.confirmationModal.open()
    },
    deleteProject: function () {
      this.$store.dispatch('enterprises/delete', {
        item: this.enterprise
      })
    }
  },
  components: {
    SweetModal
  }
}
</script>
<style scoped>
.ui.header {
  padding-bottom: 1em;
}
</style>

Notice that inside my deleteProject method, there is no explicit close. When there is no explicit closure of the modal, _unlockBody will not be called. Without it being called, there no scroll bars.

Hi the contents of the modal is blurred due to animations. How to fix that?!

when I updated from v1.2.0 to v2.0.0, the title position changed near the top of title area,

and I fixed that with css style
.sweet_modal .sweet_title { display: flex; align-item: center; }
It's useful to me.

When I follow the basic installation instructions, I get an error: Uncaught SyntaxError: Unexpected token import in sweet-modal-view/src/main.js. I believe this is because my build (based on a Vue 2.0 starter project) does not support transpiling node modules.

When I edit sweet-modal-vue's package.json to point to the dist folder as other vue component modules do, the exported object is empty.

Because of the use of setTimeout, closing or opening the modal makes a delay/conflict in reopening or closing it.

it possible to run a function when the modal user closes it?
If (modal_is_close) {
do_something
}

I have an app consisting of several top-level components. These are loaded by vue-router when the appropriate route is specified in the URI. You can think of this as a simple SPA.

Each top-level component has a few sweet modals implemented as components. In each modal component's template I create a "ref" attribute with a name like "attachment_delete" like this:

<template>
    <sweet-modal
        ref="attachment_delete"
        title="Delete Attachment?"
        icon="warning"
        blocking
        overlay-theme="dark"
        >Are you sure you want to delete this {{ typename }} attachment?
        <br>This action cannot be reverted.
        <button
            type="button"
            class="btn btn-success"
            slot="button"
            @click="onBtnCancelClick"
            ><span class="fa fa-arrow-left"></span> Cancel
        </button>
      </sweet-modal>
</template>

In the same modal component I have an event handler that listens for an event that says "open the delete attachment modal". This handler then calls:

this.$refs.attachment_delete.open()

This works as expected if I navigate directly to the URI or if I reload the page (F5). But when I click on my nav menu buttons, which use relative paths to cause vue-router to switch contexts and load the appropriate top-level component, the appropriate component loads correctly but none of my modals work anymore. The error I get is:

Uncaught TypeError: Cannot read property 'open' of undefined

Printing out $refs in both the working and non-working cases reveals the problem. In the working case I see the $refs object defined with:

attachment_delete: VueComponent

In the non-working case I see:

attachment_delete:  undefined

So the error is correct, but it's not clear to me why the ref property is present but not defined. I suppose this could be a bug in vue-router, but this is the only context in which I can duplicate the problem so I figured I'd report here to get your feedback and then report to vue if necessary.

Since the modal doesn't work on a promise to contextually know when it's opened or closed as part of another method call it would be useful to be able to pipe through some arguments to the close method so we could tell the difference between a cancel and a completed operation.

I'm beginning with modern front-end and I'm a little bit stuck when trying to use this plugin.

I added this to package.json under 'dependencies':

"sweet-modal-vue": "2.0.0"

and I run npm install

Then in my component, I did this:

<template>
  <sweet-modal>
    <h4>Basic Modal</h4>
  </sweet-modal>
</template>

<script>
import { SweetModal } from 'sweet-modal-vue'

export default {
  name: 'my-modal',
  components: { SweetModal }
}
</script>

and when I try to build I get this error:

These dependencies were not found:
* !!vue-style-loader!css-loader?sourceMap!../../../vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-5993c9f0","scoped":false,"hasInlineConfig":true}!sass-loader?sourceMap!../../../vue-loader/lib/selector?type=styles&index=0!./SweetModal.vue in ./node_modules/sweet-modal-vue/src/components/SweetModal.vue

Not sure what to do with that - any help would be appreciated!

Hi,
I tried using your library, but it needs a lot of manual css-overrides to make it work like I want it to.
It currently:

• Uses the Roboto-font instead of whatever is defined on e.g. <body>
• Pollutes/gets polluted by other css-frameworks
  • e.g. .title is very general and should be named .sweet-modal-title
• Disallows long titles in sweet-modal-tab

I'm using single file components and would like to be able to register the modal component globally. Can this be done?

I've tried in the main.js file to import SweetModal and then include it in components: { SweetModal, App}, but then if I try to use SweetModal I get the error
[Vue warn]: Unknown custom element: <sweet-modal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

If I however inside the component (.vue file) file src/components/mycomponent.vue I include the component, it works.

Note that I'm running sweet modal 1.1.10 as recommended by #22

I added this to a new Laravel project that I use vue in and get this error:

error  in ./~/sweet-modal-vue/src/components/SweetModal.vue

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/PackyTagliaferro/Site
s/league/node_modules/sweet-modal-vue"

I recently updated from 1.1 to 2.0.0 to take advantage of the new width property.

I rebuilt my code without any use of the width property (thus the default width is active) and now I am consistently seeing a brief appearance of a vertical scrollbar on the right side of all dialogs as they open using the new 2.0.0 code. Once the dialog reaches full size the scrollbar disappears but by then the damage is already done -- it destroys the smooth zoom-in effect and overall professional appearance of the dialog. I've verified this occurs in both Chrome and Firefox.

Worse, in Chrome, a good portion of the dialog (including the text, field borders, etc.) that ultimately zooms into view is blurred or offset by a pixel or two for some reason. This appears to be an artifact of the transition. This blurring problem does not occur on Firefox so that at least appears to be a browser-specific phenomenon.

I'm not sure what change is actually causing the scroll bar to appear but I believe it should be reverted until a fix can be developed, as it destroys the otherwise smooth transition and appearance of the dialog. I will be going back to 1.1.

A workaround may involve eliminating the zoom-in transition so the dialog appears in the maximum allowed width out of the box but I haven't tried that yet.

Is there any way to set the width of the modal?, no props, no styles.....

After upgrading to Vue 2.4 & vue-loader 13.x, all my sweet-modal components are not working:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <SweetModal>
       <Hello> at src/components/Hello.vue
          <App> at src/App.vue
            <Root>

vue.esm.js?efeb:566 TypeError: this.$refs.mobileMenu.close is not a function

Am I the only one getting this error? How to fix it?

Hello,

i got the modal to work by changing the display to block as another user suggested but i cannot get the modal to center in the browser.

First off was i wrong to follow the css change from this user and second, should i be doing something different to center it?

Not sure if I'm missing something but it looks like the icon success doesn't work with modal-theme="dark"

Looks like this:

Currently if I have some tabs like so:

<sweet-modal-tab
            :title="submission.name"
            :id="submission.video_id"
            v-for="submission in userSubmissions"
            v-if="loaded">

            <h2>{{ submission.name }}</h2>

      </sweet-modal-tab>

There are no tabs. The content will be loaded but the tabs never are so I cant navigate or see the content thats in the <slot>. Can you not do dynamic tabs with a v-for?

hi i use SweetModal so npm install sweet-modal-vue and then
import { SweetModal, SweetModalTab } from 'sweet-modal-vue'

components: {
 SweetModal,
 SweetModalTab
}

how fix this ....??

version: > v1.1.2
description: when opened modal, the scrollbar will show just a few millisecond and then hide

Hello!

I have tried this example:

<sweet-modal icon="error" hide-close-button blocking overlay-theme="dark" modal-theme="dark">
	This is an error ...

	<sweet-button slot="button" color="red" v-on:click="closeExample('darkWithBlockingError')">Press this Button</sweet-button>
</sweet-modal>

and I get error

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Also if I use example:

<sweet-modal>This is an alert.</sweet-modal>

I have not errors. But I see empty white layer without dialog window after this.$refs.modal.open();
Div with class .sweet-modal has style display:none;

I have tried on Vue 2.1.10 and Vue 2.3.3

Hello all!

I was checking the examples and the source, to see if there was a way to have nested modals, without them being triggered in the parent modal.

Let me explain. I have the following structure:

• Page (triggers the main modal)
• Modal A
  • Component A (triggers secondary modal)
    • Modal B

Everything works, but when component A triggers modal B, that modal is being rendered inside the first modal. Check screenshot:

Is there a way to control it, so this new modal pops up without being inside the first modal?

Hi, sweet-modal-vue developers,
Is it possible to rise multiple modals one on top of another with the library?

Hi,

I can't figure out how to get tihs to compile.
I tried getting this up in a L5.4 installation, but when I try to compile, I'm getting the error that he could not load the scss-loader.

Anyone knows how to have laravel mix know to use the sass loader for scss?
I have found some solutions, but none of them work. The best I could get, is no errors, but an indefinitely running webpack procedure that doesn't spawn any errors, but seems to be stuck in an infinite loop.

Any assistance or thoughts would be much appreciated!

The plugin looks awesome by the way!

Cheers;
David.

Consider the follow example

  <div class="card-contract__header">
    <svgicon
    :name="lowerCompanyName"
    :original="true"
    width="120"
    :class="lowerCompanyName"
    preserveAspectRatio="xMinYMid meet"
    height="45">
    </svgicon>

    <button type="button" name="button" class="captions" @click="this.$refs.modal.open()">{{$t('More details')}}</button>
  </div>

  <div class="card-contract__content">
    <div class="card-contract__entry" v-for="(entry, index, key) in getDisplayData">
      <span class="card-contract__label">{{ entry.label }}</span>
      <span class="card-contract__value" :class="setStatusColor(entry.content)">{{ entry.content }}</span>
    </div>
  </div>

  <sweet-modal ref="modal">
      Lorem ipsum [...]
    </sweet-modal>
</div>

import { SweetModal } from 'sweet-modal-vue'

export default {
  name: 'contract',
  props: {
    contract: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      displayData: []
    }
  },
  components: {
    SweetModal
  },
  computed: {
    getDisplayData () {
      let displayData = [
        {
          label: this.$t('Status'),
          content: this.contract.status
        },
        {
          label: this.$t('Insurance type'),
          content: this.contract.product_name
        },
        {
          label: this.$t('Contract nº'),
          content: this.contract.policy_number
        }
      ]

      return displayData
    },
    lowerCompanyName () {
      return this.contract.insured_company.toLowerCase()
    }
  },
  mounted () {
  },
  methods: {
    setStatusColor: function (label) {
      return {
        green: label === 'Em Vigor',
        red: label === 'Terminado'
      }
    },

    openModal: (ref) => {
      this.$refs.modal.open()
    }
  }
}

Using the method openModal or directly in the view the method provided in the documentation doesn't work and retrieve the follow error.

Uncaught TypeError: Cannot read property '$refs' of null

Any ideia in how to solve this?