@ulu/frontend-vue 0.1.0-beta.18 → 0.1.0-beta.19

package/lib/components/forms/UluFormMessage.vue

@@ -3,18 +3,15 @@
     'site-form__error' : error,
     'site-form__warning' : warning
   }">
-    <FaIcon v-if="error" :icon="$site.getIcon('error')"/>
-    <FaIcon v-if="warning" :icon="$site.getIcon('warning')"/>
+    <UluIcon v-if="error || warning" :icon="`type:${ error ? 'error' : 'warning' }`" />
     <slot/>
   </p>
 </template>
 
-<script>
-  export default {
-    name: "FormMessage",
-    props: {
-      warning: Boolean,
-      error: Boolean,
-    }
-  };
+<script setup>
+  import UluIcon from "../elements/UluIcon.vue";
+  defineProps({
+    warning: Boolean,
+    error: Boolean,
+  });
 </script>

package/lib/components/forms/UluFormSelect.vue

@@ -18,20 +18,20 @@
   </div>
 </template>
 
-<script>
-  let count = 0;
-  export default {
-    name: "FormSelect",
-    props: {
-      label: String,
-      modelValue: String,
-      options: Array,
-      labelHidden: Boolean
-    },
-    data() {
-      return {
-        id: `select-id-${ ++count }`
-      };
-    }
-  };
+<script setup>
+  const getNextId = (() => {
+    let count = 0;
+    return () => `select-id-${++count}`;
+  })();
+
+  defineProps({
+    label: String,
+    modelValue: String,
+    options: Array,
+    labelHidden: Boolean
+  });
+
+  defineEmits(['update:modelValue']);
+
+  const id = getNextId();
 </script>

package/lib/components/forms/UluFormText.vue

@@ -14,19 +14,19 @@
   </div>
 </template>
 
-<script>
-  let count = 0;
-  export default {
-    name: "FormText",
-    props: {
-      label: String,
-      modelValue: String,
-      labelHidden: Boolean
-    },
-    data() {
-      return {
-        id: `text-input-id-${ ++count }`
-      };
-    }
-  };
+<script setup>
+  const getNextId = (() => {
+    let count = 0;
+    return () => `text-input-id-${++count}`;
+  })();
+
+  defineProps({
+    label: String,
+    modelValue: String,
+    labelHidden: Boolean
+  });
+
+  defineEmits(['update:modelValue']);
+
+  const id = getNextId();
 </script>

package/lib/components/forms/UluSearchForm.vue

@@ -13,19 +13,17 @@
       class="search-form__submit button button--primary"
       aria-label="Submit Search"
     >
-      <FaIcon :icon="$site.getIcon('search')"/>
+      <UluIcon icon="type:search" />
     </button>
   </div>
 </template>
 
-<script>
-  export default {
-    name: "SearchForm",
-    props: {
-      placeholder: {
-        type: String,
-        default: "Titles, keyword…"
-      }
+<script setup>
+  import UluIcon from "../elements/UluIcon.vue";
+  defineProps({
+    placeholder: {
+      type: String,
+      default: "Titles, keyword…"
     }
-  };
+  });
 </script>

package/lib/components/navigation/UluMenu.vue

@@ -60,7 +60,7 @@
       /**
        * Fired anytime a item is clicked
        */
-      "itemClick"
+      "item-click"
     ],
     props: {
       /**
@@ -98,7 +98,7 @@
         if (item.click) {
           item.click(event);
         }
-        this.$emit("itemClick", { item, event });
+        this.$emit("item-click", { item, event });
       }
     }
   };

package/lib/components/systems/scroll-anchors/UluScrollAnchors.vue

@@ -10,6 +10,7 @@
   import { SECTIONS, REGISTER, UNREGISTER } from "./symbols.js";
   export default {
     name: "ScrollAnchors",
+    emits: ["section-change"],
     props: {
       firstItemActive: Boolean,
       /**
@@ -97,7 +98,7 @@
                 } else if (lastExiting && section.active) {
                   removeActive();
                 }
-                this.$emit("sectionChange", { 
+                this.$emit("section-change", { 
                   section, 
                   sections, 
                   active: isIntersecting 

package/lib/components/systems/slider/UluImageSlideShow.vue

@@ -9,7 +9,7 @@
   <UluSlideShow 
     class="slideshow--images" 
     :items="images"
-    @slideChange="slideChange"
+    @slide-change="slideChange"
   >
     <template #slide="{ item }">
       <img :src="item.src" :alt="item.alt">

package/lib/components/systems/slider/UluSlideShow.vue

@@ -50,7 +50,7 @@
             @click="previous"
             :disabled="!canScrollLeft"
           >
-            <FaIcon class="slideshow__control-icon" icon="fas fa-chevron-left"/>
+            <UluIcon class="slideshow__control-icon" icon="type:next"/>
           </button>
         </li>
         <li class="slideshow__controls-item slideshow__controls-item--next">
@@ -60,7 +60,7 @@
             @click="next"
             :disabled="!canScrollRight"
           >
-            <FaIcon class="slideshow__control-icon" icon="fas fa-chevron-right"/>
+            <UluIcon class="slideshow__control-icon" icon="type:previous" />
           </button>
         </li>
       </ul>
@@ -97,8 +97,13 @@
 </template>
 
 <script>
+  import UluIcon from "../../elements/UluIcon.vue";
   export default {
     name: 'SlideShow',
+    emits: ['slide-change'],
+    components: {
+      UluIcon
+    },
     props: {
       /**
        * Should slides be focusable by tab key
@@ -278,7 +283,7 @@
             this.$nextTick(() => {
               const slide = this.getSlideByElement(entry.target);
               slide.active = entry.isIntersecting;
-              this.$emit('slideChange', { slide, track, nav });
+              this.$emit('slide-change', { slide, track, nav });
             });
           });
         };

package/lib/components/systems/table-sticky/UluTableSticky.vue

@@ -43,7 +43,7 @@
             pointerEvents: sizesCalculated ? 'auto' : 'none',
             width: tableWidth
           }"
-          @columnSorted="applySort"
+          @column-sorted="applySort"
         >
           <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
             <slot :name="name" v-bind="slotData" />
@@ -66,7 +66,7 @@
           opacity: headerOpacityX,
           pointerEvents: headerVisibleX ? 'auto' : 'none'
         }"
-        @columnSorted="applySort"
+        @column-sorted="applySort"
       >
         <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
           <slot :name="name" v-bind="slotData" />
@@ -138,9 +138,9 @@
         :getRowValue="getRowValue"
         :getColumnTitle="getColumnTitle"
         @vue:mounted="tableReady"
-        @actualHeaderRemoved="headerRemoved"
-        @actualHeaderAdded="headerAdded"
-        @columnSorted="applySort"
+        @actual-header-removed="headerRemoved"
+        @actual-header-added="headerAdded"
+        @column-sorted="applySort"
       >
         <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
           <slot :name="name" v-bind="slotData" />
@@ -167,7 +167,7 @@
         opacity: headerOpacityX,
         pointerEvents: headerVisibleX ? 'auto' : 'none'
       }"
-      @columnSorted="applySort"
+      @column-sorted="applySort"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
@@ -443,7 +443,7 @@
         } else {
           column.sortApplied = true;
         }
-        this.$emit("columnSort", column);
+        this.$emit("column-sort", column);
       },
       onColumnResize() {
         if (this.sizesPainted) {

package/lib/components/systems/table-sticky/UluTableStickyTable.vue

@@ -50,7 +50,7 @@
             :class="{ 
               'table-sticky__sort-button--focused' : column.sortFocused,
             }"
-            @click="$emit('columnSorted', column)"
+            @click="$emit('column-sorted', column)"
             @focus="handleSortFocus(column, true)"
             @blur="handleSortFocus(column, false)"
             :aria-pressed="column.sortApplied ? 'true' : 'false'"
@@ -199,9 +199,9 @@
         const { id } = column;
         const old = headerRefs[id];
         if (old) {
-          this.$emit("actualHeaderRemoved", old);
+          this.$emit("actual-header-removed", old);
         }
-        this.$emit("actualHeaderAdded", el);
+        this.$emit("actual-header-added", el);
         headerRefs[id] = el;
       },
       /**

package/lib/plugins/core/index.js

@@ -22,7 +22,10 @@ const defaults = {
     resizeBoth: "fas fa-grip",
     ellipsis: "fas fa-ellipsis",
     pathSeparator: "fas fa-chevron-right",
-    image: "fas fa-image"
+    image: "fas fa-image",
+    file: "fas fa-file",
+    next: "fas fa-chevron-left",
+    previous: "fas fa-chevron-right"
   }
 };
 

package/lib/plugins/toast/UluToast.vue

@@ -13,7 +13,7 @@
   >
     <div v-if="toast.icon || $slots.icon" class="toast__icon" :class="classes.icon">
       <slot name="icon" :toast="toast">
-        <FaIcon v-if="toast.icon" :icon="toast.icon"/>
+        <UluIcon v-if="toast.icon" :icon="toast.icon"/>
       </slot>
     </div>
     <div class="toast__content" :class="classes.content">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.18",
+  "version": "0.1.0-beta.19",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -57,13 +57,13 @@
   "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
   "peerDependencies": {
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.100",
+    "@ulu/frontend": "^0.1.0-beta.102",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
   "optionalDependencies": {
-    "gsap": "^3.13.0",
     "fuse.js": "^6.6.2",
+    "gsap": "^3.13.0",
     "vue3-dropzone": "^2.2.1"
   },
   "dependencies": {
@@ -76,10 +76,10 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-links": "^9.1.1",
     "@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.100",
+    "@ulu/frontend": "^0.1.0-beta.102",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",
     "react": "^19.1.1",
@@ -87,12 +87,11 @@
     "sass-embedded": "^1.89.2",
     "storybook": "^9.1.1",
     "storybook-addon-vue-mdx": "^2.0.2",
+    "typescript": "^5.3.3",
     "vite": "^7.0.0",
-    "vue-router": "^4.5.1",
-    "typescript": "^5.3.3"
+    "vue-router": "^4.5.1"
   },
   "volta": {
     "node": "22.17.0"
   }
 }
-

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":"AA8BA,mEAyDC;AA3DD,gCAA0D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AAiCA,mEAyDC;AA3DD,gCAA0D"}