quasar-ui-sellmate-ui-kit 2.3.1 → 3.0.0

package/src/components/SInputCounter.vue

@@ -1,46 +1,46 @@
-<template>
-  <q-input
-    bgColor="white"
-    v-model="inputCountValue"
-    class="s-input-counter"
-    @update:modelValue="$emit('update:modelValue', inputCountValue)"
-    outlined
-    dense
-    :maxlength="maxlength"
-  >
-    <template v-slot:after>
-      / {{ maxlength }} byte
-    </template>
-  </q-input>
-</template>
-
-<script>
-import { defineComponent, watch, ref } from 'vue';
-import { QInput } from 'quasar';
-
-export default defineComponent({
-  name: 'SInputCounter',
-  components: {
-    QInput,
-  },
-  props: {
-    modelValue: {
-      type: [Number, String],
-    },
-    maxlength: {
-      type: [Number, String],
-    },
-  },
-  setup(props) {
-    const inputCountValue = ref(props.modelValue);
-    watch(() => props.modelValue, (val) => { inputCountValue.value = val; });
-    return {
-      inputCountValue,
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-</style>
+<template>
+  <q-input
+    bgColor="white"
+    v-model="inputCountValue"
+    class="s-input-counter"
+    @update:modelValue="$emit('update:modelValue', inputCountValue)"
+    outlined
+    dense
+    :maxlength="maxlength"
+  >
+    <template v-slot:after>
+      / {{ maxlength }} byte
+    </template>
+  </q-input>
+</template>
+
+<script>
+import { defineComponent, watch, ref } from 'vue';
+import { QInput } from 'quasar';
+
+export default defineComponent({
+  name: 'SInputCounter',
+  components: {
+    QInput,
+  },
+  props: {
+    modelValue: {
+      type: [Number, String],
+    },
+    maxlength: {
+      type: [Number, String],
+    },
+  },
+  setup(props) {
+    const inputCountValue = ref(props.modelValue);
+    watch(() => props.modelValue, (val) => { inputCountValue.value = val; });
+    return {
+      inputCountValue,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+</style>

package/src/components/SInputNumber.vue

@@ -1,179 +1,179 @@
-<template>
-  <q-input
-    class="s-input-number bg-white"
-    v-model.number="inputNumberValue"
-    @update:modelValue="
-      value => {
-        $emit('update:modelValue', value);
-      }
-    "
-    ref="qInputRef"
-    type="number"
-    outlined
-    dense
-  >
-    <template v-slot:append v-if="!hideBtn">
-      <q-btn
-        class="s-input-number-icon-up q-pa-none"
-        dense
-        unelevated
-        :ripple="false"
-        color="Grey_Lighten-4"
-        :icon="minusIcon"
-        @click="minusNumber"
-      />
-      <q-btn
-        class="s-input-number-icon-down q-pa-none"
-        dense
-        unelevated
-        :ripple="false"
-        color="Grey_Lighten-4"
-        :icon="plusIcon"
-        @click="plusNumber"
-      />
-    </template>
-  </q-input>
-</template>
-
-<script>
-  import { QBtn, QInput } from 'quasar';
-  import { defineComponent, ref, watch } from 'vue';
-  import { minusIcon, plusIcon } from '../assets/icons.js';
-
-  export default defineComponent({
-    name: 'SInputNumber',
-    components: {
-      QInput,
-      QBtn,
-    },
-    props: {
-      hideBtn: {
-        type: Boolean,
-        default: false,
-      },
-      modelValue: {
-        type: [Number, String],
-      },
-    },
-    setup(props, { emit }) {
-      const inputNumberValue = ref(props.modelValue);
-      const qInputRef = ref(null);
-      watch(
-        () => props.modelValue,
-        val => {
-          inputNumberValue.value = val;
-        },
-      );
-      function plusNumber() {
-        emit('update:modelValue', inputNumberValue.value + 1);
-      }
-      function minusNumber() {
-        emit('update:modelValue', inputNumberValue.value - 1);
-      }
-      return {
-        plusNumber,
-        minusNumber,
-        minusIcon,
-        plusIcon,
-        inputNumberValue,
-        qInputRef,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-input-number {
-    height: $default-height;
-    min-width: 108px;
-    .q-field__inner {
-      .q-field__control {
-        padding: 0;
-        height: 100%;
-        &-container {
-          padding: $with-icon-padding;
-          height: $default-height;
-          .q-field__native {
-            color: $Grey_Darken-4;
-            padding: 0;
-            font-size: 12px;
-          }
-          input::placeholder {
-            color: $Grey_Lighten-1;
-          }
-        }
-        &:before {
-          border: 1px solid $Grey_Lighten-1;
-        }
-        .q-field__append {
-          height: 28px;
-          display: none;
-          padding: 0;
-          .q-btn {
-            width: 20px;
-            height: 20px;
-            min-height: 0;
-            min-width: 0;
-            margin: 0 5px 0 4px;
-            border-radius: 2px;
-            .q-btn__content {
-              width: 100%;
-              height: 100%;
-              .q-icon {
-                color: $Grey_Default;
-                font-size: 12px;
-              }
-            }
-            &:first-of-type {
-              margin: 0;
-            }
-          }
-        }
-      }
-    }
-  }
-  .q-field--focused.s-input-number {
-    .q-field__inner {
-      .q-field__control {
-        .q-field__append {
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
-  }
-  .q-field--disabled.s-input-number {
-    .q-field__inner {
-      .q-field__control {
-        background-color: $Grey_Lighten-4 !important;
-        color: $Grey_Default !important;
-        &:before {
-          border: 1px solid $Grey_Lighten-2;
-        }
-        &-container {
-          opacity: 1 !important;
-          .q-field__native {
-            color: $Grey_Default;
-          }
-        }
-        .q-field__append {
-          opacity: 1;
-        }
-      }
-    }
-  }
-  /* Chrome, Safari, Edge, Opera */
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  /* Firefox */
-  input[type='number'] {
-    -moz-appearance: textfield;
-  }
-</style>
+<template>
+  <q-input
+    class="s-input-number bg-white"
+    v-model.number="inputNumberValue"
+    @update:modelValue="
+      value => {
+        $emit('update:modelValue', value);
+      }
+    "
+    ref="qInputRef"
+    type="number"
+    outlined
+    dense
+  >
+    <template v-slot:append v-if="!hideBtn">
+      <q-btn
+        class="s-input-number-icon-up q-pa-none"
+        dense
+        unelevated
+        :ripple="false"
+        color="Grey_Lighten-4"
+        :icon="minusIcon"
+        @click="minusNumber"
+      />
+      <q-btn
+        class="s-input-number-icon-down q-pa-none"
+        dense
+        unelevated
+        :ripple="false"
+        color="Grey_Lighten-4"
+        :icon="plusIcon"
+        @click="plusNumber"
+      />
+    </template>
+  </q-input>
+</template>
+
+<script>
+  import { QBtn, QInput } from 'quasar';
+  import { defineComponent, ref, watch } from 'vue';
+  import { minusIcon, plusIcon } from '../assets/icons.js';
+
+  export default defineComponent({
+    name: 'SInputNumber',
+    components: {
+      QInput,
+      QBtn,
+    },
+    props: {
+      hideBtn: {
+        type: Boolean,
+        default: false,
+      },
+      modelValue: {
+        type: [Number, String],
+      },
+    },
+    setup(props, { emit }) {
+      const inputNumberValue = ref(props.modelValue);
+      const qInputRef = ref(null);
+      watch(
+        () => props.modelValue,
+        val => {
+          inputNumberValue.value = val;
+        },
+      );
+      function plusNumber() {
+        emit('update:modelValue', inputNumberValue.value + 1);
+      }
+      function minusNumber() {
+        emit('update:modelValue', inputNumberValue.value - 1);
+      }
+      return {
+        plusNumber,
+        minusNumber,
+        minusIcon,
+        plusIcon,
+        inputNumberValue,
+        qInputRef,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-input-number {
+    height: $default-height;
+    min-width: 108px;
+    .q-field__inner {
+      .q-field__control {
+        padding: 0;
+        height: 100%;
+        &-container {
+          padding: $with-icon-padding;
+          height: $default-height;
+          .q-field__native {
+            color: $Grey_Darken-4;
+            padding: 0;
+            font-size: 12px;
+          }
+          input::placeholder {
+            color: $Grey_Lighten-1;
+          }
+        }
+        &:before {
+          border: 1px solid $Grey_Lighten-1;
+        }
+        .q-field__append {
+          height: 28px;
+          display: none;
+          padding: 0;
+          .q-btn {
+            width: 20px;
+            height: 20px;
+            min-height: 0;
+            min-width: 0;
+            margin: 0 5px 0 4px;
+            border-radius: 2px;
+            .q-btn__content {
+              width: 100%;
+              height: 100%;
+              .q-icon {
+                color: $Grey_Default;
+                font-size: 12px;
+              }
+            }
+            &:first-of-type {
+              margin: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+  .q-field--focused.s-input-number {
+    .q-field__inner {
+      .q-field__control {
+        .q-field__append {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
+  .q-field--disabled.s-input-number {
+    .q-field__inner {
+      .q-field__control {
+        background-color: $Grey_Lighten-4 !important;
+        color: $Grey_Default !important;
+        &:before {
+          border: 1px solid $Grey_Lighten-2;
+        }
+        &-container {
+          opacity: 1 !important;
+          .q-field__native {
+            color: $Grey_Default;
+          }
+        }
+        .q-field__append {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  /* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* Firefox */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+</style>

package/src/components/SList.vue

@@ -1,29 +1,29 @@
-<template>
-  <q-list bordered separator>
-    <q-item>
-      <q-item-section>
-        <q-item-label>{{ content }}</q-item-label>
-      </q-item-section>
-    </q-item>
-  </q-list>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import {
-  QList, QItem, QItemSection, QItemLabel,
-} from 'quasar';
-
-export default defineComponent({
-  name: 'SList',
-  components: {
-    QList,
-    QItem,
-    QItemSection,
-    QItemLabel,
-  },
-  props: {
-    content: null,
-  },
-});
-</script>
+<template>
+  <q-list bordered separator>
+    <q-item>
+      <q-item-section>
+        <q-item-label>{{ content }}</q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import {
+  QList, QItem, QItemSection, QItemLabel,
+} from 'quasar';
+
+export default defineComponent({
+  name: 'SList',
+  components: {
+    QList,
+    QItem,
+    QItemSection,
+    QItemLabel,
+  },
+  props: {
+    content: null,
+  },
+});
+</script>