From e601db5f4fc85fc1194010f9e2e51dfa50c853ac Mon Sep 17 00:00:00 2001
From: Eduardo de Cesaro <44036260+cesaroeduardo@users.noreply.github.com>
Date: Thu, 12 Sep 2024 17:40:08 -0300
Subject: [PATCH 1/3] Update App.vue

---
 src/App.vue | 97 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 66 insertions(+), 31 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0ef5fdd..8d0f01e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,7 +45,7 @@
               :size="selectedFontSize"
               :download-format="downloadFormat"
             >
-              <i :class="'' + icon.icon + ' ' + selectedFontSize" :style="{ color: IconsColor }"></i>
+              <i :class="'' + icon.icon" :style="{ fontSize: selectedFontSize + 'px', color: IconsColor }"></i>
             </icon-card>
           </ul>
           <div class="text-neutral-700 dark:text-neutral-200 opacity-40 gap-2 w-full text-center justify-center items-center min-h-28 border border-neutral-200 dark:border-neutral-700 bg-neutral-100/60 dark:bg-neutral-800/60 rounded-md text-xs flex px-4 py-8 ">
@@ -55,14 +55,21 @@
         </div>
         <!-- Comandos -->
         <div class="flex-col gap-3 w-full md:flex-col md:w-64 md:sticky top-28 md:h-60 z-10 hidden md:flex">
-          <div class="select-container w-full">
-            <i class="pi pi-arrows-h mr-8"></i>
-            <select v-model="selectedFontSize" class="w-full">
-              <option v-for="fontSize in fontSizes" :key="fontSize.value" :value="fontSize.value">
-                {{ fontSize.name }} ({{ fontSize.value }})
-              </option>
-            </select>
-            <i class="pi pi-chevron-down select-icon"></i>
+          <div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">
+            <i class="pi pi-arrows-h text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
+            <!-- Slider -->
+            <div class="flex flex-row w-full items-center gap-2">
+              <input
+                type="range"
+                v-model="sliderValue"
+                min="0"
+                max="11"
+                @input="updateFontSize"
+                class="w-full slider-input"
+                style="cursor: grab;"
+              />
+              <p class="text-neutral-500 text-xs dark:text-neutral-400 w-12 text-left">{{ selectedFontSize }}px</p>
+            </div>
           </div>
           <div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">
             <i class="pi pi-palette text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
@@ -93,14 +100,20 @@
   <div v-if="openBottombar" class="flex w-full h-fit bottom-0 fixed bg-white z-30 rounded-t-xl md:hidden bg-neutral-300/90 dark:bg-neutral-800/90 border border-neutral-200 dark:border-neutral-600">
     <div class="flex flex-col gap-3 w-full md:flex-col md:w-64 md:sticky top-28 md:h-60 z-10 px-4 pt-6 pb-8">
       <!-- Comandos -->
-      <div class="select-container w-full">
-        <i class="pi pi-arrows-h mr-8"></i>
-        <select v-model="selectedFontSize" class="w-full">
-          <option v-for="fontSize in fontSizes" :key="fontSize.value" :value="fontSize.value">
-            {{ fontSize.name }} ({{ fontSize.value }})
-          </option>
-        </select>
-        <i class="pi pi-chevron-down select-icon"></i>
+      <div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">
+        <i class="pi pi-arrows-h text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
+        <!-- Slider for mobile -->
+        <div class="flex flex-col w-full items-center">
+          <input
+            type="range"
+            v-model="sliderValue"
+            min="0"
+            max="11"
+            @input="updateFontSize"
+            class="w-full slider-input"
+          />
+          <p class="text-neutral-500 dark:text-neutral-400">{{ selectedFontSize }}px</p>
+        </div>
       </div>
       <div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">
         <i class="pi pi-palette text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
@@ -154,20 +167,10 @@ export default {
         { top: '20%', left: '90%' },
         { top: '80%', left: '20%' }
       ],
-      selectedFontSize: 'text-base',
+      selectedFontSize: 20, // Default font size
+      sliderValue: 2, // Default value in the exponential range
+      fontSizeValues: [8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 320], // Exponential values
       icons: icons,
-      fontSizes: [
-        { name: '12px', value: 'text-xs' },
-        { name: '16px', value: 'text-sm' },
-        { name: '20px', value: 'text-base' },
-        { name: '24px', value: 'text-lg' },
-        { name: '28px', value: 'text-xl' },
-        { name: '32px', value: 'text-2xl' },
-        { name: '40px', value: 'text-3xl' },
-        { name: '48px', value: 'text-4xl' },
-        { name: '56px', value: 'text-5xl' },
-        { name: '64px', value: 'text-6xl' },
-      ],
       pureColor: 'rgb(133, 133, 133)',
       downloadFormat: 'svg',
       openBottombar: false
@@ -183,8 +186,11 @@ export default {
     toggleTheme,
     toggleBottombar() {
       this.openBottombar = !this.openBottombar;
+    },
+    updateFontSize() {
+      this.selectedFontSize = this.fontSizeValues[this.sliderValue];
     }
-  },
+  }
 }
 </script>
 
@@ -196,4 +202,33 @@ export default {
   filter: blur(300px);
   position: absolute;
 }
+
+.slider-input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 0px;
+  border-radius: 4px;
+  transition: background 0.3s ease;
+  @apply dark:bg-neutral-300 bg-neutral-300
+}
+
+.slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  cursor: grab;
+  @apply dark:bg-black bg-neutral-600
+}
+
+.slider-input::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  cursor: grab;
+  @apply dark:bg-neutral-800 bg-neutral-600
+}
 </style>
+

From 3b66ce1cfb3aed2a49e7d0f93200dbf885c1a875 Mon Sep 17 00:00:00 2001
From: Eduardo de Cesaro <44036260+cesaroeduardo@users.noreply.github.com>
Date: Thu, 12 Sep 2024 17:58:46 -0300
Subject: [PATCH 2/3] update slider

---
 src/App.vue                 | 36 ++++++++--------
 src/components/IconCard.vue | 85 ++++++++++++-------------------------
 2 files changed, 46 insertions(+), 75 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8d0f01e..02dd336 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,15 +36,15 @@
         <div class="w-full flex flex-col gap-4 md:gap-8">
           <ul class="grid lg:grid-cols-5 md:grid-cols-3 grid-cols-3 gap-2 md:gap-4" id="myUL">
             <icon-card
-              v-for="icon in icons"
-              :key="icon.name"
-              :name="icon.name"
-              :keywords="icon.keywords"
-              :icon="icon.icon"
-              :color="IconsColor"
-              :size="selectedFontSize"
-              :download-format="downloadFormat"
-            >
+                v-for="icon in icons"
+                :key="icon.name"
+                :name="icon.name"
+                :keywords="icon.keywords"
+                :icon="icon.icon"
+                :color="IconsColor"
+                :size="`${selectedFontSize}px`"
+                :download-format="downloadFormat"
+              >
               <i :class="'' + icon.icon" :style="{ fontSize: selectedFontSize + 'px', color: IconsColor }"></i>
             </icon-card>
           </ul>
@@ -79,15 +79,15 @@
             <i class="pi pi-cog text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
             <div class="radio-group">
               <label class="w-full">
-                <input type="radio" value="svg" class="radio" v-model="downloadFormat" checked />
+                <input type="radio" value="png" class="radio" v-model="downloadFormat" checked />
                 <div class="radio-container text-white p-8 checked:text-yellow-400">
-                  .svg
+                  .png
                 </div>
               </label>
               <label class="w-full">
-                <input type="radio" value="png" class="radio" v-model="downloadFormat" />
+                <input type="radio" value="svg" class="radio" v-model="downloadFormat" />
                 <div class="radio-container">
-                  .png
+                  .svg
                 </div>
               </label>
             </div>
@@ -123,15 +123,15 @@
         <i class="pi pi-cog text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
         <div class="radio-group">
           <label class="w-full">
-            <input type="radio" value="svg" class="radio" v-model="downloadFormat" checked />
+            <input type="radio" value="png" class="radio" v-model="downloadFormat" checked />
             <div class="radio-container text-white p-8 checked:text-yellow-400">
-              .svg
+              .png
             </div>
           </label>
           <label class="w-full">
-            <input type="radio" value="png" class="radio" v-model="downloadFormat" />
+            <input type="radio" value="svg" class="radio" v-model="downloadFormat" />
             <div class="radio-container">
-              .png
+              .svg
             </div>
           </label>
         </div>
@@ -172,7 +172,7 @@ export default {
       fontSizeValues: [8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 320], // Exponential values
       icons: icons,
       pureColor: 'rgb(133, 133, 133)',
-      downloadFormat: 'svg',
+      downloadFormat: 'png',
       openBottombar: false
     }
   },
diff --git a/src/components/IconCard.vue b/src/components/IconCard.vue
index 535f978..36a173d 100644
--- a/src/components/IconCard.vue
+++ b/src/components/IconCard.vue
@@ -46,7 +46,7 @@ export default {
         },
         size: {
             type: String,
-            required: true,
+            required: true, // Esse "size" pode ser uma classe do Tailwind CSS
         },
         downloadFormat: {
             type: String,
@@ -60,6 +60,29 @@ export default {
         };
     },
     methods: {
+        // Extração do valor em pixels de uma string no formato `text-[XXpx]`
+        getPixelSize(sizeClass) {
+        if (typeof sizeClass === 'string' && sizeClass.endsWith('px')) {
+            return parseInt(sizeClass.replace('px', ''), 10);
+        }
+        return sizeClass; // Se já for um número ou outra unidade que não é px, retorna diretamente
+    },
+        // Mapeia as classes do Tailwind para tamanhos reais em pixels
+        getDimension(sizeClass) {
+            const sizeMap = {
+                'text-xs': 12,
+                'text-sm': 16,
+                'text-base': 20,
+                'text-lg': 24,
+                'text-xl': 28,
+                'text-2xl': 32,
+                'text-3xl': 40,
+                'text-4xl': 48,
+                'text-5xl': 56,
+                'text-6xl': 64,
+            };
+            return sizeMap[sizeClass] || 100; // Valor padrão caso a classe não seja mapeada
+        },
         async downloadIcon() {
             if (this.downloadFormat === 'svg') {
                 this.downloadSVG();
@@ -82,19 +105,7 @@ export default {
                     svg = svg.replace(/fill="[^"]*"/g, `fill="${this.color}"`);
                 }
 
-                const sizeMap = {
-                    'text-xs': 12,
-                    'text-sm': 16,
-                    'text-base': 20,
-                    'text-lg': 24,
-                    'text-xl': 28,
-                    'text-2xl': 32,
-                    'text-3xl': 40,
-                    'text-4xl': 48,
-                    'text-5xl': 56,
-                    'text-6xl': 64,
-                };
-                const dimension = sizeMap[this.size] || 100;
+                const dimension = this.getPixelSize(this.size); // Usa o valor correto em pixels
 
                 if (!svg.includes('width=')) {
                     svg = svg.replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
@@ -125,19 +136,7 @@ export default {
 
                 svg = svg.replace(/fill="[^"]*"/g, `fill="${this.color}"`);
 
-                const sizeMap = {
-                    'text-xs': 12,
-                    'text-sm': 16,
-                    'text-base': 20,
-                    'text-lg': 24,
-                    'text-xl': 28,
-                    'text-2xl': 32,
-                    'text-3xl': 40,
-                    'text-4xl': 48,
-                    'text-5xl': 56,
-                    'text-6xl': 64,
-                };
-                const dimension = sizeMap[this.size] || 100;
+                const dimension = this.getDimension(this.size); // Usa o tamanho correto
 
                 svg = svg.replace(/(width|height)="[^"]*"/g, '')
                           .replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
@@ -192,26 +191,13 @@ export default {
 
                 let svg = await response.text();
 
-                // Verifica e modifica o SVG para garantir que tenha 'fill' e o tamanho correto
                 if (!svg.includes('fill=')) {
                     svg = svg.replace(/<path/g, `<path fill="${this.color}"`);
                 } else {
                     svg = svg.replace(/fill="[^"]*"/g, `fill="${this.color}"`);
                 }
 
-                const sizeMap = {
-                    'text-xs': 12,
-                    'text-sm': 16,
-                    'text-base': 20,
-                    'text-lg': 24,
-                    'text-xl': 28,
-                    'text-2xl': 32,
-                    'text-3xl': 40,
-                    'text-4xl': 48,
-                    'text-5xl': 56,
-                    'text-6xl': 64,
-                };
-                const dimension = sizeMap[this.size] || 100;
+                const dimension = this.getPixelSize(this.size); // Usa o valor correto em pixels
 
                 if (!svg.includes('width=')) {
                     svg = svg.replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
@@ -220,11 +206,9 @@ export default {
                         .replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
                 }
 
-                // Copiamos o conteúdo SVG modificado como texto para o clipboard
                 await navigator.clipboard.writeText(svg);
                 console.log('SVG content copied to clipboard!');
                 
-                // Muda o ícone para "check" após a cópia
                 this.showImageCheckIcon = true;
                 setTimeout(() => {
                     this.showImageCheckIcon = false;
@@ -242,19 +226,7 @@ export default {
 
                 svg = svg.replace(/fill="[^"]*"/g, `fill="${this.color}"`);
 
-                const sizeMap = {
-                    'text-xs': 12,
-                    'text-sm': 16,
-                    'text-base': 20,
-                    'text-lg': 24,
-                    'text-xl': 28,
-                    'text-2xl': 32,
-                    'text-3xl': 40,
-                    'text-4xl': 48,
-                    'text-5xl': 56,
-                    'text-6xl': 64,
-                };
-                const dimension = sizeMap[this.size] || 100;
+                const dimension = this.getPixelSize(this.size); // Usa o valor correto em pixels
 
                 svg = svg.replace(/(width|height)="[^"]*"/g, '')
                     .replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
@@ -272,7 +244,6 @@ export default {
                         await navigator.clipboard.write([clipboardItem]);
                         console.log('PNG copied to clipboard!');
 
-                        // Muda o ícone para "check" após a cópia
                         this.showImageCheckIcon = true;
                         setTimeout(() => {
                             this.showImageCheckIcon = false;

From 3fc00b6fbd0291dce5f9be08179b69490cee9b69 Mon Sep 17 00:00:00 2001
From: Eduardo de Cesaro <44036260+cesaroeduardo@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:01:05 -0300
Subject: [PATCH 3/3] Update App.vue

---
 src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 02dd336..6f94437 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -103,7 +103,7 @@
       <div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">
         <i class="pi pi-arrows-h text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
         <!-- Slider for mobile -->
-        <div class="flex flex-col w-full items-center">
+        <div class="flex flex-row w-full items-center gap-2">
           <input
             type="range"
             v-model="sliderValue"
@@ -112,7 +112,7 @@
             @input="updateFontSize"
             class="w-full slider-input"
           />
-          <p class="text-neutral-500 dark:text-neutral-400">{{ selectedFontSize }}px</p>
+          <p class="text-neutral-500 dark:text-neutral-400 w-10 text-xs">{{ selectedFontSize }}px</p>
         </div>
       </div>
       <div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">