@redseed/redseed-ui-vue3 8.4.6 → 8.6.0

package/docs/04-card-components.md

@@ -309,6 +309,31 @@ For smaller cards that should display more columns per row, use the compact vari
 </template>
 ```
 
+### Meeting Card (Not Scheduled)
+```vue
+<template>
+    <Card draft :clickable="false" :hoverable="false">
+        <template #header>
+            <CardHeader>
+                Weekly 1:1
+
+                <template #badge>
+                    <BadgeSecondary>
+                        Not scheduled
+                    </BadgeSecondary>
+                </template>
+
+                <template #subtitle>
+                    No upcoming meeting
+                </template>
+            </CardHeader>
+        </template>
+
+        Schedule a time to connect.
+    </Card>
+</template>
+```
+
 ### Card with Meta Information
 ```vue
 <template>
@@ -342,4 +367,4 @@ For smaller cards that should display more columns per row, use the compact vari
 - Interactive cards (ButtonCard, RadioCard) are keyboard accessible
 - Focus states are clearly visible
 - Screen readers can navigate through card content and actions
-- ARIA labels and roles are included where appropriate 
+- ARIA labels and roles are included where appropriate 

package/index.js

@@ -32,6 +32,7 @@ export * from './src/components/MetaInfo'
 export * from './src/components/Modal'
 export * from './src/components/Pagination'
 export * from './src/components/Progress'
+export * from './src/components/Skeleton'
 export * from './src/components/Social'
 export * from './src/components/Sorting'
 export * from './src/components/Switcher'

package/package.json

@@ -1,21 +1,21 @@
 {
-  "name": "@redseed/redseed-ui-vue3",
-  "version": "8.4.6",
-  "description": "RedSeed UI Vue 3 components",
-  "main": "index.js",
-  "repository": "https://github.com/redseedtraining/redseed-ui",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@heroicons/vue": "^2.2.0",
-    "@vueuse/components": "^14.1.0",
-    "@vueuse/core": "^14.1.0",
-    "lodash": "^4.17.21",
-    "lottie-web": "^5.13.0",
-    "vue": "^3.5.25"
-  }
-}
+    "name": "@redseed/redseed-ui-vue3",
+    "version": "8.6.0",
+    "description": "RedSeed UI Vue 3 components",
+    "main": "index.js",
+    "repository": "https://github.com/redseedtraining/redseed-ui",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@heroicons/vue": "2.2.0",
+        "@vueuse/components": "14.2.0",
+        "@vueuse/core": "14.2.1",
+        "lodash": "4.17.23",
+        "lottie-web": "5.13.0",
+        "vue": "3.5.28"
+    }
+}

package/src/components/Card/Card.vue

@@ -51,6 +51,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    draft: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const emit = defineEmits(['click'])
@@ -71,6 +75,7 @@ const cardClass = computed(() => [
         'rsui-card--info': props.info,
         'rsui-card--warning': props.warning,
         'rsui-card--error': props.error,
+        'rsui-card--draft': props.draft,
         'rsui-card--2xs': responsiveWidth.value['2xs'],
         'rsui-card--xs': responsiveWidth.value['xs'],
         'rsui-card--sm': responsiveWidth.value['sm'],
@@ -90,6 +95,26 @@ function onClick() {
 </script>
 <template>
     <div ref="cardElement" :class="cardClass" data-testid="card">
+        <svg
+            v-if="draft"
+            class="rsui-card__draft-border"
+            width="100%"
+            height="100%"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false"
+        >
+            <rect
+                width="100%"
+                height="100%"
+                fill="none"
+                rx="12"
+                stroke="currentColor"
+                stroke-width="1"
+                stroke-dasharray="8 16"
+                stroke-linecap="square"
+            ></rect>
+        </svg>
         <div v-if="clickable" class="rsui-card__action-layer" :title="$attrs.title" @click="onClick"></div>
 
         <div v-if="$slots.image"

package/src/components/Skeleton/Skeleton.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    line: {
+        type: Boolean,
+        default: false,
+    },
+    circle: {
+        type: Boolean,
+        default: false,
+    },
+    square: {
+        type: Boolean,
+        default: false,
+    },
+    full: {
+        type: Boolean,
+        default: false,
+    },
+    half: {
+        type: Boolean,
+        default: false,
+    },
+    oneThird: {
+        type: Boolean,
+        default: false,
+    },
+    twoThirds: {
+        type: Boolean,
+        default: false,
+    },
+    thick: {
+        type: Boolean,
+        default: false,
+    },
+    rounded: {
+        type: Boolean,
+        default: false,
+    },
+    start: {
+        type: Boolean,
+        default: false,
+    },
+    end: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const shape = computed(() => {
+    if (props.circle) return 'circle'
+    if (props.square) return 'square'
+    return 'line'
+})
+
+const widthClass = computed(() => {
+    if (props.twoThirds) return 'rsui-skeleton--two-thirds'
+    if (props.oneThird) return 'rsui-skeleton--one-third'
+    if (props.half) return 'rsui-skeleton--half'
+    if (props.full) return 'rsui-skeleton--full'
+    return 'rsui-skeleton--full'
+})
+
+const positionClass = computed(() => {
+    if (props.end) return 'rsui-skeleton--end'
+    if (props.start) return 'rsui-skeleton--start'
+    return ''
+})
+</script>
+
+<template>
+    <div :class="['rsui-skeleton', widthClass, positionClass]">
+        <div
+            :class="[
+                shape === 'line' && 'rsui-skeleton__line',
+                shape === 'line' && props.thick && 'rsui-skeleton__line--thick',
+                shape === 'line' && props.rounded && 'rsui-skeleton__line--rounded',
+                shape === 'circle' && 'rsui-skeleton__circle',
+                shape === 'square' && 'rsui-skeleton__square',
+                shape === 'square' && props.rounded && 'rsui-skeleton__square--rounded',
+            ]"
+            aria-hidden="true"
+        ></div>
+    </div>
+</template>

package/src/components/Skeleton/index.js

@@ -0,0 +1,5 @@
+import Skeleton from './Skeleton.vue'
+
+export {
+    Skeleton,
+}