@fewangsit/wangsvue-presets 1.0.80 → 1.0.81-alpha.1

package/fixedasset/panel/index.js

@@ -0,0 +1,95 @@
+export default {
+  root: {
+    class: 'shadow-md rounded-lg',
+  },
+  header: ({ props }) => ({
+    class: [
+      // Alignments
+      'flex items-center justify-between',
+
+      // Colors
+      'text-surface-700/80',
+      'bg-surface-0',
+      'border-b border-surface-200',
+
+      //Shape
+      'rounded-tl-lg rounded-tr-lg',
+
+      // Conditional Spacing
+      {
+        'px-5 md:px-6 py-5': !props.toggleable,
+        'py-3 px-5 md:px-6': props.toggleable,
+      },
+    ],
+  }),
+  title: {
+    class: 'leading-none font-medium',
+  },
+  toggler: {
+    class: [
+      // Alignments
+      'inline-flex items-center justify-center',
+
+      // Sized
+      'w-8 h-8',
+
+      //Shape
+      'border-0 rounded-full',
+
+      //Color
+      'bg-transparent',
+      'text-surface-600',
+
+      // States
+      'hover:text-surface-900',
+      'hover:bg-surface-50',
+      'focus:outline-none focus:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-inset',
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+
+      // Misc
+      'overflow-hidden relative no-underline',
+    ],
+  },
+  togglerIcon: {
+    class: 'inline-block',
+  },
+  content: {
+    class: [
+      // Spacing
+      'py-6 px-5 md:px-6',
+
+      // Shape
+      'last:rounded-br-lg last:rounded-bl-lg',
+
+      //Color
+      'bg-surface-0',
+      'text-surface-700/80',
+    ],
+  },
+  footer: {
+    class: [
+      // Spacing
+      'py-6 px-5 md:px-6',
+
+      //Shape
+      'rounded-bl-lg rounded-br-lg',
+
+      // Color
+      'bg-surface-0',
+      'text-surface-600',
+      'border-t border-surface-200',
+    ],
+  },
+  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/panelmenu/index.js

@@ -0,0 +1,136 @@
+export default {
+  panel: {
+    class: 'mb-1',
+  },
+  header: {
+    class: [
+      'rounded-md',
+      'outline-none',
+      'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50',
+    ],
+  },
+  headercontent: ({ context, instance }) => ({
+    class: [
+      // Shape
+      'rounded-t-md',
+      {
+        'rounded-br-md rounded-bl-md':
+          !context.active || instance.activeItem?.items === undefined,
+        'rounded-br-0 rounded-bl-0':
+          context.active && instance.activeItem?.items !== undefined,
+      },
+
+      // Color
+      'border border-surface-200',
+      'bg-surface-0',
+      'text-surface-600/80',
+      { 'text-surface-900 ark:text-surface-0': context.active },
+
+      // Transition
+      'transition duration-200 ease-in-out',
+      'transition-shadow duration-200',
+    ],
+  }),
+  headeraction: {
+    class: [
+      'relative',
+
+      // Font
+      'font-semibold',
+      'text-sm',
+      'leading-none',
+
+      // Flex & Alignments
+      'flex items-center',
+
+      // Spacing
+      'px-3 py-2',
+
+      // Misc
+      'select-none cursor-pointer no-underline',
+    ],
+  },
+  headerlabel: {
+    class: 'leading-none',
+  },
+  headerIcon: {
+    class: 'mr-2 text-sm',
+  },
+  submenuicon: {
+    class: 'ml-auto order-last text-sm',
+  },
+  menucontent: {
+    class: [
+      // Spacing
+      'py-1',
+
+      // Shape
+      'border border-t-0',
+      'rounded-t-none rounded-br-md rounded-bl-md',
+
+      // Color
+      'text-surface-700/80',
+      'bg-surface-0',
+      'border-surface-200',
+    ],
+  },
+  menu: {
+    class: ['outline-none', 'm-0 p-0 list-none'],
+  },
+  content: {
+    class: [
+      // Shape
+      'border-none rounded-none',
+
+      // Color
+      'text-surface-700/80',
+
+      // Transition
+      'transition-shadow duration-200',
+    ],
+  },
+  action: ({ context }) => ({
+    class: [
+      'relative',
+
+      // Font
+      'text-sm leading-none',
+
+      // Flex & Alignments
+      'flex items-center',
+
+      // Spacing
+      'py-2 px-3',
+
+      // Color
+      'text-surface-700/80',
+
+      // States
+      'hover:bg-surface-100/80 hover:text-surface-700',
+      {
+        'bg-surface-200 text-surface-700/80':
+          context.focused,
+      },
+
+      // Misc
+      'cursor-pointer no-underline',
+      'select-none overflow-hidden',
+    ],
+  }),
+  icon: {
+    class: 'mr-2',
+  },
+  submenu: {
+    class: 'p-0 pl-4 m-0 list-none',
+  },
+  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/password/index.js

@@ -0,0 +1,98 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'w-full',
+      'inline-flex relative',
+      // 'border-[0.5px] border-general-200 rounded',
+      'text-general-800',
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  input: {
+    class: [
+      '!bg-primary-500',
+      'placeholder:!font-normal',
+      // 'bg-white text-general-800 placeholder:text-general-200 placeholder:font-light',
+      // 'w-full h-full !max-h-[43px]',
+      // 'py-1 px-3 items-center space-x-1',
+      // 'flex flex-shrink-0 self-stretch',
+      // 'text-xs leading-[133.333%] tracking-[0.24px]',
+      // 'rounded shadow-sm',
+      // 'appearance-none outline-none focus:ring-primary-500',
+    ],
+  },
+  panel: {
+    class: [
+      // Spacing
+      'p-3',
+
+      // Shape
+      'border-0',
+      'shadow-md rounded-md',
+
+      // Colors
+      'bg-white',
+      'text-general-800',
+      '',
+    ],
+  },
+  meter: {
+    class: [
+      // Position and Overflow
+      'overflow-hidden',
+      'relative',
+
+      // Shape and Size
+      'border-0',
+      'h-2',
+      'rounded-md',
+
+      // Spacing
+      'mb-2',
+
+      // Colors
+      'bg-surface-100',
+    ],
+  },
+  meterlabel: ({ instance }) => ({
+    class: [
+      // Size
+      'h-full',
+
+      // Colors
+      {
+        'bg-red-500/50': instance?.meter?.strength == 'weak',
+        'bg-orange-500/50':
+          instance?.meter?.strength == 'medium',
+        'bg-green-500/50':
+          instance?.meter?.strength == 'strong',
+      },
+
+      // Transitions
+      'transition-all duration-1000 ease-in-out',
+    ],
+  }),
+  showicon: {
+    class: [
+      'absolute top-[54%] right-3 -mt-2',
+      'text-general-200',
+      'focus-visible:text-general-500 hover:text-general-500',
+    ],
+  },
+  hideicon: {
+    class: [
+      'absolute top-[54%] right-3 -mt-2',
+      'text-general-200',
+    ],
+  },
+  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',
+  },
+};