@designcrowd/fe-shared-lib 1.0.0-test-publish

package/src/atoms/components/Select/selectMixin.js

@@ -0,0 +1,325 @@
+function isEmpty(opt) {
+  if (opt === 0) return false;
+  if (Array.isArray(opt) && opt.length === 0) return true;
+  return !opt;
+}
+
+function not(fun) {
+  return (...params) => !fun(...params);
+}
+
+function includes(str, query) {
+  let finalStr;
+  switch (str) {
+    case undefined:
+      finalStr = 'undefined';
+      break;
+    case null:
+      finalStr = 'null';
+      break;
+    case false:
+      finalStr = 'false';
+      break;
+    default:
+      finalStr = str;
+  }
+  const text = finalStr.toString().toLowerCase();
+  return text.indexOf(query.trim()) !== -1;
+}
+
+function filterOptions(options, search, label, customLabel) {
+  return options.filter((option) => includes(customLabel(option, label), search));
+}
+
+export default {
+  data() {
+    return {
+      search: '',
+      isOpen: false,
+      preferredOpenDirection: 'below',
+      optimizedHeight: this.maxHeight,
+    };
+  },
+  props: {
+    isInternalSearch: {
+      type: Boolean,
+      default: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    modelValue: {
+      type: [String, Object],
+      default: null,
+    },
+    trackBy: {
+      type: String,
+      default: null,
+    },
+    label: {
+      type: String,
+    },
+    isSearchable: {
+      type: Boolean,
+      default: true,
+    },
+    shouldHideSelected: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: 'Select option',
+    },
+    shouldAllowEmpty: {
+      type: Boolean,
+      default: true,
+    },
+    shouldResetAfter: {
+      type: Boolean,
+      default: false,
+    },
+    shouldCloseOnSelect: {
+      type: Boolean,
+      default: true,
+    },
+    customLabel: {
+      type: Function,
+      default(option, label) {
+        if (isEmpty(option)) return '';
+        return label ? option[label] : option;
+      },
+    },
+    shouldAllowCustom: {
+      type: Boolean,
+      default: false,
+    },
+    customPlaceholder: {
+      type: String,
+      default: 'Press enter to create option',
+    },
+    customPosition: {
+      type: String,
+      default: 'top', // ['top', 'bottom']
+    },
+    id: {
+      default: null,
+    },
+    optionsLimit: {
+      type: Number,
+      default: 1000,
+    },
+    shouldPreserveSearch: {
+      type: Boolean,
+      default: false,
+    },
+    shouldPreselectFirst: {
+      type: Boolean,
+      default: false,
+    },
+    shouldPreventAutofocus: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+    if (this.shouldPreselectFirst && !this.modelValue && this.options.length) {
+      this.select(this.filteredOptions[0]);
+    }
+  },
+  computed: {
+    filteredOptions() {
+      const search = this.search || '';
+      const normalizedSearch = search.toLowerCase().trim();
+
+      let options = this.options.concat();
+
+      if (this.isInternalSearch) {
+        options = filterOptions(options, normalizedSearch, this.label, this.customLabel);
+      }
+
+      options = this.shouldHideSelected ? options.filter(not(this.isOptionSelected)) : options;
+
+      if (this.shouldAllowCustom && normalizedSearch.length && !this.isExistingOption(normalizedSearch)) {
+        if (this.customPosition === 'bottom') {
+          options.push({ isCustom: true, label: search });
+        } else {
+          options.unshift({ isCustom: true, label: search });
+        }
+      }
+
+      return options.slice(0, this.optionsLimit);
+    },
+    valueKey() {
+      if (!this.modelValue) {
+        return null;
+      }
+      return this.trackBy ? this.modelValue[this.trackBy] : this.modelValue;
+    },
+    optionKeys() {
+      return this.options.map((element) => this.customLabel(element, this.label).toString().toLowerCase());
+    },
+  },
+  watch: {
+    search() {
+      this.$emit('search-change', this.search, this.id);
+    },
+  },
+  methods: {
+    updateSearch(query) {
+      this.search = query;
+    },
+    isExistingOption(query) {
+      return !this.options ? false : this.optionKeys.indexOf(query) > -1;
+    },
+    getOptionKey(option) {
+      return this.trackBy ? option[this.trackBy] : option;
+    },
+    isOptionSelected(option) {
+      return this.valueKey === this.getOptionKey(option);
+    },
+    getOptionLabel(option) {
+      if (isEmpty(option)) {
+        return '';
+      }
+
+      if (option.isCustom) {
+        return option.label;
+      }
+
+      const label = this.customLabel(option, this.label);
+
+      if (isEmpty(label)) {
+        return '';
+      }
+
+      return label;
+    },
+    select(option, key) {
+      if (this.disabled || option.$isDisabled) {
+        return;
+      }
+
+      if (key === 'Tab' && !this.pointerDirty) {
+        return;
+      }
+
+      if (option.isCustom) {
+        this.$emit('custom', option.label, this.id);
+        this.search = '';
+
+        if (this.shouldCloseOnSelect) {
+          this.deactivate();
+        }
+      } else {
+        const isSelected = this.isOptionSelected(option);
+
+        if (isSelected) {
+          if (key !== 'Tab') {
+            this.removeElement(option);
+          }
+          return;
+        }
+
+        this.$emit('update:modelValue', option, this.id);
+      }
+
+      if (this.shouldCloseOnSelect) this.deactivate();
+    },
+    removeElement(option, shouldClose = true) {
+      if (this.disabled || option.$isDisabled) {
+        return;
+      }
+
+      if (!this.shouldAllowEmpty && !!this.modelValue) {
+        this.deactivate();
+        return;
+      }
+
+      this.$emit('update:modelValue', null, this.id);
+      this.$emit('remove', option, this.id);
+
+      if (this.shouldCloseOnSelect && shouldClose) {
+        this.deactivate();
+      }
+    },
+    async activate() {
+      if (this.isOpen || this.disabled) return;
+
+      this.adjustPosition();
+
+      this.isOpen = true;
+
+      if (this.isSearchable) {
+        if (!this.shouldPreserveSearch) {
+          this.search = '';
+        }
+        if (!this.shouldPreventAutofocus) {
+          await this.$nextTick(() => this.$refs.search && this.$refs.search.focus());
+        }
+      } else if (!this.shouldPreventAutofocus) {
+        if (typeof this.$el !== 'undefined') this.$el.focus();
+      }
+
+      this.$emit('open', this.id);
+    },
+    deactivate() {
+      if (!this.isOpen) {
+        return;
+      }
+
+      this.isOpen = false;
+
+      if (this.isSearchable) {
+        if (this.isSearchEmpty()) {
+          this.$refs.search.blur();
+        }
+      } else if (typeof this.$el !== 'undefined') {
+        this.$el.blur();
+      }
+      if (!this.shouldPreserveSearch) {
+        this.search = '';
+      }
+      this.$emit('close', this.modelValue, this.id);
+    },
+    toggle() {
+      if (this.isOpen) {
+        this.deactivate();
+      } else {
+        this.activate();
+      }
+    },
+    isSearchEmpty() {
+      return this.$refs.search !== null && typeof this.$refs.search !== 'undefined';
+    },
+    shouldOpenBelow() {
+      const spaceAbove = this.$el.getBoundingClientRect().top;
+      const spaceBelow = window.innerHeight - this.$el.getBoundingClientRect().bottom;
+      const hasEnoughSpaceBelow = spaceBelow > this.maxHeight;
+
+      return (
+        hasEnoughSpaceBelow ||
+        spaceBelow > spaceAbove ||
+        this.openDirection === 'below' ||
+        this.openDirection === 'bottom'
+      );
+    },
+    adjustPosition() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
+      const spaceAbove = this.$el.getBoundingClientRect().top;
+      const spaceBelow = window.innerHeight - this.$el.getBoundingClientRect().bottom;
+
+      if (this.shouldOpenBelow()) {
+        this.preferredOpenDirection = 'below';
+        this.optimizedHeight = Math.min(spaceBelow - 40, this.maxHeight);
+      } else {
+        this.preferredOpenDirection = 'above';
+        this.optimizedHeight = Math.min(spaceAbove - 40, this.maxHeight);
+      }
+    },
+  },
+};

package/src/atoms/components/Slider/Slider.stories.js

@@ -0,0 +1,127 @@
+import Slider from './Slider.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Slider',
+  component: Slider,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const SliderFontSize = () => {
+  return {
+    components: {
+      Slider,
+    },
+    template: `
+        <Slider :min="12" :max="128"  :model-value="16"/>
+      `,
+  };
+};
+export const SliderLineheight = () => {
+  return {
+    components: {
+      Slider,
+    },
+    template: `
+        <Slider :min="1" :max="2.5" :step="0.1" :model-value="1.2"/>
+      `,
+  };
+};
+
+export const SliderOpacity = () => {
+  return {
+    components: {
+      Slider,
+    },
+    template: `
+        <Slider :min="0" :max="100" suffix="%" />
+      `,
+  };
+};
+export const SliderWithLabel = () => {
+  return {
+    components: {
+      Slider,
+    },
+    template: `
+        <Slider :min="0" :max="100" label="Label" :transparent="true" :model-value="50" />
+      `,
+  };
+};
+
+export const SliderWithSwappingTargetvalue = () => {
+  return {
+    components: {
+      Slider,
+      Button,
+    },
+    data() {
+      return {
+        obj1: {
+          value: 20,
+        },
+        obj2: {
+          value: 30,
+        },
+        currentObj: null,
+      };
+    },
+    mounted() {
+      this.currentObj = this.obj1;
+    },
+    template: `
+        <div class="tw-flex tw-gap-4">
+          <Button variant="secondary" label="Obj1" @click="buttonClick(obj1)"/>
+          <Button variant="secondary" label="Obj2" @click="buttonClick(obj2)"/>
+        </div>
+        <div class="tw-w-96">
+          <Slider :min="0" :max="100" label="Label" :transparent="true" :model-value="currentObj.value" />
+        </div>
+      `,
+    methods: {
+      buttonClick(obj) {
+        this.currentObj = obj;
+      },
+    },
+  };
+};
+
+export const SliderWithMouseDownAndUp = () => {
+  return {
+    components: {
+      Slider,
+    },
+    template: `
+        <div class="tw-flex-col tw-gap-2" >
+          <p>{{ isInteracting ? 'Interacting' : 'Not interacting' }}</p>
+          <Slider :min="0" :max="100" :model-value="50" :on-slider-mouse-down="onMouseDown" :on-slider-mouse-up="onMouseUp" />
+        </div>
+      `,
+    data() {
+      return {
+        isInteracting: false,
+      };
+    },
+    methods: {
+      onMouseDown() {
+        this.isInteracting = true;
+      },
+      onMouseUp() {
+        this.isInteracting = false;
+      },
+    },
+  };
+};
+
+export const SliderWithNegativeMinValue = () => {
+  return {
+    components: {
+      Slider,
+    },
+    template: `
+        <Slider :min="-100" :max="100"  :model-value="0"/>
+      `,
+  };
+};