yuyeon 0.0.24 → 0.0.25

package/lib/composables/timing.mjs

@@ -4,20 +4,20 @@ export function useLazy(eager, updated) {
   const tack = ref();
   tack.value = updated.value;
   const lazyValue = computed(() => {
-    if (eager) return updated.value;
+    if (eager.value) return updated.value;
     return tack.value;
   });
   watch(updated, () => {
     if (!tick.value) {
       tack.value = updated.value;
     }
-    if (!eager) {
+    if (!eager.value) {
       tick.value = true;
     }
   });
   function onAfterUpdate() {
     tack.value = updated.value;
-    if (!eager) {
+    if (!eager.value) {
       tick.value = false;
     }
   }

package/lib/composables/timing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"timing.mjs","names":["computed","ref","watch","useLazy","eager","updated","tick","tack","value","lazyValue","onAfterUpdate","entered","useTimer","cb","duration","arguments","length","undefined","options","tickDuration","tickInterval","timer","tickStart","drift","isWork","now","Date","realTick","tickDrift","nextInterval","window","setTimeout","start","stop","clearTimeout","reset"],"sources":["../../src/composables/timing.ts"],"sourcesContent":["import { Ref, computed, ref, watch } from 'vue';\n\nexport function useLazy(eager: boolean, updated: Ref<any>) {\n  const tick = ref(false);\n  const tack = ref();\n  tack.value = updated.value;\n  const lazyValue = computed(() => {\n    if (eager) return updated.value;\n    return tack.value;\n  });\n  watch(updated, () => {\n    if (!tick.value) {\n      tack.value = updated.value;\n    }\n    if (!eager) {\n      tick.value = true;\n    }\n  });\n  function onAfterUpdate() {\n    tack.value = updated.value;\n    if (!eager) {\n      tick.value = false;\n    }\n  }\n  return {\n    entered: tick,\n    lazyValue,\n    onAfterUpdate,\n  };\n}\n\nexport function useTimer(\n  cb: () => void,\n  duration = 1000,\n  options?: { tickDuration: number },\n) {\n  const { tickDuration } = options ?? {};\n  let tickInterval = tickDuration ?? 100;\n  let timer = -1;\n\n  const tickStart = ref(0);\n  const drift = ref(duration);\n  const isWork = ref(false);\n\n  function tick() {\n    const now = Date.now();\n    const realTick = now - tickStart.value;\n    drift.value = drift.value - realTick;\n    if (drift.value < 1) {\n      cb();\n    } else {\n      const tickDrift = now - tickStart.value + tickInterval;\n      const nextInterval = tickDrift >= 1 ? tickDrift : tickInterval;\n      tickStart.value = now;\n      timer = window.setTimeout(tick, nextInterval);\n    }\n  }\n\n  function start() {\n    if (isWork.value) return;\n    isWork.value = true;\n    tickStart.value = Date.now();\n    timer = window.setTimeout(tick, tickInterval);\n  }\n\n  function stop() {\n    window.clearTimeout(timer);\n    timer = -1;\n    isWork.value = false;\n  }\n\n  function reset() {\n    stop();\n    drift.value = duration;\n  }\n\n  return {\n    start,\n    stop,\n    reset,\n    drift,\n    isWork,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"timing.mjs","names":["computed","ref","watch","useLazy","eager","updated","tick","tack","value","lazyValue","onAfterUpdate","entered","useTimer","cb","duration","arguments","length","undefined","options","tickDuration","tickInterval","timer","tickStart","drift","isWork","now","Date","realTick","tickDrift","nextInterval","window","setTimeout","start","stop","clearTimeout","reset"],"sources":["../../src/composables/timing.ts"],"sourcesContent":["import { Ref, computed, ref, watch } from 'vue';\n\nexport function useLazy(eager: Ref<boolean | undefined>, updated: Ref<any>) {\n  const tick = ref(false);\n  const tack = ref();\n  tack.value = updated.value;\n  const lazyValue = computed(() => {\n    if (eager.value) return updated.value;\n    return tack.value;\n  });\n  watch(updated, () => {\n    if (!tick.value) {\n      tack.value = updated.value;\n    }\n    if (!eager.value) {\n      tick.value = true;\n    }\n  });\n  function onAfterUpdate() {\n    tack.value = updated.value;\n    if (!eager.value) {\n      tick.value = false;\n    }\n  }\n  return {\n    entered: tick,\n    lazyValue,\n    onAfterUpdate,\n  };\n}\n\nexport function useTimer(\n  cb: () => void,\n  duration = 1000,\n  options?: { tickDuration: number },\n) {\n  const { tickDuration } = options ?? {};\n  let tickInterval = tickDuration ?? 100;\n  let timer = -1;\n\n  const tickStart = ref(0);\n  const drift = ref(duration);\n  const isWork = ref(false);\n\n  function tick() {\n    const now = Date.now();\n    const realTick = now - tickStart.value;\n    drift.value = drift.value - realTick;\n    if (drift.value < 1) {\n      cb();\n    } else {\n      const tickDrift = now - tickStart.value + tickInterval;\n      const nextInterval = tickDrift >= 1 ? tickDrift : tickInterval;\n      tickStart.value = now;\n      timer = window.setTimeout(tick, nextInterval);\n    }\n  }\n\n  function start() {\n    if (isWork.value) return;\n    isWork.value = true;\n    tickStart.value = Date.now();\n    timer = window.setTimeout(tick, tickInterval);\n  }\n\n  function stop() {\n    window.clearTimeout(timer);\n    timer = -1;\n    isWork.value = false;\n  }\n\n  function reset() {\n    stop();\n    drift.value = duration;\n  }\n\n  return {\n    start,\n    stop,\n    reset,\n    drift,\n    isWork,\n  }\n}\n"],"mappings":"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"}

package/lib/styles/base.scss

@@ -1,119 +1,119 @@
-@use 'sass:list';
-@use 'settings/provided';
-@use 'settings/variables';
-@use 'palette';
-
-@use 'elevation';
-
-:root {
-  box-sizing: border-box;
-}
-
-:root {
-  --default-shadow: 0, 0, 0;
-  --y-elevation-color: var(--y-theme-shadow, var(--default-shadow));
-
-  @include elevation.styles();
-}
-
-.y-root {
-  background: var(--y-theme-background);
-  color: var(--y-theme-on-background);
-}
-
-.fade-enter-active,
-.fade-leave-cative {
-  transition: opacity 240ms cubic-bezier(0.2, 0.28, 0.21, 1);
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-  transition: transform 240ms variables.$basic-transition-timing-function,
-    opacity 240ms linear;
-}
-
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateY(-20px) rotate3d(1, 0, 0, 10deg);
-  opacity: 0;
-}
-
-.expand-v-transition {
-  &-enter-active {
-    transition-duration: 240ms;
-    transition-timing-function: variables.$basic-transition-timing-function;
-    transition-property: height;
-  }
-  &-leave-active {
-    transition-duration: 240ms;
-    transition-timing-function: variables.$basic-transition-timing-function;
-    transition-property: height;
-  }
-}
-
-.expand-h-transition {
-  &-enter-active {
-    transition-duration: 240ms;
-    transition-timing-function: variables.$basic-transition-timing-function;
-    transition-property: width;
-  }
-  &-leave-active {
-    transition-duration: 240ms;
-    transition-timing-function: variables.$basic-transition-timing-function;
-    transition-property: width;
-  }
-}
-
-.title {
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.contain-paint {
-  contain: paint;
-}
-
-@each $space-type-prefix, $space-type in provided.$space-types {
-  @each $side-prefix, $sides-properties in provided.$box-side-combinations {
-    @each $space-index, $space-size in variables.$space-list {
-      .#{$space-type-prefix}#{$side-prefix}-#{$space-index} {
-        @if (list.length($sides-properties) == 0) {
-          #{$space-type}: #{$space-size};
-        } @else {
-          @each $prop in $sides-properties {
-            #{$space-type}: {
-              #{$prop}: #{$space-size};
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@each $align in provided.$text-aligns {
-  .text-#{$align} {
-    text-align: #{$align};
-  }
-}
-
-@each $weight in provided.$font-weights {
-  .font-weight-#{$weight} {
-    font-weight: $weight;
-  }
-}
-
-@keyframes rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.text-color--error {
-  color: var(--y-theme-error);
-}
+@use 'sass:list';
+@use 'settings/provided';
+@use 'settings/variables';
+@use 'palette';
+
+@use 'elevation';
+
+:root {
+  box-sizing: border-box;
+}
+
+:root {
+  --default-shadow: 0, 0, 0;
+  --y-elevation-color: var(--y-theme-shadow, var(--default-shadow));
+
+  @include elevation.styles();
+}
+
+.y-root {
+  background: var(--y-theme-background);
+  color: var(--y-theme-on-background);
+}
+
+.fade-enter-active,
+.fade-leave-cative {
+  transition: opacity 240ms cubic-bezier(0.2, 0.28, 0.21, 1);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: transform 240ms variables.$basic-transition-timing-function,
+    opacity 240ms linear;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(-20px) rotate3d(1, 0, 0, 10deg);
+  opacity: 0;
+}
+
+.expand-v-transition {
+  &-enter-active {
+    transition-duration: 240ms;
+    transition-timing-function: variables.$basic-transition-timing-function;
+    transition-property: height;
+  }
+  &-leave-active {
+    transition-duration: 240ms;
+    transition-timing-function: variables.$basic-transition-timing-function;
+    transition-property: height;
+  }
+}
+
+.expand-h-transition {
+  &-enter-active {
+    transition-duration: 240ms;
+    transition-timing-function: variables.$basic-transition-timing-function;
+    transition-property: width;
+  }
+  &-leave-active {
+    transition-duration: 240ms;
+    transition-timing-function: variables.$basic-transition-timing-function;
+    transition-property: width;
+  }
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.contain-paint {
+  contain: paint;
+}
+
+@each $space-type-prefix, $space-type in provided.$space-types {
+  @each $side-prefix, $sides-properties in provided.$box-side-combinations {
+    @each $space-index, $space-size in variables.$space-list {
+      .#{$space-type-prefix}#{$side-prefix}-#{$space-index} {
+        @if (list.length($sides-properties) == 0) {
+          #{$space-type}: #{$space-size};
+        } @else {
+          @each $prop in $sides-properties {
+            #{$space-type}: {
+              #{$prop}: #{$space-size};
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@each $align in provided.$text-aligns {
+  .text-#{$align} {
+    text-align: #{$align};
+  }
+}
+
+@each $weight in provided.$font-weights {
+  .font-weight-#{$weight} {
+    font-weight: $weight;
+  }
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.text-color--error {
+  color: var(--y-theme-error);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuyeon",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "keywords": [
     "UI Library",
     "Vue"

package/types/composables/timing.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'vue';
-export declare function useLazy(eager: boolean, updated: Ref<any>): {
+export declare function useLazy(eager: Ref<boolean | undefined>, updated: Ref<any>): {
     entered: Ref<boolean>;
     lazyValue: import("vue").ComputedRef<any>;
     onAfterUpdate: () => void;