@finema/core 1.3.3 → 1.3.5

package/README.md

@@ -1,88 +1,88 @@
-# @finema/core Nuxt Module
-
-[✨  Release Notes](/CHANGELOG.md)
-
-## Todos
-
-- [ ] Loader
-- [ ] Button
-- [ ] Table
-- [ ] Icon
-- [ ] Badge
-- [ ] Status
-- Form
-  - [ ] Static
-  - [ ] Input
-  - [ ] Textarea
-  - [ ] Select
-  - [ ] Select multi
-  - [ ] Checkbox
-  - [ ] radio
-  - [ ] toggle
-  - [ ] datetime
-  - [ ] upload
-  - [ ] upload multi
-- [ ] Modal
-- [ ] Notification
-- [ ] Card
-- [ ] Tab
-- [ ] Alert
-- [ ] Container
-- [ ] Dropdown
-
-## Features
-
-- UI components
-- Useful composables
-- Security
-
-## Quick Setup
-
-1. Add `@finema/core` dependency to your project
-
-```bash
-# Using pnpm
-pnpm add -D @finema/core
-
-# Using yarn
-yarn add --dev @finema/core
-
-```
-
-1. Add `@finema/core` to the `modules` section of `nuxt.config.ts`
-
-```js
-export default defineNuxtConfig({
-  modules: [
-    '@finema/core'
-  ]
-})
-```
-
-That's it! You can now use @finema/core in your Nuxt app ✨
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Generate type stubs
-npm run dev:prepare
-
-# Develop with the playground
-npm run dev
-
-# Build the playground
-npm run dev:build
-
-# Run ESLint
-npm run lint
-
-# Run Vitest
-npm run test
-npm run test:watch
-
-# Release new version
-npm run release
-```
+# @finema/core Nuxt Module
+
+[✨  Release Notes](/CHANGELOG.md)
+
+## Todos
+
+- [ ] Loader
+- [ ] Button
+- [ ] Table
+- [ ] Icon
+- [ ] Badge
+- [ ] Status
+- Form
+  - [ ] Static
+  - [ ] Input
+  - [ ] Textarea
+  - [ ] Select
+  - [ ] Select multi
+  - [ ] Checkbox
+  - [ ] radio
+  - [ ] toggle
+  - [ ] datetime
+  - [ ] upload
+  - [ ] upload multi
+- [ ] Modal
+- [ ] Notification
+- [ ] Card
+- [ ] Tab
+- [ ] Alert
+- [ ] Container
+- [ ] Dropdown
+
+## Features
+
+- UI components
+- Useful composables
+- Security
+
+## Quick Setup
+
+1. Add `@finema/core` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D @finema/core
+
+# Using yarn
+yarn add --dev @finema/core
+
+```
+
+1. Add `@finema/core` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: [
+    '@finema/core'
+  ]
+})
+```
+
+That's it! You can now use @finema/core in your Nuxt app ✨
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Generate type stubs
+npm run dev:prepare
+
+# Develop with the playground
+npm run dev
+
+# Build the playground
+npm run dev:build
+
+# Run ESLint
+npm run lint
+
+# Run Vitest
+npm run test
+npm run test:watch
+
+# Release new version
+npm run release
+```

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import { merge } from 'lodash-es';
 
 const name = "@finema/core";
-const version = "1.3.3";
+const version = "1.3.5";
 
 const colors = {
   black: "#20243E",

package/dist/runtime/components/Avatar.vue

@@ -0,0 +1,27 @@
+<template>
+  <UAvatar v-bind="$attrs" :src="src" :alt="alt" :size="size" />
+</template>
+
+<script lang="ts" setup>
+import { type PropType } from '#imports'
+import { type AvatarSize } from '#ui/types'
+
+defineOptions({
+  inheritAttrs: true,
+})
+
+defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  alt: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: String as PropType<AvatarSize>,
+    default: 'sm',
+  },
+})
+</script>

package/dist/runtime/components/Button/Group.vue

@@ -1,31 +1,31 @@
-<template>
-  <div>
-    <UButtonGroup v-bind="$attrs">
-      <Button label="Button" />
-      <Button color="blue" size="xs">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="h-3 w-3"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
-          />
-        </svg>
-      </Button>
-    </UButtonGroup>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  inheritAttrs: true,
-})
-</script>
-
-<style></style>
+<template>
+  <div>
+    <UButtonGroup v-bind="$attrs">
+      <Button label="Button" />
+      <Button color="blue" size="xs">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="h-3 w-3"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
+          />
+        </svg>
+      </Button>
+    </UButtonGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>
+
+<style></style>

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

@@ -1,17 +1,17 @@
-<template>
-  <UButton v-bind="$attrs">
-    <template #leading>
-      <slot name="leading" />
-    </template>
-    <slot />
-
-    <template #trailing>
-      <slot name="trailing" />
-    </template>
-  </UButton>
-</template>
-<script lang="ts" setup>
-defineOptions({
-  inheritAttrs: true,
-})
-</script>
+<template>
+  <UButton v-bind="$attrs">
+    <template #leading>
+      <slot name="leading" />
+    </template>
+    <slot />
+
+    <template #trailing>
+      <slot name="trailing" />
+    </template>
+  </UButton>
+</template>
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>

package/dist/runtime/components/Core.vue

@@ -1,4 +1,4 @@
-<template>
-  <Dialog />
-</template>
-<script lang="ts" setup></script>
+<template>
+  <Dialog />
+</template>
+<script lang="ts" setup></script>

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

@@ -1,63 +1,63 @@
-<template>
-  <Modal v-if="dialog.meta?.type" v-model="dialog.isShow" class="dialog" prevent-close>
-    <div :class="['flex items-center pt-8', { 'flex-col': !dialog.meta.isShowCancelBtn }]">
-      <div
-        :class="[
-          {
-            'text-warning': dialog.meta?.type === DialogType.WARNING,
-            'text-danger': dialog.meta?.type === DialogType.ERROR,
-            'text-info': dialog.meta?.type === DialogType.INFO,
-            'text-success': dialog.meta?.type === DialogType.SUCCESS,
-            'mr-4': dialog.meta.isShowCancelBtn,
-          },
-        ]"
-      >
-        <em v-if="dialog.meta?.type === 'success'" class="ic ic-check-circle-solid dialog-icon" />
-        <em v-if="dialog.meta?.type === 'info'" class="ic ic-info-circle-solid dialog-icon" />
-        <em
-          v-if="dialog.meta?.type === 'warning'"
-          class="ic ic-exclamation-triangle-solid dialog-icon"
-        />
-        <em v-if="dialog.meta?.type === 'error'" class="ic ic-x-circle-solid dialog-icon" />
-      </div>
-      <div :class="['flex w-full flex-col', { 'mt-4 text-center': !dialog.meta.isShowCancelBtn }]">
-        <h3 class="dialog-title">
-          {{ dialog.meta?.title }}
-        </h3>
-        <p class="dialog-message">
-          {{ dialog.meta?.message }}
-        </p>
-      </div>
-    </div>
-
-    <div :class="['mt-5 flex', dialog.meta.isShowCancelBtn ? 'justify-end' : 'justify-center ']">
-      <Button
-        v-if="dialog.meta?.isShowCancelBtn"
-        class="text-gray mr-4"
-        type="button"
-        @click="dialog.closeDialogCancel"
-      >
-        {{ dialog.meta?.cancelText || 'ยกเลิก' }}
-      </Button>
-      <Button
-        :class="[
-          {
-            'btn-success': dialog.meta?.type === DialogType.SUCCESS,
-            'btn-danger': dialog.meta?.type === DialogType.ERROR,
-            'btn-info': dialog.meta?.type === DialogType.INFO,
-            'btn-warning': dialog.meta?.type === DialogType.WARNING,
-            'mr-3': dialog.meta.isShowCancelBtn,
-          },
-        ]"
-        @click="dialog.closeDialogProceed"
-      >
-        {{ dialog.meta?.confirmText || 'ตกลง' }}
-      </Button>
-    </div>
-  </Modal>
-</template>
-<script lang="tsx" setup>
-import { DialogType, useDialog } from '#core/composables/useDialog'
-
-const dialog = useDialog()
-</script>
+<template>
+  <Modal v-if="dialog.meta?.type" v-model="dialog.isShow" class="dialog" prevent-close>
+    <div :class="['flex items-center pt-8', { 'flex-col': !dialog.meta.isShowCancelBtn }]">
+      <div
+        :class="[
+          {
+            'text-warning': dialog.meta?.type === DialogType.WARNING,
+            'text-danger': dialog.meta?.type === DialogType.ERROR,
+            'text-info': dialog.meta?.type === DialogType.INFO,
+            'text-success': dialog.meta?.type === DialogType.SUCCESS,
+            'mr-4': dialog.meta.isShowCancelBtn,
+          },
+        ]"
+      >
+        <em v-if="dialog.meta?.type === 'success'" class="ic ic-check-circle-solid dialog-icon" />
+        <em v-if="dialog.meta?.type === 'info'" class="ic ic-info-circle-solid dialog-icon" />
+        <em
+          v-if="dialog.meta?.type === 'warning'"
+          class="ic ic-exclamation-triangle-solid dialog-icon"
+        />
+        <em v-if="dialog.meta?.type === 'error'" class="ic ic-x-circle-solid dialog-icon" />
+      </div>
+      <div :class="['flex w-full flex-col', { 'mt-4 text-center': !dialog.meta.isShowCancelBtn }]">
+        <h3 class="dialog-title">
+          {{ dialog.meta?.title }}
+        </h3>
+        <p class="dialog-message">
+          {{ dialog.meta?.message }}
+        </p>
+      </div>
+    </div>
+
+    <div :class="['mt-5 flex', dialog.meta.isShowCancelBtn ? 'justify-end' : 'justify-center ']">
+      <Button
+        v-if="dialog.meta?.isShowCancelBtn"
+        class="text-gray mr-4"
+        type="button"
+        @click="dialog.closeDialogCancel"
+      >
+        {{ dialog.meta?.cancelText || 'ยกเลิก' }}
+      </Button>
+      <Button
+        :class="[
+          {
+            'btn-success': dialog.meta?.type === DialogType.SUCCESS,
+            'btn-danger': dialog.meta?.type === DialogType.ERROR,
+            'btn-info': dialog.meta?.type === DialogType.INFO,
+            'btn-warning': dialog.meta?.type === DialogType.WARNING,
+            'mr-3': dialog.meta.isShowCancelBtn,
+          },
+        ]"
+        @click="dialog.closeDialogProceed"
+      >
+        {{ dialog.meta?.confirmText || 'ตกลง' }}
+      </Button>
+    </div>
+  </Modal>
+</template>
+<script lang="tsx" setup>
+import { DialogType, useDialog } from '#core/composables/useDialog'
+
+const dialog = useDialog()
+</script>

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

@@ -0,0 +1,80 @@
+<template>
+  <UDropdown
+    v-if="renderOnMounted"
+    v-bind="attrs"
+    :items="items"
+    :mode="mode"
+    :open-delay="openDelay"
+    :close-delay="closeDelay"
+    :popper="{ placement: placement, arrow: arrow, offsetDistance: offset }"
+    :ui="ui"
+  >
+    <slot />
+
+    <template v-for="(_, slot) of $slots" #[slot]="slotProps">
+      <slot :name="slot" v-bind="slotProps || {}" />
+    </template>
+  </UDropdown>
+</template>
+
+<script lang="ts" setup>
+import { type PropType, ref, onMounted, useUiConfig, useUI, toRef } from '#imports'
+import { type DropdownItem } from '#ui/types'
+import type { Strategy } from '#core/types/utils'
+import { dropdown } from '#ui/ui.config'
+import { DropdownPlacementArray, type DropdownPlacement } from './types'
+
+const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<DropdownItem[][]>,
+    default: () => [],
+  },
+  mode: {
+    type: String as PropType<'click' | 'hover'>,
+    default: 'click',
+    validator: (value: string) => ['click', 'hover'].includes(value),
+  },
+  arrow: {
+    type: Boolean,
+    default: false,
+  },
+  offset: {
+    type: Number,
+    default: 10,
+  },
+  openDelay: {
+    type: Number,
+    default: 0,
+  },
+  closeDelay: {
+    type: Number,
+    default: 0,
+  },
+  placement: {
+    type: String as PropType<DropdownPlacement>,
+    default: 'bottom-start',
+    validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
+  },
+  class: {
+    type: [String, Array, Object] as PropType<any>,
+    default: () => '',
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+    default: () => ({}),
+  },
+})
+
+const renderOnMounted = ref(false)
+
+onMounted(() => {
+  renderOnMounted.value = true
+  ui.value.item.avatar = {
+    base: 'flex-shrink-0',
+  } as any
+})
+
+const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
+</script>

package/dist/runtime/components/Dropdown/types.d.ts

@@ -0,0 +1,2 @@
+export type DropdownPlacement = 'auto' | 'auto-end' | 'auto-start' | 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start';
+export declare const DropdownPlacementArray: DropdownPlacement[];

package/dist/runtime/components/Dropdown/types.mjs

@@ -0,0 +1,17 @@
+export const DropdownPlacementArray = [
+  "auto",
+  "auto-end",
+  "auto-start",
+  "bottom",
+  "bottom-end",
+  "bottom-start",
+  "left",
+  "left-end",
+  "left-start",
+  "right",
+  "right-end",
+  "right-start",
+  "top",
+  "top-end",
+  "top-start"
+];

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

@@ -1,10 +1,10 @@
-<template>
-  <UFormGroup :label="label" :name="name" :error="errorMessage" :required="!!isRequired">
-    <slot />
-  </UFormGroup>
-</template>
-<script lang="ts" setup>
-import { type IFieldWrapperProps } from '#core/composables/useForm'
-
-defineProps<IFieldWrapperProps>()
-</script>
+<template>
+  <UFormGroup :label="label" :name="name" :error="errorMessage" :required="!!isRequired">
+    <slot />
+  </UFormGroup>
+</template>
+<script lang="ts" setup>
+import { type IFieldWrapperProps } from '#core/composables/useForm'
+
+defineProps<IFieldWrapperProps>()
+</script>

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

@@ -1,41 +1,41 @@
-<template>
-  <div class="fields">
-    <template v-for="(option, index) in options" :key="option.props.name + index + option.type">
-      <div v-if="!option.isHide" :class="option.class">
-        <FormInputStatic
-          v-if="option.type === INPUT_TYPES.STATIC"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputText
-          v-if="option.type === INPUT_TYPES.TEXT"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputToggle
-          v-if="option.type === INPUT_TYPES.TOGGLE"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputSelect
-          v-if="option.type === INPUT_TYPES.SELECT"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-      </div>
-    </template>
-  </div>
-</template>
-<script lang="ts" setup>
-import { type FormContext } from 'vee-validate'
-import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
-
-defineProps<{
-  form?: FormContext
-  options: IFormField[]
-}>()
-</script>
+<template>
+  <div class="fields">
+    <template v-for="(option, index) in options" :key="option.props.name + index + option.type">
+      <div v-if="!option.isHide" :class="option.class">
+        <FormInputStatic
+          v-if="option.type === INPUT_TYPES.STATIC"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputText
+          v-if="option.type === INPUT_TYPES.TEXT"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputToggle
+          v-if="option.type === INPUT_TYPES.TOGGLE"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputSelect
+          v-if="option.type === INPUT_TYPES.SELECT"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type FormContext } from 'vee-validate'
+import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
+
+defineProps<{
+  form?: FormContext
+  options: IFormField[]
+}>()
+</script>