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

package/fixedasset/button/index.js

@@ -0,0 +1,506 @@
+export default {
+  root: ({ props, context }) => ({
+    class: [
+      'relative',
+
+      // Alignments
+      'items-center inline-flex text-center align-bottom justify-center',
+      {
+        'flex-col':
+          (props.iconPos === 'top' || props.iconPos === 'bottom') &&
+          props.label,
+      },
+
+      props.iconPos,
+      {
+        'flex-row-reverse': props.iconPos === 'right',
+      },
+
+      // Sizes & Spacing
+      'leading-none font-normal rounded-[50px]',
+      {
+        '!text-xs px-3 py-[5px]': props.size === null && props.label,
+        '!text-xs !p-0.5': props.size === 'small',
+        'text-xl py-3 px-4': props.size === 'large',
+      },
+      { 'gap-1': props.label !== null },
+
+      {
+        'p-[7px] w-max':
+          props.label === null && props.icon && props.size === null,
+      },
+      {
+        '!p-0.5 !h-4 !w-4':
+          props.label === null && props.icon && props.size === 'small',
+      },
+
+      // Ring
+      'ring-inset ring-1 ',
+
+      // Shapes
+      { 'shadow-lg': props.raised },
+
+      // Link Button
+      {
+        'text-grayscale-900-600 bg-transparent ring-transparent': props.link,
+      },
+
+      // Plain Button
+      {
+        'text-white bg-gray-500 ring-1 ring-gray-500':
+          props.plain && !props.outlined && !props.text,
+      },
+      // Plain Text Button
+      { 'text-primary-400': props.plain && props.text },
+      // Plain Outlined Button
+      {
+        'text-primary-400 ring-1 ring-gray-500': props.plain && props.outlined,
+      },
+
+      // Text Button
+      { 'bg-transparent ring-transparent': props.text && !props.plain },
+
+      // Outlined Button
+      { 'bg-transparent ring-1': props.outlined && !props.plain },
+
+      // --- Severity Buttons ---
+
+      // Secondary Button
+      {
+        'text-white':
+          !props.link &&
+          props.severity === 'secondary' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'bg-grayscale-900':
+          !props.link &&
+          props.severity === 'secondary' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'ring-1 ring-grayscale-900':
+          !props.link &&
+          props.severity === 'secondary' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      // Secondary Text Button
+      {
+        'text-grayscale-900':
+          props.text && props.severity === 'secondary' && !props.plain,
+      },
+      // Secondary Outlined Button
+      {
+        'text-grayscale-900 ring-1 ring-grayscale-900':
+          props.outlined && props.severity === 'secondary' && !props.plain,
+      },
+
+      // Primary Gold Button
+      {
+        'text-white':
+          props.severity === null &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'bg-primary-400':
+          props.severity === null &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'ring-1 ring-primary-400':
+          props.severity === null &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      // Primary Gold Text Button
+      {
+        'text-primary-400':
+          props.text && props.severity === null && !props.plain,
+      },
+      // Primary Gold Outlined Button
+      {
+        'text-primary-400 ring-1 ring-primary-400 hover:bg-primary-400/20':
+          props.outlined && props.severity === null && !props.plain,
+      },
+
+      // Success Button
+      {
+        'text-white':
+          props.severity === 'success' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'bg-success-500':
+          props.severity === 'success' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'ring-1 ring-success-500':
+          props.severity === 'success' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      // Success Text Button
+      {
+        'text-success-500':
+          props.text && props.severity === 'success' && !props.plain,
+      },
+      // Success Outlined Button
+      {
+        'text-success-500 ring-1 ring-success-500 hover:bg-success-300/20':
+          props.outlined && props.severity === 'success' && !props.plain,
+      },
+
+      // Info Button
+      {
+        'text-white':
+          props.severity === 'info' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'bg-blue-500':
+          props.severity === 'info' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'ring-1 ring-blue-500':
+          props.severity === 'info' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      // Info Text Button
+      {
+        'text-blue-500':
+          props.text && props.severity === 'info' && !props.plain,
+      },
+      // Info Outlined Button
+      {
+        'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ':
+          props.outlined && props.severity === 'info' && !props.plain,
+      },
+
+      // Warning Button
+      {
+        'text-white':
+          props.severity === 'warning' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'bg-warning-500':
+          props.severity === 'warning' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'ring-1 ring-warning-500':
+          props.severity === 'warning' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      // Warning Text Button
+      {
+        'text-warning-500':
+          props.text && props.severity === 'warning' && !props.plain,
+      },
+      // Warning Outlined Button
+      {
+        'text-warning-500 ring-1 ring-warning-500 hover:bg-warning-300/20':
+          props.outlined && props.severity === 'warning' && !props.plain,
+      },
+
+      // Help Button
+      {
+        'text-white':
+          props.severity === 'help' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'bg-purple-500':
+          props.severity === 'help' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'ring-1 ring-purple-500':
+          props.severity === 'help' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      // Help Text Button
+      {
+        'text-purple-500':
+          props.text && props.severity === 'help' && !props.plain,
+      },
+      // Help Outlined Button
+      {
+        'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20':
+          props.outlined && props.severity === 'help' && !props.plain,
+      },
+
+      // Danger Button
+      {
+        'text-white':
+          props.severity === 'danger' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'bg-danger-500':
+          props.severity === 'danger' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'ring-1 ring-danger-500':
+          props.severity === 'danger' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      // Danger Text Button
+      {
+        'text-danger-500':
+          props.text && props.severity === 'danger' && !props.plain,
+      },
+      // Danger Outlined Button
+      {
+        'text-danger-500 ring-1 ring-danger-500 hover:bg-danger-300/20':
+          props.outlined && props.severity === 'danger' && !props.plain,
+      },
+      // Contrast Button
+      {
+        'text-white':
+          props.severity === 'contrast' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'bg-surface-900':
+          props.severity === 'contrast' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+        'ring-1 ring-surface-900':
+          props.severity === 'contrast' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      // Contrast Text Button
+      {
+        'text-surface-900':
+          props.text && props.severity === 'contrast' && !props.plain,
+      },
+      // Contrast Outlined Button
+      {
+        'text-surface-900 ring-1 ring-surface-900':
+          props.outlined && props.severity === 'contrast' && !props.plain,
+      },
+
+      // --- Severity Button States ---
+      'focus:outline-none focus:outline-offset-0',
+
+      // Link
+      { 'focus:ring-grayscale-900': props.link },
+
+      // Plain
+      {
+        'hover:bg-gray-600 hover:ring-gray-600':
+          props.plain && !props.outlined && !props.text,
+      },
+      // Text & Outlined Button
+      {
+        'hover:bg-primary-400/20':
+          props.plain && (props.text || props.outlined),
+      },
+
+      // Secondary
+      {
+        'hover:bg-grayscale-900/[8%] active:bg-grayscale-900/[12%] ':
+          props.severity === 'secondary',
+        'hover:shadow-hover active:!shadow-none hover:!bg-grayscale-900/90 active:bg-grayscale-900/90 hover:ring-0':
+          !props.link &&
+          props.severity === 'secondary' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+
+      // Primary
+      {
+        'hover:bg-primary-400/[8%] active:bg-primary-400/[12%] ':
+          props.severity === null,
+        'hover:shadow-hover active:!shadow-none hover:!bg-primary-400/90 active:bg-primary-400/90 hover:ring-0':
+          !props.link &&
+          props.severity === null &&
+          !props.text &&
+          !props.outlined &&
+          !context.disabled &&
+          !props.plain,
+      },
+
+      // Success
+      {
+        'hover:bg-success-500/[8%] active:bg-success-500/[12%] ':
+          props.severity === 'success',
+        'hover:shadow-hover active:!shadow-none hover:!bg-success-500/90 active:bg-success-500/90 hover:ring-0':
+          !props.link &&
+          props.severity === 'success' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+
+      // Info
+      {
+        'hover:bg-blue-600 hover:ring-blue-600':
+          props.severity === 'info' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      {
+        'focus:ring-blue-400/50': props.severity === 'info',
+      },
+      // Text & Outlined Button
+      {
+        'hover:bg-blue-300/20':
+          (props.text || props.outlined) &&
+          props.severity === 'info' &&
+          !props.plain,
+      },
+
+      // Warning
+      {
+        'hover:bg-warning-500/[8%] active:bg-warning-500/[12%] ':
+          props.severity === 'warning',
+
+        'hover:shadow-hover active:!shadow-none hover:!bg-warning-500/90 active:bg-warning-500/90 hover:ring-0':
+          !props.link &&
+          props.severity === 'warning' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+
+      // Text & Outlined Button
+      {
+        'hover:bg-warning-300/20':
+          (props.text || props.outlined) &&
+          props.severity === 'warning' &&
+          !props.plain,
+      },
+
+      // Help
+      {
+        'hover:bg-purple-600 hover:ring-purple-600':
+          props.severity === 'help' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      {
+        'focus:ring-purple-400/50': props.severity === 'help',
+      },
+      // Text & Outlined Button
+      {
+        'hover:bg-purple-300/20':
+          (props.text || props.outlined) &&
+          props.severity === 'help' &&
+          !props.plain,
+      },
+
+      // Danger
+      {
+        'hover:bg-danger-500/[8%] active:bg-danger-500/[12%] ':
+          props.severity === 'danger',
+        'hover:shadow-hover active:!shadow-none hover:!bg-danger-500/90 active:bg-danger-500/90 hover:ring-0':
+          !props.link &&
+          props.severity === 'danger' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+
+      // Text & Outlined Button
+      {
+        'hover:bg-danger-300/20':
+          (props.text || props.outlined) &&
+          props.severity === 'danger' &&
+          !props.plain,
+      },
+      // Contrast
+      {
+        'hover:bg-surface-800 hover:ring-surface-800':
+          props.severity === 'contrast' &&
+          !props.text &&
+          !props.outlined &&
+          !props.plain,
+      },
+      {
+        'focus:ring-primary-400': props.severity === 'contrast',
+      },
+      // Text & Outlined Button
+      {
+        'hover:bg-surface-900/10':
+          (props.text || props.outlined) &&
+          props.severity === 'contrast' &&
+          !props.plain,
+      },
+      // Disabled
+      {
+        'pointer-events-none cursor-default': context.disabled,
+        '!text-general-300': context.disabled && (props.outlined || props.text),
+        '!ring-general-300': context.disabled && props.outlined,
+        '!bg-general-300 !text-white !ring-0':
+          context.disabled && !props.outlined && !props.text,
+      },
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+
+      // Misc
+      'cursor-pointer overflow-hidden select-none',
+
+      // Badge
+      '[&>[data-pc-name=badge]]:min-w-4 [&>[data-pc-name=badge]]:h-4 [&>[data-pc-name=badge]]:leading-4',
+    ],
+  }),
+  label: ({ props }) => ({
+    class: [
+      'duration-200',
+      'font-normal text-xs',
+      props.label ? 'leading-5' : 'leading-4',
+      {
+        'hover:underline': props.link,
+      },
+      { 'flex-1': props.label !== null, 'invisible w-0': props.label == null },
+    ],
+  }),
+  icon: ({ props }) => ({
+    class: ['shrink-0', { '!h-[11px] !w-[11px]': props.size === 'small' }],
+  }),
+  loadingIcon: ({ props }) => ({
+    class: [
+      'h-4 w-4',
+      'mx-0',
+      {
+        'mr-2': props.iconPos === 'left' && props.label != null,
+        'ml-2 order-1': props.iconPos === 'right' && props.label != null,
+        'mb-2': props.iconPos === 'top' && props.label != null,
+        'mt-2': props.iconPos === 'bottom' && props.label != null,
+      },
+      'animate-spin',
+    ],
+  }),
+  badge: ({ props }) => ({
+    class: [
+      {
+        'ml-2 w-4 h-4 leading-none flex items-center justify-center':
+          props.badge,
+      },
+    ],
+  }),
+};

package/fixedasset/buttonbulkaction/index.js

@@ -0,0 +1,35 @@
+export default {
+  root: {
+    'class': 'flex gap-2 items-center',
+    'data-wv-name': 'buttonbulkaction',
+    'data-wv-section': 'root',
+  },
+
+  menu: {
+    'id': 'bulkaction-overlay-menu',
+    'class': 'flex gap-2 items-center',
+    'data-wv-section': 'menu',
+  },
+
+  selectionmessage: {
+    'class': 'text-xs text-grayscale-900 cursor-default whitespace-nowrap',
+    'data-wv-section': 'selectionmessage',
+  },
+
+  buttonselectall: ({ context }) => ({
+    'class': [
+      '!px-1.5 !py-1 -ml-1.5 -mr-1.5 !text-xs',
+      { 'pointer-events-none': context.selectedAll },
+    ],
+    'data-wv-section': 'buttonselectall',
+  }),
+
+  bulkactiontoggle: {
+    'data-wv-section': 'bulkactiontoggle',
+  },
+
+  buttonclearselection: {
+    'class': '!p-0 !w-6 !h-6 [&_.icon]:!w-5 [&_.icon]:!h-5',
+    'data-wv-section': 'buttonclearselection',
+  },
+};

package/fixedasset/buttondownload/index.js

@@ -0,0 +1,12 @@
+export default {
+  root: {
+    'class':
+      'focus-within:ring-2 focus-within:ring-primary-400 focus-within:outline-none rounded-sm',
+    'data-wv-name': 'buttondownload',
+    'data-wv-section': 'root',
+  },
+  icon: {
+    'class': 'text-2xl',
+    'data-wv-section': 'icon',
+  },
+};

package/fixedasset/buttonfilter/index.js

@@ -0,0 +1,12 @@
+export default {
+  root: {
+    'class':
+      'focus-within:ring-2 focus-within:ring-primary-400 focus-within:outline-none rounded-sm',
+    'data-wv-name': 'buttonfilter',
+    'data-wv-section': 'root',
+  },
+  icon: {
+    'class': 'text-2xl',
+    'data-wv-section': 'icon',
+  },
+};

package/fixedasset/buttonradio/index.js

@@ -0,0 +1,122 @@
+export default {
+  root: {
+    'class': 'flex items-center w-max gap-1 cursor-pointer text-xs',
+    'data-wv-name': 'buttonradio',
+    'data-wv-section': 'root',
+  },
+  wrapper: ({ props }) => ({
+    class: [
+      'relative',
+
+      // Flexbox & Alignment
+      'flex items-center justify-center',
+
+      // Size
+      'w-4 h-4',
+
+      // Shape
+      'border-2',
+      'rounded-full',
+
+      // Colors
+      {
+        'bg-white':
+          props.value !== props.modelValue &&
+          props.value !== undefined &&
+          !props.disabled,
+        'bg-general-50': props.disabled,
+        'border-general-100':
+          props.value !== props.modelValue &&
+          props.value !== undefined &&
+          !props.disabled,
+        'border-primary-500':
+          props.value == props.modelValue &&
+          props.value !== undefined &&
+          !props.disabled,
+        'border-general-200': props.disabled,
+      },
+
+      {
+        '!border-danger-500': props.invalid,
+      },
+
+      // Misc
+      'cursor-pointer',
+    ],
+  }),
+  box: ({ props }) => ({
+    class: [
+      // Flexbox
+      'flex justify-center items-center',
+
+      // Size
+      'w-2 h-2',
+      'text-sm',
+      'font-medium',
+
+      // Shape
+      // 'border-2',
+      'rounded-full',
+
+      // Transition
+      'transition duration-200 ease-in-out',
+
+      // Colors
+      {
+        'border-general-100':
+          props.value !== props.modelValue && props.value !== undefined,
+        'border-primary-500':
+          props.value == props.modelValue &&
+          props.value !== undefined &&
+          !props.disabled,
+        'bg-primary-500':
+          props.value == props.modelValue &&
+          props.value !== undefined &&
+          !props.disabled,
+        'bg-general-200':
+          props.value == props.modelValue &&
+          props.value !== undefined &&
+          props.disabled,
+      },
+
+      // States
+      {
+        'outline-none outline-offset-0': !props.disabled,
+        'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-0 peer-focus-visible:ring-primary-500':
+          !props.disabled,
+        // 'opacity-60 cursor-default': props.disabled,
+      },
+    ],
+  }),
+  input: ({ props }) => ({
+    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-2 border-surface-300',
+
+      // Misc
+      'appearance-none',
+      { 'cursor-default': props.disabled, 'cursor-pointer': !props.disabled },
+    ],
+  }),
+  icon: {
+    class: 'hidden',
+  },
+};