@netang/quasar 0.0.57 → 0.0.59

package/components/arr/index.vue

@@ -0,0 +1,277 @@
+<template>
+    <slot
+        :scope="current"
+        :emit="emitValue"
+    />
+</template>
+
+<script>
+import { ref, watch } from 'vue'
+import $n_isFunction from 'lodash/isFunction'
+import $n_uniq from 'lodash/uniq'
+
+import $n_isValidArray from '@netang/utils/isValidArray'
+import $n_split from '@netang/utils/split'
+import $n_isValidValue from '@netang/utils/isValidValue'
+import $n_trimString from '@netang/utils/trimString'
+
+export default {
+
+    /**
+     * 关闭组件 attribute 透传行为
+     */
+    inheritAttrs: false,
+
+    /**
+     * 标识
+     */
+    name: 'NArr',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值 v-model
+        modelValue: {
+            required: true,
+        },
+        // 修改前值
+        before: Function,
+        // 修改后值
+        after: Function,
+        // 不自动触发更新
+        noEmit: Boolean,
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit }) {
+
+        // ==========【数据】============================================================================================
+
+        // 计数器
+        let num = 1
+
+        // 当前值
+        const currentValue = ref({
+            value: formatModelValue(props.modelValue),
+        })
+
+        // 如果是自动触发更新
+        if (! props.noEmit) {
+            // 触发更新值
+            // 此处用于判断声明值是否有改变
+            emitValue()
+        }
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch(() => props.modelValue, function (val) {
+
+            // 格式化声明值
+            current.value.value = formatModelValue(val)
+
+        }, {
+            // 深度监听
+            deep: true,
+        })
+
+        /**
+         * 监听当前值
+         */
+        watch(current, function (value) {
+
+            // 如果是自动触发更新
+            if (! props.noEmit) {
+
+                // 立即执行触发更新值
+                emitValue(value.value)
+            }
+
+        }, {
+            // 深度监听
+            deep: true,
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 格式化声明值
+         */
+        function formatModelValue(value) {
+            return $n_isFunction(props.before)
+                // 如果有修改前值方法
+                ? props.before({ value, formatArray, formatString })
+                // 返回值
+                : value
+        }
+
+        /**
+         * 触发更新值
+         */
+        function emitValue() {
+
+            // if (
+            //     value !== void 0
+            //     && typeof value === 'object'
+            //     && value instanceof Event
+            // ) {
+            //     // 停止冒泡
+            //     value.stopPropagation()
+            //
+            //     // 获取当前值
+            //     value = current.value.value
+            // }
+
+            // 获取当前值
+            const value = current.value.value
+
+            // 获取新值
+            const newValue = $n_isFunction(props.after) ?
+                // 如果有修改提交值方法
+                props.after({ value, formatArray, formatString })
+                // 否则返回当前值
+                : value
+
+            // 如果值有改变
+            if (newValue !== props.modelValue) {
+
+                // 触发更新值
+                emit('update:modelValue', newValue)
+            }
+        }
+
+        /**
+         * 格式化数组
+         */
+        function formatArray(val, params) {
+
+            const o = Object.assign({
+                // 是否去重
+                unique: true,
+                // 分隔符
+                separator: ',',
+                // 是否给每个值去除首位空格
+                trim: true,
+                // 验证每个值是否为有效字符串/数字
+                isValidValue: true,
+                // 是否转字符串
+                toString: false,
+            }, params)
+
+            val = $n_isValidArray(val) ? val : []
+
+            // 如果数组有值
+            if (val.length) {
+
+                // 是否给每个值去除首位空格
+                if (o.trim) {
+                    val = val.map(e => $n_trimString(e))
+                }
+
+                // 是否验证每个值是否为有效字符串/数字
+                if (o.isValidValue) {
+                    val = val.filter(val => $n_isValidValue(val))
+                }
+
+                // 去重
+                if (o.unique) {
+                    val = $n_uniq(val)
+                }
+            }
+
+            // 如果转字符串
+            if (o.toString) {
+                // 合并为字符串
+                return val.join(o.separator)
+            }
+
+            return []
+        }
+
+        /**
+         * 格式化字符串
+         */
+        function formatString(val, params) {
+
+            const o = Object.assign({
+                // 是否给每个值去除首位空格
+                trim: true,
+                // 替换内容
+                replace: /\n|,|，|\s+/g,
+                // 是否去重
+                unique: true,
+                // 分隔符
+                separator: ',',
+                // 验证每个值是否为有效字符串/数字
+                isValidValue: true,
+                // 是否转数组
+                toArray: false,
+            }, params)
+
+            // 是否去除首尾空格
+            if (o.trim) {
+                // 去除首尾空格
+                val = $n_trimString(val)
+
+            // 否则转字符串
+            } else {
+                val = $n_isValidValue(val) ? String(val) : ''
+            }
+
+            // 如果有分割符
+            if ($n_isValidValue(o.separator, true)) {
+
+                // 是否替换
+                if (o.replace) {
+                    val = val.replace(o.replace, o.separator)
+                }
+
+                // 分隔成数组
+                val = $n_split(val, o.separator)
+
+                // 如果去重
+                if (o.unique) {
+                    val = $n_uniq(val)
+                }
+
+                // 如果验证每个值是否为有效字符串/数字
+                if (o.isValidValue) {
+                    val = val.filter(val => $n_isValidValue(val))
+                }
+
+                // 如果转数组
+                if (o.toArray) {
+                    // 则直接返回
+                    return val
+                }
+
+                // 返回分隔符隔开的字符串
+                return val.join(o.separator)
+            }
+
+            return o.toArray ? [ val ] : ''
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 当前值
+            current,
+            // 触发更新值
+            emitValue,
+        }
+    }
+}
+</script>

package/components/field-date/index.vue

@@ -821,7 +821,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/sass/var.scss";
+@import "@/assets/sass/variables.scss";
 
 .date {
 

package/components/uploader-query/index.vue

@@ -534,7 +534,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/sass/var.scss";
+@import "@/assets/sass/variables.scss";
 
 // 上传器队列
 .n-uploader-query {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "description": "netang-quasar",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/sass/variables.scss

@@ -0,0 +1,138 @@
+// ==========【quasar 重定义】=====================================================================================================
+
+$primary   : #4380fa !default;
+$secondary : #19be6b !default;
+$accent    : #9C27B0 !default;
+
+$dark      : #27282e !default;
+$dark-page : #1b1c21 !default;
+
+$positive  : #19be6b !default;
+$negative  : #ff3750 !default;
+$info      : #2db7f5 !default;
+$warning   : #ff9900 !default;
+
+//$shadow-color         : #000000 !default; !default;
+//$elevation-umbra      : rgba($shadow-color, 0.1) !default; !default;
+//$elevation-penumbra   : rgba($shadow-color, 0.1) !default; !default;
+//$elevation-ambient    : rgba($shadow-color, 0.1) !default; !default;
+
+// ==========【自定义】=====================================================================================================
+
+$color-gray-dark: $dark-page !default;
+$color-gray-white: #ffffff !default;
+
+$color-gray-99: mix($color-gray-dark, $color-gray-white, 99%) !default;
+$color-gray-98: mix($color-gray-dark, $color-gray-white, 98%) !default;
+$color-gray-97: mix($color-gray-dark, $color-gray-white, 97%) !default;
+$color-gray-96: mix($color-gray-dark, $color-gray-white, 96%) !default;
+$color-gray-95: mix($color-gray-dark, $color-gray-white, 95%) !default;
+$color-gray-94: mix($color-gray-dark, $color-gray-white, 94%) !default;
+$color-gray-93: mix($color-gray-dark, $color-gray-white, 93%) !default;
+$color-gray-92: mix($color-gray-dark, $color-gray-white, 92%) !default;
+$color-gray-91: mix($color-gray-dark, $color-gray-white, 91%) !default;
+$color-gray-90: mix($color-gray-dark, $color-gray-white, 90%) !default;
+$color-gray-89: mix($color-gray-dark, $color-gray-white, 89%) !default;
+$color-gray-88: mix($color-gray-dark, $color-gray-white, 88%) !default;
+$color-gray-87: mix($color-gray-dark, $color-gray-white, 87%) !default;
+$color-gray-86: mix($color-gray-dark, $color-gray-white, 86%) !default;
+$color-gray-85: mix($color-gray-dark, $color-gray-white, 85%) !default;
+$color-gray-84: mix($color-gray-dark, $color-gray-white, 84%) !default;
+$color-gray-83: mix($color-gray-dark, $color-gray-white, 83%) !default;
+$color-gray-82: mix($color-gray-dark, $color-gray-white, 82%) !default;
+$color-gray-81: mix($color-gray-dark, $color-gray-white, 81%) !default;
+$color-gray-80: mix($color-gray-dark, $color-gray-white, 80%) !default;
+$color-gray-79: mix($color-gray-dark, $color-gray-white, 79%) !default;
+$color-gray-78: mix($color-gray-dark, $color-gray-white, 78%) !default;
+$color-gray-77: mix($color-gray-dark, $color-gray-white, 77%) !default;
+$color-gray-76: mix($color-gray-dark, $color-gray-white, 76%) !default;
+$color-gray-75: mix($color-gray-dark, $color-gray-white, 75%) !default;
+$color-gray-74: mix($color-gray-dark, $color-gray-white, 74%) !default;
+$color-gray-73: mix($color-gray-dark, $color-gray-white, 73%) !default;
+$color-gray-72: mix($color-gray-dark, $color-gray-white, 72%) !default;
+$color-gray-71: mix($color-gray-dark, $color-gray-white, 71%) !default;
+$color-gray-70: mix($color-gray-dark, $color-gray-white, 70%) !default;
+$color-gray-69: mix($color-gray-dark, $color-gray-white, 69%) !default;
+$color-gray-68: mix($color-gray-dark, $color-gray-white, 68%) !default;
+$color-gray-67: mix($color-gray-dark, $color-gray-white, 67%) !default;
+$color-gray-66: mix($color-gray-dark, $color-gray-white, 66%) !default;
+$color-gray-65: mix($color-gray-dark, $color-gray-white, 65%) !default;
+$color-gray-64: mix($color-gray-dark, $color-gray-white, 64%) !default;
+$color-gray-63: mix($color-gray-dark, $color-gray-white, 63%) !default;
+$color-gray-62: mix($color-gray-dark, $color-gray-white, 62%) !default;
+$color-gray-61: mix($color-gray-dark, $color-gray-white, 61%) !default;
+$color-gray-60: mix($color-gray-dark, $color-gray-white, 60%) !default;
+$color-gray-59: mix($color-gray-dark, $color-gray-white, 59%) !default;
+$color-gray-58: mix($color-gray-dark, $color-gray-white, 58%) !default;
+$color-gray-57: mix($color-gray-dark, $color-gray-white, 57%) !default;
+$color-gray-56: mix($color-gray-dark, $color-gray-white, 56%) !default;
+$color-gray-55: mix($color-gray-dark, $color-gray-white, 55%) !default;
+$color-gray-54: mix($color-gray-dark, $color-gray-white, 54%) !default;
+$color-gray-53: mix($color-gray-dark, $color-gray-white, 53%) !default;
+$color-gray-52: mix($color-gray-dark, $color-gray-white, 52%) !default;
+$color-gray-51: mix($color-gray-dark, $color-gray-white, 51%) !default;
+$color-gray-50: mix($color-gray-dark, $color-gray-white, 50%) !default;
+$color-gray-49: mix($color-gray-dark, $color-gray-white, 49%) !default;
+$color-gray-48: mix($color-gray-dark, $color-gray-white, 48%) !default;
+$color-gray-47: mix($color-gray-dark, $color-gray-white, 47%) !default;
+$color-gray-46: mix($color-gray-dark, $color-gray-white, 46%) !default;
+$color-gray-45: mix($color-gray-dark, $color-gray-white, 45%) !default;
+$color-gray-44: mix($color-gray-dark, $color-gray-white, 44%) !default;
+$color-gray-43: mix($color-gray-dark, $color-gray-white, 43%) !default;
+$color-gray-42: mix($color-gray-dark, $color-gray-white, 42%) !default;
+$color-gray-41: mix($color-gray-dark, $color-gray-white, 41%) !default;
+$color-gray-40: mix($color-gray-dark, $color-gray-white, 40%) !default;
+$color-gray-39: mix($color-gray-dark, $color-gray-white, 39%) !default;
+$color-gray-38: mix($color-gray-dark, $color-gray-white, 38%) !default;
+$color-gray-37: mix($color-gray-dark, $color-gray-white, 37%) !default;
+$color-gray-36: mix($color-gray-dark, $color-gray-white, 36%) !default;
+$color-gray-35: mix($color-gray-dark, $color-gray-white, 35%) !default;
+$color-gray-34: mix($color-gray-dark, $color-gray-white, 34%) !default;
+$color-gray-33: mix($color-gray-dark, $color-gray-white, 33%) !default;
+$color-gray-32: mix($color-gray-dark, $color-gray-white, 32%) !default;
+$color-gray-31: mix($color-gray-dark, $color-gray-white, 31%) !default;
+$color-gray-30: mix($color-gray-dark, $color-gray-white, 30%) !default;
+$color-gray-29: mix($color-gray-dark, $color-gray-white, 29%) !default;
+$color-gray-28: mix($color-gray-dark, $color-gray-white, 28%) !default;
+$color-gray-27: mix($color-gray-dark, $color-gray-white, 27%) !default;
+$color-gray-26: mix($color-gray-dark, $color-gray-white, 26%) !default;
+$color-gray-25: mix($color-gray-dark, $color-gray-white, 25%) !default;
+$color-gray-24: mix($color-gray-dark, $color-gray-white, 24%) !default;
+$color-gray-23: mix($color-gray-dark, $color-gray-white, 23%) !default;
+$color-gray-22: mix($color-gray-dark, $color-gray-white, 22%) !default;
+$color-gray-21: mix($color-gray-dark, $color-gray-white, 21%) !default;
+$color-gray-20: mix($color-gray-dark, $color-gray-white, 20%) !default;
+$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%) !default;
+$color-gray-19: mix($color-gray-dark, $color-gray-white, 19%) !default;
+$color-gray-18: mix($color-gray-dark, $color-gray-white, 18%) !default;
+$color-gray-17: mix($color-gray-dark, $color-gray-white, 17%) !default;
+$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%) !default;
+$color-gray-15: mix($color-gray-dark, $color-gray-white, 15%) !default;
+$color-gray-14: mix($color-gray-dark, $color-gray-white, 14%) !default;
+$color-gray-13: mix($color-gray-dark, $color-gray-white, 13%) !default;
+$color-gray-12: mix($color-gray-dark, $color-gray-white, 12%) !default;
+$color-gray-11: mix($color-gray-dark, $color-gray-white, 11%) !default;
+$color-gray-10: mix($color-gray-dark, $color-gray-white, 10%) !default;
+$color-gray-9: mix($color-gray-dark, $color-gray-white, 9%) !default;
+$color-gray-8: mix($color-gray-dark, $color-gray-white, 8%) !default;
+$color-gray-7: mix($color-gray-dark, $color-gray-white, 7%) !default;
+$color-gray-6: mix($color-gray-dark, $color-gray-white, 6%) !default;
+$color-gray-5: mix($color-gray-dark, $color-gray-white, 5%) !default;
+$color-gray-4: mix($color-gray-dark, $color-gray-white, 4%) !default;
+$color-gray-3: mix($color-gray-dark, $color-gray-white, 3%) !default;
+$color-gray-2: mix($color-gray-dark, $color-gray-white, 2%) !default;
+$color-gray-1: mix($color-gray-dark, $color-gray-white, 1%) !default;
+
+$color-ccc: #cccccc !default;
+$color-999: #999999 !default;
+$color-888: #888888 !default;
+$color-777: #777777 !default;
+$color-666: #666666 !default;
+$color-555: #555555 !default;
+$color-444: #444444 !default;
+$color-333: #333333 !default;
+$color-222: #222222 !default;
+$color-111: #111111 !default;
+$color-000: $color-gray-dark !default;
+
+@import "~quasar/src/css/variables.sass";

package/utils/uploader.js

@@ -5,6 +5,8 @@ import $n_has from 'lodash/has'
 import $n_get from 'lodash/get'
 import $n_toLower from 'lodash/toLower'
 import $n_findIndex from 'lodash/findIndex'
+import $n_uniq from 'lodash/uniq'
+import $n_find from 'lodash/find'
 
 import $n_isValidArray from '@netang/utils/isValidArray'
 import $n_isValidObject from '@netang/utils/isValidObject'
@@ -19,20 +21,16 @@ import $n_run from '@netang/utils/run'
 import $n_isValidValue from '@netang/utils/isValidValue'
 import $n_copy from '@netang/utils/copy'
 import $n_http from '@netang/utils/http'
+import $n_getThrowMessage from '@netang/utils/getThrowMessage'
 
 import $n_toast from './toast'
 import $n_confirm from './confirm'
 import $n_alert from './alert'
-
+import $n_previewImage from './previewImage'
+import $n_getImage from './getImage'
+import $n_getFile from './getFile'
 import $n_config from './config'
 
-import { configs } from './config'
-
-const {
-    // api 文件请求地址
-    apiFileUrl,
-} = configs
-
 import {
     // 文件类型映射
     FilE_TYPE,
@@ -198,7 +196,7 @@ function create(params) {
 
                 // 请求 - 获取文件
                 const { status, data: resExisted } = await $n_http({
-                    url: apiFileUrl + 'get_file',
+                    url: $n_config('apiFileUrl') + 'get_file',
                     data: {
                         hashs,
                     },
@@ -654,7 +652,7 @@ function create(params) {
 
         // 请求 - 检查文件是否存在 hash
         const { status, data: resExisted } = await $n_http({
-            url: apiFileUrl + 'check_exist',
+            url: $n_config('apiFileUrl') + 'check_exist',
             data: {
                 hashs: $n_uniq(checkHashs),
             },
@@ -974,7 +972,7 @@ function create(params) {
 
             // 请求 - 修改文件名
             const { status } = await $n_http({
-                url: apiFileUrl + 'edit_file_title',
+                url: $n_config('apiFileUrl') + 'edit_file_title',
                 data: {
                     hash,
                     title: newTitle,

package/sass/var.scss

@@ -1,141 +0,0 @@
-// ==========【quasar 重定义】=====================================================================================================
-
-$primary   : #4380fa;
-$secondary : #19be6b;
-$accent    : #9C27B0;
-
-$dark      : #27282e;
-$dark-page : #1b1c21;
-
-$positive  : #19be6b;
-$negative  : #ff3750;
-$info      : #2db7f5;
-$warning   : #ff9900;
-
-//$shadow-color         : #000000 !default;
-//$elevation-umbra      : rgba($shadow-color, 0.1) !default;
-//$elevation-penumbra   : rgba($shadow-color, 0.1) !default;
-//$elevation-ambient    : rgba($shadow-color, 0.1) !default;
-
-// 按钮紧凑内边距
-$button-dense-padding: 0.285em 16px !important;
-
-// ==========【自定义】=====================================================================================================
-
-$color-gray-dark: $dark-page;
-$color-gray-white: #ffffff;
-
-$color-gray-99: mix($color-gray-dark, $color-gray-white, 99%);
-$color-gray-98: mix($color-gray-dark, $color-gray-white, 98%);
-$color-gray-97: mix($color-gray-dark, $color-gray-white, 97%);
-$color-gray-96: mix($color-gray-dark, $color-gray-white, 96%);
-$color-gray-95: mix($color-gray-dark, $color-gray-white, 95%);
-$color-gray-94: mix($color-gray-dark, $color-gray-white, 94%);
-$color-gray-93: mix($color-gray-dark, $color-gray-white, 93%);
-$color-gray-92: mix($color-gray-dark, $color-gray-white, 92%);
-$color-gray-91: mix($color-gray-dark, $color-gray-white, 91%);
-$color-gray-90: mix($color-gray-dark, $color-gray-white, 90%);
-$color-gray-89: mix($color-gray-dark, $color-gray-white, 89%);
-$color-gray-88: mix($color-gray-dark, $color-gray-white, 88%);
-$color-gray-87: mix($color-gray-dark, $color-gray-white, 87%);
-$color-gray-86: mix($color-gray-dark, $color-gray-white, 86%);
-$color-gray-85: mix($color-gray-dark, $color-gray-white, 85%);
-$color-gray-84: mix($color-gray-dark, $color-gray-white, 84%);
-$color-gray-83: mix($color-gray-dark, $color-gray-white, 83%);
-$color-gray-82: mix($color-gray-dark, $color-gray-white, 82%);
-$color-gray-81: mix($color-gray-dark, $color-gray-white, 81%);
-$color-gray-80: mix($color-gray-dark, $color-gray-white, 80%);
-$color-gray-79: mix($color-gray-dark, $color-gray-white, 79%);
-$color-gray-78: mix($color-gray-dark, $color-gray-white, 78%);
-$color-gray-77: mix($color-gray-dark, $color-gray-white, 77%);
-$color-gray-76: mix($color-gray-dark, $color-gray-white, 76%);
-$color-gray-75: mix($color-gray-dark, $color-gray-white, 75%);
-$color-gray-74: mix($color-gray-dark, $color-gray-white, 74%);
-$color-gray-73: mix($color-gray-dark, $color-gray-white, 73%);
-$color-gray-72: mix($color-gray-dark, $color-gray-white, 72%);
-$color-gray-71: mix($color-gray-dark, $color-gray-white, 71%);
-$color-gray-70: mix($color-gray-dark, $color-gray-white, 70%);
-$color-gray-69: mix($color-gray-dark, $color-gray-white, 69%);
-$color-gray-68: mix($color-gray-dark, $color-gray-white, 68%);
-$color-gray-67: mix($color-gray-dark, $color-gray-white, 67%);
-$color-gray-66: mix($color-gray-dark, $color-gray-white, 66%);
-$color-gray-65: mix($color-gray-dark, $color-gray-white, 65%);
-$color-gray-64: mix($color-gray-dark, $color-gray-white, 64%);
-$color-gray-63: mix($color-gray-dark, $color-gray-white, 63%);
-$color-gray-62: mix($color-gray-dark, $color-gray-white, 62%);
-$color-gray-61: mix($color-gray-dark, $color-gray-white, 61%);
-$color-gray-60: mix($color-gray-dark, $color-gray-white, 60%);
-$color-gray-59: mix($color-gray-dark, $color-gray-white, 59%);
-$color-gray-58: mix($color-gray-dark, $color-gray-white, 58%);
-$color-gray-57: mix($color-gray-dark, $color-gray-white, 57%);
-$color-gray-56: mix($color-gray-dark, $color-gray-white, 56%);
-$color-gray-55: mix($color-gray-dark, $color-gray-white, 55%);
-$color-gray-54: mix($color-gray-dark, $color-gray-white, 54%);
-$color-gray-53: mix($color-gray-dark, $color-gray-white, 53%);
-$color-gray-52: mix($color-gray-dark, $color-gray-white, 52%);
-$color-gray-51: mix($color-gray-dark, $color-gray-white, 51%);
-$color-gray-50: mix($color-gray-dark, $color-gray-white, 50%);
-$color-gray-49: mix($color-gray-dark, $color-gray-white, 49%);
-$color-gray-48: mix($color-gray-dark, $color-gray-white, 48%);
-$color-gray-47: mix($color-gray-dark, $color-gray-white, 47%);
-$color-gray-46: mix($color-gray-dark, $color-gray-white, 46%);
-$color-gray-45: mix($color-gray-dark, $color-gray-white, 45%);
-$color-gray-44: mix($color-gray-dark, $color-gray-white, 44%);
-$color-gray-43: mix($color-gray-dark, $color-gray-white, 43%);
-$color-gray-42: mix($color-gray-dark, $color-gray-white, 42%);
-$color-gray-41: mix($color-gray-dark, $color-gray-white, 41%);
-$color-gray-40: mix($color-gray-dark, $color-gray-white, 40%);
-$color-gray-39: mix($color-gray-dark, $color-gray-white, 39%);
-$color-gray-38: mix($color-gray-dark, $color-gray-white, 38%);
-$color-gray-37: mix($color-gray-dark, $color-gray-white, 37%);
-$color-gray-36: mix($color-gray-dark, $color-gray-white, 36%);
-$color-gray-35: mix($color-gray-dark, $color-gray-white, 35%);
-$color-gray-34: mix($color-gray-dark, $color-gray-white, 34%);
-$color-gray-33: mix($color-gray-dark, $color-gray-white, 33%);
-$color-gray-32: mix($color-gray-dark, $color-gray-white, 32%);
-$color-gray-31: mix($color-gray-dark, $color-gray-white, 31%);
-$color-gray-30: mix($color-gray-dark, $color-gray-white, 30%);
-$color-gray-29: mix($color-gray-dark, $color-gray-white, 29%);
-$color-gray-28: mix($color-gray-dark, $color-gray-white, 28%);
-$color-gray-27: mix($color-gray-dark, $color-gray-white, 27%);
-$color-gray-26: mix($color-gray-dark, $color-gray-white, 26%);
-$color-gray-25: mix($color-gray-dark, $color-gray-white, 25%);
-$color-gray-24: mix($color-gray-dark, $color-gray-white, 24%);
-$color-gray-23: mix($color-gray-dark, $color-gray-white, 23%);
-$color-gray-22: mix($color-gray-dark, $color-gray-white, 22%);
-$color-gray-21: mix($color-gray-dark, $color-gray-white, 21%);
-$color-gray-20: mix($color-gray-dark, $color-gray-white, 20%);
-$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%);
-$color-gray-19: mix($color-gray-dark, $color-gray-white, 19%);
-$color-gray-18: mix($color-gray-dark, $color-gray-white, 18%);
-$color-gray-17: mix($color-gray-dark, $color-gray-white, 17%);
-$color-gray-16: mix($color-gray-dark, $color-gray-white, 16%);
-$color-gray-15: mix($color-gray-dark, $color-gray-white, 15%);
-$color-gray-14: mix($color-gray-dark, $color-gray-white, 14%);
-$color-gray-13: mix($color-gray-dark, $color-gray-white, 13%);
-$color-gray-12: mix($color-gray-dark, $color-gray-white, 12%);
-$color-gray-11: mix($color-gray-dark, $color-gray-white, 11%);
-$color-gray-10: mix($color-gray-dark, $color-gray-white, 10%);
-$color-gray-9: mix($color-gray-dark, $color-gray-white, 9%);
-$color-gray-8: mix($color-gray-dark, $color-gray-white, 8%);
-$color-gray-7: mix($color-gray-dark, $color-gray-white, 7%);
-$color-gray-6: mix($color-gray-dark, $color-gray-white, 6%);
-$color-gray-5: mix($color-gray-dark, $color-gray-white, 5%);
-$color-gray-4: mix($color-gray-dark, $color-gray-white, 4%);
-$color-gray-3: mix($color-gray-dark, $color-gray-white, 3%);
-$color-gray-2: mix($color-gray-dark, $color-gray-white, 2%);
-$color-gray-1: mix($color-gray-dark, $color-gray-white, 1%);
-
-$color-ccc: #cccccc;
-$color-999: #999999;
-$color-888: #888888;
-$color-777: #777777;
-$color-666: #666666;
-$color-555: #555555;
-$color-444: #444444;
-$color-333: #333333;
-$color-222: #222222;
-$color-111: #111111;
-$color-000: $color-gray-dark;
-
-@import "~quasar/src/css/variables.sass";