@designbasekorea/wordpress-ui 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -4
- package/dist/browser.cjs +1 -1
- package/dist/browser.d.ts +4 -2
- package/dist/browser.esm.js +1 -1
- package/dist/browser.iife.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.esm.js +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.d.ts +29 -109
- package/dist/react/index.esm.js +1 -1
- package/dist/styles/controls.css +1 -1
- package/dist/styles/shell.css +1 -1
- package/dist/styles.css +1 -1
- package/examples/react.tsx +16 -16
- package/examples/vanilla.html +25 -25
- package/package.json +1 -1
package/examples/react.tsx
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import '@designbasekorea/wordpress-ui/styles.css';
|
|
2
2
|
|
|
3
3
|
import {
|
|
4
|
-
AdminDataTable,
|
|
5
4
|
AdminPage,
|
|
6
5
|
AdminPageContent,
|
|
7
6
|
AdminPageHeader,
|
|
8
|
-
AdminSection,
|
|
9
7
|
AdminShell,
|
|
10
8
|
Button,
|
|
9
|
+
Section,
|
|
10
|
+
Table,
|
|
11
11
|
} from '@designbasekorea/wordpress-ui/react';
|
|
12
12
|
|
|
13
13
|
type PageRow = {
|
|
@@ -31,23 +31,23 @@ export function WordPressAdminExample() {
|
|
|
31
31
|
{ id: 'settings', label: '설정', href: '#settings' },
|
|
32
32
|
]}
|
|
33
33
|
>
|
|
34
|
+
<AdminPageHeader
|
|
35
|
+
title="페이지 목록"
|
|
36
|
+
description="조회·저장·권한 처리는 플러그인이 담당합니다."
|
|
37
|
+
actions={<Button variant="primary" size="s">새 페이지</Button>}
|
|
38
|
+
/>
|
|
34
39
|
<AdminPage>
|
|
35
|
-
<AdminPageHeader
|
|
36
|
-
title="페이지 목록"
|
|
37
|
-
description="조회·저장·권한 처리는 플러그인이 담당합니다."
|
|
38
|
-
actions={<Button variant="primary" size="s">새 페이지</Button>}
|
|
39
|
-
/>
|
|
40
40
|
<AdminPageContent>
|
|
41
|
-
<
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
{
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
rowKey=
|
|
41
|
+
<Section title="최근 페이지" description="상태가 바뀌면 플러그인 상태를 다시 전달합니다." fullWidth>
|
|
42
|
+
<Table
|
|
43
|
+
columns={JSON.stringify([
|
|
44
|
+
{ key: 'title', header: '제목' },
|
|
45
|
+
{ key: 'status', header: '상태' },
|
|
46
|
+
])}
|
|
47
|
+
data={JSON.stringify(rows)}
|
|
48
|
+
rowKey="id"
|
|
49
49
|
/>
|
|
50
|
-
</
|
|
50
|
+
</Section>
|
|
51
51
|
</AdminPageContent>
|
|
52
52
|
</AdminPage>
|
|
53
53
|
</AdminShell>
|
package/examples/vanilla.html
CHANGED
|
@@ -8,27 +8,27 @@
|
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
10
|
<div class="designbase-wp-admin">
|
|
11
|
-
<div class="
|
|
12
|
-
<aside id="example-sidebar" class="
|
|
13
|
-
<div class="
|
|
14
|
-
<div class="
|
|
15
|
-
<nav class="
|
|
16
|
-
<a class="
|
|
17
|
-
<a class="
|
|
18
|
-
<a class="
|
|
11
|
+
<div class="designbase-wp-admin__shell">
|
|
12
|
+
<aside id="example-sidebar" class="designbase-wp-admin__shell-sidebar">
|
|
13
|
+
<div class="designbase-wp-admin__sidebar" aria-label="PageNest 메뉴">
|
|
14
|
+
<div class="designbase-wp-admin__sidebar-title">PageNest</div>
|
|
15
|
+
<nav class="designbase-wp-admin__sidebar-nav">
|
|
16
|
+
<a class="designbase-wp-admin__sidebar-link is-active" href="#" aria-current="page"><i class="designbase-wp-admin__icon icon-dashboard" aria-hidden="true"></i><span class="designbase-wp-admin__sidebar-label">대시보드</span></a>
|
|
17
|
+
<a class="designbase-wp-admin__sidebar-link" href="#"><i class="designbase-wp-admin__icon icon-file-manager" aria-hidden="true"></i><span class="designbase-wp-admin__sidebar-label">페이지 목록</span></a>
|
|
18
|
+
<a class="designbase-wp-admin__sidebar-link" href="#"><i class="designbase-wp-admin__icon icon-settings" aria-hidden="true"></i><span class="designbase-wp-admin__sidebar-label">설정</span></a>
|
|
19
19
|
</nav>
|
|
20
|
-
<button class="
|
|
20
|
+
<button class="designbase-wp-admin__sidebar-close" type="button" data-sidebar-close>닫기</button>
|
|
21
21
|
</div>
|
|
22
22
|
</aside>
|
|
23
|
-
<main class="
|
|
23
|
+
<main class="designbase-wp-admin__shell-main">
|
|
24
24
|
<button
|
|
25
|
-
class="
|
|
25
|
+
class="designbase-wp-admin__shell-menu-toggle"
|
|
26
26
|
type="button"
|
|
27
|
-
data-
|
|
27
|
+
data-sidebar-toggle="example-sidebar"
|
|
28
28
|
aria-controls="example-sidebar"
|
|
29
29
|
aria-expanded="false"
|
|
30
|
-
><i class="
|
|
31
|
-
<div class="
|
|
30
|
+
><i class="designbase-wp-admin__icon icon-menu" aria-hidden="true"></i><span class="screen-reader-text">메뉴 열기</span></button>
|
|
31
|
+
<div class="designbase-wp-admin__page">
|
|
32
32
|
<db-page-header
|
|
33
33
|
title="페이지 목록"
|
|
34
34
|
description="REST와 권한 상태는 소비자가 소유하고 UI는 상태만 표현합니다."
|
|
@@ -39,33 +39,33 @@
|
|
|
39
39
|
|
|
40
40
|
<db-alert variant="info" title="wordpress-ui 예제" message="ui-wc primitives와 관리자 패턴은 이 root 안에서만 동작합니다." closable="false"></db-alert>
|
|
41
41
|
|
|
42
|
-
<form class="
|
|
43
|
-
<div class="
|
|
44
|
-
<label>검색 <input class="
|
|
42
|
+
<form class="designbase-wp-admin__filter-bar" role="search">
|
|
43
|
+
<div class="designbase-wp-admin__filter-bar__fields">
|
|
44
|
+
<label>검색 <input class="" type="search" placeholder="페이지 검색"></label>
|
|
45
45
|
<label>상태
|
|
46
|
-
<select class="
|
|
46
|
+
<select class="">
|
|
47
47
|
<option>전체 상태</option>
|
|
48
48
|
<option>공개</option>
|
|
49
49
|
<option>초안</option>
|
|
50
50
|
</select>
|
|
51
51
|
</label>
|
|
52
52
|
</div>
|
|
53
|
-
<div class="
|
|
53
|
+
<div class="designbase-wp-admin__filter-bar__actions">
|
|
54
54
|
<button class="button button-secondary" type="reset">초기화</button>
|
|
55
55
|
<button class="button button-primary" type="submit">적용</button>
|
|
56
56
|
</div>
|
|
57
57
|
</form>
|
|
58
58
|
|
|
59
|
-
<section class="
|
|
60
|
-
<div class="
|
|
61
|
-
<div class="
|
|
62
|
-
<div class="
|
|
59
|
+
<section class="designbase-wp-admin__section">
|
|
60
|
+
<div class="designbase-wp-admin__section-header"><div><h2>최근 페이지</h2><p>예시 테이블은 데이터를 직접 조회하지 않습니다.</p></div></div>
|
|
61
|
+
<div class="designbase-wp-admin__section-content">
|
|
62
|
+
<div class="designbase-wp-admin__data-table">
|
|
63
63
|
<table>
|
|
64
64
|
<caption class="screen-reader-text">최근 페이지</caption>
|
|
65
65
|
<thead><tr><th scope="col">제목</th><th scope="col">상태</th><th scope="col">수정일</th></tr></thead>
|
|
66
66
|
<tbody>
|
|
67
|
-
<tr><td>Designbase</td><td><span class="
|
|
68
|
-
<tr><td>새 링크 페이지</td><td><span class="
|
|
67
|
+
<tr><td>Designbase</td><td><span class="designbase-wp-admin__status is-success">공개</span></td><td>방금 전</td></tr>
|
|
68
|
+
<tr><td>새 링크 페이지</td><td><span class="designbase-wp-admin__status">초안</span></td><td>어제</td></tr>
|
|
69
69
|
</tbody>
|
|
70
70
|
</table>
|
|
71
71
|
</div>
|