When I run "grunt svgstore" I get this:
No "svgstore" targets found. Warning: Task "svgstore" failed. Use --force to continue. Aborted due to warnings.
Why?
This is part of my gruntfile (I can't post more).
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-svgstore');
grunt.initConfig({
svgstore: {
options: {
formatting : {
indent_size : 2
}
},
default: {
files: {
'images/svg/defs.svg': ['images/svg/*.svg'],
},
},
},
},
});
// Default task(s)
grunt.registerTask('default', ['sass_globbing', /*'sprite:icons_dev'*/, 'sass']);
grunt.registerTask('icon_sprite', ['sprite:icons_dev']);
//grunt.registerTask('stage_deploy', ['sass_globbing', 'sprite:flags_dev', 'sprite:icons_dev', 'sass']);
//grunt.registerTask('prod_deploy', ['sass_globbing', 'sprite:flags_prod', 'sprite:icons_prod', 'tinypng', 'sass']);
};
I had a similar problem. Not sure what is the solution but I have solved it after I took a look on sample Gruntfile.js. The only difference I can spot between mine and yours Gruntfile is that I call loadNpmTasks after initConfig.
Take a look here:
module.exports = function(grunt) {
grunt.initConfig({
svgstore: {
options: {
prefix : 'pfx-', // This will prefix each ID
svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
viewBox : '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg'
},
formatting : {
indent_size : 2
},
symbol : {},
includedemo: true,
cleanup: true,
cleanupdefs: true,
},
default : {
files: {
'export/pfx-icons.svg': ['svgs/*.svg'],
},
},
},
});
grunt.loadNpmTasks('grunt-svgstore');
grunt.registerTask('default', ['svgstore']);
};
Related
I am using Vue.js with Vuetify.
Following is my minimal reproducible example:
<template>
<v-app>
<v-select v-model="site" :items="sites" item-value="_id" item-text="name"></v-select>
<v-btn #click="showSelections">Show Selections</v-btn>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
site: [],
sites: [
{
name: 'Vancouver',
_id: '5d9c276784e00100699281e2',
},
{
name: 'LA',
_id: '5d9c276784e00100699281e5',
},
{
name: 'Montreal',
_id: '5d9c276784e00100699281e3',
},
],
}),
methods: {
showSelections: function() {
console.log(this.site);
}
}
};
</script>
This example works perfect until you want to enable multiple selection on the v-select component.
<v-select v-model="site" :items="sites" multiple item-value="_id" item-text="name"></v-select>
As soon as you click the combobox, you'd get this:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: (this.internalValue || []).findIndex is not a function"
found in
---> <VSelectList>
<VThemeProvider>
<VMenu>
<VSelect>
<VMain>
<VApp>
<App> at src/App.vue
<Root>
TypeError: (this.internalValue || []).findIndex is not a function
at VueComponent.findExistingIndex (VSelect.ts?1576:338)
at VueComponent.selectItem (VSelect.ts?1576:816)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
at click (VSelectList.ts?7bd1:169)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
This seems to be an issue caused by Vue CLI 4.5.11 transpiling Vuetify. If you remove vuetify from transpileDependencies, your example works properly:
// vue.config.js
module.exports = {
// transpileDependencies: [
// 'vuetify'
// ]
}
Interestingly, this isn't a problem at all (no config changes needed) with Vue CLI 5.0.0-alpha.4, so consider upgrading.
I had the same problem. I leave you here as I have it in case it works for you:
<!-- VueJS Template -->
<v-select :items="arrayItems" v-model="arrayItemsSelected" label="Items" item-text="text" outlined multiple chips attach dark></v-select>
// VueJS Data
export default {
data: () => ({
arrayItemsSelected: [],
arrayItems: [
{ value: "Item1", text: "Item1" },
{ value: "Item2", text: "Item2" },
{ value: "Item3", text: "Item3" },
{ value: "Item4", text: "Item4" },
{ value: "Item5", text: "Item5" },
],
}),
}
I had the same issue when I was toggling the multiple property of the v-select. See the reproduction link: https://codepen.io/kkojot/pen/MWOpYqZ
To avoid this error you have to clear the property bound to v-model and change it empty object {} or empty array [] accordingly.
computed: {
isMultiple() {
//comment the if statment below to see the 'TypeError: (this.internalValue || []).findIndex is not a function'
if (this.multiple) this.site = [];
else this.site = {};
return this.multiple;
},
},
I'm trying to extend the spacing on Tailwind, but I can't make it work. I did my research and I made the changes in the tailwind.config.js, but when I use the class in the HTML, it doesn't exist.
PS: I understand that there is no need to run the build
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
spacing: {
'1/3': '33,333333%',
'2/3': '66,666667%'
}
},
},
variants: {
extend: {},
},
plugins: [],
}
I've just checked your config and it does create all the classes. The problem is that 33,333333% and 66,666667% are not valid CSS values.
Unlike in Spanish, you have to use decimal points, not commas:
theme: {
extend: {
spacing: {
'1/3': '33.333333%',
'2/3': '66.666667%',
},
},
},
33,333333% is an invalid property value:
33.333333% works fine:
Codesandbox link
I want to increase the buffer size for elasticsearch in template settings, but where should I add this setting. Where should I write indices.memory.index_buffer_size:? As I understand it should be defined for the index, actually I have one index.
const indexTemplateSettings = {
number_of_shards: 2,
number_of_replicas : 0,
refresh_interval: '3600s',
'indices.memory.index_buffer_size': '30%',
// 'store.throttle.max_bytes_per_sec' : '100mb',
max_result_window: 1000000000,
'index.routing.allocation.enable': 'all',
}
export const init = async types => {
try {
let client = createClient()
const templateSettings = {
index_patterns : ['*'],
settings: indexTemplateSettings,
mappings : types.reduce((p, type) => ({
...p,
[type] : {
numeric_detection: true,
_source : {enabled : true},
dynamic_templates: [
{
all: {
match: '*',
mapping: {
copy_to: searchField,
},
},
},
],
properties: {
_searchField: {
type: 'text',
},
},
},
}), {}),
}
await client.indices.putTemplate({
name: 'default',
body: templateSettings,
},(error, response) => {
logger.silly('Pushing of index template completed', response)
})
} catch (e) {
logger.error(e)
}
}
This should go to the elasticsearch.yml configuration file. Quoting from the relevant docs:
The following settings are static and must be configured on every data node in the cluster
Default is 10% of the heap. That is a node wide setting and not on a per index base.
On a side note: This should be 512MB per shard as the maximum as described in the docs.
I want to display predictive text in search field, value for predictive text which comes from server. Here is my code so far:
View:
Ext.define('MyApp.view.AutoSearch', {
extend: 'Ext.dataview.List',
alias : 'widget.mainPanel',
config: {
store : 'AutoSearchStore',
itemTpl: '<div class="myWord">'+
'<div>Word is --<b>{name}</b>--- after search!!!</div>' +
'</div>',
emptyText: '<div class="myWord">No Matching Words</div>',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
itemId: 'searchBox'
}
]
}
]
}
});
Store:
Ext.define('MyApp.store.AutoSearchStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.AutoSearchModel',
autoLoad:true,
id:'Contacts',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363',
reader:
{
rootProperty:''
}
}
}
});
Model:
Ext.define('MyApp.model.AutoSearchModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.AutoSearchModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name: 'name'},
],
},
});
and
Ext.define('MyApp.model.AutoSearchModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
'name',
],
belongsTo: "MyApp.model.AutoSearchModel"
}
});
Controller:
Ext.define('MyApp.controller.SearchAutoComplete', {
extend : 'Ext.app.Controller',
config: {
profile: Ext.os.deviceType.toLowerCase(),
stores : ['MyApp.store.AutoSearchStore'],
models : ['MyApp.model.AutoSearchModel'],
refs: {
myContainer: 'mainPanel'
},
control: {
'mainPanel': {
activate: 'onActivate'
},
'mainPanel searchfield[itemId=searchBox]' : {
clearicontap : 'onClearSearch',
keyup: 'onSearchKeyUp'
}
}
},
onActivate: function() {
console.log('Main container is active--Search');
},
onSearchKeyUp: function(searchField) {
queryString = searchField.getValue();
console.log(this,'Please search by: ' + queryString);
var store = Ext.getStore('AutoSearchStore');
store.clearFilter();
if(queryString){
var thisRegEx = new RegExp(queryString, "i");
store.filterBy(function(record) {
if (thisRegEx.test(record.get('name'))) {
return true;
};
return false;
});
}
},
onClearSearch: function() {
console.log('Clear icon is tapped');
var store = Ext.getStore('AutoSearchStore');
store.clearFilter();
},
init: function() {
console.log('Controller initialized for SearchAutoComplete');
}
});
Json Data Looks Like:
"data":[
{
"name":"paint",
"author":"admin",
"word_id":"1",
"category":"Business",
"is_favourite":"yesStar"
},
{
"name":"abacus",
"author":"admin",
"word_id":"2",
"category":"Education",
"is_favourite":"yesStar"
},
{
"name":"abate",
"author":"admin",
"word_id":"3",
"category":"Education",
"is_favourite":"noStar"
},
{
"name":"testing adsf",
"author":"admin",
"word_id":"7",
"category":"Education",
"is_favourite":"noStar"
},
{
"name":"sprite",
"author":"admin",
"word_id":"6",
"category":"Business",
"is_favourite":"noStar"
},
{
"name":"newword",
"author":"admin",
"word_id":"8",
"category":"Architecture",
"is_favourite":"noStar"
}
]
})
If I type "A", then it displays No Matching Words, but I have words from "A" on json coming from server. How to solve this problem?
Any idea!
Code Sources Link
I don't know why you are using two models but just one thing you need to specify in AutoSearchStore :
reader:
{
rootProperty:'data'
}
instead of
reader:
{
rootProperty:''
}
to get the expected results in the list.
Hope this will be helpful :)
I'm trying to load Zurb Foundation 3 with RequireJS. Here's my configuration section:
require.config({
paths:
{
'jquery': 'libs/jquery/jquery',
'foundation': 'libs/foundation/foundation.min',
'foundation-init': 'libs/foundation/app'
},
shim:
{
'foundation': {
deps: ['jquery']
},
'foundation-init': {
deps: ['foundation']
}
}
});
Then, always in the main file, I include Foundation:
require(['foundation-init']);
The problem is that, for example, the top-bar doesn't expand (jquery animation) like it should do (see here: http://foundation.zurb.com/docs/navigation.php#topbarEx). It's like the Foundation jQuery plugins are not correctly loaded. As I read, that's the reason why in the Foundation doc the scripts are loaded at the end of the body. But, obviously, with RequireJS it's a little more complex. I've temporarily fixed like suggested in the RequireJS doc ("Loading Code After Page Load" section), setting a timeout like that:
setTimeout(function() { require(['foundation-init']); }, 500);
I don't think it's a good solution. Any idea?
Ok, I resolved the problem with a little hack!
As I supposed, the problem was that the new DOM section after the view rendering with Backbone, has Foundation jQuery events not binded.
My solution is to create a new plugin function .foundation(), which has to be applied to a section of the DOM for initializing Foundation on it. So, I modified the file app.js of the Foundation package from:
;(function ($, window, undefined) {
'use strict';
var $doc = $(document),
Modernizr = window.Modernizr;
$(document).ready(function() {
$.fn.foundationAlerts ? $doc.foundationAlerts() : null;
$.fn.foundationButtons ? $doc.foundationButtons() : null;
$.fn.foundationAccordion ? $doc.foundationAccordion() : null;
$.fn.foundationNavigation ? $doc.foundationNavigation() : null;
$.fn.foundationTopBar ? $doc.foundationTopBar() : null;
$.fn.foundationCustomForms ? $doc.foundationCustomForms() : null;
$.fn.foundationMediaQueryViewer ? $doc.foundationMediaQueryViewer() : null;
$.fn.foundationTabs ? $doc.foundationTabs({callback : $.foundation.customForms.appendCustomMarkup}) : null;
$.fn.foundationTooltips ? $doc.foundationTooltips() : null;
$.fn.foundationMagellan ? $doc.foundationMagellan() : null;
$.fn.foundationClearing ? $doc.foundationClearing() : null;
$.fn.placeholder ? $('input, textarea').placeholder() : null;
});
// UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});
// Hide address bar on mobile devices (except if #hash present, so we don't mess up deep linking).
if (Modernizr.touch && !window.location.hash) {
$(window).load(function () {
setTimeout(function () {
window.scrollTo(0, 1);
}, 0);
});
}
})(jQuery, this);
to:
;(function ($, window, undefined) {
'use strict';
$.fn.foundation = function () {
$.fn.foundationAlerts ? $(this).foundationAlerts() : null;
$.fn.foundationButtons ? $(this).foundationButtons() : null;
$.fn.foundationAccordion ? $(this).foundationAccordion() : null;
$.fn.foundationNavigation ? $(this).foundationNavigation() : null;
$.fn.foundationTopBar ? $(this).foundationTopBar() : null;
$.fn.foundationCustomForms ? $(this).foundationCustomForms() : null;
$.fn.foundationMediaQueryViewer ? $(this).foundationMediaQueryViewer() : null;
$.fn.foundationTabs ? $(this).foundationTabs({callback : $.foundation.customForms.appendCustomMarkup}) : null;
$.fn.foundationTooltips ? $(this).foundationTooltips() : null;
$.fn.foundationMagellan ? $(this).foundationMagellan() : null;
$.fn.foundationClearing ? $(this).foundationClearing() : null;
$.fn.placeholder ? $(this).find('input, textarea').placeholder() : null;
};
var $doc = $(document),
Modernizr = window.Modernizr;
$(document).ready(function() {
$doc.foundation();
});
// UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});
// Hide address bar on mobile devices (except if #hash present, so we don't mess up deep linking).
if (Modernizr.touch && !window.location.hash) {
$(window).load(function () {
setTimeout(function () {
window.scrollTo(0, 1);
}, 0);
});
}
})(jQuery, this);
About RequireJS, it's necessary to include all the Foundation (ver 3.2.5) plugins file and not the minified one. So, my main.js looks like that:
require.config({
paths:
{
'jquery': 'libs/jquery/jquery',
'underscore': 'libs/underscore/underscore',
'backbone': 'libs/backbone/backbone',
'jquery-event-move': 'libs/foundation/jquery.event.move',
'jquery-event-swipe': 'libs/foundation/jquery.event.swipe',
'jquery-placeholder': 'libs/foundation/jquery.placeholder',
'foundation-modernizr': 'libs/foundation/modernizr.foundation',
'foundation-accordion': 'libs/foundation/jquery.foundation.accordion',
'foundation-alerts': 'libs/foundation/jquery.foundation.alerts',
'foundation-buttons': 'libs/foundation/jquery.foundation.buttons',
'foundation-clearing': 'libs/foundation/jquery.foundation.clearing',
'foundation-forms': 'libs/foundation/jquery.foundation.forms',
'foundation-joyride': 'libs/foundation/jquery.foundation.joyride',
'foundation-magellan': 'libs/foundation/jquery.foundation.magellan',
'foundation-media-query-toggle': 'libs/foundation/jquery.foundation.mediaQueryToggle',
'foundation-navigation': 'libs/foundation/jquery.foundation.navigation',
'foundation-orbit': 'libs/foundation/jquery.foundation.orbit',
'foundation-reveal': 'libs/foundation/jquery.foundation.reveal',
'foundation-tabs': 'libs/foundation/jquery.foundation.tabs',
'foundation-tooltips': 'libs/foundation/jquery.foundation.tooltips',
'foundation-topbar': 'libs/foundation/jquery.foundation.topbar',
'foundation-app': 'libs/foundation/app',
},
shim:
{
'underscore': {
deps: ['jquery'],
exports: '_'
},
'backbone': {
deps: ['underscore'],
exports: 'Backbone'
},
'models/User': {
deps: ['backbone', 'environment'],
exports: 'User'
},
'models/Token': {
deps: ['backbone', 'environment'],
exports: 'Token'
},
'jquery-event-move': {
deps: ['jquery']
},
'jquery-event-swipe': {
deps: ['jquery']
},
'jquery-placeholder': {
deps: ['jquery']
},
'foundation-modernizer': {
deps: ['jquery']
},
'foundation-accordion': {
deps: ['jquery']
},
'foundation-alerts': {
deps: ['jquery']
},
'foundation-buttons': {
deps: ['jquery']
},
'foundation-clearing': {
deps: ['jquery']
},
'foundation-forms': {
deps: ['jquery']
},
'foundation-joyride': {
deps: ['jquery']
},
'foundation-magellan': {
deps: ['jquery']
},
'foundation-media-query-toggle': {
deps: ['jquery']
},
'foundation-navigation': {
deps: ['jquery']
},
'foundation-orbit': {
deps: ['jquery']
},
'foundation-reveal': {
deps: ['jquery']
},
'foundation-tabs': {
deps: ['jquery']
},
'foundation-tooltips': {
deps: ['jquery']
},
'foundation-topbar': {
deps: ['jquery']
},
'foundation-app': {
deps: [
'jquery',
'jquery-event-move',
'jquery-event-swipe',
'jquery-placeholder',
'foundation-modernizr',
'foundation-alerts',
'foundation-buttons',
'foundation-clearing',
'foundation-forms',
'foundation-joyride',
'foundation-magellan',
'foundation-media-query-toggle',
'foundation-navigation',
'foundation-orbit',
'foundation-reveal',
'foundation-tabs',
'foundation-tooltips',
'foundation-topbar',
]
},
}
});
// Requiring Foundation framework
require(['foundation-app']);
// Instantiating MVC
require([
'app',
], function(App)
{
App.initialize();
});
In the end, to make the Backbone views to render correctly with Foundation (at least with new DOM sections), I do like that:
define([
'jquery',
'underscore',
'backbone',
'foundation-app'
], function($, _, Backbone)
{
var FoundationView = Backbone.View.extend(
{
el: $('#view-placeholder'),
initialize: function()
{
this.on('post-render', this.onPostRender, this);
},
render: function(content)
{
var content = 'new dom section';
$(this.el).html(content);
this.trigger('post-render');
},
onPostRender: function()
{
$(this.el).foundation();
}
});
return FoundationView;
});