@taqwim/solid 0.1.0-beta.3 → 0.1.0-beta.5
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/dist/index.js +63 -60
- package/dist/source/HijriCalendar.jsx +19 -9
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { createComponent as e, insert as t,
|
|
2
|
-
import { createCalendar as
|
|
3
|
-
import { createContext as l, createEffect as u, createRenderEffect as d, createSignal as f, onCleanup as p, onMount as m, splitProps as h, useContext as g } from "solid-js";
|
|
1
|
+
import { createComponent as e, insert as t, mergeProps as n, spread as r, template as i, use as a } from "solid-js/web";
|
|
2
|
+
import { createCalendar as o, getCellDisplayValues as s } from "@taqwim/calendar-core";
|
|
3
|
+
import { children as c, createContext as l, createEffect as u, createRenderEffect as d, createSignal as f, onCleanup as p, onMount as m, splitProps as h, useContext as g } from "solid-js";
|
|
4
4
|
//#region src/context.ts
|
|
5
5
|
var _ = l();
|
|
6
6
|
function v() {
|
|
@@ -14,7 +14,7 @@ var y = /* @__PURE__ */ "defaultValue.value.onValueChange.defaultPlaceholder.pla
|
|
|
14
14
|
//#endregion
|
|
15
15
|
//#region src/useCalendar.ts
|
|
16
16
|
function b(e) {
|
|
17
|
-
let t =
|
|
17
|
+
let t = o(e()), [n, r] = f(t.getSnapshot());
|
|
18
18
|
return p(t.subscribe(() => {
|
|
19
19
|
r(t.getSnapshot());
|
|
20
20
|
})), d(() => {
|
|
@@ -26,13 +26,13 @@ function b(e) {
|
|
|
26
26
|
}
|
|
27
27
|
//#endregion
|
|
28
28
|
//#region src/HijriCalendar.tsx
|
|
29
|
-
var x = /*#__PURE__*/
|
|
29
|
+
var x = /*#__PURE__*/ i("<div><div style=position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0><div role=heading aria-level=2>"), S = /*#__PURE__*/ i("<div role=group data-taqwim-calendar-header>"), C = /*#__PURE__*/ i("<div data-taqwim-calendar-heading>"), w = /*#__PURE__*/ i("<button>"), T = /*#__PURE__*/ i("<div tabindex=-1>"), E = /*#__PURE__*/ i("<div aria-hidden=true data-taqwim-calendar-grid-head>"), D = /*#__PURE__*/ i("<div data-taqwim-calendar-grid-body>"), O = /*#__PURE__*/ i("<div role=row data-taqwim-calendar-grid-row>"), k = /*#__PURE__*/ i("<div data-taqwim-calendar-head-cell>"), A = /*#__PURE__*/ i("<div role=gridcell>");
|
|
30
30
|
function j(e, t) {
|
|
31
|
-
return typeof e == "function" ? e(t()) : e;
|
|
31
|
+
return typeof e == "function" ? c(() => e(t()))() : e;
|
|
32
32
|
}
|
|
33
|
-
function M(
|
|
34
|
-
let [
|
|
35
|
-
...
|
|
33
|
+
function M(i) {
|
|
34
|
+
let [o, s, c] = h(i, y, ["children", "initialFocus"]), l, d, { store: f, state: p } = b(() => ({
|
|
35
|
+
...o,
|
|
36
36
|
onFocusedDateChange: (e) => {
|
|
37
37
|
d = e ? f.formatter.isoDate(e) : void 0;
|
|
38
38
|
}
|
|
@@ -53,8 +53,8 @@ function M(n) {
|
|
|
53
53
|
state: p
|
|
54
54
|
},
|
|
55
55
|
get children() {
|
|
56
|
-
var e = x(),
|
|
57
|
-
return typeof u == "function" ?
|
|
56
|
+
var e = x(), i = e.firstChild, o = i.firstChild, u = l;
|
|
57
|
+
return typeof u == "function" ? a(u, e) : l = e, r(e, n(v, c, { onKeyDown: g }), !1, !0), t(e, () => j(s.children, () => ({
|
|
58
58
|
get months() {
|
|
59
59
|
return p().months;
|
|
60
60
|
},
|
|
@@ -71,134 +71,137 @@ function M(n) {
|
|
|
71
71
|
return p();
|
|
72
72
|
},
|
|
73
73
|
store: f
|
|
74
|
-
})),
|
|
74
|
+
})), i), t(o, () => p().fullCalendarLabel), e;
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
77
|
}
|
|
78
78
|
function N(e) {
|
|
79
|
-
let { state:
|
|
79
|
+
let { state: i } = v(), [a, o] = h(e, ["children"]);
|
|
80
80
|
return (() => {
|
|
81
81
|
var e = S();
|
|
82
|
-
return
|
|
83
|
-
return
|
|
82
|
+
return r(e, n({ get "aria-label"() {
|
|
83
|
+
return i().fullCalendarLabel;
|
|
84
84
|
} }, o), !1, !0), t(e, () => a.children), e;
|
|
85
85
|
})();
|
|
86
86
|
}
|
|
87
87
|
function P(e) {
|
|
88
|
-
let { state:
|
|
88
|
+
let { state: i } = v(), a = "children" in e, [o, s] = h(e, ["children"]);
|
|
89
89
|
return (() => {
|
|
90
90
|
var e = C();
|
|
91
|
-
return
|
|
92
|
-
return
|
|
93
|
-
} }, s), !1, !0), t(e, (() =>
|
|
94
|
-
var e = n(() => o.children === void 0);
|
|
95
|
-
return () => e() ? a().headingValue : j(o.children, () => a().headingValue);
|
|
96
|
-
})()), e;
|
|
91
|
+
return r(e, n({ get "data-disabled"() {
|
|
92
|
+
return i().disabled ? "" : void 0;
|
|
93
|
+
} }, s), !1, !0), t(e, () => a ? j(o.children, () => i().headingValue) : i().headingValue), e;
|
|
97
94
|
})();
|
|
98
95
|
}
|
|
99
96
|
function F(e) {
|
|
100
|
-
let { store:
|
|
97
|
+
let { store: i, state: a } = v(), [o, s] = h(e, ["children"]), c = () => (a(), i.getPrevButtonProps());
|
|
101
98
|
return (() => {
|
|
102
99
|
var e = w();
|
|
103
|
-
return
|
|
100
|
+
return r(e, n(c, s, {
|
|
104
101
|
get disabled() {
|
|
105
102
|
return a().isPrevDisabled;
|
|
106
103
|
},
|
|
107
|
-
onClick: () =>
|
|
104
|
+
onClick: () => i.prevPage()
|
|
108
105
|
}), !1, !0), t(e, () => j(o.children, () => a().isPrevDisabled)), e;
|
|
109
106
|
})();
|
|
110
107
|
}
|
|
111
108
|
function I(e) {
|
|
112
|
-
let { store:
|
|
109
|
+
let { store: i, state: a } = v(), [o, s] = h(e, ["children"]), c = () => (a(), i.getNextButtonProps());
|
|
113
110
|
return (() => {
|
|
114
111
|
var e = w();
|
|
115
|
-
return
|
|
112
|
+
return r(e, n(c, s, {
|
|
116
113
|
get disabled() {
|
|
117
114
|
return a().isNextDisabled;
|
|
118
115
|
},
|
|
119
|
-
onClick: () =>
|
|
116
|
+
onClick: () => i.nextPage()
|
|
120
117
|
}), !1, !0), t(e, () => j(o.children, () => a().isNextDisabled)), e;
|
|
121
118
|
})();
|
|
122
119
|
}
|
|
123
120
|
function L(e) {
|
|
124
|
-
let { store:
|
|
121
|
+
let { store: i, state: a } = v(), [o, s] = h(e, ["month", "children"]), c = () => o.month ?? a().months[0], l = () => (a(), i.getGridProps(c()));
|
|
125
122
|
return (() => {
|
|
126
123
|
var e = T();
|
|
127
|
-
return
|
|
124
|
+
return r(e, n(l, s), !1, !0), t(e, () => j(o.children, c)), e;
|
|
128
125
|
})();
|
|
129
126
|
}
|
|
130
127
|
function R(e) {
|
|
131
|
-
let { state: n } = v(), [
|
|
128
|
+
let { state: n } = v(), [i, a] = h(e, ["children"]);
|
|
132
129
|
return (() => {
|
|
133
130
|
var e = E();
|
|
134
|
-
return
|
|
131
|
+
return r(e, a, !1, !0), t(e, () => j(i.children, () => n().weekDays)), e;
|
|
135
132
|
})();
|
|
136
133
|
}
|
|
137
134
|
function z(e) {
|
|
138
|
-
let [n,
|
|
135
|
+
let [n, i] = h(e, ["children"]);
|
|
139
136
|
return (() => {
|
|
140
137
|
var e = D();
|
|
141
|
-
return
|
|
138
|
+
return r(e, i, !1, !0), t(e, () => n.children), e;
|
|
142
139
|
})();
|
|
143
140
|
}
|
|
144
141
|
function B(e) {
|
|
145
|
-
let [n,
|
|
142
|
+
let [n, i] = h(e, ["children"]);
|
|
146
143
|
return (() => {
|
|
147
144
|
var e = O();
|
|
148
|
-
return
|
|
145
|
+
return r(e, i, !1, !0), t(e, () => n.children), e;
|
|
149
146
|
})();
|
|
150
147
|
}
|
|
151
148
|
function V(e) {
|
|
152
|
-
let [n,
|
|
149
|
+
let [n, i] = h(e, ["children"]);
|
|
153
150
|
return (() => {
|
|
154
151
|
var e = k();
|
|
155
|
-
return
|
|
152
|
+
return r(e, i, !1, !0), t(e, () => n.children), e;
|
|
156
153
|
})();
|
|
157
154
|
}
|
|
158
155
|
function H(e) {
|
|
159
|
-
let [
|
|
156
|
+
let { store: i, state: a } = v(), [o, s] = h(e, ["day", "children"]), c = () => (a(), i.getCellProps(o.day));
|
|
160
157
|
return (() => {
|
|
161
158
|
var e = A();
|
|
162
|
-
return
|
|
159
|
+
return r(e, n({
|
|
163
160
|
get "aria-selected"() {
|
|
164
|
-
return
|
|
161
|
+
return o.day.isSelected || void 0;
|
|
165
162
|
},
|
|
166
163
|
get "aria-disabled"() {
|
|
167
|
-
return
|
|
164
|
+
return o.day.isDisabled || o.day.isUnavailable || void 0;
|
|
165
|
+
},
|
|
166
|
+
get "data-taqwim-calendar-cell"() {
|
|
167
|
+
return c()["data-taqwim-calendar-cell"];
|
|
168
|
+
},
|
|
169
|
+
get "data-tooltip"() {
|
|
170
|
+
return c()["data-tooltip"];
|
|
171
|
+
},
|
|
172
|
+
get title() {
|
|
173
|
+
return c()["data-tooltip"];
|
|
168
174
|
},
|
|
169
175
|
get "data-disabled"() {
|
|
170
|
-
return
|
|
176
|
+
return o.day.isDisabled ? "" : void 0;
|
|
171
177
|
},
|
|
172
178
|
get "data-outside-month"() {
|
|
173
|
-
return
|
|
179
|
+
return o.day.isOutsideMonth ? "" : void 0;
|
|
174
180
|
}
|
|
175
|
-
},
|
|
181
|
+
}, s), !1, !0), t(e, () => o.children), e;
|
|
176
182
|
})();
|
|
177
183
|
}
|
|
178
184
|
function U(e) {
|
|
179
|
-
let { store:
|
|
185
|
+
let { store: i, state: a } = v(), o = "children" in e, [c, l] = h(e, ["day", "children"]), u = () => s(c.day, i.formatter, a().showGregorian, a().dateEmphasis), d = () => (a(), i.getCellTriggerProps(c.day));
|
|
180
186
|
function f() {
|
|
181
|
-
|
|
187
|
+
c.day.isDisabled || c.day.isUnavailable || i.select(c.day.date);
|
|
182
188
|
}
|
|
183
189
|
function p() {
|
|
184
|
-
|
|
190
|
+
c.day.isDisabled || c.day.isFocused || i.focusDate(c.day.date);
|
|
185
191
|
}
|
|
186
192
|
return (() => {
|
|
187
193
|
var e = w();
|
|
188
|
-
return
|
|
194
|
+
return r(e, n(d, l, {
|
|
189
195
|
onClick: f,
|
|
190
196
|
onFocus: p
|
|
191
|
-
}), !1, !0), t(e, (() => {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
day: s.day
|
|
200
|
-
}));
|
|
201
|
-
})()), e;
|
|
197
|
+
}), !1, !0), t(e, () => o ? j(c.children, () => ({
|
|
198
|
+
dayValue: u().dayValue,
|
|
199
|
+
hijriDayValue: u().hijriDayValue,
|
|
200
|
+
gregorianDayValue: u().gregorianDayValue,
|
|
201
|
+
primaryDayValue: u().primaryDayValue,
|
|
202
|
+
secondaryDayValue: u().secondaryDayValue,
|
|
203
|
+
day: c.day
|
|
204
|
+
})) : u().dayValue), e;
|
|
202
205
|
})();
|
|
203
206
|
}
|
|
204
207
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getCellDisplayValues } from '@taqwim/calendar-core';
|
|
2
|
-
import { createEffect, onMount, splitProps } from 'solid-js';
|
|
2
|
+
import { children, createEffect, onMount, splitProps } from 'solid-js';
|
|
3
3
|
import { HijriCalendarContext, useHijriCalendarContext } from './context';
|
|
4
4
|
import { OPTION_KEYS } from './types';
|
|
5
5
|
import { createCalendarStore } from './useCalendar';
|
|
@@ -30,8 +30,11 @@ import { createCalendarStore } from './useCalendar';
|
|
|
30
30
|
* function, and the JSX subtree is created once and then updated in place by
|
|
31
31
|
* the fine-grained bindings inside it.
|
|
32
32
|
*/
|
|
33
|
-
function renderChildren(
|
|
34
|
-
|
|
33
|
+
function renderChildren(raw, props) {
|
|
34
|
+
if (typeof raw !== 'function')
|
|
35
|
+
return raw;
|
|
36
|
+
const resolved = children(() => raw(props()));
|
|
37
|
+
return resolved();
|
|
35
38
|
}
|
|
36
39
|
export function HijriCalendarRoot(props) {
|
|
37
40
|
const [options, local, domProps] = splitProps(props, OPTION_KEYS, ['children', 'initialFocus']);
|
|
@@ -120,9 +123,10 @@ export function HijriCalendarHeader(props) {
|
|
|
120
123
|
}
|
|
121
124
|
export function HijriCalendarHeading(props) {
|
|
122
125
|
const { state } = useHijriCalendarContext();
|
|
126
|
+
const hasChildren = 'children' in props;
|
|
123
127
|
const [local, rest] = splitProps(props, ['children']);
|
|
124
128
|
return (<div data-taqwim-calendar-heading="" data-disabled={state().disabled ? '' : undefined} {...rest}>
|
|
125
|
-
{
|
|
129
|
+
{hasChildren ? renderChildren(local.children, () => state().headingValue) : state().headingValue}
|
|
126
130
|
</div>);
|
|
127
131
|
}
|
|
128
132
|
export function HijriCalendarPrev(props) {
|
|
@@ -193,13 +197,19 @@ export function HijriCalendarHeadCell(props) {
|
|
|
193
197
|
</div>);
|
|
194
198
|
}
|
|
195
199
|
export function HijriCalendarCell(props) {
|
|
200
|
+
const { store, state } = useHijriCalendarContext();
|
|
196
201
|
const [local, rest] = splitProps(props, ['day', 'children']);
|
|
197
|
-
|
|
202
|
+
const cellProps = () => {
|
|
203
|
+
void state();
|
|
204
|
+
return store.getCellProps(local.day);
|
|
205
|
+
};
|
|
206
|
+
return (<div role="gridcell" aria-selected={local.day.isSelected || undefined} aria-disabled={local.day.isDisabled || local.day.isUnavailable || undefined} data-taqwim-calendar-cell={cellProps()['data-taqwim-calendar-cell']} data-tooltip={cellProps()['data-tooltip']} title={cellProps()['data-tooltip']} data-disabled={local.day.isDisabled ? '' : undefined} data-outside-month={local.day.isOutsideMonth ? '' : undefined} {...rest}>
|
|
198
207
|
{local.children}
|
|
199
208
|
</div>);
|
|
200
209
|
}
|
|
201
210
|
export function HijriCalendarCellTrigger(props) {
|
|
202
211
|
const { store, state } = useHijriCalendarContext();
|
|
212
|
+
const hasChildren = 'children' in props;
|
|
203
213
|
const [local, rest] = splitProps(props, ['day', 'children']);
|
|
204
214
|
const display = () => getCellDisplayValues(local.day, store.formatter, state().showGregorian, state().dateEmphasis);
|
|
205
215
|
/*
|
|
@@ -227,15 +237,15 @@ export function HijriCalendarCellTrigger(props) {
|
|
|
227
237
|
store.focusDate(local.day.date);
|
|
228
238
|
}
|
|
229
239
|
return (<button {...triggerProps()} {...rest} onClick={onClick} onFocus={onFocus}>
|
|
230
|
-
{
|
|
231
|
-
?
|
|
232
|
-
: renderChildren(local.children, () => ({
|
|
240
|
+
{hasChildren
|
|
241
|
+
? renderChildren(local.children, () => ({
|
|
233
242
|
dayValue: display().dayValue,
|
|
234
243
|
hijriDayValue: display().hijriDayValue,
|
|
235
244
|
gregorianDayValue: display().gregorianDayValue,
|
|
236
245
|
primaryDayValue: display().primaryDayValue,
|
|
237
246
|
secondaryDayValue: display().secondaryDayValue,
|
|
238
247
|
day: local.day,
|
|
239
|
-
}))
|
|
248
|
+
}))
|
|
249
|
+
: display().dayValue}
|
|
240
250
|
</button>);
|
|
241
251
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taqwim/solid",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Headless Solid components for Hijri calendars, built on @taqwim/calendar-core",
|
|
6
6
|
"keywords": [
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@taqwim/calendar-core": "0.1.0-beta.
|
|
50
|
-
"@taqwim/core": "0.1.0-beta.
|
|
49
|
+
"@taqwim/calendar-core": "0.1.0-beta.5",
|
|
50
|
+
"@taqwim/core": "0.1.0-beta.5"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@arethetypeswrong/cli": "^0.18.2",
|