quasar-ui-sellmate-ui-kit 2.3.2 → 3.0.1

package/src/composables/date.js

@@ -1,11 +1,11 @@
-export function getCustomAgoMonth(ago = 1) {
-  const newDate = new Date();
-  const monthOfYear = newDate.getMonth();
-  newDate.setMonth(monthOfYear - ago);
-  const year = newDate.getFullYear();
-  let month = newDate.getMonth() + 1;
-  let day = newDate.getDate();
-  month = month < 10 ? `0${String(month)}` : month;
-  day = day < 10 ? `0${String(day)}` : day;
-  return `${year}-${month}-${day}`;
-}
+export function getCustomAgoMonth(ago = 1) {
+  const newDate = new Date();
+  const monthOfYear = newDate.getMonth();
+  newDate.setMonth(monthOfYear - ago);
+  const year = newDate.getFullYear();
+  let month = newDate.getMonth() + 1;
+  let day = newDate.getDate();
+  month = month < 10 ? `0${String(month)}` : month;
+  day = day < 10 ? `0${String(day)}` : day;
+  return `${year}-${month}-${day}`;
+}

package/src/composables/modelBinder.js

@@ -1,13 +1,13 @@
-import { getCurrentInstance, ref, watch } from 'vue';
-
-export function useModelBinder(props) {
-  const { emit } = getCurrentInstance();
-  const model = ref(props.modelValue);
-  watch(() => model.value, () => {
-    emit('update:model-value', model.value);
-  }, { deep: true });
-  watch(() => props.modelValue, (newValue) => {
-    model.value = newValue;
-  }, { deep: true });
-  return model;
-}
+import { getCurrentInstance, ref, watch } from 'vue';
+
+export function useModelBinder(props) {
+  const { emit } = getCurrentInstance();
+  const model = ref(props.modelValue);
+  watch(() => model.value, () => {
+    emit('update:model-value', model.value);
+  }, { deep: true });
+  watch(() => props.modelValue, (newValue) => {
+    model.value = newValue;
+  }, { deep: true });
+  return model;
+}

package/src/composables/table/use-navigator.js

@@ -1,110 +1,110 @@
-import { computed, ref, watch } from 'vue';
-import { copyToClipboard } from 'quasar';
-import { editIcon } from '../../assets/icons.js';
-
-export function useNavigator(props, attrs, emit) {
-  const focusedModel = ref(props.focused || {});
-  const editing = ref(false);
-  const max = computed(() => ({ x: props.columns.length, y: props.rows.length }));
-  const focusedData = computed(() => {
-    const value = props.rows[focusedModel.value.y][props.columns[focusedModel.value.x].name];
-    return {
-      col: props.columns[focusedModel.value.x],
-      row: props.rows[focusedModel.value.y],
-      val: props.inputOptions.type === 'number' ? Number(value) : value,
-    };
-  });
-  const inputData = ref(props.inputOptions.type === 'number' ? 0 : '');
-  const inputRef = ref(null);
-  function openInput() {
-    if (!focusedData.value.col.editable) {
-      return;
-    }
-    inputData.value = props.inputOptions.type === 'number' ? Number(focusedData.value.val) : focusedData.value.val;
-    editing.value = true;
-    setTimeout(() => {
-      if (inputRef.value) {
-        inputRef.value.$el.focus();
-      }
-    }, 200);
-  }
-  function focusCell(cell) {
-    const x = cell.cols.indexOf(cell.cols.find((e) => cell.col.name === e.name));
-    const y = cell.rowIndex;
-    if (focusedModel.value.x === x && focusedModel.value.y === y) {
-      if (cell.row.deleted) return;
-      openInput();
-    } else {
-      focusedModel.value = {
-        x,
-        y,
-      };
-    }
-  }
-  function isFocused(cell) {
-    const x = cell.cols.indexOf(cell.cols.find((e) => cell.col.name === e.name));
-    const y = cell.rowIndex;
-    return focusedModel.value.x === x && focusedModel.value.y === y;
-  }
-  function closeInput() {
-    emit('field-updated', {
-      field: focusedData.value,
-      value: props.inputOptions.type === 'number' ? Number(inputData.value) : inputData.value,
-    });
-    editing.value = false;
-  }
-
-  watch(() => focusedModel.value, () => {
-    emit('update:focused', focusedModel.value);
-  });
-  watch(() => props.focused, (newVal) => {
-    focusedModel.value = newVal;
-  });
-
-  window.document.addEventListener('keydown', (e) => {
-    if (Object.keys(focusedModel.value).length > 0) {
-      if (!editing.value) {
-        if (focusedModel.value.x < max.value.x - 1 && e.code === 'ArrowRight') {
-          focusedModel.value.x += 1;
-        }
-        if (focusedModel.value.x > 0 && e.code === 'ArrowLeft') {
-          focusedModel.value.x -= 1;
-        }
-        if (focusedModel.value.y < max.value.y - 1 && e.code === 'ArrowDown') {
-          focusedModel.value.y += 1;
-        }
-        if (focusedModel.value.y > 0 && e.code === 'ArrowUp') {
-          focusedModel.value.y -= 1;
-        }
-        if (e.key === 'Enter') {
-          if (focusedData.value.row.deleted) {
-            return;
-          }
-          if (document.activeElement.tagName === 'BODY') {
-            openInput();
-          }
-        }
-        if (e.code === 'Tab') {
-          e.preventDefault();
-          if (focusedModel.value.x < max.value.x - 1) {
-            focusedModel.value.x += 1;
-          }
-        }
-        if ((e.ctrlKey || e.metaKey) && e.code === 'KeyC') {
-          copyToClipboard(focusedData.value.val);
-        }
-      } else if (e.key === 'Enter') {
-        closeInput();
-      }
-    }
-  }, { passive: true });
-  return {
-    focusCell,
-    isFocused,
-    editing,
-    inputRef,
-    inputData,
-    closeInput,
-    editIcon,
-  };
-}
+import { computed, ref, watch } from 'vue';
+import { copyToClipboard } from 'quasar';
+import { editIcon } from '../../assets/icons.js';
+
+export function useNavigator(props, attrs, emit) {
+  const focusedModel = ref(props.focused || {});
+  const editing = ref(false);
+  const max = computed(() => ({ x: props.columns.length, y: props.rows.length }));
+  const focusedData = computed(() => {
+    const value = props.rows[focusedModel.value.y][props.columns[focusedModel.value.x].name];
+    return {
+      col: props.columns[focusedModel.value.x],
+      row: props.rows[focusedModel.value.y],
+      val: props.inputOptions.type === 'number' ? Number(value) : value,
+    };
+  });
+  const inputData = ref(props.inputOptions.type === 'number' ? 0 : '');
+  const inputRef = ref(null);
+  function openInput() {
+    if (!focusedData.value.col.editable) {
+      return;
+    }
+    inputData.value = props.inputOptions.type === 'number' ? Number(focusedData.value.val) : focusedData.value.val;
+    editing.value = true;
+    setTimeout(() => {
+      if (inputRef.value) {
+        inputRef.value.$el.focus();
+      }
+    }, 200);
+  }
+  function focusCell(cell) {
+    const x = cell.cols.indexOf(cell.cols.find((e) => cell.col.name === e.name));
+    const y = cell.rowIndex;
+    if (focusedModel.value.x === x && focusedModel.value.y === y) {
+      if (cell.row.deleted) return;
+      openInput();
+    } else {
+      focusedModel.value = {
+        x,
+        y,
+      };
+    }
+  }
+  function isFocused(cell) {
+    const x = cell.cols.indexOf(cell.cols.find((e) => cell.col.name === e.name));
+    const y = cell.rowIndex;
+    return focusedModel.value.x === x && focusedModel.value.y === y;
+  }
+  function closeInput() {
+    emit('field-updated', {
+      field: focusedData.value,
+      value: props.inputOptions.type === 'number' ? Number(inputData.value) : inputData.value,
+    });
+    editing.value = false;
+  }
+
+  watch(() => focusedModel.value, () => {
+    emit('update:focused', focusedModel.value);
+  });
+  watch(() => props.focused, (newVal) => {
+    focusedModel.value = newVal;
+  });
+
+  window.document.addEventListener('keydown', (e) => {
+    if (Object.keys(focusedModel.value).length > 0) {
+      if (!editing.value) {
+        if (focusedModel.value.x < max.value.x - 1 && e.code === 'ArrowRight') {
+          focusedModel.value.x += 1;
+        }
+        if (focusedModel.value.x > 0 && e.code === 'ArrowLeft') {
+          focusedModel.value.x -= 1;
+        }
+        if (focusedModel.value.y < max.value.y - 1 && e.code === 'ArrowDown') {
+          focusedModel.value.y += 1;
+        }
+        if (focusedModel.value.y > 0 && e.code === 'ArrowUp') {
+          focusedModel.value.y -= 1;
+        }
+        if (e.key === 'Enter') {
+          if (focusedData.value.row.deleted) {
+            return;
+          }
+          if (document.activeElement.tagName === 'BODY') {
+            openInput();
+          }
+        }
+        if (e.code === 'Tab') {
+          e.preventDefault();
+          if (focusedModel.value.x < max.value.x - 1) {
+            focusedModel.value.x += 1;
+          }
+        }
+        if ((e.ctrlKey || e.metaKey) && e.code === 'KeyC') {
+          copyToClipboard(focusedData.value.val);
+        }
+      } else if (e.key === 'Enter') {
+        closeInput();
+      }
+    }
+  }, { passive: true });
+  return {
+    focusCell,
+    isFocused,
+    editing,
+    inputRef,
+    inputData,
+    closeInput,
+    editIcon,
+  };
+}

package/src/composables/table/use-resizable.js

@@ -1,80 +1,80 @@
-function createDiv(val) {
-  const div = document.createElement('div');
-  div.classList.add(`resiable-${val}`);
-  div.style.top = '10px';
-  if (val === 'right') div.style.right = 0;
-  if (val === 'left') div.style.left = 0;
-  div.style.width = '4px';
-  div.style.position = 'absolute';
-  div.style.cursor = 'col-resize';
-  div.style.backgroundColor = 'none';
-  div.style.border = '1px solid #CCCCCC';
-  div.style.borderTop = 'none';
-  div.style.borderBottom = 'none';
-  div.style.zIndex = 2;
-  div.style.userSelect = 'none';
-  div.style.height = '16px';
-  return div;
-}
-function setListeners(div, position) {
-  let curCol;
-  let pageX;
-  let curColWidth;
-  div.addEventListener('mousedown', (e) => {
-    curCol = e.target.parentElement;
-    pageX = e.pageX;
-    curColWidth = curCol.offsetWidth;
-  }, { passive: true });
-
-  document.addEventListener('mousemove', (e) => {
-    if (curCol) {
-      const diffX = e.pageX - pageX;
-      if (position === 'right') {
-        curCol.style.minWidth = `${curColWidth + diffX}px`;
-        curCol.style.width = `${curColWidth + diffX}px`;
-      }
-      if (position === 'left') {
-        curCol.style.minWidth = `${curColWidth - diffX}px`;
-        curCol.style.width = `${curColWidth - diffX}px`;
-      }
-    }
-  }, { passive: true });
-
-  document.addEventListener('mouseup', () => {
-    curCol = undefined;
-    pageX = undefined;
-    curColWidth = undefined;
-  }, { passive: true });
-}
-function addResizable(tableEl) {
-  const tableElement = tableEl
-    .getElementsByTagName('table')[0];
-  const firstRow = tableElement.getElementsByTagName('tr')[0];
-  const cols = firstRow ? firstRow.children : [];
-  for (let i = 0; i < cols.length; i += 1) {
-    const div = createDiv('right');
-    cols[i].appendChild(div);
-    cols[i].style.position = 'sticky';
-    setListeners(div, 'right');
-  }
-}
-
-function addStickyResizable(tableEl, val) {
-  const tableElement = tableEl
-    .getElementsByTagName('table')[0];
-  const firstRow = tableElement.getElementsByTagName('tr')[0];
-  const cols = firstRow ? firstRow.children : [];
-  for (let i = cols.length - val; i < cols.length; i += 1) {
-    const div = createDiv('left');
-    cols[i].appendChild(div);
-    cols[i].style.position = 'sticky';
-    setListeners(div, 'left');
-  }
-}
-
-export function useResizable() {
-  return {
-    addResizable,
-    addStickyResizable,
-  };
-}
+function createDiv(val) {
+  const div = document.createElement('div');
+  div.classList.add(`resiable-${val}`);
+  div.style.top = '10px';
+  if (val === 'right') div.style.right = 0;
+  if (val === 'left') div.style.left = 0;
+  div.style.width = '4px';
+  div.style.position = 'absolute';
+  div.style.cursor = 'col-resize';
+  div.style.backgroundColor = 'none';
+  div.style.border = '1px solid #CCCCCC';
+  div.style.borderTop = 'none';
+  div.style.borderBottom = 'none';
+  div.style.zIndex = 2;
+  div.style.userSelect = 'none';
+  div.style.height = '16px';
+  return div;
+}
+function setListeners(div, position) {
+  let curCol;
+  let pageX;
+  let curColWidth;
+  div.addEventListener('mousedown', (e) => {
+    curCol = e.target.parentElement;
+    pageX = e.pageX;
+    curColWidth = curCol.offsetWidth;
+  }, { passive: true });
+
+  document.addEventListener('mousemove', (e) => {
+    if (curCol) {
+      const diffX = e.pageX - pageX;
+      if (position === 'right') {
+        curCol.style.minWidth = `${curColWidth + diffX}px`;
+        curCol.style.width = `${curColWidth + diffX}px`;
+      }
+      if (position === 'left') {
+        curCol.style.minWidth = `${curColWidth - diffX}px`;
+        curCol.style.width = `${curColWidth - diffX}px`;
+      }
+    }
+  }, { passive: true });
+
+  document.addEventListener('mouseup', () => {
+    curCol = undefined;
+    pageX = undefined;
+    curColWidth = undefined;
+  }, { passive: true });
+}
+function addResizable(tableEl) {
+  const tableElement = tableEl
+    .getElementsByTagName('table')[0];
+  const firstRow = tableElement.getElementsByTagName('tr')[0];
+  const cols = firstRow ? firstRow.children : [];
+  for (let i = 0; i < cols.length; i += 1) {
+    const div = createDiv('right');
+    cols[i].appendChild(div);
+    cols[i].style.position = 'sticky';
+    setListeners(div, 'right');
+  }
+}
+
+function addStickyResizable(tableEl, val) {
+  const tableElement = tableEl
+    .getElementsByTagName('table')[0];
+  const firstRow = tableElement.getElementsByTagName('tr')[0];
+  const cols = firstRow ? firstRow.children : [];
+  for (let i = cols.length - val; i < cols.length; i += 1) {
+    const div = createDiv('left');
+    cols[i].appendChild(div);
+    cols[i].style.position = 'sticky';
+    setListeners(div, 'left');
+  }
+}
+
+export function useResizable() {
+  return {
+    addResizable,
+    addStickyResizable,
+  };
+}

package/src/css/app.scss

@@ -1,90 +1,90 @@
-// $
-@import './quasar.variables.scss';
-@import './default.scss';
-
-.q-field {
-  font-size: $body-font-size;
-  &--outlined {
-    .q-field__control {
-      border-radius: $generic-border-radius;
-      &:before {
-        border: 1px solid rgba(0, 0, 0, 0.24);
-      }
-      &:hover:after {
-        border: 1px solid;
-        border-color: $positive;
-        box-shadow: 0 0 4px $positive;
-      }
-    }
-    &.q-field--highlighted {
-      .q-field__control:hover:before {
-        border-color: transparent;
-      }
-      .q-field__control:after {
-        border: 1px solid;
-        border-color: $positive;
-        box-shadow: 0 0 4px $positive;
-      }
-    }
-  }
-  &--dense {
-    .q-field__control,
-    .q-field__marginal {
-      height: 100%;
-    }
-  }
-  &--auto-height {
-    &.q-field--dense {
-      .q-field__control,
-      .q-field__native {
-        min-height: 28px;
-      }
-    }
-    .q-field__control-container {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  &--disabled {
-    .q-field__inner {
-      .q-field__control{
-        background: $Grey_Lighten-4 !important;
-        color: $Grey_Default !important;
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-.q-textarea {
-  .q-field__control {
-    height: auto;
-  }
-}
-
-.disabled {
-  border: 1px solid $Grey_Lighten-2;
-  background: $Grey_Lighten-4 !important;
-  color: $Grey_Default !important;
-  cursor: not-allowed;
-}
-
-.q-card {
-  border-radius: 8px !important;
-}
-
-.no-hover {
-  &.q-focus-helper,
-  &.q-focusable:focus > .q-focus-helper,
-  &.q-manual-focusable--focused > .q-focus-helper,
-  &.q-hoverable:hover > .q-focus-helper {
-    background: none !important;
-    opacity: 0 !important;
-    &::before,
-    &::after {
-      opacity: 0 !important;
-      background: none !important;
-    }
-  }
-}
+// $
+@import './quasar.variables.scss';
+@import './default.scss';
+
+.q-field {
+  font-size: $body-font-size;
+  &--outlined {
+    .q-field__control {
+      border-radius: $generic-border-radius;
+      &:before {
+        border: 1px solid rgba(0, 0, 0, 0.24);
+      }
+      &:hover:after {
+        border: 1px solid;
+        border-color: $positive;
+        box-shadow: 0 0 4px $positive;
+      }
+    }
+    &.q-field--highlighted {
+      .q-field__control:hover:before {
+        border-color: transparent;
+      }
+      .q-field__control:after {
+        border: 1px solid;
+        border-color: $positive;
+        box-shadow: 0 0 4px $positive;
+      }
+    }
+  }
+  &--dense {
+    .q-field__control,
+    .q-field__marginal {
+      height: 100%;
+    }
+  }
+  &--auto-height {
+    &.q-field--dense {
+      .q-field__control,
+      .q-field__native {
+        min-height: 28px;
+      }
+    }
+    .q-field__control-container {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  &--disabled {
+    .q-field__inner {
+      .q-field__control{
+        background: $Grey_Lighten-4 !important;
+        color: $Grey_Default !important;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.q-textarea {
+  .q-field__control {
+    height: auto;
+  }
+}
+
+.disabled {
+  border: 1px solid $Grey_Lighten-2;
+  background: $Grey_Lighten-4 !important;
+  color: $Grey_Default !important;
+  cursor: not-allowed;
+}
+
+.q-card {
+  border-radius: 8px !important;
+}
+
+.no-hover {
+  &.q-focus-helper,
+  &.q-focusable:focus > .q-focus-helper,
+  &.q-manual-focusable--focused > .q-focus-helper,
+  &.q-hoverable:hover > .q-focus-helper {
+    background: none !important;
+    opacity: 0 !important;
+    &::before,
+    &::after {
+      opacity: 0 !important;
+      background: none !important;
+    }
+  }
+}