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

package/fixedasset/carousel/index.js

@@ -0,0 +1,134 @@
+export default {
+  root: {
+    class: [
+      // Flexbox
+      'flex flex-col',
+    ],
+  },
+  content: {
+    class: [
+      // Flexbox & Overflow
+      'flex flex-col overflow-auto',
+    ],
+  },
+  container: ({ props }) => ({
+    class: [
+      // // Flexbox
+      'flex',
+
+      // // Orientation
+      {
+        'flex-row': props.orientation !== 'vertical',
+        'flex-col': props.orientation == 'vertical',
+      },
+    ],
+  }),
+  previousbutton: {
+    class: [
+      // Flexbox & Alignment
+      'flex justify-center items-center self-center',
+
+      // Sizing & Overflow
+      'overflow-hidden w-8 h-8',
+
+      // Spacing
+      'mx-2',
+
+      // Shape
+      'rounded-full',
+
+      // Border & Background
+      'border-0 bg-transparent',
+
+      // Color
+      'text-surface-600',
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+    ],
+  },
+  nextbutton: {
+    class: [
+      // Flexbox & Alignment
+      'flex justify-center items-center self-center',
+
+      // Sizing & Overflow
+      'overflow-hidden w-8 h-8',
+
+      // Spacing
+      'mx-2',
+
+      // Shape
+      'rounded-full',
+
+      // Border & Background
+      'border-0 bg-transparent',
+
+      // Color
+      'text-surface-600',
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+    ],
+  },
+  itemscontent: {
+    class: [
+      // Overflow & Width
+      // 'overflow-hidden w-full',
+    ],
+  },
+  itemscontainer: ({ props }) => ({
+    class: [
+      // Flexbox
+      // 'flex',
+
+      // Orientation & Sizing
+      // {
+      //   'flex-row': props.orientation !== 'vertical',
+      //   'flex-col h-full': props.orientation == 'vertical',
+      // },
+    ],
+  }),
+  item: ({ props }) => ({
+    class: [
+      // Flexbox
+      // 'flex',
+
+      // Width
+      // {
+      //   'w-1/3': props.orientation !== 'vertical',
+      //   'w-full': props.orientation == 'vertical',
+      // },
+    ],
+  }),
+  indicators: {
+    class: [
+      // Flexbox & Alignment
+      'flex flex-row justify-center flex-wrap gap-1',
+    ],
+  },
+  indicator: {
+    class: [
+      // Spacing
+    ],
+  },
+  indicatorbutton: ({ context }) => ({
+    class: [
+      // Sizing & Shape
+      'w-1.5 h-1.5 rounded-full',
+
+      // Transitions
+      'transition duration-200',
+
+      // Focus Styles
+      'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50',
+
+      // Color & Background
+      {
+        'bg-surface-200 hover:bg-surface-300':
+          !context.highlighted,
+        'bg-primary-500 hover:bg-primary-600': context.highlighted,
+      },
+    ],
+  }),
+};

package/fixedasset/cascadeselect/index.js

@@ -0,0 +1,219 @@
+export default {
+  root: ({ props, state }) => ({
+    class: [
+      // Display and Position
+      'inline-flex',
+      'relative',
+
+      // Shape
+      'w-full md:w-56',
+      'rounded-md',
+      'shadow-sm',
+
+      // Color and Background
+      'bg-surface-0',
+
+      // States
+      {
+        'ring-1 ring-inset ring-surface-300':
+          !state.focused,
+        'ring-2 ring-inset ring-primary-500':
+          state.focused,
+      },
+
+      // Misc
+      'cursor-default',
+      'select-none',
+      { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled },
+    ],
+  }),
+  label: ({ props }) => ({
+    class: [
+      //Font
+      'font-sans',
+      'leading-6',
+      'sm:text-sm',
+
+      // Flex & Alignment
+      ' flex flex-auto',
+
+      // Sizing and Spacing
+      'w-[1%]',
+      'py-1.5 px-3',
+
+      //Shape
+      'rounded-none',
+
+      // Color and Background
+      'bg-transparent',
+      'border-0',
+      {
+        'text-surface-800/80': props.modelValue,
+        'text-surface-400': !props.modelValue,
+      },
+      'placeholder:text-surface-400',
+
+      // Transitions
+      'transition',
+      'duration-200',
+
+      // States
+      'focus:outline-none focus:shadow-none',
+
+      // Misc
+      'relative',
+      'cursor-pointer',
+      'overflow-hidden overflow-ellipsis',
+      'whitespace-nowrap',
+      'appearance-none',
+    ],
+  }),
+  dropdownbutton: {
+    class: [
+      //Font
+      'sm:text-sm',
+
+      // Flexbox
+      'flex items-center justify-center',
+      'shrink-0',
+
+      // Color and Background
+      'bg-transparent',
+      'text-surface-500',
+
+      // Size
+      'w-12',
+
+      // Shape
+      'rounded-tr-md',
+      'rounded-br-md',
+    ],
+  },
+  panel: {
+    class: [
+      // Position
+      'absolute top-0 left-0',
+      'mt-2',
+
+      // Shape
+      'border-0',
+      'rounded-md',
+      'shadow-md',
+
+      // Color
+      'bg-surface-0',
+      'text-surface-800/80',
+      'ring-1 ring-inset ring-surface-300',
+    ],
+  },
+  wrapper: {
+    class: [
+      // Sizing
+      'max-h-[200px]',
+
+      // Misc
+      'overflow-auto',
+    ],
+  },
+  list: {
+    class: 'py-1 list-none mx-1.5',
+  },
+  item: ({ context }) => ({
+    class: [
+      // Font
+      'sm:text-sm',
+      'leading-none',
+
+      // Shape
+      'border-0',
+      'rounded-md',
+
+      // Spacing
+      'm-0',
+
+      //  Colors
+      {
+        'text-surface-500/70':
+          !context.focused && !context.active,
+        'text-surface-500/70 bg-surface-200':
+          context.focused && !context.active,
+        'text-surface-900/80 bg-surface-50':
+          context.focused && context.active,
+        'text-surface-900/80 bg-surface-50':
+          !context.focused && context.active,
+      },
+
+      // Hover States
+      {
+        'hover:bg-surface-50': !context.active,
+        'hover:bg-surface-100 text-surface-900/80':
+          context.active,
+      },
+
+      // Transitions
+      'transition-shadow',
+      'duration-200',
+
+      // Misc
+      'cursor-pointer',
+      'overflow-hidden',
+      'whitespace-nowrap',
+    ],
+  }),
+  content: {
+    class: [
+      'relative',
+
+      // Flexbox
+      'flex',
+      'items-center',
+
+      // Spacing
+      'py-2 px-4',
+
+      // Misc
+      'no-underline',
+      'overflow-hidden',
+      'cursor-pointer',
+      'select-none',
+    ],
+  },
+  groupicon: {
+    class: [
+      // Alignment
+      'ml-auto',
+    ],
+  },
+  sublist: {
+    class: [
+      // Size
+      'w-full sm:w-48',
+
+      // Spacing
+      'p-1.5',
+      'm-0',
+      'list-none',
+
+      // Shape
+      'shadow-none sm:shadow-md',
+      'border-0',
+
+      // Position
+      'static sm:absolute',
+      'z-10',
+
+      // Color
+      'bg-surface-0',
+    ],
+  },
+  separator: {
+    class: 'border-t border-surface-200 my-1',
+  },
+  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/changelog/index.js

@@ -0,0 +1,29 @@
+export default {
+  button: (buttonClass) => ({
+    'class': [buttonClass, 'w-max'],
+    'data-wv-section': 'changelog-button',
+  }),
+  icon: {
+    class: ['text-2xl'],
+  },
+  dialog: {
+    'class': 'w-[800px] !z-50',
+    'data-wv-name': 'changelog-dialog',
+  },
+  root: {
+    class: 'flex flex-col gap-2 justify-between',
+  },
+  header: {
+    'class': 'flex justify-end gap-1 items-center',
+    'data-wv-section': 'changelog-dialog-header',
+  },
+  buttonsearch: {
+    'data-wv-section': 'changelog-dialog-button-search',
+  },
+  buttonfilter: {
+    'data-wv-section': 'changelog-dialog-button-filter',
+  },
+  buttondownload: {
+    'data-wv-section': 'changelog-dialog-button-download',
+  },
+};

package/fixedasset/checkbox/index.js

@@ -0,0 +1,127 @@
+export default {
+  root: {
+    class: [
+      'relative',
+
+      'w-4 h-4',
+      'shrink-0',
+
+      // Alignment
+      'inline-flex',
+      'align-bottom',
+
+      // Transitions
+      'transition-all',
+      'duration-200',
+    ],
+  },
+  box: ({ props, context }) => ({
+    class: [
+      // Alignment
+      'flex',
+      'items-center',
+      'justify-center',
+
+      // Size
+      'w-full',
+      'h-full',
+
+      // Shape
+      'rounded',
+      'border-2',
+
+      // Colors
+      'text-white',
+      {
+        'border-general-300': props.disabled,
+        'border-grayscale-900': !props.disabled,
+        'bg-white': !context.checked && !props.disabled,
+        'bg-general-50': !context.checked && props.disabled,
+        'bg-grayscale-900': context.checked && !props.disabled,
+        'bg-general-300': context.checked && props.disabled,
+      },
+
+      {
+        'ring-8 ring-primary-400/[12%]': !props.disabled && context.focused,
+      },
+
+      // States
+      {
+        'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]':
+          !props.disabled,
+        'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]':
+          !props.disabled,
+        'cursor-default bg-general-50 border-general-200':
+          props.disabled && !context.checked,
+        'bg-general-200 border-general-200':
+          props.disabled && context.checked,
+      },
+
+      // Icon state
+      {
+        '[&_i]:bg-transparent': props.disabled && !context.checked,
+        '[&_i]:text-white': context.checked,
+        '[&_i]:text-transparent': !context.checked,
+      },
+
+      // Transitions
+      'transition-all',
+      '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',
+
+      // Transitions
+      'transition-all',
+      'duration-200',
+
+      // Misc
+      'cursor-pointer',
+    ],
+  },
+  icon: {
+    class: [
+      // Font
+      'text-normal',
+
+      // Size
+      'w-3',
+      'h-3',
+
+      // Colors
+      // 'text-white',
+
+      // Transitions
+      'transition-all',
+      'duration-200',
+    ],
+  },
+};

package/fixedasset/chip/index.js

@@ -0,0 +1,45 @@
+export default {
+  root: {
+    class: [
+      // Flexbox
+      'inline-flex items-center',
+
+      // Spacing
+      'px-2 py-0.5',
+
+      // Shape
+      'rounded-[1.14rem]',
+
+      // Colors
+      'text-surface-700',
+      'bg-surface-200',
+    ],
+  },
+  label: {
+    class: 'text-xs leading-6 mx-0',
+  },
+  icon: {
+    class: 'leading-6 mr-2',
+  },
+  image: {
+    class: ['w-6 h-6 mr-2', 'rounded-full'],
+  },
+  removeIcon: {
+    class: [
+      // Shape
+      'rounded-md leading-6',
+
+      // Spacing
+      'ml-2',
+
+      // Size
+      'w-4 h-4',
+
+      // Transition
+      'transition duration-200 ease-in-out',
+
+      // Misc
+      'cursor-pointer',
+    ],
+  },
+};

package/fixedasset/chips/index.js

@@ -0,0 +1,112 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'flex',
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  container: ({ state }) => ({
+    class: [
+      // Font
+      'font-sans sm:text-sm leading-none',
+
+      // Flex
+      'flex items-center flex-wrap gap-1',
+
+      // Spacing
+      'm-0 py-1 px-3',
+
+      // Size
+      'w-full',
+
+      // Shape
+      'list-none',
+      'rounded-md',
+
+      // Color
+      'text-surface-900',
+      'bg-surface-0',
+      'placeholder:text-surface-400',
+      'shadow-sm',
+
+      // States
+      {
+        'ring-1 ring-inset ring-surface-300':
+          !state.focused,
+        'ring-2 ring-primary-500': state.focused,
+      },
+
+      // Transition
+      'transition-colors duration-200',
+
+      // Misc
+      'cursor-text overflow-hidden',
+      'appearance-none',
+    ],
+  }),
+
+  inputtoken: {
+    class: ['py-0.5 px-0', 'inline-flex flex-auto'],
+  },
+  input: {
+    class: [
+      // Font
+      'font-sans sm:text-sm leading-none',
+
+      // Size
+      'w-full',
+
+      // Spacing
+      'p-0 m-0',
+
+      // Shape
+      'appearance-none rounded-none',
+      'border-0 outline-none',
+
+      // Color
+      'text-surface-700/80',
+      'bg-transparent',
+      'placeholder:text-surface-400',
+    ],
+  },
+  token: {
+    class: [
+      // Flexbox
+      'inline-flex items-center',
+
+      // Spacing
+      'py-0.5 px-3',
+
+      // Shape
+      'rounded-[1.14rem]',
+
+      // Colors
+      'text-surface-700/70',
+      'bg-surface-200',
+    ],
+  },
+  label: {
+    class: 'leading-5',
+  },
+  removeTokenIcon: {
+    class: [
+      // Shape
+      'rounded-md leading-6',
+
+      // Spacing
+      'ml-2',
+
+      // Size
+      'w-4 h-4',
+
+      // Transition
+      'transition duration-200 ease-in-out',
+
+      // Misc
+      'cursor-pointer',
+    ],
+  },
+};