create-fesd-app 1.0.7 → 1.0.9

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 (6) hide show
  1. package/package.json +2 -2
  2. package/src/assets/css/layouts/article4/_article4_2.0.sass +53 -8
  3. package/src/assets/css/layouts/article4/_article4_setting.sass +1 -1
  4. package/src/assets/css/pages/about.sass +16 -0
  5. package/src/layouts/article4/_article.pug +5 -7
  6. package/src/pages/about.pug +48 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-fesd-app",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",
@@ -24,7 +24,7 @@
24
24
  "dependencies": {
25
25
  "@tailwindcss/postcss": "^4.1.10",
26
26
  "@tailwindcss/vite": "^4.1.10",
27
- "@xwadex/fesd": "0.0.31",
27
+ "@xwadex/fesd": "0.0.32",
28
28
  "ansi-colors": "^4.1.3",
29
29
  "chalk": "^5.3.0",
30
30
  "clsx": "^2.1.1",
package/src/assets/css/layouts/article4/_article4_2.0.sass CHANGED
@@ -158,11 +158,12 @@
158
158
  &.typeUR
159
159
  ._imgCover
160
160
  order: 3
161
+ margin-bottom: 0
161
162
  ._wordCover
162
163
  margin: 0
163
164
  margin-bottom: $img-cover-TB-gap
164
- ._cover
165
- margin-bottom: 0
165
+ // ._cover
166
+ // margin-bottom: 0
166
167
  &[img-row="x2"],
167
168
  &[img-row="x3"],
168
169
  &[img-row="x4"],
@@ -646,6 +647,38 @@
646
647
  padding: 0 #{$cover-LR-gap_rwd * 0.5}
647
648
  width: calc(100% / 2)
648
649
 
650
+ &.typeL,
651
+ &.typeLR,
652
+ &.typeR,
653
+ &.typeRR
654
+ // img-row
655
+ @for $i from 2 through 5
656
+ &[img-row="x#{$i}"],
657
+ &[swiper-num="#{$i}"]
658
+ ._imgCover
659
+ width: calc(50% + #{$cover-LR-gap})
660
+ +rwdmax($basic_rwd)
661
+ ._imgCover
662
+ width: calc(100% + #{$cover-LR-gap_rwd})
663
+ &.typeLR
664
+ // img-row
665
+ @for $i from 2 through 5
666
+ &[img-row="x#{$i}"],
667
+ &[swiper-num="#{$i}"]
668
+ ._imgCover
669
+ margin-left: $img-cover-LR-gap
670
+ +rwdmax($basic_rwd)
671
+ margin-left: $img-cover-LR-gap_rwd
672
+ &.typeRR
673
+ // img-row
674
+ @for $i from 2 through 5
675
+ &[img-row="x#{$i}"],
676
+ &[swiper-num="#{$i}"]
677
+ ._imgCover
678
+ margin-right: $img-cover-LR-gap
679
+ +rwdmax($basic_rwd)
680
+ margin-right: $img-cover-LR-gap_rwd
681
+
649
682
  // img-merge
650
683
  &[img-merge="on"]
651
684
  ._imgCover
@@ -720,7 +753,14 @@
720
753
  &[button-align="right"]
721
754
  ._buttonCover
722
755
  text-align: right
723
-
756
+ // 新增 - 圖片比例若設定不指定時, 圖片寬度是否自動填滿
757
+ &[img-widthFull="false"]
758
+ &:not([img-size="x11"]):not([img-size="x34"]):not([img-size="x43"]):not([img-size="x169"])
759
+ ._imgCover
760
+ ._photo
761
+ justify-content: flex-start
762
+ img
763
+ width: auto
724
764
  // img-size
725
765
  // &[img-swiper="on"],
726
766
  &[img-size="x11"],
@@ -743,6 +783,7 @@
743
783
  transform: translate(-50%, -50%)
744
784
  height: auto
745
785
 
786
+
746
787
  $proportions: ("x11": 100%, "x34": 133.3%, "x43": 75%, "x169": 56.25%)
747
788
  @each $proportion, $value in $proportions
748
789
  &[img-size="#{$proportion}"]
@@ -842,11 +883,15 @@
842
883
  &.overflow
843
884
  ._table
844
885
  margin-top: $table-TB-gap
845
- margin-bottom: $table-TB-gap
846
886
  cursor: grab
847
887
  +rwdmax($basic_rwd)
848
888
  margin-top: $table-TB-gap_rwd
849
- margin-bottom: $table-TB-gap_rwd
889
+ ._wordCover
890
+ margin-top: 0
891
+ margin-bottom: $table-TB-gap
892
+ +rwdmax($basic_rwd)
893
+ margin-top: 0
894
+ margin-bottom: $table-TB-gap_rwd
850
895
  ._tableCover
851
896
  width: 100%
852
897
  ._table
@@ -892,13 +937,13 @@
892
937
  @extend %table_navigation
893
938
 
894
939
  // 對齊方式同大標題
895
- &[h-align="center"]
940
+ &[tip-align="center"]
896
941
  ._tipText
897
942
  justify-content: center
898
- &[h-align="right"]
943
+ &[tip-align="right"]
899
944
  ._tipText
900
945
  justify-content: flex-end
901
- &[h-align="left"]
946
+ &[tip-align="left"]
902
947
  ._tipText
903
948
  justify-content: flex-start
904
949
 
package/src/assets/css/layouts/article4/_article4_setting.sass CHANGED
@@ -41,7 +41,7 @@ $text-LR-gap: 40px
41
41
 
42
42
  // 文字 padding
43
43
  $text-padding: 20px
44
- $text-padding_rwd: 0
44
+ $text-padding_rwd: 0px
45
45
 
46
46
  // 按鈕與其他物件之間的距離
47
47
  $button-cover-gap: 30px
package/src/assets/css/pages/about.sass CHANGED
@@ -141,6 +141,22 @@
141
141
  transform: scale(0.75)
142
142
  &.show
143
143
  animation: zoomIn 0.25s linear forwards
144
+ .title
145
+ padding-left: 20px
146
+ margin-bottom: 20px
147
+ display: flex
148
+ align-items: center
149
+ position: relative
150
+ font-size: px(30)
151
+ font-weight: 800
152
+ &:before
153
+ display: block
154
+ background: #3e84cf
155
+ width: 8px
156
+ height: 36px
157
+ position: absolute
158
+ left: 0
159
+ content: ''
144
160
  &.section2
145
161
  .container
146
162
  min-height: 50vh
package/src/layouts/article4/_article.pug CHANGED
@@ -9,7 +9,7 @@ mixin article(data, HTag='h4', subHTag='h5')
9
9
  ._contentWrap
10
10
  if isComplex && data.H
11
11
  +dynamicHeading(HTag , '_H', data.H)
12
- +backgroundWrap(data.backgroundPC, data.backgroundMobile)
12
+ +backgroundWrap(data.backgroundColor, data.backgroundPC, data.backgroundMobile)
13
13
  +imgSwiperBlock(data.SwiperImg)
14
14
  +imgCoverBlock(data.img)
15
15
  +wordBlock(data, isComplex, HTag, subHTag)
@@ -41,8 +41,8 @@ mixin dynamicHeading(tag, className, content)
41
41
  //- ========================
42
42
  //- mixin: backgroundWrap
43
43
  //- ========================
44
- mixin backgroundWrap(backgroundPC, backgroundMobile)
45
- if backgroundPC || backgroundMobile
44
+ mixin backgroundWrap(backgroundColor, backgroundPC, backgroundMobile)
45
+ if backgroundPC || backgroundMobile || backgroundColor
46
46
  ._backgroundWrap
47
47
  if backgroundPC
48
48
  ._pc(style=`background-image: url(${backgroundPC})`)
@@ -126,8 +126,6 @@ mixin quoteBlock(d)
126
126
  //- ========================
127
127
  mixin tableBlock(d,tableData)
128
128
  if tableData
129
- if tableData.H
130
- +dynamicHeading(HTag, '_H', tableData.H)
131
129
  ._tableCover
132
130
  p._tipText
133
131
  i.icon-drag
@@ -150,5 +148,5 @@ mixin tableBlock(d,tableData)
150
148
  else if block
151
149
  ._table
152
150
  block
153
- ._P
154
- p !{tableData.paragraph}
151
+ if tableData.description
152
+ p._description !{tableData.description}
package/src/pages/about.pug CHANGED
@@ -41,6 +41,7 @@ block content
41
41
  articleType: 'base',
42
42
  attributes: {
43
43
  'img-row': 'x3',
44
+ 'img-widthFull': 'false',
44
45
  },
45
46
  H: 'This is the title of the Article, A satirical title generator for designers...',
46
47
  subH: 'Sub-Title of the Article, A satirical title generator for designers...',
@@ -52,7 +53,7 @@ block content
52
53
  description: 'Description'
53
54
  },
54
55
  {
55
- img: 'https://picsum.photos/id/941/700/400',
56
+ img: 'https://picsum.photos/id/932/580/780',
56
57
  description: 'Description'
57
58
  },
58
59
  {
@@ -219,12 +220,16 @@ block content
219
220
  },
220
221
  typeF:{
221
222
  articleType: 'typeF',
223
+ attributes: {
224
+ 'typeFull-color': '#fdca36',
225
+ },
222
226
  H: 'This is the title of the Article, A satirical title generator for designers...',
223
227
  subH: 'Sub-Title of the Article, A satirical title generator for designers...',
224
228
  P: 'paragraph of the Article, A satirical title generator for designers...',
225
229
  button: 'Button Description',
226
- backgroundPC:'https://picsum.photos/id/347/1000/650',
227
- backgroundMobile:'https://picsum.photos/id/730/650/1000',
230
+ backgroundColor:'#fdca36',
231
+ //- backgroundPC:'https://picsum.photos/id/347/1000/650',
232
+ //- backgroundMobile:'https://picsum.photos/id/730/650/1000',
228
233
  img:[
229
234
  {
230
235
  img: 'https://picsum.photos/id/964/700/400',
@@ -282,10 +287,12 @@ block content
282
287
  attributes: {
283
288
  'data-table-markdown':'on'
284
289
  },
290
+ H: 'This is the title of the Form',
291
+ subH: 'Sub-Title of the Article, A satirical title generator for designers...',
292
+ P: "What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world.",
285
293
  tableData: {
286
- H: 'This is the title of the Form',
287
294
  tipText: '左右托拉',
288
- paragraph: "What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world.",
295
+ description: "What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world.",
289
296
  table: {
290
297
  head: [
291
298
  {
@@ -399,9 +406,12 @@ block content
399
406
  attributes: {
400
407
  'data-table-markdown':'on'
401
408
  },
409
+ H: 'This is the title of the Form',
410
+ subH: 'Sub-Title of the Article, A satirical title generator for designers...',
411
+ P: "What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world.",
402
412
  tableData: {
403
413
  H: 'This is the title of the Form',
404
- paragraph: "What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world.",
414
+ description: "What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world.",
405
415
  },
406
416
  },
407
417
  tableFreezeDemo:{
@@ -409,47 +419,77 @@ block content
409
419
  attributes: {
410
420
  "freeze-table": 'on',
411
421
  "freeze-table-row": '3',
412
- "freeze-table-col": '1'
422
+ "freeze-table-col": '1',
423
+ "h-align": 'center',
424
+ "subh-align": 'left',
425
+ "p-align": 'right',
426
+ "tip-align": 'center',
413
427
  },
428
+ H: 'This is the title of the Form',
429
+ subH: 'Sub-Title of the Article, A satirical title generator for designers...',
430
+ P: "What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world.",
414
431
  tableData: {
415
432
  H: 'This is the title of the Form',
416
- paragraph: "What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world.",
433
+ description: "What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world.",
417
434
  },
418
435
  },
419
436
  }
420
437
  ._articleBlock
421
438
  include ../layouts/article4/_article.pug
422
439
  // 基本樣式
440
+ .title Article Basic
423
441
  +article(data.base)
442
+ .title Article TypeSL
424
443
  +article(data.typeSL)
444
+ .title Article TypeSR
425
445
  +article(data.typeSR)
446
+ .title Article TypeU
426
447
  +article(data.typeU)
448
+ .title Article TypeUL
427
449
  +article(data.typeUL)
450
+ .title Article TypeUR
428
451
  +article(data.typeUR)
452
+ .title Article TypeD
429
453
  +article(data.typeD)
454
+ .title Article TypeDL
430
455
  +article(data.typeDL)
456
+ .title Article TypeDR
431
457
  +article(data.typeDR)
432
458
 
433
459
  // 文繞圖
460
+ .title Article TypeL
434
461
  +article(data.typeL)
462
+ .title Article TypeR
435
463
  +article(data.typeR)
464
+ .title Article TypeLR
436
465
  +article(data.typeLR)
466
+ .title Article TypeRR
437
467
  +article(data.typeRR)
438
468
 
439
469
  // 背景
470
+ .title Article TypeF
440
471
  +article(data.typeF)
472
+ .title Article TypeFL
441
473
  +article(data.typeFL)
474
+ .title Article TypeFR
442
475
  +article(data.typeFR)
476
+ .title Article TypeFBox
443
477
  +article(data.typeFBox)
444
478
 
445
479
  // 最新新增
480
+ .title Table Type
446
481
  +article(data.typeTable)
482
+ .title Quote Type
447
483
  +article(data.typeQuote)
448
484
 
449
485
  // 其他
486
+ .title Swiper Demo
450
487
  +article(data.swiperDemo)
488
+ .title Video Demo
451
489
  +article(data.videoDemo)
490
+ .title Video With Swiper Demo
452
491
  +article(data.videoWithSwiperDemo)
492
+ .title Table Demo
453
493
  +article(data.tableDemo)
454
494
  table
455
495
  thead