Merge branch 'develop'

batosai · Jan 23, 2024 · e73e610 · e73e610
2 parents 0264f28 + 20b8118
commit e73e610
Show file tree

Hide file tree

Showing 23 changed files with 750 additions and 294 deletions.
diff --git a/fractal.helpers.js b/fractal.helpers.js
@@ -19,6 +19,15 @@ const flashMessages = {
   }
 }
 
+const defaultT = key => {
+  const sample = {
+    'user.name': 'Nom',
+    'page.title': 'Titre',
+  }
+
+  return sample[key] ? sample[key] : key
+}
+
 const defaultFlash = {
   values:null,
   has: name => name ? false : false,
@@ -58,8 +67,16 @@ const jrmc = {
 
     return option.selected ?? false
   },
-  getLabel: props => {
-    const name = props.has('name') ? props.get('name') : ''
+  getLabel: (props, context = { translator: { prefix: '' } }) => {
+    const t = defaultT
+    let name = props.has('name') ? props.get('name') : ''
+
+    if (props.has('translator.prefix')) {
+      name = t(`${props.translator.prefix}${name}`)
+    } else if (context.translator.prefix) {
+      name = t(`${context.translator.prefix}${name}`)
+    }
+
     return `${string.capitalCase(string.noCase(name))}:`
   },
   getChecked: (props, context = { value: null }, flashMessages) => {

diff --git a/fractal/components/01-actions/button/readme.md b/fractal/components/01-actions/button/readme.md
@@ -7,6 +7,7 @@ Buttons allows user to take actions or make choices.
 | Class name    |   Type     |                                        |
 |---------------|------------|----------------------------------------|
 | btn           | Component  | Button                                 |
+| btn-neutral   | Modifier   | Button with `neutral` color            |
 | btn-primary   | Modifier   | Button with `primary` color            |
 | btn-secondary | Modifier   | Button with `secondary` color          |
 | btn-accent    | Modifier   | Button with `accent` color             |
@@ -20,7 +21,6 @@ Buttons allows user to take actions or make choices.
 | btn-active    | Modifier   | Force button to show active state      |
 | btn-disabled  | Modifier   | Force button to show disabled state    |
 | glass         | Modifier   | Button with a glass effect             |
-| loading       | Modifier   | Shows loading spinner                  |
 | no-animation  | Modifier   | Disables click animation               |
 | btn-lg        | Responsive | Large button                           |
 | btn-md        | Responsive | Medium button (default)                |

diff --git a/fractal/components/01-actions/drawer/05-drawer--size.edge b/fractal/components/01-actions/drawer/05-drawer--size.edge
@@ -3,7 +3,7 @@
     @!jrmc.button({ text: 'Open drawer', ...$context.event.open })
   @end
 
-  @jrmc.drawer.side({ class: 'w-3/4' })
+  @jrmc.drawer.side({ class: 'w-3/4 p-4 bg-base-100' })
     <ul class="menu text-base-content">
       <li><a>Sidebar Item 1</a></li>
       <li><a>Sidebar Item 2</a></li>

diff --git a/fractal/components/02-display/avatar/08-avatar--placeholder.edge b/fractal/components/02-display/avatar/08-avatar--placeholder.edge
@@ -1,5 +1,5 @@
 <div>
   @!jrmc.avatar({ placeholder: 'K' })
-  @!jrmc.avatar({ placeholder: 'JO', status: 'online', class: 'bg-neutral-focus text-neutral-content rounded-full w-16' })
+  @!jrmc.avatar({ placeholder: 'JO', status: 'online', class: 'bg-neutral-content text-neutral rounded-full w-16' })
   @!jrmc.avatar({ placeholder: 'AA', class: 'bg-primary text-neutral-content mask mask-hexagon w-8' })
 </div>
diff --git a/fractal/components/03-form/01-form-container.edge b/fractal/components/03-form/01-form-container.edge
@@ -1,5 +1,5 @@
 @jrmc.form({ id: 'my_form', method: 'get', error: false})
   @jrmc.form.control({ name: 'lastname', hint: '3 characters minimum' })
-    @!jrmc.form.input()
+    @!jrmc.form.input({ class: 'input-bordered' })
   @end
 @end
diff --git a/fractal/components/03-form/03-form-translate-labels.edge b/fractal/components/03-form/03-form-translate-labels.edge
@@ -0,0 +1,13 @@
+@jrmc.form({ error: false, translator: { prefix: 'user.' }})
+  @jrmc.form.control({ name: 'name' })
+    @!jrmc.form.input({ class: 'input-bordered' })
+  @end
+
+  @jrmc.form.control({ name: 'title', translator: { prefix: 'page.' } })
+    @!jrmc.form.input({ class: 'input-bordered' })
+  @end
+
+  @jrmc.form.control({ name: 'notfound' })
+    @!jrmc.form.input({ class: 'input-bordered' })
+  @end
+@end
diff --git a/fractal/components/04-navigation/tab/02-tab--bordered.edge b/fractal/components/04-navigation/tab/02-tab--bordered.edge
@@ -1,5 +1,5 @@
-@jrmc.tabs()
-  @!jrmc.tabs.tab({ text: 'Tab 1', class: 'tab-bordered' })
-  @!jrmc.tabs.tab({ text: 'Tab 2', class: 'tab-bordered', active: true })
-  @!jrmc.tabs.tab({ text: 'Tab 3', class: 'tab-bordered' })
+@jrmc.tabs({ class: 'tabs-bordered' })
+  @!jrmc.tabs.tab({ text: 'Tab 1' })
+  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
+  @!jrmc.tabs.tab({ text: 'Tab 3' })
 @end
diff --git a/fractal/components/04-navigation/tab/03-tab--lifted.edge b/fractal/components/04-navigation/tab/03-tab--lifted.edge
@@ -1,5 +1,5 @@
-@jrmc.tabs()
-  @!jrmc.tabs.tab({ text: 'Tab 1', class: 'tab-lifted' })
-  @!jrmc.tabs.tab({ text: 'Tab 2', class: 'tab-lifted', active: true })
-  @!jrmc.tabs.tab({ text: 'Tab 3', class: 'tab-lifted' })
+@jrmc.tabs({ class: 'tabs-lifted' })
+  @!jrmc.tabs.tab({ text: 'Tab 1' })
+  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
+  @!jrmc.tabs.tab({ text: 'Tab 3' })
 @end
diff --git a/fractal/components/04-navigation/tab/05-tab--sizes.edge b/fractal/components/04-navigation/tab/05-tab--sizes.edge
@@ -1,16 +1,16 @@
 <div>
   <!-- xs -->
-  @jrmc.tabs()
-    @!jrmc.tabs.tab({ text: 'Tab 1', class: 'tab-xs' })
-    @!jrmc.tabs.tab({ text: 'Tab 2', class: 'tab-xs', active: true })
-    @!jrmc.tabs.tab({ text: 'Tab 3', class: 'tab-xs' })
+  @jrmc.tabs({ class: 'tabs-xs' })
+    @!jrmc.tabs.tab({ text: 'Tab 1',  })
+    @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
+    @!jrmc.tabs.tab({ text: 'Tab 3' })
   @end
 
   <!-- sm -->
-  @jrmc.tabs()
-    @!jrmc.tabs.tab({ text: 'Tab 1', class: 'tab-sm' })
-    @!jrmc.tabs.tab({ text: 'Tab 2', class: 'tab-sm', active: true })
-    @!jrmc.tabs.tab({ text: 'Tab 3', class: 'tab-sm' })
+  @jrmc.tabs({ class: 'tabs-sm' })
+    @!jrmc.tabs.tab({ text: 'Tab 1',  })
+    @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
+    @!jrmc.tabs.tab({ text: 'Tab 3' })
   @end
 
   <!-- md -->
@@ -21,9 +21,9 @@
   @end
 
   <!-- lg -->
-  @jrmc.tabs()
-    @!jrmc.tabs.tab({ text: 'Tab 1', class: 'tab-lg' })
-    @!jrmc.tabs.tab({ text: 'Tab 2', class: 'tab-lg', active: true })
-    @!jrmc.tabs.tab({ text: 'Tab 3', class: 'tab-lg' })
+  @jrmc.tabs({ class: 'tabs-lg' })
+    @!jrmc.tabs.tab({ text: 'Tab 1',  })
+    @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
+    @!jrmc.tabs.tab({ text: 'Tab 3' })
   @end
 </div>
diff --git a/fractal/components/04-navigation/tab/06-tab--content.edge b/fractal/components/04-navigation/tab/06-tab--content.edge
@@ -0,0 +1,25 @@
+<div>
+  @jrmc.tabs({ class: 'tabs-bordered' })
+    @jrmc.tabs.tab({ text: 'Tab 1' })
+      Tab content 1
+    @end
+    @jrmc.tabs.tab({ text: 'Tab 2', active: true })
+      Tab content 2
+    @end
+    @jrmc.tabs.tab({ text: 'Tab 3' })
+      Tab content 3
+    @end
+  @end
+
+  @jrmc.tabs({ name: 'my_tab2', class: 'tabs-lifted' })
+    @jrmc.tabs.tab({ text: 'Tab 1' })
+      Tab content 1
+    @end
+    @jrmc.tabs.tab({ text: 'Tab 2', active: true })
+      Tab content 2
+    @end
+    @jrmc.tabs.tab({ text: 'Tab 3' })
+      Tab content 3
+    @end
+  @end
+</div>
diff --git a/fractal/components/04-navigation/tab/readme.md b/fractal/components/04-navigation/tab/readme.md
@@ -5,15 +5,17 @@ Doc : [daisyui tab](https://daisyui.com/components/tab/)
 Tabs can be used to show a list of links in a tabbed format.
 
 
-| Class name    |   Type     |                                    |
-|---------------|------------|------------------------------------|
-| tabs          | Component  | Container of tab items             |
-| tab           | Component  | A tab item                         |
-| tab-active    | Modofier   | For the active tab                 |
-| tab-bordered  | Modofier   | Adds bottom border to tab item     |
-| tab-lifted    | Modofier   | Adds lifted style to tab item      |
-| tabs-boxed    | Modofier   | Adds a box style to tabs container |
-| tab-xs        | Responsive | Shows tab in extra small size      |
-| tab-sm        | Responsive | Shows tab in small size            |
-| tab-md        | Responsive | Shows tab in medium (default) size |
-| tab-lg        | Responsive | Shows tab in large size            |
+| Class name     |   Type     |                                                |
+|----------------|------------|------------------------------------------------|
+| tabs           | Component  | Container of tab items                         |
+| tabs-bordered  | Modifier   | Adds bottom border to tab item                 |
+| tabs-lifted    | Modifier   | Adds lifted style to tab item                  |
+| tabs-boxed     | Modifier   | Adds a box style to tabs container             |
+| tabs-xs        | Responsive | Shows tab in extra small size                  |
+| tabs-sm        | Responsive | Shows tab in small size                        |
+| tabs-md        | Responsive | Shows tab in medium (default) size             |
+| tabs-lg        | Responsive | Shows tab in large size                        |
+| tab            | Component  | A tab item                                     |
+| tab-active     | Modifier   | For the active tab                             |
+| tab-disabled   | Modifier   | For a visually disabled tab                    |
+| tab-content    | Component  | Tab content that comes immediately after a tab |
diff --git a/fractal/components/_preview.edge b/fractal/components/_preview.edge
@@ -5,9 +5,9 @@
   <title>Preview Layout</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
   <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
 
   <script src="/app.js"></script>
 

diff --git a/fractal/docs/03-changelog.md b/fractal/docs/03-changelog.md
@@ -1,3 +1,11 @@
+# 1.7.0
+
+- Form label translator
+- Update daisyUI (4.6.0)
+- Update dependencies
+- Update button, avatar components
+- Update tab component, add content mode
+
 # 1.6.2
 
 - Update daisyUI