Permalink
Please
sign in to comment.
Showing
with
17,364 additions
and 119 deletions.
- +26 −8 docs/components/componentdoc.vue
- +11 −9 docs/components/feedback.js
- +1 −0 docs/components/footer.vue
- +1 −0 docs/components/header.vue
- +162 −0 docs/components/icons-table.vue
- +6 −5 docs/components/importdoc.vue
- +21 −1 docs/content/index.js
- +102 −32 docs/markdown/intro/README.md
- +75 −0 docs/pages/docs/icons/index.js
- +4 −0 docs/pages/docs/index.js
- +1 −1 docs/pages/index.vue
- +2 −1 docs/plugins/bootstrap-vue.js
- +18 −4 docs/utils/index.js
- +36 −18 nuxt/index.js
- +8 −1 nuxt/plugin.template.js
- +3 −2 package.json
- +1 −1 scripts/banner.js
- +65 −5 scripts/build.sh
- +250 −0 scripts/create-icons.js
- +38 −16 scripts/create-web-types.js
- +49 −1 scripts/rollup.config.js
- +9 −0 src/browser-icons.js
- +1 −1 src/browser.js
- +1 −1 src/components/modal/README.md
- +1 −1 src/components/toast/_toast.scss
- +33 −0 src/icons-only.js
- +5 −0 src/icons.scss
- +659 −0 src/icons/README.md
- +26 −0 src/icons/_icons.scss
- +140 −0 src/icons/helpers/make-icon.js
- +32 −0 src/icons/icon.js
- +648 −0 src/icons/icons.d.ts
- +1,599 −0 src/icons/icons.js
- +145 −0 src/icons/icons.spec.js
- +16 −0 src/icons/index.d.ts
- +13 −0 src/icons/index.js
- +1 −0 src/icons/index.scss
- +12,065 −0 src/icons/package.json
- +990 −0 src/icons/plugin.js
- +5 −2 src/index.d.ts
- +14 −4 src/index.js
- +4 −0 src/index.scss
- +33 −0 src/utils/plugins.js
- +16 −0 src/utils/string.js
- +19 −1 src/utils/string.spec.js
- +9 −4 yarn.lock
| @@ -0,0 +1,162 @@ | ||
| <template> | ||
| <div | ||
| key="_bv-icons-table_" | ||
| class="bv-icons-table notranslate" | ||
| role="group" | ||
| aria-labeledby="bv-icons-table-title" | ||
| > | ||
| <b-row align-v="start"> | ||
| <b-col md="5" lg="6"> | ||
| <div id="bv-icons-table-title" class="h3 text-muted mb-3 mb-md-0"> | ||
| Icon explorer | ||
| </div> | ||
| </b-col> | ||
| <b-col md="7" lg="6"> | ||
| <b-form @submit.prevent> | ||
| <b-form-group | ||
| label="Search icons" | ||
| label-for="bv-icons-table-search" | ||
| label-cols-sm="auto" | ||
| label-align-sm="right" | ||
| :description="`Showing ${filteredIcons.length} of ${totalIcons} icons`" | ||
| > | ||
| <b-input-group> | ||
| <b-input-group-prepend is-text> | ||
| <b-icon icon="search"></b-icon> | ||
| </b-input-group-prepend> | ||
| <b-form-input | ||
| id="bv-icons-table-search" | ||
| key="_bv-icons-table-search_" | ||
| v-model="iconFilter" | ||
| type="search" | ||
| debounce="250" | ||
| aria-controls="bv-icons-table-result" | ||
| ></b-form-input> | ||
| </b-input-group> | ||
| </b-form-group> | ||
| </b-form> | ||
| </b-col> | ||
| </b-row> | ||
| <div id="bv-icons-table-result"> | ||
| <transition-group | ||
| tag="ul" | ||
| name="flip-icon-list" | ||
| class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 list-unstyled mb-n3 position-relative" | ||
| > | ||
| <b-col | ||
| v-for="icon in filteredIcons" | ||
| :key="`_icon_${icon.name}`" | ||
| tag="li" | ||
| class="flip-icon-list-icon d-inline-flex flex-column mb-3 text-center" | ||
| > | ||
| <div class="card bg-light p-3" :title="icon.name"> | ||
| <b-icon :icon="icon.name" class="mx-auto"></b-icon> | ||
| </div> | ||
| <b-form-text class="mt-1 text-break" :title="icon.name">{{ icon.name }}</b-form-text> | ||
| </b-col> | ||
| </transition-group> | ||
| <div aria-live="polite" aria-atomic="true"> | ||
| <b-alert | ||
| :show="filteredIcons.length === 0" | ||
| :role="null" | ||
| :aria-live="null" | ||
| :aria-atomic="null" | ||
| fade | ||
| variant="light" | ||
| class="text-center mt-4 d-flex align-items-center justify-content-center" | ||
| > | ||
| <b-icon icon="alert-triangle-fill" aria-hidden="true"></b-icon> | ||
| <span>No matching icons found. Try searching again.</span> | ||
| </b-alert> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .bv-icons-table { | ||
| position: relative; | ||
| } | ||
| #bv-icons-table-result /deep/ .bi { | ||
| font-size: 2rem; | ||
| } | ||
| .form-group /deep/ .form-text { | ||
| text-align: right; | ||
| } | ||
| // Icon zoom on hover | ||
| .flip-icon-list-icon /deep/ .card { | ||
| .bi { | ||
| transition: transform 0.15s; | ||
| } | ||
| &:hover .bi { | ||
| transform: scale(2); | ||
| } | ||
| } | ||
| // Transion group classes | ||
| .flip-icon-list-icon { | ||
| transition: all 0.15s; | ||
| } | ||
| .flip-icon-list-move { | ||
| transition: transform 0.3s; | ||
| transition-delay: 0.15s; | ||
| } | ||
| .flip-icon-list-enter, | ||
| .flip-icon-list-leave-to { | ||
| opacity: 0; | ||
| transform: scale(0.75); | ||
| } | ||
| .flip-icon-list-enter-active { | ||
| transition-delay: 0.3s; | ||
| } | ||
| .flip-icon-list-leave-active { | ||
| position: absolute; | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| import { iconNames } from '~/../src/icons' | ||
| const icons = iconNames | ||
| .filter(name => name !== 'BIcon') | ||
| .sort() | ||
| .map(fullName => { | ||
| return { | ||
| component: fullName, | ||
| name: fullName | ||
| .replace(/^BIcon/, '') | ||
| .replace(/\B([A-Z])/g, '-$1') | ||
| .toLowerCase() | ||
| } | ||
| }) | ||
| export default { | ||
| name: 'BVDIconsTable', | ||
| data() { | ||
| return { | ||
| iconFilter: '', | ||
| totalIcons: icons.length | ||
| } | ||
| }, | ||
| computed: { | ||
| filteredIcons() { | ||
| const terms = this.iconFilter | ||
| .trim() | ||
| .toLowerCase() | ||
| .split(/\s+/) | ||
| if (terms.length === 0) { | ||
| return icons.slice() | ||
| } | ||
| return icons.filter(icon => terms.every(term => icon.name.indexOf(term) !== -1)) | ||
| } | ||
| } | ||
| } | ||
| </script> |
Oops, something went wrong.
0 comments on commit
d2bef17