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

package/fixedasset/inputbadge/index.js

@@ -0,0 +1,41 @@
+import InputTextPreset from '../inputtext/index.js';
+/**
+ * To set different ring width for Firefox Browser
+ * Also for InputGroupAddon
+ */
+const isFirefoxBased = navigator.userAgent.includes('Firefox');
+
+export default {
+  root: ({ context }) => ({
+    class: [
+      'flex flex-wrap gap-x-0.5 gap-y-[5px] items-center',
+      'min-h-[26px] h-fit w-full',
+      'ring-inset rounded px-[12px] py-[2px]',
+      {
+        'ring-[1px]': isFirefoxBased,
+        'ring-[0.5px]': !isFirefoxBased,
+      },
+      { '!ring-danger-500 !dark:ring-danger-500': context.invalidInput },
+      { '!ring-general-200 !dark:ring-general-200': !context.invalidInput },
+      { 'pointer-events-none': context.disabled },
+    ],
+  }),
+  input: ({ context, parent, props }) => ({
+    class: [
+      ...InputTextPreset.root({
+        props,
+        context,
+        parent,
+      }).class,
+      'outline-none !w-full !bg-transparent !p-0 !shadow-none h-max !leading-4 min-w-[70px]',
+      { 'placeholder:text-transparent': context.value?.length },
+      'focus:placeholder:text-general-200',
+    ],
+  }),
+  erroricon: {
+    class: ['mr-1 text-warning-600 text-base'],
+  },
+  erroroverlaypanel: {
+    class: ['px-3 py-1 text-[12px] text-general-800'],
+  },
+};

package/fixedasset/inputcurrency/index.js

@@ -0,0 +1,12 @@
+import { commonClasses } from '../inputphonenumber';
+
+export default {
+  currency: (ctx) => ({
+    'class': [...commonClasses(ctx), 'rounded-l rounded-r-none h-[30px]'],
+    'data-wv-section': 'currency',
+  }),
+  value: (ctx) => ({
+    'class': [...commonClasses(ctx), 'rounded-r rounded-l-none -ml-[1px]'],
+    'data-wv-section': 'value',
+  }),
+};

package/fixedasset/inputgroup/index.js

@@ -0,0 +1,40 @@
+/**
+ * To set different ring width for Firefox Browser
+ * Also for InputGroupAddon
+ */
+const isFirefoxBased = navigator.userAgent.includes('Firefox');
+
+export default {
+  root: ({ props }) => ({
+    'class': [
+      {
+        '!ring-danger-500 [&_.inputgroupaddon]:ring-danger-500':
+          props.invalid && props.ring !== 'none',
+        '[&_.inputgroupaddon]:ring-general-400':
+          !props.invalid && props.ring !== 'none',
+        '!bg-general-50 ': props.disabled,
+      },
+      {
+        '[&:has(:focus)]:!ring-primary-400 [&:has(:focus)_.inputgroupaddon]:!ring-primary-400':
+          props.ring !== 'none',
+      },
+      {
+        'ring-[1px] [&_.inputgroupaddon]:ring-[1px]':
+          isFirefoxBased && props.ring !== 'none',
+        'ring-[0.5px] [&_.inputgroupaddon]:ring-[0.5px]':
+          !isFirefoxBased && props.ring !== 'none',
+      },
+
+      '[&_.inputgroupaddon[data-addon-variant=plain]]:!ring-[0px]',
+
+      '[&:has(input)]:cursor-text',
+      'h-[30px]',
+      'flex items-stretch',
+      'w-full',
+      'ring-inset ring-general-400 rounded',
+      'bg-white',
+      props.class,
+    ],
+    'data-wv-section': 'inputgroup',
+  }),
+};

package/fixedasset/inputgroupaddon/index.js

@@ -0,0 +1,34 @@
+export default {
+  root: ({ props }) => ({
+    'class': [
+      'inputgroupaddon', // Removing this class will causes bug style.
+      // Flex
+      'inline-flex items-center justify-center',
+
+      // Shape
+      'first:rounded-tl first:rounded-bl',
+      'last:rounded-tr last:rounded-br',
+      'ring-inset',
+      // 'border-y',
+      // 'border-l',
+
+      // Space
+      'px-3 gap-3',
+
+      // Size
+      'w-max',
+
+      // Font
+      'text-general-800',
+      'text-xs font-medium leading-none tracking-tight',
+
+      // Color
+      { 'bg-general-50': props.addonVariant !== 'plain' },
+      {
+        '!text-general-200': props.disabled,
+        '!px-2': props.showButtons,
+      },
+    ],
+    'data-addon-variant': props.addonVariant, // Used in inputgroup to set styling
+  }),
+};

package/fixedasset/inputmask/index.js

@@ -0,0 +1,30 @@
+export default {
+  root: ({ context }) => ({
+    class: [
+      // Font
+      'font-sans leading-6',
+
+      // Spacing
+      'm-0 py-1.5 px-3 sm:text-sm',
+
+      // Colors
+      'text-surface-900',
+      'placeholder:text-surface-400',
+      'bg-surface-0',
+      'ring-1 ring-inset ring-surface-300',
+      'shadow-sm',
+
+      // Shape
+      'rounded-md',
+      'appearance-none',
+
+      // Interactions
+      {
+        'outline-none focus:ring-primary-500':
+          !context.disabled,
+        'opacity-60 select-none pointer-events-none cursor-default':
+          context.disabled,
+      },
+    ],
+  }),
+};

package/fixedasset/inputnumber/index.js

@@ -0,0 +1,50 @@
+export default {
+  root: ({ props, parent }) => ({
+    class: [
+      // Layout
+      'flex items-center self-stretch shrink-0 grow',
+
+      //Size
+      'h-full',
+
+      // Spacing
+      'py-1 px-3',
+
+      // Border
+      'rounded',
+
+      'appearance-none',
+    ],
+  }),
+  input: {
+    root: ({ parent }) => ({
+      class: [
+        'border-0 h-full w-full outline-none',
+        'bg-inherit',
+        'text-xs font-normal',
+        'placeholder:text-general-200',
+      ],
+    }),
+  },
+
+  buttongroup: {
+    class: ['flex'],
+  },
+
+  incrementbutton: {
+    root: ({ parent }) => ({
+      class: [],
+    }),
+    label: {
+      class: 'h-0 w-0',
+    },
+  },
+  decrementbutton: {
+    root: ({ parent }) => ({
+      class: [],
+    }),
+    label: {
+      class: 'h-0 w-0',
+    },
+  },
+};

package/fixedasset/inputotp/index.js

@@ -0,0 +1,70 @@
+export default {
+  root: {
+    class: [
+      // Alignment
+      'flex items-center',
+      'gap-[6px]',
+    ],
+  },
+  input: {
+    root: ({ props, context, parent }) => ({
+      class: [
+        // Font
+        'leading-none font-medium',
+
+        // Flex & Alignment
+        { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+        'text-center',
+
+        // Spacing
+        'm-0',
+        {
+          'p-3': props.size == null,
+        },
+
+        // Size
+        'w-[42px] h-[42px] text-base',
+
+        // Shape
+        { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+        {
+          'first:rounded-l-md rounded-none last:rounded-r-md':
+            parent.instance.$name == 'InputGroup',
+        },
+        {
+          'border-0 border-y border-l last:border-r':
+            parent.instance.$name == 'InputGroup',
+        },
+        {
+          'first:ml-0 ml-[-1px]':
+            parent.instance.$name == 'InputGroup' && !props.showButtons,
+        },
+
+        // Colors
+        'text-general-800',
+        'placeholder:text-surface-400',
+        'bg-white',
+        'border',
+        { 'border-general-200': !props.invalid },
+
+        // Invalid State
+        { 'border-danger-500': props.invalid },
+
+        // States
+        {
+          // 'hover:border-primary-500': !context.disabled && !props.invalid,
+          'focus:outline-none focus:outline-offset-0': !context.disabled,
+          'opacity-60 select-none pointer-events-none cursor-default':
+            context.disabled,
+        },
+
+        // Filled State *for FloatLabel
+        { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+
+        // Misc
+        'appearance-none',
+        'transition-colors duration-200',
+      ],
+    }),
+  },
+};

package/fixedasset/inputphonenumber/index.js

@@ -0,0 +1,19 @@
+export const commonClasses = ({ isFirefoxBased, invalidInput }) => [
+  { 'ring-[1px]': isFirefoxBased, 'ring-[0.5px]': !isFirefoxBased },
+  { '!ring-danger-500': invalidInput },
+  'ring-inset',
+  'ring-general-400',
+  '[&:has(:focus)]:bg-none',
+  '[&:has(:focus)]:ring-primary-400',
+  'bg-white',
+  'z-[0] [&:has(:focus)]:z-[12]',
+];
+
+export default {
+  dialcode: (ctx) => ({
+    class: [...commonClasses(ctx), 'rounded-l rounded-r-none'],
+  }),
+  inputnumber: (ctx) => ({
+    class: [...commonClasses(ctx), 'rounded-r rounded-l-none -ml-[1px]'],
+  }),
+};

package/fixedasset/inputswitch/index.js

@@ -0,0 +1,114 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Alignments
+      'inline-flex relative align-middle',
+      'shrink-0',
+
+      // Shape
+      'rounded-[60px]',
+
+      // Size
+      'h-4 w-8',
+
+      // Misc
+      'cursor-pointer',
+
+      // States
+      {
+        'select-none pointer-events-none cursor-default': props.disabled,
+      },
+    ],
+  }),
+  slider: ({ props }) => ({
+    class: [
+      // Position
+      'absolute top-0 left-0 right-0 bottom-0',
+
+      // Shape
+      'rounded-[60px]',
+
+      // Before:
+      'before:absolute before:top-1/2',
+      'before:-mt-[6px] before:ml-0.5',
+      'before:h-3 before:w-3',
+      'before:rounded-full',
+      'before:duration-200 before:transition before:ease-in-out',
+      'before:shadow',
+      {
+        'before:bg-white before:bg-white':
+          props.modelValue == props.trueValue,
+        'before:bg-primary-200':
+          props.modelValue !== props.trueValue && !props.disabled,
+        'before:bg-general-50':
+          props.modelValue !== props.trueValue && props.disabled,
+      },
+      {
+        'before:transform before:translate-x-3.5':
+          props.modelValue == props.trueValue,
+      },
+
+      // Colors
+      'border',
+      {
+        'border-primary-200':
+          props.modelValue !== props.trueValue && !props.disabled,
+        'border-transparent': props.modelValue == props.trueValue,
+      },
+      {
+        'bg-white':
+          props.modelValue !== props.trueValue && !props.disabled,
+        'bg-primary-500':
+          props.modelValue == props.trueValue && !props.disabled,
+        'bg-primary-100':
+          props.modelValue == props.trueValue && props.disabled,
+        'bg-general-100':
+          props.modelValue !== props.trueValue && props.disabled,
+      },
+
+      // States
+      'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500',
+
+      // Transition
+      'transition-colors duration-200',
+
+      // Misc
+      'cursor-pointer',
+    ],
+  }),
+  input: ({ props }) => ({
+    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
+      'appearance-none',
+      {
+        'cursor-default': props.disabled,
+        'cursor-pointer': !props.disabled,
+      },
+    ],
+  }),
+};

package/fixedasset/inputtext/index.js

@@ -0,0 +1,27 @@
+export default {
+  root: ({ props, context, parent }) => ({
+    class: [
+      'px-3 py-1 w-full bg-transparent',
+
+      // Size
+      'h-full',
+      {
+        'max-h-[43px]': parent.instance?.placeholder?.includes('password'),
+      },
+
+      // Font
+      'text-grayscale-900 text-xs font-normal',
+      'placeholder:text-general-200',
+      'placeholder:!font-normal',
+
+      'appearance-none',
+
+      // Interactions
+      {
+        'outline-none': !context.disabled,
+        '!text-general-200 select-none pointer-events-none cursor-default':
+          context.disabled,
+      },
+    ],
+  }),
+};

package/fixedasset/knob/index.js

@@ -0,0 +1,47 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Misc
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  range: {
+    class: [
+      // Stroke
+      'stroke-current',
+
+      // Color
+      'stroke-surface-200',
+
+      // Fill
+      'fill-none',
+
+      // Transition
+      'transition duration-100 ease-in',
+    ],
+  },
+  value: {
+    class: [
+      // Animation
+      'animate-dash-frame',
+
+      // Color
+      'stroke-primary-500',
+
+      // Fill
+      'fill-none',
+    ],
+  },
+  label: {
+    class: [
+      // Text Style
+      'text-center text-xl',
+
+      // Color
+      'fill-surface-600',
+    ],
+  },
+};

package/fixedasset/listbox/index.js

@@ -0,0 +1,156 @@
+export default {
+  root: {
+    class: [
+      // Sizing and Shape
+      'min-w-[12rem]',
+      'rounded-md',
+      // Spacing
+
+      // Colors
+      'bg-surface-0',
+      'text-surface-700/80',
+      'ring-1 ring-surface-200',
+    ],
+  },
+  wrapper: {
+    class: [
+      // Overflow
+      'overflow-auto',
+    ],
+  },
+  list: {
+    class: 'py-1 list-none m-0',
+  },
+  item: ({ context }) => ({
+    class: [
+      // Font
+      'sm:text-sm',
+      'leading-none',
+      { 'font-normal': !context.selected, 'font-bold': context.selected },
+
+      // Position
+      'relative',
+
+      // Shape
+      'border-0',
+      'rounded-none',
+
+      // Spacing
+      'm-0',
+      'py-2 px-4',
+
+      // Color
+      {
+        'text-surface-700/80':
+          !context.focused && !context.selected,
+      },
+      {
+        'bg-surface-200 text-surface-700/80':
+          context.focused && !context.selected,
+      },
+      {
+        'bg-primary-500 text-white':
+          context.focused && context.selected,
+      },
+      {
+        'bg-surface-100 text-primary-500':
+          !context.focused && context.selected,
+      },
+
+      //States
+      'hover:bg-primary-500 hover:text-white',
+      'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
+
+      // Misc
+      'cursor-pointer',
+      'overflow-hidden',
+      'whitespace-nowrap',
+    ],
+  }),
+  itemgroup: {
+    class: [
+      //Font
+      'font-bold',
+      'sm:text-sm',
+
+      // Spacing
+      'm-0',
+      'py-2 px-4',
+
+      // Color
+      'text-surface-800/80',
+      'bg-surface-0',
+
+      // Misc
+      'cursor-auto',
+    ],
+  },
+  header: {
+    class: [
+      // Spacing
+      'p-0',
+      'm-0',
+
+      //Shape
+      'rounded-tl-md',
+      'rounded-tr-md',
+      'border-b border-surface-200',
+
+      // Color
+      'text-surface-700/80',
+      'bg-surface-100',
+    ],
+  },
+  filtercontainer: {
+    class: 'relative',
+  },
+  filterinput: {
+    class: [
+      // Font
+      'font-sans',
+      'leading-none',
+      'sm:text-sm',
+
+      // Sizing
+      'py-1.5 px-3',
+      'pr-7',
+      '-mr-7',
+      'w-full',
+
+      //Color
+      'text-surface-700/80',
+      'bg-surface-0',
+      'placeholder:text-surface-400',
+
+      // Shape
+      'border-0',
+      'rounded-tl-md',
+      'rounded-tr-md',
+      'appearance-none',
+
+      // States
+      'focus:ring-2 focus:ring-inset focus:outline-none focus:outline-offset-0',
+      'focus:ring-primary-600',
+
+      // Misc
+      'appearance-none',
+    ],
+  },
+  filtericon: {
+    class: ['absolute', 'top-1/2 right-3', '-mt-2'],
+  },
+  emptymessage: {
+    class: [
+      // Font
+      'leading-none',
+      'sm:text-sm',
+
+      // Spacing
+      'py-2 px-4',
+
+      // Color
+      'text-surface-800/80',
+      'bg-transparent',
+    ],
+  },
+};