@alphacifer/slidev-addon-theme 0.0.11 → 0.0.12

package/README.md

@@ -84,8 +84,8 @@ overrides such as `--alpha-square-pyramid-stack-1-color` and
 
 ## Core
 
-- Components: `Date`, `QnA`, `Quote`, `ReflectedTitle`, `Speaker`
-- Layouts: `arc-toc`, `bg-center`
+- Components: `Date`, `MetaList`, `QnA`, `Quote`, `ReflectedTitle`, `Speaker`
+- Layouts: `arc-toc`, `bg-center`, `references`
 
 ## Shifting heading
 

package/components/comparisons/table-comparison/TableComparison.vue

@@ -160,15 +160,13 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
   }
 }
 
-@layer alpha-theme-tokens {
-  .alpha-table-comparison :deep(tr) {
-    background-color: transparent;
-    border: none;
-  }
+.alpha-table-comparison :deep(tr) {
+  background-color: transparent;
+  border: none;
+}
 
-  .alpha-table-comparison :deep(th),
-  .alpha-table-comparison :deep(td) {
-    border: none;
-  }
+.alpha-table-comparison :deep(th),
+.alpha-table-comparison :deep(td) {
+  border: none;
 }
 </style>

package/components/core/MetaList.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+export interface IMetaListItem {
+  label: string;
+  value: string;
+}
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<IMetaListItem[]>,
+    required: false,
+    default: () => [],
+  },
+  separator: {
+    type: String,
+    required: false,
+    default: ': ',
+  },
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-meta-list flex flex-col gap-2 text-left text-xl',
+);
+</script>
+
+<template>
+  <dl v-bind="forwardedAttrs()" :class="className()">
+    <slot>
+      <div
+        v-for="(item, index) in props.items"
+        :key="`${item.label}-${index}`"
+        class="alpha-meta-list__item"
+      >
+        <dt class="alpha-meta-list__label inline font-medium">
+          {{ item.label }}{{ props.separator }}
+        </dt>
+        <dd class="alpha-meta-list__value inline m-0">
+          {{ item.value }}
+        </dd>
+      </div>
+    </slot>
+  </dl>
+</template>

package/components/core/Speaker.vue

@@ -25,8 +25,8 @@ const props = defineProps({
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
-  'alpha-speaker flex absolute bottom-3.75 right-7.5 flex-col',
-  props.team.length ? 'text-left gap-2' : undefined,
+  'alpha-speaker flex absolute bottom-3.75 right-7.5 flex-col text-left',
+  props.team.length ? 'gap-2' : undefined,
 ]);
 </script>
 

package/components/core/arc-orbit/ArcOrbitCallout.vue

@@ -321,17 +321,15 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
 </template>
 
 <style scoped>
-@layer alpha-theme-tokens {
-  .alpha-arc-orbit-callout :deep(p),
-  .alpha-arc-orbit-callout :deep(h1),
-  .alpha-arc-orbit-callout :deep(h2),
-  .alpha-arc-orbit-callout :deep(h3),
-  .alpha-arc-orbit-callout :deep(h4),
-  .alpha-arc-orbit-callout :deep(h5),
-  .alpha-arc-orbit-callout :deep(h6) {
-    margin: 0;
-    padding: 0;
-  }
+.alpha-arc-orbit-callout :deep(p),
+.alpha-arc-orbit-callout :deep(h1),
+.alpha-arc-orbit-callout :deep(h2),
+.alpha-arc-orbit-callout :deep(h3),
+.alpha-arc-orbit-callout :deep(h4),
+.alpha-arc-orbit-callout :deep(h5),
+.alpha-arc-orbit-callout :deep(h6) {
+  margin: 0;
+  padding: 0;
 }
 
 .alpha-arc-orbit-callout--animated.alpha-arc-orbit-callout--left-0 {

package/components/core/thanks/SquareThanksContent.vue

@@ -68,22 +68,20 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
 </template>
 
 <style scoped>
-@layer alpha-theme-tokens {
-  .alpha-square-thanks-content :deep(h1),
-  .alpha-square-thanks-content :deep(h2),
-  .alpha-square-thanks-content :deep(h3),
-  .alpha-square-thanks-content :deep(h4),
-  .alpha-square-thanks-content :deep(h5),
-  .alpha-square-thanks-content :deep(h6),
-  .alpha-square-thanks-content :deep(p),
-  .alpha-square-thanks-content :deep(div) {
-    margin: 0;
-    padding: 0;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-  }
+.alpha-square-thanks-content :deep(h1),
+.alpha-square-thanks-content :deep(h2),
+.alpha-square-thanks-content :deep(h3),
+.alpha-square-thanks-content :deep(h4),
+.alpha-square-thanks-content :deep(h5),
+.alpha-square-thanks-content :deep(h6),
+.alpha-square-thanks-content :deep(p),
+.alpha-square-thanks-content :deep(div) {
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
 }
 </style>

package/components/facets/tetrad/rectangle-orbit-tetrad/RectangleOrbitTetradCallout.vue

@@ -226,17 +226,15 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(() => {
 </template>
 
 <style scoped>
-@layer alpha-theme-tokens {
-  .alpha-rectangle-orbit-tetrad-callout :deep(p),
-  .alpha-rectangle-orbit-tetrad-callout :deep(h1),
-  .alpha-rectangle-orbit-tetrad-callout :deep(h2),
-  .alpha-rectangle-orbit-tetrad-callout :deep(h3),
-  .alpha-rectangle-orbit-tetrad-callout :deep(h4),
-  .alpha-rectangle-orbit-tetrad-callout :deep(h5),
-  .alpha-rectangle-orbit-tetrad-callout :deep(h6) {
-    margin: 0;
-    padding: 0;
-  }
+.alpha-rectangle-orbit-tetrad-callout :deep(p),
+.alpha-rectangle-orbit-tetrad-callout :deep(h1),
+.alpha-rectangle-orbit-tetrad-callout :deep(h2),
+.alpha-rectangle-orbit-tetrad-callout :deep(h3),
+.alpha-rectangle-orbit-tetrad-callout :deep(h4),
+.alpha-rectangle-orbit-tetrad-callout :deep(h5),
+.alpha-rectangle-orbit-tetrad-callout :deep(h6) {
+  margin: 0;
+  padding: 0;
 }
 
 .alpha-rectangle-orbit-tetrad-callout--animated.alpha-rectangle-orbit-tetrad-callout--0 {

package/layouts/core/references.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { handleBackground } from '@slidev/client';
+import { computed, type PropType } from 'vue';
+
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+export interface IReferenceItem {
+  authors: string;
+  year: number | string;
+  title: string;
+  url?: string;
+}
+
+const props = defineProps({
+  references: {
+    type: Array as PropType<IReferenceItem[]>,
+    default: () => [],
+  },
+  columns: {
+    type: [Number, String],
+    default: 2,
+  },
+  background: {
+    type: String,
+    default: '',
+  },
+});
+
+const style = computed(() =>
+  props.background ? handleBackground(props.background) : undefined,
+);
+
+const columnClass = computed(() => {
+  const cols = Number(props.columns) || 2;
+  if (cols === 1) return 'columns-1';
+  if (cols === 3) return 'columns-3';
+  return 'columns-2';
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-references slidev-layout h-full',
+);
+</script>
+
+<template>
+  <div v-bind="forwardedAttrs()" :class="className()" :style="style">
+    <slot />
+    <ul
+      v-if="props.references.length"
+      class="alpha-references__list list-none p-0 m-0 mt-3"
+      :class="[columnClass, 'gap-x-8']"
+    >
+      <li
+        v-for="(ref, index) in props.references"
+        :key="`${ref.authors}-${ref.year}-${index}`"
+        class="alpha-references__item break-inside-avoid mb-4 text-lg leading-snug"
+      >
+        <strong class="alpha-references__authors text-foreground-primary block">
+          {{ ref.authors }}
+          ({{ ref.year }})
+        </strong>
+        <a
+          v-if="ref.url"
+          :href="ref.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="alpha-references__title text-foreground-accent hover:underline block"
+        >
+          {{ ref.title }}
+        </a>
+        <span
+          v-else
+          class="alpha-references__title text-foreground-secondary block"
+        >
+          {{ ref.title }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>

package/layouts/core/style.css

@@ -15,3 +15,33 @@
     --alpha-bg-center-text: var(--alpha-foreground-accent, #fff);
   }
 }
+
+.slidev-page .slidev-layout.alpha-references ul:not([class*='alpha-references__list']) {
+  columns: 2;
+  column-gap: 2rem;
+  list-style: none;
+  padding: 0;
+  margin-top: 0.75rem;
+}
+
+.slidev-page .slidev-layout.alpha-references ul:not([class*='alpha-references__list']) > li {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.375;
+  break-inside: avoid;
+}
+
+.slidev-page .slidev-layout.alpha-references ul:not([class*='alpha-references__list']) {
+  columns: 2;
+  column-gap: 2rem;
+  list-style: none;
+  padding: 0;
+  margin-top: 0.75rem;
+}
+
+.slidev-page .slidev-layout.alpha-references ul:not([class*='alpha-references__list']) > li {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.375;
+  break-inside: avoid;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alphacifer/slidev-addon-theme",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "All Slidev addons for Alpha presentations",
   "type": "module",
   "keywords": [
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@vueuse/motion": "3.0.3",
-    "@alphacifer/core-utils": "^0.0.10",
-    "@alphacifer/slidev-core-theme": "^0.0.1"
+    "@alphacifer/slidev-core-theme": "^0.0.2",
+    "@alphacifer/core-utils": "^0.0.10"
   },
   "devDependencies": {
     "@slidev/cli": "52.19.0",