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

package/fixedasset/colorpicker/index.js

@@ -0,0 +1,134 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Display
+      'inline-block',
+
+      // Misc
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  input: {
+    class: [
+      // Font
+      'font-sans text-base ',
+
+      // Spacing
+      'm-0',
+
+      // Size & Shape
+      'rounded',
+      'w-4',
+      'h-4',
+
+      // Colors
+      'bg-surface-0',
+      'border border-surface-300',
+
+      // States
+      'hover:border-primary-500',
+      'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-500',
+
+      // Transition
+      'transition-colors duration-200',
+
+      // Misc
+      'cursor-default',
+      'select-none',
+    ],
+  },
+  panel: ({ props }) => ({
+    class: [
+      // Position & Size
+      {
+        'relative h-48 w-52': props.inline,
+        'absolute h-48 w-52': !props.inline,
+      },
+
+      // Shape
+      'shadow-md',
+      'border-0',
+      'rounded-md',
+
+      // Colors
+      'bg-surface-800',
+      'ring-1 ring-inset ring-surface-900',
+    ],
+  }),
+  selector: {
+    class: [
+      // Position
+      'absolute top-2 left-2',
+
+      // Size
+      'h-44 w-40',
+    ],
+  },
+  color: {
+    class: [
+      // Size
+      'h-44 w-40',
+    ],
+    style:
+      'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)',
+  },
+  colorhandle: {
+    class: [
+      'absolute',
+
+      // Shape
+      'rounded-full border border-solid',
+
+      // Size
+      'h-3 w-3',
+
+      // Colors
+      'border-white',
+
+      // Misc
+      'cursor-pointer  opacity-85',
+    ],
+  },
+  hue: {
+    class: [
+      // Position
+      'absolute top-2 left-44',
+
+      // Size
+      'h-44 w-6',
+
+      // Opacity
+      'opacity-85',
+    ],
+    style:
+      'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)',
+  },
+  huehandle: {
+    class: [
+      // Position
+      'absolute left-0 -ml-1',
+
+      // Size
+      'h-2 w-8',
+
+      // Shape
+      'border-solid border-2 rounded',
+
+      // Colors
+      'border-white',
+
+      // Misc
+      'opacity-85',
+    ],
+  },
+  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/colors.config.json

@@ -0,0 +1,77 @@
+{
+  "primary-50": "#F8F7EE",
+  "primary-100": "#EEEBD3",
+  "primary-200": "#DFD7A9",
+  "primary-300": "#CDBC77",
+  "primary-400": "#BDA552",
+  "primary-500": "#9F7C3C",
+  "primary-600": "#856732",
+  "primary-700": "#785930",
+  "primary-800": "#65492E",
+  "primary-900": "#583F2B",
+  "primary-950": "#322116",
+  "primary-1000": "#695200",
+
+  "danger-50": "#E7C3B6",
+  "danger-100": "#E7C3B6",
+  "danger-200": "#DBA592",
+  "danger-300": "#CF876D",
+  "danger-400": "#C36948",
+  "danger-500": "#B74B24",
+  "danger-600": "#993F1E",
+  "danger-700": "#7A3218",
+  "danger-800": "#5C2612",
+  "danger-900": "#3D190C",
+  "danger-950": "#1F0D06",
+
+  "warning-50": "#F9EFD9",
+  "warning-100": "#F3E0B3",
+  "warning-200": "#EDD08E",
+  "warning-300": "#E7C068",
+  "warning-400": "#E1B142",
+  "warning-500": "#DBA11C",
+  "warning-600": "#B78617",
+  "warning-700": "#926B13",
+  "warning-800": "#6E510E",
+  "warning-900": "#493609",
+  "warning-950": "#251B05",
+
+  "success-50": "#D5EDEB",
+  "success-100": "#AADBD6",
+  "success-200": "#80C9C2",
+  "success-300": "#55B7AD",
+  "success-400": "#2AA599",
+  "success-500": "#009384",
+  "success-600": "#007B6E",
+  "success-700": "#006258",
+  "success-800": "#004A42",
+  "success-900": "#00312C",
+  "success-950": "#001916",
+  "success-1000": "#00A455",
+  
+  "grayscale-50": "#f7f7f7",
+  "grayscale-100": "#f2f2f2",
+  "grayscale-200": "#e5e6e6",
+  "grayscale-300": "#d8d9d9",
+  "grayscale-400": "#cbcccd",
+  "grayscale-500": "#bdbebf",
+  "grayscale-600": "#97999b",
+  "grayscale-700": "#717374",
+  "grayscale-800": "#4b4d4e",
+  "grayscale-900": "#262627",
+  "grayscale-950": "#121212",
+
+  "general-50": "#EBEAF0",
+  "general-100": "#DAD9E3",
+  "general-200": "#B5B3C7",
+  "general-300": "#908CAB",
+  "general-400": "#6C688D",
+  "general-500": "#4E4B66",
+  "general-600": "#3F3C52",
+  "general-700": "#2F2D3E",
+  "general-800": "#201E29",
+  "general-900": "#100F15",
+  "general-950": "#070609",
+
+  "link": "#0000EE"
+}

package/fixedasset/confirmpopup/index.js

@@ -0,0 +1,122 @@
+export default {
+  root: {
+    class: [
+      // Shape
+      'rounded-lg',
+      'shadow-xl',
+      'border-0',
+
+      // Positioning
+      'z-40 transform origin-center',
+      'mt-3 absolute left-0 top-0',
+
+      // Color
+      '',
+      'bg-surface-0',
+      'text-surface-700/80',
+
+      // Before: Arrow
+      'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-surface-0',
+    ],
+  },
+  content: {
+    class: [
+      // Font
+      'text-sm',
+
+      // Spacing
+      'px-6',
+      'py-3',
+
+      // Colors
+      'bg-surface-0',
+      'text-surface-600',
+
+      // Misc
+      'overflow-y-auto',
+    ],
+  },
+  icon: {
+    class: 'text-xl mr-2',
+  },
+  footer: {
+    class: [
+      // Flexbox and Alignment
+      'flex items-center justify-end',
+      'shrink-0',
+      'text-right',
+      'gap-3',
+
+      // Spacing
+      'px-6',
+      'py-3',
+
+      // Shape
+      'border-t-0',
+      'rounded-b-lg',
+
+      // Colors
+      'bg-surface-50',
+      'text-surface-700/80',
+    ],
+  },
+  rejectbutton: {
+    root: {
+      class: [
+        'relative',
+
+        // Alignments
+        'items-center inline-flex text-center align-bottom justify-center',
+
+        // Sizes & Spacing
+        'px-2.5 py-1.5 min-w-[2rem]',
+        'text-sm',
+
+        // Shape
+        'rounded-md',
+
+        // Color
+        'text-primary-500',
+
+        // States
+        'hover:bg-primary-300/20',
+        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset',
+        'focus:ring-primary-500',
+      ],
+    },
+  },
+  acceptbutton: {
+    root: {
+      class: [
+        'relative',
+
+        // Alignments
+        'items-center inline-flex text-center align-bottom justify-center',
+
+        // Sizes & Spacing
+        'px-2.5 py-1.5 min-w-[2rem]',
+        'text-sm',
+
+        // Shape
+        'rounded-md',
+
+        // Color
+        'text-white',
+        'bg-primary-500',
+        'ring-1 ring-primary-500',
+
+        // States
+        'hover:bg-primary-600 hover:border-primary-600',
+        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
+        'focus:ring-primary-500',
+      ],
+    },
+  },
+  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/contextmenu/index.js

@@ -0,0 +1,122 @@
+export default {
+  root: {
+    class: [
+      // Sizing and Shape
+      'min-w-[12rem]',
+      'rounded-md',
+      'shadow-md',
+
+      // Spacing
+      'p-1.5',
+
+      // Colors
+      'bg-surface-0',
+      'text-surface-700/80',
+    ],
+  },
+  menu: {
+    class: [
+      // Spacings and Shape
+      'list-none',
+      'm-0',
+      'p-0',
+      'outline-none',
+    ],
+  },
+  menuitem: {
+    class: 'relative',
+  },
+  content: ({ context }) => ({
+    class: [
+      //Shape
+      'rounded-md',
+
+      //  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,
+      },
+
+      // Hover States
+      {
+        'hover:bg-surface-50': !context.active,
+        'hover:bg-surface-100 text-surface-900/80':
+          context.active,
+      },
+
+      // Transitions
+      'transition-shadow',
+      'duration-200',
+    ],
+  }),
+  action: {
+    class: [
+      'relative',
+
+      // Font
+      'font-semibold',
+
+      // Flexbox
+      'flex',
+      'items-center',
+
+      // Spacing
+      'py-2',
+      'px-3',
+
+      // Misc
+      'no-underline',
+      'overflow-hidden',
+      'cursor-pointer',
+      'select-none',
+    ],
+  },
+  icon: {
+    class: [
+      // Spacing
+      'mr-2',
+      'leading-6',
+      'text-sm',
+    ],
+  },
+  label: {
+    class: ['leading-6', 'text-sm'],
+  },
+  submenu: ({ props }) => ({
+    class: [
+      // Size
+      'w-full sm:w-48',
+
+      // Spacing
+      'p-1.5',
+      'm-0',
+      'list-none',
+
+      // Shape
+      'shadow-md',
+      'rounded-md',
+
+      // Position
+      'static sm:absolute',
+      'z-10',
+      { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+
+      // Color
+      'bg-surface-0',
+    ],
+  }),
+  submenuicon: {
+    class: ['ml-auto'],
+  },
+  separator: {
+    class: 'border-t border-surface-200 my-1',
+  },
+  transition: {
+    enterFromClass: 'opacity-0',
+    enterActiveClass: 'transition-opacity duration-250',
+  },
+};

package/fixedasset/datatable/index.js

@@ -0,0 +1,246 @@
+export default {
+  root: {
+    'data-wv-name': 'datatable',
+    'data-wv-section': 'root',
+  },
+
+  tablewrapper: {
+    'class': [
+      'overflow-auto relative scrollbar-w-thin',
+      'rounded-lg rounded-br-none rounded-bl-none',
+    ],
+    'data-wv-section': 'tablewrapper',
+  },
+
+  scrollheightwrapper: ({ props }) => ({
+    'class': [
+      'overflow-hidden w-full min-w-max',
+      {
+        '!overflow-y-auto': !!props.scrollHeight,
+      },
+    ],
+    'style': `scrollbar-width: none; max-height: ${props.scrollHeight}`,
+    'data-wv-section': 'scrollheightwrapper',
+  }),
+
+  table: {
+    'class': [
+      'min-w-max w-full',
+      '!border-separate !border-spacing-0 border !border-solid !border-primary-100 !border-t-0 !border-l-0 !border-r-0 !rounded-lg',
+    ],
+    'data-wv-section': 'table',
+  },
+
+  tbody: {
+    class: [
+      '[&_tr:last-of-type>td]:!border-b-0',
+      '[&_tr:last-of-type>td:last-child]:!rounded-br-lg',
+      '[&_tr:last-of-type>td:first-child]:!rounded-bl-lg',
+    ],
+  },
+  thead: {
+    class: ['sticky top-0 z-50'],
+  },
+  headerrow: {
+    class: ['border-b border-primary-100'],
+  },
+  bodyrow: ({ context, props }) => ({
+    class: [
+      'border-b border-general-100 group',
+      {
+        '!h-[35px]': props.rowHeight === 'fixed', // Style(DXJCiX2e): set table row height to fixed 35px
+      },
+      // Color
+      'text-general-800 text-xs font-normal',
+      {
+        'bg-transparent': !context.selected,
+        'bg-primary-100': context.selected,
+      },
+
+      // State
+      {
+        'focus:outline-none focus:outline-offset-0': props.selectionType,
+        // To sets the bg to single action td
+        'hover:!bg-primary-50': !context.highlighted,
+        'hover:!bg-warning-300 !bg-warning-200': context.highlighted,
+      },
+
+      // Transition
+      {
+        'transition duration-200':
+          (props.selectionType && !context.selected) || props.rowHover,
+      },
+
+      'px-4 transition-transform',
+      { 'select-none': context.dragging, 'select-auto': !context.dragging },
+      { '!cursor-grab [&_label]:!cursor-grab': context.draggable },
+
+      // Misc
+      { 'cursor-pointer': props.selectionType !== 'none' && !context.disabled },
+    ],
+  }),
+  headercell: ({ context }) => {
+    return {
+      'class': [
+        'text-xs font-semibold text-white p-2 text-left cursor-pointer',
+        { 'bg-primary-400': !context.sorted || !context.sortable },
+        { 'bg-primary-500': context.sorted },
+        {
+          'sticky right-0 hover:bg-primary-500': context.customColumn,
+          '!cursor-default': !context.customColumn && !context.sortable,
+        },
+        'border-0 !border-b border-solid',
+        'border-primary-100',
+      ],
+      'data-wv-section': 'headercell',
+    };
+  },
+  headercellcontent: {
+    'class': ['inline-flex gap-2 items-center leading-[18px]'],
+    'data-wv-section': 'headercellcontent',
+  },
+  headercellreorderable: {
+    'class': ['w-[35px] !py-1'],
+    'data-wv-section': 'headercellreorderable',
+  },
+  draggableicon: {
+    class: 'w-[18px] h-[18px] !p-0 !m-0 !cursor-grab [&_label]:!cursor-grab',
+  },
+  headercheckbox: ({ context }) => ({
+    'class': [
+      {
+        '[&_[data-pc-section=box]]:!border-white [&_[data-pc-section=box]]:!bg-transparent':
+          !context.isSelectedAll,
+      },
+    ],
+    'data-wv-section': 'headercheckbox',
+  }),
+  headercellcheckbox: {
+    'class': 'w-[35px] text-center',
+    'data-wv-section': 'headercellcheckbox',
+  },
+  headertoggler: {
+    'class': ['w-[40px] text-center !py-1'],
+    'data-wv-section': 'headertoggler',
+  },
+  columnvisibilityicon: {
+    class: ['!w-4 !h-4 !mx-auto'],
+    info: 'Visibilitas Kolom',
+  },
+  headertogglerbutton: ({ context }) => ({
+    'class': [
+      '!p-0 !m-0 !w-auto !h-auto',
+      { 'rotate-180': context.isExpandedAll },
+      { 'rotate-0': !context.isExpandedAll },
+    ],
+    'icon-class': 'w-6 h-6 text-white',
+    'data-wv-section': 'headertogglerbutton',
+  }),
+
+  rowcheckbox: {
+    'class': '',
+    'data-wv-section': 'rowcheckbox',
+  },
+  bodycell: {
+    'class': [
+      'text-xs px-2 py-0.5',
+      'border-0 !border-b !border-solid border-primary-100',
+
+      '[&:has([data-wv-section=rowcheckbox])]:text-center',
+      '[&:has([data-wv-section=rowcheckbox])]:text-center',
+    ],
+    'data-wv-section': 'bodycell',
+  },
+  multirowcontainer: ({ props }) => ({
+    class: ['grid grid-cols-1', `grid-rows-${props.attributes.length}`],
+  }),
+  multirow: ({ context }) => ({
+    class: [
+      '!h-[35px] flex items-center px-2',
+      { '!border-t border-primary-100 !border-solid': !context.firstIndex },
+    ],
+  }),
+  rowtogglerbutton: ({ context }) => ({
+    'class': [
+      '!p-0 !m-0 !w-auto !h-auto',
+      { 'rotate-180': context.isRowExpanded },
+      { 'rotate-0': !context.isRowExpanded },
+    ],
+    'icon-class': 'w-6 h-6',
+    'data-wv-section': 'rowtogglerbutton',
+  }),
+
+  childrowheader: {
+    'class': 'font-semibold text-xs',
+    'data-wv-section': 'childrowheader',
+  },
+
+  celleditableelement: {
+    'class': [
+      'focus:px-2',
+      'w-full inline-block py-2 focus:outline-grayscale-600 focus:outline-1',
+    ],
+    'data-wv-section': 'celleditableelement',
+  },
+
+  rowsingleactioncell: ({ props, context }) => ({
+    'class': [
+      'w-[35px]',
+      {
+        'sticky bg-white': props.useOption,
+        '!bg-primary-100': context.selected,
+        'group-hover:!bg-primary-50': !context.highlighted,
+        'group-hover:!bg-warning-300 !bg-warning-200': context.highlighted,
+      },
+    ],
+    'data-wv-section': 'rowsingleactioncell',
+  }),
+
+  singleactionwrapper: {
+    'class': ['relative w-full h-full flex items-center justify-center'],
+    'data-wv-section': 'singleactionwrapper',
+  },
+
+  singleactionbutton: ({ props }) => ({
+    'class': [
+      {
+        'pointer-events-none !border-general-100 [&>i]:text-general-200':
+          props.disableAllRows,
+      },
+      { 'pointer-events-auto': !props.disableAllRows },
+    ],
+    'tooltip': 'Aksi',
+    'data-wv-section': 'singleactionbutton',
+  }),
+
+  nodatalottiewrapper: {
+    'class': 'w-full p-4 flex items-center justify-center',
+    'data-wv-section': 'nodatalottiewrapper',
+  },
+
+  nodatalottie: {
+    'class': 'w-44 h-auto',
+    'data-wv-section': 'nodatalottie',
+  },
+
+  loadingtablewrapper: {
+    'class': 'sticky left-0 w-full p-4 flex items-center justify-center',
+    'data-wv-section': 'loadingtablewrapper',
+  },
+
+  loadingtablelottie: {
+    'class': 'w-20 h-auto',
+    'data-wv-section': 'loadingtablelottie',
+  },
+
+  paginator: ({ context }) => ({
+    'current-page-report-template': context.totalRecords
+      ? 'Menampilkan {first} - {last} dari {totalRecords}'
+      : 'Tidak ditemukan data',
+
+    'class': '',
+
+    'template':
+      'FirstPageLink PrevPageLink PageLinks JumpToPageInput NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown',
+  }),
+};