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

package/fixedasset/image/index.js

@@ -0,0 +1,128 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'relative inline-block',
+      'shrink-0',
+      { 'rounded-full': props.rounded },
+      { 'rounded-lg': !props.rounded },
+    ],
+  }),
+  image: ({ props }) => ({
+    class: [
+      'w-full h-full object-cover',
+      { 'rounded-full': props.rounded },
+      { 'rounded-lg': !props.rounded },
+    ],
+  }),
+  button: {
+    class: [
+      'flex items-center justify-center',
+      'absolute',
+      'w-full h-full',
+      'inset-0 opacity-0 transition-opacity duration-300',
+      'bg-transparent text-white',
+      'hover:cursor-pointer hover:bg-grayscale-900 hover:opacity-50',
+    ],
+    style: 'border-radius: inherit',
+  },
+  icon: {
+    class: 'w-6 h-6',
+  },
+  mask: {
+    class: [
+      'flex items-center justify-center',
+      'fixed top-0 left-0',
+      'w-full h-full',
+      'bg-grayscale-950/90',
+    ],
+  },
+  toolbar: {
+    class: ['flex', 'absolute top-0 right-0', 'p-4'],
+  },
+  rotaterightbutton: {
+    class: [
+      'z-20',
+      'flex justify-center items-center',
+      'w-6 h-6',
+      'mr-2',
+      'rounded-full',
+      'text-white bg-transparent',
+      'hover:text-white hover:bg-white/10',
+      'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50',
+      'transition duration-200 ease-in-out',
+    ],
+  },
+  rotaterighticon: {
+    class: 'w-4 h-4',
+  },
+  rotateleftbutton: {
+    class: [
+      'z-20',
+      'flex justify-center items-center',
+      'w-6 h-6',
+      'mr-2',
+      'rounded-full',
+      'text-white bg-transparent',
+      'hover:text-white hover:bg-white/10',
+      'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50',
+      'transition duration-200 ease-in-out',
+    ],
+  },
+  rotatelefticon: {
+    class: 'w-4 h-4',
+  },
+  zoomoutbutton: {
+    class: [
+      'z-20',
+      'flex justify-center items-center',
+      'w-6 h-6',
+      'mr-2',
+      'rounded-full',
+      'text-white bg-transparent',
+      'hover:text-white hover:bg-white/10',
+      'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50',
+      'transition duration-200 ease-in-out',
+    ],
+  },
+  zoomouticon: {
+    class: 'w-4 h-4',
+  },
+  zoominbutton: {
+    class: [
+      'z-20',
+      'flex justify-center items-center',
+      'w-6 h-6',
+      'mr-2',
+      'rounded-full',
+      'text-white bg-transparent',
+      'hover:text-white hover:bg-white/10',
+      'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50',
+      'transition duration-200 ease-in-out',
+    ],
+  },
+  zoominicon: {
+    class: 'w-4 h-4',
+  },
+  closebutton: {
+    class: [
+      'z-20',
+      'flex justify-center items-center',
+      'w-6 h-6',
+      'mr-2',
+      'rounded-full',
+      'text-white bg-transparent',
+      'hover:text-white hover:bg-white/10',
+      'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50',
+      'transition duration-200 ease-in-out',
+    ],
+  },
+  closeicon: {
+    class: 'w-4 h-4',
+  },
+  transition: {
+    enterFromClass: 'opacity-0 scale-75',
+    enterActiveClass: 'transition-all duration-150 ease-in-out',
+    leaveActiveClass: 'transition-all duration-150 ease-in',
+    leaveToClass: 'opacity-0 scale-75',
+  },
+};

package/fixedasset/index.css

@@ -0,0 +1,65 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+
+@import './icons.css';
+
+@tailwind components;
+@tailwind utilities;
+
+* {
+  font-family: 'Poppins', sans-serif;
+}
+
+.font-poppins {
+  font-family: 'Poppins', sans-serif !important;
+}
+
+.font-source-code-pro {
+  font-family: 'Source Code Pro', monospace;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+h1,
+.heading-1 {
+  @apply !text-[22px] !font-semibold leading-7;
+}
+
+h2,
+.heading-2 {
+  @apply !text-lg !font-semibold leading-6;
+}
+
+h3,
+.heading-3 {
+  @apply !text-base !font-medium leading-5;
+}
+
+h4,
+.heading-4 {
+  @apply !text-sm !font-medium leading-4;
+}
+
+p,
+.p {
+  @apply !text-xs !font-normal leading-4;
+}
+
+h5,
+.heading-5 {
+  @apply !text-xs !font-semibold leading-4;
+}
+
+h6,
+.heading-6 {
+  @apply !text-[10px] !font-semibold leading-3;
+}
+
+.scrollbar-w-none {
+  scrollbar-width: none;
+}
+
+.scrollbar-w-thin {
+  scrollbar-width: thin;
+}

package/{wangsvue/index.d.ts → fixedasset/index.js}

@@ -1,190 +1,211 @@
-export default wangsvue;
-declare namespace wangsvue {
-    export { global };
-    export { directives };
-    export { form };
-    export { autocomplete };
-    export { dropdown };
-    export { inputnumber };
-    export { inputphonenumber };
-    export { inputcurrency };
-    export { inputotp };
-    export { inputtext };
-    export { inputbadge };
-    export { calendar };
-    export { checkbox };
-    export { buttonradio };
-    export { inputswitch };
-    export { selectbutton };
-    export { slider };
-    export { chips };
-    export { rating };
-    export { multiselect };
-    export { togglebutton };
-    export { cascadeselect };
-    export { listbox };
-    export { colorpicker };
-    export { inputgroup };
-    export { inputgroupaddon };
-    export { inputmask };
-    export { knob };
-    export { treeselect };
-    export { tristatecheckbox };
-    export { textarea };
-    export { password };
-    export { validatormessage };
-    export { fileupload };
-    export { button };
-    export { buttondownload };
-    export { buttonbulkaction };
-    export { buttonsearch };
-    export { buttonfilter };
-    export { splitbutton };
-    export { paginator };
-    export { datatable };
-    export { tree };
-    export { dataview };
-    export { dataviewlayoutoptions };
-    export { organizationchart };
-    export { orderlist };
-    export { picklist };
-    export { timeline };
-    export { changelog };
-    export { accordion };
-    export { panel };
-    export { fieldset };
-    export { card };
-    export { tabview };
-    export { divider };
-    export { toolbar };
-    export { scrollpanel };
-    export { contextmenu };
-    export { menu };
-    export { menubar };
-    export { steps };
-    export { breadcrumb };
-    export { tieredmenu };
-    export { panelmenu };
-    export { megamenu };
-    export { dock };
-    export { tabmenu };
-    export { dialog };
-    export { dialogconfirm };
-    export { dialogform };
-    export { overlaypanel };
-    export { sidebar };
-    export { confirmpopup };
-    export { message };
-    export { inlinemessage };
-    export { toast };
-    export { carousel };
-    export { badge };
-    export { badgegroup };
-    export { avatar };
-    export { avatargroup };
-    export { tag };
-    export { chip };
-    export { progressbar };
-    export { skeleton };
-    export { scrolltop };
-    export { terminal };
-    export { image };
-    export { workcalendar };
-}
-import global from './global.js';
-declare namespace directives {
-    export { badgedirective as badge };
-    export { ripple };
-    export { tooltip };
-}
-import form from './form/index';
-import autocomplete from './autocomplete/index.js';
-import dropdown from './dropdown/index.js';
-import inputnumber from './inputnumber/index.js';
-import inputphonenumber from './inputphonenumber/index.js';
-import inputcurrency from './inputcurrency';
-import inputotp from './inputotp/index.js';
-import inputtext from './inputtext/index.js';
-import inputbadge from './inputbadge/index.js';
-import calendar from './calendar/index.js';
-import checkbox from './checkbox/index.js';
-import buttonradio from './buttonradio/index.js';
-import inputswitch from './inputswitch/index.js';
-import selectbutton from './selectbutton/index.js';
-import slider from './slider/index.js';
-import chips from './chips/index.js';
-import rating from './rating/index.js';
-import multiselect from './multiselect/index.js';
-import togglebutton from './togglebutton/index.js';
-import cascadeselect from './cascadeselect/index.js';
-import listbox from './listbox/index.js';
-import colorpicker from './colorpicker/index.js';
-import inputgroup from './inputgroup/index.js';
-import inputgroupaddon from './inputgroupaddon/index.js';
-import inputmask from './inputmask/index.js';
-import knob from './knob/index.js';
-import treeselect from './treeselect/index.js';
-import tristatecheckbox from './tristatecheckbox/index.js';
-import textarea from './textarea/index.js';
-import password from './password/index.js';
-import validatormessage from './validatormessage/index.js';
-import fileupload from './fileupload';
-import button from './button/index.js';
-import buttondownload from './buttondownload/index.js';
-import buttonbulkaction from './buttonbulkaction/index';
-import buttonsearch from './buttonsearch/index.js';
-import buttonfilter from './buttonfilter/index.js';
-import splitbutton from './splitbutton/index.js';
-import paginator from './paginator/index.js';
-import datatable from './datatable/index.js';
-import tree from './tree/index.js';
-import dataview from './dataview/index.js';
-import dataviewlayoutoptions from './dataviewlayoutoptions/index.js';
-import organizationchart from './organizationchart/index.js';
-import orderlist from './orderlist/index.js';
-import picklist from './picklist/index.js';
-import timeline from './timeline/index.js';
-import changelog from './changelog/index.js';
-import accordion from './accordion/index.js';
-import panel from './panel/index.js';
-import fieldset from './fieldset/index.js';
-import card from './card/index.js';
-import tabview from './tabview/index.js';
-import divider from './divider/index.js';
-import toolbar from './toolbar/index.js';
-import scrollpanel from './scrollpanel/index.js';
-import contextmenu from './contextmenu/index.js';
-import menu from './menu/index.js';
-import menubar from './menubar/index.js';
-import steps from './steps/index.js';
-import breadcrumb from './breadcrumb/index.js';
-import tieredmenu from './tieredmenu/index.js';
-import panelmenu from './panelmenu/index.js';
-import megamenu from './megamenu/index.js';
-import dock from './dock/index.js';
-import tabmenu from './tabmenu/index.js';
-import dialog from './dialog/index.js';
-import dialogconfirm from './dialogconfirm/index.js';
-import dialogform from './dialogform/index.js';
-import overlaypanel from './overlaypanel/index.js';
-import sidebar from './sidebar/index.js';
-import confirmpopup from './confirmpopup/index.js';
-import message from './message/index.js';
-import inlinemessage from './inlinemessage/index.js';
-import toast from './toast/index.js';
-import carousel from './carousel/index.js';
-import badge from './badge/index.js';
-import badgegroup from './badgegroup/index.js';
-import avatar from './avatar/index.js';
-import avatargroup from './avatargroup/index.js';
-import tag from './tag/index.js';
-import chip from './chip/index.js';
-import progressbar from './progressbar/index.js';
-import skeleton from './skeleton/index.js';
-import scrolltop from './scrolltop/index.js';
-import terminal from './terminal/index.js';
-import image from './image/index.js';
-import workcalendar from './workcalendar';
-import badgedirective from './badgedirective/index.js';
-import ripple from './ripple/index.js';
-import tooltip from './tooltip/index.js';
+import accordion from './accordion/index.js';
+import autocomplete from './autocomplete/index.js';
+import avatar from './avatar/index.js';
+import avatargroup from './avatargroup/index.js';
+import badge from './badge/index.js';
+import badgedirective from './badgedirective/index.js';
+import button from './button/index.js';
+import buttondownload from './buttondownload/index.js';
+import buttonfilter from './buttonfilter/index.js';
+import buttonsearch from './buttonsearch/index.js';
+import calendar from './calendar/index.js';
+import card from './card/index.js';
+import carousel from './carousel/index.js';
+import cascadeselect from './cascadeselect/index.js';
+import changelog from './changelog/index.js';
+import checkbox from './checkbox/index.js';
+import chip from './chip/index.js';
+import chips from './chips/index.js';
+import colorpicker from './colorpicker/index.js';
+import confirmpopup from './confirmpopup/index.js';
+import contextmenu from './contextmenu/index.js';
+import datatable from './datatable/index.js';
+import dataview from './dataview/index.js';
+import dataviewlayoutoptions from './dataviewlayoutoptions/index.js';
+import dialog from './dialog/index.js';
+import dialogconfirm from './dialogconfirm/index.js';
+import dialogform from './dialogform/index.js';
+import divider from './divider/index.js';
+import dock from './dock/index.js';
+import dropdown from './dropdown/index.js';
+import fieldset from './fieldset/index.js';
+import form from './form/index';
+import global from './global.js';
+import image from './image/index.js';
+import inlinemessage from './inlinemessage/index.js';
+import inputbadge from './inputbadge/index.js';
+import inputgroup from './inputgroup/index.js';
+import inputgroupaddon from './inputgroupaddon/index.js';
+import inputmask from './inputmask/index.js';
+import inputnumber from './inputnumber/index.js';
+import inputotp from './inputotp/index.js';
+import inputphonenumber from './inputphonenumber/index.js';
+import inputswitch from './inputswitch/index.js';
+import inputtext from './inputtext/index.js';
+import knob from './knob/index.js';
+import listbox from './listbox/index.js';
+import megamenu from './megamenu/index.js';
+import menu from './menu/index.js';
+import menubar from './menubar/index.js';
+import message from './message/index.js';
+import multiselect from './multiselect/index.js';
+import orderlist from './orderlist/index.js';
+import organizationchart from './organizationchart/index.js';
+import overlaypanel from './overlaypanel/index.js';
+import paginator from './paginator/index.js';
+import panel from './panel/index.js';
+import panelmenu from './panelmenu/index.js';
+import password from './password/index.js';
+import picklist from './picklist/index.js';
+import progressbar from './progressbar/index.js';
+import buttonradio from './buttonradio/index.js';
+import rating from './rating/index.js';
+import ripple from './ripple/index.js';
+import scrollpanel from './scrollpanel/index.js';
+import scrolltop from './scrolltop/index.js';
+import selectbutton from './selectbutton/index.js';
+import sidebar from './sidebar/index.js';
+import skeleton from './skeleton/index.js';
+import slider from './slider/index.js';
+import splitbutton from './splitbutton/index.js';
+import steps from './steps/index.js';
+import tabmenu from './tabmenu/index.js';
+import tabview from './tabview/index.js';
+import tag from './tag/index.js';
+import terminal from './terminal/index.js';
+import textarea from './textarea/index.js';
+import tieredmenu from './tieredmenu/index.js';
+import timeline from './timeline/index.js';
+import toast from './toast/index.js';
+import togglebutton from './togglebutton/index.js';
+import toolbar from './toolbar/index.js';
+import tooltip from './tooltip/index.js';
+import tree from './tree/index.js';
+import treeselect from './treeselect/index.js';
+import tristatecheckbox from './tristatecheckbox/index.js';
+import validatormessage from './validatormessage/index.js';
+import buttonbulkaction from './buttonbulkaction/index';
+import badgegroup from './badgegroup/index.js';
+import breadcrumb from './breadcrumb/index.js';
+import inputcurrency from './inputcurrency';
+import fileupload from './fileupload';
+import workcalendar from './workcalendar';
+
+const directives = {
+  badge: badgedirective,
+  ripple,
+  tooltip,
+};
+
+const wangsvue = {
+  global,
+  directives,
+
+  // Forms
+  form,
+  autocomplete,
+  dropdown,
+  inputnumber,
+  inputphonenumber,
+  inputcurrency,
+  inputotp,
+  inputtext,
+  inputbadge,
+  calendar,
+  checkbox,
+  buttonradio,
+  inputswitch,
+  selectbutton,
+  slider,
+  chips,
+  rating,
+  multiselect,
+  togglebutton,
+  cascadeselect,
+  listbox,
+  colorpicker,
+  inputgroup,
+  inputgroupaddon,
+  inputmask,
+  knob,
+  treeselect,
+  tristatecheckbox,
+  textarea,
+  password,
+  validatormessage,
+  fileupload,
+
+  // Buttons
+  button,
+  buttondownload,
+  buttonbulkaction,
+  buttonsearch,
+  buttonfilter,
+  splitbutton,
+
+  // Data
+  paginator,
+  datatable,
+  tree,
+  dataview,
+  dataviewlayoutoptions,
+  organizationchart,
+  orderlist,
+  picklist,
+  timeline,
+  changelog,
+
+  // Panels
+  accordion,
+  panel,
+  fieldset,
+  card,
+  tabview,
+  divider,
+  toolbar,
+  scrollpanel,
+
+  // Menu
+  contextmenu,
+  menu,
+  menubar,
+  steps,
+  breadcrumb,
+  tieredmenu,
+  panelmenu,
+  megamenu,
+  dock,
+  tabmenu,
+
+  // Overlays
+  dialog,
+  dialogconfirm,
+  dialogform,
+  overlaypanel,
+  sidebar,
+  confirmpopup,
+
+  // Messages
+  message,
+  inlinemessage,
+  toast,
+
+  // Media
+  carousel,
+
+  // Misc
+  badge,
+  badgegroup,
+  avatar,
+  avatargroup,
+  tag,
+  chip,
+  progressbar,
+  skeleton,
+  scrolltop,
+  terminal,
+  image,
+  workcalendar,
+};
+
+export default wangsvue;

package/fixedasset/inlinemessage/index.js

@@ -0,0 +1,26 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      'rounded-md p-3',
+      'w-full',
+      {
+        'bg-success-50 text-success-500': props.severity == 'success',
+        'bg-danger-50 text-danger-500': props.severity == 'error',
+        'bg-grayscale-50 text-general-800': props.severity == 'secondary',
+      },
+    ],
+  }),
+  icon: {
+    class: 'hidden',
+  },
+  text: {
+    class: [
+      // Layout
+      'w-full flex gap-3 flex-col',
+
+      // Font and Text
+      'text-[12px] leading-[normal] tracking-[0.24px]',
+      'font-medium',
+    ],
+  },
+};