@forcecalendar/interface 0.7.0 → 0.8.0

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.
Files changed (8) hide show
  1. package/README.md +24 -10
  2. package/dist/force-calendar-interface.esm.js +7349 -0
  3. package/dist/force-calendar-interface.esm.js.map +1 -0
  4. package/dist/force-calendar-interface.umd.js +1487 -0
  5. package/dist/force-calendar-interface.umd.js.map +1 -0
  6. package/package.json +10 -3
  7. package/dist/assets/index-CDzXWV3y.js +0 -1486
  8. package/dist/index.html +0 -256
package/dist/index.html DELETED
@@ -1,256 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Force Calendar | Enterprise Component Demo</title>
7
- <style>
8
- :root {
9
- --sidebar-width: 300px;
10
- --header-height: 64px;
11
- --primary-blue: #2563EB;
12
- --bg-gray: #F8FAFC;
13
- --border-color: #E2E8F0;
14
- }
15
-
16
- body, html {
17
- margin: 0;
18
- padding: 0;
19
- height: 100vh;
20
- width: 100vw;
21
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
22
- background-color: var(--bg-gray);
23
- color: #1E293B;
24
- overflow: hidden;
25
- }
26
-
27
- .dashboard {
28
- display: flex;
29
- flex-direction: column;
30
- height: 100vh;
31
- }
32
-
33
- header {
34
- height: var(--header-height);
35
- background: white;
36
- border-bottom: 1px solid var(--border-color);
37
- display: flex;
38
- align-items: center;
39
- padding: 0 24px;
40
- justify-content: space-between;
41
- z-index: 100;
42
- }
43
-
44
- .logo-area {
45
- display: flex;
46
- align-items: center;
47
- gap: 12px;
48
- }
49
-
50
- .logo-icon {
51
- width: 32px;
52
- height: 32px;
53
- background: var(--primary-blue);
54
- border-radius: 8px;
55
- display: flex;
56
- align-items: center;
57
- justify-content: center;
58
- color: white;
59
- font-weight: bold;
60
- }
61
-
62
- .logo-text {
63
- font-size: 18px;
64
- font-weight: 700;
65
- letter-spacing: -0.02em;
66
- }
67
-
68
- .version-badge {
69
- background: #EFF6FF;
70
- color: var(--primary-blue);
71
- font-size: 11px;
72
- font-weight: 600;
73
- padding: 2px 8px;
74
- border-radius: 12px;
75
- margin-left: 8px;
76
- }
77
-
78
- main {
79
- flex: 1;
80
- display: flex;
81
- overflow: hidden;
82
- }
83
-
84
- .sidebar {
85
- width: var(--sidebar-width);
86
- background: white;
87
- border-right: 1px solid var(--border-color);
88
- display: flex;
89
- flex-direction: column;
90
- padding: 24px;
91
- gap: 32px;
92
- overflow-y: auto;
93
- }
94
-
95
- .content {
96
- flex: 1;
97
- padding: 24px;
98
- overflow: hidden;
99
- display: flex;
100
- flex-direction: column;
101
- }
102
-
103
- .calendar-container {
104
- flex: 1;
105
- background: white;
106
- border-radius: 12px;
107
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
108
- overflow: hidden;
109
- }
110
-
111
- h3 {
112
- font-size: 14px;
113
- text-transform: uppercase;
114
- letter-spacing: 0.05em;
115
- color: #64748B;
116
- margin-bottom: 16px;
117
- }
118
-
119
- .control-group {
120
- display: flex;
121
- flex-direction: column;
122
- gap: 12px;
123
- }
124
-
125
- .btn {
126
- background: white;
127
- border: 1px solid var(--border-color);
128
- padding: 10px 16px;
129
- border-radius: 8px;
130
- font-size: 14px;
131
- font-weight: 500;
132
- cursor: pointer;
133
- text-align: left;
134
- transition: all 0.2s;
135
- display: flex;
136
- align-items: center;
137
- gap: 10px;
138
- }
139
-
140
- .btn:hover {
141
- background: #F1F5F9;
142
- border-color: #CBD5E1;
143
- }
144
-
145
- .btn-primary {
146
- background: var(--primary-blue);
147
- color: white;
148
- border-color: var(--primary-blue);
149
- }
150
-
151
- .btn-primary:hover {
152
- background: #1D4ED8;
153
- border-color: #1D4ED8;
154
- }
155
-
156
- .event-log {
157
- flex: 1;
158
- display: flex;
159
- flex-direction: column;
160
- min-height: 200px;
161
- }
162
-
163
- #log-entries {
164
- flex: 1;
165
- background: #0F172A;
166
- color: #94A3B8;
167
- font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
168
- font-size: 12px;
169
- padding: 12px;
170
- border-radius: 8px;
171
- overflow-y: auto;
172
- line-height: 1.5;
173
- }
174
-
175
- .log-entry {
176
- margin-bottom: 4px;
177
- border-left: 2px solid #334155;
178
- padding-left: 8px;
179
- }
180
-
181
- .log-time {
182
- color: #475569;
183
- margin-right: 8px;
184
- }
185
-
186
- .log-tag {
187
- color: #38BDF8;
188
- margin-right: 8px;
189
- }
190
-
191
- force-calendar {
192
- height: 100%;
193
- }
194
-
195
- @media (max-width: 1024px) {
196
- .sidebar {
197
- display: none;
198
- }
199
- }
200
- </style>
201
- <script type="module" crossorigin src="/assets/index-CDzXWV3y.js"></script>
202
- </head>
203
- <body>
204
- <div class="dashboard">
205
- <header>
206
- <div class="logo-area">
207
- <div class="logo-icon">F</div>
208
- <div class="logo-text">Force Calendar <span class="version-badge">v0.1.0-alpha</span></div>
209
- </div>
210
- <div class="header-actions">
211
- <a href="https://github.com/forceCalendar/forceCalendar" target="_blank" class="btn">
212
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
213
- <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
214
- </svg>
215
- View Source
216
- </a>
217
- </div>
218
- </header>
219
-
220
- <main>
221
- <aside class="sidebar">
222
- <div class="control-group">
223
- <h3>Actions</h3>
224
- <button class="btn btn-primary" id="add-random-event">
225
- <span>+</span> Add Random Event
226
- </button>
227
- <button class="btn" id="go-to-today">
228
- Go to Today
229
- </button>
230
- </div>
231
-
232
- <div class="control-group">
233
- <h3>Views</h3>
234
- <button class="btn" data-view="month">Month Grid</button>
235
- <button class="btn" data-view="week">Week View</button>
236
- <button class="btn" data-view="day">Day View</button>
237
- </div>
238
-
239
- <div class="event-log">
240
- <h3>Activity Log</h3>
241
- <div id="log-entries">
242
- <div class="log-entry"><span class="log-time">10:00:00</span> <span class="log-tag">[System]</span> Initializing...</div>
243
- </div>
244
- </div>
245
- </aside>
246
-
247
- <section class="content">
248
- <div class="calendar-container">
249
- <force-calendar id="main-calendar" view="month"></force-calendar>
250
- </div>
251
- </section>
252
- </main>
253
- </div>
254
-
255
- </body>
256
- </html>