@1001-digital/layers.base 0.0.2 → 0.0.4

package/.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpm add:*)",
+      "Bash(pnpm install)",
+      "Bash(pnpm typecheck:*)"
+    ]
+  }
+}

package/app/components/Dialog.client.vue

@@ -23,6 +23,7 @@ const props = withDefaults(defineProps<{
   xClose?: boolean
   clickOutside?: boolean
   compat?: boolean
+  large?: boolean
 }>(), {
   xClose: true,
   clickOutside: true,
@@ -37,6 +38,7 @@ const classes = computed(() => {
   let obj: Record<string, boolean> = {
     dialog: true,
     compat: !!props.compat,
+    large: !!props.large,
   }
 
   // Apply passed classes
@@ -214,6 +216,10 @@ watchEffect(() => (open.value ? show() : hide()))
     gap: var(--spacer);
     justify-content: flex-end;
   }
+
+  &.large {
+    --dialog-width: min(90vw, 64rem);
+  }
 }
 
 html:has(dialog[open]),

package/app/composables/time.ts

@@ -0,0 +1,63 @@
+import { DateTime } from 'luxon'
+import type { Ref } from 'vue'
+
+let nowInterval: NodeJS.Timeout | undefined
+
+export const useSeconds = () => {
+  const now = useState<number>('now', () => nowInSeconds())
+
+  if (import.meta.client && !nowInterval) {
+    nowInterval = setInterval(() => {
+      now.value = nowInSeconds()
+    }, 1000)
+  }
+
+  return now
+}
+
+export const useCountDown = (s: Ref<number | bigint>, showSecondsWithin: number = 60) => {
+  const duration = computed(() => Math.abs(Number(s.value)))
+
+  const seconds = computed(() => duration.value % 60)
+  const minutes = computed(() => Math.floor(duration.value / 60) % 60)
+  const hours = computed(() => Math.floor(duration.value / 60 / 60) % 24)
+  const days = computed(() => Math.floor(duration.value / 60 / 60 / 24))
+
+  const str = computed(() =>
+    [
+      days.value ? `${days.value}d` : null,
+      hours.value ? `${hours.value}h` : null,
+      minutes.value ? `${minutes.value}m` : null,
+      duration.value < showSecondsWithin && seconds.value ? `${seconds.value}s` : null,
+    ]
+      .filter((s) => !!s)
+      .join(' '),
+  )
+
+  return {
+    seconds,
+    minutes,
+    hours,
+    days,
+    str,
+  }
+}
+
+export const useSecondsAgo = (time: Ref<string | undefined>) => {
+  const ago = ref<string>()
+  const now = useSeconds()
+
+  watch(
+    now,
+    () => {
+      if (time.value) {
+        ago.value = DateTime.fromISO(time.value).toRelative({ style: 'short', locale: 'en' }) ?? undefined
+      }
+    },
+    {
+      immediate: true,
+    },
+  )
+
+  return ago
+}

package/app/utils/time.ts

@@ -0,0 +1,20 @@
+import { DateTime } from 'luxon'
+
+export const delay = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms))
+
+export const daysInSeconds = (days: number): number => days * 60 * 60 * 24
+
+export const nowInSeconds = (): number => Math.floor(Date.now() / 1000)
+
+export const asUTCDate = (date: Date | null) =>
+  date
+    ? DateTime.utc(
+      date.getFullYear(),
+      date.getMonth() + 1,
+      date.getDate(),
+      date.getHours(),
+      date.getMinutes(),
+      date.getSeconds(),
+    )
+    : null

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@1001-digital/layers.base",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "./nuxt.config.ts",
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.81",
     "@iconify-json/simple-icons": "^1.2.63",
     "@nuxt/eslint": "latest",
+    "@types/luxon": "^3.6.2",
     "@types/node": "^24.10.1",
     "eslint": "^9.39.1",
     "nuxt": "^4.2.2",
@@ -15,6 +16,7 @@
   },
   "dependencies": {
     "@nuxt/icon": "^1.10.3",
+    "luxon": "^3.6.1",
     "modern-normalize": "^3.0.1",
     "reka-ui": "^2.6.1"
   },
@@ -24,6 +26,7 @@
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "typecheck": "nuxi typecheck .playground"
   }
 }