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

package/fixedasset/dock/index.js

@@ -0,0 +1,97 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Positioning
+      'absolute z-1',
+      {
+        'left-0 bottom-0 w-full': props.position == 'bottom',
+        'left-0 top-0 w-full': props.position == 'top',
+        'left-0 top-0 h-full': props.position == 'left',
+        'right-0 top-0 h-full': props.position == 'right',
+      },
+
+      // Flexbox & Alignment
+      'flex justify-center items-center',
+
+      // Interactivity
+      'pointer-events-none',
+    ],
+  }),
+  container: {
+    class: [
+      // Flexbox
+      'flex',
+
+      // Shape & Border
+      'rounded-md',
+
+      // Color
+      'bg-surface-0/10 border border-surface-0/20',
+      'backdrop-blur-sm',
+
+      // Spacing
+      'p-2',
+
+      // Misc
+      'pointer-events-auto',
+    ],
+  },
+  menu: ({ props }) => ({
+    class: [
+      // Flexbox & Alignment
+      'flex items-center justify-center',
+      {
+        'flex-col': props.position == 'left' || props.position == 'right',
+      },
+
+      // List Style
+      'm-0 p-0 list-none',
+
+      // Shape
+      'outline-none',
+    ],
+  }),
+  menuitem: ({ props, context, instance }) => ({
+    class: [
+      // Spacing & Shape
+      'p-2 rounded-md',
+
+      // Conditional Scaling
+      {
+        'hover:scale-150': instance.currentIndex === context.index,
+        'scale-125':
+          instance.currentIndex - 1 === context.index ||
+          instance.currentIndex + 1 === context.index,
+        'scale-110':
+          instance.currentIndex - 2 === context.index ||
+          instance.currentIndex + 2 === context.index,
+      },
+
+      // Positioning & Hover States
+      {
+        'origin-bottom hover:mx-6': props.position == 'bottom',
+        'origin-top hover:mx-6': props.position == 'top',
+        'origin-left hover:my-6': props.position == 'left',
+        'origin-right hover:my-6': props.position == 'right',
+      },
+
+      // Transitions & Transform
+      'transition-all duration-200 ease-cubic-bezier-will-change-transform transform',
+    ],
+  }),
+  action: {
+    class: [
+      // Flexbox & Alignment
+      'flex flex-col items-center justify-center',
+
+      // Position
+      'relative',
+
+      // Size
+      'w-16 h-16',
+
+      // Misc
+      'cursor-default overflow-hidden',
+    ],
+  },
+};

package/fixedasset/dropdown/index.js

@@ -0,0 +1,230 @@
+import MultiSelectPreset from '../multiselect/index.js';
+
+export default {
+  root: ({ props, state }) => ({
+    class: [
+      // Display and Position
+      'inline-flex items-center',
+      'relative',
+
+      // Shape
+      'w-full',
+      'rounded-md',
+
+      // Misc
+      'cursor-default',
+      'select-none',
+      { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled },
+    ],
+  }),
+  input: ({ props }) => ({
+    class: [
+      //Font
+      'text-xs  font-normal',
+      {
+        '!text-general-200': props.modelValue == null,
+        'text-grayscale-900': props.modelValue != null,
+      },
+
+      // Display
+      'block',
+      'flex-auto',
+
+      // Color and Background
+      'bg-transparent',
+      'border-0',
+      'placeholder:text-general-200',
+
+      // Sizing and Spacing
+      'h-max',
+      'py-[5px] px-3 pr-0',
+      { 'pr-7': props.showClear },
+
+      //Shape
+      'rounded-none',
+
+      // Transitions
+      'transition',
+      'duration-200',
+
+      // States
+      'focus:outline-none focus:shadow-none',
+
+      // Misc
+      'relative',
+      'cursor-pointer',
+      'overflow-hidden overflow-ellipsis',
+      'whitespace-nowrap',
+      'appearance-none',
+    ],
+  }),
+  trigger: {
+    class: [
+      //Font
+      // 'sm:text-sm',
+
+      // Spacing
+      'mr-1',
+
+      // Flexbox
+      'flex items-center justify-center',
+      'shrink-0',
+
+      // Color and Background
+      'bg-transparent',
+      'text-general-200',
+
+      // Size
+      'w-6 h-full',
+
+      // Shape
+      'rounded-tr-md',
+      'rounded-br-md',
+    ],
+  },
+  panel: {
+    class: [
+      // Position
+      'absolute top-0 left-0 !z-[9999]',
+      'mt-2',
+
+      'max-w-[30vw]',
+
+      // Shape
+      'border-0',
+      'rounded-lg',
+      'shadow-panel',
+
+      // Color
+      'bg-surface-0',
+      'text-surface-800',
+    ],
+  },
+  wrapper: ({ props }) => ({
+    class: [
+      // Sizing
+      'max-h-[15rem]',
+
+      // Shape
+      'border-[0.5px]',
+
+      // Color
+      'bg-white',
+      'border-grayscale-900',
+
+      // Misc
+      'overflow-auto',
+      {
+        'rounded-lg': !props.filter,
+        'rounded-br-lg rounded-bl-lg': props.filter,
+      },
+    ],
+  }),
+  list: {
+    class: 'list-none m-0',
+  },
+  item: ({ context }) => ({
+    class: [
+      // Font
+      'text-xs font-normal',
+      'w-full overflow-hidden text-ellipsis',
+
+      // Position
+      'relative',
+
+      // Shape
+      'border-0',
+      'rounded-none',
+
+      // Spacing
+      'm-0',
+      'py-2 px-4',
+
+      // Color
+      { '!font-medium': context.selected },
+      {
+        'text-surface-700':
+          !context.focused && !context.selected && !context.disabled,
+      },
+      {
+        'text-surface-600':
+          !context.focused && !context.selected && context.disabled,
+      },
+      {
+        'bg-primary-50 text-surface-700': context.focused && !context.selected,
+      },
+      {
+        'bg-primary-50 text-primary-500': context.focused && context.selected,
+      },
+      {
+        'text-surface-700': !context.focused && context.selected,
+      },
+
+      //States
+      'hover:bg-primary-bg-weak hover:text-primary',
+      'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500',
+
+      // Misc
+      { 'pointer-events-none cursor-default': context.disabled },
+      { 'cursor-pointer': !context.disabled },
+      'overflow-hidden',
+      'whitespace-nowrap',
+    ],
+  }),
+  itemgroup: {
+    class: [
+      //Font
+      'font-bold',
+      'sm:text-sm',
+
+      // Spacing
+      'm-0',
+      'py-2 px-4',
+
+      // Color
+      'text-surface-800',
+      'bg-surface-0',
+
+      // Misc
+      'cursor-auto',
+    ],
+  },
+  emptymessage: {
+    class: [
+      // Font
+      'leading-none text-xs',
+
+      // Spacing
+      'py-2 px-4',
+
+      // Color
+      'text-surface-800',
+      'bg-transparent',
+    ],
+  },
+  header: MultiSelectPreset?.header,
+  filtercontainer: MultiSelectPreset?.filtercontainer,
+  filterinput: MultiSelectPreset?.filterinput,
+  filtericon: MultiSelectPreset?.filtericon,
+  clearicon: {
+    class: [
+      // Color
+      'text-general-200',
+
+      // Position
+      'absolute',
+      'top-1/2',
+      'right-12',
+
+      // Spacing
+      '-mt-2',
+    ],
+  },
+  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/fieldset/index.js

@@ -0,0 +1,99 @@
+export default {
+  root: {
+    class: [
+      'block',
+
+      // Spacing
+      'px-5 md:px-6 py-5',
+
+      // Shape
+      'rounded-md rounded-lg',
+
+      // Color
+      'bg-surface-0',
+      'text-surface-700/80',
+      'ring-1 ring-inset ring-surface-300',
+    ],
+  },
+  legend: ({ props }) => ({
+    class: [
+      // Font
+      'font-medium',
+      'leading-none',
+
+      //Spacing
+      { 'p-0': props.toggleable, 'px-3 py-1.5': !props.toggleable },
+
+      // Shape
+      'rounded-md',
+
+      // Color
+      'text-surface-700/80',
+
+      'bg-surface-0',
+
+      // Transition
+      'transition-none',
+
+      // States
+      { '': props.toggleable },
+      {
+        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-600 ring-inset':
+          props.toggleable,
+      },
+    ],
+  }),
+  toggler: ({ props }) => ({
+    class: [
+      // Alignments
+      'flex items-center justify-center',
+      'relative',
+
+      //Spacing
+      { 'px-3 py-1.5': props.toggleable },
+
+      // Shape
+      { 'rounded-md': props.toggleable },
+
+      // Color
+      {
+        'text-surface-700 hover:text-surface-900 hover:text-surface-900':
+          props.toggleable,
+      },
+
+      // States
+      {
+        'hover:text-surface-900': props.toggleable,
+      },
+      {
+        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600':
+          props.toggleable,
+      },
+
+      // Misc
+      {
+        'transition-none cursor-pointer overflow-hidden select-none':
+          props.toggleable,
+      },
+    ],
+  }),
+  togglerIcon: {
+    class: 'mr-2 inline-block',
+  },
+  legendTitle: {
+    class: 'flex items-center justify-center leading-none',
+  },
+  content: {
+    class: 'p-0',
+  },
+  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/fileupload/index.js

@@ -0,0 +1,23 @@
+export default {
+  root: {
+    'data-wv-name': 'fileupload',
+    'data-wv-section': 'root',
+  },
+  wrapper: {
+    'class': ['w-full'],
+    'data-wv-section': 'wrapper',
+  },
+  input: ({ state }) => ({
+    class: [
+      {
+        '': state.fileName != null,
+      },
+    ],
+  }),
+  buttonupload: ({ props }) => ({
+    class: [{ 'mb-[21px]': props.fileExtensions || props.fileRequirements }],
+  }),
+  requirements: {
+    class: 'flex justify-start',
+  },
+};

package/fixedasset/form/index.js

@@ -0,0 +1,42 @@
+export default {
+  // :class="['ts-form', { 'sticky-buttons': props.stickyButtons }]"
+  'root': () => ({
+    'class': [
+      'flex flex-col gap-3 text-general-900 text-[0.75rem] font-medium leading-[16.8px]',
+    ],
+    'data-wv-section': 'root',
+  }),
+  'fields': {
+    class: ['grid gap-y-3 gap-x-6'],
+  },
+  'fields-wrapper': {
+    'class': ['grid gap-y-3 gap-x-6'],
+    'data-wv-section': 'fields',
+  },
+  'footer': {
+    class: ['flex flex-col self-end gap-3'],
+  },
+  'action-buttons': {
+    'class': ['relative flex flex-col items-end justify-end gap-1'],
+    'data-wv-section': 'action-buttons',
+  },
+  'button-wrapper': {
+    'class': ['flex items-end justify-end gap-1'],
+    'data-wv-section': 'button-wrapper',
+  },
+  'cancel-button': {
+    'data-wv-section': 'cancel-button',
+  },
+  'clear-button': {
+    'data-wv-section': 'clear-button',
+  },
+  'submit-button': {
+    'data-wv-section': 'submit-button',
+  },
+  'staycheckbox': {
+    class: ['cursor-pointer flex gap-2 w-max ml-auto items-center justify-end'],
+  },
+  'validator-message': {
+    class: ['static w-max transform-none'],
+  },
+};

package/fixedasset/global.js

@@ -0,0 +1,87 @@
+export const ringClass = [
+  {
+    'ring-1 p-[1px]': navigator.userAgent.includes('Firefox'),
+    'ring-[0.5px] p-[0.5px]': !navigator.userAgent.includes('Firefox'),
+  },
+  'ring-inset',
+  'ring-general-400',
+];
+
+export default {
+  css: `
+    *[data-pd-ripple="true"]{
+        overflow: hidden;
+        position: relative;
+    }
+    span[data-p-ink-active="true"]{
+        animation: ripple 0.4s linear;
+    }
+    @keyframes ripple {
+        100% {
+            opacity: 0;
+            transform: scale(2.5);
+        }
+    }
+
+    .progress-spinner-circle {
+        stroke-dasharray: 89, 400;
+        stroke-dashoffset: 0;
+        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    @keyframes p-progress-spinner-dash{
+        0% {
+            stroke-dasharray: 1, 400;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 89, 400;
+            stroke-dashoffset: -35px;
+        }
+        100% {
+            stroke-dasharray: 89, 400;
+            stroke-dashoffset: -124px;
+        }
+    }
+    @keyframes p-progress-spinner-color {
+        100%, 0% {
+            stroke: #ff5757;
+        }
+        40% {
+            stroke: #696cff;
+        }
+        66% {
+            stroke: #1ea97c;
+        }
+        80%, 90% {
+            stroke: #cc8925;
+        }
+    }
+
+    .progressbar-value-animate::after {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    }
+    .progressbar-value-animate::before {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+
+    @keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+`,
+};