@weni/unnnic-system 1.16.37 → 1.16.39-develop.0

package/src/stories/SelectSmart.stories.js

@@ -13,39 +13,6 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicSelectSmart },
-  data() {
-    return {
-      exampleValue: '',
-    };
-  },
-
-  methods: {
-    addDynamicOption() {
-      const value = Math.floor(Math.random() * 1e3);
-
-      this.exampleOptions.push({
-        value: `option${value}`,
-        label: `Option ${value}`,
-      });
-    },
-  },
-
-  template: `
-    <div>
-      <unnnic-select-smart
-        v-model="exampleValue"
-        :options="exampleOptions"
-        v-bind="$props"
-      />
-
-      <button v-if="!(disabled || autocomplete)" @click="addDynamicOption">Add dynamic option</button>
-    </div>
-  `,
-});
-
 const exampleOptionsDefault = [
   { value: '', label: 'Select some option' },
   { value: '5', label: 'Option 5' },
@@ -97,6 +64,41 @@ const exampleOptionsFirstSelected = [
   { value: '5', label: 'Option 5' },
 ];
 
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicSelectSmart },
+  data() {
+    return {
+      exampleValue: [],
+    };
+  },
+
+  methods: {
+    addDynamicOption() {
+      const value = Math.floor(Math.random() * 1e3);
+
+      this.exampleOptions.push({
+        value: `option${value}`,
+        label: `Option ${value}`,
+      });
+    },
+  },
+
+  template: `
+    <div>
+      <unnnic-select-smart
+        v-model="exampleValue"
+        :options="exampleOptions || []"
+        v-bind="$props"
+      />
+
+      <p>v-model: {{exampleValue}}</p>
+
+      <button v-if="!(disabled || autocomplete)" @click="addDynamicOption">Add dynamic option</button>
+    </div>
+  `,
+});
+
 export const Default = Template.bind({});
 Default.args = {
   exampleOptions: exampleOptionsDefault,
@@ -115,6 +117,7 @@ OrderedByIndex.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  exampleOptions: exampleOptionsDefault,
   disabled: true,
 };
 

package/src/stories/TransitionRipple.stories.js

@@ -0,0 +1,34 @@
+import unnnicTransitionRipple from '../components/TransitionRipple/TransitionRipple.vue';
+import colorsList from '../utils/colorsList';
+
+export default {
+  title: 'Transitions/Ripple',
+  component: unnnicTransitionRipple,
+  argTypes: {
+    color: {
+      control: {
+        type: 'select',
+        options: colorsList,
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    unnnicTransitionRipple,
+  },
+  template: `
+    <div ref="transitionContainer" @mousedown="(event) => this.$refs.transitionRipple.addRipple(event)" style="width: 100%; height: 100px;">
+      Click to activate transition
+
+      <unnnic-transition-ripple ref="transitionRipple" v-bind="$props" />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  color: 'weni-600',
+};

package/src/utils/call.js

@@ -3,14 +3,14 @@ import Alert from '../components/Alert/Alert.vue';
 import Modal from '../components/Modal/Modal.vue';
 
 export default {
-  callAlert({ props, seconds }) {
+  callAlert({ props }) {
     const AlertClass = Vue.extend(Alert);
     const instance = new AlertClass({
       propsData: { ...props, onClose: () => { instance.$el.remove(); } },
+      created() { this.$on(['close'], () => { instance.$el.remove(); }); },
     });
     instance.$mount();
     document.body.appendChild(instance.$el);
-    setTimeout(() => { instance.$el.remove(); }, seconds * 1000);
   },
 
   callModal({ props }) {