other components... (2)

src/components/CProgress/CProgress.scss

@@ -0,0 +1,44 @@
+$heightBtn: 100%;
+
+.progress-item {
+  margin: 1px;
+  padding: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  flex: 1;
+  flex-direction: column;
+  order: 1;
+}
+
+.cpr-progrbar-item {
+  //height: 10px
+  margin-top: 8px;
+  margin-bottom: 8px;
+  height:10px;
+}
+
+@media (max-width: 600px) {
+  .cpr-progrbar-item {
+    //height: 10px
+    margin-top: 6px;
+    margin-bottom: 6px;
+    height: 8px;
+  }
+
+  .progress-item {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+}
+
+.cpr-slider-item {
+  //height: 10px
+}
+
+.cpr-percProgress {
+  padding-top: 3px;
+  color: #888;
+  vertical-align: middle;
+  text-align: center;
+  //line-height: $heightitem;
+}

src/components/CProgress/CProgress.ts

@@ -0,0 +1,72 @@
+import { tools } from '@src/store/Modules/tools'
+
+import { defineComponent, ref,  watch } from 'vue'
+import { useI18n } from '@src/boot/i18n'
+import { useQuasar } from 'quasar'
+
+export default defineComponent({
+  name: 'CProgress',
+  props: {
+    progressval: {
+      type: Number,
+      required: true,
+    },
+    descr: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    slider: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+
+    const cpr_colProgress = ref('blue')
+    const cpr_percProgress = ref('cpr-percProgress')
+    const progressvalinternal = ref(0)
+
+    watch(() => props.progressval, (newval, oldval) => {
+      updateclasses()
+    })
+
+
+    function updateclasses() {
+      cpr_colProgress.value = tools.getProgressColor(progressvalinternal.value)
+    }
+
+    function setchange(value: any) {
+      progressvalinternal.value = value
+      console.log('setchange', progressvalinternal.value)
+      emit('input', progressvalinternal.value)
+    }
+
+    function getdescr()
+    {
+      if (!!props.descr) {
+        return props.descr + ': '
+      }
+    }
+
+    function create() {
+      updateclasses()
+    }
+
+    create()
+
+    return {
+      getdescr,
+      setchange,
+      updateclasses,
+      cpr_percProgress,
+      cpr_colProgress,
+    }
+  }
+})

src/components/CProgress/CProgress.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <div class="flex-item progress-item shadow-1">
+            <q-slider
+v-if="slider" label
+                      class="cpr-slider-item"
+                      :readonly="readonly"
+                      :value="progressval"
+                      :min="0"
+                      :max="100"
+                      @change="setchange"
+                      :step="5">
+            </q-slider>
+            <q-linear-progress
+                    v-else
+                    stripe
+                    :readonly="readonly"
+                    rounded
+                    :value="progressval / 100"
+                    class="cpr-progrbar-item"
+                    :color="cpr_colProgress">
+            </q-linear-progress>
+
+            <div :class="cpr_percProgress">
+                {{getdescr}} {{progressval}}%
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./CProgress.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CProgress.scss';
+</style>

src/components/CProgress/index.ts

@@ -0,0 +1 @@
+export {default as CProgress} from './CProgress.vue'