Only span in output, so that it can be embedded anywhere

hasinhayder · Feb 11, 2021 · e2f3466 · e2f3466
1 parent 146ed38
commit e2f3466
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -10,5 +10,7 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
+    <!-- Place this tag in your head or just before your close body tag. -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,62 @@
 <template>
-  <a href="https://github.com/hasinhayder/vue3-icon-picker" target="_blank"><img alt="Vue logo" src="./assets/logo.png" /></a>
-  <icon-picker v-model="icon"/>
-  <icon-picker v-model="anotherIcon"/>
-  <p>
-
-  Icon 1 = {{icon}}<br/>
-  Icon 2 = {{anotherIcon}}<br/>
+  <a href="https://github.com/hasinhayder/vue3-icon-picker" target="_blank">
+    <img alt="Vue logo" src="./assets/logo.png" />
+  </a>
+
+  <div>
+    <h1>Click on the icon to see Vue3 Icon Picker in action</h1>
+  </div>
+  <icon-picker v-model="icon1" class="icon" />
+  <div>
+    <h1>Works in inline <icon-picker v-model="icon2" /> text tooooo</h1>
+  </div>
+  <div>
+    <p>
+      And even in paragraphs, like <icon-picker v-model="icon3" /> this icon
+    </p>
+  </div>
+  <div>
+    <h1>
+      You can pass <icon-picker v-model="icon2" style="color:orange" /> inline
+      css and attributes as well
+    </h1>
+  </div>
 
+  <p>
+    Icon 1 = {{ icon1 }}<br />
+    Icon 2 = {{ icon2 }}<br />
+    Icon 3 = {{ icon3 }}<br />
+    Icon 4 = {{ icon4 }}<br />
   </p>
 
-  <p>Github: <a href="https://github.com/hasinhayder/vue3-icon-picker" target="_blank">Vue3 Icon Picker</a></p>
+  <p>
+    <!-- Place this tag where you want the button to render. -->
+    <a
+      class="github-button"
+      href="https://github.com/hasinhayder/vue3-icon-picker"
+      data-color-scheme="no-preference: dark; light: light; dark: dark;"
+      data-size="large"
+      data-show-count="true"
+      aria-label="Star ntkme/github-buttons on GitHub"
+    >
+      Star
+    </a>
+  </p>
 </template>
 
 <script>
-import {ref} from 'vue'
+import { ref } from 'vue'
 import IconPicker from './components/IconPicker.vue'
 export default {
-  components:{
+  components: {
     IconPicker
   },
-  setup(){
-    const icon = ref('far fa-grin-hearts')
-    const anotherIcon = ref('far fa-thumbs-up')
-    return {icon, anotherIcon}
+  setup () {
+    const icon1 = ref('far fa-grin-hearts')
+    const icon2 = ref('far fa-thumbs-up')
+    const icon3 = ref('fab fa-github')
+    const icon4 = ref('fas fa-code')
+    return { icon1, icon2, icon3, icon4 }
   }
 }
 </script>
@@ -36,4 +70,8 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
-</style>
+
+.icon {
+  font-size: 40px;
+}
+</style>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -1,7 +1,6 @@
-.icon-picker-wrap {
-    /* margin: 0 auto; */
-    /* margin-top: 10%; */
-    /* text-align: center; */
+.vue3-icon-picker{
+  cursor: pointer;
+  /* font-size:30px; */
 }
 
 button.select-icon {
@@ -187,7 +186,7 @@ button.select-icon {
     padding: 0 15px 15px;
 }
 
-#aim-modal--icon-preview {
+.aim-modal--icon-preview {
 	display: grid;
 	grid-template-columns: repeat(7, 1fr);
 	grid-gap: 20px;
@@ -367,27 +366,27 @@ button.select-icon {
 	}
 }
 @media (max-width: 1439px) {
-	#aim-modal--icon-preview {
+	.aim-modal--icon-preview {
 		grid-template-columns: repeat(6, 1fr);
 	}
 }
 @media (max-width: 1024px) {
-	#aim-modal--icon-preview {
+	.aim-modal--icon-preview {
 		grid-template-columns: repeat(5, 1fr);
 	}
 }
 @media (max-width: 767px) {
-	#aim-modal--icon-preview {
+	.aim-modal--icon-preview {
 		grid-template-columns: repeat(4, 1fr);
 	}
 }
 @media (max-width: 479px) {
-	#aim-modal--icon-preview {
+	.aim-modal--icon-preview {
 		grid-template-columns: repeat(3, 1fr);
 	}
 }
 @media (max-width: 479px) {
-	#aim-modal--sidebar {
+	.aim-modal--sidebar {
 		display: none;
 	}
 }

diff --git a/src/components/IconPicker.vue b/src/components/IconPicker.vue
@@ -1,17 +1,7 @@
 <template>
-  <div class="icon-picker-wrap" id="icon-picker-wrap">
-    <ul class="icon-picker">
-      <li
-        id="select-icon"
-        class="select-icon"
-        title="Icon Library"
-        @click="togglePicker"
-      >
-        <i :class="modelValue"></i>
-      </li>
-      <input type="hidden" name="icon_value" value="" />
-    </ul>
-  </div>
+  <span v-bind="$attrs" @click="togglePicker">
+    <i class="vue3-icon-picker" :class="modelValue"></i>
+  </span>
 
   <div class="aim-modal aim-open" v-if="isVisible">
     <div class="aim-modal--content">
@@ -26,7 +16,7 @@
         </div>
       </div>
       <div class="aim-modal--body">
-        <div id="aim-modal--sidebar" class="aim-modal--sidebar">
+        <div class="aim-modal--sidebar">
           <div class="aim-modal--sidebar-tabs">
             <div
               class="aim-modal--sidebar-tab-item"
@@ -51,16 +41,13 @@
             </div>
           </div>
         </div>
-        <div
-          id="aim-modal--icon-preview-wrap"
-          class="aim-modal--icon-preview-wrap"
-        >
+        <div class="aim-modal--icon-preview-wrap">
           <div class="aim-modal--icon-search">
             <input v-model="filterText" placeholder="Filter by name..." />
             <i class="fas fa-search"> </i>
           </div>
           <div class="aim-modal--icon-preview-inner">
-            <div id="aim-modal--icon-preview">
+            <div class="aim-modal--icon-preview">
               <div
                 class="aim-icon-item"
                 v-for="glyph in glyphs"
@@ -91,6 +78,7 @@ import { ref, computed } from 'vue'
 import fontLibrary from './data/fonts'
 
 export default {
+  inheritAttrs:false,
   props: {
     label: {
       type: String,