npm - @xwadex/fesd - Versions diffs - 0.0.1 - Mend

@xwadex/fesd 0.0.1

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 (47) hide show

package/20240328-video4-setting.png +0 -0
package/CHANGELOG.md +41 -0
package/README.md +25 -0
package/dist/assets/fesd-bundle.css +9 -0
package/dist/assets/fesd-bundle.js +9800 -0
package/dist/assets/fesd-bundle.js.map +1 -0
package/index.html +25 -0
package/package.json +23 -0
package/prepros.config +883 -0
package/src/fesd/anchor4/anchor4.js +179 -0
package/src/fesd/aost4/_aost4.sass +64 -0
package/src/fesd/aost4/aost4.js +138 -0
package/src/fesd/article4/article4.js +280 -0
package/src/fesd/article4/article4.md +1 -0
package/src/fesd/category-slider/_category-slider.sass +33 -0
package/src/fesd/category-slider/category-slider.js +332 -0
package/src/fesd/collapse4/collapse4.js +159 -0
package/src/fesd/detect4/detect4.js +70 -0
package/src/fesd/dropdown4/_dropdown4.sass +185 -0
package/src/fesd/dropdown4/cityData.js +830 -0
package/src/fesd/dropdown4/dropdown4.js +647 -0
package/src/fesd/image-preview/_image-preview.sass +26 -0
package/src/fesd/image-preview/image-preview.js +209 -0
package/src/fesd/image-validate/_image-validate.sass +21 -0
package/src/fesd/image-validate/image-validate.js +84 -0
package/src/fesd/marquee4/_marquee4.sass +45 -0
package/src/fesd/marquee4/marquee4.js +371 -0
package/src/fesd/modal4/_modal4.sass +134 -0
package/src/fesd/modal4/modal4.js +236 -0
package/src/fesd/modal4/modernModal.js +182 -0
package/src/fesd/multipurpose4/_multipurpose4.sass +282 -0
package/src/fesd/multipurpose4/multipurpose4.js +562 -0
package/src/fesd/ripple4/_ripple4.sass +44 -0
package/src/fesd/ripple4/ripple4.js +138 -0
package/src/fesd/share4/share4.js +191 -0
package/src/fesd/shared/shared.js +59 -0
package/src/fesd/shared/utils.js +98 -0
package/src/fesd/tab4/_tab4.sass +25 -0
package/src/fesd/tab4/tab4.js +473 -0
package/src/fesd/video4/README.md +3 -0
package/src/fesd/video4/_video4.sass +117 -0
package/src/fesd/video4/video4.js +237 -0
package/src/fesd/video4/videoPlayer.js +195 -0
package/src/fesd.js +53 -0
package/src/fesd.sass +29 -0
package/src/fesdDB.js +282 -0
package/vite.config.js +37 -0

package/src/fesd/dropdown4/_dropdown4.sass ADDED Viewed

@@ -0,0 +1,185 @@
+dropdown-el
+  position: relative
+  display: block
+  width: 100%
+  &[d4-status="open"]
+    .dropdown-icon
+      transform: rotateX(180deg)
+  // 選取之後的顏色
+  &:not([d4-value=""])
+    .select-display
+      color: #fff
+  &[multiple]
+    .select-display
+      display: flex
+      flex-wrap: wrap
+      gap: 8px
+      .option-btn
+        display: flex
+        align-items: center
+        padding: 4px 15px
+        background-color: #585858
+        border-radius: 10rem
+        .text
+          color: #fff
+        .remove-icon
+          position: relative
+          width: 14px
+          height: 14px
+          transform: rotate(45deg)
+          margin-left: 10px
+          &::before,&::after
+            content: ''
+            position: absolute
+            top: 50%
+            left: 50%
+            transform: translate3d(-50%,-50%,0)
+            background-color: #fff
+          &::before
+            width: 100%
+            height: 1px
+          &::after
+            width: 1px
+            height: 100%
+  &:not([multiple])
+    .select-display
+      display: block
+      overflow: hidden
+      display: -webkit-box
+      text-overflow: ellipsis
+      -webkit-box-orient: vertical
+      -webkit-line-clamp: 1
+      padding-right: 20px
+  // 禁用
+  &.disabled
+    opacity: 0.5
+    pointer-events: none
+  >li
+    display: none
+  .select-wrapper
+    display: flex
+    align-items: center
+    width: 100%
+    min-height: 48px
+    border-radius: 8px
+    background-color: #000
+    padding: 15px
+    cursor: pointer
+  .select-display
+    flex: 1
+    color: #fff
+  .dropdown-icon
+    width: 0
+    height: 0
+    border-width: 6px 5px 0 5px
+    border-style: solid
+    border-color: #fff transparent transparent transparent
+    margin-left: auto
+    transition: transform 0.3s linear
+  .dropdown
+    position: absolute
+    top: 100%
+    left: 0
+    width: 100%
+    height: 0
+    transform: translate3d(0,5px,0)
+    transition: height 0.4s cubic-bezier(0.02, 0.01, 0.47, 1)
+    overflow: hidden
+    border-radius: 8px
+    will-change: height
+    z-index: 1
+    &::after
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: var(--maxHeight)
+      background-color: #fff
+      border: 1px solid rgba(0,0,0,0.2)
+      border-radius: 8px
+      transition: height 0.4s cubic-bezier(0.02, 0.01, 0.47, 1)
+      z-index: -1
+    .filter-bar
+      width: 100%
+      margin: 0 auto
+      padding: 5px
+      .filter-input
+        display: block
+        width: 100%
+        height: 50px
+        border: none
+        border-radius: 8px
+        border: 1px solid #1e1e1e
+        padding: 0 10px
+        font-size: 16px
+    .dropdown-scroller
+      width: 100%
+      max-height: 200px
+      overflow: hidden
+    .dropdown-list
+      position: relative
+      width: 100%
+      height: 100%
+      > li
+        line-height: 1.5
+        padding: 15px
+        transition: background-color 0.3s linear
+        &:not(:first-child)
+          border-top: 1px solid #eee
+        &:not(.has-sublayer)
+          &.active,&:hover
+            background-color: #eee
+  // 子選單樣式
+  .sub-dropdown
+    height: 0
+    transition: height 0.4s cubic-bezier(0.02, 0.01, 0.47, 1)
+    overflow: hidden
+    .sub-dropdown-list
+      background-color: #666
+      color: #fff
+      margin-top: 5px
+      >li
+        padding: 10px
+        &:not(:first-child)
+          border-top: 1px solid #fff
+  li.has-sublayer
+    &.open
+      .header
+        .icon
+          transform: rotateX(180deg)
+      .sub-dropdown
+        height: var(--height)
+    .header
+      display: flex
+      align-items: center
+      .title
+        display: block
+        overflow: hidden
+        display: -webkit-box
+        text-overflow: ellipsis
+        -webkit-box-orient: vertical
+        -webkit-line-clamp: 1
+        padding-right: 20px
+      .icon
+        width: 0
+        height: 0
+        border-width: 6px 5px 0 5px
+        border-style: solid
+        border-color: #000 transparent transparent transparent
+        margin-left: auto
+        transition: transform 0.3s linear
+  // 卷軸樣式
+  .os-theme-dark
+    > .os-scrollbar
+      &:hover
+        > .os-scrollbar-track
+          > .os-scrollbar-handle
+            background: var(--scrollbar-thumb-hover-color) // 卷軸Hover後顏色
+      > .os-scrollbar-track
+        background: var(--scrollbar-track-color) // 卷軸整條顏色
+        border-radius: var(--scrollbar-radius) // 卷軸整條圓角
+        > .os-scrollbar-handle
+          background: var(--scrollbar-thumb-color) // 卷軸顏色
+          border-radius: var(--scrollbar-radius) // 卷軸圓角