@nixweb/nixloc-ui 1.19.0 → 1.20.0

package/src/component/shared/actions/ActionsOptions.vue

@@ -1,209 +1,209 @@
-<template>
-  <div class="actions-options">
-    <div class="ao-body">
-      <ScrollBar
-        :minHeight="minHeight"
-        :maxHeight="maxHeight"
-        class="ao-scroll"
-      >
-        <span class="ao-description title">
-          {{ actionSelected.description }}
-        </span>
-
-        <div v-if="actionSelected.type == 'component'">
-          <component
-            :is="actionSelected.component"
-            v-model="optionSelected"
-          ></component>
-        </div>
-
-        <div
-          v-if="actionSelected.type == 'options'"
-          class="ao-radios"
-          role="group"
-          :aria-labelledby="'ao-title'"
-        >
-          <RadioGroup
-            :field="fieldName"
-            :options="filteredOptions"
-            v-model="optionSelected"
-          />
-        </div>
-
-        <div
-          v-else
-          class="ao-empty"
-          aria-live="polite"
-        >
-          <i class="fas fa-inbox"></i>
-          <span>Nenhuma opção encontrada.</span>
-        </div>
-      </ScrollBar>
-    </div>
-
-    <footer class="ao-footer">
-      <div class="ao-footer-left">
-        <span
-          v-if="optionSelected"
-          class="ao-helper title"
-        >
-          Selecionado: <strong>{{ labelSelected }}</strong>
-        </span>
-      </div>
-      <div class="ao-footer-right">
-        <Button
-          key="select"
-          :disabled="!isValid"
-          :title="btnNextLabel"
-          type="primary"
-          size="medium"
-          :clicked="next"
-        />
-      </div>
-    </footer>
-  </div>
-</template>
-
-<script>
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-import { mapMutations } from "vuex";
-
-export default {
-  name: "ActionsOptions",
-  components: { Button, RadioGroup, ScrollBar },
-  props: {
-    actionSelected: { type: Object, required: true },
-    minHeight: { type: Number, default: 120 },
-    maxHeight: { type: Number, default: 260 },
-    btnNextLabel: { type: String, default: "Avançar" },
-    fieldName: { type: String, default: "group" },
-    searchThreshold: { type: Number, default: 10 },
-    value: String,
-  },
-  data() {
-    return {
-      optionSelected: null,
-      query: "",
-    };
-  },
-  computed: {
-    optionsRaw() {
-      const list =
-        this.actionSelected && Array.isArray(this.actionSelected.options)
-          ? this.actionSelected.options
-          : [];
-      return list.map((o) => ({ text: o.text, value: o.value }));
-    },
-    filteredOptions() {
-      const q = (this.query || "").toLowerCase();
-      if (!q) return this.optionsRaw;
-      return this.optionsRaw.filter(
-        (opt) =>
-          String(opt.text).toLowerCase().includes(q) ||
-          String(opt.value).toLowerCase().includes(q)
-      );
-    },
-    isValid() {
-      return (
-        this.optionSelected !== null &&
-        this.optionSelected !== undefined &&
-        this.optionSelected !== ""
-      );
-    },
-    labelSelected() {
-      const found = this.optionsRaw.find(
-        (o) => o.value === this.optionSelected
-      );
-      return found ? found.text : "";
-    },
-  },
-  watch: {
-    optionSelected: {
-      handler(value) {
-        this.$emit("input", value);
-      },
-      deep: true,
-    },
-    optionsRaw: {
-      immediate: true,
-      handler(list) {
-        if (Array.isArray(list) && list.length === 1) {
-          this.optionSelected = list[0].value;
-        }
-      },
-    },
-  },
-  methods: {
-    ...mapMutations("generic", ["openModal", "hideModal"]),
-    next() {
-      if (!this.isValid) return;
-      this.openModal("confirm");
-    },
-    enterToNext() {
-      if (this.isValid) this.next();
-    },
-  },
-};
-</script>
-
-<style scoped>
-.actions-options {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-width: 640px;
-}
-
-.ao-body {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.ao-scroll {
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  padding: 8px;
-  background: #fff;
-}
-
-.ao-radios {
-  display: grid;
-  gap: 10px;
-}
-
-.ao-empty {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #6b7280;
-  padding: 8px;
-}
-
-.ao-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding-top: 8px;
-  position: sticky;
-  bottom: 0;
-}
-
-.ao-description {
-  color: #475569;
-  font-weight: 500;
-  font-size: 13px;
-}
-
-.ao-footer-right {
-  display: flex;
-  gap: 8px;
-}
-
-.ao-helper {
-  color: #374151;
-}
-</style>
+<template>
+  <div class="actions-options">
+    <div class="ao-body">
+      <ScrollBar
+        :minHeight="minHeight"
+        :maxHeight="maxHeight"
+        class="ao-scroll"
+      >
+        <span class="ao-description title">
+          {{ actionSelected.description }}
+        </span>
+
+        <div v-if="actionSelected.type == 'component'">
+          <component
+            :is="actionSelected.component"
+            v-model="optionSelected"
+          ></component>
+        </div>
+
+        <div
+          v-if="actionSelected.type == 'options'"
+          class="ao-radios"
+          role="group"
+          :aria-labelledby="'ao-title'"
+        >
+          <RadioGroup
+            :field="fieldName"
+            :options="filteredOptions"
+            v-model="optionSelected"
+          />
+        </div>
+
+        <div
+          v-else
+          class="ao-empty"
+          aria-live="polite"
+        >
+          <i class="fas fa-inbox"></i>
+          <span>Nenhuma opção encontrada.</span>
+        </div>
+      </ScrollBar>
+    </div>
+
+    <footer class="ao-footer">
+      <div class="ao-footer-left">
+        <span
+          v-if="optionSelected"
+          class="ao-helper title"
+        >
+          Selecionado: <strong>{{ labelSelected }}</strong>
+        </span>
+      </div>
+      <div class="ao-footer-right">
+        <Button
+          key="select"
+          :disabled="!isValid"
+          :title="btnNextLabel"
+          type="primary"
+          size="medium"
+          :clicked="next"
+        />
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import { mapMutations } from "vuex";
+
+export default {
+  name: "ActionsOptions",
+  components: { Button, RadioGroup, ScrollBar },
+  props: {
+    actionSelected: { type: Object, required: true },
+    minHeight: { type: Number, default: 120 },
+    maxHeight: { type: Number, default: 260 },
+    btnNextLabel: { type: String, default: "Avançar" },
+    fieldName: { type: String, default: "group" },
+    searchThreshold: { type: Number, default: 10 },
+    value: String,
+  },
+  data() {
+    return {
+      optionSelected: null,
+      query: "",
+    };
+  },
+  computed: {
+    optionsRaw() {
+      const list =
+        this.actionSelected && Array.isArray(this.actionSelected.options)
+          ? this.actionSelected.options
+          : [];
+      return list.map((o) => ({ text: o.text, value: o.value }));
+    },
+    filteredOptions() {
+      const q = (this.query || "").toLowerCase();
+      if (!q) return this.optionsRaw;
+      return this.optionsRaw.filter(
+        (opt) =>
+          String(opt.text).toLowerCase().includes(q) ||
+          String(opt.value).toLowerCase().includes(q)
+      );
+    },
+    isValid() {
+      return (
+        this.optionSelected !== null &&
+        this.optionSelected !== undefined &&
+        this.optionSelected !== ""
+      );
+    },
+    labelSelected() {
+      const found = this.optionsRaw.find(
+        (o) => o.value === this.optionSelected
+      );
+      return found ? found.text : "";
+    },
+  },
+  watch: {
+    optionSelected: {
+      handler(value) {
+        this.$emit("input", value);
+      },
+      deep: true,
+    },
+    optionsRaw: {
+      immediate: true,
+      handler(list) {
+        if (Array.isArray(list) && list.length === 1) {
+          this.optionSelected = list[0].value;
+        }
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["openModal", "hideModal"]),
+    next() {
+      if (!this.isValid) return;
+      this.openModal("confirm");
+    },
+    enterToNext() {
+      if (this.isValid) this.next();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.actions-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 640px;
+}
+
+.ao-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ao-scroll {
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 8px;
+  background: #fff;
+}
+
+.ao-radios {
+  display: grid;
+  gap: 10px;
+}
+
+.ao-empty {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #6b7280;
+  padding: 8px;
+}
+
+.ao-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 8px;
+  position: sticky;
+  bottom: 0;
+}
+
+.ao-description {
+  color: #475569;
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.ao-footer-right {
+  display: flex;
+  gap: 8px;
+}
+
+.ao-helper {
+  color: #374151;
+}
+</style>