@veritree/ui 0.24.1 → 0.25.0-0

package/src/utils/images.js

@@ -3,42 +3,35 @@ export const handleImageResizing = (url, width) => {
   if (!url) {
     return '';
   }
-  
+
   let cdn;
-  
+
   try {
-    if (typeof url === 'object') {
-      cdn = url.cdn_url;
-    }
+    // new code
+    if (typeof url === 'string' && url.includes('cloudfront.net/')) {
+      cdn = url;
+    } else {
+      // old code
+      if (typeof url === 'object') {
+        cdn = url.cdn_url;
+      }
 
-    if (typeof url === 'string') {
-      cdn = JSON.parse(url).cdn_url;
+      if (typeof url === 'string') {
+        cdn = JSON.parse(url).cdn_url;
+      }
     }
 
     const base64String = cdn.split('net/');
     const firstPart = base64String[0];
+    const decodedString = JSON.parse(atob(base64String[1]));
 
-    // if atob is crossed and your editor says is not supported,
-    // don't worry, it seems to be about NodeJS and not about
-    // browsers.
-    //
-    // Details: https://developer.mozilla.org/en-US/docs/Web/API/atob
-      const decodedString = JSON.parse(atob(base64String[1]));
-
-    width
-      ? (decodedString.edits.resize.width = width)
-      : (decodedString.edits.resize.width = 450);
+    decodedString.edits.resize.width = width ?? 450;
 
-    // if btoa is crossed and your editor says is not supported,
-    // don't worry, it seems to be about NodeJS and not about
-    // browsers.
-    //
-    // Details: https://developer.mozilla.org/en-US/docs/Web/API/atob
     const encodedString = btoa(JSON.stringify(decodedString));
     const encodedUrl = `${firstPart}net/${encodedString}`;
 
-    return encodedUrl
-  } catch(error) {
+    return encodedUrl;
+  } catch (error) {
     console.error(`${error} in ${cdn}`);
   }
-};
+};

package/src/components/Input/VTInput.vue

@@ -1,82 +0,0 @@
-<template>
-  <input
-    :class="classes"
-    class="form-control"
-    :data-theme="theme"
-    :type="type"
-    :value="value"
-    v-on="listeners"
-  />
-</template>
-
-<script>
-export default {
-  name: 'VTInput',
-
-  props: {
-    lazy: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-    variant: {
-      type: [String, Object],
-      default: '',
-      validator(value) {
-        if (value === '' || typeof value === 'object') {
-          return true;
-        }
-
-        return ['success', 'warning', 'error'].includes(value);
-      },
-    },
-    value: {
-      type: [String, Number, Object, Array],
-      default: null,
-    },
-  },
-
-  computed: {
-    classes() {
-      const classes = {};
-
-      if (this.variant) {
-        classes[`form-control--${this.variant}`] = true;
-      }
-
-      return classes;
-    },
-
-    listeners() {
-      // `Object.assign` merges objects together to form a new object
-      return Object.assign(
-        {},
-        // We add all the listeners from the parent
-        this.$listeners,
-        // Then we can add custom listeners or override the
-        // behavior of some listeners.
-        {
-          // This ensures that the component works with v-model
-          input: (event) => {
-            if (this.lazy) return;
-            this.$emit('input', event.target.value);
-          },
-          blur: (event) => {
-            this.$emit('blur', event);
-          },
-        }
-      );
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputDate.vue

@@ -1,36 +0,0 @@
-<template>
-  <VTInput v-model="date" type="date" />
-</template>
-
-<script>
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputDate',
-
-  components: { VTInput },
-
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    date: {
-      get() {
-        return this.$date.format(this.value, 'YYYY-MM-DD');
-      },
-      set(newDate) {
-        this.$emit('input', newDate);
-      },
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputFile.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="flex items-stretch gap-2">
-    <VTInput
-      ref="input"
-      type="file"
-      :value="value"
-      :theme="theme"
-      v-bind="$attrs"
-      @change="onChange"
-    />
-    <VTButton :theme="theme" @click.stop="onButtonClick">Browse</VTButton>
-  </div>
-</template>
-
-<script>
-import VTButton from '../Button/VTButton.vue';
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputFile',
-
-  components: {
-    VTInput,
-    VTButton,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      value: null,
-    };
-  },
-
-  methods: {
-    onChange(event) {
-      this.value = this.$refs.input.$el.value;
-      this.$emit('change', event);
-    },
-
-    onButtonClick() {
-      this.$refs.input.$el.click();
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputUpload.vue

@@ -1,54 +0,0 @@
-<template>
-  <label
-    class="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dotted border-white p-4 text-center hover:border-fl-500 hover:bg-fd-500"
-    :class="{ 'border-fl-500 bg-fd-500': isDraggingOver }"
-    @drop.prevent="onDrop"
-    @dragover.prevent="onDragOver"
-    @dragleave.prevent="onDragLeave"
-  >
-    <IconImagePlaceholder class="mb-3" />
-    <span>Drop your images here, or click to browse</span>
-    <VTInput type="file" class="sr-only" v-bind="$attrs" @change="onChange" />
-  </label>
-</template>
-
-<script>
-import { IconImagePlaceholder } from '@veritree/icons';
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputFile',
-
-  components: {
-    VTInput,
-    IconImagePlaceholder,
-  },
-
-  inheritAttrs: false,
-
-  data() {
-    return {
-      isDraggingOver: false,
-    };
-  },
-
-  methods: {
-    onDrop(event) {
-      this.isDraggingOver = false;
-      this.$emit('drop', event);
-    },
-
-    onDragOver() {
-      this.isDraggingOver = true;
-    },
-
-    onDragLeave() {
-      this.isDraggingOver = false;
-    },
-
-    onChange(event) {
-      this.$emit('change', event);
-    },
-  },
-};
-</script>

package/src/components/Modal/VTModal.vue

@@ -1,69 +0,0 @@
-<template>
-  <transition
-    enter-active-class="duration-300 ease-out"
-    enter-class="transform opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-300 ease-in"
-    leave-class="opacity-100"
-    leave-to-class="transform opacity-0"
-    @after-enter="afterEnter"
-    @after-leave="afterLeave"
-  >
-    <div
-      v-if="visible"
-      class="bg-fd-700/75 fixed inset-0 z-50 flex flex-col justify-center"
-      tabindex="-1"
-      @keyup.esc="close"
-      @click="close"
-    >
-      <div
-        class="relative mx-auto flex max-w-lg flex-col justify-center rounded bg-white"
-        @click.stop
-      >
-        <div class="absolute right-4 top-4">
-          <VTButton variant="icon" @click.prevent="close"
-            ><IconClose class="h-4 w-4"
-          /></VTButton>
-        </div>
-        <slot></slot>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { IconClose } from '@veritree/icons';
-import VTButton from '../Button/VTButton.vue';
-
-export default {
-  name: 'VTModal',
-
-  components: { IconClose, VTButton },
-
-  model: {
-    prop: 'visible',
-  },
-
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  methods: {
-    close() {
-      this.$emit('input', false);
-    },
-
-    afterEnter() {
-      this.$emit('shown');
-      this.$nextTick(() => this.$el.focus());
-    },
-
-    afterLeave() {
-      this.$emit('hidden');
-    },
-  },
-};
-</script>

package/src/utils/genId.js

@@ -1,13 +0,0 @@
-// Generate id
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
-let gen = null;
-
-function* idMaker() {
-  let index = 0;
-  while (true) yield index++;
-}
-
-export const genId = () => {
-  if (!gen) gen = idMaker();
-  return gen.next().value;
-};