In my app I need the user to select a folder, then the directory path is taken and used as a string elsewhere.
Is there a relatively simple way to have a folder selector?
I'm using vuetify at the moment and had the below when I was looking for a file to upload
<v-file-input
prepend-icon="mdi mdi-paperclip"
ref="filepath"
label="Filepath"
:error-messages="filepathErrors"
hint="The filepath for the file to be processed"
required
></v-file-input>
Then I just use the ref where I need it.
Is there a simple way I can change this to a folder input?
vuetify sends the props to the underlying input. If you are using webkit, you can do
<v-file-input webkitdirectory>
That will work in chrome and electron, but not in all/older browsers
Related
I am trying to make my own icon picker (similar to the fontawesome Icon Picker)in a Vuejs project and I was wondering if there was a way to load all of the svgs I have in my specific svgs folder to then display them on a page.
Is there a best way of going about this?
In VueJS,I can't import a folder full of svgs I believe, so how can you load all imgs/svgs from a single folder.
Should I load all svgs into a separate component and import that component somewhere else?
I'm not looking for someone to do this for me, but I am relatively new to coding and am not sure where to start with this implimentation and could really use some guidance!
Cheers!
This is a snapshot of what I am looking to build (obviously with all different svgs):
The list of svgs also look some thing like this:
I'm currently wanting to create Vue components with SVG elements as part of the template with the Vue components being created within .vue files. I am trying to work out how to get both IntelliSense for Vue from vetur as well as getting suggestions for SVG.
I have tried setting the file associations in the VsCode settings.json file, but it doesn't look like you can associate a file type to more than one language mode at a time.
Is it possible to use two different plugins for IntelliType on one file type or does that functionality not exist yet?
I have a divided my vuejs application in to components and whenever i update the architecture of the application, I need to change the component path wherever added. This makes the application maintenance difficult. So I have added the component path to settings.json file and with that I am trying to load the component. But this is not working. Please see the code below.
import Registration from platform.urls.uiComponent+'Account/Registration'
Does any one have any idea how to set dynamic component path in vuejs ?
According to this answer it is not possible to do that. There is however an alternative way to achieve what you want to do if you use a tool such as webpack. In webpack configuration you can define an alias for a directory e.g. components, which you can use and afterwards change in a centralized location.
Is it possible to use VusJS Components into Moqui Screens?
I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.
The need comes from the following scenario:
While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.
If there's no way to use vue, maybe you can help me with my concrete issue.
In the 'vuet' render mode which is used in the /vapps path (as opposed to /apps) it isn't actually HTML sent to the client it is a Vue Template. If you look at the text returned by the server you'll see a number of Vue Components already being used (see the WebrootVue.js file for their source). You can see this in Chrome using the Sources or Network tab in the tools window or similar tools in other browsers. If you inspect an element you'll be looking at the rendered HTML, ie after Vue runs the components to change the Vue Template to HTML.
This means that if you include the necessary JavaScript file(s), and CSS file(s) if needed, then you can use any Vue component in the Vue Template returned. You can do this inline in XML Screen files using the render-mode.text element with the #type=vuet.
None of this runs under NPM in the way VueJS is used in Moqui Framework through XML Screens. In other words it isn't a pre-packaged Vue app with 100% client/browser rendering but rather is a hybrid client and server rendered approach.
You can include scripts in this Moqui hybrid approach using the script element with a #src attribute for the script file which the WebrootVue.js file loads on the fly. There are various examples of this for additional JS scripts like Chart.JS
I have to download CSS file and apply style sheet to my app. I downloaded this file at the local folder and referenced it as
style.href = "ms-appdata:///local/css//custom.css";
and appended to head as
document.getElementsByTagName('head')[0].appendChild(style);
after document onready event.
Seems it has no effect (but I can see this element in the dom browser).
So is there any restriction for css source: app package, local folder? May be this impossible to reference downloaded CSS due to MS limitations? Or may be I'm doing something wrong? Any suggestions?
Do keep in mind, however, that you can access the document.styleSheets collection and list, add, or remove CSS rules dynamically from JavaScript. You can access the individual rules themselves through the DOM using statements like document.styleSheets[0].cssRules[0].style.color = "red" or you if you've fetched yourself some custom CSS text (dynamically from your other CSS file online) you can add its styles to one of your active style sheets using something like document.styleSheets[0].cssText = "{my CSS code}". Do be sure that you're manipulating the right style sheet by checking the document.styleSheets[0].href.
I think you're out of luck trying to head down that path.
Note that, for security reasons, you cannot navigate to
HTML you have downloaded to this location and you cannot
run any executable or potentially executable code, such
as script or CSS.
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh781215
Also, this blog post seems possibly helpful: http://palermo4.com/post/How-to-Use-IFrames-in-WinRT-Apps.aspx