jirolu-svelte

This is a collection of components I use on a regular basis packaged up for use.

Components

Text

• type ( string )
• placeholder ( string )
• value ( string )
• customClass ( string )
• disabled ( bool )
• isError ( bool )

on:input

• left-area
• right-area

Textarea

• rows ( int )
• placeholder ( string )
• value ( string )
• disabled ( bool )
• isError ( bool )

on:input

• left-area
• right-area

Option

• selected ( string )
• placeholder ( string )
• items ( array )
• disabled ( bool )
• isError ( bool )
• emptyText ( string)

on:select

• left-area

OptionWithSearch

• selected ( string )
• placeholder ( string )
• items ( array )
• disabled ( bool )
• isError ( bool )
• emptyText ( string)

on:select

• left-area

Checkbox

• checked ( bool )
• disabled ( bool )
• activeColor ( string )
• checkmarkColor ( string )
• checkmarkBorderColor ( string )

on:change

No

Switch

• checked ( bool )
• disabled ( bool )
• needValidate ( bool )
• activeColor ( string )
• bgSlider ( string )
• sliderColor ( string )

on:change

on:click

No

Use it

npm i jirolu-svelte

Use like a normal Svelte component:

<script>
	import { Text } from 'jirolu-svelte'
</script>

<Text
	type="text"
  placeholder="write something..."
	value=""
  customClass=""
  disabled={false}
  isError={false}
  on:input={(e)=>{
    console.log(e.detail)
  }}
/>

Configuration

This components uses tailwindCSS styles. you need to update the tailwind.config.cjs file from your root project folder to let the Tailwind CSS compiler know where to look for the utility classes.

...
content: [
  './src/**/*.{html,js,svelte,ts}', 
  './node_modules/jirolu-svelte/**/*.{html,js,svelte,ts}'
],
...

Packaging for NPM

Arif, this is here for you to remember how to do this 🙃

Thank Scott for let me know how to Making npm Packages with SvelteKit

Publish the project to NPM

# authenticate with npm
npm login
# bump version with npm
npm version 0.0.8
# package with sveltekit
pnpm run package
# publish
npm publish
# push tags to github
git push --tags

Publish @next package

Same procedure except use the --tag flag:

# authenticate with npm
npm login
# bump version with npm
npm version 0.0.13
# package with sveltekit
pnpm run package
# publish with tag
npm publish --tag next
# push tags to github
git push --tags

Move @next package to latest

# authenticate with npm
npm login
# move @next to latest
npm dist-tag add [email protected] latest