@finema/core 1.2.5 → 1.3.0

package/README.md

@@ -1,94 +1,88 @@
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
--->
-
-# @finema/core Nuxt Module
-
-[![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]
-
-@finema/core for doing amazing things.
-
-- [✨ &nbsp;Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
-
-## Features
-
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
-
-## 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
-
-# Using npm
-npm install --save-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
-```
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/my-module
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/my-module
-
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/my-module
-
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+# @finema/core Nuxt Module
+
+[✨ &nbsp;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.d.mts

@@ -1,13 +1,13 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-declare const app: {
+declare const core: {
     limit_per_page: number;
     default_primary_key: string;
 };
 
-declare const config_app: typeof app;
+declare const config_core: typeof core;
 declare namespace config {
-  export { config_app as app };
+  export { config_core as core };
 }
 
 type Strategy = 'merge' | 'override'

package/dist/module.d.ts

@@ -1,13 +1,13 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-declare const app: {
+declare const core: {
     limit_per_page: number;
     default_primary_key: string;
 };
 
-declare const config_app: typeof app;
+declare const config_core: typeof core;
 declare namespace config {
-  export { config_app as app };
+  export { config_core as core };
 }
 
 type Strategy = 'merge' | 'override'

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,89 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import * as lodash from 'lodash';
 
 const name = "@finema/core";
-const version = "1.2.5";
+const version = "1.3.0";
+
+const _merge = lodash.merge;
+
+const colors = {
+  black: "#20243E",
+  white: "#FFFFFF",
+  dark: {
+    DEFAULT: "#20243E",
+    50: "#6D7280",
+    100: "#505050"
+  },
+  light: {
+    DEFAULT: "#FAFAFA"
+  },
+  gray: {
+    DEFAULT: "#9095A6",
+    disabled: "#C1C4D0",
+    border: "#E2E4EA",
+    fill: "#F4F5FA"
+  },
+  customPrimary: {
+    DEFAULT: "#3675FB",
+    50: "#F8F8FF",
+    100: "#E8EFFD",
+    200: "#bee3f8",
+    300: "#90cdf4",
+    400: "#63b3ed",
+    500: "#3675FB",
+    600: "#0068FE",
+    700: "#2b6cb0",
+    800: "#2c5282",
+    900: "#20243E",
+    950: "#20243E"
+  },
+  secondary: {
+    DEFAULT: "#EE8B36",
+    50: "#fdf1e7",
+    100: "#f9d6b8",
+    200: "#f5bb89",
+    300: "#f1a05a",
+    400: "#ed852b",
+    500: "#d46b12",
+    600: "#a5540e",
+    700: "#763c0a",
+    800: "#472406",
+    900: "#180c02"
+  },
+  info: {
+    DEFAULT: "#F64976",
+    50: "#FFEBF0",
+    100: "#F87395",
+    400: "#F87395",
+    500: "#F87395"
+  },
+  danger: {
+    DEFAULT: "#FF4C4C",
+    50: "#ffe5e5",
+    100: "#FF4C4C",
+    400: "#FF4C4C",
+    500: "#FF4C4C"
+  },
+  success: {
+    DEFAULT: "#01B460",
+    50: "#E2FFF0",
+    100: "#52CB8C",
+    400: "#52CB8C",
+    500: "#52CB8C"
+  },
+  warning: {
+    DEFAULT: "#EE7336",
+    50: "#FFEBE2",
+    100: "#FF864B",
+    400: "#FF864B",
+    500: "#FF864B"
+  }
+};
+
+const ui = {
+  primary: "customPrimary",
+  safelistColors: ["secondary"]
+};
 
 const module = defineNuxtModule({
   meta: {
@@ -19,84 +101,25 @@ const module = defineNuxtModule({
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
     nuxt.options.alias["#core"] = runtimeDir;
+    nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
     nuxt.options.appConfig.app = {
       strategy: "merge"
     };
     nuxt.hook("tailwindcss:config", (tailwindConfig) => {
+      tailwindConfig.content = {
+        ...tailwindConfig.content,
+        files: [
+          ...tailwindConfig.content.files,
+          resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
+          resolve(runtimeDir, "*.{mjs,js,ts}")
+        ]
+      };
       tailwindConfig.theme.extend.colors = {
         ...tailwindConfig.theme.extend.colors,
-        black: "#20243E",
-        white: "#FFFFFF",
-        dark: {
-          DEFAULT: "#20243E",
-          50: "#6D7280",
-          100: "#505050"
-        },
-        light: {
-          DEFAULT: "#FAFAFA"
-        },
-        gray: {
-          DEFAULT: "#9095A6",
-          disabled: "#C1C4D0",
-          border: "#E2E4EA",
-          fill: "#F4F5FA"
-        },
-        finema: {
-          DEFAULT: "#3675FB",
-          50: "#F8F8FF",
-          100: "#E8EFFD",
-          200: "#bee3f8",
-          300: "#90cdf4",
-          400: "#63b3ed",
-          500: "#3675FB",
-          600: "#0068FE",
-          700: "#2b6cb0",
-          800: "#2c5282",
-          900: "#20243E"
-        },
-        secondary: {
-          DEFAULT: "#EE8B36",
-          50: "#fdf1e7",
-          100: "#f9d6b8",
-          200: "#f5bb89",
-          300: "#f1a05a",
-          400: "#ed852b",
-          500: "#d46b12",
-          600: "#a5540e",
-          700: "#763c0a",
-          800: "#472406",
-          900: "#180c02"
-        },
-        info: {
-          DEFAULT: "#F64976",
-          50: "#FFEBF0",
-          100: "#F87395",
-          400: "#F87395",
-          500: "#F87395"
-        },
-        danger: {
-          DEFAULT: "#FF4C4C",
-          50: "#ffe5e5",
-          100: "#FF4C4C",
-          400: "#FF4C4C",
-          500: "#FF4C4C"
-        },
-        success: {
-          DEFAULT: "#01B460",
-          50: "#E2FFF0",
-          100: "#52CB8C",
-          400: "#52CB8C",
-          500: "#52CB8C"
-        },
-        warning: {
-          DEFAULT: "#EE7336",
-          50: "#FFEBE2",
-          100: "#FF864B",
-          400: "#FF864B",
-          500: "#FF864B"
-        }
+        ...colors
       };
     });
+    nuxt.options.appConfig.ui = _merge(ui, nuxt.options.appConfig.ui);
     await installModule("@nuxt/ui");
     await installModule("@pinia/nuxt");
     await installModule("@vee-validate/nuxt", {
@@ -104,10 +127,10 @@ const module = defineNuxtModule({
       autoImports: true,
       // Use different names for components
       componentNames: {
-        Form: "VeeForm",
-        Field: "VeeField",
-        FieldArray: "VeeFieldArray",
-        ErrorMessage: "VeeErrorMessage"
+        Form: "VForm",
+        Field: "VField",
+        FieldArray: "VFieldArray",
+        ErrorMessage: "VErrorMessage"
       }
     });
     await installModule("nuxt-security", {

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

package/dist/runtime/components/Form/InputSelect/SelectMenu.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <USelectMenu v-bind="$attrs" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <USelect v-bind="$attrs" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps" :is-required="false">
+    <p class="form-control-static">
+      {{ !value || value.length === 0 ? '-' : value }}
+    </p>
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { type IStaticFieldProps } from '#core/components/Form/InputStatic/types'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<IStaticFieldProps>(), {})
+
+const { value, label, wrapperProps, disabled } = useFieldHOC<string>(props)
+</script>

package/dist/runtime/components/Form/InputStatic/types.d.ts

@@ -0,0 +1,4 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+export interface IStaticFieldProps extends IFieldProps {
+}
+export type IStaticField = IFormFieldBase<INPUT_TYPES.STATIC, IStaticFieldProps>;

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

@@ -0,0 +1,28 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UInput
+      v-model="value"
+      :disabled="disabled"
+      :name="name"
+      :placeholder="placeholder ?? props.label"
+      :type="isShowPassword ? 'text' : props.type || 'text'"
+      :autofocus="!!autoFocus"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { ref } from '#imports'
+import { type ITextFieldProps } from '#core/components/Form/InputText/types'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<ITextFieldProps>(), {})
+const emits = defineEmits<{
+  (event: 'change', value: string): void
+  (event: 'blur', value: string): void
+}>()
+
+const { value, wrapperProps, disabled, handleChange } = useFieldHOC<string>(props)
+
+const isShowPassword = ref(false)
+</script>