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
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;
},
},
My app is slightly unusual in that the appearance is actually critically important. It's sort of a photo manipulation app, so I want to be able to write tests to check, for example, that an element actually has a particular background color. I'm able to find elements with react-testing-library but my jest .toHaveStyle() assertions seem to always pass.
The element under test (rest of component omitted)
<span
className="swatch"
style={{ background: `#${colorToString(color)}` }}
aria-label="original color"
/>
The test
describe('BeadMapRow', () => {
let result: RenderResult;
beforeEach(() => {
const bead = {
brand: 'Test',
code: 'T01',
name: 'Test Bead 1',
color: 0x005080ff
};
result = render(<BeadMapRow color={0x084a8bff} bead={bead} />);
});
it('works', () => {
const e = result.getByLabelText('original color');
console.log(e);
expect(e).toHaveStyle({ 'background-color': '0x084a8bff' });
});
});
Result of that console.log (trimmed)
console.log src/components/beadMapRow.test.tsx:21
HTMLSpanElement {
'__reactInternalInstance$a7if3tsd8xg':
FiberNode {
tag: 5,
key: null,
elementType: 'span',
type: 'span',
stateNode: [Circular],
return:
FiberNode {
/* ... */
},
child: null,
sibling:
FiberNode {
/*...*/
},
index: 0,
ref: null,
pendingProps:
{ className: 'swatch',
style: [Object],
'aria-label': 'original color' },
memoizedProps:
{ className: 'swatch',
style: [Object],
'aria-label': 'original color' },
/* ... */
'__reactEventHandlers$a7if3tsd8xg':
{ className: 'swatch',
style: { background: '#084a8bff' },
'aria-label': 'original color' },
[Symbol(SameObject caches)]:
[Object: null prototype] {
style:
CSSStyleDeclaration {
_values: {},
_importants: {},
_length: 0,
_onChange: [Function] },
childNodes: NodeList {} } }
If I change the expected color to something else, it still passes. The only way so far I've found to make it fail is to say .toHaveStyle('background-color') without a value.
.toHaveStyle() works as intended when you pass colour value types different from the one you are passing, as you can see in this Codesandbox. So it must be something with how you are formatting you colour values.
I think that issue is with the name of the property used to compare the color in the expect, in the component you used the propety background not backgroud-color so try
expect(e).toHaveStyle({ 'background': '#0x084a8bff' });
instead of
expect(e).toHaveStyle({ 'background-color': '0x084a8bff' });
Regards.
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']);
};
I have my extjs application. As of now i am getting all my records from backend, full record set in 1 service request. I need to implement the pagination and sorting at UI level. Sorting seems be simple. How do i implement UI level pagination? Any example for this? I am getting 10-20k records so it is fine if i implement pagination at UI level? Can extjs6 handle the load?
I'd recommend you handle paging server-side. Right now you might only have 10-20k records, but what if it grows to 100k? or 1 million?
Take a look at this guide from Sencha: Grids - Paging. It explains a lot.
Good luck!
Sorting is implemented out of box. This is simple pagination example based on default ExtJs 6.2.0 application.
YourAppName.view.main.List
...
// bottom paging-bar definition. Use "tbar" for top bar, or define both.
bbar: {
xtype: 'pagingtoolbar',
displayInfo: true,
emptyMsg: 'No data to display',
items: ['->'],
prependButtons: true
}
...
items: [{
title: 'Home',
iconCls: 'fa-home',
layout: 'fit', // needed for scrolling
scrollable: true, // for scrollable items
items: [{
xtype: 'mainlist'
}]
}, {
...
YourAppName.store.Personnel
Ext.define('YourAppName.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.banners',
autoLoad: true, // run ajax-query right after grid rendering
loadMask: true, // show preload image
pageSize: 100,
model: 'YourAppName.model.Person',
proxy: {
type: 'ajax',
url: '/personnel',
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'total'
}
}
});
Create in app/model folder file Person.js with:
YourAppName.model.Person
Ext.define('YourAppName.model.Person', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string', defaultValue: '' },
{ name: 'email', type: 'string', defaultValue: '' },
{ name: 'phone', type: 'string', defaultValue: '' }
]
});
As of store definition your web-server must be able to response on HTTP GET-request on URI /personnel with json like this:
{
"success": true,
"total": 20000,
"items": [
{ "name": "Jean Luc", "email": "jeanluc.picard#enterprise.com", "phone": "555-111-1111" },
{ "name": "Worf", "email": "worf.moghsson#enterprise.com", "phone": "555-222-2222" },
{ "name": "Deanna", "email": "deanna.troi#enterprise.com", "phone": "555-333-3333" },
{ "name": 'Data', "email": "mr.data#enterprise.com", "phone": "555-444-4444" }
...
]
}
I have an Angular Formly-based form in my Angular-SPA. In one of the fields the user can enter data with the help of a physical barcode-scanner. The scanner enters the numbers from the barcode followed by 'enter' (keycode: 13).
When the 'enter' is entered, the form should preform an action (not a form submit-action, but an internal search to make sure the entered number doesn't already exists in the system), then the user can proceed to fill out the form.
In vanilla javascript, its possible to do this by a simple onKeypress-event:
function checkInput(event) {
if (event.keyCode == 13) {
console.log("Preforming search");
}
}
<input type="text" onKeypress="checkInput(event)">
In Formly however, it's possible to add a property 'onKeypress', but it doesn't seem to pass the same event as vanilla javascript. This is some of my Angular Formly code:
templateOptions : {
placeholder: "ISBN",
onKeypress: function(model, options, _this, event) {
console.log(model);
console.log(options);
console.log(_this);
console.log(event);
}
}
When I run this code, the event-object is 'undefined', instead of being the same event as in vanilla javascript.
Is there any way to access the actual event in the onKeypress-property of Angular Formly-forms?
Cheers!
Update
Found a solution! I was trying to do this to a custom type, which is then inherited to the actual input-element.
Seems like Formly doesn't allow inheritance of the onKeypress-property. I moved the onKeypress-property to the actual element, and I was able to solve the problem.
It's a bit unfortunate that this can not be inherited, but have to be defined for each element instead.
My problem (simplified) :
formlyConfig.setType({
name: 'multiInput',
templateUrl: 'app/editor/multiInput.html',
defaultOptions: {
wrapper: ['bootstrapLabel', 'boostrapHasError'],
templateOptions: {
inputOptions: {
type: 'input',
wrapper: null
},
onKeypress: function(model, options, _this, event) {
// DO SEARCH (NOT WORKING)
}
}
}
}
// --------------------------- //
{
className: 'col-xs-10',
type: "multiInput",
key: "isbns",
templateOptions: {
label: 'ISBN',
inputOptions: {
templateOptions: {
required: true,
disabled: true,
placeholder: 'ISBN'
}
},
key: "isbn",
}
}
}
My solution:
formlyConfig.setType({
name: 'multiInput',
templateUrl: 'app/editor/multiInput.html',
defaultOptions: {
wrapper: ['bootstrapLabel', 'boostrapHasError'],
templateOptions: {
inputOptions: {
type: 'input',
wrapper: null
}
}
}
}
// --------------- //
{
className: 'col-xs-10',
type: "multiInput",
key: "isbns",
templateOptions: {
label: 'ISBN',
inputOptions: {
templateOptions: {
required: true,
disabled: true,
placeholder: 'ISBN',
onKeypress: function(model, options, _this, event) {
// DO SEARCH (WORKING!)
}
}
},
key: "isbn"
}
}
}
It's not the best solution, I want more inputs to have the onKeypress-event. But it looks like I might have to add them separately.