tsv2-library 0.0.6 → 0.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tsv2-library",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.7",
   "author": "fixedassetv2-fe",
   "license": "ISC",
   "homepage": "https://github.com/fixedassetv2-fe/tsv2-library#readme",
@@ -14,7 +14,8 @@
   },
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src/presets"
   ],
   "scripts": {
     "dev": "vite",

package/src/presets/lara/accordion/index.js

@@ -0,0 +1,86 @@
+export default {
+  accordiontab: {
+    root: {
+      class: 'mb-1',
+    },
+    header: ({ props }) => ({
+      class: [
+        // State
+        {
+          'select-none pointer-events-none cursor-default opacity-60':
+            props?.disabled,
+        },
+      ],
+    }),
+    headerAction: ({ context }) => ({
+      class: [
+        //Font
+        'font-bold',
+        'leading-none',
+
+        // Alignments
+        'flex items-center',
+        'relative',
+
+        // Sizing
+        'p-5',
+
+        // Shape
+        'rounded-t-md',
+        {
+          'rounded-br-md rounded-bl-md': !context.active,
+          'rounded-br-0 rounded-bl-0': context.active,
+        },
+
+        // Color
+        'border border-surface-200 dark:border-surface-700',
+        'bg-surface-50 dark:bg-surface-800',
+        'text-surface-600 dark:text-surface-0/80',
+        { 'text-surface-900': context.active },
+
+        // Transition
+        'transition duration-200 ease-in-out',
+        'transition-shadow duration-200',
+
+        // States
+        'hover:bg-surface-100 dark:hover:bg-surface-700/40',
+        'hover:text-surface-900',
+        'focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 ring-inset dark:focus-visible:ring-primary-300/50', // Focus
+
+        // Misc
+        'cursor-pointer no-underline select-none',
+      ],
+    }),
+    headerIcon: {
+      class: 'inline-block mr-2',
+    },
+    headerTitle: {
+      class: 'leading-none',
+    },
+    content: {
+      class: [
+        // Spacing
+        'p-5',
+
+        //Shape
+        'rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
+        'border-t-0',
+
+        // Color
+        'bg-surface-0 dark:bg-surface-800',
+        'border border-surface-200 dark:border-surface-700',
+        'text-surface-700 dark:text-surface-0/80',
+      ],
+    },
+    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/src/presets/lara/autocomplete/index.js

@@ -0,0 +1,272 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'relative',
+
+      // Flex
+      'inline-flex',
+
+      // Size
+      { 'w-full': props.multiple },
+
+      // Color
+      'text-surface-900 dark:text-surface-0',
+
+      //States
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  container: ({ props, state }) => ({
+    class: [
+      // Font
+      'font-sans text-base leading-none',
+
+      // Flex
+      'flex items-center flex-wrap',
+      'gap-2',
+
+      // Spacing
+      'm-0 list-none',
+      'px-3 py-1.5',
+
+      // Size
+      'w-full',
+      'min-h-[2.877rem]',
+
+      // Shape
+      'appearance-none rounded-md',
+
+      // Color
+      'text-surface-700 dark:text-white/80',
+      'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+      'bg-surface-0 dark:bg-surface-900',
+      'border border-surface-300 dark:border-surface-700',
+
+      // States
+      'hover:border-primary-500 dark:hover:border-primary-400',
+      'focus:outline-none focus:outline-offset-0',
+      { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+      { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.hovered },
+      // Transition
+      'transition duration-200 ease-in-out',
+
+      // Misc
+      'cursor-text overflow-hidden',
+    ],
+  }),
+  inputtoken: {
+    class: ['py-1.5 px-0', 'inline-flex flex-auto'],
+  },
+  input: ({ props }) => ({
+    class: [
+      // Font
+      'font-sans text-base 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',
+      { 'p-3': !props.multiple, 'p-0': props.multiple },
+
+      // Colors
+      'text-surface-700 dark:text-white/80',
+      {
+        'bg-surface-0 dark:bg-surface-900': !props.multiple,
+        'border border-surface-300 dark:border-surface-700': !props.multiple,
+        'border-0 bg-transparent': props.multiple,
+      },
+
+      // States
+      {
+        'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50':
+          !props.multiple,
+      },
+
+      // Transition
+      'transition-colors duration-200',
+    ],
+  }),
+  token: {
+    class: [
+      // Flex
+      'inline-flex items-center',
+
+      // Spacings
+      'py-1.5 px-3',
+
+      // Shape
+      'rounded-[1.14rem]',
+
+      // Colors
+      'bg-surface-200 dark:bg-surface-700',
+      'text-surface-700 dark:text-white/70',
+
+      // Misc
+      'cursor-default',
+    ],
+  },
+  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',
+
+        // Alignments
+        'items-center inline-flex text-center align-bottom',
+
+        // Shape
+        'rounded-r-md',
+
+        // Size
+        'px-4 py-3 leading-none',
+
+        // Colors
+        'text-white dark:text-surface-900',
+        'bg-primary-500 dark:bg-primary-400',
+        'border border-primary-500 dark:border-primary-400',
+
+        // States
+        'focus:outline-none focus:outline-offset-0 focus:ring',
+        'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
+        'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+      ],
+    },
+  },
+  loadingicon: {
+    class: [
+      'text-surface-500 dark:text-surface-0/70',
+      'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin',
+    ],
+  },
+  panel: {
+    class: [
+      // Colors
+      'bg-surface-0 dark:bg-surface-800',
+      'text-surface-700 dark:text-white/80',
+
+      // Shape
+      'border-0',
+      'rounded-md',
+      'shadow-md',
+
+      // Size
+      'max-h-[200px] overflow-auto',
+    ],
+  },
+  list: {
+    class: 'py-3 px-0 list-none m-0',
+  },
+  item: ({ context }) => ({
+    class: [
+      'relative',
+
+      // Font
+      'font-normal text-base leading-none',
+
+      // Spacing
+      'm-0 px-5 py-3',
+
+      // Shape
+      'border-0 rounded-none',
+
+      // Colors
+      {
+        'text-surface-700 dark:text-white/80':
+          !context.focused && !context.selected,
+        'bg-surface-200 dark:bg-surface-600/60':
+          context.focused && !context.selected,
+        'text-surface-700 dark:text-white/80':
+          context.focused && !context.selected,
+
+        'text-primary-700 dark:text-white/80':
+          context.focused && context.selected,
+        'bg-primary-100 dark:bg-primary-400':
+          context.focused && context.selected,
+        'text-primary-700 dark:text-white/80':
+          !context.focused && context.selected,
+        'bg-primary-50 dark:bg-primary-300':
+          !context.focused && context.selected,
+      },
+
+      //States
+      {
+        'hover:bg-surface-100 dark:hover:bg-surface-600/80':
+          !context.focused && !context.selected,
+      },
+      {
+        'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80':
+          context.focused && !context.selected,
+      },
+
+      // Transition
+      'transition-shadow duration-200',
+
+      // Misc
+      'cursor-pointer overflow-hidden whitespace-nowrap',
+    ],
+  }),
+  itemgroup: {
+    class: [
+      'font-bold',
+
+      // Spacing
+      'm-0 p-3',
+
+      // Colors
+      'bg-surface-0 dark:bg-surface-700',
+      'text-surface-800 dark:text-white/80',
+
+      // Misc
+      'cursor-auto',
+    ],
+  },
+  emptymessage: {
+    class: [
+      // Font
+      'leading-none',
+
+      // Spacing
+      'py-3 px-5',
+
+      // Color
+      'text-surface-800 dark:text-white/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/src/presets/lara/avatar/index.js

@@ -0,0 +1,40 @@
+export default {
+  root: ({ props, parent }) => ({
+    class: [
+      // Font
+      {
+        'text-xl': props.size == 'large',
+        'text-2xl': props.size == 'xlarge',
+      },
+
+      // Alignments
+      'inline-flex items-center justify-center',
+      'relative',
+
+      // Sizes
+      {
+        'h-8 w-8': 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-2': parent.instance.$style?.name == 'avatargroup' },
+
+      // Colors
+      'bg-surface-300 dark:bg-surface-700',
+      {
+        'border-white dark:border-surface-800':
+          parent.instance.$style?.name == 'avatargroup',
+      },
+    ],
+  }),
+  image: {
+    class: 'h-full w-full',
+  },
+};

package/src/presets/lara/avatargroup/index.js

@@ -0,0 +1,5 @@
+export default {
+  root: {
+    class: 'flex items-center',
+  },
+};

package/src/presets/lara/badge/index.js

@@ -0,0 +1,44 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Font
+      'font-bold',
+
+      {
+        'text-xs leading-[1.5rem]': props.size == null,
+        'text-lg leading-[2.25rem]': props.size == 'large',
+        'text-2xl leading-[3rem]': props.size == 'xlarge',
+      },
+
+      // Alignment
+      'text-center inline-block',
+
+      // Size
+      'p-0 px-1',
+      {
+        'min-w-[1.5rem] h-[1.5rem]': props.size == null,
+        'min-w-[2.25rem] h-[2.25rem]': props.size == 'large',
+        'min-w-[3rem] h-[3rem]': props.size == 'xlarge',
+      },
+
+      // Shape
+      {
+        'rounded-full': props.value.length == 1,
+        'rounded-[0.71rem]': props.value.length !== 1,
+      },
+
+      // Color
+      'text-white dark:text-surface-900',
+      {
+        'bg-primary-500 dark:bg-primary-400':
+          props.severity == null || props.severity == 'primary',
+        'bg-surface-500 dark:bg-surface-400': props.severity == 'secondary',
+        'bg-green-500 dark:bg-green-400': props.severity == 'success',
+        'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
+        'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
+        'bg-purple-500 dark:bg-purple-400': props.severity == 'help',
+        'bg-red-500 dark:bg-red-400': props.severity == 'danger',
+      },
+    ],
+  }),
+};

package/src/presets/lara/badgedirective/index.js

@@ -0,0 +1,49 @@
+export default {
+  root: ({ context }) => ({
+    class: [
+      // Font
+      'font-bold font-sans',
+      'text-xs leading-5',
+
+      // 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,
+        'px-2': !context.nogutter && !context.dot,
+        'min-w-[0.5rem] w-2 h-2': context.dot,
+        'min-w-[1.5rem] h-6': !context.dot,
+      },
+
+      // Shape
+      {
+        'rounded-full': context.nogutter || context.dot,
+        'rounded-[10px]': !context.nogutter && !context.dot,
+      },
+
+      // Color
+      'text-white dark:text-surface-900',
+      {
+        'bg-primary-500 dark:bg-primary-400':
+          !context.info &&
+          !context.success &&
+          !context.warning &&
+          !context.danger &&
+          !context.help &&
+          !context.secondary,
+        'bg-surface-500 dark:bg-surface-400': context.secondary,
+        'bg-green-500 dark:bg-green-400': context.success,
+        'bg-blue-500 dark:bg-blue-400': context.info,
+        'bg-orange-500 dark:bg-orange-400': context.warning,
+        'bg-purple-500 dark:bg-purple-400': context.help,
+        'bg-red-500 dark:bg-red-400': context.danger,
+      },
+    ],
+  }),
+};

package/src/presets/lara/breadcrumb/index.js

@@ -0,0 +1,64 @@
+export default {
+  root: {
+    class: [
+      // Shape
+      'rounded-md',
+
+      // Spacing
+      'p-4',
+
+      // Color
+      'bg-surface-0 dark:bg-surface-700',
+      'border border-surface-200 dark:border-surface-700',
+
+      // Misc
+      'overflow-x-auto',
+    ],
+  },
+  menu: {
+    class: [
+      // Flex & Alignment
+      'flex items-center flex-nowrap',
+
+      // Spacing
+      'm-0 p-0 list-none leading-none',
+    ],
+  },
+  action: {
+    class: [
+      // Flex & Alignment
+      'flex items-center',
+
+      // Shape
+      'rounded-md',
+
+      // Color
+      'text-surface-600 dark:text-white/70',
+
+      // States
+      'focus-visible:outline-none focus-visible:outline-offset-0',
+      'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+      // Transitions
+      'transition-shadow duration-200',
+
+      // Misc
+      'text-decoration-none',
+    ],
+  },
+  icon: {
+    class: 'text-surface-600 dark:text-white/70',
+  },
+  separator: {
+    class: [
+      // Flex & Alignment
+      'flex items-center',
+
+      // Spacing
+      ' mx-2',
+
+      // Color
+      'text-surface-600 dark:text-white/70',
+    ],
+  },
+};