@salla.sa/twilight-bundles 0.1.5 → 0.1.30
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/bin/tw-delete-component.js +197 -0
- package/bin/tw-init.js +62 -29
- package/dist/twilight-bundles.css +1 -1
- package/dist/vite-plugins/_demo.cjs +4 -4
- package/dist/vite-plugins/_demo.js +38 -42
- package/dist/vite-plugins/demo.cjs +4 -4
- package/dist/vite-plugins/demo.js +39 -39
- package/package.json +3 -2
- package/types/global.d.ts +1 -1
- /package/bin/{tw-component.js → tw-create-component.js} +0 -0
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import fs from 'fs';
|
|
4
|
+
import path from 'path';
|
|
5
|
+
import readline from 'readline';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Gets list of available components from src/components directory
|
|
9
|
+
* @param {string} projectRoot - Root directory of the project
|
|
10
|
+
* @returns {string[]} - Array of component names
|
|
11
|
+
*/
|
|
12
|
+
function getAvailableComponents(projectRoot) {
|
|
13
|
+
const componentsDir = path.join(projectRoot, 'src', 'components');
|
|
14
|
+
|
|
15
|
+
if (!fs.existsSync(componentsDir)) {
|
|
16
|
+
return [];
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return fs.readdirSync(componentsDir)
|
|
20
|
+
.filter(item => {
|
|
21
|
+
const itemPath = path.join(componentsDir, item);
|
|
22
|
+
return fs.statSync(itemPath).isDirectory();
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Deletes a component directory and its contents
|
|
28
|
+
* @param {string} componentName - Name of the component to delete
|
|
29
|
+
* @param {string} projectRoot - Root directory of the project
|
|
30
|
+
* @returns {boolean} - True if deletion was successful
|
|
31
|
+
*/
|
|
32
|
+
function deleteComponentFiles(componentName, projectRoot) {
|
|
33
|
+
const componentDir = path.join(projectRoot, 'src', 'components', componentName);
|
|
34
|
+
|
|
35
|
+
if (!fs.existsSync(componentDir)) {
|
|
36
|
+
console.error(`❌ Component directory "${componentName}" not found`);
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
try {
|
|
41
|
+
fs.rmSync(componentDir, { recursive: true, force: true });
|
|
42
|
+
console.log(`✅ Component files deleted from src/components/${componentName}`);
|
|
43
|
+
return true;
|
|
44
|
+
} catch (error) {
|
|
45
|
+
console.error(`❌ Error deleting component files: ${error.message}`);
|
|
46
|
+
return false;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Removes component from twilight-bundle.json
|
|
52
|
+
* @param {string} componentName - Name of the component to remove
|
|
53
|
+
* @param {string} projectRoot - Root directory of the project
|
|
54
|
+
* @returns {boolean} - True if removal was successful
|
|
55
|
+
*/
|
|
56
|
+
function removeComponentFromBundle(componentName, projectRoot) {
|
|
57
|
+
const bundlePath = path.join(projectRoot, 'twilight-bundle.json');
|
|
58
|
+
|
|
59
|
+
if (!fs.existsSync(bundlePath)) {
|
|
60
|
+
console.error('❌ twilight-bundle.json not found');
|
|
61
|
+
return false;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
try {
|
|
65
|
+
const bundleContent = JSON.parse(fs.readFileSync(bundlePath, 'utf8'));
|
|
66
|
+
|
|
67
|
+
if (!bundleContent.components || !Array.isArray(bundleContent.components)) {
|
|
68
|
+
console.error('❌ No components found in twilight-bundle.json');
|
|
69
|
+
return false;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const initialLength = bundleContent.components.length;
|
|
73
|
+
bundleContent.components = bundleContent.components.filter(
|
|
74
|
+
component => component.name !== componentName
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
if (bundleContent.components.length === initialLength) {
|
|
78
|
+
console.warn(`⚠️ Component "${componentName}" not found in twilight-bundle.json`);
|
|
79
|
+
return false;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
fs.writeFileSync(bundlePath, JSON.stringify(bundleContent, null, 4));
|
|
83
|
+
console.log(`✅ Component removed from twilight-bundle.json`);
|
|
84
|
+
return true;
|
|
85
|
+
} catch (error) {
|
|
86
|
+
console.error(`❌ Error updating twilight-bundle.json: ${error.message}`);
|
|
87
|
+
return false;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Prompts user to select a component from the list
|
|
93
|
+
* @param {string[]} components - Array of component names
|
|
94
|
+
* @param {Function} callback - Callback function to handle selection
|
|
95
|
+
*/
|
|
96
|
+
function promptComponentSelection(components, callback) {
|
|
97
|
+
const rl = readline.createInterface({
|
|
98
|
+
input: process.stdin,
|
|
99
|
+
output: process.stdout
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
console.log('\n📦 Available components:\n');
|
|
103
|
+
components.forEach((component, index) => {
|
|
104
|
+
console.log(` ${index + 1}. ${component}`);
|
|
105
|
+
});
|
|
106
|
+
console.log('');
|
|
107
|
+
|
|
108
|
+
rl.question('Select component number to delete (or press Ctrl+C to cancel): ', (answer) => {
|
|
109
|
+
const index = parseInt(answer, 10) - 1;
|
|
110
|
+
|
|
111
|
+
if (isNaN(index) || index < 0 || index >= components.length) {
|
|
112
|
+
console.error('❌ Invalid selection');
|
|
113
|
+
rl.close();
|
|
114
|
+
callback(null);
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
const selectedComponent = components[index];
|
|
119
|
+
|
|
120
|
+
rl.question(`\n⚠️ Are you sure you want to delete "${selectedComponent}"? This action cannot be undone. (yes/no): `, (confirmation) => {
|
|
121
|
+
rl.close();
|
|
122
|
+
if (confirmation.toLowerCase() === 'yes' || confirmation.toLowerCase() === 'y') {
|
|
123
|
+
callback(selectedComponent);
|
|
124
|
+
} else {
|
|
125
|
+
console.log('❌ Deletion cancelled');
|
|
126
|
+
callback(null);
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Deletes a component and removes it from twilight-bundle.json
|
|
134
|
+
* @param {string} componentName - Name of the component to delete
|
|
135
|
+
* @param {string} projectRoot - Root directory of the project
|
|
136
|
+
*/
|
|
137
|
+
function deleteComponent(componentName, projectRoot) {
|
|
138
|
+
console.log(`\n🗑️ Deleting component "${componentName}"...\n`);
|
|
139
|
+
|
|
140
|
+
const filesDeleted = deleteComponentFiles(componentName, projectRoot);
|
|
141
|
+
const removedFromBundle = removeComponentFromBundle(componentName, projectRoot);
|
|
142
|
+
|
|
143
|
+
if (filesDeleted || removedFromBundle) {
|
|
144
|
+
console.log(`\n🎉 Component "${componentName}" deleted successfully!\n`);
|
|
145
|
+
} else {
|
|
146
|
+
console.log(`\n❌ Failed to delete component "${componentName}"\n`);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* Main function to delete a component
|
|
152
|
+
* @param {string} [componentNameArg] - Optional component name from command line
|
|
153
|
+
*/
|
|
154
|
+
function main(componentNameArg) {
|
|
155
|
+
const projectRoot = process.cwd();
|
|
156
|
+
|
|
157
|
+
console.log('🗑️ Salla Twilight Component Remover 🗑️\n');
|
|
158
|
+
|
|
159
|
+
// If component name is provided as argument, use it directly
|
|
160
|
+
if (componentNameArg) {
|
|
161
|
+
const rl = readline.createInterface({
|
|
162
|
+
input: process.stdin,
|
|
163
|
+
output: process.stdout
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
rl.question(`⚠️ Are you sure you want to delete "${componentNameArg}"? This action cannot be undone. (yes/no): `, (confirmation) => {
|
|
167
|
+
rl.close();
|
|
168
|
+
if (confirmation.toLowerCase() === 'yes' || confirmation.toLowerCase() === 'y') {
|
|
169
|
+
deleteComponent(componentNameArg, projectRoot);
|
|
170
|
+
} else {
|
|
171
|
+
console.log('❌ Deletion cancelled');
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// Otherwise, show list of components and prompt for selection
|
|
178
|
+
const components = getAvailableComponents(projectRoot);
|
|
179
|
+
|
|
180
|
+
if (components.length === 0) {
|
|
181
|
+
console.error('❌ No components found in src/components/');
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
promptComponentSelection(components, (selectedComponent) => {
|
|
186
|
+
if (selectedComponent) {
|
|
187
|
+
deleteComponent(selectedComponent, projectRoot);
|
|
188
|
+
}
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// Parse command-line arguments and run the script
|
|
193
|
+
const args = process.argv.slice(2);
|
|
194
|
+
const componentName = args[0]; // First argument is the component name
|
|
195
|
+
|
|
196
|
+
// Run the script with the parsed arguments
|
|
197
|
+
main(componentName);
|
package/bin/tw-init.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import fs from 'fs';
|
|
4
4
|
import path from 'path';
|
|
5
|
-
import { execSync } from 'child_process';
|
|
5
|
+
import { execSync, spawn } from 'child_process';
|
|
6
6
|
import readline from 'readline';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -61,29 +61,14 @@ function installStarterKit(projectRoot) {
|
|
|
61
61
|
|
|
62
62
|
console.log(`📦 Running: ${installCommand}`);
|
|
63
63
|
console.log('⚠️ This may take a moment...');
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
rl.close();
|
|
73
|
-
if (answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes') {
|
|
74
|
-
try {
|
|
75
|
-
execSync(installCommand, { stdio: 'inherit', cwd: projectRoot });
|
|
76
|
-
console.log('✅ @salla.sa/twilight-bundles-starter-kit installed successfully');
|
|
77
|
-
resolve(true);
|
|
78
|
-
} catch (error) {
|
|
79
|
-
console.error('❌ Failed to install @salla.sa/twilight-bundles-starter-kit:', error.message);
|
|
80
|
-
resolve(false);
|
|
81
|
-
}
|
|
82
|
-
} else {
|
|
83
|
-
console.log('❌ Installation cancelled');
|
|
84
|
-
process.exit(0);
|
|
85
|
-
}
|
|
86
|
-
});
|
|
64
|
+
try {
|
|
65
|
+
execSync(installCommand, { stdio: 'inherit', cwd: projectRoot });
|
|
66
|
+
console.log('✅ @salla.sa/twilight-bundles-starter-kit installed successfully');
|
|
67
|
+
resolve(true);
|
|
68
|
+
} catch (error) {
|
|
69
|
+
console.error('❌ Failed to install @salla.sa/twilight-bundles-starter-kit:', error.message);
|
|
70
|
+
resolve(false);
|
|
71
|
+
}
|
|
87
72
|
} catch (error) {
|
|
88
73
|
console.error('❌ Failed to install @salla.sa/twilight-bundles-starter-kit:', error.message);
|
|
89
74
|
resolve(false);
|
|
@@ -239,7 +224,7 @@ async function initTwilightBundles(projectRootArg) {
|
|
|
239
224
|
// Check if twilight-bundle.json already exists
|
|
240
225
|
if (twilightBundlesExists(projectRoot)) {
|
|
241
226
|
console.log('⚠️ This directory already contains a Twilight Bundles project (twilight-bundle.json exists)');
|
|
242
|
-
console.log('If you want to start a new project, please create a new directory and run this command again
|
|
227
|
+
console.log('If you want to start a new project, please create a new directory and run this command again, or if want new component run `pnpm tw-component`.');
|
|
243
228
|
return false;
|
|
244
229
|
}
|
|
245
230
|
|
|
@@ -265,10 +250,58 @@ async function initTwilightBundles(projectRootArg) {
|
|
|
265
250
|
}
|
|
266
251
|
|
|
267
252
|
console.log('\n🎉 Twilight Bundles project initialized successfully!\n');
|
|
268
|
-
|
|
269
|
-
console.log('
|
|
270
|
-
|
|
271
|
-
|
|
253
|
+
|
|
254
|
+
console.log('Installing dependencies...');
|
|
255
|
+
execSync('pnpm install', { stdio: 'inherit' });
|
|
256
|
+
|
|
257
|
+
console.log('\nStarting development server...\n');
|
|
258
|
+
|
|
259
|
+
// Start dev server asynchronously so it doesn't block
|
|
260
|
+
const devServer = spawn('pnpm', ['run', 'dev'], {
|
|
261
|
+
stdio: 'inherit',
|
|
262
|
+
cwd: projectRoot,
|
|
263
|
+
shell: true
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
// Wait a moment for the server to start outputting
|
|
267
|
+
await new Promise(resolve => setTimeout(resolve, 3000));
|
|
268
|
+
|
|
269
|
+
// Show the helpful message while the server is running
|
|
270
|
+
console.log('\n' + '='.repeat(60));
|
|
271
|
+
console.log('🎯 Next Steps & Quick Tips');
|
|
272
|
+
console.log('='.repeat(60) + '\n');
|
|
273
|
+
|
|
274
|
+
console.log('🔧 Development Commands:');
|
|
275
|
+
console.log(' • pnpm dev - Start development server with hot reload');
|
|
276
|
+
console.log(' • pnpm build - Build bundles for production');
|
|
277
|
+
|
|
278
|
+
console.log('📚 Documentation:');
|
|
279
|
+
console.log(' • README.md - Project overview and setup');
|
|
280
|
+
console.log(' • src/ - Your bundle components');
|
|
281
|
+
console.log(' • twilight-bundle.json - Bundle configuration\n');
|
|
282
|
+
|
|
283
|
+
console.log('💡 Pro Tips:');
|
|
284
|
+
console.log(' • Edit files in src/ to see changes instantly');
|
|
285
|
+
console.log(' • Check twilight-bundle.json for bundle settings');
|
|
286
|
+
console.log(' • Use TypeScript for better type safety\n');
|
|
287
|
+
|
|
288
|
+
console.log('📝 Keyboard Shortcuts (in dev mode):');
|
|
289
|
+
console.log(' • q + Enter - Quit the dev server safely');
|
|
290
|
+
console.log(' • r + Enter - Restart the dev server');
|
|
291
|
+
console.log(' • o + Enter - Open in browser');
|
|
292
|
+
console.log(' • Ctrl+C - Force Stop the development server\n');
|
|
293
|
+
|
|
294
|
+
console.log('📦 Component Management:');
|
|
295
|
+
console.log(' pnpm tw-create-component <component-name> - Create a new component');
|
|
296
|
+
console.log(' pnpm tw-delete-component <component-name> - Delete a component');
|
|
297
|
+
console.log(' Example: pnpm tw-create-component tw-my-button\n');
|
|
298
|
+
|
|
299
|
+
// Handle server exit
|
|
300
|
+
devServer.on('exit', (code) => {
|
|
301
|
+
if (code !== 0 && code !== null) {
|
|
302
|
+
//console.log(`\n⚠️ Development server exited with code ${code}`);
|
|
303
|
+
}
|
|
304
|
+
});
|
|
272
305
|
|
|
273
306
|
return true;
|
|
274
307
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--font-main: "PingARLT";--color-primary-50: rgb(186, 243, 230);--color-primary-100: rgb(120, 232, 206);--color-primary-900: rgb(0, 73, 86);--color-primary: rgb(0, 78, 92)}:root[data-theme=dark]{--bg-primary: #1E1E1E;--bg-secondary: #2A2A2A;--text-primary: #FFFFFF;--text-secondary: #9CA3AF;--border-color: #333333;--color-primary: #1d1e20;--component-title: #baf3e5}:root[data-theme=light]{--bg-primary: #FFFFFF;--bg-secondary: #F8F9FA;--text-primary: #1E1E1E;--text-secondary: #4B5563;--border-color: #E5E7EB;--component-title: #004e5c}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-main)}body{min-height:100vh}header{background-color:var(--color-primary);padding:.75rem 0;box-shadow:0 2px 4px #0000001a}.container{max-width:1200px;margin:0 auto;padding:0 .75rem}.header-content{display:flex;align-items:center;justify-content:space-between}.logo-container{display:flex;align-items:center;gap:1rem}.logo{height:40px}.logo img{height:100%;width:auto}.title{color:#fff;font-size:1.25rem;font-weight:500;margin:0}.actions{display:flex;gap:1rem;align-items:center}.actions button{background:transparent;border:none;color:#fff;cursor:pointer;padding:.5rem;border-radius:4px;transition:color .2s ease;font-size:1rem;display:flex;align-items:center;gap:.5rem}.actions button:hover{color:rgb(var(--color-primary-100))}.theme-icon{transition:transform .3s ease}[data-theme=dark] .theme-icon.moon,[data-theme=light] .theme-icon.sun{display:none}.lang-icon{transition:transform .3s ease}[dir=rtl] .lang-icon{transform:scaleX(-1)}.lang-code{font-size:.875rem;font-weight:500;text-transform:uppercase}main{padding:1.5rem 0}.component-card{min-height:60px;position:relative}.component-card-header{position:absolute;z-index:10;top:50%;transform:translateY(-50%) translate(-100%);left:0;opacity:0;transition:all .3s ease}.component-card:hover .component-card-header{opacity:1;transform:translateY(-50%) translate(0)}.component-card-actions{display:flex;flex-direction:column;gap:.5rem;background:#fff;padding:10px;border-radius:0 5px 5px 0;box-shadow:11px 0 20px -10px #0000000d,8px 3px 13px -4px #0000000d}.component-visibility-btn,.component-settings-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.component-visibility-btn:hover,.component-settings-btn:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.component-card.hidden{opacity:.5;position:relative}.component-card.hidden:after{content:"Hidden";position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:#0000001a;font-size:1.5rem;font-weight:700;color:var(--text-secondary);z-index:10}.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .3s ease}.drawer-overlay.active{opacity:1;visibility:visible}.drawer{position:fixed;top:0;bottom:0;background-color:var(--bg-primary);width:400px;max-width:100%;z-index:1000;box-shadow:0 0 10px #0000001a;transition:transform .3s ease;overflow-y:auto;opacity:0;visibility:hidden}#settingsDrawer{width:500px}.drawer.active{opacity:1;visibility:visible}[dir=ltr] .drawer{right:0;transform:translate(100%)}[dir=rtl] .drawer{left:0;transform:translate(-100%)}.drawer.active{transform:translate(0)}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary);box-shadow:0 2px 4px #0000000d}.drawer-header h3{margin:0;color:var(--text-primary);flex:1;font-size:1.25rem;font-weight:600;letter-spacing:.01em}.drawer-actions{display:flex;align-items:center;gap:.75rem}.drawer-close,.drawer-reset{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:1.25rem;color:var(--text-secondary);padding:.5rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.drawer-close:hover,.drawer-reset:hover{background-color:var(--bg-secondary);color:var(--text-primary);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.drawer-close:active,.drawer-reset:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.drawer-reset{color:var(--color-primary)}.drawer-close{color:var(--color-danger, var(--text-secondary))}.drawer-content{padding:1rem}.filter-actions{display:flex;gap:1rem;margin-bottom:1rem}.btn{padding:.5rem 1rem;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:all .2s ease}.btn-primary:hover{background-color:var(--color-primary-50)}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--bg-primary)}.component-visibility-list{display:flex;flex-direction:column;gap:.75rem;overflow-y:auto}.visibility-item{padding:.5rem;border-radius:4px;transition:background-color .2s ease}.visibility-item:hover{background-color:var(--bg-secondary)}.visibility-item label{display:flex;align-items:center;gap:.75rem;cursor:pointer;color:var(--text-primary)}.visibility-checkbox{width:1.25rem;height:1.25rem;cursor:pointer}.settings-tabs{display:flex;flex-direction:column;gap:1.5rem}.settings-tab-headers{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.settings-tab-btn{padding:.75rem 1rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;font-weight:500;white-space:nowrap;transition:all .2s ease}.settings-tab-btn:hover{color:var(--text-primary)}.settings-tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.settings-tab-content{display:none;animation:fadeIn .3s ease}.settings-tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-section-title{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:var(--text-primary)}.settings-section-desc{margin:0 0 1.5rem;font-size:.9rem;color:var(--text-secondary)}.settings-form-group{margin-bottom:1.25rem}.settings-form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-primary)}.settings-input,.settings-textarea{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);color:var(--text-primary);font-family:inherit;font-size:.9rem;transition:border-color .2s ease}.settings-input:focus,.settings-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-50)}.settings-textarea{resize:vertical;min-height:100px;direction:ltr;font-family:monospace;color:#888}.settings-form-group small{display:block;margin-top:.25rem;font-size:.8rem;color:var(--text-secondary)}.settings-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border-color)}.settings-languages-container{max-height:200px;overflow-y:auto;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary)}.settings-languages-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:.5rem;padding:.75rem}.settings-language-item{display:flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.settings-language-item:hover{background-color:var(--bg-secondary)}.settings-language-item input{margin:0}.settings-language-item span{font-size:.85rem}.grid-columns-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.grid-preset-btn{display:flex;align-items:center;justify-content:center;width:60px;height:40px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);cursor:pointer;transition:all .2s ease}.grid-preset-btn:hover{background-color:var(--bg-secondary);transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.grid-preset-btn.active{border-color:var(--color-primary);background-color:var(--color-primary-50)}.grid-preset-icon{font-size:1.25rem;color:var(--text-primary);letter-spacing:-2px}.custom-grid-columns-container{margin-top:.75rem}.settings-input-with-unit{display:flex;align-items:center;gap:.5rem}.settings-input-number{flex:1}.settings-input-unit{width:80px;padding:.75rem;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);color:var(--text-primary);font-family:inherit;font-size:.9rem}.component-card-empty{min-height:200px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:8px;transition:all .3s ease}.component-card-empty:hover{border-color:var(--color-primary-100);background-color:var(--bg-primary)}.empty-state{text-align:center;padding:2rem;max-width:300px}.empty-state-icon{margin-bottom:1rem}.empty-state-icon i{font-size:3rem;color:var(--text-secondary);opacity:.6}.empty-state-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem;text-transform:capitalize}.empty-state-description{font-size:.9rem;color:var(--text-secondary);line-height:1.5;margin-bottom:1.5rem}.empty-state-actions{display:flex;justify-content:center}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:6px;font-family:inherit;font-weight:500;text-decoration:none;cursor:pointer;transition:all .2s ease;font-size:.9rem}.btn-primary{background-color:var(--color-primary-100);color:var(--color-primary-900)}.btn-primary:hover{background-color:var(--color-primary-50);transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.btn-sm{padding:.5rem 1rem;font-size:.85rem}.btn i{font-size:.9em}.drawer-empty-state{min-height:400px;display:flex;align-items:center;justify-content:center;padding:2rem}.drawer-empty-state .empty-state{max-width:400px}.drawer-empty-state .empty-state-icon i{font-size:4rem;color:var(--text-secondary);opacity:.5}.drawer-empty-state .empty-state-title{font-size:1.5rem;margin-bottom:1rem;text-transform:capitalize}.drawer-empty-state .empty-state-description{margin-bottom:1rem;line-height:1.6}.drawer-empty-state .empty-state-actions{margin-top:2rem}.drawer-empty-state .btn,.drawer-empty-state .btn:hover{text-decoration:none}
|
|
1
|
+
:root{--font-main: "PingARLT";--color-primary-50: rgb(186, 243, 230);--color-primary-100: rgb(120, 232, 206);--color-primary-900: rgb(0, 73, 86);--color-primary: rgb(0, 78, 92)}:root[data-theme=dark]{--bg-primary: #1E1E1E;--bg-secondary: #2A2A2A;--text-primary: #FFFFFF;--text-secondary: #9CA3AF;--border-color: #333333;--color-primary: #1d1e20;--component-title: #baf3e5}:root[data-theme=light]{--bg-primary: #FFFFFF;--bg-secondary: #F8F9FA;--text-primary: #1E1E1E;--text-secondary: #4B5563;--border-color: #E5E7EB;--component-title: #004e5c}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-main)}body{min-height:100vh;background-color:var(--bg-secondary)}header{background-color:var(--color-primary);padding:.75rem 0;box-shadow:0 2px 4px #0000001a}.container{max-width:1200px;margin:0 auto;padding:0 .75rem}.header-content{display:flex;align-items:center;justify-content:space-between}.logo-container{display:flex;align-items:center;gap:1rem}.logo{height:40px}.logo img{height:100%;width:auto}.title{color:#fff;font-size:1.25rem;font-weight:500;margin:0}.actions{display:flex;gap:1rem;align-items:center}.actions button{background:transparent;border:none;color:#fff;cursor:pointer;padding:.5rem;border-radius:4px;transition:color .2s ease;font-size:1rem;display:flex;align-items:center;gap:.5rem}.actions button:hover{color:rgb(var(--color-primary-100))}.theme-icon{transition:transform .3s ease}[data-theme=dark] .theme-icon.moon,[data-theme=light] .theme-icon.sun{display:none}.lang-icon{transition:transform .3s ease}[dir=rtl] .lang-icon{transform:scaleX(-1)}.lang-code{font-size:.875rem;font-weight:500;text-transform:uppercase}main{padding:1.5rem 0}.component-card{min-height:60px;position:relative}.component-card-header{position:absolute;z-index:10;top:50%;transform:translateY(-50%) translate(-100%);left:0;opacity:0;transition:all .3s ease}.component-card:hover .component-card-header{opacity:1;transform:translateY(-50%) translate(0)}.component-card-actions{display:flex;flex-direction:column;gap:.5rem;background:#fff;padding:10px;border-radius:0 5px 5px 0;box-shadow:11px 0 20px -10px #0000000d,8px 3px 13px -4px #0000000d}.component-visibility-btn,.component-settings-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.component-visibility-btn:hover,.component-settings-btn:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.component-card.hidden{opacity:.5;position:relative}.component-card.hidden:after{content:"Hidden";position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:#0000001a;font-size:1.5rem;font-weight:700;color:var(--text-secondary);z-index:10}.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .3s ease}.drawer-overlay.active{opacity:1;visibility:visible}.drawer{position:fixed;top:0;bottom:0;background-color:var(--bg-primary);width:400px;max-width:100%;z-index:1000;box-shadow:0 0 10px #0000001a;transition:transform .3s ease;overflow-y:auto;opacity:0;visibility:hidden}#settingsDrawer{width:500px}.drawer.active{opacity:1;visibility:visible}[dir=ltr] .drawer{right:0;transform:translate(100%)}[dir=rtl] .drawer{left:0;transform:translate(-100%)}.drawer.active{transform:translate(0)}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary);box-shadow:0 2px 4px #0000000d}.drawer-header h3{margin:0;color:var(--text-primary);flex:1;font-size:1.25rem;font-weight:600;letter-spacing:.01em}.drawer-actions{display:flex;align-items:center;gap:.75rem}.drawer-close,.drawer-reset{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:1.25rem;color:var(--text-secondary);padding:.5rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.drawer-close:hover,.drawer-reset:hover{background-color:var(--bg-secondary);color:var(--text-primary);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.drawer-close:active,.drawer-reset:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.drawer-reset{color:var(--color-primary)}.drawer-close{color:var(--color-danger, var(--text-secondary))}.drawer-content{padding:1rem}.filter-actions{display:flex;gap:1rem;margin-bottom:1rem}.btn{padding:.5rem 1rem;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:all .2s ease}.btn-primary:hover{background-color:var(--color-primary-50)}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--bg-primary)}.component-visibility-list{display:flex;flex-direction:column;gap:.75rem;overflow-y:auto}.visibility-item{padding:.5rem;border-radius:4px;transition:background-color .2s ease}.visibility-item:hover{background-color:var(--bg-secondary)}.visibility-item label{display:flex;align-items:center;gap:.75rem;cursor:pointer;color:var(--text-primary)}.visibility-checkbox{width:1.25rem;height:1.25rem;cursor:pointer}.settings-tabs{display:flex;flex-direction:column;gap:1.5rem}.settings-tab-headers{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.settings-tab-btn{padding:.75rem 1rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;font-weight:500;white-space:nowrap;transition:all .2s ease}.settings-tab-btn:hover{color:var(--text-primary)}.settings-tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.settings-tab-content{display:none;animation:fadeIn .3s ease}.settings-tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-section-title{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:var(--text-primary)}.settings-section-desc{margin:0 0 1.5rem;font-size:.9rem;color:var(--text-secondary)}.settings-form-group{margin-bottom:1.25rem}.settings-form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-primary)}.settings-input,.settings-textarea{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);color:var(--text-primary);font-family:inherit;font-size:.9rem;transition:border-color .2s ease}.settings-input:focus,.settings-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-50)}.settings-textarea{resize:vertical;min-height:100px;direction:ltr;font-family:monospace;color:#888}.settings-form-group small{display:block;margin-top:.25rem;font-size:.8rem;color:var(--text-secondary)}.settings-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border-color)}.settings-languages-container{max-height:200px;overflow-y:auto;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary)}.settings-languages-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:.5rem;padding:.75rem}.settings-language-item{display:flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.settings-language-item:hover{background-color:var(--bg-secondary)}.settings-language-item input{margin:0}.settings-language-item span{font-size:.85rem}.grid-columns-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.grid-preset-btn{display:flex;align-items:center;justify-content:center;width:60px;height:40px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);cursor:pointer;transition:all .2s ease}.grid-preset-btn:hover{background-color:var(--bg-secondary);transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.grid-preset-btn.active{border-color:var(--color-primary);background-color:var(--color-primary-50)}.grid-preset-icon{font-size:1.25rem;color:var(--text-primary);letter-spacing:-2px}.custom-grid-columns-container{margin-top:.75rem}.settings-input-with-unit{display:flex;align-items:center;gap:.5rem}.settings-input-number{flex:1}.settings-input-unit{width:80px;padding:.75rem;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);color:var(--text-primary);font-family:inherit;font-size:.9rem}.component-card-empty{min-height:200px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:8px;transition:all .3s ease}.component-card-empty:hover{border-color:var(--color-primary-100);background-color:var(--bg-primary)}.empty-state{text-align:center;padding:2rem;max-width:300px}.empty-state-icon{margin-bottom:1rem}.empty-state-icon i{font-size:3rem;color:var(--text-secondary);opacity:.6}.empty-state-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem;text-transform:capitalize}.empty-state-description{font-size:.9rem;color:var(--text-secondary);line-height:1.5;margin-bottom:1.5rem}.empty-state-actions{display:flex;justify-content:center}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:6px;font-family:inherit;font-weight:500;text-decoration:none;cursor:pointer;transition:all .2s ease;font-size:.9rem}.btn-primary{background-color:var(--color-primary-100);color:var(--color-primary-900)}.btn-primary:hover{background-color:var(--color-primary-50);transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.btn-sm{padding:.5rem 1rem;font-size:.85rem}.btn i{font-size:.9em}.drawer-empty-state{min-height:400px;display:flex;align-items:center;justify-content:center;padding:2rem}.drawer-empty-state .empty-state{max-width:400px}.drawer-empty-state .empty-state-icon i{font-size:4rem;color:var(--text-secondary);opacity:.5}.drawer-empty-state .empty-state-title{font-size:1.5rem;margin-bottom:1rem;text-transform:capitalize}.drawer-empty-state .empty-state-description{margin-bottom:1rem;line-height:1.6}.drawer-empty-state .empty-state-actions{margin-top:2rem}.drawer-empty-state .btn,.drawer-empty-state .btn:hover{text-decoration:none}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";class HeaderComponent extends HTMLElement{connectedCallback(){this.innerHTML=`
|
|
1
|
+
"use strict";class HeaderComponent extends HTMLElement{constructor(){super(),this.currentLang=localStorage.getItem("salla_demo_lang")||"ar",this.currentTheme=localStorage.getItem("salla_demo_theme")||"light"}connectedCallback(){this.innerHTML=`
|
|
2
2
|
<header>
|
|
3
3
|
<div class="container">
|
|
4
4
|
<div class="header-content">
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
</div>
|
|
23
23
|
</div>
|
|
24
24
|
</header>
|
|
25
|
-
|
|
25
|
+
`,this.initialize()}initialize(){var e,t;this.updateLanguage(this.currentLang),this.updateTheme(this.currentTheme),(e=document.getElementById("toggleTheme"))==null||e.addEventListener("click",()=>this.updateTheme(this.currentTheme==="light"?"dark":"light")),(t=document.getElementById("toggleLang"))==null||t.addEventListener("click",()=>this.updateLanguage(this.currentLang==="ar"?"en":"ar"))}updateLanguage(e){this.currentLang=e;const t=this.currentLang==="ar"?"rtl":"ltr";document.documentElement.setAttribute("lang",this.currentLang),document.documentElement.setAttribute("dir",t),localStorage.setItem("salla_demo_lang",this.currentLang);const n=document.getElementById("toggleLang"),s=n==null?void 0:n.querySelector(".lang-code"),o=document.getElementById("pageTitle");s&&(s.textContent=this.currentLang==="ar"?"EN":"AR"),o&&(o.textContent=translations[this.currentLang].title)}updateTheme(e){this.currentTheme=e,document.documentElement.setAttribute("data-theme",this.currentTheme),localStorage.setItem("salla_demo_theme",this.currentTheme)}}customElements.define("salla-demo-header",HeaderComponent);class ComponentDrawerComponent extends HTMLElement{connectedCallback(){this.innerHTML=`
|
|
26
26
|
<div id="componentDrawer" class="drawer">
|
|
27
27
|
<div class="drawer-header">
|
|
28
28
|
<h3 class="drawer-title">Component Settings</h3>
|
|
@@ -172,7 +172,7 @@
|
|
|
172
172
|
</div>
|
|
173
173
|
</div>
|
|
174
174
|
</div>
|
|
175
|
-
`}}customElements.define("salla-demo-settings-tabs",SettingsTabsComponent);
|
|
175
|
+
`}}customElements.define("salla-demo-settings-tabs",SettingsTabsComponent);class ThemeManager{static __demoTrans(e){var t,n;return((n=(t=window.translations)==null?void 0:t[this.getCurrentLang()])==null?void 0:n[e])||e}static getCurrentLang(){return localStorage.getItem("salla_demo_lang")||"ar"}static getCurrentTheme(){return localStorage.getItem("salla_demo_theme")||"light"}}const p=class p{static schemaForComponent(e,t=!0){const n=localStorage.getItem(`form-builder::${e}`)||window.customComponentsSchema[e];return t?this.htmlSafeString(n):n}static getComponentData(e){const t=localStorage.getItem(`form-builder::data_${e}`);if(!t)return"";let n;try{n=JSON.parse(t),n=this.prepareDataForRendering(n)}catch(s){return console.error("Error parsing component data:",s),""}return this.htmlSafeString(JSON.stringify(n))}static prepareDataForRendering(e){if(!e||typeof e!="object")return e;if(Array.isArray(e))return e.map(s=>this.prepareDataForRendering(s));const t=ThemeManager.getCurrentLang(),n={};for(const[s,o]of Object.entries(e)){let i=s,r=o;if(s.endsWith("__type"))continue;if(s.includes(".")){const m=s.split(".");m.length===2&&(i=m[1])}const d=s+"__type";e.hasOwnProperty(d)?r=this.processUrlField(o,e[d]):this.isMultilingualField(o)?r=this.extractLanguageValue(o,t):typeof o=="object"&&o!==null&&(r=this.prepareDataForRendering(o)),n[i]=r}return n}static processUrlField(e,t){if(!e&&!t)return e||"#";Array.isArray(t)&&(t=t[0].value);const n=Salla.url.get("");if(this.isDirectUrlSource(t)){if(t==="latest_products_link")return`${n}latest-products`;if(t==="reviews_link")return`${n}${e}`;const o=t.replace("_link","");return`${n}${o}`}if(Array.isArray(e))if(e.length>0&&typeof e[0]=="object"&&"value"in e[0])e=e[0].value;else if(e.length>0)e=e[0];else return"#";if(t==="custom")return!e||e===""?"#":typeof e=="string"&&e.startsWith("http")?e:`${n}${e}`;const s=t.toLowerCase();return`${n}redirect/${s}/${e}`}static isDirectUrlSource(e){return["blog_link","brands_link","offers_link","latest_products_link","reviews_link"].includes(e)}static isMultilingualField(e){return e&&typeof e=="object"&&!Array.isArray(e)&&"ar"in e}static extractLanguageValue(e,t){if(!this.isMultilingualField(e))return e;if(e[t]&&e[t].trim())return e[t];if(e.ar&&e.ar.trim())return e.ar;if(e.en&&e.en.trim())return e.en;for(const n of Object.values(e))if(typeof n=="string"&&n.trim())return n;return""}static htmlSafeString(e){return(e==null?void 0:e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"))||""}static debounce(e,t){let n;return function(...s){clearTimeout(n),n=setTimeout(()=>e.apply(this,s),t)}}static async waitForCondition(e,t,n){const s=Date.now();for(;Date.now()-s<t;){if(e())return!0;console.log("waiting for window.Salla.onReady..."+(Date.now()-s)),await new Promise(o=>setTimeout(o,n))}return!1}};p.FORMBUILDER_ASSETS=["https://cdn.assets.salla.network/prod/admin/cp/assets/css/icons/sallaicons/style.css?v0.21-languages2","https://cdn.assets.salla.network/prod/admin/vendor/form-builder/form-builder.a58a1e74d158c6a9cd3aeffe2feb6674.css","https://cdn.assets.salla.network/prod/admin/vendor/theme-dashboard/form-builder-theme.198b7a49c2f8cc9bae22de21569b1f42.css"];let DemoUtilities=p;class ComponentCard extends HTMLElement{connectedCallback(){this.componentName=this.getAttribute("component-name"),this.config=DemoUtilities.getComponentData(this.componentName),this.innerHTML=`
|
|
176
176
|
<div class="component-card" data-component="${this.componentName}">
|
|
177
177
|
<div class="component-card-header">
|
|
178
178
|
<div class="component-card-actions">
|
|
@@ -254,4 +254,4 @@
|
|
|
254
254
|
language-list="${n.languages.join(",")}"
|
|
255
255
|
default-language="${n.defaultLanguage}"
|
|
256
256
|
submit-label="${ThemeManager.__demoTrans("saveSettings")}"></form-builder-3>
|
|
257
|
-
`)}loadFormBuilderScript(){if(document.getElementById("form-builder-3-script"))return;const e=document.createElement("script");e.id="form-builder-3-script",e.src="https://cdn.assets.salla.network/themes/default/temporary/form-builder-3.js",e.async=!0,document.head.appendChild(e)}closeDrawer(){var e;document.querySelectorAll(".drawer.active").forEach(t=>t.classList.remove("active")),(e=this.drawerOverlay)==null||e.classList.remove("active"),document.body.style.overflow=""}resetSettings(){if(this.componentDrawer&&this.componentDrawer.currentComponent&&this.componentManager){const e=this.componentDrawer.currentComponent;localStorage.removeItem(`form-builder::${e}`),localStorage.removeItem(`form-builder::data_${e}`),this.componentManager.reRenderComponent(e)}}static resetComponentSettings(){var n;document.querySelectorAll('[data-component-type="form-builder"]').forEach(s=>{s.classList.add("settings-updated"),setTimeout(()=>{s.classList.remove("settings-updated")},1e3)}),document.dispatchEvent(new CustomEvent("formbuilder-settings-changed",{detail:{timestamp:new Date().getTime()}}));const t=document.getElementById("componentDrawer");t!=null&&t.classList.contains("active")&&(t.classList.remove("active"),(n=document.getElementById("drawerOverlay"))==null||n.classList.remove("active"),document.body.style.overflow="")}}class FormBuilderEventHandler{constructor(e,t){this.componentManager=e,this.drawerManager=t,this.setupEventListeners()}setupEventListeners(){window.addEventListener("FormBuilder::form-builder-3::request-success",async({detail:e})=>{const t=["static-","$","twilight-bundles-component-name"];SettingsManager.getSavedLanguages();let n=Object.entries(e).filter(([i])=>!t.some(r=>i.startsWith(r)));n=Object.fromEntries(n);const s=e["twilight-bundles-component-name"];if(!s||!window.customComponentsSchema||!window.customComponentsSchema[s])return;const o=window.customComponentsSchema[s];await fetch(`${window.formBuilderMockUrl}/schema-injector`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({schema:o,data:n})}).then(i=>i.json()).then(i=>Salla.storage.set(`form-builder::${s}`,i)).then(()=>Salla.storage.set(`form-builder::data_${s}`,n)).then(()=>this.componentManager.reRenderComponent(s)).then(()=>this.drawerManager.closeDrawer()).catch(i=>console.error("Error injecting data into schema:",i))})}}class GridManager{static getGridColumns(){const a=document.getElementById("gridColumns");return(a==null?void 0:a.value)||twilightDemoOptions.grid.columns}static updateGridBasedOnItemCount(){const a=document.getElementById("componentsGrid");if(!a)return;const e=a.querySelectorAll(":scope > *");e.length<=2?(a.style.gridTemplateColumns="repeat(auto-fit, minmax(0, 1fr))",e.forEach(t=>t.style.gridColumn="")):(a.style.gridTemplateColumns="repeat(3, 1fr)",e.forEach(t=>t.style.gridColumn=""),e[0]&&(e[0].style.gridColumn="span 3"))}static applySettings(){var a,e,t,n,s;const activePreset=document.querySelector(".grid-preset-btn.active"),grid=document.getElementById("componentsGrid");if(!grid)return;if(activePreset&&activePreset.getAttribute("data-columns")==="auto-fill")this.updateGridBasedOnItemCount();else{const o=this.getGridColumns();grid.style.gridTemplateColumns=o,grid.querySelectorAll(":scope > *").forEach(r=>r.style.gridColumn="")}const gridGapValue=((a=document.getElementById("gridGapValue"))==null?void 0:a.value)||"1",gridGapUnit=((e=document.getElementById("gridGapUnit"))==null?void 0:e.value)||"rem",gridGap=gridGapValue+gridGapUnit;if(grid){grid.style.gap=gridGap;const o=Salla.storage.get("salla_demo_grid",{columns:grid.style.gridTemplateColumns||twilightDemoOptions.grid.columns,gap:twilightDemoOptions.grid.gap,minWidth:twilightDemoOptions.grid.minWidth});Salla.storage.set("salla_demo_grid",{columns:o.columns,gap:gridGap,minWidth:o.minWidth})}const customCSS=((t=document.getElementById("customCSS"))==null?void 0:t.value)||"";let customCSSElement=document.getElementById("custom-css-element");customCSSElement||(customCSSElement=document.createElement("style"),customCSSElement.id="custom-css-element",document.head.appendChild(customCSSElement)),customCSSElement.textContent=customCSS;const customJS=((n=document.getElementById("customJS"))==null?void 0:n.value)||"";try{customJS&&eval(customJS)}catch(o){console.error("Error executing custom JS:",o)}Salla.storage.set("salla_demo_grid",{columns:activePreset&&activePreset.getAttribute("data-columns")==="auto-fill"?"auto-fill":this.getGridColumns(),gap:gridGap,minWidth:twilightDemoOptions.grid.minWidth}),Salla.storage.set("salla_demo_custom_css",customCSS),Salla.storage.set("salla_demo_custom_js",customJS);const formbuilderLanguagesSelect=document.getElementById("formbuilderLanguages"),selectedLanguages=Array.from((formbuilderLanguagesSelect==null?void 0:formbuilderLanguagesSelect.selectedOptions)||[]).map(o=>o.value);selectedLanguages.length===0&&selectedLanguages.push("ar");const formbuilderDefaultLang=((s=document.getElementById("formbuilderDefaultLang"))==null?void 0:s.value)||twilightDemoOptions.formbuilder.defaultLanguage;if(!selectedLanguages.includes(formbuilderDefaultLang)){selectedLanguages.push(formbuilderDefaultLang);const o=Array.from((formbuilderLanguagesSelect==null?void 0:formbuilderLanguagesSelect.options)||[]).find(i=>i.value===formbuilderDefaultLang);o&&(o.selected=!0)}Salla.storage.set("salla_demo_formbuilder",{languages:selectedLanguages,defaultLanguage:formbuilderDefaultLang}),DrawerManager.resetComponentSettings()}static initSettings(){const savedGrid=SettingsManager.getSavedGrid(),grid=document.getElementById("componentsGrid");grid&&(savedGrid.columns==="auto-fill"?this.updateGridBasedOnItemCount():grid.style.gridTemplateColumns=savedGrid.columns,grid.style.gap=savedGrid.gap);const gapMatch=savedGrid.gap.match(/([\d.]+)([a-z%]+)/);if(gapMatch&&document.getElementById("gridGapValue")&&document.getElementById("gridGapUnit")){const[a,e,t]=gapMatch;document.getElementById("gridGapValue").value=e,document.getElementById("gridGapUnit").value=t}const gridColumnsInput=document.getElementById("gridColumns");gridColumnsInput&&(gridColumnsInput.value=savedGrid.columns,document.querySelectorAll(".grid-preset-btn").forEach(a=>{const e=a.getAttribute("data-columns");(e===savedGrid.columns||e==="auto-fill"&&savedGrid.columns==="auto-fill"||e==="custom"&&!["1","2","3","4","auto-fill"].includes(savedGrid.columns))&&(document.querySelectorAll(".grid-preset-btn").forEach(t=>t.classList.remove("active")),a.classList.add("active"),e==="custom"?(gridColumnsInput.readOnly=!1,gridColumnsInput.setAttribute("data-custom-value",savedGrid.columns)):gridColumnsInput.readOnly=!0)}));const savedCSS=Salla.storage.get("salla_demo_custom_css","");if(savedCSS){const a=document.createElement("style");a.id="custom-css-element",a.textContent=savedCSS,document.head.appendChild(a)}const savedJS=Salla.storage.get("salla_demo_custom_js","");if(savedJS)try{eval(savedJS)}catch(a){console.error("Error executing custom JS:",a)}}}class EventManager{static setupUIEventListeners(){document.querySelectorAll(".settings-tab-btn").forEach(e=>{e.addEventListener("click",()=>{var n;const t=e.getAttribute("data-tab");t&&(document.querySelectorAll(".settings-tab-btn").forEach(s=>{s.classList.remove("active")}),e.classList.add("active"),document.querySelectorAll(".settings-tab-content").forEach(s=>{s.classList.remove("active")}),(n=document.getElementById(t+"-tab"))==null||n.classList.add("active"),GridManager.applySettings())})}),document.querySelectorAll(".grid-preset-btn").forEach(e=>{e.addEventListener("click",()=>{document.querySelectorAll(".grid-preset-btn").forEach(s=>s.classList.remove("active")),e.classList.add("active");const t=e.getAttribute("data-columns"),n=document.getElementById("gridColumns");n&&(t==="custom"?(n.readOnly=!1,n.value=n.getAttribute("data-custom-value")||"repeat(auto-fill, minmax(300px, 1fr))"):t==="auto-fill"?(n.readOnly=!0,n.value="auto-fill"):(n.readOnly=!0,n.value=t||"")),GridManager.applySettings()})})}}class SettingsDrawerManager{static openSettingsDrawer(){var v,w,b,S,y,C;const e=document.getElementById("settingsDrawer");if(!e)return;e.classList.add("active");const t=document.getElementById("drawerOverlay");if(t==null||t.classList.add("active"),document.body.style.overflow="hidden",e.is_rendered)return;e.is_rendered=!0,e.querySelectorAll(".visibility-checkbox").forEach(l=>l.checked=!Salla.storage.get("hidden-salla-components",[]).includes(l.value));const n=SettingsManager.getSavedGrid(),s=document.querySelectorAll(".grid-preset-btn");let o=!1;if(s.forEach(l=>{l.classList.remove("active"),l.getAttribute("data-columns")===n.columns&&(l.classList.add("active"),o=!0)}),!o){const l=document.querySelector('.grid-preset-btn[data-columns="custom"]');l==null||l.classList.add("active");const c=document.getElementById("gridColumns");c&&(c.setAttribute("data-custom-value",n.columns),c.readOnly=!1)}const i=document.getElementById("gridColumns");i&&(i.value=n.columns,i.addEventListener("input",()=>{const l=document.querySelector('.grid-preset-btn[data-columns="custom"]');l&&l.classList.contains("active")&&i.setAttribute("data-custom-value",i.value),GridManager.applySettings()}));const r=document.getElementById("gridGapValue"),d=document.getElementById("gridGapUnit");r&&n.gap&&(r.value=((v=n.gap.match(/[\d\.]+/))==null?void 0:v[0])||"1",d.value=((w=n.gap.match(/[a-z%]+/))==null?void 0:w[0])||"rem"),r==null||r.addEventListener("input",()=>{const l=(r==null?void 0:r.value)||"1",c=(d==null?void 0:d.value)||"rem",u=l+c,g=document.getElementById("componentsGrid");g&&(g.style.gap=u);const L=SettingsManager.getSavedGrid();Salla.storage.set("salla_demo_grid",{...L,gap:u})}),d==null||d.addEventListener("change",()=>{const l=r.value||"1",c=d.value||"rem",u=l+c,g=document.getElementById("componentsGrid");g&&(g.style.gap=u),Salla.storage.set("salla_demo_grid",{...SettingsManager.getSavedGrid(),gap:u})}),(b=document.getElementById("customCSS"))==null||b.addEventListener("input",DemoUtilities.debounce(()=>{GridManager.applySettings()},500)),(S=document.getElementById("customJS"))==null||S.addEventListener("input",DemoUtilities.debounce(()=>{GridManager.applySettings()},500)),(y=document.getElementById("formbuilderLanguages"))==null||y.addEventListener("change",()=>GridManager.applySettings()),(C=document.getElementById("formbuilderDefaultLang"))==null||C.addEventListener("change",()=>GridManager.applySettings());const m=document.getElementById("customCSS"),f=document.getElementById("customJS");m&&f&&(m.value=Salla.storage.get("salla_demo_custom_css",twilightDemoOptions.css||""),f.value=Salla.storage.get("salla_demo_custom_js",twilightDemoOptions.js||""));const E=SettingsManager.getSavedLanguages();document.getElementById("formbuilderDefaultLang").value=E.defaultLanguage}}class DemoApp{constructor(){this.drawerManager=new DrawerManager,this.componentManager=new ComponentManager(this.drawerManager),this.drawerManager.setComponentManager(this.componentManager),this.formBuilderEventHandler=new FormBuilderEventHandler(this.componentManager,this.drawerManager),DemoApp.setupGlobalFunctions(this),this.initialize()}async initialize(){await DemoUtilities.waitForCondition(()=>window.Salla&&window.Salla.onReady,1e4,50),await window.Salla.onReady(),Salla.lang.setLocale(ThemeManager.getCurrentLang()),ThemeManager.initialize(),GridManager.initSettings(),EventManager.setupUIEventListeners(),Salla.storage.get("hidden-salla-components",[]),Object.keys(window.customComponentsSchema||{}).forEach(e=>{this.componentManager.renderComponent(e)})}static setupGlobalFunctions(e){window.openSettingsDrawer=()=>SettingsDrawerManager.openSettingsDrawer(),window.closeDrawer=()=>e.drawerManager.closeDrawer(),window.toggleComponentVisibility=t=>e.componentManager.toggleComponentVisibility(t),window.openDrawer=t=>e.drawerManager.openDrawer(t),window.reRenderComponent=t=>e.componentManager.reRenderComponent(t),window.applySettings=()=>GridManager.applySettings(),window.resetSettings=()=>e.drawerManager.resetSettings(),window.resetComponentSettings=()=>DrawerManager.resetComponentSettings(),window.__demoTrans=t=>ThemeManager.__demoTrans(t),window.updateLanguage=t=>ThemeManager.updateLanguage(t),window.updateTheme=t=>ThemeManager.updateTheme(t),window.getSavedGrid=()=>SettingsManager.getSavedGrid(),window.getSavedLanguages=()=>SettingsManager.getSavedLanguages(),window.getGridColumns=()=>GridManager.getGridColumns(),window.updateGridBasedOnItemCount=()=>GridManager.updateGridBasedOnItemCount(),window.initSettings=()=>GridManager.initSettings(),window.schemaForComponent=t=>DemoUtilities.schemaForComponent(t),window.getComponentData=t=>DemoUtilities.getComponentData(t),window.htmlSafeString=t=>DemoUtilities.htmlSafeString(t),window.debounce=(t,n)=>DemoUtilities.debounce(t,n),window.renderComponent=(t,n)=>e.componentManager.renderComponent(t,n)}}new DemoApp;
|
|
257
|
+
`)}loadFormBuilderScript(){if(document.getElementById("form-builder-3-script"))return;const e=document.createElement("script");e.id="form-builder-3-script",e.src="https://cdn.assets.salla.network/themes/default/temporary/form-builder-3.js",e.async=!0,document.head.appendChild(e)}closeDrawer(){var e;document.querySelectorAll(".drawer.active").forEach(t=>t.classList.remove("active")),(e=this.drawerOverlay)==null||e.classList.remove("active"),document.body.style.overflow=""}resetSettings(){if(this.componentDrawer&&this.componentDrawer.currentComponent&&this.componentManager){const e=this.componentDrawer.currentComponent;localStorage.removeItem(`form-builder::${e}`),localStorage.removeItem(`form-builder::data_${e}`),this.componentManager.reRenderComponent(e)}}static resetComponentSettings(){var n;document.querySelectorAll('[data-component-type="form-builder"]').forEach(s=>{s.classList.add("settings-updated"),setTimeout(()=>{s.classList.remove("settings-updated")},1e3)}),document.dispatchEvent(new CustomEvent("formbuilder-settings-changed",{detail:{timestamp:new Date().getTime()}}));const t=document.getElementById("componentDrawer");t!=null&&t.classList.contains("active")&&(t.classList.remove("active"),(n=document.getElementById("drawerOverlay"))==null||n.classList.remove("active"),document.body.style.overflow="")}}class FormBuilderEventHandler{constructor(e,t){this.componentManager=e,this.drawerManager=t,this.setupEventListeners()}setupEventListeners(){window.addEventListener("FormBuilder::form-builder-3::request-success",async({detail:e})=>{const t=["static-","$","twilight-bundles-component-name"];SettingsManager.getSavedLanguages();let n=Object.entries(e).filter(([i])=>!t.some(r=>i.startsWith(r)));n=Object.fromEntries(n);const s=e["twilight-bundles-component-name"];if(!s||!window.customComponentsSchema||!window.customComponentsSchema[s])return;const o=window.customComponentsSchema[s];await fetch(`${window.formBuilderMockUrl}/schema-injector`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({schema:o,data:n})}).then(i=>i.json()).then(i=>Salla.storage.set(`form-builder::${s}`,i)).then(()=>Salla.storage.set(`form-builder::data_${s}`,n)).then(()=>this.componentManager.reRenderComponent(s)).then(()=>this.drawerManager.closeDrawer()).catch(i=>console.error("Error injecting data into schema:",i))})}}class GridManager{static getGridColumns(){const a=document.getElementById("gridColumns");return(a==null?void 0:a.value)||twilightDemoOptions.grid.columns}static updateGridBasedOnItemCount(){const a=document.getElementById("componentsGrid");if(!a)return;const e=a.querySelectorAll(":scope > *");e.length<=2?(a.style.gridTemplateColumns="repeat(auto-fit, minmax(0, 1fr))",e.forEach(t=>t.style.gridColumn="")):(a.style.gridTemplateColumns="repeat(3, 1fr)",e.forEach(t=>t.style.gridColumn=""),e[0]&&(e[0].style.gridColumn="span 3"))}static applySettings(){var a,e,t,n,s;const activePreset=document.querySelector(".grid-preset-btn.active"),grid=document.getElementById("componentsGrid");if(!grid)return;if(activePreset&&activePreset.getAttribute("data-columns")==="auto-fill")this.updateGridBasedOnItemCount();else{const o=this.getGridColumns();grid.style.gridTemplateColumns=o,grid.querySelectorAll(":scope > *").forEach(r=>r.style.gridColumn="")}const gridGapValue=((a=document.getElementById("gridGapValue"))==null?void 0:a.value)||"1",gridGapUnit=((e=document.getElementById("gridGapUnit"))==null?void 0:e.value)||"rem",gridGap=gridGapValue+gridGapUnit;if(grid){grid.style.gap=gridGap;const o=Salla.storage.get("salla_demo_grid",{columns:grid.style.gridTemplateColumns||twilightDemoOptions.grid.columns,gap:twilightDemoOptions.grid.gap,minWidth:twilightDemoOptions.grid.minWidth});Salla.storage.set("salla_demo_grid",{columns:o.columns,gap:gridGap,minWidth:o.minWidth})}const customCSS=((t=document.getElementById("customCSS"))==null?void 0:t.value)||"";let customCSSElement=document.getElementById("custom-css-element");customCSSElement||(customCSSElement=document.createElement("style"),customCSSElement.id="custom-css-element",document.head.appendChild(customCSSElement)),customCSSElement.textContent=customCSS;const customJS=((n=document.getElementById("customJS"))==null?void 0:n.value)||"";try{customJS&&eval(customJS)}catch(o){console.error("Error executing custom JS:",o)}Salla.storage.set("salla_demo_grid",{columns:activePreset&&activePreset.getAttribute("data-columns")==="auto-fill"?"auto-fill":this.getGridColumns(),gap:gridGap,minWidth:twilightDemoOptions.grid.minWidth}),Salla.storage.set("salla_demo_custom_css",customCSS),Salla.storage.set("salla_demo_custom_js",customJS);const formbuilderLanguagesSelect=document.getElementById("formbuilderLanguages"),selectedLanguages=Array.from((formbuilderLanguagesSelect==null?void 0:formbuilderLanguagesSelect.selectedOptions)||[]).map(o=>o.value);selectedLanguages.length===0&&selectedLanguages.push("ar");const formbuilderDefaultLang=((s=document.getElementById("formbuilderDefaultLang"))==null?void 0:s.value)||twilightDemoOptions.formbuilder.defaultLanguage;if(!selectedLanguages.includes(formbuilderDefaultLang)){selectedLanguages.push(formbuilderDefaultLang);const o=Array.from((formbuilderLanguagesSelect==null?void 0:formbuilderLanguagesSelect.options)||[]).find(i=>i.value===formbuilderDefaultLang);o&&(o.selected=!0)}Salla.storage.set("salla_demo_formbuilder",{languages:selectedLanguages,defaultLanguage:formbuilderDefaultLang}),DrawerManager.resetComponentSettings()}static initSettings(){const savedGrid=SettingsManager.getSavedGrid(),grid=document.getElementById("componentsGrid");grid&&(savedGrid.columns==="auto-fill"?this.updateGridBasedOnItemCount():grid.style.gridTemplateColumns=savedGrid.columns,grid.style.gap=savedGrid.gap);const gapMatch=savedGrid.gap.match(/([\d.]+)([a-z%]+)/);if(gapMatch&&document.getElementById("gridGapValue")&&document.getElementById("gridGapUnit")){const[a,e,t]=gapMatch;document.getElementById("gridGapValue").value=e,document.getElementById("gridGapUnit").value=t}const gridColumnsInput=document.getElementById("gridColumns");gridColumnsInput&&(gridColumnsInput.value=savedGrid.columns,document.querySelectorAll(".grid-preset-btn").forEach(a=>{const e=a.getAttribute("data-columns");(e===savedGrid.columns||e==="auto-fill"&&savedGrid.columns==="auto-fill"||e==="custom"&&!["1","2","3","4","auto-fill"].includes(savedGrid.columns))&&(document.querySelectorAll(".grid-preset-btn").forEach(t=>t.classList.remove("active")),a.classList.add("active"),e==="custom"?(gridColumnsInput.readOnly=!1,gridColumnsInput.setAttribute("data-custom-value",savedGrid.columns)):gridColumnsInput.readOnly=!0)}));const savedCSS=Salla.storage.get("salla_demo_custom_css","");if(savedCSS){const a=document.createElement("style");a.id="custom-css-element",a.textContent=savedCSS,document.head.appendChild(a)}const savedJS=Salla.storage.get("salla_demo_custom_js","");if(savedJS)try{eval(savedJS)}catch(a){console.error("Error executing custom JS:",a)}}}class EventManager{static setupUIEventListeners(){document.querySelectorAll(".settings-tab-btn").forEach(e=>{e.addEventListener("click",()=>{var n;const t=e.getAttribute("data-tab");t&&(document.querySelectorAll(".settings-tab-btn").forEach(s=>{s.classList.remove("active")}),e.classList.add("active"),document.querySelectorAll(".settings-tab-content").forEach(s=>{s.classList.remove("active")}),(n=document.getElementById(t+"-tab"))==null||n.classList.add("active"),GridManager.applySettings())})}),document.querySelectorAll(".grid-preset-btn").forEach(e=>{e.addEventListener("click",()=>{document.querySelectorAll(".grid-preset-btn").forEach(s=>s.classList.remove("active")),e.classList.add("active");const t=e.getAttribute("data-columns"),n=document.getElementById("gridColumns");n&&(t==="custom"?(n.readOnly=!1,n.value=n.getAttribute("data-custom-value")||"repeat(auto-fill, minmax(300px, 1fr))"):t==="auto-fill"?(n.readOnly=!0,n.value="auto-fill"):(n.readOnly=!0,n.value=t||"")),GridManager.applySettings()})})}}class SettingsDrawerManager{static openSettingsDrawer(){var f,v,w,b,S,y;const e=document.getElementById("settingsDrawer");if(!e)return;e.classList.add("active");const t=document.getElementById("drawerOverlay");if(t==null||t.classList.add("active"),document.body.style.overflow="hidden",e.is_rendered)return;e.is_rendered=!0,e.querySelectorAll(".visibility-checkbox").forEach(l=>l.checked=!Salla.storage.get("hidden-salla-components",[]).includes(l.value));const n=SettingsManager.getSavedGrid(),s=document.querySelectorAll(".grid-preset-btn");let o=!1;if(s.forEach(l=>{l.classList.remove("active"),l.getAttribute("data-columns")===n.columns&&(l.classList.add("active"),o=!0)}),!o){const l=document.querySelector('.grid-preset-btn[data-columns="custom"]');l==null||l.classList.add("active");const c=document.getElementById("gridColumns");c&&(c.setAttribute("data-custom-value",n.columns),c.readOnly=!1)}const i=document.getElementById("gridColumns");i&&(i.value=n.columns,i.addEventListener("input",()=>{const l=document.querySelector('.grid-preset-btn[data-columns="custom"]');l&&l.classList.contains("active")&&i.setAttribute("data-custom-value",i.value),GridManager.applySettings()}));const r=document.getElementById("gridGapValue"),d=document.getElementById("gridGapUnit");r&&n.gap&&(r.value=((f=n.gap.match(/[\d\.]+/))==null?void 0:f[0])||"1",d.value=((v=n.gap.match(/[a-z%]+/))==null?void 0:v[0])||"rem"),r==null||r.addEventListener("input",()=>{const l=(r==null?void 0:r.value)||"1",c=(d==null?void 0:d.value)||"rem",u=l+c,g=document.getElementById("componentsGrid");g&&(g.style.gap=u);const E=SettingsManager.getSavedGrid();Salla.storage.set("salla_demo_grid",{...E,gap:u})}),d==null||d.addEventListener("change",()=>{const l=r.value||"1",c=d.value||"rem",u=l+c,g=document.getElementById("componentsGrid");g&&(g.style.gap=u),Salla.storage.set("salla_demo_grid",{...SettingsManager.getSavedGrid(),gap:u})}),(w=document.getElementById("customCSS"))==null||w.addEventListener("input",DemoUtilities.debounce(()=>{GridManager.applySettings()},500)),(b=document.getElementById("customJS"))==null||b.addEventListener("input",DemoUtilities.debounce(()=>{GridManager.applySettings()},500)),(S=document.getElementById("formbuilderLanguages"))==null||S.addEventListener("change",()=>GridManager.applySettings()),(y=document.getElementById("formbuilderDefaultLang"))==null||y.addEventListener("change",()=>GridManager.applySettings());const m=document.getElementById("customCSS"),h=document.getElementById("customJS");m&&h&&(m.value=Salla.storage.get("salla_demo_custom_css",twilightDemoOptions.css||""),h.value=Salla.storage.get("salla_demo_custom_js",twilightDemoOptions.js||""));const C=SettingsManager.getSavedLanguages();document.getElementById("formbuilderDefaultLang").value=C.defaultLanguage}}class DemoApp{constructor(){this.drawerManager=new DrawerManager,this.componentManager=new ComponentManager(this.drawerManager),this.drawerManager.setComponentManager(this.componentManager),this.formBuilderEventHandler=new FormBuilderEventHandler(this.componentManager,this.drawerManager),DemoApp.setupGlobalFunctions(this),this.initialize()}async initialize(){await DemoUtilities.waitForCondition(()=>window.Salla&&window.Salla.onReady,1e4,50),await window.Salla.onReady(),Salla.lang.setLocale(ThemeManager.getCurrentLang()),Salla.config.set("theme.is_rtl",ThemeManager.getCurrentLang()==="ar"),GridManager.initSettings(),EventManager.setupUIEventListeners(),Salla.storage.get("hidden-salla-components",[]),Object.keys(window.customComponentsSchema||{}).forEach(e=>{this.componentManager.renderComponent(e)})}static setupGlobalFunctions(e){window.openSettingsDrawer=()=>SettingsDrawerManager.openSettingsDrawer(),window.closeDrawer=()=>e.drawerManager.closeDrawer(),window.toggleComponentVisibility=t=>e.componentManager.toggleComponentVisibility(t),window.openDrawer=t=>e.drawerManager.openDrawer(t),window.reRenderComponent=t=>e.componentManager.reRenderComponent(t),window.applySettings=()=>GridManager.applySettings(),window.resetSettings=()=>e.drawerManager.resetSettings(),window.resetComponentSettings=()=>DrawerManager.resetComponentSettings(),window.__demoTrans=t=>ThemeManager.__demoTrans(t),window.updateLanguage=t=>ThemeManager.updateLanguage(t),window.updateTheme=t=>ThemeManager.updateTheme(t),window.getSavedGrid=()=>SettingsManager.getSavedGrid(),window.getSavedLanguages=()=>SettingsManager.getSavedLanguages(),window.getGridColumns=()=>GridManager.getGridColumns(),window.updateGridBasedOnItemCount=()=>GridManager.updateGridBasedOnItemCount(),window.initSettings=()=>GridManager.initSettings(),window.schemaForComponent=t=>DemoUtilities.schemaForComponent(t),window.getComponentData=t=>DemoUtilities.getComponentData(t),window.htmlSafeString=t=>DemoUtilities.htmlSafeString(t),window.debounce=(t,n)=>DemoUtilities.debounce(t,n),window.renderComponent=(t,n)=>e.componentManager.renderComponent(t,n)}}new DemoApp;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
class HeaderComponent extends HTMLElement {
|
|
2
|
+
constructor() {
|
|
3
|
+
super(), this.currentLang = localStorage.getItem("salla_demo_lang") || "ar", this.currentTheme = localStorage.getItem("salla_demo_theme") || "light";
|
|
4
|
+
}
|
|
2
5
|
connectedCallback() {
|
|
3
6
|
this.innerHTML = `
|
|
4
7
|
<header>
|
|
@@ -24,7 +27,21 @@ class HeaderComponent extends HTMLElement {
|
|
|
24
27
|
</div>
|
|
25
28
|
</div>
|
|
26
29
|
</header>
|
|
27
|
-
|
|
30
|
+
`, this.initialize();
|
|
31
|
+
}
|
|
32
|
+
initialize() {
|
|
33
|
+
var e, t;
|
|
34
|
+
this.updateLanguage(this.currentLang), this.updateTheme(this.currentTheme), (e = document.getElementById("toggleTheme")) == null || e.addEventListener("click", () => this.updateTheme(this.currentTheme === "light" ? "dark" : "light")), (t = document.getElementById("toggleLang")) == null || t.addEventListener("click", () => this.updateLanguage(this.currentLang === "ar" ? "en" : "ar"));
|
|
35
|
+
}
|
|
36
|
+
updateLanguage(e) {
|
|
37
|
+
this.currentLang = e;
|
|
38
|
+
const t = this.currentLang === "ar" ? "rtl" : "ltr";
|
|
39
|
+
document.documentElement.setAttribute("lang", this.currentLang), document.documentElement.setAttribute("dir", t), localStorage.setItem("salla_demo_lang", this.currentLang);
|
|
40
|
+
const n = document.getElementById("toggleLang"), s = n == null ? void 0 : n.querySelector(".lang-code"), o = document.getElementById("pageTitle");
|
|
41
|
+
s && (s.textContent = this.currentLang === "ar" ? "EN" : "AR"), o && (o.textContent = translations[this.currentLang].title);
|
|
42
|
+
}
|
|
43
|
+
updateTheme(e) {
|
|
44
|
+
this.currentTheme = e, document.documentElement.setAttribute("data-theme", this.currentTheme), localStorage.setItem("salla_demo_theme", this.currentTheme);
|
|
28
45
|
}
|
|
29
46
|
}
|
|
30
47
|
customElements.define("salla-demo-header", HeaderComponent);
|
|
@@ -196,40 +213,19 @@ class SettingsTabsComponent extends HTMLElement {
|
|
|
196
213
|
}
|
|
197
214
|
}
|
|
198
215
|
customElements.define("salla-demo-settings-tabs", SettingsTabsComponent);
|
|
199
|
-
|
|
216
|
+
class ThemeManager {
|
|
200
217
|
static __demoTrans(e) {
|
|
201
218
|
var t, n;
|
|
202
|
-
return ((n = (t = window.translations) == null ? void 0 : t[this.
|
|
203
|
-
}
|
|
204
|
-
static updateLanguage(e) {
|
|
205
|
-
this.currentLang = e;
|
|
206
|
-
const t = this.currentLang === "ar" ? "rtl" : "ltr";
|
|
207
|
-
document.documentElement.setAttribute("lang", this.currentLang), document.documentElement.setAttribute("dir", t), localStorage.setItem("salla_demo_lang", this.currentLang);
|
|
208
|
-
const n = document.getElementById("toggleLang"), s = n == null ? void 0 : n.querySelector(".lang-code"), o = document.getElementById("pageTitle");
|
|
209
|
-
s && (s.textContent = this.currentLang === "ar" ? "EN" : "AR"), o && (o.textContent = this.__demoTrans("title"));
|
|
210
|
-
}
|
|
211
|
-
static updateTheme(e) {
|
|
212
|
-
this.currentTheme = e, document.documentElement.setAttribute("data-theme", this.currentTheme), localStorage.setItem("salla_demo_theme", this.currentTheme);
|
|
213
|
-
}
|
|
214
|
-
static initialize() {
|
|
215
|
-
this.updateLanguage(this.currentLang), this.updateTheme(this.currentTheme);
|
|
216
|
-
const e = document.getElementById("toggleTheme"), t = document.getElementById("toggleLang");
|
|
217
|
-
e == null || e.addEventListener("click", () => {
|
|
218
|
-
this.updateTheme(this.currentTheme === "light" ? "dark" : "light");
|
|
219
|
-
}), t == null || t.addEventListener("click", () => {
|
|
220
|
-
this.updateLanguage(this.currentLang === "ar" ? "en" : "ar");
|
|
221
|
-
});
|
|
219
|
+
return ((n = (t = window.translations) == null ? void 0 : t[this.getCurrentLang()]) == null ? void 0 : n[e]) || e;
|
|
222
220
|
}
|
|
223
221
|
static getCurrentLang() {
|
|
224
|
-
return
|
|
222
|
+
return localStorage.getItem("salla_demo_lang") || "ar";
|
|
225
223
|
}
|
|
226
224
|
static getCurrentTheme() {
|
|
227
|
-
return
|
|
225
|
+
return localStorage.getItem("salla_demo_theme") || "light";
|
|
228
226
|
}
|
|
229
|
-
}
|
|
230
|
-
p
|
|
231
|
-
let ThemeManager = p;
|
|
232
|
-
const h = class h {
|
|
227
|
+
}
|
|
228
|
+
const p = class p {
|
|
233
229
|
static schemaForComponent(e, t = !0) {
|
|
234
230
|
const n = localStorage.getItem(`form-builder::${e}`) || window.customComponentsSchema[e];
|
|
235
231
|
return t ? this.htmlSafeString(n) : n;
|
|
@@ -354,12 +350,12 @@ const h = class h {
|
|
|
354
350
|
return !1;
|
|
355
351
|
}
|
|
356
352
|
};
|
|
357
|
-
|
|
353
|
+
p.FORMBUILDER_ASSETS = [
|
|
358
354
|
"https://cdn.assets.salla.network/prod/admin/cp/assets/css/icons/sallaicons/style.css?v0.21-languages2",
|
|
359
355
|
"https://cdn.assets.salla.network/prod/admin/vendor/form-builder/form-builder.a58a1e74d158c6a9cd3aeffe2feb6674.css",
|
|
360
356
|
"https://cdn.assets.salla.network/prod/admin/vendor/theme-dashboard/form-builder-theme.198b7a49c2f8cc9bae22de21569b1f42.css"
|
|
361
357
|
];
|
|
362
|
-
let DemoUtilities =
|
|
358
|
+
let DemoUtilities = p;
|
|
363
359
|
class ComponentCard extends HTMLElement {
|
|
364
360
|
connectedCallback() {
|
|
365
361
|
this.componentName = this.getAttribute("component-name"), this.config = DemoUtilities.getComponentData(this.componentName), this.innerHTML = `
|
|
@@ -722,7 +718,7 @@ class EventManager {
|
|
|
722
718
|
}
|
|
723
719
|
class SettingsDrawerManager {
|
|
724
720
|
static openSettingsDrawer() {
|
|
725
|
-
var v, w, b, S, y
|
|
721
|
+
var f, v, w, b, S, y;
|
|
726
722
|
const e = document.getElementById("settingsDrawer");
|
|
727
723
|
if (!e)
|
|
728
724
|
return;
|
|
@@ -747,23 +743,23 @@ class SettingsDrawerManager {
|
|
|
747
743
|
l && l.classList.contains("active") && i.setAttribute("data-custom-value", i.value), GridManager.applySettings();
|
|
748
744
|
}));
|
|
749
745
|
const r = document.getElementById("gridGapValue"), d = document.getElementById("gridGapUnit");
|
|
750
|
-
r && n.gap && (r.value = ((
|
|
746
|
+
r && n.gap && (r.value = ((f = n.gap.match(/[\d\.]+/)) == null ? void 0 : f[0]) || "1", d.value = ((v = n.gap.match(/[a-z%]+/)) == null ? void 0 : v[0]) || "rem"), r == null || r.addEventListener("input", () => {
|
|
751
747
|
const l = (r == null ? void 0 : r.value) || "1", c = (d == null ? void 0 : d.value) || "rem", u = l + c, g = document.getElementById("componentsGrid");
|
|
752
748
|
g && (g.style.gap = u);
|
|
753
|
-
const
|
|
754
|
-
Salla.storage.set("salla_demo_grid", { ...
|
|
749
|
+
const E = SettingsManager.getSavedGrid();
|
|
750
|
+
Salla.storage.set("salla_demo_grid", { ...E, gap: u });
|
|
755
751
|
}), d == null || d.addEventListener("change", () => {
|
|
756
752
|
const l = r.value || "1", c = d.value || "rem", u = l + c, g = document.getElementById("componentsGrid");
|
|
757
753
|
g && (g.style.gap = u), Salla.storage.set("salla_demo_grid", { ...SettingsManager.getSavedGrid(), gap: u });
|
|
758
|
-
}), (
|
|
754
|
+
}), (w = document.getElementById("customCSS")) == null || w.addEventListener("input", DemoUtilities.debounce(() => {
|
|
759
755
|
GridManager.applySettings();
|
|
760
|
-
}, 500)), (
|
|
756
|
+
}, 500)), (b = document.getElementById("customJS")) == null || b.addEventListener("input", DemoUtilities.debounce(() => {
|
|
761
757
|
GridManager.applySettings();
|
|
762
|
-
}, 500)), (
|
|
763
|
-
const m = document.getElementById("customCSS"),
|
|
764
|
-
m &&
|
|
765
|
-
const
|
|
766
|
-
document.getElementById("formbuilderDefaultLang").value =
|
|
758
|
+
}, 500)), (S = document.getElementById("formbuilderLanguages")) == null || S.addEventListener("change", () => GridManager.applySettings()), (y = document.getElementById("formbuilderDefaultLang")) == null || y.addEventListener("change", () => GridManager.applySettings());
|
|
759
|
+
const m = document.getElementById("customCSS"), h = document.getElementById("customJS");
|
|
760
|
+
m && h && (m.value = Salla.storage.get("salla_demo_custom_css", twilightDemoOptions.css || ""), h.value = Salla.storage.get("salla_demo_custom_js", twilightDemoOptions.js || ""));
|
|
761
|
+
const C = SettingsManager.getSavedLanguages();
|
|
762
|
+
document.getElementById("formbuilderDefaultLang").value = C.defaultLanguage;
|
|
767
763
|
}
|
|
768
764
|
}
|
|
769
765
|
class DemoApp {
|
|
@@ -771,7 +767,7 @@ class DemoApp {
|
|
|
771
767
|
this.drawerManager = new DrawerManager(), this.componentManager = new ComponentManager(this.drawerManager), this.drawerManager.setComponentManager(this.componentManager), this.formBuilderEventHandler = new FormBuilderEventHandler(this.componentManager, this.drawerManager), DemoApp.setupGlobalFunctions(this), this.initialize();
|
|
772
768
|
}
|
|
773
769
|
async initialize() {
|
|
774
|
-
await DemoUtilities.waitForCondition(() => window.Salla && window.Salla.onReady, 1e4, 50), await window.Salla.onReady(), Salla.lang.setLocale(ThemeManager.getCurrentLang()), ThemeManager.
|
|
770
|
+
await DemoUtilities.waitForCondition(() => window.Salla && window.Salla.onReady, 1e4, 50), await window.Salla.onReady(), Salla.lang.setLocale(ThemeManager.getCurrentLang()), Salla.config.set("theme.is_rtl", ThemeManager.getCurrentLang() === "ar"), GridManager.initSettings(), EventManager.setupUIEventListeners(), Salla.storage.get("hidden-salla-components", []), Object.keys(window.customComponentsSchema || {}).forEach((e) => {
|
|
775
771
|
this.componentManager.renderComponent(e);
|
|
776
772
|
});
|
|
777
773
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("./build.cjs"),$=require("fs"),R=require("path");function C(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const i=C($),a=C(R),x=process.env.TWILIGHT_BUNDLES_URL||"https://cdn.salla.network/js/twilight-bundles/latest/twilight-bundles.js";let g=process.env.TWILIGHT_FORM_BUILDER_MOCK_BASE_URL||"https://salla.design";g=g.replace(/\/$/,"")+"/api/v1/form-builder-mock";function N(e,t){const r={ar:{toggleTheme:"تغيير المظهر",toggleLang:"English",dir:"rtl",lang:"ar",noSettings:"لا توجد إعدادات لهذا العنصر",addSettings:"إضافة إعدادات لهذا العنصر",saveSettings:"حفظ التغييرات",componentNeedsConfig:"هذا العنصر يحتاج إلى إعدادات ليتم عرضه بشكل صحيح.",configureComponent:"إعداد العنصر",title:t.twilightBundles.name.ar},en:{toggleTheme:"Toggle Theme",toggleLang:"Arabic",dir:"ltr",lang:"en",title:t.twilightBundles.name.en,noSettings:"No settings for this component",addSettings:"Add settings for this component",saveSettings:"Save changes",componentNeedsConfig:"This component needs configuration to be displayed properly.",configureComponent:"Configure Component"}};return`<!DOCTYPE html>
|
|
2
2
|
<html lang="ar" dir="rtl">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
window.customComponentsSchema = ${JSON.stringify(Object.fromEntries(e.map(s=>[s.name,s.schema])))};
|
|
42
42
|
window.customComponentsRaw = ${JSON.stringify(Object.fromEntries(e.map(s=>[s.name,s.rawComponent])))};
|
|
43
43
|
window.twilightDemoOptions = ${JSON.stringify(t)};
|
|
44
|
-
window.formBuilderMockUrl = '${
|
|
44
|
+
window.formBuilderMockUrl = '${g}';
|
|
45
45
|
window.translations = ${JSON.stringify(r)};
|
|
46
46
|
window.twilightDemoDynamicComponents = ${JSON.stringify(e)};
|
|
47
47
|
<\/script>
|
|
48
48
|
<link rel="icon" type="image/png" media="(prefers-color-scheme: light)" href="https://cdn.salla.network/images/logo/logo-square.png" />
|
|
49
49
|
<link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="https://cdn.salla.network/images/logo/logo-light-square.png" />
|
|
50
50
|
<script type="module" src="https://cdn.salla.network/js/twilight/latest/twilight.esm.js" async><\/script>
|
|
51
|
-
<script type="module" src="${
|
|
51
|
+
<script type="module" src="${x}" demo-mode defer><\/script>
|
|
52
52
|
<link rel="stylesheet" href="https://cdn.salla.network/fonts/pingarlt.css">
|
|
53
53
|
<link rel="stylesheet" href="https://cdn.salla.network/fonts/sallaicons.css?v=2.0.5">
|
|
54
54
|
|
|
@@ -103,4 +103,4 @@
|
|
|
103
103
|
<style>${t.css}</style>
|
|
104
104
|
<script>${t.js}<\/script>
|
|
105
105
|
</body>
|
|
106
|
-
</html>`}function
|
|
106
|
+
</html>`}function b(e){e&&i.existsSync(e)&&i.unlinkSync(e)}function B(){const e=a.join(process.cwd(),"twilight-bundle.json");return JSON.parse(i.readFileSync(e,"utf-8"))}function L(e){try{return e!=null&&e.fields?(e.fields.push({type:"string",format:"hidden",id:"twilight-bundles-component-name",value:e.name}),JSON.stringify(e==null?void 0:e.fields)):""}catch(t){return console.error("Error getting schema for component:",t),""}}function E(e={}){let t;return{name:"salla-component-demo",enforce:"pre",configResolved(r){var p,f,h,y,w,S;if((p=r.server)!=null&&p.open)return;const s=T.findComponentFiles();let k=e.components?Object.fromEntries(Object.entries(s).filter(([n])=>e.components.includes(n))):s;const u=".salla-temp",l=a.resolve(r.root,"node_modules",u),c=B(),j=Object.entries(k).map(function([n,o]){const O=`/@fs${o}`,v=c.components.find(m=>m.name===n),_=L(v),D=c.components.findIndex(m=>m.name===n);return{name:n,path:o,url:O,schema:_,rawComponent:v,order:D}}).sort((n,o)=>n.order-o.order);i.existsSync(l)||i.mkdirSync(l,{recursive:!0}),t=a.resolve(l,"index.html"),i.writeFileSync(t,N(j,{grid:{columns:((f=e.grid)==null?void 0:f.columns)||"repeat(1, 1fr)",gap:((h=e.grid)==null?void 0:h.gap)||"1rem",minWidth:((y=e.grid)==null?void 0:y.minWidth)||"300px"},css:e.css||"",js:e.js||"",formbuilder:{languages:((w=e.formbuilder)==null?void 0:w.languages)||["ar","en"],defaultLanguage:((S=e.formbuilder)==null?void 0:S.defaultLanguage)||"ar"},twilightBundles:c}));const d=()=>{b(t);try{i.rmdirSync(l)}catch{}};process.on("SIGINT",d),process.on("SIGTERM",d),process.on("exit",d),r.server.open=`/node_modules/${u}/index.html`},configureServer(r){},config(r){return{...r,server:{...r.server,watch:{usePolling:!0,interval:100}}}},closeBundle(){b(t);const r=a.resolve(process.cwd(),"node_modules/.salla-temp");try{i.rmdirSync(r)}catch{}}}}exports.sallaDemoPlugin=E;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { findComponentFiles as
|
|
2
|
-
import * as
|
|
3
|
-
import * as
|
|
4
|
-
const
|
|
5
|
-
let
|
|
6
|
-
|
|
7
|
-
function
|
|
1
|
+
import { findComponentFiles as O } from "./build.js";
|
|
2
|
+
import * as i from "fs";
|
|
3
|
+
import * as a from "path";
|
|
4
|
+
const $ = process.env.TWILIGHT_BUNDLES_URL || "https://cdn.salla.network/js/twilight-bundles/latest/twilight-bundles.js";
|
|
5
|
+
let g = process.env.TWILIGHT_FORM_BUILDER_MOCK_BASE_URL || "https://salla.design";
|
|
6
|
+
g = g.replace(/\/$/, "") + "/api/v1/form-builder-mock";
|
|
7
|
+
function _(e, t) {
|
|
8
8
|
const r = {
|
|
9
9
|
ar: {
|
|
10
10
|
toggleTheme: "تغيير المظهر",
|
|
@@ -74,14 +74,14 @@ function $(e, t) {
|
|
|
74
74
|
window.customComponentsSchema = ${JSON.stringify(Object.fromEntries(e.map((s) => [s.name, s.schema])))};
|
|
75
75
|
window.customComponentsRaw = ${JSON.stringify(Object.fromEntries(e.map((s) => [s.name, s.rawComponent])))};
|
|
76
76
|
window.twilightDemoOptions = ${JSON.stringify(t)};
|
|
77
|
-
window.formBuilderMockUrl = '${
|
|
77
|
+
window.formBuilderMockUrl = '${g}';
|
|
78
78
|
window.translations = ${JSON.stringify(r)};
|
|
79
79
|
window.twilightDemoDynamicComponents = ${JSON.stringify(e)};
|
|
80
80
|
<\/script>
|
|
81
81
|
<link rel="icon" type="image/png" media="(prefers-color-scheme: light)" href="https://cdn.salla.network/images/logo/logo-square.png" />
|
|
82
82
|
<link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="https://cdn.salla.network/images/logo/logo-light-square.png" />
|
|
83
83
|
<script type="module" src="https://cdn.salla.network/js/twilight/latest/twilight.esm.js" async><\/script>
|
|
84
|
-
<script type="module" src="${
|
|
84
|
+
<script type="module" src="${$}" demo-mode defer><\/script>
|
|
85
85
|
<link rel="stylesheet" href="https://cdn.salla.network/fonts/pingarlt.css">
|
|
86
86
|
<link rel="stylesheet" href="https://cdn.salla.network/fonts/sallaicons.css?v=2.0.5">
|
|
87
87
|
|
|
@@ -138,12 +138,12 @@ function $(e, t) {
|
|
|
138
138
|
</body>
|
|
139
139
|
</html>`;
|
|
140
140
|
}
|
|
141
|
-
function
|
|
142
|
-
e &&
|
|
141
|
+
function b(e) {
|
|
142
|
+
e && i.existsSync(e) && i.unlinkSync(e);
|
|
143
143
|
}
|
|
144
|
-
function
|
|
145
|
-
const e =
|
|
146
|
-
return JSON.parse(
|
|
144
|
+
function x() {
|
|
145
|
+
const e = a.join(process.cwd(), "twilight-bundle.json");
|
|
146
|
+
return JSON.parse(i.readFileSync(e, "utf-8"));
|
|
147
147
|
}
|
|
148
148
|
function R(e) {
|
|
149
149
|
try {
|
|
@@ -157,45 +157,45 @@ function R(e) {
|
|
|
157
157
|
return console.error("Error getting schema for component:", t), "";
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
-
function
|
|
160
|
+
function L(e = {}) {
|
|
161
161
|
let t;
|
|
162
162
|
return {
|
|
163
163
|
name: "salla-component-demo",
|
|
164
164
|
enforce: "pre",
|
|
165
165
|
configResolved(r) {
|
|
166
|
-
var
|
|
167
|
-
if ((
|
|
166
|
+
var u, f, h, y, w, S;
|
|
167
|
+
if ((u = r.server) != null && u.open)
|
|
168
168
|
return;
|
|
169
|
-
const s =
|
|
170
|
-
let
|
|
171
|
-
Object.entries(s).filter(([
|
|
169
|
+
const s = O();
|
|
170
|
+
let C = e.components ? Object.fromEntries(
|
|
171
|
+
Object.entries(s).filter(([n]) => e.components.includes(n))
|
|
172
172
|
) : s;
|
|
173
|
-
const
|
|
174
|
-
const
|
|
175
|
-
return { name:
|
|
176
|
-
});
|
|
177
|
-
|
|
173
|
+
const p = ".salla-temp", o = a.resolve(r.root, "node_modules", p), d = x(), k = Object.entries(C).map(function([n, l]) {
|
|
174
|
+
const T = `/@fs${l}`, v = d.components.find((m) => m.name === n), j = R(v), D = d.components.findIndex((m) => m.name === n);
|
|
175
|
+
return { name: n, path: l, url: T, schema: j, rawComponent: v, order: D };
|
|
176
|
+
}).sort((n, l) => n.order - l.order);
|
|
177
|
+
i.existsSync(o) || i.mkdirSync(o, { recursive: !0 }), t = a.resolve(o, "index.html"), i.writeFileSync(t, _(k, {
|
|
178
178
|
grid: {
|
|
179
|
-
columns: ((
|
|
180
|
-
gap: ((
|
|
181
|
-
minWidth: ((
|
|
179
|
+
columns: ((f = e.grid) == null ? void 0 : f.columns) || "repeat(1, 1fr)",
|
|
180
|
+
gap: ((h = e.grid) == null ? void 0 : h.gap) || "1rem",
|
|
181
|
+
minWidth: ((y = e.grid) == null ? void 0 : y.minWidth) || "300px"
|
|
182
182
|
},
|
|
183
183
|
css: e.css || "",
|
|
184
184
|
js: e.js || "",
|
|
185
185
|
formbuilder: {
|
|
186
|
-
languages: ((
|
|
187
|
-
defaultLanguage: ((
|
|
186
|
+
languages: ((w = e.formbuilder) == null ? void 0 : w.languages) || ["ar", "en"],
|
|
187
|
+
defaultLanguage: ((S = e.formbuilder) == null ? void 0 : S.defaultLanguage) || "ar"
|
|
188
188
|
},
|
|
189
|
-
twilightBundles:
|
|
189
|
+
twilightBundles: d
|
|
190
190
|
}));
|
|
191
|
-
const
|
|
192
|
-
|
|
191
|
+
const c = () => {
|
|
192
|
+
b(t);
|
|
193
193
|
try {
|
|
194
|
-
|
|
194
|
+
i.rmdirSync(o);
|
|
195
195
|
} catch {
|
|
196
196
|
}
|
|
197
197
|
};
|
|
198
|
-
process.on("SIGINT",
|
|
198
|
+
process.on("SIGINT", c), process.on("SIGTERM", c), process.on("exit", c), r.server.open = `/node_modules/${p}/index.html`;
|
|
199
199
|
},
|
|
200
200
|
configureServer(r) {
|
|
201
201
|
},
|
|
@@ -212,15 +212,15 @@ function B(e = {}) {
|
|
|
212
212
|
};
|
|
213
213
|
},
|
|
214
214
|
closeBundle() {
|
|
215
|
-
|
|
216
|
-
const r =
|
|
215
|
+
b(t);
|
|
216
|
+
const r = a.resolve(process.cwd(), "node_modules/.salla-temp");
|
|
217
217
|
try {
|
|
218
|
-
|
|
218
|
+
i.rmdirSync(r);
|
|
219
219
|
} catch {
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
222
|
};
|
|
223
223
|
}
|
|
224
224
|
export {
|
|
225
|
-
|
|
225
|
+
L as sallaDemoPlugin
|
|
226
226
|
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salla.sa/twilight-bundles",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.30",
|
|
4
4
|
"description": "SDK for Salla Twilight Bundles - Develop and build custom components for Salla platform",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/twilight-bundles.js",
|
|
7
7
|
"module": "./dist/twilight-bundles.js",
|
|
8
8
|
"bin": {
|
|
9
|
-
"tw-component": "./bin/tw-component.js",
|
|
9
|
+
"tw-create-component": "./bin/tw-create-component.js",
|
|
10
|
+
"tw-delete-component": "./bin/tw-delete-component.js",
|
|
10
11
|
"tw-init": "./bin/tw-init.js"
|
|
11
12
|
},
|
|
12
13
|
"exports": {
|
package/types/global.d.ts
CHANGED
|
File without changes
|