@veritree/ui 0.0.1 → 0.1.3

package/src/Textarea/VTTextarea.vue

@@ -0,0 +1,77 @@
+<template>
+  <textarea
+    :class="classes"
+    class="form-control"
+    :data-theme="theme"
+    :value="value"
+    v-on="listeners"
+  ></textarea>
+</template>
+
+<script>
+export default {
+  name: 'VTTextarea',
+
+  props: {
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
+    theme: {
+      type: String,
+      default: null,
+      validator(value) {
+        return ['dark'].includes(value);
+      },
+    },
+    variant: {
+      type: [String, Object],
+      default: '',
+      validator(value) {
+        if (value === '' || typeof value === 'object') {
+          return true;
+        }
+
+        return ['success', 'warning', 'error'].includes(value);
+      },
+    },
+    value: {
+      type: [String, Number, Object],
+      default: null,
+    },
+  },
+
+  computed: {
+    classes() {
+      const classes = {};
+
+      if (this.variant) {
+        classes[`form-control--${this.variant}`] = true;
+      }
+
+      return classes;
+    },
+
+    listeners() {
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign(
+        {},
+        // We add all the listeners from the parent
+        this.$listeners,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          input: (event) => {
+            if (this.lazy) return;
+            this.$emit('input', event.target.value);
+          },
+          blur: (event) => {
+            this.$emit('blur', event);
+          },
+        }
+      );
+    },
+  },
+};
+</script>

package/src/utils/ids.js

@@ -0,0 +1,34 @@
+// Generate id
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
+let gen = null;
+
+function* idMaker() {
+  let index = 0;
+  while (true) yield index++;
+}
+
+export const genId = () => {
+  if (!gen) gen = idMaker();
+  return gen.next().value;
+};
+
+// Add leading zeros
+// export const pad = (num, size) => {
+//   let s = num + '';
+
+//   while (s.length < size) {
+//     s = '0' + s;
+//   }
+
+//   return s;
+// };
+
+export const addZerosToId = (id) => {
+  let formattedId = null;
+
+  if (id < 10) formattedId = '000' + id;
+  else if (id < 100) formattedId = '00' + id;
+  else if (id < 1000) formattedId = '0' + id;
+
+  return '#' + formattedId;
+};

package/src/utils/objects.js

@@ -0,0 +1,139 @@
+/**
+ * @param {*} obj
+ * @returns boolean
+ */
+export const isObj = (obj) => {
+  return obj !== null && typeof obj === 'object';
+};
+
+/**
+ * @param {*} obj
+ * @returns {boolean}
+ */
+export const isAnEmptyObj = (obj) => {
+  if (!isObj(obj)) return false;
+
+  return Object.keys(obj).length === 0;
+};
+
+/**
+ * @param {string} key
+ * @param {obj} obj
+ * @returns {boolean}
+ */
+export const isKeyInObj = (key, obj) => {
+  if (!isObj(obj) || !key) return false;
+
+  return Object.keys(obj).includes(key);
+};
+
+/**
+ * Compare objects deeply
+ * @source https://dmitripavlutin.com/how-to-compare-objects-in-javascript/
+ *
+ * @param {obj} obj1
+ * @param {obj} obj2
+ * @returns {boolean}
+ */
+export const areObjsEqual = (obj1, obj2) => {
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    const val1 = obj1[key];
+    const val2 = obj2[key];
+    const areObjects = isObj(val1) && isObj(val2);
+
+    if (
+      (areObjects && !areObjsEqual(val1, val2)) ||
+      (!areObjects && val1 !== val2)
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+/**
+ * Compare two array of objects and returns an array with the differences
+ *
+ * @param {array} oldArr
+ * @param {array} newArr
+ * @returns {array}
+ */
+export const diffArrOfObjs = (oldArr, newArr) => {
+  const result = [];
+
+  // compare all elements of oldArr with all elements of newArr
+  // and if there is any difference, push it to result
+  oldArr.forEach((obj, i) => {
+    if (!newArr[i]) return;
+
+    const obj2 = newArr[i];
+
+    if (!areObjsEqual(obj, obj2)) {
+      result.push(newArr[i]);
+    }
+  });
+
+  // compare size and if newArr has more elements,
+  // push them to result because they are new
+  if (oldArr.length < newArr.length) {
+    newArr.slice(oldArr.length).forEach((obj) => {
+      result.push(obj);
+    });
+  }
+
+  return result;
+};
+
+/**
+ * Compare two objects and returns an object with the differences
+ *
+ * @param {obj} oldObj
+ * @param {ojb} newObj
+ * @returns {obj}
+ */
+export const diffObjs = (oldObj, newObj) => {
+  const result = {};
+  const oldKeys = Object.keys(oldObj);
+  const newKeys = Object.keys(newObj);
+
+  for (const oldKey of oldKeys) {
+    const val1 = oldObj[oldKey];
+    const val2 = newObj[oldKey];
+
+    if (!newObj[oldKey]) return;
+
+    if (typeof val1 === 'object') {
+      if (!areObjsEqual(val1, val2)) {
+        result[oldKey] = val2;
+      }
+    } else if (val1 !== val2) {
+      result[oldKey] = newObj[oldKey];
+    }
+  }
+
+  // compare size and if newKyes has more elements,
+  // push them to result because they are new
+  if (oldKeys.length < newKeys.length) {
+    for (const key of newKeys) {
+      if (!oldKeys.includes(key)) result[key] = newObj[key];
+    }
+  }
+
+  return result;
+};
+
+/**
+ * @param {obj} obj
+ * @returns {obj}
+ */
+export const cloneObj = (obj) => {
+  return JSON.parse(JSON.stringify(obj));
+};