@finema/core 2.18.3 → 2.20.0

package/README.md

@@ -1,79 +1,79 @@
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: Finema UI Kit (Note: package.json has name: @finema/core, consider aligning these)
-- Package name: @finema/core
-- Description: A comprehensive UI kit for Finema projects.
--->
-
-# Finema UI Kit
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-A comprehensive UI kit for building consistent and beautiful user interfaces for Finema projects, designed to integrate seamlessly with Nuxt. This package is named `@finema/core` on npm.
-
-- [✨ &nbsp;Release Notes](/CHANGELOG.md)
-- [📖 &nbsp;Storybook](https://your-storybook-url.com) <!-- Add a link to your Storybook -->
-- [🕹️ &nbsp;Playground](#playground)
-
-## Features
-
-<!-- Highlight some of the features your UI kit provides here -->
-- 🎨 &nbsp;Wide range of customizable components, built for Vue and Nuxt
-- 📱 &nbsp;Responsive design out-of-the-box
-- ♿ &nbsp;Accessibility focused
-- 🛠️ &nbsp;Easy to integrate and use with Nuxt auto-import capabilities
-
-## 🚀 Installation
-
-Install the UI kit in your project using npm or yarn:
-
-```bash
-npm install @finema/core
-```
-
-or
-
-```bash
-yarn add @finema/core
-```
-
-## 🛠️ Available Scripts
-
-In the project directory, you can run the following scripts:
-
-- `npm run dev` or `yarn dev`: Runs the playground app in development mode.
-- `npm run dev:build` or `yarn dev:build`: Builds the playground app.
-- `npm run dev:prepare` or `yarn dev:prepare`: Prepares the development environment.
-- `npm run lint` or `yarn lint`: Lints the codebase.
-- `npm run test` or `yarn test`: Runs tests.
-- `npm run release` or `yarn release`: Creates a new release (lints, tests, builds, publishes).
-
-## 🕹️ Playground
-
-This project includes a `playground` directory that you can use to test and experiment with the UI components.
-
-To run the playground:
-1. Navigate to the `playground` directory.
-2. Install dependencies if you haven't already (`npm install` or `yarn install`).
-3. Run `npm run dev` or `yarn dev`.
-
-## 🤝 Contributing
-
-Contributions are welcome! Please refer to the `CONTRIBUTING.md` file for guidelines. (You'll need to create this file).
-
-<!--
-Badge URLs - Keep these at the bottom of the file for better readability
--->
-[npm-version-src]: https://img.shields.io/npm/v/@finema/core.svg
-[npm-version-href]: https://npmjs.com/package/@finema/core
-[npm-downloads-src]: https://img.shields.io/npm/dm/@finema/core.svg
-[npm-downloads-href]: https://npmjs.com/package/@finema/core
-[license-src]: https://img.shields.io/npm/l/@finema/core.svg
-[license-href]: https://npmjs.com/package/@finema/core
-[nuxt-src]: https://img.shields.io/badge/Nuxt-00DC82?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: Finema UI Kit (Note: package.json has name: @finema/core, consider aligning these)
+- Package name: @finema/core
+- Description: A comprehensive UI kit for Finema projects.
+-->
+
+# Finema UI Kit
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+A comprehensive UI kit for building consistent and beautiful user interfaces for Finema projects, designed to integrate seamlessly with Nuxt. This package is named `@finema/core` on npm.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+- [📖 &nbsp;Storybook](https://your-storybook-url.com) <!-- Add a link to your Storybook -->
+- [🕹️ &nbsp;Playground](#playground)
+
+## Features
+
+<!-- Highlight some of the features your UI kit provides here -->
+- 🎨 &nbsp;Wide range of customizable components, built for Vue and Nuxt
+- 📱 &nbsp;Responsive design out-of-the-box
+- ♿ &nbsp;Accessibility focused
+- 🛠️ &nbsp;Easy to integrate and use with Nuxt auto-import capabilities
+
+## 🚀 Installation
+
+Install the UI kit in your project using npm or yarn:
+
+```bash
+npm install @finema/core
+```
+
+or
+
+```bash
+yarn add @finema/core
+```
+
+## 🛠️ Available Scripts
+
+In the project directory, you can run the following scripts:
+
+- `npm run dev` or `yarn dev`: Runs the playground app in development mode.
+- `npm run dev:build` or `yarn dev:build`: Builds the playground app.
+- `npm run dev:prepare` or `yarn dev:prepare`: Prepares the development environment.
+- `npm run lint` or `yarn lint`: Lints the codebase.
+- `npm run test` or `yarn test`: Runs tests.
+- `npm run release` or `yarn release`: Creates a new release (lints, tests, builds, publishes).
+
+## 🕹️ Playground
+
+This project includes a `playground` directory that you can use to test and experiment with the UI components.
+
+To run the playground:
+1. Navigate to the `playground` directory.
+2. Install dependencies if you haven't already (`npm install` or `yarn install`).
+3. Run `npm run dev` or `yarn dev`.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please refer to the `CONTRIBUTING.md` file for guidelines. (You'll need to create this file).
+
+<!--
+Badge URLs - Keep these at the bottom of the file for better readability
+-->
+[npm-version-src]: https://img.shields.io/npm/v/@finema/core.svg
+[npm-version-href]: https://npmjs.com/package/@finema/core
+[npm-downloads-src]: https://img.shields.io/npm/dm/@finema/core.svg
+[npm-downloads-href]: https://npmjs.com/package/@finema/core
+[license-src]: https://img.shields.io/npm/l/@finema/core.svg
+[license-href]: https://npmjs.com/package/@finema/core
+[nuxt-src]: https://img.shields.io/badge/Nuxt-00DC82?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.18.3",
+  "version": "2.20.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -3,7 +3,7 @@ import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.18.3";
+const version = "2.20.0";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/DevToolsWindow/index.vue

@@ -1,99 +1,102 @@
 <template>
-  <div
-    v-show="isShowDevTools"
-    ref="devToolsRef"
-    class="fixed z-50 overflow-hidden rounded-lg border border-neutral-300 bg-white opacity-80 shadow-2xl"
-    :style="devToolsDynamicStyles"
-  >
-    <!-- Draggable Title Bar -->
-    <div class="flex items-center justify-between px-2 py-1 select-none">
-      <p
-        class="flex-grow cursor-move text-sm font-semibold"
-        @mousedown.prevent="handleDragStart"
-      >
-        Debug Tools
-      </p>
-      <div class="flex items-center">
-        <Button
-          icon="i-heroicons-arrow-path"
-          size="xs"
-          color="neutral"
-          variant="ghost"
-          class="mr-1"
-          title="Reset Position & Size"
-          @click.stop="resetDevToolsState"
-        />
-        <Button
-          icon="i-heroicons-x-mark"
-          size="xs"
-          color="neutral"
-          variant="ghost"
-          title="Close DevTools"
-          @click.stop="closeDevTools"
-        />
-      </div>
-    </div>
-    <hr class="text-neutral-300" />
-    <!-- Content Area Target for Logs -->
-    <div
-      id="dev-logs"
-      class="flex flex-1 flex-col space-y-1 overflow-auto p-2"
-      :style="{ height: `calc(${devToolsHeight} - 40px)` }"
-    />
-
-    <!-- Resize Handles -->
-    <div
-      v-if="!isDragging"
-      class="resize-handles"
-    >
-      <div
-        class="resize-handle top-left"
-        @mousedown.prevent="handleResizeStart('top-left', $event)"
-      />
-      <div
-        class="resize-handle top-center"
-        @mousedown.prevent="handleResizeStart('top', $event)"
-      />
-      <div
-        class="resize-handle top-right"
-        @mousedown.prevent="handleResizeStart('top-right', $event)"
-      />
-      <div
-        class="resize-handle middle-left"
-        @mousedown.prevent="handleResizeStart('left', $event)"
-      />
-      <div
-        class="resize-handle middle-right"
-        @mousedown.prevent="handleResizeStart('right', $event)"
-      />
-      <div
-        class="resize-handle bottom-left"
-        @mousedown.prevent="handleResizeStart('bottom-left', $event)"
-      />
-      <div
-        class="resize-handle bottom-center"
-        @mousedown.prevent="handleResizeStart('bottom', $event)"
-      />
-      <div
-        class="resize-handle bottom-right"
-        @mousedown.prevent="handleResizeStart('bottom-right', $event)"
-      />
-    </div>
-  </div>
-
-  <!-- Toggle button for this DevToolsWindow -->
-  <div
-    class="fixed right-1 bottom-1 z-[99999]"
-  >
-    <Button
-      :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
-      color="info"
-      square
-      size="sm"
-      :ui="{ base: 'rounded-full' }"
-      @click="toggleDevTools"
-    />
-  </div>
+  <div
+    v-show="isShowDevTools"
+    ref="devToolsRef"
+    class="
+      fixed z-50 overflow-hidden rounded-lg border border-neutral-300 bg-white
+      opacity-80 shadow-2xl
+    "
+    :style="devToolsDynamicStyles"
+  >
+    <!-- Draggable Title Bar -->
+    <div class="flex items-center justify-between px-2 py-1 select-none">
+      <p
+        class="flex-grow cursor-move text-sm font-semibold"
+        @mousedown.prevent="handleDragStart"
+      >
+        Debug Tools
+      </p>
+      <div class="flex items-center">
+        <Button
+          icon="i-heroicons-arrow-path"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          class="mr-1"
+          title="Reset Position & Size"
+          @click.stop="resetDevToolsState"
+        />
+        <Button
+          icon="i-heroicons-x-mark"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          title="Close DevTools"
+          @click.stop="closeDevTools"
+        />
+      </div>
+    </div>
+    <hr class="text-neutral-300" />
+    <!-- Content Area Target for Logs -->
+    <div
+      id="dev-logs"
+      class="flex flex-1 flex-col space-y-1 overflow-auto p-2"
+      :style="{ height: `calc(${devToolsHeight} - 40px)` }"
+    />
+
+    <!-- Resize Handles -->
+    <div
+      v-if="!isDragging"
+      class="resize-handles"
+    >
+      <div
+        class="resize-handle top-left"
+        @mousedown.prevent="handleResizeStart('top-left', $event)"
+      />
+      <div
+        class="resize-handle top-center"
+        @mousedown.prevent="handleResizeStart('top', $event)"
+      />
+      <div
+        class="resize-handle top-right"
+        @mousedown.prevent="handleResizeStart('top-right', $event)"
+      />
+      <div
+        class="resize-handle middle-left"
+        @mousedown.prevent="handleResizeStart('left', $event)"
+      />
+      <div
+        class="resize-handle middle-right"
+        @mousedown.prevent="handleResizeStart('right', $event)"
+      />
+      <div
+        class="resize-handle bottom-left"
+        @mousedown.prevent="handleResizeStart('bottom-left', $event)"
+      />
+      <div
+        class="resize-handle bottom-center"
+        @mousedown.prevent="handleResizeStart('bottom', $event)"
+      />
+      <div
+        class="resize-handle bottom-right"
+        @mousedown.prevent="handleResizeStart('bottom-right', $event)"
+      />
+    </div>
+  </div>
+
+  <!-- Toggle button for this DevToolsWindow -->
+  <div
+    class="fixed right-1 bottom-1 z-[99999]"
+  >
+    <Button
+      :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
+      color="info"
+      square
+      size="sm"
+      :ui="{ base: 'rounded-full' }"
+      @click="toggleDevTools"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/Dialog/index.vue

@@ -1,41 +1,41 @@
 <template>
   <AlertDialogRoot :open="true">
     <AlertDialogPortal>
-      <AlertDialogOverlay :class="ui.overlay()" />
+      <AlertDialogOverlay :class="theme.overlay()" />
       <AlertDialogContent
-        :class="ui.base()"
+        :class="theme.base()"
       >
         <Icon
           v-if="!propsSafe.isHideIcon"
           :name="getIcon"
-          :class="ui.icon()"
+          :class="theme.icon()"
         />
-        <div :class="ui.wrapper()">
-          <AlertDialogTitle :class="ui.title()">
+        <div :class="theme.wrapper()">
+          <AlertDialogTitle :class="theme.title()">
             {{ propsSafe.title }}
           </AlertDialogTitle>
           <AlertDialogDescription
             v-if="propsSafe.description"
-            :class="ui.description()"
+            :class="theme.description()"
           >
             {{ propsSafe.description }}
           </AlertDialogDescription>
 
-          <div :class="ui.buttonGroup()">
+          <div :class="theme.buttonGroup()">
             <Button
               v-if="propsSafe.isShowCancelBtn"
               type="button"
               color="neutral"
               variant="outline"
-              :class="ui.cancelButton()"
+              :class="theme.cancelButton()"
               @click="emits('close', false)"
             >
               {{ propsSafe.cancelText }}
             </Button>
             <Button
               type="button"
-              :color="propsSafe.isConfirm ? dialogConfig.confirmColor : propsSafe.type"
-              :class="ui.confirmButton()"
+              :color="propsSafe.isConfirm ? staticTheme.confirmColor : propsSafe.type"
+              :class="theme.confirmButton()"
               @click="emits('close', true)"
             >
               {{ propsSafe.confirmText }}
@@ -57,7 +57,7 @@ import {
   AlertDialogTitle
 } from "reka-ui";
 import { computed, useAttrs } from "vue";
-import { useUiAllConfig, useUiConfig } from "../../composables/useConfig";
+import { useUiIconConfig, useUiConfig, useUiStaticConfig } from "../../composables/useConfig";
 import { dialogTheme } from "#core/theme/dialog";
 import { DialogType } from "#core/composables/useDialog";
 const emits = defineEmits();
@@ -66,7 +66,8 @@ const props = withDefaults(defineProps(), {
   cancelText: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01"
 });
 const attrs = useAttrs();
-const dialogConfig = useUiAllConfig().dialog.slots;
+const icons = useUiIconConfig("dialog");
+const staticTheme = useUiStaticConfig("dialog");
 const propsSafe = computed(() => {
   if (props.title) {
     return props;
@@ -82,22 +83,22 @@ const getIcon = computed(() => {
     return propsSafe.value.icon;
   }
   if (propsSafe.value.isConfirm) {
-    return dialogConfig.iconConfirm;
+    return icons.iconConfirm;
   }
   switch (propsSafe.value.type) {
     case DialogType.SUCCESS:
-      return dialogConfig.iconSuccess;
+      return icons.iconSuccess;
     case DialogType.ERROR:
-      return dialogConfig.iconError;
+      return icons.iconError;
     case DialogType.INFO:
-      return dialogConfig.iconInfo;
+      return icons.iconInfo;
     case DialogType.WARNING:
-      return dialogConfig.iconWarning;
+      return icons.iconWarning;
     default:
-      return dialogConfig.iconInfo;
+      return icons.iconInfo;
   }
 });
-const ui = computed(() => useUiConfig(dialogTheme, "dialog")({
+const theme = computed(() => useUiConfig(dialogTheme, "dialog")({
   color: propsSafe.value.isConfirm ? void 0 : propsSafe.value.type,
   confirm: propsSafe.value.isConfirm
 }));

package/dist/runtime/components/Form/FieldWrapper.vue

@@ -1,17 +1,17 @@
 <template>
-  <FormField
-    :label="label"
-    :name="name"
-    :description="description"
-    :hint="hint"
-    :data-testid="name"
-    :help="help"
-    :error="errorMessage"
-    :required="!!required"
-    :ui="containerUi"
-  >
-    <slot />
-  </FormField>
+  <FormField
+    :label="label"
+    :name="name"
+    :description="description"
+    :hint="hint"
+    :data-testid="name"
+    :help="help"
+    :error="errorMessage"
+    :required="!!required"
+    :ui="containerUi"
+  >
+    <slot />
+  </FormField>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/Fields.vue

@@ -20,6 +20,7 @@
 import { computed } from "vue";
 import FormInputTextarea from "./InputTextarea/index.vue";
 import FormInputText from "./InputText/index.vue";
+import FormInputSearch from "./InputSearch/index.vue";
 import FormInputNumber from "./InputNumber/index.vue";
 import FormInputToggle from "./InputToggle/index.vue";
 import FormInputCheckbox from "./InputCheckbox/index.vue";
@@ -45,6 +46,10 @@ const componentMap = {
     component: FormInputText,
     props: {}
   },
+  [INPUT_TYPES.SEARCH]: {
+    component: FormInputSearch,
+    props: {}
+  },
   [INPUT_TYPES.TEXTAREA]: {
     component: FormInputTextarea,
     props: {}

package/dist/runtime/components/Form/InputCheckbox/index.vue

@@ -1,22 +1,22 @@
 <template>
-  <FieldWrapper
-    v-bind="wrapperProps"
-    label=""
-    description=""
-  >
-    <Checkbox
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      :name="name"
-      :label="label"
-      :description="description"
-      :required="required"
-      :variant="variant"
-      :indicator="indicator"
-      :ui="ui"
-      @update:modelValue="onChange"
-    />
-  </FieldWrapper>
+  <FieldWrapper
+    v-bind="wrapperProps"
+    label=""
+    description=""
+  >
+    <Checkbox
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :label="label"
+      :description="description"
+      :required="required"
+      :variant="variant"
+      :indicator="indicator"
+      :ui="ui"
+      @update:modelValue="onChange"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/InputNumber/index.vue

@@ -1,24 +1,24 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <InputNumber
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      :name="name"
-      :placeholder="wrapperProps.placeholder"
-      :autofocus="!!autoFocus"
-      :readonly="readonly"
-      :orientation="orientation"
-      :increment-disabled="incrementDisabled"
-      :decrement-disabled="decrementDisabled"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disable-wheel-change="disableWheelChange"
-      :format-options="formatOptions"
-      :ui="ui"
-      @update:model-value="onChange"
-    />
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <InputNumber
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :autofocus="!!autoFocus"
+      :readonly="readonly"
+      :orientation="orientation"
+      :increment-disabled="incrementDisabled"
+      :decrement-disabled="decrementDisabled"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disable-wheel-change="disableWheelChange"
+      :format-options="formatOptions"
+      :ui="ui"
+      @update:model-value="onChange"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>