tsv2-library 0.2.44 → 0.2.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsv2-library",
-  "version": "0.2.44",
+  "version": "0.2.45",
   "author": "fixedassetv2-fe",
   "license": "ISC",
   "homepage": "https://github.com/fixedassetv2-fe/tsv2-library#readme",

package/src/components/v2/DataTable/DataTable.vue.d.ts

@@ -307,6 +307,10 @@ export interface TSDataTableProps {
    * Set the scrollHeight in px
    */
   scrollHeight?: string;
+  /**
+   * An array of fields as string to use in global filtering.
+   */
+  globalFilterFields?: string[];
 }
 
 export type TSDataTableEmits = {

package/src/components/v2/DatePicker/DatePicker.vue.d.ts

@@ -0,0 +1,61 @@
+import { DefineComponent } from 'vue';
+
+/**
+ * TSDatePicker component props
+ */
+export interface TSDatePickerProps {
+  /**
+   * TSDatePicker modelValue is day index from 0
+   */
+  modelValue?: number[];
+  /**
+   * Display label on top of Date Input.
+   */
+  label?: string;
+  /**
+   * Enable Validator using vee-validate. Combine with TSForm that handle form validation.
+   */
+  useValidator?: boolean;
+  /**
+   * When used as field in From Validation using TSForm,
+   * specify the unique field name, match with your needs for API request.
+   */
+  fieldName?: string;
+  /**
+   * Whether this field should be filled or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Sets the invalid state.
+   */
+  invalid?: boolean;
+  /**
+   * Set the custom validator message.
+   * By default each field has preserved with its validator message, you don't need to worrying about the message.
+   */
+  errorMessage?: { empty: string };
+}
+
+/**
+ * TSDatePicker component emits
+ */
+export type TSDatePickerEmits = {
+  'update:modelValue': [days?: number[]];
+};
+
+/**
+ * **TSVue - TSDatePicker**
+ *
+ * _Handle input day with form validation._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group form
+ */
+declare const TSDatePicker: DefineComponent<
+  TSDatePickerProps,
+  TSDatePickerEmits
+>;
+
+export default TSDatePicker;

package/src/components/v2/DayPicker/DayPicker.vue.d.ts

@@ -0,0 +1,58 @@
+import { DefineComponent } from 'vue';
+
+/**
+ * TSDayPicker component props
+ */
+export interface TSDayPickerProps {
+  /**
+   * TSDayPicker modelValue is day index from 0
+   */
+  modelValue?: number[];
+  /**
+   * Display label on top of Date Input.
+   */
+  label?: string;
+  /**
+   * Enable Validator using vee-validate. Combine with TSForm that handle form validation.
+   */
+  useValidator?: boolean;
+  /**
+   * When used as field in From Validation using TSForm,
+   * specify the unique field name, match with your needs for API request.
+   */
+  fieldName?: string;
+  /**
+   * Whether this field should be filled or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Sets the invalid state.
+   */
+  invalid?: boolean;
+  /**
+   * Set the custom validator message.
+   * By default each field has preserved with its validator message, you don't need to worrying about the message.
+   */
+  errorMessage?: { empty: string };
+}
+
+/**
+ * TSDayPicker component emits
+ */
+export type TSDayPickerEmits = {
+  'update:modelValue': [days?: number[]];
+};
+
+/**
+ * **TSVue - TSDayPicker**
+ *
+ * _Handle input day with form validation._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group form
+ */
+declare const TSDayPicker: DefineComponent<TSDayPickerProps, TSDayPickerEmits>;
+
+export default TSDayPicker;

package/src/components/v2/InputCurrency/InputCurrency.vue.d.ts

@@ -1,4 +1,3 @@
-import { CurrencyFormat } from '@/utils/currency.util';
 import { DefineComponent } from 'vue';
 
 export interface CurrencyValue {
@@ -90,6 +89,7 @@ export interface InputCurrencyProps {
    * Show information about the field.
    */
   fieldInfo?: string;
+  inputnNumberId?: string;
 }
 
 /**

package/src/components/v2/InputNumber/InputNumber.vue.d.ts

@@ -114,6 +114,25 @@ export interface InputNumberProps {
    * Class to be bind on addon left component
    */
   addonLeftClass?: any;
+  /**
+   * Class to be bind on input group component
+   */
+  inputGroupClass?: any;
+  /**
+   * Class to be bind on input number component
+   */
+  inputNumberClass?: any;
+  /**
+   * Unique id for input number element
+   */
+  inputId?: string;
+  /**
+   * Set auto Resize Input
+   * The input width is counted by the value length
+   *
+   * @default false
+   */
+  autoResize?: boolean;
 }
 
 /**

package/src/presets/calendar/index.js

@@ -91,7 +91,7 @@ export default {
       },
 
       // Size
-      '!min-w-0 max-w-[272px] h-max p-6 shadow-[-4px_4px_20px_0_rgba(0,0,0,0.1)]',
+      '!min-w-0 max-w-[272px] h-max p-6 shadow-panel',
       { 'min-w-[80vw] w-auto p-2 ': props.touchUI },
       { 'p-2 min-w-full': props.inline },
 
@@ -394,7 +394,7 @@ export default {
       {
         'text-text-general-800 dark:text-general-800 bg-transparent':
           !context.selected && !context.disabled,
-        'text-primary-500 dark:text-primary-400':
+        'bg-primary-500 text-white dark:bg-primary-400 dark:text-white':
           context.selected && !context.disabled,
       },
 
@@ -432,7 +432,7 @@ export default {
       {
         'text-text-general-800 dark:text-general-800 bg-transparent':
           !context.selected && !context.disabled,
-        'text-primary-500 dark:text-primary-400':
+        'bg-primary-500 text-white dark:bg-primary-400 dark:text-white':
           context.selected && !context.disabled,
       },
 

package/src/presets/datepicker/index.js

@@ -0,0 +1,39 @@
+export default {
+  inputgroup: {
+    class: ['grid grid-cols-[1fr,max-content] !items-center gap-1 px-3 py-1'],
+  },
+
+  inputtext: {
+    class: ['!p-0'],
+  },
+
+  inputtrigger: {
+    class: ['w-4 h-4 shrink-0 !text-general-500'],
+  },
+
+  panel: {
+    class: ['border-none !mt-0 !shadow-panel'],
+  },
+
+  panelcontent: {
+    class: ['grid grid-cols-7 grid-rows-[repeat(5,max-content)] p-6'],
+  },
+
+  date: {
+    class: [
+      'text-body-medium text-general-800',
+      'bg-white hover:bg-primary-100',
+      'rounded-[20px]',
+      // In range selection
+      '[&[data-in-range="true"]]:bg-primary-200',
+      '[&[data-in-range="true"]]:text-general-800',
+      '[&[data-in-range="true"]]:rounded-[0]',
+
+      // Selected State
+      '[&[aria-selected="true"]]:bg-primary-500',
+      '[&[aria-selected="true"]]:text-white',
+
+      'text-center p-2 cursor-pointer',
+    ],
+  },
+};

package/src/presets/daypicker/index.js

@@ -0,0 +1,38 @@
+export default {
+  inputgroup: {
+    class: ['grid grid-cols-[1fr,max-content] !items-center gap-1 px-3 py-1'],
+  },
+
+  inputtext: {
+    class: ['!p-0'],
+  },
+
+  inputtrigger: {
+    class: ['w-4 h-4 shrink-0 !text-general-500'],
+  },
+
+  panel: {
+    class: ['border-none !mt-0 !shadow-panel'],
+  },
+
+  panelcontent: {
+    class: ['grid grid-cols-3 grid-rows-[repeat(3,max-content)] p-6 gap-y-4'],
+  },
+
+  day: {
+    class: [
+      'text-body-medium text-general-800',
+      'bg-white hover:bg-primary-100',
+      // In range selection
+      '[&[data-in-range="true"]]:bg-primary-200',
+      '[&[data-in-range="true"]]:text-general-800',
+
+      // Selected State
+      '[&[aria-selected="true"]]:bg-primary-500',
+      '[&[aria-selected="true"]]:text-white',
+      '[&[aria-selected="true"]]:rounded-[20px]',
+
+      'last:col-span-3 text-center p-2 cursor-pointer',
+    ],
+  },
+};

package/src/presets/dialog/index.js

@@ -152,7 +152,7 @@ export default {
       // Font
       '!text-header-weak text-xs font-medium tracking-[0.02em]',
 
-      'pr-1.5 -mr-1.5 pl-1.5 -ml-1.5 pt-1.5 -mt-1.5',
+      'pr-1.5 -mr-1.5 pl-1.5 -ml-1.5 pt-1.5 -mt-1.5 !pb-1.5 -mb-1.5',
 
       // Layout
       'flex flex-col gap-3',

package/src/presets/global.js

@@ -1,3 +1,12 @@
+export const ringClass = [
+  {
+    'ring-1 p-[1px]': navigator.userAgent.includes('Firefox'),
+    'ring-[0.5px] p-[0.5px]': !navigator.userAgent.includes('Firefox'),
+  },
+  'ring-inset',
+  'ring-general-200 dark:ring-general-200',
+];
+
 export default {
   css: `
     *[data-pd-ripple="true"]{

package/src/presets/image/index.js

@@ -1,23 +1,16 @@
-const ringClass = [
-  {
-    'ring-1 p-[1px]': navigator.userAgent.includes('Firefox'),
-    'ring-[0.5px] p-[0.5px]': !navigator.userAgent.includes('Firefox'),
-  },
-  'ring-inset',
-  'ring-general-200 dark:ring-general-200',
-]
+import { ringClass } from '../global';
 
 export default {
   root: ({ props }) => ({
     class: [
       'relative inline-block w-[125px] h-[125px]',
       'shrink-0',
-      { 'rounded-full': props.rounded},
+      { 'rounded-full': props.rounded },
       { 'rounded-lg': !props.rounded },
       ...ringClass,
     ],
   }),
-  image: ({ props}) => ({
+  image: ({ props }) => ({
     class: [
       'w-full h-full object-cover',
       { 'rounded-full': props.rounded },
@@ -33,10 +26,10 @@ export default {
       'bg-transparent text-surface-0',
       'hover:cursor-pointer hover:bg-header-weak hover:opacity-50',
     ],
-    style: 'border-radius: inherit'
+    style: 'border-radius: inherit',
   },
   icon: {
-    class: 'w-6 h-6'
+    class: 'w-6 h-6',
   },
   mask: {
     class: [

package/src/presets/inputcurrency/index.js

@@ -0,0 +1,12 @@
+import { commonClasses } from '../inputphonenumber';
+
+export default {
+  currency: (ctx) => ({
+    'class': [...commonClasses(ctx), 'rounded-l rounded-r-none'],
+    'data-ts-section': 'currency',
+  }),
+  value: (ctx) => ({
+    'class': [...commonClasses(ctx), 'rounded-r rounded-l-none -ml-[1px]'],
+    'data-ts-section': 'value',
+  }),
+};

package/src/presets/inputphonenumber/index.js

@@ -0,0 +1,19 @@
+export const commonClasses = ({ isFirefoxBased, invalidInput }) => [
+  { 'ring-[1px]': isFirefoxBased, 'ring-[0.5px]': !isFirefoxBased },
+  { '!ring-danger-500': invalidInput },
+  'ring-inset',
+  'ring-general-200',
+  '[&:has(:focus)]:bg-none [&:has(:focus)]:dark:bg-none',
+  '[&:has(:focus)]:ring-primary-500',
+  'bg-white dark:bg-white',
+  'z-[0] [&:has(:focus)]:z-[12]',
+];
+
+export default {
+  dialcode: (ctx) => ({
+    class: [...commonClasses(ctx), 'rounded-l rounded-r-none'],
+  }),
+  inputnumber: (ctx) => ({
+    class: [...commonClasses(ctx), 'rounded-r rounded-l-none -ml-[1px]'],
+  }),
+};

package/src/presets/textarea/index.js

@@ -1,3 +1,5 @@
+import { ringClass } from '../global';
+
 export default {
   root: ({ context }) => ({
     class: [
@@ -13,8 +15,7 @@ export default {
       // Shape
       'rounded',
       'appearance-none',
-      'border border-solid border-general-200',
-
+      ...ringClass,
       // // States
       {
         'bg-transparent text-general-800 dark:text-general-800':