@nixweb/nixloc-ui 1.17.0 → 1.19.0

package/src/component/layout/HideShow.vue

@@ -1,62 +1,62 @@
-<template>
-  <div>
-    <div class="div-icon" :class="classCss" :style="'font-size:' + iconSize + 'px'" v-if="!show">
-      <div class="icon-eye" @click="show = true">
-        <i class="icon-separate fa-solid fa-circle-small"></i>
-        <i class="icon-separate fa-solid fa-circle-small"></i>
-        <i class="icon-separate fa-solid fa-circle-small"></i>
-      </div>
-    </div>
-    <div class="div-icon" v-if="show" @click="show = false">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-<script>
-import { mapGetters } from "vuex";
-
-export default {
-  name: "HideShow",
-  props: {
-    iconSize: {
-      type: Number,
-      default: 50,
-    },
-    classCss: String
-  },
-  data() {
-    return {
-      show: false,
-    };
-  },
-  computed: {
-    ...mapGetters("generic", ["event"]),
-  },
-  watch: {
-    event: {
-      handler(event) {
-        if (event.name == "hideShow") {
-          this.show = event.data;
-        }
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-<style scoped>
-.div-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.icon-eye {
-  color: #dce3e9;
-}
-
-.icon-separate {
-  padding: 3px;
-}
+<template>
+  <div>
+    <div class="div-icon" :class="classCss" :style="'font-size:' + iconSize + 'px'" v-if="!show">
+      <div class="icon-eye" @click="show = true">
+        <i class="icon-separate fa-solid fa-circle-small"></i>
+        <i class="icon-separate fa-solid fa-circle-small"></i>
+        <i class="icon-separate fa-solid fa-circle-small"></i>
+      </div>
+    </div>
+    <div class="div-icon" v-if="show" @click="show = false">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "HideShow",
+  props: {
+    iconSize: {
+      type: Number,
+      default: 50,
+    },
+    classCss: String
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "hideShow") {
+          this.show = event.data;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.icon-eye {
+  color: #dce3e9;
+}
+
+.icon-separate {
+  padding: 3px;
+}
 </style>

package/src/component/layout/IconMolded.vue

@@ -1,59 +1,59 @@
-<template>
-  <div>
-    <div v-for="icon in icons" class="molded-icon side-by-side" @click="executeEvent(icon.eventName)" v-b-tooltip.hover
-      :title="icon.tooltip">
-      <div class="icon-molded-icon" :class="{
-        'icon-active-top': menuActive == icon.module,
-        'icon-normal-top': menuActive != icon.module,
-      }">
-        <i :class="icon.icon"></i>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "IconMolded",
-  props: {
-    icons: Array,
-  },
-  data() {
-    return { menuActive: "" };
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    executeEvent(eventName) {
-      this.addEvent({
-        name: eventName,
-      });
-    },
-  },
-  watch: {
-    $route: {
-      handler: function (router) {
-        this.menuActive = router.matched[0].props.default.module;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.molded-icon {
-  height: 38px;
-  width: 38px;
-  margin-left: 10px;
-  margin-top: 4px;
-  cursor: pointer;
-}
-
-.icon-molded-icon {
-  font-size: 20px;
-  margin-left: 10px;
-  color: white;
-}
+<template>
+  <div>
+    <div v-for="icon in icons" class="molded-icon side-by-side" @click="executeEvent(icon.eventName)" v-b-tooltip.hover
+      :title="icon.tooltip">
+      <div class="icon-molded-icon" :class="{
+        'icon-active-top': menuActive == icon.module,
+        'icon-normal-top': menuActive != icon.module,
+      }">
+        <i :class="icon.icon"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  name: "IconMolded",
+  props: {
+    icons: Array,
+  },
+  data() {
+    return { menuActive: "" };
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    executeEvent(eventName) {
+      this.addEvent({
+        name: eventName,
+      });
+    },
+  },
+  watch: {
+    $route: {
+      handler: function (router) {
+        this.menuActive = router.matched[0].props.default.module;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.molded-icon {
+  height: 38px;
+  width: 38px;
+  margin-left: 10px;
+  margin-top: 4px;
+  cursor: pointer;
+}
+
+.icon-molded-icon {
+  font-size: 20px;
+  margin-left: 10px;
+  color: white;
+}
 </style>

package/src/component/layout/IconPicker.vue

@@ -1,161 +1,161 @@
-<template>
-    <div class="icon-picker" ref="root">
-        <div v-if="title" class="icon-picker__title">{{ title }}</div>
-
-        <div class="icon-picker__trigger" :style="{ backgroundColor: color }" role="button" tabindex="0"
-            @click="toggle()" @keydown.enter.prevent="toggle()" @keydown.space.prevent="toggle()"
-            aria-haspopup="listbox" :aria-expanded="open ? 'true' : 'false'">
-            <i :class="innerValue || 'far fa-square'"></i>
-        </div>
-
-        <transition name="icon-picker--fade">
-            <div v-show="open" class="icon-picker__menu" role="listbox" :aria-label="title || 'Escolher ícone'">
-                <div class="icon-picker__grid">
-                    <div v-for="ic in icons" :key="ic" class="icon-picker__item"
-                        :class="{ 'icon-picker__item--selected': ic === innerValue }" role="option"
-                        :aria-selected="ic === innerValue ? 'true' : 'false'" tabindex="0" @click="choose(ic)"
-                        @keydown.enter.prevent="choose(ic)" @keydown.space.prevent="choose(ic)"
-                        :style="ic === innerValue ? { backgroundColor: color } : {}">
-                        <i :class="ic"></i>
-                    </div>
-                </div>
-            </div>
-        </transition>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "IconPicker",
-    model: { prop: "value", event: "input" },
-    props: {
-        value: { type: String, default: "fas fa-wallet" },
-        title: { type: String, default: "" },
-        color: { type: String, default: "#64B5F6" },
-        icons: {
-            type: Array,
-            default: function () {
-                return [
-                    "fas fa-wallet", "fas fa-cash-register", "fas fa-shopping-cart", "fas fa-receipt", "fas fa-credit-card", "fas fa-money-bill", "fas fa-coins", "fas fa-percentage", "fas fa-dollar-sign", "fas fa-file-invoice", "fas fa-chart-line",
-                    "fas fa-box-open", "fas fa-box", "fas fa-truck", "fas fa-warehouse", "fas fa-shipping-fast", "fas fa-dolly", "fas fa-pallet", "fas fa-trailer", "fas fa-clipboard-list",
-                    "fas fa-building", "fas fa-city", "fas fa-home", "fas fa-briefcase", "fas fa-sitemap", "fas fa-industry", "fas fa-store", "fas fa-store-alt", "fas fa-landmark", "fas fa-hotel",
-                    "fas fa-users", "fas fa-user-tie", "fas fa-user", "fas fa-user-friends", "fas fa-user-cog", "fas fa-user-shield", "fas fa-user-circle", "fas fa-id-badge", "fas fa-id-card",
-                    "fas fa-cogs", "fas fa-tools", "fas fa-desktop", "fas fa-laptop", "fas fa-server", "fas fa-database", "fas fa-cloud", "fas fa-network-wired", "fas fa-microchip", "fas fa-robot",
-                    "fas fa-shield-alt", "fas fa-lock", "fas fa-balance-scale", "fas fa-file-contract", "fas fa-gavel", "fas fa-passport", "fas fa-clipboard-check",
-                    "fas fa-bullhorn", "fas fa-ad", "fas fa-mail-bulk", "fas fa-envelope", "fas fa-comments", "fas fa-headset", "fas fa-phone-alt", "fas fa-share-alt", "fas fa-at",
-                    "fas fa-graduation-cap", "fas fa-book", "fas fa-book-open", "fas fa-chalkboard-teacher", "fas fa-lightbulb", "fas fa-brain", "fas fa-project-diagram",
-                    "fas fa-car", "fas fa-gas-pump", "fas fa-utensils", "fas fa-coffee", "fas fa-gift", "fas fa-tag", "fas fa-leaf", "fas fa-seedling", "fas fa-heart", "fas fa-music", "fas fa-paw", "fas fa-plane"
-                ];
-            },
-        },
-    },
-    data() {
-        return {
-            innerValue: this.value || "",
-            open: false,
-        };
-    },
-    watch: {
-        value(v) { this.innerValue = v; }
-    },
-    mounted() {
-        document.addEventListener("click", this.onClickOutside, { passive: true });
-    },
-    beforeDestroy() {
-        document.removeEventListener("click", this.onClickOutside);
-    },
-    methods: {
-        toggle() { this.open = !this.open; },
-        close() { this.open = false; },
-        choose(ic) {
-            this.innerValue = ic;
-            this.$emit("input", ic);
-            this.close();
-        },
-        onClickOutside(e) {
-            const root = this.$refs.root;
-            if (this.open && root && !root.contains(e.target)) this.close();
-        }
-    }
-};
-</script>
-
-<style scoped>
-.icon-picker {
-    position: relative;
-    display: inline-grid;
-    gap: .375rem;
-    margin-bottom: 10px;
-}
-
-.icon-picker__title {
-    font-weight: 500;
-}
-
-.icon-picker__trigger {
-    width: 56px;
-    height: 56px;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    cursor: pointer;
-    user-select: none;
-}
-
-.icon-picker__trigger i {
-    font-size: 22px;
-    color: #fff;
-}
-
-.icon-picker__menu {
-    position: absolute;
-    z-index: 40;
-    top: calc(100% + 8px);
-    left: 0;
-    width: 540px;
-    height: 320px;
-    overflow-y: auto;
-    background: #fff;
-    border: 1px solid #e5e7eb;
-    border-radius: 10px;
-    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
-    padding: .5rem .5rem .6rem;
-}
-
-.icon-picker__grid {
-    display: grid;
-    grid-template-columns: repeat(12, 36px);
-    gap: .5rem;
-    justify-content: start;
-}
-
-.icon-picker__item {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: #f3f4f6;
-    display: grid;
-    place-items: center;
-    cursor: pointer;
-}
-
-.icon-picker__item i {
-    font-size: 14px;
-    color: #6b7280;
-}
-
-.icon-picker__item--selected i {
-    color: #fff;
-}
-
-.icon-picker--fade-enter-active,
-.icon-picker--fade-leave-active {
-    transition: all .14s ease;
-}
-
-.icon-picker--fade-enter,
-.icon-picker--fade-leave-to {
-    opacity: 0;
-    transform: translateY(-4px) scale(.98);
-}
-</style>
+<template>
+    <div class="icon-picker" ref="root">
+        <div v-if="title" class="icon-picker__title">{{ title }}</div>
+
+        <div class="icon-picker__trigger" :style="{ backgroundColor: color }" role="button" tabindex="0"
+            @click="toggle()" @keydown.enter.prevent="toggle()" @keydown.space.prevent="toggle()"
+            aria-haspopup="listbox" :aria-expanded="open ? 'true' : 'false'">
+            <i :class="innerValue || 'far fa-square'"></i>
+        </div>
+
+        <transition name="icon-picker--fade">
+            <div v-show="open" class="icon-picker__menu" role="listbox" :aria-label="title || 'Escolher ícone'">
+                <div class="icon-picker__grid">
+                    <div v-for="ic in icons" :key="ic" class="icon-picker__item"
+                        :class="{ 'icon-picker__item--selected': ic === innerValue }" role="option"
+                        :aria-selected="ic === innerValue ? 'true' : 'false'" tabindex="0" @click="choose(ic)"
+                        @keydown.enter.prevent="choose(ic)" @keydown.space.prevent="choose(ic)"
+                        :style="ic === innerValue ? { backgroundColor: color } : {}">
+                        <i :class="ic"></i>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "IconPicker",
+    model: { prop: "value", event: "input" },
+    props: {
+        value: { type: String, default: "fas fa-wallet" },
+        title: { type: String, default: "" },
+        color: { type: String, default: "#64B5F6" },
+        icons: {
+            type: Array,
+            default: function () {
+                return [
+                    "fas fa-wallet", "fas fa-cash-register", "fas fa-shopping-cart", "fas fa-receipt", "fas fa-credit-card", "fas fa-money-bill", "fas fa-coins", "fas fa-percentage", "fas fa-dollar-sign", "fas fa-file-invoice", "fas fa-chart-line",
+                    "fas fa-box-open", "fas fa-box", "fas fa-truck", "fas fa-warehouse", "fas fa-shipping-fast", "fas fa-dolly", "fas fa-pallet", "fas fa-trailer", "fas fa-clipboard-list",
+                    "fas fa-building", "fas fa-city", "fas fa-home", "fas fa-briefcase", "fas fa-sitemap", "fas fa-industry", "fas fa-store", "fas fa-store-alt", "fas fa-landmark", "fas fa-hotel",
+                    "fas fa-users", "fas fa-user-tie", "fas fa-user", "fas fa-user-friends", "fas fa-user-cog", "fas fa-user-shield", "fas fa-user-circle", "fas fa-id-badge", "fas fa-id-card",
+                    "fas fa-cogs", "fas fa-tools", "fas fa-desktop", "fas fa-laptop", "fas fa-server", "fas fa-database", "fas fa-cloud", "fas fa-network-wired", "fas fa-microchip", "fas fa-robot",
+                    "fas fa-shield-alt", "fas fa-lock", "fas fa-balance-scale", "fas fa-file-contract", "fas fa-gavel", "fas fa-passport", "fas fa-clipboard-check",
+                    "fas fa-bullhorn", "fas fa-ad", "fas fa-mail-bulk", "fas fa-envelope", "fas fa-comments", "fas fa-headset", "fas fa-phone-alt", "fas fa-share-alt", "fas fa-at",
+                    "fas fa-graduation-cap", "fas fa-book", "fas fa-book-open", "fas fa-chalkboard-teacher", "fas fa-lightbulb", "fas fa-brain", "fas fa-project-diagram",
+                    "fas fa-car", "fas fa-gas-pump", "fas fa-utensils", "fas fa-coffee", "fas fa-gift", "fas fa-tag", "fas fa-leaf", "fas fa-seedling", "fas fa-heart", "fas fa-music", "fas fa-paw", "fas fa-plane"
+                ];
+            },
+        },
+    },
+    data() {
+        return {
+            innerValue: this.value || "",
+            open: false,
+        };
+    },
+    watch: {
+        value(v) { this.innerValue = v; }
+    },
+    mounted() {
+        document.addEventListener("click", this.onClickOutside, { passive: true });
+    },
+    beforeDestroy() {
+        document.removeEventListener("click", this.onClickOutside);
+    },
+    methods: {
+        toggle() { this.open = !this.open; },
+        close() { this.open = false; },
+        choose(ic) {
+            this.innerValue = ic;
+            this.$emit("input", ic);
+            this.close();
+        },
+        onClickOutside(e) {
+            const root = this.$refs.root;
+            if (this.open && root && !root.contains(e.target)) this.close();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.icon-picker {
+    position: relative;
+    display: inline-grid;
+    gap: .375rem;
+    margin-bottom: 10px;
+}
+
+.icon-picker__title {
+    font-weight: 500;
+}
+
+.icon-picker__trigger {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.icon-picker__trigger i {
+    font-size: 22px;
+    color: #fff;
+}
+
+.icon-picker__menu {
+    position: absolute;
+    z-index: 40;
+    top: calc(100% + 8px);
+    left: 0;
+    width: 540px;
+    height: 320px;
+    overflow-y: auto;
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
+    padding: .5rem .5rem .6rem;
+}
+
+.icon-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(12, 36px);
+    gap: .5rem;
+    justify-content: start;
+}
+
+.icon-picker__item {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: #f3f4f6;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+}
+
+.icon-picker__item i {
+    font-size: 14px;
+    color: #6b7280;
+}
+
+.icon-picker__item--selected i {
+    color: #fff;
+}
+
+.icon-picker--fade-enter-active,
+.icon-picker--fade-leave-active {
+    transition: all .14s ease;
+}
+
+.icon-picker--fade-enter,
+.icon-picker--fade-leave-to {
+    opacity: 0;
+    transform: translateY(-4px) scale(.98);
+}
+</style>