@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/layout/Zoom.vue

@@ -1,111 +1,111 @@
-<template>
-    <div>
-        <div class="zoom-controls">
-            <transition name="fade">
-                <span v-if="showZoomLabel">{{ (zoom * 100).toFixed(0) }}%</span>
-            </transition>
-        </div>
-
-        <div class="zoom-container">
-            <div class="zoom-area" :style="zoomStyle">
-                <slot></slot>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-
-import { mapGetters } from "vuex";
-
-export default {
-    name: 'Zoom',
-    data() {
-        return {
-            zoom: 1,
-            zoomStep: 0.1,
-            zoomMin: 0.5,
-            zoomMax: 2.0,
-            showZoomLabel: false,
-            zoomTimeout: null
-        }
-    },
-    computed: {
-        ...mapGetters("generic", ["event"]),
-        zoomStyle() {
-            return {
-                transform: `scale(${this.zoom})`,
-                transformOrigin: 'top left',
-                width: `${100 / this.zoom}%`
-            }
-        }
-    },
-    methods: {
-        zoomIn() {
-            if (this.zoom < this.zoomMax) {
-                this.zoom += this.zoomStep
-                this.showZoomTemporarily()
-            }
-        },
-        zoomOut() {
-            if (this.zoom > this.zoomMin) {
-                this.zoom -= this.zoomStep
-                this.showZoomTemporarily()
-            }
-        },
-        showZoomTemporarily() {
-            this.showZoomLabel = true
-            clearTimeout(this.zoomTimeout)
-            this.zoomTimeout = setTimeout(() => {
-                this.showZoomLabel = false
-            }, 1000)
-        }
-    },
-    beforeDestroy() {
-        clearTimeout(this.zoomTimeout)
-    },
-    watch: {
-        event: {
-            handler(event) {
-                if (event.name == "zoomIn") this.zoomIn();
-                if (event.name == "zoomOut") this.zoomOut();
-            },
-            deep: true,
-        },
-
-    },
-}
-</script>
-
-<style scoped>
-.zoom-controls {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.zoom-container {
-    overflow: auto;
-    width: 100%;
-    height: 100%;
-}
-
-.zoom-area {
-    background: #fff;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.5s ease;
-}
-
-.fade-enter,
-.fade-leave-to {
-    opacity: 0;
-}
-
-.zoom-controls span {
-    font-size: 13px;
-}
-</style>
+<template>
+    <div>
+        <div class="zoom-controls">
+            <transition name="fade">
+                <span v-if="showZoomLabel">{{ (zoom * 100).toFixed(0) }}%</span>
+            </transition>
+        </div>
+
+        <div class="zoom-container">
+            <div class="zoom-area" :style="zoomStyle">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import { mapGetters } from "vuex";
+
+export default {
+    name: 'Zoom',
+    data() {
+        return {
+            zoom: 1,
+            zoomStep: 0.1,
+            zoomMin: 0.5,
+            zoomMax: 2.0,
+            showZoomLabel: false,
+            zoomTimeout: null
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+        zoomStyle() {
+            return {
+                transform: `scale(${this.zoom})`,
+                transformOrigin: 'top left',
+                width: `${100 / this.zoom}%`
+            }
+        }
+    },
+    methods: {
+        zoomIn() {
+            if (this.zoom < this.zoomMax) {
+                this.zoom += this.zoomStep
+                this.showZoomTemporarily()
+            }
+        },
+        zoomOut() {
+            if (this.zoom > this.zoomMin) {
+                this.zoom -= this.zoomStep
+                this.showZoomTemporarily()
+            }
+        },
+        showZoomTemporarily() {
+            this.showZoomLabel = true
+            clearTimeout(this.zoomTimeout)
+            this.zoomTimeout = setTimeout(() => {
+                this.showZoomLabel = false
+            }, 1000)
+        }
+    },
+    beforeDestroy() {
+        clearTimeout(this.zoomTimeout)
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "zoomIn") this.zoomIn();
+                if (event.name == "zoomOut") this.zoomOut();
+            },
+            deep: true,
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.zoom-controls {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.zoom-container {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+}
+
+.zoom-area {
+    background: #fff;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.zoom-controls span {
+    font-size: 13px;
+}
+</style>

package/src/component/rental/DisplayCalculatePeriod.vue

@@ -1,49 +1,49 @@
-<template>
-  <span class="title">
-    <span> (</span>
-
-    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.year > 0">
-      <span> {{ periodRent.year }}</span>
-      <span v-if="periodRent.year == 1"> Ano</span>
-      <span v-if="periodRent.year > 1"> Anos</span>
-    </span>
-
-    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.month > 0">
-      <span> {{ periodRent.month }}</span>
-      <span v-if="periodRent.month == 1"> Mês</span>
-      <span v-if="periodRent.month > 1"> Meses</span>
-    </span>
-
-    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.day > 0">
-      <span> {{ periodRent.day }}</span>
-      <span v-if="periodRent.day == 1"> Dia</span>
-      <span v-if="periodRent.day > 1"> Dias</span>
-    </span>
-
-    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.hour > 0">
-      <span> {{ periodRent.hour }}</span>
-      <span v-if="periodRent.hour == 1"> Hora</span>
-      <span v-if="periodRent.hour > 1"> Horas</span>
-    </span>
-
-    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.minute > 0">
-      <span> {{ periodRent.minute }}</span>
-      <span v-if="periodRent.minute == 1"> Minuto</span>
-      <span v-if="periodRent.minute > 1"> Minutos</span>
-    </span>
-
-    <span> )</span>
-  </span>
-</template>
-<script>
-export default {
-  name: "DisplayCalculatePeriod",
-  props: {
-    periodRent: Object,
-    fontSize: {
-      type: Number,
-      default: 16,
-    },
-  },
-};
+<template>
+  <span class="title">
+    <span> (</span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.year > 0">
+      <span> {{ periodRent.year }}</span>
+      <span v-if="periodRent.year == 1"> Ano</span>
+      <span v-if="periodRent.year > 1"> Anos</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.month > 0">
+      <span> {{ periodRent.month }}</span>
+      <span v-if="periodRent.month == 1"> Mês</span>
+      <span v-if="periodRent.month > 1"> Meses</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.day > 0">
+      <span> {{ periodRent.day }}</span>
+      <span v-if="periodRent.day == 1"> Dia</span>
+      <span v-if="periodRent.day > 1"> Dias</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.hour > 0">
+      <span> {{ periodRent.hour }}</span>
+      <span v-if="periodRent.hour == 1"> Hora</span>
+      <span v-if="periodRent.hour > 1"> Horas</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.minute > 0">
+      <span> {{ periodRent.minute }}</span>
+      <span v-if="periodRent.minute == 1"> Minuto</span>
+      <span v-if="periodRent.minute > 1"> Minutos</span>
+    </span>
+
+    <span> )</span>
+  </span>
+</template>
+<script>
+export default {
+  name: "DisplayCalculatePeriod",
+  props: {
+    periodRent: Object,
+    fontSize: {
+      type: Number,
+      default: 16,
+    },
+  },
+};
 </script>

package/src/component/rental/DisplayPeriodRent.vue

@@ -1,55 +1,55 @@
-<template>
-  <div>
-    <span>
-      <slot name="start"></slot>
-    </span>
-    <span class="title-delivery" v-if="showDeliveryDevolution">{{ periodRent.deliveryDateHour }}
-    </span>
-
-    <span v-show="!showOnlyDeliveryDevolution">
-      <span class="title-main" :style="'font-size:' + fontSize + 'px'">{{
-        periodRent.startDateHour
-      }}</span>
-      -
-      <span class="title-main" :style="'font-size:' + fontSize + 'px'">{{
-        periodRent.endDateHour
-      }}</span>
-    </span>
-
-    <span v-show="!showOnlyDeliveryDevolution">
-      <DisplayCalculatePeriod :fontSize="fontSize" :periodRent="periodRent" />
-    </span>
-
-    <span class="title-devolution" v-if="showDeliveryDevolution">
-      {{ periodRent.devolutionDateHour }}
-    </span>
-  </div>
-</template>
-<script>
-import DisplayCalculatePeriod from "./DisplayCalculatePeriod.vue";
-
-export default {
-  name: "DisplayPeriodRent",
-  props: {
-    periodRent: Object,
-    showOnlyDeliveryDevolution: Boolean,
-    showDeliveryDevolution: Boolean,
-    fontSize: {
-      type: Number,
-      default: 16,
-    },
-  },
-  components: {
-    DisplayCalculatePeriod,
-  },
-};
-</script>
-<style scoped>
-.title-delivery {
-  color: #009183;
-}
-
-.title-devolution {
-  color: #3d4eae;
-}
-</style>
+<template>
+  <div>
+    <span>
+      <slot name="start"></slot>
+    </span>
+    <span class="title-delivery" v-if="showDeliveryDevolution">{{ periodRent.deliveryDateHour }}
+    </span>
+
+    <span v-show="!showOnlyDeliveryDevolution">
+      <span class="title-main" :style="'font-size:' + fontSize + 'px'">{{
+        periodRent.startDateHour
+      }}</span>
+      -
+      <span class="title-main" :style="'font-size:' + fontSize + 'px'">{{
+        periodRent.endDateHour
+      }}</span>
+    </span>
+
+    <span v-show="!showOnlyDeliveryDevolution">
+      <DisplayCalculatePeriod :fontSize="fontSize" :periodRent="periodRent" />
+    </span>
+
+    <span class="title-devolution" v-if="showDeliveryDevolution">
+      {{ periodRent.devolutionDateHour }}
+    </span>
+  </div>
+</template>
+<script>
+import DisplayCalculatePeriod from "./DisplayCalculatePeriod.vue";
+
+export default {
+  name: "DisplayPeriodRent",
+  props: {
+    periodRent: Object,
+    showOnlyDeliveryDevolution: Boolean,
+    showDeliveryDevolution: Boolean,
+    fontSize: {
+      type: Number,
+      default: 16,
+    },
+  },
+  components: {
+    DisplayCalculatePeriod,
+  },
+};
+</script>
+<style scoped>
+.title-delivery {
+  color: #009183;
+}
+
+.title-devolution {
+  color: #3d4eae;
+}
+</style>

package/src/component/rental/DisplayTotalization.vue

@@ -1,86 +1,86 @@
-<template>
-  <div class="main side-by-side">
-    <div class="molded-totalization" @click="execute">
-      <div class="title">{{ title }}
-        <span v-if="discount > 0" class="div-discount">{{ discount }}%</span>
-      </div>
-      <div class="value" :class="{ clicked: clicked }" v-if="currency" :style="_style">
-        {{ value | currency }}
-        <span class="icon-edit" v-if="clicked">
-          <i class="fa-solid fa-pen-to-square"></i>
-        </span>
-      </div>
-      <div class="value" :class="{ clicked: clicked }" v-else :style="_style">
-        {{ value }}
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "DisplayTotalization",
-  props: {
-    title: String,
-    currency: {
-      type: Boolean,
-      default: true,
-    },
-    discount: Number,
-    value: Number,
-    _style: String,
-    clicked: Function,
-  },
-  methods: {
-    execute() {
-      if (this.clicked) this.clicked(this.params);
-    },
-  },
-};
-</script>
-<style scoped>
-.main {
-  margin-bottom: 10px;
-  margin-right: 20px;
-}
-
-.molded-totalization {
-  height: 63px;
-  border: 1px solid #dbdfe9;
-  border-radius: 30px;
-  padding-left: 8px;
-  padding-right: 15px;
-  margin-bottom: 20px;
-  font-size: 13px;
-  font-weight: 400;
-  min-width: 180px;
-}
-
-.title {
-  padding-left: 10px;
-  font-weight: 500;
-}
-
-.value {
-  padding-left: 10px;
-  font-size: 18px;
-  font-weight: 700;
-  font-family: "inter", sans-serif !important;
-}
-
-.clicked:hover {
-  cursor: pointer;
-}
-
-.icon-edit {
-  font-size: 14px;
-}
-
-.div-discount {
-  background-color: #FF4843;
-  width: 12px;
-  border-radius: 10px;
-  color: white;
-  font-size: 10px !important;
-  padding: 3px;
-}
-</style>
+<template>
+  <div class="main side-by-side">
+    <div class="molded-totalization" @click="execute">
+      <div class="title">{{ title }}
+        <span v-if="discount > 0" class="div-discount">{{ discount }}%</span>
+      </div>
+      <div class="value" :class="{ clicked: clicked }" v-if="currency" :style="_style">
+        {{ value | currency }}
+        <span class="icon-edit" v-if="clicked">
+          <i class="fa-solid fa-pen-to-square"></i>
+        </span>
+      </div>
+      <div class="value" :class="{ clicked: clicked }" v-else :style="_style">
+        {{ value }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "DisplayTotalization",
+  props: {
+    title: String,
+    currency: {
+      type: Boolean,
+      default: true,
+    },
+    discount: Number,
+    value: Number,
+    _style: String,
+    clicked: Function,
+  },
+  methods: {
+    execute() {
+      if (this.clicked) this.clicked(this.params);
+    },
+  },
+};
+</script>
+<style scoped>
+.main {
+  margin-bottom: 10px;
+  margin-right: 20px;
+}
+
+.molded-totalization {
+  height: 63px;
+  border: 1px solid #dbdfe9;
+  border-radius: 30px;
+  padding-left: 8px;
+  padding-right: 15px;
+  margin-bottom: 20px;
+  font-size: 13px;
+  font-weight: 400;
+  min-width: 180px;
+}
+
+.title {
+  padding-left: 10px;
+  font-weight: 500;
+}
+
+.value {
+  padding-left: 10px;
+  font-size: 18px;
+  font-weight: 700;
+  font-family: "inter", sans-serif !important;
+}
+
+.clicked:hover {
+  cursor: pointer;
+}
+
+.icon-edit {
+  font-size: 14px;
+}
+
+.div-discount {
+  background-color: #FF4843;
+  width: 12px;
+  border-radius: 10px;
+  color: white;
+  font-size: 10px !important;
+  padding: 3px;
+}
+</style>