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

package/fixedasset/timeline/index.js

@@ -0,0 +1,70 @@
+const isEmptyObject = (obj) => {
+  if (!obj) return true;
+
+  const keys = Object.keys(obj);
+  if (!keys.length) return true; // Empty at the top level
+
+  return keys.every((key) => {
+    const value = obj[key];
+
+    if (typeof value === 'object') {
+      if (Array.isArray(value)) {
+        return (
+          !value.length ||
+          value.every((val) =>
+            typeof val === 'object' ? isEmptyObject(val) : val == null,
+          )
+        );
+      }
+
+      return isEmptyObject(value);
+    }
+
+    return value == null;
+  });
+};
+
+export default {
+  root: ({ props }) => ({
+    class: ['flex flex-col grow', 'text-xs font-normal text-grayscale-900'],
+  }),
+  event: ({ props, context }) => ({
+    class: ['grid grid-cols-[max-content,1fr] gap-x-[10px] gap-y-1'],
+  }),
+  opposite: ({ props, context }) => ({
+    class: 'hidden',
+  }),
+  separator: ({ props }) => ({
+    class: [
+      'flex items-center flex-initial',
+      {
+        'flex-col': props.layout === 'vertical',
+        'flex-row': props.layout === 'horizontal',
+      },
+    ],
+  }),
+  marker: {
+    class: [
+      'w-max',
+      'rounded-full',
+      'bg-transparent',
+      'ring-2 ring-inset ring-primary-400 p-0.5',
+
+      'flex items-center justify-center',
+    ],
+  },
+  markerArrow: (item) => ({
+    'class': [
+      'w-4 h-4 invisible transition-transform duration-200 ease-in-out text-grayscale-900',
+      { '!visible': item.detail && !isEmptyObject(item.detail) },
+      { 'rotate-180': item.showDetail },
+    ],
+    'data-wv-section': 'markerArrow',
+  }),
+  connector: ({ props }) => ({
+    class: ['w-[2px] grow bg-grayscale-900'],
+  }),
+  content: ({ props, context }) => ({
+    class: ['grid grid-rows-[max-content,auto] pb-2.5 gap-1'],
+  }),
+};

package/fixedasset/toast/index.js

@@ -0,0 +1,97 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      //Size and Shape
+      'w-full max-w-[496px]',
+
+      // Positioning
+      {
+        '-translate-x-2/4':
+          props.position == 'top-center' || props.position == 'bottom-center',
+      },
+    ],
+    style: `z-index: ${props.baseZIndex}`,
+  }),
+  container: ({ props }) => ({
+    'class': [
+      'border-0 mt-6',
+      'rounded-[7px] w-full',
+      'shadow-lg',
+      // Colors
+      {
+        'border-success-600 text-white bg-success-500':
+          props.message.severity === 'success',
+        'border-danger text-white bg-danger-500':
+          props.message.severity === 'error',
+        'border-primary-500 text-primary-500 bg-primary-50':
+          props.message.severity === 'info',
+      },
+    ],
+    'data-wv-severity': props.message.severity,
+  }),
+  content: {
+    class: 'flex items-center py-3 px-3 text-inherit gap-2',
+  },
+  icon: {
+    class: 'hidden',
+  },
+  text: {
+    class: [
+      // Font and Text
+      'text-xs leading-4 font-normal tracking-[0.02em] text-inherit',
+      'flex-1',
+    ],
+  },
+  summary: {
+    class: 'font-medium block',
+  },
+  detail: {
+    class: 'text-inherit',
+  },
+  closebutton: ({ props }) => ({
+    class: [
+      // Flexbox
+      'flex items-center justify-center',
+
+      // Size
+      'w-6 h-6',
+
+      // Spacing and Misc
+      'ml-auto relative',
+
+      // Shape
+      'rounded-full',
+
+      // Colors
+      'bg-transparent',
+      {
+        'text-white': props.message.severity === 'success',
+        'text-danger': props.message.severity === 'error',
+        'text-primary-500': props.message.severity === 'info',
+      },
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+
+      // States
+
+      // Misc
+      'overflow-hidden',
+    ],
+  }),
+  closeicon: {
+    class: [
+      // Sizing and Spacing
+      'w-3 h-3',
+      'shrink-0',
+    ],
+  },
+  transition: {
+    enterFromClass: 'opacity-0 translate-y-2/4',
+    enterActiveClass: 'transition-[transform,opacity] duration-300',
+    leaveFromClass: 'max-h-[1000px]',
+    leaveActiveClass:
+      '!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
+    leaveToClass: 'max-h-0 opacity-0 mb-0',
+  },
+};

package/fixedasset/togglebutton/index.js

@@ -0,0 +1,87 @@
+export default {
+  root: {
+    class: [
+      'relative',
+
+      // Alignment
+      'inline-flex',
+      'align-bottom',
+
+      // Misc
+      'cursor-pointer',
+      'select-none',
+    ],
+  },
+  box: ({ props }) => ({
+    class: [
+      // Alignments
+      'items-center inline-flex flex-1 text-center align-bottom justify-center',
+
+      // Sizes & Spacing
+      'px-2.5 py-1.5',
+      'text-sm',
+
+      // Shapes
+      'rounded-md shadow-sm',
+
+      // Colors
+      'text-surface-700/80',
+      'ring-1 ring-surface-200',
+      {
+        'bg-surface-0 ': !props.modelValue,
+        'bg-surface-100': props.modelValue,
+      },
+
+      // States
+      'peer-hover:bg-surface-200',
+      {
+        'peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500':
+          !props.disabled,
+      },
+
+      // Transitions
+      'transition-all duration-200',
+
+      // Misc
+      {
+        'cursor-pointer': !props.disabled,
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  label: {
+    class: 'font-semibold text-center w-full',
+  },
+  input: {
+    class: [
+      'peer',
+
+      // Size
+      'w-full ',
+      'h-full',
+
+      // Position
+      'absolute',
+      'top-0 left-0',
+      'z-10',
+
+      // Spacing
+      'p-0',
+      'm-0',
+
+      // Shape
+      'opacity-0',
+      'rounded-md',
+      'outline-none',
+      'border border-surface-200',
+
+      // Misc
+      'appareance-none',
+      'cursor-pointer',
+    ],
+  },
+  icon: {
+    class: [' mr-2', 'text-surface-700/80'],
+  },
+};

package/fixedasset/toolbar/index.js

@@ -0,0 +1,30 @@
+export default {
+  root: {
+    class: [
+      // Flex & Alignment
+      'flex items-center justify-between flex-wrap',
+      'gap-6',
+
+      // Spacing
+      'px-6 py-2',
+      'min-h-[4rem]',
+
+      // Shape
+      'rounded-md',
+      'shadow-md',
+
+      // Color
+      'bg-surface-0',
+      'ring-1 ring-surface-100',
+    ],
+  },
+  start: {
+    class: 'flex items-center',
+  },
+  center: {
+    class: 'flex items-center',
+  },
+  end: {
+    class: 'flex items-center',
+  },
+};

package/fixedasset/tooltip/index.js

@@ -0,0 +1,44 @@
+export default {
+  root: ({ context, props }) => ({
+    class: [
+      // Position
+      'absolute',
+
+      {
+        // Add space 4px at the bottom
+        'pb-1': context?.top,
+        'pt-1': context?.bottom,
+        'pl-1': context?.right,
+        'pr-1': context?.left,
+      },
+
+      '!transition',
+    ],
+  }),
+  arrow: {
+    class: 'hidden',
+  },
+  text: {
+    class: [
+      // Shape
+      'rounded-[10px]',
+
+      // Background
+      'bg-white',
+
+      // Spacing
+      'px-3 py-1',
+
+      // Typography
+      'text-xs font-normal leading-4 text-left',
+
+      // Color
+      'text-grayscale-900',
+
+      // Misc
+      'shadow-[0px_4px_4px_0px_#00000040]',
+      'whitespace-pre-line',
+      'break-words',
+    ],
+  },
+};

package/fixedasset/tree/index.js

@@ -0,0 +1,298 @@
+export default {
+  root: {
+    class: [
+      'relative',
+
+      // Space
+
+      // Shape
+      'rounded-md',
+      'min-h-8',
+
+      // Color
+    ],
+  },
+  wrapper: {
+    class: ['overflow-auto'],
+  },
+  container: {
+    class: [
+      // Spacing
+      'm-0 p-0',
+
+      // Misc
+      'list-none overflow-auto',
+    ],
+  },
+  node: {
+    class: [
+      'p-[2px]',
+      'rounded-md',
+      'focus:outline-none focus:outline-offset-0',
+    ],
+  },
+  content: ({ context, props }) => ({
+    class: [
+      // Flex and Alignment
+      'flex items-center',
+
+      // Shape
+      'rounded-md',
+
+      // Spacing
+      'p-1',
+
+      // Colors
+      'text-surface-700',
+      {
+        'bg-primary-50 !text-primary-500 [&_*]:text-primary-500':
+          context.selected,
+      },
+
+      // States
+      {
+        'hover:bg-primary-50':
+          props.selectionMode == 'single' || props.selectionMode == 'multiple',
+      },
+
+      // Transition
+      'transition-shadow duration-200',
+
+      {
+        'cursor-pointer select-none':
+          props.selectionMode == 'single' || props.selectionMode == 'multiple',
+      },
+
+      // Miscelanous
+      'cursor-pointer',
+    ],
+  }),
+  toggler: ({ context }) => ({
+    class: [
+      // Flex and Alignment
+      'inline-flex items-center justify-center',
+
+      'shrink-0',
+
+      // Shape
+      'border-0 rounded-full',
+
+      // Size and Spacing
+      'w-4 h-4',
+
+      // Spacing
+      'mr-0.5',
+
+      // Colors
+      'text-general-800',
+      'bg-transparent',
+      {
+        invisible: context.leaf,
+      },
+
+      // States
+      'hover:bg-surface-100',
+
+      // Transition
+      'transition duration-200',
+
+      // Misc
+      'cursor-pointer select-none',
+    ],
+  }),
+  togglericon: {
+    class: [
+      // Size
+      'w-4 h-4',
+
+      // Color
+    ],
+  },
+  nodeCheckbox: {
+    root: {
+      class: [
+        'relative',
+
+        // Alignment
+        'inline-flex',
+        'align-bottom',
+
+        // Size
+        'w-4',
+        'h-4',
+
+        // Spacing
+        'mr-2',
+
+        // Misc
+        'cursor-default',
+        'select-none',
+      ],
+    },
+    box: ({ props, context }) => ({
+      class: [
+        // Alignment
+        'flex',
+        'items-center',
+        'justify-center',
+
+        // Size
+        'w-4',
+        'h-4',
+
+        // Shape
+        'rounded',
+        'border',
+
+        // Colors
+        'text-surface-600',
+        {
+          'border-surface-300 bg-surface-0':
+            !context.checked,
+          'border-primary-500 bg-primary-500':
+            context.checked,
+        },
+
+        {
+          'ring-2 ring-primary-500':
+            !props.disabled && context.focused,
+          'cursor-default opacity-60': props.disabled,
+        },
+
+        // States
+        {
+          'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500':
+            !props.disabled,
+          'cursor-default opacity-60': props.disabled,
+        },
+
+        // 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',
+      ],
+    },
+    icon: {
+      class: [
+        // Font
+        'text-normal',
+
+        // Size
+        'w-3',
+        'h-3',
+
+        // Colors
+        'text-white',
+
+        // Transitions
+        'transition-all',
+        'duration-200',
+      ],
+    },
+  },
+  nodeicon: {
+    class: [
+      // Space
+      'hidden',
+    ],
+  },
+  subgroup: {
+    class: ['!m-0 list-none p-0 !pl-1'],
+  },
+  filtercontainer: {
+    class: [
+      'relative block',
+
+      // Space
+      'mb-2',
+
+      // Size
+      'w-full',
+    ],
+  },
+  input: {
+    class: [
+      'relative',
+
+      // Font
+      'font-sans leading-6',
+      'sm:text-sm',
+
+      // Spacing
+      'm-0',
+      'py-1.5 px-3 pr-10',
+
+      // Size
+      'w-full',
+
+      // Shape
+      'rounded-md',
+
+      // Colors
+      'text-surface-900',
+      'placeholder:text-surface-400',
+      'bg-surface-0',
+      'ring-1 ring-inset ring-surface-300',
+
+      // States
+      'hover:border-primary-500',
+      'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500',
+
+      // Transition & Misc
+      'appearance-none',
+      'transition-colors duration-200',
+    ],
+  },
+  loadingicon: {
+    class: [
+      'text-general-400',
+      'absolute text-lg top-[50%] right-[50%] -mt-2 -mr-2 animate-spin',
+    ],
+  },
+  searchicon: {
+    class: [
+      // Position
+      'absolute top-1/2 -mt-2 right-3',
+
+      // Color
+      'text-surface-600',
+    ],
+  },
+  label: ({ props }) => ({
+    class: [
+      'inline-flex justify-between items-center gap-2',
+      'w-full',
+      'text-xs font-medium text-general-800',
+    ],
+  }),
+};