@likable-hair/svelte 3.0.23 → 3.0.25
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/components/simple/dashboards/DashboardGridShaper.svelte +66 -0
- package/dist/components/simple/dashboards/DashboardGridShaper.svelte.d.ts +14 -0
- package/dist/components/simple/dates/DatePickerTextField.svelte +10 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +3 -2
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<script>import Grid from "svelte-grid";
|
|
2
|
+
import gridHelp from "svelte-grid/build/helper/index.mjs";
|
|
3
|
+
const id = () => "_" + Math.random().toString(36).substr(2, 9);
|
|
4
|
+
let items = [
|
|
5
|
+
{
|
|
6
|
+
6: gridHelp.item({
|
|
7
|
+
x: 0,
|
|
8
|
+
y: 0,
|
|
9
|
+
w: 2,
|
|
10
|
+
h: 2
|
|
11
|
+
}),
|
|
12
|
+
id: id()
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
6: gridHelp.item({
|
|
16
|
+
x: 2,
|
|
17
|
+
y: 0,
|
|
18
|
+
w: 2,
|
|
19
|
+
h: 2
|
|
20
|
+
}),
|
|
21
|
+
id: id()
|
|
22
|
+
}
|
|
23
|
+
];
|
|
24
|
+
const breakpoint = 1;
|
|
25
|
+
const column = 6;
|
|
26
|
+
const cols = [[breakpoint, column]];
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<div class=demo-container style:width="100%">
|
|
30
|
+
<Grid bind:items={items} rowHeight={100} let:item let:dataItem {cols}>
|
|
31
|
+
<div class="widget">
|
|
32
|
+
<div class="content">
|
|
33
|
+
{dataItem.id}
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</Grid>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<style>
|
|
40
|
+
.widget {
|
|
41
|
+
background-color: rgb(var(--global-color-background-200));
|
|
42
|
+
width: 100%;
|
|
43
|
+
height: 100%;
|
|
44
|
+
border-radius: 8px;
|
|
45
|
+
padding: 2px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.content {
|
|
49
|
+
padding: 8px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:global(.svlt-grid-active) {
|
|
53
|
+
opacity: 1!important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
:global(.svlt-grid-shadow) {
|
|
57
|
+
/* Back shadow */
|
|
58
|
+
background-color: rgb(var(--global-color-primary-900), .5) !important;
|
|
59
|
+
border-radius: 10px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:global(.svlt-grid-resizer::after) {
|
|
63
|
+
/* Resizer color */
|
|
64
|
+
border-color: white !important;
|
|
65
|
+
}
|
|
66
|
+
</style>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
};
|
|
9
|
+
export type DashboardGridShaperProps = typeof __propDef.props;
|
|
10
|
+
export type DashboardGridShaperEvents = typeof __propDef.events;
|
|
11
|
+
export type DashboardGridShaperSlots = typeof __propDef.slots;
|
|
12
|
+
export default class DashboardGridShaper extends SvelteComponentTyped<DashboardGridShaperProps, DashboardGridShaperEvents, DashboardGridShaperSlots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -87,6 +87,8 @@ function handleInputChange(event) {
|
|
|
87
87
|
month: Number(oneBasedMonth),
|
|
88
88
|
year: Number(year)
|
|
89
89
|
}).toJSDate();
|
|
90
|
+
} else {
|
|
91
|
+
selectedDate = void 0;
|
|
90
92
|
}
|
|
91
93
|
}
|
|
92
94
|
}, 30);
|
|
@@ -105,6 +107,14 @@ function handleYearSelect() {
|
|
|
105
107
|
function handleMonthSelect() {
|
|
106
108
|
mask.value = "";
|
|
107
109
|
}
|
|
110
|
+
$:
|
|
111
|
+
if (!!selectedDate) {
|
|
112
|
+
setTimeout(() => {
|
|
113
|
+
if (!!selectedDate) {
|
|
114
|
+
mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
|
|
115
|
+
}
|
|
116
|
+
}, 30);
|
|
117
|
+
}
|
|
108
118
|
</script>
|
|
109
119
|
|
|
110
120
|
<MediaQuery let:mAndDown>
|
package/dist/index.d.ts
CHANGED
|
@@ -52,3 +52,4 @@ export { default as theme, toggleTheme, setTheme } from './stores/theme';
|
|
|
52
52
|
export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';
|
|
53
53
|
export { default as CollapsibleSideBarLayout } from './components/layouts/CollapsibleSideBarLayout.svelte';
|
|
54
54
|
export { default as StableDividedSideBarLayout } from './components/layouts/StableDividedSideBarLayout.svelte';
|
|
55
|
+
export { default as UnstableDividedSideBarLayout } from './components/layouts/UnstableDividedSideBarLayout.svelte';
|
package/dist/index.js
CHANGED
|
@@ -52,3 +52,4 @@ export { default as theme, toggleTheme, setTheme } from './stores/theme';
|
|
|
52
52
|
export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';
|
|
53
53
|
export { default as CollapsibleSideBarLayout } from './components/layouts/CollapsibleSideBarLayout.svelte';
|
|
54
54
|
export { default as StableDividedSideBarLayout } from './components/layouts/StableDividedSideBarLayout.svelte';
|
|
55
|
+
export { default as UnstableDividedSideBarLayout } from './components/layouts/UnstableDividedSideBarLayout.svelte';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@likable-hair/svelte",
|
|
3
3
|
"description": "A Svelte component for likablehair",
|
|
4
|
-
"version": "3.0.
|
|
4
|
+
"version": "3.0.25",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"host": "vite --host",
|
|
7
7
|
"dev": "vite dev",
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
"imask": "^7.1.0-alpha.0",
|
|
65
65
|
"lodash": "^4.17.21",
|
|
66
66
|
"luxon": "^3.3.0",
|
|
67
|
-
"svelte-chartjs": "^3.1.2"
|
|
67
|
+
"svelte-chartjs": "^3.1.2",
|
|
68
|
+
"svelte-grid": "^5.1.2"
|
|
68
69
|
}
|
|
69
70
|
}
|