@fewangsit/wangsvue-presets 1.0.82 → 1.0.84-alpha.0

package/wangsvue/tristatecheckbox/index.d.ts

@@ -0,0 +1,49 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    function box({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: (string | {
+            'border-general-100 bg-surface-0': boolean;
+            'border-primary-500 bg-primary-500': boolean;
+            'ring-2 ring-primary-500'?: undefined;
+            'cursor-default'?: undefined;
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary'?: undefined;
+            'cursor-default bg-general-50 border-general-200'?: undefined;
+            'bg-general-200 border-general-200'?: undefined;
+        } | {
+            'ring-2 ring-primary-500': any;
+            'cursor-default': any;
+            'border-general-100 bg-surface-0'?: undefined;
+            'border-primary-500 bg-primary-500'?: undefined;
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary'?: undefined;
+            'cursor-default bg-general-50 border-general-200'?: undefined;
+            'bg-general-200 border-general-200'?: undefined;
+        } | {
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary': boolean;
+            'cursor-default bg-general-50 border-general-200': boolean;
+            'bg-general-200 border-general-200': any;
+            'border-general-100 bg-surface-0'?: undefined;
+            'border-primary-500 bg-primary-500'?: undefined;
+            'ring-2 ring-primary-500'?: undefined;
+            'cursor-default'?: undefined;
+        })[];
+    };
+    namespace input {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace checkicon {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace uncheckicon {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+}
+export default _default;

package/wangsvue/tristatecheckbox/index.js

@@ -1,128 +1,106 @@
-export default {
-  root: {
-    class: [
-      'relative',
-
-      'w-4 h-4',
-
-      // Alignment
-      'inline-flex',
-      'align-bottom',
-
-      // Transitions
-      'transition-all',
-      'duration-200',
-    ],
-  },
-  box: ({ props, context }) => ({
-    class: [
-      // Alignment
-      'flex',
-      'items-center',
-      'justify-center',
-
-      // Size
-      'w-full',
-      'h-full',
-
-      // Shape
-      'rounded',
-      'border-2',
-
-      // Colors
-      'text-surface-0',
-      {
-        'border-general-100 bg-surface-0':
-          !context.active && !props.disabled,
-        'border-primary-500 bg-primary-500':
-          context.active && !props.disabled,
-      },
-
-      {
-        'ring-2 ring-primary-500':
-          !props.disabled && context.focused,
-        'cursor-default': props.disabled,
-      },
-
-      // States
-      {
-        'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary':
-          !props.disabled,
-        'cursor-default bg-general-50 border-general-200':
-          props.disabled && !context.active,
-        'bg-general-200 border-general-200':
-          props.disabled && context.active,
-      },
-
-      // Transitions
-      'transition-colors',
-      'duration-200',
-    ],
-  }),
-  input: {
-    class: [
-      'peer',
-
-      // Size
-      'w-full ',
-      'h-full',
-
-      // Position
-      'absolute',
-      'top-0 left-0',
-      'z-10',
-
-      // Spacing
-      'p-0',
-      'm-0',
-
-      // Shape
-      'rounded',
-      'border',
-
-      // Shape
-      'opacity-0',
-      'rounded-md',
-      'outline-none',
-      'border-2 border-surface-300',
-
-      // Misc
-      'appareance-none',
-      'cursor-pointer',
-    ],
-  },
-  checkicon: {
-    class: [
-      // Font
-      'text-normal',
-
-      // Size
-      'w-3',
-      'h-3',
-
-      // Colors
-      'text-surface-0',
-
-      // Transitions
-      'transition-all',
-      'duration-200',
-    ],
-  },
-  uncheckicon: {
-    class: [
-      // Font
-      'text-normal',
-
-      // Size
-      'w-3',
-      'h-3',
-
-      // Colors
-      'text-surface-0',
-
-      // Transitions
-      'transition-all',
-      'duration-200',
-    ],
-  },
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            'relative',
+            'w-4 h-4',
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+            // Transitions
+            'transition-all',
+            'duration-200',
+        ],
+    },
+    box: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+                // Size
+                'w-full',
+                'h-full',
+                // Shape
+                'rounded',
+                'border-2',
+                // Colors
+                'text-surface-0',
+                {
+                    'border-general-100 bg-surface-0': !context.active && !props.disabled,
+                    'border-primary-500 bg-primary-500': context.active && !props.disabled,
+                },
+                {
+                    'ring-2 ring-primary-500': !props.disabled && context.focused,
+                    'cursor-default': props.disabled,
+                },
+                // States
+                {
+                    'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary': !props.disabled,
+                    'cursor-default bg-general-50 border-general-200': props.disabled && !context.active,
+                    'bg-general-200 border-general-200': props.disabled && context.active,
+                },
+                // Transitions
+                'transition-colors',
+                'duration-200',
+            ],
+        });
+    },
+    input: {
+        class: [
+            'peer',
+            // Size
+            'w-full ',
+            'h-full',
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+            // Spacing
+            'p-0',
+            'm-0',
+            // Shape
+            'rounded',
+            'border',
+            // Shape
+            'opacity-0',
+            'rounded-md',
+            'outline-none',
+            'border-2 border-surface-300',
+            // Misc
+            'appareance-none',
+            'cursor-pointer',
+        ],
+    },
+    checkicon: {
+        class: [
+            // Font
+            'text-normal',
+            // Size
+            'w-3',
+            'h-3',
+            // Colors
+            'text-surface-0',
+            // Transitions
+            'transition-all',
+            'duration-200',
+        ],
+    },
+    uncheckicon: {
+        class: [
+            // Font
+            'text-normal',
+            // Size
+            'w-3',
+            'h-3',
+            // Colors
+            'text-surface-0',
+            // Transitions
+            'transition-all',
+            'duration-200',
+        ],
+    },
+};

package/wangsvue/validatormessage/index.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    let root: {
+        class: string[];
+        'data-wv-name': string;
+        'data-wv-section': string;
+    };
+}
+export default _default;

package/wangsvue/validatormessage/index.js

@@ -1,7 +1,9 @@
-export default {
-  root: {
-    'class': ['!mt-0 text-danger-500 text-xs font-light'],
-    'data-wv-name': 'validatormessage',
-    'data-wv-section': 'root',
-  },
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        'class': ['!mt-0 text-danger-500 text-xs font-light'],
+        'data-wv-name': 'validatormessage',
+        'data-wv-section': 'root',
+    },
+};

package/wangsvue/workcalendar/index.d.ts

@@ -0,0 +1,27 @@
+declare namespace _default {
+    function next({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            '!text-general-300 pointer-events-none': any;
+        })[];
+    };
+    function prev({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            '!text-general-300 pointer-events-none': any;
+        })[];
+    };
+    function daylabel({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            hidden: any;
+            'text-white !rounded-full focus:outline-none focus-visible:outline-none cursor-pointer': any;
+            'bg-danger-500 hover:bg-danger-500/90': boolean;
+            'bg-primary-1000 hover:bg-primary-1000/90': boolean;
+        })[];
+    };
+}
+export default _default;

package/wangsvue/workcalendar/index.js

@@ -1,27 +1,36 @@
-export default {
-  next: ({ context }) => ({
-    class: [
-      'text-2xl text-general-900',
-      { '!text-general-300 pointer-events-none': context.disableNextButton },
-    ],
-  }),
-  prev: ({ context }) => ({
-    class: [
-      'text-2xl text-general-900 rotate-180',
-      { '!text-general-300 pointer-events-none': context.disablePrevButton },
-    ],
-  }),
-  daylabel: ({ context }) => ({
-    class: [
-      'flex items-center justify-center w-12 h-12 focus:outline-none focus-visible:outline-none cursor-pointer',
-      {
-        'hidden': context.day.isOtherMonth,
-        'text-white !rounded-full focus:outline-none focus-visible:outline-none cursor-pointer':
-          context.day.isWorkDay || context.day.isNationalHoliday,
-        'bg-danger-500 hover:bg-danger-500/90': context.day.state === 'holiday',
-        'bg-primary-1000 hover:bg-primary-1000/90':
-          context.day.state === 'workday',
-      },
-    ],
-  }),
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    next: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'text-2xl text-general-900',
+                { '!text-general-300 pointer-events-none': context.disableNextButton },
+            ],
+        });
+    },
+    prev: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'text-2xl text-general-900 rotate-180',
+                { '!text-general-300 pointer-events-none': context.disablePrevButton },
+            ],
+        });
+    },
+    daylabel: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'flex items-center justify-center w-12 h-12 focus:outline-none focus-visible:outline-none cursor-pointer',
+                {
+                    'hidden': context.day.isOtherMonth,
+                    'text-white !rounded-full focus:outline-none focus-visible:outline-none cursor-pointer': context.day.isWorkDay || context.day.isNationalHoliday,
+                    'bg-danger-500 hover:bg-danger-500/90': context.day.state === 'holiday',
+                    'bg-primary-1000 hover:bg-primary-1000/90': context.day.state === 'workday',
+                },
+            ],
+        });
+    },
+};

package/build.sh

@@ -1,32 +0,0 @@
-#!/bin/bash
-
-# Remove previous build
-rm -rf dist
-
-# # Create type declaration
-tsc ./index.ts --declaration --allowJs --outDir dist
-
-# Preset names array
-presetNames=("wangsvue", "fixedasset")
-
-# Loop through the array and run Tailwind CSS for each preset
-for preset in "${presetNames[@]}"; do
-  inputDir="./${preset}"
-  outputDir="./dist/${preset}"
-
-  mkdir -p "${outputDir}"
-  cp "${inputDir}/colors.config.json" "${outputDir}/colors.config.json"
-
-  # Run Tailwind CSS
-  tailwind -i "${inputDir}/index.css" -o "${outputDir}/style.css" --config "./${preset}/tailwind.config.js"
-
-  cd $inputDir
-
-  npx vite build --config ../vite.config.ts
-
-  # List all items in the current folder
-  cp -r ./dist/* "../${outputDir}"
-  rm -r "./dist"
-
-  cd ../
-done

package/dev.sh

@@ -1,22 +0,0 @@
-#!/bin/bash
-
-# Function to show how to use the script (optional)
-usage() {
-  echo "Usage: sh build.sh <preset_name>"
-  echo "<preset_name> The preset name to build (e.g., wangsvue)."
-  exit 1
-}
-
-# Get the preset name from the first argument
-preset="$1"
-
-# Check if the preset name is provided (recommended)
-if [[ -z "$preset" ]]; then
-  usage
-fi
-
-# Build the preset
-inputDir="./${preset}"
-outputDir="./dist/${preset}"
-
-tailwind -i "${inputDir}/index.css" -o "${outputDir}/style.css" --config "./${preset}/tailwind.config.js" --watch

package/dist

@@ -1,13 +0,0 @@
-{
-  "name": "@fewangsit/wangsvue-presets",
-  "version": "1.0.82",
-  "author": "Wangsit FE Developer",
-  "description": "Wangsit VueJS Component Library Presets",
-  "main": "index.js",
-  "repository": "https://github.com/fewangsit/wangsvue",
-  "scripts": {
-    "dev": "sh dev.sh",
-    "build": "sh build.sh",
-    "release": "sh release.sh"
-  }
-}

package/fixedasset/datepicker/index.js

@@ -1,39 +0,0 @@
-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/fixedasset/daypicker/index.js

@@ -1,38 +0,0 @@
-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/fixedasset/index.css

@@ -1,65 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
-
-@import './icons.css';
-
-@tailwind components;
-@tailwind utilities;
-
-* {
-  font-family: 'Poppins', sans-serif;
-}
-
-.font-poppins {
-  font-family: 'Poppins', sans-serif !important;
-}
-
-.font-source-code-pro {
-  font-family: 'Source Code Pro', monospace;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-}
-
-h1,
-.heading-1 {
-  @apply !text-[22px] !font-semibold leading-7;
-}
-
-h2,
-.heading-2 {
-  @apply !text-lg !font-semibold leading-6;
-}
-
-h3,
-.heading-3 {
-  @apply !text-base !font-medium leading-5;
-}
-
-h4,
-.heading-4 {
-  @apply !text-sm !font-medium leading-4;
-}
-
-p,
-.p {
-  @apply !text-xs !font-normal leading-4;
-}
-
-h5,
-.heading-5 {
-  @apply !text-xs !font-semibold leading-4;
-}
-
-h6,
-.heading-6 {
-  @apply !text-[10px] !font-semibold leading-3;
-}
-
-.scrollbar-w-none {
-  scrollbar-width: none;
-}
-
-.scrollbar-w-thin {
-  scrollbar-width: thin;
-}

package/fixedasset/tailwind.config.js

@@ -1,20 +0,0 @@
-import colors from './colors.config.json';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'selector',
-  content: ['./**/*.js'],
-  theme: {
-    extend: {
-      colors,
-      outline: {
-        none: 'none',
-      },
-      boxShadow: {
-        panel: '-4px 4px 20px 0px rgba(0, 0, 0, 0.10)',
-        hover: '0px 1px 3px 1px #00000033',
-      },
-    },
-  },
-  plugins: [],
-};

package/index.ts

@@ -1 +0,0 @@
-export { default as wangsvue } from './wangsvue';

package/release.sh

@@ -1,7 +0,0 @@
-cp package.json dist
-cd dist
-
-npm link
-npm publish --access public
-
-cd ../

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "outDir": "dist",
-    "declaration": true,
-    "module": "ESNext",
-    "target": "ESNext",
-    "declarationDir": "dist",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "baseUrl": "."
-  },
-  "include": ["**/*.d.ts", "**/*.ts", "**/*.json", "**/preset/**/*.js"]
-}