xpedio-svelte 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -0
- package/dist/components/Input.svelte +181 -0
- package/dist/components/Input.svelte.d.ts +31 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Svelte library
|
|
2
|
+
|
|
3
|
+
Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
|
|
4
|
+
|
|
5
|
+
Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
|
|
6
|
+
|
|
7
|
+
## Creating a project
|
|
8
|
+
|
|
9
|
+
If you're seeing this, you've probably already done this step. Congrats!
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
# create a new project in the current directory
|
|
13
|
+
npx sv create
|
|
14
|
+
|
|
15
|
+
# create a new project in my-app
|
|
16
|
+
npx sv create my-app
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
To recreate this project with the same configuration:
|
|
20
|
+
|
|
21
|
+
```sh
|
|
22
|
+
# recreate this project
|
|
23
|
+
npx sv create --template library --types jsdoc --add tailwindcss="plugins:typography,forms" sveltekit-adapter="adapter:node" --install npm xpedio-svelte
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Developing
|
|
27
|
+
|
|
28
|
+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
|
29
|
+
|
|
30
|
+
```sh
|
|
31
|
+
npm run dev
|
|
32
|
+
|
|
33
|
+
# or start the server and open the app in a new browser tab
|
|
34
|
+
npm run dev -- --open
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
|
|
38
|
+
|
|
39
|
+
## Building
|
|
40
|
+
|
|
41
|
+
To build your library:
|
|
42
|
+
|
|
43
|
+
```sh
|
|
44
|
+
npm pack
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
To create a production version of your showcase app:
|
|
48
|
+
|
|
49
|
+
```sh
|
|
50
|
+
npm run build
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
You can preview the production build with `npm run preview`.
|
|
54
|
+
|
|
55
|
+
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
|
|
56
|
+
|
|
57
|
+
## Publishing
|
|
58
|
+
|
|
59
|
+
Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
|
|
60
|
+
|
|
61
|
+
To publish your library to [npm](https://www.npmjs.com):
|
|
62
|
+
|
|
63
|
+
```sh
|
|
64
|
+
npm publish
|
|
65
|
+
```
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Version: 1.0
|
|
3
|
+
Author: Manish Bhavsar
|
|
4
|
+
Create date: 23-Dec-2025
|
|
5
|
+
-->
|
|
6
|
+
<script>
|
|
7
|
+
import * as TablerIcons from '@tabler/icons-svelte';
|
|
8
|
+
|
|
9
|
+
let {
|
|
10
|
+
options={
|
|
11
|
+
label: "Label",
|
|
12
|
+
required: false,
|
|
13
|
+
placeholder: "",
|
|
14
|
+
id: "",
|
|
15
|
+
prefix: "", //Text, Icon, Button, Link, DropDown
|
|
16
|
+
suffix: "",
|
|
17
|
+
prefix_label: "",
|
|
18
|
+
suffix_label: "",
|
|
19
|
+
class_name: "",
|
|
20
|
+
prefix_icon_lib: "tabler", //Can be image as well (tabler, image, font-awesome, bootstrap)
|
|
21
|
+
prefix_icon_name: "",
|
|
22
|
+
prefix_icon_size: 20, //Size in pixels
|
|
23
|
+
prefix_icon_stroke: 2, //Stroke width
|
|
24
|
+
prefix_icon_color: "currentColor", //Icon color
|
|
25
|
+
suffix_icon_lib: "tabler", //Can be image as well (tabler, image, font-awesome, bootstrap)
|
|
26
|
+
suffix_icon_name: "",
|
|
27
|
+
suffix_icon_size: 20, //Size in pixels
|
|
28
|
+
suffix_icon_stroke: 2, //Stroke width
|
|
29
|
+
suffix_icon_color: "currentColor", //Icon color
|
|
30
|
+
prefix_class: "",
|
|
31
|
+
suffix_class: "",
|
|
32
|
+
type: "text",
|
|
33
|
+
disabled: false,
|
|
34
|
+
readonly: false,
|
|
35
|
+
},
|
|
36
|
+
value=$bindable(""),
|
|
37
|
+
onClick=$bindable(),
|
|
38
|
+
onChange=$bindable(),
|
|
39
|
+
onPrefixClick=$bindable(),
|
|
40
|
+
onSuffixClick=$bindable(),
|
|
41
|
+
prefixValue=$bindable(""),
|
|
42
|
+
suffixValue=$bindable(""),
|
|
43
|
+
prefixData=[],
|
|
44
|
+
suffixData=[],
|
|
45
|
+
error=$bindable("")
|
|
46
|
+
} = $props();
|
|
47
|
+
|
|
48
|
+
let prefixClass = $state('');
|
|
49
|
+
let suffixClass = $state('');
|
|
50
|
+
let prefixIconComponent = $state(null);
|
|
51
|
+
let suffixIconComponent = $state(null);
|
|
52
|
+
let prefixIconProps = $state({});
|
|
53
|
+
let suffixIconProps = $state({});
|
|
54
|
+
|
|
55
|
+
$effect(() => {
|
|
56
|
+
prefixClass = options.prefix_class && options.prefix_class.trim().length > 0 ? options.prefix_class : 'default_prefix';
|
|
57
|
+
suffixClass = options.suffix_class && options.suffix_class.trim().length > 0 ? options.suffix_class : 'default_suffix';
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
$effect(() => {
|
|
61
|
+
if (options.prefix_icon_name && options.prefix_icon_lib.trim().toLowerCase() == "tabler" ) {
|
|
62
|
+
const iconKey = `Icon${options.prefix_icon_name}`;
|
|
63
|
+
prefixIconComponent = TablerIcons[iconKey] || null;
|
|
64
|
+
suffixIconComponent = TablerIcons[iconKey] || null;
|
|
65
|
+
prefixIconProps = {
|
|
66
|
+
size: parseInt(options.prefix_icon_size) || 20,
|
|
67
|
+
stroke: options.prefix_icon_stroke || 2,
|
|
68
|
+
color: options.prefix_icon_color || 'currentColor'
|
|
69
|
+
};
|
|
70
|
+
} else {
|
|
71
|
+
prefixIconComponent = null;
|
|
72
|
+
suffixIconComponent = null;
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
<div class="flex flex-col gap-1">
|
|
79
|
+
{#if options.label && options.label.trim().length > 0}
|
|
80
|
+
<label for={options.id}>
|
|
81
|
+
{options.label}
|
|
82
|
+
<span class="text-red-700"> {options.required ? "*" : ""}</span>
|
|
83
|
+
</label>
|
|
84
|
+
{/if}
|
|
85
|
+
<div class="flex">
|
|
86
|
+
{#if options.prefix && options.prefix.trim().toLowerCase() == "text"}
|
|
87
|
+
<span class={prefixClass}>
|
|
88
|
+
{ options.prefix_label }
|
|
89
|
+
</span>
|
|
90
|
+
{:else if options.prefix &&
|
|
91
|
+
(options.prefix.trim().toLowerCase() == "button" || options.prefix.trim().toLowerCase() == "link")}
|
|
92
|
+
<a href={"#"} onclick={onPrefixClick} class={prefixClass}>
|
|
93
|
+
{ options.prefix_label }
|
|
94
|
+
</a>
|
|
95
|
+
{:else if options.prefix && options.prefix.trim().toLowerCase() == "icon"}
|
|
96
|
+
{#if options.prefix_icon_lib && options.prefix_icon_lib.trim().toLowerCase() == "tabler" && prefixIconComponent}
|
|
97
|
+
<span class={prefixClass}>
|
|
98
|
+
<svelte:component this={prefixIconComponent} {...prefixIconProps}/>
|
|
99
|
+
<svelte:component this={suffixIconComponent} {...prefixIconProps}/>
|
|
100
|
+
</span>
|
|
101
|
+
{:else if options.prefix_icon_lib && options.prefix_icon_lib.trim().toLowerCase() == "image"}
|
|
102
|
+
<span class={prefixClass}>
|
|
103
|
+
<img src={options.prefix_icon_name} alt="" srcset="" style={`width: ${options.prefix_icon_size}`}>
|
|
104
|
+
</span>
|
|
105
|
+
{/if}
|
|
106
|
+
{:else if options.prefix && options.prefix.trim().toLowerCase() == "dropdown"}
|
|
107
|
+
<select bind:value={prefixValue} class="right-no-border">
|
|
108
|
+
{#each prefixData as pd}
|
|
109
|
+
<option value={pd}>{pd}</option>
|
|
110
|
+
{/each}
|
|
111
|
+
</select>
|
|
112
|
+
{/if}
|
|
113
|
+
|
|
114
|
+
<input bind:value={value} oninput={onChange} placeholder={options?.placeholder} class={options.class_name}
|
|
115
|
+
class:rounded={!options.prefix && !options.suffix} type={options.type} disabled={options.disabled}
|
|
116
|
+
readonly={options.readonly} required={options.required}
|
|
117
|
+
>
|
|
118
|
+
|
|
119
|
+
{#if options.suffix && options.suffix.trim().toLowerCase() == "text"}
|
|
120
|
+
<span class={suffixClass}>
|
|
121
|
+
{ options.suffix_label }
|
|
122
|
+
</span>
|
|
123
|
+
{:else if options.suffix &&
|
|
124
|
+
(options.suffix.trim().toLowerCase() == "button" || options.suffix.trim().toLowerCase() == "link")}
|
|
125
|
+
<a href={"#"} onclick={onsuffixClick} class={suffixClass}>
|
|
126
|
+
{ options.suffix_label }
|
|
127
|
+
</a>
|
|
128
|
+
{:else if options.suffix && options.suffix.trim().toLowerCase() == "icon"}
|
|
129
|
+
{#if options.suffix_icon_lib && options.suffix_icon_lib.trim().toLowerCase() == "tabler" && suffixIconComponent}
|
|
130
|
+
<span class={suffixClass}>
|
|
131
|
+
<svelte:component this={suffixIconComponent} {...suffixIconProps}/>
|
|
132
|
+
</span>
|
|
133
|
+
{:else if options.suffix_icon_lib && options.suffix_icon_lib.trim().toLowerCase() == "image"}
|
|
134
|
+
<span class={suffixClass}>
|
|
135
|
+
<img src={options.suffix_icon_name} alt="" srcset="" style={`width: ${options.suffix_icon_size}`}>
|
|
136
|
+
</span>
|
|
137
|
+
{/if}
|
|
138
|
+
{:else if options.suffix && options.suffix.trim().toLowerCase() == "dropdown"}
|
|
139
|
+
<select bind:value={suffixValue}>
|
|
140
|
+
{#each suffixData as pd}
|
|
141
|
+
<option value={pd}>{pd}</option>
|
|
142
|
+
{/each}
|
|
143
|
+
</select>
|
|
144
|
+
{/if}
|
|
145
|
+
</div>
|
|
146
|
+
{#if error && error.trim() != ""}
|
|
147
|
+
<span class="text-red-700 italic">{error}</span>
|
|
148
|
+
{/if}
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<style>
|
|
152
|
+
.right-no-border {
|
|
153
|
+
border-top-right-radius: 0;
|
|
154
|
+
border-bottom-right-radius: 0;
|
|
155
|
+
border-right: 0 !important;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.default_prefix {
|
|
159
|
+
border: 1px solid #a5a5a5;
|
|
160
|
+
border-top-left-radius: 4px;
|
|
161
|
+
border-bottom-left-radius: 4px;
|
|
162
|
+
border-right: none;
|
|
163
|
+
display: flex;
|
|
164
|
+
justify-content: center;
|
|
165
|
+
align-items: center;
|
|
166
|
+
padding: 2px 5px;
|
|
167
|
+
font-size: 14px;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.default_suffix {
|
|
171
|
+
border: 1px solid #a5a5a5;
|
|
172
|
+
border-top-right-radius: 4px;
|
|
173
|
+
border-bottom-right-radius: 4px;
|
|
174
|
+
border-left: none;
|
|
175
|
+
display: flex;
|
|
176
|
+
justify-content: center;
|
|
177
|
+
align-items: center;
|
|
178
|
+
padding: 2px 5px;
|
|
179
|
+
font-size: 14px;
|
|
180
|
+
}
|
|
181
|
+
</style>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export default Input;
|
|
2
|
+
type Input = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const Input: import("svelte").Component<{
|
|
7
|
+
options?: Record<string, any>;
|
|
8
|
+
value?: string;
|
|
9
|
+
onClick?: any;
|
|
10
|
+
onChange?: any;
|
|
11
|
+
onPrefixClick?: any;
|
|
12
|
+
onSuffixClick?: any;
|
|
13
|
+
prefixValue?: string;
|
|
14
|
+
suffixValue?: string;
|
|
15
|
+
prefixData?: any[];
|
|
16
|
+
suffixData?: any[];
|
|
17
|
+
error?: string;
|
|
18
|
+
}, {}, "value" | "onClick" | "onChange" | "onPrefixClick" | "onSuffixClick" | "prefixValue" | "suffixValue" | "error">;
|
|
19
|
+
type $$ComponentProps = {
|
|
20
|
+
options?: Record<string, any>;
|
|
21
|
+
value?: string;
|
|
22
|
+
onClick?: any;
|
|
23
|
+
onChange?: any;
|
|
24
|
+
onPrefixClick?: any;
|
|
25
|
+
onSuffixClick?: any;
|
|
26
|
+
prefixValue?: string;
|
|
27
|
+
suffixValue?: string;
|
|
28
|
+
prefixData?: any[];
|
|
29
|
+
suffixData?: any[];
|
|
30
|
+
error?: string;
|
|
31
|
+
};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Input } from "./components/Input.svelte";
|
package/dist/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "xpedio-svelte",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"author": "Manish Bhavsare",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite dev",
|
|
8
|
+
"build": "vite build && npm run prepack",
|
|
9
|
+
"preview": "vite preview",
|
|
10
|
+
"prepare": "svelte-kit sync || echo ''",
|
|
11
|
+
"prepack": "svelte-kit sync && svelte-package && publint",
|
|
12
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
|
13
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
|
14
|
+
"package": "svelte-package && publint",
|
|
15
|
+
"prepublishOnly": "npm run package"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"!dist/**/*.test.*",
|
|
20
|
+
"!dist/**/*.spec.*"
|
|
21
|
+
],
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"**/*.css"
|
|
24
|
+
],
|
|
25
|
+
"svelte": "./dist/index.js",
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"type": "module",
|
|
28
|
+
"exports": {
|
|
29
|
+
".": {
|
|
30
|
+
"types": "./dist/index.d.ts",
|
|
31
|
+
"svelte": "./dist/index.js",
|
|
32
|
+
"default": "./dist/index.js"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"peerDependencies": {
|
|
36
|
+
"svelte": "^5.0.0"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@sveltejs/adapter-node": "^5.5.2",
|
|
40
|
+
"@sveltejs/kit": "^2.50.2",
|
|
41
|
+
"@sveltejs/package": "^2.5.7",
|
|
42
|
+
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
|
43
|
+
"@tailwindcss/forms": "^0.5.11",
|
|
44
|
+
"@tailwindcss/typography": "^0.5.19",
|
|
45
|
+
"@tailwindcss/vite": "^4.1.18",
|
|
46
|
+
"publint": "^0.3.17",
|
|
47
|
+
"svelte": "^5.49.2",
|
|
48
|
+
"svelte-check": "^4.3.6",
|
|
49
|
+
"tailwindcss": "^4.1.18",
|
|
50
|
+
"typescript": "^5.9.3",
|
|
51
|
+
"vite": "^7.3.1"
|
|
52
|
+
},
|
|
53
|
+
"keywords": [
|
|
54
|
+
"svelte"
|
|
55
|
+
],
|
|
56
|
+
"dependencies": {
|
|
57
|
+
"axios": "^1.13.5",
|
|
58
|
+
"crypto-js": "^4.2.0",
|
|
59
|
+
"moment": "^2.30.1",
|
|
60
|
+
"multer": "^2.0.2",
|
|
61
|
+
"nanoid": "^5.1.6",
|
|
62
|
+
"underscore": "^1.13.7",
|
|
63
|
+
"uuid4": "^2.0.3"
|
|
64
|
+
}
|
|
65
|
+
}
|