vueless 0.0.2 → 0.0.4

package/index.js

@@ -1,151 +0,0 @@
-/* Buttons & Links */
-import UButton from "./ui.button";
-import UButtonGroup from "./ui.button-group";
-import UButtonGroupItem from "./ui.button-group-item";
-import UButtonExpand from "./ui.button-expand";
-import UButtonExpandItem from "./ui.button-expand-item";
-import ULink from "./ui.button-link";
-
-/* Dropdowns */
-import UDropdownButton from "./ui.dropdown-button";
-import UDropdownTag from "./ui.dropdown-tag";
-import UDropdownLink from "./ui.dropdown-link";
-import UDropdownItem from "./ui.dropdown-item";
-
-/* Form Inputs & Controls */
-import UInput from "./ui.form-input";
-import UInputFile from "./ui.form-input-file";
-import UInputMoney from "./ui.form-input-money";
-import UInputSearch from "./ui.form-input-search";
-import UInputNumber from "./ui.form-input-number";
-import UInputRating from "./ui.form-input-rating";
-import UTextarea from "./ui.form-textarea";
-import USelect from "./ui.form-select";
-import UMultiselect from "./ui.form-select-multi";
-import UCheckbox from "./ui.form-checkbox";
-import UCheckboxGroup from "./ui.form-checkbox-group";
-import UCheckboxMultiState from "./ui.form-checkbox-multi-state";
-import USwitch from "./ui.form-switch";
-import URadio from "./ui.form-radio";
-import URadioCard from "./ui.form-radio-card";
-import URadioGroup from "./ui.form-radio-group";
-import UDatePicker from "./ui.form-date-picker";
-import UDatePickerRange from "./ui.form-date-picker-range";
-
-/* Text & Content */
-import UHeader from "./ui.text-header";
-import UText from "./ui.text-block";
-import UAlert from "./ui.text-alert";
-import UMoney from "./ui.text-money";
-import UFile from "./ui.text-file";
-import UFiles from "./ui.text-files";
-import UField from "./ui.text-field";
-import UEmpty from "./ui.text-empty";
-import UTag from "./ui.text-tag";
-
-/* Containers */
-import UDivider from "./ui.container-divider";
-import URow from "./ui.container-row";
-import UGroup from "./ui.container-group";
-import UGroups from "./ui.container-groups";
-import UAccordion from "./ui.container-accordion";
-import UCard from "./ui.container-card";
-import UModal from "./ui.container-modal";
-import UModalConfirm from "./ui.container-modal-confirm";
-import UPage from "./ui.container-page";
-
-/* Images and Icons */
-import UIcon from "./ui.image-icon";
-import ULogo from "./ui.image-logo";
-import UAvatar from "./ui.image-avatar";
-
-/* Data */
-import UTable from "./ui.data-table";
-import UDataList from "./ui.data-list";
-
-/* Navigation */
-import UTab from "./ui.navigation-tab";
-import UTabs from "./ui.navigation-tabs";
-import UStepper from "./ui.navigation-stepper";
-import UPagination from "./ui.navigation-pagination";
-
-/* Other */
-import UDot from "./ui.other-dot";
-import ULoader from "./ui.other-loader";
-
-export {
-  /* Buttons & Links */
-  UButton,
-  UButtonGroup,
-  UButtonGroupItem,
-  UButtonExpand,
-  UButtonExpandItem,
-  ULink,
-
-  /* Dropdowns */
-  UDropdownButton,
-  UDropdownTag,
-  UDropdownLink,
-  UDropdownItem,
-
-  /* Form Inputs & Controls */
-  UInput,
-  UInputFile,
-  UInputMoney,
-  UInputSearch,
-  UInputNumber,
-  UInputRating,
-  UTextarea,
-  USelect,
-  UMultiselect,
-  UCheckbox,
-  UCheckboxGroup,
-  UCheckboxMultiState,
-  USwitch,
-  URadio,
-  URadioCard,
-  URadioGroup,
-  UDatePicker,
-  UDatePickerRange,
-
-  /* Text & Content */
-  UHeader,
-  UText,
-  UAlert,
-  UMoney,
-  UFile,
-  UFiles,
-  UField,
-  UEmpty,
-  UTag,
-
-  /* Containers */
-  UDivider,
-  URow,
-  UGroup,
-  UGroups,
-  UAccordion,
-  UCard,
-  UModal,
-  UModalConfirm,
-  UPage,
-
-  /* Images and Icons */
-  UIcon,
-  ULogo,
-  UAvatar,
-
-  /* Data */
-  UTable,
-  UDataList,
-
-  /* Navigation */
-  UTab,
-  UTabs,
-  UStepper,
-  UPagination,
-
-  /* Other */
-  UDot,
-  ULoader,
-};

package/layout-ui.loader-top/components/TopProgress.vue

@@ -1,277 +0,0 @@
-<template>
-  <transition :css="false" @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
-    <div v-if="show" class="top-progress" :style="barStyle">
-      <div class="peg" :style="pegStyle"></div>
-    </div>
-  </transition>
-</template>
-
-<script>
-function clamp(n, min, max) {
-  if (n < min) {
-    return min;
-  }
-
-  if (n > max) {
-    return max;
-  }
-
-  return n;
-}
-
-let queue = (() => {
-  let pending = [];
-
-  function next() {
-    let fn = pending.shift();
-
-    if (fn) {
-      fn(next);
-    }
-  }
-
-  return (fn) => {
-    pending.push(fn);
-
-    if (pending.length === 1) {
-      next();
-    }
-  };
-})();
-
-export default {
-  name: "VueTopprogress",
-
-  props: {
-    speed: {
-      type: Number,
-      default: 350,
-    },
-
-    color: {
-      type: String,
-      default: "#29d",
-    },
-
-    colorShadow: {
-      type: String,
-      default: "",
-    },
-
-    errorColor: {
-      type: String,
-      default: "#f44336",
-    },
-
-    trickle: {
-      type: Boolean,
-      default: true,
-    },
-
-    trickleSpeed: {
-      type: Number,
-      default: 250,
-    },
-
-    easing: {
-      type: String,
-      default: "linear",
-    },
-
-    height: {
-      type: Number,
-      default: 3,
-    },
-
-    minimum: {
-      type: Number,
-      default: 0.8,
-    },
-
-    maximum: {
-      type: Number,
-      default: 97.5,
-    },
-
-    zIndex: {
-      type: Number,
-      default: 9999,
-    },
-  },
-
-  data() {
-    return {
-      error: false,
-      show: false,
-      progress: 0,
-      opacity: 1,
-      status: null,
-      isPaused: false,
-    };
-  },
-
-  computed: {
-    progressColor() {
-      return this.error ? this.errorColor : this.color;
-    },
-
-    isStarted() {
-      return typeof this.status === "number";
-    },
-
-    boxShadow() {
-      return this.colorShadow || this.progressColor;
-    },
-
-    barStyle() {
-      return {
-        position: "fixed",
-        top: "0",
-        left: "0",
-        right: "0",
-        width: `${this.progress}%`,
-        height: `${this.height}px`,
-        backgroundColor: this.progressColor,
-        transition: `all ${this.speed}ms ${this.easing}`,
-        opacity: `${this.opacity}`,
-        zIndex: `${this.zIndex}`,
-      };
-    },
-
-    pegStyle() {
-      return {
-        display: "block",
-        position: "absolute",
-        right: "0",
-        width: "100px",
-        height: "100%",
-        opacity: this.progress ? "1" : "0",
-        boxShadow: `0 0 10px ${this.boxShadow}, 0 0 5px ${this.boxShadow}`,
-        transform: "rotate(3deg) translate(0px, -4px)",
-      };
-    },
-  },
-
-  methods: {
-    beforeEnter() {
-      this.opacity = 0;
-      this.progress = 0;
-      this.width = 0;
-    },
-
-    enter(el, done) {
-      this.opacity = 1;
-      done();
-    },
-
-    afterEnter() {
-      this._runStart();
-    },
-
-    _work() {
-      setTimeout(() => {
-        if (!this.isStarted || this.isPaused) {
-          return;
-        }
-
-        this.increase();
-        this._work();
-      }, this.trickleSpeed);
-    },
-
-    _runStart() {
-      this.status = this.progress === 100 ? null : this.progress;
-
-      if (this.trickle) {
-        this._work();
-      }
-    },
-
-    start() {
-      this.isPaused = false;
-
-      if (this.show) {
-        this._runStart();
-      } else {
-        this.show = true;
-      }
-    },
-
-    set(amount) {
-      this.isPaused = false;
-
-      let o;
-
-      if (this.isStarted) {
-        o = amount < this.progress ? clamp(amount, 0, 100) : clamp(amount, this.minimum, 100);
-      } else {
-        o = 0;
-      }
-
-      this.status = o === 100 ? null : o;
-
-      queue((next) => {
-        this.progress = o;
-
-        if (o === 100) {
-          setTimeout(() => {
-            this.opacity = 0;
-            setTimeout(() => {
-              this.show = false;
-              this.error = false;
-              next();
-            }, this.speed);
-          }, this.speed);
-        } else {
-          setTimeout(next, this.speed);
-        }
-      });
-    },
-
-    increase(amount) {
-      let o = this.progress;
-
-      if (o < 100 && typeof amount !== "number") {
-        if (o >= 0 && o < 25) {
-          amount = Math.random() * 3 + 3;
-        } else if (o >= 25 && o < 50) {
-          amount = Math.random() * 3;
-        } else if (o >= 50 && o < 85) {
-          amount = Math.random() * 2;
-        } else if (o >= 85 && o < 99) {
-          amount = 0.5;
-        } else {
-          amount = 0;
-        }
-      }
-
-      this.set(clamp(o + amount, 0, this.maximum));
-    },
-
-    decrease(amount) {
-      if (this.progress === 0) {
-        return;
-      }
-
-      this.increase(-amount);
-    },
-
-    done() {
-      this.set(100);
-    },
-
-    getProgress() {
-      return this.status ? this.progress : 0;
-    },
-
-    pause() {
-      this.isPaused = true;
-    },
-
-    fail() {
-      this.error = true;
-      this.done();
-    },
-  },
-};
-</script>

package/layout-ui.notify/index.stories.js

@@ -1,102 +0,0 @@
-import NotifyServiceDefault from "vueless/service.notify";
-
-import UNotify from "vueless/layout-ui.notify";
-import UButton from "vueless/ui.button";
-
-import { getArgTypes } from "vueless/service.storybook";
-
-const NotifyService = new NotifyServiceDefault();
-
-export default {
-  title: "Other / Notify",
-  component: UNotify,
-  args: {
-    type: "success",
-    code: "code",
-    title: "",
-    text: "",
-    duration: "short",
-    ignoreDuplicates: false,
-  },
-  argTypes: {
-    ...getArgTypes(UNotify.name),
-    type: {
-      description: "The type of notify.",
-      defaultValue: { summary: "success" },
-      options: ["success", "warning", "error"],
-      control: {
-        type: "radio",
-      },
-    },
-    code: {
-      description:
-        "Unique translation code, for ex. `categoryCreated`, " +
-        "which will be used in i18n translation path, for ex. `UNotify.success.categoryCreated`.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    title: {
-      description: "Notify title.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    text: {
-      description: "Notify text (description).",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    duration: {
-      description: "The notify visibility duration.",
-      defaultValue: { summary: "short" },
-      options: ["short", "medium", "long", "permanent"], //4000, 8000, 12000, 300000
-      control: {
-        type: "radio",
-      },
-    },
-    ignoreDuplicates: {
-      description: "Show only 1 notify at once.",
-      defaultValue: { summary: false },
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UNotify, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div>
-      <UNotify v-bind="args"/>
-
-      <UButton text="show notify" @click="onClick"/>
-    </div>
- `,
-
-  methods: {
-    onClick() {
-      const settings = {
-        type: args.type,
-        code: args.code,
-        title: args.title,
-        text: args.text,
-        duration: args.duration,
-        ignoreDuplicates: args.ignoreDuplicates,
-      };
-
-      NotifyService.notify(settings);
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/layout-ui.viewport/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <slot :breakpoint="breakpoint" />
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "UViewport",
-
-  data() {
-    return {
-      windowWidth: 0,
-      breakpoint: "",
-    };
-  },
-
-  watch: {
-    windowWidth: {
-      immediate: true,
-      handler: "setBreakpoint",
-    },
-  },
-
-  mounted() {
-    this.setWindowWidth();
-    this.setListener();
-  },
-
-  methods: {
-    ...mapMutations("breakpoint", ["SET_BREAKPOINT"]),
-
-    setWindowWidth() {
-      this.windowWidth = window.innerWidth;
-    },
-
-    setListener() {
-      let timeout;
-
-      window.addEventListener(
-        "resize",
-        () => {
-          if (timeout) {
-            window.cancelAnimationFrame(timeout);
-          }
-
-          timeout = window.requestAnimationFrame(() => {
-            this.setWindowWidth();
-          });
-        },
-        { passive: true },
-      );
-    },
-
-    setBreakpoint(windowWidth) {
-      if (!windowWidth) return;
-
-      this.breakpoint = "xs";
-
-      if (windowWidth >= 640 && windowWidth < 768) {
-        this.breakpoint = "sm";
-      } else if (windowWidth >= 768 && windowWidth < 1024) {
-        this.breakpoint = "md";
-      } else if (windowWidth >= 1024 && windowWidth < 1280) {
-        this.breakpoint = "lg";
-      } else if (windowWidth >= 1280 && windowWidth < 1536) {
-        this.breakpoint = "xl";
-      } else if (windowWidth >= 1536) {
-        this.breakpoint = "2xl";
-      }
-
-      this.SET_BREAKPOINT(this.breakpoint);
-    },
-  },
-};
-</script>