@mixd-id/web-scaffold 0.1.230406301 → 0.1.230406303

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406301",
+  "version": "0.1.230406303",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -39,13 +39,11 @@
     "@tailwindcss/line-clamp": "^0.4.0",
     "@vueuse/core": "^9.0.2",
     "adm-zip": "^0.5.10",
-    "axios": "^1.3.4",
     "chart.js": "^4.2.1",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "crypto-js": "^4.2.0",
-    "daisyui": "^2.19.0",
     "dayjs": "^1.11.2",
     "eventemitter2": "^6.4.7",
     "exceljs": "^4.3.0",

package/src/components/Alert.vue

@@ -130,8 +130,14 @@ export default{
 
 		message(){
 			if(this.err.errors){
-				return typeof this.err.errors === 'object' && Object.keys(this.err.errors).length > 0 ?
-            Object.values(this.err.errors).join("\n") :
+				return typeof this.err.errors === 'object' &&
+            Object.keys(this.err.errors).length > 0 ?
+            Object.values(this.err.errors).map(_ => {
+              if(Array.isArray(_))
+                return _
+              return JSON.stringify(_)
+            })
+              .join("\n"):
             this.err.errors
 			}
       else if(this.err.reason){
@@ -216,7 +222,7 @@ export default{
 }
 
 .details{
-	@apply flex-1 flex flex-col gap-4 overflow-y-auto min-h-[1.6rem];
+	@apply flex-1 flex flex-col gap-4 overflow-auto min-h-[1.6rem] self-stretch;
 }
 .details::-webkit-scrollbar {
 	display: none;

package/src/components/Button.vue

@@ -1,5 +1,6 @@
 <template>
-	<button :class="compClass" :disabled="isDisabled" @click="onClick" :style="computedStyle">
+	<button :class="compClass" :disabled="isDisabled" @click="onClick" :style="computedStyle"
+    v-tooltip="disabledText">
     <slot>{{ text }}</slot>
 		<div v-if="isLoading" :class="$style.loadingPane">
 			<svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -38,6 +39,8 @@ export default{
 
 		width: Array,
 
+    disabledText: String
+
 	},
 
 	computed:{

package/src/components/Carousel.vue

@@ -35,7 +35,6 @@
 
 <script>
 
-import {parseBoolean} from "../utils/helpers.mjs";
 import {componentMixin} from "../mixin/component";
 
 export default{
@@ -55,7 +54,7 @@ export default{
 
 		autoPlay: [ Number, String ],
 
-		useLegend: Boolean
+		useLegend: [ Boolean, Number ],
 
   },
 
@@ -161,7 +160,7 @@ export default{
       let index = this.index + 1
 
       if(index >= this.items.length)
-        index = typeof useBack !== 'undefined' && useBack === true && parseBoolean(this.infinite) ? 0 : this.items.length - 1
+        index = useBack === true ? 0 : this.items.length - 1
 
       this.index = index
 

package/src/components/ErrorText.vue

@@ -13,7 +13,7 @@
 				</div>
 			</div>
 		</div>
-		<div v-else-if="error.message" class="p-2 bg-base-500">{{ error.message }}</div>
+		<div v-else-if="error.message" class="p-2">{{ error.message }}</div>
 		<div v-else>
 
 		</div>

package/src/components/ImagePreview.vue

@@ -2,7 +2,7 @@
 	<Modal :state="isOpen" width="400" height="400" :class="$style.previewModal">
 		<div class="flex-1 flex flex-col">
 			<div class="flex flex-row justify-end items-center p-3">
-				<a v-if="download" :href="imageUrl" download>
+				<a v-if="download" :href="imageUrl" target="_blank" download>
 					<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" class="fill-text"><path class="primary" d="M15 15v-3a3 3 0 0 0-6 0v3H6a4 4 0 0 1-.99-7.88 5.5 5.5 0 0 1 10.86-.82A4.49 4.49 0 0 1 22 10.5a4.5 4.5 0 0 1-4.5 4.5H15z"/><path class="secondary" d="M11 18.59V12a1 1 0 0 1 2 0v6.59l1.3-1.3a1 1 0 0 1 1.4 1.42l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.42l1.3 1.3z"/></svg>
 				</a>
 				<button class="ml-3" @click="close">

package/src/components/List.vue

@@ -379,7 +379,7 @@ export default{
     },
 
     loadPreset(){
-      if(!('reset' in this.$route.query)){
+      if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
         if(this.presetKey){
           return this.socket.send('user.preset', { key:this.presetKey })
               .then(config => {
@@ -394,7 +394,7 @@ export default{
 
           const query = {}
           for(let key in this.$route.query){
-            if(key !== 'reset')
+            if(key.toLowerCase() !== 'reset')
               query[key] = this.$route.query[key]
           }
           this.$router.replace({

package/src/components/Slider.vue

@@ -1,20 +1,24 @@
 <template>
   <div :class="$style.slider">
 
-    <div ref="bar"></div>
+    <div ref="bar">
 
-    <div ref="highlight" :style="{ left:hgLeft + 'px', right:hgRight + 'px' }"></div>
+      <div ref="highlight"></div>
 
-    <div id="sliderLeft" v-if="mode === 'double'" ref="left" @mousedown.prevent.capture="onMouseDown" @touchstart.passive.capture="onMouseDown"
-      :style="{ left:l1Left + 'px' }">
-      <slot name="inner"></slot>
-    </div>
+      <div v-show="mode === 'double'"
+           ref="left"
+           @mousedown.prevent.capture="onMouseDown"
+           @touchstart.passive.capture="onMouseDown">
+        <slot name="inner"></slot>
+      </div>
 
-    <div id="sliderRight" ref="right" @mousedown.prevent.capture="onMouseDown" @touchstart.passive.capture="onMouseDown"
-      :style="{ left:l2Left + 'px' }">
-      <slot name="inner"></slot>
-    </div>
+      <div ref="right"
+           @mousedown.prevent.capture="onMouseDown"
+           @touchstart.passive.capture="onMouseDown">
+        <slot name="inner"></slot>
+      </div>
 
+    </div>
   </div>
 </template>
 
@@ -24,6 +28,8 @@ export default{
 
 	props:{
 
+    items: Array,
+
 		modelValue:{
 			type: [ String, Number ],
 			default: ''
@@ -53,79 +59,59 @@ export default{
 
   computed:{
 
-    l1Val(){
-      if(this.isMounted){
-        const [ from, to ] = this.modelValue.toString().split('-')
-        return parseInt(from)
+    cItems(){
+
+      let items = []
+
+      if(this.items){
+        items = this.items
       }
-    },
+      else{
+
+        for(let i = this.min ; i <= this.max ; i += this.step){
+          items.push(i)
+        }
+
+        if(items[items.length - 1] !== this.max)
+          items.push(this.max)
 
-    l2Val(){
-      if(this.isMounted){
-        const [ from, to ] = this.modelValue.toString().split('-')
-        return this.mode === 'double' ? (!isNaN(parseInt(to)) ? parseInt(to) : parseInt(from)) : parseInt(from)
       }
+
+      return items
+
     },
 
-    l1Left(){
+    l1Val(){
       if(this.isMounted){
-        const min = parseInt(this.min)
-        const max = this.l2Val
-        const l1Val = this.l1Val > max ? max : (this.l1Val < min ? min : this.l1Val)
-        return (Math.round((l1Val - parseInt(this.min)) / parseInt(this.step))) * this.stepDistance
+        const [ from, to ] = this.modelValue.toString().split('-')
+        return parseInt(from)
       }
     },
 
-    l2Left(){
-      if(this.isMounted){
-        const min = this.l1Val ? this.l1Val : parseInt(this.min)
-        const max = parseInt(this.max)
-        const l2Val = this.l2Val > max ? max : (this.l2Val < min ? min : this.l2Val)
-
-        return (Math.round((l2Val - parseInt(this.min)) / parseInt(this.step))) * this.stepDistance
-      }
+    l1Index(){
+      return this.cItems.indexOf(this.l1Val)
     },
 
-    hgLeft(){
-      if(this.isMounted){
-        if (this.mode === 'double') {
-					const min = parseInt(this.min)
-					const max = this.l2Val
-					const l1Val = this.l1Val > max ? max : (this.l1Val < min ? min : this.l1Val)
-					return (Math.round((l1Val - parseInt(this.min)) / parseInt(this.step))) * this.stepDistance
-        }
-				else {
-          return 0
-        }
-      }
+    l2Index(){
+      return this.cItems.indexOf(this.l2Val)
     },
 
-    hgRight(){
+    l2Val(){
       if(this.isMounted){
-        if(this.mode === 'double'){
-          return this.rootWidth - (Math.round(this.l2Left + (this.$refs.right.clientWidth / 2)))
-        }
-        else{
-          return this.rootWidth - (Math.round(this.l2Left + (this.$refs.right.clientWidth / 2)))
-        }
+        const [ from, to ] = this.modelValue.toString().split('-')
+        return this.mode === 'double' ? (!isNaN(parseInt(to)) ? parseInt(to) : parseInt(from)) : parseInt(from)
       }
     },
 
-    trackWidth(){
-      if(this.isMounted)
-        return this.rootWidth - this.$refs.right.clientWidth
-    },
+
 
     stepDistance(){
       if(this.isMounted){
-        const min = parseInt(this.min)
-        const max = parseInt(this.max)
-        const step = parseInt(this.step)
-        const totalStep = (max - min) / step
-        return this.trackWidth / totalStep
+        return this.$refs.bar.clientWidth / this.cItems.length
       }
       return 0
-    }
+    },
+
 
   },
 
@@ -134,6 +120,11 @@ export default{
       isMounted: 0,
       rootWidth: 0,
 			startValue: null, // Mouse down start value
+      startIndex: null,
+      l1LeftPx: '',
+      l2LeftPx: '',
+      hgLeftPx: '',
+      hgRightPx: '',
     }
   },
 
@@ -142,10 +133,30 @@ export default{
   mounted(){
     this.rootWidth = this.$el.clientWidth
     this.isMounted = 1
+    this.paint()
   },
 
   methods:{
 
+    paint(){
+      if(!this.isMounted) return
+
+      const barWidth = this.$refs.bar.clientWidth
+      const stepWidth = Math.round(barWidth / (this.cItems.length - 1))
+      const l1Left = Math.round(this.l1Index * stepWidth)
+
+      const buttonHalfWidth = this.$refs.right.clientWidth / 2
+
+      let l2Left = Math.round((this.l2Index * stepWidth) - buttonHalfWidth)
+      if(l2Left > barWidth - buttonHalfWidth)
+        l2Left = barWidth - buttonHalfWidth
+
+      this.l1LeftPx = l1Left + "px"
+      this.l2LeftPx = l2Left + "px"
+      this.hgLeftPx = 0
+      this.hgRightPx = (barWidth - l2Left - buttonHalfWidth)  + "px"
+    },
+
 		valueFromDistance(distance, startValue){
 			const stepCount = Math.round(Math.abs(distance) / this.stepDistance)
 			return startValue + (stepCount * this.step) * (distance > 0 ? 1 : -1)
@@ -183,8 +194,10 @@ export default{
 					}
         }
         else{
-          let value = this.valueFromDistance(distance, this.startValue)
-          if(value !== this.modelValue && value >= parseInt(this.min) && value <= parseInt(this.max)){
+          const increment = Math.round(distance / this.stepDistance)
+          const nextIndex = this.startIndex + increment
+          const value = this.cItems[nextIndex]
+          if(value && value !== this.modelValue){
             this.$emit('update:modelValue', value)
           }
         }
@@ -225,15 +238,9 @@ export default{
       window.removeEventListener('touchmove', this.onMouseMove)
       window.removeEventListener('touchend', this.onMouseUp)
 
-      this.$refs[this.current].style.left = ((this.current === 'left' ? this.l1Left : this.l2Left)) + "px"
-
-      this.$refs.highlight.style.left = (this.hgLeft) + "px"
-      this.$refs.highlight.style.right = (this.hgRight) + "px"
-
 			if(this.modelValue !== this.startValue){
 				this.$emit('change')
 			}
-
 			this.startValue = null
     },
 
@@ -241,14 +248,25 @@ export default{
 
       this.current = e.target === this.$refs.right ? 'right' : 'left'
       this.startX = typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX
-      this.startLeft = parseInt(this.$refs[this.current].style.left)
 			this.startValue = this.modelValue
+      this.startIndex = this.l2Index
 
       window.addEventListener('mousemove', this.onMouseMove)
       window.addEventListener('mouseup', this.onMouseUp)
       window.addEventListener('touchmove', this.onMouseMove)
       window.addEventListener('touchend', this.onMouseUp, { passive:true })
     }
+  },
+
+  watch: {
+
+    l2Index: {
+      handler(){
+        this.paint()
+      },
+      immediate: true
+    }
+
   }
 
 }
@@ -259,27 +277,28 @@ export default{
 
   .slider{
 		@apply h-[var(--h-cp)];
-    @apply relative;
   }
 
   .slider>div:nth-child(1){
-    @apply absolute bg-text-50 rounded-lg;
+    @apply relative bg-text-50 rounded-lg;
     height: .5rem;
     top: 50%;
-    left: .75rem;
-    right: .75rem;
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
     transform: translate3d(0, -50%, 0);
   }
 
-  .slider>div:nth-child(2){
+  .slider>div:nth-child(1)>div:nth-child(1){
     @apply absolute bg-primary rounded-lg;
     height: .5rem;
     top: 50%;
+    left: v-bind(hgLeftPx);
+    right: v-bind(hgRightPx);
     transform: translate3d(0, -50%, 0);
   }
 
-  .slider>div:nth-child(3),
-  .slider>div:nth-child(4){
+  .slider>div:nth-child(1)>div:nth-child(2),
+  .slider>div:nth-child(1)>div:nth-child(3){
     @apply absolute w-[2.5rem] h-[2.5rem] rounded-full bg-white shadow-sm border-[1px] border-text-200;
     @apply flex;
     top: 50%;
@@ -287,4 +306,12 @@ export default{
     touch-action: none;
   }
 
+  .slider>div:nth-child(1)>div:nth-child(2){
+    left: v-bind(l1LeftPx)
+  }
+
+  .slider>div:nth-child(1)>div:nth-child(3){
+    left: v-bind(l2LeftPx)
+  }
+
 </style>

package/src/components/TreeView.vue

@@ -3,12 +3,11 @@
 
 		<TreeViewItem v-for="(item, index) in items"
 									:item="item"
+                  :selectedItem="selectedItem"
                   :index="index"
                   :parent="parent"
+                  :config="config"
                   :depth="0"
-									:model-value="modelValue"
-									@moveup="moveUp(item)"
-									@movedown="moveDown(item)"
 									@change="$emit('change')">
 			<template #default="{ item, parent, index, depth }">
 				<slot :item="item" :parent="parent" :index="index" :depth="depth"></slot>
@@ -27,7 +26,7 @@ export default{
 
 	components: {TreeViewItem},
 
-	emits: [ 'change', 'paste' ],
+	emits: [ 'change' ],
 
 	inject: [ 'confirm', 'toast' ],
 
@@ -35,53 +34,10 @@ export default{
 
 		items: Array,
 
-		modelValue: Object
+		selectedItem: Object,
 
-	},
-
-	methods: {
-
-		copy(){
-			if(this.modelValue){
-				copyToClipboard(JSON.stringify(this.modelValue))
-					.then(() => this.toast('Copied to clipboard'))
-			}
-		},
-
-		paste(){
-			getClipboardData().then(text => {
-				try{
-					const item = JSON.parse(text)
-					this.$emit('paste', item)
-				}
-				catch(e){}
-			})
-		},
-
-		moveDown(item){
-			const idx = this.items.indexOf(item)
-			if(idx < this.items.length - 1){
-				this.items.splice(idx + 1, 0, this.items.splice(idx, 1)[0])
-				this.$emit('change')
-			}
-		},
-
-		moveUp(item){
-			const idx = this.items.indexOf(item)
-			if(idx - 1 >= 0){
-				this.items.splice(idx - 1, 0, this.items.splice(idx, 1)[0])
-				this.$emit('change')
-			}
-		},
-
-		add(){
-			this.$emit('add', this.items)
-		},
-
-	},
+    config: Object,
 
-	mounted() {
-		window.addEventListener('keydown', this.onKeyUp)
 	},
 
   computed: {
@@ -94,11 +50,6 @@ export default{
 
   },
 
-  watch: {
-
-
-  }
-
 }
 
 </script>

package/src/components/TreeViewItem.vue

@@ -40,12 +40,11 @@
          v-show="item && Array.isArray(item.items) && !childCollapsed" class="ml-6">
       <TreeViewItem v-for="(subItem, index) in item.items"
                     :item="subItem"
+                    :config="config"
                     :parent="item"
                     :index="index"
                     :depth="depth + 1"
-                    :model-value="modelValue"
-                    @moveup="moveUp(subItem)"
-                    @movedown="moveDown(subItem)"
+                    :selected-item="selectedItem"
                     @change="$emit('change')">
         <template #default="{ item, parent, index, depth }">
           <slot :item="item" :parent="parent" :index="index" :depth="depth"></slot>
@@ -64,7 +63,7 @@ export default{
 
   name: 'TreeViewItem',
 
-	emits: [ 'change', 'moveup', 'movedown' ],
+	emits: [ 'change' ],
 
 	inject: [ 'confirm', 'toast' ],
 
@@ -74,7 +73,7 @@ export default{
 		parent: Object,
 		index: Number,
     depth: Number,
-		modelValue: Object,
+		selectedItem: Object,
 		state: {
 			type: [ Number, String ],
 			default: 1
@@ -83,27 +82,6 @@ export default{
 
 	methods: {
 
-		moveDown(item){
-			const idx = this.item.items.indexOf(item)
-			if(idx < this.item.items.length - 1){
-				this.item.items.splice(idx + 1, 0, this.item.items.splice(idx, 1)[0])
-				this.$emit('change')
-			}
-		},
-
-		moveUp(item){
-			const idx = this.item.items.indexOf(item)
-			if(idx - 1 >= 0){
-				this.item.items.splice(idx - 1, 0, this.item.items.splice(idx, 1)[0])
-				this.$emit('change')
-			}
-		},
-
-		add(){
-			this.$emit('add', this.item.items)
-      this.childCollapsed = false
-		},
-
 		mouseDown(e){
       if(!this.$el || this.$el.nodeType !== 1) return
 
@@ -306,19 +284,19 @@ export default{
 	computed: {
 
     componentStore(){
-      if(this.cConfig){
-        if(!this.cConfig.components)
-          this.cConfig.components = {}
+      if(this.config){
+        if(!this.config.components)
+          this.config.components = {}
 
-        if(!this.cConfig.components.treeviewitem)
-          this.cConfig.components.treeviewitem = {}
+        if(!this.config.components.treeviewitem)
+          this.config.components.treeviewitem = {}
 
-        return this.cConfig.components.treeviewitem
+        return this.config.components.treeviewitem
       }
     },
 
     isSelected(){
-      return this.modelValue === this.item
+      return this.selectedItem === this.item
     },
 
 		itemClass(){
@@ -335,9 +313,7 @@ export default{
 
 	data(){
 		return {
-			childCollapsed: true,
-			hvm: null,
-      cConfig: {}
+			childCollapsed: true
 		}
 	},
 

package/src/configs/icons-fa.json

@@ -0,0 +1,12 @@
+{
+  "cart-plus": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M176 416c-26.51 0-47.1 21.49-47.1 48S149.5 512 176 512s47.1-21.49 47.1-48S202.5 416 176 416zM569.5 44.73C563.4 36.64 554.1 32 543.1 32H121.1L119.6 19.51C117.4 8.191 107.5 0 96 0H23.1C10.75 0 0 10.75 0 23.1S10.75 48 23.1 48h52.14l60.28 316.5C138.6 375.8 148.5 384 160 384H488c13.25 0 24-10.75 24-23.1C512 346.7 501.3 336 488 336H179.9L170.7 288h318.4c14.29 0 26.84-9.47 30.77-23.21l54.86-191.1C577.5 63.05 575.6 52.83 569.5 44.73zM416 160c0 11.31-9.256 20.57-20.57 20.57h-38.86v38.85C356.6 230.7 347.3 240 336 240s-20.57-9.258-20.57-20.57V180.6H276.6C265.3 180.6 256 171.3 256 160s9.256-20.57 20.57-20.57h38.86V100.6c0-11.31 9.258-20.57 20.57-20.57s20.57 9.256 20.57 20.57v38.85h38.86C406.7 139.4 416 148.7 416 160zM463.1 416c-26.51 0-47.1 21.49-47.1 48s21.49 48 47.1 48s47.1-21.49 47.1-48S490.5 416 463.1 416z\"/></svg>",
+  "magnifying-glass": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z\"/></svg>",
+  "user": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z\"/></svg>",
+  "file-invoice": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M256 0v128h128L256 0zM288 256H96v64h192V256zM224 128L224 0H48C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48V160h-127.1C238.3 160 224 145.7 224 128zM64 72C64 67.63 67.63 64 72 64h80C156.4 64 160 67.63 160 72v16C160 92.38 156.4 96 152 96h-80C67.63 96 64 92.38 64 88V72zM64 136C64 131.6 67.63 128 72 128h80C156.4 128 160 131.6 160 136v16C160 156.4 156.4 160 152 160h-80C67.63 160 64 156.4 64 152V136zM320 440c0 4.375-3.625 8-8 8h-80C227.6 448 224 444.4 224 440v-16c0-4.375 3.625-8 8-8h80c4.375 0 8 3.625 8 8V440zM320 240v96c0 8.875-7.125 16-16 16h-224C71.13 352 64 344.9 64 336v-96C64 231.1 71.13 224 80 224h224C312.9 224 320 231.1 320 240z\"/></svg>",
+  "folder-arrow-down": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M464 96h-192l-64-64h-160C21.5 32 0 53.5 0 80v352C0 458.5 21.5 480 48 480h416c26.5 0 48-21.5 48-48v-288C512 117.5 490.5 96 464 96zM159 271C163.7 266.3 169.8 264 176 264s12.28 2.344 16.97 7.031L232 310.1V200C232 186.8 242.8 176 256 176s24 10.75 24 24v110.1l39.03-39.03c9.375-9.375 24.56-9.375 33.94 0s9.375 24.56 0 33.94l-80 80c-9.375 9.375-24.56 9.375-33.94 0l-80-80C149.7 295.6 149.7 280.4 159 271z\"/></svg>",
+  "arrow-up-square": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M167.8 159.7c8.895 0 17.63-3.71 23.76-10.39L224 113.9V320c0 17.7 14.33 32.02 32 32.02S288 337.7 288 320V113.9l32.4 35.39c6.32 6.879 14.96 10.38 23.63 10.38c17.64 0 31.97-14.29 31.97-32.01c0-7.734-2.78-15.51-8.409-21.66l-87.1-96.09C273.5 3.312 264.8-.0002 256-.0002S238.5 3.312 232.4 9.945l-87.1 96.09c-5.629 6.152-8.409 13.93-8.409 21.66C135.1 145.4 150.3 159.7 167.8 159.7zM448 96h-32v63.92L448 160v288H64V160l32-.0824V96H64C28.72 96 0 124.7 0 160v288c0 35.28 28.72 64 64 64h384c35.28 0 64-28.72 64-64V160C512 124.7 483.3 96 448 96z\"/></svg>",
+  "camera": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M464 96h-88l-12.38-32.88C356.6 44.38 338.8 32 318.8 32h-125.5c-20 0-38 12.38-45 31.12L136 96H48C21.5 96 0 117.5 0 144v288C0 458.5 21.5 480 48 480h416c26.5 0 48-21.5 48-48v-288C512 117.5 490.5 96 464 96zM256 384c-53 0-96-43-96-96s43-96 96-96s96 43 96 96S309 384 256 384z\"/></svg>",
+  "home": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M575.1 256c-.0006 17.6-14.27 31.1-32.01 31.1L511.1 288l.0031 160c0 35.35-28.65 64-63.1 64H128c-35.35 0-63.1-28.65-63.1-64L64.02 288h-32.02c-17.78 0-32-14.44-32-31.1c-.0004-9.052 3.842-17.9 10.92-24.1l255.1-223.1c6.963-6.098 14.93-7.918 21.08-7.918c7.523 0 15.05 2.637 21.08 7.918l255.1 223.1C572.2 238.1 575.1 246.1 575.1 256z\"/></svg>",
+  "list-ul": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M48 208C21.49 208 0 229.5 0 256s21.49 48 48 48S96 282.5 96 256S74.51 208 48 208zM48 368C21.49 368 0 389.5 0 416s21.49 48 48 48S96 442.5 96 416S74.51 368 48 368zM48 48C21.49 48 0 69.49 0 96s21.49 48 48 48S96 122.5 96 96S74.51 48 48 48zM192 128h288c17.67 0 32-14.33 32-31.1S497.7 64 480 64H192C174.3 64 160 78.33 160 95.1S174.3 128 192 128zM480 224H192C174.3 224 160 238.3 160 256s14.33 32 32 32h288c17.67 0 32-14.33 32-32S497.7 224 480 224zM480 384H192c-17.67 0-32 14.33-32 32s14.33 32 32 32h288c17.67 0 32-14.33 32-32S497.7 384 480 384z\"/></svg>",
+  "bars": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d=\"M416 224H31.1C14.33 224 0 238.3 0 256s14.33 32 31.1 32h384C433.7 288 448 273.7 448 256S433.7 224 416 224zM416 384H31.1C14.33 384 0 398.3 0 415.1S14.33 448 31.1 448h384C433.7 448 448 433.7 448 416S433.7 384 416 384zM416 64H31.1C14.33 64 0 78.33 0 95.1S14.33 128 31.1 128h384C433.7 128 448 113.7 448 96S433.7 64 416 64z\"/></svg>"
+}