@eturnity/eturnity_reusable_components 8.19.8-EPDM-12618.6 → 8.19.8-EPDM-13618.0

package/src/mixins/inputValidations.js

@@ -1,97 +1,97 @@
-export default {
-  props: {
-    rules: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      error: false,
-      errMessage: '',
-    }
-  },
-  methods: {
-    validateInput(value) {
-      this.resetError()
-
-      this.rules.forEach((rule) => {
-        switch (rule) {
-          case 'required':
-            if (value) {
-              this.error = true
-              this.errMessage = this.$gettext('Required field')
-            }
-            break
-          case 'number':
-            this.checkNumber(value)
-            break
-          case 'string':
-            this.checkString(value)
-            break
-          case 'email':
-            this.checkEmail(value)
-            break
-          case 'phone':
-            this.checkPhone(value)
-            break
-          case 'year':
-            this.checkYear(value)
-            break
-        }
-      })
-      this.$emit('is-valid', !this.error)
-    },
-
-    resetError() {
-      this.error = false
-      this.errMessage = ''
-    },
-
-    checkNumber(value) {
-      this.resetError()
-
-      if (value && isNaN(value)) {
-        this.error = true
-        this.errMessage = this.$gettext('invalid_number')
-      }
-    },
-
-    checkString(value) {
-      this.resetError()
-
-      if (value && value.length < 3) {
-        this.error = true
-        this.errMessage = this.$gettext('invalid_string')
-      }
-    },
-
-    checkEmail(value) {
-      this.resetError()
-
-      if (value && !value.includes('@')) {
-        this.error = true
-        this.errMessage = this.$gettext('Invalid email address')
-      }
-    },
-
-    checkPhone(value) {
-      this.resetError()
-
-      if (value && !/^\d{10}$/.test(value)) {
-        this.error = true
-        this.errMessage = this.$gettext('invalid_phone')
-      }
-    },
-
-    checkYear(value) {
-      this.resetError()
-
-      if (value && (isNaN(value) || value < 1900 || value > 2100)) {
-        this.error = true
-        this.errMessage = this.$gettext('invalid_year')
-      }
-    },
-  },
-}
+export default {
+  props: {
+    rules: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      error: false,
+      errMessage: '',
+    }
+  },
+  methods: {
+    validateInput(value) {
+      this.resetError()
+
+      this.rules.forEach((rule) => {
+        switch (rule) {
+          case 'required':
+            if (value) {
+              this.error = true
+              this.errMessage = this.$gettext('Required field')
+            }
+            break
+          case 'number':
+            this.checkNumber(value)
+            break
+          case 'string':
+            this.checkString(value)
+            break
+          case 'email':
+            this.checkEmail(value)
+            break
+          case 'phone':
+            this.checkPhone(value)
+            break
+          case 'year':
+            this.checkYear(value)
+            break
+        }
+      })
+      this.$emit('is-valid', !this.error)
+    },
+
+    resetError() {
+      this.error = false
+      this.errMessage = ''
+    },
+
+    checkNumber(value) {
+      this.resetError()
+
+      if (value && isNaN(value)) {
+        this.error = true
+        this.errMessage = this.$gettext('invalid_number')
+      }
+    },
+
+    checkString(value) {
+      this.resetError()
+
+      if (value && value.length < 3) {
+        this.error = true
+        this.errMessage = this.$gettext('invalid_string')
+      }
+    },
+
+    checkEmail(value) {
+      this.resetError()
+
+      if (value && !value.includes('@')) {
+        this.error = true
+        this.errMessage = this.$gettext('Invalid email address')
+      }
+    },
+
+    checkPhone(value) {
+      this.resetError()
+
+      if (value && !/^\d{10}$/.test(value)) {
+        this.error = true
+        this.errMessage = this.$gettext('invalid_phone')
+      }
+    },
+
+    checkYear(value) {
+      this.resetError()
+
+      if (value && (isNaN(value) || value < 1900 || value > 2100)) {
+        this.error = true
+        this.errMessage = this.$gettext('invalid_year')
+      }
+    },
+  },
+}

package/src/router/dynamicRoutes.js

@@ -1,23 +1,23 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Test from '@/Test.vue'
-import Toggle from '@/components/inputs/toggle/index.vue'
-
-const routes = [
-  {
-    path: '/',
-    name: 'Test',
-    component: Test,
-  },
-  {
-    path: '/toggle',
-    name: 'Toggle',
-    component: Toggle,
-  },
-]
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
-
-export default router
+import { createRouter, createWebHistory } from 'vue-router'
+import Test from '@/Test.vue'
+import Toggle from '@/components/inputs/toggle/index.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Test',
+    component: Test,
+  },
+  {
+    path: '/toggle',
+    name: 'Toggle',
+    component: Toggle,
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router

package/src/stories/Button.stories.js

@@ -1,48 +1,48 @@
-import MyButton from './Button.vue'
-
-// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
-export default {
-  title: 'Example/Button',
-  component: MyButton,
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: {
-      control: 'color',
-    },
-    onClick: {},
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-}
-
-// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-}
-
-export const Secondary = {
-  args: {
-    label: 'Button',
-  },
-}
-
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-}
-
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-}
+import MyButton from './Button.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+    onClick: {},
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+}
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+}
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+}
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+}

package/src/stories/Button.vue

@@ -1,52 +1,52 @@
-<template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-</template>
-
-<script>
-import './button.css';
-import { reactive, computed } from 'vue';
-
-export default {
-  name: 'my-button',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      validator: function (value) {
-        return ['small', 'medium', 'large'].indexOf(value) !== -1;
-      },
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-
-  emits: ['click'],
-
-  setup(props, { emit }) {
-    props = reactive(props);
-    return {
-      classes: computed(() => ({
-        'storybook-button': true,
-        'storybook-button--primary': props.primary,
-        'storybook-button--secondary': !props.primary,
-        [`storybook-button--${props.size || 'medium'}`]: true,
-      })),
-      style: computed(() => ({
-        backgroundColor: props.backgroundColor,
-      })),
-      onClick() {
-        emit('click');
-      },
-    };
-  },
-};
-</script>
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+</template>
+
+<script>
+import './button.css';
+import { reactive, computed } from 'vue';
+
+export default {
+  name: 'my-button',
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1;
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    props = reactive(props);
+    return {
+      classes: computed(() => ({
+        'storybook-button': true,
+        'storybook-button--primary': props.primary,
+        'storybook-button--secondary': !props.primary,
+        [`storybook-button--${props.size || 'medium'}`]: true,
+      })),
+      style: computed(() => ({
+        backgroundColor: props.backgroundColor,
+      })),
+      onClick() {
+        emit('click');
+      },
+    };
+  },
+};
+</script>