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

package/fixedasset/progressbar/index.js

@@ -0,0 +1,112 @@
+export default {
+  root: ({ props }) => ({
+    'class': [
+      {
+        'grid items-center gap-2': props.mode === 'determinate',
+        'grid-cols-[max-content,auto]': props.valuePosition === 'left-side',
+        'grid-cols-[auto,max-content]': props.valuePosition === 'right-side',
+      },
+    ],
+    'data-wv-name': 'progressbar',
+    'data-wv-section': 'root',
+  }),
+
+  container: ({ props }) => ({
+    'class': [
+      // Position and Overflow
+      'relative overflow-hidden',
+
+      {
+        'order-2': props.valuePosition === 'left-side',
+        'order-1': props.valuePosition === 'right-side',
+      },
+
+      // Shape and Size
+      {
+        'h-3.5':
+          props.mode !== 'indeterminate' && props.valuePosition === 'inside',
+        'h-1.5':
+          props.mode === 'indeterminate' || props.valuePosition !== 'inside',
+      },
+
+      // Indeterminate Animation Classes
+      {
+        'bg-general-100 m-0 border-0 progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-primary-400 after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000':
+          props.mode === 'indeterminate',
+      },
+
+      'border-0',
+      'rounded-full',
+      'bg-general-100',
+    ],
+    'data-wv-section': 'container',
+  }),
+
+  value: ({ props }) => ({
+    class: [
+      // Flexbox & Overflow & Position
+      'rounded-full',
+      {
+        'absolute flex items-center justify-center':
+          props.mode !== 'indeterminate',
+      },
+
+      // Colors
+      {
+        'bg-warning-500':
+          (props.value < 100 &&
+            props.value > 0 &&
+            props.severity !== 'danger') ||
+          props.severity === 'warning',
+        'min-w-[6px] !bg-grayscale-500': +props.value === 0,
+        'bg-success-1000': props.severity === 'success' || +props.value === 100,
+        'bg-danger-500': props.severity === 'danger',
+        'bg-primary-400': props.severity === 'primary',
+      },
+
+      // Spacing & Sizing
+      'm-0',
+      {
+        'h-1.5 w-0':
+          props.mode !== 'indeterminate' && props.valuePosition !== 'inside',
+        'h-3.5 w-0':
+          props.mode !== 'indeterminate' && props.valuePosition === 'inside',
+      },
+
+      // Shape
+      'border-0',
+
+      // Transitions
+      {
+        'transition-width duration-1000 ease-in-out':
+          props.mode !== 'indeterminate',
+        'progressbar-value-animate': props.mode === 'indeterminate',
+      },
+
+      // Before & After (indeterminate)
+      {
+        'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ':
+          props.mode === 'indeterminate',
+        'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000':
+          props.mode === 'indeterminate',
+      },
+    ],
+  }),
+
+  label: ({ props }) => ({
+    class: [
+      // Flexbox
+      'inline-flex justify-end',
+
+      // Font and Text
+      'font-medium text-[14px] leading-4',
+      'leading-none',
+
+      {
+        'absolute inset-0 mr-1 !text-xs': props.valuePosition === 'inside',
+        'order-1': props.valuePosition === 'left-side',
+        'order-2': props.valuePosition === 'right-side',
+      },
+    ],
+  }),
+};

package/fixedasset/rating/index.js

@@ -0,0 +1,86 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'relative',
+
+      // Flex & Alignment
+      'flex items-center',
+      'gap-1',
+
+      // Misc
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  cancelitem: ({ context }) => ({
+    class: [
+      // Flex & Alignment
+      'inline-flex items-center',
+
+      //State
+      {
+        'outline-none ring-2 ring-primary-500':
+          context.focused,
+      },
+
+      // Misc
+      'cursor-pointer',
+    ],
+  }),
+  cancelicon: {
+    class: [
+      // Size
+      'w-5 h-5',
+
+      // Color
+      'text-red-500',
+    ],
+  },
+  item: ({ props, context }) => ({
+    class: [
+      // Flex & Alignment
+      'inline-flex items-center',
+
+      // State
+      {
+        'outline-none ring-2 ring-primary-500':
+          context.focused,
+      },
+
+      // Misc
+      {
+        'cursor-pointer': !props.readonly,
+        'cursor-default': props.readonly,
+      },
+    ],
+  }),
+  officon: ({ props }) => ({
+    class: [
+      // Size
+      'w-5 h-5',
+
+      // Color
+      'text-surface-700',
+
+      // State
+      { 'hover:text-primary-500': !props.readonly },
+
+      // Transition
+      'transition duration-200 ease-in',
+    ],
+  }),
+  onicon: ({ props }) => ({
+    class: [
+      // Size
+      'w-5 h-5',
+
+      // Color
+      'text-primary-500',
+
+      // Transition
+      'transition duration-200 ease-in',
+    ],
+  }),
+};

package/fixedasset/ripple/index.js

@@ -0,0 +1,6 @@
+export default {
+  root: {
+    class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
+    style: 'transform: scale(0)',
+  },
+};

package/fixedasset/scrollpanel/index.js

@@ -0,0 +1,77 @@
+export default {
+  wrapper: {
+    class: [
+      // Size & Position
+      'h-full w-full',
+
+      // Layering
+      'z-[1]',
+
+      // Spacing
+      'overflow-hidden',
+
+      // Misc
+      'relative float-left',
+    ],
+  },
+  content: {
+    class: [
+      // Size & Spacing
+      'h-[calc(100%+12px)] w-[calc(100%+12px)] pr-[12px] pb-[12px] pl-0 pt-0',
+
+      // Overflow & Scrollbar
+      'overflow-scroll scrollbar-none',
+
+      // Box Model
+      'box-border',
+
+      // Position
+      'relative',
+
+      // Webkit Specific
+      '[&::-webkit-scrollbar]:hidden',
+    ],
+  },
+  barX: {
+    class: [
+      // Size & Position
+      'h-[6px] bottom-0',
+
+      // Appearance
+      'bg-surface-100 rounded',
+
+      // Interactivity
+      'cursor-pointer',
+
+      // Visibility & Layering
+      'invisible z-20',
+
+      // Transition
+      'transition duration-[250ms] ease-linear',
+
+      // Misc
+      'relative',
+    ],
+  },
+  barY: {
+    class: [
+      // Size & Position
+      'w-[6px] top-0',
+
+      // Appearance
+      'bg-surface-100 rounded',
+
+      // Interactivity
+      'cursor-pointer',
+
+      // Visibility & Layering
+      'z-20',
+
+      // Transition
+      'transition duration-[250ms] ease-linear',
+
+      // Misc
+      'relative',
+    ],
+  },
+};

package/fixedasset/scrolltop/index.js

@@ -0,0 +1,45 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flex & Alignment
+      'flex items-center justify-center',
+
+      // Positioning
+      {
+        sticky: props.target === 'parent',
+        fixed: props.target === 'window',
+      },
+      'bottom-[20px] right-[20px]',
+      'ml-auto',
+
+      // Shape & Size
+      {
+        'rounded-md h-8 w-8': props.target === 'parent',
+        'h-12 w-12 rounded-full shadow-md': props.target === 'window',
+      },
+
+      // Color
+      'text-white',
+      {
+        'bg-primary-500 hover:bg-primary-600':
+          props.target === 'parent',
+        'bg-surface-500 hover:bg-surface-600':
+          props.target === 'window',
+      },
+
+      // States
+      {
+        'hover:bg-primary-600':
+          props.target === 'parent',
+        'hover:bg-surface-600':
+          props.target === 'window',
+      },
+    ],
+  }),
+  transition: {
+    enterFromClass: 'opacity-0',
+    enterActiveClass: 'transition-opacity duration-150',
+    leaveActiveClass: 'transition-opacity duration-150',
+    leaveToClass: 'opacity-0',
+  },
+};

package/fixedasset/selectbutton/index.js

@@ -0,0 +1,59 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'shadow-sm flex flex-col min-w-[43px] w-max',
+      // {
+      //   'opacity-60 select-none pointer-events-none cursor-default':
+      //     props.disabled,
+      // },
+    ],
+  }),
+  button: ({ context }) => ({
+    class: [
+      'relative',
+      // Font
+      'text-body-medium',
+
+      // Flex Alignment
+      'inline-flex items-center align-bottom text-center',
+
+      // Spacing
+      'px-3 py-[5px]',
+
+      // Shape
+      'ring-1 ring-inset ring-primary-500',
+      'first:!rounded-t first:!rounded-b-none',
+      'last:!rounded-t-none last:!rounded-b ',
+
+      // Color
+      {
+        'bg-surface-0': !context.active,
+        'text-primary-500': !context.active,
+        'text-surface-0': context.active,
+        'bg-primary-500': context.active,
+      },
+
+      // States
+      'focus:outline-none focus:outline-offset-0 focus:z-10',
+      {
+        'focus:bg-primary-50 ': !context.active,
+        'hover:bg-primary-50 ': !context.active,
+        'focus:bg-primary-600': context.active,
+        'hover:bg-primary-600': context.active,
+      },
+      // {
+      //   'opacity-60 select-none pointer-events-none cursor-default':
+      //     context.disabled,
+      // },
+
+      // Transition
+      'transition duration-200',
+
+      // Misc
+      'cursor-pointer select-none overflow-hidden',
+    ],
+  }),
+  label: {
+    class: 'font-semibold',
+  },
+};

package/fixedasset/sidebar/index.js

@@ -0,0 +1,165 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flexbox
+      'flex flex-col',
+
+      // Position
+      'relative',
+      {
+        '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0':
+          props.position == 'full',
+      },
+
+      // Size
+      {
+        'h-full w-full max-w-[28rem]':
+          props.position == 'left' || props.position == 'right',
+        'h-auto w-full': props.position == 'top' || props.position == 'bottom',
+      },
+
+      // Shape
+      'border-0',
+      'shadow-xl',
+
+      // Colors
+      'bg-surface-0',
+      'text-surface-700/80',
+      '',
+
+      // Transitions
+      'transition-transform',
+      'duration-300',
+
+      // Misc
+      'pointer-events-auto',
+    ],
+  }),
+  header: {
+    class: [
+      // Flexbox and Alignment
+      'flex items-center justify-between',
+      'shrink-0',
+
+      // Spacing
+      'px-6 pt-6',
+
+      // Colors
+      'bg-surface-0',
+      'text-surface-700/80',
+    ],
+  },
+  title: {
+    class: ['font-semibold leading-6 text-base m-0'],
+  },
+  icons: {
+    class: ['flex items-center'],
+  },
+  closeButton: {
+    class: [
+      'relative',
+
+      // Flexbox and Alignment
+      'flex items-center justify-center',
+
+      // Size and Spacing
+      'mr-2',
+      'last:mr-0',
+      'w-6 h-6',
+
+      // Shape
+      'border-0',
+      'rounded-full',
+
+      // Colors
+      'text-surface-500',
+      'bg-transparent',
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+
+      // States
+      'hover:text-surface-700',
+      'hover:bg-surface-100',
+      'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
+      'focus:ring-primary-500',
+
+      // Misc
+      'overflow-hidden',
+    ],
+  },
+  closeicon: {
+    class: [
+      // Display
+      'inline-block',
+
+      // Size
+      'w-3',
+      'h-3',
+    ],
+  },
+  content: {
+    class: [
+      // Spacing and Size
+      'px-6 pb-6',
+      'mt-6',
+      'h-full',
+      'w-full',
+
+      // Growth and Overflow
+      'grow',
+      'overflow-y-auto',
+    ],
+  },
+  mask: ({ props }) => ({
+    class: [
+      // Transitions
+      'transition',
+      'duration-300',
+      { 'p-5': !props.position == 'full' },
+
+      // Background and Effects
+      {
+        'has-[.mask-active]:bg-transparent bg-surface-500/70/70':
+          props.modal,
+        'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal,
+      },
+    ],
+  }),
+  transition: ({ props }) => {
+    return props.position === 'top'
+      ? {
+          enterFromClass:
+            'translate-x-0 -translate-y-full translate-z-0 mask-active',
+          leaveToClass:
+            'translate-x-0 -translate-y-full translate-z-0 mask-active',
+        }
+      : props.position === 'bottom'
+        ? {
+            enterFromClass:
+              'translate-x-0 translate-y-full translate-z-0 mask-active',
+            leaveToClass:
+              'translate-x-0 translate-y-full translate-z-0 mask-active',
+          }
+        : props.position === 'left'
+          ? {
+              enterFromClass:
+                '-translate-x-full translate-y-0 translate-z-0 mask-active',
+              leaveToClass:
+                '-translate-x-full translate-y-0 translate-z-0 mask-active',
+            }
+          : props.position === 'right'
+            ? {
+                enterFromClass:
+                  'translate-x-full translate-y-0 translate-z-0 mask-active',
+                leaveToClass:
+                  'translate-x-full translate-y-0 translate-z-0 mask-active',
+              }
+            : {
+                enterFromClass: 'opacity-0 mask-active',
+                enterActiveClass: 'transition-opacity duration-400 ease-in',
+                leaveActiveClass: 'transition-opacity duration-400 ease-in',
+                leaveToClass: 'opacity-0 mask-active',
+              };
+  },
+};

package/fixedasset/skeleton/index.js

@@ -0,0 +1,19 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'overflow-hidden',
+      {
+        'animate-pulse': props.animation !== 'none',
+      },
+
+      // Round
+      {
+        'rounded-full': props.shape === 'circle',
+        'rounded-md': props.shape !== 'circle',
+      },
+
+      // Colors
+      'bg-general-50',
+    ],
+  }),
+};

package/fixedasset/slider/index.js

@@ -0,0 +1,135 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'relative',
+      'flex items-center',
+
+      // Size
+      {
+        'h-2 w-full min-w-[15rem]': props.orientation == 'horizontal',
+        'w-2 h-full min-h-[15rem]': props.orientation == 'vertical',
+      },
+
+      // Shape
+      'border-0 rounded-lg',
+
+      // Colors
+      'bg-surface-100',
+
+      // States
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  range: ({ props }) => ({
+    class: [
+      // Position
+      'block absolute',
+      {
+        'top-0 left-0': props.orientation == 'horizontal',
+        'bottom-0 left-0': props.orientation == 'vertical',
+      },
+
+      //Size
+      {
+        'h-full': props.orientation == 'horizontal',
+        'w-full': props.orientation == 'vertical',
+      },
+
+      //Shape
+      'rounded-lg',
+
+      // Colors
+      'bg-primary-500',
+    ],
+  }),
+  handle: ({ props }) => ({
+    class: [
+      'block',
+
+      // Size
+      'h-4',
+      'w-4',
+      {
+        'top-[50%] mt-[-0.5rem] ml-[-0.5rem]':
+          props.orientation == 'horizontal',
+        'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': props.orientation == 'vertical',
+      },
+
+      // Shape
+      'rounded-full',
+      'ring-2',
+
+      // Colors
+      'bg-surface-0',
+      'ring-primary-500',
+
+      // Transitions
+      'transition duration-200',
+
+      // Misc
+      'cursor-grab',
+      'touch-action-none',
+    ],
+  }),
+  starthandler: ({ props }) => ({
+    class: [
+      'block',
+
+      // Size
+      'h-4',
+      'w-4',
+      {
+        'top-[50%] mt-[-0.5rem] ml-[-0.5rem]':
+          props.orientation == 'horizontal',
+        'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': props.orientation == 'vertical',
+      },
+
+      // Shape
+      'rounded-full',
+      'ring-2',
+
+      // Colors
+      'bg-surface-0',
+      'ring-primary-500',
+
+      // Transitions
+      'transition duration-200',
+
+      // Misc
+      'cursor-grab',
+      'touch-action-none',
+    ],
+  }),
+  endhandler: ({ props }) => ({
+    class: [
+      'block',
+
+      // Size
+      'h-4',
+      'w-4',
+      {
+        'top-[50%] mt-[-0.5rem] ml-[-0.5rem]':
+          props.orientation == 'horizontal',
+        'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': props.orientation == 'vertical',
+      },
+
+      // Shape
+      'rounded-full',
+      'ring-2',
+
+      // Colors
+      'bg-surface-0',
+      'ring-primary-500',
+
+      // Transitions
+      'transition duration-200',
+
+      // Misc
+      'cursor-grab',
+      'touch-action-none',
+    ],
+  }),
+};