Merge branch 'improvements'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iconexplorer.app",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "description": "Searchable Quasar SVG icons",
   "productName": "Quasar Framework SVG icons",
   "author": "Jeff Galbraith <[email protected]>",

quasar.conf.js

@@ -116,7 +116,8 @@ module.exports = configure(function (ctx) {
       plugins: [
         'Dark',
         'LoadingBar',
-        'Notify'
+        'Notify',
+        'Loading'
       ]
     },
 

src/App.vue

@@ -4,8 +4,13 @@
 
 <script>
 import { defineComponent } from 'vue'
+import { provideStore } from 'assets/store.js'
 
 export default defineComponent({
-  name: 'App'
+  name: 'App',
+
+  setup () {
+    provideStore()
+  }
 })
 </script>

src/assets/store.js

@@ -0,0 +1,120 @@
+import { inject, provide, reactive, computed } from 'vue'
+import { storeKey } from './symbols.js'
+
+export function useStore () {
+  return inject(storeKey)
+}
+
+export function provideStore () {
+  const makeReactive = process.env.SERVER !== true ? reactive : val => val
+  const store = makeReactive({
+    importedIcons: null,
+    filter: '',
+    iconSet: null,
+    iconSize: '128px',
+    cart: {},
+    leftDrawerOpen: false,
+    rightDrawerOpen: false,
+    showIconDialog: false
+  })
+
+  /*
+    cart looks like this:
+    {
+      packageName: {
+        iconSet: {
+          iconName: path,
+          ...
+        },
+        ...
+      }
+    }
+  */
+
+  store.addItem = function (packageName, iconSet, name, path) {
+    const item = store.findItem(packageName, iconSet, name)
+    if (!item) {
+      if (!store.cart[ packageName ]) store.cart[ packageName ] = {}
+      if (!store.cart[ packageName ][ iconSet ]) store.cart[ packageName ][ iconSet ] = {}
+      store.cart[ packageName ][ iconSet ][ name ] = path
+
+      return true
+    }
+    return false
+  }
+
+  store.removeItem = function (packageName, iconSet, name) {
+    if (store.cart[ packageName ]) {
+      if (store.cart[ packageName ][ iconSet ]) {
+        if (store.cart[ packageName ][ iconSet ][ name ]) {
+          delete store.cart[ packageName ][ iconSet ][ name ]
+          // should parents be removed?
+          if (Object.keys(store.cart[ packageName ][ iconSet ]).length === 0) {
+            delete store.cart[ packageName ][ iconSet ]
+            if (Object.keys(store.cart[ packageName ]).length === 0) {
+              delete store.cart[ packageName ]
+            }
+          }
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  store.removeAll = function () {
+    const keys = Object.keys(store.cart)
+    for (let index = 0; index < keys.length; ++index) {
+      delete store.cart[ keys[ index ] ]
+    }
+  }
+
+  // returns store item or null
+  store.findItem = function (packageName, iconSet, name) {
+    if (store.cart[ packageName ]) {
+      if (store.cart[ packageName ][ iconSet ]) {
+        if (store.cart[ packageName ][ iconSet ][ name ]) {
+          return store.cart[ packageName ][ iconSet ][ name ]
+        }
+      }
+    }
+
+    return null // not found
+  }
+
+  // When not SSR, this becomes reactive (when injected into store)
+  // but, on server, it's not reactive and need '.value' when accessing it
+  // should not be a problem because adding/removing from the cart is user initiated
+  store.selectedIconsFlattened = computed(() => {
+    const icons = [];
+    for (const packageName in store.cart) {
+      for (const iconSet in store.cart[ packageName ]) {
+        for (const iconName in store.cart[ packageName ][ iconSet ]) {
+          const path = store.cart[ packageName ][ iconSet ][ iconName ]
+          icons.push({
+            packageName,
+            iconSet,
+            iconName,
+            path
+          })
+        }
+      }
+    }
+
+    return icons
+  })
+
+  store.isCartIcon = function (name) {
+    for (let index = 0; index < store.selectedIconsFlattened.length; ++index) {
+      if (store.selectedIconsFlattened[ index ].iconName === name) {
+        return true
+      }
+    }
+    return false
+  }
+
+  provide(
+    storeKey,
+    store
+  )
+}

src/assets/symbols.js

@@ -0,0 +1,6 @@
+const hasSymbol = typeof Symbol === 'function'
+  && typeof Symbol.toStringTag === 'symbol'
+
+export const storeKey = hasSymbol === true
+  ? Symbol('_store_')
+  : '_store_'

src/components/SvgIconViewer.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="row justify-center">
+    <q-intersection
+      v-for="(path, name) in icons"
+      :key="name"
+      once
+      class="intersetion-icon-box col-xl-1 col-lg-2 col-md-3 col-sm-4 col-xs-6"
+      @click="onClick({ path, name })"
+    >
+      <div
+        class="intersetion-icon-box--inner row full-width justify-center items-center overflow-hidden ellipsis"
+        :class="{
+          'active-icon': isActiveIcon(name),
+          'cart-icon': store.isCartIcon(name)
+        }"
+      >
+        <q-icon
+          :name="path"
+          size="60px"
+          class="q-pa-xs row full-width justify-center items-center"
+        />
+        <div
+          class="row full-width justify-center items-center ellipsis"
+          style="font-size: 10px;"
+        >
+          {{ name }}
+        </div>
+        <q-tooltip
+          :delay="250"
+          class="primary"
+          style="font-size: 24px;"
+        >
+          {{ name }}
+        </q-tooltip>
+      </div>
+    </q-intersection>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { useStore } from 'assets/store.js'
+
+export default defineComponent({
+  name: 'SvgIconViewer',
+
+  props: {
+    icons: {
+      type: Object,
+      required: true
+    },
+    selectedName: {
+      type: String,
+      required: true
+    }
+  },
+
+  emits: [
+    'selected'
+  ],
+
+  setup (props, { emit }) {
+    const store = useStore()
+
+    return {
+      store,
+       onClick: function ({ path, name }) {
+        emit('selected', { path, name })
+      },
+      isActiveIcon: function (name) {
+        return props.selectedName === name
+      }
+    }
+  }
+})
+</script>
+
+<style lang="sass">
+.active-icon
+  color: rgba(25, 118, 210, 0.65)
+
+.cart-icon
+  color: rgba(255, 0, 0, 0.65)
+</style>

src/css/app.sass

@@ -1,5 +1,8 @@
 // app global css in Sass form
 
+.font-mono
+  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
+
 .intersetion-icon-box
   padding: 2px
   width: 100%

src/index.template.html

@@ -24,9 +24,9 @@
     <meta name="title" content="Quasar SVG Icon Explorer - Explorer Quasar Framework SVG icons" data-qmeta="title">
     <meta property="og:title" content="Quasar SVG Icon Explorer - Explorer Quasar Framework SVG icons" data-qmeta="ogTitle">
     <meta name="twitter:title" content="Quasar SVG Icon Explorer - Explorer Quasar Framework SVG icons" data-qmeta="twitterTitle">
-    <meta name="description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, see what they look like with different foreground and background colors." data-qmeta="description">
-    <meta property="og:description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, see what they look like with different foreground and background colors." data-qmeta="ogDesc">
-    <meta name="twitter:description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, see what they look like with different foreground and background colors." data-qmeta="twitterDesc">
+    <meta name="description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, copy imports and inlined to the clipboard, plus more to come." data-qmeta="description">
+    <meta property="og:description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, copy imports and inlined to the clipboard, plus more to come." data-qmeta="ogDesc">
+    <meta name="twitter:description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, copy imports and inlined to the clipboard, plus more to come." data-qmeta="twitterDesc">
 
   </head>
   <body>