funda-ui 1.0.272

package/lib/cjs/index.d.ts

@@ -0,0 +1,33 @@
+
+export const __esModule: true;
+export const BackToTop: any;
+export const CascadingSelect: any;
+export const CascadingSelectE2E: any;
+export const Checkbox: any;
+export const ColorPicker: any;
+export const DigitalClock: any;
+export const DropdownMenu: any;
+export const DynamicFields: any;
+export const File: any;
+export const Input: any;
+export const LiveSearch: any;
+export const ModalDialog: any;
+export const ModeSwitch: any;
+export const MultiFuncSelect: any;
+export const MultilevelDropdownMenu: any;
+export const Pagination: any;
+export const Radio: any;
+export const RangeSlider: any;
+export const ScrollReveal: any;
+export const Scrollbar: any;
+export const SearchBar: any;
+export const Select: any;
+export const ShowMoreLess: any;
+export const Switch: any;
+export const Table: any;
+export const Tabs: any;
+export const TagInput: any;
+export const Textarea: any;
+export const Toast: any;
+export const Tooltip: any;
+export const Tree: any;

package/lib/cjs/index.js

@@ -0,0 +1,35 @@
+
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.BackToTop = _interopRequireDefault(require("./BackToTop")).default;
+exports.CascadingSelect = _interopRequireDefault(require("./CascadingSelect")).default;
+exports.CascadingSelectE2E = _interopRequireDefault(require("./CascadingSelectE2E")).default;
+exports.Checkbox = _interopRequireDefault(require("./Checkbox")).default;
+exports.ColorPicker = _interopRequireDefault(require("./ColorPicker")).default;
+exports.DigitalClock = _interopRequireDefault(require("./DigitalClock")).default;
+exports.DropdownMenu = _interopRequireDefault(require("./DropdownMenu")).default;
+exports.DynamicFields = _interopRequireDefault(require("./DynamicFields")).default;
+exports.File = _interopRequireDefault(require("./File")).default;
+exports.Input = _interopRequireDefault(require("./Input")).default;
+exports.LiveSearch = _interopRequireDefault(require("./LiveSearch")).default;
+exports.ModalDialog = _interopRequireDefault(require("./ModalDialog")).default;
+exports.ModeSwitch = _interopRequireDefault(require("./ModeSwitch")).default;
+exports.MultiFuncSelect = _interopRequireDefault(require("./MultiFuncSelect")).default;
+exports.MultilevelDropdownMenu = _interopRequireDefault(require("./MultilevelDropdownMenu")).default;
+exports.Pagination = _interopRequireDefault(require("./Pagination")).default;
+exports.Radio = _interopRequireDefault(require("./Radio")).default;
+exports.RangeSlider = _interopRequireDefault(require("./RangeSlider")).default;
+exports.ScrollReveal = _interopRequireDefault(require("./ScrollReveal")).default;
+exports.Scrollbar = _interopRequireDefault(require("./Scrollbar")).default;
+exports.SearchBar = _interopRequireDefault(require("./SearchBar")).default;
+exports.Select = _interopRequireDefault(require("./Select")).default;
+exports.ShowMoreLess = _interopRequireDefault(require("./ShowMoreLess")).default;
+exports.Switch = _interopRequireDefault(require("./Switch")).default;
+exports.Table = _interopRequireDefault(require("./Table")).default;
+exports.Tabs = _interopRequireDefault(require("./Tabs")).default;
+exports.TagInput = _interopRequireDefault(require("./TagInput")).default;
+exports.Textarea = _interopRequireDefault(require("./Textarea")).default;
+exports.Toast = _interopRequireDefault(require("./Toast")).default;
+exports.Tooltip = _interopRequireDefault(require("./Tooltip")).default;
+exports.Tree = _interopRequireDefault(require("./Tree")).default;

package/lib/css/BackToTop/index.css

@@ -0,0 +1,34 @@
+/* ======================================================
+   <!-- Back to Top -->
+/* ====================================================== */
+.back-to-top button {
+  transform: scale(0);
+  position: fixed;
+  bottom: 12px;
+  right: 12px;
+  width: 50px;
+  height: 50px;
+  z-index: 99;
+  text-align: center;
+  transition: 0.1s ease-in-out;
+  display: block;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+.back-to-top button svg {
+  transition: 0.1s ease-in-out;
+}
+.back-to-top button:hover svg {
+  opacity: 0.7;
+}
+.back-to-top button.active {
+  transform: scale(1);
+}
+.back-to-top button:active, .back-to-top button:focus {
+  outline: none;
+}
+.back-to-top button i {
+  font-size: 1.5rem;
+}

package/lib/css/CascadingSelect/index.css

@@ -0,0 +1,159 @@
+/* ======================================================
+    <!-- Cascading Select -->
+/* ====================================================== */
+.cascading-select__wrapper {
+  --cascading-select-opt-header-border-color: rgba(1, 1, 1, .2);
+  --cascading-select-opt-hover-bg: #f7f7f7;
+  --cascading-select-opt-active-bg: #eeeeee;
+  --cascading-select-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
+  --cascading-select-items-bg: #fff;
+  --cascading-select-items-color: inherit;
+  --cascading-select-items-border-color: rgba(0, 0, 0, .1);
+  --cascading-select-items-li-border-color: #eee;
+  --cascading-select-arrow-fill: #a5a5a5;
+  --cascading-select-result-arrow-fill: #a5a5a5;
+  --cascading-select-result-font-size: 1rem;
+  --cascading-select-result-padding-x: 0.75rem;
+  --cascading-select-result-padding-y: 0.375rem;
+  --cascading-select-opt-font-size: 0.875rem;
+  --cascading-select-opt-padding-x: .4rem;
+  --cascading-select-opt-padding-y: .3rem;
+}
+.cascading-select__wrapper .cascading-select__result {
+  position: absolute;
+  left: auto;
+  z-index: 1;
+  top: 0;
+  padding: var(--cascading-select-result-padding-y) var(--cascading-select-result-padding-x);
+  font-size: var(--cascading-select-result-font-size);
+  font-weight: 400;
+  line-height: 1.5;
+  color: inherit;
+}
+.cascading-select__wrapper .cascading-select__result div {
+  display: inline;
+}
+.cascading-select__wrapper .cascading-select__result span {
+  padding: 3px;
+}
+.cascading-select__wrapper .cascading-select__result svg {
+  margin: 0 0.3rem;
+}
+.cascading-select__wrapper .cascading-select__result svg path {
+  fill: var(--cascading-select-result-arrow-fill);
+}
+.cascading-select__wrapper .cascading-select__closemask {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0);
+  user-select: none;
+}
+.cascading-select__wrapper .cascading-select__val {
+  position: relative;
+}
+.cascading-select__wrapper .cascading-select__val input {
+  cursor: pointer;
+  color: transparent !important;
+}
+.cascading-select__wrapper .cascading-select__val input:focus {
+  color: transparent !important;
+}
+.cascading-select__wrapper .cascading-select__val .arrow {
+  position: absolute;
+  top: 0;
+  margin-top: 0.3rem;
+  right: 0.5rem;
+}
+.cascading-select__wrapper .cascading-select__val .arrow svg .arrow-fill-g {
+  fill: var(--cascading-select-arrow-fill);
+}
+.cascading-select__wrapper .cascading-select {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+.cascading-select__wrapper .cascading-select ul,
+.cascading-select__wrapper .cascading-select li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__trigger {
+  position: relative;
+  z-index: 0;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__items {
+  box-shadow: var(--cascading-select-items-box-shadow);
+  position: absolute;
+  left: auto;
+  max-height: 350px;
+  border: 1px solid var(--cascading-select-items-border-color);
+  background: var(--cascading-select-items-bg);
+  padding: 10px;
+  overflow-y: auto;
+  box-sizing: border-box;
+  z-index: 1;
+  top: 2.3rem;
+  border-radius: 5px;
+  width: max-content;
+  /* required -> the content will not wrap at all even if it causes overflows*/
+  color: var(--cascading-select-items-color);
+  /* each item */
+}
+.cascading-select__wrapper .cascading-select .cascading-select__items.bottom-0 {
+  top: auto;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__items .cascading-select__close svg {
+  opacity: 0.4;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__items .cascading-select__close:hover svg {
+  transition: 0.2s ease-out;
+  opacity: 0.7;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__items ul {
+  transition: 0.2s ease-out;
+  min-width: 8px;
+  min-height: 9px;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__items ul > li {
+  position: relative;
+  cursor: pointer;
+  float: left;
+  padding: 0 10px;
+  margin-right: 15px;
+  border-right: 1px dotted var(--cascading-select-items-li-border-color);
+  transition: 0.2s ease-out;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__items ul > li:last-child {
+  margin-right: 0;
+  border-right: none;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__opt {
+  padding: var(--cascading-select-opt-padding-y) var(--cascading-select-opt-padding-x);
+  font-size: var(--cascading-select-opt-font-size);
+  border-radius: 2px;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__opt:hover {
+  background: var(--cascading-select-opt-hover-bg);
+}
+.cascading-select__wrapper .cascading-select .cascading-select__opt.active {
+  background: var(--cascading-select-opt-active-bg);
+}
+.cascading-select__wrapper .cascading-select .cascading-select__opt-header {
+  padding: var(--cascading-select-opt-padding-y) var(--cascading-select-opt-padding-x);
+  font-size: var(--cascading-select-opt-font-size);
+  opacity: 0.5;
+  border-bottom: 1px dotted var(--cascading-select-opt-header-border-color);
+  border-radius: 2px;
+}
+.cascading-select__wrapper .cascading-select .cascading-select__opt-header:hover {
+  background: var(--cascading-select-opt-hover-bg);
+}
+.cascading-select__wrapper .cascading-select .cascading-select__opt-header.active {
+  background: var(--cascading-select-opt-active-bg);
+}

package/lib/css/CascadingSelectE2E/index.css

@@ -0,0 +1,159 @@
+/* ======================================================
+    <!-- Cascading Select End-to-end -->
+/* ====================================================== */
+.cascading-select-e2e__wrapper {
+  --cascading-select-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
+  --cascading-select-e2e-opt-hover-bg: #f7f7f7;
+  --cascading-select-e2e-opt-active-bg: #eeeeee;
+  --cascading-select-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
+  --cascading-select-e2e-items-bg: #fff;
+  --cascading-select-e2e-items-color: inherit;
+  --cascading-select-e2e-items-border-color: rgba(0, 0, 0, .1);
+  --cascading-select-e2e-items-li-border-color: #eee;
+  --cascading-select-e2e-arrow-fill: #a5a5a5;
+  --cascading-select-e2e-result-arrow-fill: #a5a5a5;
+  --cascading-select-e2e-result-font-size: 1rem;
+  --cascading-select-e2e-result-padding-x: 0.75rem;
+  --cascading-select-e2e-result-padding-y: 0.375rem;
+  --cascading-select-e2e-opt-font-size: 0.875rem;
+  --cascading-select-e2e-opt-padding-x: .4rem;
+  --cascading-select-e2e-opt-padding-y: .3rem;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result {
+  position: absolute;
+  left: auto;
+  z-index: 1;
+  top: 0;
+  padding: var(--cascading-select-e2e-result-padding-y) var(--cascading-select-e2e-result-padding-x);
+  font-size: var(--cascading-select-e2e-result-font-size);
+  font-weight: 400;
+  line-height: 1.5;
+  color: inherit;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result div {
+  display: inline;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result span {
+  padding: 3px;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result svg {
+  margin: 0 0.3rem;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result svg path {
+  fill: var(--cascading-select-e2e-result-arrow-fill);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__closemask {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0);
+  user-select: none;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val {
+  position: relative;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val input {
+  cursor: pointer;
+  color: transparent !important;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val input:focus {
+  color: transparent !important;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val .arrow {
+  position: absolute;
+  top: 0;
+  margin-top: 0.3rem;
+  right: 0.5rem;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val .arrow svg .arrow-fill-g {
+  fill: var(--cascading-select-e2e-arrow-fill);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e ul,
+.cascading-select-e2e__wrapper .cascading-select-e2e li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__trigger {
+  position: relative;
+  z-index: 0;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items {
+  box-shadow: var(--cascading-select-e2e-items-box-shadow);
+  position: absolute;
+  left: auto;
+  max-height: 350px;
+  border: 1px solid var(--cascading-select-e2e-items-border-color);
+  background: var(--cascading-select-e2e-items-bg);
+  padding: 10px;
+  overflow-y: auto;
+  box-sizing: border-box;
+  z-index: 1;
+  top: 2.3rem;
+  border-radius: 5px;
+  width: max-content;
+  /* required -> the content will not wrap at all even if it causes overflows*/
+  color: var(--cascading-select-e2e-items-color);
+  /* each item */
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items.bottom-0 {
+  top: auto;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items .cascading-select-e2e__close svg {
+  opacity: 0.4;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items .cascading-select-e2e__close:hover svg {
+  transition: 0.2s ease-out;
+  opacity: 0.7;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items ul {
+  transition: 0.2s ease-out;
+  min-width: 8px;
+  min-height: 9px;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items ul > li {
+  position: relative;
+  cursor: pointer;
+  float: left;
+  padding: 0 10px;
+  margin-right: 15px;
+  border-right: 1px dotted var(--cascading-select-e2e-items-li-border-color);
+  transition: 0.2s ease-out;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items ul > li:last-child {
+  margin-right: 0;
+  border-right: none;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt {
+  padding: var(--cascading-select-e2e-opt-padding-y) var(--cascading-select-e2e-opt-padding-x);
+  font-size: var(--cascading-select-e2e-opt-font-size);
+  border-radius: 2px;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt:hover {
+  background: var(--cascading-select-e2e-opt-hover-bg);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt.active {
+  background: var(--cascading-select-e2e-opt-active-bg);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt-header {
+  padding: var(--cascading-select-e2e-opt-padding-y) var(--cascading-select-e2e-opt-padding-x);
+  font-size: var(--cascading-select-e2e-opt-font-size);
+  opacity: 0.5;
+  border-bottom: 1px dotted var(--cascading-select-e2e-opt-header-border-color);
+  border-radius: 2px;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt-header:hover {
+  background: var(--cascading-select-e2e-opt-hover-bg);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt-header.active {
+  background: var(--cascading-select-e2e-opt-active-bg);
+}

package/lib/css/ColorPicker/index.css

@@ -0,0 +1,38 @@
+/* ======================================================
+    <!-- Color Picker -->
+/* ====================================================== */
+.custom-form-control-color {
+  --color-control-border-radius: 0.375rem;
+  --color-control-size: 30px;
+  --color-control-border-color: rgba(0,0,0,.1);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  padding: 0 !important;
+  width: var(--color-control-size) !important;
+  height: var(--color-control-size) !important;
+  border: none;
+  cursor: pointer;
+}
+.custom-form-control-color::-webkit-color-swatch {
+  border: 2px solid var(--color-control-border-color);
+}
+.custom-form-control-color::-moz-color-swatch {
+  border: 2px solid var(--color-control-border-color);
+}
+.custom-form-control-color:disabled {
+  cursor: not-allowed;
+}
+.custom-form-control-color.custom-form-control-color--rounded::-webkit-color-swatch {
+  border-radius: var(--color-control-border-radius);
+}
+.custom-form-control-color.custom-form-control-color--rounded::-moz-color-swatch {
+  border-radius: var(--color-control-border-radius);
+}
+.custom-form-control-color.custom-form-control-color--circle::-webkit-color-swatch {
+  border-radius: 50%;
+}
+.custom-form-control-color.custom-form-control-color--circle::-moz-color-swatch {
+  border-radius: 50%;
+}

package/lib/css/DropdownMenu/index.css

@@ -0,0 +1,127 @@
+/* ======================================================
+   <!-- Dropdown Menu -->
+/* ====================================================== */
+/* Do not use <a> tag */
+.dropdown-default {
+  --dropdown-ul-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --dropdown-ul-bg: #fff;
+  --dropdown-ulbefore-box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
+  --dropdown-ulbefore-border-color: #fff;
+  --dropdown-li-bg: #fff;
+  --dropdown-li-hover-bg: #FAFAFA;
+  --dropdown-link-border-color: rgba(0, 0, 0, 0.05);
+  --dropdown-link-color: #333;
+  display: inline-block;
+  cursor: pointer;
+  position: relative;
+}
+.dropdown-default ul, .dropdown-default li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.dropdown-default strong {
+  font-weight: normal;
+  display: inline-block;
+  margin-left: 0.3rem;
+}
+.dropdown-default > ul {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+  min-width: 50px;
+  white-space: nowrap;
+  border-radius: 4px;
+  text-align: left;
+  box-shadow: var(--dropdown-ul-box-shadow);
+  background: var(--dropdown-ul-bg);
+  transition: 0.1s ease-in-out;
+  /* Prevent the hover threshold from failing */
+}
+.dropdown-default > ul::before {
+  content: "";
+  position: absolute;
+  top: -3px;
+  left: 10px;
+  width: 0;
+  height: 0;
+  box-shadow: var(--dropdown-ulbefore-box-shadow);
+  border-top: 4px solid var(--dropdown-ulbefore-border-color);
+  border-right: 4px solid var(--dropdown-ulbefore-border-color);
+  border-bottom: 4px solid transparent;
+  border-left: 4px solid transparent;
+  transform: rotate(-45deg);
+}
+.dropdown-default > ul::after {
+  content: "";
+  display: block;
+  background-color: transparent;
+  position: absolute;
+  top: -10px;
+  left: 0;
+  width: 100%;
+  height: 20px;
+}
+.dropdown-default > ul li {
+  z-index: 1;
+  position: relative;
+  background: var(--dropdown-li-bg);
+  padding: 0 0.75rem;
+}
+.dropdown-default > ul li:hover {
+  background: var(--dropdown-li-hover-bg);
+}
+.dropdown-default > ul li a {
+  display: block;
+  border-bottom: 1px solid var(--dropdown-link-border-color);
+  padding: 0.75rem 0;
+  color: var(--dropdown-link-color);
+  font-size: 0.75rem;
+  text-decoration: none;
+}
+.dropdown-default > ul li a svg,
+.dropdown-default > ul li a i {
+  display: none;
+}
+.dropdown-default > ul li:first-child {
+  border-radius: 4px 4px 0 0;
+}
+.dropdown-default > ul li:last-child {
+  border-radius: 0 0 4px 4px;
+}
+.dropdown-default > ul li:last-child a {
+  border-bottom: 0;
+}
+.dropdown-default.dropdown-default--center > ul {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.dropdown-default.dropdown-default--center > ul::before {
+  left: 50%;
+  transform: translateX(-50%) rotate(-45deg);
+}
+.dropdown-default.dropdown-default--end > ul {
+  left: auto;
+  right: 0;
+}
+.dropdown-default.dropdown-default--end > ul::before {
+  left: auto;
+  right: 10px;
+}
+.dropdown-default.active > ul {
+  animation: dropdown-display 0.4s cubic-bezier(0.73, 0.005, 0.22, 1);
+  display: block !important;
+}
+
+@keyframes dropdown-display {
+  0% {
+    opacity: 0;
+    transform: scale(0.98) translateY(-0.6em);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}