@nixweb/nixloc-ui 1.16.0 → 1.17.0

package/src/component/forms/CheckboxSimple.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <b-form-checkbox v-model="valueLocal" :value="true" :unchecked-value="false">
+      <span class="title">{{ title }}</span>
+      <Tip :field="field" :formName="formName" />
+    </b-form-checkbox>
+  </div>
+</template>
+
+<script>
+import Tip from "../shared/Tip.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  components: { Tip },
+  name: "CheckboxSimple",
+  props: {
+    title: String,
+    formName: String,
+    fieldTarget: String,
+    field: String,
+    value: Boolean,
+    changed: Function,
+    params: Object,
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      valueLocal: false,
+    };
+  },
+  methods: {
+    ...mapMutations("validation", ["updateFormDirty"]),
+    ...mapMutations("generic", ["addFilter"]),
+  },
+  mounted() {
+    this.valueLocal = this.value;
+  },
+  watch: {
+    value() {
+      this.valueLocal = this.value;
+    },
+    valueLocal() {
+      this.$emit("input", this.valueLocal);
+      if (this.markFormDirty) this.updateFormDirty(true);
+      if (this.changed) this.changed(this.params);
+
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: this.valueLocal ? "true" : "false" };
+        this.addFilter(obj);
+      }
+    },
+  },
+};
+</script>

package/src/component/forms/Color.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="form-group">
+    <div>
+      <span class="title">{{ title }} </span>
+      <compact-picker v-model.trim="color.hex" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Chrome } from "vue-color";
+
+export default {
+  name: "Color",
+  components: {
+    "compact-picker": Chrome,
+  },
+  props: {
+    title: String,
+    field: String,
+    formName: String,
+    value: String,
+  },
+  data() {
+    return {
+      color: { hex: "#40BF84" },
+    };
+  },
+  watch: {
+    value() {
+      this.color.hex = this.value;
+    },
+    "color.hex": function (value) {
+      if (value.hex) this.$emit("input", value.hex);
+    },
+  },
+};
+</script>

package/src/component/forms/DateTime.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="form-group">
+    <label v-if="title">
+      <span class="title">{{ title }} </span>
+      <span class="required" v-if="required">*</span>
+      <Tip :field="field" :formName="formName" />
+    </label>
+    <div class="inner-addon right-addon">
+      <i v-if="notifications.length > 0 && formDirty" class="required glyphicon fas fa-exclamation-triangle"></i>
+      <date-picker lang="pt-br" :disabled="disabled" :range="range" @confirm="executeConfirm" @change="executeConfirm"
+        @clear="close" :confirm="confirm" :confirm-text="confirmText" :format="format" value-type="format"
+        :time-picker-options="{
+        start: '07:00',
+        step: '00:30',
+        end: '23:30',
+        format: 'HH:mm',
+      }" width="100%" :placeholder="placeholder" :type="type" v-model="valueLocal"
+        :class="{ 'is-invalid': notifications.length > 0 && formDirty }"></date-picker>
+    </div>
+
+    <div v-if="formDirty">
+      <div v-for="message in notifications" :key="message">
+        <span class="invalid">{{ message }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tip from "../shared/Tip";
+import DatePicker from "vue2-datepicker";
+
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+  components: { Tip, DatePicker },
+  name: "Data",
+  mixins: [],
+  props: [
+    "title",
+    "field",
+    "fieldTarget",
+    "placeholder",
+    "formName",
+    "required",
+    "disabled",
+    "format",
+    "type",
+    "value",
+    "range",
+    "confirm",
+    "confirmText",
+    "markFormDirty",
+  ],
+  data() {
+    return {
+      notifications: [],
+      formDirty: false,
+      valueLocal: "",
+      markFormDirtyLocal: false,
+    };
+  },
+  created() {
+    this.validate();
+    this.valueLocal = this.value;
+
+    if (this.markFormDirty == undefined) this.markFormDirtyLocal = true;
+  },
+  methods: {
+    ...mapMutations("validation", [
+      "addValidation",
+      "removeValidation",
+      "updateFormDirty",
+    ]),
+    ...mapMutations("generic", ["addFilter", "removeTag", "addEvent"]),
+    validate() {
+      this.notifications = [];
+
+      if (this.required && this.valueLocal.length == 0) {
+        var message = `${this.title} não pode ser vazio!`;
+        this.notifications.push(message);
+      }
+    },
+    executeConfirm() {
+      if (this.range) {
+        if (this.fieldTarget) {
+          let obj = {
+            fieldTarget: this.fieldTarget,
+            value: { start: this.valueLocal[0], end: this.valueLocal[1] },
+          };
+          this.addFilter(obj);
+        }
+      }
+    },
+    close() {
+      this.removeTag("period");
+      this.addEvent({ name: "tagRemoved", data: "period" });
+    },
+  },
+  computed: {
+    ...mapState("validation", ["resetForm", "validations"]),
+    ...mapGetters("generic", ["event"]),
+  },
+  watch: {
+    valueLocal() {
+      this.validate();
+      this.formDirty = true;
+      if (this.markFormDirtyLocal) this.updateFormDirty(true);
+      this.$emit("input", this.valueLocal);
+    },
+    value() {
+      this.valueLocal = this.value;
+      if (this.markFormDirty) this.updateFormDirty(true);
+    },
+    notifications() {
+      let self = this;
+      this.notifications.forEach(function (notification) {
+        let obj = {
+          key: self.field + "&" + self.formName,
+          formName: self.formName,
+          notification: notification,
+        };
+        self.addValidation(obj);
+      });
+
+      if (this.notifications.length == 0) {
+        let obj = {
+          key: self.field + "&" + self.formName,
+          formName: self.formName,
+        };
+        self.removeValidation(obj);
+      }
+    },
+    resetForm: {
+      handler(form) {
+        if (form.name == this.formName) this.formDirty = false;
+      },
+      deep: true,
+    },
+    event: {
+      handler(event) {
+        if (event.name == "tagRemoved") {
+          this.valueLocal = [];
+
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.title {
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  color: #0a0a0a;
+  letter-spacing: 0.5px !important;
+}
+
+.success {
+  color: #94aa2a;
+  font-size: 14px;
+}
+
+.invalid {
+  color: #f0134d;
+  font-size: 14px;
+}
+</style>

package/src/component/forms/DateYearMonth.vue

@@ -0,0 +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;
+}
+</style>

package/src/component/forms/Dropdown.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="side-by-side main-dropdown">
+    <div class="dropdown">
+      <button class="button dropbtn" :class="{
+        small: size === 'small',
+        medium: size === 'medium',
+        large: size === 'large',
+        primary: type === 'primary',
+        success: type === 'success',
+        warning: type === 'warning',
+        info: type === 'info',
+        edit: type === 'edit',
+        danger: type === 'danger',
+        disabled: disabled,
+      }" :disabled="disabled" @click="toggle()">
+        {{ title }}
+        <span class="icon-dropdown"><i :class="classIcon"></i></span>
+      </button>
+      <div v-show="show" class="text-left dropdown-content" :style="'right:' + right" @mouseleave="show = false">
+        <Molded :borderRadius="15">
+          <div v-for="item in items" :key="item.eventName">
+            <div v-if="isVisible(item.conditionVisibility)" :style="item.style" class="item-dropdown"
+              @click="execute(item.eventName)">
+              <b-row>
+                <b-col sm="2">
+                  <i class="icon-dropdown" :class="item.classIcon"></i>
+                </b-col>
+                <b-col sm="10">
+                  <span class="title-dropdown"> {{ item.title }}</span>
+                </b-col>
+              </b-row>
+            </div>
+            <hr v-if="item.hr && isVisible(item.conditionVisibility)" class="hr-dropdown" />
+          </div>
+        </Molded>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Molded from "../layout/Molded.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "Dropdown",
+  components: { Molded },
+  name: "Button",
+  props: {
+    title: String,
+    type: String,
+    classIcon: String,
+    size: String,
+    right: {
+      type: String,
+      default: "0",
+    },
+    disabled: Boolean,
+    param: Object,
+    items: Array,
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    toggle() {
+      this.show = this.show ? false : true;
+    },
+    execute(eventName) {
+      this.toggle();
+      this.addEvent({ name: eventName, data: this.param });
+    },
+    isVisible(conditionVisibility) {
+      // se for undefined, quer dizer que não tem condicional, então pode mostrar
+      if (conditionVisibility == undefined) return true;
+
+      var verify = `this.param.${conditionVisibility}`;
+      if (eval(verify)) return true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main-dropdown {
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+}
+
+.hr-dropdown {
+  background: #fafafc !important;
+  height: 1px !important;
+  margin: 0px !important;
+}
+
+.item-dropdown {
+  cursor: pointer;
+  padding-bottom: 5px;
+}
+
+.icon-dropdown {
+  margin-left: 5px;
+}
+
+.item-dropdown:hover {
+  background-color: #fafafc;
+}
+
+.title {
+  padding-left: 5px;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  margin-left: 5px;
+  min-width: 30px;
+}
+
+.dropdown-content {
+  position: absolute;
+  margin-top: 1px;
+  background-color: #ffffff;
+  border-radius: 15px;
+  min-width: 270px;
+  z-index: 1000;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 10px 15px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+.button {
+  padding: 8px 12px;
+  cursor: pointer;
+  border: none;
+  border-radius: 40px !important;
+  font-size: 14px;
+  font-weight: 400;
+  -webkit-box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
+  -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
+}
+
+.small {
+  padding: 3px 7px;
+  font-size: 13px;
+}
+
+.medium {
+  padding: 7px 12px;
+  font-size: 14px;
+}
+
+.large {
+  padding: 10px 15px;
+  font-size: 14px;
+}
+
+.disabled {
+  background: #bbbbbb !important;
+  border-color: #bbbbbb !important;
+  color: #fff;
+}
+
+.primary {
+  background: #577696;
+  border-color: #577696;
+  color: #fff;
+}
+
+.primary:hover {
+  background: #355472;
+}
+
+.success {
+  color: #fff;
+  background: #94aa2a;
+  border-color: #94aa2a;
+}
+
+.success:hover {
+  background: #6d7e1c;
+}
+
+.info {
+  color: #fff;
+  border-color: #4ab4e2;
+  background: #4ab4e2;
+}
+
+.info:hover {
+  background: #3e90b3;
+}
+
+.edit {
+  color: #fff;
+  border-color: #7b7f83;
+  background: #7b7f83;
+}
+
+.edit:hover {
+  background: #595c5f;
+}
+
+.warning {
+  color: #fff;
+  border-color: #f1bc31;
+  background: #f1bc31;
+}
+
+.warning:hover {
+  background: #a37d1b;
+}
+
+.danger {
+  color: #fff;
+  border-color: #f0134d;
+  background: #f0134d;
+}
+
+.danger:hover {
+  background: #c70f40;
+}
+</style>