@designcrowd/fe-shared-lib 1.5.7-eng-3522 → 1.5.7-fix-icon

package/src/atoms/components/Modal/HashRouteModal.stories.js

@@ -1,68 +1,68 @@
-import { useRouter } from 'vue-router';
-import HashRouteModal from './HashRouteModal.vue';
-import Button from '../Button/Button.vue';
-
-export default {
-  title: 'Components/Hash Router Modal',
-  component: HashRouteModal,
-};
-
-const controlArgs = {
-  isVisible: true,
-};
-
-export const Sample = (args, { argTypes }) => {
-  const router = useRouter();
-
-  return {
-    components: {
-      HashRouteModal,
-    },
-    props: Object.keys(argTypes),
-    template: `
-      <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
-      Your component goes here
-      </HashRouteModal>
-    `,
-    methods: {
-      closeLoginModal() {
-        this.isVisible = false;
-      },
-    },
-    router,
-  };
-};
-
-Sample.args = controlArgs;
-
-export const OpenWithButton = () => {
-  const router = useRouter();
-
-  return {
-    components: {
-      HashRouteModal,
-      Button,
-    },
-    data() {
-      return {
-        isVisible: false,
-      };
-    },
-    template: `
-      <div>
-        <Button size="medium" variant="primary" label="Click Me" @on-click="isVisible = true" />
-        <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
-        Your component goes here
-        </HashRouteModal>
-      </div>
-    `,
-    methods: {
-      closeLoginModal() {
-        this.isVisible = false;
-      },
-    },
-    router,
-  };
-};
-
-OpenWithButton.args = controlArgs;
+import { useRouter } from 'vue-router';
+import HashRouteModal from './HashRouteModal.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Hash Router Modal',
+  component: HashRouteModal,
+};
+
+const controlArgs = {
+  isVisible: true,
+};
+
+export const Sample = (args, { argTypes }) => {
+  const router = useRouter();
+
+  return {
+    components: {
+      HashRouteModal,
+    },
+    props: Object.keys(argTypes),
+    template: `
+      <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+      Your component goes here
+      </HashRouteModal>
+    `,
+    methods: {
+      closeLoginModal() {
+        this.isVisible = false;
+      },
+    },
+    router,
+  };
+};
+
+Sample.args = controlArgs;
+
+export const OpenWithButton = () => {
+  const router = useRouter();
+
+  return {
+    components: {
+      HashRouteModal,
+      Button,
+    },
+    data() {
+      return {
+        isVisible: false,
+      };
+    },
+    template: `
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="isVisible = true" />
+        <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+        </HashRouteModal>
+      </div>
+    `,
+    methods: {
+      closeLoginModal() {
+        this.isVisible = false;
+      },
+    },
+    router,
+  };
+};
+
+OpenWithButton.args = controlArgs;

package/src/atoms/components/Modal/HashRouteModal.vue

@@ -1,120 +1,120 @@
-<template>
-  <Modal
-    :simple="simple"
-    :remove-horizontal-margin="removeHorizontalMargin"
-    :visible="visible"
-    :mandatory="mandatory"
-    :mode="mode"
-    :classes="classes"
-    :size="size"
-    :full-screen-breakpoint="fullScreenBreakpoint"
-    :close-on-esc="closeOnEsc"
-    :hide-scrollbar="hideScrollbar"
-    @close-modal="onCloseModal"
-  >
-    <template #header>
-      <slot name="header" />
-    </template>
-    <template #default>
-      <slot name="default" />
-    </template>
-    <template #footer>
-      <slot name="footer" />
-    </template>
-  </Modal>
-</template>
-<script>
-import Modal from './Modal.vue';
-import HashRouterMixin from '../../mixin/hash-router-mixin';
-
-export default {
-  components: {
-    Modal,
-  },
-  mixins: [HashRouterMixin],
-  props: {
-    simple: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    removeHorizontalMargin: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    mandatory: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    mode: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    classes: {
-      type: [String, Object],
-      required: false,
-      default: '',
-    },
-    size: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    fullScreenBreakpoint: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    closeOnEsc: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    hideScrollbar: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
-  computed: {
-    modalTag() {
-      // eslint-disable-next-line no-underscore-dangle
-      return `modal-${this.$.uid}`;
-    },
-  },
-  watch: {
-    visible(visible) {
-      if (visible && !this.mandatory) {
-        this.hashRoutePush(this.modalTag);
-      }
-    },
-  },
-  mounted() {
-    if (this.visible && !this.mandatory) {
-      this.hashRoutePush(this.modalTag);
-    }
-  },
-  methods: {
-    onHashRouteChange(hash) {
-      if (hash !== this.modalTag || !this.visible) {
-        return;
-      }
-
-      this.$emit('close-modal', {});
-    },
-    onCloseModal($event) {
-      this.hashRouteBack(this.modalTag);
-
-      this.$emit('close-modal', $event);
-    },
-  },
-};
-</script>
+<template>
+  <Modal
+    :simple="simple"
+    :remove-horizontal-margin="removeHorizontalMargin"
+    :visible="visible"
+    :mandatory="mandatory"
+    :mode="mode"
+    :classes="classes"
+    :size="size"
+    :full-screen-breakpoint="fullScreenBreakpoint"
+    :close-on-esc="closeOnEsc"
+    :hide-scrollbar="hideScrollbar"
+    @close-modal="onCloseModal"
+  >
+    <template #header>
+      <slot name="header" />
+    </template>
+    <template #default>
+      <slot name="default" />
+    </template>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </Modal>
+</template>
+<script>
+import Modal from './Modal.vue';
+import HashRouterMixin from '../../mixin/hash-router-mixin';
+
+export default {
+  components: {
+    Modal,
+  },
+  mixins: [HashRouterMixin],
+  props: {
+    simple: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    removeHorizontalMargin: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    mandatory: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    classes: {
+      type: [String, Object],
+      required: false,
+      default: '',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    fullScreenBreakpoint: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    closeOnEsc: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hideScrollbar: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    modalTag() {
+      // eslint-disable-next-line no-underscore-dangle
+      return `modal-${this.$.uid}`;
+    },
+  },
+  watch: {
+    visible(visible) {
+      if (visible && !this.mandatory) {
+        this.hashRoutePush(this.modalTag);
+      }
+    },
+  },
+  mounted() {
+    if (this.visible && !this.mandatory) {
+      this.hashRoutePush(this.modalTag);
+    }
+  },
+  methods: {
+    onHashRouteChange(hash) {
+      if (hash !== this.modalTag || !this.visible) {
+        return;
+      }
+
+      this.$emit('close-modal', {});
+    },
+    onCloseModal($event) {
+      this.hashRouteBack(this.modalTag);
+
+      this.$emit('close-modal', $event);
+    },
+  },
+};
+</script>