@ulu/frontend-vue 0.1.1-beta.20 → 0.1.1-beta.21

package/lib/components/index.js

@@ -42,12 +42,14 @@ export { default as UluMenu } from './navigation/UluMenu.vue';
 export { default as UluMenuStack } from './navigation/UluMenuStack.vue';
 export { default as UluNavStrip } from './navigation/UluNavStrip.vue';
 export { default as UluSkipLink } from './navigation/UluSkipLink.vue';
-export { default as UluCondText } from './utils/UluCondText.vue';
+export { default as UluConditionalText } from './utils/UluConditionalText.vue';
+export { default as UluConditionalWrapper } from './utils/UluConditionalWrapper.vue';
 export { default as UluEmpty } from './utils/UluEmpty.vue';
 export { default as UluEmptyView } from './utils/UluEmptyView.vue';
 export { default as UluPlaceholderImage } from './utils/UluPlaceholderImage.vue';
 export { default as UluPlaceholderText } from './utils/UluPlaceholderText.vue';
 export { default as UluRouteAnnouncer } from './utils/UluRouteAnnouncer.vue';
+export { default as UluSanityRichText } from './utils/UluSanityRichText.vue';
 export { default as UluAnimateNumber } from './visualizations/UluAnimateNumber.vue';
 export { default as UluProgressBar } from './visualizations/UluProgressBar.vue';
 export { default as UluProgressCircle } from './visualizations/UluProgressCircle.vue';

package/lib/components/utils/{UluCondText.vue → UluConditionalText.vue}

@@ -10,7 +10,7 @@
    * Print out text if set (has value)
    */
   export default {
-    name: "UluCondText",
+    name: "UluConditionalText",
     props: {
       /**
        * Text to print in element

package/lib/components/utils/UluConditionalWrapper.vue

@@ -0,0 +1,29 @@
+<template>
+  <component v-if="!unwrapped" :is="is">
+    <slot></slot>
+  </component>
+  <template v-else>
+    <slot></slot>
+  </template>
+</template>
+
+<script setup>
+  defineProps({
+    /**
+     * The underlying component or HTML tag to render.
+     * Can be a string like 'div' or an imported component object.
+     */
+    is: {
+      type: [String, Object, Function], // Can be a string or a component definition
+      default: 'div' // A sensible default for a wrapper
+    },
+    /**
+     * If true, the wrapper will not be rendered and the content
+     * will be output directly.
+     */
+    unwrapped: {
+      type: Boolean,
+      default: false
+    }
+  });
+</script>

package/lib/components/utils/UluRouteAnnouncer.vue

@@ -26,7 +26,7 @@
     props: {
       /**
        * Allow user to bypass this functionality
-       * - Function should return true if the page should be annouced
+       * - Function should return true if the page should be announced
        * - Function is passed  (to, from, $route) => {}
        *   - to/from are path strings
        */

package/lib/components/utils/UluSanityRichText.vue

@@ -0,0 +1,41 @@
+<template>
+  <UluConditionalWrapper 
+    v-if="content?.length" 
+    class="wysiwyg" 
+    :unwrapped="noWrapper"
+  >
+    <PortableText :value="content" :components="portableComponents"/>
+  </UluConditionalWrapper>
+</template>
+<script setup>
+  import { h } from "vue";
+  import { PortableText } from '@portabletext/vue';
+  import UluConditionalWrapper from './UluConditionalWrapper.vue';
+
+  /**
+   * A component to render Sanity's Portable Text format.
+   * It requires the '@portabletext/vue' package to be installed by the consumer.
+   */
+  defineProps({
+    /**
+     * The array of Portable Text blocks to render.
+     */
+    content: Array,
+    /**
+     * If true, the output will not be wrapped in a div with the 'wysiwyg' class.
+     */
+    noWrapper: {
+      type: Boolean,
+      default: false
+    }
+  });
+
+  const portableComponents = {
+    types: {
+      image: ({ value }) => h('img', { 
+        src: `${ value.imageUrl }?max-w=1100&fit=crop`,
+        alt: value.imageAlt
+      }),
+    },
+  };
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.20",
+  "version": "0.1.1-beta.21",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -63,12 +63,13 @@
   "peerDependencies": {
     "@formkit/auto-animate": "^0.9.0",
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.118",
+    "@ulu/frontend": "^0.1.0-beta.122",
     "@unhead/vue": "^2.0.11",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
   "optionalDependencies": {
+    "@portabletext/vue": "^1.0.14",
     "fuse.js": "^6.6.2",
     "gsap": "^3.13.0",
     "vue3-dropzone": "^2.2.1"
@@ -87,7 +88,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.118",
+    "@ulu/frontend": "^0.1.0-beta.122",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",

package/types/components/index.d.ts

@@ -37,12 +37,14 @@ export { default as UluMenu } from "./navigation/UluMenu.vue";
 export { default as UluMenuStack } from "./navigation/UluMenuStack.vue";
 export { default as UluNavStrip } from "./navigation/UluNavStrip.vue";
 export { default as UluSkipLink } from "./navigation/UluSkipLink.vue";
-export { default as UluCondText } from "./utils/UluCondText.vue";
+export { default as UluConditionalText } from "./utils/UluConditionalText.vue";
+export { default as UluConditionalWrapper } from "./utils/UluConditionalWrapper.vue";
 export { default as UluEmpty } from "./utils/UluEmpty.vue";
 export { default as UluEmptyView } from "./utils/UluEmptyView.vue";
 export { default as UluPlaceholderImage } from "./utils/UluPlaceholderImage.vue";
 export { default as UluPlaceholderText } from "./utils/UluPlaceholderText.vue";
 export { default as UluRouteAnnouncer } from "./utils/UluRouteAnnouncer.vue";
+export { default as UluSanityRichText } from "./utils/UluSanityRichText.vue";
 export { default as UluAnimateNumber } from "./visualizations/UluAnimateNumber.vue";
 export { default as UluProgressBar } from "./visualizations/UluProgressBar.vue";
 export { default as UluProgressCircle } from "./visualizations/UluProgressCircle.vue";

package/types/components/utils/UluConditionalText.vue.d.ts

@@ -0,0 +1,29 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * Text to print in element
+     */
+    text: (ObjectConstructor | StringConstructor | ArrayConstructor | NumberConstructor)[];
+    /**
+     * Element type to render (ie. h1, h2, p, etc)
+     */
+    element: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Text to print in element
+     */
+    text: (ObjectConstructor | StringConstructor | ArrayConstructor | NumberConstructor)[];
+    /**
+     * Element type to render (ie. h1, h2, p, etc)
+     */
+    element: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    element: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=UluConditionalText.vue.d.ts.map

package/types/components/utils/UluConditionalText.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluConditionalText.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/utils/UluConditionalText.vue"],"names":[],"mappings":";IAmCM;;OAEG;;IAEH;;OAEG;;;;;;IANH;;OAEG;;IAEH;;OAEG"}

package/types/components/utils/UluConditionalWrapper.vue.d.ts

@@ -0,0 +1,20 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    is: string | Function | Record<string, any>;
+    unwrapped: boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly is: string | Function | Record<string, any>;
+    readonly unwrapped: boolean;
+};
+//# sourceMappingURL=UluConditionalWrapper.vue.d.ts.map

package/types/components/utils/UluConditionalWrapper.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluConditionalWrapper.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/utils/UluConditionalWrapper.vue"],"names":[],"mappings":"wBA0GqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,WAAW,CAAC;;;2OAE3C;;;;;;AA3ED;;;EAiBG"}

package/types/components/utils/UluRouteAnnouncer.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
      * Allow user to bypass this functionality
-     * - Function should return true if the page should be annouced
+     * - Function should return true if the page should be announced
      * - Function is passed  (to, from, $route) => {}
      *   - to/from are path strings
      */
@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Allow user to bypass this functionality
-     * - Function should return true if the page should be annouced
+     * - Function should return true if the page should be announced
      * - Function is passed  (to, from, $route) => {}
      *   - to/from are path strings
      */

package/types/components/utils/UluSanityRichText.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    noWrapper: boolean;
+    content?: unknown[] | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+/**
+ * A component to render Sanity's Portable Text format.
+ * It requires the '@portabletext/vue' package to be installed by the consumer.
+ */
+declare const __VLS_props: {
+    readonly noWrapper: boolean;
+    readonly content?: unknown[] | undefined;
+};
+//# sourceMappingURL=UluSanityRichText.vue.d.ts.map

package/types/components/utils/UluSanityRichText.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluSanityRichText.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/utils/UluSanityRichText.vue"],"names":[],"mappings":";YA4ImB,OAAO,CAAC,OAAO,WAAW,CAAC;;;;;AA9F5C;;;GAGG;AACH;;;EAYG"}