@veritree/ui 0.12.2 → 0.15.0

package/.prettierignore

@@ -0,0 +1,96 @@
+###
+# Place your Prettier ignore content here
+
+###
+# .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506
+
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "singleQuote": true
+}

package/index.js

@@ -1,6 +1,8 @@
+import VTAlert from "./src/components/Alert/VTAlert.vue";
 import VTAvatar from "./src/components/Avatar/VTAvatar.vue";
 import VTAvatarImage from "./src/components/Avatar/VTAvatarImage.vue";
 import VTAvatarText from "./src/components/Avatar/VTAvatarText.vue";
+import VTButton from "./src/components/Button/VTButton.vue";
 import VTImage from "./src/components/Image/VTImage.vue";
 import VTImageCounter from "./src/components/Image/VTImageCounter.vue";
 import VTImageHover from "./src/components/Image/VTImageHover.vue";
@@ -26,18 +28,12 @@ import VTListboxLabel from "./src/components/Listbox/VTListboxLabel.vue";
 import VTListboxList from "./src/components/Listbox/VTListboxList.vue";
 import VTListboxSearch from "./src/components/Listbox/VTListboxSearch.vue";
 import VTListboxTrigger from "./src/components/Listbox/VTListboxTrigger.vue";
-
-import VTAlert from "./src/components/Alerts/VTAlert.vue";
-
 import VTSpinner from "./src/components/Spinner/VTSpinner.vue";
-
-import VTButton from "./src/components/Button/VTButton.vue";
-// import VTButtonSave from './src/components/Button/VTButtonSave.vue';
-
 import VTInput from "./src/components/Input/VTInput.vue";
 import VTInputDate from "./src/components/Input/VTInputDate.vue";
 import VTInputFile from "./src/components/Input/VTInputFile.vue";
 import VTInputUpload from "./src/components/Input/VTInputUpload.vue";
+import VTProgressBar from "./src/components/ProgressBar/VTProgressBar.vue";
 
 import VTTextarea from "./src/components/Textarea/VTTextarea.vue";
 
@@ -104,11 +100,11 @@ export {
   VTListboxSearch,
   VTListboxTrigger,
   VTButton,
-  // VTButtonSave,
   VTInput,
   VTInputDate,
   VTInputFile,
   VTInputUpload,
+  VTProgressBar,
   VTTextarea,
   VTModal,
   VTAccordion,

package/nuxt.js

@@ -1,13 +1,17 @@
 import { join } from 'path';
 
 const components = [
+  'src/components/Alert',
   'src/components/Avatar',
+  'src/components/Button',
   'src/components/Drawer',
   'src/components/Dialog',
   'src/components/DropdownMenu',
   'src/components/Form',
   'src/components/Listbox',
   'src/components/Image',
+  'src/components/Popover',
+  'src/components/ProgressBar',
   'src/components/Tabs',
 ]
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.12.2",
+  "version": "0.15.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,6 +11,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@linusborg/vue-simple-portal": "^0.1.5",
     "@veritree/icons": "^0.19.0"
-  }
+  },
+  "devDependencies": {}
 }

package/src/components/Alert/VTAlert.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    v-if="show"
+    :class="[
+      // default styles
+      headless
+        ? 'alert'
+        : 'flex items-start gap-3 rounded border border-solid p-3',
+      // variant styles
+      headless
+        ? `alert--${variant}`
+        : isSuccess
+        ? 'border-success-300 bg-success-200 text-success-700'
+        : isError
+        ? 'border-error-300 bg-error-200 text-error-700'
+        : isWarning
+        ? 'border-warning-300 bg-warning-200 text-warning-700'
+        : null,
+    ]"
+    role="alert"
+  >
+    <slot></slot>
+    <button
+      v-if="dismissable"
+      :class="[
+        !headless
+          ? 'ml-auto mt-1 h-4 w-4 shrink-0 text-current'
+          : 'alert-close',
+      ]"
+      @click="hide"
+    >
+      <IconClose />
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTAlert',
+
+  props: {
+    variant: {
+      type: String,
+      default: 'success',
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dismissable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      show: true,
+    };
+  },
+
+  computed: {
+    isSuccess() {
+      return this.variant === 'success';
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+
+    isWarning() {
+      return this.variant === 'warning';
+    },
+  },
+
+  methods: {
+    hide() {
+      this.$emit('dismiss');
+      this.show = false;
+    },
+  },
+};
+</script>

package/src/components/Button/VTButton.vue

@@ -1,85 +1,125 @@
 <template>
   <component
     :is="tag"
-    :class="classes"
-    :data-theme="theme"
     :to="to"
-    class="Button"
-    type="button"
+    :type="type"
+    :disabled="isDisabled"
+    :class="[
+      // default styles
+      headless
+        ? 'button'
+        : isIcon
+        ? 'inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
+        : 'relative inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
+      // variant styles
+      headless
+        ? `button--${variant}`
+        : isPrimary
+        ? 'border-transparent bg-secondary-400 text-white hover:bg-secondary-500 active:bg-secondary-600 disabled:bg-gray-200 disabled:text-gray-400'
+        : isSecondary
+        ? 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
+        : isTertiary
+        ? 'border-transparent text-secondary-400 hover:text-secondary-500 active:text-secondary-500 disabled:text-gray-400'
+        : isIcon
+        ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
+        : null,
+      // sizes styles
+      headless
+        ? `button--${size}`
+        : isLarge
+        ? isIcon
+          ? 'h-8 w-8'
+          : 'h-10'
+        : isSmall
+        ? isIcon
+          ? 'h-6 w-6 p-1'
+          : 'h-8'
+        : null,
+    ]"
     v-on="$listeners"
   >
-    <slot></slot>
+    <VTSpinner v-if="busy" class="absolute inset-0 m-auto" />
+    <span
+      :class="[
+        headless ? null : 'inline-flex items-center gap-2 self-center mx-auto',
+        headless && busy ? 'button--busy' : busy ? 'invisible' : null,
+      ]"
+    >
+      <slot></slot>
+    </span>
   </component>
 </template>
 
 <script>
+import VTSpinner from '../Spinner/VTSpinner.vue';
+
 export default {
   name: 'VTButton',
 
+  components: { VTSpinner },
+
   props: {
     variant: {
       type: String,
       default: 'primary',
-      validator(value) {
-        return [
-          'primary',
-          'secondary',
-          'tertiary',
-          'danger',
-          'custom',
-          'icon',
-        ].includes(value);
-      },
     },
     size: {
       type: String,
       default: 'large',
-      validator(value) {
-        return ['large', 'small'].includes(value);
-      },
     },
-    pill: {
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+    headless: {
       type: Boolean,
       default: false,
     },
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
+    busy: {
+      type: Boolean,
+      default: false,
     },
-    to: {
-      type: [String, Object],
-      default: null,
+    disabled: {
+      type: Boolean,
+      default: false,
     },
   },
 
   computed: {
-    classes() {
-      const classes = {};
+    isPrimary() {
+      return this.variant === 'primary';
+    },
+
+    isSecondary() {
+      return this.variant === 'secondary';
+    },
 
-      if (this.variant) {
-        classes[`Button--${this.variant}`] = true;
-      }
+    isTertiary() {
+      return this.variant === 'tertiary';
+    },
+
+    isIcon() {
+      return this.variant === 'icon';
+    },
 
-      if (this.size) {
-        classes[`Button--${this.size}`] = true;
-      }
+    isLarge() {
+      return this.size === 'large';
+    },
 
-      if (this.pill) {
-        classes['Button--pill'] = true;
-      }
+    isSmall() {
+      return this.size === 'small';
+    },
 
-      return classes;
+    isDisabled() {
+      return this.disabled || this.busy;
     },
 
     tag() {
-      if (this.to) {
-        return 'NuxtLink';
-      }
+      return this.to ? 'NuxtLink' : 'button';
+    },
 
-      return 'button';
+    type() {
+      return this.to ? null : 'button';
     },
   },
 };

package/src/components/Dialog/VTDialog.vue

@@ -1,23 +1,30 @@
 <template>
-  <div
-    v-if="visible"
-    :id="id"
-    :class="{
-      Dialog: headless,
-      'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
-    }"
-    aria-modal="true"
-    @click="onClick"
-  >
-    <slot></slot>
-  </div>
+  <Portal>
+    <div
+      v-if="visible"
+      :id="id"
+      :class="{
+        Dialog: headless,
+        'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
+      }"
+      aria-modal="true"
+      @click="onClick"
+    >
+      <slot></slot>
+    </div>
+  </Portal>
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { Portal } from '@linusborg/vue-simple-portal';
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTDialog",
+  name: 'VTDialog',
+
+  components: {
+    Portal,
+  },
 
   provide() {
     return {
@@ -56,7 +63,7 @@ export default {
   },
 
   model: {
-    prop: "visible",
+    prop: 'visible',
   },
 
   props: {
@@ -115,8 +122,8 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit("input", false);
-        this.$emit("hidden");
+        this.$emit('input', false);
+        this.$emit('hidden');
       });
     },
 

package/src/components/ProgressBar/VTProgressBar.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    :class="[
+      headless
+        ? 'progress-bar'
+        : 'relative min-h-[10px] w-full overflow-hidden rounded-full bg-gray-200',
+    ]"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    :aria-valuenow="value"
+    :aria-label="label"
+  >
+    <div
+      :class="[
+        headless
+          ? 'progress-bar__indicator'
+          : 'absolute left-0 h-full bg-secondary-300',
+      ]"
+      :style="{ width: `${value}%` }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: null,
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+};
+</script>

package/src/components/Alerts/VTAlert.vue

@@ -1,72 +0,0 @@
-<template>
-  <div v-if="isVisible" class="Alert" :class="classes" role="alert">
-    <slot></slot>
-    <button v-if="dismissable" class="Alert-close" @click="dismiss">
-      <IconClose />
-    </button>
-  </div>
-</template>
-
-<script>
-import { IconClose } from '@veritree/icons';
-
-export default {
-  name: 'VTAlert',
-
-  components: { IconClose },
-
-  model: {
-    prop: 'value',
-  },
-
-  props: {
-    dismissable: {
-      type: Boolean,
-      default: false,
-    },
-    variant: {
-      type: String,
-      default: '',
-      validate(value) {
-        if (value === '') return true;
-        return ['success', 'warning', 'error'].includes(value);
-      },
-    },
-    value: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      destroy: false,
-    };
-  },
-
-  computed: {
-    classes() {
-      return {
-        [`Alert--${this.variant}`]: this.variant,
-      };
-    },
-
-    isVisible() {
-      return this.value && !this.destroy;
-    },
-  },
-
-  watch: {
-    isVisible(newVal) {
-      if (newVal === false) this.destroy = false;
-    },
-  },
-
-  methods: {
-    dismiss() {
-      this.destroy = true;
-      this.$emit('input', false);
-    },
-  },
-};
-</script>

package/src/components/Button/VTButtonSave.vue

@@ -1,27 +0,0 @@
-<template>
-  <VTButton
-    class="relative"
-    :disabled="saving"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <VTSpinner v-if="saving" class="absolute m-auto" />
-    <span :class="{ invisible: saving }"><slot></slot></span>
-  </VTButton>
-</template>
-
-<script>
-import VTButton from '../Button/VTButton.vue';
-import VTSpinner from '../Spinner/VTSpinner.vue';
-
-export default {
-  components: { VTButton, VTSpinner },
-
-  props: {
-    saving: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>