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

package/fixedasset/dataview/index.js

@@ -0,0 +1,40 @@
+export default {
+  content: {
+    class: [
+      // Spacing
+      'p-0',
+
+      // Shape
+      'border-0',
+
+      // Color
+      'text-surface-700/80',
+      'bg-surface-0',
+    ],
+  },
+  grid: {
+    class: [
+      // Flex
+      'flex flex-wrap',
+
+      // Spacing
+      'ml-0 mr-0 mt-0',
+
+      // Color
+      'bg-surface-0',
+    ],
+  },
+  header: {
+    class: [
+      'font-semibold',
+
+      // Spacing
+      'p-6',
+
+      // Color
+      'text-surface-800/80',
+      'bg-surface-0',
+      'border-surface-200 border-b',
+    ],
+  },
+};

package/fixedasset/dataviewlayoutoptions/index.js

@@ -0,0 +1,64 @@
+export default {
+  listbutton: ({ props }) => ({
+    class: [
+      // Font
+      'leading-none',
+
+      // Flex Alignment
+      'inline-flex items-center align-bottom text-center',
+
+      // Shape
+      'rounded-md rounded-r-none',
+
+      // Spacing
+      'px-2.5 py-1.5',
+
+      // Color
+      'ring-1 ring-surface-200',
+      props.modelValue === 'list'
+        ? 'bg-surface-100 text-surface-700'
+        : 'bg-surface-0 text-surface-700/80',
+
+      // States
+      'focus:outline-none focus:outline-offset-0 focus:ring-primary-500',
+      'hover:bg-surface-200/80',
+
+      // Transition
+      'transition duration-200',
+
+      // Misc
+      'cursor-pointer select-none overflow-hidden',
+    ],
+  }),
+  gridbutton: ({ props }) => ({
+    class: [
+      // Font
+      'leading-none',
+
+      // Flex Alignment
+      'inline-flex items-center align-bottom text-center',
+
+      // Shape
+      'rounded-md rounded-l-none',
+
+      // Spacing
+      'px-2.5 py-1.5',
+
+      // Color
+      'ring-1 ring-surface-200',
+      props.modelValue === 'grid'
+        ? 'bg-surface-100 text-surface-700'
+        : 'bg-surface-0 text-surface-700/80',
+
+      // States
+      'focus:outline-none focus:outline-offset-0 focus:ring-primary-500',
+      'hover:bg-surface-200/80',
+
+      // Transition
+      'transition duration-200',
+
+      // Misc
+      'cursor-pointer select-none overflow-hidden',
+    ],
+  }),
+};

package/fixedasset/datepicker/index.js

@@ -0,0 +1,39 @@
+export default {
+  inputgroup: {
+    class: ['grid grid-cols-[1fr,max-content] !items-center gap-1 px-3 py-1'],
+  },
+
+  inputtext: {
+    class: ['!p-0'],
+  },
+
+  inputtrigger: {
+    class: ['w-4 h-4 shrink-0 !text-general-500'],
+  },
+
+  panel: {
+    class: ['border-none !mt-0 !shadow-panel'],
+  },
+
+  panelcontent: {
+    class: ['grid grid-cols-7 grid-rows-[repeat(5,max-content)] p-6'],
+  },
+
+  date: {
+    class: [
+      'text-body-medium text-general-800',
+      'bg-white hover:bg-primary-100',
+      'rounded-[20px]',
+      // In range selection
+      '[&[data-in-range="true"]]:bg-primary-200',
+      '[&[data-in-range="true"]]:text-general-800',
+      '[&[data-in-range="true"]]:rounded-[0]',
+
+      // Selected State
+      '[&[aria-selected="true"]]:bg-primary-500',
+      '[&[aria-selected="true"]]:text-white',
+
+      'text-center p-2 cursor-pointer',
+    ],
+  },
+};

package/fixedasset/daypicker/index.js

@@ -0,0 +1,38 @@
+export default {
+  inputgroup: {
+    class: ['grid grid-cols-[1fr,max-content] !items-center gap-1 px-3 py-1'],
+  },
+
+  inputtext: {
+    class: ['!p-0'],
+  },
+
+  inputtrigger: {
+    class: ['w-4 h-4 shrink-0 !text-general-500'],
+  },
+
+  panel: {
+    class: ['border-none !mt-0 !shadow-panel'],
+  },
+
+  panelcontent: {
+    class: ['grid grid-cols-3 grid-rows-[repeat(3,max-content)] p-6 gap-y-4'],
+  },
+
+  day: {
+    class: [
+      'text-body-medium text-general-800',
+      'bg-white hover:bg-primary-100',
+      // In range selection
+      '[&[data-in-range="true"]]:bg-primary-200',
+      '[&[data-in-range="true"]]:text-general-800',
+
+      // Selected State
+      '[&[aria-selected="true"]]:bg-primary-500',
+      '[&[aria-selected="true"]]:text-white',
+      '[&[aria-selected="true"]]:rounded-[20px]',
+
+      'last:col-span-3 text-center p-2 cursor-pointer',
+    ],
+  },
+};

package/fixedasset/dialog/index.js

@@ -0,0 +1,249 @@
+export default {
+  root: ({ state }) => ({
+    class: [
+      // Shape
+      // 'rounded-lg',
+      // 'shadow-xl',
+      // 'border-0',
+      'rounded-[0.4375em]',
+      'shadow-panel',
+
+      // Layout
+      'flex flex-col',
+
+      // Spacing
+      'p-6',
+      'gap-3',
+
+      // Background
+      'bg-white',
+
+      // Size
+      'max-h-[90vh]',
+      { 'sm:max-w-[90vw]': !state.maximized },
+      'm-0',
+
+      // Transitions
+      'transform',
+      'scale-100',
+
+      // Maximized State
+      {
+        'transition-none': state.maximized,
+        'transform-none': state.maximized,
+        '!w-screen': state.maximized,
+        '!h-screen': state.maximized,
+        '!max-h-full': state.maximized,
+        '!top-0': state.maximized,
+        '!left-0': state.maximized,
+      },
+    ],
+  }),
+  header: {
+    class: [
+      // Flexbox and Alignment
+      'flex items-center gap-2',
+      'shrink-0',
+
+      // Shape
+      'rounded-tl-lg',
+      'rounded-tr-lg',
+
+      // Colors
+      'text-general-800',
+    ],
+  },
+  title: {
+    class: [
+      'text-general-800 text-sm font-bold leading-[19.12px] tracking-[0.24px]',
+    ],
+  },
+  icons: {
+    class: ['flex items-center ml-auto'],
+  },
+  closeButton: {
+    class: [
+      'relative',
+
+      // Flexbox and Alignment
+      'flex items-center justify-center',
+
+      // Size and Spacing
+      'w-6 h-6 !p-0.5',
+
+      // Shape
+      'border-0',
+      'rounded-full',
+
+      // Colors
+      'text-general-200',
+      'bg-transparent',
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+
+      // States
+      'hover:bg-general-50 hover:text-general-300',
+
+      // Misc
+      'overflow-hidden',
+    ],
+  },
+  maximizablebutton: {
+    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',
+    ],
+  },
+  closeButtonIcon: {
+    class: [
+      // Display
+      'inline-block',
+
+      // Color
+      'text-general-200',
+
+      // Size
+      'w-3.5',
+      'h-3.5',
+    ],
+  },
+  maximizableicon: {
+    class: [
+      // Display
+      'inline-block',
+
+      // Size
+      'w-3',
+      'h-3',
+    ],
+  },
+  content: ({ state, instance }) => ({
+    class: [
+      // Font
+      '!text-general-800 text-xs font-normal',
+
+      'pr-1.5 -mr-1.5 pl-1.5 -ml-1.5 pt-1.5 -mt-1.5 !pb-1.5 -mb-1.5',
+
+      // Layout
+      'flex flex-col gap-3',
+
+      // Shape
+
+      // Colors
+      'text-surface-600',
+
+      // Misc
+      'overflow-y-auto scrollbar-w-none',
+
+      {
+        grow: state?.maximized,
+      },
+    ],
+  }),
+  footer: {
+    class: [
+      // Flexbox and Alignment
+      'flex items-center justify-end',
+      'shrink-0',
+      'text-right',
+      'gap-1 mt-2',
+
+      // Shape
+      'border-t-0',
+      'rounded-b-lg',
+
+      // Colors
+      'bg-inherit',
+      'text-surface-700/80',
+    ],
+  },
+  mask: ({ props }) => ({
+    class: [
+      // Transitions
+      'transition',
+      'duration-300',
+      { 'p-5': !props.position == 'full' },
+
+      // Background and Effects
+      {
+        'has-[.mask-active]:bg-transparent bg-dialog-mask': props.modal,
+        'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal,
+      },
+    ],
+  }),
+  transition: ({ props }) => {
+    return props.position === 'top'
+      ? {
+          enterFromClass:
+            'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+          enterActiveClass: 'transition-all duration-200 ease-out',
+          leaveActiveClass: 'transition-all duration-200 ease-out',
+          leaveToClass:
+            'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+        }
+      : props.position === 'bottom'
+        ? {
+            enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
+            enterActiveClass: 'transition-all duration-200 ease-out',
+            leaveActiveClass: 'transition-all duration-200 ease-out',
+            leaveToClass:
+              'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active',
+          }
+        : props.position === 'left' ||
+            props.position === 'topleft' ||
+            props.position === 'bottomleft'
+          ? {
+              enterFromClass:
+                'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
+              enterActiveClass: 'transition-all duration-200 ease-out',
+              leaveActiveClass: 'transition-all duration-200 ease-out',
+              leaveToClass:
+                'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active',
+            }
+          : props.position === 'right' ||
+              props.position === 'topright' ||
+              props.position === 'bottomright'
+            ? {
+                enterFromClass:
+                  'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+                enterActiveClass: 'transition-all duration-200 ease-out',
+                leaveActiveClass: 'transition-all duration-200 ease-out',
+                leaveToClass:
+                  'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+              }
+            : {
+                enterFromClass: 'opacity-0 scale-75 mask-active',
+                enterActiveClass: 'transition-all duration-200 ease-out',
+                leaveActiveClass: 'transition-all duration-200 ease-out',
+                leaveToClass: 'opacity-0 scale-75 mask-active',
+              };
+  },
+};

package/fixedasset/dialogconfirm/index.js

@@ -0,0 +1,42 @@
+export default {
+  root: {
+    'class': ['!w-[clamp(360px,75vw,400px)]'],
+    'data-wv-name': (attrsDataName) => attrsDataName ?? 'root',
+    'data-wv-section': (attrsDataSection) =>
+      attrsDataSection ?? 'dialogconfirm',
+  },
+  header: {
+    'data-wv-section': 'dialog-confirm-header',
+  },
+  headericon: { 'class': 'text-2xl', 'data-wv-section': 'headericon' },
+  headertitle: (severity) => ({
+    'class': [
+      'text-base leading-none font-semibold',
+      {
+        'text-success-700': severity === 'success',
+        'text-danger-700': severity === 'danger',
+      },
+    ],
+    'data-wv-section': 'dialog-confirm-title',
+  }),
+  content: {
+    'class': '[&_ul]:list-inside [&_ul]:list-disc [&_ul_li]:pl-[6px]',
+    'data-wv-section': 'dialog-confirm-content',
+  },
+  list: {
+    'data-wv-section': 'dialog-confirm-list',
+  },
+  bodymessage: {
+    'data-wv-section': 'confirm-message',
+  },
+  cancelbutton: {
+    'data-wv-section': 'cancel-button',
+  },
+  confirmbutton: {
+    'data-wv-section': 'confirm-button',
+  },
+  footer: {
+    'class': 'flex items-end justify-end gap-1 !mt-0',
+    'data-wv-section': 'dialog-confirm-footer',
+  },
+};

package/fixedasset/dialogform/index.js

@@ -0,0 +1,67 @@
+export default {
+  root: {
+    'class': ['max-w-[90vw]'],
+    'style': (computedWidth) => `width: ${computedWidth}`,
+    'data-wv-section': 'dialog-form',
+  },
+  header: {
+    'class': 'flex items-center gap-2',
+    'data-wv-section': 'dialog-form-header',
+  },
+  headericon: { 'class': 'text-2xl', 'data-wv-section': 'headericon' },
+  headertitle: {
+    'class':
+      'mr-auto text-grayscale-900 text-center text-[0.9rem] leading-[1.125rem] !font-semibold tracking-[0.28px]',
+    'data-wv-section': 'dialog-form-title',
+  },
+  expandasidebutton: {
+    'class': ['!px-1.5 !py-1 -mr-1.5 !text-xs'],
+    'data-wv-section': 'expand-aside-button',
+  },
+  closedialog: {
+    'class': '!p-0.5 !text-general-200',
+    'data-wv-section': 'closebutton',
+  },
+  container: (expanded) => ({
+    'class': [
+      'flex overflow-y-auto overflow-x-hidden scrollbar-w-none',
+      { 'gap-6': expanded },
+    ],
+    'data-wv-section': 'dialog-form-container',
+  }),
+  mainsection: {
+    'class': ['flex flex-col gap-3 w-full'],
+    'data-wv-section': 'dialog-form-main',
+  },
+  asidesection: (expanded, asideRightWidth) => ({
+    'class': [
+      'flex flex-col gap-3 shrink-0',
+      { 'opacity-0': !expanded },
+      { 'opacity-100': expanded },
+    ],
+    'style': `width: ${expanded ? asideRightWidth - 24 : 0}px`,
+    'data-wv-section': 'dialog-form-aside',
+  }),
+  form: {
+    'class': 'overflow-y-auto',
+    'style': 'scrollbar-width: none !important',
+    'data-wv-section': 'form',
+  },
+  footer: {
+    'class': 'flex flex-col gap-3 items-end justify-center',
+    'data-wv-section': 'dialog-form-footer',
+  },
+  footerbutton: {
+    'class': 'flex gap-1 items-center justify-end',
+    'data-wv-section': 'footer-button',
+  },
+  cancelbtn: {
+    'data-wv-section': 'cancel-btn',
+  },
+  clearfield: {
+    'data-wv-section': 'clear-field',
+  },
+  savesubmitbutton: {
+    'data-wv-section': 'save-submit-button',
+  },
+};

package/fixedasset/divider/index.js

@@ -0,0 +1,72 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flex and Position
+      'flex relative',
+      { 'justify-center': props.layout == 'vertical' },
+      { 'items-center': props.layout == 'vertical' },
+      {
+        'justify-start': props?.align == 'left' && props.layout == 'horizontal',
+        'justify-center':
+          props?.align == 'center' && props.layout == 'horizontal',
+        'justify-end': props?.align == 'right' && props.layout == 'horizontal',
+        'items-center': props?.align == 'top' && props.layout == 'vertical',
+        'items-start': props?.align == 'center' && props.layout == 'vertical',
+        'items-end': props?.align == 'bottom' && props.layout == 'vertical',
+      },
+
+      // Spacing
+      {
+        'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
+        'mx-4 md:mx-5 py-5': props.layout == 'vertical',
+      },
+
+      // Size
+      {
+        'w-full': props.layout == 'horizontal',
+        'min-h-full': props.layout == 'vertical',
+      },
+
+      // Before: Line
+      'before:block',
+
+      // Position
+      {
+        'before:absolute before:left-0 before:top-1/2':
+          props.layout == 'horizontal',
+        'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2':
+          props.layout == 'vertical',
+      },
+
+      // Size
+      {
+        'before:w-full': props.layout == 'horizontal',
+        'before:min-h-full': props.layout == 'vertical',
+      },
+
+      // Shape
+      {
+        'before:border-solid': props.type == 'solid',
+        'before:border-dotted': props.type == 'dotted',
+        'before:border-dashed': props.type == 'dashed',
+      },
+
+      // Color
+      {
+        'before:border-t before:border-surface-200':
+          props.layout == 'horizontal',
+        'before:border-l before:border-surface-200':
+          props.layout == 'vertical',
+      },
+    ],
+  }),
+  content: {
+    class: [
+      // Space and Position
+      'p-2 z-10',
+
+      // Color
+      'bg-surface-0',
+    ],
+  },
+};