@nixweb/nixloc-ui 1.17.0 → 1.19.0

package/src/component/forms/ButtonToggle.vue

@@ -1,77 +1,77 @@
-<template>
-    <div>
-        <button-toggle :style="{ backgroundColor: value ? colorActive : colorInactive }" :class="buttonClass"
-            @click="handleClick">
-            <span v-if="value" class="icon-button-toggle"><i :class="classIconActive"></i></span>
-            <span v-else class="icon-button-toggle"><i :class="classIconInactive"></i></span>
-            <span v-if="value">{{ titleActive }}</span>
-            <span v-else="value">{{ titleInactive }}</span>
-        </button-toggle>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ToggleButton',
-    props: {
-        titleActive: String,
-        classIconActive: String,
-        colorActive: String,
-        titleInactive: String,
-        classIconInactive: String,
-        colorInactive: String,
-        value: Number,
-        disabled: Boolean
-    },
-    computed: {
-        buttonClass() {
-            return {
-                'button-toggle': true,
-                'button-toggle--value': this.value,
-                'button-toggle--inactive': !this.value,
-                'button-toggle-disabled': this.disabled
-            };
-        },
-    },
-    methods: {
-        handleClick() {
-            if (!this.disabled) {
-                this.value = this.value == true ? false : true;
-                this.$emit("input", this.value);
-            }
-        }
-    }
-}
-</script>
-
-<style scoped>
-.button-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 3px 15px;
-    border: none;
-    border-radius: 20px;
-    font-size: 13px;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-}
-
-.button-toggle--value {
-    color: white;
-}
-
-.button-toggle--inactive {
-    color: black;
-}
-
-.icon-button-toggle {
-    margin-right: 8px;
-}
-
-.button-toggle-disabled {
-    background-color: #b0b0b0;
-    opacity: 0.5;
-    cursor: not-allowed;
-}
+<template>
+    <div>
+        <button-toggle :style="{ backgroundColor: value ? colorActive : colorInactive }" :class="buttonClass"
+            @click="handleClick">
+            <span v-if="value" class="icon-button-toggle"><i :class="classIconActive"></i></span>
+            <span v-else class="icon-button-toggle"><i :class="classIconInactive"></i></span>
+            <span v-if="value">{{ titleActive }}</span>
+            <span v-else="value">{{ titleInactive }}</span>
+        </button-toggle>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ToggleButton',
+    props: {
+        titleActive: String,
+        classIconActive: String,
+        colorActive: String,
+        titleInactive: String,
+        classIconInactive: String,
+        colorInactive: String,
+        value: Number,
+        disabled: Boolean
+    },
+    computed: {
+        buttonClass() {
+            return {
+                'button-toggle': true,
+                'button-toggle--value': this.value,
+                'button-toggle--inactive': !this.value,
+                'button-toggle-disabled': this.disabled
+            };
+        },
+    },
+    methods: {
+        handleClick() {
+            if (!this.disabled) {
+                this.value = this.value == true ? false : true;
+                this.$emit("input", this.value);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.button-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 15px;
+    border: none;
+    border-radius: 20px;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.button-toggle--value {
+    color: white;
+}
+
+.button-toggle--inactive {
+    color: black;
+}
+
+.icon-button-toggle {
+    margin-right: 8px;
+}
+
+.button-toggle-disabled {
+    background-color: #b0b0b0;
+    opacity: 0.5;
+    cursor: not-allowed;
+}
 </style>

package/src/component/forms/DateYearMonth.vue

@@ -1,193 +1,193 @@
-<template>
-  <div class="date-filter">
-    <button @click="previous" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
-      :disabled="disabled">
-      <i class="fa-solid fa-chevron-left"></i>
-    </button>
-    <span class="date-display" :class="{ 'title-disabled': disabled }">{{ displayValue }} </span>
-    <span class="date-icon" @click="resetSelection()" :class="{ 'disabled': disabled }">
-      <i class="fa-solid fa-calendar-week"></i>
-    </span>
-    <button @click="next" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
-      :disabled="disabled">
-      <i class="fa-solid fa-chevron-right"></i>
-    </button>
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  props: {
-    mode: {
-      type: String,
-      required: true,
-      validator(value) {
-        return ['month', 'year'].includes(value);
-      }
-    },
-    value: {
-      type: Number,
-      required: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      currentMonth: new Date().getMonth(),
-      currentYear: new Date().getFullYear()
-    };
-  },
-  created() {
-    this.resetSelection();
-  },
-  mounted() {
-    this.sendEvent();
-  },
-  computed: {
-    displayValue() {
-      if (this.mode === 'month') {
-        return this.monthNames[this.currentMonth];
-      } else {
-        return this.currentYear;
-      }
-    },
-    monthNames() {
-      return ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
-    },
-    buttonClass() {
-      return this.mode === 'month' ? 'month-mode' : 'year-mode';
-    }
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    previous() {
-      if (this.disabled) return;
-      if (this.mode === 'month') {
-        this.currentMonth = (this.currentMonth + 11) % 12;
-        if (this.currentMonth === 11) {
-          this.currentYear--;
-        }
-      } else {
-        this.currentYear--;
-      }
-      this.$emit('input', this.getValue());
-      this.sendEvent();
-    },
-    next() {
-      if (this.disabled) return;
-      if (this.mode === 'month') {
-        this.currentMonth = (this.currentMonth + 1) % 12;
-        if (this.currentMonth === 0) {
-          this.currentYear++;
-        }
-      } else {
-        this.currentYear++;
-      }
-      this.$emit('input', this.getValue());
-      this.sendEvent();
-    },
-    resetSelection() {
-      const now = new Date();
-      if (this.mode === 'month') {
-        this.currentMonth = now.getMonth();
-        this.currentYear = now.getFullYear();
-      } else {
-        this.currentYear = now.getFullYear();
-      }
-      this.sendEvent();
-    },
-    getValue() {
-      if (this.mode === 'month') {
-        return (this.currentMonth + 1).toString();
-      } else {
-        return this.currentYear.toString();
-      }
-    },
-    sendEvent() {
-      this.addEvent({ name: "dateYearMonth", data: { mode: this.mode, value: this.getValue() } });
-      this.$emit('input', this.getValue());
-    }
-  },
-  watch: {
-    mode(newMode) {
-      this.resetSelection();
-    },
-    value(newValue) {
-      if (this.mode === 'month') {
-        this.currentMonth = newValue - 1;
-      } else {
-        this.currentYear = newValue;
-      }
-    }
-  },
-};
-</script>
-
-<style scoped>
-.date-filter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.navigation-button {
-  color: white;
-  border: none;
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2em;
-  cursor: pointer;
-  transition: background-color 0.3s, transform 0.2s;
-}
-
-.navigation-button:hover {
-  opacity: 0.8;
-}
-
-.navigation-button:active {
-  transform: scale(0.95);
-}
-
-.navigation-button.disabled {
-  background-color: #b0b0b0;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.date-display {
-  font-size: 1.5em;
-  font-weight: bold;
-}
-
-.month-mode {
-  background-color: #ffa500;
-}
-
-.year-mode {
-  background-color: #007bff;
-}
-
-.date-icon {
-  cursor: pointer;
-  color: rgb(73, 72, 72);
-}
-
-.title-disabled {
-  color: #b0b0b0;
-}
-
-.date-icon.disabled {
-  color: #b0b0b0;
-  cursor: not-allowed;
-}
+<template>
+  <div class="date-filter">
+    <button @click="previous" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
+      :disabled="disabled">
+      <i class="fa-solid fa-chevron-left"></i>
+    </button>
+    <span class="date-display" :class="{ 'title-disabled': disabled }">{{ displayValue }} </span>
+    <span class="date-icon" @click="resetSelection()" :class="{ 'disabled': disabled }">
+      <i class="fa-solid fa-calendar-week"></i>
+    </span>
+    <button @click="next" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
+      :disabled="disabled">
+      <i class="fa-solid fa-chevron-right"></i>
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  props: {
+    mode: {
+      type: String,
+      required: true,
+      validator(value) {
+        return ['month', 'year'].includes(value);
+      }
+    },
+    value: {
+      type: Number,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      currentMonth: new Date().getMonth(),
+      currentYear: new Date().getFullYear()
+    };
+  },
+  created() {
+    this.resetSelection();
+  },
+  mounted() {
+    this.sendEvent();
+  },
+  computed: {
+    displayValue() {
+      if (this.mode === 'month') {
+        return this.monthNames[this.currentMonth];
+      } else {
+        return this.currentYear;
+      }
+    },
+    monthNames() {
+      return ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
+    },
+    buttonClass() {
+      return this.mode === 'month' ? 'month-mode' : 'year-mode';
+    }
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    previous() {
+      if (this.disabled) return;
+      if (this.mode === 'month') {
+        this.currentMonth = (this.currentMonth + 11) % 12;
+        if (this.currentMonth === 11) {
+          this.currentYear--;
+        }
+      } else {
+        this.currentYear--;
+      }
+      this.$emit('input', this.getValue());
+      this.sendEvent();
+    },
+    next() {
+      if (this.disabled) return;
+      if (this.mode === 'month') {
+        this.currentMonth = (this.currentMonth + 1) % 12;
+        if (this.currentMonth === 0) {
+          this.currentYear++;
+        }
+      } else {
+        this.currentYear++;
+      }
+      this.$emit('input', this.getValue());
+      this.sendEvent();
+    },
+    resetSelection() {
+      const now = new Date();
+      if (this.mode === 'month') {
+        this.currentMonth = now.getMonth();
+        this.currentYear = now.getFullYear();
+      } else {
+        this.currentYear = now.getFullYear();
+      }
+      this.sendEvent();
+    },
+    getValue() {
+      if (this.mode === 'month') {
+        return (this.currentMonth + 1).toString();
+      } else {
+        return this.currentYear.toString();
+      }
+    },
+    sendEvent() {
+      this.addEvent({ name: "dateYearMonth", data: { mode: this.mode, value: this.getValue() } });
+      this.$emit('input', this.getValue());
+    }
+  },
+  watch: {
+    mode(newMode) {
+      this.resetSelection();
+    },
+    value(newValue) {
+      if (this.mode === 'month') {
+        this.currentMonth = newValue - 1;
+      } else {
+        this.currentYear = newValue;
+      }
+    }
+  },
+};
+</script>
+
+<style scoped>
+.date-filter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.navigation-button {
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.navigation-button:hover {
+  opacity: 0.8;
+}
+
+.navigation-button:active {
+  transform: scale(0.95);
+}
+
+.navigation-button.disabled {
+  background-color: #b0b0b0;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.date-display {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.month-mode {
+  background-color: #ffa500;
+}
+
+.year-mode {
+  background-color: #007bff;
+}
+
+.date-icon {
+  cursor: pointer;
+  color: rgb(73, 72, 72);
+}
+
+.title-disabled {
+  color: #b0b0b0;
+}
+
+.date-icon.disabled {
+  color: #b0b0b0;
+  cursor: not-allowed;
+}
 </style>