maz-ui 2.3.12 → 3.0.0-beta.4

package/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+ie > 10

package/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintignore

@@ -0,0 +1,2 @@
+dist
+package/components_tmp

package/.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
+  plugins: ['vue', 'prettier', 'unicorn'],
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier',
+    '@vue/eslint-config-typescript/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2021,
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: false,
+        ignores: [],
+      },
+    ],
+    'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+  },
+}

package/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+lib

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "printWidth": 80,
+  "endOfLine": "auto",
+  "vueIndentScriptAndStyle": true
+}

package/.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
+  },
+  "eslint.validate": ["vue", "javascript", "typescript"],
+  "eslint.packageManager": "npm",
+  "editor.quickSuggestions": {
+    "other": true,
+    "comments": false,
+    "strings": true
+  },
+  "css.validate": false,
+  "emmet.includeLanguages": {
+    "javascript": "javascriptreact",
+    "vue-html": "html",
+    "razor": "html",
+    "plaintext": "jade"
+  }
+}

package/Makefile

@@ -0,0 +1,79 @@
+.PHONY: lint build install reinstall lint-staged
+
+lint:
+	npm run lint
+
+build:
+	make clean-build && npm run build
+
+clean-build:
+	npm run clean
+
+build-watch:
+	npm run build:watch
+
+install:
+	npm i
+
+reinstall:
+	rm -rf ./node_modules
+	rm package-lock.json
+	npm i
+
+lint-staged: ## lint-staged
+	npm run pre-commit
+
+define GetFromPkg
+	$(shell node -p "require('./package.json').$(1)")
+endef
+
+define bump-version
+	VERSION=`node -pe "require('./package.json').version"` && \
+	NEXT_VERSION=`node -pe "require('semver').inc(\"$$VERSION\", '$(1)')"` && \
+	npm version $$NEXT_VERSION
+endef
+
+define bump-version-tag
+	VERSION=`node -pe "require('./package.json').version"` && \
+	NEXT_VERSION=`node -pe "require('semver').inc(\"$$VERSION\", 'prerelease', '$(1)')"` && \
+	npm version $$NEXT_VERSION
+endef
+
+define push-version
+	@$(call bump-version,$(1))
+	make install
+	make clean-build
+	make build
+	git add --all
+	git commit -m "chore: pre-build"
+	# npm publish
+	# git push origin HEAD
+endef
+
+define push-version-tag
+	@$(call bump-version-tag,$(1))
+	make install
+	make clean-build
+	make build
+	npm publish --tag $(1)
+	git add --all
+	git commit -m "chore(lib): bump-version $(1)"
+	git push origin HEAD
+endef
+
+commit:
+	git add --all
+	git commit -m "chore(lib): bump-version to $(call GetFromPkg,version)"
+	git push origin HEAD
+
+publish-version-tag:
+	@$(call push-version-tag,$(tag))
+
+publish-version:
+	@$(call push-version,patch)
+
+publish-version-minor:
+	@$(call push-version,minor)
+
+publish-version-major:
+	@$(call push-version,major)

package/babel.config.js

@@ -0,0 +1,17 @@
+const devPresets = ['@vue/babel-preset-app']
+const buildPresets = [
+  [
+    '@babel/preset-env',
+    // Config for @babel/preset-env
+    {
+      // Example: Always transpile optional chaining/nullish coalescing
+      // include: [
+      //   /(optional-chaining|nullish-coalescing)/
+      // ],
+    },
+  ],
+  '@babel/preset-typescript',
+]
+module.exports = {
+  presets: process.env.NODE_ENV === 'development' ? devPresets : buildPresets,
+}

package/build/rollup.config.js

@@ -0,0 +1,207 @@
+// rollup.config.js
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+
+import vue from 'rollup-plugin-vue'
+import alias from '@rollup/plugin-alias'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import babel from '@rollup/plugin-babel'
+import url from '@rollup/plugin-url'
+
+import PostCSS from 'rollup-plugin-postcss'
+import nested from 'postcss-nested'
+import simpleVars from 'postcss-simple-vars'
+import postcssImport from 'postcss-import'
+import postcssUrl from 'postcss-url'
+import autoprefixer from 'autoprefixer'
+
+import { terser } from 'rollup-plugin-terser'
+import ttypescript from 'ttypescript'
+import typescript from 'rollup-plugin-typescript2'
+import minimist from 'minimist'
+import commonjs from '@rollup/plugin-commonjs'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+
+const INPUT_ENTRY = './package/index.ts'
+const COMPONENT_INPUT = './package/components/index.ts'
+
+// Get browserslist config and remove ie from es build targets
+const esbrowserslist = readFileSync('./.browserslistrc')
+  .toString()
+  .split('\n')
+  .filter((entry) => entry && entry.substring(0, 2) !== 'ie')
+
+// Extract babel preset-env config, to combine with esbrowserslist
+const babelPresetEnvConfig = require('../babel.config').presets.filter(
+  (entry) => entry[0] === '@babel/preset-env',
+)[0][1]
+
+const argv = minimist(process.argv.slice(2))
+
+const projectRoot = resolve(__dirname, '..')
+
+const postcssConfigList = [
+  postcssImport({
+    resolve(id, basedir) {
+      // resolve alias @css, @import '@css/style.css'
+      // because @css/ has 5 chars
+      if (id.startsWith('@css')) {
+        return resolve('./tailwindcss/css', id.slice(5))
+      }
+      // resolve node_modules, @import '~normalize.css/normalize.css'
+      // similar to how css-loader's handling of node_modules
+      if (id.startsWith('~')) {
+        return resolve('./node_modules', id.slice(1))
+      }
+      // resolve relative path, @import './components/style.css'
+      return resolve(basedir, id)
+    },
+  }),
+  nested,
+  simpleVars,
+  postcssUrl({ url: 'inline' }),
+  autoprefixer({
+    overrideBrowserslist: '> 1%, IE 6, Explorer >= 10, Safari >= 7',
+  }),
+]
+
+const baseConfig = {
+  input: INPUT_ENTRY,
+  plugins: {
+    preVue: [
+      alias({
+        entries: [
+          {
+            find: '@',
+            replacement: `${resolve(projectRoot, 'src')}`,
+          },
+        ],
+      }),
+    ],
+    replace: {
+      preventAssignment: true,
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+    vue: {
+      target: 'browser',
+      preprocessStyles: true,
+      postcssPlugins: [...postcssConfigList],
+    },
+    postVue: [
+      nodeResolve({
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      }),
+      // Process only `<style module>` blocks.
+      PostCSS({
+        modules: {
+          generateScopedName: '[local]___[hash:base64:5]',
+        },
+        include: /&module=.*\.css$/,
+        plugins: postcssConfigList,
+      }),
+      // Process all `<style>` blocks except `<style module>`.
+      PostCSS({ include: /(?<!&module=.*)\.css$/ }),
+      commonjs(),
+      url({
+        include: ['**/*.svg', '**/*.png', '**/*.gif', '**/*.jpg', '**/*.jpeg'],
+      }),
+    ],
+    babel: {
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      babelHelpers: 'runtime',
+      plugins: ['@babel/plugin-transform-runtime'],
+    },
+  },
+}
+
+// ESM/UMD/IIFE shared settings: externals
+// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
+const external = [
+  // list external dependencies, exactly the way it is written in the import statement.
+  // eg. 'jquery'
+  'vue',
+]
+
+// UMD/IIFE shared settings: output.globals
+// Refer to https://rollupjs.org/guide/en#output-globals for details
+const globals = {
+  // Provide global variable names to replace your external imports
+  // eg. jquery: '$'
+  vue: 'Vue',
+}
+
+// Customize configs for individual targets
+const buildFormats = []
+
+if (!argv.format || argv.format === 'es') {
+  const esConfig = {
+    ...baseConfig,
+    input: COMPONENT_INPUT,
+    external,
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      sourcemap: true,
+      exports: 'named',
+    },
+    plugins: [
+      peerDepsExternal(),
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      // Only use typescript for declarations - babel will
+      // do actual js transformations
+      typescript({
+        typescript: ttypescript,
+        useTsconfigDeclarationDir: true,
+        emitDeclarationOnly: true,
+      }),
+      babel({
+        ...baseConfig.plugins.babel,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              ...babelPresetEnvConfig,
+              targets: esbrowserslist,
+            },
+          ],
+        ],
+      }),
+      terser({ output: { ecma: 5 } }),
+    ],
+  }
+  buildFormats.push(esConfig)
+}
+
+if (!argv.format || argv.format === 'cjs') {
+  const umdConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      dir: 'dist/cjs',
+      format: 'cjs',
+      name: 'MazUi',
+      exports: 'named',
+      sourcemap: true,
+      globals,
+    },
+    plugins: [
+      peerDepsExternal(),
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+      terser({ output: { ecma: 5 } }),
+    ],
+  }
+  buildFormats.push(umdConfig)
+}
+
+// Export config
+export default buildFormats

package/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.vue$': 'vue-jest',
+  },
+  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
+}

package/package/components/MazArrowIcon.vue

@@ -0,0 +1,53 @@
+<template>
+  <svg
+    mlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    class="maz-arrow-icon"
+    :class="[{ 'is-white': dark }, orientation]"
+  >
+    <path
+      :fill="hex"
+      :class="[hex]"
+      class="arrow"
+      d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
+    />
+    <path fill="none" d="M0 0h24v24H0V0z" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  defineProps({
+    dark: { type: Boolean, default: false },
+    hex: { type: String, default: undefined },
+    size: { type: Number, default: 24 },
+    orientation: { type: String, default: 'bottom' },
+  })
+</script>
+
+<style lang="postcss" scoped>
+  .maz-arrow-icon {
+    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    path.arrow {
+      @apply maz-fill-current;
+    }
+
+    &.is-white path.arrow {
+      fill: white;
+    }
+
+    &.top {
+      transform: rotate(180deg);
+    }
+
+    &.right {
+      transform: rotate(-90deg);
+    }
+
+    &.left {
+      transform: rotate(90deg);
+    }
+  }
+</style>

package/package/components/MazAvatar.vue

@@ -0,0 +1,178 @@
+<template>
+  <Component
+    :is="componentType"
+    :style="{ fontSize: size }"
+    class="m-avatar"
+    :class="[
+      {
+        '--has-link': isLink,
+      },
+    ]"
+    v-bind="$attrs"
+    :href="href"
+    :to="to"
+    :target="isLink ? target : undefined"
+  >
+    <div
+      class="m-avatar__wrapper"
+      :tabindex="clickable ? 0 : -1"
+      :class="{
+        '--has-shadow': !noElevation,
+        '--bordered': bordered,
+        '--clickable': clickable,
+        '--square': square,
+        '--has-initial': !src && caption,
+      }"
+      @keydown.enter="clickable ? $emit('click', $event) : undefined"
+    >
+      <MazLazyImg
+        v-if="src"
+        class="m-avatar__picture"
+        :image="src"
+        :alt="alt"
+        image-height-full
+        :no-loader="noLoader"
+        @click="clickable ? $emit('click', $event) : null"
+      />
+      <slot v-if="caption" name="round-text">
+        <span class="m-avatar__initial"> {{ caption?.charAt(0) }} </span>
+      </slot>
+
+      <button
+        v-if="clickable"
+        type="button"
+        tabindex="-1"
+        class="m-avatar__button maz-flex maz-flex-center"
+        @click="$emit('click', $event)"
+      >
+        <slot name="icon">
+          <MazIcon name="pencil" class="m-avatar__button__icon" />
+        </slot>
+      </button>
+    </div>
+    <slot name="caption">
+      <p v-if="showCaption && caption" class="m-avatar__caption">
+        {{ caption }}
+      </p>
+    </slot>
+  </Component>
+</template>
+
+<script lang="ts" setup>
+  import { PropType, computed } from 'vue'
+  import MazLazyImg from './MazLazyImg.vue'
+  import MazIcon from './MazIcon.vue'
+
+  const props = defineProps({
+    // url or path of the image
+    src: {
+      type: String as PropType<undefined | null | string>,
+      default: undefined,
+    },
+    caption: {
+      type: String as PropType<undefined | null | string>,
+      default: undefined,
+    },
+    // url or path to link another page
+    href: { type: String, default: undefined },
+    // route config
+    to: { type: Object, default: undefined },
+    // alt text of image
+    alt: { type: String, default: 'avatar image' },
+    // target attribute of link (if url is provide)
+    target: { type: String, default: '_self' },
+    // size of avatar
+    size: { type: String, default: undefined },
+    // add border around the avatar
+    bordered: { type: Boolean, default: false },
+    // add an edit layer & emit `edit` event on click
+    clickable: { type: Boolean, default: false },
+    // Make the avatar square
+    square: { type: Boolean, default: false },
+    // Remove the shadow behind the avatar
+    noElevation: { type: Boolean, default: false },
+    showCaption: { type: Boolean, default: false },
+    imageHeightFull: { type: Boolean, default: false },
+    noLoader: { type: Boolean, default: false },
+  })
+
+  const componentType = computed(() =>
+    props.to ? 'RouterLink' : props.href ? 'a' : 'div',
+  )
+  const isLink = computed(() => !!props.to || !!props.href)
+
+  defineEmits(['click'])
+</script>
+
+<style lang="postcss" scoped>
+  .m-avatar {
+    @apply maz-inline-flex maz-flex-col maz-flex-center;
+    @apply maz-no-underline !important;
+
+    &__caption {
+      @apply maz-mt-2 maz-w-full maz-truncate maz-text-center maz-text-base maz-font-medium maz-capitalize maz-text-black;
+    }
+
+    &__initial {
+      @apply maz-text-2xl maz-capitalize maz-text-white;
+    }
+
+    &__wrapper {
+      @apply maz-relative maz-flex maz-h-12 maz-w-12 maz-flex-none maz-justify-center maz-overflow-hidden
+      maz-rounded-full maz-bg-gray-50;
+
+      &.--clickable {
+        & .m-avatar__button {
+          @apply maz-outline-none maz-absolute maz-inset-0 maz-w-full maz-scale-0 maz-cursor-pointer maz-rounded-full maz-border-none
+           maz-bg-transparent maz-opacity-0;
+
+          transition: all 200ms ease-in-out;
+          transition-property: transform, filter;
+
+          &__icon {
+            @apply maz-h-6 maz-w-6 maz-text-white;
+          }
+        }
+
+        &:hover,
+        &:focus {
+          & .m-avatar__picture {
+            filter: blur(1.5px);
+          }
+
+          & .m-avatar__button {
+            @apply maz-scale-105 maz-opacity-100;
+
+            background-color: var(--maz-color-danger-alpha);
+          }
+        }
+      }
+
+      &.--bordered {
+        @apply maz-border-2 maz-border-white;
+      }
+
+      &.--square {
+        @apply maz-rounded-lg;
+      }
+
+      &.--has-shadow {
+        @apply maz-shadow;
+      }
+
+      &.--has-initial {
+        @apply maz-items-center maz-bg-primary;
+
+        &.--clickable {
+          & .m-avatar__button {
+            @apply maz-bg-danger;
+          }
+        }
+      }
+    }
+
+    &.--has-link {
+      @apply maz-cursor-pointer;
+    }
+  }
+</style>