@kokoccc/vuetify 1.0.1

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@kokoccc/vuetify",
+  "description": "Vue Material Component Framework",
+  "version": "1.0.1",
+  "author": {
+    "name": "John Leider",
+    "email": "john@vuetifyjs.com"
+  },
+  "license": "MIT",
+  "homepage": "https://vuetifyjs.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuetifyjs/vuetify.git",
+    "directory": "packages/vuetify"
+  },
+  "keywords": [
+    "vuetify",
+    "ui framework",
+    "component framework",
+    "ui library",
+    "component library",
+    "material components",
+    "vue framework"
+  ],
+  "bugs": {
+    "url": "https://issues.vuetifyjs.com"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/johnleider"
+  },
+  "main": "dist/vuetify.js",
+  "module": "dist/vuetify.js",
+  "jsdelivr": "dist/vuetify.js",
+  "unpkg": "dist/vuetify.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "src/",
+    "dist/",
+    "lib/",
+    "es5/",
+    "types/",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "watch": "cross-env TARGET=development webpack --config build/config.js --progress --hide-modules --watch",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js --hot",
+    "build": "concurrently \"yarn build:dist --no-progress\" \"yarn build:lib\" -n \"dist,lib\" --kill-others-on-fail -r && yarn build:json",
+    "build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config build/config.js --progress --hide-modules",
+    "build:json": "node build/build-json.js",
+    "tsc": "tsc",
+    "build:lib": "node build/build-lib.js",
+    "debug:test": "cross-env NODE_ENV=test node --inspect --inspect-brk ../../node_modules/jest/bin/jest.js --no-cache -i --verbose",
+    "test": "node build/run-tests.js",
+    "test:unix": "cross-env NODE_ENV=test jest",
+    "test:win32": "cross-env NODE_ENV=test jest -i",
+    "test:coverage": "yarn test --coverage",
+    "test:types": "tsc -p ./types/test/tsconfig.json",
+    "lint": "concurrently -n \"tsc,eslint,types\" --kill-others-on-fail \"tsc --noEmit --pretty\" \"eslint --ext .js,.ts src -f codeframe --max-warnings 0\" \"yarn test:types\"",
+    "lint:fix": "concurrently -n \"tsc,eslint,types\" \"tsc --noEmit --pretty\" \"eslint --fix --ext .js,.ts src\" \"yarn test:types\""
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/vue-fontawesome": "^0.1.10",
+    "@types/jest": "^26.0.14",
+    "@types/node": "^14.11.10",
+    "@types/resize-observer-browser": "^0.1.7",
+    "@vue/test-utils": "2.4.6",
+    "autoprefixer": "^9.6.1",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-detective": "^2.0.0",
+    "babel-plugin-module-resolver": "^3.2.0",
+    "babel-plugin-transform-define": "^1.3.1",
+    "babel-polyfill": "^6.26.0",
+    "concurrently": "^4.1.1",
+    "cssnano": "^4.1.10",
+    "dotenv": "^8.0.0",
+    "eslint-plugin-jest": "^24.1.0",
+    "file-loader": "^4.1.0",
+    "fork-ts-checker-webpack-plugin": "^1.6.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "happypack": "^5.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-canvas-mock": "^2.3.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
+    "pug": "^2.0.4",
+    "pug-loader": "^2.4.0",
+    "sass-loader": "^10.2.0",
+    "style-loader": "^0.23.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "ts-loader": "^8.0.6",
+    "url-loader": "^2.1.0",
+    "vue-meta": "3.0.0-alpha.10",
+    "vuetify-loader": "^1.3.0",
+    "webpack-dev-server": "^3.7.2"
+  },
+  "dependencies": {
+    "core-js": "^3.37.1",
+    "vue": "^3.4.21"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.21"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "vetur": {
+    "tags": "dist/json/tags.json",
+    "attributes": "dist/json/attributes.json"
+  },
+  "web-types": "dist/json/web-types.json"
+}

package/src/components/VAlert/VAlert.sass

@@ -0,0 +1,190 @@
+// Imports
+@import './_variables.scss'
+
+// Theme
++theme(v-alert) using ($material)
+  .v-alert--prominent .v-alert__icon
+    &:after
+      background: map-get($material, 'dividers')
+
+// Sheet
++sheet(v-alert, $alert-elevation, $alert-border-radius, $alert-shaped-border-radius)
+
+// Block
+.v-alert
+  display: block
+  font-size: $alert-font-size
+  margin-bottom: $alert-margin
+  padding: $alert-padding
+  position: relative
+  transition: $primary-transition
+
+  &:not(.v-sheet--tile)
+    border-radius: $alert-border-radius
+
+  > .v-icon,
+  > .v-alert__content
+    +ltr()
+      margin-right: $alert-margin
+
+    +rtl()
+      margin-left: $alert-margin
+
+  > .v-icon + .v-alert__content
+    +ltr()
+      margin-right: 0
+
+    +rtl()
+      margin-left: 0
+
+  > .v-alert__content + .v-icon
+    +ltr()
+      margin-right: 0
+
+    +rtl()
+      margin-left: 0
+
+// Elements
+.v-alert__border
+  border-style: solid
+  border-width: $alert-border-width
+  content: ''
+  position: absolute
+
+  &:not(.v-alert__border--has-color)
+    opacity: $alert-border-opacity
+
+  &--left,
+  &--right
+    bottom: 0
+    top: 0
+
+  &--bottom,
+  &--top
+    left: 0
+    right: 0
+
+  &--bottom
+    border-bottom-left-radius: inherit
+    border-bottom-right-radius: inherit
+    bottom: 0
+
+  &--left
+    +ltr()
+      border-top-left-radius: inherit
+      border-bottom-left-radius: inherit
+      left: 0
+
+    +rtl()
+      border-top-right-radius: inherit
+      border-bottom-right-radius: inherit
+      right: 0
+
+  &--right
+    +ltr()
+      border-top-right-radius: inherit
+      border-bottom-right-radius: inherit
+      right: 0
+
+    +rtl()
+      border-top-left-radius: inherit
+      border-bottom-left-radius: inherit
+      left: 0
+
+  &--top
+    border-top-left-radius: inherit
+    border-top-right-radius: inherit
+    top: 0
+
+.v-alert__content
+  flex: 1 1 auto
+
+.v-alert__dismissible
+  +ltr()
+    margin: -16px -8px -16px 8px
+
+  +rtl()
+    margin: -16px 8px -16px -8px
+
+.v-alert__icon
+  align-self: flex-start
+  border-radius: 50%
+  height: $alert-icon-size
+  min-width: $alert-icon-size
+  position: relative
+
+  +ltr()
+    margin-right: 16px
+
+  +rtl()
+    margin-left: 16px
+
+  &.v-icon
+    font-size: $alert-icon-size
+
+.v-alert__wrapper
+  align-items: center
+  border-radius: inherit
+  display: flex
+
+// Modifiers
+.v-alert--border
+  &.v-alert--prominent
+    .v-alert__icon
+      +ltr()
+        margin-left: $alert-border-icon-margin
+
+      +rtl()
+        margin-right: $alert-border-icon-margin
+
+.v-alert--dense
+  padding-top: $alert-padding / 2
+  padding-bottom: $alert-padding / 2
+
+  .v-alert__border
+    border-width: $alert-dense-border-width
+
+.v-alert--outlined
+  background: transparent !important
+  border: $alert-outline !important
+
+  .v-alert__icon
+    color: inherit !important
+
+.v-alert--prominent
+  .v-alert__icon
+    align-self: center
+    height: $alert-prominent-icon-size
+    min-width: $alert-prominent-icon-size
+
+    &.v-icon
+      font-size: $alert-prominent-icon-font-size
+
+      &:after
+        background: currentColor !important
+        border-radius: 50%
+        bottom: 0
+        content: ''
+        left: 0
+        opacity: 0.16
+        position: absolute
+        right: 0
+        top: 0
+
+  &.v-alert--dense .v-alert__icon.v-icon::after
+    transform: scale(1)
+
+.v-alert--text
+  background: transparent !important
+
+  &:before
+    background-color: currentColor
+    border-radius: inherit
+    bottom: 0
+    content: ''
+    left: 0
+    opacity: 0.12
+    position: absolute
+    pointer-events: none
+    right: 0
+    top: 0

package/src/components/VAlert/VAlert.ts

@@ -0,0 +1,256 @@
+import {h, vShow, withDirectives} from 'vue'
+// Styles
+import './VAlert.sass'
+
+// Extensions
+import VSheet from '../VSheet'
+
+// Components
+import VBtn from '../VBtn'
+import VIcon from '../VIcon'
+
+// Mixins
+import Toggleable from '../../mixins/toggleable'
+import Themeable from '../../mixins/themeable'
+import Transitionable from '../../mixins/transitionable'
+
+// Utilities
+import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
+import { getSlot } from '../../util/helpers'
+
+// Types
+import { VNodeData, Transition } from 'vue'
+import { VNode } from 'vue/types'
+
+/* @vue/component */
+export default mixins(
+  VSheet,
+  Toggleable,
+  Transitionable
+).extend({
+  name: 'v-alert',
+
+  emits: ['update:modelValue'],
+
+  props: {
+    border: {
+      type: String,
+      validator (val: string) {
+        return [
+          'top',
+          'right',
+          'bottom',
+          'left',
+        ].includes(val)
+      },
+    },
+    closeLabel: {
+      type: String,
+      default: '$vuetify.close',
+    },
+    coloredBorder: Boolean,
+    dense: Boolean,
+    dismissible: Boolean,
+    closeIcon: {
+      type: String,
+      default: '$cancel',
+    },
+    icon: {
+      type: [Boolean, String],
+      validator (val: boolean | string) {
+        return typeof val === 'string' || val === false
+      },
+    },
+    outlined: Boolean,
+    prominent: Boolean,
+    text: Boolean,
+    type: {
+      type: String,
+      validator (val: string) {
+        return [
+          'info',
+          'error',
+          'success',
+          'warning',
+        ].includes(val)
+      },
+    },
+    modelValue: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    __cachedBorder (): VNode | null {
+      if (!this.border) return null
+
+      let data: VNodeData = {
+        class: ['v-alert__border', {
+          [`v-alert__border--${this.border}`]: true,
+        }]
+      }
+
+      if (this.coloredBorder) {
+        data = this.setBackgroundColor(this.computedColor, data)
+        data.class['v-alert__border--has-color'] = true
+      }
+
+      return h('div', data)
+    },
+    __cachedDismissible (): VNode | null {
+      if (!this.dismissible) return null
+
+      const color = this.iconColor
+
+      return h(VBtn, {
+        class: 'v-alert__dismissible',
+        color,
+        icon: true,
+        small: true,
+        'aria-label': this.$vuetify.lang.t(this.closeLabel),
+        onClick: () => (this.isActive = false),
+      }, [
+        h(VIcon, {
+          color,
+        }, {
+          default: () => this.closeIcon
+        }),
+      ])
+    },
+    __cachedIcon (): VNode | null {
+      if (!this.computedIcon) return null
+
+      return h(VIcon, {
+        class: 'v-alert__icon',
+        color: this.iconColor,
+      }, {
+        default: () => this.computedIcon
+      })
+    },
+    classes (): object {
+      const classes: Record<string, boolean> = {
+        ...VSheet.computed.classes.call(this),
+        'v-alert--border': Boolean(this.border),
+        'v-alert--dense': this.dense,
+        'v-alert--outlined': this.outlined,
+        'v-alert--prominent': this.prominent,
+        'v-alert--text': this.text,
+      }
+
+      if (this.border) {
+        classes[`v-alert--border-${this.border}`] = true
+      }
+
+      return classes
+    },
+    computedColor (): string {
+      return this.color || this.type
+    },
+    computedIcon (): string | boolean {
+      if (this.icon === false) return false
+      if (typeof this.icon === 'string' && this.icon) return this.icon
+      if (!['error', 'info', 'success', 'warning'].includes(this.type)) return false
+
+      return `$${this.type}`
+    },
+    hasColoredIcon (): boolean {
+      return (
+        this.hasText ||
+        (Boolean(this.border) && this.coloredBorder)
+      )
+    },
+    hasText (): boolean {
+      return this.text || this.outlined
+    },
+    iconColor (): string | undefined {
+      return this.hasColoredIcon ? this.computedColor : undefined
+    },
+    isDark (): boolean {
+      if (
+        this.type &&
+        !this.coloredBorder &&
+        !this.outlined
+      ) return true
+
+      return Themeable.computed.isDark.call(this)
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['outline', 'outlined'],
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  methods: {
+    genWrapper (): VNode {
+      const children = [
+        getSlot(this, 'prepend') || this.__cachedIcon,
+        this.genContent(),
+        this.__cachedBorder,
+        getSlot(this, 'append'),
+        this.$slots.close
+          ? this.$slots.close({ toggle: this.toggle })
+          : this.__cachedDismissible,
+      ]
+
+      const data: VNodeData = {
+        class: 'v-alert__wrapper',
+      }
+
+      return h('div', data, children)
+    },
+    genContent (): VNode {
+      return h('div', {
+        class: 'v-alert__content',
+      }, getSlot(this))
+    },
+    genAlert (): VNode {
+      let data: VNodeData = {
+        class: ['v-alert', this.classes],
+        role: 'alert',
+        ...this.listeners$,
+        style: this.styles
+      }
+
+      const directives = [
+        [
+          vShow,
+          this.isActive
+        ]
+      ]
+
+      if (!this.coloredBorder) {
+        const setColor = this.hasText ? this.setTextColor : this.setBackgroundColor
+        data = setColor(this.computedColor, data)
+      }
+
+      return withDirectives(h('div', data, [this.genWrapper()]), directives)
+    },
+    /** @public */
+    toggle () {
+      this.isActive = !this.isActive
+    },
+  },
+
+  render (): VNode {
+    const render = this.genAlert()
+
+    if (!this.transition) return render
+
+    return h(Transition, {
+      name: this.transition,
+      origin: this.origin,
+      mode: this.mode
+    }, [render])
+  },
+})