obewds / vue-validators Goto Github PK
View Code? Open in Web Editor NEWThe @obewds/vue-validators design system component for Vue.js
Home Page: https://obewds.github.io/vue-validators/
License: MIT License
The @obewds/vue-validators design system component for Vue.js
Home Page: https://obewds.github.io/vue-validators/
License: MIT License
Run the obsolete
command to check for packages to updates:
npm obsolete
You can either update dependencies manually (copy/paste from npm obsolete
into ./package.json
), or if things are all clear to update and you want to do it all at once programmatically, use:
npm update --save
Remove the file obewds.tw.config.json
if it exists (especially if it has ...colors.info
or ...colors.caution
classes)
npm explore @obewds/obewds-tw-config -- npm run install:config
rose
replace with pink
blue
replace with cyan
violet
replace with orange
green
replace with lime
npm install lodash --save-dev
npm install @types/lodash.merge --save-dev
./src/main.ts
:From this:
// import tw from '../obewds.tw.config.json'
const app = createApp(App)
// app.provide('tw', tw)
To this:
// import merge from 'lodash/merge'
// import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
// import appTwConfig from '../obewds.tw.config.json'
const app = createApp(App)
// const tw = Object.keys( appTwConfig ).length > 0 ? merge( ObewdsTwConfig, appTwConfig ) : ObewdsTwConfig
// app.provide('tw', tw)
And this is an active version without comments. What happens here, is the user config is merged with the default config with the user one being the dominant and outputted. Otherwise if no content is found in the user config, then the output default to just the default config:
import merge from 'lodash/merge'
import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
import appTwConfig from '../obewds.tw.config.json'
const app = createApp(App)
const tw = Object.keys( appTwConfig ).length > 0 ? merge( ObewdsTwConfig, appTwConfig ) : ObewdsTwConfig
app.provide('tw', tw)
Update VS Code IDE Vue Ext Reccomendation to Vue/Volar
./.vscode/extensions.json
Change:
{
"recommendations": ["johnsoncodehk.volar"]
}
To:
{
"recommendations": ["vue.volar"]
}
buttonTypes = ['button', 'submit', 'reset']
animationDirections = ['up', 'down', 'left', 'right', '']
fontAwesome families = ['fab', 'fad', 'fal', 'far', 'fas', 'fat']
fontAwesome sizes: [
'xs',
'sm',
'1x', // '1x' is effectively size 'md' - aka icon size inherits font size
'lg',
'2x',
'3x',
'4x',
'5x',
'6x',
'7x',
'8x',
'9x',
'10x'
]
headingLevels = [1, 2, 3, 4, 5, 6]
inputTextEntryBoxTypes = [
// 'button',
// 'checkbox',
'color',
'date',
'datetime-local',
'email',
// 'file',
// 'hidden',
// 'image',
'month',
'number',
'password',
// 'radio',
// 'range',
// 'reset',
'search',
// 'submit',
'tel',
'text',
'time',
'url',
// 'week',
]
order blocks: ['bottom', 'top'],
sourceTypes
audio: ['audio/flac', 'audio/mp4', 'audio/mpeg', 'audio/ogg', 'audio/x-flac', 'audio/webm'],
image: ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/webp'],
video: ['video/mp4', 'video/ogg', 'video/webm'],
Lines 5 to 12 in 3f63c2d
Complete the following steps to complete this issue.
./package.json
file (either as dev dep or manually as peer dep depending on the component):npm install @obewds/obewds-tw-config --save-dev
npm install @obewds/vue-component-helpers --save-dev
NOTE: These dependencies may need to be stashed in either
devDependencies
orpeerDependencies
in the./package.json
file for the repo depending on the component to keep built files as small as possible!
./src/main.ts
:// add these lines
import { mergeAppConfigWithDefaults } from '@obewds/vue-component-helpers'
import appTwConfig from '../obewds.tw.config.json'
const app = createApp(App)
// add this line
const tw = mergeAppConfigWithDefaults(appTwConfig)
app.provide('tw', tw)
./scripts/cleanup.js
:fs.remove('./dist/types/components')
npm outdated
npm update
npm run publish:prep
package:prep
script above and make a quick commit of the files for GitHub, and then make another final commit of the newest ./CHANGELOG.md
file generated after running the following script:npm run publish:package
Or in the case of just needing to update the repository/docs files but not publish a new package version (IE if the dist files aren't changed at all NOR were there any changes to files present on NPM for the published package (like a README.md file) - then it's safe to go ahead and commit all changes and make a Pull Request on GitHub to merge them into the code base without publishing anything on NPM)
main
branchHave learned and tested out how to add automatic changelog logging and automated Git tagging (opening up release tags getting generated just after a publish to npm!
Parent Epic Task Link: obewds/vite-vue-ts-compo-pkg-starter#97
Install the following new dependency:
npm install auto-changelog --save-dev
./package.json
file from this:{
"scripts": {
"publish:prep": "npx rimraf dist && npm run pkg:tsbundle",
"publish:package": "npm run publish:prep && npm run pkg:org && npm run pkg:login && npm run pkg:publish",
},
}
To this:
{
"scripts": {
"changelog": "auto-changelog --package --unreleased --backfill-limit 20",
"git:tag" : "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
"publish:prep": "npx rimraf dist && npm run pkg:tsbundle",
"publish:package": "npm run publish:prep && npm run pkg:org && npm run pkg:login && npm run pkg:publish && npm run git:tag && npm run changelog"
},
}
./README.md
file and add the following link underneath the link to the repo's GitHub docs site:Or check out the [CHANGELOG](https://github.com/obewds/vite-vue-ts-compo-pkg-starter/blob/main/CHANGELOG.md) for the code base!
npm outdated
npm update
npm run publish:prep
package:prep
script above and make a quick commit of the files for GitHub, and then make another final commit of the newest ./CHANGELOG.md
file generated after running the following script:npm run publish:package
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.