@mixd-id/web-scaffold 0.1.240411077 → 0.1.240411079

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411077",
+  "version": "0.1.240411079",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Carousel.vue

@@ -101,6 +101,11 @@ export default{
 			timeoutId: null,
       scrollPosition: null,
       swiping: false,
+
+      // physics state
+      _rafId: null,
+      _anim: null,
+      _currentX: 0,
     }
   },
 
@@ -108,10 +113,17 @@ export default{
     window.addEventListener('touchmove', this.onTouchMove, { passive: false });
 		if(this.autoPlay > 0)
 			this.play()
+
+    // initialize transform position
+    window.requestAnimationFrame(() => {
+      this._currentX = this._getCurrentX()
+      this._applyX(this._currentX)
+    })
   },
 
   unmounted() {
     window.removeEventListener('touchmove', this.onTouchMove, { passive: false });
+    this._stopRaf()
   },
 
   watch:{
@@ -136,30 +148,99 @@ export default{
       }
     },
 
-		setPosition(noAnimation) {
-			if(!this.$refs.inner) return
+    _stopRaf(){
+      if(this._rafId){
+        cancelAnimationFrame(this._rafId)
+        this._rafId = null
+      }
+      this._anim = null
+    },
 
-			const index = this.index
-			let left = 0
+    _applyX(x){
+      this._currentX = x
+      if(this.$el?.firstElementChild)
+        this.$el.firstElementChild.style.transform = `translate3d(${x}px, 0, 0)`
+    },
+
+    _getCurrentX(){
+      const t = this.$el?.firstElementChild?.style?.transform || ''
+      const matches = t.match(/translate3d\((.*?)(?=\,)/)
+      return matches != null && typeof matches[1] !== 'undefined'
+        ? parseFloat(matches[1].replace('px', ''))
+        : 0
+    },
+
+    _getTargetXForIndex(index){
+      if(!this.$refs.inner) return 0
+
+      let left = 0
       const gapPx = parseInt(window.getComputedStyle(this.$refs.inner).getPropertyValue('column-gap'))
-			for(let curIndex = 0 ; curIndex < this.items.length ; curIndex++){
-				const item = this.$refs.inner.children[curIndex]
-				if(curIndex < index)
-					left += (item.clientWidth + (!isNaN(gapPx) ? gapPx : 0))
-			}
+      for(let curIndex = 0 ; curIndex < this.items.length ; curIndex++){
+        const item = this.$refs.inner.children[curIndex]
+        if(curIndex < index)
+          left += (item.clientWidth + (!isNaN(gapPx) ? gapPx : 0))
+      }
+
+      return left * -1
+    },
+
+    _rubberBand(distance, dimension, constant = 0.55){
+      // similar to iOS rubber-banding
+      const abs = Math.abs(distance)
+      const result = (dimension * constant * abs) / (dimension + constant * abs)
+      return Math.sign(distance) * result
+    },
+
+    _springTo(targetX, { stiffness = 0.09, damping = 0.78, maxDuration = 900 } = {}){
+      this._stopRaf()
 
-			left *= -1
+      const startTime = performance.now()
+      let x = this._getCurrentX()
+      let v = 0
 
-			if(!noAnimation){
-				this.$el.firstElementChild.addEventListener('transitionend', function(){
-					this.classList.remove('transition-carousel')
-				})
-				this.$el.firstElementChild.classList.add('transition-carousel')
+      const step = (now) => {
+        const dtMs = now - (this._anim?.t || now)
+        const dt = Math.min(0.032, Math.max(0.008, dtMs / 1000))
+        this._anim = { t: now }
+
+        // spring force
+        const F = (targetX - x) * stiffness
+        v = (v + F) * damping
+        x = x + v / dt
+
+        // numerical safety
+        if(!isFinite(x)) x = targetX
+
+        this._applyX(x)
+
+        const elapsed = now - startTime
+        const done = (Math.abs(targetX - x) < 0.5 && Math.abs(v) < 0.1) || elapsed > maxDuration
+
+        if(done){
+          this._applyX(targetX)
+          this._stopRaf()
+          return
+        }
+
+        this._rafId = requestAnimationFrame(step)
+      }
+
+      this._rafId = requestAnimationFrame(step)
+    },
+
+		setPosition(noAnimation) {
+			if(!this.$refs.inner) return
+
+      const left = this._getTargetXForIndex(this.index)
+
+			if(noAnimation){
+        this._stopRaf()
+        window.requestAnimationFrame(() => this._applyX(left))
+				return
 			}
 
-			window.requestAnimationFrame(() => {
-        this.$el.firstElementChild.style.transform = `translate3d(${left}px, 0, 0)`
-      })
+      // spring settle
+      this._springTo(left)
 		},
 
     setIndex(index){
@@ -176,18 +257,13 @@ export default{
         index = useBack === true ? 0 : this.items.length - 1
 
       this.index = index
-
       this.setPosition()
     },
 
     prev(){
-
       let index = this.index - 1;
-
       if(index < 0) index = 0
-
       this.index = index
-
       this.setPosition()
     },
 
@@ -217,16 +293,20 @@ export default{
         }
       }
       else if(this._props['direction'] === 'horizontal'){
-        let ix
-        if((this.index === this.items.length - 1 && dx < 0) ||
-            (this.index === 0 && dx > 0)){
-          ix = parseInt(this._props['ix'] + (dx * .19812))
-        }
-        else{
-          ix = parseInt(this._props['ix'] + dx)
+        const baseX = this._props['ix']
+        let nextX = baseX + dx
+
+        const atFirst = this.index === 0
+        const atLast = this.index === this.items.length - 1
+        const overscrolling = (atFirst && dx > 0) || (atLast && dx < 0)
+
+        if(overscrolling){
+          const dim = this.$el?.clientWidth || 1
+          nextX = baseX + this._rubberBand(dx, dim)
         }
 
-        this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
+        this._stopRaf() // user is directly controlling
+        this._applyX(nextX)
       }
 
     },
@@ -268,8 +348,9 @@ export default{
 
 			this.stop()
 
-      var matches = this.$el.firstElementChild.style.transform.match(/translate3d\((.*?)(?=\,)/)
-      var ix = matches != null && typeof matches[1] != 'undefined' ? parseInt(matches[1].replace('px', '')) : 0
+      // stop any running spring and capture current position
+      this._stopRaf()
+      const ix = this._getCurrentX()
 
       this._props = {
         sx:typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX,
@@ -292,21 +373,9 @@ export default{
 
 <style>
 
-.carousel-next,
-.carousel-prev{
-  position: absolute;
-  top: 50%;
-  transform: translate3d(0, -50%, 0);
-}
-.carousel-next{
-  right: 10px;
-}
-.carousel-prev{
-  left: 10px;
-}
-
+/* keep class for backwards compat but disable the old easing; spring animation is done in JS */
 .transition-carousel{
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+  transition: none;
 }
 </style>
 

package/src/widgets/StyleSetting.vue

@@ -198,6 +198,28 @@
           </div>
         </div>
 
+        <div>
+          <label :class="$style.label">Base Color</label>
+          <div class="mt-1 flex flex-row items-center gap-4">
+            <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--base']" item-class="w-[48px] h-[48px]"
+                         mode="hex" :custom-color="true" value-type="rgb"
+                         @change="generateShade('--text', mediaOf(viewType, 'html, .html')['--text'])" />
+
+            <div class="grid grid-cols-5 gap-2 text-center">
+              <div>
+                <small class="text-xs text-text-400">400</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--base-400']"
+                             mode="hex" :custom-color="true" value-type="rgb" />
+              </div>
+              <div>
+                <small class="text-xs text-text-400">300</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--base-300']"
+                             mode="hex" :custom-color="true" value-type="rgb" />
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
 
       <div class="p-6">

package/src/widgets/WebPageBuilder.vue

@@ -126,7 +126,7 @@
                      @click="$refs.ogModal.open({ ...this.page.og }, og => page.og = og)"
                      v-if="page.og && Object.keys(page.og).length > 0">
                   <div>
-                    <Image :src="page.og.image" class="w-[40px] aspect-square bg-text-50" />
+                    <Image :src="page.og.image" class="wpack-[40px] aspect-square bg-text-50" />
                   </div>
                   <div class="flex-1 flex flex-col">
                     <label class="text-sm text-ellipsis-nowrap">
@@ -176,6 +176,8 @@
                 </Dropdown>
               </div>
 
+              <slot name="info" :page="page"></slot>
+
             </div>
 
             <div v-else-if="store.tabIndex === 2" class="flex-1 overflow-y-auto p-6 flex flex-col gap-6">