@fewangsit/wangsvue-presets 1.0.81 → 1.0.82

package/build.sh

@@ -0,0 +1,32 @@
+#!/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

@@ -0,0 +1,22 @@
+#!/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

@@ -0,0 +1,13 @@
+{
+  "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/accordion/index.js

@@ -0,0 +1,75 @@
+export default {
+  accordiontab: {
+    header: ({ props }) => ({
+      class: [
+        // Sizing
+        'pt-6 pb-0',
+        'mt-6',
+
+        // Shape
+        'border-x-0 border-b-0',
+
+        // Color
+        'border border-surface-200',
+
+        // State
+        {
+          'select-none pointer-events-none cursor-default opacity-60':
+            props?.disabled,
+        },
+      ],
+    }),
+    headerAction: ({ context }) => ({
+      class: [
+        //Font
+        'font-semibold',
+        'leading-7',
+
+        // Alignments
+        'flex items-center justify-between flex-row-reverse',
+        'relative',
+
+        // Shape
+        'rounded-md',
+
+        // Color
+        'bg-transparent',
+        'text-surface-900',
+
+        // States
+        'focus:outline-none focus:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-600 ring-inset', // Focus
+
+        // Misc
+        'cursor-pointer no-underline select-none',
+      ],
+    }),
+    headerIcon: {
+      class: 'inline-block ml-2',
+    },
+    headerTitle: {
+      class: 'leading-7',
+    },
+    content: {
+      class: [
+        // Font
+        'leading-7',
+
+        // Spacing
+        'pr-12 pt-2',
+
+        // Color
+        'text-surface-600',
+      ],
+    },
+    transition: {
+      enterFromClass: 'max-h-0',
+      enterActiveClass:
+        'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+      enterToClass: 'max-h-[1000px]',
+      leaveFromClass: 'max-h-[1000px]',
+      leaveActiveClass:
+        'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+      leaveToClass: 'max-h-0',
+    },
+  },
+};

package/fixedasset/autocomplete/index.js

@@ -0,0 +1,280 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'relative',
+
+      // Flex
+      'inline-flex',
+
+      // Size
+      { 'w-full': props.multiple },
+
+      // Color
+      'text-surface-900',
+
+      //States
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  container: ({ props, state }) => ({
+    class: [
+      // Font
+      'font-sans sm:text-sm leading-none',
+
+      // Flex
+      'flex items-center flex-wrap',
+      'gap-1',
+
+      // Spacing
+      'm-0 list-none',
+      'px-3 py-1',
+      { 'px-3 py-1.5': !props.multiple, 'px-3 py-1': props.multiple },
+      // Size
+      'w-full',
+
+      // Shape
+      'appearance-none rounded-md',
+
+      // Color
+      'text-surface-900',
+      'bg-surface-0',
+      'placeholder:text-surface-400',
+      'shadow-sm',
+
+      // States
+      'focus:outline-none focus:outline-offset-0',
+      {
+        'ring-1 ring-inset ring-surface-300':
+          !state.focused,
+        'ring-2 ring-primary-500': state.focused,
+      },
+
+      // Transition
+      'transition duration-200 ease-in-out',
+
+      // Misc
+      'cursor-text overflow-hidden',
+    ],
+  }),
+  inputtoken: ({ props }) => ({
+    class: [
+      { 'py-1.5 px-0': !props.multiple, 'p-0.5': props.multiple },
+      ,
+      'inline-flex flex-auto',
+    ],
+  }),
+  input: ({ props }) => ({
+    class: [
+      // Font
+      'font-sans sm:text-sm leading-none',
+
+      // Shape
+      'appearance-none rounded-md',
+      { 'rounded-tr-none rounded-br-none': props.dropdown },
+      { 'outline-none shadow-none rounded-none': props.multiple },
+
+      // Size
+      { 'w-full': props.multiple },
+
+      // Spacing
+      'm-0',
+      { 'py-1.5 px-3': !props.multiple, 'p-0': props.multiple },
+
+      // Colors
+      'text-surface-700/80',
+      {
+        'bg-surface-0': !props.multiple,
+        'border border-surface-300': !props.multiple,
+        'border-0 bg-transparent': props.multiple,
+      },
+
+      // States
+      {
+        'focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500':
+          !props.multiple,
+      },
+
+      // Transition
+      'transition-colors duration-200',
+    ],
+  }),
+  token: {
+    class: [
+      // Flexbox
+      'inline-flex items-center',
+
+      // Spacing
+      'py-0.5 px-3',
+
+      // Shape
+      'rounded-[1.14rem]',
+
+      // Colors
+      'text-surface-700/70',
+      'bg-surface-200',
+    ],
+  },
+  label: {
+    class: 'leading-5',
+  },
+  removeTokenIcon: {
+    class: [
+      // Shape
+      'rounded-md leading-6',
+
+      // Spacing
+      'ml-2',
+
+      // Size
+      'w-4 h-4',
+
+      // Transition
+      'transition duration-200 ease-in-out',
+
+      // Misc
+      'cursor-pointer',
+    ],
+  },
+  dropdownbutton: {
+    root: {
+      class: [
+        'relative text-sm leading-none',
+
+        // Alignments
+        'items-center inline-flex text-center align-bottom',
+
+        // Shape
+        'rounded-r-md',
+
+        // Size
+        'px-2.5 py-1.5',
+        '-ml-[1px]',
+
+        // Colors
+        'text-surface-600',
+        'bg-surface-100',
+        'ring-1 ring-inset ring-surface-300',
+
+        // States
+        'hover:bg-surface-200',
+        'focus:outline-none focus:outline-offset-0 focus:ring-1',
+        'focus:ring-primary-500',
+      ],
+    },
+  },
+  loadingicon: {
+    class: [
+      'text-sm leading-none text-surface-500',
+      'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin',
+    ],
+  },
+  panel: {
+    class: [
+      // Position
+      'absolute top-0 left-0',
+      'mt-2',
+
+      // Shape
+      'border-0',
+      'rounded-md',
+      'shadow-md',
+      'max-h-[15rem]',
+      'overflow-auto',
+
+      // Color
+      'bg-surface-0',
+      'text-surface-800/80',
+      'ring-1 ring-inset ring-surface-300',
+    ],
+  },
+  list: {
+    class: 'py-1 list-none m-0',
+  },
+  item: ({ context }) => ({
+    class: [
+      // Font
+      'sm:text-sm',
+      'leading-none',
+      { 'font-normal': !context.selected, 'font-bold': context.selected },
+
+      // Position
+      'relative',
+
+      // Shape
+      'border-0',
+      'rounded-none',
+
+      // Spacing
+      'm-0',
+      'py-2 px-4',
+
+      // Color
+      {
+        'text-surface-700/80':
+          !context.focused && !context.selected,
+      },
+      {
+        'bg-surface-200 text-surface-700/80':
+          context.focused && !context.selected,
+      },
+      {
+        'bg-primary-500 text-white':
+          context.focused && context.selected,
+      },
+      {
+        'bg-transparent text-surface-700/80':
+          !context.focused && context.selected,
+      },
+
+      //States
+      'hover:bg-primary-500 hover:text-white',
+
+      // Misc
+      'cursor-pointer',
+      'overflow-hidden',
+      'whitespace-nowrap',
+    ],
+  }),
+  itemgroup: {
+    class: [
+      //Font
+      'font-bold',
+      'sm:text-sm',
+
+      // Spacing
+      'm-0',
+      'py-2 px-4',
+
+      // Color
+      'text-surface-800/80',
+      'bg-surface-0',
+
+      // Misc
+      'cursor-auto',
+    ],
+  },
+  emptymessage: {
+    class: [
+      // Font
+      'leading-none',
+      'sm:text-sm',
+
+      // Spacing
+      'py-2 px-4',
+
+      // Color
+      'text-surface-800/80',
+      'bg-transparent',
+    ],
+  },
+  transition: {
+    enterFromClass: 'opacity-0 scale-y-[0.8]',
+    enterActiveClass:
+      'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+    leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+    leaveToClass: 'opacity-0',
+  },
+};

package/fixedasset/avatar/index.js

@@ -0,0 +1,42 @@
+export default {
+  root: ({ props, parent }) => ({
+    class: [
+      // Font
+      {
+        'text-sm': props.size == null || props.size == 'normal',
+        'text-lg': props.size == 'large',
+        'text-xl': props.size == 'xlarge',
+      },
+
+      // Alignments
+      'inline-flex items-center justify-center',
+      'shrink-0',
+      'relative',
+
+      // Sizes
+      {
+        'h-[30px] w-[30px]': props.size == null || props.size == 'normal',
+        'w-12 h-12': props.size == 'large',
+        'w-16 h-16': props.size == 'xlarge',
+      },
+      { '-ml-4': parent.instance.$style?.name == 'avatargroup' },
+
+      // Shapes
+      {
+        'rounded-lg': props.shape == 'square',
+        'rounded-full': props.shape == 'circle',
+      },
+      { 'border-[0.5px]': parent.instance.$style?.name == 'avatargroup' },
+
+      // Colors
+      'bg-general-300',
+      {
+        'border-gray-100': parent.instance.$style?.name == 'avatargroup',
+      },
+      'text-white',
+    ],
+  }),
+  image: {
+    class: 'h-full w-full rounded-full',
+  },
+};

package/fixedasset/avatargroup/index.js

@@ -0,0 +1,7 @@
+export default {
+  root: {
+    'class': 'flex items-center ml-4',
+    'data-wv-name': 'usergroup',
+    'data-wv-section': 'root',
+  },
+};

package/fixedasset/badge/index.js

@@ -0,0 +1,54 @@
+export default {
+  root: ({ props }) => ({
+    'class': [
+      // Alignment
+      'inline-flex items-center',
+
+      // Size
+      'py-1 px-2',
+
+      // Shape
+      'rounded-[50px]',
+
+      // Color
+      {
+        '!text-general-400 !bg-general-100': props.disabled,
+        'text-success-800 bg-success-100': props.severity == 'success',
+        'text-primary-800 bg-primary-200':
+          props.severity == null || props.severity == 'primary',
+        'text-grayscale-900 bg-grayscale-500': props.severity == 'dark',
+        'text-warning-600 bg-warning-100': props.severity == 'warning',
+        'text-danger-700 bg-danger-200': props.severity == 'danger',
+      },
+    ],
+    'data-wv-name': 'badge',
+    'data-wv-section': 'root',
+  }),
+  input: ({ props, context }) => ({
+    class: [
+      'text-nowrap whitespace-nowrap font-normal text-xs leading-4 tracking-[0.2488px]',
+      {
+        'caret-surface-700': props.editable,
+        'cursor-default': !!context.badgeTooltip,
+      },
+    ],
+  }),
+  removebutton: ({ props }) => ({
+    'class': [
+      '!p-0 !w-3 !h-3 ml-1',
+      {
+        '!text-primary-800':
+          !props.badgeSeverity || props.badgeSeverity === 'primary',
+        '!text-success-800': props.badgeSeverity === 'success',
+        '!text-danger-700': props.badgeSeverity === 'danger',
+        '!text-warning-600': props.badgeSeverity === 'warning',
+        '!text-grayscale-900': props.badgeSeverity === 'dark',
+      },
+      {
+        'text-general-400': props.disabled,
+      },
+    ],
+    'icon-class': 'w-3 h-3',
+    'data-wv-section': 'removebutton',
+  }),
+};

package/fixedasset/badgedirective/index.js

@@ -0,0 +1,50 @@
+export default {
+  root: ({ context }) => ({
+    class: [
+      // Font
+      'font-medium',
+      'text-xs leading-6 font-sans',
+
+      // Alignment
+      'flex items-center justify-center',
+      'text-center',
+
+      // Position
+      'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right',
+
+      // Size
+      'm-0',
+      {
+        'p-0': context.nogutter || context.dot,
+        'p-1': !context.nogutter && !context.dot,
+        'min-w-[0.5rem] h-2': context.dot,
+        'min-w-[1rem] h-4': !context.dot,
+      },
+
+      // Shape
+      {
+        'rounded-full': context.nogutter || context.dot,
+        'rounded-[10px]': !context.nogutter && !context.dot,
+      },
+
+      // Color
+      'text-white',
+      'ring-1 ring-white',
+      {
+        'bg-primary-500':
+          !context.info &&
+          !context.success &&
+          !context.warning &&
+          !context.danger &&
+          !context.help &&
+          !context.secondary,
+        'bg-surface-500': context.secondary,
+        'bg-green-500': context.success,
+        'bg-blue-500': context.info,
+        'bg-orange-500': context.warning,
+        'bg-purple-500': context.help,
+        'bg-red-500': context.danger,
+      },
+    ],
+  }),
+};

package/fixedasset/badgegroup/index.js

@@ -0,0 +1,30 @@
+import dialog from '../dialog/index';
+
+export default {
+  root: {
+    'class': 'flex flex-nowrap items-center gap-1',
+    'data-wv-name': 'badgegroup',
+    'data-wv-section': 'root',
+  },
+  showmorebutton: {
+    'class': '!p-1 !h-auto',
+    'data-wv-section': 'showmorebutton',
+  },
+
+  showmoredialog: {
+    root: {
+      'class': [dialog.root({ state: {} }).class, 'w-[400px] !px-6 !py-3'],
+      'data-wv-section': 'showmoredialog',
+    },
+    title: {
+      'class': ['text-general-900 text-sm font-semibold leading-5'],
+      'data-wv-section': 'showmoredialogtitle',
+    },
+    content: {
+      'class': ['flex flex-wrap gap-1'],
+      'data-wv-section': 'showmoredialogcontent',
+    },
+
+    // All section in Dialog Preset can be added here
+  },
+};

package/fixedasset/breadcrumb/index.js

@@ -0,0 +1,29 @@
+export default {
+  root: {
+    'class': [
+      'flex gap-[5px] items-center text-left h-[21px]',
+      'text-grayscale-900 ',
+      'text-xs font-normal leading-none',
+    ],
+    'data-wv-name': 'breadcrumb',
+    'data-wv-section': 'root',
+  },
+
+  item: ({ context }) => ({
+    'class': {
+      'font-semibold': context.lastItem,
+      'text-primary-400': !context.lastItem && !context.firstItem,
+    },
+    'data-wv-section': 'breadcrumb-menu',
+  }),
+
+  itemlink: {
+    'class': 'cursor-pointer text-primary',
+    'data-wv-section': 'itemlink',
+  },
+
+  separator: {
+    'content': '>',
+    'data-wv-section': 'separator',
+  },
+};