-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
new features and improvements, antlers tag
- Loading branch information
Showing
12 changed files
with
258 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,92 +1,179 @@ | ||
| <template> | ||
|
|
||
| <div> | ||
| <div v-if="value" class="iconify-flex iconify-items-center iconify-gap-4 iconify-group"> | ||
| <iconify-icon :icon="value" class="iconify-text-4xl iconify-text-gray-800" v-tooltip="{content: value, delay: 500, autoHide: false}"></iconify-icon> | ||
| <div v-if="value" class="iconify-flex iconify-items-center iconify-gap-4"> | ||
| <dropdown-list placement="bottom-center"> | ||
| <template #trigger> | ||
| <iconify-icon v-if="typeof value === 'string'" :icon="value" class="iconify-cursor-pointer iconify-text-4xl iconify-text-gray-800" v-tooltip="{content: value, delay: 500, autoHide: false}"></iconify-icon> | ||
|
|
||
| <dropdown-list class="iconify-invisible group-hover:iconify-visible"> | ||
| <dropdown-item text="Change" @click="searchModalIsOpen = true" /> | ||
| <svg v-else v-bind="value.attributes" class="iconify-cursor-pointer iconify-text-4xl iconify-text-gray-800" v-html="value.body" v-tooltip="{content: value.name, delay: 500, autoHide: false}"></svg> | ||
| </template> | ||
| <dropdown-item text="Change" @click="openSearchModal" /> | ||
| <dropdown-item text="Remove" @click="value = ''" /> | ||
| </dropdown-list> | ||
| </div> | ||
|
|
||
| <button v-else class="btn btn-xs" @click="searchModalIsOpen = true">Find an icon</button> | ||
| <button v-else class="btn btn-xs" @click="openSearchModal">Find an icon</button> | ||
|
|
||
| <modal | ||
| <stack | ||
| v-if="searchModalIsOpen" | ||
| name="search-modal" | ||
| :scrollable="true" | ||
| @closed="searchModalIsOpen = false" | ||
| @opened="modalOpened" | ||
| > | ||
| <div slot-scope="{ close }" class="iconify-p-4 iconify-flex iconify-flex-col iconify-h-[inherit]"> | ||
| <div class="iconify-flex iconify-justify-between iconify-items-center iconify-mb-4"> | ||
| <h2>Pick an icon</h2> | ||
| <button class="btn" @click="close">x</button> | ||
| </div> | ||
|
|
||
| <div class="iconify-w-full iconify-flex iconify-gap-4 iconify-mb-4"> | ||
| <text-input ref="query" v-model="query" class="iconify-flex-1" @keydown.enter="search" /> | ||
| <button class="btn-primary" @click="search">Search</button> | ||
| </div> | ||
| <div slot-scope="{ close }" class="iconify-flex iconify-flex-col iconify-h-full iconify-bg-white"> | ||
|
|
||
| <header class="bg-white pl-6 pr-3 py-2 mb-4 border-b shadow-md text-lg font-medium flex items-center justify-between"> | ||
| Search and select an icon | ||
| <button type="button" class="btn-close" @click="searchModalIsOpen = false">×</button> | ||
| </header> | ||
|
|
||
| <div class="iconify-px-6 iconify-py-3 iconify-pr-0 iconify-flex-1 iconify-flex iconify-flex-col iconify-overflow-hidden"> | ||
| <div class="iconify-w-full iconify-flex iconify-gap-4 iconify-mb-4 iconify-pr-6"> | ||
| <text-input ref="query" v-model="query" class="iconify-flex-1" placeholder="Search for an icon..." @keydown.enter="search" /> | ||
| <button class="btn-primary" @click="search" :disabled="loading">{{ loading ? 'Searching...' : 'Search' }}</button> | ||
| <div class="btn-group"> | ||
| <button class="btn px-4" :class="{ active: listType === 'grid' }" @click="listType = 'grid'"> | ||
| <iconify-icon icon="ph:grid-nine-light" class="iconify-text-xl"></iconify-icon> | ||
| </button> | ||
| <button class="btn px-4" :class="{ active: listType === 'table' }" @click="listType = 'table'"> | ||
| <iconify-icon icon="ph:table-light" class="iconify-text-xl"></iconify-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div v-if="result" class="iconify-overflow-y-scroll iconify-flex-1 iconify-pr-6"> | ||
|
|
||
| <table v-if="listType === 'table'" class="data-table iconify-w-full"> | ||
| <thead> | ||
| <tr> | ||
| <th>Icon</th> | ||
| <th>Name</th> | ||
| <th>Collection</th> | ||
| <th>License</th> | ||
| <th></th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr v-for="icon in icons"> | ||
| <td> | ||
| <iconify-icon :icon="icon.name" class="iconify-text-2xl iconify-text-gray-800"></iconify-icon> | ||
| </td> | ||
| <td> | ||
| <span v-text="icon.name" class="iconify-text-sm"></span> | ||
| </td> | ||
| <td> | ||
| <span v-text="icon.collection.name" class="iconify-text-sm"></span> | ||
| </td> | ||
| <td> | ||
| <span v-text="icon.collection.license.title" class="iconify-text-sm"></span> | ||
| </td> | ||
| <td> | ||
| <button class="btn btn-sm" @click="select(icon)">Select</button> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <div v-if="listType === 'grid'" class="iconify-grid iconify-grid-cols-8 iconify-gap-4"> | ||
|
|
||
| <button v-for="icon in icons" class="iconify-relative iconify-aspect-square iconify-bg-gray-100 iconify-rounded-lg iconify-flex iconify-items-center iconify-justify-center iconify-group" @click="select(icon)"> | ||
|
|
||
| <iconify-icon :icon="icon.name" class="iconify-text-4xl iconify-text-gray-800 group-hover:iconify-scale-125 iconify-transition-all"></iconify-icon> | ||
|
|
||
| <div class="iconify-absolute iconify-bottom-0 iconify-left-0 iconify-right-0 iconify-p-2 iconify-bg-gray-50 iconify-text-xs iconify-text-gray-500 iconify-text-center iconify-rounded-b-lg iconify-opacity-0 group-hover:iconify-opacity-100 iconify-transition-opacity"> | ||
| <span v-text="icon.name"></span> | ||
| </div> | ||
|
|
||
| <div class="iconify-absolute iconify-top-2 iconify-left-2 iconify-p-1 iconify-bg-gray-200 iconify-text-xs iconify-text-gray-600 iconify-rounded-sm iconify-opacity-0 group-hover:iconify-opacity-100 iconify-transition-opacity"> | ||
| <span v-text="icon.collection.license.title"></span> | ||
| </div> | ||
|
|
||
| </button> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <div v-if="result" class="iconify-overflow-y-scroll iconify-flex-1"> | ||
|
|
||
|
|
||
| <table class="data-table iconify-w-full"> | ||
| <tbody> | ||
| <tr v-for="icon in result.icons"> | ||
| <td> | ||
| <iconify-icon :icon="icon" class="iconify-text-2xl iconify-text-gray-800"></iconify-icon> | ||
| </td> | ||
| <td> | ||
| <span v-text="icon" class="iconify-text-sm"></span> | ||
| </td> | ||
| <td> | ||
| <button class="btn" @click="select(icon)">Pick</button> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| </div> | ||
| </modal> | ||
| </stack> | ||
|
|
||
| </div> | ||
|
|
||
| </template> | ||
|
|
||
| <script> | ||
| import { getIcon, buildIcon } from 'iconify-icon'; | ||
| export default { | ||
| mixins: [Fieldtype], | ||
| data() { | ||
| return { | ||
| searchModalIsOpen: false, | ||
| listType: 'grid', | ||
| query: '', | ||
| result: null | ||
| result: null, | ||
| loading: false, | ||
| }; | ||
| }, | ||
| computed: { | ||
| icons() { | ||
| if (!this.result) return [] | ||
| return this.result.icons.map(icon => { | ||
| return { | ||
| name: icon, | ||
| collection: this.result.collections[icon.split(':')[0]], | ||
| } | ||
| }) | ||
| } | ||
| }, | ||
| methods: { | ||
| openSearchModal() { | ||
| this.searchModalIsOpen = true | ||
| this.$wait(300).then(() => { this.$refs.query.$el.querySelector('input').focus() }) | ||
| }, | ||
| search() { | ||
| this.loading = true | ||
| ky.get('https://api.iconify.design/search?limit=999&query=' + this.query) | ||
| .json() | ||
| .then(data => { | ||
| this.result = data | ||
| console.log(data) | ||
| }) | ||
| .finally(() => { | ||
| this.loading = false | ||
| }) | ||
| }, | ||
| getIconBuildData(icon) { | ||
| const iconBuildData = buildIcon(getIcon(icon.name)) | ||
| const iconData = { | ||
| name: icon.name, | ||
| } | ||
| Object.keys(iconBuildData).forEach(key => { | ||
| iconData[key] = iconBuildData[key] | ||
| }) | ||
| return iconData | ||
| }, | ||
| select(icon) { | ||
| this.$emit('input', icon) | ||
| if (this.config.store_as === 'name') { | ||
| this.$emit('input', icon.name) | ||
| } else if (this.config.store_as === 'svg_data') { | ||
| this.$emit('input', this.getIconBuildData(icon)) | ||
| } | ||
| this.searchModalIsOpen = false | ||
| }, | ||
| modalOpened() { | ||
| this.$refs.query.$el.querySelector('input').focus() | ||
| } | ||
| } | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.