@ulu/frontend-vue 0.1.0-beta.16 → 0.1.0-beta.17

package/lib/components/elements/UluCard.vue

@@ -54,7 +54,7 @@
         </component>
         <slot name="body"/>
       </div>
-      <div class="card__aside" v-if="$slots.body">
+      <div class="card__aside" v-if="$slots.aside">
         <slot name="aside"/>
       </div>
     </div>

package/lib/components/systems/facets/_facets.scss

@@ -54,9 +54,8 @@ $config: (
   $prefix: selector.class("facets");
 
   #{ $prefix }__body {
-        .FacetView__body {
-        display: flex
-;
+    .FacetView__body {
+      display: flex;
     }
   }
 }

package/lib/components/systems/index.js

@@ -5,17 +5,21 @@ export { default as UluFacetsSearch } from './facets/UluFacetsSearch.vue';
 export { default as UluFacetsSidebarLayout } from './facets/UluFacetsSidebarLayout.vue';
 export { default as UluFacetsSort } from './facets/UluFacetsSort.vue';
 export { default as UluFacetsList } from './facets/UluFacetsList.vue';
+
 export { default as UluScrollAnchors } from './scroll-anchors/UluScrollAnchors.vue';
 export { default as UluScrollAnchorsNav } from './scroll-anchors/UluScrollAnchorsNav.vue';
 export { default as UluScrollAnchorsNavAnimated } from './scroll-anchors/UluScrollAnchorsNavAnimated.vue';
 export { default as UluScrollAnchorsSection } from './scroll-anchors/UluScrollAnchorsSection.vue';
+
 export { default as UluShowSkeleton } from './skeleton/UluShowSkeleton.vue';
 export { default as UluSkeletonContent } from './skeleton/UluSkeletonContent.vue';
 export { default as UluSkeletonMedia } from './skeleton/UluSkeletonMedia.vue';
-export { default as UluSkeletonTextInline } from './skeleton/UluSkeletonTextInline.vue';
+export { default as UluSkeletonText } from './skeleton/UluSkeletonText.vue';
+
 export { default as UluImageSlideShow } from './slider/UluImageSlideShow.vue';
 export { default as UluSlideShow } from './slider/UluSlideShow.vue';
 export { default as UluSlideShowSlide } from './slider/UluSlideShowSlide.vue';
+
 export { default as UluTableSticky } from './table-sticky/UluTableSticky.vue';
 export { default as UluTableStickyRows } from './table-sticky/UluTableStickyRows.vue';
 export { default as UluTableStickyTable } from './table-sticky/UluTableStickyTable.vue';

package/lib/components/systems/skeleton/UluShowSkeleton.vue

@@ -1,13 +1,14 @@
 <template>
   <slot v-if="!when"/>
-  <SkeletonTextInline class="skeleton" v-else/>
+  <UluSkeletonText v-else inline/>
 </template>
 
-<script>
-  export default {
-    name: "ShowSkeleton",
-    props: {
-      when: Boolean,
-    },
-  };
+<script setup>
+  import UluSkeletonText from "./UluSkeletonText.vue";
+  defineProps({
+    /**
+     * If true will show whatever is passed to slot, else skeleton text
+     */
+    when: Boolean,
+  });
 </script>

package/lib/components/systems/skeleton/UluSkeletonContent.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="skeleton">
+  <div>
     <div v-for="(line, index) in linesWithSegments" :key="index">
       <span 
         v-for="segment in line"
         :key="segment"
-        class="skeleton__text skeleton__text--inline"
-        :class="{ 'skeleton__alt' : segment.alt }"
+        class="skeleton skeleton--text skeleton--inline"
+        :class="{ 'skeleton--background-alt' : segment.alt }"
         :style="{ width: `${ segment.width }%` }"
       > 
       </span>
@@ -13,48 +13,44 @@
   </div>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import { randomInt } from "@ulu/utils/random.js";
   import { arrayCreate } from "@ulu/utils/array.js";
-  export default {
-    name: "SkeletonContent",
-    props: {
-      lines: {
-        type: Number,
-        default: 6
-      },
-    },
-    methods: {
-      randomInt
+
+  const props = defineProps({
+    /**
+     * Amount of lines to generate
+     */
+    lines: {
+      type: Number,
+      default: 6
     },
-    computed: {
-      /**
-       * Creates the segments (like words) for the given line count
-       * - Uses random number of segments and makes sure to fill the line between 70% - 100%
-       */
-      linesWithSegments() {
-        return arrayCreate(this.lines, () => {
-          const minWidth = 15;
-          const total = randomInt(70, 100);
-          let widthCurrent = 0;
-          const newWidth = () => {
-            const remaining = total - widthCurrent;
-            const width = randomInt(minWidth, remaining);
-            widthCurrent += width;
-            return width;
-          };
-          const segments = [];
-          while (widthCurrent < total - minWidth) {
-            segments.push(newWidth());
-          }
-          const getActualTotal = () => segments.reduce((acc, a) => acc + a, 0);
-          while (getActualTotal() >= total) {
-            let removed = segments.pop();
-            if (!removed) break;
-          }
-          return segments.map(width => ({ width, alt: Math.random() < 0.5 }));
-        });
-      }
+  });
+
+  /**
+   * Creates the segments (like words) for the given line count
+   * - Uses random number of segments and makes sure to fill the line between 70% - 100%
+   */
+  const linesWithSegments = computed(() => arrayCreate(props.lines, () => {
+    const minWidth = 15;
+    const total = randomInt(70, 100);
+    let widthCurrent = 0;
+    const newWidth = () => {
+      const remaining = total - widthCurrent;
+      const width = randomInt(minWidth, remaining);
+      widthCurrent += width;
+      return width;
+    };
+    const segments = [];
+    while (widthCurrent < total - minWidth) {
+      segments.push(newWidth());
+    }
+    const getActualTotal = () => segments.reduce((acc, a) => acc + a, 0);
+    while (getActualTotal() >= total) {
+      let removed = segments.pop();
+      if (!removed) break;
     }
-  };
+    return segments.map(width => ({ width, alt: Math.random() < 0.5 }));
+  }));
 </script>

package/lib/components/systems/skeleton/UluSkeletonMedia.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="skeleton__block skeleton__block--media layout-flex-center-all">
-    <FaIcon style="font-size: 2rem" icon="image"/>
+  <div class="skeleton skeleton-block--media">
+    <UluIcon icon="type:image"/>
   </div>
 </template>
 
-<script>
-  export default {
-    name: "SkeletonMedia",
-  };
+<script setup>
+  import UluIcon from "../../elements/UluIcon.vue";
 </script>

package/lib/components/systems/skeleton/UluSkeletonText.vue

@@ -0,0 +1,27 @@
+<template>
+  <span 
+    class="skeleton skeleton--text"
+    :class="{
+      'skeleton--inline' : inline,
+      'skeleton--background-alt' : alt,
+      [`skeleton--width-${ width }`] : width
+    }"
+  ></span>
+</template>
+
+<script setup>
+  defineProps({
+    /**
+     * Inline modifier
+     */
+    inline: Boolean,
+    /**
+     * Use alternate background color
+     */
+    alt: Boolean,
+    /**
+     * Optional size (width) - should correspond with width setup in scss component
+     */
+    width: String
+  });
+</script>

package/lib/plugins/core/index.js

@@ -21,7 +21,8 @@ const defaults = {
     resizeVertical: "fas fa-grip-lines",
     resizeBoth: "fas fa-grip",
     ellipsis: "fas fa-ellipsis",
-    pathSeparator: "fas fa-chevron-right"
+    pathSeparator: "fas fa-chevron-right",
+    image: "fas fa-image"
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.16",
+  "version": "0.1.0-beta.17",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -35,7 +35,8 @@
     "docs:build": "storybook build -o docs",
     "build": "vite build",
     "types": "npx tsc",
-    "deploy": "npm run types && npm run build && npm run docs:build"
+    "deploy": "npm run types && npm run build && npm run docs:build",
+    "update-contexts": "rm -rf .contexts && mkdir -p .contexts/frontend && cp -R node_modules/@ulu/frontend/scss node_modules/@ulu/frontend/js .contexts/frontend/"
   },
   "keywords": [
     "vue",
@@ -56,7 +57,7 @@
   "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
   "peerDependencies": {
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.94",
+    "@ulu/frontend": "^0.1.0-beta.100",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
@@ -78,7 +79,7 @@
     "@storybook/addon-links": "^9.1.1",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.94",
+    "@ulu/frontend": "^0.1.0-beta.100",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",
     "react": "^19.1.1",

package/types/plugins/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AA6BA,mEAyDC;AA3DD,gCAA0D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AA8BA,mEAyDC;AA3DD,gCAA0D"}

package/lib/components/systems/skeleton/UluSkeletonTextInline.vue

@@ -1,9 +0,0 @@
-<template>
-  <span class="skeleton__text skeleton__text--inline"></span>
-</template>
-
-<script>
-  export default {
-    name: "SkeletonTextInline",
-  };
-</script>